/* Style Sheet created by 2Creative */ * { margin: 0; padding: 0; } body { color: #333; font: 12px/20px Arial, Helvetica, sans-serif; background: url(images/bg-tile.jpg) repeat-x left top; } h1, h2, h3, h4 { color: #18376B; font-weight: normal; } h1 { font-size: 24px; margin-bottom: 20px; } h2 { font-size: 20px; margin-bottom: 20px; } h3 { font-size: 20px; margin-bottom: 10px; } h4, h5, h6 { font-size: 16px; margin-bottom: 10px; } p { padding-bottom: 15px; } img { border: none; } a { color: #4D9B05; text-decoration: underline; } a:hover { text-decoration: none; } ul, ol { padding-left: 20px; margin-bottom: 15px; } li { margin-bottom: 2px; list-style: square; } #wrapper { width: 968px; margin: 0 auto; } #header { height: 129px; } #logo { float: left; width: 277px; } #nav { float: right; width: 660px; } #top-nav { height: 46px; } #sitename { float: left; width: 420px; } #sitename h1 { font-size: 14px; color: #fff; padding-top: 10px; text-align: right; } #search { float: right; width: 218px; padding-top: 5px; } #menu { height: 46px; font-size: 14px; } #menu ul { list-style: none; margin: 0; padding: 8px 0 0; } #menu li { list-style: none; float: left; width: 60px; text-align: center; } #menu li#menu-home { width: 53px; } #menu li#menu-colour { width: 63px; } #menu li#menu-paint { width: 110px; } #menu li#menu-speciality { width: 144px; } #menu li#menu-trades { width: 50px; } #menu li#menu-news { width: 130px; } #menu li#menu-contact { width: 30px; text-align: right; } #menu a { color: #303030; text-decoration: none; } #menu a:hover { color: #666; text-decoration: none; } #social-media { height: 32px; } #facebook { float: right; width: 31px; margin-right: 10px; } #twitter { float: right; width: 32px; } #content { /* padding-bottom: 10px; */ } #hex-area { margin-top: 30px; } ul.hex-list, ul.hex-list li { margin: 0; padding: 0; list-style: none; } .hex-list li { position: relative; margin: 0; padding: 0; float: left; width: 240px; height: 211px; background: url(images/blue-hex.png) no-repeat; color: #fff; } .hex-list li.hex { margin:0; } .hex-list li a { z-index: 3; position: absolute; margin: 0; padding: 0; top: 0; left: 0; width: 240px; height: 211px; } .hex-list li img { z-index: 2; position: absolute; margin: 0; padding: 0; top: 0; left: 0; } .hex-list li div.hex-desc { z-index: 1; width: 240px; height: 211px; } .hex-list li div.hex-desc span.title { position: absolute; top: 98px; left: 20px; font-size: 14px; font-weight: bold; width: 200px; line-height: 1.2em; color: #fff; text-align: center; } #slogan {} #extra { height: 117px; } #brochure { float: left; width: 369px; } #intro { float: right; width: 300px; } #intro h2 { font-size: 12px; margin-bottom: 0; color: #999; text-align: right; padding-top: 90px; } #intro h2 a { color: #666; text-decoration: none; } .content-banner { margin-bottom: 35px; } .content-banner h2 { font-size: 24px; color: #fff; padding-top: 130px; padding-left: 30px; margin-bottom: 0; } #content-banner-about { height: 257px; background: url(pages/inspirations-paint-billboard.jpg) no-repeat left top; } #content-banner-colour { height: 257px; background: url(pages/colour-billboard.jpg) no-repeat left top; } #content-banner-overview { height: 257px; background: url(pages/overview-history-billboard.jpg) no-repeat left top; } #content-banner-community { height: 257px; background: url(pages/community-benefits-billboard.jpg) no-repeat left top; } #content-banner-colour-clique { height: 257px; background: url(pages/colour-clique-billboard.jpg) no-repeat left top; } #content-banner-careers { height: 257px; background: url(pages/careers-billboard.jpg) no-repeat left top; } #content-banner-paint { height: 257px; background: url(pages/paint-products-billboard.jpg) no-repeat left top; } #content-banner-house { height: 257px; background: url(pages/house-paint-billboard.jpg) no-repeat left top; } #content-banner-car { height: 257px; background: url(pages/automotive-paint-billboard.jpg) no-repeat left top; } #content-banner-boat { height: 257px; background: url(pages/marine-paint-billboard.jpg) no-repeat left top; } #content-banner-timber { height: 257px; background: url(pages/timber-finish-billboard.jpg) no-repeat left top; } #content-banner-pool { height: 257px; background: url(pages/pool-paint-billboard.jpg) no-repeat left top; } #content-banner-roof { height: 257px; background: url(pages/roof-paint-billboard.jpg) no-repeat left top; } #content-banner-equipment { height: 257px; background: url(pages/equipment-hire-billboard.jpg) no-repeat left top; } #content-banner-wall { height: 257px; background: url(pages/wallpaper-wall-art-billboard.jpg) no-repeat left top; } #content-banner-textures { height: 257px; background: url(pages/render-texture-billboard.jpg) no-repeat left top; } #content-banner-film { height: 257px; background: url(pages/scenic-art-billboard.jpg) no-repeat left top; } #content-banner-special { height: 257px; background: url(pages/specialty-billboard.jpg) no-repeat left top; } #content-banner-specialty { height: 257px; background: url(pages/specialty-paint-billboard.jpg) no-repeat left top; } #content-banner-trades { height: 257px; background: url(pages/trade-billboard.jpg) no-repeat left top; } #content-banner-painters { height: 257px; background: url(pages/trade-paint-billboard.jpg) no-repeat left top; } #content-banner-plasterers { height: 257px; background: url(pages/plasterer-billboard.jpg) no-repeat left top; } #content-area { padding: 0 14px; } #content-left { float: left; width: 670px; } .sub-page-listing { margin-bottom: 30px; } .sub-page-listing-img { float: left; width: 280px; margin-right: 20px; } .sub-page-listing-txt { float: left; width: 370px; } .sub-page-listing-txt h3 { font-size: 20px; color: #18376B; margin-bottom: 10px; } .sub-page-listing-txt h3 a { color: #18376B; text-decoration: none; } .sub-page-listing-txt h3 a:hover { color: #18376B; text-decoration: underline; } .sub-page-listing-txt p { padding-bottom: 10px; } .sub-page-listing-txt p a { color: #4D9B05; text-decoration: none; } .sub-page-listing-txt p a:hover { color: #4D9B05; text-decoration: underline; } .contact-listing { margin-bottom: 30px; } .contact-listing-img { float: right; width: 280px; margin-right: 20px; } .contact-listing-txt { float: left; width: 370px; } .contact-listing-txt h3 { font-size: 20px; color: #18376B; margin-bottom: 10px; } .contact-listing-txt h3 a { color: #18376B; text-decoration: none; } .contact-listing-txt h3 a:hover { color: #18376B; text-decoration: underline; } .contact-listing-txt p { padding-bottom: 10px; } .contact-listing-txt p a { color: #4D9B05; text-decoration: none; } .contact-listing-txt p a:hover { color: #4D9B05; text-decoration: underline; } .article-listing { margin-bottom: 30px; } .article-listing h3 { margin-bottom: 10px; } .article-listing h3 a { color: #18376B; text-decoration: none; } .article-listing h3 a:hover { color: #18376B; text-decoration: underline; } .article-listing p { padding-bottom: 10px; } .news-date { font-style: italic; color: #4D9B05; } #search-area {} #search-area h3 { margin-bottom: 15px; } #search-area h4 a { color: #4D9B05; text-decoration: none; } #search-area h4 a:hover { color: #4D9B05; text-decoration: underline; } #search-area p { padding-bottom: 10px; } #content-right { float: right; width: 220px; } #page-sub-menu { margin-bottom: 30px; } #page-sub-menu ul { list-style: none; padding-left: 0; } #page-sub-menu li { list-style: none; font-size: 14px; background: url(images/arrow.jpg) no-repeat left center; padding: 5px 0 5px 15px; border-bottom: 1px dotted #666; } #page-sub-menu li a { color: #444; text-decoration: none; } #page-sub-menu li a:hover { color: #666; text-decoration: none; } #page-sub-menu li a.sub-this-page { color: #18376B; } #paint-question { } #paint-question h3 { font-size: 20px; margin-bottom: 20px; } #sub-wrapper { width: 100%; margin: 0 auto; background: #ccc; color: #CCC; } #content-sub { width: 968px; margin: 0 auto; padding: 20px 0; } #content-sub h3 { font-size: 12px; font-weight: bold; margin-bottom: 5px; color: #333; } #content-sub h3 a { color: #333; } #content-sub h3 a:hover { color: #666; text-decoration: none; } #content-sub ul { list-style: none; padding-left: 0; margin-bottom: 0; } #content-sub li { list-style: none; padding-bottom: 0; margin-bottom: 0px; font-size: 12px; } #content-sub a { text-decoration: none; color: #636161; } #content-sub a:hover { text-decoration: none; color: #444; } .sub-menu-item { float: left; width: 45px; margin-right: 30px; min-height: 150px; } #sub-menu-home { } #sub-menu-about { width: 108px; } #sub-menu-colour { width: 58px; } #sub-menu-paint { width: 130px; } #sub-menu-specialty { width: 170px; } #sub-menu-trades { width: 100px; } #sub-menu-news { width: 100px; } #sub-menu-contact { width: 30px; margin-right: 0; } #footer { width: 968px; margin: 0 auto; border-top: 1px dotted #666; } #footer p { font-size: 12px; padding: 15px; color: #666; text-align: center; } #footer a { color: #636161; text-decoration: none; } #footer a:hover { color: #333; text-decoration: none; } /************************ MISC ********************/ .clear { clear: both; line-height: 0; height: 0; } .warning { color: #CC0000; font-weight: bold; padding-bottom: 0; } .small-font { font-size: 11px; } .notice { font-size: 11px; font-style: italic; } .heading, .details { display: none; } .textRed, .textRedBold { color: #CC0000; } .textBlue, .textBlueBold { color: #18376B; } .textGreen, .textGreenBold { color: #4D9B05; } .textRedBold, .textBlueBold, .textGreenBold { font-weight: bold; } .textColourGreen { color: #006600; } .textColourPurple { color: #330066; } .textColourRed { color: #FF0000; } .textColourGold { color: #CC9900; } .textColourSilver { color: #666; } .page-image { float: right; width: 282px; margin-left: 20px; margin-bottom: 20px; } .pagination { margin-top: 20px; margin-bottom: 30px; } .pagination ul { margin: 0; padding: 0; text-align: center; font-size: 12px; } .pagination li { list-style-type: none; display: inline; padding-bottom: 1px; margin-right: 2px; } .pagination a, .pagination a:visited { padding: 5px 8px; border: 1px solid #666; text-decoration: none; color: #666; } .pagination a:hover, .pagination a:active{ border: 1px solid #666; color: #666; background-color: #ccc; } .pagination a.currentpage { background-color: #FFF; color: #666 !important; border-color: #666; font-weight: bold; cursor: default; } .pagination a.disablelink, .pagination a.disablelink:hover { background-color: white; cursor: default; color: #666; border-color: #666; font-weight: normal !important; } .pagination a.prevnext { } /************************* FORM **********************/ table { width: 100%; margin-top: 20px; } th { padding: 3px; } td { padding: 3px; } .jobTitle { font-size: 14px; font-weight: bold; color: #00275D; padding-bottom: 5px; } /************************* FORM **********************/ form br { clear: both; } label, input, select, textarea { font: 12px Arial, Helvetica, sans-serif; } label { text-align: left; width: 150px; border: none; } #formSearch { } #formSearch .searchInput { float: left; width: 120px; height: 20px; border: none; padding: 2px 4px; color: #333; margin: 4px 5px 0 0;} #formSearch .submitButton { float: left; width: 81px; height: 32px; cursor: pointer; border: none; background: url(images/search-btn.jpg) no-repeat left top; } #formQuestion {} #formQuestion label { display: block; width: 220px; margin-bottom: 5px; } #formQuestion input, #formQuestion select, #formQuestion textarea { display: block; width: 212px; border: 1px solid #CCC; background: #ebebeb; padding: 4px; margin-bottom: 15px; } #formQuestion select { width: 209px; } #formQuestion p { padding-bottom: 5px; } #formQuestion .tinyInput { width: 30px; } #formQuestion .wideLabel { width: 220px; } #formQuestion input.hidden { display: none; } #formQuestion .sendButton { border: 1px solid #18376B; background: #18376B; font-size: 12px; color: #fff; width: 80px; padding: 5px 0; cursor: pointer;} #formQuestion .quizInputTiny { width: 90px; margin-bottom: 20px; } #formQuestion .quizLabelTiny { width: 220px; padding-right: 10px; font-size: 12px;} #formContact {} #formContact label, #formContact input, #formContact select, #formContact textarea { display: block; width: 140px; float: left; margin-bottom: 10px; padding: 3px; border: none; } #formContact input, #formContact select, #formContact textarea { width: 300px; border: 1px solid #CCC; padding: 4px; margin-bottom: 10px; } #formContact select { width: 209px; } #formContact p { padding-top: 10px; padding-bottom: 5px; } #formContact br { clear: left; } #formContact .tinyInput { width:50px; } #formContact .smallInput { width: 150px; } #formContact .mediumInput { width: 200px; } #formContact .mediumLabel { width: 230px; } #formContact .wideLabel { width: 270px; } #formContact .extrWideLabel { width: 400px; } #formContact input.hidden { display: none; } #formContact .longLabel { width: 180px; } #formContact .radioLabel { width: 100px; } #formContact .radioButton { width: 15px; margin: 0 5px 0 0; border: none; background: none; } #formContact .sendButton { border: 1px solid #18376B; background: #18376B; font-size: 12px; color: #fff; width: 80px; padding: 5px 0; cursor: pointer;} .formNotice { font-size: 12px; color: #4D9B05; font-style: italic; padding-bottom: 5px; } #formContact .quizInput { width: 70px; } #formContact .quizLabel { width: 360px; padding-right: 10px; font-size: 12px; text-align: right; }