/*
|---------------------------------------------------------------------|
|project:      mywebtodo
|file:         td_style.css
|remarkt:      style sheet for firefox
|version:      0.1.0-1
|last change:  20161226
|authors:      mmw                                      18, 46, 163
|---------------------------------------------------------------------|
*/
body {
	font-family:	Arial,sans-serif;
	text-align:		center;
	font-size:		10px;
	margin:				0;
	padding:			0;
}
html, body{ height: 100%}
a:link, a:visited, a:active, a:focus {text-decoration:none;}

#headline 	{ font-size: 14px;  color: #000000; }
#text 	{ font-size: 12px; color: #000000; }
#textmono 	{ font-family: Courier,monospace; font-size: 14px; color: #000000; }
#textblue 	{ font-size: 12px; color: #122EA3; }
#textbold 	{ font-size: 12px; color: #000000; font-weight: bold; }
#textboldblue 	{ font-size: 12px; color: #122EA3; font-weight: bold; }

/*-- logo ----------------------------------------------------*/
logo {
	background: #eee;
	border: 1px solid #ccc;
	border-right: none;
	width: 100%;
	margin-bottom: 10px;
	font-size: 1.4em;
	box-sizing: border-box;
}
logo img { max-width: 160px;}   /*???*/
logo ul { margin: 0; padding: 0; }

logo ul li {
  list-style: none;
  border-left: 1px solid #fff;
  border-right: 1px solid #ccc;
	text-align :				center;
	vertical-align :		middle; 
}

logo ul li:first-child { border-left: none; }

logo ul li a {
  display: block;
  text-decoration: none;
	vertical-align :		middle;
  padding: 4px 4px 4px 4px;
}
logo { display: table; table-layout: fixed;}
logo ul { display: table-row; max-height: 26px; }
logo ul li { display: table-cell; }

logo a.actual { font-weight: bold; color: #000000; }
logo a.alink { font-weight: bold; color: #122EA3;}
logo a.nolink { color: #AAAAAA;}


nav { /*-- nav ----------------------------------------------------*/
	background: #eee;
	border: 1px solid #ccc;
	border-right: none;
	width: 100%;
	margin-bottom: 10px; 
	font-size: 1.4em;
	box-sizing: border-box;
}
nav ul { margin: 0; padding: 0; }
nav ul li {
	list-style: none;
	text-align: center;
  border-left: 1px solid #fff;
  border-right: 1px solid #ccc;
}
nav ul li:first-child { border-left: none; }
nav ul li a {
  display: block;
  text-decoration: none;
  padding: 6px 0;
}
nav { display: table; table-layout: fixed;}
nav ul { display: table-row; }
nav ul li { display: table-cell; }

nav a.actual { font-weight: bold; color: #000000; }
nav a.alink { font-weight: bold; color: #122EA3;}
nav a.nolink { color: #AAAAAA;}

/*-- middle ----------------------------------------------*/
#middle {
	/*float :							left;*/
	margin :						10px auto; /*ober,rechts,unten,links*/
	padding :						5px;
	width :							auto; /*738 + border 2 + padding 10 + magin 0 = 750 */
	/*border:							1px solid #DDDDDD;*/
	text-align : left;
	font-size :					1.1em;
}


#middle table {
	margin :						2px 0px 0px 0px;
	width :							100%;
	/*border : 						1px solid #FF0000;*/
	padding :						2px;
	empty-cells : 			show;
	overflow :					hidden;
	font-size :					1.1em;
}

#middle th {
	background-color : 	#DBE6FF;
	text-align :				left;
	font-size :					1.1em;
	font-weight : 			bold;
	color :							#000000;
	padding : 					2px;
}

#middle td.light {
	background : 		#EEEEEE;
	text-align :		left;
	padding : 			2px;
	overflow : 			hidden; 
}

#middle td.dark {
	background-color : 	#DDDDDD;
	text-align :				left;
	padding : 					2px;
	overflow : 					hidden; 
}
#middle td.green {
	background-color : 	#CEF6CE;
	text-align :				left;
	padding : 					2px;
	overflow : 					hidden; 
}
#middle td.red {
	background-color : 	#F6CECE;
	text-align :				left;
	padding : 					2px;
	overflow : 					hidden; 
}
#middle td.past {
	background-color : 	#DDDDDD;
	text-align :				left;
	text-decoration :		line-through;
	padding : 					2px;
	overflow : 					hidden; 
}
#middle h1 {
	margin :						20px 0px 5px 0px;
	padding :						0px;
	font-size :					1.3em;
	font-weight: 				bold;
	color : 						#000000;
}
#middle h2 {
	margin :						5px 0px 5px 0px;
	padding :						0px;
	font-size :					1.2em;
	font-weight: 				bold;
	color : 						#000000;
}
#middle h3 {
	margin :						5px 0px 5px 0px;
	padding :						0px;
	font-size :					1.1em;
	font-weight: 				bold;
	color : 						#000000;
}
#middle p {
	text-align :				left;
	vertical-align :		top; 
	margin :						0px;
	padding :						0px;
	font-size :					1.1em;
}

