body {
    background: #333 url(../images/bg.png) repeat-x;
    font: 15px/1.3em "Arial", "sans-serif";
    color: #fff;
}

.blue { color: #0fd1ff; }
.green { color: #6be52e; }
.pink { color: #ff2877; }
.pink-light { color: #FE699E; }
.white { color: #fff; }
.red { color: #FA1202; }

.center { text-align: center; }

h1 { font-size: 218%; line-height: 1.3em; margin: 0 0 0.8em 0; text-align: center; }
h2 { font-size: 164%; line-height: 1.3em; margin: 0 0 1.0em 0; text-align: center; }
h3 { font-size: 145%; line-height: 1.3em; margin: 0 0 0.8em 0; }
h4 { font-size: 118%; line-height: 1.2em; margin: 0 0 0.8em 0; }
h5 { font-size: 106%; line-height: 1.2em; margin: 0 0 0.8em 0; }
h6 { font-size: 80%; line-height: 1.2em; margin: 0 0 0.8em 0; }

a { color: #00ccff; }

/*h1, h2, h3, h4, h5, h6 { text-align: center; }*/

ul { margin: 1.4em auto; }
li { list-style: none; margin: 0 0 1.5em 0; }

p { margin: 0 auto 1.0em; }

label { margin: 0 15px 0 5px; }

#header {
    height: 80px;
}

#man-kvinna {
    margin: 0 auto -404px;
    background: url(../images/man-kvinna.png) no-repeat;
    width: 880px; height: 404px;
}

#header-pre {
    margin: 0 auto 10px;
    background: url(../images/title-header-pre.png) no-repeat;
    width: 652px; height: 107px;
}

#header-post {
    display: none;
    margin: 0 auto 10px;
    background: url(../images/title-header-post_new_small.png) no-repeat;
    width: 556px; height: 51px;
}

#beta-splash {
    position: fixed;
    right: 0px;
    top: 0px;
    background: url(../images/beta-gray.png) no-repeat;
    width: 89px; height: 79px;
}

#ta-testet {
    margin: 10px auto 20px;
    background: url(../images/ta-testet.png) no-repeat;
    width: 164px; height: 39px;
    cursor: pointer;
}

#ta-testet.disabled {
    background: url(../images/ta-testet-disabled.png) no-repeat;
}

#starta-testet {
    margin: 30px auto 0;
    background: url(../images/starta-testet.png) no-repeat;
    width: 231px; height: 60px;
    cursor: pointer;
}

#logo-top {
    float: left;
    margin: 20px 0 0 20px;
    background: url(../images/logo_top-left.png) no-repeat;
    width: 61px; height: 62px;
}

#jamfor-med-andra {
    display: block;
    cursor: pointer;
    margin: 0;
    background: url(../images/jamfor-med-andra.png) no-repeat;
    width: 201px; height: 43px;
    cursor: pointer;
}

.close {
    display: block;
    float: right;
    margin: -30px -10px 0 0;
    width: 30px; height: 30px;
    background: url(../images/close.png) no-repeat;
    cursor: pointer;
}

.keyboard {
    margin: 0 auto;
    background: url(../images/keyboard.png) no-repeat;
    width: 280px; height: 114px;
}

.icon {
    padding-left: 20px;
    height: 16px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

.footer {
    font: 13px/1.3em "Arial", "sans-serif";
    border-top: 1px solid #888;
    padding: 10px 0;
    margin-top: 40px;
}

.footer a {
    text-decoration: none;
}

.footer span {
    display: inline-block;
    margin-left: 5px;
    margin-bottom: 2px;
    line-height: -10px;
}

.twitter-icon { background-image: url(../images/twitter.png); }
.facebook-icon { background-image: url(../images/facebook.png); }
.email-icon { background-image: url(../images/email.png); }

.om-testet {
    text-align: right;
}

#content {
    margin: 20px auto 0;
}

#step-info {
    display: none;
    position: relative;
    width: 100%; height: 100%;
    color: #000;
    z-index: 999;
}

#step-info .background {
    position: absolute;
    width: 100%; height: 100%;
    background: #000;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

#step-info .band {
    position: absolute;
    padding: 20px 0;
    top: 220px;
    width: 100%;
    background: #fff;
    text-align: center;
}

.band .step h2 {
    color: #666;
    margin: 0 0 0.4em 0;
}

.additional {
    font-weight: bold;
}

.additional p {
    margin-top: 0.5em;
}

#pre-game {
    display: block;
}

#information div, #form #user-data {
    margin: 30px;
}

.box {
    margin: 0 auto;
    background: #000 url(../images/box-bg.png) repeat-x;
    border: 2px solid #595959;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

.content-box {
    padding: 20px 0;
    margin-bottom: 20px;
}

#about-game {
    display: none;
}

#about-game .box {
    background-color: #fff;
    background-image: none;
    color: #000;
    padding-top: 20px;
/*    margin: 20px auto 0;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    z-index: 999;;*/
/*    width: 700px;*/
/*    padding: 10px 20px;*/
}

#game-box {
    display: none;
}

#game-box .box {
    height: 320px;
    margin-left: 10px;
}

#post-game {
    display: none;
}

#post-game table {
    margin-bottom: 10px;
}

.result-header {
    margin-top: 15px;
}

.table-time h5 {
    color: #ccc;
    margin: 0;
}

.table-time h3 {
    color: #fff;
}

.big-graph {
    height: 220px;
}

#detailed-results {
    display: none;
}

#detailed-results .box {
    margin-top: 20px;
    padding-top: 20px;
    color: #fff;
}

#detailed-results table th {
    color: #fff;
}

#detailed-results .table-time h3 {
    color: #fff;
}

#detailed-results h2 {
    color: #fff;
}

.demographic-results {
    font: 13px/1.2em "Arial", "sans-serif";
}

#general-results .male-graph, #detailed-results .my-result .male-graph {
    background: #0fd1ff;
    margin-right: 2px;
    width: 50px;
    height: 182px;
}

#general-results .female-graph, #detailed-results .my-result .female-graph {
    background: #ff2877;
    margin-left: 2px;
    width: 50px;
    height: 162px;
}

.demographic-results .male-graph {
    background: #0fd1ff;
    margin-right: 2px;
    width: 26px;
    height: 82px;
}

.demographic-results .female-graph {
    background: #ff2877;
    margin-left: 2px;
    width: 26px;
    height: 62px;
}


table {
    margin: 10px 0 10px 0;
    border-bottom: 2px solid #ccc;
}

td {
    vertical-align: bottom;
}

table#general-results th {
    text-align: left;
}

table.demographic-results {
    /*margin: 0 auto 20px;*/
}

.row-space {
    border-bottom: 20px solid transparent;
}

.table-time {
    padding: 0 10px 0px 10px;
}

.male-graph {
    background: #0fd1ff;
    margin-left: 3px;
    width: 32px;
    height: 120px;
}

.female-graph {
    background: #ff2877;
    margin-right: 3px;
    width: 32px;
    height: 100px;
}

.top, .bottom {
    text-transform: uppercase;
}

.left, .right {
    margin-top: 20px;
}

.left {
    margin-left: 30px;
}

.right {
    
}

.left h4, .right h4 {
    color: #999;
}

.left > * {
    text-align: left !important;
    margin: 0;
}

.right > * {
    text-align: right !important;
    margin: 0;
}

#word {
    margin: 70px 0 0 0;
    text-align: center;
}

#error {
    display: none;
    margin: 0 auto;
    background: url(../images/cross.png) no-repeat;
    width: 55px; height: 55px;
}