/* CSS Document */

/*  HTML5 Boilerplate  */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
html, body {
	vertical-align:top;
	min-width:240px;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
header, footer {
	pointer-events: all;
}
body {
	font-family:"proxima-nova", Verdana, Geneva, sans-serif;
	color:#000;
	background-color:#2e2e2e;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; /* FireFox */
}
.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.grecaptcha-badge { visibility: hidden; }
#reCAPTCHA_placeholder {
	position:absolute;
	display: block;
	z-index: 10000;
}
#cont_404 {
	margin: 20px auto;
	max-width: 700px;
	min-height: 50vh;
	background-color: #FF9632;
	padding: 10px 14px;
	color: #2e2e2e;
}
#cont_404 h1 {
	color: #2e2e2e;
}
.buttton_labeled {
	margin:10px 0 0 0;
}
.buttton_labeled > a {
	margin: 0 10px 0 0;
}
.buttton_labeled > p {
	display: block;
	float: left;
	margin: 10px 0 0 0;
}
div#robot {
	opacity: 0.5;
	position: fixed;
	padding: 0;
	margin: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}
img#indicator {
	display: block;
	float: left;
	margin: 10px;
	width: 27px;
	height: 27px;
}
span#msg {
}
.twit {
	position: relative;
	height: 20px;
	box-sizing: border-box;
	padding: 1px 8px 1px 6px;
	background-color: #1b95e0;
	border-radius: 3px;
	cursor: pointer;
	width: 64px;
	font: normal normal normal 11px/18px 'Helvetica Neue',Arial,sans-serif;
}
.twit:hover {
	background-color: #197cbd;
}
.twit img {
	height: 12px;
	width: auto;
	margin: 2px 0 0 2px;
}
.twit a:link, .twit a:visited, .twit a.active, .twit a:hover {
	color: #fff;
	font-weight: 500;
	text-decoration: none;
}
#connection_container > img#indicator {
	width: 16px;
	height: 16px;
	margin: 1px 6px 0 0;
}
#content_block { max-width: 700px; width: 94%; margin:20px auto; }
input, select, textarea {
	-webkit-appearance:none;
	-moz-appearance:none;
	border-radius: 0;
	border:none;
}
.noborder {
	border:none;
}
#image_display {
	display: none;
	position: fixed;
	z-index: 1;
}
#image_display input[type="button"] {
	display: block;
	float: right;
	margin: 4px;
	padding: 4px 10px;
	border:1px #000000 solid;
	cursor: pointer;
	font-weight: bold;
}
#image_display input[type="button"]:hover {
	background-color: #000000;
	border:1px #FFFFFF solid;
	color:#FFFFFF;
}
img#image_to_save {
	display:none;
}
h1, h2, h3, h4, h5, h6 {
	font-family:"proxima-nova", Verdana, Geneva, sans-serif;
	font-weight:600;
	color:#FFFFFF;	
}
h1 { font-size:1.5em; }
h2 { font-size:1em; }
h3 { font-size:0.875em; }
h4 { font-size:0.75em; }
h5 { font-size:0.625em; }
h6 { font-size:0.5625em; }

