@charset "utf-8";
body{
margin:0;
padding:0;
line-height: 1.5em;
font-family: arial,sans-serif;
font-size: 76%}
#container {width: auto; height: auto; z-index: 1; margin: 0 auto;}
#fondo{
background-color: white;
width:100%;
height: auto;
max-width: 940px;
margin: 0 auto;
}
#fondointerno{
background-color: white;
padding:0px;
margin: auto;
border: solid 3px;
color: #da8c3a;
}
.nobordo{border: 0px;}
#accesso{
width: 80%;
	height: auto;
	/* padding: 2%; */
	border: 1px solid #7e4f31;
margin: 0 auto;
margin-top: 2%;
text-align: center;	
	}
#form_accedi{position:absolute;width:200px;height:120px;float:right; filter: alpha(opacity=50);background-color:#7e4f31;color: #FFFFFF;font: normal bold 1.0em/2.5em arial,sans-serif;right:-9999px;
top:10%;overflow:hidden;
text-decoration: none;}
#form_accedi input {width:auto;}

.tasto_arancio{
  background-color: #FF8800; /* colore di sfondo    */
  border: 2px solid #FCA800; /* bordo dell'elemento */
  color: #fff;               /* colore del testo    */
  font-weight: bold;         /* testo in grassetto  */
  padding: 0;                /* padding             */
  height: 25px;              /* altezza             */
  width: auto;               /* larghezza           */
transition: background 1s;
  -webkit-transition: background 2s; /* Safari */
  }
.tasto_arancio:hover {
  background: green;
border: 2px solid white; /* bordo dell'elemento */
  }


/* .apri{ font-size:1.0em; font-family:Verdana, Geneva, sans-serif; float:right; margin-right:50px;} */
.chiudi{ font-size:18px; color:#000; font-weight:bold; position:absolute; right:2%; top:0%;  cursor:pointer;}
.overlay{
    background:#000;
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:100;
    cursor:pointer;
/*Trasperenza cross browser*/
opacity: .7; filter: alpha(opacity=70);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";   
 }
#messaggio {font-size:12px; color:#000; font-weight:bold;}
#accedi_carrello{ width:50%; height:25%; background-color: #da8c3a; display:none; z-index:+300; position:absolute; left:20%; top:100%; -moz-border-radius: 15px;  -webkit-border-radius: 15px;
border-radius: 15px;margin: 0 auto;padding:5%;}
#accedi_login{ width:50%; height:25%; background-color: #da8c3a; display:none; z-index:+300; position:absolute; left:20%; top:7%; -moz-border-radius: 15px;  -webkit-border-radius: 15px;
border-radius: 15px;margin: 0 auto;padding:5%;}
.campo_contatti {text-align:center; margin-top:3%;}


#colonnacentrale{
margin: auto; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
background-color: white;
color: #7e4f31;
border: solid 1px;
}
A:LINK {
 color : white;
 text-decoration: underline;
}
A:VISITED {
 color : white;
 text-decoration: none;
}
A:HOVER {
 color : yellow;
 text-decoration : underline;
}
A:ACTIVE {
 color : white;
 text-decoration: underline;
}
#header{
/* IE10 */
background-image: -ms-linear-gradient(top right,#663333 0%, #FFCC66 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top right, #663333 0%, #FFCC66 100%);
/* Opera */
background-image: -o-linear-gradient(top right, #663333 0%, #FFCC66 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, #663333), color-stop(1, #FFCC66));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top right, #663333 0%, #FFCC66 100%);
/* Regola standard */
background-image: linear-gradient(top right, #663333 0%, #FFCC66 100%);
	width: auto;
	height: auto;
	border: solid 3px;
	color: white; /* #da8c3a; */
	padding: 3px;
	/* text-align: center; */
}
#footer{
clear: left;
width: 100%;
color: #FFF;
text-align: center;
padding: 4px 0;
background: #da8c3a;
font:0.9em arial,sans-serif;
}
h1{
font: bold 1.1em/12px Arial;
color: white;
line-height : 2.0em;
padding-left : 4px;
padding-right : 4px;
}
/*testo per dettagli articolo*/
h3  {
padding-left : 2px;
padding-bottom : 0px;
padding-top : 0px;
font: 1.0em Verdana, Arial;
color : #7e4f31;
line-height : 1.2em;
text-align: center;
} 
/*testo per dettagli articolo*/
h2  {
	text-align: left;
	font: 1.0em Verdana, Arial;
	color: #7e4f31;
	line-height: 1.2em;
	} 
.inlinea {display:inline;}
.spazio
{line-height : 1.4em;text-align: center;}
.spazio2
{line-height : 0.2em;text-align: center;}
h4 {
font: 1.2em Arial, Times, serif;
color : white;
text-align: center;
padding-left : 5px;
} 
h5{
padding-left : 5px;
padding-bottom : 1px;
padding-top : 1px;
font: bold 12px Arial;
color: #428d1a;
line-height : 1.1em;
	text-align: left;
}
h7{
color:red; 
font: 1.2em;
} 
h6  {
	padding-left : 2px;
padding-bottom : 0px;
padding-top : 0px;
font: 1.0em Verdana, Arial;
color : #7e4f31;
line-height : 1.2em;
text-align: left;
} 
b{font-size: 110%;}
em{color: red;}
.centro {text-align: center;}
.linea{text-align: center;}
.testosx {text-align: left;padding: 0 0 0 1%;}
div#navigation{
	background-color: #7e4f31;
	text-align: center;
	}
