/* Default media */
html, body { scroll-behavior: smooth; }

body
{
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 12px;
	color: #666;
	line-height: 1.5em;
	letter-spacing: 1px;
	text-wrap: break-word;
	margin: 0;
	padding: 0;
}

a, a:link, a:visited, a:active
{
	color: #333;
	text-decoration: none;
	font-weight: 500;
}

a:hover
{
	color: #74ae18;
	text-decoration: none;
}

img { border: none; }

b { font-weight: 600; }

ul { padding: 0 0 20px 11px; }

li { padding: 3px 0; }

h1
{
	color: #74ae18;
	font-size: 3em;
	line-height: 1.2em;
	font-weight: 300;
	margin: 0 0 30px 0;
	letter-spacing: 1px;
}

h2
{
	color: #74ae18;
	font-size: 2.4em;
	line-height: normal;
	font-weight: 300;
	margin: 0 0 1em 0;
	letter-spacing: 1px;
}

h3
{
	color: #74ae18;
	font-size: 1.8em;
	line-height: normal;
	font-weight: 300;
	margin: 5px 0;
	letter-spacing: 1px;
}

h4
{
	color: #74ae18;
	font-size: 1.5em;
	line-height: normal;
	font-weight: 300;
	margin: 3px 0;
	letter-spacing: 1px;
}

h4 a, h4 a:link, h4 a:visited, h4 a:active
{
	color: #74ae18;
	text-decoration: none;
	font-weight: 300;
}

h4 a:hover
{
	color: #333;
	text-decoration: none;
}

h5
{
	color: #74ae18;
	font-size: 1em;
	line-height: normal;
	font-weight: 300;
	margin: 0 0 1em 0;
	letter-spacing: 1px;
}

h6
{
	color: #74ae18;
	font-size: .7em;
	line-height: normal;
	font-weight: 300;
	margin: 0 0 1em 0;
	letter-spacing: 1px;
}

.hdgrey { color: #000; font-size: 1.1em; font-weight: 500; }

.hdgreen { color: #74ae18; font-size: 1.1em; }


/* Layout */
#canvas
{	
	width: 90%;
	margin: 0 auto;
	max-width: 950px;
}

#fsctop
{
	color: #CCC;
	font-size: 1.4em;
	font-weight: 500;
	line-height: 2.8em;
	text-align: center;
	border-bottom: 1px #e1e1e1 solid;
	margin-bottom: 10px;
}

#fsctop a, #fsctop a:link, #fsctop a:visited, #fsctop a:active { color: #CCC; }

#fsctop a:hover { color: #74ae18; }

.colright
{
	width: 70%;
	margin-left: 30%;
}

.contentcol
{
	width: 100%;
	margin: 0;
	padding: 0;
	display: inline-block;
}

.content3col
{
	float: left;
	width: 30%;
	margin: 0 5% 0 0;
	padding: 0;
}

.content3col:last-child { margin: 0; }

.projects-hd { float: left; width: 50%; }

.projects-hd img { width: 76px; height: 44px; display: block; float: left; }

.projects-menu { float: right; width: 312px; }

.projects-list
{
	width: 100%;
	clear: both;
	display: inline-block;
	margin-bottom: 10px;
}

.projects-icon { width: 8%; height: 40px; float: left; margin: 5px 1%; }

.projects-txt { width: 85%; float: left; margin-right: 5%; }
.projects-txt p { font-size: 1.2em; margin-top: .5em; }

.projects-nav { width: 52px; height: 30px; float: left; }

.about-txt p, .about-txt li, .contact-txt p { font-size: 1.2em; }

.icon-ci, .icon-dm, .icon-eve, .icon-new, .icon-post, .icon-misc { width: 100%; height: 100%; display: block; }

a.icon-ci, a.icon-ci:link, a.icon-ci:visited, a.icon-ci:active, a.icon-ci:hover, a.icon-dm, a.icon-dm:link, a.icon-dm:visited, a.icon-dm:active, a.icon-dm:hover, a.icon-eve, a.icon-eve:link, a.icon-eve:visited, a.icon-eve:active, a.icon-eve:hover, a.icon-new, a.icon-new:link, a.icon-new:visited, a.icon-new:active, a.icon-new:hover, a.icon-post, a.icon-post:link, a.icon-post:visited, a.icon-post:active, a.icon-post:hover, a.icon-misc, a.icon-misc:link, a.icon-misc:visited, a.icon-misc:active, a.icon-misc:hover
{
	background-color: Transparent;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
}  

a.icon-ci, a.icon-ci:link, a.icon-ci:visited, a.icon-ci:active { background-image: url(../images/icon_ci_bw.png); }
a.icon-ci:hover { background-image: url(../images/icon_ci_colour.png); }

a.icon-dm, a.icon-dm:link, a.icon-dm:visited, a.icon-dm:active { background-image: url(../images/icon_dm_bw.png); }
a.icon-dm:hover { background-image: url(../images/icon_dm_colour.png); }

a.icon-eve, a.icon-eve:link, a.icon-eve:visited, a.icon-eve:active { background-image: url(../images/icon_eve_bw.png); }
a.icon-eve:hover { background-image: url(../images/icon_eve_colour.png); }

a.icon-new, a.icon-new:link, a.icon-new:visited, a.icon-new:active { background-image: url(../images/icon_new_bw.png); }
a.icon-new:hover { background-image: url(../images/icon_new_colour.png); }

a.icon-post, a.icon-post:link, a.icon-post:visited, a.icon-post:active { background-image: url(../images/icon_post_bw.png); }
a.icon-post:hover { background-image: url(../images/icon_post_colour.png); }

a.icon-misc, a.icon-misc:link, a.icon-misc:visited, a.icon-misc:active { background-image: url(../images/icon_misc_bw.png); }
a.icon-misc:hover { background-image: url(../images/icon_misc_colour.png); }

.navhide { display: none; }

#footer
{
	color: #CCC;
	font-size: 12px;
	line-height: 20px;
	font-weight: 300;
	text-align: left;
	letter-spacing: 0;
	border-top: 1px #e1e1e1 solid;
	margin-top: 30px;
}

#footerlinks
{
	float: right;
	margin: 10px 0;
}

#footcopyright
{
	color: #CCC;
	font-size: 10px;
	font-weight: 300;
	text-align: center;
	letter-spacing: 0;
	margin-bottom: 20px;
}



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

h1 { font-size: 2.5em; }

.colright
{
	width: 100%;
	margin-left: 0;
	min-height: initial;
}

.content3col
{
	float: none;
	width: 100%;
	margin: 0;
}

.projects-icon { float: none; width: 69px; margin: 0; }

.projects-hd { float: none; width: 100%; }

.projects-hd img { width: 76px; height: 44px; display: block; float: right; }

.projects-menu { float: none; width: 312px; margin: 0 auto 70px auto; }


}