/***************************************************************************************************
Theme Name: Incubator Games Theme
Description: The default Incubator Games Wordpress theme.
Author: Radek & Derek Koncewicz
***************************************************************************************************/


/***************************************************************************************************
* header
***************************************************************************************************/

#header
{
	width: 					100%;
	height:					100%;
	background-image: 	url('images/header_bg.png');
	background-position:	top;
	background-repeat:	repeat-x;
	/*overflow:				hidden;*/
}

#header-inner
{
	width:					1000px;
	height:					100%;
	margin: 					0px auto 0px auto;
}

#header-menu
{
	width: 					100%;
	height:					120px;
	z-index:					10;
	
}

#header-menu #logo-float
{
	width: 					101px;
	height: 					96px;
	position:				relative;
	float:					left;
	margin:					24px 30px 0px 0px;
}

#header-menu #logo-link
{
	width: 					101px;
	height: 					96px;
	position:				absolute;
}

#header-menu .menu-float
{
	width: 					184px;
	height: 					68px;
	position:				relative;
	float:					left;
	margin:					52px 15px 0px 15px;
	
}

#header-menu .menu-link
{
	width: 					184px;
	height: 					68px;
	position:				absolute;
}

#header-menu .icon-float
{
	width: 					46px;
	height: 					38px;
	position:				absolute;
	top:						0px;
	left:						0px;
	animation:				0;
}

.menu-float:hover img.bottom,
.menu-float:hover img.bottom
{
	opacity:					0;
}

.menu-float:hover .menu-icon
{
	animation:				icon-wobble 0.5s linear 0s infinite;
	-webkit-animation:	icon-wobble 0.5s linear 0s infinite;
}

@keyframes icon-wobble
{
	0%, 100% 
	{
		transform: 			translateY(0);
	}

	25%
	{
		transform: 			translateY(-2px);
	}

	75%
	{
		transform: 			translateY(2px);
	}
}

@-webkit-keyframes icon-wobble
{
	0%, 100% 
	{
		-webkit-transform:translateY(0);
	}

	25%
	{
		-webkit-transform:translateY(-2px);
	}

	75%
	{
		-webkit-transform:translateY(2px);
	}
}

#header-menu #social-box
{
	width:					100px;
	height:					40px;
	position:				relative;
	float: 					right;
	margin:					17px 70px 0px 0px;
	overflow:				hidden;
	visibility:				hidden;
	display:					none;
}

#header-menu .social-float
{
	width: 					40px;
	height: 					40px;
	position:				relative;
	float:					left;
	margin:					0px 5px 0px 5px;
}

#header-menu .social-link
{
	width: 					40px;
	height: 					40px;
	position:				absolute;
}

#header-menu #search-float
{
	width: 					215px;
   height: 					40px;
	position:				relative;
	float: 					right;
   background-image: 	url("images/searchbar.png");
   background-repeat: 	no-repeat;
	background-position: left top;
	margin:					55px 0px 0px 0px;
	overflow:				hidden;
}

#header-menu #search-input
{
	width: 					160px;
	position:				relative;
   float: 					left;
	margin:					9px 0px 0px 6px;
}

#header-menu #search-button
{
	width:					33px;
	height:					32px;
	position:				relative;
	float:					right;
	margin:					0px 0px 0px 0px;
}

#header-menu #search-icon
{
   width: 					33px;
   height: 					32px;
	position:				absolute;
}

#header-submenu
{
	width: 					944px;
	height:					43px;
	margin: 					0px auto 0px auto;
	z-index:					5;
	background-image: 	url('images/subhead.png');
	background-position:	top center;
	background-repeat:	no-repeat;
}

#header-submenu a:link, #header-submenu a:visited
{
	/*color:					#c45920;*/
	color:					#ffffff;
	text-decoration:		none;
}

#header-submenu a:hover, #header-submenu a:active
{
	color:					#ffffff;
	text-shadow: 			1px 1px 1px rgba(255,255,255,0.004);
	text-decoration:		underline;
}

#header-submenu-container
{
	display:					block;
	margin:					0px auto 0px auto;
	text-align: 			center;
}

.header-submenu-link
{
	color:					#ffffff;
	display: 				inline-block;
	text-align:				center;
	vertical-align:		top;
	margin:					4px 0px 0px 0px;
	font-size:				0.875em;
	font-size:				1.0em;
	font-weight:			700;
	line-height:			1.6em;
	text-shadow: 			0px 3px 3px rgba(0, 0, 0, 0.75);
}

