@font-face{
	font-family:'jap';
	font-style:normal;
	font-weight:normal;
	src:url('../font/bonzai-webfont.woff') format('woff');
	}
html,body{height:100%;
/*            overflow: hidden;*/
/*            overflow-x: hidden;*/
min-width:600px;
}*{
	margin:0;
	padding:0;
	}
	::-moz-selection{
		background:rgba(168,62,62,0.8);
		color:#fff;
		text-shadow:none;
		}
		::selection{
			background:rgba(168,62,62,0.8);
			color:#fff;
			text-shadow:none;
			}
button{
	font:99% sans-serif;
	width:auto;
	overflow:visible;
	cursor:pointer;
	}
	button::-moz-focus-inner{
		border:0;
		}
	body{
		font-family:arial;
		font-size:12px;
		background:url('../img/canvas-bg.jpg') 0 0;
                  overflow: hidden;
                  overflow-x: hidden;
		}
		
a{
	color:#C18787;
	color:rgba(168,62,62,1);
	border-radius:5px;
	text-decoration:none;
	padding:1px 2px;
	-webkit-transition:0.2s;
	transition:0.2s;
	}
	a:hover{
		color:#EFEFED;
		}
#header{
			display:block;
			text-align:center;
			padding:0px 0 0;
			font-weight:normal;
			position:relative;
			}
#header{
	width:60%;
	max-width:550px;
	min-width:430px;
	margin:0 auto;
	}
#header>.output{
	display:inline-block;
	font:1.2em/1 arial;
	text-transform:uppercase;
	position:relative;
	}
.level{
	list-style:none;
	color:#888;
	display:inline;
	letter-spacing:-1px;
	font-weight:bold;
	text-transform:uppercase;
	}
.level li{
	display:inline-block;
	border-radius:5px;
	cursor:pointer;
	font-size:0.9em;
	padding:14px 11px 12px;
	}
.level li:hover{
	color:#333;
}
.level li.on{
	background:url('../img/wood.png');
	color:#EFEFED;
	}
.outterWrap{
	text-align:center;
	padding:10px 0 15px;
	}
#board_cont{
	/*background-image:url(img/canvas-bg.jpg);*/
	display:inline-block;
	width:60%;
	max-width:550px;
	min-width:479px;
	position:relative;
	}
#board_cont::after{
	padding-top:100%;
	display:block;
	content:'';
	}
.contwrap{
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	}
.contwrap.paused::before{
	content:'';
	display:inline-block;
	height:100%;
	vertical-align:middle;
	}
.contwrap.paused>h2{
	display:inline-block;
	width:100%;
	vertical-align:middle;
	font-size:4em;
	color:rgba(0,0,0,0.1);
	}
.contwrap>table{
	width:100%;
	height:100%;
	border:#AAA solid 2px;
	color:#777;
	border-radius:6px;
	}
.contwrap>table>*>*>td{
	width:33%;
	height:33%;
	border-color:#AAA;
	border-style:solid;
	border-width:2px 2px 0 0;
	}
.contwrap>table>*>*>td:nth-child(0n+3){
	border-width:2px 0 0 0;
	}
.contwrap>table>*>tr:first-child>td{
	border-width:0 2px 0 0;
	}
.contwrap>table>*>tr:first-child>td:last-child{
	border:0;
}
.contwrap>table>tbody>tr:nth-child(2)>td:nth-child(odd),.contwrap>table>tbody>tr:nth-child(odd)>td:nth-child(even){
	background-color:rgba(0,0,0,0.03);
	}
.highlight{
	background-color:rgba(100,100,100,0.1);
	}
.box{width:100%;
height:100%;
}
.box>*>*>td{
	width:33%;
	height:33%;
	font-size:3em;
	border-color:#CCC;
	border-style:dashed;
	border-width:2px 2px 0 0;
	cursor:default;
	}
.box>*>*>td>span{
	display:inline-block;
	-webkit-transition:.2s ease;
	transition:.2s ease-in;
	}
