/* FONTS */

body, textarea, .ctrl
{
	font: 100%/1.666666666666667 "Droid Serif", "Georgia Pro", georgia, serif;
	color: #222222;
}

h1, h2, h3, h4, h5, h6, #controls, th, .navigation-hidden, footer p { font-family: "Droid Sans", Verdana, sans-serif; }

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1em; }
h5 { font-size: 0.83em; }
h6 { font-size: 0.75em; }

/* LAYOUT */

ul { margin: 0 0 1em 1em; } 
ol { margin: 0 0 1em 1.25em; }
ul li, 
ol li { margin: 0.25em 0; }
li ul { margin: 0 0 0 1em; } 
li ol { margin: 0 0 0 1.25em; }

body { width: 100%; }

#cookie-warning { margin: 1px 1em 0em 1em; color: #333333; background-color: #eee; }
#cookie-warning p { font-size: 0.75em; padding: 0.25em 0.5em; font-weight: 700; }

#container { margin: 0 auto; max-width: 80em; background-color: #fff; }

nav { display: flex; justify-content: space-between; margin: 1px 1em 0 1em; }
#navigation, 
#sm { display: flex; flex-flow: row wrap; justify-content: flex-start; list-style: none; margin: 0; }
#navigation li, 
#sm li { display:flex; margin: 0; }
#navigation a { text-decoration: none; padding: 1.6em 0.8em 0.2em 0.8em; color: #222222; font-size: 1.2em; line-height: 1.6em; font-weight: 700; }
#sm a { text-decoration: none; padding: 0.7em 1em; }
#navigation a:hover, 
#sm a:hover { color: #fff; background-color: #cc3300; }
#sm a.pic { padding: 0; }
#sm a img { max-width: 2.6em; max-height: 2.6em; }


main { display: flex; flex-flow: row wrap; justify-content: flex-start; }

#title { margin: 1em 1em 0 1em; display: flex; flex-grow: 1; flex-basis: 100%; border-bottom: 1px solid #ddd; }
#title a { text-decoration: none; color: #030303; }
#title h1 { font-weight: 700; font-size: 3.3em; line-height: 1.3; }

#sub-heading { flex-grow: 1; flex-basis: 100%; margin: 1em 1em 0 1em; }
#sub-heading h2 { margin: 0 0 0.25em 0; border-bottom: 1px solid #ddd; }

#introduction { display: flex; flex-flow: column; flex-grow: 1; flex-basis: 100%; margin: 1em; }
#introduction p { font-size: 1.33em; line-height: 1.5; margin: 0.25em 0 1em 0; }
#introduction p span.drop { float: left; font-size: 2.89em; line-height: 100%; margin: 0; padding: 0 0.08em 0 0; text-transform: capitalize; color: #cc3300; }
#introduction p a { text-decoration: none; font-weight: 700; color: #cc3300; }
#introduction p a:hover { color: #FF6600; }
#introduction img { max-height: 100%; max-width: 100%; margin: 0; }

