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

/* =====================   CSS RESET SECTION ==== */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b2 | 201101
   NOTE: THIS IS A BETA VERSION (see previous line)
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video
{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
		@font-face {
			font-family: 'open_sansbold';
			src: url('OpenSans-Bold-webfont.woff') format('woff');
			font-weight: normal;
			font-style: normal;
		
		}
		
		@font-face {
			font-family: 'open_sansregular';
			src: url('OpenSans-Regular-webfont.woff') format('woff');
			font-weight: normal;
			font-style: normal;
		
		}
		
		@font-face {
			font-family: 'open_sanslight';
			src: url('OpenSans-Light-webfont.woff') format('woff');
			font-weight: normal;
			font-style: normal;
		
		}	
					
		body	{
			font-family: 'open_sansregular', sans-serif, Arial, Helvetica;
		}
		
		articel, aside, details, figcaption, figure, footer, header, menu, nav, ul, section {display:block;}
				
		h2{font-size:14px;
			color: #666;
			padding-top:0.5em;
		}
		
		#basicText{font-size:14px;
			position:absolute;
			color: #666;
			top:-6px;
			left:15px;
		}
		
		#txtTitle
		{
			position:absolute;
			left:10px;
			top:4px;
			font-family: 'open_sansbold', sans-serif, Arial, Helvetica; 
			font-size:20px;
			color:#667;
		}
		#mysource
		{
			position:absolute;
			left:15px;
			top:650px;
			font-size:12px;
			color:#FFF;
		}
		#dvCentre
		{
			position:absolute;
			left:760px;
			top:650px;
			font-size:12px;
			color:#FFF;
		}
				#mysource a:link{color:#eee;}
				#mysource a:active{color:#eee;}
				#mysource a:visited{color:#ddd;}
				#mysource a:hover{color:#eee;}
				
				#dvCentre a:link{color:#eee;}
				#dvCentre a:active{color:#eee;}
				#dvCentre a:visited{color:#ddd;}
				#dvCentre a:hover{color:#eee;}
		#mainChart
		{
			position:absolute;
			width:940px;
			height:300px;
			left:5px;
			top:100px;	
		}
		#bigDate {
			position:absolute;
			top:23px;
			left:300px;
			font-size:44px;
			font-family:'open_sansbold';
			color:#999999;
		}
		
		#rewind{
			position:absolute;
			top:37px;
			left:250px;
		}
		
		#forward{
			position:absolute;
			top:37px;
			left:416px;
		}
		
		#play {
			position:absolute;
			top:37px;
			left:465px;
		}
		#pause {
			position:absolute;
			top:37px;
			left:465px;
		}
		
		#timeSlider	{
			position: relative;
			left: 60px;
			top: 348px;
			width: 853px;
		}
		#outputs
		{
			position:absolute;
			top:390px;
			width:940px;
			height:278px;
			background-color:#99a8c6;
			/*opacity:0.7;  9abed6  99a8c6*/
		}
		.three
		{
			position:relative;
			float:left;
			margin-top:8px; 
			height:250px;
			
		}
		#ecoD{
			width:260px;
			background-color:#EEE;
			padding-left:10px;
			padding-right:10px;
		}
				.basics{
						/*font-family:'open_sansbold';  */
						padding-top:6px;
						padding-left:10px;
					}
							#contain0{font-size:20px;font-family:'open_sansbold';}
							#contain1{font-size:20px;font-family:'open_sansbold';}
							#contain2{font-size:20px;font-family:'open_sansbold';}
							#contain3{font-size:16px;}
							#contain4{font-size:16px;}
							#contain5{font-size:16px;}
							
					.basNo{
						
						position:relative;
						display:inline;
						float:right;
						padding-right:10px;
						color:#555;
					}
							#containNo0{font-size:20px;font-family:'open_sansbold';}
							#containNo1{font-size:20px;font-family:'open_sansbold';}
							#containNo2{font-size:20px;font-family:'open_sansbold';}
							#containNo3{font-size:16px;}
							#containNo4{font-size:16px;}
							#containNo5{font-size:16px;}
		
		#hoD{
			width:400px;
			background-color:#dfdfdf;
			padding-left:10px;
			padding-right:10px;
			line-height:120%;
			
		}
		
		.homeStyle li
		{
			padding-left:15px;
			padding-right:5px;
			padding-top:8px;
			color:#444;
			font-size:14px;
			list-style-position:inside;
			text-indent:-1em;
		}
				.homeStyle a:link{color:#444;}
				.homeStyle a:active{color:#444;}
				.homeStyle a:visited{color:#99a8c6;}
				.homeStyle a:hover{color:#444;}
	
			
		#flagD{
			width:240px;
			color:#444;
		}
		
		
		#inout{
			height:30px;
			background-color:#eee;
		}
		#labelin
		{
			position:absolute;
			top:4px;
			left:11px;
			color:steelblue;
			font-family:'open_sansbold';
		}
		
		#topCountry
		{
			position:absolute;
			top:8px;
			left:40px;
			font-family:'open_sansbold';
			font-size:12px;
			color:steelblue;
		}
			.one
			{
				position:relative;
				float:left;
				height:90px;
			}
				#imIn{
					position:absolute;
					padding:0px;
					width:40px;
					background-color:#eee;
					top:35px;
					left:0px;
				}
					#top10{position:absolute;top:0px;left:0px;}
					#top11{position:absolute;top:30px;left:0px;}
					#top12{position:absolute;top:60px;left:0px;}
				
				#fIn{
					position:absolute;
					width:160px;
					height:90px;
					top:35px;
					left:40px;
					background-color:#eee;
					}
								#countryIn0{padding-top:4px;padding-left:8px;}
								#countryIn1{padding-top:8px;padding-left:8px;}	
								#countryIn2{padding-top:8px;padding-left:8px;}
				
				#numIn{
					position:absolute;
					width:30px;
					background-color:#eee;
					top:35px;
					left:200px;
					text-align:right;
					padding-right:10px;
					}
								#sizeIn0{padding-top:4px;padding-left:10px;}
								#sizeIn1{padding-top:8px;padding-left:10px;}	
								#sizeIn2{padding-top:8px;padding-left:10px;}
								
		/* now for the lower section*/
		
		#inouttwo{
			position:absolute;
			top:125px;
			left:0px;
			height:30px;
			width:240px;
			background-color:#eee;
		}
		
		#labelout
		{
			position:absolute;
			top:4px;
			left:4px;
			color:#ff961e;
			font-family:'open_sansbold';	
		}
		#topCountryOut
		{
			position:absolute;
			top:8px;
			left:44px;
			font-family:'open_sansbold';
			font-size:12px;
			color:#ff961e;
		}
			.two
			{
				position:absolute;
				height:90px;
			}
			
				#imOut{
					width:40px;
					background-color:#eee;
					left:0px;
					top:35px;
					}
						#top20{position:absolute;top:0px;left:0px;}
						#top21{position:absolute;top:30px;left:0px;}
						#top22{position:absolute;top:60px;left:0px;}
					
				#fOut{
					width:160px;
					background-color:#eee;
					top:35px;
					left:40px;
				}
						#countryOut0{padding-top:4px;padding-left:8px;}
						#countryOut1{padding-top:8px;padding-left:8px;}	
						#countryOut2{padding-top:8px;padding-left:8px;}
			
				#numOut{
					width:30px;
					background-color:#eee;
					top:35px;
					left:200px;
					align:right;
					text-align:right;
					padding-right:10px;
					}
						#sizeOut0{padding-top:4px;padding-left:10px;}
						#sizeOut1{padding-top:8px;padding-left:10px;}	
						#sizeOut2{padding-top:8px;padding-left:10px;}
		
		
		.lineClass
		{
			fill:none;
			stroke:steelblue;
			stroke-width:3;
		}
		.lineClassEm
		{
			fill:none;
			stroke:#ff961e;
			stroke-width:3;
		}
	
		.barNet
		{
			fill:#a3b888;
			stroke:#5c9117;
			stroke-width: 1px;
			opacity:0.7;
			shape-rendering:crispEdges;
		}
		
		.yaxis text
		{
			fill: #666;
			stroke: #666;
			stroke-width:0;
		}
		
		.yaxis line
		{
			fill: #aaa;
			stroke: #aaa;
			stroke-width:0.5;
		}
		
		.xaxis
		{
			fill: none;
			
		}
		
		#fiveTabs {
			position:absolute;
			background-color:#fff;
			display:block;	
			top: 35px;
			line-height:120%;
		}
		
		#fiveTabs a {
				color: #186685;
				font-family: 'open_sansregular', Arial, Helvetica, sans-serif;
				font-size: 18px;
				padding:2px;
				background: rgba(212,212,212,0.85);
				cursor: pointer;
				margin-right:3px;
		}
		
		#fiveTabs li:hover ul{display:block;}
		#fiveTabs li { position:relative; float:left; list-style-type:none; }   
		
		#fiveTabs li a {display:block; /*padding:13px 29px;  color:#186685;*/ text-decoration:none; width:181px; height:40px; text-align:center; }
		
	/*	#fiveTabs li a#allCitizen:hover, #fiveTabs li a#britCitizen:hover,  #fiveTabs li a#nonBrit:hover,  #fiveTabs li a#eu:hover,  #fiveTabs li a#nonEu:hover { 
				border-bottom: 4px solid orange;
				background:#ddd;
		 			}
					*/
					
					
		 #fiveTabs li a#allCitizen:active {
			 	border-bottom: 4px solid red;
		 }
		 /*  if u wish hover to change
		#fiveTabs li a#allCitizen:hover {
			border-bottom: 4px solid orange;
			background:#ddd;
		}
		*/
		
		#fiveTabs li a#allCitizen  { 
			border-bottom: 4px solid red;  /*  #1e5a82  */
			background: #ddd;
			vertical-align:middle;
			line-height:40px;
		}
		#fiveTabs li a#britCitizen  { 
			border-bottom: 4px solid #2e6e99;
			background: #ddd;
			vertical-align:middle;
			line-height:40px;
		}
		#fiveTabs li a#nonBrit  { 
			border-bottom: 4px solid #3681b3;
			background: #ddd;
			vertical-align:middle;
			line-height:40px;
		}
		#fiveTabs li a#eu { 
			border-bottom: 4px solid #3e94cd;
			background: #ddd;
		}
		#fiveTabs li a#nonEu  { 
			border-bottom: 4px solid #45a6e6;
			width:184px;
			background: #ddd;
			vertical-align:middle;
			line-height:40px;
			margin-right:0px;
		}

		#fiveTabs a span { display:block; float:right;}   
		#fiveTabs ul ul { display:none; width:100%; position:absolute; left:0;}   
		#fiveTabs ul ul li { float:none; }   
		#fiveTabs ul ul a { padding:4px 4px; border-left:none; border-right:none;}
		
		
		
		svg	{
			overflow:hidden;
			height:300px;
		}

		#ieMsg{
			/*margin: 0px auto;*/
			width:940px;  /*   was 976 ???   */
}
		
