/* Reset */
html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    background: black;
    max-height:960px;
    min-height:680px;
}
div, form, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6 {
    margin:0;
    padding:0;
}
a, a:link, a:visited, a:active {
    color:#333;
    color:#20558a;
    text-decoration:none;
}
a:hover {
    color:#333;
    color:#20558a;
    text-decoration:underline;
}
ul, li {
    list-style:none;
}
div.clear {clear:both;}
h1 {
    text-align:center;
    font-size:18px;
    margin: 0 0 8px 0;
}
h2 {
    text-align:center;
    font-size:14px;
    margin: 0 0 8px 0;
    color:white;
    position:relative;
}

/* Resolution-Specific Layout */
body {
    background:url(background1920.jpg) center center no-repeat #000;
    overflow:auto;
    font-family:Verdana;
    font-size:12px;
    position:relative;
}
.footer {
    text-align:center;
    background:url(footer.jpg) top center no-repeat #000;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:42px;
    margin:8px 0 0 0;
    z-index:100;
}
.footer .links {
    margin: 23px 0 0 0;
    color:white;
}
.footer .links a {
    color:white;
}
div.fbman {
    height: 30%;
    width:  100px;
    background:url(frontman.png) center center no-repeat transparent;
    left: 38%;
    position: absolute;
    bottom:0;
    z-index:0;
    min-height:180px;
    margin: 0px 0 0 -200px;
    z-index:1;
}

/* Header - 1920'er Version */
.header {
    background:url(hm.jpg) top center no-repeat transparent;
    position:absolute;
    height:84px;
    width:890px;
    left:50%;
    margin-left:-444px;
}
.header .lc {
    background:url(hl.png) top center no-repeat transparent;
    position:absolute;
    height:84px;
    width:46px;
    top:0;
    left:-46px;
}
.header .rc {
    background:url(hr.png) top center no-repeat transparent;
    position:absolute;
    height:84px;
    width:44px;
    top:0;
    right:-44px;
}
.header .bm {
    background:url(hb.png) top center no-repeat transparent;
    position:absolute;
    height:28px;
    width:980px;
    bottom:-28px;
    left:-46px;
}
.fbconnect {
    width:130px;
    height:22px;
    cursor:pointer;
    background:url(fbconnect.png) top center no-repeat transparent;
    position:absolute;
    top:92px;
    right:0;
}
.staticlogin {
    height:60px;
    margin:8px;
}
    .staticlogin .loginbox {
        position:relative;
        width:324px;
        float:left;
    }

/* featurebox */
div.featurebox {
    width:100%;
    height:72px;
    position:relative;
}
    div.featurebox .entry {
        position:absolute;
        top:0;
        width:100%;
    }
    div.featurebox .picture {
        width:80px;
        height:80px;
        position:absolute;
        top: 0px;
        left:20px;
    }
        div.featurebox .picture.ft1 {background: url(f_free.png) no-repeat center center transparent;}
        div.featurebox .picture.ft2 {background: url(f_races.png) no-repeat center center transparent;}
        div.featurebox .picture.ft3 {background: url(f_speed.png) no-repeat center center transparent;}
        div.featurebox .picture.ft4 {background: url(f_chat.png) no-repeat center center transparent;}
        div.featurebox .picture.ft5 {background: url(f_trade.png) no-repeat center center transparent;}
        div.featurebox .picture.ft6 {background: url(f_win.png) no-repeat center center transparent;}
        div.featurebox .picture.ft7 {background: url(f_diplo.png) no-repeat center center transparent;}
        div.featurebox .picture.ft8 {background: url(f_inst.png) no-repeat center center transparent;}
        
    div.featurebox .feature {
        position:absolute;
        top:0;
        left:104px;
    }
