html {
    width: 100%;
    height: 100%
}


/*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;
font-weight: 300;
}

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;
}
a.sb-nav-next:hover
{background-position: -35px 0;}

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



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




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

.inset-text1 {
		font-size: 10pt;
		line-height: 19pt;
			background-image: url("../img/orngtrans-bg.png");
		height:auto;
		}
		
	
.page2 .inset-text1, .page3 .inset-text1, .page4 .inset-text1,
.page5 .inset-text1, .page6 .inset-text1, .page7 .inset-text1,
.page8 .inset-text1, .page9 .inset-text1, .page10 .inset-text1,
.page11 .inset-text1, .page12 .inset-text1, .page13 .inset-text1,
.page14 .inset-text1, .page15 .inset-text1, .page16 .inset-text1
{font-size:10pt;}	
	
	
		
H1 {
	
	margin-top: 0px;
	color:#FF9900;
			text-shadow: 2px 2px #000;
	font-size: 200%;
	margin-bottom: 10px;
			font-family: 'Cardo', serif;
	font-weight: 700;
}

H2 {
	color:#FF9900;	
	font-family: 'Cardo', serif;
	font-size:120%;
}

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



.quote {
	
	font-size: 150%;
		font-family: 'Cardo', serif;
	font-weight: 700;
	color: #FF9900; 
	position: relative;
	float: left;
		text-shadow: 2px 2px #000;
text-align: center;

display: block;
	}


p {
	margin-top: 0px;
	
}

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


.page1, .page2, .page3, .page4, .page5,
.page6, .page7, .page8, .page9, .page10,
.page11, .page12, .page13, .page14, .page15,
.page16, .page17, .page18, .page19, .page20,
.page21, .page22

{
background-attachment: scroll;
border-bottom: 1px solid black;
position: relative;
}


.container{padding-top:2%; margin-bottom:25px;}

/* PAGE 1 */

.page1 {

background-image: url("../img/bg.png");
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/therebels.png);
	left: 50%;
	margin-left: -379px;
	margin-top: 15%;	
	z-index: 14;
}






/*PAGE 2*/
.page2 {
	
	background-image: url("../img/bg1.jpg");
	 
background-size: cover; 
	background-position: top;
	background-repeat: no-repeat;
	height:auto;
	min-height:100%;
		
}

.page2 .text1 {
	
		color: white;
		width: 100%;
		height: auto;
		font-size: 100%;
		line-height: 19pt;
	margin-left:auto; margin-right:auto; 
	float: left;
		position: relative;
}


.page2 .text2 {
	
		color: white;
		width: 100%;
		height:auto;
		font-size: 100%;
		line-height: 19pt;
	margin-left:auto; margin-right:auto; 
	float: right;
	position: relative;
	

}




.page2 #top-intro-box {
	

	/*width: 900px; */
	width: 75%;
	
	/*font-size: 14pt; */
	font-size: 95%;
	font-weight: 550;
	background-image: url(../img/fire/samsonbg.png);
	background-size: cover;
	background-repeat:no-repeat;
	background-position: center;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 1px;
	padding-top: 1px;
	margin-top: 23px;
margin-left:auto; margin-right:auto; 
margin-bottom: 1.5%;

-moz-border-radius: 15px;
border-radius: 15px;
border: 2px solid;
border-color: #990000;
}


.page2 .inset-text1 {
	
		color: white;
		max-width: 426px;
	margin-left:auto; margin-right:auto; 

margin-top: 50px;
border: 2px solid;
border-color: #000;
position: relative;
display:box;
right: 0;

}




.page2 .inset-text1 h2 {
	
	padding: 5px;
	margin-top: 0px;
	margin-bottom:0px;
	background-color:#000000;
}

.page2 .inset-text1 p {
			margin: 0 4px 0 0;
			padding: 0 0 0 5px;
			text-align: left;
}

.page2 .image1
{
width: 100%;
height: 250px;
background-image: url("../img/ruinedplanet.png");
background-size:cover;
background-repeat: no-repeat;
background-position: 40px top center;
position: relative;
border: 1px black solid;


}

.page2 .quote {
	
	width: 100%;
	line-height: 28pt;
	position: relative;


}

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

}


/* PAGE 3 */

