/*
MAIN CSS FILE
NOTES: (to help with maintainability please follow these) 
	- order properties alphabetically
	- keep this file ordered according to how it is ordered in HTML
		ie.  header, navbar, breadcrumb, content, sidebar, footer (or similar)
	- keep 'global classes' at the BOTTOM of this file
*/


/***** CONSTANTS / DOCUMENATION *****/

	/*
	
	[Reference ONLY - although there are some interesting ideas to have it go through a php script here;
	http://www.wait-till-i.com/index.php?p=24]
	
	Dark grey (text): #333333
	Dark Blue (headings, links) #000066
	Mid Blue (header) #333399
	Light blue (top navigation) #CCCCFF
	Mid grey: #666666
	 
	*/


	
@import "input_forms.css";
@import "menuh.css";
@import "productMenu.css";

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

html, body {
	border: 0;
	margin: 0;
	padding: 10px 0 0 0;
}

html { 
	font-size: 100%; 
}

body {
	background: #EEE url(../images/main_background2.jpg) repeat-x left top;
	font-family: arial, verdana, helvetica, sans-serif; /* In order of preference */
	font-size: 62.5%; /* This will make the default user font size in 1:10 ratio to pixels (now 1.3em is approximately 1.3px). See http://www.avengex.com/tutorials/206/ */
	text-align: center;
	height:100%; /* 100 % height */
}

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

h1, h2, h3, h4, h5, h6 {
	color:			#333;
	margin:		0;
	padding:		0;
}

h1 {
	color:			#990000;
	font-size:		2.0em;
	font-weight:	bold;
	letter-spacing:-1px;
}

h2, h3 {
	font-size:		1.8em;
	font-weight:	bold;
	letter-spacing:-1px;
}

h3 {
	font-size:		1.2em;
	letter-spacing: 0;
	padding: 		0;
	font-weight: 	bold;
}

h4 {
	font-size:		1.0em;
	font-weight:	bold;
}

p  {
	margin:		0;
	padding:		0 0 15px 0;
}

ul {
	list-style:	disc;
	padding-left:	10px; /* have to set both padding/maring because different browser use different ones here*/
	margin-left:	10px; 
	text-indent:  -2px;
}

li {
	padding:		0 0 0 -5px;
}

ul ul {
	padding-left:	5px;
	margin-left:	5px; 
}


blockquote {
	margin:		5px 0 10px 25px;
	padding:		0;
}


hr {
	color: 		#CCC;
	background-color: #CCC;
	border:		none;
	height: 		1px;
}

small {
	font-size:		0.85em;
}

img {
	border:		0;
}

sup {
	bottom:		0.2em;
	position:		relative;
	vertical-align:baseline;
}

.note {
	vertical-align: super;
	font-size:		0.8em;
}

.note-text {
	font-size: 	0.9em;
	padding-bottom: 10px;
}

sub {
	bottom:		-0.2em;
	position:		relative;
	vertical-align:baseline;
}

acronym, abbr {
	border-bottom:1px dashed;
	cursor:		help;
	letter-spacing:1px;
}

br.clear {
  clear: 			both;
  height: 			0;
  line-height: 	0px;
}

.clear {
	clear: 		both;
}

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

a:link { 
    color: 		#1D62B3;
	text-decoration: none;
}

a:visited { 
	color: 		#1D62B3;
	text-decoration: none;
}
a:hover { 
	color: 		#333;
	text-decoration: underline;

}

a:active { 
}

/***** Forms *****/

form {
	display:		inline;
	margin:		0;
	padding:		0;
}

input, select, textarea {
	font:			1em arial, helvetica, sans-serif;
}

textarea {
	line-height:	1.25;
}

/*
label {
	cursor:		pointer;
}
*/

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

table {
	border:		0;
	margin:		0 0 18px 0;
	padding:		0;
}

table tr td {
	padding:		2px;
	font-family: 	Verdana, Arial, Helvetica, sans-serif; /* In order of preference */
	font-size: 	11px;
}


