/*** si basano su simple-master, basic-style.cs ****/

/*Simple Responsive Template v 1.2


primary styles 
   Author: www.prowebdesign.ro
   Add your own styles to customize the project.

grazie, gi�� fatto.



BASE (MOBILE) SIZE
	These are the mobile styles. It's what people see on their phones.
	Remember, keep it light: Speed is Important.
*/


/* si inizia con gli stili per piccoli schermi */




/* Box sizing. Awesome thing. Read about it here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp */
*{	box-sizing:border-box;
	-moz-box-sizing:border-box;}

  
/* STRUTTURA */   
.wrapper{
	width: 92%; /* larghezza con spazio ds e sn */
	margin: 0 auto; /* i margini top e bottom a 0, il resto automatico */
}

header{ padding:15px 0; /* top, bottom 15, ds, sn 0 */ }
	
#banner{ text-align:center;}

#content { margin:40px 0;}

aside { margin:40px 0;}

p{ margin:0 0 1.5em;}


/* ================= TYPE ================= */
body{
	color:#006699;
	font-family: Verdana, Helvetica, Arial, sans-serif; 
	font-size:1em;   /* corrisponde a 16px */
	line-height:1.4em; /* (16:10x4)+16=22,4px */
	font-weight:normal;
	letter-spacing:0.1em;
}
h1, h2, h3, h4, h5, h6{
 	line-height:1.5em;
	margin:.45em 0;
	padding:0;
} 


