/* ----------------- CSS Reset ----------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
font: 63% helvetica, arial, verdana, sans-serif;
color: #474c7b;
background: #2B3D6F url('../images/main/pagebg.jpg') top left repeat-x;

}
ol, ul {
list-style: none;
}

ul, ol, dl {
position: relative;  
}

blockquote, q {
quotes: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

td {
vertical-align: top;
}

.clear {
clear: both;
}

strong {
font-weight: bold;
}

img {
-ms-interpolation-mode: bicubic;
}

img.floatright {
display: block;
position: relative;
float: right;
padding: 0 10px 10px 10px;
}

img.floatleft {
display: block;
position: relative;
float: left;
padding: 10px;
}

.hidden {
display: none !important;
}

/* ----------------- Main Structure ----------------- */

.bgwrap {

}

.gradientwrap {

}

.contentwrap {
margin: 0 auto;
display: block;
position: relative;
width: 998px;
}

#content {
margin: 0 auto;
display: block;
position: relative;
background: url('../images/main/bg.png') top left repeat-y;
width: 998px;
}

.headerwrap {
background: url('../images/main/top.png') no-repeat scroll top left;
width: 998px;
}

.footerwrap {
background: url('../images/main/footer.png') bottom left no-repeat;
width: 998px;
min-height: 600px;
}

#mast {

}

#mast h1 a {
text-indent: -9999px;
display: block;
position: relative;	
background: url('../images/main/logo.png') no-repeat scroll top left;
width: 339px;
height: 258px;
}


/* Left Column */

#leftcol {
color: #4a4d55;
width: 339px;
float: left;
display: block;
position: relative;
}

.leftcontentwrap {
width: 275px;
min-height: 525px;
left: 30px;
margin-top: -70px;
display: block;
position: relative;
}

#leftcol h4 {
color: #2b3961;
background: url('../images/main/leftcol/leftcolunderline.png') 0 bottom no-repeat;
padding-bottom: 4px;
font-size: 1.2em;
margin: 0 0 7px -10px;
padding-left: 10px;
}

#leftcol a {
font-weight: bold;
}

.mission {
color: #3c4664;
font-size: 1.1em;
line-height: 1em;
}

.group {
margin-left: -25px;	
padding-bottom: 15px;
}

.gift {
background: url('../images/main/leftcol/giftbg.png') no-repeat scroll top left;
width: 301px;
height: 78px;
padding: 0 12px;
margin: -12px 0 20px -13px;
}

.gift h4 {
padding-top: 10px;
}

.gift h4, .gift p {
width: 260px;
}

.weddings {

}

.weddings img {
border: 1px solid #fff;
float: left;
margin: 0 10px 5px 0;
}



/* Right Column */

#rightcol {
width: 659px;
float: right;
display: block;
position: relative;
margin-right: -1px;
margin-top: -258px;
}

.mainpic {
margin-left: -1px;
background: url('../images/topphoto/5.jpg') no-repeat scroll top left;
width: 659px;
height: 258px;
display: block;
position: relative;
}

.copyfooter {
width: 659px;
height: 22px;
}

.copybg {
width: 659px;
}

.textwrap {
width: 580px;
display: block;
position: relative;
margin: 0 auto;
padding: 15px 0;
}

#copyleftcol {
display: block;
position: relative;
float: left;
width: 350px;
padding: 15px 0;
font-size: 1.2em;
}

#copyleftcol.wide {
width: 550px;
}

.specialswrap {

}

.specialswrap h3 {
display: block;
position: relative;
text-indent: -9999px;
background: url('../images/headlines/specials.png') no-repeat scroll top left;
width: 365px;
height: 56px;
border: 0 !important;
padding: 0 !important;
}

.specialswrap p {
color: #493e56;
font-size: 1.1em;
}

.specialswrap img {
margin: 0 10px 0 0;
}

#copyrightcol {
border-left: 1px solid #cdced2;
display: block;
position: relative;
float: right;
width: 150px;
padding: 15px;
}


