:root {
		/*area colours*/
		--bg-color: #eeeee2;/*not visible if background image is tiled*/
		--post-color: #d9d6c6;
		--navbar-color: #889595;
		--sidebar-color:var(--navbar-color);
		--box-bg-color: #f4f2e7;
		--underline-color:#c1b8a8;
		--pinnedback-color:#EAE1D0;
		--footer-color:transparent;
		--notification-color:#EEE2CC;
		--codeblock-color: var(--navbar-color);
		--tagcloud-color: var(--codeblock-color);
		--button-color: #577777;
		/*text colours*/
		--tag-color: #764F2F;/*#616d6e*/
		--code-color: var(--tag-color);
		--button-text-color: #ffffff;
		--text-default-color:#344444;
		/*link colours*/
		--hover-color:#ffffff;
		--visited-color:#6E5948;
		--link-color:var(--text-default-color);
		--navbar-link-color:#f4f2e7;
		/*table colours*/
		--table-bg-color:var(--codeblock-color);
		--table-border-color:var(--underline-color);
		--table-evenrow-color:#e3e7e0;
		--table-head-color:var(--pinnedback-color);
        
        
        --widmax:var(1000px);
	}
	
	html, body {
		font-family:'linux_biolinum_oregular', Optima, 'Palatino Linotype','Book Antiqua', Palatino, serif;
		margin:0px; 
		padding:0px;
		height: 100%; 
		z-index: -1;
		background-color:var(--bg-color);
		color:var(--text-default-color);
		/*overflow-x: hidden;*/
		/*deals with the viewport width including this scroll bar so kill it!*/
		}
		
	
	a {
	color:var(--link-color);
	text-decoration: none;
	}
	
	/*this can be put back if overridden with a specific a visited in button but does that work?*/
	/*a:visited {color:var(--visited-color);}*/
	
	a:hover {color:var(--hover-color);} /*order these specified may matter!*/
	
	p a {text-decoration: underline;}
	 
	h1 {
		margin-top: 20px;
		margin-bottom:15px;
	 	display:block;
	 	border-bottom: solid 4px var(--underline-color);
	 	padding-bottom:5px;
	 	font-size:1.6em;
	 	width:98%;
	 	margin-left:1%;
	 	margin-right:1%;
	 	}
	 	
	h2 {
		display:block;
	 	border-bottom: solid 4px var(--underline-color);
	 	padding-bottom:5px;
	 	font-size:1.4em;}
	 	
	h3 {
		display:block;
	 	border-bottom: none;
	 	padding-bottom:3px;
	 	font-size:1.2em;
	 	}
	 	
	h4 {
		display:block;
		border-bottom: none;
	 	padding-bottom:3px;
	 	font-size:1.0em;
	 	}
		
	.bgimg{/*BACKGROUND IMAGE IS INJECTED HERE FROM LAYOUT -------------->>no it isn't---------needs resomethinging*/

		background-size: 70%;
		width: 100%;
		height: 100vw;
		position: absolute;
		top: 0;
		left: 0;
		background-repeat:no-repeat;
		}
		
	.bgimg::before {
		z-index: 1;
		content: "";
		width: 70vw;
		height: 70vw;
		position: absolute;
		top: 0;
		left: 0;
		background-image: -webkit-linear-gradient(top, transparent 88%, var(--bg-color) 98%), -webkit-linear-gradient(left, transparent 88%, var(--bg-color) 98%);

		}

	 	
	 .wrapper {
		width: 80%;
		margin: 0 auto;
	 	max-width:1000px;
	 	font-size:1.1em;
	 	background-color: var(--post-color);
	 	padding: 0;
	 	overflow: auto;
	 	}

	 .header { width: 80%;
		padding-right: 0%;
		padding-left: 0%;
		max-width:1000px;
		margin: 0 auto;
	 	height: auto;
	 	overflow: auto;
	 	background-color: var(--post-color);}

	 .header img {width:100%;
					height: auto;}
	
	.navbar {
		width: 80%;
		max-width:1000px;
		margin: 0 auto;
		
	 	height: auto;
	 	overflow: auto;
	 	opacity: 0.8;
	 	background-color: var(--navbar-color);
	 	font-size: 1.2em; 
	 	}
	 
	.navbar li {
		display: inline;
	 	list-style-type: none;
	 	margin: 2%;}
	 			
	.navbar ul {
		text-align: center;
		margin-left:-7%;}
	 			
	.navbar a {
		text-decoration:none;
		font-weight:bold;
		color:var(--navbar-link-color);}
	 
	.navbar a:hover {color:var(--hover-color);}
		
	.maintext {/*what is this actually for?----------------------good question*/
		float: left;
		width:100%;
	 	padding-left:0%;
	 	padding-right:0%;
	 	clear:both;
	 	}
	
	
				 
	.post{
		background: var(--post-color);
		
		width:90%;
		padding-left:5%;
	 	padding-right:5%;
	 	padding-top:1em;
	 	padding-bottom:1em;
		margin-bottom: 20px;
		}
		
	.post img {max-width:100%; height: auto; margin:0;}
	
/*------------------------------------------------------------*/



	aside{
		background: var(--sidebar-color);
		float: left;
		width: 100%;
		height: auto;
		padding: 3%;
		position:relative;
		opacity: 0.8;
		overflow: hidden;
	}

	aside p.tagline{
		font-size: 1.2em;
		line-height: 1.2;
	}

	aside ul{
		list-style:none;
		font-size: 1.2em;
	}

