/**font import**/

@font-face {
   font-family: 'futurist default';
   src: url('assets/ff_rg.ttf');
} 

@font-face {
	font-family: 'futurist italics';
	src: url('assets/ff_rg_it.ttf');
}

@font-face {
   font-family: 'futurist bold';
   src: url('assets/ff_bd.ttf');
} 

@font-face {
   font-family: 'forced square';
   src: url('assets/fsq.ttf');
} 


/**Selection color**/

::-moz-selection {
	background: #FCD358; color: #000; text-shadow: none;
}

::selection {
	background: #FCD358; color: #000; text-shadow: none;
}


/**Scrollbar**/

body::-webkit-scrollbar {
	width: 14px;
	height: 14px;
	background-color: #0F0F0F;
}
body::-moz-scrollbar {
	width: 14px;
	height: 14px;
	background-color: #0F0F0F;
}
/**Scrollbar handle**/
body::-webkit-scrollbar-thumb {
	background-size: 100% 100%;
	background-color: #aaaaaa;
}
body::-moz-scrollbar-thumb {
	background-size: 100% 100%;
	background-color: #aaaaaa;
}
/*Scrollbar corner*/
body::-webkit-scrollbar-corner {
	background-color: #aaaaaa;
	width: 14px;
	height: 14px;
}
body::-moz-scrollbar-corner {
	background-color: #aaaaaa;
	width: 14px;
	height: 14px;
}


/**General**/

html , body {
	padding: 0px;
	margin: 0px;
	font-family: 'futurist default';
	color: #aaaaaa;
	background-color:  #0F0F0F;
	opacity: 0.99999;
	height: 100%;/*
	overflow-x: hidden;*/
}

a {
	text-decoration: none;
	color: #000000;
}

ul {
    list-style: square url('assets/bulletpoint.png');
}

h1 {
	padding: 0px;
	margin: 0px;
}

h2 {
	padding: 0px;
	margin: 0px;
}
/**Title bar**/
#titlebar {
	font-family: 'forced square';
	background-color: #0F0F0F;
	height: 100px;
	width: 100%;
	-webkit-box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.75);
	box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.75);
	background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(12,12,12,1));/**Firefox special snowflake**/
	background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 8%, rgba(15,15,15,1) 20%, rgba(15,15,15,1) 100%);
	position: relative;
	z-index: 99;
}

#titlelink {
	width: 100%;
	padding: 0px;
	margin: 0px;
	height: 100px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1000;
}

#titleimage {
	background-image: url('assets/yellow.png');
	width: 152px;
	height: 100px;
	position: relative;
	top: 0px;
	left: -152px;
	z-index: 101;
	-webkit-transition: left 700ms; /* Safari */
	-moz-transition: left 700ms; /* Mozilla */
    transition: left 700ms;
}

#titlelink:hover > #titleimage {
	left: 0px;
}

#title {
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: 20px;
	left: 20px;
	background-image: url('assets/title1.png');
	width: 490px;
	height: 60px;
	-webkit-transition: background-image 700ms, left 700ms; /* Safari */
	-moz-transition: background-image 700ms, left 700ms; /* Mozilla */
    transition: background-image 700ms, left 700ms;
	z-index: 101;
}

#titlelink:hover  > #title {
	background-image: url('assets/title2.png');
	left: 172px;
}

#titlebg { /*Els comentaris aquí són com funcionava abans (amb opacity); ara canviat ja que feia coses rares amb els colors de la pàgina*/
	background-image: url('assets/title4.png');/* url('assets/title3.png');*/
	background-position: 172px 0px;
	opacity: 1 /*0*/;
	width: 100%;
	height: 60px;
	position: absolute;
	top: 20px;
	left: 0px;
	z-index: 100;/*
	-webkit-transition: opacity 700ms; /* Safari *//*
	-moz-transition: opacity 700ms; /* Mozilla *//*
	transition: opacity 700ms;*/
	-webkit-transition: background-image 700ms; /* Safari */
	-moz-transition: background-image 700ms; /* Mozilla */
	transition: background-image 700ms;
}

