/* ---------------------------------------------------------------------------------- */
/* PRESET --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */

/* -> RESET CROSS BROWSER GLOBALE ----------------------------------------- */ 
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, img, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, header, nav, article, aside, footer, hgroup, section {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  font-weight:inherit;
  font-style:inherit;
  font-family:inherit;
  text-decoration:none;	
}

section, article, header, footer, nav, aside, hgroup { 
  display:block; 
}

/* ->  SET BOX MODEL TYPE ----------------------------------------- */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


/* -> FONT EMBEDDING ----------------------------------------- */
@font-face {
  font-family: 'MateRegular';
  src: url('/grafagrafa/struttura/font/Mate-Regular-webfont.eot');
  src: url('/grafagrafa/struttura/font/Mate-Regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('/grafagrafa/struttura/font/Mate-Regular-webfont.woff') format('woff'),
       url('/grafagrafa/struttura/font/Mate-Regular-webfont.ttf') format('truetype'),
       url('/grafagrafa/struttura/font/Mate-Regular-webfont.svg#MateRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MateItalic';
  src: url('/grafagrafa/struttura/font/Mate-Italic-webfont.eot');
  src: url('/grafagrafa/struttura/font/Mate-Italic-webfont.eot?#iefix') format('embedded-opentype'),
       url('/grafagrafa/struttura/font/Mate-Italic-webfont.woff') format('woff'),
       url('/grafagrafa/struttura/font/Mate-Italic-webfont.ttf') format('truetype'),
       url('/grafagrafa/struttura/font/Mate-Italic-webfont.svg#MateItalic') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MateSCRegular';
  src: url('/grafagrafa/struttura/font/MateSC-Regular-webfont.eot');
  src: url('/grafagrafa/struttura/font/MateSC-Regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('/grafagrafa/struttura/font/MateSC-Regular-webfont.woff') format('woff'),
       url('/grafagrafa/struttura/font/MateSC-Regular-webfont.ttf') format('truetype'),
       url('/grafagrafa/struttura/font/MateSC-Regular-webfont.svg#MateSCRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'grafagrafatrattiregular';
    src: url('/grafagrafa/struttura/font/grafagrafatratti-webfont.eot');
    src: url('/grafagrafa/struttura/font/grafagrafatratti-webfont.eot?#iefix') format('embedded-opentype'),
         url('/grafagrafa/struttura/font/grafagrafatratti-webfont.woff2') format('woff2'),
         url('/grafagrafa/struttura/font/grafagrafatratti-webfont.woff') format('woff'),
         url('/grafagrafa/struttura/font/grafagrafatratti-webfont.ttf') format('truetype'),
         url('/grafagrafa/struttura/font/grafagrafatratti-webfont.svg#grafagrafatrattiregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* -------------------------------------------------------------------------------------------------- */
/* CONTESTO GENERALE -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------- */

/* -> TAG GENERALI ---------------------------------------------------------------------------------- */
html { 
  height:auto;
  position: relative; 
  z-index: 1;  
  background-image: url(/blu/struttura/immagini/blu_velina_1.png), url(/blu/struttura/immagini/fab_vergata_fondo_blu.jpg);
  background-position:top center, top left;
  background-repeat:repeat-y, repeat;
}

body {  
  max-width:960px;
  margin:0 auto;
  padding: 10px;
  font-family: 'MateRegular', Georgia, serif;
  color:rgba(255, 255, 255, 0.5);
  font-size:62.5%; 
  line-height:1.2em; 
  text-rendering: optimizeLegibility;
  word-wrap: break-word; 
}

h1, h2, h3, h4, h5, h6 {font-family:'MateSCRegular', Georgia, serif;}

em {font-style: normal;	font-family:'MateItalic', Georgia, serif;}

a { text-decoration:none;}
a:link, a:visited { color:rgba(255, 255, 255, 0.7);}
a:hover, a:focus, a:active { color:rgba(255, 255, 255, 1); }

dl { display:inline; } 
dt { display:inline; margin-right:0; } 
dd { display:inline; margin-right:1em; }

mark { background:rgba(15, 135, 15, 0.1); }

/* apici e pedici (es. note in articoli)*/
sup, sub { vertical-align:baseline; position:relative; top:-0.4em; } 
sub { top:0.4em; } 

/* -> INTARSI CARICATI LOCALMENTE (css in linea) DOVE SERVE (ad esempio in contesti impostati in modo diverso)*/
/* sillabazione automatica */
.hyp_auto {
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;    
  hyphens: auto;
}

/* allineamenti */
.asx {text-align:left;}
.adx {text-align:right;}
.lapide {text-align:center;}
.giustificato {text-align:justify;}

/* declinazione font */
.tondo {font-family:'MateRegular', Georgia, serif;}
.corsivo {font-family:'MateItalic', Georgia, serif;}
.maiuscoletto {font-family:'MateSCRegular', Georgia, serif;}

/* variazioni del maiuscoletto: per avvicinamenti dx nei capolettera - gradi da 1 a 6*/
.maiuscoletto_rientrato01 {  
font-family:'MateSCRegular', Georgia, serif;
margin: 0 0 0 -0.1em;
display: inline-block;
}
.maiuscoletto_rientrato02 {
font-family:'MateSCRegular', Georgia, serif;
margin: 0 0 0 -0.2em;
display: inline-block;
}
.maiuscoletto_rientrato03 {
font-family:'MateSCRegular', Georgia, serif;
margin: 0 0 0 -0.3em;
 display: inline-block;
}
.maiuscoletto_rientrato04 {
font-family:'MateSCRegular', Georgia, serif;
margin: 0 0 0 -0.4em;
display: inline-block;
}
.maiuscoletto_rientrato05 {
font-family:'MateSCRegular', Georgia, serif;
margin: 0 0 0 -0.5em;
display: inline-block;
}
.maiuscoletto_rientrato06 {
font-family:'MateSCRegular', Georgia, serif;
margin: 0 0 0 -0.6em;
display: inline-block;
}

/* variazioni in genere utilizzate per reset interventi su stile default immagine */ 
/* senza ombra e senza bordi */
.talquale {
padding: 0px!important;
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0)!important;
-moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0)!important;
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0)!important;
}
/* senza bordi */
.senza_bordi {padding: 0px!important;}

/*  margine sopra */
.marginato_su {margin-top: 20px!important;}

/* senza bordi con margine sopra */
.senza_bordi_marginato_su {
padding: 0px!important;
margin-top: 20px!important;
}

/* altri stili testo generici e specifici */
/* grassetto - da usarsi con estrema parsimonia in quanto non previsto con la font di default "Mate" */
.grassetto {font-weight: bold; opacity: 0.8;}

/* rosso scuro da usare nel testo */
.sanguigna { Color:rgba(102, 0, 0, 0.8);}

/* rosso scuro + corsivo da usare nel testo e nei titoli */
.evidenzia_1 { font-family:'MateItalic', Georgia, serif; color:rgba(102, 0, 0, 0.8);}

/* rosso scuro + maiuscoletto da usare nel testo e nei titoli */
.evidenzia_2 { font-family:'MateSCRegular', Georgia, serif; color:rgba(102, 0, 0, 0.8);}

/* usato nelle date ad es. pagina "cronologia homespot"*/
.date_cronologia {
  font-family:'MateItalic', Georgia, serif;
  width:100%;
  padding: 41.6px 0 4px 0;
  border-bottom:2px solid rgba(0, 0, 0, 0.1);
}
/* usato prevalentemente per le note redazionali */
.verderedazione { color:rgba(15, 135, 15, 0.8);}

/* variazioni dimensione font contestuale */
.unoedue {font-size:1.2em;}

/* variazioni altezza riga contestuale */
.spaziounoecinque {line-height:1.5em!important;}

/* omessi su blu
.filigrana_1 { 
 font-family:'MateItalic', Georgia, serif;
 font-size:2em;
 color:rgba(0, 0, 0, 0.3);
 text-align:center;
 line-height:1em;
}

.filigrana_2 {
 margin:0 0 -20.8px 0;
 font-family:'MateItalic', Georgia, serif;
 font-size:1.2em;
 color:rgba(0, 0, 0, 0.3);
 text-align:center;
 line-height:1em;
}
*/

.marca{
color:rgba(125,255,0,0.8)!important;
}

#manutenzione_spot {
 position: absolute;
 font-family:'MateSCRegular', Georgia, serif;
 font-size:2em;
 color:rgba(255, 255, 255, 0.3); 
}

.nascondi {
  visibility: hidden;
}

/* -> STRUTTURA PRINCIPALE ----------------------------------------- */

#testata {
  width:100%;  
  margin:20px 0 10px 0; 
}

/*  navigazione principale - stile - omissis -*/                                   

#titolazione {
  width:100%;
  margin-bottom:40px;
}

#contenuti {
  width:100%;
  margin-bottom:40px;
}

#piedipagina {
  width:100%;
  margin-bottom:20px;
  border-top:2px solid rgba(255, 255, 255, 0.5);
}

.boxtotale {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; 
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;  
}

.boxtotale_r {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;  
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.sx  {
  max-width:670px;
  margin:0; 
  padding:0 30px 0 0;
  -webkit-box-flex:1;
  -webkit-flex:1;
  -ms-flex:1;
  flex:1;   
}

.dx {
  width:270px;
  margin:0; 
  padding:0; 
}

/* -> TESTATA PRINCIPALE - DX - descrizione istituzionale, logo dx    ------------- */
#testata #logo { 
  /* implementazione logo in background */
  background-image: url(/blu/struttura/immagini/logografagrafablu.png);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 168px auto;
  height: 123px;
  opacity:0.5;
}

#testata #istituzionale h1 {
  padding:31px 0 0 10px;
  font-family:'MateItalic', Georgia, serif;
  font-size:3.2em;  /* 19px  */
  line-height:1.3em; 
  text-align:right;
  color:rgba(255, 255, 255, 0.5);
}

#testata #istituzionale h2 {
  padding:0 0 0 10px;
  font-family:'MateRegular', Georgia, serif;
  font-size:1.9em;  /* 19px  */
  line-height:1.2em; 
  text-align:right;
  color:rgba(255, 255, 255, 0.5);
}

/*  navigazione principale e correlata  - varie sezioni stile - omissis */                                   



/* -> TITOLAZIONE -  DX - titoli    ----------------------------------------- */

/* -> intestazioni a piena pagina  #titolazione > #titolosezione ecc. - omissis */

/* -> intestazioni in colonna  dx (a fianco articoli)  ------------------------ */
#titolosezionesintetico {
  margin:0; 
  padding:0 10px 0 0;
  font-family:'MateRegular', Georgia, serif; 
  font-size:1.6em;  /* 16px*/
  line-height:1.3em; /* 20.8px  */
  text-align:left;  
} 

#titolosezionesintetico > h1 {
  width:100%;  
  float:left;
  font-family:'MateSCRegular', Georgia, serif;
  font-size:1.5em;  /* 24px*/  
} 

#titolosezionesintetico > h2 {
  width:100%;  
  margin-bottom:30px;
  float:left;
  font-family:'MateItalic', Georgia, serif;
  font-size:1.25em;  /* 20px  */  
} 

/*  home_ico - omissis */

/*  titolazione  - sx esplicativo - omissis */

/*  CONTENUTI - sx materiali                                                  
_____________________________________________________________________*/
#contenuti > #materiali  { 
  margin:0; 
  padding:0 30px 0 10px;
  font-family:'MateRegular', Georgia, serif; 
  text-align:justify;
}

/*bianchi di pagina sulla base dell'interlinea base articolo:
  em = 16px; interlinea = 1.3 em = 20.8 px*/
#contenuti #materiali > section > article { 
  margin:0; 
  padding:10.4px 62.4px 41.6px 62.4px; 
  font-size:1.6em;  /* 16px */
  line-height:1.3em;  /*20.8px  = 1 riga; */
  color:rgba(0, 0, 0, 0.8);
  background:url(/blu/struttura/immagini/fab_vergata.jpg) repeat;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  -webkit-box-shadow:5px 5px 10px 0px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.9);
  box-shadow:5px 5px 10px 0px rgba(0, 0, 0, 0.9); 
}

#contenuti #materiali > section > article #magni { 
  font-size:1.3em;  /* 28px   era 1.6*/
   line-height:1.3em;
}

#contenuti #materiali > section > article  header { 
  width:100%;
  margin:0;
  padding:20.8px 0 31.2px 0px;
  float:left;
  clear:both
}

#contenuti #materiali > section > article  header time { 
  width:100%;
  font-family:'MateItalic', Georgia, serif;
  margin-bottom:10.4px;
  text-align: right;
  float:right;
  clear:both;
}

#contenuti #materiali > section > article  header time[title="aggiornamento"] { 
  font-family:'MateSCRegular', Georgia, serif;
  font-size:0.7em; 
  margin-top:-10px; 
}

#contenuti #materiali > section > article  header h1 { 
  width:100%;
  float:left;
  clear:both;
  font-family:'MateSCRegular', Georgia, serif;
  font-size:1.25em;  /* 20px  */
  color:rgba(102, 0, 0, 0.9);
  text-align:left; 
  -webkit-hyphens:none;
  -moz-hyphens:none;
  -ms-hyphens: none;    
  hyphens:none;
}

#contenuti #materiali > section > article  header h2 { 
  font-family:'MateItalic', Georgia, serif;
  font-size:1.125em;  /* 18px  */
  text-align:left; 
  -webkit-hyphens:none;
  -moz-hyphens:none;
  -ms-hyphens: none;    
  hyphens:none;
}

#contenuti #materiali > section > article  header h3 { 
  width:100%;
  float:left;
  clear:both;
  padding:2em 0 0.6em 0;
  color:rgba(0, 0, 0, 0.5);
  font-family:'MateSCRegular', Georgia, serif;
  font-size:1em;  
  line-height:1em;
  text-align:left; 
  -webkit-hyphens:none;
  -moz-hyphens:none;
  -ms-hyphens: none;    
  hyphens:none;
}

#contenuti #materiali > section > article  p {
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;    
  hyphens: auto;
}

#contenuti #materiali > section > article  ol {
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;    
  hyphens: auto;
}

/*normalmente tutti i paragrafi dell'articolo avranno la prima riga rientrata di 1 em*/
#contenuti #materiali > section > article  p {
    text-indent:1em;
} 
/*la prima riga del primo paragrafa non avr� rientro*/
#contenuti #materiali > section  article  p:first-of-type {
    text-indent:0;
} 

