/******************************************************
*
Theme Name: Sophisticate's Hairstyle Guide
Theme URI: http://www.associatedpub.com/
Description: SHG Wordpress theme created Jennie Thai 
Author: Jennie Thai, jennie.thai@gmail.com
Author URI: http://jenniethai.emurse.com/
Version: 1.0
Tags: 960gs, fixed width, hair magazine
*
Last modified: September 16, 2011 
*
*
	SHG template created for Associated Publications, Inc. All rights reserved.
*
*
	Table of Contents:
	I. General Styles For Use THROUGHOUT SHG Website
	II. Header Styles
	III. Main Navigation Styles
	IV. Rollover Menu Navigation Styles
	V. Left Column Styles
	VI. Footer Styles
	VII. Front Page Styles
	VIII. Comments Section Styles
	IX. Form Elements Styles
	X. Horoscopes Styles
*
*
******************************************************/
/* -- By  Slade --*/
/*-----------------------------------
 		GENERAL STYLES 
-----------------------------------*/

div.spacer{  
     height: 1em;  
}
p.credit{
	font-size:xx-small;
}
div#content h1.title{ /* THIS IS THE ARTICLE TITLE WITH A LEVEL-ONE HEADING */
	padding-left: 31px;
	margin: 2px 2px 2px 2px;
	background: url(img/pflower-title.jpg) no-repeat 3px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bolder;
	text-transform: uppercase;
}
div#content h1, div#content h2, div#content h3, div#content h4, div#content h5, div#content h6{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bolder;
	margin-bottom:3px; /* THIS MARGIN MAKES THE BOTTOM HARD RETURN SMALLER */
}
p.pinkspan {
	width:100%;
	height:2px;
	margin:0;
	color: #FFFFFF;
	border-bottom:dotted 4px #DF007A;
}
h5.talkbackspan { /* THIS IS THE TALK BACK BAR IN LEVEL-FIVE HEADING */
	padding: 2px 0px 8px 33px; /* clockwise */
	margin: 2px 2px 2px 2px; /* clockwise */
	color: #FFFFFF;
	width: 487px; /* 520px minus 33px */
	height:19px;
	background: url(img/bw-flower.jpg) no-repeat #000000;
}
div.navigation {
	display: block;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 60px;
}
.alignright {
	float: right;
}
.alignleft {
	float: left
}
.center{
	text-align:center;
}
img.alignright{
	margin-left: 4px;
}
img.alignleft{
	margin-right:4px;
}
img.blkframe{
	border: 2px solid #000000;
}
.pink{
	color:#FF0099;
}
.red{
	color:#FF0033;
}
.darkred{
	color:#660033;
}
.purple{
	color:#660099;
}
.white{
	color:#FFFFFF;
}
.orange{
	color:#FF3300;
}
.teal{
	color:#009999;
}
.merlot{
	color:#990000;
}
.brown{
	color:#660000;
}
.gold{
	color:#996633;
}
.blue{
	color:#0033FF;
}
.celebchatgradbg{ /* SBH CELEB CHAT GRADIENT */
	background: url(bg/gradient1.png) repeat-x;
	padding: 10px;
}
.goldgradbg{ /* GOLD GRADIENT BACKGROUND */
	background: url(bg/996633_3.jpg) repeat-x;
	padding: 10px;
}
.shortgoldgradbg{ /* USED FOR STAR MANES PAGES */
	background: url(bg/996633_2.jpg) repeat-x;
	padding: 10px;
}
.purplegradbg{
	background: url(bg/660099_2.jpg) repeat-x;
	padding: 10px;
}
.tealgradbg{
	background: url(bg/009999_2.jpg) repeat-x;
	padding: 10px;
}
.orangegradbg{
	background: url(bg/FF3300.jpg) repeat-x;
	padding: 10px;
}
.merlotgradbg{
	background: url(bg/990000_1.jpg) repeat-x;
	padding: 10px;
}
.darkredgradbg{
	background:url(bg/660033.jpg) repeat-x;
	padding: 10px;
}
.shortmerlotgradbg{
	background: url(bg/990000_2.jpg) repeat-x;
	padding: 10px;
}
.pinkgradbg{
	background: url(bg/FF0099_3.jpg) repeat-x;
	padding: 10px;
}
.bluegradbg{
	background: url(bg/0033FF_3.jpg) repeat-x;
	padding: 10px;
}
.shortbluegradbg{
	background: url(bg/0033FF_1.jpg) repeat-x;
	padding: 10px;
}
.redgradbg{
	background: url(bg/FF0033_1.jpg) repeat-x;
	padding: 10px;
}
.browngradbg{
	background: url(bg/660000.jpg) repeat-x;
	padding: 10px;
}
.width160{
	width:160px;
}
.width230{
	width:230px;
}
.width240{
	width:240px;
}
.width245{
	width:245px;
}
.width250{
	width:250px;
}
.width275{
	width:275px;
}
hr.dashed { 
	border:none 0; 
	border-top:1px dashed #000000;
	border-bottom:1px dashed #cccccc;
	height:2px;
}
.lightpinkbg{
	background-color: #FFCCFF;
	padding: 5px;
}
.bemailbox{ /* BEAUTY E-MAIL BOX */
	color: #FFFFFF;
	background-color: #660000; /* BROWN */
	padding: 5px;
}
.celebadvicebox{ /* CELEB ADVICE BOX */
	color: #FFFFFF;
	background-color: #CC0033; /* RED */
	padding: 5px;
}
.top{
	position:relative;
	z-index:400; /* MAIN NAV HAS A Z-INDEX OF 500 */
}
.bottom{
	position:relative;
	z-index:-500;
}
.rec245box{
	width: 50px;
	height: 240px;
	margin-left:-60px;
	margin-right:10px;
	z-index: -100;
}
a.fb{ /* THIS IS THE LINK COLOR FOR FACEBOOK ON THE RIGHT COLUMN */
	color:#000000;
	font-weight:bold;
}

