/* Header and footer.
				Define the background graphics etc.
				There are two headers so that if you need, you can have two graphics in the
				header. One in the top left, and one in the top right perhaps.
		 */
			
		#header1 {
			margin:0; padding:0;
			background-color: #5765E2;
			background-repeat: repeat-x;
			background-image: url('images/banner_tile.jpg');
			height: 102px;
			border:0px;
		}
		
		#header1_sep_09{
			margin:0; padding:0;
			background-color: #213094;
			background-repeat: repeat-x;
			background-image: url('images_08_09/header_tile_08_09.jpg');
			height: 131px;
			border:0px;
		}
		
		#header_banner{
			background-image: url('images/banner_cropped.jpg');
			background-repeat: no-repeat;
			background-position: top left;
			height: 102px;
			border:0px;
		}
		
		#header_banner_sep_09{
			background-image: url('images_08_09/header_08_09.jpg');
			background-repeat: no-repeat;
			background-position: top left;
			height: 131px;
			border:0px;
		}
		
		#header2 {
			margin:0; padding:0;
			height: 102px;
			border:0px;
		}	
		
		#date_block{
			position: relative;
			top: 80px;
			padding-right: 5px;
		}

		a.header_banner:link, a.header_banner:hover, a.header_banner:visited{
			border:0px;
			color:"transparent";
		}
		
		.no_border{
			border:0px;
		}

		/* RED BAR group */

		#red_bar_group{
			background-image:url('images/red_bar_tile.jpg');
			background-repeat: repeat-x;
			height: 29px;
		}
		#red_left{
			background-image:url('images/red_bar_left.jpg');
			float: left;
			width: 214px;
			height: 29px;
		}
		#red_right{
			background-image:url('images/red_bar_right.jpg');
			float: right;
			width: 216px;
			height: 29px;
			text-align: right;
			overflow: hidden;
		}
		#red_r_sep_09{
			background-image:url('images_08_09/right_tab.jpg');
			background-repeat: no-repeat;
			background-position: top left;
			float: right;
			width: 180px;
			height: 31px;
			padding-top: 3px;
			text-align: right;
			overflow: hidden;
		}	
		
		
		#red_r_sep_09 .gem_search_box{
			height: 16px;
			border: 0px solid #FFFFFF; /* IE7 border fix */
			width: 106px;
			margin-top: 5px;
			margin-right: 8px;
		}

		#red_r_sep_09 .gem_search_button{
			background-color: transparent;
			width: 31px;
			height: 23px;
			border: none;
			border: 0px solid #FFFFFF; /* IE7 border fix */
			cursor: pointer;
		}

		#red_middle{
			text-align: center;
			line-height: 29px;
			vertical-align: middle;
			margin-left: 192px;
			margin-right: 166px;
			height: 29px;
			color: white;
		}
	
	
		#header_banner_sep_09 #red_middle{
			padding-top: 4px;
		}

				
		/* Main1, and main 2
				NO padding or margin.
				stipulate the repeated graphic for the left and right column, 
				if one exists.
		*/
		#layout-container {
			margin:0; 
			padding:0;
			background: transparent;
			background-color: #EAEAEA;
		}
			
			
		/* Left, Right, Middle
			Float left, Float right, and NO FLOAT (respectively)
			Middle seems to stay in the middle by
			putting a 150px margin on it's left and right. This compensates for the
			150px width that the left and right cols have.
		
		*/
		
		#left1 {
			float:left;
			width:214px;
			margin:0; 
			padding:0;
			padding-top: 25px;
		}


		#right1 {
			float:right;
			width:205px;
			margin:0; 
			padding:0;
			padding-top: 25px;
		}



			/*     top, right, bottom, left */
		#middle {
			margin:0 220px 0 220px; 
			padding-top: 0px;
			}
		#middle-tile{
			background-color: #F2F7FA;
			background-image: url('images/content_background_tile.jpg');
			background-repeat: repeat-x;
			background-position: top left;
		}

		#middle-left-tile{
			background-image: url('images/left_col_tile.jpg');
			background-repeat: repeat-y;
			background-position: top left;
			
		}

		#middle-right-tile{
			background-image: url('images/right_col_tile.jpg');
			background-repeat: repeat-y;
			background-position: top right;
			
		}

		#middle-left-unique{
			background-image: url('images/left_col_unique.jpg');
			background-repeat: no-repeat;
			background-position: top left;
		}

		#middle-right-unique{
			background-image: url('images/right_col_unique.jpg');
			background-repeat: no-repeat;
			background-position: top right;
		}

		/* This is for the case of a 2 col setup. The margin on the right is removed
		   due to the lack of other column*/	

		#middle-2col #middle {
			margin: 0px;
			margin-left: 220px;
			 
		}
		
		#middle-2col #footer-tile{
			margin: 0px 0px 0px 210px;
		}


		/* 
		The following three styles help place the login, sitemap, 
		and insitec logo all on the one line.
		
		*/
			
		#footer-tile, #footer-tile-admin{
			/* background-image: url('images/footer_tile.jpg');
			background-repeat: repeat-x; */
			background: transparent;
		}
		
		#footer-tile{
			margin: 0px 0px 0px 210px;
		}

		#footer-unique{
			height: 37px;
			line-height: 37px;
			background-image: url('images/footer_tile.jpg');
			background-repeat: repeat-x;
			margin: 0px 211px 0px 0px;
		}

		#footer-unique a{
			color: white !important;
		}
		
		#footer_text{
			float: right;
			height: 37px;
			line-height: 37px;
			padding-right: 3px;
			color: #BFC3FF;
		}
		
		#footer_des{
			float: right;
			/*position: absolute;*/
			height: 37px;
			line-height: 37px;
			right: 0px;
		}
		#middle-2col #footer_text{
			padding-right: 55px;
		}
		
		#footer_des img{
			border: 1px solid black;
		}

		/* column-in
				Margin 0, padding is what you want for that column for 
				the text to be spaced from column border.
		
		*/
		.column-in {
			margin:0px 12px 0px 0px; 
			/*padding:0.5em 1em;*/
			padding: 0.5em 1em;
			
		}

		/* cleaner
				This should stay unchanged. It sits down the bottom of main div box, 
				and makes sure that the three columns are all cleaned off.
		*/		
		.cleaner {
			clear:both;
			height:1px;
			font-size:1px;
			line-height: 1px;
			border:none;
			margin:0; padding:0;
			background: transparent;
			}