body {
	background-color: #EEE;
	margin:0;
	padding:0;
	font-size:12px;
	font-family:Helvetica;
}

#content {
	left:0;
	right:0;
	bottom:0;
	top:100%;
	position:fixed;
	background-color: #FFF;
	display:none;
}

#login_container {
	left:0;
	right:0;
	bottom:0;
	top:0;
	position:fixed;
	background-color: rgba(150, 150, 150, 0.7);
	display:none;
}

#login_form {
	top:0;
	bottom:0;
	right:0;
	left:0;
	margin-left: auto;
	margin-right: auto;
	margin-top: 125px;
	background-color: #ddd;
	height: 150px;
	width: 200px;
	padding: 20px;
	position:absolute;
	font-size:1.4em;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

#login_form  h3  {
	margin: 0;
	margin-bottom: 10px;
}

#home {
	top:0;
	bottom:0;
	right:0;
	left:0;
	position:absolute;
	display: none;
}

#home div.ad {
	top: 200px;
	left: 25px;
	position: absolute;
	width: 200px;
}

#home_container {
	margin-left: auto;
	margin-right: auto;
	margin-top: 125px;
	width: 630px;
	height: 275px;
	padding: 10px 10px;
}

#menu_bar {
	top:0;
	bottom:0;
	right:0;
	left:0;
	margin-left: auto;
	margin-right: auto;
	margin-top: 125px;
	width: 625px;
	height: 220px;
	position:absolute;
	background-color: #FFF;
	border: 1px solid #DDD;
	border-radius: 10px;
	padding: 10px 10px;
}

#indicator {
	top: 24px;
	left: 19px;
	background-color: #eee;
	border: 1px solid #DDD;
	border-radius: 5px;
	height:80px;
	width:125px;
	position: absolute;
	display:none;
}

#home_date {
	background-color: #ccc;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	height: 45px;
}

#home_date label {
	top: 10px;
	position: relative;
	display: block;
	text-align: center;
	font-size:1.6em;
}

#home_buttons {
	background-color: #ccc;
	height: 90px;
	clear: both;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

#btnMenu {
	width:80px;
	height:80px;
	margin: 5px;
	background: url(../images/details.png) no-repeat transparent;
	background-size:contain;
	float: left;
}

#btnMeteo {
	width:80px;
	height:80px;
	margin: 5px;
	background: url(../images/meteo.png) no-repeat transparent;
	background-size:contain;
	float: right;
}

div.home-item {
	position: relative;
	height:90px;
	width:315px;
	float: left;
}

div.chart {
	background: url(../images/chart_bar.png) no-repeat transparent;
}

div.table {
	background: url(../images/table.png) no-repeat transparent;
}

div.home {
	background: url(../images/home.png) no-repeat transparent;
}

div.schema_icon {
	background: url(../images/schema.png) no-repeat transparent;
}
div.alert_icon {
	background: url(../images/alert.png) no-repeat transparent;
}

div.comparator_icon {
	background: url(../images/comparator.png) no-repeat transparent;
}

div.link_icon {
	background: url(../images/link.png) no-repeat transparent;
}

div.icon
{
    background-position: 50% 100%;
	width:48px;
	height:48px;
	margin: 20px auto 5px;	
}

div.item {
	position: relative;
	color:#BBB;
	text-align:center;
	font-size:1.1em;
	height:100px;
	width:125px;
	float: left;
}

div.item a {
	text-decoration: none;
	color:#BBB;
}

div.hover, div.active{
	color:#888;
	cursor:pointer;
}

div.hover a, div.active a {
	color:#888;
	cursor:pointer;
}

div.hover > div.icon, div.active > div.icon {
    background-position: 50% 0;
}

div.hover a > div.icon, div.active a > div.icon {
    background-position: 50% 0;
}

#chart_div {
	margin:20px;
}

#logo {
	top: 20px;
	left:50%;
	margin-left:-300px;
	width:300px;
	height:100px;
	position: absolute;
	font-size: 1.3em;
}

#logo_title {
	font-size: 3em;
}

#logo_subtitle {
	font-size: 1.5em;
}

#contact {
	color: #444;
	position:absolute;
	left:320px;
	top:1px;
}
#contact > a{
	color: #444;
}

.schema {
	max-width: 800px;
	max-height: 800px;
	margin: auto;
	position: relative;
}

#schema_container div.ad {
	top: 165px;
	left: 25px;
	position: absolute;
	width: 200px;
}

#pages {
	margin:auto;
	min-width:800px;
	max-width:1200px;
	padding-top:20px;
}

#container {
	width:100%;
	top:37px;
	bottom:0;
	position:absolute;
	overflow:auto;
}

#toolbar {
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	background-color: #EEE;
	height: 35px;
	position:absolute;
	width:100%;
}

