nav{
	font-family: 'Abel', Tahoma, Helvetica, Sans-Serif;
	z-index: 999;
	background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%);
	height: 5vh;
	padding: 0;
}

a{
	color: #337ab7;
}

.navbar{
	padding: 0;
	flex-wrap: nowrap !important;
}

.nav-item{
	height: 5vh;
	display: flex;
	width:100%;
}

@media (min-width: 992px) {
	.nav-item{
		border-left-width: 1px;
		border-left-color: #666;
		border-left-style: solid;
	}
}

@media (max-width: 992px) {
	.nav-item{
		border-top-width: 1px;
		border-top-color: #666;
		border-top-style: solid;
	}
}

.navbar-dark .navbar-nav .nav-link{
	height: 5vh;
	color: #9d9d9d;
	vertical-align: middle;
	padding: 1vw 1vh !important;
	line-height: 20px;
	display: flex;
    align-items: center;
	width:100%;
}

.nav-item:hover,
.nav-item:focus,
.nav-item:active{
	background: rgba(255, 255, 255, 0.05);
}

.nav-link:hover,
.nav-link:focus,
.nav-link:active
.navbar-dark .navbar-nav .show > .nav-link{
	color: #F90 !important;
}

.dropdown-menu {
	min-width: 0 !important;
}

.dropdown-item {
	padding: 0.5rem 0.25rem !important;
}

.navbar-nav .dropdown-menu {
	position: absolute !important;
	width: 10vw;
}

@media (max-width: 992px) {
	.navbar-nav .dropdown-menu {
		width: 15.5vw !important;
	}
}

.navbar-brand {
	display: flex-inline !important;
	padding: 0 !important;
	margin: 0 !important;
}

.navbar-brand, #logo, #gravatar, #gravatar img, .navbar-toggler {
	height:100%;
}

#gravatar img {
	width:100%;
}

@media (max-width: 992px) {
	.navbar-toggler {
		margin-left:auto;
	}
	
	#navbarSupportedContent {
		position: absolute;
		background-image: linear-gradient(rgb(60, 60, 60) 0px, rgb(34, 34, 34) 100%);
		top: 5vh;
		left: 81%;
		width: 15.5vw;
	}
}

.navbar-toggler-icon {
	display: inline-flex !important;
    width: 3vw !important;
    height: 4vh !important;
}

.dropdown-menu{
	background-color: #222;
}

.dropdown-item{
	color: #999;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active{
	background-color: #444;
	color: #F90;
}

body{
	font: 14px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
	background-image: url(../resources/stressed_linen_@2X.png);
}

#main{
	display:flex;
	height:calc(100vh - 8vh) !important;
}

.vElem{
	display: inline-block;
	vertical-align: top;
}

#levelLabel{
	padding-right: 3px;
}

#faq-btn{
	text-align: center;
	width: 50px;
	border: #CCC solid 1px;
	border-radius: 10px;
	color: #F90;
}

#faq-btn:hover{
	color: #00CC00;
}

#bottomBar{
	height: 3vh;
	display: flex;
	justify-content: space-around;
	align-items: center;
	color: white;
	background-image: linear-gradient(#333, #111);
}

#bottomLabels {
	display:flex;
	width:auto;
}

@media (max-width: 992px) {
	#bottomLabels {
		font: 12px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
	}
	
	#bottomMsg {
		font-size: 20px;
	}
}

#bottomBar-left {
	width: auto !important;
}

#bottomBar-left a {
	height: 100% !important;
    display: inline-flex !important;
	flex-direction: column;
}

#bottomMsg{
	width: 80%;
	display: flex;
    justify-content: center;
    padding-right: 5%;
	overflow: hidden;
	text-align: center;
}

.flex-column{
	display: flex;
	flex-direction: column;
}

.flex-column-centered{
	display: flex;
	align-items: center;
	flex-direction: column;
}

.flex-row{
	display: flex;
	justify-content: center;
	align-items: center;
}

#stat-list > .stat-elem:nth-child(even) {
	background-color: rgba(255, 255, 255, 0.05);
}

#stat-list > .stat-elem:nth-child(odd) {
	background-color: rgba(255, 255, 255, 0.1);
}

.red{
	background-color: rgba(224, 48, 48, 0.1);
}

.blue{
	background-color: rgba(32, 112, 256, 0.1);
}

.user{
	color: #FFF;
	text-shadow: 0px 0px 1px #FFF;
}

.sub{
	color: #EEFF00;
}

.user.sub{
	color: #EEFF00;
	text-shadow: 0px 0px 1px #EEFF00;
}

.btn-inverse {
  height: 50px;
  color: #9d9d9d;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #363636;
  *background-color: #222222;
  background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%);
  background-image:      -o-linear-gradient(top, #3c3c3c 0%, #222 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222));
  background-image:         linear-gradient(to bottom, #3c3c3c 0%, #222 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-repeat: repeat-x;
  border: 0;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
}

.dropdown-toggle:hover{
	background: rgba(255, 255, 255, 0.05) !important;
}

.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
  color: #F90;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
             box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  outline: none !important;
}

.inverse-dropdown{
  background-color: #222;
  border-color: #080808;
}

.inverse-dropdown > li > a {
    color: #999;
}

.inverse-dropdown > li > a:hover,
.inverse-dropdown > li > a:focus,
.inverse-dropdown > li > a:active {
	color: #F90;
	background: rgba(255, 255, 255, 0.1);
}

.sc-blue{
	color: #2277FF;
}
.sc-red{
	color: #DD3333;
}
.sc-green{
	color: #00CC00;
}
.sc-orange{
	color: #F90;
}