/************************************
default styles - should be obvious
**************************************/

body {
	background-color: #e7e8e2;
}

h1 {
	font-family: Geneva, Arial, sans-serif;
	font-size: 20px;
}

/************************************
div.main - style for container div
on main page
**************************************/

div.main {
	width: 800px;
	background-color: #FFF;
	border: 2px solid #CCC;
	padding: 10px;
	text-align: center;
}

/************************************
#header - border style for header image
**************************************/

#header {
}

div.title {
	font-size: 24px;
	font-family: Arial, sans-serif;
	font-weight: bold;
	vertical-align: middle;
	border: 1px solid #CCC;
	width: 780px;
}

/************************************
These classes were imported from 
another CSS sheet. They define the top 
grey bar with the home, latest.., 
about us, etc. links
**************************************/

.path {
	background: #949490;
	color: #FFF;
	font: normal 13 Verdana,sans-serif;
	padding-top:3px;
	padding-bottom: 3px;
	text-align: center;
	width: 780px;
}

.path a {
	color: #FAFAFA;
	text-decoration: none;
}

.path a:hover {
	color: #FFF;
	text-decoration: underline;
}


/************************************
p.cen - centered paragraph style
**************************************/

div.cen {
	text-align: center;
	margin: 0 auto;
}

div.help_text {
	text-align: center;
	width: 500px;
	border: 1px solid #CCC;
	padding: 12px;
	margin: 24px;
}

/************************************
progress_bar - table class for progress
bar on online store
**************************************/

table.progress_bar {
    width: 100%;
	border: 1px solid #000;
	border-collapse: collapse;
	margin-top: 12px;
}

table.progress_bar th {
    font-weight: bold;
    font-size: 18px;
	border-bottom: 1px solid #CCC;
	padding-bottom: 5px;
}

table.progress_bar td {
    padding: 8px;
	text-align: center;
    font-size: 12px;
	background-color: #EEE;
	color: #666;
	border-top: 1px solid #CCC;
	border-right: 1px dotted #CCC;
}

table.progress_bar td.completed {
    padding: 8px;
	text-align: center;
	font-size: 12px;
	background-color: #FFF;
	color: darkgreen;
}

table.progress_bar td.selected {
    padding: 8px;
	text-align: center;
	font-size: 12px;
	background-color: #FFF;
	color: darkred;
}

/************************************
criteria - table class for criteria
selection table on first page of
online store
**************************************/

table.criteria {
    width: 100%;
	border-collapse: collapse;
	border: 1px solid #000;
	color: #000;
	background-color: #FFF;
}

table.criteria td {
	text-align: left;
    font-size: 12px;
	border-left: 1px solid #CCC;
	border-bottom: 1px solid #999;
	color: #000;
	background-color: #FFF;
}

table.checkout {
	
}

table.checkout td.right {
	text-align: right;
}

table.checkout td.center {
	text-align: center;
}

p.bold {
	font-weight: bold;
	font-size: 18px;
}

span.normal {
	font-weight: normal;
	font-size: 14px;
}

div.checkout_border {
	width: 80%;
	border: 1px solid #CCC;
}

span.star {
	color: darkred;
}

input.login {
	
}

/************************************
submit_button - submit buttons 
**************************************/

input.submit_button {
	border: 2px outset #FFF;
	background-color: #FFFBF0;
	font-size: 14px;
	font-weight: bold;
}

input.quote_button {
	border: 2px outset #FFF;
	background-color: #FFFBF0;
	font-size: 16px;
	font-weight: bold;
	color: #000;
}

div.search_control {
	margin-top: 4px;
	border: 1px solid #CCC;
	width: 80%;
	position: relative;
	display: none;
	padding: 8px;
}

.selection {
	border: 2px outset #FFF;
	background-color: #FFFBF0;
	font-size: 14px;
	font-weight: bold;
}

.campaign {
	border: 2px outset #FFF;
	background-color: #FFFBF0;
	font-size: 18px;
	font-weight: bold;
	width: 180px;
}

.location {
	border: 2px outset #FFF;
	background-color: #FFFBF0;
	font-size: 18px;
	font-weight: bold;
}

.adddel {
	border: 2px outset #FFF;
	background-color: #FFFBF0;
	font-size: 14px;
	color: #F00;
	font-weight: bold;
}

table.decision {
	text-align: center;
}

table.decision td {
	text-align: center;
	padding: 8px;
}

