html {
  font-family: 'Open Sans', sans-serif;
  font-size:1em;
  background: #D1E8F6;
  
}

h1 {
	font-family: 'Montserrat', sans-serif;
}

h2 {
	font-family: 'Montserrat', sans-serif;
}

h3 {
	font-family: 'Montserrat', sans-serif;
}

a img {
    border: 0;
}

.ui-widget{font-size:13px;}

body {
  margin: 0;
}

#pagewrapper {
  width: 70%;
  margin: 0 auto;

}

#wrapper {
  width:70%;
  margin: 0 auto;
}

.questionwrapper {
  float: left;
  width: 70%;
}

.header {
	width:50%;
	margin: 0 auto;
	color: white;
	padding-bottom: 0.67em;
}

.headerwrapper {
	background-color: #286E94;
	padding: 1%;
}

.headerwrapper img {
  height: 70px;
  margin-left: 50px;
}

.initialhelptext {
	background-color: white;
	float: right;
	padding: 2%;
	margin: 20px 0px 10px 0px;
	color: #286E94;
	position: relative;
}

#helptext {
	width: 90%;
}

.close {
	position: absolute;
    top: 0px;
    right: 0px;
    padding: 0px 12px;
    font-size: 150%;
	cursor: pointer;
}
		
.headerelement {
  float: left;
}

.headerelement2 {
  float: right;
}

.question {
  position:relative;
  width: 80%;
  margin-bottom:20px;
  background-color: #fff;
}

.qnheader {
  width: 90%;
  padding: 5%;
  background-color: #C74F21;
  color: white;
  font-weight: bold;
}

.questiontext {
    padding: 10px 10px 30px 10px;
}

.pageheading {
}

.clear {
    clear:both;
}


.iconfloat {
  float:right;
  margin-left: 20px;
  margin: 20px 0px 20px 0px;
  color: white;

}

.sideicon {
  text-align: center;
  padding: 10px;
  background-color: #52AEE1;
  vertical-align: middle;
  cursor: pointer;
}

.sideicon:hover {
  background-color: #C74F21;
}

.help {
  
}

.share {
  margin-top: 20px;
  display: none;
}

.qnMoreinfo {
  width:60%;
  text-align: center;
  position: absolute;
  left:20%;
  padding: 5px;
  background-color: #52AEE1;
  color: white;
  bottom: 0px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  cursor: pointer;
}

.qnMoreinfo:hover {
  background-color: #C74F21;
  cursor: pointer;
}

.moreInfoDrop {
  background-color: #F2F2F2;
  margin:15px 5px 0px 5px;
  padding:10px;
  display:none;
}


.answers {
}

.floatclear {
  clear:both;
}

.answers2 {
  height: 40px;
  width: 80%;
  margin-bottom:10px;
  background-color: #fff;
  cursor: pointer;
}

.placeholder {
  visibility: hidden;
}

.answertext {
  position: relative;
  top: 10px;
  left: 10px;
  float: left;
}

#answerslist {
  float: left;
  width: 30%;
  background-color: #fff;
  text-align: center;
}

#anstitle {
  width: 90%;
  background-color: #C74F21;
  color: white;
  padding: 5%;
}

.useranswer {
  width: 80%;
  margin: 5%;
  padding: 5%;
  background-color: #F2F2F2;
  font-size: 0.8em;
  cursor: pointer;
}

.useranswer:hover {
  background-color: #D1E8F6;
  cursor: pointer;
}

#ansplaceholder {
  width: 80%;
  margin: 5%;
  padding: 5%;
  background: repeating-linear-gradient(
  45deg,
  #F2F2F2,
  #F2F2F2 10px,
  #ededed 10px,
  #ededed 20px
);
  background-color: #F2F2F2;
}


#answersholder {
  width: 100%;
}


.answers2:hover {
  background-color: #f1f1f1;
  cursor: pointer;
}

.answerinfo {
  float: right;
  height: 100%;
  background-color: #52AEE1;
  padding: 0px 5px 0px 5px;
  font-weight: bold;
  font-size: 0.8em;
  color: white;
  vertical-align: middle;
  line-height: 40px;
}

.clearbottom {
  clear:both;
}

.progress {
  width: 90%;
  background: #fff;
  padding: 0px 0px 10px 0px;
  margin: 0 auto;
}

.progressbar {
  width:90%;
  margin: 0 auto;
  background: #f1f1f1;

}

.progresstext {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #C74F21;
  color: white;
}

.ui-progressbar-value {
  background: #006699;
}

.tooltip {
  position:absolute;
  background-color: #006699;
  color: white;
  display:none;
  padding: 5px;
  font-size: 0.8em;
  width: 200px;
}

.helpdiv {
  position:absolute;
  display: none;
  background-color: #006699;
  color: white;
  padding: 5px;
  font-size: 0.8em;
  width: 200px;
  z-index: 10;
  
}


#noresults {
  position:absolute;
  display: none;
  background-color: #006699;
  color: white;
  font-size: 0.8em;
  z-index: 10;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  font-size: 1em;
  padding: 20px;
  width: 300px;
}


.line {
  position:absolute;
  display: none;
  height: 2px;
  width: 25px;
  background-color: #006699;
  z-index: 10;
}

.overlay {
  position:fixed;
  display: none;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
}

.overlay2 {
  position:fixed;
  display: none;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
}

#resultsbutton {
  margin:10px;
  padding: 10px;
  background-color: #52AEE1;
  text-align: center;
  
}

a #resultsbutton {
  color: white;
  font-weight: normal;
  cursor: pointer;
}  

.changebutton {
	padding: 10px;
	margin: 10px 5px 10px 0px;
	background-color: #52AEE1;
	display:block;
	text-decoration: none;
	color: white;
}

.changebutton:hover {
	background-color: #C74F21;
}

.question2 a {
  text-decoration: none;
}


#resultsbutton:hover {
  background-color: #C74F21;
  
}

.spacer {
  margin:10%;
}






@media only screen 
and (max-width : 500px) {
  .question {
    width: 100%;
  }
  
  .answers2 {
    width: 100%;
  }
  
  #pagewrapper {
  width: 90%;
  }
  #wrapper {
  width:100%;
  }
  .questionwrapper {
  width: 100%;
  }
    
  #answerslist {
  width: 70%;
  margin-top: 5%;
  }
  
  .header {
    width: 90%;
  }
  
}




@media only screen 
and (max-width : 1200px) {
  
  #pagewrapper {
  width: 90%;
  }
  #wrapper {
  width:100%;
  }
  
  .header {
    width: 90%;
  }
}