.page3 {
	
	background-image: url("../img/ruined-mars.jpg");
background-size: cover; 
	background-position: top;
	background-repeat: no-repeat;
	height:auto;
	min-height:100%;

		
}


.page3 .text1 {
	
		color: white;
		width: 100%;
		height: auto
		font-size: 100%;
		line-height: 19.5pt;
	margin-left:auto; margin-right:auto; 
	float: right;
}


.page3 .inset-text1 {
	
		color: white;
		max-width: 450px;
margin-top: 50px;
	margin-left:auto; margin-right:auto; 
border: 2px solid;
border-color: #000;

}

.page3 .inset-text1 h2 {
	
	padding: 5px;
	margin-top: 0px;
	margin-bottom: 0px;
	background-color:#000000;
}

.page3 .inset-text1 p {
	
			padding: 0 5px 0 10px;
			margin: 0 0 0 0;
}




.page3 .contentcontainer{
	
min-width:900px;
height:95%; /*NECCESSARY FOR CONTENTS TO EXPAND VERTICALLY */
width: 70%;	
	margin-top: 2%;

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}



/* PAGE 4 */

.page4 {
	
	background-image: url("../img/bg1.jpg");
background-size: cover; 
	background-position: top;
	background-repeat: no-repeat;
	height:auto;
	min-height:100%;

		
}


.page4 .text1 {
	
		color: white;
		width: 100%;
		height: auto;
		font-size: 100%;
		line-height: 19.5pt;
	margin-left:auto; margin-right:auto; 
	float: left;
	position:relative;
}

.page4 .text2 {
	
		color: white;
		width: 100%;
		height: auto;
		font-size: 100%;
		line-height: 19pt;
	margin-left:auto; margin-right:auto; 
	float: right;
	position: relative;
	

}


.page4 .inset-text1 {
	
		color: white;
		max-width: 450px;
	margin-left:auto; margin-right:auto; 
	margin-bottom: 5px;

border: 2px solid;
border-color: #000;

}

.page4 .inset-text1 h2 {
	
	padding:0 0 0 5px;
	margin-top: 0px;
	margin-bottom: 0px;
	background-color:#000000;
}

.page4 .inset-text1 p {
	
			padding-left : 10px;
}


.page4 .image1 {
	
		color: white;
		width: 100%;
		height: 211px;
		font-size: 120%;
		line-height: 19pt;
border: 1px black solid;
	position:relative;

	
	background-image: url("../img/mars-architecture.png");
background-position:center ;
background-size: cover;
background-repeat: no-repeat;
	

}

.page4 .quote {margin-top:25px; width:100%;}


.page4 .contentcontainer{
	
min-width:900px;
height:95%; /*NECCESSARY FOR CONTENTS TO EXPAND VERTICALLY */
width: 70%;	
	margin-top: 2%;

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}

/* PAGE 5 */


.page5 {
	
	background-image: url("../img/bg2.jpg");
background-size: cover; 
	background-position: top;
	background-repeat: no-repeat;
	height:auto;
	min-height:100%;

		
}


.page5 .text1 {
	
		color: white;
		width: 100%;
		height:auto;
		font-size: 100%;
		line-height: 19pt;
		letter-spacing: ;
	margin-left:auto; margin-right:auto; 

	float: right;
	position: relative;

}


.page5 #scarab {
	
background-image: url("../img/scarab.png");
background-size: cover;
background-position: center;

width: 100%;
height: 620px;	
position: relative;
	
}

.page5 .inset-text1 {
	
		color: white;
		width: 100%;
		height: auto;
display: block;
clear: both;
position: relative;
border: 2px solid;
border-color: #000;

}

.page5 .inset-text1 h2 {
	
	padding: 5px;
	margin-top: 0px;
	margin-bottom: 0px;
	display: block;
	background-color:#000000;
}

.page5 .inset-text1 p {
	
			margin: 0px;
			padding-left : 10px;
}




.page5 .quote {
	
margin-top: 6%;
float: right:
display: block;
width: 100%;
position: absolute;
	margin-left:auto; margin-right:auto; 
	bottom: 5%;
	
}

.page5 .contentcontainer{
	
min-width:900px;
height:95%; /*NECCESSARY FOR CONTENTS TO EXPAND VERTICALLY */
width: 70%;	
	margin-top: 2%;

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}






/* PAGE 6 */

