/*

	style-apcweb.css - CSS style sheet for Apostolic Pentecostal Church web site (experimental)
	04/05/2016

*/


/* CSS for overall page definitions */

* { margin:0; padding:0 }
div { margin:0; padding:0 }
html { height:100.1%; line-height:.9em}
BODY {
	font-size: 16px;
	background: #271900;
	/* font-family: Signika, Tahoma, Arial, Geneva; */
	font-family: Arial, Helvetica, Sans-Serif;
	color: #516c82;
	margin:0px auto 0 auto;
	text-align:left;
	line-height:1.2em;
}

/* --- Media definitions to turn elements on or off depending on screen size --- */

/* Mobile small screen */
@media all and (max-width:1023px) and (min-height:1500px) {
	.header-main-menu-small ul {
		display:none;
	}

	.header-main-menu-large ul {
		display:none;
	}

	.header-main-address {
		display:none;
	}

	.header-main-menu-button ul {
		display:none;
	}

	.footer-main-menu ul {
		font-size:1.8em;
	}
}

/* Laptop/desktop small screen */
@media all and (max-width:1023px) and (max-height:1499px) {
	.header-main-menu-small ul {
		display:none;
	}

	.header-main-menu-large ul {
		display:none;
	}

	.header-main-address {
		display:none;
	}

	.header-main-menu-button ul {
		display:none;
	}

	.footer-main-menu ul {
		font-size:1.0em;
	}
}

/* Medium sized screen */
@media all and (min-width:1024px) and (max-width:1279px) {
	.header-main-menu-large ul {
		display:none;
	}

	.header-main-menu-compact ul {
		display:none;
	}

	.header-main-menu-button ul {
		display:none;
	}
}

/* Large screen */
@media all and (min-width:1280px) {
	.header-main-menu-small ul {
		display:none;
	}

	.header-main-menu-compact ul {
		display:none;
	}

	.header-main-menu-button ul {
		display:none;
	}
}

/* --- End of media definitions --- */


/* CSS for top nav bar menu */

.header-bar-main {
	background-color:#b41229;
	background-image: url("images/header-bar.png");
	color:#ffffff;
	text-align:center;
	font-size:16px;
	font-weight:bold;
	height:48px;
	width:100%;
	margin:0 auto;
}

.header-main {
	background-color:#452700;
	background-image: url("images/header-background.png");
	color:#fff;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size:14px;
	font-weight:bold;
	height:190px;
	width:100%;
	margin:0 auto;
	/* overflow:hidden; */
}

.header-main-page {
	width:80%;
	padding-top:0%;
	padding-bottom:0%;
	padding-left:1%;
	padding-right:1%;
	margin:0 auto;
	max-width:1024px;
}

.header-main-logo {
	width:50%;
	float:left;
	text-align:center;
	padding-top:10px;
	/* overflow:hidden; */
}

.header-main-address {
	background-color:#733f15;
	color:#e0dfde;
	float:left;
	width:30%;
	overflow:hidden;
	box-shadow: 5px 5px 2px #000000;
	box-sizing:border-box;
	border-style:solid;
	border-color:#a17040;
	border-radius:5px;
	font-size:16px;
	font-weight:bold;
	padding-top:15px;
	padding-bottom:15px;
	padding-left:40px;
	margin:15px 75px;
}

.header-main-menu-container {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size:18px;
	font-weight:bold;
	box-shadow: 1px 3px 5px #60594c;
	box-sizing:border-box;
	border-style:solid;
	border-color:#b8a375;
	border-radius:5px;
}

.header-main-menu-large {
	/* float:right; */
}

.header-main-menu-large ul {
	margin:20px 10px;
}

.header-main-menu-large li {
	display:inline;
	margin:40px 15px;
}

.header-main-menu-small {
	/* float:right; */
}

.header-main-menu-small ul {
	margin:20px 10px;
}

