/* LAYOUT - PAGE SETUP */
@viewport { width: device-width; zoom: 1; }

html, body{margin:0px; padding:0px;min-width:360px;}

body:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-10; /* needed to keep in the background */
      background: url(/images/computer.jpg)center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}
.captcha
{
border:solid 5px rgba(2,0,0,.1);
border-radius:1px;
margin:auto;
width:300px;
min-width:280px;
max-width:350px;
background-color:rgba(255,255,255,0);
color:rgba(255,255,0,1);
Font-weight:normal;
font-family:arial;
text-align:center;
font-size:12px;
}
img, embed, object, video
{
	max-width:100%;
}

section
{	
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	height:100vh;
	width:100vw;
}

footer
{	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	text-align:center;
	height:55px;
	max-width:100vw;
	padding-top:10px;
	margin-top:10px;	
	border-top:2px solid rgba(255,158,0,.9);
	color:rgba(245,215,66,1);
	background-color:rgba(0,0,10,1);
}
 
.contentcontainer
{		
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin:2px;
	padding:10px;
	width:90vw;
}

.contentpanel
{	
	width:30vw;
	min-width:340px;
	text-align:justify;
	margin:10px;
}
div{ margin:auto; }
/* NAVIGATION MENU */
div.navmenucontainer
{	
	display:none;
	position:fixed;
	padding:2px;
	width:165px;
	top:55px;
	right:10px;
	background-color:rgba(255,255,255,.05);
	text-align:center;
	border-radius:5px;
}

.menuitem
{	
	display:flex;
	justify-content: center;
	align-items: center;
	text-align:center;
	max-height:45px;
	height:45px;
	margin:2px;
	padding:4px;
	background-color:rgba(255,135,0,.7);
	font-family:arial;
	font-weight:bold;
	font-size:22px;
	width:155x;
	border-radius:7px;
}

.menuitem:hover
{
	background-color:rgba(255,205,0,.7);
}

.menuitem:active
{
	background-color:rgba(247,101,2,.7);
}

a.menulink:link
{	
	font-family:arial;
	font-weight:bold;
	font-size:22px;
	color:rgba(0,0,0,.6);
	text-decoration:none;
}

a.menulink:visited
{	
	color:rgba(0,0,0,.6);
	text-decoration:none;
}

a.menulink:hover
{	
	color:rgba(0,0,0,1);
	font-style:normal;	
	text-decoration:none;
}
a.menulink:active
{	
	color:rgba(255,0,0,1);
	font-style:normal;	
	text-decoration:none;
}

/* LINKS */
a:active
{	
	color:rgba(255,250,250,1);
	text-decoration:none;
}

a:link
{	
	font-family:arial;
	font-weight:bold;
	color:rgba(255,250,250,.8);
	text-decoration:none;
}

a:visited
{	
	color:rgba(255,150,10,,.9);
	text-decoration:none;
}

a:hover
{	
	color:rgba(255,255,255,1);	
	text-decoration:none;
}

a:active.speciallink
{
	color:rgba(255,255,255,1);
	text-decoration:none;
}
a:link.speciallink
{
	color:rgba(255,255,255,1);
	text-decoration:none;
}
a:hover.speciallink
{
	color:rgba(255,255,0,1);
	text-decoration:none;
}
a:visited.speciallink
{
	color:rgba(255,255,0,.8);
	text-decoration:none;
}

div.button
{
	text-align:center;
	font-weight:bold;
	font-size:20px;
	width: 200px;
	padding: 6px;
	border: 3px solid rgba(0,0,0,.4);
	border-radius: 4px;
	background-color:rgba(255,150,10,.8);
	color:rgba(255,255,255,.9);
	margin-top:3px;
}
div.button:hover
{
	background-color:rgba(255,150,10,.5);
	color:rgba(255,255,255,1);
}



#menu
{
	position:fixed;
	top:10px;
	right:10px;
}

#top
{
	position:fixed;
	bottom:10px;
	right:10px;
}
.white
{
	background-color:rgba(255,255,255,.9);
	color:rgba(255, 158, 0,.9);	
}
.dark
{
	background-color:rgba(0,0,0,.9);
	color:rgba(245, 215, 66,.9);
}
#open
{
	display:flex;
	justify-content: center;
	align-items: center;
	background-color:rgba(0,0,0,0);
}

h1,h2,h3,h4,h5,h6,p
{	
	font-family: arial;
	padding:0px;
	padding-bottom:5px;
	margin:0px;
	min-width:200px;
	max-width:100vw;
}