/*capolettera per la prima lettera del primo paragrafo */
#contenuti #materiali > section  article  p:first-of-type::first-letter {
    margin:0 0 0 0; 
    padding:0 0.1em 0 0; 
	font-size:3.3em;
	float:left;
	line-height:0.65em;  /*impostazione necessaria e sufficiente per uniformare resa in webkit
	                       Gecko imposta suo valore tassativo in relazione forma e dimensione lettera) */
	
} 

/*niente rientro per i paragrafi separati da una o pi� interruzione di linea aggiuntive */
#contenuti #materiali > section > article  p+br {
    text-indent:0em;
} 


/* -> BLU - SPECIFICAZIONI GENERALI "ARTICLE" PER PAGINE ATTIVIT� - INIZIO  ----------------------------------- */
#contenuti #materiali > section > article #attivi  p {
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;    
  hyphens: none;
}

#contenuti #materiali > section > article #attivi ol {
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;    
  hyphens: none;
}


/*normalmente tutti i paragrafi dell'articolo avranno la prima riga rientrata di 1 em*/
#contenuti #materiali > section > article #attivi p {
    text-indent:0;
} 
/* -> BLU - SPECIFICAZIONI GENERALI "ARTICLE" PER PAGINE ATTIVIT� - FINE  -------------------------------------- */


#contenuti #materiali > section > article > footer { 
  margin:0;
  padding:41.6px 0 62.4px 0;
  text-align:left;
}

#contenuti  #materiali > section > article .anchor,
#contenuti  #materiali > section > article a:link,
#contenuti  #materiali > section > article a:visited { 
 color:rgba(102, 0, 0, 0.8);
}

#contenuti  #materiali > section > article a:hover,
#contenuti  #materiali > section > article a:focus,
#contenuti  #materiali > section > article a:active { 
 color:rgba(15, 135, 15, 1);
}

#contenuti  #materiali > section > article img {
 max-width:100%;
 padding: 2px;
 background: rgba(255, 255, 255, 0.0);
 -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.25);
 -moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.25);
 box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.25);
}

/* liste a pi� di pagina generate dal plugin InsertNote di Xinha */
#InsertNote_NoteList {
 font-size:0.94em;
}

/* visualizzazione anteprime homepage e risultati ricerca motore interno (trova) - omissis - */ 

/* -> BLU - SPECIFICAZIONI "FORM" IN "ARTICLE" PER PAGINE ATTIVIT� - INIZIO  ////////////////////////*/
/* base form (disposizione in pagina del form) */
#contenuti #materiali > section > article form {
  width:100%;  
  margin:50px 0px 0px 0px;
  padding:0px;
  border:0 none;
  display:block;
}
#contenuti #materiali > section > article form[name=cambia] {
  margin-top:30px;
}
/* label form (etichette dei campi abaco) */
#contenuti #materiali > section > article form #abaco label {
  width:100%;  
  margin:20px 0 20px 0;
  padding:0px 10px 0px 10px; 
  font-family:'MateItalic', Georgia, serif; 
  font-size:1.2em; 
  color:rgba(12,133,205, 0.8);
  text-align:center;
  display:block;
}

/* note form (annotazioni di specificazione, sotto i campi input) */
#contenuti #materiali > section > article form .nota_form {
  padding:5px 10px 5px 10px; 
  font-family:'MateRegular', Georgia, serif;
  font-size:0.75em; /* 12.px  */
  line-height:1.3em;  /* 15.6px  */
  color:rgba(0, 0, 0, 0.6);
   -webkit-hyphens:auto;
  -moz-hyphens:auto;
  -ms-hyphens: auto;    
  hyphens:auto;
}

/* form - campi input */
/* input base  blu modifica */
#contenuti #materiali > section > article form input {
  width:100%;
  padding:0px 5px;
  /*border:5px dotted rgba(15, 135, 15, 0.05);*/
  border:1px solid rgba(12,133,205, 0.05);
  outline-style:none;
  font-family:'MateRegular', Georgia, serif; 
  font-size:1em;  /* lascia invariate le impostazioni successive singoli elementi */
 -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius:5px;
}
/* specifica campi text */
#contenuti #materiali > section > article form #esercizio .domanda input[type=text] {
  background:rgba(255, 255, 255, 0.3);
  color:rgba(0,0,0, 0.6);
  border:1px solid rgba(12,133,205, 0.05);
  -moz-box-shadow:    inset 0 0 2px rgba(0,0,0, 0.2);
  -webkit-box-shadow: inset 0 0 2px rgba(0,0,0, 0.2);
  box-shadow:         inset 0 0 2px rgba(0,0,0, 0.2);
} 

/* correzione per visualizzazione pulsanti submit e box radio in iOS  - inizio */
#contenuti #materiali > section > article form [type="submit"] {
  -webkit-appearance: none;
}

#contenuti #materiali > section > article form [type="radio"] {
  border:1px solid rgba(0,0,0,0.4); 
  background-color: rgba(255, 255,255,1); 
}
#contenuti #materiali > section > article form [type="radio"]:checked {
  border:1px solid rgba(0,0,0,0.6); 
  background-color: rgba(0, 0,0,0.2); 
}
/* correzione per visualizzazione pulsanti submit e box radio in iOS  - fine */

/* [type="button"]:focus, [type="select"]:focus */ 

/* input textarea  */
#contenuti #materiali > section > article form textarea {
  width:100%;
  height:396px; /*18 righe*/
  margin:0;
  padding:5px 5px 10px 5px;
  background:rgba(255, 255, 255, 0.3);
  /*border:5px dotted rgba(15, 135, 15, 0.05);*/
  border:1px solid rgba(15, 135, 15, 0.05);
  outline-style:none;
  font-family:'MateRegular', Georgia, serif; 
  font-size:1em;  /* lascia invariate le impostazioni successive singoli elementi */
  text-align:justify;
  -webkit-hyphens:auto;
  -moz-hyphens:auto;
  hyphens:auto;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius:5px; 
  resize: none; 
} 

/* contenitore attivi*/
#contenuti #materiali > section > article #attivi  {
  min-height:460px;
}

/* contenitore attivi form */
#contenuti #materiali > section > article #attivi form   {
  margin:0;
  padding:0; 
}

/* contenitore attivi form submit */
#contenuti #materiali > section > article #attivi form input[type=submit]  {
 margin:0 auto 10px auto;
}

/* contenitore attivi form submit */
#contenuti #materiali > section > article #attivi form input[id=submit0]  {
 margin:0 auto 10px auto;
}

/* contenitore attivi form submit "mani" */
#contenuti #materiali > section > article #attivi form input[id=submitm1],
#contenuti #materiali > section > article #attivi form input[id=submitm2],
#contenuti #materiali > section > article #attivi form input[id=submitm3],
#contenuti #materiali > section > article #attivi form input[id=submitm4]{
 width:160px;
}

/* scelta livelli*/
/* contenitore scelta livelli */
#contenuti #materiali > section > article #attivi form #scegli  {
  margin: 30px auto 30px auto;
  padding: 0 10px 15px 10px;
  border: 4px solid rgba(12,133,205, 0.05);
  text-align: center;
}

/* per centrare la lista impostare un margine inferiore rispetto al riquadro contenitore */
#contenuti #materiali > section > article #attivi form #scegli fieldset {
  margin:0px auto 20px auto;
  display: inline-block;
  text-align:left;
}

/* paragrafo generico dentro riquadro bordato scelta livelli  */
#contenuti #materiali > section > article #attivi form #scegli p {
  font-family:'MateSCRegular', Georgia, serif;
  font-size:1.2em;
  line-height:1.4em;
}

/* paragrafo specifico per titolo form scelta livelli e titolo esercizi */
#contenuti #materiali > section > article #attivi form #scegli .titolo_esercizi,
#contenuti #materiali > section > article #attivi form #esercizio .titolo_esercizi,
#contenuti #materiali > section > article #attivi form #abaco .titolo_esercizi,
#contenuti #materiali > section > article #attivi form #calcolatore .titolo_esercizi {
  width:100%;  
  margin:20px 0 20px 0;
  padding:0 10px 0 10px; 
  font-family:'MateItalic', Georgia, serif; 
  font-size:1.2em;
  line-height:1em;
  color:rgba(12,133,205, 0.8);
  text-align:center;
  display:block;
}

/* paragrafo specifico per titolo form scelta livelli */
#contenuti #materiali > section > article #attivi form[name=tipo] #scegli label:hover {
  color:rgba(12,133,205, 1);
}

/*input radio specifico per form scelta livelli - per mettere voci e campo affiancati*/
#contenuti #materiali > section > article #attivi form #scegli input[type=radio] {
  width: 20px;
  margin: 0 4px 0 -4px;  
} 
 
/*in caso di voci di larghezza diversa si usano le tabelle */
#contenuti #materiali > section > article #attivi form #scegli table {
  width:auto;
  margin:0px auto 0px auto;
  font-family:'MateSCRegular', Georgia, serif;
  font-size:1.2em;
  line-height:1.2em;
}

/* in tabella dentro #scegli fissiamo allineamento nelle tabelle */
#contenuti #materiali > section > article #attivi form #scegli table td{
  text-align:left;
  vertical-align: top; /*utile quando la cella della voce lista si stringe e il contenuto si dispone in due righe */
}

/*in tabella dentro #scegli rimodelliamo allineamento e margini del tag input radio
#contenuti #materiali > section > article #attivi form #scegli table td input[type=radio] {
  margin: 0 auto; 
} */

/* esercizi */
/* contenitore esercizio singolo */
#contenuti #materiali > section > article #attivi form  #esercizio {
  margin: 30px auto 30px auto;
  padding: 0 0 6px 0;
  border: 4px solid rgba(12,133,205, 0.05);
  z-index: 1;
  text-align:center;
}



#contenuti #materiali > section > article #attivi form  #esercizio .domanda {
  width:auto;
  margin:-10px 0 0 0 ;  
  padding:3px 0px 10px 10px; 
  font-family:'MateRegular', Georgia, serif;
  font-size:1.8em; /* 12.px  */
  color:rgba(193,0,31,0.8);
  display:inline-block;
  line-height:1.6em;
}

/* stile domanda esercizio */
#contenuti #materiali > section > article #attivi form  #esercizio .giusto {
  font-size:1.2em;
  line-height:1em;
  -webkit-hyphens:none;
  -moz-hyphens:none;
  -ms-hyphens: none;    
  hyphens:none;
}

#contenuti #materiali > section > article #attivi form  #esercizio .corretto {
  font-size:1.2em;
  line-height:1.05em;
  color:rgba(12,133,205, 0.8);
  -webkit-hyphens:none;
  -moz-hyphens:none;
  -ms-hyphens: none;    
  hyphens:none;
}

/* campo input per risposta */
#contenuti #materiali > section > article #attivi form #esercizio input {
  width:2em;
  text-align:center; 
  padding:0px;
  margin: 0 0 0 0;
  display:inline;
  font-size:1em; /* 12.px  */
}

#contenuti #materiali > section > article #attivi form  #messaggio {
  margin:30px auto 50px auto;
  padding-bottom: 0;
  font-family:'MateRegular', Georgia, serif;
  font-size:2em;
  line-height:1.2em;
  text-align:center; 
}
#contenuti #materiali > section > article #attivi form  #feedback_risposta {
  margin:0px auto 15px auto;
  padding-bottom: 0;
  font-family:'MateRegular', Georgia, serif;
  font-size:1em;
  line-height:1.2em;
  text-align:center; 
}
/* -> BLU - SPECIFICAZIONI "FORM" IN "ARTICLE" PER PAGINE ATTIVIT� - FINE  /////////////////////////// */

/* -> BLU - VARIE PER ESERCIZI "ARTICLE" PER PAGINE ATTIVIT� - INIZIO  /////////////////////////////// */
/* - SPECIFICO ESERCIZI: "PI� O MENO" - "TABELLINE" - "CALCOLA" - suggerimenti feedback risposta - INIZIO ----------- */
/* - FEEDBACK SUGGERIMENTO */
#contenuti #materiali > section > article #attivi .suggerimento_box {
  padding: 0px 20px 10px 0;
  text-align:right;
  font-size:1.3em;
}

/* nello stato normale la soluzione � presente ma non visibile (opacit�=0)
completa il punto di domanda recato dal livello after*/
#contenuti #materiali > section > article #attivi a .suggerimento_txt {
  color:rgba(0,0,0,0);

} 
/* nello stato hover la soluzione � presente e visibile (opacit�=0.8)*/
#contenuti #materiali > section > article #attivi a .suggerimento_txt:hover {
  color:rgba(0,0,0,0.2);
  text-align:right;
}
/* livello after vuoto: serve per dare stabilit� alle posizioni anche in assenza di link "a" attivo   */
#contenuti #materiali > section > article #attivi .suggerimento_txt::after {
   color:rgba(0,0,0,0);
   content: "";  

}
/* livello after reca un punto di domanda visibile (opacit�=0.2)*/
#contenuti #materiali > section > article #attivi  a .suggerimento_txt::after {
   color:rgba(0,0,0,0.2);
   content: "\003F"; 
}
/*-----------------------------------------------*/
/* - FEEDBACK RISPOSTA */
#contenuti #materiali > section > article #attivi .risposta_10a  {
  width: 170px;
  height: 110px;
  margin: 0 auto 5px auto; 
  display: inline-block;
  font-size:1.3em; 
  color:rgba(12,133,205, 0.8);
  text-align:center;
  background-image: url(/blu/struttura/immagini/emo/efa_g.gif);
  background-size: 80px 80px;
  background-repeat: no-repeat;
  background-position: top;
  line-height:8.5em;
}

