body {

}



/* css styling for the top of interior pages (above the blue menu strip) */
 
.top_area_wrapper {
	background-image:url('../images/interior_top_bg_gradient.jpg');
	background-repeat:repeat-x;
	width:100%;
	height:187px;
		/*border-style: solid;
		border-width: 1px;
		border-color: orange;*/
}

.top_area {
	width: 825px;
	height: 187px;
	margin-left:auto;
	margin-right:auto;
		/*border-style: solid;
		border-width: 1px;
		border-color: brown;*/
}



.top_logo{
	float:left;
		/*border-style: solid;
		border-width: 1px;
		border-color: blue;*/
}




.top_navs {
	float:right;
		/*border-style: solid;
		border-width: 1px;
		border-color: yellow;*/
}

.text_size_select {
	float: right;	
	font-family: Trebuchet MS, sans-serif;
	font-weight: bold;
	font-size: 15px;
	color: #37939b;
	text-decoration:none;
	margin:157px 20px 0px 0px; /*top,right,bottom,left*/
		/*border-style: solid;
		border-width: 1px;
		border-color: yellow;*/
}

.small_caps {
	font-size: 12px;
	font-variant: small-caps;
	color: #afbd21;
}

.text_size1_color {
	font-size: 13px;
	color: #afbd21;
}

.text_size2_color {
	font-size: 14px;
	color: #afbd21;
}

.text_size3_color {
	font-size: 15px;
	color: #afbd21;
}

.top_navs img {
	padding:6px 0 0 0;
}



.main_image_wrapper {
	margin-bottom: 10px;
		/*border-style: solid;
		border-width: 1px;
		border-color: yellow;*/
}


.main_image {
	clear:both;
	width: 825px;
	/* a HACK: the div that contains the image has only height of 230 px. REUB can't figure out how to shift this div up so that it doesn't come after "gradient box" even though i can get "img" itself to display -10px */

	margin-left:auto;
	margin-right:auto;
	top:-10px;
	z-index:2;
		/*border-style: solid;
		border-width: 1px;
		border-color: purple;*/
}

.main_image img{
	display:inline;
	position:relative;
	top:-10px;
	z-index:-1;
}

.gradient_box {
	display:inline;
	position:relative;
	top:0px;
	z-index:3;
}


/* trying to fake a gradient over the image by increasingly transparent lines */
/* TODO: get a transparent gradient? */
.gradient .line10 {
	width: 100%;
	background-color:#000000;
	opacity: 0.4;
	height: 1px;
	z-index:10;
}
.gradient .line9 {
	width: 100%;
	background-color:#000000;
	opacity: 0.35;
	height: 1px;
	z-index:10;
}
.gradient .line8 {
	width: 100%;
	background-color:#000000;
	opacity: 0.3;
	height: 1px;
	z-index:10;
}
.gradient .line7 {
	width: 100%;
	background-color:#000000;
	opacity: 0.25;
	height: 1px;
	z-index:10;
}
.gradient .line6 {
	width: 100%;
	background-color:#000000;
	opacity: 0.20;
	height: 1px;
	z-index:10;
}
.gradient .line5 {
	width: 100%;
	background-color:#000000;
	opacity: 0.17;
	height: 1px;
	z-index:10;
}
.gradient .line4 {
	width: 100%;
	background-color:#000000;
	opacity: 0.13;
	height: 1px;
	z-index:10;
}
.gradient .line3 {
	width: 100%;
	background-color:#000000;
	opacity: 0.08;
	height: 1px;
	z-index:10;
}
.gradient .line2 {
	width: 100%;
	background-color:#000000;
	opacity: 0.05;
	height: 1px;
	z-index:10;
}
.gradient .line1 {
	width: 100%;
	background-color:#000000;
	opacity: 0.0175;
	height: 1px;
	z-index:10;
}

.main_content {
	clear: both;
	width: 825px;
	margin-top: -10px;
	margin-left:auto;
	margin-right:auto;
	font-family:Trebuchet MS, sans-serif;
	background-color:transparent;
	text-align:left;

}

.left_col {
	width: 33%;
	/*background-color:transparent;*/
	float:left;
	text-align:center;
	font-size:16px;
}

.left_col h1 {
	font-size:35px;
	color:#ff9900;
	margin-top:13px;
	margin-bottom:13px;
}

/*
.left_col a.big {
	font-size: 18px;
}

.left_col a.little {
	font-size: 15px;
}
*/


.left_col a {
	font-size: 18px;
	text-decoration:none;
	display:block;
}
.left_col a.blue {
	color: #009999;
	padding-top:6px;
}
.left_col a.green {
	color: #669933;
	padding-top:6px;
}
.left_col a.gray {
	color: #999999;
	padding-top:6px;
}

/* why doesn't this inherit from universal a:hover in universal.css? */ 
.left_col a:hover{
	color:#93AE58;	
}

.right_col {
	width: 67%;
	background-color:#ffffff;
	/*background-color:transparent;*/
	float:right;
	padding-top: 21px;
}

.right_col p {
	font-color:#333333;
	font-size:12px;
	line-height: 20px;
	margin-left:24px;
	margin-right:24px;
	margin-top:20px;
	margin-bottom:20px;
}