@charset "UTF-8";

/*+++++++++++++++++++++++++++++++++++++++++++++++++++
GLOBEBOP STYLES
Globebop 1.0 by Jim Andrews, December 2014.
+++++++++++++++++++++++++++++++++++++++++++++++++++*/

#bannerAds {
	/* Div for Google ads above contentContainer. */
	width:100%;
	top:0px;
	position:fixed;
	height:90px;
	background: #052b25; 
	border-bottom-style:solid;
	border-bottom-color:#555555;
	border-bottom-width: 1px;
	z-index: 9999999;
	background: -moz-linear-gradient(top, #052b25 0%, #08473c 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#052b25), color-stop(100%,#08473c)); 
	background: -webkit-linear-gradient(top,  #052b25 0%,#08473c 100%); 
	background: -o-linear-gradient(top, #052b25 0%,#08473c 100%); 
	background: -ms-linear-gradient(top, #052b25 0%,#08473c 100%); 
	background: linear-gradient(to bottom, #052b25 0%,#08473c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#052b25', endColorstr='#08473c',GradientType=0 );
}

html, body, #contentContainer, #selectLanguageContainer { 
	/* Makes the element take up the full space.  */
	position:absolute;
	width: 100%; 
	height: 100%; 
	padding: 0; 
	margin:0; 
	background-color:#052b25;
}

/* Style for old Google ads
#contentContainer {
	top:90px;
	height:-moz-calc(100% - 90px);
	height:-webkit-calc(100% - 90px);
	height:-o-calc(100% - 90px);
	height:calc(100% - 90px);
}
*/


/*+++++++++++++++++++++++++++++++++++++++++++++++++++
GRADIENTS
+++++++++++++++++++++++++++++++++++++++++++++++++++*/

.green2 {
	background: #052b25; 
	background: -moz-linear-gradient(top,  #052b25 0%, #08473c 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#052b25), color-stop(100%,#08473c)); 
	background: -webkit-linear-gradient(top,  #052b25 0%,#08473c 100%); 
	background: -o-linear-gradient(top,  #052b25 0%,#08473c 100%); 
	background: -ms-linear-gradient(top,  #052b25 0%,#08473c 100%); 
	background: linear-gradient(to bottom,  #052b25 0%,#08473c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#052b25', endColorstr='#08473c',GradientType=0 );
}

.bluej {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#002699+0,115fdd+100 */
	background: rgb(0,38,153); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(0,38,153,1) 0%, rgba(17,95,221,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,38,153,1) 0%,rgba(17,95,221,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,38,153,1) 0%,rgba(17,95,221,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002699', endColorstr='#115fdd',GradientType=0 ); /* IE6-9 */
}

.lightGreen {
	background: #ebf1f0; /* Old browsers */
	background: -moz-linear-gradient(top,  #ebf1f0 0%, #fbfbfb 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f0), color-stop(100%,#fbfbfb)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ebf1f0 0%,#fbfbfb 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ebf1f0 0%,#fbfbfb 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ebf1f0 0%,#fbfbfb 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ebf1f0 0%,#fbfbfb 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f0', endColorstr='#fbfbfb',GradientType=0 ); /* IE6-9 */
}
.jimsky2 {
  background: #1e5799; /* Old browsers */
  background: -moz-linear-gradient(left,  #1e5799 0%,  #5091dc 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e5799), color-stop(100%,#5091dc)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  #1e5799 0%,#5091dc 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  #1e5799 0%,#5091dc 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  #1e5799 0%,#5091dc 100%); /* IE10+ */
  background: linear-gradient(to right,  #1e5799 0%,#5091dc 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#5091dc',GradientType=1 ); /* IE6-9 */
}
.jimsky3 {
  background: #5091dc; /* Old browsers  74aff3 */
  background: -moz-linear-gradient(left,  #5091dc 0%,  #74aff3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#5091dc), color-stop(100%,#74aff3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  #5091dc 0%,#74aff3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  #5091dc 0%,#74aff3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  #5091dc 0%,#74aff3 100%); /* IE10+ */
  background: linear-gradient(to right,  #5091dc 0%,#74aff3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5091dc', endColorstr='#74aff3',GradientType=1 ); /* IE6-9 */
}
.jimsky4 {
	padding:5px;
	margin-top:10px;
	margin-bottom: -10px;
	border: 1px solid black;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4083cf+0,a8d3e9+100 */
  background: #4083cf; /* Old browsers */
  background: -moz-linear-gradient(top,  #4083cf 0%, #a8d3e9 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #4083cf 0%,#a8d3e9 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #4083cf 0%,#a8d3e9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4083cf', endColorstr='#a8d3e9',GradientType=0 ); /* IE6-9 */
}
.blue2 {
	background: #1e5799; 
	background: -moz-linear-gradient(top,  #1e5799 0%, #5091dc 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#5091dc));
	background: -webkit-linear-gradient(top,  #1e5799 0%,#5091dc 100%);
	background: -o-linear-gradient(top,  #1e5799 0%,#5091dc 100%);
	background: -ms-linear-gradient(top,  #1e5799 0%,#5091dc 100%);
	background: linear-gradient(to bottom,  #1e5799 0%,#5091dc 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#5091dc',GradientType=0 );
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++
LANGUAGE SELECTION ON FIRST RUNNING GLOBEBOP
+++++++++++++++++++++++++++++++++++++++++++++++++++*/

#selectLanguageContainer {
	display:none;
	background-color: #bed4d0;
}
#languageAndLogoDiv {
	/* The div that holds the select menu when
	the user first runs Globebop to select a language. */
	width:344px;
	position:absolute;
	left:50%;
	margin-left:-172px;
	top:40%;
	z-index: 99999999;
}
.flexibleImage {
   max-width: 100%;
   height: auto;
}
.centerImageHor {
	position:relative;
	left:50%;
	margin-left:-139px;
}
#selectAndButton {
	margin-left: auto;
	margin-right: auto;
	width:280px;
}
#selectLanguage0 {
	/* The select drop down menu the user sees when first 
	running Globebop to select a language. */
	height:26px;
	font-size:16px;
	color: white;
	line-height:1;
	width:170px;
	vertical-align: middle;
	margin-right: 0px;
	cursor:pointer;
	background-color: #052b25;
}
#languageButton {
	/* The button the user presses to choose a language when
	they first run the program. */
	color:white;
	height:26px;
	width:100px;
	line-height:1;
	vertical-align: middle;
	text-align: center;
	margin-left:0px;
	padding:5px;
	cursor:pointer;
	background-color: #052b25;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++
TOPCONTENT STYLES
+++++++++++++++++++++++++++++++++++++++++++++++++++*/

#topContent {
  /* Contains the pano and info divs. Is
  contained in contentContainer. */
  	position:absolute;
	width: 100%;
	top:0px;
	bottom: 60px;
	left:0px;
	right:0px;
}
#pano, #info, #creditsPage {
	/* The id of the panorama/map div is pano.
  	The id of the Wikipedia article top area is info. */
	position:absolute;
	width: 100%;
	top:0px;
	bottom: 0px;
	left:0px;
	right:0px;
	z-index:0;
	background-color: #1e5799;
}
#info, #creditsPage {
	/* This div is contained by topContent. info contains
	the infoiFrame iFrame. */
	display:none;
}
#infoiFrame {
	/* The id of the iFrame is infoiFrame. This iFrame
	displays the Wikipedia articles and search listings. */
	position:absolute;
	width:99.7%;
	height:99.7%;
	overflow:hidden;
}
#closeInfoButton {
	position:absolute;
	width:24px;
	height:24px;
	top:4px;
	right:17px;
	cursor:pointer;
	border:1px solid white;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++
MENU AREA STYLES
+++++++++++++++++++++++++++++++++++++++++++++++++++*/ 

#footer {
	/* The footer div holds the main menu. */
	position:fixed;
	height:60px;
	width:100%;
	bottom:0px;
	left:0px;
	border-top:1px solid #555555;
}
#tButton {
	/*The Globebop button */
	position:absolute;
	left:50%;
	margin-left:-40px;
	bottom:0px;
	/*z-index:5;  photoDiv must be above it */
	display:none;
}
.buttonImage {
	/* Prevents an image from being draggable/selectable. 
	Applied to the Globebop button. */
	-WEBKIT-USER-SELECT: NONE; /* SAFARI, CHROME */
	-KHTML-USER-SELECT: NONE; /* KONQUEROR */
	-MOZ-USER-SELECT: NONE; /* FIREFOX */
	-MS-USER-SELECT: NONE; /* IE */
	USER-SELECT: NONE; /* CSS3 */
	user-drag: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	cursor:pointer;
  position:relative;
}
#globeMarker {
	/* The red marker on the little globe button. */
	position:absolute;
}
.menuButton {
	/* Each menu div (cred, bac, tel, str, sha) has this class. */
	float:left;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	height:60px;
	line-height:60px;
	text-align:center;
	border-right:1px solid #555555; 
	width:18%;
	text-decoration : none;
	color : #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	cursor:pointer;
	background-color: transparent;
	transition: background-color 1s linear;
}
.menuButton:hover, #tButton:hover + #tel {
	/* Hover over any menu button or globe button turns the menu item blue.  */
	background-color: rgba(30, 144, 255, 0.6);
}
.menuButton:active, #tButton:active + #tel {
	background-color: rgba(46, 0, 66, 0.6);
	transition: background-color 0.1s linear;
}
.menuButton:visited, #tButton:visited + #tel {
	background-color: transparent;
}

.menuIcon {
	/*The menu divs cred str and sha have menu icons in 
	them that have this class attached to them to 
	vertically center the menu icon.*/
	vertical-align:middle;
}
#genieNumber {
	/* The number that appears in the Back button has this
	style attached to it. Note that the background-image
	of this style is the Back button. */
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	position:relative;
	color:black;
	font-size:12px;
	line-height:60px;
	text-align:center;
	text-shadow: 1px 1px #fff;
	height:60px;
	width:100%;
	background-image:url(../images/back_48.png);
	background-repeat:no-repeat;
	background-position:center;
}
#rightArrow {
	/* The right arrow that appears at bottom right of the
	menu which, when clicked, reveals more menu items. */
	position: fixed;
	bottom: 0px;
	right: 0px;
	cursor:pointer;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++
SHARE DIALOG BOX STYLES
+++++++++++++++++++++++++++++++++++++++++++++++++++*/

#shareDialogBox {
	/* The container of the dialog box that opens when
	the user clicks the Share button. */
	display:none;
	position:absolute; 
	z-Index:10;
	border:2px ridge gray;
	padding:10px;
	text-align:center;
}
.shareInstructions {
	text-align:center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.0em;
}
a.shareEmailLink:link, a.shareEmailLink:visited {
	text-align:center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	text-decoration: none;
}
a.shareEmailLink:hover {
	color:#08473c;
}
#shareTextArea {
	font-size:0.8em;
	height:7em;
	padding:10px;
	background-color:white;
	overflow:scroll;
}
.butt {
	/* The Done button in the Share dialog box and
	the RETURN button in the Credits page. */	
  	padding-top:5px;
  	padding-bottom:5px;
	font-size: 1em; 	
	cursor:pointer;
	border-radius: 5px; 
	color:#bed4d0;
	width:100%; 
	margin-top:10px; 
}
.butt:link {background-color:#000000;}      /* unvisited link */
.butt:visited {background-color:#000000;}   /* visited link */
.butt:hover {
	color:white;
	background-color:#333333;
}     /* mouse over link */

/*+++++++++++++++++++++++++++++++++++++++++++++++++++
CREDITS PAGE STYLES
+++++++++++++++++++++++++++++++++++++++++++++++++++*/

.creditsPageStyle {
	background-attachment: fixed;
	overflow-y: auto;
	overflow-x: hidden;
	bottom:60px;
}
#creditsContainer {
	margin-left:auto;
	margin-right:auto;
	padding:10px;
	width:100%;
	max-width:550px;
	background-color: white;
	border-left:1px solid #000;
	border-right:1px solid #000;
	min-height:100%;
}
.creditsTitle {
	background-color: #bed4d0;
	padding:7px;
	padding-bottom: 0px;
	border: 1px solid #000;
}
.centered {
	text-align: center;
}
h1 {
	margin-top:0;
	font-family:"Franklin Gothic Bold", "Arial Black", Impact, Haettenschweiler, "Droid Sans", sans-serif;
	font-size:2em;
	color:white;
	text-shadow: 1px 1px #000;
	font-weight:bold;
	line-height: 2.0;
	padding-left:5px;
	border:1px solid #000;
}
.mainheading {
	/* Attached to the paragraph that contains the RETURN button. */
	color:#ffffff;
	text-transform:uppercase;
	margin-bottom:1em;
	margin-top:0em;
	font-size:1.5em;
	text-align:center;
}
.intro {
	/* Attached to a text in the Credits */
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size:1em;
	width:280px;
	text-align:center;
	margin:15px auto;
}
.credTitleTop {
	margin-top:30px;
}
.credTitle {
	/* Attached to main sections of Credits page. */
	font-family:"Franklin Gothic Bold", "Arial Black", Impact, Haettenschweiler, "Droid Sans", sans-serif;
	font-size:1.1em;
	font-weight:bold;
	color:white;
	border:1px solid #000;
	text-shadow: 0px 1px #000;
	padding-left: 5px;
	margin-top: 30px;
	margin-bottom:8px;
}
.credSubTitle {
	/* Attached to 'role titles'. */
	font-family:"Franklin Gothic Bold", "Arial Black", Impact, Haettenschweiler, "Droid Sans", sans-serif;
	font-size:1em;
	font-weight:bold;
	color:black;
	padding-left: 5px;
	margin-bottom:-4px;
	margin-top:10px;
}
.credName {
	/* Attached to participant names. */
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size:1.1em;
  padding-left:5px;
  padding-right:5px;
  margin-top:5px;
  margin-bottom:5px;
}
.credList {
	/* Attached to lists in the Credits section. */
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size:1.1em;
}
.keyboardShortcuts {
	padding-left:5px;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size:1.1em;
}
#th1 {
	text-align:left;
}
#th2 {
	text-align:left;
	width:100%;
}
a.lnk:link, a.lnk:visited {
	/* Attached to links. */
	text-decoration:none;
	color:#5091dc;
}
a.lnk:hover {
	color:blue;
}
#GridSize, #GridNodes, #UnusedNodes, #UsedNodes, #Visited {
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size:1.1em;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++
WIKIPEDIA ARTICLE INFOWINDOW CONTENT
+++++++++++++++++++++++++++++++++++++++++++++++++++*/

.searchResultContainer {
  line-height: 1.35;
  padding-top:0px;
  padding-left:5px;
  padding-right:5px;
  padding-bottom:0px;
  background-color:#ffffff;
  opacity:1;
}
a.title:link, a.title:visited {
  font-family:"Franklin Gothic Bold", "Arial Black", Impact, Haettenschweiler, "Droid Sans", sans-serif;
	font-size:1em;
  font-weight:bold;
  text-shadow: 1px 1px #000000;
  opacity:1;
	margin-bottom:0px;
  color: #ef465a;
  text-decoration: none;
}
a.title:hover {
	color:maroon;
} 
.distance {
  font-size:0.8em;
  font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}