.introSection{
	height: calc(100vh - 194.8px);
	/*border-bottom: 3px solid #FFF;*/
	color: #d9d9d9;
}


/* scrollbar width */
::-webkit-scrollbar {
  width: 10px;
}

/* scrollbar Track */
::-webkit-scrollbar-track {
  background: #141414; 
}
 
/* scrollbar Handle */
::-webkit-scrollbar-thumb {
  background: #006594; 
}

/* scrollbar Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #33C1FE; 
}


a {
	color: #33C1FE;
	font: bold 15px/13px Helvetica, Verdana, Tahoma;
	text-decoration: none;
}

a:visited {
	color: #33C1FE;
	font: bold 15px/13px Helvetica, Verdana, Tahoma;
	text-decoration: none;
}

hr {
	color: #33C1FE;
	border-color: #33C1FE;
	background-color: #33C1FE;
}

.topbar{
	position: fixed;
	z-index: 999;
    top: 0px;
    left: 0px;
    height: 138px;
    width: 100%;
    text-align: center;
	border-bottom: 1px solid #33C1FE;
	box-shadow: 0px 0px 12px 1px #33C1FE;
	-webkit-box-shadow: 0px 0px 12px 1px #33C1FE;
    -moz-box-shadow: 0px 0px 12px 1px #33C1FE;
    background-color: #FFF;
	color: #33C1FE;
	font: bold 35px Helvetica, Verdana, Tahoma;
}

.topbar a{
	font: bold 35px Helvetica, Verdana, Tahoma;
}

.menubutton{
	position: absolute;
	top: 10px;
	left: 10px;
	display: inline-block;
	cursor: pointer;
}


.bar1, .bar2, .bar3 {
	width: 32px;
	height: 5px;
	background-color: #33C1FE;
	margin: 6px 0;
	transition: 0.4s;
}

.change .bar1 {
	-webkit-transform: rotate(-45deg) translate(-9px, 6px);
	transform: rotate(-45deg) translate(-9px, 7px);
}

.change .bar2 {
	opacity: 0;
}

.change .bar3 {
	-webkit-transform: rotate(45deg) translate(-8px, -7px);
	transform: rotate(45deg) translate(-8px, -7px);
}

.navmenu{
	position: relative;
	overflow: hidden;
	left: 10px;
	top: 60px;
	width: 300px;
	z-index: 999;
	background: #000;
	border: 1px solid #33C1FE;
	font: bold 15px/13px Helvetica, Verdana, Tahoma;
	display: none;
}

.navmenu a{
	font: bold 15px/13px Helvetica, Verdana, Tahoma;
}

.navmenu a .navline{
	width: calc(100% - 20px);
	padding: 10px;
	margin: 0px;
	float: left;
}

.navmenu a .navline:hover{
	width: calc(100% - 20px);
	padding: 10px;
	color: #fff;
	background-color: #33C1FE;
	margin: 0px;
	float: left;
}

.change .navmenu{
	display:block;
}

.titlecontainer{
	position: absolute;
	left: 42px;
	top: 2px;
	width: calc(100% - 84px);
	text-shadow: 0 0 40px #c9c9c9, 0 0 40px #c9c9c9, 0 0 40px #c9c9c9;
	/*text-shadow: 0.3px 0 0 #c9c9c9, 0 -0.3px 0 #c9c9c9, 0 0.3px 0 #c9c9c9, -0.3px 0 0 #c9c9c9;*/
}

.headertable{
	position: absolute;
	top: 59px;
	left: 0px;
	width: 100%;
	border-collapse: separate;
}

.headertable td{
	padding: 5px 0px;
}

.payoutstable{
	position: absolute;
	left: 0px;
	width: 100%;
	border-collapse: separate;
}

.payoutstable td{
	text-align:center;
}

.tableSpan{
	color: #33C1FE;
	font: bold 15px/13px Helvetica, Verdana, Tahoma;
}

