/* GRAPH POPULATION */
body.population { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
#holder { position: relative; width: 550px; margin: 0px auto 0px auto; }

/*.bx-wrapper{top: 51px !important;}
.bx-viewport{margin-top: 335px !important;}*/

.menuslidecontainer{margin: 200px auto !important;}


/*#fourth.active-slide + .drag:hover {
    border: 3px solid red !important;
}*/
.box { background: #FFF; border: 1px solid #000; width: 30px; height: 34px; position: absolute; text-align: center; padding: 3px 0px 0px 0px; font-size: 20px; }

/* HOVER SELECTION STATES */
.one .box:hover { border: 3px solid #EB9532; cursor: pointer; }
.two .box:hover { border: 3px solid #E87E04; cursor: pointer; }
.three .box:hover { border: 3px solid #D35400; cursor: pointer; }
.four .box:hover { border: 3px solid #EB9532; cursor: pointer; }
.five .box:hover { border: 3px solid #E87E04; cursor: pointer; }
.six .box:hover { border: 3px solid #D35400; cursor: pointer; }
.seven .box:hover { border: 3px solid #EB9532; cursor: pointer; }
.eight .box:hover { border: 3px solid #E87E04; cursor: pointer; }
.nine .box:hover { border: 3px solid #E87E04; cursor: pointer; }

/*ten is changed to tenth here because of conflicting style*/
.tenth .box:hover { border: 3px solid #E87E04; cursor: pointer; }
.eleven .box:hover { border: 3px solid #E87E04; cursor: pointer; }
.bxslider li { color: #FFF; font-weight: normal; font-size: 15px; width: 100%; padding: 10px; min-height: 170px; }
.bxslider li p { color: #FFF; line-height: 1.4em; padding: 0px 20px 20px 0px; text-align: left; font-size: 1.2em;}
.bxslider li span { display: block; float: left; font-size: 20px; height: 170px; clear: left; padding: 17px 30px 10px 10px; font-weight: bold; }
.outside { width: 100%; position: relative; margin: 0px auto 0px auto; background: #ccc; }
.outside .disabled { visibility: hidden; }
#slider-next { position: absolute; right: 0px; }
.c1 { background-color: #2645b1 }

/*Purple Main*/
.c2 { background-color: #456ed7 }

/*Purple Dark*/
.c3 { background-color: #af3535 }

/*Red Main*/
.c4 { background-color: #c94747 }

/*Red Light*/
.responseContainer{min-height: 250px;}
.response { line-height: 37px; font-weight: bold; margin: 2px !important; padding: 20px; border: 1px dashed #674172; width: 100%; text-align: center; color: #674172 !important; }
.response h2 { color: #674172 !important; text-align: center; font-weight: bold; }
.buttons { margin: 10px; }
body.population #instructions { top: -20px; width: 100%; }

/* END GRAPH*/

/* TABLE COLOURS */

#options { margin: 78px 0px 0px 0px; }
#options td { padding: 13px 10px 13px 10px; font-size: 13px; color: #FFF; }
#options tr td:first-child { font-weight: bold; }
.o1 { background-color: #EB9532; }
.o2 { background-color: #E87E04; }
.o3 { background-color: #D35400; }
#activityButtons button { margin: 0 .5% 0 .5%; float: right; }
#definition h2, #keyTerms h2 { line-height: 42px }
#endMsg { display: none }

/* ----------- iPad ----------- */

/* ----------- iPad Landscape----------- */
@media only screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape) {
  .menuslidecontainer{margin: 100px auto !important;}
h1 {font-size: 22px !important;}
  #holder { width: 440px !important; margin: 0px auto 0px auto !important; }

  .box {width: 25px; height: 30px; }

  .box:nth-child(12) { left: 53px !important; top: 404px !important; }


  .box:nth-child(2) { left: 150px !important; top: 88px !important; }
  .box:nth-child(3) { left: 190px !important; top: 208px !important; }
  .box:nth-child(4) { left: 325px !important; top: 208px !important; }
  .box:nth-child(5) { left: 270px !important; top: 447px !important; }
  .box:nth-child(6) { left: 83px !important; top: 207px !important; }
  .box:nth-child(7) { left: 351px !important; top: 55px !important; }
  .box:nth-child(8) { left: 135px !important; top: 513px !important; }
  .box:nth-child(9) { left: 216px !important; top: 536px !important; }
  .box:nth-child(10) { left: 243px !important; top: 512px !important; }
  .box:nth-child(11) { left: 189px !important; top: 538px !important; }


}