.fascia {
   width:100%;	text-align: center;    border: 1px solid #7e4f31; font-size: 1.3em;
	clear: both;
    margin: 1% 0 0 0;
    overflow: hidden;
}
.fascia a:link {color: #7e4f31;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.3em;
	}
/*stili per la navigazione*/
div#navigation ul{margin: 0;padding: 0; list-style-type: none;}
div#navigation li{display: inline; margin: 0 0 0 1em;padding: 0} /*nota display: inline*/
div#navigation a{color:#FFFFFF;font: normal bold 1.0em/2.5em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #fff;text-decoration: underline}
div#navigation a#activelink{color: #033;text-decoration: none}
.barra a{color:green;font: normal bold 1.0em/2.5em arial,sans-serif;text-decoration: none}
img#sinistro {
	float: left;
	margin: 5px 15px 15px 15px;
}
article{
	width: auto;
	height: auto;
	padding: 20px;
	margin-left: 40%;
}	
article a:link{color: GREEN;text-decoration: none}
article a:VISITED {
 color : green;
 text-decoration: none;
}
.largo100{margin: 3% 5% 3% 5%;min-height: 390px;}	
.largo100centro{margin: 3% 5% 3% 5%;min-height: 390px;text-align: center;}	
footer{
clear: left;
width: 100%;
color: #FFF;
text-align: center;
padding: 4px 0;
background: #da8c3a;
font:0.9em arial,sans-serif;
}
.sinistro {
	float: left;
	margin: 5px 15px 15px 15px;
}
.destro {
	text-align: right;
	line-height:0.5;
	margin-right: 3%;
}
img {
border:none;
max-width:100%;
}
img#destro {
	float: right;
	margin: 15px 15px 15px 15px;
	}
#box{
	width: auto;
	height: auto;
	padding: 20px;
	margin-left: 40%;
}	
#pagina{
	width: auto;
	height: 20%;
	padding: 20px;
}
#azienda{
	width: auto;
	height: auto;
	padding: 20px;
	margin: 0% 0% 0% 0%;
}
#modulo{
	width: 50%;
	height: auto;
	padding: 20px;
	margin: 0 auto;
}
#prodotti{
width: auto;
	height: auto;
	padding: 30px 30px 30px 30px;
	margin: 0% 25% 0% 25%;}
	.embed-container  {
  position: relative;
  padding-bottom: 36.25%; /* 16:9 ratio */
  padding-top: 30px; /* IE 6 workaround*/
  height: 0;
  overflow: hidden;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}	
.stampa{width:100%;height:auto;text-align:right;}
table {
    border: 1px solid #7e4f31;
    background-color: white;
	width:100%;
margin-left:auto; 
margin-right:auto;
	}
.ridotta {width:50%;}
.tabsx{	margin-left:0;float:left;}
.tabdx{	float:left;clear:both;}
.setteuno{width:70%;}	
td{border: 1px solid #7e4f31;
/* padding: 1%; */}
.cella_sb {border: 0px solid #7e4f31;}
.nascosto{display: block;}
#submit {
  background-color: #FF8800; /* colore di sfondo    */
  border: 1px solid black; /* bordo dell'elemento */
  color: #000;               /* colore del testo    */
  padding: 1%;                /* padding             */
  height: 3%;              /* altezza             */
  width:73%;               /* larghezza           */
font: 1.0em Verdana, Arial;
line-height : 1.2em;
text-align: center;
  }
#submit_esaurito {
  background-color: #eee; 
  border: 1px solid black; 
  color: black;              
 font:bold;
 margin:0.5% 0.5% 0.5% 0.5%;
  padding: 0;               
  height: 25px;              
  width: auto;              
font: 0.9em Arial, Verdana
 }
