/*! normalize.css v1.0.1 | MIT License | git.io/normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none;height:0}
[hidden]{display:none}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html,button,input,select,textarea{font-family:sans-serif}
body{margin:0}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
h2{font-size:1.5em;margin:.83em 0}
h3{font-size:1.17em;margin:1em 0}
h4{font-size:1em;margin:1.33em 0}
h5{font-size:.83em;margin:1.67em 0}
h6{font-size:.75em;margin:2.33em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
blockquote{margin:1em 40px}
dfn{font-style:italic}
mark{background:#ff0;color:#000}
p,pre{margin:1em 0}
code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}
q{quotes:none}
q:before,q:after{content:'';content:none}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
dl,menu,ol,ul{margin:1em 0}
dd{margin:0 0 0 40px}
menu,ol,ul{padding:0 0 0 40px}
nav ul,nav ol{list-style:none;list-style-image:none}
img{border:0;-ms-interpolation-mode:bicubic}
svg:not(:root){overflow:hidden}
figure{margin:0}
form{margin:0}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0;white-space:normal;*margin-left:-7px}
button,input,select,textarea{outline:none;font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}
button,input{line-height:normal}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}
button[disabled],input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}

.ir { overflow:hidden;text-indent:-999px; }

html, body { background: black; }
html { overflow-x: hidden; overflow-y: hidden; }
body {  margin: 0; overflow-x: hidden; overflow-y: hidden; min-width: 1024px; }
* { -webkit-user-select: none; -moz-user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }


@font-face {
    font-family: 'open_sansextrabold_italic';
    src: url('../puzzle/fonts/opensans-extrabolditalic-webfont.eot');
    src: url('../puzzle/fonts/opensans-extrabolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../puzzle/fonts/opensans-extrabolditalic-webfont.woff') format('woff'),
         url('../puzzle/fonts/opensans-extrabolditalic-webfont.ttf') format('truetype'),
         url('../puzzle/fonts/opensans-extrabolditalic-webfont.svg#open_sansextrabold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

#content-wrapper {
color: white;
font-family: 'Open Sans', sans-serif;
width: 1024px;
height: 720px;
/*top: 50%;*/
/*margin-top: -322px;*/
font-weight: 700;
/*overflow-x: visible; overflow-y: visible;*/
}
#content-wrapper {
    position: relative;
    margin: 0 auto;
    /*left: 0;*/
}
.content { width: 1020px; height: 720px; }

.lt-ie9 body {
	font-family: 'open_sansextrabold_italic';
}



a {
	text-decoration: none;
}
a:hover, a:focus {
	outline-style: none;
	outline-width: 0px;
}

.content > img {
	position: absolute;
}


.button {
	border-radius: 13px;
	position: absolute;
	background: #e10004;
	font-size: 40px;
	color: white;
	text-transform: uppercase;
	padding: 10px 50px;
	cursor: pointer;
	text-align: center;
}
.no-touch .button:hover {
	color: #fffaaa;
}

#game .easy, #game .medium, #game .hard {
    background: none;
    font-weight: 300;
    position: static;
    display: inline-block;
    font-size: 22px;
    padding: 0;
    width: 25%;
}
#game .logo {
    left: 10px;
    margin-left: 0;
}
#game .buttons {
    position: absolute;
    top: 253px;
    left: 10px;
    padding-top: 0;
    height: 35px;
    white-space: nowrap;
    text-align: center;
}

#name2, #name1 {
position: absolute;
text-transform: uppercase;
font-size: 10px;
top: 523px;
left: 531px;
}

#name1 {
top: 573px;
}

#score2, #score1 {
position: absolute;
top: 519px;
left: 591px;
text-align: center;
width: 40px;
text-shadow: 0px 0px 5px black;
}

#score1 { top: 569px; }

#icon2, #icon1 {
position: absolute;
top: 503px;
left: 570px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;

    /*animation: fade 3s forwards infinite;
  -webkit-animation: fade 3s forwards infinite;*/
}

#icon1 {
top: 570px;
animation-delay: 1.5s;
-webkit-animation-delay: 1.5s;
}

@keyframes fade {
0%   {margin-left:0px;}
50%   {margin-left:20px;}
100% {margin-left:0px;}
}
@-webkit-keyframes fade {
0%   {margin-left:0px;}
50%   {margin-left:20px;}
100% {margin-left:0px;}
}