b, strong {
	font-weight:bold;
}
i, em {
	font-style:italic;
}
html {
	height:100%;
	-webkit-font-smoothing: antialiased; /* Mac fonts normal instead */
	font-smooth:always;
}
body { 	
	font-family:"proxima-nova", Verdana, Geneva, sans-serif;
	margin:0;
	padding:0;
	height:100%;
	text-align:center; 
	color:#FFFFFF;
}
a img { border:none; } /* prevent IE8 from bordering linked images */
a {
/*	color:#8b2815;*/
	font-weight:normal;
	text-decoration:underline;
}
a:link,
a:visited,
a:active {
	color:#000;
/*	color:#8b2815;*/
}
a:hover {
	color:#76912b; /* 9dbd46 */
}
input { /* remove iOS rounded corners */
    border-radius: 0;
}
.clear_left {
	clear:left;
}
.clear_right {
	clear:right;
}
.clear_both {
	clear:both;
}
.yellow {
	color:#fbeb7f;
}
.green {
	color:#bafd7e;
}
.blue {
	color:#38d9f9;
}
.red {
	color:#F00;
}
.olive { color:#666600; }
.redbrown { color:#663300; }
.lghttan { color:#fee7a2; }
.lghtred { color:#ff5656; }
.lghtorg { color: #ffb358; }
.brtolv { color:#c7c725; }
.nobreakwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}
#header_background {
	display:block;
	float:none;
	position:relative;
	width:100%;
	padding:0;
	margin:0;
	height:94px;
/*	max-height:120px;*/
	background-color:#2e2e2e;
	z-index:1;
}
#header_background #menu_background {
	width:100%;
	height:10px;
	position:absolute;
	left:0;
	top:78px;
	background-color:#695138;
	z-index:1;
}
#header_background #menu_bottom_border {
	width:100%;
	height:6px;
	position:absolute;
	left:0;
	top:88px;
	background-color:#000;
	z-index:1;
}
#header {
	display:block;
	position:relative;
	height:100%;
	margin:0 auto;
	z-index:2;
}
#header #logo_top {
	display:block;
	float:left;
	width:170px;
	height:58px;
	margin:11px 0 5px 0;
	line-height:1.25;
}
#header #logo_top img {
	height:100%;
	width:auto;
	display: inline-block;
	float:left;
	margin:auto 2% auto auto;
	vertical-align:middle;
/*	background-color: #838D76;*/
}
#header #logo_top a {
	font-family:"proxima-nova", Verdana, Geneva, sans-serif;
	font-size:1em;
	font-weight:normal;
	color:#848d75;
	text-decoration:none;
}
#header #logo_top a:hover {
	color:#a6785b;
	text-decoration:underline;
}
#header #logo_top a span {
	color:#a6785b;
	margin:0 0 0 4px;
}
#header #logo_top a:hover span {
	color:#848d75;
}
#header #logo_top a span.break:after {
    content:"\000A";
    white-space: pre;
}
footer {
	margin-top:30px;
}
#footer_wrap {
	display:block;
	float:left;
	position:relative;
	height:252px;
	width:100%;
	padding:0;
	margin:-252px auto 0 auto;
	background-color:#513f2d;	
	z-index:0;
}
#footer_wrap #top_wrap {
	width:100%;
	height:54px;
	position:absolute;
	left:0;
	top:0;
	background-color:#2e2e2e;
	z-index:1;
}
#footer_wrap #mid_wrap {
	width:100%;
	height:9px;
	position:absolute;
	left:0;
	top:54px;
	background-color:#000;
	z-index:1;
}
#footer {
	display:block;
	position:relative;
	height:100%;
	margin:0 auto;
	text-align:left;
	z-index:2;
}
#footer #logo_bot {
	display:block;
	float:left;
	width:100%;
	max-width:320px;
	height:50px;
	margin:0;
	line-height:1;
}
#footer #logo_bot img {
	height:100%;
	width:auto;
	display: inline-block;
	float:left;
	margin:auto 2% auto auto;
	vertical-align:middle;
	background-color: #838D76;
}
#footer #logo_bot a {
	font-family:"proxima-nova", Verdana, Geneva, sans-serif;
	font-size:1em;
	font-weight:normal;
	color:#848d75;
	text-decoration:none;
}
#footer #logo_bot a:hover {
	color:#a6785b;
	text-decoration:underline;
}
#footer #logo_bot a span {
	color:#a6785b;
	margin:0 4px;
}
#footer #logo_bot a:hover span {
	color:#848d75;
}
#footer #logo_bot a span.break:after {
    content:"\000A";
    white-space: pre;
}
#copyright {
	position:absolute;
	left:0;
	bottom:12px;
	font-family:"proxima-nova", Verdana, Geneva, sans-serif;
	font-size:0.6875em;
	font-weight:600;
	color:#FFF;
	z-index:2;
}
#copyright a {
	font-weight:600;
}
#container {
	width:100%;
	text-align:left;
	padding-bottom:252px;
	pointer-events: none;
	position:relative;
	z-index:1;
}
#content {
	position:relative;
	margin:0 auto;
	text-align:left;
	min-height: 100%;
	pointer-events: all;
