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


/* STRUCTURE */ 

body {
	font-family:Arial, Helvetica, sans-serif;
	color:#333;
}

h1, h2, h3, h4, h5, h6 {
	margin:0 0 10px 0;
	font-weight:lighter;
}

h2 {
	font-size:160%;
}

p, li {
	font-size:13px;
	line-height:19px;
	margin:5px 0 10px 0;
}

#left-column ul {
	padding:10px 40px;
}

#left-column ul.home-list {
	padding:10px 0 0 25px !important;
}

#left-column ul#subnav {
	margin:20px 0 0 0;
	padding:0;
	list-style-type:none;
	float:left;
	border:none !important;
	background:none !important;
}

#left-column ul#subnav ul.sub-navs {
	margin:10px 0 0 40px;
	padding:0;
	float:left;
	border:none !important;
	background:none !important;
	display:block;
	text-align:left;
}

#left-column ul#subnav ul.sub-navs li {
	float:left;
	width:230px;
	padding:0;
	margin:0;
	border:none;
}

#left-column ul#subnav ul.sub-navs li a {
	padding:4px 0 4px 10px;
	text-decoration:none;
	border:none !important;
	display:block;
	font-size:12px;
}

#left-column ul#subnav ul.sub-navs li a:hover {
	background:#CCC;
	color:#222 !important;
}


#left-column ul#subnav li {
	float:left;
	width:265px;
	padding:0;
	margin:0;
}

#left-column a {
	color:#333 !important;
}

#left-column ul#subnav li a {
	padding:10px 0 10px 10px;
	text-decoration:none;
	border-bottom:1px solid #6FF;
	display:block;
	font-size:12px;
}

#left-column ul#subnav li a:hover {
	background:#666;
	color:#FFF !important;
}

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

.image-overlay {
	width:800px;
	height:500px;
	z-index:10;
	position:absolute;
	margin:-100px 0 0 100px;
}

body#home strong {
	font-size:16px;
}

strong {
	font-size:13px;
}

#wrapper {
	width:100%;
	margin:0 auto;
}

#inner-wrapper {
	width:1100px;
	float:left;
}

#header {
	width:1100px;
	height:200px;
	margin:0 auto;
}

.logo {
	width:300px;
	height:160px;
	float:left;
	margin:0;
}

.nav-bar {
	width:800px;
	height:50px;
	float:right;
	margin:110px 0 0 0;
}

.nav-bar ul {
	margin:0;
	padding:0;
	list-style-type:none;
}

.nav-bar li {
	float:left;
	margin:0 3px 0 3px;
}

.nav-bar li a {
	display:block;
	font-size:13px;
	color:#333;
	height:20px;
	padding:15px 15px 15px 15px;
}

.nav-bar li a:hover {
	text-decoration:underline !important;
}

.nav-bar ul ul {
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	display: none;
	float: left;
	margin: 0;
	position: relative;
	top: 0;
	left: 0;
	width: 210px;
	z-index: 99999;
	background:#0CF;
}
.nav-bar ul ul ul {
	left: 100%;
	top: 0;
	display:none;
	visibility:hidden;
}
.nav-bar ul ul a {
	border-bottom: 1px dotted #ddd;
	color: #444;
	font-size: 13px;
	font-weight: normal;
	height: auto;
	line-height: 1.4em;
	padding: 10px 10px;
	width: 188px;
}

.nav-bar ul.water-land {
	background:#43CFCD;
}

.nav-bar ul.climate-menu {
	background:#FFCB05;
}

.nav-bar ul.flood-menu {
	background:#63C;
}

.nav-bar ul.future-menu {
	background:#630;
}

.nav-bar ul.future-menu li.upland, .nav-bar ul.future-menu li.lowland-levels, .nav-bar ul.future-menu li.lowland-coastal {
	display:none !important;
	visibility:hidden !important;
}

.nav-bar li:hover > a,
.nav-bar ul ul :hover > a,
.nav-bar a:focus {
	
}

.nav-bar ul li:hover > ul {
	display: block;
}