main h2 { margin: 0 0 0.25em 0; }
main article { margin: 0 0 2em 0; }
main article header h4 { color: #336633; border-bottom: 1px solid #ddd; margin: 0 0 0.25em 0; }
main article header img { max-width: 100%; margin: 0 0 0.5em 0; }
main p { margin: 0 0 1em 0; overflow: hidden; }
main p a, 
main h2 a,
main h3 a { text-decoration: none; font-weight: 700; color: #cc3300; }
main p a:hover, 
main h3 a:hover { color: #FF6600; }
main span.drop { float: left; font-size: 3.2em; line-height: 100%; margin: 0; padding: 0 0.08em 0 0; text-transform: capitalize; color: #cc3300; }
main article p img { width: 100%; max-width: 100%; display: block; margin: 0; }

#news, 
#events, 
#left-column, 
#right-column { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; margin: 0.25em 1em 0.25em 1em; }
#right-column img { margin: 0 0 1em 0; padding: 0; max-width: 100%; }
#news > h2, 
#events > h2 { border-bottom: 1px solid #ddd; line-height: 1.3; margin: 0 0 0.25em 0; } 
#news header, 
#events header { display: flex; flex-direction: column; }

#news article header h4 a { text-decoration: none; color: #336633; }
#news article header h4 a:hover { color: #669933; }

.pagination { display: flex; flex-flow: row wrap; list-style-type: none; margin: 1em 0 2em 0; padding: 0; }
.pagination li { margin: 1px 1px 1px 0; padding: 0; }
.pagination li a,
.pagination li span { padding: 0.2em 0.8em 1.6em 0.8em; font-size: 1em; color: #222222; }
.pagination li a { text-decoration: none; font-weight: 700; }
.pagination li span.inactive { color: #ddd; font-weight: normal; }
.pagination li a:hover,
.pagination li span.selected { color: #fff; background-color: #cc3300; font-weight: 700; }


footer { margin: 0 1em; padding: 1em 0 1em 0; clear: both; border-top: 1px solid #ddd; }
footer p { font-size: 0.83em; font-weight: 400; margin: 0 0 1em 0; }
footer p a { text-decoration: none; font-weight: 700; color: #cc3300; }
footer p a:hover { color: #FF6600; }

.video-wrapper { position: relative; padding-top: 25px; height: 0; margin: 0 0 0.5em 0; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.four-three { padding-bottom: 75%; /* 4:3 */ }
.sixteen-nine { padding-bottom: 56.25%; /* 16:9 */ }
.sixteen-ten { padding-bottom: 62.5%; /* 16:10 */ }

ul.standard { margin: 1.42em 0 0.5em 1em; padding: 0; }
ul.standard li { list-style-type: disc; margin: 0 0 0.5em 0; padding: 0; }
ul.standard li ul { margin: 0 0 0.5em 2em; padding: 0; }
ul.standard li ul li { list-style-type: circle; margin: 0.25em 0; padding: 0; }
ul.standard li a { text-decoration: none; font-weight: 700; color: #cc3300; }
ul.standard li a:hover { color: #FF6600; }

#left-column header h4 { color: #336633; border-bottom: 1px solid #ddd; margin: 0 0 0.25em 0; }

.gallery { display: flex; flex-flow: row wrap; margin: 0 0 1em 0; padding: 0; width: 100%; }

.gallery li.video { flex-grow: 1; flex-shrink: 1; flex-basis: 100%; list-style: none; margin: 1em 0; }

.gallery li.thumb-50 { display: flex; flex-flow: column wrap; list-style: none; margin: 0; width: 100%; }
.gallery li.thumb-50 a { text-decoration: none; font-weight: 400; color: #222222; padding: 0.5em; }
.gallery li.thumb-50 a:hover { background-color: #ddd; }
.gallery li.thumb-50 img { display: block; max-width: 100%; }
.img-caption { display: block; margin: 0.25em 0 0 0; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; text-align: center; }

.gallery li.thumb-25 { display: flex; flex: column wrap; width: 13em; height: 13em; list-style: none; margin: 0 1em 1em 0; }
.gallery li.thumb-25 a { display: flex; justify-content: center; align-items: center; text-decoration: none; padding: 1em; }
.gallery li.thumb-25 a:hover { background-color: #ddd; }
.gallery li.thumb-25 img { display: block; max-width: 100%; max-height: 100%; }

.w30 { width: 30em; }

label { margin: 0 0 0.5em 0; font-weight: bold; }
fieldset { 
	display: flex; 
	flex-direction: column; 
	justify-content: left; 
	flex-wrap: wrap; 
	padding: 0.5em 0 0 0; 
	margin: 0 0 0.5em 0; 
}

.ctrl, input[type="file"]::file-selector-button {
	border: 1px solid #C2C2C2;
	box-shadow: 1px 1px 4px #EBEBEB;
	-moz-box-shadow: 1px 1px 4px #EBEBEB;
	-webkit-box-shadow: 1px 1px 4px #EBEBEB;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	padding: 0.6em;
	outline: none;
	margin: 0 0.5em 0.5em 0;
}

.error { color: #cc3300; margin: 0 0 0.5em 0; }
.hidden, .navigation-hidden { position: absolute; left: -9999px; }

/* Small screens */
@media all and (max-width: 500px) {
	nav { flex-flow: column wrap; flex: 1 100%; margin: 0;}
	#navigation, 
	#sm { display: block; }
	#navigation a { padding: 1em 0; }
	nav li { display: flex; flex-wrap: wrap; }
	nav li a { flex: 0 0 100%; text-align: center;  }
	#sm li a { line-height: 1em; padding: 1em 0; }
	#news, 
	#events, 
	#left-column, 
	#right-column { flex-basis: 100%; }
}