/* Rules
1. Elements are responsible for clearing the space below them, but not for the space above them, with the exception of headings which also have to clear upwards to create separations between sections
2. The primary colours for the site are
	- #772222 (dark red) 
		Header / footer
		Headings
		Bolded text
		Borders / lines
	- #BC827C (pale red)
	- #691010 (browny red)
	- #e2d3d3 (pale red)
	- #ededd3 (straw yellow)
	
	Memorials use greys:
	#6d6d6d (dark grey) for the border
	#e0dee0 (light grey) for the contents
	

*/

/* COLOURS 
https://mycolor.space/?hex=%23772222&sub=1

Natural palette:
Dark = #772222
Light = #BC827C
Background = #FFF6F4
Pale yellow = #F3EED9

*/


h1,h2, h3 {
	color:#772222;
}


header, footer, nav {
	color:#ffffff;
}


a:link {
	color: #772222;
}

a:visited {
	color: #BFA5A2;
	text-decoration:none;
}



/* NAVIGATION HEADER 
----------------------------------------------------------------------*/

header {
	/* Text */
	text-align:center;	
	
	/* Positioning */
	padding:0.5em;
	margin-left:auto;
	margin-right:auto;
	width:60%;

	/* colours */
	background-color:#772222;

}

header.errorPage{
	/* Text */
	text-align:left;	
	
	/* Positioning */
	padding:0.5em;
	width:100%;



	/* colours */
	background-color:#772222;
	
}

div.headButton {
	font-family:Roboto, sans-serif;
	display:inline-block;
	font-size:1.5em;
	font-weight:bold;
	margin-left:0.5em;
	margin-right:0.5em;
	border-right:1px;
	border-color: #ffffff;

}


div.headButton a:hover {
	text-decoration: underline;
}

div.headButton#home {

	/*font-style:italic;
	font-weight:normal;*/
}

a.headButton {

	color: #efdfc9;
	color: #ffffff;
	text-decoration:none;
}

img.headButton {
	height:20px;
	vertical-align:middle;
	padding-right:5px;
}

div.errorPageHeader {
	font-size:48px;
	font-weight:bold;
	line-height:48px;
	padding:20px;
}


div.errorPage {
	height:80px;
	padding-top:60px;
	padding-bottom:60px;
	display:inline-block;
	vertical-align:middle;
	font-size:1.2em;
}


@media screen and (min-width:390px) and (max-width:1024px)  {
/* Adjustments for tablet devices */
	header {
		/* Text */
		text-align:center;	
		
		/* Positioning */
		width:98%;
	}

}

@media screen and (max-width:389px)  {
/* Adjustments for mobile devices */
	header {
		/* Text */
		text-align:left;	
		
		/* Positioning */
		width:98%;
	}
	
	div.headButton {
		display:block;
		padding-bottom:0.25em;
	}		
}

/* NAV bar (used for subsites within the main tree)
----------------------------------------------------------------------*/

nav {
	/* Text */
	text-align:center;
	
	/* Positioning */
	padding: 0.5em;
	border-width: 3px 0px 0px 0px; /* to separate it slightly from the Header bar */
	border-style:solid;
	width:60%;
	margin-left:auto;
	margin-right:auto;
	
	/* Colours 
	background-color:#9c6363;*/
	background-color:#bc827c;
}


div.navButton {
	font-family:Roboto, sans-serif;
	display:inline-block;
	font-size:1.3em;
	font-weight:bold;
	margin-left:0.5em;
	margin-right:0.5em;

}

div.navButton a:hover {
	text-decoration: underline;
}

div.headerBlock {
	margin-left:0.75em;
}

div.headerPhotos {
	float:left;
	width:33%;
}

@media screen and (min-width:633px) and (max-width:1024px)  {
/* Adjustments for tablet devices */
	nav {
		
		/* Positioning */
		width:98%;
	}

}


@media screen and (min-width:390px) and (max-width:632px)  {
/* Adjustments for tablet devices */
	nav {
		
		/* Positioning */
		width:98%;
	}

	div.navButton {
		display:block;
	}

}

