/***************************************************************
*  rzanwendungen.css
*  Created on : Oct 11, 2007, 2:39:58 PM
*  Author     : Wilfred Gasper (ga), Robert Briesemeister (rb)
*  last change: May 29, 2009
*  history:
*      Oct 12, 2007:
*          - Grundgeruest - erste Version (ga)
*      Oct 30, 2007:
*          - NEU Blockgestaltung mit Schrittueberschrift (rb)
*          - NEU JSF - Messages (rb)
*          - NEU JSF - Login (rb)
*          - NEU JSF - Selectkomponenten (rb)
*      May 29, 2009:
*          - Wicket - Feedbackpanel (ga)
*          - fuer Wicket-Tooltips - z-Indizes entfernt
* 
*  Description:
*      CSS-Formatierungen fuer Webanwendungen der Abteilung
*      Kommunikation / Infodienste
*
*      Diese CSS-Datei basiert auf der standard.css des CMS
*      des Rechen- und Kommunikationszentrums
***************************************************************/

/***************************************************************
*      Allgemeine Formatierungen
***************************************************************/
html{
    height:		100%;
    min-width:          50%
}

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

body{
    background:         #e5e5e5;
    font-family:        Arial, Helvetica, sans-serif;
    position: 			relative;
    margin:             0px auto;
    max-width:          128em;
    min-width:          320px;
}

img{
    border:		medium none;
}

.fett{
    font-weight:	bold;
}

table{
}

a {
    color:              #00529F;
    text-decoration:    none;
}

a:hover {
    text-decoration:    underline;
}

p{
    color:              #333;
    line-height:        140%;
    padding-bottom:     20px;
    margin-top: 	1px;
}

span {
    /*font-size:          140%;*/
}

.table,
.navigation {
}

.navigation_quer {
}

.description {
}

.descriptionSmall{
}
/****** Ende Allgemeine Formatierungen *************************/


/***************************************************************
*      Textpositionierung
***************************************************************/
.right{
    text-align: 	right;
}

.left{
    text-align: 	left;
}

.center{
    text-align: 	center;
}
/****** Ende Textpositionierung ********************************/


/***************************************************************
*      Headlines
***************************************************************/
h1{
    font-weight:        normal;
    margin-bottom:      40px;
    color:              #262626;
}

h2{
    font-weight:	normal;
    padding:            15px 0px;
    margin:             0px 10px 15px 0px;
    color:		#333;
}

h3{
    padding:            15px 0px;
    margin:             0px 10px 15px 0px;
    color:		#333;
}

h4{
    margin-bottom:	4px;
    margin-top:		5px;
    color:		#333;
}
/****** Ende Headlines *****************************************/


/***************************************************************
*      Formularfelder
***************************************************************/
input{
    margin-bottom:	2px;
    vertical-align:     middle;
}

select{
    margin-bottom:      2px;
    vertical-align:     middle;
}

.formular_rahmen table td {
    border-right:	0px;
    border-bottom:	0px;
}

.formular_rahmen table tr {
    border-right:       1px solid #000;
}

.formular_rahmen table {
    border:		1px solid #000;
    padding:		1em 1em 1em 1em;
    background:         #FFF;
    margin-bottom:      0.8em;
}

.radio, .chekbox {
	padding-left: 29px;
}
/****** Ende Formularfelder ************************************/


/***************************************************************
*      Tabellen
***************************************************************/
table{
    border-collapse: 	collapse;
    border:		1px solid #000;
    caption-side:	top;
    margin-bottom:	20px;
} 

td{
    border-right:	1px dotted #000;
    border-bottom:	1px solid #000;
    padding:		0.3em 0.7em;
}

.td{
    border-right:	1px dotted #000;
    border-bottom:	1px solid #000;
    padding:		0.3em 0.7em;
}

th{
    border:		1px solid #000;
    padding:		0.3em 0.7em;
    background:		#e5e5e5;
}

.th {
    border:		1px solid #000;
    padding:		0.3em 0.7em;
    background:		#e5e5e5;
    font-weight:        bold;
}

th a,
.th a{
    color:              #666666;
    text-decoration:    none;
}

td a{
    text-decoration:    none;
}

th a:hover,
td a:hover,
.th a:hover{
    text-decoration:    underline;
}

th.ohne{
    border-top:		0px;
    border-left:	0px;
    border-right:	1px solid #000;
    background:		none;
}

th.zelle_ohne_farbe{
    border-top:		0px;
    border-left:	0px;
    border-right:	1px solid #000;
    background:		none;
}

tr.tabellenzeile_farbig td{
    background: 	#e5e5e5;
}
/****** Ende Tabellen ******************************************/


