/*********************************
 * SECTION 1: General Properties *
 **********************************/

/*
 * General html and body properties.
 */
html {
}
body {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 90%;
}


/*
 * General table properties.
 */
table {
}
table tr th {
	vertical-align: top;
}
table tr td {
	vertical-align: top;
}


/*
 * General form properties. This 0px margin is a hack to keep IE happy.
 */
form {
	margin: 0px;
}


/*
 * General link properties.
 */
a {
}
a:visited {
}
a:hover {
	text-decoration: none;
}


/*
 * General image properties.
 */
img {
	border: none;
}


/*
 * Primary heading style.
 */
h1 {
	margin: 0px;
}
h1 a {
	text-decoration: none;
}
h1 img {
	display: block;
}
h2 {
	margin-top: 0px;
}



/******************************************************************
 * SECTION 2: Structural Divisions (Header, Footer, Wrappers, etc) *
 *******************************************************************/


#header_content_footer_wrapper {
}

#header_content_wrapper {
}

#header {
}

#navbar {
}

#content_wrapper {
}

#content {
	padding: 0.5em;
/*	min-height: 500px; */
}

#footer {
	text-align: right;
	font-size: 80%;
/*	padding: 2em 1em 1em 1em; */
	padding: 1em;
}
#footer_menu {
	text-align: center;
}
#footer_menu .footer_menu_group {
	padding: 0.25em;
}
#footer_menu .footer_menu_group .footer_menu_item {
	margin: 0.5em;
}
#karma_credit {
	margin-top: 0.5em;
}

/****************************************************************
 * SECTION 3: Specific Sections (Main Menu, Join the List, etc) *
 ****************************************************************/

/*
 * The second site_photo is not displayed by default.
 */
#site_photo_2 {
	display: none;
}


/*
 * Style for form tables.
 */
table.form {
	border: none;
}
table.form td {
	vertical-align: top;
	padding-bottom: 0.5em;
}
table.form td.field_name {
	border: none;
	font-weight: bold;
	padding-right: 0.5em;
}
table.form td.field_value {
}
table.form td.field_value textarea {
	overflow: auto;
}
table.form td.buttons {
	text-align: right;
}


/*
 * Page header/footer (each module permits these)
 */
#page_header {
	margin-bottom: 1em;
}
#page_footer {
	margin-top: 1em;
}
#page_content {
	margin: 1em 0px;
}


/*
 * Popup window style
 */
body.popup {
	margin: 0px !important;
	padding: 0.5em !important;
	color: black !important;
	background-color: white !important;
	background-image: none !important;
	font-size: 90% !important;
}
body.popup a {
	color: red !important;
}
body.popup div.prev_next_links {
	text-align: left !important;
}



/*
 * Default style for error messages.
 */
div.error_message {
	border: solid 2px #f00;
	margin: 1em 0.5em;
	background-color: #fd7;
	color: #000;
}


/*
 * The page intro, typically a category description or intro
 * block from the module preferences.
 */
div#content div.intro {
	margin-bottom: 1em;
}




/*
 * Sublinks.
 */
div.sublinks {
	font-size: 8pt;
	text-align: right;
	margin-bottom: 1em;
	font-weight: bold;
}
div.sublinks a {
	padding: 1px 6px;
	color: #333;
	background-color: #ccc;
	border: outset 2px #ccc;
	text-decoration: none;
	margin: 0px 0.25em;
}
div.sublinks a:hover {
	text-decoration: underline;
}
div.sublinks a.active {
	background-color: #ccc;
	border: inset 2px #ccc;
}
div.sublinks a.active:hover {
	text-decoration: none;
}

/*
 * Search box.
 */
div.search_form {
	margin-bottom: 1em;
}


/*
 * Default style for CMS prev/next links.
 */
div.prev_next_links {
	text-align: center;
	margin: 0.75em 0px;
	word-spacing: 0.5em;
}
div.prev_next_links span.prev_next_number {
}
div.prev_next_links a.prev_next_link {
	font-weight: bold;
}
div.prev_next_links span.prev_next_button img {
	vertical-align: middle;
	border: none !important;
}
div.prev_next_links table {
	margin: auto;
	word-spacing: 0px;
	border: none;
	border-collapse: collapse;
}
div.prev_next_links table td {
	padding: 0px;
	margin: 0px;
	vertical-align: middle;
	border: none;
	border-collapse: collapse;
	border: solid 1px;
}
div.prev_next_links table td span.prev_next_number {
	display: block;
}
div.prev_next_links table td span.prev_next_number a {
	display: block;
	padding: 0px 0.5em;
}


