/* globals, noselect */
.navButton, .searchable, #initEntry, #navMainButton, .fancySeparator, .rslides_nav, .topLinkButton {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition: background 0.15s ease, color 0.15s ease, text-shadow 0.15s ease, border-radius 0.15s ease;
}

@font-face {
	font-family: 'pokeFont';
	src: url('/res/pkmndp.ttf') format('truetype');
}

/* clickable - pointer cursor */
.navButton, .searchable, #navMainButton {
	cursor: pointer;
	border-radius: 0.1em;
}

/* fallback for older browsers w/o HTML5 element support, render as block not inline */
article, aside, details,
figcaption, figure,
footer, header, hgroup,
menu, nav, section {
	display: block;
} 

html {
	font-family: "Open Sans", sans-serif;
	width: 100%;
	height: 100%;
	overflow: auto;
	/*Fun fact: This breaks rendering on iOS when used on the html element! -webkit-overflow-scrolling: touch; */
	background: #000;
}

body {
	overflow: auto;
	margin: 0;
	background: #000;
}

p {
	display: block;
	width: 100%;
	min-width: 30em;
}
	
code {
	/* renders code elements at proper font size */
	font-family: monospace, monospace;
}
	
.entry a {
	text-decoration: none;
	color: #1276D4;
}
	
.entry a:visited {
	color: #7C09BF;
}
	
.entry a:hover {
	text-decoration: underline;
}
	
.mainHeader {
	position: absolute;
	left: 0em;
}

.mainContainer {
	position: absolute;
	width: 34em;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
	
.sidebarWrapper {
	position: absolute;
	left: 34em;
	top: 0em;
	display: none;
}
	
.sidebar {
	width: 18em;
	height: 100%;
	position: fixed;
	z-index: 99;
}

.utilWrapper {
	position: absolute;
	bottom: 0;
	width: 100%;
}

.mapWrapper {
	position: relative;
	width: 100%;
}

#feed.compactFeed {
	position: relative;
	background: #F7F7F7 !important;
	width: 100%;
	padding-bottom: 0.2em;
	font-family: "Open Sans", sans-serif;
	margin-top: -0.375em;
	font-family: "Open Sans", sans-serif;
	overflow-wrap: break-word;
}

#feed.compactFeed *:not(.octicon) {
	font-family: "Open Sans", sans-serif !important;
}

#feed.compactFeed .gha-header,
#feed.compactFeed .gha-push,
#feed.compactFeed .gha-push-small,
#feed.compactFeed .gha-footer {
	display: none !important;
}

#feed.compactFeed .gha-feed {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	padding-left: 0.25em;
	padding-right: 0.25em;
	background: #F7F7F7 !important;
	overflow-y: hidden;
}

#feed.compactFeed .gha-activity-icon {
	display: block !important;
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	bottom: 0 !important;
}

#feed.compactFeed .gha-activity {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

#feed.compactFeed .gha-time::after {
	content: ': ';
}

#feed.compactFeed .gha-time {
	display: inline;
	color: #616161;
	font-weight: bold;
	font-size: 1em;
}

#feed.compactFeed .gha-message {
	margin-left: 4em !important;
	width: calc(100% - 4.5em) !important;		
}

#feed.compactFeed .gha-activity-icon .octicon {
	padding: 0;
	margin: 0;
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

#feed.compactFeed .gha-footer {
	text-align: center !important;
}

.updateNotice {
	bottom: 8.3em;
	left: 2.9em;
	width: 8em;
	position: absolute;
	z-index: -5;
	font-family: pokeFont, monospace, monospace;
	color: rgb(252, 252, 252);
	font-size: 1.2em;
	text-shadow: 0px 0.05em 0.2em black;
}
	
.glaceon {
	bottom: 8.5em;
	right: 1.7em;
	width: 5em;
	height: 5em;
	background: url("http://drive.mrawr.net/space/res/Glaceon25_hflip_100px.png") transparent;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 5;
}
	
.shelfContainer {
	bottom: 8.52em;
	width: 18em;
	height: 5em;
	position: absolute;
	z-index: -6;
	perspective: 24em;
	perspective-origin: center bottom;
	overflow: hidden;
}

.shelf {
	height: 8.2em;
	background-color: #FFF;
	transform: rotateX(83deg);
	margin: 0px auto;
	box-shadow: 0px 0px 0.15em 0.15em rgb(255, 255, 255);
	width: 14.6em;
}

.mainTitleContainer {
	position: fixed;
	padding-right: 0px;
	text-align: center;
	color: #FFF;
	cursor: default;
	top: 0px;
	padding-left: 1em;
	z-index: 99;
	width: 33em;
	background: #313C47 none repeat scroll 0% 0%;
	border-bottom-left-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
	height: 4.4em;
}
	
.mainTitle {
	padding: 0em;
	margin: 0.6em 0.4em 0.4em 5.8em;
	z-index: 200;
	position: absolute;
}
	
.mainNavContainer {
	margin: -1em;
	height: 100%;
	position: absolute;
	width: 32em;
	padding: 1em 1em 2em;
	left: 1em;
}

#primaryNav {
	z-index: 99;
	width: 32em;
	position: fixed;
	height: 2em;
	top: -4.25em;
}
	
#primaryNav .navButton {
	position: absolute;
	top: 3.8em;
}
	
#primaryNav .navButton#navMainButton {
	left: 6em;
}

#primaryNav .navButton#contactLink {
	left: 12.4em;
}

#primaryNav .navButton#navAboutButton {
	left: 18.70em;
}
	
#secondaryNav {
	z-index: 3;
	background-color: #313C47;
	width: 34em;
	height: 8em;
	top: 1.75em;
	position: absolute;
	left: 0em;
	border-bottom-left-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
}
	
#secondaryNav .navButton, #pokeNavImg {
	position: absolute;
	top: 3.9em;
}
	
#secondaryNav .navButton#skypeLink {
	left: 6.78em;
}

#secondaryNav .navButton#navProjectsButton {
	left: 13.18em;
}

#secondaryNav .navButton#navMiscButton {
	left: 19.48em;
}

.topLinkButton {
	position: absolute;
	height: 2.5em;
	text-decoration: none;
	color: #87CEFA;
	background-color: #313C47;
	text-align: center;
	border-top-right-radius: 0.5em;
	border-top-left-radius: 0.5em;
	padding: 0.7em 0.3em 0.6em;
	font-size: 1em;
	bottom: 0em;
	width: 31.4005em;
	left: 0em;
}
	
.topLinkButton:hover,
.topLinkButton:active{
	color: #FFAF22;
}
	
#topRightPaw {
	position: relative;
	bottom: 0.4em;
}
	
#bottomLeftPaw {
	position: relative;
	bottom: -0.1em;
}
	
/* 471 logo styles start */

.logo {
	display: inline-block;
	font-family: "Montserrat Alternates", sans-serif;
	font-size: 2em;
	position: absolute;
	top: 2.25em;
	left: 0.25em;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
}

.logo .start {
	color: #1073C5;
	text-shadow: 0 0 0.05em #1073C5;
	font-size: 1.09em;
	vertical-align: top;
}

.logo .end {
	display: inline-block;
	color: #39CDEE;
	text-shadow: 0 0 0.05em #39CDEE;
}

.logo .mid {
	display: inline-block;
	text-shadow: 0 0 0.05em #1073C5;
	color: #1073C5;
}

