/********************************
 * Sticky Footer Solution
 * by Steve Hatcher 
 * http://stever.ca
 * http://www.cssstickyfooter.com
 *********************************/
*{ margin: 0; }

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {
  padding-bottom:64px;  /* must be same height as the footer */
}  

#footer {
  position: relative;
	margin-top: -64px; /* negative value of footer height */
	height: 64px;
	clear:both;
} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/**************************************
 * END OF THE Sticky Footer Section
 **************************************/ 

body { 
  background:url(../image-files/hdbg2.jpg) repeat-x; 
  /* font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; */ 
	font-size:93%;
}

#wrap { position: relative; }

/************************************************
 * HEADER and its contents
 ************************************************/
#header {
  margin:0 auto; /* border:1px solid red; */
  width:960px; height:172px; 
} 

#headercontent {
  margin:0 auto; width:960px; height:172px;
}

#header-inner {
  position:relative; 
  height:100%; /* border:1px solid blue;  border-bottom: none; */
  background:url(../image-files/utensils.jpg) top right no-repeat;
}

/******************************************************
 * MENU STYLE
 * Thought I'd use position:absolute so we can 
 * position this wrapper relative to the header-inner 
 * HOWEVER, IE just would not cooperate. Had to use
 * floating divs instead - works!  
 ***********************************************/

#pusher {
  height:95px; /* border:1px solid brown; */
}

#otherlinks {
  float:left;
  clear:both;  
  height:52px;
}

ul.tabbed { margin-top:32px; display:block;
  list-style: none;
  border-bottom:1px solid #336699;
  padding-bottom:5px; /* Note: the padding value determmines the padding value for the a-tag element styling */
  font-size:93%;
  font-variant:small-caps; z-index:2;
}

ul.tabbed li {
  display: inline;
  margin-right: 5px; /* determines space between tabs */
}

ul.tabbed li a {
  color:#666666; 
  text-decoration: none;
  border:1px solid #999999;
  border-bottom:none;
  padding:5px 14px;  /* NOTE: the 5px padding at top and bottom allows the bottom edge to meet the ul bottom edge (also padded 5px) */
}

ul.tabbed li a:hover {
  padding:10px 14px 5px 14px;
  vertical-align:top; color: #900;
}

ul.tabbed li a.selected {
  color:#000;
  background:#FFFFFF;
  border:1px solid #336699; /* NOTE: same as u.tabbed bottom-border */
  border-bottom:#FFFFFF; /* same as background in order to give the up-tab effect */
  padding:10px 14px 6px 14px; 
}

/**************************************************
 * SIDEBAR NAV
 **************************************************/
.sidenav {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
 
.sidenav li { margin: 0 0 .15em 0; } /* put some separation between items */

.sidenav a {
  display: block;
  color: #000;
  background-color: #FFF; 
  /* border-bottom: 1px #FFF solid; */
  width: 13.5em;
  padding: .15em .8em;
  text-decoration: none;
}

.sidenav a:hover {
  /* border-bottom: 1px #000 solid; */ 
  background: #FFF url(../image-files/bullet-left.gif) center left no-repeat;
  color: #900;
}

.current {
  background: #FFF url(../image-files/bullet-red-left.gif) center left no-repeat;
}

/******************* Sidemenu *********************/
#sidebar {
  margin:10px auto; width:230px;
}

ul.sidemenu {
  padding:0; margin:0;
  list-style:none;
  font-family:Verdana,Arial,Helvetica,San-serif;
  font-size:0.8em;
  /*border-bottom:1px solid #6F3E04;*/
  width:210px; 
  background-color:
}

ul.sidemenu li {
  /*border-top:1px solid #6F3E04;
  border-left:1px solid #6F3E04;
  border-right:1px solid #6F3E04;
  border-bottom:1px solid #6F3E04; */
  margin:2px 0px;
}

ul.sidemenu li a, ul.sidemenu li a:visited {
  text-decoration:none;
  display:block;
  width:208px;
  color:#333333;
  font-weight:bold;
  padding:2px 0px; text-align:right;
}