/***************************************************************
*      Liste
***************************************************************/
li a{
    text-decoration:    none;
}

li a:hover{
    text-decoration:    underline;
}

li em {
}

li span {
}

li span.footer {
}
/****** Ende Liste ********************************************/


/***************************************************************
*      Seitenkopf
***************************************************************/
#kopf{
    background-color:	#f7f7f7;
    overflow:           hidden;
    height: 		160px;
}

#blackbar{
    background-color:	black;
    height: 		40px;
    width:              100%;
}

#backlink{
    float:		left;
}

#rwthlogo{
    margin-left:	72px;
    display:            block;
    /*box-shadow:         0px 3px 7px 2px #CCC;*/
    background: 	url(/images/weblogo-de.png);
    width:              343px;
    height:             110px;
}

#headerPanel{
    margin:             -31px 12px 12px 12px;
    float:              right;
}
/****** Ende Seitenkopf ****************************************/


/***************************************************************
*      Sprachauswahl
***************************************************************/
#sprachauswahl{
    margin:             10px;
    float:              right;
    width:              auto;
}

#sprachauswahl a{    
    text-decoration:    none;
    color:              #666;
}

#sprachauswahl a:hover {
    text-decoration:    underline;
}

.DeMobile {
    background: none;
}

.EnMobile {
    background: none;
}
/****** Ende Sprachauswahl *******************************************/


/***************************************************************
*      Quernavigation
***************************************************************/
#quernavi_rahmen{
    position:		relative;
    width:		auto;
    background:		#f7f7f7;
    white-space:     	nowrap;
}

#quernavi_inhalt ul{
    display:            inline;
}

#quernavi_inhalt li{
    display:         	inline;
    margin-right:       2px;
    padding:            18.5px 0px;
    float:              left;
}

#quernavi_inhalt li a:link,
#quernavi_inhalt li a:visited{
    color:		#333;
    line-height:        22px;
    font-weight:        bold;
    text-transform:     uppercase;
    text-decoration:    none;
    margin-right:       2px;
    padding:            20px;
}

#quernavi_inhalt li a:hover,
#quernavi_inhalt li a:focus,
#quernavi_inhalt li a:active{
    color:		#333;
    background:         #e6e6e6;
    padding:            20px;
}

#quernavi_inhalt  a#hier:link,
#quernavi_inhalt  a#hier:visited,
#quernavi_inhalt  a#hier:hover,
#quernavi_inhalt  a#hier:active{
    color:		#333;
    background:         #FFFFFF;
    padding:            20px;
}

#quernavi_inhalt.normal{
    padding-left:       201px;
    height:             auto;
    overflow:           hidden;
}

#quernavi_inhalt.leer{
}

/* fuer Anzeige eines eingeloggten Users in der Quernavigation */
#quernavi #loggedInUser {
    right:              1px;
    position:           absolute;
    display:            inline;
}
/****** Ende Quernavigation ************************************/


/***************************************************************
*      Breadcrumb-Navigation
***************************************************************/
#breadcrumb_rahmen {
    background:         #fff;
    width:              100%;
    max-height:         40px;
}

#breadcrumb_inhalt.normal {
    border-bottom:      2px solid #000;
    padding:            10px 0px;
    overflow:           hidden;
    margin:             0px 10px;
    padding-left:       1px;
}

#breadcrumb_inhalt.leer {    
}

#breadcrumb div {
    margin:             40px 10px 0px 0px;
    float:              left;
    overflow:           hidden;
}

#breadcrumb_inhalt a {
    text-decoration:    none;
}

#breadcrumb_inhalt a:hover,
#breadcrumb_inhalt a:focus {
    text-decoration:    underline;
}

#breadcrumb_inhalt li {
    float:              left;
    list-style:         none outside none;
    padding-left:       10px;
    margin-left:        10px;
}

#breadcrumb_inhalt li.home a {
    display:            block;
    text-indent:        -4000px;
    width:              14px;
    height:             14px;
}

#breadcrumb_inhalt li.home {
    background:         none;
    margin-top:         1px;
}
/****** Ende Breadcrumb-Navigation ****************************/


/***************************************************************
*      Allgemeiner Inhaltsrahmen
***************************************************************/
#rahmen {
    background:		#ffffff url(./backgrounds/hauptnavigation.gif) repeat-y top left;
    height:             auto !important;
    height:             100%;
    min-height:         100%;
}

#rahmen_ohne_menu {
    padding:		0em;
    background:		#ffffff;
}
/****** Ende allgemeiner Inhaltsrahmen *************************/