.logo .end .dash {
    width: 99%;
    position: relative;
    top: -0.19em;
    box-shadow: 0px 0.0em 0.05em 0.01em #EAEAEA;
    height: 0.03em;
    background-color: #EAEAEA;
}

// keyframes for the dash gradient animation
@-webkit-keyframes pulse {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}
@-moz-keyframes pulse {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}
@keyframes pulse {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}

/* 471 logo styles end */
	
.searchBox {
	width: 32em;
	margin-bottom: 0.5em;
	position: absolute;
	top: 7.8em;
}
	
#searchField {
	width: 33.899em;
	height: 1.17em;
	font-size: 0.9em;
	padding: 0.1em;
	padding-left: 1.3em;
	margin: 0;
	border: 0.2em solid #B4B4B4;
}
	
.searchBox #inputIndicator {
	position: absolute;
    left: 0.5em;
    top: 0.25em;
    font-weight: bold;
    color: #B4B4B4;
    font-size: 1em;
	height: 1em;
	line-height: 1em;
}

#searchField:focus + #inputIndicator {
	color: black;
}

#searchField:hover + #inputIndicator {
	color: black;
}

.mainNav {
	margin-top: 0.5em;
	padding: 0;
}
	
.mainContent {
	display: block;
	position: relative;
	min-height: 23em;
	padding: 1em 1em 3.2em;
	overflow-y: visible;
	overflow-x: visible;
	background: no-repeat scroll center center content-box padding-box #FFF;
	top: 7.6em;
	bottom: 0px;
	width: 30em;
	border: 1em solid rgba(49, 60, 71, 0.35);
	left: 0em;
}

.entry {
	position: relative;
	height: auto;
	width: 100%;
	background: white;
	margin-bottom: 1em;
	padding-bottom: 1em;
	border-bottom: solid black 0.1em;
}
	
.entryHeader {
	position: relative;
	height: 6.5em;
	margin-bottom: 1em;
	border-bottom: dashed grey 0.1em;
}

.entryTitle, .entryTime, .entryCategory, .entryICBM, .entryLink {
	display: block;
}

.entryTitle {
	margin: 0;
	font-size: 1.5em;
}
	
.entryTime {
	font-size: 1em;
	position: absolute;
	left: 0.5em;
	top: 1.5em;
}
	
.entryICBM{
	font-size: 1em;
	position: absolute;
	left: 0.5em;
	top: 3.5em;
}
	
.entryCategory {
	position: absolute;
	right: 0.5em;
	background: #D3D3D3;
	padding: 0.3em 0.3em 0.5em;
	top: 0.8em;
	height: 1.3em;
	font-size: 1.5em;
}
	
.youtubeAudio {
	border-bottom-left-radius: 0.5em;
	-moz-border-radius-bottomleft: 0.5em;
	-webkit-border-bottom-left-radius: 0.5em;
	overflow: hidden;
	border: solid #1B1B1B 0.5em;
	width: 29em;
	height: 65px;
	background-color: gray;
}
	
.entryFooter {
	position: relative;
	height: 1em;
}
	
.entryHeader .entryLink {
	position: relative;
	visibility: hidden;
	top: -7.5em;
	height: 0;
}
	
.entryFooter .entryLink {
	display: block;
	position: absolute;
	bottom: -0.5em;
	text-decoration: none;
}

.entryFooter .entryLink .fa-link {
	padding-right: 0.2em;
}

.fullWidthLink {
	display: inline-block;
	width: 100%;
	margin-bottom: 0.2em;
}
	
.userSignature {
	position: absolute;
	right: 1em;
	bottom: -0.5em;
	font-style: italic;
}

.lynxFriendly {
	display: block;
	margin-bottom: 1em;
	margin-top: 1em;
	text-align: center;
}

.lynxFriendly img {
	width: 60%;
}

.navButton {
	display: block;
	text-align: center;
	font-size: 1.3em;
	font-family: "Open Sans", sans-serif;
	padding: 0.19em;
	padding: 0.1em 0.19em 0.3em;
	background: #2E82D1;
	color: white;
	text-decoration: none;
	cursor: pointer;
	height: 1.24em;
	width: 5.00462em;
}

.navButton:hover,
.navButton:active,
.searchable:hover,
.searchable:active {
	background: #FFAF22;
	border-color: #FFAF22;
	box-shadow: 0 0 9px #FFAF22;
	border-radius: 0.2em;
}
	
#pokeClock {
	  position: absolute;
	  left: 0.75em;
	  font-size: 1.3em;
	  height: 1.62em;
	  width: 5.3462em;
	  background: transparent;
	  top: 3.9em;
	  overflow: hidden;
	  color: #F5F5F5;
}
	
.fancySeparator {
	height: 3.015em;
	position: absolute;
	z-index: 1;
	width: 34em;
	left: 0em;
	top: 33.15em;
	vertical-align: middle;
	border: 1em solid rgba(49, 60, 71, 0.35);
	border-left-width: 0;
	border-right-width: 0;
	text-align: center;
	border-radius: 1em;
	background: rgb(49, 60, 71);
}

.fancySeparator a {
	width: 100%;
	display: inline-block;
	top: -0.315em;
	bottom: 0;
	position: relative;
	font-size: 3em;
	padding-bottom: 0.2em;
	color: #3F53DD;
	font-family: "Open Sans", sans-serif;
}

.fancySeparator a:hover {
	color: #EF4D12;
}

.fancySeparator a:visited {
	color: #3F53DD;
}

.fancySeparator a:visited:hover {
	color: #EF4D12;
}

/* styles for the slider plugin */

#initEntry {
	margin-bottom: 3.5em;
}

.sliderContainer {
	width: 30em;
	height: 21.5em;
	z-index: 2;
	padding: 1em;
	top: -0.9em;
	left: -1em;
	position: relative;
	transition: background 1s ease;
	box-shadow: 0 0 0.5em 0em black inset;
}

.imgOverlay {
	position: absolute;
    top: 0;
    margin: 0 auto;
    display: block;
    left: 0;
    right: 0;
	transition: box-shadow 1s ease;
	transform: translate(-1px,-1px);
	-webkit-transform: translate(-1px,-1px);
}

.rslides {
	position: relative;
	list-style: none;
	overflow: hidden;
	padding: 0;
	margin: 0;
}

.rslides li {
	position: absolute;
	display: none;
	width: 100%;
	left: 0;
}

.rslides li:first-child {
	position: relative;
	display: block;
	float: left;
}

.rslides img {
	background-color: transparent;
	display: block;
	max-height: 100%;
	max-width: 100%;
	margin: 0 auto;
	border: 0;
}

.rslides_nav {
	position: absolute;
	display: block;
	z-index: 999;
	height: 1.12em;
	font-size: 4.5em;
	width: 1.1em;
	background-color: rgba(0, 0, 0, 0.58);
	color: #3F53DD;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	bottom: -1.1025em;
	border-radius: 0.215em;
}

.rslides_nav.prev {
    left: -0.225em;
	color: #3F53DD !important;
	text-decoration: none !important;
}

.rslides_nav.next {
	right: -0.225em;
	color: #3F53DD !important;
	text-decoration: none !important;
}

.rslides_nav.prev span {
	position: relative;
	top: -0.4em;
	left: -0.05em;
	font-size: 0.65em;
}

.rslides_nav.next span {
	position: relative;
	top: -0.4em;
	left: 0.05em;
	font-size: 0.65em;
}

