*, *:after, *:before 
{
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
	margin: 0px;
  	padding: 0px;
}

html
{
	height: 100%;
}

body
{
	background-size: 1200px auto;
	background-repeat: repeat-y;
	background-color: white;
	background-position: 50% 0px;
	font-family: 'Raleway', sans-serif;
	font-size: 14pt;
	height: 100%;
	line-height: 1.5;
}

hr
{
	height: 2px;
	margin: 16px 16px;
	border: 0;
	background-color: black;
}

img
{
	max-width: 100%;
}

.image-container
{
	position: relative;
	width: 100%;
}

.overlay-title
{
	position: absolute;
	bottom: 6px;
	left: 0;
	width: 100%;
	color: white;
	font-weight: bold;
	padding-left: 6px;
}


div
{
	color: #444444;
}

a
{
	font-weight: bold;
	text-decoration: none;
	color: #aaaaaa;
}

a:hover
{
	color: #cccccc;
}

h1, h2, h3, h4, h5, h6
{
	color: #000000;
	font-family: 'Roboto Slab', monospace;
	font-weight: bold;
	font-style: normal;
}

li h1, li h2, li h3, li h4, li h5, li h6
{
	display: inline;
}

p
{
}

iframe
{
	max-width: 100%;
}

p
{
	margin-top: 0px;
	margin-bottom: 16px;
}

p.intro:first-letter
{
	float: left;
	font-size: 70px;
	height: 45px;
	line-height: 45px;
	font-weight: bold;
	color: #cc0000;
	margin: 4px 4px 0px 0px;
}

ul
{
	margin: 0px 32px;
	list-style-position: outside;
	list-style-type: square;
}

li span.li-content 
{ 
	color: black; 
}

.inline
{
	display: inline;
}

.float
{
	float: left;
}

.float-right
{
	float: right;
}

.clear 
{
	clear: both;
	height: auto;
}

.text-align-left
{
	text-align: left;
}

.text-align-right
{
	text-align: right;
}

.text-align-center
{
	text-align: center;
}

.container 
{
	width: auto;
	margin: 56px 0px;
}

.container:before,
.container:after
{
	content: "";
	display: table;
	clear: both;
}

.container > div
{
	margin: 8px 0px;
	padding: 0px 16px;
}

.column-4
{
	float:left;
	width: 25%;
}

.column-2
{
	float:left;
	width: 33.3333333333333%;
}

.column-3
{
	float:left;
	width: 50%;
}

.column-6
{
	float:left;
	width: 100%;
}

#main-content
{
	width: 100%;
}

.fixed-container
{
	margin: 0 auto;
	width: 960px;
	min-height: 100%;
}

.wide-container
{
	margin: 0 auto;
	width: 100%;
	min-height: 100%;
	padding: 1px 0px;
}

.wide-container div
{
	color: white;
}

#test-wide1
{
	background-image: url("../images/TestImage.jpg");
	background-size: cover;
	background-position: left center;
}

#test-wide2
{
	background-color: #ffaaaa;
}

.header-container
{
	width: 100%;
	height: 75px;
	margin: 0px 0px 12px 0px;
}

.header
{
	background-color: white;
	position: fixed;
	left: 0px;
	width: 100%;
	height: 75px;
	opacity: 0.95;
	z-index: 100;
}

#header-logo-container
{
	background-color: white;
	display: inline-block;
	position: relative;
	width: 30%;
	height: 100%;
}

#header-menu-container
{
	background-color: white;
	text-align: right;
	display: inline-block;
	position: absolute;
	width: 70%;
	height: 100%;
	top: 0px;
}

#header-line1
{
	background-color: black;
	position: absolute;
	width: 100%;
	height: 4px;
	bottom: -4px;
}

#header-line2
{
	background-color: #e0e0e0;
	position: absolute;
	width: 100%;
	height: 4px;	
	bottom: -8px;
}

#menu-container
{
	color: black;
	top: 0px;
	float: right;
	height: 100%;
	display: table;
	margin: 0px 24px 0px 0px;
}


#header-logo
{
 	width: 132px;
 	height: 42px;
	margin: 20px 0px 0px 24px;
}

ul.menu
{
	color: #eb383c;
	list-style-type: none;
	overflow: hidden;
    display: table-cell;
    vertical-align: middle;
}

ul.menu li
{
	display: inline;
	margin: 0px 0px 0px 24px;
}

ul.menu li a 
{
	font-family: 'Roboto Slab', monospace;
	font-weight: bold;
	color: black;
	text-decoration: none;
	font-size: 14pt;
}

ul.menu li a:visited
{
	color: black;
}

ul.menu li a:hover
{
	color: #cccccc;
}

.header h1
{
	color: #eb383c;
	width: 100%;
	height: 75px;
}

#hamburger
{
	display: none;
	vertical-align: middle;
	margin: 18px 6px 18px auto;
	fill: black;
}

