@import url("fonts.css");
@import url("fingerpaintfont.css");
html, body{
  	font-family: 'Roboto', sans-serif;
    font-size: 100%;
  	background: #fdfdfd;
	color:#222222;
	overflow-x:hidden;  	 
}
body {
	overflow-x:hidden;
	overflow-y:auto;
}

.navbar {
    overflow: hidden;
    background-color: #342D7E;
	border-radius:16px;
}

#siteLogo {
	color:#82CAFA !important;
	font-family: 'Finger Paint', cursive;
	font-size:26px;
	line-height:26px;
	cursor:pointer;
}

#siteLogoImg {
	width:50px;
	height:auto;
	float:left;
	margin-left:4px;
	margin-top:4px;
	cursor:pointer;
}

.navbar a , .navbar #siteLogo {
    float: left;
    font-size: 20px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	border-right: 3px solid #151B54;
	font-family: 'Finger Paint', cursive;
}

.dropdown {
    float: left;
    overflow: hidden;
	text-decoration: none;
	border-right: 3px solid #151B54;
}

.dropdown .dropbtn {
    font-size: 20px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: 'Finger Paint', cursive;
    margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #444444;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #95B9C7;
}

.dropdown:hover .dropdown-content {
    display: block;
}

#rightMenu {
	float:right;
	vertical-align:middle;
}

.commandButtons {
	height:30px;
	width:auto;
	border-radius:5px;
	background:#85C1E9;
	margin-right:10px;
	margin-top:10px;
	transition: all .2s ease-in-out;	
}

.commandButtons:hover {
	transform:scale(1.2);
}

.menuAdvertContainer {
    text-align: center;
	width:200px;
	margin-right:10px;
	border:3px solid #342D7E;
	padding:0;
	max-height:34px;
	overflow:hidden;
}

.marqueeLink {
	color:blue;
	font-weight:bold;
}

.hiddenHR {
	opacity:0;
}

.advertContainer {
	display:block;
	width:100%;
	height:80px;
	max-height:80px;
	text-align:center;
	clear:both;'
	margin:0;
}

/********       ADVERT    banner  ***********/
.topAdvert {

}

.topAdvertHeadline {
	clear:both;
	font-family: 'Finger Paint', cursive;
    font-size: 12px;
	line-height:12px;
	padding:0 0 0 0;
	margin:0 0 0 0;
	
}

.topAdvertText {
	clear:both;
	font-family: 'Roboto', sans-serif !important;
    font-size: 20px;
	line-height:26px;
	font-weight:bold;
	padding:0 0 0 0;
	margin:0 0 0 0;
}

#topAdvert1 {
	background:yellow !important;
	color:black !important;
	margin:0;
	padding-top:8px;
	padding-bottom:8px;
}

#topAdvert1:hover {
	background:#FBB917 !important;
}

#topAdvert2 {
	background:black !important;
	color:#eeeeee !important;
	margin:0;
	padding-top:8px;
	padding-bottom:8px;
}

#topAdvert2:hover {
	background:#333333 !important;
}
/********       FLASH ANIMATIONS   ***********/
@-webkit-keyframes colorFlashRedYellow {
    0% {
        background-color: #FBB917;
        opacity:1;
    }
    22% {
        background-color: #FBB917;
    }
    77% {
        background-color: #FF2400;
    }
    100% {
        background-color: yellow;
    }
}
    
.flashAnimationRedYellow {
    -webkit-animation-name: colorFlashRedYellow;
    -webkit-animation-duration: 300ms;
    -webkit-animation-iteration-count: 3;
    -webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes colorFlashBlackWhite {
    0% {
        background-color: #AAAAAA;
        opacity:1;
    }
    22% {
        background-color: #999999;
    }
    77% {
        background-color: #666666;
    }
    100% {
        background-color: #000000;
    }
}
    
.flashAnimationBlackWhite {
    -webkit-animation-name: colorFlashBlackWhite;
    -webkit-animation-duration: 300ms;
    -webkit-animation-iteration-count: 3;
    -webkit-animation-timing-function: ease-in-out;
}

#centralContainer {
	width:100%;
	display:block;
	clear:both;
	text-align:center;
	/*max-height:600px;*/
}

#leftAdvertContainer {
	display:inline-block;
	width:12%;
	float:left;
	margin-right:3%;
}

#theGameContainer {
	display:inline-block;
	width:70%;
	float:left;
}

#rightAdvertContainer {
	display:inline-block;
	width:12%;
	float:left;
	margin-left:3%;
}

#iframeContainer {
	/*position: relative;
    overflow: hidden;
    padding-top: 56.25%;*/
	width:100%;
	display:block;
}
	
#responsiveIframe {
	/*position: absolute;
	width:100%;
	max-width:600px;
	height:100%;
	max-height:500px;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	*/
	display:inline-block;
	width:100%;
	max-width:600px;
	height:55vw;
	max-height:500px;
	margin-left:auto;
	margin-right:auto;
	
}

/********************************************/
/********    GAMES  MAILLIST      ***********/
/********************************************/
#gamesMailingListContainer {
	display:block;
	width:100%;
	padding:0 0 0 0;
	margin:5px 0 0 0;
	text-align:center;
	background:#D6EAF8;
	padding:1px 1px 1px 1px;
	border-radius:8px;
}

.warningMessage {
	color:red;
	font-weight:bold;
}

.registrationInput {
	width:150px;
	border-radius:2px;
	margin:0 3px 0 3px;
}