#content {
    margin: 0 auto;
}

#suptext {
	height:100px;
	z-index:2;
	width:300px;
	top:100px;
	margin: 0 auto;
	padding:50px;
	background-color:#F2F5FA;
	border: 1px solid #186685;
	position:relative;
}

 
#suptext a{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
	color:#186685;
}


#altImage{
	top:-200px;
	position:relative;
	left:0px;
}

h1{
	font-family:open_sansregular;
	font-size:24px;
}


/* Social Media */

		#social {
			
			float:right;
			height: 25px;
			width: 30%;
			margin: 0px auto;
			z-index:+1;	
			
			 
		}

		 #twitter {
			display:block;
			margin:8px 8px 5px 5px;
			width:20px;
			height:20px;
			float:right;
			background-position: right;
			background:transparent url('/ukgwa/20160519140330oe_/http://www.neighbourhood.statistics.gov.uk/HTMLDocs/dvc123/lib/twit-blue.png') center top no-repeat;
		
		}
		
		#twitter:hover {
			
			float:right;
			background:transparent url('/ukgwa/20160519140330oe_/http://www.neighbourhood.statistics.gov.uk/HTMLDocs/dvc123/lib/twit-orange.png') center top no-repeat;
		
		}
		
		#face {
			display:block;
			margin:8px 5px 5px 5px;
			width:20px;
			height:20px;
			float:right;
			background-position: right;
			background:transparent url('/ukgwa/20160519140330oe_/http://www.neighbourhood.statistics.gov.uk/HTMLDocs/dvc123/lib/faceblue.png') center top no-repeat;
		
		}
		
		#face:hover {
			
			float:right;
			background:transparent url('/ukgwa/20160519140330oe_/http://www.neighbourhood.statistics.gov.uk/HTMLDocs/dvc123/lib/faceorange.png') center top no-repeat;
		
		}