/* This is the general part of all pages Thge font has a size of 12pt, family is Times and it is positioned 
	relative to the page browser with spaced top and right margins.
*********
 The helmet is independent from any top objects but also brought forward 
*****/
#helmet { position:relative; margin-bottom:2px; display:block; text-align:center;
 z-index:1;padding:0px;height:inherit;
}
/* positioned relative to the page with a minimum height of 170 pixels, width of 904px and padding of 1px */
#top { 
 display:block; color:#9cc; position:relative; height:165px;padding:2px 0px;margin:auto 1px; 
 background:#444 url("/images/Bgroundz/greyHeader.png") repeat;
 -webkit-background-size: auto;-moz-background-size:auto; -o-background-size: auto; background-size: auto; 
 -khtml-border-radius:0px 0px 10px 10px; border-radius:0px 0px 10px 10px; 
 -moz-border-radius:0px 0px 10px 10px; -webkit-border-radius:0px 0px 10px 10px;
}
/* Part for the logo
   floats left of the page with a minimum height of 161 pixels, width of 180px and padding of 2px
   background starts from top-left and repeats to cover the block.
*/
#topA{
 height:155px; width:130px;text-align:center; float:left; border-radius:10px; -khtml-border-radius:10px; 
 -moz-border-radius:10px; -webkit-border-radius:10px; margin:0px; padding-top:2px; 	
}
/* Part for the middle - Page Heading
   floats left of the page with a minimum height of 161 pixels, width of 180px and padding of 2px
   background start from top-left and repeats to cover the block.
*/
#topB{
 height:155px; width:555px; text-align:center; float:left; margin:0px 2px;	border:0px;
 -moz-border-radius:10px; -webkit-border-radius:10px;  border-radius:10px; padding:0px;
}
/* This part appears to the top-right and has the login interface. The styles are like the topA part
   but this one has a minimum height of 155px, width of 190px and the font size is 15px.
*/
#topC{
 font-size:12px; width:206px;float:left; padding:0px;text-align:center;color:lightblue; 
 height:155px; border-radius:10px; -khtml-border-radius:10px; -moz-border-radius:10px; margin:0px;
 -webkit-border-radius:10px; border:0px;
}
#topC table{ float:right;font-size:12px; color:#c0c0c0;}
/* This part deals with the Admin page content */
#wrappers{
	position:relative; float:left; padding:3px; margin:auto 2px;
	width:auto; clear:both; display:block; text-align:left;
}
/* Close admin wrappers */
/* The form here will float to the left with a 5px height and spaced 20px away from the block below 
  these styles are for form inputs like text boxes and drop-down selection boxes their font is underlined,the 
  cursor is hand-shaped, their background is transparent
*/
#formIn { 
	margin:1px auto; text-align:left; clear:both;
}
/* The input fields for this selector will have rounded edges inset borders and 175px wide */
#formInput{ 
	height:inherit; max-width:220px; color:darkblue; padding:4px;margin-bottom:3px; 
	border-radius:0px 0px 5px 5px; -khtml-border-radius:0px 0px 5px 5px; 
	-moz-border-radius:0px 0px 5px 5px; -webkit-border-radius:0px 0px 5px 5px;
	border:1px inset lightgrey; border-radius:7px; -khtml-border-radius:7px; 
	-moz-border-radius:7px; -webkit-border-radius:7px;background-color:#aaf;		
}
/* The form here will float to the left with a 5px height and spaced 20px away from the block below */
#Optforms { float:left;height:5px;margin-bottom:20px; }
/* These styles are for form inputs like text boxes and drop-down selection boxes 
	Their font is underlined, the cursor is hand-shaped, their background is transparent
*/
#Optforms input{ 
	text-decoration:underline; cursor:pointer;padding:auto 2px;background:transparent;
	border:0px; float:left; 
}
/* This is for the button inputs/ triggers which also have rounded borders and transparent backgrounds */
#buttonform {
	border-radius:5px; -khtml-border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
	width:inherit; cursor:pointer; float:right; border:#9cc solid 1px; padding:3px;
	background:transparent; margin:4px 10px auto auto;font-size:14px;color:#933;
}
#buttonform:hover{ background:transparent;border:#9cc solid 2px; color:#633}
/* : End of header area ::::: */
#nav {
	clear:both; display:block; padding:auto; text-align:center; color:#666; position:relative;
	width:902px; margin:1px auto 4px auto;
}
/* Navigation links are brought to front, they have shadows and are positioned relative to the page settings */
#nav ul{ z-index:2; margin:auto; padding:0px 2px; line-height:28px; color:#666; width:100%;
  box-shadow:0 3px 5px rgba(0, 0, 90, 0.5); -moz-box-shadow:0 3px 5px rgba(0, 0, 90, 0.5);
  -webkit-box-shadow:0 3px 5px rgba(0, 0, 90, 0.5); position:relative;
} /* All lists in the naviMenu */
/* Hover effect to bring back that hidden UL above e.g Home link */
#nav li{ margin:auto 1px; padding:0px;list-style:none;width:147px; float:left;text-shadow:0 1px 0 #f3f3f3; font-size:17px; }
/* The listed links inside the main links on the drop-down navigation bar will become visible if hovered over */
#nav ul li:hover ul{ visibility:visible;}
/* Hyperlinks for the links in the unordered list are aligned centre, no underlines and their font is Cambria */
#nav ul li a{
	text-decoration:none; font-family:"Cambria",Garamond,Comic Sans MS,Times;
	min-height:30px;text-align:center;	padding:1px 3px; display:block;
}
/* The UL inside of the UL i.e the nested list e.g the UL of the Home link   */
#nav ul ul{ clear:both;position:absolute;visibility:hidden;top:30px;width:inherit;
max-width:148px;padding:1px 0px;display:block; }
#nav ul ul li{	margin:1px 0px; position:relative; }
.one{ background-color:#39f; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; 
 border-radius:5px; background:top left url('/images/Bgroundz/Menu_btnGrey.png');
}
.one a:link{ color:#444; } 
.one a:hover{ 
 color:#444; background-color:white;background: -moz-linear-gradient(90deg, black, white, #666);
 background: -webkit-gradient(linear, center bottom, center top, from(black), color-stop(50%,white), to(black)); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='black', endColorstr='white');
 border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px;  
}
/* effects for the header.. text is green, so is the background ...*/
.two{ background-color:#f60; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; 
 border-radius:5px; background:top left url('/images/Bgroundz/Menu_btnGreen.png');
}
.two a:link{ color:#040; }
.two a:hover{ 
 color:#f60; background-color:white;background: -moz-linear-gradient(90deg, green, white, lightgreen);
 background: -webkit-gradient(linear, center bottom, center top, from(green), color-stop(50%,white), 
 to(green)); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='green', endColorstr='white');
 border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; 
}
/* effects for the header.. text is orange, so is the background ...*/
.three{ background-color:#60f; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; 
 border-radius:5px; background:top left url('/images/Bgroundz/Menu_btnOrange.png');
}
.three a:link{ color:#A10703; }
.three a:hover{ 
 color:#A10703; background-color:white;background: -moz-linear-gradient(90deg, #f60, white, #f90);
 background: -webkit-gradient(linear, center bottom, center top, from(#f60), color-stop(50%,white), to(#f90)); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f60', endColorstr='white');
 border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; 
}
/* effects for the header.. text is blue, so is the background ...*/
.four{	background-color:#cff; -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; 
 -khtml-border-radius:5px; background:top left url('/images/Bgroundz/Menu_btnBlue.png');
}
.four a:link{ color:blue; }
.four a:hover{ 
 background-color:white;background: -moz-linear-gradient(90deg, blue, white, lightblue);
 background: -webkit-gradient(linear, center bottom, center top, from(blue), color-stop(50%,white), to(blue)); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='blue', endColorstr='white');
 border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; 
}
/* effects for the header.. text is red, so is the background ...*/
.five{ background-color:#f96; -moz-border-radius:5px; -webkit-border-radius:5px; 
	-khtml-border-radius:5px; border-radius:5px; 
	background:top left url('/images/Bgroundz/Menu_btnRed.png');
}
.five a:link{ color:#300; }
.five a:hover{ 
 background-color:white;background: -moz-linear-gradient(90deg, #900, white, #f00);
 background: -webkit-gradient(linear, center bottom, center top, from(#900), color-stop(50%,white), to(#f00)); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#900', endColorstr='white');
 border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; 
}
/* effects for the header.. text is blue2, so is the background ...*/
.six{ background-color:#333; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; 
 border-radius:5px; background:top left url('/images/Bgroundz/Menu_btnYellow.png');
}
.six a:link{ color:#630; }
.six a:hover{ 
 background-color:white;background: -moz-linear-gradient(90deg, #ff9, white, #fc0);
 background: -webkit-gradient(linear, center bottom, center top, from(#ff9), color-stop(50%,white), to(#fc0)); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9', endColorstr='white');
 border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; 
}
.signature{ 
	clear:both; font-family:"Brush Script MT",Buxton Sketch,Chiller; font-size:24px; }
/* :::::::::::: End of header area :::: ******/
/* This part styles the look of the features in the Cotacts page styles */
#contactbar1 { 
	margin-bottom:20px; margin:auto;width:325px;height:100px;padding:10px;text-align: left;position:relative;
	-moz-border-radius:7px; -webkit-border-radius:7px; -khtml-border-radius:7px; border-radius:7px; 
	float:left; background:url('/images/Bgroundz/LRightGrey.png')repeat;
}
/* I will align all hyperlinks to the right of this block */
#contactbar1 a{ float:right;} 
#contactbar2 { 
	margin-bottom:20px; width:260px;height:100px; padding:10px; text-align: left;position:relative;
	-moz-border-radius:7px; -webkit-border-radius:7px; -khtml-border-radius:7px; border-radius:7px; 
	background:left url('/images/Bgroundz/LRightGrey.png')repeat;float:right; 
}
/* End of Cotacts page styles */
/*::::::::: Home page banners :::::::::::::
	This will be a block with a 160px width, padded to 15px, auto-adjusted top margin and the
 side margins set to 3px 
:::: */
#banner{
 padding:15px; text-align:left; margin:3px auto; display:block; width:180px;
/* The block floats to the left with its lightgreen background as cover for its linear gradient */
 background-color:lightgreen; background: -moz-linear-gradient(top, white, lightgreen 60%); float:left;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='lightgreen');
 background: -webkit-gradient(linear, 0% 0%, 0% 60%, from(white), to(lightgreen));
 -moz-border-radius:8px; -webkit-border-radius:8px; -khtml-border-radius:8px; border-radius:8px;
 box-shadow:0 3px 5px rgba(0, 0, 90, 0.5); -moz-box-shadow:0 3px 5px rgba(0, 0, 90, 0.5);
 -webkit-box-shadow:0 3px 5px rgba(0, 0, 90, 0.5); color:#030;
}
#banner a:link{ text-decoration:none; color:#096;} #banner th{ color:#063; }
#banner a:hover{ color:darkgreen; text-decoration:underline; } 
#banner h4{ text-align:center; color:#324F17; margin:3px auto;} #banner h3{ text-align:center; color:#324F17;margin:3px auto; }
/* This appears on the left side with rounded edges, repeated background image and displayed as a block */
#banner1{
 padding:15px; text-align:left; margin:3px auto; display:block; width:180px; background-repeat: repeat;
 background-image:url(/images/Bgroundz/whitetogrey.jpg); float:left;
 -moz-border-radius:8px; -webkit-border-radius:8px; -khtml-border-radius:8px; border-radius:8px;
 -moz-border-radius:8px; -webkit-border-radius:8px; -khtml-border-radius:8px; border-radius:8px;
 box-shadow:0 3px 5px rgba(0, 0, 90, 0.5); -moz-box-shadow:0 3px 5px rgba(0, 0, 90, 0.5);
 -webkit-box-shadow:0 3px 5px rgba(0, 0, 90, 0.5); 
}
#banner1 a:link{ font-size:14px; text-decoration:none; color:#777;}
#banner1 a:hover{ color:#666; text-decoration:underline; } #banner1 h4{ text-align:center; color:#525252; }
#banner2{
 padding:15px; text-align:left; margin:3px auto; display:block; width:180px; background-repeat: repeat;
 background-image:url(/images/Bgroundz/bgBrown.jpg); float:left;
 -moz-border-radius:8px;	-webkit-border-radius:8px; -khtml-border-radius:8px; border-radius:8px;
 box-shadow:0 3px 5px rgba(0, 0, 90, 0.5); -moz-box-shadow:0 3px 5px rgba(0, 0, 90, 0.5);
 -webkit-box-shadow:0 3px 5px rgba(0, 0, 90, 0.5); 
}
#banner2 a:link{ font-size:14px; text-decoration:none; color:#3D3823;}
#banner2 a:hover{ color:#4A442A; text-decoration:underline; } #banner2 h4{ text-align:center; color:#2A2718; }
#hlplink { position:absolute; display:block; visibility:hidden; margin:2px;}
#hlplink a{ font-size:15px; text-decoration:none; font-family:Garamond; }
/* Interface displayed while the game is running */
#displays{
 padding:10px; text-align:left; margin:3px auto; display:block; width:450px; min-height:400px; 
 background:white; border-radius:5px;-webkit-border-radius:5px; 
 border:1px; float:left; -moz-border-radius:5px;	-khtml-border-radius:5px; 
}
#displayMenu{
	padding:10px; text-align:center; margin:3px auto; display:block; width:170px;background:white; 
	border:2px solid #f2f2f2; float:right; -moz-border-radius:8px;	-webkit-border-radius:8px; 
	-khtml-border-radius:8px; border-radius:8px;
}/* ::: End of Home page banners :::*/
/* ::: End of display panel :: End of middle area :::::: Start of footer area :::: */