* {
	margin: 0;
}
html{
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;g
	margin: 0 auto 0; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
	height: 34px; /* .push must be the same height as .footer */
	text-align: center;
}
.centerwrapper{
display:inline-block;
height: 400px;
width: 800px;
position:absolute;
top:50%;
right:50%;
margin:-200px -400px auto;
padding: 20px 0 20px 0; /*top right bottom left*/
align: center;
text-align: center;
}

body{
background-attachment: fixed;
align: center;
margin:0 auto;
padding: 0 0 0 0;
font-family: verdana,arial,sans-serif;
font-size:11px;

bottom:0;
}
#title{
position: fixed;
top: 0;
}
#geobody{
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, rgba(134, 219, 255, 0.9) 0%, #143FC0 100%),url('/images/water_background.jpg');
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, rgba(134, 219, 255, 0.9) 0%, #143FC0 100%),url('/images/water_background.jpg');
/* Opera */ 
background-image: -o-linear-gradient(top, rgba(134, 219, 255, 0.9) 0%, #143FC0 100%),url('/images/water_background.jpg');
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(134, 219, 255, 0.9)), color-stop(1, #143FC0)),url('/images/water_background.jpg');
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, rgba(134, 219, 255, 0.9) 0%, #143FC0 100%),url('/images/water_background.jpg');
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, rgba(134, 219, 255, 0.9) 0%, #143FC0 100%),url('/images/water_background.jpg');
background-attachment: fixed,scroll;
}
#geobody #title{
background-color: rgba(97, 160, 255, 0.9);
border-color: #62A0DA;
box-shadow: 0px 2px 5px 0px rgba(55, 103, 255, 0.5);
}
#geobody #title&gt;div{
background-color: rgba(255, 255, 255, 0.1);
}
#geobody .textBlock{
color: rgba(0, 0, 0, 0.75);
}
.appicon{
display:inline-block;
width: 50px;
height: 50px;
}
.appicon div{
position:absolute;
width: 50px;
height: 50px;
background-size: 100%;
}
.appicon:hover&gt;div.hovered-img{opacity:1;}
div.hovered-img{
opacity:0;
background-position:0px -50px;
}
.appicon div{transition:opacity 0.5s ease-out;}

.geo-icon{
background:url('/images/geo_button.png');
background:url('/images/geo_button50.png')\9;
}
.flips-icon{
background:url('/images/flips_button.png');
background:url('/images/flips_button50.png')\9;
}
.taf-icon{
background:url('/images/taf_button.png');
background:url('/images/taf_button50.png')\9;
}
.bw-icon{
background:url('/images/bw_button.png');
background:url('/images/bw_button50.png')\9;
}
#geobody #footer,#geobody #email_author{
color: #002438;
}
#geobody #email_author:hover{color: rgba(255, 255, 255, 0.85);}
#geobody h1{
color: #EAEFFF;
text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5), 0px 0px 100px rgba(255, 255, 255, 0.2), 0px 0px 4px rgba(255, 255, 255, 0.5), 1px 1px 0 rgba(0, 0, 0, 0.3)
}

#flipsbody{
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, rgba(222, 255, 173, 0.7) 0%, #34BD29 100%),url('/images/flips_background.jpg');
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, rgba(222, 255, 173, 0.7) 0%, #34BD29 100%),url('/images/flips_background.jpg');
/* Opera */ 
background-image: -o-linear-gradient(top, rgba(222, 255, 173, 0.7) 0%, #34BD29 100%),url('/images/flips_background.jpg');
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #DEFFAD), color-stop(1, #34BD29)),url('/images/flips_background.jpg');
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, rgba(222, 255, 173, 0.7) 0%, #34BD29 100%),url('/images/flips_background.jpg');
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, rgba(222, 255, 173, 0.7) 0%, #34BD29 100%),url('/images/flips_background.jpg');
background-attachment: fixed,scroll;
}
#flipsbody #title{
position: fixed;
top: 0;
background-color: rgba(30, 170, 65, 0.9);
border-color: #1E7C34;
}
#flipsbody #title&gt;div{
background-color: rgba(50, 255, 71, 0.1);
}
#flipsbody .textBlock{
color: rgba(0, 0, 0, 0.75);
}
#flipsbody #footer, #flipsbody #email_author{
color: #073800;
}
#flipsbody #email_author:hover{color: rgba(255, 255, 255, 0.85);}
#flipsbody h1{
color: #E0FFE2;
}

#tafbody{
//background:url('/images/redtartan.png');
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, rgba(111, 34, 34, 0.75) 0%, rgba(158, 107, 0, 0.6) 100%),url('/images/redtartan.png');
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, rgba(111, 34, 34, 0.75) 0%, rgba(158, 107, 0, 0.6) 100%),url('/images/redtartan.png');
/* Opera */ 
background-image: -o-linear-gradient(top, rgba(111, 34, 34, 0.75) 0%, rgba(158, 107, 0, 0.6) 100%),url('/images/redtartan.png');
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(111, 34, 34, 0.75)), color-stop(1, rgba(158, 107, 0, 0.6))),url('/images/redtartan.png');
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, rgba(111, 34, 34, 0.75) 0%, rgba(158, 107, 0, 0.6) 100%),url('/images/redtartan.png');
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, rgba(111, 34, 34, 0.75) 0%, rgba(158, 107, 0, 0.6) 100%),url('/images/redtartan.png');
background-attachment: fixed,scroll;
}
#tafbody #title{
//background-color: rgba(30, 170, 65, 0.9);
border-color: #35080E;
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, rgba(100, 20, 30, 0.75) 0%, #64141E 100%),url('/images/mondo.jpg');
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, rgba(100, 20, 30, 0.75) 0%, #64141E 100%),url('/images/mondo.jpg');
/* Opera */ 
background-image: -o-linear-gradient(top, rgba(100, 20, 30, 0.75) 0%, #64141E 100%),url('/images/mondo.jpg');
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(100, 20, 30, 0.75)), color-stop(1, #64141E)),url('/images/mondo.jpg');
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, rgba(100, 20, 30, 0.75) 0%, #64141E 100%),url('/images/mondo.jpg');
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, rgba(100, 20, 30, 0.75) 0%, #64141E 100%),url('/images/mondo.jpg');
}
#tafbody #title&gt;div{
background-color: rgba(255, 194, 145, 0.06);
//border: dashed 2px #FFFFFF;
}
#tafbody .textBlock{
color: rgba(0, 0, 0, 0.75);
}
#tafbody #footer, #tafbody #email_author{
color: #F7E6DE;
}
#tafbody #email_author:hover{color: rgba(0, 0, 0, 0.85);}
#tafbody h1{
color: #9E4852;
}

#bwbody{
/* IE10 Consumer Preview */ 
background-image: url('/images/hline_blue.png'),url('/images/vline_red.png'),-ms-linear-gradient(top, #FFF 0%, #CDCF81 100%),url('/images/redtartan.png');
/* Mozilla Firefox */ 
background-image: url('/images/hline_blue.png'),url('/images/vline_red.png'),-moz-linear-gradient(top, #FFF 0%, #CDCF81 100%),url('/images/redtartan.png');
/* Opera */ 
background-image: url('/images/hline_blue.png'),url('/images/vline_red.png'),-o-linear-gradient(top, #FFF 0%, #CDCF81 100%),url('/images/redtartan.png');
/* Webkit (Safari/Chrome 10) */ 
background-image: url('/images/hline_blue.png'),url('/images/vline_red.png'),-webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF), color-stop(1, rgba(158, 107, 0, 0.6))),url('/images/redtartan.png');
/* Webkit (Chrome 11+) */ 
background-image: url('/images/hline_blue.png'),url('/images/vline_red.png'),-webkit-linear-gradient(top, #FFF 0%, #CDCF81 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: url('/images/hline_blue.png'),url('/images/vline_red.png'),linear-gradient(to bottom, #FFF 0%, #CDCF81 100%),url('/images/redtartan.png');
background-attachment: scroll,fixed,fixed;
background-repeat: repeat,repeat-y,no-repeat;
}
#bwbody #title{
border-color: #000;
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, black 0%, rgba(19, 19, 19, 0.98) 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, black 0%, rgba(19, 19, 19, 0.98) 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, black 0%, rgba(19, 19, 19, 0.98) 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, black), color-stop(1, rgba(19, 19, 19, 0.98)));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, black 0%, rgba(19, 19, 19, 0.98) 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, black 0%, rgba(19, 19, 19, 0.98) 100%);
}
#bwbody #title&gt;div{
background-color: rgba(255, 255, 255, 0.05);
}
#bwbody .textBlock{
color: rgba(0, 0, 0, 0.75);
}
#bwbody #footer, #bwbody #email_author{
color: #0015AC;
}
#bwbody #email_author:hover{color: rgba(0, 0, 0, 0.85);}
#bwbody h1{
color: #555;
}

p{
margin-top: 5px;
margin-left: 10px;
}
h1{
cursor: default;
text-align: center;
font-size: 22px;
margin:0 auto;
}
h2{
font-size: 18px;
margin-top: 20px;
}
h2 a{
color: rgba(0, 0, 0, 0.60);
}
h2 a:hover{
color: rgba(0, 0, 0, 0.9);
}
footer{
text-align: center;
float: bottom;
}
#footer{
display:inline-block;
text-align: center;
max-height: 13px;
padding-top: 5px;
overflow:hidden;
transition:max-height 0.3s ease-out;
}
#footer:hover{
max-height:31px;
}
select{
width: 150px;
}
.clear_country{
display:inline-block;
background:url('/images/clear_button.png') no-repeat 0px 0px scroll;
width: 16px;
height: 16px;
background-size: 100%;
vertical-align: text-bottom;
}
.clear_country:hover{
background-position:0px -16px;
}
.cc_container{
height: 22px;
line-height: 22px;
display: inline-block;
}
.flag{
width: auto;
height: 16px;
}
.hidden{
color: rgba(0, 0, 0, 0.1);
}
#main{
height: auto;
width: 600px;
background-image:url('/images/steel_600x200l.jpg');
background-repeat:repeat-y;
padding: 110px 0 20px 0; /*top right bottom left*/
margin:0 auto 0 auto;
align: center;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border: 1px solid #C0C0C0;
text-align: center;
}
#geobody #main{
background: #F9FAD4;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
border: 5px solid #FFFFFF;
border-top:none;
text-align: center;
box-shadow: inset 0 0 45px 10px #CAC852;
}
#title{
width: 100%;
height: 100px;
margin:0 -2px;
align: center;
text-align:center;
border-bottom-left-radius: 50% 100%;
border-bottom-right-radius: 50% 100%;

-moz-border-radius-bottomright: 100%;
-moz-border-radius-bottomleft: 100%;

border-style:solid;
border-width:1px;
float: left;
border:none;
}

#title&gt;div{
width: 100%;
height: 50px;
margin:0 auto;
align: center;
border-bottom-left-radius: 50% 100%;
border-bottom-right-radius: 50% 100%;
float: left;
}

#center_div{
background-color: #000000;
width: auto;
align: center;
}
#scoreboard{
display: inline-block;
}
.filter{
//text-align: center;
display:inline-block;
text-align: left;
}
#filters{
width: 550px;
text-align: center;
align: center;
margin: 0 auto;
padding: 5px 5px 5px 5px;
border-style:solid;
border-width:1px;
border-radius: 10px;
transition: color 1s, border-color 1s,background 1s;
}
#filters select{transition: color 1s, border-color 1s,background 1s;}
.filters-guess{
border-color: #92D694;
color: #61A263;
background: rgba(142, 243, 145, 0.5);
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(173, 239, 175, 0.25) 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(173, 239, 175, 0.25) 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(173, 239, 175, 0.25) 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0.2)), color-stop(1, rgba(173, 239, 175, 0.25)));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(173, 239, 175, 0.25) 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(173, 239, 175, 0.25) 100%);
}
.filters-guess select{
background-color: #F1FFEF;
border: 1px solid;
border-color: #92D694;
color: #61A263;
}
.filters-cards{
color: #7A5153;
border-color: #D5999B;
background: rgba(239, 173, 175, 0.5);
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(173, 239, 175, 0.25) 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(173, 239, 175, 0.25) 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(173, 239, 175, 0.25) 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0.2)), color-stop(1, rgba(173, 239, 175, 0.25)));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(173, 239, 175, 0.25) 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(173, 239, 175, 0.25) 100%);
}
.filters-cards select{
background-color: #F8ECEC;
border: 1px solid;
color: #7A5153;
border-color: #D5999B;
}

#btUpdate{
display:block;
margin:0 auto;
width: 100px;
}
#filters form{
align: center;
}
table.filter th{
padding: 2px 6px 2px 6px;
}
table.filter td{
padding: 2px 6px 2px 6px;
}
#goldtable{
margin:0 auto;
color: rgb(42, 34, 0);
font-family: verdana,arial,sans-serif;
font-size:13px;
border-collapse: collapse;
border-style:ridge;
border-width:4px;
border-color: #D0C060;
background-image:url('/images/steel_600x200c.jpg');
background-repeat:repeat-y;
}
#goldtable th{
border-width: 1px;
padding: 4px 16px 4px 4px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.2);
}
#goldtable td {
border-width: 1px;
padding: 4px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.1);
}
.tbtitle{
margin:25px auto;
}
#title-continent{
font-size:22px;
font-weight: bold;
}
#title-gamemode{
font-size:18px;
}
.title-easy{
color: #3388FF;
}
.title-medium{
color: #BBAA00;
}
.title-hard{
color: #AA0000;
}

.deci{
font-size: 10px;
}

table.tablesorter {
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: rgba(191, 179, 0, 0.5);
padding: 0 14px 0 0;
}
table.tablesorter thead tr th:hover{
color: #185686;
}
table.tablesorter thead tr .header {
	background-image: url(/jquery/tablesorter/themes/bg.png);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
table.tablesorter tbody td {
background-color: rgba(255, 239, 0, 0.4);
}
table.tablesorter tbody tr.odd td {
background-color: rgba(225, 209, 0, 0.4);
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(/jquery/tablesorter/themes/asc.png);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(/jquery/tablesorter/themes/desc.png);
}
table.tablesorter thead tr .headerSortUp, table.tablesorter thead tr .headerSortDown {
background-color: rgba(140, 120, 0, 0.6);
}
#pager{
text-align: center;
padding: 2px 0 2px 0;
background-color: rgba(191, 179, 0, 0.5);
border-width: 1px;
border-style: solid;
border-color: rgba(141, 132, 0, 0.5);
}
#pager a{
display:inline-block;
background:url('/jquery/tablesorter/themes/pager-button_.png') no-repeat 0px 0px scroll;
vertical-align: text-bottom;
width: 16px;
height: 16px;
background-size: 100%;
}
#pager a:hover{
background-position:0px -16px;
background-size: 100%;
}
#pager form{
cursor: default;
}
.pagedisplay{
background-color: #F1F0CD;
border: 1px solid;
color: #504100;
border-color: #A7A046;
}
.pagesize{
background-color: #F1F0CD;
border: 1px solid;
color: #504100;
border-color: #A7A046;
}
#updateTime{
color: #403000;
}
#updateTimeO{
height: 13px;
overflow: hidden;
}
#updateTimeI{
color: #403000;
}
#updateTimeI:hover{
margin-top: -13px;
}
#updateTimeAbs{
height: 18px;
}

@keyframes unfold
{
from {max-height: 30px;}
to {max-height: 210px;}
}
@-moz-keyframes unfold /* Firefox */
{
from {max-height: 30px;}
to {max-height: 210px;}
}
@-webkit-keyframes unfold /* Safari and Chrome */
{
from {max-height: 30px;}
to {max-height: 210px;}
}
@-o-keyframes unfold /* Opera */
{
from {max-height: 30px;}
to {max-height: 210px;}
}

#leftMenuContainer{
float:left;
position: fixed;
top: 80px;
}
#leftMenuContainer a{
text-decoration: none;
}
#leftMenuContainer div{
transition:max-height 0.5s ease-out;
}
.menuContainer{
cursor:pointer;
width: 100%;
max-height: 30px;
overflow: hidden;
//font-family: verdana,arial,sans-serif;
font-size:18px;
}
.menuContainer:hover{
max-height: 500px;
}
.menuContainerSticky{
cursor:pointer;
width: 100%;
overflow: hidden;
font-size:18px;
max-height: 500px;
}
.menuContainerSticky .mainMenu{
background-image: url(/images/pin.png);
background-repeat: no-repeat;
background-position: center right;
}

.mainMenu{
cursor: default;
width: 160px;
height: 30px;
padding-left:10px;
}
.menuContainer .mainMenu:hover{
background-image: url(/images/pinh.png);
background-repeat: no-repeat;
background-position: center right;
}
.subMenu{
display:block;
width: 135px;
height: 30px;
padding-left:15px;
transition: border-left 0.2s, background-color 0.5s ease-out, width 0.2s ease-out;
}
.subMenu:hover{
width: 140px;
padding-left:20px;
}
.GP{
background-image: url(/images/googleplay.ico);
background-repeat: no-repeat;
background-position: center right;
}
.subMenuCurrent{
display:block;
height: 30px;
width: 150px;
padding-left:20px;
}

#geo .mainMenu{
background-color: #3277BD;
color: #BBD6FF;
}
#geo .subMenu,#geo .subMenuGP{
background-color: #4090D0;
color: #BBD6FF;
border-left: 5px solid #3277BD;
}
#geo .subMenu:hover,#geo .subMenuGP:hover{
background-color: #4EA2E6;
color: #FFFFFF;
border-left: 10px solid #3277BD;
}
#geo .subMenuCurrent{
background-color: #3277BD;
color: #BBD6FF;
}

#flips .mainMenu{
background-color: #33AA50;
color: #D5FFD3;
}
#flips .subMenu,#flips .subMenuGP{
background-color: #47C454;
color: #D5FFD3;
border-left: 5px solid #33AA50;
}
#flips .subMenu:hover,#flips .subMenuGP:hover{
background-color: #60D060;
color: #FFFFFF;
border-left: 10px solid #33AA50;
}
#flips .subMenuCurrent{
background-color: #33AA50;
color: #D5FFD3;
}

#taf .mainMenu{
background-color: #64141E;
color: #8B4646;
}
#taf .subMenu,#taf .subMenuGP{
background-color: #CC732D;
color: #F0B279;
border-left: 5px solid #A85311;
//border-top: 1px solid #FFFFFF;
}
#taf .subMenu:hover,#taf .subMenuGP:hover{
background-color: #E2843B;
color: #F7CEA8;
width:145px;
border-left: 5px solid #A85311;
}
#taf .subMenuCurrent{
background-color: #A85311;
color: #EBAD74;
//border-top: 1px solid #FFFFFF;
}

#bw .mainMenu{
background-color: #1F1F1F;
color: #505050;
}
#bw .subMenu,#bw .subMenuGP{
//color: #363636;
color: #1F1F1F;
background-color: #FFFFF0;
border-left: 5px solid #1F1F1F;
//border-top: 1px solid #1F1F1F;
}
#bw .subMenu:hover,#bw .subMenuGP:hover{
color: #0000FF;
background-color: #FFFFFF;
border-left: 10px solid #1F1F1F;
}
#bw .subMenuCurrent{
background-color: #FFFFFF;
color: #FF0000;
border-left: 10px solid #1F1F1F;
width: 140px;
}
.textBlock{
text-align: left;
margin: 20px 20px 0 20px;
//padding: 0 0 0 0;
font-family: arial,verdana,sans-serif;
font-size:15px;
}
.imgBlock{
text-align: center;
}
.diagram{max-width:100%;}
.screenshot{
margin: 2px 1px 2px 1px;
display: inline-block;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: 4px solid #FFFFFF;
background: #fff;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25);
transition: background 0.4s ease-out;
}
.screenshot:hover{
background-color: rgba(48, 98, 255, 0.15);
border: 5px solid #FFFFFF;
margin: 1px 0px 1px 0px;
}
.screenshot p{
color: #404040;
}
.screenshot:hover p{
color: #002080;
}
.screenshot img{
max-height: 400px;
width: auto;
margin: 4px 0px 0px 0px;
}
#geobody .screenshot img{
//margin: 4px 0px -3px 0px;
}
#languages{
text-align:center;
margin-bottom: 10px;
}
.lang{
margin: 0 5px 0 5px;
color: #707070;
}
.lang:hover{
color: #202020;
}
.langselected{
color: #707070;
font-weight: bold;
}
.option{
cursor: default;
margin: 15px 5px 15px 5px;
font-size: 22px;
color: #707070;
border: 1px solid rgba(0,0,0,0.01);
transition: .3s ease-out all;
}
.option:hover{
color: #505050;
background-color: rgba(0,0,0,0.1);
border-left: 1px solid rgba(0,0,0,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
border-radius: 15px;
transition: none;
}
.optionLocked{
cursor: default;
margin: 15px 5px 15px 5px;
font-size: 22px;
color: #707070;
border-left: 1px solid rgba(0,0,0,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
border: 1px solid rgba(0,0,0,0.01);
transition: .3s ease-out all;
}
.optionCorrect{
cursor: default;
margin: 15px 5px 15px 5px;
background-color: rgba(0,180,0,0.2);
font-size: 22px;
color: #30A030;
border: 1px solid #60AF60;
border-radius: 15px;
transition: .3s ease-out all;
}
.optionWrong{
cursor: default;
margin: 15px 5px 15px 5px;
background-color: rgba(180,0,0,0.2);
font-size: 22px;
color: #A03030;
border: 1px solid #CE6464;
border-radius: 15px;
transition: .3s ease-out all;
}

#flips_top_bar{
text-align: center;
}
#flips_status_bar{
display:inline-block;
}
#targetflip{
height: 25px;
width: auto;
}
.undo_enabled{
cursor:pointer;
display:inline-block;
height: 50px;
width: 50px;
background:url('/images/undo_enabled.png') no-repeat 0px 0px scroll;
background-size: 100%;
}
.undo_enabled:hover{
background-position:0px -50px;
}
.undo_disabled{
display:inline-block;
background:url('/images/undo_disabled.png');
height: 50px;
width: 50px;
}
.redo_enabled{
cursor:pointer;
display:inline-block;
height: 50px;
width: 50px;
background:url('/images/redo_enabled.png') no-repeat 0px 0px scroll;
background-size: 100%;
}
.redo_enabled:hover{
background-position:0px -50px;
}
.redo_disabled{
display:inline-block;
background:url('/images/redo_disabled.png');
height: 50px;
width: 50px;
}
.flipsTableInitial{
display:inline-block;
margin: 10px 10px 10px 10px;
width: 400px;
background-color: rgba(177, 177, 177, 0.1);
border: 2px dotted #C2C2C2;
border-radius: 30px;
}
.flipsTableInitial #count,.flipsTableInitial #time{
color:#C2C2C2;
}
.flipsTableGame{
cursor: default;
display:inline-block;
margin: 10px 10px 10px 10px;
width: 400px;
background-color: rgba(30, 185, 0, 0.1);
border: 2px solid #429722;
border-radius: 30px;
box-shadow: 0px 0px 30px 0px rgba(66, 151, 34, 0.25);
transition: .5s ease-out all;
}
.flipsTableGame #count,.flipsTableGame #time{
color:#618D50;
}
.flipsTableFinal{
display:inline-block;
margin: 10px 10px 10px 10px;
width: 400px;
background-color: rgba(30, 185, 0, 0.5);
border: 2px solid #429722;
border-radius: 30px;
box-shadow: 0px 0px 10px 0px #429722, 0px 0px 40px 0px #429722;
transition: .5s ease-out all;
}
.flipsTableFinal #count,.flipsTableFinal #time{
color:#598647;
}
.flipsButton{
width: 100px;
height:auto;
margin: 5px 5px 5px 5px;
transition: .3s ease-out all;
}
.flipsOutline:hover&gt;.flipsButton,.flipsOutlineHighlight .flipsButton{
transform:scale(1.1,1.1);
/*transform: perspective(120px) rotateY(90deg);*/
}
.flipsOutline{
cursor: pointer;
display:inline-block;
border-radius: 50%;
border: 3px solid transparent;
transition: .2s ease-out all;
}
.flipsOutline:hover{
background-color: rgba(177, 177, 177, 0.25);
border: 3px solid #C2C2C2;
border-radius: 50%;
animation: HLFlip 1s infinite;
-webkit-animation: HLFlip 1s infinite; /* Safari and Chrome */
-moz-animation: HLFlip 1s infinite;
o-animation: HLFlip 1s infinite;
}
.flipsOutlineHighlight{
display:inline-block;
cursor: pointer;
background-color: rgba(150, 150, 100, 0.20);
border: 3px solid #666;
border-radius: 50%;
transition: .2s ease-out all;
}
.flipsOutlineLocked{
display:inline-block;
border-radius: 50%;
border: 3px solid transparent;
transition: .3s ease-out all;
}
@keyframes HLFlip
{
from {border-color: #999;}
to {border-color: #444;}
}
@-moz-keyframes HLFlip /* Firefox */
{
from {border-color: #999;}
to {border-color: #444;}
}
@-webkit-keyframes HLFlip /* Safari and Chrome */
{
from {border-color: #999;}
to {border-color: #444;}
}
@-o-keyframes HLFlip /* Opera */
{
from {border-color: #999;}
to {border-color: #444;}
}

.flipsButtonHighlight{
cursor: pointer;
width: 100px;
height:auto;
margin: 2px 2px 2px 2px;
background-color: rgba(150, 150, 100, 0.20);
border: 3px solid #666;
border-radius: 50%;
}
.flipsButtonLocked{
cursor: default;
width: 100px;
height:auto;
margin: 5px 5px 5px 5px;
}
#target{
border: 1px solid rgba(0, 0, 0, 0.75);
background-color: rgba(0,0,0, 0.1);
}
#flipserstable{
border-collapse: collapse;
}
#flipserstable tr {
vertical-align: middle;
transition: background 0.6s ease-out;
}
#flipserstable tr:hover{
font-weight: bold;
}
.flipser{
vertical-align: middle;
border-radius: 10px;
}
.flipser:hover,.flipserEven:hover,.flipserOdd:hover{
background-color: rgba(0,0,0, 0.1);
}
.flipserOdd:hover .icon{
background-color: rgba(0,0,0, 0.05);
}
.flipserEven, .flipserOdd{
//vertical-align: middle;
}
.flipserEven{
background-color: rgba(0,0,0, 0.05);
}
.flipserEven .icon{
background-color: rgba(0,0,0, 0.05);
}
#flipserstable .icon{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#flipserstable .icon img{
display:table-cell;
width: 50px;
height: auto;
}
#flipserstable .fid{
width: 20px;
text-align: right;
}
#flipserstable .name{
display:table-cell;
width: 120px;
text-align: center;
vertical-align: center;
}
#flipserstable .unlock_m{
display:table-cell;
width: 350px;
text-align: left;
vertical-align: center;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.link{
text-align: right;
margin-bottom: 15px;
}
.link a{
color:#1F3FA2;
}
.link a:hover{
color:#1C82E7;
}
.link a:visited{
color:#4616DB;
}
.link a:visited:hover{
color:#1C82E7;
}
#letters{
margin-top: 10px;
}
#letters span,#letters input{
display:inline-block;
height:50px;
width:50px;
border-style: solid;
border-top-width: 5px;
border-bottom-width: 5px;
border-left-width: 1px;
border-right-width: 1px;
text-align: center;
font-family: verdana,arial,sans-serif;
font-size:40px;
background-color: rgba(0,0,0,0.01);
margin-top: 5px;
}
@keyframes WrongToFocus
{
from {max-height: 30px;}
to {max-height: 210px;}
}
@-moz-keyframes WrongToFocus /* Firefox */
{
from {max-height: 30px;}
to {max-height: 210px;}
}
@-webkit-keyframes WrongToFocus /* Safari and Chrome */
{
from {border-color: #FF614A;}
to {border-color: #A90;}
}
@-o-keyframes WrongToFocus /* Opera */
{
from {border-color: #EE715A;}
to {border-color: #A90;}
}
.letterWrongA{
animation: WrongToFocus 1s;
animation-fill-mode: forwards;
-moz-animation: WrongToFocus 1s;; /* Firefox */
-moz-animation-fill-mode: forwards;
-webkit-animation: WrongToFocus 1s;; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-o-animation: WrongToFocus 1s;; /* Opera */
-o-animation-fill-mode: forwards;
}
.letterLocked{
border-color: #EEE;
}
.letterBlank{
display:inline-block;
height:50px;
width:50px;
border-style: solid;
border-top-width: 5px;
border-bottom-width: 5px;
border-left-width: 1px;
border-right-width: 1px;
text-align: center;
font-family: verdana,arial,sans-serif;
font-size:40px;
background-color: rgba(0,0,0,0.01);
margin-top: 5px;
}
.letterOpen{
border-color: #999;
}
.letterFocus{
border-color: #A90;
}
.letterRight{
border-color: #3A3;
}
.letterWrong{
border-color: #CE715A;
}
.sample_img{
max-height: 200px;
width: auto;
}
#email_author{text-decoration: none;}
a{transition: color 0.3s ease-out;}
a:hover{color: rgb(111, 146, 255);}