/*	overflow:auto;*/ /* self clears */
}
#wrap {
	position:relative;
	min-height:100%;
}
/* used to control width of page content and provide left and right margins on mobile devices */
.contain, #content.contain {
	width:100%;
	max-width:91.666666666667%; /* 220/240 */
	margin:0 auto;
}
#contact_info {
	display:block;
	float:left;
	width:220px;
	margin:30px 0 0 0;
	font-size:0.875em;
	color:#FFFFFF;
	line-height:1.28571428571429;
}
#footer a {
	color:#FFFFFF;
	text-decoration:none;
}
#footer a:hover {
	color:#fee7a2;
}
#social_links {
	position:absolute;
	top:0;
	right:0;
}
#social_links a {
	display:block;
	float:right;
	height: 40px;
	width: 40px;
	margin: 5px 0 8px 10px;
	background-repeat:no-repeat;
	background-size:100%;
}
#social_links .imgbtn {
	width:100%;
	height:100%;
}
div.info_block > .imgbtn.help-button, div.io_container > .imgbtn.help-button, div.info_block > .imgbtn.clear-button, div.io_container > .imgbtn.clear-button {
	position: absolute;
	width: 24px;
	height: 24px;
	top: 1px;
}
div.info_block > .imgbtn.help-button, div.io_container > .imgbtn.help-button {
	right: 4px;
}
div.info_block > .imgbtn.clear-button, div.io_container > .imgbtn.clear-button {
	left: 4px;
}
#save_output {
	visibility: hidden;
	width: 24px;
	height: 24px;
	position: absolute;
	top: 1px;
	right: 31px;
}
div.info_block .imgbtn.gold {
	width:36px;
	height:36px;
	margin: 0 6px 6px 0;
}

div.help_icon {
	position:relative;
	display:block;
	float:left;
	width:32px;
	height:32px;
	cursor: pointer;
}
.info_block div.help_icon {
	position: absolute;
	top: 3px;
	right: 3px;
	width:20px;
	height:20px;
}
div.help_icon > svg {
	position:absolute;
}
div.help_icon > svg:nth-child(1) {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
div.help_icon > svg:nth-child(1) > use {
	fill:#FFFFFF;
	stroke: black;
	stroke-width:5%;
}
div.help_icon > svg:nth-child(2) {
	width: 56%;
	height: 64%;
	margin: 19% auto 0 auto;
	position: relative;
	display: block;
}
div.help_icon > svg:nth-child(2) > use {
	fill: #000000;
}

div.help_icon:hover > svg:nth-child(1) > use {
	fill:#000000;
	stroke: white;
}
div.help_icon:hover > svg:nth-child(2) > use {
	fill: #FFFFFF;
}


div.icon {
	position:relative;
	display:block;
	float:left;
	margin:0 0 0 10px;
	width:36px;
	height:36px;
	cursor: pointer;
}
div.icon > svg {
	position:absolute;
}
div.icon > svg:nth-child(1), div.icon > svg:nth-child(2), div.icon > svg:nth-child(3) {
	width:96%;
	height:96%;
}
div.icon > svg:nth-child(1) {
	bottom:0; right:0;
}
div.icon > svg:nth-child(2) {
	top:0; left:0;
}
div.icon > svg:nth-child(3) {
	top:3%; left:3%;
}
div.icon > svg:nth-child(1) > use {
	fill:#000000;
}
div.icon > svg:nth-child(2) > use {
	fill:#ffffff;
}
div.icon > svg:nth-child(3) > use {
/*	fill:#d49f1f;*/
	fill:#F3BF37;
}
/*div.icon:hover > svg:nth-child(1) > use {
	fill:#ffffff;
}
div.icon:hover > svg:nth-child(2) > use {
	fill:#000000;
}*/
div.icon:hover > svg:nth-child(3) > use {
/*	fill:#8C6412;*/
	fill:#D39E31
}
div.icon > svg:nth-child(4) {
	fill: #000000;
	width: 64%;
	height: 64%;
	display: block;
	float: none;
	margin: 19% auto;
	position: relative;
}
div.icon:hover > svg:nth-child(4) {
	fill:#FFFFFF;
}
div.icon#load > svg:nth-child(4) {
	margin-left: 13%;
}
div.icon.compass-needle > svg:nth-child(4) {
	margin-left: 14%;
	margin-top: 22%;
}
div.icon#reset > svg:nth-child(4) {
	margin-top: 16%;
	margin-left: 17%;
}

