/*------------------------------------------*\
  css reset
\*------------------------------------------*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video
{
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background-color: transparent;
}

body { line-height: 1; }

article, aside, details, figcaption, figure, footer,
header, hgroup, menu, nav, section { display: block; }

nav ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after
{
  content: '';
  content: none;
}

table
{
  border-collapse: collapse;
  border-spacing: 0;
}

input, select { vertical-align: middle; }

html, body { min-height: 100%; }


/*------------------------------------------*\
  generic styles
\*------------------------------------------*/

body {
  color: #ffffff;
  background: #000000 url( ../images/background.jpg ) top center no-repeat;
  font-family: Verdana,Arial,Helvetica,sans-serif;
}

a {
  color: #ffcc00;
  outline: none;
}

a:hover {
  color: #ffffff;
}

ul {
  list-style-type: none;
}

li {
  padding-left: 20px;
  margin-left: -20px;
  background: url( ../images/bullet.png ) top left no-repeat;
}

.off {
  display: none;
}

.on {
  display: block;
}


/*------------------------------------------*\
  general locale overrides
\*------------------------------------------*/

body.en-US .en-GB,
body.en-US .en-AU,
body.en-US .de-DE,
body.en-US .fr-FR {
  display: none;
}

body.en-GB .en-US,
body.en-GB .en-AU,
body.en-GB .de-DE,
body.en-GB .fr-FR {
  display: none;
}

body.en-AU .en-US,
body.en-AU .en-GB,
body.en-AU .de-DE,
body.en-AU .fr-FR {
  display: none;
}

body.de-DE .en-US,
body.de-DE .en-GB,
body.de-DE .en-AU,
body.de-DE .fr-FR {
  display: none;
}

body.fr-FR .en-US,
body.fr-FR .en-GB,
body.fr-FR .en-AU,
body.fr-FR .de-DE {
  display: none;
}

body.en-US .en-US,
body.en-GB .en-GB,
body.en-AU .en-AU,
body.de-DE .de-DE,
body.fr-FR .fr-FR {
  display: block;
}


/*------------------------------------------*\
  layout containers
\*------------------------------------------*/

body {
  width: 100%;
}

#page {
  width: 960px;
  margin: auto;
  position: relative;
}

#header-bar {
  height: 28px;
}

#content-column {
  float: right;
  position: relative;
  width: 529px;
  min-height: 814px;
}

#content-wrapper {
  margin-bottom: 115px;
}

#rating-social {
  position: absolute;
  bottom: 0px;
  width: 370px;
  height: 116px;
  padding-left: 80px;
}

#footer-container {
  background: url( ../images/footer-bg.png ) top left repeat-x;
  clear: both;
  width: 100%;
}

/*------------------------------------------*\
  header bar
\*------------------------------------------*/

#continue-ddo {
  display: block;
  float: left;
  width: 214px;
  height: 26px;
  margin: 0 0 0 17px;
  background-position: center 0;
  background-repeat: no-repeat;
  text-align: left;
  font-size: 12px;
}

#continue-ddo:hover {
  background-position: center -26px;
}

#lang-select {
  float: right;
  margin: 6px 10px 0 0;
}

#lang-select a {
  display: block;
  float: left;
  width: 16px;
  height: 11px;
  padding: 0 5px;
  background-position: 0 0;
  background-repeat: no-repeat;
  text-align: left;
  text-indent: -9999px;
}

#lang-select a:hover {
  background-position: 0 -11px;
}

a.flag-en-US {
  background-image: url( ../images/flags/en-US.png );
}

a.flag-en-GB {
  background-image: url( ../images/flags/en-GB.png );
}

a.flag-en-AU {
  background-image: url( ../images/flags/en-AU.png );
}

a.flag-fr-FR {
  background-image: url( ../images/flags/fr-FR.png );
}

a.flag-de-DE {
  background-image: url( ../images/flags/de-DE.png );
}

a.flag-EU {
  background-image: url( ../images/flags/EU.png );
}


/*------------------------------------------*\
  rating/social content
\*------------------------------------------*/

#rating-social a {
  float: left;
  display: block;
  background-position: 0 0;
  background-repeat: no-repeat;
  text-align: left;
  text-indent: -9999px;
}

#link-facebook {
  margin: 32px 0 0 2px;
  width: 51px;
  height: 51px;
  background-image: url( ../images/facebook.png );
}

#link-facebook:hover {
  background-position: 0 -51px;
}

#link-twitter {
  margin: 32px 0 0 10px;
  width: 42px;
  height: 50px;
  background-image: url( ../images/twitter.png );
}

#link-twitter:hover {
  background-position: 0 -50px;
}

#link-youtube {
  margin: 19px 0 0 10px;
  width: 58px;
  height: 65px;
  background-image: url( ../images/youtube.png );
}

#link-youtube:hover {
  background-position: 0 -65px;
}

img.rating {
  float: right;
}


/*------------------------------------------*\
  footer
\*------------------------------------------*/

