html, body
{
    height: 100%;
    width:100%;
}

body
{
    margin: 0px;
    padding: 0px;
    /*background-color:#07172c; */
	background-color:#274156;
    color:#fff;
    text-align:left;
    width:100%;
	height:100%;
    /* font-family: 'Source Sans Pro', sans-serif; */
	font-family: Arial;
    font-size: 11pt;
    font-weight: 300;
}

h1, h2, h3
{
    margin: 0;
    padding: 0;
    font-weight: 600;
/*    color: #454445; */
}

p, ol, ul
{
    margin-top: 0;
}

ol, ul
{
    padding: 0;
    list-style: none;
}

p
{
    line-height: 180%;
}

strong
{
}

a
{
    color: #fff;
}

a:hover
{
    text-decoration: none;
}

form {
	padding:0;
	margin:0;
}

.container-fluid {
	min-height:100%;
	padding-bottom:1em;
	/* background-image:URL('/images/bg_test.png'); */
}


/*
*
* Header [START]
*
*/

#videoHeaderDiv {
    position:absolute;
    height: 400px;
    overflow:hidden;
    object-fit: cover;
    z-index:-100;
}
#videoHeader {
    margin-top:-100px;
}

    
#header-wrapper
{
    background: #FFF;
    overflow:hidden;
}

#header
{
    position: relative;
    height: 400px;
	/* height:320px; */
    width:100%;
    padding:0px;
    margin:0;
   /*  background-image: url("/images/header.webp"); */
	/* background-image: URL('/images/header/header.php'); */
	/* background-image: URL('/images/header/header.php'); */
    background-position:left top;
    background-repeat:no-repeat;
    /* border-bottom:2px #07172c solid; */
	border-bottom:2px #32486e solid;
    /* font-family: 'Source Sans Pro', sans-serif; */
	font-family: Arial;
    text-align:left;
    webkit-transition:  background-image 1s linear;
    -moz-transition: background-image 1s linear;
    transition: background 1s linear;
}

#header .nameWrapper {
    display:inline-block;
	position:relative;
    margin-top:10px;
    margin-left:7em;
    z-index:1;
}

#header .name {
    display:block;
    font-size:5em;
	text-transform:uppercase;

    font-weight:bold;
    color: #07172c;

	text-shadow: 1px 0px 11px rgba(150, 150, 150, 1);
	
/*
text-shadow: 1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000,
    0px 1px 0 #000,
    0px -1px 0 #000,
    -1px 0px 0 #000,
    1px 0px 0 #000,
    2px 2px 0 #000,
    -2px 2px 0 #000,
    2px -2px 0 #000,
    -2px -2px 0 #000,
    0px 2px 0 #000,
    0px -2px 0 #000,
    -2px 0px 0 #000,
    2px 0px 0 #000,
    1px 2px 0 #000,
    -1px 2px 0 #000,
    1px -2px 0 #000,
    -1px -2px 0 #000,
    2px 1px 0 #000,
    -2px 1px 0 #000,
    2px -1px 0 #000,
    -2px -1px 0 #000;
*/
	/*
    text-shadow: 0px 0px 0 rgb(19,131,148),
                 1px 0px 0 rgb(-1,111,128),
                 2px 0px 0 rgb(-21,91,108),
                 3px 0px  0 rgb(-41,71,88),
                 4px 0px 3px rgba(20,67,74,1),
                 4px 0px 1px rgba(20,67,74,0.5),
                 0px 0px 3px rgba(20,67,74,.2);
	*/

}

#header .name a:link,
#header .name a:visited,
#header .name a:active,
#header .name a:hover {
    color:#F5F5F5;
    text-decoration:none;
}

#header .slogan {
    display:block;
    font-size:1.5em;
    font-weight:bold;
    text-shadow: 0 0 20px #000;
    /* margin-top:-23px; */
	margin-top:-15px;
    margin-left:6px;

	text-shadow: 1px 0px 11px rgba(150, 150, 150, 1);
/*
text-shadow: 1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000,
    0px 1px 0 #000,
    0px -1px 0 #000,
    -1px 0px 0 #000,
    1px 0px 0 #000,
    2px 2px 0 #000,
    -2px 2px 0 #000,
    2px -2px 0 #000,
    -2px -2px 0 #000,
    0px 2px 0 #000,
    0px -2px 0 #000,
    -2px 0px 0 #000,
    2px 0px 0 #000,
    1px 2px 0 #000,
    -1px 2px 0 #000,
    1px -2px 0 #000,
    -1px -2px 0 #000,
    2px 1px 0 #000,
    -2px 1px 0 #000,
    2px -1px 0 #000,
    -2px -1px 0 #000;
	*/
	/*
    text-shadow: 0px 0px 0 rgb(19,131,148),
                 1px 0px 0 rgb(-1,111,128),
                 2px 0px 0 rgb(-21,91,108),
                 3px 0px  0 rgb(-41,71,88),
                 4px 0px 3px rgba(20,67,74,1),
                 4px 0px 1px rgba(20,67,74,0.5),
                 0px 0px 3px rgba(20,67,74,.2);
	*/

}


