@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);

html {
	background-color: #4C7156;
	z-index: 0;
	overflow-x: hidden;
}

body {
	margin: 0;
	font-family: 'Roboto Condensed', sans-serif;
	background-color: #00471F;
	background-image: url("../img/confectionary.png");
	z-index: 3;
	overflow-x: hidden;
    overflow-y: hidden;
}

label {
	cursor: pointer;
	}
	
a {
	color: #4C7156;
	}
	
a:visited {
	color: #3C6746;
	}

a:hover {
	color: #4F7459;
	}
	
hr {
	background-color: #000000;
	color: #000000;
	border: 0;
	border-top: 1px solid #000000;
	border-color: #000000;
	margin-left: 25px;
	margin-right: 25px;
	}

/*****************/
/*Nav Bar Content*/
/*****************/

.navbar {
	background-color: #4C7156;
	height: 50px;
	width: 100%;
	position: fixed;
	left: 0px;
	top: 0px;
	margin-top: 0;
	font-size: 125%;
	z-index: 20;
}

.navInner {
	margin-left: auto;
	margin-right: auto;
	width: 1000px;
	height: 50px;
	cursor: pointer;
	}

.navIcon {
	float: left;
	background-color: #4C7156;
	width: 250px;
	height: 50px;
	position: relative;
	color: #ffffff;
}

.navIcon:hover {
	background-color: #2C945A;
	}
	
.navIconIcon {
	float: left;
	width: 50px;
	height: 50px;
}

.navIconSpacer {
	float: left;
	width: 10px;
	height: 50px;
	}
	
.navIconTitle {
	float: left;
	width: 170px;
	height: 50px;
	}

.navButton {
	float: left;
	background-color: #4C7156;
	width: 125px;
	height: 40px;
	position: relative;
	color: #ffffff;
	text-align: center;
	padding-top: 10px;
}

.navButton:hover {
	background-color: #2C945B;
	}

/*******************/
/*Main Page Content*/
/*******************/

.container {
	margin-left: auto;
	margin-right: auto;
	width: 1000px;
	margin-top: 52px;
}

.content {
	width: 1000px;
}

.topDisplay {
	width: 1000px;
	height: 400px;
	text-align: center;
	}
	
.topDisplayBackground1 {
	position: absolute;
	background-image: url('../img/ponyville.png');
	height: 400px;
	width: 1000px;
	z-index: 1;
	}
	
.topDisplayBackground2 {
	position: absolute;
	background-image: url('../img/topDisplay2.png');
	height: 400px;
	width: 1000px;
	z-index: 4;
	}
	
.topDisplayTextButton {
	position: absolute;
	width: 450px;
	margin-left: 470px;
	padding-top: 80px;
	z-index: 5;
	}
	
.topDisplayTitle {
	font-size: 300%;
	color: #ffffff;
	text-shadow: 0px 0px 5px #000000;
	z-index: 6;
	}
	
.topDisplayCaption {
	font-size: 110%;
	color: #ffffff;
	text-shadow: 0px 0px 7px #000000;
	z-index: 7;
	}
	
/**************/
/*APRA Section*/
/**************/
	
.apra {
	position: relative;
	z-index: 8;
	}
	
.apra1 {
	height: 300px;
	background-color: #f8fff8;
	}
	
.apraColumn {
	float: left;
	padding-top: 25px;
	height: 275px;
	width: 300px;
}

.apraColumn:first-child {
	margin-left: 25px;
	}
	
.divider {
	float: left;
    margin-top:25px;
	margin-left: 12px;
	height: 250px;
	width: 12px;
    border-left:1px solid black;
}

.listTitle {
	font-size: 175%;
	}
	
.apra2 {
	height: 200px;
	background-color: #034c64;
	text-align: center;
	}
	
.layout {
	padding-top: 10px;
}

.layoutImage {
	background-color: #000000;
	}
	
.layoutImage:hover {
	opacity: .8;
	}
	
.radio {
	display: none;
	}
	
.layoutInfo, .layoutInfoLast {
	position: absolute;
	top: 70px;
	color: #ffffff;
	font-size: 125%;
	height: 110px;
	width: 600px;
	padding-top: 20px;
	padding-left: 200px;
	padding-right: 200px;
	z-index: 9;
	}
	
.layoutInfo {
	display: none;
	background-color: #034c64;
	z-index: 10;
}
	
input.radio:checked + div.layoutInfo {
	display: block;
	}
	
.apra3 {
	height: 400px;
	background-color: #f8fff8;
	text-align: center;
	}
	
.apraNotes {
	font-size: 200%;
	height: 40px;
	width: 1000px;
	padding-top: 10px;
	}
	
.apraNotesColumn1 {
	width: 160px;
	height: 310px;
	text-align: left;
	padding: 20px;
	font-size: 125%;
	}
	
.apraNotesColumn2 {
	width: 800px;
	height: 350px;
	}
	
.notesInfo {
	position: absolute;
	display: none;
	height: 290px;
	width: 740px;
	padding: 20px;
	overflow-y: auto;
	top: 50px;
	left: 200px;
	font-size: 70%;
}
	
input.radio:checked + div.notesInfo {
	display: block;
	}
	
.apraNotesColumn1 label:hover {
	color: #606060;
	}
	
/*************/
/*MFR Section*/
/*************/

