/*
 *-----------------------------------------------------------------------------
 *	Defaults and global settings
 *-----------------------------------------------------------------------------
 */

/*	= standard layout = */
body.std {
	display: block;
	margin: 4px 10%;
	padding: 0;
/*	see http://www.1ngo.de/web/em.html */
	color: black;
	background-color: #E0E0E0;
	box-shadow:10px 10px 10px 10px grey;		
/*	background-image: url(/img/some_image.gif);
	background-position: top left;
	background-attachment: fixed;
	background-repeat: no-repeat;
 */	
}

/*	= popup = */
body.popup {
	display: block;
	margin: 0;
	padding: 0;
	color: black;
	background-color: #E0E0E0;
}

body * { 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;	/*	= base for font sizing, everything relative to this = */
	margin: 0; 
	padding: 0;
}

h1 { font-size: 140%; font-weight: bold }

table {
	border-width: 0;
	color: black;
}

input,option,select {
	font-size: 90%;
	padding: 2px 0;
}

input { 
	border: 1px solid black;
	border-radius: 3px;
	padding: 0 3px;
	z-index: 0;
}		

textarea {
	border: 1px solid gray;
	border-radius: 5px;
	padding: 5px;
}

p {
	padding: 0 0 8px 0;
	margin: 0;
}

pre { padding-left: 8px }

a	{
	font-size: 90%;
	text-decoration: none;
	border: none;
}

a:link	{ color:#2c4981; }
a:visited { color: #2c4981; }
a:hover	{ cursor: pointer }

img {
	border: none; margin: none;
}

img.image {
	border: 1px solid #2c4981} 

img.image.left {
	float: left;
	margin: 0 10px 10px 0;
}

img.image.right {
	float: right;
	margin: 0 0 10px 10px;
}

/*	=== Buttons === */

.btn {
	font-size: 10pt;
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	line-height: 0.8em;
	height: 2em;
	vertical-align: middle;
	padding: 0 1em;
	font-weight: normal;
	border: 3px groove darkblue;
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	white-space: nowrap;
}

.btn:hover {
	font-weight: bold;
	text-decoration: underline;
}

.btn:active {
	position: relative;
	top: 1px;
}

a.btn, span.btn { 
	height: 1.6em; 
	line-height: 1.6em;
	vertical-align: middle;
}

/*
 *-----------------------------------------------------------------------------
 *	Wrapper for all page content
 *-----------------------------------------------------------------------------
 */

body.std div#wrapper {
	border: 1px solid darkblue;
	background-color: white;
	padding: 4px 8px;
	margin: 0;
	width: 100%;
}

body.popup div#wrapper {
	border: 1px solid darkblue;
	background-color: white;
	padding: 5px;
	margin: 5px auto;
	width: 95%;
}
	

/*
 *-----------------------------------------------------------------------------
 *	Description block
 *-----------------------------------------------------------------------------
 */
#description {
	display: none;
}

/*
 *-----------------------------------------------------------------------------
 *	Tables with lines separating the rows, no column dividers
 *-----------------------------------------------------------------------------
 */

table.line { border: 0; padding: 4px; border-collapse: collapse; background: white }
table.line tr:first-child { border-top: 1px solid black }
table.line tr:last-child { border-bottom: 1px solid black }
table.line tr { border-top: 1px solid black }
table.line th { border: 0; padding-left: 8px; padding-right: 8px }
table.line td { border: 0;padding-left: 8px; padding-right: 8px }

/*
 *-----------------------------------------------------------------------------
 *	Tables with lines separating the columns, no row dividers
 *-----------------------------------------------------------------------------
 */
table.col {border-collapse: collapse}

tr.col	td:first-child { border-left:1px solid black }
tr.col	td { border-right:1px solid black; padding:0 1em; }
tr.col	th:first-child { border-left:1px solid black }
tr.col	th { border-right:1px solid black; padding:0 1em;}

/*
 *-----------------------------------------------------------------------------
 *	=== Element backgrounds ===
 *-----------------------------------------------------------------------------
 */

.yl, .yellow {
	background-color:#F0F751;
}

.gn, .green {
	background-color:#9AFF9A;
}

.rd, .red {
	color: white;
	background-color:#E98176;
}

