/* ++++++++++++ Essential to all Greek +++++++++++++ */
/* reset CSS */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,
caption,center,cite,dd,del,details,dfn,div,dl,dt,em,embed,
fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,
img,input,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,
q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,
th,thead,time,tr,tt,u,ul,var,video
{
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}


h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}

/* end reset */

/*
Correct padding with widths.
When you add padding to an element with a width,
 it will end up much larger than what it should be.
 The width and the padding will be added together.
 So, if I have an element with the width of 100px,
 and I add a padding of 10px to that same element,
 then the awkward browser behavior will make that
 element 120px. The following will correct that.
*/

* { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; }

/* Clear all floats */
.parent-selector:after {
content: "";
display: table;
clear: both;
}

/* Clear all wrap floats */
.wrap:after {
content: "";
display: table;
clear: both;
}

body {
	background-image:url('../images/background.jpg');
	background-attachment: fixed;
	background-position:top center;
	color: black;
	font-size: 1em;
font-family: "Times New Roman", Times, Serif;
}
.clear {
	clear:both;
}
* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

#container
 {
	max-width: 922px;
 margin: 0 auto;
 text-align: left;
 background-color: white;
 border: 1px solid black;
	}

hr {
 display: block;
 margin-top: 0.5em;
 margin-bottom: 0.5em;
 margin-left: auto;
 margin-right: auto;
 border-style: inset;
 border-width: 1px;
}


donate {
 position: absolute;
 left: 0px;
 width: 200px;
}

/* paypal is found on halfmoon.css */
#paypal {
	margin-left: 20px;
	float: left;
	clear: both;

}
#paypal	img { border: 0; }

/* ++++++++++ Places page name on bottom right corner ++++++++++ */
div.booktitle
{
		text-align: center;
		
		position: fixed;
		font-size: 2em;
		color: black;
		bottom: 0;
		right: 0;
		padding: 7px 10px 20px 10px;
		margin-right: 10px;
		width: auto;
		background-color: yellow;
		border: 4px solid black;
		writing-mode: vertical-rl;
}

h6 { background: blue; 
color: white;
font-size: 2em;
text-align: center;
}

	
.redblock {
border: 5px solid red;
padding: 10px;
margin-top: 1em;
margin-bottom: 1em;
}


/* ++++++++++ Places next on bottom left corner ++++++++++ */
div.next
{
	text-align: center;
	position: fixed;
	/* font-size: 2em; */
	color: black;
	bottom: 0;
	left: 0;
	padding-left: 10px;
	padding-right: 10px;
	margin-right: 10px;
	width: auto;
	background-color: white;
	border: 4px solid black;
}


/* +++++++++++ Menu of all the pages or chapters +++++++++++++ */
/* +++++++++++ Access with <div id='menu'> +++++++++++++++++++ */
	 
