/* ---------------------------------------------------------------------------- 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: #AC9D88 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:#1F4A81; } h2 { font-size:14px; color:#1F4A81; } h3 { font-size:12px; color:#1F4A81; } .serving {color:#1F4A81;;} .welcome {font-size:14px; color:#1F4A81; margin-left: 15px;} h1 span,h2 span,h3 span { display:none; } a:link,a:visited { color:#1F4A81; text-decoration:underline; } a:hover,a:active { color:#233A59; text-decoration:none; } /* 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;} .req {font-size:10px;} /* main framework * ------------------------------------------------------------------------- */ #wrap { background:url(../images/index/bg_wrap.jpg) repeat-y; width:756px; margin:0 auto; text-align:left;} #masthead { position:relative; background:url(../images/index/masthead.jpg) left top no-repeat; width:756px; height:105px;} #masthead02 { position:relative; background:url(../images/sub/masthead02.jpg) left top no-repeat; width:756px; height:105px;} #masthead-btn a { position:absolute; width:756px; height:105px; top:0px; left:0px;}/* home link within header */ #column-left { width:259px; float:left;} #column-left p {margin: 5px 37px 5px 39px;} #column-left p.procedures {margin: 0px 35px 1px 46px;} #title-featured-case { background:url(../images/index/title_featured_case.jpg) left top no-repeat; height:166px;} #title-featured-case-home { background:url(../images/index/title_featured_case_inside.jpg) left top no-repeat; height:121px;} #title-featured-case-sub { background:url("../images/index/title_featured_case_inside.jpg") no-repeat; height:121px;} #title-featured-case-sub-inside { background:url("../images/sub/title_featured_case02.jpg") no-repeat; height:175px;} #featured-cases {background:url("../images/index/featured-cases.jpg") no-repeat; height:46px;} #title-quickcontact { background:url(../images/sub/title_quickcontact.jpg) left top no-repeat; height:136px;} #thankyou_spacer { background:url(../images/sub/thankyou_spacer.jpg) left top no-repeat; height:136px;} #testimonial-krissy { background:url(../images/index/testimonial_krissy.jpg) left top no-repeat; height:102px;} #testimonial-pam { background:url(../images/sub/testimonial_pam.jpg) left top no-repeat; height:316px;} #testimonial-kathy { background:url(../images/sub/testimonial_kathy.jpg) left top no-repeat; height:316px;} #contact { position:relative; background:url(../images/index/contact_btn.jpg) left top no-repeat; width:259px; height:132px;} #contact-btn a { position:absolute; width:259px; height:132px; top:0px; left:0px;}/* home link within header */ #invisalign-practice { background:url("../images/index/invisalignCertifiedNew.jpg") left top no-repeat; height:110px; width:259px; margin:5px 0px 0px 0px; position:relative;} #invisalign-practice a { position:absolute; height:97px; width:259px;} #column-right { width:497px; float:left;} #column-right p {padding: 5px 64px 5px 48px;} #column-right h1, #column-right h2, #column-right h3 {padding: 5px 64px 5px 48px;} #column-right .intro {padding-top: 97px;} #column-right .gallery {padding-left:27px;} #column-right p.procedures-gallery {padding: 0px 0px 0px 0px;} /* background image list items */ #column-right ul { padding:5px 64px 5px 50px;} #column-right ul { margin-left:3px;} #column-right ul li { background:transparent url(../images/index/list_style.jpg) 0px 6px no-repeat; padding-left:8px;} #header-graphic { background:url(../images/index/header_graphic_main.jpg); width:497px; height:250px;} #title-cosmetic-dentistry { background:url(../images/index/title_cosmetic_dentistry2.jpg) left top no-repeat;} #cosmetic-dentistry-footer { background:url(../images/index/cosmetic_dentistry_footer.jpg) left top no-repeat; height:47px;} #banner-porcelain-veneers { position:relative; background:url(../images/index/banner_porcelain_veneers.jpg) left top no-repeat; width:497px; height:161px;} #btn01 a { position:absolute; width:497px; height:48px; top:32px; left:0px;}/* home link within header */ #btn02 a { position:absolute; width:497px; height:46px; top:87px; left:0px;}/* home link within header */ #title-meet-johnson { background:url(../images/index/title_meet_johnson.jpg) left top no-repeat; width:496px; height:115px;} #meet-the-doctors { background:url(../images/index/meet_the_doctors.jpg) center top no-repeat; width:496px; height:80px; margin:0 auto;} #meet-drs-johnson { background:url("../images/index/img-both-drsNew.jpg") left top no-repeat; margin-left:100px; width:300px; height:196px; } #meet-johnson-footer { background:url(../images/index/meet_johnson_footer.jpg) left top no-repeat; height:53px;} #meet-johnson-footer2 { background:url(../images/index/meet_johnson_footer2.jpg) left top no-repeat; height:153px;} #btm-container { width:756px; clear:both;} #btm-column-left {/* background:url(../images/index/btm_repeat.jpg) left top repeat-y;*/ height:384px;height:332px; width:259px; float:left; padding-bottom: 38px;} #btm-column-right { width:490px; float:left; } #servicesBox { width:490px; position: absolute; margin: -390px 0 0 258px; *margin: -400px 0 0 -120px; } #title-reasons-smile { background: url(../images/index/title_reasons_smile.jpg) left top no-repeat; height:64px; *background-position: 2px top; } /*#procedures-menu { position:relative; background:url(../images/index/procedures_nav.jpg) left top no-repeat; width:497px; height:268px;} #procedures-menu-01 a { position:absolute; width:215px; height:54px; top:19px; left:27px;}/* home link within header */ /* #procedures-menu-02 a { position:absolute; width:215px; height:54px; top:80px; left:26px;}/* home link within header */ /* #procedures-menu-03 a { position:absolute; width:215px; height:54px; top:140px; left:26px;}/* home link within header */ /* #procedures-menu-04 a { position:absolute; width:215px; height:54px; top:199px; left:26px;}/* home link within header */ /* #procedures-menu-05 a { position:absolute; width:215px; height:54px; top:18px; left:250px;}/* home link within header */ /* #procedures-menu-06 a { position:absolute; width:215px; height:54px; top:78px; left:250px;}/* home link within header */ /* #procedures-menu-07 a { position:absolute; width:215px; height:54px; top:140px; left:250px;}/* home link within header */ /* #procedures-menu-08 a { position:absolute; width:215px; height:54px; top:200px; left:251px;}/* home link within header */ #graphic-footer { background:url(../images/index/footer.jpg) left top no-repeat; height:28px;} #page-footer { background:url(../images/index/page_footer.jpg) no-repeat; width:756px; height:20px; clear:both;} /* inside sub pages framework * ------------------------------------------------------------------------- */ #testimonial-linda { background:url(../images/sub/testimonial_linda.jpg) left top no-repeat; height:280px;} #testimonial-kate { background:url(../images/sub/testimonial_kate.jpg) left top no-repeat; height:372px;} #testimonial-dana { background:url(../images/sub/testimonial_dana.jpg) left top no-repeat; height:298px;} #testimonial-maggie { background:url(../images/sub/testimonial_maggie.jpg) left top no-repeat; height:169px;} #testimonial-malvina { background:url(../images/sub/testimonial_malvina.jpg) left top no-repeat; height:183px;} #header-graphic02 { background:url(../images/sub/header_graphic02.jpg); width:497px; height:250px;} #header-graphic03 { background:url(../images/sub/newStaffgroup.jpg); width:497px; height:350px; } #title-about-office { background:url(../images/sub/title_about_office.jpg) left top no-repeat;} #title-cosmetic-procedures { background:url(../images/sub/title_cosmetic_procedures.jpg) left top no-repeat;} #title-technology { background:url(../images/sub/title_technology.jpg) left top no-repeat;} #title-smile-gallery { background:url(../images/sub/title_smile_gallery.jpg) left top no-repeat;} #title-contact { background:url(../images/sub/title_contact.jpg) left top no-repeat;} #title-thankyou { background:url(../images/sub/title_thankyou.jpg) left top no-repeat;} #title-about-office-btm { background:url(../images/sub/title_our_staff_btm_contain.jpg) left top no-repeat; height:53px;} #btm-container-our-staff { background:url(../images/sub/our_staff_bg2.jpg) left top no-repeat; height:530px;} #title-empty { background:url(../images/sub/title_empty.jpg) left top no-repeat;} #sub-page-footer { background:url(../images/sub/sub_page_footer.jpg) no-repeat; width:756px; height:73px; clear:both; overflow:hidden;} /* VERTICAL Main - sprite nav * ------------------------------------------------------------------------------------- */ #menu { background: url(../images/index/navNew.jpg) left top no-repeat; width: 259px; height: 250px; padding: 0px; margin: 0px; position: relative; } #menu li span {display: none;} #menu li {margin: 0; padding: 0; list-style: none; position: absolute;} #menu li, #menu a {height: 35px; display: block;} #menu-01 {top: 0px;} #menu-02 {top: 39px;} #menu-03 {top: 73px;} #menu-04 {top: 109px;} #menu-05 {top: 144px;} #menu-06 {top: 179px;} #menu-01, #menu-02, #menu-03, #menu-04, #menu-05, #menu-06 { left: 0px; width: 259px; } #menu-01 a:hover {background: transparent url(../images/index/navNew.jpg) -259px 0px no-repeat;} #menu-02 a:hover {background: transparent url(../images/index/navNew.jpg) -259px -39px no-repeat;} #menu-03 a:hover {background: transparent url(../images/index/navNew.jpg) -259px -73px no-repeat;} #menu-04 a:hover {background: transparent url(../images/index/navNew.jpg) -259px -109px no-repeat;} #menu-05 a:hover {background: transparent url(../images/index/navNew.jpg) -259px -144px no-repeat;} #menu-06 a:hover {background: transparent url(../images/index/navNew.jpg) -259px -179px no-repeat;} /* VERTICAL Office - sprite nav * ------------------------------------------------------------------------------------- */ #menu02 { background: url(../images/index/nav02New.jpg) left top no-repeat; width: 259px; height: 250px; padding: 0px; margin: 0px; position: relative; } #menu02 li span {display: none;} #menu02 li {margin: 0; padding: 0; list-style: none; position: absolute;} #menu02 li, #menu02 a {height: 35px; display: block;} #menu02-01 {top: 0px;} #menu02-02 {top: 39px;} #menu02-03 {top: 73px;} #menu02-04 {top: 109px;} #menu02-05 {top: 144px;} #menu02-06 {top: 179px;} #menu02-01, #menu02-02, #menu02-03, #menu02-04, #menu02-05, #menu02-06 { left: 0px; width: 259px; } #menu02-01 a:hover {background: transparent url(../images/index/nav02New.jpg) -259px 0px no-repeat;} #menu02-02 a:hover {background: transparent url(../images/index/nav02New.jpg) -259px -39px no-repeat;} #menu02-03 a:hover {background: transparent url(../images/index/nav02New.jpg) -259px -73px no-repeat;} #menu02-04 a:hover {background: transparent url(../images/index/nav02New.jpg) -259px -109px no-repeat;} #menu02-05 a:hover {background: transparent url(../images/index/nav02New.jpg) -259px -144px no-repeat;} #menu02-06 a:hover {background: transparent url(../images/index/nav02New.jpg) -259px -179px no-repeat;} /* VERTICAL Cosmetic / Smile Gallery - sprite nav * ------------------------------------------------------------------------------------- */ #menu03 { background: url(../images/index/nav03New.jpg) left top no-repeat; width: 259px; height: 250px; padding: 0px; margin: 0px; position: relative; } #menu03 li span {display: none;} #menu03 li {margin: 0; padding: 0; list-style: none; position: absolute;} #menu03 li, #menu03 a {height: 35px; display: block;} #menu03-01 {top: 0px;} #menu03-02 {top: 39px;} #menu03-03 {top: 73px;} #menu03-04 {top: 109px;} #menu03-05 {top: 144px;} #menu03-06 {top: 179px;} #menu03-01, #menu03-02, #menu03-03, #menu03-04, #menu03-05, #menu03-06 { left: 0px; width: 259px; } #menu03-01 a:hover {background: transparent url(../images/index/nav03New.jpg) -259px 0px no-repeat;} #menu03-02 a:hover {background: transparent url(../images/index/nav03New.jpg) -259px -39px no-repeat;} #menu03-03 a:hover {background: transparent url(../images/index/nav03New.jpg) -259px -73px no-repeat;} #menu03-04 a:hover {background: transparent url(../images/index/nav03New.jpg) -259px -109px no-repeat;} #menu03-05 a:hover {background: transparent url(../images/index/nav03New.jpg) -259px -144px no-repeat;} #menu03-06 a:hover {background: transparent url(../images/index/nav03New.jpg) -259px -179px no-repeat;} /* Footer * ------------------------------------------------------------------------- */ #footer { background:url(../images/index/bg_footer.jpg) left top repeat-y; width:756px; 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:181px; padding:10px 030px 39px;} form p { font-size:10px; } form br { line-height:0; /* defaults vertical spacing between fields */} input, textarea, select { background-color:#fff; border:1px solid #fff; color:#1F4A81; width:181px; 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; } 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/btn-submit.gif"); width:63px; height:15px; border:none; cursor:pointer; } /* Main Contact Form * ------------------------------------------------------------------------- */ #contact-main { padding:20px 0 10px 0; } #contact-main label { width:220px; 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:110%; top:-2px; } #contact-main label textarea { height:100px; }