.box .user{
	color:#A83E3E;
	cursor:pointer;
	}
.user:active{
	background:none;
	}
@-moz-keyframes pulse{
50%{ 
background:rgba(100,100,100,0.04); 
}	
}
@-webkit-keyframes pulse{
50%{ background:rgba(100,100,100,0.04); 
}
					
}
					/* when hiding all cells and then showing them again, populated differently */
.hideCells .box > * > * > td > span{ 
opacity:0;
 transform:scale(.5); 
 -webkit-transform:scale(.5);
  }
				
.user > div{ 
height:100%;
 position:relative;
  -moz-box-sizing: border-box;
   }
					
.touch .user:hover > div{ 
background:none;
 -webkit-animation:none;
  animation:none; 
  }
.user:hover > div{ 
background-color:rgba(100,100,100,0.1); 
animation:.8s .5s pulse infinite linear;
 -webkit-animation:.8s .5s pulse infinite linear;
  }
.user > div > div{ 
display:table;
 width:100%; 
 height:100%;
  }
.user.filled > div > div{ 
display:table; 
}
.user > div span, 
.hideCells .box .user > div span{ 
opacity:0;
 font-size:1em;
  transform:scale(0);
   -webkit-transform:scale(0);
    display:table-cell;
	vertical-align:middle;
	 -webkit-transition:.2s;
	  transition:.2s;
 }
.user.filled > div span{ 
opacity:1; transform:scale(1);
 -webkit-transform:scale(1);
  -webkit-transition:.2s;
   transition:.2s; 
   -webkit-backface-visibility:hidden;
    }
.user > div > .candidates{ 
font-size:1em; 
width:100%;
 height:100%;
  position:absolute;
   top:0;
    xleft:0;
	 xz-index:-1;
	  }
.user.filled > div > .candidates{ 
display:none;
 }
.user > div > .candidates td{ 
font-size:0.3em;
 width:33%; 
 height:33%;
 border:none; 
 line-height:normal; 
 }
					
.user button{ 
display:none; 
opacity:0.5;
 position:absolute;
  top:0px; 
  right:0px;
   z-index:2;
    cursor:pointer;
	 font-size:0.5em;
	  min-width:16px;
	   border-radius:0 0 0 25px;
	    padding:0 1px 2px 4px;
		 background-color:rgba(168, 62, 62,0.8);
		  color:#EFEFED;
		   border:none; 
}
.touch .user button{
	 display:none !important;
	  }
.filled:hover button{ 
display:block;
 } /* only show the X button for user-filled cells */
.user > div button:hover{
	 opacity:1;
	  }
.touch .num_select{
	 transition:none;
	  }
.num_select{ 
opacity:0;
 font-size:0.4em;
  font-size:0.3em;
   height:100%; 
   width:100%;
    margin:0;
	 position:absolute;
	  top:0;
	   left:0;
	   z-index:2;
	    pointer-events:none;
		 background-color:#841F1E;
		 padding:2px;
		  border-radius:7px;
		   box-shadow:0 0 12px rgba(79, 18, 18, 0.3); 
		   
										
-webkit-transition:.2s;
transition:.2s;
-webkit-font-smoothing: antialiased;
}
.num_select.show{
	opacity:1;
	 transform:scale(1.3); 
	 -webkit-transform:scale(1.3);
	  pointer-events:auto; 
	  }
.num_select td{
	 height:auto; 
	 width:auto; 
	 color:#FFF; 
	 font-weight:bold; 
	 border:none;
	 line-height: normal;
	  cursor:pointer; 
	  border-radius:6px;
	   }
.num_select td:hover{ 
background-color:#B76464; 
}
.num_select td.disabled{ 
opacity:0.4;
 cursor:default;
  }
.num_select td.disabled:hover{ 
background:none; 
}
				
.box > * > * > td:nth-child(3n){ 
border-width:2px 0 0 0;
 }
