html{height: 100%;}

body
{ 
  font-family: verdana, arial, helvetica, sans-serif;
  background: white ; 
  padding: 0px;
  margin: 10px;
/*  font-size: .68em;
*/
  font-size : 16px ;
  color : black ;
}
@media screen and (orientation:landscape)
{
bigPic {
padding: 0px ;
width: 55%;
}

@media screen and (orientation:portrait) {
img {
width: 100%;
padding : 50px ;
}
}


.bigPicDiv {
	position : fixed ;
	top : 50px ;
}
.bigPic {
	float : left ;
	padding-left : 20px ;
}

.flex-container-allThumbs > div {
  top : 0px ;
  position : relative ;
  padding: 10px;
  margin: 0px;
  font-size : 100% ;
  margin: 0px;
  height : 570px ;
  width : 340px ;
  border: 5px solid #dedede;
  overflow-y : auto ;
}


.thumbDiv {
	width : 100px ;
	height : 75px ;
	padding : 10px 0px 0px 10px ;
	float : right ;
	border : none ;
}
.thumbs {
	margin-left : 50px ;
    top: -690px;  
}


/*flexbox.allThumbs {
	min-width : 300px ;
	display : flex;
	background : red ;
	padding : 10px 0px 0px 10px ;
	float : right ;
    overflow-y : none ;
}
*/

.arrows {
	padding-left : 200px ;
}
p
{ margin: 0px;
  padding: 0px 0px 16px 0px;
  line-height: 1.7em;
}

h1 {
/*  color : #1E90FF ; */
	color:  #f8b234 ; 
  font-size : 180% ;
  background-color : black ;
  margin: 0px;
  padding: 0px;
}
h2 {
	color : #1E90FF ;
	font-weight: bold ;
	font-size : 90% ;
}

.flex-container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction : column ;  
}


.flex-container > div {
  font-family: Verdana, Arial, sans-serif;
  padding: 10px;
  margin: 0px;
  font-size : 100% ;
  margin: 0px;
  height : auto ;
}
.flex-container-blog > div {
  font-family: Verdana, Arial, sans-serif;
  padding: 0px;
  font-size : 100% ;
  margin: 10px;
}

.flex-container-pics > div {
  font-family: Verdana, Arial, sans-serif;
/*  background : rgba(0,0,0,.5) ;
*/
  color: #fff;
  padding: 0px;
  margin: 0px;
  font-size : 100% ;
  height : 80% ;
}

.narrow {
  padding-left : 50px ;
  max-width : 600px ;
  margin: 10px 0px 10px 0px;
}
.flex-item-left {
  background-color: white;
  margin: 10px 0px 10px 0px;
}
.flex-item-left-pic {
  margin: 0px;
  padding : 0px ;
  max-width: 100% ;
  border : thin black ridge ;
/*  background : rgba(0,0,0,.5) ; 
*/
}

.flex-item-left-no-border {
  margin: 0px;
  padding : 0px ;
  max-width : 70% ;
}

.flex-item-right {
  background-color: #DFDADA;
}
.flex-item-right_no_border {
  background-color: #DFDADA; 
  height : 550px ;
}

span.full_article {
	color : black ;
	font-style : italic ;
	font-weight : normal ;
		
}

@media (min-width:320px)  {
  .flex-container {
    flex-direction: column;
}

@media (min-width:1000px) {
  .flex-container {
    flex-direction: row;
}



/*@media screen and (max-width: 2000px) and (min-width: 400px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    font-weight : bold ;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

*/
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top : 30px ;
  margin-bottom : auto ;
  width: 100%;
}
.center100 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.center90 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}
.center80 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
.responsive {
  width: 100%;
  max-width:200px ;
  height: auto;
}

.hamburger-button {
   background-color: #333;
   color: white;
   padding: 15px;
   font-size: 24px;
   cursor: pointer;
}

.nav-links {
   display: none;
   background-color: #333;
   color: white;
}
.nav-links a {
   display: block;
   padding: 15px;
   color: white;
   text-decoration: none;
}
.nav-links a:hover {
   background-color: #111;
}

.text_block {
	margin-bottom : 20px ;
}
.text_header {
	font-size : 90% ;
	color : blue ;
	padding : 10px 0px 0px 0px;
}
.text_body {
	margin-bottom : 0px ;
	font-weight : normal ;
	color : black ;
}
#more {display: none;}

.readmore {
	color : blue ;
	font-weight : normal;
	font-size : 80% ;
}	
.moreThan {
	color: blue ;
	float : right ;
	font-size : 12px ;
}
.butToggle {
	color: blue ;
	float : right ;
	text-decoration : underline ;
	font-size : 12px ;
	cursor:pointer ;
}
.topofpage {
	padding  :30px 0px 30px 0px ;
	font-size : 13px ;
}

table, th, td {
	border : 1px solid ;
	padding : 5px ;

}
td.greycol {
	background-color : grey ;
}

td.tdnotes, td.tdname {
	width: 150px ;
	background-color : grey;
	color : white ;
}


#menu1
{ 
   height: 26px;
   width : auto ;
	float : left ;
	margin : 0px ;
	padding : 0px ;
	border : thin black ridge ;
}
#menu1 ul{margin: 0px ; padding: 0px}

#menu1 li
{ 
  font-family : "arial, sans serif" ;
  background : #353d58;   
  float: left;
  width : 105px ;
  margin: 5px 1px 3px 1px; 
  list-style: none;
  text-align : center ;
} 
#menu1 li a 
{ 
  display: block; 
  text-decoration: none; 
  color : #fff ;
  padding: 0px 0px 0px 0px;
  border-left : 1px solid white;
} 
#menu1 li a:hover
{
  background-color : #fff ; 
  color:black;
  font-weight : bold ;
} 


#menu1 li a#selected, #menu1 li a#selected:hover
{
  background-color : #fff ; 
  color: #353d58;
} 

#menu2
{ 
   height: 26px;
   width : 900px ;
	background: white ; 
	float : left ;
}
#menu2 ul{margin: 0px ; padding: 0px;}
 

#menu2 li
{ 
  font-family : "arial, sans serif" ;
  color : black ;
  background : white;   
  float: left;
  border: thin black ridge ;
  width : 105px ;
  margin: 2px 1px 3px 1px; 
  list-style: none;
  text-align : center ;
} 
#menu2 li a 
{ 
  display: block; 
  text-decoration: none; 
  color : black ;
  padding: 5px 0px 0px 0px;
  border-left : 1px solid white;
} 
#menu2 li a:hover
{
  background-color : #fff ; 
  color:blue;
  font-weight : bold ;
} 


#menu2 li a#selected, #menu2 li a#selected:hover
{
  background-color : #fff ; 
  color: #353d58;
} 
.question {
	color : #1E90FF  ;
	font-weight : bold ;
}
.answer {
	color : black ;
}
	
.footer {
  color : blue ;
  font-size : 80%; 
  margin: 10px;  
  padding: 10px;  
}
.captionDiv {
	z-index : 0 ;
	display : block ;
	width : 550px ;
	height : 70px ;
	padding : 5px ;
    background : rgba(0,0,0,.5) ;
	top : 550px ;
	position : fixed ;
	left : 70px ;
}
.caption {
	z-index : 100 ;
	font-size : 120% ;
	color : white ;
	position : relative ;
	top : 0px ;
}