/* "exportable" CSS, i.e., whatever should be included in the downloaded games */


@font-face {
font-family: "Cinema";

src: url("Cinema.woff") format("woff"),
}

.img1 {
background-image: url("https://jonbardi.com/wp-content/uploads/2024/08/ast01.gif");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}

.img1 {
background-image: url("images/train.png");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 320px;
margin-bottom: 10px;
}
.platform {
background-image: url("images/platform.png");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 320px;
margin-bottom: 10px;
}
.attic {
background-image: url("images/attic.png");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 320px;
margin-bottom: 10px;
}
.bedroom {
background-image: url("images/bedroom.png");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 320px;
margin-bottom: 10px;
}
.cave2 {
background-image: url("images/cave2.png");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 320px;
margin-bottom: 10px;
}
.church {
background-image: url("images/church.png");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 320px;
margin-bottom: 10px;
}
.cottage {
background-image: url("images/cottage.png");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 320px;
margin-bottom: 10px;
}
.courtyard {
background-image: url("images/courtyard.png");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 320px;
margin-bottom: 10px;
}
.cove {
background-image: url("images/cove.png");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 320px;
margin-bottom: 10px;
}
.pub {
background-image: url("images/pub.png");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 320px;
margin-bottom: 10px;
}
.study {
background-image: url("images/study.png");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 320px;
margin-bottom: 10px;
}



@media only screen and (max-width: 600px) {
 #topbar {
font-size: 8px !important;
      }
#room_description > div.im_in {
    display: none !important;
}
}

#save_load > p > button {
display: none !important; }

/* background-color: #89B6C1; */

#scroller { /* cambio */
	background-color: #89B6C1 !important;
}

body {
	min-height: 100vh; /* cambio */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: #ffffff;
	color: #202103;
	font-family:  "Cinema", Courier New;
	font-size: 10pt;
	border-collapse: always;
}
div#game {
	position: relative;
	max-width: 80ch; /* cambio */
	float: right;  /* cambio */
	margin-left: 13vw; /* cambio */
	transition: opacity 1s /* cambio */
}
body.gs_export div#game {
	max-width: 70ch; /* cambio */
	float: none;
}

div#game p {
	margin: 0;
	text-indent: 1em; /* cambio */
	margin-bottom: 5px;  /* cambio */
}

div#title_container {
}

span.game_title {
	display: block;
	text-decoration: none; /* cambio */
	text-transform: uppercase;
	margin-top: 1em; /* cambio */
	text-indent: 0; /* cambio */
	font-weight: bold; /* cambio */
	font-size: 60px; /* cambio */
	font-family: 'New Amsterdam', serif; /* cambio */
	max-width: 15ch; /* cambio */
	margin-bottom: 30px;
}

@media (max-width: 767.98px) { /* cambio responsivo */

	
	span.game_title {
		font-size: 30px; /* cambio */
	}
	span.game_author {
		font-size: 10px; /* cambio */
		display: none;
	}
	div#game {
		margin-left: 0
	}

	button {
		font-size: 70% !important;
		padding: 4px 8px !important;
		margin: 2px 4px !important;
	}

	body.main-menu .actions button {
		font-size: 15px !important	;
		margin-bottom: 6px;
	} /* cambio */

	#room_description ul {
		padding-left: 20px;
	}

	div#options {
		padding-top: 35%;
	}


}

span.game_author {
	display: none;
	font-size: 30px; /* cambio */
}



ul {
	padding-top: 0px;
	margin-top: 0px;
	padding-bottom: 0px;
	margin-bottom: 0px;
	list-style-type: none;
	margin: 0;
}
ul.room_contents_in_scroller {
	display: inline-block;
	content: "- ";
	text-indent: -5px;
}
ul > li {
	text-indent: -5px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
div#room_description ul > li::before {
	content: "- ";
	text-indent: -5px;
}

img.thing_icon {
	height: 20px;
	width: 20px;
}

button {
	font-family: inherit;
	font-size: 12px;
	text-decoration: none;
	cursor: pointer;
	color: #ffffff;
	padding: 10px !important;
	border-radius: 0.25cm;
	border: 0px;
	margin: 5px 15px; /* cambio */
	white-space: nowrap;
	display: inline-block;
}
a#hints_button {
	background-color: #000000;
	font-family: monospace;
	font-size: inherit;
	text-decoration: none;
	cursor: pointer;
	color: #aaaaff;
	padding-left: 0.25cm;
	padding-right: 0.25cm; 
	padding: 0.1cm 0.5cm 0.1cm 0.5cm; 
	border-radius: 0.25cm;
	border: 0px;
	margin: 2px;
	white-space: nowrap;
	display: inline-block;
}
/*
button.examine {
	padding-left: 4px;
} */

