/* ---------- Alternative colors 

bright sky	286DA8
peach		CD5360 (not used)
clay		B37D4E
turquoise	438496 (not used)
pale blue	0098d2		

---------- */

/* ---------- Fonts ---------- */

@font-face {
	font-family: 'Lora-Regular';
	src: url('/default/fonts/Lora/Lora-Regular.ttf');
}

@font-face {
	font-family: 'Lora-Italic';
	src: url('/default/fonts/Lora/Lora-Italic.ttf');
}

@font-face {
	font-family: 'Lora-Bold';
	src: url('/default/fonts/Lora/Lora-Bold.ttf');
}

@font-face {
	font-family: 'Lora-BoldItalic';
	src: url('/default/fonts/Lora/Lora-BoldItalic.ttf');
}

@font-face {
	font-family: 'OpenSans-Bold';
	src: url('/default/fonts/Open_Sans/OpenSans-Bold.ttf');
	font-weight: normal;
}

@font-face {
	font-family: 'OpenSans-BoldItalic';
	src: url('/default/fonts/Open_Sans/OpenSans-BoldItalic.ttf');
	font-weight: normal;
}

@font-face {
	font-family: 'OpenSans-ExtraBold';
	src: url('/default/fonts/Open_Sans/OpenSans-ExtraBold.ttf');
	font-weight: normal;
}

@font-face {
	font-family: 'OpenSans-ExtraBoldItalic';
	src: url('/default/fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf');
	font-weight: normal;
}

@font-face {
	font-family: 'OpenSans-Italic';
	src: url('/default/fonts/Open_Sans/OpenSans-Italic.ttf');
	font-weight: normal;
}

@font-face {
	font-family: 'OpenSans-Light';
	src: url('/default/fonts/Open_Sans/OpenSans-Light.ttf');
	font-weight: normal;
}

@font-face {
	font-family: 'OpenSans-LightItalic';
	src: url('/default/fonts/Open_Sans/OpenSans-LightItalic.ttf');
	font-weight: normal;
}

@font-face {
	font-family: 'OpenSans-Regular';
	src: url('/default/fonts/Open_Sans/OpenSans-Regular.ttf');
}

@font-face {
	font-family: 'OpenSans-Semibold';
	src: url('/default/fonts/Open_Sans/OpenSans-Semibold.ttf');
}

@font-face {
	font-family: 'OpenSans-SemiboldItalic';
	src: url('/default/fonts/Open_Sans/OpenSans-SemiboldItalic.ttf');
}

/* ---------- Main defaults ---------- */

body {
	background-color: #fefbfb;
	color: black;
	font: normal 16px 'OpenSans-Regular', Verdana, Helvetica, sans-serif;
}

/* Top layout */

div#searchSite {
	margin-left: 715px;
}

div.global {
    width: 100%;
	padding-top: 0;
	margin-top: 0;
}

#sectioncontainer {
	border-top: 1px solid #286DA8;
	padding: 10px 20%;
}

#headercontainer {
    padding: 0 10%;
}

/* --------- Figure border ---------- */

figure {
    border: 1px solid #efefef;
	padding: 5px 30px;
}

figure.blogPicture, figure.blogAudio {
    float: right;
    padding: 20px;
    margin: 0 10px 10px;
}

figure.blogAudio {
    padding: 20px 30px;
}
    
figcaption {
	padding: 0;
}

/* ---------- Menu stuff ---------- */

button#responsiveMenu {
	display: none;
	position: relative;
	top: 0;
	z-index: 100;
	float: right;
	border-top-style: none;
	background-color: white;
}

#greeting1 button#responsiveMenu {
	display: block;
}

#menucontainer .activeMenu:nth-child(1) {
	display: none;
}

#menucontainer, #submenucontainer, #bannercontainer, #footercontainer, #logindetails {
	width: 100%;
}

#logindetails {
	color: black;
	font-size: 90%;
}

#greeting1 #logindetails, #greeting1 #logindetails a {
/* 	color: white;  */
	display:none;
}

