html, body {
	margin: 0;
	padding: 0;
	background-color: #000;
	color: #fff;
	font-family: verdana, arial, sans-serif;
	font-size: 10px;
	}

/* LAYOUT */


#wrapper {
	position: absolute;
	width: 780px;
	height: 504px;
	visibility: hidden;
	}
#invoice {
	position: absolute;
	top: 30px;
	left: 50%;
	margin-left: -390px;
	margin-top: 0;
	margin-bottom: 30px;
	height: 600px;
	}	
.leftcol {
	position: absolute;
	top: 0;
	left: 0;
	width: 260px;
	height: 504px;
	background-color: #000;	
	}
.centercol {
	position: absolute;
	top: 0;
	left: 260px;
	width: 260px;
	height: 504px;
	background-color: #1e1e1e;
	}
.rightcol {
	position: absolute;
	top: 0;
	left: 520px;
	width: 260px;
	height: 504px;
	background-color: #333;
	}
.rightcolwide {
	position: absolute;
	top: 0;
	left: 520px;
	height: 504px;
	}
.righthalf {
	position: absolute;
	top: 0;
	left: 390px;
	height: 504px;
	width: 375px;
	padding-left: 15px;
	background-color: #333;
	}

/* On the invoice page, override the height of the columns */

#invoice .leftcol {
	height: 600px;
	background-color: #0f0f0f;	
	}
#invoice .centercol {
	height: 600px;
	}
#invoice .rightcol {
	height: 600px;
	}

/* On the invoice page, place the logo in the right place */

#invoice .leftcol .logo {
	position: absolute;
	top: 30px;
	left: 15px;
	}

/* popup styles */

.popupcol {
	position: absolute;
	top: 0;
	left: 0;
	padding: 15px;
	width: 260px;
	height: 100%;
	background-color: #333;
	}
.popupcol textarea {
	height: 285px;
	}
.popuplogo {
	width: 100%;
	text-align: right;
	margin-bottom: 20px;
	}
.popupwide {
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px 0px 15px 15px;
	width: 365px;
	height: 100%;
	background-color: #333;
	}

/* \ real value for all browsers except Mac IE, which will ignore the following rule */
.popupcol { padding-right: 0px; width: 230px; }	
/* \ real value for all browsers except Mac IE, which will ignore the following rule */
.popupwide { padding-right: 15px; width: 345px; }	


/* GENERAL TEXT STLES */

a {
	color: #a2a2a2;
	text-decoration: none;
	}
a:hover {
	color: #fff;
	}
p {
	line-height: 15px;
	margin: 0;
	}
p.new {
	margin-top: 15px;
	}
p.halfnew {
	margin-top: 5px;
	}
.error {
	color: #f30;
	}
.columnhead p {
	margin-bottom: 5px;
	}

ul.nobullets {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 15px;
	color: #fff;
	}
ul.nobullets li {
	margin-bottom: 5px;
	}
	
	
	
/* IMAGES */

img {
	border: 0;
	}
	
/* for the pagination arrows, move them over. */

.arrows {
	margin-left: 6px;
	width: 40px;
	height: 12px;
	vertical-align: -3px;
	}
	
/* CONTENT REGIONS */
	
.columnhead {
	position: absolute;
	top: 0;
	left: 0;
	margin: 28px 15px 6px 15px;
	width: 230px;
	height: 40px;
	}
.columnlead {
	position: absolute;
	top: 74px;
	left: 0;
	width: 260px;
	height: 75px;
	}
.forcebottom {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 260px;
	padding: 0 15px 6px 15px;
	}
.columnbody {
	position: absolute;
	top: 149px;
	left: 0;
	padding: 0 15px 5px 15px;
	width: 230px;
	height: 254px;
	}
.columnbodytall {
	position: absolute;
	top: 149px;
	left: 0;
	width: 230px;
	height: 294px;
	padding: 0 15px 5px 15px;
	}
.columnfoot {
	position: absolute;
	top: 408px;
	left: 0;
	margin: 0px 15px 0px 15px;	
	width: 230px;
	height: 40px;
	}
.columnpolicies {
	position: absolute;
	top: 450px;
	left: 0;
	margin: 7px 15px 0px 15px;
	width: 230px;
	height: 41px;
	}


/* scrollbar settings for IE 5.5+ */


.rulesshortscroll, .rulesmedscroll, .rulestallscroll, .rulesventiscroll, .ruleselastic, .rulebelowelastic {
	border-top: 1px;
	border-right:  0px;
	border-bottom: 1px;
	border-left:  0px;
	border-color: #3a3a3a;
	border-style: solid;
	}
	
/* now the specifics for each size of scrollable region*/