div.feature-slider {
    float:right;
    position:relative;
    z-index:100;
}
div.feature-slider .slider_l {
    background:url(slider.png) 0 0 no-repeat transparent;
    width: 10px;
    height:16px;
    float:left;
    position:relative;
}
div.feature-slider .slider_c {
    background:url(slider.png) -10px 0 no-repeat transparent;
    width: 20px;
    height:16px;
    float:left;
    position:relative;
}
div.feature-slider .slider_r{
    background:url(slider.png) -30px 0 no-repeat transparent;
    width: 10px;
    height:16px;
    float:left;
    position:relative;
}
div.feature-slider .slider_p{
    background:orange;
    width: 20px;
    height:16px;
    position:absolute;
    top:0;
    left:10px;
}



div.featurebox div#js_slider {
    left:0%;
    top:0;
    position:absolute;
    width:100%;
}
div.featurebox div#js_slider div.entry {
    width:100%;
    display:block;
    position:absolute;
    top: 0;
    left:0;
}
div.featurebox div#js_slider div.entry div.table {
    position:absolute;
    top:0;
    left:150px;
    right:0;
    bottom:0;
    font-size:0.7em;
}
div.featurebox div#js_slider div.entry div.table b {
    display:block;
}


/* Hintergrundbox */
.display {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    opacity:0.5;
    background:#112;
    position:absolute;
    top:   12px;
    left:  12px;
    right: 12px;
    bottom:12px;
    -moz-box-shadow:    0 0 10px #88c;
    -webkit-box-shadow: 0 0 10px #88c;
    box-shadow:         0 0 10px #88c;
}


div.wrapper {
    height: 440px;
    left: 50%;
    margin: -180px 0 0 -392px;
    position: absolute;
    top: 50%;
    width: 740px;
    overflow:hidden;
    font-size:12px;
}
div.navileft {
    position: absolute;
    top:  48px;
    left: 0;
}
div.naviright {
    position: absolute;
    top:  48px;
    right:0;
}
.fontgold {
    color:#cccb4c !important;
    text-shadow: 1px 1px 2px #000000, -0px 0px 2px #FFFFFF;
    font-weight:bold;
    font-size:14px;
    line-height:16px;
    margin: 0 8px;
}
.fontgold.active,
.fontgold:hover {
    color:#eeee80 !important;
    text-shadow: 0 0 8px #FFFFFF;
}
div.btn {
  background: url("loginbtn.png") no-repeat scroll -9px -8px transparent;
  border: medium none;
  border-radius: 18px 18px 18px 18px;
  box-shadow: 0 0 8px #8080ff;
  color: #EEEEEE;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  height: 40px;
  margin: 12px auto 8px;
  padding: 6px 0 0;
  text-align: center;
  text-shadow: 1px 1px 2px #000000, 0 0 2px #FFFFFF;
  width: 138px;
}
div.btn:hover {
  background: url("loginbtn.png") no-repeat scroll -158px -8px transparent;
    box-shadow: 0 0 12px #cfc;
    color: #FFFFFF;
}
div.fbbtn {
  background: url("loginbtn.png") no-repeat scroll -9px -70px transparent;
  border: medium none;
  border-radius: 18px 18px 18px 18px;
  box-shadow: 0 0 8px #8080ff;
  color: #EEEEEE;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  height: 40px;
  margin: 12px auto 8px;
  padding: 6px 0 0;
  text-align: center;
  text-shadow: 1px 1px 2px #000000, 0 0 2px #FFFFFF;
  width: 138px;
}
div.fbbtn:hover {
  background: url("loginbtn.png") no-repeat scroll -158px -70px transparent;
    box-shadow: 0 0 12px #ccf;
    color: #FFFFFF;
}
.cnt_wrapper {
    padding:24px;
    position:relative;
    color:white;
}
#cnt_home {
    width:100%;
    height:100%;
    position:absolute;
    top: 68px;
    left:-100%;
    -webkit-transition:all 0.4s ease-in-out;
    -moz-transition:all 0.4s ease-in-out;
    -o-transition:all 0.4s ease-in-out;
    transition:all 0.4s ease-in-out;
}
#cnt_home.active {
    left:0;
}
#cnt_screenshots {
    position:absolute;
    top:-100%;
    left:0;
    right:0;
    -webkit-transition:all 0.4s ease-in-out;
    -moz-transition:all 0.4s ease-in-out;
    -o-transition:all 0.4s ease-in-out;
    transition:all 0.4s ease-in-out;
    margin-top:68px;
}
#cnt_screenshots.active {
    top:0;
}
#cnt_screenshots ul {
    list-style:none;
    margin:0;
    padding:0;
}
#cnt_screenshots ul li {
    list-style:none;
    margin:1%;
    padding:0;
    width:23%;
    height:100px;
    float:left;
    position:relative;
    -webkit-transform:scale(1, 1);
    -moz-transform:scale(1, 1);
    -o-transform:scale(1, 1);
    transform:scale(1, 1);
    cursor:pointer;
}
#cnt_screenshots ul li:hover {
    -webkit-transform:scale(1.1, 1.1);
    -moz-transform:scale(1.1, 1.1);
    -o-transform:scale(1.1, 1.1);
    transform:scale(1.1, 1.1);
}
#cnt_screenshots ul li div.screenshot {
    width:100%;
    height:100%;
}
div.screenshot.s1 {background: url(screens/overview_s.jpg) no-repeat center center black;}
div.screenshot.s2 {background: url(screens/undocked_s.jpg) no-repeat center center black;}
div.screenshot.s3 {background: url(screens/trading_s.jpg) no-repeat center center black;}
div.screenshot.s4 {background: url(screens/statistics_s.jpg) no-repeat center center black;}
div.screenshot.s5 {background: url(screens/command_s.jpg) no-repeat center center black;}
div.screenshot.s6 {background: url(screens/buildings_s.jpg) no-repeat center center black;}
div.screenshot.s7 {background: url(screens/alliance_s.jpg) no-repeat center center black;}
div.screenshot.s8 {background: url(screens/system_s.jpg) no-repeat center center black;}