.mfr1 {
	height: 300px;
	background-color: #f8fff8;
	z-index: 11;
	position: relative;
	}
	
.mfrDisplay {
	width: 1000px;
	height: 400px;
	text-align: center;
	}
	
.mfrDisplayBackground1 {
	position: absolute;
	background-image: url('../img/field.png');
	height: 561px;
	width: 1000px;
	z-index: 2;
	}
	
.mfrDisplayBackground2 {
	position: absolute;
	background-image: url('../img/mfrDisplay2.png');
	height: 400px;
	width: 1000px;
	z-index: 12;
	}
	
.mfrDisplayTextButton {
	position: absolute;
	width: 450px;
	margin-left: 470px;
	padding-top: 80px;
	z-index: 13;
	}
	
.mfrDisplayTitle {
	font-size: 300%;
	color: #ffffff;
	text-shadow: 0px 0px 5px #000000;
	z-index: 14;
	}
	
.mfrDisplayCaption {
	font-size: 110%;
	color: #ffffff;
	text-shadow: 0px 0px 5px #000000;
	z-index: 15;
	}
	
.mfrColumn {
	float: left;
	padding-top: 25px;
	height: 275px;
	width: 462px;
	z-index: 16;
}

.mfrColumn:first-child {
	margin-left: 25px;
	}
	
.mfrColumn1 {
	padding-top: 50px;
	height: 250px;
	}
	
.mfrColumn1 img {
	float: left;
	}
	
.mfrColumn1 span {
	float: left;
	width: 252px;
	padding-top: 52px;
	padding-left: 10px;
	}
	
/*****************/
/*Friends Content*/
/*****************/

.sectionDivide {
	width: 1000px;
	background-color: #034c64;
	font-size: 300%;
	text-align: center;
	height: 60px;
	color: #ffffff;
	}

.friends {
	background-color: #f8fff8;
	padding-top: 25px;
	}

.friendsRow {
	width: 1000px;
	height: 200px;
	background-color: #f8fff8;
	}
	
.friendsRow a {
	text-decoration: none;
	color: #000000;
	}
	
.friendsCol {
	float: left;
	width: 250px;
	text-align: center;
	}
	
.friendsTitle {
	height: 50px;
	font-size: 150%;
	margin-top: 20px;
	}
	
/******************/
/*Projects Content*/
/******************/

	
.projectsRow {
	position: relative;
	height: 200px;
	}
	
.projectTitle {
	width: 500px;
	height: 40px;
	float: left;
	color: #ffffff;
	font-size: 150%;
	background-color: #135c74;
	text-align: center;
	padding-top: 10px;
	}
	
.projectsCol {
	float: left;
	height: 110px;
	width: 460px;
	background-color: #f8fff8;
	padding: 20px;
	}

/***************/
/*About Content*/
/***************/

.aboutBARF {
	width: 800px;
	height: 100px;
	text-align: center;
	padding-top: 25px;
	padding-left: 100px;
	padding-right: 100px;
	font-size: 140%;
	background-color: #f8fff8;
	}
	
.aboutStaff {
	width: 1000px;
	height: 360px;
	background-color: #f8fff8;
	}
	
.aboutimg {
	float: left;
	width: 200px;
	height: 200px;
	text-align: center;
	vertical-align: bottom;
	}
	
.aboutC {
	padding-top: 45px;
	height: 138px;
	}
	
.aboutimg img {
	height: 75%;
	width: auto;
	-ms-transition: all 1s;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	transition: all 1s;
}

.aboutimg img:hover {
	height: 85%;
}

.aboutInfo {
	position: absolute;
	display: none;
	width: 700px;
	height: 100px;
	margin-top: 220px;
	font-size: 125%;
	background-color: #f8fff8;
	z-index: 10;
	margin-left: 150px;
	text-align: center;
}

input.radio:checked ~ label .aboutimg img{
	height: 100%;
	}
	
input.radio:checked + div.aboutInfo {
	display: block;
	}
	

	
/****************/
/*Footer Content*/
/****************/

.footer {
	background-color: #4C7156;
	height: 30px;
	width: 100%;
	margin-top: 0;
	text-align: center;
	padding-top: 10px;
	color: #ffffff;
}

.footer a {
	color: #ffffff;
	}
	
.footer a:hover {
	color: #e9e9e9;
	}
	
/**********/
/*Facebook*/
/**********/

.facebook {
	position: fixed;
	width: 300px;
	bottom: -395px;
	z-index: 19;
	}
	
.fb-header {
	margin-bottom: -4px;
	cursor: pointer;
	background-color: #3b5998;
	width: 100px;
	height: 30px;
	}
	
.fb-header label img {
	float: left;
	}
	
.fb-header-text {
	color: #ffffff;
	font-size: 115%;
	height: 25px;
	width: 60px;
	float: left;
	padding-top: 5px;
	padding-left: 10px;
	}
	
.fb-like-box {
	background-color: #f8fff8;
	padding-bottom: 0px;
	-ms-transition: all 2s;
	-webkit-transition: all 2s;
	-moz-transition: all 2s;
	transition: all 2s;
	}
	
.fb-header:hover ~ .fb-like-box {
	padding-bottom: 10px;
	}
	
#facebook-checkbox:checked ~ .fb-like-box {
	padding-bottom: 395px;
	}