/*! 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: 16px ;
background:#f5f5f5;
height:100%
}

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

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

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

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

a {
color:#3460c4;
}
a:hover{
color: #5276c7
}


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:#a8450f;
  border:1px solid #333;
  cursor:pointer;
  box-sizing:border-box;
  box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.2);
}
.button:hover,
button:hover,
.button:focus,
button:focus{border-color:#666;outline:0;background:#80340b;}
button:active{box-shadow:none}
#submitBtn{margin:15px auto}

.btnLink{
text-decoration:none;
}
.fb-page{
  display:none
}

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


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

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

.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:#e30101;
  font-family:Verdana, sans-serif;
  font-weight:normal;
  text-decoration:none;
}
#title a:hover{
  text-decoration:none;
  color:#800000
}
.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 #800000;
  border-right:1px solid #800000;
  text-align:center;
  position:absolute;
  top:0;
  right:0;
  font-size:22px;
  color:#e30101;
  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 #800000;
  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:#e30101;
  font-family:Verdana, sans-serif;
  font-weight:normal;
  text-decoration:none;
  border-bottom:1px solid #800000;
  background:#f5f5f5
  }

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

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

.main {
  padding: 0 0 15px 0;
}

.text{
  width:95%;
  margin:auto
}
.main article{
  margin-bottom:25px
}

.cats a{
  text-decoration:none
}

.homeLinks{
display:block;
margin:0 -2%;
text-align:center;
}

.homeLinks h1{
  font-weight:400;
  font-size:2.5em;
  margin:0;
  padding:20px 0;
  color:#800303;
  letter-spacing:-1px
}

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

.homeLinks a{
  text-decoration:none;
}
.homeLinks a:hover{
  color:#b12121
}

  /*HOME PAGE IMAGE LINKS*/
  .menuItem{
  display:block;
  width:95%;
  margin:10px auto 25px auto;
  text-align:center;

  }

  .menuItem h2{
    font-size:1.4em;
    font-weight:normal;
    margin:0
  }
  .menuItem img{
    width:100%;
    max-width:400px;
    max-height:200px;
    box-shadow: 0px 0px 1px 0px rgba(212,26,63,1);
  }
  .menuItem p{
    margin:0;
    font-size:18px;
  }

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

  .menuItem a:hover{
    color:#b12121
  }

  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:#ad0101;
    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;
  }

  .question{
    color:#800000;
    text-shadow:1px 1px 1px #eee;
    font-size:24px;
    padding:10px 10px 5px 10px;
    background:#fff;
  }
  /*.imageQuestion applies to image quiz only*/

  .imageQuestion{
    margin:0;
    padding:0;
    margin-bottom:-10px
  }
  .imageQuestion img{
    margin:0;
    padding:0
  }

   .answers{
     background:#cb9879
   }

  .answers li{
    display: block;
    position: relative;
    /*float: left;*/
    width: 100%;
    min-height:52px;
    margin-bottom:1px;
    background:#e5c5b0;
  }
  .answers li:last-child{
    margin-bottom:0;
  }


  .answers li input[type=radio]{
    position: absolute;
    visibility: hidden;
  }

  .answers li label{
    display: block;
    position: relative;
    height: 100%;
    z-index: 9;
    color: #333;
    cursor: pointer;
    /*-webkit-transition: all 0.15s linear;*/
  }
  .answers li label p{
  padding: 15px 10px 10px 60px;
  margin:0;
  font-size: 20px;
  text-align:left;
}

  .answers li:hover label{
  	color: #000;
  }

  .answers li .check{
    display: block;
    position: absolute;
    border: 5px solid #333;
    border-radius: 100%;
    height: 25px;
    width: 25px;
    top: 8px;
    left: 15px;
  	z-index: 5;
  	/*transition: border .15s linear;
  	-webkit-transition: border .15s linear;*/
  }

  .answers li:hover .check {
    border: 5px solid #e07102;
  }

  .answers li .check .inside {
    display: block;
    position: absolute;
  	content: '';
    border-radius: 100%;
    height: 15px;
    width: 15px;
    top: 5px;
  	left: 5px;
    margin: auto;
  	/*transition: background 0.15s linear;
  	-webkit-transition: background 0.15s linear;*/
  }
  .circle{
    /*display: block;
    border-radius: 100%;
    height: 15px;
    width: 15px;
    top: 5px;
  	left: 5px;
    margin: auto;
    border: 5px solid #800000;
    background: #800000;*/
  }

  input[type=radio]:checked ~ .check {
    border: 5px solid #e07102;
    z-index:100
  }

  input[type=radio]:checked ~ .check .inside{
  background: #e07102;
    z-index:100
  }

  input[type=radio]:checked ~ label{
    color: #000;
    font-weight:500;
    background:#da8f44
  }

  #facebook-share{
    max-width:700px;
    margin:20px auto 0 auto;
    padding:10px;
    font-size:24px;
    color:#800000;
    background:#fff;
    border:1px solid #ccc;
    box-shadow: 0 2px 2px rgba(0,0,0,0.23);
  }

  #facebook-share p{
    margin:10px 0
  }

  #results{
    color:#000;
    display:none
  }
  #smiley-div, #results-text{
    display:inline-block;
    vertical-align:top;
  }
  #smiley-div{
    width:110px;
  }
  #smiley-div img{
    height:100px;
    width:100px;
  }

  #results-text .ten{
    color:#800040;
    font-weight:bold
  }
  #results-text .score{
    color:#800040;
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
    animation-iteration-count: 3;
    font-weight:bold
  }

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

  .footer-container footer {
  padding: 10px 0;
  font-size:0.9em;
  color:#e30101;
  }
  footer a {
    color:#800000;
  }
  #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:#cd6565
  }
  #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
  }

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

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


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

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

.answers li label{
  font-size:1.4em
}
.answers li label p{
text-align:center;
}

#results-text{
  margin-left:20px
}

#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;
  }

.sharetop{right:215px;}

.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 #800000;
  padding:7px 0 0 0;
  border:none;
}

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

.main {
  padding: 15px 0;
}

.ui-dialog{
width:450px
}

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

}


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

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

  }
  .sharetop{
    right:450px;
  }

  #title{
    font-size:28px;}

.menuItem img{
  width:400px;
  height:200px;
}
}

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

}

/* ==========================================================================
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}

}