#cnt_features,
#cnt_impressum,
#cnt_agb,
#cnt_privacy,
#cnt_register,
#cnt_newpass {
    width:100%;
    height:100%;
    position:absolute;
    top: 68px;
    left:100%;
    -webkit-transition:all 0.4s ease-in-out;
    -moz-transition:all 0.4s ease-in-out;
    -o-transition:all 0.4s ease-in-out;
    transition:all 0.4s ease-in-out;
}
#cnt_features.active,
#cnt_impressum.active,
#cnt_agb.active,
#cnt_privacy.active,
#cnt_register.active,
#cnt_newpass.active {
    left:0;
}
#cnt_home div.bottom {
    position:absolute;
    bottom:-100%;
    left: 0;
    right:0;
    -webkit-transition:all 0.4s ease-in-out;
    -moz-transition:all 0.4s ease-in-out;
    -o-transition:all 0.4s ease-in-out;
    transition:all 0.4s ease-in-out;
    xheight:250px;
}
#cnt_home.active div.bottom {
    bottom:64px;
}
dl {
    position:relative;
    height:24px;
    line-height:22px;
    margin: 8px 0;
}
dt {
    width:200px;
    float:left;
    font-weight:bold;
    font-size:14px;
}
dd {
    position:absolute;
    top:0;
    left:200px;
    right:0;
    height:24px;
}
.input {
    width:90%;
    height:20px;
    background:#242;
    color:white;
    border: none;
    -moz-border-radius:     6px;
    -webkit-border-radius:  6px;
    border-radius:          6px;
    -moz-box-shadow:    2px 2px 3px #000 inset;
    -webkit-box-shadow: 2px 2px 3px #000 inset;
    box-shadow:         2px 2px 3px #000 inset;
    opacity:0.8;
    padding: 0 4px;
}
input.transparent {
    border: none;
    background:transparent;
    height:24px;
    color:white;
    font-weight:bold;
    font-size:16px;
    width:100%;
    padding:0 8px;
}
span.legend {
    position:absolute;
    font-size:12px;
    color:#88d;
    text-shadow: 1px 1px 1px #000000, -0px 0px 1px #FFFFFF;
    top:-20px;
    left:0;
}
a.forgotpw {
    position:absolute;
    font-size:12px;
    color:#88d;
    text-shadow: 1px 1px 1px #000000, -0px 0px 1px #FFFFFF;
    top:46px;
    right:94px;
}
label.oldlogin {
    position:absolute;
    font-size:12px;
    color:#88d;
    text-shadow: 1px 1px 1px #000000, -0px 0px 1px #FFFFFF;
    top:40px;
    left:12px;
}

