/*
sheppeard_site.css

CSS for whole of sharonshep.id.au web site

Copyright (c) 2020 by Sharon SHEPPEARD
all rights reserved

latest revision 18/1/2020

* * * * * * * * * * * * * * * * *
latest revision 18/01/2020
	text_line and 
	text_line_clear     added
* * * * * * * * * * * * * * * * *
*/

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  width:98%;
  position: fixed;
}

/******************************************************/
/*                                                    */
/*        MENUS ITEMS                                 */
/*        added 27/1/2020                             */
/*                                                    */
/******************************************************/
/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  color: #111;
  overflow: hidden;
  width: 100%;
  background-color: #ada;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: #ddd;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}
/*          END MENU ITEMS                     */

/******************************************************/
/*                                                    */
/*        Sharon ITEMS                                 */
/*        added 27/1/2020                             */
/*                                                    */
/******************************************************/

.shep-photo {
  position: relative;
  width: 60%;
  left: 20%;
  height: auto;
  /* opacity: 0.6; */
 }
 
.shep-photo-left {
  float:left;
  width: 400px;
  height: auto;
  margin: 25px;
 }
 
.shep-photo-right {
  float: right;
  width: 400px;
  height: auto;
  margin: 25px;
 }
 
 .gp {
  border-radius: 25%;
 }
 
.sharon-text {
  color: black;
  font-size:large;
  text-align: left;
  margin-left:100px;
  margin-right:100px;
 }
 
.sharon-header {
  color: black;
  font-size:xx-large;
}

.sharon-anounce {
  color: black;
  font-size:large;
}

/*          END Sharon ITEMS                     */

button.calnext, button.calprev {
  background: url(arrowleft_light.gif) 50% 50% no-repeat;
  border-width: 0; cursor: pointer; display: block; float: left;
  font-size: 1em; height: 1.4em; margin: 0 1em; width: 1.3em; 
}
button.calnext {
  background: url(arrowright_light.gif) 50% 50% no-repeat;
  float: right;
}
button.calprev:hover {
  background: url(arrowleft.gif) 50% 50% no-repeat;
}
button.calnext:hover {
  background: url(arrowright.gif) 50% 50% no-repeat;
}
button.calprev:active {
  background: url(arrowleft_light.gif) 50% 50% no-repeat;
}
button.calnext:active {
  background: url(arrowright_light.gif) 50% 50% no-repeat;
}
@media print {
  button.calnext, button.calprev { display: none; }
}

hr.green {
  border: 8px solid green;
  border-radius: 8px;
}

hr.w {
  border: 3px solid green;
  border-radius: 3px;
}

.family_notes
   {
   margin:auto;
   width:90%;
   }
   
.indented
   {
   padding-left: 120pt;
   padding-right: 120pt;
   }

.surname_indent
   { padding-left: 50pt;
   padding-right: 50pt; }

dl.surnames, dl.surnamecount {clear:both;}
dl.surnames a {padding-right: .25em;}
dl.surnamecount var {padding-left: .15em; padding-right: .25em;}


body 
   { 
   background-color: #f0f0b0;
   background-image:url('tanspecks.jpg');
   background-repeat:repeat;
   color: #666666; 
   font-family: "trebuchet ms",verdana,helvetica,arial,sans-serif; 
   font-style: normal; 
   font-weight: normal; 
   padding: .5em; 
   text-align: center; 
   text-decoration: none; 
   }

#waynebody
   { 
   background-color: #f0f0b0;
   background:url('../resources/sls3.jpg') no-repeat center fixed;
   background-size: cover;
   color: #666666; 
   font-family: "trebuchet ms",verdana,helvetica,arial,sans-serif; 
   font-style: normal; 
   font-weight: normal; 
   padding: .5em; 
   text-align: center; 
   text-decoration: none; 
   }

body.military 
   { 
   background: #f0f0b0 url('rising sun aifd.jpg');
   color: #666666; 
   font-family: "trebuchet ms",verdana,helvetica,arial,sans-serif; 
   font-style: normal; 
   font-weight: normal; 
   padding: .5em; 
   text-align: justify; 
   text-decoration: none; 
   }

