/* AppController.js
*
* Author: BD Roads
*
* Style sheet for tutorial.
*
*/

/*
================================================================================
General
================================================================================
*/



body {
    color: #303030;
	/*background-color: #333333;*/
    background-color: #8fbc8f;
}

.unselectable {
    -webkit-touch-callout: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

/*
================================================================================
Block: begin-content
================================================================================
*/

.begin-content {
    display:none;
}
.begin-content2 {
    display:none;
}
.begin-content3 {
    display:none;
}

.instruction_drawing1 {
    display:none;
}
.instruction_drawing2 {
    display:none;
}

.minesweeper{
    display:none;
}

.consent{
    display:none;
}

.return-hit{
    display:none;
}

.overview{
    display:none;
}

.time_limit{
    display:none; 
}

.entry-quiz{
    display:none; 
}

.entry-quiz-split-merge{
    display:none; 
}

.exit-quiz{
    display:none; 
}

.comment{
    display:none;
}

.debriefing-content{
    display:none;
}

.debriefing-instructions1{
    display:none;
}
.debriefing-instructions2{
    display:none;
}
.debriefing-instructions3{
    display:none;
}

.instruction_minesweeper1{
    display:none;
}

.instruction_minesweeper2{
    display:none;
}

.instruction_minesweeper3{
    display:none;
}

.draw-content1{
    display:none;
}

.draw-content2{
    display:none;
}

.association-task{
    display:none;
}

.association-stimuli{
    display:none;
}

.instruction_association{
    display: none; 
}

.instruction_association_debriefing{
    display:none; 
}

.instruction_association2{
    display:none; 
}

.instruction_main_task{
    display:none; 
}

/*
================================================================================
Block: trial-content
================================================================================
*/

.trial-content {
    display: none;
    max-width: 1200;
}

#trial-content__stimulus {
    font-size: 10em;
    text-align: center;
}

.trial-content__screen-progress {
    padding: 5px; /*so content doesn't touch the edge of the tile*/
    margin-top: 10px; /* this needs to be in agreement with gutter size to have uniform gutters top-bottom like left-right */
    margin-bottom: 10px; /* this needs to be in agreement with gutter size to have uniform gutters top-bottom like left-right */
    text-align: center;
    font-size: x-large;
}

/*
================================================================================
Block: begin-content
================================================================================
*/

.end-content {
    display: none;
}


/*
================================================================================
Block: custom-button
================================================================================
*/

.custom-button{
    width: 100%;
    border-radius: 10px;
    padding: 5px; /*so content doesn't touch the edge of the tile*/
    margin-top: 10px; /* this needs to be in agreement with gutter size to have uniform gutters top-bottom like left-right */
    margin-bottom: 10px; /* this needs to be in agreement with gutter size to have uniform gutters top-bottom like left-right */

    /* For Safari 3.1 to 6.0 */
    -webkit-transition-duration: .3s;
    /* Standard syntax */
    transition-duration: .3s;
    border-style: solid;
    border-width: thin;
    text-align: center;
    font-size: x-large;
}


.custom-button_disabled {
    /*background: #292929;*/
    background: #8fbc8f;
    border-color: #404040;
    color: #404040;
}
.custom-button_disabled:hover {
    cursor: default;
}

.custom-button_enabled {
    /*background: #404040;*/ 
    background: #8fbc8f;
    /*border-color: #00CCFF;*/
    border-color: #000000;
    box-shadow: 5px 10px 10px #101010;
}

.custom-button_enabled:hover {
    background: #404040;
    /*background: #8fbc8f;*/
    border-color: #FFD119;
    cursor: pointer;
}




.chunk-button_enabled {
    background: #73b764;
    border-color: #898989;
    border-color: #000000;
    box-shadow: 5px 10px 10px #101010;
}

.chunk-button_enabled:hover {
    background: #404040;
    /*background: #8fbc8f;*/
    border-color: #FFD119;
    cursor: pointer;
}



#theImage { visibility: hidden; }

.config_form{ 
    padding-right: 50%; 
    padding-top: 2%; 
}

.config_heading{
    padding-left: 30px;
    padding-top: 2%
}

.config_input_div{
    padding-left: 10%;
}

#config_submit{
    margin-left: 5%;
    margin-top: 20px;
    margin-bottom: 40px;
}

#comment_area{
    width: 100%;
    color: black;
}