/*******************************

@media screen and (max-width: 700px) {
    
}********************************
*      Spalte links - Hauptnavigation
***************************************************************/
#hauptnav_rahmen{
    float:		left;
    width:		200px;
    /*height:             auto !important;*/
    height:             100%;
    min-height:         100%;
    /*background:         url(./backgrounds/border-vertical.gif) repeat-y scroll 190px 100% transparent;*/
}

#hauptnav_inhalt {
    position: 		relative;
}

#hauptnav_inhalt ul {
    margin-top:         40px;
}

#hauptnav_inhalt li {
    list-style:         none outside none;
    font-size:	        .9em;
    font-weight:        300;
    line-height:    	2em;
    background-image: 	url(./backgrounds/border-50.gif);
    background-position:    bottom;
    background-repeat: 	no-repeat;
    text-align:         left;
    padding:            1px 0px 2px;
    margin:             0px 10px;
}

#hauptnav_inhalt li a:link,
#hauptnav_inhalt li a:visited{
    color:		#333;
    text-decoration:    none;
    padding:            9.5px 20px;
    display:            block;
}

#hauptnav_inhalt li a:hover,
#hauptnav_inhalt li a:focus{
    color:		#FFF;
    background:         #00549F;
    text-decoration:    none;
    display: 		block;
}

#hauptnav_inhalt a#hier,
#hauptnav_inhalt a#hier,
#hauptnav_inhalt a#hier,
#hauptnav_inhalt a#hier{
    color:		#FFF;
    background:         #00549F;
    font-weight:        bold;
    text-decoration:    none;
    display: 		block;
}

/****** Ende Hauptnavigation ***********************************/


/***************************************************************
*      Inhalt
***************************************************************/
#inhalt_rahmen{
    width:		auto;
    margin-left:        190px;
    border-right:       0;
    min-height:         24em;
    display:            table-cell;
    background:         url(./backgrounds/border-vertical.gif) repeat-y scroll 0px 100% transparent;
}

#inhalt_rahmen_ohne_menue{
    width:		auto;
    border-right:       0px;
    min-height:         35em;
    padding: 50px;
}

#inhalt{
    position: 		relative;
    overflow:		visible;
    color:		#000;
    height:		1%;
}

#inhalt ul{   
    margin-top:		5px;
    margin-bottom:      15px;
    margin-left:        20px;
}

#inhalt ol{
    margin-top:		5px;
    margin-bottom:      15px;
    margin-left:    	27px;
}

#inhalt ul.suchergebnisse{

}

#inhalt ul.suchergebnisse li{
    list-style:		none;
    margin-bottom:      15px;
    text-indent:        -10px;
}

#inhalt ul li{
    list-style:         square;
    margin-left:        -3px;
}

#inhalt ul li li{
    list-style: 	disc;
    margin-left:        -3px;
}

#inhalt li.pfeil{
    list-style-image:   url(./backgrounds/pfeil_r.gif)
}

#inhalt .bildbox{
    width:              270px;
    height:		11em;
    float:		left;
    margin-right:       10px;
    margin-bottom:      10px;
    padding-left:       10px;
    border-left:        3px solid #595959;
}

#inhalt .bildbox img{
    float:		left;
}

#inhalt .bildbox ul{
    float:		right;
    width:		160px;
}

#inhalt .imagebox{
    margin-bottom:      15px;
    float:		left;
}

#inhalt .imagebox img{
    float:      	left;
    margin-right:       50px;
    margin-bottom:      25px;
}

#inhalt .imagebox ul{
    list-style-type:        disc;
    list-style-position:    inside;
}

#inhalt p.clear{
    clear:              both;
}

#inhalt img{
    margin-top:		10px;
    margin-top:		2px;
    margin-bottom:      10px;
    padding-left:       10px;
    padding-right:      10px;
}

.code{
    font-family:        "Courier New",monospace;
}

pre{
    font-family:        "Courier New",monospace;
    white-space:        pre;
    width:              70%;
    background-color:   #FFF;
    margin:             1em auto 1em 3em;
    padding:            1em;
    border:             dotted 1px #000;
}
/****** Ende Inhalt ********************************************/



/***************************************************************
*      Footer
***************************************************************/
#footer_rahmen {
    background:         #333;
    width:              100%;
}

#footer_inhalt.normal {
    overflow:           hidden;
    color:              #fff;
    margin:             auto;
    max-width:          880px;
    display:            table;
}

#footer_inhalt.leer {  
    display:            none;
}

#footer_inhalt a {
    color:              #CCC;
    text-decoration:    none;
    font-size:          100%;
    padding-left:       22px;
}

