/* Unibern
 * LAYOUT.CSS
 * 
 * Author: Nicolas Cusan
 * Arillo - Design & Development
 * http://www.arillo.net
 * 
 * IDs are writen in #CamelCase beginig with a uppercase letter
 * class are also writen in .camelCase beginning with a lowercase letter
 * (makes it musch easyer to distiguise, gives you a cleaner structure, can of course be changed)  
 * 
 */
/*************************
 CLEARFIXING
 **************************/
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden;	
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

/*************************
 DEFAULTS
 **************************/
html{
	height: 100%;
	overflow-y: scroll; /* always force a scrollbar in non-IE -- to avoid the the page jumping when changeing from short to long content */
}
body{
	background: #fff;
	color: #333;
	font: 0.75em Verdana, Arial, sans-serif;  /*-- Remap 16px (Base fontsize in most browsers to equal 12px) --*/
	 /* font: 62.5%/1.5 Verdana, Arial, sans-serif; */  /*-- Remap 16px (Base fontsize in most browsers to equal 10px) --*/
	width: 100%;
	height: 100%;
}

a:link,
a:visited{
	color: #e3003d;
	text-decoration: none;	
}
a:focus,	
a:hover{	
	text-decoration: underline;	
}
a:active {
	color: #9c1136;
	text-decoration: underline;	
	outline: none;
}
#EventsManagementTable th a:link,
#EventsManagementTable th a:visited{
   color: #333333;
   text-decoration: none;  
}
#EventsManagementTable th a:hover {
   color: #E3003D;
   text-decoration: underline;   
}

h1,
h2,
h3,
h4,
h5,
h6{
	font-weight: bold;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1{
	font-size: 2.2em;
	line-height: 1.1;
	margin-top: 0.5em;
	margin-bottom: 0.8181em;
}
h2{
	font-size: 1.6em;
	line-height: 1.1;
	margin-bottom: 1.125em;
}
h3{
	font-size: 1.4em;
	line-height: 1.1;
	margin-bottom: 1.2857em;
}
h4{
	font-size: 1.2em;
	line-height: 1.2;
	margin-bottom: 1.6666em;
}
h5{
	font-size: 1.2em;
	line-height: 1.2;
	margin-bottom: 1.6666em;
}
h6{
	font-size: 1.2em;
	line-height: 1.2;
	margin-bottom: 1.6666em;
}
ul,
ol,
p{
	margin-bottom: 1.5em;
}
b,
strong,
th{
	font-weight: bold;
}
i,
em{
	font-style: italic;
}
#Breadcrumbs em{
   font-style: normal;
}
small{
	font-size:85%;
}
/* HR - horizontal rule */ 
hr {
	display:block;
	height:1px; 
	border:0;
	border-top:1px solid #ccc;
	margin: 1.8em 0;
	padding:0;
	clear: both;
}
/*************************
 SKIPLINKS
 **************************/
.skipLinks{
	position: absolute;
	left: -1000px;
    top: -1000px;
}
/*************************
 HEADER STRUCTURE
 **************************/
#HeaderWrap{
	width: 100%;
	height: 18.5em;
	color: #aaa;
	background-color: #444;
	border-bottom: 0.5em solid #e3003d;
/*
	background: #444 url('../images/general/header_bg.gif') repeat-x 0 0;
	position: relative;
	background-image:url('../images/general/header_bg.gif');
	background-position: 0 0;
	background-repeat: repeat;
	background-attachment: scroll;
*/
}
	#Header{
		height: 18.5em;
		width: 94em;
		margin: 0 auto;
		padding: 0 1em;
		position: relative;
		background-color: #444;
		border-bottom: 0.5em solid #e3003d;
	}
		#Language{
			padding: 1.3em 0em 0em 0em;
			float: left;
			width: 22em;
			margin-bottom: 0;
		}
			#Language li{
				line-height: 1;
				float: left;
				padding-right: 0.7em;
				margin-right: 0.7em;
				border-right: 0.2em solid #aaa;
			}
			#Language li.last{
				margin: 0;
				padding: 0;
				border: none;
			}
				#Language li a{
					font-size: 1.1em;
					color: #aaa;
				}
				#Language li a.current{
					color: #fff;										
				}
				#Language li a:hover{
					color: #e3003d;
					text-decoration: none;					
				}
		#Meta{
			width: 70em;
