/* 
    Created on : Jul 3, 2016, 2:43:44 PM
    Author     : Leonard Garcia
*/
body {
    background-color:  black;
}
::-webkit-scrollbar {
    width: 1.5em;
    height: 1em;
}

::-webkit-scrollbar-track {
  background-color: hsl(120 75% 50%/1);
  border-radius: 100vw;
  margin-block: 0.5em;
}

::-webkit-scrollbar-thumb {
  background: hsl(120 100% 20% / 1);
  border: 0.25em solid hsl(120 100% 20% / 1);
  border-radius: 100vw;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(120 100% 10% / 1);
}

.unselectable {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */       
}

#header {
    color: darkgreen;
    text-shadow: 0px 2px 3px #555;
    font-family:verdana;
    font-size:250%;
    position: absolute;
    left: 550px;
    top: 5px;
    padding:5px;
    margin-bottom: 5px;
}
#header2 {
    color: darkgreen;
    font-family: Harry p, Helvetica;
    font-size: 3.1em;
    font-weight: 600;
    text-shadow:#fff 0 -1px 4px, 
    #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px;
    position: absolute;
    top:  5px;
    left:   30%;
}
#header2A {
    color: darkgreen;
    font-family: Harry p, Helvetica;
    font-size: 3.1em;
    font-weight: 600;
    text-shadow:#fff 0 -1px 4px, 
    #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px;
    position: absolute;
    top:  5px;
    left:   30%;
}
/*
#header2::before {
    content: url(../images/grampal.png);
} 
*/
h3  {
    color: darkgreen;
    font-family:verdana;
    font-size:200%;
    position: relative;
    left: 450px;
    top: 10px;
    padding:5px;
}
.theme {
    border-radius: 10%;
    margin-top: 5%;
    margin-left: 30%;
    margin-bottom: -3%;
}

#gramTheme {
    border: 8px #ff0;
    border-style: groove;
    border-radius: 5%;
    margin-left: 2rem;
}

#wizwel {
    border: 6px;
    border-color: goldenrod;
    border-radius: 6px;
    border-style: groove;
    margin-left: 2rem;
    margin-top: 4rem;
    margin-bottom: -2rem;
}
.ww {
    width:  100%; /*100% */
    height: 340px;
    margin: 0px 0px 5px 5px; /*top, right, bottom, left */
} 
#boxed {
    background-color: yellow;
    position: relative;
    left: 10px;
    top: 70px;
    border: 6px;
    border-radius: 15px;
    border-style: solid;
    border-color: darkgreen;
    padding: 2px;
    margin: 30px;
}
#list {
    color: black;
    font-family: sans-serif;
    font-size: 1.6em;
}
div#p01  {
    background-color: lightgreen;
    color: black;
    font-family: sans-serif;
    font-size:160%;
    position: relative;
    left: 10px;
    top: 70px;
    border:3px darkgreen;
    border-radius: 20px;
    padding:10px;
    margin:30px;
}

.p02  {
    background-color: lightgreen;
    color: black;
    font-family: sans-serif;
    font-size:160%;
    position: relative;
    left: 10px;
    top: 50px;
    border:3px darkgreen;
    border-radius: 20px;
    padding:10px;
    margin:30px;
    width: fit-content;
}
            
.p03  {
    background-color:#2FD1CD;
    color:  black;
    font-family: sans-serif;
    font-size:160%;
    position: relative;
    left: 10px;
    top: 30px;
    border:3px darkgreen;
    border-radius: 20px;
    padding:10px;
    margin:30px;
}
.narrow {
    max-width: 70%;
    background-color: lightgreen;
    color: black;
    font-family: sans-serif;
    font-size:120%;
    position: relative;
    left: 10px;
    top: 30px;
    border:3px darkgreen;
    border-radius: 20px;
    padding:5px;
    margin:30px;
}
textarea {
    opacity: .1;
    color: red;
    width: 32%;
}

textarea:hover {
    opacity: 1;
    background-color: lightgreen;
    border-style: none; 
}

