/*
Colours:

Dark Blue: #2c276d
Green: #7fc141
Yellow: xf0ea22
Red: #d92b27

*/

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	margin: 0;
	padding: 0;
	background-color: #717171;
	overflow-y: scroll;
	overflow-x: hidden;
}
#pagecontainer {
	position: relative;
	margin: auto;
	background-color: #ffffff;
	font-size: 100%;
}
#referencecontainer {
	width: 40em;
	background-color: #FFFFFF;
	font-size: 110%;
}
/* Site Navigation - Horizontal */

#navBar {
	min-height: 2em;
	background: url(images/gradient.png) repeat-x left top;
	background-size: contain;
	font-size: 100%;
	overflow: auto;
}
#navBarLeft {
	float: left;
	border-left: 1px solid #fff;
}
#navlistLeft {
	margin: auto;
	min-height: 2em;
}
#navBarLeft ul, #navBarLeft ul li {
	padding: 0;
	margin: 0;
}
#navBarLeft ul li {
	float:left;
	list-style:none;
}
#navBarLeft ul li a {
	padding: 1em 0.8em;
	font-weight: bold;
	color: White;
	text-decoration: none;
	float: left;
	border-right: 1px solid #fff;
}
#navBarLeft ul li a#active, #navBarLeft ul li a:hover {
	background: url(images/gradient_over.png) repeat-x left top;
	background-size:cover;
}
/* End Site Navigation - Horizontal */


/* Site Navigation - Vertical */

.leftMenu {
	margin-bottom: 4px;
	margin-left: 4px;
}
.leftMenu .title {
	border-bottom: 1px solid #b5bcc7;
	margin-bottom: 5px;
	padding: 3px 7px 3px 18px;
	min-height: 1em;
	color: #5f5f5f;
	font-weight: bold;
}
.leftMenu .content {
	max-height:15em;
	overflow:auto;
}
.leftMenu .nav {
}
.leftMenu .navList {
	margin: auto;
	font-size: 90%;
}
.leftMenu .nav ul {
	padding-left: 0px;
	margin-left: 0;
	color: #5f5f5f;
	list-style-type: none;
}
.leftMenu .nav ul li {
	display: block;
	margin-bottom: 2px;
}
.leftMenu .nav ul li:hover {
	background-color: #5f5f5f;
	color: #5f5f5f;
}
.leftMenu .nav ul li a {
	border-bottom: 1px solid #b5bcc7;
	padding-left: 5px;
	background-color: white;
	color: #5f5f5f;
	text-decoration: none;
	margin-left: 1.2em;
	display: block;
}
.leftMenu .nav ul li a:hover {
	color: #5f5f5f;
	background-color: white;
	border-bottom: 1px solid #5f5f5f;
}
.leftMenu .nav ul li#active {
	background-color: #5f5f5f;
	font-weight: bold;
}
.leftMenu .nav ul li#active a {
	background-color: white;
	border-bottom: 1px solid #5f5f5f;
}
/* End Site Navigation - Vertical */


/* Login header styling */
#vogLoginCreds {
	float: left;
	width: 20%;
	min-height: 3em;
}
#loginDetails {
	float: left;
	margin-left: 2px;
	margin-top: 6px;
}
#vogLogout {
	float: right;
	min-height: 3em;
	margin-top: 0px;
	border: 2
}
#vogLogout:hover, .vogLogoutActive {
	background: url(images/gradient_over.png) repeat-x left top;
}
#vogLogoutButton {
	background: none;
	border: 0;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 95%;
	cursor: pointer;
	padding: 1.1% 5px 3px 2px;
}
#vogWelcome {
	float: left;
	padding: 5px 0px 0px 0px;
}
#vogUser {
	float: left;
	padding: 5px 5px 0px 5px;
	color: white;
}
/* End Login header styling */

/* Header */

#header {
	width: 100%;
	height: 24em;
	margin-bottom: 0.5em;
	background-color: white;
}
#headerImage {
	position: absolute;
}
#logos img, .partners img {
	margin: 1em;
}
#logo {
	position: absolute;
	width: 25em;
	height: 25em;
	background: url(images/logo.png) no-repeat left top;
	z-index: 2;
}
#logoSmall {
	float: left;
	width: 100%;
	height: 25em;
	background: url(images/logoSmall.png) no-repeat left top;
}
/* End Header */