#menu-clicker:hover svg, #footer a:hover svg 
{ 
	fill: #cccccc;
}

@media screen and (max-width: 700px)
{
	ul.menu
	{
	}

	ul.menu li
	{
		display: list-item;
		margin: 16px 0px 16px 0px;
	}

	ul.menu li a 
	{
		font-size: 16pt;
	}

	#header-logo-container
	{
		width: 60%;
	}

	#header-menu-container
	{
		width: 40%;
		height: auto;
	}

	#menu-container
	{
		float: right;
		height: 100%;
		display: none;
		margin: 0px 6px 0px 0px;
	}

	.header-container
	{
		height: 56px;
	}

	.header
	{
		height: 56px;
	}

	#header-logo
	{
	 	width: 112px;
	 	height: 35px;
		margin: 12px 6px;
		fill: #000000;
	}

	#header-logo:hover 
	{ 
		fill: #cccccc;
	}

	#hamburger
	{
		display: block;
	}
}

/**************************************************
 *  Page Main Image/Title
 **************************************************/

#main-image-container
{
	position: relative;
	background-size: cover;
	overflow: hidden;
	z-index: -100;
	width: 100%;
}

#main-image-content-container
{
	/*
	margin: 0 auto;
	width: 960px;
	*/
	width: 100%;
	height: 100%;
	padding-top: 75px;
}

#main-image-content
{
	text-align: right;
	padding: 48px 24px;
}

#main-image-content h1, #main-image-content h2
{
	color: white;
	font-family: 'Roboto Slab', monospace;
	font-weight: bold;
	font-style: normal;
}

#main-image-content h1
{
	font-size: 50pt;
}

#main-image-content h2
{
	font-size: 20pt;
}

#footer-container
{
	background-color: black;
	width: 100%;
}

#footer
{
	margin: 0 auto;
	width: 100%;
	min-height: 100%;
	padding: 48px 24px;
}

#footer ul
{
	margin: 0px 0px 0px 20px;
}

#footer li
{
	margin: 24px 0px 0px 0px;
}

#footer div
{
	color: #444444;
}

#footer-contact-wrapper a div
{
	display: table-cell;
	padding: 0px;
	vertical-align: middle;
	color: inherit;
}

#footer-contact-wrapper a div div
{
	display: table-cell;
	color: inherit;
}

#footer-contact-wrapper a svg
{
	float: left;
	width: 56px;
	height: 56px;
	display: inline-block;
	margin: 0px 16px 0px 0px;
}

#footer h1
{
	color: #444444;
	font-family: 'Roboto Slab', monospace;
	font-weight: bold;
	font-style: normal;
	font-size: 36pt;
	padding-left: 18px;
}

#footer a
{
	font-size: 16pt;
}

.footer-content-wrapper
{
	display: inline-block;
	text-align: left;
}

#footer-contact-wrapper ul
{
	list-style-type: none;
	margin: 0px;
}

#footer-contact-wrapper h1
{
	padding-left: 69px;
	margin-bottom: -10px;
}

#footer .container .column-2,
#footer .container .column-6
{	
	text-align: center;
}

#copyright
{
	padding-top: 56px;
}

#footer a svg 
{ 
	fill: #aaaaaa;
}

@media screen and (max-width: 960px)
{
	#footer
	{
		width: auto;
	}
}

@media screen and (max-width: 700px)
{
	#footer
	{
		width: auto;
	}
}

.post-preview
{
	margin: 0px;
	padding: 0px;
	text-align: left;
}

.post-preview a 
{
	text-decoration: none;
}

.post-preview a .date
{
	font-size: 10pt;
	color: black;
}

.post-preview a .title
{
	font-size: 14pt;
}

.post-preview span
{
	display: block;
}

.post-preview img
{
	width: 100%;
	padding:  8px 0px 0px 0px;
}

