/** 
 * GREATER WELLINGTON REGIONAL COUNCIL
 * Main Layout File
 */
 
/* Misc Styles and defaults 
----------------------------------------------- */
html, html a {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}
  
* {
	margin: 0;
	padding: 0;

	/* set tab focus styling to make it more visible */
	outline-color: #66afe9 !important;
	outline-width: thick;
	border-spacing: 5px;
}

body {
	/* min-width: 1038px; */
	font-size: 75%;  /* Change the default value of 1em to equal 12 pixels, remember default browser em size is 16px, therefore 12/16 ~ 0.75 */
}

html {
	background-color: #ededed;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, td {
	text-align: left;
	font-weight: normal;
}
th	{
	text-align: center;
	font-weight: bold;
	padding: 5px;
	background-color: #bad4db;
	border: 1px solid black;
}
td.label {
	font-weight: bold;
}
.clear {
	clear:both;
}

/*-- enables hyphenation! for Firefox, IE10 and Safari at the moment  --*/
div {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}

a img {
	border: 0;
}
.center	{
	text-align: center;
}
.strong	{
	font-weight: bold;
}
.altRow {
	background-color: #efefff;
}

/* CONTAINER
----------------------------------------------- */
#BgContainer {
	width: 1062px;  
	margin: 0 auto; 
	background: #ffffff;
}
#Container { 
	width: 1062px;
	margin: 0 auto;
	overflow: hidden;
	position: relative; /* Required for IE7. */
}
#Layout {
	width: 1062px;
	clear: both;
	overflow: hidden;
	margin: 0 auto;
	padding-bottom: 50px;	
}
#Content {
	min-height: 200px;
	margin-top: 20px;
	margin-bottom: 10px;
	position: relative;
}

/* HEADER
----------------------------------------------- */
#Header { 
 	width: 1062px; 
 	margin: 0 auto;
}
 	#Header_FunctionBar { 
		background-color: #01647e;
		height: 30px;
	}

/* SPECIAL: OFF EXCEPT FOR PRINT
----------------------------------------------- */
#PrintHeader
, #featuredContent_print
, #HomeNewsReleases_print
, #event_print
, .consultation_print
, #webcam_print
, #meeting_print
, #news_print
, #civilDefSub_print
, #relatedLinks_print
, #conSub_print
, #subscribe_print
, #rg_print
, #envwarn_print
 {
	display: none;
}

/* HEADER FUNCTION BAR
----------------------------------------------- */
#Header_FunctionBar ul	{
	float: right;
}
	#Header_FunctionBar ul li { 
 		list-style: none;
		float: right;
		display: block;
		padding: 6px 0px 0px 20px;
		font-size: 1em;
		color: #ffffff;
	}
	#Header_FunctionBar a {
		color: #ffffff;
		text-decoration: none;
	}
	#Header_FunctionBar a:hover {
		text-decoration: underline;
	}

/* HEADER BLOCK BAR */	
	#Header_GWRCBar {
		clear: both;
		position: relative;
		z-index: 20;
		float: left;
		width: 100%;
		height: 140px;
	}
		#Header_GWRCBar .grid_9 {
			position: static; /* Again, to anchor the megamenu containers to the outer wrapper.
								 Maybe we should add a 'static' class instead? */
		}

	#HomePageScene p	{
		color: #ffffff;
		font-size: 1em;
	}
	#HomePageScene ul	{
		list-style: none;
		margin-left: 0px;
	}
		#HomePageScene ul li a	{
			color: #ffffff;
			text-decoration: none;
		}
		#HomePageScene ul li a:hover	{
			text-decoration: underline;
		}

/* SEARCH BAR
----------------------------------------------- */
#search-box	{
	clear: both;
	padding-top: 30px;
}