#field {
	position: absolute;
	top: 54px;
	left: 12px;
	width: 1000px;
	height: 400px;
	background: url(img/blank.gif);
}
#field > div {
	position: absolute;
}
.dot {
	background: url(img/dot.png);
}
.grid {
background: rgba(255,255,255,0.15);
}

.no-touch .preview {
	display: block !important;
	opacity: 0.5;
}
.drawn {
	display: block !important;
	opacity: 1.0;
}

.box-inner {
	position: absolute;
	background: url(img/checkers_red.png);
top: 50%;
bottom: 50%;
left: 50%;
right: 50%;
box-shadow: -8px -8px 5px rgba(0,0,0,0.4) inset, 8px 8px 5px rgba(255,255,255,0.6) inset, 0px 0px 20px #000;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.box.yellow .box-inner {
	background: url(img/checkers_yellow.png);
}

.csstransitions .box {
	display: block !important;
}

.box.drawn .box-inner {
	top: 20%;
bottom: 20%;
left: 20%;
right: 20%;
}

.diff0 .button.easy, .diff1 .button.medium, .diff2 .button.hard  {
color: #f40;
text-shadow: 0px 0px 10px black,0px 0px 10px black,0px 0px 10px black;
}

.button.restart, .button.download {

}
.button.download.inst {

}

#payoff, #unlock, #instructions {
	position: absolute;
	background: rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
	top: 0;
}
#payoff img, .payofftxt {
	position: absolute;
	top:30px;
	left:88px;
}
.payofftxt {
text-transform: uppercase;
font-size: 45px;
font-style: italic;
text-shadow: 0px 2px 3px black;
width: 850px;
margin-top: 30px;
text-align: center;
}

#payoffclose, #unlockclose, #instclose {
position: absolute;
font-size: 35px;
top: 25px;
left: 910px;
cursor: pointer;
}

#unlocktext {
text-transform: uppercase;
font-size: 38px;
font-style: italic;
text-shadow: 0px 2px 3px black;
width: 410px;
text-align: center;
position: absolute;
top: 200px;
left: 480px;
}
#unlockclose {
top: 115px;
}
#unlock img {
	position: absolute;
	top:120px;
	left:88px;
}



.insttext, #instheader {
font-size: 27px;
font-style: italic;
text-shadow: 0px 2px 3px black;
width: 810px;
text-align: left;
position: absolute;
top: 230px;
left: 140px;
}
#instheader {
text-transform: uppercase;
	font-size: 40px;
	top: 150px;
	color: #ffd800;
}
.insttext span {
	color: #ffd800;
}

#instclose {
top: 115px;
}
#instructions img {
	position: absolute;
	top:120px;
	left:88px;
}

#logo {
	right: 0px;
}

#logord {
position: absolute;
top: 16px;
left:9px;
}


.rd {
color: #fff /*#73b6ff*/;
text-transform: uppercase;
font-size: 19px;
top: 97px;
position: absolute;
left: 0px;
text-align: center;
width: 100%;
bottom: -12px;
}


#legal {
position: absolute;
top: 610px;
left: 0;
width: 1024px;
overflow: hidden;
}
#legal {font-family: arial, helvetica, sans-serif; font-size: 11px; color: #aaa; text-align:center; }
#legal a { color: #fff; text-decoration: none; }
#visitsite, #fb, #rating { position: absolute; }
#rating { height: 28px;
right: 208px;
top: 5px;
 }
#fb { right:16px;top:5px; }
#visitsite { right: 48px; top:-7px; }
#visitsite div {
position: absolute;
top: 0;
left: 0;
right: 2px;
text-align: center;
color: #fff;
font-family: sans-serif;
font-weight: bold;
margin-top: 9px;
font-size: 10px;
font-family: "Open Sans";
font-style: italic;
line-height: 12px;
text-shadow: 0px 0px 2px #000;
}
.lt-ie9 #visitsite div {
	font-family: 'open_sansextrabold_italic';
	font-style: normal;
} 


#soundBtn {
	position:absolute;
left: 323px;
top: 13px;
	width:24px;
	height:24px;
	background-image:url(img/soundBtn.png);
	background-repeat:no-repeat;
	background-position:0px 0px;
	cursor:pointer;
}

		#gplus
		{ 
			position:absolute;
			overflow:hidden;
			
			left:95px;
		}
		
		#flike
		{ 
			position:absolute;
			overflow:hidden;
				
			left:4px;
		}
		
		#twlike
		{ 
			position:absolute;
			overflow:hidden;
			
			left:160px;
		}
			#socialContainer{
			position:absolute;
			height:21px;
		}
		#social
		{ 
			position:absolute;
			overflow:hidden;
			width:320px;
			height:21px;
			top:13px; left:6px;
			z-index:300;
		}
		
		
