/* 060417 - uses main.css*/
/*.content {min-height: calc(100vh - 70px);}*/
/* 011016 - css moved from clozehead to cloze.css*/

html, body {height: 100%;width:100%;} /* trick used to ensure dialog box is fullscreen*/
body {min-height: 100%;}

body {color:#ffffff;background-color:#008cff;
      font-size:10pt;margin:0;
      text-align:left;
      }
#content {margin:auto;position:relative;
          min-height: calc(100vh - 30px);/* allow content o push footer down if to much*/}
          
.box {border-bottom:1px solid orange;} /* to put boxes around invisible a tags */
/* allow for box height*/

#maingame {top:0;border:none;} /* overwrite main.css maingame css*/
#main {position:absolute;top:60px;}
#goodstuff {line-height:1.8;margin-left:200px;margin-top:0;
            border:1px solid #808080;padding:10px;
            border-radius: 10px;
            background-color:#006090;
            background: rgba(0, 0, 0, 0) radial-gradient(#00f, #000058) repeat scroll 0 0;
            min-height: 350px; /* make at least 350px high*/
           } 
            
h1 {margin:auto;margin-top:0;text-align:center;}
h1 a {visibility:visible;}
#header {border-style:ridge;border-color:#ffd68c;border-radius: 10px;
         font-size:16pt;font-family:arial;
         color:navy;background-color:#006090;
         background: linear-gradient(to bottom, rgba(221,211,83,1) 32%,rgba(234,162,49,1) 64%); /* W3C */
         }

#wikiimage {float:right;margin-top:0px;}
img {border-radius:10px;margin:2px;}
#wikiimage img {background-color: #ffffff;}

/* make links invisible  match foreback ground color and add a border to each link*/
a {display:inline;padding:2px;color:orange;visibility:hidden;}

a.nonwiki {visibility:visible;} /* nonquiz links*/

#list {width:200px;}
#list div {text-align:left;
           padding:0 2px 0 6px;margin-left:5px;
           background-color:transparent;border-left:orange 10px solid;
           width:170px; 
           }
#list div:hover {cursor:pointer;box-shadow:rgba(255, 180, 2, 0.8) 0 0 3px 3px;} 

.listlinks {border-left:orange 10px solid; /* apply keyword style to information section*/

            }
.draggable.is-pointer-down {cursor:pointer;box-shadow:rgba(255, 180, 2, 0.8) 0px 0px 3px 3px;}

#alertbutton {visibility:visible;}
#alertboxtext {background: radial-gradient(#00f, #000058) repeat scroll 0 0 rgba(0, 0, 0, 0);}

#alertboxtext h1 {background: rgba(0, 0, 0, 0)
                  linear-gradient(to bottom,rgba(241, 231, 103, 1) 32%, 
                                            rgba(254, 182, 69, 1) 64%)
                                            repeat scroll 0 0;
                  color:navy;}

#sitelink a {visibility:visible;} /* ensure link in alertbox is visible*/

.infolink {font-size:7pt;border:none;} /*information link*/

/* responsive design for smaller screens*/
@media screen and (max-width: 650px) /* screens less than 800px*/
  {
   #header {font-size:12pt;}
   #list div {width:100px;margin:0;}
   #wikiimage img {display:none;}
   #goodstuff {margin-left:150px;}

  }