:root
{
	--hell		: #ffffff;
	--dunkel	: #aaaaaa;
	--dunkel-grau	: #999999;
	--hell-grau	: #dddddd;
	--text-hell	: #ffffff;
	--text-dunkel	: #222222;
}

body
{
	background-image:url(/global/pic/hauptmenu/backball.gif);
	color		: #000000;
	font-family	: verdana,arial,sans-serif;
	font-size	: 80%;
	margin-top	: 10pt;
	margin-left	: 20px;
	margin-right	: 20px;
}

table
{
	padding         : 1em 1em 1em 1em;
}

#body
{
	/*background-color: var(--dunkel); */
	padding         : 1em 1em 1em 1em;
	border-radius	: 5px 5px 5px 5px;
	width		: 98%;
}

.clear_left
{
	clear		: left;
}

.clear_right
{
	clear		: right;
}

.float_right
{
	float		: right;
}

.float_left
{
	float		: left;
}

.form
{
	background	: var(--hell);
	border		: 1px groove;
}

fieldset
{
	display		: inline-block;
	vertical-align	: top;
	/*border		: none;*/
	border-radius	: 8px;
}

fieldset > legend
{
	/*
	float:left;
	margin-top:-20px;
	*/
}

fieldset > legend + *
{
	clear:both;
}

div
{
	display		: inline-block;
	vertical-align	: top;
}

#loginbox
{
	background-color: #DA251D;
	border		: 1px solid;
	color		: #FFFFFF;
	font-weight	: bold;
	border-color	: black;
	display		: inline-block;
}

#loginbox label
{
	width: 5em;
	display: block;
	text-align: left;
}

#loginbox .white
{
	background-color: var(--hell);
	border-color	: var(--dunkel);
	color		: #000000;
}

.loginbutton
{
	background-color: #DA251D;
	border		: 2px solid;
	border-radius	: 10px;
	color		: #FFFFFF;
	font-weight	: bold;
	border-color	: black;
	padding		: 2px 10px 2px 10px;
	box-shadow	: 2px 3px 5px #444444;
}

#errormsg
{
	position	: fixed;
	top	: 50%;
	left	: 50%;
	transform: translate(-50%, -50%);
}

/* dynamisch via js eingeblendet */
.errorbox
{
	z-index		: 1000;
	display		: none;
	text-align	: center;
	border		: 4px solid;
	border-color	: #7a0000;
	position	: absolute;
	background-color: var(--hell);
	opacity		: 1.0;
	border-radius	: 8px;
	padding         : 1em 1em 1em 1em;
	color		: #000000;
}

/* dynamisch via js eingeblendet */
.msgbox
{
	z-index		: 1000;
	display		: none;
	text-align	: center;
	border		: 2px solid;
	border-color	: #7a83aa;
	position	: absolute;
	background-color: var(--hell);
	opacity		: 1.0;
	border-radius	: 8px;
	padding         : 1em 1em 1em 1em;
	color		: #000000;
}

.link_button
{
	border      : 0px;
	text-align  : left;
	font-weight : bold;
	text-decoration : none;
	background-color: transparent;
	cursor		: pointer;
}

.link_button:hover
{
	text-decoration: underline;
}


footer
{
	background	: transparent;
	color		: var(--dunkel-grau);
	padding         : 1em 1em 1em 1em;
}

a
{
	color		: var(--text-dunkel);
	text-decoration	: none;
	font-weight	: bold;
}

a:visited
{
	color		: var(--text-dunkel);
	text-decoration	: none;
	font-weight	: bold;
}

input,button
{
	background-color: var(--hell);
	border-color	: var(--dunkel);
	color		: var(--text-dunkel);
}

select
{
	background-color: var(--hell);
	border-color	: var(--dunkel);
	color		: var(--text-dunkel);
}

input[type="checkbox"]
{
	cursor		: pointer;
}

input[type="text"]:disabled
{
	color: #888888;
}

