html, body {height: 100%;}
html {background: url("/assets/img/background.png");}
body {overflow-x: hidden; background-color: transparent; max-width: 1200px; margin: 0 auto; min-width: 300px;}
div, ul, li, a {box-sizing: border-box;}
img {max-width: 100%;}

/* Various */
.large-margin-top {margin-top: 75px;}
.light-background {background: #edf0f8}
.table>tbody>tr>td {vertical-align: middle;}
nav ul {padding-left: 0;}

/* Fonts and Text Colors */
.title {font-family:"Courier New" serif; color: #1f1f1f;}
h1,
h2,
h3,
h4,
h5,
h6 {font-family:"Arial Black", Gadget, sans-serif; color: #1f1f1f;}
div,
p,
em,
strong,
#subtitle,
a,
a:visited,
a:link {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
a,
a:visited,
a:link,
a h4 {font-weight: bold; color: #f00;}
a:hover,
a h4:hover {color: #f00;}
a.btn {font-weight: normal;}
a.btn-danger,
a.btn-primary {color: #fff;}

/* Font Styles */

p {line-height: 1.4em; margin-bottom: 1em}
.subheader {font-size: 1.6em; margin: 1em 0;}
.error-message {font-size: 1.2em; font-weight: 700; color: red;}
.submit-button-container {text-align: right;}

/* Helpers */
.center {margin: 0 auto;}
.text-center {text-align: center;}
.left {float: left;}
.text-left {text-align: left;}
.right {float: right;}
.text-right {text-align: right;}
.indented {text-indent: 32px;}
.clearfix:after {display: table; content: ''; clear: both;}
.hidden {display: none;}
.no-overflow { overflow: hidden;}
.full-width {width: 100%;}
.mobile-only {display: none !important;}
.desktop-only {display: initial !important;;}
.inline-block {display: inline-block;}

/* Override Bootstrap */
.breadcrumb {background-color: transparent;}

/* All Content */
#container {border: solid 2px black; border-radius: 15px; margin: 2%; max-width: 1200px; background-color: rgba(255, 255, 255, 1); box-shadow: 10px 10px 5px rgba(0, 0, 0, .5);}

/* Header */
#main-navbar {z-index: 12; }
#main-navbar > a {display: block; border: solid black 1px; color: #000;}
#main-navbar > a:not(:nth-child(2)) {border-top: none; }
#main-navbar > span {font-weight: bold;}
#main-navbar a:hover {text-decoration: none; }
#main-navbar table td:first-child { height: 60px; width: 50px; text-align: center; }
#main-navbar table td:last-child { padding-left: 15px; border-left: solid black 1px; }
#main-navbar span i { text-align: center; vertical-align: middle; }
#main-navbar a:nth-child(2) table td:first-child {background: #000000; color: #fff;}
#main-navbar a:nth-child(3) table td:first-child {background: #fff;}
#main-navbar a:nth-child(4) table td:first-child {background: #f00;}
#main-navbar a:nth-child(5) table td:first-child {background: #f70;} {font-size: 2em;}
#main-navbar a:nth-child(6) table td:first-child {background: #ff0;}
#main-navbar a:nth-child(7) table td:first-child {background: #008c00; color: #fff;}
#main-navbar a:nth-child(8) table td:first-child {background: #0000bd; color: #fff;}
#main-navbar a:nth-child(9) table td:first-child {background: #63009c; color: #fff;}

#header {z-index: 10;}
#header a i {float: left; padding: 18px 9px;}
#header a.flag-link {display: inline-block; text-align: center; margin-top: 14px;}
#header a.flag-link:hover {text-decoration: none;}
#header > div > a.flag-link {float: right; margin-right: 15px;}

#header #vex-dex-headers a.flag-link {color: #f00;}

.title {float: left;}
.logo {background: url(/assets/img/logo.png); width: 208px; height: 64px;}

#vex-dex-headers {display: inline-block; margin: 0 25px;}
#header a.flag-link {}

/* Main content */
#content-container {position: relative;}
#content {padding: 15px; border: solid 1px #7f7f7f; min-height: 504px;}
.page-header {display: table; width: 100%;}
.page-header img,
.page-header h1 {display: table-cell; vertical-align: middle;}
.page-header img {margin: 0 auto; }

/* Footer */
#right-footer-mobile {display: none;}
#right-footer-desktop {display: initial; position: absolute; top: 0; bottom: 0;}
#right-footer-mobile,
#right-footer-desktop {text-align: center;}
#right-footer-desktop img {position: absolute; top: 50%; margin-top: -252px; left: 50%; margin-left: -25px;}

#bottom-footer {margin-top: 15px; margin-bottom: 15px;}
#bottom-footer .footer-div {font-weight: bold; font-style: italic;}
#bottom-footer .footer-div .footer-type { color: #f70;}
#bottom-footer .footer-div .footer-state { color: #008c00;}
#bottom-footer .company {font-size: 2.4em; text-align: right;}

/* Vex pages */
#vex-table {}
#vex-table td {padding: 15px 0;}
#vex-table td:nth-child(2) {padding-left: 15px;}

.vex-content {display: table; margin-bottom: 15px;}
.vex-content > div {display: table-cell; vertical-align: middle;}
.vex-content > div:first-child {width: 200px; text-align: center}
.vex-content > div:last-child {padding: 5px;}


/* Sheets pages */
.sheet-search {}
.sheet-search .sheet-type-select {display: none;}

/* Media queries */
@media screen and (min-width: 768px) {
	#header #vex-dex-headers {display: initial !important;}
	#header #vex-dex-headers a.flag-link {filter: grayscale(1); -webkit-filter: grayscale(1);}
	#header #vex-dex-headers a.flag-link:hover {filter: grayscale(0); -webkit-filter: grayscale(0);}

	#main-navbar { left: initial !important;}

	/*.animate-flip { animation-name: flip; animation-duration: .25s;}*/
}

@keyframes flip {
	0% {transform: rotateY(0deg);}
	50% {transform: rotateY(90deg);}
	100% {transform: rotateY(0deg);}
}

@media screen and (max-width: 767px) {
	.mobile-only {display: initial !important;;}
	.desktop-only {display: none !important;}

	#container {border: none; border-radius: 0; margin: 0; box-shadow: none;}
	#content {border: none; margin-top: 71px;}
	#bottom-footer {border-top: solid 1px #1f1f1f;}
	#header {position: fixed; left: 0; right: 0; background: #fff; border-bottom: solid 1px #1f1f1f; box-shadow: 0px 4px 2px rgba(0, 0, 0, .5);}

	#content-cover {display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, .5); z-index: 11;}
	#main-navbar {position: fixed; top: 0; bottom: 0; width: 240px; left: -240px; padding: 0; background: #efefef;}

	#vex-dex-headers {display: none; position: fixed; right: 0; top: 71px; background: white; z-index: 11; margin: 0; padding: 0 14px; border: solid 1px #1f1f1f;}

	.vex-content,
	.vex-content > div {display: block; width: 100%;}
	.vex-content > div:first-child {display: none;}

	.page-header img,
	.page-header h1 {display: block; text-align: center;}

	#bottom-footer {margin-top: 25px; border-top: solix 1px #efefef;}
	#bottom-footer .company {text-align: center; margin: 25px 0; font-size: 2em;}
	#bottom-footer .footer-div {text-align: center;}

	#right-footer-desktop {display: none;}
	#right-footer-mobile {display: initial;}
	#right-footer-mobile .date {font-size: 1.6em;}
	
}

@media screen and (max-width: 640px) {
	.logo {background: url(/assets/img/logo_small.png); width: 71px;}
}

@media screen and (min-width: 481px) {
}

@media screen and (max-width: 480px) {
}