#contenuti #materiali > section > article #attivi .risposta_10c  {
  width: 170px;
  height: 110px;
  margin: 0 auto 5px auto;
  display: inline-block;
  font-size:1.3em; 
  color:rgba(12,133,205, 0.8);
  text-align:center;
  background-image: url(/blu/struttura/immagini/emo/esi_b.png);
  background-size: 80px 80px;
  background-repeat: no-repeat;
  background-position: top;
  line-height:8.5em;

}
#contenuti #materiali > section > article #attivi .risposta_10e  {
  width: 170px;
  height: 110px;
  margin: 0 auto 5px auto; 
  display: inline-block;
  font-size:1.3em; 
  color:rgba(193,0,31,0.8);
  text-align:center;
  background-image: url(/blu/struttura/immagini/emo/eno_g.png);
  background-size: 80px 80px;
  background-repeat: no-repeat;
  background-position: top;  
  line-height:8.5em;

}
#contenuti #materiali > section > article #attivi .risposta_10n  {
  width: 170px;
  height: 110px;
  margin: 0 auto 5px auto; 
  display: inline-block;
  font-size:1.3em; 
  color:rgba(193,0,31,0.8);
  text-align:center;
  background-image: url(/blu/struttura/immagini/emo/ebo_g.png);
  background-size: 80px 80px;
  background-repeat: no-repeat;
  background-position: top; 
  line-height:8.5em; 
}
/* - SPECIFICO ESERCIZI: "PI� O MENO" - "TABELLINE" - "CALCOLA" - suggerimenti feedback risposta - FINE ----------- */

/* - SPECIFICO ESERCIZI SERIE - "AMICI"/"MANI" - INIZIO -----------   */
/* MODULATORI DOMANDA */
/* modulatori domanda: a immagine singola (amici e mani), a immagine doppia(mani) avvicinabili (stesse dimensioni)
   (mano singola -> vedi es.1, mano doppia -> vedi es.2 mano sx => img sx avvicinabile)*/
.mostra_domanda_amici,
.mostra_domanda,
.mostra_sx_domanda {
  padding: 0px!important;
  box-shadow:none!important;
}

.mostra_domanda_amici {
  -webkit-margin-after:-1px;  /*correzione webkit*/
}

/* mano doppia -> vedi es.2 mano dx => img dx avvicinabile */  
.mostra_dx_domanda { 
  margin-left: -20px;  
  padding: 0px!important;
  box-shadow:none!important;
}

/* immagine doppia asimmetrica (dimensioni miste): img sx ridotta marginata 
   (vedi es.3 mano sx) */ 
.mostra_sxr_domanda {
  margin: 0 0 5px 0;
  padding: 0px!important;
  box-shadow:none!important;
}

/* immagine doppia asimmetrica (dimensioni miste): img dx piena avvicinata 
   (vedi es.3 simbolo dx) */ 
.mostra_dxcr_domanda { 
  margin: 0 -5px 0 0;  
  padding: 0!important;
  box-shadow:none!important;
}

/* operatore somma fra due immagini avvicinabili */
.operatore {
  height:20px;
  width:20px;
  margin:0 -10px 0 -15px;
  text-align: center;
  font-size:3em; 
  line-height: 0.53em;
  color:rgba(0,0,0, 0.4);
  display: inline-block;
}

/* nasconde la scrittura hack utile a uniformare altezza operatore 
   in webkit e gecko , vedi es. 4  */
.operatore > a {
  visibility: hidden;
} 

/*utilizzato con i simboli simil dado consente semplicemente la riflessione dell'immagine 
  vedi uso img dx in es. 4 */
.ruota90 {
 transform: rotate(90deg);
}


/* CAMPI RADIO */
/* campo input radio form
#contenuti #materiali > section > article #attivi form[name=mani]  #esercizio input {
   margin: 0!important;} */

/* - SPECIFICO ESERCIZI SERIE - "AMICI"/"MANI" - FINE ------------------------------------   */



/* - SPECIFICO ESERCIZI SERIE - "AMICI" - INIZIO ------------------------------------   */


/* specifici esercizi "amici" serie "colora" animazione css di attesa in caso risposta corretta (sopra spazio pulsanti) */
.aspettaprossimo_colora{
  margin: -22px 0 0 0;
  font-size:1.05em; 
  color:rgba(0,0,0,0.4);
  line-height: 0.8em;
  -webkit-animation-name: compare_c;
  animation-name: compare_c;
  -webkit-animation-duration: 7s;
  animation-duration: 7s;
  -webkit-animation-delay: 3.5s;
  animation-delay: 3.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  
/* specifici esercizi "amici" serie colora" - ANIMAZIONE CSS (in box sopra spazio pulsanti) */
@-webkit-keyframes compare_c {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes compare_c {
  0% {opacity: 0;}
  100% {opacity: 1;}
} 
  
.attendi_colora {  
  background:url(/blu/struttura/immagini/attendi.gif)  center bottom  / 120px 20px no-repeat;
}  
 
/*in esercizi "colora amici" distanzia pulsanti dal fondo*/
#contenuti #materiali > section > article #attivi form[name = livello_c] #esercizio fieldset[name = manomano] {
margin: 0 0 20px 0;
}
/* in esercizi "scopri amici" annulla colore testo che sarebbe in ogni caso visibile poich� correlato a valore d�invio (value)
e aggiunge "+" opportuna immagine di sfondo */
#contenuti #materiali > section > article #attivi form[name = livello_s] input[type=submit] {
color:rgba(255,255,0,0);
background-image: url(/blu/struttura/immagini/amici/extra/08+.png);
background-size: 10px 10px; 
background-position: center  center; 
background-repeat: no-repeat;
}
/* in esercizi "scopri amici" maggiore opacit� immagine sfondo con il pulsante corrispondente a posizione selezionata */
#contenuti #materiali > section > article #attivi form[name = livello_s] .subcheck input[type=submit] {
background-image: url(/blu/struttura/immagini/amici/extra/10+.png);
}
/* - SPECIFICO ESERCIZI SERIE - "AMICI"- FINE ------------------------------------   */



/* - SPECIFICO ESERCIZI SERIE - FEEDBACK per "MANI"(tipo 1-7) "QUANTI"(tipo 8) "QUALE"(tipi 9)  - INIZIO -----------   */
/* per esercizi livelli relativi */
/* 1-7 esercizi "mani"; 8 esercizi "quanti" e "quale" */
/* !!! si distinguono per comportamento a diversa larghezza layout in mediaqueries*/

/* >> GENERALI

/* specifici esercizi "mani" da 1 a 5 - BOX animazione css di attesa in caso risposta corretta (sopra spazio pulsanti) */
.aspettaprossimo {
  font-size:0.8em!important; 
  color:rgba(0,0,0,0.4);
  line-height: 1em;
  -webkit-animation-name: compare;
  animation-name: compare;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  
/* specifici esercizi "mani" da 1 a 5 - ANIMAZIONE CSS (in box sopra spazio pulsanti) */
@-webkit-keyframes compare {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes compare {
  0% {opacity: 0;}
  100% {opacity: 1;}
} 
/* specifici esercizi "mani" da 1 a 5 - ANIMAZIONE GIF che sostituisce pulsanti in caso di risposta corretta */
/* contestualmente i pulsanti saranno stati posti in condizione "hidden" (attraverso specificazione in ciclo for) */  
.attendi {  
  background:url(/blu/struttura/immagini/attendi.gif) center center / 120px 20px no-repeat;
}

/* specifici per esercizi "mani" da 1 a 7 
/* contenitore pulsanti  - (reca il clear per il contenimento dei float precedenti) */
.blocco_pulsanti_1,
.blocco_pulsanti_2,
.blocco_pulsanti_3,
.blocco_pulsanti_4,
.blocco_pulsanti_5,
.blocco_pulsanti_6,
.blocco_pulsanti_7 {
  display:block;
  clear: both;
}

/* riempie vuoto interlocutorio per layout a sviluppo verticale (layout stretto) */
.interrogo_1,
.interrogo_2, 
.interrogo_3,
.interrogo_4,  
.interrogo_5,  
.interrogo_6,
.interrogo_7 {
 display: none;
 font-size: 2.5em;
 line-height:2.2em;
 color:rgba(0,0,0,0.4);
}

/* usata in prima pagina apertura esercizio (pagine risultati)
   per dare descrizione domanda e per mantenere altezza box filettato */
.descrivi_1,
.descrivi_2,
.descrivi_3,
.descrivi_4,
.descrivi_5,
.descrivi_6,
.descrivi_7 {
  height: 45px;
  margin:-1px 0 1px 0;
  position: relative;
  display: block;
  clear: right;
  text-align: center;
  font-size:1.3em; 
  line-height: 0.9em;
  color:rgba(193,0,31, 0.8);
}


/* specifici per esercizi "quanti" 8 */
/* notazione centrale aggiuntiva risposta esatta (con funzione sedimentazione immagine/cifra
   e funzione di contenimento dei float (notazione base e suggerimento) nel box esercizio */
.contieni_8 {
  height: 30px;
  position: relative;
  top: -30px;
  display: block;
  clear: both;
  text-align: center;
  font-size:1.3em; 
  line-height: 1.68em; 
}

/* usata in prima pagina apertura esercizio (pagine risultati)
   per dare descrizione domanda e per mantenere altezza box filettato */
.descrivi_8 {  
  margin:85px 0 30px 0;
  display: block;
  text-align: center;
  font-size:1.3em; 
  line-height: 1.2em;
  color:rgba(193,0,31, 0.8);
}


/* specifici per esercizi "quale" 9 
/* usata in prima pagina apertura esercizio (pagine risultati)
   per dare descrizione domanda e per mantenere altezza box filettato */
.descrivi_9 {
  max-width:260px;
  margin:-24px auto 30px auto;
  display: block;
  text-align: center;
  font-size:1.3em; 
  line-height: 1.15em;
  color:rgba(193,0,31, 0.8);
}


/*--------------------------------------------------------------------*/

/* >> FEEDBACK SUGGERIMENTI */
/* specifici per esercizi "mani" da 1 a 5 
   stili associati a corrispondenti:  "descrivi_", "interrogo_", "risposta_", "blocco_pulsanti_"  */
/* box generale - es. 1-5 */
#contenuti #materiali > section > article #attivi .suggerisci_1,
#contenuti #materiali > section > article #attivi .suggerisci_2,
#contenuti #materiali > section > article #attivi .suggerisci_3,
#contenuti #materiali > section > article #attivi .suggerisci_4,
#contenuti #materiali > section > article #attivi .suggerisci_5 {
  width: 80px;
  height: 100px;
  margin: -130px 0 0 10px; 
  float: left; 
  display: inline-block;
  font-size: 2em; 
  line-height: 3.5em;
  text-align: center;
  color: rgba(12,133,205,0.7);
}

/*--------------------------------------------------------------------*/

/* spec. tag a: background animato suggerimento/conferma in caso di risposta - es. 1 */
#contenuti #materiali > section > article #attivi .suggerisci_1 a {
  width: 80px;
  height: 100px;
  float: left; 
  background-size: 80px 80px;
  background-repeat: no-repeat;
  background-position: top center; 
  background-image: url(/blu/struttura/immagini/mani/base_mani.png);
  font-size:1.8em; 
  line-height:1.7em!important; 
  text-align:center;
  color: rgba(0,0,0,0.3);
}

/* spec. tag a: background animato suggerimento/conferma in caso di risposta - es. 2 */
#contenuti #materiali > section > article #attivi .suggerisci_2 a {
  width: 142px;
  height: 100px;
  margin: 0 -42px 0 -10px; /* margine sx negativo impedisce lo slittamento a dx delle mani domanda */
  float: left; 
  background-size: 80px 80px, 80px 80px;
  background-repeat: no-repeat, no-repeat;
  background-position: top left, top right;
  background-image: url(/blu/struttura/immagini/mani/base_mani.png),
                    url(/blu/struttura/immagini/mani/base_mani.png);
  font-size: 1.8em; 
  line-height: 1.7em!important; 
  text-align: center;
  color: rgba(0,0,0,0.3);
}

/* spec. tag a: background animato suggerimento/conferma in caso di risposta - es. 3 */
#contenuti #materiali > section > article #attivi .suggerisci_3 a {
  width: 142px;
  height: 100px;
  margin: 0 -42px 0 -10px; /* margine sx negativo impedisce lo slittamento a dx delle mani domanda */
  float: left; 
  background-size: 40px 40px, 65px 65px;
  background-repeat: no-repeat, no-repeat;
  background-position: 18px 35px, 60px 13px; /*  margine sx, margine alto */
  background-image: url(/blu/struttura/immagini/mani/base_mani.png),
                    url(/blu/struttura/immagini/mani/base_mani.png);
  font-size: 1.8em; 
  line-height: 1.7em!important; 
  text-align: center;
  color: rgba(0,0,0,0.3);
}

/* spec. tag a: background animato suggerimento/conferma in caso di risposta - es. 4 e 5 */
#contenuti #materiali > section > article #attivi .suggerisci_4 a,
#contenuti #materiali > section > article #attivi .suggerisci_5 a {
  width: 126px;
  height: 100px;
  margin: 0px -42px 0 -5px; /* margine sx negativo impedisce lo slittamento a dx delle mani domanda */
  float: left;
  background-size: 65px 65px, 65px 65px;
  background-repeat: no-repeat, no-repeat;
  background-position: top left, top right;
  background-image: url(/blu/struttura/immagini/mani/base_mani.png),
                    url(/blu/struttura/immagini/mani/base_mani.png);
  font-size: 1.8em; 
  line-height: 1.7em!important; 
  text-align: center;
  color: rgba(0,0,0,0.3); 
}

/*--------------------------------------------------------------------*/
/*--------------------------------------------------------------------*/

/* specifici per esercizi "mani" 6�e 7 
   stili associati a corrispondenti:  "descrivi_", "interrogo_", "risposta_", "blocco_pulsanti_"  */
/* NON � prevista associazione tag a per background animato suggerimento/conferma */
/* box generale - es. 6-7 */
#contenuti #materiali > section > article #attivi .suggerisci_6,
#contenuti #materiali > section > article #attivi .suggerisci_7 {
  width: 80px;
  height: 100px;
  margin: -106px 0 0 10px;
  float: left; 
  display: inline-block;
  font-size:1.3em; 
  line-height:1.7em;
  text-align:center;
  color:rgba(0,0,0,0.4);
}


/* es. da 6 a 7 specificazione testo numero punti risposta corretta */
#contenuti #materiali > section > article #attivi .suggerisci_6 .si,
#contenuti #materiali > section > article #attivi .suggerisci_7 .si {
  font-size:2em; 
  line-height:1.35em; 
  color:rgba(12,133,205, 0.8);
}

/* es. da 6 a 7 specificazione testo numero punti risposta errata */
#contenuti #materiali > section > article #attivi .suggerisci_6 .no,
#contenuti #materiali > section > article #attivi .suggerisci_7 .no {
  font-size:2em; 
  line-height:1.35em; 
  color:rgba(193,0,31,0.8);
}

