@charset "ISO-8859-1";

:root {

	--page-browser-bar---height: 60px;
	--page-browser-bar---color: #000000;				/* Die Schriftfarbe der Elemente, die keine Buttons sind */
	--page-browser-bar---background-color: #eeeeee;		/* Die Farbe des Page-Browser Bars */
	--page-browser-bar---font-weight: bold;				/* Die Schriftstärke von normalem Text */
	--page-browser-bar---font-size: 18px;				/* Die Schriftgrösse von normalem Text */

	--page-browser-button---size: 40px;
	--page-browser-button---border: 0px solid #bbbbbb;
	--page-browser-button---border-radius: 10px;
	
	--page-browser-button-inactive---color: #000000;			/* Wenn gesetzt die Schriftfarbe der nicht gedrückten Buttons */
	--page-browser-button-inactive---background-color: #dddddd;	/* Die Farbe der nicht gedrückten Buttons */
	--page-browser-button-inactive---font-size: 18px;			/* Die Schriftgrösse der nicht gedrückten Buttons */
	--page-browser-button-inactive---font-weight: normal;			/* Die Schriftstärke der nicht gedrückten Buttons */

	--page-browser-button-active---color: red;					/* Die Schriftfarbe der gedrückten Buttons */
	--page-browser-button-active---background-color: #cccccc;	/* Die Farbe der gedrückten Buttons */
	--page-browser-button-active---font-size: 20px;				/* Die Schrifgrösse von normalem Text */
	--page-browser-button-active---font-weight: bold;			/* Die Schriftstärke von normalem Text */

	--page-browser-button-hover---color: red;					/* Die Schriftfarbe  der überfahrenene Buttons */
	--page-browser-button-hover---background-color: #cccccc;	/* Die Farbe  der überfahrenene Buttons */
}

/********************************************************************************
 *
 * Browse box 
 *
 ********************************************************************************/

/*** Ganze Browse-Results Box ***/
.browseBoxWrap {
	clear: both;
	float: left;
	width: 100%;
}

/*** Box um die Anzeige der Anzahl Resultate ***/
.showResultsWrap {
	display: table-row;
	clear: both;
	float: left;
	width: 100%;
	padding: 2px;
	margin-bottom: 10px;
}

/*** Box um die Anzeige der einzelnen Zahlen der Anzahl Resultate ***/
.showResultsNumbersWrap {
	font-weight: bold;
}

.browseBoxWrap fieldset {
	display: table;
	float: left;
	width: 100%;
	border: 1px solid #ccc;
}

.browseBoxWrap legend {
	margin-left: 10px;
	padding: 0 3px;
	font-size: 12px;
}

/*** Box um die Anzeige der einzelnen Seiten-Links ***/
.browseLinksWrap {
	clear: both;
	float: left;
	width: 100%;
	height: var(--page-browser-bar---height);
	line-height: var(--page-browser-bar---height);
	text-align: center;
	background-color: var(--page-browser-bar---background-color);
	background-image: none;
}

.pageLinkWrap {
	display: inline-flex;
	height: var(--page-browser-button---size);
	width: var(--page-browser-button---size);
	border: var(--page-browser-button---border);
	border-radius: var(--page-browser-button---border-radius);
	justify-content: center;
	align-items: center;
	background-color: var(--page-browser-button-inactive---background-color);
	background-image: none;
	margin: 3px;
}

.pageLinkWrap a,
.pageLinkWrap span,
.pageLinkWrap div,
.activeLinkWrap a {
	display: inline-flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	align-items: center;
}

.activeLinkWrap {
	color: var(--page-browser-button-active---color);
	font-size: var(--page-browser-button-active---font-size);
	font-weight: var(--page-browser-button-active---font-weight);
	background-color: var(--page-browser-button-active---background-color);
	background-image: none;
}

.pageLinkWrap:hover {
	background-color: var(--page-browser-button-hover---background-color);
	background-image: none;
}

.activeLinkWrap a,
.activeLinkWrap span {
	text-decoration: none;
	color: var(--page-browser-button-active---color);
}

.pageLinkWrap a:hover,
.pageLinkWrap a:active,
.pageLinkWrap a:focus {
	color: var(--page-browser-button-active---color);
	font-size: var(--page-browser-button-active---font-size);
	font-weight: var(--page-browser-button-active---font-weight);
	text-decoration: none;
}

.inactiveLinkWrap {
	background-image: none;
	background-color: var(--page-browser-button-inactive---background-color);
}

.inactiveLinkWrap a {
	color: var(--page-browser-button-inactive---color);
	font-size: var(--page-browser-button-inactive---font-size);
	font-weight: var(--page-browser-button-inactive---font-weight);
	text-decoration: none;
	background-image: none;
}

.neutralLinkWrap,
.neutralLinkWrap:hover {
	font-weight: var(--page-browser-bar---font-weight);
	font-size: var(--page-browser-bar---font-size);
	background-color: var(--page-browser-bar---background-color);
	border: 0;
}

.disabledLinkWrap {
	visibility: hidden;
}