* {
	color: rgba(0, 0, 0, 0.8);
	font-family: 'PT Serif', serif; outline: 0; max-height: 999999px;
}

body {
	background: linear-gradient(rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.025) 33%, rgba(0, 0, 0, 0.025) 100%), url('../gfx/background.png'); /* Background pattern from Toptal Subtle Patterns */
	background-attachment: fixed;
	background-color: #ffffff;
	background-repeat: repeat;
	width: 100%;
	height: 100%;
	margin: 0 auto 0 auto;
	position: relative;
}

header {
	border-color: rgba(0, 0, 0, 0.5);
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	margin: 24px auto 48px auto;
	padding: 20px;
	width: 728px;
}

header img {
	display: inline-block;
	margin-right: 12px;
}

header h1 {
	color: #000000;
	display: inline-block;
	font-size: 18px;
	margin: 0px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

header nav {
	display: inline-block;
	float: right;
	font-size: 18px;
}

article { width: 680px; margin: 0 auto; }
article h3 { font-size: 22px; font-weight: bold; text-align: center; margin: 20px 0px 18px 0px; }
article p { text-align: justify; text-align-last: left; font-size: 18px; }
article ul { margin: 14px 0px 14px 0px; font-size: 18px; }
article figure { text-align: center; margin: 0px; }

p {
	text-align: center;
	margin: 0px 0px 12px 0px;
	font-size: 22px;
	color: rgba(0, 0, 0, 0.8);
}

#form {
	margin: 0px;
}

#form input {
	background-color: rgba(0, 0, 0, 0.05);
	border: 0px;
	border-radius: 5px;
	color: #000000;
	font-size: 22px;
	height: 48px;
	margin-bottom: 12px;
	text-align: center;
}

#form input:hover {
	background-color: rgba(0, 0, 0, 0.075);
}

#form input:not([type=button]):focus, form#form input[type=button]:active {
	background-color: rgba(0, 0, 0, 0.1);
}

#form input[type=number] {
	-moz-appearance:textfield;
}

#form input::-moz-placeholder, #form input::-webkit-input-placeholder {
	color: rgba(0, 0, 0, 0.166);
	text-transform: uppercase;
}

#form input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

#form input::-webkit-calendar-picker-indicator:hover {
	background: none;
}

#form input::-webkit-datetime-edit-year-field, #form input::-webkit-datetime-edit-month-field, #form input::-webkit-datetime-edit-day-field {
	color: #000000;
}

#form div {
	width: 100%;
}

#form #form_location input {
	background-position: 11px 14px, 496px 14px;
	background-repeat: no-repeat;
	background-size: 37px 25px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 540px;
}

#form #form_lat {
	background-image: url('../gfx/symbols/phi.png'), url('../gfx/symbols/deg.png');
}

#form #form_lon {
	background-image: url('../gfx/symbols/lambda.png'), url('../gfx/symbols/deg.png');
}

#form #form_elev {
	background-image: url('../gfx/symbols/h.png'), url('../gfx/symbols/m.png');
}

#form #form_location_tools {
	width: 540px; margin: 0 auto 36px auto;
}

#form #form_location_tools input {
	width: 264px;
	padding: 0px 0px 0px 28px;
	background-size: 28px 28px;
	background-position: 10px 10px;
	background-repeat: no-repeat;
}

#form #form_location_tools input:not(:first-child) {
	margin-left: 12px;
}

#form #form_gps {
	background-image: url('../gfx/symbols/gps.png');
}

#form #form_gps:disabled {
	/*background-image: url('../gfx/symbols/gps-anim.png');*/
	color: rgba(0,0,0,0.5);
}

#form #form_map {
	background-image: url('../gfx/symbols/map.png');
}

#form #form_date {
	width: 540px;
	margin: 0 auto 36px auto;
}

#form #form_date input {
	width: 264px; padding: 0px;
}

#form #form_date input:not(:first-child) {
	margin-left: 12px;
}

#form #form_travel_distance input {
	background-image: url('../gfx/symbols/travel.png'), url('../gfx/symbols/km.png');
	background-position: 10px 10px, 490px 14px;
	background-repeat: no-repeat;
	background-size: 28px 28px, 37px 25px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 540px;
}

#form #form_calculate input:not([type=checkbox]) {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 12px;
}

