/*
 * Copyright (c) 2014 NIBIO <http://www.nibio.no/>. 
 * 
 * This file is part of VIPSWeb.
 * VIPSWeb is free software: you can redistribute it and/or modify
 * it under the terms of the NIBIO Open Source License as published by 
 * NIBIO, either version 1 of the License, or (at your option) any
 * later version.
 * 
 * VIPSWeb is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * NIBIO Open Source License for more details.
 * 
 * You should have received a copy of the NIBIO Open Source License
 * along with VIPSWeb.  If not, see <http://www.nibio.no/licenses/>.
 * 
 */

/* 
    Document   : vipsweb.css
    Created on : Nov 7, 2013, 10:55:15 AM
    Author     : Tor-Einar Skog <tor-einar.skog@nibio.no>
    Description:
        Main stylesheet of the VIPSWeb web app. Cusomizes the bootstrap.css and 
        other frameworks (e.g. OpenLayers)
*/

.navbar{
	background-color: #fff;
	border: 0px none;
	border-radius: 0px;
	color: #222222 !important;
	margin-bottom: 0px;
	padding-top: 15px;
	min-height: 80px;
}

.navbar-brand {
	padding-top: 0px;
    padding-bottom: 0px;
    text-decoration: none;
	color: #222222 !important;
	font-weight: bold;
	font-size: large; 
}

.navbar-nav li a {
	color: #222222 !important; 
	font-weight: normal !important;
	font-size: large;
}

#siteTitle {
	margin-left: 0px; 
	padding-left: 0px; 
	padding-top: 13px; 
	font-size: 0.8em; 
	font-weight: normal;
	line-height: 130%;
}

.dropdown-header {
	font-size: 160%;
	color: white;
	background-color: #B6B8B5
}

.dropdown-menu {
	border-radius: 0px;
	padding: 0px;
	border: 0px none;
	background-color: #dddddd !important;
	z-index: 101;
}

.dropdown-menu li a, li.divider { 
	color: white; 
	font-weight: normal !important;
	font-size: medium !important;
	/*border-top: 1px solid #B6B8B5;*/
}

.dropdown-menu li a:hover {
	color: #295B40; 
	font-weight: normal;
	/**background-color: #31AB6E;*/
		background-color: #aaaaaa;
}


.navbar-nav li a:hover {
	color: #444444 !important; 
	font-weight: bold !important;
}

.navbar-nav li a.currentLink {
	/*color: #f7f6f2 !important;*/
	font-weight: bold !important;
	height: 65px;
	border-bottom: 4px solid #008136;
}

.navbar-nav .dropdown a .caret{
	border-top-color: #222222 !important;
}



.nav a
{
	text-decoration: none;
}

.navbar-default .navbar-nav>.open>a, 
.navbar-default .navbar-nav>.open>a:hover, 
.navbar-default .navbar-nav>.open>a:focus
{
	background-color: transparent;
	border-bottom: 0px none;
}

.navbar-toggle {
	margin-top: 8px;
	margin-bottom: 54px;
}

a.signinLink, a.signinLink:visited {
	color: #008136;

}

.featureInfo {
	display: none;
	position: absolute;
	background-color: white;
	border: 1px solid black;
	padding: 5px;
	transition: opacity 0.5s ease-out;
}

a.dropdown-toggle{
	height: 65px;
}

div.messages_illustration{
	
}
div.messages_illustration_caption{
	padding-top: 5px;
	color: #333;
	line-height: 130%;
	font-size: 95%;
	font-weight: 300;
}

#VIPSMobilLink {
	display: none;
}

/* Styles for OpenLayers forecast map */

#map{
	position: relative;
	width: 100%;
}
/* On mobile (small) devices: Limit the height of
 * the map so that you can scroll down the page
 * Also hide the map legend
 */
@media (max-width: 768px) and (max-height: 800px) 
{
	#map { max-height: 600px !important;}
	
}

@media (max-width: 768px) and (max-height: 600px) 
{
	#map { max-height: 400px !important;}
	#chartContainer {border-right: 15px dotted grey;}
	#scrollHelp{display:block !important;}
}