.lt-ie9 .button div img {
	width: 100% !important;
} 


#field .bg, #field .over {
    position: absolute;
}
#player {
    position: absolute;
}
#field {
    position: absolute;
    width: 530px;
    left: 430px;
    top: 50px;
    height: 530px;
}

.diff0 .bgeasy, .diff1 .bgmedium, .diff2 .bghard {
    display: block;
}
.diff0 .bgeasy.iphone, .diff1 .bgmedium.iphone, .diff2 .bghard.iphone {
	display: none;
}

.bgeasy, .bgmedium, .bghard {
    display: none;
}
#field .bg {
    left: -254px;
    top: -60px;
}

.no-touch body { visibility: hidden; }

#legal {
    background: url(img/legal.png) no-repeat;
    height: 35px;
    top: 685px;
    font-family: 'Open Sans', sans-serif;
    font-size: 9px;
}

.chooselabel {
    position: absolute;
    top: 282px;
    left: 50%;
    width: 477px;
    margin-left: -239px;
    font-size: 30px;
    line-height: 30px;
    text-align: center;
    font-weight: 300;
    text-transform: uppercase;
}
.logo {
    left: 60px;
}
.buttons {
    width: 400px;
    margin: 0 auto;
    padding-top: 320px;
}

#landing .start { right: 30px; top: 400px; }
/*
#landing .button {
    background: none;
    color: #e52100;
    position: relative;
    display: block;
    text-shadow: 0px 4px 4px rgba(0,0,0,0.25), -1px 0 0 black, 1px 0 black, 0px -1px black, 0 1px black;
    -webkit-text-stroke: 2px black;
    font-size: 60px;
    letter-spacing: -3px;
    font-style: normal;
    font-weight: 800;
    padding: 0;
}
*/
#instbg {
    font-weight: 300;
}
.insttext, #instheader {
    font-style: normal;
    font-weight: 300;
    text-transform: uppercase;
}
.instbg {
    background: #202020;
    width: 864px;
    height: 420px;
    margin: 0 auto;
    margin-top: 180px;
    position: relative;
}
#instheader {
    color: white;
    top: 0;
    width: 100%;
    text-align: center;
    left: 0;
    font-size: 55px;
}
.inst-inner {
    background: black;
    margin: 0 auto;
    width: 90%;
    height: 200px;
    position: relative;
    top: 90px;
}
.instbg, .inst-inner {
    border-radius: 10px;
}
#instclose {
    right: 15px;
    top: -5px;
    left: auto;
    font-weight: 300;
    font-size: 43px;
}
.insttext {
    left: 40%;
    right: 12%;
    width: auto;
    text-align: center;
    margin-top: 40px;
    font-size: 33px;
    line-height: 1.1;
}
.arrows {
    position: absolute;
    left: 6%;
    right: 50%;
}
.arrows > .arrow-u {
    display: block;
    margin-left: 84px;
    margin-bottom: 6px;
    margin-top: 25px;
}
.arrows > * {
    border-radius: 13px;   
    position: static;   
    background: #c52000;
    width: 72px;
    height: 72px;
    display: inline-block;
    color: white;
    margin-left: 6px;
}
.arrow-u:before {
    content: "\25b2";
}
.arrow-d:before {
    content: "\25bc";
}
.arrow-l:before {
    content: "\25c4";
}
.arrow-r:before {
    content: "\25ba";
}
.arrows > * {
    font-size: 40px;
    text-align: center;
    line-height: 72px;
}

.instbg .button {
    bottom: 29px;
    left: 50%;
    margin-left: -120px;
    width: 140px;
    font-size: 30px;
}

#game .start, #game .finish {
    position: absolute;
    text-transform: uppercase;
    left: 50%;
}
#game .start {
    top: 50px;
    color: black;
}
.finish {
    top: 530px;
    color: black;
}