/*			float: left;
			border-bottom: 0.1em solid #333;
*/
		}
			#Meta ul{
				margin-bottom: 0;
				float: right;
				padding: 1.3em 2em 1.3em 0;
			}
				#Meta ul li{
					line-height: 1;
/*					float: left;   */
					display: inline; /* avoid doubble margin bug in ie6 - ie7 */
					margin-left: 2em;					
				}
				#Meta ul li span{
					font-size: 1.1em;
				}
				#Meta ul li a{
					font-size: 1.1em;
					color: #fff;										
				}
				#Meta ul li a:hover{
					color: #e3003d;										
					text-decoration: none;
				}

      #SiteTitle{
			width: 57em;
			float: left;
			padding-top: 3em;
		}
	    #SiteTitle a {
            font-size: 2.4em;
            line-height: 1.1666;
            font-weight: bold;
            color: white;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
        }	
		#SiteTitle .KSL{
			font-size: 2.4em;
			line-height: 1.1666;
			font-weight: bold;
			color: #fff;
			text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
		}
			
		#ApplicationChooser{
			width: 25em;
			float: left;
			position: relative;
			padding-top: 3.6em;
			display: inline;
		}
			#ApplicationChooser #dropOpen{
				font-size: 1.1em;
				display: block;
				width: 18.0909em;
				background: transparent url('../images/general/drop_down_top.png') no-repeat left top;
				height: 2.6363em;
				line-height: 2.6363em;
				color: #fff;
				padding-left: 1.7272em;
				text-decoration: none;
			}
			#ApplicationChooser #dropOpen:hover{
				background-position: left bottom;
				text-decoration: none;
			}
			#ApplicationChooser #dropOpen.over:hover,
			#ApplicationChooser #dropOpen.over{
				background: transparent url('../images/general/drop_down_open_top.png') no-repeat left top;				
			}
			#ApplicationChooser #dropPanel{
				position:absolute;
				top: 5.9090em;
				left: 0;
				display: none; /* remove for accesibility */
				background: transparent url('../images/general/drop_down_bot.png') no-repeat left bottom;
				font-size: 1.1em;
				width: 19.8181em;
				padding-bottom: 2.8181em;
			}
				#ApplicationChooser #dropPanel ul{
					margin-bottom: 0;
					padding-top: 0.5em;
					background: transparent url('../images/general/drop_down_bg.png') repeat-y 0 0;
				} 
					#ApplicationChooser #dropPanel ul li{
						margin-right: 1em;
						height: 2.8181em;
						width: 18.8181em;
					}
						#ApplicationChooser #dropPanel ul li a{
							display: block;
							padding: 0.6363em 0.6363em 0.6363em 1.7272em;
							color: #fff;
						}
						#ApplicationChooser #dropPanel ul li a:hover{
							text-decoration: none;
							background: #830c20;
						}
		#Unibern{
			float: left;
			width: 12em;
			padding-top: 2em;
		}
			/* in case the image doesn't show*/
			#Unibern img{ 
				font-size: 1.8em;
				line-height: 1;
			}
		#SubMenu{
			position:absolute;
			left: 0;
			top: 15.5em;
			width: 76em;
			padding-left: 1em;
			height: 3.5em;
		}
		/* ie6 and older fix */ 
		.lt7 #SubMenu{
			position: relative;
			left: auto;
			top: auto;
			bottom: -0.5em;
			padding-left: 0;
		}
			#SubMenu ul{
				width: 83em;
				height: 3.5em;
				margin-bottom: 0;
				display: block;
				float: left;
			} 
				#SubMenu li{
					float: left;
					margin-right: 0.4em;
					height: 3.5em;
				} 
					#SubMenu li a{
						float: left;
						color: #fff;
						display: block;
						background: #e3003d;
						font-size: 1.1em;
						line-height: 1.6363em;
						padding: 0.5454em 1.5757em;
						border-bottom: 0.4545em solid #e3003d;
						height: 1.6363em;
					}
					#SubMenu li a.current,
					#SubMenu li a:hover{
						background: #fff;
						color: #333;
						text-decoration: none;
					}
					#SubMenu li a.current{
						border-color: #fff;
					}
/*************************
 BREADCRUBS STRUCTURE
 **************************/
#BreadcrumbsWrap{
	width: 100%;
	border-bottom: 0.1em solid #ccc;
	margin-bottom: 4em;
}
	#Breadcrumbs{
		width: 85.4545em;
		margin: 0 auto;
		font-size: 1.1em;
		padding: 1.1em 0.9090em;
	}
		#Breadcrumbs a{
			color: #666;
		}
		
