/*************************************************************************************************/

/***** Global Settings *****/

html, body {border:0; margin:0; padding:0;}
body {font:1em arial, helvetica, sans-serif;}

/***** Common Formatting *****/

h1, h2, h3, h4, h5, h6 {margin:0; padding:0; font-weight:normal;}
h1 {padding:10px 0 10px 0; letter-spacing:-1px; font:2em arial, helvetica, sans-serif;}
h2 {padding:10px 0; letter-spacing:-1px; font:1.5em arial, helvetica, sans-serif;}
h3 {font:1em arial, helvetica, sans-serif; font-weight:bold;}
p {margin:0; padding:0 0 10px 0;}
ul, ol {list-style:none;padding: 0;}
blockquote {margin:22px 40px;padding:0;}
small {font-size:0.85em;}
img {border: 0;}
sup {position:relative;bottom:0.3em;vertical-align:baseline;}
sub {position:relative;bottom:-0.2em;vertical-align:baseline;}
acronym, abbr {cursor:help;letter-spacing:1px;border-bottom:1px dashed;}

/***** Links *****/

a, a:visited {text-decoration:none;}

/***** Tables *****/

table {border:0;margin:0 0 18px 0;padding:0;}
table tr td {padding:2px;}

/***** Global Classes *****/

.clear 		{ clear:both; }
.float-left 	{ float:left; }
.float-right 	{ float:right; }
.text-left 	{ text-align:left; }
.text-right 	{ text-align:right; }
.text-center 	{ text-align:center; }
.text-justify 	{ text-align:justify; }
.bold 		{ font-weight:bold; }
.italic 	{ font-style:italic; }
.underline 	{ border-bottom:1px solid; }
.highlight 	{ background:#ffc; }
.wrap 		{ width:960px;margin:0 auto; }
.img-left	{ float:left;margin:4px 10px 4px 0; }
.img-right	{ float:right;margin:4px 0 4px 10px; }
.nopadding	{ padding:0; }
.noindent 	{ margin-left:0;padding-left:0; }
.nobullet 	{ list-style:none;list-style-image:none; }
.transparent	{opacity: 0.9;	-moz-opacity: 0.9; filter: alpha(opacity=90);}
.horiz {display: inline; padding-left: .2em; padding-right: .2em;}


/******************************************** SITE STRUCTURE/LAYOUT ******************************/

body {background-color: #121e48; color: #003366;}
#wrap {width: 800px; height: 100%;margin-left: auto; margin-right: auto;}
  #preview {position: relative; width: 800px; height: 90px; border-top: 3px solid #ffffff; border-bottom: 3px solid #ffffff; margin-top: .4em;}
  #header {position: relative; width: 800px; height: 180px;}
  #navig {height: 2em; width: 100%;position: absolute;bottom: 0;}
    #navig ul {width: 100%;}
  #container {width: 100%; height: 100%;}
    #subnavig {width: 185px; height: 100%; float: left;}
    #content {width: 570px; height: 100%; float: left;}
      #shippingbox {width: 175px; height: auto; float: right;}
  #footer {height: 25px; padding: .2em 0;clear:both;}


/******************************************** PREVIEW PRESENTATION ********************************/
#preview h1 {font-size: 1.5em; color: #ffffff;}


/******************************************** HEADER PRESENTATION ********************************/

#header {background: #121e48 url(../images/hdr.jpg) no-repeat top left; color: #ffffff;}
#header img {margin: 0; padding: 0;}
#header #contact {display: none;float: right;	font-size: 14px; font-weight: bold;	margin-top: 30px;	margin-right: .4em;}
#header h1 {display: none; width: 300px;}
#header h3 {display: none; width: auto; float: left; margin-top: 83px; margin-left: 2.5em; font-size: 16px;}

/******************************************** NAVIGATION PRESENTATION ****************************/

#navig ul {padding: 0;margin: 0;}
#navig ul li {display: inline; width: 17%; height: 100%;padding-left: .1em;	padding-right: .2em;float: right;text-align: center;}

#navig a {line-height: 30px; font-weight: bold; font-size: .9em;text-decoration: none;	display: block;	border: 1px solid #808080;}
#navig a:link {background-color: #97a96a; color: #ffffff;}
#navig a:visited {background-color: #97a96a; color: #ffffff;}
#navig a:hover {background-color: #a5adcb; color: #336633;}
#navig a:active {background-color: #d7dae3; color: #ffffff;}
#navig a.selected, #navig a:link.selected, #navig a:visited.selected, #navig a:hover.selected, #navig a:active.selected 
	{background-color: #d7dae3; color: #336633;}

/************************************************ CONTAINER FOR SUBNAVIG AND CONTENT PRESENTATION ***********/

#container {background: #d7dae3 url(../images/blueback.gif) no-repeat top left;}

/************************************************ PRODUCTS SUB NAVIGATION PRESENTATION ****************************/

#subnavig {margin-bottom: 2em;font-weight: bold; font-size: 1em;}
#subnavig h4 {
   font-weight: bold;
   padding-left: .5em;margin-top: 1em;
   border-top: 1px dotted #003366;	border-bottom: 1px dotted #003366;}
#subnavig ul {margin: 0; padding-left: .5em; padding-top: .4em; font-size: 1em;}
#subnavig ul li {margin: 0; padding-left: 1em; padding-bottom: .4em;}
#subnavig p {margin: 0; padding-left: .5em; padding-top: .5em; padding-bottom: .5em; font-weight: normal;}

#subnavig a:link {color: #336633;}
#subnavig a:visited {color: #ffffff;}
#subnavig a:hover {color: #32238d;}
#subnavig a:active { }
#subnavig a.selected, #subnavig a:link.selected, #subnavig a:visited.selected, #subnavig a:hover.selected, #subnavig a:active.selected	
	{background-color: #d7dae3; color: #336633; border: 1px solid #ffffff;}

/************************************************  CONTENT PRESENTATION ****************************/

#content {font-size: .9em; padding: 1em;}

#content a {text-decoration: underline;}
#content a:link {background-color: #d7dae3; color: #121e48;}
#content a:visited {background-color: #d7dae3; color: #97a96a;}
#content a:hover {background-color: #d7dae3; color: #1c338a;}
#content a:active {background-color: #d7dae3; color: #121e48;}

#content div.ad {
  width: 450px;
  border: 1px solid #fbfdf7;
  background: #ffffff url('../images/greengrad.gif') repeat-y;
  color: #1c338a;
  margin-top: 1em; margin-bottom: 1em; margin-left: 3em;
  padding-left: 1em; padding-top: 1em; padding-bottom: 1em;
  font-weight: bold; font-size: 1em;
  clear: both;
}

#content div.feature {
	width: 100%; height: auto;
	padding-top: 1em; padding-bottom: 1em;
	text-align: center;
}

.error {
   color: #A31422;
   font-weight: bold; font-size: 1em;
   padding-bottom: 1em;
}

#shippingbox {
	background: #ffffff url(../images/smalllav.gif) no-repeat;
	color: #1c277a; 
	border: 1px solid #336666;
	text-align: center;
	font-size: 1.1em; font-weight: bold;
	padding: .3em .3em 0em .3em;
}

#content div.category {
  width: 97%; height: 100%;
  border-top: 3px solid #ffffff;
  margin-bottom: 1em; margin-top: 1em;
  clear: both;
}

