/*  Reset - override browser defaults  -------------------------------- */
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;}
h1,h2,h3,h4,h5,h6{font-size:1em;}
ol,ul{list-style:none;}
fieldset,img, a img {border:0 none;}
a img {border: 0 none;}
a, a:active {outline: none;}
a:focus {outline-style: none;}

/*  General Stuff -----------------------------------------------------  */
body {
margin: 0; padding: 0;
background:#EDEADB url(../images/JCA_bg.gif) center top repeat-y;
color:#3F3A2E;
font-family: Corbel,Calibri,Candara,Helvetica,Verdana,Arial,sans-serif;
font-size:100%; /* To fix IE6/7 text resizing inconsistencies */
font-size: 16px;
line-height:1.125em; /* Baseline (16px browser default x 1.125 = 18px line height) */
}
.left {float: left;}
.right {float: right;}
.clear {clear: both;}
.inline {display: inline;}

a {color:#990000; text-decoration:underline;}
a h1 {text-decoration: none;}


/* Structural Elements  (3 column pages) -------------------------------  */
/* Note: the 3column layout includes column-1, col2A and col2B (within column-2)  */

#wrapper{
width:960px;
margin:0 auto;
background:#fff;
}

#header {
float: left;
width: 960px;
margin-bottom:10px;
}

#topnav-line {
height: 8px;
width: 100%;
background-color: #8B0000;
color: #fff;
}


#tagline {
padding: 4px 15px;
height: 16px;
background-color: #FAFAF2;   /* EAE7D5 -> FCFCF4 -> FAFAF2 */
color: #8B0000;
font-family: Calibri,Candara,Corbel,Calibri,Helvetica,Verdana,Arial,sans-serif;
font-size: .90em;
font-weight: bold;
font-variant: small-caps;
}

#column-1{
  width:275px;
  float:left;
  margin:0px 0px 10px 10px;
}

#column-2{
  float:right;
  margin-bottom: 10px;
  width:665px;
}

#col2A{
  float:left;
  width:332px;
  margin-left: 0px;
}

#col2B{
  float:right;
  width:305px;
  margin-right: 10px;
}

/* Structural Elements (2 column pages) -----------------------------------  */
/* Note: the 2-column pages use only column-1 and col2A. These styles ensure
   that the H1 page title, logo and text will flow properly.  */

#about-us #col2A,
#product-info #col2A,
#wig-faqs #col2A {
float:left; width:655px; margin-right: 10px;
}

#about-us #col2A h1,
#product-info #col2A h1,
#wig-faqs #col2A h1 {
float:left; display:inline;
margin:0; padding:0;
}

/* to align logo on the 2-col pages */
#about-us #col2A img,
#product-info #col2A img,
#wig-faqs #col2A img  {
float:right; display:inline;
vertical-align:top;
margin:0px 0px 15px 18px;
border: 1px solid #D5CBBF;
}

#col2A p.first {margin-top:3.4em;}

/*   Navigation  ---------------------------------------------------------  */

#header ul {
width: 960px;
float: left;
background-color:#D5D1BF;     /* CCC8B1 -> D5D1BF -> EAE7D5*/
padding: 0;
margin: 0;
}

#header ul li {
list-style-type: none;
float: left;
font-size: 1em;
font-family: Calibri,Corbel,Candara,Helvetica,Verdana,Arial,sans-serif;
}

#header ul li a {
padding: 10px 0px 0px 0px;
height: 28px;
text-decoration: none;
color: #5E3F00;             /* 77653F ->  635434 -> 5E3F00*/
display: block;
float: left;
text-align: center;
}

#header ul li a:hover {
color: #fff;
background: url(../images/bg-nav-hover.jpg) no-repeat center 0;
}

#header .divider { border-right: solid 1px #C1BFAC; }   /* B0AD95 -> C1BFAC  */