.page6 {
	
	background-image: url("../img/europa.jpg");
background-size: cover; 
	background-position: top;
	background-repeat: no-repeat;
	height:auto;
	min-height:100%;

		
}


.page6 .text1 {
	
		color: white;
		width: 100%;
		height: auto;
		font-size: 100%;
		line-height: 19.5pt;
		padding: 0px;
position:relative;
	float: left;
	margin: 0;

}

.page6 .text1 .textbg {
	
		background-image: url("../img/blacktrans-bg.png");
		padding: 10px;
	
}




.page6 .inset-text1 {
	
		color: white;
		max-width:450px;
width:100%;
	float: right;
border: 2px solid;
border-color: #000;
position: relative;
z-index:2;
overflow:hidden;
}


.page6 .inset-text1 h2 {
	
	padding: 6px;
	margin-top: 0px;
	background-color:#000000;
	margin:0px;
}

.page6 .inset-text1 p {
	
			padding: 0px 6px 5px 10px;
			margin-top: 0px;
			margin-bottom: 0;

}


.page6 #lone-colonist {
	
background-image: url("../img/lone-colonist.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 1px black solid;

width: 100%;
height: 690px;
position: relative;
z-index: 50;
}

.page6 #lone-colonist h3 {
	
position: absolute;
bottom: 0;
width: 100%;
padding:0;
text-align: right;
}





.page6 .contentcontainer{
	
min-width:900px;
height:95%; /*NECCESSARY FOR CONTENTS TO EXPAND VERTICALLY */
width: 70%;	
	margin-top: 2%;

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}


/* PAGE 7 */

.page7 {
	
	background-image: url("../img/bg2.jpg");
	background-size: cover; 
	background-position: top;
	background-repeat: no-repeat;
	height:auto;
	min-height:100%;

		
}


.page7 .text1 {
	
		color: white;
		width: 100%;
		height: auto;
		font-size: 100%;
		line-height: 17.5pt;
	margin-left:auto; margin-right:auto; 
	float: left;
	

}

.page7 .image1 { 	
	
background-image: url("../img/imppolice.png");
background-position:top left ;
background-size: cover;
background-repeat: no-repeat;
border: 1px black solid;
width: 100%;
height:580px;
}

.page7 .image1 h3{
	
text-align: right;
}



.page7 .inset-text1 {
	
		color: white;

		width: 100%;
margin-bottom: 1%;
float:left;
border: 2px solid;
border-color: #000;
z-index: 4;

}

.page7 .inset-text1 h2 {
	
	padding: 5px;
	margin:0;
	background-color:#000000;
}

.page7 .inset-text1 p {
			padding-left : 10px;
			padding-right: 10px;
}



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

/* PAGE 8 */

.page8 {
	
	background-image: url("../img/venus.jpg");
	background-size: cover; 
	background-position: center;
	background-repeat: no-repeat;
	height:auto;
	min-height:100%;

		
}


.page8 .text1 {
	
		color: white;
		width: 100%;
		font-size: 100%;
		line-height: 19.5pt;
	float: right;
	background-image: url("../img/blacktrans-bg.png");
	padding: 10px;
	
}


.page8 .image1 {
	
	background-image: url("../img/police-hq.png");
	background-repeat: no-repeat;
	background-size: cover;
	height: 395px;
	width: 100%;
	position: relative;
	border: 1px black solid;

}

.page8 .image1 h3 {
position: absolute;
bottom: 0;
width: 100%;
padding: 0;	
}

.page8 .quote {
	
margin-top: 6%;
float: right:
display: block;
width: 100%;

	
}

.page8 .contentcontainer{
	
min-width:900px;
height:95%; /*NECCESSARY FOR CONTENTS TO EXPAND VERTICALLY */
width: 70%;	
	margin-top: 2%;

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}

/* PAGE 9 */

.page9 {
	
	background-image: url("../img/bg2.jpg");
	background-size: cover; 
	background-position: top;
	background-repeat: no-repeat;
	height:auto;
	min-height:100%;

		
}


.page9 .text1 {
	
		color: white;
		width: 100%;
		height: auto;
		font-size: 100%;
		line-height: 19.5pt;
	margin-left:auto; margin-right:auto; 
	float: left;
}