.rulesshortscroll {	
	width: 230px;
	height: 100px;
	overflow: auto;
	padding-top: 5px;
 	padding-right: 16px; /* value for Mac IE, real value for other browsers below */
 	}
.rulesmedscroll {
	width: 230px;
	height: 161px;
	overflow: auto;
	padding-top: 5px;
 	padding-right: 16px; /* value for Mac IE, real value for other browsers below */
 	}
.rulestallscroll {
	width: 230px;
	height: 188px;
	overflow: auto;
	padding-top: 5px;
 	padding-right: 16px; /* value for Mac IE, real value for other browsers below */
 	}
.rulesventiscroll {
	width: 230px;
	height: 260px;
	overflow: auto;
	padding-top: 5px;
 	padding-right: 16px; /* value for Mac IE, real value for other browsers below */
 	}
.largescroll {
	width: 360px;
	overflow: auto;
	height: 454px;
	margin: 30px -15px 15px 0;
 	padding-right: 16px; /* value for Mac IE, real value for other browsers below */
  	}
 	
/* \ real value for all browsers except Mac IE, which will ignore the following rule */
.rulesshortscroll { padding-right: 0px; width: 230px; }	
/* \ real value for all browsers except Mac IE, which will ignore the following rule */
.rulesmedscroll { padding-right: 0px; width: 230px; }	
/* \ real value for all browsers except Mac IE, which will ignore the following rule */
.rulestallscroll { padding-right: 0px; width: 230px; }	
/* \ real value for all browsers except Mac IE, which will ignore the following rule */
.rulesventiscroll { padding-right: 0px; width: 230px; }	
/* \ real value for all browsers except Mac IE, which will ignore the following rule */
.largescroll { padding-right: 0px; width: 100%; }	
/* \ real value for all browsers except Mac IE, which will ignore the following rule */
.forcebottom { padding-right: 0px; width: 230px; }	


/* Add padding so that paragraphs don't crash into the scrollbar */

.rulesshortscroll p, .rulesmedscroll p, .rulestallscroll p , .rulesventiscroll p, .rulesventiscroll p.new {
	padding-right: 5px;
	}
.largescroll p {
	padding: 0 15px 0 0;
	}
	
/* non-scrolling regions */

.noruleselastic {
	width: 230px;
	padding: 6px 0 0 0;
	}
.ruleselastic {
	padding-top: 5px;
	padding-bottom: 10px;
	width: 230px;
	}
.rulebelowelastic {
	border-top: 0;
	border-right: 0;
	border-left: 0;
	border-bottom: 1px;
	border-color: #3a3a3a;
	border-style: solid;
	padding: 5px 0;
	width: 230px;
	}
.ruleaboveelastic {
	border-top: 1px;
	border-right: 0;
	border-left: 0;
	border-bottom: 0;
	border-color: #3a3a3a;
	border-style: solid;
	padding: 5px 0;
	width: 230px;
	}
.rulebelowshort {
	border-top: 0px;
	border-right:  0px;
	border-bottom: 1px;
	border-left:  0px;
	border-color: #3a3a3a;
	border-style: solid;
	padding: 5px 0;
	width: 230px;
	height: 93px;
 	}
/* \ real value for all browsers except Mac IE, which will ignore the following rule */
.rulebelowshort { height: 83px; }	

.rulebelowshort .rulebelowelastic {
	padding: 0;
	}

/* code to do left & right alignment on one line */

.left {
	width: 115px;
	line-height: 15px;
	}
.right {
	width: 65px;
	margin-right: 5px;
	float: right;
	text-align: right;
	line-height: 15px;
 	}
.rulebelowelastic .leftright {
	line-height: 20px;
	padding-bottom: 5px;
	}
.rulebelowelastic .right {
	width: 102px;
	}

	
/* STYLES TO CONTROL CONTENT WITHIN SCROLL REGIONS */

/* container for product variations */

.variation {
	margin: 15px 0 0 0;
	}

/* container if there is no meta description for the product. Used in the cart. */

.variationnometa {
	margin: 5px 0 0 0;
	}

/* used for radio buttons, checkboxes, or key per varation */

.legend {
	float: left;
	text-align: left;
	width: 15px;
	}
	
/* Indent the left edge of product descriptions to clear the radio button/checkboxes */
.description {
	margin-left: 20px;
	}
.variation .left, .variationnometa .left {
	margin-left: 20px;
	}

/* If there are no checkboxes/radio buttons */

.variationnocontrols {
	margin: 15px 0 0px 0;
	}
.variationnocontrols .description {
	margin-left: 0px;
 	}

/* FORM STYLES */	

form {
	margin: 0;
	padding: 0;
	}

/* styles for divs that hold form elements and labels */

.formrowlabelabove {
	margin-bottom: 4px;
	clear: both;
	height: 35px;
	}
.formrowelastic {
	margin-bottom: 4px; /* consider removing this. */
	}	
.formrownolabel {
	margin-bottom: 4px;
	clear: both;
	height: 20px;
	}
.formfloatL {
	float: left;
	width: 111px;
	}
.formfloatR {
	float: right;
	width: 111px;
	}
.formfloatqtr {
	float: left;
	width: 55px;
	}

/* style for text form buttons on each page */
	
.formbuttons {
	margin-top: 10px;
	color: #5a5a5a;
	width: 230px;
	}

/* basic styles for form elements */

select {
	font-family: verdana;
	border: 0px;
	font-size: 10px;
	height: 15px;
	margin: 0;
	padding: 0;
	background-color: #999;
	}
select.card {
	width: 107px;
	}
select.date {
	width: 51px;
	}
textarea {
	width: 230px;
	font-family: verdana;
	font-size: 10px;
	border: 1px;	
	margin: 0;
	padding: 0;
	background-color: #999;
	}
input {
	font-family: verdana;
	border: 0px;
	font-size: 10px;
	height: 15px;
	margin: 0;
	padding: 0;
	}	
input.field {
	width: 230px;
	border: 1px;
	background-color: #999;
	margin-bottom: 2px;
	}
.formfloatL input.field {
	width: 111px;
	}		
.formfloatR input.field {
	width: 111px;
	}		
.formfloatqtr input.field {
	width: 51px;
	}
.formfloatqtr select {
	width: 51px;
	}	
input.fieldqtr {
	width: 51px;
	border: 1px;
	background-color: #999;
	margin-bottom: 2px;
	}		
input.field3qtr {
	width: 171px;
	border: 1px;
	background-color: #999;
	margin-bottom: 2px;
	}		


/* LIGHTBOX */

.lightbox {
	position: absolute;
	left: 0;
	top: 0;
	}
.lightbox1 {
	position: absolute;
	left: 0;
	top: 0;
	width: 325px;
	}
.lightbox2 {
	position: absolute;
	left: 325px;
	top: 0;
	width: 325px;
	}
.lightbox3 {
	position: absolute;
	left: 650px;
	top: 0;
	width: 325px;
	}
.lightbox4 {
	position: absolute;
	left: 975px;
	top: 0;
	width: 325px;
	}
.lightbox5 {
	position: absolute;
	left: 1300px;
	top: 0;
	width: 325px;
	}
.lightbox6 {
	position: absolute;
	left: 1625px;
	top: 0;
	width: 325px;
	}
.lightbox7 {
	position: absolute;
	left: 1950px;
	top: 0;
	width: 325px;
	}
.lightbox8 {
	position: absolute;
	left: 2275px;
	top: 0;
	width: 325px;
	}
.lightbox9 {
	position: absolute;
	left: 2600px;
	top: 0;
	width: 325px;
	}
.lightbox10 {
	position: absolute;
	left: 2925px;
	top: 0;
	width: 325px;
	}

.anchors {
	position: absolute;
	top: 250px;
	left: 278px;
	}
.autoscroll {
	position: absolute;
	top: 28px;
	left: 283px;
	}

	
/* thumbnail positions */
	
.thumbnail1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 130px;
	}
.thumbnail2 {
	position: absolute;
	top: 168px;
	left: 0;
	width: 130px;
	}
.thumbnail3 {
	position: absolute;
	top: 336px;
	left: 0;
	width: 130px;
	}
.thumbnail4 {
	position: absolute;
	top: 0;
	left: 130px;
	width: 130px;
	}
.thumbnail5 {
	position: absolute;
	top: 168px;
	left: 130px;
	width: 130px;
	}
.thumbnail6 {
	position: absolute;
	top: 336px;
	left: 130px;
	width: 130px;
	}


/* style to overlay the key on top of the thumbnails */

.gridkey {
	position: absolute;
	top: 2px;
	left: 4px;
	color: #333;
	z-index: 100;
	}


/* UGLY SPACER HACKS */
	
.spacer {
	clear: both;
	height: 1px;
	font-size: 1px;	
	}
.spacer5 {
	clear: both;
	height: 5px;
	font-size: 1px;	
	}		
.spacer10 {
	clear: both;
	height: 10px;
	font-size: 1px;	
	}	
.spacer15 {
	clear: both;
	height: 15px;
	font-size: 1px;	
	}	
.tablestyle {
	border-top: medium none #333333;
	border-right: medium none #333333;
	border-bottom: medium none #333333;
	border-left: medium none #333333;
}
.front {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 12px;
	color: #FFFFFF;
}