/* base (common) styles for all (or most) pages in the site */

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

                      Look and feel options pertaining to the whole site  

**************************************************************************************************/
body {
	font-size: 11px;
	font-family: Verdana, sans-serif;
	background-color: #f2e6d1;
}
img {
	border: 0;
}
input, select {
	font-size: 12px;
}
/* classes */
.pageHeader {
	font-family: Verdana;
	font-size: 16px;
	padding-bottom: 0px;
	clear: left;
	display: block;
	color: #444444;
}
.productText {
	font-family: Verdana;
	font-size: 11px;
	color: #666666;
	margin-bottom: 16px;
}
.subHeader {
	font-family: "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", serif;
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 5px;
	clear: left;
	display: block;
}
.txtSubHeader {
	font-family: "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", serif;
	font-size: 14px;
	color: #666666;
	font-weight: bold;
}
.palatinoLabelLg {
	font-family: "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", serif;
	font-size: 12px;
	padding-right: 5px;
	vertical-align: bottom;
}
.verdanaLabelLg {
	font-family: Verdana;
	font-size: 10px;
	padding-right: 5px;
	vertical-align: bottom;
	color: #666666;
}
.suggestItemText {
	font-family: Verdana;
	font-size: 10px;
	padding-right: 5px;
	vertical-align: bottom;
	color: #666666;
}
.palatinoLabelSm {
	font-family: "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", serif;
	font-size: 11px;
	padding-right: 5px;
	vertical-align: bottom;
	color: black;
}
.defaultLabel {
	font-family: Verdana;
	font-size: 11px;
	padding-right: 5px;
	vertical-align: bottom;
	color: #666666;
}
.submitbtn {
	background-color: white;  
	font-size: 9pt; 
	color: black;
}

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

      Styles for the common outer framework of the site (Header, Menus, Footer, Copyright, etc)  

**************************************************************************************************/
/* Main content alignment and sizing */
body {
	margin: 0px;
	padding: 0 0 0 06px;
	text-align: center;
}
div#pageBody {
	width: 762px;
	padding: 0;
	/* The following causes the main div to be horizontally centered */
	margin: 0 auto;
	position: relative;
}

/* Header (Logo and Wish List/Shopping Bag/ Sign In button area) */
div#hamHead { margin: 10px 0 10px 0; width: 762px; height: 52px; display: block; }
div#hamHead:after { height: 0; display: block; clear: both; visibility: hidden; content: "."; }
div#hamHead img#hamLogo { margin-left: 5px; width: 245px; float: left; }
div#hamHead #acctMenu { width: 500px; float: right; }
div#hamHead #acctMenu p { margin: 0; padding: 0; height: 28px; text-align: right; }
div#hamHead #acctMenu p img { margin-left: 10px; }
div#hamHead #acctMenu a { margin-left: 20px; color: #666666; font: 10px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; }
div#hamHead #acctMenu a:hover { color: #000; font-weight: bold; }
/* The standard search box */
#acctMenu #searchDiv { margin: 0; text-align: right; }
#acctMenu #searchDiv input.button { padding: 0; color: #6c8c87; background: none; font: bold 11px Verdana, Arial, Helvetica, sans-serif; border: none; }

/* Inner page content block (area surrounded by black border) */
div#bigBlackBox { width: 762px; min-height: 360px; border: 0px solid #CCCCCC; background-color: #ffffff; _height: 300px; }
/* The div described by div.clearer forces the bigBlackBox div's border to stretch and contain 
   all of its inner divs, because parent divs do not natively stretch to contain floated elements.
   by adding the dummy div and clearing it we get around it. A description of the issue and solution:
   http://www.complexspiral.com/publications/containing-floats/
*/
div.clearer { clear: both; line-height: 0px; height: 0; }
/* The following is a fix that accomplishes the same effect as the clearer class above,
but without having to add an extra div to the template. */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* XHTML Strict requires one of a set of various tags to wrap form elements, which appears unnecessary
and bothersome, but is required nonetheless. I'm defining the following class to remove a paragraph's 
normal effect, just to make the HTML happy.
*/
.dummyP { margin: 0; padding: 0; }
/* Area in which the TwinHelix menu is displayed */
div#mainMenu { width: 762px; height: 26px; color: #666666; font: 10px Verdana, Arial, Helvetica, sans-serif; text-align: left; }

/* The bordered footer navigation bar and its contents */
div#bottomMenu { padding-left: 10px; width: 752px; height: 30px; border: 0px solid #ccc; border-top: none; }
div#bottomMenu a { margin: 7px 22px 0 0; display: block; float: left; color: #666666; font: bold 11px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; }
div#bottomMenu a:hover { color: #000; }

div#extraMenu { margin: 20px 0px 0px 0px; padding-left: 4px; padding-right: 4px; width: 754px; border: 0px solid #ccc; text-align: left; background-color: #f8f0e4;}
div#extraMenu p { margin: 4px 4px 4px 4px; color: #888888; font: 9px Verdana, Arial, Helvetica, sans-serif; }
div#extraMenu a { color: #888888; text-decoration: underline; }
div#extraMenu a:hover { color: #444444; }

#infoBar { margin-top: 10px; padding: 0 10px; width: 742px; text-align: left; }
#infoBar p { margin: 0; padding: 0; }
#infoBar #left { width: 420px; display: inline; float: left; }
#infoBar #foot_menu a { margin-right: 10px; color: #666; font: 9px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; }
#infoBar #foot_menu a:hover { color: #000; }
#infoBar #copyright { margin-top: 10px; color: #666666; font: 9px Verdana, Arial, serif; }
#infoBar #copyright a { margin-left: 10px; color: #666666; font: 9px Verdana, Arial, serif; text-decoration: none; }
#infoBar #copyright a:hover { color: #000000; }
#infoBar #comments { margin-top: 10px; color: #666666; font: 9px Verdana, Arial, Helvetica, sans-serif; }
#infoBar #comments a { margin-left: 10px; color: #666666; font: 9px Verdana, Arial, Helvetica, sans-serif; text-decoration: underline; }
#infoBar #comments a:hover { color: #000000; }
#infoBar #right { width: 322px; display: inline; float: right; }
#infoBar #right img { float: right; }
#infoBar #become { margin: 3px 0 0 30px; padding-bottom: 5px; display: inline; float: left; border-bottom: 1px solid #ccc; font: bold 10px Verdana, Arial, Helvetica, sans-serif; }
#infoBar #become a { color: #000; text-decoration: none; }
#infoBar #become a:hover span { color: #000; }
#infoBar #become span { color: #6c8c87; }
#infoBar #imginfo {margin-top: 48px; position: relative; top: 0px; left: 0px;}
#infoBar #haminfo { margin-top: 53px; float: right; color: #666666; font: 9px Verdana, Arial, Helvetica, sans-serif; position: relative; top: 0px; left: 69px; }
#infoBar #haminfo a { color: #666666; font: 9px Verdana, Arial, Helvetica, sans-serif; text-decoration: underline; font-weight: bold; }
#infoBar #haminfo a:hover { font-weight: bold; }

/* Styles for TwinHelix menu bar and footer nav bar main options */
.lowText, .highText, .subTextLow, .subTextHigh { color: #666666; font: bold 11px Verdana, Arial, Helvetica, sans-serif; text-align: left; text-decoration: none; }
.highText { color: #000; }

/* Styles for the main menu bar's fly-out options */
.subTextLow, .subTextHigh { color: #000; font: 10px Verdana, Arial, Helvetica, sans-serif; text-align: left; text-decoration: none; padding-left: 10px; }
.subTextHigh { font-weight: bold; }