.blue {
	background-color:#0092DC;
	color:white;
}

/*
 *----------------------------------------------------------------------------- 
 *		Message pane
 *----------------------------------------------------------------------------- 
 */

div#messages { 
	display: block; 
	position: fixed; 
	left:0; top:0;
	width: 80%;
	text-align: left;
	overflow-y: auto; 
	overflow-x: visible; 
	z-index: 256;
	margin-top: 5px;
	border: 2px solid darkblue;
	padding: 10px 0;
	background-color: yellow;
	border-radius: 5px;
}

div#messages span.X { 
	position: absolute; 
	top:0; right:0; 
	font-size: larger; 
	background-color: orange; 
	border: 1px solid #00a;
	border-radius: 5px; 
}

div#messages * {
	line-height: 120%;
}

table.messages { width:100%; border-collapse:collapse; }

table.messages th { 
	width: 8em; 
	vertical-align: top;
}

table.messages td { padding: 0 0 0 2em; }

/*	=== Message pane === */

.warning {
	background-color: yellow!important;
	color: darkred!important;
}

.error {
	background-color: red!important;
	color: white!important;
}

.msg, .info {
	background-color: white!important;
	color: green!important;
}

/*
 *-----------------------------------------------------------------------------
 *	Horizontal menu bar
 *-----------------------------------------------------------------------------
 *
 *	Note: floating div#menu_left and div#menu_right makes these divs contain
 *	(graphically) the floats within them.
 */

tr#menu_row td {
	border: 1px solid #888888;
	background: #078930; 
/*
	background: linear-gradient(top, #8888cc 0%, darkblue 100%);  
	background: -moz-linear-gradient(top, #8888cc 0%, darkblue 100%); 
	background: -webkit-linear-gradient(top, #8888cc 0%,darkblue 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
 */
	padding: 8px 0 3px 0;
}	 

div#menu_left
{
	display:block;
	height: 16pt;
	float:left;
	text-align:left;
	padding: 0 0.5em;
	z-index: 10;
}

div#menu_right
{
	display:block;
	position: relative;
	overflow: hidden;
	float:right;
	padding: 0 0.5em;
	z-index: 10;
}

div.menu * {
	color: white;
}

/* === from http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu === */

div.menu ul ul {
	display: none;
	z-index:256;
}

	div.menu ul li:hover > ul {
		display: block;
	}


div.menu ul {
	padding: 0 5px;
	list-style: none;
	position: relative;
	display: table;
	background: transparent;
}
	div.menu ul:after {
		content: ""; clear: both; display: block;
	}

	div.menu.left ul.top>li {
		float: left;
		border-right: 1px dotted white;
		background-color: transparent;
		display: table-cell;
		vertical-align: middle;
		height: 14pt;
	}

	div.menu.right ul.top>li {
		float: right;
		border-left: 1px dotted white;
		background-color: transparent;
		display: table-cell;
		vertical-align: middle;
		height: 14pt;
	}

	div.menu li.sub {
		padding-right: 12px;
		background-image: url('/images/dArrow.gif');
		background-repeat: no-repeat;
		background-position: 95% 35%;
	}


		div.menu ul li:hover {
			background: grey;
		}
		
		div.menu ul li>a, div.menu ul li>span {
			display: block;
			padding: 0 5px;
			vertical-align: middle;
		}
			
		
	div.menu ul ul {
		background: #5f6975; border-radius: 0px; padding: 0;
		position: absolute; top: 90%;
	}
		div.menu ul ul li {
			float: none; 
			border-top: 1px solid #6b727c;
			border-bottom: 1px solid #575f6a; position: relative;
		}
			div.menu ul ul li a {
				padding: 15px 10px;
				text-align: center;
			}	
				div.menu ul ul li a:hover {
					background: #4b545f;
				}
		
	div.menu ul ul ul {
		position: absolute; left: 100%; top:0;
	}

/*
 *-----------------------------------------------------------------------------
 *	Image bar in header (defaults)
 *-----------------------------------------------------------------------------
 */

		
/*
 *-----------------------------------------------------------------------------
 *	Navigation sidebar
 *-----------------------------------------------------------------------------
 */