#titlelink:hover  > #titlebg {
	opacity: 1;
	background-image: url('assets/title3.png');
}
/**End title bar - start sidebar**/
#sidebar {
	padding: 0px;
	margin: 0px;
	width: 200px;
	min-height: calc(100% - 100px);
	background-color: #0F0F0F;
	position: absolute;
	top: 100px;
	bottom: 0px;
}

#sidelinks {
	padding: 0px;
	margin: 0px;
	width: 200px;
	-webkit-box-shadow: inset 0px 0px 20px 5px rgba(0,0,0,0.6);
	-moz-box-shadow: inset 0px 0px 20px 5px rgba(0,0,0,0.6);
	box-shadow: inset 0px 0px 20px 5px rgba(0,0,0,0.6);
	background-image: url('assets/background.png');
}

.sidelink {
	width: 200px;
	height: 40px;
	margin: 0px;
	padding: 0px;
	position: relative;
	left: 0px;
	display: block;
	background-image: url('assets/linkcover.png');
}

.sidelink p {
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: 10px;
	right: 20px;
	color: #AAAAAA;
}

.subcover {
	background-image: url('assets/subsection.png');
	position: absolute;
	top: 0px;
	left: -15px;
	width: 55px;
	height: 40px;
	pointer-events: none;
	-webkit-transition: left 700ms, background-image 700ms; /* Safari */
	-moz-transition: left 700ms, background-image 700ms; /* Mozilla */
	transition: left 700ms, background-image 700ms;
	z-index: 4;
}

.sidelink:hover > .subcover {
	left: 0px;
	background-image: url('assets/subsectionw.png');
}

.linkcover {
	width: 200px;
	height: 40px;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: #0F0F0F;
	-webkit-transition: left 700ms, background-image 700ms; /* Safari */
	-moz-transition: left 700ms, background-image 700ms; /* Mozilla */
	transition: left 700ms, background-image 700ms;
	background-image: url('assets/smallyellow.png');
	background-repeat: no-repeat;
	z-index: 2;
}

.sidelink:hover > .linkcover {
	left: -170px;
}

.subside:hover ~ .sidepage .linkcover {
	background-image: url('assets/smallgrey.png');
}

.linkcover p {
	margin: 0px;
	padding: 0px;
	text-align: right;
	position: absolute;
	top: 10px;
	right: 20px;
	color: #AAAAAA;
	-webkit-transition: color 300ms; /* Safari */
	-moz-transition: color 300ms; /* Mozilla */
	transition: color 300ms;
	text-shadow: 0px 0px 0px #000000;
	z-index: 3;
}

.sidelink:hover > .linkcover p {
	color: #EDEDED;
}

.linkshadow {
	margin: 0px;
	padding: 0px;
	width: 200px;
	height: 40px;
	position: absolute;
	top: 0px;
	left: -10px;
	-webkit-box-shadow: 10px 0px 20px 5px rgba(0,0,0,0.85);
	-moz-box-shadow: 10px 0px 20px 5px rgba(0,0,0,0.85);
	box-shadow: 10px 0px 20px 5px rgba(0,0,0,0.85);
	-webkit-transition: left 700ms; /* Safari */
	-moz-transition: left 700ms; /* Mozilla */
	transition: left 700ms;
	z-index: 1;
}

.sidelink:hover > .linkshadow {
	left: -180px;
}

#copyright {
	margin: 0px;
	padding: 0px;
	padding-top: 40px;
	text-align: center;
	width: 200px;
	background-color: #0F0F0F;
	z-index: 10;
	position: relative;
	top: 0px;
	left: 0px;
}
	
#copyright p {
	padding: 0px;
	margin: 0px;
	color: #444444;
}

