@charset "UTF-8";

:root
{
	--op-background-color:              rgba(   0,   0,   0, 0.75 );
	--op-border-color:                  rgb(  128, 192, 255 );
	--op-text-color:                    rgb(  255, 255, 255 );

	--op-headline-text-color:           rgb(  128, 192, 255 );

	--op-button-background-color:       rgb(   32,  48,  64 );
	--op-button-background-color-hover: rgb(   64,  96, 128 );

	--op-leftbar-width:                 218px;
}

html
{
	cursor: url( "../images/cursor_hand.png" ), auto;

	overflow: scroll;
	min-height: 100%;
}

body
{
	background-image: url( "../images/background.png" );
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;

	font-family: monospace;
	font-size: 1rem;

	margin: 0px;
	padding: 0px;

	user-select: none;
}

hr
{
	width: calc( 100% - 16px );

	border: 2px solid var( --op-border-color );
	margin: 0px;
	margin-left: 8px;
}

img.op-logo
{
	width: var( --op-leftbar-width );
}

img.op-halign
{
	margin-left: auto;
	margin-right: auto;
	display: block;
}

img.op-valign
{
	margin-top: auto;
	margin-bottom: auto;
	display: block;
}

img.op-noborder
{
	border:				none;
	border-collapse:	collapse;
}

img.op-screenshots
{
	width: 50%;

	margin: 8px;

	border: 4px solid var( --op-border-color );
}

pre
{
	margin: 0px;
}

div.op-center
{
	width: fit-content;
	height: fit-content;
	margin-left: auto;
	margin-right: auto;
}

div.op-notice
{
	background: rgb( 255, 0, 0 );
	width: fit-content;
	height: fit-content;

	font-size: 14px;
	text-align: center;
	color: var( --op-text-color );

	padding: 24px;

	border: 4px solid var( --op-border-color );
}

div.op-code
{
	background: rgb( 0, 0, 0 );
	width: fit-content;
	height: fit-content;

	font-family: monospace;

	padding: 8px;

	border: 4px solid var( --op-border-color );

	user-select: all;
}

div.op-leftbar
{
	position: relative;
	float: left;
	width: var( --op-leftbar-width );

	margin: 8px;
	padding: 0px;
}

div.op-content
{
	position: absolute;
	width: calc( 100% - var( --op-leftbar-width ) - 8px );
	height: 100%;

	margin-left: calc( var( --op-leftbar-width ) + 8px );
}

div.op-topbar
{
	background: var( --op-background-color );

	font-size: 32px;
	font-weight: 900;
	text-align: center;
	text-transform: uppercase;
	color: var( --op-headline-text-color );

	margin: 8px;
	padding: 4px;

	border: 4px solid var( --op-border-color );

}

div.op-main
{
	background: var( --op-background-color );

	margin: 8px;
	padding: 4px;

	border: 4px solid var( --op-border-color );
}

div.op-headline
{
	font-size: 24px;
	color: var( --op-headline-text-color );

	padding: 8px;
}

div.op-headline img
{
	padding: 8px;

	-webkit-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
}

div.op-headline:hover img
{
	padding-left: 32px;
}

div.op-news
{
	font-size: 14px;
	color: var( --op-text-color );

	padding: 4px;
	padding-left: 32px;
}

div.op-about
{
	font-size: 14px;
	color: var( --op-text-color );

	padding: 4px;
	padding-left: 32px;
}

div.op-file_formats
{
	font-size: 14px;
	color: var( --op-text-color );

	padding: 0px;
	padding-left: 32px;

	max-height: 0;
	overflow: hidden;

	-webkit-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
}

div.op-screenshots
{
	text-align: center;
}

button.op-button
{
	cursor: url( "../images/cursor_hand.png" ), auto;

	background: var( --op-button-background-color );

	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
	color: var( --op-text-color );

	outline: none;
	display: block;
	cursor: pointer;
	width: fit-content;
	height: 100%;

	margin: 0px;
	padding: 0px;

	border: 4px solid var( --op-border-color );
/*	border-image: url( "../images/border.png" ) 4 4 4 4 stretch stretch;*/

	-webkit-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
}

button.op-button:hover
{
	background: var( --op-button-background-color-hover );

/*	border-image: url( "../images/border-hover.png" ) 4 4 4 4 stretch stretch;*/
}

button.op-button-leftbar
{
	cursor: url( "../images/cursor_hand.png" ), auto;

	text-align: left;

	width: var( --op-leftbar-width );
	height: 30px;

	margin-top: 4px;
	margin-bottom: 4px;
	padding-left: 16px;
}

button.op-button-leftbar:hover
{
	padding-left: 48px;
}

span.op-comment
{
	color: rgb( 0, 255, 0 );
}