/*
///what should this be really???
*/
	aside ul li a{
		display:inline-block;
		padding:0 3px;
		margin:2px 0 2px 10px;
	}

	aside p.author{
		position: bottom;
		font-size: 1.0em;
	}
	
	/*-------- this stuff should be cascaded! --------------*/
	
	.date {
	font-family: courier,"courier new", courier code, monospace;
	font-style: italic;
	font-size: 0.85em;
	margin-right:3px;
	color:var(--hover-color);
	}
	
	code {
		font-family: courier code, courier, "courier 10 pitch","courier new", monospace;
		opacity: 1.0;
		background-color:var(--codeblock-color);
		margin-left: 2em;
		height: auto;
		padding: 0.5em;
		color: var(--code-color);
		display:inline-block;
		font-size: 0.9em; 
		overflow: auto;
	}
	
		table {
		opacity: 1.0;
		background-color:var(--table-bg-color);
		height: auto;
/*
		padding: 0.2em;
		color: var(--code-color);
*/
		display:inline-block;
		font-size: 0.9em;
		overflow: auto;
		border-collapse: collapse;
	}
	th, td{
    border: 2px solid var(--table-border-color);
    padding: 0.2em;
	}
/*
	tr:nth-child(even) {background-color: #f2f2f2}
*/
	thead {
    background: var(--table-head-color);
	}
	tr:nth-child(2n+0) {
    background: var(--table-evenrow-color);
	}
	
	a.footnote-ref { 
/*
	font-size: 2em; 
*/
	}
	a.footnote-backref { 
/*
	font-size: 0.9em;
*/
	}
	
	
/* ---------------------------------  */
	 
	.footer {width: 94%;
	 	opacity: 0.8;
	 	text-align: center;
	 	background-color: var(--footer-color);
	 	float:left;
	 	padding:3%;}
	 			
/*
	.footer p {margin: 0 auto;
	 	text-align: center;}
*/
	 			
	 

.linkbutton {padding: 6px;
			background: var(--button-color);
			color: var(--button-text-color) !important;
			text-decoration:none !important;
			font-weight:bold !important;
			font-size:1.2em;
			border-radius: 5px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;}
	.linkbutton a:visited {
		color: var(--button-text-color);
	}

	.butleft {float: left;}
	.butright {float: right; }
	
/*
	.linkbutton a {
		color: var(--button-text-color);
	}
	
	.linkbutton a:visited {
		color: var(--button-text-color);
	}
	
	.linkbutton a:hover {
		color: var(--hover-color);
	}
*/

/*portfolio styles */

.holder {float:left; width:98%; margin-left:1%; margin-right:1%; margin-bottom: 8px; background: #F4EFE6;}

.porttext {float: right; width:48%; padding: 1%; }

.holder img {float: left; width:50%; max-width:500px; border:0;}

.holder h4 {margin: 0; font-size:1.2em;}

/*I think this is duplicated above
  .linkbutton {padding: 6px; background: #BAA291; color: #ffffff !important; 				text-decoration:none !important;
 font-weight:bold !important; font-size:1.2em;
 border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;}*/

/* text boxes */

.box {width:96%; padding: 1%; background: var(--box-bg-color); margin-bottom: 10px;
		margin-left:1%;
		margin-right: 1%; overflow:auto;}
		
.box img {float: left; width:49%; border:0; margin-right:1%; margin-bottom:1%;}

.boxtt {width:96%; padding: 1%; background: var(--box-bg-color); margin-bottom: 10px;
		margin-left:1%;
		margin-right: 1%; overflow:auto;}
		
.boxtt img {float: left; max-width:32.3%; max-height:25%; border:0; margin-right:1%; margin-bottom:1%;}

ul.no-bullets {
  list-style-type: none; /* Remove bullets */
}
						
/* styles for screens below 1100 wide /////////////////////////////////////////*/
@media only screen and (max-width : 1100px) { 




	 	
	.wrapper {width: 70%;
	 	
	 	max-width:740px;
	 	font-size:1.1em;
	 
	 	}
	 .navbar, .header {width: 70%;
	 	
	 	max-width:740px;}
	 		
/*portfolio styles */

.holder {float:left; width:96%; margin-bottom: 8px; border-bottom: 1px solid #C9BAA3; padding: 1%; text-align: center;}

.porttext {float: none; width:100%; max-width:500px; padding-left: 0; padding-right: 0; padding-top: 4px; text-align: left; margin: 0 auto;}

.holder img {float: none; width:100%; max-width:500px;}
.holder h4 {margin: 0; font-size:1.3em;}
				
}

/* styles for screens below 700 wide /////////////////////////////////////////*/

@media only screen and (max-width : 700px) {

/*
	.maintext {padding-top:15px}
*/
	 .wrapper, .navbar, .header {
			width: 98%;
	 		padding:0;
	 		}
	 
	 .navbar li {
				font-size: 1.4em;}
	 
		
	 .bgimg {/*BACKGROUND IMAGE IS INJECTED HERE FROM LAYOUT*/
		background-image: none!important;/*needed to override style injection priority...*/
	 	}
}	 		
		
/* styles for screens below 500 wide /////////////////////////////////////////*/
	
@media only screen and (max-width : 500px) { 

	body, html { background: url('') var(--bg-color);}
	
	.wrapper, .navbar {width: 98%;
	 		margin-left:1%;
	 		margin-right:1%;
	 		float: right;
	 		}
	  .navbar li {margin: 3%;}		
	
	 .bgimg {/*BACKGROUND IMAGE IS INJECTED HERE FROM LAYOUT*/
		background-image: none!important;/*needed to override style injection priority...*/
	 	}
}