/* ------------------------------------------------- URI: http://www./ Created by Forte Trinity ------------------------------------------------- CONTENTS 1: SITE MASTER SETUP (including reset from Tripoli) 2: TYPOGRAPHY/DESIGN 3: LAYOUT4 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:970px; background:#eef0f3 url(../images/bg/tile.gif) repeat-x } 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 } 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 { } a:hover { } a:visited { } a:active { } 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 } /* 2.1 - index page */ h1.ttl-name {} h2.ttl-select-products {} /* ----------------------------------------------- 3. LAYOUT ----------------------------------------------- */ /* 3.1 - main form */ form.main { width:100%; height:100% } /* 3.2 - container */ body.home div#container { width:100%; margin:0 auto; position:relative; text-align:left; background:url(../images/bg/header-bg.jpg) no-repeat center top; } body.sub div#container { width:100%; margin:0 auto; position:relative; text-align:left; background:url(../images/bg/concrete-bg.jpg) no-repeat center top; } .wrapper{ width:970px; margin:0 auto; position:relative; text-align:left} /* 3.3 - header */ div#header {} /* 3.4 - content */ div#content { } /* 3.5 - primary content */ div#primary-content {} body.sub div#primary-content { background:url(../images/bg/top-content.gif) top no-repeat; width:970px; padding:19px 0 0 0 } body.sub div#primary-content #middle{background:url(../images/bg/middle-content.gif) top repeat-y; width:970px; position:relative} body.sub div#primary-content #bottom{background:url(../images/bg/bottom-content.gif) bottom no-repeat; width:970px; padding:0px 0 0px 0; height:19px; position:relative} /* 3.6 - secondary content */ body.home div#secondary-content { background:url(../images/bg/top-content.png) top no-repeat; width:970px; padding:19px 0 0 0 } body.home div#secondary-content #middle{background:url(../images/bg/middle-content.png) top repeat-y; width:970px; position:relative} body.home div#secondary-content #bottom{background:url(../images/bg/bottom-content.png) bottom no-repeat; width:970px; padding:0px 0 0px 0; height:19px; position:relative} body.home .column-a{float:left; width:270px; padding:15px} body.home .column-b{float:left; width:270px; padding:15px 35px} body.home .column-wrapper{float:left; width:640px; } body.sub .column-wrapper{float:left; width:610px; padding:15px} body.sub .column-a{float:left; width:270px; padding:15px 15px 15px 0} body.sub .column-b{float:left; width:270px; padding:15px 15px} .column-full{float:left; width:570px; padding:15px 15px 15px 0} .column-full dl{width:600px; float:left} .column-full dl dt{ font-weight:bold} .column-full dl dd{ background:url(../images/global/bullet.gif) no-repeat left; padding-left:10px; margin:5px 0px; width:250px; float:left} .column-full ul{list-style:none;} .column-full ul li{margin:5px 0; font-weight:bold} .project-wrapper{float:left; margin-bottom:5px; width:640px} .column-c{float:right; width:270px; padding:15px 25px 15px 25px} .column-c p{color:#FFFFFF;} .column-c #downloads {list-style:none;} .column-c #downloads li{background:url(../images/logos/pdfs.gif) no-repeat left center; padding:15px 0 15px 35px; display:block} .column-c #downloads li a{color:#397da6; font-weight:bold} .column-c #downloads li a:hover{color:#FFFFFF;} .column-c #videos {list-style:none;} .column-c #videos li{background:url(../images/logos/videos.gif) no-repeat left center; padding:15px 0 15px 35px; display:block} .column-c #videos li a{color:#397da6; font-weight:bold} .column-c #videos li a:hover{color:#FFFFFF;} .column-c #contact-info {list-style:none;} .column-c #contact-info li{ color:#FFFFFF; font-weight:bold; margin-bottom:8px} .column-c #contact-info li a{color:#397da6; font-weight:bold} .column-c #contact-info li a:hover{color:#FFFFFF;} .column-c a.contact-us-btn{background:url(../images/btn/contact-us-btn.gif) top no-repeat; width:124px; height:32px; display:block; text-indent:-3000em;} .column-c a.contact-us-btn:hover{background:url(../images/btn/contact-us-btn.gif) bottom no-repeat; } .our-range dd{background:url(../images/global/bullet.gif) no-repeat left; padding:0 0 0 10px; line-height:18px} .column-d{float:left; width:580px; padding:15px} .column-d .castudytext{width:270px; float:left} .column-d .casestudyimgleft{float:left; padding-right:15px} .column-d .casestudyimgright{float:right} .highlighted-words{color:#1a455e; font-weight:bold} .contact-info address{color:#FFFFFF; font-style:normal; font-size:13px; font-weight:bold; margin-bottom:12px; line-height:18px} /* 3.7 - tertiary content */ div#tertiary-content { } /* 3.8 - footer */ div#footer { } .forte{float:left; width:300px; color:#333333;} .forte a{color:#333333; padding:0 2px} .footer-links{float:right; width:280px; list-style:none} .footer-links li{float:left; color:#333333;} .footer-links li a{color:#333333; padding:0 2px} /* ----------------------------------------------- 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 ----------------------------------------------- */ /*Primary Navigation*/ ul#primary-navigation{float:right; margin:20px 0 0; width:410px;} ul#primary-navigation li{float:left; display:block;} ul#primary-navigation li a{background-position:top; display:block; text-indent:-3000em; height:30px; margin:0 0 0 1px} ul#primary-navigation li a:hover{background-position:bottom;} ul#primary-navigation li#home-btn a{background-image:url(../images/btn/home-btn.gif); width:60px} ul#primary-navigation li#concrete-btn a{background-image:url(../images/btn/concrete-btn.gif); width:74px} ul#primary-navigation li#decking-btn a{background-image:url(../images/btn/decking-btn.gif); width:74px} ul#primary-navigation li#services-btn a{background-image:url(../images/btn/services-btn.gif); width:61px} ul#primary-navigation li#projects-btn a{background-image:url(../images/btn/projects-btn.gif); width:61px} ul#primary-navigation li#contact-btn a{background-image:url(../images/btn/contact-btn.gif); width:61px} body.home ul#primary-navigation li#home-btn a{background-position:bottom;} body.concrete ul#primary-navigation li#concrete-btn a{background-position:bottom;} body.decking ul#primary-navigation li#decking-btn a{background-position:bottom;} body.services ul#primary-navigation li#services-btn a{background-position:bottom;} body.projects ul#primary-navigation li#projects-btn a{background-position:bottom;} body.contact ul#primary-navigation li#contact-btn a{background-position:bottom;} body.home #banner{float:left; width:970px; background:url(../images/bg/header.png) no-repeat; padding-bottom:30px } body.sub #banner{float:left; width:970px; background:url(../images/bg/header-concrete.png) no-repeat; padding-bottom:0px } body.home #banner #header-top-para{background:url(../images/ttl/header-top-para.png) left no-repeat; width:436px; height:60px; display:block; text-indent:-3000em; padding-left:25px} body.concrete #banner #header-top-para{background:url(../images/ttl/ttl-concrete-flooring-statement.gif) left no-repeat; width:750px; height:30px; display:block; text-indent:-3000em; padding-left:25px} body.decking #banner #header-top-para{background:url(../images/ttl/ttl-decking-flooring-statement.gif) left no-repeat; width:750px; height:30px; display:block; text-indent:-3000em; padding-left:25px} body.services #banner #header-top-para{background:url(../images/ttl/ttl-services-statement.gif) left no-repeat; width:750px; height:30px; display:block; text-indent:-3000em; padding-left:25px} body.contact #banner #header-top-para{background:url(../images/ttl/ttl-contact-us.gif) left no-repeat; width:750px; height:30px; display:block; text-indent:-3000em; padding-left:25px} body.projects #banner #header-top-para{background:url(../images/ttl/ttl-projects-statement.gif) left no-repeat; width:750px; height:30px; display:block; text-indent:-3000em; padding-left:25px} body.home #banner #header-second-para{background:url(../images/ttl/header-second-para.png) left no-repeat; width:440px; height:42px; display:block; text-indent:-3000em; padding-left:25px} #see-our-services-btn{background:url(../images/btn/see-our-services-btn.gif) top no-repeat; width:200px; height:39px; display:block; text-indent:-3000em; } #see-our-services-btn:hover{background:url(../images/btn/see-our-services-btn.gif) bottom no-repeat; width:200px; height:39px; display:block; text-indent:-3000em;} /*Branding*/ #branding{padding:15px; float:left; width:460px} #branding #logo{background:url(../images/global/technic-concrete-flooring-ltd-logo.png) center no-repeat; width:465px; height:71px; display:block; text-indent:-3000em; padding-bottom:10px} /*Flash*/ #flash-content{width:471px; float:right;} /*CTAs*/ #concrete-flooring{background:url(../images/bg/left-cta.gif) no-repeat; width:442px; height:135px; float:left; padding:15px} #concrete-flooring p{color:#FFFFFF; font-size:1.2em; width:350px; line-height:130%} #concrete-flooring .read-more-btn{background:url(../images/btn/read-more-btn.gif) top no-repeat; width:88px; height:22px; display:block; text-indent:-3000em;} #concrete-flooring .read-more-btn:hover{background:url(../images/btn/read-more-btn.gif) bottom no-repeat;} #decking-flooring{background:url(../images/bg/right-cta.gif) no-repeat; width:442px; height:135px; float:right; padding:15px} #decking-flooring p{color:#FFFFFF; font-size:1.2em; width:350px; line-height:130%} #decking-flooring .read-more-btn{background:url(../images/btn/read-more-btn.gif) top no-repeat; width:88px; height:22px; display:block; text-indent:-3000em;} #decking-flooring .read-more-btn:hover{background:url(../images/btn/read-more-btn.gif) bottom no-repeat;} /*Titles*/ #ttl-concrete-flooring{background:url(../images/ttl/ttl-concrete-flooring.gif) no-repeat; width:265px; height:34px; text-indent:-3000em; display:block;} #ttl-decking-flooring{background:url(../images/ttl/ttl-decking-flooring.gif) no-repeat; width:265px; height:34px; text-indent:-3000em; display:block;} #ttl-welcome{background:url(../images/ttl/ttl-welcome.gif) no-repeat; width:256px; height:35px; text-indent:-3000em; display:block;} #ttl-history{background:url(../images/ttl/ttl-history.gif) no-repeat; width:256px; height:35px; text-indent:-3000em; display:block;} #ttl-downloads{background:url(../images/ttl/ttl-downloads.gif) no-repeat; width:256px; height:35px; text-indent:-3000em; display:block;} #ttl-quicklinks{background:url(../images/ttl/ttl-quicklinks.gif) no-repeat; width:256px; height:35px; text-indent:-3000em; display:block;} #technic-concrete-flooring-ltd-statement{background:url(../images/ttl/technic-concrete-flooring-ltd-statement.gif) no-repeat; width:586px; height:100px; display:block; text-indent:-3000em;} #decking-ttl-statement{background:url(../images/ttl/decking-ttl-statement.gif) no-repeat; width:586px; height:81px; display:block; text-indent:-3000em;} #ttl-contact-information{background:url(../images/ttl/ttl-contact-information.gif) no-repeat; width:586px; height:67px; display:block; text-indent:-3000em;} #ttl-message-sent{background:url(../images/ttl/ttl-message-sent.gif) no-repeat; width:586px; height:67px; display:block; text-indent:-3000em;} #ttl-news {background:url(../images/ttl/ttl-news.gif) no-repeat; width:256px; height:35px; text-indent:-3000em; display:block; margin-top:40px} #ttl-sponsoring {background:url(../images/ttl/ttl-sponsoring.gif) no-repeat; width:270px; height:62px; text-indent:-3000em; display:block; } #ttl-charity {background:url(../images/ttl/ttl-charity.gif) no-repeat; width:264px; height:35px; text-indent:-3000em; display:block; margin-top:40px} #ttl-concrete-flooring-introduction{background:url(../images/ttl/ttl-concrete-flooring-introduction.gif) no-repeat; width:256px; height:35px; text-indent:-3000em; display:block;} #ttl-external-concrete{background:url(../images/ttl/ttl-external-concrete.gif) no-repeat; width:256px; height:60px; text-indent:-3000em; display:block;} #ttl-internal-concrete-floors{background:url(../images/ttl/ttl-internal-concrete-floors.gif) no-repeat; width:256px; height:60px; text-indent:-3000em; display:block;} /*Case studies ttl*/ #ttl-case-studies-1{background:url(../images/ttl/ttl-case-study-1.gif) no-repeat; width:586px; height:70px; display:block; text-indent:-3000em;} #ttl-case-studies-2{background:url(../images/ttl/ttl-case-study-2.gif) no-repeat; width:586px; height:70px; display:block; text-indent:-3000em;} #ttl-case-studies-3{background:url(../images/ttl/ttl-case-study-3.gif) no-repeat; width:586px; height:50px; display:block; text-indent:-3000em;} #ttl-case-studies-4{background:url(../images/ttl/ttl-case-study-4.gif) no-repeat; width:586px; height:97px; display:block; text-indent:-3000em;} #ttl-case-studies-5{background:url(../images/ttl/ttl-case-study-5.gif) no-repeat; width:586px; height:43px; display:block; text-indent:-3000em;} #ttl-case-studies-6{background:url(../images/ttl/ttl-case-study-6.gif) no-repeat; width:586px; height:26px; display:block; text-indent:-3000em;} #ttl-case-studies-7{background:url(../images/ttl/ttl-case-study-7.gif) no-repeat; width:586px; height:26px; display:block; text-indent:-3000em;} #van{position:absolute; bottom:0px; left:0px; z-index:999} /*Logos*/ #logos{list-style:none;} #logos li{float:left; padding-right:23px} #logos li.last{padding-right:0px;} #logos-more{list-style:none;} #logos-more li{float:left; padding-right:55px} #logos-more li.last{padding-right:0px;} /*Sliders*/ #slider { width: 600px; height: 188px; position: relative; overflow: hidden; } #sliderContent {width: 600px; height:220px; position: absolute; top: 0; margin-left: 0; } .sliderImage {float: left; position: relative;display: none;} .sliderImage span { position: absolute; left: 0; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 600px; background-color: #000; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; color: #fff; display: none; bottom: 0; } #sslider { width: 300px; height: 280px; position: relative; overflow: hidden; } #ssliderContent {width: 300px; position: absolute; top: 0; margin-left: 0; } .ssliderImage {float: left; position: relative;display: none;} .ssliderImage span { position: absolute; left: 0; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 300px; background-color: #000; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; color: #fff; display: none; bottom: 0; } .services-wrapper{float:left; width:620px;} #ttl-steel-fixing{background:url(../images/ttl/ttl-steel-fixing.gif) no-repeat; width:580px; height:71px; text-indent:-3000em; display:block; float:left} #steel { width: 300px; height: 188px; position: relative; overflow: hidden; } #steelContent {width: 300px; position: absolute; top: 0; margin-left: 0; } .steelImage {float: left; position: relative;display: block;} .steelImage span { position: absolute; left: 0; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 300px; background-color: #000; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; color: #fff; display: block; bottom: 0; } #ttl-dry-shakes{background:url(../images/ttl/ttl-dry-shakes.gif) no-repeat; width:580px; height:71px; text-indent:-3000em; display:block; float:left} #dry { width: 300px; height: 188px; position: relative; overflow: hidden; } #dryContent {width: 300px; position: absolute; top: 0; margin-left: 0; } .dryImage {float: left; position: relative;display: block;} .dryImage span { position: absolute; left: 0; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 300px; background-color: #000; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; color: #fff; display: block; bottom: 0; } #ttl-armour-joints{background:url(../images/ttl/ttl-armour-joints.gif) no-repeat; width:580px; height:71px; text-indent:-3000em; display:block; float:left} #armour { width: 300px; height: 188px; position: relative; overflow: hidden; } #armourContent {width: 300px; position: absolute; top: 0; margin-left: 0; } .armourImage {float: left; position: relative;display: block;} .armourImage span { position: absolute; left: 0; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 300px; background-color: #000; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; color: #fff; display: block; bottom: 0; } #ttl-joint-sealing{background:url(../images/ttl/ttl-joint-sealing.gif) no-repeat; width:580px; height:71px; text-indent:-3000em; display:block; float:left} #joint { width: 300px; height: 188px; position: relative; overflow: hidden; } #jointContent {width: 300px; position: absolute; top: 0; margin-left: 0; } .jointImage {float: left; position: relative;display: block;} .jointImage span { position: absolute; left: 0; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 300px; background-color: #000; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; color: #fff; display: block; bottom: 0; } #ttl-saw-cutting{background:url(../images/ttl/ttl-saw-cutting.gif) no-repeat; width:580px; height:71px; text-indent:-3000em; display:block; float:left} #saw { width: 300px; height: 188px; position: relative; overflow: hidden; } #sawContent {width: 300px; position: absolute; top: 0; margin-left: 0; } .sawImage {float: left; position: relative;display: block;} .sawImage span { position: absolute; left: 0; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 300px; background-color: #000; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; color: #fff; display: block; bottom: 0; } #ttl-sub-base-testing{background:url(../images/ttl/ttl-sub-base-testing.gif) no-repeat; width:592px; height:90px; text-indent:-3000em; display:block; float:left} #sub-base { width: 300px; height: 188px; position: relative; overflow: hidden; } #subbaseContent {width: 300px; position: absolute; top: 0; margin-left: 0; } .subbaseImage {float: left; position: relative;display: block;} .subbaseImage span { position: absolute; left: 0; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 300px; background-color: #000; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; color: #fff; display: block; bottom: 0; } .clear { clear: both;} /*Quick links*/ #quicklinks{list-style:none;} #quicklinks li{margin-bottom:12px;} #quicklinks #steel-fixing-ql a{background-image:url(../images/btn/steel-fixing-ql.gif); background-position:top; width:257px; height:15px; text-indent:-3000em; display:block} #quicklinks #steel-fixing-ql a:hover{background-position:bottom} #quicklinks #dry-shakes-ql a{background-image:url(../images/btn/dry-shakes-ql.gif); background-position:top; width:257px; height:15px; text-indent:-3000em; display:block} #quicklinks #dry-shakes-ql a:hover{background-position:bottom} #quicklinks #armour-joints-ql a{background-image:url(../images/btn/armour-joints-ql.gif); background-position:top; width:257px; height:15px; text-indent:-3000em; display:block} #quicklinks #armour-joints-ql a:hover{background-position:bottom} #quicklinks #joint-sealing-ql a{background-image:url(../images/btn/joint-sealing-ql.gif); background-position:top; width:257px; height:15px; text-indent:-3000em; display:block} #quicklinks #joint-sealing-ql a:hover{background-position:bottom} #quicklinks #saw-cutting-ql a{background-image:url(../images/btn/saw-cutting-ql.gif); background-position:top; width:257px; height:15px; text-indent:-3000em; display:block} #quicklinks #saw-cutting-ql a:hover{background-position:bottom} #quicklinks #sub-base-testing-ql a{background-image:url(../images/btn/sub-base-testing-ql.gif); background-position:top; width:257px; height:15px; text-indent:-3000em; display:block} #quicklinks #sub-base-testing-ql a:hover{background-position:bottom} /*Compliance*/ .compliance h4{color:#FFFFFF;} .compliance address{color:#FFFFFF; margin-bottom:12px; font-style:normal} /*extra*/ .why-use-us{ color:#FFFFFF; padding-bottom:20px} .why-use-us dt{font-size:12px; font-weight:bold; line-height:18px} .why-use-us dd{background:url(../images/global/white-bullet.gif) no-repeat left 5px; padding-left:15px; display:block; font-size:11px; line-height:18px} .team-information dt{font-size:14px; font-weight:bold; margin-bottom:12px } .team-information dd{font-size:12px; line-height:22px; } .team-information dd span{width:90px; float:left; padding:0 5px 0 0} .team-information dd a{color:#397DA6; font-weight:bold; padding:0 0px 0 5px} .team-information dd a:hover{text-decoration:underline;} .links dt{font-size:14px; font-weight:bold; margin-bottom:1px } .links dd{display: block; clear: both;} .links dd h4{padding-top: 15px; color: #333333} .links dd p{color: #666666;} .links dd#bek a img{float: left; padding: 50px 10px 0 0;} .links dd#hal a img{float: left; padding: 38px 10px 0 0;} #slideshow{width:600px; height:188px} #slideshowdecking{width:600px; height:188px} ul#basewords { list-style:none; width:970px; margin:auto; clear:both } ul#basewords li { float:left; color:#333; margin-right:8px } ul#basewords strong { font-weight:normal } /* ----------------------------------------------- 6. USEFUL CLASSES ----------------------------------------------- */ .link{color:#397DA6} .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 } .gap { height:100px }