@font-face {
	font-family: "Gentium";
	src: url('../fonts/gentium/Gentium-Regular.woff');
}

html>body {
	display:flex;
	flex-direction:column;
	background:  #3791E9 url(../images/moon-bg-2.png) no-repeat center 200px;
}
html>bohy>header{
	overflow:auto;
	border-bottom: 2px solid #777;}

body>header>h1 {
	width:148px;
	height:148px;
	float:left;/* This is the line that causes the collapse */
}

html>body>main {flex-grow:1;}

h1, body>header>h1+p, .gentium {
	font-family: "Gentium";
}

body>header>h1+p {
	text-indent:0 !important;
	margin:0.2em;
}

body>header>nav>ul {
	text-align:center;
}

#user-actions {
float:right;
margin-top:0.2em;
margin-bottom:0.8em;
}

body>header>nav {
	clear:right;
}

html>body>footer {
	border-top: 1px solid #000000;
	background-color:#FFFFFF;
	font-size:70%;
}

/* Basic Header/Main/Footer layout complete. Other instructions go below here. */

/* Unqualified elements start. Unqualified elements start. Unqualified elements start. */

h2, h3, h4, h5, h6  {
	padding:0.2em 0.5em;
	font-family: "Gentium", serif;
	text-align:center;
	text-decoration:underline;
	margin:.4em;
}

h1, h2, h3 , h4, h5, h6 {
	font-weight: normal;
}

article, fieldset {
	margin:0 auto;
	background-color:#FFFFFF;
	background-color:rgba(255, 255,255, 0.7);
}

figure {
	display:inline-block;
	margin:1em;
	padding:1em;
	border: 1px solid #000000;
	text-align:center;
	border-radius:5px;
	background-color:##85FF31;
	background-color:rgba(133, 255, 049, 0.4);
}

.credit {
	display:block;
}

#article-floor, .clear {
  clear:both;
}

.left {
	float:left;
}

.right {
	float:right;
}

form {
	overflow:auto;
}

p {
	margin:1em;
	text-indent:1.5em;
}

a {
	color:#000000;
	text-decoration:underline;
}

fieldset {
	margin:0.5em auto;
}
legend {
	margin-left:1em;
}

select, button, input[type='submit'], input[type='reset'] {
	font-weight:bold;
}

button, input[type='submit'], input[type='reset'] {
	padding:.5em 1em;
}

table {
	margin:0.5em auto;
}

table, th ,td {
	border:1px solid #000000;
}

caption, th, td {
	padding:0.1em 0.2em;
}

ol, ul {
	margin:1em;
	list-style-type: none;
}

li {
	margin-top:0.4em;
	margin-bottom:0.4em;
}

pre {
	margin:1em;
}

/* Qualified selectors */

h2>span, h3>span, h4>span, h5>span, h6>span, legend {
	display:inline-block;
	background-color:#FFF391;
	padding:.1em .4em;
}

main>section:nth-of-type(3n+1)>header+div {
	background-color:#FFFFFF;
	background-color:rgba(255, 255, 255, 0.7);
}

main>section:nth-of-type(3n+2)>header+div {
	background-color:#D0FFD0;
	background-color:rgba(212, 255, 255, 0.7);
	background:linear-gradient(to bottom left, rgba(255, 255, 255, 0.7), rgba(212, 255, 255, 0.7));
}

main>section:nth-of-type(3n+3)>header+div {
	background-color:#FFFFFF;
	background-color:rgba(170, 255, 103, 0.7);
	background:linear-gradient(to bottom left, rgba(195, 255, 103, 0.7), rgba(145, 255, 103, 0.7));
}

article.summary {
	margin-bottom:1em;
}

article, section>header+div, h2>span, h3>span, h4>span, h5>span, h6>span, legend {
	border: 1px solid #000000;
	border-radius:5px;
	
}

article, section>header+div, h2>span, h3>span, h4>span, h5>span, h6>span {
	box-shadow: -4px 4px 2px rgba(33,33,33,0.7);
}

main>article, form, div.warning {
	width:96%;
	max-width:1100px;
	margin:1em auto 0;
}

figure>img {
	/*text-align:center;*/
}

div.warning {
	background-color:#FFCCCC;
	background-color:rgba(255, 208,208, 0.7);
	border:2px solid #FF7777;
}

table#edit-entries>tbody>tr>td:first-child, table#edit-entries>tbody>tr>td:last-child, caption {
	text-align:center;
}

body>header a, section#recent-entries a {
	text-decoration:none !important;
}

fieldset#entry-categories {
	width:20%;
	text-align:right;
	float:right;
}

#entry-content {
width:78.5%;
float:left;
}

#publication-data {
clear:both;
}

