* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: white ;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Set Star Trek Fonts and Other Fonts */
@font-face {
    font-family: GEP;
    src: url(../fonts/EdgeOfTheGalaxyPoster.ttf);
}

@font-face {
    font-family: AGR;
    src: url(../fonts/AGENCYR.TTF);
}

@font-face {
    font-family: AGB;
    src: url(../fonts/AGENCYB.TTF);
}

@font-face {
    font-family: STD;
    src: url(../fonts/Trekbats.ttf);
}

@font-face {
    font-family: KDF;
    src: url(../fonts/Klingon.ttf);
}

@font-face {
    font-family: LMR;
    src: url(../fonts/LemonMilkRegular-X3XE2.otf);
}
@font-face {
    font-family: WEBD;
    src: url(../fonts/webdings.ttf);
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  margin: 0px 0px;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

div.cn {
    position: relative;
    width: 100%;
    height: 150px;
}

div.inner {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    /*background-color: green;*/
    padding: 2rem;
    width: 1200px;
}

.logo_holder {
	width: 1200px;
	text-align: center;
}

#top_header {
text-align: center;
}

#icon {
	font-family: STD;
	font-size: 36pt;
	color: white;
	vertical-align: middle;
	text-align: center;
}

#page_title {
	vertical-align: middle;
	font-family: GEP;
	font-size: 36pt;
	letter-spacing: 4px;
	font-weight: normal;
	color: white;
	text-shadow: 2px 2px #000000;
}

#tagline {
  font-family: AGR;
  font-size: 16pt;
  text-align: center;
  font-weight: normal;
  color: white;
  text-shadow: 2px 2px #000000;
  padding: 0px 0px;
  vertical-align: middle;
  margin: 0px 0px;
}
h1 {
  font-family: GEP;
  font-size: 36pt;
  letter-spacing: 4px;
  font-weight: normal;
  color: white;
  text-shadow: 2px 2px #000000;
  padding: 0px 0px;
}
h2 {
	color: white;
	text-shadow: 2px 2px #000000;
	padding: 0px 0px;
	letter-spacing: 2px;
}
/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
  font-family: AGB;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover, a:active {
  background-color: #ddd;
  color: black;
}

.divSearchBox {
	float: right;
	vertical-align: middle;
	padding-top: 14px;
	padding-right: 16px;
}

.divFleetSelect {
	left: 40%;
	right: 60%;
	width: 350px;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	padding-top: 14px;
	padding-right: 16px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 15px;
  font-family: AGR;
}

.row {
	
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
  background-image: url(../images/555.jpg);
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}

div.blueTable {
  border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  opacity: 0.9;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
.divTable.blueTable .divTableCell, .divTable.blueTable .divTableHead {
  border: 1px solid #AAAAAA;
  padding: 3px 3px;
}
.divTable.blueTable .divTableBody .divTableCell {
  font-family: Verdana;
  font-size: 11px;
}
.divTable.blueTable .divTableRow:nth-child(even) {
  background: #D0E4F5;
}
.divTable.blueTable .divTableHeading {
  background: #1C6EA4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;
}
.divTable.blueTable .divTableHeading .divTableHead {
  font-family: Verdana;
  font-size: 12px;
  font-weight: normal;
  color: #FFFFFF;
  border-left: 2px solid #D0E4F5;
  text-decoration: none;
}

.divTableHead a:link {
	text-decoration: none;
	font-family: Verdana;
  font-size: 12px;
  font-weight: normal;
  color: #FFFFFF;
}

.divTableHead a:visited {
	text-decoration: none;
	font-family: Verdana;
	font-size: 12px;
	font-weight: normal;
	color: #FFFFFF;
}

.divTable.blueTable .divTableHeading .divTableHead:first-child {
  border-left: none;
}

.blueTable .tableFootStyle {
  font-size: 14px;
}
.blueTable .tableFootStyle .links {
	 text-align: right;
}
.blueTable .tableFootStyle .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}
.blueTable.outerTableFooter {
  border-top: none;
}
.blueTable.outerTableFooter .tableFootStyle {
  padding: 3px 5px; 
}

div.tfd_header {
  text-align: center;
  padding: 15px 0px 15px 0px;
}
.divTable.tfd_header .divTableCell, .divTable.tfd_header .divTableHead {
  padding: 0px 0px;
}

.divTableCell {
	top: 50%;
	left: 50%;
	height: 25px;
	vertical-align: middle;
}
.divTableCell a {
	color: #006496;
	text-decoration: none;
}
.blueTable .tableFootStyle {
  background: #1C6EA4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;
}
.blueTable .tableFootStyle .links {
	 text-align: right;
}
.blueTable .tableFootStyle .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #F5FF7F;
  padding: 2px 8px;
  border-radius: 5px;
}
.blueTable.outerTableFooter {
  border-top: none;
}
.blueTable.outerTableFooter .tableFootStyle {
  padding: 3px 5px; 
}
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}

/* Google Pie Charts Style */
.pie-chart {
	/*width: 100%;
	height: 300px;*/
	margin: 0 auto;
}

.graphs {
	opacity: 0.9 ;
}

.float_graph {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 15px;
}

.cell_right {
	text-align: right;
}

div.boundry {
	position: relative;
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
}

div.tablebox {
	position: relative;

}

/* Create Fleet Information Box*/
div.fleet-info {
    position: relative;
    width: 100%;
    font-family: AGB;
    background-image: url(../images/black-50.png);
    padding-left: 15px;
    padding-right: 15px;
}

div.f_column {
	position: relative;
 	float: left;
 	width: 20%;
 	font-family: AGB;
 	color: white;
 	text-shadow: 2px 2px #000000;
 	padding: 0px 0px;
}

div.footer {
	position: relative;
}

div.sub-footer {
	font-family: AGR;
	position: relative;
	text-align: center;
	color: white;
	font-weight: normal;
	padding-top: 5px;
	padding-bottom: 5px;
}

#copyright {
	/*font: 12px/20px 'Droid Sans', arial, serif;*/
	position: relative;
	width: 450px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
	padding-bottom: 10px;
	padding-top: 10px;
	background-color: black;
	border-radius: 5px;
   border: 1px solid white;
	opacity: .75;
	filter: alpha(opacity=75);
	color: white;
	text-align: center;
}

#copyright a {
	color: lightgreen;
	text-decoration: none;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background: #1C6EA4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-family: AGR;
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

.divProfileLogin {
	font-family: LMR;
	font-size: 18px;
	line-height: normal;
	font-variant: small-caps;
	position: absolute;
	top: 15px;
	right: 15px;
 	padding-top: 3px;
 	padding-bottom: 3px;
 	padding-left: 8px;
 	padding-right: 8px;
 	color: black;
 	border-radius: 5px;
   border: 1px solid black;
 	background-color: white;
 	opacity: .75;
 	filter: alpha(opacity=75);
	text-align: right;
	vertical-align: middle;
}

.divProfileLogin a {
	color: orangered;
	text-decoration: none;
}

.loginText {
	font-size: 14px;
	line-height: normal;
}

.divFleetTime {
	font-family: AGB;
	font-size: 18px;
	line-height: normal;
	font-variant: small-caps;
	position: absolute;
	top: 15px;
	left: 15px;
 	padding-top: 3px;
 	padding-bottom: 3px;
 	padding-left: 8px;
 	padding-right: 8px;
 	color: black;
 	border-radius: 5px;
   border: 1px solid black;
 	background-color: white;
 	opacity: .85;
 	filter: alpha(opacity=75);
	text-align: center;
	vertical-align: middle;
	/* width: 135px;
	height: 40px; */
}