@media screen and (max-width:389px)  {
/* Adjustments for tablet devices */
	nav {
		
		/* Positioning */
		width:98%;
		text-align:left;
	}

	div.navButton 	{
		font-size:1em;
		display:block;
	}
	div.navButton:nth-of-type(1):before{
			content:"1: ";
	}
	div.navButton:nth-of-type(2):before{
			content:"2: ";
	}
	div.navButton:nth-of-type(3):before{
			content:"3: ";
	}
	div.navButton:nth-of-type(4):before{
			content:"4: ";
	}

}



/* ------------------------------------------------
MAJOR STRUCTURAL ELEMENTS 
---------------------------------------------------*/

body { /* Main structural container for the page */
	font-family: 'Roboto', sans-serif;
	font-size:12pt;
	
	/* line heights */
	line-height:1.2em;
	
	/* colours */
	background-color:#FFFFFF; 
}


article { /* Container for all content on the page */
	
	width:60%;
	margin:0 auto;
	
	padding-top:1em;
	padding-bottom:1em;
}

@media screen and (max-width:1024px)  {
/* Make the article fill the screen on mobile devices */
	article {
		padding-top:1em;
		padding-bottom:1em;
		width:95%;

	}	

}

/* TOC
----------------------------------------------------------------------*/
#toc_container {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #772222;
	border-radius:5px;
    display: block;
    font-size: 95%;
    margin-bottom: 0em;
    padding: 20px;
    width: 300px;
	position:fixed;
	right:20px;
	top:20px;
}



.toc_title {
    font-weight: 700;
    text-align: left;
	font-size:150%;
	color:#772222;
	margin-left:0;
}

#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none !important;
	margin-left:0;
}
#toc_container ol li{
    list-style: decimal outside none  !important;
    margin-left:2px;
    
}



/* ------------------------------------------------
MINOR STRUCTURAL ELEMENTS (Standard)
---------------------------------------------------*/

/* Headers
---------------------------------------------------*/

h1,h2,h3 {
	font-family:'Roboto Condensed';
}

h1 {
	/* Text */
	
	font-size:2em;
	font-weight:900;
	font-variant:normal;

	
	/* Positioning */
	line-height:1.25em;
	margin-left:0.25em;
	margin-bottom:0.25em;
	
}

h1#pageTop { /* Used for the very first header on a page */
	margin-top: 0em;
}

h2 {
	/* Text */
	font-size:1.5em;
	font-weight:bold;
	line-height:1em;
	
	/* Positioning */
	margin-left:0.25em;	
	margin-top:1.15em;
	margin-bottom:0.25em;

}

h3 {
	/* Text */
	font-weight:bold;
	font-style:italic;
	font-size:1em;
	
	/* Positioning */
	margin-left:0.5em;
	margin-top:1.25em;
	margin-bottom:0.25em;
}

/* Lists
---------------------------------------------------*/

ol {
	list-style-type: decimal;
	
	/* Positioning */
	margin-left:1em;
	margin-bottom:0.5em;
}

ul {
	list-style-type: disc;
	
	/* Positioning */
	margin-left:1em;
	padding-top:0.15em;
	margin-bottom:0.5em;
}

li {
	margin-left:2em;
}


ul.dashed {
	list-style-type:none;
	margin-left:0em;
}

ul.dashed > li {
	text-indent:-5px;
	margin-left:1em;
}

ul.dashed > li:before {
	content: "-";
	text-indent:-5px;
}


ul.table { /* These are lists within tables, which need to lose the margin */
	margin-left:-0.5em;
	text-align:left;
}




/* Paragraphs
---------------------------------------------------*/

p {
	margin-left:0.5em;
	margin-right:0.5em;
	margin-bottom:0.5em;
	line-height:1.3em;
		
	color:#000;
	
}

p.mobile {
		display:none;
}

@media screen and (max-width:1024px)  {
	
	p.mobile {
		display:block;
	}
	
}

/* Used to put sources inside CFquotes */
p.quoteSource {
	margin-left:0em;
	color: #512020;
	font-style:italic;
	margin-top:0.5em;
	margin-bottom:0em;
	line-height:1em;
	
}


/* Used to display my email address */
p#email { 
	padding: 1em;
	border: 2px;
	border-style:groove;
	text-align: center;
	width:20em;
	background-color:#9c6363;
	color:white;
}