#submit_due {
  background-color: #FF8800; /* colore di sfondo    */
  border: 2px solid #FCA800; /* bordo dell'elemento */
  color: #fff;               /* colore del testo    */
  font-weight: bold;         /* testo in grassetto  */
  padding: 0;                /* padding             */
  height: 25px;              /* altezza             */
  width: auto;               /* larghezza           */
transition: background 1s;
  -webkit-transition: background 2s; /* Safari */
  }
#submit_due:hover {
  background: green;
border: 2px solid white; /* bordo dell'elemento */
  }

  .content_celle{
width:100%;
height:7%;
border:1px solid #900;
margin: 0px auto;
clear: both;
}

  .content_celle2{
width:100%;
height:7%;
border:1px solid #900;
margin: 0 0 5% 0;
float:left;width:60%;
/* clear: both; */
}
  .content_celle3{
width:100%;
height:7%;
border:1px solid #900;
margin: 0 0 5% 0;
float:left;width:39%;
}
.cella1{
float:left;
margin:0.5% 0% 0.5% 0%;
border:1px solid #900;
padding:0.4em;
width:27%;
height:76px;
background-color:#eee;
color: #900;
position:relative;
}

.cella2{
float:left;
margin:0.5% 0% 0.5% 0%;
border:1px solid #900;
padding:0.4em;
width:16%;
height:48px;
background-color:#fafafa;
color: #900;
}
.cella3{
float:left;
margin:0.5% 0% 0.5% 0%;
border:1px solid #900;
padding:0.4em;
width:16%;
height:48px;
background-color:#fafafa;
color: #900;
}
.cella4{
float:left;
margin:0.5% 0.5% 0% 0%;
border:1px solid #900;
padding:0.4em;
width:35%;
height:48px;
background-color:#fafafa;
color: #900;
}
.cella_testo{
float:left;
margin:0.5% 0.5% 0% 0%;
border:1px solid #900;
padding:0.4em;
width:50%;
height:25%;
}
.cella_foto{
float:left;
margin:0.5% 0.5% 0% 0%;
border:1px solid #900;
padding:0.4em;
width:auto;
height:25%;
}
.cella7{
float:left;
margin:0 auto;
border:1px solid #900;
padding:0.4em;
width:48%;
height:29px;
background-color:#eee;
color: #900;
position:relative;
}
.cella8{
margin:0 auto;
border:1px solid #900;
padding:0.4em;
width:auto;
height:auto;
background-color:#eee;
color: #900;
position:relative;
}
.cella9{
float:left;
border:1px solid #900;
padding:0.4em;
width:26%;
height:auto;
background-color:#eee;
color: #900;
}
.classe20{width:20%;}
.classe61{width:95%;padding:2%;}
.classe50{width:50%;}
.cella_indietro{
float:left;
margin:0.5% 0.5% 0% 0%;
border:1px solid #900;
padding:0.1em;
width:98%;
}
.verde
{background-color: green;
color: white;
}
.rosso
{background-color: red;
color: black;
text-align: center;
}
#semicolonnasx{
float: left;
width: 50%;
height:auto;
margin: 0; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
background-color: white;
color: Green;
border: solid 0px;
clear:both;
}
#semicolonnadx{
float: left;
width: 50%;
margin:0; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
background-color: white;
color: black;
border: solid 0px;
overflow:hidden;
}
.content_script{
width:100%;
height:7%;
border:1px solid #900;
margin: 0px auto;
clear: both;
}
.barra
{
    overflow: auto;
    background-color:#fafafa;
    color: #900;
    /* font: Normal 12px Verdana; */
    width:98.8%;
    height: 200px;
   margin:0.5% 0.5% 0% 0%;
   padding:0.4em;
    border:1px solid #900;
    scrollbar-base-color: #000000;
    scrollbar-arrow-color: #CCCCCC;
    scrollbar-track-color: #CCCCCC;
}
/*style per effetto fade*/
#elemento, button {  background-color:#92e314;color: #000; font: normal 12px tahoma, arial; margin: 0 0 10px 0; }
.fadein, .fadeout {
            opacity: 0;
            transition: opacity 2s;
        }
