body {
    font-family:Verdana,sans-serif;
    font-weight:400;
    margin:0px;
    padding:0px;
    box-sizing:border-box;
    background: rgba(19,76,191,1) !important;
/*background: -moz-linear-gradient(left, rgba(19,76,191,1) 0%, rgba(101,152,254,1) 51%, rgba(19,76,191,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(19,76,191,1)), color-stop(51%, rgba(101,152,254,1)), color-stop(100%, rgba(19,76,191,1)));
background: -webkit-linear-gradient(left, rgba(19,76,191,1) 0%, rgba(101,152,254,1) 51%, rgba(19,76,191,1) 100%);
background: -o-linear-gradient(left, rgba(19,76,191,1) 0%, rgba(101,152,254,1) 51%, rgba(19,76,191,1) 100%);
background: -ms-linear-gradient(left, rgba(19,76,191,1) 0%, rgba(101,152,254,1) 51%, rgba(19,76,191,1) 100%);
background: linear-gradient(to right, rgba(19,76,191,1) 0%, rgba(101,152,254,1) 51%, rgba(19,76,191,1) 100%);*/
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#134cbf', endColorstr='#134cbf', GradientType=1 );*/


}

        /*@font-face {
      font-family: "Flexure";
      src: url("/Fonts/flexure.woff");
    }*/

.pts-test {
position:absolute;
z-index:20000;
top:10px;
left:10px;
}




#txtPlaceholder {
display:none;
}

textarea {
    resize: none;
}

header {
    background: rgba(19,76,191,1);
}

          @font-face {
      font-family: "JI-Brunts";
      src: url("/Fonts/JI-Brunts.woff");
    }
    
        .clear{
            clear:both;
        }

        a:hover{
            color:#fff !important;
            cursor:pointer;
        }

        a, a:visited{
            color:#dbce66;
            text-decoration:none;
        }

        .captalize{
            text-transform:capitalize;
        }

#content a, #content a:visited {
    color: #3910b1;
   
} 


         #content a:hover{
             color:#202020 !important;
             cursor:pointer;
         }


.dark-textlink {
    color: #806b00;
}

.dark-textlink:hover {
    color: #a08b20;
    cursor:pointer;
}


       .textlink{
           font-size:.8em;
           font-weight:bold;
           color:#ffe566;
         
       }
        .textlink:hover {
        color:#ffffff;
        cursor:pointer;
        }

.normal {
    font-size: 1em;
}
.reduced {
    font-size: .9em;
}

        .small{
            font-size:.8em;
        }

        .tiny{
            font-size:.7em;
            font-family:Arial;
            
        }

#key_a .tiny, #key_b .tiny {
  font-size:0.9em;
}

.center {
    text-align: center;
}

        .bold{
            font-weight:bold;
        }


        .hidden{

            display:none !important;
        }

        .text-left{
            text-align:left !important;
        }

         .text-right{
            text-align:right !important;
        }

         .indent{

             padding-left:40px;
         }

         .full-width{
             width:100% !important;
         }

         .h-100{
             min-height:100px;
         }
          .h-150{
             min-height:150px;
         }
           .h-200{
             min-height:200px;
         }
            .h-250{
             min-height:250px;
         }

        .gap-top{
            margin-top:15px !important;
        }

.gap-top5 {
    margin-top: 5px;
}

.gap-top10 {
    margin-top: 10px !important;
}
         .gap-bottom{
            margin-bottom:25px;
        }


.gap-bottom10 {
    margin-bottom: 10px;
}

.gap-top20 {
    margin-top: 20px !important;
}
.gap-top25 {
    margin-top: 25px !important;
}

.gap-top30 {
    margin-top: 30px !important;
}


.gap-left {
    margin-left: 15px;
}

.gap-left20 {
    margin-left: 20px;
}

.gap-left25 {
    margin-left: 25px;
}

.gap-left35 {
    margin-left: 38px;
}

.gap-left65 {
    margin-left: 65px;
}

.gap-right {
    margin-right: 15px;
}


.ml50{
    margin-left:0px;
}

.wrap-30 {
    width: 30px !important;
    margin-left: 5px !important;
    float: left;
}

.wrap-45 {
    width: 45px !important;
    margin-left: 5px !important;
    float: left;
}
         .wrap-50p{
             width:41% !important;
             margin-left:6% !important;
             float:left;
         }

           .wrap-fp120{
             width:120px !important;
             margin-left:15px !important;
             float:left;
         }


.wrap-fp135 {
    width: 135px !important;
    margin-left: 15px !important;
    float: left;
}
.wrap-fp150 {
    width: 150px !important;
    margin-left: 15px !important;
    float: left;
}

.wrap-fp185 {
    width: 185px !important;
    margin-left: 15px !important;
    float: left;
}
             .wrap-fp220{
             width:220px !important;
             margin-left:15px !important;
             float:left;
         }

.wrap-fp250 {
    width: 250px !important;
    margin-left: 15px !important;
    float: left;
}

.wrap-fp375 {
    width: 375px !important;
    margin-left: 15px !important;
    float: left;
}

        .disabled-text{
            color:#aaaaaa;
        }

        .gold{
            color:#806b00 !important;
        }

        .prompt{
text-align:center;
font-size:1.2em;
margin:15px ;
        }

        .error{
            color:#990000
        }

        .alert{
            color:#990000;
        }

       .k-list-container .k-list .k-item
{
    padding-right: 25px;
    white-space:  normal;
   font-size:12px !important;
}

       .k-state-hover .k-i-arrow-s{
           background-position: 0 -32px !important;
       }

        input{
            border-radius:5px !important;
            font-size:.9em  !important;
        }

        .form-field  input{
          width:72%;

        }

      .form-field   .input-label{
            float:left;
            width:110px;
            text-align:right;
            margin-right:7px;
            font-size:.9em !important;
            font-weight:normal !important;
            padding-top:5px;
            /*height:30px;*/
        }

       .form-field textarea{
           width:72%;
           border-radius:5px;
       }


        .form-field.recaptcha{

            padding-left:120px;
        }


        .form-field{
margin-bottom:15px;
        }


       .btnLogin{
            font-size:.4em;
           position:absolute;
           right:10px;
           top:7px; /*12px*/
           z-index:1000;
            text-align:center;
       }

        .btnLogin.intro {
        font-size:.8em;
    }



.k-dropdown .k-dropdown-wrap {
    background: rgba(169,144,32,1) !important;
    background: -moz-linear-gradient(left, rgba(169,144,32,1) 0%, rgba(241,235,205,1) 34%, rgba(241,235,205,1) 68%, rgba(169,144,32,1) 100%) !important;
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(169,144,32,1)), color-stop(34%, rgba(241,235,205,1)), color-stop(68%, rgba(241,235,205,1)), color-stop(100%, rgba(169,144,32,1))) !important;
    background: -webkit-linear-gradient(left, rgba(169,144,32,1) 0%, rgba(241,235,205,1) 34%, rgba(241,235,205,1) 68%, rgba(169,144,32,1) 100%) !important;
    background: -o-linear-gradient(left, rgba(169,144,32,1) 0%, rgba(241,235,205,1) 34%, rgba(241,235,205,1) 68%, rgba(169,144,32,1) 100%) !important;
    background: -ms-linear-gradient(left, rgba(169,144,32,1) 0%, rgba(241,235,205,1) 34%, rgba(241,235,205,1) 68%, rgba(169,144,32,1) 100%) !important;
    background: linear-gradient(to right, rgba(169,144,32,1) 0%, rgba(241,235,205,1) 34%, rgba(241,235,205,1) 68%, rgba(169,144,32,1) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a99020', endColorstr='#a99020', GradientType=1 ) !important;

    border:solid 1px #806b00 !important;
    /*background-color:rgba(207,189,115,1) !important;*/
   
}

.k-dropdown {
background-color:transparent !important;
}

.k-list-container {
    /*background-color: #fff !important;
    background-image: url('../images/system/menu_theme_open.png') !important;*/
    background: rgba(95,81,3,1);
    background: -moz-linear-gradient(left, rgba(95,81,3,1) 0%, rgba(177,156,36,1) 51%, rgba(95,81,3,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(95,81,3,1)), color-stop(51%, rgba(177,156,36,1)), color-stop(100%, rgba(95,81,3,1)));
    background: -webkit-linear-gradient(left, rgba(95,81,3,1) 0%, rgba(177,156,36,1) 51%, rgba(95,81,3,1) 100%);
    background: -o-linear-gradient(left, rgba(95,81,3,1) 0%, rgba(177,156,36,1) 51%, rgba(95,81,3,1) 100%);
    background: -ms-linear-gradient(left, rgba(95,81,3,1) 0%, rgba(177,156,36,1) 51%, rgba(95,81,3,1) 100%);
    background: linear-gradient(to right, rgba(95,81,3,1) 0%, rgba(177,156,36,1) 51%, rgba(95,81,3,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5f5103', endColorstr='#5f5103', GradientType=1 );
    color: #fff !important;
    border-radius: 6px !important;
}

.mobile .k-list-container {
    font-size: 1.1em !important;
}

    .mobile .k-list-container .k-item {
        line-height: 1.7 !important;
        background-color: transparent !important;
        color: #fff;
    }

    .mobile .k-list-container .k-item:hover {
     background-color:rgba(255,220,115,1) !important;
     color:#000;
    }


.k-list-container .k-state-hover, .k-list-container .k-state-focused {
    background: rgba(204,189,112,1);
    background: -moz-linear-gradient(left, rgba(204,189,112,1) 0%, rgba(240,233,201,1) 34%, rgba(240,233,201,1) 68%, rgba(204,189,112,1) 100%) !important;
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(204,189,112,1)), color-stop(34%, rgba(240,233,201,1)), color-stop(68%, rgba(240,233,201,1)), color-stop(100%, rgba(204,189,112,1))) !important;
    background: -webkit-linear-gradient(left, rgba(204,189,112,1) 0%, rgba(240,233,201,1) 34%, rgba(240,233,201,1) 68%, rgba(204,189,112,1) 100%) !important;
    background: -o-linear-gradient(left, rgba(204,189,112,1) 0%, rgba(240,233,201,1) 34%, rgba(240,233,201,1) 68%, rgba(204,189,112,1) 100%) !important;
    background: -ms-linear-gradient(left, rgba(204,189,112,1) 0%, rgba(240,233,201,1) 34%, rgba(240,233,201,1) 68%, rgba(204,189,112,1) 100%) !important;
    background: linear-gradient(to right, rgba(204,189,112,1) 0%, rgba(240,233,201,1) 34%, rgba(240,233,201,1) 68%, rgba(204,189,112,1) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccbd70', endColorstr='#ccbd70', GradientType=1 ) !important;
    border: none !important;
    padding: 4px !important;
}


    .k-list-container .k-list-optionlabel {

        color:#000;
    }
    

    
    #ddlMonth-list  .k-list-optionlabel {


        color:#fff !important       ;
        font-size:12px !important;
    }

    /* #ddlMonth-list  .k-list-container {

   width:800px !important; 
  
    }
     .k-animation-container {

   width:800px !important; 
   
    }
    #ddlMonth-list  .k-list-scroller {

   width:800px !important; 
  
    }
   
   

    #ddlMonth-list ul{
        display:flex;
        flex-wrap: wrap;
        flex-direction: row;
        
        width:850px;

}

    #ddlMonth-list li{

    flex:1 1 200px;

} */

.k-list-container .k-item {
    padding: 4px !important;
    border: none !important;
}
    
    
    
    
    #ddlTheme .k-dropdown {
        width: 300px !important;
        font-size: .7em !important;
    }

#ddlSort .k-dropdown{
    width:115px;
   
}

.sort-text{
     /*font-size:.7em !important;*/
}

       .filters>.k-dropdown:first-child{
float:left;

        }
       
     #dailyMessageBoard  .filters>.k-dropdown:first-child{
margin-left:15px;

        }

       li i{
           margin-left:5px;
           font-size:10px !important;
       }

.mgr-filters {
    margin-top:25px;
    margin-left:40px;
float:left;
}

       .filters{
           padding:5px;
           text-align:right;
           margin-right:20px;
       }

     .filters  .k-textbox{
         font-size:.85em !important;
           height:27px !important;
           border-radius:5px !important;
           width:105px;
       }

      .filters .k-dropdown{

           font-size:.75em !important;
           height:27px !important;
          
           width:110px;
           margin-top:5px;
           margin-left:5px;
      }

      .sort-label:hover{
          cursor:pointer;
          color:rgba(19,84,213,1) !important;
      }

      .k-dropdown .k-dropdown-wrap, .k-dropdown.k-state-border-down .k-dropdown-wrap.k-state-border-down {
     font-size:10px !important;
           border-radius:5px !important;
      }

        #prefooter a:hover {
    color: #134cbf !important;
    font-family: Verdana,Helvetica,Verdana,sans-serif;
    font-weight: bold;
    text-decoration: underline;
}
#prefooter a {
    color: #806b00;
    font-family: Verdana,Helvetica,Verdana,sans-serif;
    font-weight: bold;
    text-decoration: none;
    margin:0px 15px 0px 15px;
}

.copyright {
color:#fff;
font-size: .7em;
margin-top:10px;
text-align:center;
margin-bottom:10px;
}

#app{

}

/*.heading{
     margin:20px;
    font-size:1.3em;
font-weight:bold;
color:#202020;

}*/

#logo{

    position:absolute;
    margin-top:0px;
    margin-left:-50px;
    width:185px;
    z-index:10000;
}

#logo:hover{
    cursor:pointer;
}

#logo img{

    width:100%;
    /*height:135px;*/
}

.rings{
    box-sizing:border-box;
  width:100%;
  max-width:950px;
    position:absolute;
    height:128px;
    overflow:hidden;
  z-index:3;
  left: 50%;
  transform: translateX(-42%);
    pointer-events:none;
}

.rings img{
    position:relative;
      top:-70px;
      margin-left:2%;
      opacity:.45;

}

 header {
     box-sizing:border-box;
       /*position:fixed;*/
    width:100%;
  /*background:url("images/barT_internal1.gif");*/
  position:relative;
  /*background:url("../images/system/border1.jpg");
  background-repeat:repeat-x;
  background-position-y:bottom;
    background-color:#134cbf;*/
    margin:0px;
font-size:2em;
font-weight:bold;
color:#ffffff;
min-height:45px;
padding:0px 15px;
/*background-color:#0284c6;
border-bottom:solid 6px #202020;*/
 z-index:1000;


}

 .border-bar{
     display:none;
     height:8px;
     width:100%;
        background: rgba(178,154,37,1);
background: -moz-linear-gradient(left, rgba(178,154,37,1) 0%, rgba(237,233,196,1) 24%, rgba(204,183,90,1) 38%, rgba(204,183,90,1) 62%, rgba(237,233,196,1) 78%, rgba(178,154,37,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(178,154,37,1)), color-stop(24%, rgba(237,233,196,1)), color-stop(38%, rgba(204,183,90,1)), color-stop(62%, rgba(204,183,90,1)), color-stop(78%, rgba(237,233,196,1)), color-stop(100%, rgba(178,154,37,1)));
background: -webkit-linear-gradient(left, rgba(178,154,37,1) 0%, rgba(237,233,196,1) 24%, rgba(204,183,90,1) 38%, rgba(204,183,90,1) 62%, rgba(237,233,196,1) 78%, rgba(178,154,37,1) 100%);
background: -o-linear-gradient(left, rgba(178,154,37,1) 0%, rgba(237,233,196,1) 24%, rgba(204,183,90,1) 38%, rgba(204,183,90,1) 62%, rgba(237,233,196,1) 78%, rgba(178,154,37,1) 100%);
background: -ms-linear-gradient(left, rgba(178,154,37,1) 0%, rgba(237,233,196,1) 24%, rgba(204,183,90,1) 38%, rgba(204,183,90,1) 62%, rgba(237,233,196,1) 78%, rgba(178,154,37,1) 100%);
background: linear-gradient(to right, rgba(178,154,37,1) 0%, rgba(237,233,196,1) 24%, rgba(204,183,90,1) 38%, rgba(204,183,90,1) 62%, rgba(237,233,196,1) 78%, rgba(178,154,37,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b29a25', endColorstr='#b29a25', GradientType=1 );         
       
 }

 .header-border{
     position:relative;
     bottom:0px;
     width:100%;
     z-index:1200;
     height:7px;
 background:url("../images/system/border1.jpg");
  background-repeat:repeat-x;
  background-position-y:bottom;
    background-color:#134cbf;
  

 }

footer{
     box-sizing:border-box;
    /*position:fixed;*/
    width:100%;
    bottom:0px;
    height:5px;
  /*background:url("images/barB_internal1.gif");
  background-repeat:repeat-x;*/

    background:url("../images/system/border1.jpg");
  background-repeat:repeat-x;
  background-position-y:top;
    /*background-color:#000;*/
    padding:0px 15px ;
    z-index:1000;
}

#nav{
      box-sizing:border-box;

margin-top:0px;
padding:0px 0 5px 0;
 width:80%;
min-height:30px;
/*background-color:#dddddd;*/
text-align:center;
 z-index:1000;
 margin-left:10%;
 
}

#menu{
    position:relative;
    z-index:21;
    display:inline-block;
    text-align:center;
}



.menu-item{
    font-family:Bitter,'Trebuchet MS',serif;
    font-size:.5em;
    color:#dbce66;
    text-shadow: -3px 0px 3px rgba(0, 0, 0, 0.35);
   margin-left:25px;
   margin-top:7px;
   float:left;
}

