*{font-size:9px; font-family:arial; color:016692;}
h1 {font-family: Patrick Hand; font-weight:700; font-size:30px; font-style: bold; font-variant: normal; line-height: 34px; color:#67cac7;}
a{text-decoration:none; color:#00c8c7;}

.theHand{cursor:hand; cursor:pointer; }

.home-buttons {
padding-left:55px;
width:100%;
}

.white-text{font-size:9px; font-family:arial; color:#ffffff;}

td{vertical-align:top}

.textInput{border-right:1px solid #ededed; border-bottom:1px solid #ededed; border-left:1px solid #cccccc; border-top:1px solid #cccccc; height:22px; padding:2px; padding-left:4px; font-size:13px; background-color:#ffffff; background-image:url(/img/common/bg-grayWhite02.gif)}

.inputLabel{font-size:10px; font-weight:bold; height:20px}

.pageHeading{font-size:18px; color:#a2a2a2; font-weight:bold;}

.logOut{font-size:12px; font-weight:bold; color:blue}

textarea{padding:4px; font-size:12px}

select{color:#222222;  font-size:12px; font-family:arial; font-weight:bold; padding:5px;}

option{background-color:#eeeeff; background-image: url(img/common/bg-grayWhite01.gif)}

.navList {font-size:12px; font-weight:bold; line-height:200%; color:blue}


/* USED IN AUTHORING - EDIT QUESTION */

.on	{border:1px solid #aaaaaa; width:180; height:36; overflow: auto; scrollbar-3d-light-color: ffffff; scrollbar-arrow-color: #aaaaaa; scrollbar-base-color: #eeeeee; scrollbar-dark-shadow-color: #dddddd; scrollbar-face-color: #ffffff; scrollbar-highlight-color: #eeeeee; scrollbar-shadow-color: #dddddd}

.off{border:1px dotted #cccccc; cursor:url(../img/common/i-beam.cur), hand;	width:180;  height:36; overflow: hidden;}

.infoRequestOn{color:#016692; font-size:16px; line-height:1.5; overflow:hidden; border:1px solid #aaaaaa; width:180; height:36; overflow: auto; scrollbar-3d-light-color: ffffff; scrollbar-arrow-color: #aaaaaa; scrollbar-base-color: #eeeeee; scrollbar-dark-shadow-color: #dddddd; scrollbar-face-color: #ffffff; scrollbar-highlight-color: #eeeeee; scrollbar-shadow-color: #dddddd}

.infoRequestOff{color:#016692; font-size:16px; line-height:1.5; overflow:hidden; border:1px dashed #aaaaaa; width:180; height:36; }

.label{font-size:11px; font-weight:bold;  padding:8px;}

.preview{font-size:14px; line-height:1.5; }

.tab{border:1px solid #dddddd; background-image:url(img/common/bg-tab.jpg)}

.controlPanel{background-color:#f5f5f5; border:1px solid #bbbbbb; padding:8px}

.frame{border:1px solid #bbbbbb; padding:0px; background-color:#ffffff}

.help{font-size:10px; color:navy; cursor:help; padding:0px 8px 8px 0px}

.operations{font-size:11px; color:navy; padding:0px 8px 8px 8px; text-decoration:none}

.upload{font-size:10px; color:#cc0000; cursor:url(../img/common/pointer-add.cur);}

.editorButton{background-color:#efefef; border-left:1px solid #ffffff; border-top:#ffffff; border-right:px solid#aaaaaa; border-bottom:px solid#aaaaaa; text-decoration:none}

.i-template-label{font-size:8px; color:black; text-decoration:none; line-height:1.6; font-weight:bold}

.i-template-showFullSize{font-size:8px; color:blue; text-decoration:none; line-height:1.6}

.i-template{border:2px solid white}

.tableHeading{font-size:7px; text-align:center}

.smallPressButton{border:2px raised #cccccc}

.alert{font-size:10px; font-weight:bold;}

.pressButtonOn{border-top:1px solid #ffffff; border-right:1px solid #aaaaaa; border-bottom:1px solid #aaaaaa; border-left:1px solid #ffffff; cursor:hand}

.pressButtonDown{border-top:1px solid #cdcdcd; border-right:1px solid #ffffff; border-bottom:1px solid #ffffff; border-left:1px solid #cdcdcd; cursor:hand}

.pressButtonOff{border:1px solid #ededed; cursor:default}

.errorMsg{font-size:12px; font-weight:bold}

.fileName{font-style:italic; text-align:center;  padding-left:5px; padding-right:5px; border:2px solid white; border-bottom:1px solid #cccccc}


/***********		USED IN TABLED LISTINGS		**********/

.row0{background-color:#ffffff}

.row1{background-color:#ededed}

.cell{border-right:1px solid black; border-bottom:1px solid black; height:29px; padding-left:8px; font-size:12px}

.tableHeading{font-size:8px; color:navy; text-align:center; background-color:#E3EFFC}

.scrollTable{border:2px solid black}

.scroll {overflow: auto; border: 1px solid #666; background-color: #eeeeee; scrollbar-3d-light-color: 000000; scrollbar-arrow-color: #aaaaaa; scrollbar-base-color: #eeeeee; scrollbar-dark-shadow-color: #003366; scrollbar-face-color: #eeeeee; scrollbar-highlight-color: #aaaaaa; scrollbar-shadow-color: #003366}

/***********			  ADMIN					**********/

.adminPagePanel{padding:24; border:1px solid #000000; background-image:url(img/common/bg-grayWhite03.gif)}

/***********			  INTERVIEW					**********/

.interviewScreen{
	width:100%;
	background-image:url(img/interview/bg-content-fullsize.jpg)
}
.interviewScreen2{
	width:100%;
	background-color:#ffffff;)
}

.interview_base{color:#016692; font-size:18px; margin:0; background-image:url(img/common/bg-page.gif); height:100%; vertical-align:middle;}

.interview_base li{color:#00c8c7;}

.interview_base li a hover{color:#00b2cc;}

.smaller{font-size:18px}

.bodyText{font-size:20px}

.larger{font-size:24px}

.answerText{font-size:20px;
margin-bottom:15px;}

.choice{font-size:18px; line-height:1.5; overflow:hidden;}

.caption{font-size:14px}

.next_button{position:absolute; left:632px; top:494px;}

.header-main {
background-color:#ffffff;					
background-repeat:no-repeat;
}

header {
background-image:url(images/header-image.png); 
background-color:#ffffff;					
background-repeat:no-repeat;
height:100px;
}

footer {
background-image:url(images/footer.png); 
background-color:#bae14c;					
background-repeat:no-repeat;
height:100px;
}
.column {
  float: left;
}

.left {
  width: 30%;
}

.right {
  width: 70%;
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
// There is no required CSS for this plugin to work properly
// but here is what is being used to style this demo
.horizontal-nav {
  background: #00c8c7;
  border-radius: 6px;
}
.horizontal-nav ul {
  background: #00c8c7;
  float: right;
  text-align: center;
  border-radius: 6px;
  border: 0px solid #00b2cc;
  margin-top:-60;
  margin-right:40px;
  position:relative;
}
.horizontal-nav ul li {
  float: left;
  border-left: 0px solid #00c8c7;
}
.horizontal-nav ul li:first-child {
  border-left: 0 none;
}
.horizontal-nav ul li a {
  display: block;
  padding: 10px 20px;
  font-size:16px;
  color: #fff;
  border-top: 1px solid rgba(255,255,255, 0.25);
  border-left: px solid rgba(255,255,255, 0.25);
}
.horizontal-nav ul li:first-child a {
  border-left: 0 none;
}
.horizontal-nav ul li a:hover {
  background: #00b2cc;
}
.horizontal-nav ul li:first-child a {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.horizontal-nav ul li:last-child a {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.container {
  font-size: 0; /*remove white space*/
  width:90%;
}
buttons2 {
width:80%;
height:auto;
}
.section {
  display: inline-block;
  vertical-align: top;
  width: 32%;
  border: 0px solid;
  box-sizing: border-box;
}
.section2 {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  border: 0px solid;
  box-sizing: border-box;

}

.main-buttons2 {
font-size: 0; /*remove white space*/
font-color:#ffffff;
background-image:url(images/question-bkg.png);
background-repeat: repeat-x;;
height:100%;
width:100%;
z-index: 10;
padding-top: 60px;
padding-bottom: 40px;
position: relative;
top: -70px;
overflow: hidden;
padding-left:  0px;
padding-right: 0px;

}

  
  
@media (max-width: 900px) { /*breakpoint*/
  
  .section img {
  width: 80%;
  height: auto;
  margin-left:5%;
  
}
.horizontal-nav ul li a {
  display: block;
  padding: 10px 20px;
  font-size:14px;
  color: #fff;
  border-top: 1px solid rgba(255,255,255, 0.25);
  border-left: px solid rgba(255,255,255, 0.25);
  
}
.horizontal-nav ul {
  background: #00c8c7;
  float: auto;
  text-align: center;
  border-radius: 6px;
  border: 0px solid #00b2cc;
  margin-top:0;
  margin-bottom:0;
  position:relative;
}



@media (max-width: 768px) { /*breakpoint*/
  .section {
  display: inline-block;
  vertical-align: top;
  width: 32%;
  border: 0px solid;
  box-sizing: border-box;
  } 
  
.main-buttons2 .section img {
  max-width: 100%;
  height: auto;
  margin-left:5%;
}

.section2 {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  border: 0px solid;
  box-sizing: border-box;
}
.section3 {
  display: inline-block;
  vertical-align: top;
  width: 40%;
  border: 0px solid;
  box-sizing: border-box;
}
.home-buttons {
padding-left:22px;
width:100%;
}

}

  
  
@media screen and (max-width: 600px) {

.main-buttons2 {
font-size: 0; /*remove white space*/
background-image:url(images/question-bkg-mobile.png); 
height:auto;
width:100%;
z-index: 10;
padding-top: 60px;
padding-bottom: 30px;
position: relative;
top: -30px;
overflow: hidden;
padding-left: 0px;
padding-right:0px;

}
}

@media screen and (max-width: 480px) {

  .section {
    display: block;
    width: auto;
	max-width: 100%
  }
    .section2 {
    display: block;
    width: auto;
  }
    .section3 {
    display: block;
    width: auto;
  }
  .choice{font-size:20px; line-height:1.5; overflow:hidden;}
  .caption{font-size:16px}
  .home-buttons {
padding-left:15px;
width:100%;
}
}

@media (max-width: 320px) { /*breakpoint*/  

.main-buttons2 {
font-size: 0; /*remove white space*/
background-image:url(images/question-bkg-mobile.png); 
height:auto;
width:100%;
z-index: 10;
padding-top: 60px;
padding-bottom: 30px;
position: relative;
top: -30px;
overflow: hidden;
padding-left: 0px;
padding-right:0px;

}
p {margin-left:5%; margin-top:30px; font-size:14pt; font-weight:normal ; width:90%;}
.header-main {
background-color:#ffffff;					
background-repeat:no-repeat;
}

 .main-buttons2 .section img {
  max-width: 80%;
  height: auto;
  margin-left:0%;
}
.choice{font-size:20px; line-height:1.5; overflow:hidden;}
  .home-buttons {
padding-left:15px;
width:100%;
}

}