.header-submenu-divider
{
	width: 					3px;
	height: 					24px;
	margin:					6px 0px 0px 0px;
	display: 				inline-block;
	background-color:		#c53f03;
}

#header-submenu-news
{
	width: 					176px;
}

#header-submenu-games
{
	width: 					302px;
}

#header-submenu-about
{
	width: 					302px;
}

#header-submenu-shadow
{
	width: 					100%;
	height:					43px;
	background-image: 	url('images/header_bg_dropshadow.png');
	background-position:	top;
	background-repeat:	repeat-x;
}

#header-shadow
{
	width: 					100%;
	height:					10px;
	background-image: 	url('images/header_bg_dropshadow.png');
	background-position:	top;
	background-repeat:	repeat-x;
}


/***************************************************************************************************
* homepage
***************************************************************************************************/

#carousel
{
	width:					100%;
	height:					392px;
}

.carousel-content
{
	width:					100%;
	height:					392px;
	margin:					0px auto 0px auto;
	position:				relative;
	-webkit-transform: 	translateZ(0);
	transform: 				translateZ(0);
}

@-webkit-keyframes carousel-fade 
{
	0%
	{
		-webkit-opacity:	0;
	}
	
	100%
	{
		-webkit-opacity:	1;
	}
}

@keyframes carousel-fade 
{
	0%
	{
		opacity:				0;
	}
	
	100%
	{
		opacity:				1;
	}
}

@-webkit-keyframes carousel-slide 
{
	0%
	{
		-webkit-opacity:	0;
	}
	
	100%
	{
		-webkit-opacity:	1;
		left:					0px;
		right:				0px;
	}
}

@keyframes carousel-slide 
{
	0%
	{
		opacity:				0;
	}
	
	100%
	{
		opacity:				1;
		left:					0px;
	}
}

#carousel-ft-bg
{
	z-index:					10;
	width:					100%;
	height:					392px;
	background-image: 	url('images/carousel_feeding_time_bg.jpg');
	background-repeat:	no-repeat;
	background-position:	center center;
	position:				absolute;
	top:						0px;
	opacity:					0;
	-webkit-animation: 	carousel-fade 1.5s forwards; 
    animation: 			carousel-fade 1.5s forwards;
}

#carousel-ft-fg
{
	z-index:					15;
	width:					100%;
	height:					392px;
	background-image: 	url('images/carousel_feeding_time_fg.png');
	background-repeat:	no-repeat;
	background-position:	center center;
	position:				absolute;
	top:						0px;
	left:						-100%;
	opacity:					0;
	-webkit-animation: 	carousel-slide 1.5s 0.5s forwards; 
   animation: 				carousel-slide 1.5s 0.5s forwards;
}

#carousel-ft-logo
{
	z-index:					20;
	width:					100%;
	height:					392px;
	background-image: 	url('images/carousel_feeding_time_logo.png');
	background-repeat:	no-repeat;
	background-position:	center center;
	position:				absolute;
	top:						0px;
	left:						1920px;
	opacity:					0;
	-webkit-animation: 	carousel-slide 1.5s 0.5s forwards; 
   animation: 				carousel-slide 1.5s 0.5s forwards;
}

#carousel-tm-bg
{
	z-index:					10;
	width:					100%;
	height:					392px;
	background-image: 	url('images/carousel_trudy_bg.jpg');
	background-repeat:	no-repeat;
	background-position:	center center;
	position:				absolute;
	top:						0px;
	opacity:					0;
	-webkit-animation: 	carousel-fade 1.5s forwards; 
    animation: 			carousel-fade 1.5s forwards;
}

#carousel-tm-fg
{
	z-index:					15;
	width:					100%;
	height:					392px;
	background-image: 	url('images/carousel_trudy_fg.png');
	background-repeat:	no-repeat;
	background-position:	center center;
	position:				absolute;
	top:						0px;
	left:						-100%;
	opacity:					0;
	-webkit-animation: 	carousel-slide 1.5s 0.5s forwards; 
   animation: 				carousel-slide 1.5s 0.5s forwards;
}

#carousel-tm-logo
{
	z-index:					20;
	width:					100%;
	height:					392px;
	background-image: 	url('images/carousel_trudy_logo.png');
	background-repeat:	no-repeat;
	background-position:	center center;
	position:				absolute;
	top:						0px;
	left:						1920px;
	opacity:					0;
	-webkit-animation: 	carousel-slide 1.5s 0.5s forwards; 
   animation: 				carousel-slide 1.5s 0.5s forwards;
}

