@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;
}

/* PDF */

#pdf {
	text-align: left;
	font-size: 14px;
	margin: 15px 0px 15px 25px;
}

#pdf a:link, #pdf a:visited, #pdf a:hover {
	color: black;
	margin: 0px 0px 10px 25px;
	font: 14px "Arial black";
	text-decoration: underline;
}

#pdf a:hover {
	color: red;
}

/* Horizontal Line */

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

/* For pop-up CSS Boxes */

.tip i.pop { text-decoration: overline; font: italic 13px Arial; }
i.greek 	{ text-decoration: overline; margin-left: 0px; font: normal; }

/* 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;
}

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; 
}
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;
	}
	
.section p, .section p.bless {	
	text-indent: 20px;
}
	

.section p i, .section2 p i  { font-family: serif; font-size: 16px; }
	
p.quote, p.three {
	text-align: left;
	font: bold 14px Arial; 
	padding: 10px 0px 10px 100px;
}

p.letter {
	font-family: 'Comic sans ms';
	padding: 10px 20px;
}

p.greek-q {
	font-style: italic;
}

p.bless {
	text-align: justify;	
	padding: 10px 90px 10px 60px;
}

p.three {
	font: 14px Arial;
}

p.quote2 { 
	padding: 10px 0px; 
	margin: 0;
	text-align: center; 
}

p.quote, p.three, p.bless, p.quote2, p.none { 
	text-indent: 0px;
}

#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; 
}

.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: 550px; 
    height: 40px; 
    position: fixed; 
    top: 0px;
	left: 50%;
	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; 
}

.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;
}