.menu-item:hover{
    color:#fff !important;
    cursor:pointer;
}

   

#main-content{
    margin-top:-7px;
    background-color:#6699ff;
}

#bkgrdWrapper {
    width: auto;
    position: relative;
    box-sizing: border-box;
    /*margin-left: 10%;
    width: 80%;*/
    -webkit-box-shadow: 0px 0px 81px 0px rgba(255,255,255,1);
    -moz-box-shadow: 0px 0px 81px 0px rgba(255,255,255,1);
    box-shadow: 0px 0px 81px 0px rgba(255,255,255,1);
}

.content-wrapper{
  position:relative;
  overflow:hidden;
   /*min-height:600px;*/
     box-sizing:border-box;
     margin-left:10%;
   width:80%;
   
   background: rgba(255,220,115,1);
background: -moz-linear-gradient(left, rgba(255,220,115,1) 0%, rgba(255,231,178,1) 36%, rgba(255,231,178,1) 66%, rgba(255,220,115,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,220,115,1)), color-stop(36%, rgba(255,231,178,1)), color-stop(66%, rgba(255,231,178,1)), color-stop(100%, rgba(255,220,115,1)));
background: -webkit-linear-gradient(left, rgba(255,220,115,1) 0%, rgba(255,231,178,1) 36%, rgba(255,231,178,1) 66%, rgba(255,220,115,1) 100%);
background: -o-linear-gradient(left, rgba(255,220,115,1) 0%, rgba(255,231,178,1) 36%, rgba(255,231,178,1) 66%, rgba(255,220,115,1) 100%);
background: -ms-linear-gradient(left, rgba(255,220,115,1) 0%, rgba(255,231,178,1) 36%, rgba(255,231,178,1) 66%, rgba(255,220,115,1) 100%);
background: linear-gradient(to right, rgba(255,220,115,1) 0%, rgba(255,231,178,1) 36%, rgba(255,231,178,1) 66%, rgba(255,220,115,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdc73', endColorstr='#ffdc73', GradientType=1 );

}


   .title-wrapper{
       /*position:relative;
       z-index:50;*/
   }

#title{
   
margin-top:7px;
padding:5px;
background-color:#6c2a8c;
min-height:40px;
 text-align:center;
}



#title span{
    /*margin-left:20%;*/
   position:relative;
   z-index:1500;
    text-shadow: 0px -4px 2px rgba(0, 0, 0, 0.55);
     font-family:Bitter,'Trebuchet MS',serif;
    color:#ffecb2;
    font-size:1.9em;
    font-weight:bold;
}

#description{
    position:relative;
    z-index:1000;
    background-color:#ffecb4;
    min-height:15px;
    border-bottom:solid 2px #cebc72; 
    font-family:Verdana,sans-serif;
    font-weight:bold;
    font-size:.8em;
    text-align:center;
    padding:8px 10% 8px 10%;


  background: rgba(207,189,115,1);
background: -moz-linear-gradient(left, rgba(207,189,115,1) 0%, rgba(255,236,178,1) 36%, rgba(255,236,178,1) 66%, rgba(207,189,115,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(207,189,115,1)), color-stop(36%, rgba(255,236,178,1)), color-stop(66%, rgba(255,236,178,1)), color-stop(100%, rgba(207,189,115,1)));
background: -webkit-linear-gradient(left, rgba(207,189,115,1) 0%, rgba(255,236,178,1) 36%, rgba(255,236,178,1) 66%, rgba(207,189,115,1) 100%);
background: -o-linear-gradient(left, rgba(207,189,115,1) 0%, rgba(255,236,178,1) 36%, rgba(255,236,178,1) 66%, rgba(207,189,115,1) 100%);
background: -ms-linear-gradient(left, rgba(207,189,115,1) 0%, rgba(255,236,178,1) 36%, rgba(255,236,178,1) 66%, rgba(207,189,115,1) 100%);
background: linear-gradient(to right, rgba(207,189,115,1) 0%, rgba(255,236,178,1) 36%, rgba(255,236,178,1) 66%, rgba(207,189,115,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfbd73', endColorstr='#cfbd73', GradientType=1 );
}

    #description.about {
        background: #ffe7b2;
        border-bottom: none !important;
        background: rgba(255,220,115,1);
        background: -moz-linear-gradient(left, rgba(255,220,115,1) 0%, rgba(255,231,178,1) 36%, rgba(255,231,178,1) 66%, rgba(255,220,115,1) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,220,115,1)), color-stop(36%, rgba(255,231,178,1)), color-stop(66%, rgba(255,231,178,1)), color-stop(100%, rgba(255,220,115,1)));
        background: -webkit-linear-gradient(left, rgba(255,220,115,1) 0%, rgba(255,231,178,1) 36%, rgba(255,231,178,1) 66%, rgba(255,220,115,1) 100%);
        background: -o-linear-gradient(left, rgba(255,220,115,1) 0%, rgba(255,231,178,1) 36%, rgba(255,231,178,1) 66%, rgba(255,220,115,1) 100%);
        background: -ms-linear-gradient(left, rgba(255,220,115,1) 0%, rgba(255,231,178,1) 36%, rgba(255,231,178,1) 66%, rgba(255,220,115,1) 100%);
        background: linear-gradient(to right, rgba(255,220,115,1) 0%, rgba(255,231,178,1) 36%, rgba(255,231,178,1) 66%, rgba(255,220,115,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdc73', endColorstr='#ffdc73', GradientType=1 );
    }


    #prefooter{
    position:relative;
    z-index:1;
    box-sizing:border-box;
    background-color:#ffecb4;
   height:20px;
    border-top:solid 2px #cebc72; 
    font-family:Verdana,sans-serif;
    font-weight:bold;
    font-size:.65em;
    text-align:center;
    padding:3px 2px;


  background: rgba(207,189,115,1);
background: -moz-linear-gradient(left, rgba(207,189,115,1) 0%, rgba(255,236,178,1) 36%, rgba(255,236,178,1) 66%, rgba(207,189,115,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(207,189,115,1)), color-stop(36%, rgba(255,236,178,1)), color-stop(66%, rgba(255,236,178,1)), color-stop(100%, rgba(207,189,115,1)));
background: -webkit-linear-gradient(left, rgba(207,189,115,1) 0%, rgba(255,236,178,1) 36%, rgba(255,236,178,1) 66%, rgba(207,189,115,1) 100%);
background: -o-linear-gradient(left, rgba(207,189,115,1) 0%, rgba(255,236,178,1) 36%, rgba(255,236,178,1) 66%, rgba(207,189,115,1) 100%);
background: -ms-linear-gradient(left, rgba(207,189,115,1) 0%, rgba(255,236,178,1) 36%, rgba(255,236,178,1) 66%, rgba(207,189,115,1) 100%);
background: linear-gradient(to right, rgba(207,189,115,1) 0%, rgba(255,236,178,1) 36%, rgba(255,236,178,1) 66%, rgba(207,189,115,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfbd73', endColorstr='#cfbd73', GradientType=1 );
}




#content {
    /*min-height:600px;*/
    height: 100%;
    min-height: 300px;
    position: relative;
    overflow: hidden;
   
}

.inner-content{
    padding:10px 20px;
    position:relative;
    z-index:2;
    

}

iframe {
border:none !important;
overflow:hidden;
}

.left{
float:left;
}

.right{
float:right;
}


.text-left{
text-align:left;
}

.text-right{
text-align:right;
}

.bkgLeft{

    position:absolute;
    z-index:0;
    width:45%;
    height:100%;
    left:-70px;
    top:100px;
     background-image:url('../images/system/leftRibbon.png');
     background-repeat:repeat-y;
     opacity:.2;
     background-position-x:left;
    
}

.bkgRight{

    position:absolute;
    z-index:0;
    width:45%;
    height:100%;
    right:-70px;
    top:100px;
     background-image:url('../images/system/rightRibbon.png');
     background-repeat:repeat-y;
     opacity:.2;
     background-position-x:right;
    
}


  
.heading{
    clear:both;
    text-align:center;
     font-family:JI-Brunts,Bitter,serif;
  font-weight:bold;
    font-size:1.8em; 
    color:#a6c3ff;
    /*a6c3ff*/
        text-shadow: -3px 0px 0px #12367e,
            3px 0px 0px #12367e,
          0px 3px 0px #12367e,
           0px -4px 0px #12367e,
         
            
                1px -3px 2px #12367e,
             -1px -3px 2px #12367e,
          1px 3px 0px #12367e,
             -1px 2px 8px #12367e,
            
             3px 3px 0px #12367e,
         -3px -3px 2px #12367e,
             -3px 3px 3px #12367e,
             3px -3px 0px #12367e;
        margin-top:15px;
        position:relative;
}

.heading img{

    width:95%;
}

 .underscore {
    text-align:center; 
    margin-top:-24px ; 
    margin-bottom:20px;
         }
    

.boldtext{
    font-family:Verdana,sans-serif;
    color:#202020;
    font-size:1.2em;
    text-align:center;
}




.link-list{

 width:80%;
    text-align:center;
       
  position: relative;
  margin-left: 10%; 
 
}

.link-item{
    display:inline-block;
    margin:15px;
}

 .link-item a i{

    color:#0256bd;
}

 .link-item:visited a i{

    color:#0256bd;
}

 .link-item:hover a i{

    color:#505050;
}


.link-item img{
    height:72px;
}

.link-item .link-name{
    font-size:.8em;
    font-weight:bold;
    width:170px;
   
    /*height:70px;*/
}

.for-teachers .link-item .img-wrapper img {
margin:0px;
display:block;
}



.for-teachers .link-item .img-wrapper {
    display: inline-block;
    padding: 4px ;
}

    .for-teachers .link-item .img-wrapper:hover {
        background: #d1b839;
        background: -moz-linear-gradient(top, #d1b839 0%, #867004 55%, #867004 57%, #d1b839 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, #d1b839), color-stop(55%, #867004), color-stop(57%, #867004), color-stop(100%, #d1b839));
        background: -webkit-linear-gradient(top, #d1b839 0%, #867004 55%, #867004 57%, #d1b839 100%);
        background: -o-linear-gradient(top, #d1b839 0%, #867004 55%, #867004 57%, #d1b839 100%);
        background: -ms-linear-gradient(top, #d1b839 0%, #867004 55%, #867004 57%, #d1b839 100%);
        background: linear-gradient(to bottom, #d1b839 0%, #867004 55%, #867004 57%, #d1b839 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1b839', endColorstr='#d1b839', GradientType=0 );
    }


.button-list{
   
   width:100%;
    text-align:center;
     /*float: right;*/    
  position: relative;
  left: -50%; 

}

   

.btn-wrapper{

display:inline-block;
margin-right:1%;
margin-top:10px;
width:22%;
  padding-bottom:15px;
  min-width:265px;
}

.challenges .btn-wrapper {
    display: inline-block;
    /*float:left;*/
   
}


.games .btn-wrapper {
    display:inline-block;
    /*display: block;
    float: left;*/
}

.button-list.games {
    margin-left:2%;

}

.button-list.games.comics {
    margin-left: -2%;
}    
    
    .challenges .textlink {
    font-size: 1em;
    font-weight: bold;
    color: #065d9d;
}

    .challenges .textlink:hover {
        color: #444;
        cursor: pointer;
    }

.button-list .desc{

    width:90%;
    margin-left:5%;
    margin-top:15px;
   text-align:justify;
   font-weight:bold;
   font-size:.8em;
    overflow:hidden;
}

.button-wrapper-narrow {

    display:inline-block;
    margin-top: 0px;
    width: 22%;
    padding-bottom: 15px;
    min-width: 265px;
    margin-left:-3%;

}
  


   




.button-list-inner{
    width:90%;
    /*float:right;*/
    position: relative;
  left: 56%;
  top:0px;
  text-align:center;
      vertical-align:top;
     /*position: relative;
  left: 50%;

          width:90%;
     */
     /*display:inline-block;
margin-left:auto;
margin-right:auto;*/
}

    .button-list.middle {
    margin-left:-1.0%;
    }
    .button-list.bottom {
    margin-top:-40px;
    }


.spacer{

    height:25px;
}

.margintop{

    margin-top:20px;
}



#inputOverlay{

    z-index:25 !important;

}

#pasteField {
     /*position: static !important;*/ 
     top: -10px; 
     left: -10px; 
     height:50px !important; 
     width: 50px !important; 
     opacity: 0 !important; 
}
/*Views*/

/*Intro*/

.intro-wrapper {
    margin-top:-3px;
    position:relative;   
    width:100%;
    height:555px;
    background-image: url('../images/system/bg-blue.jpg');
background-position-x:center;
background-position-y:top;
/*background-size:cover;*/
background-repeat:no-repeat;
  text-align:center;

}

#introText{
   
  margin-top:50px;
   margin-bottom:30px;
     font-family:Bitter,'Trebuchet MS',sans-serif;
     width:275px;
     font-size:1.1em;
    margin-left:auto;
     margin-right:auto;
     padding-left:80px;
     text-align:left;
}


    #introText .subhead {
        font-family: Bitter,serif;
        color: #990000;
        font-weight: bold;
        font-size: 1.3em;
        margin-bottom: 5px;
    }

#logoLrg{
    position:absolute;
    left:10px;
    top:10px;
    width:340px;
    
}

#logoLrg .tm{
    box-sizing:border-box;
    position:absolute;
    border:solid 1px #000000;
    font-size:8px;
    color:#000000;
    right:42px;
    bottom:92px;
    border-radius:50%;
    padding:2px;
    font-weight:bold;
    width:15px;
}

#logoLrg img{

    width:100%;


}

#introMenu{
  /*margin-top:160px;*/
    display:inline-block;
    /*position:relative;*/
    /*left:5%;*/
    /*top:34%;*/
   
}


.menus{
float:left;
margin-top:50px;
margin-left:150px;
}


#imgWrapper {
 margin-left:-55px;
    margin-top:0px;
    float:right;
     /*width:519px;
    height:351px;*/

      width:480px;
    height:325px;
     background-color:#ffecb2;
     position:relative;
      border-radius:8px;
}

#imgFrame{

   
    position:absolute;
    z-index:2000;
    /*width:519px;
    height:351px;*/
     width:480px;
    height:325px;
    border:solid 8px #b39c26;
    border-radius:8px;
    pointer-events:none;
}

#imgWrapper img{

    position:absolute;
    /*height:357px;*/
    
    height:331px;
    left:2px;
    top:2px;
    z-index:1900;
}


/*Challenges*/

.challenges .ccButton, .challenges .button-wrapper-narrow {
margin-right:auto !important;
margin-left:auto !important;
}

.challenges .btn-header {
    font-family: Bitter;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 0px;
    color: #990000;
   
}

.challenges .btn-panel {
    width:375px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    padding:20px;
 /*background-color: #bca73f;*/
 background-color: #dcc75f;
 border-radius:15px;
 margin-top:15px;
 box-sizing:border-box;
}

 .challenges .cell .desc {
    min-height:90px;
    width:80% !important;
    margin-left:10% !important;
    }

.button-list.challenges {

position:static !important;

}

    .button-list.challenges.middle {
        margin-left: auto !important;
        margin-right: auto !important;
        width:95% !important;
    }


.challenges .button-list-inner {
    position: static !important;
    width:100%;
}

.btn-list-row {
    display: table-row;
    width: 100%;
}

.challenges .cell {

display:table-cell !important;
}

  /*Games*/

    .btn-wrapper .desc img{
        position:relative;
        width:100%;
    }

  .button-list.games .desc{
      position:relative;
      height:350px;
  }


#gamesList {
background-color:transparent !important;
border:none !important;

}


.game-banner {
position:relative;
width:80%;
margin-left:10%;
border:solid 3px rgba(178,154,37,1);
margin-top:25px;
margin-bottom:50px;
}

#popupContainer .close {
    position: absolute;
    right: 7px;
    top: 7px;
    cursor: pointer;
    color: rgba(204,183,90,1);
    font-weight: bold;
    font-size: 15px;
    line-height:1.6;
    background-color:rgba(220,220,220,.18);
    width:25px;
    height:25px;
    border-radius: 50% 50%;
}

    #popupContainer .close:hover, #popupContainer .close-media:hover {
        color: rgba(255,220,115,1)
    }

#popupContainer .close-media {
    position: absolute;
    right: 7px;
    top: 7px;
    cursor: pointer;
    color: rgba(204,183,90,1);
    font-weight: bold;
    font-size: 15px;
    line-height: 1.6;
    background-color: rgba(220,220,220,.25);
    width: 25px;
    height: 25px;
    border-radius: 50% 50%;
    z-index:100;
}


    .game-banner img {
width:100%;
display:block;
}

    .game-banner .info-link {
       position:absolute;
       z-index:5;
       bottom:-16px;
       left:10%;
    }

    .game-banner .game-link {
        position: absolute;
        z-index: 5;
        bottom: -16px;
        right: 10%;
    }

.game-banner .game-text {
    position: absolute;
    z-index: 6;
    bottom: 30px;
    right: 7%;
    font-size: 14px;
    color: #fff;
    width: 28.5%;
    text-align: center;
    /*text-shadow: -4px 2px 10px rgba(44, 44, 44, 0.9);*/
    text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.98);
}