.box > * > tr:first-child td{
	 border-width:0 2px 0 0; 
	 }
.box > * > tr:first-child td:last-child{
	 border:0;
	  }
	
#options{
	width:520px; 
	border-top:1px solid rgba(0, 0, 0, 0.2); 
	border-radius:80px; 
	box-shadow:0 -5px 0 rgba(60, 40, 30, 0.1);
	margin:0 auto;
	 overflow:hidden;
	  padding:10px 0;
	  text-align:center;
}
	#options button{
		display:inline-block;
		 height:2em;
		 font-size:13px;
		  padding:4px 12px;
		   margin-left:-3px; 
		   vertical-align:middle;
		    background:none;
			color:#777;
			 text-transform:capitalize;
			  border:none; 
			  border-radius:6px;
			  }
	#options button:enabled:hover{
		 color:#444; 
		 background-color:rgba(60, 40, 30, 0.1);
		  }
	#options button:enabled:active{
		 color:#222;
		  line-height:1.5;
		   }
	#options button:disabled{ 
	opacity:0.5;
	 cursor:default;
	  }
	#options button > b{
		 display:inline-block;
		  margin:0 4px -1px 0;
		   border-radius:3px;
		    height:9px;
			 width:9px;
			  border:1px solid rgba(80, 80, 80, 0.5); 
			  }
	#options .on > b{ 
	background-color:#A83E3E; 
	border-color:transparent;
	 }

/*Ankur Starts*/
#logo{
	display:inline;
	overflow:hidden;
	font:4em/0.6 'jap',georgia new;
	color:#F6F0E0;
	letter-spacing:-2px;
	}
#topStrip{
background:url('../img/wood.png');
box-shadow:0 -12px 12px -12px #000 inset;
font-weight:bold;
line-height:28px;
color:#F6F0E0;
text-transform:capitalize;
 border-radius:0px;
 border:0px;
 border-bottom:8px solid #841F1E;
}
#options_advanced{
	float:right;
	font-weight:bold;
        padding:15px;
        padding-right:10%;
/*	line-height:28px;*/
	}
#options_advanced button{
	display:inline-block;
	background:none;
	color:#F6F0E0;
	border:none;
	margin:0 10px;
	position:relative;
	text-transform:capitalize;
	-webkit-transition:0.2s;
	transition:0.2s;
	}
#options_advanced button:enabled:hover{
	color:#FFF;
	box-shadow:0 2px 0 0 #841F1E;
	}
#options_advanced button:disabled{
	opacity:0.5;
	cursor:default;
	}
#options_advanced button:active{
	color:#FFF;
	top:1px;
	}

time{
	display:inline-block;
	float:right;
	padding:5px 15px;
	margin-top:3px;
	font-size:1.4em;
	color:#888;
	cursor:pointer;
	background-color:rgba(0,0,0,0.07);
	font-weight:bold;
	border-radius:12px;
	-moz-user-select:none;
	-webkit-user-select:none;
	}
time:hover{
	background-color:rgba(168,62,62,0.8);
	color:#EFEFED;
	}
time.pause{
	opacity:0.6;
	}

#instructions{ 
/*display:block;*/
 overflow:hidden;
/* height:252px;
 width:579px; */
/* padding:40px;*/
  font-size:1em;
   color:#F6F0E0;
    background:url('../img/wood.jpg');
	 font-family:arial;
	  line-height:1.4;
	   position:absolute;
		padding-top:0%;
		padding-left:6%;
	   /* box-shadow:0 7px 15px -10px #000 inset;*/
		 border:2px solid #841F1F; 
		 display:none;}
#back
 {
	float:right; 
	background-image:url(../img/cross.PNG); 
	height:42px; 
        background-repeat: no-repeat;
	width:42px; 
	 display:none;
 }

#footer{
	 display:block;
	  overflow:hidden;
	   position:relative;
	    padding:40px 50px 20px;
