@charset "UTF-8";
/* CSS Document */

/* This stylesheet is the global stylesheet for N'cole's Hair Salon */


/* This rule resets a core set of elements so that they will appear consistent across browsers. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* The body is the outermost layout component and contains the visible page content. */
body {
  background-color: #2c3936;
  color: #222;
  font-family: "Lucida Grande", "Lucida Sans", Verdana, Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 15px;
  margin: 0 0 0 0; /* (top, right, bottom, left) */
  padding: 0 0 0 0; /*(top, right, bottom, left) */
  text-align: center; /* Centers the page content container in IE 5 browsers. */
}


h1 {
  color: #000;
  font-size: 20px;
  font-weight: bold;
  line-height: 15px;
  border-bottom: 2px solid;
  padding-bottom: 0.5em;
}


h2 {
  color: #000;
  font-size: 16px;
  font-weight: bold;
  font-style: italic; 
  line-height: 20px;
  margin-top: 20px;
}


h3 {
  color: #000;
  font-size: 14px;
  font-weight: bold;
  font-style: normal; 
  line-height: 15px;
}


/* Sets the style for unvisited links. */
a,  a:link {
  color: #993300;
  text-decoration: none;
}

/* Sets the style for visited links. */
a:visited {
  color: #993300;
  text-decoration: none;
}

/* Sets the style for links on mouseover. */
a:hover {
  color: #993300;
  text-decoration: underline;
}

/* Sets the style for a link that has focus. */
a:focus {
  color: #993300;
}

/* Sets the style for a link that is being activated/clicked. */
a:active {
  color: #993300;
}

/* This is a container for the page content. */

#outerWrapper {
  background-color: #fff;
  margin: 0 auto 0 auto; /* (top, right, bottom, left) */
  text-align: left;
  width: 960px;
}

#outerWrapper #header {
  background: url(images/ncoles_masthead.jpg) no-repeat center;
  border-bottom: solid;
  border-bottom-color: #2c3936;
  border-bottom-width: 4px;
  height: 180px;
  padding: 0 0 0 0;
}

#header h1 {
	  text-indent: -9999px;
	  border-bottom: none;
}

#outerWrapper #contentWrapper {
  background-color: #629a43;
  padding: 0 0 0 0; 
}

#outerWrapper #contentWrapper #navcontainer {
  background-color: #629a43;
  float: left;
  text-align: center;
  padding: 10px 10px 10px 10px; /* (top, right, bottom, left) */
  width: 140px;
}




/* START Navigation Links */



#navcontainer {
	background: #629a43;
	width: 140px;
	font-size: 12px;
	text-align: center;
	text-transform: lowercase;
	font-weight: bold;
}

ul#navlist {
	text-align: left;
	list-style: none;
	padding: 1em 0 14em 0; /* (top, right, bottom, left) */
	margin: 0 0 0 0;
	width: 140px;
}

ul#navlist li {
	display: block;
	margin: 0;
	padding: 0;
}

ul#navlist li a
{
	display: block;
	width: 100%;
	padding: 0.5em 0 0.5em 2em;
	border-width: 1px;
	border-color: #addc75 #84b853 #95c85f #b3e07c;
	border-bottom-style: dashed;
	color: #d5edb3;
	text-decoration: none;
	background: #629a43;
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a {
	background: #b5f094;
	color: #993300;
}

ul#navlist li a:hover, ul#navlist li#active a:hover {
	color: #993300;
	background: #99cc66;
	border-width: 1px;
	border-color: #84385b #b3e07c #b3e07c #95c85f;
	border-bottom-style: dashed;
}

/* END Navigation Links */



#outerWrapper #contentWrapper #rightColumn1 {
  	background-color: #629a43;
  	float: right;
	padding: 5px 10px 5px 10px;	/* (top, right, bottom, left) */
 	width: 150px;
}

.tiptitle {
	color: #ffffee;
	font-weight: bold;
}

.tip {
	background-color: #b5f094;
	padding: 0 .33em 0 .33em;
}


/* Contains the main page content. */

#outerWrapper #contentWrapper #content {
 	background-color: #b5f094;
  	border-left: solid;
  	border-left-color: #2c3936;
  	border-left-width: 4px; 
  	border-right: solid;
  	border-right-color: #2c3936; 
  	border-right-width: 4px;
  	margin: 0 auto 0 auto; /* (top, right, bottom, left) */
 	padding: 20px 20px 50px 20px; /* (top, right, bottom, left) */
	width: 550px;
	
}
 #hiringBanner {
 	width: 550px;
	height: 100px;
	margin: 10px 0 10px 0;
 }

#content #inlinePhotoLeft {
	float: left;
	margin: 5px 8px 5px 0px;  /* (top, right, bottom, left) */
}

#content #inlinePhotoRight {
	float: right;
	margin: 5px 0px 5px 8px;
}

.tableText {
	font: 12px Arial, Helvetica, sans-serif;
	color: #222;
	line-height:16px;
	letter-spacing:.1em;
	text-decoration: none;
}
	
.tablePriceText {
	font: 12px Arial, Helvetica, sans-serif;
	color: #222;
	text-align: center;
	line-height:16px;
	letter-spacing:.1em;
	text-decoration: none;
}

#jewelrySale {
	margin: 10px 0;
}

/* Slideshow */

.gallery{list-style:none;width:200px}
.gallery li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 10px 10px 0}
.gallery li a{display:none}
.gallery li div{position:absolute;display:none;top:0;left:180px}
.gallery li div img{cursor:pointer}
.gallery li.active div img,.gallery li.active div{display:block}
.gallery li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.gallery li .caption{display:block;padding-top:.5em}
* html .gallery li div span{width:400px} /* MSIE bug */





/* Using floated elements and a clear float class is a common method to accomplish multiple column tableless layouts. */

#outerWrapper #contentWrapper .clearFloat {
  	clear: both;
  	display: block;
}


#outerWrapper #footer {
  	background-color: #629a43;
  	border-top: solid;
  	border-top-color: #2c3936;
 	border-top-width: 4px;
  	color: #222;
  	font-family: "Lucida Grande", "Lucida Sans", Verdana, Helvetica, Arial, sans-serif;
  	font-size: 10px;
  	line-height: normal;
  	text-align: center;
  	padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}