.nav-bar li#water-land-nav {
	width:120px;
	display:block;
}

.nav-bar li#water-land-nav a {
	color:#FFF;
}

.nav-bar li#climate-nav {
	width:135px;
	display:block;
}

.nav-bar li#climate-nav a {
	color:#FFF;
}

.nav-bar li#managing-flood-nav {
	width:165px;
}

.nav-bar li#managing-flood-nav a {
	color:#FFF;
}

.nav-bar li#future-landscapes-nav {
	width:155px;
	display:block;
	margin-right:0;
}

.nav-bar li#future-landscapes-nav a {
	color:#FFF;
}

body#climate #left-column ul#subnav li a {
	border-bottom:1px solid #FF6;
}

body#climate #pikame a {
	color:#333 !important;
}

body#flood #left-column ul#subnav li a {
	border-bottom:1px solid #C6F;
}

body#landscapes #left-column ul#subnav li a {
	border-bottom:1px solid #C69;
}

body#landscapes #left-column ul ul {
	display:none;
}


.nav-bar li.lowland-levels  {
	display:block !important;
	visibility:hidden !important;
	background:#7c0046 !important;
}

.nav-bar li.upland {
	display:block !important;
	visibility:hidden !important;
	background:#7c0046 !important;
}

.nav-bar li.lowland-coastal {
	display:block !important;
	visibility:hidden !important;
	background:#7c0046 !important;
}



/* MANAGING FLOOD RISK PAGE MAP BUTTONS */

.glastonbury-btn a {
	width:82px;
	height:34px;
	display:block;
	position:relative;
	z-index:1002;
	background:url(../images/glastonbury-map-off.png) top left no-repeat;
	text-indent:-9999px;
	left:467px;
	top:165px;
	margin:0;
	float:left;
}

.glastonbury-btn a:hover {
	background:url(../images/glastonbury-map-on.png) top left no-repeat;
}

.lyng-btn a {
	width:82px;
	height:34px;
	display:inline-block;
	position:relative;
	z-index:1003;
	background:url(../images/lyng-map-off.png) top left no-repeat;
	text-indent:-9999px;
	left:255px;
	top:252px;
	margin:0;
	float:left;
}

.lyng-btn a:hover {
	background:url(../images/lyng-map-on.png) top left no-repeat;
}

.grey-lake-btn a {
	width:82px;
	height:34px;
	display:inline-block;
	position:relative;
	z-index:1004;
	background:url(../images/grey-lake-map-off.png) top left no-repeat;
	text-indent:-9999px;
	left:210px;
	top:272px;
	margin:0;
	float:left;
}

.grey-lake-btn a:hover {
	background:url(../images/grey-lake-map-on.png) top left no-repeat;
}

.burrow-mump-btn a {
	width:82px;
	height:34px;
	display:inline-block;
	position:relative;
	z-index:1004;
	background:url(../images/burrowmump-map-off.png) top left no-repeat;
	text-indent:-9999px;
	left:76px;
	top:217px;
	margin:0;
	float:left;
}

.burrow-mump-btn a:hover {
	background:url(../images/burrowmump-map-on.png) top left no-repeat;
}

.west-sedge-moor-btn a {
	width:110px;
	height:34px;
	display:inline-block;
	position:relative;
	z-index:1004;
	background:url(../images/west-sedgemoor-map-off.png) top left no-repeat;
	text-indent:-9999px;
	left:40px;
	top:197px;
	margin:0;
	float:left;
}

.west-sedge-moor-btn a:hover {
	background:url(../images/west-sedgemoor-map-on.png) top left no-repeat;
}

.brentknoll-btn a {
	width:110px;
	height:34px;
	display:inline-block;
	position:relative;
	z-index:1004;
	background:url(../images/brentknoll-map-off.png) top left no-repeat;
	text-indent:-9999px;
	left:-107px;
	top:107px;
	margin:0;
	float:left;
}

.brentknoll-btn a:hover {
	background:url(../images/brentknoll-map-on.png) top left no-repeat;
}