#greeting1 #logindetails a:hover {
/* 	color: #B37D4E;  */
	display:none;
}

#bannercontainer {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	padding-bottom: 25px;
}

#menucontainer {
	border: 0;
	background-color: #fefbfb;
	border-radius: 0;
	padding: 10px 0;
    top: 0;
    position: absolute;
    width: 80%;
}

#submenucontainer {
	background-color: transparent;
}

nav#submenucontainer.private {
	background-color: transparent;
}

.activeMenu, .inactiveMenu {
	font-size: 120%;
}

.inactiveMenu a, .inactiveMenu a:link, .inactiveMenu a:visited {
	color: #286DA8;
	background-color: transparent;
}

.activeMenu a, .activeMenu a:link, .activeMenu a:visited, .inactiveMenu a, .inactiveMenu a:hover {
	color: #B37D4E;
	background-color: transparent;
}

#subMenuitems div.activeMenu a, #subMenuitems div.inactiveMenu a:hover {
	color: #B37D4E;
	background-color: transparent;
	font-size: 80%;
}

#subMenuitems div.inactiveMenu a {
	color: #0098d2;
	background-color: transparent;
	font-size: 80%;
}

.activeMenu a.private, .activeMenu a.private:link, .activeMenu a.private:visited, .inactiveMenu a.private:hover {
	color: white;
	background-color: #999999;
}

.activeOptionsMenu, .inactiveOptionsMenu  {
	font-size: 90%;
}

.activeOptionsMenu a, .inactiveOptionsMenu a {
	padding: 2px 12px;
	border-radius: 2px;
}

.inactiveOptionsMenu a, .inactiveOptionsMenu a:link, .inactiveOptionsMenu a:visited {
	color: #0098d2;
	border: 1px solid #0098d2;
	background-color: white;
}

.activeOptionsMenu a, .activeOptionsMenu a:link, .activeOptionsMenu a:visited, .inactiveOptionsMenu a, .inactiveOptionsMenu a:hover {
	color: #B37D4E;
	border: 1px solid #B37D4E;
	background-color: white;
	margin-top: 5px;
}

#subMenuitems div.activeMenu a.private, #subMenuitems div.inactiveMenu a.private:hover {
	color: gray;
	background-color: white;
}

#subMenuitems div.inactiveMenu a.private {
	color: #999999;
	background-color: white;
}

/* -------- Headings -------- */

h1 {
	font-family: 'Lora-Italic', serif;
	color: #286DA8;
	font-size: 230%;
}

.greeting h1 {
	display: none;
}
	
h1.banner {
	font-size: 300%;
	margin: 0;
	float: none;
	padding-top: 60px;
}

h1.banner a {
	color: #286DA8;
}

h1.banner a:hover {
	color: #B37D4E;
}

h2 {
	font-family: 'Lora-Italic', serif;
	color: #0098d2;
	font-size: 190%;
}

h3 {
	font-family: 'Lora-Italic', serif;
	color: #0098d2;
	font-size: 140%;
}

h4 {
	font-family: 'Lora-Italic', serif;
	color: #0098d2;
	font-size: 120%;
}

/* General links */

a {
	color: #286da8;
	text-decoration: none;
}

a.private {
	font-style: italic;
}

a:hover {
	color: #B37D4E;
}

/* Commonly used classes for layout */

.subtitle {
	color: #909090;
}

/* Defining common elements */

p, ul {
	line-height: 175%;
	font-size: 105%;
}

ul {
    margin: 0 8%;
    padding-left: 0;
    display: block;
}

li {
	padding-left: 10px;
}

li.subbullet {
	font-size: 90%;
}

p.banner {
	font-family: 'OpenSans-Regular', Verdana, Helvetica, sans-serif;
	font-size: 110%;
}

i {
	color: gray;
}

p.emphasis {
	margin: 20px 20%;
	text-align: center; 
}

