/*============================================================================
  VQVA LAYOUT
  ============================================================================*/

#VQVALayout {
  background-image: url(../img/controlpad/question-bg.png);
  background-repeat: no-repeat;
  background-position: 0 25px;
}

#VQVAQuestionImageContainer {
  display: none;
}

#VQVAQuestionLabel {
  position: absolute;
  top: 75px;
  left: 35px;
  width: 250px;
  color: #24547d;
  font-weight: bold;
  font-size: 14px;
  text-align: left;

}

.VQVAAnswerBorderUp, .VQVAAnswerBorderDisabled, .VQVAAnswerBorderSelected {
  position:absolute;
  width:137px;
  height:68px;
  left:0;
  right:0;
  margin: 0 auto;
  margin-top:-5px;
  text-align:left;
}

.VQVAAnswerBorderDisabled {
  border-color: #222222;
}

.VQVAAnswerBorderSelected {
  border-color: #ffbd20;
}

.VQVAAnswerImageBG {
  width: 119px;
  height: 119px;
  left:0;
  right:0;
  margin: 0 auto;
  text-align:left;
}

#VQVAAnswerImage1, #VQVAAnswerImage2, #VQVAAnswerImage3,
#VQVAAnswerImage4, #VQVAAnswerImage5, #VQVAAnswerImage6 {
  padding-top: 3px;
  margin-left: -2px !important;
}

.VQVAAnswerContainerUp, .VQVAAnswerContainerSelected {
  position: relative;
  width: 320px;
  height: 210px;
  background-size: 197px 201px;
  background-repeat: no-repeat;
  background-position: 59px 1px;
  z-index: 99;
}

.VQVAAnswerContainerUp {
  background-image: url(../img/controlpad/answer-bg.png);
}

.VQVAAnswerContainerSelected {
  background-image: url(../img/controlpad/answer-selected-bg.png);
}

#VQVAAnswerContainer1 {
  padding-top: 150px;
  background-position: 59px 151px;
}

.VQVAAnswerLabelUp, .VQVAAnswerLabelDisabled, .VQVAAnswerLabelSelected {
  width: 180px;
  margin-top:51px;
  margin-left: 68px;
  margin-bottom:15px;
  color:#FFFFFF;
  font-weight: bold;
  text-align: left;
}

.VQVAAnswerLabelDisabled {
  color:#999999;
}

.VQVAAnswerLabelSelected {
  color:#ede75b;
}

.VQVAPopular {
  width: 41px;
  height: 41px;
  background-image: url(../img/controlpad/popular.png);
  background-size: 41px 41px;
  display: none;
  position: absolute;
  margin-left: 75px;
  margin-top: 6px;
  z-index: 100;
}

#VQVATotalResponsesContainer {
  display: none;
}

.VQVAResponsesBar {
  background-image: url(../img/controlpad/surveybar-bg.png);
  background-repeat: no-repeat;
  background-size: 65px 35px;
  background-position: 95px -1px;
  width: 230px !important;
  height: 35px !important;
}

.VQVAResponsesBarLabel {
  position: absolute;
  left: 106px;
  top: 9px;
  width: 40px;
  height: 30px;
}

/*THIS top*/
#VQVAResponses {
  top: 274px;
  left: 83px;
  z-index: 1;
}

#VQVAResponsesBar2 {
  top: 210px !important;
}

#VQVAResponsesBar3 {
  top: 420px !important;
}

#VQVAResponsesBar4 {
  top: 632px !important;
}

#VQVAResponsesBar5 {
  top: 843px !important;
}

#VQVAResponsesBar6 {
  top: 1054px !important;
}

/*============================================================================
  BETWEEN 360px AND 969px WIDE
  ============================================================================*/
@media (min-width: 360px) and (max-width: 970px) {
  #VQVALayout {
    margin-left: 20px;
  }

  #VQVAQuestionLabel {
    left: 55px;
  }

  #VQVAResponses {
    left: 103px;
  }
}

/*============================================================================
  WIDER THAN 970px
  ============================================================================*/
@media (min-width: 970px) {
  #VQVALayout {
    background-image: url(../img/controlpad/question-bg-970.png);
    background-position: 191px 68px;
    height: 695px;
  }

  #VQVAQuestionLabel {
    height: 695px;
    top: 120px;
    left: 206px;
    width: 525px;
    font-size: 18px;
    text-align:center;
    padding-left: 0px;
    padding-right: 0px;
  }

  .VQVAAnswerContainerUp, .VQVAAnswerContainerSelected {
    width: 197px;
    background-position: 0px 1px;
  }

  #VQVAAnswerImage1, #VQVAAnswerImage2, #VQVAAnswerImage3,
  #VQVAAnswerImage4, #VQVAAnswerImage5, #VQVAAnswerImage6 {
    padding-top: 2px;
    margin-left: 1px !important;
  }
/*THIS top*/
  #VQVAAnswerContainer1 {
    position: absolute;
    padding-top: 0px;
    top: 199px;
    left: 177px;
    background-position: 0px 0px;
  }
/*THIS top (same as container1)*/
  #VQVAAnswerContainer2 {
    position: absolute;
    top: 199px;
    left: 390px;
  }

  #VQVAAnswerContainer3 {
    position: absolute;
    top: 199px;
    left: 602px;
  }
/*THIS top */
  #VQVAAnswerContainer4 {
    position: absolute;
    top: 407px;
    left: 177px;
  }
/*THIS top (same as container4)*/
  #VQVAAnswerContainer5 {
    position: absolute;
    top: 407px;
    left: 390px;
  }
/*THIS top (same as container4)*/
  #VQVAAnswerContainer6 {
    position: absolute;
    top: 407px;
    left: 602px;
  }

  #VQVAResponses {
    top: 321px;
    left: 201px;
    z-index: 1;
  }

  #VQVAResponsesBar2 {
    margin-top: -209px;
    left: 213px;
  }

  #VQVAResponsesBar3 {
    margin-top: -419px !important;
    left: 426px;
  }

  #VQVAResponsesBar4 {
    margin-top: -421px !important;
  }

  #VQVAResponsesBar5 {
    margin-top: -633px !important;
    left: 213px;
  }

  #VQVAResponsesBar6 {
    margin-top: -845px !important;
    left: 425px;
  }

  .VQVAPopular {
    margin-left: 18px;
    margin-top: 0px;
  }

  .VQVAAnswerLabelUp, .VQVAAnswerLabelDisabled, .VQVAAnswerLabelSelected {
    margin-left: 10px;
    margin-top: 51px;
  }
}