.header-main-menu-small li {
	display:inline;
	margin:40px 10px;
}

.header-main-menu-compact {
	/* float:right; */
	text-align:left;
}

.header-main-menu-compact ul {
	margin:20px 10px;
}

.header-main-menu-compact li {
	display:inline;
	margin:40px 10px;
}


/* CSS for main body of page */

.main-menu-body {
	/* background-color:#576450; This will make the top page line up with the header */
	background-color:#452700;
	background-image: url("images/header-background.png");
	color:#ffffff;
	width:100%;
	margin:0 auto;
}

.main-menu-body-content {
	background-color:#a56e32;
	color:#ffffff;
	box-sizing:border-box;
	border-style:solid;
	border-color:#b9a375;
	border-radius:10px;
	width:96%;
	margin:0 auto;
	text-align:center;
	font-size:16px;
	font-weight:bold;
}

.main-body {
	/* background-color:#271900; original color */
	/* background-color:#b8ab92; cream color */
	/* background-color:#404040; gray color */
	background-color:#576450; /* green color */
	background-image: url("images/body-background.png");
	width:100%;
	margin:0 auto;
	display:inline-block;
	text-align:center;
}

.main-body-page {
	background-color:#b8ab92;
	color:#e0dfde;
	width:80%;
	padding-top:1%;
	padding-bottom:1%;
	padding-left:1%;
	padding-right:1%;
	margin:0 auto;
	max-width:1024px;
}

.main-body-content {
	background-color:#211f1b;
	color:#e0dfde;
	box-sizing:border-box;
	border-style:solid;
	border-color:#b9a375;
	border-radius:10px;
	width:96%;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:1%;
	padding-right:1%;
	margin:0 auto;
}

.main-body-content hr {
	color:#b8ab92;
	background-color:#cd8e3e;
	height:5px;
	margin:35px;
}

.main-body-content-news {
	background-color:#211f1b;
	color:#e0dfde;
	box-shadow: 5px 5px 2px #000000;
	box-sizing:border-box;
	border-style:solid;
	border-color:#000000;
	border-radius:10px;
	min-width:250px;
	float:left;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:25px;
	margin:0 auto;
	text-align:left;
	font-size:.88em;
}

.main-body-content-spacer {
	width:15px;
	float:left;
}

.main-body-menu-button {
	width:100%;
	max-height:108px;
	max-width:234px;
	margin:0px 5%;
	text-align:left;
}

.main-body-photo {
	width:100%;
	max-height:325px;
}

.main-body-text {
	color:#e0dfde;
	margin:0px 10%;
	text-align:left;
}

.main-body-text-title {
	padding-top:25px;
	text-align:center;
}

.main-drop-shadow {
	background-color:#000000;
	color:#ffffff;
	height:5px;
	width:100%;
	margin:0 auto;
}

.main-photo {
	float:right;
	position:relative;
	/*
	width:580px;
	height:315px;
	*/
	width:550px;
	height:300px;
	margin:50px 10px 10px 25px;
}

.main-photo img {
	position:absolute;
	left:0;
	top:0;
	width:95%;
	height:95%;
}

/* CSS for page footer */

.footer-main-menu-container {
	width:100%;
	text-align:center;
}

.footer-main-menu {
	color:#e0dfde;
	display:inline-block;
	text-align:left;
}

.footer-main-menu ul {
	/* border-style:solid; */
	float:left;
	list-style-type:none;
	line-height:1.8em;
	/* width:150px; */
	margin:20px 20px;
	padding-left:5px;
	display:inline;
}

a.footer-main-menu {
	display: inline;
	text-decoration:none;
}

.footer-main-left {
	color:#e0dfde;
	float:left;
	margin:25px;
	text-align:left;
}

.footer-main-right {
	color:#e0dfde;
	float:right;
	margin:25px;
	text-align:right;
}


/* CSS for video areas */

