/* 	HERE BEGINS MY OWN CSS, WHICH IS BEING ADDED INTO THE STYLESHEET IN WORDPRESS TWENTYTHIRTEEN 

NAMING RULES FOR ID'S ON THIS PAGE AND EVENTS PAGE:
	*ID and NAME tokens must begin with a letter ([A-Za-z]) 
	*May be followed by any number of letters, digits ([0-9]), hyphens ("-").
	*Lowercase only
	*Use hyphens only, no underscores.
	*Start with group or sub-group, like "mcfn" or "mcfw" or "qccsa".
	*Next something unique about this event, like "qccsa-fishtales-2015-10-10".
	*Last the date, like "qccsa-fishtales-2015-10-10".
	*Date format is yyyy-mm-dd.
	*If that level of detail is not enough, add "-#" at end.
*/
body { color: #000000;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 16px;
	line-height: 1.3em;
	vertical-align: top;
	background-color: #99ccff;
	left: 0px;
	margin-top: 0px;
	margin-left: 0px;
	margin: 0px;
	top: 0px;  }

/*MEDIA QUERIES BEING TESTED */
@media all and (min-width: 760px) {
body { font-size: 17px;  }
.div-column { width: 48%}
}

@media all and (max-width: 759px) and (min-width: 600px) {
body { font-size: 16px;  }
.div-column { width: 100%}
}

@media all and (max-width: 599px) and (min-width: 500px) {
body { font-size: 15px;  }
.div-column { width: 100%}
}

@media all and (max-width: 499px) and (min-width: 200px) {
body { font-size: 13px;  }
}

/*END OF MEDIA QUERIES TEST */
/* WIDTH DEFINITIONS BELOW HERE */
.width-24pc { width: 24%;
	min-width: 100px;
	/*GOOD FOR UP TO 4 COLS PER LINE */  }

.width-32pc { width: 32%;
	min-width: 100px;
	/*GOOD FOR UP TO 3 COLS PER LINE */  }

.width-48pc { width: 48%;
	min-width: 100px;
	/*GOOD FOR UP TO 2 COLS PER LINE */  }

/*  PAGE FORMAT DEFINITIONS: */
.content-div { background-color: #ffffff;
	width: 95%; /*CHANGED FROM 90% ON 12/21/15 */
	margin: auto;    /*20px auto 8px; CHANGING THIS 12/21/15 SINCE WHITE "PAGE" MARGIN IS TOO WIDE */
	/*  padding:1px; TAKING OUT 12/21/2015 */
	/* max-width: 955px;  COMMENT THIS OUT SINCE CONTENT SEEMS TOO NARROW AGAINST WHITE "PAPER" 12/21/2015 */
	min-width: 240px;
	height: auto;
	overflow: auto;
	border: none;
/*	*************moved here from top.php************
	style="background-color:#ffffff; width:90%; max-width:955px; margin-left:auto; margin-right:auto; margin-top:20px; margin-bottom:8px; padding:1px; border:none;"
	**************************
*/
/*Use this on top of each page, to give the white "page" with a clean border */  }

* { /*The box-sizing property lets you make the width attribute INCLUDE the padding & border. It still won't include the margin!*/
	box-sizing:border-box}

.div-column { /*FOR HALF OF PAGE */
	display: inline-block;
	float: left;
	min-width: 220px;
	height: auto;
	margin: 4px;
	vertical-align: top; 
	box-sizing: border-box; }

.byline { /*Use for an article's byline */
	text-align: left;
	font-style: oblique;
	font-weight: 500;  }

.my-shadow { -moz-box-shadow: 3px 2px 16px #393a4f;
	-webkit-box-shadow: 3px 2px 16px #393a4f;
	box-shadow: 3px 2px 16px #393a4f;  }
	
.shadow1 {-webkit-box-shadow:-2px 2px 2px 2px rgba(0,0,0,0.5);  
		-moz-box-shadow:-2px 2px 2px 2px rgba(0,0,0,0.5);
		box-shadow: -2px 2px 2px 2px rgba(0,0,0,0.5);	}	

.front-page-item { width: 100%;
	clear: left;
	vertical-align: top;
	height: auto;
	overflow: auto;  }

.events-row { display: block;
	width: auto;
	padding: 5px 10px;
	height: auto;
	overflow: auto;  }

/* Gradient transparent - color - transparent */
.border-fadesout { /*This from http://css-tricks.com/examples/hrs/ called hr.style-two. Doesn't work on paragraphs. */
    border: 0;
	height: 2px;
	margin: 20px;
	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));  }