#datepicker {
	position:absolute;
	display:block;
	left: 50%;
	margin-top:5px;
	margin-left:-220px;
	width:150px;
	text-align:center;
	font-size: 1.5em;
}

#buttonset {
	right: 10px;
	position:absolute;
}

#buttonset > button{
	margin-top:2px;
}

#menu {
	margin-top:2px;
	left: 10px;
	display:block;
	position:absolute;
}

#login_form input[type=text], input[type=password]  {
	width: 100%;
}

#login , #logout {
	margin-top:2px;
	left: 100px;
	display:block;
	position:absolute;
}

#export_bar {
	margin-top:2px;
	right: 500px;
	display:block;
	position:absolute;
}

#export_select{
	margin-left:-4px;
}

#export_menu{
	position:absolute;
	z-index: 1;
}

#menu_select {
	margin-top:2px;
	left: 85px;
	display:block;
	position:absolute;
}

#menu_split ul {
	width: 100px;
	left: 90px;
	display:block;
	position:absolute;
	margin-top:35px;
	z-index: 3;
}

#backToChart {
	margin-top:2px;
	left: 10px;
	display:block;
	position:absolute;
}

#titleLabel {
	position:absolute;
	display:block;
	left: 50%;
	margin-left: -160px;
	width: 320px;
	margin-top:5px;
	text-align:center;
	font-size: 1.5em;
}

#meteo {
	margin-top:2px;
	right: 10px;
	display:block;
	position:absolute;
}

#period {
	right: 170px;
	position:absolute;
}

#grouping {
	right: 170px;
	position:absolute;
}

#period > label{
	margin-top:2px;
}

#grouping > label{
	margin-top:2px;
}

#overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
	background: url(../images/loading.gif) 50% 50% no-repeat #FFF;
	z-index: 100;
	opacity: 0.75;
	display: none;
}

table.chartinfo {
	width: 800px;
	table-layout: fixed;
	margin: 80px auto 10px;
	color: #222;
	font-size: 1.2em;
	border-collapse:collapse;
}

table.chartinfo tr {
	border-top: solid 1px #DDD;
	border-bottom: solid 1px #DDD;
}

table.chartinfo > thead > tr {
	background-color: #EEE;
	height: 35px;
}

table.chartinfo > tbody > tr {
	height: 60px;
}

table.chartinfo > tbody > tr > td {
	text-align: center;
}

table.chartinfo > tbody > tr > td.header {
	text-align: left;
	padding-left: 10px;
}

table.chartinfo > tbody > tr > td.pointer {
	cursor: pointer;
}

table.chartinfo div.value {
	font-weight: bold;
}

table.chartinfo div.timestamp {
	font-size: 0.8em;
}

table.chartinfo text {
	font-size: 1.1em;
	font-family: Arial;
}

table.tableinfo {
	width: 800px;
	table-layout: fixed;
	margin: 80px auto 10px;
	color: #222;
	font-size: 1.2em;
	border-collapse:collapse;
}

table.tableinfo tr {
	border-top: solid 1px #DDD;
	border-bottom: solid 1px #DDD;
}

table.tableinfo > thead > tr {
	background-color: #EEE;
	height: 35px;
}

table.tableinfo > tbody > tr {
	height: 60px;
}

table.tableinfo > tbody > tr > td {
	text-align: center;
}

table.tableinfo > tbody > tr > td.header {
	text-align: left;
	padding-left: 10px;
}

table.tableinfo > tbody > tr > td.pointer {
	cursor: pointer;
}

table.tableinfo div.value {
	font-weight: bold;
}

table.tableinfo div.timestamp {
	font-size: 0.8em;
}

table.tableinfo text {
	font-size: 1.1em;
	font-family: Arial;
}

div.alert {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 5px;
	margin-bottom: 2px;
}

div.alert span {
	display: inline-block;
	font-weight:bold;
	min-width: 60px;
}

#alert_list {
	float:left;
}

#alerts {
	background-color: rgba(204, 204, 204, 0.5);
	min-height: 50px;
	width: 400px;
	margin-top: 30px;
	margin-bottom: 30px;
	padding: 10px;
	font-size:1.4em;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

#alerts  h3 {
	margin: 0;
	margin-bottom: 10px;
	float: left;
}

#alerts  button {
	height: 30px;
	width: 100px;
	margin: 0;
	font-size:1em;
	float: right;
}

#alerts div.alert {
	background-color: rgba(16, 150, 24, 0.5);
	clear: both;
}

#alerts div.alert.disabled {
	background-color: rgba(150, 150, 150, 0.5);
}

#triggered_alerts {
	background-color: rgba(220, 57, 18, 0.4);
	min-height: 50px;
	width: 400px;
	padding: 10px;
	font-size:1.4em;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

#triggered_alerts  h3 {
	margin: 0;
	margin-bottom: 10px;
}

#triggered_alerts div.alert {
	background-color: rgba(220, 57, 18, 0.5);
}