.interior #copyrightcol {
border: none;
}

#copyrightcol h4 {
text-transform: uppercase;
color: #37477a;
margin: 2em 0 1em;
font-size: 1.3em;
line-height: 2em !important;
}

#copyrightcol p {
color: #474c7b;
line-height: 1.5em;
}

.copyrightcol img {

}
/* Index Page */



/* ----------------- Links ----------------- */

a:link, a:visited, a:hover {
color: #2C3E70;
text-decoration: underline;
}

a:visited {

}

a:hover {
color: #E36412;
}

a.custom {
display: block;
position: relative;
text-indent: -9999px;
background: transparent;
}

a.bookanappt {
background: url('../images/icons/bookanappt.png') no-repeat scroll top left;
width: 309px;
height: 119px;
margin: 20px 0 0 -17px;
}

/* ----------------- Navigation ----------------- */

ul#nav {
display: block;
position: relative;
list-style: none;
background: transparent;
width: 998px;
height: 40px;
}

ul#nav li {
float: left;
height: 40px;
}

ul#nav li, ul#nav li a, ul#nav li a:link {
text-indent: -9999px;
text-decoration: none;
position: relative;
height: 36px;
display: block;
background: transparent;
}

ul#nav li.home a:link, ul#nav li.home a:hover, ul#nav li.home a:visited {
background: transparent url(../images/nav/home.jpg) top left no-repeat;
width: 88px;
}

ul#nav li.services a:link, ul#nav li.services a:hover, ul#nav li.services a:visited {
background: transparent url(../images/nav/services.jpg) top left no-repeat;
width: 131px;
}

ul#nav li.products a:link, ul#nav li.products a:hover, ul#nav li.products a:visited {
background: transparent url(../images/nav/products.jpg) top left no-repeat;
width: 129px;
}

ul#nav li.appointment a:link, ul#nav li.appointment a:hover, ul#nav li.appointment a:visited {
background: transparent url(../images/nav/appointment.jpg) top left no-repeat;
width: 205px;
}

ul#nav li.about a:link, ul#nav li.about a:hover, ul#nav li.about a:visited {
background: transparent url(../images/nav/about.jpg) top left no-repeat;
width: 101px;
}

ul#nav li.location a:link, ul#nav li.location a:hover, ul#nav li.location a:visited {
background: transparent url(../images/nav/location.jpg) top left no-repeat;
width: 125px;
}

ul#nav li.careers a:link, ul#nav li.careers a:hover, ul#nav li.careers a:visited {
background: transparent url(../images/nav/careers.jpg) top left no-repeat;
width: 96px;
}

ul#nav li.contact a:link, ul#nav li.contact a:hover, ul#nav li.contact a:visited {
background: transparent url(../images/nav/contact.jpg) top left no-repeat;
width: 123px;
}

ul#nav li a:hover {
background-position: 0 -40px !important;
}



/* ----------------- Sub-Navigation ----------------- */

.subnav {
background: url('../images/nav/subnav/ulbg.png') no-repeat scroll top left;
width: 305px;
height: 335px;
top: -30px;
left: -16px;	
position: relative;
display: block;
}

.subnav h3 {
display: block;
margin: 0 20px 0 auto;
top: 25px;
position: relative;
}

.subnav h3.services {
background: url('../images/nav/subnav/services.png') no-repeat scroll top left;
width: 89px;
height: 17px;
}


.subnav ul {
margin: 0 0 0 10px !important;
top: 25px;
position: relative;
display: block;
}

.subnav li {
color: #7c86a1;
font-size: 1.3em;
padding: 5px;
background: transparent url('../images/nav/subnav/subnavline.png') bottom left no-repeat !important;
width: 266px;
line-height: 1em;
margin-bottom: 10px;
background: transparent;	
position: relative;
display: block;
}

.subnav li a:link, .subnav li a:hover, .subnav li a:visited {
color: #7c86a1;
padding-left: 15px;
text-decoration: none;
}

