/*
 * Style sheet for the CSS specification
 * For An Australian Wills Family Index...
 */
body {
background-color: #ffffff;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 16px;
margin-bottom: 200px;
}   
   /*   Use H1 and H2 for headings   */
h1{
background-color:#FAEBD7;
margin: 0px;
color:#bd0202;
/* font-size: 60px;  */
font-style: italic;  
font-family: times, serif;
  /*  font-weight: bold;  */
text-align:center;
letter-spacing: 2px;
padding-left: 3px;
padding-right: 3px;
padding-bottom: 5px;
padding-top: 5px;
border-bottom: 0px #bdbf8e solid;
}
 h1.headdd {
    font-size: 22px;
    font-family: 'Times New Roman', serif;
    text-align:center;
    background-color:#FAEBD7;
    color:#000000;
 } 
h2 {
color:#bd0202;
padding-right: 3px;
padding-left: 3px;
padding-top: 2px;
padding-bottom:5px;
font-family: times, serif;
font-style: italic;
font-weight:700;
  /*  font-size: 2.2em;  */
text-align: center;
margin: 0px;
} 
/* Medium devices (mobile phoneslarger than 450) */
@media only screen and (max-width: 485px) {
	h1 {font-size:24px;  }
	h2 {font-size:20px;  }	
}
/* Medium devices (portrait tablets and mobile phones,) */
@media only screen and (min-width:486px) {
	h1 {font-size:27px;  }
	h2 {font-size:20px;  }
} 
/* Medium devices (portrait tablets and laptops,) */
@media only screen and (min-width: 700px) {
	h1 {font-size:40px;  }
	h2 {font-size:25px;  }
} 
/* Medium devices (laptops,deskops larger than 768) */
@media only screen and (min-width: 961px) {
	h1 {font-size:60px;  }
	h2 {font-size:36px;  }
} 
   /*   Use H3, H4, H5 and H6 for body text   */
h3 {
color:#bd0202;
padding-right: 3px;
padding-left: 3px;
padding-top: 2px;
padding-bottom:5px;
font-family: times, serif;
font-style: italic;
font-weight:700;
font-size: 26px; 
text-align: center;
margin: 0px;
} 
h4 {
color: #486ba1;
padding-right:5px;
padding-left:5px;
font-weight: bold;
font-size:20px;
font-family: times, serif;
text-align: left;
line-height:1px;
}
h5 {
color:#000000;
padding-right:5px;
padding-left: 5px;
margin-top:1px;
font-weight:normal;
font-size: 18px;
font-family: times, serif;
text-align: left;
}
h6 {
color:#000000;
padding-right:5px;
padding-left:5px;
font-weight: bold;
font-size: 16px;
font-family: times, serif;
text-align: left;
}
div.flock  {
	float:left;
	vertical-align:top;	
	max-width:100%;
	width:400px;	
	margin-left:5px;
	margin-bottom:5px;
	padding-bottom:7px;
    display: inline-block;	
	background-color:#ffffff;
	border:solid 1px #000000;
}   
	
img  {
	border:solid 1px #000000;
}

	/* START Nav bar for 1.My-web-pages/family-history-wills/    */
		/*  copy from https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_sticky  */

ul.topnav {
  list-style-type: none;
  padding: 0;
  overflow: hidden;
  background-color:#FAEBD7;
  width:520px;
  max-width:100%;  
  margin:auto auto;
}
li.topnav {
  float:left;
  border-right:solid 2px #ffffff;
  border-bottom:solid 2px #ffffff;
}
li.topnav a {
  display: block;
  background-color:#bd0202;
  color: white;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
}
li.topnav a:hover {
  background-color:#FAEBD7;
  color:#000000;
}
.active {
  background-color: #bd0202;
}
	/* END Nav bar for 1.My-web-pages/family-history-wills/    */
a  {
font-size:16px;
	}
a:link {
color: #0000ff;
text-decoration:none;
display: block;  
width: 100%; 
height:10%;  
}
a:visited {
text-decoration: none;
color: #990099;
}
a:hover {
text-decoration: none;
background-color:#cecece;
color: #ff0000;
}
a:active {
color: #ff00ff;
text-decoration: underline;
}	
li {
text-align: left;
list-style-type: none;
}
p {
text-indent: 20px;
text-align: left;
color:#000000;
}
table {
border: 0px #486ba1 solid;
color: #486ba1;
padding: 5px;
}
th {
text-align: center;
font-weight: bold;
color: #bd0202;
background-color: #dddddd;
border: 1px solid #000000;
}
td {
text-align: left;
font-style: normal;
color: #000080;
}
blockquote {
background-color: #a8d9f0;
color: #486ba1;
font-style: normal;
margin-right: 6%;
margin-left: 6%;
font-weight: normal;
padding: 5px;
}
#leftcol {
width : 195px;
float: left;
background-color: #ff0000;
padding-left: 5px;
position: relative;
background: #faebd7;
}
#rightcol {
float: right;
width : 585px;
position: relative;
padding: 5px;
}
	/* --------------  The below drives Wills Family navbar.js  ---------  */
 /* [ON BIG SCREEN] */
/* (A) WRAPPER */
#hamnav {
  width:700px;
  max-width: 100%;
  margin:auto auto;
  margin-top:1px;
  padding:1px 1px ;
  background: #77a955;
  border-radius: 6px;
}

/* (B) HORIZONTAL MENU ITEMS */
#hamitems { 
display: flex; 
font-family: Helvetica,Arial,sans-serif; 
font-size:20px;
}
#hamitems a {
  flex-grow: 1;
  flex-basis: 0;
  padding: 7px;
  color: #ffffff;
  text-decoration: none;
  text-align: center;
}
#hamitems a:hover { 
background: #ffffff; 
color:#000000;
border-radius: 6px;
}

/* (C) HIDE HAMBURGER */
#hamnav label, #hamburger { 
display: none; 
}

/* [ON SMALL SCREENS] */
@media screen and (max-width: 560px){
  /* (A) BREAK INTO VERTICAL MENU */
  #hamitems a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border-top: 1px solid #ffffff;
  }
  
  /* (B) SHOW HAMBURGER ICON */
  #hamnav label { 
    display: inline-block; 
    color: white;
    background: #002620;
    font-style: normal;
    font-size: 1.2em;
    padding: 5px;
	float:right;
	margin-right:5px;
  }

  /* (C) TOGGLE SHOW/HIDE MENU */
  #hamitems { 
  display: none; 
  }
  #hamnav input:checked ~ #hamitems { 
  display: block; 
  }
}