/* 
    Created on : 06.12.2013, 15:42:36
    Author     : florianer
*/

body {
    background-image:url(img/layout/background_pattern.png);
    background-size: 100%;
    background-repeat:repeat;
    font-size: 14px;
    font-family: Metamorphous, serif;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

:focus {
    outline: none;
}

::-moz-focus-inner {
    border: 0;
}

input:not([type='submit']):focus {
    background-color: #EADDC0 !important;
}

ol, ul {
    list-style: none outside none;
}

input.styledInputText {
    background-color: #fcefd5;
    border: solid 1px #9a8f78;
    box-shadow: 0px 0px 0px 3px rgba(221, 199, 157, .40);
    padding: 5px;
    border-radius: 5px;
    margin: 3px 13px 3px;
    display: block;
}

a,
a:visited {
    color: #d25f20;
    text-decoration: none;
}

a:hover,
a:active,
a:focus {
    text-decoration: underline;
}

#layer_content input.styledInputText {
    width: 311px;
}

#messageBoxes {
    top: 68px;
    position: absolute;
    left: 50%
}

#loginBox input.styledInputButton {
    width: 218px;
    height: 47px;
    background: url("img/layout/button_login.png");
    margin-left: 10px;
    margin-right: 10px;
}

#loginBox input.styledInputButton:hover, #loginBox input.styledInputButton:focus {
    width: 218px;
    height: 47px;
    margin-left: 10px;
    margin-right: 10px;
}

#loginBox input.styledInputButton:active {
    background: url("img/layout/button_login_active.png");
    padding: 16px 0 10px;
    text-decoration: none;
}

.styledInputButton {
    background: url("img/layout/sprite.png") no-repeat -1773px -600px;
    text-shadow: 1px 1px 1px #202020;
    color: #f4e6cb;
    height: 21px;
    padding: 13px 0;
    border: none;
    display: block;
    text-align: center;
    margin: 10px 20px;
}

.styledInputButton:before {
    background: url("img/layout/sprite.png") no-repeat 0px -600px;
    height: 47px;
    width: 10px;
    content: "";
    display: block;
    float: left;
    margin: -13px 0 0 -10px;
}

.styledInputButton:after {
    background: url("img/layout/sprite.png") no-repeat -2550px -600px;
    height: 47px;
    width: 10px;
    content: "";
    display: block;
    float: right;
    margin: -13px -10px 0 0;
}

.styledInputButton:hover,
.styledInputButton:focus {
    color: #f8f4eb;
    text-shadow: 0px 0px 3px #e4d1ad;
    cursor: pointer;
    text-decoration: none;
}

.styledInputButton:active {
    background-position: -1773px -653px;
    padding: 16px 0 10px;
    text-decoration: none;
}

.styledInputButton:active:before {
    background-position: 0px -653px;
    margin: -16px 0 0 -10px;
}

.styledInputButton:active:after {
    background-position: -2550px -653px;
    margin: -16px -10px 0 0;
}

.disabled {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    cursor: default;
}

a.styledInputButton.disabled:hover,
a.styledInputButton.disabled:focus {
    text-shadow: 1px 1px 1px #202020;
    color: #f4e6cb;
    cursor: default;
}

a.styledInputButton.disabled:active {
    background-position: -1773px -600px;
    padding: 13px 0;
}

a.styledInputButton.disabled:active:before {
    background-position: 0px -600px;
    margin: -13px 0 0 -10px;
}

a.styledInputButton.disabled:active:after {
    background-position: -2550px -600px;
    margin: -13px -10px 0 0;
}

#header:before {
    background-image: url("img/layout/sprite.png");
    background-position: center 0;
    background-repeat: no-repeat;
    content: "";
    height: 50px;
    left: 0;
    position: absolute;
    right: 0;
    top: 25px;
    z-index: 1000;
}

#header:after {
    background-image: url("img/layout/sprite.png");
    background-position: center -100px;
    background-repeat: no-repeat;
    bottom: -28px;
    content: "";
    height: 50px;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 1000;
}

body.desktop #header {
    background-image: url("img/layout/header_desktop.jpg");
    background-position: center 57px;
}

