body {
	background-color:#000;
	color:#bf8f01;
	animation: backii 1s 1;
}
ul {
	list-style-type:none;
}



/*MAIN ELEMENTS*/
#wrapper {
	width:70%;
	height:100%;
	margin: 0 auto; /*ensures content centering*/
	background-color:#245059;
	border: 8px double #1c1c1c;
}
#nav1 {
	position:relative;
	float:right;
	width:18%;
	padding:1%;
	background-color:#bf8f01;
	color:#000;
	height:200em;
	text-align:right;
}
#display {
	position:absolute; top:0;right:0; z-index:99;
	background-color:#ccc;
	margin:8%;
	padding:1%;
	animation: homefade 2s ease-in 5s 1;
	opacity:1;
	animation-fill-mode:forwards; /*the problem with setting opacity 1 is that it wants to return to opacity 1 once the animation has finished, which makes the animation repeat even if you've told it not to... and if you set it to zero you can't use the delay function because it'll be invisible until the animation starts. This specifies that the animation once completed should stay that way*/
}
#content {
	position:static;
	width:78%;
	padding:1%;
	background-color:#000;
	height:200em;
	text-align:justify;
}
#head {
	background-color:#000;
	margin:2%;
	padding:0.5%;
	color:#bf8f01;
	animation:backii 1s 1;
}
#foot {
	clear:both;
	background-color:#444;
	padding:2px;
	text-align:center;
	color:#bf8f01;
}
#foot:hover {
	background-color:#000;
}

.textbox {
	margin:1% 5% 1% 1%;
	border: 2px solid #000;
	padding:2%;
	background-color:#000;
	color:#c0c0c0;
}
.value {
	/*background-color:#134048;*/background-color:#222;
	padding:0% 1%;
	font-weight:800;
}
.button {
	padding: 0% 35%;
	color:#000;
}

/*INFOCARDS*/
.infocardtitle {
	margin:1% 2% 1% 1%;
	border: 2px solid #245059;
	padding:2%;
	background-color:#245059;
	color:darkgreen;
	height:24em; /*easiest to match h/w using em..make the same for all three*/
	text-align:center;
	position:absolute;
	z-index:10;
	width:40em;
}
.infocard {
	margin:1% 2% 1% 1%;
	border: 2px solid #245059;
	padding:2%;
	background-color:#000;
	color:#e1b700;
	height:24em;
	opacity:0;
	position:absolute;
	z-index:11;
	width:40em;
	overflow:hidden;
}
.infocard:hover {opacity:1;} /*only hover:opacity the barb thumbs; give thumbs higher z-index*/
.infocardwrap {
	position:relative;/*watch positioning*/
	height:24em;
	width:40em;
	margin: 0% 0% 0% 1%;
}

/*IMAGE INFOCARDS*/
.infocardtitle2 {
	margin:1% 2% 1% 1%;
	border: 2px solid #245059;
	padding:2%;
	background-color:#245059;
	color:darkgreen;
	height:24em;
	text-align:center;
	position:absolute;
	z-index:10;
	width:40em;
}
.infocard2 {
	position:relative;
	height:24em;
	width:40em;
	margin: 0% 0% 0% 1%;	
}
.infocard2 img {
	margin:1% 2% 1% 1%;
	border: 2px solid #245059;
	padding:2%;
	background-color:#000;
	color:#e1b700;
	height:24em;
	opacity:0;
	position:absolute;
	z-index:11;
	width:40em;
	overflow:hidden;
}
.infocard2 img:hover {
	opacity:1;
}

/*HELICOPTER DIVS*/
#helicoptertest:hover {
		animation:helicopter 2s infinite;
}
#helicoptertest2:hover {
		animation:helicopter 4s 1;
}
#helicoptertest3:hover {
		animation:helicopter2 2s infinite;
}
#helicoptertest4 {
		opacity:0;animation:helicopter3 2s infinite;
}
#helicoptertest4:hover {
	opacity:1;
}
#helicoptertest5:hover {
	animation:helicopter4 1.5s 1;
}

/*HELI75*/
#heli75 {
	position:relative;
	height:24em;
	width:40em;
	margin: 0% 0% 0% 1%;	
}
#heli75title {
	margin:0%;
	border: 0px;
	padding:0%;
	/*background-image: url("https://68.media.tumblr.com/febccbd7afe8fb20e8030d0f13750c2e/tumblr_ombqyoi82b1ue2hk7o1_1280.png");background-repeat:no-repeat;*/
		background-color:#245059;
	color:darkgreen;
	height:24em;
	text-align:center;
	position:absolute;
	z-index:94;
	width:100%;
}
#heli75title:hover {
	animation:helicopter4 1.5s 1;
	animation-fill-mode:forwards;
}
#heli75 {
	margin: 0% 0% 0% 1%;
	border: 0px;
	padding:0%;
	background-image: url("https://68.media.tumblr.com/febccbd7afe8fb20e8030d0f13750c2e/tumblr_ombqyoi82b1ue2hk7o1_1280.png");background-repeat:no-repeat;
	background-color:#000;
	color:#e1b700;
	height:24em;
	opacity:1;
	position:absolute;
	z-index:91;
	width:40em;
	overflow:hidden;
}
/*#heli75 img:hover {
	animation:reversecopter 1.5 1;
	animation-fill-mode:forwards;
}*/
#heli75text {
	padding:4%;
}

/*EXTRA ELEMENTS: do not change*/
#gmu {
	position:relative;
	float:left;
	border: 3px solid gold;
	padding:0.5%;
	margin:8px;
	background-color:darkgreen;
}
#title {
	position:static;
	text-align:left;
	padding: 0% 0% 0% 16%;
}






/*ANIMATIONS*/
@keyframes backii {
	from {background-color:goldenrod;}
	to {background-color:#000;}
}
@keyframes homefade {
	from {opacity:1;}
	to {opacity:0;}
}
@keyframes helicopter {
	0%{transform: rotateY(0deg);}
	25%{transform:rotateY(359deg);}
	50%{transform: rotateY(0deg);}
	100%{transform:rotateY(359deg);}
}
@keyframes helicopter2 {
0%		{transform: rotateY(0deg);left:0px;}
25%		{transform: rotateY(70deg);left:0px;}
50%		{transform: rotateY(0deg);left:500px;}
55%		{transform: rotateY(0deg);right:500px;}
70%		{transform: rotateY(0deg);left:500px;background:#444;}
100%	{transform: rotateY(-360deg);left:0px;}
}
@keyframes helicopter3 {
0%		{transform: rotateY(0deg);}
25%		{transform: rotateY(360deg);}
50%		{transform: rotateY(0deg);}
75%		{transform: rotateY(360deg);}
100%	{transform: rotateY(0deg);}
}
@keyframes helicopter4 {
0%		{transform: rotateY(0deg);opacity:1;}
25%		{transform: rotateY(180deg);opacity:.75;}
50%		{transform: rotateY(360deg);opacity:.5;}
75%		{transform: rotateY(180deg);opacity:.25;}
100%	{transform: rotateY(0deg);opacity:0;}
}
@keyframes reversecopter {
0%		{opacity:0;}
25%		{opacity:.25;}
50%		{opacity:.5;}
75%		{opacity:.75;}
100%	{opacity:1;}
}

/*HYPERLINKS*/
a:link {color:gold; text-decoration:none;}
a:active {color:white;} a:hover {color:goldenrod;}
a:visited {color:#444; text-decoration:none;}

* {/*selects all css elements and overrides conflicting commands*/
	color:#bf8f01;
	font-family:'Lora',Times,serif;
	line-height:1.8em
}