#alert_edit {
	background: rgba(16, 150, 24, 0.5);
	min-height: 250px;
	width: 400px;
	margin-left: 30px;
	float: left;
	font-size:1.4em;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

#alert_edit .ui-widget-header {
	border: none;
	background: none;
}

#alert_edit input[type=text] {
	width: 100%;
}

#alert_edit label{
	margin-right: 5px;
}

#comparator_container {
	position: absolute;
	margin: 0;
	left: 25px;
}

#comparator_bar {
	width: 125px;
	float: left;
}

#comparator_bar select, #comparator_bar input {
	margin-bottom: 10px;
	width: 120px;
}

#comparator_values {
	height: 275px;
}

.comparator_chart {
	width: 1000px;
	float: right;
	left: 15%;
	clear: right;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 768px) {

	#logo {
		top:20px;
		left:20px;
		margin-left:0;
	}

	div.home-item {
		height:180px;
		width:630px;
	}
	
	#titleLabel {
		left: 50%;
		margin-left: -70px;
		width: 140px;
		font-size: 1em;
	}
	
	#home_date {
		height: 90px;
	}
	
	#home_date label {
		top: 20px;
		font-size:3em;
	}

	#home_buttons {
		background-color: #ccc;
		height: 180px;
		clear: both;
	}
	
	#btnMenu {
		width:160px;
		height:160px;
		margin: 5px;
	}

	#btnMeteo {
		width:160px;
		height:160px;
		margin: 5px;
	}
	
	#menu_bar {
		height: 345px;
	}

	#indicator {
		height:105px;
		width:150px;
	}

	div.icon
	{
		width:48px;
		height:48px;
		margin: 20px auto 5px;	
	}

	div.item {
		font-size:2.2em;
		height:110px;
		width:150px;
	}
	
	#pages {
		min-width:0px;
	}
	
	.schema {
		max-width: 640px;
		max-height: 469px;
	}
	
	table.chartinfo {
		width: 500px;
		table-layout: fixed;
		margin: 80px auto 10px;
		color: #222;
		font-size: 1em;
		border-collapse:collapse;
	}

	table.chartinfo tr {
		border-top: solid 1px #DDD;
		border-bottom: solid 1px #DDD;
	}

	table.chartinfo > thead > tr {
		background-color: #EEE;
		height: 25px;
	}

	table.chartinfo > tbody > tr {
		height: 40px;
	}

	table.chartinfo > tbody > tr > td {
		text-align: center;
	}

	table.chartinfo > tbody > tr > td.header {
		text-align: left;
		padding-left: 5px;
	}

	table.chartinfo > tbody > tr > td.pointer {
		cursor: pointer;
	}

	table.chartinfo div.value {
		font-weight: bold;
	}

	table.chartinfo div.timestamp {
		font-size: 0.8em;
	}
	
	table.chartinfo text {
		font-size: 0.9em;
		font-family: Arial;
	}
	
	#menu {
		left: 0;
	}
	
	#menu .ui-button-text {
		padding: .4em .6em .4em .6em;
	}
	
	#menu_select {
		left: 45px;
	}
	
	#login , #logout {
		margin: 0;
		left: 0;
		position:relative;
	}
	
	#menu_split ul {
		width: 100px;
		left: 45px;
		display:block;
		position:absolute;
		margin-top:35px;
		z-index: 3;
	}
	
	#meteo {
		right: 0;
	}
	
	#datepicker {
		width:90px;
		left: 40%;
		margin-left:-45px;
		font-size: 1.2em;
	}
	
	#buttonset {
		right: 0;
		margin-right: 2px;
	}
	
	#back {
		width: 30px;
	}
	
	#date .ui-button-text {
		padding: .4em .4em;
	}
	
	#forward {
		width: 30px;
	}
	
	#period {
		left: 50%;
		right: 0;
		margin-top: 34px;
		width: 260px;
		margin-left:-130px;
		z-index: 2;
	}

	#grouping {
		left: 50%;
		right: 0;
		margin-top: 34px;
		margin-left:-140px;
		width: 280px;
		z-index: 2;
	}
	
	#alerts {
		width: 300px;
	}

	#triggered_alerts {
		width: 300px;
	}
	
	.ad {
		display: none;
	}
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-device-width : 500px) and (max-device-width : 768px) {
	
	#home_date {
		height: 60px;
	}
	
	#home_date label {
		top: 10px;
		font-size:2.5em;
	}

	div.home-item {
		height:90px;
		width:315px;
	}
	
	#home_buttons {
		background-color: #ccc;
		height: 115px;
		clear: both;
	}
	
	#btnMenu {
		width:100px;
		height:100px;
		margin: 5px;
	}

	#btnMeteo {
		width:100px;
		height:100px;
		margin: 5px;
	}
	
	.ad {
		display: none;
	}
}

/* Tablets (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

	.ad {
		display: none;
	}
}