/*
 * The category selector / links
 */
form.catselect {
	display: none;
	text-align: right;
	margin-bottom: 1em;
}
form.catselect span.label {
	font-weight: bold;
}
form.catselect select {
	font-size: 90%;
}
ul.catlinks {
	list-style-type: none;
	text-align: center;
	display: block;
	padding: 0.25em 0px;
	margin: 0.75em 0px;
	font-size: 90%;
	border: solid 1px;
	border-bottom: dotted 1px;
}
ul.catlinks li {
	display: inline;
	margin: 0px;
	padding: 0px;
}
ul.catlinks li a {
	font-weight: normal;
	padding: 1em 0.75em;
	white-space: nowrap;
	line-height: 2em;
	text-decoration: none;
}
ul.catlinks li a:hover {
	text-decoration: underline;
}
ul.catlinks li.selected a {
	font-weight: bold;
	text-decoration: none;
}

/*
 * The entry selector / links
 */
form.entselect {
	display: none;
	text-align: right;
	margin-bottom: 1em;
}
form.entselect span.label {
	font-weight: bold;
}
form.entselect select {
	font-size: 90%;
}
ul.entlinks {
	list-style-type: none;
	text-align: center;
	display: block;
	padding: 0.25em 0px;
	margin: 0.75em 0px;
	font-size: 90%;
	border: solid 1px;
	border-bottom: dotted 1px;
}
ul.entlinks li {
	display: inline;
	margin: 0px;
	padding: 0px;
}
ul.entlinks li a {
	font-weight: normal;
	padding: 1em 0.75em;
	white-space: nowrap;
	line-height: 2em;
	text-decoration: none;
}
ul.entlinks li a:hover {
	text-decoration: underline;
}
ul.entlinks li.selected a {
	font-weight: bold;
	text-decoration: none;
}

/*
 * The sorter
 */
form.entsorter {
	display: block;
	text-align: center;
	margin-bottom: 1em;
	font-size: 90%;
}
form.entsorter span.label {
	font-weight: bold;
	padding-right: 0.5em;
}
form.entsorter select {
	font-size: 85%;
}


/*
 * The index
 */
div.entindex {
	text-align: center;
	margin: 1em 0px;
	font-size: 90%;
	word-spacing: 0.25em;
}
div.entindex a {
}
div.entindex a:hover {
	text-decoration: none;
}
div.entindex span.selected {
	font-weight: bold;
}


/*
 * Thumbnails.
 */
#content div.thumbnail {
	float: right;
	margin: 0px 0px 0.5em 1em;
	text-align: center;
	font-size: 80%;
}
#content div.thumbnail img {
/* NOTE: If you set this to 'display:block' then you also have to set it
 * to 'float:right' or else it doesn't float properly. But then the image
 * doesn't center.
 */
/*
	display: block;
	float: right;
*/
	display: inline;
	border: solid 1px;
	margin: auto;
}
#content div.thumbnail div.caption {
}
#content div.thumbnail div.click_note {
	margin-top: 0.25em;
	font-style: italic;
}





/*
 * Hacks to make <div>s fully encompass floating elements (e.g. photos). 
 * Note: Safari has a bug where a compound class will break the fix.
 * (Works in Mozilla & Safari Only)
 */
div.floatwrapper:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/*
 * Turns elements on and off.
 */
div.javascript_show_hide {
	font-size: 90%;
	font-weight: bold;
	margin: 1em;
}


/*
 * Drop-down menus.
 */
