* {
   padding: 0;
   margin: 0;
  }

::selection {
             background: #b3d4fc;
             color: white;
	  		}

::-moz-selection {
                  background: #b3d4fc;
                  color: white;
	             }    
  
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#titolo {
			position: absolute;
			top: 3px;
			left: 63px;
			z-index: 3;
			display: inline-block;
			text-align: center;
			font-size: 25px;
			color: #fafafa;
			font-weight: bold;
			letter-spacing: 1px;
			width: calc(100% - 66px);
			height: 58px;
			line-height: 58px;
		   }	 
		   
span#titolo {
			 position: relative;
			 left: -31.5px;
			}
			
div#messaggi {
			  width: 100%;
			  text-align: center;
			  position: absolute;
			  left: 0;
			  top: 20px;
              font-family: constantia;
			  letter-spacing: 1px;
			  text-shadow: 1px 1px 7px #fafafa;
			  -webkit-text-shadow: 1px 1px 7px #fafafa;
			  -moz-text-shadow: 1px 1px 7px #fafafa;
			  color: #fafafa;
			  font-size: 23px;
			  opacity: 0;
			  transition-property: opacity;
			  transition-duration: 3s;
			 }
			
div#contenitore_sudoku {
						position: absolute;
						text-align: center;
						left: 3px;
						top: 58px;
						width: calc(100% - 6px);
						height: calc(100% - 61px);
					   }
		
table#sudoku {
	          display: inline-table;
			  position: relative;
			  top: calc((100% - 452px) / 2);
			  table-layout: fixed;
			  border: 3px solid #fafafa;
			  border-collapse: collapse;
			  empty-cells: show;
			 }	

table#sudoku  td {
			      border: 2px solid #fafafa;
				  cursor: pointer;
				  padding: 0;
				  width: 48px;
				  height: 50px;
				  font-size: 20px;
				  text-align: center;
				  color: #fafafa;
				  transition-property: background-color;
				  transition-duration: 0.3s;
				  -webkit-transition-property: background-color;
				  -webkit-transition-duration: 0.3s;
				  -moz-transition-property: background-color;
				  -moz-transition-duration: 0.3s;
			     }

table#sudoku td:hover {
					   background-color: rgba(250,250,250,0.2);
					  }
					  
table#sudoku td::selection {
							background: rgba(225,225,225,0);
						    color: white;
						   }