/* div#wrapper {
	min-height: 200px;
} */

div#top_bar {
	background-color: #26601F;
	color: #ffffff;
	padding: 8px;
	 position: -webkit-sticky; /* Safari */
  	position: sticky;
 	 top: 0;
}
div#topbar_left {
	padding: 0px;
	display: inline-block;
}
div#topbar_right {
	float: right;
	text-align: right;
}
div#scroller {
	height: auto; /* cambio */

	background-color: #000066;
	color: #202103;
	/* border: 1px solid #000044; */
	padding: 5% 5% 2px 5%;
	padding-bottom: 14px; /* cambio */
}
div#scroller button {
	background-color: #000000;
	line-height: 1.33;
}
span.prompt {
	color: #ffffff;
}
span.prompt::before {
	content: "> ";
}
span.old_prompt {
	color: #273F0B;
}
span.old_message {
	color: #000000;
}
div#room_description_container {
	/* overflow: hidden */
	/*background-color: #000055; cambio */
	background-color: #89B6C1; /* cambio */
	line-height: 1.33;
	color: #202103;
	border-top: 1px solid rgb(151, 151, 151); /* cambio */
	padding-top: 14px; /* cambio */
}
div#room_description {
	overflow: stretch;
	height: auto; 
	padding: 8px 4% 2px 4%;
	line-height: 1.33;
	font-size: 85% /*cambio */
}

@media only screen and (min-width: 500px) {
	div#room_description div.im_in {
	/* line-height: 1.33; */
	display: none;
}
}


div#room_description div.exits {
}
div#room_description div.actions {
}
div#room_description div.can_see {
}

.can_see li {
	padding-left: 2em;		/* cambio */
	text-indent: -2em;		/* cambio */
}

div#conversation {
	padding: 4px 4% 4px 4%;
	display: none;
	background-color: #273F0B;
	line-height: 1.33;
	color: #ffffff;
}
div#conversation div.talking_to {
}
div#conversation div.conversation_options {
}
div#conversation div.end_conversation {
}
div#conversation button {
	padding-top: 1px;
	padding-bottom: 1px;
	background-color: #89B6C1;
	color: #202103;
}

@media (orientation: portrait) {
	span#moves_score {
		display: none;
	}
}

/*
@media (orientation: landscape){
	// two-column layout 
	
	div#title {
	}
	
	div#score: {
	}
	
	div#score:before {
		content: "Score: "
	}
	
	div#left-column {
		width: 50%;
		float: left;
		height: 95%;
	}
	div#scroller {
		height: 90%;
		padding: 5% 5% 5% 5%;
	}
	div#scroller:after { // makes bottom padding work in FF/IE 
		content: "";
		height: 1em;
		display: block;
	}
	
	div#right-column {
		width: 50%;
		float: left;
		height: 95%;
		overflow: auto;
	}	
	
} 
*/

/*
button.examine {
	margin-left: 0.05cm !important;
} */

div#room_description button {
	padding-top: 1px;
	padding-bottom: 1px;
	background-color: #000022;
}
div#room_description button.examine {
	background-color: #000011;
}
div#room_description button.examine {
	border-radius: 0;
	color: #ffffff;
	cursor: zoom-in;
}

button.examine {
	border-radius: 0;
	color: #ffffff;
	cursor: zoom-in;
}

div#room_description span.unavailable_exit {
	color: #000088;
	padding: 0.1cm 0.5cm 0.1cm 0.5cm;
	white-space: nowrap;
}
div#wait {
	/* overflow: stretch; */
	clear: both;
	/* border: 0px 1px 1px 1px solid #000044; */
	padding: 8px;
	background-color: #000088;
	line-spacing: 1.75;
	text-align: center;
}
div#wait button {
	background-color: #000033;
}

div#inventory_container {
	/* overflow: hidden */
	/* background-color: #000066; cambio */
	background-color: #5DA392; /* cambio */
}
div#inventory {
	overflow: stretch;
	height: auto;
	/* margin-left: 15%; */
	/* min-height: 10%; */
	/* border: 1px solid #000044; */
	padding: 2px 8px 2px 8px;
	
	line-height: 1.33;
}