.diff0 .start, .diff0 .finish { color: white; }
.diff1 .finish {
    top: 600px;
    left: 420px;
    color: black;
}
.diff1 .start {
    left: 930px;
    color: white;
}
.diff2 .start {
    top: 550px;
    left: 400px;
}
.diff2 .finish {
    left: 910px;
    top: 580px;
}
.diff0 .finish {
    left: 720px;
    top: 590px;
}

.diff0 #game .finish {
    left: 52%;
}

#legal > small {}
#legal > small {
    position: static;
    left: 60px;
    font-size: 11px;
    top: 9px;
    color: white;
}
#legal div + a {
    padding-left: 10px;
    left: 0px;
}
#legal {
    line-height: 37px;
    text-align: left;
    padding-left: 64px;
}
#legal > a {
    color: goldenrod;
    text-transform: uppercase;
}
#soundBtn {
    left: 790px;
    top: 9px;
}
.button.restart {
    right: 10px;
    top: 50px;
}
#unlock > img {
    display: none;
}
 
#unlock .instbg {
  height: 140px;
}

#game .choose, #game .restart {
    font-size: 16px;
    padding: 10px 20px;
}
#game .choose {
    right: 10px;
    top: 10px;
}
#game .restart {
    right: 60px;
    top: 60px;
}
#field {
    left: 254px;
    top: 60px;
}


.diff0 #game .start {
    left: 40%;
    top: 60px;
    color: white;
}
#unlock .instbg {
    width: 70%;
}
#unlocktext {
    width: 100%;
    left: auto;
    right: auto;
    font-size: 24px;
    font-style: normal;
}
#unlock > a {
    margin: 0 auto;
    position: absolute;
    text-align: center;
    left: 50%;
    margin-left: -100px;
    width: 200px;
    font-size: 25px;
    padding: 10px;
    top: 250px;
}
#unlockclose {
    top: 170px;
    left: 840px;
    font-weight: 300;
}

#landing .buttons .button {
    position: relative;
    display: inline-block !important;
}
#landing .buttons {
    width: 100%;
    text-align: center;
}
#landing .chooselabel {
    font-size: 40px;
}

.diff0 #field {
    left: 469px;
    top: 104px;
}
.diff0 #field .bg {
    left: -469px;
    top: -104px;
}

.diff2 #field {
    left: 244px;
    top: 64px;
}
.diff2 #field .bg {
    left: -243px;
    top: -44px;
}

.diff1 #game .finish {
    left: 270px;
    top: 601px;
}
.diff1 #game .start {
    left: 690px;
    color: white;
    top: 30px;
}
.diff2 #game .finish {
    left: 770px;
    top: 570px;
}
.diff2 #game .start {
    left: 186px;
    top: 538px;
}

.no-touch .touchtext { display:none; }
.touch .arrows { display: none; }
.touch .insttext { display: none; }

.touchtext {
    font-weight: 300;
    font-size: 40px;
    text-align: center;
    text-transform: uppercase;
    padding-top: 30px;
}


@-webkit-keyframes throb {
  0% {
    -webkit-transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1.3);
  }
}
@keyframes throb {
  0% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1.3);
  }
}

#player { -webkit-animation: throb 1s alternate infinite; animation: throb 1s alternate infinite; }


#landing > div.stripe {
    background: white;
    opacity: 0.5;
    height: 58px;
    position: absolute;
    left: 0;
    right: 4px;
    top: 340px;
}
#landing .start {
    right: 110px;
    top: 333px;
}

#landing .chooselabel {
    font-size: 70px;
    width: 100%;
    left: 0;
    right: 0px;
    margin-left: 0;
    top: 260px;
}
#landing .buttons {
    padding-top: 332px;
}
#landing .buttons .button {
    padding: 7px 24px;
    margin: 0px 15px;
}


#unlock .instbg {
    margin-top: 300px;
    height: 150px;
}
#unlocktext {
    top: 320px;
}
#unlock > a {
    top: 370px;
}
#unlockclose {
    top: 296px;
}

.lt-ie9 #unlocktext {
font-weight: 300;
font-size: 21px;
}


