/* ----------------------------------------------------------------------- Name: Silverkey Dental Template URL: layout.css Description: Author: MD Debranski Blueprint CSS Grid : - Column Count: 16 - Column Width: 40px - Gutter Width: 20px - Total Width : 940px - Baseline: 20px Notes: This css file only consists of layout elements that should not vary across various clients. To update client colors/images please see theme.css ----------------------------------------------------------------------- */ /* Table of Contents ------------------------------------------ I. Major Page Structure / Global Styles II. Header & Navigation III. Main Content A. Non-Layout Specific Content Styles B. Layout Specific Content Styles IV. Footer V. Global Custom Classes VI. Blueprint & Superfish Overrides ------------------------------------------ */ /******************************************************************************** --- I. Major Page Structure / Global Styles --- *********************************************************************************/ body {font-size:83.333125%; /* to get to the 20px baseline */line-height: 1.53em; margin-left: 0px;} h1 {font-size:1.95em; line-height:1.54em; font-weight:bold } h2 {font-size:1.12em;line-height:1.35em;margin-bottom:1.35em; font-weight:bold;} h3 {font-size:1.12em;line-height:1.35em;margin-bottom:1.5em; font-weight:bold;} h3.subheading {font-size:1.2em;line-height:1.05em;margin-bottom:1.05em;font-weight:bold;} h4 {font-size:1.07em;line-height:1.42em;margin-bottom:1.42em;font-weight:bold; } .services h1 {font-size:1.1em; line-height:1em; margin-bottom:.5em;} .services h2 {font-size:1.95em; line-height:1.25em; margin-bottom:.2em; } address {font-style:normal;} a {font-weight:bold;font-size:1em; line-height: 1.5em; margin-bottom: 1.5em} a:hover {text-decoration:none; } p{font-size:1em; line-height: 1.5em; margin-bottom: 1.5em} ul li{margin-bottom: 1.5em} /******************************************************************************** --- II. Header & Navigation --- *********************************************************************************/ #header{height:99px;} #header #logo {text-align: center; height: 75px} #header #logo div{padding-top:18px;} #header #logo div.name{font-size:32px; margin:0 auto;} #header #logo div.logo-tagline{font-size:12px; text-align: center;padding-top:10px} #header #logo div.tagline{font-size:16px; text-align: center;padding-top:5px} #header #contact-us {text-align: center; margin-top:5px; position:relative; left:-5px} #header #contact-us .number a{position:relative; left:-30px} #header #contact-us .number p {margin-top:12px} #header #contact-us strong{font-size: 22px; } /******************************************************************************** --- III. Main Content --- *********************************************************************************/ .home #inner-body{margin-top: 0px;margin-bottom: 0px} .home #inner-body #main-section {height: 442px; width: 940px; } .home #inner-body #main-section #copy-01 p{font-size:23px; margin-top: 1.8em} .sIFR-active .home #inner-body #main-section #copy-02 p{font-size:15px; margin-top: 2em; line-height: 2.67px} .home #inner-body #main-section #copy-03 p{line-height: 1.53;margin:-18px 0 0 -10px;padding:0px} .home #inner-body #main-section .body-nav {margin-top:2em} .home #inner-body #main-section ul li{} .home #inner-body #main-section ul li a{font-size:.9em;margin-bottom:1.667em;line-height:1.667em; position:relative; top:-3px;} #inner-body {margin-top: 40px;margin-bottom: 40px} #inner-body .container {} #inner-body #left-column {float:left;margin-right:20px;width:200px;} #inner-body #center-column {float:left; margin-right:20px;width:460px;} #inner-body #center-column h4{margin-bottom:0px;} #inner-body #center-column h5{text-align:center;font-weight:bold; } #inner-body #center-column ul li { } #inner-body #center-column #next-steps p{ color:white; position:relative; top:6px; left:10px; font-weight:strong} #inner-body #center-column #next-steps ul{margin-left:30px; margin-top:30px;line-height:10px;} #inner-body #center-column #next-steps ul li{list-style-image: url(../images/gfx/gfx-bullet-reverse-arrow.png); border-bottom:1px solid #ccc; margin-bottom:10px; padding-bottom:10px;font-size:12px;} #inner-body #center-column #next-steps ul li.last{border-bottom:0px;} #inner-body #right-column {float:left;margin-right:20px;width:220px;} #inner-body #right-column div.module-sidebar {width:198px;min-height:240px;} #inner-body #right-column div.module-sidebar {width:198px;min-height:180px;} #inner-body #right-column div.module-sidebar .button {margin-bottom:1.667em; display:block} div.module-sidebar {min-height:420px;margin-bottom:1.5em;} div.module-sidebar p {font-size:.9em;margin-bottom:1em;line-height:1.667em;} div.module-sidebar p span{margin-top:1.12em; display:block;} div.module-sidebar .button p a{font-size:.8em;} div.module-sidebar .button a{font-size:.7em;} div.module-sidebar h4 {font-size:1.12em;line-height:1.35em;margin-bottom:.75em; } div.module-sidebar blockquote {margin:0;} div.module-sidebar ul {list-style:none;margin:0;padding:0;} div.module-sidebar ul li {list-style:none;float:left;width:50%;} div.module-sidebar ul li a {display:block;} div.module-sidebar .before-after .before img,div.module-sidebar .before-after .after img {border:4px solid;} div.module-sidebar .before-after .before, div.module-sidebar .before-after .after {background-color:#ffffff;} div.module-sidebar .before-after p{text-align:center; padding-bottom:4px;} div.module-sidebar #location {text-align:center;} div.module-sidebar #location p{text-align:left;} div.module-sidebar #location #map img{border:4px solid; margin-bottom: 1.5em} div.module-sidebar #location #map p{text-align:center;} #inner-body #left-column div.module-sidebar-second {min-height:280px;} #inner-body #center-column #contact-form{position: relative; top:1.5em} #inner-body #center-column #contact-form label{width:115px;display:block;float:left;margin:4px 10px 0px 0px;text-align:left;} #inner-body #center-column #contact-form label.error{float:none; width:auto; padding-left:125px; color:#f00;} #inner-body #center-column #contact-form span.remaining{display:block; text-align:right; padding-right:25px;} #inner-body #center-column #contact-form label.checkbox{width:305px;display:block;margin:-4px 0px 0px 0px;text-align:left;} #inner-body #center-column #contact-form input[type="text"]{ width:305px;} #inner-body #center-column #contact-form input[type="checkbox"]{ width:10px;display:block;float:left;margin:-2px 10px 0 4px;margin-left:125px;} #inner-body #center-column #contact-form textarea{width:300px;height:150px;} #inner-body #center-column #contact-form textarea.address{width:300px;height:65px;} #inner-body #center-column #contact-form .button{margin:15px 0 0 125px;} #inner-body #center-column .contact-label{width:100px;display:block;float:left;margin:4px 10px 0px 0px;text-align:left;} #inner-body #center-column .contact-field{width:305px;} #schedule label{display:block;} #schedule input[type="text"]{ width:250px;} #schedule input[type="text"].wider{ width:350px;} #schedule input[type="checkbox"]{display:block;float:left;margin:-2px 10px 0 0px;width:10px;} #schedule textarea {height:110px;width:370px;} #schedule textarea.address {height:65px;width:370px;} #schedule span.remaining {display:block;padding-right:77px;text-align:right;} #schedule label.checkbox {display:block;margin:-4px 0 0;text-align:left;width:375px;} #schedule .existing-customer {margin-bottom:1.5em; } #schedule .existing-customer label {float:left; margin-right:20px;} #schedule .existing-customer input[type="radio"] {float:left; margin-right:5px;} #schedule .existing-customer span {float:left; margin-right:15px} #schedule h3 {padding-top:1.35em;clear:both;} #schedule h3 img{background-color: #8da4aa; margin-bottom:4px; width:230px; height:1px;} .button a{clear:both; font-size:.8em; margin-bottom:2.1em;line-height:2.1em; padding: 4px 8px;text-decoration: none; } input.button {clear:both; font-size:.8em; margin-bottom:2.1em;line-height:2.1em; padding: 4px 8px;text-decoration: none; border:0px } .button a:hover{} .button-tall a {display:block;clear:both; height:34px;font-size:.8em;margin-bottom:1.875em;line-height:1.875em; padding: 6px 8px; text-decoration: none;} .button-tall a:hover{} .ie a.button {background-image:none} a.close-window{width:71px; height:27px; float:right; margin-right:3px; margin-top: -5px; background-position:0px 0px;} a.close-window:hover{background-position:0px -27px;} /******************************************************************************** --- IV. Footer --- *********************************************************************************/ #footer {height:34px; border-bottom: 6px solid ;font-size:.8em;margin-bottom:1.875em;line-height:1.875em;} #footer-home{font-size:.8em;margin-bottom:1.875em;line-height:1.875em; height:150px; border-bottom: 1px solid } #footer .copyright,#footer-home .copyright {float:left;padding:8px 0 0 10px;} #footer .serving,#footer-home .serving{clear:both;padding:40px 0;text-align:center;} #footer .contact-information,#footer .designed-by,#footer-home .contact-information,#footer-home .designed-by{float:right;padding:8px 60px 0 0;} #footer .contact-information address,#footer-home .contact-information address{float:left;margin-bottom:0;} /******************************************************************************** --- IV. Global Custom Classes --- *********************************************************************************/ .box {padding:1.5em 1em 0;background:transparent;} .xsmall {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;} .small {font-size:.9em;margin-bottom:1.667em;line-height:1.667em;} .large {font-size:1.2em;line-height:1.25em;margin-bottom:1.25em;font-weight:bold;} .normal {font-weight:normal;font-style:normal;} p img.top {margin-top:0;} .left {float:left;} img.left {margin:0 1.5em 1.5em 0;} .small-photo {float:left; margin: 0px 20px 20px 0px} .small-photo span {margin:0 0 1.5em 0;padding:0;} .small-photo span img{ border:4px solid;} ul.orange-arrow {margin-left: 3em} /******************************************************************************** --- IV. Pop Up --- *********************************************************************************/ body.pop-up{padding-bottom:0px;background-image:none } body.pop-up #title-box{ border-bottom:1px solid; height:3em; padding: 1.5em 1.5em 0 2em} body.pop-up h1, body.pop-up h2 {font-size:1.2em;line-height:1.25em;margin-bottom:1.25em;} body.pop-up #inner-dialog{margin:1.5em 1.5em 1.5em 2em; text-align: left} body.pop-up #inner-dialog img{border:4px solid ; margin-right:.75em } body.pop-up #inner-dialog a {font-size:.9em;margin-bottom:1.667em;line-height:1.667em; text-align: right;} body.pop-up .caption-container{margin-right:1.5em} body.pop-up .navlist ul {} body.pop-up .navlist ul li{margin:0px; margin-left: 1.5em; } body.pop-up .navlist ul li a {text-decoration: none; font-size:.9em;margin-bottom:1.667em;line-height:1.667em;} body.pop-up .image-holder{text-align: center} body.pop-up .image-holder p{font-size:.9em;margin-bottom:1.667em;line-height:1.667em;} body.pop-up .title{float:left; margin-right:5px; text-align:left; width:315px} body.pop-up .popup-close{float:right; margin-right:5px;} /********************************************************* --- IV. Photo Gallery --- *********************************************************/ body#gallery h2{float:left; margin-right:5px; padding-left:60px; width:280px} body#gallery #photo-gallery img{border:0px solid; position:relative; top:7px; left:6px;} body#gallery .text-holder{text-align: center; position:relative; top:4px } body#gallery .image-wrapper {border:1px solid; padding:.75em;float:left; margin-right:6px} body#gallery .image-holder {width: 267px; height: 174px; } body#gallery .gallery-navigation {float:left; margin:3px; width: 44px; } body#gallery .left{margin-left:245px} body#gallery a.prev-next{ background:url(../images/gfx/sprite-buttons-gallery.png) no-repeat 0px 0px; display:block;height:39px; width:44px;text-indent:-10000px;margin:1.5em 0;} body#gallery a.prev {background-position:0px 0px;} body#gallery a.prev:hover {background-position:0px -39px;} body#gallery a.prev-disabled {background-position:0px -78px;} body#gallery a.next {background-position:0px -117px;} body#gallery a.next:hover {background-position:0px -156px;} body#gallery a.next-disabled {background-position:0px -195px;} body#gallery {background-color:#ededed; padding:12px} body#gallery #photo-gallery{border:1px solid; overflow: hidden; padding:25px 0 0px 25px;} #photo-gallery { width:650px; } #photo-gallery h2.title { position:relative; height:1em; font-weight:bold; padding-left:0; } #photo-gallery h2.title span { position:absolute; display:none; } #photo-gallery h2.title span.first { display:block; } #photo-gallery ul { list-style:none; margin:0; } #photo-gallery ul li { list-style:none; margin:0; float:left; } #photo-gallery #gallery-labels { clear:both; } #photo-gallery #gallery-labels li { float:left; margin-right:10px; width:252px; } #photo-gallery #gallery-labels li.last { padding-left:50px; margin-right:0; } ​ /******************************************************************************** --- IV. Blueprint / Superfish / Thickbox Override Classes --- *********************************************************************************/ form textarea {height:120px} form label {font-weight:normal;} .sf-menu li:hover ul, .sf-menu li.sfHover ul {left:0;top:0; /* match top ul list item height */z-index:2; position:absolute; top:37px; } .sf-menu li li { width:125%; padding:0; margin:0;} .sf-menu a.sf-with-ul { padding-right:1.0em;} .sf-menu a:hover{} #TB_title{display:none;} #TB_window a:link {font-weight:bold;font-size:1em;} #TB_window a:visited { font-weight:bold;font-size:1em; } #TB_window a:hover { text-decoration:none; } #TB_window a:active {font-weight:bold;font-size:1em;} #TB_window a:focus { font-weight:bold;font-size:1em; } #TB_window h3 {font-size:1.12em;line-height:1.35em;margin-bottom:1.35em;} #TB_window p{font-size:1em; line-height: 1.5em; margin-bottom: 1.5em} .sIFR-active object {display: block;}