.odd
{
	text-align:center;
	background-color:var(--dunkel-grau)
	color	: #000000;
}
.even
{
	background-color:var(--hell-grau);
	text-align:center;
	color	: #000000;
}

.help
{
	display		: none;
	margin		: 1em 0;
	padding		: 1em 15px;
	background	: var(--hell);
	position	: absolute;
	z-index		: 1000;
	border		: solid 1px #000000;
	width		: 600;
	text-align	: left;
	border-radius	: 8px;
}

.hidden
{
	display		: none;
}

.score
{
	text-align	: center;
	border		: thin solid #000000;
	background	: transparent;
	border-radius	: 8px;
}

.score th
{
	background-color: var(--dunkel-grau);
	color		: var(--text-hell);
	padding		: 0.5em 0.5em 0.5em 0.5em;
	white-space	: nowrap
	border		: none;
}

.score td
{
	border-top	: thin solid #000000;
	padding		: 0.5em 0.5em 0.5em 0.5em;
	white-space	: nowrap
}

.score_print
{
	text-align	: center;
	border		: thin solid #000000;
	background	: var(--hell);
	color		: #000000;
}

.score_print th
{
	background-color: var(--hell);
	color		: #000000;
	border-top	: thin solid #000000;
	white-space	: nowrap
}

.score_print td
{
	border-top	: thin solid #000000;
	white-space	: nowrap
}

/* eine aktive Zeile in einer Tabelle */
.aktiv
{
	color:var(--text-hell);
	background-color:#555555;
}

/* wurde korrekt gespeichert */
.saved
{
	color:var(--text-dunkel);
	background-color:#449944;
}

.danger
{
	background-color:#EE0000;
	color:#EFEFEF;
}

.forum li
{
	list-style-type: none;
	background	: var(--hell);
}

.checkbox
{
	cursor		: pointer;
	box-shadow: 0 2px #555555;
	border-top: 1px solid #bbbbbb;
	border-left: 1px solid #bbbbbb;
	border-bottom: 1px solid #555555;
	border-right: 1px solid #555555;
}

.checkbox:active
{
	background-color: #3e8e41;
	box-shadow: 0 2px #666;
	transform: translateY(4px);
}

.bg_red
{
	background-color:#cc0000;
}

.bg_green
{
	background-color:#00cc00;
}

.bg_yellow
{
	background-color:#cccc00;
}

.hilight
{
	color:#cccc00;
}

.current
{
	color: #aaaaaa;
}

.gray_image
{
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
}

.image_container
{
	position: relative;
	width	: 50%;
}

.image_container img
{
	width	: 100%;
	height	: auto;
}

.image_container .img_btn
{
	position : absolute;
	top	: 90%;
	left	: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	background-color: #555;
	color: white;
	border: none;
	border: none;
	cursor: pointer;
	border-radius: 5px;
}

.image_container .img_btn:hover
{
	background-color: black;
}

.width500
{
	width	: 500px;
}

/* -------------------- Menüfarben --------------- */


.ui-menu
{
}

#menu
{
	/*
	position	: fixed;
	*/
}

#menu .ui-menu-item
{
	display		: inline-block;
}

#menu .ui-widget-content
{
	background: transparent;
	border		: none;
}

/* Menupunkt mit unterpunkten */
#menu .ui-menu-item
{
	color: var(--text-dunkel);
}

#tippen_menu .ui-menu-item
{
	display		: block;
	width: 150px;
}
#mainmenu .ui-widget-content
{
	background	: linear-gradient(#eeeeee, #666666);
	color: var(--text-dunkel);
	border		: none;
	font-weight: normal;
}

#menu .ui-widget-content a
{
	color: var(--text-dunkel);
	font-weight: normal;
}

#menu .ui-state-focus
{
	color		: var(--text-dunkel);
	background	: var(--dunkel);
	border		: none;
}

#menu .ui-state-active
{
	color		: var(--text-dunkel);
	background	: var(--dunkel);
	border		: none;
}