#content div.category div.product {
  width: 100%; height: 100%;
  clear: both;
}

#content div.category h2 {}
#content div.category p.categorydetail {}
div.category ul {
  list-style-type: square; 
  margin-left: 1.2em; margin-top: .3em;
}

#content div.product {position: relative;}
body#soaps div.product {}
#content div.product img {border: 1px solid #ffffff; margin-right: .5em;}
#content p.productname {font-weight: bold;}

/************************************************ FORMS PRESENTATION *****************************************/

form.order {}
body#soaps form.order {}

fieldset {margin-bottom: .5em; margin-top: .5em; padding-bottom: .5em; padding-left: .5em; padding-right: .5em; border: 1px solid #ffffff;}
fieldset legend {font-weight: bold; background-color: #ffffff; border: 1px solid #003366; margin-bottom: .5em; padding: .3em;}

form.mailinglist p {clear: both; width: 100%;}
form.mailinglist p label {display: block; float: left; width: 10em; margin-left: 1em;}

form p.buttonarea {text-align: center;}
form.order p.buttonarea {clear: right; float: right;}
form.order p.option {float: right;}

#content form#mycart {float: right;}

/* NEW for Admin section */
form p {clear: both;}
form p label {float: left; width: 25%;}
form p input.txt {width: 250px;}
form p.buttons, form span.buttons {text-align: center;}
form p select {width: 250px;}
form p.addnew {float: right; margin-right: 3em;}

/* NEW to style option boxes for product pages */
form p.option {width: 255px;}
form p.option select {width: 200px; float: right;}
form p.option label {width: 30px;}

/* NEW for preview EXIT button */
#preview form p.buttons {text-align: left;}

/* NEW To allow img to float left on product pages */
form.order p {clear: none;}

/************************************************ FOOTER PRESENTATION ****************************************/

#footer {background-color: #728348;color: #ffffff;text-align: center;padding-bottom: .5em;}
#footer #copyright {width: auto; font-size: .7em; line-height: 30px;padding-right: 1em;}