/*--------------------- Last Modified --> 2006.02.17 ---------------------*/ /*-----------------------------------------------------------------------*/ /* ---------------------------------------------------------------------------- Copyright Einstein Industries 2005. Used with Permission. May not be duplicated or reproduced. Please check for cross-browser compatibility prior to making changes MINIMUM BROWSER CHECK :: IE5.x/IE6/Firefox/Safari CSS Document - layout.css ---------------------------------------------------------------------------- */ /* undo some default styling of common (X)HTML browsers * ------------------------------------------------------------------------- */ /* No list-markers by default - must redefine bullets w/ bg graphics */ ul,ol { list-style:none; } /* Avoid browser default inconsistent heading font-sizes and pre/code */ h1,h2,h3,h4,h5,h6,pre,code,td { font-size:1em; } /* Remove inconsistent (among browsers) default padding or margin */ ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,label,div,dd,dt,dl,table,tr,td { margin:0; padding:0; } /* prevent blue linked image borders */ a img,:link img,:visited img,fieldset { border:none; } /* global elements * ------------------------------------------------------------------------- */ /* ----- type selectors ----- */ body { background:#31466C url("../images/bg-body.jpg") top repeat-x; text-align:center; font:12px/18px Arial, Helvetica, sans-serif; color:#fff; } body#glossary { text-align:left; margin:15px; background:#617BB4; } body#glossary dt { font-weight:bold; } body#glossary dd { margin-left:5px; margin-bottom:10px; } body#glossary h1 { padding:0; } p, ul, ol, dl, pre, blockquote { margin-bottom:10px; } blockquote { margin-left:10px; margin-right:10px; } h1,h2,h3 { margin-bottom:8px; } h1 { font-size:1.2em; color:#fff; padding:0 20px 0 20px; } h2 { font-size:1.1em; color:#fff; padding:0 20px 0 20px; } h3 { font-size:1.0em; color:#fff; padding:0 20px 0 20px; } h1 span,h2 span,h3 span { display:none; } a:link,a:visited { color:#fff; text-decoration:underline; outline:none; } a:hover,a:active { color:#EBEBCD; text-decoration:underline; outline:none; } /* ----- classes ----- */ div.clear { clear:both; height:.01em; overflow:hidden; } p.back-to-top { text-align:right; display:block; margin-right:5px; background:url("../images/back-to-top.gif") right no-repeat; } img.img-left { float:left; margin:0px 10px 5px 20px; } img.img-right { float:right; margin:5px 0 10px 10px; } .bna { padding:0 0 0 20px;} body#home .logo { margin:30px 0px 0px 0px;} #small { font-size:.9em;} .pdf { padding:0 5px 0 0px; float:left;} .office { padding:0 0 20px 20px;} .thanks { height:500px;} /* ----- global form elements ----- */ form { width:179px; padding:10px 0 15px 20px; } form label { font-size:.95em; } form br { line-height:0; /* defaults vertical spacing between fields */ } input, textarea, select { background-color:#fff !important; /* to prevent highlighting by Google Toolbar */ border:1px solid #37497C; color:#31466C; width:179px; /* 5 pixles smaller than form width !important */ height:18px; vertical-align: middle; margin-bottom:4px; /* sets vertical spacing between fields */ padding-top:1px; /* vertically position text in input/textarea field */ padding-left:4px; /* horizontally position text in input/textarea field */ font-family:Arial, Helvetica, sans-serif; font-size:.9em; } select { width:155px; /* same width as form !important */ padding:0; } textarea { height:90px; overflow:auto; } input.submit, input.submit-contact-main { width:60px; cursor:pointer; padding:0; } input.submit-contact-main { margin:10px 0 0 164px; } input.submit-image { background:url("../images/btn-submit.jpg"); width:63px; height:15px; border:none; cursor:pointer; } #contact_business { display: none; } /* do not remove */ /* ----- main contact form ----- */ #contact-main { padding:20px 0 10px 20px; } #contact-main label { width:150px; position:relative; display:block; text-align:right; margin-bottom:10px; font-size:1.0em; } #contact-main label input, #contact-main label textarea, #contact-main label select { width:230px; position:absolute; left:110%; top:-2px; } #contact-main label select { width:235px; } #contact-main label textarea { height:100px; } #form_honey { display: none; position: absolute; top: -300px;} /* framework * ------------------------------------------------------------------------- */ #wrap { background:url("../images/bg-wrap.jpg") repeat-y; width:730px; margin:0 auto; text-align:left; } #masthead { position:relative; background:url("../images/masthead.jpg") no-repeat; height:105px; } /* home link within #masthead */ #masthead a { position:absolute; left:18px; width:370px; top:13px; height:55px; } #masthead a span { display:none; } /* ----- column-left ----- */ #column-left { width:507px; float:left; padding-top:76px; } #column-left p { padding:0 20px 0 20px;} body#home #column-left {background:url("../images/col-left-welcome.jpg") no-repeat;} body#about #column-left {background:url("../images/col-left-about.jpg") no-repeat;} body#practice #column-left {background:url("../images/col-left-practice.jpg") no-repeat;} body#face #column-left {background:url("../images/col-left-face.jpg") no-repeat;} body#body #column-left {background:url("../images/col-left-body.jpg") no-repeat;} body#breast #column-left {background:url("../images/col-left-breast.jpg") no-repeat;} body#skincare #column-left {background:url("../images/col-left-skincare.jpg") no-repeat;} body#gallery #column-left {background:url("../images/col-left-gallery.jpg") no-repeat;} body#contact1 #column-left {background:url("../images/col-left-contact.jpg") no-repeat;} body#thankyou #column-left {background:url("../images/col-left-thankyou.jpg") no-repeat;} body#sitemap #column-left {background:url("../images/col-left-sitemap.jpg") no-repeat;} body#videos #column-left {background:url("../images/col-left-video-gallery.jpg") no-repeat;} #column-left-facelift { width:507px; float:left; padding-top:76px; } #column-left-facelift p { padding:0 20px 0 20px;} body#gallery #column-left-facelift {background:url("../images/col-left-gallery_face.jpg") no-repeat;} #column-left-body { width:507px; float:left; padding-top:76px; } #column-left-body p { padding:0 20px 0 20px;} body#gallery #column-left-body {background:url("../images/col-left-gallery_body.jpg") no-repeat;} #column-left-eyelid { width:507px; float:left; padding-top:76px; } #column-left-eyelid p { padding:0 20px 0 20px;} body#gallery #column-left-eyelid {background:url("../images/col-left-gallery_eye.jpg") no-repeat;} #column-left-breastaug { width:507px; float:left; padding-top:76px; } #column-left-breastaug p { padding:0 20px 0 20px;} body#gallery #column-left-breastaug {background:url("../images/col-left-gallery_braug.jpg") no-repeat;} #column-left-breastlift { width:507px; float:left; padding-top:76px; } #column-left-breastlift p { padding:0 20px 0 20px;} body#gallery #column-left-breastlift {background:url("../images/col-left-gallery_brlift.jpg") no-repeat;} #column-left-breastrecon { width:507px; float:left; padding-top:76px; } #column-left-breastrecon p { padding:0 20px 0 20px;} body#gallery #column-left-breastrecon {background:url("../images/col-left-gallery_brrecon.jpg") no-repeat;} #column-left-breastred { width:507px; float:left; padding-top:76px; } #column-left-breastred p { padding:0 20px 0 20px;} body#gallery #column-left-breastred {background:url("../images/col-left-gallery_brred.jpg") no-repeat;} #column-left-nose { width:507px; float:left; padding-top:76px; } #column-left-nose p { padding:0 20px 0 20px;} body#gallery #column-left-nose {background:url("../images/col-left-gallery_nose.jpg") no-repeat;} #column-left-tummy { width:507px; float:left; padding-top:76px; } #column-left-tummy p { padding:0 20px 0 20px;} body#gallery #column-left-tummy {background:url("../images/col-left-gallery_tum.jpg") no-repeat;} #column-left-breastauglift { width:507px; float:left; padding-top:76px; } #column-left-breastauglift p { padding:0 20px 0 20px;} body#gallery #column-left-breastauglift {background:url("../images/col-left-gallery_auglift.jpg") no-repeat;} #column-left-comprevbrst { width:507px; float:left; padding-top:76px; } #column-left-comprevbrst p { padding:0 20px 0 20px;} body#gallery #column-left-comprevbrst {background:url("../images/col-left-gallery_comprevbr.jpg") no-repeat;} /* background image list items */ #column-left ul { margin-left:40px; padding-top:10px; } #column-left ul li {background:transparent url("../images/bullet.gif") 0px 8px no-repeat; padding-left:8px; font-size:1.1em;} #column-left ul li#sub, #column-left ul li.sub {background:transparent url("../images/bullet.gif") 15px 8px no-repeat; padding-left:10px; font-size:1.1em;} #column-left ul li#sub, #column-left ul li.sub { padding:0 0 0 25px;} #column-left dl { padding:10px 0 10px 20px;} #column-left dl dt { font-size:1.1em; font-weight:bold;} #column-left dl dt dd { display:inline;} #testimonial {background:url("../images/testimonial.jpg") no-repeat; height:207px;} #featured {background:url("../images/col-left-featured.jpg") no-repeat; height:73px;} #finance {background:url("../images/finance-bg.jpg") repeat-y; width:507px;} #finance-content {background:url("../images/finance-top.jpg") no-repeat; padding-top:80px;} #finance-bottom {background:url("../images/finance-bottom.jpg") no-repeat; height:20px;} #finance-content p { padding:0 0px 0 40px; color:#31466C;} #apply_today { margin-left:40px; } .galtbl {background:url("../images/col-left-blank.jpg") repeat-x;} /* ----- column-right ----- */ #column-right { width:223px; float:left; padding-top:77px; } body#home #column-right {background:url("../images/col-right-location.jpg") no-repeat;} body#about #column-right {background:url("../images/col-right-sub.jpg") no-repeat;} body#contact1 #column-right {background:url("../images/col-right-directions.jpg") no-repeat;} body#thankyou #column-right {background:url("../images/col-right-directions.jpg") no-repeat;} body#practice #column-right, body#face #column-right, body#body #column-right, body#breast #column-right, body#skincare #column-right, body#gallery #column-right, body#sitemap #column-right {background:url("../images/col-right-sub.jpg") no-repeat;} body#gallery #column-right {background:url("../images/col-right-sub-blank.jpg") no-repeat;} #column-right p { padding:0 20px 0 20px;} /* background image list items */ #column-right ul { margin:0 20px 0 20px; } #column-right ul#privacy2 li { background:transparent url("../images/pdf_icon2.gif") 0px 3px no-repeat; padding-left:20px; padding-bottom:5px; border:none; } #contact {background:url("../images/col-right-contact.jpg") no-repeat; height:83px;} #download {background:url("../images/col-right-download.jpg") no-repeat; height:71px;} #glossary {background:url("../images/col-right-glossary.jpg") no-repeat; height:71px;} #readmore { padding:161px 0 0 373px;} /* ----- bottom-wrap ----- */ #bottom-wrap { background:url("../images/bottom-wrap.jpg"); height:31px; clear:both; width:100%; } /* header framework * ------------------------------------------------------------------------- */ #header-flash { height:0px; background:url("../images/bg-header-flash.jpg") no-repeat; } #header-graphic { height:255px; /* sets height for all non-flash headers */ } body#face #header-graphic {background:url("../images/header-face.jpg");} body#contact1 #header-graphic {background:url("../images/header-contact1.jpg");} body#practice #header-graphic {background:url("../images/header-practice.jpg");} body#body #header-graphic {background:url("../images/header-outstanding.jpg");} body#gallery #header-graphic {background:url("../images/header-gallery.jpg");} body#videos #header-graphic {background:url("../images/header-gallery.jpg");} body#sitemap #header-graphic {background:url("../images/header-outstanding.jpg");} body#home #header-graphic {background:url("../images/header-01.jpg");} body#breast #header-graphic {background:url("../images/header-home.jpg");} body#thankyou #header-graphic {background:url("../images/header-home.jpg");} body#about #header-graphic {background:url("../images/header-about.jpg");} body#skincare #header-graphic {background:url("../images/header-skincare.jpg");} /* subhead framework * ------------------------------------------------------------------------- */ #subhead { height:20px; /* sets height for all subheads */ } body#face #subhead { background:url("../images/subhead-face.jpg"); } body#breast #subhead { background:url("../images/subhead-breast.jpg"); } /* footer * ------------------------------------------------------------------------- */ #footer { width:730px; margin:0 auto; text-align:center; } #footer p { color:#fff; } #footer a:link, #footer a:visited { color:#fff; } #footer a:hover, #footer a:active { color:#EBECD4; } #footer ul {margin-top:10px;} #footer li { /* if your li's float, you can adjust border height w/ line-height */ padding:0 5px 0 4px; display: inline; border-left: 1px solid #fff; } #footer li.first { border: none; } #footer ul #privacy { margin:0; padding:0;} #footer ul#privacy li { background:transparent url("../images/pdf_icon.gif") 0px 0px no-repeat; padding-left:20px; border:none; } /* Horozontal Sprite Nav * ------------------------------------------------------------------------- */ #nav { background:url("../images/nav.jpg") no-repeat; width:730px; height:29px; margin-bottom:0; } #nav span { display: none; } #nav li, #nav a { height:29px; display:block; } #nav li { float:left; list-style:none; display:inline; } #nav-01 { width: 56px; margin-left: 17px;} #nav-02 { width: 128px; margin-left: 2px;} #nav-03 { width: 136px; margin-left: 2px;} #nav-04 { width: 51px; margin-left: 2px;} #nav-05 { width: 50px; margin-left: 2px;} #nav-06 { width: 56px; margin-left: 2px;} #nav-07 { width: 70px; margin-left: 2px;} #nav-08 { width: 64px; margin-left: 2px;} #nav-09 { width: 70px; margin-left: 2px;} /*-------------- (-79px) X position of button / (-30px) height of image from above ------------- */ #nav-01 a:hover {background:url("../images/nav.jpg") -17px -29px no-repeat;} #nav-02 a:hover {background:url("../images/nav.jpg") -75px -29px no-repeat;} #nav-03 a:hover {background:url("../images/nav.jpg") -205px -29px no-repeat;} #nav-04 a:hover {background:url("../images/nav.jpg") -343px -29px no-repeat;} #nav-05 a:hover {background:url("../images/nav.jpg") -396px -29px no-repeat;} #nav-06 a:hover {background:url("../images/nav.jpg") -448px -29px no-repeat;} #nav-07 a:hover {background:url("../images/nav.jpg") -506px -29px no-repeat;} #nav-08 a:hover {background:url("../images/nav.jpg") -578px -29px no-repeat;} #nav-09 a:hover {background:url("../images/nav.jpg") -644px -29px no-repeat;} /*-------------- ASPS PHOTO GALLERY ------------- */ #gallery #photo_nav_right { width:223px; /* Width of buttons, not entite image (or half of entire image) */ float: left; margin:0 0px 15px 0px; } #gallery #photo_nav h3 {color: #ffffff;margin:0 0px 15px 25px;} #gallery #photo_nav ul {margin: 0px 0px 10px 43px;} #gallery #photo_nav ul li img {margin: 0px 10px 5px 0px;} #gallery #photo_content {margin: 0px 0px 0px 20px;} #gallery #photo_content img {margin: 0px 10px 10px 0px;} #gallery #photo_nav p {margin:0 0px 15px 45px;padding: 0px;}