CYOAwesome.css

body {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	background:#886644;
	background-image:url(img/paper.png);
	overflow:hidden;
}

br { clear:both; }

div, textarea, input, a {
	font-family: 'Special Elite', Serif;
	font-size:22px;
	line-height:28px;
	color:#333333;
	padding:32px; 
}

input { 
	font-family: 'Special Elite', Serif;
	border:none;
	color:#bbbbbb;
	padding:0px;
	padding-right:8px; padding-left:8px;
	background:#555555;
}

p {
	padding:0;
	margin:0;
	/*
	margin-bottom:24px;
	margin-top:24px;
	margin-right:32px; 
	*/
}

a {
	text-decoration:none;
	color:#07889B;
	cursor:pointer;
	padding:0;
}

a:hover {
	color:#E37222;
}
	
img {
	display:block; 
	margin:auto;
	margin-bottom:32px; 
	margin-top:32px; 
	padding:0;
	outline:none;
	border:none;
	max-width:100%;
	border-radius:2px;
	/* to avoid reflow flickering when animating the html */
	min-height:256px;
}

#game { 
	position:absolute;
	top:0px; right:0px;
	width:100%;
	height:100%;
	display:block;
	overflow-x: hidden;
	overflow-y: hidden; /* auto */
	margin:0; padding:0;
}

#story_so_far { 
	margin:auto; width:80%; max-width:960px; padding:0; 
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */      

	background:rgba(0,255,0,0.2);
 }

#current_scene {
	margin:auto; width:80%; max-width:960px; padding:0; 
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */      

	/* multicolumn is messy and balanced but liquid 
	margin-top:8%;
	margin-left:15%; 
	column-count: 2;
	column-gap: 64px;
	column-fill: auto;

    /*
    background:rgba(255,255,255,0.2);
	*/

}


#game_source, #settings_gui, #help_gui { 
	display:none;
	position:absolute;
	top:64px; left:50%; right:0px; bottom:0px;
	background:#333333; color:#bbbbbb; 
	overflow-x: hidden;
	overflow-y: scroll;
	white-space:pre-wrap;
	width:50%;
	border:none;
	outline:none;
	margin:0;
	cursor:text;
	 -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
#settings_gui, #help_gui
{
	display:none;
}

#game_gui {
	display:none;
	position:fixed;
	top:0px;
	left:50%;
	right:0px;
	background:#888888;
}
#gui_TL {
	position:fixed;
	top:0px;
	left:0px;
	color:#E37222;
	padding:32px;
}
#gui_TR {
	position:fixed;
	top:0px;
	right:50%;
	color:#E37222;
	padding:32px;
	padding-right:41px; /* scroll bars are 17px */
}

#editor_gui {
	display:none;
	position:fixed;
	top:0px;
	left:50%;
	right:0px;
	background:#222222;
}
#editor_gui_TL  {
	position:fixed;
	top:0px;
	left:50%;
	color:#E37222;
	padding:32px;
}

#editor_gui_TR  {
	position:fixed;
	top:0px;
	right:0px;
	width:auto;
	color:#E37222;
	padding:32px;
	padding-right:41px; /* scroll bars are 17px */
}