.page9 .image1 {
	

	width: 100%;
	height: 600px;
		background-image: url("../img/harabec-pilot.png");
background-size: cover;
background-position: top;
background-repeat: no-repeat;
margin-top: 0%;
border: 1px black solid;
}





.page9 .contentcontainer{
	
min-width:900px;
height:95%; /*NECCESSARY FOR CONTENTS TO EXPAND VERTICALLY */
width: 70%;	
	margin-top: 2%;

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}


.page9 .quote {
	
	width: 100%;
	line-height: 28pt;
	margin-top: 50px;
}


.page9 .inset-text1 {
	
		color: white;
		max-width: 426px;
position:relative;
margin-top: 20px;
float:right;
border: 2px solid;
border-color: #000;

}

.page9 .inset-text1 h2 {
	
	padding: 5px;
	margin-top: 0px;
	background-color:#000000;
}

.page9 .inset-text1 p {
	
			padding-left : 10px;
}





/* PAGE 10 */

.page10 {
	
	background-image: url("../img/bg1.jpg");
	background-size: cover; 
	background-position: top;
	background-repeat: no-repeat;
	height:auto;
	min-height:100%;

		
}


.page10 .text1 {
	
		color: white;
		width: 100%;
		height:auto;
		font-size: 100%;
		line-height: 19.5pt;
	float: left;
	

}

.page10 .text2 {
	
		color: white;
		width: 100%;
		height:auto;
		font-size: 100%;
		line-height: 19.5pt;
	float: right;
	

}




.page10 .image1 { 	
	
background-image: url("../img/aliencache.png");
background-size: cover;
background-position: 0 73%;
background-repeat: no-repeat;
border:1px black solid;
width: 100%;
height:300px;
margin-top:25px;

}




.page10 .inset-text1 {
	
		color: white;
		max-width: 100%;
position:relative;
text-align: center;
order: 2px solid;
border-color: #000;

}

.page10 .contentcontainer{
	
min-width:900px;
height:95%; /*NECCESSARY FOR CONTENTS TO EXPAND VERTICALLY */
width: 70%;	
	margin-top: 2%;

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}

/* PAGE 11 */

.page11 {
	
	background-image: url("../img/bg2.jpg");
	background-size: cover; 
	background-position: center left;
	background-repeat: no-repeat;
	height:auto;
	min-height:100%;

		
}


.page11 .text1 {
	
		color: white;
		width: 100%;
		height:auto;
		font-size: 100%;
		line-height: 19.5pt;
	float: right;
	

}

.page11 .image1 { 	
	
background-image: url("../img/yokeoffensive.png");
background-position: top left;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 220px;
margin-top: 0px;
border: 1px black solid;
z-index: 2;


}

.page11 .image2{ 	
	
background-image: url("../img/dreadlock.png");
background-position:bottom;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 255.5px;
margin-top: 40px;
border: 1px black solid;
z-index: 2;


}


.page11 .quote {
	
	width: 100%;
bottom: 15%;
	line-height: 28pt;
	position: absolute;
	margin-left: auto;
	margin-right: auto;

}

.page11 .inset-text1 {
	
		color: white;
		max-width: 450px;
	float: right;
border: 2px solid;
border-color: #000;

}

.page11 .inset-text1 h2 {
	
	padding: 5px;
	margin-top: 0px;
	background-color:#000000;
}

.page11 .inset-text1 p {
	
			padding-left : 10px;
}



.page11 .contentcontainer{
	
min-width:900px;
height:95%; /*NECCESSARY FOR CONTENTS TO EXPAND VERTICALLY */
width: 70%;	
	margin-top: 2%;

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}

/* PAGE 12 */

.page12 {
	
	background-image: url("../img/bg1.jpg");
	background-size: cover; 
	background-position: center;
	background-repeat: no-repeat;
	height:auto;
	min-height:100%;

		
}


.page12 .text1 {
	
		color: white;
		width: 100%;
		height:auto;
background-image: url("../img/blacktrans-bg.png");
padding: 10px;
		font-size: 100%;
		line-height: 19.5pt;
	float: left;
	

}






.page12 .inset-text1 {
	
		color: white;
		width: 100%;
		height:auto;
margin-left:0;
border: 2px solid;
border-color: #000;
z-index: 3;

}