#donationbutton {
	margin: 0px;
	padding: 0px;
	padding-top: 20px;
	text-align: center;
	width: 200px;
	background-color: #0F0F0F;
	z-index: 10;
	position: relative;
	top: 0px;
	left: 0px;
}

#paypalhover {
	opacity: 0;
	background-image: url('assets/paypal_hover.png');
	-webkit-transition: opacity 300ms; /* Safari */
	-moz-transition: opacity 300ms; /* Mozilla */
	transition: opacity 300ms;
	width: 33px;
	height: 39px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: 20px;
	left: 81px;
	z-index: 11;
	pointer-events: none;
}

#donationbutton:hover > #paypalhover{
	opacity: 1;
}

#donatetext {
	color: #444444;
	line-height: 20px;
	margin: 0px;
}
/**End sidebar**/
#main {
	padding: 30px;
	margin: 0px;
	background-color:  #191919;
	position: absolute;
	top: 100px;
	left: 200px;
	min-width: calc(100% - 260px);
	min-height: calc(100% - 160px);
	z-index: 11;
	-webkit-box-shadow: -6px -6px 10px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: -6px -6px 10px 0px rgba(0,0,0,0.75);
	box-shadow: -6px -6px 10px 0px rgba(0,0,0,0.75);
}

#main a {
	color: #CEB752;
}

.pnomargin p {
	margin: 0px;
}

.percent {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
}


/*AVENTURA*/

#mapa {
	position: relative;
}

#mapa.mapatrinea {
	border: 2px solid #aaaaaa;
	width: 1452px;
	height: 1152px;
}

#mapa.mapaikalos {
	border: 2px solid #aaaaaa;
	width: 320px;
	height: 324px;
}

#mapa a {
	-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,1);
	-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,1);
	box-shadow: 0px 0px 3px 0px rgba(0,0,0,1);
}

#mapa a span {
    display: none;
	pointer-events: none;
}

#mapa a:hover span, a:focus span {
    display: block;
    position: absolute;
    left: 32px;
    padding: 5px;
	background-color:  #191919;
	-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,1);
	-moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,1);
	box-shadow: 0px 0px 10px 2px rgba(0,0,0,1);
	color: #aaaaaa;
	z-index: 10000;
	min-width: 200px;
	max-width: 400px;
}

/*Marker classes*/

.brownlink {
	background-color: #652700;
	position: absolute;
	display: block;
}

.greenlink {
	background-color: #286B28;
	position: absolute;
	display: block;
}

.bluelink {
	background-color: #3F5C77;
	position: absolute;
	display: block;
}

.pinklink {
	background-color: #87814F;
	position: absolute;
	display: block;
}

.whitelink {
	background-color: #FFFFFF;
	-webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,1) !important;
	-moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,1) !important;
	box-shadow: 0px 0px 2px 1px rgba(0,0,0,1) !important;
	position: absolute;
	display: block;
}

/*markers llegenda*/

.markerllegenda {
	-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,1) !important;
	-moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,1) !important;
	box-shadow: 0px 0px 10px 2px rgba(0,0,0,1) !important;
	position: absolute;
	display: block;
	width: 17px;
	padding-left: 3px;
	height: 20px;/*
	left: 1416px;*/
	right: 16px;
	cursor: default;
	color: transparent;
	-webkit-transition: width 1000ms, color 200ms; /* Safari */
	-moz-transition: width 1000ms, color 200ms; /* Mozilla */
    transition: width 1000ms, color 200ms;
}

.markerllegenda:hover {
	width: 160px;
	color: #101010;
	-webkit-transition: width 700ms, color 300ms ease-in 200ms; /* Safari */ /*Això és important perquè vagi més ràpid al desfer hover, no treure! Va invertit; a :hover és les propietats de la transition mentre fas hover, sense :hover és al deixar de fer hover.*/
	-moz-transition: width 700ms, color 300ms ease-in 200ms; /* Mozilla */
    transition: width 700ms, color 300ms ease-in 200ms;
}

#marker01 {
	top: 16px;
}