#footer_inhalt h3 {
    color:              #FFF;
    margin:             0px;
    margin-left:        10px;
    padding-top:        0px;
}

#footer_inhalt li {
    background:         url('./backgrounds/border-25.png') repeat-x scroll 0px 100% transparent;
    margin:             0px 0px 10px;
    padding:            0px 0px 8px;
}

#footer_inhalt ul {
    margin-left:        10px;
}

#footer_inhalt ul li {
    list-style:         none outside none;
}

#footer_inhalt a:hover,
#footer_inhalt a:focus {
    text-decoration:    underline;
}

.block {
    margin:             20px 20px 20px 0px;
    float:              none;
    height:             auto;
    display:            inline-block;
    vertical-align:     top;
}
/****** Ende Footer ********************************************/


/***************************************************************
*      Linkklassen (externe, interne, pdf, word, zip, ...)
***************************************************************/
a.externerlink {
    background-image: 	url(./backgrounds/externerlink.gif);
    background-position:    left;
    background-repeat: 	no-repeat;
    padding-left: 	16px
}

a.pdf{
    background-image: 	url(./backgrounds/pdf_icon.gif);
    background-position:    right;
    background-repeat: 	no-repeat;
    padding-right: 	20px
}

a.word{
    background-image: 	url(./backgrounds/word_icon.gif);
    background-position:    right;
    background-repeat: 	no-repeat;
    padding-right: 	20px
}

a.ppoint{
    background-image: 	url(./backgrounds/ppt_icon.gif);
    background-position:    right;
    background-repeat: 	no-repeat;
    padding-right: 	20px
}

a.zip{
    background-image: 	url(./backgrounds/zip_icon.gif);
    background-position:    right;
    background-repeat: 	no-repeat;
    padding-right: 	20px
}

a.audio{
    background-image: 	url(./backgrounds/audio_icon.gif);
    background-position:    right;
    background-repeat: 	no-repeat;
    padding-right: 	20px
}

a.video{
    background-image: 	url(./backgrounds/video_icon.gif);
    background-position:    right;
    background-repeat: 	no-repeat;
    padding-right: 	20px
}

a.th_intern{
    background-image: 	url(./backgrounds/rwth-intern.gif);
    background-position:    left;
    background-repeat: 	no-repeat;
    padding-left: 	16px
}
/****** Ende Linkklassen ***************************************/

#schrittblock.center {

    margin-top:          2%;
    margin-left:         15%;
    margin-right:        15%;
    border-bottom:       2px solid;

}

#schrittblock.step {    
    font-variant:        normal;
    font-size:           medium;
    border-bottom:       2px solid;
    font-weight:         bold;
    text-align:          left;
}
/****** Ende Blockgestaltung mit Schrittüberschrift **/

/*******************************************************
*       JSF - Messages
*******************************************************/
.message_error{
    color:               red;
    font-weight:         bold;
}

.message_info{
    color:               green;
    font-weight:         bold;
}

.message table{
    border:              0px;
}
/******* Ende JSF- Messages *************************/

/*******************************************************
*       JSF - Login 
*******************************************************/

.login table{
    border:             1px ridge;
}

.login table th{
    border:		1px solid #000;
    padding:		0.3em 0.7em;
    background:		#595959;
}

.login table td{
    border:		0px;
    padding:		0.3em 0.7em;
    text-align:         left;
}
.login .button{
    width:              150px;
}
/******* Ende JSF- Login *************************/

/*******************************************************
*       JSF - Selectkomponenten
*******************************************************/
.jsfList table{
    border:             0px;
}

.jsfList table td{
    border:             0px;
}
/******** Ende JSF - Selectkomponenten ****************/

/*******************************************************
*       Wicket - FeedbackPanel
*******************************************************/
#inhalt ul.feedbackPanel {
    margin:             0 0 0 0;
}

#inhalt ul.feedbackPanel li {
    list-style-type:    none;
}

#inhalt ul li.feedbackPanelERROR {
    color:              red;
}
/******** Ende Wicket - FeedbackPanel *****************/