.page12 .inset-text1 h2 {
	
	padding: 6px;
	margin-top: 0px;
	background-color:#000000;
	margin:0px;
}

.page12 .inset-text1 p {
	
			padding-left : 10px;

}


.page12 .insetleft {
	margin: 0;
bottom: -50px;
right:-50px;
			display: box;

position:absolute;
z-index:1;
			width:40%;
}

.page12 .quote {
	
	width: 100%;
	line-height: 28pt;
	margin-top: 40px;

}



.page12 .image1 { 	
	
background-image: url("../img/rebelhercs.jpg");
background-size: cover;
background-position: 0 73%;
background-repeat: no-repeat;
border:1px black solid;
width: 100%;
height:400px;


}




.page12 .contentcontainer{
	
min-width:900px;
height:95%; /*NECCESSARY FOR CONTENTS TO EXPAND VERTICALLY */
width: 70%;	
	margin-top: 2%;

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}






/* PAGE 13 */

.page13 {
	
	background-image: url("../img/bg-marsfleet.png");
	background-size: cover; 
	background-position: center;
	background-repeat: no-repeat;
	height:auto;
	min-height:100%;

		
}


.page13 .text1 {
	
		color: white;
		width: 100%;
		height:auto;
		font-size: 100%;
		line-height: 19.5pt;
	float: right;
	

}

.page13 .inset-text1 {
	
		color: white;
		max-width: 426px;
position:relative;
margin-top: 20px;
float:left;
border: 2px solid;
border-color: #000;

}

.page13 .inset-text1 h2 {
	
	padding: 5px;
	margin:0;
	background-color:#000000;
}

.page13 .inset-text1 p {
			padding-left : 10px;
			padding-right: 10px;
}


.page13 .quote {
	
	width: 100%;
	line-height: 28pt;

}

.page13 .contentcontainer{
	
min-width:900px;
height:95%; /*NECCESSARY FOR CONTENTS TO EXPAND VERTICALLY */
width: 70%;	
	margin-top: 2%;

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}


/* PAGE 14 */

.page14 {
	
	background-image: url("../img/harabeccg.jpg");
	background-size: cover; 
	background-position: center;
	background-repeat: no-repeat;
	height:auto;
	min-height:100%;

		
}


.page14 .text1 {
	
		color: white;
		width: 100%;
	background-image: url("../img/blacktrans-bg.png");
		font-size: 100%;
		line-height: 19.5pt;
	padding: 3px 5px 5px 10px;
	position: relative;
	

}





.page14 .image2 {
	
background-image: url("../img/caanon-surrender.png");
min-width: 225.5px;
min-height: 339px;
background-size: cover;
background-position: center;
background-repeat: none;
position: relative;
clear: both;
width: 100%;


border: 1px black solid;
	
}

.page14 .image2 h3 {
	
bottom: 0;
position: absolute;
width: 100%;
margin:0;
padding:0;
text-align: right;
	
}

.page14 .contentcontainer{
	
min-width:900px;
height:95%; /*NECCESSARY FOR CONTENTS TO EXPAND VERTICALLY */
width: 70%;	
	margin-top: 2%;

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




/* 1080p NICEITIES */


@media only screen and (min-height:920px) {
	
.page2 .image1{height:400px; background-position: left;}
.page5 #scarab {height:900px;}	
.page6 #lone-colonist {height:900px;}
.page7 .image1 {height:700px;}
.page8 .image1 {height:600px;}
.page9 .image1 {height:900px;}
.page10 .image1 {height:500px;}
.page11 .image1 {height:400px;}
.page11 .image2 {height:400px;}
.page12 .image1 {height:600px;}
}



/* SMALLER RESOULTION STYLES */



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

		.page1 {background-position:-200px;}

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



}




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

.page1 {
background-position:top left;
height:100%;
	background-size: cover;
overflow:hidden; /* FIXED TOP GAP PROBLEM */
}

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


.page2 #top-intro-box {
	width: 100%;
	min-width:0;
}

.page6 #lone-colonist{height:500px;}
.page7 .image1{height:400px;}

}


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

h3{font-size:90%;}

.page6 #lone-colonist{background-position:-150px;}	
.page7 .inset-text1 {display:none;}
.page11 .image1{background-position: -220px;}
.page11 .image2 {background-position: -180px;}
.page12 .image1 {height:200px;}
}