.subnav li a:hover {
color: #444e6c;
}

.subnav li.on a {
color: #444e6c;
background: url('../images/icons/arrow.png') no-repeat scroll top left;
}


/* ----------------- Footer ----------------- */

#footer {
background: url('../images/main/footerbg.png') no-repeat scroll top left;
width: 998px;
height: 174px;
}

#footer p {
color: #ffff;
}

#footer a:link, #footer a:hover, #footer a:visited {
color: #fff;
text-decoration: underline;
font-weight: bold;
}

.facebook {
display: block;
position: relative;
width: 300px;
clear: both;
height: 25px;
margin: 15px auto 0 auto;
background: transparent url('../images/main/footer/formlin.png') top left no-repeat;
}

.facebook a {
background: transparent url('../images/icons/facebook.png') 0 10px no-repeat;
padding-left: 0px;
height: 32px;
width: 250px;
display: block;
position: relative;
padding-top: 20px;
font-size: 1.5em;
text-decoration: none !important;
margin: 0 auto;
text-align: center;
color: #d0d5e1 !important;
}

.facebook a:hover {
color: #fff;
text-decoration: underline !important;
}

address {
color: #c0c2c9;
font-style: normal;
display: block;
width: 920px;
margin: 0 auto;
top: 45px;
position: relative;
}

address p {
float: left;
font-size: 1em;
}


.footerleft {
display: block;
position: relative;
float: left;
width: 300px;
margin: 0 25px;
top: 30px;
height: 110px;
}

.footerleft h3 a {
display: block;
position: relative;
text-indent: -9999px;
background: url('../images/main/footer/bvain.png') center 15px no-repeat;
width: 172px;
height: 110px;
margin: 0 auto;
}

.footercenter {
display: block;
position: relative;
float: left;
width: 290px;
margin: 0 0 0 5px;
top: 35px;
height: 110px;
}

.footercenter h3 a {
display: block;
position: relative;
text-indent: -9999px;
background: url('../images/main/footer/mitchellsalon.png') center 15px no-repeat;
width: 280px;
height: 110px;
margin: 0 auto;
}

.footerright {
display: block;
position: relative;
float: right;
width: 290px;
margin: 0 25px;
top: 35px;
height: 110px;
}

.footerright img {
float: left;
margin: 0 10px 0 0;
}

.footerright h4 {
color: #d0d5e1;
font-size: 1.3em;
}

.footerright form {
width: 270px;
margin: 10px auto;
display: block;
position: relative;
}

.footerright input {
border: 1px solid #9ba0ae;
width: 150px;
margin-bottom: 10px;
color: #fff;
height: 19px;
padding: 0 2px;
background: #383b51;
float: left;display: block;
position: relative;
}

.footerright input.submit {
width: 36px;
height: 23px;
border: 0;
float: right;
}

/* use avant garde font for headlines */

address p.right {
font-weight: bold;
text-align: right;
float: right;
}

#footer a {
color: #c0c2c9;
text-decoration: underline;
}

#footer a:hover {
color: #fff;
}

/* ----------------- Pages ----------------- */

/* Index Page */




/* ----------------- Headlines ----------------- */

h2, .subnav h3 {
text-indent: -9999px;
display: block;
position: relative;
background: transparent;
margin-bottom: 2em;
}

.textwrap h3 {
font-size: 1.4em;
margin: 15px 0 15px -4px;
border-bottom: 1px solid;
color: #474c7b;
padding: 2px;
}

h2.welcome {
background: url('../images/headlines/welcome.png') no-repeat scroll top left;
width: 147px;
height: 64px;
}
h2.color  {
background: url('../images/headlines/colorservices.png') no-repeat scroll top left;
width: 220px;
height: 83px;
} 

h2.nails {
background: url('../images/headlines/nails.png') no-repeat scroll top left;
width: 204px;
height: 86px;
}
h2.makeup {
background: url('../images/headlines/makeup.png') no-repeat scroll top left;
width: 120px;
height: 77px;
}