/*		 margin-top:40px;*/
		  font-size:1em;
		   color:#F6F0E0; 
		   background:url('../img/wood.png');
		    font-family:arial;
			 line-height:1.4;
			  position:relative;
			   box-shadow:0 7px 15px -10px #000 inset;
			    border-top:12px solid #841F1F;
 }
	
/*Ankur Ends*/

footer a{
	 text-shadow:0 -1px #000, 0 0 5px #000;
	  font-weight:bold; color:#BF5F5F;
	   }
.credits{ 
float:right; 
margin-top:30px;
 text-align:right;
  font-weight:bold;
   text-transform:uppercase;
    }
.fbLike{
	 clear:left;
	  float:left;
	   margin-top:32px;
	    border:none;
		 overflow:hidden;
		  width:370px; 
		  height:21px;
		   }
footer section{ 
	float:left; 
	width:33%;
	 -webkit-transition:.5s; 
}
footer section hgroup{ 
display:table;
 text-align:center;
  width:85%;
   margin:0 auto;
    -webkit-transform:scaleY(1.5);
	 transform:scaleY(1.5);
	  }
footer section hgroup:before, footer section hgroup:after{
	 content:''; 
	 display:table-cell;
	  background:#841F1F;
	   width:50%;
	    border-radius:5px;
		 -webkit-transform:scaleY(0.2);
		  transform:scaleY(0.2);
		   opacity:0.5;
 }
footer section h2{ 
display:inline;
 font:italic 2.1em/1.5 georgia, Serif; 
 white-space:pre; padding:0 15px;
  text-shadow:0 -2px 1px #111;
   }
footer ul{ 
list-style:none; 
margin:25px 5px 25px 0; 
color:#B8B1A4; 
overflow:hidden;
 }
footer ul > li{
	 position:relative;
	  float:left; 
	  clear:left; 
	  padding:4px 0 4px 30px;
 }
footer ul li::before{
				display:inline-block;
				line-height:0;
				margin:-1px 10px 0 -24px;
				content:'\2022';
				color:#111;
				text-shadow:0 1px rgba(255,255,255,0.15);
				font-size:3em;
				vertical-align:middle;
				-webkit-transition:.3s ease-out;
				transition:.3s ease-out;
}
footer ul li:hover::before{ 
opacity:1; transform:scale(1.5);
 -webkit-transform:scale(1.5); 
 color:#D6CFC5; 
 text-shadow:0 0 4px #EFCFBD;
  -webkit-transition:.1s;
   transition:.1s;
   }

.alert{ position:fixed;
 z-index:2;
  top:0; 
  left:0;
   width:100%; 
   text-align:center;
    color:#FFF; 
	font-weight:bold; 
	font-size:1.1em;
	 pointer-events:none; 
	 }
.alert > div{ 
display:inline-block;
background-color:rgba(168,62,62,0.5);
 padding:6px 15px;
  border-radius:0 0 6px 6px; 
  } 
.alert.shout{ 
padding-right:35px; 
}
.alert.shout button{ 
position:absolute;
 top:5px;
  right:8px;
   width:18px; 
   height:18px;
    font-size:0.9em; 
	background-color:rgba(0,0,0,0.3);
	 color:#B45F5F;
	  border:none;
	   cursor:pointer;
	    font-weight:bold; 
		border-radius:10px;
 }
		.alert.shout button:hover{
			 color:#C68585; 
			 }

/*-------------------------
	Documentation page
--------------------------*/
.doc{ 
color:#333;
 }
.wrap{
	 margin:0 auto; 
	 padding:50px 0; 
	 width:600px;
	  font:1.2em/1.2em arial, sans-serif; 
	  }
.wrap h1{
		 color:rgba(168, 62, 62,0.8);
		  letter-spacing:-1px; 
		  font:italic bold 3.4em/0.8em georgia new, serif, Serif;
 }