#mHome { width: 90px; }
#mAbout { width: 100px; }
#mPromise { width: 110px; }
#mProducts { width: 90px; }
#mWigCare { width: 80px; }
#mTestimonials { width: 110px; }
#mFAQs { width: 90px; }
#mEducation { width: 90px; }
#mResources { width: 90px; }
#mContact { width: 100px; }


/* Highlight menu item for current page  */
body#home a#mHome,
body#about-us a#mAbout,
body#our-promise a#mPromise,
body#product-info a#mProducts,
body#wig-care a#mWigCare,
body#testimonials a#mTestimonials,
body#wig-faqs a#mFAQs,
body#education a#mEducation,
body#resources a#mResources,
body#contact-us a#mContact
{
color: #FFF;
background: url(../images/bg-nav-hover.jpg) no-repeat center 0;
}


/*  Content Area Styles -----------------------------------------------  */

h1 {
font: normal 1.75em Cambria, "Hoefler Text",Utopia,"Liberation Serif","Nimbus Roman No9 L","Times New Roman",serif;
color: #663300;}

h2 {
margin-top: 10px;
font: normal 1.5em “Lucida Sans”, “Lucida Grande”, “Lucida Sans Unicode”, sans-serif;
color: #735e2f;
}

h3 {
font: bold 1.2em Helvetica,Verdana,Arial,sans-serif;
font-variant:small-caps;
color:#7D3F00;   /* 552b00 -> 723910 -> 884513 -> 663300 */
}

h4 {
margin-top: 10px;
font: bold 1em “Lucida Sans”, “Lucida Grande”, “Lucida Sans Unicode”, sans-serif;
color: #735e2f;
}


p {font-size: 0.85em; line-height: 1.35em;}
p.small{font-size: 0.75em;}
#column-2 p {margin:1em 0; line-height:1.4em; }

#wig-faqs #col2A p.question{ color: #582D0C; font-weight: bold;}

blockquote {  /* used on Testimonials page */
display:block;
border-bottom: dashed 1px #D0BE9B;
font-size: 1em;
background:url(../images/tanleftquote.gif) no-repeat 3px 10px;
}

blockquote p { line-height:20px; margin:0px;}
blockquote cite {display:block; color:#582D0C; font-weight:bold; padding:2px; margin-top:2px;}
.leftquote  { float:left;  width:280px; text-align:left;padding:2px 10px 2px 30px;}
.rightquote { float:right; width:270px; text-align:left;padding:2px 10px 2px 30px;}

.more a {
background: transparent url(../images/more.gif) left bottom no-repeat;
font-family: "Lucida Grande", Verdana, sans-serif;
line-height: 1;
font-size: 1em;
color: #B0301E;
font-weight: normal;
display: block;
margin: 0;
padding: 0 0 0 13px;
text-decoration: underline;
height: 12px;
margin: 0 0 12px 12px;
clear: left;
position: relative;
}

/*  List Styles ---------------------------------------------------  */
#col2A ul li{
list-style:square;
font-size: .90em;
margin-left: 15px;
line-height: 2em;
color: #552B00;    /* 534422 -> 552B00 */
}


#wig-care #col2A ul li{
list-style-type: none;
line-height: 1.2em;
font-size: .80em;
margin-bottom: 1em;
margin-left: -6px;
background: url(../images/bullet.png) 0px 1px no-repeat;
padding-left: 15px;
color: #552B00; 
}


/* faux list - better cross-browser control of line height and wrapping */
#wig-care #col2A p.spacedlist{
line-height: 1.2em;
font-size: .85em;
margin-left: -6px;
background: url(../images/bullet.png) 0px 2px no-repeat;
padding-left: 15px;
color: #552B00;
}


/*  Image Styles --------------------------------------------------   */
/* #col2A .resources {float:left;margin-bottom:10px;} */
#col2A .resources img {float:left; display:inline;vertical-align:top;}
#col2A .resources img.right{margin-left: 50px;}