@media screen and (max-width:1024px)   {
	p#email {
	width:80%;
	line-height:1em;
		
	}

	
}

/* Font styling
---------------------------------------------------*/

i {
	font-style: italic;
}

strong {
	color: #772222;
	font-weight: bold;
	font-variant: normal;
}

sup {
	font-size:0.7em;
	vertical-align:super;
	line-height: 0;
}

/* Horizontal rule
---------------------------------------------------*/

hr {
    border: 0;
    height: 3px;
    background: #333;
    background-image: linear-gradient(to right, #FFF6F4, #772222, #FFF6F4);
	margin-top:1em;
}

/* ------------------------------------------------
MINOR STRUCTURAL ELEMENTS (Custom)
---------------------------------------------------*/

book { /* Used to style references to books */

	font-weight:bold;
	font-variant:small-caps;
	font-family:'Roboto Slab';
	color:#691010;
	/*font-size:120%;*/
	border-bottom-color: #205120;
	border-top-color: #205120;
	/*border-top-style:solid; */
	/*border-bottom-style:dotted;
	border-bottom-width: 2px;
	border-radius: 2px;*/
	
	padding:1px;
}

family, fam { /* Used to style references to families */
	font-variant: small-caps;
	font-style:normal;

	font-weight:800;
	font-family: 'Roboto Condensed';
	
	color: #691010;


}

da { /* Direct ancestor highlighting */
    font-family:'Roboto Slab';
    font-weight:bold;
    font-variant:small-caps;
    
    border-bottom:1px dotted;
    border-color:#772222;

    position:relative;

    background-color:#f6eded;
    color: #772222;

    /* 
    background-color:#772222; 
    margin:2px 1px 2px 1px;
    border-radius: 12px 12px;
    padding:0px 4px 0px 4px;
   
    */
}

place {
	color:#9C6501;
}

date {
	color:#00449C;
}

tngPage {
	color: #E89802;
}

key {
        
        
        font-family:Arial;
        padding: 1px 5px 1px 5px;
        border:solid;
        border-color: #000;
        border-width:1px;
    
}

/* Quotes
----------------------------------------------------------------------*/

div.CFNotes {
	font-size: 13px;
	
}

div.CFquote {
	/*width:60%;*/
	border-left-width:3px;
	border-left-color: #512020;
	border-left-style: solid;
	/*background-color: #ededd3; */
	background-color: #f3eed9;
	padding: 1em 1em 0.25em 1em;
	margin-left:0.5em;
	margin-bottom:0.5em;
}



div.CFquote p{
	margin-left:0em;
}

/* Similar to the TNG style, this allows for quotes to be displayed nicely on my main pages */
div.quote {
	/*width:60%;*/
	border-left-width:3px;
	border-left-color: #512020;
	border-left-style: solid;
	background-color: #ededd3;
	padding: 1em;
	margin-left:0.5em;
	margin-bottom: 0.5em;
}

/* Styling for the person's name which is often the first part of a quote */
qn{
	color:#772222;
	display:inline-block;
	font-weight:bold;
}

qn::first-letter {
	font-size:160%;
	
}

/* Memorials
----------------------------------------------------------------------*/

div.CFmemorial {
	width: 30em;
	border-style:solid;
	border-color: #6d6d6d;
	border-left-width: 6px;
	border-right-width: 6px;
	border-top-width: 12px;
	border-bottom-width: 6px;
	
	
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='24' viewBox='0 0 12 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236d6d6d' fill-opacity='0.09'%3E%3Cpath d='M2 0h2v12H2V0zm1 20c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM9 8c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm-1 4h2v12H8V12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	
	font-family: 'Roboto Slab', sans-serif;
	font-variant:small-caps;
	font-size:100%;
		
	text-align: center;
	background-color: #e0dee0;
	padding: 1em;
	
	margin-bottom:0.5em;
	margin-left:0.5em;
}

/* Footnotes
----------------------------------------------------------------------*/

div.CFfootnote {
	/*width:60%;
	background-color: #e3e8e5;*/
	margin-left:0em;
}

span.fn {
	display:block;
	margin-left:0.5em;
	font-size:90%;
}
span.fn::first-letter {
	font-weight:bold;
	color:#512020;
}

/* Boxes
----------------------------------------------------------------------*/

div.box {
	display:inline-block;
	border-style:solid;
	border-color:#691010;
	border-width:2px;
	background-color:#e2d3d3;
	
	
	padding:1em;
	margin-left:0.5em;
	margin-bottom:0.5em;
	
}


/* Fill the screen on mobile devices */
@media screen and (max-width:1024px)  {
	div.CFquote, div.CFped, div.CFmemorial, div.CFfootnote {
		width:95%;
	}
}

/* Figures
----------------------------------------------------------------------*/
figure {

	display:inline-block;
	float:none;
	width: 160px;
	height: 160px;
	text-align: center;
	font-style: italic;
	font-size: smaller;
	text-indent: 0;
	border: 1px solid #ddd;
	border-radius: 8px;
	margin: 0.5em;
	padding: 0.5em;
}



figure:hover {
	box-shadow: 0 0 2px 1px #512020;
}



figure img {
	margin: 0.5em;
}



figcaption {
	margin: 0.5em;
}

/* -------------------------------------------------------------------
	TOOLTIP
----------------------------------------------------------------------*/

.tooltip {
    position:relative;
    display:inline-block;
    border-bottom: 1px dotted #512020;
    margin-left:0.5em;
    color:#512020;
    
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 60em;
    background-color: #512020;
    color: white;
    text-align: left;
    padding: 5px 0;
    padding-left:0.5em;
    border-radius: 6px;
    border-width:1px;
    border-style: outset;
    border-color: #eeeeee;
    
    /* Position the tooltip text - see examples below!  */
    position: absolute;
    z-index: 1; 
    
    bottom:100%;
    left:50%;
    margin-left: -60px;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* --------------------------------------------------------------------------
	PEDIGREES
   --------------------------------------------------------------------------*/
   
 div.CFped {
	/*width:60%;*/
	background-color: #fff6f4;
	border-width:3px;
	border-style:solid;
	border-color:#772222;
	border-radius:20px;
	padding: 0.5em 1em 0.5em 0.5em;
	margin-left: 0.5em;
	margin-bottom:0.5em;
}

#pedTitle {
        color:#691010;
        font-variant:small-caps;
        font-family:'Roboto Condensed';
        font-size:120%;
        font-weight:bold;
        margin-bottom:0.5em;
        margin-top:-0.5em;
        margin-left:0.5em;
        display:inline-block;
}
   
   /* Numbered pedigrees */
 div.ped {
	 margin-top:0em;
	 margin-bottom: 0em;
 }
 
 #gen1 {
	 margin-left:1em;
 }
 
 #gen2 {
	margin-left:2em;
 }	
 
 #gen3 {
	 margin-left:3em;
 }
 #gen4 {
	margin-left:4em;
 }
 #gen5 {
	 margin-left:5em;
 }
 #gen6 {
	 margin-left:6em;
 }
 #gen7 {
	margin-left:7em;
 }
 #gen8 {
	margin-left:8em;
 }
 #gen9 {
	margin-left:9em;
 }
 #gen10 {
	 margin-left:10em;
 }
 #gen11 {
	 margin-left:11em;
 }
 #gen12 {
	 margin-left:12em;
 }
 #gen13 {
	 margin-left:13em;
 }
 #gen14 {
	 margin-left:14em;
 }
 #gen15 {
	 margin-left:15em;
 }
 #gen16 {
	 margin-left:16em;
 }