#information_box {
	display: none;
	float: right;
	max-width: 200px;
	height: 100%;
	max-height: 82px;
	margin: 4px;
	font-size: 0.75em;
	text-align: right;
}
#information_box a {
	color:#a6785b;
	text-decoration:none;
}
#information_box a:hover {
	color:#848d75;
}
#h1title {
	display:none;
}
#working {
	display:block;
	float:left;
	width:20px;
	height:20px;
	margin-right:10px;
}
#working img {
	margin:1px 0 0 5px;
	width:19px;
	height:auto;
}
.help_button {
	display:block;
	width:100%;
	height:100%;
	background-image:url(../../images/help-button.png);
	background-size:100%;
	background-repeat:no-repeat;
	cursor:pointer;
}
.help_button:hover, .help_button.open {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.help_button.open:hover {
	filter: invert(0%);
	-webkit-filter: invert(0%);
}
div.info_block > div.help_button, div.io_container > div.help_button {
	display:block;
	float:right;
	position:absolute;
	top:3px;
	right:3px;
	width:16px;
	height:16px;
	padding:2px;
}
.info_block a {
	display:inline;
	color:#a6785b;
}
.info_block a:hover {
	color:#76912b;
}

input[type="button"] {
	display:block;
	float:left;
	font-size:0.875em;
	background-color: #d49f1f;
	border-radius: 5px;
	border-width: 1px;
	border-color: #FFF;
	border-style: outset;

	margin:0;
	height:auto;
	padding: 4px 8px;
	cursor:pointer;
}
input[type="button"]:hover {
	color:#FFF;
	background-color:#8C6412;
}

input[type="button"].big_button {
	font-size:1.5em;
	font-weight:600;
	padding:4px 20px;
	text-transform:capitalize;
}

input[type="button"].big_button:hover {
}


@media screen and (min-width:320px) {
	.contain, #content.contain {
		max-width:93.75%; /* 300/320 */
	}
}

@media screen and (min-width:360px) {
	.contain, #content.contain {
		max-width:94.444444444444%; /* 340/360 */
	}
}

@media screen and (min-width:375px) {
	.contain, #content.contain {
		max-width:94.666666666667%; /* 355/375 */
	}
	#header_background {
		height:72px;
	}
	#header_background #menu_background {
		height:6px;
		top:60px;
	}
	#header_background #menu_bottom_border {
		height:4px;
		top:66px;
	}
	#header #logo_top {
		width:300px;
		height:30px;
		margin:15px 0 0 0;
		line-height:30px;
	}
	#header #logo_top a {
		font-size:1.1em;
	}
	#header #logo_top a span {
		margin:0;
	}
	#header #logo_top a span.break:after {
		content:"";
	}
	#footer #logo_bot img {
		height:100%;
		width:auto;
		display: inline-block;
		float:left;
		margin:auto 2% auto auto;
		vertical-align:middle;
	}
	#footer #logo_bot a {
		font-size:1.1em;
	}
}

