/* general */

body {
  font-family: 'Trebuchet MS', sans-serif;
  margin: 0;
  padding: 0;
}

a {
  color: #b41818;
}

h2 {
  margin: 12pt 0 6pt 0;
}

h3 {
  font-size: 110%;
  margin: 6pt 0;
}

p.shade {
  background: #D9EDBC;
  padding: 3pt;
}


/* header */

#header {
  background: #78A05C;
  color: #fff;
  margin-bottom: 18pt;
  padding: 16pt 0;
  zoom: 1;
}

#header:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#header .inner {
  width: 550pt;
  margin: 0 auto;
}

#header h1 {
  margin: 0;
  padding: 0;
  float: left;
}

#header h1 a {
  font-size: 32pt;
  line-height: 32pt;
  font-weight: normal;
  text-decoration: none;
  padding: 0 0 0 10pt;
  border-left: 6pt solid #D7EC83;
}

#header a {
  color: #fff;
}


/* menu */

#header ul {
  padding: 0;
  margin: 0;
  margin-right: -6pt;
  list-style: none;
  float: right;
}

#header li {
  display: inline;
}

#header li a {
  padding: 24pt 6pt;
  font-size: 14pt;
  line-height: 32pt;
  text-transform: uppercase;
  text-decoration: none;
}

#header li a:hover {
  text-decoration: underline;
}


/* content */

#content {
  width: 550pt;
  margin: 0 auto;
}

#tagline {
  font-weight: bold;
  font-size: 24pt;
  line-height: 24pt;
  letter-spacing: -1px;
  margin: 0;
  padding: 6pt 10pt;
  background: #FCF394;
}


/* footer */

#footer {
  background: #78A05C;
  color: #fff;
  margin-top: 24pt;
  padding: 8pt;
  font-size: 10pt;
}

#footer a {
  color: #fff;
}

#footer p {
  text-align: center;
  width: 550pt;
  margin-left: auto;
  margin-right: auto;
}


/* forms */

#key, #contest, #free {
  padding: 10px 10px 10px 130px;
  margin: 20px 15px;
  min-height: 100px;
  background: url(/images/arrow_light.gif) 10px 10px no-repeat;
}

#key {
  padding-bottom: 0;
}

#free {
  background-color: #D7E7B4;
  background-image: url(/images/green_arrow_light.png);
}

#contest {
  background-color: #FBECC6;
  background-image: url(/images/orange_arrow_light.png);
}

#key.focus {
  background-image: url(/images/arrow_dark.gif);
}

#free.focus {
  background-image: url(/images/green_arrow_dark.png);
}

#contest.focus {
  background-image: url(/images/orange_arrow_dark.png);
}

#key h2, #contest h2, #free h2 {
  margin: 6pt 0;
}

form {
  margin: 8pt 0;
}

p.result {
  margin: 8pt 0;
  padding: 3pt;
  background: #ff9;
  width: 360pt;
}

label {
  display: block;
  margin: 6pt 0;
}

input {
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 100%;
}

.submit {
  line-height: 16pt;
  margin-top: 2pt;
  border: 2pt outset #eee;
  background: #eee;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 100%;
  cursor: pointer;
  padding: 2pt 5pt;
}

.submit:hover {
  background: #ddd;
  border-color: #ddd;
}

.submit:active {
  background: #ddd;
  border-color: #ddd;
  border-style: inset;
}


/* contest */

#drawing {
  margin-bottom: 20px;
}

#entries table td {
  padding: 5px;
}

#phrase .current strong {
  font-weight: bold;
  background: #ff9;
  padding: 3px;
}

#phrase .current a {
  padding-left: 5px;
  font-size: 90%;
}

#phrase form {
  margin: 8pt 0pt 12pt 0pt;
}

#drawing fieldset h4 {
  margin: 3pt 0;
}

#drawing label.radio {
  margin: 3pt 0;
}

#drawing fieldset {
  border: none;
  margin: 0;
  padding: 4pt 0;
}

#drawing .submit, #redrawing .submit {
  margin-top: 6pt;
}

#drawing.disabled .submit, #redrawing.disabled .submit {
  border: 2pt solid #eee !important;
  background: #eee !important;
  color: #333 !important;
  cursor: default !important;
}


/* drawing time selector */

#drawing_time {
  overflow: auto;
}

#drawing_time .half {
  float: left;
  padding: 4pt 8pt;
}

#drawing_time .local {
  border-right: 1px dotted #ccc;
}

#drawing_time h4 {
  text-align: center;
  clear: left;
  font-weight: normal;
  margin: 0;
  padding-top: 8pt;
}

#drawing_time .segment {
  float: left;
  margin: 0 4pt;
}

#drawing_time .segment input {
  font: 100% 'Trebuchet MS', sans-serif;
  display: block;
  text-align: center;
}

#drawing_time .segment button {
  width: 100%;
  background: transparent;
  border: none;
  padding: 2pt;
  height: 12pt;
  line-height: 12pt;
}

#drawing_time .segment.date input {
  width: 90px;
}

#drawing_time .segment.hours input,
#drawing_time .segment.minutes input,
#drawing_time .segment.meridian input {
  width: 30px;
}