/* CSS Document */

#boardbg {
 
 padding: 20px 10px 60px 10px;
 background:#ece6a5;
 background-image:url(gfx/boardbg.jpg); 
 border-radius:8px;   
}

#finished{
 position:absolute;
 top:240px;
 left:200px;
 background-image:url(gfx/woodbg.jpg); 
 border:4px solid #000;
 padding:20px;
 padding-top:20px; 
 z-index:5;	
 color:#FFF;
 width:350px;
 height:180px;
 text-align:center;
 font-size:18px;
 border-radius:10px;
 box-shadow:0px 3px 6px 2px #000;
 text-shadow: 1px 1px 8px #000;  
}
#finished a {
 color:#fff58b;
}
.hidden {
 display:none;	
}

#board {
 position:relative;	

 margin-top:20px;
 margin-left:20px;
 padding:0;
}

#boardmenu {
 position:relative;	
 margin-top:20px;
 margin-left:20px;
 padding:0;
}



#board div{
 display:inline-block;
 width:68px;
 height:68px;	
 margin:1px;
 padding:0;
 line-height:48px;
 text-align:center;
 border-radius:4px;  
 cursor:pointer;	
 transition-duration: 0.6s;
 transition-property: transform;  
}

div.rotate {
 transform: rotate(180deg);	
}

div.empty {
 background-image:url(gfx/empty.png);
}

div.wood {
 background-image:url(gfx/tile.png);
}

#board div b {
 position:relative;
 top:10px;
 font-size:40px; 
 color:#FFF;	
 text-shadow: 1px 1px 3px #000;
}

#board div i {
 width:50px;
 position:relative;
 top:0px;
 text-align:center;
 font-size:14px;
	
}


table #board {
 border: 2px solid #000;	
}

#trow3 td,#trow6 td{
  height:88px;
 vertical-align:top;  
}


td.tcol3,td.tcol6 {
 width:88px;

}

#board div.sel {
 background-image:url(gfx/sel.png);
}

#board div.emptynote {
 background-image:url(gfx/emptynote.png);	
}

#board  div.emptysel {
 background-image:url(gfx/emptysel.png);
}

#scorediv {
 margin-top:5px;
 position:relative;
 left:30px;
 display:block;
 height:55px;
 width:650px;
}

#errors {
 position:relative;
 top:-5px;
 font-size:42px;
 color:#c43100;	
 font-weight:bold;
 text-shadow: 1px 3px 3px #000; 
}

#errors img {
 position:relative;
 top:5px;	
}

#time {
 background-image:url(gfx/clock.png);
 background-repeat:no-repeat;
 padding-left:25px;
 position:absolute;
 left:360px;
 top:5px;	
}
#level {
 position:absolute;
 left:580px;
 top:5px;	
 font-weight:bold;
 font-size:16px;
}


#boardmenu {
 margin-top:0px;	
 position:relative;
 left:0px;
}

#boardmenu td{
 text-align:center;	
}
#boardmenu span{
 margin-left:14px;	
 font-size:12px;
}
#boardmenu div {
 background-color:#EEC;
 display:block;
 margin-left:14px;
 padding:0;
 border:1px solid #444;
 text-align:center;
 height:50px;
 width:56px;	

 font-size:44px; 
 line-height:52px;
 color:#FFF;	
 text-shadow: 1px 1px 3px #000; 
 
 padding-top:0px;	
 padding-bottom:4px;
 
 	
 border-radius:8px; 
 background-image:url(gfx/tile.png); 
 box-shadow:0px 4px 6px #000;
 cursor:pointer;	 
}

#menu1 { transform:rotate(-2deg); }
#menu2 { transform:rotate(5deg); }
#menu4 { transform:rotate(-4deg); }
#menu6 { transform:rotate(-6deg); }
#menu8 { transform:rotate(6deg); }


#notesdiv {

}

#notes {
 position:absolute;
 left:710px;
 top:190px;	
}

#notes img {
 position:relative;
 left:7px;	
 margin-bottom:8px;
}

#notes div {
 display:block;
 height:34px;
 width:38px;
 font-size:24px;	
 border:1px solid #000;
 text-align:center;
 line-height:16px;
 font-size:13px;
 margin:8px;
 padding:0px;
 padding-bottom:5px;
 border-radius:8px;  
 box-shadow:0px 1px 3px #000;
 cursor:pointer;
}
#notes div span {
 display:block;
 height:max;
 width:max;	
 padding-top:6px;
 padding-bottom:5px;
 border-radius:8px;   
}

#notes div span.selected {
 box-shadow:inset 0px 0px 0px 4px #0B0;
}

#notes a {
 color:#000;
 font-size:12px;	
}

#next {
 position:relative;
 left:4px;
 top:10px;	
}

.completed {
  opacity:0.1;
	
}