@import url(https://fonts.googleapis.com/css?family=Lato);

html{
    min-height:100%;/* make sure it is at least as tall as the viewport */
    position:relative;
}
body{
    height:100%; /* force the BODY element to match the height of the HTML element */
	font-family:Gill Sans MT,Gill Sans,Lato,Calibri,sans-serif;
	background-color: #404040;
}
div.container {
	width:100%;
	height:100%;
	//float:left; /*for IE */
	display:flex;
}
div.column1 {     /* Left-hand navbar */
	width:188px;
}
@media (max-width: 1200px) {
	div.column1 {
		width:50px;
	}
}
@media (max-width:690px) {
	div.column1 { display:none; }
}
div.column2 {  /* Free to fill remaining space */
	width:100%; /* for IE (11) */
}

/* HEADER */
header {
	background-color:LightSkyBlue;
	margin:0px;
	height:102px;
}

div.logo {
	padding: 8px;
}
div.bullets {
	position:absolute;
	top:16px;
	right:8px;
	max-height: 180px;
	padding-right:8px;
	font-family:Gill Sans MT,Gill Sans,Lato,Calibri,sans-serif;
	font-size:120%;
	overflow: hidden;
}
@media (max-width: 1045px) {
	div.bullets {
		columns:2;
		-webkit-column-count: 2; /* Chrome, Safari, Opera */
		-moz-column-count: 2; /* Firefox */
		column-count:2;
		max-height: 93px;
	}
	header {
		height:93px;
	}
}
@media (max-width: 790px) {
	div.bullets { font-size:100%;}
}
@media (max-width: 630px) {
	div.bullets { display:none;}
}
div.strapline { font-family:Gill Sans MT,Gill Sans,Lato,Calibri,sans-serif; font-size:230%; color:gray;}
@media (max-width: 1045px) {
	div.strapline { font-size:120% }
}
@media (max-width: 1045px) {
	img.logo {
		width: 265px;
	}
}

/* NAVIGATION */
nav a {
	color:white;
	text-decoration:none;
}
.leftnavi {
	width:180px;
	padding: 8px;
	padding-left:2px;
	padding-top:116px;
    position: fixed; 
    top: 0; 
    bottom: 0;
    left: 8px;
}

@media (max-width: 1200px) {
	.leftnavi {
		width:50px;
	}
}
@media (max-width: 1045px) {
	.leftnavi {
		padding-top:102px;
	}
}
.altnavi {
	width:100%;
	margin-right:8px;
	padding-top:92px;
	color:white;
	padding: 4px;
	background-color: #404040;
	display: none;
}
@media (max-width:670px) {
	.altnavi { display:block; }
	.leftnavi { display:none; }
}
@media (min-width: 800px) {
	span.raised {
		position: relative;
		top: -16px;
		left: 2px;
	}
}	
@media (max-width: 1200px) {
	span.raised {
		display: none;
	}
}

/* MAIN */
main {
	display:flex;
	flex-direction:row;
	font-size: 14pt;
	padding-left: 4px;
	background-color:white;
}
@media (max-width: 920px) {
	main {
		flex-direction:column;
	}
}

.middle {
	padding:4px;
	background-color: white;
}

div.highlightbox {
	xbackground-color:#D0FFD0;
	padding: 4px;
	border-bottom: 8px solid blue;
	border-top: 8px solid red;
}

.panel {
	border:4px solid green;
	border-radius: 13px;
	padding-left: 8px;
	background-color: white;
	height: 100%;
	margin: 4px;
}
@media (min-width: 960px) {
	.panel {
		width:300px;
	}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
	.panel {
		width:600px;
	}
}
aside.bottom {display:none;}
.blogsidepanel {
	float:right;
	border:4px solid green;
	border-radius: 13px;
	padding-left: 8px;
	padding-right:8px;
	background-color: white;
	height: 100%;
	margin: 4px;
	width:300px;
}
@media (max-width: 600px) {
	aside.top {
		display:none;
	}
	aside.bottom {
		display:block;
		float:left;
		width:auto;
		padding-left:2px;
	}
}

figure {
	float: right;
	text-align: center;
	font-style: italic;
	font-size: smaller;
	text-indent: 0;
	border: thin silver solid;
	margin: 0.5em;
	padding: 0.5em;
}

figure.left {
	float: left;
}

figure.third {
	width: 30%;
}

figure.mast {
	max-width: 491px;
	float: left;
	text-align: left;
	font-style: italic;
	font-size: smaller;
	text-indent: 0;
	border: none;
	margin: 0em;
	padding-right: 0.5em;
}

h1 { font-family:Gill Sans MT,Gill Sans,Lato,Calibri,sans-serif; font-size:48pt; font-weight:bold; line-height:0%}
.ie7 h1 { font-family:Gill Sans MT,Gill Sans,Lato,Calibri,sans-serif; font-size:70pt; font-weight:bold; line-height:100%}
h2 { font-family:Gill Sans MT,Gill Sans,Lato,Calibri,sans-serif; font-size:20pt; line-height:20pt}
h2.header { line-height:0%; }
h3 { font-family:Gill Sans MT,Gill Sans,Lato,Calibri,sans-serif; font-weight:normal; font-size:16pt; color:green}
h3.subhead { font-family:Gill Sans MT,Gill Sans,Lato,Calibri,sans-serif; font-weight:normal; font-size:18pt; color: #0000FF;}
h4 { font-family:Gill Sans MT,Gill Sans,Lato,Calibri,sans-serif; font-weight:bold; font-size:13pt;}

ul {padding-left: 1.2em}
ul.square { list-style-type: square; }
ul.dingbat {
	list-style-image: url("images/dingbat.png");
}
li {
	margin-top: 2px;
	padding-left:-10px;
}
li.dingbat {
    margin-top: 10px;
}
dt {
	font-weight: bold;
	padding-top:8px;
}

iframe {
	border:none;
	padding: 0px;
	width:100%;
	margin-left:-8px;
	height:800px;
	width:298px;
	overflow-y: hidden;
}
iframe.contact {
	width:800px;
	height:600px;
}
iframe.comment {
	margin-left:20%;
	width:100%;
	background-color:white;
	height:600px;
}
@media (max-width: 1200px) {
	iframe.contact {
		width:400px;
	}
}
/*************************************/

div.blog { padding: 0; font-family:Gill Sans MT,Gill Sans,Lato,Calibri,sans-serif; font-color:red}

div.h4 { font-family:Gill Sans MT,Gill Sans,Lato,Calibri,sans-serif; font-weight:bold; font-size:24px; color:red; line-height: 2}

div.blogtitle  { font-family:Gill Sans MT,Gill Sans,Lato,Calibri,sans-serif; font-weight:bold; font-size:16px; color:red; line-height: 1.5}

div.contents { font-family:Gill Sans MT,Gill Sans,Lato,Calibri,sans-serif; font-size:120%; }

div.comment {
	width:80%
	background-color:LightSkyBlue;
	color:blue;
}
div.reply {
	width:80%;
	text-align:right;
}
div.pullout {
	font-family: Gill Sans MT,Gill Sans,Lato,Calibri,sans-serif;
	font-size:120%;
	border:2px solid blue;
	float: right;
    background-color: LightSkyBlue;
	margin:10px;
	padding:8px;
}
/**************************************/

div.columns  {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
	column-fill:balance;
}

.advert {  /* for the advert table */
	margin:0;
	padding:0;
	border:0px;
	border-collapse:collapse;
	vertical-align:top;
}
.slogan {
	font-family: helvetica,helv,arial,sans-serif;
	font-size: 200%;
	color:#959499;
	vertical-align:top;
}
@media (max-width: 500px) {
	.slogan {display:none;}
}

nav.bottom-nav {
	color:white;
	padding: 2px;
	text-align:center;
}
footer.bottom {
	position: absolute;
	left:4px;
	width:100%;
	background-color: #404040;
	color:white;
	margin-top: 8px;
	padding: 8px;
	border-top: 4px solid blue;
	text-align:center;
}
@media (max-width: 1200px) {
	.bottom {
		padding-left: 60px;
	}
}

div.blogstrap { color:darkgray; }

p.footnote {
	margin-left: 25px ;
    text-indent: -25px ;
}

div.alert {
	border:4px solid red;
	border-radius: 13px;
	padding: 8px;
	background-color: white;
	margin-bottom: 8px;
	margin-left: 150px;
	margin-right: 290px;
	font-size: 180%;
}
div.blognav {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	margin-top: 16px;
	height:100%;
}
table.blognav {
	background:LightSkyBlue;
}

tr.blognav {
	vertical-align:middle;
	padding:0px;
	margin:0px;
	border:1px solid black;
}

img.pic_right {
	float:right;
}
@media (max-width: 750px) {
	img.pic_right {
		width: 165px;
	}
}
@media (max-width: 600px) {
	img.pic_right {
		display:none;
	}
}
img.drop-cap {
	float:left;
	margin-right:8px; margin-top:20px;
}
img.drop-cap-index {
	float:left; margin-right:8px; margin-top:0px;
}

/* link */
a:link {
    color: green;
	text-decoration: none;
}
a.contact:link {
	color: white;
	text-decoration: underline;
}
a.linklink:link {
	color: white;
	text-decoration: none;
}
/* visited link */
a:visited {
    color: blue;
	text-decoration: none;
}
a.contact:visited {
	color:white;
	text-decoration: underline;
}
a.linklink:visited {
	color: white;
	text-decoration: none;
}
/* mouse over link */
a:hover {
    color: red;
	text-decoration: none;
}
a.contact:hover {
	color: red;
	text-decoration: none;
}

a.linklink:hover {
	color: red;
	text-decoration: none;
}

/* selected link */
a:active {
    color: blue;
	text-decoration: none;
}

a.large {
	font-size: 120%;
	font-weight: bold;
}

span.bold {
	font-size: 120%;
	font-weight: bold;
	color: green;
}

span.redfont {
	color:red;
}
p.grey {color:gray;}
p.bquote {
	margin-left:8%;
	width:84%;
	font-style:italic;
	color:blue;
	}

p.attribution {
	text-align: right;
	padding-right: 10px;
	font-size: 90%;
}

.mast {
	float: right;
}
@media (max-width: 600px) {
	.mast {
		display: none;
	}
	p.attribution {
		display: none;
	}
}