/** Body setting. */
body { 
	font-size: x-small !important;
	background-color: #cccccc;
	line-height: 150%;
	height: 100%;
}

/** Global settings. */
* {	color: #545454; font-family: Arial; }

/** Hide space generated by the form tag. */
FORM { display: inline; }

/** Drop down boxes. */
SELECT, OPTION { font-size: 100%; font-family: Arial; width: 185px; }
SELECT.largeselect, OPTION { font-size: 100%; font-family: Arial; width: 390px; }
SELECT.small, OPTION { font-size: 100%; font-family: Arial; width: 90px; }
SELECT.custom, OPTION { font-size: 100%; font-family: Arial; width: auto; }
INPUT { font-size: 100%; font-family: Arial; width: 180px; }
INPUT.small { font-size: 100%; font-family: Arial; width: 90px; }
INPUT.double { font-size: 100%; font-family: Arial; width: 380px; }
TEXTAREA { font-size: 100%; font-family: Arial; width: 180px; }
TEXTAREA.double { font-size: 100%; font-family: Arial; width: 380px; }
TEXTAREA.triple { font-size: 100%; font-family: Arial; width: 590px; }
.checkbox { width: 15px; } 
.radio { width: 15px; } 

/** Links and objects that should mimic links. */
A, .link { font-size: inherit; color: #093cbe; text-decoration: underline; cursor: pointer; }
.smalllink { font-size: 90%; color: #093cbe; text-decoration: underline; cursor: pointer; }
.silverlink { font-size: inherit; color: #c2c2c2; text-decoration: underline; cursor: pointer; }
.nolink { font-size: inherit; color: black; text-decoration: none; cursor: pointer; }

/** Defines extremely small text. */
.tinytext { font-size: x-small; }

.newsHeader {
	color: #093cbe;
	font-weight:bold;
}
.newsSubHeader {
	color: #093cbe;
}

/** Bold text. */
.bold { color: #093cbe; font-weight: bold }
.flag { color: Red; font-weight: bold; }

#spacer { width: 70px; min-width: 70px; position: relative; }

/** Define the line used to seperate content. */
HR { background-color: black; height: 1px; }

/** General content settings, this should be applied to almost all tables. */
.content, .contentgrid { font-size: 120%; width: 800px; border-width: 0px; border-collapse: collapse; }
.content TR, .contentgrid TR { text-align: left; }
.content TD { padding: 0px; }
.contentgrid TD { padding: 2px; }

/** General content settings, this should be applied to almost all tables. */
body.modal { background-color: white; background-image: none; height: 100%; }
table.modal { font-size: 120%; border-width: 0px; border-collapse: collapse; table-layout: fixed; }
table.modal TR { text-align: left; }
table.modal TD.col1 { width: 90px; min-width: 90px; padding-right: 10px; text-align: right; vertical-align: top; }
table.modal TD.col3 { width: 80px; min-width: 80px; text-align: right; padding-top: 15px; }

/** General content settings, this should be applied to almost all tables. */
table.smallmodal { font-size: 120%; width: 300px; border-width: 0px; border-collapse: collapse; }
table.smallmodal TR { text-align: left; }
table.smallmodal TD { padding: 2px; }

/** Copyright. */
.copyright { padding-top: 30px; }
.copyright TD { padding: 10px; background-color: #ebebeb; color: #093cbe; }

/** Used for the filter criteria under the main navigation. */
#idFilter { background-color: #efefef; font-size: 120%; }

/** These styles are specific to the product listing pages. */
.categoryTitle { padding-top: 20px; padding-bottom: 10px; font-weight: bold; }
.productTitle { font-size: 140%; font-weight: bold; }
.productText { padding-bottom: 10px; }
.productMoreInfo { margin-top: 10px; padding-bottom: 10px; }
.productMoreInfoDetails { /*height: 0px; */overflow: hidden; padding-left: 30px; }

/** Spacers. */
.spacer10 { margin: 10px; } 
.spacer20 { margin: 20px; } 
.spacer30 { margin: 30px; } 

/** Used for table/grid headers */
.gridHeader TD { padding: 3px; background-color: #ebebeb; color: #093cbe; text-align: center; }

/** Used for the filter criteria under the main navigation. */
.filterText { color: #093cbe; }

.required { color:red; vertical-align: top; }
.errorMessage { color:red; font-weight: bold;}

/** Used for the bread crumb display to show users where they are. */
.breadcrumbs { font-size: 120%; width: 800px; border-width: 0px; border-collapse: collapse; margin-bottom: 20px; }
.breadcrumbs TR { text-align: left; }
.breadcrumbs TD { color: #093cbe; }
.breadcrumbs SPAN { font-size: 100%; color: #093cbe; }

/** Defines the title of a given page */
.pageheader { font-size: 120%; color: #093cbe; font-weight: bold; margin-bottom: 10px; }
TD.pageheader { font-size: 120%; color: #093cbe; font-weight: bold; padding-bottom: 10px; }
TR.pageheader TD { font-size: 120%; color: #093cbe; font-weight: bold; padding-bottom: 10px; }
.pageheaderline { height: 20px; border-top: #093cbe 1px solid; } 

/** Controls the style of the more/less buttons. */
.moreless { text-align: right; margin-top: 0px; border-top: 1px black solid; }

/** Used to control the general grid used to display product grids. */
table.grid { font-size: 120%; width: 800px; border-width: 0px; border-collapse: collapse; table-layout: fixed; }
table.grid TR { text-align: left; }
table.grid TD.formLabels { width: 185px; min-width: 185px; padding-right: 20px; vertical-align: top; text-align: right; padding-top: 4px; }
table.grid TD.formLabelBold { width: 185px; min-width: 185px; padding-right: 20px; vertical-align: top; text-align: right; font-weight: bold; }
table.grid td.formFields { width: 185px; min-width: 185px; padding-right: 20px; vertical-align: top; padding-bottom: 4px; }

table.grid TD.left1 { width: 185px; min-width: 185px; padding-right: 20px; vertical-align: top; }
table.grid TD.left1small { width: 115px; min-width: 115px; padding-right: 20px; vertical-align: top; }
table.grid TD.moreinfo { width: 595px; min-width: 595px; color: #093cbe; vertical-align: top; }
table.grid TD.right3 { width: 595px; min-width: 595px; vertical-align: top; }
table.grid TD.col1, TD.col2, TD.col3 { width: 185px; min-width: 185px; padding-right: 20px; vertical-align: top; }
table.grid TD.col4 { width: 185px; min-width: 185px; vertical-align: top; }
table.grid TD.left2 { width: 390px; min-width: 390px; padding-right: 20px; vertical-align: top; }
table.grid TD.right2 { width: 390px; min-width: 390px; vertical-align: top; }

.formButtons { padding-top: 10px; cursor: pointer; }

.errorAlert { color: #ff0000; border: #ff0000 2px solid; padding: 5px; }
.systemAlert { font-size: inherit; color: #093cbe; border: #093cbe 2px solid; padding: 5px; }

/** Used to define list items in unorder lists (do not use the <UL> tag for ordered lists) */
li {
	list-style-position: outside;
	list-style-image: url(../buttons/bulleton20.jpg);
	margin-left: 21px;
	padding-left: 15px;
	padding-top: 5px;
}

/** Main menu item style. */
#dropmenudiv{
	position:absolute;
	/*padding-bottom: 6px;*/
	line-height:30px;
	z-index:100;
	/*
	background-position: bottom;
	background-image: url(../layout/bottom-menu-border.jpg);
	background-repeat: repeat-x;
	*/
}

/** Controls style for each item in menus. */
#dropmenudiv a{
	font-size: 120%; 
	width: 300px;
	height: 30px;
	display: block;
	text-indent: 3px;
	border-bottom: 1px solid white;
	padding: 1px 10px 1px 8px;
	text-decoration: none;
	vertical-align: middle;
	background-color: #d7d7d7;
}

/** Controls style for each item in menus when highlighted. */
#dropmenudiv a:hover{ background-color: #ebebeb; }

/** Style assigned to first menu item to get the shadow effect. */
#dropmenudiv a.firstMenuItem{ background: url(../layout/top-menu-border.gif) #d7d7d7 0 no-repeat; background-position: -320px 0; }

/** Style assigned to first menu item to get the shadow effect when it's selected. */
#dropmenudiv a:hover.firstMenuItem{ background: url(../layout/top-menu-border.gif) #ebebeb 0 repeat-x; background-position: 0px 0; }

/** This defines the div used to zoom in on the product image. */
#productzoom{
	position: absolute;
	border: 1px black solid;
	padding: 10px;
	background-color: white;
	visibility: hidden;
	text-align: left;
	z-index: 100;
}