.bigScreen{
	position: absolute;
	overflow-y: auto;
	top: 141px;
	left: 0px;
	width: 100%;
	height: calc(100% - 170px);
	margin-bottom: 28px;
	font-family: Helvetica, Verdana, Tahoma;
}

.subhead {
	width: 100%;
	color: #33C1FE;
	font: bold 13px Helvetica, Verdana, Tahoma;
}

.footer {
    bottom: 0px;
    padding-bottom: 5px;
    width: 100%;
    position: fixed;
    text-align: center;
    font-size: 11px;
	color: #33C1FE;
    font: bold 11px Helvetica, Verdana, Tahoma;
}

.dashboardcolumn {
	float:left;
	margin:2px;
	width:calc(33% - 4px);
}

.statscolumn {
	float:left;
	margin:2px;
	width:calc(50% - 4px);
}

.dashboardpane {
	position:relative;
	display:inline-block;
	border-radius:6px;
	border:2px solid #33C1FE;
	width: calc(100% - 54px);
	height: calc((100% - 250px)/2); /*height - margins & padding - height of the other elements, eventually*/
	margin: 15px;
	padding: 10px;
	background: no-repeat center;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
}

.dashboardpanemiddle {
	position:relative;
	display:inline-block;
	border-radius:6px;
	border:2px solid #33C1FE;
	width: calc(100% - 54px);
	height: calc(100% - 195px); /*height - margins & padding - height of the other elements, eventually*/
	margin: 15px;
	padding: 10px;
	background: no-repeat center;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
}

.linetile{
	position:relative;
	display:inline-block;
	border-top:2px solid #33C1FE;
	width: calc(100% - 20px);
	height: 35px;
	margin: 15px 0px;
	padding: 10px;
	color: #33C1FE;
}

.linetiledefeat{
	position:relative;
	display:inline-block;
	border-top:2px solid #b81911;
	width: calc(100% - 20px);
	height: 35px;
	margin: 15px 0px;
	padding: 10px;
	color: #b81911;
}

.linetilenoheight{
	position:relative;
	display:inline-block;
	border-radius:6px;
	border:2px solid #33C1FE;
	width: calc(100% - 54px);
	margin: 15px;
	padding: 10px;
	color: #33C1FE;
}

.linetilenext{
	position:relative;
	display:inline-block;
	border-radius:6px;
	border:2px solid #107d1f;
	width: calc(100% - 54px);
	height: 35px;
	margin: 15px;
	padding: 10px;
	color: #107d1f;
	text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
	text-align: center;
}

.linetile .dashboardheader{
	position:absolute;
	margin-top:-22px;
	margin-left:10px;
	color:white;
	background:#33C1FE;
	border-radius:10px;
	padding:4px 10px;
}

.linetiledefeat .dashboardheader{
	position:absolute;
	margin-top:-22px;
	margin-left:10px;
	color:white;
	background:#b81911;
	border-radius:10px;
	padding:4px 10px;
}

.linetilenext .dashboardheader{
	position:absolute;
	margin-top:-35px;
	margin-left:10px;
	color:white;
	background:#107d1f;
	border-radius:10px;
	padding:4px 10px;
	font: bold 15px/13px Helvetica, Verdana, Tahoma;
}

.textlinegeneral{
	position:relative;
	display:inline-block;
	border: 0px;
	width: calc(100% - 14px);
	margin: 7px;
	color: #33C1FE;
}

.textline{
	position:relative;
	display:inline-block;
	border: 0px;
	width: calc(100% - 54px);
	height: 20px;
	margin: 7px;
	padding: 10px;
	color: #33C1FE;
}

.infopane{
	position: relative;
	display: block;
	float: left;
	border:0px;
	width: 37.5%;
	height: 30%; 
	margin: 15px 15px 20px 15px;
	padding: 3px 10px 10px 10px;
	font: bold 15px/13px Helvetica, Verdana, Tahoma;
	color: #33C1FE;
}