#form #form_calculate input:not([type=checkbox]) {
	display: block;
	width: 540px;
}

#form #form_calculate #check_moresats {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 540px;
}

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 40px;
  padding-top: 2px;
  margin-bottom: 12px;
  font-size: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: rgba(0, 0, 0, 0.7);
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  background-color: rgba(0, 0, 0, 0.05);
  left: 0;
  height: 29px;
  width: 29px;
}

/* Create a custom checkbox */
.checkmark {
  border-radius: 5px;
  position: absolute;
  top: 0;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: rgba(0, 0, 0, 0.075);
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: rgba(0, 0, 0, 0.75);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 11px;
  top: 7px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


#map_wrapper { display: none; overflow: hidden; width: calc(100% - 48px); height: calc(100% - 48px); top: 0px; left: 0px; position: fixed; border-width: 24px; border-color: rgba(0,0,0,0.75); border-style: solid; }
#map_menu { height: 100%; background-color: #ffffff; border-width: 0px 4px 0px 4px; border-color: #ffffff; border-style: solid; }

#map { width: 100%; margin: 0px; padding: 0px; }
#map.form { height: calc(100% - 56px); }
#map.results { height: 100%; }
#map_menu input { height: 52px; background-color: #ffffff; border: none; color: #000000; font-size: 20px; }
#map_menu input[type=text] { float: left; width: calc(100% - 172px); margin-left: 12px;  }
#map_menu input[type=button].map_button { float: right; text-align: right; cursor: pointer; padding: 0px 12px 0px 20px; }
#map_menu input[type=button].toggled { color: #ff0000; }

#map_menu input[type=button].info_window_button { font-size: 16px; cursor: pointer; height: auto; padding: 4px 20px 0px 0px; }
#map_menu input[type=button].recalculate { font-size: 16px; cursor: pointer; height: auto; padding: 4px 0px 0px 0px; margin-right: 52px; }
#map_menu input[type=button].active { color: #0000c0; }
#map_menu input[type=button].disabled { color: #606060; cursor: default; }
#map_menu hr.info_window_hr { height: 0px; border-top: 1px solid #000000; clear: left; }
.pac-item * { font-size: 14px; }
.infobox_head { font-size: 16px; font-weight: bold; }
#infobox_canvas { width: 100px; height: 100px; background-color: #000000; border-radius: 10px; margin: 0px 8px 8px 0px; float: left; }

#warning1 { position: absolute; bottom: 100px; width: 100%; text-align: center; display: none; }
#warning2 { display: inline-block; margin: 0 auto; font-size: 20px; background-color: rgba(255, 255, 255, 0.75); padding: 16px 20px 16px 20px; border-radius: 10px; }

#button_bar { text-align: center; }
#button_bar input { color: #000000; font-size: 20px; margin: 20px 7px 0px 7px; background-color: rgba(0,0,0,0.05); border: 0px; border-radius: 4px; padding: 5px 16px 6px 16px;}

#results .result { width: 680px; background: rgba(0,0,0,0.05); border-radius: 10px; margin: 24px auto 0 auto; }
#results .result .preview { text-align: center; display: inline-block; }
#results .result .preview canvas { width: 140px; height: 140px; background-color: #000000; border-radius: 10px; margin: 10px 10px 0px 10px; }
#results .result .preview p { font-size: 17px; margin: 0px 0px 0px 0px; font-weight: bold; }
#results .result .preview p.transit { color: rgba(160, 0, 0, 0.8); } 
#results .result .details { position: relative; display: inline-block; vertical-align: top; width: 518px; min-height: 116px; margin-top: 8px; padding-bottom: 64px; }
#results .result .details p { color: rgba(0,0,0,0.8); margin: 0px; text-align: left; font-size: 17px; }
#results .result .details p:first-child { margin-bottom: 6px; font-size: 20px; font-weight: bold; }
#results .result .details .extra_info { display: none; margin-top: 8px; }
#results .result .details .buttons { position: absolute; bottom: 10px; right: 10px; }
#results .result .details .buttons input { color: #000000; float: right; font-size: 20px; margin: 14px 0px 0px 10px; background-color: rgba(0, 0, 0, 0.05); border: 0px; border-radius: 4px; padding: 5px 16px 6px 16px; }
#results .result .details .buttons input:hover, div#button_bar input:hover { background-color: rgba(0, 0, 0, 0.075); }
#results .result .details .buttons input:active, div#button_bar input:active { background-color: rgba(0, 0, 0, 0.1); }
#results .result .transit p { color: rgba(160, 0, 0, 0.8); }
#results .result .transit p b { color: rgba(160, 0, 0, 0.8); }
#results .result .transit .buttons input { color: rgba(160, 0, 0, 0.9); }

#errorlist { font-style: italic; margin: 24px 0px 0px 0px; font-size: 18px; }
#results_info { margin-bottom: 0px; font-size: 20px; }

#back { margin: 24px 0px 0px 0px; font-size: 20px; }
#accuracy_notification { width: 640px; text-align: justify; text-align-last: center; font-style: italic; display: none; margin: 16px auto 0px auto; font-size: 20px; }

a, a:link, a:visited {
	color: rgba(0, 0, 24, 0.55);
	text-decoration: none;
}

a:active, a:hover {
	color: rgb(0, 0, 24);
}

a.featured, a.featured:link, a.featured:visited {
	color: rgba(176, 0, 0, 0.75);
}

a.featured:active, a.featured:hover {
	color: rgb(144, 0, 0);
}

#ad_top { width: 728px; height: 90px; margin: 0px auto 0px auto; }
#ad_bottom { width: 468px; height: 60px; margin: 32px auto 0px auto; }

#announcement_header {
	background-color: rgba(0, 128, 255, 0.1);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 42px;
	padding: 20px 0px 20px 0px;
	text-align: center;
	font-size: 18px;
	color: rgba(0, 0, 24, 0.75);
	cursor: pointer;
}

