/*
 * CSS for Word Search game.
 * Log all and *any* changes to this CSS in the below history.
 *
 * History:
 *   1) Initial version: @author rliu  June 15 2015
 */


/* Disable text highlighting */
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*Title bar */

#wsTitleBar {
    position: relative;
    overflow: auto;  /* Resizes the height based on the content (ie the large title text) */
    height: 60px;
    margin: 0;
    padding: 0;
}

#wsTitle {
    position: absolute;
    left: 0;
    bottom: 0;
    font-family: verdana,arial,helvetica,sans-serif;
    font-style: normal;
    font-size: 33px;
    color: #005295;
}

#wsTermList {
    position: absolute;
    top: 0px;
    right: 0px;
}

.wsTitleRightSide {
    font-family: "trebuchet ms",arial,helvetica,sans-serif;
    font-style: normal;
    font-size: 15px;
    color: rgba(0, 82, 149, 0.6);
}


/* Game Div */

#wsGameDiv {
    /* Height/width based on aspect ratio (1.096) of original img given by artist */
    /*width:  600px;*/
    /*height: 548px;*/
    /* Height/width based on img, measured by UI designer */
    width:  671px;
    height: 612px;
    background-image: url("/img/activities/jg/ws/background.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}


/* Grid */

#wsWordGrid {
    position: relative;
    left:  24px;
    top:   22px;
}

.wsLetter {
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    font-family: "verdana",arial,helvetica,sans-serif;
    font-style: normal;
    font-size: 18px;
    color: rgba(28, 63, 93, 1.0);
}

.wsMatchedLetter {
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    font-family: "verdana",arial,helvetica,sans-serif;
    font-style: normal;
    font-size: 18px;
    color: rgba(0, 84, 139, 1);
}

/* Sprites */
.default {
    background-image: url("/img/activities/jg/ws/sprites.png");
    /*background-image: url("/rhome/rliu/qwGamesWordSearch/code/htdocs/img/activities/jg/ws/sprites.png");*/
    background-repeat: no-repeat;
    background-size: auto;
    float: left;
    /*background-position: center;*/
}

.transparent {
    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

/* Lower box div */

#wsLowerBox {
    position: relative;
    left: 20px;
    top: 82px;
    width: 100%;
    height: 160px;
    float: left;
}

#wsCluesList {
    position: relative;
    width: 60%;
    height: 100%;
    float: left;
}

#wsSeparator {
    position: relative;
    top: 17px;
    width: 5px;
    height: 150px;
    float: left;
    display: block;
    word-wrap: break-word;
    overflow: hidden;
}
#wsSeparatorText {
    font-family: verdana,arial,helvetica,sans-serif;
    font-style: normal;
    color: #ffffff;
    font-size: 16px;
    line-height: 10px;
    cursor: default;
}

#wsInstructionsBox {
    position: relative;
    top: 19px;
    width: 30%;
    height: 70%;
    float: left;
    margin-left: 5%;
}



/* Clues */

.wsCluesListColumn {
    width: 50%;
    height: 100%;
    float: left;
}

.wsCluesListUL {
    height: 100%;
    float: left;
    overflow: hidden;
}

.wsCluesListUL li {
    margin: 9px;
}

.wsClue {
    font-family: verdana,arial,helvetica,sans-serif;
    font-style: normal;
    font-size: 14px;
    color: #ffffff;
    text-transform: uppercase;
    list-style: none;
    cursor: default;
}

.wsClue.matched {
    font-family: verdana,arial,helvetica,sans-serif;
    font-style: normal;
    font-size: 14px;
    color: #a1ea0b;
    list-style-image: url('/img/activities/jg/ws/check_smaller.png');
}


/* Instructions box */

#wsInstructions {
    font-family: verdana,arial,helvetica,sans-serif;
    font-style: normal;
    font-size: 13px;
    color: #ffffff;
    cursor: default;
    line-height: 150%;
}

.wsInstrBtn {
    position: relative;
    padding: 8px;
    top: 16px;
    width: 80%;
    font-family: verdana,arial,helvetica,sans-serif;
    font-style: normal;
    font-size: 14px;
    color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    outline: #FFFFFF solid thin;
}

#wsShowAnswers {
}

#wsRestart {
}



/*Finished screen*/

#wsGameFinishedDiv {
    /*position: absolute;*/
    /*top: 530px;*/
    /*left: 250px;*/
    /*width: 500px;*/
    /*height: 260px;*/
    position: absolute;
    margin-top: -200px;
    margin-left: 100px;
    width: 500px;
    height: 260px;
}

#wsFinishedDiv {
    height: 100%;
    width:  100%;
    background-image: url("/img/activities/jg/ws/star.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

#wsFinalMsg {
    position: relative;
    text-align: center;
    top: 110px;
    width: 140px;
    /* margins auto is for centering */
    margin-left: auto;
    margin-right: auto;
    font-family: verdana,arial,helvetica,sans-serif;
    font-weight: bold;
    font-size: 33px;
    color: rgb(0, 82, 149);
}

#wsStartOver {
    position: relative;
    text-align: center;
    top: 110px;
    width: 100%;
    font-family: "trebuchet ms",arial,helvetica,sans-serif;
    font-style: normal;
    font-size: 14px;
    text-decoration: underline;
    color: rgb(0, 82, 149);
    cursor: pointer;
}

/* required for centering the text in TextFitContent component */
.JGTextFit {
    overflow: hidden;
    text-align: center;
    margin-left:  auto;
    margin-right: auto;
}


/* Overflow box */

#wsOverflowBox {
    margin-top: 5px;
    margin-bottom: 35px;
    border: none;
    /*background-color: #e4ecf3;*/
    background-color: #ffffff;
    width: 600px;
    /*height: 200px;*/
}

.wsOverflowBoxText {
    padding: 5px 30px 5px 25px;
    font-family: "trebuchet ms",arial,helvetica,sans-serif;
    font-size: 16px;
    /*color: rgb(0, 82, 149);*/
    color: rgb(0, 0, 0);
}