.event-col-1 { display: inline-block; /*	border-bottom: 1px black solid; */;
	width: 13%;
	vertical-align: top;
	float: left;
	padding: 1px;
	height: auto;
	overflow: auto;  }

.event-col-2 { display: inline-block; /*	border-bottom: 1px black solid;  */;
	padding-left: 8px;
	width: 82%;
	float: left;
	padding: 1px;
	height: auto;
	overflow: auto;  }

.menu-text { font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	color: whitesmoke;
	text-decoration: none;
	background-color: #3333cc;
	font-weight: 600;  }
	
.cell {vertical-align:top;
	padding:5px;
    border-bottom: 1px solid #ddd;
	}	

.row {display:inline;
	vertical-align:top;
	padding:5px;
	}
.gainsboro {background-color:gainsboro;
}

a:link { font-size: 0.95em;
	font-weight: 600;
	color: #3333cc;  
	text-decoration:none; 
	target:new;}
	
a:hover { color: #0000FF;
	background-color: #FFFF99;  
	text-decoration:none; }
		
	
a:visited { color: #8a4f48; 
	text-decoration:none; }

a:active { color: rgb(255, 0, 0);  }

a.menu-text :hover {color: yellow;
	font-size:larger; 
	text-decoration:none;
	target:current; }


.highlight {background-color:#FFFF66;}

.black-bg {background-color:black;}

p { font-size: 100%;
	margin: 0px 0px 10px 0px;
	line-height: 150%;
	text-align: left;  }

p.no-top-margin { padding: 0px;
	margin-top: 0px;
	margin-left: 8px;  }

p.essay-subhead { font-weight: 700;
	margin-top: .25em;
	margin-bottom: .25em;
	font-style: oblique;  }

p.event-col hr { padding: 0px;  }

h1 { color: #000000;
	margin: 0.5em;
	font-weight: 800;
	font-size: 200%;
	line-height: 150%;
	text-align: center;;  }

h1.essays { color: #000000;
	font-weight: 800;
	font-size: 200%;
	line-height: 150%;
	text-align: left;
	margin: .25em 1em 0.5em 0;  }

h2 { color: #000000;
	font-weight: 800;
	font-size: 150%;
	line-height: 150%;
	text-align: left;;
	margin: .25em 1em 0.5em 0;
	vertical-align: top;  }

h3 { color: #000000;
	font-weight: 800;
	font-size: 125%;
	line-height: 125%;
	text-align: left;;
	margin: 0.75em 0;
	padding: 0px;  }

.essay-topic { display: block !important;
	margin-top: 0;
	clear: both; !important;
	background-color: #ccccff;
	border-bottom: thin #006699 solid;  }

h4 { color: #000000;
	font-weight: 800;
	font-size: 100%;
	text-align: left;;
	line-height: 125%;
	vertical-align: top;
	margin: 0.75em 1em 1em 0;
	padding: 0px;  }

h5 { color: #000000;
	font-weight: 800;
	font-size: 100%;
	text-align: left;;
	line-height: 120%;
	vertical-align: top;
	margin: 1em 1em 1em 0;
	padding: 0px;  }

img { background-position: left top;
	margin: 0px;
	padding: 0px;
	border: 0px;  }
	
.essay-author {text-align:center;
	border:5px indigo double;	}	

.event-thumb { border-style: none;
	float: left;
	width: 25%;
	height: auto;
	max-width: 300px;
	min-width: 200px;
	margin: 1px 10px 10px 0;	
	/*For the small image at the left on the Events page */  }
	
.event-past-thumb { border-style: none;
	float: left;
	width: 41.666%;
	height: auto;
	max-width: 500px;
	min-width: 300px;
	margin: 1px 10px 10px 0;	
	/*For the small image at the left on the Events page */  }


.event-thumb-wide { float: left;
	border-style: none;
	margin: 1px 10px 10px 0;
	width: 37.5%;
	min-width: 200px;
	height: auto;  }

.event-org-logo { float: right;
	margin: 1px 0 10px 10px;  }

img.bio { float: left;
	vertical-align: top;
	width: 25%;
	max-width: 300px;
	min-width: 200px;
	height: auto;
	margin: 0 15px 15px 0;
	border: 0;  }

img.bio-front-page { float: right;
	width: 50%;
	max-width: 200px;
	min-width: 100px;
	border: 0;
	margin: 10px 0px 10px 8px;  }

.left { float: left;  }

.right { float: right;  }

.article-head-home-page { font-size: 100%;
	font-family: arial,helvetica,sans-serif;
	font-weight: 700;  }

.title-long-work { 
	font-style:italic;
	/*Websites, books, TV shows, play, film, newspaper, album */  }

/*title of a short work 
	Use double quotes. In MailChimp, must remake any double quotes so they aren't weird.
	Use for titles of ...
    Poems
    Newspaper Articles
    Short Stories
    Magazine Articles
    Web Pages
    Songs
    Chapters
    TV Show Episodes 
    (Note: this wouldn't work as a class.)*/
}
img.padme { padding: 4px;  }

.border-1 { border: 1px black}


.box-shadow-to-left { -webkit-box-shadow: #888888 -4px 4px 4px;
	-moz-box-shadow: #888888 -4px 4px 4px;
	box-shadow: #888888 -4px 4px 4px;  }

.box-shadow-down { -webkit-box-shadow: #888888 0px 4px 4px;
	-moz-box-shadow: #888888 0px 4px 4px;
	box-shadow: #888888 0px 4px 4px;  }

.box-shadow-to-right { -webkit-box-shadow: #888888 10px 4px 4px;
	-moz-box-shadow: #888888 4px 4px 4px;
	box-shadow: #888888 4px 4px 4px;  }

figure { width: 97%;
	height: auto;
	overflow: visible;
	margin: 0 0 1em 0;
	padding: 0.2em;
	border: thin gray solid;  }

figcaption { display: block;
	width: 97%;
	font-size: 0.8em;
	font-weight: 700;
	padding: 1em 0.5em 1em 0.5em;
	float-left: auto;
	float-right: auto;
	text-align: center !important;  }

//FIGCAPTION NOT CENTERING, SO USE CLASS IN A DIV INSTEAD

.center {  //Use this for most items that have nothing besides them.
	display: block;   
	margin-left: auto;  
	margin-right: auto; }
	
.centered { display: block;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;  }

.gradient-yellow-orange { height: auto;
	overflow: auto;
	background: -webkit-linear-gradient(#ffff99, #f8992b); /* For Safari */;
	background: -o-linear-gradient(#ffff99, #f8992b); /* For Opera 11.1 to 12.0 */;
	background: -moz-linear-gradient(#ffff99, #f8992b); /* For Firefox 3.6 to 15 */;
	background: linear-gradient(#ffff99, #f8992b); /* Standard syntax (must be last) */  }

li { list-style-position: outside;
	font-size: 100%;
	margin: 10px;
	padding-left: 15px;  }

ol { text-align: left;
	list-style-type: decimal;
	list-style-position: inside;
	line-height: 120%;
	margin-top: 0.1em;
	margin-bottom: 1em;
	margin-left: 0em;
	font-size: 100%;
	/* margin-left: -1em */  }

ul { text-align: left;
	list-style-position: outside;
	line-height: 120%;
	margin-top: 0.1em;
	margin-left: 0em;  }

.ul-for-speaker-talks { text-align: left;
	list-style-position: outside;
	line-height: 120%;
	margin-top: 0.1em;
	margin-bottom: 1em;
	margin-left: 0em;  }

table { text-align: left;
	line-height: 120%;
	vertical-align: top;
	padding: 0px;
	border-top: 0;
	border-right: 0;
	border-left: 0;  }

td { font-size: 100%;
	text-align: left;
	line-height: 120%;
	vertical-align: top;  }

/*Use CSS instead of real tables, so mobile screens don't have issues */	
.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell;
	padding:5px; }	

/* SINCE EVERYTHING'S IN A TABLE, MUST SPECIFY FONT INFO FOR TD'S. THE "BODY" TAG DOES NOT CHANGE FONTS INSIDE A TABLE.*/
td.rounded { border-radius: 16px;
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;
	border: 2px outset #5A86A3;
	/* this code generated by http://www.cssportal.com/css3-rounded-corner/ */  }

.left { text-align: left;  }

.blue-gradient { background: #d0e4f7;
/* old browsers */background: -moz-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 57%, #1D018E 97%); /* firefox */;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0e4f7), color-stop(24%,#73b1e7), color-stop(57%,#0a77d5), color-stop(97%,#2D119E)); /* webkit */;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#1D018E',GradientType=0 ); /* ie */  }

.borders { border: 1pt;
	border-color: black;
	border-style: solid;  }

/*  Use .borders to get borders ON in a table. Otherwise, they're off! */
.borders-white-2px { border-style: solid;
	border-width: 2px;
	border-color: #ffffff;
	cellspacing: 0px;
	padding: 0px;  }

.borders-bottom { border-bottom-color: #000000;
	border-bottom-style: solid;
	border-bottom-width: thin;  }

.borders-bottom-right { border-bottom-color: #000000;
	border-bottom-style: solid;
	border-bottom-width: thin;
	border-right-color: #000000;
	border-right-style: solid;
	border-right-width: thin;  }

.button-red { color: rgb(230, 230, 230);
	font-size: 16px;
	padding: 16px;
	border-radius: 30px;
	background: rgb(210, 20, 20);
	background: -moz-linear-gradient(90deg, rgb(210, 20, 20) 30%, rgb(250, 20, 20) 70%);
	background: -webkit-linear-gradient(90deg, rgb(210, 20, 20) 30%, rgb(250, 20, 20) 70%);
	background: -o-linear-gradient(90deg, rgb(210, 20, 20) 30%, rgb(250, 20, 20) 70%);
	background: -ms-linear-gradient(90deg, rgb(210, 20, 20) 30%, rgb(250, 20, 20) 70%);
	background: linear-gradient(0deg, rgb(210, 20, 20) 30%, rgb(250, 20, 20) 70%);
	-webkit-box-shadow: 3px 2px 1px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 3px 2px 1px rgba(50, 50, 50, 0.75);
	box-shadow:         3px 2px 1px rgba(50, 50, 50, 0.75);  }

.callout { display: block;
	width: 90%;
	background-color: #eeeeee;
	border: 3px #000 double;
	padding: 1.5em;
	margin: 3em;
	margin-left: auto;
	margin-right: auto;  }

.content-table { -webkit-border-radius: 4px;
	-webkit-border-bottom-left-radius: 0;
	-moz-border-radius: 4px;
	-moz-border-radius-bottomleft: 0;
	border-radius: 4px;
	border-bottom-left-radius: 0;  }

.div-with-borders { border-style: solid;
	border-width: 3px;
	border-color: #3333cc;
	padding: 5px;  }

.div-with-padding { padding: 8px;  }

.div-centered-grey-border { position: relative;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	width: 95%;
	border-width: thin;
	border-style: solid;
	border-color: #999999;
	text-align: center;  }

.hilight { background: #ffff99;  }

/* Making a less painful yellow instead of MCF's "standard" FFFF33.*/
.bg-black { background: #000000;  }

.bg-light-blue { background: #ddffff;  }

.bg-light-warm-blue { background: #d2efff;  }

.bg-light-gray { background: #cccccc;  }

.bg-verylight-gray { background: #eeeeee;  }

.bg-pale-weak-yellow { background: #ffffcc;  }

.bg-dead-warm-tan { background: #d6b7bc;  }

.image-caption { margin-top: 0.5em;
	margin-bottom: 1em;
	font-size: 90%;
	border: 1px darkblue double;
	padding: 0.5em;
	margin: 1em;
	left: 1em;
	display: inline-block;  }

img.center { display: block;
	margin-left: auto;
	margin-right: auto;  }

.LeftMargin8 { margin-left: 8px;  }

.Image-margins-all { margin: 8px;  }

.Image-margins-right-and-bottom { margin-left: 0px;
	margin-bottom: 8px;
	margin-right: 8px;
	margin-top: 0px;  }

.Image-margin-right-only { margin-left: 0px;
	margin-bottom: 0px;
	margin-right: 8px;
	margin-top: 0px;  }

.Image-margins-left-and-bottom { margin-left: 8px;
	margin-bottom: 8px;
	margin-right: 0px;
	margin-top: 0px;  }

.Image-margins-left-top-bottom { margin-left: 8px;
	margin-bottom: 8px;
	margin-right: 0px;
	margin-top: 8px;  }

.Image-margins-right-top-bottom { margin-left: 0px;
	margin-bottom: 8px;
	margin-right: 15px;
	margin-top: 8px;  }

.Image-margin-left-only { margin-left: 8px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-top: 0px;  }

.Image-margin-left-and-top { margin-left: 8px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-top: 8px;
	margin-top: 8px;  }

.Image-margins-top { margin-left: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-top: 8px;  }

.Image-margins-top-and-bottom { margin-left: 0px;
	margin-bottom: 8px;
	margin-right: 0px;
	margin-top: 8px;  }

.Text-color-white { color: white;  }

.lib-pg-header { color: #000000;
	font-weight: 800;
	font-size: 12pt;
	text-align: left;
	margin-left: 0px;
	vertical-align: top;  }

/*Use at right of the normal page head image on Library pages*/
.less { text-indent: 10pt;
	margin-top: 8pt;
	margin-bottom: 8pt;  }

/*   The "less" class is to reduce the space after a paragraph, and add space before the paragraph, as in the library listings*/
.sans-serif { font-family: Verdana, Arial, Helvetica, sans-serif;  }

.order-page-header { color: #000000;
	font-weight: 800;
	font-size: 12pt;
	text-align: center;
	vertical-align: top;  }

/*Use at top of the pages where you don't want normal header & rail, like order form pages */
.section { font-size: 11px;
	color: black;
	font-weight: bold;
	margin-top: 12px;
	margin-bottom: 3px;
	text-align: left;;  }

/* Used in Library-by-Age page to get age-level section headers */
/*    Use "short" to reduce space above and below paragraph */
.short { margin-top: -1em;
	margin-bottom: -1em;  }

/* Used for small menu at bottom left */
.small-menu { font-size: 8pt;
	font-weight: bold;
	margin-left: 4pt;
	margin-top: 0pt;
	margin-bottom: 0.5em;  }

.small-6pt { font-size: 6pt;
	font-weight: bold;
	margin-left: 3pt;
	margin-top: 0pt;
	margin-bottom: 0.5em;  }

.lowerAlphaList { text-align: left;
	list-style-type: lower-alpha;
	list-style-position: outside;
	margin-left: 0.5em;
	margin-top: 0.1em;
	margin-bottom: 1em;  }

/*Use to get an upper case alpha Ordered List*/
.upperAlphaList { text-align: left;
	list-style-type: upper-alpha;
	list-style-position: outside;
	margin-top: 0.1em;
	margin-bottom: 1em;  }

/*Use to get an upper case alpha Ordered List*/
.update { font-size: larger;
	color: #993300;  }

.strikeout { text-decoration: line-through;  }

.bg-d2e4ff-lt-blue { background-color: #d2e4ff;  }

.blue-text { color: #0000FF;  }

.newspaper-2col { column-count: 2;
	-moz-column-count: 2; /* Firefox */;
	-webkit-column-count: 2; /* Safari and Chrome */  }

.periodical-title { font-style: italic;
	font-weight: bold;
	color: #000099;  }

.presentation-title { font-style: italic;
	font-weight: bold;
	color: #000099;
	margin-top: 10px;
	margin-bottom: 0px;  }

.pagefooter {
	font-weight: bold;
	color: #ffffff;
	padding: 1em;
	text-align: center;
/*	background-color:#3333cc; */  }

#logo-position { height: auto;
	width: auto;
	left: 25px;  }

.header-menu-item { font-family: Helvetica,Arial,non-serif;
	font-weight: 600;
	font-size: 1.2em;
	text-decoration-line: none;
	padding: 6px 10px;
	color: aliceblue;
	text-shadow: 2px 2px #222222;  }

/* For the header on a new Event page, for single event. Transfer to all new pages when ready. */
.frame { padding: 3px;
	border: 1px solid #aaa;  }

/*Creates a frame around image */
.textmiddle { vertical-align: middle;  }

/*Aligns image in middle of text line */
.myth-header { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
	font-size: 200%;
	color: #000;
	background-color: gainsboro;
	line-height: 125%;
	margin-bottom: 10px;  }

.myth-argument { font-family: Arial, Helvetica, sans-serif;
	font-size: 150%;
	color: #0000aa;
	line-height: 125%;
	margin-bottom: 10px;  }
	
/*EMBED IFRAME VIDEO AND MAKE IT RESPONSIVE */

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*CODE TO MAKE GOOGLE MAPS' IFRAME RESPONSIVE */
.google-maps { /*APPY THIS TO A CONTAINER DIV */
    position: relative;
    padding-bottom: 90%; // (450 ÷ 500 = 0.9 = 90%)
    height: 0;
    overflow: hidden;
}
.google-maps iframe { /*THIS WILL BE APPLIED AUTOMATICALLY TO THE IFRAME OF THE MAP INSIDE THE GOOGLE-MAPS' DIV */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

	

/* 	HERE ENDS MY OWN CSS, WHICH IS BEING ADDED INTO THE STYLESHEET IN WORDPRESS TWENTYTHIRTEEN */