/*----------------------------------- 
	 HEADER STYLES
-----------------------------------*/

div#header_ad{
	/*border-top: 3px solid #FFFFFF;*/
	background-color:#FFFFFF;
	/*border-bottom: 10px solid #FFFFFF;*/
}

/*-----------------------------------
	 LEFT COLUMN STYLES
------------------------------------*/
 
div.left_col div.title{ 
	border:solid 1px #000000;
	background-color: #990000;
}
div.left_col div.title p{ /* the font styles here apply to WHAT'S INSIDE title */
	margin: 10px;
	color:#FFFFFF;
	font-size:large;
	font-weight:bold;
	text-align:center;
}
div.left_col div{ 
	border: solid 1px #000000;
	background-color:#EFEFEF;	
}
div.left_col div p{ /* the styles here apply to the WHAT'S INSIDE excerpts */
	margin: 10px;
	color:#000000;
	font-size:.9em;
	font-weight:normal;
}
div.left_col div a{
    color: #990000; /*red to match the title bg color IN THIS ISSUE left col*/
	font-size:14px;
	font-weight:bold;
	text-transform: uppercase;
}
div.left_col div a:hover{
    text-decoration:underline;
}

/*----------------------------------- 
 	FOOTER STYLES 
-----------------------------------*/

div#footer{
	border-top: 3px solid #333333;
	padding: 10px 0;
	background-color:#CCCCCC;
	border-bottom:15px solid #CCCCCC;
}
div#footer a,
div#footer a:hover{
	color:#333333;
	text-decoration:none;
}
div#footnavbar{
	background-color:#CCCCCC;
	padding: 5px 0;
	color:#666666;
	font-size:x-small;
}
div#footnavbar ul{
	list-style: none;
	display:block;
	width:640px; /* give a width for menu */
	margin:auto; /* browser automatically centers menu */
	position:relative;
	text-align:center;
}
div#footnavbar ul li{
	float:left;
	margin: 0 .5em;
	font: bold x-small Arial;
}
div#footnavbar li a {
	display:block;
	color:#333333;
	text-decoration:none;
}
div#footnavbar ul li a:hover {
	color:#0000FF; /* hover blue*/
	font-weight:bold;
}
div#footnavbar ul li a.active,
div#footnavbar ul li a.active:hover {
	color:#000000;
	font-weight:bold;
}
div#footer_ad{
	background-color:#CCCCCC;
	border-bottom:10px solid #CCCCCC;
}