/* This z-index is _critical_ for certain existing designs. DO NOT REMOVE. */
#main_links {
	position: relative;
	z-index: 1001;
}
#main_links a {
}
#main_links a img {
	padding: 0.25em 0px;
}
.main_link_group {
	padding: 0px;
	margin: 0px;
	list-style: none;
	position: relative;
/*	z-index: 1010; */
}
.main_link {
	position: relative;
	margin: 0px;
	padding: 0px;
}
/*
#main_link_group_1 { z-index: 1009; }
#main_link_group_2 { z-index: 1008; }
#main_link_group_3 { z-index: 1007; }
#main_link_group_4 { z-index: 1006; }
#main_link_group_5 { z-index: 1005; }
*/
/*
#main_links ul.main_link_group li.main_link ul {
	font-size: 90%;
	display: none;
	position: absolute;
	background-color: white;
	border: solid 1px #000;
	border-top: none;
	text-align: left;
	background-image: none;
	margin: 0px;
	padding: 0px;
	list-style: none;
	left: 0.25em;
}
div#main_links ul.main_link_group li.main_link ul li {
	position: relative;
	background-image: none;
	margin: 0px;
	padding: 0px;
	display: block;
}
div#main_links ul.main_link_group li.main_link ul li a {
	display: block;
	color: black;
	text-decoration: none;
	margin: 0px;
	padding: 3px 6px;
}
div#main_links ul.main_link_group li.main_link ul li a:hover {
	text-decoration: underline;
}
*/
/*
div#main_links ul.main_link_group li.hover {
	z-index: 1020;
}
div#main_links ul.main_link_group li.hover ul {
	display: block;
}
*/

@media print {
	body {
		color: black !important;
		background-color: white !important;
		font-size: 12pt !important;
	}
	#teasers {
		display: none !important;
	}
	#main_links {
		display: none !important;
	}
	div.sublinks {
		display: none !important;
	}
	#site_photo {
		display: none !important;
	}
	#content {
		width: auto !important;
		padding: 1em !important;
	}
	h1 {
		display: block !important;
	}
	h1 span {
		display: inline !important;
	}
	h1 span a {
		color: black !important;
	}
	h1 img {
		display: none !important;
	}
	h2 {
		display: block !important;
	}
	h2 span {
		display: inline !important;
	}
	h2 img {
		display: none !important;
	}
}






/*
 * The overlayer, used to display stuff.
 * Do not put 'display:none' on div#overlayer or else the
 * fade effects will not work.
 */
div#overlayer {
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: rgba(0,0,0,0.6);
	width: 100%;
	z-index: 10000;
	text-align: center;
	display: none;
}
div#overlayer_window {
	border: solid 2px #000;
	background-color: #fff;
	position: absolute;
/*	position: fixed; */ /* This is ideal, but does not work properly in IE. */
	z-index: 10001;
	color: black;
	border-radius: 10px;
}
div#overlayer_content {
	overflow: auto;
	padding-left: 0.75em;
	padding-right: 0.75em;
	border-bottom: dashed 1px #999;
	text-align: left;
	font-size: 90%;
}
div#overlayer_content div.overlay_heading {
	font-weight: bold;
	text-align: center;
	margin-bottom: 0.5em;
}
div#overlayer_content div.overlay_subheading {
	margin-top: 1em;
	margin-bottom: 0.25em;
	font-weight: bold;
}
div#overlayer_window a {
	color: blue;
}
div#overlayer_close {
	font-size: 90%;
	font-weight: bold;
}
div#overlayer_close a {
	color: black;
	text-decoration: none;
}


/*
#mep_0 {
	position: fixed;
	bottom: 0px;
}
*/

div#audio-player-footer {
	position: fixed;
	bottom: 0px;
	width: 100%;
	margin: 0px;
	padding: 0px;
	display: flex;
	background: black;
}
div#audio-player-footer div#audio-player-footer-info {
	width: 50%;
}
div#audio-player-footer audio {
	background-color: black;
	background-transparency: none;
	display: block;
	height: 40px;
	width: 50%;
	margin: 0px;
	padding: 0px;
}

@import url(teasers.css);

/*
 * Mobile stuff
 */
#navicon {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	padding: 2px;
	background-color: black;
	border-radius: 0 0 10px 0;
	z-index: 100000;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
	div#teaser_group_1, div#teaser_group_2 { float: none; clear: both; width: 100%; margin: 0px; }
	div#content {margin: 0 0 0 0; padding: .5em;}
	div#content_wrapper,
	div#header_content_footer_wrapper,
	div#header_content_footer_wrapper_2 { width: 100%; overflow-x: hidden;}
	div#main_links { display: none; }
	div#site_photo { display: none; }
	#navicon { display: block !important; }
	#navicon svg { fill: white;}
	#navicon svg:hover { fill: silver;}
	#navicon svg { width: 30px;}
	#navicon svg { height: 30px;}
	div#header h1#main_heading { font-size: 7vm; padding: 1em;}
}