﻿/* page styles */
html, body {
	margin: 0;
	padding: 0;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	/**/

	background: url('../graphics/1024x136_header_wide.png') repeat-x left top !important;
}
body {
	margin: 0 auto 0 auto;
}
/*****************************************
body
	The background-color: #efefef;
	attribute has no effect on anything.
	 
	The graphic is the band across the top
body {	
	background-color: #efefef;
}
	of the page it is 136px high. 
******************************************/

		/*******************************************************
			G E N E R A L   S T Y L E S   U S E D   
			G L O B A L L Y   O R   O V E R W R I T T E N
		*******************************************************/
/********************************************************************
			 Standard elements 
**********************************************************************/
p {
	color: #000000;
	font-weight: normal;
	margin: 0 20px 10px 20px;
	line-height: 1.4;
	font-size: 13px;
}
.tight-text {
}
.tight-text p {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1.2;
}
hr {
	width : 50%;
	height : 1px;
}
h1, h2, h3, h4 {
	line-height: 100%; /* defaults to 150% */
	;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #663300; /*#996600; */
	text-align: left;
	font-weight: bold;
	margin: 0.3em;
	margin-left: 6px;
	margin-right: 4px;
	border: 0;
}
h3, h4 { /* 28-Jul-2012 */
	margin-left: 20px;
}
h1 {
	font-size: 36px;
	text-align: center;
	margin-top: 0;
	margin-bottom: 0.2em;
}
h2 {
    font-size: 24px;
    margin-top: 1.5em;
}
h3 {
	margin-top: 1.3em;
}
h4, h5 {
	margin-bottom: 0.2em;
	font-weight: normal;
}
h3, h4, h5 {
	font-size: 14px;
	font-weight: bold;
}
ol {
	margin: 0;
	margin-bottom: 4px;
	list-style: decimal;
	margin-left: 30px;
}
ul {
	list-style: disc;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 1em;
}
li {
	color: #000000;
	font-weight: normal;
	font-size: 13px;
	line-height: 1.3;
	margin-bottom: 4px;
	margin-left: 20px;
	margin-right: 10px;
}
li p {
	font-size: 13px;
	margin-left: 15px;
	margin-bottom: 2px;
	line-height: 100%;
}
input {
	color: #34391c;
}
a:link, a:active, a:focus {
	color: inherit;
	text-decoration: none;
}
a:visited {
	color: gray;
	text-decoration: none;
}
a:hover {
	color: red;
	text-decoration: none;
}
p a:link {
	color: inherit;
	text-decoration : underline;
}
input.button:active {
	border: 1px solid #28292D;
	border-right-color: #28292D;
	border-bottom-color: #28292D;
}
button:active {
	border: 1px solid #28292D;
	border-right-color: #28292D;
	border-bottom-color: #28292D;
}
input.button:hover {
	cursor: pointer;
}
button:hover {
	cursor: pointer;
}
input.button.primary:active {
	border: 1px solid #28292D;
	border-right-color: #28292D;
	border-bottom-color: #28292D;
}
/*******************************************************
			P A G E   A N D   C O L U M N   L A Y O U T
		*******************************************************/
#page-wrapper {
	/* FOR TESTING
				background-color: orange; / * overrides the graphic set in .body {} * /
*/				
	max-width: 1058px;
	min-width: 1058px; /*width:100%;*/
	padding: 0;
	margin: 0 auto;
}
/*****************************************
#page-columns-wrapper
	Wrapper div for the main left, center 
	and right columns. Its main purpose is to
	give a 'relative' position for the 
	columnst to trigger of off and
	to provide the main offset below
	the header graphic and header stuff.
	
	The margin top puts this below all
	the header stuff which is taken out
	of the documents positioning order
	since the header is positioned
	 either absolute or relative

	margin-top: 136px; 
		is the height of the top graphic
	The padding puts a little room on the left
	and right before the color of the 
	'body' style. 
	
   min-height:	700px;	
      Makes sure the footer is pushed 
   down enough so that the right1col
   does not overwrite it.

#page-columns-wrapper 
	position:	static;	
	left:			0px; 
	margin-top: 136px; 
	margin-left:auto;	margin-right:auto;	
	padding: 	0px 20px 0px 20px; 	
	border: 		0;
	min-height:	700px;	
}
	top : 			136px;
******************************************/
#page-columns-wrapper {
	position: relative;	/* Allows all contents to float left and right togethe */
	left: 0px;
	margin-top: 136px;
	padding: 0px 20px 0px 10px;
	border: 0;
	min-height: 1600px; /* Must be more than the longest column, e.g the righ-side column
/*   overflow: hidden; */
}
#page-left-column {
	width: 0px;
	float: left;
	padding: 0px 0px 0px 0px;
}
/*****************************************
#page-right-column
	Wrapper for the right-most column in 
	the body. 20-Oct-2011 It is used in 
	templates when defining a two colum
	layout. Contains General Blurb and
	'Works great...' boxes.
	To position in relation to the Main
	body content to its left set the 
	'left' property element which should
	be coordinated with 'center1col' width.

	There are three ways of pushing the 
	left column closer to the main colume:
	1) make the main colume wider
	2) change the widths of the #main
	   container, e.g.
	  	max-width: 1038px; min-width:1038px;
	3) increase the right margin.
	   e.g. 	margin-right: 50px;
	
	Of the three, #2 is by far the best.
	top: 150px; 
******************************************/
#page-right-column {
	display: block;
	position: absolute;
	top: -120px; /* 20 pixels above the bottom of the header graphic */
	left: 800px;
	width: 280px;
	margin: 0 auto;
	padding: 0;
	overflow: visible;
}
/*****************************************
#page-center-column
	Although this comes after #right1col
	it is the container fore the left column
	which floats to its right.
margin: -115px 0px 0px 0px; 

	padding-bottom: 500em;
   margin-bottom: -500em;
******************************************/
#page-center-column {
	position: static;
	top: -46px;
	left: 0px;
	width: 736px; /* COMMENT: Added for when dealing with full-right layouts  */
	margin: 0;
	padding: 0;
}
/*****************************************
#content-page-title
	Styles the H1 heading at the top of
	the page content. Style is set in
	fbmain-2col.dwt template
	
******************************************/
#content-page-title {
	margin-bottom: 2em;
}