/*----------------------------------- 
 	FRONT PAGE STYLES 
-----------------------------------*/

div.covergirl{
	float:left;
	border:solid 1px #000000;  /*border around Cover and Welcome Message */
	padding: 5px;
}
div.covergirl div{
	margin: 0 5px 0 0; /* Space between Cover and Welcome Message */ /* clockwise */
}
div.welcome{
	margin: 10px;
	color:#000000;
	font-size:small;
	font-weight:normal;
}
div.welcome div{
	margin: 0px; /*Space between top of box and Welcome Message */
}
h5.featuredhomespan {
	padding: 5px 5px 5px 5px; /* clockwise */
	color: #FFFFFF;
    width:510px;
	height:20px;
	background-color: #000000;
}
.feedback a{
	color:#FF0099;
	font-weight:bold;
}

/*----------------------------------- 
	 COMMENTS SECTION STYLES 
-----------------------------------*/

h4.comments {
	padding: 0;
	margin: 40px auto 20px ; 
}
.commentlist {
	padding: 1em;
	text-align: justify;
}
.commentlist li {
	margin: 1em;
	list-style: none;
}
.commentlist li > div {
	background: #FCDFFF;
		background: -webkit-gradient(linear, 0 0, 0 0, from(#FCDFFF), to(#F5F5F5));
		background: -moz-linear-gradient(top, #FCDFFF, #F5F5F5);
	padding:1em 1.5em; 
	position:relative;
   margin:1em auto;
   /*--begin paper style cut --*/
   -webkit-border-bottom-left-radius: 20px 500px;
	-webkit-border-bottom-right-radius: 500px 30px;
	-webkit-border-top-right-radius: 5px 100px;
	
	-moz-border-radius-bottomleft: 20px 500px;
	-moz-border-radius-bottomright: 500px 30px;
	-moz-border-radius-topright: 5px 100px;	
	
	border-radius-bottomleft: 20px 500px;
	border-radius-bottomright: 500px 30px;
	border-radius-topright: 5px 100px;
	
	-webkit-box-shadow: -2px 5px 8px rgba(0,0,0,.2); 
	-moz-box-shadow: -2px 5px 8px rgba(0,0,0,.2); 
	box-shadow: -2px 5px 8px rgba(0,0,0,.2); 
	/*--end paper style cut--*/
}
.commentlist li > div:before{ /* this is the folded corner */
	content:"";
   position:absolute;
   top:0;
   right:0;
   border-width:0 16px 16px 0;
   border-style:solid;
   border-color:#FF66CC #FFF;
   background:#FF66CC;
   -webkit-box-shadow:-1px 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   -moz-box-shadow:-1px 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   box-shadow:-1px 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   display:block; width:0; /* Firefox 3.0 damage limitation */
}

.commentlist li ul li { 
	margin-right: -1em;
	margin-left: 2em;
}
.commentlist p {
	margin: 1em;
}
.children { /* This is the nested thread */
	padding: .5em; 
}
#commentform p {
	margin: 1em;
}
.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
}
.commentmetadata {
	margin: 1em;
	display: block;
}
.commentlist li .avatar { 
	float: right;
}
cite{ /* This is the author's name */
	font-weight: bold;
	color: #FF0099;
}
.commentmetadata { /* This is the date and time of the comment posted */
	background: url(bg/bg_clock.gif) no-repeat;
	padding-left:2em;
	font: italic bold smaller Arial, sans-serif;
}

/*-----------------------------------
	 FORM ELEMENTS STYLES
-----------------------------------*/

#searchform {
	margin: 10px auto; /* top-bottom left-right */
	padding: 5px 3px; /* top-bottom left-right */
	text-align: center;
}
#sidebar #searchform #s {
	width: 108px;
	padding: 2px;
}
#sidebar #searchsubmit {
	padding: 1px;
}
.entry form { /* This is mainly for password protected posts, makes them look better. */
	text-align:center;
}
select {
	width: 130px;
}
#commentform input {
	width: 170px;
	padding: 2px;
	margin: 5px 5px 1px 0; /* clockwise */
}
#commentform {
	margin: 5px 10px 0 0; /* clockwise */
}
#commentform textarea {
	width: 100%;
	padding: 2px;
}
#respond:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
#commentform #submit {
	margin: 0 0 5px auto; /* clockwise */
	float: right;
}

