@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

@font-face {
    font-family: '06rizer';
    src: url('../fonts/06-bma__-webfont.eot');
    src: url('../fonts/06-bma__-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/06-bma__-webfont.woff2') format('woff2'),
         url('../fonts/06-bma__-webfont.woff') format('woff'),
         url('../fonts/06-bma__-webfont.ttf') format('truetype'),
         url('../fonts/06-bma__-webfont.svg#06bm_rizer_a6') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: '08xpdr';
    src: url('../fonts/08-xpdr1-webfont.eot');
    src: url('../fonts/08-xpdr1-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/08-xpdr1-webfont.woff2') format('woff2'),
         url('../fonts/08-xpdr1-webfont.woff') format('woff'),
         url('../fonts/08-xpdr1-webfont.ttf') format('truetype'),
         url('../fonts/08-xpdr1-webfont.svg#08xpdr01regular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: '08xpdr05';
    src: url('../fonts/08-xpdr5-webfont.eot');
    src: url('../fonts/08-xpdr5-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/08-xpdr5-webfont.woff2') format('woff2'),
         url('../fonts/08-xpdr5-webfont.woff') format('woff'),
         url('../fonts/08-xpdr5-webfont.ttf') format('truetype'),
         url('../fonts/08-xpdr5-webfont.svg#08xpdr05regular') format('svg');
    font-weight: normal;
    font-style: normal;
}


body, html
	{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	position: relative;
	background: #ebd8b5;
	}
 
 body
 	{
	overflow-x: hidden;
 	}

.about .td.top
	{
	background: #352b1f;
	padding-bottom: 128px;
	}

.about .top p
	{
	color: #ebd8b5;
	}


::-webkit-scrollbar { width: 12px; } /* Track */ ::-webkit-scrollbar-track { background: #564735; } /* Handle */ ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: #947d5e; border: 3px solid #564735; } ::-webkit-scrollbar-thumb:window-inactive { background: #564735; }


a, a:link, a:visited, a:active
	{
	border:none;
	outline: none;
	color: #7e6440;
	text-decoration: underline;
	}

a:hover
	{
	color: #b9935e;
	}

.table
	{
	height: 100%;
	width: 100%;
	padding: 8px;
	box-shadow: inset -8px 0 0 #d4b489, inset 0 8px 0 0 #ebd8b5, inset 0 -8px 0 0 #d4b489, inset 8px 0 0 #ebd8b5;
	display: table;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
.tr
	{
	display: table-row;
	}


.td
	{
    display: table-cell;
   	-moz-box-shadow: inset -8px 0 0 #ebd8b5, inset 0 8px 0 0 #d4b489, inset 0 -8px 0 0 #ebd8b5, inset 8px 0 0 #d4b489, inset 16px 16px 0 0 rgba(0,0,0,0.3);
   	-webkit-box-shadow: inset -8px 0 0 #ebd8b5, inset 0 8px 0 0 #d4b489, inset 0 -8px 0 0 #ebd8b5, inset 8px 0 0 #d4b489, inset 16px 16px 0 0 rgba(0,0,0,0.3);
   	box-shadow: inset -8px 0 0 #ebd8b5, inset 0 8px 0 0 #d4b489, inset 0 -8px 0 0 #ebd8b5, inset 8px 0 0 #d4b489, inset 16px 16px 0 0 rgba(0,0,0,0.3);
    padding: 16px;
	}

.td.top
	{
   	-moz-box-shadow: inset -8px 0 0 #ebd8b5, inset 0 8px 0 0 #d4b489, inset 0 -8px 0 0 #ebd8b5, inset 8px 0 0 #d4b489, inset 16px 16px 0 0 rgba(0,0,0,0.3);
    -webkit-box-shadow: inset -8px 0 0 #ebd8b5, inset 0 8px 0 0 #d4b489, inset 0 -8px 0 0 #ebd8b5, inset 8px 0 0 #d4b489, inset 16px 16px 0 0 rgba(0,0,0,0.3);
    box-shadow: inset -8px 0 0 #ebd8b5, inset 0 8px 0 0 #d4b489, inset 0 -8px 0 0 #ebd8b5, inset 8px 0 0 #d4b489, inset 16px 16px 0 0 rgba(0,0,0,0.3);
 	height: 50px;
 	padding: 8px;
	}

.td.middle
	{
	background: #f7e9cf;
	text-align: center;
   	-moz-box-shadow: inset -8px 0 0 #ebd8b5, inset 0 8px 0 0 #d4b489, inset 0 -8px 0 0 #ebd8b5, inset 8px 0 0 #d4b489, inset 16px 16px 0 0 rgba(0,0,0,0.08);
   	-webkit-box-shadow: inset -8px 0 0 #ebd8b5, inset 0 8px 0 0 #d4b489, inset 0 -8px 0 0 #ebd8b5, inset 8px 0 0 #d4b489, inset 16px 16px 0 0 rgba(0,0,0,0.08);
   	box-shadow: inset -8px 0 0 #ebd8b5, inset 0 8px 0 0 #d4b489, inset 0 -8px 0 0 #ebd8b5, inset 8px 0 0 #d4b489, inset 16px 16px 0 0 rgba(0,0,0,0.08);
	}

.td.social
	{
	overflow: hidden;
	text-align: center; 
	background: #d7cbb4;
	text-align: center;
   	-moz-box-shadow: inset -8px 0 0 #ebd8b5, inset 0 8px 0 0 #d4b489, inset 0 -8px 0 0 #ebd8b5, inset 8px 0 0 #d4b489, inset 16px 16px 0 0 rgba(0,0,0,0.04);
   	-webkit-box-shadow: inset -8px 0 0 #ebd8b5, inset 0 8px 0 0 #d4b489, inset 0 -8px 0 0 #ebd8b5, inset 8px 0 0 #d4b489, inset 16px 16px 0 0 rgba(0,0,0,0.04);
   	box-shadow: inset -8px 0 0 #ebd8b5, inset 0 8px 0 0 #d4b489, inset 0 -8px 0 0 #ebd8b5, inset 8px 0 0 #d4b489, inset 16px 16px 0 0 rgba(0,0,0,0.04);
	}

.td.bottom
	{
	background: #222;
	height: 170px;
	max-height: 170px !important;
	text-align: center;
	vertical-align: middle;
	}

.inner-table
	{
	display: table;
	height: 100%;
	width: 100%;
	}

.inner-td
	{
	display: table-cell;
	text-align: center
	}

.portrait
	{
	text-align: center;
   	-moz-box-shadow:  inset 8px 8px 0 0 rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 8px 8px 0 0 rgba(0,0,0,0.3);
    box-shadow: inset 8px 8px 0 0 rgba(0,0,0,0.3);
    image-rendering: optimizeSpeed;             /* FUCK SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated; 				/* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+  */	
	}

.portrait img
	{
	margin-bottom: 64px;
	margin-top: 96px;
	}
	
.name
	{
   	-moz-box-shadow:  inset 8px 0 0 0 rgba(0,0,0,0.3), 0 8px 0 0 rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 8px 0 0 0 rgba(0,0,0,0.3), 0 8px 0 0 rgba(0,0,0,0.3);
    box-shadow: inset 8px 0 0 0 rgba(0,0,0,0.3), 0 8px 0 0 rgba(0,0,0,0.3);
	font-family: '06rizer', 'Press Start 2P';
	font-size: 48px;
	color:  #fff;
	padding: 16px 16px 8px 16px;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: none;
	}

.inner-td span
	{
	color: #fff;
	}

.planet, .species, .likes
	{
	border-bottom: 8px solid rgba(0,0,0,0.2);
	font-family: '08xpdr05', 'Press Start 2P';
	font-size: 32px;
	padding: 8px 16px 8px 16px;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: none;
	}

.planet
	{
	padding-top: 16px;
	}

.inner-td span
	{
	color: #fff;
	}

p, h1, h2, h3
	{
	text-align: left;
	max-width: 770px;
	margin: 0 auto 0 auto;
	}

.name p, .social p
	{
	text-align: center !important;
	}
	
.about p, .about h1, .about h3
	{
	font: 32px '08xpdr', 'Press Start 2P', 'Verdana';
/*	font-size-adjust: 0.4;      This is to adjust the alterantive font to match the prefered font but it makes the prefered font smaller in FF so let's disable it for now*/
	-webkit-font-smoothing: none;
	-moz-osx-font-smoothing: grayscale;
	margin-bottom: 32px;
	padding: 16px;
	}

.about h1
	{
	text-transform: uppercase;
	letter-spacing: 0px;
	font-size: 56px;
	color: #fff;
	margin: 64px auto 16px auto;
	}

.about h3
	{
	text-transform: uppercase;
	letter-spacing: 4px;
	font-size: 40px;
	color: #fff;
	margin: 24px auto 8px auto;
	}

.middle p, .social p
	{
	font: 32px '08xpdr', 'Press Start 2P', 'Verdana';
/*	font-size-adjust: 0.4;      This is to adjust the alterantive font to match the prefered font but it makes the prefered font smaller in FF so let's disable it for now*/
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: none;
/*	margin-bottom: 32px; */
	padding: 16px;
	color: #9e7d50;
	text-align: center;	
	}

.social p
	{
	margin-bottom: 16px;
	text-transform: uppercase;
	text-shadow: 0px 4px 0px #f3ead8;
	color: #7d7564;
	}

.social a
	{
	display: inline-block;
	width: 128px;
	height: 128px;
	margin: 0 8px 16px 8px;
	background-image: url('../gfx/social-sprite.png');
	}

.social a span
	{
	display: none;
	}

.social a.soc-facebook
	{
	background-position: -128px 0px;
	}

.social a.soc-instagram
	{
	background-position: -256px 0px;
	}

.social a.soc-twitter:active
	{
	background-position: 0px -128px;
	}

.social a.soc-facebook:active
	{
	background-position: -128px -128px;
	}

.social a.soc-instagram:active
	{
	background-position: -256px -128px;
	}

.middle img
	{
	margin: 0;
	}


/********************** NAVIGATION **********************/

.navigation
	{
    list-style: none;
    background: #ebd8b5;
    width: 110px;
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    margin-left: -110px;
	}


.navigation::-webkit-scrollbar { width: 0px; } /* Track */ .navigation::-webkit-scrollbar-track { background:transparent; } /* Handle */ .navigation::-webkit-scrollbar-thumb { -webkit-border-radius: 0px; border-radius: 0px; background: transparent; border: 0px solid transparent; } .navigation::-webkit-scrollbar-thumb:window-inactive { background: transparent; }

.wrap
	{
    transition: margin-left 0.2s;
	margin-left: -110px;	
	height: 100%;
	padding-left: 110px;
	z-index: 1;
	position:relative;
	max-width: 100%;

	}

.nav-trigger
	{
    position: absolute;
    clip: rect(0, 0, 0, 0);
	}

label[for="nav-trigger"]
	{
	text-indent: -9999px;
    position: absolute;
    z-index: 22;
    cursor: pointer;
    background-image: none;
    background-size: contain;
    background-color: #ebd8b5;
    border-bottom: 8px solid #d4b489;
    width: 84px;
    height: 80px;
    margin-left: 8px;
	}

.nav-trigger:checked + label
	{
    margin-left: 118px;
    transition: margin-left 0.2s;
	}
	
label span
	{
	height: 72px;
	margin-top: 8px;
	display: block;
	border-right: 8px solid #d4b489;
	margin-right: -8px;
	background: url('../gfx/hamburger-x.png') 20px 12px no-repeat;
    transition: background-position 0.4s;
	}

.nav-trigger:checked ~ label span
	{
	background: url('../gfx/hamburger-x.png') -80px 12px no-repeat;
    transition: background-position 0.4s;
	}

.nav-trigger:checked ~ .wrap
	{
    margin-left: 0;
    transition: margin-left 0.2s;
	}

.nav-trigger + label, .wrap
	{
    transition: margin-left 0.2s;
	}

.navigation li a span
	{
	display: inline-block;
	background-image: url('../gfx/menu-sprite-big.png');
	background-repeat: no-repeat;
	text-indent: -9999px;
	height: 54px;
	width: 42px;
	margin: auto;
	margin-top: 8px;
	}

.navigation li a
	{
	display: block;
	width: 100%;
	height: 100%;
    transition: all 0.4s;
    background-color: transparent;
	}


.navigation li a:hover
	{
	background-color: #7a664c;
    transition: all 0.4s;
	}

.navigation li
	{
	margin: 0;
	padding: 0;
	height: 72px;
	border-bottom: 8px solid #ebd8b5;
	text-align: center;
	background: #d4b489;
	}
	
ul.navigation li.home a span{background-position: 0px 0px;}
ul.navigation li.about a span{background-position: -42px 0px;}
ul.navigation li.pitox a span{background-position: -84px 0px;}
ul.navigation li.blorb a span{background-position: -126px 0px;}
ul.navigation li.wobbi a span{background-position: -168px 0px;}
ul.navigation li.dopio a span{background-position: -210px 0px;}
ul.navigation li.zozak a span{background-position: -252px 0px;}
ul.navigation li.slonk a span{background-position: -294px 0px;}
ul.navigation li.lolob a span{background-position: -336px 0px;}
ul.navigation li.pingl a span{background-position: -378px 0px;}
ul.navigation li.tilzy a span{background-position: -420px 0px;}
ul.navigation li.gommi a span{background-position: -462px 0px;}
ul.navigation li.imoio a span{background-position: -504px 0px;}
ul.navigation li.ziroc a span{background-position: -546px 0px;}

.home ul.navigation li.home a span{background-position: 0px -54px;}
.about ul.navigation li.about a span{background-position: -42px -54px;}
.pitox ul.navigation li.pitox a span{background-position: -84px -54px;}
.blorb ul.navigation li.blorb a span{background-position: -126px -54px;}
.wobbi ul.navigation li.wobbi a span{background-position: -168px -54px;}
.dopio ul.navigation li.dopio a span{background-position: -210px -54px;}
.zozak ul.navigation li.zozak a span{background-position: -252px -54px;}
.slonk ul.navigation li.slonk a span{background-position: -294px -54px;}
.lolob ul.navigation li.lolob a span{background-position: -336px -54px;}
.pingl ul.navigation li.pingl a span{background-position: -378px -54px;}
.tilzy ul.navigation li.tilzy a span{background-position: -420px -54px;}
.gommi ul.navigation li.gommi a span{background-position: -462px -54px;}
.imoio ul.navigation li.imoio a span{background-position: -504px -54px;}
.ziroc ul.navigation li.ziroc a span{background-position: -546px -54px;}

.home ul.navigation li.home, .about ul.navigation li.about, .pitox ul.navigation li.pitox, .blorb ul.navigation li.blorb, .wobbi ul.navigation li.wobbi, .dopio ul.navigation li.dopio, .zozak ul.navigation li.zozak, .slonk ul.navigation li.slonk, .lolob ul.navigation li.lolob, .pingl ul.navigation li.pingl, .tilzy ul.navigation li.tilzy, .gommi ul.navigation li.gommi, .imoio ul.navigation li.imoio, .ziroc ul.navigation li.ziroc
	{
	background: #7a664c;
	}


a.button
	{
	width: 340px;
	height: 88px;
	display: block;
	margin: 16px auto 64px auto;
	background: url('../gfx/app-store-button.png') center top no-repeat;
	cursor:pointer !important;
	}

a.button:active, a.button:hover
	{
	background: url('../gfx/app-store-button.png') center -88px no-repeat;
	}
	
a.button span
	{
	display: none;
	}

.logo
	{
	cursor: pointer;
	}

a.button.disabled, a.button.disabled:hover, a.button.disabled:active
	{
	background: url('../gfx/app-store-button-disabled.png') center top no-repeat;
	}

.td.start
	{
	background: #352b1f url('../gfx/large-bg.png') center -40px no-repeat;
	}

.poster
	{
	min-height: 1143px;
	background: url('../gfx/big-front.png') center 97px no-repeat;
	}
	
@media (max-width: 900px)
{

	.poster
		{
		min-height: 782px;
		background: url('../gfx/big-front.png') center 67px no-repeat;
		background-size: 980px;
		}


}
	
@media (max-width: 600px)
{

	.td.start
		{
		background: #352b1f url('../gfx/large-bg.png') center -20px no-repeat;
		background-size: 800px;
		}

	.poster
		{
		min-height: 361px;
		background: url('../gfx/big-front.png') center 47px no-repeat;
		background-size: 420px;
		}
	
	.table
		{
		padding: 4px;
		box-shadow: inset -4px 0 0 #d4b489, inset 0 4px 0 0 #ebd8b5, inset 0 -4px 0 0 #d4b489, inset 4px 0 0 #ebd8b5;
		}
		
	.td
		{
		display: table-cell;
		-moz-box-shadow: inset -4px 0 0 #ebd8b5, inset 0 4px 0 0 #d4b489, inset 0 -4px 0 0 #ebd8b5, inset 4px 0 0 #d4b489, inset 8px 8px 0 0 rgba(0,0,0,0.3);
		-webkit-box-shadow: inset -4px 0 0 #ebd8b5, inset 0 4px 0 0 #d4b489, inset 0 -4px 0 0 #ebd8b5, inset 4px 0 0 #d4b489, inset 8px 8px 0 0 rgba(0,0,0,0.3);
		box-shadow: inset -4px 0 0 #ebd8b5, inset 0 4px 0 0 #d4b489, inset 0 -4px 0 0 #ebd8b5, inset 4px 0 0 #d4b489, inset 8px 8px 0 0 rgba(0,0,0,0.3);
		padding: 8px;
		}

	.td.middle, .td.social
		{
	   	-moz-box-shadow: inset -4px 0 0 #ebd8b5, inset 0 4px 0 0 #d4b489, inset 0 -4px 0 0 #ebd8b5, inset 4px 0 0 #d4b489, inset 8px 8px 0 0 rgba(0,0,0,0.08);
	   	-webkit-box-shadow: inset -4px 0 0 #ebd8b5, inset 0 4px 0 0 #d4b489, inset 0 -4px 0 0 #ebd8b5, inset 4px 0 0 #d4b489, inset 8px 8px 0 0 rgba(0,0,0,0.08);
	   	box-shadow: inset -4px 0 0 #ebd8b5, inset 0 4px 0 0 #d4b489, inset 0 -4px 0 0 #ebd8b5, inset 4px 0 0 #d4b489, inset 8px 8px 0 0 rgba(0,0,0,0.08);
		}


	.td.top
		{
		-moz-box-shadow: inset -4px 0 0 #ebd8b5, inset 0 4px 0 0 #d4b489, inset 0 -4px 0 0 #ebd8b5, inset 4px 0 0 #d4b489, inset 8px 8px 0 0 rgba(0,0,0,0.3);
		-webkit-box-shadow: inset -4px 0 0 #ebd8b5, inset 0 4px 0 0 #d4b489, inset 0 -4px 0 0 #ebd8b5, inset 4px 0 0 #d4b489, inset 8px 8px 0 0 rgba(0,0,0,0.3);
		box-shadow: inset -4px 0 0 #ebd8b5, inset 0 4px 0 0 #d4b489, inset 0 -4px 0 0 #ebd8b5, inset 4px 0 0 #d4b489, inset 8px 8px 0 0 rgba(0,0,0,0.3);
		padding: 4px;
		}
	
	.portrait
		{
		text-align: center;
	   	-moz-box-shadow:  inset 4px 4px 0 0 rgba(0,0,0,0.3);
	    -webkit-box-shadow: inset 4px 4px 0 0 rgba(0,0,0,0.3);
	    box-shadow: inset 4px 4px 0 0 rgba(0,0,0,0.3);
		}

	.td.bottom
		{
		height: 85px;
		max-height: 130px !important;
		}

	.td.bottom img
		{
		width: 66px;
		height: auto;
		}
	
	.name
		{
		font-size: 24px;
		padding: 8px 8px 4px 8px;
		-moz-box-shadow:  inset 4px 0 0 0 rgba(0,0,0,0.3), 0 4px 0 0 rgba(0,0,0,0.3); !important;
		-webkit-box-shadow: inset 4px 0 0 0 rgba(0,0,0,0.3), 0 4px 0 0 rgba(0,0,0,0.3); !important;
		box-shadow: inset 4px 0 0 0 rgba(0,0,0,0.3), 0 4px 0 0 rgba(0,0,0,0.3); !important;
		border-bottom-width: 4px !important;
		}
	
	.planet, .species, .likes
		{
		border-bottom: 4px solid rgba(0,0,0,0.2);
		font-size: 16px;
		padding: 4px 8px 4px 8px;
		}

	.planet
		{
		padding-top: 8px;
		}
	
	.portrait img
		{
		width: auto;
		height: 128px;
		margin-bottom: 32px;
		margin-top: 48px;
		}
	
	.portrait
		{
		background-size: 440px !important;	
		}

	.about p, .middle p, .social p
		{
		font: 16px '08xpdr', 'Press Start 2P', 'Verdana';
/*	font-size-adjust: 0.4;      This is to adjust the alterantive font to match the prefered font but it makes the prefered font smaller in FF so let's disable it for now*/
		margin-bottom: 16px;
		padding: 8px;
		}

	.about .td.top
		{
		padding-bottom: 32px;
		}

	.about h1
		{
		padding: 8px;
		padding-top: 32px;
		font-size: 32px;
		margin: 16px auto 0px auto;
		}
	
	.about h3
		{
		padding: 8px;
		letter-spacing: 2px;
		font-size: 20px;
		margin: 16px auto 0px auto;
		}

	.social p
		{
		margin-bottom: 8px;
		text-shadow: 0px 2px 0px #f3ead8;
		}
	
	.middle img
		{
		margin: 0;
		}

	.middle img.arrow
		{
		width: 36px;
		height: auto;
		}

	a.button
		{
		width: 170px;
		height: 44px;
		display: block;
		margin: 8px auto 32px auto;
		background: url('../gfx/app-store-button-small.png') center top no-repeat;
		cursor: pointer;
		}

	a.button:active, a.button:hover
		{
		background: url('../gfx/app-store-button-small.png') center -44px no-repeat;
		}

	a.button.disabled, a.button.disabled:hover, a.button.disabled:active
		{
		background: url('../gfx/app-store-button-disabled-small.png') center top no-repeat;
		}

	.social a
		{
		display: inline-block;
		width: 64px;
		height: 64px;
		margin: 0 4px 8px 4px;
		background-image: url('../gfx/social-sprite-small.png');
		}
	
	.social a span
		{
		display: none;
		}
	
	.social a.soc-facebook
		{
		background-position: -64px 0px;
		}
	
	.social a.soc-instagram
		{
		background-position: -128px 0px;
		}
	
	.social a.soc-twitter:active
		{
		background-position: 0px -64px;
		}
	
	.social a.soc-facebook:active
		{
		background-position: -64px -64px;
		}
	
	.social a.soc-instagram:active
		{
		background-position: -128px -64px;
		}

	.navigation
		{
		width: 55px;
		margin-left: -55px;
		}
	
	.wrap
		{
		padding-left: 55px;
		margin-left: -55px;
		}

	label[for="nav-trigger"]
		{

	    margin-left: 4px;
	    border-bottom: 4px solid #d4b489;
	    width: 42px;
	    height: 40px;
		}

	.nav-trigger:checked + label
		{
		margin-left: 59px;
		}
	
	label span
		{
		height: 36px;
		margin-top: 4px;
		border-right: 4px solid #d4b489;
		margin-right: -4px;
		background: url('../gfx/hamburger-x.png') 10px 6px no-repeat;
		background-size: 70px;
		}

	.nav-trigger:checked ~ label span
		{
		background: url('../gfx/hamburger-x.png') -40px 6px no-repeat;
		background-size: 70px;
		}

	.nav-trigger:checked ~ .site-wrap
		{
	    margin-left: 0px;
		}

	.navigation li a span
		{
		background-image: url('../gfx/menu-sprite.png');
		height: 36px;
		width: 28px;
		margin-top: 0px;
		}

	.navigation li
		{
		height: 36px;
		border-bottom: 4px solid #ebd8b5;
		}
		
	ul.navigation li.home a span{background-position: 0px 0px;}
	ul.navigation li.about a span{background-position: -28px 0px;}
	ul.navigation li.pitox a span{background-position: -56px 0px;}
	ul.navigation li.blorb a span{background-position: -84px 0px;}
	ul.navigation li.wobbi a span{background-position: -112px 0px;}
	ul.navigation li.dopio a span{background-position: -140px 0px;}
	ul.navigation li.zozak a span{background-position: -168px 0px;}
	ul.navigation li.slonk a span{background-position: -196px 0px;}
	ul.navigation li.lolob a span{background-position: -224px 0px;}
	ul.navigation li.pingl a span{background-position: -252px 0px;}
	ul.navigation li.tilzy a span{background-position: -280px 0px;}
	ul.navigation li.gommi a span{background-position: -308px 0px;}
	ul.navigation li.imoio a span{background-position: -336px 0px;}
	ul.navigation li.ziroc a span{background-position: -364px 0px;}

	.home ul.navigation li.home a span{background-position: 0px -36px;}
	.about ul.navigation li.about a span{background-position: -28px -36px;}
	.pitox ul.navigation li.pitox a span{background-position: -56px -36px;}
	.blorb ul.navigation li.blorb a span{background-position: -84px -36px;}
	.wobbi ul.navigation li.wobbi a span{background-position: -112px -36px;}
	.dopio ul.navigation li.dopio a span{background-position: -140px -36px;}
	.zozak ul.navigation li.zozak a span{background-position: -168px -36px;}
	.slonk ul.navigation li.slonk a span{background-position: -196px -36px;}
	.lolob ul.navigation li.lolob a span{background-position: -224px -36px;}
	.pingl ul.navigation li.pingl a span{background-position: -252px -36px;}
	.tilzy ul.navigation li.tilzy a span{background-position: -280px -36px;}
	.gommi ul.navigation li.gommi a span{background-position: -308px -36px;}
	.imoio ul.navigation li.imoio a span{background-position: -336px -36px;}
	.ziroc ul.navigation li.ziroc a span{background-position: -364px -36px;}
}