body {
  	background:#dcdcdc !important;
}
#line {
  	/*margin: 0 !important;*/
    margin-right:30%;
}
#line form input {
  	margin: 0 !important;
  	padding: 3px !important;
  	display: inline-block;
  	vertical-align: top !important;
}
#aboutUs {
  	display:inline-block!important;
    z-index:4;
    width: auto;
  	height: 25px !important;
  	margin: 0 !important;
  	padding: 0 !important;
}
#aboutUs p {
  	margin-top: 0 !important;
  	margin-bottom: 0 !important;
  	padding: 0 !important;
}
#aboutUs p a  {
    padding: 5px;
    color: #fff;
  	font-size:1em;
    font-weight: normal;
}
#aboutUs p a:link {
    text-decoration: none;
}
#homeMain{
    position:relative;
    width: 100%;
}
#header {
  	height: 130px !important;
}
#homeMain ul.maximenuck li.maximenuck.level1 {
  	padding: 2px !important;
  	margin-left: 3px !important;
}
a:link {
  	text-decoration: none !important;
}

.nowarningWrap {
    width: 100%;
    max-width: 1150px;
    padding:8px;
    display:block;
    background-color: #a6f8b3;
    box-shadow: 0px 3px 3px #555;
}
.warningWrap {
  	width: 100%;
  	max-width: 1150px;
  	padding:8px;
  	display:block;
  	background-color: #e25d1d;
  	box-shadow: 0px 3px 3px #555;
}
#warningHomeEnv {
  	width:100%;
  	max-width:1150px;
}
#warningHomeEnv a {
  	display: inline-block;
  	color: #fff !important;
  	font-weight: 400;
  	padding:0px 5px 0px 5px;
}
#warningHomeEnv .warningSign {
    margin-right: 10px;
}
#warningHomeEnv a:hover, #warningHomeEnv a:focus {
  	text-decoration: none !important;
  	color: #fff !important;
  	padding:0px 5px 0px 5px;
}
.warningWrapSmart {
  	width: 100%;
  	max-width: 1150px;
  	padding:8px;
  	display:block;
  	background-color: #e25d1d;
  	box-shadow: 0px 3px 3px #555;
}
#warningHomeEnvSmart {
  	width:90%;
  	max-width:1150px;
}
#warningHomeEnvSmart a, #warningHomeEnvSmart span {
  	display: inline-block;
  	color: #000 !important;
  	font-weight: 400;
  	padding:0px 5px 0px 5px;
}
#warningHomeEnvSmart .warningSign {
    margin-right: 10px;
}
#warningHomeEnvSmart a:hover, #warningHomeEnvSmart a:focus {
  	opacity: 1.0 !important;
    filter: alpha(opacity=100); /* For IE8 and earlier */
  	text-decoration: none !important;
  	color: #000 !important;
  	padding:0px 5px 0px 5px;
  	border-radius: 5px;
  	background: transparent !important;
  	 -moz-box-shadow:    inset 0 0 30px #fff;
   	-webkit-box-shadow: inset 0 0 30px #fff;
    box-shadow:         inset 0 0 30px #fff;
}
.proForecast, .proHeadline, .proGeo {
    color: #fff;
}
.proHeadline {
    padding-left: 10px;
}
.homeTable {
  	width: 105%;
  	margin: 0 !important;
  	padding: 0 !important;
    overflow: auto;
  	overflow-y: hidden;
  	
}
.ourProducts {
    position: relative;
    vertical-align: top;
    display: inline-block;
    max-width:620px;
  	margin: 0 !important;
  	padding: 0 !important;
}
#map {
    position: relative;
    display: inline-block;
  	max-width:450px;
    z-index: 5;
    padding: 0 !important;
    margin: 20px !important;
    box-shadow: 3px 3px 3px #000;
}
#markOne {
    position:absolute;
    display:none;
    z-index: 6;
    top: 0px;
    left: 0px;
    background: transparent;
    color: #fff;
    width: 100px;
    height: 100px;
}
.satelite {
    display: inline-block;
    width: 100%;
  	max-width: 298px;
  	padding:5px;
    margin-top: 20px;
    margin-bottom: 20px;
    /*box-shadow: 3px 3px 3px #000;*/
}
.satelite a:link img {
    text-decoration: none;
    margin: 0 !important;
    padding: 0 !important;
}
#qotSta {
    position: absolute;
    z-index: 8;
    left: 50px;
    top:20px;
    display: block;

}
#portoSta {
    position: absolute;
    z-index: 12;
    left: 98px;
    top:220px;
    display: block;

}
#bigbSta {
    position: absolute;
    z-index: 13;
    left: 78px;
    top:180px;
    display: block;
    border-left: 1px solid #fff;
}
#lakSta {
   position: absolute;
    z-index: 9;
    left: 110px;
    top:310px;
    display: block;

}
#bunlapSta {
    position: absolute;
    z-index: 7;
    left: 210px;
    top:300px;
    display: block;


}
#emuaSta {
    position: absolute;
    z-index: 7;
    left: 225px;
    top:440px;
    display: block;
    border-left: 1px solid #fff;
   

}

#solaSta {
    position: absolute;
    z-index: 7;
    left: 130px;
    top:50px;
  	display: block;
    border-left: 1px solid #fff;
}

#pekoaSta {
    position: absolute;
    z-index: 10;
    left: 98px;
    top:260px;
  	display: block;

}
#lamapSta {
    position: absolute;
    z-index: 8;
    left: 160px;
    top:325px;
  	display: block;
    border-left: 1px solid #fff;
}
#saraSta {
    position: absolute;
    z-index: 8;
    left: 180px;
    top: 205px;
  	display: block;
    border-left: 1px solid #fff;
}

#bauerSta {
    position: absolute;
    z-index: 7;
    left: 210px;
    top:490px;
  	display: block;

}
#whiteSta {
    position: absolute;
    z-index: 4;
    left: 310px;
    top:645px;
  	display: block;
    border-left: 1px solid #fff;
}
#aneSta {
    position: absolute;
    z-index: 4;
    left: 365px;
    top:730px;
  	display: block;
    border-left: 1px solid #fff;
}
#gaweGeo {
    position: absolute;
    z-index: 6;
    left: 123px;
    top:118px;
  	display: block;
}
#lvvlGeo {
    position: absolute;
    z-index: 3;
    left: 162px;
    top:238px;
  	display: block;
}
#vanuaGeo {
    position: absolute;
    z-index: 6;
    left: 120px;
    top: 75px;
  	display: block;
}
#ambGeo {
    position: absolute;
    z-index: 6;
    left: 192px;
    top: 338px;
  	display: block;
}
#lpvGeo {
    position: absolute;
    z-index: 5;
    left: 212px;
    top: 362px;
  	display: block;
}
#yashGeo {
    position: absolute;
    z-index: 6;
    left: 315px;
    top: 690px;
  	display: block;
}
#info, #infoP, #infoS,#infoAne, #infoQ,  #infoE, #infoBu , #infoPO, #infoBB, #infoLak, #infoB,#infoL   {
    display: none;
    position: absolute;
    left: 5px;
    top: -20px;
    color: #000;
    width: 210px;
    height: 10em;
    padding: 10px 10px 10px 30px;
    background:  linear-gradient(to right,white,#D3D3D3);
    border: 1px solid black;
    /*-moz-box-shadow:    inset 0 0 10px #095197;
   	-webkit-box-shadow: inset 0 0 10px #095197;
    box-shadow:         inset 0 0 10px #095197;**/
}