@media (max-width: 768px) and (max-height: 500px) 
{
	#map { max-height: 300px !important; }
	#warningLegend {display: none;}
	#observationLegend{display: none;}
}

@media (max-width: 768px) and (max-height: 400px) 
{
	#map { max-height: 200px !important;}
}

@media (max-width: 500px)
{
	#warningLegend {display: none;}
	#observationLegend{display: none;}
	#siteTitle {display: none;}
	#loginAndLanguageInfo {
		top: 70px !important;
		right: auto !important;
		left: 15px;
	}
}

@media (max-width: 768px)
{
	select.languageSelect {display:inline !important;}
	#languageSelectorIcon {display: none !important;}
	#VIPSMobilLink {
		display: inline-block !important;
		position: relative;
		top: 2px;
	}
}

@media (min-width: 992px)
{
	#mapContainer{
	border-left: 15px solid #d9e6e4;
	padding-left: 0px;
	padding-right: 0px;
	
	}
	#messageColRight{
		padding-left: 0px;
		padding-right: 0px;
	}
	
	
}

@media (max-width: 992px)
{
	#mapContainer{
	background-color: #d9e6e4;
	padding-bottom: 15px;
	}
	
	/* Moving the crop list out of the map for narrow screens */
	#cropList {
		position: inherit !important;
		z-index: inherit !important;
		margin: inherit !important;
		
		top: auto !important;
		right: auto !important;
		padding: 15px !important;
		margin-bottom: 15px !important;
		border: 0px none !important;
		background-color: white !important;
	}
	
	#cropList h3 {
		margin-top: 0px;
	}
	
	ul.cropList li  {
		float: left !important;
		padding-right: 10px;
	}
	
	ul.cropList {
		
		display: block !important;
		margin-bottom 15px !important;
	}
	
}


#tooltip{
    position: absolute;
    height: 1px;
    width: 1px;
    z-index: 100;
}



div.popover {
	min-width: 350px;
	max-width: 400px !important;
}

div.alert-nowarning{
	background-color: #dddddd;
}

div.alert-success{
	background-color: #79bd8b;
	color: black;
}

/*
.ol-attribution {
  top: 5px;
  left: 5px;	
  bottom:auto;
}*/

/*
.tooltip.in {
    opacity: 1;
    filter: alpha(opacity=100);
}
.tooltip.top .tooltip-arrow {
    border-top-color: white;
}
.tooltip-inner {
    border: 2px solid white;
}
*/
/* END Styles for OpenLayers forecast map */