.game-banner .game-subtitle {
    position: absolute;
    top: 48%;
    left: 15%;
    z-index: 6;
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    text-shadow: 3px 3px 5px rgba(4, 4, 4, 0.95);
}


    .game-banner .game-text.large {
            font-size: 30px;
            font-weight:bold;
        }

        .game-banner .game-text.dark {

            color:#000;
            text-shadow: 3px 3px 5px rgba(255, 255, 255, 0.95);
        }

    .game-banner .game-text.desc-right {
            right: 7%;
            left:auto;
        }

        .game-banner .game-text.desc-left {
            left: 4%;
            right:auto;
        }
        .game-banner .game-text.desc-left-hi {
            left: 4%;
            right:auto;
            top:25px;
        }


        .narrow.games .wiz-nav {
    width: 120px !important;
    height: 22px !important;
    left: initial !important;
}


.k-window.gameinfo-window {
    /*background-image: url('../images/system/desertoasis_popup.jpg') !important;*/
    background-image:none !important;
    background-repeat: no-repeat;
    background-size: contain !important;
    min-height: 550px !important;
    background-color: #fff6cb !important;
    background-position-x: 0px !important;
    /*top: 18%!important;*/
}

    .k-window.gameinfo-window .k-window-content {
        padding: 0px !important;
        background-color: #fff6cb !important;
    }

.k-window #popupContainer {
position:absolute;
top:-37px;
background-repeat:no-repeat;
min-height:550px;
background-size:contain;
width:100%;
box-sizing:border-box;
padding:30px;
text-align:center;
}

.k-window #popupContainer .advance{
    position: absolute;
    bottom:27%;
}

    .k-window #popupContainer .advance:hover {
        cursor: pointer;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter: drop-shadow(5px 5px 5px #222);
    }

    .k-window #popupContainer .advance.left {
        left: -75px;
    }

    .k-window #popupContainer .advance.right {
        right: -75px;
    }

    .k-window #popupContainer .desc {
        margin-top: 14.5%;
        margin-bottom: 2%;
        color: #202020;
        font-size: 1.2em;
      
        text-align: left;
    }
    .k-window #popupContainer .desc2 {
        margin-top: 2%;
        margin-bottom: 2%;
        color: #202020;
        font-size: 1.0em;
        height: auto;
        overflow-y: scroll;
        text-align: left;
        
    }


.desc2::-webkit-scrollbar {
    width: 12px;
}

/*::-webkit-scrollbar-button {
background:#806b00;
width:15px;
color:black;
content:"^";
}*/

.k-window #popupContainer .desc2::-webkit-scrollbar-track {
    /*border: 1px solid #000;*/
    /*padding: 2px 0;*/
    width: 12px;
    background: #e5daa9;
}

.desc2::-webkit-scrollbar-thumb {
    /*border: 1px solid #000;*/
    /*padding: 2px 0;*/
    background: #cfbf70;
    border-radius: 3px;
}
.desc2::-webkit-scrollbar-thumb {
    /*border: 1px solid #000;*/
    /*padding: 2px 0;*/
    background: #cfbf70;
    border-radius:3px;
}


        .k-window #popupContainer .desc2 .subhead {
            font-size: .85em;
            font-weight:bold;
            margin-top:10px;
        }

        .k-window #popupContainer .desc2 .subtext {
            font-size: 0.75em;
            font-weight: normal;
           
        }

.slide-scroller {
    margin-top: 25px;
    position: relative;
    height: 205px;
    width: 95%;
    left: 2.5%;
   
}

.slide-wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
   
    overflow: hidden;
}

.slides {
width:500%;
height:100%;
background-color:transparent !important;
border:none !important;

}
.slides img {
float:left ;
height:98%;
margin-right:25px;
}

.pop-buttons {
position:absolute;
width:100%;
height:30px;
bottom:0px;
left:0px;
}


.video-link {
   position:absolute;
    left:35px;
}
.win-link {
    position: absolute;
    right: 20px;
    width:180px !important;
}

.mac-link {
    position: absolute;
    right: 250px;
    width: 180px !important;
}

    .win-link.narrow .wiz-nav, .mac-link.narrow .wiz-nav {
        height: 22px !important
    }

.banner-link {
margin-top:-25px !important;
}

#popupContainer #mediaplayer {
    display:none;
    position: absolute;
    left: 7%;
    top: 30px;
    width: 86%;
    z-index: 10;
    border: solid 7px #fff6a8;
    box-sizing: border-box;
}

.k-mediaplayer-media {
  
}


/*COMICS*/
.comics .btn-wrapper {
    display: block;
    width: 45%;
    float: left;
}

    .comics .btn-wrapper:first-child{

        margin-left:6%;
    } 
    
    
    
    
    
    .button-list.comics .desc {
        position: relative;
        height: 275px;
    }

.button-list.games .detail {
    margin-top: -20px;
   padding-left:25px;
   padding-right:25px;
   text-align:left;
}

.button-list.comics .desc img {
    /*height: 180px;*/
    border: solid 3px #806b00;
    box-sizing: border-box;
}

.button-list.comics .ccButton {
top:95px !important;
}


/*math*/
.math-text {
    padding: 20px 35px;
    
}

  /*cipher grid*/

  .cgrid-label:hover{
      /*cursor:pointer;*/
  }

 .cipher-gridDG .items-hidden{
     width:98%;
    
      position:absolute;
      left:1%;
      
  }

 .items-hidden:hover{

     cursor:default !important;
 }

  .cipher-gridDG  .cgrid-item{

      height:425px;
  }
  

   .cipher-gridDG .k-grid-header
{
   padding: 0 !important;
}

 .cipher-gridDG .k-grid-content
{
   overflow-y: visible;
}


   .cipher-grid-wrapper{
       box-sizing:border-box;
       margin-top: 15px;
       margin-bottom:20px;
       width:96%;
       margin-left:2%;
       border:solid 4px #154be2;
       border-radius:10px;
   }

  .addnewbtn{

     text-align:right;
     margin:10px 10px 15px 5px;
 }

  .submit-message{
      margin-right:20px;
  }

.group-message {
    margin-right: 20px;
    margin-top:5px;
}

  #ddlCipherType .k-dropdown{

      width:170px !important;
  }

.items-hidden .diff {
float:left;
}

.items-hidden .keyrev {
    float: left;
    margin-left:175px;
}

.items-hidden .encby {
    margin-bottom:15px;
    margin-left: 90px;
    font-weight:bold;
}

/*Daily Message*/


@font-face {
    font-family: "Liberation";
    src: local("Liberation"),url("../Fonts/Liberation_Cypher_600.ttf") format("truetype");
    
}

.mono {
font-family:Liberation;
}

#tsDailyMssgs .ciphertext {

font-family:Liberation;
}

.todays-mssg .cgrid-cells .cgrid-cell {
    background-color: rgba(255,220,115,1)
}

.todays-mssg .ciphertext{
    font-family: Liberation;
}

.todays-mssg .copy-cipher {
/*display:none;*/
}

.today-text {
color:#990000 !important;
margin-left:30px ;
}

#tsDailyMssgs .daily-header {
text-align:left;
width:80%;
font-size:1.25em;
clear:both;
padding:5px 10% 25px 10%;
color:#336699;
}

.comment {
    font-size: .85em;
}

.details .comment {
padding-top:7px;
color:#336699;

}

.mgr-comment {
    padding-top: 2px;
    padding-bottom: 2px;
    color: #336699;
    font-size:.98em;
    
}

.msg-day-of-week {
float:left;
width:38px;
}

.more-mssgs-link {

text-align:center;
}

.diff-legend {
    width:80%;
margin-left:40px;
margin-top:15px;
font-size:12px;
}

.diff-legend .label{
    display:inline-block;
}

    .diff-legend .circle {
        display: inline-block;
        margin-right:4px;
    }

    .diff-legend .diff-level {
    display:inline-block;
    margin-left:7px;
    margin-right:7px;
    }



    #tsDailyMssgs.k-tabstrip, #tsDailyMssgs.k-tabstrip.k-header, .k-tabstrip.k-header {
        background-color: transparent !important;
    }

    #tsDailyMssgs.k-tabstrip .k-tabstrip-items .k-item {
       
        background: rgba(169,144,32,1) !important;
        background: -moz-linear-gradient(left, rgba(169,144,32,1) 0%, rgba(241,235,205,1) 34%, rgba(241,235,205,1) 68%, rgba(169,144,32,1) 100%) !important;
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(169,144,32,1)), color-stop(34%, rgba(241,235,205,1)), color-stop(68%, rgba(241,235,205,1)), color-stop(100%, rgba(169,144,32,1))) !important;
        background: -webkit-linear-gradient(left, rgba(169,144,32,1) 0%, rgba(241,235,205,1) 34%, rgba(241,235,205,1) 68%, rgba(169,144,32,1) 100%) !important;
        background: -o-linear-gradient(left, rgba(169,144,32,1) 0%, rgba(241,235,205,1) 34%, rgba(241,235,205,1) 68%, rgba(169,144,32,1) 100%) !important;
        background: -ms-linear-gradient(left, rgba(169,144,32,1) 0%, rgba(241,235,205,1) 34%, rgba(241,235,205,1) 68%, rgba(169,144,32,1) 100%) !important;
        background: linear-gradient(to right, rgba(169,144,32,1) 0%, rgba(241,235,205,1) 34%, rgba(241,235,205,1) 68%, rgba(169,144,32,1) 100%) !important;
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a99020', endColorstr='#a99020', GradientType=1 ) !important;
        border: solid 1px #806b00 !important;
    }

    #tsDailyMssgs.k-tabstrip .k-tabstrip-items {
    padding-left:30px !important;
    }


    #tsDailyMssgs.k-tabstrip .k-tabstrip-items .k-item:first-child {
        border-top-left-radius: 7px;
    }
     #tsDailyMssgs.k-tabstrip .k-tabstrip-items .k-item:last-child {
    border-top-right-radius:7px;
    }


        #tsDailyMssgs.k-tabstrip > .k-content {
        border: none;
        border-top: solid 3px #154be2  !important;
    }


    #tsDailyMssgs.k-tabstrip .k-content {
        background-color: transparent !important;
        padding: 15px 0px 35px 0px !important;
        margin: 0px !important;
    }


.message-edit .k-datepicker, .mgr-filters .k-datepicker  {
    border-radius: 8px;
    height: 22px !important;
}

.mgr-filters .k-datepicker {
margin-top:-5px;
}


    .message-edit .k-datepicker .k-input, .mgr-filters .k-datepicker .k-input {
        height: 15px !important;
        margin: 2px !important;
    }


        .message-edit .k-datepicker .k-input, .mgr-filters .k-datepicker .k-input {
            height: 15px !important;
            margin: 2px !important;
            font-size: .67em !important;
            line-height:1 !important;
        }


        .message-edit .k-picker-wrap, .mgr-filters .k-picker-wrap {
            height: 22px !important;
        }

            .message-edit .k-picker-wrap.k-state-default, .mgr-filters .k-picker-wrap.k-state-default, .mgr-filters .k-picker-wrap .k-input {
                border-radius: 8px;
            }

.message-edit .k-icon{
    margin-left: -4px !important;
    margin-top: -5px !important;
}

 .mgr-filters  .k-icon{
  
    margin-top: -9px !important;
}


#messageManagerGrid .k-dirty {
    border-style:none !important;
}


    /* COMMON GRID STYLES*/
    .msg-brd-admin-theme {
    max-width: 270px !important;
    word-break: break-all;
}

.k-grid-header, .cipher-gridDG .k-header, #jokesManagerGrid .k-header, #messageManagerGrid .k-header, 
#myGroupsGrid .k-header, .admin-grid .k-header, #myGroupsMemberGrid .k-header, #myGroupsLeaderGrid .k-header,
 .msg-board-report .grid-content .k-header, .grid-content .k-header ,.ccBadgeRulesGrid .k-header{
    /*background-color:#ffecb2 !important;*/
    background-color: #3c79f2 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: .85em !important;
    padding-top: 2px !important;
}

  #myGroupsMemberGrid .k-header a{

      color:#fff !important;
  }
    
  .admin-grid .k-pager-wrap, #jokesManagerGrid .k-pager-wrap,#messageManagerGrid .k-pager-wrap, #myGroupsGrid .k-pager-wrap, .grid-content .k-pager-wrap, .k-pager-wrap .k-link{

        /*background-color:#3c79f2 !important;*/
        background-color:#ffecb2;
  color:#000 !important; 
   }

  .admin-grid .k-header .k-link, #jokesManagerGrid .k-header .k-link, #messageManagerGrid .k-header .k-link, #myGroupsGrid .k-header .k-link,
    .msg-board-report .grid-content  .k-link, .grid-content .k-link, .ccBadgeRulesGrid .k-link{
 color:#ffffff !important;   
 padding-bottom:.2em !important;
    }

 .admin-grid td , #jokesManagerGrid td ,#messageManagerGrid td ,#myGroupsGrid td, .grid-content td, .ccBadgeRulesGrid td{
      border-bottom:solid 1px #806b00 !important;
      font-size:.8em;
      background-color:#ffecb2 !important;
  }

#myGroupsGrid .action{
     font-weight:bold;
     color:#474fcc;
 }

#myGroupsGrid .action:hover{
     color:#444;
     cursor:pointer;
 }

.grid-content .k-link, .grid-content .k-icon{
    color:#fff !important;
}


.mygroups-edit{

    padding:0px 20px;
}

.mygroups-edit .input-block{
    clear:both;
    padding-bottom:10px !important;
}


.mygroups-edit .spacer{
    clear:both;
}

.mygroups-edit .input-label.chk{

    margin-top:-5px;
}

.mygroups-edit .header{
     font-weight:bold;
     margin-bottom:15px;
 }
      .mygroups-edit .input-block{
          clear:both;
          padding-bottom:35px;
      }


.mygroups-edit input[type="checkbox"] {

margin-top:2px;

}

.mygroups-edit .k-textbox {

height:25px !important;

}

.mygroups-edit .input-group{
    clear:both;
    margin-bottom:15px;
    width:0px;
}



    .mygroups-edit  .chk-label{
          font-size:.8em;
         margin-top:0px;
         margin-right:7px;
         float:left;
      }

       .mygroups-edit  .input-label{
           color:#806b00;
            width:110px;
            text-align:right;
            margin-right:7px;
            font-size:.8em !important;
            font-weight:normal !important;
            padding-top:5px;
            float:left;
            width:150px;
            font-weight:bold !important;
            text-align:right;
            /*height:30px;*/
        }

       .mygroups-edit .inp-field{
            width:230px;
           float:left;
           text-align:left;
       }

       #grpInviteForm .profile-panel{

           font-size: .9em;
       }

.confirm-email {
display:none;

}

#createCompletePanel {
margin-top:25px;
}

.grp-mssg .input-label {
    width: 200px;
    color: #806b00;
    text-align: right;
    margin-right: 7px;
    font-size: .8em !important;
    font-weight: normal !important;
    padding-top: 5px;
    float: left;
    font-weight: bold !important;
    text-align: right;
}


.grp-mssg .input-wide input{

    width:500px;


}

.grp-mssg textarea {
    margin-top:10px;
    margin-bottom:10px;
    width: 500px !important;
    height: 115px !important;
}

.join-group {

    font-size:.7em !important;
}

.join-group   .k-dropdown-wrap{

    font-size:.95em !important;
    /*height:.85em !important;*/
    line-height:1.2 !important;
  
}

.ddl-content-small{

    font-size:.9em;
}


.inp-field > .ddl-content-small {
    font-size: .8em;
}

#newTheme{
    display:none;
}

.join-group .input-block{
    margin-bottom:5px;
    height:18px;
}

 .join-group   .input-label{
           color:#806b00;
            width:110px;
            text-align:right;
            margin-right:7px;
            font-size:.95em !important;
            font-weight:normal !important;
            padding-top:5px;
            float:left;
            width:150px;
            font-weight:bold !important;
            text-align:right;
            /*height:30px;*/
        }

      .join-group  .inp-field{
            width:230px;
           float:left;
           text-align:left;
           
       }

        .join-group .inp-field input {
        height :20px !important;
        }


  /*************************************************/

  #myGroupsGrid, #myGroupsMemberGrid, #myGroupsLeaderGrid {
      width:94%;
     clear:both;
        border:solid 3px #12367e;
    border-radius:5px;
    padding:2px;
    background-color:#ffecb2;
    margin:20px 3% 20px 3%;
  }

  #myGroupsGrid td, #myGroupsMemberGrid td, #myGroupsLeaderGrid  td{
      border-bottom:solid 1px #806b00 !important;
      font-size:.7em;
      background-color:#ffecb2 !important;
  }


  .create-group{
      float:right;
      margin:5px 2% 10px 5px;
  }

  .open-join-group{
      float:right;
      margin:5px 2% 10px 5px;
  }

   #jokesManagerGrid,  #messageManagerGrid{
       font-size:.9em !important;

   }

   .k-edit-form-container textarea{

       width:89%;
       height:45px;
   }


#jokesManagerGrid .joke {
    color: #0044cc;
    width: 220px;
}

#jokesManagerGrid .key {
    color: #0044cc;
    width: 130px;
}

     #jokesManagerGrid .punchline{
        color:#000;
        font-style:italic;
        width:220px;
    }

