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, dialog, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent}
body {line-height: 1}
article, aside, dialog, figure, footer, header, hgroup, nav, section {display: block}
nav ul {list-style: none}
blockquote, q {quotes: none}
blockquote: before, blockquote: after, q: before, q: after {content: ''; content: none}
a {margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; outline: none}
ins {background-color: #ff9; color: #000; text-decoration: none}
mark {background-color: #ff9; color: #000; font-style: italic; font-weight: bold}
del {text-decoration: line-through}
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help}
table {border-collapse: collapse; border-spacing: 0}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0}
input, select {vertical-align: middle}
@font-face {font-family: "Gotham-Medium"; src: url("/fonts/Gotham-Medium.ttf")}
@font-face {font-family: "CartoGothicStdBook"; src: url("/fonts/CartoGothicStd-Book.eot"); src: local("☺"), url("/fonts/CartoGothicStd-Book.woff") format("woff"), url("/fonts/CartoGothicStd-Book.ttf") format("truetype")}
body {margin: 0; background: #333642; color: #a5a8b3; font: 14px/1.6em Helvetica, "Liberation Sans", sans-serif; overflow-x: hidden; text-align: center; text-shadow: 0 1px 1px #000; -webkit-user-select: ignore; -moz-user-select: ignore}
h1 {padding-top: 28px}
h1 a, h1 a img {display: block; width: 72px; height: 63px}
h1 a {margin-left: 29px}
h2 {margin: 40px 0 25px; color: #fff; font: 22px "Gotham-Medium"}
h3, legend {margin: 15px 0; color: #fff; font: 18px "Gotham-Medium"}
p {margin: 10px 0; padding: 0}
a {color: #fff; text-decoration: underline}
a:hover {text-decoration: none}
header {height: 114px; background: #27282e; text-align: left}
ul {list-style: none}
ol {margin-left: 20px}
.left {float: left}
.right {float: right}
.clear {clear: both}
.center {text-align: center}
#content {border-top: 1px solid #3b3e4a; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 -4px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 -4px 3px}
.box {width: 435px; margin: auto; padding: 10px 20px; background: #414450; text-align: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px}
.box h3 {text-align: center}
.box h3.or-title {margin-top: 0}
.box ul {list-style: disc; margin-left: 14px}
.welcome header {background: none; text-align: center}
.welcome h1 a, .welcome h1 a img {width: 113px; height: 98px; margin: 0 auto}
.welcome #content {max-width: 960px; margin: 0 auto; border-top: none; -webkit-box-shadow: none; -moz-box-shadow: none}
.welcome .flash {margin: 25px 0 -25px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px}
.welcome .box {height: 330px; width: 48%}
.welcome .box p.center {margin: 0}
.welcome #sign-up {float: left; text-align: center}
.welcome #sign-in {float: right}
.welcome #sign-up img {margin: -8px auto 8px}
.welcome #sign-up p.center + p.center {color: #fff}
.jolicloud-notice {clear: both; padding-top: 20px}
.picture-preview img {width: 64px; -moz-box-shadow: rgba(0, 0, 0, 0.5) 1px 3px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.5) 1px 3px 3px}
.picture-action {width: 64px; text-align: center}
.picture-action a {font-size: 12px; text-decoration: none}
label {font-size: 14px; cursor: pointer; color: #fff; vertical-align: middle}
textarea:focus, input[type="text"]:focus, input[type="password"]:focus {outline: 0}
p.checkboxes span {margin: 0}
p.checkboxes label {color: #a5a8b3; font-size: 13px; width: 80%; margin-left: 10px}
p.checkboxes label a {font-family: Helvetica; font-weight: bold; text-decoration: none; color: #fff}
.forgot {clear: both; margin: 0; text-align: right}
.forgot a {font-size: 12px; color: #a5a8b3}
form.like-hints div.form-row .input-wrapper {width: 40%}
.input-wrapper, .input-wrapper span {height: 28px; display: inline-block; background: url('/images/account/textfield.png') no-repeat top left; text-decoration: none; line-height: 28px}
.input-wrapper span.input-inner {background-position: right -56px; float: left}
.input-wrapper span span {background-position: left -28px; background-repeat: repeat-x; margin: 0 12px}
.input-wrapper span span input {vertical-align: baseline; padding: 0; border: 0; background: transparent}
.input-inner span input, .field-inactive {font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height: 18px; vertical-align: middle; height: 24px; color:#404040; border: none; margin-top: 1px; background: transparent}
.field-inactive {color: #fff; text-shadow: none}
.field-inactive span {display: inline-block; margin-left: 8px; margin-top: 4px; vertical-align: top}
* html .input-inner div input {padding: 6px 0 0 0; margin: 0 0 0 -8px; height:24px}
*+ html .input-inner div input {padding: 6px 0 0 0; margin-left:-10px; height:24px}
.button-action, .button-action span {height: 54px; display: inline-block; background: url('/images/account/button-action.png') no-repeat top left; text-decoration: none; font: 22px/1 "Gotham-Medium", Helvetica, "Liberation Sans", sans-serif; line-height: 54px; text-shadow: 0 1px 1px #fca80f; color: #653e08}
.button-action span {background-position: right -108px; float: left}
.button-action span span {background-position: left -54px; background-repeat: repeat-x; margin: 0 12px}
.button-action:active, .button-action:active span, .button-action:focus, .button-action:focus span {background: url('/images/account/button-action.png') no-repeat left -162px}
.button-action:active span, .button-action:focus span {background-position: right -270px}
.button-action:active span span, .button-action:focus span span {background-position: left -216px; background-repeat: repeat-x}
.button-facebook {text-align: center}
.button-submit {margin: 0px; padding: 0px; border: none; background-color: transparent; cursor: pointer; overflow: visible; color: #4a4b4e; font: 14px/1 "Gotham-Medium", Helvetica, "Liberation Sans", sans-serif; line-height: 25px; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.37)}
*:first-child+html .button-submit[type]{width: 1;}
.button-submit span {background: transparent url(../../images/account/form/btn_right.png) no-repeat right top; display: block; float: left; padding: 0px 12px 0px 0px; margin: 0px; height: 28px}
.button-submit span span {background: transparent url(../../images/account/form/btn_left.png) no-repeat top left; color: #333; padding: 8px 4px 0px 16px; font-weight: normal; font-size: 14px; line-height: 9px; display: block; text-decoration: none; height: 28px}
a.button-submit {display: block; height: 26px; width: 64px; text-decoration:none; float: right}
a.button-submit, a.button-submit span {height: 26px}
a.button-submit span span {height: 18px}
.button-submit_hover span span {background-position: left -28px }
.button-submit_hover span {background-position: right -28px }
.button-submit_click span span {background-position: left -57px }
.button-submit_click span {background-position: right -56px }
* html button.button-submit {height:28px}
* button.button-submit span span {height: 19px}
*+ html button.button-submit {height:28px}
*+ button.button-submit span span {height: 19px}
.button-submit[disabled] span span {background-position: left -84px }
.button-submit[disabled] span {background-position: right -84px; color: #53545B; text-shadow: 0 1px 1px #979AA1}
span.jqTransformCheckboxWrapper{ display:block;float:left; margin-top:5px}
a.jqTransformCheckbox {background: transparent url(../../images/account/form/checkbox.png) no-repeat center top; vertical-align: middle; height: 23px; width: 23px; display:block;}
a.jqTransformChecked {background-position: center bottom;}
.jqTransformSelectWrapper {width: 45px; position:relative; height: 26px; background: url(../../images/account/form/select_left.png) no-repeat top left; display: inline-block}
.jqTransformSelectWrapper div span {font-size: 12px; float: none; position: absolute; white-space: nowrap; height: 26px; line-height: 10px; padding: 8px 0 0 7px; overflow: hidden; cursor:pointer; color: #3e4251; text-shadow: rgba(255, 255, 255, 0.9) 0 1px 1px}
.jqTransformSelectWrapper a.jqTransformSelectOpen {display: block; position: absolute; right: 0px; width: 22px; height: 26px; background: url(../../images/account/form/select_right.png) no-repeat center center}
.jqTransformSelectWrapper ul {position: absolute; width: 43px; top: 26px; left: 0px; list-style: none; background-color: #FFF; border: solid 1px #CCC; display: none; margin: 0px; padding: 0px; height: 150px; overflow: auto; overflow-y: auto; z-index:10}
.jqTransformSelectWrapper ul a {display: block; padding: 2px 5px; text-decoration: none; background: #a2a5ae; color: #3e4251; font-size: 12px; text-shadow: rgba(255, 255, 255, 0.9) 0 1px 1px}
.jqTransformSelectWrapper ul a.selected {background: #EDEDED; color: #333}
.jqTransformSelectWrapper ul a:hover, .jqTransformSelectWrapper ul a.selected:hover {background:#787A82}
.jqTransformHidden {display: none;}
ul.navigation {height: 38px; padding: 0; margin-top: 0; border-top: 1px solid #6c6f7d; border-bottom: 1px solid #292b33; list-style-type: none; background: url("/images/account/bg_horizontal.png"); background: -webkit-gradient(linear, left top, left bottom, from(#515664), to(#404450)); background: -moz-linear-gradient(top, #515664, #404450)}
ul.navigation li {color: #a4a6ac; display: inline-block; font: 15px "Gotham-Medium"; height: 36px; line-height: 36px; padding: 0 15px; text-shadow: rgba(0, 0, 0, 0.25) 0px -1px 1px}
ul.navigation li a {color: #a4a6ac; text-decoration: none}
ul.navigation li a:hover, ul.navigation li a:focus {color: #fff;+ }
ul.navigation li.active {color: #fff; text-shadow: #000 0px -1px 1px}
ul.navigation li.back {float: left; width: 100px; margin-right: -129px; margin-left: 29px; padding: 0; text-align: left}
ul.navigation li.logout {float: right; width: 100px; margin-left: -129px; margin-right: 29px; padding: 0; text-align: right}
.tabs {margin: 20px auto 0; border-bottom: 2px solid #404450; margin-bottom: 20px; -webkit-box-shadow: #292b33 0px 1px; -moz-box-shadow: #292b33 0px 1px}
.tabs li {display: inline-block; margin-top: 1px}
.tabs li a {-moz-border-radius-topleft: 2px; -moz-border-radius-topright: 2px; -webkit-border-top-left-radius: 2px; -webkit-border-top-right-radius: 2px; -webkit-transition-duration: 0.2s; background: #27282e; color: #a4a6ac; font-weight: 100; font: 14px "Gotham-Medium", Helvetica, "Liberation Sans", sans-serif; padding: 3px 10px 3px 12px; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.75) 0 1px 3px}
.tabs li:not(:first-child) a {margin-left: -1px}
.tabs li a.active {background: url("/images/account/bg_horizontal.png"); background: -webkit-gradient(linear, left top, left bottom, from(#515664), to(#404450)); background: -moz-linear-gradient(top, #515664, #404450); color: #fff}
.tabs li a:hover {color: #fff}
.tabs li a.active {color: #fff}
.tab-content {display: none; width: 100%}
footer .back {position: absolute; bottom: 39px; left: 39px; border-top: 1px solid #bdbec4; border-right: 1px solid #acaeb3; border-bottom: 1px solid #9b9ba0; border-left: 1px solid #acaeb3; background: -webkit-gradient(linear, left top, left bottom, from(#a9aab2), to(#7f8086)); background: -moz-linear-gradient(top, #a9aab2, #7f8086); color: #3c3d3f}
footer .next {position: absolute; bottom: 39px; right: 39px}
.form-row {clear: both; height: 28px; margin-bottom: 15px}
div.form-row label {margin: 0; height: 28px; line-height: 28px; float: left}
form.standard div.form-row label {width: 35%}
form.standard div.form-row span.input-wrapper {width: 65%}
form.with-hints div.form-row label, form.like-hints div.form-row label {width: 20%}
form.with-hints div.form-row div.span-wrapper {width: 80%; float: left; height: 28px}
form.with-hints div.form-row .input-wrapper {width: 50%; float: left}
form.with-hints div.form-row .hint {border-top: 1px solid #343434; display: none; float: right; width: 50%; height: 27px; background: #4A505D; color: #fff; font-size: 12px; vertical-align: middle; text-shadow: none; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; line-height: 28px}
form.with-hints div.form-row .hint span {margin-left: 15px; display: inline-block}
form.with-hints div.form-row .pass {background: #D7D8DF; color: #323232}
form.with-hints div.form-row .fail {visibility: visible; background: #FFCFCF; color: #962A2A}
form.with-hints div.form-row .pwdok {background: #4A505D; line-height: 14px}
form.with-hints div.form-row div.selected span > span {background-position: right -28px !important}
.submit-validation-box {text-align: right}
.submit-validation-box .button {margin: 0}
.account-thanks .activation-box {text-align: center}
.account-thanks .thanks {margin-top: 10%; line-height: 28px}
.account-thanks footer a {margin-top: 10%}
@media screen and (max-height: 530px) {body > header {display: none}
.welcome .button-facebook .FBConnectButton_Text {font-size: 20px}
.welcome .box {margin-left: 10px; margin-right: 10px; width: 48%}
.welcome #sign-up {margin-right: 0}
.welcome #sign-in {margin-left: 0}
}
.submit {clear: both; text-align: right}
.activation-box {text-align: left; width: 600px; margin: auto}
.activation-box h2 {line-height: 28px}
.activation-box h4 {margin-top: 4px; margin-bottom: 27px}
.activation-box label {display: inline-block; width: 35%}
.activation-box input[type="text"], .activation-box input[type="password"] {width: 65%}
.computer label {width: 120px}
.computer select {margin-right: 10px}
.country select {width: 60%}
.account-friends .jqTransformCheckbox {margin-right: -30px; margin-top: 20px}
.friend-item {width: 25%; text-align: center; display: inline-block; margin-bottom: 15px}
.friend-item .icon {display: inline-block; width: 64px; height: 64px}
.friend-item .icon img {width: 64px; height: 64px; -webkit-box-shadow: rgba(0, 0, 0, 0.5) 1px 3px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.5) 1px 3px 3px}
.friend-item label {text-align: center; height: 100px; width: auto; vertical-align: middle; line-height: 1}
.friend-item .friend-info {display: inline-block; text-align: center; width: 110px}
.friend-item .friend-name {margin-top: 10px; font-size: 12px; color: #d8dae3}
.friend-item input[type=checkbox] {display: none}
.friend-item .checkbox-parade {display: inline-block; vertical-align: top; margin-top: 15px; width: 24px; height: 24px; background: url("/images/account/checkbox.png") no-repeat; margin-right: -15px}
.friend-item label.checked .checkbox-parade {background-position: 0 -23px}
a.skip {vertical-align: top; text-decoration: none; font-size: 12px; display: inline-block; margin-top: 3px; margin-right: 10px}
.flash {padding: 5px 0px; color: #fff; background: #414450; font-weight: bold}
.warning {color: #FFF; background: #E85A36}
.errors {margin: -15px 0 20px}
.errors p {margin: 0; padding: 0}
.errors ul {list-style: disc}
.errors li {margin-left: 20px}