/*--------------------- Last Modified 2006.11.10 ---------------------*/ /*-------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------ Copyright Einstein Industries 2006. 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 /*------------------------------------------------------------------------------------*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,html,label,table,tr,td {margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img,a img,:link img,:visited img {border:0;} address,caption,cite,code,dfn,th,var {font-style:normal;font-weight:normal;} ol,ul {list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6 {font-size:100%;} q:before,q:after {content:'';} /* global elements * ------------------------------------------------------------------------- */ /* ----- type selectors ----- */ body { background:#126245 url("../images/bg-body.jpg") top repeat-x; text-align:center; font:12px/16px Arial, Helvetica, sans-serif; color:#454331; } blockquote { margin-left:10px; margin-right:10px; } h1, h2, h3, h4 { font-size:12px; color:#454331; } body#gallery h3 { padding-left: 10px; } h1 span,h2 span,h3 span, h4 span { display:none; } a:link,a:visited { color:#454331; text-decoration:underline; outline:none; } a:hover,a:active { color:#454331; text-decoration:none; outline:none; } /* ----- classes ----- */ .clear { clear:both; } div.clear { clear:both; height:.01em; overflow:hidden; } p.back-to-top { text-align:right; display:block; } p.contact-map { text-align:center; vertical-align:middle; line-height:20px; } p.more { text-align:right; display:block; padding-left:10px; font-weight:bold; } p.more a { color:#A8957D; background:url("../images/bullet-on-cream.jpg") 0px 5px no-repeat; padding-left:12px; } img.img-left { float:left; margin:0; } img.img-right { float:right; margin:5px 20px 0px 10px; border:2px solid #dcdec9; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } p.thumb { text-align:center; } img.thumb { margin:0px 5px; } .clicktoview { text-align:center; margin-top: -4px; } /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} /* End hide from IE-mac */ /* ----- global form elements ----- */ form { width:170px; margin:0 0 15px 0; } form label { font-size:.95em; } form br { line-height:0; height:0; } /* defaults vertical spacing between fields */ input, textarea, select { background-color:#FFF !important; /* to prevent highlighting by Google Toolbar */ border:1px solid #C8B289; color:#454331; width:165px; /* 5 pixels smaller than form width !important */ height:18px; line-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:11px; } select { width:170px; padding:0; } /* same width as form - !important */ textarea { height:90px; overflow:auto; } #contact-business { display: none; } /* do not remove */ /* ----- main contact form ----- */ #contact-main { margin:20px 0 10px 0; } #contact-main label { width:180px; 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:170px; position:absolute; left:110%; top:-1px; } #contact-main label select { width:177px; } #contact-main label textarea { height:100px; overflow:auto; } #contact-business-main { display: none; } /* do not remove */ /* ----- submit button form elements ----- */ input.submit, input.submit-contact-main { width:60px; height:20px; cursor:pointer; padding:0; } input.submit-contact-main { margin:85px 0 5px 198px; } /* framework * ------------------------------------------------------------------------- */ #wrap { background:url("../images/bg-wrap.jpg") repeat-y; width:906px; margin:0 auto; text-align:left; } #bg-wrap { background:url("../images/bg-wrap-bottom.jpg") bottom no-repeat; width:906px; padding-bottom:10px; } #masthead-index { position:relative; background:url("../images/masthead-index.jpg"); height:343px; } /* index page link within #masthead */ #masthead-index a { position:absolute; left:359px; top:0px; width:194px; height:94px; } #masthead-index a span { display:none; } #masthead-about { position:relative; background:url("../images/masthead-about.jpg"); height:343px; } /* index page link within #masthead */ #masthead-about a { position:absolute; left:359px; top:0px; width:194px; height:94px; } #masthead-about a span { display:none; } #masthead-meet { position:relative; background:url("../images/masthead-meet.jpg"); height:343px; } /* index page link within #masthead */ #masthead-meet a { position:absolute; left:359px; top:0px; width:194px; height:94px; } #masthead-meet a span { display:none; } #masthead-specialty { position:relative; background:url("../images/masthead-specialty.jpg"); height:343px; } /* index page link within #masthead */ #masthead-specialty a { position:absolute; left:359px; top:0px; width:194px; height:94px; } #masthead-specialty a span { display:none; } #masthead-other { position:relative; background:url("../images/masthead-other.jpg"); height:343px; } /* index page link within #masthead */ #masthead-other a { position:absolute; left:359px; top:0px; width:194px; height:94px; } #masthead-other a span { display:none; } #masthead-smile { position:relative; background:url("../images/masthead-smile.jpg"); height:343px; } /* index page link within #masthead */ #masthead-smile a { position:absolute; left:359px; top:0px; width:194px; height:94px; } #masthead-smile a span { display:none; } #masthead-news { position:relative; background:url("../images/masthead-news.jpg"); height:343px; } /* index page link within #masthead */ #masthead-news a { position:absolute; left:359px; top:0px; width:194px; height:94px; } #masthead-news a span { display:none; } #masthead-contact { position:relative; background:url("../images/masthead-contact.jpg"); height:343px; } /* index page link within #masthead */ #masthead-contact a { position:absolute; left:359px; top:0px; width:194px; height:94px; } #masthead-contact a span { display:none; } #masthead-sitemap { position:relative; background:url("../images/masthead-sitemap.jpg"); height:343px; } /* index page link within #masthead */ #masthead-sitemap a { position:absolute; left:359px; top:0px; width:194px; height:94px; } #masthead-sitemap a span { display:none; } /* ----- column-left ----- */ #column-left { width:240px; float:left; font-size:11px; line-height:17px; } #column-left p, #column-left h1, #column-left h2, #column-left h3, #column-left h4, #column-left ul, #column-left dl { margin:0 11px 15px 62px; } #column-left form { margin-left:62px; } /* single column list */ #column-left ul { padding-left:5px; } #column-left ul li { list-style-type:disc; } #column-left ul li ul { margin:0 0 0 5px; } /* ----- column-center ----- */ #column-center { width:426px; float:left; } #center { text-align:center; } #column-center p, #column-center h1, #column-center h2, #column-center h3, #column-center h4, #column-center ul, #column-center dl { margin:0 23px 15px 21px; } #column-center form { margin-left:0px; } /* single column list */ #column-center ul { padding-left:25px; } #column-center ul li { list-style-type:disc; } #column-center ul li ul { margin:0 0 0 5px; } /* ----- column-right ----- */ #column-right { width:240px; float:left; font-size:10px; } #column-right p, #column-right h1, #column-right h2, #column-right h3, #column-right ul, #column-right dl { margin:0 65px 15px 13px; } /* single column list */ #column-right ul { padding-left:5px; } #column-right ul li { list-style-type:disc; } #column-right ul li ul { margin:0 0 0 5px; } /* ----- click to call ----- */ #ctc { background:url("../images/ctc.jpg"); height:185px; position:relative; } #ctc a { position:absolute; width:168px; height:104px; left:62px; top:48px; } #ctc span { display:none; } /* ----- map ----- */ #map { background:url("../images/map.jpg"); height:197px; position:relative; } #map a { position:absolute; width:146px; height:72px; left:74px; top:59px; } #map span { display:none; } /* ----- financing ----- */ #financing { background:url("../images/financing.jpg"); height:150px; } /* ----- memberships ----- */ #memberships { background:url("../images/memberships.jpg"); height:627px; } /* ----- office photos ----- */ #office-photos { background:url("../images/officephotos.jpg") top no-repeat; } #office-photos p { padding:60px 0px 0px 0px; } #office-photos img { margin: 0px 0px 10px 0px; border: 1px solid #fff; } /* ----- bottom-wrap ----- */ #bottom-wrap { background:url("../images/bottom-wrap.jpg"); height:31px; clear:both; width:100%; } /* subhead framework * ------------------------------------------------------------------------- */ #subhead { height:76px; } /* sets height for all non-flash subheads */ body#index #subhead { background:url("../images/subhead-index.jpg"); } body#about #subhead { background:url("../images/subhead-about.jpg"); } body#meet #subhead { background:url("../images/subhead-meet.jpg"); } body#specialty #subhead { background:url("../images/subhead-specialty.jpg"); } body#cosmetic #subhead { background:url("../images/subhead-cosmetic.jpg"); } body#gallery #subhead { background:url("../images/subhead-gallery.jpg"); } body#news #subhead { background:url("../images/subhead-news.jpg"); } body#special #subhead { background:url("../images/ourspecials.jpg"); } body#contact #subhead { background:url("../images/subhead-contact.jpg"); } body#thankyou #subhead { background:url("../images/subhead-thankyou.jpg"); } body#sitemap #subhead { background:url("../images/subhead-sitemap.jpg"); } body#rancho #subhead { background:url("../images/subtitle_direction.jpg"); } body#laguna #subhead { background:url("../images/subtitle_direction.jpg"); } body#irvine #subhead { background:url("../images/subtitle_direction.jpg"); } #subhead1 { height:76px; } /* sets height for all non-flash subheads */ body#index #subhead1 { background:url("../images/subhead-index.jpg"); } body#about #subhead1 { background:url("../images/subhead-about.jpg"); } body#meet #subhead1 { background:url("../images/Meet-Dr.-Catalin-Filip.jpg"); } body#specialty #subhead1 { background:url("../images/subhead-specialty.jpg"); } body#cosmetic #subhead1 { background:url("../images/subhead-cosmetic.jpg"); } body#gallery #subhead1 { background:url("../images/subhead-gallery.jpg"); } body#news #subhead1 { background:url("../images/subhead-news.jpg"); } body#contact #subhead1{ background:url("../images/subhead-contact.jpg"); } body#thankyou #subhead1{ background:url("../images/subhead-thankyou.jpg"); } body#sitemap #subhead1 { background:url("../images/subhead-sitemap.jpg"); } #subhead2 { height:76px; } /* sets height for all non-flash subheads */ body#index #subhead2 { background:url("../images/subhead-index.jpg"); } body#about #subhead2 { background:url("../images/subhead-about.jpg"); } body#meet #subhead2 { background:url("../images/Meet-Dr-Chris-Herring.jpg"); } body#specialty #subhead2 { background:url("../images/subhead-specialty.jpg"); } body#cosmetic #subhead2 { background:url("../images/subhead-cosmetic.jpg"); } body#gallery #subhead2 { background:url("../images/subhead-gallery.jpg"); } body#news #subhead2 { background:url("../images/subhead-news.jpg"); } body#contact #subhead2{ background:url("../images/subhead-contact.jpg"); } body#thankyou #subhead2{ background:url("../images/subhead-thankyou.jpg"); } body#sitemap #subhead2{ background:url("../images/subhead-sitemap.jpg"); } #subhead3 { height:76px; } /* sets height for all non-flash subheads */ body#index #subhead3 { background:url("../images/subhead-index.jpg"); } body#about #subhead3 { background:url("../images/subhead-about.jpg"); } body#meet #subhead3 { background:url("../images/meet_dr_anna.jpg"); } body#specialty #subhead3 { background:url("../images/subhead-specialty.jpg"); } body#cosmetic #subhead3 { background:url("../images/subhead-cosmetic.jpg"); } body#gallery #subhead3 { background:url("../images/subhead-gallery.jpg"); } body#news #subhead3 { background:url("../images/subhead-news.jpg"); } body#contact #subhead3{ background:url("../images/subhead-contact.jpg"); } body#thankyou #subhead3{ background:url("../images/subhead-thankyou.jpg"); } body#sitemap #subhead3{ background:url("../images/subhead-sitemap.jpg"); } /* ------------------------ title framework with varying heights ------------------------- */ #title-qcontact { height:74px; background:url("../images/title-qcontact.jpg") ; margin-bottom:10px; } body#contact #title-qcontact, body#thankyou #title-qcontact { height:54px; background:url("../images/title-locate.jpg") ; } #title-bridging { height:146px; background:url("../images/title-bridging.jpg") ; } #title-featured-patients { height:54px; background:url("../images/title-featured-patients.jpg") ; } /* footer * ------------------------------------------------------------------------- */ #footer { width:906px; margin:0 auto; text-align:center; color:#fff; } #footer a { color:#fff; } #footer p, #footer ul { margin:0 60px 10px 60px; } #footer li { /* if your li's float, you can adjust border height w/ line-height */ padding:0 5px 0 7px; display: inline; border-left: 1px solid #fff; } #footer li.first { border: none; } /* Horizontal Sprite Nav * ------------------------------------------------------------------------- */ #nav { background:url("../images/nav.jpg") no-repeat; width:906px; height:51px; margin:0; padding:0; /*overflow:hidden;*/ } #nav span { display: none;} #nav li, #nav a { height:51px; display:block; } /* change height here also */ #nav li { float:left; list-style:none; position:relative; } #nav-01 { width: 50px; margin-left:53px;} *html #nav-01 { width: 50px; margin-left:26.9px;} #nav-02 { width: 115px; margin-left:2px;} #nav-03 { width: 126px; margin-left:2px;} #nav-04 { width: 128px; margin-left:2px;} #nav-05 { width: 129px; margin-left:2px;} #nav-06 { width: 83px; margin-left:2px;} #nav-07 { width: 81px; margin-left:2px;} #nav-08 { width: 77px; margin-left:2px;} /*-------------- (-79px) X position of button / (-51px) height of image from above ------------- */ #nav-01 a:hover { background:url("../images/nav.jpg") -53px -51px no-repeat; } #nav-02 a:hover { background:url("../images/nav.jpg") -105px -51px no-repeat; } #nav-03 a:hover { background:url("../images/nav.jpg") -222px -51px no-repeat; } #nav-04 a:hover { background:url("../images/nav.jpg") -350px -51px no-repeat; } #nav-05 a:hover { background:url("../images/nav.jpg") -480px -51px no-repeat; } #nav-06 a:hover { background:url("../images/nav.jpg") -611px -51px no-repeat; } #nav-07 a:hover { background:url("../images/nav.jpg") -696px -51px no-repeat; } #nav-08 a:hover { background:url("../images/nav.jpg") -779px -51px no-repeat; } *html #nav-02 a:hover { background:url("../images/nav.jpg") -105px -51px no-repeat; } /*-------------- OPTIONAL - Keeps the hover state on each page based on body #id ------------- */ body#index #nav-01 { background:url("../images/nav.jpg") -53px -51px no-repeat; } body#about #nav-02 { background:url("../images/nav.jpg") -105px -51px no-repeat; } body#meet #nav-03 { background:url("../images/nav.jpg") -222px -51px no-repeat; } body#cosmetic #nav-04 { background:url("../images/nav.jpg") -350px -51px no-repeat; } body#specialty #nav-05 { background:url("../images/nav.jpg") -480px -51px no-repeat; } body#gallery #nav-06 { background:url("../images/nav.jpg") -611px -51px no-repeat; } body#news #nav-07 { background:url("../images/nav.jpg") -696px -51px no-repeat; } body#contact #nav-08 { background:url("../images/nav.jpg") -779px -51px no-repeat; } .last_opt{ background-color:#000000; color:#FFFFFF; border:solid 1px #FF0000; width:180px; height:30px; } .last_opt:hover{ background-color:#000000; color:#FFFFFF; } .last_opt li{ background-color:#000000; color:#FFFFFF; } .last_opt li a{ background-color:#000000; color:#FFFFFF; } .last_opt li a:hover { background-color:#000000; color:#FFFFFF; } .submenu { background-color:#000000; color:#FFFFFF; border:solid 1px #FF0000; width:180px; height:30px; } .submenu ul { background-color:#000000; color:#FFFFFF; border:solid 1px #FF0000; width:180px; height:30px; } .submenu ul li { background-color:#000000; color:#FFFFFF; border:solid 1px #FF0000; width:180px; height:30px; } .submenu ul li a { background-color:#000000; color:#FFFFFF; border:solid 1px #FF0000; width:180px; height:30px; } .submenu ul li a:hover { background-color:#000000; color:#FFFFFF; border:solid 1px #FF0000; width:180px; height:30px; } .posted1 { font-size:12px; font-style:italic; padding-left:20px; } .posted { font-size:12px; font-style:italic; } .news_listing { width:380px; margin:5px 10px 5px 20px; padding:5px 0px 5px 0px; } .special_listing { width:380px; margin:5px 10px 5px 20px; padding:5px 10px ; } .special_listing a { padding:5px 0px 5px 20px; background:url(../images/special_arrow.gif) no-repeat top left; background-position:0px 5px; color:#454331; outline:none; text-decoration:none; } .special_listing a:hover { color:#454331; text-decoration:underline; } .error { padding-left:50px; font-family:Arial, Helvetica, sans-serif; color:#FF0000; } .errorLeft { font-family:Arial, Helvetica, sans-serif; color:#FF0000; } .aboutusbutton1 { background-image:url(../images/rancho_n); height:178px; width:36px; display:block; } .aboutusbutton1 a { background-image:url(../images/rancho_n); height:178px; width:36px; display:block; } #nav li ul { position: absolute; width: 10em; left: -999em; display:block; } #nav li:hover ul, #nav li.sfhover ul { left: auto; } #nav li ul li { text-decoration:none!important; color:#CFCEBA!important; background-image:none!important; background-color:#454331; display:block; width:100%; height:auto!important; } #nav li ul li a{ color:#CFCEBA; height:auto!important; text-decoration:none; } #nav li ul li a:hover{ color:#fff; background-image:none!important; } .featuredpatient { background-image:url(../images/bgfeaturenew.jpg); width:187px; } .thumbframebox { margin-bottom:10px; } .thumbshadowbg{ background-image:url(../images/shadowbg.jpg); width:150px; height:63px; padding-top:10px; margin:auto; text-align:center; } .newimageboder { padding:1px; background-color:#657b3d; } .clickherelink { margin:auto; width:147px; margin-top:5px; } .popupimage{ background-color:#ddded0; padding:3px 10px 3px 10px; } .thumbshadowwhitebg { background-image:url(../images/bgshadowwhite.jpg); width:150px; height:63px; padding-top:10px; margin:auto; text-align:center; } .smilethumbbox { width:160px; float:left; margin-bottom:10px; } .smilegallery { border:solid 0px #000000; width:auto; margin:auto; text-align:center; margin-left:50px; } .note{ width:370px; color:#FF0000; padding-bottom:10px; } .facebook{ margin:10px 0px 0px 7px; } .ourspecials{ margin:0px 0px 10px 60px; } #nointerest { background:url("../images/banner_234_1.jpg"); height:48px; }