h1
{
width:100%;
text-align:center;
color:rgba(255, 200, 0, .8);
text-transform:uppercase;
font-size:4vw;
}
h2
{
text-align:center;
color:rgba(255, 200, 0, .8);
font-size:3vw;	
}
h3
{
text-align:center;
color:rgba(255, 200, 0, .8);
font-size:2vw;	
}
h4
{
text-align:center;
color:rgba(0, 0, 0, .8);
font-size:16px;	
}
.tagline
{
color:rgba(255, 255,0,.9);
font-family:times;
font-size:23px;
display:block;
}
.bold
{
	font-weight:bold;	
}

.italics
{
	font-style:italic;
}

.small
{
	font-size:10px;	
}
.wide
{
	width:100%;
}
.center
{
	text-align:center;	
}
.justified
{
	text-align:justify;
}
.bodytext
{
	font-weight:normal;'
	color:rgba(242, 206, 2,.2);
}

.darktext
{
   color:rgba(199, 130, 2, .9);
}

/* FORMS */
form
{
	
}

input, textarea
{
display:block;
border:solid 5px rgba(2,0,0,.3);
border-radius:2px;
margin-top:3px;
margin:auto;
padding:5px;
width:300px;
}

input[type=text]
{
	width:300px;
	font-family:arial;		
	font-weight:bold;
	font-size:14px;
	padding: 4px;
	border: 3px solid rgba(0,0,0,.5);
	border-radius: 4px;
	resize: vertical;
	margin-top:2px;
	margin-bottom:2px;
}
input[type=text]:hover
{
	background-color:rgba(255, 226, 189,.7);
	color:rgba(255,255,255,.9)
}
input[type=text]:focus
{
	background-color:rgba(255, 226, 189,.9);
	color:rgba(82, 46, 1,.9)
}
.smalltext
{
width: 150px;	
}
.message
{	
	font-family:arial;
	font-weight:bold;
	font-size:14px;
	padding: 4px;
	border: 3px solid rgba(0,0,0,.5);
	border-radius: 1px;
	resize: vertical;
	margin-top:2px;
	margin-bottom:2px;
}
.message:hover 
{
	background-color:rgba(255, 226, 189,.4);
	color:rgba(255,255,255,.9)
}
.message:focus 
{
	background-color:rgba(255, 226, 189,.9);
	color:rgba(82, 46, 1,.9)
}

input[type=submit]
{
	font-weight:bold;
	font-size:20px;
	padding: 6px;
	border: 3px solid rgba(0,0,0,.4);
	border-radius: 4px;
	background-color:rgba(255,150,10,.8);
	color:rgba(255,255,255,.9);
}
input[type=submit]:hover
{
	background-color:rgba(255,150,10,.5);
	color:rgba(255,255,255,1);
}

input[type=button]
{
	font-weight:bold;
	font-size:20px;
	padding: 6px;
	border: 3px solid rgba(0,0,0,.4);
	border-radius: 4px;
	background-color:rgba(255,150,10,.8);
	color:rgba(255,255,255,.9);
}
input[type=button]:hover
{
	background-color:rgba(255,150,10,.5);
	color:rgba(255,255,255,1);
}
.row { display:block;width:100%;padding:2px;margin:2px;height:20px;font-family:arial;font-size:1vw;font-weight:bold;color:rgba(199, 130, 2, .9); }
.darkrow { background-color:rgba(0,0,0,.05);}
.lightrow { background-color:rgba(255,255,255,.15);}

/* MEDIA QUERIES */
/* SCREEN CAN NOT ROTATE */

/* MEDIA QUERIES FOR SCREENS BIGGER THAT 320px */
/*@media screen and (max-width: 320px) { .bodytext { font-size: 13px;} h1 { font-size: 20px;} h2 {font-size:18px;}h3 {font-size:16px;}*/
	
/* MEDIA QUERIES FOR SCREENS BIGGER THAT 768px */
	
@media only screen and (max-width: 1200px) 
	{ 
	section { height:auto; min-height:100vh;}
	div.container { height:auto; }
	div.contentcontainer { height:auto; }
	div.content:panel { height:auto; }
	h1 { font-size:24px;} 
	h2 { font-size:20px;}
	h3 { font-size:18px; font-weight:bold;}
	h4 { font-size:14px; font-weight:bold;}
	.small { font-size:14px; }
	.row {font-size:14px;}
	}	
	
@media only screen and (min-width: 1201px) 
	{

	.bodytext { font-size: 1.5vw;} 
	h1 { font-size: 4vw;} 
	h2 { font-size:3vw;}
	h3 { font-size:2vw;}
	.small { font-size:1vw; }
	}