html {
    width: 100%;
    height: 100vh;
		background-image: url("../img/bg2.jpg");
		background-color: #dbb960;
background-size: cover; 
background-attachment: fixed;
	background-position: static;
	background-repeat: no-repeat;
}


/*FONTS*/

/* open-sans-regular - latin */
/* open-sans-400 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../../fonts/open-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/open-sans-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../../fonts/open-sans-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../fonts/open-sans-v13-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* cardo-700 - latin */
@font-face {
  font-family: 'Cardo';
  font-style: bold;
  font-weight: 700;
  src: url('../../../fonts/cardo-v8-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Cardo Bold'), local('Cardo-Bold'),
       url('../../fonts/cardo-v8-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/cardo-v8-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/cardo-v8-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../../fonts/cardo-v8-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../fonts/cardo-v8-latin-700.svg#Cardo') format('svg'); /* Legacy iOS */
}


body {
	/* overflow: hidden; */
    margin: 0px;
    padding: 0px;
font-family: 'Open Sans', sans-serif;
/*
	background-image: url("../img/bg2.jpg");
background-size: cover; 
background-attachment: fixed;
	background-position: static;
	background-repeat: no-repeat;
*/

}


.backindex{color:black; font-style:italic; font-size:120%; margin-bottom:25px;}

a.sb-nav-home
{
	width: 35px;
	height: 35px;
	display: block;
	overflow: hidden;
	background-image:url("../img/sidebar/home.png");
	margin-bottom: 10px;
}

a.sb-nav-home:hover
{background-position: -35px 0;}

a.sb-nav-index
{
	width: 35px;
	height: 35px;
	display: block;
	overflow: hidden;
	background-image:url("../img/sidebar/index.png");
	margin-bottom: 10px;
}

a.sb-nav-index:hover
{background-position: -35px 0;}

a.sb-nav-previous
{
	width: 35px;
	height: 35px;
	display: block;
	overflow: hidden;
	background-image:url("../img/sidebar/previous.png");
	margin-bottom: 10px;
}
a.sb-nav-previous:hover
{background-position: -35px 0;}

a.sb-nav-next
{
	width: 35px;
	height: 35px;
	display: block;
	overflow: hidden;
	background-image:url("../img/sidebar/next.png");
	margin-bottom: 10px;
	margin-top: 10px;
	float:right;
}
a.sb-nav-next:hover
{background-position: -35px 0;}

#navcontain 
{
top: 50%;
margin-top: -90px;
position: absolute;
width:35px;	
height: 130px;
background-image:url("../img/sidebar/blacktrans-bg.png");
padding: 2px;	
}



.displace {
	position: absolute;
	left: -5000px;
	}



a {
text-decoration: underline;
color: #FFF;
margin: 0px;	
}


H1 {
	
	margin-top: 20px;
	margin-bottom: 10px;
	color: black;
	font-size: 500%;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 700;
	


.header {
	
		background-image:url("../img/h1-bg.jpg");
	background-repeat: repeat-x;
	background-position:top;
	width:40%;
	height: 90%;
}
	
}

H2 {
	font-size:190%;	
	margin-top: 0px;
	margin-bottom: 5px;
	line-height: 20pt;
	padding: 0;
	
}

H3{
background-image:url("../img/blacktrans-bg.png");
color: #FFF;
margin: 0px;
padding-left: 4px;
padding-right: 4px;
font-size: 10pt;
	
}



.quote {
	
font-family: 'Oswald', sans-serif;
	width: 100%;
	color: #63d824; 
	position: relative;
	float: left;
		text-shadow: 2px 2px #000;
text-align: center;
font-size: 24pt;
display: block;
	}


p {
	margin-top: 0px;
	
}


.p-indent {
	
padding-left: 30px;
margin: 0;
padding-bottom: 0;
border-left: 1px solid black;
	
}



.lowres-visibility {display: block;}
.1600res-hide {display: block;}

img {
	
	max-width: 100%;
	height: auto;
	width: auto/9; /* IE8 */
	
}

.textwrapleft{
	
	float:right;
	margin: 10px;
}

.st-container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
}


.st-panel {
	position: relative;
	width: 100%;
	height: 100%;
	vertical-align:top;

}


#sidebar {
	
	position: fixed;
	width:35px;
	min-height: 100%;
	padding-top: 10px;
}




.contentcontainer iframe,
.contentcontainer object,
.contentcontainer embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90%;
}


.text1, .text2 {
	
	color: black; 		
	line-height: 21pt;
	}
	

.inset-text1 {
	color: black;
		max-width: 450px;
		font-size: 12pt;
}



