/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*menu image blue 0d5fcf*/


html,
button,
input,
select,
textarea {
color: #222;
}
input:focus{border:2px solid #900;}

html {
font-size: 1em;
line-height: 1.4;
height:100%
}

body {
font-family:Verdana, sans-serif;
font-size: 18px ;
background:#dddddd;
height:100%
}

::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}

::selection {
background: #b3d4fc;
text-shadow: none;
}

h1,h2,h3 {
  font-weight:normal
}

img {
max-width: 100%;
height: auto;
width: auto;
}

ul {
list-style:none;
padding:0;
margin:0
}

a {
color:#2951ab;
}
a:hover{
color: #182b57
}

.centred{
  text-align:center
}
textarea {
resize: vertical;
}

.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}

.center{
  text-align:center
}
.font400{
  font-weight:400;
  font-size:2.4em
}
hr{
  display:block;
  height:1px;
  border:0;
  border-top:1px
  solid #ccc;
  margin:1em 0;
  padding:0;
}

.button,
button{
  display:block;
  margin:25px auto 0 auto;
  font-size:24px;
  font-weight:300;
  white-space: normal;
  /*line-height:17px;
  height:54px;*/
  padding: 20px;
  color:#fff;
  text-align:center;
  text-decoration:none;
  background-color:#378a91;
  border:1px solid #333;
  cursor:pointer;
  box-sizing:border-box;
  border-radius: 4px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.blue-button{
  background:#3e527e
}

button:hover{
  border-color:#666;
  outline:0;
  background:#0a6971;
}
.blue-button:hover{
  background:#224084;
  outline:0;
  border-color:#666;
}
button:focus{
  outline:none
}
button:active{
  box-shadow:none
  }
.tooltip {
  position:relative; 
  border-bottom:1px dashed #000;
}
.tooltip:before {
  content: attr(data-text); /* here's the magic */
  position:absolute;
  
  /* vertically center */
  top:50%;
  transform:translateY(-50%);
  
  /* move to right */
  left:100%;
  margin-left:15px; /* and add a small left margin */
  
  /* basic styles */
  width:200px;
  padding:10px;
  border-radius:10px;
  background:#000;
  color: #fff;
  text-align:center;

  display:none; /* hide by default */
}
.tooltip:hover:before {
  display:block;
  font-size:0.9em
}

.wrapper, .menuWrapper {
width: 97%;
margin: auto ;
}

.footer-container {
border-top:1px solid #224084;
box-shadow: 1px -5px 4px -4px rgba(0,0,0,0.19);
}

.header-container{
background:#f5f5f5;
box-shadow: 0 2px 2px rgba(0,0,0,0.19);
border-bottom:1px solid #224084
}

.header{
  position:relative;
  /*z-index:40;*/
  height:60px;
  margin:0;
  padding-left:5px
}
#title{
  display:inline-block;
  position:relative;
  top:3px;
  left:5px
}
#title a{
  font-size:26px;
  line-height:55px;
  color:#2951ab;
  font-family:Verdana, sans-serif;
  font-weight:normal;
  text-decoration:none;
}
#title a:hover{
  text-decoration:none;
  color:#182b57
}
.qmarks{
  display:inline-block;
  margin-left:60px;
  display:none;
}

.sharetop{
  position:absolute;
  top:70px;
  right:15px;
  z-index:100
}

nav{
  margin: 0;
  padding:0;
}

[id^=drop]{display:none;}
[id^=drop]:checked + ul{display:block;}

.toggle + a {display:none;}

.menu{display:none;}