#middle span.light		{ background-color: #EEEEEE; }
#middle span.dark		{ background-color: #DDDDDD; }
#middle span.green		{ background-color: #8BC343; }
#middle span.red 		{ background-color: #FF1344; }
#middle span.orange	{ background-color: #F8BD0A; }
#middle span.blue 		{ background-color: #007CDC; }
#middle span.vdark		{ background-color: #888888; }


#middle img { width: 100%; }
#middle p.navpage { text-align: right; /*font-size : 1.2em;*/ color: #122EA3; }
#middle a { margin: 0px; padding: 0px; /*font-size : 1.2em;*/ color: #122EA3; }

#list ul { font-size: 1.1em;display: inline-block; text-align: left; margin: 0; padding: 0; list-style: none; }
#list ul li { display: inline-block; margin: 4 4 0 0; width: 80px; padding: 2 2 2 2; } /*text-align: center; o r u l*/
#list li.light	{ background-color: #EEEEEE; }
#list li.dark		{ background-color: #DDDDDD; }
#list li.green	{ background-color: #CEF6CE; }
#list li.red 		{ background-color: #F6CECE; }

.clear { clear: both; }

#msg { text-align: left; color: #00A000; font-size: 1.2em; margin: 10 px 0px;}
#msg_er { text-align: left; color: #A00000; font-size: 1.2em; margin: 10 px 0px;}

#under_construction { color : #AAAAAA; }
#viewtext { width : 495px; }
#viewarea { height : auto; width : 495px; }
#link {text-align : center; color : #122EA3; background : FFFFFF;}

#captcha img { width: 100px; } /*???*/



/*clearing all floats and fix firefox and ie backgroundcolor-bug */
/*div.clearer { clear : both;	font-size :1px; line-height : 1px; display : block; height : 1px; }*/ 


div.view-form {
	font-size :					12px;
	color :							#000000;
}
div.view-form ul {
	/*border :						solid 1px red; 
	background :				#FF0000;*/
	float : 						left;
	display :						inline-block;
	margin :						0px 0px 0px 0px;
	padding :						0px 0px 0px 0px;

	/*list-style: 				none; */
  /*clear : both;*/     
}

div.view-form br { clear : both; } /*???*/

div.view-form li.label1 { /*width total = 140 +5+5 +0+5 = 155*/
	float : 						left;
	display :						inline-block;
	width :							120px;
	height :						18px;
	background :				#DDDDDD;
	margin :						2px 5px 2px 0px;
	padding :						2px 5px 1px 5px;
	list-style: 				none;             
}

div.view-form li.value1 { /*width total = 140 +5+5 +0+5 = 155 */
	float : 						left;
	display :						inline-block;
	width :							120px;
	height :						18px;
	background :				#EEEEEE;
	margin :						2px 5px 2px 0px;
	padding :						2px 5px 1px 5px;
	list-style: 				none;
}
 
div.view-form li.space1 { /*width total = 30 + 5+5 +0+5 = 45 */
	float : 						left;
	display :						inline-block;
	width :							30px;
	height :						18px;
	background :				#FFFFFF;
	margin :						2px 5px 2px 0px;
	padding :						2px 5px 1px 5px;
	list-style: 				none;
}

/*-- FORM DESIGN --------------------------------------*/
form.content {
	margin :						2px 10px 1px 0px;
	padding :						0px 0px 0px 0px;
	font-family : 			Arial, sans-serif;
	/*border :						1px solid #122EA3;*/
}
form.content label {  /*width total = 140 + 5 + 5 + 0 + 0 + 5 + 0   */
	float : 						left;
	display :						block;
	margin :						2px 5px 2px 0px;
	padding :						2px 5px 1px 5px;
	width:							140px;
	height :						20px;
	font-size : 				12px;
	color : 						#000000;
	background :				#DDDDDD;
}