h2.hair {
background: url('../images/headlines/hairservices.png') no-repeat scroll top left;
width: 225px;
height: 83px;
} 

h2.gentlemen {
background: url('../images/headlines/gentlemen.png') no-repeat scroll top left;
width: 257px;
height: 66px;
} 

h2.waxing {
background: url('../images/headlines/waxing.png') no-repeat scroll top left;
width: 404px;
height: 86px;
} 

h2.skin  {
	background: url('../images/headlines/skin.png') no-repeat scroll top left;
	width: 158px;
	height: 83px;
} 

h2.ear {
	background: url('../images/headlines/ear.png') no-repeat scroll top left;
	width: 215px;
	height: 88px;
}

h2.events {
background: url('../images/headlines/weddings.png') no-repeat scroll top left;
width: 471px;
height: 86px;
} 

h2.products {
background: url('../images/headlines/products.png') no-repeat scroll top left;
width: 373px;
height: 72px;
} 

h2.about {
background: url('../images/headlines/about.png') no-repeat scroll top left;
width: 155px;
height: 82px;
} 

h2.location {
background: url('../images/headlines/location.png') no-repeat scroll top left;
width: 212px;
height: 66px;
} 

h2.careers {
background: url('../images/headlines/careers.png') no-repeat scroll top left;
width: 130px;
height: 66px;
} 

h2.contact {
background: url('../images/headlines/contact.png') no-repeat scroll top left;
width: 190px;
height: 66px;
}

h2.thankyou {
background: url('../images/headlines/thankyou.png') no-repeat scroll top left;
width: 163px;
height: 73px;
}

h2.appointment {
background: url('../images/headlines/appointment.png') no-repeat scroll top left;
width: 373px;
height: 82px;
}

/* ----------------- Typography ----------------- */

p, li, dd {
font-size: 1.2em;
line-height: 1.4em;
margin-bottom: 1.5em;
}

.textwrap ul {
list-style: disc;
margin: 0 20px 30px 30px;
}

.textwrap li {
margin: 0 0 .5em 0;
}



/* ----------------- Calendar ----------------- */

.datepicker { border-collapse: collapse; border: 2px solid #999; position: absolute; z-index: 20; }
.datepicker tr.controls th { height: 22px; font-size: 11px; }
.datepicker select { font-size: 11px; }
.datepicker tr.days th { height: 18px; }
.datepicker tfoot td { height: 18px; text-align: center; text-transform: capitalize; }
.datepicker th, .datepicker tfoot td { background: #eee; font: 10px/18px Verdana, Arial, Helvetica, sans-serif; }
.datepicker th span, .datepicker tfoot td span { font-weight: bold; }

.datepicker tbody td { width: 24px; height: 24px; border: 1px solid #ccc; font: 11px/22px Arial, Helvetica, sans-serif; text-align: center; background: #fff; }
.datepicker tbody td.date { cursor: pointer; }
.datepicker tbody td.date.over { background-color: #99ffff; }
.datepicker tbody td.date.chosen { font-weight: bold; background-color: #ccffcc; }

.calendar {
width: 100px;	
background: #fff url('../images/icons/calendar.png') 83px center no-repeat;
}

.time {
width: 100px;	
background: #fff url('../images/icons/clock.png') 83px center no-repeat;
}

.clearme {
width: 100px;
color:#CACCD1;	
}

.changeme {
color: #474c7b;
}


/* ----------------- Tables ----------------- */

table {
font-size: 1.1em;
margin: 20px;
}

table td {
padding: 5px 5px 5px 0;
}

table td.right {
text-align: right;
}

#services table {
width: 400px;
margin: 0 auto 20px auto;
}

#services table td {
border-bottom: 1px solid #BCBFC8;
padding: 5px;
}

/* ----------------- Form ----------------- */

table input {
padding: 2px;
}

table textarea {
height: 100px;
width: 350px;
}