/*----------------------------------- 
	 HOROSCOPES STYLES
-----------------------------------*/

.astrobox{
	width: 80px;
	height: 80px;
	float:left;
	z-index: 100;
}
.astroimg{
	margin-top:5px;
	margin-left:-75px;
	float:left;
}
.redbg{
	background-color:#FF0033;
	padding: 10px;
}
.bluebg{
	background-color:#0033FF;
	padding: 10px;
}
.orangebg{
	background-color:#FF3300;
	padding: 10px;
}
.pinkbg{
	background-color:#FF0099;
	padding: 10px;
}
.goldbg{
	background-color:#996633;
	padding: 10px;
}
.purplebg{
	background-color:#660099;
	padding: 10px;
}
.brownbg{
	background-color:#660000;
	padding: 10px;
}
.merlotbg{
	background-color:#990000;
	padding: 10px;
}
.tealbg{
	background-color:#009999;
	padding: 10px;
}
.astrogoldgradbg{
	background: url(bg/astro996633.jpg) repeat-x;
	padding: 10px;
}
.astropurplegradbg{
	background: url(bg/astro660099.jpg) repeat-x;
	padding: 10px;
}
.astrotealgradbg{
	background: url(bg/astro009999.jpg) repeat-x;
	padding: 10px;
}
.astroorangegradbg{
	background: url(bg/astroFF3300.jpg) repeat-x;
	padding: 10px;
}
.astromerlotgradbg{
	background: url(bg/astro990000.jpg) repeat-x;
	padding: 10px;
}
.astropinkgradbg{
	background: url(bg/astroFF0099.jpg) repeat-x;
	padding: 10px;
}
.astrobluegradbg{
	background: url(bg/astro0033FF.jpg) repeat-x;
	padding: 10px;
}
.astroredgradbg{
	background: url(bg/astroFF0033.jpg) repeat-x;
	padding: 10px;
}
.astrobrowngradbg{
	background: url(bg/astro660000.jpg) repeat-x;
	padding: 10px;
}

/*-----------------------
  	 HAIR TIP 
-----------------------*/

div#hairtip1{
	background: url(img/tip1.jpg) no-repeat;
	height: 512px;
	padding: 10px 10px 10px 10px;
	font: bold 14pt Helvetica;
}

div#hairtip2{
	background: url(img/tip2.jpg) no-repeat;
	height: 520px;
	padding: 10px 10px 10px 10px;
	font: bold 14pt Helvetica;
}

div#hairtip1 h3{ /* THIS IS THE DATE */
	font: bold 28pt Helvetica;
}

div#hairtip2 h3{ /* THIS IS THE DATE */
	font: bold 28pt Helvetica;
}

/*-----------------------
  	 SHEAR GENIUS 
-----------------------*/

div#chatamy{
	background: url(img/amy1.jpg) no-repeat;
	height: 807px;
	padding: 100px 10px 10px 10px; /* clockwise */
	font: bold 12pt Helvetica;
}

div#amysecrets{
	background: url(img/amy2blue.jpg) no-repeat;
	height: 574px;
	padding: 80px 10px 10px 10px;
	font: bold 14pt Helvetica;
}