@CHARSET "UTF-8";
/**
 * Global constants.
 * =================
 *
 * Prevent rogue browsers from adding their default margins, and leave
 * images as they should be if maipulated.
 */
body{
	margin: 0px;
	padding: 0px;
}

img{
	border: 0px;
	margin: 0px;
	padding: 0px;
}

table{
	margin: 0px;
	padding: 0px;
}

td{
	vertical-align: top;
}

dt{
	font-weight: bold;
}

dl, ul{   /* For Safari and Opera */
	padding-top: 0;
	margin-top: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

dd p{ /* For MSIE, Opera, Safari */
	padding-bottom: 0;
	margin-bottom: 0;
}

dl dl{
	padding-top: 1em;
}

address{
	padding: 1em;
	font-style: normal;
	font-weight: bold;
}
/**
 * Main division
 * =============
 *
 * Fill the whole screen with this site.
 */
#main {
	width: 100%;
	height: 100%;
}
 
/**
 * Header
 * ======
 *
 * The header uses the full width. In this case, there is a 
 * logo on the left hand side, and a main h1 title will be
 * used offset from this. The ofset is supplied in the logo
 * padding.
 */
#title_bar {
	width: 100%;
	display: block;
	float: left;
}

#logo {
	width: 200px;
	height: 75px;
	margin: 5px;
	float: left;
}

#title_bar h1{
	margin-top: 30px;
}
/**
 * Menu
 * ====
 *
 * Full width horizontal menu, with a high priority to prevent 
 * being hidden behind other widgets, images, or text.
 */
#menu{
	width: 100%;
	display: block;
	float: left;
}

#menu ul{
	position: relative;
	float: left;
	margin: 0px;		/* remove standard margin & padding for inline*/
	padding: 0px;		/* otherwise the menu is too far right. */
	list-style: none;
}

#menu ul li{
	position: relative;
	float: left;
	z-index: 2;
}

#menu ul li a{
	display: block;
	float: left;
	margin: 3px 1px 0px 1px;
	padding: 3px 10px 9px 10px;
	z-index: 2;
}

/**
 * Menu Items 
 * ----------
 */
#menu ul li ul{
	position: absolute;
	top: 29px;
	left: 0px;
	width: 150px;
	display: none;
	float: left;
	z-index: 2;    /* Doesn't work in MSIE - menu still gets hidden behing images */
}

#menu ul li ul li{
	position: relative;
	width: 150px;
	height: 25px;
	z-index: 2;
}

#menu ul li ul li a{
	width: 140px;
	height: 20px;
	padding: 3px 0px 0px 8px;
	margin: 1px;
	z-index: 2;
}
/* Really we should use the '>' extension to target the inner ul block. Earlier 
   browsers cannot handle this, and it is a positive evil in IE 5 and 6 . These
   will have to be changed in time, but for now, explicitly target the elements.
   JS is used to handle the IE 5/6 browsers behaviour.
*/
#menu ul li:hover ul{
	display: block;
}

#menu ul ul:hover{
	display: block;
}
/**
 * Left Column
 * ===========
 *
 * There are two left columns, depending on whether a gallery is 
 * being displayed or not. We are aiming for three normal viewing
 * formats where columns are concerned: a 25-75 two column screen 
 * a 25-50-25 three column screen , or a 20-50-30 gallery
 */
#left_column{
	width: 25%;
	display: block;
	float: left;
}


/**
 * Main central page
 * =================
 *
 * There are three main pages. The first, called 'broadsheet', is a 
 * simple single screen. This is followed by 'page_right' which is 
 * for a two column layout. The final page is 'main_page' which can 
 * be used for a three column layout.
 */

#broadsheet{
	width: 100%;
	display: block;
	float: left;
}

#main_page{
	width: 49%;
	display: block;
	float: left;
}

/**
 * Submenu horizontal
 *
 */
#sub_menu, #sub_menu_main{
	display: block;
	width: 100%;
}

#sub_menu ul{
	margin: 0px;				/* remove standard margin & padding for inline*/
	padding: 4px 0px 6px 0px;	/* otherwise the menu is too far right. */
	display: block;
	float: left;
	list-style: none;
	z-index: 0;
}

#sub_menu ul li{
	float: left;
}

#sub_menu ul li a{
	margin: 0px 1px;
	padding: 3px 10px 6px 10px;
}

/**
 * Right Column
 * ============
 */
#right_column{
	width: 25%;
	display: block;
	float: left;
}

#right_column p{
	margin-left: 10%;
	margin-right: 5%;
}

#right_column hr{
	margin-left: 5%;
}


/**
 * Footer
 * ======
 */
 #footer{
 	clear: both;
 	width: 100%;
 }

/**
 * Global Widgets
 * ==============
 */
 
/**
 * Locations
 *
 * To place widgets left, centre or right in an element where they are 
 * not in this position (eg. <caption>, <p>)
 */
.left{
	text-align: left;
}
.right{
	text-align: right;
}
.centre{
	text-align: center;
}

/* Put images to the left of a div, or in the results boxes, float the title left for images to the right.*/
img.left, .left_titles, img.padded_left, .left_img_block{ 
	float: left; 
	padding: 0px 1em 0px 0px;
}

img.right, img.padded_right, .right_img_block{ 
	float: right; 
	padding: 0px 0px 0px 1em;
}

img.centre, img.padded_centre, .img_block{ 
	display: block;
	text-align: center;
	margin: 0 auto;
}
 
img.padded_centre, img.padded_left, img.padded_right{
	padding-top: 1em;
}