#footer-logos {
  float: left;
  margin: 47px 48px 0 6px;
}

#footer-content {
  width: 960px;
  margin: auto;
}

#footer-copy {
  padding-top: 20px;
  margin-left: 339px;
}

.footer-info {
  color: #c3b4ab;
  font-size: 10px;
  line-height: 14px;
  margin: 0;
  padding: 0;
  text-align: center;
}

.footer-info a {
  color: #ffdd60;
  padding: 0 5px;
}

.footer-info a:hover {
  color: #ffcc00;
}

.legal-info {
  font-size: 9px;
  color: #979797;
  text-align: justify;
  padding: 7px 5px;
}


/*------------------------------------------*\
  signup form
\*------------------------------------------*/

#form-header {
  width: 100%;
  height: 106px;
  background-position: bottom center;
  background-repeat: no-repeat;
  font-size: 34px;
  font-weight: bold;
  text-transform: uppercase;
  color: #ffcc00;
  text-align: center;
  line-height: 44px;
}

#signup-form {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

#signup-form .form-element {
  position: relative;
}

#signup-form label {
  display: block;
  width: 100%;
  height: 20px;
  font-size: 16px;
  text-transform: capitalize;
  text-align: center;
  background-position: top center;
  background-repeat: no-repeat;
}

#signup-form input {
  width: 305px;
  height: 22px;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-color: #794c21;
  border-width: 2px;
  background-color: #fbf9dc;
  font-size: 16px;
  text-indent: 10px;
  margin-bottom: 10px;
  color: #3f3f3f;
}

#signup-form select {
  height: 27px;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-color: #794c21;
  border-width: 2px;
  background-color: #fbf9dc;
  font-size: 16px;
  margin: 0 10px 10px;
  color: #3f3f3f;
}

.agree-checkbox {
  display: block;
  margin-top: 10px;
  padding: 0 20px;
}

#signup-form .agree-checkbox input {
  float: left;
  margin: 0 0 0 5px;
  width: auto;
  height: auto;
  border-width: 2px;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  background-color: transparent;
}

#signup-form .agree-checkbox label {
  font-size: 11px;
  color: #c3b4aa;
  margin-left: 34px;
  text-align: left;
  width: auto;
  height: auto;
  text-transform: none;
}

#signup-form input.button {
  width: 166px;
  height: 54px;
  margin-top: 20px;
  background: #378301;
  border-color: #ffcc00;
  color: #ffffff;
  text-indent: 0;
  cursor: pointer;
  background-position: top center;
  background-repeat: no-repeat;
}

#show-login-text {
  font-size: 12px;
  color: #c3b4aa;
  text-align: center;
  display: none;
}

#strength-meter {
  display: none;
  position: absolute;
  right: 0;
  top: 15px;
  width: 30px;
  height: 30px;
  background: url( ../images/pw-strength.png );
  background-position: 0 0;
}

#strength-meter div {
  display: none;
}

#strength-meter.password-na {
  background-position: 0 0;
}

#strength-meter.password-weak {
  background-position: 0 -30px;
}

#strength-meter.password-medium {
  background-position: 0 -60px;
}

#strength-meter.password-strong {
  background-position: 0 -90px;
}

#doblocale {
  display: none;
}

#french-addendum {
  font-size: 11px;
  color: #c3b4aa;
  text-align: justify;
  margin: 10px 0;
}


/*------------------------------------------*\
  form errors
\*------------------------------------------*/

#signup-form .error input,
div#signup-form .error select {
  border-color: #cc0033;
}

img.noerror {
  display: none;
}

img.error {
  display: block;
  position: absolute;
  left: 15px;
  top: 28px;
}

.agree-checkbox img.error {
  left: 0;
  top: -3px;
}

.tooltip {
  border: solid 1px #ed9635;
  background: #262626;
  color: #ffffff;
  font-family: Verdana;
  font-size: 11px;
}

.error .tooltip,
.noerror .tooltip {
  display: none;
}

.tooltip span {
  padding: 4px;
  display: block;
  background: #981714 url( ../images/error-bg.png ) bottom left repeat-x;
  border: solid 1px #380605;
}

.tooltip span b {
  display: block;
  margin-bottom: 5px;
}

#signup_append_error {
  color: #cc0033;
  text-align: left;
  font-size: 11px;
}

/*------------------------------------------*\
  popup content
\*------------------------------------------*/

#popups {
  display: none;
}

.popup-free-content {
  padding: 20px 40px;
}

.popup-free-content img {
  display: block;
  margin: 25px auto;
}

.popup-free-content p {
  font-size: 12px;
  line-height: 15px;
  margin-bottom: 20px;
}

.popup-free-content em {
  text-transform: italic;
  color: #ffcc00;
}

.popup-whatis-content {
  padding: 25px 50px 10px 50px;
}

#header-started-it,
#header-play-for-free {
  display: block;
  margin: 10px auto 0 auto;
}

.popup-whatis-content p {
  font-size: 12px;
  line-height: 15px;
  margin-top: 25px;
}