#jokesManagerGrid .enc-punchline {
    color: #990000;
    width: 220px;
}

   .msg-board-report .grid-wrapper{
      width:94%;
     
        border:solid 3px #12367e;
    border-radius:5px;
    padding:2px;
    background-color:#ffecb2;
    margin:20px 3% 20px 3%;
  }

   .msg-board-report .grid-content .k-pager-wrap, #myGroupsGrid .k-pager-wrap{

        background-color:#ffecb2 !important;
  color:#000 !important; 
   }

  .msg-board-report .grid-content .k-link{
 color:#ffffff !important;   
 
    }

  .msg-board-report .grid-content td {
      border-bottom:solid 1px #806b00 !important;
      font-size:.8em;
      background-color:#ffecb2 !important;
  }

.cipher-grid-msg-wrapper {
    background-color: #fff6cc !important;
    width: 100%;
}

.cipher-grid-wrapper .k-link {
    /*color:#ffffff !important;*/
    color: #007cc0 !important;
}


  .cipher-grid-wrapper .k-widget{
     background-color:#fff6cc;
     font-size:.8em !important;
    }

 .cipher-gridDG td {
      border-bottom:solid 1px #806b00 !important;
      font-size:1em;
      background-color:#ffecb2 !important;
  }

 

  .cgrid-item{
      
      padding:3px 5px 2px 5px;
      border-bottom:solid 1px #806b00;
    margin-bottom:7px;  
      }
  .todays-mssg .cgrid-item{
      
     
      border-bottom:solid 0px #806b00;
      
      }

  .cgrid-item .col-headings span{

      font-size:11px;
      font-weight:bold;
      color:#303030;
      margin-right:5px;     
  }

   .cgrid-item .col-headings{
       float:left;
       margin-bottom:7px;
   }

     .cgrid-item .col-headingsDG{
       text-align:center;
       margin-bottom:7px;
       margin-left:auto;
        margin-right:auto;
        font-size:.75em;
   }

        .cgrid-item .col-headingsDG > span {
        
        margin-right:35px;
        }

  .cgrid-item .col-val{

      color:#12367e !important;
  }


  .cgrid-item .col-actions{
      float:right;
      margin-bottom:5px;
  }

  .cgrid-item .cipher-label{

      color:#303030 ;
      font-weight:bold ;
      font-size:1em ;
      margin-bottom:5px;
  }

.crack-cipher{
    margin-top:5px;
    margin-bottom:15px;
}
.eval-plain {
    margin-top: 20px;
}

.items-visible{
position:relative;
}

.return-to-tool {
    display:none;
}

    .items-visible .close-detail-icon {
        position: absolute;
        box-sizing: border-box;
        width: 20px;
        right: 3px;
        top: -2px;
        font-size:18px;
        display:none;
        z-index:100;
    }


.cgrid-cells .close-icon i{


}

 .cgrid-cells .close-icon:hover {
        cursor: pointer;
    }


    .hide-cipher,.hide-plain{
      display:none;
  }

  .diffcolor{
      float:left;
      margin-top:3px;
      margin-right:7px;
      background-color:#c0c0c0;
      width:8px;
      height:8px;
      border-radius:100%;
  }

  .diff-name{

      
  }


.cgrid-item .col-ciphertext {
    box-sizing: border-box;
    color: #990000;
    background-image: url("../images/system/paper_bg3.jpg");
    background-size: cover;
    padding: 10px 3% 10px 3%;
    border: solid 2px #990000;
    border-radius: 6px;
    margin: 10px 10% 20px 10%;
    width: 80%;
   
}

.col-ciphertext.grp-mssg {
    border: solid 2px #404040;
    color: #202020;
}

.cgrid-item .col-ciphertext .ciphertext {
    white-space: pre-wrap;
    word-wrap: break-word;
}


.col-val.ciphertext {
        color: #990000 !important;
        white-space: pre-wrap;
    }

 .cgrid-item .items-hidden{
     position:relative;
     display:none;
 }

.cgrid-item .items-hidden .details {

margin-left:11%;
margin-top:0px;
font-weight:bold;
}

.items-hidden .details.nopad {
margin-top:0px;

}

 .cgrid-item .col-ciphertextDG{
      box-sizing:border-box;
      color:#990000;
     background-image:url("../images/system/paper_bg3.jpg");
     background-size:cover;  
     padding:10px 3% 10px 3%;
   
     border:solid 2px #990000;
     border-radius:6px;
     margin:10px 2.5% 20px 2.5%;
     width:95%;

 }


.non-break {
white-space:nowrap !important;
display:inline-block;
}


 .cgrid-item .col-plaintext{
     box-sizing:border-box;
    
     color:#990000;
     background-image:url("../images/system/paper_bg3.jpg");
     background-size:cover;  
     padding:10px 3% 10px 3%;
     border:solid 2px #12367e;
     border-radius:6px;
     margin:10px 10% 20px 10%;
     width:80%;
 }

  .cgrid-item .col-plaintextDG{
     box-sizing:border-box;
     color:#990000;
     background-image:url("../images/system/paper_bg3.jpg");
     background-size:cover;  
     padding:10px 3% 10px 3%;
     border:solid 2px #12367e;
     border-radius:6px;
     margin:10px 2.5% 20px 2.5%;
     width:95%;
 }

 .cgrid-item .col-plaintext textarea{
     border-radius:6px;
     width:100%;
     height:70px;
 }

 .cgrid-item .col-plaintextDG textarea{
     border-radius:6px;
     width:100%;
     height:70px;
 }

 .cgrid-cells{

     margin-bottom:7px;
 }

  .cgrid-cells.msg{

     margin-bottom:0px;
 }

 .cgrid-item.jokes,.cgrid-item.msg{

     padding-top:0px;
     margin-bottom:0px;
 }

  .col-headings.msg{
     margin-bottom:0px !important;
 }

.k-listview > .k-state-selected {
    /*background-color:#ecdc90  !important;*/
    background-color: #fff6cc;
}

.k-listview > .k-state-selected .cgrid-cell{
/*background-color:#ecdc90  !important;*/
/*font-weight:bold !important;*/
}

.cgrid-item-open {
    background-color:#ecdc90  !important;
    font-weight:bold !important;
}

    .cgrid-item-open .items-hidden {
        background-color: #ecdc90 !important;
        font-weight: normal !important;
    }

  .cgrid-item.cracked .cgrid-cell{
      /*background-color:#ccbc70;*/
 
  }

  .k-listview .cgrid-item:hover .cgrid-cell{

      background-color:#ecdc90  !important;
  }

   .k-listview .cgrid-item:hover {

      background-color:#ecdc90  !important;
  }


.cgrid-cells .cgrid-cell{

     float:left;
     position:relative;    
     /*border:solid 1px #b29a25;*/
    border:solid 1px #ffffff;
     height:37px;
     margin-left:-1px;
     width:100px;
     background-color:#e8e0bc;
     box-sizing:border-box;
     
 }

 .cgrid-label{
     position:absolute;
     font-size:10px;
     padding: 2px 5px 2px 2px;
     background-color:#ffffff;
     color:#b29b24;
     opacity:.95;
     border-bottom-right-radius:4px;
     top:0px;
 }

.cgrid-cell .col-val {
    font-size: 13px;
    /*font-weight:bold;*/
    margin-top: 17px;
    text-align: left;
    padding-left: 3px;
    padding-right: 3px;
    color: #000000 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 25px;
    min-height: 37px;
}


.inactive .fa{
    color:#977c15;
    opacity:.4;
}


    .col-val.inactive {
        /*background-image: url('../images/system/checkmark_brown.png');
        opacity: .25;
        background-repeat:no-repeat;*/
       
    }

.col-val.locked {
    background-image: url('../images/system/checkmark_brown.png');
    opacity: .15;
    background-repeat: no-repeat;
    background-position-x:5px;
}


.col-val.unlocked {
    background-image: url('../images/system/checkmark_brown.png');
    opacity: 1;
    background-repeat: no-repeat;
    background-position-x: 5px;
}

.locked .fa{
    color:#977c15;
}

.unlocked .fa{
    color:#65861e;
}

/*.cgrid-cell .difficulty {
    position:absolute;
    left:17px;
    top:3px;
    box-sizing:border-box;
    width:27px;
    height:27px;
    padding:3px;
    border-radius:100%;
}*/

.cgrid-item:hover{
    cursor:pointer;
}

.cgrid-cell .difficulty {
    
    /*box-sizing:border-box;*/
   height:100%;
}


.col-headings.grp-mssg {
    width: 99.5%;
    box-sizing:border-box;
}

.cgrid-cell.grp-mssg-title {
    padding-left:33px;
    width: 100%;
}

.cgrid-cell.grp-mssg-title .cgrid-label{


}

    .col-headings.grp-mssg .cgrid-cell {
    background-color: #a6c3ff !important;
}


.cgrid-cell.open {
    border-bottom: none !important;
}

.difficulty .col-val{
    /*padding-top:15px;*/
    font-size:.85em;
}

.circle {
    box-sizing: border-box;
    border: solid 2px #000000;
    width: 10px;
    height: 10px;
    border-radius: 50% 50%;
}

.id .circle{
    margin-left:4px;
    
}

.easy {
    /*background-color: #ffff00 !important;*/
    background-color: #3C79F2 !important;
   
}

.medium {
    /*background-color:#aaff00  !important;*/
    background-color: #80ff00 !important;
}

.hard {
    background-color: #ffff00 !important;
}

 .expert{
    background-color:#ffaa00  !important;
}

  .insane{
    background-color:#ff0000  !important;
}

 .Easy{
    background-color:#68a058 !important;
}

 .Medium{
    background-color:#ddef38  !important;
}

 .Hard{
    background-color:#c62a00  !important;
}

 .Expert{
    background-color:#dd6312  !important;
}


 .joke-actions{

     margin-top:-10px;
     margin-bottom:20px;
 }

 .jokes .eval-plain{
     /*display:none;*/
 }
/* msg board widths*/



.cgrid-cell.icon {

    width:35px;
   
}

.cgrid-cell.id {

    width:120px;
    position:relative;
}

.cgrid-cell.ciphertype {

    width:205px;
}

.cgrid-cell.theme {

    width:355px;

}

.cgrid-cell.revealkey {
     position:relative;
    width:70px;
color:#3b754e;
}


    .cgrid-cell.revealkey .col-val div {
       width:auto;
       height:17px;
    }

    .cgrid-cell.revealkey .key {
        
        background-image:url("../images/system/key_unlocked.png");
        background-repeat:no-repeat;
        background-position:center center;
    }

    .cgrid-cell.revealkey .nokey {
        background-image: url("../images/system/key_locked.png");
        background-repeat: no-repeat;
        background-position: 18px 0px;
        background-size:contain;
    }

.ccJokesManager td .key {
    background-image:none !important;
}

td .key {
    background-image: url("../images/system/key_unlocked.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    min-height: 20px;
}

td .nokey {
    background-image: url("../images/system/key_locked.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    /*background-position: center center;*/
    background-size: contain;
    min-height: 20px;
}

.cgrid-cell.revealkey .fa-ban{
font-size:22px;
left:16px;
top:13px;
opacity:.5;
}

.cgrid-cell.revealkey .fa-key{
font-size:13px;

}

.cgrid-cell.decryptednum {

    width:110px;
}



.cgrid-cell.submittedby {

    width:240px;
   
}


.cgrid-cell.submittedby .col-val {
     text-align:left;
     margin-left:4px;
     overflow:hidden;
     
     white-space:nowrap;
}



.cgrid-cell.submittedon {

    width:120px;
}





.cgrid-cell.buttons {

    width:230px;
    padding-top:6px;
    padding-left:10px;
}

.cgrid-cell.ciphertype2 {

    width:150px;
}



.cgrid-cell.decryptednum2 {

    width:100px;
}


 .col-val.lrg{
   
font-size:1.1em !important;

}




 .current-cipher{
      padding:10px;   
    color:#990000;
    font-size:.9em;
    text-align:center;
 }

 .decrypt-item{
     width:100%;
     text-align:center;    
 }

 .btn-wrapper button{
     /*float:left;*/
 }

 .decrypted-text{

     width:80%;
     height:45px;
      border-radius:6px;
 }

 /*TEACHER ACTIVITIES*/

.iframe-wrapper iframe{

    position:relative;
}


/*CryptoClub*/

.cryptoclub{

    font-size:.9em;
}

.about .content-section{

font-size:.9em;

}

.about .content-section img{

    max-height:85px;
    width:auto;
    float:right;
}

.about .uic-logo  img{

margin-bottom:25px;
}


#treeSiteMap {
    margin: 20px 0px 20px 50px;
}



.map-item{
    color:#624a00 !important;
    font-size:1em;
}


.map-item i{
padding-right:5px;
font-size:.8em;
}

.level0{
font-size:1.2em;
font-weight:bold;
 color:#927a05 !important;
}


/*Contact Us*/

.contact .subhead{

    font-size:1em;
    color:#806b00;
    font-weight:bold;
}

.contact_icon{
    float:left;
    margin-right:8px;
}

.contact button{

    margin-left:120px;
}



/*USER PROFILE*/

.panels-wrapper{
    width:100%;
   margin-bottom:20px;
    text-align:center;
}

.panel-set{
     display:inline-block;
      box-sizing:border-box;
    width:46.5%;
    margin-left:1.2%;
   /*min-width:450px;*/
   
}

.panel-set:first-child {

    width:51%;
}
    .form-data-container{

    margin:auto;
    display:inline-block;
    /*width:100%;*/
}


.profile-panel{
    box-sizing:border-box;
    width: 99.5%;
    min-height:390px;
 
    margin-left: 1%;
    margin-top: 15px;
    margin-bottom: 20px;
    background-color: #ffecb2;
    border-radius: 15px;
    padding: 20px;
    -webkit-box-shadow: 4px 4px 14px 0px rgba(0,0,0,0.66);
    -moz-box-shadow: 4px 4px 14px 0px rgba(0,0,0,0.66);
    box-shadow: 4px 4px 14px 0px rgba(0,0,0,0.66);
}

    .profile-panel.user-stats {
        width: 96.5%;
    }


    .profile-panel.smallprofile {
        width: 75%;
        margin-left: 12.5%;
        min-height: 360px;
    }
    
    
    
    .user-profile .header {
        font-weight: bold;
        margin-bottom: 15px;
    }

.user-profile .gl-desc {
  margin-top:20px;
    display:inline-block;

}

.btn-groups {
display:none;
margin-bottom:15px;
}

.user-profile .input-block {
    clear: both;
    min-height: 25px;
    padding-bottom: 10px;
    
} 

      .chk-label{
          font-size:.8em;
         margin-top:7px;
         margin-right:7px;
         float:left;
      }

       .user-profile   .input-label{
           color:#806b00;
            width:165px;
            /*width:110px;*/
            text-align:right;
            margin-right:7px;
            font-size:.8em !important;
            font-weight:normal !important;
            padding-top:5px;
            float:left;
           
            font-weight:bold !important;
            text-align:right;
            /*height:30px;*/
        }

.leader-profile .input-label ,
    .registration .input-label{

           width:165px;
       }

       .user-profile .inp-field{
            width:230px;
           float:left;
           text-align:left;
       }


.encrypt-codename {
margin-top:8px;
margin-bottom:8px;

}

        .user-profile .inp-field.codename > div {
        
        margin-top:5px;
        width:285px;
        }


        .grp-leader-confirm, .verifying, .not-logged-in{
            font-size:1.2em;
            
            padding:35px 25px 50px 25px;
            text-align:center;

        }

        

.block-enc-codename {
    /*display:none ;*/
    /*width:450px;*/
}

    .block-enc-codename .inp-field.userprof {
        padding-top:6px;
        /*width:285px;*/

    }

    .block-enc-codename .inp-field .btn-line{
    margin-top:-4px;
    }
    
    
    
    
    
    .enc-codename-inp-wrapper {
            width: 290px;
            margin-top: 5px;
        }

/*.enc-codename-inp-wrapper {
    width: 275px;
    margin-top: 5px;
}*/

.user-profile .inp-field.codename {
    font-size: .8em;
    display:block !important;
}

.change-codename-wrapper {

/*float:right;*/
}





.leader-profile .inp-field input:not(.gender) {
    height: 25px;
    font-size: .9em;
    width: 275px !important;
}

.user-profile .inp-field input:not(.gender) {
    height: 25px;
    font-size: .8em !important;
    width: 225px;
}

.user-profile .k-textbox {
    min-width: 180px;
    border-radius: 5px;
}

.user-profile .cipher-select-wrapper .k-textbox {
    min-width: 120px;
}

.gender {
    height: auto;
    margin-top: 9px;
    font-size: .9em;
}


         .user-profile .inp-field.enc-codename-txt {
margin-top:5px;
         }

.user-profile .cipher-select-tools {
display:none;
margin-top:5px;

}


.user-profile-info {
    position:relative;
}

.group-leader-link{
	min-height:90px;
}

.save-user-profile {
    /*position: absolute;
    bottom: 10px;*/
    margin-left: -35px;
    margin-top:30px;
}



.resend-verification {
display:none;
font-size:.75em;
border:solid 1px #990000;
padding:15px;
width:80%;
margin-top:15px;
margin-left:10%;
}




    /* USER STATS*/
    .stats-tree {
    text-align: left;
}

.stats-headings {
    font-size: .7em;
    margin-bottom: 5px;
    margin-top: 20px;
    margin-right: 20px;
    /*margin-right: 45px;*/
}

.statheading{

    float:right;
   font-weight:bold;
 
}

    .statheading.points {
        width: 60px;
        text-align: right;
        margin-right:7px;
    }

    .statheading.completed {
        width: 70px;
        text-align: center;
    }

.stats-headings.games .statheading.points {
    width: 60px;
    margin-right: 40px;
}

.stats-headings.games .statheading.completed {
    width: 50px;
    
}






.total-web-points {
    color:#202020;
    font-weight: bold;
    font-size: .8em;
    text-align:right;
    margin-right:28px;
    /*margin-right:50px;*/

}

.stats-tree .header {
    text-align: center;
}

.stats-block{

    margin-bottom:3px;
}

.stats-tree .k-icon{
/*display:none !important*/
}

    .stats-tree .root {
        width: 350px;
        box-sizing: border-box;
        color: #fff;
        font-weight: bold;
        font-size: .8em;
        height: 25px;
        border-radius: 3px !important;
        background-color: #3C79F2;
        padding: 3px !important;
        margin-left: 30px ;
    }


        .stats-tree .root:hover{

cursor:pointer;
        } 
        
        
        .stats-tree .k-in .k-state-selected {
            border-radius: 4px !important;
            padding: 1px !important;
            margin-bottom: 0px !important;
            border-width: 0px !important
        }

        .stats-tree .root .icon{

            width:5%;
            float:left;
            text-align:center;
        }

        .stats-tree .root .item-title {
            width: 50%;
            
            margin-left: 1%;
            float: left;
            overflow:hidden;
            white-space:nowrap;
        }

        .stats-tree .root .completed {
            width: 13%;
            float: left;
            text-align:right;
        }

    .stats-tree .root .points {
        width: 25%;
        float: left;
        text-align: right;
        margin-right:20px;
    }




.stats-tree .stats-list{
    background-color: #FFDC73;
    box-sizing: border-box;
    width: 340px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 5px;
    margin-left: 35px;
}


.stats-list .ciphername {
    font-size: .8em;
    font-weight: bold;
    width: 40%;
    float: left;
}

.stats-list .results {
    float: right;
    width: 53%;
    padding-right: 13px;
    margin-bottom:10px;
}


#grpsYouOwnGrid.k-widget, #grpsYouLeadGrid.k-widget {
    border: none !important;
    background-color: transparent !important;
}