.wrap h2{ 
font-size:2em;
 font-family:serif;
  margin:1.4em 0 0.5em;
   color:#555;
    padding-bottom:3px; 
	border-bottom:1px solid #ccc;
	 border-bottom:1px solid rgba(0,0,0,0.1); 
	 font-style:italic;
	  line-height:1.1em; 
	  letter-spacing:-1px; 
	  }
.wrap h3{ 
margin-bottom:1em;
 }
.wrap .indent{ 
margin-left:40px;
 }
.wrap .numeric{ 
font-family:monospace, sans-serif, arial;
 letter-spacing:-1px;
  }
a.btn{ 
display:inline-block; 
font-size:1.2em; 
border-radius:6px;
 padding:0.5em 1em;
  text-align:center;
   background-color:#B24C4C;
    color:#FFF;
	 border:1px solid #C78888; 
	 text-shadow:0 1px 1px rgba(0, 0, 0, 0.4);
	  box-shadow:0 1.2em 20px rgba(255,255,255, 0.4) inset, 0 0 0 5px rgba(0,0,0,0.1); -webkit-transition:0.1s; -moz-transition:0.1s; transition:0.1s; 
	  }
a.btn:hover{ 
word-spacing:normal; 
background-color:#BC6060;
 }
.doc footer{ 
text-align:center;
 }
.doc header{
	 display:block;
	  width:auto;
	   overflow:hidden; 
	   position:relative;
	    padding:20px 50px;
		 font-size:1em;
		  background-color:rgba(60, 40, 30, 0.1); 
		  color:#666;
		   position:relative;
		   outline:2px solid rgba(60,40,30,0.1); 
		   border-bottom:2px dashed rgba(255,255,255,0.5);
 }
.doc header .wrap{
	 padding:0; 
	 font-family:arial; 
	 font-size:1em;
	  }	
.doc header a{ 
float:right;
 }
	big{ 
	font-size:1.8em;
	 line-height:1.6em; 
}
mark{
	 background-color:light-yellow;
	  padding:0 2px 0 1px;
	   }
code{ 
background-color:rgba(100,100,100,0.15);
 padding:0 3px;
 color:darkred;
  }
	
	
.wrap ol{
	 margin:10px 0 10px 30px;
	  }
.wrap ol li{
	padding:4px 5px;
	 }
.wrap ul{
	 margin:10px 0 10px 30px;
	 }
.wrap ul.type1{ 
list-style:none;
 margin-left:10em;
  }
.wrap ul.type2{
	 overflow:hidden;
	  padding-left:0;
	  margin-left:0;
	  }
	.wrap ul li{
		 padding:4px 0;
		  }
	.wrap ul.type2 li{
		list-style:none;
		 position:relative;
		 float:left; 
		 clear:left;
		  text-indent:30px;
		  }
	.wrap ul.type2 li::before{ 
	display:block;
	content:'\2022';
	 font-size:1.8em;
	  color:#555;
	  position:absolute; 
	  top:0;
	   left:-20px;
	   line-height:1em;
	    -webkit-transition-duration:0.12s; 
		-moz-transition-duration:0.12s;
		 transition-duration:0.12s; 
		 }
	.wrap ul.type2 li:hover::before{
		 font-size:4em;
		  line-height:0.4em;
		   left:-26px;
		   }
	.wrap ul.type1 li{
		padding:10px 0;
		}
.wrap ul.type1 li strong{
	 float:left;
	  width:12em; 
	  text-align:right; 
	  margin-left:-14em;
	   }

	
@media (min-height : 1200px){
	#board_cont > table{ 
	width:560px; 
	height:560px;
	 font-size:1.1em;
	  }
}
	
@media (max-height: 540px){
	#board_cont{ 
	min-height:380px;
	 }
#board_cont > table{ 
width:380px; 
height:380px;
font-size:0.8em;
 }
	.num_select{  }
}
	
