/* 
**	Style sheet for Marin Sangha website MarinSangha.org
**	RCS info: $Id: marin_sangha.css,v 1.138 2025/03/19 18:17:30 bill Exp bill $
*/

body {
	font-family : Arial, Verdana, sans-serif;
	font-size : 12pt;
}

div.outer {
	/* needed for sticky menu! */
	width: 100%;
}

.frame {
	/* our outer frame */

	/* padding is top, right, bottom, left */
	padding: 0px 0px 0px 0px;
}

.sidebar {
	/* on the left side, contains the schedule and its header */

	/* padding is top, right, bottom, left */
	padding: 0px 10px 0px 10px;

	min-width:	300px;
	width: 25%;
}
.contentpanel {
	/* contains actual page-specific content */

	/* padding is top, right, bottom, left */
	padding: 0px 10px 10px 10px;
}

.schedule {
	background: linear-gradient(white, silver);
	width:100%;
}

.centerbutton {
	/* centers a button.  width determined by size of the button image.
	** the margin is auto on L and R, that's what centers!
	*/
	width: 115px;
	margin: 10px auto 10px auto;
}

.foot {
	text-align: center;
	margin: 12px 12px 12px 12px;
}
p.smallprint {
	font-weight: bold;
	font-size: 1em;
	color: #AFAFAF;
}

table.connections {
	/* for facebook/Groups.io grp/email links at top of pages */
	position : absolute;
	top: 15px;
	right: 40px;
	width: 300px;

	font-size: 0.8em;
}

h1, h2, h3, h4, h5 {
	font-family: "Copperplate Gothic", "Times New Roman", Times, serif;
	margin: 0;
	padding: 5px;
	font-weight: bold;
}

/* Basic links in text */
a {
	text-decoration: none;
	font-weight: normal;
	color: #720505;
}
a:hover {
	text-decoration: underline;
	color: #C80505;
}
a:active, a:focus, a:visited  {
	outline: 0;
	box-shadow: none;
}

/* Stuff shared by all pictures */
img.Pic, img.lPic, img.RIP_Pic, img.PicLink, img.dirpic, img.nopic {
/* args: hor-shadow, vert-shadow, blur dist, shadow size, shadow color */
	box-shadow: 0 0 9px 3px #FADC8C; 
	padding: 6px 6px 6px 6px;
	margin: 10px 10px 10px 10px;
}
img.dirpic {
	width: 100%;
	height: auto;
}
img.RIP_Pic {
	box-shadow: 0 0 9px 3px black; 
	float: left;
}
img.lPic {
	width: 20%;
	float: left;
}
img.PicLink {
	/* For showing right-aligned clickable pix */
	border: 3px solid #720505;
	float:right;
}
img:hover.PicLink {
	border: 3px solid #C80505; 
}

img.banner { 
	width: 100%;
	height: auto;
	vertical-align: top;
}
figure {
	margin: 6px 6px 6px 6px;
}
figcaption {
	/* padding is top, right, bottom, left */
	text-align: center;
	font-style: italic;
}

div.bio {
	/* Teacher bio */

	/* margin is top, right, bottom, left */
	margin: 12px 12px 0 12px;
	clear: both;
}

div.nav_panel {
	/* For the nav panel, this makes it sticky */

	/* webkit-sticky is for Safari */
	position: -webkit-sticky; 
	position: sticky;
	top: 10px;
	line-height: 1.4em;

	/* needed to keep our space when mobile and menu disappears */
	height: 30px;

	background: white;
}
.nav .burger_icon {
	/* the hamburger icon button */
	display: none;
}

/* the navigation menu */
.nav {
	list-style: none;

	/* margin is top, right, bottom, left */
	margin: 6px auto 0px 0px;
	padding: 0;

	display: inline-block;
	width: 99%;
	font-size : 10pt;
	font-weight: bold;
}