strong {
	font-family: 'OpenSans-Semibold', Verdana, Helvetica, sans-serif;
	color: #CD5360;
}

b {
	font-family: 'OpenSans-Bold', Verdana, Helvetica, sans-serif;
}

.right {
	float: right;
	padding: 10px 0 10px 10px;
}

div.blockCenter.tabular p.right {
	float: none;
	padding: 0;
}

/* ---------- Blog ---------- */

section.blog #sidebar {
	width: 200px;
}

div#blogControl, div#tagCloudControl {
	width: 200px;
	margin: 5px 0 5px 5px;
    border-bottom: 1px solid #fef7f7;
}

div#blogControl	span.smallType {
	display: block;
    text-align: center;
}

div.blogHeadings h2 {
	margin: 10px 0;
}

div.blogHeadings p {
	line-height: 100%;
	font-size: 90%;
	color: #cccccc;
}

div.blogHeadings b {
	font-weight: normal;
	display: none;
}

article.blogArticle input.submit {
    float: none;
    margin: 10px 0 20px;
	color: #0098d2;
	border: 1px solid #0098d2;
	font-size: 90%;
    padding: 2px 12px;
    border-radius: 2px;
}

article.blogArticle input.submit:hover {
	color: #B37D4E;
	border: 1px solid #B37D4E;
    background-color: white;
}

h3.blogCommentHeading {
	font-size: 120%;
}

.blogContent {
	height: auto;
}

.blogContent:after {
	height: auto;
}

div.blogHeadings p span.smallType {
	display: none;
}

.blogArticle {
    border: 1px solid white;
    background-color: transparent;
    padding: 10px 10px 10px 0;
}

div.blogMonthSummary {
	display: none;
}

.blogComments {
    background-color: #fef7f7;
}

div.quote {
	margin: 0 50px;
}

div.quote p {
    font-size: 100%;
    margin: 2px;
}

/* ---------- Administration sections ---------- */

#sections1 #sectioncontainer, #documents1 #sectioncontainer, #userdetails1 #sectioncontainer, #billboard1 #sectioncontainer, #groups1 #sectioncontainer {
	padding: 10px 15%;
}

/* ---------- Main sidebar formatting ---------- */

#sidebar {
	border-left: 1px #fefbfb solid;
	line-height: 110%;
	background-color: transparent;
}

section.blog #sidebar {
	font-size: 80%;
	margin: 0 auto;
	padding: 0 5px;
	min-width: 210px;
	text-align: center;
	position: fixed!important;
	right: 0;
	top: 240px;
	box-shadow: -3px 5px 10px rgba(0,0,0,0.1);
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
	z-index: 100;
	background-color: white;
}

/* ---------- Classes used with divs for screen layout ---------- */

.form {
	border: 1px solid gray;
	background-color: #fffffa;
	margin: 0 auto;
}

textarea, input {
    background-color: #fef7f7;
}
    
/* Highlight news and main newsitem module */

.newsDate {
	font-style: italic;
}

.newsTitle {
	font-weight: bold;
}

.newsContent {
	font-size: 90%;
}

.item {
	border-bottom: 1px #e8e8e8 solid;
}

.newsitems p {
	line-height: 150%;
}

/* Used at top of listings */

.headerRecord, .headerRecord a {
	font-weight: bold;
	color: gray;
}

/* Greeting page formatting */

.welcomeText, .welcomeText p {
	font-size: 110%;
	line-height: 150%;
}

/* iframe presentation */

div.presentation {
	float: right;
	margin: 10px auto;
}

div.presentation p {
	font-size: 75%;
	margin: 10px auto;
	text-align: center;
}

div.presentation iframe {
	width: 420px;
	height: 275px;
	display: block;
    margin: 30px auto 0;
}

/* Footer */

.footerContent {
	padding: 30px 0;
	border-top: 1px solid #286DA8;
}

/* ---------- Greeting page ---------- */

#greeting1 #sectioncontainer {
	min-height: 520px;	
}