form.content input, textarea, select { /*width total = 140 +5+5 +1+1 +5 = 157*/
	float : 						left;
	display :						block;
	width :							140px;
	height :						20px;
	background :				#FFFFFF;
	border :						1px solid #122EA3;
	font-size :					12px;
	margin :						2px 5px 2px 0px;
	padding :						2px 5px 1px 5px;
}

form.content #checkbox { /*width total = 155*/
	float : 						left;
	display :						block;
	width :							20px;
	height :						20px;
	background :				#FFFFFF;
	border :						1px solid #122EA3;
	font-size :					12px;
	margin :						2px 5px 2px 0px;
	padding :						2px 5px 1px 5px;
}
form.content #hidden {
	display :						none;
	border :						none;
	background-color :	#FFFFFF;
}
form br { clear : both; }

#readonly {
	width :							128px;     /*  128 +5+5 +1+1 +5+0 = 140 */
	height :						18px;
	background :				#DDDDDD;
	border :						1px solid #122EA3;
	font-family :				Arial,sans-serif;
	font-size :					12px;
	margin :						2px 5px 2px 0px;
	padding :						2px 5px 1px 5px;
}
#b-submit { /* 140 +5+5 +0+0 +5+0 = 155*/
	float : 						left;
	display :						block;
	width :							140px;
	height :						20px;
	border :						0px solid #122EA3;
	background :				#122EA3;
	color :							#FFFFFF;
	font-family :	Arial,sans-serif; font-size : 12px; font-weight : bold;
	text-align :				center;
	vertical-align :		middle; 
	margin :						2px 5px 2px 0px;
	padding :						2px 5px 1px 5px;
}


div.entry {
	border :						1px solid #DDDDDD;
	display :						block;
	font-family :				Arial,sans-serif;
	font-size :					12px;
	margin :						2px 5px 2px 2px;
	padding :						2px 5px 2px 5px;
}
div.entry ul {
	display :						inline-block;
	width :							100%;
	margin :						0px 0px 0px 0px;
	padding :						0px 0px 0px 0px;
  /*clear : both;*/
}
div.entry ul.block {
	display :						block;
	margin :						0px 0px 0px 0px;
	padding :						0px 0px 0px 0px;
  /*clear : both;*/     
}
/*div.entry br { clear : both; } /*???*/
div.entry li { /*width total = 140 +5+5 +0+5 = 155*/
	display :						inline-block;
	background :				#EEEEEE;
	margin :						2px 5px 2px 0px;
	padding :						2px 5px 1px 5px;
	list-style: 				none; 
}
#li_25 { width: 22%; }
#li_75 { width: 73%; }
#li_25n { width: 22%; font-weight : bold; background-color: #B9C5F7; }
#li_75n { width: 73%; font-weight : bold; background-color: #B9C5F7; }
#li_100 { width: 97%; }

div.box {
	border:							1px solid #cccccc;
	/*background :				#ffffff;*/
	padding: 5px;
}


