*{
margin:0;
padding:0;
}

div {
    width:0px;
	height:0px;
    padding:0px;
    margin:0 auto;
	display:block;
	//border:1px solid black;
}

html, body {
width: 100%;
height: 100%;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
color:white;
position:absolute;
margin:auto;
background-color:#2d2d2d;
background-repeat:no-repeat;
font-size:16px;
overflow-x: hidden;
}
a:link, a:visited { 
    color:rgb(200,200,200);
    text-decoration:none;
    cursor: auto;
	font-size:130%;
	border:none;
}
a:hover {
color: #ed823b;	
cursor:pointer;
}
a > img:hover {
cursor:pointer;	
}
a:active {
color: white;	
}

#ribbon {
width: 100%;
height: 110px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
//border:1px red dashed;
background-color:white;
color:gray;
margin:auto;
font-size:24px;
font-weight:bold;
position:relative;
z-index:20;
}
#ribbonbtn1 {
position:relative;
display: inline-block;
top:40px;
//border:1px green dashed;
height:110px;
width:130px;;
}
#ribbonbtn2 {
position:relative;
display: inline-block;
top:40px;
//border:1px green dashed;
height:110px;
width:130px;;
}
#ribbonbtn1 a, #ribbonbtn2 a {
color:gray;	
font-size:28px;
font-weight:bold;
}
#ribbonLink1 {
position:relative;
display:inline;
//border:1px red dashed;
display:inline;	
top:18%;
left:-9%;
}
#ribbonLink2 {
position:relative;
display:inline;
//border:1px red dashed;
display:inline;	
top:18%;
left:-9%;
}
#ribbonLink1 a, #ribbonLink2 a {
color: white;
font-size:21px;
font-weight:bold;	
text-align:center;
margin-left:18px;
}
#ribbonLink1 a:hover, #ribbonLink2 a:hover {
color: #ed823b;
}
#ribbonLink1 a:active, #ribbonLink2 a:active {
color: white;
}
#socialMediaWrapper {
z-index:21;	
position:absolute;
width:auto;
height:auto;
top:30px;
right:10px;
margin-right:5px;

}
@supports (-webkit-appearance:none) {
   #socialMediaWrapper {
        right:12px;
    }
}
#socialMediaIcon {
//border:2px red dashed;
display:inline;
z-index:22;
position:relative;
//background-color:#353535;
width:54px;
height:48px;	
float:left;
margin-left:5px;
cursor:pointer;
}

#socialMediaIcon:hover > a {
background-position: 0px -48px ;	
cursor:pointer;
}


#facebookIMG {
position:absolute;
left:0;
width:100%;
height:100%;	
//border:1px blue dashed;	
//background-color:#353535;
z-index:22;	
background-image:url("http://foggames.net/Images/facebook_icon.png");
background-clip:initial;
background-size: 54px 96px;
}
#facebookIMG:hover {

}

#twitterIMG {
position:absolute;
left:0;
width:100%;
height:100%;	
//border:2px red dashed;	
//background-color:#353535;
z-index:22;	
background-image:url("http://foggames.net/Images/twitter_icon.png");
background-clip:initial;
background-size: 54px 96px;
}
#twitterIMG:hover {
background-position: 0px -48px ;
}


#steamIMG {
position:absolute;
left:0;
width:100%;
height:100%;	
//border:2px red dashed;	
//background-color:#353535;
z-index:22;	
background-image:url("http://foggames.net/Images/steam_icon.png");
background-clip:initial;
background-size: 54px 96px;
}
#steamIMG:hover {
background-position: 0px -48px ;
}


#youtubeIMG {
position:absolute;
left:0;
width:100%;
height:100%;	
//border:2px red dashed;	
//background-color:#353535;
z-index:22;	
background-image:url("http://foggames.net/Images/youtube_icon.png");
background-clip:initial;
background-size: 54px 96px;
}
#youtubeIMG:hover {
background-position: 0px -48px ;
}



