html, body{height: 100%;}

body{ background-color: #c5c5df; color: #333333; margin: 0 auto; font-family: Arial, Helvetica, sans-serif; font-size: 14px; }

a:link{ color: #000058; }
a:visited{ color: #000058; }
a:hover{ color: #a3640f; }
a:active{ color: #000058; }

a img { border: none; }

p { line-height: 18px; }

h1 { color: #000058; font-size: 24px; margin-bottom: 30px; }
h2 { color: #c3842f; font-size: 24px; }
h3 { color: #333333; font-size: 14px; margin-bottom: 20px; }
h4 { color: #000058; font-size: 24px; margin-bottom: 30px; }

.clear { clear: both; }
.pdf { 
	display: block; 
	background-image: url(../images/iconPDF.png); 
	background-repeat: no-repeat; 
	background-position: left middle; 
	height: 20px;
	padding-top: 2px;
	padding-left: 25px;
}
img.imageRight { margin-left: 20px; margin-bottom: 20px; border: solid 5px #c3842f; }
img.imageLeft { margin-right: 20px; margin-bottom: 20px; border: solid 5px #c3842f; }
img.responsive-image { width: 100%; height: auto; }

.toggleMoreSwitch { font-size: 14px; color: #0e83e5; cursor: pointer; }
.truncatedContent span {display: none;}

/***** BASE LAYOUT *****/

#outerContainer { position: relative; min-height: calc(100% - 109px); height: auto; padding-bottom: 109px; }
#wrapper {  }

#header { background-color: #FFFFFF; width: 100%; height: 133px; padding-top: 30px; }
#headerContent { width: 960px; margin: 0 auto; }
#headerLeft { float: left; }
#headerRight { float: right; font-size: 14px; line-height: 18px;}
#headerRight input[type=submit] { 
	color: #00007a; 
	font-size: 18px; 
	margin-bottom: 20px; 
	padding: 0px; 
	background-color: transparent; 
	border: none; 
	display: inline-block; 
	text-decoration: none;
	cursor: pointer;
}
#headerRight input[type=submit]:hover { text-decoration: underline; }

#menu { width: 100%; background-image: url(../images/bkgdDarkBlue.jpg); background-repeat: repeat; height: 72px; }
#menuContent { width: 940px; margin: 0 auto; }
.menuItem { text-align: center; padding: 27px 20px 0px 20px; float: left; }
.menuItem.selected { background-image: url(../images/bkgdSelected.png); background-repeat: no-repeat; background-position: top center; }
.menuItem a { font-size: 18px; color: #ffffff; text-decoration: none; }

#content { width: 960px; margin: 45px auto 60px auto; }
#content p { margin-bottom: 20px; text-align: justify; }

#footer { width: 100%; background-color: #FFFFFF; border-top: solid 7px #c3842f; height: 102px; position: absolute; bottom: 0px; z-index: 2; }
#footerContent { width: 940px; margin: 0 auto; padding-top: 32px; font-size: 14px; color: #00004b; text-align: center; line-height: 18px; }
#footerContent a { color: #00004b; text-decoration: none; }
#copyright { font-size: 12px; color: #777777; margin-top: 10px; }

/***** INDEX PAGE *****/

#indexOuterContent { 
	width: 100%; 
	background-image: url(../images/bkgdDarkBlue.jpg); 
	background-repeat: repeat; 
}
ul#imageSwapper { 
	position: relative; 
	list-style: none;
	border: solid 10px #c3842f; 
	height: 375px; 
	width: 940px; 
	z-index: 3; 
	margin: 0px auto;
	padding: 0px;
	overflow:hidden;
}
ul#imageSwapper li { position:absolute; }
ul#imageSwapper li.active img { z-index: 5; }

#indexContent { 
	position: relative;
	margin-top: -70px;
	margin-bottom: 30px;
	width: 100%; 
	background-image: url(../images/bkgdMediumBlue.jpg); 
	background-repeat: repeat; 
	padding-top: 80px;
	padding-bottom: 56px;
	z-index: 2;
}
#upcomingEvents { width: 960px; margin: 0 auto; }
#upcomingEvents p { color: #ffffff; }

#events { padding: 0px; margin: 0px; list-style: none; }
#events li.eventCard:last-child { margin-right: 0px; }
.eventCard { 
	float: left; 
	margin-right: 20px;
	font-size: 14px; 
	text-align: center;
}
.eventCard a { 
	display: block;
	border: solid 3px #000000; 
	background-color: #333333; 
	height: 320px; 
	width: 219px;
	text-decoration: none; 
}
.eventBanner { border-bottom: solid 8px #c3842f;}
.eventBanner img{ display: block; }
.eventTitle { font-weight: bold; color: #c3842f; height: 2.5em; padding: 15px 15px 20px 15px; }
.eventDate { color: #ffffff; padding: 0px 15px 20px 10px; }
.eventLocation { color: #cccccc; padding: 0px 15px;}

#announcements { width: 960px; margin: 0 auto 60px auto; }
#announcements p { margin-bottom: 20px; text-align: justify; }

/***** ABOUT PAGE *****/

.boardMember {
	background-color: #333333; 
	border: solid 3px #000000; 
	padding: 20px; 
	margin-bottom: 20px;
	color: #cccccc;
}
.boardMember img { float: left; border: solid 5px #c3842f; margin-right: 20px; width: 150px; height: auto; }
.boardMember .bio { float: left; width: 690px; }
.boardMember .bio .name { color: #c3842f; font-size: 18px; font-weight: bold; margin-bottom: 20px; }
.boardMember .bio .title { color: #ffffff; font-size: 14px; margin-bottom: 20px; }
.boardMember .bio .biotext { color: #cccccc; font-size: 14px; }

.mediaItem { margin-right: 20px; margin-bottom: 20px; }

/***** SCHOLARSHIP PAGE *****/

#scholarshipQualifications { margin-left: 20px; padding-left: 0px; line-height: 18px; }
#scholarshipQualifications > li { margin-bottom: 20px; }

#currentWinner { background-color: #333333; color: #ffffff; margin-bottom: 20px; }
#currentWinner img { border: solid 10px #c3842f; }
#currentWinner p { text-align: center; font-size: 16px; padding: 20px 0px; margin: 0px; }

#pastWinners { padding: 0px; margin: 0px; list-style: none; }
.pastWinners { 
	float: left; 
	width: 254px; 
	margin-right: 20px; 
	margin-bottom: 20px; 
	text-align: center; 
	border: solid 3px #000000;
	background-color: #333333; 
	padding: 20px; 
}
.pastWinners img { border: solid 5px #c3842f;}
.pastWinners strong { display: block; color: #ffffff; }
.pastWinners div { height: 2.5em; color: #cccccc; } 
.pastWinners:nth-child(3n) { margin-right: 0px; }

/***** FRIENDS PAGE *****/

#friends { list-style: none; margin-left: 0px; padding-left: 0px; }
.friend { display: block; float: left; width: 470px; margin-right: 20px; margin-bottom: 20px; }
.friend:nth-child(even) { margin-right: 0px; }
.friend img { width: 470px; }

/***** CONTACT PAGE *****/

#commentForm { background-color: #333333; border: solid 3px #000000; padding: 20px; width: 500px; }
#commentForm label { color: #FFFFFF; display: block; padding-bottom: 2px; }
#commentForm input[type=text] { padding: 5px; border: solid 1px #cccccc; margin-bottom: 20px; width: 488px; font-size: 14px; }
#commentForm textarea { padding: 5px; border: solid 1px #cccccc; margin-bottom: 20px; height: 150px; width: 488px; font-size: 14px; }
#commentForm input[type=submit] { 
	border: none; 
	background-color: #c3842f; 
	padding: 10px 0px; 
	width: 488px; 
	cursor: pointer;
	font-size: 14px; 
}

/***** EVENT INFO PAGE *****/

.eventBlock { 
	background-color: #333333; 
	border: solid 3px #000000; 
	padding: 20px; 
	margin-bottom: 20px;
	color: #cccccc;
 }

.eventBlock img { float: left; border: solid 5px #c3842f; margin-right: 20px; width: 150px; height: auto; }
.eventBlock .information { float: left; width: 690px; }
.eventBlock .information a { color: #c3842f; text-decoration: none; }
.eventBlock .information .name { color: #c3842f; font-size: 18px; font-weight: bold; margin-bottom: 20px; }
.eventBlock .information .details { color: #ffffff; font-size: 14px; margin-bottom: 20px; }
.eventBlock .information .description { color: #cccccc; font-size: 14px; }

@media (max-width: 980px) {
	img.responsive-image { width: calc(100% - 40px); margin: 0 20px; }
	#headerContent { width: 100%; padding: 0px 20px; box-sizing: border-box; }
	#menuContent { width: 100%; margin: 0 auto; }
	ul#imageSwapper { border: solid 5px #c3842f; height: 300px; width: calc(100% - 20px)}
	img.carouselImage { height: auto; width: 100%; }
	#upcomingEvents { width: 100%; padding: 0px 20px; box-sizing: border-box; }
	#announcements { width: 100%; margin-bottom: 30px; padding: 0px 20px; box-sizing: border-box; }
	#footerContent { width: 100%; padding: 20px 20px 0px 20px; box-sizing: border-box; }
}

@media (max-width: 768px) {

	#header { padding-top: 20px; height: auto; }
	#headerLeft { width: 55%; }
	#headerLeft img { width: 100%; height: auto; }
	#headerRight { width: 40%;}
	#headerRight input[type=submit] { margin-bottom: 0px; }
	#menu { height: auto; }
	.menuItem { padding: 20px 10px 20px 10px; }
	.menuItem a { font-size: 16px; }
	.menuItem.selected { background-image: none; text-decoration: underline; }
	#content { width: 100%; margin: 20px auto 40px auto; padding: 0px 20px;  box-sizing: border-box; }

	ul#imageSwapper { border: solid 5px #c3842f; height: 294px; width: 738px;}
	img.carouselImage { height: 294px; width: 738px; }
	#indexContent { margin-top: -80px; margin-bottom: 20px; }
	.eventCard { width: 30%; height; auto; }
	.eventCard a { border: solid 2px #000000; height: 250px; width: 100%; }
	.eventBanner img { width: 100%; height: auto; }
	.eventTitle { height: auto; padding: 10px; }
	.eventLocation { display: none; }

	.boardMember { border: solid 2px #000000; box-sizing: border-box; }
	.boardMember img { border: solid 3px #c3842f; width: 25%; box-sizing: border-box; }
	.boardMember .bio { width: 70%; box-sizing: border-box; }
	.boardMember .bio .name { font-size: 16px; margin-bottom: 10px; }
	.boardMember .bio .title { font-size: 14px; margin-bottom: 10px; }
	.boardMember .bio .biotext { font-size: 14px; }

	.mediaItem { margin-right: 20px; margin-bottom: 20px; width: 100%; }

	#currentWinner img { border: solid 5px #c3842f; width: 100%; height: auto; }
	.pastWinners { 
		float: left; 
		width: calc(50% - 20px); 
		border: solid 3px #000000;
		padding: 20px; 
		box-sizing: border-box;
	}
	.pastWinners img { border: solid 3px #c3842f;}
	.pastWinners:nth-child(even) { margin-right: 0px; }
	.pastWinners:nth-child(3n) { margin-right: 20px; }

	#commentForm { border: solid 2px #000000; width: 100%; box-sizing: border-box; }
	#commentForm input[type=text] { padding: 0px; width: 100%; box-sizing: border-box; }
	#commentForm textarea { padding: 0px; border: solid 1px #cccccc; height: 100px; width: 100%; box-sizing: border-box; }
	#commentForm input[type=submit] { padding: 10px 0px; width: 100%; box-sizing: border-box; }

	.eventBlock img { border: solid 3px #c3842f; box-sizing: border-box; float: none; margin-bottom: 10px; }
	.eventBlock .information { width: 100%; box-sizing: border-box; float: none; }
	.eventBlock .information .name { font-size: 16px; }
}

@media (max-width: 640px) {
	ul#imageSwapper { height: 243px; width: 610px; }
	img.carouselImage { height: 243px; width: 610px; }
}

@media (max-width: 480px) {
	h1 { font-size: 18px; margin-bottom: 20px; }
	h2 { font-size: 18px; }
	h3 { font-size: 14px; margin-bottom: 10px; }
	h4 { font-size: 20px; margin-bottom: 20px; }

	#headerRight { font-size: 12px; line-height: 1em; }
	#headerRight input[type=submit] { font-size: 14px; }
	#headerContent { padding-bottom: 5px; }
	.menuItem { padding: 10px 8px 10px 8px; }
	.menuItem a { font-size: 14px; }
	ul#imageSwapper { height: 180px; width: 450px;}
	img.carouselImage { height: 180px; width: 450px; }
	.eventCard { font-size: 12px; width: calc(50% - 20px); }
	#footerContent { font-size: 12px; line-height: 14px; }

	.boardMember img { width: 100%; float: none; }
	.boardMember .bio { width: 100%; float: none; }

	img.imageRight { margin-left: 0px; margin-bottom: 20px; border: solid 3px #c3842f; width: 100%; height: auto; box-sizing: border-box;}
	img.imageLeft { margin-right: 0px; margin-bottom: 20px; border: solid 3px #c3842f; width: 100%; height: auto; box-sizing: border-box;}

	.pastWinners { 
		float: none; 
		width: 100%; 
		margin-right: 0px; 
		margin-bottom: 20px; 
		padding: 20px; 
	}
	.pastWinners img { width: 100%; }

	.friend { loat: none; width: 100%; margin-right: 0px; }
	.friend img { width: 100%; }

	.eventBlock img { width: 100%; }
}

@media (max-width: 414px) {
	ul#imageSwapper { height: 153px; width: 384px; }
	img.carouselImage { height: 153px; width: 384px; }
}

@media (max-width: 360px) {
	ul#imageSwapper { height: 132px; width: 330px; }
	img.carouselImage { height: 132px; width: 330px; }
	#headerRight { font-size: 11px; }
	#headerRight input[type=submit] { font-size: 12px; }
	.eventCard { height: 200px; }
	.eventCard a { height: 200px; }
	.menuItem { padding: 5px 5px 5px 5px; }
	.menuItem a { font-size: 12px; }
}

@media (max-width: 320px) {
	ul#imageSwapper { height: 116px; width: 290px; }
	img.carouselImage { height: 116px; width: 290px; }
}