body, html {
        background: #cfc;
        color: #555555;
        font-family: Arial, sans-serif;
        font-size: 100%;
        font-weight: normal;
        margin-left: auto;
        margin-right: auto;
/*        max-width: 35em; */
        width: 90%; 
	}

h1,h2,h3,h4,h5,h6 {
	background: #afa;
    color: #0a0;
	clear: both; /* fix photos being covered by headings? */
    font-style: italic;
    margin-left: -4%;
    /* margin-bottom: -0.3em; */
	padding: 0.5em;
	text-shadow: #0f0 0.3em 0.2em 0.2em;
	-webkit-border-radius: 0.3em;
	-moz-border-radius: 0.5em;
	-o-border-radius: 0.5em;
	border-radius: 0.3em;
	-webkit-box-shadow: 0.3em 0.3em 1em #0f0;
	-moz-box-shadow: 0.3em 0.3em 1em #0f0;
	-o-box-shadow: 0.3em 0.3em 1em #0f0;
	box-shadow: 0.3em 0.3em 1em #0f0;
        }

p    {  
        font-size: 1em;
        line-height: 1.2em;
        margin-bottom: -0.5em;
        margin-left: auto;
        margin-right: auto;
        max-width: 35em;
        word-spacing: normal;
        letter-spacing: normal;
        text-indent: 1em; /* just while articleContent is there */
/*        text-align: justify; */
	}

a:hover { background: #cfc;
        color: green;
        text-decoration: underline;
        }

/* Multi column layout for articles */
div.article {
	-webkit-column-width: 20em;
	-moz-column-width: 20em;
	column-count: 20em;
	-webkit-column-gap: 2em;
	-moz-column-gap: 2em;
	column-gap: 2em;
	}
	
/* Make content of Sitemap.xhtml a little larger using child plus sibling selector */
body.sitemap>h2+p, body.sitemap>dl+p 
	{font-size:1.5em;
	text-indent: 0; }

/* This is for images in paragraphs. Make image shrink on narrow displays */
img, object { border: thin solid blue; float: right; margin: 0% 2% 2% 2%; max-width: 100%; max-height: 100%; }

/* Logo special effects */
/*  Credit to stu nicholls | CSS PLaY | two colour text */
h1.split {
	font-size:2em; 
	position:relative; 
	font-family:georgia, "times new roman", serif; 
	height:1em; 
	overflow: hidden; 
	text-shadow: #0f0 0.2em 0.2em 0.4em;
	}

h1.split span.line {
	position:absolute; 
	left:0.5em; top:0.2em;
	color:#00f; 
	height:0.6em; 
	overflow:hidden; 
	border-bottom:5px solid #0f0;
	}

h1.split:before {
	content:attr(title); 
	position:absolute; 
	left:0.5em; top:0.2em; 
	color:#00f;
	}

h1.ln:before {
	color:#aa0;
	}

div#logo a:link { 
	background: #afa;
	color: #0a0;	
	text-decoration: none;
	}

div#logo a:visited { 
	background: #afa;
	color: #0af;	
	text-decoration: none;
	}

div#logo a:hover { 
	background: #afa;
	color: #0a0;	
	text-decoration: none;
	}

div#logo p {
	text-indent: 0;
        text-align: center;
	}

div#logo span#say1 {
	color: #fff;
        background: #cfc;
	}

div#logo span#say2 {
	color: #0a0;
        background: #cfc;
	}

div#logo span#say3 {
	color: #bb0;
        background: #cfc;
	}

/* Use media query to set narrow displays to one column and images as blocks */
@media only screen and (max-width: 480px) {
/*	div.article {
	-webkit-column-count: 1;
	-moz-column-count: 2;
	column-count: 2;
	}
*/	
img,object {
		margin: 10px auto;
		float: none;
		display: block;
		max-width: 100%;
	}
}