.grp-stats-list-wrapper {
    clear: both;
    font-size: .8em;
    margin-bottom: 7px;
    /*border-bottom: solid 3px #fff4d3;*/
    background-color: #FFDC73;
    padding:7px;
}



.grp-stats-list-wrapper .stats-nums {
    float: left;
}


.grid-titles .name {
    font-size: .75em;
    font-weight:bold;
    width: 55%;
    overflow: hidden;
    margin-right: 5px;
    text-align: left;
}

.grid-titles .members {
    font-size: .75em;
    font-weight: bold;
    width: 20%;
    overflow: hidden;
    margin-right: 5px;
    text-align: center;
}

.ltr-join-notif {

}


.grid-titles .mssgs {
    font-size: .75em;
    font-weight: bold;
    width: 20%;
    overflow: hidden;
    margin-right: 5px;
    text-align: center;
}



.profile-panel.group-stats{
    min-height: 0px !important;

}

.group-stats .stats-block {
   font-size:.75em;
}


.grid-titles {
    padding-bottom: 20px;
}

    .grp-stats-list-wrapper .stats-nums.name {
    width:55%;
    overflow:hidden;
    margin-right:5px;
    text-align:left;
    }

    .grp-stats-list-wrapper .stats-nums.members {
        box-sizing:border-box;
        width: 20%;
        overflow: hidden;
        margin-right: 5px;
        padding-right:5%;
        text-align: right;
    }

.grp-stats-list-wrapper .stats-nums.mssgs {
    box-sizing: border-box;
    width: 20%;
    overflow: hidden;
    margin-right: 5px;
    padding-right: 5%;
    text-align: right;
}


.stats-list .stats-nums {
    box-sizing: border-box;
    font-size: .7em;
    width: 49%;
    float: right;
    text-align: right;
}

.stats-list .stats-nums.count {
    
    width: 60%;
   
}

    .stats-list .stats-nums.points {
        width: 38%;
    }




.stats-list .diff-name {
    width: auto;
    text-align: right;
}

.stats-list .mssg-subtotal, .stats-list .jokes-subtotal {
    width: auto;
    text-align: right;
    border-top: dotted 1px #202020;
    margin-top: 3px;
    margin-bottom: 4px;
    padding-top: 2px;
    width: 100%;
    font-weight: bold;
}

.stats-list .subcount, .stats-list .subcount-mssg {
    float: left;
    width: 51%;
}

.stats-list .subpoints, .stats-list .subpoints-mssg {
    float: right;
    width: 42%;
}



#statsJokes .mssg-subtotal {
    width: auto;
    text-align: right;
    margin-top: 3px;
    margin-bottom: 4px;
    padding-top: 2px;
    width: 92%;
    font-weight: bold;
    font-size:.7em;
    margin-bottom:25px;
}

#statsMessages {
    margin-bottom: 25px;
}

#statsGroups .stats-list {
    margin-bottom: 25px;
}

#statsJokes .subcount, #statsJokes .submittedcount {
    float: left;
    width: 76.5%;
}

#statsJokes .subpoints, #statsJokes .submittedpoints {
    float: right;
    width: 20%;
}

.joke-stats-heading{

font-weight:bold;
font-size:.75em;
padding:4px;
margin-left:35px;
}



#statsGroups.k-widget{

    border:none !important;
    background-color:transparent !important;

}

.no-grp-stats{
    display:none;
    text-align:center;
    font-size:.9em;
    font-weight:bold;
}




        .bio-wrapper{
            display:none;
        }
        .bio-link{
            font-weight:bold;
            color:#000;
            margin-top:0px;
           
        }

        .bio-link:hover{
           cursor:pointer;
            color:#660099;
        }

        .bio{
            margin-left:15px;
            text-align:left;
            font-size:.85em;
        }

        .bio-name{

           
            margin:3px;
        }
        .yob{
            font-size:.8em;
        }

        #codenameList{
            background-color:transparent !important;
            border:none !important;
        }


div.k-window-content {

overflow:unset !important;
}


.cnameList {
    margin-left: 15px;
    font-size: .75em;
    text-align: left;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 15px;
    -moz-column-gap: 15px;
    column-gap: 15px;
    -webkit-column-width: 100px;
    -moz-column-width: 100px;
    column-width: 100px;
}


        .codename-change-wrapper{
            display:none;
        }


        .registration .k-invalid-msg{
            margin-left:5px !important;
            width:230px !important;
        }

         .join-group-info .header{
             text-align:center;
             font-size:1.2em;
         }
 .registration .k-textbox{

width:180px !important;
    font-size:.9em !important;
 }

  .registration .join-group-info{
      text-align:left;
      font-size:.8em;
  }
 .registration .label{

      color:#806b00;          
            text-align:left;
             font-size:1em !important;
              margin-top:15px; 
               margin-bottom:5px;      
            font-weight:bold !important;
          
 }

   .user-info  .k-dropdown, .group-leader .k-dropdown{

    font-size:.8em !important;
      line-height:1.2 !important; 
}
 
.group-leader{

    display:none;
}   
       


/*POINTS ADMIN*/

#pointsAdminForm{
    font-size:.9em;
}


#diffGrid{

width:300px;
}

#revealGrid {

width:350px;
}

/*#gameGrid0 {
    width: 350px;
}*/

#ciphGrid {
    width: 350px;
}

.lv-points {
     border: solid 1px #806b00 !important;
    padding: 10px;
    border-radius: 10px;
    margin-left: 5%;
    margin-top: 15px;
    margin-bottom: 20px;
    background-color: #ffecb2 !important;
   
    -webkit-box-shadow: 4px 4px 14px 0px rgba(0,0,0,0.66) !important;
    -moz-box-shadow: 4px 4px 14px 0px rgba(0,0,0,0.66) !important;
    box-shadow: 4px 4px 14px 0px rgba(0,0,0,0.66) !important;
}

#gameGrids .lv-points {
    width: 350px;
}


    .lv-points input{
width:60px;
height:20px !important;


    } 
    
    
    .lv-points button {
        height: 7px;
        padding-bottom: 7px;
    }
    
    
    .pt-item {
        margin-bottom: 10px;
        padding-bottom:5px;
        border-bottom: solid 1px #806b00;
    }

#pointsAdminForm .subtitle {
    font-family: Bitter,serif;
    font-size: 1.3em;
    color: #6b2a8c;
    font-weight: bold;
    margin-bottom: 10px;
}

#gameGrids .subtitle {
   
    font-size: 1.1em !important;
    margin-left:20px;
}


    /* JOKES SUBMIT*/
    .joke-input-panel{

    box-sizing:border-box;
    width:80%;
   
    padding:5%;
    margin:25px 10% 25px 10%;
    border: solid 2px rgba(178,154,37,1);
    border-radius:10px;
    background: rgba(255,221,117,1);


  


background: -moz-linear-gradient(top, rgba(255,221,117,1) 0%, rgba(255,242,189,1) 23%, rgba(255,242,189,1) 77%, rgba(255,221,117,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,221,117,1)), color-stop(23%, rgba(255,242,189,1)), color-stop(77%, rgba(255,242,189,1)), color-stop(100%, rgba(255,221,117,1)));
background: -webkit-linear-gradient(top, rgba(255,221,117,1) 0%, rgba(255,242,189,1) 23%, rgba(255,242,189,1) 77%, rgba(255,221,117,1) 100%);
background: -o-linear-gradient(top, rgba(255,221,117,1) 0%, rgba(255,242,189,1) 23%, rgba(255,242,189,1) 77%, rgba(255,221,117,1) 100%);
background: -ms-linear-gradient(top, rgba(255,221,117,1) 0%, rgba(255,242,189,1) 23%, rgba(255,242,189,1) 77%, rgba(255,221,117,1) 100%);
background: linear-gradient(to bottom, rgba(255,221,117,1) 0%, rgba(255,242,189,1) 23%, rgba(255,242,189,1) 77%, rgba(255,221,117,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdd75', endColorstr='#ffdd75', GradientType=0 );


}


.joke-input-panel .description{

    font-size:.85em;
    margin-top:15px;

}

        .joke-input-panel textarea {
            border-radius: 5px;
            height: 45px;
            width: 90%;
        }

.cipher-select{

    float:left;
    margin-right:20px;
    margin-top:7px;
}

.cipher-select-tools{

    font-size:13px !important;
    color:#806b00 !important;
   
    margin:30px 25px 25px 0px;;
    min-height:45px;
    width:100%;
    padding:15px;
    background-color:rgba(207,189,115,.5);
    border-radius:10px;
    box-sizing:border-box;

}



.user-profile .cipher-select-tools {
   
}


#encBtnContainer {
/*height:20px;*/
}

#btnGetCipherTool {
/*position:absolute;*/


}

#btnSubmitJoke {
    display: none;
    width: 175px;
    margin: 25px auto 20px auto;
}

#btnCheckEncryption{
   
    width:175px;
   margin:25px auto 20px auto;
}


#key_a.alpha{
    /*width:120px;*/
}
.keys-wrapper .k-widget{
    width:70px  !important;
 

}

 li.k-item {
   min-height:1em !important;
    margin:0;
    padding:0;
    line-height:1.2em !important;
}

.keys-wrapper .k-numeric-wrap, .keys-wrapper .k-numeric-wrap input {
   
    width: 65px !important;
    height: 18px !important;
    border-radius:5px !important;
   
    outline:none !important;

}

 .k-numerictextbox, .k-dropdown {
   
    border-color: transparent !important;
    
}


.user-profile .keys-wrapper .k-numeric-wrap, .user-profile .keys-wrapper .k-numeric-wrap input {
    min-width: 115px !important;
}


.keyb-wrapper {
margin-left:-9px;
}

    .keyb-wrapper.keyword {
        margin-left: 5px;
    }
.keya-wrapper.keyword {
    margin-left: 8px;
}

    .keya-wrapper.keyword #key_a, .keya-wrapper.keyword-long #key_a {
        width: 155px;
    }

    .keya-wrapper.affine-label {
        margin-left: 0px;
    }


.user-profile .keyb-wrapper.keyword-long {
    /*margin-left: -3px;*/
    margin-left: -38px;
}

.keyb-wrapper.keyword-long, .registration .keyb-wrapper.keyword-long {
    margin-left: -3px;
}



.keyb-wrapper.affine-label {
    margin-left: -9px;
}


.registration .keya-wrapper.keyword {

    margin-left:-2px;

}

.registration .keyb-wrapper.keyword {
    margin-left: 0px;
}



.registration .encBtnWrapper, .user-profile  .encBtnWrapper {
    clear: both;
}

.keys-wrapper input {
    width: 60px;
    height: 18px !important;
    font-size: .85em !important;
    padding-top: 0px !important;
    margin-top: 0px !important;
}

.cipher-select input{
     color:#806b00 !important;
    height:18px  !important;
    font-size:11px !important;
}

.keys-wrapper .k-dropdown{

    width:70px !important;
}

.keys-wrapper .k-dropdown  .k-icon {
margin-left:-8px;
}

#btnEncrypt{
    margin-top:7px;
}

/*****************************/






 /*ADMIN*/

 /*admin menu*/
 .admin-nav{
    width:95%;
    margin-left:2%;
}
.admin-nav .k-menu{
background-color:#ffecb2 !important;

}

.admin-nav .k-item{
 background-color:#ffecb2 !important;

}

.admin-nav .k-state-hover>.k-link{
background-color:rgba(255,220,115,1) !important;

}


 /*groups menu*/
 .groups-nav{
    width:100%;
   
    margin-left:0%;
}
.groups-nav .k-menu{
background-color:#ffecb2 !important;

}

.groups-nav .k-item{
 background-color:#ffecb2 !important;

}

.groups-nav .k-state-hover>.k-link{
background-color:rgba(255,220,115,1) !important;

}


/*admin main grid*/

.admin-grid{

}

 /*.admin-grid .k-grid-header,.admin-grid .k-header{
    background-color:#134cbf !important;
  color:#ffffff !important; 
  font-weight:bold !important;
  font-size:.85em !important;
  padding-top:2px !important;
     
        }*/

  /*.admin-grid  .k-link{
 color:#ffffff !important;    
  

    }*/


  .admin-grid.k-widget{
     background-color:#fff6cc !important;
     font-size:.8em !important;
    }

 .admin-grid td{
      border-bottom:solid 1px #806b00 !important;
      font-size:.8em;
  }

 
/* MY GROUPS*/

.my-groups{

    border:solid 3px #12367e;
    border-radius:5px;
    padding:2px;
    background-color:#ffecb2;
    margin:20px 3% 20px 3%;
}

.my-groups .k-widget {

    background-color:transparent;
}

.headers {
    height: 30px;
    background-color: #3c79f2;
    color: #fff;
}

.my-groups .header-text:first-child {
width:28%;
  margin-left:5px;
}

.my-groups .header-text:nth-child(2) {
width:18%;
}

.my-groups .header-text{
     float:left;
     border-right:solid 3px #ffecb2;
     width:25.75%;
     height:28px;
     color:#fff;
     text-align:center;
     font-weight:bold;
     font-size:.9em;
     padding:3px 0px 0px 0px;
     margin:2px 2px 2px 2px;
     box-sizing:border-box;
 }

 .header-text:last-child{
 border-right:none;

 }


 .group-section.allgroups span{
     margin-right:7px;
 }

.group-section.allgroups .label{

    margin-right:0px;
    font-weight:bold;
}


.my-groups .group-section:first-child {
    width: 28%;
}

.my-groups .group-section:nth-child(2) {
width:18%;
}

 .my-groups .group-section{
float:left;
width:26%;
font-size:.75em;
padding:7px;
background-color:#fff6cc;
margin:2px;
box-sizing:border-box;
height:85px;
overflow:hidden;
 }


  .group-details{
      margin-top:5px;
  }

 .group-details span{
     margin-right:5px;
      font-size:.9em;
 }

  .ccGroupsAdmin .action,.my-groups .action, .my-groups-member-grid .action, .my-groups-leader-grid .action{
     font-weight:bold;
     color:#474fcc;
 }

.ccGroupsAdmin .action:hover, .my-groups .action:hover,  .my-groups-member-grid .action:hover, .my-groups-leader-grid .action:hover{
     color:#444;
     cursor:pointer;
 }

 .action.edit-name{
     font-weight:normal;
     font-size:.8em;
 }
 .my-groups .edit-item{
     margin-bottom:3px;
 }


 /*LEADERBOARD*/

.leaderboard-wrapper-right {
position:absolute;
right:5px;
top:20px;
}

.leaderboard-title {
    margin-top: 20px;
    margin-left: 40px;
}

.leaderboard-title .group-name{
font-size:1.5em;
}

.leaderboard{

    border:solid 3px #12367e;
    border-radius:5px;
    padding:2px;
    background-color:#ffecb2;
    margin:20px 3% 20px 3%;
}

.leaderboard .k-widget {

    background-color:transparent;
}

.leaderboard th{
    display:none !important;
}

    .leaderboard td {
        border: none !important;
        padding:2px 2px 0px 2px !important;
        font-size:1em;
    }

    .headers{
     height:30px;
     background-color:#3c79f2;
     color:#fff;
   
           }

.leaderboard .header-text:first-child {
width:20%;
  margin-left:5px;
}