/*--------------------------------------------------------------------*/

/* specifici per esercizi "quanti" 8 e "quale" 9 
   stile "8" � associato a corrispondenti: "risposta" + "contieni", "descrivi" 
   stile "9" � associato a corrispondenti: "risposta" + "descrivi"   
/* NON � prevista associazione tag a per background animato suggerimento/conferma */
/* box generale - es. 8-9 */
#contenuti #materiali > section > article #attivi .suggerisci_8,
#contenuti #materiali > section > article #attivi .suggerisci_9 {
  width: 85px; /* aumenta larghezza per contenere punteggi fino a 4 cifre */
  height: 110px;
  margin: 0 0 0 10px;
  float: left; 
  display: inline-block;
  font-size:1.3em; 
  text-align:center;
  line-height:1.70em; /* allinea altezza con corrispondenti "risposta" */
  color:rgba(0,0,0,0.4);
}

/* modifica margini "9"  */
#contenuti #materiali > section > article #attivi .suggerisci_9 {
  margin: -10px 0 0 10px;
}


/* es. da 8 a 9 specificazione testo numero punti risposta corretta */
#contenuti #materiali > section > article #attivi .suggerisci_8 .si,
#contenuti #materiali > section > article #attivi .suggerisci_9 .si {
  font-size:2em; 
  color:rgba(12,133,205, 0.8);
}

/* es. da 8 a 9 specificazione testo numero punti risposta errata */
#contenuti #materiali > section > article #attivi .suggerisci_8 .no,
#contenuti #materiali > section > article #attivi .suggerisci_9 .no {
  font-size:2em; 
  color:rgba(193,0,31,0.8);
}

/* distanziatore interno "8" */
#contenuti #materiali > section > article #attivi .suggerisci_8 .prima {
  line-height:1.80em;
}

/* distanziatore interno "9" */
#contenuti #materiali > section > article #attivi .suggerisci_9 .prima  {
  line-height:1.78em;
}

/*--------------------------------------------------------------------*/

/* >> FEEDBACK RISPOSTA */
/* esercizi da 1�a 7 */
/* notazione risposta corretta  */
#contenuti #materiali > section > article #attivi .risposta_1c,
#contenuti #materiali > section > article #attivi .risposta_2c,
#contenuti #materiali > section > article #attivi .risposta_3c, 
#contenuti #materiali > section > article #attivi .risposta_4c, 
#contenuti #materiali > section > article #attivi .risposta_5c,
#contenuti #materiali > section > article #attivi .risposta_6c,
#contenuti #materiali > section > article #attivi .risposta_7c  {
  width: 80px;
  height: 100px;
  margin: -130px 10px 0 0;
  float: right; 
  display: inline-block;
  font-size:1.3em; 
  line-height:9.4em; /* adegua altezza linea di base per compensare riduzione relativa dimensione font rispetto contieni e descrivi relativi */
  color:rgba(0,0,0,0.4);
  text-align:center;
  background-image: url(/blu/struttura/immagini/emo/esi_b.png);
  background-size: 80px 80px;
  background-repeat: no-repeat;
  background-position: top;  
}

/* esercizi da 1�a 7 */
/* notazione risposta errata  */
#contenuti #materiali > section > article #attivi .risposta_1e,
#contenuti #materiali > section > article #attivi .risposta_2e,
#contenuti #materiali > section > article #attivi .risposta_3e,
#contenuti #materiali > section > article #attivi .risposta_4e,
#contenuti #materiali > section > article #attivi .risposta_5e, 
#contenuti #materiali > section > article #attivi .risposta_6e,
#contenuti #materiali > section > article #attivi .risposta_7e {
  width: 80px;
  height: 100px;
  margin: -130px 10px 0 0;
  float: right; 
  display: inline-block;
  font-size:1.3em; 
  line-height:9.4em; /* adegua altezza linea di base per compensare riduzione relativa dimensione font rispetto contieni e descrivi relativi */
  color:rgba(0,0,0,0.4);
  text-align:center;
  background-image: url(/blu/struttura/immagini/emo/eno_g.png);
  background-size: 80px 80px;
  background-repeat: no-repeat;
  background-position: top;  
}


/* esercizi da 6�a 7 */
/*  notazione risposta nulla  */
#contenuti #materiali > section > article #attivi .risposta_6n,
#contenuti #materiali > section > article #attivi .risposta_7n {
  width: 80px;
  height: 100px;
  margin: -130px 10px 0 0;
  float: right; 
  display: inline-block;
  font-size:1.3em; 
  line-height:9.4em; /* adegua altezza linea di base per compensare riduzione relativa dimensione font rispetto contieni e descrivi relativi */
  color:rgba(0,0,0,0.4);
  text-align:center;
  background-image: url(/blu/struttura/immagini/emo/ebo_g.png);
  background-size: 80px 80px;
  background-repeat: no-repeat;
  background-position: top;  
}

/* ESERCIZI 8�e 9 */
/* box generale */
#contenuti #materiali > section > article #attivi .risposta_8c,
#contenuti #materiali > section > article #attivi .risposta_9c,
#contenuti #materiali > section > article #attivi .risposta_8e,
#contenuti #materiali > section > article #attivi .risposta_9e,
#contenuti #materiali > section > article #attivi .risposta_8n,
#contenuti #materiali > section > article #attivi .risposta_9n  {
  width: 80px;
  height: 100px;
  margin: 0 10px 0 0;
  float: right; 
  display: inline-block;
  font-size:1.3em; 
  line-height:9.4em; /* adegua altezza linea di base per compensare riduzione relativa dimensione font rispetto contieni e descrivi relativi */
  color:rgba(0,0,0,0.4);
  text-align:center;
  background-size: 80px 80px;
  background-repeat: no-repeat;
  background-position: top;  
}

/* notazione risposta corretta  */
#contenuti #materiali > section > article #attivi .risposta_8c,
#contenuti #materiali > section > article #attivi .risposta_9c  {
  background-image: url(/blu/struttura/immagini/emo/esi_b.png);
}

/* notazione risposta errata  */
#contenuti #materiali > section > article #attivi .risposta_8e,
#contenuti #materiali > section > article #attivi .risposta_9e {
  background-image: url(/blu/struttura/immagini/emo/eno_g.png);
}

/*  notazione risposta nulla  */
#contenuti #materiali > section > article #attivi .risposta_8n,
#contenuti #materiali > section > article #attivi .risposta_9n {
  background-image: url(/blu/struttura/immagini/emo/ebo_g.png); 
}

/* modifico margini 9 per sovrapporsi a descrivi_9 */
#contenuti #materiali > section > article #attivi .risposta_9c,
#contenuti #materiali > section > article #attivi .risposta_9e,
#contenuti #materiali > section > article #attivi .risposta_9n {
  margin: -10px 10px 0 0;
}

/*--------------------------------------------------------------------*/
/* - SPECIFICO ESERCIZI SERIE - FEEDBACK per "MANI" "QUANTI" "QUALE"  - FINE -----------   */


/* - SPECIFICO ESERCIZI SERIE - FEEDBACK per "AMICI" "MANI" "QUANTI"  - INIZIO -----------   */
/* ad hoc si/no */
/* specificazioni aggiuntive colore */
.blu_si {color:rgba(12,133,205, 0.8);}
.red_no {color:rgba(193,0,31,0.8);}
/* - SPECIFICO ESERCIZI SERIE - FEEDBACK per "AMICI" "MANI" "QUANTI"  - FINE -----------   */


/* ALTRE SPECIFICAZIONI PAGINE ATTIVIT� - INIZIO -----------------------------------  */

/* -> NOTAZIONI PAGINA APERTURA SEZIONE  */
/* -> introduzione/istruzioni lunga quadro serie esercizi */
.notazione_a {
  /* margin: 0 10px 15px 10px; */
  font-family: 'MateRegular', Georgia, serif!important;
  text-align:justify;
  -moz-hyphens: auto!important;
  -webkit-hyphens: auto!important;
  -ms-hyphens: auto!important;    
  hyphens: auto!important;
  font-size:1.2em!important; 
  line-height: 1.0em;
} 
.notazione_a span{ 
  color:rgba(193,0,31,0.8)!important;
} 

/* -> titolo quadro serie esercizi  */
.notazione_t {
  /* margin: 0 5px 6px 5px; */
  font-family:'MateSCRegular', Georgia, serif!important;
  font-size:0.98em!important; 
  color:rgba(12,133,205, 0.8);
  line-height:1.1em!important;
} 

/* -> sottotitolo quadro serie esercizi  */
.notazione_st {
  /* margin: 0 5px 6px 5px; */
  font-family:'MateRegular', Georgia, serif!important;
  font-size:0.98em!important; 
  color: rgba(102, 0, 0, 0.8);
  line-height:1.1em!important;
} 

/* -> piedipagina quadro serie esercizi  */
.notazione_f {
  /* margin: 0 5px 6px 5px; */
  font-family:'MateItalic', Georgia, serif!important;
  font-size:0.85em!important; 
  line-height:1.3em!important;
    color:rgba(0,0,0, 0.6);
} 
 
 .notazione_d {
  /* margin: 0 5px 6px 5px; */
  font-family:'MateRegular', Georgia, serif!important;
  font-size:1em!important; 
  line-height:1.2em!important;
} 
 
 
.istruzioni_gara {
 margin: -15px auto 25px auto;
 font-family:'MateItalic', Georgia, serif!important;
 color:rgba(12,133,205, 0.8);
 text-align: center;
 font-size:1em; 
 line-height: 1.5em;
 display: block; 
}





/*--------------------------------------------------------------------*/

/* -> HACK E CORRETTORI DI NECESSIT� */
/* in "amici", "mani", "quanti", "quale" */
/* necessario per incolonnare/spaziare radiobox e numero corrispondente con variazioni in mediaqueries */
/* necessario per incolonnare/spaziare pulsanti con variazioni in mediaqueries */
.radio_blocco { 
  display: inline-block;
  margin: 0 2px 6px 2px;
  padding: 0;
}


/*-------------------------------------------------------------------------*/

/* -> ATTESTATI */
/* ATTESTATO MANI - � pi� sintetico perch� il testo � preimpostato in immagine */
#contenuti #materiali > section > article #attivi #attestato_sogliamax {
  margin:30px auto 20px auto;
  font-family:'MateItalic', Georgia, serif; 
  color:rgba(63,157,210, 1);
  font-size:1.1em; 
  text-align:center;
  line-height:1.5em;
  display: block;
  z-index:1;
}

#contenuti #materiali > section > article #attivi #attestato_sogliamax .conteggio{
  margin:0 auto 50px auto;
  display: block;
}

/* ATTESTATO QUANTI  - � pi� prolisso perch� testo e costruzione avviene di volta in volta */
#contenuti #materiali > section > article #attivi #attestato_gruppo #attestato_grafica {
  margin:30px auto 20px auto;
  position:relative;  
    text-align:center; 
}

#contenuti #materiali > section > article #attivi #attestato_gruppo #attestato_grafica img{
  width: 100%;
  height: auto;
  margin:0 auto 30px auto;
}

#contenuti #materiali > section > article #attivi #attestato_gruppo #attestato_grafica #attestato_testo {
  left: 0;
  top: 15%;
  width: 100%;
  padding: 0 10px 0 10px;
  position: absolute;
  font-family:'MateRegular', Georgia, serif; 
  color:rgba(63,157,210, 1);
  font-size:1.2em; 
  line-height:1.5em;
  text-align:center; 
}

#contenuti #materiali > section > article #attivi #attestato_gruppo #attestato_grafica #attestato_testo .livello {
  font-family:'MateSCRegular', Georgia, serif; 
  color:rgba(0,0,0, 0.5);
  font-size:1.3em; 
  text-align:center; 
}
#contenuti #materiali > section > article #attivi #attestato_gruppo #attestato_grafica #attestato_testo .cifra {
  font-family:'MateRegular', Georgia, serif; 
  color:rgba(193,0,31,0.8);
  font-size:1.3em; 
  text-align:center; 
}
/*-------------------------------------------------------------------------*/


/* >> ALTRE SPECIFICAZIONI "AMICI" - INIZIO */
#mostra_caso_amici {
  width: 160px;
  height: 100px;
  margin: 0 0 13px 0;
  -webkit-margin-after:15px; /*correzione webkit */
  display: inline-block;
  font-size:2em; 
  text-align:center;
  line-height:5.5em!important;
  color:rgba(0,0,0,0.2);
  background-size: 160px 45px;
  background-repeat: no-repeat;
  background-position: top center; 
}

#mostra_coppia_amici {
  width: 160px;
  height: 100px;
  margin: 0 0 13px 0;
 -webkit-margin-after:15px;  /*correzione webkit*/
  display: inline-block;
  font-size:2em; 
  text-align:center;
  line-height:5.5em!important;
  color:rgba(0,0,0,0.2);
  background-size: 160px 45px, 160px 45px;
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center; 
  background-image: url(/blu/struttura/immagini/amici/10/base_amici.png),
                    url(/blu/struttura/immagini/amici/10/base_amici.png);
}

.mostra_testo_amici {
  width: 160px;
  margin: 5px auto 28px auto; 
  -webkit-margin-after:29px; /*correzione webkit */
  display: block;
  font-size:1.3em!important; 
  text-align:center;
  line-height:2.5em!important;
  color:rgba(193,0,31,0.8)!important; 
}

#mostra_esito_amici {
  width: 160px;
  margin: 0 auto 0 auto;
  display: inline;
  font-size:1.3em!important; 
  text-align:center;
  line-height:0.9em!important;
  color:rgba(193,0,31,0.8)!important; 
}

#mostra_selezione_amici {
  width: 160px;
  height: 145px; 
  margin: 0 0 0 0;
  display: inline-block;
  font-size:1.3em; 
  text-align:center;
  line-height:0.9em;
  color:rgba(193,0,31,0); 
  background-size: 160px 45px, 160px 45px;
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center; 
  background-image: url(/blu/struttura/immagini/amici/10/base_amici.png),
                    url(/blu/struttura/immagini/amici/10/base_amici.png);
}

/* >> ALTRE SPECIFICAZIONI "AMICI" - FINE */
/*-------------------------------------------------------------------------*/