#infoQ, #infoLak {
    z-index: 10;
}
#infoWhite, #infoAne{
    display: none;
    position: absolute;
    left: -248px;
    top: -20px;
    color: #000;
  	width: 210px;
    height: 10em;
    padding: 10px 10px 10px 30px;
    background: linear-gradient(to right,white,#D3D3D3);
    border: 1px solid  black;
    /*-moz-box-shadow:    inset 0 0 10px #095197;
   	-webkit-box-shadow: inset 0 0 10px #095197;
    box-shadow:         inset 0 0 10px #095197;*/
}
#info span, #infoS span, #infoP span, #infoB span,#infoL span, #infoWhite span, #infoAne span, #infoQ span,  #infoE span, #infoBu span , #infoPO span, #infoBB span, #infoLak span  
{
   font-size: 1.3em;
   font-weight: bold;
}
/*#infoL{
    display: none;
    position: absolute;
    left: 5px;
    top: -45px;
    color: #000;
    width: 190px;
    height: 90px;
    max-height: 40px;
    padding: 10px 10px 10px 30px;
    background:#a6cbe8;
    border-radius: 5px;
    border: 1px solid #fff;
    -moz-box-shadow:    inset 0 0 10px #095197;
   	-webkit-box-shadow: inset 0 0 10px #095197;
    box-shadow:         inset 0 0 10px #095197;
    z-index: 7;
    margin-left: 20px;
}*/
#infoGawe {
    display: none;
    position: relative;
    left:-3px;
    top: -18px;
    border: 1px solid #fff;
    color: #fff !important;
    width: 90px;
    padding: 5px 10px 5px 30px;
    background: #666;
    border-radius: 5px;
   -moz-box-shadow:    inset 0 0 10px #f9a561;
   -webkit-box-shadow: inset 0 0 10px #f9a561;
    box-shadow:         inset 0 0 10px #f9a561;
}
 #infoLvvl {
    display: none;
    position: relative;
    left:-3px;
    top: -18px;
    border: 1px solid #fff;
    color: #fff !important;
    width: 90px;
    padding: 5px 10px 5px 30px;
    background:#666;
    border-radius: 5px;
    font-size: 1em;
   -moz-box-shadow:    inset 0 0 10px #f9a561;
   -webkit-box-shadow: inset 0 0 10px #f9a561;
    box-shadow:         inset 0 0 10px #f9a561;
}
 #infoVanua {
    display: none;
    position: relative;
    left:-100px;
    top: -20px;
    border: 1px solid #fff;
    color: #fff !important;
    width: 90px;
    padding: 5px 18px 5px 10px;
    background-color: #666;
    border-radius: 5px;
    font-size: 1em;
   -moz-box-shadow:    inset 0 0 10px #f9a561;
   -webkit-box-shadow: inset 0 0 10px #f9a561;
    box-shadow:         inset 0 0 10px #f9a561;
}
#infoAmb, #infoLpv, #infoYash {
    display: none;
    position: relative;
    left:-3px;
    top: -20px;
    border: 1px solid #fff;
    color: #fff !important;
    width: 100px;
    padding: 5px 18px 5px 25px;
    background-color: #666;
    border-radius: 5px;
    font-size: 1em;
   -moz-box-shadow:    inset 0 0 10px #f9a561;
   -webkit-box-shadow: inset 0 0 10px #f9a561;
    box-shadow:         inset 0 0 10px #f9a561;
}
/*#infoGawe a:link, #infoGawe a:hover, #infoGawe a:focus, #infoLvvl a:link, #infoLvvl a:hover, #infoLvvl a:focus, #infoWamb a:link, #infoWamb a:hover, #infoWamb a:focus, #infoAmb a:link, #infoAmb a:hover, #infoAmb a:focus, #infoLpv a:link, #infoLpv a:hover, #infoLpv a:focus, #infoYash a:link, #infoYash a:hover, #infoYash a:focus  {
    text-decoration: none !important;
    color: #ffffff !important;
}*/
.iconQ,.iconW, .iconP, .iconS, .iconB, .iconWhite, .iconAne, .iconBu, .iconLak, .iconE,.iconBB,.iconPO {
    position: relative;
    z-index: 3;
	  display: block;
    left: -20px;
    top: -20px;
}

.iconL {
    position: relative;
    z-index: 5;
	display:block;
    left: -20px;
    top: -30px;
}
.iconVol, .iconAmb, .iconLpv, .iconYash, .iconGawe {
    position: relative;
    z-index: 6;
	display:block;
}
.iconLvvl {
    position: relative;
    z-index: 3;
	display:block;
}

.titreck{
 font-size: 12px !important;
}


.mainLinks {

  	position: relative;
    display:inline-block;
    width: 90%;
  	max-width: 100%;
  	margin-left: 8% !important;
  	margin-top: 30px;
  	font-family: Georgia;
    font-size: 1.2em !important;
    font-weight: normal;
    letter-spacing: 1px;
}
.mainLinks  a {
    text-decoration: none;
    color: #fff !important;
}
.mainLinks a:hover {
    text-decoration: none;
  	background-color:#095197 !important;
    color: #fff !important;
    font-weight: normal;
}
.mainLinks h3 {
  	font-weight: bold;
}
.mainLinks div {
  	display: inline-block;
  	float:left;
  	max-width:200px;
  	width: 95%;
}
.mainLinks ul li {
  	list-style-type:none;
}
.mainLinks ul li p {
  	margin: 6px !important;
}
#town{
    position: absolute;
    z-index:1300;
    left: 560px;
    width: auto;
    top: 60px;
}
#town p a {
    padding: 5px;
    color: #fff;
  	font-size:1em;
    font-weight: normal;
}
#town p a:link {
    text-decoration: none;
}
.forecastbox{
    width: auto;
    background-color:#dcdcdc;
    color: #084B8A;
    padding:30px;
    font-size: 1.2em;
  	margin: 5px;
 }
