/*
    Sudoku puzzle style sheet
    (C) Copyright 2007-2016
    John Ryland <jryland@invertedlogic.com>

    ALL RIGHTS RESERVED
*/
html * {
    text-align : center;
    font-family: verdana, Arial, Helvetica, sans-serif;
    font-smooth: always;
/*
    border : 1px solid #000;
*/
}
html {
}
body {
    border : 0px solid #000;
    height : 100%;
    background-image : url('images/background.svg');
}
.titleLogo {
    margin-top: -10px;
    margin-left: -20px;
}
#content {
    margin : 0px auto;
    border : 0px solid #000;
    width : 960px;
}
.blank {
    border : 0px;
    background-color : #FFF;
}
#ad_container {
   margin-left: auto;
   margin-right: auto;
}
#e {
    background-color : #000;
    color : #FFF;
}
h1 {
/*    font-family: "Trebuchet MS", Helvetica, sans-serif;*/
    font-family: "Lucida Console", Monaco, monospace;
/*    font-family: "Impact", Charcoal, sans-serif;*/
    font-size : 5em;
    margin: 0px;
    margin-bottom: 15px;
    font-style: oblique;
    color: #358;
    text-shadow: -7px 7px 0px rgba(0,0,0,0.3);
}

#title {
    font-size : 2em;
}
#fb-share
{
    width: 210px;
    padding-top: 5px;
    padding-right: 3px;
}
.icon {
    padding-top: 5px;
    width : 95px;
    max-width : 98px;
    height : 25px;
    margin : 0px auto;
}
.icon svg {
    width : 95px;
    max-width : 98px;
    height : 95px;
    padding-top: 6px;
    padding-left: 0px;
    padding-right: 3px;
    float : left;
}
.buttonBox {
    display : inline-block;
    margin : 0px auto;
}
.iconButton, .numButton, .button {
    text-shadow: -3px -3px 0px #ddd;
    height: 90px;
    line-height: 70px;
    float : left;
    cursor : default;
    margin : 0px;
    color : #333;
    text-align : center;
}

.iconButton, .disabledIconButton {
    padding : 2px;
    padding-top : 0px;
    padding-bottom : 3px;
    width : 130px;
    max-width : 130px;
    background-image : url('images/icon-button-w.svg');
}
.disabledIconButton {
    color : #777;
    background-image : url('images/icon-button-w-down.svg');
}

.button, .disabledButton {
    padding : 2px;
    margin-right : 0px;
    padding-left : -20px;
    font-size: 30px;
    line-height : 80px;
    width : 215px;
    min-width : 110px;
    background-image : url('images/button.svg');
}
.disabledButton {
    color : #777;
    background-image : url('images/button-disabled.svg');
}
.button .icon {
    padding-top: 3px;
    padding-left: 3px;
    width : 73px;
    height : 73px;
    float : left;
}
.numButton, .disabledNumButton {
    line-height: 85px;
    font-size: 50px;
    width : 98px;
    min-width : 40px;
    background-image : url('images/icon-button.svg');
}
.disabledNumButton {
    color : #777;
    background-image : url('images/icon-button-down.svg');
}

table {
    border-collapse: collapse;
}
#bigbox {
    border : 2px solid #000;
    margin-left : auto;
    margin-right : auto;
    -moz-box-shadow: 12px 12px 12px rgba(0,0,0,0.40);
    -webkit-box-shadow: 12px 12px 12px rgba(0,0,0,0.40);
    margin-bottom : 30px;
}
#boxes {
    border : 2px solid #000;
    margin : 0px;
    padding : 0px;
}
#boxes * {
    border : 0px solid #000;
    margin : 0px;
    padding : 0px;
}
#boxes * * {
    border : 1px solid #000;
    margin : 0px;
    padding : 0px;
    font-size : 65px;
    width : 97px;
    min-width : 97px;
    height : 97px;
    line-height: 90px;
    text-align : center;
    text-shadow: -3px -3px 0px rgba(0,0,0,0.15);
}
.Cell {
    background-color : #EEE;
}




.ClueNumber {
    border : 1px solid #000;
    background-color : #f3f3f3;
    color : #6b6b6b;
    height: 85px;
    line-height: 80px;
}
.EmptyNumber {
    background-color : #fff;
}
.EnteredNumber {
    background-color : #fff;
    color : #505050;
}
.WrongNumber {
    background-color : #FBB;
    color : #F22;
}
.CorrectNumber {
    background-color : #FFF;
    color : #555;
}
.PausedNumber {
    background-color : #DDD;
    color : #333;
}
.SameValue {
    background-color : #becada;
    color : #efefef;
}
.SameValueRowCol {
    background-color : #decada;
    color : #efefef;
}
.SameValueFocused {
    background-color : #bedaca;
    color : #efefef;
}
.ClueNumberFocused {
    background-color : #f5fff7;
    color : #63dc1e;
}
.ClueNumberFocusedLine {
    background-color : rgb(220, 220, 220);
    color : #fff;
}
.ClueNumberFocusedSquare {
    background-color : #bfc5cc;
    color : #f1f1f1;
}
.EnteredNumberFocused {
    background-color : #BCE;
    color : #22F;
}