#marker02 {
	top: 52px;
}

#marker03 {
	top: 88px;
}

#marker04 {
	top: 124px;
}

/*markers trínea*/

.mapatrinea #marker1 {
	width: 20px;
	height: 20px;
	left: 1200px;
	top: 588px;
}

.mapatrinea #marker2 {
	width: 16px;
	height: 16px;
	left: 1240px;
	top: 560px;
}

.mapatrinea #marker3 {
	width: 16px;
	height: 16px;
	left: 1240px;
	top: 652px;
}

.mapatrinea #marker4 {
	width: 12px;
	height: 12px;
	left: 1184px;
	top: 700px;
}

.mapatrinea #marker5 {
	width: 8px;
	height: 8px;
	left: 1248px;
	top: 488px;
}

.mapatrinea #marker6 {
	width: 16px;
	height: 16px;
	left: 1324px;
	top: 784px;
}

.mapatrinea #marker7 {
	width: 8px;
	height: 8px;
	left: 1224px;
	top: 640px;
}

.mapatrinea #marker8 {
	width: 24px;
	height: 24px;
	left: 1268px;
	top: 708px;
}

.mapatrinea #marker9 {
	width: 8px;
	height: 8px;
	left: 568px;
	top: 592px;
}

.mapatrinea #marker10 {
	width: 8px;
	height: 8px;
	left: 540px;
	top: 580px;
}

.mapatrinea #marker11 {
	width: 8px;
	height: 8px;
	left: 536px;
	top: 588px;
}

.mapatrinea #marker12 {
	width: 12px;
	height: 12px;
	left: 492px;
	top: 556px;
}

.mapatrinea #marker13 {
	width: 12px;
	height: 12px;
	left: 472px;
	top: 564px;
}

.mapatrinea #marker14 {
	width: 8px;
	height: 8px;
	left: 448px;
	top: 516px;
}

.mapatrinea #marker15 {
	width: 8px;
	height: 8px;
	left: 448px;
	top: 564px;
}

.mapatrinea #marker16 {
	width: 8px;
	height: 8px;
	left: 232px;
	top: 776px;
}

.mapatrinea #marker17 {
	width: 8px;
	height: 8px;
	left: 400px;
	top: 668px;
}

.mapatrinea #marker18 {
	width: 8px;
	height: 8px;
	left: 324px;
	top: 668px;
}

.mapatrinea #marker19 {
	width: 8px;
	height: 8px;
	left: 152px;
	top: 896px;
}

.mapatrinea #marker20 {
	width: 16px;
	height: 16px;
	left: 148px;
	top: 936px;
}

.mapatrinea #marker21 {
	width: 8px;
	height: 8px;
	left: 364px;
	top: 616px;
}

.mapatrinea #marker22 {
	width: 8px;
	height: 8px;
	left: 392px;
	top: 484px;
}

.mapatrinea #marker23 {
	width: 8px;
	height: 8px;
	left: 288px;
	top: 640px;
}

.mapatrinea #marker24 {
	width: 8px;
	height: 8px;
	left: 244px;
	top: 604px;
}

.mapatrinea #marker25 {
	width: 12px;
	height: 12px;
	left: 196px;
	top: 496px;
}

.mapatrinea #marker26 {
	width: 8px;
	height: 8px;
	left: 204px;
	top: 456px;
}

.mapatrinea #marker27 {
	width: 8px;
	height: 8px;
	left: 480px;
	top: 656px;
}

.mapatrinea #marker28 {
	width: 12px;
	height: 12px;
	left: 240px;
	top: 428px;
}

.mapatrinea #marker29 {
	width: 8px;
	height: 8px;
	left: 248px;
	top: 360px;
}

.mapatrinea #marker30 {
	width: 12px;
	height: 12px;
	left: 288px;
	top: 360px;
}

.mapatrinea #marker31 {
	width: 16px;
	height: 16px;
	left: 256px;
	top: 316px;
}

