/*	CSS Style for MAGda
    www.alebe.it/magda      
ATTENZIONE ALLE SPECIFICHE HTML5!!!
*/

body {
	background-color: black;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: white;	
	}
a { 
	color: white;
	text-decoration: none;
}
input, select { 
	border-width: 2px;
	border-color: #90F;
	border-style: solid;
	border-radius: 10px 2px;
	height: 25px;
}
li {list-style-type: disc;}

.results tr:hover {	background-color: #444; }

/* inizio CHARTS */
.chart-container-500 {
	width: 500px;
	border: hidden;
}
.chart-container-300 {
	width: 300px;
	border: hidden;
}
.chart-red {
	border: hidden;
	float: left;
	background-color: darkred;
}
.chart-red:hover { background-color: red }
.chart-yellow {
	border: hidden;
	float: left;
	background-color: orange;
}
.chart-yellow:hover { background-color: yellow }
.chart-green {
	border: hidden;
	float: left;
	background-color: green;
}
.chart-green:hover { background-color: chartreuse }
/* fine CHARTS */

/* inizio FRAMESET */
.splash {
	position: fixed;
	top: 0px;
	right: 0px;
	height: 100%;
	width: 150px;
	background-image: url("img/magda_vertical.png");
	z-index: -1;
}
.navigator {
	width: 100%;
	position: fixed;
	bottom: 10px;
	left: 0px;
	z-index: 1;
	background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,50,0,1) 20%, rgba(0,50,0,1) 80%, rgba(0,0,0,0) 100%);	
}
.nav1 { 
	text-align: center;
	float: left;
}
.nav2 { 
	width: 100%;
	height: 100%;
	text-align: center;
	text-emphasis: 100;
	color: #70C;
}
.nav2 a { 
	color: #90F;
	text-decoration-color: #90F;
	text-decoration: underline; 
}
.modal {
	background: rgba(0,0,50,0.90); /*sfondo blu*/
	position: fixed;
	z-index: 2;
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
}
.tips {
	background: rgba(0,50,0,0.88); /*sfondo verde*/
	position: fixed;
	z-index: 10;
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;	
}
/* fine FRAMESET */

/* inizio MENU' */
#menu { text-align: center; }
#menu:hover { background-color: #222; }
#main_title {
	background-color:#90F;
	/*width: inherit;*/
	position: absolute;
	left: 40px; 
	border-radius: 8px 8px 0px 0px;
	}	
#tip_title {
	background-color:#90F;
	/*width: inherit;*/
	position: absolute;
	left: 140px; 
	border-radius: 8px 8px 0px 0px;
	}	
#main {
    background: linear-gradient(90deg, rgba(60,0,100,0.8) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 80%, rgba(60,0,100,1) 100%); 
	width: 90%;
	border-width: 2px;
	border-color: #90F;
	border-style: solid;
	border-radius: 20px;
	padding: 15px;
	caption-side: left;
	}
#main_tip {
	background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 80%, rgba(60,0,100,1) 100%);
	position: absolute;
	left: 100px;
	width: 60%;
	border-width: 2px;
	border-color: #90F;
	border-style: solid;
	border-radius: 20px;
	padding: 15px;
	caption-side: left;
}
li.menuHide {list-style: none;}
/* fine MENU' */

/* inizio PULSANTI */
#visual1 {
	border-collapse: separate;
	border-spacing: 5px;
	padding: 2px;
	border-color: #222;
	border: solid;
	}	
#guide {
	color: white; 
	text-decoration:none;
	}
#guide:hover { cursor: help;
	background-color: rgba(60,0,100,1);
	}
#blu {
	background-color: #60C;
	color: #FFF; 
	height: 30px;
	border: solid;
	border-radius: 10px 2px;
	border-color: #90F;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	}
#blu:hover { background-color: #90F; }
#verde {
	background-color: #0C0; 
	height: 30px;
	border: solid;
	border-radius: 10px 2px;
	border-color: #0F0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	}
#verde:hover { background-color: #0F0; }
#rosso {
	background-color: #C00; 
	height: 30px;
	border: solid;
	border-radius: 10px 2px;
	border-color: #F00;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	}
#rosso:hover { background-color: #F00; }
#to_button #to_button:visited { 
	color: white;
	font-size: x-small;
}
#to_button:hover { 
	background-color: #0C0;
	color: white;
	font-size: x-small;
}
#tab-mag { color: white;
	background-color: #90F;
	font-size: small;
	border-spacing: 20px;
	}
#tab-mag:hover {background-color: white;
	color: #90F;}
/* fine PULSANTI */

#input { color: #90F; }
#position, #nuovo {
	text-align: center;
	background-color: #222;
	border-radius: 12px 4px;
}
#position:hover, #nuovo:hover { background-color: #444; }
#nuovo {border-color: white;
		border: solid;}
#error {
	background: #F00;
	color: #FFF;
	width: 100%;
	}
#timeout {
	color: #90F;
	font-size: x-small;
}
#grigio {color: #666;
	font-size: small;
}

@media (max-width: 768px) {
	table, td, tr
	{ display: block; width: 100% }
}