body {
	font-family:verdana;
	font-size:12px;
	line-height:1.2em;
	color:#000;
}

nav {
	background:#003265;
}

nav div {
	max-width:1200px;
	margin:0 auto;
	overflow:auto;
}
	nav div a {
		display:block;
		color:#fff;
		padding:1rem;
		text-decoration:none;
		float:left;
	}
		nav div a:hover {
			text-decoration:underline;
		}
	nav div form {
		padding:1rem;
		text-align:center;
	}

header {
	min-height:212px;
	background:#dfd;
}

	header .slideshow {
		width:100%;
		height:212px;
		position:absolute;
		z-index:1;
	}
	
	header .slideshow div {
		width:100%;
		height:212px;
		background:center center no-repeat;
		background-size:cover;	
	}

	header .inner {
		width:1200px;
		max-width:100%;
		margin:0 auto;
		overflow: auto;
		z-index:3;
		position:relative;
	}

	header #systemlogo {
		margin-top:70px;
		z-index:5;
	}
	
	header .inner h2 {
		position:absolute;
		bottom:1rem;
		right:1rem;
		font-size:20px;
		color:#fff;
		font-family:georgia;
		font-weight:bold;
		opacity:.9;
		text-shadow: 0 0 4px #141414;		
	}

main {
	max-width:1200px;
	margin:0 auto;
}



footer {
	padding:2rem;
	background:#F7F0C6;
	border-top:2px solid #000;
	border-bottom:2px solid #4E5C89;
}

aside {
	font-size:13px;
	color:#666;
	text-align:center;
	padding:2rem;
}

p {
	margin:1rem 0;
}

b, strong {
	font-weight:bold;
}
i, emphasis {
	font-style:italic;
}

.msg {
	padding:1rem;
	text-align:center;
	background:pink;
}

section.bg {
	background:#F7F0C6;
}
.section-header {
	display:block;
	background:#F3D269;
	color:#000;
	padding:.8rem;
	font-weight:bold;
	text-decoration:none;
	line-height:1.5em;
}
	h3.section-header a {
		color:#000;
		text-decoration:none;
	}
	a.section-header:hover,
	h3.section-header a:hover {
		text-decoration:underline;
	}
	
a.blocklink {
	display:block;
	padding:.5rem .8rem;
	font-size:.7rem;
	text-decoration:none;
	color:#000;
}
	a.blocklink:hover {
		text-decoration:underline;
	}

#latest-updates {grid-area:lu;}
#view-all-sites {grid-area:as;}
#join-us {grid-area:ju;}
	#join-us .section-header {
		background: #EC5078;
		background: #E7E516;
		background: -webkit-radial-gradient(bottom right, #E7E516, #B31438);
		background: -moz-radial-gradient(bottom right, #E7E516, #B31438);
		background: radial-gradient(to top left, #E7E516, #B31438);
		color:#fff;
	}
#aurora-watch {grid-area:aw;}
#orkney-weather {grid-area:ow;}
#shipping {grid-area:sh;}
#other-orkney-news {
	grid-area:oo;
	height:600px;
	overflow-y:scroll;
	}
#news-headlines {grid-area:nh;}
	#news-headlines a b {text-transform:uppercase;}
	#news-headlines a i {display:block;text-align:right;}
#image-library {grid-area:il;min-width: 0;}
#events {grid-area:ev;}
	#events div {
		background:#F7F0C6;
		font-weight:bold;
		padding:.5rem .8rem;
		font-size:.7rem;
	}
	#fullevents {
		text-align:right;
		font-style:italic;
		color:#000;
	}
#blogs {grid-area:bl;}
	#blogs a b {text-transform:uppercase;}
	#blogs a i {display:block;text-align:right;}
#f1 {grid-area:f1;}
#f2 {grid-area:f2;}
#f3 {grid-area:f3;}

#bbcradioorkney {
	padding:.5rem .8rem;
	display:block;
}
	#bbcradioorkney span {
		float:right;
		text-decoration:none;
		color:#000;
	}

.info_box {
	max-width:100%;
	width:600px;
}

.no-mobile {display:none;}


main#homepage {
	display:grid;
	grid-template-areas:
		"ju"
		"lu"
		"as"
		"aw"
		"ow"
		"il"
		"nh"
		"ev"
		"bl"
		"f1"
		"f2"
		"f3"
		"sh"
		"oo"
	;
}

main#eventspage {
	display:grid;
	grid-template-areas:
		"ev"
		"lu"
		"f1"
		"f2"
		"f3"
	;
}