#header {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 1920px auto;
    padding: 0;
    height: 800px;
}

#loginButton {
    background-image: url("img/layout/ButtonLogin.png");
    background-repeat: no-repeat;
    color: #2B2423;
    font-size: 18px;
    height: 39px;
    line-height: 39px;
    position: absolute;
    right: 120px;
    text-align: center;
    top: 38px;
    width: 219px;
    z-index: 1000;
    cursor: pointer;
}

#loginButton:hover,
#loginButton:active {
    color: #d25f20;
}

#loginBox .container{
    width: auto;
}

#loginBox ul.element {
    top: 77px;
    margin: 0;
    padding: 30px 20px 20px;
    position: absolute;
    right: 88px;
    z-index: 1200;
    width: auto;
}

#loginBox input{
    width: 200px;
}

#layer_content ul#screenshots {
    right: 36px;
    z-index: 0;
    bottom: -10px;
}

#layer_content ul#screenshots a img {
    margin-right: 10px; 
}

#layer_content ul#screenshots a img:hover {
    width: 110px;
    height: 75px;
    margin-right: 0; 
    margin-bottom: 5px; 
}

.indented{
    margin-left: 10px;
}

#layer_content input[type=checkbox]{
    margin-right: 5px;
}

#layer_content ul#screenshots img {
    border-radius: 7px;
    margin: 10px 0;
    border: 2px solid #e4d1ad;
}

.column {
    position: relative;
}

#layer_copyright {
    text-align: center;
    color: white;
    margin-top: 20px; 
}

#layer_copyright a:link, #layer_copyright a:visited, #layer_copyright a:hover, #layer_copyright a:active { 
    color: white;
}

#layer_safe_play {
/*    bottom: 0;
    margin: 30px;
    position: fixed;
    z-index: 2;*/
    float: left;
    margin: 10px -60px 0 0;
}

#footer {
    z-index: 2000;
}

#footer .container {
  width: 1000px;
}

#layer_placeholder {
    height: 730px;
}

#layer_content {
    height: 1px;
    padding: 0;
}

.container:before, .container:after {
    content: "";
    display: table;
    line-height: 0;
}

.container:after {
    clear: both;
}

.container:before, .container:after {
    content: "";
    display: table;
    line-height: 0;
}

#layer_content .container {
    height: 1px;
    position: relative;
}

.container {
/*    background-color: #F5F5DC;
    background-image:url(img/layout/background_element.jpg);
    border-radius: 10px;
    -moz-box-shadow: 0 0 30px 1px #808080 inset;
    -webkit-box-shadow: 0 0 30px 1px #808080 inset;
    box-shadow: 0 0 30px 1px #808080 inset;
    height: 380px;
    left: 890px;
    position: absolute;
    top: 370px;
    width: 660px;
    z-index: 1;*/
    margin-left: auto;
    margin-right: auto;
}

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
    width: 1170px;
}

.layer_content_logo {
/*    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;*/
}

.layer_content_logo:before {
    background-image: url("img/logo.png");
    background-size: 250px 170px;
    content: "";
    display: table;
    height: 170px;
    line-height: 0;
    margin-bottom: -145px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: -145px;
    width: 250px;
}

.element {
    background-image: url("img/layout/background_element.jpg");
    background-position: center top;
    border-radius: 8px;
    box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.3) inset;
    border: 6px solid rgb(32, 32, 32);
    border: 6px solid rgba(0, 0, 0, 0.35);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

.span6 {
/*    width: 570px;
    width: 300px;*/
    width: 350px;
}

#layer_content ul.element,
#layer_content #screenshots,
#layer_interferer ul.element {
    bottom: 50px;
    min-height: 440px;
    margin: 0;
    padding: 20px 20px 30px;
    position: absolute;
    right: 150px;
    z-index: 2;
}

#layer_content ul.menu {
    bottom: 345px;
    height: 120px;
    margin: 0;
    min-height: 0;
    padding: 5px 5px 5px 15px;
    position: absolute;
    right: 92px;
    z-index: 1;
}

#serverlist{
    width: 313px;
    margin: 10px 0 30px 10px;
}