.rslides_nav:hover {
	background-color: rgba(0, 0, 0, 0.8);
	color: #EF4D12 !important;
	text-decoration: none !important;
}

.rslides_tabs li {
	position: relative;
	top: 3em;
	float: left;
	margin: 0.5em;
	padding: 1em;
	width: 2em;
	text-decoration: none;
	text-align: center;
	background-color: rgb(193, 221, 221);
	font-size: 1.4em;
	display: block;
}

.rslides_tabs li a {
	color: rgb(11, 11, 11);
	text-decoration: none;
	font-size: 1.4em;
}

.msImg {
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
	width: 29.65em !important;
	border: 0.2em solid gray;
}

.msPlayer {
	position: relative;
	height: 18em;
	border: solid 0.2em gray;
	padding: 0.2em;
	padding-bottom: 0.7em;
	width: 29.25em;
	border-top: none;
	top: -0.31em;
	z-index: 0;
	border-bottom-left-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
	box-shadow: 0em 0em 0.9em 0.1em #B2B2B2;
}

.msPlayer .msWaveform wave {
	cursor: pointer;
}

.msPlayer .msWaveform wave wave {
	transition: width 0.25s ease;
}

.msPlayer * {
	height: auto;
	position: relative;
}

.msPlayer * {
	margin: 0;
}

.msPlayer canvas.visualizer {
	margin-top: 0.2em;
	height: 5em;
	position: absolute;
	top: -5.5em;
	width: 29.2em;
}

.msPlayer audio {
	height: auto;
}

.msPlayer meter {
    height: 1.25em;
    margin-bottom: 0em;
    padding: 0;
    position: absolute;
	left: 0.25em;
	width: 27.3em;
}

.msPlayer .midMeter {
	bottom: 6.08em;
}

.msPlayer .sideMeter {
	bottom: 3.575em;
}

/* Neither FF nor Chrome appreciates setting all these at once, unfortunately. Gotta do them one-by-one. */