.file-upload-grouping {
	background-color:#FFFE65;
	background-color:rgba(255,254,101,0.7);
	border:1px solid #D69A65;
	border-radius:5px;
	width:96%;
	margin: .5em auto;
	padding:0.1em 0;
}

.file-upload-grouping>p {
	text-align:center;
	margin:.5em 1em;
}
#file-upload p {
text-indent:0;
}

#file-upload p>label>input[type='text'] {
	display:block;
	width:100%;
	margin-top:0.2em;
}

fieldset>textarea {
	display:block;
	width:96%;
	margin:0 auto .5em;
}

article#entry>h3+ul {
	margin:1em;
	text-align:center;
	
}

article#entry>h3+ul>li {
	display:inline;
	margin:0.4em 0.5em;
}

article>footer, .hint {
	font-size:60%;
}

#toys-and-tools>header, #toys-and-tools>div, #external-links>header, #external-links>div {
width:96%;
margin-left:auto;
margin-right:auto;
}

#toys-and-tools li, #external-links li {
	padding-left:40px;
	text-indent:1em;
}

li.music {
	background: transparent url(../images/music-note.png) no-repeat left top;
}

li.learning {
	background: transparent url(../images/blackboard.png) no-repeat left top;
}

li.html {
	background: transparent url(../images/markup.png) no-repeat left top;
}

div.gallery {
	text-align: center;
}

li.web-tool {
	background: transparent url(../images/web-tools.png) no-repeat left top;
}

li.application {
	background: transparent url(../images/computer.png) no-repeat left top;
}

li.webpage {
	background: transparent url(../images/markup.png) no-repeat left top;
}

li.engineer {
	background: transparent url(../images/engineer.png) no-repeat left top;
}

/* End qualified selectors. End qualified selectors. End qualified selectors. */

/* Begin media query rules. Begin media query rules. Begin media query rules. */

@media (min-width:480px) {

	/* Begin rules fpr laying out the primary header, footer and main elements  */
	body>header>nav>ul>li>a[href="/"]:after {
		content:url(../images/no-blog-icon.png);
	}

	body>header>nav>ul>li>a[href="/"]:hover:after {
		content:url(../images/blog-icon.png);
	}
	
	body>header>nav>ul>li>a[href="/colourcoder/"]:after {
		content:url(../images/no-colourcoder-icon.png);
	}

	body>header>nav>ul>li>a[href="/colourcoder/"]:hover:after {
		content:url(../images/colourcoder-icon.png);
	}

	body>header {
		height:148px;
		background: url(../images/sunrise-bg-4.png) right top no-repeat #EDC390;/*
		background: url(/markup/xml/svg/logos/sp/final/sp.svg) no-repeat top left,*/
	}

	/* Inserted recently */
	body>header>img {
		height: 100%;
	}

	body>header>h1+p {
		float:left;
	}

	body>header>nav {
		padding-right:101px;
	}

	body>header>nav>ul>li {
		display:inline;
		padding-left:5px;
	}

	#necker {
		height:150px; /* Should equal the sum of the height of the header and the header's top and bottom borders */
	}

	#ankler {
		height:2em; /* Must equal height of footer (excluding border). */
	}
	/* End rules fpr laying out the primary header, footer and main elements  */

	#recent-entries {
		overflow:auto;
	}

	article.summary {
		width:48%;
	}

	article.summary:nth-of-type(2n+1) {
		float:left;
		clear:both;
		margin-left:1%;
		margin-right:0;
	}

	article.summary:nth-of-type(2n+2) {
		float:right;
		margin-left:0;
		margin-right:1%;
	}
}

@media (min-width:900px) {
	#recent-entries {
		float:left;
		width:60%;
	}

	#toys-and-tools, #external-links {
		width:40%;
		float:right;
	}

	.file-upload-grouping {
		width:48%;
	}

	.file-upload-grouping:nth-of-type(odd) {
		float:left;
		margin-left:1%;
	}

	.file-upload-grouping:nth-of-type(even) {
		float:right;
		margin-right:1%;
	}

	.file-upload-grouping+p {
		clear:both;
		text-align:center;
	}
}

@media (max-width:479px) {

	/* Begin rules fpr laying out the primary header, footer and main elements  */
	body>header>nav>ul>li {
		margin-top:0.8em;
		margin-bottom:0.8em;
	}
	/* End rules fpr laying out the primary header, footer and main elements  */
	
	section, article.summary {
		width:96%;
		margin-left:auto;
		margin-right:auto;
	}

	main>section>header, main>section>div {
		width:96%;
		margin-left:auto;
		margin-left:auto;
	}

	footer>*, .hint {
		font-size:100%;
	}

	main>footer {
		height:auto;
		overflow:auto;
	}
}

/* End media query rules. End media query rules. End media query rules. */