.mapatrinea #marker32 {
	width: 8px;
	height: 8px;
	left: 164px;
	top: 236px;
}

.mapatrinea #marker33 {
	width: 8px;
	height: 8px;
	left: 104px;
	top: 132px;
}

.mapatrinea #marker34 {
	width: 8px;
	height: 8px;
	left: 160px;
	top: 140px;
}

.mapatrinea #marker35 {
	width: 8px;
	height: 8px;
	left: 324px;
	top: 232px;
}

.mapatrinea #marker36 {
	width: 8px;
	height: 8px;
	left: 408px;
	top: 180px;
}

.mapatrinea #marker37 {
	width: 8px;
	height: 8px;
	left: 512px;
	top: 164px;
}

.mapatrinea #marker38 {
	width: 8px;
	height: 8px;
	left: 348px;
	top: 180px;
}

.mapatrinea #marker39 {
	width: 8px;
	height: 8px;
	left: 524px;
	top: 488px;
}

.mapatrinea #marker40 {
	width: 8px;
	height: 8px;
	left: 556px;
	top: 420px;
}

.mapatrinea #marker41 {
	width: 8px;
	height: 8px;
	left: 588px;
	top: 356px;
}

.mapatrinea #marker42 {
	width: 8px;
	height: 8px;
	left: 620px;
	top: 256px;
}

.mapatrinea #marker43 {
	width: 8px;
	height: 8px;
	left: 556px;
	top: 224px;
}

.mapatrinea #marker44 {
	width: 8px;
	height: 8px;
	left: 552px;
	top: 232px;
}

.mapatrinea #marker45 {
	width: 8px;
	height: 8px;
	left: 664px;
	top: 224px;
}

.mapatrinea #marker46 {
	width: 24px;
	height: 24px;
	left: 624px;
	top: 152px;
}

.mapatrinea #marker47 {
	width: 8px;
	height: 8px;
	left: 636px;
	top: 76px;
}

.mapatrinea #marker48 {
	width: 8px;
	height: 8px;
	left: 664px;
	top: 84px;
}

.mapatrinea #marker49 {
	width: 12px;
	height: 12px;
	left: 84px;
	top: 980px;
}

.mapatrinea #whitemarker1 {
	width: 8px;
	height: 8px;
	left: 132px;
	top: -4px;
}

/*markers ikalos*/

.mapaikalos #marker1 {
	width: 8px;
	height: 8px;
	left: 212px;
	top: 276px;
}

.mapaikalos #marker2 {
	width: 8px;
	height: 8px;
	left: 100px;
	top: 136px;
}

.mapaikalos #marker3 {
	width: 16px;
	height: 16px;
	left: 112px;
	top: 140px;
}

.mapaikalos #whitemarker1 {
	width: 8px;
	height: 8px;
	left: 224px;
	top: 320px;
}

/*Fi markers*/





#mapaglobal {
	position: relative;
}

.minimapa {
	opacity: 0.4;
}

.minimapa:hover {
	opacity: 1;
	-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.5);
}


.minimapa a span {
    display: none;
	pointer-events: none;
}

.minimapa a:hover span, a:focus span {
    display: block;
    position: absolute;
    left: 30px;
	top: 30px;
    padding: 5px;
	background-color:  #191919;
	-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,1);
	-moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,1);
	box-shadow: 0px 0px 10px 2px rgba(0,0,0,1);
	color: #aaaaaa;
	z-index: 10000;
	min-width: 100px;
	max-width: 200px;
}

#miniikalos {
	position: absolute;
	display: block;
	width: 80px;
	height: 81px;
	left: 0px;
	top: 0px;
}

#miniikalos a {
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
	width: 80px;
	height: 81px;
}

#minitrinea {
	position: absolute;
	display: block;
	width: 363px;
	height: 288px;
	left: 23px;
	top: 81px;
}

#minitrinea a {
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
	width: 363px;
	height: 288px;
}