#landing .start {
    right: auto;
    left: 116px;
    top: 480px;
}
#landing > div.stripe {
    background: none;
    background: url(img/choosebg.png) 50% 50%no-repeat;
    opacity: 1.0;
    top: 184px;
    height: 300px;
}
#game .choose {
    right: 270px;
    top: auto;
    bottom: 40px;
    height: 16px;line-height:16px;border-radius:9px;
}
#game .restart {
    right: 140px;
    top: auto;
    bottom: 40px;
    height: 16px;line-height:16px;border-radius:9px;
}
.diff0 #game .start {
    left: 650px;
    top: 102px;
}
.diff0 #game .finish {
    left: 720px;
    top: 600px;
}
.diff1 #game .finish {
    color: white;
    top: 550px;
    left: 240px;
}
#game .start, #game .finish {
    font-weight: 800;
    text-shadow: 1px 1px black;
}
.flavor {
    position: absolute;
    top: 60px;
    left: 820px;
    right: 30px;
    text-align: center;
    display: none;
    line-height: 1;
}
.diff0 .diff0.flavor, .diff1 .diff1.flavor, .diff2 .diff2.flavor {
    display: block;
}
.flavor h3 {
    font-family: 'Alegreya Sans';
    font-size: 24px;
    margin: 0;
    text-shadow: 0 2px black;
    margin-bottom: -5px;
}
.diff1 .flavor {
    color: #fe3;
}
.diff2 .flavor {
    color: #117;
}
.diff0 .flavor {
    color: #fff;
}
.diff2 #game .start, .diff2 #game .finish {
    text-shadow: none;
    color: #117;
}
.diff0 #game .start, .diff0 #game .finish {
    text-shadow: 0px 0px 1px black;
    color: white;
}
.diff0 .flavor {
    left: 480px;
    top: 10px;
    text-shadow: 0px 1px 5px black, 0px 1px 1px black;
}

#logord {
    left: 700px;
}
.rd {
    color: black;
}
.ingame #logord {
    left: 9px;
}
.ingame .rd {
    color: #fff;
}
.diff1 #game .choose {
    right: 490px;
    bottom: 60px;
}
.diff1 #game .restart {
    right: 360px;
    bottom: 60px;
}
.diff2 #game .choose {
    right: 490px;
    bottom: 60px;
}
.diff2 #game .restart {
    right: 360px;
    bottom: 60px;
}


.diff2 #unlock .instbg, .diff1 #unlock .instbg  {
    background: none;
    background: url(img/genericdownload.png);
    background-size: 100% 100%;
    height: 200px;
    margin-top: 280px;
}
.diff1 #unlock .instbg {
    background-image: url(img/icedownload.png);
}
.diff1 #unlockclose {
    left: 820px;
    top: 310px;
}
#unlockclose {
    color: black;
}
#unlock { background: none; }
.diff0 #unlockclose {
	color: #fff;
}

#legal .more-games {
    
    font-size: 14px;
    padding: 8px 10px;
    height: 10px;
    line-height: 10px;
    border-radius: 5px;
    color: #fff;
    left: 660px;
    top: 6px;
}

.arrows.controls { display: none; }

@media (min-device-width: 320px) and (max-device-width: 480px) and (orientation:portrait) {
.touch .touchtext { display:none; }
.touch .insttext { display: block; }
.touch .arrows { display: block; }

.arrow-l:before {
    content: "\25c0";
}
.arrow-r:before {
    content: "\25b6";
}

.touch .arrows.controls { display: none; }
.touch .ingame .arrows.controls {
    display: block;
    position: absolute;
   -webkit-transform: scale(2.0);
    left: 35%;
    right: auto;
    bottom: 14%;
}
#player {
    -webkit-transform: scale(2.0);
    -webkit-animation: none;
}



.diff0 .bgeasy, .diff1 .bgmedium, .diff2 .bghard {
    display: none;
}
.diff0 .bgeasy.iphone, .diff1 .bgmedium.iphone, .diff2 .bghard.iphone {
	display: block;
	width: 1024px;
}

body, #payoff, #unlock, #instructions { height: 1100px; }

#legal {
    position: fixed;
    bottom: 0;
    top: auto;
}

.arrows.controls > .arrow-d {
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 40px;
}
.arrows.controls > .arrow-u {
    margin-left: 118px;
    margin-bottom: 0;
}


}

@media (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 512px) and (orientation:portrait) {
	.touch .ingame .arrows.controls {

	   -webkit-transform: scale(2.5);
	    bottom: 22%;
	}
	
body, #payoff, #unlock, #instructions { height: 1480px; }




}

@media (min-device-width: 320px) and (max-device-width: 480px) and (orientation:landscape) {
html { background: #1f2020 url(img/blocked.jpg) 50% 50% no-repeat; background-size: 100%; height: 100%; } 
body { display: none; }

}