@charset "utf-8";
/* CSS Document */

body /* This DIV is the background information, texture, colour, etc*/
	{
		background-color:#000000;
	}
	
.font
	{
		color:#FFFFFF;	
	}
	
@font-face /* Custom font located within the base folder*/
{
   font-family:"avenir";
   src:url(../style/avenirltstd-light.ttf);
 }	
	
/* The following scripts are related to additional components, such as paragraph, font, etc*/	
	
p
	{
		font-family:"avenir";
		font-size:16px;
		color:#FFFFFF;			
	}	

h1
	{
		font-family:"avenir";
		font-size:30px;
		color:#FFFFFF;
	}
h3
	{
		font-family:"avenir";
		font-size:18px;
		color:#FFFFFF;
	}	
		
/* CLOSING OF Several different links for 'a' to perform difference outcomes, this includes colours, visited and unvisited links*/		

#wrapper /*DIV that defines the page size (resoulation), text alignment*/
	{
		width: 1400px;
		position: relative;
		margin: 0 auto;

	}
	
#logo /*DIV that defines the page size (resoulation), text alignment*/
	{
		padding-top:25%;
		max-width: 100%;
	}		
	
#firstvideo /* This DIV contents the information relation to the videos on each page, font size, colour and border*/ 
	{		
		margin-top:10px;	
		height: 850;
		width: 1000;
	}	
	
#content
	{
		background-color: #ABABAB;
		text-align: left;
		font-size:16px;
    	border-style: solid;
   		border-width: 2px;
	}
	
#map
	{
		position:absolute;
		width:100%;
	}
	
#header /* This DIV contents the information relation to the page header, image height and width, font size and border*/
	{		
		margin-top:50px;
		margin-bottom: 50px;
		margin-left:100px;
	}	
	
#footer /* This DIV contents the information relation to the page Footer, font size, colour and border*/
	{
		position:centre;
		background:#000000;
		margin-top:10px;
		margin-left: 45%;
	}	
			
	
#menu /* This DIV contents the information relation to the navigate on ever page, font size, colour and border*/ 
	{
		background:#000000;
		cursor:pointer;		
		margin-top:30px;
		max-width:100%;
	}	
	
#animation
	{
		margin-top: 10px;
		margin-bottom: 30px;
		margin-left: 100px;
		width:auto;
	}
	
#pictures
	{
		width: 1000px;
		margin-left:200px;
		float:left;
	}
	
#videoinfo /* Content information for text layout for the profile on the credit page*/
	{
		text-align: center;
		margin-left: 180px;
		margin-bottom: 20px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		font-size:16px;
    	border-style: solid;
   		border-width: 2px;
		
		width: 1000px;
		height:auto;
		
		/* The below scrip is used to create a transparent background for the text*/				
		filter:alpha(opacity=80); 
       	-moz-opacity:0.8; /* transparent background for FireFox*/
       	-khtml-opacity: 0.8;
        opacity: 0.8;
}
	
#text
	{
		width: 600px;
		height: 40px;
		margin-left: 29%;
		text-align:center;	
	}

/* The following scripts containing information relative to the interactive map - image */
div.img 
	{
    	margin: 5px;
    	border: 1px solid #ccc;
    	float: left;
    	width: 180px;
	}

div.img:hover 
	{
    	border: 1px solid #777;
	}
	
div.img img 
	{
    	width: 100%;
    	height: auto;
	}

div.desc 
	{
    	padding: 15px;
    	text-align: center;
		color:#FFFFFF;
	}	
/* Closing on information interactive map - image */	
	
	

/* for screen/phone resolutions 980px or less */
@media screen and (max-width: 980px) 
{
	body 
	{
		margin:2%;	
		position: relative;
	}

	#wrapper    
	{
		width: 90%;
	}
	
	#videoinfo 
	{
		font-size:1.2em;
	}

	header, footer 
	{
		position:relative;
	}
	
	img
	{
		max-width: 100%;
		height: auto;
	}
}