#col2B img{
float:left;
margin-bottom:10px;
border: 1px solid #D5CBBF;
}

/* Styles for 3rd column boxes -----------------------------------------  */

#sidebox {
float: left;
width: 303px;
margin-top: 5px; margin-bottom:10px;
padding: 0;
border: 1px solid #D5CBBF;   /* D9D5CA -> D5CBBF */
background-color: #FDFDF7;   /* FDFDFB -> FCFCF4 -> */
}

#sidebox .top {
background:url(../images/T06.jpg) no-repeat;
height:32px;
}

#sidebox .top h3 {
margin:0 10px 10px 10px;
padding-top:3px;padding-bottom:3px;
font: normal .95em Tahoma, Verdana,Helvetica,Arial,sans-serif;
word-spacing:3px;
color: #663300;     /* 664500 */
}

#sidebox .innerbox {margin: 0 10px;}
#sidebox p.bronze{color: #714D00; font-size: 0.95em; }
#sidebox p.ltbrown{color: #552B00; font-size: 0.80em;}

#social {
clear:both;
float:left;
width: 293px; height: 30px;
padding: 2px 5px 0 5px;
margin: 0 10px 10px 0;
color: #714D00;
border-top: 4px solid #8B0000;
border-right: 1px solid #D5CBBF;
border-bottom: 1px solid #D5CBBF;
border-left: 1px solid #D5CBBF;
background-color: #FAFAF2;
font: 13px Corbel,Calibri,Candara,Helvetica,Verdana,Arial,sans-serif;
}

#social img {border: none;}

img .facebook {
float:left;
padding-right: 10px;
display:inline;
width: 150px; height: 30px;
}

.addthis_toolbox {
 float:left;
 padding: 6px 0 0 10px;
 font: 13px Corbel,Calibri,Candara,Helvetica,Verdana,Arial,sans-serif;
}


/*  Contact page - Locations sidebox ----------------------------------  */
#sidebox .note {font-size:0.85em; color: #663300; }
#sidebox .location {
padding:5px; margin-bottom: 5px;
font: 1em "Trebuchet MS", Tahoma, Verdana,Helvetica,Arial,sans-serif;
}
#sidebox h4 {color: #663300; font-size: 0.80em; display:block; border-bottom:solid 1px #D8CDB8; margin-bottom:10px;}
#sidebox .imageright {float:right; padding:4px; margin-left:5px;background-color:#FFF; border: 1px solid #C1AF8E;}


/*  Education - Workshops sidebox ----------------------------------  */
#sidebox .workshop{padding:0; margin:0; border-bottom:solid 1px #D8CDB8; }



/* FORM STYLES -------------------------------------------------------------  */
.form {margin:10px 0px 10px 0px;  }
.form .text {display:block; border:solid 1px #E0D8C5; background: #F9F8F2; width:300px; padding:2px; font-size:0.90em; color:#000000;}
.form label {display:block; margin-bottom:3px; margin-top:10px;font-size:0.85em; }
.form .text:hover{background:#FFFFFF; border: solid 1px #B6A278;}
.form .text:focus{background:#F4EFE3; border: solid 1px #B6A278;}
.form .button       { display:block; border:solid 1px #CBBA96; background:#EAE3D5; padding:2px 10px 2px 10px; margin-top:20px;}
.form .button:hover { display:block; border:solid 1px #CBBA96; background:#E2D9C5; padding:2px 10px 2px 10px; margin-top:20px;}

/* FOOTER   ------------------------------------------------------------------*/
#footer{
  clear:both;
  height: 40px;
  border-top: 6px solid #790000;
  background-color: #EAE7D5;
  padding: 10px 20px 10px 20px;
  color: #5E3F00;
  text-align:center;
  line-height: 1em;
}
#footer .vcard{font-size: .80em;}
#footer p {margin-top:0;font-size:.80em;}
#footer a {text-decoration:none;}
#footer a:hover {text-decoration:underline;}