.personbody 
   { 
   background-color: #c8f0b0;
   color: #666666; 
   font-family: "trebuchet ms",verdana,helvetica,arial,sans-serif; 
   font-style: normal; 
   font-weight: normal; 
   padding: .5em; 
   text-align: left; 
   text-decoration: none; 
   }

body.shipbody
	{
	background-color: #aaffff;
	color: #666666; 
	font-family: "trebuchet ms",verdana,helvetica,arial,sans-serif; 
	font-style: normal; 
	font-weight: normal; 
	padding: .5em; 
	text-align: left; 
	text-decoration: none; 
	}

.ship_data 
   { 
   font-size: 90%; 
   text-align: center; 
   font-weight: bold; 
   }

.treebody 
   { 
   background-color: #FFE7C3;
   color: #666666; 
   font-family: "trebuchet ms",verdana,helvetica,arial,sans-serif; 
   font-style: normal; 
   font-weight: normal; 
   padding: .5em; 
   text-align: left; 
   text-decoration: none; 
   }

.individual_page_break 
   { 
   font-size: 75%; 
   text-align: center; 
   background-color:#d8f0b0;
   border-style:solid;
   border-width:1px;
   padding:20px;
   margin:auto;
   width:80%;
   }

.button_format
   {
   text-align: center;
   }

.explanation_header 
   { 
   font-size: 75%; 
   text-align: center; 
   font-weight: bold; 
   }

.body_indent
   { padding-left: 50pt;
   font-family: "trebuchet ms",verdana,helvetica,arial,sans-serif; 
   }

.footer_text
   { font-family: verdana,helvetica,arial,sans-serif; 
   font-style: normal; 
   font-size: 60% ;
   color: black; 
   font-weight: normal; 
   text-align: center; 
   text-decoration: none; }

.modified_text
   { font-family: verdana,helvetica,arial,sans-serif; 
   font-style: normal; 
   font-size: 60% ;
   color: grey; 
   font-weight: 100; 
   text-align: right; 
   text-decoration: none; }

.family_text1
   { font-family: verdana,helvetica,arial,sans-serif; 
   font-style: normal; 
   font-size: 60% ;
   color: black; 
   font-weight: normal; 
   text-decoration: none; }

/*	new HR declaration because elements are deprecated in HTML 4.01		*/
/*	added  10/1/2013	*/
/*
hr.person_seperator
   { width: 100% ; height: 2pt; color:black; }

hr.general_seperator
   { margin-left: auto;
   margin-right: auto;
   height: 3pt ;
   width: 80%; 
   opacity:1;}

hr.general_seperator
   { border-top-width:2pt;
   border-top-color:black;
   border-top-style:solid;
   width:80% }

hr {
   height:2px;
   color:black;
   background-color:black;
   width:60%
   margin: 0px 250px 0px 250px;
   }
*/

/*
img { 
  width: 80%;
  height: auto;
  opacity: 0.3;
}
*/
.example1 {
  border-radius: 25px;
  border: 10px solid #ddd;
  padding: 20px;
}

.topright {
  position: absolute;
  top: 28px;
  right: -20px;
  font-size: 18px;
}

.text_line{float:left; margin-left:45px; margin-right:15px;}
.text_line_clear{clear:both;}