body {
	 font-family: 'Source Sans Pro', sans-serif;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
{
	font-family: 'Source Sans Pro', sans-serif;
}

h1 {
	 font-size: 250%;
	 line-height: 100%;
	 /*font-family: "Bitter", Arial, Helvetica, sans-serif;*/
	 font-weight: 400;
	 font-style: normal;
	 width: 100%;
	 color: rgba(33, 37, 35, 1);
	 /*padding: 15px 0px 10px 0px;*/
}

p {
	 font-size: 16px;
	 line-height: 130%;
	 /*color: rgba(86, 91, 89, 1);*/
	 /*font-family: "Roboto", Arial, Helvetica, sans-serif;*/
	 font-weight: 400;
	 font-style: normal;
	 text-transform: none;
	 width: 100%;
}

p.weights {
	 letter-spacing: 2px;
	 font-size: 13px;
	 /*color: rgba(173,173,173,1);*/
	 margin-bottom: 35px;
	 border-width: 0px 0px 1px 0px;
	 border-style: dotted;
	 margin-top: 45px;
}

p.pullquote {
	 font-size: 16px;
	 line-height: 26px;
	 margin-bottom: 35px;
	 padding-left: 15px;
	 border-width: 0px 0px 0px 3px;
	 border-style: solid;
	 font-weight: 400;
	 color: rgba(33, 37, 35, 1);
	 border-color: #31ab6e;
	 font-family: "Bitter", Arial, Helvetica, sans-serif;
	 font-style: normal;
	 letter-spacing: 1px;
	 width: 90%;
}

p.heading {
	 letter-spacing: 2px;
	 font-size: 13px;
	 margin-bottom: 35px;
	 border-width: 0px 0px 1px 0px;
	 border-style: dotted;
	 margin-top: 45px;
	 /*color: rgba(19, 159, 181,1);*/
}

p.inverse-big {
	 color: rgba(255,255,255,1);
	 padding: 30px;
	 margin-bottom: 0px;
	 background-color: rgba(33, 37, 35, 1);
}

p.inverse-med {
	 background-color: rgba(33, 37, 35, 1);
	 color: rgba(255,255,255,1);
	 padding: 30px;
	 margin-bottom: 0px;
	 padding-top: 0px;
	 font-size: 15px;
}

p.inverse-small {
	 padding-top: 0px;
	 padding-left: 30px;
	 padding-right: 30px;
	 padding-bottom: 30px;
	 background-color: rgba(33, 37, 35, 1);
	 color: rgba(255,255,255,1);
	 font-size: 13px;
}

p.inverse-heading {
	 background-color: rgba(33, 37, 35, 1);
	 color: rgba(255,255,255,1);
	 padding: 30px;
	 margin-bottom: 0px;
	 padding-bottom: 0px;
	 font-size: 15px;
	 letter-spacing: 2px;
	 margin-top: 50px;
}

span.inverseSign {
	 display: inline-block;
	 background-color: #295B40;
	 border-radius: 5px;
	 color: rgba(255,255,255,1);
	 padding-left: 3px;
	 padding-right: 3px;
	 margin-left: 3px;
	 margin-right: 3px;
	 text-decoration: none !important;
	 font-weight: bold;
	 font-size: 80%;
}

span.timeseries-label {
	display: inline-block;
	background-color: #008136;
	font-family: monospace;
	border-radius: 5px;
	color: #FFFFFF;
	padding: 3px;
	text-decoration: none !important;
	font-size: 80%;
}

div.second {
	 /*font-family: "Roboto", Arial, Helvetica, sans-serif;*/
	 width: 320px;
}

div.first {
	/*font-family: "Roboto", Arial, Helvetica, sans-serif;*/
}

h1.mobile {
	 font-size: 44px;
	 line-height: 73px;
	 margin-bottom: 25px;
	 /*font-family: "Bitter", Arial, Helvetica, sans-serif;*/
	 font-weight: 400;
	 font-style: normal;
	 width: 100%;
	 color: rgba(49, 171, 110, 1);
}

p.byline {
	 font-size: 12px;
	 line-height: 26px;
	 color: rgba(173, 173, 173, 1);
	 /*font-family: "Roboto", Arial, Helvetica, sans-serif;*/
	 font-weight: 400;
	 font-style: normal;
	 text-transform: uppercase;
	 letter-spacing: 2px;
	 margin: 0px 0px 8px 0px;
}

a, a:hover {
	color: #008136;
	text-decoration: underline;
}


p.lead {
	 font-size: 20px;
	 line-height: 30px;
	 color: rgba(19, 159, 181, 1);
	 /*font-family: "Roboto", Arial, Helvetica, sans-serif;*/
	 font-weight: 300;
	 font-style: normal;
	 text-transform: none;
	 margin: 0px 0px 34px 0px;
	 width: 100%;
}

thead {
	/*font-family: "Roboto", Arial, Helvetica, sans-serif;*/
}

footer {
	padding: 30px 35px 35px 35px;
	/*border-top: 4px solid #9f9f9f;*/
	
	background-color: #fff;
}

footer p {
	color: #222222 !important;	
	 line-height: 14px;
	 margin-bottom: 10px;
}

footer p, footer a,footer a:visited{
	/*color: white;*/
	font-size: 12px;
}

footer a:hover {
	color: rgba(49, 171, 110, 1);
}

ul.cropList input[type="checkbox"] {
    display:none;
}
ul.cropList input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url("./icons/checkbox_unchecked.png") left top no-repeat;
    cursor:pointer;
}
ul.cropList input[type="checkbox"]:checked + label span {
    background:url("./icons/checkbox_checked.png") left top no-repeat;
}

