* {
   padding: 0;
   margin: 0;
  }

body {
      background-color: #47B247;
      font-family: arial, verdana;
     }

div#lista {
	   padding: 19px;
	   display: inline-block;
	   cursor: pointer;
           position: absolute;
	   top: 3px;
	   left: 3px;
	   z-index: 3;
	  }

div.trattino {
	      background-color: #fafafa;
	      height: 4px;
	      width: 22px;
	      margin-bottom: 4px;
	      transform: rotate(0deg);
	      -webkit-transform: rotate(0deg);
	      -moz-transform: rotate(0deg);
	     }

div#trattini {
	      transition-property: transform;
	      transition-duration: 800ms;
	      -webkit-transition-property: transform;
	      -webkit-transition-duration: 800ms;
	      -moz-transition-property: transform;
	      -moz-transition-duration: 800ms;
	     }	    

div#no_margin {
	       margin: 0;
	      }

div#ombra {
	   position: absolute;
	   top: 0;
	   left: 0;
	   width: 100%;
	   height: 100%;
	   background-color: black;
	   opacity: 0;
	   transition-property: opacity;
	   transition-duration: 1s;
	   -webkit-transition-property: opacity;
	   -webkit-transition-duration: 1s;
	   -moz-transition-property: opacity;
	   -moz-transition-duration: 1s;
	   z-index:-1;
	  }

div#contenuto {
	       width: 100%;
	       height: 100%;
	       position: absolute;
	       top: 0;
	       left: 0;
	       transition-property: opacity;
	       transition-duration: 1s;
	       -webkit-transition-property: opacity;
	       -webkit-transition-duration: 1s;
	       -moz-transition-property: opacity;
	       -moz-transition-duration: 1s;
	      }


div#menu_principale {
	             position: absolute;
	  	     height: calc(100% - 60px);
	  	     top: 60px;
	  	     width: 230px;
	  	     left: -230px;
	  	     background-color: #fafafa;
	  	     transition-property: left;
	  	     transition-duration: 1s; 
	  	     -webkit-transition-property: left;
	  	     -webkit-transition-duration: 1s;
	  	     -moz-transition-property: left;
	  	     -moz-transition-duration: 1s;
	  	     z-index: 3;
	 	    }

a.sottomenu {
	     position: relative;
	     top: 0;
	     left: 0;
	     width: 100%;
	     height: 40px;
	     cursor: pointer;
	     display: block;
	     color: rgb(123, 123, 123);
	    }

a.sottomenu:hover {
		   background-color: rgb(236, 236, 236);
		   border-right: 5px solid black;
		   color: black;
		   width: 225px;
		  }

a#scegli_carte:hover {
		      border-right: 0;
		      width: 100%;
		     }

div.icona {
	   position: absolute;
	   left: 0;
	   height: 40px;
	   width: 58px;
	  }

a#scegli_carte div.icona {
		          background-image: url("Scegli_carte.png");
	   	          background-repeat: no-repeat;
	   	          background-size: 100% 100%;
	   	          background-position: left bottom;
		         }
    
div.sottotitolo {
		 position: absolute;
		 left: 58px;
		 width: 192px;
		 font-size: 18px;
		 line-height: 38px;
	        }

div.mini_menu {
	       display: none;
	       position: fixed;
	       width: 230px;
	       left: 230px;
	       background-color: #fafafa;
	       z-index: 3;
	       border-left: 1px solid black;
	       cursor: pointer;
	      }

div.mini_menu:hover {
		     display: block !important;
		     opacity: 1;
		    }

div.mini_icona {
	        position: absolute;
	        left: 0;
	        height: 40px;
	        width: 58px;
	       }

a.mini_sottomenu {
	     	  position: relative;
	     	  top: 0;
	     	  left: 0;
	     	  width: 100%;
	     	  height: 40px;
	     	  cursor: pointer;
	     	  display: block;
	     	  color: rgb(123, 123, 123);
	    	 }

a.mini_sottomenu:hover {
		   	background-color: rgb(236, 236, 236);
		   	border-right: 5px solid black;
		   	color: black;
		   	width: 225px;
		       }

div.mini_sottotitolo {
		      position: absolute;
		      left: 58px;
		      width: 192px;
		      font-size: 18px;
		      line-height: 38px;
	             }

div.premio {
	    height: 170px;
	    width: 105px;
	    display: none;
            position: absolute;
	    background-image: url("./Immagini/premio.png");
	    background-repeat: no-repeat;
	    background-size: 100% 100%;
	    background-position: left bottom;
           }

div#premio_g2 {
               top: 5px;
	       left: 5px;
	      }

div#premio_g1 {
               bottom: 5px;
	       left: 5px;
	      }

div.carta {
	   height: 170px;
	   width: 105px;
	   display: none;
	   position: absolute;
	   background-image: url("none");
	   background-repeat: no-repeat;
	   background-size: 100% 100%;
	   background-position: left bottom;
	   border-radius: 10px;
	   -webkit-border-radius: 10px;
	   -moz-border-radius: 10px;
	   -o-border-radius: 10px;
	   -ms-border-radius: 10px; 
	  }

div#mazzo {
	   top: calc(50% - 85px);
	   left: calc((100% - 52.5px) / 5);
	   display: block;
	   background-image: url("./Immagini/Napoletane/retro.png"); 
	  }

div#prima_carta {
	   	 top: calc(50% - 85px);
	   	 left: calc(((100% - 52.5px) / 5) + 140px);
	  	}

div#carte_tavolo {
		  position: absolute;
		  top: calc(50% - 85px);
		  left: calc(3 * (100% - 52.5px) / 5);
		 }          

div#carta_tavolo1 {
                   position: relative;
                   top: 0;
		   right: 55px;
		  }

div#carta_tavolo2 {
                   position: absolute;
		   top: 0;
		   left: 60px;
		  }

div#carte_g1 {	
	      bottom: 5px;
	      right: 5px;
             }

div#carte_g2 {
	      top: 5px;
	      right: 5px;
	     }

div#mano_g1 {
	     position: absolute;
             bottom: 205px;
	     left: calc(3 * (100% - 52.5px) / 5);
	    }

div#mano_g2 {
	     position: absolute;
	     top: 35px;	     
	     left: calc(3 * (100% - 52.5px) / 5);
	    }

div#carta1_g1 {
	       top: 0;
	       right: 35px;
	      }    

div#carta2_g1 {
	       top: 0;
	       left: 0;
	      }  

div#carta3_g1 {
	       top: 0;
	       left: 140px;
	      } 

div#carta1_g2 {
	       top: 0;
	       right: 35px;
	      }    

div#carta2_g2 {
	       top: 0;
	       left: 0;
	      }  

div#carta3_g2 {
	       top: 0;
	       left: 140px;
	      }