div.transcription { position: relative; font-family: arial, helvetica; font-size: 8pt; font-weight: normal; font-style: normal; text-align: center; color: #000000; background-color: #c8f090; border-color: #606060; border-width: 1px; border-style: solid; padding: 2px; white-space:nowrap; overflow: hidden; }
div.transcription a { color: #000000 !important; font-weight: bold; text-decoration: none; }
div.transcription:hover {overflow:visible; }

div.photo_caption{width:150px;font:verdana,geneva,sans-serif;color:black;font-size:75%;}

div.news_paper_notice { position: relative; font-family: courier, arial, helvetica; font-size: 9pt; font-weight: normal; font-style: normal; text-align: justify; color: #000000; background-color: #ffffff; border-left: 1px solid #606060; border-right: 1px solid #606060; padding: 5px;  }
div.news_paper_notice a { color: #000000 !important; font-weight: bold; text-decoration: none; }
/* div.news_paper_notice:hover {overflow:visible; } */

div.story_item { position: relative; font-family: courier, arial, helvetica; font-size: 9pt; font-weight: normal; font-style: normal; color: #000000; background-color: #ffffd4; border-left: 1px solid #606060; border-right: 1px solid #606060; border-top: 1px solid #606060; border-bottom: 1px solid #606060; padding: 5px;  }
div.story_item a { color: #000000 !important; font-weight: bold; text-decoration: none; }


a:link{color:#2a6786;font-weight:bold;text-decoration:none;}
a:visited{font-weight: bold;text-decoration:none;}
a:hover { color: #ff0000; font-weight: bold; text-decoration: none; }

/* family_text2
	used for small notes
	like the relationship description
	in family pages  */
a.family_text2
   { font-family: verdana,helvetica,arial,sans-serif; 
   font-style: normal; 
   font-size: 60% ;
   font-weight: normal; 
   text-decoration: none; 
   color: #666666; } 

/* notetext
	used for the notes field
	in person entries and family pages  */
.notetext
   { padding-left: 60pt;
   padding-right: 200pt;
   font-family: verdana,helvetica,arial,sans-serif; 
   font-style: normal; 
   font-size: 80% ;
   color: green; 
   font-weight: normal; 
   text-align: justify; 
   text-decoration: none; }

.marriage_death_text
   { padding-left: 30pt;
   padding-right: 200pt;
   font-family: verdana,helvetica,arial,sans-serif; 
   font-style: normal; 
   font-size: 80% ;
   color: black; 
   font-weight: normal; 
   text-align: justify; 
   text-decoration: none; }

.notetext_centered
   { padding-left: 25%;
   padding-right: 25%;
   font-family: verdana,helvetica,arial,sans-serif; 
   font-style: normal; 
   font-size: 80% ;
   color: green; 
   font-weight: normal; 
   text-align: justify; 
   text-decoration: none; }

.newnotetext_centered
   { padding-left: 25%;
   padding-right: 25%;
   font-family: verdana,helvetica,arial,sans-serif; 
   font-style: normal; 
   font-size: 80% ;
   color: green; 
   font-weight: normal; 
   text-align: center; 
   text-decoration: none; }

.explanationnotes
   { padding-left: 100pt;
   padding-right: 100pt;
   font-family: verdana,helvetica,arial,sans-serif; 
   font-style: normal; 
   font-size: 120% ;
   color: green; 
   font-weight: normal; 
   text-align: justify; 
   text-decoration: none; }

.webaddresstext
   { padding-left: 60pt;
   padding-right: 200pt;
   font-family: verdana,helvetica,arial,sans-serif; 
   font-style: normal; 
   font-size: 70% ;
   color: #cc8000; 
   font-weight: normal; 
   text-align: justify; 
   text-decoration: none; }

source_id
   { padding-left: 50pt;
   font-family: verdana,helvetica,arial,sans-serif; 
   font-style: normal; 
   font-size: 80% ;
   color: black; 
   font-weight: normal; 
   text-align: right; 
   text-decoration: none; }

source_source
   { padding-left: 400pt;
   font-family: verdana,helvetica,arial,sans-serif; 
   font-style: normal; 
   font-size: 80% ;
   color: black; 
   font-weight: normal; 
   text-align: right; 
   text-decoration: none; }

source_author
   { padding-left: 100pt;
   font-family: verdana,helvetica,arial,sans-serif; 
   font-style: normal; 
   font-size: 80% ;
   color: black; 
   font-weight: normal; 
   text-align: right; 
   text-decoration: none; }

h1 { text-align: center; color: black; }



/* boxes for the alphabet */

/*
div.alpha_box { position: absolute; font-family: arial, helvetica; font-size: 12pt; font-weight: bold; font-style: normal; text-align: center; color: #000000; background-color: #ffffff; border-color: #606060; border-width: 1px; border-style: solid; padding: 0px; overflow: hidden; }
div.alpha_box a { color: #000000 !important; font-weight: bold; text-decoration: none; }
*/
div.alpha_box { position: absolute; font-family: arial, helvetica; font-size: 12pt; font-weight: bold; font-style: normal; text-align: center; color: #000000; background-color: #ffffff; border-color: #606060; border-width: 1px; border-style: solid; padding: 0px; overflow: hidden; }
div.alpha_box a { color: #000000 !important; font-weight: bold; text-decoration: none; }




/* boxes for the names of people */

div.tree_link { position: absolute; font-family: arial, helvetica; font-size: 6pt; font-weight: normal; font-style: normal; text-align: center; color: #000000; background-color: #ffffff; border-color: #606060; border-width: 1px; border-style: solid; padding: 0px; overflow: hidden; }
div.tree_link a { color: #000000 !important; font-weight: normal; text-decoration: none; }

div.nfp_person { position: absolute; font-family: calibri, trebuchet ms, arial, helvetica, times new roman; font-size: 7.5pt; font-weight: normal; font-style: normal; text-align: center; color: #000000; background-color: #ffffff; border-color: #606060; border-width: 1px; border-style: solid; padding: 2px; white-space:nowrap; overflow: hidden; }
div.nfp_person a { color: #000000 !important; font-weight: bold; }
div.nfp_person:hover {overflow:visible; }

div.female_person { position: absolute; font-family: calibri, trebuchet ms, arial, helvetica, times new roman; font-size: 7.5pt; font-weight: normal; font-style: normal; text-align: center; color: #000000; background-color: #ffe2ff; border-color: #906060; border-radius:12px; border-width: 1px; border-style: solid; padding: 2px; overflow: hidden; }
div.female_person a { color: #000000 !important; font-weight: normal; }

div.male_person { position: absolute; font-family: calibri, trebuchet ms, arial, helvetica, times new roman; font-size: 7.5pt; font-weight: normal; font-style: normal; text-align: center; color: #000000; background-color: #e4f6ff; border-color: #6090f0; border-width: 1px; border-style: solid; padding: 2px; overflow: hidden; }
div.male_person a { color: #000000 !important; font-weight: normal; }
/* div.male_person:hover { border-width: 5px; } */

div.desc_father { position: absolute; font-family: calibri, trebuchet ms, arial, helvetica, times new roman; font-size: 7pt; font-weight: normal; font-style: normal; text-align: center; color: #000000; background-color: #f4ffff; border-color: #6090f0; border-width: 1px; border-style: solid; padding: 2px; overflow: hidden; }
div.desc_father a { color: #000000 !important; font-weight: normal;  }

div.desc_mother { position: absolute; font-family: calibri, trebuchet ms, arial, helvetica, times new roman; font-size: 7pt; font-weight: normal; font-style: normal; text-align: center; color: #000000; background-color: #fff4ff; border-color: #906060; border-radius:12px; border-width: 1px; border-style: solid; padding: 2px; overflow: hidden; }
div.desc_mother a { color: #000000 !important; font-weight: normal; }

div.desc_nfp { position: absolute; font-family: calibri, trebuchet ms, arial, helvetica, times new roman; font-size: 7pt; font-weight: normal; font-style: normal; text-align: center; color: #000000; background-color: #ffffff; border-color: #606060; border-width: 1px; border-style: solid; padding: 2px; overflow: hidden; }
div.desc_nfp a { color: #000000 !important; font-weight: bold; }


/* connecting lines, which are just boxes that only show some borders */

div.first_child { position: absolute; border-top: 1px solid #606060; font-size: 1px; }
div.other_child { position: absolute; border-left: 1px solid #606060; border-bottom: 1px solid #606060; font-size: 1px; }
div.spouse { position: absolute; border-left: 1px solid #606060; font-size: 1px; }
div.parent_father { position: absolute; border-bottom: 1px solid #606060; border-right: 1px solid #606060;  font-size: 1px; }
div.parent_mother { position: absolute; border-top: 1px solid #606060; border-right: 1px solid #606060; font-size: 1px; }
div.desc_parent_link { position: absolute; border-left: 1px solid #606060; border-top: 1px solid #606060;  font-size: 1px; }
div.desc_parent { position: absolute; border-left: 1px solid #606060;  font-size: 1px; }