Files
OurUmbraco/OurUmbraco.Site/css/custom.css
T
Sebastiaan Janssen 810cbd267f Initial commit
2012-12-17 09:41:11 +01:00

523 lines
18 KiB
CSS

/* THIS STYLESHEET CONTAINS ALL THE THINGS WE'VE ADDED TO THE DESIGN */
/* adjusting the header if there is no promoted content */
.Class-VideoTutorial h1{display: none !Important;}
.class-empty #wrapper{padding-top: 150px !Important;}
.class-emtpy #header{height: 150px !Important;}
.class-shopFlow #wrapper{padding-top: 200px !Important;}
.class-shopFlow #header{padding-left: 0px; height: 200px !Important;}
.class-shopFlow .breadcrumb{display: none !Important;}
#panes div.tabPanel{display: none;}
.get-started-table td {vertical-align: top; width: 33%;}
.get-started-table li {margin-bottom: 5px;}
.get-started-table ul {margin: 0;}
td {vertical-align: top;}
.no-margin {margin:0;}
.boxLeft {
float: left;
width: 48%
}
.boxRight {
float: right;
width: 48%
}
/* SUBMITTED SITES */
#tagSelector{height: 130px; display: block; list-style: none;
margin-bottom: 20px; padding: 0px;}
#tagSelector li{float: left; margin: 0px; display: block; width: 180px; padding: 5px;}
#tagSelector li a{padding: 3px;}
#tagSelector li a.current{font-weight: bold;}
#tagSelector li.header{width: 100%; float: none; color: #444444; font-weight: bold; text-size: 12px;}
#viewToggle{text-align: center; display: block; width: 120px; padding: 6px; border: solid 1px #e7e7e7; text-decoration: none; clear: both; margin-bottom: 20px; }
#featuredSites{display: block; margin: 0px; padding: 0px;}
#featuredSites li{display: block; text-align: center; width: 297px; height: 270px; float: left; margin: 0px 10px 14px 0px; padding: 7px;
border-top: 1px solid #E7E7E7;
border-left: 1px solid #E7E7E7;
border-right: 2px solid #E7E7E7;
border-bottom: 2px solid #E7E7E7;
overflow: hidden
}
#sites.grid{display: block; margin: 0px; padding: 0px;}
#sites.grid li{opacity:0.2; display: block; text-align: center; width: 135px; height: 145px; float: left; margin: 0px 20px 20px 0px; padding: 0px;
background: #252525; color: #fff;
overflow: hidden
}
#sites.grid li.last{margin-right: 0px; clear: right;}
#sites.grid li a.thumb{color: #fff; display: block; margin: auto; background: #fff no-repeat top center; width: 136px; padding-top: 101px; height: 1px; overflow: hidden;}
#sites.grid li h5{margin-top: 3px; padding: 5px; font-size: 11px; font-weight: normal; color: #fff;}
#sites.grid li h5 a{color: #fff;}
#sites.grid li p{display: none;}
#sites.grid li.show{opacity: 0.99;}
#sites.list{background: none !Important; display: block; margin: 0px; padding: 0px; width: auto; list-style: none;}
#sites.list li{background: none !Important; opacity: 0.99 !Important; display: none; border-bottom: 1px solid #ccc; text-align: left;
padding: 10px 10px 10px 150px; position: relative; min-height: 90px; height: auto !Important; height: 90px;}
#sites.list li a.thumb{display: block; border: 1px solid #999; background: no-repeat top center; width: 115px; padding-top: 81px; height: 1px;
overflow: hidden; position: absolute; top: 15px; left: 10px;}
#sites.list li h5{margin: 2px 0px 5px 0px; padding: 2px; font-size: 16px;}
#sites.list li p{}
#sites.list li.show{opacity: 0.99 !Important; display: block;}
div#showcase{width: 750px; height: 470px; overflow: auto; padding: 5px;}
div#showcase div.image{margin: 0px 0px 20px 20px; width: 450px; height: 280px; overflow: hidden; border: 1px solid #ccc; text-align: center;
position: absolute; top: 20px; right:0px;
}
div#showcase h1{float: left; color: #575757; width: 280px;}
div#showcase div.desc{overflow: auto; position: absolute; bottom: 0px; height: 125px;
padding: 7px; border-top: #e7e7e7 1px solid; margin-top: 35px; width: 745px;}
div#showcase div.desc p{font-size: 12px !Important; line-height: 20px;}
div#showcase dl{clear: left;}
div#showcase dt{font-weight: bold;}
div#showcase dd{margin-bottom: 10px;}
/* FAQ */
.faqGroup{list-style: none; margin: 0; padding: 0px;}
.faqGroup li{display: block; width: 350px; height: 100px; float: left; margin:0px 20px 30px 0px;}
.faqGroup li h3{margin: 5px 0 0 0; padding: 0px;}
.faqGroup li p{padding-top: 10px; margin: 0px; }
.faqGroup li.alt{float: right; }
.faqGroup h3 a{color: #000 !Important; text-decoration: none !Important;}
.faqGroup a:hover h3{color: #000; text-decoration: underline !Important;}
.faqGroupFeatureLink li{display: block; width: 150px; float: left; margin:0px 10px 15px 0px;}
.faqGroupFeatureLink a{color: #000 !Important; text-decoration: none !Important;}
.faqGroupFeatureLink a:hover{color: #000; text-decoration: underline !Important;}
/* Partners */
.solutionProvider img{float: right; margin-top: 10px}
.solutionProvider .meta{margin-bottom: 15px}
.solutionProvider .meta p{font-size: 13px; margin-bottom: 0px}
.solutionProvider{border-bottom: 1px solid #efefef; padding: 10px; margin-bottom: 10px}
.goldProvider{border: 1px solid #efefef; background: #f7f7f7;}
/* GOLD PARTNERS */
ul.goldPartners, ul.standardPartners{margin: 0px; padding: 0px;}
li.partner{display: block; float: left; padding: 10px; margin: 7px; width: 225px; border: 1px solid #efefef}
li.partner a, li.partner a *{text-decoration: none !Important; color: #000}
li.partner h3{color: #000; font-size: 18px; font-weight: bold; margin: 0px;}
li.partner span.location{line-height: 15px; display: block; padding: 7px 0px 7px 0px; margin-bottom: 10px; border-bottom: #dbdbdb 1px solid; color: #666 !Important; font-size: 12px;}
li.partner div.providerLogo{height: 160px; display: block; overflow: hidden;}
li.partner span.abstract{border: 1px solid #efefef; line-height: 17px; display: none; font-size: 12px; color: #666; padding: 10px; background: #f9f9f9; height: 138px;}
ul.goldPartners li.partner a:hover img{display: none;}
ul.goldPartners li.partner a:hover span.abstract{display: block;}
li.partner a:hover h3{text-decoration: underline !Important;}
li.partner img{margin: auto;}
ul.standardPartners li.partner h3{height: 18px; overflow: hidden}
ul.standardPartners li.partner{width: 135px; padding: 3px; margin: 7px;}
ul.standardPartners li.partner h3{font-size: 12px;}
ul.standardPartners li.partner div.providerLogo{height: 90px;}
ul.standardPartners li.partner span.location{line-height: 10px; font-size: 12px;}
/*Licenses */
.licenseTable td{padding: 7px; border-bottom: 1px solid #efefef;}
.licenseTable{margin-bottom: 30px;}
/* PRODUCTS */
div.product{padding-left: 70px; padding-bottom: 20px; background: url(/images/bg-ico2.gif) no-repeat 10px 0px; }
/* ABOUT US */
.class-team img {margin: 0 15px 15px 15px;}
/* TEST YOUR NEEDS */
#test-your-needs-container p {
margin-bottom: 2px;
}
.need-cost {
font-weight: bold;
margin-bottom: 8px;
}
.need-result{
padding-left: 60px;
background: url(/images/custom/need-result-selected.png) no-repeat;
}
.need-result-summary{
padding-left: 60px;
}
.needs-total {
font-weight: bold;
font-size: 130%;
padding-bottom: 10px;
}
.btn-add-to-cart {
display:block;
text-indent:-9999px;
overflow:hidden;
background:url(/images/custom/btn-order-inline.png) no-repeat;
width:152px;
height:50px;
margin-top: 25px;
}
.btn-add-to-cart:hover {
background:url(/images/custom/btn-order-inline-hover.png) no-repeat;
}
.btn-calculate-my-price {
display:block;
text-indent:-9999px;
overflow:hidden;
background:url(/images/custom/btn-calculate-price.png) no-repeat;
width:152px;
height:50px;
margin-top: 25px;
}
.btn-calculate-my-price:hover {
background:url(/images/custom/btn-calculate-price-hover.png) no-repeat;
}
.test-your-needs-questions{list-style: none; margin-left: 0; padding-left: 0;}
.test-your-needs-questions li{display: block; margin: 0; padding: 10px 0;}
.test-your-needs-questions input {margin-top: 0px; padding-top: 0px;}
.test-your-needs-questions label{padding-left: 5px; font-size: 20px;}
#test-your-needs-container h2 {
line-height: 125%;
}
/* 2 column pages */
.two-column .left-column{width: 380px;}
.two-column .right-column{width: 380px;}
.noSidebar .left-column, .noSidebar .right-column{width: 450px;}
/* 3 column pages */
.three-column .left-column{width: 310px; margin: 0px;}
.three-column .center-column{width: 310px; float: left; margin: 0px 15px 0px 15px;}
.three-column .right-column{width: 310px; margin: 0px;}
/* SHOP FLOW UL */
ul.shop-flow{display: block; list-style: none; height: 50px; padding: 0px; margin: 0px; margin-left: -10px;}
ul.shop-flow li{ display: block; padding: 0px; margin: 0px; border-bottom: 3px solid #000; float: left; height: 40px; margin-right: 2px;}
ul.shop-flow li span{display: block; padding: 20px;}
ul.shop-flow li.active{border-color: #ff6e00;}
ul.shop-flow li.done{border-color: #7a7a7a;}
/* SHOP FLOW BUTTONS */
#umbracoFormNavigation a{
display: block;
width: 93px;
height: 22px;
padding-top: 6px;
font-size: 14px;
text-decoration: none;
color: white;
background: url(/images/custom/btn_sqr_blank.png) no-repeat top left;
text-align: center;
}
/* Shop flow Checkout */
.checkOut #couponCode{display: none;}
/*BREADCRUMB */
ul.breadcrumb{z-index: 99; position: relative; list-style: none; margin: 0; padding: 0; margin-bottom: 20px;}
ul.breadcrumb li{color: #999 !Important; list-style: none; margin: 0; padding: 0; display: inline;}
ul.breadcrumb li a{color: #999 !Important;}
/* BIRD */
#bird{z-index: 999; position: relative; background: no-repeat url(/images/custom/bird0.gif) bottom left; height: 100px; width: 100px;}
/* EXTRA HEADER BUTTONS */
a.support{
width:108px;
height:108px;
text-indent:-9999px;
overflow:hidden;
float:right;
background:url(../images/btn-support.png) no-repeat;
}
a.support:hover{background:url(../images/btn-support-hover.png) no-repeat;}
/* VIDEO PAGE*/
div.videoChapter, div.videoChapter *{text-decoration: none !Important; color: #000 !Important;}
.video-list a{text-decoration: none !Important; color: #000 !Important; font-weight: normal; font-size: 10px}
/* New list of videos... */
.video-list2{list-style: none; display: block; padding: 0px; marging: 0px;}
.video-list2 li{width: 140px; overflow: hidden; display: block; float: left; margin: 7px; height: 145px; background: #252525;}
.video-list2 li .image{overflow: hidden; display: block; height: 100px;}
.video-list2 li a{font-size: 11px; font-weight: normal; line-height: 13px; color: #fff !Important; text-decoration: none !Important; display: block; text-align: center;}
.video-list2 li a:hover{text-decoration: underline !Important;}
.video-list2 span.text2{display: block; padding: 4px;}
.video-list2 span.image{display: block; background: #efefef}
/*Video Tutorial Page*/
#VideoPlayer{margin-top: 0px; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 20px;}
ul#VideoRelatedVideos{height: 555px; overflow: auto; float: right; width: 220px; list-style: none; padding: 0px; margin: 0px; }
ul#VideoRelatedVideos li{display: block; border-bottom: 1px solid #efefef; padding: 10px; height: 50px;}
ul#VideoRelatedVideos li.header{padding: 0px 10px 0px 10px; height: 25px}
ul#VideoRelatedVideos li img{float: left; margin: 0px 10px 10px 0px; border: 1px solid #efefef; background: #fff}
ul#VideoRelatedVideos li h5{padding: 0px; font-weight: normal; margin: 0; font-size: 12px; line-height: 16px}
ul#VideoRelatedVideos li h3{padding: 0px; margin: 0px; line-height: 20px}
ul#VideoRelatedVideos li.playing{background: #efefef;}
/*Featured video */
#tutorialFeature{border-bottom: 2px solid #EFF2F2; padding: 10px; margin-bottom: 10px; color: #666;}
#tutorialFeature h2, #tutorialFeature p, #tutorialFeature li{color: #666;}
#tutorialFeature a.preview{margin: 10px; margin-right: 35px; width: 350px; height: 190px; float: left; border: 1px solid #666}
#tutorialFeature ul{padding: 0px; list-style: none;}
#tutorialFeature ul li{padding-left: 20px; display: block; }
#tutorialFeature img{margin-bottom: 20px;}
/*developer page */
.ajax ul{list-style: none; padding: 0px; margin: 0px; margin-bottom: 4px}
.ajax ul li{display: block; padding: 5px; border-bottom: 1px solid #efefef; height: 50px}
.ajax ul li small{display: block; padding: 2px; color: #999}
.ajax ul li img{width: 48px; height: 48px; float: left; margin: 0px 7px 5px 0px;}
/* Training */
table.reservations{}
table.reservations td, table.reservations th{padding: 7px; text-align: left; border-bottom: 1px solid #efefef}
table.reservations tbody th{width: 120px;}
table.reservations tbody td{padding-right: 10px;}
table.reservations tbody input{padding: 2px; width: 200px; font-size: 16px;}
.center{display: block; padding: 2px; text-align: center}
.eventList{margin: 0px; padding: 0px; list-style: none;}
.eventList li{margin: 0px; padding: 3px; border-bottom: 1px solid #efefef; display: block;}
.eventList h4{padding: 0px; margin: 0}
.eventList small{ color: #666;}
/*RELEASES*/
.releases-list a{color: black !Important; text-decoration: none !Important;}
.releases-list .summary{
padding: 10px; background: #efefef; margin: 7px 7px 7px 20px; display: none;
}
/* BLOG */
p.postmetadata{color: #666; margin-bottom: 30px}
.post small{color: #666; margin-top: -10px; padding-bottom: 15px; display: block;}
#commentform{
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#commentform #gravatar{
float:right;
margin-right: 190px;
margin-top: 20px;
}
#commentform label
{
float:none;
}
#commentform .form-input{
margin-top: 5px;
margin-bottom: 5px;
}
#commentform .form-input textarea{
width: 400px;
}
#commentform .error{
padding:0 0em;
}
#commentform label.error{
border:none;
padding:0 0.8em;
}
#commentform label.error {
background:#FFF;
border-color:#FBC2C4;
color:#8A1F11;
}
#commentPosted {
border:1px solid #DDDDDD;
margin-bottom:0.5em;
padding:0 0.8em;
padding:10px;
}
#commentPosted {
background:#FFF6BF none repeat scroll 0 0;
border-color:#FFD324;
color:#514721;
}
ol.commentlist{margin-left: 0px; padding: 0px; list-style: none;}
ol.commentlist li{
margin-bottom: 10px;
padding: 10px;
background: #FAFAFA;
}
ol.commentlist li small.commentmetadata{display: block; font-size: 10px; padding-bottom: 5px;}
ol.commentlist li small.commentmetadata a{color: #999;}
ol.commentlist li img.gravatar{float: right; margin: 0px 0xp 10px 10px; border: 1px solid #ccc; padding: 1px;}
/* Twitter */
#twitterUpdates{padding: 0px; margin: 0px; list-style: none}
#twitterUpdates li{display: block; padding: 5px; margin-bottom: 20px;}
#twitterUpdates li img{float: left; clear: left; margin: 0px 20px 20px 0px;}
/* SEARCH */
.searchResults{list-style: none; padding: 0px; margin: 0px;}
.searchResults li{display: block; padding-left: 60px; background: url(/images/custom/search_text.gif) no-repeat 15px 7px;}
.searchResults li.videochapter, .searchResults li.videotutorial{background-image: url(/images/custom/search_video.gif);}
.searchResults li.umbracoblogpost{background-image: url(/images/custom/search_blog.gif);}
.searchResults li small{color: #666; display: block; font-size: 11px}
.searchResults li h3{margin-bottom: 2px;}
.searchResults li p{margin-top: 2px;}
/* Paypal redirect */
body.redirecting{
margin-top: 100px;
text-align: center;
}
body.redirecting h1{display: block !Important; font-size: 22px}
body.redirecting div{
margin: auto;
text-align: center;
width: 600px;
padding: 30px;
font-size: 18px;
color: #666;
background-color: #fff;
border: 5px solid #CCDDFF
}
/* -- 23Videos (List for 23videos - used on CG11 ticket page) -- */
#video23List { margin:0; padding:0; }
#video23List li { display:inline-block; height:140px; list-style-type:none; margin:0 2px; overflow:hidden; position:relative; width:170px;}
#video23List li a { color:#fff; display:block; text-decoration:none; }
#video23List li img { position:absolute; z-index:10; }
#video23List li span { background:#000; background:rgba(0,0,0,0.8); bottom:0; color:#fff; font-size:11px; height:30px; /*40-5-5=30*/ line-height:12px; padding:5px; position:absolute; width:160px; /*170-5-5=160*/ z-index:11; }
/* -- Image Cover for Convince your boss pdf -- */
.convinceCover { -moz-box-shadow:1px 1px 5px #666; -o-box-shadow:1px 1px 5px #666; -webkit-box-shadow:1px 1px 5px #666; box-shadow:1px 1px 5px #666; float:left; margin-right:20px; }
/* -- CodeGarden homepage panel & button text --*/
.tabset li a span.codegarden { background:url(../images/custom/text-codegarden-panel-label.png) no-repeat 0 0; width:92px; }
.promo-box .cyan-alt .container { background:url(../images/custom/bg-container-cyan-alt.jpg) no-repeat scroll 50% 0 transparent; }
.cgPanelHeader { background:url(../images/custom/text-codegarden-panel-header.png) no-repeat; height:89px; overflow:hidden; text-indent:-9999px; width:459px;}
.cgPanelText { width:470px; }
.cgBuyTicketBtn { background:url(../images/custom/btn_get-your-ticket.png) no-repeat 0 0; cursor: pointer; float: right; height: 108px; margin:20px 0 0 15px; overflow: hidden; text-indent: -9999px; width: 108px; }
.cgBuyTicketBtn:hover { background-position:0 -108px; }
/* -- Nivio Slider styles --*/
#slider {
position:relative;
width:692px;
height:461px;
background:url(../images/nivio-slider-2.4/loading.gif) no-repeat 50% 50%;
/*margin-bottom:50px;*/
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(../images/nivio-slider-2.4/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(../images/nivio-slider-2.4/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption
{
color:#fff;
}
.nivo-caption p { color:#fff; }
.nivo-caption a {
text-decoration:underline;
}
/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */