/* ---------------- GLOBAL ELEMENTS ---------------- */

* { 	/* for ALL elements, make it standard to have no padding or margin */
	margin: 0px;
	padding: 0px;
	border: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	color: #939598;
	}

ol, ul {
    padding-left:2em;
    margin-left:0;
}

body {
	background-color: #83B0D4;
	background-image: url("/images/bg.jpg");
	background-repeat: repeat-x;	
	}
	
#body_container	 {
	margin: 0px auto;
	width: 860px;
}
#footer {
	font-size: 11px;
	background-color: #BCBEC0;
	color: #ffffff;
	text-align: center;
	padding: 6px 0px 10px 0px;
	}

/* ---------------- GENERAL DESIGN ELEMENTS ---------------- */

strong, b, .b, .strong {
		font-weight: bold;
		}

em, i {
		font-style: italic;
		}

img {
		display: block;
		}

.inline { /* used on images that need to be inline do class = inline */	
		display: inline;
		}

table {
		border-collapse: collapse;
}


	
/* ---------------- BLOCK ELEMENTS ---------------- */	

#left_border {
	background-image: url("/images/gradient_left.jpg");
	background-repeat: no-repeat;	
	width: 30px;
	}
#container {
	/* main content (white) box */
	background-color: white;
	width: 800px; /* 800px total but got padding and a 1 pixel border*/
	border: 1px solid #B5B4B4;
	}
#right_border {
	background-image: url("/images/gradient_right.jpg");
	background-repeat: no-repeat;	
	width: 30px;
	}
	
#masthead {
	background-image: url("/images/masthead.gif");
	background-repeat: no-repeat;	
	width: 800px; /* 800 - 500 left padding */
	height: 75px; /* 90 - 25 top padding */
	}
.content {
	width: 775px;
	padding-left: 25px;
}
input:focus, textarea:focus {
	outline: none;
}
	
/* ---------------- STYLES ---------------- */		

.nav {
	border-width: 0px;
	display: inline;
	}

h1 {
	color: #0085BA;
	font-size: 27px;
	font-weight: normal;
	}
h2 {
	color: #0085BA;
	font-size: 18px;
	font-weight: bold;
	border-bottom: 2px solid #B5B4B4;
	}
h3, .h3 {
	color: #0084BA;
	font-size: 12px;
	font-weight: bold;
	line-height: 18px;
	}
h4 {
	color: #A62C4B;
	font-size: 13px;
	font-weight: normal;
	}
.prodcut_table {
	float: right;
	width: 330px;
	}
.product_name_div {
	text-align: center;
	color: #0084BA;
	font-weight: bold;
	vertical-align: top;
	font-size: 10px;
	width: 80px;
	overflow: hidden;
}
.pricing_grid {
	border: 1px solid #B5B4B4;
	}
.pricing_grid td {
	border: 1px solid #B5B4B4;
	padding: 5px 10px 5px 10px;
	text-align: center;
	}
.form_table td {
	padding-bottom: 10px;
	}
.label {
	text-align: right;
	width: 200px;
	padding-right: 5px;
	color: #0085BA;
	vertical-align: top;
	}
.label_req {
	font-weight: bold;
	}
.checkout_table td {
	padding: 3px;
	}
#total_div{
	font-weight: bold;
	}

/* ---------------- MATRIX CSS ------------------- */
.padding_cell {
	width: 36px;
	}
.names_textarea {
	height: 135px;
	width: 128px;
	background-image: url("/images/textarea_bg.gif");
	background-repeat: no-repeat;
	overflow: auto;
	padding: 5px;
	}
.box1 {
	color: #A62C4B; /* red */
	}
.box1_bg_color {
	background-color: #A62C4B; /* red */
	}
.box2 {
	color: #0085BA; /* blue */
	}
.box2_bg_color {
	background-color: #0085BA; /* blue */
	}	
.box3 {
	color: #A7B06D; /* green */
	}
.box3_bg_color {
	background-color: #A7B06D; /* green */
	}
.box4 {
	color: #F7941C; /* orange */
	}
.box4_bg_color {
	background-color: #F7941C; /* orange */
	}
.box_label {
	font-size: 10px;
	padding-top: 20px; 
	}
.matrix_box {
	background-repeat: no-repeat;
	height: 418px;
	width: 418px; 
	margin: 0px auto; 
	}
.color_picker_box {
	cursor: pointer; 
	float: left; 
	margin-right: 30px; 
	height: 28px; 
	width: 28px; 
	border: 1px solid black;
}

. {
	margin: 30px auto 0px auto;
}	
.pricing_div {
	height: 38px;
	width: 152px;
	background-image: url("/images/bg_total.gif");
	background-repeat: no-repeat;
	text-align: center;
	line-height: 38px;
	margin: 10px auto;
}	
	

/* ---------------- CROSSWORD CSS ---------------- */
.crossTable { border-spacing:0px;  border-collapse: collapse; }
.cellEmpty {  padding: 0px; }
.cellLetter { padding: 1px; background-color: #white; border: 0px solid #fff; width: 20px; height: 20px; }
.cellDebug { padding: 1px; border: 1px solid #000000; width: 20px; height: 20px; }

/* Cell styles (depending on the box) */
.cellLetter.box1 { font-size: 10pt; font-family: Arial; }
.cellLetter.box2 { font-size: 10pt; font-family: Arial; }
.cellLetter.box3 { font-size: 10pt; font-family: Arial; }
.cellLetter.box4 { font-size: 10pt; font-family: Arial; }


/* ---------------- FORM ELEMENTS ---------------- */
		
.input_text {
		width: 162px;
		height: 14px;
		font-size: 11px;
		padding: 2px;
		border: 1px solid #0085BA;
		color: #000000;
		}

.input_text_grey {
		border: 2px solid #B5B3B3;
		width: 162px;
		height: 24px;
		background-color: #E8E9E9;
		color: #8D8C8C;
		}
		
.input_text_wide {
		width: 362px;
		height: 14px;
		font-size: 11px;
		padding: 2px;
		border: 1px solid #0085BA;
		}

.input_text_small {
		width: 80px;
		height: 14px;
		font-size: 11px;
		padding: 2px;
		border: 1px solid #0085BA;
		}	
		
.input_text_smallest {
		width: 30px;
		height: 14px;
		font-size: 11px;
		padding: 2px;
		border: 1px solid #0085BA;
		}	

.input_submit {
		border: 1px solid #0085BA;
		background-color: #F3F3F3;
		color: #000000;
		width: 168px;
		height: 25px;
		text-align: center;
		cursor: pointer;
		}	
				
.input_textarea {
		border: 1px solid #0085BA;
		width: 400px;
		height: 80px;
		padding: 2px;
		margin-top: 2px;
		margin-bottom: 2px;
		color: #000000;
		font-size: 11px;
		}	
		
.input_select {
		border: 2px solid #B5B3B3;
		width: 162px;
		height: 24px;
		background-color: #E8E9E9;
		color: #8D8C8C;
		}

.input_select_wide {
		border: 1px solid #006C6F;
		width: 362px;
		height: 20px;
		}
		
.input_select_medium {
		border: 1px solid #006C6F;
		width: 120px;
		height: 20px;
		}		
		
.input_select_small {
		border: 1px solid #006C6F;
		width: 80px;
		height: 20px;
		}	
.input_select_tiny {
		border: 1px solid #006C6F;
		width: 50px;
		height: 20px;
		}
.input_select_micro {
		border: 1px solid #006C6F;
		width: 40px;
		height: 20px;
		}