/* CSS Document */
*{
	box-sizing: border-box;
}

.hidden{
	display: none;
}
.small-text{
	font-size: 75%;
}

html, body{
	width: 100%;
}
body{
	background: #181818;
	
	font-family: Ubuntu;
	font-size: 16px;
	color: #eee;
	
	padding: 16px;
	margin: 0;
}

a{
	color: #F9D783;
}
a:hover{
	color: #ECE7DD;
}

button{
	background: #444;
	border: 1px solid #666;
	border-radius: 4px;
	
	padding: 2px 8px;
	margin: 0 2px;
	
	color: #ccc;
	cursor: pointer;
	
	transition: background 0.2s, border-color 0.2s;
}
button:disabled{
	background: #555;
	border-color: #666;
	
	color: #888;
	cursor: default;
}
button:hover{
	background: #555;
	border-color: #999;
}
button:active{
	background: #333;
	border-color: #555;
}
button.selected{
	background: #666;
	color: #fff;
}

label{
	display: inline-block;
	width: 80px;
}
select, input{
	background: #333;
	border: 0 none;
	
	padding: 4px;
	margin: 1px 4px;
	
	color: #ccc;
	transition: background 0.25s;
}
select{
	padding: 2px 4px;
}
input[type="checkbox"]{
	width: auto !important;
	vertical-align: middle;
}
input[type="number"]{
	text-align: center;
	width: 80px;
}
input[type="date"]{
	width: 120px;
}
select:hover, input:hover{
	background: #444;
}
select[disabled]:hover, input[disabled]:hover{
	background: #333;
}

table{
	width: 100%;
	font-size: 90%;
	border-collapse: collapse;
}
table thead tr th{
	background: #444;
	border: 2px solid #282828;
	border-width: 2px 0 0 2px;
	
	font-weight: normal;
	
	padding: 4px 8px;
}
table tbody tr td{
	background: #333;
	border: 2px solid #282828;
	border-width: 2px 0 0 2px;
	
	padding: 4px 8px;
}
table tbody tr:hover td{
	background: #444;
}

#container{
	width: 100%;
	display: grid;
	
	grid-template-columns: minmax(370px, auto) minmax(300px, auto) minmax(300px, auto) minmax(480px, auto);
	grid-template-rows: auto;
	grid-template-areas: "plot 			plot 		plot 		plot"
						 "limits 		cumulated 	recession 	adnl"
						 "webcam 		webcam 		webcam		meteo";
						 
	
	grid-gap: 8px;
	place-items: stretch stretch;
	justify-content: stretch;

}
section{
	background: #282828;
	padding: 16px;
	border-radius: 8px;
}
section[disabled]{
	background: #555;
}
section h1{
	font-size: 120%;
	margin: 0 0 16px 0;
	text-align: left;
}
section p{
	margin: 8px 0;
}
section span{
	display: inline-block;
	
	width:88px;
}

#plot{
	grid-area: plot;
	background: #fff;
}
#limits{
	grid-area: limits;
}
#cumulated{
	grid-area: cumulated;
}
#recession{
	grid-area: recession;
}
#adnl{
	grid-area: adnl;
}
#webcam{
	grid-area: webcam;
}
#webcam img{
	max-width: 100%;
}
#meteo{
	grid-area: meteo;
	text-align: center;
}
#new-hike{
	grid-area: new-hike;
}
#calendar{
	grid-area: calendar;
}

#new-hike input{
	width: 160px;
}
#new-hike button{
	margin: 0 4px;
}
#calendar table{
	table-layout: fixed;
}
#calendar table td{
	text-align: center;
	height: 60px;
	vertical-align: top;
}
#calendar table tbody tr td.newmonth{
	border-top: 2px solid #ccc !important;
}
#calendar table tbody tr td.newmonthleft{
	border-left: 2px solid #ccc !important;
}
#calendar table tbody tr td p{
	margin: 0;
}
#calendar table tbody tr td p.prcp{
	margin: 8px 0;
}