/*html {
background-color: #000000;
background-image: url('../img/bg1.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center bottom;
background-size: cover; /*PLACED IN HTML FIXES ANDROID/IOS GAP PROBLEM? Fixes in firefox, not chrome*/
/* 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: normal;
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;
}
a.war3:hover
{
background-image:url("../img/tantrans-bg.png");
color:black;
}
a {
text-decoration: none;
color: #FFF;
margin: 0px;
}
a:hover {
text-decoration: underline;
color: #FFF;
margin: 0px;
}
H1 {
margin-top: 0px;
margin-bottom: 10px;
color:white;
font-size: 150%;
font-family: 'Cardo', serif;
font-weight: 700;
text-transform:uppercase;
line-height:23pt;
}
.page6 h1, .page7 h1, .page8 h1{background-color:black;}
H2 {
color:#FF9900;
margin:2px 0px 3px 0px;
font-family: 'Cardo', serif;
font-weight: 700;
text-transform:uppercase;
}
H3{
background-image:url("../img/blacktrans-bg.png");
color: #FFF;
margin: 0 0 7px 0;
padding-left: 4px;
padding-right: 4px;
padding-top:2px;
padding-bottom: 2px;
font-size: 14pt;
font-family: 'Cardo', serif;
font-weight: 700;
text-transform:uppercase;
}
p {
margin: 0px;
padding: 0px 0px 10px 15px;
}
.lowres-visibility {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;
background-image: url("../img/sidebar.jpg");
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, .pageyt
{
background-attachment: scroll;
position: relative;
padding-top:15px;
}
ul.playback li {
list-style: none;
margin-left: 0;
padding-left: 1em;
text-indent: -1em;
}
ul.playback li:before { content: "►"; padding-right: 5px; color:#e0c000;}
.pageyt {
background-image: url("../img/DSC_0400_Web.jpg");
background-color:black;
background-size: cover;
background-position: top;
background-repeat: no-repeat;
min-height:100%;
height:auto;
}
.pageyt .text1 {
color: white;
width: 100%;
height: auto;
font-size: 100%;
line-height: 19.5pt;
float: left;
}
.pageyt .text2 {
color: white;
width: 100%;
height: auto;
font-size: 100%;
line-height: 19.5pt;
position:relative;
margin-left:0;
float: left;
}
/* PAGE 1 */
.page1 {
width: 100%;
max-width: 100%;
height: 100%;
position: relative;
background-size: cover;
background-image: url("../img/top.jpg");
background-repeat:no-repeat;
background-size: cover;
background-position:top;
overflow:hidden; /* FIXED TOP GAP PROBLEM */
}
#title {
position: absolute;
width:800px;
height: 356px;
background-image: url(../img/starsiegecomp.png);
left: 50%;
margin-left: -400px;
bottom: 3%;
z-index: 14;
}
#title1{vertical-align:middle; float:none;
}
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
.page1 .container{width:100%; height:100%; vertical-align:center;}
.page1 .contentcontainer{
height: 100%;
width: 100%;
position: absolute;
}
/*PAGE 2 NOT INDEX PAGE. INDEX=6*/
.page2 {
overflow:hidden;
background-image: url("../img/bg1.jpg");
background-color: black;
background-repeat:no-repeat;
background-size:cover;
background-position:top;
}
.page2 .text1 {
color: white;
width: 100%;
height: 500px;
font-size: 100%;
line-height: 18pt;
margin-top: 30px;
margin-left: 0;
float: left;
position: relative;
}
.page2 .text2 {
color: white;
width: 300px;
height: 100%;
font-size: 100%;
line-height: 19pt;
margin-left:25px; margin-right:25px;
margin-top: 30px;
float: left;
position: relative;
}
.page2 .text3 {
color: white;
width: 300px;
height: 100%;
font-size: 100%;
line-height: 19pt;
float: left;
position: relative;
margin-top: 30px;
}
.page2 .contentcontainer{
height: 95%;
width: 950px;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
padding:0;
}
/* PAGE 3 */
.page3 {
background-image: url("../img/ruined-mars.jpg");
background-size: cover;
background-position: top;
background-repeat: no-repeat;
min-height:100%;
height:auto;
}
.page3 .text1 {
color: white;
width: 100%;
height: auto;
font-size: 100%;
line-height: 19.5pt;
float: left;
}
.page3 .text2 {
color: white;
width: 100%;
height: auto;
font-size: 100%;
line-height: 19.5pt;
position:relative;
margin-left:0;
float: left;
}
.page3 .contentcontainer{
min-width:900px;
min-height: 700px;
width: 70%;
margin-top: 5%;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
/* PAGE 4 */
.page4 {
height:auto;
min-height:100%;
background-repeat:no-repeat;
background-image: url('../img/bg1.jpg');
background-size:cover;
background-color:black;
background-position:top;
}
.page4 .link-center
{
margin-left:auto;
margin-right:auto;
position:relative;
width:80%;
}
.page4 .text1 {
color: white;
max-width: 450px;
font-size: 100%;
line-height: 19.5pt;
margin-left:auto; margin-right:auto;
float: left;
position:relative;
}
.page4 p {margin:0; padding:0 0 0 10px;}
.page4 .text2 {
color: white;
max-width: 450px;
font-size: 100%;
line-height: 19pt;
margin-left:auto; margin-right:auto;
float: right;
position: relative;
}
.page4 .inset-text1 {
color: white;
max-width: 450px;
font-size: 12pt;
line-height: 19pt;
margin-left:auto; margin-right:auto;
background-image: url("../img/blacktrans-bg.png");
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%;
min-width: 483px;
min-height: 311px;
font-size: 120%;
line-height: 19pt;
border: 1px black solid;
position:absolute;
bottom: 5%;
background-image: url("../img/mars-architecture.png");
background-position:center ;
background-size: cover;
background-repeat: no-repeat;
}
.page4 #imperial-logo {
background-image: url("../img/imperial-logo.png");
background-size: contain;
min-width: 109px;
min-height: 88px;
width: 10%;
float: left;
margin-right: 10px;
position: relative;
}
.page4 .contentcontainer{
min-width:950px;
min-height: 100%;
height:100%; /*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 */
/*PAGE 5*/
.page5 {
background-image: url("../img/bg2.jpg");
background-size: cover;
background-position: top;
background-repeat: no-repeat;
height:auto;
min-height:100%;
padding-bottom:100px;
}
.page5 .text1 {
color: black;
font-size: 120%;
line-height: 18pt;
margin-top: 0px;
margin-left: 0;
float: left;
position: relative;
}
.page5 .text2 {
color: black;
font-size: 120%;
line-height: 19pt;
margin-top: 0px;
margin-left: 0;
float:left;
position: relative;display: inline-block;
}
.page5 .text3 {
color: black;
font-size: 120%;
line-height: 19pt;
float: left;display: inline-block;
position: relative;
margin-right:0;
margin-left: 0;
margin-top: 0px;
}
.page5 h1 {color:black; text-align:center;}
.page5 h2 {color:black;}
.page5 .contentcontainer{
width:950px;
min-height: 100%;
height:100%; /*NECCESSARY FOR CONTENTS TO EXPAND VERTICALLY */
margin-top: 2%;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
/* PAGE 6 NAVIGATION BEGINS HERE*/
.page6 {
height:auto;
background-repeat:no-repeat;
background-image: url('../img/bg1.jpg');
background-size:cover;
background-color:black;
background-position:top;
}
.page6 h3{max-width:300px;}
.page6 .text1 {
color: white;
width: 100%;
font-size: 100%;
line-height: 18pt;
margin-top: 0px;
margin-left: 0;
margin-right:0;
padding-right:3px;
float: left;
position: relative;
margin-bottom:20px;
}
.page6 .text2 {
color: white;
width: 100%;
font-size: 100%;
line-height: 19pt;
margin-top: 0px;
float:left;
position: relative;display: inline-block;
padding-right:3px;
margin-bottom:20px;
}
.page6 .text3 {
color: white;
width: 100%;
font-size: 100%;
line-height: 19pt;
float: left;
position: relative;
margin-right:0;
margin-top: 0px;
padding-right:3px;
margin-bottom:20px;
}
.page6 .text1 p {max-width:300px;}
.page6 .text2 p {max-width:300px;}
.page6 .text3 p {max-width:300px;}
.page6 .center-3col
{
width:100%;
clear:both;
position:relative;
background-color:black;
margin-bottom:300px;
}
.page6 p {margin:0; padding:0 0 0 10px;}
.page6 .inset-text1 {
color: white;
max-width: 450px;
font-size: 12pt;
line-height: 19pt;
margin-left:auto; margin-right:auto;
background-image: url("../img/blacktrans-bg.png");
margin-bottom: 5px;
border: 2px solid;
border-color: #000;
}
.page6 .inset-text1 h2 {
padding:0 0 0 5px;
margin-top: 0px;
margin-bottom: 0px;
background-color:#000000;
}
.page6 .inset-text1 p {
padding-left : 10px;
}
.page6 .contentcontainer{
width:950px;
min-height: 100%;
height:100%; /*NECCESSARY FOR CONTENTS TO EXPAND VERTICALLY */
margin-top: 2%;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
/* PAGE 7 */
.page7 {
overflow:hidden;
height:100%;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
.page7 h3{width:290px;}
.page7 .text1 {
color: white;
width: 33%;
font-size: 100%;
line-height: 18pt;
margin-top: 0px;
margin-left: 0;
float: left;
position: relative;
padding-right:3px;
margin-bottom:20px;
}
.page7 .text2 {
color: white;
width: 33%;
font-size: 100%;
line-height: 19pt;
margin-top: 0px;
float:left;
position: relative;display: inline-block;
padding-right:3px;
margin-bottom:20px;
}
.page7 .text3 {
color: white;
width: 33%;
font-size: 100%;
line-height: 19pt;
float: left;
position: relative;
margin-right:0;
margin-top: 0px;
padding-right:3px;
margin-bottom:20px;
}
.page7 .text1 p {width:90%;}
.page7 .text2 p {width:90%;}
.page7 .text3 p {width:90%;}
.page7 .center-3col
{
width:100%;
clear:both;
position:relative;
margin-bottom:300px;
}
.page7 p {margin:0; padding:0 0 0 10px;}
.page7 .inset-text1 {
color: white;
max-width: 450px;
font-size: 12pt;
line-height: 19pt;
margin-left:auto; margin-right:auto;
background-image: url("../img/blacktrans-bg.png");
margin-bottom: 5px;
border: 2px solid;
border-color: #000;
}
.page7 .inset-text1 h2 {
padding:0 0 0 5px;
margin-top: 0px;
margin-bottom: 0px;
background-color:#000000;
}
.page7 .inset-text1 p {
padding-left : 10px;
}
.page7 .contentcontainer{
width:950px;
min-height: 100%;
height:100%; /*NECCESSARY FOR CONTENTS TO EXPAND VERTICALLY */
margin-top: 2%;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
/* PAGE 8 */
.page8 {
overflow:hidden;
height:60%;
background-repeat:no-repeat;
background-size:cover;
background-position:bottom;
}
.page8 h3{width:290px;}
.page8 .text1 {
color: white;
width: 33%;
font-size: 100%;
line-height: 18pt;
margin-top: 0px;
margin-left: 0;
float: left;
position: relative;
padding-right:3px;
margin-bottom:20px;
}
.page8 .text2 {
color: white;
width: 33%;
font-size: 100%;
line-height: 19pt;
margin-top: 0px;
float:left;
position: relative;display: inline-block;
padding-right:3px;
margin-bottom:20px;
}
.page8 .text3 {
color: white;
width: 33%;
font-size: 100%;
line-height: 19pt;
float: left;
position: relative;
margin-right:0;
margin-top: 0px;
padding-right:3px;
margin-bottom:20px;
}
.page8 .text1 p {width:90%;}
.page8 .text2 p {width:90%;}
.page8 .text3 p {width:90%;}
.page8 .center-3col
{
width:100%;
clear:both;
position:relative;
margin-bottom:100px;
}
.page8 p {margin:0; padding:0 0 0 10px;}
.page8 .inset-text1 {
color: white;
max-width: 450px;
font-size: 12pt;
line-height: 19pt;
margin-left:auto; margin-right:auto;
background-image: url("../img/blacktrans-bg.png");
margin-bottom: 5px;
border: 2px solid;
border-color: #000;
}
.page8 .inset-text1 h2 {
padding:0 0 0 5px;
margin-top: 0px;
margin-bottom: 0px;
background-color:#000000;
}
.page8 .inset-text1 p {
padding-left : 10px;
}
.page8 .contentcontainer{
width:950px;
min-height: 100%;
height:100%; /*NECCESSARY FOR CONTENTS TO EXPAND VERTICALLY */
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;
}
/* NAV LINKS UNUSED*/
#nav-fire {
width:100%;
background-size:contain;
background-image: url("../img/nav/fire.png");
background-position:bottom;
min-height:100px;
background-repeat:no-repeat;
}
#nav-fire:hover{background-position: top;}
#fire:hover{background-image: url("../img/nav/empire.png");}
/*RESPONSIVE CSS ONLY USED FOR FRONTPAGES AND THEIR TITLES
Until exact positioning can be figured out in Bootstrap*/
@media only screen and (min-width : 600px) and (max-width : 999px) /* Set Max-Width so that it doesnt count everything above minwidth */
{
.lowres-visibility {display: hidden;}
.page1 {
background-image: url("../img/top-mobile.jpg");}
#title {
position: absolute;
width:590px;
height: 356px;
background-image: url(../img/starsiegecomp.png);
background-size:contain;
background-repeat:no-repeat;
left: 50%;
margin-left: -297.5px;
bottom: 3%;
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 */
{
.hiddentext {display: none;}
.lowres-visibility {display: hidden;}
h3 {font-size:9pt;}
.page1 {
background-image: url("../img/top-mobile.jpg");}
#title {
position: absolute;
width:100%;
height: 356px;
background-image: url(../img/starsiegecomp.png);
background-size:contain;
background-repeat: no-repeat;
background-position:bottom;
left:0;
margin-left:0;
bottom: 5%;
z-index: 14;
}
}