@charset "utf-8";
/* CSS Document */

body {
	margin:0;
	text-align: center;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 100%;
	color:  #309; /*blue*/
	left: 0;
	top: 0;
	background-color: rgba(102, 0, 102, 0.3); /*rgba(238,238,238,0.2); rgba(255,153,0,0.4);*/
}
#container {
	margin: 0 auto;  /*Il valore automatico sui lati, abbinato alla larghezza, produce un layout centrato. Non è necessario se impostate la larghezza del container su 100%. */
	text-align: left; /*ripristina l'allineamento*/
	padding-top: 0px;
	width: 95%;
	max-width: 78.6em; /* = 1260px /16px; Può essere utile assegnare una larghezza massima per impedire che questo layout diventi troppo largo su un monitor di grandi dimensioni. Mantiene la lunghezza della riga più leggibile. IE6 non rispetta questa dichiarazione. */
	min-width: 15.0em; /* = 240px /16px; Può essere utile assegnare una larghezza minima per impedire che questo layout diventi troppo stretto. Mantiene la lunghezza della riga più leggibile nelle colonne laterali. IE6 non rispetta questa dichiarazione. */
}

header, footer, nav {
	clear: left;
	width: 100%;
    margin: 0;
    padding: 0;
}
header {
	font-family:"Courier New", Courier, monospace;
	color: white; /*rgba(255,153,0,1.0); */
	text-shadow: 1px 1px 2px #222;	
}
header h1 {
	padding-top: 7px;
	padding-bottom: 0px;
	font-size: 3.5em;
}
header a:link {color: white; text-decoration: none;}
header a:visited {color: white; text-decoration: none;}
header a:hover { background-color: transparent; text-decoration: none;}
header a:active {color: white; text-decoration: none;}
header span {
	padding-top: 18px;
	padding-right: 5px;
}
header p {
	font-size: 1.2em;	
	padding-bottom: 9px;
	letter-spacing: 1.5px;
}
h1, h2, h3, h4, h5, h6, p {
	margin: 0;	 /* La rimozione del margine superiore permette di aggirare il problema che si crea quando i margini possono fuoriuscire dal div che li contiene. Il margine inferiore che rimane permetterà di distanziare gli elementi che seguono. */
	padding-right: 10px;
	padding-left: 10px; /* L'aggiunta di una spaziatura ai lati degli elementi contenuti nei div, anziché ai div stessi, consente di evitare ogni calcolo matematico relativo ai riquadri. Come metodo alternativo si può anche utilizzare un div nidificato con spaziatura laterale. */
	padding-top: 10px;
	padding-bottom: 10px;
	clear: left;
}
h3	{
	color: #888;
	letter-spacing: 0.1em; /*1.3px;*/
	font-weight: bold;
}
h4	{
	color: #777;
	letter-spacing: 0.1em; /*1.3px;*/
}


ul {
	line-height:30px;
	}