/* ================= LINKS ================= */
a:link, a:visited
{	font-size : 10pt;
	text-transform: uppercase;
	line-height:200%;
	font-weight: normal;
	text-decoration: none;
	letter-spacing: 0.1em;
	color: #999999; }
a:hover { color : #fff; }

a.current:link, a.current:visited, a.current:hover { color : #fff; }

/* liste links*/
/* si scrive solo ci�� che cambia rispetto ai links normali*/
a.liste:link, a.liste:visited {	font-size : 10pt; }
a.liste:hover { color : #fff; }

/* liste links*/
/* si scrive solo ci�� che cambia rispetto ai links normali*/
a.BU:link, a.BU:visited {	font-size : 10pt; }
a.BU:hover { color : #fff; }

/* footer links */
footer a:link, footer a:visited { font-size : 10pt; }
footer a:hover { color : #fff; }


.textnormal
{
	font-family: Helvetica, Univers, Sans-Serif;
	line-height:150%;
	font-style: normal;
	font-weight: normal;
	font-size: 12pt;
	color: #ffffff;
	text-transform: none;
}

.textnormalklein
{ 	font-size: 10pt;
	text-transform: none;
}

.textANNO { color: #C00; font-size: 11px; font-weight: bold; letter-spacing: 0.1em;}

.textgrau
{
	font-family: Helvetica, Univers, Sans-Serif;
	line-height:150%;
	font-style: normal;
	font-weight: normal;
	font-size: 12pt;
	color: #999999;
	text-transform: none;
}

.textgrau_14
{
	font-family: Helvetica, Univers, Sans-Serif;
	text-transform: uppercase;	
	line-height:200%;
	font-style: normal;
	font-weight: normal;
	font-size: 14pt;
	color: #999999;
	letter-spacing: 0.1em;

}

.zitat
{
	font-family: Georgia, Univers, Serif;
	line-height:200%;
	font-style: italic;
	font-weight: normal;
	font-size: 14pt;
	color: #000;
	letter-spacing: 0.1em;

}

.textklein
{
	font-family: Helvetica, Univers, Sans-Serif;
	line-height:80%;
	font-style: normal;
	font-weight: normal;
	font-size: 10pt;
	color: #000000;
}




/* ================= LOGO LINEE IMMAGINI ================= */

/* Logotipo, distanza sotto */
.logotipo {
margin-bottom: 20px;
/* border-bottom: 1px solid black;*/ /*non serve */
margin-top: -6px;
}

/* LINEE LINEE LINEE LINEE ===================================================== */
.linea { margin-bottom: 0px; margin-top: 0px; border-bottom: 1px solid black; }
.lineatop { margin-bottom: 0px; margin-top: 0px; border-top: 1px solid black; }
.lineaabstand { border-bottom: 10px solid white; }
/* trucco per le linee sotto le immagini con BU */
/* la linea sotto le BU diventa invisibile quando lo schermo �� grande */
/* si lascia vedere in piccolo */
.lineaBUwidescreen { margin-bottom: 0px; margin-top: 0px; border-bottom: 1px solid black; }
/* al contrario, la linea che in grande attraversa il formato, sparisce in piccolo */
.lineaBUsmallscreen { margin-bottom: -10px; margin-top: 0px; border-bottom: 1px solid white; }

/* per le immagini */
.topabstand { margin-top: 10px }

/* per le immagini */
.rightabstand { margin-right: 10px }

/* per meno 10px di distanza da sopra */
.meno { margin-top: -10px; }

/* per il logo */
.bottomabstand { margin-bottom: 20px; margin-top: 0px;}

/* RESPONSIVE IMAGES */
img{ max-width:100%; height:auto;}
/* das ist wichtig f��r die kleine Formate */
/* es wird nicht richtig benutzt bei grossen Screens, da die Bilder schon angepasst sind */
/* d.h. die max Gro��e ist da schon erreicht */

/* WICHTIG ================= */
/* die Bilder einer Reihe sollen nicht mehr als ca. 900 zusammen in der Breite sein */
/* wenn man mit max. Breite von 1000 px arbeitet - 80px gehen schon beim wrapper 92% weg */
/* die Bild-H��he soll bei mehr als einem Bild gleich f��r allen Bildern sein */
/* die Spaltenbreite soll prop. zu den Breiten der Bildern verteilt werden */
/* die Summe der Spalten muss immer 24 bei colo_ bzw 12 bei spalte_ */


/* ======== NAVI =========== */
.nav-collapse ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
  text-align: left;
}

.nav-collapse a {
  color: #000;
  text-decoration: none;
  width: 100%;
  background: #fff;
  padding: 0px;
  float: left;
  margin: 0;
  text-align: left;
    /* qui sopra si decide se il link della lista �� centrato o no */
    /* in questo caso no */
  border-bottom: 18px  solid white;
  }

.nav-collapse li {
  width: 100%;
  display: block;
  text-align: left;
}

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: visible;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 9999px;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
/* NAVI END */

/* NAVI STYLES */

.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

.nav-collapse,
.nav-collapse * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.nav-collapse,
.nav-collapse ul {
  list-style: none;
  width: 100%;
  float: left;
}

.nav-collapse li {
  float: left;
  width: 100%;
}

/* NAVI STYLES END */

/* Raster 24 */
.colo_1,
.colo_2,
.colo_3,
.colo_4,
.colo_5,
.colo_6,
.colo_7,
.colo_8,
.colo_9,
.colo_10,
.colo_11,
.colo_12,
.colo_13,
.colo_14,
.colo_15,
.colo_16,
.colo_17,
.colo_18,
.colo_19,
.colo_20,
.colo_21,
.colo_22,
.colo_23,
.colo_24 {
	margin-bottom:0px; /*qui la distanza verso il basso ��� era 60 px*/
	/*positioning and padding*/
	position: relative;
    min-height: 1px;
    padding-left: 0px;  /* questa distanza dovrebbe essere presente solo nei formati pi�� larghi */
    padding-right: 15px;
    background: #fff; /* SOLO PER TEST */
}


/* Raster 20 */
.s_1,
.s_2,
.s_3,
.s_4,
.s_5,
.s_6,
.s_7,
.s_8,
.s_9,
.s_10,
.s_11,
.s_12,
.s_13,
.s_14,
.s_15,
.s_16,
.s_17,
.s_18,
.s_19,
.s_20 {
	margin-bottom:0px; /*qui la distanza verso il basso ��� era 60 px*/
	/*positioning and padding*/
	position: relative;
    min-height: 1px;
    padding-left: 0px;  /* questa distanza dovrebbe essere presente solo nei formati pi�� larghi */
    padding-right: 15px;
    background: #006699; /* SOLO PER TEST */
}



/* Raster */
.spalte_1,
.spalte_2,
.spalte_3,
.spalte_4,
.spalte_5,
.spalte_6,
.spalte_7,
.spalte_8,
.spalte_9,
.spalte_10,
.spalte_11,
.spalte_12 {
	margin-bottom:0px; /*qui la distanza verso il basso ��� era 60 px*/
	/*positioning and padding*/
	position: relative;
    min-height: 1px;
    padding-left: 0px;  /* questa distanza dovrebbe essere presente solo nei formati pi�� larghi */
    padding-right: 15px;
    background: #006699; /* SOLO PER TEST */
}


/*FOOTER*/
footer{  
	clear:both;
	font-size:80%;
	padding:20px 0;
}
/* non in uso */
footer ul{
	margin:0;
	padding:0;
}

/*colors and backgrounds*/
body{
	background:#006699;
}
h1, h2, h3, h4, h5, h6{
	color:#333; 
}

footer{ 
	background:#006699;
	color:#ccc;
}
footer h1, footer h2, footer h3, footer h4{ 
	color:#CCC; 
	margin-bottom:10px;
}
footer ul{
	margin:0 0 0 8%;
}



/* floating il contenuto */ 
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: " ";
  display: table;
}
.clearfix:after,
.container:after,
.row:after{
  clear: both;
}






/* ______________________________________________________________ */
/* ______________________________________________________________ */
/* SCHERMI DA 481 A 919 PX ��� finora anche per i pi�� grandi*/
/* ______________________________________________________________ */
/* ______________________________________________________________ */

@media only screen and (min-width: 481px) {
#banner{
	float:left;
	text-align:left;
	margin-bottom:-20px;/*this depends on the height of the logo*/
}

/* per centrare oggetti, ad es. immagini, senza usare align in div */
.center {
    margin: auto;
    width: 100%;
    border:none;
    padding: 0px;
    text-align: center;
}

/* distanza a destra, per es. per le immagini dei cataloghi */
.rightspace{
	margin-right: 10px;
	}
	
/* per il logo */
.bottomabstand { margin-bottom: 60px; margin-top: 10px;}

/* LINEE LINEE LINEE LINEE ===================================================== */
/* trucco per le linee */
/* la linea sotto le BU diventa invisibile quando lo schermo �� grande */
/* si lascia vedere in piccolo */
.lineaBUwidescreen { margin-bottom: 0px; margin-top: 0px; border-bottom: 1px solid white; }
/* al contrario, la linea che in grande attraversa il formato, sparisce in piccolo */
.lineaBUsmallscreen { margin-bottom: 0px; margin-top: 0px; border-bottom: 1px solid black; }
.abstandunten { margin-bottom: -40px; }


/* NAVIGATION */
.nav-collapse ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
  text-align: left;
}

.nav-collapse li {
  width: 100%;
  display: block;
  text-align: left;
}

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: relative;
  display: block;
  text-align: left;
  overflow: visible;
  zoom: 1;
}

.nav-collapse.closed {
  max-height: none;
}

.nav-toggle {
  display: none;
}
/* END NAVIGATION */

/* NAVI STYLES */

	/* qui si decide quale spazio hanno i diversi punti della navigazione */
.nav-collapse li {
    width: auto;  /* se si vogliono spazi larghi uguali indipendemente dalla lunghezza del testo, allora usare % __ 6 Links 16% */
    *width: auto; /* IE7 Hack, invece di 16 --> 15.9%; */
    _width: auto; /* IE6 Hack, qui ancora meno, io ho usato 14% */
}


.nav-collapse a {
  color: #000;
  text-decoration: none;
  width: 100%;
  background: #006699;
  border-bottom: 0px solid white;
  padding: 0px;
  float: left;
  margin: 0;
  text-align: left;
    /* qui sopra si decide se il link della lista �� centrato o no */
    /* in questo caso no */
  border-bottom: 8px  solid white;
  border-right: 20px solid white;
  }


.nav-collapse ul ul a {
  background: #ca3716;
  padding-left: 0em;
}

  .nav-collapse ul ul a {
    display: none;
  }


/* NAVI STYLES END */

} 

/* Raster 24 colonne  */
.colo_1,
.colo_2,
.colo_3,
.colo_4,
.colo_5,
.colo_6,
.colo_7,
.colo_8,
.colo_9,
.colo_10,
.colo_11,
.colo_12,
.colo_13,
.colo_14,
.colo_15,
.colo_16,
.colo_17,
.colo_18,
.colo_19,
.colo_20,
.colo_21,
.colo_22,
.colo_23,
.colo_24 {
	margin-top: 10px;
	margin-bottom:0px; /* distanza verso il basso ��� era 60 px*/
	/*positioning and padding*/
	position: relative;
    min-height: 1px;
    padding-left: 0px;  /* questa distanza dovrebbe essere presente solo nei formati pi�� larghi */
    padding-right: 0px;
    text-align: top;
}


/* Raster 20 */
.s_1,
.s_2,
.s_3,
.s_4,
.s_5,
.s_6,
.s_7,
.s_8,
.s_9,
.s_10,
.s_11,
.s_12,
.s_13,
.s_14,
.s_15,
.s_16,
.s_17,
.s_18,
.s_19,
.s_20 {
	margin-top: 10px;
	margin-bottom:0px; /* distanza verso il basso ��� era 60 px*/
	/*positioning and padding*/
	position: relative;
    min-height: 1px;
    padding-left: 0px;  /* questa distanza dovrebbe essere presente solo nei formati pi�� larghi */
    padding-right: 0px;
    text-align: top;
}



/* Raster 12 colonne  */
.spalte_1,
.spalte_2,
.spalte_3,
.spalte_4,
.spalte_5,
.spalte_6,
.spalte_7,
.spalte_8,
.spalte_9,
.spalte_10,
.spalte_11,
.spalte_12
 {
	margin-top: 10px;
	margin-bottom:0px; /* distanza verso il basso ��� era 60 px*/
	/*positioning and padding*/
	position: relative;
    min-height: 1px;
    padding-left: 0px;  /* questa distanza dovrebbe essere presente solo nei formati pi�� larghi */
    padding-right: 0px;
    text-align: top;
}




/* SCHERMI DA 920 PX */
@media only screen and (min-width: 920px) {

.wrapper{
	max-width: 1000px; /* larghezza massima anche se lo schermo �� pi�� grande */
	margin: 0 auto; /* .0em (prima) margini nel wrapper */
	
/* RESPONSIVE IMAGES */
img{ max-width:100%; max-height:auto;}

}

#banner{ 
	float:left; 
	text-align:left;
	margin-bottom:0px;
}
header{
	padding:0;
	
}
#content {  
	float:left;
	width:65%;
}
#content.wide-content{
	float:none;
	width:100%;
}


