@font-face {
    font-family: 'Entypo';
    src: url('fonts/entypo.eot'); /* IE9 Compat Modes */
    src: url('fonts/entypo.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('fonts/entypo.woff') format('woff'), /* Modern Browsers */
        url('fonts/entypo.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('fonts/entypo.svg#svgFontName') format('svg'); /* Legacy iOS */
}


body
{
    background-color: #FFFFFF;
    margin: 0px;
    padding: 0px;
    font-size: 1em;
    font-family: 'Open Sans', sans-serif;
    overflow: hidden;
    color: #00B4FF;
}
#container {
    overflow: hidden;
}
header
{
    float: left;
    width: 100%;
    height: 60px;
    background-color: #FFFFFF;
    overflow: hidden;
}
#logo {
    margin-left: -200px;

    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
header h1
{
    margin-left: -200px;
    color: #00B4FF;
    font-size: 2em;
    margin: 0px;
    padding: 7px 0 0 20px;
    float: left;
    white-space: nowrap;
    font-weight: 300;
}
h2 {
    font-weight: 600;
    font-size: 2.0em;
}
#game
{
    float: left;
    width: 100%;
    overflow: hidden;
    border-top: 1px solid #00B4FF;
}
.gameArea {
    z-index: 0;
    position: absolute;
    float: left;
    width: 100%;
    overflow: hidden;
    background-repeat: no-repeat !important;
/*
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;*/
}
.slider
{
    position: absolute;
    display: block;
    padding: 0px;
    margin: 0;
    background: #FFFFFF;
    background-repeat: no-repeat;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    display: table-cell;
    vertical-align: middle;

    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
.slider span
{
    color: #00B4FF;
    padding: 0;
    margin: 5px;
    display: block;
    background-color: rgba(255,255,255,.7);
    text-align: center;
    text-indent: -1px;

    width: 24px;
    height: 24px;

    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
.blank span {
    display: none;
}
.slider:hover, .slider:active
{
}
.blank, .blank:hover, .blank:active
{
    background: transparent !important;
    text-indent: 99999px;
}
.finished
{
    z-index: 100;
    position: absolute;
    float: left;
    width: 100%;
    text-align: center;
    color: #333333;
    margin: 0px;
    height: auto;
    margin-left: 100%;

    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.options
{
    z-index: 50;
    position: absolute;
    float: left;
    width: 100%;
    text-align: center;
    margin: 0px;
    height: auto;
    margin-left: 100%;

    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.options table, .finished table {
    width: 100%;
    height: inherit;
    color: #00B4FF;
    text-align: center;
}
.options table .inner, .finished table .inner {
    padding: 1px 20px 20px 20px;
    margin: 0 auto;
    background-color: rgba(255,255,255,.9);
    max-width: 300px;

}
#nav {
    float: right;
    margin-top: -6px;
    margin-right: -200px;
    color: #00B4FF;

    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#shuffle, #options {
    text-decoration: none;
    font-weight: 300;
    padding: 0  20px 0 0;
    color: #00B4FF;
}
#shuffle:hover, #options:hover {
    color: #999;
}
#shuffle span, #options span {
    font-family: 'Entypo';
    font-size: 3em;
}
#closeOptions {
    text-decoration: none;
    color: #00B4FF;
    vertical-align: bottom;
}
#closeOptions span {
    font-family: 'Entypo';
    font-size: 3em;
}


.s10, .s11, .s12, .s13, .s14, .s15, .s16, .s17, 
.s18, .s19, .s20, .s21, .s22, .s23, .s24, .s25 {
    display: none;
}


/**
 * High res images
 **/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2) {
    /*#nav {
        margin-top: 0.3em;
    }*/
}