@charset "utf-8";
/* CSS Document */

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {	
	color: #FFFFFF;
	font-family: Verdana, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	background: #000;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

object:focus { outline:none; }

/*****************/

.page { width: 940px; height: 690px; padding: 0 20px; margin: 0 auto; background: none; color: #FFFFFF; font-family: 'Ropa Sans', sans-serif; font-size: 12px; line-height: 14px; }
.page .header { width: 940px; height: 75px; padding: 35px 0 60px 0;}

.content { width: 940px; height: 515px; background: #090e18; position: relative; }
.content .header { text-align: center; width: 940px; height: 30px; padding: 20px 0 30px 0; }
.floatBox { float: left; margin: 0 20px 0 0; }
.row { text-align: center; padding: 20px 0 0 0; }
.block { display: inline-block; }

.content p { text-align: left; line-height: 20px; }

.floatImage { float: left; margin: 5px 10px 5px 0; }
.iconList img { margin: 0 0 5px 0; }

.formBox { background: #3c8dA0; width: 360px; height: 360px; padding: 20px; }

.rounded-corners {
     -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

input, textarea { width: 100%; }
form .row { margin: 0 0 10px 0; padding: 0; }
form p { margin: 0 0 5px 0; }

.nameField { float: left; width: 170px; text-align: left; margin: 0 10px 0 0; }
.emailField { width: 350px; }
.sendButton { text-align: right; }

p { margin: 0 0 20px 0; background: none; }

.tiny { font-size: 10px; text-align: left; margin: 10px 0 0 0; }

.nav { width: 764px; height: 75px; margin: 0; float: left; }
.nav .nav_left { width: 12px; height: 60px; background: url(../image/nav-left.png) no-repeat; float: left; margin: 8px 0 0 0; }
.nav .nav_right { width: 12px; height: 60px; background: url(../image/nav-right.png) no-repeat; float: left; margin: 8px 0 0 0; }
.nav .nav_separator { width: 30px; height: 62px; background: url(../image/nav-separator.png) no-repeat; float: left; margin: 7px 0 0 0; }
.nav .button { float: left; margin: 28px 0 0 0; }

.nav .about { width: 60px; height: 20px; background: url(../image/about.gif) no-repeat 0px 0px; overflow: hidden; cursor: pointer; margin-right: 10px; }
.nav .about:hover { background: url(../image/about.gif) no-repeat 0px -20px; }

.nav .colorTherapy { width: 130px ; height: 20px; background: url(../image/colorTherapy.gif) no-repeat 0px 0px; overflow: hidden; cursor: pointer; }
.nav .colorTherapy:hover { background: url(../image/colorTherapy.gif) no-repeat 0px -20px; }

.nav .chromaTherapy { width: 140px ; height: 20px; background: url(../image/chromaTherapy.gif) no-repeat 0px 0px; overflow: hidden; cursor: pointer; }
.nav .chromaTherapy:hover { background: url(../image/chromaTherapy.gif) no-repeat 0px -20px; }

.nav .contact { width: 80px ; height: 20px; background: url(../image/contact.gif) no-repeat 0px 0px; overflow: hidden; cursor: pointer; }
.nav .contact:hover { background: url(../image/contact.gif) no-repeat 0px -20px; }

.nav .interiors { width: 80px ; height: 20px; background: url(../image/interiors.gif) no-repeat 0px 0px; overflow: hidden; cursor: pointer; }
.nav .interiors:hover { background: url(../image/interiors.gif) no-repeat 0px -20px; }

.nav .products { width: 80px ; height: 20px; background: url(../image/products.gif) no-repeat 0px 0px; overflow: hidden; cursor: pointer; margin-left: 10px; }
.nav .products:hover { background: url(../image/products.gif) no-repeat 0px -20px; }

.logo { float: left; width: 166px; height: 75px; margin: 0 0 0 10px; }
.logo img { float: left; }
.logo .tag { float: left; font-size: 10px; width: 81px; color: #FFFFFF; margin: 0 0 0 10px; }

.centerColumn { text-align: center; width: 400px; line-height: 20px; margin: 30px 0 0 58px; float: left; background: none; }
.centerColumn p { text-align: center; }

.light { float: left; margin: 156px 0 0 58px; background: none; }
.light .image { width: 144px; height: 207px; overflow: hidden; }
.light .on { background: url(../image/on.jpg) no-repeat 0 0; }
.light .on:hover { background: url(../image/on.jpg) no-repeat 0 -207px; }
.light .off { background: url(../image/off.jpg) no-repeat 0 0; }
.light .off:hover { background: url(../image/off.jpg) no-repeat 0 -207px; }
.light .caption { margin: 10px 0 0 0; width: 144px; text-align: center; background: none;}

.slideShow { width: 940px; height: 515px; background: #090E18; margin: 0 auto; padding: 0; display: none; }
.slideShow .left { width: 390px; margin: 0 10px 0 20px; float: left; }
.slideShow .right { width: 480px; margin: 0; float: left; }
.slideShow .header { margin: 0 0 10px 0; width: 380px; height: auto; padding: 0; }
.slideShow .header .line { text-align: center; font-size: 12px; margin: 0 0 8px 0; }
.slideShow .header .top { background: url(../image/slides/headerTop.jpg); width: 360px; height: 14px; margin: 0 0 10px 0; }
.slideShow .header .bottom { background: url(../image/slides/headerBottom.jpg); width: 360px; height: 14px; margin: 10px 0 0 0; }

.slideShow .thumb { float: left; width: 90px; height: 100px; margin: 0 8px 2px 0; font-size: 10px; text-align: center; cursor: pointer; }
.slideShow .thumb:hover { background: #7cbfd0; }
.slideShow .thumb.last { margin: 0; }
.slideShow .thumb img { margin: 2px 0 10px 0; }
.slideShow .button { cursor: pointer; float: left; width: 30px; height: 500px; margin: 0; padding: 0; }
.slideShow .button.left { background: url(../image/slides/buttonLeft.jpg); }
.slideShow .button.right { background: url(../image/slides/buttonRight.jpg); }
.slideShow .slideContainer { float: left; width: 420px; height: 500px; overflow: hidden; position: relative; }
.slideShow .slideContainer .slide { position: absolute; left: 420px; }
.slideShow .slideContainer .slide .caption { height: 35px; text-align: center; font-size: 12px; margin: 15px 0 0 0; }
.slideShow .slideContainer .slide .caption .line { text-align: center; font-size: 12px; margin: 0 0 8px 0; }

.slideShow .thumbContainer { width: 384px; height: 306px; overflow: hidden; position: relative; }
.slideShow .thumbContainer .thumbSet { width: 384px; height: 306px; position: absolute; left: -384px; }

.slideShow .setNav { width: 100%; margin: 10px 0 0 0; text-align: center; }
.slideShow .setNavBtn { border: 1px solid white; width: 14px; height: 18px; margin: 0 0 0 5px; float: left; line-height: 18px; text-align: center; font-size: 10px; cursor: pointer; }
.slideShow .setNavBtn.selected { cursor: auto; background-color: #7cbfd0; }

#progress_box { width: 160px; height: 25px; position: absolute; top: 238px; left: 395px; background-color: #333333; }
#progress_field { position: absolute; width: 150px; height: 25px; color: #FFFFFF; padding: 5px; font-size: 10px; font-weight: bold }
#progress_bar { position: absolute; width: 0px; height: 25px;  background-color: #7cbfd0; }

.footerContainer { margin: 10px 0 0 0; }
.footer { display: block;  font-size: 10px; float: left; line-height: 20px; }
.socialContainer { float: right; }
.socialContainer img { margin: 0 0 0 3px; }