/*@media(max-width: 100%){}*/
@font-face {
    font-family: 'Comic';
    font-style: normal;
    font-weight: normal;
    src: url('web-fonts/comicbd.eot');
    src: url('web-fonts/comicbd.ttf') format('truetype')
        ,url('web-fonts/comicbd.otf')
        ,url('web-fonts/comicbd.svg') format('svg')
        ,url('web-fonts/comicbd.eot?#iefix') format('embedded-opentype');
}

@font-face {
    font-family: 'MrBubble';
    font-style: normal;
    font-weight: normal;
    src: url('web-fonts/MrBubbleFont.ttf') format('truetype')
        ,url('web-fonts/MrBubbleFont.otf')
        ,url('web-fonts/MrBubbleFont.svg') format('svg')
        ,url('web-fonts/MrBubbleFont.eot#') format('eot');
}

@font-face {
    font-family: 'GoodDog';
    font-style: normal;
    font-weight: normal;
    src: url('web-fonts/GoodDog.ttf') format('truetype')
        ,url('web-fonts/GoodDog.otf')
        ,url('web-fonts/GoodDog.svg') format('svg')
        ,url('web-fonts/GoodDog.eot#') format('eot');
}

@font-face {
    font-family: 'RAVIE';
    font-style: normal;
    font-weight: normal;
    src: url('web-fonts/RAVIE.ttf') format('truetype')
        ,url('web-fonts/RAVIE.otf')
        ,url('web-fonts/RAVIE.svg') format('svg')
        ,url('web-fonts/RAVIE.eot#') format('eot');
}

body{
    background-color: #00628B;
    font-family: 'Comic','Comic Sans MS';
    font-size: 30px;
}

.wordDef{
    color: green !important;
}

#rcg-main-menu{
    background: url('../img/game-screen/intro.png') no-repeat;
    background-size: 100% 100%;
}

#rcg-main-menu ul, #settings ul{
    width: 400px;
    list-style: none;
    font-weight: bold;
    font-size: 20px;
    color: #FFF;
    text-align: center;
    margin: 0px auto;
    padding-top: 10%;
}

#rcg-main-menu ul li{
    line-height: 30px;

    width: 250px;
    margin: 20px auto;
    border:2px solid #CCC;

    background:#f3961c; /* default background for browsers without gradient support */
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(#f9d835, #f3961c);
    background:-o-linear-gradient(#f9d835, #f3961c);
    background:linear-gradient(#f9d835, #f3961c);
    /* Using longhand to avoid inconsistencies between Safari 4 and Chrome 4 */
    -webkit-border-top-left-radius:25px 50px;
    -webkit-border-top-right-radius:25px 50px;
    -webkit-border-bottom-right-radius:25px 50px;
    -webkit-border-bottom-left-radius:25px 50px;
    -moz-border-radius:25px / 50px;
    border-radius:25px / 50px;
}

#settings ul li{
    padding-bottom: 20px;
}

.noScore{
    height: 120px;
    width: 120px;
}
/*#rcg-main-menu ul li:hover,*/
#settings ul li:hover{
    color: #6599FF;
    cursor: pointer;
}

/*avatar selection*/
#choose-avatar .profile-box{
    border:2px solid #6699FF; 
    border-radius: 5px;
}

#choose-avatar .selected-avatar{
    position:absolute; 
    bottom:0px; 
    left:0px;
    width:100%; 
    
    border-top: 2px solid #DDD;
    
    opacity: 0.9;
    background:#f3961c; /* default background for browsers without gradient support */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(#f9d835, #f3961c);
    background:-o-linear-gradient(#f9d835, #f3961c);
    background:linear-gradient(#f9d835, #f3961c);
}

#choose-avatar .name{
    background-color:#6699FF;  
    text-align: center; 
    font-weight:bold; 
    line-height: 30px;
}

#choose-avatar .picture{
    text-align: center; 
    position:relative;
}

/*slider*/
.swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
}
.swipe-wrap {
    overflow: hidden;
    position: relative;
}
.swipe-wrap > div {
    float:left;
    width:100%;
    position: relative;
}

#container{
    margin:0px auto;
    position: relative;
}