.forecastbox table {
    padding: 30px !important;
	margin-bottom: 15px;
    
}
.forecastbox textarea, .forecastbox input, .forecastbox option {
    background: #fff;
}
.forecastbox .subRow {
    display:block;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.submitButt input {
    text-decoration: none !important;
    background:#015b86;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    box-shadow: 0px 3px 3px #555;
}
.submitButt input:hover {
    text-decoration: none !important;
    background:#a6cbe8;
    color: #000;
    font-weight: bold;
    font-size: 1em;
    box-shadow: 0px 3px 3px #555;
}
.submitButt a:hover {
    text-decoration: none !important;
}
.submitButt button {
  	display: block;
    width: auto;
    background:#015b86;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    box-shadow: 0px 3px 3px #555;
    text-shadow: none;
}
.submitButt button:hover {
    width:auto;
    background:#a6cbe8;
    color: #000;
    font-weight: bold;
    font-size: 1em;
    box-shadow: 0px 3px 3px #555;
    text-shadow: none;
    text-decoration: none !important;
}
.forecastbox .newForecast {
    display: inline-block;
    margin:0 10px 0 10px;
    padding: 0 !important;
}
.forecastbox .newForecast button {
  	padding: 5px !important;
    width: auto;
    background:#015b86;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    box-shadow: 0px 3px 3px #555;
    text-shadow: none;
}
.forecastbox .newForecast button:hover {
  	padding: 5px !important;
    background:#a6cbe8;
    color: #000;
    font-weight: bold;
    font-size: 1em;
    box-shadow: 0px 3px 3px #555;
    text-shadow: none;
}
.forecastbox .marineForecast {
    display: inline-block;
    margin:0 10px 0 10px;
    padding: 0 !important;
}
.forecastbox .marineForecast button {
  	padding: 5px !important;
    width: auto;
    background:#015b86;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    box-shadow: 0px 3px 3px #555;
    text-shadow: none;
}
.forecastbox .marineForecast button:hover {
  	padding: 5px !important;
    background:#a6cbe8;
    color: #000;
    font-weight: bold;
    font-size: 1em;
    box-shadow: 0px 3px 3px #555;
    text-shadow: none;
}
.item-page ul.actions {
    position: absolute !important;
    z-index: 10;
}
.item-page h2 {
  	margin:0 !important;
}
ul.actions  li a img {
    position: relative !important;
  	/*top: -10px;*/
    display: inline-block !important;
    float: right !important;
}
.staError {
    position:relative;
	z-index: 10;
	top: 3px;
	display:block;
	max-width: 300px;
	margin: 0;
	padding: 5px;
	color: #062a72;
	background-color: #fbd7a1;
	text-align: left;
	font-size: 0.9em;
	border: 1px solid #ff0000;
	box-shadow: 0 0 0.1em 0.1em #666;
	-moz-box-shadow: 0 0 0.1em 0.1em #666;
	-webkit-box-shadow: 0 0 0.1em #666;
}
.provinces {
    position: relative;
    display: block;
    z-index: 10;
}
.forecastUpdate .forecastReport {
    display: block;
    padding: 30px !important;
	margin-bottom: 15px;
	background:#fff;
	border: 1px solid #acacac;
	font-size: 0.9em;
	box-shadow: 0px 10px 10px #555555;
}
.forecastReport a {
    text-decoration: none !important;
}
.forecastUpdate{
    width: auto;
    background-color:#dcdcdc;
    color: #084B8A;
    padding: 30px;
    font-size: 1.2em;
  	margin: 5px;
}
.forecastFront {
    display: inline-block;
  	float:left;
  	width: 95%;
  	/*border: 1px solid #dcdcdc;*/
  	background: #ececec;
  	padding: 20px;
  	margin: 0 !important;
    overflow: auto;
  	overflow-y: hidden;
}
.forecastFrontRight {
  	display:inline;
  	float:left;
}
.forecastFrontTabThree {
  	display:block;
  	width: 600px;
    max-width: 630px;
  	text-align:center;
    margin-left:auto !important;
  	margin-right: auto !important;
  	
}
.forecastFront span{
    display: block;
}
.forecastFrontTabOne a:link, .forecastFrontTabThree a:link{
    display: block;
    padding: 5px;
    text-decoration: none!important;
    font-size: 12pt;
    font-weight:bold;
}
.forecastFrontTabOne a:hover, .forecastFrontTabThree a:hover {
    display: block;
  	color: #000;
    padding: 5px;
    background: none !important;
    font-size: 12pt;
    font-weight:bold;
    -webkit-box-shadow: 0 8px 6px -6px #1a3867;
	   -moz-box-shadow: 0 8px 6px -6px #1a3867;
	        box-shadow: 0 8px 6px -6px #1a3867;
}
.forecastFrontTabTwo th {
    background:#555 !important;
}
.forecastFront table {
    border: 1px solid #acacac;
    padding: 10px;
    border-radius: 8px !important;
}

.forecastFront tr:nth-child(odd), .forecastFront tr:nth-child(odd) {
	background-color:#ddd;
}
.forecastFront tr:nth-child(even), .forecastFront tr:nth-child(even) {
	background-color:#fff;
}
.forecastFront h3 {
    padding-top: 20px !important;
}
.forecastFront .temp {
    color:#6c0e0e;
    font-weight: bold;
  	font-size: 1.1em;
}
.forecastFront .heading {
    color:#fff;
  	font-size: 11pt;
    font-weight: bold;
  	min-width: 100px;
  	width:auto;
  	margin: 3px 20px 3px 20px;
  	max-width: 180px;
  	display: inline !important;
}
.forecastFront .compo {
  	min-width:100px;
  	width:130px;
  	margin: 0px 10px 0px 0px;
  	max-width: 150px;
  	display: inline-block !important;
  	float:left;	
}
.forecastFront .compo img {
  	display:block !important;
  	margin: 0 !important;
}
.forecastFront .compo p span {
  	display: inline !important;
  	vertical-align: middle !important;
}
.forecastFront .provinceMore {
    display: inline-block;
}
.forecastFront .provinceToday p {
    display: inline-block;
    padding: 0px 50px 0px 0px;
    height: 5px;
}
.forecastFront .frontTop {
    background:#015b86;
    color: #fff;
    border: 1px solid #fff;
}
.forecastFront .frontBottom {
    background:#015b86;
    color: #fff;
    border: 1px solid #fff;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10pt;
  	text-align: center;
}
.forecastFront .frontBottom p {
  	display: block;
  	margin: 5px !important;
}
.forecastFront .headingMore span {
    display: inline-block;
    background:#555;
    color:#fff;
  	font-size: 9pt;
    font-weight: bold;
}
.forecastFront .provinceDate {
    width: 100px !important;
}
.earthquakeBulletin {
  	width:100%;
    max-width: 720px;
  	margin-left: auto !important;
  	margin-right: auto !important;
  	overflow: auto;
  	overflow-y: hidden;
    border-radius: 5px; 
    border:1px solid #acacac; 
    background-color:#ececec; 
    padding:20px; 
    font-size:1.1em; 
    text-align:center;
}
.earthquakeBulletin .vmgdLogo {
    position: relative;
  	top: 20px;
}
.earthquakeBulletin p {
  	display: block;
    margin: 0 !important;
    padding: 0 !important;
}
.earthquakeBulletin h4, .earthquakeBulletin .headBulletin {
  	text-align: center;
    margin: 0 !important;
    padding: 0 !important;
}

.err {
   border-left: 1px solid #dcdcdc;
   border-right: 1px solid #dcdcdc;
   background: #fff;
}
#forecastDate {
   position: relative;
   z-index: 10;
}
.ui-progressbar {
	position: relative;
  	z-index: 10;
	height: 1em;
	width: 260px;
}
.progress-label {
	position: absolute;
	left: 40%;
	top:2px;
	font-weight: normal;
	font-size: 0.7em;
	text-shadow: 1px 1px 0 #fff;
}
.provinceForm {
    position: relative;
    top: 20px;
    margin: 0;
}
#diaWarning, #diaError, #diaPending{
    position:relative;
	max-width: 300px;
	margin: 0;
	padding: 20px 15px 15px 15px;
	color: #062a72;
	background-color: #fbd7a1;
	text-align: left;
	font-size: 0.9em;
	border: 1px solid #ff0000;
	box-shadow: 0 0 0.1em 0.1em #666;
	-moz-box-shadow: 0 0 0.1em 0.1em #666;
	-webkit-box-shadow: 0 0 0.1em #666;
}
.no-close .ui-dialog-titlebar-close {
  position: relative;
  z-index: 10;
  top: 15px;
  left: -8px;
}
#diaWarning .proceedForecast a button, .no-close .ui-dialog-titlebar-close, #diaPending .proceedForecast a button, #diaError .proceedForecast a button {
  	position: relative;
    width: auto;
    background:#015b86;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    box-shadow: 0px 3px 3px #555;
    text-shadow: none;
}
#diaWarning .proceedForecast a button:hover, .no-close .ui-dialog-titlebar-close:hover, #diaPending .proceedForecast a button:hover, #diaError .proceedForecast a button:hover {
    width:auto;
    background:#a6cbe8;
    color: #000;
    font-weight: bold;
    font-size: 1em;
    box-shadow: 0px 3px 3px #555;
    text-shadow: none;
}
.imageFile {
    position: relative;
    left: 50px;
    padding: 10px;
  	color:#015b86;
    background: #ececec;
}
#contentarea .search {
    padding: 30px 20px 20px 20px !important;
}
#contentarea #jevents {
    padding: 0 20px 20px 20px !important;
}
.slide {
    background: #dcdcdc !important;
}
/*Climate background color*/
/*.a115 #contentarea {
    display: block;
    background: #fff !important;
    /*  -moz-box-shadow:    inset 0 70px 70px -70px #7dcd75,
  						inset 0 -70px 70px -70px #7dcd75;
   	-webkit-box-shadow: inset 0 70px 70px -70px #7dcd75,
  						inset 0 -70px 70px -70px #7dcd75;
    box-shadow:         inset 0 70px 70px -70px #7dcd75,
  						inset 0 -70px 70px -70px #7dcd75;*/
    /*-webkit-box-shadow: inset 0 70px 70px -70px #7dcd75;
   -moz-box-shadow: inset 0 70px 70px -70px #7dcd75;
    box-shadow: inset 0 70px 70px -70px #7dcd75;
}
/*Forecast background color*/
/*.a182 #contentarea {
    display: block;
    background: #fff !important;
    /*  -moz-box-shadow:    inset 0 70px 70px -70px #3359d4,
  						inset 0 -70px 70px -70px #3359d4;
   	-webkit-box-shadow: inset 0 70px 70px -70px #3359d4,
  						inset 0 -70px 70px -70px #3359d4;
    box-shadow:         inset 0 70px 70px -70px #3359d4,
  						inset 0 -70px 70px -70px #3359d4;*/
    /*-webkit-box-shadow: inset 0 70px 70px -70px #3359d4;
   -moz-box-shadow: inset 0 70px 70px -70px #3359d4;
    box-shadow: inset 0 70px 70px -70px #3359d4;
}
/*GeoHazard background color*/
/*.a112 #contentarea {
    display: block;
    background: #fff !important;
    /*  -moz-box-shadow:    inset 0 70px 70px -70px #e13636,
  						inset 0 -70px 70px -70px #e13636;
   	-webkit-box-shadow: inset 0 70px 70px -70px #e13636,
  						inset 0 -70px 70px -70px #e13636;
    box-shadow:         inset 0 70px 70px -70px #e13636,
  						inset 0 -70px 70px -70px #e13636;*/
   /*-webkit-box-shadow: inset 0 70px 70px -70px #e13636;
   -moz-box-shadow: inset 0 70px 70px -70px #e13636;
    box-shadow: inset 0 70px 70px -70px #e13636;
}
/*Observation background color*/
/*.a177 #contentarea {
    display: block;
    /*background: #fff !important;
      -moz-box-shadow:    inset 0 70px 70px -70px #7262c3,
  						inset 0 -70px 70px -70px #7262c3;
   	-webkit-box-shadow: inset 0 70px 70px -70px #7262c3,
  						inset 0 -70px 70px -70px #7262c3;
    box-shadow:         inset 0 70px 70px -70px #7262c3,
  						inset 0 -70px 70px -70px #7262c3;*/
    /*-webkit-box-shadow: inset 0 70px 70px -70px #7262c3;
   -moz-box-shadow: inset 0 70px 70px -70px #7262c3;
    box-shadow: inset 0 70px 70px -70px #7262c3;
}*/
.forecastReview:link, .forecastReview:visited {
    width: 420px;
    display: block;
    padding: 5px;
    text-decoration: none;
    background: #095197;
  	color:#fff;
}
.forecastReview:hover {
    display: block;
    padding: 5px;
    text-decoration: none;
    background: #ececec;
  	color:#000;
}
.provinceReview {
    width: 200px;
    display: block;
    padding: 5px;
    font-style: bold;
    text-decoration: none;
    background: #095197;
  	color:#fff;
}
.provincePending {
    width: 200px;
    display: block;
    padding: 5px;
    text-decoration: none;
    background: #fb570f;
    color: #fff;
    opacity: 0.7;
}
.watersReview {
    width: 180px;
    display: inline-block;
    padding: 5px;
    font-style: bold;
    text-decoration: none;
    background: #095197;
  	color:#fff;
}
.watersPending {
    width: 180px;
    display: inline-block;
    padding: 5px;
    text-decoration: none;
    background: #fb570f;
    color: #fff;
    opacity: 0.7;
}
.forecastPending:link, .forecastPending:visited {
    width: 420px;
    display: block;
    padding: 5px;
    text-decoration: none;
    background: #fb570f;
    color: #fff;
    opacity: 0.7;
}
.forecastPending:hover {
    display: block;
    padding: 5px;
    text-decoration: none;
    background: #ececec;
  	color:#000 !important;
}
.forecastReviewContent{
    display: inline-block;
    padding: 10px;
    font-size: 10pt;
  	border: 1px dashed #666;
  	margin: 5px;
  	max-width: 260px;
}
.forecastReviewContent p, .marineReviewContent p {
   margin: 0 !important;
   padding: 0 !important;
}
.marineReviewContent{
    display: inline-block;
    padding: 10px;
    font-size: 10pt;
  	border: 1px dashed #666;
  	margin: 5px;
  	max-width: 380px;
}
.printButton {
   float: right;
}
.foreWarning {
  	width:100%;
    max-width: 720px;
  	margin-left: auto !important;
  	margin-right: auto !important;
  	overflow: auto;
  	overflow-y: hidden;
    border-radius: 5px; 
    border:1px solid #acacac; 
    background-color:#ececec;/*#f8e3c8;*/
    padding:15px; 
    font-size:1.1em; 
    text-align:center;
}
.foreWarning .foreEvent {
    display: inline;
  	float:left;
  	width: 260px;
    padding: 0;
}
.foreWarning .foreEventLong {
    display: block;
  	width: auto;
    padding: 0px 20px 0 20px;
}
.foreWarning h4 {
    text-align: center;
    color: #fff;
    margin: 0 !important;
    padding: 0 !important;
}
.foreWarning .headBulletin {
    text-align: center;
    color: #fff;
    margin: 0 !important;
    padding: 0 !important;
    /*box-shadow: 0px -3px 3px #555;*/
     -webkit-box-shadow: inset 0 90px 90px -90px #fff;
   -moz-box-shadow: inset 0 90px 90px -90px #fff;
    box-shadow: inset 0 90px 90px -90px #fff;
}
.marineDivider, .dailyDivider {
    display: block;
    margin-bottom: 15px;
  	padding: 5px;
  	-webkit-box-shadow: 0 8px 6px -6px #555;
	   -moz-box-shadow: 0 8px 6px -6px #555;
	        box-shadow: 0 8px 6px -6px #555;
}
.marineDivider h4, .dailyDivider h4 {
    margin: 0 !important;
    padding: 0 !important;
}
.marineFront {
  	width: 95%;
  	border: 1px solid #dcdcdc;
  	background: #ececec;
  	padding: 20px;
  	margin: 0 !important;
    overflow: auto !important;
    overflow-y: hidden !important;
}
.marineFrontTabOne {
    overflow: auto;
    overflow-y: hidden;
  	border: 1px solid #acacac;
}
.marineWrap {
    display: block;
    margin: 10px 0px 15px 0px;
}
.marineWrapIndi {
    margin:0px 15px 0px 15px;
    width: 95%;
}
.marineWrapIndi p {
    display: inline-block;
}