/*************************
 PROVIDE FEEDBACK
 **************************/
#ProvideFeedback{
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    background-color: #F5F5F5;
    border-color: #CCCCCC;
    border-image: none;
    border-radius: 2px 0 0;
    border-style: solid none none solid;
    border-width: 1px medium medium 1px;
    box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.5);
    padding: 6px;
    
 }
		
		
/*************************
 WRAP CONTENT SIDEBAR STRUCTURE
 **************************/
#Wrap{
	width: 94em;
	margin: 0 auto;
	padding: 0 1em;
	overflow: visible;  /* Fuer Datepicker von "hidden" auf "visible" geaendert */
}
#Sidebar{
	width: 18em;
	float: left;
	margin-right: 2em;
	margin-bottom: 5em;
}
#Content{
	width: 94em;
	float: left;
	margin-bottom: 5em;
	position: relative;
}
	/* we do this here and in % to make it em size independent */
	#Content .contentColRight,
	#Content .contentColLeft{
		float: left;
		width: 48.5%;
		margin-right: 3%;
	}
	#Content .contentColRight{
		margin-right: 0;
	}
	/* ie6 and older fix */
	html.lt7 #Content .contentColRight,
	html.lt7 #Content .contentColLeft{
		width: 48.5%;
		margin-right: 2.3%;
	}
	html.lt7 #Content .contentColRight{
		margin-right: 0;
	}
/*************************
 SIDEBAR INSIDE a.k.a MAIN NAVIGATON
 **************************/
#Navigation{
	margin-bottom: 1.8em;
	border-top: 0.1em solid #ccc;
}
	#Navigation li{
		border-bottom: 0.1em solid #ccc;
		width: 18em;
	}
		#Navigation li a{
			padding: 0.85em 0;
			padding-left: 0.3em;
			display: block;
			color: #444;
			font-size: 1.1em;
			background: #fff;
			clear: both;
		}
		#Navigation li a.current{
			background: #f5f5f5;
			color: #e3003d;
		}
		#Navigation li a.section,
		#Navigation li a:hover{
			color: #e3003d;
			text-decoration: none;
		}
		#Navigation li ul{
			margin-bottom: 0;
		}
			#Navigation li ul li{
				border-top: 0.1em solid #ccc;
				border-bottom: none;
			}
				#Navigation li ul li a{
					padding-left: 1.7em
				}
				#Navigation li ul li ul{
					margin-bottom: 0;
				}
					#Navigation li ul li ul li{
						border-top: 0.1em solid #ccc;
						border-bottom: none;
					}
						#Navigation li ul li ul li a{
							padding-left: 3em;
						}

/* Sidebar for form steps */
#FormSteps{
	padding-top: 1.8em;
	margin-top: 1.8em;
}
	#FormSteps li{
		background: url('../images/general/form_step_bg.gif') repeat-x 0 0;
		margin-bottom: 0.4em;
		-webkit-border-radius: 4px; 
		-moz-border-radius: 4px; 
		border-radius: 4px;
		border: 0.1em solid #ccc;
		position: relative; 
	}
	#FormSteps li.current{
		background-position: left bottom;
		border: 0.1em solid #222;
	}
		#FormSteps li a{
			display: block;
			padding: 0.8em 3.5em 0.8em 1em;
			position: relative;
		}
		#FormSteps li a:hover{
			text-decoration: none;
		}
			#FormSteps li a span{
				display: block;
			}
			#FormSteps li a span.stepTitle{
				font-size: 1.2em;
				font-weight: bold;
				color: #333;
			}
			#FormSteps li.current a span.stepTitle{
				color: #fff;
			}
			#FormSteps li a span.obligationStatus{
				font-size: 1.1em;
				color: #666;
			}
			#FormSteps li.current a span.obligationStatus{
				color: #aaa;				
			}
			#FormSteps li a:hover span.stepTitle,
			#FormSteps li a:hover span.obligationStatus{
				color: #e3003d;
			}
			#FormSteps li a img{
				position: absolute;
				top: 50%;
				margin-top: -10px;
				right: 1em;
				width: 20px;
				height: 20px;
			}
			.lt7 #FormSteps li a img{
				top: 1.7em;
				margin: 0;
			}