/* >> ALTRE SPECIFICAZIONI "ABACO" - INIZIO */
/* contenitore abaco */
#contenuti #materiali > section > article #attivi form #abaco  {
  margin:30px auto 20px auto;
  border:4px solid rgba(12,133,205, 0.05);
  text-align:center;  
  position:relative;
}

/*per posizionare e creare un margine rispetto al riquadro contenitore */
#contenuti #materiali > section > article #attivi form #abaco fieldset {
  margin:10px auto 90px auto;
  display:inline-block; 
}

/* escludo i campi "radio" standard, li sostituir� utilizzando le rispettive etichette "label for"  */
#contenuti #materiali > section > article #attivi form #abaco fieldset p input[type=radio]  {
  display:none;
}

/* specifico intestazioni fieldset "unit�" */
#contenuti #materiali > section > article #attivi form #abaco fieldset .unit span  {
  color:rgba(59,140,255,1);
}

/* specifico intestazioni fieldset "decine" */
#contenuti #materiali > section > article #attivi form #abaco fieldset .deci span  {
  color:rgba(195,38,31, 1);
}

/* specifico intestazioni fieldset "centinaia" */
#contenuti #materiali > section > article #attivi form #abaco fieldset .cent span  {
  color:rgba(48,187,107, 1);
}

/* specifico intestazioni fieldset "migliaia" */
#contenuti #materiali > section > article #attivi form #abaco fieldset .migl span  {
  color:rgba(170,14,255,1);
}


/* definisco la struttura base delle etichette relative agli input radio usati nell�abaco - stato normale */
#contenuti #materiali > section > article #attivi form #abaco fieldset p input[type=radio] + label  {
  position:relative;
  background-size: 20px 20px;
  background-position:top center;
  background-repeat:no-repeat;
  width:20px;
  height:20px;
  margin: 5px 5px 5px 5px;
  padding:0;
  font-family:'MateRegular', Georgia, serif;
  color:rgba(0,0,0,0);
  cursor: pointer;    
}

/* specifico sfondo delle etichette relative agli input radio - "unit�" - normale */
#contenuti #materiali > section > article #attivi form #abaco fieldset .unit input[type=radio] + label  {
  background-image: url(/blu/struttura/immagini/radiobox/blu_chiaro_vuoto.png);
}

/* specifico sfondo delle etichette relative agli input radio - "decine"- normale */
#contenuti #materiali > section > article #attivi form #abaco fieldset .deci input[type=radio] + label  {
  background-image: url(/blu/struttura/immagini/radiobox/rosso_vivo_vuoto.png);
}

/* specifico sfondo delle etichette relative agli input radio - "centinaia"- normale */
#contenuti #materiali > section > article #attivi form #abaco fieldset .cent input[type=radio] + label  {
  background-image: url(/blu/struttura/immagini/radiobox/verde_intenso_vuoto.png);
}

/* specifico sfondo delle etichette relative agli input radio - "migliaia" - normale */
#contenuti #materiali > section > article #attivi form #abaco fieldset .migl input[type=radio] + label  {
  background-image: url(/blu/struttura/immagini/radiobox/cicla_scuro_vuoto.png);
}

/* specifico sfondo delle etichette relative agli input radio - "unit�" - inferiore a selezionato */
#contenuti #materiali > section > article #attivi form #abaco fieldset .unit input[type=radio]:checked ~ label  {
  background-image: url(/blu/struttura/immagini/radiobox/blu_chiaro_pieno.png);
}

/* specifico sfondo delle etichette relative agli input radio - "decine" - inferiore a selezionato */
#contenuti #materiali > section > article #attivi form #abaco fieldset .deci input[type=radio]:checked ~ label  {
  background-image: url(/blu/struttura/immagini/radiobox/rosso_vivo_pieno.png);
}

/* specifico sfondo delle etichette relative agli input radio - "centinaia" - inferiore a selezionato */
#contenuti #materiali > section > article #attivi form #abaco fieldset .cent input[type=radio]:checked ~ label  {
  background-image: url(/blu/struttura/immagini/radiobox/verde_intenso_pieno.png);
}

/* specifico  sfondo delle etichette relative agli input radio - "migliaia" - inferiore a selezionato */
#contenuti #materiali > section > article #attivi form #abaco fieldset .migl input[type=radio]:checked ~ label  {
  background-image: url(/blu/struttura/immagini/radiobox/cicla_scuro_pieno.png);
}

/* modifico stato comune delle etichette relative agli input radio - - selezionate

  da notare: con questa regola l�elemento checked viene sottratto dalla sua posizione naturale 
  e visualizzato alla base della lista. Ci� influisce positivamente su funzionalit� e visualizzazione,
  tuttavia comporta una sostituzione/slittamento dell�elemento inferiore adiacente.
  Tale evento non � distinguibile essendo annullata l�opacit� del testo delle etichette in tutti gli stati
  diversi da "checked". Unico inconveniente derivato, l�impossibilit� di porre uno spazio in posizione 
  stabile alla met� verticale della lista (per distinguere 5 + 5) */
#contenuti #materiali > section > article #attivi form #abaco fieldset p input[type=radio]:checked + label  {
  position:absolute;
  bottom:40px;
  font-size:1.8em;
} 

/* specifico sfondo e colore testo delle etichette relative agli input radio - "unit�" - selezionato */
#contenuti #materiali > section > article #attivi form #abaco fieldset .unit input[type=radio]:checked + label  {
  background-image: url(/blu/struttura/immagini/radiobox/vuoto.png);
  color:rgba(59,140,255, 1);
}

/* specifico sfondo e colore testo delle etichette relative agli input radio - "decine" - selezionato */
#contenuti #materiali > section > article #attivi form #abaco fieldset .deci input[type=radio]:checked + label  {
  background-image: url(/blu/struttura/immagini/radiobox/vuoto.png);
  color:rgba(195,38,31, 1);
}

/* specifico sfondo e colore testo delle etichette relative agli input radio - "centinaia" - selezionato */
#contenuti #materiali > section > article #attivi form #abaco fieldset .cent input[type=radio]:checked + label  {
  background-image: url(/blu/struttura/immagini/radiobox/vuoto.png);
  color:rgba(48,187,107, 1);
}

/* specifico sfondo e colore testo delle etichette relative agli input radio - "migliaia" - selezionato */
#contenuti #materiali > section > article #attivi form #abaco fieldset .migl input[type=radio]:checked + label  {
  background-image: url(/blu/struttura/immagini/radiobox/vuoto.png);
  color:rgba(170,14,255, 1);
}

/* attivit� calcolatore per abaco numeratore*/
/* contenitore calcolatore - struttura di base */
#contenuti #materiali > section > article #attivi form #calcolatore  {
  margin:30px auto 20px auto;
  position:relative;
  font-family:'MateRegular', Georgia, serif;
  text-align:center;  
}

/* struttura base campi input del calcolatore */
#contenuti #materiali > section > article #attivi form #calcolatore  input[type=number] {
  width:70px;
  margin:0px 10px 30px 10px;
  padding:0px 5px 0px 5px;
  position:relative;
  display:inline-block;
  font-family:'MateRegular', Georgia, serif; 
  font-size:1.8em;
  text-align:center;  
  color: rgba(255,255,255,1);
}

/* specifico comportamento paragrafo per tenere uniti input e intestazioni relative 
anche in caso di ridimensionamento */
#contenuti #materiali > section > article #attivi form #calcolatore p {
  display:inline-block; 
}

/* specifico colore intestazioni input e verbalizzazione numero - "unit�" */
#contenuti #materiali > section > article #attivi form #calcolatore .int_unit,
#contenuti #materiali > section > article #attivi form #calcolatore .verb_unit {
  color:rgba(59,140,255,1);
}

/* specifico colore intestazioni input e verbalizzazione numero - "decine" */
#contenuti #materiali > section > article #attivi form #calcolatore .int_deci,
#contenuti #materiali > section > article #attivi form #calcolatore .verb_deci {
  color:rgba(195,38,31, 1);
}

/* specifico colore intestazioni input e verbalizzazione numero - "centinaia" */
#contenuti #materiali > section > article #attivi form #calcolatore .int_cent,
#contenuti #materiali > section > article #attivi form #calcolatore .verb_cent {
  color:rgba(48,187,107, 1);
}

/* specifico colore intestazioni input e verbalizzazione numero - "migliaia" */
#contenuti #materiali > section > article #attivi form #calcolatore .int_migl,
#contenuti #materiali > section > article #attivi form #calcolatore .verb_migl {
  color:rgba(170,14,255,1);
}

/* specifico colore fondo campi input - "unit�" */
#contenuti #materiali > section > article #attivi form #calcolatore  .num_unit{
  background-color:rgba(59,140,255, 1);
}

/* specifico colore fondo campi input - "decine" */
#contenuti #materiali > section > article #attivi form #calcolatore  .num_deci{
  background-color:rgba(195,38,31, 1);
}

/* specifico colore fondo campi input - "centinaia" */
#contenuti #materiali > section > article #attivi form #calcolatore  .num_cent{
  background-color:rgba(48,187,107, 1);
}

/* specifico colore fondo campi input - "migliaia" */
#contenuti #materiali > section > article #attivi form #calcolatore  .num_migl{
  background-color:rgba(170,14,255,1);
}

/* specifico caratteristiche e opzioni verbalizzazione numero */
#contenuti #materiali > section > article #attivi form #calcolatore .verbale {
  margin: 5px auto 32px auto;
  display: block;
  font-family:'MateItalic', Georgia, serif; 
  font-size: 1.8em;
  line-height:1.2em;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;    
  hyphens: auto;
}

/* diventa blu */
#contenuti #materiali > section > article #attivi form #calcolatore .invertorosso {
  color:rgba(59,140,255,1)!important;
}
/* diventa rosso */
#contenuti #materiali > section > article #attivi form #calcolatore .invertoblu {
  color:rgba(195,38,31, 1)!important;
}

/* specifico distanza  pulsante calcola */
#contenuti #materiali > section > article #attivi form #calcolatore input[type=submit]  {
 margin:16px auto 10px auto;
}
/* >> ALTRE SPECIFICAZIONI "ABACO - FINE */
/*-------------------------------------------------------------------------*/

/* >> ALTRE SPECIFICAZIONI "QUANTI" "QUALE" - INIZIO */
/* ------  specificazioni per esercizi quanti  -----  inizio*/ 
.quanti_domanda {
  padding: 0px!important;
  box-shadow:none!important;
  margin: 0 auto;
  text-align:center!important;
  display: block;
}   
/* ------  specificazioni per esercizi quanti  -----  fine                   */

/* ------  specificazioni per esercizi quale  -----  inizio                   */
.quale_domanda {
height:80px;
width: 80px;
padding-top: 5px;
margin: 0 auto 50px auto;
background:rgba(12,133,205,0.8);
border:2px outset rgba(0,0,0,0.4);
border-radius: 5px;
font-family:'MateSCRegular', Georgia, serif; 
font-size:3em;
line-height:1.3em;
color:rgba(255,255,255, 1);
text-align:center; 
display: inline-block;
}

.quale_parolanumero {
font-family:'MateSCRegular', Georgia, serif; 
color:rgba(12,133,205, 1);
}

#contenuti #materiali > section >  article #attivi form[name=quale] #esercizio input[type=submit] {
  width:80px;
  height:80px; 
  margin:0 10px 15px 10px;
  border:2px outset rgba(0,0,0,0.4);
  color:rgba(0,0,0,0);
  background:rgba(0, 0, 0, 0.1);
  background-size:80px 80px; 
  background-repeat:no-repeat; 
  background-position: top -2px left -2px; /*compensa outset*/
}

#contenuti #materiali > section >  article #attivi form[name=quale] #esercizio input[type=submit]:hover {
  color:rgba(0,0,0,0); 
  background:rgba(0, 0, 0, 0.2);
  background-position: top -2px left -2px; /*compensa outset*/
  background-size:80px 80px; 
}

#contenuti #materiali > section >  article #attivi form[name=quale] #esercizio input[type=submit]:active {
  border:1px outset rgba(0,0,0,0.2);
  color:rgba(0,0,0,0); 
  background:rgba(0, 0, 0, 0.3);
  background-position: top -1px left -1px; /*compensa outset*/
  background-size:80px 80px; 
}

/* >> ALTRE SPECIFICAZIONI "QUANTI" "QUALE" - FINE */
/*-------------------------------------------------------------------------*/
/* >> SPECIFICAZIONI "CALCOLA" - INIZIO */
.calcola_domanda {
  height:60px!important;
  margin: 0 0 20px 0;
  background:rgba(0,0,0,0)!important;
  border:2px solid rgba(12,133,205,0.8);
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0)!important;
  -moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0)!important;
  box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0)!important;
  display: inline-block!important;
}

.calcola_segno {
  height:60px!important;
  padding-top: 5px;
  margin: 0 0 20px 0;
  -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0)!important;
  -moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0)!important;
  box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0)!important;
  display: inline-block!important;
}
.calcola_unisci {
  display: inline-block;
}

/* >> SPECIFICAZIONI "CALCOLA" - FINE */
/*-------------------------------------------------------------------------*/
/* -> BLU - VARIE PER ESERCIZI "ARTICLE" PER PAGINE ATTIVIT� - FINE  ///////////////////////////////*/

/* omissis mpc  */

/* footer ed elementi "attivi" - form */
/* piedipagina form (contenitore pulsanti invio) */
#contenuti #materiali > section > article form footer { 
  margin:0;
  padding:41.6px 0 62.4px 0;
}

/* pulsanti form - contenitore base */
#pulsanti_azione {
  margin:0px auto 5px auto ;
  text-align:center;
}

/* pulsanti form - base e stati */
#contenuti #materiali > section > article form input[type=submit], 
#contenuti #materiali > section > article form input[type=button] {
  width:120px;
  margin:0 0 10px 10px;
  padding:1px 10px 4px 10px; 
  color:rgba(26,255,255, 0.9);
  background:rgba(0, 0, 0, 0.6);
  border:none;
  font-family:'MateRegular', Georgia, serif; 
  font-size:1em;
  text-align:center;
  letter-spacing:0.08em;
  outline-style:none; 
}
/*utilizzato in esercizi "amici" e "mani"*/
#contenuti #materiali > section > article form .subcheck input[type=submit]{
  color:rgba(26,255,255, 1);
  background:rgba(0, 0, 0, 1);
  -moz-box-shadow:    inset 0 0 8px rgba(26,255,255, 1);
  -webkit-box-shadow: inset 0 0 8px rgba(26,255,255, 1);
  box-shadow:         inset 0 0 8px rgba(26,255,255, 1);
}

