@charset "UTF-8";
/* =CALL LIBRARY */
	@import url("reset-min.css"); /* ------- Reset all CSS Styles */

/* =GENERAL - the general styles */
	body{
		font: 62.5%/2.2em Arial, Tahoma, Verdana,Helvetica, sans-serif;
		color: #4b4942;
		background: #000000;
	}
	/* text labels in boxes on main page */
	a{text-decoration: none;color: #5599a7;}
	a:hover{color: #256C5C;}
	.hide,hr{display: none;}
	strong{font-weight: bold;}

/* Splash Screen - the title on the main page */

    #splash {
		display: block;
		height: 150px;
		background: url(../images/header150.jpg) 0 0 no-repeat;
		/* overall width of main page 861:
		 * Calculated as follows:
		 *     single box is 228 wide
		 *     space between boxes is 54
		 *     padding to left of content area is 28
		 * total of the 3 containers, the space between them, and the padding is 820
		 * container width is 902,
		 * half the distance between 902 and 820 is 41
		 * 861 = (3 * 228) + (2 * 54) + 28 + 41
		 */
		width: 861px;
		overflow: hidden;
		/* padding: top right bottom left */
		padding:0px 0px 0px 0px;
	}

	#footer {
	    padding:30px 0px 0px 28px;
		/* fontSize/LineHeight */
		font:bold 14px/24px Georgia;
		text-align: center;
		color: #5599a7;
	}

/* =LAYOUT - the main layout styles */
	/* container */
	#container{
		width: 902px;
		/* margin: top right bottom left */
		margin: 0px auto 0px auto;
		/* background: #171A0F url(../images/bg_container.png); */
		padding-bottom:10px;
	}

/* =HEADER */
	/* Home button and Title */
	h1{
		font-size: 3.0em;
	}
	h1 a,h1 a:hover{
		display: block;
		width: 600px;
		height: 60px;
		padding-top:10px;
		margin-left:18px;
		background: url(../images/home.jpg) 0 0 no-repeat;
		padding-top:26px;
		padding-left:182px;
		text-align: center;
		color: #e0e0e0;
	}

#pageLevel2 div ul li a img:hover,#pageLevel2 div div div a#download img:hover{
	filter:alpha(opacity=80);
	/* This is what causes link images to dim when I hover over them */
	opacity:0.8;
}

/* =BANNER */
	#banner_wrapper{
		/* overall width of main page */
		width: 874px;
		overflow: hidden;
		/* padding: top right bottom left */
		padding:30px 0 0 28px;
	}
	#banner_wrapper img:hover{
		filter:alpha(opacity=80);
		/* This is what causes link images to dim when I hover over them */
		opacity:0.8;
	}
	.banner{
		/* this is the text in each box on the main page */
		float: left;
		width: 252px;
		float: left;
		/* blue-gray background color on the main page */
		background: #253C4C left repeat-y;
		margin-top:54px;
		margin-right:54px;
		margin-bottom:0px;
		padding-bottom:12px;
		position: relative;
		/* for rounded corners on boxes */
		border-radius: 10px;
	}
	.image_wrapper{text-align: center;}
	/* .banner img{border: 3px solid #181B0F;} */
	.banner_last{margin-right:0;}
	.banner h2{
		/* height was 38 but then 2 lines wouldn't fit */
		/* for two lines make the height 50 but I couldn't */
		/* figure out how to center it vertically so I switched */
		/* to all 1-line labels so it looks better */
		height: 30px;
		/* background: url(../images/banner_top.gif) left no-repeat; */
		font:1.9em "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
		text-align: center;
		color: #d0d0d0;
		padding: 0 0 0 0;
	}
/*------------------------- Content --------------------------*/
#pageLevel2{
	/* Original background was dark blue: #09154F */
	background-color: #000000;
	/* margin: top right bottom left */
	/* This controls the blue box */
	padding: 6px 0 0px 28px;
}
#pageLevel2 div{  
	/* width of blue box */
	overflow: hidden;
}
#pageLevel2 div div.first{   
	margin: 0;
}
#pageLevel2 div div{   
	float: left;
	/* changing this seems to have no effect but I'm keeping it the same as the div width above */
	width: 792;
	/* margin: top right bottom left */
	margin: 0 0 0 0px;
	position: relative;
}
#pageLevel2 div h2{
	/* I don't think h2 is used */
	color: #93CDF5;
	font-size: 22px;
	text-transform: uppercase;
	/* margin: top right bottom left */
	/* changing left margin seems to have no effect */
	margin: 0 0 15px 20px;
}
#pageLevel2 div ul{
	list-style: none;
	/* background color of the entire list area */
	/* was #eeeeee which is basically an off-white background, not sure I like blue-gray */
	background-color: #253C4C;
	/* This padding is offset of list items in from edge of blue area */
	/* padding: top right bottom left */
	padding: 15px 0 0 15px;
	margin: 0;
	overflow: hidden;
	/* rounded corner of blue window */
	border-radius: 15px;
}
#pageLevel2 div ul li{
	height: 1%;
	overflow: hidden;
	/* margin: top right bottom left */
	/* This controls space between list items */
	margin: 0 0 20px 0;
}
#pageLevel2 div ul li a{
	float: left;
	display: block;
	position: static;
	/* This background is the space between the image and the text */
	background: none;
	padding: 0;
}
#pageLevel2 div ul li a img{
	border: 0;
	/* margin: top right bottom left */
	/* space between list photo and list text */
	margin: 0 15px 0 0;
}
#pageLevel2 div ul li span{
	/* Deleting this block had no apparent effect */
	display: block;
	clear: none;
	float: left;
	text-align: justify;
}
#pageLevel2 div ul li span a{
	/* List item title */
	text-decoration: none;
	font-size: 14px;
	font-family: arial;
	/* Note this 0077ff (blue) is not 0099ff because with the bold font, 0099ff is too bright */
	color: #0077ff;
	font-weight: bold;
	background: none;
	position: static;
	padding: 0;
}
#pageLevel2 div ul li p{
	clear: none;
    float: left;
    text-align: left;
	/* padding: top right bottom left */
	/* This indents the descriptive text to the right of the list item title and puts a blank "line" between them */
	padding: 10px 0 0 10px;
	/* This has to be some number less than the width of the overall blue gray area. Too big or too small is bad
	 * though. It cannot be an exact number because some images are wider than others */
    width: 600px;
	/* Color of the descriptive text, not quite full white */
	/* was this with a #eeeeee background: #393D42; */
	color: #eeeeee;
	font-family: arial;
	font-size: 14px;
	margin: 0 0 15px;
}
#pageLevel2 div a{
	/* not currently used, would be used for links within descriptive text */
	/* E.g., so I can link to the Optimist Club */
	font-family:arial;
	font-size: 14px;
	/* Color of link text within the immediately above style */
	color: #eeeeee;
	text-decoration: none;
	position: absolute;
}
#pageLevel2 div a:hover{
	/* color of the text when mouse hovers over it */
	/* color: #255C4C; */
	/* I'd like a brighter blue color sometime when I have time */
	color: #256C5C;
}