.marineSumOne {
    display: inline-block !important;
  	margin-left: 15px !important;
  	padding: 0 !important;
    width:55%;
}
.marineSumTwo {
    display: inline-block !important;
  	margin-left: 15px !important;
  	padding: 0 !important;
    width:35%;
}
.marineOther {
    display: inline !important;
  	margin: 10px 30px 15px 0px;
  	padding: 0 !important;
    width:30%;
  	max-width:28%;
    float: left;
}
.marineOtherTwo {
  	position: relative;
    display: inline !important;
  	margin: 10px 30px 15px 0px;
  	padding: 0 !important;
    width:32%;
  	max-width:32%;
    float: left;
}
.marineOtherIndi {
    display: inline !important;
  	margin:0px 15px 0px 15px;
    width:16%;
    max-width: 20%;
    float: left;
}
.marineOtherIndi p {
    display: block;
}
.marineOther .temp, .marineOtherIndi .temp, .marineOtherTwo .temp{
    color:#6c0e0e;
    font-weight: bold;
}
.marineSumOne p, .marineSumTwo p, .marineOther p, .marineOtherIndi p, .marineOtherTwo p {
    margin: 0 !important;
    padding: 0 !important;
}
.marineFront .frontTop {
    background:linear-gradient(90deg, #015b75, #015f86, white) !important;     
    color: #fff;
    border: 1px solid #fff;
    vertical-align: middle;
}
.marineFront .heading {
  	text-align:center;
    vertical-align: middle;
    /*background:#555;*/
    background:  linear-gradient(180deg, #555, #666, #888) !important;
    color:#fff;
  	font-size: 11pt;
    font-weight: bold;
    border-bottom: 1px solid #fff;
    width: 15% !important;
}
.marineFrontTabOne a:link {
    display: block;
    color: #fff !important;
    text-decoration: none !important;
    padding: 5px;
    background: none !important;
    font-size: 12pt;
    font-weight:bold;
}
.marineFrontTabOne a:hover, .marineFrontTabOne a:visited, .marineFrontTabOne a:focus {
    display: block;
  	color: #fff;
    padding: 5px;
    background: none !important;
    font-size: 12pt;
    font-weight:bold;
    -webkit-box-shadow: 0 8px 6px -6px #fff;
	   -moz-box-shadow: 0 8px 6px -6px #fff;
	        box-shadow: 0 8px 6px -6px #fff;
}
.marineFront tr:nth-child(odd), .marineFront tr:nth-child(odd) {
	background-color:#ddd;
}
.marineFront tr:nth-child(even), .marineFront tr:nth-child(even) {
	background-color:#fff;
}
.moreDate {
    margin: 0 !important;
    padding: 0 !important;
}
.warningTableMainTwo {
    position:relative;
    z-index:5;
  	left:10px;
  	margin: 0 !important;
    text-decoration: none !important;
    background:transparent;
    padding: 0px 10px 0px 10px !important;
  	list-style-type: none;
}
.warningTableMainTwo a:hover {
    position:relative;
    z-index:5;
  	margin: 0 !important;
    text-decoration: none !important;
    background:transparent !important;
  	list-style-type: none;
}
/*----------Blinking warning---------------*/
.warningBlinker {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    20% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    20% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    20% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
.warningBlinker a:hover {
  	text-decoration: none !important;
  	background: none !important;
  	color:#000;
}
.warning a:link{
    display: block;
    padding: 5px;
    text-decoration: none!important;
    color:#fff;
    font-size: 12pt;
    font-weight:bold;
}

.groupHeading {
    display: inline !important;
    float: left !important;
  	color: #1d680b !important;
}
.forecastModify {
    display: inline !important;
    float: right !important;
    color: #1a3867 !important;
}
.forecastModifySub {
    display: inline !important;
    float: right !important;
    opacity: 0.8 !important;
    color: #1a3867!important;
}
.forecastPend {
    display: inline !important;
    float: right !important;
    color: red !important;
}
.forecastPendSub {
    display: inline !important;
    float: right !important;
    opacity: 0.8 !important;
    color: red !important;
}
.fullSat{
    position:relative;
    margin:auto;
    padding:15px;
    max-width:710px;
    background:#dcdcdc;
    box-shadow: 0px 10px 10px #555;
}
.mixImg {
  	margin-left:auto !important;
  	margin-right:auto !important;
    padding:25px;
    width:80%;
    background:#dcdcdc;
    height: auto;
}
.mixImg img {
    border: 1px solid #fff;
    box-shadow: 0px 10px 10px #555;
  	width: 200px !important;
}
.mixImg img a:link {
    text-decoration: none !important;
}
.mapTitle {
    position: relative;
  	top: 15px;
  	left: 15px;
    display: inline;
  	font-size:1em !important;
    font-style: bold !important;
  	vertical-align: top;
  	padding: 5px;
  	color:#000;
  	background: #fff;
  	-webkit-box-shadow: inset 0 70px 70px -70px #3359d4;
   -moz-box-shadow: inset 0 70px 70px -70px #3359d4;
    box-shadow: inset 0 70px 70px -70px #3359d4;
}
.chartTitle {
  	position: relative;
  	left: -15px;
  	top: -25px;
    display: inline;
  	font-size:1em !important;
    font-style: bold !important;
  	vertical-align: bottom;
  	padding: 5px;
  	color: #000;
    background:#fff;
   -webkit-box-shadow: inset 0 70px 70px -70px #3359d4;
   -moz-box-shadow: inset 0 70px 70px -70px #3359d4;
    box-shadow: inset 0 70px 70px -70px #3359d4;
}
/*-----------------------------------------*/
/*--------------Geohazard Section----------*/
.geoNetwork {
  	position: relative;
    display:block;
    margin: auto;
  	padding: 20px;
    -moz-box-shadow:    inset 0 0 10px #555;
   -webkit-box-shadow: inset 0 0 10px #555;
    box-shadow:         inset 0 0 10px #555;
  	border-radius: 8px;
}
.weatherIconTable {
    padding: 15px !important;
  	display: block;
    width: 80%;
    margin: auto !important;
  	background: #666;
  	border-radius: 8px;
}
.weatherIconTable table {
    border: 1px solid #fff !important;
}
.weatherIconTable tr:nth-child(odd), .weatherIconTable tr:nth-child(odd) {
	background-color:#ddd !important;
}
.weatherIconTable tr:nth-child(even), .weatherIconTable tr:nth-child(even) {
	background-color:#fff !important;
}
.uDelete {
    position: relative;
  	display: inline;
    float: left;
	border: none;
    text-decoration: none !important;
	opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}
.ui-iconProgressbar {
	position: relative;
  	z-index: 100 !important;
    background: transparent;
	height: 1em;
	width: 300px;
}
.icon-progress-label {
	position: absolute;
	left: 40%;
	top:2px;
	font-weight: normal;
	font-size: 0.9em;
	text-shadow: 1px 1px 0 #fff;
}
#iconImg {
    width: 300px !important;
}
.iconForm {
    background:#ececec !important;
  	color: #000 !important;
  	display:block;
    border-radius: 8px !important;
    margin: 20px;
  	border: 1px solid #acacac;
}
p.iconGuide {
    color:#982304;
  	font-size: 1.2em !important;
    font-weight: bold !important;
}
#MXgeo {
  	position:relative;
  	top: 15px;
  	left: -200px;
}
.geoWelcome {
  	display:block;
  	position: relative;
  	margin: auto !important;
  	border-radius: 8px;
  	background: #fbcbdf;
  	padding: 5px;
  	text-align: center;
  	 -moz-box-shadow: inset 0 15px 15px -15px #555;
    box-shadow: inset 0 15px 15px -15px #555;
}
 #geoEarthquake{
    position: absolute;
  	padding: auto !important;
  	margin-left: 20% !important;
  	/*margin-right:18% !important;*/
  	/*margin-top: 1% !important;*/
  	margin-bottom: 5% !important
}
#geoTsunami{
    position: absolute;
	display:block;
  	max-width:100%;
  	padding: auto !important;
  	margin-left:42% !important;
  	margin-right:42% !important;
  	/*margin-top: 1% !important;*/
  	margin-bottom: 5% !important
}
#geoInner{
  	position: absolute;
	display:block;
  	width:75%;*/
  	padding: auto !important;
  	margin-left: 13% !important;
  	margin-right: auto !important;
  	/*margin-top: 1% !important;*/
  	margin-bottom: 5% !important
}
#geoInner ul.maximenuck, #geoEarthquake ul.maximenuck ,#geoTsunami ul.maximenuck  {
  	border-radius:5px !important;
  	border:none !important;
  	background:#424242 !important;
}
#geoInner ul.maximenuck li.maximenuck.level1,#geoEarthquake ul.maximenuck li.maximenuck.level1,#geoTsunami ul.maximenuck li.maximenuck.level1 {
  	margin: 2px 3px 0px 3px !important;
  	width: 175px !important;
  	text-align: left !important;
}
#geoEarthquake ul.maximenuck li.maximenuck.level1 {
  	margin: 2px 3px 0px 3px !important;
  	width: 140px !important;
  	text-align: center !important;
}
#geoInner ul.maximenuck li.maximenuck ul.maximenuck2 li a:hover,#geoEarthquake ul.maximenuck li.maximenuck ul.maximenuck2 li a:hover,#geoTsunami ul.maximenuck li.maximenuck ul.maximenuck2 li a:hover, #geoInner ul.maximenuck li.maximenuck ul.maximenuck2 li a:active > a,#geoEarthquake ul.maximenuck li.maximenuck ul.maximenuck2 li a:active > a,#geoTsunami ul.maximenuck li.maximenuck ul.maximenuck2 li a:active > a {
  	color:#000 !important;
}

