.div_gameboard {
    width: 340px;
    height: 550px;
    position: relative;
    /* top: 9px; */
    /*left: 14px; The clue area needs to span the entire width of the gameboard*/
    box-sizing: border-box;
}


.div_gameboardTitle {
    text-align: center;
    height: 60px;
    vertical-align: middle;
}

.div_gameboardClueSolutionHeadings{
    height: 16px;
    padding-left: 14px;
}

.div_clueSeparator{
    height: 1px;
    width: 340px;
    margin: 0;
}


.div_puzzleItemRow{
    height: 20px;
    width: 340px;
    /* font-size: 11px; */
    line-height: normal;
    /* height: 1.6em; */
    /* padding-top: .12em; */
    vertical-align: middle;
}

.div_actionBar{
    height: 37px;
    width: 312px;
    padding-left: 14px;
}


.div_tileHolder{
    width:312px;
    height:241px;
    text-align: center;
    padding-left: 14px;
}

.div_tileCell{
    float: left;
    text-align: left;
    background-color: #138BAE;
    width: 25%;
    height: 20%;
    border: 1px solid white;
    box-sizing: border-box;
}
.div_bottomButtonHolder{
    width:312px;
    height:40px;
    padding-left: 14px;
    padding-top: 5px;
    text-align: center;
}

.div_gameoverWellDone{
    font-size: 25px !important;
    /*display: inline-block;*/
    /*vertical-align: middle;*/
    text-align: center;
    margin-top: 12px;
}
.div_gameoverGetApp{
    font-size: 20px !important;
    /*display: inline-block;*/
    /*vertical-align: middle;*/
    text-align: center;
    margin-top: 12px;
}
.div_gameoverHowHard{
    font-size: 15px;
    /*display: inline-block;*/
    /*vertical-align: middle;*/
    text-align: center;
    margin-top: -12px;
    margin-bottom: 7px;
}
div.div_guessBar{
    /*background-color: #D2D2C5;*/
    width: 186px;
    line-height:37px;
    height: 37px;
    border: none;
    padding-left: 5px;
    vertical-align: middle;
    font-size: 18px;
    display: inline-block;
    overflow: hidden;
    border-radius: 5px 0px 0px 5px;

}

div.div_cancel {
    /*background: #B51D20;*/
    /* background: #686868; */
    width: 37px;
    height: 37px;
    /* line-height: 25px; */
    /* border: 1px solid black; */
    vertical-align: middle;
    /*position: relative;*/
    /*left: 7px;*/
    /*top: 3px;*/
    /* font-size: 20px; */
    padding: 0;
    /* color: white; */
    /* text-align: center; */
    display: inline-block;
    /* margin-top: 3px; */
    /* margin-left: 1px; */
    border-radius: 0px 5px 5px 0px;
    /* background:url("images/cancel_button.png") no-repeat center center;
    background-size: 70%; */
}
span.span_title{
    font-size: 16px;
    /*margin-top:-6px;*/
    margin-left: 3px;
    display: inline-block;
    /*background-color: lightgoldenrodyellow;*/
    vertical-align: middle;
}
span.span_smile{
    font-family: blueox-reg;
    font-size: 24px;
    /*margin-top:3px;*/
    display: inline-block;
    /*background-color: lightgoldenrodyellow;*/
    vertical-align: middle;
}

span.span_clue{
    width: 65%;
    display: inline-block;
    font-size:13px;
    /* height: 13px; */
    /* line-height: 13px; */
    vertical-align: middle;
    /* padding-top: 2px; */
    box-sizing: border-box;
    padding-left: 14px;
}

span.span_solution{
    width: 35%;
    display: inline-block;
    font-size:14px;
    /* height: 13px; */
    /* line-height: 13px; */
    vertical-align: middle;
    padding-right: 16px;
    /* padding-top: 2px; */
    text-align: right;
    box-sizing: border-box;
}

span.span_clue_solved{
    width: 65%;
    display: inline-block;
    font-size:14px;
    /* height: 13px;
    line-height: 13px; */
    vertical-align: middle;
    /* padding-top: 2px; */
    box-sizing: border-box;
    padding-left: 14px;
    text-decoration: line-through;
}

span.span_solution_solved{
    width: 35%;
    display: inline-block;
    font-size:14px;
    /* height: 13px;
    line-height: 13px; */
    vertical-align: middle;
    padding-right: 14px;
    /* padding-top: 2px; */
    text-align: right;
    box-sizing: border-box;
}





span.span_bottomButtons{
    display: inline-block;
    vertical-align: middle;
}


img.clueSeparator{
    display: block;
    vertical-align: middle;
    width: 340px;
}

button.button_Shuffle{
    width: 37px;
    height: 37px;
    vertical-align: middle;
    font-size: 17px;
    padding: 0;
    margin-left:5px;
    color: white;
    background-image: url("images/shuffle_button.png");
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: center;
}

button.button_tile{
    width: 75px;
    height: 45px;
    font-size:17px;
    margin:0;
    text-align: center;
    /*this padding was needed to force the text to center on ios*/
    padding: 1px;
    background-color: transparent;
    border: 0px;
    color: white;
}
button.button_Instructions{
    width: 155px;
    height: 34px;

    vertical-align: middle;
    /*position: relative;*/
    /*left: 7px;*/
    font-size: 17px;
    padding: 0;
}
button.button_About{
    width: 100px;
    height: 34px;

    vertical-align: middle;
    /*position: relative;*/
    /*left: 7px;*/
    font-size: 17px;
    padding: 0;
    margin-left:6px;
}

button.button_Hints{
    width: 37px;
    height: 37px;
    vertical-align: middle;
    font-size: 17px;
    padding: 0;
    margin-left:4px;
    color: white;
    background-image: url("images/hint_button.png");
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: center;
}

a.smileLink{
    text-decoration:none;
    font-family: blueox-reg;
    font-size: 144px;
    vertical-align: middle;
    line-height: normal;
}

#cancelImage{
    vertical-align: middle;
    max-height: 25px;
    max-width: 25px;
    padding-left: 5px;
    
}
#cancelImageNeedsHelpToVerticallyCenter {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

button.button_Cancel{
    width: 37px;
    height: 37px;
    vertical-align: middle;
    font-size: 17px;
    padding: 0;
    margin-left:0px;
    color: white;
    background-image: url("images/cancel_button.png");
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: center;
    border: 0px;
    border-radius: 0px 5px 5px 0px;
}


#gameOverSmiley{
    height: 200px;
    /* margin-top:40px; */
    background-image: url("images/7lw_smiley.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%;
}
#div_gameboardLogo {
    background-image: url("images/7lw_game.png");
    /* background-size: 75%; */
    background-repeat: no-repeat;
    background-position: center;
}

#gameOverAppleDownload{
    height: 80px;
    /* margin-top:40px; */
    background-image: url("images/gameOverAppleDownload.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
}
#gameOverGoogleDownload{
    height: 80px;
    /* margin-top:40px; */
    background-image: url("images/gameOverGoogleDownload.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
}
#hintIcon{
    width: 13px;
    height: 13px;
}