/**
 * PAGENAME index.css
 * AUTHORED Mark Willoughby
 * LUPDATED July 18, 2010
 * DESCRIPT Caribou CSS Stylesheet
**/

body, html {
  background:  #B0B0B0;
  /*font: 90% Veranda,Tahoma,Arial,serif; */
  color: #494949;
  font-size:10pt;
  font-family: Arial, Helvetica, sans-serif;
  height:100%;
  line-height: 1.2em;
  margin: 0px;
  padding: 0px;
  width: 100%;
}

/**
 * The entire page
**/

#wrap {
  background: #FFFFFF url('images/background_page.jpg') top left no-repeat;
  margin: 0 auto;
  padding: 0px;
  width: 1000px;
}

/**
 * The title header
**/

#title {
  height: 130px;
  width: 980px;
  margin: auto;
}
.logo {
  height: 120px;
  float: left;
  padding: 10px 0 0 120px;
  width: 410px;
}
/*.timer {
  position: absolute;
  left: 55%;
  top: 5px;
}*/
.english_french {
  float: right;
  height: 39px;
  padding: 2px 0px 5px 0px;
  text-align: right;
  width: 430px;
}
.outside_links {
  height: 30px;
  float: right;
  font-size: 90%;
  text-align: right;
  width: 430px;
}
.phone {
  height: 15px;
  float: right;
  font-size: 90%;
  text-align: right;
  width: 430px;
}
.title_links {
  height: 15px;
  float: right;
  font-size: 90%;
  padding-top: 10px;
  text-align: right;
  text-transform: uppercase;
  width: 430px;
}
.title_links a {
  text-decoration: none;
  color: #DD6A1D;
  border-right: dotted 1px #DD6A1D;
  padding-right: 10px;
  padding-left: 10px;
}
.title_links a.a_right {
  border-right: 0px;
  font-weight: bold;
  margin-right: -10px;
}
.title_links a:hover {
  text-decoration:underline;
}

/**
 * The menu bar below the title
**/

#menu_bar {
  background: #DD6A1D;
  font-size: 90%;
  text-align: center;
  text-transform: uppercase;
  width: 1000px;
  margin: auto;
  filter:alpha(opacity=80);
  opacity: 0.8;
  -moz-opacity:0.8;
}
#menu_bar li {
  background: #DD6A1D;
  border-right: dotted 1px white;
  list-style: none;
  float: left;
  width: 165px;
  padding-left: 0px;
}
#menu_bar li.li_right {
  border-right: 0px;
  width: 170px;
}
#menu_bar li.smaller {
  font-size: 85%;
}
#menu_bar ul {
  float: left;
  margin-left: -40px;
  margin-top: 0px;
  position:relative;
}
#menu_bar li a {
  display: block;
  padding: 5px;
  text-decoration: none;
  color: white;
}
#menu_bar li:hover {
  position:relative;
}
#menu_bar li a:hover {
  background: #f0a16c;
  color: white;
}

/**
 * The banner
**/

#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:1000px; margin:0px auto; display:none; background:#000; float: left;}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:994px; height:300px; padding:2px; border:1px solid #000; background:#000}
#information {position:absolute; bottom:0; width:994px; height:0; background:#000; color:#fff; overflow:hidden;

z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#information a {color:white;}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(images/left.gif) left center no-repeat}
#imgnext {right:0; background:url(images/right.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(images/link.gif) center center no-repeat}
#thumbnails {margin-top:15px;}
#slideleft {float:left; width:20px; height:81px; background:url(images/scroll-left.gif) center center no-repeat;

background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(images/scroll-right.gif) center center

no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:950px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #000; padding:2px}


/**
 * The banner during the contest
**/