#greeting1 .footerContent, #greeting1 #sectioncontainer {
	border-top: 0;
}

#homePhotos img.homeImage {
	position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 24s linear infinite 0s;
    -moz-animation: imageAnimation 24s linear infinite 0s;
    -o-animation: imageAnimation 24s linear infinite 0s;
    -ms-animation: imageAnimation 24s linear infinite 0s;
    animation: imageAnimation 24s linear infinite 0s; 
}

#homePhotos img.homeImage:nth-child(2)  { 
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s; 
}

#homePhotos img.homeImage:nth-child(3)  { 
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}

#homePhotos img.homeImage:nth-child(4)  { 
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s;
    -o-animation-delay: 9s;
    -ms-animation-delay: 9s;
    animation-delay: 9s; 
}

#homePhotos img.homeImage:nth-child(5)  { 
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}

#homePhotos img.homeImage:nth-child(6)  { 
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    -o-animation-delay: 15s;
    -ms-animation-delay: 15s;
    animation-delay: 15s; 
}

#homePhotos img.homeImage:nth-child(7)  { 
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}

#homePhotos img.homeImage:nth-child(8)  { 
    -webkit-animation-delay: 21s;
    -moz-animation-delay: 21s;
    -o-animation-delay: 21s;
    -ms-animation-delay: 21s;
    animation-delay: 21s; 
}

@-webkit-keyframes imageAnimation { 
    0% {opacity: 0; -webkit-animation-timing-function: ease-in;}
    8% {opacity: 1; -webkit-animation-timing-function: ease-out;}
    17% {opacity: 1;}
    25% {opacity: 0;}
    100% {opacity: 0;}
}

@-moz-keyframes imageAnimation { 
    0% {opacity: 0; -moz-animation-timing-function: ease-in;}
    8% {opacity: 1; -moz-animation-timing-function: ease-out;}
    17% {opacity: 1;}
    25% {opacity: 0;}
    100% {opacity: 0;}
}

@-o-keyframes imageAnimation { 
    0% {opacity: 0; -o-animation-timing-function: ease-in;}
    8% {opacity: 1; -o-animation-timing-function: ease-out;}
    17% {opacity: 1;}
    25% {opacity: 0;}
    100% {opacity: 0;}
}