aside { 
	float:right;
	width:30%;
}


.row{
	 margin-left: 0px;
     margin-right: 0px;
     text-align: left; /* non cambia nulla */
}
 
/* Raster 24 colonne  */ 
 
.colo_1 { width: 4,16%; }
.colo_2 { width: 8.3%; }
.colo_3 { width: 12,5; }
.colo_4 { width: 16.6%; }
.colo_5 { width: 20,8%; }
.colo_6 { width: 25%; }
.colo_7 { width: 29%; }
.colo_8 { width: 33.3%; }
.colo_9 { width: 37,5%; }
.colo_10 { width: 41%; }
.colo_11 { width: 45,8%; }
.colo_12 { width: 50%; }
.colo_13 { width: 54,16%; }
.colo_14 { width: 58,3%; }
.colo_15 { width: 62,5%; }
.colo_16 { width: 66,6%; }
.colo_17 { width: 70,8%; }
.colo_18 { width: 75%; }
.colo_19 { width: 79,16%; }
.colo_20 { width: 83,3%; }
.colo_21 { width: 87,5%; }
.colo_22 { width: 91,6%; }
.colo_23 { width: 95,8%; }
.colo_24 { width: 100%; }

.colo_1,
.colo_2,
.colo_3,
.colo_4,
.colo_5,
.colo_6,
.colo_7,
.colo_8,
.colo_9,
.colo_10,
.colo_11,
.colo_12,
.colo_13,
.colo_14,
.colo_15,
.colo_16,
.colo_17,
.colo_18,
.colo_19,
.colo_20,
.colo_21,
.colo_22,
.colo_23,
.colo_24 {
	float: left;
	display: block;
}