.item-page h2 {
  	border-bottom: none !important;
}
#right {
  	position: relative !important;
  	top:52px !important;
}
#mapping .ol-zoom-in,#mapping .ol-zoom-out {
    position:relative;
  	display:inline-block;
  	top: -35px;
  	border: 1px solid #999999 !important;
}
#right {
  	background: none !important;
  	border:none !important;
}
#right .bannergroupblueHole img {
  	
}
.geoCamera {
  	float:left;
  	max-width: 200px;
  	border: 1px solid #acacac; 
  	border-radius: 8px; 
  	padding: 15px; 
  	margin: 30px;
  	background: #ececec;
}
.geoCamera:hover {
    -moz-box-shadow:    inset 0 0 10px #666;
   -webkit-box-shadow: inset 0 0 10px #666;
     box-shadow:         inset 0 0 10px #666;
   /*-webkit-box-shadow: 6px 8px 6px -6px #666;
	   -moz-box-shadow: 6px 8px 6px -6px #666;
	        box-shadow: 6px 8px 6px -6px #666;*/
}
.geoCamera p {
   padding: 0 !important;
   margin: 0 !important;
}
.page_row, .page_selected{
	display: inline-block;
  	float:left !important;
   
    margin: auto;
	padding: 0;
}
.page_row a:link{
	text-decoration:none;
	font-weight: normal;
  	font-size: 16px;
	padding: 10px;
  	border-radius:20px;
}
.page_row a:visited{
	text-decoration:none;
	font-weight: normal;
}
.page_row a:hover {
	text-decoration: none;
    	background: #fbcbdf !important;
    	font-weight:bold;
    	font-size: 16px;
    	color: #000 !important;
}
.page_selected a {
        color: #fff !important;
}
.page_selected a:link {
    	text-decoration:none;
    	padding: 10px;
    	font-weight:bold;
    	font-size: 16px;
  		background:#095197;
    	color: #fff !important;
  		border-radius:20px;
}
.page_selected a:hover{
  		color:#000 !important;
  		background: #fbcbdf !important;
}
.nextSet {
	background: none;
    display:inline;
  	float: left !important;
}
.nextSet a:link,.nextSet a:hover {
	background: none !important;
}
.noImage {
  	border:1px solid #acacac;
  	border-radius: 8px;
}
.earthquakeDatList .responsive {
    max-width : 100% !important;
    height : auto !important;
}
.earthquakeDatList ul li {
    padding:5px;
}
#climap {
    position: relative;
    display: inline-block;
    z-index: 5;
    padding: 0 !important;
    
}
#solaCli {
    position: relative;
    z-index: 4;
    left: 140px;
    top:90px;
}
.ol-zoom-out, .ol-zoom-in {
    background: #555 !important;
  	color: #fff !important;
}
.ol-zoom-out:hover, .ol-zoom-in:hover {
    background: #095197 !important;
  	color: #fff !important;
}
.ol-attribution button {
    background: #555 !important;
  	color: #fff !important;
}
.mapLink span {
    padding: 3px;
  	color: #fff !important;
}
.mapLink span:hover {
  	background:#ececec !important;
  	padding:3px;
  	border-radius: 3px;
  	color:#000 !important;
  	cursor: move;
}
.mapLink p {
  	margin: 3px !important;
  	padding: 0 !important;
  	color: #fff !important;
}
.ol-popup {
        position: absolute;
        background-color: rgba(200, 54, 54, 0.8);
        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
  		width:200px;
        min-width: 100px;
   		color:#fff !important;
      }
      .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
      }
      .ol-popup:after {
        border-top-color: rgba(200, 54, 54, 0.8);
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
      }
      .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
      }
      .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 5px;
      }
      .ol-popup-closer:after {
        content: "✖";
        color:#000;
      }
.cli-popup {
        position: absolute;
        background-color: rgba(0, 128, 0, 0.8);
        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #fff;
        bottom: 12px;
        left: -50px;
  		width:220px;
        max-width: 300px;
   		color:#fff !important;
      }
      .cli-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
      }
      .cli-popup:after {
        border-top-color: rgba(0, 128, 0, 0.8);
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
      }
      .cli-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
      }
      .cli-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 5px;
      }
      .cli-popup-closer:after {
        content: "✖";
        color:#000;
      }
.vmgdLogoFor {
  	position:relative;
  	top: 20px;
}
.article-info {
  	position: relative;
  	border: 0 !important;
  	margin: 0 !important;
}
#cliInner {
    margin-left: auto !important;
  	margin-right: auto !important;
  	width:55%;
  	max-height: 22px !important;
  	z-index:1500;
  	font-size: 13px !important;
}

#cliInner ul.maximenuck {
  	border-radius:5px !important;
  	background: #175a36 !important;
  	max-height: 22px !important;
  	padding: 5px !important;
  	border: none !important;
  	font-size: 13px !important;
    line-height: 12px !important;
}

#cliInner ul.maximenuck li.maximenuck.level1 {
  	background: none !important;
  	display: inline !important;
  	float:left !important;
}
#cliInner ul.maximenuck li.maximenuck.level1 a.maximenuck{
  	position:relative !important;
  	top: -2px !important;
  	font-size: 13px !important;
    line-height: 4px !important;
  	color: #fff !important;
  	background: #175a36 !important;
}
#cliInner ul.maximenuck li.maximenuck.active.level1 a.maximenuck,#cliInner ul.maximenuck li.maximenuck.level1 a.maximenuck:hover{
  	font-size: 13px !important;
    line-height: 4px !important;
  	color: #000 !important;
  	background: #ececec !important;
  	border-top-left-radius: 5px !important;
  	border-top-right-radius: 5px !important;
  	border-top: 1px solid #acacac !important;
  	border-left: 1px solid #acacac !important;
  	border-right: 1px solid #acacac !important;
  	
  	 -moz-box-shadow:    inset 0 0 10px #fff;
   -webkit-box-shadow: inset 0 0 10px #fff;
    box-shadow:         inset 0 0 10px #fff;
  	
}
.forecastPublic {
  	display: block;
  	width:90%;
  	margin-left: auto !important;
  	margin-right: auto !important;
  	padding: 15px !important;
  	border: 1px solid #acacac;
  	 -webkit-box-shadow: 0 8px 6px -6px #666;
	   -moz-box-shadow: 0 8px 6px -6px #666;
	        box-shadow: 0 8px 6px -6px #666;
  
}
.forecastPublic2 {
    width:90%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 15px !important;
    border: 1px solid #acacac;
     -webkit-box-shadow: 0 8px 6px -6px #666;
       -moz-box-shadow: 0 8px 6px -6px #666;
            box-shadow: 0 8px 6px -6px #666;
  
}
.severeTable{
  	display: block;
  	width:90%;
  	max-width:750px;
  	margin-left: auto !important;
  	margin-right: auto !important;
  	padding: 15px !important;
  	border: 1px solid #acacac;
  	 -webkit-box-shadow: 0 8px 6px -6px #666;
	   -moz-box-shadow: 0 8px 6px -6px #666;
	        box-shadow: 0 8px 6px -6px #666;
  
}
.weatherBulletin {
  	display:block;
  	text-align: center !important; 
  	color: #fff !important; 
  	background: #1a3867 !important; 
  	border-radius: 5px !important; 
  	padding: 5px !important;
     -webkit-box-shadow: 0 8px 6px -6px #666;
	   -moz-box-shadow: 0 8px 6px -6px #666;
	        box-shadow: 0 8px 6px -6px #666;
}

