/* ---------------------------------------------------------------------------- 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 { margin:0; padding:0; } /* prevent blue linked image borders */ a img,:link img,:visited img,fieldset { border:none; } span {display:none;} /* global elements * ------------------------------------------------------------------------- */ body { background: #68B5DF url(../images/index/bg_body.jpg) top left repeat-x; text-align:center; font:12px/18px "Trebuchet MS", "Bitstream Vera Sans", Arial, Verdana, Helvetica, sans-serif; color:#000; } 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:16px; color:#5D3661; } h2 { font-size:14px; color:#857092; } h3 { font-size:12px; color:#71537A; } h1 span,h2 span,h3 span { display:none; } a:link,a:visited { color:#5D3661; text-decoration:underline; } a:hover,a:active { color:#857092; text-decoration:underline; } /* global classes * ------------------------------------------------------------------------- */ div.clear { clear:both; height:.01em; overflow:hidden; } img.img-left { float:left; margin:2px 12px 12px 0; } img.img-right { float: right; margin: 2px 0 12px 12px; } p.top { text-align:right; display:block;} #quickcontact-contact p.intro { padding-top:100px; } .req {font-size:10px;} #gallery-thumbs-container {padding-left:24px;} .women { float:right; margin: -10px 30px 0 0; padding:0; } .map { padding:10px 0 0 0;} /* main framework * ------------------------------------------------------------------------- */ #wrap { background:url(../images/index/bg_wrap.jpg) repeat-y; width:765px; margin:0 auto; text-align:left;} /* main title section - one for each page * ------------------------------------------------------------------------- */ #masthead { position:relative; background:url(../images/index/masthead.jpg) left top no-repeat; width:765px; height:219px;} #masthead-about { position:relative; background:url(../images/sub/masthead-about.jpg) left top no-repeat; width:765px; height:219px;} #masthead-procedures { position:relative; background:url(../images/sub/masthead-procedures.jpg) left top no-repeat; width:765px; height:219px;} #masthead-contact { position:relative; background:url(../images/sub/masthead-contact.jpg) left top no-repeat; width:765px; height:219px;} #masthead-gallery { position:relative; background:url(../images/sub/masthead-smile2.jpg) left top no-repeat; width:765px; height:219px;} #masthead-technology { position:relative; background:url(../images/sub/masthead-technology.jpg) left top no-repeat; width:765px; height:219px;} /* ------------------------------------------------------------------------- */ #masthead-btn a { position:absolute; width:330px; height:49px; top:30px; left:20px;}/* home link within header */ h2#procedures-btn { position:relative; height:29px; background:url(../images/index/title_procedures.jpg) no-repeat; margin:0; padding:0; } /* index page link within #masthead */ h2#procedures-btn a { position:absolute; left:10px; width:180px; top:0px; height:29px; } h2#procedures-btn a span { display:none; } #smile-btn a { position:absolute; width:160px; height:35px; top:5px; left:10px;} #column-left { background:url(../images/index/bg_left_column.jpg) left top repeat-y; width:507px; float:left;} #column-left p { padding:3px 46px 3px 33px;} #column-left p.intro { padding-top:40px;} #column-left h1.intro { padding-top:40px;} #column-left h1, #column-left h2, #column-left h3 { padding:3px 46px 3px 29px;} /* ------------------------------------------------------------------------- */ #container-procedures { width:507px;} #container-left { width:288px; float:left; display:inline;} #container-left p.pro-pad {padding:0 0 0 29px; color:#81538C;} #container-right { width:219px; float:left;} #container-right p.tech-pad {padding:45px 0 0 5px; color:#81538C;} #title-technology { background:url(../images/index/title_technology.jpg); height:43px;} #title-gallery { position:relative; background:url(../images/index/title_smile_gallery.jpg) left top no-repeat; width:507px; height:216px;} #feature01 a { position:absolute; width:200px; height:164px; top:54px; left:38px;}/* home link within header */ #feature02 a { position:absolute; width:204px; height:164px; top:54px; left:262px;}/* home link within header */ #column-right { width:258px; float:left; } #column-right p { padding:3px 35px 3px 31px;} /* qucik contact image - one for each page * ------------------------------------------------------------------------- */ #quickcontact-index{background:url(../images/index/index_quickcontact.jpg) left top no-repeat;width:258px;} #quickcontact-pro{background:url(../images/sub/quickcontact_procedures.jpg) left top no-repeat;width:258px;} #quickcontact-about{background:url(../images/sub/quickcontact_about.jpg) left top no-repeat;width:258px;} #quickcontact-contact{background:url(../images/sub/quickcontact_contact.jpg) left top no-repeat;width:258px;} #quickcontact-gallery{background:url(../images/sub/quickcontact_smile2.jpg) left top no-repeat;width:258px;} #quickcontact-tech{ background:url(../images/sub/quickcontact_technology.jpg) left top no-repeat;width:258px;} /* --------------------------------------------9----------------------------- */ #container-btm { background:url(../images/index/btm_left_couple.jpg) bottom left no-repeat; width:765px; float:left;} #container-btm-left { width:288px; height:245px; float:left;} #container-left ul { margin-left:29px;} #container-left ul li { background:transparent url(../images/index/list_style.jpg) 0px 6px no-repeat; padding-left:8px;} #container-btm-right { width:477px; float:left;} #container-right ul { margin-left:10px;} #container-right ul li { background:transparent url(../images/index/list_style.jpg) 0px 6px no-repeat; padding-left:8px;} #title-dr-donald { background:url(../images/index/title_dr_donald.jpg) left top no-repeat; width:477px;} #title-dr-donald p.btm-intro { padding-top:91px; } #title-dr-donald p { padding:3px 52px 3px 4px;} #btm-nav { position:relative; background:url(../images/index/btm_nav.jpg) left top no-repeat; width:477px; height:39px;} #about-btn a { position:absolute; width:64px; height:25px; top:0px; left:64px;}/* home link within header */ #cosmetic-btn a { position:absolute; width:98px; height:23px; top:0px; left:136px;}/* home link within header */ #family-btn a { position:absolute; width:77px; height:23px; top:1px; left:241px;}/* home link within header */ #page-footer { background:url(../images/index/page_footer.jpg) no-repeat; width:765px; height:9px; clear:both; overflow:hidden;} #top-links { padding-top: 4px; font-size: 11px; } #top-links a:link,a:visited { color:#AA52A6; text-decoration:none; } #top-links a:hover,a:active { color:#857092; text-decoration:none; } /* inside sub pages framework * ------------------------------------------------------------------------- */ #sub-wrap { background:url(../images/sub/bg_sub_wrap.jpg) repeat-y; width:765px; margin:0 auto; text-align:left;} #title-blog { background:url(../images/index/title_welcome2.jpg) left top no-repeat; width:507px;} #title-welcome { background:url(../images/index/title_welcome.jpg) left top no-repeat; width:507px;} #title-about-us { background:url(../images/sub/title_about.jpg) left top no-repeat; width:507px; overflow:hidden;} #title-contact-us { background:url(../images/sub/title_contact_us.jpg) left top no-repeat; width:507px;} #title-our-technology { background:url(../images/sub/title_technology.jpg) left top no-repeat; width:507px;} #title-our-procedures { background:url(../images/sub/title_our_procedures.jpg) left top no-repeat; width:507px;} #title-our-gallery { background:url(../images/sub/title_smile_gallery.jpg) left top no-repeat; width:507px;} #title-thanks { background:url(../images/sub/thankyou.jpg) left top no-repeat; width:507px;} #sub-page-footer { background:url(../images/sub/sub_page_footer.jpg) no-repeat; width:765px; height:52px; clear:both; overflow:hidden;} /* background image list items */ #column-left ul.sub { margin-left:29px;} #column-left ul.sub li { background:transparent url(../images/index/list_style.jpg) 0px 6px no-repeat; padding-left:8px;} /* Horozontal MAIN NAVIGATION Sprite Nav one for each page * ------------------------------------------------------------------------- */ /* Home Page */ #nav { background: url(../images/index/nav.jpg) no-repeat; width:765px; height:34px; margin-bottom:0; } #nav span { display: none; } #nav li, #nav a { height: 34px; display: block; } #nav li { float: left; list-style: none; display: inline; } #nav-01 { width: 55px; margin-left: 17px;} #nav-02 { width: 68px;} #nav-03 { width: 103px;} #nav-04 { width: 86px;} #nav-05 { width: 87px;} #nav-06 { width: 74px;} #nav-01 a:hover {background: transparent url(../images/index/nav.jpg) -17px -34px no-repeat;} #nav-02 a:hover {background: transparent url(../images/index/nav.jpg) -72px -34px no-repeat;} #nav-03 a:hover {background: transparent url(../images/index/nav.jpg) -140px -34px no-repeat;} #nav-04 a:hover {background: transparent url(../images/index/nav.jpg) -243px -34px no-repeat;} #nav-05 a:hover {background: transparent url(../images/index/nav.jpg) -329px -34px no-repeat;} #nav-06 a:hover {background: transparent url(../images/index/nav.jpg) -416px -34px no-repeat;} body#index #nav-01 { background: transparent url(../images/index/nav.jpg) -17px -34px no-repeat; } /* About Page */ #nav-about { background: url(../images/sub/nav_about.jpg) no-repeat; width:765px; height:34px; margin-bottom:0; } #nav-about span { display: none; } #nav-about li, #nav-about a { height: 34px; display: block; } #nav-about li { float: left; list-style: none; display: inline; } #nav-about-01 { width: 55px; margin-left: 17px;} #nav-about-02 { width: 68px;} #nav-about-03 { width: 103px;} #nav-about-04 { width: 86px;} #nav-about-05 { width: 87px;} #nav-about-06 { width: 74px;} #nav-about-01 a:hover {background: transparent url(../images/sub/nav_about.jpg) -17px -34px no-repeat;} #nav-about-02 a:hover {background: transparent url(../images/sub/nav_about.jpg) -72px -34px no-repeat;} #nav-about-03 a:hover {background: transparent url(../images/sub/nav_about.jpg) -140px -34px no-repeat;} #nav-about-04 a:hover {background: transparent url(../images/sub/nav_about.jpg) -243px -34px no-repeat;} #nav-about-05 a:hover {background: transparent url(../images/sub/nav_about.jpg) -329px -34px no-repeat;} #nav-about-06 a:hover {background: transparent url(../images/sub/nav_about.jpg) -416px -34px no-repeat;} body#aboutus #nav-about-02 {background: transparent url(../images/sub/nav_about.jpg) -72px -34px no-repeat; } /* Our Procedures Page */ #nav-procedures { background: url(../images/sub/nav_procedures.jpg) no-repeat; width:765px; height:34px; margin-bottom:0; } #nav-procedures span { display: none; } #nav-procedures li, #nav-procedures a { height: 34px; display: block; } #nav-procedures li { float: left; list-style: none; display:inline } #nav-procedures-01 { width: 55px; margin-left: 17px;} #nav-procedures-02 { width: 68px;} #nav-procedures-03 { width: 103px;} #nav-procedures-04 { width: 86px;} #nav-procedures-05 { width: 87px;} #nav-procedures-06 { width: 74px;} #nav-procedures-01 a:hover {background: transparent url(../images/sub/nav_procedures.jpg) -17px -34px no-repeat;} #nav-procedures-02 a:hover {background: transparent url(../images/sub/nav_procedures.jpg) -72px -34px no-repeat;} #nav-procedures-03 a:hover {background: transparent url(../images/sub/nav_procedures.jpg) -140px -34px no-repeat;} #nav-procedures-04 a:hover {background: transparent url(../images/sub/nav_procedures.jpg) -243px -34px no-repeat;} #nav-procedures-05 a:hover {background: transparent url(../images/sub/nav_procedures.jpg) -329px -34px no-repeat;} #nav-procedures-06 a:hover {background: transparent url(../images/sub/nav_procedures.jpg) -416px -34px no-repeat;} body#proc #nav-procedures-03 {background: transparent url(../images/sub/nav_procedures.jpg) -140px -34px no-repeat; } /* Smile Gallery Page */ #nav-gallery { background: url(../images/sub/nav_smile.jpg) no-repeat; width:765px; height:34px; margin-bottom:0; } #nav-gallery span { display: none; } #nav-gallery li, #nav-gallery a { height: 34px; display: block; } #nav-gallery li { float: left; list-style: none; display: inline; } #nav-gallery-01 { width: 55px; margin-left: 17px;} #nav-gallery-02 { width: 68px;} #nav-gallery-03 { width: 103px;} #nav-gallery-04 { width: 86px;} #nav-gallery-05 { width: 87px;} #nav-gallery-06 { width: 74px;} #nav-gallery-01 a:hover {background: transparent url(../images/sub/nav_smile.jpg) -17px -34px no-repeat;} #nav-gallery-02 a:hover {background: transparent url(../images/sub/nav_smile.jpg) -72px -34px no-repeat;} #nav-gallery-03 a:hover {background: transparent url(../images/sub/nav_smile.jpg) -140px -34px no-repeat;} #nav-gallery-04 a:hover {background: transparent url(../images/sub/nav_smile.jpg) -243px -34px no-repeat;} #nav-gallery-05 a:hover {background: transparent url(../images/sub/nav_smile.jpg) -329px -34px no-repeat;} #nav-gallery-06 a:hover {background: transparent url(../images/sub/nav_smile.jpg) -416px -34px no-repeat;} body#smiles #nav-gallery-05 {background: transparent url(../images/sub/nav_smile.jpg) -329px -34px no-repeat; } /* Technology Page */ #nav-technology { background: url(../images/sub/nav_technology.jpg) no-repeat; width:765px; height:34px; margin-bottom:0; } #nav-technology span { display: none; } #nav-technology li, #nav-technology a { height: 34px; display: block; } #nav-technology li { float: left; list-style: none; display: inline; } #nav-technology-01 { width: 55px; margin-left: 17px;} #nav-technology-02 { width: 68px;} #nav-technology-03 { width: 103px;} #nav-technology-04 { width: 86px;} #nav-technology-05 { width: 87px;} #nav-technology-06 { width: 74px;} #nav-technology-01 a:hover {background: transparent url(../images/sub/nav_technology.jpg) -17px -34px no-repeat;} #nav-technology-02 a:hover {background: transparent url(../images/sub/nav_technology.jpg) -72px -34px no-repeat;} #nav-technology-03 a:hover {background: transparent url(../images/sub/nav_technology.jpg) -140px -34px no-repeat;} #nav-technology-04 a:hover {background: transparent url(../images/sub/nav_technology.jpg) -243px -34px no-repeat;} #nav-technology-05 a:hover {background: transparent url(../images/sub/nav_technology.jpg) -329px -34px no-repeat;} #nav-technology-06 a:hover {background: transparent url(../images/sub/nav_technology.jpg) -416px -34px no-repeat;} body#technologys #nav-technology-04 {background: transparent url(../images/sub/nav_technology.jpg) -243px -34px no-repeat;} /* Contact Page */ #nav-contact { background: url(../images/sub/nav_contact.jpg) no-repeat; width:765px; height:34px; margin-bottom:0; } #nav-contact span { display: none; } #nav-contact li, #nav-contact a { height: 34px; display: block; } #nav-contact li { float: left; list-style: none; display: inline; } #nav-contact-01 { width: 55px; margin-left: 17px;} #nav-contact-02 { width: 68px;} #nav-contact-03 { width: 103px;} #nav-contact-04 { width: 86px;} #nav-contact-05 { width: 87px;} #nav-contact-06 { width: 74px;} #nav-contact-01 a:hover {background: transparent url(../images/sub/nav_contact.jpg) -17px -34px no-repeat;} #nav-contact-02 a:hover {background: transparent url(../images/sub/nav_contact.jpg) -72px -34px no-repeat;} #nav-contact-03 a:hover {background: transparent url(../images/sub/nav_contact.jpg) -140px -34px no-repeat;} #nav-contact-04 a:hover {background: transparent url(../images/sub/nav_contact.jpg) -243px -34px no-repeat;} #nav-contact-05 a:hover {background: transparent url(../images/sub/nav_contact.jpg) -329px -34px no-repeat;} #nav-contact-06 a:hover {background: transparent url(../images/sub/nav_contact.jpg) -416px -34px no-repeat;} body#con #nav-contact-06 {background: transparent url(../images/sub/nav_contact.jpg) -416px -34px no-repeat; } /* Footer * ------------------------------------------------------------------------- */ #footer { width:760px; text-align:center; margin:0 auto; } #footer a:link, #footer a:visited, #footer p { text-decoration:none; color:#fff; } #footer a:hover, #footer a:active { text-decoration:underline; color:#fff; } #footer ul { margin-bottom:5px; } #footer li { padding: 0 5px 0 7px; display:inline; border-left: 1px solid #fff; } #footer li.first { border: none; } /* Quick Contact Form * ------------------------------------------------------------------------- */ form { width:150px; margin-left: 31px; padding-top: 100px; } form p { font-size:10px; } form br { line-height:0; /* defaults vertical spacing between fields */} input, textarea, select { background-color:#fff; border:1px solid #000; color:#000; width:145px; height:18px; 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:"Trebuchet MS", "Bitstream Vera Sans", Arial, Verdana, Helvetica, sans-serif; font-size:12px; } textarea { height:70px; overflow:auto; } #contact_business { display: none; } /* do not remove */ input.submit, input.submit-contact-main { width:60px; cursor:pointer; padding:0; } input.submit-contact-main { margin:85px 0 0 242px; } input.submit-image { background: url(../images/index/btn_submit.jpg); width:63px; height:15px; border:none; cursor:pointer; } /* Main Contact Form * ------------------------------------------------------------------------- */ #contact-main { padding:20px 30px 10px 0; } #contact-main label { width:170px; position:relative; display:block; text-align:right; margin-bottom:10px; } #contact-main label input, #contact-main label textarea, #contact-main label select { width:200px; position:absolute; left:186px; top:3px; } #contact-main label textarea { height:100px; } #contact-main label select { width:205px; }