/* body : flat gray background */

body {
	background-color: #333333;
	text-align: center;
	height: auto
}

/* outerframe : small spacing from top, center in page, white background */

.outerframecontainer {
	padding: 0 0 0 0;
	margin-left: auto;
	margin-right: auto;
	width: 53em;
}

.outerframe {
	float: left;	
	background-color: white;
	margin-left: auto;
	margin-right: auto;
	width: 53em;
	height: 100%;
	padding: 1em 1em 1em 1em
}

html>body .outerframe {
	width: 55em;
	height: auto
}

/* innerframe : inside outerframe, centered in outerframe, beige pattern background, small even spacing around, thin aqua border */

.innerframe {
	float: left;	
	position: relative;	
	background: #FFDA90 url("/bgbeige.jpg") repeat;
	width : 53em;
	height: auto;
	padding : 1.5em 1em 1.5em 1em;
	margin: 0 0 0 0;
	border: 1px solid #5F9EA0
}

/* topleftimage : small image at top left, short and wide, fit next to toprightmenu */

.topleftimage {
	float: left;
	background-color : white;
	width : 24em;
	height : 3em;
	margin 0
}

/* toprightmenu : same height as topleftimage, contains menu items with dropdown dark gray background */

.toprightmenu {
	float: left;
	background-color: #333333;
	width: 28.75em;
	height: 3em;
	margin-top: 0;
	margin-left: 0.25em;
	margin-right: 0;
	white-space: nowrap;
	overflow: visible;
	text-align: center;
	padding: 0
}

.largelogopanel {
	float: left;
	width: 24em;
	height: 15.8em;
	margin-top: 0.25em;
	margin-left: 0;
	background-color: white;
	border: 0
}
/* heroimagepanel : to right of largelogopanel, may contain flash animation or static image */
.heroimagepanel {
	position: relative;
	float: left;
	width: 28.75em;
	height: 15.8em;
	margin-top: 0.25em;
	margin-left: 0.25em;
	background-color: white;
	z-index: 0
}

/* quotepanel : contains a quote relevant to the current page, dark gray background */
.quotepanel {
	float: left;
	height: 3em;
	margin-top: 0.25em;
	margin-left: 0;
	margin-right: 0;
	background-color: #333;
	text-align: center;
	width: 100%
}

/* cartpanel : displays details of the shopping cart */
.cartpanel {
	float: left;
	height: 3em;
	margin-top: 0.25em;
	margin-left: 0;
	margin-right: 0;
	background-color: #333;
	text-align: right;
	width: 100%
}

/*html>body .quotepanel {
	width: auto
}*/

.quotepanel p {
	color: #CECECE;
	font-family: verdana;
	font-size: 80%;
	margin-top: 1.2em;
	letter-spacing: 0.4em;
	text-shadow: #666 3px 3px 2px
}

/* in the quotepanel we have a need for smaller text also */
.smalltext {
	margin-top: 1.1em;
	font-size: 50%
}

/* bottombox : to contain all the guff down below and keep it aligned */

.bottombox {
	float: left;
	width: 100%;
}

/* lowerleftimage : image in lower left corner, floating */
.lowerleftimage {
	position: absolute;
	margin: auto auto 2em 1em;
	width: 10em;
	height: 10em;
	bottom: 0;
	left: 1em;
}

.promoimage {
	float: left;
	margin: 2em auto 2em 1em;
	width: 22em;
	max-height: 10em;
}

a .promoimage {
	border:0;
}

/* contactpanel : contains contact details, lower middle of page */
.contactpanel {
	position: absolute;
	margin: 0 0 0.5em 1em;
	width: 12em;
	bottom: 1em;
	left: 12em;
	text-align: left
}

.contactpanel p {
	font-size: 60%;
	letter-spacing: -0.05em
}

/* contentpanel : contains main content (text), lower right of page */
.contentpanel {
	float: right;
	margin: 1em 0 0 0;
	width: 28em;
	height: auto;
	padding: 0.5em 0em 0.5em 0.75em;
	border-left: 1px solid #CECECE;
	text-align: left
}

/* cartpanel : displays details of the shopping cart */
.cartpanel {
	float: left;
	height: 1.75em;
	margin-top: 0.25em;
	margin-left: 0;
	margin-right: 0;
	background-color: #333;
	text-align: left;
	width: 100%
}

.cartpanel p {
	color:#FFF;
	margin:0.5em;
	float:left;
	}
	
.cartpanel .checkout {
	text-decoration:none;
	background:#337697;
	color:#FFF;
	float:right;
	height:1.5em;
	margin:0.25em 0.25em 0 0.25em;
	padding:0;
	border:none;
	width:auto;
	}
	
.cartpanel .checkout a {
   text-decoration:none;
	color:#FFF;
	}