body#landscapes li#future-landscapes-nav br {
	display:none;
}


body#home #left-column {
	width:255px;
	float:left;
	padding:20px 10px 20px 35px;
	background:#EFEEED;
}

body#home #right-column {
	width:700px;
	float:right;
	padding:20px;
}

#content-area {
	width:1100px;
	float:left;
	padding:0 0 100px 0;
}

#left-column {
	width:245px;
	float:left;
	padding:20px 20px 20px 20px;
	background:#EFEEED;
}

#right-column {
	width:745px;
	padding:20px;
	float:right;
}

#footer {
	width:100%;
	float:left;
	background:#E5E5E5;
	padding:20px 40px 0 40px;
	font-size:13px;
}

.footer-links {
	width:45%;
	float:left;
	padding:4px 0 0 0;
}

.footer-links a {
	color:#333 !important;
}

.footer-logos {
	width:45%;
	height:60px;
	overflow:hidden;
	float:right;
	text-align:right;
	padding:0 70px 0 0;
}

body#home .footer-logos {
	width:45%;
	height:120px;
	float:right;
	text-align:right;
	padding:0 70px 0 0;
}
	
/* TIMELINE */

.pikachoose {width: 780px; margin: 0 auto;}

#pikame span {
	width:600px !important;
}

.pikachoose strong {
	font-size:21px !important;
}

/* Style the thumbnails */
.pika-thumbs ul { margin:0 !important; padding:0 !important; height: 75px; width:780px; }
	.pika-thumbs li{ width: 144px; height:74px; margin: 10px 0 0 0; padding: 0; overflow: hidden;
		float: left; list-style-type: none;  background: #fafafa; border: 1px solid #e5e5e5; cursor: pointer;}
	.pika-thumbs li:last {margin: 0;}
	.pika-thumbs li .clip {position:relative;height:100%;text-align: center; vertical-align: center; overflow: hidden;}
	
/* The stage is the wrapper. The image fills 100% the height of the stage */
.pika-stage, .pika-textnav {width: 750px;}
.pika-stage {position: relative; padding: 10px 10px 40px 10px; text-align:center; height:350px;}
.pika-stage img{height:100%;}
.pika-stage .caption {position: absolute; background: #000; background: rgba(0,0,0,0.75);  border: 1px solid #141414; font-size: 13px; 
			color: #fafafa; padding: 10px; text-align: right; bottom: 50px; right: 10px; width:600px; line-height:21px;}
	.pika-stage .caption p {padding: 0; margin: 0; line-height: 14px;}

/* Ths play, pause, prev and next buttons */
.pika-imgnav a {position: absolute; text-indent: -5000px; display: block;z-index:3; color:#333 !important;}
	.pika-imgnav a.previous {background: url(../images/prev.png) no-repeat left 45%; height: 100%; width: 50px; top: 10px; left: 10px;cursor:pointer;}
	.pika-imgnav a.next {background: url(../images/next.png) no-repeat right 45%; height: 100%; width: 50px; top: 10px; right: 10px;cursor:pointer;}
	.pika-imgnav a.play {background: url(../images/play.png) no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%;cursor:pointer;}
	.pika-imgnav a.pause {background: url(../images/pause.png) no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%; cursor:pointer;}

/* The previous and next textual buttons */
.pika-textnav {overflow: hidden; margin: 10px 0 0 0;bottom:10px; position:absolute;}
.pika-textnav a {font-size: 12px; text-decoration: none; color: #333 !important; padding: 4px;}
	.pika-textnav a.previous {float: left; width: auto; display: block;}
	.pika-textnav a.next {float: right; width: auto; display: block;}

/*for the tool tips*/
.pika-tooltip{font-size:12px;position:absolute;color:white;padding:3px; background-color: rgba(0,0,0,0.7);border:3px solid black;}
.pika-counter{position: absolute;bottom: 45px;left:15px;color:white;background:rgba(0,0,0,0.7);font-size:11px;padding:3px;-moz-border-radius: 5px;border-radius:5px;}

/* If using user thumbnails there's a pause well the new large image loads. This is the loader for that */		
.pika-loader{ background:url(../images/loading.gif) 3px 3px no-repeat #000; background-color:rgba(0,0,0,0.9); color:white; width:60px; font-size:11px; padding:5px 3px; 
	text-align:right; position:absolute; top:15px; right:15px; }

.jcarousel-skin-pika .jcarousel-container-horizontal { padding: 15px 20px; overflow:hidden;}
.jcarousel-skin-pika .jcarousel-clip-horizontal {height: 90px; width: 485px;}
.jcarousel-skin-pika .jcarousel-item-horizontal { margin-right: 10px;}


/* AJAX CONTENT SLIDER STYLES */

.tabContainer{
	/* The UL */
	float:right;
	padding-right:13px;
}

#contentHolder{
	background-color:#FFF;
	height:600px;
	
	color:#444444;
	padding:0;
}

#tabContent{
	background-color:#888;
	margin-top:-15px;
	width:100%;
}

#tabContent, .tabContainer li a,#contentHolder{
	
}

.tabContainer li{
	/* This will arrange the LI-s next to each other */
	display:inline;
}

.tabContainer li a,.tabContainer li a:visited{
	/* Styling the hyperlinks of the tabs as colorful buttons */
	
	float:left;
	font-size:10px;
	
	/* display:block allows for additinal CSS rules to take effect, such as paddings: */
	display:block;
	text-align:left;
	padding:7px 8px 1px;
	margin:4px 5px 4px 0;
	height:29px;
	
	/* Giving positioning */
	position:relative;
	
	/* CSS3 text-shadow */
	text-shadow:1px 1px 1px #CCCCCC;
	color:#333 !important;
}

#overLine{
	/* The line above the active button. */
	position:absolute;

	height:1px;
	background-color:white;
	width:90px;
	
	float:left;
	left:1px;
	top:-5px;
	overflow:hidden;
}