/* pulsanti form - base e stati - blu  - specifico per rinnova e cambia*/
#contenuti #materiali > section > article form[name=rinnova] input[type=submit], 
#contenuti #materiali > section > article form[name=cambia] input[type=submit] {
  color:rgba(255,255,255, 0.8);  
}

#contenuti #materiali > section > article form input[type=button] {
  color:rgba(255,255,255, 0.8);  
}

#contenuti #materiali > section > article  form input[type=submit]:hover , 
#contenuti #materiali > section > article form input[type=button]:hover {
  color:rgba(26,255,255,0.9); 
  background:rgba(0, 0, 0, 0.8);
}

#contenuti #materiali > section > article  form input[type=submit]:active , 
#contenuti #materiali > section > article form input[type=button]:active {
  color:rgba(26,255,255, 1); 
  background:rgba(0, 0, 0, 1);
}

/*serve per togliere in firefox il riquadro di evidenziazione link selezionati*/ 
#contenuti #materiali > section > article  form input[type=submit]::-moz-focus-inner , 
#contenuti #materiali > section > article form input[type=button]::-moz-focus-inner {
  border :0; 
}


 /* variazioni per liste indici  */
#contenuti #materiali > section > article form[name=tipo] #scegli input[type=submit]{
 width:15px;
 height:16px;
 margin:5px 5px 0 0;
 padding:1px 10px 4px 10px; 
 background-image: url(/blu/struttura/immagini/amici/extra/quadro.png);
 background-size: 10px 10px; 
 background-position: center center; 
 background-repeat: no-repeat;
 background-color:rgba(0, 0, 0, 0.6);
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius:4px;
 font-family:'MateRegular', Georgia, serif;
 color:rgba(26,255,255, 0);
 font-size:0.7em;
 line-height: 1.1em;
 text-align:center;
 outline-style:none; 
}
#contenuti #materiali > section > article form[name=tipo] #scegli input[type=submit]:hover {
 background-color:rgba(0, 0, 0, 0.8);
 background-image: url(/blu/struttura/immagini/amici/extra/punto.png);
}
#contenuti #materiali > section > article form[name=tipo] #scegli input[type=submit]:active{
 background-color:rgba(0, 0, 0, 1);
 background-image: url(/blu/struttura/immagini/amici/extra/punto_+.png);
}


/* variazioni locali alle regole css generali */
/* elimina capolettera per i paragrafi del form */
#contenuti #materiali > section  article  form p:first-of-type::first-letter {
  margin:0; 
  padding:0; 
  font-size:1em; /* - eguaglio alla misura base */ 
  float:none;
  line-height:1.3em;  /* eguaglio alla misura base */
 /* impostazione necessaria e sufficiente per uniformare resa in webkit
	Gecko imposta suo valore tassativo in relazione forma e dimensione lettera) */	
} 

/*elimina rientro prima lettera paragrafi del form */
#contenuti #materiali > section  article  form p {
  text-indent:0;
} 
    

/* omissis - stili visulaizzazione errori di compilazione - come per pagine gestione */
/* omissis - visualizzazione dati utente */ 
/* omissis - visualizzazione homespot */ 
/* omissis - visualizzazione memorandum date interventi gestione  */ 
/* omissis - visualizzazione risultati ricerca */ 


/* CONTENUTI - dx collaterali                                                  
_____________________________________________________________________*/
#contenuti #indice { 
  margin:0; 
  padding:0 10px 0 0;
  font-family:'MateRegular', Georgia, serif; 
  text-align: left;
}

#contenuti #indice > aside  > nav > input {
    display: none;
}

#contenuti #indice > aside > nav label {  /* titolo indice */
  margin:0;
  font-family:'MateSCRegular', Georgia, serif; 
  font-size: 1.6em;  /* 16px  */  
  line-height:1.3em; /* 20.8  */
  display: inline-block;
}

#contenuti #indice > aside > nav > #boxtitoli > ul { 
  margin:5.4px 0 10.4px 0; 
  padding:0; 
  font-family:'MateItalic', Georgia, serif;
  font-size:1.6em;  /* 16px  */
  line-height:1.3em; /* 20.8  */
  list-style-type:none; /* nessun elemento come marcatore */
}

/* specifica sezione titoli voce elenco (dx) - lista titoli */
#contenuti #indice > aside > nav > #boxtitoli > ul li h3 { 
    font-size:0.8em; 
}

/* specifica voce elenco (dx) riferita a pagina corrente - lista titoli */
#contenuti #indice > aside > nav > #boxtitoli > ul li h7 { 
   margin:0 0 0 -0.85em; 
   color:rgba(255, 255, 255, 1);  
   font-family:'MateItalic', Georgia, serif;
}

/* specifica voci elenco (dx) non riferite a pagina corrente - lista titoli */
#contenuti #indice > aside > nav > #boxtitoli > ul li h8   { 
   margin:0 0 0 -0.5em; 
}

/* specifica voci elenco (dx) da nascondere - lista titoli */
#contenuti #indice > aside > nav > #boxtitoli > ul li h9   { 
   display:none;
}


/* hack gestione margini negativi per webkit (safari + crome) */
@media all and (-webkit-min-device-pixel-ratio: 1) {

/* specifica voce elenco (dx) riferita a pagina corrente - lista titoli */
#contenuti #indice > aside > nav > #boxtitoli > ul li h7 { 
  margin:0 0 0 -0.53em;   
}

/* specifica voci elenco (dx) non riferite a pagina corrente - lista titoli */
#contenuti #indice > aside > nav > #boxtitoli > ul li h8   { 
   margin:0 0 0 -0.51em; 
}




}


/*lista pagine */
#contenuti #indice > aside > nav > #boxtitoli #boxpagine { 
  padding:5.4px 0 5.4px 0;
  font-size:1.4em;
  width:100%;
}

/* specifica pagina elenco attiva */
#contenuti #indice > aside > nav > #boxtitoli #boxpagine span { 
  color:rgba(255, 255, 255, 1);
  font-size:1.16em; 
}

/*link articoli precedente e successivo navigazione laterale*/
#boxarticoliprimaedopo_nav { 
  border-top:2px solid rgba(255, 255, 255, 0.2);
  padding:5.4px 0 10.4px 0;
  font-family:'MateItalic', Georgia, serif;
  font-size:1.4em;
  width:70%;
}


/*link articoli precedente e successivo sotto articolo*/
#boxarticoliprimaedopo_sotto { 
  margin-top:10px; 
  padding:0 10px 0 0;
  font-family:'MateItalic', Georgia, serif;
  font-size:1.4em;
  text-align:right;
  width:100%;
}



/* PIEDIPAGINA                                      
_____________________________________________________________________*/
#piedipagina a:link,
#piedipagina a:visited, 
#piedipagina a:hover, 
#piedipagina a:focus,
#piedipagina a:active { 
color:rgba(255, 255, 255, 0.5); 
}

/* PIEDIPAGINA  - sx                                           
_____________________________________________________________________*/
#piedipagina #piedesx { 
  margin:0; 
  padding:10px 40px 0 10px;
  font-family:'MateRegular', Georgia, serif; 
  font-size:1.3em;  /*14px*/
  line-height:1.3em; /* 15.6px  */  
  text-align:right;
}

#piedipagina #piedesx .collaborazioni { 
  font-family:'MateItalic', Georgia, serif;
}

#piedipagina #piedesx .distingui { 
  padding:0 5px 0 5px;
} 

#piedipagina #piedesx dl dd { 
  margin-right:0;
}


/* PIEDIPAGINA  - dx                                           
_____________________________________________________________________*/
#piedipagina #piededx { 
  margin:0; 
  padding:10px 10px 0 0;
  font-family:'MateItalic', Georgia, serif; 
  font-size:1.3em;  /*14px*/
  line-height:1.3em; /* 15.6px  */ 
  text-align:left;  
}

 .copy_piede { 
  font-family: Georgia, serif;
  padding:0 2px 0 0;
  font-size:0.9em;  /*12px*/
}







/*//////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////// MEDIA QUERIES ///////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////*/


/* MEDIAQUERIES  - dx                                           
_____________________________________________________________________*/

/* "320" - MOBILE PORTRAIT  "1"   - INIZIO  /////////////////////////////////////////////// */ 
@media only screen and (max-width: 320px) {
body{
min-width:300px;
margin:0;
padding:0;	
}

}
/* "320" - MOBILE PORTRAIT "320"  - FINE  /////////////////////////////////////////////// */ 


/* "380" - MOBILE PORTRAIT "2"  - INIZIO  /////////////////////////////////////////////// */ 
@media only screen and (max-width: 380px){

/* contenitore scelta livelli */
#contenuti #materiali > section > article #attivi form #scegli  {
   padding: 0 5px 15px 5px;
 }


/* specificazioni x esercizi "mani" - livelli relativi - inizio   */
/* contenitore pulsanti  - (reca il clear per il contenimento dei float precedenti) */
.blocco_pulsanti_2,
.blocco_pulsanti_3,
.blocco_pulsanti_4,
.blocco_pulsanti_5,
.blocco_pulsanti_7 {
  margin-top: 120px;
}

/* riempie vuoto interlocutorio per layout a sviluppo verticale (layout stretto) */
.interrogo_2,
.interrogo_3,
.interrogo_4,
.interrogo_5,
.interrogo_7 {
  display: inline; 
}

/* usata in prima pagina apertura esercizio (pagine risultati)
   per dare descrizione domanda e per mantenere altezza box filettato */
.descrivi_2,
.descrivi_3,
.descrivi_4,
.descrivi_5,
.descrivi_7 {
margin-bottom:40px;
}

/* notazioni suggerimento */
/* segnaposto generale 2 */
#contenuti #materiali > section > article #attivi .suggerisci_2 {
  width: 70px;
  height: 90px;
  margin: -25px 0 0 0!important;
  font-size:2em; 
  line-height:2.4em;
}
/* segnaposto 2 con background suggerimento in caso di risposta  */
#contenuti #materiali > section > article #attivi .suggerisci_2 a {
  width: 108px;
  height: 90px;
  margin: 0 -14px 0 -5px; 
  background-size:60px 60px, 60px 60px;
  font-size:1.6em; 
  line-height:1.4em!important;  
}
/* notazioni risposta  */
#contenuti #materiali > section > article #attivi .risposta_2c,
#contenuti #materiali > section > article #attivi .risposta_2e {
   width: 65px!important;
   height: 90px!important;
   background-size: 70px 70px!important;
   margin: -33px 3px 0px 0!important;
   font-size:1.1em!important; 
   line-height:8.4em!important; 
}

/* notazioni suggerimento */
/* segnaposto generale 3 */
#contenuti #materiali > section > article #attivi .suggerisci_3 {
  width: 70px;
  height: 90px;
  margin: -25px 0 0 0!important;
  font-size:2em; 
  line-height:2.4em;
}
/* segnaposto 3 con background suggerimento in caso di risposta  */
#contenuti #materiali > section > article #attivi .suggerisci_3 a {
  width: 108px;
  height: 90px;
  margin: 0 -14px 0 -5px; 
  background-size:34px 34px, 50px 50px;
  background-position: 8px 23px, 40px 9px; /*  margine sx, margine alto */
  font-size:1.6em; 
  line-height:1.4em!important;  
}
/* notazioni risposta 3  */
#contenuti #materiali > section > article #attivi .risposta_3c,
#contenuti #materiali > section > article #attivi .risposta_3e {
   width: 65px!important;
   height: 90px!important;
   background-size: 70px 70px!important;
   margin: -33px 3px 0px 0!important;
   font-size:1.1em!important; 
   line-height:8.4em!important; 
}

/* notazioni suggerimento */
/* segnaposto generale 4 e 5 */
#contenuti #materiali > section > article #attivi .suggerisci_4,
#contenuti #materiali > section > article #attivi .suggerisci_5 {
  width: 70px;
  height: 90px;
  margin: -25px 0 0 0!important;
  font-size:2em; 
  line-height:2.4em;
}
/* segnaposto 4 e 5 con background suggerimento in caso di risposta  */
#contenuti #materiali > section > article #attivi .suggerisci_4 a,
#contenuti #materiali > section > article #attivi .suggerisci_5 a {
  width: 85px;
  height: 90px;
  margin: -3px -14px 0 0; 
  background-size:45px 45px, 45px 45px;
  font-size:1.6em; 
  line-height:1.4em!important;  
}
/* notazioni risposta 4 e 5  */
#contenuti #materiali > section > article #attivi .risposta_4c,
#contenuti #materiali > section > article #attivi .risposta_4e,
#contenuti #materiali > section > article #attivi .risposta_5c,
#contenuti #materiali > section > article #attivi .risposta_5e {
   width: 65px!important;
   height: 90px!important;
   background-size: 70px 70px!important;
   margin: -33px 3px 0px 0!important;
   font-size:1.1em!important; 
   line-height:8.4em!important; 
}

/* notazioni suggerimento */
/* segnaposto generale 7 */
#contenuti #materiali > section > article #attivi .suggerisci_7 {
  margin: 0 0 0 0!important; 
}
/* notazioni risposta 7 */
#contenuti #materiali > section > article #attivi .risposta_7n,
#contenuti #materiali > section > article #attivi .risposta_7c,
#contenuti #materiali > section > article #attivi .risposta_7e {
   margin: -35px 0px 0 0!important;
}
/* specificazioni x esercizi mani  - fine   */

/* -> HACK E CORRETTORI DI NECESSIT� */
/* in "amici", "mani", "quanti", "quale" */
/* necessario per incolonnare/spaziare radiobox e numero corrispondente con variazioni in mediaqueries */
/* necessario per incolonnare/spaziare pulsanti con variazioni in mediaqueries */
.radio_blocco { 
  display: inline-block;
  margin: 0;
  font-size: 0.9em!important;
}


}
/* "380" - MOBILE PORTRAIT "2"  - FINE  /////////////////////////////////////////////// */ 