.largeinfotile{
	position: relative;
	display: block;
	float: left;
	border-radius:6px;
	border:2px solid #33C1FE;
	width: 30%;
	height: 30%; 
	margin: 15px;
	padding: 10px;
	background: no-repeat center;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
}

.commanderbutton{
	position: relative;
	display: block;
	float: left;
	border-radius:6px;
	border:2px solid #33C1FE;
	width: 17.5%;
	height: 30%; 
	margin: 15px;
	padding: 10px;
	color: #33C1FE;
	background: no-repeat center;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	font-weight: bold;
	text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
}

.largeinfotilemedal{
	position: relative;
	display: block;
	float: left;
	border-radius:6px;
	border:2px solid #33C1FE;
	width: 25%;
	height: 30%; 
	margin: 15px;
	padding: 10px;
	background: no-repeat center;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
}

.mediumtile{
	position: relative;
	display: block;
	float: left;
	border-radius:6px;
	border:2px solid #33C1FE;
	width: calc(25% - 54px);
	height: calc(35% - 54px); 
	margin: 15px;
	padding: 10px;
	background: no-repeat center;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
}

.mediumtile .dashboardheader{
	position:absolute;
	margin-top:-22px;
	margin-left:10px;
	color:white;
	background:#33C1FE;
	border-radius:10px;
	padding:4px 10px;
}

.smalltile{
	position: relative;
	display: block;
	float: left;
	border-radius:6px;
	border:2px solid #33C1FE;
	width: calc(10% - 54px);
	height: calc(20% - 54px); 
	margin: 15px;
	padding: 10px;
	background: no-repeat center;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
}

.xsmalltile{
	position: relative;
	display: block;
	float: left;
	border-radius:6px;
	border:2px solid #33C1FE;
	width: calc(6% - 54px);
	height: calc(14% - 54px); 
	margin: 15px;
	padding: 10px;
	background: no-repeat center;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
}

.faucetdiv{
	width: 225px;
	margin:auto;
	padding: 15px;
	border:2px solid #33C1FE;
	font: bold 15px Helvetica, Verdana, Tahoma;
	text-align:center;
}

a .faucetdiv:hover{
	border:2px solid #33C1FE;
	background-color: #33C1FE;
	color: #FFF;
	text-align:center;
}

.inputforminput, .inputformsubmit{
	width: 80%;
	margin: 10 calc(10% - 2px);
	padding: 10px;
	border: 2px solid #33C1FE;
}

.inputforminput {
	height: 40%;
	font: 13px Helvetica, Verdana, Tahoma;
}

.inputformsubmit{
	font: bold 15px Helvetica, Verdana, Tahoma;
	color: #33C1FE;
}

.inputformsubmit: hover{
	font: bold 15px Helvetica, Verdana, Tahoma;
	background-color: #33C1FE;
	color: #FFF;
}

.pwnotify{
	position:absolute;
	top: 20px;
	left: 10px;
	height: 35px;
	width: 180px;
	border-radius: 3px;
	padding-top: 6px;
	text-align: center;
}

a .pwnotify{
	color: #33C1FE;
	text-decoration: none;
	font-weight: normal;
}

.pwfail{
	border: 2px solid red;
	background-color: pink;
}

.pwsuccess{
	border: 2px solid #80c95b;
	background-color: #bde8a7;
}

.dashboardpane .dashboardheader, .dashboardpanemiddle .dashboardheader {
	position:absolute;
	margin-top:-22px;
	margin-left:10px;
	color:white;
	background:#33C1FE;
	border-radius:10px;
	padding:4px 10px;
}

.dashboardpane .dashboardpanenew, .dashboardpanemiddle .dashboardpanenew, .linetile .dashboardpanenew, .mediumtile .dashboardpanenew, .smalltile .dashboardpanenew{
	position:absolute;
	width: 14px;
	height: 14px;
	margin-top:-20px;
	right: -10px;
	color:white;
	background:red;
	border-radius:17px; /* one half of ( (border * 2) + height + padding ) */
	padding: 10px;
	font: bold 15px/13px Helvetica, Verdana, Tahoma;
    text-align: center;
}