ul.cropList input[type="radio"] {
    display:none;
}
ul.cropList
input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url("./icons/checkbox_unchecked.png") left top no-repeat;
    cursor:pointer;
}
ul.cropList input[type="radio"]:checked + label span {
    background:url("./icons/checkbox_checked.png") left top no-repeat;
}

ul.cropList, ul.linkList{
	list-style: none;
	margin-left: 0px;
	padding-left: 0px;
}

ul.cropList li {
	float: left;
	
}

ul.cropList.single li {
	float: inherit;
	
}

ul.cropList.double li { width: 50%;}

div.messages_illustration {
	margin-top: 15px;
}

select.languageSelect {
	color: #222222;
	width: auto !important;
	padding: 4px !important;
	border: 0px none;
	box-shadow: none;
	font-weight: bold;
	/*background-color: #31ab6e;
	border-color: #31ab6e;*/
}

div.forecastSummaries {
		
}

#frontPageRightCol{
	overflow-y:auto;
}

#forecastSummariesTable, #myForecastSummariesTable, #forecastSummariesPopoverTable {
	/*max-height: 210px;*/
	/*overflow-y: auto;*/
	width: 95%;
	border-collapse: separate;
	border-spacing: 2px;
	/*cursor: pointer;*/
	/*max-height: 200px;
	overflow-y: auto;*/
}

#forecastSummariesTable {
	display: none; /* When visible: block, not table */
}


td.forecastStatus {
	width: 14%;
	height: 15px;
	border: 3px solid;
}

td.forecastStatus.s0 {
	border-color: #ADADAD;
	
}

td.forecastStatus.s1 {
	border-color: #0078FD;
	background:url("./icons/forecast_status_1.png") center no-repeat;
}

td.forecastStatus.s2 {
	border-color: #00B457;
	background:url("./icons/forecast_status_2.png") center no-repeat;
} 

td.forecastStatus.s3 {
	border-color: #FDCA00;
	background:url("./icons/forecast_status_3.png") center no-repeat;
}

td.forecastStatus.s4 {
	border-color: #E90D00;
	background:url("./icons/forecast_status_4.png") center no-repeat;
}

td.forecastSummaryCellToday {
	background-color: #888888;
	color: white;
	font-weight: bold;
}

tbody.forecastSummaryRowGroup{
	display:inline-table;
	width: 100%;
}

tr.forecastSummaryDateRow {
	text-align: center;
}

tbody.forecastSummaryRowGroup:hover {
	background-color: #dddddd;
	/*border-color: #dddddd;
	font-weight: bold;*/
}

tbody.forecastSummaryRowGroup tr:not(:first-child){
	cursor: pointer;
}

#observationLegendHeading {
	margin-left: 12px; 
	margin-right: 10px;
	font-weight:bold;
}

#warningLegend, #observationLegend, #cropList, #mapLayerSelector
{
    position: absolute;
    
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(255, 255, 255);
    /* RGBa with 0.6 opacity */
    background: rgba(255, 255, 255, 0.6);
    padding-right: 10px;
    padding-top: 16px;
    font-size: small;
    z-index: 100;
    border: 1px solid #aaaaaa;
    border-radius: 5px;;
    
}

.mapBoxPlacement_1 {
	top: 70px;
    left: 25px;
}

.mapBoxPlacement_2 {
	top: 45px;
    right: 25px;
}

.mapBoxPlacement_3 {
	bottom: 10px;
    left: 25px;
}

.mapBoxPlacement_4 {
	bottom: 45px;
    right: 25px;
}