/* "400" - MOBILE PORTRAIT "3"  - INIZIO  /////////////////////////////////////////////// */ 
@media only screen and (max-width: 400px){
/*body{
  font-size: 85.5%; 
}*/


/* specificazioni x esercizi "quanti" (8) - inizio */
/*attestato punteggio */
#contenuti #materiali > section > article #attivi #attestato_gruppo #attestato_grafica #attestato_testo {
  top: 8%;
  padding: 0 2px 0 2px;
}
/* specificazioni x esercizi "quanti" (8) - fine */

/* specificazioni x esercizi "quale" (9) - inizio */
/* specificazione domanda centrale */
.quale_domanda {
height:44px!important;
width: 44px!important;
margin: 0 auto 50px auto;
font-size:1.8em!important;
}
/* usata in prima pagina apertura esercizio (pagine risultati)
   per dare descrizione domanda e per mantenere altezza box filettato */
.descrivi_9 {
  margin:-20px auto 20px auto; 
  font-size:1em; 
  line-height: 1.15em;
}
/* notazioni suggerimento */
#contenuti #materiali > section > article #attivi #esercizio .suggerisci_9 {
  margin: -12px 0 0 0;
  width: 60px; 
  height: 80px;
  font-size:0.85em; 
  line-height:1.6em; 
}
/* notazioni risposta  */
#contenuti #materiali > section > article #attivi #esercizio .risposta_9c,
#contenuti #materiali > section > article #attivi #esercizio .risposta_9e,
#contenuti #materiali > section > article #attivi #esercizio .risposta_9n  {
  margin: -7px  2px 0 3px;
  width: 55px;
  height: 70px;
  font-size:0.85em; 
  line-height:8.4em!important; 
  background-size: 55px 55px;   
}
/* pulsanti grafici */
#contenuti #materiali > section >  article #attivi form[name=quale] #esercizio .radio_blocco input[type=submit],
#contenuti #materiali > section >  article #attivi form[name=quale] #esercizio .radio_blocco input[type=submit]:hover,
#contenuti #materiali > section >  article #attivi form[name=quale] #esercizio .radio_blocco input[type=submit]:active {
  width:50px;
  height:50px; 
  margin:0 10px 15px 10px;
  background-size:50px 50px; 
}
/* specificazioni x esercizi "quale" (9) - fine */

}
/* "400" - MOBILE PORTRAIT "3"  - FINE  /////////////////////////////////////////////// */ 

/* "430 " - MOBILE PORTRAIT "4"  - INIZIO  /////////////////////////////////////////////// */ 
@media only screen and (max-width: 430px) {

/* specificazioni x esercizi "mani" - livelli relativi - inizio   */
/* contenitore pulsanti  - (reca il clear per il contenimento dei float precedenti) */
.blocco_pulsanti_1,
.blocco_pulsanti_6 {
  margin-top:120px;
}

/* riempie vuoto interlocutorio per layout a sviluppo verticale (layout stretto) */
.interrogo_1,
.interrogo_6 {
  display: inline; 
}

/* usata in prima pagina apertura esercizio (pagine risultati)
   per dare descrizione domanda e per mantenere altezza box filettato */
.descrivi_1,
.descrivi_6 {
margin-bottom:40px;
}

/* notazioni suggerimento */
/* segnaposto generale 1 */
#contenuti #materiali > section > article #attivi .suggerisci_1 {
  width: 70px;
  height: 90px;
  margin: -33px 0 0 10px!important;
  font-size:1.9em; 
  line-height:3.1em!important;
}
/* segnaposto 2 con background suggerimento in caso di risposta  */
#contenuti #materiali > section > article #attivi .suggerisci_1 a {
  width: 70px;
  height: 90px;
  background-size: 70px 70px;
  font-size: 1.7em; 
  line-height: 1.7em!important; 
}
/* notazioni risposta 1  */
#contenuti #materiali > section > article #attivi .risposta_1c,
#contenuti #materiali > section > article #attivi .risposta_1e {
   width: 70px;
   height: 90px;
   background-size: 70px 70px;
   /*color:rgba(0,0,0,0.4);*/
   margin: -33px 10px 0px 0;
   font-size:1.2em; 
   line-height:8.4em; 
}

/* notazioni suggerimento */
/* segnaposto generale 6 */
#contenuti #materiali > section > article #attivi .suggerisci_6 {
  width: 70px;
  height: 80px;
  margin: -6px 0 0 10px!important;
  font-size: 1.2em; 
  line-height: 1.4em!important; 
}
/* notazioni risposta 6  */
#contenuti #materiali > section > article #attivi .risposta_6n,
#contenuti #materiali > section > article #attivi .risposta_6c,
#contenuti #materiali > section > article #attivi .risposta_6e {
   width: 70px;
   height: 80px;
   background-size: 70px 70px;
   /*color:rgba(0,0,0,0.4);*/
   margin: -33px 10px 0px 0;
   font-size:1.2em; 
   line-height:8.4em; 
}
/* segno numero punti risposta corretta */ 
#contenuti #materiali > section > article #attivi .suggerisci_6 .si,
#contenuti #materiali > section > article #attivi .suggerisci_6 .no {
  font-size:1.9em;
  line-height:1.1em!important; 
}
/* specificazioni x esercizi mani - livelli relativi - fine   */

}

/* "430 " -  MOBILE PORTRAIT "4"  - FINE  /////////////////////////////////////////////// */ 


/* "460" - MOBILE LANDSCAPE "1" - INIZIO  /////////////////////////////////////////////// */ 
@media only screen and (max-width: 460px){

/* specificazioni x esercizi "quanti" (8) - inizio   */
/* notazione centrale aggiuntiva risposta esatta (con funzione sedimentazione immagine/cifra
   e funzione di contenimento dei float (notazione base e suggerimento) nel box esercizio */

.contieni_8 {
  top: -10px;
  font-size:1.2em; 
}
/* notazioni suggerimento */
.suggerisci_8 {
  width: 75px!important; 
  font-size:1.2em!important; 
}
/* notazioni risposta  */
.risposta_8c,
.risposta_8e,
.risposta_8n {
   width: 70px!important;
   font-size:1.2em!important; 
   background-size: 70px 70px!important; 
}
/* specificazioni x esercizi "quanti" (8) - fine   */


/* specificazioni x esercizi "quale" (9) - inizio   */
/* usata in prima pagina apertura esercizio (pagine risultati)
   per dare descrizione domanda e per mantenere altezza box filettato */
/* specificazione domanda centrale */
.quale_domanda {
height:60px;
width: 60px;
padding-top: 0px;
margin: 0 auto 50px auto;
font-size:2.5em;
}
.descrivi_9 {
  margin:-20px auto 20px auto; 
  font-size:1.2em; 
  line-height: 1.15em;
}
/* notazioni suggerimento */
#contenuti #materiali > section > article #attivi .suggerisci_9 {
  margin-top:-15px;
  width: 75px; 
  height: 90px;
  font-size:1.2em; 
  line-height:1.4em; 
}
/* notazioni risposta  */
#contenuti #materiali > section > article #attivi .risposta_9c,
#contenuti #materiali > section > article #attivi .risposta_9e,
#contenuti #materiali > section > article #attivi .risposta_9n  {
  margin-top:-10px;
  width: 70px;
  height: 90px;
  font-size:1.2em; 
  line-height:7.9em!important; 
  background-size: 70px 70px; 
}
/* pulsanti grafici */
#contenuti #materiali > section >  article #attivi form[name=quale] #esercizio input[type=submit],
#contenuti #materiali > section >  article #attivi form[name=quale] #esercizio input[type=submit]:hover,
#contenuti #materiali > section >  article #attivi form[name=quale] #esercizio input[type=submit]:active {
  width:60px;
  height:60px; 
  margin:0 10px 15px 10px;
  background-size:60px 60px; 
}
/* specificazioni x esercizi "quale" (9) - finr   */

}
/* "460" - MOBILE LANDSCAPE "1" - FINE  /////////////////////////////////////////////// */ 



/* "480 " -  MOBILE LANDSCAPE "2"  - INIZIO  /////////////////////////////////////////////// */ 
@media only screen and (max-width: 480px) {

/*  visualizzazione dati utente - omissis - */ 

/* specificazione form di primo contatto - omissis - */


/* pulsanti form - base *//*
#contenuti #materiali > section > article form input[type=submit], 
#contenuti #materiali > section > article form input[type=button] {
  font-size:0.85em;
}
*/

/*  navigazione ricerca - omissis - */

/*attestato punteggio �quanti� */
#contenuti #materiali > section > article #attivi #attestato_gruppo #attestato_grafica #attestato_testo {
  font-size:0.9em!important; 
  line-height:1.2em;
}

#contenuti #materiali > section > article #attivi #attestato_gruppo #attestato_grafica #attestato_testo .livello {
  font-size:1em; 
}
#contenuti #materiali > section > article #attivi #attestato_gruppo #attestato_grafica #attestato_testo .cifra {
  font-size:1em; 
}


}
/* "480 " - MOBILE LANDSCAPE "2"  - FINE  /////////////////////////////////////////////// */ 

/* "580" - MOBILE - INIZIO  /////////////////////////////////////////////// */ 
@media only screen and (max-width: 580px){
/* SPECIFICAZIONI ESERCIZI  INIZIO ---------------------------------------- */

/* specificazioni x esercizi "mani" - livelli relativi - inizio   */

/* contenitore pulsanti  - (reca il clear per il contenimento dei float precedenti) */
.blocco_pulsanti_2,
.blocco_pulsanti_3,
.blocco_pulsanti_4,
.blocco_pulsanti_5,
.blocco_pulsanti_7 {
  margin-top:120px;
}

/* riempie vuoto interlocutorio per layout a sviluppo verticale (layout stretto) */
.interrogo_2,
.interrogo_3,
.interrogo_4,
.interrogo_5,
.interrogo_7 {
  display: inline; 
}

/* usata in prima pagina apertura esercizio (pagine risultati)
   per dare descrizione domanda e per mantenere altezza box filettato */
.descrivi_2,
.descrivi_3,
.descrivi_4,
.descrivi_5,
.descrivi_7 {
margin-bottom:40px;
}

/* notazione suggerimento */
/* segnaposto generale 2 */
#contenuti #materiali > section > article #attivi .suggerisci_2 {
  margin: -35px 0 0 10px;
}

/* notazioni risposta 2  */
#contenuti #materiali > section > article #attivi .risposta_2c,
#contenuti #materiali > section > article #attivi .risposta_2e {
   width: 80px;
   background-size: 80px 80px;
   margin: -35px 10px 0 0;
   font-size:1.2em; 
   line-height:8.8em; 
}

/* notazione suggerimento */
/* segnaposto generale 3 */
#contenuti #materiali > section > article #attivi .suggerisci_3 {
  margin: -35px 0 0 10px;
}

/* notazioni risposta 3  */
#contenuti #materiali > section > article #attivi .risposta_3c,
#contenuti #materiali > section > article #attivi .risposta_3e {
   width: 80px;
   background-size: 80px 80px;
   margin: -35px 10px 0 0;
   font-size:1.2em; 
   line-height:8.8em; 
}


/* segnaposto generale 4 e 5 */
#contenuti #materiali > section > article #attivi .suggerisci_4,
#contenuti #materiali > section > article #attivi .suggerisci_5 {
  margin: -35px 0 0 10px;
}

/* notazioni risposta 4 e 5 */
#contenuti #materiali > section > article #attivi .risposta_4c,
#contenuti #materiali > section > article #attivi .risposta_4e,
#contenuti #materiali > section > article #attivi .risposta_5c,
#contenuti #materiali > section > article #attivi .risposta_5e {
   width: 80px;
   background-size: 80px 80px;
   margin: -35px 10px 0 0;
   font-size:1.2em; 
   line-height:8.8em; 
}

/* notazioni suggerimento  */
/* segnaposto generale 7 */
#contenuti #materiali > section > article #attivi .suggerisci_7 {
  height: 80px;
  margin: 0 0 0 10px;
   font-size:1.2em; 
   line-height:1.2em; 
}

/* notazioni risposta 7  */
#contenuti #materiali > section > article #attivi .risposta_7n,
#contenuti #materiali > section > article #attivi .risposta_7c,
#contenuti #materiali > section > article #attivi .risposta_7e {
   width: 80px;
   background-size: 80px 80px;
   margin: -35px 10px 0 0;
   font-size:1.2em; 
   line-height:8.8em; 
}

/* segno numero punti risposta corretta */ 
#contenuti #materiali > section > article #attivi .suggerisci_7 .si,
#contenuti #materiali > section > article #attivi .suggerisci_7 .no {
  font-size:2em;
  line-height:1em!important; 
}
/* specificazioni x esercizi "mani" - livelli relativi - fine   */

/* specificazioni x esercizi "quanti" 8 - inizio   */
/*attestato punteggio �quanti� */
#contenuti #materiali > section > article #attivi #attestato_gruppo #attestato_grafica #attestato_testo {
  font-size:1.1em; 
}
#contenuti #materiali > section > article #attivi #attestato_gruppo #attestato_grafica #attestato_testo .livello {
  font-size:1.2em; 
}
#contenuti #materiali > section > article #attivi #attestato_gruppo #attestato_grafica #attestato_testo .cifra {
  font-size:1.2em; 
}
/* specificazioni x esercizi "quanti" 8 - fine   */

}
/* "580" - MOBILE - FINE  /////////////////////////////////////////////// */ 



/* SMALL TABLET  - INIZIO    /////////////////////////////////////////////// */ 
/* @media only screen and (max-width: 600px)  { } /*
/* SMALL TABLET  - FINE      /////////////////////////////////////////////// */ 


/* "768" - TABLET/NETBOOK  - INIZIO /////////////////////////////////////////////// */
@media only screen and (max-width: 768px) { 

/* VARIAZIONE A DEFAULT DESKTOP  */
/*    basi e struttura principale  ------------------------------------ */
.boxtotale {
  float:right;
  display:block; 
}

.boxtotale_r {
  float:right;
  display:block;
}

.sx  {
  width:100%;
  max-width:100%;
  padding:0 20px;
  float:right;
  display:block;
}

.dx {
  width:100%;
  padding:0 20px;
  float:right;
  display:block;
}

#titolazione {
  width:100%;
  margin-bottom:20px;
}


/*  TIPOGRAFIA GENERALE  ------------------------------------------ */
/* intarsi */
#manutenzione_spot {
 width:220px;
 left:50%;
 margin-left:-110px;
}