div.feedback-error {
    border:1px solid #913d3d;
    padding:8px 16px;
    font-size:1.5em;
    font-weight:bold;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align:center;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#50111d', endColorstr='#d43b5a');
    background: -webkit-gradient(linear, left top, left bottom, from(#50111d), to(#d43b5a));
    background: -moz-linear-gradient(top,  #50111d,  #d43b5a);
    color:white;
}
div.feedback-ok {
    border:1px solid #913d3d;
    padding:8px 16px;
    font-size:1.5em;
    font-weight:bold;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align:center;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1150111d', endColorstr='#3bd45a');
    background: -webkit-gradient(linear, left top, left bottom, from(#11501d), to(#3bd45a));
    background: -moz-linear-gradient(top,  #11501d,  #3bd45a);
    color:white;
}
div.feedback-mobileinfo {
    font-size:40pt;
    font-weight:bold;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    text-align:center;
    color:black;
    z-index:200;

background: rgb(252,234,187); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZWFiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZjY2Q0ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2Y4YjUwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYmRmOTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,234,187,1)), color-stop(50%,rgba(252,205,77,1)), color-stop(51%,rgba(248,181,0,1)), color-stop(100%,rgba(251,223,147,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-8 */

}
div.featurelist ul li {
    background:url(/spsk/fb/checkmark.png) 0 0 no-repeat transparent;
    padding:0 0 8px 48px;
    height:40px;
}
div.featurelist ul li h2 {
    font-size:1.2em;
    font-weight:bold;
    margin:4px 0 0;
    text-align:left;
}
div.featurelist ul li span {
    font-size:0.8em;
    font-weight:normal;
}
div.language-chooser {
    position: absolute;
    top:    24px;
    right:  0;
}
.featurelist {
    position:relative;
    overflow:auto;
}
/* Arrow left/right */
a#arr_left, a#race_left {
    width:34px;height:34px;
    position:absolute;
    top:14px;left:-30px;
    background:url(../but/planet-arrow.gif) 0 -34px  no-repeat transparent;
    display:block;
    cursor:pointer;
}
a#arr_left:hover, a#race_left:hover {background-position: -36px -34px;}
a#arr_right, a#race_right {
    width:34px;height:34px;
    position:absolute;
    top:14px;left:236px;
    background:url(../but/planet-arrow.gif) 0 0  no-repeat transparent;
    display:block;
    cursor:pointer;
}
a#arr_right:hover, a#race_right:hover {background-position: -36px 0;}
a#race_left {position:absolute;left:0px;  top:30px;}
a#race_right{position:absolute;left:112px;top:30px;}
/*  Aliens */
div.aliens {
    background:url(../aliens.jpg) 0 0 no-repeat black;
    width:78px;
    height:100px;
}
div.alien0 {
    background-position: -154px 0;
}
div.alien1 {
    background-position: -78px 0;
}
div.alien2 {
    background-position: -308px 0;
}
div.alien3 {
    background-position: 0 0;
}
div.alien4 {
    background-position: -230px 0;
}
div.alien5 {
    background-position: -384px 0;
}
div.alienchooser {
    width:144px;
    height:124px;
    overflow:hidden;
    position:relative;
    margin:8px;
    float:left;
}
div.alienchooser #js_alien_slider {
    left:0%;
    top:0;
    position:absolute;
    width:100%;
}
div.alienchooser #js_alien_slider div.entry {
    width:100%;
    display:block;
    position:absolute;
    top:20px;
    left:0;
}
div.alienchooser #js_alien_slider div.entry div.aliens {
    margin:0 32px;
}
div.alienchooser #js_alien_slider div.table {
    position:absolute;
    top:0;
    left:150px;
    right:0;
    bottom:0;
    font-size:0.7em;
}
div.alienchooser #js_alien_slider div.table b {
    display:block;
}
div.dedicated {
    font-size:0.8em;
    font-weight:bold;
    position:absolute;top:-16px;left:32px;
}
div.alienname {
    font-size:14px;
    font-weight:bold;
    position:absolute;top:-20px;width:150px;text-align:center;
}
#regform {
    position:absolute;
    top:0;
    left:164px;
    right:0;
}
#js_loginwrapper {
    height:300px;
}
#newpassform {
    position:absolute;
    top:0;
    left:0;
    right:0;
}
#js_newpasswrapper {
    height:162px;
}

