/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

@import url(http://fonts.googleapis.com/css?family=Montserrat);
@import url(http://fonts.googleapis.com/css?family=Cabin);

html, body {margin: 0 auto; overflow: overlay}

#title {min-width: 360px; display: flex; justify-content: center; margin: 0 auto; width: 100%; text-align:center; }
#logo {min-width: 100px; width: 100px; height: 100px}
#title-left {display:flex; flex-direction: column; justify-content: center; max-width: 400px; width: 400px; text-align: center;}
#title-left a {text-decoration:none; font-size:2.2rem; color:black; font-family: 'Cabin', sans-serif; display: block}
#title-left a+a {display: block; font-size: 1.4rem}
#title-left a:hover {text-decoration:none}
#title-left a+a:hover {text-decoration:none}
#title-right {display: flex; flex-direction: column; justify-content: center; min-width: 130px; font-family: 'Cabin', sans-serif; font-size: 45px; font-weight:bold}

.periode {margin: 10px auto; width: 360px; text-align: center; font-family: Arial;}
.periode a{text-decoration:underline; color:#000; font-weight:bold}
.periode a:hover {text-decoration:none;color:#8fadcc; font-weight:bold;}

.sunrise_sunset {font-family: Arial; font-size: 15px; font-weight:bold; display:flex;align-items:center; justify-content: center;}
.sunrise_sunset img {margin-left: 5px;margin-right: 5px;}

#bloc1 {min-width: 360px; margin: 0 auto; width: 440px; text-align:center; font: bold 1.1em Arial; padding: 7px 0; border: 1px solid rgba(0,0,0,0.1); border-bottom-width: 0px; box-sizing: border-box;border-top-left-radius: 6px; border-top-right-radius:6px}
span {padding-left: 5px}
select {border-radius: 5px; font-weight: bold; font-family: 'Cabin', sans-serif}
select:hover {cursor: pointer}
input {margin-left: 10px; border-radius: 5px; padding: 2px 7px 2px 7px}
input:hover {cursor: pointer}

#bloc2 {min-width: 360px; display: flex; align-items:center;  margin: 0px auto 10px auto; width: 750px; font-size: 0; font-family: 'Cabin', sans-serif; padding: 15px 5px; border:1px solid rgba(0,0,0,0.1); box-sizing: border-box; border-radius:6px; box-shadow: 2px 2px 5px 0 #D8E4EB}
#bloc2 a {text-decoration:none; color:#000}
#bloc2 a:hover {color:#8fadcc}
#bloc3 {text-align:center; margin: 0px auto 10px auto; width: 750px; font-size: 15px; font-family: 'Cabin', sans-serif; padding: 15px 5px; border:1px solid black; box-sizing: border-box; background-color: rgb(255,255,245)}
.date {display:inline-block; height: 100%; text-align: center; font-size: 25px; font-weight: bold; width: 60%; box-sizing: border-box; padding: 0 5px;}
.datedep {display:inline-block; text-align: center; font-size: 15px; width: 20%; box-shadow:inset 0 0 0 1px #0000006b, 0 0 5px 1px #cccccc; line-height: 30px; box-sizing: border-box; border-radius: 4px; background-color:white; height: 30px;}

#bloc4 {min-width: 360px; margin: 0px auto 10px auto; width: 750px; font-family: 'Cabin', sans-serif; padding: 15px 5px; border:1px solid rgba(0,0,0,0.1); box-sizing: border-box; border-radius:6px; box-shadow: 2px 2px 5px 0 #D8E4EB; background-color: #8fadcc5c; text-align: center;}


#infos, #data, #data_month {min-width: 360px; border-radius:6px; box-sizing: border-box; margin: 7px auto; width: 750px; text-align:center; border: 1px solid rgba(0,0,0,0.1); font-family: 'Montserrat', sans-serif; box-shadow: 2px 2px 5px rgba(0,0,0,0.1);}
.row-title {display: flex; padding: 5px 0; font: bold 1.2em Arial; background-color: #8fadcc5c; }
.row {display: flex;}
.row_tab {display: flex; cursor: pointer}
#infos .cell {width: 33%; padding: 4px 0}
#infos .row .cell { width: 33%; padding: 10px 0}
#data .cell {width: 25%; padding: 1px 0; display: flex; align-items: center;justify-content:center}
#data .cell img{margin-right: 5px;}
#data_month .cell {width: 25%; padding: 1px 0; display: flex; align-items: center;justify-content:center; font-weight: bold}
#data_month .cell:nth-of-type(2), #data_month .cell:nth-of-type(3) {justify-content:right}
.cell a {color: #8fadcc; text-decoration: none}

#tmin {font: bold 1.2em arial; color: blue}
#tmin_histo {font: bold 1.5em arial; color: blue}
#tmin p {font-size: 0.6em}
#tmax {font: bold 1.2em arial; color: orangered}
#tmax_histo {font: bold 1.5em arial; color: orangered}
#tmax p {font-size: 0.6em}

#tmin1 {font: normal 1.0em arial; color: blue}
#tmin1 p {font-size: 0.6em}
#tmax1 {font: normal 1.0em arial; color: orangered}
#tmax1 p {font-size: 0.6em}

#pp {font: bold 1.5em arial; color: darkblue; vertical-align: middle}

#graphique {margin: 10px auto; border-radius:6px; min-width: 360px; text-align: center; width: 750px; border: 1px solid rgba(0,0,0,0.1); box-shadow: 2px 2px 5px rgba(0,0,0,0.1); box-sizing: border-box;}

#vigilance {display: flex; align-items: center; flex-direction: column;}
#netatmo_map {display: flex; align-items: center; flex-direction: column;}

.rain_tot {font: bold 1.5em arial;}

.version {margin: 0 auto; padding-top:10px; width: 200px;font-family: 'Montserrat', sans-serif; font-size:10px; text-align:center; color: lightgrey; font-style: italic;}

.new {
	background-color: yellow;
    color: red;
    font-weight: bold;
    padding: 2px;
    margin-left: 5px;
    border-radius: 5px;
}

#tmin_norm, #tmax_norm {display: flex; align-items: center; justify-content: center;} 
.norm_red {font-size:16px; font-weight: bold}
.norm_blue {font-size:16px; font-weight: bold}
.norm_diff {color: white; border-radius:4px; padding:5px; font-size:12px; font-weight: bold; min-width: 48px}
.norm_diff_red {background-color: red;}
.norm_diff_blue {background-color: blue;}
.norm_diff_green {background-color: green;}
#data .norm_diff_red { min-width: 48px}
#data_month .norm_diff_red { margin-left: 5px}
#data .norm_diff_blue { min-width: 48px}
#data_month .norm_diff_blue { margin-left: 5px}

@media only screen and (max-width: 750px) {
	#bloc2, #infos, #data, #graphique, #bloc4, #data_month {max-width: 100%; border-radius:0px;}
	#bloc1 {border-radius:0px;}
	#graphique img {width: 100%}
}
@media only screen and (max-width: 650px) {
	#logo {min-width: 70px; height: 70px}
	#title-right {font-size: 28px; }
	#title-left a {font-size: 22px;}
	#title-left a+a {font-size: 22px;}
	#bloc1 {font-size: 12px; width: 100%; }
	.datedep {font-size: 12px; min-width: 90px;}
	.date {font-size: 18px;}
	.cell {font-size: 14px;}
	#tmax1, #tmin1 {font-size: 14px;}
	#tmax, #tmin, #pp {font-size: 16px;}
}
@media only screen and (max-width: 450px) {
	.date {font-size: 15px;}
	#logo {min-width: 55px; height: 55px}
	#title-left a {font-size: 17px;}
	#title-left a+a {font-size: 17px;}
}