/*************************
 CONTENT - TEXT (Wrap your text inside .typography class)
 **************************/
#ContentHelp{
	position: absolute;
	top: 0;
	right: 0;
	width: 6em;
	height: 1.5em;
	text-align: right;
}
	#ContentHelp a{
		font-size: 1.1em;
		line-height: 1.4em;
	}
	#ContentHelp img{
		margin-right: 0.3em;
		vertical-align: middle;
	}
.subTitle{
	color: #728888;
}
.typography{
	font-size: 1.2em;
	line-height: 1.66666;
	padding-right: 5em;
}
	.typography table,
	.typography blockquote,
	.typography p,
	.typography dl,
	.typography ol,
	.typography ul{
		margin-bottom: 1.6666em;
	}
	.typography ol,
	.typography ul{
		list-style-position: outside;
	}
		.typography ul li{
			padding-left: 2em;
		}
		.typography ol li{
			margin-left: 2em;
			padding: 0;
			background: none;
		}
		.typography ul li{
			background: url('../images/general/bull_1.gif') no-repeat 0.4em 0.4em; 
		}
		.typography ol li{
			list-style: decimal;
		}
			.typography ol li ul,
			.typography ol li ol,
			.typography ul li ol,
			.typography ul li ul{
				margin-bottom: 0;
			}
				.typography ol li ul li,
				.typography ul li ul li{
					background: url('../images/general/bull_2.gif') no-repeat 0.4em 0.4em;
					padding-left: 2em;
					margin: 0;
					list-style: none; 			
				}
				.typography ol li ol li,
				.typography ul li ol li{
					background: none;
					list-style: decimal;
					padding: 0;
					margin-left: 2em;
				}
					.typography ol li ul li ul,
					.typography ol li ul li ol,
					.typography ol li ol li ol,
					.typography ul li ol li ol,
					.typography ul li ul li ol,
					.typography ul li ul li ul{
						margin-bottom: 0;
					}
						.typography ol li ul li ul li,
						.typography ol li ol li ul li,
						.typography ul li ul li ul li{
							background: url('../images/general/bull_3.gif') no-repeat 0.4em 0.4em;
							padding-left: 2em;
							margin: 0;
							list-style: none; 			
						}
						.typography ol li ul li ol li,
						.typography ul li ol li ol li{
							background: none;
							list-style: decimal;
							padding: 0;
							margin-left: 2em;
						}
	.typography hr{
		margin-bottom: 1.6666em;
	}
	.typography p.highlighted_1{
		background: #dae3e3;
		padding: 1.66666em;
	}
	.typography p.highlighted_2{
		border: 0.16666em solid #dae3e3;
		padding: 1.5em; 		
	}
/*************************
 CONTENT - FORMS (Wrap your forms inside .forms class)
 **************************/
.forms{
	font-size: 1.1em;
	line-height: 1.54545;
}		

    #StepStatus{
        font-size: 1.1818em;
        padding: 1.5384em;
        padding-left: 8.5384em;
        margin-bottom: 1.923em;
        line-height: 1.5384;
    }
    #StepStatus.ok{
        background: #e8f4d0 url('../images/general/ico_ok_big.gif') no-repeat 1.5384em 1.5384em;
    }
    #StepStatus.todo{
        background: #fcfdc8 url('../images/general/ico_todo_big.gif') no-repeat 1.5384em 1.5384em;
    }
    #StepStatus.warning{
        background: #efa69d url('../images/general/ico_warning_big.gif') no-repeat 1.5384em 1.5384em;
    }
/*************************
 TABLES (wraped in .forms class)
 **************************/
