/* 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.

*/

body{

	position:relative; font-size:12pt; font-family:"Times",Comic Sans MS, Garamond;

	margin:3px auto;padding:0px; width:100%; text-align:center; color:#666;

	 background:#f2f2f2 url('/fyp/Images/backgrounds/greydots.jpg') repeat;  

	

}

#wrapper{ /* height:inherit;  min-height:600px; */

 clear:both; position:relative; display:block;padding:2px; background-color:white; width:890px;min-height:650px;

 height:inherit; background: -webkit-gradient(linear, center bottom, center top, from(#e6e6e6), color-stop(50%,white), to(#e6e6e6)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6e6e6', endColorstr='white');

 background: -moz-linear-gradient(90deg, #e6e6e6, white, #e6e6e6); margin:8px auto; -moz-border-radius:10px;

 -webkit-border-radius:10px; border-radius:10px; 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);  

}

/* ::  This part is for the header :::::::::::::::::: 

	Set the borders of all images inside the wrapper to appear transparent 

*/

#wrapper img{ border:transparent;}

/* The helmet is independent from any top objects but also brought forward */

#helmet { position:relative; clear:both; margin-bottom:2px; display:block; text-align:center; z-index:1;}

/* positioned relative to the page with a minimum height of 170 pixels, width of 904px and padding of 1px */

#top { 

 display:block; position:relative; min-height:170px; width:904px; padding:1px; margin:auto;

 color: #333; text-shadow: 0px 1px 1px #fff;

}

/* 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{

 min-height:161px; width:180px;text-align:center; background-color: #f2f2f2; 

 float:left; border-radius:10px; -khtml-border-radius:10px; -moz-border-radius:10px;

 -webkit-border-radius:10px; background:url('/fyp/Images/backgrounds/whitetogrey.jpg') left top repeat;

 margin:0px; padding: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{

 min-height:158px; width:500px; text-align:center; float:left; margin:0px 3px;background-color: #f2f2f2;

 -moz-border-radius:10px; -webkit-border-radius:10px;  border-radius:10px;

 background:url('/fyp/Images/backgrounds/whitetogrey.jpg') left top repeat; border-left:2px inset white;

 padding:4px; border-right:2px inset white;

}

/* All header types of H2 have white fonts with shadows to make them appear engraved  */

#topB h2{ color:white; text-shadow: 1px 1px 1px #000,3px 3px 5px #acd; }



/* 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:15px; background-color: #f2f2f2; width:190px;float:left; padding:5px;text-align:center;

 min-height:155px; border-radius:10px; -khtml-border-radius:10px; -moz-border-radius:10px; margin:0px;

 -webkit-border-radius:10px; background:url('/fyp/Images/backgrounds/whitetogrey.jpg') left top repeat;

}

/* 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 3px;background:transparent;

	border:0px; float:left; 

}

#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{ 

	border-radius:7px; -khtml-border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px;

	height:inherit; width:175px; color:#555; padding:auto 8px; border:1px inset lightgrey; 

}

/* 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:2px outset #ccc; background:transparent; 

	margin:4px 12px auto auto;

}

#buttonform:hover{ background:transparent; color:#514}

/* : End of header area ::::: */

div#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 */

div#nav ul{ z-index:2; margin:auto; padding:0px; 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 */

div#nav li{

 margin:auto 1px; padding:0px;  list-style:none; width:146px; float:left; 

 text-shadow:0 1px 0 lightgreen; font-size:14px;

}

/* The listed links inside the main links on the drop-down navigation bar will become visible if hovered over */

div#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 */

div#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;

}

#nav li a:hover{	background:#ccc;}



/* The UL inside of the UL i.e the nested list e.g the UL of the Home link */

div#nav ul ul{	position:absolute; visibility:hidden; top:30px; width:inherit; max-width:850px; }

#nav ul ul li{	margin:1px 0px; position:relative; }



/*  Navigation bar with a drop-down lists : Each one has the same dimensions but different repeating 

	background images to make them look unique but also their borders have rounded edges

*/

.one{ background-color:#39f; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; 

 border-radius:5px; background:top left url('/fyp/Images/backgrounds/homeGrey1.png');

}