/* MAIN NAVIGATION - TABS
----------------------------------------------- */
#Navigation	{
	clear: both;
	height: 57px;
}
	#Navigation ul {
 		list-style: none;
		margin-left: 0px;
	}
	
			#Navigation ul li .item {
				display: block;
				padding-top: 10px;
				overflow: hidden;
			}
			
			#Navigation ul li .item {
				text-align: center;
				text-decoration: none;
				color: #ffffff;
				font-size: 1.1em;
			}
			
			#Navigation ul li .megamenu {
				position: absolute;
				left: 0px;
				width: 1022px;
				height: 180px;
				background-color: #0288a6;
				padding: 10px 20px;
				display: none;
				color: white;
				text-align: left;
				font-size: 1em;
			}
			
			#Navigation li:hover .megamenu {
				display: block;
			}
			
			#Navigation .megamenu ul {
				float: none;
				list-style: none;
				margin: 10px 10px;
			}
			
			#Navigation .megamenu li {
				float: none;
				width: auto;
				text-align: left;
				font-size: 1em;
				margin-bottom: 5px;
			}
			
			#Navigation .megamenu,
			#Navigation .megamenu a {
				color: white;
				text-decoration: none;
			}
				#Navigation .megamenu a:hover {
					text-decoration: underline;
				}

/* NOTICE ELEMENTS */
.page_specialnotice	{
	clear: both;
	width: 1008px;
	margin: 0 auto;
	font-size: 1em;
}
	div.specialnotice_Emergency, div.specialnotice_Notice, div.specialnotice_Treejack {
		padding: 8px;
		margin-top: 15px;
	}
	/* this one is used for CDEM Emergency events */
	div.specialnotice_Emergency {
		border: 2px solid #ed3744;
		border-radius: 6px;
	}
		p.civildefence, h2.civildefence, h3.civildefence {
			padding-left: 40px;
		}
		h2.civildefence {
			background: url(../images/wremo/CivDef.png) no-repeat;
			min-height: 35px;
		}
		p.civildefence {
			border-top: 1px solid #ccc;
			min-height: 35px;
		}
		p.wremo_quake {background: url(../images/wremo/wremo_quake.png) 0 3px no-repeat;}
		p.wremo_volcano {background: url(../images/wremo/wremo_volcano.png) 0 3px no-repeat;}
		p.wremo_landslide {background: url(../images/wremo/wremo_landslide.png) 0 3px no-repeat;}
		p.wremo_tsunami {background: url(../images/wremo/wremo_tsunami.png) 0 3px no-repeat;}
		p.wremo_hazard {background: url(../images/wremo/wremo_hazard.png) 0 3px no-repeat;}
		p.wremo_flood {background: url(../images/wremo/wremo_flood.png) 0 3px no-repeat;}
		p.wremo_weather {background: url(../images/wremo/wremo_weather.png) 0 3px no-repeat;}
		p.wremo_drought {background: url(../images/wremo/wremo_drought.png) 0 3px no-repeat;}
		p.wremo_biosecurity {background: url(../images/wremo/wremo_biosecurity.png) 0 3px no-repeat;}
		p.wremo_wildfire {background: url(../images/wremo/wremo_wildfire.png) 0 3px no-repeat;}
		p.wremo_radiation {background: url(../images/wremo/wremo_radiation.png) 0 3px no-repeat;}
		p.wremo_substances {background: url(../images/wremo/wremo_substances.png) 0 3px no-repeat;}
		p.wremo_pandemic {background: url(../images/wremo/wremo_pandemic.png) 0 3px no-repeat;}
		p.wremo_godzilla {background: url(../images/wremo/wremo_godzilla.png) 0 3px no-repeat;}
		p.wremo_zombie {background: url(../images/wremo/wremo_zombie.png) 0 3px no-repeat;}
		
	/* this one is used for SpecialNoticePage */
	div.specialnotice_Notice {
		border: 2px solid #0288a6;
		background-color: #b0e5f8;
	}
	/* this one is used for TreejackSurveyPage */
	div.specialnotice_Treejack {
		border: 2px solid #4C721D;
		background-color: #73EC92;
	}

/* SPECIAL NOTICE BAR
----------------------------------------------- */
#page_specialnotice	{
	clear: both;
	width: 1008px;
	margin: 0 auto;
	font-size: 1em;
}
	p.CDStatus_Emergency {
		border: 2px solid #ed3744;
		background-color: #fea7ad;
		padding: 8px;
	}
	/* this one is used for SpecialNoticePage */
	p.CDStatus_Notice {
		border: 2px solid #0288a6;
		background-color: #b0e5f8;
		padding: 8px;
	}
	/* this one is used for TreejackSurveyPage */
	p.Treejack_Notice {
		border: 2px solid #4C721D;
		background-color: #73EC92;
		padding: 8px;
	}