@media (max-width:1400px){
	footer section{ float:none; width:500px; margin:10px auto 50px; font-size:1.1em; }
	footer section hgroup{ width:100%; }
	footer section.credits{ margin-bottom:0; }
		footer section header{ width:150%; margin-left:-25%; }
		footer section > h2{ font-size:2.3em; text-shadow:0 1px 0 rgba(255,255,255,0.5); }
		footer ul > li{ letter-spacing:0px; }
		footer ul > li span{ font-size:0.9em; }
}

@media (max-width: 980px){
	#header{ padding:0; }
	time{ float:none; margin:10px auto; }
	#header > .output{ display:block; line-height:1; height:2.5em; }
	.level{ display:block; text-align:justify; }
	.level::after{ content:''; width:100%; display:inline-block; }
	
	.contwrap{ font-size:0.9em; }
	.num_select{ font-size:.4em; }
}

@media (max-width: 850px){
	.level li{ font-size:0.8em; }
	.num_select{ font-size:.35em; }
	.credits{ width:500px; float:none; margin:10px 0; text-align:left; padding:15px; background:rgba(0,0,0,0.2); border-radius:10px; border-bottom:1px solid rgba(255,255,255,.12); box-shadow:0 10px 10px -10px rgba(0, 0, 0, 0.5) inset; }
	.fbLike{ width:500px; display:block; float:none; margin:10px 0; }
}

@media (max-width: 480px){
	html, body{ min-width:480px; font-size:84%; }
	
	header{ width:460px; padding:20px 0 0px; }
		.level li{ font-size:0.75em; }
		.contwrap{ font-size:0.8em; }
	
	.num_select{ font-size:0.3em; }	
	.num_select.show{ opacity:1; pointer-events:auto; transform:scale(3); }
	
	#options{ width:440px; font-size:0.8em; }
		#options button{ padding:2px 5px; }

	footer{ padding:40px 0 20px }
	footer section{ width:420px; }
		footer ul > li{ height:auto; font-size:1.2em;  }
	.credits{ width:auto; float:none; margin:30px; }
	.fbLike{ width:auto; display:block; float:none; margin:30px; }
}

@media screen and (max-width: 320px){
	html, body{ min-width:320px; font-size:72%; }
	
	header{ width:310px; padding:20px 0 0px; }
		time{ padding:3px 10px; bottom:6px; }
		
		.box > * > * > td{ border-width:1px 1px 0 0; border-color:#AAA; }
		.box tr:first-child > td{ border-width:0 1px 0 0; }
		.box > * > * > td:nth-child(3n){ border-width:1px 0 0 0; }
		.num_select{ border-radius:4px; }
	
	#options{ width:310px; }
		#options button{ font-size:10px; padding:2px 4px; }
			#options button > b{ display:none; }
			#options .on{ color:#A83E3E; }
	
	#topOpts{ min-width:320px; }
	
	footer{ padding: 60px 10px 20px; }
	footer section{ width:295px; }
		.credits{ width:310px; }
		footer section > ul{ font-size:1em; }
			footer section > ul > li{ padding:3px 0; height:12px; }
}

@media print {
	h1, #options, #topOpts, time, footer{ display:none; }
}
/*#board{
	 height:750px; 
	 width:750px; 
	 background-image:url(img/boardone.png);
	 background-repeat:no-repeat;
	 padding-top:9%;
    background-size: cover;

}*/
#image{
background-repeat:no-repeat;
background-image:url(../img/one.png);
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-bottom:7.95%;
overflow:hidden;
}
/*#board_cont {

	background-image:url(img/canvas-bg.jpg);
    display: inline-block;
	min-width: 65%;
	min-height: 100%;
    position: relative;
	background-size:100% 100%;
	
}*/
#bg{
	 height:700px; 
/*	 width:730px; */
	 background-image:url(../img/boardone.png);
	 background-repeat:no-repeat;
	 padding-top:5%;
	 padding-left:6%;
/*         overflow:hidden;*/
/*   background-size: cover;*/

}