@charset "utf-8";
/* CSS Document */
/*
*file: styles.css
*Website: http://www.worldhairextensios.com 
*Author: Lloyd Solares
*URL: http://ms-designstudios.com
*Copyright (c) 2009  All right reserved.
*/ 

div, span, ul, li, img, p, button-live, button, input {border:0; padding:0; margin:0}
body {padding:0; margin:0; background:#ba9f90 url(../images/bg.jpg) repeat-x; color:#381d0e; font-family:Trebuchet MS; font-size:14px;}
h1 {font-size:18pt; color:#3b9975}
h2 {font-size:14pt; color:#503723; border-bottom:5px solid #6ec5a4; padding-bottom:4px; clear:both}
.h1 {font-size:15pt; color:#503723; border-bottom:5px solid #6ec5a4; padding-bottom:4px; clear:both}
h3 {color:#44291d; text-transform:uppercase; background:/*url(../images/bar.jpg) no-repeat;*/ text-indent:6px; width:648px; /*border-top:1px solid #8f7564;*/border-bottom:1px solid #8f7564; padding:2px 0 6px 0; font-size:11px; clear:both}
h5 {color:#44291d; text-transform:uppercase; background:/*url(../images/bar.jpg) no-repeat;*/ text-indent:6px; width:648px; border-top:1px solid #8f7564;border-bottom:1px solid #8f7564; padding:2px 0 6px 0; font-size:11px; clear:both}
#vcart {margin-bottom:-4px;}
#wraper {display:table; margin:0px auto; width:100%; background:url(../images/bg_h.jpg) top center repeat-y;}
#container {display:table; width:100%; background:url(../images/bottom.gif) bottom repeat-x; margin:0px auto}
#floatMenu {position:absolute; width:104px; padding:4px 0 4px 0; height:auto; top:300px; left:0px; background:none; border:0}
#floatMenu .button {float:left; display:block; cursor:pointer; padding:3px 0 0 0}
/*header styles*/
#top {display:block; margin:0px auto; height:212px; width:1200px; background:url(../images/top_bg.jpg) top center no-repeat;}
#header {display:block; margin:0px auto; width:980px; height:180px;}
.logo {display:block; float:left; margin:15px 0 0 30px; width:400px; height:140px; background:url(../images/logo.png) no-repeat}
.headlinks {float:left; display:block; margin:100px 0 0 140px; width:410px}
.logchat {float:left; margin-left:80px; display:block; width:auto; height:32px; padding-top:20px;}
#acct {margin-left:50px;}
.user {margin:20px 0 0 10px; color:#CCCCCC; display:block; float:left}
.icons {float:left; margin:-10px 0 0 14px}
.icons a {color:#ba9f90; text-decoration:underline; font:normal 10px verdana; text-align:left; line-height:1.2em}
.icons2 {float:right; margin:10px 14px 0 0; display:block}
.icons2 a {color:#ba9f90; text-decoration:underline; font:normal 10px verdana; text-align:left; line-height:1.2em}
.icons a:hover {color:#ececec; text-decoration:none}
/**navigation styles**/
#topnav {display:block; margin:0px auto; width:980px; height:40px;}
#topnav ul {list-style:none; padding-left:18px;}
#topnav ul li, #topnav ul li a {display:inline; text-decoration:none; font:bold 12px tahoma; color:#cab8ae; line-height:1.6em; text-align:center; padding:0 8px 0 8px;}
#topnav ul li a:hover {color:#ececec;}
/*main content styles*/
#content {display:table; margin:0px auto; width:980px; clear:both; padding-bottom:20px; background:#ececec url(../images/content_bg.jpg) top center no-repeat}
#row1 {float:left; display:block; width:976px; margin-left:1px; height:42px; border:solid 1px #9dd8c2}
#row2 {float:left; display:block; width:976px;}
.col_1 {float:left; display:block; width:670px; margin:12px 0 0 20px}
/*right pane styles*/
.col_2 {float:left; display:block; width:250px; margin:20px 0 0 20px}
.edu {float:left; display:block; width:236px; height:151px; margin:10px 0 0 7px; background:url(../images/hairedu.gif) no-repeat}
.edu_button {position:relative; top:7px; left:9px}
.cat {background:url(../images/rightnav_bg.gif) repeat-y; width:250px; display:block; float:left; margin-top:12px;}
.cat-name {display:block; float:left; background:url(../images/sidenav_title_bg.gif) no-repeat; width:250px; color:#ffee9c; padding-top:7px; text-indent:30px; font:bold 13px verdana; text-transform:uppercase}
.blog {display:block; clear:both; float:left; background:url(../images/newsletter.jpg) no-repeat; width:250px; margin-left:7px; height:160px; margin-top:12px; color:#ffee9c; text-indent:30px; font:bold 13px verdana; text-transform:uppercase}
.cat-name ul {list-style:none; padding:18px 0 12px 0; text-align:left; margin-left:7px;}
.cat-name ul li {border-bottom:1px solid #b9b3af; text-align:left; display:block; width:235px;}
.cat-name ul li a { color:#381d0e; text-transform:capitalize; font-weight:normal; text-decoration:none; line-height:2.2em; text-align:left;}
.blog .article {padding:90px 0 0 0; width:220px; margin-left:14px; text-indent:0px; display:block;}
.blog .article a {color:#000000; font-weight:normal; font-size:11px; text-decoration:none; text-align:left;}
.blog .article table {color:#000000; font-weight:normal; font-size:11px; text-decoration:none; text-align:left;}
.cat-name ul li a:hover {color:#398b64}
.blog .article input {background-color:#faefe9; color:#000000; border:1px solid #b69b8c; height:19px;}
#radio {background:none; border:none}
.date {color:#2b825e; text-decoration:none; font-weight:normal; font-size:11px; text-transform:capitalize}
.sideline {width:250px; display:block; background:url(../images/sideline.gif) bottom no-repeat; float:left; height:3px; clear:both}
.banner {margin:14px 0 0 7px; float:left}
.cards {margin:14px 0 0 14px; float:left}
.x-logo {margin:4px 0 0 4px; float:left}
/**content general styles**/
.welcome {display:block; width:650px;}
.crumbs {display:block; float:left; width:500px; margin-top:11px;}
.cart {display:block; float:left; width:auto; margin-top:8px; font-size:10px;}
.crumbs a{color:#705b50; font-size:11px; text-align:center; padding:12px 10px 10px 10px; text-decoration:none; border-right:1px solid #9dd8c2; line-height:1.8em}
.sec_links {color:#3b2011; font:normal 12px tahoma; text-align:right}
.sec_links a {color:#010101; font:normal 11px tahoma; text-decoration:underline} 
.section {font-size:12px; padding-top:8px; line-height:1.4em}
.button {float:right; margin-top:10px;}
.button_set {float:right;}
/**search styles**/
.search {float:right; display:block; width:240px; margin-right:8px; margin-top:4px; height:30px}
.search input {background-color:#faefe9; border:1px solid #b69b8c; height:21px;}
#search {margin-top:4px; vertical-align:bottom}
#go {cursor:pointer; margin-bottom:0px; vertical-align:bottom}
/**carousel**/
.photos {float:left; display:block; width:660px; height:110px; margin-top:12px;}
.photos IMG {float:left; margin-left:14px;}
#prev {vertical-align:middle; margin:40px 25px 0 0; cursor:pointer}
#next {vertical-align:middle; margin:40px 0 0 35px; cursor:pointer}
/**before and after**/
.before {float:left; display:block; width:100px; font-size:12px; color:#3b2011; font-weight:bold; margin-left:10px; text-indent:4px}
.after {float:left; display:block; width:200px; font-size:12px; color:#3b2011; font-weight:bold; text-indent:4px; margin-left:16px;}
.model1 {float:left; display:block; width:125px; font-size:12px; color:#3b2011; font-weight:bold; margin-left:10px; text-indent:4px}
.model2 {float:left; display:block; width:125px; font-size:12px; color:#3b2011; font-weight:bold; text-indent:4px; margin-left:30px;}
.context {float:left; margin-left:14px; display:block; width:300px; padding-top:14px;}

	/**customer gallery**/
div.content {
	/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
	display: none;
	float: right;
	width:400px;
	height:600px; 
}
div.content a, div.navigation a {
	text-decoration: none;
	color: #777;
}
div.content a:focus, div.content a:hover, div.content a:active {
	text-decoration: underline;
}
div.controls {
	margin-top: 5px;
	height: 20px;
}
div.controls a {
	padding: 0px 5px 0 5px;
}
div.ss-controls {
	float: left;
}
div.nav-controls {
	float: right;
}
div.slideshow-container {
	position: relative;
	clear: both;
	height: 600px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('../images/loader.gif');
	background-repeat: no-repeat;
	background-position: center;
	width: 400px;
	height: 600px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {
	position: absolute;
	top: 0;
	left: 0;
	width:400px;
	height:600px;
	overflow:hidden
}
/*div.slideshow span.image-wrapper {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
div.slideshow a.advance-link {
	display: block;
	width: 400px;
	height: 600px; /* This should be set to be at least the height of the largest image in the slideshow */
	/*line-height: 600px; /* This should be set to be at least the height of the largest image in the slideshow */
	/*text-align: center;
}*/
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
	text-decoration: none;
}
div.slideshow img {
	vertical-align: middle;
	position: relative;
	top: 0;
	left: 0;
	border: 1px solid #ccc;
}
div.banda {
	float: right;
	
}
div.banda a, {
	font-size:.8em;
	}
div.caption-container {
	position: relative;
	clear: left;
	height: 100px;
}
span.image-caption {
	display: block;
	position: absolute;
	width: 384px;
	top: 0;
	left: 0;
}
div.caption {
	padding: 20px 0 0 0;
}
div.image-title {
	font-weight: bold;
	font-size: 1.3em;
}
div.image-desc {
	line-height: 1.2em;
	font-size:12px;
	padding-top: 18px;
}
div.navigation {
	display:block;
	float:left;
	width:230px;
	margin-top:12px;
}
ul.thumbs {
	clear: both;
	margin: 0;
	padding: 0;
}
ul.thumbs li {
	float: left;
	padding: 0;
	margin: 4px 5px 4px 0;
	list-style: none;
}
a.thumb {
	padding: 2px;
	display: block;
	border: 1px solid #ccc;
}
ul.thumbs li.selected a.thumb {
	background: #966c59;
}
a.thumb:focus {
	outline: none;
}
ul.thumbs img {
	border: none;
	display: block;
}
div.pagination {
	clear: both;
}
div.navigation div.top {
	margin-bottom: 12px;
	height: 11px;
}
div.navigation div.bottom {
	margin-top: 12px;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
	display: block;
	float: left;
	margin-right: 2px;
	padding: 4px 7px 2px 7px;
	border: 1px solid #ccc;
}
div.pagination a:hover {
	background-color: #eee;
	text-decoration: none;
}
div.pagination span.current {
	font-weight: bold;
	background-color: #966c59;
	border-color: #966c59;
	color: #fff;
}
div.pagination span.ellipsis {
	border: none;
	padding: 5px 0 3px 2px;
}

/**suggested products**/
.s_prod {float:left; display:block; width:100px; height:190px; margin-top:12px; font-size:12px; text-align:center; padding:0 8px 0 18px; color:#3b2011; font-weight:bold;}
.cards {margin:0 0 -8px 5px;}
/*footer styles*/
#footer {display:table; margin:0px auto; width:980px; padding:20px 0 10px 0}
.footlinks, .footlinks a{text-align:left; font:normal 10px tahoma; color:#dec5b7; text-decoration:none; padding:10px 26px 0 0; text-transform:uppercase}
.credits {text-align:left; font-size:10px; color:#ba9f90;}
.credits a {text-decoration:underline; font:normal 11px tahoma; color:#dec5b7;}

/*btn:: Controls the buttons*/ 
.btn
{
	border-top: 1px solid #dcdbdc;
	border-bottom: 1px solid #dcdbdc;
	border-left: 1px solid #dcdbdc;
	border-right: 1px solid #dcdbdc;
	background:  #009E6F;
	font-family: arial, Helvetica, sans-serif;
	font-weight: bold;
	style="width:300px; height:20px; padding:0 85px;"
	font-size: 14pt;    
	color: #ffffff;
	cursor: pointer;
	margin:3px;
} 

/*btn_over:: Controls the buttons*/ 
.btn_over
{
	border-top: 1px solid #dcdbdc;
	border-bottom: 1px solid #dcdbdc;
	border-left: 1px solid #dcdbdc;
	border-right: 1px solid #dcdbdc;
	background:  #00c1e1;
	font-family: arial, Helvetica, sans-serif;
	font-weight: bold;
	style="width:300px; height:20px; padding:0 85px;"
	font-size: 14pt;    
	color: #ffffff;
	cursor: pointer;
	margin:3px;
}

/*dropdown*/
.dropmenudiv_a{
position:absolute;
top: 0px;
margin-top:6px;
padding:7px 0;
font:normal 11px Tahoma;
line-height:18px;
z-index:100;
width: 200px;
visibility: hidden;
}

.dropmenudiv_a a{
width: auto;
display: block;
text-indent: 16px;
background: #6f5441;
padding: 2px 0;
text-decoration: none;
color: white;
}

#dropmenu1_a .curve, #dropmenu2_a .curve, #dropmenu3_a .curve, #dropmenu4_a .curve, #dropmenu5_a .curve {
width: 200px;
cursor:text;
height:7px;
margin-top:-4px;
display: block;
}

* html .dropmenudiv_a a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv_a a:hover{ 
background: #bfa991;
color: #583b2d;
}

/*txtBoxStyle:: Controls the text boxes*/  	
.txtBoxStyle
{
	border-top: 1px solid #b3b4b5;
	border-bottom: 1px solid #b3b4b5;
	border-left: 1px solid #b3b4b5;
	border-right: 1px solid #b3b4b5;
	background-color: #f5f4f2;
	font-family: arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 11px;    
	color: #38393a;
} 
	
/*txtareaStyle:: Controls the text areas*/ 	
.txtareaStyle
{
	border-top: 1px solid #C7D5E0;
	border-bottom: 1px solid #C7D5E0;
	border-left: 1px solid #C7D5E0;
	border-right: 1px solid #C7D5E0;
	background-color: #FBFBFB;
	font-family: arial, Helvetica, sans-serif;
	font-weight: normal;;
	font-size: 11px;    
	color: #343333;
	height : 80px;
	width: 250px;
}
/*data:: Controls body default fonts and colors*/
.data
{
	font-family:Verdana, Arial, Helvetica, sans-serif
	font-size:12px;
	font-weight: normal;
	color: #3e404a;
}

.prvnxt
{
	font-family:Verdana, Arial, Helvetica, sans-serif
	font-size:9px;
	font-weight: normal;
	text-decoration:underline; 
	color: #3e404a;
}

/* testimonials form*/
table#testimonials {font:normal 12px verdana;}
#testimonials td input.buttontesti {background:url(../images/submit_testi.gif) no-repeat; text-indent:-9999px; width:79px; height:27px; cursor:pointer}
#testimonials td input.checkout {background:url(../images/chk-out.gif) no-repeat; text-indent:-9999px; width:79px; height:27px; cursor:pointer}
#testimonials td textarea {border:1px solid #6ec5a4}
#testimonials td select.field_dd, #testimonials span select.field_dd {border:1px solid #6ec5a4; font-size:12px}
#testimonials td input.field {border:1px solid #6ec5a4; font-size:11px}

.font5 
{
	font-family:Verdana, Arial, Helvetica, sans-serif
	font-size:12px;
	font-weight: normal;
	color:#FF0000;
}