/* Footer */

#footer {
	background: url(images/gradient.png) repeat-x left top;
	min-height: 3em;
	width: 100%;
	color: #979797;
}
#footerlistBox {
	float: left;
	border-left: 1px solid #606060;
}
#footerlist {
	margin: auto;
	min-height: 3em;
	font-size: 90%;
}
#footerlistBox ul {
	padding-left: 0;
	margin-left: 0;
	float: left;
}
#footerlistBox ul li {
	display: inline;
}
#footerlistBox ul li a {
	padding: 1em;
	font-weight: normal;
	background: url(images/gradient.png) repeat-x left top;
	color: #606060;
	text-decoration: none;
	float: left;
	border-right: 1px solid #606060;
}
#footerlistBox ul li a:hover {
	color: #ffffff;
	text-decoration: underline;
}
#footerlistBox ul li a#active {
	color: #ffffff;
}
/* End Footer */

/* BREAD CRUMBS */
#breadCrumbs {
	color: #7399C6;
	padding: 6px 0px 6px 4px;
	margin: 0px;
	font-size: 90%;
	text-align: left;
	text-indent: 1%;
}
.breadCrumbLink {
	color: #7399C6;
	text-decoration: none;
	font-size: 90%;
}
.breadCrumbLink:hover {
	color: #CC0000;
	text-decoration: underline;
}
/* End BREAD CRUMBS */

/* Columns */

#fullWidth {
	width: 98%;
	margin: 0px 1% 0px 1%;
}
#fullWidth p {
	line-height: 180%
}
#fullWidth .textBlock {
	margin-left: 1%;
	margin-right: 1%;
}
#fullWidth #leftCol p.hostedDisclaimer {
	font-size: 85%;
	color: #606060;
	margin-bottom: 5px;
	padding: 0px 3px 0px 3px;
}
#midCol p {
	line-height: 180%;
	margin: 0px 20px 1% 20px;
}
#midCol ol {
	line-height: 180%;
	margin: 0px 20px 1% 20px;
}
/* End Columns */

#midCol #rightCol .image {
	border: 1px solid #b5bcc7;
	margin-bottom: 1.5em;
}
#midCol #rightCol img {
	text-decoration: none;
	border: none;
	margin-bottom: 5px;
	width: 100%;
}
.imgText {
	font-size: 75%;
	color: #606060;
	margin-bottom: 5px;
	padding: 0px 3px 0px 3px;
}
/* Map Styling */
#map {
	background-color: white;
	border: solid 1px #b5bcc7;
	margin: 1px;
}
#mapfooter {
	border: solid 1px #b5bcc7;
	background-color: #e4e4e4;
	font-size: 10pt;
	text-align: center;
	min-height: 3em;
	margin: 1px;
	position: relative;
}
.searchMap, .resultsMap {
	border: solid #b5bcc7 1px;
	margin: 0px;
}
#areaOfInterest {
	border: solid #b5bcc7 1px;
	margin: 2px 1px 1px 1px;
	text-align: center;
}
#areaOfInterest table {min-width:75%;}
#areaOfInterest td {text-align:center;}
#scalebar {
	height: 1.5em;
	margin-top: 1em;
}
#coordinates {
	text-align: left;
	height: 1.5em;
	margin-top: 1em;
	margin-left: 2%;
	z-index: 50;
}
#xCoord {
	float: left;
	font-weight: bold;
	font-size: 90%;
	width: 48%;
}
#yCoord {
	float: left;
	font-weight: bold;
	font-size: 90%;
	width: 48%;
}
#areaOfInterestBtn {
	z-Index: 999;
	margin-top: 5px;
}
/* Map Styling */