.fleetShipItem{
	position: relative;
	display: block;
	float: left;
	border-radius:3px;
	border:1.5px solid #33C1FE;
	width: 12%;
	height: 21%; 
	margin: 3px;
	padding: 0px;
	background: no-repeat center;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
}

.fleetShipItemNoBorder{
	position: relative;
	display: block;
	float: left;
	border-radius:3px;
	width: 12%;
	height: 21%; 
	margin: 3px;
	padding: 0px;
	background: no-repeat center;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
}

.fixtile{
	position:absolute;
	width: 32px;
	height: 32px;
	margin-top:10px;
	right: 10px;
	color:white;
	background:gray;
	border-radius:1px; 
	padding: 4px 8px 8px 8px;
	font: bold 10px Helvetica, Verdana, Tahoma;
    text-align: center;
}

.fixtileactive{
	position:absolute;
	width: 32px;
	height: 32px;
	margin-top:10px;
	right: 10px;
	color: white;
	background:#9ac787;
	border-radius:1px; 
	padding: 4px 8px 8px 8px;
	font: bold 10px Helvetica, Verdana, Tahoma;
    text-align: center;
}

.activateshiptile{
	position:absolute;
	width: 32px;
	height: 32px;
	margin-top:10px;
	right: 52px;
	color: white;
	background:#6bb84b;
	border-radius:1px; 
	padding: 4px 8px 8px 8px;
	font: bold 10px Helvetica, Verdana, Tahoma;
    text-align: center;
}

.deactivateshiptile{
	position:absolute;
	width: 32px;
	height: 32px;
	margin-top:10px;
	right: 52px;
	color: white;
	background:#99a195;
	border-radius:1px; 
	padding: 4px 8px 8px 8px;
	font: bold 10px Helvetica, Verdana, Tahoma;
    text-align: center;
}

.sellshiptile{
	position:absolute;
	width: 32px;
	height: 32px;
	margin-top:10px;
	right: 104px;
	color: white;
	background:#e0bd31;
	border-radius:1px; 
	padding: 4px 8px 8px 8px;
	font: bold 10px Helvetica, Verdana, Tahoma;
    text-align: center;
}

.renameshiptile{
	position:absolute;
	width: 32px;
	height: 32px;
	margin-top:10px;
	right: 104px;
	color: white;
	background:#99a195;
	border-radius:1px; 
	padding: 4px 8px 8px 8px;
	font: bold 10px Helvetica, Verdana, Tahoma;
    text-align: center;
}

.profile{
	position: absolute;
	top: 10px;
	right: 10px;
	font: bold 10px Helvetica, Verdana, Tahoma;
}

.profile a{
	font: bold 10px Helvetica, Verdana, Tahoma;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #000;
}

/* Style the buttons inside the tab */
.tab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	font-size: 17px;
	color: #33C1FE;
	font: bold 10px Helvetica, Verdana, Tahoma;
}