b.gen {
 font-weight:bold;
 color:#772222;
}


/* FORMS
----------------------------------------------------------------------*/
form {
	margin-left:0.5em;
}

div.radioInput {
	width:8em;
	display:inline-block;
}


/* TABLES
----------------------------------------------------------------------*/

table {
	border-style: solid;
	border-width: 1px;
	margin-left: 0.5em;
}





th {
	font-weight:bold;
	border-style:solid;
	color: white;
	border-color:black;
	border-width: 1px;
	padding: 0.5em;
	background-color:#9c6363;
}

tr:nth-child(even) {
		background-color: #dddddd;
}

tr:hover {
		/*background-color: #dca3a3;*/
		background-color:#bfa5a2;
		color: #ffffff;
}

td {
	border-style:solid;
	border-width: 1px;
	text-align: center;
	padding-left: 0.5em;
	padding-right:0.5em;
}

	
.alignLeft { /* These are specific elements which I want to align left */
	text-align: left;
	margin-left:0em;
	padding-left:0em;
}

/* responsive tables for mobile devices 
@media screen and (max-width:1024px)  {
	table.index, thead, tbody, th, td, tr {
		display: block;
	}
		
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr {border: 1px solid #ccc;}
	
	td {
		border:none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 0em;
	}
	
	td:before{
		position:absolute;
		//top: 6px;
		left: 0.5em;
		width: 45%;
		padding-right: 0.5em;
		white-space: nowrap;
	}
	
	td:nth-of-type(1):before {content: "Family"; font-weight:bold; text-align:left;}
	td:nth-of-type(2):before {content: "Seat"; font-weight:bold; text-align:left;}
	td:nth-of-type(3):before {content: "Page (book)"; font-weight:bold; text-align:left;}
	td:nth-of-type(4):before {content: "Page (pdf)"; font-weight: bold; text-align:left;}

	
	td.alignLeft {  over-ride left align for mobile devices 
		text-align: center;
	}


}
*/

