@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;
}
body{
padding:0;
line-height: 1.5em;
font-family: arial,sans-serif;
font-size: 76%;
}
header{
width: auto;
height: 50px;
background-color : blue;
  opacity:0.5;
}

#content { min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px;  
 z-index: 1; text-align: center;padding: 0.5%;}
 .white{color:white;}
 #scritta_header {
font-size : 3.0em;
color : yellow;
text-align: center;
padding:2%;

}

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;
}
#div1{
position: fixed;
   top: 50px;
   left: 50px;
  width:300px; 
height:100px; 
margin-top: 10%;
background-color:#b60000; 
text-align: center;
display:none;
font-size: 1.5em;
color:white;
}
#div2{
width:300px; 
height:auto; 
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: url(../bozza3.png) no-repeat center center fixed;
display:none;
text-align: left;
	margin-top:20%;
		text-align: center;
}
 .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;
		}	
  .result2{
            width: 300px;
            height: auto;
            border: 1px solid gray;
        background-color : green;
		color: white;
		}
   .result3{
            width: 300px;
            height: auto;
            border: 1px solid gray;
        background-color : yellow;
		margin-top: 5px;
		}
   .result4{
            width: 300px;
            height: auto;
            border: 1px solid gray;
        background-color : blue;
		color: white;
		}
	 .result5{
            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{
            border: 1px solid gray;
        background-color : green;
		color: white;
		text-align: center;
		margin:0 auto;
width:300px;
height:auto;
		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: 300px;
            height: auto;
            border: 1px solid gray;
        background-color : blue;
		color: white;
		}	
	.info{
            width: 100%;
            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{
  position: absolute;
background-color: blue;
color: white; 
top:1%;
left:50%;
margin-top:20px;
margin-left:-200px;
width:210px;
height:auto;
      font-size: 1em;
		}		
#promo2{
background-color: blue;
color: white; 
margin-bottom:5%;
height:auto;
font-size: 1.5em;
}			
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;
}
.right {
text-align: right;
}
/*********************************************/
#sinistro {
        float: left;width:33%;/* background-color : white; */height:auto;
    } 
#centrato{
        float: left;width:34%;background-color : #b60000;height:400px;position: relative;
    } 
#destro {
        float: left;width:33%;/* background-color : yellow; */height:400px;
    } 
button {/* position: absolute; */width:63%;
 margin-top: 5%;
 /* margin: 0 auto; */}
arrendo {position: absolute;width:43%;
 top: 5%;
 margin: 0 auto;}
 .img { width:43%;margin: 0 auto;}	
.tasto1{
           border: 2px solid yellow;
		   width:190px;
            height: 100px;
      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; 
  }				 
.bottom{
position:absolute;
bottom:-38px;
right:9px;
font-size : 0.3em;
text-align: right;
}
.tasto1:hover {border: 2px solid gray;
 }
 /*  #form1{visibility:visible;} */
/****************************************************************************************/
form { 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; }
input, textarea, select {
border: 1px solid #C6CFE2;
background: #B6BCC0;
padding: 2px;
width: 26%;
height: 33%;	
}
.sotto{margin-top: 3%;}

label {
    padding: 2px;
    width: 271px;
    display: block;
 /*    float: left; */
    font-weight: bold;color : yellow;
text-align:center;
	}
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;
}
/*----------------------------------------------------------------*/
#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-left:20px;color: black;}
.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;}
.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: times, arial,sans-serif;font-size:1.0em;margin: 0 auto;width:50%; height:auto; background-color:#FFA500; z-index:+300;
-moz-border-radius: 15px;  -webkit-border-radius: 15px;border-radius: 15px;margin-bottom: 3%;}
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;margin-top:25%;
}
#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: 43%; margin-left: 3%;}
.bottom{right:19px;font-size : -0.5em;}
#sinistro {width:33%;height:auto; margin: 0 auto;} 
#centrato{width:35%;} 
#destro {width:32%;} 
#promo2{margin-bottom:10%;}		
.migliorTempo{width: 100%;position:relative;}
.record{width: 100%;}	

}

/* Step 3, quando il layout diventa fluido */
@media screen and (max-width: 719px) {

.tasto1{width: 43%; 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;padding:2%;}
.tasto1{width: 43%; margin-left: 3%;}
.bottom{right:19px;font-size : -0.5em;}
#div1{
position: fixed;top:200px;width:auto;margin: 0 auto;}
#div2{width:300px; height:auto; }
  #result2{width: 100%;}
   .result3{width: 100%;margin-top: 5px;}
   .result4{width: 100%;}
   .result5{width: 100%;}
	 #info{width:auto;}	
.class_gen{
            margin-top: 10px;
			width: 100%;
}
.result8{
top:58%;
float:right;
width:56%;
margin-top:0;
}

#div7{
width:100%; }
label {width: 100%;}
input, textarea, select {width: 40%;margin-top:3px;	}
form { width: 100%; margin:0 auto }
#content { margin: 0 auto;  }
#sinistro {width:auto;height:auto; margin: 0 auto;} 
#centrato{width:50%;} 
#destro {width:33%;} 
button {width:63%;margin-top: 5%;margin: 0 auto;}
.migliorTempo{width: 100%;position:relative;}
.apri{font-size:1.0em; margin-right:50px;}
#box{ width:65%;  left:20%; padding:5%; }
.chiudi{ right:5%; top:5%;  cursor:pointer;}
#divform1 {
/* width:60%;  */
/*height:100px; */ 
position:absolute;
top:32%;
left:50%;
margin-top:-50px;
margin-left:-150px;
background: url(../bozza3.png) no-repeat center center fixed; 
text-align: center;
display:none;
}
}