/* fixes to the w3 style sheet */
/* w3 used inherit, but doesn't work in explorer */
.w3-button {
	color:white;
	background-color:black;
}

/* critical style section */

/* ul bullets will overlap a floating image - give them some space */
.trivia-item ul {
    list-style: outside disc;
    margin-left: 1em;
}
.trivia-item ul li {
    position: relative;
    left: 1em;
    padding-right: 1em;    
}​

/* some browsers, especially mobile, will adjust font-size smaller for 
   elements that have a max-height, so force the same behavior for ALL elements.
   Note: this also disengages the "font size" browser setting for this page 
*/

* {
  max-height: 999999px;
}

	html, body { font-size:16px; }
	
	.category h1:first-child { font-size:20px; }

	.trivia-title { font-size:20px; }
	
	.trivia-subtitle { font-size:16px; }

	.trivia-fullname { font-size:14px; }
	
	.trivia-death { font-size:14px; }

	.click-for-answer { font-size: 22px; }
	
	.photo-credits { font-size:14px; }

	.ad_bc_date { font-size:14px; }

	.share-entry { font-size: 16px; }
	
	.showOnClick {
 	   display:none;
		visibility:hidden;
	    width:auto;
	    height:auto;
	}
	
	.onclick-large {
		display:none;
	    visibility:hidden;
		height:auto;
		float:none; 
  	  	width:100%;
		text-align:center;
	}


/* END OF - critical style section */

#pick > a {
  background-color:green;
}


@media only screen and (max-width: 800px) {

	#pick > a {
		display: block;
		margin: 4px auto;
	}

}

@media only screen and (max-device-width: 600px) {

	html, body { font-size:18px; }
	
	.category h1:first-child { font-size:22px; }

	.trivia-title { font-size:22px; }
	
	.trivia-subtitle { font-size:18px; }

	.trivia-fullname { font-size:16px; }

	.trivia-death { font-size:16px; }
	
	.click-for-answer { font-size: 24px; }

	.photo-credits { font-size:16px; }

	.ad_bc_date { font-size:16px; }

	.share-entry { font-size: 18px; }

}

@media only screen and (max-device-width: 450px) {

	html, body { font-size:20px; }
	
	.category h1:first-child { font-size:24px; }

	.trivia-title { font-size:24px; }
	
	.trivia-subtitle { font-size:20px; }

	.trivia-fullname { font-size:18px; }
	
	.trivia-death { font-size:18px; }

	.click-for-answer { font-size: 26px; }
	
	.photo-credits { font-size:18px; }

	.ad_bc_date { font-size:18px; }
	
	.share-entry { font-size: 20px; }


}

.anchor {
 	position:relative;
 	top:-45px;
}

#navbar a {
	white-space: nowrap;

}

.category h1:first-child {

	background-color:black;
	color:white;
	width:95%;
	text-align:center;
	margin:auto;
	border:0;
	
	-o-border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;

	-o-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.9);
	padding-top:8px;
	padding-bottom:8px;
	padding-left:8px;
	padding-right:8px;

}

.trivia-item {

	line-height:1.5;
	
	background-color:white;
	
	text-align:left;

	-o-border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;

	-o-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	padding-top:8px;
	padding-bottom:8px;
	padding-left:8px;
	padding-right:8px;
	
	margin-left:8px;
	margin-right:8px;
}


.thumbUpDown {
	display:inline-block;
	width:2.5em;
	cursor:pointer;
	padding-left:4px; 
	padding-right:0;
}



.bottom-ad {
  position: fixed;
  bottom: 0; 
  width:100%;
  height:130px;
  max-height:25%;
  margin:auto;
  border-top: 2px solid #000000;
  border-left:none;
  border-right:none;
  border-bottom:none;
  background-color:white;
}

.bottom-ad-test {
  width:100%;
  height:130px;
  max-height:25%;
  margin:auto;
  border-top: 2px solid #000000;
  border-left:none;
  border-right:none;
  border-bottom:none;
  background-color:white;
}


.bottom-ad-spacer {
  width:100%;
  height:130px;
  max-height:25%;
}

img { border:0; margin:0px 0px; padding:0px; }


.click-for-answer {

    background-color: DodgerBlue;
    border: none;
    color: white;
    padding: 6px 16px;
    cursor: pointer;
	border-radius: 0.75em;
	display:block;
	margin:auto;
	margin-bottom: 4px;

}

/* Darker background on mouse-over */
.btn:hover {
    background-color: RoyalBlue;
}


.clickable:focus + .showOnClick {
    display:block;
    visibility:visible;
}

/* Darker background on mouse-over */
.btn:hover {
    background-color: RoyalBlue;
}



.max-width { max-width:1030px; }

.puzzle-clue { 

	text-align:left;
	margin:0px; padding:0px;
}