/*   TESTATA - dx logo, sx descrizione istituzionale -------------------- */
#testata #logo { 
  margin:0;
  padding:0 0 5px 0;
  text-align:center;
  /* implementazione logo in background*/
  background-position: center top; 
} 

#testata #istituzionale h1 { 
  margin:0;
  padding:0 0 0 0;
  text-align:center;  
} 

#testata #istituzionale h2 { 
  margin:0;
  padding:0 0 30px 0;
  text-align:center;  
} 

/*  NAVIGAZIONE - sx pulsanti -------------- omissis */

/*  NAVIGAZIONE - dx form ------------------ omissis */

/*    TITOLAZIONE -  dx titoli  in intestazione a piena pagina --------------------------- */
#titolazione > #titolosezione {
  padding:0 20px 10px 20px;
  text-align:center;  
} 

#titolazione > #titolosezione h1 {
  margin:0;
  padding:0;
  display:block;
} 

/*    TITOLAZIONE -  dx titoli  in colonna a dx (a fianco articoli) ---------------------- */
#titolosezionesintetico {
  padding:0 20px 10px 20px;
  text-align:center;  
} 


/*  TITOLAZIONE - sx esplicativo -----------------------------  omissis */


/* CONTENUTI - dx collaterali   --------------------------------------- */
#contenuti #indice { 
  height:auto;
  margin:0; 
  padding:0;
  text-align:center;
  overflow:hidden;
}
#contenuti #indice > aside > nav  { 
  width:100%;
  float:left;
  display:block;
  clear:both;
}

/* etichetta indice - si applica una label al checkbox */
#contenuti #indice > aside > nav > label { 
  position: relative;
  padding-bottom:2px; 
  display:block;
  cursor:pointer;
  color:rgba(229, 219, 164, 0.7);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;	
  
}
/* sfondo etichetta indice - livello inferiore  */
#contenuti #indice > aside  > nav > label::before { 
  position:absolute;
  content:"";
  width:100%;
  height:100%;
  left:0;
  background:rgba(255, 255, 255, 0.14);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;	
}

/* etichetta indice - stato hover base - colore sfondo e testo  */
#contenuti #indice > aside > nav > label:hover {
  color:rgba(229, 219, 164, 0.9); 
  background:rgba(255, 255, 255, 0.1);
}

/* etichetta indice - stato attivo base (premuto) - colore sfondo e testo  */
#contenuti #indice > aside > nav > label:active {
  color:rgba(229, 219, 164, 1); 
  background:rgba(255, 255, 255, 0.15);
}
/*etichetta indice: stato hover avanzato: frecce a comparsa sullo stato chiuso  - apri*/
#contenuti #indice > aside > nav > label:hover::after, 
#contenuti #indice > aside  > nav > input:checked + label:hover::after {
   position:absolute;
   content: "\00B7\203A \A \A \A \A \A \A \A \A \A \00B7\203A";    
   width:100%;
   height:100%;
   font-size:1.5em; 
   left:4em;/*centratura manuale frecce => 4.0 con 9(\A)+ 10(spazi) - 4.45em con 10(\A)+ 11(spazi) - 5.3em con 12(\A)+ 13(spazi) ;*/ 
   white-space:pre; 
   -webkit-transform:rotate(90deg); 
   -moz-transform:rotate(90deg);
   -o-transform:rotate(90deg); 
   -ms-transform:rotate(90deg); 
   transform:rotate(90deg); 
}
/*etichetta indice: frecce a comparsa sullo stato aperto - chiudi*/
#contenuti #indice > aside  > nav > input:checked + label:hover::after {
  content:"\2039\00B7 \A \A \A \A \A \A \A \A \A \2039\00B7"; 	
}


/* boxtitoli - base + trasformazione in chiusura (+veloce) */
#contenuti #indice > aside > nav > #boxtitoli { 
  height:0;
  margin:0;
  padding:0;
  position:relative;
  overflow:hidden;
  opacity:0;
  -webkit-transition:height 0.5s ease-in-out, opacity 0.3s ease-in-out;
  -moz-transition:height 0.5s ease-in-out, opacity 0.3s ease-in-out;
  -o-transition:height 0.5s ease-in-out, opacity 0.3s ease-in-out;
  -ms-transition:height 0.5s ease-in-out, opacity 0.3s ease-in-out;
  transition:height 0.5s ease-in-out, opacity 0.3s ease-in-out;     
}

#contenuti #indice > aside  > nav > input:checked ~ #boxtitoli {
  height: auto; 
  max-height: 400px;
  opacity:1;
  -webkit-transition:max-height 1s ease-in-out, opacity 1.5s ease-in-out;
  -moz-transition:max-height 1.5s ease-in-out, opacity 1.5s ease-in-out;
  -o-transition:max-height 1s ease-in-out, opacity 1.5s ease-in-out;
  -ms-transition:max-height 1s ease-in-out, opacity 1.5s ease-in-out;
  transition:max-height 1s ease-in-out, opacity 1.5s ease-in-out;   
  overflow-y:none;    
}

/*lista*/
#contenuti #indice > aside > nav > #boxtitoli > ul {
  height: auto;
  margin:15px 0 10.8px 0px; /*margin:15px 0 10.8px 10px;*/
  padding:0;
  overflow-y:auto; 
  display:block;
}

/*link articoli precedente e successivo navigazione laterale*/
#boxarticoliprimaedopo_nav { 
  margin:0 auto;
}

/*  CONTENUTI - sx materiali  -----------------------------------------  */
#contenuti > #materiali  { 
  margin:0 0 0 0; 
  padding:30px 20px 0 20px; /* padding:0px 20px 0 20px;*/ 
}

/*bianchi di pagina sulla base dell'interlinea base articolo:
  em = 16px; interlinea = 1.3 em = 20.8 px*/
#contenuti #materiali > section > article { 
  margin:0; 
  padding:10.4px 41.6px 41.6px 41.6px; 
}


/* PIEDIPAGINA  - sx  ---------------------------------------------------- */
#piedipagina #piedesx { 
  margin:0; 
  padding:10px 20px 0 20px;
  text-align:center;
}

#piedipagina #piedesx .collaborazioni { 
  display:block;
}
 
#piedipagina #piedesx .distingui { 
  display:none;
} 

/* PIEDIPAGINA  - dx  ---------------------------------------------- */
#piedipagina #piededx { 
  margin:0;
  padding:5px 20px 0 20px;
  text-align:center;
}


/* ---------------------------------------------- */
/* ---------------------------------------------- */

/* SPECIFICAZIONI ESERCIZI */
/* specificazioni x esercizi "mani" 6 e 7 (gare) - inizio   */
/* segno numero punti risposta corretta */ 
#contenuti #materiali > section > article #attivi .suggerisci_6 .si,
#contenuti #materiali > section > article #attivi .suggerisci_6 .no,
#contenuti #materiali > section > article #attivi .suggerisci_7 .si,
#contenuti #materiali > section > article #attivi .suggerisci_7 .no  {
  line-height:1.34em; 
}
/* specificazioni x esercizi "mani" 6 e 7 (gare) - fine   */


#contenuti #materiali > section > article #attivi .risposta_9c,
#contenuti #materiali > section > article #attivi .risposta_9e,
#contenuti #materiali > section > article #attivi .risposta_9n  {
line-height:9.3em;
}

/* specificazioni x esercizi "quale" 9 - inizio   */

}
/* specificazioni x esercizi "quale" 9 - fine   */
/* "768" - TABLET/NETBOOK  - FINE /////////////////////////////////////////////// */



/* "768/768" NETBOOK/TABLET - "LIMITED" - FINE /////////////////////////////////////////////// */ 
@media only screen and (max-width: 768px) and (min-width: 768px){

/* SPECIFICAZIONI ESERCIZI  INIZIO ---------------------------------------- */

/* specificazioni x esercizi "mate20", "mate100" "mate_tabelline" - inizio   */
.suggerisci_10 {
   position:relative;
   top: 50px!important; 
   margin: 20px auto -20px auto!important;
   float:none!important; 
   display: block!important; 
}

.risposta_10c,
.risposta_10e,
.risposta_10n { 
   position:relative;
   top: -110px!important;
   margin: 0 auto!important;
   float:none!important; 
   display: block!important;
}
.risposta_10c { 
   color:rgba(12,133,205, 0.8)!important;
}
.risposta_10e, 
.risposta_10n {
   color:rgba(193,0,31,0.8)!important;
}
/* specificazioni x esercizi "mate20", "mate100" "mate_tabelline" - fine   */
/* SPECIFICAZIONI ESERCIZI  FINE ---------------------------------------- */

}
/* "768/768" NETBOOK/TABLET - "LIMITED" - FINE /////////////////////////////////////////////// */ 


/* "890/768" NETBOOK/TABLET - "LIMITED" - INIZIO /////////////////////////////////////////////// */ 
@media only screen and (max-width: 890px) and (min-width: 768px){

/* SPECIFICAZIONI ESERCIZI  INIZIO ---------------------------------------- */
/* specificazioni x esercizi "mani" - livelli relativi - inizio   */
/* contenitore pulsanti  - (reca il clear per il contenimento dei float precedenti) */
.blocco_pulsanti_2,
.blocco_pulsanti_3,
.blocco_pulsanti_4,
.blocco_pulsanti_5,
.blocco_pulsanti_7 {
  margin-top:120px;
}

/* riempie vuoto interlocutorio per layout a sviluppo verticale (layout stretto) */
.interrogo_2,
.interrogo_3,
.interrogo_4,
.interrogo_5,
.interrogo_7 {
  display: inline; 
}

/* usata in prima pagina apertura esercizio (pagine risultati)
   per dare descrizione domanda e per mantenere altezza box filettato */.descrivi_2,
.descrivi_3,
.descrivi_4,
.descrivi_5,
.descrivi_7 {
margin-bottom:40px;
}

/* notazioni suggerimento  */
/* segnaposto generale 2 */
#contenuti #materiali > section > article #attivi .suggerisci_2 {
  margin: -35px 0 0 10px;
}
/* notazioni risposta 2  */
#contenuti #materiali > section > article #attivi .risposta_2c,
#contenuti #materiali > section > article #attivi .risposta_2e {
   width: 80px;
   background-size: 80px 80px;
   margin: -35px 10px 0 0;
   font-size:1.2em; 
   line-height:8.8em; 
}

/* notazioni suggerimento  */
/* segnaposto generale 3 */
#contenuti #materiali > section > article #attivi .suggerisci_3 {
  margin: -35px 0 0 10px;
}
/* notazioni risposta 3  */
#contenuti #materiali > section > article #attivi .risposta_3c,
#contenuti #materiali > section > article #attivi .risposta_3e {
   width: 80px;
   background-size: 80px 80px;
   margin: -35px 10px 0 0;
   font-size:1.2em; 
   line-height:8.8em; 
}

/* notazioni suggerimento  */
/* segnaposto generale 4 e 5 */
#contenuti #materiali > section > article #attivi .suggerisci_4,
#contenuti #materiali > section > article #attivi .suggerisci_5  {
  margin: -35px 0 0 10px;
}
/* notazioni risposta 4 e 5 */
#contenuti #materiali > section > article #attivi .risposta_4c,
#contenuti #materiali > section > article #attivi .risposta_4e,
#contenuti #materiali > section > article #attivi .risposta_5c,
#contenuti #materiali > section > article #attivi .risposta_5e  {
   width: 80px;
   background-size: 80px 80px;
   margin: -35px 10px 0 0;
   font-size:1.2em; 
   line-height:8.8em; 
}

/* notazioni suggerimento  */
/* segnaposto generale 7 */
#contenuti #materiali > section > article #attivi .suggerisci_7 {
  height: 80px;
  margin: 0 0 0 10px;
  font-size:1.2em; 
  line-height:1.2em; 
}
/* notazioni risposta 7  */
#contenuti #materiali > section > article #attivi .risposta_7n,
#contenuti #materiali > section > article #attivi .risposta_7c,
#contenuti #materiali > section > article #attivi .risposta_7e {
   width: 80px;
   background-size: 80px 80px;
   margin: -35px 10px 0 0;
   font-size:1.2em; 
   line-height:8.8em; 
}
/* segno numero punti risposta corretta  */
#contenuti #materiali > section > article #attivi .suggerisci_7 .si,
#contenuti #materiali > section > article #attivi .suggerisci_7 .no {
  font-size:2em;
  line-height:0.98em!important; 
}
/* specificazioni x esercizi "mani" - livelli relativi - fine   */
/* SPECIFICAZIONI ESERCIZI FINE ---------------------------------------- */

}
/* "890/768" NETBOOK/TABLET - "LIMITED" - FINE /////////////////////////////////////////////// */


	
/* PRINT  - INIZIO /////////////////////////////////////////////// */

@media print {
* {background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important}  /*Black prints faster */

/*omissis navigazione*/
#indice { display:none; }
#boxarticoliprimaedopo_sotto {display:none;}

.boxtotale {
  float:none;
  display:block; 
}

.boxtotale_r {
  float:none;
  display:block;
}

.sx  {
  width:100%;
  max-width:100%;
  padding:0 20px;
  float:none;
  display:block;
}

.dx {
  width:100%;
  padding:0 20px;
  float:none;
  display:block;
}

#titolazione { display:none; } 

#testata #logo { display:none; } 


#istituzionale {
display:none;
}

form {
display:none;
}

#contenuti #materiali > section > article #attivi #attestato_sogliamax .conteggio {
  margin:0 auto 0 auto;
  display: block;
}

#submitm2,
#submitm3 {
display:none;
}

#testata #istituzionale h1 { 
  margin:0;
  padding:0 0 0 0;
  text-align:center;  
} 

#testata #istituzionale h2 { 
  margin:0;
  padding:0 0 30px 0;
  text-align:center;  
} 

#piedipagina #piedesx { 
  margin:0;
  padding:0;
  text-align:center;
  display:none;
}

#piedipagina #piedesx dl { 
  margin:0;
  padding:0;
  text-align:center;
  display:none;
}

#piedipagina #piededx { 
  margin:0 0 0 -20px;
  padding:0;
  text-align:center;
}

#contenuti #materiali > section > article { 
  -webkit-border-radius:none;
  -moz-border-radius:none;
  border-radius:none;
  -webkit-box-shadow:none;
  -moz-box-shadow: none;
  box-shadow:none; 
}

#contenuti #materiali > section > article > footer { 
  display:none;
}

}
/* PRINT  - FINE /////////////////////////////////////////////// */