.headerMask {
	-webkit-mask-image: url('/images/alpha3.png');
    mask-image: url('/images/alpha3.png');
    mask-repeat:no-repeat;
    -webkit-mask-repeat:no-repeat;
}

.videoHeader_racing {
	position:absolute;
    top:0px;
    left:199px;
	z-index:0;
}

.videoHeader_survival {
    position:absolute;
    top:0px;
    left:909px;
    z-index:0;
}

#placeholderHeaderLeft {
	position:absolute;
	left:0;
	bottom:0;
	margin-bottom:-0.8em;

    display:block;
}

#headerUsername {
    font-size:5em;
    font-weight:bold;
    color: #fff;
    text-shadow: 0px 0px 0 rgb(19,131,148),
                 1px 0px 0 rgb(-1,111,128),
                 2px 0px 0 rgb(-21,91,108),
                 3px 0px  0 rgb(-41,71,88),
                 4px 0px 3px rgba(20,67,74,1),
                 4px 0px 1px rgba(20,67,74,0.5),
                 0px 0px 3px rgba(20,67,74,.2);


}

#headerUserEdit {
	font-size:0.5em;
	margin-top:-5em;
	vertical-align:top;
	opacity:0;
}

#headerUsername:hover > span {
	opacity:1;
}
/*
*
* Header [END]
*
*/

/*
*
* Navi Top [START]
*
*/
#navigationTop {
	display:none;
    position:absolute;
    right:0.5em;
    bottom:0;
    color:#fff;
}

#navigationTop a {
    display:inline-block;
    width:1.2em;
    height:1.2em;
	font-size:3.5em;
    border:2px #fff solid;
    border-bottom:0px;
    text-align:center;
    border-radius: 15px 15px 0 0;
    background-color:#232323;
}

#navigationTop a:link,
#navigationTop a:active,
#navigationTop a:visited {
    color:#fff;
    opacity:1;
    text-decoration:none;
}

#navigationTop a:hover {
    opacity:1;
	border-color:#ff0000;
}

.userCount {
    height:1.1em;
    width:1.1em;
    border:2px #000 solid;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: radial-gradient(#fcfcfc, #999);
    cursor:pointer;
    display:flex;
    position:absolute;
    color:#ff0000;
    font-size:0.4em;
    font-weight:bold;
    line-height:20px;
    margin-left:1.8em;
    margin-top:-0.5em;
}

/*
*
* Navi Top [END]
*
*/

/*
*
* Navi Left [START]
*
*/
#navigationLine {
	position:absolute;
	bottom:0em;
	left:calc(50% - 600px);
	width:1200px;
	height:2em;
	text-align:center;
}

#navigationLine li {
	display:inline;
	list-style-type: none;
	padding-right:0px;
}

#navigationLine li:first-child a {
	/* border-top-left-radius:1em; */
}

#navigationLine li:last-child a {
    /* border-top-right-radius:1em; */
}

#navigationLine a {
    display:inline-block;
    width:160px;
	border:1px #000 solid;
	border-bottom:0px;
    padding:0.4em;
    margin-bottom:0.3em;
    background-color:#2a3c5c;
    background: linear-gradient(to bottom, #2a3c5c, #0C121B );
    font-weight:700;
	font-size:1em;
}

#navigationLine a:link,
#navigationLine a:active,
#navigationLine a:visited {
    text-decoration:none;
}

#navigationLine a:hover {
	background-color:#3F4F6C;
	background: linear-gradient(to bottom, #0C121B, #2a3c5c );
}


#navigationLeft {
	display:inline-block;
/*
	left:0;
	top: 420px;
*/
	margin-top:1em;
	margin-left:0;
	margin-right:3em;
	width:160px;
	border:0px #000 solid;
	text-align:left;
	vertical-align:top;
}

#navigationLeft a {
	display:inline-block;
	width:160px;
	border:1px #000 solid;
	border-left:0px;
	padding:0.4em;
	margin-bottom:0.3em;
	background-color:#2a3c5c;
	font-weight:700;
}

#navigationLeft a:link,
#navigationLeft a:active,
#navigationLeft a:visited {
	text-decoration:none;
}

#navigationLeft a:hover {
	padding-left:0.6em;
}

#steamLogin {
	margin-left:0;
	padding-left:0em;
}

#steamLogin img {
	width:100%;
}

#steamLogin a {
	display:inline;
	width:auto;
	background:none;
	border:0;
}

#steamLogin a:hover {
	padding-left:0.5em;
}

