/*============================================================================
  GLOBAL STYLES
  ============================================================================*/
body, html {
  height: 100%;
  width: 100%;
}

#mpTweeterIFrame {
  width: 294px;
  height: 267px;
}

body {
  background-color: #224d70;
  font-family: 'Lucida Grande', Verdana, arial, helvetica;
  color:#FFFFFF; 
}
 
a {
  color:#FFFFFF;
}

* {
  padding:0;
  margin:0;
}

img {
  vertical-align: text-bottom; 
  -webkit-user-select: none;
}

/*============================================================================
  VISIBILITY
  ============================================================================*/
.hidden {
  visibility: hidden;
}
  
.excludedFromLayout {
  display: none;
}

/*============================================================================
  MAIN CONTAINER
  ============================================================================*/  
#main {
  padding-top: 1px;
  margin-top: -1px;
  position:relative;
  width:320px;
  min-height: 120%;
  margin: 0 auto;
  text-align: center;
  background-image: url(../img/chrome/bg-320.jpg);
  background-repeat: no-repeat;
}

#headerImage {
  display: none;
  width: 320px;
  height: 58px;
}

/*============================================================================
  ALL ALERTS
  ============================================================================*/
.alert {
  text-align: center;
  position:absolute;
  top:140px;
  left:0px;
  right:0px;
  width: 263px;
  height: 171px;
  margin: 0 auto;
  overflow:hidden;
  background-image: url(../img/chrome/alertbg.png);
  background-repeat: no-repeat;
  z-index: 200;
}

.alerttext {
  padding-top: 27px;
  padding-left: 15px;
  padding-right: 15px;
}
  
.alertOK {
  position:absolute;
  bottom: 23px;
  left: 0px;
  right: 0px;
  margin: 0 auto;
}

/*============================================================================
  ALL LABELS
  ============================================================================*/
.noticeLabel {
  vertical-align:middle;
}

/*============================================================================
  SPECIFIC LABELS
  ============================================================================*/
#welcomeLabel {
  padding-bottom:7px;
}

#resultLabel {
  display: none;
  padding-top:10px;
}

/* "web-xxx-1234" */
#userLabel {
  display: none;
  height: 52px;
  padding-top:15px;
  padding-bottom:0px;
  margin-bottom:-15px;
  background-image: url(../img/chrome/userlabelbg.png);
  background-repeat: no-repeat;
  font-weight:bold;
  text-shadow: 2px 2px 4px #000000;
}

/* "5483 people playing" */
#numPlayersLabel {
  display: none;
  font-weight:bold;
  text-shadow: 2px 2px 4px #000000;
}

#inactiveLabel {
  left:0;
  right:0;
  position: absolute;
  width: 250px;
  margin: 0 auto;
  top: -100px;
}

#finalResultLabel {
  display: none;
}

/*============================================================================
  ANSWERED LAYER (ANSWER SUBMITTED OVERLAY)
  ============================================================================*/
#answeredLayer {
  left:0;
  right:0;
  top: 116px;
  position:absolute;
  margin: 0 auto;
}

/*============================================================================
  NOTICE PANELS
  ============================================================================*/

.noticePanel {
  left:0;
  right:0;
  top: 116px;
  width: 278px;
  height: 237px;
  line-height: 237px;
  color: #FFFFFF;
  position:absolute;
  margin: 0 auto;
  background-image:url(../img/chrome/panelbg.png);
  background-repeat: no-repeat;
  z-index: 200;
}

#calcResultsLayer {
  visibility: hidden;
}


/*============================================================================
  GET READY PANEL
  ============================================================================*/
#preGameLayer, #inactiveLayer {
  margin-top: 96px;
  margin-left:12px;
  right:0px;
  width: 280px;
  height: 149px;
}

#preGameLayer {
  background-image:url(../img/chrome/paneltxt_getready.png);
  background-repeat: no-repeat;
  background-size: 280px 149px;
}

/*============================================================================
  INACTIVE PANEL
  ============================================================================*/
#inactiveLayer {
  background-image:url(../img/chrome/paneltxt_inactive.png);
  background-repeat: no-repeat;
  background-size: 261px 149px;
}

/*============================================================================
  SHARED STYLES FOR ALL ROUND LAYOUTS
  ============================================================================*/

.questionImageBorder {
  border-radius: 10px;
  -moz-border-radius: 10px;
  position:absolute;
  width:250px;
  height:150px;
  border:5px solid #2f3238;
  left:0;
  right:0;
  margin: 0 auto;
  margin-top:-5px;
  text-align:left;
}

.questionImageBG {
 /* background-color:#1a1b1e;*/
  left:0;
  right:0;
  margin: 0 auto;
  text-align:left;
}

.questionLabel {
  margin-top:10px;
  margin-bottom:20px;
}

/*============================================================================
  MPTWEETER
  ============================================================================*/
#mptweeter {
  position:absolute;
  top: 0px;
  left: 0px;
  left:0;
  right:0;
}

/*============================================================================
  FOOTER AND LOGOS
  ============================================================================*/
#footer {
  display: none;
  position:absolute;
  top: 650px;
  left:0;
  right:0;
  margin: 0 auto;
}

#logoLayer {
  margin-top: 30px;
  position: relative;
  height: 200px;
}

#logo {
  position: absolute;
  top: 59px;
  left: 0px;
  width: 150px;
  height: 46px;
  background-image: url(../img/chrome/show-logo.png);
  background-repeat: no-repeat;
  background-size: 150px 46px;
}

#sponsorlogo {
  position: absolute;
  left: 155px;
  top: 20px;
  width: 150px;
  height: 122px;
  background-image: url(../img/chrome/sponsor-logo.png);
  background-repeat: no-repeat;
  background-size: 150px 122px;
}

/*============================================================================
  NO JAVASCRIPT
  ============================================================================*/
#jsdisabled {
  position:absolute;
  top: 120px;
  left:0;
  right:0;
  margin: 0 auto;
}

/*============================================================================
  DEBUGGING
  ============================================================================*/
#logPane {
  display: none;
  border: inset 2px; 
  height: 600px; 
  width: 1200px; 
  overflow:auto; 
  padding: 5px; 
  font-family:monospace;
  white-space: nowrap;
}

#diagnostics {
  padding-left:20px;
  text-align: left;
}