@charset "utf-8";
html { 
    background: url(../bozza3.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
height: 100%;
	}
body{
padding:0;
line-height: 1.5em;
font-family: arial,sans-serif;
font-size: 76%;
height: 100%;
}


    label, input { display:block; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    fieldset { padding:0; border:0; margin-top:25px; }
    
    div#users-contain { width: 350px; margin: 20px 0; }
    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
    .ui-dialog .ui-state-error { padding: .3em; }
    .validateTips { border: 1px solid transparent; padding: 0.3em; }









header{
width: auto;
height: 50px;
background-color : blue;
  opacity:0.5;
}
.risolvi{
width: auto;
height: 10%;text-align: center;
background-color : blue;
color: yellow;
font-size: 1.0em;
}

#content { min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px;  
 z-index: 1; text-align: center;padding: 0.5%;}
 /* #content {width: 99%; height: auto; z-index: 1; margin: 0 auto;text-align: center;padding: 0.5%;}  */
#scritta_header {
font-size : 3.0em;
color : yellow;
text-align: center;
margin: 2% 0% 3% 0%;
}
table {
color : yellow;
text-align: center;
margin-left:auto; margin-right:auto;margin-top:3%;
}

td {margin-top:1%; margin-bottom:1%;}

#divform1 {
width:300px; 
height:100px; 
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-150px;
background: url(../bozza3.png) no-repeat center center fixed; 
text-align: center;
/* display:none; */
}
#finale {
background: url(../bozza3.png) no-repeat center center fixed; 
text-align: center;
display:none;
position:absolute;
top:50%;
left:50%;
margin-top:-188px;
margin-left:-450px;
width:900px;
height:500px;
font-size: 1.5em;
color:white;
}
#leggiArchivio{
width:300px; 
height:auto; 
background-color:#F00; 
text-align: center;
/* display:none; */
font-size: 1.5em;
color:white;
}
#tempo{
width:300px; 
height:auto; 
background-color:#F00; 
/* display:none; */
text-align: center;
font-size: 1.5em;
color:white;
}
#domanda{
width:300px; 
height:50px; 
background-color:#F00; 
/* display:none; */
text-align: center;
font-size: 1.5em;
color:white;
}

#div3{

width:300px; 
height:50px; 
background-color:#F00; 
/* margin:50px 20px 150px 20px; */
text-align: left;
}
#div4{

width:300px; 
height:50px; 
background-color:yellow; 
/* margin:50px 20px 150px 20px; */
text-align: left;
}
#div7{
width:300px; 
height:auto; 
background-color:#F00; 
display:none;
text-align: left;
}

  .inserimentoDati{
            width: 300px;
            height: auto;
            border: 1px solid gray;
        background-color : green;
		color: white;
		}
   .migliorTempo{
            width: 300px;
            height: auto;
            border: 1px solid gray;
        background-color : yellow;
		margin-top: 5px;
		}
   .posizioneClass{
            width: 300px;
            height: auto;
            border: 1px solid gray;
        background-color : blue;
		color: white;
		}
	 .record{
            width: 300px;
            height: auto;
            border: 1px solid gray;
        background-color : blue;
		color: white;
		}
	 #result6{
            width: 300px;
            height: auto;
            border: 1px solid gray;
        background-color : yellow;
		color: blue;
		}
	.result7{
            width: 300px;
            height: auto;
            border: 1px solid gray;
        background-color : blue;
		color: white;
		}
	 #result8{
            width: 300px;
            height: 100px;
            border: 1px solid gray;
        background-color : green;
		color: white;
		text-align: center;
	/* 	display:none; */
		
		}

	 .ris1{
            width: 10px;
            height: auto;
            border: 1px solid gray;
        background-color : blue;
		color: white;
		}		
	.ris2{
            width: 10px;
            height: auto;
            border: 1px solid gray;
        background-color : blue;
		color: white;
		}	
		.ris3{
            width: 10px;
            height: auto;
            border: 1px solid gray;
        background-color : blue;
		color: white;
		}
		.ris4{
            width: 10px;
            height: auto;
            border: 1px solid gray;
        background-color : blue;
		color: white;
		}
		#domanda{
            width:500px;
            height: 200px;
            border: 1px solid gray;
        background-color : blue;
		color: white;
		}	

	#info{
            width: 300px;
            height: auto;
            border: 1px solid gray;
        background-color : blue;
		color: white;
		}	