.msPlayer meter.masterMeter.left {
	bottom: 1.75em;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.msPlayer meter.masterMeter.right {
	bottom: 1.125em;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.msPlayer meter.masterMeter.left::-webkit-meter-bar{
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.msPlayer meter.masterMeter.left::-webkit-meter-optimum-value {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.msPlayer meter.masterMeter.left::-webkit-meter-suboptimum-value {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.msPlayer meter.masterMeter.left::-webkit-meter-even-less-good-value {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.msPlayer meter.masterMeter.left::-moz-meter-bar {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.msPlayer meter.masterMeter.left:-moz-meter-optimum::-moz-meter-bar {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.msPlayer meter.masterMeter.left:-moz-meter-sub-optimum::-moz-meter-bar {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.msPlayer meter.masterMeter.left:-moz-meter-sub-sub-optimum::-moz-meter-bar {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.msPlayer meter.masterMeter.right::-webkit-meter-bar {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.msPlayer meter.masterMeter.right::-webkit-meter-optimum-value {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.msPlayer meter.masterMeter.right::-webkit-meter-suboptimum-value {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.msPlayer meter.masterMeter.right::-webkit-meter-even-less-good-value {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.msPlayer meter.masterMeter.right::-moz-meter-bar {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.msPlayer meter.masterMeter.right:-moz-meter-optimum::-moz-meter-bar {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.msPlayer meter.masterMeter.right:-moz-meter-sub-optimum::-moz-meter-bar {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.msPlayer meter.masterMeter.right:-moz-meter-sub-sub-optimum::-moz-meter-bar {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.msPlayer meter.masterMeter.left, .msPlayer meter.masterMeter.right {
	height: 0.625em;
}

.msPlayer button.muteButton, .msPlayer button.resetButton {
    height: 2em;
    width: 2em;
    position: absolute;
    font-weight: bold;
    right: 0.25em;
    border-radius: 0.4em;
	border: outset buttonface;
}

.msPlayer button.muteButton.mid {
    bottom: 7.075em;
}

.msPlayer button.muteButton.side {
    bottom: 4.075em;
}

.msPlayer button.resetButton {
    bottom: 1.15em;
}

button.muteButton.muted {
    background: radial-gradient(ellipse at center, rgba(241,231,103,1) 0%, rgba(241,231,103,1) 38%, rgba(254,182,69,1) 100%) !important;
    background-color: rgba(241,231,103,1);
}

button.muteButton:active, button.resetButton:active {
	border-style: inset;
}

.msPlayer input {
	position: absolute;
	font-size: 1em;
}

.msPlayer input.midGainSlider {
	bottom: 7.7em;
}

.msPlayer input.sideGainSlider {
	bottom: 5.225em;
}

.msPlayer input.masterSlider {
    bottom: 2.75em;
}

.msPlayer meter::-webkit-meter-bar {
    background: #EEE;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
    border-radius: 0.2em;
    position: absolute;
}

.msPlayer meter::-webkit-meter-optimum-value {
    background: #86CC00;
    border-radius: 0.2em
}

.msPlayer meter::-webkit-meter-suboptimum-value {
    background: #FFDB1A;
    border-radius: 0.2em;
}

.msPlayer meter::-webkit-meter-even-less-good-value {
    background: #EC2C2C;
    border-radius: 0.2em
}

.msPlayer meter {
    /* For Firefox */
    background: #EEE;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
    border-radius: 0.2em
}

.msPlayer meter::-moz-meter-bar {
    border-radius: 0.2em
}

.msPlayer meter:-moz-meter-optimum::-moz-meter-bar {
    background: #86CC00;
}

.msPlayer meter:-moz-meter-sub-optimum::-moz-meter-bar {
    background: #FFDB1A;
}

.msPlayer meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
    background: #EC2C2C;
}

.msPlayer input[type=range] {
	z-index: 2;
	width: 27.4em;
	-webkit-appearance: none;
	position: absolute;
	/* chrome and FF do not handle meter elements with height zero the same way. */
	-moz-transform: translateY(1.55em);
}

.msPlayer input[type=range]:focus {
	outline: none;
}
.msPlayer input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 0em;
	cursor: pointer;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
	background: rgba(255, 255, 255, 0);
	border-radius: 0px;
	border: 0px solid rgba(1, 1, 1, 0);
}
.msPlayer input[type=range]::-webkit-slider-thumb {
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	border: 1px solid #000000;
	height: 2em;
	width: 2em;
	border-radius: 4px;
	cursor: pointer;
	-webkit-appearance: none;
	background: linear-gradient(to right, rgba(0,0,0,0.53) 0%, rgba(0,0,0,0.4) 15%, rgba(0,0,0,0.4) 42%, rgba(255,255,255,0.9) 50%, rgba(0,0,0,0.4) 58%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,0.53) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,0.53)), color-stop(15%, rgba(0,0,0,0.4)), color-stop(42%, rgba(0,0,0,0.4)), color-stop(50%, rgba(255,255,255,0.9)), color-stop(58%, rgba(0,0,0,0.4)), color-stop(85%, rgba(0,0,0,0.4)), color-stop(100%, rgba(0,0,0,0.53)));
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.53) 0%, rgba(0,0,0,0.4) 15%, rgba(0,0,0,0.4) 42%, rgba(255,255,255,0.9) 50%, rgba(0,0,0,0.4) 58%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,0.53) 100%);
}
.msPlayer input[type=range]:focus::-webkit-slider-runnable-track {
	background: rgba(255, 255, 255, 0);
}
.msPlayer input[type=range]::-moz-range-track {
	width: 100%;
	height: 0em;
	cursor: pointer;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
	background: rgba(255, 255, 255, 0);
	border-radius: 0em;
	border: 0px solid rgba(1, 1, 1, 0);
}
.msPlayer input[type=range]::-moz-range-thumb {
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	border: 1px solid #000000;
	height: 2em;
	width: 2em;
	border-radius: 4px;
	background: linear-gradient(to right, rgba(0,0,0,0.53) 0%, rgba(0,0,0,0.4) 15%, rgba(0,0,0,0.4) 42%, rgba(255,255,255,0.9) 50%, rgba(0,0,0,0.4) 58%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,0.53) 100%);
	background: -moz-linear-gradient(left, rgba(0,0,0,0.53) 0%, rgba(0,0,0,0.4) 15%, rgba(0,0,0,0.4) 42%, rgba(255,255,255,0.9) 50%, rgba(0,0,0,0.4) 58%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,0.53) 100%);
	cursor: pointer;
}
.msPlayer input[type=range]::-ms-track {
	width: 100%;
	height: 0px;
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	color: transparent;
}
.msPlayer input[type=range]::-ms-fill-lower {
	background: rgba(219, 219, 219, 0);
	border: 0px solid rgba(1, 1, 1, 0);
	border-radius: 0px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
}
.msPlayer input[type=range]::-ms-fill-upper {
	background: rgba(255, 255, 255, 0);
	border: 0px solid rgba(1, 1, 1, 0);
	border-radius: 0px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
}
.msPlayer input[type=range]::-ms-thumb {
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	border: 1px solid #000000;
	height: 2em;
	width: 2em;
	border-radius: 4px;
	background: -ms-linear-gradient(left, rgba(0,0,0,0.53) 0%, rgba(0,0,0,0.4) 15%, rgba(0,0,0,0.4) 42%, rgba(255,255,255,0.9) 50%, rgba(0,0,0,0.4) 58%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,0.53) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0.53) 0%, rgba(0,0,0,0.4) 15%, rgba(0,0,0,0.4) 42%, rgba(255,255,255,0.9) 50%, rgba(0,0,0,0.4) 58%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,0.53) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 );
	cursor: pointer;
	height: 0em;
}
.msPlayer input[type=range]:focus::-ms-fill-lower {
	background: rgba(255, 255, 255, 0);
}
.msPlayer input[type=range]:focus::-ms-fill-upper {
	background: rgba(255, 255, 255, 0);
}

.msPlayer h3 {
	font-family: "Open Sans", sans-serif;
	font-weight: normal;
	color: white;
	left: 0.28em;
	margin: 0;
	padding: 0;
	position: absolute;
	text-shadow: 0 0 0.2em black;
	cursor: default;
}

.msPlayer h3.midTitle {
	bottom: 5.05em;
}

.msPlayer h3.sideTitle {
	bottom: 2.925em;
}

.msPlayer h3.masterTitle {
	bottom: 0.825em;
}

.loadingOverlay {
    position: absolute;
    z-index: 5;
	width: 100%;
	height: 100%;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.8) 50% 50% no-repeat;
}

.loader {
	animation-name: magic;
	animation-duration: 2s;
	animation-timing-function: cubic-bezier(0.6, -0.28, 0.74, 0.05);
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-fill-mode: none;
	animation-play-state: running;
	position: relative;
	width: 1em;
	height: 1em;
	background: black;
	top: 50%;
	transform: translateY(-50%);
	margin: 0 auto;
	transform-style: preserve-3d;
}

@keyframes magic {
	0% {
		border-top-left-radius: 0em;
		border-bottom-left-radius: 0em;
		border-top-right-radius: 0em;
		border-bottom-right-radius: 0em;
		left: 0em;
	}
	25% {
		border-top-left-radius: 1em;
		border-bottom-left-radius: 1em;
		border-top-right-radius: 0em;
		border-bottom-right-radius: 0em;
		left: -5em;
	}
	50% {
		border-top-left-radius: 0em;
		border-bottom-left-radius: 0em;
		border-top-right-radius: 0em;
		border-bottom-right-radius: 0em;
		left: 0em;
	}
	75% {
		border-top-left-radius: 0em;
		border-bottom-left-radius: 0em;
		border-top-right-radius: 1em;
		border-bottom-right-radius: 1em;
		left: 5em;
	}
	100% {
		border-top-left-radius: 0em;
		border-bottom-left-radius: 0em;
		border-top-right-radius: 0em;
		border-bottom-right-radius: 0em;
		left: 0em;
	}
}

.worldMap {
	width: 18em;
	height: 9em;
	background-color: rgb(35, 139, 171);
	background: rgb(35, 139, 171) url("http://drive.mrawr.net/space/res/Equirectangular_projection_SW.jpg");
	bottom: 0;
	position: absolute;
	background-size: cover;
	background-position-x: 0%;
	overflow: hidden;
}

.positionMarker {
	border: solid 0.1em orange;
	width: 0.5em;
	height: 0.5em;
	border-radius: 999em;
	margin-left: -0.25em;
	margin-top: -0.25em;
	left: 52%;
	top: 15%;
	position: absolute;
	box-shadow: 0 0 0.1em 0.05em orange;
	-webkit-transform: translateZ(0);
	transition: all 0.5s ease;
}

.positionMarker div {
    background-color: rgba(255,165,0,0.6);
    position: absolute;
}

.positionMarker div.nLine {
	width: 0.1em;
	height: 100em;
	top: -100em;
	left: 0.175em;
}

.positionMarker div.eLine {
	width: 100em;
	height: 0.1em;
	left: 0.5em;
	bottom: 0.175em;
}

.positionMarker div.sLine {
	width: 0.1em;
	height: 100em;
	left: 0.175em;
	bottom: -100em;
}

.positionMarker div.wLine {
	width: 100em;
	height: 0.1em;
	right: 0.5em;
	bottom: 0.175em;
}
		
.mapContainer * {
	font-family: "Open Sans", sans-serif;
	color: white;
}

#timeInputBox {
	margin: 0;
	position: absolute;
	top: 0.444444em;
	font-size: 1.5em;
	width: 10.466667em;
	height: 1.2em;
	left: 0.6666666667em;
	text-align: center;
	background-color: rgba(255, 255, 255, 1);
	border: solid 0.1em gray;
	border-radius: 0.6em;
	font-family: "Open Sans", sans-serif;
	padding: 0.025em;
}
		
.mapContainer {
    width: 18em;
    height: 3.5em;
    margin: 0 auto;
    background: rgba(49, 60, 71, 0.35);
    margin-top: 0em;
    position: relative;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
}
	
.zoi {
	height: 22.2em;
	width: 22.2em;
	position: relative;
	top: 4.266667em;
	left: -0.1em;
	font-size: 0.8125em;
	font-family: "Open Sans", sans-serif;
}

/* pre-transparent .star {
	border-radius: 9999em;
	width: 1em;
	height: 1em;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgb(220, 226, 124);
	margin: auto;
	overflow: visible;
	box-shadow: 0em 0em 2.5em 0.2em  rgb(220, 226, 124);
} */

.star {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	overflow: visible;
	z-index: -4;
	width: 1em;
	height: 1em;
	background-color: white;
	box-shadow: 0 0 10em 4em rgba(255,255,200,0.3);
	border-radius: 100%;
}

.orbit {
	border: dashed blue;
	border-radius: 9999em;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	display: none;
}

.planet {
	position: absolute;
	border-radius: 9999em;
	height: 1em;
	width: 1em;
	box-shadow: 0 0 0.1em white;
	transition: all 0.21s linear;
}

.moon {
	position: absolute;
	border-radius: 9999em;
	height: 0.3em;
	width: 0.3em;
	margin-top: 0.5em;
	margin-left: 0.5em;
	box-shadow: 0 0 0.1em white;
	transition: all 0.21s linear;
	background-color: white;
}

.zeroMeridian {
	width: 0.1em;
	height: 1em;
	position: relative;
	background-color: red;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform: rotate(4deg);
}

.moon .zeroMeridian {
	height: 0.5em;
	display: none;
}

.Mars .zeroMeridian {
	display: none;
}

.Mercury .zeroMeridian {
	display: none;
}

.Venus .zeroMeridian {
	display: none;
}

.planet .moon label {
	left: 1.3em;
	top: 0.2em;
	font-size: 0.9em;
}

.zeroMeridian .zeroIndicator {
	background-color: blue;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 50%;
}

.Mars.orbit {
	width: 12em;
	height: 12em;
}

.Mars.planet {
	margin-left: 0.3em;
	margin-top: 0.3em;
	height: 0.4em;
	width: 0.4em;
	background-color: #CB4319;
}

.Mars .zeroMeridian {
	height: 0.8em;
}

.Earth.orbit {
	width: 10em;
	height: 10em;
}

.Earth.planet {
	margin-left: 0em;
	margin-top: 0em;
	background-size: cover;
	background-image: url("http://471.no/Navmap/textures/planets/planet_earth.txm/03.jpg");
	background-color: #4F7FC0;
}

.Earth .zeroMeridian {
	display: none;
}

.Mercury.orbit {
	width: 5em;
	height: 5em;
}

.Mercury.planet {
	margin-left: 0.3em;
	margin-top: 0.3em;
	width: 0.4em;
	height: 0.4em;
	background-color: rgb(205, 205, 218);
}

.Mercury .zeroMeridian {
	height: 0.4em;
}

.Mercury.planet label {
	top: 0.1em;
	left: 0.8em;
}

.Venus.orbit {
	width: 8em;
	height: 8em;
}

.Venus.planet {
	margin-left: 0.07em;
	margin-top: 0.07em;
	width: 0.9em;
	height: 0.9em;
	background-color: #EBD1A0;
}

.Venus .zeroMeridian {
	height: 0.9em;
}

.Saturn.orbit {
	width: 8em;
	height: 8em;
}

.Saturn.planet {
	top: 0em;
	left: 5em;
	background-color: rgb(173, 68, 30);
}

.Saturn .zeroMeridian {
	
}

.Jupiter.orbit {
	width: 8em;
	height: 8em;
}

.Jupiter.planet {
	top: 0em;
	left: 5em;
	width: 2em;
	height: 2em;
	background-color: rgb(255, 155, 0);
}

.Jupiter.planet label {
	left: 2.25em;
	top: 1.5em;
}

.Jupiter .zeroMeridian {
	height: 2em;
}

.Neptune.orbit {
	width: 8em;
	height: 8em;
}

.Neptune.planet {
	top: 0em;
	left: 5em;
	height: 1.5em;
	width: 1.5em;
	background-color: rgb(45, 134, 166);
}

.Neptune .zeroMeridian {
	height: 1.5em;
}

.Neptune.planet label {
	left: 2.25em;
	top: 1.5em;
}

.Uranus.orbit {
	width: 8em;
	height: 8em;
}

.Uranus.planet {
	top: 0em;
	left: 5em;
	background-color: rgb(99, 113, 158);
	height: 1.6em;
	width: 1.6em;
}

.Uranus .zeroMeridian {
	height: 1.6em;
}

.Uranus.planet label {
	left: 2.25em;
	top: 1.5em;
}

.star label{
	margin: 0 auto;
	position: absolute;
	width: 15em;
	left: 1em;
	top: 0;
	z-index: 999;
	font-size: 1.3em;
	text-shadow: 0px 0px 0.2em black;
	display: none;
}

.star > label {
	display: none;
}

@media (min-width: 54em) {
	.sidebarWrapper {
		display: block !important;
	}
	.mainHeader {
		left: -1em !important;
	}
.mainContent {
		left: -1em !important;
	}
.mainContainer {
		width: 51em !important;
	}
}

@media (max-width: 34em) {
	.mainTitleContainer {
		position: absolute !important;
	}
	#primaryNav {
		position: absolute !important;
		top: -3.25em !important;
	}
}

/* space background styles */

/* fallback, in case of noscript */
body {
}

.morning, .morning .fancySeparator {
}
	
.lateMorning, .lateMorning .fancySeparator {
}
	
.afternoon, .afternoon .fancySeparator {
}

.lateAfternoon, .lateAfternoon .fancySeparator {
}

.evening, .evening .fancySeparator {
}

.lateEvening, .lateEvening .fancySeparator {
}

.night, .night .fancySeparator {
}

.lateNight, .lateNight .fancySeparator {
}

.backgroundContainer {
  transition: top 0.5s ease;
  -webkit-transition: top 0.5s ease;
  -moz-transition: top 0.5s ease;
  -o-transition: top 0.5s ease;
  width: 100%;
  height: 300%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: black;
  z-index: -10;
  position: fixed;
}

.sphereThing {
	background: rgba(0, 165, 255, 0.87);
	position: absolute;
	left: 10%;
	z-index: -100;
	border-radius: 100%;
	width: 30vh;
	height: 30vh;
	bottom: -15vh;
	box-shadow: 0px 0px 3px 1px blue inset;
}

.blockyThing {
	width: 30%;
	bottom: 42%;
	height: 30%;
	left: 23%;
	background: #000;
	z-index: -99;
	position: absolute;
	border-radius: 15%;
}

.roundThing {
	width: 5%;
	background: #FFF;
	z-index: -99;
	position: absolute;
	border-radius: 35%;
	right: 27%;
	top: 20%;
	height: 120%;
}

.sidebar.disabledCSS {
  /* test for mobile webkit scroll performance */
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}

.backgroundContainer .atmosphere {
  opacity: 1 !important;
  transform: translate3d(0,0,0);
}

.backgroundContainer .sun {
  right: 20% !important;
  top: 20% !important;
  position: absolute !important;
}

.spaceElevator {
  left: 15%;
  height: 80%;
  width: 6em;
  bottom: 0%;
  position: absolute;
  z-index: -1;
  display: none;
}

.spaceElevator .receiverBox {
  position: relative;
  top: 0.25em;
  text-align: center;
  background-color: rgb(140,140,140);
  margin: 0 auto;
  height: 3em;
  width: 2em;
  border-radius: 0.2em;
  box-shadow: 0 0 0.1em 0.1em rgba(255,255,255,0.25);
}

.spaceshipBody .door {
  transform: rotate(90deg);
  color: #5F4E14;
  left: 0.1em;
  position: absolute;
  bottom: 0.5em;
}

.spaceElevator .receiverBox .window {
  position: relative;
  top: 0.5em;
  background-color: rgb(255,255,200);
  box-shadow: 0 0 0.1em 0.1em rgba(255,255,200,0.2);
  margin: 0 auto;
  height: 0.65em;
  border: solid 0.1em white;
  border-radius: 100%;
  width: 0.65em;
  padding: 0;
  margin-bottom: 0.125em;
}

.receiverBox i.fa {
  margin: 0 auto;
  position: relative;
  color: #E0E3EA;
  top: 0.5em;
  /* text-shadow: 0 0 0.1em white; */
}

.spaceElevator .laserReceiver {
  position: relative;
  z-index: -2;
  background-color: rgb(200,200,200);
  margin: 0 auto;
  height: 0.5em;
  width: 1em;
  border-radius: 100%;
}

.spaceElevator .laserReceiver.upper {
  position: relative;
  top: 0.5em;
}

.spaceElevator .panelAxle {
  position: absolute;
  width: 5em;
  height: 0.2em;
  background-color: gray;
  left: -1.5em;
  top: 1.4em;
  z-index: -3;
}

.sun {
	display: none;
	position: absolute;
	z-index: -4;
	width: 1em;
	height: 1em;
	background-color: white;
	box-shadow: 0 0 10em 7em rgba(255,255,200,0.3);
	border-radius: 100%;
}

.spaceElevator .solarPanel {
  transform: rotateZ(90deg);
  transform-origin: 50% 50%;
  -webkit-transform: rotateZ(90deg);
  -webkit-transform-origin: 50% 50%;
  height: 4em;
  width: 1em;
    background-color: rgba(10, 68, 172, 0.81);
    /* IE9, iOS 3.2+ */
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMDI2OWQzIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMxNDE2N2IiIHN0b3Atb3BhY2l0eT0iMC43NyIgb2Zmc2V0PSIwLjA2Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwNzFkYyIgc3RvcC1vcGFjaXR5PSIwLjg0IiBvZmZzZXQ9IjAuMTE4MDAwMDAwMDAwMDAwMDEiLz48c3RvcCBzdG9wLWNvbG9yPSIjMDA3MWRjIiBzdG9wLW9wYWNpdHk9IjAuODQiIG9mZnNldD0iMC4xMTgwMDAwMDAwMDAwMDAwMSIvPjxzdG9wIHN0b3AtY29sb3I9IiMxNDE2N2IiIHN0b3Atb3BhY2l0eT0iMC43NyIgb2Zmc2V0PSIwLjE4NCIvPjxzdG9wIHN0b3AtY29sb3I9IiMwMDcxZGMiIHN0b3Atb3BhY2l0eT0iMC44NCIgb2Zmc2V0PSIwLjI0MjAwMDAwMDAwMDAwMDAyIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwNzFkYyIgc3RvcC1vcGFjaXR5PSIwLjg0IiBvZmZzZXQ9IjAuMjQyIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzE0MTY3YiIgc3RvcC1vcGFjaXR5PSIwLjc3IiBvZmZzZXQ9IjAuMzA4Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwNzFkYyIgc3RvcC1vcGFjaXR5PSIwLjg0IiBvZmZzZXQ9IjAuMzY2Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwNzFkYyIgc3RvcC1vcGFjaXR5PSIwLjg0IiBvZmZzZXQ9IjAuMzY2Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzE0MTY3YiIgc3RvcC1vcGFjaXR5PSIwLjc3IiBvZmZzZXQ9IjAuNDMyMDAwMDAwMDAwMDAwMDUiLz48c3RvcCBzdG9wLWNvbG9yPSIjMDA3MWRjIiBzdG9wLW9wYWNpdHk9IjAuODQiIG9mZnNldD0iMC40OSIvPjxzdG9wIHN0b3AtY29sb3I9IiMwMDcxZGMiIHN0b3Atb3BhY2l0eT0iMC44NCIgb2Zmc2V0PSIwLjQ5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzE0MTY3YiIgc3RvcC1vcGFjaXR5PSIwLjc3IiBvZmZzZXQ9IjAuNTU2Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwNzFkYyIgc3RvcC1vcGFjaXR5PSIwLjg0IiBvZmZzZXQ9IjAuNjE0MDAwMDAwMDAwMDAwMSIvPjxzdG9wIHN0b3AtY29sb3I9IiMwMDcxZGMiIHN0b3Atb3BhY2l0eT0iMC44NCIgb2Zmc2V0PSIwLjYxNCIvPjxzdG9wIHN0b3AtY29sb3I9IiMxNDE2N2IiIHN0b3Atb3BhY2l0eT0iMC43NyIgb2Zmc2V0PSIwLjY4Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwNzFkYyIgc3RvcC1vcGFjaXR5PSIwLjg0IiBvZmZzZXQ9IjAuNzM4Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwNzFkYyIgc3RvcC1vcGFjaXR5PSIwLjg0IiBvZmZzZXQ9IjAuNzM4MDAwMDAwMDAwMDAwMSIvPjxzdG9wIHN0b3AtY29sb3I9IiMxNDE2N2IiIHN0b3Atb3BhY2l0eT0iMC43NyIgb2Zmc2V0PSIwLjgwNCIvPjxzdG9wIHN0b3AtY29sb3I9IiMwMDcxZGMiIHN0b3Atb3BhY2l0eT0iMC44NCIgb2Zmc2V0PSIwLjg2MiIvPjxzdG9wIHN0b3AtY29sb3I9IiMwMDcxZGMiIHN0b3Atb3BhY2l0eT0iMC44NCIgb2Zmc2V0PSIwLjg2MiIvPjxzdG9wIHN0b3AtY29sb3I9IiMxNDE2N2IiIHN0b3Atb3BhY2l0eT0iMC43NyIgb2Zmc2V0PSIwLjkyNzk5OTk5OTk5OTk5OTkiLz48c3RvcCBzdG9wLWNvbG9yPSIjMDA3MWRjIiBzdG9wLW9wYWNpdHk9IjAuODQiIG9mZnNldD0iMC45ODYiLz48c3RvcCBzdG9wLWNvbG9yPSIjMDA3MWRjIiBzdG9wLW9wYWNpdHk9IjAuODQiIG9mZnNldD0iMC45ODYwMDAwMDAwMDAwMDAxIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzEwMjk5MCIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,color-stop(0, rgb(2, 105, 211)),color-stop(0.06, rgba(20, 22, 123, 0.77)),color-stop(0.118, rgba(0, 113, 220, 0.84)),color-stop(0.118, rgba(0, 113, 220, 0.84)),color-stop(0.184, rgba(20, 22, 123, 0.77)),color-stop(0.242, rgba(0, 113, 220, 0.84)),color-stop(0.242, rgba(0, 113, 220, 0.84)),color-stop(0.308, rgba(20, 22, 123, 0.77)),color-stop(0.366, rgba(0, 113, 220, 0.84)),color-stop(0.366, rgba(0, 113, 220, 0.84)),color-stop(0.432, rgba(20, 22, 123, 0.77)),color-stop(0.49, rgba(0, 113, 220, 0.84)),color-stop(0.49, rgba(0, 113, 220, 0.84)),color-stop(0.556, rgba(20, 22, 123, 0.77)),color-stop(0.614, rgba(0, 113, 220, 0.84)),color-stop(0.614, rgba(0, 113, 220, 0.84)),color-stop(0.68, rgba(20, 22, 123, 0.77)),color-stop(0.738, rgba(0, 113, 220, 0.84)),color-stop(0.738, rgba(0, 113, 220, 0.84)),color-stop(0.804, rgba(20, 22, 123, 0.77)),color-stop(0.862, rgba(0, 113, 220, 0.84)),color-stop(0.862, rgba(0, 113, 220, 0.84)),color-stop(0.928, rgba(20, 22, 123, 0.77)),color-stop(0.986, rgba(0, 113, 220, 0.84)),color-stop(0.986, rgba(0, 113, 220, 0.84)),color-stop(1, rgb(16, 41, 144)));
    /* Android 2.3 */
    background-image: -webkit-repeating-linear-gradient(top,rgba(0, 113, 220, 0.84) -0.6%,rgba(20, 22, 123, 0.77) 6%,rgba(0, 113, 220, 0.84) 11.8%);
    /* IE10+ */
    background-image: repeating-linear-gradient(to bottom,rgba(0, 113, 220, 0.84) -0.6%,rgba(20, 22, 123, 0.77) 6%,rgba(0, 113, 220, 0.84) 11.8%);
    background-image: -ms-repeating-linear-gradient(top,rgba(0, 113, 220, 0.84) -0.6%,rgba(20, 22, 123, 0.77) 6%,rgba(0, 113, 220, 0.84) 11.8%);
  top: -2.05em;
  position: absolute;
  border: solid 0.1em gray;
}

.spaceElevator .solarPanel.left {
  left: 0;
}

.spaceElevator .solarPanel.right {
  right: 0;
}


.spaceElevator .tether {
  position: relative;
  margin: 0 auto;
  width: 0.2em;
  height: 100%;
  background: transparent linear-gradient(270deg, #1073C5, #39CDEE) repeat scroll 0% 0% / 400% 400%;
  /*-webkit-animation: pulse 4s ease infinite;
    -moz-animation: pulse 4s ease infinite;
    animation: pulse 4s ease infinite; */
  box-shadow: 0 0 0.5em 0.5em rgba(0,0,255,0.5);
  z-index: -5;
}

.atmosphere {
	z-index: 5;
	/* midnight 0.85, midday 1 */

	opacity: 0.85;
	height: 100%;
	width: 100%;
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,00397a+33,00397a+55,346a8e+75,346a8e+92,994638+98&0+0,1+100 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,57,122,0.33) 33%, rgba(0,57,122,0.55) 55%, rgba(52,106,142,0.75) 75%, rgba(52,106,142,0.92) 92%, rgba(153,70,56,0.98) 98%, rgba(153,70,56,1) 100%); /* FF3.6-15 */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(33%,rgba(0,57,122,0.33)), color-stop(55%,rgba(0,57,122,0.55)), color-stop(75%,rgba(52,106,142,0.75)), color-stop(92%,rgba(52,106,142,0.92)), color-stop(98%,rgba(153,70,56,0.98)), color-stop(100%,rgba(153,70,56,1))); /* Chrome4-9,Safari4-5 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,57,122,0.33) 33%,rgba(0,57,122,0.55) 55%,rgba(52,106,142,0.75) 75%,rgba(52,106,142,0.92) 92%,rgba(153,70,56,0.98) 98%,rgba(153,70,56,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,57,122,0.33) 33%,rgba(0,57,122,0.55) 55%,rgba(52,106,142,0.75) 75%,rgba(52,106,142,0.92) 92%,rgba(153,70,56,0.98) 98%,rgba(153,70,56,1) 100%); /* Opera 11.10-11.50 */
	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,57,122,0.33) 33%,rgba(0,57,122,0.55) 55%,rgba(52,106,142,0.75) 75%,rgba(52,106,142,0.92) 92%,rgba(153,70,56,0.98) 98%,rgba(153,70,56,1) 100%); /* IE10 preview */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,57,122,0.33) 33%,rgba(0,57,122,0.55) 55%,rgba(52,106,142,0.75) 75%,rgba(52,106,142,0.92) 92%,rgba(153,70,56,0.98) 98%,rgba(153,70,56,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#994638',GradientType=0 ); /* IE6-9 */
}