#warningLegend ul li span {
            position: relative;
            top: -7px;
}
#warningLegend ul li.warning_2, ul.popupWarningList li.warning_2
{
    list-style-image: url("icons/station_icon_status_2.png");
}
#warningLegend ul li.warning_3, ul.popupWarningList li.warning_3
{
    list-style-image: url("icons/station_icon_status_3.png");
}
#warningLegend ul li.warning_4, ul.popupWarningList li.warning_4
{
    list-style-image: url("icons/station_icon_status_4.png");
}
#warningLegend ul li.warning_0, ul.popupWarningList li.warning_0
{
    list-style-image: url("icons/station_icon_status_0.png");
}
#warningLegend ul li.warning_1, ul.popupWarningList li.warning_1
{
    list-style-image: url("icons/station_icon_status_1.png");
}

#observationLegend ul {
	list-style-type: none;
	margin-left: 0px;
	padding: 0px 0px 5px 15px;
	
}

td.tableCellWarningStatus_0 {background-color: #C9C9C9 !important;}
td.tableCellWarningStatus_1 {background-color: #4DA0FE !important;}
td.tableCellWarningStatus_2 {background-color: #6FC49A !important;}
td.tableCellWarningStatus_3 {background-color: #FEDA4D !important;}
td.tableCellWarningStatus_4 {background-color: #F0564D !important;}

td.dateCell {
	width: 85px;
}

#emptyForecastSummariesTableInfo{
	font-size: smaller;
	
}

#languageSelectorIcon {
	padding-top: 10px;
	padding-left: 5px;
	cursor: pointer;
}

#myForecastSummariesContainer, #forecastConfigurationSummarySortByForm {
	display: none;
}

#loginAndLanguageInfo {
	position: absolute;
    top: 0px;
    right: 5px;
    /*background-color: #31ab6e;*/
    padding: 0px 3px;
    font-size: small;
}

#loginAndLanguageInfo label {
	font-weight: normal;
}

#signInAndOut {
	display: inline;
	
}

#loginAndLanguageInfo label, #signInAndOut{
	position: relative;
	top: 2px;
}

#mapAndForecastRow{
	background-color: white;
}

#observationTimeSeriesDetails .label, #observationDetails .label  {
	color: #969696;
	font-size: 1.2em;
	padding: 0;
	font-weight: lighter;
}

#observationData table {
	margin: 8px 0px;
}

#observationData td {
	border: 1px solid #C9C9C9;
	padding: 2px 10px;
}

table.messageTable tr, table.messageTable td
{
	background-color: white;
	text-align:left;
}

#cropList 
{
	top: 25px;
	right: 25px;
	padding: 0px 15px;
}

#mapLayerSelector
{
	top: 7px;
	left: 41px;
	padding: 5px 10px;
}

.favouriteToggle{
	color: #008136;
	cursor:pointer;
}

.singleBlockContainer {
	margin-bottom: 15px;
	margin-top: 15px;
	padding: 15px;
	background-color: white !important;
}

div.tab-content {
	background-color: white;
	padding: 30px;
	margin-bottom: 15px;
}


ul.nav-tabs>li>a, ul.nav-tabs>li.active a{
	border: 1px solid white;
	border-radius: 0;
	margin: 0px;
}

ul.nav-tabs li a {
	background-color: #ddd;
	color: black;
}

ul.nav-tabs {
	border-bottom: 0px none;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{
	border: 1px solid white !important;
	background-color: #008136;
	color: white;
}

div.input-group-addon {
	background-color: #008136;
	color: white;
}

button.btn-primary {
	background-color: #008136;
	color: white;
}

button.btn-info {
	background-color: #79bd8b;
	color: white;
}

table.table {
	border-collapse: collapse;
}

table.table > tbody > tr > td {
	background-color: white;
	border-bottom: 3px solid #d9e6e4;
}

.table thead>tr>th {
	border-bottom: 3px solid #d9e6e4;

}

ol.breadcrumb {
	background-color: transparent;
	
}

ul.nav > li > ul.nav{
	margin-left: 10px;
	
}

.nav>li>span.active {
    position: relative;
    display: block;
    padding: 10px 15px;
}

div.advertisement {
	border: 3px solid #008136;
	padding: 10px 20px 25px 25px;
}