#navpanel1 {
position:absolute;	
z-index:22;	
display: none;
left:-1000px;
width: 2600px;
height: 40px;
bottom: 0;
top:64px;
text-align:center;
//border:1px green dashed;
background-color:#353535;
color:white;
font-size:22px;
font-weight:bold;
-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
}
#navpanel2 {
position:absolute;	
z-index:22;	
display: none;
left:-1000px;
width: 2600px;
height: 40px;
bottom: 0;
top:64px;
text-align:center;
//border:1px green dashed;
background-color:#353535;
color:white;
font-size:22px;
font-weight:bold;
-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
}
#indicator1 {
display:none;
position:absolute;
z-index:21;
top:52px;
bottom:30px;
left:32%;
width:64px;
height:64px;
background-image:url("http://foggames.net/Images/indicator.png");
background-repeat:no-repeat;
background-size:75%;
//border:1px red dashed;
opacity:0.92;
}
#indicator2 {
display:none;
position:absolute;
z-index:21;
top:52px;
bottom:30px;
left:32%;
width:64px;
height:64px;
background-image:url("http://foggames.net/Images/indicator.png");
background-repeat:no-repeat;
background-size:75%;
//border:1px red dashed;
opacity:0.92;
}
#ribbonbtn1:hover > #navpanel1, #ribbonbtn1:hover > #indicator1 {
display:block;
}
#ribbonbtn2:hover > #navpanel2, #ribbonbtn2:hover > #indicator2 {
display:block;
}
#navpanel1:hover ~ #indicator1, #navpanel2:hover ~ #indicator2 {
display:block;
}
#navpanel1:hover, #navpanel2:hover {
display:block;
}
#ribbonbtn1 > a:hover, #ribbonbtn2 > a:hover {
color:#ed823b;	
}
#ribbonbtn1 > a:active, #ribbonbtn2 > a:active {
color:gray;	
}



#logo {	
position:absolute;
float:left;
top:0;
left:0px;
width:186px; 
height:106px; 
margin-top:0px;
margin-left:20px;
background-image:url("http://foggames.net/Images/FoG_LogoSprite.png");
background-repeat:no-repeat;
background-clip:initial;
background-size: 186px 212px;
z-index:25;
//border:3px aqua dashed;
}
#logo_footer {	
position:relative;
float:left;
top:0;
left:0px;
width:186px; 
height:106px; 
margin-top:0px;
margin-left:20px;
background-image:url("http://foggames.net/Images/FoG_LogoSprite3.png");
background-clip:initial;
background-size: 186px 212px;
z-index:10;
}

#logo:hover, #logo_footer:hover {
background-position: 0px -106px ;
}
#logo:active, #logo_footer:active {
background-position: 0px 0px ;
}

#banner {
z-index:11;
width:100%;
height:100%;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */	
}

#bannerTextTitle {
font-family:'Audiowide';
color:#ed823b;
font-size:40px;
text-align:left;	
}
#bannerTextSlogan {
font-family:'Audiowide';
color: white;
font-size:30px;
text-align:left;
margin-left:14px;	
}

#contentpanel_base {
position:relative;
z-index:10;
width: 100%;
height: 160px;
max-width: 100%;
box-sizing:border-box;
margin: 0;
padding: 0;
border: 0 none;
background-color:#2d2d2d;
}
#contentpanel_landing {
position:relative;
z-index:10;
width: 100%;
height: auto;
max-width: 100%;
box-sizing:border-box;
//border:3px aqua dashed;
margin: 0;
padding: 0;
background-color:#2d2d2d;
text-align:center;

}
#contentpanel2_landing {
display:block;
position:relative;
z-index:10;
width: 100%;
height: auto;
max-width: 100%;
//border:5px green dashed;
margin: 0;
//margin-top:-28px;
padding: 0;
border: 1 px black solid;
//background-color:#ed823b;
background-color:white;
color:black;
font-size:42px;
font-weight:bold;
//background-image:url("http://foggames.net/Images/patternedBanner.png");
//background-clip:initial;
//background-repeat:no-repeat;
//background-size: 100% 100%;
}
#productBanner_SW {	
position:relative;
display:block;
z-index:12;
width:auto;
height:258px;
background-image:url("http://foggames.net/Images/StickWar_CastleDefence_Btn.png");
background-clip:initial;
background-repeat:no-repeat;
background-size: 100% 200%;
background-position: 0px 0px;	
}
#productBanner_SW p {
vertical-align:middle;	
}

#productBanner_SW:hover {
//background-position: 0px -258px;	
}



