/* CSS for HTML5 version BirdingPix.com */
/* Dave Kutilek */
/* January 2021 */


* {box-sizing: border-box}

body {margin:0;background-color: #111111;}

.align-center {margin:0 auto;text-align:center;}
.align-left {float:left;}
.align-right {float:right;}
.text-right {text-align:right;}
.text-left {text-align:left;}

img {
	max-width: 100%;
	height: auto; 
	vertical-align: middle
}

.logo img {
	padding-top:6px;
	padding-bottom:6px;
	padding-left:0px;
	padding-right:0px;
}

/* ============================================================= */

.welcome-container {
	font-family:Calibri,Candara,Segoe,Optima,Arial,sans-serif;
	border-style:ridge;
	border-color:#C0C0C0;
	border-width:6px;
	padding-top: 0px;
	padding-bottom:2px;
	padding-left:8px;
	padding-right:8px;
	max-width:460px;
	margin-top:6px;
	}

.welcome-container  A:visited {
	text-decoration:none;
	color:#ffffcc;  
	}	
	
.welcome-container  A:hover {
	text-decoration:none;
	color:#00ff00;  
	}

.welcome-gradient {
background: rgb(7,25,2);
background: -moz-linear-gradient(164deg, rgba(7,25,2,1) 0%, rgba(1,25,4,1) 0%, rgba(50,168,69,1) 100%);
background: -webkit-linear-gradient(164deg, rgba(7,25,2,1) 0%, rgba(1,25,4,1) 0%, rgba(50,168,69,1) 100%);
background: linear-gradient(164deg, rgba(7,25,2,1) 0%, rgba(1,25,4,1) 0%, rgba(50,168,69,1) 100%);
}

.welcome-title {
	font-size: 32px;
	font-style: normal;
	color: #ffffcc;
	text-align:center;
	line-height:100%;
	}

.welcome-author {
	font-size:24px;
	font-style:italic;
	color:#ffffcc;
	line-height:100%;
	text-align:center;
	margin-top:-8px;
	}

.welcome-text {
	font-size: 20px;
	font-style: normal;
	color: #ffffcc;
	line-height:24px;
	text-align:center;
	}

.welcome-species-count {
	font-size: 36px;
	font-style: italic;
	color: #ffffcc;
	line-height:28px;
	}

.welcome-emailaddress {
	font-size: 24px;
	font-style: italic;
	color: #ffffcc;
	margin-top:-6px;
	margin-bottom:2px;
	padding-right:6px; 
	padding-left:6px; 
	}

/* ============================================================= */

.highlighted-slideshow-container {
	font-family:Calibri,Candara,Segoe,Optima,Arial,sans-serif;
	font-size:28px;
	border:4px solid;
	border-style:ridge;
	border-color:#C0C0C0;
	border-radius:20px;
	box-shadow:6px 6px 2px 3px #555555;
	padding-right:14px; 
	padding-left:14px; 
	padding-top:2px; 
	padding-bottom:6px; 
	background-image: url("../images/glass-green_1200x1200.jpg");
	margin-top:6px;
	}

.highlighted-slideshow-container A:visited {
	text-decoration:none;
	color:#ffffcc;
	}

.highlighted-slideshow-container A:hover {
	text-decoration:none;
	color:#00ff00;
	}

.highlighted-photo-slideshow-title {
	margin:0 auto;
	text-align:center;
	font-family:Calibri,Candara,Segoe,Optima,Arial,sans-serif;
	font-size:28px;
	font-weight: normal;
	padding-top:4px; 
	padding-bottom:6px; 
	}

.highlighted-slideshow-photo {
	border:2px solid;
	border-color:#ffffcc;
	margin-bottom:8px;
	}

/* ============================================================= */
.divider_bar {
	margin:0 auto;
	text-align:center;
	margin-top:12px;
	margin-bottom:8px;
	}
/* ============================================================= */

.section-title {
	max-width:800px;
	margin:0 auto;
	text-align:center;
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 36px;
	font-weight: normal;
	font-style: italic;
	vertical-align: middle;
	padding:1px;
	border:2px solid;
	border-color:#C0C0C0;
	color: #ffffcc;
	background-image: url("../images/glass-green.jpg");
	background-repeat: repeat;
	}

.section-title A:link {
	text-decoration:none;
	color:#ffffcc;
	}

.section-title A:hover {
	text-decoration:none;
	color:#00ff00;
	}

.section-title A:visited {
	text-decoration:none;
	color: #ffffcc;
	}

.section-subtitle {
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 22px;
	font-style: italic;
	color: #ffffcc;
	text-align:center;
	margin-top:4px;
	margin-bottom:8px;
	}

/* ============================================================= */

.top50-slideshow-container {
	text-align:center;
	padding-top:3px;
	padding-bottom:3px;
	padding-left:3px;
	padding-right:3px;
	margin:0px;
	border:2px solid;
	border-color:#00ee00;
	background-color:#003300;
	max-width:470px;
	}

.gallery-slideshow-container {
	text-align:center;
	padding-top:3px;
	padding-bottom:3px;
	padding-left:3px;
	padding-right:3px;
	margin:0px;
	border:2px solid;
	border-color:#00ee00;
	background-color:#003300;
	max-width:320px;
	}

.gallery-slideshow-thumbnail {
	border:2px solid;
	border-color:#ffffcc;
	margin:0px;
	text-align:center;
	}

.gallery-slideshow-title  A:link {
	padding:0px;
	text-align:center;
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 20px;
	font-style: normal;
	color: #ffffcc;
	text-decoration:underline;
	}

.gallery-slideshow-title  A:hover {text-decoration:none;color:#00ff00;}
.gallery-slideshow-title  A:visited {text-decoration:none;color:#ffffcc;}

.gallery-slideshow-text {
	font-family:Geneva,sans-serif;
	padding-top:4px;
	padding-bottom:4px;
	padding-left:2px;
	padding-right:2px;
	text-align:center;
	font-size: 14px;
	font-style: normal;
	color: #ffffcc;
	}

/* ============================================================= */

.pixeverybird-container {
	text-align:center;
	padding-top:2px;
	padding-left:4px;
	padding-right:4px;
	padding-bottom:0px;
	margin:0px;
	border-style:ridge;
	border-color:#C0C0C0;
	border-width:4px;
	max-width:960px;
	background-image: url("../images/glass-green_1200x1200.jpg");
	background-repeat: repeat;
	}

.pixeverybird-container A:link {text-decoration:none;color:#ffffcc;}
.pixeverybird-container A:hover {text-decoration:none;color:#00ff00;}
.pixeverybird-container A:visited {text-decoration:none;color:#ffffcc;}

.chapter-title {
	text-align:center;
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 36px;
	font-weight: normal;
	font-style: italic;
	vertical-align: middle;
	padding:1px;
	color: #ffffcc;
	}

.chapter-subtitle {
	text-align:center;
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 22px;
	font-weight: normal;
	font-style: italic;
	vertical-align: middle;
	padding:1px;
	margin-top:0px;
	margin-bottom:4px;
	color: #ffffcc;
	}

.chapter-updated {
	font-size: 16px;
	line-height:20px;
	font-weight: normal;
	font-style: italic;
	border:2px solid;
	border-color:#999999;
	margin-top:0px;
	margin-bottom:10px;
	padding-top:2px;
	padding-left:2px;
	padding-right:2px;
	padding-bottom:2px;
	}

.pixeverybird-thumbnail {
	padding-top:2px;
	padding-left:2px;
	padding-right:2px;
	padding-bottom:2px;
	margin-top:6px;
	border:1px solid;
	border-color:#ffffcc;
	background-color:#111111;
	}

.pixeverybird-storyframe {
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 17px;
	color: #ffffcc;
	text-align:center;
	padding-top:4px;
	padding-left:4px;
	padding-right:4px;
	padding-bottom:2px;
	margin-top:0px;
	margin-left:2px;
	margin-right:2px;
	margin-bottom:8px;
	background: rgb(12,60,18);
	background: -moz-linear-gradient(119deg, rgba(12,60,18,1) 0%, rgba(53,65,47,1) 100%);
	background: -webkit-linear-gradient(119deg, rgba(12,60,18,1) 0%, rgba(53,65,47,1) 100%);
	background: linear-gradient(119deg, rgba(12,60,18,1) 0%, rgba(53,65,47,1) 100%);
	border:4px solid;
	border-radius:8px;
	box-shadow:2px 2px 2px 2px #555555;
	border-color:#119911;
	}

.pixeverybird-textlink {
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 28px;
	line-height:30px;
	font-style: italic;
	padding:2px;
	margin-top:6px;
	margin-left:2px;
	margin-right:2px;
	margin-bottom:8px;
	text-align:center;
	color: #ffffcc;
	}

/* ============================================================= */
/* ============================================================= */
/* ============================================================= */

.lifelists-container {
	text-align:center;
	padding-top:2px;
	padding-left:4px;
	padding-right:4px;
	padding-bottom:2px;
	margin:0px;
	border-style:ridge;
	border-color:#C0C0C0;
	border-width:4px;
	max-width:960px;
	background-image: url("../images/glass-green_1200x1200.jpg");
	background-repeat: repeat;
	}

.lifelists-container A:link {text-decoration:none;color:#ffffcc;}
.lifelists-container A:hover {text-decoration:none;color:#00ff00;}
.lifelists-container A:visited {text-decoration:none;color:#ffffcc;}

.lifelists-thumbnail {
	padding-top:2px;
	padding-left:2px;
	padding-right:2px;
	padding-bottom:2px;
	margin:4px;
	border:1px solid;
	border-color:#dddddd;
	background-color:#002200;
	}

.lifelists-textlink {
	font-family: Tahoma, Verdana, sans-serif;
	padding:2px;
	margin-top:6px;
	margin-left:2px;
	margin-right:2px;
	margin-bottom:0px;
	text-align:center;
	font-size: 18px;
	line-height:20px;
	font-style: normal;
	color: #ffffcc;
	}

.lifelists-about-frame {
	font-family: Tahoma, Verdana, sans-serif;
	text-align:center;
	padding-top:2px;
	padding-left:4px;
	padding-right:4px;
	padding-bottom:2px;
	margin-top:6px;
	margin-left:2px;
	margin-right:2px;
	margin-bottom:8px;
	background-image:url('../images/lifelists-about-background.png');
	background-repeat:repeat;
	background-position:top; 
	border:3px solid;
	border-radius:8px;
	box-shadow:2px 2px 2px 2px #555555;
	border-color:#aaaaaa;
	color: #ffffcc;
	}

.lifelists-about-title {
	font-size: 24px;
	font-style: italic;
	text-align:center;
	}

.lifelists-about-text {
	font-size: 16px;
	font-style: normal;
	text-align:center;
	}

.lifelists-abarules-frame {
		border:1px solid;
		border-color:#eeeeee;
		border-radius:14px;
		box-shadow:2px 2px 2px 2px #555555;
		padding:3px; 
		margin:1px;
		background-color:#336633;
		text-align:center;
		font-size: 16px;
		font-style: normal;
		}

/* ============================================================= */
/* ============================================================= */
/* ============================================================= */

.aboutBirdingPix-title {
	max-width:800px;
	margin:0 auto;
	text-align:center;
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 36px;
	font-weight: normal;
	font-style: italic;
	vertical-align: middle;
	padding:1px;
	border:2px solid;
	border-color:#C0C0C0;
	color: #ffffcc;
	background-image: url("../images/glass-darkblue_1200x1200.jpg");
	background-position: left bottom;
	background-repeat: no-repeat;
	}

.aboutBirdingPix-container {
	text-align:center;
	padding-top:3px;
	padding-bottom:3px;
	padding-left:3px;
	padding-right:3px;
	margin:0px;
	border-style:ridge;
	border-color:#C0C0C0;
	border-radius:8px;
	border-width:4px;
	background-image: url("../images/glass-darkblue_1200x1200.jpg");
	background-position: center;
	background-repeat: no-repeat;
	}

.aboutBirdingPix-text {
	font-family:Geneva,sans-serif;
	padding-top:4px;
	padding-bottom:4px;
	padding-left:2px;
	padding-right:2px;
	text-align:center;
	font-size: 18px;
	font-style: normal;
	color: #ffffcc;
	}

.aboutPixOfEveryBird {
	font-family:Geneva,sans-serif;
	padding-top:4px;
	padding-bottom:4px;
	padding-left:2px;
	padding-right:2px;
	text-align:center;
	font-size: 20px;
	font-style: normal;
	color: #ffffcc;
	}

/* ============================================================= */
/* ============================================================= */
/* ============================================================= */

.aboutDave-title {
	max-width:800px;
	margin:0 auto;
	text-align:center;
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 36px;
	font-weight: normal;
	font-style: italic;
	vertical-align: middle;
	padding:1px;
	border:2px solid;
	border-color:#C0C0C0;
	color: #ffffcc;
	background-image: url("../images/glass-darkestblue_1200x1200.jpg");
	background-position: left bottom;
	background-repeat: no-repeat;
	}

.aboutDave-container {
	text-align:center;
	padding-top:3px;
	padding-bottom:3px;
	padding-left:3px;
	padding-right:3px;
	margin:0px;
	border-style:ridge;
	border-color:#C0C0C0;
	border-width:4px;
	border-radius:8px;
	background-image: url("../images/glass-darkestblue_1200x1200.jpg");
	background-position: center;
	background-repeat: no-repeat;
	}

.aboutDave-text {
	font-family:Geneva,sans-serif;
	padding-top:4px;
	padding-bottom:4px;
	padding-left:2px;
	padding-right:2px;
	text-align:center;
	font-size: 16px;
	font-style: normal;
	color: #ffffcc;
	}

.about-page-footer {
	margin:0 auto;
	text-align:center;
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 14px;
	font-weight: normal;
	font-style: italic;
	vertical-align: middle;
	padding:1px;
	border:2px solid;
	border-color:#C0C0C0;
	color: #ffffcc;
	background-image: url("../images/glass-darkblue_1200x1200.jpg");
	background-repeat: no-repeat;
}

/* ============================================================= */
/* ============================================================= */
/* ============================================================= */

.slideshow-title {
	margin:0 auto;
	margin-bottom:11px;
	text-align:center;
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 32px;
	line-height: 120%;
	font-weight: normal;
	font-style: italic;
	vertical-align: middle;
	padding-top:1px;
	padding-bottom:2px;
	border:2px solid;
	border-color:#00ee00;
	color: #ffffcc;
	background-image: url("../images/glass-green.jpg");
	background-repeat: repeat;
}

/* ------- SLIDESHOWS 1440 pixels wide ------- */
.slideshow-container_1440 {
  max-width:1448px;
  padding-top:0px;
  padding-bottom:0px;
  padding-left:4px;
  padding-right:4px;
  position:relative;
  margin:auto;
  background-color:#000000;
}

/* ------- SLIDESHOWS 940 pixels wide ------- */
.slideshow-container_940 {
  max-width: 948px;
  padding-top:0px;
  padding-bottom:0px;
  padding-left:4px;
  padding-right:4px;
  position: relative;
  margin: auto;
  background-color: #000000;
}

/* ------- Previous & Next ------- */
.prev {
  cursor: pointer;
  position: absolute;
  top: 46%;
  width: auto;
  padding-left:22px;
  padding-top:12px;
  padding-bottom:12px;
  margin-left:14px;
  color: white;
  font-weight: bold;
  font-size: 28px;
  transition: 0.6s ease;
  border-radius: 0 8px 8px 0;
  user-select: none;
}

.prev:hover {
  background-color: rgba(33,33,33,0.5);
  color: blue;
}

.next {
  cursor: pointer;
  position: absolute;
  top: 46%;
  width: auto;
  padding-right:22px;
  padding-top:12px;
  padding-bottom:12px;
  margin-right:16px;
  color: white;
  font-weight: bold;
  font-size: 28px;
  transition: 0.6s ease;
  border-radius: 8px 0 0 8px;
  user-select: none;
  right: 0;
}

.next:hover {
  background-color: rgba(33,33,33,0.5);
  color: blue;
}

/* ---- Photo Slideshow Caption ---- */
.caption-container {
  text-align: center;
  line-height: 28px;
  font-size: 20px;
  font-family:Verdana, Calibri,sans-serif;
  padding-right:2px;
  padding-left:2px;
  padding-top:2px;
  padding-bottom:2px;
  margin-right:3%;
  margin-left:3%;
  margin-top:8px;
  margin-bottom:7px;
  color: #ffffcc;
  border:1px solid;
  border-color:#00ee00;
  background-color:#003300;
}

/* ---- About BirdingPix Slideshow 600 pixels wide ------- */
.about-slideshow-container_600 {
  max-width: 608px;
  padding-top:2px;
  padding-bottom:2px;
  padding-left:2px;
  padding-right:2px;
  position: relative;
  border:3px solid;
  border-color:#111111;
  background-color: #cccccc;
  margin: auto;
}

/* ---- About BirdingPix Slideshow Caption ---- */
.about-caption-container {
  text-align: center;
  line-height: 28px;
  font-size: 20px;
  font-family:Verdana, Calibri,sans-serif;
  padding-right:2px;
  padding-left:2px;
  padding-top:2px;
  padding-bottom:2px;
  margin-right:3%;
  margin-left:3%;
  margin-top:8px;
  margin-bottom:7px;
  color: #ffffcc;
  border:1px solid;
  border-color:#3366ff;
  background-color: #000033;
}

/* ---- Slideshow Regular Dots ---- */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* ---- Slideshow Small Dots ---- */
.dot12 {
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* ---- About BirdingPix Slideshow Dots ---- */
.aboutdot {
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot.active {background-color: #00ff00;}
.dot:hover {background-color: blue;}

.dot12.active {background-color: #00ff00;}
.dot12:hover {background-color: blue;}

.aboutdot.active {background-color: blue;}
.aboutdot:hover {background-color: #00ff00;}

/* ---- The Slides Fade-in ---- */
#theslides.fadein {
  opacity: 1;
  transition: opacity 0.4s; 
  -webkit-animation-name: fade;
  -webkit-animation-duration: 0.4s;
  animation-name: fade;
  animation-duration: 0.4s;
}

#theslides {
  opacity: 0;
}

/* ============================================================= */

.page-footer {
	margin:0 auto;
	text-align:center;
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 14px;
	font-weight: normal;
	font-style: italic;
	vertical-align: middle;
	padding:1px;
	border:2px solid;
	border-color:#C0C0C0;
	color: #ffffcc;
	background-image: url("../images/glass-green.jpg");
	background-repeat: no-repeat;
}
/* ============================================================= */