#motto
{
	width: 					944px;
	height: 					90px;
	overflow:				hidden;
	margin:					0px auto 0px auto;
	background-image: 	url('images/motto_bar.png');
}

#motto-logo
{
	width:					136px;
	height:					52px;
	float:					left;
	margin:					25px 0px 0px 8px;
}
	
#motto-content
{
	float:					right;
	width:					759px;
	margin:					43px 10px 0px 10px;
	text-align:				center;
	font-size:				1.125em;
	font-style:				italic;
	color:					#464646;
}

#grapevine
{
	width:					460px;
	max-width:				460px;
	height:					100%;
	float:					left;
	margin:					0px 0px 0px 5px;
}

#grapevine-content
{
	height:					72px;
}

#newsletter
{
	width:					460px;
	max-width:				460px;
	height:					100%;
	float:					right;
	margin:					0px 5px 0px 0px;
}

#newsletter-caption
{
	height:					36px;
}

#newsletter-float
{
	width: 					458px;
	height:					40px;
	position:				relative;
	margin:					20px 0px 0px 0px;
}

#newsletter-label
{
	width:					65px;
	height:					32px;
	padding:					8px 0px 0px 0px;
	position:				relative;
	float:					left;
}

#newsletter-email-container
{
	width: 					240px;
	height:					40px;
	position:				relative;
   float: 					left;
	background-image: 	url("images/newsletter_bar.png");
   background-repeat: 	no-repeat;
	background-position: left top;
}

#newsletter-float input
{
	width:					188px;
	margin:					5px 5px 0px 5px;
	padding:					3px 2px 2px 2px;
	border:					1px solid transparent;
}

#input-checkmark,
#input-checkmark-bg
{
	top:						3px;
	right:					11px;
}

#newsletter-float button
{
	width:					150px;
	height:					40px;
	position:				relative;
	float:					right;

}

#newsletter-float button:hover img.bottom
{
	opacity:					0;
}

#newsletter-button-link
{
	width:					150px;
	height:					39px;				
	position:				absolute;
	top:						0px;
	left:						0px;

}

@-webkit-keyframes submit-error 
{
	0%, 100% 
	{
		-webkit-transform: 			translateX(0);
	}

	10%, 30%, 50%, 70%, 90% 
	{
		-webkit-transform: 			translateX(-5px);
	}

	20%, 40%, 60%, 80% 
	{
		-webkit-transform: 			translateX(5px);
	}
}

@keyframes submit-error 
{
	0%, 100% 
	{
		transform: 			translateX(0);
	}

	10%, 30%, 50%, 70%, 90% 
	{
		transform: 			translateX(-5px);
	}

	20%, 40%, 60%, 80% 
	{
		transform: 			translateX(5px);
	}
}

#newsletter-button-icons
{
	width: 					24px;
	height: 					19px;
	position:				absolute;
	top:						7px;
	left:						9px;
}

#newsletter-icon
{
	position:				absolute;
	width: 					24px;
	height: 					19px;
	top:						0px;
	left:						0px;
	background-image: 	url("images/newsletter.png");
	background-position:	center center;
}

#smile-icon
{
   position:				absolute;
	width:					32px;
	height:					32px;
	top:						0px;
	left:						0px;
	background-image: 	url("images/smile.png");
	opacity:					0;
}

#newsletter-button-label
{
	width:					114px;
	height:					20px;
	font-weight:			600;
	color:					#fff;
	text-align:				center;
	position:				absolute;
	top:						8px;
	left:						36px;
}

#elsewhere
{
	width: 					944px;
	height: 					86px;
	overflow:				hidden;
	margin:					0px auto 0px auto;
	text-align:				center;
}

#elsewhere .link-float
{
	width: 					80px;
	height: 					86px;
	position:				relative;
	margin:					0px 12px 0px 12px;
	display:					inline-block;
	background-image:		url('images/link_bg.png');
}

#elsewhere .link-button
{
	width: 					80px;
	height: 					80px;
	position:				absolute;
}


/***************************************************************************************************
* games
***************************************************************************************************/

.original-game
{
	width: 					944px;
	height: 					100%;
	margin:					0px auto 0px auto;
}

.original-game-splash
{
	width:					944px;
	height:					330px;
}