#Footer {
    margin : 5px auto;
}
.fb-login * {
    min-height : 50px;
    left : 270px;
}
.fb-like * {
    min-height : 50px;
    left : -90px;
}
.fb_iframe_widget iframe {
    margin-top : -5px;
 
    transform : scale(2);
    -o-transform :  scale(2);
    -webkit-transform : scale(2);
    -moz-transform : scale(2);

    transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
}
#Footer {
    height : 0px;
}
#BannerAd {
    margin-top : 15px;

    transform : scale(1.3);
    -o-transform :  scale(1.3);
    -webkit-transform : scale(1.3);
    -moz-transform : scale(1.3);

    transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
}
#outterInProgress {
    position : relative;
    top: 0;
    width : 910px;
    margin-left : auto;
    margin-right : auto;
}
#inProgress {
    position : absolute;
    background: rgba(220,220,220,0.7);
    z-index : 99;
    display : none;
    width : 910px;
    height: 890px;
}
#blah {
    position : relative;
    color : #000;
    top : 420px;
    z-index : 100;
    font-size : 32px;
}




#menuWrapper,
#winScreenWrapper,
#newDialogWrapper,
#leaderBoardWrapper {
    display : none;
    position : fixed;
    top  : 0;
    left : 0;
    width : 100vw;
    height : 100vh;
    background: rgba(80,80,80,0.3);
    z-index : 98;
}
#menuWrapper {
    height : 0px;
}
#newDialogWrapper {
    display : block;
}
#menuWrapper2,
#winScreenWrapper2,
#newDialogWrapper2,
#leaderBoardWrapper2 {
    width : 100vw;
    height: 800px;
}
#menuWrapper2 {
    height: 0px;
}
#newDialogCancel
{
    display : none;
}
#menu,
#newDialog,
#winScreen,
#leaderBoard {
    border-radius : 15px;
    position : absolute;
    font-size : 32px;
    text-align : center;
    border : 1px solid #444;
    margin : 0px auto;
    background-color: rgba(255,255,255,0.90);
    z-index : 99;
    -moz-box-shadow: 22px 22px 22px rgba(0,0,0,0.40);
    -webkit-box-shadow: 22px 22px 22px rgba(0,0,0,0.40);
}
#newDialog,
#winScreen,
#leaderBoard {
    margin : auto auto;
    left : 80px;
    top : 300px;
    width : 800px;
    height: 800px;
    margin-left : auto;
    margin-right : auto;
}
#menu {
    border : 4px solid #444;
    left : 40px;
    top : 580px;
    padding: 0px;
}


.dialogTitle {
    border-radius : 5px;
    font-size : 45px;
    height : 60px;
    line-height: 57px;
    color : #FFF;
    text-shadow: -3px 3px 0px rgba(0,0,0,0.3);
    text-align : center;
    position : absolute;
    border : 0px solid #444;
    background-color: rgba(150,170,190,0.9);
    top : 0;
    left : -1;
    width : 100%;
}
.dialogContainer {
    position : absolute;
    text-align : center;
    top : 100px;
    width : 100%;
    margin : 0px auto;
}

/* .fb_dialog_iframe iframe */
.fb_dialog {
    transform : scale(1.7);
    -o-transform :  scale(1.7);
    -webkit-transform : scale(1.7);
    -moz-transform : scale(1.7);

    transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
}



#resumeButton {
    display : none;
}

.menuItem, .disabledMenuItem {
    border : 2px solid #CCC;
    border-radius: 5px;

    padding : 2px;
    font-size: 26px;
    width : 265px;
    text-shadow: -3px -3px 0px #ddd;
    line-height: 83px;
    float : left;
    cursor : default;
    color : #333;
    text-align : left;
}
.facebookLogo {
    padding-top: 3px;
    padding-left: -3px;
    width : 123px;
    height : 73px;
    float : left;
}
.menuItem .icon {
/*
    padding-left: 3px;
    padding-right: 10px;
    width : 25px;
    height : 25px;
*/
    padding-top: 3px;
    padding-left: -3px;
    width : 123px;
    height : 33px;
    float : left;
}
.disabledMenuItem {
    color : #777;
}
#Timer {
    padding-left : 30px;
    padding-right : 30px;
    float : left;
    height : 80px;
    width : 290px;
    font-size : 70px;
}