.tab .linkdiv{
	background-color: inherit;
	float: right;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	font-size: 17px;
	color: #33C1FE;
	font: bold 10px Helvetica, Verdana, Tahoma;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  overflow: hidden;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.inventoryitemtile{
	position: relative;
	display: block;
	float: left;
	border: 0px;
	width: 58px;
	height: calc(100% - 4px);
	margin: 0px;
	padding: 5px 0px 0px;
	background: no-repeat center;
	background-size: contain;
}

.inventorylinetiledef{
	position: relative;
	display: inline-block;
	border: 0px;
	padding: 0px;
	margin: 0px;
	height: 65px;
	width: calc(100% - 15px);
	border-bottom: 1px solid #ccc;
}

.inventorylinetile{
	position: relative;
	display: none;
	border: 0px;
	padding: 0px;
	margin: 0px;
	height: 65px;
	width: calc(100% - 15px);
	border-bottom: 1px solid #ccc;
}

.inventorylinetileshow{
	display: inline-block;
}

.inventoryinfospacer{
	float: left;
	height: calc(100% - 4px);
	width: 110px;
	margin: 0px 20px;
	line-height: 61px;
	text-align: center;
	color: #e62719;
	font-weight: bold;
	font-size: 16px;
}

.inventoryinfospacerassigned{
	float: left;
	height: calc(100% - 4px);
	width: 110px;
	margin: 0px 20px;
	line-height: 61px;
	text-align: center;
	color: #84bf4d;
	font-weight: bold;
	font-size: 16px;
}

.inventorytextline{
	position: relative;
    display: inline-block;
    border: 0px;
    width: calc(100% - 280px);
    height: 20px;
    margin: 3px;
    padding: 3px;
    color: #33C1FE;
}

.shipInfoSubLine{
	padding: 3px;
	width: calc(100% - 12px);
	color: #33C1FE;
}

.shipInfoSubLineInteriorLeft{
	float: left;
	padding: 3px;
	width: 175px;
}

.shipInfoSubLineInteriorRight{
	float: left;
	padding: 3px;
	width: calc(100% - 175px - 12px);
}

.faucetSubLine{
	padding: 3px;
	width: calc(100% - 6px);
	text-align: center;
}

.faucetSubLineInterior{
	float: left;
	padding: 3px 10px;
	width: calc((100% - 120px)/6);
}

.filterbtn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  width: auto;
  display: inline-block;
}

.filterbtn:hover {
  background-color: #ddd;
}

.filterbtn.active {
  background-color: #666;
  color: white;
}

.fleetbuttongreen{
	float: left;
	width: 250px;
	padding: 15px;
	margin: 4px;
	border-radius: 3px;
	border: 2px solid #107d1f;
	color: #107d1f;
}

.fleetbuttongreen:hover{
	float: left;
	width: 250px;
	padding: 15px;
	margin: 4px;
	border-radius: 3px;
	border: 2px solid #107d1f;
	background-color: #107d1f;
	color: #FFF;
}

.fleetbuttonred{
	float: left;
	width: 250px;
	padding: 15px;
	margin: 4px;
	border-radius: 3px;
	border: 2px solid #b81911;
	color: #b81911;
}

.fleetbuttonred:hover{
	float: left;
	width: 250px;
	padding: 15px;
	margin: 4px;
	border-radius: 3px;
	border: 2px solid #b81911;
	background-color: #b81911;
	color: #FFF;
}

.genericLineBlock{
	width: 100%;
	margin: 0px;
	padding: 0px;
	border: 0px;
	position: relative;
	display: inline-block;
	float: left;
}

.orderExisting{
	width: calc(100% - 56px);
	height: 30px;
	margin: 15px;
	padding: 10px;
	border: 3px solid #33C1FE;
	color: #fff;
	font-weight: bold;
	position: relative;
	display: inline-block;
	float: left;
}

.orderExisting:after{
	content: '';
	position: absolute;
	top: -15px;
	bottom: -15px;
	left: -15px;
	right: -15px;
	background: #59c5f7;
	z-index: -1;
}

.orderNew{
	width: calc(100% - 56px);
	height: 30px;
	margin: 15px;
	padding: 10px;
	border: 3px solid #33C1FE;
	color: #fff;
	font-weight: bold;
	position: relative;
	display: inline-block;
	float: left;
}

.orderNew:after{
	content: '';
	position: absolute;
	top: -15px;
	bottom: -15px;
	left: -15px;
	right: -15px;
	background: #000;
	z-index: -1;
}

.orderNew:hover{
	background: #33C1FE;
}

.logoMain{
	height: calc(100% - 16px);
	padding: 8px;
}