.original-game-panel
{
	width:					460px;
	height:					250px; 
	float:					left;
}

.original-game-panel-line
{
	width:					460px;
	height:					48px;
	background-image:		url('images/game_panel_line.png');
	background-repeat:	no-repeat;
	background-position:	center center;
}

.games-more-left
{
	width:					450px;
	height:					56px;
	position:				relative;
	text-align:				left;
}

.games-more-right
{
	width:					450px;
	height:					56px;
	position:				relative;
	text-align:				right;
}

.original-game-spacer
{
	width:					24px;
	height:					24px;
	float:					left;
}

.original-game-thumbs
{
	width:					944px;
	height:					161px; 
	margin:					24px 0px 0px 0px;
	clear:					both;
}

.original-game-thumbs-float
{
	width:					218px;
	height:					161px;
	float:					left;
	position:				relative;
	-webkit-transform-style: preserve-3d; 
   transform-style: 		preserve-3d;
	background-image:		url('images/tm_thumb_bg.png');
}

.original-game-thumbs-image
{
	z-index:					10;
	position: 				absolute;
	-webkit-transform: 	translateY(0px) scale(1.0);
	-moz-transform: 		translateY(0px) scale(1.0);
	-ms-transform: 		translateY(0px) scale(1.0);
	transform: 				translateY(0px) scale(1.0);
	-webkit-transition: 	-webkit-transform 0.2s;
	-moz-transition: 		-moz-transform 0.2s;
	transition: 			transform 0.2s;
}

.original-game-thumbs-float:hover img
{
	-webkit-transform: 	translateY(-5px) scale(0.8);
	-moz-transform: 		translateY(-5px) scale(0.8);
	-ms-transform: 		translateY(-5px) scale(0.8);
	transform: 				translateY(-5px) scale(0.8);
}

.original-game-thumbs-caption
{
	width:					218px;
	height:					14px;
	font-size:				0.75em;
	line-height:			1.0em;
	font-weight:			700;
	color:					#000;
	text-align:				center;
	position: 				absolute;
	bottom: 					11px;
	z-index:					5;
}

.contract-games
{
	width:					100%;
}

.contract-game
{
	width:					290px;
	float:					left;
}

.contract-game-thumbs-float
{
	width:					135px;
	height:					111px;
	overflow:				hidden;
	float:					left;
	position:				relative;
	-webkit-transform-style: preserve-3d; 
   transform-style: 		preserve-3d;
	background-image:		url('images/games_thumb_shadow.png');
	background-position:	bottom center;
	background-repeat:		no-repeat;
}

.contract-game-thumbs-image
{
	z-index:					10;
	position: 				absolute;
	-webkit-transform: 	translateY(0px) scale(1.0);
	-moz-transform: 		translateY(0px) scale(1.0);
	-ms-transform: 		translateY(0px) scale(1.0);
	transform: 				translateY(0px) scale(1.0);
	-webkit-transition: 	-webkit-transform 0.2s;
	-moz-transition: 		-moz-transform 0.2s;
	transition: 			transform 0.2s;
}

.contract-game-thumbs-float:hover img
{
	-webkit-transform: 	translateY(-5px) scale(0.8);
	-moz-transform: 		translateY(-5px) scale(0.8);
	-ms-transform: 		translateY(-5px) scale(0.8);
	transform: 				translateY(-5px) scale(0.8);
}

.contract-game-thumbs-caption
{
	width:					135px;
	height:					14px;
	font-size:				0.75em;
	line-height:			1.0em;
	font-weight:			700;
	color:					#000;
	text-align:				center;
	position: 				absolute;
	bottom: 					11px;
	z-index:					5;
}

.contract-game-spacer
{
	width:					37px;
	height:					37px;
	float:					left;
}

.contract-game-thumb-spacer
{
	width:					20px;
	height:					20px;
	float:					left;
}

.contract-game-description
{
	width:					100%;
	height:					100px;
	overflow:				hidden;
	clear:					both;
}

.contract-game-link
{
	width:					100%;
	height:					20px;
	font-weight:			600;
	text-align:				right;
}


/****************************************************************************************
* about markup.
****************************************************************************************/

.about-content
{
	width:					100%;
	height:					auto;
}

#about-summary-location
{
	width:					922px;
	height:					378px;
   border: 					1px solid #087de6;
   -webkit-border-radius: 10px;
   border-radius: 		10px;
   padding: 				10px;
}