#main{
	margin:0 auto;
	position:relative;
	width:700px;
}


ul .left{
	/* The left span in the hyperlink */
	
	height:37px;
	left:0;
	position:absolute;
	top:0;
	width:10px;
}

ul .right{
	/* The right span in the hyperlink */
	
	height:37px;
	right:0;
	position:absolute;
	top:0;
	width:10px;
}

/* Styling the colors individually: */

ul a.green{	background:url(images/green_mid.png) repeat-x top center;	color:#24570f;}
ul a.green span.left{ background:url(images/green_left.png) no-repeat left top;}
ul a.green span.right{ background:url(images/green_right.png) no-repeat right top;}


ul a.blue{	background:url(images/blue_mid.png) repeat-x top center;	color:#03426e;}
ul a.blue span.left{ background:url(images/blue_left.png) no-repeat left top;}
ul a.blue span.right{ background:url(images/blue_right.png) no-repeat right top;}


ul a.orange{	background:url(images/orange_mid.png) repeat-x top center;	color:#724104;}
ul a.orange span.left{ background:url(images/orange_left.png) no-repeat left top;}
ul a.orange span.right{ background:url(images/orange_right.png) no-repeat right top;}


ul a.red{	background:url(images/red_mid.png) repeat-x top center;	color:#6f0100; !important}
ul a.red span.left{ background:url(images/red_left.png) no-repeat left top;}
ul a.red span.right{ background:url(images/red_right.png) no-repeat right top;}


/* The hover states: */
ul a:hover{	background-position:bottom center; text-decoration:none;}
ul a:hover span.left{ background-position:left bottom;}
ul a:hover span.right{ background-position:right bottom;}

.preloader{
	display:block;
	margin:120px auto;
}

.clear{
	/* Old-school clear fix hack to clear the floats: */
	clear:both;
	height:1px;
	overflow:hidden;
}

.tab {
	width:75px;
	height:40px !important;
	text-align:center !important;
	font-size:12px !important;
	background:#CCC !important;
	line-height:13px;
	color:#333 !important;
}

/* EXPANDING SLIDING CONTENT */

.expand_top,.expand_wrapper
{
	width: 60px;
	padding:0px;
	margin:0px 0px 20px 0px;
	float:left;
}

.map-info-box {
	padding: 20px;
	margin: 0 0 10px 0;
	background: #EAEAEA;
	width: 92%;
	font-weight: normal;
	float: left;
	text-align:left;
	-moz-box-shadow:    1px 1px 1px 1px #d6d6d6;
  	-webkit-box-shadow: 1px 1px 1px 1px #d6d6d6;
  	box-shadow:         1px 1px 1px 1px #d6d6d6;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* future proofing */
	-khtml-border-radius: 5px; /* for old Konqueror browsers */;
	color:#999 !important;
}

.map-info-box img {
	margin:0 20px 0 0 !important;
}

.map-info-box p {
	font-size: 26px !important;
	line-height:30px;
}

h6 {
	padding: 10px 0 0 60px;
	margin: 0 0 10px 0;
	background:url(../images/pdf-icon-2.png) left top no-repeat;
	height: 38px;
	line-height:28px;
	width: 94%;
	font-size: 15px;
	font-weight: normal;
	float: left;
	text-align:left;
	-moz-box-shadow:    1px 1px 1px 1px #d6d6d6;
  	-webkit-box-shadow: 1px 1px 1px 1px #d6d6d6;
  	box-shadow:         1px 1px 1px 1px #d6d6d6;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* future proofing */
	-khtml-border-radius: 5px; /* for old Konqueror browsers */;
	color:#222 !important;
}

h6.expand_heading {
	padding: 10px 0 0 20px;
	margin: 0 0 10px 0;
	background:#EAEBEB url(../images/arrow-down.png) right top no-repeat;
	height: 28px;
	line-height:18px;
	width: 100%;
	font-size: 15px;
	font-weight: normal;
	float: left;
	text-align:left;
	-moz-box-shadow:    1px 1px 1px 1px #d6d6d6;
  	-webkit-box-shadow: 1px 1px 1px 1px #d6d6d6;
  	box-shadow:         1px 1px 1px 1px #d6d6d6;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* future proofing */
	-khtml-border-radius: 5px; /* for old Konqueror browsers */;
	color:#222 !important;
}
.expand_all
{
cursor:default;
}
h6.expand_heading a {
	color: #222 !important;
	text-decoration: none;
	display: block;
}
h6.expand_heading a:hover {
	color: #ccc;
}

h6.active {background:url(../images/arrow-up.png) right top no-repeat;}
.toggle_container {
	margin: 10px 0 20px 0;
	padding: 0 10px 0 10px;
	border-top: 1px solid #d6d6d6;
	background: #EAEBEB;
	overflow: hidden;
	font-size: 1.2em;
	width: 100%;
	clear: both;
}

.toggle_container_upland, .toggle_container_somerset, .toggle_container_lowland {
	margin: 10px 0 20px 0;
	padding: 0 10px 0 10px;
	border-top: 1px solid #d6d6d6;
	background: #EAEBEB;
	overflow: hidden;
	font-size: 1.2em;
	width: 100%;
	clear: both;
}
.toggle_container .box {
	padding: 20px;
}

body#landscapes .toggle_container .box {
	padding: 3px 0;
}

.toggle_container .box p {
	padding: 5px 0;
	margin: 5px 0;
}
.toggle_container h3 {
	font: 2.0em normal Georgia, "Times New Roman", Times, serif;
	margin: 0 0 5px;
	padding: 0 0 5px 0;
	color:#000000;
	border-bottom: 1px dotted #ccc;
}
.toggle_container img {
	float: left;
	margin: 10px 15px 15px 0;
	padding: 5px;
	background: #ddd;
	border: 1px solid #ccc;
}
.expand_all
{
width:116px;
height:29px;
background:url(images/extra_buttons.png) no-repeat top left;
float:right;
cursor: pointer; 
}
.expanded
{
background-position:bottom left;
}