.class_gen{
            margin-top: 10px;
			width: 300px;
            height: 32px;
            /* border: 1px solid gray; */
        /* background-color : blue; */
		color: white;
		line-height:7%;
		background: rgb(30,55,154);
background: -moz-radial-gradient(center, ellipse cover,  rgb(30,55,154) 11%, rgb(42,91,216) 39%, rgb(32,77,202) 80%, rgb(126,158,232) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(11%,rgb(30,55,154)), color-stop(39%,rgb(42,91,216)), color-stop(80%,rgb(32,77,202)), color-stop(100%,rgb(126,158,232)));
background: -webkit-radial-gradient(center, ellipse cover,  rgb(30,55,154) 11%,rgb(42,91,216) 39%,rgb(32,77,202) 80%,rgb(126,158,232) 100%);
background: -o-radial-gradient(center, ellipse cover,  rgb(30,55,154) 11%,rgb(42,91,216) 39%,rgb(32,77,202) 80%,rgb(126,158,232) 100%);
background: -ms-radial-gradient(center, ellipse cover,  rgb(30,55,154) 11%,rgb(42,91,216) 39%,rgb(32,77,202) 80%,rgb(126,158,232) 100%);
background: radial-gradient(ellipse at center,  rgb(30,55,154) 11%,rgb(42,91,216) 39%,rgb(32,77,202) 80%,rgb(126,158,232) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e379a', endColorstr='#7e9ee8',GradientType=1 );

		}	
	.class_gen p { line-height: 32px; }
		/****************************************************************/

#promo1{
background-color: blue;
color: white; 
top:5%;
margin: 0 auto;
width:auto;
height:auto;
      font-size: 1em;
		}		
#promo2{

background-color: blue;
color: white; 
top:5%;
margin: 0 auto;
width:auto;
height:auto;
font-size: 1em;
}			
		
		
		

a {
color : white;
text-decoration : none;
}
a:hover {
text-decoration :none;
}

h1 {
font-size : 1.1em;
color : white;
}
h1 span {
background-color : #b60000;
padding : 0 10px;
}
h2 {
font-size : 1.0em;
color : black;
}
h3{
font-size : 1.0em;
color : yellow;
text-align: center;
}
h4{
font-size : 1.0em;
color : RED;
text-align: center;
}
.right {
text-align: right;
}
/*********************************************/
.centrato{
top:58%;
margin: 8% auto;   
width:50%;
height:50%;}


.tasto1{
           border: 2px solid yellow;
		   width:48%;
            height: 46%;
      background: rgb(30,55,154);
background: -moz-radial-gradient(center, ellipse cover,  rgb(30,55,154) 11%, rgb(42,91,216) 39%, rgb(32,77,202) 80%, rgb(126,158,232) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(11%,rgb(30,55,154)), color-stop(39%,rgb(42,91,216)), color-stop(80%,rgb(32,77,202)), color-stop(100%,rgb(126,158,232)));
background: -webkit-radial-gradient(center, ellipse cover,  rgb(30,55,154) 11%,rgb(42,91,216) 39%,rgb(32,77,202) 80%,rgb(126,158,232) 100%);
background: -o-radial-gradient(center, ellipse cover,  rgb(30,55,154) 11%,rgb(42,91,216) 39%,rgb(32,77,202) 80%,rgb(126,158,232) 100%);
background: -ms-radial-gradient(center, ellipse cover,  rgb(30,55,154) 11%,rgb(42,91,216) 39%,rgb(32,77,202) 80%,rgb(126,158,232) 100%);
background: radial-gradient(ellipse at center,  rgb(30,55,154) 11%,rgb(42,91,216) 39%,rgb(32,77,202) 80%,rgb(126,158,232) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e379a', endColorstr='#7e9ee8',GradientType=1 );

		color: white;
		font-size : 4.0em;
		overflow: hidden;
		float:right;
		 text-align: center;
		 line-height:100px;
		 margin: 0 auto;
		 position:relative;}
.sx{
    margin-left:2px;
	margin-bottom:2px;   
  border-top-left-radius: 25px;
   border-bottom-right-radius: 25px;
  }

.dx{
    margin-bottom:2px;      
  border-top-right-radius: 25px;
   border-bottom-left-radius: 25px;
		 }
.sottodx{
  border-bottom-right-radius: 25px;
  border-top-left-radius: 25px;
   }		
.sottosx{
  margin-left:2px;      
  border-bottom-left-radius: 25px;
   border-top-right-radius: 25px; 
  }				 
  .largo	{width:96%;
            height: 50px;
			font-size : 1.1em;
line-height:50px; margin-top:5%;overflow:hidden;
}	 
		 
.bottom{
position:absolute;
bottom:-38px;
right:9px;
font-size : 0.3em;
text-align: right;
}
.tasto1:hover {border: 2px solid gray;
 }

 /*  #form1{visibility:visible;} */
/****************************************************************************************/
formNum { width: 100%; margin:0 auto }
form { /* margin: 20px; */width: 300px; margin:auto }
fieldset { border: none; }
legend { font-size: 1.0em; font-weight: bold;color:yellow; text-align: center;}
fieldset fieldset legend {
    font-size: 1.0em;
    font-weight: bold;
    padding: 5px 0;
}
 
ul li { list-style: none; margin: 20px 10px; }
.alto60{height:60%;}
input, textarea, select {
    border: 1px solid #C6CFE2;
    background: #F7FBFE;
    padding: 2px; 
	margin-bottom:2%;
	height:5%;
 width: 100%;
	}
label {
    padding: 2px;
    width: 271px;
    display: block;
    float: left;
    font-weight: bold;color : yellow;
}
fieldset fieldset label {
    margin-left: 50px;
    width: 30px;
}
fieldset fieldset input {
    border: none;
    float: left;
    margin: 0 20px 0 15px;
}
 
#submit {
    background: #69B1D9;
    color: #fff;
    font-weight: bold;
    padding: 2px 10px;
}
/*----------------OVERLAY---------------------*/