.leaderboard .header-text:nth-child(2) {
width:55%;
}

.leaderboard .header-text{
     float:left;
     border-right:solid 3px #ffecb2;
     width:20%;
     height:28px;
     color:#fff;
     text-align:center;
     font-weight:bold;
     font-size:.9em;
     padding:3px 0px 0px 0px;
     margin:2px 2px 2px 2px;
     box-sizing:border-box;
 }

 .header-text:last-child{
 border-right:none;

 }


.leaderboard .group-section:first-child {
width:20%;
 text-align:center;
}

.leaderboard .group-section:nth-child(2) {
width:55%;
}

.leaderboard .group-section:last-child{
 text-align:center;

 }

 .leaderboard .group-section{
float:left;
width:23%;
font-size:.75em;
padding:7px;
background-color:#fff6cc;
margin:2px;
box-sizing:border-box;
height:30px;
overflow:hidden;
 }




 /*Website report*/



 .member-web-report{

    border:solid 3px #12367e;
    border-radius:5px;
   
    background-color:#ffecb2;
    /*height:150px;*/
    margin:20px 1% 40px 1%;
}

.member-web-report .k-widget {

    background-color:transparent;
}



.member-web-report .header-group{
     float:left;
     border-right:solid 2px #806b00;
     width:20%;
     /*height:125px;*/
     color:#fff;
     text-align:center;
     font-weight:bold;
     font-size:.7em;
     padding:0px 0px 0px 0px;
     /*margin:2px 2px 2px 2px;*/
     box-sizing:border-box;
 }

.member-web-report  .header-text{
      height:40px !important;
     background-color:#3c79f2;
     padding-top:5px;
     color:#fff;
}

.member-web-report  .header-table{
display:table;
height:150px;
width:100%;
}

    .member-web-report .header-cell {
        box-sizing: border-box;
        display: table-cell;
        border: solid 1px #806b00;
        background-color: rgba(255,220,115,1);
        color: #000;
        vertical-align: middle;
        text-align: right;
       
        width: 24px !important;
        height: 150px;
        padding-right: 5px;
    }

.showcn-label {
    vertical-align: bottom !important;
    text-align: center !important;
    height: 155px !important;
    font-size:.8em !important;
}

.member-web-report .showcn, .member-web-report .hidecn {
    position: relative;
    z-index: 1000;
    cursor: pointer;
}

.member-web-report .header-table.codename {
    width: 101%;
}


    .member-web-report .header-group:first-child {
        /*width:14%;*/
        width: 116px;
    }

.member-web-report .header-group:nth-child(2) {

/*width:157px;*/
border:none !important;
width:0px !important;
}

.member-web-report .header-group:nth-child(3) {
width:28.7%;
}



.member-web-report .header-group:nth-child(4) {
width:15.9%;
}

    .member-web-report .header-group:nth-child(4) .header-cell:last-child {
    border-right:none;
    }

.member-web-report .header-group:nth-child(5) {
width:18.2%;
}

.member-web-report .header-group:nth-child(6) {
width:5.2%;
}
.member-web-report .header-group:nth-child(7) {
width:4%;
}

.vertical-text {
    box-sizing: border-box;
    /*display: inline-block;*/
    padding-bottom: 3px;
    padding-left: 1px;
    /*margin-top:0px;
    margin-left:9px;
   width:1px;
	transform: rotate(-90deg);
	transform-origin: left center 0;
    float:left;*/
    /*margin-top:-5px;
    margin-left:5px;
   width:1px;
	transform: rotate(90deg);
	transform-origin: left bottom 0;
    float:left;*/
    height: 100%;
    -ms-writing-mode: tb-lr;
    -webkit-writing-mode: vertical-lr;
    -moz-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    line-height: 10px;
    transform: rotate(-180deg);
    text-align: left;
    margin-bottom: 5px;
    margin-left: 3px;
}


.member-web-report .mg-pager{

    margin-top:25px;
}

.member-web-report .group-wrapper{

    font-size:.7em;
   
}





.member-web-report .item-table {
    display: table;
   
    float: left;
    
}



.msg-board-report .grid-content {
    overflow-x: scroll;
}

.msg-board-report .scroll-wrapper {
    overflow-x: scroll;
    height:20px;
}


.msg-board-report .upper-scroll {
    width: 2500px;
    height: 20px
}

.msg-board-report .item-table {
    display: table;
    box-sizing: border-box;
    float: left;
    border: solid 1px #806b00;
    border-right: none;
    border-left: none;
    width:100%;
}

.msg-board-report .header-group {
    display: table;
    border-right: solid 2px #806b00;
    /*width: 20%;*/
    /*height:125px;*/
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: .7em;
    padding: 0px 0px 0px 0px;
    /*margin:2px 2px 2px 2px;*/
    box-sizing: border-box;
}

.msg-board-report .header-text {
    display: table-cell;
    height: 25px !important;
    background-color: #3c79f2;
    /*padding-left: 5px;*/
    padding-right: 5px;
    color: #fff;
}

.user-total .item-cell {

    width:45px;
}



.inner-wrapper {
    border-left: solid 2px #806b00;
    width:2500px;
}


.header-group {
    border-top: solid 2px #806b00;
    border-bottom: solid 1px #806b00;
    float:left;
}

    .header-group .name {
        box-sizing: border-box;
        padding-top: 5px;
        width: 111px;
        float: left;
        height: 100%;
        text-align: center;
        border-right: solid 2px #806b00;
        border-left: solid 1px #806b00;
    }

    .header-group .cipher {
        width: auto;
        min-height: 110px;
        padding-top: 5px;
        -ms-writing-mode: tb-lr;
        -webkit-writing-mode: vertical-lr;
        -moz-writing-mode: vertical-lr;
        -ms-writing-mode: vertical-lr;
        writing-mode: vertical-lr;
        line-height: 10px;
        transform: rotate(-180deg);
        text-align: left;
        margin-bottom: 5px;
        margin-left: 40%;
        -webkit-transform-origin-y: 60px;
        transform-origin-y: 60px;
    }

    .header-group .name {
        width: auto;
        height: 120px;
    }


    .header-group:first-child .cipher {
        min-width: 30px;
    }

.subgrid {
    display: table-row;
    
}

.msg-board-report headings {
    border-top: solid 1px #806b00;
    border-bottom: solid 1px #806b00;
}

.hidecn, .codename {
display:none;
}

.msg-board-report .item-cell {
    box-sizing: border-box;
    display: table-cell;
    border-left: solid 1px #806b00;
    border-right: solid 1px #806b00;
    border-bottom: none;
    border-top: none;
    vertical-align: middle;
    text-align: center;
    min-width: 35px;
    width: 100%;
    height: 25px;
    padding: 3px 0px 3px 0px;
    overflow: hidden;
    font-size: .85em;
    font-weight: bold;
    color: #000;
    /* 2018/06/26*/
}

.msg-board-report .item-cell:last-child {

    border-right:none;
}

    .msg-board-report .item-table .item-cell:first-child {
        border-left: none;
    }


.msg-board-report .names .item-cell:first-child {
    display: inline-block;
    width: 110px;
    word-wrap: break-word;
}



.header-group.empty-grid {
    display: none;
    background-color: #ffffff;
}

.empty-grid .item-cell {
    width: 35px !important;
    background-color: #ffffff;
}

.member-web-report  .item-cell{
    box-sizing:border-box;
display:table-cell;
border:solid 1px #806b00;
color:#000;
vertical-align:middle;
text-align:center;
width:auto;
 padding:3px 0px 3px 0px;
 overflow:hidden;
}

.member-web-report  .names .item-cell:first-child{
    width:98px;
}

.member-web-report  .names .item-cell:first-child div{
    /*width:98px ;*/
    overflow:hidden;
   /*height:13px;*/
   width:101px;
}

.member-web-report  .names .item-cell:last-child{
    width:115px;
}

.member-web-report .tools .item-cell {
    /*width:23.4px;*/
    width: 24px;
}


.member-web-report  .mssgs{

    width:147px;
}

.member-web-report  .mssgs .item-cell{
    width:24.05px;
}


.member-web-report  .jokes{

    width:168px;
}
.member-web-report  .jokes .item-cell{
    width:27.6px;
}

.member-web-report  .games{

    width:48px;
}
.member-web-report  .games .item-cell{
    width:24px;
}


.member-web-report  .totals{

    width:37px;
    font-weight:bold;
}
.member-web-report  .totals .item-cell{
    width:35px;
}




/*.member-web-report .item-table:first-child {
width:28.0%;
 
}

.member-web-report .item-cell:nth-child(2) {
width:28%;
}*/


/*.member-web-report .item-cell:first-child {
width:129px;
 
}

.member-web-report .item-cell:nth-child(2) {
width:129px;
}*/

/*.member-web-report .item-group:nth-child(3) {
width:28.7%;
}



.member-web-report .item-group:nth-child(4) {
width:15.9%;
}

    .member-web-report .item-group:nth-child(4) .item-cell:last-child {
    border-right:none;
    }

.member-web-report .item-group:nth-child(5) {
width:18.2%;
}

.member-web-report .item-group:nth-child(6) {
width:5.2%;
}
.member-web-report .item-group:nth-child(7) {
width:4%;
}

.member-web-report .item-group:nth-child(8) {
width:14%;
}

.member-web-report .item-group:nth-child(9) {
width:14%;
}*/

/*.member-web-report .item-group:nth-child(2) {
width:14%;
}*/

 /* group template*/
.group-details .group-data{

    font-weight:bold !important;
}

 .group-details .subhead{
     font-size:1.3em;
     font-weight:bold;
     color:#12367e;
     text-align:center;
     margin-bottom:3px;
 }

.group-details .group-section{
float:left;
width:28%;
font-size:.75em;
padding:7px;
background-color:#fff6cc;
margin:2px;
box-sizing:border-box;
height:100px;

 }


.group-details .action{
     font-weight:bold;
     color:#474fcc;
 }

 .group-details  .action:hover{
     color:#444;
     cursor:pointer;
 }



 /*GROUP MEMBERS LIST*/


 .options-panel{

     width:80%;
     margin-left:10%;
     margin-top:15px;
     margin-bottom:20px;
     background-color:#ffecb2;
     border-radius:15px;
     padding:20px;

     -webkit-box-shadow: 4px 4px 14px 0px rgba(0,0,0,0.66);
-moz-box-shadow: 4px 4px 14px 0px rgba(0,0,0,0.66);
box-shadow: 4px 4px 14px 0px rgba(0,0,0,0.66);
 }

    .options-panel .title {
    
    font-weight:bold;
    text-align:center;
    margin-bottom:15px;
    } 

     .options-panel .header{
         color:#806b00;
         font-weight:bold;
     }

    .options-col{
        float:left;
        margin-right:15px;
        font-size:.85em;

    }


 .list-title{
     margin-top:20px;
     margin-left:40px;
 }

.list-title .group-name{
font-size:1.5em;
}

.member-list{

    border:solid 3px #12367e;
    border-radius:5px;
    padding:2px;
    background-color:#ffecb2;
    margin:20px 3% 20px 3%;
}


 .cmd-group{

    padding-top:4px !important;

}

.member-list .k-widget {

    background-color:transparent;
}

 .headers{
     height:30px;
     background-color:#3c79f2;
     color:#fff;
   
           }

.member-list .header-text:first-child {
width:12%;
  margin-left:5px;
}

.member-list .header-text:nth-child(2) {
width:12%;
}

.member-list .header-text:nth-child(3) {
width:20%;
}

.member-list .header-text:nth-child(4) {
width:22%;
}

.member-list .header-text:nth-child(5) {
width:10%;
}

.member-list .header-text:nth-child(6) {
width:10%;
}

.member-list .header-text:nth-child(7) {
width:9%;
}



.member-list .header-text{
     float:left;
     border-right:solid 3px #ffecb2;
     width:20%;
     height:28px;
     color:#fff;
     text-align:center;
     font-weight:bold;
     font-size:.7em;
     padding:5px 0px 0px 0px;
     margin:2px 2px 2px 2px;
     box-sizing:border-box;
 }

 .header-text:last-child{
 border-right:none;

 }


.member-list .group-section:first-child {
width:12%;
 text-align:left;
}

.member-list .group-section:nth-child(2) {
width:12%;
}

.member-list .group-section:nth-child(3) {
width:20%;
text-align:left;
}


.member-list .group-section:nth-child(4) {
width:22%;
text-align:left;

}

.member-list .group-section:nth-child(5) {
width:10%;
}

.member-list .group-section:nth-child(6) {
width:10%;
}

.member-list .group-section:nth-child(7) {
width:10.5%;
}


.member-list .group-section:last-child{
 text-align:center;

 }

 .member-list .group-section{
float:left;
width:15%;
font-size:.65em;
padding:3px;
background-color:#fff6cc;
margin:2px;
box-sizing:border-box;
height:30px;
overflow:hidden;
 text-align:center;
 }


.pgLabel{

    min-height:25px;
    padding:10px;
    background-color:#dddddd;
    color:#990000;
    font-size:.8em;
    text-align:center;
    opacity:.75;

}




.button-list.games .narrow {
    position:absolute;
top:145px;
margin-left:50%;
left:-95px;
z-index:100;
}


.header-button {
z-index:9999;
}