.forms table{
	border-top: 0.6em solid #728888;
	border-left: 0.1em solid #ccc;
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 1.6363em;
}		
		.forms table th,
		.forms table td{
			border-right: 0.1em solid #ccc; 
			border-bottom: 0.1em solid #ccc;
			padding: 0.8em 0.5em;
			vertical-align: middle; 
		}
		/* the whole th should be clickable instead of just the span */
		.forms table th{
			background: #f5f5f5;
		}
		
		table#EventsManagementTable tr th.wicket_orderDown {
      background: url(../images/general/table_sort_down.png) no-repeat scroll right center transparent; }
      table#EventsManagementTable tr th.wicket_orderUp {
      background: url(../images/general/table_sort_up.png) no-repeat scroll right center transparent; }
      table#EventsManagementTable tr th.wicket_orderNone {
      background: url(../images/general/table_sort.png) no-repeat scroll right center transparent; }
		
      /*		
      .forms table th.imgIconSort{
			cursor: pointer;
			background: #f5f5f5 url('../images/general/table_sort.png') no-repeat right center; 
		}
		.forms table th.imgIconSortUp{
			background-image: url('../images/general/table_sort_up.png');
		}
		.forms table th.imgIconSortDown{
			background-image: url('../images/general/table_sort_down.png');
		}
		*/
		
		.forms table th.imgIconSort:hover{
			background-color: #ddd;
		}
			/* keep the span to guarante enough space on the right so the name dosn't cover the icon */
			.forms table th span{
				padding-right: 1.2em;
				cursor: pointer;
			}
		.forms table tr td{
			background: #fff;
		}
		.forms table tr:hover td{
			background: #dae3e3;
		}

/*************************
 QLEO added stuff
 **************************/
 
/* Layout des DatePicker */
.yui-skin-sam table{
   width: 200px;
}



/* Layout des KSLDatePicker */
div.datepicker {
   margin-right: 10px;
   display: inline-block;
}

.datepicker li{
   display:inline;
}

/* Distance between li-Elements to prevent indention of 2nd line in FF3.6.xx on Windows*/
ol.regelD li, fieldset.regelZ li {
	margin-bottom: 5px;
}

/* Dient dazu, das aktuell angeklickte MenuItem zu markieren */
#homePage li#linkHomePage a,
#pendenzenPage li#linkPendenzenPage a,
#veranstaltungenPage li#linkVeranstaltungenPage a,
#uebersichtPage li#linkUebersichtPage a
   { 
      background: #f5f5f5;
      color: #e3003d;
  } 

/* Dient dazu, das aktuell angeklickte MenuItem zu markieren */
#grunddatenPage li#linkGrunddatenPage,
#beschreibungPage li#linkBeschreibungPage,
#dozentenPage li#linkDozentenPage,
#studiumPage li#linkStudiumPage,
#terminePage li#linkTerminePage,
#raeumePage li#linkRaeumePage
	{ 
	 background-position: left bottom;
    border: 0.1em solid #222222;
    color: #FFFFFF;
  } 

#grunddatenPage li#linkGrunddatenPage a span.stepTitle,
#beschreibungPage li#linkBeschreibungPage a span.stepTitle,
#dozentenPage li#linkDozentenPage a span.stepTitle,
#studiumPage li#linkStudiumPage a span.stepTitle,
#terminePage li#linkTerminePage a span.stepTitle,
#raeumePage li#linkRaeumePage a span.stepTitle
   { 
    color: #FFFFFF;
  } 

/* *********************
   Bereich: Druckansicht
   ********************* */   

div.printView table {
  background-color: transparent;
  font-size: 0.8em;
  border-collapse: collapse; 
  border: 1px solid #e6e6e6; 
}
div.printView thead {
   background-color: transparent;
}
div.printView td, th {
   text-align: left; 
   padding: 0.3em 0.6em 0.5em 0.6em;
   border: none;
}
div.printView td {
   /*border: 1px solid #e6e6e6;*/
   padding: 0.3em 0.6em 0.2em 0.6em;
   line-height: 1.2em;
}
div.printView td.text {
   color: #000
}

div.printView h4 {
   font-size: 1.2em;
   
}
div.printView h5 {
   font-style: italic;
}

div.printView .missing {
   color: #CC0000;
   font-style: italic;
}
div.printView .empty {
   color: #AAA;
   font-style: italic;
}

/* Status-Icons */
div.printView.imgIconOK, div.printView.imgIconWarning, div.printView.imgIconDefault, div.printView.imgIconTodo { padding: 0; margin: 0;}  /* oben, rechts, unten, links */

/* Layout AutocompleteField */
div.wicket-aa {
	font-family: Arial,Helvetica,sans-serif;
   font-size: 12px;
   background-color: white;
   border-width: 1px;
   border-color: #cccccc;
   border-style: solid;
   padding: 2px;
   margin: 1px 0 0 0;
   text-align:left;
}
div.wicket-aa ul { 
	list-style:none; 
	padding: 2px; 
	margin:0; 
}
div.wicket-aa ul li.selected { 
	/*background-color: #FFFF00; Gelb*/
	background-color: #E3003D; /* augenkrebs-magenta */
	padding: 2px; 
	margin:0; 
}