/* Site Name: Crommelin Site URI: Version: 1.0 UPDATE INFO --------------------------------------- Revision number: 1.0 Last updated: 25 Oct 2011 CONVENTIONS --------------------------------------- hyphenate class / id names - #my-id-name, .my-class-name class / id names to start with lower case letter (ID's reserved for .net use will start with Upper case letter) CREDITS ------------------------------------------- this file adapted from the fantastic resources at http://html5boilerplate.com/ html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) other relevant credits have been left inline CONTENTS ------------------------------------------ *01: Reset *03: Default Styles *03: Util classes *04: Structure *05: Common Containers & Subclasses *06: Custom Containers & Subclasses *07: Print Styles *08: Media & Orientation */ /* *01: Reset -----------------------------------------------------------------------------------------------------------------*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } article, aside, figure, footer, header, hgroup, nav, section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; } /* tables still need cellspacing="0" in the markup */ table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } /* *02: Default Styles --------------------------------------------------------------------------------------------------------*/ body { color: #666; /*background: #036 url(../images/bg.png) top center repeat-y;*/ background: #fff; overflow-y: visible; } html { -webkit-font-smoothing: antialiased; overflow-y: scroll; } a { color: #036; text-decoration: none; } a:hover, a:active, .content a:hover, .content a:active { color: #666; outline: none; } table { font-size: inherit; font: 100%; } td, td img { vertical-align: top; } select, input, textarea { font: 99% sans-serif; } pre, code, kbd, samp { font-family: monospace, sans-serif; } sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font-size: smaller; } small { font-size:85%; } strong, th { font-weight: bold; } input[type="radio"] { vertical-align: text-bottom; } /* align checkboxes, radios, text inputs with their label - by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } label, input[type=button], input[type=submit], button { cursor: pointer; } /* hand cursor on clickable input elements */ ::-moz-selection { background: #ad955b; color:#fff; text-shadow: none; }/* text selection colour & kills text shadow when highlighted */ ::selection { background:#ad955b; color:#fff; text-shadow: none; } a:link { -webkit-tap-highlight-color: #FF5E99; } /* Tap highlight colour on webkit touch devices - j.mp/webkit-tap-highlight-color */ button { width: auto; overflow: visible; } /* make buttons play nice in IE: - www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ .ie7 img { -ms-interpolation-mode: bicubic; } /* bicubic resizing for non-native sized IMG: - code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ ul li { list-style-type: none; } ol li { list-style-type: decimal; } /* *03: Util Classes ----------------------------------------------------------------------------------------------------------*/ .ir { display:block; text-indent:-999em; overflow:hidden; background-repeat: no-repeat; } /* for image replacement */ .hidden { display:none; visibility:hidden; } /* Hide for both screenreaders and browsers - css-discuss.incutio.com/wiki/Screenreader_Visibility */ .visuallyhidden { position:absolute !important; /* Hide only visually, but have it available for screenreaders - www.webaim.org/techniques/css/invisiblecontent/ */ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } .invisible { visibility: hidden; } /* Hide visually and from screenreaders, but maintain layout */ .clearfix:after , .cols:after, #range-filter li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix, .cols, #range-filter li { display: inline-block; } * html .clearfix, * html .cols, * html #range-filter li { height: 1%; } /* Hides from IE-mac \*/ .clearfix, .cols, #range-filter li { display: block; } /* *04: Structure -------------------------------------------------------------------------------------------------------------*/ #wrapper { width: 960px; margin: 0 auto; background: #efefef; padding: 0 10px 10px 10px; border-left: 1px solid #e8e5e5; border-right: 1px solid #e8e5e5; min-height: 800px; } header { position: relative; height: 93px; border-top: 15px solid #0e3b70; } nav { font-size: 14px; } footer { background: #cdcdcd; padding: 20px; position: relative; } /* *05: Common Containers & Subclasses ----------------------------------------------------------------------------------------*/ section { margin-bottom: 5px; } body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } h1, h2, h3, h4, h5, h6 { font-weight: normal; text-rendering: optimizeLegibility;} h1 { font-size: 24px; margin: 0 0 20px 0; } h2 { font-size: 18px; margin: 30px 0 0 0; } h3 { font-size: 18px; margin: 30px 0 0 0; } h4 { font-size: 14px; font-weight: bold; margin: 0;} #main p, #main ul, #main ol { line-height: 1.6em; margin: 0 0 20px 0; } #main .landing p { font-size: 14px; line-height: 1.3em; } #main ul, #main ol { margin: 20px;} #main ul li { list-style-type: disc;} #main ol li { list-style-type: decimal;} #main .exlist { margin: 0; } #main .exlist li { list-style-type: none;} #main .exlistnew li { list-style-type: none; float:left; width:721px; margin:10px 0px 25px 0px; } .h3aboutus {margin-top:-5px;} #main .linked-list li { cursor: pointer; cursor: hand; } #main .linked-list li.hover { border: 1px solid #333; } #main .category-columns .linked-list li.hover { border: none; } #main .category-columns .linked-list li.hover a { text-decoration: underline; } /* Header */ header .logo { width: 262px; height: 75px; position: absolute; top: 0px; right: 0px; } header #nav-search { width: 640px; height: 90px; background: url(../images/bg-nav-search.png) bottom left repeat-x; position: relative;} header #nav-search p { margin: 0; } #main-nav { padding: 20px 10px; } #main-nav ul li { float: left; font-weight: bold; margin-right: 20px; } #main-nav a:hover, #main-nav a.current, #main-nav a.section { color: #bdc52d; } .search #main .main, .search #main { border: none; } .search h1 { font-size: 16px; margin: 0 0 20px 0; font-weight: bold; } .search #subnav h2 { font-size: 14px; margin: 0 0 5px 0; color: #333; } .search #SearchResults h3 { font-size: 14px; font-weight: bold; } .search #SearchResults p { margin: 0; } .search #main a:hover { color: #333; } .search #SearchResults h3 a { text-decoration: none; color: #666; } .search #SearchResults h3 a:hover { text-decoration: underline; } .search #SearchResults .image { float: left; margin-right: 10px; } .search #SearchResults .has-image p, .search #SearchResults .has-image h3 { margin:0px; } .search #PageNumbers { margin-top: 20px; } .search #main #PageNumbers a { text-decoration: none; } .search #PageNumbers strong { text-decoration: underline; font-weight: normal; } .search #PageNumbers span a { margin: 0 3px;} .search-field { position: relative; width: 268px; border: 1px solid #dfdfdf; background: #fff; height: 24px; } header #support-number, header .search-field { position: absolute; bottom: 7px; } header .search-field { left: 235px; } #subnav .search-field { width: 170px; } #application-guide-link { bottom: 7px; left: 515px; position: absolute; } #application-guide-link a { padding: 5px 10px; } #application-guide-link a:hover, #application-guide-link a.current, #application-guide-link a.section { color: #ccd142 !important; } .search-field #Search { position: absolute; top: 0px; left: 0px; } .search-field #SearchForm_SearchForm_Search { margin: 0; padding: 5px 0 0 5px; border: 0; font-size: 14px; width: 240px; color: #ccc; zoom: 1; } .search-field #SearchForm_SearchForm_action_results { position: absolute; right: 3px; top: 2px; width: 20px; height: 20px; padding: 0; border: 0; background: url(../images/btn-search.png) top left no-repeat; text-indent: -9999px; overflow: hidden; line-height: 0; } #subnav .search-field #SearchForm_SearchForm_Search { color: #ccc; width: auto; } #support-number { background: url(../images/bg-support-number.png) 0 5px no-repeat; padding-left: 20px; left: 10px; } #support-number strong { display: block; color: #333; font-size: 11px; } #support-number p { font-size: 12px; } #secondary-nav { width: 960px; background: url(../images/bg-secondary-nav.png) top left no-repeat; } #secondary-nav a { color: #fff; font-weight: bold; font-size: 16px; } #secondary-nav li { display: block; float: left; } #secondary-nav li a { display: block; } #secondary-nav .first-tier, #secondary-nav .first-tier li { height: 43px; } #secondary-nav .first-tier { background: url(../images/divider-secondary-nav.png) top right no-repeat; padding-right: 2px; } #secondary-nav .first-tier li a { /*padding: 11px 25px 12px 25px;*/ padding: 0 25px; line-height: 43px; } #secondary-nav .first-tier li.last a { border-right: 1px solid #26476d; } #secondary-nav .first-tier li a:hover, #secondary-nav .first-tier li a.current, #secondary-nav .first-tier li a.section { background: #e2e2e2 url(../images/bg-secondary-nav-hover.png) top right no-repeat; color: #333; } #secondary-nav .second-tier { height: 30px; background: #d1d1d1; } .second-tier a { font-size: 14px !important; color: #333 !important; padding: 0 10px; line-height: 28px; } .second-tier a { background: #dfdfdf; border: 1px solid #c6c6c6; border-right: none; } .second-tier a:hover, .second-tier a.current, .second-tier a.section { background-color: #ececec; background-image: url(../images/ind-categories.png); background-repeat: no-repeat; background-position: 100% 0; } /* Colour themes */ .second-tier .waterproofing a:hover, .second-tier .waterproofing a.current, .second-tier .waterproofing a.section { background-position: 100% 0; } .second-tier .sealers a:hover, .second-tier .sealers a.current, .second-tier .sealers a.section { background-position: 100% -30px; } .second-tier .solutions a:hover, .second-tier .solutions a.current, .second-tier .solutions a.section { background-position: 100% -60px; } .second-tier .flooring a:hover, .second-tier .flooring a.current, .second-tier .flooring a.section { background-position: 100% -90px; } .second-tier .admixtures a:hover, .second-tier .admixtures a.current, .second-tier .admixtures a.section { background-position: 100% -120px; } .second-tier .roofing a:hover, .second-tier .roofing a.current, .second-tier .roofing a.section { background-position: 100% -150px; } .waterproofing #main { border-top: 6px solid #66ccfe; } .sealers #main { border-top: 6px solid #ffcc00; } .solutions #main { border-top: 6px solid #cccc33; } .flooring #main { border-top: 6px solid #996699; } .admixtures #main { border-top: 6px solid #00cc00; } .roofing #main { border-top: 6px solid #ff6600; } .waterproofing #main #subnav a:hover, .waterproofing #main #subnav a.current, .waterproofing #main #subnav a.section { background: #66ccfe;} .sealers #main #subnav a:hover, .sealers #main #subnav a.current, .sealers #main #subnav a.section { background: #ffcc00;} .solutions #main #subnav a:hover, .solutions #main #subnav a.current, .solutions #main #subnav a.section { background: #cccc33;} .flooring #main #subnav a:hover, .flooring #main #subnav a.current, .flooring #main #subnav a.section { background: #996699;} .admixtures #main #subnav a:hover, .admixtures #main #subnav a.current, .admixtures #main #subnav a.section { background: #00cc00;} .roofing #main #subnav a:hover, .roofing #main #subnav a.current, .roofing #main #subnav a.section { background: #ff6600;} .video-holder .waterproofing { border-top: 5px solid #66ccfe; } .video-holder .sealers { border-top: 5px solid #ffcc00; } .waterproofing .required .holder { border-top: 5px solid #66ccfe;} .sealers .required .holder { border-top: 5px solid #ffcc00; } .solutions .required .holder { border-top: 5px solid #cccc33; } .flooring .required .holder { border-top: 5px solid #996699; } .admixtures .required .holder { border-top: 5px solid #00cc00; } .roofing .required .holder { border-top: 5px solid #ff6600; } .waterproofing #tools { background: #d1f0ff; } .sealers #tools { background: #fff4cc; } .solutions #tools { background: #f4f4d6; } .flooring #tools { background: #eae0ea; } .admixtures #tools { background: #ccf4cc; } .roofing #tools { background: #ffe0cc; } /* Tools */ #tools { position: absolute; right: 0px; top: 0px; padding: 10px; } #tools li { float: left; margin-left: 15px; display: block; height: 20px; } #tools .print { margin-left: 0; } #tools li a { color: #666; background: url(../images/icons-tools.png) 0 1px no-repeat; padding: 2px 0 2px 22px; display: block; line-height: 1; } #tools li a:hover { text-decoration: underline; } #tools li a span { display: none; } #tools. .print a { padding-left: 20px; } #tools .email a { background: url(../images/icons-tools.png) 0 -17px no-repeat; } #tools .share a { background: url(../images/icons-tools.png) 0 -37px no-repeat; } /* Breadcrumbs */ #breadcrumbs { height: 38px; background: #f5f5f5; padding-left: 10px; } #breadcrumbs p { margin: 0px; line-height: 38px; font-size: 12px; color: #8c8c8c; } #breadcrumbs a { color: #8c8c8c; } #breadcrumbs a:hover { color: #333; } #breadcrumbs p strong { font-weight: normal; text-decoration: underline; } /* Subnavigation */ #subnav { /*width: 195px;*/ width: 179px; padding-right: 10px; } #main #subnav ul { margin: 0; } #main #subnav li { margin-bottom: 1px; list-style-type: none; } #subnav li a { color: #999; font-size: 14px; display: block; padding: 3px 10px; text-decoration: none; line-height: 1.2em; } #subnav li a:hover, #subnav li a.current, #subnav li a.section { background: #bdc52f ; color: #000; } /* Main */ #main { border-top: 6px solid #000333; padding: 30px 20px; position: relative; } #main .col { float: left; } #main .main { width: 685px; padding-left: 20px; } #main .main a, .col a { color: #8f8f8f; text-decoration: underline; } #main .main p a:hover, #main .main ol a:hover, #main .main ul a:hover { color: #333; } .has-subnav .main { width: 700px !important; border-left: 1px solid #f0f0f0; padding-left: 25px !important; } #main .main h2, #main .main h3 { clear: both; } #main .main table { margin-bottom: 20px; } #main .width-730 { width: 730px; } #main .width-640 { width: 640px; } #main .width-600 { width: 600px; } #main .width-500 { width: 500px; } #main .width-475 { width: 475px; } #main .width-435 { width: 435px; } #main .width-385 { width: 385px; } #main .width-290 { width: 290px; margin-left: 30px;} #main .col.right { float: right; margin-top: 50px; } #main .col.right img { margin-bottom: 20px; } /* WSIWYG added image alignments */ /* IMAGES -------------------------------------------- */ #main img { border: none; } #main img.right { float: right; margin-left: 20px; } #main img.left { float: left; } #main img.leftAlone { float: left; margin-right: 100%; } #main img.center { float: none; margin-left: auto; margin-right: auto; display: block; } .button-link { overflow: hidden; margin-bottom: 10px; } .button-link a { color: #666 !important; text-decoration: none !important; border: 1px solid #ececec; border-bottom: 1px solid #c5c5c5; padding: 8px 10px; background: url(../images/bg-button.png) bottom left repeat-x; overflow: auto; display: block; float: left; } .back a { border-bottom:1px solid #ececec; background: url(../images/bg-button.png) top left repeat-x !important; } .button-link a:hover { color: #333 !important; background: none !important; border: 1px solid #d0d0d0; border-bottom: 1px solid #989898; } .button-link a span { display: block; height: 18px; padding-left: 30px; background-image: url(../images/icons-buttons.png); background-repeat: no-repeat; } .more-info { float: right; } .more-info a { padding: 2px 10px; } .left-align { float: none; } .download a span { background-position: 0 0; } .back a span { background-position: 0 -16px; padding-left: 15px;} .back a:hover { border: 1px solid #d0d0d0; } .more-info a span { background-position: 100% -32px; padding-left: 0px; padding-right: 40px; } #subnav .button-link { font-size: 12px; } #subnav .button-link a { padding: 2px 8px; } #subnav .pdf-download a { margin: 30px 0 0 10px; padding: 8px 8px; } /* Promos */ #promos { padding: 20px 0; background: #fff; } #promos .promo { width: 260px; float: left; margin: 0 30px; } #promos .promo h2 { margin: 0px; font-size: 14px; font-weight: bold; margin-bottom: 5px; } #promos .promo p { line-height: 1.6em; } #promos .promo img { float: right; margin-left: 10px;} .double .promo { width: 450px !important; height: 126 !important; margin: 0 0 0 20px !important;} .double .last { float: right; } /* Homepage */ .home #main { border-top: 6px solid #efefef; padding: 0px; } .home .col { width: 477px; height: 350px; position: relative; } .home .first { margin-right: 6px; } .home .col h2 { font-size: 24px; font-weight: bold; height: 40px; line-height: 40px; margin: 0; } .home .col a { text-decoration: none; } .home .col h2 a { background: #e8e8e8; display: inline-block; color: #333; padding: 0 8px; } .home .second-tier li { display: block; float: left; font-weight: bold; } .home .second-tier li a { display: block; padding: 0 8px; border-top: none; border-bottom: none; height: 28px; line-height: 28px; } .home .content { position: absolute; left: 0px; top: 160px; z-index: 10; text-decoration: none; } .home .band { height: 28px; width: 477px; background: #fff; position: absolute; top: 200px; filter: alpha(opacity=80); opacity: 0.8; } /* DIY */ .diy-hero { margin: 20px 0; } .product-categories { width: 620px; } .product-categories li { width: 205px; height: 135px; float: left; background: url(../images/bg-category-listing.png) top left no-repeat; display: block; } .product-categories span { position: absolute; left: 0px; bottom: 7px; display: block; width: 170px; padding: 7px 10px; } .product-categories a:hover span { text-decoration: underline;} /*.diy-categories li.last { width: 190px; margin-right: 0px; }*/ #main .product-categories a { display: block; height: 140px; position: relative; font-size: 14px; font-weight: bold; color: #fff; overflow: hidden; text-decoration: none; } #main .product-categories a:hover { text-decoration: underline; } .tabs .hover { text-decoration: underline; } .smoothTabsLiCurrent { text-decoration: none !important;} .how-to-guide #main { border-top: 6px solid #003068 !important;} .how-to-guide #main #tools { background: #fff !important; } .how-to { background: #f4f4f4 url(../images/bg-how-to.png) top left repeat-x; padding-top: 10px; margin-top: 40px; position: relative; } .how-to h2 { color: #333; font-size: 16px; margin: 0 0 15px 15px; font-weight: bold; } .how-to .tabs { border-bottom: 1px solid #dcdcdc; height: 27px; padding-left: 10px; } .how-to .tab { padding: 20px 15px; height: 250px; overflow: auto; } .how-to .tab ul li { margin-bottom: 20px; } .how-to .tab ul img { float: left; margin-right: 10px; } .how-to .tab ul h3 { font-size: 12px; margin: 0px; font-weight: bold;} #main .how-to .tab ul a { color: #333; text-decoration: none; } #main .how-to .tab ul a:hover, #main .how-to .tab ul li.hover a { text-decoration: underline; } .how-to .tab ul h3, #main .how-to .tab ul p { line-height: 1.1em; margin: 0; } .how-to .tab ul h3 { display: block; } .how-to .tabs li { float: left; font-size: 12px; font-weight: bold; color: #333; padding: 9px 10px 6px 10px; line-height: 1; cursor: pointer; cursor: hand; } .how-to .tabs li.smoothTabsLiCurrent { border: 1px solid #dcdcdc; border-bottom: none; background: #fff url(../images/bg-tab-current.png) top left repeat-x; } .tab { display: none; zoom: 1; } .tab h3 { display: none; } .how-to .first { display: block; } .how-to .all { font-size: 10px; position: absolute; right: 10px; top: 55px; text-decoration: none; } .how-to .all:hover { text-decoration: underline; } .projects h2 { margin-bottom: 0; } .projects .tab { display: block; height: auto; padding-bottom: 0px; } .projects .all { top: 15px; right: 20px; } .diy-promo { border: 1px solid #a7a7a7; background: #f4f4f4; margin-top: 29px; padding-bottom: 10px; } .diy-promo h3 { margin: 0px; background: #a3a3a3 url(../images/bg-promo-heading.png) top left repeat-x; padding: 8px 10px; color: #fff; font-size: 15px; font-weight: bold; } .diy-promo h3 a { color: #fff; text-decoration: none; } .diy-promo img, .diy-promo .content { float: left; } .diy-promo img { margin: 15px; } .diy-promo .content { width: 170px; margin-top: 15px; } #main .diy-promo .content p { color: #333; line-height: 1.1em; margin-bottom: 10px; } #main .category-columns { padding-bottom: 30px; } #main .category-columns .width-290 { margin: 0 0 0 25px; } #main .category-columns .first { margin: 0px; } .category-columns h2 { margin: 0 0 40px 0; width: 290px; height: 120px; display: block; position: relative; overflow: hidden; } .category-columns h2.dark span { color: #000; text-shadow: 0px -1px 0px #ccc; } .category-columns h2 span { font-size: 26px; font-weight: bold; color: #fff; position: absolute; left: 20px; bottom: 10px; text-shadow: 0px -1px 0px #374683; } .category-columns .listing li { padding: 0 20px; } .category-columns .listing img { float: left; margin-right: 25px; } .category-columns .listing h3 { position: relative; top: 15px; font-size: 14px; } #main .category-columns .listing a { color: #333; text-decoration: none; } #main .category-columns .listing a:hover { text-decoration: underline;} /* Commercial */ .commercial-categories { width: auto; clear: both; } .commercial-categories li { float: left; width: 180px; height: 135px; float: left; background: url(../images/bg-commercial-listing.png) top left no-repeat; } .commercial-categories span { text-align: center; width: 155px; } #main .commercial-product-listing { width: 715px; margin-top: 30px; } .commercial-product-listing li { width: 198px; text-align: center; padding: 10px 15px; border: 1px solid #ccc; float: left; margin: 0 5px 5px 0; height: 195px; overflow: hidden; } .commercial-product-listing h2 { font-size: 14px; font-weight: bold; margin: 0 } .commercial-product-listing img { margin: 10px 0; } #main .commercial-product-listing p { margin: 0; color: #333; } #main .commercial-product-listing h2 a { color: #333; text-decoration: none; } .category-listing-page #subnav { /*margin-top: 20px;*/ } .category-listing-page h1 { margin-bottom: 10px; } .commercial-listing-hero { margin: 20px 0 10px 0;} /* Product Page */ #product .intro { border-bottom: 1px solid #bfbfbf; padding-bottom: 10px; min-height: 272px; } #product .intro img { float: left; } #product .intro .content { float: left; margin-left: 20px; width: 300px; } #product h1 { margin-bottom: 10px; } #product h2 { margin-bottom: 5px; color: #666; font-weight: bold; } #product .video-pdf { position: relative; top: 20px; float: right; } #product .video-pdf a { float: none; margin-top: 0; } .instructions { margin: -10px 0 20px 5px !important; } .instructions li { padding-bottom: 10px; } .instructions img { float: left; margin-right: 20px; } .instructions h3 { font-size: 14px; font-weight: bold; margin-bottom: 5px; } #main .instructions p { line-height: 1.2em; } .video-pdf a { float: right; margin-top: 5px; } #main #product h2 a { color: #666; text-decoration: none; } #main #product h2 a:hover { text-decoration: underline; } #product .related-products li { width: 210px; float: left; padding: 10px; border: 1px solid #ccc; text-align: center; } #product .related-products .first { margin-right: 11px; } #product .related-products h3 { margin: 0 0 10px 0; font-size: 14px; font-weight: bold; line-height: 1.2em; } #product .related-products h3 a { color: #666; text-decoration: none; } #product .related-products p { margin: 10px 0 0 0; line-height: 1.2em; } #product .tabbed-content { margin: 30px 0 0 0; position: relative; padding-top: 35px; } #product .tabbed-content .tab { border: 1px solid #ccc; padding: 10px; } #product .tabbed-content .tab ul { margin: 10px 20px; } #product .tabbed-content .tabs { list-style-type: none; height: 35px; position: absolute; top: 0px; left: 0px; } #product .smoothTabsLiCurrent { border: 1px solid #ccc; border-bottom: none; } #product .tabbed-content .tabs li { background: #fff; float: left; display: block; height: 35px; line-height: 35px; cursor: pointer; cursor: hand; padding: 0 20px; font-weight: bold; font-size: 14px; } #main .related-projects, #main .related-projects li { list-style-type: none; margin: 0; padding: 0; cursor: pointer; cursor: hand; } #main .related-projects { margin-top: -10px; } #main .related-projects li img { float: left; margin-right: 10px; } #main .related-projects h3 { font-size: 13px; font-weight: bold; margin-bottom: 8px; } #main .related-projects h3 a { color: #333; text-decoration: none; } #main .related-projects h3 a:hover, #main .related-projects li.hover a { text-decoration: underline;} #main .related-projects p { line-height: 1.3em; } /* How to Landing */ .video-holder .col { background: #f5f5f5; width: 395px; padding: 10px 20px 20px 20px; } .video-holder .first { margin-right: 50px; } .video-holder h2 { margin: 0 0 10px 0; } .video-holder .hero { float: right; margin: 0 0 10px 10px; } .video-table { clear: both; } .video-table th { padding-top: 20px; text-align: left; font-size: 13px; color: #323232; width: 80px; } .video-table th.project { width: 235px; } .video-table td { padding: 15px 0 0 0; vertical-align: top; } .video-table td.title { padding-right: 15px; } .video-table a { color: #5c5c5c; text-decoration: none; } .video-table a:hover { text-decoration: underline; } .video-table a.link { background: url(../images/icons-videos.png) 0 0 no-repeat; padding-left: 22px; display: block; } .video-table a.download { background: url(../images/icons-videos.png) 0 -20px no-repeat; } .related-videos { clear: both; } /* How to Video */ #main .required { width: 185px; float: right; } #main .required h3 { margin: 0 0 15px 0; font-size: 11px; } #main .required h3 a { text-decoration: none; } #main .required .holder { background: #f0f0f0; padding: 10px 15px 1px 15px; margin-top: 5px; } #main .required .img { background: #fff; padding: 10px 0; margin-bottom: 5px; } #main .required .img img { display: block; margin: 0 auto; } /* Projects Listing */ #main .projects-list { margin: 10px 20px 20px 20px; } #main .projects-list li { border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 20px; } #main .projects-list li.last { border: none; } #main .projects-list p { margin: 0; line-height: 1.4em; } .projects-list img { float: left; margin: 0 20px 0 0;} .projects-list h3 { font-size: 13px; font-weight: bold; margin: 0 0 10px 0;} .projects-list h3 a { color: #333 !important; text-decoration: none !important; } .projects-list h3 a:hover, .projects-list h3.hover a { text-decoration: underline !important;} #main .projects-list .has-image h3, #main .projects-list .has-image p { margin-left: 120px; } #sort { border: 1px solid #ccc; color: #959595; margin: 0 5px; } #main .projects-pagination { text-align: right; } #main .projects-pagination p { margin-bottom: 0; } #main .projects-pagination a { color: #666; } #main .projects-pagination a:hover { color: #000; } #main .commercial-projects { margin: 20px 0 0 0; } #main .commercial-projects li { border: none; padding: 0; } #main .commercial-projects .has-image h3, #main .commercial-projects .has-image p { margin-left: 170px; } #main .commercial-projects p, #main .commercial-projects h3 { margin: 0 0 5px 0;} #main .commercial-projects .more-info { float: none; margin-top: 10px; } .commercial-projects-holder h2 { color: #333; font-weight: bold; } .commercial-projects-holder .has-image { position: relative; } .commercial-projects-holder .has-image img { position: absolute; left: 0; top: 0; } .commercial-projects-holder .view-all { position: relative; top: 10px; } .product-projects h2 { font-weight: normal !important; margin-bottom: -10px !important; } /* Contact */ .contact-form { margin-left: 20px; } .contact-form h4 { margin: 48px 0 20px 0; } /* Application Guide */ #application-nav { clear: both; padding-top: 10px; } #application-nav .browse { width: 450px; border: 1px solid #f1f1f1; overflow: hidden; padding: 15px 0; background: url(../images/bg-application-nav.png) bottom left repeat-x; float: left; height: 143px; } #application-nav .search { float: right; } #application-nav .search-field { margin-left: 19px; margin-top: 18px; display: block; width: 340px; } #application-nav .search-field #SearchForm_SearchForm_Search { width: 315px; } #application-nav .browse h2 { margin: 0 0 10px 22px; } #application-nav .browse ul, #application-nav .browse li { list-style-type: none; margin: 0; padding: 0; } #application-nav .browse ul { margin-left: 19px; } #application-nav .browse li { display: block; float: left; border: 1px solid #e9e9e9; width: 30px; height: 25px; text-align: center; line-height: 25px; margin: 5px; background: url(../images/bg-letter-nav.png) bottom left repeat-x; } #application-nav .browse a { color: #666; } #application-nav .browse a:hover { text-decoration: underline;} #application-table { margin-top: 20px; } #application-table th { font-size: 16px; text-align: left; background: #dfdfdf; padding: 5px 20px; color: #767676; width: 420px; font-weight: normal; } #application-table .even td { background: #f5f5f5; } #application-table .title td { padding: 15px 20px; font-weight: bold; font-size: 16px; color: #666; } #application-table .title td a { font-size: 10px; margin-left: 5px; } #application-table td a { font-weight: normal; color: #666; text-decoration: underline; } #application-table td a:hover { color: #000;} #application-table td { padding: 5px 20px; } /* Ares of use image map */ #main #areas-of-use, #main #areas-of-use li { list-style-type: none; margin: 0; padding: 0;} #main .loading { background: #efefef url(../images/ajax-loader.gif) 50% 50% no-repeat !important; } #main #areas-of-use { width: 675px; height: 490px; display: block; /*float: right;*/ /*margin-left: 20px;*/ margin-bottom: 20px; background: #efefef url(../images/areas-of-use.jpg) 0 0 no-repeat; position: relative; } #main #areas-of-use li { position: absolute; display: block; width: 165px; height: 45px; text-indent: -9999px; overflow: hidden; cursor: pointer; cursor: hand; } #main #areas-of-use li a { display: block; } #areas-of-use #exposed-rooftop { left: 354px; top: 38px; } #areas-of-use #balconies { left: 77px; top: 177px; } #areas-of-use #podium { left: 26px; top: 300px; } #areas-of-use #below-grade { left: 455px; top: 425px; } #areas-of-use #bathroom { left: 510px; top: 275px; } #areas-of-use #parking { left: 492px; top: 87px; } /* Form */ .form-holder fieldset .field { position: relative; margin-bottom: 20px; width: 100%; display: block; } .form-holder fieldset .middleColumn { margin-left: 95px; } .form-holder fieldset label { position: absolute; left: 0px; top: 0px; } .form-holder fieldset .middleColumn .text, .form-holder fieldset .middleColumn textarea { width: 98%; } .form-holder .Actions { text-align: right; } .Actions input { color: #666 !important; float: right; border: 1px solid #ececec; border-bottom: 1px solid #c5c5c5; padding: 5px 10px; background: url(../images/bg-button.png) bottom left repeat-x; overflow: auto; display: block; font-weight: bold; } .Actions input:hover { border: 1px solid #c7c7c7; border-bottom: 1px solid #989898; } #main .form-holder .required { font-size: 10px; float: none; margin: 2px 0 0 95px; display: block; background: #fdecec; padding: 3px 5px; width: auto; } /* Footer */ footer { padding-bottom: 70px; } footer nav, footer p { color: #333; font-size: 12px; line-height: 1.4em; } footer a { color: #333; } footer a:hover { color: #333; text-decoration: underline; } footer nav { margin: 0 0 10px 0; } footer nav a { margin: 0 10px; } footer .logo { width: 140px; height: 23px; position: absolute; bottom: 20px; left: 20px;} footer #sign-up { width: 300px; position: absolute; right: 20px; top: 20px;} #Form_SubscribeForm { height: 70px; margin-top: 15px; position: relative; } #Form_SubscribeForm #DIYCustomer, #Form_SubscribeForm #Commercial { float: left; margin-right: 20px; margin-left: -4px; } #Form_SubscribeForm #Email { clear: both; padding-top: 5px; } #Form_SubscribeForm #Email label { display: none; } #Form_SubscribeForm #Email input { width: 205px; border: 0; padding: 6px 5px 5px 5px; font-size: 14px; color: #999; margin-bottom: 2px; } #Form_SubscribeForm .Actions input { position: absolute; top: 23px; left: 225px; font-weight: normal; } #Form_SubscribeForm .message { font-size: 11px; } .byline { margin-top: 5px; text-align: right; } .byline a { color: #666; } .byline a:hover { text-decoration: underline; } /* *07: Print styles-----------------------------------------------------------------------------------------------------------*/ @media print { * { background: transparent !important; color: #444 !important; text-shadow: none; } a, a:visited { color: #444 !important; text-decoration: underline; } a:after { content: " (" attr(href) ")"; } abbr:after { content: " (" attr(title) ")"; } .ir a:after { content: ""; } /* Don't show links for images */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } .search_re{ float: left; width: 610px; } .proj_moreinfo{ width: 700px; float: left; margin-top: 10px; } /* *08: Media & Orientation ---------------------------------------------------------------------------------------------------*/ @media all and (orientation:portrait) { /* Style adjustments for portrait mode goes here */ } @media all and (orientation:landscape) { /* Style adjustments for landscape mode goes here */ } @media all and (min-device-width: 768px) and (max-device-width: 1024px) { html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } /* Prevent iOS, WinMobile from adjusting font size */ #main #areas-of-use { background: #efefef url(../images/areas-of-use-mobi.jpg) 0 0 no-repeat; } } @media screen and (max-device-width: 480px) { /* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome) - Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } /* Prevent iOS, WinMobile from adjusting font size */ #main #areas-of-use { background: #efefef url(../images/areas-of-use-mobi.jpg) 0 0 no-repeat; } } .darkbluest{border-top: 6px solid #66CCFE !important;} .purplest{border-top: 6px solid #5b77cc !important;}