@charset "utf-8";
/* CSS Document */

html {
    height: 100%;
}

body {
    background: #000000;
    color: #FFFFFF;
    padding: 0;
    margin: 0;
    text-align: justify;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    height: 100%;
    -webkit-font-smoothing: antialiased;
}

.navigation {
    position: fixed;
    left: 0px;
    bottom: 50px;
    z-index: 9999;
}

.navigation ul {
    list-style: none;
}

.navigation li {
    text-align: left;
}

.navigation li a {
    font-family: 'Orbitron', sans-serif;
    font-size: 25px;
    line-height: 25px;
    color: #FFFFFF;
    text-decoration: none;
    transition: 0.5s ease;
    transition-property: letter-spacing;
}

.navigation li a:hover {
    color: #ff00ff;
    text-decoration: none;
    letter-spacing: 5px;
}

.navigation li a:active {
    color: #ff00ff;
    text-decoration: none;
}

#social {
    width: 100px;
    z-index: 9999;
}

#s4g {
    width: 100px;
    z-index: 9999;
}

.spacerpercent {
    height: 10%;
}

.spacer {
    height: 40px;
}

.wrapper {
    height: 100% !important;
    margin: 0 auto;
    overflow: auto;
    background-image: url("../img/backgroundtile_left.png"), url("../img/backgroundtile_right.png");
    background-position: top left, top right;
    background-repeat: no-repeat;
}

.main {
    width: 1000px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
}

a {
    text-decoration: none;
    color: #ff00ff;
}

h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5em;
}

h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    text-align: center;
}

.teamwrap h2 {
    margin: 0px;
}

#logo {
    z-index: 999;
}


.playbutton {
    margin-top: 10px;
    width: 200px;
    height: 50px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #FFFFFF;
    background: #ff00ff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ff00ff 0%, #8c008c 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff00ff), color-stop(100%,#8c008c)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ff00ff 0%,#8c008c 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ff00ff 0%,#8c008c 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ff00ff 0%,#8c008c 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ff00ff 0%,#8c008c 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff00ff', endColorstr='#8c008c',GradientType=0 ); /* IE6-9 */



}

.playbutton a {
    color: #FFFFFF;
    text-align: center;
    font-size: 35px;
    font-family:  'Orbitron', sans-serif;
    padding: 12px;
}


.playbutton:hover {
    background: #ff00ff; /* Old browsers */
    background: -moz-linear-gradient(top,  #8c008c 0%, #ff00ff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8c008c), color-stop(100%,#ff00ff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #8c008c 0%,#ff00ff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #8c008c 0%,#ff00ff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #8c008c 0%,#ff00ff 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #8c008c 0%,#ff00ff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c008c', endColorstr='#ff00ff',GradientType=0 ); /* IE6-9 */
}

.playbutton a:hover {
    text-shadow: 0px 0px 5px #ffffff;
}

.iframe {
    height: 420px;
    width: 420px;
    overflow: hidden;
    border: 0px;
    margin-top: 10px;
}

table.game {
    width: 100%;
}

table.game tr td {
    vertical-align: top;
    padding: 20px;
    width: 33%;
    text-align: center;
}

table.pot {
    width: 100%;
}

table.pot tr td {
    vertical-align: top;
    padding: 5px;
    width: 50%;
    text-align: center;
    border: 1px solid #FFFFFF;
}

.headline {
    font-family: 'Orbitron', sans-serif;
    font-size: 25px;
}

.discription {
    font-size: 12px;
}

.name {
    font-family: 'Orbitron', sans-serif;
    font-size: 17px;
}

.namesmall {
    font-size: 14px;
}

.teamwrap {
    float: left;
    width: 300px;
    padding-right: 10px;
    margin-bottom: 80px;
}

.teampic {
    float: left;
    padding-right: 10px;
    display: block;
    width: 130px;
    height: 130px;
}

.job {
    font-size: 13px;
}

.oddi {
    background: url(../img/bild_oddi.png) no-repeat top left;
}

.tabea {
    background: url(../img/bild_tabea.png) no-repeat top left;
}

.dave {
    background: url(../img/bild_dave.png) no-repeat top left;
}

.maik {
    background: url(../img/bild_maik.png) no-repeat top left;
}

.peter {
    background: url(../img/bild_peter.png) no-repeat top left;
}

.highlight {
    color: #ff00ff;
}

#s4gcontact {
    float: right;
    width: 180px;
}

/* Slideshow */

.teamwrap H2 {
    clear: both;
}

#gallery-container {
    width: 100%;
}

#gallery-container {
    clear: both;
}

#image-container, #description-container {
    width: 50%;
    float: left;
}

#description-container:after {
    clear: both;
}

#image-container .arrow {
    width: 5%;
}



#image-container #image-slider {
    width: 90%;
}

#image-container .arrow, #image-slider {
    float: left;
}

.clear {
    clear: both;
}

#image-big {
    width: 450px;
    height: 450px;
    margin-right: 30px;
}

.thumbnail-image:hover {
    cursor: pointer;
}

#description-container {
    position: relative;
    height: 450px;
}

#description-container .text {
    display: none;
    margin-bottom: 150px;
}

#description-container .text.active {
    display: block;
}

#slideshow {
    position: absolute;
    bottom: 0px;
    left: 0px;
}