@keyframes shakes {
	0%, 100% { transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% { transform: translateX(-2px);}
	20%, 40%, 60%, 80% { transform: translateX(2px);}
}

.BOOM { 
	text-shadow: 0 0 20px rgb(254,252,201) , 10px -10px 30px rgb(254,236,133) , -20px -20px 40px rgb(255,174,52) , 20px -40px 50px rgb(236,118,12) , -20px -60px 60px rgb(205,70,6) , 0 -80px 70px rgb(151,55,22) , 10px -90px 80px rgb(69,27,14); 
	animation: shakes 2s infinite;
	color:#FF4422;
	}

.dice1,
.dice2,
.dice3,
.dice4,
.dice5,
.dice6
 { display:inline-block; height:32px; width:32px; padding:0; margin:0; border:0; outline:0; margin-right:4px; background-image:url(img/dice.png); }
.dice2 { background-position:-32px 0px; }
.dice6 { background-position:-48px 0px; }
.dice6 { background-position:-72px 0px; }
.dice6 { background-position:-96px 0px; }
.dice6 { background-position:-120px 0px; }

.menubutton { margin-left:16px; } 

.dialogleft, .dialogright { display:inline-block; color:#226622; text-align:left; padding:24px; background:white; border-radius:8px; }
.dialogright { color:#333388; text-align:right; float:right; clear:both; overflow:auto; margin-right:0px; }
.dialogright::after { background:red; height:16px; }

#current_choices a, .choice { display:inline-block; margin:0; padding:0; text-align:center; width:50%; padding-top:24px; padding-bottom:24px; text-decoration:none; color:red; }
#current_choices a:hover, .choice:hover { color:blue; background:rgba(255,255,0,0.5); }

#current_choices { 
	display:none;
	margin:0px; padding:0px; 
	background:rgba(255,255,0,0.2);
	display:block;
	width:100%;
	max-width:960px;
	margin:auto;
}

#choice_container {
	position:fixed;
	bottom:0px;
	width:100%;
	padding:0; margin:0;
}

#hudleft { position:absolute; top:0px; left:0px; width:20%; padding:0; margin:0; }
#hudright { position:absolute; top:0px; right:0px; width:20%; padding:0; margin:0; }


#map_page { 
	display:block;
	position:absolute;
	top:24px;
	left:13%;
	right:50%;
	bottom:48px;
	padding:0px;
}
.hud { position:absolute; display:block; height:auto; margin:0; padding:0; }

#stats_bg { top:0px; left:0px; width:100%; height:50%; 
	background-image:url(img/stats.png); background-size:100% 100%; background-repeat:no-repeat; }
#stats_div { top:0; left:0; width:100%; height:100%; }
#TURNS { position:absolute; top:68%; left:5%; }
#STR { position:absolute; top:63%; left:69%; width:10%; text-align:center; }
#AGI { position:absolute; top:76%; left:69%; width:10%; text-align:center; }
#WIS { position:absolute; top:88%; left:69%; width:10%; text-align:center; }

#inventory_bg { 
	top:50%; left:0px; width:100%; height:50%; 
	background-image:url(img/items.png); background-size:100% 100%; background-repeat:no-repeat; }
#inventory_div { top:25%; padding-left:15%; padding-right:15%; }

#map_div { display:none; background-image:url(img/map.jpg); height:33%; }
#quests_div { display:block; }


#swingmeter 	{ 
display:none;
user-select: none;
position:absolute; bottom:8%; left:11%; 
width:75%; height:48px;
border:0; margin:0; padding:0;
}
#swingtext	 	{ 
position:absolute; top:0px; left:0px; padding:0px; margin:0;
width:100%; height:24px; background:rgba(255,255,255,0.25);
}
#swingtoolow	{ 
position:absolute; bottom:0px; left:0px;  padding:0; margin:0;
width:50%; height:24px; background:brown;
}
#swinggoodlow	{ 
position:absolute; bottom:0px; left:50%;  padding:0; margin:0;
width:20%; height:24px; background:orange;
}
#swingsweetlow	{
position:absolute; bottom:0px; left:70%;  padding:0; margin:0;
width:4%; height:24px; background:green;
}
#swingsweetest  {
position:absolute; bottom:0px; left:74%;  padding:0; margin:0;
width:2%; height:24px; background:#00EE00;
}
#swingsweethigh	{ 
position:absolute; bottom:0px; left:76%; padding:0; margin:0;
width:4%; height:24px; background:green;
}
#swinggoodhigh	{ 
position:absolute; bottom:0px; left:80%; padding:0; margin:0;
width:20%; height:24px; background:orange;
}
#swingpower 	{ 
position:absolute; bottom:0px; left:0px; padding:0; margin:0;
width:1px; height:24px; background:white; border-right:1px solid black; 
opacity:0.4;
}

#face_left {
	position:absolute;
	display:block;
	margin:0; padding:0;
	outline:none;
	left:0px;
	bottom:0px;
	z-index:-1;
	width:256px;
	min-width:20%; 
	max-width:50%; 
}

#face_right {
	position:absolute;
	display:block;
	margin:0; padding:0;
	outline:none;
	right:0px;
	bottom:0px;
	z-index:-1;
	width:256px;
	min-width:20%; 
	max-width:50%; 
}

#face_right img, #face_left img { width:100%; margin:0; padding:0; border:0; outline:0; }

/* NPC faces in a VN style gui */
.dialog_image { position:fixed; bottom:0px; max-width:15%; }

/* leave room for a menu at the bottom */
.leave_room_for_menu { max-height:80%; overflow:auto; }