/* Welcome to Compass. In this file you should write your main styles. (or centralize your imports) Import this file using the following HTML or equivalent: <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
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, 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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

*:focus { outline: 0; }

body { line-height: 1em; color: black; background: #fff; }

ol, ul { list-style: none; }

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

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: "" ""; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }

img a { border: none; }

/* The *:focus rule is reset and suppresses link outlining. You _must_ remember to redefine your own outline, as it’s an important accessibility aid. E.g. *:focus   outline: #ccc dotted medium */
body { font-family: Helvetica, Arial, sans-serif; background: #f5f5f5; color: #999999; font-weight: bold; font-size: 13px; }

h1, h2, h3, h4, h5, h6 { color: black; margin-bottom: 1em; line-height: 1em;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: black; text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { border-bottom: 1px dashed #2ac4f4; }

h1 { font-size: 2em; }

h2 { font-size: 1.5em; }

h3 { font-size: 1.2em; }

h4 { font-size: 1.1em; }

small {font-size:0.7em;}

p { line-height: 1.6em; font-size: 0.9em; }
p a, #content li a { color: #382d2b; text-decoration: none; border-bottom: 1px dashed #382d2b; }
p a:hover, #content li a:hover { border-bottom: 1px dashed #2ac4f4; }

#content {padding:15px;background:#fff;margin-right: 291px;border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }

#content p, #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {margin-top:1em} 

#content blockquote {padding:20px}

#content li { padding:5px;list-style: disc}

td {line-height: 1.6em; font-size: 0.95em; font-weight:bold;padding:2px;vertical-align: top}

.wrapper { width: 865px; position: relative; margin-left: auto; margin-right: auto; }

#header { background: #382d2b; height: 150px; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#38302e, endColorstr=#2a2120); background-image: -moz-linear-gradient(top, #38302e, #2a2120); background-image: -webkit-gradient(linear, left top, left bottom, from(#38302e), to(#2a2120)); position: relative; }

#logo { color: white; background: url('../img/logo.png') no-repeat; width: 1px; height: 110px; display: block; position: absolute; top: 30px; overflow: hidden; padding-left: 180px; left: 10px; text-indent: 1px; white-space: nowrap; }

#navbar { background: #f0eee3; padding: 8px; font-size: 1em; height: 2.2em; }
#navbar ul li { list-style: none; display: inline; }
#navbar ul li a { display: block; float: left; color: #382d2b; padding: 0.6em 1.05em; border-left: 2px solid #ffffff; text-decoration: none; letter-spacing: -0.05em; position: relative; }
#navbar ul li a:hover { color: #2ac4f4; }
#navbar ul li a .marker { background: url('../img/marker.png'); width: 21px; height: 7px; overflow: hidden; position: absolute; top: -8px; }
#navbar ul li.active a { color: #2ac4f4; }

#banner { height: 300px; background: white; border-bottom-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; overflow: hidden; }
#banner img { -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; }

.spacer { clear: both; float: none; height: 1px; overflow: hidden; }

#boxes {position: relative; }

.box {margin-bottom:10px;background: white; width: 255px; padding: 25px 13px 20px 13px; margin-right: 10px; float: left; height: 140px; position: relative; z-index: 2; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; display: block; }
.box#treatment_box { background-image: url('../img/box1.png'); background-repeat: no-repeat; background-position: 150px 29px; }
.box#treatment_box p { max-width: 140px; }
.box#cosmetic_box { background-image: url('../img/box2.png'); background-repeat: no-repeat; background-position: 150px 49px; }
.box#cosmetic_box p { max-width: 140px; }
.box#contact_box { background: #382d2b; margin-right: 0px;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#38302e, endColorstr=#2a2120);
background-image: -moz-linear-gradient(top, #38302e, #2a2120); background-image: -webkit-gradient(linear, left top, left bottom, from(#38302e), to(#2a2120)); }
.box#contact_box h2,.box#contact_box h1, .box#contact_box p { color: #dad9d9; }
.box h1 { font-size:1.5em}
.box#contact_box a { color: #2ac4f4; }
.box#contact_box a:hover { color: white; }
.box#contact_box a.read-more:hover { color: white; }
.box#quick_connect { z-index: 1; position: absolute; background: #2ac4f4 url('../img/quick.png') no-repeat 254px; right: -40px; top: 0px; }
.box:hover a.read-more { color: #382d2b; }
.box:hover h2 a { border-bottom: 1px dashed #2ac4f4; }

#footer { padding: 20px; font-size: 0.85em; }
#footer a { color: #382d2b; text-decoration: none; }
#footer a:hover { color: #2ac4f4; }

#links { font-size: 0.9em; padding: 30px 0px 50px; }
#links a { display: block; float: left; margin-right: 25px; margin-bottom: 10px; padding: -5px; }

a.read-more { text-decoration: none; color: #2ac4f4; position: absolute; bottom: 15px; }
a.read-more:hover { color: #382d2b; }

#quick_contact { z-index: 99; }
#quick_contact input, #quick_contact textarea, #quick_contact a.button { width: 250px; padding: 5px; font-size: 1.4em; color: #382d2b; font-weight: bold; }
#quick_contact input[type="submit"], #quick_contact a.button { width: auto; }
#quick_contact textarea { height: 10.45em; }
#quick_contact label { display: block; float: none; font-size: 1.1em; padding-bottom: 5px; }
#quick_contact p { padding: 10px 0px; }

#right_column {width:281px;float:right}