.geoSismoBulletin {
    display:block;
    text-align: center !important; 
    color: #fff !important; 
    background: linear-gradient(5deg, #64627E, #b95865, white) !important;
    border-radius: 5px !important; 
    padding: 5px !important;
     -webkit-box-shadow: 0 8px 6px -6px #666;
     -moz-box-shadow: 0 8px 6px -6px #666;
          box-shadow: 0 8px 6px -6px #666;
}

.climateBulletin {
    display: block;
    text-align: center !important;
    color: #fff !important;
    background: linear-gradient(5deg, #7262c3, #7f1f9e, white) !important;
    border-radius: 5px !important;
    padding: 5px !important;
    -webkit-box-shadow: 0 8px 6px -6px #666;
    -moz-box-shadow: 0 8px 6px -6px #666;
    box-shadow: 0 8px 6px -6px #666;
}

.kladdownload{
    list-style-type: none !important;
}


.servereOutlook {
  	display:inline;
  	float:left;
  	margin:5px 20px 5px 0px;
  	padding: 10px;
  	width:90%;
  	max-width:190px;
  	border:1px solid #acacac;
  	border-radius: 5px;
  	background:#e7edc7;
  	text-align:center;
}
.servereOutlookB {
  	display:inline;
  	float:left;
  	margin:5px 20px 5px 0px;
  	padding: 10px;
  	width:90%;
  	max-width:190px;
  	border:1px solid #acacac;
  	border-radius: 5px;
  	background:#dcdcdc;
  	text-align:center;
}
.servereOutlookC {
  	display:inline;
  	float:left;
  	margin:5px 20px 5px 0px;
  	padding: 10px;
  	width:90%;
  	max-width:190px;
  	border:1px solid #acacac;
  	border-radius: 5px;
  	background:#b5e7f9;
  	text-align:center;
}
.recordTable {
  	background: #d9e1ed;
}
.outerOutlook {
   	background: #d9e1ed;
  	padding: 20px; 
  	border: 1px solid #acacac; 
  	border-radius: 8px;
}
.tcoutlook {
  	display:inline-block !important;
}
.tcoutlook span {
  	display: inline !important;
  	float: left !important;
  	margin-right: 20px;
}
.sevendays {
  	display:inline;
  	float:left;
  	width:85%;
  	max-width: 280px;
  	margin: 10px 30px 15px 0px;
  	padding: 15px;
  	border: 1px dashed #acacac;
  	border-radius: 8px;
}
.forecastAvia {
  	display: block;
  	width:90%;
  	max-width: 500px;
  	margin-left: auto !important;
  	margin-right: auto !important;
  	padding: 10px !important;
  	border: 1px solid #acacac;
  	 -webkit-box-shadow: 0 8px 6px -6px #666;
	   -moz-box-shadow: 0 8px 6px -6px #666;
	        box-shadow: 0 8px 6px -6px #666;
  	background: #666;
}
.forecastAvia table{
  	padding: 15px !important;
  	background: #fff;
  	border-radius: 8px;
}
.forecastAvia table p {
  	padding: 15px !important;
}
.volcanicBulletinTab textarea {
  	width: 90% !important;
}
/* geoHazards bulletin section*/
#bulletinTable {
  	margin-bottom: 15px !important;
}
#bulletinTable li a:active, #bulletinTable li a:focus, #bulletinTable li a:hover {
  	color: #000 !important;
  	background: #f3dccc !important;
}
.deleteBulletin {
  	float:right;
  	padding-right: 15px;
}
.deleteButt input {
    text-decoration: none !important;
    background: red;
    color: #fff;
    font-weight: bold;
    font-size: 0.8em !important;
    box-shadow: 0px 3px 3px #555;
  	margin: 5px 0px 0px 0px;
  	display:inline !important;
  	float:right;
}
.deleteButt input:hover {
    text-decoration: none !important;
    background:#a6cbe8;
    color: #000;
    font-weight: bold;
    font-size: 0.8em;
    box-shadow: 0px 3px 3px #555;
  	margin: 5px 0px 0px 20px;
}
.publishButt input {
    text-decoration: none !important;
    background: #095197;
    color: #fff;
    font-weight: bold;
    font-size: 0.9em !important;
    box-shadow: 0px 3px 3px #555;
  	margin: 8px 0px 0px 0px;
  	display:inline !important;
  	float:right;
}
.publishButt input:hover {
    text-decoration: none !important;
    background:#a6cbe8;
    color: #000;
    font-weight: bold;
    font-size: 0.9em;
    box-shadow: 0px 3px 3px #555;
  	margin: 8px 0px 0px 20px;
}
.intLink {
	  cursor: pointer;
	  text-decoration: underline;
	  color: #0000ff;
}
#ensoTable {
  	margin-top: 50px;
  	margin-bottom: 30px;
}
#ensoTable ul, #dialTable ul{
  	position: absolute !important;
  	width: 96% !important;
  	margin-left:auto !important;
  	margin-right: auto !important;
}
#ensoTable li a:active, #ensoTable li a:focus, #ensoTable li a:hover, #dialTable li a:active, #dialTable li a:focus, #dialTable li a:hover, #tabs li a:active, #tabs li a:focus, #tabs li a:hover,  #mapTabs li a:active, #mapTabs li a:focus, #mapTabs li a:hover, #reportTabs li a:active, #reportTabs li a:focus, #reportTabs li a:hover{
  	color: #000 !important;
  	background: #9ddc93 !important;
}
#mapTabs img {
  	width:100%;
  	max-width:100%;
}
#mapTabs {
  	margin-top: -20px;
  	margin-bottom: 20px;
}
.ensoSearch input {
  	border: none !important;
}
.ensoSearch input:hover {
    box-shadow: 0px 3px 3px #555;
}
.cliDeleteIcon input {
  	border: none !important;
  	margin: 8px 5px 5px 5px;
}
/*.ui-dialog {
  	z-index: 1400 !important;
}*/
.ui-dialog-content.ui-widget-content {
  	background: #ececec !important;
  	border: none !important;
}
/*.ui-dialog-titlebar {
  	background: #c6f1d2 !important;
}*/
.cliBulletinTab textarea {
  	width: 100% !important;
}
.cliBulletinTab h2 {
  font-size:1.1em;
  font-weight: bold;
  border-radius:5px;
  text-align:center;
  box-shadow: 0px 3px 3px #666;
}
.photoSource {
  	font-size: 0.8em !important;
  	margin: -10px 0px 10px 0px !important;
  	padding: 3px !important;
}
.photoSource a:link {
    text-decoration: none !important;
  	color: #095197 !important;
}
.photoSource a:hover {
  	color: #fff !important;
}
.climateInfo {
  	display: inline;
  	float:left;
  	width:100%;
  	max-width:160px;
  	padding: 10px;
  	margin: 15px;
  	border: 1px solid #acacac;
  	border-radius: 8px;
}

.climatevculink{
    background: #e25d1d;
    color: black;
    border: 2px solid #4CAF50;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-left: 20px;
    font-weight: bold;
}
.climatevculink:hover{
  background: #e25d1d;
    color: white;
    border: 2px solid #4CAF50;
    cursor:pointer;
    border: 4px solid #34FC20;


}

ol li {
  	margin-top: 5px;
  	margin-bottom: 5px;
}
.monitoring {
  	float:left;
  	max-width: 400px;
  	margin: 15px;
}
.monitoringVol {
  	text-align:left;
  	float:left;
  	max-width: 320px;
  	margin: 15px;
}
.monitoringInformation {
  	text-align:left;
  	float:left;
  	width: 80%;
  	max-width: 320px;
  	margin: 20px;
}

.monitoringInformation img, .monitoringVol img {
  	max-width: 240px;
}
.monitoringDes {
  	float:left;
  	max-width: 250px;
  	margin: 15px;
  	background:#dcdcdc;
  	border-radius: 8px; 
  	padding: 15px; 
  	border: 1px solid #acacac
}
.monitoringDesMain {
  	float:left;
  	max-width: 470px;
  	margin: 15px;
}

.eruptionInformation {
    text-align: left;
    float: left;
    width: 100%;
    max-width: 300px;
    margin: -1px;
    text-align: justify !important;
}

.eruptionInformation img {
    max-width: 240px;
}