/*
*
* Navi Left [END]
*
*/

/*
*
* Content [STARt]
*
*/
#contentSection {
	display:flex;
	min-height:calc(100% - 400px);
}

#contentSection div{
	flex-grow:1;
}

#content {
	width:100vw;
	padding-top:1em;
	font-size:1.2em;
	font-weight: 500;
	text-align:left;
	margin-top:1em;
	/* overflow-x:hidden; */
}

/*
*
* Content [END]
*
*/

/*
*
* tabs [START]
*
*/
.tabbed figure { 
   display: block; 
   margin-left: 0; 
   border-bottom: 1px solid silver;
   clear: both;
}

.tabbed > input,
.tabbed figure > div { display: none; }

.tabbed figure>div {
  padding: 20px;
  width: 100%;
  border: 1px solid silver;
  background: #fff;
  line-height: 1.5em;
  letter-spacing: 0.3px;
  color: #444;
}

#tab1:checked ~ figure .tab1,
#tab2:checked ~ figure .tab2,
#tab3:checked ~ figure .tab3 { display: block; }

nav label {
   float: left;
   padding: 15px 15px;
   border-top: 1px solid silver;
   border-right: 1px solid silver;
   /* background: hsl(210,50%,50%); */
	background-color:#32486e;
   color: #eee;
}

nav label:nth-child(1) { border-left: 1px solid silver; }
nav label:hover { background: hsl(210,50%,40%); }
nav label:active { background: #ffffff; }

#tab1:checked ~ nav label[for="tab1"],
#tab2:checked ~ nav label[for="tab2"],
#tab3:checked ~ nav label[for="tab3"] {
  background: white;
  color: #111;
  position: relative;
  border-bottom: none;
}

#tab1:checked ~ nav label[for="tab1"]:after,
#tab2:checked ~ nav label[for="tab2"]:after,
#tab3:checked ~ nav label[for="tab3"]:after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: white;
  left: 0;
  bottom: -1px;
}
/*
*
* tabs [END]
*
*/

/*
*
* Container [START]
*
*/
.horizontal_container {
	text-align:left;
	width:90vw;
	margin-left:auto;
	margin-right:auto;
}

.horizontal_container a:link,
.horizontal_container a:active,
.horizontal_container a:visited {
    text-decoration:none;
}


.horizontal_row {
    display: block;
    border:2px #000 solid;
    border-radius:3px;
	width:60em;
    height:17em;
    margin-top:3em;
    margin-bottom:15px;
    margin-left:1em;
    margin-right:1em;
    vertical-align:bottom;
}

.horizontal_row:hover {
    box-shadow: 0px 0px 10px 3px white;

}

.horizontal_row .title {
    /* align-self:flex-end; */
    display:inline-block;
    height:1.2em;
    /* font-family: 'Source Sans Pro', sans-serif; */
	font-size:10em;
    font-family: Arial;
    font-weight:700;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    padding-top:3px;
    padding-bottom:3px;
	opacity:0.8;
}

.horizontal_container .streaming {
	display:inline-block;
	margin-left:10%;
	margin-right:1em;
	/* background-image:URL('/images/welcome/streaming.webp'); */
	background-image:URL('/images/welcome/streaming_3.jpg');
	background-position:center;
	/* background-size:1200px; */
	width:60em;
}

.horizontal_container .socialmedia {
	display:inline-block;
	margin:0;
	padding:0;
	vertical-align:top;
	margin-top:3em;
}

.horizontal_container .socialmedia span {

}

.horizontal_container .socialmedia .socialmedia_discord {
    display:block;
    width:240px;
    height:80px;
    background-image:URL('/images/welcome/discord.png');
    background-size:230px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color:#fff;
    border:1px #000 solid;
    border-radius:5px;
    margin-bottom:1.8em;
}

.horizontal_container .socialmedia .socialmedia_twitch {
    display:block;
    width:240px;
    height:80px;
    background-image:URL('/images/welcome/twitch.png');
    background-size:230px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color:#fff;
    border:1px #000 solid;
    border-radius:5px;
    margin-bottom:1.8em;
}

.horizontal_container .socialmedia .socialmedia_youtube {
    display:block;
    width:240px;
    height:80px;
    background-image:URL('/images/welcome/youtube.png');
    background-size:230px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color:#fff;
    border:1px #000 solid;
    border-radius:5px;

}

.horizontal_container .socialmedia a:hover {
    box-shadow: 0px 0px 10px 3px white;
}


.horizontal_container .community {
    background-image:URL('/images/welcome/community.jpg');
    background-position:bottom center;
    background-size:80em;
	margin-right:10%;
	margin-left:auto;
}

.currentPlaying .game {
    display:inline-block;
    position:relative;
    margin-left:1em;
    width:150px;
    height:70px;
    border:1px #000 solid;
}