.search_dir {
    font-weight: bold;
    font-size: 18px;
    font-family: Arial;
    background-color: #FFF;
    color: #000;
    border: 2px outset #FFF;
    vertical-align: middle;
    margin-right: 8px;
    margin-left: 8px;
}

/************************************
categories - class for categories
table of checkboxes
**************************************/

table.categories {
    width: 100%;
	border-collapse: collapse;
	border: none;
	color: #000;
	background-color: #FFF;
}

table.categories tr.hlight {
	background-color: #FFC;
}

table.categories td {
	border: none;
	color: #000;
	background-color: #FFF;
	padding: 0px;
	text-align: left;
}

/************************************
states - class for states
table of checkboxes
**************************************/

table.states {
    width: 100%;
	border-collapse: collapse;
	border: none;
	color: #000;
	background-color: #FFF;
}

table.states tr.hlight {
	background-color: #FFC;
}

table.states td {
	border: none;
	color: #000;
	background-color: #FFF;
	padding: 0px;
	text-align: left;
}

/************************************
contents - cart contents table on
My Cart page
**************************************/

table.contents {
    width: 100%;
	border: none;
	color: #000;
	background-color: #FFF;
	border : 2px outset #FFF;
	margin-bottom: 16px;
}

table.contents tr.hlight {
	background-color: #FFC;
}

table.contents td {
	border: 2px inset #FFF;
	color: #000;
	background-color: #FFF;
	padding-top: 8px;
	padding-bottom: 8px;
	text-align: center;
}

/************************************
view - contants datagrid'ish control
style
**************************************/

table.view {
    width: 100%;
	color: #000;
	background-color: #FFF;
	border : 2px outset #FFF;
	border-collapse: collapse;
	font-size: 12px;
}

table.view th {
	border-bottom: 1px solid #000;
}

table.view td {
	border: 2px inset #FFF;
	color: #000;
	background-color: #EEE;
	text-align: center;
}

/************************************
info - style for span under categories
and states select listboxs
**************************************/

.info {
	font-size: 10px;
	color: darkred;
}

/************************************
footer - defines bottom part of
website, "site designed by..."
**************************************/

div.footer {
	background: #949490;
	color: #F7F7F2;
	font: bold 12px sans-serif;
	margin-top: 5px;
	padding: 10px 12px;
}

div.footer a {
	color: #CCC;
}

/* Styles for the text in footer */
.clearer {clear: both; font-size: 0;}
.left {float: left;}

/************************************
div.right : right aligned div style
**************************************/

div.right {
	text-align: right;
}

/************************************
div.login : right aligned div style
**************************************/

div.login {
	border: 1px solid #000;
	background-color: #DDD;
	vertical-align: middle;
}

input.login {
	border: 1px solid #999;
	font-size: 10px;
}

table.login {
	width: 100%;
}

table.long td {
	border: 2px inset #FFF;
}

/************************************
#cart: 'My Cart' image
**************************************/

#cart {
	margin-top: 10px;
	border: 2px outset #FFF;
}

#title {
	margin-top: 10px;
}

#popup {
	position: absolute;
	visibility: hidden;
	padding: 24px;
	background-color: #FFF;
	border: 3px ridge #FFF;
	z-index: 2;
}

#popup_shadow {
    position: absolute;
    visibility: hidden;
    background-color: #000000;
    color: #000000;
    filter: alpha(opacity=10);
    -moz-opacity: 0.1;
    opacity: 0.1;
    z-index: 1;
	width: 100px;
	height: 100px;
}

div.trigger {
	cursor: hand;
	font-size: 18px;
	text-align: left;
	width: 80%;
}

/************************************
trigger: Tree menu main branch style
**************************************/
div.trigger * {
	vertical-align: middle;
}

#states_box {
	width: 160px;
}

#states {
	width: 160px;
}

/************************************
buy - link style for buy now link
**************************************/

a.buy { 
    color: #000;
    border: 2px outset #FFF;
    text-decoration: none;
    font-weight: bold;
}

a.buy:visited { 
    color: #000;
    border: 2px outset #FFF;
    text-decoration: none;
    font-weight: bold;
}

a.buy:hover { 
    color: darkred;
    border: 2px outset #FFF;
    text-decoration: none;
    font-weight: bold;
}

a.buy:active { 
    color: #000;
    border: 2px outset #FFF;
    text-decoration: none;
    font-weight: bold;
}


/************************************
mylabel - javascript label class for
category checkboxes
**************************************/
span.mylabel {
	cursor: pointer;
}