/*-- media ----------------------------------------------------*/
@media screen and (min-width: 980px) /*-- Desktop -------------------*/{
  body { background: #F0F2F3; }
	#banner {
		background:			#FBFBFC;
		border:					1px solid #000;
		margin:					10px auto;
		width:					728px;
		border:					1px solid #DDDDDD;
		font-size:			14px;
		text-align:			center;
	}
	#wrap {
		background:			#FBFBFC;
		border:					1px solid #DDDDDD;
		margin:					10px auto;
		width:					728px;
		height:					auto;       /* These two lines were the key. */
		min-height:			100%
		text-align:			left;
	}
	#footer {
		background:			#FBFBFC;
		margin:					10px auto;
		padding:				2px 0px 3px 0px;
		width:					728px;
		height:					30px;
		border:					1px solid #DDDDDD;
		text-align:			center;
		vertical-align:	middle;
		font-size:			0.8em;
	}
	#tower {
		position :			absolute;
		left :					50%;
		margin-left :		384px;
		width :					120px;
		top : 					104px;
		height :				600px;
		font-size :			11px;
		text-align :		center;
		border :				1px solid #DDDDDD;	
	}
	#viewarea { height : auto; width : 360px; }
	#text-long { width: 390px; margin: 2px 5px 2px 0px;}
	#textarea-long { height: auto; min-height: 18px; width: 390px; margin : 2px 5px 2px 0px;}
}
@media screen and (max-width: 979px) /*-- Tablet --------------------*/{
  body { background: #F0F2F3; }
	#banner {
		background:			#fff;
		border:					1px solid #000;
		margin:					10px auto;
		width:					600px;
		border :				1px solid #DDDDDD;
		font-size :			14px;
		text-align :		center;
	}
	#wrap {
		background:			#ffffff;
		border:					1px solid #ccc;
		margin:					10px auto;
		width:					600px;
		height:					auto;       /* These two lines were the key. */
		min-height:			100%
		text-align:			left;
	}
	#footer {
		width:					600px;
		margin:					10px auto;
		padding:				2px 0px 3px 0px;
		height:					30px;
		border:					1px solid #DDDDDD;
		text-align:			center;
		vertical-align:	middle;
		font-size:			0.8em;
	}
	#tower {
		position:				absolute;
		left:						50%;
		margin-left:		310px;
		width:					120px;
		top:						94px;
		height:					600px;
		font-size:			11px;
		text-align:			center;
		border:					1px solid #DDDDDD;	
	}

	#viewarea { height : auto; width : 390px; }
	#text-long { width : 390px; margin : 2px 5px 2px 0px;}
	#textarea-long { height : auto; min-height: 18px; width : 390px; margin : 2px 5px 2px 0px;}
	#li_25 { width: 22%; }
	#li_75 { width: 72%; }
	#li_75n { width: 72%; font-weight : bold; }
	#li_100 { width: 96%; }
	}
@media screen and (max-width: 500px) /*-- Mobile --------------------*/{
  body { background: #F0F2F3; } 
  #banner {
		width: 100%;
	}
	#wrap {
		width: 100%;
		height:			auto;
		min-height:	100%
	}
	#footer {
		width:					100%;
		margin:					10px auto;
		padding:				2px 0px 3px 0px;
		height:					30px;
		border:					1px solid #DDDDDD;
		text-align:			center;
		vertical-align:	middle;
		font-size:			0.8em;
	}
	logo, nav {
    font-size: 1.2em;
  }
  nav ul li {
    /*display: block;*/
    border-bottom: 1px solid #ccc;
  }
	#tower {
		clear:				both;
		position:			relative;
		/*float:				left;*/
		/*margin-top:		10px;*/
		width:				120px;
		height:				600px;
		font-size:		11px;
		text-align:		center;
		border:				1px solid #DDDDDD;
		left :				0%;
		/*top :					10px;*/
		margin:				auto;
	}
	#viewarea { height : auto; width : 120px; }
	#text-long { width: 45%; margin : 2px 5px 2px 0px;}
	#textarea-long { height: auto; min-height: 18px; width: 45%; margin : 2px 5px 2px 0px;}
	form.content label { width: 45%; }
	form.content input, textarea, select { width: 45%; }
	div.view-form ul { width: 95%; }
	div.view-form li.label1 { width: 45%; }
	div.view-form li.value1 { width: 45%; }
	
	#b-submit { width: 45%; }

	#li_25 { width: 22%; }
	#li_75 { width: 68%; }
	#li_75n { width: 68%; font-weight : bold; }
	#li_100 { width: 95%; }
}
	




/* == PRINT ========================================== */
#print {
	width :							820px; 
	font-size :					12px;
	color : #000000;
	text-align :				left;
	padding:						0px 5px 0px 5px;
	
}

* html #print { 
	width :							820px;
}

#print h1 { font-size : 14px; font-weight: bold;}
#print h2 { font-size : 14px; font-weight: normal;}
#print h3 { font-size : 12px; font-weight: bold; }
#print p { font-size : 12px; font-weight: normal; margin : 0px 0px 0px 0px; }
#print table { font-size : 12px; border-collapse : collapse;}
#print th { font-weight: bold; padding : 2px; border : 1px solid #DDDDDD; }
#print td { padding : 2 px; border : 1px solid #DDDDDD; }


/*--INFO--
1: table.ListCtrl thead th                        {...}
2: table.ListCtrl thead td                        {...}
3: table.ListCtrl thead select                    {...}
4: table.ListCtrl thead option.Function        {...}
5: table.ListCtrl thead a:hover                {...}
6: table.ListCtrl tbody td.Filtered            {...}
7: 

*/