#announcement_header b {
	color: rgba(0, 0, 24, 0.75);
}

#announcement_header:hover {
	background-color: rgba(0, 128, 255, 0.15);
	color: rgba(0, 0, 24);
}

#announcement_header:hover b {
	color: rgba(0, 0, 24);
}

#announcement_content {
	background-color: rgba(0, 128, 255, 0.05);
	margin-left: auto;
	margin-bottom: 42px;
	margin-right: auto;
	padding: 20px;
	text-align: justify;
	font-size: 18px;
	color: rgba(0, 0, 0, 0.75);
	display: none;
}

.tooltip {
  float: right;
  position: relative;
}

.tooltip .helptip {
  background-color: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.75);
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  padding: 10px 10px 0px 10px;
  position: absolute;
  right: 0px;
  top: 36px;
  visibility: hidden;
  width: 400px;
}

.tooltip .helptip p {
  color: #000000;
  font-size: 16px;
  font-style: italic;
  text-align: center;
}

.tooltip:hover .helptip {
  visibility: visible;
}

.helptip p:before{
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.75);
  right: 40px;
  top: -12px;
  z-index: -1;
}

.helptip p:after{
  width: 100%;
  height: 40px;
  content:'';
  position: absolute;
  top: -40px;
  left: 0;
  z-index: -1;
}

table.premium {
	border-spacing: 0px;
	width: 100%;
	margin-bottom: 12px;
}

table.premium th {
	background-color: rgba(0, 0, 0, 0.1);
	padding: 6px;
	text-align: center;
}

table.premium tr:nth-child(even) {
	background-color: rgba(0, 0, 0, 0.05);
}

table.premium tr:nth-child(odd) {
	background-color: rgba(0, 0, 0, 0.075);
}

table.premium td {
	padding: 6px;
	text-align: center;
}

footer {
	text-align: center;
	border-color: rgba(0, 0, 0, 0.5);
	border-style: solid;
	border-width: 1px 0px 0px 0px;
	margin: 54px auto 0px auto;
	padding-top: 20px;
	width: 768px;
}

footer img { margin: 32px 16px 10px 0px; height: 70px; }
footer p { font-size: 17px; margin-bottom: 4px; }
footer div { margin-top: 10px; }

footer a.mode_switch {
	color: rgba(255, 255, 255, 0.9);
	background-color: #000000;
	border-width: 4px 8px 4px 8px;
	border-color: #000000;
	border-style: solid;
	border-radius: 4px;
	margin-top: 2px;
}

footer a.mode_switch:hover {
	color: rgba(255, 255, 255, 1.0);
}