.toggle{
  width:70px;
  height:60px;
  line-height:64px;
  border-left:1px solid #224084;
  border-right:1px solid #224084;
  text-align:center;
  position:absolute;
  top:0;
  right:0;
  font-size:22px;
  color:#2951ab;
  font-family:Verdana, sans-serif;
  font-weight:normal;
  z-index:160
}
.backtotop{display:none;}
.toggle:hover{cursor:pointer}
nav ul{
  width:100%;
  float:right;
  padding:0;
  margin:0;
  list-style:none;
  position:relative;
  z-index:120;
  border:1px solid #224084;
  border-top:0;
  box-shadow: 0 2px 2px rgba(0,0,0,0.19);
}
nav ul li{
  display:block;
  width:100%;
  margin:0px;
  float:left;
}
nav a{
  display:block;
  padding-left:15px;
  font-size:18px;
  line-height:55px;
  color:#2951ab;
  font-family:Verdana, sans-serif;
  font-weight:normal;
  text-decoration:none;
  border-bottom:1px solid #224084;
  background:#f5f5f5
  }

nav a:hover{
  color:#182b57;
  text-decoration:none
}
li > a:after{content:' +';}
li > a:only-child:after{content:'';}

.bannerImg{
  height:100px;
  background-image:url("../images/abstract.jpg");
  background-repeat:repeat-x;
}
.main-container:after {
  content: "";
  display: block;
}

.main {

  padding: 0 0 15px 0;
}

.text{
  width:95%;
  margin:auto
}
.article{
  background:#f5f5f5;
  padding:10px 5px;
}

.cats a{
  text-decoration:none
}

  /*HOME PAGE IMAGE LINKS*/
  .menuItem{
  display:block;
  width:95%;
  border:solid 1px green;
  margin:10px auto 25px auto;
  text-align:center;
  background-color:#3e527e;
  height:200px;
  position: relative;

  }
  .menuItem:nth-child(2){
    background-color:#378a91;
  }
  .charadeItem{
    display:block;
    width:95%;
    border:solid 1px teal;
    margin:10px auto 25px auto;
    text-align:center;
    position: relative;
    background-color:#d0dad7
  }

  .dramaItem{
    background:#c5ccdc
  }

  .menuItem h1{
    text-align:center;
    font-size:40px;
    font-weight:normal;
    margin:0;
    color:#fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .charadeItem h2{
    font-weight:300;
  }

  .menuItem p{
    margin:0;
    font-size:18px;
  }

  .menuItem a, .charadeItem a{
    text-decoration:none;
    color:#444
  }

  .menuItem a:hover, .charadeItem a:hover{
    color:#182b57
  }

  section{
    margin-top:10px
  }

  .catheader{
    font-weight:normal;
    color:#333
  }


  .pageHeader{
  margin:0 auto;
  text-align:center;
  padding:0 5px;
  }

  .pageHeader h1{
    text-shadow: 1px 0px 0px #ccc;
    color:#0d2e7a;
    font-weight:normal
  }
    .pageHeader p{
      font-size:24px
    }

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

.imig img{
  height:150px;
  width:300px;
  margin: 0;
  box-shadow: 0 2px 2px rgba(0,0,0,0.23);
}


  #quiz {
    text-align: center;
    margin:auto;
  }

  .mainDiv{
    display: block;
    margin:0 auto 20px auto;
    box-shadow: 0 1px 1px rgba(0,0,0,0.40);
    border:1px solid #656c79;
  }

  .quick-links {
    margin-top:40px;
    border:1px solid #ddd;
    text-align:center;
  }
  
  .link {
    display:flex;
    flex-direction:row
  }
  .link div {
    flex:1;
    text-align:center
  }

  .footer-container {
    background:#f5f5f5;
  }

  .footer-container footer {
  padding: 10px 0;
  font-size:0.9em;
  color:#0d2e7a;
  }

  #otherSites{
  display:block;
  margin:15px auto 0 auto;
  max-width:500px;
  }
  #otherSites h3{
    text-align:center;
    margin:0;
    font-weight:300;
  }
  #otherSites a{
    font-size:1.1em;
    text-decoration:none
  }
  #otherSites a:hover{
    color:#182b57
  }
  #copy{
  text-align:center;
  font-size:0.9em
  }

  #game{
    margin:20px auto;
    display:block;
    padding:20px 0;
    background:#f9eed1;
    text-align:center;
    border:2px solid #52c7a3;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.19), 0 3px 3px rgba(0,0,0,0.23);
    max-width:700px
  }

  .contact{
    padding:0 15px;
  }

  /* ===============
  ALL: IE Fixes
  =============== */

  .ie7 .title {
  padding-top: 20px;
  }


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