.volcanicMapLive {
  	float: left;
  	width:84%;
  	max-width: 380px;
    border: 1px solid #acacac; 
    border-radius: 8px; 
    padding:15px ;
    margin:10px; 
    background: #555; 
    color: #fff;
}
.volcanicAlertTable {
  	float: left;
  	max-width: 380px;
    border: 1px solid #acacac; 
    border-radius: 8px; 
    padding:15px ;
    margin:10px; 
    background: #e9d5f3; 
}
.earthquakeTable{
	float: left;
    max-width: 380px; 
  	border: 1px solid #acacac; 
  	border-radius: 8px; 
  	padding: 15px; 
  	margin: 10px; 
  	background: #f3dccc;
}
.latestQuake {
  	margin-top:10px;
  	padding-top:10px;
  	background: #dcdcdc;
  	border-top:1px solid #acacac;
  	border-left:1px solid #acacac;
  	border-right:1px solid #acacac;
  	border-bottom:1px solid #555;
  	border-radius: 6px;
  	height: 450px;
}
.latestQuake ul li {
    padding: 5px 30px 5px 5px;
    list-style-type:none;
}
.latestQuake img {
  	width: 100%;
  	/*max-width: 380px;*/
}
.ensoTableCom {
    float: left;
    max-width: 360px; 
  	margin: 10px; 
}
#graph {
    text-align:center;
}
#graph img {
  	width:100% !important;
}
.cliProvince {
    max-width: 820px;
    margin-left: auto !important;
  	margin-right: auto !important;
}
.climateUserForm {
    border: 1px solid #acacac;
  	border-radius: 8px;
  	max-width:100%;
  	margin:10px;
  	padding:10px;
}
.climateUserForm p {
  	padding: 0 !important;
  	margin: 0 !important;
}
.climateUserForm h3 {
  	background:#28662c;
  	padding: 5px;
  	border-radius: 5px;
  	text-align:center;
  	color: #fff;
}
.climateUserForm input[type=text] {
  	width: 94%;
}
.climateUserForm .userHeadline {
  	background:#dcdcdc;
  	padding: 5px !important;
  	margin-top:3px !important;
  	margin-bottom:3px !important;
}
.cliButt input {
    text-decoration: none !important;
    background:#28662c;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    box-shadow: 0px 3px 3px #555;
}
.cliButt input:hover {
    text-decoration: none !important;
    background:#a6cbe8;
    color: #000;
    font-weight: bold;
    font-size: 1em;
    box-shadow: 0px 3px 3px #555;
}
.carouselck {
  	max-width:100% !important;
  	width:100% !important;
}
.carouselck_captions{
    width:150% !important;
  	max-height:50px !important;
}
#obsInner {
  	margin-left: auto !important;
  	margin-right: auto !important;
  	width:72%;
  	max-height: 22px !important;
}

#obsInner ul.maximenuck {
  	border-radius:5px !important;
  	background: #4b2c72 !important;
  	max-height: 22px !important;
  	padding: 5px !important;
  	border: none !important;
  	font-size: 13px !important;
    line-height: 12px !important;
}

#obsInner ul.maximenuck li.maximenuck.level1 {
  	background: none !important;
  	display: inline !important;
  	float:left !important;
}
#obsInner ul.maximenuck li.maximenuck.level1 a.maximenuck{
  	font-size: 13px !important;
    line-height: 4px !important;
  	color: #fff !important;
  	background: #4b2c72 !important;
  	top: -2px !important;
}
#obsInner ul.maximenuck li.maximenuck.active.level1 a.maximenuck, #obsInner ul.maximenuck li.maximenuck.level1 a.maximenuck:hover{
  	font-size: 13px !important;
    line-height: 4px !important;
  	color: #000000 !important;
  	background: #fff !important;
  	border-top-left-radius: 5px !important;
  	border-top-right-radius: 5px !important;
  	border-top: 1px solid #acacac !important;
  	border-left: 1px solid #acacac !important;
  	border-right: 1px solid #acacac !important;	
}
.obsMain p {
  	margin: 0!important;
}
.obsMain a {
  	display:block;
  	padding: 5px;
  	border-bottom: 1px solid #ececec;
}
.obsMain a:hover {
  	padding:5px;
  	background:#dcdcdc;
  	color: #000 !important;
  	border-radius: 5px;
  	border-bottom: 1px solid #666;
}
.obsMain img {
  	margin-top: 10px;
}
.obsStation p {
  	text-align: left !important;
}
.obsStation span {
  	display:inline;
  	float:left;
  	width: 120px !important;
  	margin: 10px;
}
.obsAttribution a:hover {
  	text-decoration: none !important;
  	background: none !important;
}
#obsMap .ol-attribution {
  	display: none;
}
.logoheader #logo img {
  	z-index: 1300 !important;
}
#nav .left1 {
  	position:relative !important;
  	display: inline !important;
  	float: left !important;
}
#nav.left1 ul.nav.menu li ul li {
  	border-bottom: 1px solid #acacac !important;
}
.cliRainMap{
  	width:100%;
  	max-width:900px;
    margin-left: auto !important;
  	margin-right: auto !important;
}
.bannerRainfall {
  	background:#ececec;
  	padding: 8px;
  	font-size: 12px;
  	font-weight:bold;
  	border: 1px solid #acacac;
  	border-radius: 5px;
  	-moz-box-shadow: inset 0 15px 15px -15px #28662c;
    box-shadow: inset 0 15px 15px -15px #28662c;
}
.bannerRainfall a:link {
  	color: #1a3867;
}
.bannerRainfall a:hover, .bannerRainfall a:focus {
  	background: none !important;
  	color: #761a1a !important;
}
.bannerCyclone {
  	background:#ececec;
  	padding: 8px;
  	font-size: 12px;
  	font-weight:bold;
  	border: 1px solid #acacac;
  	border-radius: 5px;
  	-moz-box-shadow: inset 0 30px 30px -30px #242424;
    box-shadow: inset 0 30px 30px -30px #242424;
}
.bannerCyclone a:link {
  	color: #1a3867;
}
.bannerCyclone a:hover, .bannerCyclone a:focus {
  	background: none !important;
  	color: #761a1a !important;
}
#tropicalCylone {
  	padding: 30px;
}
#tropicalCylone ul {
  	display: block;
}
#tropicalCylone ul li a:hover {
  	background: none !important;
  	color: #175a36 !important;
  	font-weight:bold;
}
.cliReportTitle {
  	display:block !important;
  	background: #c5d8f8;
  	color:#ba0909;
  	max-width: 220px;
  	padding: 5px 5px 5px 15px;
  	border: 1px solid #acacac;
  	border-radius: 5px;
}
.mapLinks {
  	float:right;
  	width: 80px !important;
  	border: none !important;
}
.mapLinks a:hover {
  	opacity: 0.8;
  	background: none;
}
.mapsCharts {
  	width:80%; 
  	max-width:80%; 
  	margin-left:auto !important;
  	margin-right:auto !important;
  	background:#dcdcdc;
  	text-align:center;
  	padding:15px;
  	border-radius:20px;
}
.mapsCharts a:hover, .mapsCharts a:focus {
  	background: none !important;
  	opacity:0.8;
}
.MsoNormal a:hover,.MsoNormal a:focus {
  	background: none !important;
  	color:#6d0b0b !important; 
  	font-weight:bold;
}
.earthIntro , .volIntro, .cliIntro, .weaIntro {
  	padding:5px;
  	-webkit-box-shadow: 0 8px 6px -6px #666;
	   -moz-box-shadow: 0 8px 6px -6px #666;
	        box-shadow: 0 8px 6px -6px #666;
}
.volIntro, .cliIntro {
  	margin: 10px 0px 10px 0px;
}
.volBanner {
  	border: 1px solid #acacac;
}
.volBanner h3 {
  	display:block;
  	background: #fbcbdf;
  	padding:5px;
  	font-size: 13px;
  	font-weight: bold;
  	
  	color: #1a3867;
  	-moz-box-shadow: inset 0 15px 15px -15px #555;
    box-shadow: inset 0 15px 15px -15px #555;
}
.volBanner ul {
  	margin-left: -3px !important;
}
.bannergroup .volBanner ul li {
  	list-style: none !important;
  	margin: 5px 0px 5px 0px;
	border: none !important;
  	text-decoration: none !important;
}
.ui-accordion-header, .ui-accordion-content {
  	border: none !important;
}
.ui-accordion-header {
  	margin:-7px 0px 0px 0px !important;
  	background: transparent !important;
  	opacity: 0.8 !important;
}
.ui-accordion-header-active, .ui-accordion-header span:hover {
  	opacity: 1 !important;
}
.volcanoResource {
  	display: inline;
  	float:left;
  	width:90%;
  	max-width:320px;
  	padding: 10px;
  	margin: 15px;
  	border: 1px solid #acacac;
  	border-radius: 8px;
  	background: #ececec;
}
.volcanoResource p {
  	margin: 3px !important;
}
.volGloss {
  	font-size: 10pt;
  	font-weight: bold;
  	font-family: arial,helvetica, sans-serif;
  	background: #095197;
  	color: #ececec;
  	border-radius: 10px;
  	padding: 0px 4px 0px 6px;
  	width:10px;
}
.volGlossm {
  	font-size: 10pt;
  	font-weight: bold;
  	font-family: arial,helvetica, sans-serif;
  	background: #095197;
  	color: #ececec;
  	border-radius: 10px;
  	padding: 0px 6px 0px 4px;
  	width:10px;
}
.divGloss ul li {
  	padding: 3px 0px 3px 0px !important;
}
.volInfoLogo img {
  	display: inline-block !important;
  	width: 25px !important;
  	float: right;
  	color: #fff !important;
}
.jwlogo {
  	
  	opacity:0.8 !important;
  	width: 60px !important;
}
.jwpreview, .jwvideo, .avPlayerWrapper,.avPlayerContainer  {
  	background: #dcdcdc !important;
  	width: 100% !important;
  	max-width: 800px !important;
}