#def-info-box{
    background-color: #CCC;
    padding:10px;
    margin:10px;
    border: 2px solid #00f200;
    border-radius: 5px;
    font-size: 18px;
    min-height: 50px;
}

#answer-info-box, #infoBox{
    background-color: #CCC;
    padding:10px;
    margin:10px;
    border: 2px solid #DDD;
    border-radius: 5px;
    font-size: 18px;
    min-height: 100px;
}

#infoLB{
    background-color: #CCC;
    padding:10px;
    border: 2px solid #DDD;
    border: 2px solid #DDD;
    border-radius: 5px;
    font-size: 18px;
    width: 450px;

     background:#f3961c; /* default background for browsers without gradient support */
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(#f9d835, #f3961c);
    background:-o-linear-gradient(#f9d835, #f3961c);
    background:linear-gradient(#f9d835, #f3961c);
}

#suggestions ,#wordDefinitions, #settings, #game-hint-content, #game, #welcome{
    background-color: #CCC;
    width: 450px;
    padding:10px;
    margin:10px;
    border: 2px solid #DDD;
    border-radius: 5px;
}
/*test dy*/
#question-box {
    padding:10px 10px 10px 30px;
    margin:10px;
    border: 2px solid #DDD;
    border-radius: 5px;
    /*opacity: 0.95;*/
    position:absolute;
    max-width: 450px;

    left:160px;
    top:90px;
    
    
    background:#f3961c; /* default background for browsers without gradient support */
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(#f9d835, #f3961c);
    background:-o-linear-gradient(#f9d835, #f3961c);
    background:linear-gradient(#f9d835, #f3961c);
}

#answer-box{
    padding:10px;
    margin:10px;
    border: 2px solid #DDD;
    border-radius: 5px;
    /*opacity: 0.95;*/
    position:absolute;
    
    
    right:300px;
    top:200px;
    
    
    /*background:#f3961c;*/ /* default background for browsers without gradient support */
    /* css3 */
    /*background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(#f9d835, #f3961c);
    background:-o-linear-gradient(#f9d835, #f3961c);
    background:linear-gradient(#f9d835, #f3961c);*/
}

 .answers{
     width: 450px;
    padding:10px;
    margin:10px;
    border: 2px solid #DDD;
    border-radius: 5px;
    /*opacity: 0.95;*/
    position:absolute;
 
    background:#f3961c; /* default background for browsers without gradient support */
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(#f9d835, #f3961c);
    background:-o-linear-gradient(#f9d835, #f3961c);
    background:linear-gradient(#f9d835, #f3961c);
}

 #welcomeBox {
    width: 450px;
    height: 250px;
    padding:10px;
    margin:10px;
    border: 2px solid #DDD;
    border-radius: 5px;
    /*opacity: 0.95;*/
    position:absolute;
    
    
    /*left:10px;
    bottom:10px;*/
    
    
    background:#f3961c; /* default background for browsers without gradient support */
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(#f9d835, #f3961c);
    background:-o-linear-gradient(#f9d835, #f3961c);
    background:linear-gradient(#f9d835, #f3961c);
}

/* new insructions box - 3/31/15 */

#instructionBox {
    width: 450px;
    height: 300px;
    padding:10px;
    margin:10px;
    border: 2px solid #DDD;
    border-radius: 5px;
    /*opacity: 0.95;*/
    position:absolute;
        
    /*left:10px;
    bottom:10px;*/
       
    background:#f3961c; /* default background for browsers without gradient support */
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(#f9d835, #f3961c);
    background:-o-linear-gradient(#f9d835, #f3961c);
    background:linear-gradient(#f9d835, #f3961c);
}


#answer-options {
    width: 450px;
    padding:10px;
    margin:10px;
    border: 2px solid #DDD;
    border-radius: 5px;
    /*opacity: 0.95;*/
    position:absolute;
    
    
    /*left:10px;
    bottom:10px;*/
    
    
    background:#f3961c; /* default background for browsers without gradient support */
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(#f9d835, #f3961c);
    background:-o-linear-gradient(#f9d835, #f3961c);
    background:linear-gradient(#f9d835, #f3961c);
}

/*
#questions .selected{
    background: url('../img/tick.png') no-repeat left;
}*/

#answer-options .selectedOption{
    background: url('../img/tick.png') no-repeat;
    width: 35px;
    height: 35px;
    position:absolute;
    top:0px;
}


/*#answer-options*/ 
#answer-options .o{
    font-size: 16px;
    padding: 10px 55px 10px 10px;
    border-bottom: 1px dotted #000;
    position:relative;
    cursor: pointer;
}

/*small text for user feedback after queston*/
.smallText{
    font-size: 16px;
    padding: 10px 55px 10px 10px;
}

.gButton {
    -moz-box-shadow:inset 0px 1px 7px 0px #dcecfb;
    -webkit-box-shadow:inset 0px 1px 7px 0px #dcecfb;
    box-shadow:inset 0px 1px 7px 0px #dcecfb;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bddbfa), color-stop(1, #80b5ea) );
    background:-moz-linear-gradient( center top, #bddbfa 5%, #80b5ea 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bddbfa', endColorstr='#80b5ea');
    background-color:#bddbfa;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    border:4px solid #84bbf3;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:25px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #528ecc;
}.gButton:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #80b5ea), color-stop(1, #bddbfa) );
    background:-moz-linear-gradient( center top, #80b5ea 5%, #bddbfa 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80b5ea', endColorstr='#bddbfa');
    background-color:#80b5ea;
}.gButton:active {
    position:relative;
    top:1px;
}

#container #game-score{
    top:0px;left:0px;
    border-right:4px solid #FF9900;
    border-bottom:4px solid #FF9900;
    border-radius:0px 0px 5px 0px ;
    line-height: 40px;
    height: 40px;
    width: 150px;
    position:absolute;
    z-index: 10;
    text-align: right;
    font-size: 35px;
    padding-left:35px;
    background: #FFDE00 url("../img/tokenSmall.png") no-repeat 10px;
}

#container #game-settings{
    top:0px;right:15px;
    line-height: 50px;
    height: 50px;
    width: 50px;
    position:absolute;
    z-index: 10;
    text-align: right;
    background: url("../img/backward.png") no-repeat right;
    cursor:pointer;
}

.off{
    background: url("../img/music-off.png") no-repeat right;
} 
.on{
    background: url("../img/music-on.png") no-repeat right;
}

#game-vol{
    top:0px;right:130px;
    line-height: 50px;
    height: 50px;
    width: 50px;
    position:absolute;
    z-index: 10;
    text-align: right;
    /*background: url("../img/music-on.png") no-repeat right;*/
    cursor:pointer;
}

#leaderboard {
    top: 0px;
    right: 70px;
    line-height: 50px;
    height: 60px;
    width: 60px;
    position: absolute;
    z-index: 10;
    text-align: right;
    background: url("../img/leader.png") no-repeat right;
    cursor: pointer;
}
#leaderList{
    /*background-color: #f3961c;*/
    /*padding:5px;*/
    /*margin:5px;*/
    border: 2px solid #DDD;
    border-radius: 5px;
    font-size: 18px;
    min-height: 50px;
}

#container #game-hint{
    top:0px;right:65px;
    line-height: 50px;
    height: 50px;
    width: 50px;
    position:absolute;
    z-index: 10;
    text-align: right;
    background: url("../img/exclamation-mark-green-icon.png") no-repeat right;
    cursor:pointer;
}

#container #game-scene, #container #rcg-game, #container #choose-avatar{
    position: relative;
}

#container #game-scene blockquote{
    width: 500px;
    position:absolute;
    bottom:320px;
    right:100px;
    font-size: 20px;
}

/*
bubble box credit of :
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
*/
#container .example-obtuse {
    position:relative;
    padding:15px 30px;
    margin:0;
    color:#000;
    background:#f3961c; /* default background for browsers without gradient support */
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(#f9d835, #f3961c);
    background:-o-linear-gradient(#f9d835, #f3961c);
    background:linear-gradient(#f9d835, #f3961c);
    /* Using longhand to avoid inconsistencies between Safari 4 and Chrome 4 */
    -webkit-border-top-left-radius:25px 50px;
    -webkit-border-top-right-radius:25px 50px;
    -webkit-border-bottom-right-radius:25px 50px;
    -webkit-border-bottom-left-radius:25px 50px;
    -moz-border-radius:25px / 50px;
    border-radius:25px / 50px;
    /* opacity:0.8; */
}

#container .example-obtuse:after {
    content:"";
    position:absolute;
    
    /*
    bottom:-100px;
    left:100px;
    */
    border-width:0 20px 100px 0px;
    border-style:solid;
    border-color:transparent #f3961c;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

#container #game-levels,#container #choose-avatar{
    overflow: hidden;
}

#container #game-levels img{
    display: inline-block;
}

#container .info{
    position:absolute; 
    bottom:10px; 
    text-align: center;
    background-color: #CCC;
    border: 2px solid #DDD;
    border-radius: 5px;
    font-size: 15px;
    line-height: 24px;
    opacity: 0.8;
}

#clickRegion, #level_1, #level_2, #level_3, #level_4, #level_5, #mMarket
{ 
    -webkit-border-top-left-radius:25px 25px;
    -webkit-border-top-right-radius:25px 25px;
    -webkit-border-bottom-right-radius:25px 25px;
    -webkit-border-bottom-left-radius:25px 25px;
    -moz-border-radius:25px / 25px;
    border-radius:25px / 25px;

    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 2s;
    /*animation-delay: 2s;*/
    animation-iteration-count: infinite;
    /*-webkit-filter: brightness(100%);*/
    /*transition: all 0.5s ease-in-out;*/
    -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
@-webkit-keyframes example{
    0% { -webkit-transform: scale(1); }
    30% { -webkit-transform: scale(1.08); -webkit-box-shadow:0 0 60px white inset, 0 0 30px white;}
    80% { -webkit-transform: scale(1); }
}
@keyframes example {
    0% { transform: scale(1); }
    30% { transform: scale(1.08); box-shadow:0 0 60px white inset, 0 0 30px white;}
    80% { transform: scale(1); }

}

/*#clickRegion:hover 
{
    -webkit-filter: brightness(2) drop-shadow(0px 0px 30px white); 
    
    drop-shadow(0px 0px 20px white);
    filter: drop-shadow(5px 5px 20px white); 
    -webkit-box-shadow:0 0 20px white; 
    -moz-box-shadow: 0 0 20px white; 
    box-shadow:0 0 20px white;
}*/ 

#clickRegion:hover,#level_1:hover, #level_2:hover, #level_3:hover, #level_4:hover, #level_5:hover, #mMarket:hover
{
    width: 65px;
    height: 65px;
    -webkit-animation-play-state:paused;
    /*-webkit-filter: brightness(150%);*/
    /*-webkit-filter: brightness(2) drop-shadow(0px 0px 30px white);*/
    /*-webkit-filter: drop-shadow(0px 0px 15px white);*/
    /*filter: drop-shadow(5px 5px 20px white);*/
    -webkit-box-shadow:0 0 50px white inset;
    -moz-box-shadow: 0 0 50px white inset;
    box-shadow:0 0 50px white inset, 0 0 30px white;
} 

#postScore, #return, #intruct, #startb{
    
    color: #FFF;
    width: 140px;
    margin: 5px auto;
    border:2px solid #CCC;

    font-family: 'Comic','Comic Sans MS';
    font-size: 20px;
    
    background:#f3961c; /* default background for browsers without gradient support */
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(#f9d835, #f3961c);
    background:-o-linear-gradient(#f9d835, #f3961c);
    background:linear-gradient(#f9d835, #f3961c);
    /* Using longhand to avoid inconsistencies between Safari 4 and Chrome 4 */
    -webkit-border-top-left-radius:25px 50px;
    -webkit-border-top-right-radius:25px 50px;
    -webkit-border-bottom-right-radius:25px 50px;
    -webkit-border-bottom-left-radius:25px 50px;
    -moz-border-radius:25px / 50px;
    border-radius:25px / 50px;
}

#postScore:hover, #return:hover, #intruct:hover, #startb:hover{
    color: #6599FF;
    cursor: pointer;
}

#playerName{
    width: 75px;
    height:25px;
    margin: 20px auto;
    border-radius: 5px;
    border:2px solid #CCC;

    font-family: 'Comic','Comic Sans MS';
    font-size: 20px;
}


/* http://everythingfonts.com/otf-to-ttf#.UYh2V7WG3w8 */