.currentPlaying .game img {
    width:150px;
    padding:0;
}

.horizontal_container .events {
    background-image:URL('/images/welcome/events.jpg');
    background-position:bottom center;
    background-size:80em;
	margin-left:10%;
	margin-right:auto;
}


.vertical_container {
	
}

.vertical_container a:link,
.vertical_container a:active,
.vertical_container a:visited {
	text-decoration:none;
}

.vertical_row {
	/* display: inline-block; */
	display: inline-block;
	border:1px #000 solid;
	border-radius:3px;
	width:240px;
	height:480px;
	margin-top:15px;
	margin-bottom:15px;
	margin-left:1em;
	margin-right:1em;
	vertical-align:bottom;
}

.vertical_row .title {
	/* align-self:flex-end; */
	display:inline-block;
	height:1.2em;
	/* font-family: 'Source Sans Pro', sans-serif; */
	font-family: Arial;
	font-weight:700;
	margin-left:auto;
	margin-right:auto;
	border-bottom:1px #000 solid;
	width:100%;
	padding-top:3px;
	padding-bottom:3px;
	background-color:#32486e;
}

.vertical_row:hover {
    box-shadow: 0px 0px 10px 3px white;

}

.vertical_row .socialmedia {
}

.vertical_container .community {
	background-image:URL('/images/welcome/community.webp');
}

.vertical_container .events {
	background-image:URL('/images/welcome/events.webp');
}

.vertical_container .streaming {
    background-image:URL('/images/welcome/streaming.webp');
}

.vertical_container .socialmedia {
	border:0px;
}

.vertical_container .socialmedia  {
    display: inline-flex;
    border:0px #000 solid;
	width:240px;
	height:480px;
	margin-bottom:15px;
}

.vertical_container .socialmedia span {

}

.vertical_container .socialmedia .socialmedia_discord {
	display:inline-block;
	width:240px;
	height:120px;
	background-image:URL('/images/welcome/discord.png');
	background-size:230px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color:#fff;
	border:1px #000 solid;
	border-radius:5px;
	margin-bottom:2em;
	margin-top:2em;
}

.vertical_container .socialmedia .socialmedia_twitch {
    display:inline-block;
    width:240px;
    height:120px;
    background-image:URL('/images/welcome/twitch.png');
    background-size:230px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color:#fff;
    border:1px #000 solid;
    border-radius:5px;
	margin-bottom:2em;
}

.vertical_container .socialmedia .socialmedia_youtube {
    display:inline-block;
    width:240px;
    height:120px;
    background-image:URL('/images/welcome/youtube.png');
    background-size:230px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color:#fff;
    border:1px #000 solid;
    border-radius:5px;

}

.vertical_container .socialmedia a:hover {
	box-shadow: 0px 0px 10px 3px white;
}


/*
*
* Container [END]
*
*/


/*
* 
* memberlist [START]
*
*/

.memberlist {
	display: flex;
	flex-wrap: wrap;
	/* width:400px; 
	margin-left:auto;
	margin-right:auto;
	*/
	margin-right:1em;
	margin-top:1em;
}

.memberlist .member {
    border:2px #32486e solid;
    /* width:400px; */
	width:400px;
    height:64px;
    margin-bottom:1em;
	margin-right:1em;
    padding:0px;
	text-align:left;
	font-size:1em;
}

.memberlist .avatar {
	height:64px;
    display:inline-block;
	/* border-right:1px #32486e solid; */
	margin-right:0px;
}

.memberlist .avatar img {
	max-height:64px;
}

.memberlist .username {
    display:inline-block;
	height:64px;
	vertical-align:top;
	font-size:2em;
	text-align:left;
	padding:0.3em;
	font-weight:500;
	margin-left:0.2em;
}

.memberlist .userstate {
    display:inline-block;
	width:0.2em;
	height:100%;
	background-color:#ff0000;
	padding:0px;
	margin:0;
}

.memberlist .userstate_online {
	background-color:darkgreen;
}

.memberlist .userstate_idle {
	background-color:#999900;
}

/* 
* 
* memberlist [END]
*
*/

#streaming_player {
	width:95%;
}


#copyright {
	width:100%;
	height:30px;
	text-align:center;
}


.welcome_message {
	display:block;
	text-align:center;
	font-size:2em;
	font-color:#fff;
}

@keyframes greendot-flash-ani {
    0% { box-shadow: 0px 0px 3px 1px #009500; }
    50% { box-shadow: 0px 0px 5px 4px #009500; }
    100% { box-shadow: 0px 0px 3px 1px #009500; }
}

.greendot-flash {
    position:absolute;
	right:0.2em;
	top:0.2em;
    width:0.5em;
    height:0.5em;
    background-color:#009500;
    border-radius:1em;
    animation-name: greendot-flash-ani;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}