.avPlayerWrapper,.avPlayerContainer {
  	border: none !important;
}
video {
  	transform: scale(1,1) !important;
}
.vidFrame {
  	background: #555;
  	-webkit-box-shadow: 0 8px 6px -6px #666;
	   -moz-box-shadow: 0 8px 6px -6px #666;
	        box-shadow: 0 8px 6px -6px #666;
}
.tcForm {
  	margin-left: auto !important;
  	margin-right: auto !important;
  	width: 60%;
    background:#ececec !important;
  	color: #000 !important;
  	display:block;
    border-radius: 8px !important;
    margin: 20px;
  	padding: 15px;
  	border: 1px solid #acacac;
}
.tcform h4 {
  	font-weight: bold !important;
}
.tcForm select, .tcForm option {
  	width: 450px !important;
}
#logo {
	width:70% !important;
  	max-width: 650px !important;
}
#logo .header1 {
  	z-index: 1500 !important;
  	top: -40px !important;
  	font-size: 120% !important;
  	font-family: 'Biko', sans-serif !important;
}
@media screen and (max-width: 400px) {
	#logo .header1 { font-size:70% !important;}
}
@media only screen and (max-width: 600px) {
  	#logo .header1 { font-size:70% !important;}
}

@media only screen and (max-width: 768px) {
  	#logo .header1 { font-size:80% !important;}
}

@media only screen and (max-width: 992px) {
  	#logo .header1 { font-size:80% !important;}
}

.tcforecast {
  width: 90%;
  max-width: 700px;
  margin-left: auto !important;
  margin-right: auto !important;
  height: auto !important;
  background: #ececec;
  border: 1px solid #acacac;
  border-radius: 10px;
  padding:15px;
}
.tcforecast iframe {
   width: 100% !important;
   height: 2000px !important;
}
.cliStatusFront {
  	display: inline;
  	float: left;
  	width: 100%;
  	max-width: 300px;
}
.cliStatusFront p {
  	color: #acacac;
  	text-align: left;
  	padding:20px;
}
.cliStatusFront img {
  	padding: 20px;
}
.cliStatusFront h2 {
  	color: #dcdcdc;
  	text-align:left !important;
}

.cliStatusFront {
  	margin-top: 15px;
  	display: block !important;
}

.volStatusFrontCont {
  	display: inline;
  	float: left;
  	width: 100%;
  	max-width: 300px;
}
.volStatusFrontCont ul li {
  	list-style: none !important;
  	text-align: left;
  	color: #acacac;
  	font-size: 1.2em;
}
.volStatusFrontCont ul li .col-md-3 {
    font-weight:bold;
  	padding-right: 30px !important;
  	font-size:1.4em;
  	color: #fff !important;
}

/*VERTICAL JQUERY UI TAB*/

.ui-tabs-vertical { width: 100%;  position: relative;}
  .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
  .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
  .ui-tabs-vertical .ui-tabs-nav li a { display:block; width: 84%; }
  .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; }
  .ui-tabs-vertical .ui-tabs-panel { padding-top: 0em;padding-right: 1em;padding-left: 1em;padding-bottom: 1em; float: right; width: 65%;}
​

/*VERTICAL MODAL*/
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

/* Bootstrap Modifications */
.modal-header {
  background: linear-gradient(90deg,#0c4da2,#FFF)!important;
}

.modal-title {
  color: white !important;
}

.modal-backdrop
{
    opacity:0 !important;
}

.ui-widget-header{
  background: #281fa7 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x !important;
}

.weatherTableHeader {
  width:50%;
  text-align:right;
  vertical-align: middle;
}

.weatherTableData {
  width:50%;color: #000000 !important;
  vertical-align: middle;
}

.weatherTableData img{
  width:48px !important;
  height: 48px;
}

/******FRONT MAP********************/
#fontMap{
  transform: translate(-45%, -45%);
}

.ui-widget-header {
  border: 1px solid #e9e9e9 !important;
  background: #e9e9e9 !important;
  color: black !important;
  font-weight: bold !important;
}

.ui-state-active a {
    color: white;
    text-decoration: none;
}

.ui-state-active a:link {
    color: white !important;
    text-decoration: none;
    background:  linear-gradient(45deg, #337ac7, #337ac7, white) !important;
}

.ui-state-hover a {
   border: 1px solid #337ac7 !important;
    color: #337ac7 !important;
    text-decoration: none;
    background:  white !important;
}

#Forecastinfo  { /*Forecast info for front page*/
    display: block;
    position: absolute;
    left: 0.5em;
    top: 75em;
    color: white;
    font-family: arial,sans-serif;
    width: 300px;
    font-size:0.8em;
    padding: 10px 10px 10px 30px;
}
.ForecastUpdateTime{
  font-size: 1em;
  font-weight: bold;
}

.infoCities p{
  font-size:10px;
  font-family: sans-serif;
  font-style: normal;

}

.WeatForCitiesName{
  font-style:bold;
  color: #0A91C2;
}
.windCities{
  color: #0A91C2;
  font-size: 5px;
}

/*MARINE - WEATHER - BANNER WARNING CSS*/
.ForcastWarningText h5{
  font-style: bold;
}

.sevenDayTable{
  max-width: 400px !important;
  width: 100% !important;
  float: left;
  white-space: pre-wrap;
  margin-left: 20px;
  border:1px dotted grey;
  border-radius: 10px;
}

.sevenDayTable th{
  background-color: linear-gradient(45deg, #337ac7, white) !important;

}


.sevenDayTable tr:last-child td:first-child {
    border-bottom-left-radius: 10px !important;
    margin-bottom: -5px;
}

.sevenDayTable tr:last-child td:last-child {
    border-bottom-right-radius: 10px !important;
}

/*Responsive Main Menu - Grue Menu*/


#gruemenu.grue_190, #gruemenu.grue_190 ul, #gruemenu.grue_190 ul li, #gruemenu.grue_190 ul > li > a {
  font-size: 9px !important;
}

/**GRUE MENU CSS --start**/
#gruemenu.grue_190{
    background:linear-gradient(#014666,#02567e,#02699a) !important;
}

#gruemenu.grue_190 ul ul li a{
    background:#d2d2d2 !important;
}

#gruemenu.grue_190 > ul > li > a{
    color: white !important;
    text-transform: none !important;
}



ul.sidr-class-sub-menu{
    background: #014666 !important;
}

ul.sidr-class-sub-menu :hover{
    background: #02567e !important;
}

ul.sidr-class-sub-menu :link{
    background: #02567e !important;
}


div.sidr-inner ul li{
    background: background:linear-gradient(#014666,#02567e,#02699a) !important;
}

div.sidr-inner ul li a :visited{
    background: background:linear-gradient(#014666,#02567e,#02699a) !important;
}


.sidr{
    background: #014666 !important;
}

a.sidr-class-toggle-sidr-close::before {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    margin: 0;
    text-decoration: none;
    content: "x";
    background: #c57f25;
    padding: 2px 10px;
    border-radius: 0% !important; 
}

#gruemenu.grue_190 ul li a{
  font-family: arial,sans-serif !important;
  font-size: 12px !important;
  letter-spacing: -0.5px !important;
}

 #navigation-toggle{
  background: #061748 !important;
 }

 #gruemenu{
  z-index: 400 !important;
 }

/**GRUE MENU CSS --end**/

/**VAN2017 CSS start***/

#slidecaption {
     -webkit-animation-name: spinner;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 5s;
    animation-name: spinner;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 5s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
  /* WebKit and Opera browsers */ @-webkit-keyframes spinner {
    from
    {
        -webkit-transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(-360deg);
    }
} /* all other browsers */
@keyframes spinner {
    from {
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    to
    {
        -moz-transform: rotateY(-360deg);
        -ms-transform: rotateY(-360deg);
        transform: rotateY(-360deg);
    
    }
}

.item-612 a{
  background-color: #d5f6f6 !important;
  font-weight: bold !important;
}

/**blink start**/
@keyframes blink {
  50% { opacity: 0.0; }
}
@-webkit-keyframes blink {
  50% { opacity: 0.0; }
}

.item-612 a {
  animation: blink 0.5s step-start 0s infinite;
  -webkit-animation: blink 0.5s step-start 0s infinite;
}
/**blink end**/

.item-185 a,.item-186 a, .item-187 a, .item-188 a, .item-189 a, .item-190 a  {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeInLeftBig {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-2000px, 0, 0);
  transform: translate3d(-2000px, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInLeftBig {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-2000px, 0, 0);
  transform: translate3d(-2000px, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 


/**VAN2017 CSS end***/

/**NEWS FRONT start***/
.warningWrapSmart1 {
    width: 100%;
    max-width: 1150px;
    padding:1px;
    display:block;
    background:linear-gradient(to left,#083c64,#f7ec0f,#f7ec0f,#f7ec0f,#083c64);
    box-shadow: 0px 3px 3px #555;
}
/**NEWS FRONT end***/



/*Volcano Bulletin*/
.ui-tabs .ui-tabs-nav li a{
    padding: .2em 0.5em !important;
    clear: both;
}