/* Raster 20 colonne  */ 
 
.s_1 { width: 5%; }
.s_2 { width: 10%; }
.s_3 { width: 15; }
.s_4 { width: 20%; }
.s_5 { width: 25%; }
.s_6 { width: 30%; }
.s_7 { width: 35%; }
.s_8 { width: 40%; }
.s_9 { width: 45%; }
.s_10 { width: 50%; }
.s_11 { width: 55%; }
.s_12 { width: 60%; }
.s_13 { width: 65%; }
.s_14 { width: 70%; }
.s_15 { width: 75%; }
.s_16 { width: 80%; }
.s_17 { width: 85%; }
.s_18 { width: 90%; }
.s_19 { width: 95%; }
.s_20 { width: 100%; }


.s_1,
.s_2,
.s_3,
.s_4,
.s_5,
.s_6,
.s_7,
.s_8,
.s_9,
.s_10,
.s_11,
.s_12,
.s_13,
.s_14,
.s_15,
.s_16,
.s_17,
.s_18,
.s_19,
.s_20{
	float: left;
	display: block;
}




/* Raster 12 Colonne */
 
.spalte_1 { width: 8.3%; }
.spalte_2 { width: 16.6%; }
.spalte_3 { width: 25%; }
.spalte_4 { width: 33.3%; }
.spalte_5 { width: 41.6%; }
.spalte_6 { width: 50%; }
.spalte_7 { width: 58.3%; }
.spalte_8 { width: 66.6%; }
.spalte_9 { width: 75%; }
.spalte_10 { width: 83.3%; }
.spalte_11 { width: 91.6%; }
.spalte_12 { width: 100%; }