.c_dark-bg {
    position:fixed;
    top:0;
    right:0;
    border:0;
    left:0;
    width:100%;
    height:100%;
    background:#333;
    opacity:0.7;
    z-index:2000000;
}
.c_overlay {
    padding:20px;
    position:fixed;
    background:url('../../img/overlay-box-bg.png') repeat-x bottom #fff;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
    
    -moz-box-shadow:0 0 80px #000;
    -webkit-box-shadow:0 0 80px #000;
    -o-box-shadow:0 0 80px #000;
    box-shadow:0 0 80px #000;
    z-index:9000001;
    font-size:12px;
    border:5px solid #ccc;
    border:5px solid rgba(204,204,204,0.6);
}

/*
**  CSS für Mobile Version
*/
body.mobile {background:url(/static/smart/img/mobileback.jpg) no-repeat bottom center;text-align:center;}
/*Logo*/
body.mobile .logo {
    margin:2pt auto 8pt;
}
body.mobile .content {
    -moz-border-radius: 15px;
    -webkit-border-radius:  15px;
    border-radius:      15px;
    -moz-box-shadow:    1px 1px 4px #000;
    -webkit-box-shadow: 1px 1px 4px #000;
    box-shadow:     1px 1px 4px #000;
    padding: 8px;
    width:80%;
    background:#fff;
    background:rgba(150, 200, 255, 0.4);
    margin:0 auto 50pt;
    position:relative;

}
body.mobile .alien {
    background:url(/static/smart/img/helpalien.png) no-repeat top center;
    position:absolute;
    top:50pt;
    left:-36px;width:70px;height:100px;
    -webkit-transform:scale(2);
    -moz-transform:scale(2);
    -o-transform:scale(2);
    transform:scale(2);
}
/* Login */
body.mobile .login {
    margin:8pt 16pt 48pt;
}
body.mobile .login .inputbox {position:relative;margin:8pt 0;}
body.mobile .login .inputbox input, .login .inputbox select {
    font-size:36pt;width:100%;margin:30pt 0 0;
    -moz-border-radius: 15px;
    -webkit-border-radius:  15px;
    border-radius:      15px;
    -moz-box-shadow:    1px 1px 4px #000 inset;
    -webkit-box-shadow: 1px 1px 4px #000 inset;
    box-shadow:     1px 1px 4px #000 inset;
    background:rgba(0,0,0,0.5);
    color:white;
    padding:4px;
    border-width:4px;
}
body.mobile .login .inputbox span  {position:absolute;top:0;left:0;font-size:24pt;font-weight:bold;color:white;}
/* Button */
body.mobile input.btn {
    background: #60c020;
    border: medium none;
    border-radius: 10pt;
    box-shadow: 0 0 8pt #000;
    color: #eee;
    cursor: pointer;
    font-size: 50pt;
    font-weight: bold;
    margin: 20pt auto 8pt;
    padding: 10pt 30pt;
    text-align: center;
    width: 80%;
    text-shadow: 1pt 1pt 2pt #000000, -0pt 0pt 2pt #FFFFFF;
    line-height:38pt;
}
body.mobile input.btn:hover {
    background-position:center bottom;
    box-shadow: 0 0 12pt #000;
    color: #FFFFFF;
}

@media all and (orientation:landscape) {
    body.mobile .logo {
        -webkit-transform:scale(0.8);
        -moz-transform:scale(0.8);
        -o-transform:scale(0.8);
        transform:scale(0.8);
    }
    body.mobile .content {
        width:60%;
    }
}