div#navbar {
	width: 200px;
	text-align: left;
	vertical-align: top;
	border-width: 8px 0;
	border-style: solid;
	border-color: #078930;
	padding: 12px 0;
	float: left;
}

#navbar a, #navbar li {	line-height: 1.3em; }

.nav {
	background-color: white;
	color: #888888;
	border: 0;
	padding-top: 0;
	padding-bottom: 0;
	text-decoration: none;
	white-space: nowrap;
}

td.nav {
	vertical-align: top;
	width: 200px;
}

div#navbar ul {
	list-style-position: inside;
	margin: 0 4px;
	padding: 0 4px;
}

div#navbar ul ul {
	list-style-position: outside;
	margin: 0 0 0 15px;
	padding: 0 0 0 15px;
}

div#navbar a:link	{ color:#888888; }
div#navbar a:visited	{ color: #888888; }
div#navbar a:hover	{ color: #888888; } 


INPUT.nav {
	border: 3px groove #078930}

TABLE.nav {	border-collapse: collapse }

/* Highlighted */

div#navbar *.hi {
	color: #888888;
	border: 0;
	padding-top: 0;
	padding-bottom: 0;
	font-weight: bold;
}


INPUT.nav_hi {
	text-decoration: none;
}

A.nav_hi 	{ text-decoration: none }
A.nav_hi:link	{ color:#888888; }
A.nav_hi:visited { color: #888888; }
A.nav_hi:hover	{ color: #888888; }

TABLE.nav_hi {	border-collapse: collapse }

/*
 *-----------------------------------------------------------------------------
 *	Login page
 *-----------------------------------------------------------------------------
 */

.login {
	background-color: #F9E25F;
	color: black;
	border: 1px solid #888888;
	text-align: center;
}

input.login {
	background-color: #DDDDDD;
	border: 2px groove #888888;
}	

/*
 *-----------------------------------------------------------------------------
 *	Basic modal popup
 *-----------------------------------------------------------------------------
 */

/* The modal's background */
div.modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

/* Display the modal when targeted */
div.modal:target {
  display: table;
  position: absolute;
}

/* The modal box */
div.modal>div.wrapper {
  display: table-cell;
  vertical-align: middle;
}

/* The modal's content */
div.wrapper>div.content {
  margin: auto;
  background-color: #f3f3f3;
  position: relative;
  padding: 0;
  outline: 0;
  border: 1px #777 solid;
  text-align: justify;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* close button */
div.modal a.closebtn {
	background: #606061;
	color: lightgrey;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	border: 1px solid white;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

div.modal a.closebtn:hover,
div.modal a.closebtn:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}


/*
 *=============================================================================
 *	***** Standard layout *****
 *=============================================================================
 *
 */

hr#top_stripe {
	margin: 2px 0 5px 0;
	background-color: #078930;
	height: 8px;
	width: 100%;
}

/*	=== Heading block === */
div#heading {
	width: 100%;
	display: block;
	position: relative;
	overflow: hidden;
	background: transparent url(/images/depl_flags_H90.png) no-repeat center;
	margin: 0 ! important; padding: 0 ! important;
	height: 90px;
}

div#heading  img { height: 75px; }	/* Die Wappen rechts und links */

h1#hdg_title { margin: 20px auto 10px auto;}

h1#hdg_subtitle { margin: 10px auto;}

div#hdg_images {
	float: left;
	clear: left;
	visibility: hidden;
}

div#hdg_images img {
	float:left; 
	margin-right:3px; 
	border: 1px solid darkred;
	display: none;
}

table#PAGE {
	width: 100%;
}

.layout {
	color: black;
	border: 0;
	padding: 0;
	text-align: left;
	vertical-align: top;
}

table.layout {
	border: 0;
	border-collapse: collapse;
	background-color: white;
}

table.layout>td { 
	display:block;
	position:relative;
}

td#content {
	display: block;
	position: relative;
	overflow-y: auto; 
	overflow-x: visible; 
	text-align: left;
	vertical-align: top;
	padding: 12px 0;
	font-size: 75%;
	min-height: 500px;
}	

TD#content_right {
	text-align: left;
	vertical-align: top;
	background-color: white;
	padding: 16px 0 0 16px;
	font-size: 90%;
	line-height: 130%;
	width: 700px;
}

