/* =reset (ONLY EDIT THE FONT FAMILY)******************************** */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,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,var{font-style:normal;font-weight:normal;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
body {font:13px arial,helvetica,clean,sans-serif;}
table {font-size:inherit;font:100% arial,helvetica,clean,sans-serif;}
select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}
pre, code {font:115% monospace;}
body * {line-height:1.22em;}

/* =elements ***************************** */

a:link		{color: #0000ff;}

a:active	{color: #0000ff;}

a:visited	{color: #0000ff;}

a:hover		{color: #0000ff; text-decoration: none;}

/* =grids ***************************** */

html {text-align:center; height: 100%; margin: 0;}
body {text-align:left; background: #ffffff; height: 100%; margin: 0;}

.outer {width:100%; margin: 0;}

#topbarout {width: 100%; background: #3B5998; border-bottom: 1px solid #FF00FF;}
#topbarin {width: 950px; text-align: right; color: #ff00ff; padding: 10px; margin: auto; background: transparent;}
#topbarin a {color: #ffffff; background: transparent;}
#topbarin a:hover {color: #ff00ff; background: transparent;}

#header {width: 950px; margin: auto; background: #ffffff; text-align: center; padding: 3px;}
#topbarin h1 {float: left; color: #ffffff; font-size: 22px; font-weight: bold; text-decoration: none;}
#topbarin h1 a {color: #ffffff; font-size: 22px; font-weight: bold; text-decoration: none;}
#topbarin h1 a:hover {color: #ffffff; text-decoration: none;}

#topnav {width: 950px; text-align: center;}
.navsmall {font-size: 10px; color: #ff00ff; background: transparent;}
#topnav ul {clear: left; list-style-type: none; margin-top: 5px; text-align: center; width: 900px;}
#topnav li {float: left; padding: 5px 20px; border-right: 1px solid #ffffff; text-align:center; width: 900px;}
#topnav li a {display: block; color: #ffffff; text-decoration: none; font-weight: bold; font-size: 16px; background: #3B5998; width: 900px;}
#topnav li a:hover {color: #ff00ff; background: transparent;}


.inputsubmit {display: block; color: #3B5998; margin: 2px 1px; border: 1px solid #cccccc; font-size: 10px; background: #eceef5 url('/templates/templatex/images/fbutback.png') no-repeat center left; padding: 2px 2px 2px 12px; width: 87px; cursor: hand;}

.inputsubmit a {cursor: hand;}

.inputsubmit a:hover {cursor: hand;}




#facebook {text-align: center; width: 150px; border: 1px solid #3B5998;}
#fbbuts {text-align: left; margin-left: 25px;}





#cols {clear: left; width: 950px; margin: auto; background: #ffffff;};
#cols ul {}

#colsleft {height: 100%; width: 225px; float: left; list-style-type: none; background: #ffffff; padding: 5px; text-align: left;}




#colsmid {height: 100%; width: 550px; float: left; list-style-type: none; background: #ffffff;}
#colsright {height: 100%; width: 150px; float: left; list-style-type: none; background: #ffffff; padding: 5px;}

#colsmid p {padding: 10px;}
#colsmid h1 {margin-top: 5px; padding: 5px 10px; color: #ffffff; background: #3B5998; border-bottom: 1px solid #FF00FF;}
#colstates {margin: 10px; border: 1px solid #cccccc; padding: 10px; text-align: center;}

#editsalon {color: #ffffff;}
#editsalon a {display: block; font-size: 14px; width: 550px; border: 1px solid #cccccc; padding: 5px; text-align: center; background: #3B5998; color: #ffffff;}

.formex {font-size: 10px;}


#logbox {margin: 5px; border: 1px solid #cccccc; padding: 5px; text-align: center;}
#logbox h1 {margin-top: 5px; padding: 0 5px; text-align: left;}
#logbox ul {list-style-type: none;}
#logbox li {padding: 0 5px; text-align: left;}
#logbox li a {color: #3B5998;}




#friendsbox {margin: 5px; border: 1px solid #cccccc; padding: 5px; text-align: center;}
#reco {margin: 5px; border: 1px solid #cccccc; padding: 5px; text-align: center;}


#homewall {margin: 10px; border: 1px solid #cccccc; padding: 5px; text-align: center;}

#posterbox {margin: 10px; border: 1px solid #cccccc; text-align: left; min-height: 60px;}

.thumbs {margin: 3px; border: 1px solid #cccccc; padding: 2px;}


.pmid {text-align: center; padding: 5px;}


.postbyimg {float: left; margin: 5px;}
.postbyp {margin: 0 0 0 55px; text-align: left; padding: 0 0 15px 0;}
.postbypb {border-bottom: 1px solid #FF00FF; padding: 2px;}

#haircolors {text-align: center;}
#haircolors ul {clear: left; list-style-type: none; text-align: center;}
#haircolors li {float: left;}
#haircolors li a {}


.swatch {float: left; margin: 10px;}




























#welcblock {clear: left; width: 950px; background: #ffffff; margin: auto; overflow:hidden;}
#welctags p {padding: 5px;}
#welcblock h1 {font-size: 18px; color: #00aeff; padding: 5px; border-bottom: 1px solid #cccccc;}
#welcmess {margin-left: 350px; width: 600px;}
#welctags {float: left; width: 350px; background: #ffffff;}

#promo {padding-top: 10px; clear: right; width: 970px; background: #ff00ff url('/templates/templateb/images/promotop.png') no-repeat; margin: auto;}


#promo h1 {font-size: 24px; color: #00aeff; padding-bottom: 5px; padding-top: 5px; border-bottom: 1px solid #cccccc;}
#promostates {margin-right: 330px; padding: 5px; width: 630px;}
#promo p {padding-top: 10px; padding-bottom: 5px;}
#promoright {float: right; width: 330px; padding: 5px;}
#promo h2 {text-align: center; padding-top: 30px;}
#promo h2 a {font-size: 24px; color: #ffffff;}

#ads {clear: right; width: 940px; margin: auto; background: #ffffff; padding: 5px; font-size: 12px; text-align: center;}



.states {width: 500px; height: 216px; background: #ff00ff url('/templates/templateb/images/salonsmap.gif') no-repeat; padding: 15px 15px 0 15px; margin-left: 20px; text-align: center;}

.states a {color: #ffffff; font-weight: bold; background: #ff00ff;}
.postlist {list-style-type: none; border: 1px solid #cccccc; background: #eeeeee; padding: 5px; margin-top: 5px;}
.salonlist {list-style-type: none; border: 1px solid #cccccc; background: #eeeeee; padding: 5px; margin-top: 5px;}
.citylist {margin-left: 20px; font-size: 12px;}


#categories  {clear: right; width: 950px; background: #000000; margin: auto; height: 260px; padding-top: 1px; border-top: 1px solid #ffffff; border-bottom: 1px solid #ff00ff;}
#categories h1 {font-size: 16px; color: #00aeff; padding-bottom: 5px; padding-top: 5px; border-bottom: 1px solid #cccccc;}
#categories ul {margin: 15px;}
#categories li {color: #ff00ff; background: transparent;}
#categories li a {color: #ffffff; background: transparent;}
#categories li a:hover {color: #ff00ff; background: transparent;}
#catone {float: left; width: 225px; padding: 5px;}
#cattwo {float: left; width: 225px; padding: 5px;}
#catthree {float: left; width: 225px; padding: 5px;}
#catfour {float: left; width: 225px; padding: 5px;}

#footer  {clear: both; width: 950px; background: #3B5998; margin: auto; height: 30px; padding-top: 5px; text-align: right; color: #ffffff; padding-right: 5px;}

#share {height: 320px; clear: both; width: 950px; background: #000000; margin: auto; text-align: left; color: #ffffff;}

#share ul {margin: 0; background: #000000; width: 950px; list-style-type: none;}
#share li {float: right; background: #000000; padding: 5px; width: 300px;}


#breadcrumb {background: #ff00ff; font-weight: bold; padding: 3px; margin-top: 10px;}
#breadcrumb a {color: #ffffff;}

#main {clear: left; width: 950px; background: #ffffff; margin: auto; padding: 5px 0; height: 100%;}

#mainright {clear: right; float: right; width: 260px; padding: 5px;}

#mainleft {clear: left; margin-right: 280px;  margin-left: 10px;}
#mainleft h2 {font-size: 16px;}
#main h1 {font-size: 18px; color: #ff00ff; border-bottom: 1px solid #000000; margin-top: 10px; margin: 5px;}
#main h2 {font-size: 18px; color: #ff00ff; border-bottom: 1px solid #000000; margin-top: 10px; margin: 5px;}
#main a {text-decoration: none;}
#mainleft p {padding: 5px; }
#mainright ul {list-style-type: none; padding: 5px;}



.blogdate {font-size: 11px; font-weight: bold; }
.pages {font-size: 12px; font-weight: bold; background: #cccccc; padding: 3px; margin-top: 5px;}
.blogtags {font-size: 12px; font-weight: bold; background: #cccccc; padding: 3px; margin-top: 5px;}


#commentblock {margin-top: 10px; background: #cccccc; padding: 5px;}
#commentblock li {background: #ffffff; padding: 5px; border: 1px solid #000000;}

.comtitle {font-weight: bold;}

.respond {background: #ff0000; padding: 5px; border: 1px solid #000000; color: #ffffff;}
.confirm {background: #ffffff; padding: 5px; border: 1px solid #000000; color: #000000; text-align: center;}



.pimage {float: left; margin-right: 5px;}
.plist {clear: left;}
.plilist {list-style-type: none; border: 1px solid #cccccc; background: #ffffff; padding: 5px; margin-top: 5px; min-height: 160px;}
.visitstore {font-size: 16px;}
.visitstore a {color: #ff00ff;}

.spotlight {background: #cccccc; margin: 2px; padding: 3px;}




.hiddenx {
  
	display: block;  /* block float the labels to left column, set a width */
	float: left; 
	width: 150px; 
	padding: 0 0 0 10px; 
	margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
	text-left: right;
	color: #3B5998;
}










form {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
  font:100% verdana,arial,sans-serif;
  margin: 0;
  padding: 0;
}

form fieldset {
  / * clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
  border-color: #000;
  border-width: 1px;
  border-style: solid;
  padding: 10px;        /* padding in fieldset support spotty in IE */
  margin: 0;
}

form fieldset legend {
	font-size:1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */
                       /* be careful with padding, it'll shift the nice offset on top of border  */
}

form label { 
	display: block;  /* block float the labels to left column, set a width */
	float: left; 
	width: 150px; 
	padding: 0; 
	margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
	text-align: right; 
}

form fieldset label:first-letter { /* use first-letter pseudo-class to underline accesskey, note that */
	text-decoration:underline;    /* Firefox 1.07 WIN and Explorer 5.2 Mac don't support first-letter */
                                    /* pseudo-class on legend elements, but do support it on label elements */
                                    /* we instead underline first letter on each label element and accesskey */
                                    /* each input. doing only legends would  lessens cognitive load */
                                   /* opera breaks after first letter underlined legends but not labels */
}

form input, form textarea, form select {
	/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
	width:auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
	margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}









form input#reset {
	margin-left:0px; /* set margin-left back to zero on reset button (set above) */
}

textarea { overflow: auto; }

form small {
	display: block;
	margin: 0 0 5px 160px; /* instructions/comments left margin set to align w/ right column inputs */
	padding: 1px 3px;
	font-size: 88%;
}

form .required{font-weight:bold;} /* uses class instead of div, more efficient */

form br {
	clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}