.form-button{
   background: #b29a25;
background: -moz-linear-gradient(left, #b29a25 0%, #ede9c4 50%, #b29a25 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, #b29a25), color-stop(50%, #ede9c4), color-stop(100%, #b29a25));
background: -webkit-linear-gradient(left, #b29a25 0%, #ede9c4 50%, #b29a25 100%);
background: -o-linear-gradient(left, #b29a25 0%, #ede9c4 50%, #b29a25 100%);
background: -ms-linear-gradient(left, #b29a25 0%, #ede9c4 50%, #b29a25 100%);
background: linear-gradient(to right, #b29a25 0%, #ede9c4 50%, #b29a25 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b29a25', endColorstr='#b29a25', GradientType=1 );
            padding:3px 7px 3px 7px;
            border-radius:6px;
            border:solid 2px #806b00;
            /*color:#705b00;*/
            color:#000;
            font-weight:bold;
            font-size:.75em;
               box-sizing:border-box;
              font-family:Verdana,'Trebuchet MS',serif;
             
}

.title-wrapper .form-button {
 z-index:1000;
}

.form-button.disabled,.form-button.disabled:hover{

    background:#dddddd;
    border:none;
    pointer-events:none;
    color:#aaaaaa;

}

    .form-button:hover {
        background: rgba(204,189,112,1);
        background: -moz-linear-gradient(left, rgba(204,189,112,1) 0%, rgba(240,233,201,1) 34%, rgba(240,233,201,1) 68%, rgba(204,189,112,1) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(204,189,112,1)), color-stop(34%, rgba(240,233,201,1)), color-stop(68%, rgba(240,233,201,1)), color-stop(100%, rgba(204,189,112,1)));
        background: -webkit-linear-gradient(left, rgba(204,189,112,1) 0%, rgba(240,233,201,1) 34%, rgba(240,233,201,1) 68%, rgba(204,189,112,1) 100%);
        background: -o-linear-gradient(left, rgba(204,189,112,1) 0%, rgba(240,233,201,1) 34%, rgba(240,233,201,1) 68%, rgba(204,189,112,1) 100%);
        background: -ms-linear-gradient(left, rgba(204,189,112,1) 0%, rgba(240,233,201,1) 34%, rgba(240,233,201,1) 68%, rgba(204,189,112,1) 100%);
        background: linear-gradient(to right, rgba(204,189,112,1) 0%, rgba(240,233,201,1) 34%, rgba(240,233,201,1) 68%, rgba(204,189,112,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccbd70', endColorstr='#ccbd70', GradientType=1 );
    }

    .form-button:active {
        border: solid 2px #652a80;
    }
        
        .form-button.blue-hover:hover {
        color: #fefefe;
        background: rgba(19,84,213,1);
background: -moz-linear-gradient(left, rgba(19,84,213,1) 0%, rgba(188,204,255,1) 51%, rgba(19,84,213,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(19,84,213,1)), color-stop(51%, rgba(188,204,255,1)), color-stop(100%, rgba(19,84,213,1)));
background: -webkit-linear-gradient(left, rgba(19,84,213,1) 0%, rgba(188,204,255,1) 51%, rgba(19,84,213,1) 100%);
background: -o-linear-gradient(left, rgba(19,84,213,1) 0%, rgba(188,204,255,1) 51%, rgba(19,84,213,1) 100%);
background: -ms-linear-gradient(left, rgba(19,84,213,1) 0%, rgba(188,204,255,1) 51%, rgba(19,84,213,1) 100%);
background: linear-gradient(to right, rgba(19,84,213,1) 0%, rgba(188,204,255,1) 51%, rgba(19,84,213,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1354d5', endColorstr='#1354d5', GradientType=1 );
        /*background: #cebe75;
        background: -moz-linear-gradient(left, #cebe75 0%, rgba(188,204,255,1) 51%, #cebe75 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, #cebe75), color-stop(51%, rgba(188,204,255,1)), color-stop(100%, #cebe75));
        background: -webkit-linear-gradient(left, #cebe75 0%, rgba(188,204,255,1) 51%, #cebe75 100%);
        background: -o-linear-gradient(left, #cebe75 0%, rgba(188,204,255,1) 51%, #cebe75 100%);
        background: -ms-linear-gradient(left, #cebe75 0%, rgba(188,204,255,1) 51%, #cebe75 100%);
        background: linear-gradient(to right, #cebe75 0%, rgba(188,204,255,1) 51%, #cebe75 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cebe75', endColorstr='#1354d5', GradientType=1 );*/
    }


.form-button.narrow{

    font-size:.65em;
    /*height:12px;*/
}

.profile-panel .k-invalid-msg{
margin-left:0px !important;
}


#grpValidate .k-invalid-msg {
    width: 300px;
    margin-left: 55px !important;
}

.not-leader.grpcreate, .not-confirmed {
display:none;
}

.k-tooltip.k-invalid-msg {
    font-size: .75em;
    font-weight: bold;
    margin-left: 120px;
    color: #990000 !important;
    margin-top: 5px;
    margin-bottom: 5px;
    border: solid 1px #990000 !important;
}

.invite-leader .k-tooltip.k-invalid-msg {
    font-size: .75em;
    font-weight: bold;
    margin-left: 10px;
}
    /*CHECKBOX*/
    /* SQUARED TWO */
    /*input[type=checkbox].cc-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
}

input[type=checkbox].cc-checkbox {
    position: relative;
    width: 20px;
    height: 20px;
    border: 1px solid gray;
   
    vertical-align: -7px;
   
}

    input[type=checkbox].cc-checkbox::before {
        content: "✔";
        position: absolute;
        font-size: 2.35em;
        right: 0;
        top: -0.3em;
        visibility: hidden;
    }

    input[type=checkbox].cc-checkbox:checked::before {
       
        visibility: visible;
    }

    input[type=checkbox].cc-checkbox:disabled {
        border-color: black;
        background: #ddd;
        color: gray;
    }

    input[type=checkbox].cc-checkbox::-ms-check {
        display: none;
    }*/
    .cc-checkbox {
    width: 20px;
    height: 20px;
    /*appearance: none !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;*/
}

.cc-checkbox2 {
    width: 20px;
    height: 20px;
}


/* ccButton Component*/

.ccButton{
    
/*float:left;*/
display:inline-block;
margin-right:3%;
margin-top:10px;
 
}

.btn-badge {
    position: absolute;
    right: -15px;
    top: -12px;
    font-family: Verdana;
    font-size: 10px;
    border-radius: 4px;
    border: solid 1px #806b00;
    background-color: #ece8c2;
    padding:3px;
}

    .btn-badge.uses-flash {
        background-image: url('../images/system/usesflash.jpg');
        background-size: contain;
        width: 80px;
        height: 20px;
        padding:0px;
        border:none;
        background-color: transparent;
        background-repeat: no-repeat;
    }

.ccButton.wizard{

    /*line-height:.7;*/
    /*margin-top:-7px;*/

}

.wizard-buttons{
    margin-top:-15px;
}

    .ccButton.double span div:first-child{
    margin-top:-38px;
    
    }

  .wiz-nav{
     
  box-sizing:border-box;
  font-size:1.1em;
  width:175px;
  height:50px;
             
         }
  /*Long button*/
.long .wiz-nav{

     width:220px;

}

.extralong .wiz-nav{

     width:270px !important;
      font-size:.9em !important;
       height:30px !important;
}

#introMenu .ccButton{
    clear:both !important;
    display:block !important;
    margin-bottom:15px;
     font-size:.85em !important;
}

/*narrow button*/
 .narrow .wiz-nav{
             
    font-size:.87em !important;
    width:190px  !important;
    height:30px !important;

         }





 .narrow button:hover {
        border:solid 3px #ffffff !important;
        
        }
   .narrow  .inner-button{
      border:none !important;
   }

    .narrow  .inner-button .notch.left {
            left:-2px;
           
            }

        .narrow      .inner-button .notch.right {
            right:-4px;
            }



        button {
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b29b25+0,ede9c4+41,ede9c4+62,b29b25+100 */
            /*background: #b29b25;  Old browsers 
            background: -moz-linear-gradient(left, #b29b25 0%, #ede9c4 41%, #ede9c4 62%, #b29b25 100%);  FF3.6-15 
            background: -webkit-linear-gradient(left, #b29b25 0%,#ede9c4 41%,#ede9c4 62%,#b29b25 100%);  Chrome10-25,Safari5.1-6 
            background: linear-gradient(to right, #b29b25 0%,#ede9c4 41%,#ede9c4 62%,#b29b25 100%);  W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ 
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b29b25', endColorstr='#b29b25',GradientType=1 );  IE6-9*/ 
           
         background: rgba(178,154,37,1);
background: -moz-linear-gradient(left, rgba(178,154,37,1) 0%, rgba(237,233,196,1) 24%, rgba(204,183,90,1) 42%, rgba(204,183,90,1) 58%, rgba(237,233,196,1) 78%, rgba(178,154,37,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(178,154,37,1)), color-stop(24%, rgba(237,233,196,1)), color-stop(42%, rgba(204,183,90,1)), color-stop(58%, rgba(204,183,90,1)), color-stop(78%, rgba(237,233,196,1)), color-stop(100%, rgba(178,154,37,1)));
background: -webkit-linear-gradient(left, rgba(178,154,37,1) 0%, rgba(237,233,196,1) 24%, rgba(204,183,90,1) 42%, rgba(204,183,90,1) 58%, rgba(237,233,196,1) 78%, rgba(178,154,37,1) 100%);
background: -o-linear-gradient(left, rgba(178,154,37,1) 0%, rgba(237,233,196,1) 24%, rgba(204,183,90,1) 42%, rgba(204,183,90,1) 58%, rgba(237,233,196,1) 78%, rgba(178,154,37,1) 100%);
background: -ms-linear-gradient(left, rgba(178,154,37,1) 0%, rgba(237,233,196,1) 24%, rgba(204,183,90,1) 42%, rgba(204,183,90,1) 58%, rgba(237,233,196,1) 78%, rgba(178,154,37,1) 100%);
background: linear-gradient(to right, rgba(178,154,37,1) 0%, rgba(237,233,196,1) 24%, rgba(204,183,90,1) 42%, rgba(204,183,90,1) 58%, rgba(237,233,196,1) 78%, rgba(178,154,37,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b29a25', endColorstr='#b29a25', GradientType=1 );         
             padding:2px;
            border-radius:8px;
            border:solid 1px #806b00;
            color:#806b00;
            font-weight:bold;
             position:relative;
               box-sizing:border-box;
              font-family:Bitter,'Trebuchet MS',serif;
            -webkit-box-shadow: 0px 3px 17px -2px rgba(96,75,0,1);
-moz-box-shadow: 0px 3px 17px -2px rgba(96,75,0,1);
box-shadow: 0px 3px 17px -2px rgba(96,75,0,1);
        }


        button:hover {
        border:solid 2px #ffffff;
        color:#000;
        cursor:pointer;
        }

        button>span{
         
           display: inline-block;
  vertical-align: middle;
    
        }

.baroque button span {
    margin-top: -15px;
    display: inline-block;
    vertical-align: top;
    padding-left: 25px;
    font-weight: bold;
    font-size: 2em;
    /*color:#a6c3ff;*/
    /*text-shadow: -3px 0px 0px #12367e,
            3px 0px 0px #12367e,
          0px 3px 0px #12367e,
           0px -4px 0px #12367e,
         
            
                1px -3px 2px #12367e,
             -1px -3px 2px #12367e,
          1px 3px 0px #12367e,
             -1px 2px 8px #12367e,
            
             3px 3px 0px #12367e,
         -3px -3px 2px #12367e,
             -3px 3px 3px #12367e,
             3px -3px 0px #12367e;*/
    /*
            text-shadow: -3px 0px 0px #27203e,
            3px 0px 0px #27203e,
          0px 3px 0px #27203e,
           0px -4px 0px #27203e,
         
            
                1px -3px 2px #27203e,
             -1px -3px 2px #27203e,
          1px 3px 0px #27203e,
             -1px 2px 8px #27203e,
            
             3px 3px 0px #27203e,
         -3px -3px 2px #27203e,
             -3px 3px 3px #27203e,
             3px -3px 0px #27203e;


        */
    text-shadow: -3px 0px 0px #27203e,
        3px 0px 0px #27203e, 
        0px 3px 0px #27203e,
        0px -1px 0px #27203e, 
        1px -1px 2px #27203e,
        -1px -1px 2px #27203e,
        1px 3px 0px #27203e, 
        -1px 2px 8px #27203e,
        3px 3px 0px #27203e, 
        -2px -1px 2px #27203e,
        -2px 3px 3px #27203e,
        3px -1px 0px #27203e;
}


          #introMenu .baroque button span{
              margin-top:0px;
                  letter-spacing: .075em

          }
.baroque button {
    font-family: JI-Brunts,Bitter,serif;
    text-align: left !important;
    /*color:#a6c3ff;*/
    /*color:#659eff;*/
    /*color:#a1c6fa;*/
    /*color:#92bffe;*/
    /*color:#6699FF;*/
    /*color:#a0c0ff;*/
    /*color: #79aaf9;*/
    color: #8cacff;
}

       .baroque button:hover {
        /*border:solid 2px #ffffff;*/
        color:#fff !important;
         border:solid 1px #806b00 !important;

        background: rgba(123,169,253,1);
background: -moz-linear-gradient(left, rgba(123,169,253,1) 0%, rgba(210,221,241,1) 20%, rgba(61,122,243,1) 41%, rgba(61,122,243,1) 56%, rgba(210,221,241,1) 86%, rgba(123,168,253,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(123,169,253,1)), color-stop(20%, rgba(210,221,241,1)), color-stop(41%, rgba(61,122,243,1)), color-stop(56%, rgba(61,122,243,1)), color-stop(86%, rgba(210,221,241,1)), color-stop(100%, rgba(123,168,253,1)));
background: -webkit-linear-gradient(left, rgba(123,169,253,1) 0%, rgba(210,221,241,1) 20%, rgba(61,122,243,1) 41%, rgba(61,122,243,1) 56%, rgba(210,221,241,1) 86%, rgba(123,168,253,1) 100%);
background: -o-linear-gradient(left, rgba(123,169,253,1) 0%, rgba(210,221,241,1) 20%, rgba(61,122,243,1) 41%, rgba(61,122,243,1) 56%, rgba(210,221,241,1) 86%, rgba(123,168,253,1) 100%);
background: -ms-linear-gradient(left, rgba(123,169,253,1) 0%, rgba(210,221,241,1) 20%, rgba(61,122,243,1) 41%, rgba(61,122,243,1) 56%, rgba(210,221,241,1) 86%, rgba(123,168,253,1) 100%);
background: linear-gradient(to right, rgba(123,169,253,1) 0%, rgba(210,221,241,1) 20%, rgba(61,122,243,1) 41%, rgba(61,122,243,1) 56%, rgba(210,221,241,1) 86%, rgba(123,168,253,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ba9fd', endColorstr='#7ba8fd', GradientType=1 );
        }

        .baroque button:hover .notch>div>div{

            background-color:#7ba8fd !important;
        }

            .baroque button span:hover {
             color:#fff !important;
            }


     
        .inner-button{
            box-sizing:border-box;
            position:relative;
            height:100%;
             border-radius:8px;
            border:solid 1px #806b00;
           
        }


        /*ghost element to vertically center the span text*/
        .inner-button:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

        .inner-button .notch{
            position:absolute;
            display:table;
            width:10px;
            height:100%;
            top:0px;
        }


            .inner-button .notch.left {
            left:0px;
            }

             .inner-button .notch.right {
            right:-2px;
            }


          .inner-button .notch>div {
            
            height:10px;
            display: table-cell;
 
  vertical-align: middle;
            width:8px;
           
           
        }

            .inner-button .notch > div > div {
                position:relative;
                height: 3px;
                border: solid 1px #806b00;
                background-color: #d5c067;
            }


           .inner-button div.tl{
             position:absolute; 
            border-left:none;
            top:0px;
            left:-1px;
           }

            .inner-button div.bl {
                 position:absolute; 
            border-left:none;
            top:-1px;
            left:-1px;
        }

   
          .inner-button div.tr {
               position:absolute; 
            border-right:none;
            top:0px;
            right:1px;
        }
     
            .inner-button div.br {
                 position:absolute; 
            border-right:none;
            top:-1px;
            right:1px;
        }





     

/*popup forms*/

.editing-window{
     box-sizing:border-box;

     background-image:url('../images/system/paper_bg3.jpg') !important;
    background-size:cover !important;
    background-position-x:-2px !important;
  
}


 .k-tooltip{
     box-sizing:border-box;

     background-image:url('../images/system/paper_bg3.jpg') !important;
    background-size:cover !important;
    background-position-x:-2px !important;
    border:solid 4px #403500 !important;
    border-radius:6px !important;
}


 
 .k-dialog{
     box-sizing:border-box;

     background-image:url('../images/system/paper_bg3.jpg') !important;
    background-size:cover !important;
    background-position-x:-2px !important;
    border:solid 4px #403500 !important;
    border-radius:6px !important;
}


    .k-dialog .k-content {
        background-color: transparent;
        font-family: Verdana,sans-serif;
        color: #202020 !important;
        font-size:1.1em !important;
        padding:15px !important;
    }

    .k-dialog .k-dialog-title {
        font-family: Bitter,serif !important;
        color: #990000 !important;
        font-weight: bold !important;
        font-size: 1.3em !important;
        margin-bottom: 15px !important;
        text-align: center !important;
        width: 100% !important;
    }

  .k-dialog .k-button{

      opacity:0;
  }

  .k-confirm .k-dialog-buttongroup{
      position:relative;
  }

.k-dialog-buttongroup {
margin-bottom:35px !important;
}

.k-dialog-buttongroup .k-button {
    width: 70px !important;
    height: 32px;
}

    .k-dialog-buttongroup .k-button:first-child {
        margin-left:23%;
    }

    .k-dialog-buttongroup .k-button:nth-child(2) {
        margin-left: 25%;
    }

  .k-confirm .form-button{

      min-width:50px;
position:absolute; 
top:10%; 
pointer-events:none;

  }

  .k-confirm button.form-button{
left:23%;
  }

   .k-confirm .form-button:last-of-type{
left:64%;
  }

 .reg-form .subhead, .survey .subhead{
     font-family:Bitter,serif;
    color:#990000;
    font-weight:bold;
    font-size:1.3em;
    margin-bottom:15px;
}

.reg-form .retrieve-name {
    width:350px;
}

.leader-reg-intro {
    font-size: .8em;
}

 .reg-form .boldtext{
     font-size:1.1em;
 }

 .reg-form .textlink a{
    color:#065d9d;
 }

 .reg-form .textlink a:hover{
    color:#000000 !important;

 }

.reg-form div{
    margin-bottom:7px;
    /*background-image:url('../images/system/paper_bg3.jpg');
    background-size:cover;*/
}

/* message editor popup window*/
.message-edit .input-block{

    width:95%;
    margin-left:2%;
    padding-bottom:20px;
}

.message-edit textarea{
    border-radius:5px;
    width:100%;
    height:60px;
}

.message-edit #btnEditMessage{
    display:none;
}

.message-edit .cipher-select {
    /*width:190px;*/
    width: 225px;
    margin-top: 0px !important;
    margin-bottom: 4px;
}

.message-edit .keys-wrapper .label_a, .message-edit .keys-wrapper .label_b{

    font-size:.75em !important;
}




.joke-edit .input-block {
    width: 95%;
    margin-left: 2%;
    padding-bottom: 20px;
}

.joke-edit textarea {
    width: 100%;
    height: 50px;
}

.joke-edit #btnEditJoke {
    display: none;
}

.joke-edit .cipher-select {
    margin-top: 0px !important;
}

.joke-edit .keys-wrapper .label_a, .joke-edit .keys-wrapper .label_b {
    font-size: .75em !important;
}










.notification-wrapper {
    /*position: absolute;
    top: 10px;
    right: 0;
    
    z-index: 999999;*/
}

.k-notification {
    border: none !important;
    border-radius: 6px !important;
}

.k-notification-info {
    background-color: transparent !important;
    border: none !important;
}
.notification{
    width:450px;
    padding:15px;
      box-sizing:border-box;
      text-align:center;
     background-image:url('../images/system/paper_bg3.jpg') !important;
    background-size:cover !important;
    background-position-x:-2px !important;
    border:solid 4px #403500 !important;
    border-radius:6px !important;
    
}

.popup-heading {
    text-align: center;
    font-family: Bitter,serif;
    color: #990000 !important;
    font-weight: bold !important;
    font-size: 1.3em !important;
    margin-bottom: 15px;
}

.k-notification {
    pointer-events: none !important;
    white-space: normal !important;
}


.k-notification button{
pointer-events:all !important;
}
    .modal-overlay {

background-color:#202020;
position:absolute;
top:-10%;
left:-10%;
width:150%;
height:500%;
opacity:.6;
pointer-events:all;
z-index:10099;

}


.notice {
    /* display:none !important; */
    position: absolute;
    right: 15px;
    bottom: 7px;
    width: 225px;
    height: 110px;
    z-index:10000;
    padding:10px;
    font-size:.8em;
    text-align:center;
top:33%;
left:1.15%;
border:solid 5px #990000;

    background: rgba(240,231,127,1);
    background: -moz-linear-gradient(top, rgba(240,231,127,1) 0%, rgba(255,233,180,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(240,231,127,1)), color-stop(100%, rgba(255,233,180,1)));
    background: -webkit-linear-gradient(top, rgba(240,231,127,1) 0%, rgba(255,233,180,1) 100%);
    background: -o-linear-gradient(top, rgba(240,231,127,1) 0%, rgba(255,233,180,1) 100%);
    background: -ms-linear-gradient(top, rgba(240,231,127,1) 0%, rgba(255,233,180,1) 100%);
    background: linear-gradient(to bottom, rgba(240,231,127,1) 0%, rgba(255,233,180,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0e77f', endColorstr='#ffe9b4', GradientType=0 );
    -webkit-box-shadow: 10px 10px 16px -4px rgba(0,0,0,0.25);
    -moz-box-shadow: 10px 10px 16px -4px rgba(0,0,0,0.25);
    box-shadow: 10px 10px 16px -4px rgba(0,0,0,0.25);
}

.notice a{
    color:#336699 !important;
}
.notice-heading{
    margin-bottom:10px;
}

.login-reminder {
    background-color: #3c79f2;
    color: #fff;
    font-size: 1em;
    padding: 10px;
    border-radius: 5px;
    margin: 12px;
}


.k-window{

     box-sizing:border-box;

    background-image:url('../images/system/paper_bg3.jpg') !important;
    background-size:cover !important;
    background-position-x:-2px !important;
    border:solid 4px #403500 !important;
    border-radius:6px !important;
   
}

.k-window-content{
  background-image:url('../images/system/paper_bg3.jpg') !important;
    background-size:cover !important;
    background-position-x:-2px !important;
  

}

.popup-window{
 padding:15px;
   font-size:.9em;

}

.popup-window .label{

 color:#806b00;
 font-weight:bold;
 margin-bottom:4px;
}

          
 .popup-window .subhead{
      color:#000;
    font-weight:bold;
    font-size:1.3em;
    margin-bottom:5px;
}


 .popup-window  .boldtext{
     font-size:1.1em;
 }

 .popup-window  .textlink a{
    color:#065d9d;
 }

 .popup-window .textlink a:hover{
    color:#000000 !important;

 }

.popup-window >div{
    margin-bottom:10px;
    /*background-image:url('../images/system/paper_bg3.jpg');
    background-size:cover;*/
}




/*Reader*/


.modal {
    pointer-events: none;
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 15000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.85); /* Black w/ opacity */
pointer-events:all;
}


.reader-wrapper {
    margin: 30px auto;
    padding: 0px;
    width: 60%;
  
    background-color: rgba(207,189,115,1);
    position: relative;
    border: solid 4px #303030;
    text-align: center;
}

/*#806b00*/

.reader-pgcount{
    position:absolute;
    
    display:inline-block;
    color:#ffffff;
font-size:10px;
text-align:center;
width:80px;
margin-left:-40px;
border:solid 1px #ffffff;
border-radius:12px;
padding:3px 10px 5px 10px;
opacity:.6;

}

.reader-advance {
    position: absolute;
    display: inline-block;
    color: #ffffff;
    font-size: 10px;
    text-align: center;
    width: 135px;
   right:7%;
    border: solid 1px #ffffff;
    border-radius: 12px;
    padding: 2px 10px 5px 10px;
    opacity: .6;
    height:30px;
    box-sizing:border-box;
    z-index:16000;
    pointer-events:all;
}

    .reader-advance #inpAdvance {
    width:15px;
    font-size:1.1em !important;
    margin-right:5px;
    }


.reader-advance i{
    position:relative;
    top:3px;
font-size:1.7em;
cursor:pointer;

}

    .reader-advance i:hover {
    color:#808080;
    
    }


        .reader-panel {
        position: relative;
        height: auto;
    }

.reader-arrow{

    position:absolute;
    bottom: 0px;
}


.reader-arrow:hover {
cursor:pointer
}
    .reader-arrow.left {
        left:-20px;
        display:none;
    }

     .reader-arrow.right {
        right:-20px;

    }

.close-reader{
    box-sizing:border-box;
    position:absolute;
    width:20px;
    height:20px;
    padding: 1px 5px;
    right:5px;
    top:5px;
    background-color:#ffffff;
    border-radius:50%;
    font-size:14px;
    font-weight:bold;
    opacity:.6;
    z-index:6000;
}

.close-reader:hover {
    cursor:pointer;
}


 .nextimg{
    display:none ;
}



.reader-wrapper .reader-img img{
    position:absolute;
    /*display:block;*/
    width:100%;
    padding:0px;
    margin:0px;
    display:none;
}


/*panels*/
.panels{
margin: 20px auto 20px auto;

width:100%;
min-height:500px;
height:100%;
position:relative;
display:inline-block;
}


.panel{
    box-sizing:border-box;
    position:relative;
     padding:20px;
    display:none;
    width:80%;
    margin-left:10%;
    min-height:500px;
    height:100%;
    background-color:rgba(255,220,115,1);
    border:solid 2px #b29a25 ;
    border-radius:8px;
   
}


.panels .subtitle{
    font-family:Bitter,serif;
    font-size:1.3em;
    color:#6b2a8c;
    font-weight:bold;
    margin-bottom:10px;
}

.section{
    clear:both;
 box-sizing:border-box;
  margin-top:20px;
}

.section.narrow{
width:80%;
margin-left:10%;
}


.content-section{
  box-sizing:border-box;
  margin-bottom:20px;
}

.content-section img{
    width:100%;
    margin-bottom:15px;
}

.content-section.left{

    float:left;
   margin-right:30px;

}

.p75{
    width:70%;
     margin-right:2%;
}

.p25{
    width:20%;
}


.p65{
    width:60%;
     margin-right:2%;
}

.p35{
    width:30%;
}


.inset{

    -webkit-box-shadow: 4px 4px 16px 0px rgba(79,45,4,1);
-moz-box-shadow: 4px 4px 16px 0px rgba(79,45,4,1);
box-shadow: 4px 4px 16px 0px rgba(79,45,4,1);

border-radius:6px;

padding:20px;

}

.subpanel{

border-radius:6px;
background-color:rgba(255,231,178,1);
padding:15px;
text-align:center;
margin-bottom:20px;
}

.subpanel-yellow{

border-radius:6px;
background-color:#ffdc73;
padding:15px;
text-align:center;
margin-bottom:20px;
}

.panel .underscore img{

    width:97%
}

    .subpanel .title {
    
    font-weight:bold;
    font-size:1.1em;
    color:#990000;
    font-family:Bitter,serif;
    margin-bottom:5px;
    }

    .subpanel {
        font-size:.75em;

    }

        .subpanel div {
        margin-bottom:5px;
        }

          .subpanel img{
              width:100%;
          }

           .btn-next-panel{

       clear:both;
       text-align:center;
   }

/***********************media queries***************************/

/*@media screen and (max-width: 1250px) {
    .rings {
        
       left:20%;
    }
}*/

@media screen and (min-width: 1024px) {
    .content-wrapper{
  box-sizing:border-box;
     margin-left:auto;
     margin-right:auto;
   width:950px !important;
}


}


@media screen and (max-width: 1250px) {
    .rings {
        
       /* left:15%; */
    }

       .reader-wrapper {
    width:75%;
    
    }
}


@media screen and (max-width: 1023px) {
   
     .k-current-page {
        display:none !important;
    }

      .k-pager-wrap {
        min-height:10px !important;
    }

       .content-wrapper{
  box-sizing:border-box;
     margin-left:0% !important;
   width:100% !important;
}

      #nav{
      /*margin-left:1%;
 width:98%;*/
 
}


    .notice {
     /* left:10px !important;
        width: 30%;
         min-height: 105px ;
         height:18vh; */
left:auto !important;
top:auto !important;
bottom:5%;
right:5%;
    }
    
    #menu{
          width:80%;
        margin-left:10%;
      }

   .menu-item{
    
    font-size:.4em;
     margin-left:3%;
 
}



   #title{
   
box-sizing:border-box;
padding:16px 5px;
min-height:40px;
 
}

    #title span {
    font-size:1.3em;
    }




    .reader-wrapper {
    width:85%;
    
    }

/*splash*/

#logoLrg{

width:28%;
left:0px;
top:7px;
}

#logoLrg .tm{
    right:10%;
    bottom:37%;
   
}

 #introText  {
        padding-left: 0px;
        margin-top:-40px;
    }    
  .extralong .wiz-nav{

     width:220px !important;
      /*font-size:.9em !important;
       height:30px !important;*/
}

      .menus{
float:none;
 margin-left:2%;
 clear:both;
      }


      #introMenu .ccButton{
          clear:none !important;
         float:left;
         margin:0px 0px 10px 10px;

      }

        .baroque button span {
        margin-top: 3px;
        padding-left: 25px;    
        font-size: 1.5em;
    }