.starfield {
	z-index: -999;
	height: 200%;
	width: 200%;
	position: absolute;
	top: -100%;
	left: -100%;
}

.starfield .star {
  position: absolute;
  z-index: -5;
  background-color: white;
  width: 1px;
  height: 1px;
  border-radius: 100em !important;
  box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.1);
}

.star.O {
  background-color: rgb(173, 216, 230);
  box-shadow: 0 0 3px 3px rgba(173, 216, 230, 0.1);
}

.star.B {
  background-color: rgb(137, 137, 255);
  box-shadow: 0 0 3px 3px rgba(137, 137, 255, 0.1);
}

.star.A {
  background-color: rgb(88, 249, 255);
  box-shadow: 0 0 3px 3px rgba(88, 249, 255, 0.1);
}

.star.F {
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.1);
}

.star.G {
  background-color: rgb(255, 255, 169);
  box-shadow: 0 0 3px 3px rgba(255, 255, 169, 0.1);
}

.star.K {
  background-color: rgb(255, 221, 158);
  box-shadow: 0 0 3px 3px rgba(255, 221, 158, 0.1);
}

.star.M {
  background-color: rgb(255, 156, 156);
  box-shadow: 0 0 1px 1px rgba(255, 156, 156, 0.1);
}
/*     z-index: -999;
    height: 200%;
    width: 200%;
    position: absolute;
    top: -100%;
    left: -100%; */