.detail {
border:width:5;
	padding: 25
}
.overview {
border:width:5;
	padding: 25
}
.infoIcon {
	height: 1.5em;
	width: 1.5em;
	margin-top: 5px;
	background: url(images/Information-icon.png) no-repeat left top;
}
.downloadIcon {
	background-image: url(images/download.png);
	background-repeat: no-repeat;
	height: 1.2em;
	text-align: center;
	width: 1.2em;
	margin: 0px 0px 0px 0px;
}
#resultCount {
	padding: 1%;
}
.pagination {
	padding: 1%;
}
.resultTitle {
	background-color: #e6e6e7;
	background-image: url(images/titlebar.png);
	background-repeat: repeat-x;
	border: 1px solid #b5bcc7;
	padding: 0px 7px 3px 7px;
	min-height: 1em;
	color: #131313;
}
table.results {
	font-size: 90%;
	width: 100%;
}
table.results th {
	border: solid #d8d8d8 1px;
	text-align: center;
}
table.results tr {
	border-bottom: solid #d8d8d8 1px;
}
table.results td {
	text-align: left
}
table.results td.rightBorder {
	border-right: solid #d8d8d8 1px;
}
table.results tr.alt {
	background-color: #f8fafd;
}
table.eruptionDetails {
	margin-bottom: -1px;
	width: 100%;
}
table.eruptionDetails td.dateField {
	border-right: solid #d8d8d8 1px;
	padding: 5px;
	margin: 0px;
	border-left: none;
	border-top: none;
}
table.eruptionDetails td.nameField {
	border-right: solid #d8d8d8 1px;
	padding: 5px;
	margin: 0px;
	border-top: none;
}
table.eruptionDetails td.propertiesField {
	padding: 5px;
	margin: 0px;
	border-right: none;
	border-top: none;
}
.detailLink {
	text-decoration: underline;
	color: #9c4114;
}
.resultOver {
	background-Color: lightblue;
	cursor: pointer;
}
.resultRow {
}
.resultRowShadow {
	background-image: url(images/titlebar.png);
	background-repeat: repeat-x;
}
div.links p {
	border-bottom: 1px solid #b5bcc7;
	clear: both;
	overflow: auto;
}
div.links p .url {
	float: left;
	margin-bottom: 1%;
}
div.links p .logo {
	float: right;
	margin-bottom: 1%;
}
div.links p .logo img {
	width: 100%;
}
th.mandatory {
	color: red;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	margin: 0pt;
	padding: 0pt;
	color: #5f5f5f;
}
h1 {
	border-bottom: 1px solid #BFC4CF;
	font-size: 170%;
	margin-bottom: 0.5em;
	padding-bottom: 0.35em;
}
h2 {
	border-bottom: 1px solid #BFC4CF;
}
h1.dataEntry {
	margin-bottom: 5px;
	text-align: center;
}
h4.ref {
	border-bottom: 1px solid #BFC4CF;
	margin-top: 0px;
}
.overlayBox {
	min-width: 20em;
	max-width: 30em;
	min-height: 20em;
	max-height: 30em;
	overflow: auto;
}
form {
	margin: 0pt;
	margin-bottom: 0.5em;
	padding: 0pt;
}
form table, form td {
	border: 0;
}
div.messages {
	background: #FBFCFE none repeat scroll 0% 0%;
	border: 2px solid #DADCE0;
	margin: 1% 0pt;
	min-height: 2em;
	padding: 1.3em 1em 0.3em 52px !important;
}
.messages ul {
	margin: 0pt;
	padding: 0pt 0pt 0pt 20px;
}
div.error {
	background: #FCD295 url(images/icon-alert.png) no-repeat scroll 0.5em 50%;
	border: 2px solid #E1471D;
}
div.success {
	background: #FFFF99 url(images/tick-icon.png) no-repeat scroll 0.5em 50%;
	border: 2px solid #66CC33;
}
div.error ul li, div.success ul li, div.status ul li, div.warning ul li {
	list-style-image: none;
}
div.required {
	margin-left: 30px;
}
a {
	color: #9c4114;
}
a.image {
	text-decoration: none;
	border: none;
}
a.image img {
	text-decoration: none;
	border: none;
}
a {
	cursor: pointer;
color: bluecolor:#9c4114;;
}
a:hover, a.hover {
	text-decoration: underline;
}
#content {
	position: relative;
	margin-top: 20px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	padding-top: 20px;
	padding-left: 25px;
	padding-right: 25px;
	border: 1px solid #b5bcc7;
}
.leftMenu #volcanoTypeFilter, .leftMenu #regionFilter, .leftMenu #treeOne {
	font-size: 0.8em;
	overflow:hidden;
}
.volcanoDetails, #map, .eruption {
	border: solid #b5bcc7 1px;
	margin: 4px 2px;
	padding: 4px;
}
.eruption {
	clear: both;
}
/* styling for Paginator */
ul.paging {					/* styles ul class="paging" */
	list-style-type: none;	/* remove bullets */
	display: inline;		/* inline with surrounding text */
	margin: 0px;			/* remove any margin and padding inherited from container */
	padding: 0px;
}
ul.paging li {				/* styles li within ul class="paging" */
	display: inline;		/* inline with surrounding text */
	margin-left: 1em;		/* one character space before each item */
}
.current {					/* styles class = current */
	font-weight: bold;
}
table.detail {
	border: none;
	font-size: 90%;
}
table.refDetail {
	border: none;
	font-size: 90%;
}
table.detail td {
	border: none;
	padding: 1%;
}
table.refDetail td {
	border: none;
	padding: 2px;
}
.detailHead {
	text-align: left;
	font-weight: bold;
}
table {
	border-collapse: collapse;
	text-align: left;
}
td, th {
	padding: 1%;
}
th {
	vertical-align: bottom;
	text-align: right;
}
td {
	vertical-align: top;
}
th.listHeading {
	vertical-align: bottom;
	text-align: left;
	padding: 1%;
}
th.recordHeading {
	vertical-align: top;
	text-align: left;
	padding: 1%;
}
img.iconClass {
	width: 1.2em;
	height: 1.2em;
	border-style: none;
}
img.iconSmallClass {
	width: 1em;
	height: 1em;
	border-style: none;
}
.comboClass {
	width: 1%;
}
sup, sub {
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	_vertical-align: bottom;
	position: relative;
}
sup {
	bottom: 1ex;
}
sub {
	top: .5ex;
}
@media screen and (max-width:50em) {
#slideshow, #vogLoginCreds {
	display: none;
}
div.links p .url {
	width: 60%;
}
div.links p .logo {
	width: 40%;
}
#searchPage #leftCol, #searchPage #headerSmall {
	float: left;
	width: 48%;
}
#searchPage #midCol {
	clear: both;
}
.searchMap {
	width: 95%;
	height: 25em;
}
}
@media screen and (min-width:35em) and (max-width:50em) {
#rightCol .partners img, #logos img {
	float: left;
	width: 40%;
}
}
@media screen and (min-width:50em) {
#headerSmall {
	width: 20%;
	height: 24em;
	float: left;
	background-color: white;
	position: absolute;
	top: 3.2em;
}
#pagecontainer {
	min-width: 60em;
	max-width: 75em;
}
#leftCol {
	float: left;
	width: 20%;
	text-align: left;
	padding: 0px;
	margin: 0px;
}
#searchPage #leftCol {
	position: absolute;
	left: 0;
	top: 28em;
}
#searchPage #midCol {
	left: 21%;
	min-height: 70em;
}
#fullWidth #leftCol {
	float: left;
	width: 58%;
	margin-left: 1%;
}
#fullWidth #rightCol {
	float: right;
	width: 30%;
	margin-right: 5%;
}
#midCol {
	width: 78%;
	float: left;
	text-align: left;
	margin: 0px 4px 4px 4px;
	position: relative;
}
#midCol #leftCol {
	float: left;
	width: 58%;
}
#midCol #rightCol {
	float: right;
	width: 36%;
}
#navBarLeft {
	width: 79%;
}
#navBarLeft ul li.navlistRight {
	float: right;
}
#navBarLeft ul li.navlistRight a {
	border-left: 1px solid #fff;
	border-right: none;
}
#footerlistBox {
	margin-left: 28%;
}
div.links {
	width: 85%;
	margin-left: 10%;
}
#rightCol .partners img {
	width: 70%;
}
.searchMap, .resultsMap {
	height: 25em;
}
.searchMap, .resultsMap, #mainWindow {
	width: 98%;
}
#scalebar {
	float: left;
	width: 20%;
}
#coordinates {
	float: left;
	width: 50%;
}
#areaOfInterestBtn {
	float: right;
	text-align: right;
	width: 25%;
	right: 0.5em;
}
.volcanoDetails {
	width: 56%;
	float: left;
}
.detailMap {
	width: 35%;
	float: left;
	height: 20em;
}
.alternateName {
	overflow-y: scroll;
	overflow-x: hidden;
	max-height: 10em;
}
}