#contentpanel_legal {
position:relative;
z-index:10;
width: 100%;
height: auto;
max-width: 100%;
min-width:100%;
box-sizing:border-box;
margin: 0;
padding: 0;
background-color:white;
}
#legalpanel {
display:block;
position:relative;
z-index:11;
width:auto;
height: auto;
max-width:1280px;
min-width:600px;
box-sizing:border-box;
margin: 0 auto;
padding: 0;
padding-left:140px;
padding-right:140px;
padding-top:60px;
border: 0 none;
background-color:white;
font-size:14px;
text-align:left;
font-weight:normal;
color:#5d5d5d;
}
#legalpanel h1 {
color: #ed823b;		
}
#divider {
width:100%;
height: 0px;
border:none;
border-top:2px solid gray;
opacity:0.2;
border-bottom:2px solid gray;

	
}
.videowrapper {	
display:block;
width:100%;
height:auto;
overflow:hidden;
box-sizing:border-box;
//background-color:#2d2d2d;
position:relative;
z-index:11;
padding: 0;
}
.videowrapper iframe {	
top:0;
left:0;
width:100%;
height:100%;
box-sizing:border-box;
border: 0 none;
background-color:white;
position:relative;
z-index:11;
-ms-transform: scale(1.02, 1.09); /* IE 9 */
-webkit-transform: scale(1.02, 1.09); /* Safari */
transform: scale(1.02, 1.09);
}
#overlay {
position:absolute;
top:0px;
left:0px;
z-index:12;
width:100%;
height:100%;
background-image:url("http://foggames.net/Images/overlay.png");	
opacity:0.75;
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(0,0,0,0.5), inset 0px -2px 2px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 2px 2px 0px rgba(0,0,0,0.5), inset 0px -2px 2px 0px rgba(0,0,0,0.5);
box-shadow: inset 0px 2px 2px 0px rgba(0,0,0,0.5), inset 0px -2px 2px 0px rgba(0,0,0,0.5);
}

#videoText1 {
font-family:'Audiowide';	
position:absolute;
z-index:14;
top:60px;
height:auto;
width:100%;
color:white;
font-size:50px;
font-weight:bold;	
background-color:rgba(0,0,0,0.5);
text-align:left;
padding-left:10px;
}
#videoText2 {
font-family:'Audiowide';
position:absolute;
z-index:14;
top:200px;
height:auto;
width:100%;
color:white;
font-size:50px;
font-weight:bold;	
background-color:rgba(0,0,0,0.5);
text-align:left;
padding-left:10px;
}

#footerpanel {
position:relative;
display:block;
width: 100%;
height: 200px;
box-sizing:border-box;
background-color:#2d2d2d;
color:white;
font-size:22px;
font-weight:bold;	
z-index:6;
padding-top:30px;
padding-left:40px;
padding-right:80px;
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 2px 2px 0px rgba(0,0,0,0.5);
box-shadow: inset 0px 2px 2px 0px rgba(0,0,0,0.5);
}



#footer_legal{
position:relative;
float:right;
width:auto;
height:auto;
}
#footer_legal a {
display:block;	
font-size:14px;
font-weight:normal;
text-align:right;
margin-top:10px;
}

/* Checkbox Input Style*/
input[id^="spoiler"]{
	display: none;
}
/* Spoiler Button Style */
input[id^="spoiler"] + label {
	display: relative;
	position:relative;
	width: auto;
	margin: 0 auto;
	padding-left:1px;
	padding-right:2px;
	font-size:16px;
	font-weight:bold;
	color:gray;
	border:1px solid white;

	text-align: center;
	cursor: pointer;
 /* transition: all .6s;*/
}

/* Spoiler Button OnClick Style */
input[id^="spoiler"]:checked + label {
	color:white;
}

/* Spoiler Content Container Style */
input[id^="spoiler"] + label + div[class^="spoiler"] {
	position:relative;
	width:96%;
	height:0;
	overflow:hidden;
	opacity:0;
	margin-top:3px;
	margin-left:-1px;
	padding:10px; 

	background:rgb(15,15,15);
	border:1px solid rgb(25,25,25);
	transition:all .6s;
}
input[id^="spoiler"]:checked  + label + div[class^="spoiler"] {
	height:auto;
	opacity:1;
	padding:10px;
}

/* Spoiler Content Container Style CHANGELOG */
input[id^="spoiler"] + label + div[class^="spoilerChange"] {
	position:relative;
	width:auto;
	height:0;
	overflow:hidden;
	opacity:0;
	padding:0;
	margin:0;
	padding-left:18px;
	margin-top:5px;	
	margin-left:50px;
	border:0 0 0;
	border:none;
	//border:1px dashed green;
	background-color:rgba(0,0,0,0);
	transition:all .6s;
}
input[id^="spoiler"]:checked  + label + div[class^="spoilerChange"] {
	height:auto;
	padding:0;
	margin:0;
	padding-left:18px;
	margin-top:5px;
	margin-left:0px;
	opacity:1;
}