@font-face{
	font-family: WLM_Poster_Type;
	src: url('wlm_poster_type.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

body header{
	min-height: 100px;
	width: 100%;
	background: linear-gradient(45deg, #d4caf9, #008a23);
	background-image: url(../images/banner.png);
	background-size: auto 100%;
	opacity: 0.85;
	margin: 0;
}

body header p{
	font-family: WLM_Poster_Type, Tahoma, Serif;
	font-size: 2em;
	color: white;
	text-shadow: 2px 2px black;
	margin: 0 1em;
}

span{
	font-size: 1.7em;
}

header p:nth-child(2){
	 float: right;
	 margin-top: -1.5em;
	 margin-right: 160px;
}

#nav{
	position: absolute;
	width: 125px;
	height: 125px;
	right: 0px;
	top: 0px;
	border-radius: 0 0 0 100%;
	
	background: rgba(232,150,164,0.6);
	color: white;
	text-align: center;
	font-family: Impact, WLM_Poster_Type,serif;
	font-size: 2em;
	-webkit-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
}

#nav:hover{
	background: rgba(242,140,152,1);
	width: 150px;
	height: 150px;
	
}

button{
	width: 75px;
	height: 75px;
	border-radius: 50%;
	margin-top: 10%;
	color: white;
	font-family: Impact, WLM_Poster_Type,serif;
	font-size: 2em;
	
	background: linear-gradient(45deg , black 40%, #222 60%);
	background-size: 5px 5px;
}

#content{
	position: relative;
	margin: 1% auto;
	min-height: 1em;
	width: 70%;
}

#set1,#set3,#set4{
	width: 100%;
	display: block;
}

#set2{
	width: 100%;
	display: none;
}

#set3{
	width: 100%;
	display: none;
}

/*Animations for page change are here*/

/*Move TOP Page left or right*/
@-webkit-keyframes moveLeft{	
	50%{-webkit-transform: scale(1.1, 1.1);	}
	to {
		-webkit-transform: translateX(-100%);
		opacity: 0;
	}
}
@-moz-keyframes moveLeft{	
	50%{-moz-transform: scale(1.1, 1.1);	}
	to {
		-moz-transform: translateX(-100%);
		opacity: 0;
	}
}
@-o-keyframes moveLeft{	
	50%{-o-transform: scale(1.1, 1.1);	}
	to {
		-o-transform: translateX(-100%);
		opacity: 0;
	}
}
@keyframes moveLeft{	
	50%{transform: scale(1.1, 1.1);	}
	to {
		transform: translateX(-100%); 
		opacity: 0;
	}
}
.zoomleft{
	-webkit-animation: moveLeft 1s ease-in-out both;
	-moz-animation: moveLeft 1s ease-in-out both;
	-o-animation: moveLeft 1s ease-in-out both;
	animation: moveLeft 1s ease-in-out both;
}

@-webkit-keyframes moveRight{	
	50%{-webkit-transform: scale(1.1, 1.1);	}
	to {
		-webkit-transform: translateX(100%);
		opacity: 0;
	}
}
@-moz-keyframes moveRight{	
	50%{-moz-transform: scale(1.1, 1.1);	}
	to {
		-moz-transform: translateX(100%);
		opacity: 0;
	}
}
@-o-keyframes moveRight{	
	50%{-o-transform: scale(1.1, 1.1);	}
	to {
		-o-transform: translateX(100%);
		opacity: 0;
	}
}
@keyframes moveRight{	
	50%{transform: scale(1.1, 1.1);	}
	to {
		transform: translateX(100%); 
		opacity: 0;
	}
}
.zoomright{
	-webkit-animation: moveRight 1s ease-in-out both;
	-moz-animation: moveRight 1s ease-in-out both;
	-o-animation: moveRight 1s ease-in-out both;
	animation: moveRight 1s ease-in-out both;
}

/*Bring in BOTTOM Page*/
@-webkit-keyframes comeIn{	
	from{	-webkit-transform: scale(0.8, 0.8);	opacity: 0;	}
	to {	-webkit-transform: scale(1, 1);	opacity: 1;	}
}
@-moz-keyframes comeIn{	
	from{	-moz-transform: scale(0.8, 0.8);	opacity: 0;	}
	to {	-moz-transform: scale(1, 1);	opacity: 1;	}
}
@-o-keyframes comeIn{	
	from{	-o-transform: scale(0.8, 0.8);	opacity: 0;	}
	to {	-o-transform: scale(1, 1);	opacity: 1;	}
}
@keyframes comeIn{	
	from{	transform: scale(0.8, 0.8);	opacity: 0;	}
	to {	transform: scale(1, 1);	opacity: 1;	}
}
.incoming{
	-webkit-animation: comeIn 500ms ease-in-out both;
	-moz-animation: comeIn 500ms ease-in-out both;
	-o-animation: comeIn 500ms ease-in-out both;
	animation: comeIn 500ms ease-in-out both;
}

/*Animations for Rules Page*/
#blanket {
   background-color:#7A7;
   opacity: 0.6;
   position:absolute;
   z-index: 10;
   top:0px;
   left:0px;
   width:100%;
}

@-webkit-keyframes growOut{
	from{	-webkit-transform: scale(0.1,0.1);	}
	to{	-webkit-transform: scale(1,1);	}
}
@-ms-keyframes growOut{
	from{	-ms-transform: scale(0.1,0.1);	}
	to{	-ms-transform: scale(1,1);	}
}
@keyframes growOut{
	from{	transform: scale(0.1,0.1);	}
	to{	transform: scale(1,1);	}
}

.popclick{
	-webkit-animation: growOut 600ms ease-in-out;
	-ms-animation: growOut 600ms ease-in-out;
	animation: growOut 600ms ease-in-out;	
}
.popclose{
	-webkit-animation: growOut 600ms ease-in-out;
	-ms-animation: growOut 600ms ease-in-out;
	animation: growOut 600ms ease-in-out;
	-webkit-animation-direction: reverse;
	-ms-animation-direction: reverse;
	animation-direction: reverse;
}

/*Rules page basic rules*/

#popUpDiv {
	position:absolute;
	background: white url(../images/rulesbg.png) no-repeat;
	background-position: center;
	width:60%;
	height:400px;
	overflow: hidden;
	margin: auto;
	border:2px solid #000;
	z-index: 11;
	
	font-family: Helvetica, Calibri, serif;
	text-shadow: 1px 1px 1px #555;
}

#popUpDiv a{
	position:relative;
	
}

#popUpDiv #faculty_profile img{
width: 28%;
display: block;
}