@media (min-width:500px){
.sharetop{
  top:17px;left:320px;}
.toggle{
  width:80px;
}
.article {
  padding-left:15px;
  padding-right:15px;
}

#bottomLinks{
margin-bottom:20px
}
#leftB{
display:inline-block;
width:50%;
text-align:left
}
#rightB{
display:inline-block;
float:right;
width:50%;
text-align:right;
}
}

@media (min-width:600px){

  .text{
    width:97%
  }

}

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

@media (min-width:768px){

  button{
    padding:20px 40px
  }
  .qmarks{
    display:inline-block;
  }



.hide600{
  display:none
}

.main {
  padding: 15px 0;
}

.menuItem,.charadeItem{
  display:inline-block;
  width:47%;
  margin:10px 1% 20px 1%;
  vertical-align:top;

}
.menuItem{
  height:250px
}

.dramaItem{
  display:block;
  width:75%;
  margin:20px auto
}

.article {
  border:1px solid #bbb;
  padding-left:30px;
  padding-right:30px;
}


.ui-dialog{
width:450px
}

.oldie nav a {
margin-bottom:1px;
}

}


/*///////////////////////////////*/
@media (min-width:980px){

  .main{
    width:940px;
    margin:auto;

  }
  .sharetop{
    right:450px;
  }
  .toggle{
    position:absolute;
    right:50px;
  }
/* 
    .toggle, #drop{display:none;}
    .toggle + a,
    .menu{display:block;}
    .menu li img{height:25px}
    
    nav{
      position:absolute;
      right:15px;
      top:0;
    }
    
    nav ul{
      border:none;
      width:auto;
      box-shadow:none;
    }
    
    nav ul li{
      width:auto;
      display:inline-block;
      float:none;
      margin: 0
    }
    
    nav a{
      display:block;
      margin:0 10px;
      line-height:52px;
      border-bottom:1px solid #224084;
      padding:7px 0 0 0;
      border:none;
    }
    
     */
    #title{
      font-size:28px;}
}

/*///////////////////////////////*/
@media only screen and (min-width: 1100px) {
  .wrapper {
  width: 90%;
  margin: auto ;
  }
  .main{
    width:940px;
  }
  /* nav{
    right:70px;
  } */
  .toggle{
    position:absolute;
    right:100px;
  }
}

/* ==========================================================================
Helper classes
========================================================================== */

.ir {
background-color: transparent;
border: 0;
overflow: hidden;
*text-indent: -9999px;
}

.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}

.hidden {
display: none !important;
visibility: hidden;
}

.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}

.invisible {
visibility: hidden;
}

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}

.clearfix:after {
clear: both;
}

.clearfix {
*zoom: 1;
}

/* ==========================================================================
Print styles
========================================================================== */

@media print {
* {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}

a,
a:visited {
text-decoration: underline;
}

a[href]:after {
content: " (" attr(href) ")";
}

abbr[title]:after {
content: " (" attr(title) ")";
}

.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}

pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}

thead {
display: table-header-group;
}

tr,
img {
page-break-inside: avoid;
}

img {
max-width: 100% !important;
}

@page {
margin: 0.5cm;
}


p,
h2,
h3 {
orphans: 3;
widows: 3;
}

h2,
h3 {
page-break-after: avoid;
}
}
@media (max-width:330px){
  #title a{
    font-size:22px;
  }
  .toggle{font-size:20px}

}