@import "reset.css";
@import "typography.css";

html { margin: 0; background: url('../images/bg.jpg') repeat; }

body { padding: 25px 0px; margin: 0; font: 14px arial; text-align: center; } 

/* Divs */

#content, #content h1 { text-align: center; background-color: white; position: relative; }

#content { margin: 0 auto; width: 1022px; padding: 20px 0px; border: 1px solid black; }

#content h1 {
	padding: 10px;
	text-decoration: underline;
	font: bold 18px Arial;
	border: none; 
	width: 1000px;
	margin: 20px auto 0px;
}

#content h2 { color: black; font: bold 16px arial; margin-top: 0px; }

h2.top a:link, h2.top a:visited, .ver a:link { text-decoration: none; color: black; }

h2.top a:hover { text-decoration: underline; color: red; }

#top {
	margin: 0px auto 15px;
	padding: 0px 20px;
	text-align: center;
	height: 110px;
	font: bold 16px Arial;
}

/* Horizontal Line */

hr  	{ border-top: 1px; background-color: #B8B8B8; height: 1px; color: #B8B8B8; width: 975px; margin: 0px auto; display: block; }

/* For pop-up CSS Boxes */

.tip i.pop { text-decoration: overline; font: italic 13px Arial; }

/* Navigation Links */

ul.links, ul.ver { list-style: none; text-align: center; margin: 0px auto; }

ul.links { width: 905px; height: 108px; }

.links li ul { height: 25px; margin: 0px auto; }

.links li, .links li ul li { color: #C0C0C0; font: bold 16px Arial; }

.links li ul li {
	display: block;
	float: left; 
	width: 127px; 
	height: 15px; 
	margin: 0px;
	padding: 3px 0px 7px; 
	border-right: 2px solid black;
	border-bottom: 2px solid black;
}

.links li { height: 25px; margin: 0px auto; }

.links li ul li:last-child, .ver li:last-child { border-right: none; }

.links li:last-child ul li  { border-bottom: none; }

.links li.here, .ver li.here { background-color: #CEECFF; color: green; }

.links li.no { color: #C0C0C0; }

/* Combined Links */

.links li.no, .ver li { text-decoration: line-through; }

.links li.here, .ver li.here, .links a, .ver a, .book a, .ver li.link, .ver li.work, .navigation a { text-decoration: none; }

.links a, .ver a, .book a { color: black; }

.links a:hover, .ver a:hover, .book a:hover, .navigation a:hover { color: #447085; border-bottom: 1px dashed #447085; }

.links li ul li:hover {
}

/* Middle Links */

.ver { height: 48px; width: 870px; }

.ver li {
	display: block;
	float: left;
	padding: 5px 20px; 
	height: 18px; 
	margin: 10px auto;
	border-right: 2px solid black;
	color: #C0C0C0;
	font: bold 16px Arial;
}

/* Bookmark Links */

ul.book, .book a, .book a:hover { text-decoration: underline; }

ul.book 	{ margin: 10px auto; text-align: center; height: 18px; width: 944px; }

.book li  {
	display: block;
	float: left;
	height: 18px;
	width: 118px;
	font: 12px Arial;
	margin: 0px;
}

li.half-li { width: 59px; }

.book a, .book a:hover { border: none; }

/* Main Translation Section */

div.section, div.section2 { width: 1022px; }

.marg { margin-top: 10px; }

.small-marg { margin-top: 5px; }

div.title {
	width: 100px;
	color: black;
	margin-bottom: -70px;
	font: 12px Arial;
	height: 70px;
	padding-left: 20px;
	text-align: center;
}

span { margin-left: 20px; }

span.one { margin-left: 20px; }

span.two { margin-left: 40px; }

span.three{ margin-left: 60px; }

span.four { margin-left: 80px; }

span.five { margin-left: 100px; }

span.six { margin-left: 120px; }

span.written { margin-left: 0px; font-family: 'Tempus Sans ITC'; }

span.space { margin-left: 0px; word-spacing: 4px; }

.title h2, h2.long, h2.greek { 
	vertical-align: top; 
	margin: 0 auto; 
	text-decoration: none; 
	border-bottom: 1px solid black; 
	font: bold 16px Arial; 
	width: 74px; 
}

.title h2 a:hover { text-decoration: none; }
.title h2.long 	{ width: 83px; } 
.title h2.greek 	{ width: 90px; }
.title h2.greek-long { width: 98px; }

div.title h3 { vertical-align: top; margin: 0px; text-decoration: underline; font: 13px Arial; }

.section h4, .section2  h4 { 
	display: table-cell;
	width: 100px; 
	vertical-align: middle; 
	color: black; 
	font: 12px Arial; 
	padding-left: 20px; 
	font: 19px "Arial black"; 
	margin: 0px;
	text-align: center;
	min-height: 40px;
	position: relative;
}
	
.section p, .section2 p { 
	display: table-cell;
	width: 830px; 
	color: black; 
	font: 14px Arial; 
	padding-left: 20px; 
	position: relative;
	text-align: justify;
	margin: 0 auto;
	}
	
.justify-line { 	margin-bottom: -15px; }
.align-text { vertical-align: middle; }
.sec-dec { margin-bottom: -30px; }
	
div.greek p { width: 600px; }

div.greek h4, div.title-greek { padding-left: 130px; }
	
.section p, .section p.bless { text-indent: 20px; }	

p i, .section2 p i  { font-family: serif; font-size: 16px; }

.greek b { font-family: arial; font-size: 14px; font-style: italic; font-weight: bold; }
i.greek 	{ text-decoration: overline; margin-left: 0px; font-family: Georgia; font-size: 14px; }

p.quote, p.three, p.master-prayer { text-align: left; padding: 10px 0px 10px 100px; }
p.quote, p.three { font: bold 14px Arial; }
p.letter { font-family: 'Comic sans ms'; padding: 0px 20px; }
p.greek-q, p.master-prayer { font-style: italic; }
p.greek-bless { text-align: justify; padding: 5px 90px 5px 60px; }
p.bless { text-align: justify; padding: 10px 90px 10px 60px; }
p.three { font: 14px arial; }
p.quote2 { padding: 10px 20px; margin: 0; text-align: center; }
p.quote, p.three, p.bless, p.quote2, p.none, p.master-prayer { text-indent: 0px; }
p.gal-large-letter { padding: 0px 20px 10px; margin: 0; text-align: center; font-size: 20px; }

#final { 
	display: table-cell;
	width: 830px;
	color: black;
	font: 14px Arial;
	text-align: center;
	padding-top: 30px;
}

#final h1 { margin: 0px auto; }

.tip { 
	min-width:150px; 
	max-width: 500px; 
	height: auto; 
	overflow: hidden; 
	position: absolute; 
	background: #d9d9c2; 
	border: 1px solid #585858;
	padding: 5px 10px; 
	text-align: justify; 
}

a.popup { cursor: pointer; color: red; text-decoration: none; }

img { vertical-align: middle; }

.tip span  { margin-left: 0px; }

.side-bar, .back-to-top {
	cursor: pointer;
	margin: 0px;
	position: fixed;
	left: 0px;
	background-color: black;
	color: white;
	text-align: center;
	-webkit-border-top-right-radius: 10px;    /* for Safari */
	-webkit-border-bottom-right-radius: 10px; 
	-moz-border-radius-topright: 10px;       /* for Firefox */
	-moz-border-radius-bottomright: 10px; 
	border-radius: 0px 10px 10px 0px;
}

.side-bar {
	padding: 0px 5px 0px 3px;
	top: 100px;
	height: 150px;
	font-size: 20px;
	min-width:25px;
}

.side-bar:hover { width: 35px; }

.back-to-top, .back-to-top:visited { padding: 25px 5px 0px 3px; top: 300px; height: 190px; font-size: 12px; }

.back-to-top:link, .back-to-top:visited, .back-to-top:hover { color: white; text-decoration: none; }

.back-to-top:hover { width: 20px; }

.side-bar p { margin-top: 25px; }

.navigation {
	cursor: pointer;
	padding: 0px 5px 0px;
    background-color: #85C6F0; 
    width: 760px; 
    height: 40px; 
    position: fixed; 
    top: 0px;
	left: 45%;
	border-left: 3px solid #447085;
	border-right: 3px solid #447085;
	border-bottom: 3px solid #447085;
	margin: 0px 0px 0px -290px;
    text-align: center;  
    z-index: 300; 
	display: none;
	-webkit-border-bottom-left-radius: 10px;    /* for Safari */
	-webkit-border-bottom-right-radius: 10px; 
	-moz-border-radius-bottomleft: 10px;       /* for Firefox */
	-moz-border-radius-bottomright: 10px; 
	border-radius: 0px 0px 10px 10px;
}

.navigation a { color: #2c6c94; }

.navigation li {
	display: block;
	float: left; 
	width: 105px;
	margin: 0px;
	font-weight: bold;
	padding: 12px 0px;
	border-left: 1px solid #5097c5;
	border-right: 1px solid #5097c5;
}

.navigation li:first-child { border-left: none; margin-left: 10px; }

.navigation li:last-child { border-right: none; }

/* Bottom Navigation */


.alignleft { float:left }
.alignright { float:right }

.alignleft, .alignright {
	padding: 10px 150px;
	font: normal 14px Arial;
	border: none; 
	margin: 20px 0px 0px;
}

.alignleft a, .alignright a  {
	color: #3978eb;
	text-decoration: none;
}

.alignleft a:hover, .alignright a:hover  {
	color: red;
	border-bottom: 1px dashed;
}

/* PDF */

#pdf { width: 1000px; margin: 0px auto; height: 50px; }

a.pdf:link, a.pdf:visited, a.pdf-none, a.pdf-none:visited, a.pdf-none:hover, a.galatians {
	display: block;
	text-align: left;
	font: bold 14px "Arial black";
	margin: 15px 0px 15px 45px;
	color: black;
	text-decoration: underline;
	max-width: 200px;
	cursor: pointer;
	float:left;
}

a.pdf:hover, a.galatians:hover  { color: red; font-size: 16px; }
a.pdf:hover { margin: 13px 0px 13px 45px; }
a.galatians:hover { margin: 13px 45px 11px 0px; }

a.pdf-none, a.pdf-none:visited, a.pdf-none:hover {
	text-decoration: line-through;
	color: #CBCBCB;
}

a.galatians {
	width: 600px;
	min-width: 600px;
	max-width: 600px;
	margin: 15px 45px 15px 0px;
	float: right;
	text-align: right;
}