/*
Theme Name: Ymay Hair Studio
Theme URI: http://ymayhairstudio.com
Description: Ymay Hair Studio
Version: 3.0
Author: Eric Skilling
Author URI: http://tiptaptip.com
*/


/* RESET */
/* ----------------------------------------- */

/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}
ol, ul, li{ list-style-type: none;}
/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight:bold }
em { font-style:italic }
a img { border:none } /* Gets rid of IE's blue borders */




/* TYPOGRAPHY */
/* ----------------------------------------- */

body{
	font-size: 14px;
	background: #cf1822;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	}


a{
	color: #4a2812;
	text-decoration: none;		
	}

a:hover{
	color: #4a2812;
	text-decoration: underline;		
	}


h1, h2, h3, h4, h5, h6 { font-weight:bold } /* This helps to identify headings at the initial build stage, so I thought it'd be useful to have it */
.alert { background:red; color:white } /* 'alert' has a basic style, since it's useful to have it standing out for testing purposes.

/* LAYOUT */
/* ----------------------------------------- */

/* These rather presentational classes are generated by WordPress, so it's useful to have some styles for them. Edit as you see fit. More info: http://codex.wordpress.org/CSS */
.aligncenter { display:block; margin:0 auto }
.alignleft { float:left }
.alignright { float:right }
.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px }


#wrapper {
	margin: 0 auto;
  	width:950px;
}


#pageheader{
	float: left;
	height: 87px;
	margin: 5px 0px 5px 0px;
	}

.frontimage{
	float: left;
	margin: 5px 0px 0px 0px;	
	}


#slide_frame{
	float: left;
	border: 1px solid #cc33cc;
	height: 800x;
	}

#content{
	float: left;
	width: 890px;
	min-height: 500px;
	background: #eee;
	padding: 30px;
	margin: 0px 0px 0px 0px;	
	}

#content h1{
	color: #cf1822;
	font-size: 22px;
	border-bottom: 1px solid #cf1822;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 5px 0px;
	}

#content p{
	margin: 0px 0px 10px 0px;
	}



#content .bio img{
	float: left;
		border: 1px solid #cf1822;	
	padding: 5px;
	margin: 0px 10px 10px 0px; 
	}

#content .biotext{
	float: right;
	width: 560px;	
	}

#content .portfolioheader{
	width: 950px;
	height: 40px;
	background: #666666 url(images/portfolioheader.png) ;
	float: left;		
	margin: 15px 0px 15px -30px;
	}

#content .portfolio{
	float: left;
	width: 890px;
	}

#content .products img, #content .community img{
			border: 1px solid #cf1822;	
	padding: 5px;
	margin: 0px 10px 0px 0px;
	}


#content .media h1, #content .community h1{
	float: left;
	width: 890px;
	margin: 20px 0px 20px 0px;
	}

#content .video{
	float: left;
	margin: 0px 0px 15px 0px;
	}

#content .mediatext{
	float: right;
	}


#content .questions{
	float: left;
}

#content .questions li{
	float: left;
	width: 260px;
	margin: 20px 20px 20px 0px;
	}

#content .pricelist{
	
		-moz-column-count: 2;
	-moz-column-gap: 20px;
	-webkit-column-count: 2;
	-webkit-column-gap: 20px;
	column-count: 2;
	column-gap: 20px;

	
	padding: 30px 50px 30px 50px;	
	line-height: 25px;
}

#content .pricelist h1{
	margin: 10px 0px 10px 0px;
}

#content .pricelist h2{
	float: left;
	margin: 10px 0px 10px 0px;
	border-top: 1px dotted #cf1822;
	padding: 15px 0px 15px 0px;
}


#content .event{
	float: left;
	margin: 0px 0px 20px 0px;	
	}

#content .event h1{
		width: 890px;
	margin: 0px 0px 20px 0px;	

	}