.one a:link{ color:#141A1A; }

.two{ background-color:#f60; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; 

 border-radius:5px; background:top left url('/fyp/Images/backgrounds/GamesBrown.png');

}

.two a:link{ color:#660000; }

.three{ background-color:#60f; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; 

 border-radius:5px; background:top left url('/fyp/Images/backgrounds/TutorialsBrown.png');

}

.three a:link{ color:#A10703; }

.four{	background-color:#cff; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; 

 border-radius:5px; background:top left url('/fyp/Images/backgrounds/HelpBlue.png');

}

.four a:link{ color:blue; }

.five{ background-color:#393; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; 

 border-radius:5px; background:top left url('/fyp/Images/backgrounds/AboutGreen.png');

}

.five a:link{ color:#4F6228; }

.six{ background-color:#333; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; 

 border-radius:5px; background:top left url('/fyp/Images/backgrounds/contactsBlue.png');

}

.six a:link{ color:#2E005C; }

.signature{ font-family:"Brush Script MT",Buxton Sketch,Chiller; font-size:24px; }



/* :::::::::::: End of header area :::: ******/

#middle{

 position:relative; min-height:600px; height:100%; width:auto; display:block; 

}

#centText{

	font-size:16px; margin:10px auto; width:300px; padding:10px; text-align: left; border:1px inset #f1f1f1;

	-moz-border-radius:7px; -webkit-border-radius:7px; -khtml-border-radius:7px; border-radius:7px; 

}

/* This part styles up the select inputs to a 7px radius and height adjusts depending on the font-size */

#centText select{ 

	border-radius:7px; -khtml-border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px;

	height:inherit; width:175px; color:#555; padding:auto 8px; border:1px outset lightgrey; 

}

/* 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('/fyp/Images/backgrounds/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('/fyp/Images/backgrounds/LRightGrey.png')repeat;float:right; 

}

/* End of Cotacts page styles */

a:visited { text-decoration:none; color:lightred; }	a:link{	color:green;}

/* Styling boxes */

#img_desc_Box{

	clear:both; position:relative; color:#000; text-align:left; width:800; 	display:block; margin:auto;

}

/* Start of styling boxes */

#img_desc_Box H3{ color:BLUE; margin:2px auto; } 

#img_desc_Box H4{ color:darkblue; margin:4px auto; }

/* :::: End of styling boxes :::::: ***/

/* the lines of the middle section separate contents and they appear with a lightgreen 3px border with a 

 5px margin

*/

 #middle hr{	margin:5px; border:3px outset grey; clear:both; } 

/* This part desbribes that structure of the content in the middle panels which hold information.

 Both panels will have round corners and lightgreen borders 

*/

 #leftpanel{ 

 width:200px; background:transparent; position:relative; float:left; padding:2px; display:block; 

 height:inherit; 

}

/* My right side of the page */

#rightpanel{

 margin:10px auto 3px 13px; width:632px; float:left; min-height:420px; height:inherit; 

 display:block; padding:10px; text-align:left; color:#102000; -moz-border-radius:7px; border:1px outset #f4f4f4;

 position:relative;  -webkit-border-radius:7px; border-radius:7px; 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); 

}

/* All h4 heading inside the panels will be in blue, aligned left and 15px in size */

#leftpanel h4{ margin:3px auto; text-align:left; color:#660000;}

#rightpanel h4{ margin:3px auto; text-align:left; color:#330000; }



/*::::::::: Home page banners :::::::::::::::::*/

#banner{

 /* This will be a block with a 160px width, padded to 15px, auto-adjusted top margin and the side margins

 set to 3px 

*/

 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(/fyp/Images/backgrounds/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(/fyp/Images/backgrounds/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:450px; 

 height:inherit; 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 :::: */

#footer{

 position:relative; clear:both; margin-top:15px; width:900px; padding:15px; margin:auto; -moz-border-radius:10px;

 -webkit-border-radius:10px; border-radius:10px; 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); background: url('/fyp/Images/backgrounds/greyShade.png') repeat;

  -webkit-background-size: auto; -moz-background-size:auto; -o-background-size: auto; background-size: auto;

}

#footer b{ color:#040; } 

#footer th a:hover{ color:#089; font: bold 13px Helvetica, Arial, Sans-Serif; 

  text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902; 

}

#footer a:link{ 	color:#303030; text-decoration:none;} #footer a:hover{ color:#444; text-decoration:underline; }

/* :::::::::::: End of footer area ::::: ***/