/* .grid-container {
    margin-top: 5%;
    margin-bottom: 5%;
    display: grid;
    grid-template-columns: auto auto auto;
    background-color: #2196F3;
    padding: 10px;
  }
  .grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    color:black;
    padding: 20px;
    font-size: 30px;
    text-align: center;
  } */



  .grid-container {
    margin-top: 5%;
    margin-bottom: 5%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .grid-container div {
    aspect-ratio: 1;
    text-align: center;
    border: 1px dashed #404040;
    background-color: white;
  }
  
  .grid-container-split-merge {
    margin-top: 10%;
    margin-bottom: 10%;
    display: grid;
  }

  .grid-container-split-merge div {
    aspect-ratio: 1;
    text-align: center;
    
  }

  .grid-container_draw {
    margin-top: 5%;
    margin-bottom: 5%;
    padding-left: 18%;
    padding-right: 18%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .grid-container_draw div {
    aspect-ratio: 1;
    text-align: center;
    border: 1px dashed #404040;
    background-color: white;
  }

  #trial_count{
    margin-top: 1%;
    font-size: x-large;
    font-weight: bold;
  }

  #time{
    margin-top: 1%;
    font-size: x-large;
    font-weight: bold;
  }

  #association_time{
    margin-top: 1%;
    font-size: x-large;
    font-weight: bold;      
  }

  #credits{
    
    font-size: x-large;
    font-weight: bold;
  }

  #credits_earned{
    
    margin-left: 2%; 
    font-size: x-large;
    display:none; 
  }

  

  #debriefing_count{
    margin-top: 1%;
    font-size: x-large;
    font-weight: bold;
  }

  #minesweeper_count{
    margin-top: 1%;
    font-size: x-large;
    font-weight: bold;
  }

  .grid_option{
    text-align: center;
    font-size: x-large;
    font-weight: bold;
  }

  #description_debriefing{
    font-size: x-large;
  }

  .instruction_img{
      text-align: center;
      padding: 2%;
  }

#next-button{
    margin-top: 2%;
    margin-bottom: 10%;
}  

.bb_img{
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.bb_button {
    float: left;
    width: 14%;
}

#grid_container_split_merge{
    display:none; 
}

#save_split_merge_button{
    display:none; 
}

#clear_split_merge_button{
    display:none; 
}

#remove_split_merge_button{
    display:none; 
}

#stop_remove_split_merge_button{
    display:none; 
}

#back_split_merge_button{
    display:none; 
}

.merge{
    display:none; 
}

#association_target{
    margin-top:15%;
    margin-bottom:15%;      
    display: block;
    margin-left: auto;
    margin-right: auto;
    -webkit-transform: scale(4); /* Saf3.1+, Chrome */
       -moz-transform: scale(4); /* FF3.5+ */
         -o-transform: scale(4); /* Opera 10.5+ */
            transform: scale(4);
               /* IE6–IE9 */
               filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}

#association_debriefing_target{
    margin-top:15%;
    margin-bottom:15%;      
    display: block;
    margin-left: auto;
    margin-right: auto;
    -webkit-transform: scale(4); /* Saf3.1+, Chrome */
       -moz-transform: scale(4); /* FF3.5+ */
         -o-transform: scale(4); /* Opera 10.5+ */
            transform: scale(4);
               /* IE6–IE9 */
               filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}

#association_bb{
    margin-top:25%;
    margin-bottom:5%;      
    display: block;
    margin-left: auto;
    margin-right: auto;
    -webkit-transform: scale(4); /* Saf3.1+, Chrome */
       -moz-transform: scale(4); /* FF3.5+ */
         -o-transform: scale(4); /* Opera 10.5+ */
            transform: scale(4);
               /* IE6–IE9 */
               filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');

}

#association_bb_target{
    margin-top:25%;
    margin-bottom:25%;      
    display: block;
    margin-left: auto;
    margin-right: auto;
    -webkit-transform: scale(4); /* Saf3.1+, Chrome */
       -moz-transform: scale(4); /* FF3.5+ */
         -o-transform: scale(4); /* Opera 10.5+ */
            transform: scale(4);
               /* IE6–IE9 */
               filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');

}

#association_img{
    display:none;
    margin-top:5%;
    margin-bottom:5%;      
    display: block;
    margin-left: auto;
    margin-right: auto;
    -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
       -moz-transform: scale(0.5); /* FF3.5+ */
        -ms-transform: scale(0.5); /* IE9 */
         -o-transform: scale(0.5); /* Opera 10.5+ */
            transform: scale(0.5);
               /* IE6–IE9 */
               filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');

}

#association_img_target{
    display:none;
    margin-top:5%;
    margin-bottom:5%;      
    display: block;
    margin-left: auto;
    margin-right: auto;
    -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
       -moz-transform: scale(0.5); /* FF3.5+ */
        -ms-transform: scale(0.5); /* IE9 */
         -o-transform: scale(0.5); /* Opera 10.5+ */
            transform: scale(0.5);
               /* IE6–IE9 */
               filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');

}


.association2-image{
    display: block;
    margin-top: 10%; 
    margin-left: auto;
    margin-right: auto;
    height:150px;
    border: 1px solid #303030; 
    padding: 10%;
    border-radius: 10px;
}

.association2-container-empty{
    display: block;
    margin-top: 10%; 
    margin-left: auto;
    margin-right: auto;
    height:150px;
    border: 1px solid #303030; 
    border-radius: 10px;
    background-color: #898989;
}

.association2-image-empty{
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 10%;
    height:150px;
}

.association_image_button{
    height:100px; 
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #303030; 
    padding: 10%; 
    border-radius: 10px;
}

.association_image_button:hover {
    background: #404040 !important;
    border-color: #FFD119;
    cursor: pointer;
}


#miss{
    display: none; 
    margin-top:5%;
    font-size: 3em;
    color:#a70000; 
    font-weight: bold;
    text-align: center;
}

.association-task-2{
    display:none; 
}

.association-debriefing{
    display:none; 
}