/*Style for the overall body of the site - Chuan Khoo, Design.*/
body { font-family: century gothic, verdana, arial, sans-serif;
		 	 background: #330066 url(images/bg-body2.jpg) repeat-y center top;/*Darker blue background #330066.*/
		 	 font-size: 100%;
		 	 line-height: 1.5;
			 text-align: left;
		 }
/*Style for the body class.*/
.body {
			margin: 0 auto;
			width: 100%;
			clear: both;
}

#wrapper {
				 	margin: 1% auto 2% auto;
					padding-top: 0;
					padding-bottom: 8%;
					width: 70%;
					border-top: 4px solid #000000;
					border-left: 2px solid #000000;
					border-right: 2px solid #000000;
					border-bottom: 4px solid #000000;
					background-color: #666699;/*Lighter blue colour.*/
					border-radius: 10px;
					-moz-border-radius: 10px;
					-webkit-border-radius: 10px;			 
				 }

.hotspot-homelink {
							 width: 400px;
							 height: 0;
							 position: relative;
							 }

/*Hotspot over left side Logo in banner to link back to Home Page.*/							 
.hotspot-homelink .hotspot{
											 width: 360px;/*Width of hotspot. */
											 height: 110px;
											 position: absolute;
											 top: 100px;/*Distance from Top of Browser Window. */
											 left: 35px;/*Distance from Left side of Browser Window. */
											 } 
				 
/*Removes the underline on links.*/
a { text-decoration: none;
	}

/*Encloses banner image and nav buttons.*/
.mainHeader img {
						width: 100%;
						height: auto;
						margin: 0 0 -1% 0;
						}
						
.mainHeader nav {
								background-color: #000000;
								height: 40px;
}

.mainHeader nav ul {
									 list-style: none;
									 margin: 0 auto;
}

.mainHeader nav ul li {
									 		float: left;
											display: inline;
}

/*Gives the current selected link blue colour.*/
.mainHeader nav .active {
					color: #99ffff;
					padding: 10px 30px;/*Keeps active position on nav bar static.*/
					height: 20px;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
																	color: #ededed;
																	display: inline-block;
																	padding: 10px 25px;
																	height: 20px;
}

/*Gives the hovered over link light green colour.*/
.mainHeader nav a:hover {
						color: #00ff00;
						text-shadow: none;
}

.mainHeader nav ul li a {	
									 				color: #ffffff;
												 	margin: 0 5px;
}

.homeContent {
						 	width: 100%;
							height: 100%;
							margin: 0 auto;
							text-align: center;	
}

.homeContent header h1 {
						 					 	margin-top: 5%;
												font-family: century gothic, verdana, arial, sans-serif;
						 					 	font-size: 105%;
												letter-spacing: 4px;
												color: #dbdbdb;/*Light blue colour.*/
}

.thumbnails {
						 width: 100%;
						 margin: 4%;
						 padding: 0;
						 text-align: center;
						 background-color: #666699;/*Lighter blue colour.*/	
}

.tnstyle img {
				 		 	margin: 1% 2%;
				 			padding: 0.5%;
							background-color: #ededed;/*Light Gray Colour for padding.*/
							border: 1px solid #555555;/*Width, style and darker colour for border.*/
							border-radius: 5px;
							float: left;		
}

.clear {
			 	clear: both;
				}

footer {
			 	width: 100%;
				height: 5%;
				margin: 2% 0;
				background-color: #666699;/*Lighter blue colour.*/						
}

.terms {
				list-style: none;
				margin: 2% auto;
				padding-top: 15px;
				line-height: 50%;
				font-size: 80%;
				float: left;
				display: inline;
				color: #dbdbdb;/*Light blue colour.*/
}

footer.terms a {	
					color: #ccff66;/*Lighter green link colour.*/
					margin: 0 5px;
}

.terms a:link, a:visited {
													color: #ffffff;/*White link colour.*/
													display: inline-block;
													padding: 5px 0;
													height: 0;
}

.terms a:hover {
						color: #00ff00;/*Light green link colour.*/
						text-shadow: none;
}

/*----------------------Individual Pages.-------------------------------------*/

.about {
			 	width: 60%;
				height: 100%;
				margin: 0 auto;
				padding: 4%;
				text-align: center;
				color: #dbdbdb;	
}

.about a:link, a:visited {
													color: #ccff66;/*Lighter green link colour.*/
}

.about a:hover {
								color: #00ff00;/*Bright green link colour.*/
}

.about h2 {
			 		 font-size: 110%;
}

/*Styling of list of term to lower alphabetical. */
.alphalist {
					 list-style: none;
					 line-height: 200%;
					 }

/*Style sheet for individual zoom image pages.*/
.zoomImage {
						 width: 100%;
							height: 100%;
							margin: 3% 2% 0 2%;
							padding: 1%;
}

.zoomImage img {
				 		 	margin: 1% 1%;
				 			padding: 0.5%;
							background-color: #ededed;/*Light Gray Colour for padding.*/
							border: 1px solid #555555;/*Width, style and darker colour for border.*/
							border-radius: 5px;
							float: left;		
}

.image-m {
				 	display: none;/*Hides the smaller image that only shows for mobile size.*/
}

.pageContent {
						 	width: 100%;
							height: 100%;
							margin: 0 auto;
							text-align: center;	
}