#about-summary-office
{
	position:				relative;
	float:					left;
}

#about-summary-map
{
	position:				relative;
	float:					left;
	margin:					0px 0px 0px 10px;
}

.about-parterns-row
{
	width:					944px;
	height:					140px;
	display:					block;
	clear:					both;
}

.about-partners-logo
{
	float:					left;
   border: 					1px solid #087de6;
   -webkit-border-radius: 10px;
   border-radius: 		10px;
   padding: 				10px;
}

.about-partners-content
{
	width:					762px;
	height:					80px;
	float:					left;
	vertical-align:		center;
	margin:					30px 0px 0px 20px;
}

.about-partners-platforms
{

}

.about-partners-platform
{
	width:					220px;
	height:					112px;
	float:					left;
}

.about-partners-platform-spacer
{
	width:					21px;
	height:					21px;
	float:					left;
}

.standard-form
{
   width:					100%;
	color:					#000;
}

.about-contact-form-input
{
   width: 					100%;
	height:					39px;
	margin:					10px 0px 10px 0px;
	position:				relative;
	background-image: 	url("images/about_contact_email.png");
   background-repeat: 	no-repeat;
	background-position: left top;
}

.about-contact-form input
{
	width:					305px;
	margin:					6px 5px 0px 10px;
   display: 				block;
   float: 					left;
	padding:					3px 2px 2px 2px;
	border:					1px solid transparent;
}

#email-checkmark,
#email-checkmark-bg
{
	top:						4px;
	left:						324px;
}

.about-contact-form-input label
{
   margin:					8px 0px 0px 36px;
   display: 				block;
   float: 					left;
	color:					#000;
}

.about-contact-form-textarea
{
	width: 					944px;
   height: 					272px;
	overflow:				hidden;
   background-repeat: 	no-repeat;
	background-image: 	url("images/about_contact_comment.png");
   background-repeat: 	no-repeat;
	background-position: left top;
}

.about-contact-form textarea
{
   width: 					922px;
	max-width:				922px;
   height: 					244px;
	max-height:				244px;
   margin: 					10px;
	border:					1px solid transparent;
}

.about-contact-form-submit
{
   width: 					100%;
   height: 					30px;
   margin:					10px 0px 10px 0px;
}

.about-contact-form button
{
   width: 					100%;
	height:					100%;
	position:				relative;
   margin: 					0px;
	
}

.about-contact-form button:hover img.bottom
{
	opacity:					0;
}

.about-contact-form-submit-label
{
   width: 					100%;
   height: 					100%;
   top:						10px;
	position:				absolute;
	font-weight:			600;
	color:					#fff;
	text-align:				center;
}


/***************************************************************************************************
* footer
***************************************************************************************************/

#footer
{
	width: 					100%;
	height: 					64px;
	margin-top: 			-64px; 
	position: 				relative;
	clear:					both;
	background-image: 	url('images/footer_bg.png');
	background-repeat:	repeat-x;
	overflow:				hidden;
}

#footer-inner
{
	width: 					1000px;
	height:					100%;
	margin: 					0px auto 0px auto;
}

#footer-inner #logo-float
{
	width: 					172px;
	height: 					72px;
	width: 					39px;
	height: 					37px;
	position:				relative;
	float:					left;
	margin:					18px 160px 0px 0px;
}

#footer-inner #logo-link
{
	width: 					172px;
	height: 					72px;
	position:				absolute;
}

#footer-inner #footer-boilerplate
{
	float:					left;
	position:				relative;
	width:					648px;
	height:					48px;
	margin:					16px 0px 0px 0px;
	text-align:				center;
	line-height:			1em; /* 16×1.125=18 */
	font-size:				0.75em;
	font-weight:			bold;
	color:					#234e7a;
}

#footer-inner #footer-boilerplate p 
{
	margin-top:				0.5em;
	margin-bottom:			0.5em;
}

#footer-inner #social-box
{
	width:					120px;
	height:					20px;
	position:				relative;
	margin: 					25px 0px 0px 0px;
	float: 					right;
	overflow:				hidden;
}

#footer-inner #twitter
{
	width:					60px;
	height:					20px;
	position:				relative;
	float:					left;
	margin:					0px 5px 0px 0px;
}

#footer-inner #facebook
{
	width:					50px;
	height:					20px;
	position:				relative;
	float:					left;
	margin:					0px 0px 0px 5px;
}