#able:hover {
    
}
#request:hover {
    
}
#possible:hover {
    
}
#possible2:hover {
    
}
#permission:hover {
    
}
#order:hover {
    
}
table {
    background-color: lightgreen;
    border-color: #139483;
    color:  black;
    font-size: 1em;
    position: relative;
    left: 40px;
    top: 10px;
}
td {
    width: 205px; height: 50px; 
    border-radius: 6px;
    border-style: solid;
    border-width: 5px; 
    border-color:  darkgreen;    /* was chartreuse  */
    margin: 15px;
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-style:  normal;
    font-size: 14px;
    font-weight: bold;
    color:       darkgreen;
} 
.usage {
    background-image: url("../images/ricepaper_blue.jpg");
}
.samples {
    background-image: url("../images/old_paper.jpg");
}
div#p04  {
     background-color: whitesmoke;
     color: chocolate;
     font-family: sans-serif;
     font-size:160%;
     position: relative;
     left: 10px;
     top: 30px;
     border:3px solid brown;
     padding:5px;
     margin:30px;
 }
 div#sub{
    font-family: Arial;
    font-size: 120%;
    background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue));
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    color:transparent;
 }
 .clue {
    border: 5px;
    border-color: #3d91b8;
    border-style: solid;
    border-radius: 10%;
    margin-left: 1rem;
 } 
form {
     position: relative;
     width  : 740px;
     height : 498px;
     margin : 0 auto;
     background: burlywood;
     color   : chocolate;
}

input, select {
 width : 150px;
 margin: 0;
 background: #c6d7ce;
 color   : #FFF;

 -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
    -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
         box-sizing: border-box;
}
.radioLeft {
    margin-left: -35px;  /* -35px origin */
    margin-right: -65px;
}
.textBlock {
    text-indent: 55px;    /* 55px orignally */
    position: relative;
    top: -25px;
}

button {
     position     : relative;
     left         : 40px;
     top          : 30px;
     padding      : 5px;
     font         : bold 1em sans-serif;
     font-style   : oblique;
     border       : 2px solid darkgreen;
     border-radius: 5px;
     background   : none;
     cursor       : pointer;
}

button:after {
     content: " ";
}

button:hover,
button:focus {
      outline   : none;
      background: #000;
      color   : #089494;
}

hr {
     color: #089494
}
.question {
     color: black;
}
.answers li {
 list-style: upper-alpha;
}

label {
 margin-left: 0.5em;
 cursor: pointer;
}

#results {
 background: #dddada;
 color: #3d91b8;
 padding: 3px;
 text-align: center;
 width: 200px;
 cursor: pointer;
 border: 1px solid gray;
}

#results:hover {
 background: #3d91b8;
 color: #ffffff;
 padding: 3px;
 text-align: center;
 width: 200px;
 cursor: pointer;
 border: 1px solid gray;
}
caption {
     background: lightgreen;
     color:  red;
     /*border: 1px solid black; */
}
table#guide {
     background: lightgreen;
     color:  darkgreen;
     padding: 3px;
     text-align: left;
     width: 850px;
     cursor: pointer;
     border: 4px solid black;
     border-radius: 15px;
}
.tool{
    position:relative; /*this is the key*/
    z-index:24;   
}
.tool span{display: none}
.tool:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:10em;   
    border:1.5px  solid green;    
    border-radius: 7px;
    background-color: greenyellow; color:#000;  
    font-size: .8em;
    text-align: center;
    padding: 3px;
}
a.red{

}

p#hideAns2  {
     display:none;
     width: 210px;
     color:  darkgreen;
     font-size: 17px;
     font-weight: 500;
     background-color: yellowgreen;
     border: 3px;
     border-radius: 5px;
     position: relative;
     top: 35px;
     left: 15px;
     padding: 3px;
     margin-bottom: 20px;
}

#rules {
    font-size: 18px;
    font-weight: bold;    
    background-color: black;
    color:    dodgerblue;
    width: 45vw;
    padding: 4px;
    border: 8px;
    border-radius: 6px;
    border-color: #139483;
    border-style: ridge;
    position: relative;
    top: 110px;
    left: 40px;
}
div#content {
    height: 320px;
    width: auto;
    position: relative;
    top: 130px;
}  
 
.drags {
    cursor: url(../images/walker.cur), auto; /*IE and Edge*/
    cursor: url(../images/walker.png) 4 12, auto;  /*chrome, firefox*/
    width: 150px; height: 50px; 
    border-radius: 8px;
    border-style: solid;
    border-width: 15px; 
    border-color:  darkgreen;
    margin: 10px;
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-style:  normal;
    font-size: 14px;
    font-weight: bold;
    color:  dodgerblue;  
} 
#Drag_1, #Drag_2, #Drag_3, #Drag_4, #Drag_5 { 
    width: 150px; height: 50px; 
}
            
#Drop_1, #Drop_2, #Drop_3, #Drop_4, #Drop_5 { 
    width: 150px; height: 50px; 
}
            
#NoDrop_1, #NoDrop_2, #NoDrop_3, #NoDrop_4, #NoDrop_5 { 
    width: 150px; height: 50px; 
}
#pc {
      visibility: visible; 
}
#tab {
      visibility: hidden; 
}
#cell {
      position: relative;
      top:10px;
      visibility: hidden;
}

