html, body{ height: 100%; font-family: Georgia, Verdana, serif;  }
#page{ position: relative; min-height: 100%; }
  #page.normal{ background: url('/images/grey-gradient.png') #D6D7D9 repeat-x 0 110px; }
  #page.game{ background: url('/images/orange-gradient.png') #EDD5BF repeat-x 0 110px; }
  #page.survey{ background: url('/images/blue-gradient.png') #BDB9C0 repeat-x 0 110px; }
.container{ width: 998px; margin: 0 auto;  position: relative; }
.clear{ clear: both; }
.error{ color: #c03021; }
p.error{ font-weight: bold; }
input.error{ border: 1px solid #c03021; } 


#nav{ background: #fff; height: 32px; line-height: 32px; font-size: 12pt; }
  #nav p{ padding-left: 12px; }
  #nav a{ }
  #nav a#nav-current{ text-decoration: none; }
  #nav a.oj{ color: #cf9961; }
  #nav a.blu{ color: #7c8ba6; }
  #nav a.grey{ color: #666666; }
#header{ width: 100%; height: 60px; color: #FFF; position: relative; }
.normal #header{ background: #666666; border-bottom: 18px solid #949494; }
.game #header{ background: #c27f3a; border-bottom: 18px solid #cf9962; }
.survey #header{ background: #5b6e90; border-bottom: 18px solid #7b8ba5; }
  #header h2{ font-size: 20pt; font-weight: normal; padding: 22px 12px 0 12px; }
  #header a, #header a:link, #header a:visited, #header a:active{ color: #fff; }
  #header a:hover{ color: #CCCCCC; }
  #login-box{ position: absolute; top: 0; right: 0; height: 78px; overflow: hidden; float: right; }
    #login-box .large{ font-size: 26px; padding-top: 22px; }
    .login-box-item{ float: left; padding: 0 18px; height: 78px; position: relative; }
    .login-box-item .bottom{ position: absolute; bottom: 0; left: 18px; height: 18px; line-height: 18px; font-size: 8pt; }

    .login-box-item-email input,
    .login-box-item-password input{ font-family: courier,"courier new",monospace; }

    .login-box-item-email,
    .login-box-item-password,
    .login-box-item-controls{ padding: 27px 2px 0 2px; height: 51px; font-size: 9pt; }
    .login-box-item-email .bottom,
    .login-box-item-password .bottom,
    .login-box-item-controls .bottom{ left: 3px; }
    .login-box-item-controls input#user-remember{ position: relative; top: 2px; }
    .login-box-item-email input,
    .login-box-item-password input{ border: 1px solid #000; background: #fff; width: 190px; height: 16px; padding: 4px; }
    .login-box-item-controls input{ background: #fff; border: 1px solid #000; padding: 1px; margin-top: 2px }
    #user-remember{ padding: 0; border: none; background: transparent; }

  #login-box.not-logged-in p.top{ padding-top: 20px; font-size: 9pt; line-height: 12pt; }
  
#footer { position: absolute; bottom: 0; width: 100%; height: 64px; background: #FFFFFF; color: #666666; text-align: center; padding-top: 10px; }
  #footer p{ font-size: 9pt; line-height: 14pt; }
  #footer a{ color: #666666; }
#content{ padding-bottom: 74px; }


/* home */
#home #content h3{ font-size: 26px; font-weight: normal; text-align: center; color: #666666; margin: 20px; }
#home #content #left, #home #content #right{ width: 440px; height: 400px; margin-bottom: 48px; color: #fff; }
#home #content #left{ float: left; background: url('/images/orange-hard-gradient.png') #D6A177 repeat-x; margin-left: 32px; position: relative; }
#home #content #right{ float: right; background: url('/images/blue-hard-gradient.png') #83808D repeat-x; margin-right: 32px; }
#home #content h4{ font-size: 26px; font-weight: normal; text-align: center; padding: 32px; }
#home #content img{ display: block; margin: 10px auto 20px auto; }
#home #content p{ display: block; margin: 0 auto; width: 390px; line-height: 16pt; }
#home #content #right p{ width: 320px;  }
#home #content a{ display: block; margin: 40px auto 0 auto; width: 160px; height: 30px; background: #fff; border: 1px solid #000; text-align: center; line-height: 30px; text-decoration: none; color: #000; font-weight: bold; font-size: 13pt; }


/* game + survey - agree */
#game-instructions{ width: 500px; margin: 32px auto; line-height: 18pt; }
#game #game-instructions a{ color: #c06821; }
#survey #game-instructions a{ color: #5B6E90; }
#game-instructions h5{ margin-top: 16px; font-size: 13pt; font-weight: bold; }
#game-instructions .submit{ margin-top: 16px; border: 1px solid #000; background: #fff; padding: 2px 4px; font-weight: bold; font-size: 13pt; font-family: Georgia, Verdana, serif; }
#game-instructions p.error{ font-size: 10pt; }

/* Info + ToS */

#info-content{ background: #fff; padding: 36px 72px; font-size: 11pt; line-height: 130%; margin: 0 72px; }
#info-content h3, #info-content p, #info-content ul, #info-content ol{ margin-top: 16px; }
#info-content ul{ list-style: disc; padding-left: 20px; }
#info-content ol{ list-style: decimal; padding-left: 20px; }
#info-content li{ margin: 2px 0; }
#info-content a{ color: #666; }

/* 404 */
#not-found #content h2{ font-size: 26px; font-weight: normal; color: #666666; }
#not-found #content p{ margin-top: 10px; }
#not-found #content a{ color: #666666; }

/* survey */
#survey fieldset{ width: 700px; margin: 0 auto 32px auto; }
#survey-page.page--1 fieldset{ background: #fff; width: 600px; height: 200px; margin: 120px auto; }
#survey-page.page--1 fieldset{ background: #fff; width: 600px; height: 200px; margin: 120px auto; }
#survey #survey-thanks{ background: #fff; width: 280px; margin: 120px auto; padding: 32px 160px; }
#survey #survey-thanks p{ font-size: 24px; text-align: center; font-weight: bold; color: #5B6E90; line-height: 120%; }
#survey #survey-thanks p a{ display: block; margin-top: 10px; font-size: 20px; color: #5B6E90; }
#survey #content h2{ text-align: center; margin: 32px 0 0 0; font-size: 13pt; }
#survey-page fieldset p{ text-align: center; margin: 32px 0 0 0; line-height: 22px; }

#progress{ font-size: 13pt; font-weight: bold; height: 32px; padding-bottom: 32px; width: 320px; margin: 0 auto; }
#progress p{ float: left; line-height: 26px; margin: 1px 6px; }
#progress .page{ float: left; width: 36px; height: 26px; text-align: center; margin: 2px;  font-weight: bold; font-size: 13pt; font-family: Georgia, Verdana, serif; background: transparent; border: none; cursor: pointer; }
#progress .page-current{ background: #5B6E90; color: #fff; }

#guess-container{ margin: 32px 0 0 0; }
.img_q{ height: 208px; clear: both; margin-top: 16px; position: relative; }
.img_n{ position: absolute; left: 50px; top: 0; font-weight: bold; font-size: 13pt; }
.img_q_l{ height: 200px; width: 308px; float: left; margin: 0 4px 0 80px; }
.img_q_l img{ background: #fff; }
.img_q_r{ float: left; margin-left: 8px; }
.img_q_r input{ display: block; margin-bottom: 8px; height: 20px; width: 196px; border: 1px solid #808080; font-family: courier,"courier new",monospace; font-size: 12pt; padding: 2px; }

#survey .survey-controls{ clear: both; margin: 16px 94px 16px 80px; }
#survey .survey-controls input{ border: 1px solid #000; background: #fff; padding: 2px 4px; font-weight: bold; font-size: 13pt; font-family: Georgia, Verdana, serif; }
#survey .prev{ float: left; }
#survey .next{ float: right; }



/* register */
#register fieldset{ width: 700px; margin: 80px auto 32px auto; }
#register label{ display: block; float: left; width: 200px; height: 26px; clear: left; font-weight: bold; font-size: 12pt; line-height: 26px; margin-top: 8px; }
#register input{  height: 18px; width: 194px; border: 1px solid #808080; font-family: courier,"courier new",monospace; font-size: 11pt; padding: 3px; margin-top: 8px; }
#register .public, #register .private{ position: relative; border-bottom: 2px solid #666; padding: 12px 0; }
#register .private{ padding: 4px 0 12px 0; }
#register .public p{ position: absolute; bottom: 16px; right: 0; font-size: 13pt; font-weight: bold; font-style: italic; color: #666; }
#register .private p{ position: absolute; top: 16px; right: 0; font-size: 13pt; font-weight: bold; font-style: italic; color: #666; }
#register .submit{ display: block; clear: both; float: right; border: 1px solid #000; background: #fff; font-weight: bold; font-size: 13pt; font-family: Georgia, Verdana, serif; height: auto; width: auto; padding: 2px 8px; margin-top: 12px; }
#new-error{ margin: 12px 0; }
#register input.error{ border: 1px solid #c03021; }

#register-success{ margin: 64px 120px; }
#register-success a{ color: #666666; text-decoration: none; }
#register-success a:hover{ text-decoration: underline; }


#public-profile input, #private-profile input, #public-profile select, #private-profile select{  border: 1px solid #808080; font-family: courier,"courier new",monospace; font-size: 11pt; padding: 3px; }
#public-profile, #private-profile{ position: relative; width: 700px; margin: 12px auto; padding-bottom: 12px; border-bottom: 2px solid #666; }
#public-profile .note, #private-profile .note{ position: absolute; top: 0; right: 0; text-align: right; font-size: 13pt; font-weight: bold; color: #666; }
#public-profile .item,
#private-profile .item{ clear: both; }
#public-profile .item p{ margin: 0; padding: 0; }
#public-profile .item label,
#private-profile .item label,
#public-profile .item .label,
#private-profile .item .label{ display: block; width: 200px; float: left; height: 32px; font-weight: bold; font-size: 11pt; }
#private-profile{ clear: both; }
#private-profile .item label.radio-label{ display: inline; width: auto; float: none; height: auto; padding: 0 10px; }
#photo{ width: 96px; height: 96px; float: left; margin: 0 12px 12px 0; }
#profile-photo{ margin-top: 32px; }
#profile-email, #profile-nickname{ width: 240px; }

#profile-success{ color: #438e25; font-weight: bold; font-size: 11pt; width: 700px; margin: 16px auto; }
#my-profile #content .submit{ float: right; margin-right: 148px; border: 1px solid #000; background: #fff; font-weight: bold; font-size: 13pt; font-family: Georgia, Verdana, serif; padding: 2px 8px; margin-bottom: 16px; }
#my-profile #content a{ color: #000; border: 1px solid #000; background: #fff; padding: 2px 4px; font-weight: bold; font-size: 13pt; font-family: Georgia, Verdana, serif; text-decoration: none; }

/* change password */
#change-pw #content input{  border: 1px solid #808080; font-family: courier,"courier new",monospace; font-size: 11pt; padding: 3px; margin-top: 4px; }
#change-pw #content label{ display: block; width: 180px; float: left; height: 26px; margin-top: 4px; clear: left; font-weight: bold; font-size: 11pt; }
#change-pw #content input.submit{ border: 1px solid #000; background: #fff; font-weight: bold; font-size: 11pt; font-family: Georgia, Verdana, serif; padding: 2px 8px; margin: 16px 0 0 180px; }
#password-error{  text-align: left; font-size: 10pt; clear: both; margin: 16px 0  0 180px; }
#password-success{ color: #438e25; font-weight: bold; font-size: 11pt; }


/* forgot password */
#forgot-pw #content input#recover-text{ border: 1px solid #808080; font-family: courier,"courier new",monospace; font-size: 11pt; padding: 3px; margin-top: 4px;}
#forgot-pw #content label{ display: block; width: 180px; float: left; height: 22px; margin-top: 4px; clear: left; font-weight: bold; font-size: 11pt; line-height: 22px; }
#forgot-pw #content input.submit{ border: 1px solid #000; background: #fff; font-weight: bold; font-size: 11pt; font-family: Georgia, Verdana, serif; padding: 2px 8px; margin: 16px 0 0 180px; clear: left; display: block; }
#forgot-pw #content .error{ padding: 10px 0 0 180px; font-size: 11pt; }