/* this stylesheet is the essential component layout, organising the main block elements. Minor tweaks and aesthetic positioning are included in appearance.css */
/* two column layout taken from http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm */

body {
	margin:0;
	padding:0;
	border:0;			/* This removes the border around the viewport in old versions of IE */
	width:100%;
	min-width:40ex;}    	/* Minimum width of layout - remove line if not required */

#wrapper {
	max-width: 140ex;
	margin: 0 auto;
	padding: 0 1em;}
	#storyWrapper {
		max-width: 92ex;
		margin: 0 auto;
		padding: 0 1em;}

/* header */
h1 {
	display: inline;
	float: left;}

#nav {
	float: right;}

#headImage {
	clear: both;
	/* min-height: 150px; */
	width: 100%;}

/* column container */
.colmask {
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	clear:both;
	float:left;
	width:100%;			/* width of whole page */
	overflow:hidden;}		/* This chops off any overhanging divs */

/* common column settings */
.colmid, .colleft {
	float:left;
	width:100%;
	position:relative;}
	
.col1, .col2 {
	float:left;
	position:relative;
	padding:0 0 1em 0;
	overflow:hidden;}

/* this fills out the background on the content column */
.col1 {
	padding: 1em 2% 0;
	margin: 0 -2%;
}
	
/* 2 Column (right menu) settings */
.rightmenu .colleft {
	right:28%;}			/* right column width */
	.rightmenu>.story {
		right:0%;}			/* right column width */

.rightmenu .col1 {
	width:68%;			/* left column content width (left column width minus left and right padding) */
	left:30%;}			/* (right column width) plus (left column left padding) */
	.rightmenu>.story>.story {	/* special layout for story page to fill the width */
		width: 92%;
		left: 2%;
		padding: 0 4%;}
		
.rightmenu .col2 {
	width:24%;			/* right column content width (right column width minus left and right padding) */
	left:34%;}			/* (right column width) plus (left column left and right padding) plus (right column left padding) */
	.rightmenu>.story>.storyFoot {
		width: 96%;
		left: 2%;}
		

/* mobile */
@media screen and (max-width: 768px) {

	.rightmenu>.colleft {
		right:0%;}			
	.rightmenu>.colleft>.col1 {	
		width: 96%;
		left: 2%;}
	.rightmenu>.colleft>.col2 {
		width: 96%;
		left: 2%;}
		
}
	

/* footer */
#footer {
	clear:both;
	width:100%;}