﻿/* Reset */

html, body { margin: 0; padding: 0; border: 0;
				background: transparent; font-size:10px;}
				
div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li, table, tr, th, td, tbody,
tfoot, thead {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	background: transparent;
} 

img { margin:0; padding:0; border:0; }

table, tr, th td, tbody, tfoot, thead {
	margin: 0; padding: 0; border: 0;
	vertical-align: baseline;
	background: transparent;
}

table { border-collapse: collapse; border-spacing: 0; }

input, select, textarea, form, fieldset {
	margin: 0; padding: 0; border: 0;
} 

article, aside, dialog, figure, footer, header, hgroup, nav, section {
	display:block; }
	
h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike {
	font-family: 'Roboto', sans-serif;
	font-size:100%;
	font-weight: normal;
	font-style: normal;
	line-height: 100%;
	text-indent: 0;
	text-decoration: none;
	text-align: left;
	color: #000;
}

h1 { font-family: 'Roboto', sans-serif;
	letter-spacing: 2px;
	font-size:100%;
	font-weight: normal;
	font-style: normal;
	line-height: 100%;
	text-indent: 0;
	text-decoration: none;
	text-align: left;
	color: #000;	
}

ol, ul { list-style: none; }

/* Global */

html {  }
body { background-color:#eeeeee; }

/* Headings */

h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #000; }

h1 { font-size:24px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h6 { font-size:14px; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }

/* Text Elements */

p			{ color:#000; font-size:12px; line-height:150%; }
p .left		{ margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p .right	{ margin: 1.5em 0 1.5em 1.5em; padding: 0; }

a 			{  }
a:link 		{ color: #00f; }
a:visited	{ color: #00f; }
a:active	{ color: #000; }
a:focus		{ color: #666; }
a:hover		{ color: #f00; }

blockquote 	{ color: #000; font-size:12px; }

strong 		{ font-weight: bold; }
em			{ font-style: italic; }

/* Images */


/* Lists */

ul   		{  }
ol 			{ list-style-type:decimal; }

ul li 		{ color:#000; font-size:12px; }
ol li 		{ color:#000; font-size:12px; }

dl 			{  }
dt 			{  }
dd 			{  }


/* Tables */

table 		{ width:100%; }

tr 			{  }
.odd 		{ background-color:#eee; }
.even		{ background-color:#fff; }

th			{ font-weight: bold; }
thead, th   { background: #ccc; }

tbody       {  }

th, td, caption		   {  }
caption			       {  }

tfoot 					{  }
.tfooter				{ background-color:#ccc; text-align:center; font-style:italic; }

caption					{ background: #efefef; }

					
/* Containers */


#wrapper			{ width:75%; max-width:960px; margin:0px auto; 

		box-shadow: 7px 0px 5px 0px rgba(50, 50, 50, 0.45);
		-webkit-box-shadow: 7px 0px 5px 0px rgba(50, 50, 50, 0.45);
		-moz-box-shadow: 7px 0px 5px 0px rgba(50, 50, 50, 0.45);
		-o-box-shadow: 7px 0px 5px 0px rgba(50, 50, 50, 0.45);}
		
		

#top				{ background-color:#ffffff; width:100%; padding:20px 0px; overflow:hidden;  }

		#logo 				{    }
		#logo img			{ width:175px; height:175px;
															display: block;
														 	 margin-left: auto;
														 	 margin-right: auto; }
						  
						  

#topnav				{  }
#topnav ul			{ height: 100%; text-align:center; padding:10px 0px;
						background: rgb(122,188,255); /* Old browsers */
						background: -moz-linear-gradient(top,  rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); /* FF3.6+ */
						background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,188,255,1)), color-stop(44%,rgba(96,171,248,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */
						background: -webkit-linear-gradient(top,  rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */
						background: -o-linear-gradient(top,  rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Opera 11.10+ */
						background: -ms-linear-gradient(top,  rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* IE10+ */
						background: linear-gradient(to bottom,  rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* W3C */
						filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */ }
							 
#topnav ul li 		{ display:inline; }
#topnav ul li a		{ padding:9px 4%; }

#topnav a:link 		{ color:#ffffff; }
#topnav a:visited 	{ color:#ffffff; }

#topnav a:hover 	{ border-radius:3px; 
background: rgb(100,170,200); /* Old browsers */
background: linear-gradient(to bottom,  rgba(100,170,200,1) 0%,rgba(80,160,230,1) 44%,rgba(50,130,200,1) 100%); /* W3C */ }
 
#topnav a:active 	{ color:#ffffff; }
#topnav a:focus 	{ color:#ffffff; }

#banner img			{ width:100%; height:100%; max-height:300px; border-top:1px solid #C0C0C0;  }

#content			{ width:auto; padding: 40px 30px 45px 30px;
									background-color:#ffffff; 			 }
#content h1			{ margin: 0 0 30px 0; border-bottom: 1px #000000 dotted; line-height:180%; padding-bottom:20px; }
#content p			{ font-size:14px; margin: 16px 0; line-height:180%; text-align:justify; }
#content a:link		{ font-size:14px; margin: 16px 0; line-height:180%; }
#licence p			{ font-size:10px; text-align:right; }
#licence a:link		{ font-size:10px; text-align:right; }



#boxes				{ width:100%; height:auto; margin-top:30px; }
#boxes a:link, #boxes a 		{ color:black; border-bottom: thin black solid; }

#box1				{ background-color:#ffffff; width:25%; height:75%; margin:2%; padding:2%; border-radius:3px;	
		 display:inline; float:left;
		 
		 background:#ffff7a; 		
		 box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
		-webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
		-moz-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
		-o-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45); }
#box2				{ background-color:#ffffff; width:25%; height:75%; margin:2%;; padding:2%;  border-radius:3px;
	display:inline; float:left;
	
	 background:#ffff7a;
		box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
		-webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
		-moz-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
		-o-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45); }
#box3				{ background-color:#ffffff; width:25%; height:75%; margin:2%; padding:2%;  border-radius:3px;
		display:inline; float:left;
		
		 background:#ffff7a; 		
		 box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
		-webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
		-moz-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
		-o-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45); }
#box1 h3			{ text-align:center; margin-bottom:10px; }
#box2 h3			{ text-align:center; margin-bottom:10px; }
#box3 h3			{ text-align:center; margin-bottom:10px; }

#box1 img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#box2 img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#box3 img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}



#person				{ padding: 20px 0px 30px 0; clear:both; }

#person img		    { width:175px; height:200px; display:inline; float:left; 
				  margin:0 50px 0 15px; border-radius:3px;
					box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
					-webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
					-moz-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
					-o-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);  }
#person img:hover	{ border: 1px #000000 solid; }

#person0			{ padding: 30px 0; clear:both; }
#person0 img		{ width:175px; height:200px; display:inline; float:left; 
				 margin:0 50px 0 15px; border-radius:3px;
				 box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
					-webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
					-moz-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
					-o-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);  }
#person0 img:hover	{ border: 1px #000000 solid; }



#footer 			{ clear:both; padding:5px 0 5px 0;
 background: rgb(122,188,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,188,255,1)), color-stop(44%,rgba(96,171,248,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
}
#footer p			{ font-size:11px; text-align:center; color:black; }
#footer a:link		{ color:black; }
#footer a:visited	{ color:black; }
#footer a:hover		{ color:black; }
#footer a:active	{ color:black; }

	/* Mobile */
	
	@media only screen and (max-width: 650px) {
	
	#wrapper { width:100%; }
	#banner  { display:none; }
	#content iframe { width:100%; }
	
	#topnav, #topnav ul { height: auto; padding:0px; }
	#topnav li, #topnav a {
		float: none;
		display: block;
		margin: 0;
		height: auto; }
	#topnav a {
		width: auto;
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
		padding:0; }
		
	#boxes				{ width:100%; height:auto; margin-top:30px; }
	#box1				{ background-color:#ffffff; width:90%; height:75%; margin-top:10%; padding:5%; border-radius:3px;	
		 display:block; margin-left:auto; margin-right:auto;
		 
		 background:#ffff7a; 		
		 box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
		-webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
		-moz-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
		-o-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45); }
	#box2				{ background-color:#ffffff; width:90%; height:75%; margin-top:10%; padding:5%; border-radius:3px;	
		 display:block; margin-left:auto; margin-right:auto;
	
	 background:#ffff7a;
		box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
		-webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
		-moz-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
		-o-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45); }
	#box3				{ background-color:#ffffff; width:90%; height:75%; margin-top:10%; padding:5%; border-radius:3px;	
		 display:block; margin-left:auto; margin-right:auto;
		
		 background:#ffff7a; 		
		 box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
		-webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
		-moz-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
		-o-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45); }
		
	#person				{ padding: 15px 0px 30px 0; clear:both; }

	#person img		    { width:175px; height:200px; display:block; clear:both; 
					margin:0;
				  	border-radius:3px;
					box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
					-webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
					-moz-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
					-o-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);  }
	#person img:hover	{ border: 0px #000000 solid; }
	#person p, #person h3, #person0 p, #person0 h3 { display:block; clear:both; }
	#person h3, #person0 h3 { padding-top:30px; }

	#person0			{ padding: 30px 0; clear:both; }
	#person0 img		{ width:175px; height:200px; display:block; float:left; 
				 margin:0px; border-radius:3px;
				 box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
					-webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
					-moz-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);
					-o-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.45);  }
	#person0 img:hover	{ border: 0px #000000 solid; }


	

	}
	
		
	@media only screen and (max-width: 920px) {
	
	#wrapper { width:100%; }
	#content iframe { width:100%; }
	
	#topnav ul li a		{ padding:9px 2%; }
	
	
	}


	
	



/* Forms */

form { text-align:left; margin:20px; }

label, submit, input, textarea {
	border:0; padding:0; margin:0; background:none;
}

input, textarea {
	border:1px #333 solid; margin-left:10px; padding: 5px;
}

input {
	width:280px; margin-bottom: 16px;
}

textarea {
	width: 280px; height: 100px;
	margin-bottom: 16px;
}

.submit {
	width:90px; height:25px;
	margin-left:160px;
	font-size:14px;
}