#contest_today_wrap {
  height: 200px;
  margin: auto;
  width: 1000px;
}
.contest_today_left {
  background: #96b9d5 url('images/contest_today_banner.jpg') top left no-repeat;
  color: white;
  float: left;
  height: 80px;
  padding: 120px 0px 0px 0px;
  width: 700px;
}
.contest_today_text {
  background: #111111;
  height: 70px;
  width: 690px;
  padding: 5px;
  filter:alpha(opacity=75);
  -moz-opacity:0.75;
  -khtml-opacity: 0.75;
  opacity: 0.75;
}
.contest_today_right {
  float: left;
  height: 200px;
  width: 300px;
}
.contest_today_english {
  float: left;
  height: 100px;
  width: 300px;
}
.contest_today_french {
  float: left;
  height: 100px;
  width: 300px;
}

/**
 * The menu at the left side of the page
**/

#menu {
  float:left;
  width:140px;
  padding-right: 10px;
  padding-top: 5px;
  line-height:1.0em;
}
#menu ul {
  list-style:none;
  float:left;
  font-size:90%;
  margin:0;
  padding:0 0 0px 10px;
  position: relative;
}
#menu li {
  display: block;
  float:left;
  list-style:none;
  margin:0 0 2px 0;
  width: 130px;
}
#menu li:hover {
  background: #F1C2A3;
  position:relative;
}
#menu li a {
  color: #DD6A1D;
  display: block;
  font-weight: normal;
  padding: 3px;
  text-decoration: none;
}
#menu li a:hover {
  background: #F1C2A3;
  text-decoration: none;
}
#menu ul ul {
  line-height: 1.0em;
  margin: 0px 0 3px -10px;
}
#menu ul ul li {
  background: url('images/bullet.jpg') 4px 7px no-repeat transparent;
  padding-left: 10px;
  width: 120px;
}
#menu ul ul li a {
  color: #F1C2A3;
  display: block;
  font-weight: normal;
  text-decoration: none;
}
#menu ul ul li a:hover{
  background: #FBE4D5;
  text-decoration: none;
}
#menu ul ul li:hover {
  background: #FBE4D5;
  position: relative;
}
#menu h2 { margin:0px 0px 8px 0px; }
#menu h3 { margin:0px 0px 8px 0px; }

/**
 * The main content of the page
**/

#content { width: 1000px; margin: auto; padding-bottom: 20px; }
.box_container { float: left; width: 660px; }
.box {
  float: left;
  width: 660px;
  margin:auto;
  margin-top: 10px;
  margin-bottom: 20px;
}
.box ul {
  margin-left: -15px;
}
.box li {
  background: url(images/bullet.jpg) 2px 7px no-repeat transparent;
  list-style: none;
  padding-left: 15px;
  margin-left: 15px;
}
.banner_index {
  background: #96b9d6 url(images/banner_index.jpg) top left no-repeat;
  height: 236px;
  width: 660px;
  margin-bottom: 10px;
}
.banner_text{
  color: #FFFFFF;
  font-size:2.0em;
  line-height: 1.2em;
  letter-spacing:-2px;
  height: 160px;
  padding-top: 35px;
  text-align: center;
  width: 480px;
}
.li_faq {
  background: none;
  list-style: decimal;
}

#box_right {
  color: #a4a4ae;
  float: left;
  font-size: 85%;
  line-height: 1em;
  margin-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
  width: 170px;
}
#box_right h2 {
  font-size: 90%;
  line-height: 0.7em;
}
#box_right h3 {
  font-size: 75%;
  margin-left: 0px;
  line-height: 0.7em;
}
#box_right ul {
  margin-left: -15px;
}
#box_right li {
  background: url(images/bullet.jpg) 2px 3px no-repeat transparent;
  list-style: none;
  padding-left: 15px;
  margin-left: -15px;
}

.sponsor {
  text-align: center;
  padding-top: 10px;
  width: 170px;
}

/**
 * The Calcrostic Puzzle
**/