.fadein {
            opacity: 1;
        }


	/*=========================================
	Media Queries
=========================================*/
/* Step 1, quando il contenitore principale diventa pił di 1200px. */
@media screen and (min-width: 1199px) {
.form_accedi{position:absolute;width:10%;height:18%;right:26%;top:2%;overflow:hidden;}
.form_accedi input {width:100%;height: 6%;font: normal bold 0.8em arial,sans-serif;}
img {max-width:24%;}
#header img {max-width:100%;}

.cella1{
float:left;
margin:0.5% 0% 0.5% 0%;
border:1px solid #900;
padding:0.4em;
width:27%;
height:48px;
background-color:#eee;
color: #900;
position:relative;
}

.cella2{
float:left;
margin:0.5% 0% 0.5% 0%;
border:1px solid #900;
padding:0.4em;
width:16%;
height:48px;
background-color:#fafafa;
color: #900;
}
.cella3{
float:left;
margin:0.5% 0% 0.5% 0%;
border:1px solid #900;
padding:0.4em;
width:16%;
height:48px;
background-color:#fafafa;
color: #900;
}
.cella4{
float:left;
margin:0.5% 0.5% 0% 0%;
border:1px solid #900;
padding:0.4em;
width:35%;
height:48px;
background-color:#fafafa;
color: #900;
}
.classe20{width:20%;}
.classe61{width:95%;padding:2%;}
.classe50{width:50%;}
}
/* Step 2, quando il contenitore principale diventa pi? piccolo. */
@media screen and (max-width: 999px) {
div#navigation{padding: 2%;}
#prodotti{padding: 6%;margin: 0%;}
table {width:100%;}
.cella1{width:26%;}
.classe61{width:95%;padding:2%;}
.form_accedi{position:absolute;width:25%;height:18%;right:2%;top:2%;overflow:hidden;}
.form_accedi input {width:100%;height: 6%;font: normal bold 0.8em arial,sans-serif;}
img {max-width:68%;}
#header img {max-width:100%;}
}
/* Step 3, quando il layout diventa fluido */
@media screen and (max-width: 719px) {
#box{padding: 6%;margin: 0 0 0 0 ;}
img#sinistro {margin:0 2px 1px 0; float:left;  display: block;}
div#navigation{padding: 2%;}
#azienda{padding: 5%;}
#modulo{width: 74%;}
img#destro {margin:0 auto ;float: none;}
.embed-container  {padding-bottom: 56.25%; /* 16:9 ratio */}
h2  {text-align: left;font: 0.9em Arial, Verdana; }	
h3 {font: 1.0em Verdana, Arial;color : #7e4f31;line-height : 1.2em;text-align: left;padding: 0 2px 0 2px;}
b{font-size:84%;text-align: center;}
th{width:5%;}
td{border: 1px solid #7e4f31;padding: 0.5%;}
.largh5{width:5%;}
.cella1{width:95%;overflow:hidden;height:auto;}
.cella2{width:45%;overflow:hidden;height:48px;}
.cella3{width:49%;overflow:hidden;height:48px;}
.cella4{width:97%;overflow:hidden;margin-bottom:2%;height:46px;}	
.cella_testo{width:96%;height:25%;}
.cella_foto{width:93%;height:25%;clear: both;border:0;}	
#submit {font-size:84%;width:100%;margin:0;}	
.largh5{width:5%;font-size:84%;width:100%;margin:0;}
.linea{line-height: 99%;}	
.ridotta {width:100%;}
.cella7{width:95%;}	
.nascosto {display: none;}
#semicolonnadx{width: 100%;}
.content_celle {width:98%;}
.content_celle2{border:0;}
.setteuno{width:100%;}
.cella9{padding:0.4em;width:96%;margin:0 auto;}
.barra{width:93%;}
.form_accedi{position:absolute;width:25%;height:18%;right:2%;top:2%;overflow:hidden;}
.form_accedi input {width:100%;height: 6%;font: normal bold 0.8em arial,sans-serif;}
img {max-width:71%;}
#header img {max-width:100%;}
}
/* Step 4, tutti gli elementi hanno la stessa dimensione. In questo modo, gli utenti mobili possono utilizzare il sito. */
@media screen and (max-width: 479px) {
div#navigation{padding: 2%;}
td{border: 1px solid #7e4f31;padding: 0.5%;}
.content_celle2 {border:0;}
.content_celle3 {border:0;}
.cella2{width:45%;overflow:hidden;}
.cella3{width:44%;overflow:hidden;padding:0.4em;height:48px;}
.cella4{width:157%;overflow:hidden;margin-bottom:2%;height:auto;}	
input {width:10%;height: 20%;margin:0;}
#submit {font-size:90%;width:86%;margin:0;}	
.largh5{width:5%;font-size:84%;width:100%;margin:0;}	
.barra{width:93%;}
img {max-width: 99%;}
h3 {font: 1.0em Verdana, Arial;color : #7e4f31;line-height : 1.2em;text-align: left;padding: 0 2px 0 2px;}
img#sinistro {margin:0 2px 1px 0; float:left;  display: block;}
.form_accedi{position:absolute;width:25%;height:15%;right:2%;top:2%;overflow:hidden;}
.form_accedi input {width:100%;height: 6%;font: normal bold 0.8em arial,sans-serif;}
#header img {max-width:100%;}
}