#introMenu{
  margin-top:60px;
    display:inline-block;
   text-align:center;
   width:520px !important;
}




   #imgWrapper{
        display:inline-block;
    margin-left:0px;
    float:none;
    margin-top:5px;
            clear:both;
            box-sizing:border-box;
            /*width:340px;
            height:231px;*/
             width:296px;
            height:210px;
            margin-left:auto;
        } 

          #imgFrame{
              position:relative;
              display:inline-block;
            box-sizing:border-box;
           width:100%;
            height:100%;
           
        } 
      

        
        #imgWrapper img{
            /*display:none;*/
            width:98%;
            height:98%;
            /*width:325px;
            height:150px;*/
        }


    .game-banner .game-subtitle {
      
        
        left: 13.5%;
       
        font-size: 20px;
       
    }

}

@media screen and (max-width: 600px) {
  
    .notification{
         width:90%;
       /*position:absolute;
       left:0px; */
        
    }
.survey-popup-wrapper{
    width:95vw !important;
    left:2vw !important;
    margin-left:0px !important;
}

/*#logo{  
   margin-top:5px;
    margin-left:10px;
    width:15%;
}*/

    .notice {
       
        width: 25%;
        height: auto;
        z-index:2500;
    }


      #menu{
        
        margin-left:28%;

      }

      .btnLogin{
            font-size:.32em;
         
           right:10px;
           top:-13px;
      }

        .btnLogin.intro {
         font-size:.54em; 
         top:10px;
          right:3px;
        }
      
      #nav{
          margin-top:15px;
      }

    .menu-item{
        font-size:.3em;
    }

      .rings{
          margin-top:-20px;
          height:170px;
          width:85%;
         
      }

.rings img{
   
      top:-50px;
      margin-left:-4%;
}


.heading{
    font-size:1.5em;
}



    .button-list-inner {
        width: 100%;
    }



    
  .ccButton{
  left: 20%;
        
/*margin-top:10px;
  position: relative;
  */
}   

 



  .wiz-nav{
             
    font-size:.8em !important;
    width:140px  !important;
    height:30px !important;

         }

  .double{
 font-size:.95em !important;
   
  }

  .long .wiz-nav{

     width:200px !important;

}

  
   .button-list.challenges .wiz-nav{
       margin-left:-5%;
      width:220px !important;
  }

    .narrow.games .wiz-nav, .ccButton.games {
        width: 120px !important;
        left: initial !important;
        height: 22px !important;
    }

    .button-list.challenges .desc{
        margin-left:12%;
       
    }

    .inner-button .notch {
    width:5px !important;
    }


    .button-list.games .button-list-inner{

       left:50% !important;
    }



    .button-list.games .narrow {
    
    left:-135px;
    }


    .underscore img {
    height:3px;
    width:80%;
    }


    /*MESSAGE BOARD*/

    /*.cipher-gridDG .cgrid-item {
    
    height:470px;
    
    }*/


    /*splash*/

#logoLrg{

width:39%;
left:0px;
top:10px;
}


#logoLrg .tm{
    
    font-size:6px;
   width:14px;
   height:14px;
    right:7%;
    bottom:40%;
   
    padding:2px 2px 0px 1px;
  
}

.menus{
margin-left:0.5%;
}


.intro-wrapper{
   
background-size:570px 100%;
}

    #introMenu {
    width:100% !important;
  max-width:350px;
    }

        #introMenu .ccButton {
            left: 0%;
        }


    #introText {
    margin-top:-10px;
    margin-bottom:20px;
    margin-right:10px;
    text-align:left;
    width:55%;
    float:right;
    font-size:.8em;

    }

     #introText .subhead{

         font-size:1em;
     }


    .extralong .wiz-nav {
        width: 130px !important;
    }

    .baroque button span {
        margin-top: 3px;
        padding-left: 15px;    
        font-size: 1.15em;
    }
        #imgWrapper{
            clear:both;
            box-sizing:border-box;
            width:296px;
            height:210px;
            margin-left:auto;
        } 

          #imgFrame{
              position:relative;
              display:inline-block;
            box-sizing:border-box;
           width:100%;
            height:100%;
           
        } 
        
        #imgWrapper img{
            /*display:none;*/
            width:98%;
            height:98%;
            /*width:325px;
            height:150px;*/
        } 
        

       



        /*COMIC READER*/
           .reader-wrapper {
    width:95%;
    
    }

           .reader-arrow {

               height:30px;
           }

 .reader-arrow.right {

               right:-5px;
           }

 .reader-arrow.left {

               left:-5px;
           }


 /*wizard panels*/

   .ccButton.double span div:first-child{
    margin-top:-23px;
    
    }

  


   .p75{
    width:95%;
     margin-right:auto;
     margin-left:auto;
}

.p25{
    clear:both;
    float:none;
    width:70%;
    margin-top:30px;
     margin-left:15%;
}

.p65{
    width:95%;
     margin-right:auto;
     margin-left:auto;
}

.p35{
    clear:both;
    float:none;
    width:70%;
    margin-top:30px;
     margin-left:15%;
}



.panel .ccButton{
    left:auto !important;
}



 /*CIPHER GRID*/
        .cgrid-item{
padding:5px;
        }

        area{
            background-color: #990000 !important;
        }

       

        .cgrid-item .col-headings span{

      font-size:11px;
      font-weight:bold;
      color:#303030;
      margin-right:5px;     
  }  

/*msg board widths*/

    .diffcolor {
       
        margin-top: 12px;
    }

        .cgrid-cell.id {

    width:65px;
    position:relative;
}

.cgrid-cell.ciphertype {

    width:82px;
}

.cgrid-cell.theme {

    /*width:220px;*/
    width:100%;

}


.cgrid-cell.decryptednum {

    width:60px;
}

    .cgrid-cell.submittedby {
    display:none;
    }


      .cgrid-cell.submittedon {
    display:none;
    }



      /*PROFILE*/

    .user-profile .inp-field input:not(.gender) {
        height: 25px;
        font-size: .9em;
        width: 200px !important;
    }

    .user-profile .inp-field.codename > div {
       
        width: auto;
    }


  


    .leader-profile .inp-field input:not(.gender) {
        height: 25px;
        font-size: .9em;
        width: 95% !important;
    }


    .btn-line{
        width:100%;
        margin-top:7px;
        float:left;
    }

    .btn-line button{
    float:left;
    }

    .panel-set {
          width: 100%;
       min-width:100%;
    }


    .profile-panel {
        width: 98% !important;
        min-width: 98%;
        margin-left:1% !important;
    }

    .stats-tree .root {
        width: 98%;
        padding: 3px !important;
        margin-left: 1%;
    }

    .game-banner .game-subtitle {
        left: 12%;
        font-size: 15px;
    }

    }

  
/*UNITY*/

.unity-title {
    display:none;
}

.loading-message {
    position: absolute;
    font-size: 1.35em;
    text-align: center;
    /*color: #6c2a8c;*/
    color:#a6c3ff;
    width:100%;
    left:0px;
    /*top:45%;*/
    top:450px;
    z-index:900000;
}

.loading-message.centered {
   
}

.k-loading-image {
    background-image: url('../images/system/crypto.gif') !important;
}

    .about-tool {
display:none;
float:right;
margin-right:-60px;

}

.pause-game {
    display: none;
    float: right;
    margin: -8px -70px 55px 15px;
    
    color: #ad9633;
    font-size:30px;
}

    .pause-game:hover {
        color: #622b7c;
    }

.game-status {
    display: none;
    float: right;
    margin-top:-7px;
    font-size: 1em;
    font-family: Bitter,serif;
    color: #622b7c;
    font-weight: bold;
}

/*FLASH*/

.flash-wrapper {
overflow:hidden;
position:relative;
}

#flashContent {
margin-top:-102px;
}

.flash-overlay {
position:absolute;

width:162px;
height:40px;
background-color:#ffdc75;
z-index:2;
}

.stickers p{
    padding-top:0px !important;
    padding-bottom:0px !important;
    margin-top:4px !important;
    margin-bottom:4px !important;
line-height: 1.2;;
margin-block-start:6px !important;
margin-block-end:3px !important;
}

.stickers-desc{
    font-weight:bold;
    margin-bottom:25px;
}
.stickers .icons{
    display:flex;
    flex-direction: row;
    justify-content:center;
    height:100px;
    margin-bottom:20px;
}


.sticker-icon{
    display:flex;
    flex:1; 
    justify-content: center;
    height:100%;
}
.sticker-icon img{
    height:100%;
}


.handbook.title{
    font-size:22px;
    margin-bottom:10px;
   
}
.handbook.title a{
    
    color:#c91919 !important;
}


.handbook.author{
    font-size:12px;
    margin-bottom:4px;
}

.handbook.publisher{
    font-size:12px;
    margin-bottom:8px;
}

.handbook .desc{
    line-height:1.35;
font-size:15px;
}

.handbook .textlink{
    margin-bottom:30px;
}

.link-list.wide{
    width:90%;
}