@-ms-keyframes imageAnimation { 
    0% {opacity: 0; -ms-animation-timing-function: ease-in;}
    8% {opacity: 1; -ms-animation-timing-function: ease-out;}
    17% {opacity: 1;}
    25% {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes imageAnimation { 
    0% {opacity: 0; animation-timing-function: ease-in;}
    8% {opacity: 1; animation-timing-function: ease-out;}
    17% {opacity: 1;}
    25% {opacity: 0;}
    100% {opacity: 0;}
}


/* -------- Different devices -------- */

/* -------- Smartphones (portrait and landscape) from 0 - 359px -------- */

@media only screen and (min-width: 0px) and (max-width: 359px) {

	body {font: normal 12px 'OpenSans-Regular', Verdana, Helvetica, sans-serif;}
	button#responsiveMenu {display: block;}
	#sectioncontainer, #bannercontainer, #footercontainer, section#logindetails, div#global {width: 95%;}
	#menucontainer, #submenucontainer {width: 98%;}
	#headercontainer {padding: 0 1%;}
	#menuitems, #subMenuitems {display: flex;}
	.bannerContent {text-align: center;}
	h1.banner {font-size: 350%;}
/* 	div.menuIcon {width: 26px; height: 3px; margin: 4px 0;}  */
	.activeMenu, .inactiveMenu {display: inline-block; width: 90%;}
	.activeMenu a, .activeMenu a:link, .activeMenu a:visited, .inactiveMenu a, .inactiveMenu a:hover {font-size: 90%; padding: 4px 8px;}
	#sectioncontainer {padding: 0 5%; width: auto;} 
	#generic1 #sectioncontainer {padding: 10px 5%;}
	#greeting1 #sectioncontainer {min-height: 350px;}
	#homePhotos img.homeImage {width: 80%;}  
	section.blog #sidebar {display: none;}
	figure.blogPicture {padding: 10px; float: none;}
	figure img {width: 80%;}
	div.blogHeadings {float: none; width: 100%;}
	div.quote {margin: 0 10px;}
}

/* -------- Smartphones (portrait and landscape) from 360px - 480px -------- */

@media only screen and (min-width: 360px) and (max-width: 480px) {

	body {font: normal 11px 'OpenSans-Regular', Verdana, Helvetica, sans-serif;}
	button#responsiveMenu {display: block; background-color: white;}
	#sectioncontainer, #bannercontainer, #footercontainer, section#logindetails, div#global {width: 95%;}
	#menucontainer, #submenucontainer {width: 94%;}
	#headercontainer {padding: 0 3%;}
	#menuitems, #subMenuitems {display: flex;}
	.bannerContent {text-align: center;}
	h1.banner {font-size: 350%;}
/* 		div.menuIcon {width: 26px; height: 3px; margin: 4px 0;}   */
	.activeMenu, .inactiveMenu {display: inline-block; width: 90%;}
	.activeMenu a, .activeMenu a:link, .activeMenu a:visited, .inactiveMenu a, .inactiveMenu a:hover {font-size: 90%; padding: 4px 8px;}
	#sectioncontainer {padding: 0 5%; width: auto;} 
	#generic1 #sectioncontainer {padding: 10px 10%;}
	#greeting1 #sectioncontainer {min-height: 370px;}
	#homePhotos img.homeImage {width: 60%;}  
	section.blog #sidebar {display: none;}
	figure.blogPicture {padding: 10px; float: none;}
	figure img {width: 80%;}
	figure img.portrait {width: 50%;}
	div.blogHeadings {float: none; width: 100%;}
	div.quote {margin: 0 10px;}
}

/* -------- Sizes (portrait and landscape) from 481px - 768px -------- */

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

	body {font: normal 14px 'OpenSans-Regular', Verdana, Helvetica, sans-serif;}
	#bannercontainer, #footercontainer, section#logindetails {width: 100%;}
	#menucontainer, #submenucontainer {width: 90%;}
	p, ul {font-size: 100%;}
	div#global {width: 100%;}
	#sectioncontainer {width: auto; padding: 10px 4%;}
	#headercontainer {padding: 0 5%;}
	h1.banner {padding-top: 75px;}
	figure.blogPicture {padding: 10px; float: none;}
	figure img {width: 80%;}
	figure img.portrait {width: 50%;}
	#generic1 #sectioncontainer {padding: 10px 15%;}
	#greeting1 #sectioncontainer {min-height: 450px;}
	#homePhotos img.homeImage {width: 45%;}  
	section.blog #sidebar {display: none;}
}

/* -------- Sizes (portrait and landscape) from 481px - 600px -------- */

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

	#greeting1 #sectioncontainer {min-height: 425px;}
	#homePhotos img.homeImage {width: 60%;}  
}

/* ------- Larger tablets (portrait and landscape) from 769px - 960px ------- */

@media only screen and (min-width: 769px) and (max-width: 960px) {

	#bannercontainer, #footercontainer, section#logindetails {width: 100%;}
	div#global {width: 100%;}
	#sectioncontainer {width: auto; padding: 10px 10%;} 
	#generic1 #sectioncontainer {padding: 10px 20%;}
}

/* -------- */

/* ----  min-width: 0px and max-width: 768px

@media only screen and (min-width: 0px) and (max-width: 768px) {
	.blog2 input.submit {float: inherit;}
	.blog2 div#blogControl {width: 100%; height: 50px; text-align: center;}
	.blog2 div#tagCloudControl, .blog1 #sidebar {width: unset;}
	.blog2 div#tagCloudControl {text-align: center;}
	.blog2 #sidebar {min-height: unset; padding: 0; margin: 10px auto;}
}

/* -------- */