#menu
 {
	 max-width: 922px;
	 margin: auto;
	 padding: 10px 10px 0px 10px;


	/*width: 900px;
 padding: 0px 0px 0px 0px; C0FFFF #A2A4EE */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#C0C0FF), to(#4040FF)); /* Safari 4+, Chrome */
	background-image: -webkit-linear-gradient(top, #C0C0FF, #4040FF); /* Chrome 10+, Safari 5.1+, iOS 5+ */
	background-image: -moz-linear-gradient(top, #C0C0FF, #4040FF); /* Firefox 3.6-15 */
	background-image: -o-linear-gradient(top, #C0C0FF, #4040FF); /* Opera 11.10-12.00 */
	background-image: linear-gradient(to bottom, #C0C0FF, #4040FF); /* Firefox 16+, IE10, Opera 12.50+ */
 	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#C0C0FF', endColorstr='#4040FF'); /* IE6 & IE7 */
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0FF', endColorstr='#4040FF')"; /* IE8 & IE9 */
	}


/* ++++++++++++ The text goes under 'main' ++++++++++++++ */
/* ++++++++++++ Access with <div class='main'> ++++++++++++++ */


.main
 {
	 width: 95%;
	 margin: auto;
	 padding: 4px 10px 0px 1px;
	 font-size: 1.5em;
	 font-family: "Times New Roman", Times, Serif;
	 margin-top: 10px;
	 background-color: rgb(255,255,255);
}





/* ++++++++++++ Main paragraph style ++++++++++++++ */
.main p {
	text-align: justify; text-indent:50px;
	}

 h1 {
	font-size: 3em;
	color: yellow;
	margin-top: 10px;
	margin-bottom: 5px;
	font-weight: bold;
	text-align:center;
	text-shadow:5px 5px 10px black;
	text-transform:uppercase;
	font-family: Arial, Sans-serif;
}

sup {font-size: .7em;
	vertical-align:super;	
	font-weight: bold;
}

p.box {
  border: 2px solid black;
   outline: #4CAF50 solid 5px; 
  margin: auto;    
   padding: 20px; 
   /* text-align: center;  */
	margin-top: 10px;
	margin-bottom: 10px;
}


table.chart {
	 border-collapse: collapse;
		 /* margin-left: -3em; */
		/* float: right; */
		margin-right: auto;
		margin-left: auto;
		table-layout: fixed;
		/* width: 100%; */
		border: 1px solid black;
		margin-bottom: 1em;
		clear: both;
}

colspan.chart {
	text-align: center;
	width: auto;
}

td.chart {
	/* border-left: 3px solid black;	 */
	border: 1px solid black;
	padding: 5px 5px;
	 width: auto;
	 text-align: center;
	 font: bold 1em  "Times New Roman", Georgia, Times, Serif;
}


.green {
	background-color: #5BF566;
	color: black;
	width: auto;
	border: 1px solid black;
	font-weight: bold;
	font-size: .7em;
	padding: 8px 2px;
	
	/* font: 10px arial, sans-serif bold; */
}


td.bgreen {
	background-color: #5BF566;
	color: black;
	width: auto;
	border: 1px solid black;
	font-weight: bold;
	font-size: 1.6em;
	padding: 8px 2px;
	text-align: center;
	
	/* font: 10px arial, sans-serif bold; */
}


th.divide {
	color: black;	
	background-color: black;
	border: 5px solid red;
}

th.chart {text-align: center;
	background-color: blue;
	color: white;
	border: 1px solid white;
	border-left: 1px solid black;
	width: auto;
	padding: 5px 10px;
	font-size: .9em;
}

th.chart {
	background-color: blue;
	width: 1em;
}



td.cen {
	text-align: center;
	background-color: yellow;
	color: blue;
	border: none;
	width: auto;
	font-weight: bold;
}

td.cen1 {
	text-align: center;
	background-color: #A8F773;
	color: blue;
	border: none;
	width: auto;
	font-weight: bold;
}


td.redcen {
	text-align: center;
	background-color: red;
	color: white;
	border: none;
	width: auto;
	font-weight: bold;
}


td.cent {
	text-align: center;
	background-color: black;
	color: white;
	border: none;
	width: auto;
}

sup {
	font-size: .8em;
	color: red
}


h2 { 
	border-radius: 25px;
	text-align: center;
	font-size: 2em;
 width: 90%;
	color: black;
	font-weight: bold;
 margin-left: auto;
	margin-right: auto;
	font-family: "Times New Roman", Times, Serif;
	background: url('../images/grey.jpg');
	padding-top: 10px;
	padding-bottom: 10px;
	height: auto;
	border-style: none solid solid none;
border-width: 6px;
border-color: black;



	/* text-transform: capitalize; */

}

h3 {
	border-width: 6px;
	border-color: black;
	border-style: none solid solid none;
 border-radius: 25px;
 /* background: #73AD21; */
				background: #80FF80;
				/* background: url('../images/grass.jpg'); */
		font-size: 1.3em;
		color: black;
		font-weight: bold;
		text-align:center;
 padding: 30px; 
 max-width: 600px;
 height: auto; 
		/* width: auto; */
margin: auto;

	}


h4 {
	margin-left: auto; margin-right: auto;
	border-width: 5px;
	border-color: red;
	border-style: none solid solid none;
 border-radius: 25px;
 /* background: pink; */
		background: url('../images/pink.jpg');
		font-size: 100%;
		color: black;
		/* font-weight: bold; */
		font-family: "Times New Roman", Times, Serif;
		text-shadow: 0px 0px #000;
		text-align: center;
 padding: 20px; 
 max-width: 350px;
 height: auto; 
		width: auto;
	}


h4.green {
	border-width: 6px;
border-color: green;
	border-style: none solid solid none;
 border-radius: 25px;
 /* background: #73AD21; */
				background: #80FF80;
				/* background: url('../images/grass.jpg'); */
		font-size: 160%;
		color: #fff;
		text-shadow: 3px 3px #000;
		font-weight: bold;
		text-align:center;
 padding: 30px; 
 max-width: 300px;
 height: auto; 
		width: auto;
	}

.vbig2 {background-color: #C0FFC0; font-size: 5em;}

.vbig
{ background-color:#FFffff; font-size: 5em; }

	 
.vleft table {
	text-align: center;
	border-collapse:collapse;
	border: none;
	background-color: white;
	}
	
.vleft td, th	{
		border:1px solid black;
		text-align: left;
		vertical-align: top;
	font-family: "Times New Roman", Georgia, Times, Serif;
 	font-size: 1em;
	}

/* turn Greek words to big and bold */
*.t {
	font-family: "Times New Roman", Georgia, Times, Serif;
 	font-size: 105%;
	font-weight: bold;
	color: black;
}



/* legal list styles */
#legal-list {
 counter-reset: section;
}
#legal-list h3:before {
 counter-increment: section;
 content: counter(section) ". ";
 margin: 0 0.5em 0 0;
}
#legal-list ol {
 counter-reset: clause;
 list-style: none outside none;
 text-indent: -2em;
}
#legal-list ol li {
 counter-increment: clause;
}
#legal-list ol li:before {
 content: counter(section) "." counters(clause, ".") ". ";
 margin: 0 0.5em 0 0.5em;
}

/*
 <h2>Section One</h2>
 <ol>
 <li>Clause One</li>
 <li>Clause Two
 <ol>
 <li>Clause Two sub One</li>
 <li>Clause Two sub Two</li>
 <li>Clause Two sub Three</li>
 </ol>
 </li>
 <li>Clause Three</li>
 </ol>
 <h2>Section Two</h2>
 <ol>
 <li>Clause One</li>
 <li>Clause Two</li>
 <li>Clause Three
 <ol>
 <li>Clause Three sub One
 <ol>
 <li>Clause Three sub One sub One </li>
 <li>Clause Three sub One sub Two</li>
 <li>Clause Three sub One sub Three</li>
 </ol>
 </li>
 <li>Clause Three sub Two</li>
 <li>Clause Three sub Three</li>
 </ol>
 </li>
 </ol>
*/

/* Table parameters */

/* ++++++++++++ Main table style ++++++++++++++ */
	

table {
 border-collapse: collapse;
		margin-left: auto;
		margin-right: auto;
		table-layout: fixed;
		width: 100%; 
		border:  1px solid black;

}

.v {
	width: 100%;
}


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

th {
	text-align: center;
	background-color: blue;
	color: white;
	border: none;
	width: auto;
	font-size: 25px;
	padding: 5px 5px;
}

td {
	 font-family: "Times New Roman", Times, Serif;
	 vertical-align: text-top;
	padding: 20px 20px;
	/* text-align: justify; */
	width: auto;

}

td.sm {
	/* make the height of td a little narrower */
	padding: 5px 5px;
}

td.l, th.l {
	border-left: 3px solid black;	
	padding: 0px 20px;
	 width: auto;
}


td.ll, th.ll{
	border-left: 6px solid black;	
	padding: 0px 20px;
	width: auto;
}


th.w {
	border-left: 3px solid white;
	width: auto;
	height: auto;
}


th.ww {
	border-left: 6px solid white;
	width: auto;
}

/* +++++++++++ highlight alternate lines ++++++++++++++ */
/* tr.alt td  */
/* { */
/* color:#000000; */
/* background-color:#68F8C7; */
/* } */


.yesC {text-align: center; font-size: 1.1em}
.yesL {text-align: left; font-size: 1.1em;}
.nope {border-style: none; border: none;}
.hi2 {
	background-color: #7ABEEE;
	color: black;
}

.c {text-align: center;}

/* +++++++++++ turn something yellow, esp an item in a table ++++++++++++++ */
.y {background-color: yellow;
 color: black;
 font-weight: bold;
 font-size: 1.1em;
 text-align: center;
 }

 



/*
 h5 { text-align: center;
	font-size: 400%; width: 90%;
	margin-top:-10px;
	color: #000000;font-weight: bold;
	margin-left: auto; margin-right: auto;
	font-family: "Times New Roman", Times, Serif;
	text-transform: capitalize;
	} 
*/
	
h5 { text-align: center;
border: 5px solid green;
background: #80FF80;
  /* background-color: #DCDE22; */
font-size: 110%; width: 90%;
color: #000000;font-weight: bold;
margin-top:-10px;
margin-left: auto; margin-right: auto;
font-family: "Times New Roman", Times, Serif;
/* text-transform: capitalize; */

padding: 10px;
margin-top: 1em;
margin-bottom: 1em;
}
	
	
	


/* ol is used for this type; ul for bullets */
.main ol { list-style-type: decimal; padding: 20px 0px 20px 40px;}
.main ol ol { list-style-type: lower-alpha; }
.main ol ol ol { list-style-type: lower-roman; }


.red {color: red;}
.r {color: red; font-weight: bold;}
.i {font-style: italic; }
/*i {font-style: normal}*/
.b {font-weight: bold;}
em {color: red;
	font-weight: bold;
	font-style: italic;

}
.u {text-decoration: underline;}
.norm { font-weight: normal;}
cite { font-weight: normal;}


/* +++++++++++ turn something yellow, esp an item in a table ++++++++++++++ */
/* th, td.x {background-color: #F8A568; */
td.x, th.x {background-color: #F8A568;
 color: black;
 font-weight: bold;
 text-align: center;
 font-size: 1.3em;
	line-height: 100%;
	width: auto;
 }


caption {color: black; background-color: yellow; font-size: 1.3em; font-weight: bold;}


ol.d {
	word-spacing: 20px;
	font-weight: bold;
	font-size: 130%;
	margin-left: 30px;
}

footer {
	max-width: 900px;
	margin: auto;
}
p.foot {
   text-align: left;
	 text-indent: 50px;
   font-size: 200%;
	 font-weight: bold;
	padding-top: 2em;
	padding-bottom: 2em;

	 }







* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.bigmoon{
margin-bottom: 10px;
max-width: 900px;
clear: left;
}

.bigmoon ul{
padding: 0 9px 0px 5px;
margin-left: 0;
margin-top: 1px;
margin-bottom: 10px;
font: bold 20px Arial, Helvetica, sans-serif;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
border-bottom: 0px;
}

.bigmoon li{
display: inline;
margin: 0;
}

.bigmoon li a{
text-decoration: none;
padding: 3px 3px 2px 3px; /*top, right, bottom, left*/
margin: 0;
margin-right: 10px; /*distance between each tab*/
border-style: none none solid none ;
color: black;
font-size: 30px;
background: url('dark1.png');

/*background: #ECEEEC url(http://www.motorera.com/theology/tabright.gif) top right no-repeat;*/
/*background: blue;*/
}

.bigmoon li a:visited{
color: black;
background: url('dark1.png');

}

.bigmoon li a:hover{
	background: url('dark2.png');
background-color: #CDDADA;
color: red;
margin-top: 100px;
}

 
div.id img {
	width: 100%;
	height: auto;
}
/*
<div class='id'>
	<img src='../images/id-1.png' alt='first ID chart'>
</div>
*/



/* The side navigation menu */
.sidebar {
  margin: 0;
  padding: 0;
  width: 180px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

/* Sidebar links */
.sidebar a {
  display: block;
  color: blue;
	padding: 6px 8px 6px 16px;
  /*padding: 2px;*/
  text-decoration: none;
	font-size: 14px;
}

/* Active/current link */
.sidebar a.active {
 background-color: #f4eca4;
 /* background-color: #04AA6D; */
 color: black;
}
.sidebar a.active1 {
  background-color: #00C0FF;
  color: black;
}

/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
 background-color: white;
 color: blue;
}

/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
 margin-left: 180px;
 padding: 1px 16px;
 height: 1000px;
}

/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) {
 .sidebar {
 width: 0%;
 /* height: auto; */
 height: 0px;
 position: relative;
 }
 .sidebar a {float: left;}
 div.content {margin-left: 0;}
}

/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 400px) {
 .sidebar a {
 text-align: center;
 float: none;
 }
}




.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
 /*============*/
/* Navbar container */
.navbar {
	border-radius: 25px;
  overflow: hidden;
  background-color: #c0c0c0;
  font-family: Arial;
  margin-bottom: 1em;
	background: yellow;
	border-style: none solid solid none;
	border-width: 6px;
	border-color: black;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 20px;
  color: black;
  font-weight: bold;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 20px; 
  border: none;
  outline: none;
  color: black;
  font-weight: bold;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
    border-radius: 25px;
}

/* Dropdown content (hidden by default) */
.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;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}


/*
<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
</div>
*/