#content .event img{
	border: 1px solid #cc33cc;
	float: left;
			border: 1px solid #cf1822;	
	padding: 5px;
	margin: 0px 10px 0px 0px;	
	}


#values{
	float: left;
	width: 910px;
	background: #eee;
	padding: 20px;

}


#values .imagebox {
	float: left;
	clear: both;
	margin: 10px 20px 20px 25px;
}	
	

#values .imagebox img{
	float: left;
	border: 1px solid #cf1822;	
	padding: 5px;
	margin: 10px 20px 10px 20px;
}	
	
#values h1 {
	font-size: 24px;	
	color: #cf1822;
		border-bottom: 1px solid #cf1822;	

	margin: 0px 0px 15px 40px;
}

#values .list{
	float: left;
	margin: 0px 0px 0px 0px;
	
	
	}
	

#values .list ol{
	float: left;
	width: 780px;
	margin: 0px 0px 10px 40px;
	list-style-type: decimal;
		
					-moz-column-count: 2;
	-moz-column-gap: 20px;
	-webkit-column-count: 2;
	-webkit-column-gap: 20px;
	column-count: 2;
	column-gap: 20px;

}

#values .list li{
	margin: 0px 0px 10px 30px;
		list-style-type: decimal;

	}


#footer{
	float: left;
	width: 910px;
	color: #000;
	font-size: 16px;
	font-weight: bold;
	background: #666666 url(images/footer.png)  top left;

		

	padding: 20px;	
	
		/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	
	margin: 5px 0px 20px 0px;

	}

#footer .icons{
	float: right;
	margin: 0px 20px 0px 20px;
	}

#footer img{
	margin: 0px 10px 0px 0px;	
}

#footer p{
	float: right;	
	text-align: center;
	margin: 0px 110px 0px 0px
	}

ul#topnav {
	margin: 20px 0px 0px 0px; 
	padding: 0;
	float: left;
	width: 950px;
	list-style: none;
	position: relative; 
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: bold;
	border-bottom: 5px solid #fff;

}
ul#topnav li {
	float: left;
	height: 35px;
	margin: 0; 
	padding: 30px 0px 0px 0px;
	
}
ul#topnav li a {
	padding: 10px 10px;
	display: block;
	color: #f0f0f0;
	text-decoration: none;
}


ul#topnav li.home { 
	height: 65px;
	padding: 0px;
	float: left;

		}



ul#topnav li.home:hover { 
	background:  none;

		}




ul#topnav li:hover { 
	background:  url(images/navhover.png) no-repeat  top center;

		}



ul#topnav li span {
	float: left;
	padding: 15px 0;
	position: absolute;
	right: 0; 
	margin: 0px 20px 0px 20px;
	top: 65px;
	display: none; /*--Hide by default--*/
	min-width: 500px;
	font-size: 10px;
	font-weight: normal;

	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 0, 0);
	/* RGBa with 0.6 opacity */
	background: rgba(0, 0, 0, 0.9);

	color: #fff;
	
			/*--Top right rounded corner--*/
	-moz-border-radius-topright: 5px;
	-khtml-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	/*--Top left rounded corner--*/
	-moz-border-radius-topleft: 5px;
	-khtml-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
	
	
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; } 
ul#topnav li span a { 
	display: inline; 
	float: left;
	border-right: 1px dotted #fff;
	padding: 5px 15px 5px 15px;
} 
ul#topnav li span a:hover {text-decoration: underline;}






/* You might find the following useful */
/* div, ul, li { position:relative } This will save you having to declare each div / ul / li's position as 'relative' and allows you to absolutely position elements inside them */
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */
li#theme-switcher { background:#fff; border:10px solid red; padding:20px; position:fixed; top:0; right:0 } /* Use this if you have the Theme Switcher Reloaded plugin (http://themebot.com/webmaster-tools/1-wordpress-theme-switcher-reloaded) installed and want to make it nice and obvious */