/*
=============================================================================================

Juve Medspa
General Layout Style Sheet

Created by Delaware.Net
http://www.delaware.net
Copyright 2008

=============================================================================================
*/



/* Color Scheme
=============================================

Headings - #004E67
Body Font - #333333
Links - #0383B0

========================================== */

body {font:12px Arial, Helvetica, sans-serif; color:#000; background-color:#fff8e0; margin:0; background-image:url(/images/juve-bar-bg.jpg); background-repeat:repeat-x;}

p {line-height:18px; margin:0;}

a {outline-style:none;} /* Removes dotted lines around links when active */
a:link {color:#0383B0;}
a:visited {color:#0383B0;}
a:hover, a:focus, a:active {color:#0383B0; text-decoration:none;}

img {border:none;}
strong {font-weight:bold;}
input, textarea {background:#fff; border:1px solid #777;}

h2 {font-size:2.4em;}
h3 {font-size:2em;}
h4 {font-size:1.4em;}

li {list-style:url(/images/bullet.gif);}

/* Use to add jump link to navigation and main content also add link in footer to jump to top of page for screen readers */
.access {display:none; text-indent:-9999px; overflow:hidden; height:0;}
.thumbnail {padding:3px; margin:3px; border:1px solid #444; background:#ccc;}

/* Layout
========================================== */

#bar {height:217px;}

#wrapper {background:none; margin:0 auto; width:1260px;}

/*=== HEADER ===*/
#header {background-image:url(/images/header-bg.jpg); background-repeat:no-repeat; width:930px; height:196px; position:relative; padding-right:330px;}
#header h1 {position:relative; margin:0; left:231px; top:49px; height:114px; width:338px; text-indent:-9999px; overflow:hidden; background:url(/images/juve-logo.png) left top no-repeat;}
#header h1 a {display:block; height:130px; width:385px; left:0px; top:0px;}

#shop_online {position:absolute; top:75px; right:340px;}

/*=== TOP NAV ===*/
#navSub {float:right; margin:-104px 0 0 790px; padding:0; width:125px; height:20px;}
#navSub li {list-style:none; float:left; border-right:1px solid #0B516B; padding:0 5px;}
#navSub a {font-size:10px; text-decoration:none; color:#0B516B;}
#navSub a:hover {text-decoration:underline;}
#navSub .last {border:none; padding-right:0px;}

#phone {float:left; width:136px; margin:-83px 0 0 800px; padding:0; font-family:"Times New Roman", Times, serif; font-size:22px; font-weight:bold; color:#335781;}
#phone2 {float:left; margin:-66px 0 0 883px; padding:0; font-family:"Times New Roman", Times, serif; font-size:17px; font-weight:bold; color:#335781;}

/*=== NAVIGATION ===*/
#navMain {float:left; width:680px; margin:57px 0 0 189px; padding-left:220px; background-color:#49719e;}
#navMain ul {display:inline;}
#navMain li {list-style:none; display:inline; float:left; padding:5px 5px 0 5px; height:20px;}
#navMain li a {display:inline; text-decoration:none; color:#fff; height:24px; text-align:left; padding:0 10px;}
#navMain li a:hover {background:none; color:#fff; text-decoration:underline;}
#navMain .last {padding-left:0;}

#navMain li ul {position: absolute; width:770px; left: -999em; top:196px; margin-left:189px; padding-left:130px; background-color:#335781;}
#navMain li:hover ul, #navMain li.sfhover ul {left:0;}
#navMain li ul a {background:none; padding:8px 10px 8px 10px; font-weight:normal;}
#navMain li ul a:hover {background:#49719e; padding:5px 10px;}

/*=== FLASH ===*/
#flash {height:218px; width:900px; margin:0 0 0 189px;}

/*=== HOMEPAGE CONTENT ===*/
#content {position:relative; width:900px; background:url(/images/juve-content-bg.jpg) top left no-repeat; margin:0 0 0 189px; padding:95px 0 15px 12px; z-index:2;}
#content_wrapper {width:1260px; background:url(/images/juve-horizontal-fade.jpg) top left repeat-y;}
#content_fade {width:1260px; height:317px; display:block; position:absolute; z-index:1; background:url(/images/juve-backgroud-fix.jpg) top left no-repeat;}

#welcome {position:relative; float:left; height:187px; width:416px; background:url(/images/welcome-box.png) top left no-repeat; padding:45px 15px 0 15px; margin:-55px 10px 0 0;}
#specials {position:relative; float:left; width:221px; height:auto !important; height:140px; min-height:140px; background:url(/images/specials-box.png) top left no-repeat; padding:53px 15px 0 15px; margin:-24px 10px 0 0;}

#servicesHome {position:relative; float:left; background:url(/images/services-box.png) top left no-repeat; width:152px; padding:53px 15px 23px 15px; margin:-23px 0 0 0;}
#servicesHome ul {margin:0; padding:10px 0 0 10px;}
#servicesHome ul li {padding:0;}
#servicesHome ul li a,#servicesHome ul li a:link {text-decoration:none;}
#servicesHome ul li a:hover {text-decoration:underline;}

/*=== INTERIOR CONTENT ===*/
#servicesIn {position:relative; width:183px; min-height:311px; display:block; background-color:#fff; z-index:50; float:left;}
#servicesTop {position:absolute; width:183px; height:55px; top:-55px; left:0; background:url(/images/services-interior-top.png) top left no-repeat; z-index:-1;}
#servicesBottom {position:absolute; width:183px; height:10px; display:block; background:url(/images/services-interior-bottom.png) bottom left no-repeat; bottom:-10px;}
#servicesIn ul {padding:0; margin:0 0 0 25px; padding-left:8px;}
#servicesIn ul li {padding-bottom:5px;}
#servicesIn h1 {background:url(/images/headers/services.jpg) top left no-repeat; text-indent:-9999px; overflow:hidden; margin:-15px 0 0 26px; padding-bottom:15px}

#imgRight {width:224px; height:344px; top:71px; left:662px; position:absolute;}

#rightIn {position:relative; width:442px; min-height:311px; display:block; background-color:#fff; margin-left:12px; z-index:50; float:left;}
#rightTop {position:absolute; width:442px; height:55px; top:-55px; left:0; background:url(/images/right-interior-top.png) top left no-repeat; z-index:-1;}
#rightBottom {position:absolute; width:442px; height:10px; display:block; background:url(/images/right-interior-bottom.png) bottom left no-repeat; bottom:-10px;}
#rightIn p {padding:0 20px 20px 20px;}
#rightIn h2 {font-size:14px; font-weight:bold; padding-left:15px;}

#microderm {background:url(/images/headers/microdermabrasion.jpg) top left no-repeat; text-indent:-9999px; overflow:hidden; margin:-15px 0 0 26px; padding-bottom:5px;}
#laserhair {background:url(/images/headers/hair-removal.jpg) top left no-repeat; text-indent:-9999px; overflow:hidden; margin:-15px 0 0 26px; padding-bottom:5px;}
#liposuction {background:url(/images/headers/liposuction.jpg) top left no-repeat; text-indent:-9999px; overflow:hidden; margin:-15px 0 0 26px; padding-bottom:5px;}
#chemicalpeel {background:url(/images/headers/chemical-peel.jpg) top left no-repeat; text-indent:-9999px; overflow:hidden; margin:-15px 0 0 26px; padding-bottom:5px;}
#botox {background:url(/images/headers/botox.jpg) top left no-repeat; text-indent:-9999px; overflow:hidden; margin:-15px 0 0 26px; padding-bottom:5px;}
#restylane {background:url(/images/headers/restylane.jpg) top left no-repeat; text-indent:-9999px; overflow:hidden; margin:-15px 0 0 26px; padding-bottom:5px;}
#thanks {background:url(/images/headers/thanks.jpg) top left no-repeat; text-indent:-9999px; overflow:hidden; margin:-15px 0 0 26px; padding-bottom:5px;}
#faq {background:url(/images/headers/faq.jpg) top left no-repeat; text-indent:-9999px; overflow:hidden; margin:-15px 0 0 26px; padding-bottom:5px;}
#cosmetics {background:url(/images/headers/cosmetics.jpg) top left no-repeat; text-indent:-9999px; overflow:hidden; margin:-15px 0 0 26px; padding-bottom:5px;}
#facials {background:url(/images/headers/facials.jpg) top left no-repeat; text-indent:-9999px; overflow:hidden; margin:-15px 0 0 26px; padding-bottom:5px;}
#massage {background:url(/images/headers/massage.jpg) top left no-repeat; text-indent:-9999px; overflow:hidden; margin:-15px 0 0 26px; padding-bottom:5px;}
#contactus {background:url(/images/headers/contact.jpg) top left no-repeat; text-indent:-9999px; overflow:hidden; margin:-15px 0 0 26px; padding-bottom:5px;}
#specialsTitle {background:url(/images/headers/specials.jpg) top left no-repeat; text-indent:-9999px; overflow:hidden; margin:-15px 0 0 26px; padding-bottom:5px;}
#about {background:url(/images/headers/about.jpg) top left no-repeat; text-indent:-9999px; overflow:hidden; margin:-15px 0 0 26px; padding-bottom:5px;}

#contact {margin-left:10px;}

#column {width:130px; margin:65px 0 0 25px; padding:0px; position:absolute;}
#column a, #column a:visited {text-decoration:none; color:#555;}
#column a:hover {text-decoration:none; color:#0383B0;}

/*=== CALLOUTS ===*/
#callouts {float:left; width:930px; height:181px; margin:-35px 0 0 -39px;}
#callouts ul {list-style:none;}
#callouts ul li {display:inline; height:181px; width:283px;}
#callouts #lipo a {float:left; margin-right:9px; display:block; height:181px; width:283px; background:url(/images/callouts/liposuction.png) bottom left no-repeat; text-indent:-9999px; overflow:hidden;}
#callouts #lipo a:hover {float:left; margin-right:9px; display:block; height:181px; width:283px; background:url(/images/callouts/liposuction.png) top left no-repeat; text-indent:-9999px; overflow:hidden;}
#callouts #botox a {float:left; margin-right:9px;  display:block; height:181px; width:283px; background:url(/images/callouts/botox.png) bottom left no-repeat; text-indent:-9999px; overflow:hidden;}
#callouts #botox a:hover {float:left; margin-right:9px; display:block; height:181px; width:283px; background:url(/images/callouts/botox.png) top left no-repeat; text-indent:-9999px; overflow:hidden;}
#callouts #hair a {float:left; display:block; height:181px; width:283px; background:url(/images/callouts/hair-removal.png) bottom left no-repeat; text-indent:-9999px; overflow:hidden;}
#callouts #hair a:hover {float:left; display:block; height:181px; width:283px; background:url(/images/callouts/hair-removal.png) top left no-repeat; text-indent:-9999px; overflow:hidden;}

/*=== FOOTER ===*/
#footer {position:relative; background:url(/images/footer-bg.jpg) top left no-repeat; height:185px; width:1260px; padding:90px 0 0 150px;}
.footer-nav ul {font:11px Helvetica, Arial, sans-serif; color:#FFF; width:900px;}
.footer-nav ul li {list-style:none; float:left; display:inline-block; border: solid #FFF; border-width:0 1px 0 0; padding:0 11px; }
.footer-nav ul li.first {border-width:0 1px 0 0;}
.footer-nav ul li.last {border-width:0 0 0 0;}
.footer-nav ul li a:link, .footer-nav ul li a:visited {font:11px Helvetica, Arial, sans-serif; color:#FFF; text-decoration:underline;}
.footer-nav ul li a:hover {text-decoration:none; color:#fff;}
#address p {position:relative; width:590px; margin:35px 0 0 205px; color:#0E4F6B;}
#address p a {color:#0E4F6B;}
#address a:visited {color:#0E4F6B;}
#delawarenet {position:absolute; margin:45px 0 0 375px; color:#0E4F6B;}
#delawarenet a {color:#0E4F6B;}



/* THIS IS A GREAT CLEARING METHOD THAT WORKS IN IE/FIREFOX/OPERA - MOST OF THE TIME */

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* END */
 .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */