/*   html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark  html5doctor.com/html-5-reset-stylesheet/*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

article, aside, figure, footer, header,
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }
/* END RESET CSS */
/* ****************************************************************************
*******  Fonts and Media Sizes  ***********************************************
******************************************************************************/
@font-face {
    font-family: 'Quantico';
    src: url('../fonts/quantico-regular.ttf');
    src: url('../fonts/quantico-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'AudioWide';
    src: url('../fonts/audiowide-regular.ttf');
    src: url('../fonts/audiowide-regular.ttf') format('truetype');
}

@media only screen and (max-height: 299px)  { html { font-size: .55em;  } }
@media only screen and (min-height: 300px)  { html { font-size: .60em;  } }
@media only screen and (min-height: 400px)  { html { font-size: .81em;  } }
@media only screen and (min-height: 500px)  { html { font-size: 1.01em; } }
@media only screen and (min-height: 600px)  { html { font-size: 1.21em; } }
@media only screen and (min-height: 700px)  { html { font-size: 1.43em; } }
@media only screen and (min-height: 800px)  { html { font-size: 1.63em; } }
@media only screen and (min-height: 900px)  { html { font-size: 1.83em; } }
@media only screen and (min-height: 1000px) { html { font-size: 2.03em; } }

/******************************************************************************
*******  HTML Body and Content  ***********************************************
******************************************************************************/
html
{
    height: 100%;
    padding: 0;
    margin: 0;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-text-size-adjust: none;
    background-color: #111;
    background-image:url('../images/back.jpg');
    background-size: 70em;
    background-position: center top;
    box-shadow: 0 0 1em 1em rgba(0, 0, 0, 1) inset;
}

body
{
    max-width: 26.5em;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background: #050505;
    color: white;
    font-family: 'Quantico', Consolas, Verdana, Sans-Serif;
    overflow: hidden;
    box-shadow: 0 0 .8em .3em rgba(0, 0, 0, .8);
}

#content
{
    max-width: 22em;
    padding: .75em 1em 1em 1em;
    margin: 0 auto;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.row
{
    max-width: 19em;
    margin: 0 auto;
}

#players
{
    max-width: 20em;
}


header
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    max-width: 100em;
    padding: 0 1em;
    margin: 0 auto;
    background: #111;
    background: -moz-linear-gradient(top, #222 0%, #222 50%,#151515 51%,#151515 100%);
    background: -o-linear-gradient(top, #222 0%, #222 50%,#151515 51%,#151515 100%);
    background: -webkit-linear-gradient(top, #222 0%,#222 50%,#151515 51%,#151515 100%);
    background: linear-gradient(top, #222 0%, #222 50%,#151515 51%,#151515 100%);
    line-height: 2.68em;
    border-bottom: 0px solid #111
}

footer
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    max-width: 25em;
    padding: 0em .5em;
    margin: 0 auto;
    padding-top: .35em;
}

#stats{
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* ****************************************************************************
*******  Lightbox  ************************************************************
******************************************************************************/
.lightbox
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    padding: 1.5rem .5rem;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(20, 20, 20, .7);
    z-index:1001;
    -webkit-transition: opacity .3s ease-in-out 0s, visibility 0s ease-in 0s;
    -moz-transition: opacity .3s ease-in-out 0s, visibility 0s ease-in 0s;
    -o-transition: opacity .3s ease-in-out 0s, visibility 0s ease-in 0s;
    transition: opacity .3s ease-in-out 0s, visibility 0s ease-in 0s;
}

.lightbox.hidden
{
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .4s ease-in-out .5s, visibility 0s ease-in .9s;
    -moz-transition: opacity .4s ease-in-out .5s, visibility 0s ease-in .9s;
    -o-transition: opacity .4s ease-in-out .5s, visibility 0s ease-in .9s;
    transition: opacity .1s ease-in .1s, visibility 0s ease-in .2s;
}

.lightbox-content
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    left: 0;
    border-radius: .2em;
    margin: 0 auto;
    padding: 0em 0;
    background: #000;
    z-index:1002;
    overflow-y: auto;
    overflow-x: none;
    max-width: 24em;
    font-size:100%;
    height: 100%;
    -webkit-transition: left .6s .3s;
    -moz-transition: left .6s .3s;
    -o-transition: left .6s .3s;
    transition: left .6s .3s;

    border: .2em solid black;

}
.lightbox-bar span
{
    color: #C7C7C7;
    float: right;
    margin-top: .1rem;
    font-size: 1.3rem;
}
.stats-dialog
{
    background-color: #222;
   
    /*border: .25em solid #200;*/
    height:100%;
    box-sizing:border-box;
    border-radius: .2em;
    padding: 0 .5em;
    /*
    rgb(255, 239, 181);
    rgb(181, 232, 122);
    rgb(105, 105, 105)
    */
}
.stats-table
{
    margin: 0em 0;
    padding: 0;
    list-style-type: none;
    font-size: 1.05rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    clear:both;
}

.stats-table > li > ul
{
   height: 1.05em;
}


.stats-table > li > ul > li
{
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 25%;
    text-align: center;
    font-size: .9em;
    white-space: nowrap;
}

.stats-table > li > ul > li:nth-child(2)
{
    font-size: 78%;
    width: 46%;
    color:#888;
}

.stats-table > li > ul > li > hr
{
    border-top: 1px solid #111111;
    border-bottom: 1px solid #292929;
}

.stats-table > li > ul > li > .highlight
{
    color: rgb(181, 232, 122);
}

#stats.disabled .buttonStats
{
    color: #000;
    background: #111;
}

.buttonStats
{
    color: #777;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    background: #222222;
    background: linear-gradient(to bottom, #1a1a1a 0%, #121212 100%);
}


/* ****************************************************************************
*******  Table Style  *********************************************************
******************************************************************************/
.table 
{
    display:table;
    margin:0;
    padding:0;
    width:100%;
}
.table ul
{
    display:table-row;
    margin:0;
    padding:0;  
}
.table li
{
    display:table-cell;
    margin:0;
    padding:0;  
    text-align:center;
}

/* ****************************************************************************
*******  Buttons Style  *********************************************************
******************************************************************************/
.button
{
    text-align: center;
    color: #333;
    background-color:#eee;
    border:1px solid #eee;
    background: -moz-linear-gradient(top, #fff 0%,#e8e8e8 50%,#ddd 51%,#ddd 100%);
    background: -o-linear-gradient(top, #fff 0%,#e8e8e8 50%,#ddd 51%,#ddd 100%);
    background: -webkit-linear-gradient(top, #fff 0%,#e8e8e8 50%,#ddd 51%,#ddd 100%);
    background: linear-gradient(top, #fff 0%,#e8e8e8 50%,#ddd 51%,#ddd 100%);
    -moz-border-radius: .2em; 
    -webkit-border-radius: .2em;
    border-radius:.2em;
}
.cancelButtons
{
    text-align: center;
    color: white !important;
    background-color: maroon !important;
    border:1px solid maroon !important;
    background: -moz-linear-gradient(top, #990000 0%, #990000 50%, maroon 51%, maroon 100%)!important;
    background: -webkit-linear-gradient(top, #990000 0%, #990000 50%, maroon 51%, maroon 100%)!important;
    background: -o-linear-gradient(top, #990000 0%,#990000 50%, maroon 51%, maroon 100%)!important;
    background: linear-gradient(top, #990000 0%, #990000 50%, maroon 51%, maroon 100%)!important;
    -moz-border-radius: .2em; 
    -webkit-border-radius: .2em;
    border-radius:.2em;
}

.enterButtons
{
    text-align: center;
    color: white !important;
    background-color: green !important;
    border:1px solid green !important;
    background: -moz-linear-gradient(top, #009900 0%, #009900 50%, green 51%, green 100%)!important;
    background: -webkit-linear-gradient(top, #009900 0%, #009900 50%, green 51%, green 100%)!important;
    background: -o-linear-gradient(top, #009900 0%,#009900 50%, green 51%, green 100%)!important;
    background: linear-gradient(top, #009900 0%, #009900 50%, green 51%, green 100%)!important;
    -moz-border-radius: .2em; 
    -webkit-border-radius: .2em;
    border-radius:.2em;
}
/* ****************************************************************************
*******  Player Selector  *****************************************************
******************************************************************************/
.player-selector.hidden
{
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .4s ease-in-out .5s, visibility 0s ease-in .9s;
    -moz-transition: opacity .4s ease-in-out .5s, visibility 0s ease-in .9s;
    -o-transition: opacity .4s ease-in-out .5s, visibility 0s ease-in .9s;
    transition: opacity .4s ease-in-out .5s, visibility 0s ease-in .9s;
}

.player-selector.hidden .playerContainer
{
    left: -100%;
}

.player-selector
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 .5em;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(20, 20, 20, .7);
    z-index:1001;
    -webkit-transition: opacity .3s ease-in-out 0s, visibility 0s ease-in 0s;
    -moz-transition: opacity .3s ease-in-out 0s, visibility 0s ease-in 0s;
    -o-transition: opacity .3s ease-in-out 0s, visibility 0s ease-in 0s;
    transition: opacity .3s ease-in-out 0s, visibility 0s ease-in 0s;
}

.playerContainer {
    position: relative;
    left: 0;
    margin: 1.12em auto;
    padding: 0;
    background-color: #000;
    z-index:1002;
    overflow: hidden;
    max-width: 23em;
    font-size:100%;
    border-radius: .15em;
    border: .17em solid #000;
    -webkit-transition: left .6s .3s;
    -moz-transition: left .6s .3s;
    -o-transition: left .6s .3s;
    transition: left .6s .3s;
}
.player-selector h2
{
    border-radius: .1em;
    border-bottom: .15em solid black;
    padding:.25em .5em;
    line-height:2em;
    background-color:#111;
    background: -moz-linear-gradient(top, #222 0%, #222 50%, #111 50%, #111 100%);
    background: -o-linear-gradient(top, #222 0%, #222 50%, #111 50%, #111 100%);
    background: -webkit-linear-gradient(top, #222 0%, #222 50%, #111 50%, #111 100%);
    background: linear-gradient(top, #222 0%, #222 50%, #111 50%, #111 100%);
    color:#fff;
}
#gametitle,
.gametitle-input
{
    display: block;
    background-color: #111;
    background: -moz-linear-gradient(top, #222 0%, #222 50%, #111 50%, #111 100%);
    background: -webkit-linear-gradient(top, #222 0%, #222 50%, #111 50%, #111 100%);
    background: linear-gradient(to bottom, #222 0%, #222 50%, #111 50%, #111 100%);
    color: #fff;
    border: none;
    width: 100%;
    outline: none;
    padding: .3em .4em;
    font-size: 125%;
    font-family: 'Quantico';
    box-sizing: border-box;
}
.player-selector ul
{
    background-color:#220000;
    padding: .4em .3em;
}
.player-selector ul li
{
    color:#333;
    background-color:#eee;
    list-style-type:none;
    border-top:1px solid #ddd;
    margin: 0;
    padding: .95em 0;
    font-size:80%;
    font-weight:bold;
    background: -moz-linear-gradient(top, #fff 0%, #eee 100%);
    background: -o-linear-gradient(top, #fff 0%, #eee 100%);
    background: -webkit-linear-gradient(top, #fff 0%, #eee 80%, #eee 100%) #eee;
    background: linear-gradient(top, #fff 0%, #fff 100%);
    cursor: pointer;
}
.player-selector ul li span
{
    padding: 0 1em 0 1em;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 3.3em;
    font-size: 150%;
    font-weight: bold !important;
}
/* Player icon */
.player-selector ul li span i.fa
{
    margin-right: .4rem;
    color: #ccc;
    font-size:1.2em;
}
.player-selector ul li.selected span i.fa
{
    color: #BAC99F;
}
.player-selector ul > li.selected
{
    background:#dfebad;
}
.player-selector ul > li.active
{
    background:#ccebff;
}
.player-selector ul li ul
{
    margin: 0;
    padding: 0;
    background-color: transparent;
    display: inline;
    border-width: 0;
    text-align: right;
}
.player-selector ul > li > ul > li
{
    color:#555; 
    font-size:78%;
    display:inline;
    font-weight:normal;
    border-width:0;
    margin:0;
    padding:0 .8em 0 0;
    background:transparent;
}
.player-selector ul > li > ul > li > select
{
    font-size:158%;
    -webkit-appearance: none;
    font-family: 'Quantico';
    background:transparent;
    border: none;
    border-bottom: 5px dashed #83A4C5;
}

.player-selector ul > li > ul > li:last-child
{
    padding-right: 0;
}
.player-selector ul li:last-child
{
    border-radius: 0em 0em .4em .4em;
}

.player-selector ul li:first-child
{
    border-radius: .4em .4em 0em 0em;
}

.closebutton:hover:before {
    color: red;
}

.playernameinput 
{
    background: transparent;
    border: none;
    border-bottom: 5px dashed #83A4C5;
    width: 10em;
    outline: none;
    padding: 0px 0px 0px 0px;
    font-style: italic;
    color: blue;
    font-size: 155%;
    font-family: 'Quantico';
}

.playernameinput:focus
{
    border-bottom: 5px dashed #BAC99F;
}
#gameoptions.hidden
{
    visibility: hidden;
    height: 0;
}


/******************************************************************************
*******  Players  *************************************************************
******************************************************************************/
#players
{
    padding: 0em;
    margin: 0 auto;
}
#players li 
{ 
    width: 15%; 
    display: inline-block;
    line-height: 2.8em;
}
#player1, #player2 
{ 
    width: 40% !important; 
/*    cursor: pointer;*/
}
#player1 { text-align: left; }
#player2 { text-align: left; }

.turn #name1, .turn #name2
{
    color: #fff !important;
}
.player
{
    border: 0px solid #000;
    border-width: 0px 1px 0px 1px;
    padding: .2em .2em !important;
    display: inline-block;
    border-radius: 0em;
    font-size: 120%;
}

#name1
{
    color: #666;
    padding: 0 .7em 0 .1em;
    background-size: .95em;
    background-position: .1em 50%;
    font-size: 125%;
}
#name2
{
    color: blue;
    padding: 0;
    background-size: .95em;
    background-position: .1em 50%;
    font-size: 155%;
    font-weight: bold;
}

#reset { 
    cursor: pointer;
    background-image: url('../images/reset.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 1.5em;
    border-radius: .3em;
    border: 0px solid #fff;
    opacity: .4;
    display: block;
   line-height: 3.1em;
}

/* ****************************************************************************
*******  Stats  ***************************************************************
******************************************************************************/
#stats
{
    padding: 0;
    font-size: 105%;
}
#stats li:first-child
{
    text-align: left;
    width:40%;
}
#stats li:last-child
{
    text-align: right;
    width:39%;
}
#stats li
{
    text-align: center;
    width:18%;
}
#stats li
{
    display: inline-block;
    text-align: center;
    width: 18%;
}

#stats1 { text-align: left; }
#stats2 { text-align: right; }

#stats.disabled #stats1,
#stats.disabled #stats2
{
    visibility: hidden;
}

/* ****************************************************************************
*******  Instructions Page  ***************************************************
******************************************************************************/
.instructions
{

}

.instructions section
{
    margin: 1em 0 3em 0;
}

.instructions h1
{
    
}

.instructions h2
{

}

.instructions h3
{

}

.instructions p
{
   
}
.instructions ol,
.instructions ul
{
    padding: 0 0 0 1.5em;
}
.instructions dl
{
 
}
.instructions dt,
.instructions dd
{
    display: inline-block;
    vertical-align: top;
    margin-bottom: .5em;
    line-height: 1.2em;
}
.instructions dt
{
    width: 35%;
}
.instructions dd
{
    width: 60%;
    padding-left: 1em;
}

.instructions .x01-screenshot
{
    background-color: #000;
    background:url('../img/x01_screenshot.png');
    background-size: 100% auto;
    background-position: top left;
    background-repeat: no-repeat; 
}

.footer
{
    background:#050505;
    position: absolute !important;
    bottom: 0;
    width: 100%;
    padding: 0rem 1.5rem;
    border-top:1px solid #191919;
    height: 2.15rem;
    line-height: 2.2rem;
    box-sizing:border-box;
}


.title
{
    font-size: 2rem;
    text-align: center;
    margin-top: 8rem;
    text-shadow: .04em .03em .01em #000;
    font-family: 'AudioWide'
}
.version
{
    font-size: .95rem;
    color: #AD0000;
    text-align: center;
}
.slide-to-play
{
    margin-top: 8rem;
    text-align: center;
    color:#888;
}
.slide-to-play i
{
    margin-left: .5em;
}
.splash-page
{
    background-image: url('../images/pattern.png');
    height: 100%;
    background-color: #181818;
    height: 100%;
}
/* ****************************************************************************
*******  Game Select Page  ******************************************************
******************************************************************************/
.starttext
{
    font-size: 2rem;
    text-align: center;
    margin-top: 1.3rem;
    margin-bottom: 1rem;
    text-shadow: .04em .03em .01em #000;
    font-family: 'AudioWide'
    font-size:80%;
}
#startgame 
{ 
    margin:.7em 0 0 0;
    padding: 0;
    font-size:80%;
}

#startgame li
{
    display: inline-block;
    width: 27%;
    padding: 0;
    margin: 0;
}
#startgame a
{
    display: block; 
    padding: .9em 0; 
    margin: 0;
    width: 100%;
    font-size: 100%;
}
#startgame #game1, 
#startgame #game2
{
    width: 35% !important;
    cursor: pointer;
}


.connectionContainer {
    position: relative;
    left: 0;
    margin: .8em auto;
    padding: 0;
    background-color: rgba(20, 20, 20, .7);
    overflow: auto;
    width: 100%;
    height: 53%;
    font-size:100%;
    border-radius: .35em;
    border: .55em solid #000;
    -webkit-transition: left .6s .3s;
    -moz-transition: left .6s .3s;
    -o-transition: left .6s .3s;
    transition: left .6s .3s;
}
.connectionContainer ul li
{
    color:#fff;
    background-color:#000;
    list-style-type:none;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
    margin: 0;
    padding: .2em;
    font-size:80%;
    font-weight:bold;
    cursor: pointer;
}
.connectionContainer ul li ul li
{
    border: none;
    font-size:70%;
    display: inline-block;
    padding: 0 .2em; 
}
#gamePoints
{
    color:#088A08;
    width:15%;
    font-size:150%;
}
#gamePoints.ended
{
    color:#0404B4;
}
#gameTitle
{
    font-size:120%;
}
#gameDate
{
    width:40%;
}

/* ****************************************************************************
*******  Game Winner Page  ******************************************************
******************************************************************************/
#rankingPad { 
	font-size: 85%; 
	-mox-box-sizing: border-box;
	box-sizing: border-box; 
	padding: 1.6em .3em;
}
#rankingPad ul {
	height: 4.35em;
}
#rankingPad ul li { 
    width:25%; 
    display: inline-block; 
    padding: 0 .8em;
    box-sizing: border-box; 
    -moz-box-sizing: border-box;
}

#rankingPad ul li:first-child {
    width:11%;
    color: #777;
    padding: 0;
    border: 1px solid #333;
    background: #222222;
    text-align: center;
    font-size: 160%;
}

#rankingPad ul.hidden {
	visibility: hidden;
}

#score1winner { font-size: 145%; }

#score2winner { 
    font-size: 200%; 
    color: #000099;
    font-weight: bold;
}

#score2winner.first { 
    color: #990000;
}

#winnerstats
{
    padding: 0;
    font-size: 105%;
}
#winnerstats li
{
    display: inline-block;
    text-align: center;
    width:36%;
}
#winnerstats li:first-child
{
    width:28%;
}
.winnerfooter2
{
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    background: #222222;
    background: linear-gradient(to bottom, #1a1a1a 0%, #121212 100%);
}
.winnercontainer #middle { height: 75%; }
.winnercontainer #numberPad { height: 3em; }

/* ****************************************************************************
*******  Container  ***********************************************************
******************************************************************************/
#header { height: 21%; }
#middle { height: 65%; }
#footer { height: 10%; }

/* ****************************************************************************
*******  Points  **************************************************************
******************************************************************************/
#points  
{
    font-size: 145%;
    margin: 0;
    padding: 0 0 0 0;
}
#points li 
{ 
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 1.8%;
}
#points1, #points2
{
    width: 47% !important;
}

#points1 { text-align: left; }
#points2 { text-align: right; }

#input
{
    width: 15%;
    font-size: 120% !important;
    text-align:center;
    padding: 0;
    margin: 0 auto;
    position: relative;
    top: 0em;
}

/* ****************************************************************************
*******  Cricket — points display (bigger than default, matches x01 score)  **
******************************************************************************/
.cricketContainer #points {
    font-size: 230%;
    font-weight: bold;
    display: flex;
}
.cricketContainer #points li { display: block; }
.cricketContainer #points1 { flex: 1; text-align: left; color: #990000; width: auto !important; }
.cricketContainer #points2 { flex: 1; text-align: right; color: #555; width: auto !important; }

#cricket-undo-hint {
    text-align: center;
    color: #666;
    font-size: 110%;
    cursor: pointer;
}

/* ****************************************************************************
*******  Enter  ***************************************************************
******************************************************************************/
.cricketContainer #enter
{
    margin:.7em 0 0 0;
    padding: 0;
    font-size:80%;
}

.cricketContainer #enter li
{
    display: inline-block;
    width: 27%;
    padding: 0;
    margin: 0;
}
.cricketContainer #enter a
{
    display: block;
    padding: .9em 0;
    margin: 0;
    width: 100%;
    font-size: 100%;
}
.cricketContainer #enter1,
.cricketContainer #enter2
{
    width: 35% !important;
    cursor: pointer;
}


/* ****************************************************************************
*******  Marks  ***************************************************************
******************************************************************************/
#marks  
{
    font-size: 115%;
    margin: 0;
    padding: .5em 0 0 0;
    height: 86%;
}

#marks ul li
{
    padding: 0  !important;
    width: 40%;
    text-align: center;
}

#marks .sevenSegment {
    margin: 0em;
    width: 20%;
}

#marks .leftCol
{
    text-align: left;
    margin: 0px;
}
#marks .rightCol
{
    text-align: right;
    margin: 0px;
}

.ledMarks img
{
    width: 1.3em;
    height: 1.3em;
    display: inline-block;
    margin:0 .6em;
    text-align:center;
}

.ledMarks
{
    text-align:center;
    padding-right:0em;
    margin: 0 0;
    font-size: 80%;
    cursor: pointer;

}

/* ****************************************************************************
*******  Cancel  **************************************************************
******************************************************************************/
.cricketContainer #cancel li { 
    width: 27%; 
    display: inline-block; 
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.cricketContainer #cancel a {
    display: block;
    width: 100%;
    padding: .6em 0;
    margin: 0;
    font-size: 100%;
}

.cricketContainer #cancel1, 
.cricketContainer #cancel2
{
    width: 35% !important;
}
.cricketContainer #cancel2 { text-align: right; }

/** ***************************************************************************
 *  Marks Ahead - Indicates the number of marks needed to tie the game ********
 ******************************************************************************/
#ahead1,
#ahead2
{
    color: #666;
    padding: 0 1rem;
}


#radial
{
    font-size: .8em;
    width:100%;
}
/* ****************************************************************************
*******  Flexible Container   *************************************************
******************************************************************************/
.x01Container #header { height: 7.8em; }
.x01Container #middle1 { height: 17.5%; }
.x01Container #middle2 { height: 39%; }

#enter1, 
#enter2, 
#numberPad ul li {
	cursor: pointer;
}


/* ****************************************************************************
*******  Score Pad  ***********************************************************
******************************************************************************/
#scorePad { 
	font-size: 85%; 
	-mox-box-sizing: border-box;
	box-sizing: border-box; 
	padding: 0 .3em;
}
#scorePad ul {
	height: 4.35em;
}
#scorePad ul li { width:45%; display: inline-block; box-sizing: border-box; -moz-box-sizing: border-box;}

#scorePad2 { 
	font-size: 85%; 
	-mox-box-sizing: border-box;
	box-sizing: border-box; 
	padding: 2.7em .3em;
}
#scorePad2 ul {
	height: 4.35em;
}
#scorePad2 ul li { width:35%; display: inline-block; box-sizing: border-box; -moz-box-sizing: border-box;}

#score1 { font-size: 195%; }
#score2 { font-size: 435%; color: #990000;font-weight: bold;}
#score2u { font-size: 300%; color: #990000;font-weight: bold;}
#score1, #round1 { text-align: left!important; }
#score2, #score2u, #round2 { text-align: left!important; }
#round1, #round2 { font-size: 160%; width: 44.5% !important; margin: .4em 0; }

.x01Container #enter1, 
.x01Container #enter2 
{ 
	margin-top: .8em; 
}
.x01Container #enter1 a { margin:0 2em 0 0; }
.x01Container #enter2 a { margin:0 0 0 2em; }
.x01Container #enter1 a,
.x01Container #enter2 a { display: block; padding: 1em 0; }

#round { 
	font-size: 85%; 
	-mox-box-sizing: border-box;
	box-sizing: border-box; 
	padding-top: 2.5em;
}
#score1, #score2 {  }

ul#round li
{
	width: 8%;
}

li#round1.sevenSegment span,
li#round2.sevenSegment span
{
	height: 1.6em;
	margin: 0 .15em !important;
}

#undoPad { 
    margin-top: 0.2rem;
    color:#888;
}
#undoPad ul li { 
    width: 50%; 
    display: inline-block; 
}

.undo-notice 
{
    text-align: left;
    cursor: pointer;
}
.redo-notice
{
    text-align: right;
    cursor: pointer;
}

/* ****************************************************************************
*******  Input  ***************************************************************
******************************************************************************/
#inputRow
{
	margin: 0;
	padding: .02em 0 0 0;
	text-align:center!important;
	vertical-align: middle;
	font-size: 410% !important;	
	height: 80%;
	width: 100%;
	display: table;
}

#input1
{
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	text-align:center;
	vertical-align: middle;
	height: 100%;
	width: 100%;
	display: table-cell;
}

#inputRow span
{
	margin: 0 .15em !important;
}

/* ****************************************************************************
*******  Number Pad  **********************************************************
******************************************************************************/
#numberPad
{
	font-size:90%;
	margin: 0 auto;
	padding: 0 ;
	border-spacing: .35em;
	height: 100%;
	width: 99%;

}

#numberPad ul {
	padding: 0;
	margin: 0;
}

#numberPad ul li
{
	padding: 0;
	margin: 0;
	background: linear-gradient(top, #fff 0%,#e8e8e8 50%,#aaa 51%,#aaa 100%);
	background: -moz-linear-gradient(top, #fff 0%,#e8e8e8 50%,#aaa 51%,#aaa 100%);
	background: -o-linear-gradient(top, #fff 0%,#e8e8e8 50%,#aaa 51%,#aaa 100%);
	background: -webkit-linear-gradient(top, #fff 0%,#e8e8e8 50%,#aaa 51%,#aaa 100%);
	vertical-align: middle;
	width: 25%;
	color: #333;
/*	background-color:#eee;*/
	border:0px solid #eee;
	border-radius: .15em;
}
#numberPad ul li.active
{
	background: rgb(228, 255, 0);
	/*border-color: darkgreen;*/
}
/*
#numberPad ul:first-child li:first-child { border-top-left-radius: .15em; }
#numberPad ul:first-child li:last-child { border-top-right-radius: .15em; }
#numberPad ul:last-child li:first-child { border-bottom-left-radius: .15em; }
#numberPad ul:last-child li:last-child { border-bottom-right-radius: .15em; }
*/

#numberPad ul li a
{
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	padding: 0;
	width: 100%;
	-moz-border-radius: .13em !important; 
	-webkit-border-radius: .13em !important;
	border-radius:.13em !important;
	font-size: 104%;
}

/* ****************************************************************************
*******  Stats  ***************************************************************
******************************************************************************/
#pointsLeft1, #pointsLeft2, #pointsLeft3, #dartsThrown1, #dartsThrown2
{
	font-size: 75% !important;
}


/*
 * Swiper - Mobile Touch Slider CSS
 * http://www.idangero.us/sliders/swiper
 *
 * Vladimir Kharlampidi, The iDangero.us
 * http://www.idangero.us/
 * 
 * Copyright 2012-2013, Vladimir Kharlampidi
 * The iDangero.us
 * http://www.idangero.us
 *
 * Licensed under GPL & MIT
 *
*/

/* ===============================================================
Basic Swiper Styles 
================================================================*/
.swiper-container {
	margin:0 auto;
	position:relative;
	overflow:hidden;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden;
	/* Fix of Webkit flickering */
	z-index:1;
}
.swiper-wrapper {
	position:relative;
	width:100%;
	-webkit-transition-property:-webkit-transform, left, top;
	-webkit-transition-duration:0s;
	-webkit-transform:translate3d(0px,0,0);
	-webkit-transition-timing-function:ease;
	
	-moz-transition-property:-moz-transform, left, top;
	-moz-transition-duration:0s;
	-moz-transform:translate3d(0px,0,0);
	-moz-transition-timing-function:ease;
	
	-o-transition-property:-o-transform, left, top;
	-o-transition-duration:0s;
	-o-transform:translate3d(0px,0,0);
	-o-transition-timing-function:ease;
	-o-transform:translate(0px,0px);
	
	-ms-transition-property:-ms-transform, left, top;
	-ms-transition-duration:0s;
	-ms-transform:translate3d(0px,0,0);
	-ms-transition-timing-function:ease;
	
	transition-property:transform, left, top;
	transition-duration:0s;
	transform:translate3d(0px,0,0);
	transition-timing-function:ease;
}
.swiper-free-mode > .swiper-wrapper {
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	margin: 0 auto;
}
.swiper-slide {
	float: left;
}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
	-ms-touch-action: pan-y;
}
.swiper-wp8-vertical {
	-ms-touch-action: pan-x;
}

/* ===============================================================
Your custom styles, here you need to specify container's and slide's
sizes, pagination, etc.
================================================================*/
.swiper-container {
	/* Specify Swiper's Size: */

	/*width:200px;
	height: 100px;*/
}
.swiper-slide {
	/* Specify Slides's Size: */
	
	/*width: 100%;
	height: 100%;*/
}
.swiper-slide-active {
	/* Specific active slide styling: */
	
}
.swiper-slide-visible {
	/* Specific visible slide styling: */	

}
/* ===============================================================
Pagination Styles
================================================================*/
.swiper-pagination-switch {
	/* Stylize pagination button: */	

}
.swiper-active-switch {
	/* Specific active button style: */	
	
}
.swiper-visible-switch {
	/* Specific visible button style: */	
	
}

/************************************************************
 ****  Polar area chart  ************************************
 ***********************************************************/
 /** Data series.  Shape that shows the area covered */
 .series
 {
    stroke-width: 2px;
    fill: rgba(34, 47, 116, 0.44);
    stroke: rgb(26, 26, 26);
 }

/** Specific styles for series data */
 .series.series1
{
    fill: rgba(255, 0, 92, 0.3);
    stroke: rgb(49, 0, 20);
}
.series.series0
{
    stroke: rgb(12, 41, 1);
    fill: rgba(51, 255, 0, 0.53);  
}

/** Circular axis for each data value */
circle.circle
{
    fill: none;
    stroke: #2a2a2a;
    stroke-width: 2px;
}
/** 
 * Third circular axis has a special style because
 * this is the minimun number needed to close the number
 */
circle.circle.axis-3
{
    stroke: #eee!important;
    stroke-width: 3px;
}

/* Label that shows the number value of the circle tick */
.tick-label
{
    fill: #666;
}
.tick-label-3
{
    fill:#fff;
}

/**
 * Linear axis that radiates out of the center.
 * Each mark has an axis 
 */
line.line-axis
{
    stroke: #2a2a2a;
    fill: none;
    stroke-width: 2px;
}

/* Text label for the linear axes */
text.line-axis-label
{
    fill: #ccc;
}

.radial-marks
{ 
    box-sizing:border-box;
    text-align: center;
    padding: 0;
    margin: 0;
}

.radial-marks svg
{
    margin: 0 auto;
    padding: 0;
}
#content1
{
    height: 100%;
    margin: 0;
    padding: 0;
}
#wrapper
{
    white-space: nowrap;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
#wrapper > ul {
    padding: 0;
    margin: 0;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}