a:link {color: #660066;}
a:visited {color: #660066;}
a:hover { background-color: rgba(102, 0, 102, 0.1);}
a:active {color: orange; text-decoration: none;}
	
table { width: 100%;}
th, td { padding: 5px; text-align: left; border-bottom: 1px solid #eee;}
form {padding-right: 10px; padding-left: 10px; }
fieldset, legend {border: 1px dashed #f90;}
.responsiveTabella { overflow-x:auto;}
/* righe alternate colorate     tr:nth-child(even){background-color: #f2f2f2} */

/*nav {
    margin: 0;
    padding: 0;
	height: 46px;
	background-color: white;
}*/

section {
    margin: 0;
    padding: 0; 
	width:100%;
	text-align:left;
	font-size:1.2em;
	color: inherit;
	background-image: url(../images/back_math-w.gif);
	-webkit-border-radius: 10px 10px 0px 0px;-moz-border-radius: 10px 10px 0px 0px;border-radius: 10px 10px 0px 0px;
	/*-webkit-box-shadow: #B3B3B3 4px 4px 4px;-moz-box-shadow: #B3B3B3 4px 4px 4px; box-shadow: #B3B3B3 4px 4px 4px;*/
}
#sectionMenu {
	text-align:right;
    background-color: rgba(102, 0, 102, 0.1);
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	clear:left;	
	}

article {
	float: left;
	width: 100%;
	margin: 0;
    padding: 0;
}

footer {
	margin-bottom: 20px;
    color: white;
    background-color: orange;
	text-align:center;
}

img { /*---immagine responsive--*/
    max-width: 100%;
    height: auto;
}
/*********** classi *********/
.titoloSezione {
	margin:0;
    padding: 2px 0px 4px 10px;
	color: #FFCC00; /*#aaa;*/
	background-color:#660066;
	-webkit-border-radius: 10px 10px 0px 0px;-moz-border-radius: 10px 10px 0px 0px;border-radius: 10px 10px 0px 0px;
	/*-webkit-box-shadow: #B3B3B3 4px 4px 4px;-moz-box-shadow: #B3B3B3 4px 4px 4px; box-shadow: #B3B3B3 4px 4px 4px;*/
	}

.opaca img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.quadrato {
	float: left;
    margin: 0em 1.3em 1.3em 1.3em;
    padding: 1.3em 1.3em 1.3em 1.3em;
	width: 13.5em;
	height: 13.5em;
    background-color: #eee;
	border-radius: 15px 15px 0px 0px;
	cursor:pointer;
}
.quadrato:hover {
	/*background-image: none;
    background-color: rgba(102, 0, 102, 0.1);*/
}
.unaColonna {
	float: left;
	width: 100%;
    margin:0;
    padding: 0;
}
.dueColonna {
	float: left;
	width: 50%;
    margin: 0;
    padding: 0;
}
.treColonna {
	float: left;
	width: 33.33%;
    margin: 0;
    padding: 0;
}
.evidenziato {
	color: #660066;
	letter-spacing: 0.1em; /*1.3px;*/
	font-weight: bold;
	background-color: #eee;
}
.responsive {
    max-width: 100%;
    height: auto;
}
.img-left {
	vertical-align: middle;
	float: left;
	border: none;
	margin-bottom: 0px;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 2px;
}
.img-right {
	vertical-align: middle;
	float: right;
	border: none;
	margin-bottom: 0px;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 2px;
}
.nota {
	color: #888;
	font-size:80%;
/*	line-height: 1.3em; 
*/}

/*************************/

/*****  Responsive Top Navigation from http://www.w3schools.com/howto/howto_js_sidenav.asp  *****/
/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #660066; /* Purple*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 22px;
    color: #aaa;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #fff;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#container {
    transition: margin-left .5s;
}
/*********MEDIA QUERY ************/

/* On smaller screens, where height is less than 480px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 480px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
	
	.dueColonna, .treColonna{
		margin: 0;
		padding: 0;
		width: 100%;
		float: left;
	}
}
@media screen and (max-width: 800px) {
	.dueColonna, .treColonna{
		margin: 0;
		padding: 0;
		width: 100%;
		float: left;
	}
}

@media screen and (max-width: 320px) {
	.quadrato {
    margin: 1.1em;
    padding: 1.1em;
	width: 11.4em;
	height: 11.4em;
	}
}

@media print {
	body {background-color: white; font-size: 75%;}
	a:link {color: black; text-decoration: none;}
	a:visited {color: black; text-decoration: none;}
	header {text-shadow: none;}
	header h1 {font-size: 14pt; padding-top: 3px; padding-bottom: 3px;}
	header p {display : none;}
	header span {display : none;}
	nav {display : none;}
	#sectionMenu {display : none;}
	footer {color: black; background-color: white; text-align:left; border-top:1px solid #eee;}
	.titoloSezione {color: #333;font-size: 14pt}
	#cercaLibri {display : none;}
	.dueColonna {width: 100%;}
	.quadrato {width: 100%; height: auto; margin:0; padding: 0;}
	#utility1, #utility2 {display: none;}
}
/**********************************/