#layer_content ul.menu li{
}

.slider_inactive:before {
    background-image: url("img/layout/slider_inactive.png");
    background-size: 10px 10px;
    content: "";
    display: inline-block;
    height: 10px;
    margin: 0 3px 0 10px;
    width: 10px;
}

.slider_active:before {
    background-image: url("img/layout/slider_active.png");
    background-size: 10px 10px;
    content: "";
    display: inline-block;
    height: 10px;
    margin: 0 3px 0 10px;
    width: 10px;
}

#layer_content .slider_active,
#layer_content .slider_inactive{
  margin: 15px 0 0;
}

.content_header {
    background-image: url("img/layout/sprite.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 25px;
    font-size: large;
}

div.container input {
    margin-bottom: 20px;
}

.menuButton{
    background-position: left center;
    background-repeat: no-repeat;
    height: 55px;
    margin: 1px 1px 10px 1px;
    padding-bottom: 0;
    text-align: center;
    width: 68px;
}

.menuHome {
    background-image: url("img/layout/button_home_sprite.png");
}

.menuAccountManagement {
    background-image: url("img/layout/button_einstellungen_sprite.png");
}

.menuButton:hover {
    background-position: right center;
}

.menuButton.active {
    background-position: right center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    margin: 0 0 10px 0;
}

.menuButton.disabled:hover {
    background-position: left center;
}

.menuButton.active.disabled:hover {
    background-position: right center;
}

.menuBack {
    background: url("img/layout/back_button.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    bottom: 20px;
    padding: 0 0 0 28px;
    position: inherit;
    display: block;
    cursor: pointer;
}

.menuBack.disabled {
    cursor: default;
}

.menuButton {
    cursor: pointer;
}

.menuButton.disabled {
    cursor: default;
}

.messageBoxes.error {
    background: rgba(32, 0, 0, 0.6);
    border: 1px solid rgba(128, 0, 0, 0.8);
}
.messageBoxes.warning {
    background: rgba(32, 32, 0, 0.6);
    border: 1px solid rgba(128, 128, 0, 0.8);
}
.messageBoxes.info {
    background: rgba(0, 0, 32, 0.6);
    border: 1px solid rgba(0, 0, 128, 0.8);
}
.messageBoxes.success {
    background: rgba(0, 32, 0, 0.6);
    border: 1px solid rgba(0, 128, 0, 0.8);
}

.messageBoxes.error .ui-dialog-content,
.messageBoxes.warning .ui-dialog-content,
.messageBoxes.info .ui-dialog-content,
.messageBoxes.success .ui-dialog-content{
    color: #fcefd5;
}

.messageBoxes .ui-dialog-content a {
    color: #d25f20;
}

.messageBoxes .ui-dialog-titlebar {
    display: none;
}

.sansSerifFont{
    font-family: sans-serif;
}

/*#tooltip {
    position: relative;
    min-height: 200px;
    width: 300px;
    
}*/

#layer_content ul.tooltip {
  bottom: 345px;
  min-height: 200px;
  margin: 0;
  padding: 5px 15px 5px 15px;
  position: absolute;
  right: 600px;
  z-index: 1;
  width: 360px;
}

ul.tooltip li {
  min-height: 14px;
}

#layer_interferer {
    height: 1px;
    left: -240px;
    padding: 0;
    top: -50px;
    z-index: 10;
}

#layer_interferer .container {
    height: 1px;
    position: relative;
}

#layer_interferer span {
    background-image: url("img/interferer.png");
    background-size: 170px 170px;
    bottom: 100px;
    color: wheat;
    display: inline-block;
    font-weight: bolder;
    height: 90px;
    left: 170px;
    margin: 0;
    padding: 50px 30px 30px;
    position: absolute;
    width: 111px;
    z-index: 10;
    text-align: center;
}

#layer_interferer ul {
    bottom: 345px;
    height: 120px;
    margin: 0;
    min-height: 0;
    padding: 5px 5px 5px 15px;
    position: absolute;
    right: 92px;
    z-index: 1;
}

#googleRecaptcha {
    margin-left: 20px;
}