/* ------------------------------------------------- URI: http://www.bravedesign.uk.com/ Created by Forte Trinity ------------------------------------------------- CONTENTS 1: SITE MASTER SETUP (including reset from Tripoli) 2: TYPOGRAPHY/DESIGN 3: LAYOUT 3.1 main form 3.2 container 3.3 header 3.4 content 3.5 primary content 3.6 secondary content 3.7 tertiary content 3.8 footer 4: GLOBAL ELEMENTS / CONTROLS 4.1 accessibility 5: TEMPLATE / PAGE SPECIFIC 6: USEFUL CLASSES /* ----------------------------------------------- 1. SITE MASTER SETUP ----------------------------------------------- */ /* Imported mostly from Tripoli reset.css - http://www.monc.se/tripoli/css/reset.css */ * { margin:0; padding:0; text-decoration:none; outline:none } code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font:inherit } a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border:none } table { border-collapse:collapse; border-spacing:0 } caption, th, td, center { text-align:left; vertical-align:top } q { quotes:"" "" } font { color:inherit !important; font:inherit !important; color:inherit !important } marquee { overflow:inherit !important; -moz-binding:none } blink { text-decoration:none } nobr { white-space:normal } /* end of import */ body { height:100%; text-align:center; min-width:960px } ul { list-style:disc outside } ol { list-style:decimal outside } /* ----------------------------------------------- 2. TYPOGRAPHY / DESIGN ----------------------------------------------- */ html { font-size:62.5%; font-family:arial, verdana, "microsoft sans serif", helvetica, sans-serif; line-height:1.4em; color:#000; background:#2c0906 url(../images/global/main-tile-bg.jpg) repeat-x } code, kbd, samp, pre, tt, var, input[type='text'], input[type='password'], textarea { font-size:1.1em; font-family:monaco, "Lucida Console", courier, mono-space } h1 { font-size:1.6em; color:#000; margin:0 0 12px 0 } h2 { font-size:1.5em; color:#000; margin:0 0 12px 0 } h3 { font-size:1.4em; color:#000; margin:0 0 12px 0 } h4 { font-size:1.3em; color:#000; margin:0 0 12px 0 } h5 { font-size:1.2em; color:#000; margin:0 0 12px 0 } h6 { font-size:1.1em; color:#000; margin:0 0 12px 0 } p { font-size:1.1em; color:#000; margin:0 0 12px 0 } a { color:#aa2419 } a:hover { color:#aa2419 } ul { margin:0 0 12px 0; font-size:1.1em } ol { margin:0 0 12px 0; font-size:1.1em } dl { margin:0 0 12px 0; font-size:1.1em } hr { display:block; background:#aaa; color:#aaa; width:100%; height:1px; border:none } address { font-size:1.1em; color:#000 } blockqoute { } table { border-top:1px solid #ccc; border-left:1px solid #ccc } th, td { border-bottom:1px solid #ddd; border-right:1px solid #ccc } fieldset { border:1px solid #ccc; } legend { background:#fff; } label { font-size:1.1em } textarea, input[type='text'], select { border:1px solid #000; background:#fff; font-size:11px; color:#000 } /* ----------------------------------------------- 3. LAYOUT ----------------------------------------------- */ /* 3.1 - main form */ form.main { width:100%; height:100% } /* 3.2 - container */ div#container { width:100%; margin:0 auto; position:relative; text-align:left; background:url(../images/global/center-bg.jpg) no-repeat center top; } /* 3.3 - header */ div#header { width:100%; background:url(../images/global/header-tile-bg.gif) repeat-x; height:131px } #brave-design-logo {position:absolute; z-index:999} #brave-design-logo a{display:block; background:url(../images/global/brave-design-logo.png) no-repeat; width:260px; height:160px; text-indent:-3000em; position:absolute; z-index:999} /* 3.4 - content */ div#content { width:960px; margin:0 auto 0px auto; background:#FFFFFF url(../images/global/content-bottom-bg.gif) no-repeat bottom center; padding:0 0 20px 0 } div#flash-content{background: url(../flash/transitionImages/1.jpg) no-repeat 11px 11px #fff; padding:11px; width:938px; height:343px;} /* 3.5 - primary content */ div#primary-content {padding:0 12px; width:936px } /* 3.6 - secondary content */ div#secondary-content {padding:0 12px; width:936px } /* 3.7 - tertiary content */ body.index div#tertiary-content { clear:both } body.index div#tertiary-content h1 { margin:15px 0 12px 11px } body.index div#tertiary-content div.column { width:460px; float:left; padding-left:11px } body.gallery div#tertiary-content {padding:0 12px; width:936px; } /* 3.8 - footer */ div#footer { padding:10px 0 } div#footer span{float:left; color:#FFFFFF;} div#footer span a{color:#FFFFFF; font-size:1.0em} div#footer ul{list-style:none; float:right; color:#FFFFFF} div#footer ul li{float:left; color:#FFFFFF} div#footer ul li a{color:#FFFFFF; padding:0 5px; font-size:1.0em} ul#basewords { list-style:none; clear:both; margin:20px auto 0 auto; width:960px; float:left!important } ul#basewords li { float:left; margin-right:7px } ul#basewords strong { font-weight:normal } #formHolder{width:400px;} #compliance {padding-left:50px; width:400px; float:left} #compliance h3{font-size:1.3em;} #compliance address{font-style:normal; padding-bottom:10px} #compliance ul{list-style:none;} #compliance ul li a{color:#000000;} /* ----------------------------------------------- 4. GLOBAL ELEMENTS / CONTROLS ----------------------------------------------- */ /* 4.1 - accessibility */ ul#skiplinks { display:none } ul#skiplinks a, ul#skiplinks a:hover, ul#skiplinks a:visited { position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden } ul#skiplinks a:active, ul#skiplinks a:focus { position:static; width:auto; height:auto } /* ----------------------------------------------- 5. TEMPLATE/PAGE SPECIFIC ----------------------------------------------- */ #contract-furniture-for-homes-schools-and-housing-schemes-ttl a{background:url(../images/global/contract-furniture-for-homes-schools-and-housing-schemes-ttl.png) no-repeat; width:736px; height:197px; text-indent:-3000em; display:block; float:right; padding: 40px 11px 0 0} #client-login-ttl{background:url(../images/global/client-login-ttl.gif) no-repeat; width:88px; height:21px; display:block; text-indent:-3000em; margin:0} #login-to-find-out-more-offers-ttl{background:url(../images/global/find-out-about-our-latest-designs-and-offers-ttl.gif) no-repeat; width:229px; height:16px; display:block; text-indent:-3000em;} #order-brochure-ttl{background:url(../images/global/our-brochure-ttl.gif) no-repeat; width:100px; height:21px; display:block; text-indent:-3000em; margin:0} #check-out-our-new-brochure-ttl{background:url(../images/global/check-out-our-new-brochure-ttl.gif) no-repeat; width:157px; height:13px; display:block; text-indent:-3000em;} #whats-new-ttl{background:url(../images/global/whats-new-ttl.gif) no-repeat; width:95px; height:21px; display:block; text-indent:-3000em; margin:0} #find-out-about-our-latest-designs-and-offers-ttl{background:url(../images/global/find-out-about-our-latest-designs-and-offers-ttl.gif) no-repeat; width:223px; height:16px; display:block; text-indent:-3000em;} #living-range-ttl{background:url(../images/global/living-range-ttl.gif) bottom no-repeat; width:343px; height:62px; display:block; text-indent:-3000em; padding:35px 0 10px 0} #select-an-image{background:url(../images/global/select-an-image-ttl.gif) no-repeat; width:105px; height:18px; display:block; text-indent:-3000em; float:left} #our-brochure-grey-ttl{background:url(../images/global/our-brochure-grey-ttl.gif) no-repeat; width:260px; height:15px; display:block; text-indent:-3000em; float:left} #dimensions-and-measurements-ttl{background:url(../images/global/dimensions-and-measurements-ttl.gif) no-repeat; width:550px; height:30px; display:block; text-indent:-3000em; margin:35px 0 0 0;} #what-you-get-with-this-range-ttl{background:url(../images/global/what-you-get-with-this-range-ttl.gif) no-repeat; width:550px; height:30px; display:block; text-indent:-3000em; margin:35px 0 0 0;} #galleries-ttl{background:url(../images/global/galleries-ttl.gif) bottom no-repeat; width:229px; height:62px; display:block; text-indent:-3000em; padding:35px 0 10px 0} #choose-a-category-ttl{background:url(../images/global/choose-a-category-ttl.gif) no-repeat; width:905px; height:18px; display:block; text-indent:-3000em; float:left; } #contact-ttl{background:url(../images/global/contact-ttl.gif) bottom no-repeat; width:342px; height:62px; display:block; text-indent:-3000em; padding:35px 0 10px 0} #whats-news-ttl{background:url(../images/global/whats-news-ttl.gif) bottom no-repeat; width:342px; height:62px; display:block; text-indent:-3000em; padding:35px 0 10px 0} #cat-title { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:4.0em; color:#aa2419; font-weight:normal; padding:75px 0 20px 0; text-transform:uppercase; letter-spacing:-3px } #downloads-ttl{background:url(../images/global/downloads-ttl.gif) bottom no-repeat; width:253px; height:62px; display:block; text-indent:-3000em; padding:35px 0 10px 0} #brave-design-ttl{background:url(../images/global/brave-design-ttl.gif) bottom no-repeat; height:17px; display:block; text-indent:-3000em; width:93px } /*Primary Navigation*/ #primary-navigation{float:right; list-style:none; margin:101px 0 0 0} #primary-navigation li{float:left;} #home-btn{background:url(../images/global/primary-navigations-btn.gif) 0 0 no-repeat; display:block; text-indent:-3000em; width:80px; height:30px} #home-btn:hover{background:url(../images/global/primary-navigations-btn.gif) 0 100% no-repeat;} #home-btn.current{background:url(../images/global/primary-navigations-btn.gif) 0 100% no-repeat;} #gallery-btn{background:url(../images/global/primary-navigations-btn.gif) -81px 0 no-repeat; display:block; text-indent:-3000em; width:80px; height:30px} #gallery-btn:hover{background:url(../images/global/primary-navigations-btn.gif) -81px 100% no-repeat;} #gallery-btn.current{background:url(../images/global/primary-navigations-btn.gif) -81px 100% no-repeat;} #whats-new-btn{background:url(../images/global/primary-navigations-btn.gif) -162px 0 no-repeat; display:block; text-indent:-3000em; width:80px; height:30px} #whats-new-btn:hover{background:url(../images/global/primary-navigations-btn.gif) -162px 100% no-repeat;} #whats-new-btn.current{background:url(../images/global/primary-navigations-btn.gif) -162px 100% no-repeat;} #contact-btn{background:url(../images/global/primary-navigations-btn.gif) -243px 0 no-repeat; display:block; text-indent:-3000em; width:80px; height:30px} #contact-btn:hover{background:url(../images/global/primary-navigations-btn.gif) -243px 100% no-repeat;} #contact-btn.current{background:url(../images/global/primary-navigations-btn.gif) -243px 100% no-repeat;} /*Login Panel*/ #client-login{ width:314px; height:152px; float:left; border-right:1px solid #e8e8e8; background:url(../images/global/temp-login.jpg) no-repeat} #client-login form fieldset{border:0;} #client-login form fieldset ol{list-style:none;} #client-login form fieldset ol li .input-field{background:url(../images/global/textfield-bg.gif) no-repeat; width:293px; height:20px; border:0; padding:8px; color:#000000; font-family:"Arial", Helvetica, sans-serif; font-weight:bold; font-size:1.2em} #client-login form fieldset ol li .login-btn{float:right; padding-right:23px} /*Order Brochure*/ #order-brochure{ width:314px; float:left; background:url(../images/global/brave-design-brochure-icon.jpg) right bottom no-repeat; margin:0 20px} #order-brochure p{width:150px; color:#333333} #download-now-btn {background:url(../images/global/download-btn.gif) no-repeat; width:91px; height:30px; display:block; text-indent:-3000em; margin:34px 0 0 0px} #whats-new{ width:226px; float:left; border-left:1px solid #e8e8e8; padding:0 20px} #whats-new dl{line-height:1.6em;} #whats-new dl dt{font-weight:bold; color:#666666; margin-top:5px; font-size:1.2em} #whats-new dl dd{color:#666666} #whats-new dl dd a{background:url(../images/global/read-more-btn.gif) no-repeat; width:58px; height:15px; text-indent:-3000em; display:inline-block; } #our-brochure-grey{background:url(../images/global/grey-brochure-bg.gif) no-repeat; padding:10px; width:272px; float:left; margin:12px 0} #our-brochure-grey #download-btn{background:url(../images/global/download-grey-btn.gif) no-repeat; width:91px; height:30px; display:block; text-indent:-3000em; margin:34px 0 0 0px} #product-options { float:left; width:292px } .what-you-get {width:50%; float:left; margin:20px 0 0 0 } .what-you-get dt {background:url(../images/global/red-tick-icon.gif) left top no-repeat; padding-left:25px; font-size:1.2em; font-weight:bold; margin:0 0 5px 0; color:#000; line-height:120%} .what-you-get dd {color:#666; padding:0 0 20px 25px} /*work boxes*/ .work-list li a {color:#C8DCE5;} .work-list li .box-ttl {display:block;width:210px; margin:6px; color:#000; font-weight:normal; font-style:normal; font-size:1.4em; text-transform:uppercase; font-weight:bold} .work-list li .box-ttl em{color:#aa2419; font-size:0.6em; font-style:normal; line-height:3.0em} .boxgrid {width: 220px; height: 208px; margin:5px 14px 5px 0px;float:left;overflow: hidden; position: relative;} .boxgrid img {position: absolute;top: 0;left: 0;} .boxcaption {float: left;position: absolute;background: #fff; height: 223px; width:220px; margin:0 0 0 0px; top:180px; opacity: .9; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); /* For IE 8 */ -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; } .captionfull .boxcaption {top: 391px;left: 0;} .caption .boxcaption {top: 180;left: 0px;} .red-arrow{margin:4px; float:left; background:url(../images/global/red-arrow-icon.png) no-repeat left center; width:10px; height:10px} body.index .work-list li a {color:#C8DCE5;} body.index .box-ttl {display:block; width:180px; margin:4px; color:#fff; font-weight:normal; font-style:normal; font-size:1.1em; text-transform:uppercase; padding:0 0 0 1px; float:left} body.index .box-ttl em{color:#fff; font-size:0.9em; font-style:normal; line-height:2.8em} body.index .boxgrid {width: 236px; height: 208px; margin:5px 14px 5px 0px;float:left;overflow: hidden; position: relative;} body.index .boxgrid img {position: absolute;top: 0;left: 0;} body.index .boxcaption {float: left;position: absolute;background: #000; height: 223px; width:236px; margin:0 0 0 0px; top:79px; opacity: .7; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); /* For IE 8 */ -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; } body.index .captionfull .boxcaption {top: 391px;left: 0;} body.index .caption .boxcaption {top: 180;left: 0px;} #download-list li { width:208px; float:left; list-style:none; margin:0 10px 10px 0 } /* ----------------------------------------------- 6. USEFUL CLASSES ----------------------------------------------- */ .wrapper{width:960px; margin:0 auto;} .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden } .clr { overflow:hidden; clear:both; height:1px; margin-top:-1px } .la { text-align:left } .ra { text-align:right } .ca { text-align:center } .fl { float:left } .fr { float:right } .vt { vertical-align:top } .vm { vertical-align:middle } .vb { vertical-align:bottom } .nb { border:0 none }