.nav a {
	/* this depends on # of buttons */
	width: 10.7%; 

	display: block;

	height: 12px;

	/* padding is top, right, bottom, left */
	padding: 2px 4px 8px 4px;
	margin: 0px 0px 4px 6px;

	float: left; 
	color: #720505;

	text-decoration: none;
	text-align: center;
	background: linear-gradient( #EBCA7B, white );
}
.nav a:hover {
	background: linear-gradient( White, #EBCA7B );
	color: #C80505;
}

/* a lot of arm-waving to mark the current page tab */
body#news a#newsnav,
body#talks a#talksnav,
body#teachers a#teachersnav,
body#resources a#resourcesnav,
body#connect a#connectnav,
body#about a#aboutnav,
body#donations a#donationsnav,
body#schedule a#schedulenav,
body#index a#indexnav 
{
	background: linear-gradient( White, #EBCA7B );
}

a#schedulenav {
	/* invisible except in mobile mode */
	display: none;
}

/* The Close Button (x) closes popups and hamburger menu */
.close_icon {
	position: absolute;
	right: -15px;
	top: -15px;

	font-size: 30px;
	font-weight: bold;
	text-align:	center;

	color: black;
	background: white;

	border: 2px solid #888;
	border-radius: 50%;

	width: 30px;
	height: 30px;
	padding: 0.5em;
}
.nav .close_icon {
	/* for the inactive hamburger menu */
	display: none;

	min-height: 15px;
	min-width: 20px;
}
.close_icon:hover,
.close_icon:focus {
	color: red;
	background: white;
	cursor: pointer;
}
img.burger {
	width: auto;
	height: 24px;
}
/* End navigation stuff */

/* Buttons */
a.button {
	color: #720505;
	background: linear-gradient( #EBCA7B, White);

	/* gives us a little break between buttons */
	/* margin is top, right, bottom, left */
	margin: 2px 2px 2px 2px;
	padding: 2px 8px 2px 8px;

	white-space: nowrap;
}
a.button:hover {
	background: linear-gradient( White, #EBCA7B );
	text-decoration: none;
	color: #C80505;
}

/* general flotation ... */
.right {
	float: right;
}
.left {
	float: left;
}

/* box with nice shadow border */
div.shadowbox {
	box-shadow: 0 0 9px 3px #960505;
	padding: 6px 6px 6px 6px;

	/* margin is top, right, bottom, left */
	margin: 10px auto 20px auto;
	width:90%;
}

div.donatebox {
	width:160px;
	margin: 10px auto 10px auto;
}

/* highlight things in lists */
.special {
	background-color: #F8F4B0;
}

/* table is used for list of recordings and for schedule */
td {
	/* padding is top, right, bottom, left */
	padding: 4px 0 4px 5px;
	vertical-align: text-top;
}

/* to highlight the talk title */
.talk {
	background-color: #FAE592;
	padding: 4px 0 4px 20px;
}

p.clear {
	/* replaces old <br clear="all"> */
	clear: both;
}

hr {
	width: 60%;
}

/* stuff for the email signup form */
div.emailsubscribe {
	box-shadow: 0 0 9px 3px #C8C8C8;
	background-color: #FADC8C;

	/* padding is top, right, bottom, left */
	padding: 6px 15px 6px 15px;
	margin: 10px auto 10px auto;
	width: 80%;
}

input[type=text], input[type=email] {
	width: 100%; 
	padding: 8px; 
	border-radius: 4px;
	box-sizing: border-box; /* keep padding and width in place */
	margin-top: 6px; 
	margin-bottom: 6px; 
	background-color: #DDDDDD;
}

/* Add a background color when the inputs get focus */
input[type=text]:focus, input[type=email]:focus, textarea:focus {
	background-color: White;
	border: 1px solid SteelBlue;
}
input: invalid {
	border: 2px solid red;
}
input: valid {
	border: 2px solid grey;
}

/* popups */
.popup, .err_popup {
	display: block; 

	/* 'fixed' looks nicer but we need to scroll */
	position: absolute; 
	box-shadow: 0 0 9px 3px #960505;

	/* margin is top, right, bottom, left */
	margin: 0px 0px 0px 0px; 
	border: 2px solid #888;
	border-radius: 10px;
}
.err_popup {
	left: 100px;
	top: 340px;
	width: 30%;

	background-color: #f2f2f2;

	/* padding is top, right, bottom, left */
	padding: 40px 80px 80px 80px;
}
.popup {
	left: 140px;
	top: 130px;
	width: 60%;

	background-color: white;

	/* padding is top, right, bottom, left */
	padding: 20px 20px 20px 20px;
}

/* 
** Can we be nicer on mobile? 
** Well, iphones yes, but not everything else
*/
@media screen and ( max-width: 802px ) 
{
	.sidebar {
		display: none;
	}
	.contentpanel {
		/* padding is top, right, bottom, left */
		padding: 0px 5px 0px 5px; 
	}

	/* burger stuff */
	.nav a {
		/* hide normal buttons */
		display: none;
	}
	.nav .burger_icon {
		/* reveal burger icon/button */
		display: block;
		background: transparent;

		/* no we can't put it in the banner, we need that
		** white panel when we scroll.
		*/
		position: absolute;
		top: 5%;
		right: 1%;
	}
	.nav .burger_icon:hover {
		background: white;
	}
	.nav .close_icon {
		/* don't show the close_icon */
		display: none;
	}
	.nav.responsive {
		position: absolute;
		left: 30px;
		top: 10px;
		width: 40%;

		background: white;
		padding: 5px 10px 5px 5px;
		border: 2px solid #888;
	}
	.nav.responsive .burger_icon {
		display: none;
	}
	.nav.responsive .close_icon {
		background: white;
		display: inline-block;
		width: 11%;
	}
	.nav.responsive a {
		float: none;
		display: block;
		font-size : 14pt;
		border: 2px solid #888;
		width: 90%;
	}
	.responsive a#schedulenav {
		/* show the schedule button in nav */
		display: inline-block; 
	}
	body#schedule .sidebar { 
		/* put schedule on separate page */
		display: block; 
	}
	.popup {
		width: 75%;
		left: 20px;
		top: 30px;
	}
	table.connections {
		display: none;
	}
}