

/* latin */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Josefin Sans'), local('JosefinSans'), url(josefinsans-regular-webfont.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

html {
	width: 100%;
	height: 100%;
}

body {
	background-color: #F9F4ED;
	margin: 0px;
	width: 100%;
	height: 100%;
	/*overflow: hidden;*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

p {
	font-family: "Josefin Sans";
	margin: 0px;
	padding: 0px;
}

a {
	text-decoration: none;
}

a > img{
	border: 0;
}


#fullscreenBox {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

/*HEADER*/


#headerImage {
	position: absolute;
	top: 15px;
	left: 10px;
	width: 500px;
	height: auto;
}

#header {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 50px;
	width: 100%;
	z-index: 1;
}


/* Border Radius, left and right */
#headerBackgroundLeft {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 20px;
	width: 20px;
	background-color: #ffffff;
	z-index: 0;
}

#headerRadiusLeft {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 20px;
	width: 20px;
	background-color: #F9F4ED;
	-webkit-border-top-left-radius: 20px;
	-moz-border-radius-topleft: 20px;
	border-top-left-radius: 20px;
}

#headerBackgroundRight {
	position: absolute;
	top: 0px;
	right: 0px;
	height: 20px;
	width: 20px;
	background-color: #ffffff;
	z-index: 0;
}

#headerRadiusRight {
	position: absolute;
	top: 0px;
	right: 0px;
	height: 20px;
	width: 20px;
	background-color: #F9F4ED;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topright: 20px;
	border-top-right-radius: 20px;
}


#fullscreen {
	position: absolute;
	top: 25px;
	right: 10px;
	cursor: pointer;

}

/* MAIN CANVAS */

.story, .info, #infoBox {
	-webkit-touch-callout: all;
	-webkit-user-select: all;
	-khtml-user-select: all;
	-moz-user-select: all;
	-ms-user-select: all;
	user-select: all;
	pointer-events: auto;
}

#infoBox, #relBox {
	position: absolute;
	
	height: auto;
	width: 300px;
	background-color: #ffffff;
	display: none;
	padding-top: 10px;
	padding-left: 5px;
	padding-right: 5px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}

#infoBox {
	top: 25px;
	left: 10px;
	
}

#relBox {
	right: 10px;
	bottom: 25px;

}

/* Information points */
.info { 
	margin-left: 5px;
	margin-right: 5px;
	color: #717172;
}


#canvasBox {
	position: fixed;
	top: 50px;
	bottom: 178px;
	left: 0px;
	height: auto;
	width: 100%;
	pointer-events:none;
	/*background-color: rgba(0, 255, 0, 0.2);*/
}


/* FOOTER */

#footer {
	position: fixed;
	bottom: 100px;
	left: 0px;
	width: 100%;
	height: 80px;
}

/* Text instructions */
#instruction {
	position: absolute;
	top: 11px;
	left: 10px;
	width: 310px;
	color: #000000;
}

.instructionSpan {
	
	color: #717172;
}

#roll {
	position: absolute;
	top: 15px;
	left: 54px;
}

#click {
	position: absolute;
	top: 30px;
	left: 79px;
}

#back {
	position: absolute;
	top: 45px;
	left: 0px;
}



/* Hexagons */
#footerCanvasBox { 
	position: absolute;
	height: 48px;
	width: 410px;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);

}
#footerCanvas {
	position: absolute;
	bottom: 0px;
}

#predominantly {
	position: absolute;
	left: 228px;
	font-size: 14px;
}

/* Relationship toggle */
#filter {
	position: absolute;
	font-size: 14px;
	right: 81px;
	top: 10px;
	color: #717172;
}

.relations {
	font-size: 14px;
	bottom: 8px;
	right: 10px;
	cursor: pointer;
	position: absolute;
}

#allies {
	right: 10px;
	opacity: 1;
}

#friendly {
	right: 60px;
	opacity: 0.35;
}

#strained {
	right: 142px;
	opacity: 1;
}

#enemies {
	right: 236px;
	opacity: 1;
}

#alliesLine {
	width: 38px;
	margin-bottom: 6px;
	border-top: 2px solid #FF0380;
}

#friendlyLine {
	width: 42px;
	margin-bottom: 6px;
	border-top: 1px dashed #FF0380;
}

#strainedLine {
	width: 66px;
	margin-bottom: 6px;
	border-top: 1px dashed #696969;
}

#enemiesLine {
	width: 35px;
	margin-bottom: 6px;
	border-top: 2px solid #696969;
}


/* SOURCE / CREDITS */

#source {
	-webkit-touch-callout: all;
	-webkit-user-select: all;
	-khtml-user-select: all;
	-moz-user-select: all;
	-ms-user-select: all;
	user-select: all;
}

#source {
	position: fixed;
	height: 100px;
	width: 100%;
	bottom: 0px;
	background-color: #ffffff;
	/*background-color: rgba(0, 255, 0, 0.2);*/
}

#sourceLeftBorder {
	position: fixed;
	left: 0px;
	bottom: 5px;
	width: 10px;
	height: 100px;
}

#sourceRightBorder {
	position: fixed;
	right: 0px;
	bottom: 5px;
	width: 10px;
	height: 100px;
}

#sourceBorder {
	position: fixed;
	bottom: 5px;
	left: 10px;
	right: 10px;
	width: auto;
	height: 80px;
	border-top: 1px dashed #000000;
}

#sourceLeft {
	position: absolute;
	bottom: 0px;
	left: 0px;
}

#sourceMiddle {
	position: absolute;
	bottom: 25px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

#sourceRight {
	position: absolute;
	bottom: 0px;
	right: 0px;
}

.footerLink {
	position: absolute;
 	cursor: pointer;
    text-decoration: none;
    width: 100%;
    height: 100%;
    pointer-events: auto;
	z-index: 1000;
	background-color: #FFF;
    opacity: 0;
    filter: alpha(opacity=1);
 }


#infoLink {
	position: absolute;
	width: 257px;
	height: 25px;
	top: 15px;
}

#knowledgeLink {
	position: absolute;
	top: 44px;
	left: 56px;
	height: 12px;
	width: 121px;
}

#ULLink {
	position: absolute;
	top: 14px;
	height: 22px;
	width: 168px;
	right: 0px;
}

#dataLink {
	position: absolute;
	bottom: 6px;
	right: 0px;
	height: 14px;
	width: 25px;
}

