/* 221016 - Centralised footer and made it move down if there is too much content*/
/*.content {min-height: calc(100vh - 70px);}
.footer {  height: 50px;}
*/
/* 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-family:verdana,arial,sans-serif;
      font-size:10pt;margin:0px;}
#content {width:1000px;;margin:auto;position:relative;
          min-height: calc(100vh - 30px);/* allow content o push footer down if to much*/}
          
#keywords {float:left;width:200px;text-align:left;
           font-weight:bold;
           }
.box {border-bottom:1px solid orange;} /* to put boxes around invisible a tags */
/* allow for box height*/
#goodstuff {line-height:1.8;margin-left:200px;margin-top:0px;
            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 {font-size:12pt;margin:auto;margin-top:0px;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(241,231,103,1) 32%,rgba(254,182,69,1) 64%); /* W3C */
         }
#quiz {font-style:italic;font-size:14pt;}
#wikiimage {float:right;margin-top:0px;}
img {border-radius:10px;margin:2px;}
#wikiimage img {background-color: #ffffff;}

#instructions {text-align:center;margin-bottom:0px;font-weight:normal;
               border-style:ridge;border-color:#ffd68c;
               border-radius: 10px;
          color:navy;
          background: linear-gradient(to bottom, rgba(241,231,103,1) 32%,rgba(254,182,69,1) 64%); /* W3C */
}

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

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

#list {width:200px;}
#list div {text-align:left;
           padding:0px 2px 0px 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) 0px 0px 3px 3px;}   
.draggable.is-pointer-down {cursor:pointer;box-shadow:rgba(255, 180, 2, 0.8) 0px 0px 3px 3px;}

#footnote {font-size:8pt;position:absolute;height: 15px;
           left:50%;
           -webkit-transform:translate(-50%,0); /* translate not supported in android browser*/
           transform:translate(-50%,0);}

#alertbutton {visibility:visible;}
#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*/

/* responsive design for smaller screens*/
@media screen and (max-width: 999px) /* screens less than 999px*/
  {
   #content {width:95%;}
   h1 {font-size:10pt;}
   #footnote {font-size:7pt;}
  }