/* SIDEBAR
----------------------------------------------- */
#Sidebar {
	clear: both;
	overflow: hidden;
}

/* COMMENTS
----------------------------------------------- */
#CommentHolder ul {
	list-style: none;
	margin: 20px 0;
}
#PageComments li {
	margin: 5px 0;
	padding: 1px;
	width: 88%;
}
	#PageComments li.odd {
		background: #E8F6FF url(../images/commentBg.png) no-repeat 1% 10%;
		padding-left: 40px;
		padding-right: 10px;
		border-bottom: 2px solid #BCE4FE;
	}
	#PageComments li.even {
		background: #fff url(../images/commentBgAlt.png) no-repeat 99% 10%;
		padding-right: 40px;
		padding-left: 10px;
	}

		#PageComments li.odd p.info {
			color: #3AA0C3;
		}

		.actionLinks li {
		   display: inline;
		   border-right: 1px solid #ddd;
		}
			.actionLinks li a {
				padding-right: 3px;
				font-size: 1em;
			}
   			.actionLinks li.last {
      			border-right: none;
   			}

.commentrss {
	background: transparent url(../images/feed-icon-14x14.png) no-repeat;
	padding-left: 20px;
	font-size: 1.1em;
	line-height: 1.6em;
}
#PageCommentsPagination p {
	text-align: center;
	font-size: 1.1em;
}
#PageComments p {
	font-size: 1em;
	margin: 8px 0;
}
	#PageComments p.info {
		color: #999;
		margin: 0px;
		padding: 0;
		line-height: 1em;
		font-size: 1em;
	}


#PageCommentInterface_Form_PostCommentForm_action_postcomment {
	margin-bottom: 20px;
}

/* HOME PAGE STYLES
----------------------------------------------- */
#featuredContent {
	margin: 0 0 15px 0;
}
	#featuredContent .news_heading {
		color: #999999;
		margin: 0 0 5px 0;
		font-size: 0.75em;
	}
div#featuredController	{
	margin:  0 0 10px 0;
}
div#featuredController a {
	padding: 4px 8px;
	font-size: 0.9em;
}

div#featuredController a.activeSlide {
	color: white;
	background: #3E91C4;
}

div#featuredReleases	{
	clear: both;
}

p.featureRelease	{
	float: left;
	margin: -10px 0 0 0;
}
.FeaturePlaceholder	{
	min-height: 150px;
	min-width: 222px;
	background: #ffffff url(../images/FeaturePlaceholder.png) top left no-repeat;
}

/* SEARCH RESULTS STYLES
----------------------------------------------- */
#resultset	{
	position: relative;
}
.resultitem {
	padding: 8px 0 8px 8px;
	font-size: 0.9em;
	border-bottom: 1px solid #ddddff;
	border-left: 1px solid #ddddff;
	border-right: 1px solid #ddddff;
}
.oddresult	{
	background-color: #f0f6f7;
}
.topresult	{
	border-top: 1px solid #ddddff;
}
.pagination_bookend {
	padding: 0 10px;
}
.pagination_page, .pagination_current {
	padding: 0 2px;
}
.pagination_current {
	font-weight: bold;
}

/* SEARCH FORM 
----------------------------------------------- */
#SearchForm_SearchForm {
	float: right;
}
	#SearchForm_SearchForm .middleColumn {
		float: left;
		width: 164px;
		margin: 0 5px 0 0;
		padding: 2px;
	}
	
		#SearchForm_SearchForm .middleColumn input.text {
			border: none;
			color: #999999;
		}
		
	#SearchForm_SearchForm #SearchForm_SearchForm_action_results {
		float: left;
		margin-top: 2px;
	}
	