/*******************************   PAGE LAYOUT

#wrapper
	#header
	#navbar
	#spacer
	
	#contentContainer
		#breadcrumb
		#sidebar
		#content
	
	#spacer
	#footer

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



#wrapper {
	color:			#666;
	font-size: 	12px;
	margin-left: 		auto;
    	margin-right: 	auto;
	padding-top:	4px;
	text-align: 		left;
	width: 		800px;
}

#header {
	background: 	url(../images/headerImage.jpg) no-repeat center top;
	height: 		175px;
	padding-left:	1px;
	padding-right:1px;
	margin:		0;
}


/***** NAVIGATION *****/

#topBar {
	background:   url(../images/navBkg.png) repeat-x center 130px;
	height: 		170px;
	padding-left:	 10px;
	vertical-align: bottom;
}


/****** SEARCH BAR ********/
#searchBar {
	height:		20px;
	font-size:		12px;
	text-align: 	right;
	padding-top:  20px;
	padding-right: 5px;
}


/****** USER BAR / BREADCRUMB BAR ********/

#titleBar {
	color:			#333;
	background: 	url(../images/titleBkg.png) repeat-x center bottom;
	border:		1px #CCC solid;
	height:		15px;
	padding:		5px 0 5px 0;
}

#titleBar a {
	color:			#333;
}

#breadcrumbBar {
	color:			#333;
	float:			left;
	padding-left:	10px;
	text-align: 	left;
	width:			55%;
	height:		15px;
}

#userBar {
	color:			#333;
	padding-right:10px;
	text-align:	right;
	height:		15px;
}

#userBar a { 
}

#userBar a:hover {
}


/**** CONTENT *******/

#contentContainer 	{	
	background: 	#FFF url(../images/titleBkgShadow.png) repeat-x center top;
	border: 		#CCC 1px solid;
	border-top:	none;
	border-bottom:none;
	margin:		0 0;
	padding: 		25px 0 15px 0;
	overflow: 		auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
	position: 		relative;	
	width: 		100%; /*  IE fix to get border/background to display when left child div is longer then right [http://www.quirksmode.org/css/clearing.html] */
	max-width: 	798px;
	
}

#content {
	text-align:   justify;
	padding:		0 15px 0 15px;
}

#contentLeft {	
   display:		inline;
	font-size: 	10px;
	float: 		left;
	text-align:	left;
	width: 		165px;
}


#contentRight {	
	text-align:	left;
	float: 		right;
	display: 		inline;
	position: 		relative;
	width: 		630px;
}


/**** FOOTER *******/


#footer {
	font-size: 	10px;
	background: 	url(../images/main_roundedBottom.jpg) no-repeat center top;
	clear: 		both;
	padding: 		25px 10px 20px 10px;
	text-align: 	center;
}


/***** 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; }
.text-padding	{ padding-bottom: 10px; }

.bold 			{ font-weight:bold; }
.italic 		{ font-style:italic; }
.underline 		{ border-bottom:1px solid; }
.highlight 		{ background:#ffc; }

.green 			{ color: green; }
.red 			{ color: red; }

.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; }

.warning {
	background: 	#FFFFCE url(../images/warning.gif) no-repeat 10px center;
	border: 		1px solid #F0C000;
	padding: 		10px 10px 10px 32px;
}


/**** SECTION CONTENT  *******/
.section {
	background: 	#F6F6F6 url(../images/main_leftSectionBottom.png) no-repeat left bottom;
	text-align:	left;
	width:			150px;
	padding-bottom:11px;
}

.sectionHeader {
	padding:		0;
	margin:		0;
	height:		100px;
}

.sectionContent {
	background: 	#F6F6F6 url(../images/main_headerImageBottomBorder.png) repeat-x left top; /* the bottom shadow for the header image */
	border-right:	1px solid #CCC;
	padding:		10px 5px 0 5px;
}


#userBar  img {
	vertical-align: middle;
	padding-right: 2px;		
}