.spaceshipBody {
  /* http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28left\%2C\%20rgba\%28218\%2C218\%2C218\%2C1\%29\%200\%25\%2C\%20rgba\%28247\%2C247\%2C247\%2C1\%29\%2050\%25\%2C\%20rgba\%28218\%2C218\%2C218\%2C1\%29\%20100\%25\%29\%3B' */
  font-size: 0.8em;
  background: gray;
  height: 2em;
  width: 5em;
  position: absolute;
  transform: translateZ(0);
  right: -20%;
  z-index: -2;
  bottom: 40%;
  animation: flyAnimation linear 120s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
}

.primaryShipColor {

  background: linear-gradient(to right, rgba(218,218,218,1) 0%, rgba(247,247,247,1) 50%, rgba(218,218,218,1) 100%);
}

.spaceshipBody .engineStack {
  position: absolute;
  left: 4.85em;
  height: 100%;
  width: 0.3em;
  background-color: rgb(30,30,30);
  border-radius: 100%;
}

.spaceshipBody .fuelContainer {
  /* http://www.cssmatic.com/gradient-generator#'\-moz\-radial\-gradient\%28center\%2C\%20ellipse\%20cover\%2C\%20rgba\%28255\%2C202\%2C138\%2C1\%29\%200\%25\%2C\%20rgba\%28255\%2C146\%2C10\%2C1\%29\%20100\%25\%29\%3B' */
  position: absolute;
  left: 1.85em;
  bottom: 0.35em;
  height: 20%;
  z-index: 1;
  width: 2.5em;
  background-color: orange;
  background: radial-gradient(ellipse at center, rgba(255,202,138,1) 0%, rgba(255,146,10,1) 100%);
  border-radius: 5em;
}

