/* ---------------------------------------------------------------------------- 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/Op7/NS7/Safari CSS Document - layout.css ---------------------------------------------------------------------------- */ /* undo some default styling of common (X)HTML browsers * ------------------------------------------------------------------------- */ /* remove default link styles */ :link,:visited { text-decoration:none; } /* 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 { font-size:1em; } /* Remove inconsistent (among browsers) default padding or margin */ html,body,div,h1,h2,h3,h4,h5,h6,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,input { margin:0; padding:0; } /* prevent blue linked image borders */ a img,:link img,:visited img { border:none; } /* basic elements * ------------------------------------------------------------------------- */ /* global */ body { background:url("../images/index/bg-body.gif") repeat-x top left #D2D5DA; text-align:left; } p,a:link,a:visited,ul,ol,li,dl,dt,dd,h1,h2,h3 { font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#381030; text-decoration:none; } p,dl,dt,dd,ul,ol,li { line-height: 14px; } p,pre,blockquote { margin-bottom:7px; } a:link,a:visited { color:#ECA217; text-decoration:underline; outline:none;} a:hover,a:active { text-decoration:none; } h1 span,h2 span,h3 span { display:none; } h1 { font-size:14px; padding-left:50px; padding-right:19px; } h2 { font-size:14px; padding-left:50px; padding-right:19px; } h3 { font-size:12px; } /* classes */ .center { text-align:center; } .thumbs-left { margin:2px 8px 0 0; } .thumbs-right { margin:2px 0 0 8px; } .clear { clear:both; overflow:hidden; height:1em; } .bna { padding-left:43px; margin-top:12px; } .bna ul li { margin-bottom:8px; } .no-margin-top { margin-top:0; } .over-left {margin-left:35px;} .dental-over {margin-left:70px;} /* contact forms * ------------------------------------------------------------------------- */ /* quick contact */ form { width:152px; padding:5px 0 15px 17px; } input, textarea { background-color:#fff; border:1px solid #C073B0; width:152px; height:18px; margin-bottom:4px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#381030; } textarea { height:70px; } .submit, .submit-big-contact { width:60px; cursor:pointer; } /* main contact - dental.medical */ #big-contact { padding:20px 0 10px 50px; float:left; } #big-contact label, #big-contact select { font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#381030; } #big-contact label { width:200px; position:relative; display:block; text-align:right; color:#381030; } #big-contact label input, #big-contact label textarea, #big-contact select { background-color:#fff; border:1px solid #381030; position:absolute; width:200px; left:110%; top:-2px; } #big-contact label textarea { width:200px; height:100px; top:0; } .submit-big-contact { margin:70px 0 0 220px; border:1px solid #381030; } /* skeleton * ------------------------------------------------------------------------- */ #wrap { background:url("../images/index/bg-top-half.gif") repeat-y; width:760px; margin:0 auto; } #top { background:url("../images/index/top.gif"); height:134px; } #banner { background:url("../images/index/banner.jpg"); height:200px; } #banner-about { background:url("../images/inside/banner-about.jpg"); height:200px; } #banner-procedures { background:url("../images/inside/banner-procedures.jpg"); height:200px; } #banner-gallery { background:url("../images/inside/banner-gallery.jpg"); height:200px; } #banner-faq { background:url("../images/inside/banner-faq.jpg"); height:200px; } #banner-appointment { background:url("../images/inside/banner-appointment.jpg"); height:200px; } #banner-cosmetic { background:url("../images/inside/banner-cosmetic.jpg"); height:200px; } #banner-laser { background:url("../images/inside/banner-laser.jpg"); height:200px; } .column-left { width:221px; float:left; } .column-left p, h1, h2, h3 { padding-left:50px; padding-right:19px; } #header-index-gallery { background:url("../images/index/header-index-gallery.gif"); height:122px; margin-bottom:-10px; } #header-index-cosmetic { background:url("../images/index/header-index-cosmetic.gif"); height:85px; margin-bottom:15px; } .column-middle { width:278px; float:left; } .column-middle p, h1, h2 { padding-left:16px; padding-right:19px; padding-bottom:10px; } #header-index-welcome { background:url("../images/index/header-index-welcome.gif"); height:122px; margin-bottom:-10px; } #header-index-treatment { background:url("../images/index/header-index-treatment.gif"); height:85px; margin-bottom:15px; } .column-right { width:221px; float:left; } .column-right p { padding-left:17px; padding-right:52px; } #header-quick-contact { background:url("../images/index/header-quick-contact.gif"); height:122px; margin-bottom:-10px; } #header-index-laser { background:url("../images/index/header-index-laser.gif"); height:85px; margin-bottom:15px; } .divider { background:url("../images/index/divider.gif"); height:340px; width:20px; float:left; } .divider-2 { background:url("../images/index/divider-2.gif"); height:299px; width:20px; float:left; } .bottom-pods { background:url("../images/index/bottom-pods.gif"); width:760px; height:27px; clear:both; overflow:hidden; } #wrap-coupons { background: url("../images/index/coupon-bg.gif") no-repeat; height:232px; position:relative; } #coupon-top { background:url("../images/index/coupon-top.gif") no-repeat; width:760px; height:44px; float:left;} #coupon-top p { color:white; padding: 22px 3px 2px 240px;} #coupon-bottom {height:130px; float:left; padding: 2px 10px 2px 50px;} .coupons { width:242px; height:164px; float:left; } #header-index-procedures { background:url("../images/index/header-index-procedures.gif"); height:85px; margin-bottom:15px; } #header-index-office { background:url("../images/index/header-index-office.gif"); height:85px; margin-bottom:15px; } #bottom { background:url("../images/index/bottom.gif") no-repeat; width:760px; height:53px; clear:both; overflow:hidden; } /* skeleton inside * ------------------------------------------------------------------------- */ #wrap-inside { background:url("../images/index/bg-inside.gif") repeat-y; width:760px; } #column-left-inside { width:519px; float:left; } /* single column list */ #column-left-inside ul { padding-left:41px; } #column-left-inside li { width:235px; float:left; } .new_bullet{margin-left:10px;} #column-left-inside .new_bullet ul { padding-left:70px; } #column-left-inside .new_bullet li { background:transparent url("../images/bullet2.jpg") -5px 0px no-repeat; padding-left:25px; /* pushes text to the right to display bg img */ padding-bottom:15px; float:none; width:235px; } #column-left-inside p, #column-left-inside h1, #column-left-inside h2, #column-left-inside h3 { padding-left:50px; padding-right:19px; padding-bottom:10px; } #column-right-inside { width:221px; float:left; } #column-right-inside p, #column-right-inside ul { padding-left:17px; padding-right:52px; } #column-right-inside ul { margin-left:8px; text-indent: -0.7em; } #column-right-inside li { margin-bottom:8px; } #column-right-inside li a { color:#381030; } #header-about { background:url("../images/inside/header-about.gif"); height:122px; margin-bottom:-10px; } #header-about ul { padding:21px 0 0 194px; } #header-about li { width:97px; float:left; padding-right:11px; } #header-about ul li a { height:84px; display:block; } #header-cost { background:url("../images/inside/header-cost.jpg"); height:122px; margin-bottom:-10px; } #header-contact { background:url("../images/inside/header-contact.gif"); height:122px; margin-bottom:-10px; } #header-faq { background:url("../images/inside/header-faq.gif"); height:122px; margin-bottom:-10px; } #header-gallery { background:url("../images/inside/header-gallery.gif"); height:122px; margin-bottom:-10px; } #header-procedures { background:url("../images/inside/header-procedures.gif"); height:122px; margin-bottom:-10px; } #header-sitemap { background:url("../images/inside/header-sitemap.gif"); height:122px; margin-bottom:-10px; } #header-cosmetic { background:url("../images/inside/header-cosmetic.gif"); height:122px; margin-bottom:-10px; } #header-restorative { background:url("../images/inside/header-restorative.gif"); height:122px; margin-bottom:-10px; } #header-implant { background:url("../images/inside/header-implant.gif"); height:122px; margin-bottom:-10px; } #header-cosmetic { background:url("../images/inside/header-cosmetic.gif"); height:122px; margin-bottom:-10px; } #header-visit { background:url("../images/inside/header-visit.gif"); height:122px; margin-bottom:-10px; } #header-laser { background:url("../images/inside/banner-laser.jpg"); height:122px; margin-bottom:-10px; } #header-locate { background:url("../images/inside/header-locate.gif"); height:122px; margin-bottom:-10px; } #map { width:160px; padding-left:15px; padding-right:0; margin-bottom:25px; } #map p { text-align:center; padding:0; } #coupon-body { background-image:none; } #coupon-wrap { width:640px; height:380px; } #wrap-image { width:640px; height:480px; } #bna-thumbs { padding-left:27px; } #bna-thumbs dl { padding-left:18px; margin-bottom:15px; width:220px; float:left; } #bna-thumbs dt { padding-left:12px; } #wrap-bna { width:640px; height:480px; } #bna-top { background:url(../bna/layout/bna-top.jpg); height:112px; position:relative; } #bna-top a {height:112px; width:640px; position:absolute;} #bna-case { height:233px; } #bna-bottom { background:url(../bna/layout/bna-bottom.jpg); height:135px; } /* footer * ------------------------------------------------------------------------- */ #footer { width:705px; margin:0 auto; text-align:center; } #footer p { color:#6C2856; margin-bottom:10px; } #footer a:link, #footer a:visited { color:#6C2856; text-decoration:none;} #footer a:hover, #footer a:active { color:#6C2856; text-decoration:underline;} #footer ul {margin:10px;} #footer li { /* if your li's float, you can adjust border height w/ line-height */ padding:0 5px 0 7px; /* adjusts the spacing between each li display and border-left */ display: inline; border-left: 1px solid #6C2856; } #footer li.first { border: none; } /* horizontal navigation * ------------------------------------------------------------------------- */ #nav { background:url("../images/index/nav02.jpg") no-repeat; width:760px; height:40px; margin:0; padding:0; } #nav span { display: none; } #nav li, #nav a { height:40px; display:block; } /* change height here also */ #nav li { float:left; list-style:none; _display:inline; position:relative;} #nav-01 { width: 57px; margin-left:33px; } #nav-02 { width: 64px; margin-left:3px;} #nav-03 { width: 66px; margin-left:3px;} #nav-04 { width: 80px; margin-left:3px;} #nav-05 { width: 66px; margin-left:3px;} #nav-06 { width: 54px; margin-left:3px;} #nav-07 { width: 38px; margin-left:3px;} #nav-08 { width: 94px; margin-left:3px;} #nav-01 a:hover { background: transparent url("../images/index/nav02.jpg") -33px -40px no-repeat; } #nav-02 a:hover { background: transparent url("../images/index/nav02.jpg") -93px -40px no-repeat; } #nav-03 a:hover { background: transparent url("../images/index/nav02.jpg") -160px -40px no-repeat; } #nav-04 a:hover { background: transparent url("../images/index/nav02.jpg") -229px -40px no-repeat; } #nav-05 a:hover { background: transparent url("../images/index/nav02.jpg") -312px -40px no-repeat; } #nav-06 a:hover { background: transparent url("../images/index/nav02.jpg") -381px -40px no-repeat; } #nav-07 a:hover { background: transparent url("../images/index/nav02.jpg") -438px -40px no-repeat; } #nav-08 a:hover { background: transparent url("../images/index/nav02.jpg") -479px -40px no-repeat; } /* Son of Suckerfish: Horizontal Sprite Nav * ------------------------------------------------------------------------- */ #nav li ul { position:absolute; left:-9999px; padding-right:1px; /* Fixes one px spacing for border-right in FF */ background-color:#E89622; /* Background color of drop down nav - add more styles (i.e. background image) if you want */ } #nav li ul li { height:20px; /* Height of each drop down nav item */ border:1px solid #C8620B; border-top:none; } #nav li ul li a { width:100%; height:20px; /* Height of each drop down nav item, should match above */ line-height:20px; /* Height of each drop down nav item again, should match above */ } #nav li ul li a span { display:block; padding-left:5px; } /* Drop down link styles */ #nav a:link, #nav a:visited, #nav a:hover, #nav a:active { font-weight:bold; font-size:1.0em; color:#FFFFFF; text-decoration:none; } #nav li:hover ul, #nav li.sfHover ul { left: auto; } /* Hover styles for drop down items */ #nav-02 ul a:hover, #nav-03 ul a:hover, #nav-04 ul a:hover, #nav-05 ul a:hover { background-image:none; background-color:#DC7215; color:#FFFFFF; font-weight:bold; text-decoration:none; } /* width of drop down nav - choose width that allows items to display on one line */ #nav-02 ul, #nav-02 li { width:230px; } #nav-03 ul, #nav-03 li { width:137px; } #nav-04 ul, #nav-04 li { width:120px; } #nav-05 ul, #nav-05 li { width:355px; } /* ect * ------------------------------------------------------------------------- */ #list_disease li{ list-style-type:disc; list-style-position:inside; float:none; width: 450px; margin-left: 10px; } #list_waterlase li{ list-style-type:disc; list-style-position:inside; float:none; width: 450px; margin-left: 10px; } .list_break { margin-bottom: 10px; } #locate-button { margin:30px 0px 0px 15px; } #locate-button img { display:block; } #locate-button span { margin-left:3px; } #dental-work { margin:15px 0px 0px 15px; }