.trivia-image-small  { float:left; vertical-align:top; margin:0px 8px 2px 4px; width:30%; max-width:225px; height:auto; text-align:center; }
.trivia-image-medium { float:left; vertical-align:top; margin:0px 8px 2px 4px; width:40%; min-width:220px; max-width:460px; height:auto; text-align:center; }
.trivia-image-full   { float:none; vertical-align:top; margin:0px 8px 2px 4px; width:80%; max-width:560px; height:auto; text-align:center; }
.puzzle-image-medium { float:left; vertical-align:top; margin:0px 8px 2px 4px; width:50%; max-width:500px; height:auto; text-align:center; }
.quote-image-medium  { vertical-align:top; margin-left:auto; margin-right:auto; width:95%; max-width:400px; height:auto; display:block; }

.youtube-container {
	float:left;
	position:relative;
	width:40%;
	margin:0px 8px 2px 4px; 
}

.youtube {
	position:relative;
	padding: 56% 0 0 0;
}

.youtube > iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width:100%;
    height:100%;
    border:0;
}


.trivia-title { text-align:left; margin-top:0px; margin-right:4px; margin-bottom:0px; margin-left:4px; font-weight:bold; color:red; text-shadow: 0.5px 0.5px #404040; }

.trivia-title::before {
  content: "";
  width: 10em;
  display: block;
  overflow: hidden;
  /* For Demonstration 
  border: 1px solid lightgray;*/
}



.trivia-subtitle { text-align:left; margin-bottom:0px; margin-top:0px; margin-left:4px; font-weight:bold; text-shadow: none; }
.trivia-fullname { font-weight:normal; margin-left:0; color:black; text-shadow: none; }
.trivia-birth, .trivia-date { text-align:left; margin-bottom:0px; margin-top:0px; margin-left:4px; }
.trivia-death { text-align:left; margin-bottom:0px; margin-top:0px; margin-left:4px; }
.trivia-description { text-align:left; margin-bottom:0; margin-top:8px; margin-left:4px; margin-right:4px; }
.photo-credits, .photo-caption { margin:0px 4px 0px 4px; padding:0px; color:black; text-align:center; display: block;}
.photo-caption{ }
.born { }
.answer { background-color:LightGray; margin: 0px 8px 2px 4px; vertical-align:top; min-height:150px; }

.pickaday {
	width:auto;
	color:black;
	text-align:center;
	margin:1px 1px;
	padding: 0;
	display:inline-block;
}
.pickaday td { 
	margin:0;
	padding:0;
	text-align: center;
}
.pickaday a { 
	text-decoration:none;
	padding: 2px 8px;
}

.pickaday a:hover {
	background-color: green;
	
  	-o-border-radius: 0.9em;
	-webkit-border-radius: 0.9em;
	-moz-border-radius: 0.9em;
	border-radius: 0.9em;

	-o-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.9);
}

.calendar-month {
	background-color:#FFFFFF;
	padding:2px;
	margin:0px auto;
	margin-bottom:8px;
}

/* style the td that contains the month name (January) */
.calendar-month tr:first-child td:first-child {

	background-color:#C0C0C0;
	text-align:center;
}

img.death-marker, img.birth-marker { margin-left:4px; margin-right:8px; width: 46px }

.share-entry {
	border-radius: 0.75em;
	margin: auto;
	padding: 3px 10px 3px 10px;
	width: 360px;
	max-width:95%;
	cursor:pointer;
}

.share-entry:focus {
	background-color:green;
}

/* large image popup */

.click-me-img {

	width:100%;
	box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius:5%;
}

.click-me:hover {
	opacity:0.60;
}


.onclick-img {

	width:90%; 
	display:block; 
	margin-left:auto; 
	margin-right:auto;
}

.clear {
	clear:both;
	margin:0;
}

#navbar1 {
	border:0;
	margin:0;
	background-color: black;
	color:white;
	position:fixed;
	width:100%;

}

/* the titles get crunched when the screen gets small */
@media only screen and (max-width : 600px) {

	/* squeeze the menu bar items together on small screens */	 
	.w3-bar-item { padding:8px 8px 8px 8px !important; }
	.w3-button { padding:8px 8px 8px 8px !important; }
}



@media only screen and (max-width : 450px) {

	.click-for-answer {
	
    	padding: 6px 8px;
    	line-height:0.9em;
	}
	
	.click-for-answer::before {
		content: "";
		width: 10em;
		display: block;
		overflow: hidden;
  /* For Demonstration
 		border: 1px solid lightgray; */
	}
	
	.puzzle-image-medium { 
		float:none!important;
		margin:auto!important;
		width:90%!important;
	}
	
	.trivia-item {
		padding-bottom:4px!important;
	}
	

}

@media only screen and (max-width : 400px) {

	.click-for-answer {
	
    	padding: 2px 6px;
    	line-height:0.9em;
    	display:bock;

	}
	
	.click-for-answer::before {
		content: "";
		width: 10em;
		display: block;
		overflow: hidden;
  /* For Demonstration
 		border: 1px solid lightgray; */
	}

}

footer {
    
    text-align: center;
}