#next {
    display: block;
    opacity: .6;
    width: 110px;
    padding: 3px;
    position: relative;
    top: 150px;
    left:30px;
    border: 3px;
    border-color: darkgreen;
    border-radius: 15px;
    margin-bottom: 10px;
}
#next:hover {
    opacity: 1;
    border: 2px;
    border-color: #cccc00;
    border-style: solid;
    border-radius: 50% 50%;
}
#back {
    opacity: .6;
    cursor: pointer;
    width: 120px;
    height: 70px;
    padding: 3px;
    position: relative;
    top: 80px;
    left:30px;
    border: 3px;
    border-color: darkgreen;
    border-radius: 15px;
    margin-bottom: 5px;
}
#back:hover {
    opacity: 1;
    border: 2px;
    border-color: #cccc00;
    border-style: solid;
    border-radius: 50% 50%;
    padding:  2rem;
}
#gramIcon {
    display: block;
    cursor: pointer;
    width: fit-content;
    border-radius: 50%;
    padding:       4px;
    border: 5px solid yellow;
    margin-top:  12rem;
    margin-left: 3rem;
    opacity: .6;
}
#gramIcon:hover {
    opacity: 1;
}
#base {
    color: darkgreen;
    margin-left: 5rem;
    margin-top: 10rem;
}
#base2 {
    color: darkgreen;
    margin-left: 3rem;
    margin-top: .5rem;
}
#footer {
    position: relative;
    top: 150px;
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
    margin-top: 2rem;
}
#hw {
    position: relative;
    top:      10vh;
}
#modaux{
    width: 55%;
    margin-left: 2rem;
}
.ref{
    background-color:#FFF;
    color:           black;
    border:          4px;
    border-color:    silver;
    border-style:    inset;
    padding:         .3rem;
    width:           fit-content;
    margin-left:     2rem;
}
/******************************************************************************/
/****************************LAPTOP Wide***************************************/
/******************************************************************************/
@media only screen and (max-width : 1366px) and (min-width: 1030px) {
    #header2 {
        width: 950px;
        height: 120px;
        text-align: left;
        position: absolute; top: 40px; left: 100px;
        margin-bottom: 15rem;
    }
    #header2A {
        width: 950px;
        height: 120px;
        text-align: left;
        position: absolute; top: 40px; left: 250px;
        margin-bottom: 15rem;
    }
    .theme {
        border-radius: 10%;
        margin-top: 7%;
        margin-left: 20%;
        margin-bottom: -3%;
    }
    #wizwel {
        border: 6px;
        border-color: goldenrod;
        border-radius: 6px;
        border-style: groove;
        margin-left: 5rem;
        margin-top: 4.5rem;
        margin-bottom: -3rem;
    }
    .ww {
        width:  320px; /*100% */
        height: 220px;
        margin: 0px 0px 5px 10px; /*top, right, bottom, left */
    } 
    div#p01, div#p02, div#p03, div#p04, div#p05  {
        font-size: 1.7rem;
        padding:10px;
        width: 80%;
    }
    .p02, .p03 {
        font-size: 1.7rem;
        width: 80%;
    }
    
}