/* REFINE SEARCH FORM 
----------------------------------------------- */
#RefineSearchForm_RefineSearchForm {
	width: 449px;
}
	#RefineSearchForm_RefineSearchForm .middleColumn {
		float: left;
		width: 364px;
		margin: 0 5px 0 0;
		padding: 2px;
	}
	
		#RefineSearchForm_RefineSearchForm .middleColumn input.text {
			width: 360px;
			border: none;
			color: #999999;
		}
		
	#RefineSearchForm_RefineSearchForm #RefineSearchForm_RefineSearchForm_action_results {
		float: left;
		margin-top: 2px;
	}


/* MESSAGEBOXS
----------------------------------------------- */
.message {
	margin: 15px;
	padding: 5px;
	width: 92%;
	color: #979908;
	border: 4px solid #F7F8B4;
	background: #FFFFEA;
}
span.middleColumn .message {
	margin: 4px 0 0 3px;
}
.required {
	margin: 4px 0 0 3px;
	padding: 5px;
	width: 92%;
	color: #DC1313;
	border: 4px solid #FF7373;
	background: #FED0D0;
}

p#Remember label {
	margin: -24px 0 0 20px;
	text-align: left;
}
.entry {
	border-bottom: 1px solid #eee;
}
	
/* GRID CONTAINERS
----------------------------------------------- */
.WaterChartPageGraphs	{
	margin: 16px 0 16px 0;
}

/* SOCIAL MEDIA SERVICE BLOCK STYLES
----------------------------------------------- */

.service_facebook, .service_twitter, .service_flickr, .service_youtube, .service_google, .service_instagram {
	float: left;
	width: 16px;
	height: 16px;
	margin-right: 10px;
	overflow: hidden;
	background: transparent url(../images/socialMediaSprite16.png) 0 0 no-repeat;
}
	.service_facebook	{
		background-position: -16px -16px;
	}
	.service_twitter	{
		background-position: -16px -48px;
	}
	.service_flickr	{
		background-position: -48px -16px;
	}
	.service_youtube	{
		background-position: -48px -48px;
	}
	.service_google	{
		background-position: -16px -80px;
	}
	.service_instagram	{
		background-position: -48px -80px;
	}

/* GOOGLE MAP ----------------------------------------------- */
div#map	{
	float: left;
	border: 15px solid #f3f3ff;
	height: 211px;
	width: 211px;
}
div.ParkPageItem	{
	float: left;
	min-height: 242px;
	width: 242px;
	margin-bottom: 30px;
}
div.ParkPageItem p	{
	margin: 15px 15px 15px 15px;
}
div#parkMap {
	height: 300px;
}
p.label_checkbox_pair {
	clear: both;
	float: none;
	position: relative;
}
p.label_checkbox_pair input {
	left: 0px;
	position: absolute;
	top: 1px;
}
p.label_checkbox_pair label {
	display: block;
	margin-left: 20px;
	font-size: 1em;
	width: 85%;
}
div.parkActivityBlock {
	float: left;
	display: block;
	width: 232px;
	margin: 0;
}

/* ENV RISK ----------------------------------------------- */
#envrisk_block	{
	display: block;
	padding: 0 10px;
	border-bottom: 2px solid #999999;
}
.envrisk_High	{
	color: red;
	font-weight: bold;
}
.envrisk_Medium	{
	color: #ffaa00;
	font-weight: bold;
}
.envrisk_Low	{
	color: #00cc00;
	font-weight: bold;
}
.envrisk_level	{
	text-align: center;
}

/* EVENTS ----------------------------------------------- */
img.eventAttribute {
	float: left
}

/* SUMMER CHECK ----------------------------------------------- */
table.alertBox {
	margin-bottom: 15px;
	width: 100%;
}
	table.alertBox td {
		vertical-align: text-top;
		width: 33%;
	}
	
.alertMessageBox {
	background-color: #ededed;
	border: 1px solid #bcbcbc;
	border-radius: 6px;
	margin: 5px 30px 10px 10px;
	padding: 5px 10px;
}
span.amberText, span.redText {
	padding: 0 5px;
}
span.amberText {
	background-color: #FFBF00;
}
span.redText {
	background-color: #FF5555;
}
div.alertMessages {
	margin-top: 15px;
}