.calcrostic_wrap {
  height:200px;
  margin:auto;
  text-align: center;
  width:630px;
}
.calcrostic_problem_wrap {
  border: 1px solid #dbdbdb;
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 2px;
  width:300px;
}
.calcrostic_problem {
  background: #d8e4ef;
  float:left;
  padding: 5px;
  width:290px;
}
.calcrostic_text {
  font-size: 18px;
  font-weight: bold;
  width: 100%;
}
.calcrostic_solution_wrap {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 2px;
  width:300px;
}
.calcrostic_solution {
  float:left;
  padding: 5px;
  width:300px;
}

/**
 * This ensures that the left and right containers are of equal height
**/

#clear { clear: both; }

/**
 * The div that contains the footers
**/

#footer {
  border-top:1px solid #dadada;
  clear:both;
  color:#808080;
  font-size:90%;
  height: 120px;
  line-height:1.6em;
  margin: auto;
  width: 1000px;
}
.footer_menu {
  float: left;
  width: 480px;
}
#footer a {
  color:#808080;
}
#footer a:hover {
  color:#808080;
}
.credits{
  line-height:1.5em;
  float: left;
  font-size: 80%;
  padding-left: 50px;
  width: 470px;
}
.credit_textbox { background-color: white; color: #808080; border: 0px; }

.nice_table_container { border: 1px solid #dbdbdb; float: left; margin-top: 10px; margin-bottom: 25px; padding: 2px; width: 650px; }
.nice_table { background: #F1C2A3; float:left; width: 650px; font-size:80%; }
.login_table { background: #96b9d6; float:left; width: 630px; text-align:center; color:white; padding:10px;}
.nice_table_header { background: #DD6A1D; color: white; width:640px; float:left; padding:5px; font-weight:bold; }
.nice_table_row { width:640px;float:left;padding:5px; }
.nice_table_row_white { width:640px;float:left;padding:5px;background: #FFFFFF; }
.registered_schools_school { width:287px;float:left; }
.registered_schools_city { width:155px;float:left; }
.registered_schools_participants { width:90px;float:left; }
.registered_schools_contact { width:160px;float:left; }
.registered_schools_phone { width:82px;float:left; }
.registered_schools_bottom_left { width:442px;float:left; }
.registered_schools_bottom_right { width:282px;float:left; }
.test_dates_left { width:354px;float:left; }
.test_dates_middle { width:280px;float:left; }
.test_dates_right { width:140px;float:left; }
.stats_rank { width:67px;float:left; }
.stats_name { width:195px;float:left; }
.stats_school { width:317px;float:left; }
.stats_city { width:145px;float:left; }
.stats_left { color: white; float: left; font-size: 1.5em; padding-left:40px; width: 410px; text-align:left;}
.stats_right { width: 300px; float: left; color: white; font-size: 1.5em; text-align:left; }
.log_num { width:37px;float:left; }
.log_ip { width:125px;float:left; }
.log_date { width:150px;float:left; }
.log_version { width:180px;float:left; }
.log_os { width:100px;float:left; }
.log_referrer { width:100px;float:left; }

.testing_container {
  border: 1px solid #dbdbdb;
  float: left;
  height: 161px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 2px;
  width: 644px;
}
.testing_table {
  background: #FFA500 url(images/under_construction.jpg) top right no-repeat;
  color: white;
  font-size: 1.5em;
  height: 121px;
  line-height:1.1em;
  padding: 20px;
  width: 604px;
}


/**
 * Text Styles
**/

a img { border:0; }
a {
  outline: none;
}

h1 {
  color: #DD6A1D;
  letter-spacing:-2px;
  font-family: Helvetica Narrow, sans-serif;
  font-size: 175%;
  margin-left: 0px;
  padding-top: 5px;
  text-transform: uppercase;
}
h1 a {
  text-transform:none;
  color:#4088b8;
}
h2 {
  color: #80808c;
  font-family: Helvetica Narrow, sans-serif;
  font-size: 120%;
  margin-left: 0px;
  text-transform: uppercase;
  clear: both;
}
h2 a {
  color: #80808c;
  text-decoration: none;
}
h2 a:hover {
  text-decoration: underline;
}
h22 {
  color: #80808c;
  font-family: Helvetica Narrow, sans-serif;
  font-size: 120%;
  margin-left: 0px;
  text-transform: uppercase;
  clear: both;
}
h22 a {
  color: #0000ff;
  text-decoration: none;
}
h22 a:hover {
  text-decoration: underline;
}
h3 {
  color: #a4a4ae;
  font-family: Helvetica Narrow, sans-serif;
  font-size: 100%;
  margin-left: 20px;
  text-transform: uppercase;
}
.phone_text {
  color: #DD6A1D;
  font-size: 120%;
}
.hotline {
  color: red;
  font-weight: bold;
}


/**
 * Form Styles
**/

.form_header_container {
  border: 1px solid #dbdbdb;
  float: left;
  margin-top: 10px;
  padding: 2px;
  width: 650px;
}
.form_header {
  background: #DD691D url('images/background_form_header.jpg') top left no-repeat;
  color: white;
  font-size: 1.5em;
  float: left;
  padding: 10px;
  width:630px;
}
.form_content {
  background: #F9F3F0;
  border-left: 1px solid #cfc9c9;
  border-right: 1px solid #cfc9c9;
  border-bottom: 1px solid #cfc9c9;
  float: left;
  margin-bottom: 10px;
  padding: 10px;
  width: 634px;
}

.form_subtitle {
  background: #d8e4ef;
  color: white;
  font-size: 1.2em;
  float: left;
  padding: 10px;
  width:634px;
}
.form_plaintext {
  float: left;
  margin-left:20px;
  width:580px;
}
input.form_text {
  border:0px solid #000000;
  float:left;
  width:70%;
  background:#F7F7F7;
  height:25px;
}
input.form_text_border {
  border:1px solid #ccc;
}
input.form_phone {
  width:10%;
}
.form_row {
  float: left;
  padding: 10px;
  width: 615px;
}
.form_wrap {
  width: 615px;
}
.form_column_left {
  float:left;
  padding-left: 10px;
  text-align:left;
  width: 160px;
}
.form_column_right {
  float: left;
  text-align:left;
  width: 440px;
}
.form_row_green {
  border: 1px solid #dbdbdb;
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 2px;
  width: 630px;
}
.form_wrap_green {
  background: #3CB371;
  color: white;
  float: left;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 630px;
}
.form_row_error {
  border: 1px solid #dbdbdb;
  float: left;
  margin-top: 10px;
  padding: 2px;
  width: 620px;
}
.form_wrap_error {
  background: #FFECEC;
  float: left;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 630px;
}
.form_column_left_error {
  float:left;
  color: #CC0000;
  font-weight: bold;
  padding-left: 16px;
  text-align:left;
  width: 160px;
}
.form_toperror {
  float:left;
  color: #CC0000;
  font-weight: bold;
  text-align:left;
  width: 610px;
}
.form_buttons { width: 100%; text-align: center;}

.required { color: red; }
.error { background: #FFECEC; border: 1px solid #990000; color: #CC0000; font-size: 11px; font-weight: bold; padding: 5px; text-align: center; }
.error_form { background: #FFECEC; border: 1px solid #990000; color: #CC0000; font-size: 11px; font-weight: bold; padding: 1px; text-align: center; }

.timezone_cell { font: inherit; font-size:80%;}
.timezone_table { font: inherit; }
.timezone_row { font: inherit; }

/* Test Styles */

.test_text { font-size:1.2em; line-height: 1.1em; }

/* Other Styles */

.timer_textbox { color: #4088b8; font-size: 90%; border: 0px; }
.timer_container { width:140px; float:left; margin:auto; font-size: 80%; }
.timer_left {
  width:72px;
  float:left;
}
.timer_right {
  float:left;
}
.question_links { width: 100%; float:left; margin:auto; font-size: 80%; }