ul.sidemenu li a:hover {
  background-color:#E9D8BA;
  color:#EE3300;
}

#nav .current {
  /* background: #E9D8BA url(../image-files/bullet-red-left.gif) center left no-repeat; */
  color:#EE3300;
} 

#nav {
  margin:0px auto; width:210px; 
}

/***************************************************
 * THE LOGO div can also be positioned relative to 
 * the header-inner div
 ***************************************************/
#logo {
  position: absolute;
  top:0; left:0;
  width:346px; height:172px;
  background:url(../image-files/newlogo.jpg) top left no-repeat;
  z-index: -1;
}

/*******************************************
 * Forms & Highlight texts
 *******************************************/
.myform {
  float:left; padding:2px; width:200px; background-color:#FFFBCF;
}
.myform p {
  padding:2px;
}

p.note {
  font-size:70%; display: block; border-bottom:1px solid green; padding-bottom:15px; margin-bottom:10px;
}

.myform h1 {
  font-size:18px; margin-bottom:5px; color:#900;
}

.myform h1 span {
  font-size:14px; color:#03f; 
}

.myform h2 {
  font-size:14px;
}

.myform fieldset {
  border: 1px solid #781351; border:1px solid green;
  /* width: 20em; */
}

.myform legend {
  color: #fff; font-weight: bold;
  background: #900;
  border: 1px solid #781351; border:1px solid green;
  padding: 2px 6px
} 

.myform .grad {
  float:right; padding:0 0 5px 10px
}

label {
  width: 3em;
  float: left;
  text-align: right;
  margin-right: 0.5em;
  display: block;
}

.submit input {
  margin-left: 3.6em;
  color: #000;
  background: #ffa20f;
  border: 2px outset #fbfbfb;
} 

input {
  color: #781351;
  background: #faf7f0;
  border: 1px solid #781351;
}

#signup {
  position:absolute;
  top:10px; left:375px; /* to the right of the logo */
  width:320px;
  height:90px;
  /* border:1px dashed #666; */
  padding:10px;
  color:#3F3F3F;
}

/************************************************
 * COLUMNS in Main Content area
 ***********************************************/
#inside-main {
  margin:0 auto; top:-5px;
  width:960px;
  position: relative; 
  /* border:1px solid #ddd; */
} 

/********************************************************
 * Column styles using floating divs as well 
 ********************************************************/

#columnleft { /* border:1px solid blue; */
  float:left;
  width:700px; 
  margin:5px;
}

#columnleft p, #columnleft li { margin:5px 0px; font-family: "Lucida Grande",Tahoma,Verdana,Arial,Serif; font-side:1em; line-height:1.5em; }
#columnleft ul { list-style-image: url(../image-files/bullet.gif); }

h1, h2, h3 {
  margin:10px 0px;
}

#columnright { /*border:1px solid red; */
  margin:5px;
  width: 240px;
  float:right;
  background:#fff; /* E3EAA4; */
}

div.clear { width:100%; height:0px; clear:both; }
  
/**************************************************
 * More footer styling 
 **************************************************/ 
#footer {
  background:url(../image-files/footer_bg.jpg) repeat-x ;
} 

#footer p {
  display:block; margin:0 auto; width:960px; color:#ddd; padding: 18px 10px;
}

#footer a {
  color:#dddddd; 
  text-decoration: none;
}

#footer a:hover {
  text-decoration:underline;
}

/**************************************************
 * GOOGLE SITE SEARCH BOX
 *************************************************/
.gosearch {
  border: none; padding: 0; margin: 0;
} 

/* CB ad links */
.cb{
  font-size: 130%;
  /*border: 1px dotted white; */
  -moz-border-radius:15px 15px 15px 15px;
  -moz-box-shadow:0 0 10px #333333;
  border: 3px solid #B28F00;
  padding: 5px;
  float:left; 
  text-align:center; 
  width:260px;
  margin-right: 10px;
}