div#holding_container {
	/* overflow: hidden */
	/* background-color: #000066; cambio */
	background-color: #89B6C1; /* cambio */
}
div#holding {
	overflow: stretch;
	height: auto;
	/* margin-left: 15%; */
	/* min-height: 10%; */
	/* border: 1px solid #000044; */
	padding: 8px;
	
	line-height: 1.33;
}
div#holding button {
	padding-top: 1px;
	padding-bottom: 1px;
	background-color: #000033;
}

div#inventory button {
	padding-top: 1px;
	padding-bottom: 1px;
	background-color: #26601F;
	padding-left: 0.5cm;
	padding-right: 0.5cm;
}
div#inventory button.examine {
	border-radius: 0px;
}
button:disabled {
	background-color: #111111;
	color: #333333;
	cursor: default;
}

div#save_load_container {
}
div#save_load {
	text-align: center;
	line-height: 1.33;
	font-size: 80%; /*cambio */
	opacity: .5; /*cambio */
	transition: .3s; /*cambio */
	padding-top: 10px; /*cambio */
	background: #739AA3;
}
div#save_load:hover { opacity: 1 } /*cambio */

div#save_load button {
	padding-top: 1px;
	padding-bottom: 1px;
	background-color: #00000014; /*cambio */
	font-weight: 300;
}



div#saved_games button {
	color: #cccccc;
	background-color: #333333;
}
div#saved_games button:first-of-type {
	color: #ffffff;
	background-color: #666666;
}

div.save_prompt {
	display: none;
	text-align: center;
	margin: 2px;
	padding: 8px;
	background-color: #111111;
	color: #ffffff;
	line-spacing: 1.5;
}
div.save_prompt button {
	color: #000000;
	padding-top: 1px;
	padding-bottom: 1px;
}
div.restart_prompt {
	display: none;
	text-align: center;
	margin: 2px;
	padding: 8px;
}
div.restart_prompt button {
	padding-top: 1px;
	padding-bottom: 1px;
	color: #000000;
}
input#save_name {
	width: 40%;
	font-family: inherit;
	font-size: inherit;
}
#saved_games button.confirm_delete {
	background-color: #cccccc;
	color: #000000;
	
}

div#options {
	/* min-height: 90%; cambio */
	/* top: 0px; cambio */
	position: absolute;
	bottom: 0px; /* cambio */
	left: 0px;
	background-image: url("img/6589k.png"); /* cambio */
	background-size: cover; /* cambio */
	background-repeat: no-repeat;
	color: #000000; /* cambio */
	border-bottom: 1px solid #888; /* cambio */
	
	width: 90%;
	padding: 5%;
	padding-top: 22%; /* cambio */
	line-height: 1; /* cambio */
	
	display: none;
	
}

div#options button {
	background-color: #000033;
}

div#credits {
	position: absolute;
	top: 0px;
	left: 0px;
	color: #2d2d2d; /* cambio */
	background-image: url("img/6589k.png"); /* cambio */
	background-position: bottom; /* cambio */
	background-repeat: no-repeat; /* cambio */

	width: 90%;
	min-height: 90%;
	padding: 5%;
	
	display: none;
	
	line-height: 1.33;
}

div#credits button {
	background-color: #000033;
}

#credits-contens {
  position: absolute;
  bottom: 10px;
  padding: 0 5% 0 0;
} /* cambio */

/* Botones personalizados */

button { font-weight: 300 } /* cambio */

.actions button, .can_see button, .exits button.direction {
	background: #26601F !important;
	font-weight: 300;
} /* cambio */
		
/* Menú principal */

body.main-menu .im_in ,
body.main-menu .exits ,
body.main-menu #holding_container ,
body.main-menu #savefix ,






} /* cambio */

body.main-menu .actions {
	font-size: 0;
color: #26601F !important;
} /* cambio */

body.main-menu .actions button {
	font-size: 16px;
} /* cambio */

body.main-menu #save_load { 
	opacity: 1;
	padding: 8px 4% 2px 4%;
 }

body.main-menu #save_load button {
	display: block;
} /* cambio */

body.main-menu #save_load button[data-localisation_key="save_button"] ,
body.main-menu #save_load button[data-localisation_key="restart_button"] {
	display: none
} /* cambio */

body #save_load button[data-localisation_key="restore_button"] ,
body button#credit-show { 
	display: none 
} /* cambio */

body.main-menu #save_load button[data-localisation_key="restore_button"] ,
body.main-menu button#credit-show { 
	display: block 
} /* cambio */

	

		
		</style>