:root {
		/*area colours*/
		--bg-color: #eeeee2;/*not visible if background image is tiled*/
		--post-color: #d9d6c6;
		--navbar-color: #889595;
		--sidebar-color:var(--navbar-color);/* UNUSED??? */
		--box-bg-color: #f4f2e7;
		--underline-color:#c1b8a8;
		--pinnedback-color:#EAE1D0;/* UNUSED??? */
		--footer-color:transparent;
		--notification-color:#EEE2CC;/* UNUSED??? */
		--codeblock-color: var(--navbar-color);/* UNUSED??? */
		--tagcloud-color: var(--codeblock-color);/* UNUSED??? */
		--button-color: #577777;
		/*text colours*/
		--tag-color: #764F2F;/*#616d6e*//* UNUSED??? */
		--code-color: var(--tag-color);/* UNUSED??? */
		--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);/* UNUSED??? */
		--table-border-color:var(--underline-color);/* UNUSED??? */
		--table-evenrow-color:#e3e7e0;/* UNUSED??? */
		--table-head-color:var(--pinnedback-color);/* UNUSED??? */
        
        
        --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 {
		margin-top: 5px;
		margin-bottom:5px;
		display:block;
	 	border-bottom: solid 4px var(--underline-color);
	 	padding-bottom:5px;
	 	font-size:1.4em;}
	 	
	h3 {
		margin-top: 0px;
		margin-bottom:5px;
		/* display:block; */
	 	border-bottom: none;
	 	padding-bottom:3px;
	 	font-size:1.2em;
	 	}
	 	
	h4 {
		margin-top: 3px;
		margin-bottom:3px;
		display:block;
		border-bottom: none;
	 	padding-bottom:3px;
	 	font-size:1.0em;
	 	}

	 	
	 .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 {/* CURRENTLY UNUSED BUT MAY ADD */
		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{/* UNUSED??? */
		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{/* UNUSED??? */
		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;
	}
	
/*
	tr:nth-child(even) {background-color: #f2f2f2}
*/
	thead {/* UNUSED??? */
    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:72%; padding: none; }

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

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

/* text boxes */

/*gallery styles */	
		
.thumbholder {
	margin: auto;
	width:98%;
	background: var(--pinnedback-color);	
	padding:2px;
	/*border:solid 1px #000000;*/
}

.thumbnail  {
	display: inline-block;
	background: var(--post-color);	
	max-width:200px;
	max-height:200px;
	width:25%;
	height:25%;
	padding:0px;
	margin:2px;
	text-align: center;	
	/*border:solid 1px #000000;*/
}

/*NO WAY TO MAKE THE IMAGES CENTER!*/
.thumbnail img {max-width:100%;max-height:100%; border:0;}

.box {width:96%; padding: 5px; background: var(--box-bg-color); margin-bottom: 8px;
		margin-left:1%;
		margin-right: 1%; overflow:auto;}
		
.box img {float: left; 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;}

.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) {


	 .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);}
	
	.porttext {float: left; width:100%;}
	
	.thumbnail  {
	display: inline-block;
	background: var(--post-color);	
	max-width:200px;
	max-height:200px;
	width:100%;
	height:100%;
	padding:0px;
	margin:2px;
	text-align: center;	
	/*border:solid 1px #000000;*/
}
	
	.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...*/
	 	}
}