/* Pedigree Table and lines
----------------------------------------------------------------------*/

table.CFped {
	border:none;
	min-width: 1024px;
}



table.CFped tr:nth-child(even) {
		background-color: inherit;
}



table.CFped td{
	
	text-align:center;
	padding-left:0px;
	padding-right:0px;
	min-width:30px;


}

#vLine { /* Standalone vertical line */
	vertical-align:top;
	display:inline-block;
	
	width:2px;
	height:25px;
	background-color:black;
	/* border:solid 1px red; */
}

#hLine{ /* Standalone horizontal line */
	vertical-align:top;
	display:inline-block;
	height:2px;
	width:100%;
	
	
	background-color:black;
	/*border:solid 2px red;*/
}

#vLineL { /* Vertical line, offset from the left */
	vertical-align:top;
	display:inline-block;
	margin-left:48%;
	
	width:2px;
	height:25px;
	background-color:black;
	/* border:solid 1px red; */
}

#vLineR { /* Vertical line, floats right */
	vertical-align:top;
	display:inline-block;
	margin-right:48%;
	
	width:2px;
	height:25px;
	background-color:black;
	/* border:solid 1px red; */
}



#halfLine {
	vertical-align:top;
	display:inline-block;
	
	height:2px;
	width:48%;	
	background-color:black;	
}

#halfLineR {
	vertical-align:top;
	display:inline-block;
	float:left;
	
	height:2px;
	width:48%;	
	background-color:black;	
}


/* ----------------------------------- */

#vertLine {
	vertical-align:top;
	width:2px;
	height:25px;
	background-color:black;
	display:inline-block;

	
}


#halfVert{
	font-size:0;
	width:2px;
	height:10px;
	background-color:black;
	display:inline-block;
}

#horLineHalf {
	width:49%;
	height:2px;
	margin-top:-2px;
	background-color:black;
	display:inline-block;
	vertical-align:top;

}

#hline {
	width:50%;
	height:2px;
	background-color:black;
	display:inline-block;
	vertical-align:top;
}

#horLineFull {
	width:100%;
	height:2px;
	margin-top:-2px;
	background-color:black;
	display:inline-block;
	vertical-align:top;
}

#horLineFullM {
	width:100%;
	height:2px;
	margin-top:0px;
	background-color:black;
	display:block;
	vertical-align:top;
}

#fillerL {
	width:49%;
	height:25px;
	display:inline-block;
	float:left;

}
#fillerR {
	width:49%;
	height:25px;
	display:inline-block;
	float:right;

}


/* FOOTER bar 
----------------------------------------------------------------------*/

footer {
	/* Text */
	font-size:0.7em;	
	
	/* Positioning */
	padding:0.5em;
	margin-top:0.5em;
	width:60%;
	margin-left:auto;
	margin-right:auto;
	
	/* Colours */
	background-color:#772222;
	
}

@media screen and (max-width:1024px)  {
	
	footer {
		
		width:98%;
		
	}	
}