#image-library a.ils {
	display:block;
	height:200px;
	background-size:cover;
	background-position:center center;
	position:relative;
}
	#image-library a.ils span {
		position:absolute;
		left:0;
		bottom:0;
		right:0;
		padding:.5rem;
		text-decoration:none;
		text-align:center;
		background-color:rgba(255,255,255,.7);
		color:#000;
	}
#il-slideshow {
	overflow:hidden;
	height:200px;
}

	 /* 6 images */
	#il-slidewrapper {
		width: 600vw;
		-webkit-animation: slide 36s ease infinite;
	}
		#il-slidewrapper a {
			float: left;
			height: 200px;
			width: 100vw;
		}
	@-webkit-keyframes slide {
		15% {margin-left: 0px;}
		30% {margin-left: -100vw;}
		36% {margin-left: -100vw;}
		45% {margin-left: -200vw;}
		51% {margin-left: -200vs;} 
		60% {margin-left: -300vw;}
		66% {margin-left: -300vw;}
		75% {margin-left: -400vw;}
		81% {margin-left: -400vw;}
		90% {margin-left: -500vw;}
		96% {margin-left: -500vw;}
	}

@media only screen and (max-width:767px) {
	.mobile-margin {
		border-left:1rem solid #F3D269;
		border-right:1rem solid #F3D269;
	}
}

@media only screen and (min-width:768px) {

	nav div form {
		float:right;
		padding:.7rem 1rem 0 0;
	}

	main#homepage {
		grid-gap:.5rem;
		grid-template-columns:1fr 1fr;
		grid-template-areas: 
			"lu ju"
			"lu aw"
			"lu as"
			"lu ow"
			"il il"
			"nh ev"
			"f1 f2"
			"bl f3"
			"sh sh"
			"oo oo"
		;
	}
	main#eventspage {
		grid-gap:.5rem;
		grid-template-columns:1fr 2fr;
		grid-template-areas: 
			"lu ev"
			"f1 ev"
			"f2 ev"
			"f3 ev"
		;
	}


	footer>div {
		display:grid;
		grid-gap:.5rem;
		grid-template-columns:1fr 1fr;
		margin:0 auto;
	}

#image-library a.ils {
	height:350px;
}
#il-slideshow {
	height:350px;
}

		#il-slidewrapper a {
			height: 350px;

		}



}

@media only screen and (min-width:1024px) {
	.no-mobile {display:initial;}
	
	main#homepage {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas: 
		"ju aw as"
		"lu il il"
		"ow il il"
		"nh ev bl"
		"nh ev f1"
		"nh ev f2"
		"nh ev f3"
		"sh sh sh"
		"oo oo oo"
		;
	}
	
#image-library a.ils {
	height:400px;
}
#il-slideshow {
	height:400px;
}

	 /* 6 images */
	#il-slidewrapper {
		width: 3924px;
	}
		#il-slidewrapper a {
			height: 400px;
			width: 654px;
		}
	@-webkit-keyframes slide {
		15% {margin-left: 0px;}
		30% {margin-left: -654px;}
		36% {margin-left: -654px;}
		45% {margin-left: -1308px;}
		51% {margin-left: -1308px;} 
		60% {margin-left: -1962px;}
		66% {margin-left: -1962px;}
		75% {margin-left: -2616px;}
		81% {margin-left: -2616px;}
		90% {margin-left: -3270px;}
		96% {margin-left: -3270px;}
	}

}

@media only screen and (min-width: 1200px) {

	main#homepage {
		grid-gap:1rem;
		grid-template-columns:3fr 3fr 2fr 3fr 3fr 4fr;
		grid-template-areas: 
		"ju nh nh il il il"
		"lu nh nh il il il"
		"as nh nh ev ev f1"
		"aw nh nh ev ev f1"
		"ow nh nh ev ev f1"
		"sh sh sh bl bl f2"
		"sh sh sh bl bl f2"
		"oo oo oo bl bl f3"
		;
		
		padding:2rem;
	}
	main#eventspage {
		grid-gap:.5rem;
		grid-template-columns:1fr 3fr 1fr;
		grid-template-areas: 
			"lu ev f1"
			"lu ev f2"
			"lu ev f3"			
		;
		
		padding:2rem;
	}
	
	
	footer>div {
		display:grid;
		grid-gap:2rem;
		grid-template-columns:1fr 1fr 1fr 1fr;
		max-width:1200px;
		margin:0 auto;
	}




}