* { 
    margin: 0px;
    padding: 0px;
    text-align: justify;
    
}


body {
	color: #000000;  
	background-color: #FFF;
   font-family: "Benton Sans",sans-serif;
   font-size: 15px;
   line-height: 1.6em;
   letter-spacing: .013em;
   color: #333333;

}


/*
  NOTE: Do not use hgroup element.  Its no longer supported by html5 
*/

header, section, footer, aside, nav, article, figure, figcaption, { display: block; }

p { 
   font-family: "Benton Sans",sans-serif;
   font-size: 15px;
   line-height: 1.6em;
   letter-spacing: .013em;
   color: #333333;
   text-align: justify;
}

.align_right {
   text-align: right
}

.align_center {
   text-align: center
}

.align_left {
   text-align: left;
}

.centered {
   text-align: center; 
}

.right {
   text-align: right;
}


/* unvisited link */
a:link {
    color: rgb(26, 117, 255);
}

/* visited link */
a:visited {
    color: rgb(92, 138, 138);
}

/* mouse over link */
a:hover {
    color: #a633cc;
}

/* selected link */
a:active {
    color: #FF6600;
}

h1 { 
   color: Black;
   font-size: 40px;
}

h2 { 
    color: Black;
    font-size: 22px;
}

h3 { 
    color: Black;
    font-size: 18px;
}

h4 { 
    color: Black;
    font-size: 16px;
}

h5 { 
    color: Black;
    font-size: 16px;  
}

h6 { 
    color: Black;
    font-size: 16px; 
}


#wrapper {
	display: block;
	overflow: scroll;
   width:  1000px;  
   height: 100%;
   text-align: justify;
   position: absolute;
   top:0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
  	background-image: url("paper-01.png");
  	background-repeat: repeat;

}


#main_header {
   font-size: 20px; 
   padding: 5px;
}

#sub_header1 {
   border: 1px solid #999999;
   padding: 20px;
}

.flag {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 12px;
    width: 100px;
    height: 64px;
}

aside {
   float: left
}


#main_aside {
   float: left;
   width: 320px;
   margin: 5px 12px 5px 5px;
   padding: 5px;
   border: 2px solid Black;
   /* background: #80dfff; */
}



section {
   float: right;
   text-align: justify;
}

#main_section {
   float: right;
   width: 780px;
   margin: 16px;
   padding: 9px;
}

ol {
   margin: 0em;
}
.ordered_list01 {
   display: inline-block;
   margin: 5px;
   padding: 12px;
}

ul {
   margin: 0px;
}
.citation_list_class01 {
   display: inline-block;
   padding: 5px; 
   margin: 20px 20px 20px 20px;
   font-size: 14px;
}
.citation_list_class02 {
   display: inline-block;
   padding: 5px; 
   margin: 20px 20px 20px 20px;
   font-size: 18px;
}


li {
   margin: 0em;
}
.indented_list01 {
   padding: 5px; 
   margin: 5px 5px 5px 5px;
 }
.list_blank01 {
   list-style: none;
   padding: 5px; 
   margin: 5px 5px 5px 5px;
}


#footer_section {
    display: block;
    width: 780px;
    height: 200px;
    margin: auto;
    padding: 10px;
    /* background: DodgerBlue; */
}


/*  Span width of the page - centered */
#footer_section02 {
    display: block;
    width: inherit;
    height: 300px;
    margin: auto;
    padding: 0px;
}



#main_footer {
    clear: both;
    text-align: right;
    padding: 20px;
    border-top: 2px solid #999999;
}

#main_footer01 {
    
    margin-left: auto;
    margin-right: auto;
    font: italic 12px;
    text-align: right;
    padding: 20px;
}


article {
    /* border: 1px solid #999999; */
    text-align: justify;
    padding: 2px;
    margin-left: 10px;
    margin-bottom: 15px;
}
.centered {
    text-align: center;
}

article footer {
    text-align: right;
}

time {
    font-size: 8px;
    color: OliveDrab;
}

figcaption {
    font: italic 14px;
}

#main_marquee {
    font-size: 14px;
    color: Red;
    font: italic 14px;
}

IMG.w3clogo {
    display: block;
    border: 0;
    margin-left: auto;
    text-align: right;
    width:  88px;
    height: 31px;
}

/*
   Table styles 
*/

/* Table used for Family info: spouse birth, death, marriage  */


#children_table{
	display: flex;
	width: 720px;
	margin-left: 12px;
	padding: 2px;
}


#family_table01 {
    border: none;    
}

#family_table01 td {
    padding: 3px 7px 2px 7px;
}

/* Boxes to be used for Family info: spouse details, marriage details */


#family01container {
	display: flex;
	width: 780px;
	margin-left: 10px;
	padding: 2px;
}

#family01box-1 {
 margin-left: 12px;
 width: 265px;
}

#family01box-2 {
	width: 235px;
}

#family01box-3 {
	flex: 2 1 300px;
}

#family01box-4 {
	flex: 1 1 80px;
}


/* Display a group of pictures with a 25 px indent
*/
#pict01_container {
	display: flex;
	margin-left: 20px;
	padding: 5px;
	width: 700px;
	
}
#pict01_box1 {
   flex: 1 1 640px;	
}

#pict01_box2_center {
	text-align: center;
   flex: 1 1 640px;	
    margin: auto;
    width: 50%;
    padding: 10px;
}


/*
  Navigation side bar 
  */
  
  
nav {
	display: block
} 


/* class for a div element to be used as a nav menu on the LHS */
.sidenav {
    height: 200px;
    width: 165px; 
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 5px; /* Place content 5px from the top */
    padding-right: 0px;
    margin-right: 12px;
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    border: 2px solid Black;

}

.sidenav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: inherit;
    position: fixed;
    height: inherit;
    overflow: auto;
}

.sidenav li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav li a.active {
    background-color: rgb(92, 138, 138);
    color: white;
}

.sidenav li a:hover:not(.active) {
    background-color: #555;
    color: white;
}