@media screen and (min-width:420px) {
	#header #logo_top {
		width:340px;
		height:40px;
		margin:10px 0 0 0;
		line-height:40px;
	}
	#header #logo_top a {
		font-size:1.25em;
	}
}

@media screen and (min-width:460px) {
	#footer #logo_bot {
		height: 40px;
		line-height: 41px;
		margin: 4px 0 0 0;
	}
	#footer #logo_bot a span.break:after {
		content:"";
	}
}
@media screen and (min-width:480px) {
	.contain, #content.contain {
		max-width:95.833333333333%; /* 460/480 */
	}
}

@media screen and (min-width:540px) {
	.contain, #content.contain {
		max-width:96.296296296296%; /* 520/540 */
	}
}

@media screen and (min-width:600px) {
	.contain, #content.contain {
		max-width:96.666666666667%; /* 580/600 */
	}
	#header_background {
		height:142px;
	}
	#header_background #menu_background {
		height:42px;
		top:91px;
	}
	#header_background #menu_bottom_border {
		height:9px;
		top:133px;
	}
	#header #logo_top {
		width:460px;
		height:55px;
		margin:21px 0 15px 0;
		line-height:55px;
	}
	#header #logo_top a {
		font-size:1.75em;
	}
	#footer #logo_bot {
		width:330px;
		max-width:100%;
		height: 40px;
		margin: 5px 0 0 0;
		line-height: 40px;
	}
	#footer #logo_bot img {
	}
	#footer #logo_bot a {
		font-size:1.25em;
	}
	#footer #logo_bot a span {
		margin:0;
	}
	#social_links {
		position:relative;
		right:auto;
		display:block;
		float:right;
		height:40px;
		width:auto;
		margin:5px 0 0 0;
	}
	#social_links a {
		display:block;
		float:left;
		height:40px;
		width:40px;
		margin:0 0 0 12px;	
	}
}

@media screen and (min-width:640px) {
	.contain, #content.contain {
		max-width:96.875%; /* 620/640 */
	}
}

@media screen and (min-width:650px) {
/*	input[type="button"].big_button {
		font-size:1.5em;
	}
	input[type="button"].big_button:hover {
		color:#FFF;
		background-color:#8C6412;
	}*/
}

@media screen and (min-width:700px) {
	.contain, #content.contain {
		max-width:97.142857142857%; /* 680/700 */
	}
}

@media screen and (min-width:736px) {
	.contain, #content.contain {
		max-width:97.282608695652%; /* 716/736 */
	}
}

@media screen and (min-width:768px) {
	.contain, #content.contain {
		max-width:97.395833333333%; /* 748/768 */
	}
	#content_block { max-width: 75%; }
}

@media screen and (min-width:898px) {
	.contain, #content.contain {
		max-width:97.772828507795%; /* 878/898 */
	}
}

@media screen and (min-width:960px) {
	div.info_block .imgbtn.gold {
		width:24px;
		height:24px;
		margin: 0 8px 8px 0;
	}
	.contain, #content.contain {
		max-width:97.916666666667%; /* 940/960 */
	}
	div.icon > svg:nth-child(4) {
		margin: 17% auto;
	}
	div.icon {
		width: 21px;
		height: 21px;
	}
}

@media screen and (min-width:1024px) {
	.contain, #content.contain {
		max-width:98.046875%; /* 1004/1024 */
	}
	#information_box {
		display:block;
		position:absolute;
		top:0;
		right:0;
	}
}

@media screen and (min-width:1200px) {
	.contain, #content.contain {
		max-width:98.333333333333%; /* 1180/1200 */
	}
}

@media screen and (min-width:1260px) {
/*	input[type="button"].big_button {
		float:left;
		margin-left:18px;
	}*/
}

/* big logo top */
@media screen and (min-width:1648px) {

}