#footer {
	border-top: 1px solid #888888;
	color: grey;
	text-align: center;
}

#footer * {
	font-size: 8pt;
}

/*	=== Separator strips for news items === */

tr.sep > td:first-child { padding-left: 1em; }
tr.sep td, tr.sep th { padding-right: 1em; }

*.sep { line-height: 150%; }

*.sep.event, *.sep.event * {
	background-color: darkblue;
	font-size: x-small;
	color: yellow;
}

*.sep.news, *.sep.news * {
	background-color: darkgreen;
	font-size: x-small;
	color: yellow;
}

*.sep.job, *.sep.job * {
	background-color: maroon;
	font-size: x-small;
	color: yellow;
}

tr.summary:hover * { background-color: yellow; }
tr.summary > td:first-child { padding-left: 2em; }

div.scrollBox {
	overflow: auto;
}

div#newsBox {
	font-size: 80%;
	border: 1px solid #888888;
}

div#newsBox H1 {
	font-size: 80%;
	margin: 0;
	padding: 0;
	text-align: center;
}

div#newsBox img { padding: 5px; }

#top_right {
	font-size: 120%;
	vertical-align: middle;
	text-align: center;
}

.itrg, .depl {
	font-size: larger;
	font-weight: bold;
	color: #2c4981;
}

/*
 *-----------------------------------------------------------------------------
 *	Security, Anti-Spam
 *-----------------------------------------------------------------------------
 */

.sec {
	visibility: hidden;
	display: none;
}

/*
 *-----------------------------------------------------------------------------
 *	Miscellaneous
 *-----------------------------------------------------------------------------
 */

table.fotolist {
	border-collapse: collapse;
}

table.fotolist td {
	padding: 0 4px;
	vertical-align: middle;
	font-size: 90%;
}

table.fotolist th {
	padding: 0 4px;
	font-size: 90%;
	vertical-align: middle;
}

table.fotolist pre {
	padding: 0;
	margin: 0;
	vertical-align: top;
}

td.ul, th.ul {
	border: none;
	border-bottom: 1px solid black;
}

a.ul, input.ul {
	text-decoration: underline;
	font-weight: bold;
	border: none;
	background-color: white;
	cursor: pointer;
}

a.nix, input.nix {
	text-decoration: none;
	font-weight: lighter;
	border: none;
	background-color: white;
	cursor: pointer;
}

/**
 *	= Horizontally aligned objects = 
 *
 *	*:* CSS crap *:* See
 *	http://stackoverflow.com/questions/8543859/css-vertical-alignment-text-inside-li	
 *
 */

*.horiz.left { margin-right: 10px; float: left; }
*.horiz.right { margin-left: 10px; float: right; }

ul.horiz { list-style:none; }
ul.horiz li * { vertical-align:middle; display:inline-block; }

ul.horiz.left li { float:left; margin-right:10px; }
ul.horiz.right li { float:right; margin-left:10px; } 

/*	= display a key face = */
.kbd {
    background-color: #d7d7d7;
    border: 1px solid #aaaaaa;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #FFFFFF inset;
    color: #333333;
    display: inline-block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 100%;
    line-height: 1.4;
    margin: 0 0.1em;
    padding: 0.1em 0.6em;
    text-shadow: 0 1px 0 #FFFFFF;
    white-space: nowrap;
    border-radius: 3px;
}

/**
 *	= Vertically centered objects = 
 *
 *	*:* CSS crap *:* Also see stackoverflow
 *
 */

/*	= Center things vertically. Works for FF, Chromium and Opera. *?* Safari *?* = */

*.middle { 
	height: 1.6em;
	vertical-align: middle;
}

*.middle * { 
	float: left; 
	position: relative;
	overflow: hidden;
	vertical-align: middle;
	font-size: inherit;
	line-height: 0.8em;
	padding: 0.3em 0 0.4em 3px;
}

*.middle input[type=radio], *.middle input[type=checkbox] {
	margin-top: 0.2em;
}


/*	= Make something noticable with white letters on red background = */
.yell { background-color:red!important; color:white!important; font-size:18px!important; text-align:center!important; }