.page2, .page3, .page4, .page5, .page6,
.page7, .page8, .page9, .page10, .page11, .page12
{
border-top: 1px solid black;	
}



/* PAGE 1 */

.page1 {

background-image: url("../img/bg.jpg");
background-repeat:no-repeat;
background-position:center;
width: 100%;
height: 100%;
background-size: cover; 
overflow:hidden; /* FIXED TOP GAP PROBLEM */
}

#title {
	
		position: absolute;
	width:757px;
	height: 281px;
	background-image: url(../img/fiction.png);
	right: 3%;
	margin-top: 15%;	
	z-index: 14;
}






/*PAGE 2*/
.page2 {
	min-height:100%;
	height:auto;
	padding-bottom:25px;
	border-top: 2px solid black;
		
}

.page2 .text1 {
	

		width: 100%;

		height: auto;
		font-size: 120%;

	float: left;

}

.page2 .col1{text-align:right;}

.page2 .text1 p{	line-height: 21pt;
			font-size: 110%;}

.page2 .bottom-nav{
	
	background-image: url("../img/blacktrans-bg.png");
	width:100%;
	height:35px;
	padding:0;
	vertical-align:middle;
	color:white;
	margin: 25px 0 25px 0;
	font-size:120%;
	}

.page2  #bottom-navright{text-align:right; vertical-align:text-middle; display:block;}

.page2 .navtext{margin-top:10px;}


.page2 #bottom-navcentre{text-align:center; vertical-align:text-middle;}


.page2 .contentcontainer{
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}







/*POPUP BOXES*/


.tooltip {
  position: relative;
  cursor: help;
  display: inline-block;
  text-decoration: underline;
  outline: none;
}

.tooltip span {
  visibility: hidden;
  position: absolute; 
  bottom: 30px;
  left: 50%;
  z-index: 999;
  width: 230px;
  margin-left: -127px;
  padding: 10px;
  border: 1px solid #990000;
  opacity: 1;
  background-color: #000;                     

}

.tooltip:hover {
  border: 0; /* IE6 fix */
}

.tooltip:hover span {
  visibility: visible;
}

.tooltip span:before,
.tooltip span:after {
  content: "";
  position: absolute;
  z-index: 1000;
  bottom: -7px;
  left: 50%;
  margin-left: -8px;  
  border-top: 8px solid #990000;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;        
  border-bottom: 0;  
}

.tooltip span:before {
  border-top-color: #000;
  bottom: -8px;
}











/* SMALLER RESOULTION STYLES */



@media only screen and (min-width : 600px) and (max-width : 1099px) /* Set Max-Width so that it doesnt count everything above minwidth */
{


#navcontain{display:none;}


#title {
	
		position: absolute;
	width:100%;
	height: 281px;
	background-size: contain;
	background-position:center;
	background-repeat: no-repeat;
	left: 50%;
	margin-left: -50%;
	bottom: 10%;	
	z-index: 14;
}

.page2, .page3, .page4, .page5, .page6,
.page7, .page8, .page9, .page10, .page11, .page12
{
border-top: 1px solid black;	
}

.page2 h1, .page3 h1, .page4 h1, .page5 h1, .page6 h1,
.page7 h1, .page8 h1, .page9 h1, .page10 h1, .page11 h1, .page12 h1
{
margin-left:10px; margin-bottom: 0; line-height: 59pt;	
}

.page2 h2, .page3 h2, .page4 h2, .page5 h2, .page6 h2,
.page7 h2, .page8 h2, .page9 h2, .page10 h2, .page11 h2, .page12 h2
{
margin-left:14px;	
}

.size {width:100%;}

}



@media only screen and (min-width : 0px) and (max-width : 599px) /* Set Max-Width so that it doesnt count everything above minwidth */
{


#navcontain{display:none;}

h1{font-size:300%;}


/* PAGE 1 */

.page1 {

background-image: url("../img/bg.jpg");
background-repeat:no-repeat;
background-position: -200px;
width: 100%;
height: 100%;
background-size: cover; 
overflow:hidden; /* FIXED TOP GAP PROBLEM */
}

		#title {
	
		position: absolute;
	width:290px;
	height: 356px;
	background-position:bottom right;
	background-size:contain;
	background-repeat:no-repeat;
	left: 54%;
	margin-left: -157.5px;
	bottom: 10%;
	z-index: 14;	
}






/*PAGE 2*/


.page2 .col1{text-align:left;}

.page2 .text1 {
	
		height: 100%;
		font-size: 90%;
		margin-bottom: 0;
	float: left;
		position: relative;
		overflow-y:visible;
}






.page2 .contentcontainer{
width:95%;
height: 100%;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}





}