/* ---------------------------------------------------------------------------- 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: #6D8B93 url(../images/index/bg_body.jpg) top left repeat-x; text-align:center; font:12px/18px Arial, Verdana, Helvetica, sans-serif; color:#474747; } 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:14px; color:#0EA5BE; } h2 { font-size:13px; color:#0EA5BE; } h3 { font-size:12px; color:#0EA5BE; } h4 { font-size:12px; color:#474747; font-weight:normal; margin:0px auto; padding-left:0px;} h1 span,h2 span,h3 span { display:none; } a:link,a:visited { color:#0EA5BE; text-decoration:underline; } a:hover,a:active { color:#606060; text-decoration:underline; } /* global classes * ------------------------------------------------------------------------- */ .clear{clear:both;} div.spacer { clear: both; } div.clear { clear:both; height:.01em; overflow:hidden; } img.img-left-alt { float:left; margin:5px 12px 2px 10px; } img.img-left { float:left; margin:2px 12px 5px 0px; } img.img-left2 { float:left; margin:2px 12px 5px 0px; } img.img-right { float: right; margin: 2px 0 18px 18px; } img.img-right-alt { float:right; margin:2px 50px 0px 12px; } p.top { text-align:right; display:block; font-size:10px;} .req {font-size:10px; color:#fff;} img.hr-style { padding:5px 0px 5px 23px; } .braces{ margin-left:10px; } /* main framework * ------------------------------------------------------------------------- */ #displayarea {width:650px; border:0px solid green;} #displayarea-area1 {width:346px; border:0px solid red; float:left;} #displayarea-area2 {width:300px; padding-top:10px; border:0px solid yellow; float:right;} #displayarea-area3 {width:336px; border:0px solid red; float:left; padding-top:10px; padding-left:10px;} #wrap { background:url(../images/index/bg_wrap.jpg) repeat-y; width:946px; margin:0 auto; text-align:left; border:0px solid yellow;} #masthead { position:relative; background:url(../images/index/mast-bkgrnd.jpg) left top no-repeat; width:946px; height:111px;} #masthead-btn a { position:absolute; width:946px; height:111px; top:0px; left:0px;}/* home link within header */ #header-graphic { background:url(../images/index/header_graphic.jpg) left top no-repeat; height:207px;} #logo-flash { position:relative; background:url(../images/index/mast-bkgrnd.jpg) center top no-repeat; width:946px; height:111px; text-align:left;} #flash-header {height:946px; height:205px;text-align:right; padding-right:10px; border:0px green solid;} #flash-left { width:210px;border:0px yellow solid; float:left;} #flash-right { width:726px; height:205px;border:0px orange solid; float:right;} #column-left { width:249px; float:left;} #column-left p.quick-contact { padding:90px 20px 0px 55px; color:#fff;} #column-left p { padding:20px 20px 5px 55px; color:#fff;} #column-left p.intro { padding-top:117px;} #title-quickcontact { background:url(../images/index/title_quickcontact.jpg) left top no-repeat; width:249px;} /* multi column list */ #column-left ul { padding-left:55px; } #column-left ul li { background:transparent url("../images/index/bullet.gif") 0px 6px no-repeat; /* 0px = horizontal position for left, 6px = vertical position from top */ padding-left:15px; /* pushes text to the right to display bg img */ } #column-right { width:697px; float:left;} #column-right p {margin:5px 35px 15px 10px;} #column-right h1, #column-right h2, #column-right h3 { margin:5px 35px 5px 10px;} #title-do-you-know { position:relative; background:url(../images/index/title_did_you_know-july10.jpg) left top no-repeat; width:697px; height:99px;} #learn-more a { position:absolute; width:160px; height:20px; top:45px; left:430px; border:0px solid red;} #contact-us a { position:absolute; width:100px; height:24px; top:67px; left:400px; border:0px solid green;} #blog a { position:absolute; width:91px; height:24px; top:67px; left:550px; border:0px solid pink;} #teethdetails a { position:absolute; width:70px; height:24px; top:67px; left:190px; border:0px solid yellow;} #teethcontact a { position:absolute; width:60px; height:24px; top:67px; left:310px; border:0px solid blue;} #smiledetails a { position:absolute; width:70px; height:24px; top:67px; left:10px; border:0px solid orange;} #smilecontact a { position:absolute; width:60px; height:24px; top:67px; left:110px; border:0px solid green;} #title-welcome { background:url(../images/index/title_welcome.jpg); height:41px;} #banner { background:url(../images/index/img_banner.jpg); height:328px;} #btm-container { background:url(../images/index/btm_bg.jpg) left top repeat-y; width:697px; height:480px; overflow:hidden; border:0px green solid;} #dr-container { width:697px; float:left;} #dr-container p.intro {padding-top:67px; } #dr-container p {padding:1px 1px 1px 18px; margin-bottom:1px; } #title-why-choose { background:url(../images/index/title_why_choose1.jpg) left top no-repeat; float:left;} #procedures-container { width:359px; float:left;} #procedures-container p.intro {padding-top:67px; } #procedures-container p {padding:5px 15px 5px 18px;} #procedures-container ul {padding:5px 50px 5px 25px;} #procedures-container ul { margin-left:3px;} #procedures-container ul li { background:transparent url(../images/index/list_style.gif) 0px 6px no-repeat; padding-left:8px;} #title-our-procedures { background:url(../images/index/title_procedures.jpg) left top no-repeat; float:left;} #page-footer { background:url(../images/index/page_footer1.jpg) no-repeat; width:946px; height:123px; clear:both; overflow:hidden;} /* inside sub pages framework * ------------------------------------------------------------------------- */ #title-about-us { background:url(../images/sub/title_about_us.jpg); height:41px;} #title-restorative-dentistry { background:url(../images/sub/title_restorative_dentistry.jpg); height:41px;} #title-cosmetic-dentistry { background:url(../images/sub/title_cosmetic_dentistry.jpg); height:41px;} #title-routine-dental { background:url(../images/sub/title_routine_dental.jpg); height:41px;} #title-our-people { background:url(../images/sub/title_our_people.jpg); height:41px;} #title-about-us { background:url(../images/sub/title_about_us.jpg); height:41px;} #title-gallery { background:url(../images/sub/title_gallery.jpg); height:41px;} #title-contact-main { background:url(../images/sub/title_contact.jpg); height:41px;} #title-thankyou { background:url(../images/sub/title_thankyou.jpg); height:41px;} #title-corporatedental { background:url(../images/sub/title_corporatedental.jpg); height:41px;} #title-dentalreferrals { background:url(../images/sub/title_dentalreferrals.jpg); height:41px;} #title-porcelainveneers { background:url(../images/sub/title_porcelainveneers.jpg); height:41px;} #title-ceramicinlays { background:url(../images/sub/title_ceramic.jpg); height:41px;} #title-whitefillings { background:url(../images/sub/title_whitefillings.jpg); height:41px;} #title-teeth-whitening { background:url(../images/sub/title_teethwhitening.jpg); height:41px;} #title-smiledesign { background:url(../images/sub/title_smiledesign.jpg); height:41px;} #title-orthodontics { background:url(../images/sub/title_orthodontics.jpg); height:41px;} #title-dentalimplants { background:url(../images/sub/title_dentalimplants.jpg); height:41px;} #title-prosthodontics { background:url(../images/sub/title_prosth.jpg); height:41px;} #title-endodontics { background:url(../images/sub/title_endodontics.jpg); height:41px;} #title-botox { background:url(../images/sub/title_botox.jpg); height:41px;} #title-blog { background:url(../images/sub/title_blog.jpg); height:41px;} #title-sitemap { background:url(../images/sub/title_sitemap.jpg); height:41px;} #subgraphic { height:205px; } body#about #subgraphic { background:url(../images/sub/header_graphic_reception.jpg);} body#contact #subgraphic { background:url(../images/sub/header_graphic_sofa.jpg);} body#gallery #subgraphic { background:url(../images/sub/header_graphic03.jpg);} body#procedures #subgraphic { background:url(../images/sub/header_graphic_procedures.jpg);} body#sitemap #subgraphic { background:url(../images/sub/header_graphic_procedures.jpg);} body#gogna #subgraphic { background:url(../images/sub/header_graphic_gogna.jpg);} body#gogna1 #subgraphic { background:url(../images/sub/header_graphic_gogna1.jpg);} body#nadia1 #subgraphic { background:url(../images/sub/header_graphic_nadia1.jpg);} body#gognanadia #subgraphic { background:url(../images/sub/header_graphic_gognanadia.jpg);} body#anita #subgraphic { background:url(../images/sub/header_graphic_anita.jpg);} body#anita1 #subgraphic { background:url(../images/sub/header_graphic_anita1.jpg);} body#anita2 #subgraphic { background:url(../images/sub/header_graphic_anita2.jpg);} body#anita3 #subgraphic { background:url(../images/sub/header_graphic_anita3.jpg);} body#gogna2 #subgraphic { background:url(../images/sub/header_graphic_gogna2.jpg);} body#gogna3 #subgraphic { background:url(../images/sub/header_graphic_gogna3.jpg);} body#gogna4 #subgraphic { background:url(../images/sub/header_graphic_gogna4.jpg);} body#gogna5 #subgraphic { background:url(../images/sub/header_graphic_gogna5.jpg);} body#gogna6 #subgraphic { background:url(../images/sub/header_graphic_gogna6.jpg);} body#chaw1 #subgraphic { background:url(../images/sub/header_graphic_chaw1.jpg);} body#whitefillings #subgraphic { background:url(../images/sub/header_graphic_whitefillings.jpg);} #column-right table { padding-left:10px;} #quick-list { width:200px; float:right; margin-left:10px; } #column-right ul.sub { padding:5px 35px 5px 10px;} #column-right ul.sub { margin-left:3px;} #column-right ul.sub li { background:transparent url(../images/index/list_style.gif) 0px 6px no-repeat; padding-left:8px;} #column-right ul.sub1 { padding:5px 35px 5px 10px;} #column-right ul.sub1 { margin-left:3px;} #column-right ul.sub1 li { background:transparent url(../images/index/list_style1.gif) 0px 6px no-repeat; padding-left:8px;} #sub-page-footer { background:url(../images/sub/sub_page_footer.jpg) no-repeat; width:946px; height:67px; clear:both; overflow:hidden;} /* Horozontal MAIN NAVIGATION Sprite Nav * ------------------------------------------------------------------------- */ #nav { background: url(../images/index/nav-new.jpg) no-repeat; width:946px; height:33px; margin:0; padding:0; position: relative; float: left; border:0px red solid; } #nav span { display: none; } #nav li, #nav a { height: 33px; display: block; } #nav li { float:left; list-style: none; display: inline;} #nav-01 { width: 55px; margin-left: 11px;} #nav-02 { width: 79px; } #nav-03 { width: 89px; } #nav-04 { width: 105px; } #nav-05 { width: 130px; } #nav-06 { width: 140px; } #nav-07 { width: 80px; } #nav-08 { width: 110px;} #nav-09 { width: 66px; } #nav-10 { width: 70px; } #nav-01 a:hover {background: transparent url(../images/index/nav-new.jpg) -11px -33px no-repeat;} #nav-02 a:hover {background: transparent url(../images/index/nav-new.jpg) -66px -33px no-repeat;} #nav-03 a:hover {background: transparent url(../images/index/nav-new.jpg) -145px -33px no-repeat;} #nav-04 a:hover {background: transparent url(../images/index/nav-new.jpg) -234px -33px no-repeat;} #nav-05 a:hover {background: transparent url(../images/index/nav-new.jpg) -339px -33px no-repeat;} #nav-06 a:hover {background: transparent url(../images/index/nav-new.jpg) -469px -33px no-repeat;} #nav-07 a:hover {background: transparent url(../images/index/nav-new.jpg) -609px -33px no-repeat;} #nav-08 a:hover {background: transparent url(../images/index/nav-new.jpg) -689px -33px no-repeat;} #nav-09 a:hover {background: transparent url(../images/index/nav-new.jpg) -799px -33px no-repeat;} #nav-10 a:hover {background: transparent url(../images/index/nav-new.jpg) -865px -33px no-repeat;} #specialoffernav { color:white; width:200px; height:208px; margin:0; padding:0; position: relative; float: left; border:0px red solid; } #specialoffernav span { display: none;} #specialoffernav li, #specialoffernav a { height: 23px; display: block;} #specialoffernav li { float:left; list-style: none; display: block;} #specialoffernav-01 { width: 200px; margin-left: 11px;} #specialoffernav-02 { width: 200px; margin-left: 11px;} #specialoffernav-03 { width: 200px; margin-left: 11px;} #specialoffernav-01 a:hover {background: transparent url(../images/index/specialoffers.jpg) -11px -0px no-repeat;} #specialoffernav-02 a:hover {background: transparent url(../images/index/specialoffers.jpg) -11px -150px no-repeat;} #specialoffernav-03 a:hover {background: transparent url(../images/index/specialoffers.jpg) -11px -300px no-repeat;} /* Footer * ------------------------------------------------------------------------- */ #footer { width:946px; text-align:center; margin:0 auto; } #footer a:link, #footer a:visited, #footer p { text-decoration:none; color:#F5F5F5; } #footer a:hover, #footer a:active { text-decoration:underline; color:#F5F5F5; } #footer ul { margin-bottom:5px; } #footer li { padding: 0 5px 0 7px; display:inline; border-left: 1px solid #F5F5F5; } #footer li.first { border: none; } /* Quick Contact Form * ------------------------------------------------------------------------- */ form { width:150px; padding:10px 0 5px 55px;} 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:150px; 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-bottom:20px; } input.submitblog { width:150px; cursor:pointer; padding-bottom:20px; } 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; } #bloglink { padding-top:10px; padding-bottom:10px; } #contact-business { display: none; } /* do not remove */ /* 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; } /* Gallery * ------------------------------------------------------------------------------- */ #gallery-container { margin: 0; padding: 0; width: 522px;} #gallery-header { background: url(header.jpg) left top no-repeat; height:146px;} #gallery-nav { background: url(nav_bkgrnd.jpg) left top repeat-y;} #gallery-nav-padding { padding: 10px 0 0 25px;} /* #description { background: url(content_bkgrnd.jpg) left top repeat-y; height: 30px;} #description-padding { padding: 0px 0 0 35px;} */ #gallery-image { margin: 0; padding: 0; height:273px;} #gallery-footer { background: url(footer.jpg) left top no-repeat; height:40px;} /*-------------- footer address styling --------------*/ #address-container{ width:450px; margin:5px auto; } #address-container p{ width:200px; } p.bottom-address-left{ float:left; } p.bottom-address-right{ float:right; } .tabletext {font-size:12px;}