/* #contenuto{ width:50%; height:auto; margin:15px; color: black;} */
#box{ width:50%; height:auto; background-color:#FFA500; display:none; z-index:+300; position:absolute; left:30%; top:20%; 
-moz-border-radius: 15px;  -webkit-border-radius: 15px;
border-radius: 15px;}
div.box:hover { background-color:#FFFF00; }
.testo{ margin:20px; width:90%;color: black;}
.titolo_box{margin-top:10%; color: black;text-align:center;}
.testo-box{ margin:15px;color: black;}
.apri{color:yellow; font-size:18px; font-family:Verdana, Geneva, sans-serif; float:right; margin-right:50px;}
.apri:hover{ font-size:18px; font-family:Verdana, Geneva, sans-serif; cursor:pointer;}
.chiudi{ font-size:18px; color:black; font-weight:bold; position:absolute; right:2%; top:0%;  cursor:pointer;padding: 2%;}
.overlay{
    background:#000;
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:100;
	cursor:pointer;
/*Trasparenza cross browser*/
opacity: .7; filter: alpha(opacity=70); 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";	
}

.presenta{font-family: sans-serif, times, arial;font-size:1.1em;margin: 0 auto;width:50%; height:auto; background-color:#FFA500; z-index:+300; padding:3%;
-moz-border-radius: 15px;  -webkit-border-radius: 15px;border-radius: 15px;margin-bottom: 3%;}
.tasto {height: 8%; width:7%;text-align:center;padding:1%;overflow:hidden;}
hr {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #CCCCCC;
    border-right: 0 solid #CCCCCC;
    border-style: solid;
    border-width: 1px 0 0; 
	width:60%;
	}
.informativa{margin: 0 auto;font-size: 1.0em; font-weight: bold;color:yellow; text-align: left;padding:3% 10% 3% 10%;
border: 1px solid yellow;}
#footer, #push {
    height: 50px; 
    clear: both;
}


#footer {
	width:100%;
	/* height: auto; */
opacity:0.5;
overflow:hidden;
	border-top: Solid 3px blue;
	margin:0 auto;
	color:#FFFFFF;
    position: relative;
padding: 1% 0 1% 0;
	text-align: center;
	}
footer h2 { line-height:145%;color : black;font-size: 67%; padding:2px;}
footer a { color : white;font-size: 91%; }
footer h4 { color : black;font-size: 90%; }
	/*=========================================
	Media Queries
=========================================*/
/* Step 2, quando il contenitore principale diventa pi? piccolo. */
@media screen and (max-width: 999px) {
.centrato{top:60%;left:50%;}
.tasto1{width: 96%; margin-left: 3%;}
.bottom{right:19px;font-size : -0.5em;}
}


/* Step 3, quando il layout diventa fluido */
@media screen and (max-width: 719px) {
.centrato{ width:90%;height:209px;}
.tasto1{width: 96%; margin-left: 3%;}
.bottom{right:19px;font-size : -0.5em;}
}


/* Step 4, tutti gli elementi hanno la stessa dimensione. In questo modo, gli utenti mobili possono utilizzare il sito. */
@media screen and (max-width: 479px) {
#scritta_header {font-size : 2.0em;}
 #content {width: 93%; height: auto; z-index: 1; margin: 0 auto;text-align: center;/* padding: 0.5%; */overflow:hidden;} 
.centrato{ width:90%;}

.tasto1{width:100%;
            height: 37%;margin-bottom: 2%;}
.bottom{right:19px;font-size : -0.5em;}
#div1{display:block; width:auto; }
#div2{width:300px; height:auto; }
  #result2{width: auto;}
   #result3{width: auto;margin-top: 5px;}
   #result4{width: auto;}
	 #info{width:auto;}	
.class_gen{
            margin-top: 10px;
			width: 100%;}
button{margin-bottom:2%;}
.presenta{width:90%;}
.titolo_box{margin-top:20%;}
}