/**
 * Leveller Clear the floats - use in <div> or <p> below floating divs or images
 * 			to align any borders on containers.
 * Page_break clears the floats, and centers text for a logical page break. This
 * 			can be used for the return to page top arrows.
 *      
 */
.leveller, .page_break{
	clear: both;
}

.page_break{
	padding: 2em 0 0 0;
	text-align: center;
}
/**
 * tabtop 
 *
 * This is from a concept based on the idea of the "Nifty Corners",
 * ie. creating rounded panel corners without having to use images,
 * published by Alessandro Fulciniti
 * http://www.html.it/articoli/nifty/index.html
 *
 * We use the tabtop for all headers in infoboxes.
 */

.tabtop
{
	width: 100%;
	display: block;
}

.tabtop .topline, .tabtop .midupper, .tabtop .midlower, .tabtop .bottomline{ 
	display: block;
	height: 1px;
	overflow: hidden;
}

.topline{
	margin: 0 5px
}

.midupper{
	margin: 0 3px
}

.midlower{
	margin: 0 2px
}

.tabtop .bottomline{ 
	margin: 0 1px;
	height: 2px
}

/**
 * "tables"
 *
 * In the first and second versions of the RTT Web, extensive use was
 * made of tables. In this version, we are replacing all but the results
 * tables with bordered divisions. For the purpose of migration, the 
 * old names will be use to be able to correctly identify widges being 
 * rehashed.
 */
.tablebox, .tablebox_narrow, .infobox{
	clear: both;
	margin: 10px auto 0px auto;
}

.tablebox{
	width: 80%;
}

.tablebox_narrow{
	width: 60%;
}

/**
 * Tabbed table for use inside tablebox_narrow. Contained a border table 
 * which stretches out with width of the container.
 */
.tabbed_table{
	margin: 0 auto; 
	width: 100%; 
}
/**
 * TableTitle is being replaced by using 'th' and 'p class="table_title"'
 * BorderTable is being replaces using 'p class="border_table"'
 */
.table_title{
	margin: 0px;
	padding: 0px 0px 0px 5px;
}

.border_table, .infobox_table{
	display: block;
}

.border_table{
}

.border_table img{
}

.border_table p{
	margin:10px;
}
/**
 * Infoboxes - Basically used for containers info in div where a size 
 *             reduction is necessary, such as left_column, right_column
 *             or main_page contents.
 */
.infobox{
	width: 90%;
}

.infobox_title{
	margin: 0px;
}

.infobox_table{
	padding: 5px;
}

.infobox_table p{
	margin: 5%;
}
.infobox_link{
	margin: 3px 0px 3px 20%;
}

/**
 * The following divs are containers for the Judges CVs. These can be
 * placed into a border_table div, and will keep the images and text
 * seperate. Top avoid the borders collapsing above the image, use
 * a "leveller" div or paragraph as the bottom element. Smaller images
 * should be added without size parameters, larger images with a width
 * of 100% to keep them in the div. Template in workingtest/templates
 */
.judge_img{
	float: left;
	width: 30%;
}

.judge_text{
	float: left;
	width: 70%;
}

/**
 * Results box - To contain tables for Prüfungsergebnisse. Fixed width.
 * Display box - The same without borders for the Columned boxes below.
 */
 .result_box, .display_box{
 	width:765px; 
 	margin: 2em auto 0 auto;
 	padding:0 1%;
 }
 
 .result_box{
 	border: 1px solid;
 }
 
 .result_box h3, .display_box h3{
 	text-decoration: underline;
 }
 
  /* Title box for the results titles. Inherits from ".left" above.*/
 .left_titles{
 	width: 50%;
 }
 
 .display_box{
 	text-align: justify;
 }
 
/**
 * Columned boxes are description lists that are presented in a box form. 
 * These were originally developed to accommodate tables that Gerd Faßbender
 * created for the new dummy course information. They look great, so I decided
 * to keep them in CSS. The container is a "display_box" which has no border.  
 * The units are then description lists. See the formats above for <dl>, <dt>
 * and <dd> under the globals before making any changes to these, as there 
 * are issues in the current MSIE, Opera, and Safari browsers with the padding.
 */

.list_3_col, .list_3_col_r, .list_3_col_b, .list_3_col_br,
.list_2_col, .list_2_col_r, .list_2_col_b, .list_2_col_br,
.list_1_col, .list_1_col_b{
	margin-bottom: 0;
	margin-top: 0;
	border-top: 1px solid;
	border-left: 1px solid;
	float: left;
}

.list_3_col, .list_3_col_r, .list_3_col_b, .list_3_col_br{
	width: 33%;
	height: 17em;
}

.list_2_col, .list_2_col_r, .list_2_col_b, .list_2_col_br{
	width: 49%;
	height: 19em;
}

.list_1_col, .list_1_col_b{
	width: 98%;
	height: 35em;
}

.list_3_col_r, .list_3_col_br,
.list_2_col_r, .list_2_col_br,
.list_1_col, .list_1_col_b{
	border-right: 1px solid;
}


.list_3_col_b, .list_3_col_br,
.list_2_col_b, .list_2_col_br,
.list_1_col_b{
	border-bottom: 1px solid;
}

.col_list_term{
	text-align: center; 
	background-color: #c5c5c5; 
	width: 100%;
	font-weight: bold;
}

/**
 * Grids to contain images.
 */
 
.grid_3_col, .info_3_col, .info_3_col_r{
	float: left;
	width: 33%;
}

.grid_2_col{
	float: left;
	width: 49%;
}
.info_3_col{
	margin-top: 2em;
}

.info_3_col table{
	width: 90%;
	margin: 2em auto;
}

.info_3_col p{
	margin: 0 5%;
	text-align: center;
}