/* Simple style sheet for displaying on handheld devices */
body 
{
  width:80%;
  text-align: justify;
  background-color: #230023;  
  background-image: "bgrnd.gif";
  font-family: "Arial, Gill Sans MT", "Gill Sans", GillSans,  Helvetica, sans-serif;
  padding:2px;
  margin:4px 4px 4px 4x;
  color: #a9cdff;
  }
  
body.splashscreen
{
	text-align: center;
	margin: 20px;
	padding: 120px;
}

body.chooser
{
	background-image:none;
	margin: 0px;
	padding:0px;
}

.collapsable
{
	overflow:hidden;
}

.versionlist
{

}

.howto_column
{
	width: 27vw;
	display: inline-block;
}

.howto_column ul li span:nth-of-type(1)
{
	text-transform: capitalize;
}

.howto_column ul li span:nth-of-type(2)
{
	text-size-adjust: smaller;
	font-style:italic;
	font-size:0.8rem;
	opacity:70%;
}

.column_spacer
{
	width:1rem;
	display: contents;
	height: 20vh;
}

.textcontainer
{
	margin-top:0.5rem;
	margin-bottom:0.5rem;
	height: fit-content;
}

.left
{
	float:left;
}

.right
{
	float:right;
}

.versionlist ul
{
	text-indent: 0.1rem;
}

#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

chooser
{
	float:left;
}

.dos_controls
{
	position: absolute;
    background-color: #0e1c25;
    border-radius: 0.2rem;
    bottom: 5rem;
    line-height: 1.5rem;
    padding: 0.5rem;
}

.cw_info_panel
{
	position: absolute;
	background-color: #2e4656bf;
	border-radius: 0.2rem;
	border-color: #7c9696;
	border-width: 1px;
	border-style: solid;
	border-radius: 0.5rem;
	filter: drop-shadow(2px 4px 6px black);
	line-height: 1.5rem;
	padding: 0.4rem;
	
}

.cw_right_bar
{
	top:2rem;
	width:30vw;
	transition:right, 1s;
	right:0rem;
}

.right_bar_reveal_pos
{
	right:-30vw;
	transition:right, 1s;
}

.off_to_right
{
	right: calc(-30vw + 1rem);
	transition:right, 1s;
}

a
{
	color: #6176cd;
}

a:hover
{
	color: #8c9cdc;
	text-shadow:5 5 #392455;
	transition:0.5s;
}

.cw_info_panel a
{
	color: #a6b3f1;
	text-shadow: 0px 0px 3px #4786bb;
	transition:0.5s;
}

.cw_info_panel a:hover
{
	color: #d7deff;
	text-shadow: 0px 0px 15px #61b7ff;
	transition:0.5s;
}

.cw_top_bar
{
	top: 0rem;
	
	left: 20%;
	opacity: 99%;
	overflow: hidden;
	width: 60%;
	/* filter: blur(5px); */
	filter: drop-shadow(2px 4px 6px black);
	margin-left:auto;
	margin-right:auto;
}

.sidebartext
{
	padding:1rem;
	height: fit-content;
}

.cw_info_panel h3
{
	padding: 0.2rem;margin: 0px;
}

.cw_info_panel p 
{
	margin: 0.4rem;
}

.cw_info_panel h3 .caption
{
	font-size:small;
	font-style:italic
}

.buttonBar
{
    float:right;
}

.hcentre
{
	position:relative;
	left:calc(50% - 8rem);
	width:16rem;
}

.textIcon
{
	cursor:pointer;
}

.startHeight
{
	height:75vh;
	transition:height 1s;
}

.scrollable
{
	overflow-y:auto;
}

.rolledDown
{
	height: 0rem;
	padding: 0rem;
	transition:height 1s;
}

#jsdos
{
    width: 640px;
    height: 480px;
    position: absolute;
    top: calc(50% - 240px);
}

.fullscreen_dos_body
{
	width:100vw;
	height:100vh;
	overflow:hidden;
}

.jsdos_1024x768
{
	width: 1024px !important;
    height: 768px !important;	    
    top: calc(2rem + 50% - 384px) !important;
}

.jsdos_800x600
{
	width: 800px !important;
    height: 600px !important;	    
    top: calc(50% - 300px) !important;
}

.jsdos_640x480
{
	width: 640px;
    height: 480px;	    
     top: calc(50% - 240px);
}
.dosbox-container
{
	height:100vh;
	width:100vw;
	overflow:hidden;
}

table.chooser
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0x 0px 0px;
	border-collapse:collapse;
	table-layout:fixed;
	text-align:left;
	vertical-align:top;
	line-height:0px;
	border-style:none;
	height:0px;
	width:104px;
	clear:both;	
}	

table.chooser td img
{
	border:none;
	margin: 0px 0px 0px 0px;
	padding: 0px 0x 0px 0px;
	width:104px;	
	height:45px;
}

table.chooser th img
{	
	margin: 0px 0px 0px 0px;
	padding: 0px 0x 0px 0px;
	border:none;
	width:104px;
	height:178px;
}

table.chooser tr
{

}

table.chooser td
{	
	
	
	overflow:hidden;
	
}

ul.disklist
{
	/*font-family: "Arial Rounded MT Bold" , "Arial, Gill Sans MT" , "Gill Sans" , GillSans, Helvetica, sans-serif;*/
	overflow: hidden;	
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style: none;
	list-style-type:none;
	list-style-position:inside;	
	float: left;
	clear: left;
	list-style-image:url(img/download.png);
}
ul.disklist li
{
	font-size:smaller;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

ul.disklist ul 
{
	list-style-image: none;
}

ul.disklist li a:hover
{
	color:#a9cdff;
}

ul.disklist li, ul.disklist li a
{
	
	text-decoration: none;
	text-indent: 26px;
	text-align: left;
	vertical-align: middle;
	line-height: 30px;
	
}

img.harley
{
	float:right;
}
h1, h3 {color: #a9cdff;
		background-color: #556688;		
		border-width: thin;
		border-color: #112266;
		border-style: none;
		}
p {border: 5 5 5 5; color: #a9cdff}
p:first-letter
{
	font-weight:bold;
	text-indent:1em;
}

p + p {text-indent: 0.5em}