#videos {
	font-family: Arial, Helvetica, Sans-Serif;
	width:100%;
	border-collapse:collapse;
}

#videos td, #videos th {
	font-size:1em;
	border:1px solid #cd8e3e;
	padding:10px 10px 10px 10px;
}

#videos th {
	font-size:1.1em;
	text-align:left;
	padding-top:10px;
	padding-bottom:10px;
	background-color:#4c3100;
	color:#ffffff;
}

#videos tr.alt td {
	color:#000000;
	background-color:#EAF2D3;
}


/* CSS for miscellaneous functions */

.clr
{
	clear:both;
}

a {
	color:#ef882c;
	text-decoration:none;
}

a:hover {
	color:#fff
}

a.nav-link:link {
	color:#f8f3e1;
	text-decoration:none;
}

a.nav-link:visited {
	color:#f8f3e1;
	text-decoration:none;
}

a.nav-link:hover {
	color:#e2952e;
	text-decoration:none;
}

a.nounder:link{
	color:#fff;
	text-decoration:none
}

a.nounder:visited{
	color:#fff;
	text-decoration:none
}

a.nounder:hover{
	color:#d9aa1a;
	text-decoration:none
}

.headline {
	color:#f2f2f1;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size:1.4em;
	font-weight:bold;
	line-height:25px;
}

.headline-gold {
	color:#cd8e3e;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size:1.4em;
	font-weight:bold;
	line-height:25px;
}

.button-gold {
	background-color: #7e4f13;
	color: #f6f0f0;
	font-size: 16px;
	font-weight:bold;
	border: none;
	border-radius:4px;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
}

.button-gold:hover {
    background-color: #ffffff;
    color: black;
}

.category-left {
	background:#4c3100;
	padding:10px;
	width:47%;
	border:#cccbc9 1px solid;
	height:100%;
	color:#f2f2f2;
	float:left;
	text-align:left;
}

.category-right {
	background:#4c3100;
	padding:10px;
	width:47%;
	border:#cccbc9 1px solid;
	height:100%;
	color:#f2f2f2;
	float:right;
	text-align:left;
}

.directions-map {
	float:right;
	text-align:center;
	width:auto;
	height:auto;
	max-width:580px;
	max-height:315px;
	margin:50px 10px 25px 25px;
}

.events-date {
	color:#e48023;
}

.events-title {
	color:#cd8e3e;
	text-align:center;
	font-weight:bold;
	font-family:Zapf Chancery,cursive,Arial,Helvetica,Sans-Serif;
	font-size:1.5em;
	line-height:25px;
}

.events-details {
	color:#ccc;
}

.media-list {
	font-size:24px;
	margin:0px 5%;
}

.media-table {
	font-size:14px;
	text-align:left;
}

.mediaplayer-audio-info {
	padding-top:25px;
	display:inline-block;
	text-align:left;
	line-height:1.4em;
}

.mediaplayer-audio-player {
	padding-top:50px;
	display:table;
	margin:0 auto;
}

.mediaplayer-audio-player-controls {
	max-width:640px;
}

.mediaplayer-video-player {
	padding-top:25px;
	display:table;
	margin:0 auto;
}

.mediaplayer-video-player-controls {
	max-width:720px;
}

.image-outer-left {
	float:left;
	border:5px solid #cd8e3e;
	margin-right:25px;
	margin-bottom:15px;
}

.image-outer-right {
	float:right;
	border:5px solid #cd8e3e;
	margin-left:25px;
	margin-bottom:15px;
}

.image-outer-left-noborder {
	float:left;
	margin-right:25px;
	margin-bottom:15px;
}

.image-outer-right-noborder {
	float:right;
	margin-left:25px;
	margin-bottom:15px;
}

/* Dropdown menu testing */

/* Style The Dropdown Button */
.dropbtn {
    background-color: #000000;
	color:#fff;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size:14px;
	font-weight:bold;
    padding: 15px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}