/*style sheet for the website*/

body {
	overflow:hidden;
	/* background: #828282 url(images/bghashgray.gif) repeat; */
	background: #828282 url(wallpaper.jpg) no-repeat top center;
}

/*wrapping content*/
#wrap{
	clear:both;
	width:70%;
	height:80%;
	min-width:320px;
	top:10%;
	left:10%;
	position:absolute;
	display:block;
	overflow:hidden;
	background: #F9F9F9;
	background: -moz-linear-gradient(top, #F9F9F9 0%, #E2E2E2 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F9F9F9), color-stop(100%,#E2E2E2));
	-webkit-box-shadow: 0px 10px 20px #333333;
	-moz-box-shadow: 0px 10px 20px #333333;
	box-shadow: 0px 10px 20px #333333;
	z-index:5;
	opacity: 0.9;
	overflow:auto;
}

#content{
	margin:3%;
	display:block;
	overlay:hidden;
}

/*end wrapping content*/
/*menubar*/
#nav{
	margin:5px;
	display:block;
	float:left;
	position:absolute;
	right:0px;
	top:15%;
	z-index:2;
	width:20%;
}
#nav ul{
	list-style:none;
	padding:5px;
}
#nav ul li a{
	font-family: 'Arvo', arial, sans-serif;
	font-weight:bold;
	background: #0C0;
	padding:10px;
	text-decoration:none;
	color:white;
	width:100%;
	display:block;
	margin-bottom:5px;
	text-shadow:0px 1px 0px black;
}

#nav ul li a:hover {
	background: white;
	color:black;
	text-shadow:0px 1px 0px gray;
}
/*end menubar*/
/*Header animation*/
@keyframes HeaderAnimation
{
from {color:#66CC00;text-shadow: 0px 0px 10px #66CC00;}
to {font: bold verdana; width:500px; text-shadow: 6px 6px 6px grey;}
}

@-moz-keyframes HeaderAnimation /* Firefox */
{
from {color:#66CC00;text-shadow: 0px 0px 10px #66CC00;}
to {font: bold verdana; width:500px; text-shadow: 6px 6px 6px grey;}
}

@-webkit-keyframes HeaderAnimation /* Safari and Chrome */
{
from {color:#66CC00;text-shadow: 0px 0px 10px #66CC00;}
to {font: bold verdana; width:500px; text-shadow: 6px 6px 6px grey;}

}

#HeaderA
{
font:Times New Roman;
animation-iteration-count:1
animation:HeaderAnimation 3s;
-moz-animation:HeaderAnimation 3s; /* Firefox */
-moz-animation-iteration-count:1000;
/* Safari and Chrome */
-webkit-animation:HeaderAnimation 3s; 
-webkit-animation-iteration-count:1;
}
/*end header animation*/
/*begin effect on image welcome page*/
.mouseBeOffMe {

height:150x;
width:150px;

}

.mouseBeOnMe {

height:300x;
width:300px;
}

.mouseBeDown {

height:400x;
width:400px;

}

/*end effect on image*/




/*begin effect on button*/

@keyframes ButtonAnimation
{
0% {color:inherit}
50% {width:150px; color:#FF3300;}
75%{color:#666;}
100%{color:#000000;}
}

@-moz-keyframes ButtonAnimation /* Firefox */
{
0% {color:inherit}
50% {width:150px; color:#FF3300;}
75%{color:#666;}
100%{color:#000000;}
}

@-webkit-keyframes ButtonAnimation /* Safari and Chrome */
{
0% {color:inherit}
50% {width:150px; color:#FF3300;}
75%{color:#666;}
100%{color:#000000;}
}
#ButtonA {
    -webkit-animation:ButtonAnimation 3s;
	-webkit-animation-iteration-count:1000;
    -moz-animation:ButtonAnimation 3s;
	-moz-animation-iteration-count:1000;
	 border: 5px solid #39F;
    background: #9cf;
	width:120px;
}  
/*3D text*/
.threeDtext{
font-family: Garamond, serif;
line-height: 1em;
color: #15e8ba;
font-weight:bold;
font-size: 23px;
text-shadow:0px 0px 0 rgb(-78,164,112),1px 0px 0 rgb(-109,133,81),2px 0px 0 rgb(-140,102,50), 3px 0px 0 rgb(-171,71,19),4px 0px 3px rgba(0,0,0,0.25),4px 0px 1px rgba(0,0,0,0.5),0px 0px 3px rgba(0,0,0,.2);
}