@charset "UTF-8";
/* CSS Document */


@font-face{font-family:'MisoLight';src:url('fontface/miso/miso-light-webfont.eot');src:local('?'), url('fontface/miso/miso-light-webfont.woff') format('woff'), url('fontface/miso/miso-light-webfont.ttf') format('truetype'), url('fontface/miso/miso-light-webfont.svg#webfontF29MFFwu') format('svg');font-weight:normal;font-style:normal;}
@font-face{font-family:'MisoRegular';src:url('fontface/miso/miso-webfont.eot');src:local('?'), url('fontface/miso/miso-webfont.woff') format('woff'), url('fontface/miso/miso-webfont.ttf') format('truetype'), url('fontface/miso/miso-webfont.svg#webfontA4ZOCCxS') format('svg');font-weight:normal;font-style:normal;}
@font-face{font-family:'MisoBold';src:url('fontface/miso/miso-bold-webfont.eot');src:local('?'), url('fontface/miso/miso-bold-webfont.woff') format('woff'), url('fontface/miso/miso-bold-webfont.ttf') format('truetype'), url('fontface/miso/miso-bold-webfont.svg#webfontWPKh07R7') format('svg');font-weight:normal;font-style:normal;}


/* background setup */
.background {
    background-repeat:no-repeat;
    /* custom background-position */
    background-position:50% 50%;
    /* ie8- graceful degradation */
    background-position:50% 50%\9 !important;



}

/* fullscreen setup */
html, body {
    /* give this to all tags from html to .fullscreen */
    height:100%;
}
.fullscreen,
.content-a {
    width:100%;
    height:100%;
    overflow:hidden;

	
}
.fullscreen.overflow,
.fullscreen.overflow .content-a {
    height:auto;
    min-height:100%;
}

/* position styles */
.content-a {
    display:table;
	/* border-top: 3px solid #ddd; */
}
.content-b {
	display:table-cell;
    position:relative;
	vertical-align:bottom;
	text-align:left;
	padding:30px;
}


#left {
	width: 33%;
	float: left;
	margin-bottom:15px;
}

#middle {
	width: 33%; 
	float: left;
	margin-bottom:15px;
}

#right {
	width: 33%;
	margin-bottom:15px;
	float: left;
}



	

	
	



/* visual styles */
body{
    margin:0;
	/* background-image:url(http://greyisgood.eu/img/bk2013.png);background-repeat:repeat;background-attachment:fixed; */
    font-family:'MisoLight', 'MisoRegular', Arial, sans-serif;font-size:1.2em;letter-spacing:0.08em;line-height:1.2em;

}

.background {filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
}

.content-a
{background: 
    
    linear-gradient(
      rgba(233, 233, 233, 1), 
      rgba(33, 33, 33, 0.1)
    );}


/*temp fix for padding h2 headings down */
.content-c{padding: 160px 0;}

section {}

.not-fullscreen {
    height:66%;
}

#header{float:left;width:100%;margin:0;padding:30px;clear:both;z-index: 1;}


#header{position:fixed;}


h1{color:#111;font-family:'MisoLight', Arial, sans-serif;letter-spacing:0;font-size:1.6em;font-weight:normal;line-height:1.1em;


-ms-transform: rotate(0.3deg); /* IE 9 */
    -webkit-transform: rotate(0.3deg); /* Chrome, Safari, Opera */
    transform: rotate(0.3deg);

}
.content-b h1{color:#aaa}
h2,h3{font-size:1.2em;letter-spacing:0.08em;line-height:1.2em;font-weight:normal;color:#aaa;}



.grey{color:#aaa;}
a,a:link,a:active,a:visited{font-family:'MisoRegular', arial;color:#111;text-decoration:none;background-color:none;}
a:hover{font-family:'MisoRegular', arial;text-decoration:none;color:#111;background-color:none;border-bottom:#111 2px solid;}


#foot a,#foot a:link,#foot a:active,#foot a:visited{font-family:'MisoLight', arial;color:#111;text-decoration:none;background-color:none;}
#foot a:hover{font-family:'MisoLight', arial;text-decoration:none;color:#111;background-color:none;border-bottom:#111 2px solid;}


ul{list-style-type:none;margin:0;padding:0;}
ul li{list-style-type:none;margin:0;padding:2px 0;}
ul li ul{list-style-type:square;margin:0;padding:0;}
ul li ul li{list-style-type:none;border:0;margin:0;padding:0;}




************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
	
	#wrap {
		width: 94%;
	}
	
	#left {
		width: 50%;
		margin-bottom:15px;
	}
	#middle {
		width: 50%;
		margin-bottom:15px;
		float: right;
	}
	
	#right {
		clear: both;
		margin-bottom:15px;
		width: auto;
		float: none;
	}

	#header{position:fixed;}
}

/* for 700px or less */
@media screen and (max-width: 600px) {

	#left {
		width: auto;
		float: none;
	}
	
	#middle {
		width: auto;
		float: none;
		margin-left: 0px;
	}
	
	#right {
		width: auto;
		float: none;
	}
	
	#header{position:relative;}
	
	 #notes,#boxextrapic,#notespage{
		display: none;
	}

}

/* for 480px or less */
@media screen and (max-width: 480px) {

	#header{position:relative;}

	#right, #notes,#boxextrapic,#notespage{
		display: none;
	}

}