.spaceshipBody .tailFin {
  position: absolute;
  top: -1.5em;
  right: 0.17em;
  height: 30%;
  width: 1em;
  border-bottom: solid #DADADA 1em;
  border-left: transparent solid 1em;
  border-right: transparent solid 0.3em;
}

.spaceshipBody .windShield {
  position: absolute;
  left: -1.225em;
  top: -1em;
  height: 1em;
  width: 0.225em;
  border-bottom: solid rgba(200,200,255,0.5) 1em;
  border-left: transparent solid 1em;
}

.spaceshipBody .window {
  border-radius: 100%;
  height: 100%;
  width: 25%;
  position: absolute;
  background-color: rgb(150,150,90);
}

.spaceshipBody .window.left {
  left: 0%;
}

.spaceshipBody .window.middle {
  left: 33%;
}

.spaceshipBody .window.right {
  left: 66%;
}

.spaceshipBody .windowContainer {
  display: none;
  width: 3em;
  height: 0.6em;
  left: 1.8em;
  position: absolute;
  top: 0.2em;
}

.spaceshipBody .leg {
  position: absolute;
  bottom: -0.75em;
  height: 1em;
  right: 1em;
  width: 1.225em;
  z-index: 1;
  transform: rotate(20deg);
  border-top-left-radius: 5em;
  border-top: solid rgba(255,255,255,0.9) 1em;
  border-left: transparent solid 1em;
}