.pageContent header h1 {
						 					 	margin-top: 5%;
												font-family: century gothic, verdana, arial, sans-serif;
						 					 	font-size: 105%;
												text-align: center;
												letter-spacing: 4px;
												color: #dbdbdb;/*Light blue colour same as info panel background.*/
}

aside {
			 width: 28%;
			 height: 100%;
			 margin: 0 4% 0 1%;
			 padding-bottom: 4%;
			 border: 1.5px solid #555555;
			 border-radius: 5px;
			 color: #330066;
			 text-align: left;
			 background-color: #ededed;/*Light Gray Colour for padding.*/
			 float: left;
}

aside.description h3 {
										 	font-size: 105%;
											padding: 0 2% 0 5%;
											line-height: 150%;
}

aside.description h4 {
										 	font-size: 105%;
											font-weight: normal;
											padding: 0 2% 0 5%;
											line-height: 120%;
}

aside.description h4 a:link, a:visited {
																			 	color: #009900;/*Dark green link colour.*/
}

aside.description h4 a:hover {
										 				 	color: #00ff00;/*Lighter green link colour.*/
}

aside.description h5 {
										 	font-size: 95%;
											font-weight: normal;
											padding: 0 2% 0 5%;
											line-height: 120%;
}

aside.description h5 a:link, a:visited {
																			 	color: #009900;/*Dark green link colour.*/
}

aside.description h5 a:hover {
										 				 	color: #00ff00;/*Lighter green link colour.*/
}

aside.description p {
										 		 padding: 0 2% 0 5%;
												 line-height: 175%;
}

h2.infoHeader {
							 font-size: 110%;
							 letter-spacing: 4px;
							 width: 96%;
							 background: #ccc url(images/header-cogs-1.png) no-repeat right top;
							 margin: 0;
							 padding: 4.5% 0 3.5% 4%;
							 border-radius: 5px;
}


/*-----------Mobile View.------------------------------------------------*/
@media only screen and (max-width: 380px) {
			 						 				
#wrapper {
				 	width: 96%;
}

.hotspot-homelink {
							 width: 120px;
							 height: 0;
							 position: relative;
							 }

/*Hotspot over left side Logo in banner to link back to Home Page.*/							 
.hotspot-homelink .hotspot{
											 width: 100px;/*Width of hotspot. */
											 height: 30px;
											 position: absolute;
											 top: 20px;/*Distance from Top of Browser Window. */
											 left: 5px;/*Distance from Left side of Browser Window. */
											 } 

/*Encloses banner image and nav buttons.*/
.mainHeader img {
						margin: 0 0 -2% 0;
}

/*Gives the current selected link blue colour.*/
.mainHeader nav .active {
					margin-top: 0;
					border-top: none;
					padding-left: 0;/*Keeps active position on nav bar static.*/
}
													
.mainHeader nav {
								 height: 250px;/*Height of the black nav background.*/
}
																					 
.mainHeader nav ul {
										padding: 0;
}

.mainHeader nav ul li {
									 		 width: 100%;
											 text-align: center;
											 border-top: 1px solid #666699;/*Give border of blue background colour.*/
}
																						
.thumbnails {
						 margin: 15%;
}

.terms {
			 	line-height: 110%;
				margin: 1% auto;
				padding-top: 0;
}						 

/* Individual pages - Mobile view. */
.pageContent .zoomImage{
						 	margin: 0;
							padding: 0;
}

.zoomImage .image-d {
				 	display: none;/*Hides the larger desk top image for mobile view.*/
}
.zoomImage .image-m {
				 	display: block;/*Shows the smaller image for mobile view.*/
}

.zoomImage {
					 	margin: 0;
					 	padding: 0;
}
						
.zoomImage img {
					 	margin-left: 2%;
						padding: 0;
}

aside.description {
			 width: 94%;
			 margin: 2%;
			 padding: 0;
			 clear: both;
}

aside.description h3 {
													padding: 0 2% 0 3%;
}

aside.description h4 {
										 	font-size: 105%;
											padding: 0 2% 0 3%;
}

aside.description h5 {
										 	font-size: 95%;
											padding: 0 2% 0 3%;
											line-height: 120%;
}

aside.description p {
													padding: 2% 0 0 2%;
}

h2.infoHeader {
							 padding: 8px 0 12px 5px;
							 width: 98%;
}

.about {
			 	width: 96%;
				padding: 1%;		 	
}
													
}/* Closing bracket of Mobile view. */

/*----------Tablet View.----------------------------------------------*/
@media (min-width: 381px) and (max-width: 949px) {

#wrapper {
				 	width: 90%;
}

.hotspot-homelink {
							 width: 260px;
							 height: 0;
							 position: relative;
							 }

/*Hotspot over left side Logo in banner to link back to Home Page.*/							 
.hotspot-homelink .hotspot{
											 width: 230px;/*Width of hotspot. */
											 height: 80px;
											 position: absolute;
											 top: 60px;/*Distance from Top of Browser Window. */
											 left: 25px;/*Distance from Left side of Browser Window. */
											 } 

aside {
			 width: 60%;
			 margin: 0 4% 0 4%;
			 padding-bottom: 4%;
}

h2.infoHeader {
							 padding: 4% 0 1% 6%;
							 width: 94%;
}											 
											 
.mainHeader nav {
								 height: 80px;/*Height of the black nav background.*/
}

.thumbnails {
						 margin: 1%;
}

.terms {
			 	line-height: 60%;
				}
				
}