/************************************* FOR TABLET*****************************/
/*****************************************************************************/
        @media only screen and (max-width : 990px) and (min-width: 400px) {
            #header {
                color: darkgreen;
                text-shadow: 0px 2px 3px #555;
                font-family:verdana;
                font-size:190%;
                position: absolute;
                left: 210px;
                top: 5px;
                padding:5px;
                margin-bottom: 5px;
            }
            #header2A {
                margin-top: 2rem;
                margin-left: -5rem;
            }
            h3  {
             color: darkgreen;
             font-family:verdana;
             font-size:140%;
             position: relative;
             left: 210px;
             top: 10px;
             padding:5px;
            }
            div#p01, div#p02, div#p03, div#p04, div#p05  {
                font-size:120%;
                padding:10px;
                margin:25px;
            }
            div#p03 {
                background-color: yellowgreen;
            }
            #rules {
                font-size: 100%;
                color: dodgerblue;
            }
            .radioLeft {
                margin-left: -35px; 
            }
            .textBlock {
                text-indent: 55px;
                position: relative;
                top: -20px;
            }
            td {
                font-size: 75%;
                width: 120px; height: 40px;
                border-width: 6px; 
                margin-bottom: 2px;
            }
            div#content {           
                
            } 
            .drags:-webkit-drag {
                border-color:  gold;
            }
            .drags {
                -webkit-user-drag: element;
                width: 120px; height: auto; 
                border-radius: 7px;
                border-style: solid;
                border-width: 4px; 
                border-color:  darkgreen;
                margin: 7px;
                padding: 5px;
                font-family: Arial, Helvetica, sans-serif;
                font-style:  normal;
                font-size: .9em;
                font-weight: bold;
                color:  darkgreen;  
            } 
            #Drag_1, #Drag_2, #Drag_3, #Drag_4, #Drag_5 { 
                width: 120px; height: 40px; 
                font-size:80%;
            }
                        
            #Drop_1, #Drop_2, #Drop_3, #Drop_4, #Drop_5 { 
                font-size: 1em;
                width: 120px; height: 40px; 
            }
           
            #NoDrop_1, #NoDrop_2, #NoDrop_3, #NoDrop_4, #NoDrop_5 { 
                width: 120px; height: 40px; 
                font-size:80%;
            }
            .AudBox {
                display: inline-block ;
                background: yellowgreen;
                width: 130px;
                padding: 5px;
                margin:5px 5px 15px 0px; /*top, right, bottom, left */
            }
            audio {
                padding: 1px;
                width: 128px;
                height: 15px;
                position: relative;
                top: 10px;
                margin:0px 0px 1px 0px; /*top, right, bottom, left */
            }
            caption {
                background: lightgreen;
                color:  black;
            }
            table#guide {
                background: lightgreen;
                color:  darkgreen;
                padding: 3px;
                text-align: left;
                width: 95%;
                font-size: .95em;
                cursor: pointer;
                border: 4px solid black;
                border-radius: 15px;
            }
            #next {
                width: 180px;
                height: 80px;
                position: relative;
                top: 80px;
            }
            #gramIcon {
                margin-top:  3rem;
                margin-left: 1rem;
                opacity: .7;
            }
            #back {
                width: 180px;
                height: 80px;
                position: relative;
                top: 70px;
            }
            #pc {
                visibility: hidden;
                display: none;
            }
            #tab {
                visibility: visible;
            }
            #cell {
                visibility: hidden;
                display: none;
            }
            #base {
                margin-left: 3rem;
                margin-top: 13rem;
            }
            #base2 {
                margin-left: 3rem;
                margin-top: 13rem;
            }
        }
         /*********************************************************************/
         /**************************CELLPHONE**********************************/
         /*********************************************************************/
        @media only screen and (max-width : 414px) and (min-width: 280px) {
            #header {
                color: darkgreen;
                text-shadow: 0px 2px 3px #555;
                font-family:verdana;
                font-size:.9em;
                position: absolute;
                left: 100px;
                top: 5px;
                padding:5px;
                margin-bottom: 10px;
            }
            #header2 {
                color: darkgreen;
                font-family: Harry p, Helvetica;
                font-size: 1.9rem;
                font-weight: 600;
                text-shadow:#fff 0 -1px 4px, 
                #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px;
                position: absolute;
                top:   30px;
                left:  5%;
            }
            #header2A {
                color: darkgreen;
                font-family: Harry p, Helvetica;
                font-size: 1.5rem;
                font-weight: 600;
                text-shadow:#fff 0 -1px 4px, 
                #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px;
                position: absolute;
                top:   20px;
                left:  27%;
                margin-bottom: -8rem;
            }
            .theme {
                width:45%; height: 7rem;
                border-radius: 10%;
                margin-top: 24%;
                margin-left: 19%;
                margin-bottom: -10%;
            }
            
            #gramTheme {
                border: 8px #ff0;
                border-style: groove;
                border-radius: 5%;
                margin-left: 1rem;
                width: 90%;
            }
    
            .p01 {
                margin-top: -5rem;
            }
            .p02 {
                font-size: 100%;
                margin-top: 30px;
            }
            #hw {
                position: relative;
                top:      10vh;
                margin-top:  2.5rem; 
            }
            h3  {
             color: darkgreen;
             font-family:verdana;
             font-size: 1em;
             position: relative;
             left: 30px;
             top: 10px;
             padding:5px;
            }
            #wizwel {
                border: 6px;
                border-color: goldenrod;
                border-radius: 6px;
                border-style: groove;
                margin-left: 2rem;
                margin-top: 4.5rem;
                margin-bottom: -3rem;
            }
            .ww {
                width:  320px; /*100% */
                height: 240px;
                margin: 0px 0px 5px 0px; /*top, right, bottom, left */
            } 
            #boxed {
                margin: 20px;
            }
            #list {
                font-size: 1em;
            }
            div#p01, div#p02, div#p03, div#p04, div#p05  {
                font-size:80%;
                padding:6px;
                margin:25px;
            }
            
            div#p03  {
                font-size: .6em;
                background-color: yellow;
                border:5px darkgreen;
                border-radius: 20px;
                padding:10px;
                margin:10px;
            }
            div#sub {
                font-size: 1.1em;
                font-weight: 600;
            }
            #rules {
                font-size: 1.2rem;
                color: dodgerblue;
            }
            div#content {
                height: 320px;
                position: relative;
                top: 130px;
                left: -.5rem;
                width: fit-content;
            }  
            .question {
                font-size: .7em;
                font-weight: 600;
                color: darkgreen;
            }
            .radioLeft {
                font-size: .7em;
                margin-left: -50px; 
            }
            .textBlock {
                font-size: .7em;
                text-indent: 45px;
                position: relative;
                top: -20px;
                color: darkslategray;
                font-weight: 600;
            }
            table {
                background-color: lightgreen;
                border-color: #139483;
                color:  black;
                font-size: 1em;
                position: relative;
                left: 20px;
                top: 10px;
            }
            td {
                font-size: 75%;
                width: 150px; height: 30px;
                border-width: 2px; 
                margin-bottom: 2px;
                
            }
            .drags {
                width: 40px; height: auto; 
                border-radius: 7px;
                border-style: solid;
                border-width: 4px; 
                border-color:  darkgreen;
                margin: 7px;
                padding: 5px;
                font-family: Arial, Helvetica, sans-serif;
                font-style:  normal;
                font-size: .6em;
                font-weight: bold;
                color:  darkgreen;  
            } 
            #Drag_1, #Drag_2, #Drag_3, #Drag_4, #Drag_5 { 
                width: 45px; height: 80px; 
                margin-bottom: 2px;
            }
                        
            #Drop_1, #Drop_2, #Drop_3, #Drop_4, #Drop_5 { 
                font-size: .9em;
                width: 40px; height: 80px; 
                margin-bottom: 2px;
            }
           
            #NoDrop_1, #NoDrop_2, #NoDrop_3, #NoDrop_4, #NoDrop_5 { 
                width: 45px; height: 80px; 
                margin-bottom: 2px;
            }
            .AudBox {
                display: inline-block ;
                background: yellowgreen;
                width: 130px;
                padding: 5px;
                margin:5px 5px 15px 0px; /*top, right, bottom, left */
            }
            audio {
                padding: 1px;
                width: 128px;
                height: 15px;
                position: relative;
                top: 10px;
                margin:0px 0px 1px 0px; /*top, right, bottom, left */
            }
            caption {
                background: lightgreen;
                color:  red;
                font-size: 1.3rem;
                /*border: 1px solid black; */
            }
            table#guide {
                background: lightgreen;
                color:  darkgreen;
                padding: 3px;
                text-align: left;
                width: 80%;
                font-size: 1em;
                cursor: pointer;
                border: 4px solid black;
                border-radius: 15px;
            }
            div#p03  {
                background-color: linen;
                color:  darkgreen;
                font-family: sans-serif;
                font-size:90%;
                position: relative;
                left: 5px;
                top: 30px;
                border:3px darkgreen;
                border-radius: 20px;
                padding:5px;
                margin:30px;
            }
            .narrow {
                margin-bottom: -20px;   
            }
            .answers {
                font-size: .7em;
                text-indent: 1px;
                position: relative;
                top: -20px;
                left: 2px;
                color: darkslategray;
                font-weight: 600;
            }
            #cell {
                position: relative;
                top:10px;
                visibility: visible;
                display: inherit;
            }
            #next {
                opacity: .7;
                width:  95px; 
                height: 50px; 
                position: relative;
                top: 150px;
                padding: 2px;
            }
            #back {
                width: 95px;
                height: 50px;
                position: relative;
                top: 70px;
                padding: 2px;
                margin-bottom: 1rem;
            }
            #back:hover {
                
            }
            .clue {
                width: 30%;
                border: 5px;
                border-color: #3d91b8;
                border-style: solid;
                border-radius: 10%;
                margin-left: 1rem;
                margin-bottom: 1rem;
            } 
            #pc {
                visibility: hidden;
                display: none;     
            }
            #tab {
                visibility: hidden;
                display: none;
            }
            #gramIcon {
                margin-top:  17rem;
                margin-left: 1rem;
                opacity: .7;
            }
            #modaux{
                width: 90%;
                margin-left: 2rem;
            }
            #base {
                margin-left: 3rem;
                margin-top:  19rem;
            }
            #base2 {
                margin-left: 1rem;
                margin-top:  1rem;
            }
            #footer {
                position: relative;
                top: 22rem;
                background-color:black;
                color:white;
                margin-top: 2rem;
            }
}