.spaceshipBody .noseCone {
  /* http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28left\%2C\%20rgba\%28247\%2C247\%2C247\%2C1\%29\%200\%25\%2C\%20rgba\%28218\%2C218\%2C218\%2C1\%29\%20100\%25\%29\%3B' */
  position: absolute;
  left: -1.20em;
  bottom: 0em;
  background: linear-gradient(to right, rgba(247,247,247,1) 0%, rgba(218,218,218,1) 100%);
  height: 1em;
  width: 1.25em;
  border-bottom-left-radius: 100%;
}

.spaceshipBody .engineStack .nozzle {
  position: absolute;
  left: 0.1em;
  height: 30%;
  width: 1em;
  background-color: #777171;
  border-top-left-radius: 2em;
  border-bottom-left-radius: 2em;
  box-shadow: 1.1em 0px 1em 0.2em rgba(162, 128, 255, 0.9);
}

.nozzle.upper {
    top: 12.5%;
}

.nozzle.lower {
  bottom: 12.5%;
}

.navLight {
  background-color: white;
  border-radius: 100%;
  width: 0.25em;
  height: 0.25em;
  top: -0.95em;
  right: 0.85em;
  position: absolute;
  box-shadow: 0 0 1em 1em rgba(255,255,255,0.3);
}

.flashing {
  animation: flashLight ease-in-out 5s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
}

.twinkle {
  animation: twinkleAnimation ease-in-out 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
}

@keyframes twinkleAnimation {
  0% {
    transform: scaleX(1) scaleY(1);
  }
  50% {
    transform: scaleX(3) scaleY(3);
    opacity: 0.7;
  }
  100% {
    transform: scaleX(1) scaleY(1);
  }
}

// keyframes for the dash gradient animation
@-webkit-keyframes pulse {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}
@-moz-keyframes pulse {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}
@keyframes pulse {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}

@keyframes flyAnimation {
	0% {
		right: -10em;
		display: none;
	}
	29% {
		right: -10em;
		display: none;
	}
	30% {
		right: -10em;
		display: block;
	}
	100% {right: 120%;}
}

@keyframes flashLight {
	0%{opacity: 0.1}
  50%{opacity: 0.9}
  100%{opacity: 0.1}
}

/* custom audio player styles begin */

.audioPlayer, 
.audioPlayer span,
.msPlayer,
.msPlayer * {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.audioPlayer {
	position: relative;
	width: 100%;
	background: #A3AEB7;
	height: 2em;
	min-width: 20em;
	text-align: center;
	font-family: "Open Sans", sans-serif;
	cursor: pointer;
	border-radius: 0.2em;
	margin-top: 0.25em;
	overflow: hidden;
}

.audioPlayer .button {
	width: 2em;
	height: 100%;
	background: #313C47;
}

.audioPlayer .elapsedTime {
	margin-left: 0.5em;
	margin-right: 0.5em;
	color: white;
	text-align: center;
	position: relative;
	font-size: 1em;
	display: inline-block;
   top: 50%;
   transform: translateY(-50%);
}

.audioPlayer .fileLength {
	color: white;
	position: relative;
	font-size: 1em;
	display: inline-block;
    top: 50%;
    transform: translateY(-50%);
	margin-right: 0.5em;
}

.audioPlayer .playPause .icon {
   top: 0.5em;
	left: 0.5em;
	position: relative;
	height: 1em;
	width: 1em;
	transform: rotate(0deg);
	transition: transform ease 0.5s;
}

.audioPlayer.paused .playPause .icon {
   top: 0.5em;
	left: 0.5em;
	position: relative;
	height: 1em;
	width: 1em;
	transform: rotate(90deg);
}

.audioPlayer .playPause .icon .top,
.audioPlayer .playPause .icon .bottom {
	transition: transform ease 0.5s, background ease 0.25s;
	background: #2E82D1;
}

.audioPlayer .playPause:hover .icon .top,
.audioPlayer .playPause:hover .icon .bottom {
	background: #FFAF22;
}

.audioPlayer.paused .playPause .icon .top,
.audioPlayer.paused .playPause .icon .bottom {
	border-top-left-radius: 5em;
	border-top-right-radius: 5em;
	border-bottom-left-radius: 5em;
	border-bottom-right-radius: 5em;
}

.audioPlayer .playPause .icon .top {
	position: absolute;
	margin: auto;
	width: auto;
	height: auto;
	left: 0;
	top: 0;
	bottom: 0;
	right: 70%;
}

.audioPlayer .playPause .icon .bottom {
	position: absolute;
	margin: auto;
	width: auto;
	height: auto;
	left: 70%;
	top: 0;
	bottom: 0;
	right: 0;
}

.audioPlayer.paused .playPause .icon .top {
	position: absolute;
	margin: auto;
	width: auto;
	height: auto;
	left: 0;
	top: 0;
	bottom: 0;
	right: 70%;
	transform: rotate(23deg);
	transform-origin: 100% 100%;
}

.audioPlayer.paused .playPause .icon .bottom {
	position: absolute;
	margin: auto;
	width: auto;
	height: auto;
	left: 70%;
	top: 0;
	bottom: 0;
	right: 0;
	transform: rotate(-23deg);
	transform-origin: 0% 100%;
}

.audioPlayer .volume.bar {
	top: 0;
	left: 81%;
	right: 0;
	height: 100%;
	position: absolute;
	background: #313C47;
}

.audioPlayer .bar .stateIndicator {
	width: 0%;
	position: absolute;
	left: 0;
	background: #2E82D1;
	height: 100%;
	text-align: center;
	transition: width 0.25s ease;
}

.audioPlayer .bar:hover .seekIndicator {
	display: block;
}

.audioPlayer .bar .seekIndicator {
	display: none;
	width: 2px;
	position: absolute;
	left: 0;
	background: gray;
	height: 100%;
	text-align: center;
}

.audioPlayer .volume.bar .fa {
	color: #FFFFFF;
	position: absolute;
	top: 0.5em;
	font-size: 1em;
	display: block;
	width: 100%;
	z-index: 5;
}

.audioPlayer .bar:hover .stateIndicator {
	background: #FFAF22;
}

.audioPlayer .progress.bar {
	top: 0;
	left: 2em;
	right: 20%;
	height: 100%;
	position: absolute;
	background: #313C47;
	text-align: right;
}
/* custom audio player styles end */