.popup-whatis-content ul {
  font-size: 12px;
  line-height: 15px;
  margin-top: 25px;
  margin-left: 25px;
}

.popup-whatis-content li {
  margin-bottom: 10px;
}

#screenshot-gallery {
  display: none;
}

/*------------------------------------------*\
  tooltip popup content
\*------------------------------------------*/

.tooltip-info {
	position: relative;
}

.tooltip-popup {
  text-decoration: none;
  display: none;
  position: absolute;
  left: -1em;
  bottom: 2em;
  z-index: 99;
  width: 180px;
  color: #fff;
  font-size: 0.8em;
  line-height: 1.2em; 
  background-color: #891110;
  border: 1px solid #ee9635;
  padding: 6px;
  -moz-box-shadow:inset 0px 0px 1px 1px #390303;
  -webkit-box-shadow:inset 0px 0px 1px 1px #390303;
  box-shadow:inset 0px 0px 1px 1px #390303;
  background: #8c1211; /* Old browsers */
  background: -moz-linear-gradient(top,  #8c1211 0%, #5a0105 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8c1211), color-stop(100%,#5a0105)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #8c1211 0%,#5a0105 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #8c1211 0%,#5a0105 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #8c1211 0%,#5a0105 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #8c1211 0%,#5a0105 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c1211', endColorstr='#5a0105',GradientType=0 ); /* IE6-9 */
}

a.tooltip-info:hover .tooltip-popup {
  display: block;
}


/*------------------------------------------*\
  success page
\*------------------------------------------*/

#success-header {
  width: 100%;
  height: 80px;
  background-position: bottom center;
  background-repeat: no-repeat;
  font-size: 34px;
  font-weight: bold;
  text-transform: uppercase;
  color: #ffcc00;
  text-align: center;
  line-height: 44px;
}


#turbine-offer-header {
  width: 529px;
  height: 131px;
  background-position: bottom center;
  background-repeat: no-repeat;
  font-size: 34px;
  font-weight: bold;
  text-transform: uppercase;
  color: #ffcc00;
  text-align: center;
  line-height: 44px;
}

#turbine-offer-subheader {
  width: 529px;
  height: 41px;
  background-position: bottom center;
  background-repeat: no-repeat;
  font-size: 34px;
  font-weight: bold;
  text-transform: uppercase;
  color: #ffcc00;
  text-align: center;
  line-height: 44px;
}

.download-message { 
	width: 350px;
  margin: 0 auto;
}

ul.offer-bullets {
	width: 330px;
  margin: 6px auto;
  font-size: 0.85em;
}

ul.offer-bullets li {
	margin-top: 4px;
}

#success-content p {
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  margin: 10px 0;
}

#turbine-download {
  display: block;
  width: 100%;
  height: 68px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  background-position: 50% 0;
  background-repeat: no-repeat;
  margin: 20px 0;
}

#turbine-download-mac {
  display: block;
  width: 100%;
  height: 68px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  background-position: 50% 0;
  background-repeat: no-repeat;
  margin: 20px 0;
}

#turbine-learn-more {
  display: block;
  width: 100%;
  height: 68px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  background-position: 50% 0;
  background-repeat: no-repeat;
  margin: 20px 0;
}

#turbine-download:hover {
  background-position: 50% -68px;
}

#turbine-download-mac:hover {
  background-position: 50% -68px;
}

#turbine-learn-more:hover {
  background-position: 50% -68px;
}

#download-divider {
  display: block;
  width: 100%;
  height: 24px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  background-position: 50% 0;
  background-repeat: no-repeat;
  margin: 20px 0;
}

.divider-line {
	margin: 0 auto;
	width: 390px;
  height: 15px;
  background-position: bottom center;
  background-repeat: no-repeat;
  font-size: 34px;
  font-weight: bold;
  text-transform: uppercase;
  color: #ffcc00;
  text-align: center;
  line-height: 44px;
  text-indent: -9999px;
  background-image: url( ../images/divider-line.png );
}

#gaikai {
  visibility: hidden;
}

#gaikai-button {
  text-align: center;
}

#sorry-header {
  width: 100%;
  height: 106px;
  background-position: bottom center;
  background-repeat: no-repeat;
  font-size: 34px;
  font-weight: bold;
  text-transform: uppercase;
  color: #ffcc00;
  text-align: center;
  line-height: 44px;
}

#failure-content p {
  text-align: center;
  margin: 20px 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: bold;
}

#failure-header {
  width: 100%;
  height: 106px;
  background-position: bottom center;
  background-repeat: no-repeat;
  font-size: 34px;
  font-weight: bold;
  text-transform: uppercase;
  color: #ffcc00;
  text-align: center;
  line-height: 44px;
}

#waiting {
  width: 100%;
  height: 106px;
  margin-top: 200px;
  background-position: bottom center;
  background-repeat: no-repeat;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  color: #ffcc00;
  text-align: center;
  line-height: 44px;
}