.spalte_1,
.spalte_2,
.spalte_3,
.spalte_4,
.spalte_5,
.spalte_6,
.spalte_7,
.spalte_8,
.spalte_9,
.spalte_10,
.spalte_11,
.spalte_12 {
	float: left;
	display: block;
}

.rightfloat{float:right;}
/* @notation inspired by tinyGrid, .row and percentage by Twitter Bootstrap
 */
 
#hero [class*="colo_"] { margin-bottom:-20px;}

}


/* altre css angaben aggiunte dopo */

@media screen and (min-width: 481px){

/* ================= TYPO ================= */

.textANNO { color: #000; font-size: 11px; font-weight: normal; letter-spacing: 0.1em;}


}

/* Test vertical align ==================== */

/* usato per provare a piazzare una box sulla linea dandole la stessa altezza delle colonne vicine. Senza successo, comunque interessante */
div.alignbottom {
    position: fixed;
    bottom: 0;
}

/* usato per provare a piazzare una box sulla linea dandole la stessa altezza delle colonne vicine. Senza successo, comunque interessante */
div.floating-box {
    display: inline-block;
    width: 33%;
    height: 100%;
    margin: 20px;
    border: 0px solid #8AC007; 
	font-family: Georgia;
	font-size: 24px;
}





/*********** DA SISTEMARE, COMPLETARE ETC. ************/
/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1030px) {

} 

/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {

} 

/*
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution.
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {


} 

/*
iPHONE 5 MEDIA QUERY
iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)
*/
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { 

  
}

/*
PRINT STYLESHEET
*/
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}