/*******************************************************
*       Deviced < 750px
*******************************************************/
@media screen and (max-width: 750px) {
    #hauptnav_rahmen {
        width:          100%;
        padding-bottom: 40px;
    }

    #hauptnav_inhalt li {
        background-image:   url(./backgrounds/border-50.gif);
        background-repeat:  repeat-x;
    }

    #quernavi_inhalt.normal{
        padding-left:   0px;
        margin:         0px 10px;
    }

    #inhalt {
        padding:        10px;
    }

    #rwthlogo {
        margin:         0px;       
        background: 	url(/images/weblogo-mobil-de.png);
        width:          177px;
        height:         60px;
        box-shadow:     none;
    }

    #blackbar {        
        height: 	60px;
    }

    #kopf {
        height:         120px;
    }

    #inhalt_rahmen_ohne_menue{
        margin-left:    0px;
        padding:        10px;
    }

    #sprachauswahl {
        float:          right;
        padding:        18px;
        margin:         0px;
        margin-top:     -57px;
        width:          auto;
        margin-right:   -3px;
    }

    #sprachauswahl a.DeMobile {
        padding-bottom:     7px;
        background-image:   url(./backgrounds/hiresicons.png);
        background-position:    9.5px -835px;
        background-size:    320px auto;
        text-indent:        800px;
        margin-right:       -770px;
        overflow:           hidden;
        display:            block;
    }

    #sprachauswahl a.EnMobile {
        padding-bottom:     7px;
        background-image:   url(./backgrounds/hiresicons.png);
        background-position:    5px -856px;
        background-size:    320px auto;
        text-indent:        800px;
        margin-right:       -770px;
        overflow:           hidden;
        display:            block;
    }

    #navi_mobil {
        float:              right;
        padding:            18px;
        margin:             0px;
        margin-top:         -57px;
        margin-right:       17px;
    }

    #navi_mobil a.navi_mobil_link_icon{
        background-image:   url(./backgrounds/hiresicons.png);
        background-position: 0 -733px;
        background-size:    320px auto; 
        text-indent:        800px;
        margin-right:       -800px;   
        padding-bottom:     19px;
        overflow:           hidden;
        display:            block;    
    }

    #quernavi_rahmen{
        background:         #ffffff;
    }

    #quernavi_inhalt ul{
        width:              100%;
        display:            block;
    }

    #quernavi_inhalt li{
        display:            inline;
        margin-right:       0px;
        padding:            4px 0px 0px 10px;
        float:              left;
        width:              100%;
        line-height:        40px;
        background:         url(./backgrounds/border-50.gif) repeat-x;
        background-position:    bottom;
        background-color:       #ececec;
    }

    #quernavi_inhalt li a{
        color:              #00529F;
        font-weight:        normal;
        text-transform:     none;
        text-decoration:    none;
        padding:            1px 0px 0px 30px;
    }

    #quernavi_inhalt li a:hover,
    #quernavi_inhalt li a:focus,
    #quernavi_inhalt li a:active{
        color:              #00529F;
        padding:            0px;
        text-decoration:    underline;
        font-weight:        normal;
        text-transform:     none;
    }

    #quernavi_inhalt li a:link,
    #quernavi_inhalt li a:visited{
        color:              #00529F;
        line-height:        40px;
        font-weight:        normal;
        text-transform:     none;
        text-decoration:    none;
        margin-right:       0px;
        padding:            1px 0px 0px 30px;
    }

    #quernavi_inhalt li a:hover,
    #quernavi_inhalt li a:focus,
    #quernavi_inhalt li a:active{
        color:          #00529F;
        padding:        1px 0px 0px 30px;
    }

    #quernavi_inhalt  a#hier:link,
    #quernavi_inhalt  a#hier:visited,
    #quernavi_inhalt  a#hier:hover,
    #quernavi_inhalt  a#hier:active{
        color:		#00529F;
        padding:        1px 0px 0px 30px;
        padding:        1px 0px 0px 30px;
    }

    #quernavi_inhalt.normal{
        padding-left:       0px;
        height:             auto;
        overflow:           hidden;
    }

    #quernavi_inhalt.leer{
    }

    #headerPanel{
        margin:             10px;
        float:              left;
    }

    #headerPanel div.searchDescription {
        margin-top:         -8px;
    }
}
/******** Ende Devices < 750px *************************/

@media screen and (max-width: 900px) {
    #footer_inhalt.normal {
        width:              440px;
        display:            table;
    }
}

@media screen and (max-width: 450px) {
    #footer_inhalt.normal {
        width:              220px;
        display:            table;
    }
}

/*******************************************************
*       Maximaler Rand von 200px
*******************************************************/
@media screen and (min-width: 1680px) {
    body {
        max-width:      none;
        margin:         0px 200px;
    }
}
/******** Maximaler Rand von 200px *********************/
/* Success/Failure indicators for logout propagation. */

.success {
    background: url(../images/success-32x32.png) no-repeat left center;
    line-height: 36px;
    padding-left: 36px;
}
.failure {
    background: url(../images/failure-32x32.png) no-repeat left center;
    line-height: 36px;
    padding-left: 36px;
}