/*for when the page titles wrap */
#content-page-title h1 {
    line-height: 1.2;
    font-size: 36px;

}

/*****************************************
#
******************************************/
.div_third_enclose {
	width: 66%;
	float: left;
}
.div_third_m {
	margin: 0;
	padding: 0;
	width: 49%;
	float: right;
}
.div_third_r {
	margin: 0;
	padding: 0;
	width: 33%;
	float: right;
}
/*******************************************************
									H E A D E R
		*******************************************************/

/*****************************************
#page-header-wrapper
	Note the min and max widths. As of
	20-Oct-2011 I don't know if these
	actually do anything or not.
	top:0px;	
	left:0px;	
	 
******************************************/
#page-header-wrapper {
	position: absolute;
	top: 0;
	padding: 0px;
	border: 0px;
	width: 100%;
	min-width: 1058px;
	max-width: 1058px;
}
/*****************************************
#page-header-content

******************************************/
#page-header-content {
	position: absolute;
	min-width: 1058px;
	max-width: 1058px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	border: 0px;
}
/*   #page-header-logo					{ position: absolute; top:  20px; left:  300px;	width: auto; 	height: 76px; border-width: 0; }
*/
#page-header-logo {
	position: absolute;
	top: 13px;
	left: 177px;
	width: auto;
	height: 100px;
	border-width: 0;
}
/* positioning for 72x72 icon
   #page-header-icon_fb				{ position: absolute; top:  10px; left:  25px;	width: auto; 	height: 76px; border-width: 0; float:right; z-index:998;}
*/
/* positioning for 48 x 48 icon */
#page-header-icon_fb {
	position: absolute;
	top: 42px;
	left: 100px;
	width: auto;
	height: 52px;
	border-width: 0;
	float: right;
	z-index: 998;
}
#page-header-bookmark {
	position: absolute;
	top: 28px;
	left: 778px;
	height: 50px;
	width: 300px;
	text-align: left;
}
/* #page-header-content #page-header-stuff1 #page-header-bookmark {} */

#page-header-search {
	position: absolute;
	top: 54px;
	left: 772px;
	overflow: visible;
	text-align: left;
	display: inline;
}
/*******************************************************
 				T H E   Z O O M   S E A R C H   B O X
		*******************************************************/
input.search_text {
	color: #050;
	font-family: helvetica, sans-serif;
	font-weight: normal;
	background-color: transparent;
	border: 1px #696 solid;
	border-right-color: #363;
	border-bottom-color: #363;
	margin: 0;
}
/************************           HEADER        **************************/
		/***************************************************************************/
		/***************************************************************************/


		/***************************************************************************/
		/***************************************************************************/
		/************************           FOOTER        **************************/
/*
		Order of divs in 'fbmain-2col.dw' as of 20-Oct-2011 
			<div id="page-footer"><div id="footer">
*/
#page-footer {
	width : 100%;
	margin: -10px 0 0 0;
	padding: 0px;
	background: url('../../graphics/footer_bg.jpg') repeat-x center top;
}
#page-footer-content {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 30px 0px 10px 0px;
	min-width: 1058px;
	max-width: 1058px;
	text-align: center;
	font-size: 13px;
	line-height: 0.5;
	color: #271104;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#page-footer-content p {
	margin: 0;
	padding: 0;
	color: #271104;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 13px;
	line-height: 1;
}
#page-footer-content a:visited {
	color: #000000;
	text-decoration: underline;
}
#page-footer-content a:hover {
	color: #000000;
	text-decoration: none;
}
#page-footer-content a:active {
	color: #000000;
	text-decoration: underline;
}
p#main_copyright_notice {
	margin-top: 0.5em;
	margin-bottom: 1em;
	font-size : 90%;
}
/************************           FOOTER        **************************/
		/***************************************************************************/
		/***************************************************************************/

/****************************************************************************
	<div id="LeftAndRight" style="display:none; visibility:hidden">
		 #BeginEditable "upperright" 
		
					UPPER RIGHT- - - - - UPPER RIGHT- - - - - UPPER RIGHT- - - - - UPPER RIGHT
						< ! - - webbot bot="Include" U-Include="../cmmon/ur_buy_box.htm" TAG="BODY" - - >
					
		 #EndEditable 
		 #BeginEditable "upplerleft" 
		
					UPPER LEFT- - - - - UPPER LEFT- - - - - UPPER LEFT- - - - - UPPER LEFT
					< ! - - webbot bot="Include" U-Include="../SiteSupport/common/ul_notice.htm" TAG="BODY" - - >
					
		 #EndEditable 
	</div>
*************************************************/	
#LeftAndRight {
	display: none;
	visibility: hidden;
	position: absolute;
	top: 10px;
	left: 10px;
}