#gamesMailingCloseButton {
	width:16px;
	height:16px;
	margin:2px;
	float:left;
	opacity:0.5;
	cursor:pointer;
}

/********************************************/
/********        GAMES  MOSAIC    ***********/
/********************************************/
#gamesListContainer {
	display:block;
	width:100%;
	clear:both;
	margin-bottom:40px;
}

.gameListItemContainer {
	display:inline-block;
	width:19%;
	margin-left:3%;
	margin-right:3%;
	float:left;
	margin-top:50px;
	border:3px solid #95B9C7;
	border-radius:20px;
	box-sizing:border-box;
	transition: all .2s ease-in-out;
}

.gameListItemContainer:hover {
	transform:scale(1.2);
}

.gameListItemScreenshot {
	display:inline-block;
	width:100%;
	clear:both;
}

.gameListItemScreenshotImage {
	width:100%;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
}

.gameListItemName {
	display:inline-block;
	width:100%;
	clear:both;
	font-family: 'Finger Paint', cursive;
	font-size:28px;
	color:#333333;
	text-align:center;
}

#aboutSection {
	display:block;
	width:90%;
	clear:both;
	margin-top:30px;
	margin-left:5%;
	margin-right:5%;
	text-align:left;
	color:#222222;
	font-family: 'Roboto', sans-serif;
	font-size:16px;
}

#aboutSection h2 {
	color:#342D7E;
	font-size:24px;
}

#aboutSection h3 {
	color:#444D8E;
	font-size:18px;
}

/*********************************************/
/*********   HIDEAWAY  POPUP WINDOW  *********/
/*********************************************/
#hideawayWindow {
	display:block;
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0;
	border:5px solid #999999;
	border-radius:5px;
	box-sizing: border-box;
	background:#ffffff;
	background-image:url('hideawayGraph.png');
	background-size:contain;
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
	z-index:99999;
}

#hideawayCloseLink {
	position:absolute;
	right:20px;
	top:20px;
	width:40px;
	height:40px;
	opacity:0.5;
	cursor:pointer;
}

#additionalContentSection img {
	max-width:100%;
	height:auto;
}

/********************************************/
/********       MEDIA  QUERIES    ***********/
/********************************************/

@media only screen and (max-width: 1200px) {
	.gameListItemName {
		font-size:22px;
	}
	
	#topAdvert2 {
		display:none;
	}
}

@media only screen and (max-width: 960px) {
	.navbar {
		border-radius:16px;
	}

	#siteLogo {
		display:none;
	}

	#siteLogoImg {
		width:30px;
	}

	.navbar a , .navbar #siteLogo {
		font-size: 14px;
		padding: 7px 8px;
		border-right: 3px solid #666666;
	}
	
	.dropdown .dropbtn {
		font-size: 14px;    
		padding: 7px 8px;
	}
	
	.dropdown-content a {
		padding: 12px 16px;
	}

	.commandButtons {
		height:20px;
		width:auto;
		border-radius:5px;
		margin-right:10px;
		margin-top:5px;
		
	}

	.menuAdvertContainer {
		width:120px;
		margin-right:10px;

	}
	
	.topAdvert {

	}
	
	#topAdvert2 {
		display:initial;
	}
	
	#topAdvert1 , #topAdvert2 {
		padding-top:2px;
		padding-bottom:2px;
	}

	.topAdvertHeadline {
		font-size: 10px;
		line-height:12px;
	}

	.topAdvertText {
		font-size: 14px;
		line-height:16px;
	}
	
	.gameListItemContainer {
		width:40%;
		margin-left:5%;
		margin-right:5%;
		margin-top:30px;
	}

	.gameListItemName {
		font-size:26px;
	}

	#responsiveIframe {
		/*width:80%;*/
		
	}
	
	#iframeContainer {
		/*padding-top: 90%;
		margin-bottom:0;
		padding-bottom:0;*/
	}
	
	#leftAdvertContainer {
		display:none;
	}

	#theGameContainer {
		width:75%;
	}

	#rightAdvertContainer {
		width:18%;
		margin-left:7%;
	}
	
	.registrationInput {
		width:100px;
	}
	
}

@media only screen and (max-width: 640px) {
	.gameListItemName {
		font-size:16px;
	}
	
	#topAdvert2 {
		display:none;
	}
}

@media only screen and (max-width: 480px) {
	.navbar {
		border-radius:12px;
	}


	#siteLogoImg {
		width:20px;
	}

	.navbar a , .navbar #siteLogo {
		font-size: 10px;
		padding: 5px 3px;
		border-right: 3px solid #666666;
	}
	
	.dropdown .dropbtn {
		font-size: 12px;    
		padding: 5px 3px;
	}
	
	.dropdown-content a {
		padding: 5px 3px;
	}
	
	#rightMenu {
		text-align:center;
	}
	
	.commandButtons {
		display:none;
		
	}

	.menuAdvertContainer {
		width:90px;
		height:30px;
		max-height:30px;
		overflow:hidden;
		margin-right:0px;
		margin-top:2px;
		border-top-right-radius:6px;
		border-bottom-right-radius:6px;
	}
	
	.topAdvert {

	}
	
	#topAdvert1 , #topAdvert2 {
		padding-top:2px;
		padding-bottom:2px;
	}

	.topAdvertHeadline {
		font-size: 10px;
		line-height:12px;
	}

	.topAdvertText {
		font-size: 14px;
		line-height:16px;
	}

	
	#leftAdvertContainer {
		display:none;
	}

	#theGameContainer {
		width:100%;
	}

	#rightAdvertContainer {
		display:none;
	}

}