.vcenter-helper
{
	display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.vcenter-image
{
    vertical-align: middle;
}

.wide-image
{
	left: 0px;
	background-image: url("../images/TestImage.jpg");
	background-repeat: repeat;
	background-size: 100% auto;
	width: 100%;
	height: 400px;
}

.wide-image h1
{
	text-align: center;
	color: #ffffff;
	font-size: 80px;
}

#site
{
	margin: 0 auto;
	width: 960px;
	min-height: 100%;
	padding: 0px 10px 10px 10px;
}

.pull-quote
{
	color: #cc0000;
	font-size: 26px;
	font-style: italic;
	padding: 20px 10px;
	display: block;
}
 
span.img 
{

}

#blog-pagination
{
	text-align: center;
}

#blog-pagination span
{
	padding-top: 32px;
	display: inline-block;
}

.tag-list
{
	margin: 0px 0px 16px 0px;
}

.tag
{
	display: inline;
}

.tag-header
{
	position: relative;
	top: 2px;
}

.tag-header span
{
	font-size: 20px;
	font-weight: bold;
}

.tag a
{
	background-color: #ffffff;
	text-decoration: none;
	font-size: 12px;
	border-radius: 8px 0px 8px 0px;
	padding: 4px;
}

#tags-container
{
	background-color: #eeeeee;
	padding: 0px;
	margin: 0px;
}

#tags-container div
{
	margin-bottom: 0px;
}

#tags-container hr
{
	border: 0px;
	height: 1px;
	background-color: #dddddd;
}

#tags-title
{
	font-size: 12pt;
	color: #777777;
}

#tags-line
{
	background-color: #e0e0e0;
	height: 4px;
}

#post h1, #post h2, #post h3, #post h4, #post h5, #post h6
{
	font-family: 'Roboto Slab', monospace;
	font-weight: bold;
	font-style: normal;
}

#post-pagination,
#post-pagination .container
{
	padding: 0px;
	margin: 0px;
	font-size: 18pt;
}

#post-pagination-previous
{
	padding-left: 22px;
}

#post-pagination-next
{
	text-align: right;
	padding-right: 22px;
}

#post-pagination-previous a div,
#post-pagination-previous a div span,
#post-pagination-next a div,
#post-pagination-next a div span
{	
	color: inherit;
}

.post-pagination-container
{
	display: inline-block;
	vertical-align: top;
	padding: 0px;
	margin: 0px;
}

.post-pagination-wrapper
{
	display: table-cell;
	vertical-align: middle;
	padding: 0px;
	margin: 0px;
}

#post-pagination-date
{
	font-size: 12pt;
	display: block;
}

#post-pagination-title
{
	
}

.post-pagination-lt
{
	padding-right: 8px;
	font-size: 36pt;
}

.post-pagination-gt
{
	padding-left: 8px;
	font-size: 36pt;
}

::-webkit-scrollbar {  
    width: 6px;  
    height: 6px;
}  
::-webkit-scrollbar-track {  
      background-color: #666666;  
      background-image: linear-gradient( to right,
      	                                 #3a3a3a 0%,
      	                                 #444444 50%);
  }	  
::-webkit-scrollbar-thumb { 
    border-left: solid 1px #a0a0a0;  
    background-color: #efefef; 
}  
::-webkit-scrollbar-thumb:hover {  
    background-color: #aaaaaa;  
}   

.youtube-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.youtube-container iframe,
.youtube-container object,
.youtube-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.game-title-container
{
	text-align: right;
	padding: 48px 24px 0px 24px;
	overflow: hidden;
}

.game-title-container > h1
{
	font-family: 'Roboto Slab', monospace;
	font-weight: bold;
	color: inherit;
	font-size: 48pt;
}

.game-title-container > h2
{
	font-family: 'Roboto Slab', monospace;
	font-weight: bold;
	color: inherit;
}

#remix-rush-container, #remix-rush-container div,
#bitninja-container, #bitninja-container div,
#tochi-container, #tochi-container div
{
	background-color: white;
	color: #404040;
}

#oh-hi-octopi-container, #oh-hi-octopi-container div,
#eat-will-grow-container, #eat-will-grow-container div
{
	background-color: #f5f5f5;
	color: #404040;
}

#oh-hi-octopi-container
{
}

#bitninja-container
{
}

@media screen and (max-width: 700px)
{
	.game-title-container > h1
	{
		font-size: 36pt;
	}

	.game-title-container > h2
	{
		font-size: 16pt;
	}
}

#glsl-studio-container ,
#glsl-studio-container div,
#holotoy-container ,
#holotoy-container div
{
	background-color: white;
	color: #404040;
}

#simul80-container ,
#simul80-container div,
#image-crushr-container ,
#image-crushr-container div
{
	background-color: #f5f5f5;
	color: #404040;
}

#kode80clouds-container, #kode80clouds-container div
{
	background-color: white;
	color: #404040;
}

#pixelrender-container, #pixelrender-container div
{
	background-color: #f5f5f5;
	color: #404040;
}

#kode80ssr-container, #kode80ssr-container div
{
	background-color: white;
	color: #404040;
}

/**************************************************
 *  Mobile
 **************************************************/


@media screen and (max-width: 960px)
{
	#site
	{
		width: auto;
	}	

	.fixed-container
	{
		width: auto;
	}

	#main-image-content-container
	{
		width: auto;
	}
}

@media screen and (max-width: 700px)
{
	#site
	{
		width: auto;
	}

	.fixed-container
	{
		width: auto;
	}

	.column-2
	{
		width: 100%;
	}

	.column-3
	{
		width: 100%;
	}

	.column-4
	{
		width: 100%;
	}

	#main-image-content-container
	{
		width: auto;
		padding-top: 56px;
	}

	#main-image-content
	{
		padding: 24px 22px;
	}

	#main-image-content h1
	{
		font-size: 40pt;
	}

	#main-image-content h2
	{
		font-size: 14pt;
	}
}