/******************************************************************************
 * Cascading-Style-Sheets-Datei um das Aussehen von Admidio anzupassen
 *
 * Copyright    : (c) 2004 - 2013 The Admidio Team
 * Homepage     : http://www.admidio.org
 * License      : GNU Public License 2 http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Dies ist die Haupt-CSS-Datei von Admidio. Hier koennen Sie das Aussehen
 * saemtlicher Module anpassen. Weitere spezifische Anpassungen koennen in den
 * weiteren CSS-Dateien gemacht werden.
 *
 *****************************************************************************/

/* Allgemeine Anpassungen */

.veryBigFontSize {
    font-size:          14pt;
    font-weight:        bold;
}
.smallFontSize {
    font-size:          9pt;
}

body {
    color:              #606465;
    padding:            15px;
    margin:             auto;
    font-size:          11pt;
    font-family:        Helvetica, Verdana, Arial, sans-serif;
    text-align:         center;
    background-color:   #96c4cb; 
    background-repeat:  repeat-x;
    background-attachment: fixed;
    background-image:   url(../images/background.png);
}

h1 {
    padding-top:        5px;
    margin-top:         0px;
    margin-bottom:      20px;   /*   20px   msp */
    font-size:          18pt;
    color:              #449ba6;
}

h3 {
    font-size:          12pt;
    color:              #333333;
    padding:            15px 0px 7px 0px;
}

p {
    padding-bottom:     5px;  /* msp Original = 10  */
    padding-top:        5px;  /* msp Original = 10  */
    margin:             0px;
}

img {
    border-width:       0px;
}

textarea, input, select {
    font-family:        Arial, sans-serif;
    font-size:          11pt;
}

button img {
     vertical-align:    middle;
     border-width:      0px;
}


/* Links */

a:link, a:visited {
/* msp bisher  color:              #222222;    */
/* msp bisher    text-decoration:    underline;   */
    color: #449ba6;    /*  bläulich  */
    text-decoration: none;
}

a:hover, a:active {
    text-decoration:    underline;
    color:              #FF9C00;
}

/* Layout fuer die Boxen (Termine usw.)
   Es ist in einen Kopf (boxHead) und einen Inhalt (boxBody),
   der aber den Kopfbereich umschliesst, unterteilt
   (z.B.: Ankuendigungen, Termine) */

.boxLayout {
    width:              570px;
    overflow:           hidden;
    margin-bottom:      30px;
    text-align:         left;
}

.boxHead {
    color:              #333333;
    width:              100%;
    min-height:         20px; 
    font-size:          12pt;
    font-weight:        bold;
 /*   border-bottom:      2px solid #449ba6; */
}

.boxHeadHighlighted {
    color:              #FF9C00;
    width:              100%;
    min-height:         20px;
    font-size:          12pt;
    font-weight:        bold;
 /* msp  border-bottom:      2px solid #449ba6; */
}

.boxHeadLeft img {
    margin-right:       5px;
    vertical-align:     bottom;
    border-width:       0px;
}

.boxHeadLeft{
    float:              left;
}

.boxHeadRight{
    float:              right;
}

.boxBody {
    padding:            10px 0px 5px 0px;
    border-top:         2px solid #449ba6;  /* msp von boxHead verschoben wegen längerem 2-Zeilige Veranstaltungstext */
    clear:              both;
}

/* Layout fuer die Formulare
   Es ist in einen Kopf (formHead) und einen Inhalt (formBody) unterteilt
   (z.B.: Profil, Login, Registrieren) */
   
.formLayout {
    width:              570px;  /* msp Original = 570  */
    margin-top:         10px;   /* msp Original = 30  */
}

.formHead {
    color:              #449ba6; /* msp Original = #333333  */
    font-size:          14pt;
    font-weight:        bold;
    letter-spacing:     0.2em;
    text-align:         left;
    border-bottom:      2px solid #449ba6;
}

/* Msp  für Uebungen*/
.formHeadUebung {
    color:              #449ba6; /* msp Original = #333333  */
    font-size:          14pt;
    font-weight:        bold;
  /*  letter-spacing:     0.2em; */
    text-align:         left;
    border-bottom:      2px solid #449ba6;
}

.formBody {
    padding-top:        10px;   /* msp Original = 10  */
    padding-bottom:     10px;
    text-align:         left;
}

.formBody hr {
    border:             1px solid #bad8e2;
    width:              100%;
    margin-top:         10px; /* msp Original = 10  */
    margin-bottom:      10px; /* msp Original = 10  */
}

/* Ordnet Felder mit ihren Beschreibungen in Formularen.
   Diese werden in einer Liste untereinander und 
   mit Beschreibung + Feld nebenandern angeordnet */

.formFieldList {
    margin:             0px;
    padding:            0px;
    list-style-type:    none;
}

.formFieldList > li { 
    display:            inline;
    text-align:         left;
}
.formFieldList > li > dl, 
.formFieldList > li > div {
    padding:            0px;
    margin:             4px 0px 2px 0px;  /*   msp 8px 0px 8px 0px  */
}
.formFieldList > li > dl > dt {
    float:              left;
}
.formFieldList > li > dl > dd {
    margin-left:        31%;         /* msp original = 31%  legt den Abstand der variablen Inhalte vom Text links fest*/
}

.formSubmit {
    padding-top:        10px;
}


/* Einfache rechteckige Groupbox mit Rahmen um bestimmte Teile zu markieren,
   wird haeufig innerhalb von Formularen genutzt (z.B.: Profil, Rollenpflege) */

.groupBox {
    color:              #555555;
    border:             2px solid #bad8e2;
    padding:            5px 10px 5px 10px;
    text-align:         left;
    margin-top:         12px;
    border-radius:      10px;
}

.groupBoxHeadline {
    color:              #333333;
    font-weight:        bold;
}

.groupBoxBody {
    padding-top:        7px;
    clear:              both;
}

/* Layout fuer Listen
   Die Klasse tableList wird dem <table>-Element zugeordnet
   tableHeader dem <th>-Element und
   listMouseOut dem <td>-Element
   (z.B.: Listen, Eigene Liste) */

.tableList {
    width:              570px;         /* 570px Optimale Breite von Listen */
    font-size:          10pt;
    color:              #555555;  /*  #555555;  Schrift Tabellen-Titel-Balken und Detailzeilen msp  */
    border:             1px solid #7d7d7d;  /*  ##7d7d7d;  msp  */

}

.tableList th {
    padding:            3px;
    text-align:         left;
    background-repeat:  repeat-x;
	background-color:   #4b9fac;
	
	/* Balken-Titel Detail-Tabellen   */  
	/* zu dunkel, Definitionen von MouseOver genommen */
/*	background-image:   -moz-linear-gradient(top, #52adba 0%, #346f78 80%);	
	background-image:   -webkit-linear-gradient(top, #52adba 0%, #346f78 80%);	
	background-image:   -ms-linear-gradient(top, #52adba 0%, #346f78 80%);	
	background-image:   -o-linear-gradient(top, #52adba 0%, #346f78 80%);
	*/	
    /*  Definitionen von MouseOver genommen */
    background-color:   #a8d9df;
	background-image:   -moz-linear-gradient(top, #ddeff2 0%, #7dbec8 90%);	
	background-image:   -webkit-linear-gradient(top, #ddeff2 0%, #7dbec8 90%);	
	background-image:   -ms-linear-gradient(top, #ddeff2 0%, #7dbec8 90%);	
	background-image:   -o-linear-gradient(top, #ddeff2 0%, #7dbec8 90%);	
}

.tableList td {
    text-align:         left;
    vertical-align:     top;
    padding:            3px;
}

/* Der SubHeader wird zur Gruppierung innerhalb von Tabellen genutzt
   (z.B.: Kategorienanzeige bei Rollenzuordnung, Leiter-Mitglied bei Listen) */

.tableSubHeader {
    background-color:   #c5c5c5;
    padding:            1px;
    font-size:          11pt;  
    font-weight:        bold;
    font-style:         italic;
    letter-spacing:     0.2em;
    background-repeat:  repeat-x;
    background-image:   url(../images/sub_row_marker.png);   
}

/* aktuelle Zeile kann in Listen markiert werden */
.tableMouseOver:hover {
    background-repeat:  repeat-x;
    background-color:   #a8d9df;
	background-image:   -moz-linear-gradient(top, #ddeff2 0%, #7dbec8 90%);	
	background-image:   -webkit-linear-gradient(top, #ddeff2 0%, #7dbec8 90%);	
	background-image:   -ms-linear-gradient(top, #ddeff2 0%, #7dbec8 90%);	
	background-image:   -o-linear-gradient(top, #ddeff2 0%, #7dbec8 90%);	
}

/* Layout fuer die Autosuggestions bei Suchfeldern */
ul.autosuggest {
    position:           absolute;
    list-style:         none;
    margin:             0px;
    padding:            0px;
    text-align:         left;
    overflow:           auto;
    font-size:          10pt;
    border:             1px solid #7d7d7d;
}

ul.autosuggest li a:link,
ul.autosuggest li a:visited {
    display:            block;
    padding:            2px;
    text-decoration:    none;
    background-color:   #ffffff;
}

ul.autosuggest li a:hover,
ul.autosuggest li a:active,
ul.autosuggest li.highlight a:link,
ul.autosuggest li.highlight a:visited  {
    background-repeat:  repeat-x;
    background-image:   url(../images/row_marker.png);  
}

/*Links in Verbindung mit einem Icon (mit Text)*/
.iconTextLinkList {
    list-style-type:    none;
    padding:            0px;
    margin:             25px 0px 25px 0px;
}

/*  msp  bei Uebungen wegen langer Liste der Fragen*/
.iconTextLinkListRight {
    list-style-type:    none;
    padding:            0px;
    /*margin:             25px 0px 25px 0px;*/
    text-align:         right;
}

.iconTextLinkList li{   
    padding-right:      15px;   
    display:            inline-block;
    font-size:          11pt;
}

.iconTextLink img {
    border:             none;
    vertical-align:     middle;
    padding-right:      1px;
    width:              16px;
    height:             16px;
}

/* Iconlinks um Funktionen aufzurufen (ohne Text) */
.iconLink {
    margin-left:        2px;
    margin-right:       2px;
    
}

.iconLink img, .boxHead img {
    border:             none;
    vertical-align:     top;
}

/* Iconlinks um Funktionen aufzurufen (ohne Text) in vertikaler Anordnung*/
.verticalIconList ul{
    padding-left:       0px;
    padding-bottom:     0px;
    padding-right:      0px;
    padding-top:        20px;
    margin-right:       5px;
    margin-left:        5px;
    list-style-type:    none;
}

.verticalIconList li{
    margin-top:         10px;
}

/* Icon um Bereiche auf und zu zuklappen */
.iconShowHide img {
    border:             none;
    vertical-align:     top;
    margin:             4px 5px 2px 3px;
    width:              11px;
    height:             11px;
}

/* Icon um Informationen anzuzeigen (ohne Text und Link)*/
.iconInformation {
    cursor:             help;
    vertical-align:     top;
    margin-left:        2px;
    margin-right:       2px;
    width:              16px;
    height:             16px;
}

/* Hilfeicon, bei dem ein kleines Fenster mit entsprechender Hilfe aufgerufen wird */
.iconHelpLink {
    border:             none;
    cursor:             pointer;
    vertical-align:     middle;
    margin-left:        3px;
    width:              16px;
    height:             16px;
}

/* Elemente fuer Navigationsklasse */
.pageNavigation {
    vertical-align:     middle;
    margin-top:         15px;
    margin-bottom:      25px;
}

.pageNavigation img {
    vertical-align:     top;
    border:             none;
}

.pageNavigation .selected {
    font-weight:        bold;
}

/* Zusatzinformation wer letzte Aenderungen vorgenommen hat etc.*/
.editInformation{
    font-size:          8pt;
    margin-top:         8px;
    clear:				both;
}

.admInformationCreated{
    display:            block;
}

/*Pflichtfeldmarkierung*/
.mandatoryFieldMarker{
    color:              #990000;
    margin-left:        3px;
}


/*Einstellungen fuer eine Pfadnavigation, z.B. durch die Versanstaltungsherarchie im Fotomodul*/
.navigationPath{
    margin:         	10px 0px 20px 0px;
}

.navigationPath img{
    border:             none;
    vertical-align:     middle;
}

/* */
.imageFrame {
	border: 			1px solid #dddddd; 
	padding: 			3px;
}

/* Style Eigenschaften fuer das tooltip */
#ajax_tooltipObj{
    z-index:            1000000;
    text-align:         left;
}

#ajax_tooltipObj .ajax_tooltip_content{
    border:             1px solid #333333;
    color:              #333333;
    width:              auto;
    min-width:          10px;
    max-width:          450px;
    height:             auto;
    min-height:         15px;
    background-color:   #fdf594;
    padding:            5px;
    z-index:            1000001;
}

#ajax_tooltipObj h3 {
    color:              #333333;
    padding-top:        10px;
}
#textTooltip{
	position:           absolute;
    border:             1px solid #333333;
    text-align:         left;
    color:              #333333;
    width:              auto;
    min-width:          10px;
    max-width:          450px;
    height:             auto;
    min-height:         15px;
    background-color:   #fdf594;
    padding:            5px;
    z-index:            1000001;
	display:            none;
}

/* spezielle Anpassung fuer die Loginseite */
#login_form .formFieldList li dl dd {
    margin-left:        45%;
}

/* spezielle Anpassung fuer die Passwortseite */
#password_form .formFieldList li dl dd {
    margin-left:        50%;  /* msp Original 50% = positioniert die From-Felder */
}

/* spezielle Anpassung fuer die Organisationsseite */
#admOrganizationMenu .formFieldList li dl {
    margin-top:         15px;
    margin-bottom:      5px;
}

#admOrganizationMenu .formFieldList li dl dd {
    margin-left:        50%;
}

#search_members {
    margin-top:         10px;
    margin-bottom:      0px;
}

/* spezielle Anpassung fuer das Gaestebuch */
.commentLink{
    margin:             8px 4px 4px 0px;
}

/* spezielle Anpassung fuer die Profilseite */
#admProfileMasterData {
	min-height: 200px;
}

#profile_form .formFieldList li dl {
    margin:             3px 0px 3px 0px;
}

.profileRolesBox ul li dl dd {
    margin-left:        50%;
    text-align:         right;
}

/* spezielle Anpassung fuer die Listen */
#lists_overview .formFieldList li dt {
    margin-left:        20px;
}

#infoboxListsBox {
    width:              500px;
    margin-top:         25px;
}

/*spezielle Anpassung Hilfe Colorbox*/
#message_window .formBody ul {
    padding-left:       20px;
	padding-right:      20px;
}

/* spezielle Anpassung fuer die Terminseite */

.date_info_block {
    line-height:        14pt;
}

.date_info_block div {
    padding-right:      5px;
    padding-bottom:     5px;
}

.date_description {
    padding-top:        10px;
    padding-bottom:     5px;
}

/* Definitionsliste der Systeminformationsseite*/
.systeminfoGood{
    color: #06a600;
}
.systeminfoBad{
    color: #e5000d;
}

/* Definitionsliste des DropDown Menüs*/
.dd-select{ 
    position:relative; 
    cursor:pointer;
    background: none;
    text-decoration: underline;
    color: #222222;
}
.dd-desc { 
    color:#aaa; 
    display:block; 
    overflow: hidden; 
    font-weight:normal; 
    line-height: 1.4em;
}
.dd-selected{ 
    display:block; 
    padding:0px; 
}
.dd-options{ 
    border-top:none; 
    list-style:none; 
    box-shadow:0px 1px 5px #ddd; 
    display:none; 
    position:absolute; 
    z-index:2000; 
    margin:0; 
    padding:0;
    background:#fff; 
    overflow:auto;
}
.dd-option{ 
    margin:0px; 
    padding:10px; 
    display:block; 
    border-bottom:solid 1px #ddd; 
    overflow:hidden; 
    text-decoration:none; 
    color:#333; 
    cursor:pointer;
    -webkit-transition: all 0.25s ease-in-out; 
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out; 
}
.dd-options > li{ 
    display: block; 
    padding-right: 0px; 
}
.dd-options > li:last-child > .dd-option{ 
    border-bottom:none; 
}
.dd-option:hover{ 
    background:#f3f3f3;
    color:#000;
}
.dd-selected-description-truncated { 
    text-overflow: ellipsis; 
    white-space:nowrap; 
}
.dd-option-selected { 
}
.dd-option-image, .dd-selected-image { 
    vertical-align:middle; 
    margin-right:5px; 
    max-width:64px;
}
.dd-image-right { 
    float:right; 
    margin-right:15px; 
    margin-left:5px;
}
.dd-container { 
    display: inline;
    background: none; 
} 
.dd-selected-text { 
    font-weight:bold;    
    width: 100%;
}

/* Adjustment for Selectboxes in Own Lists */
.ListProfileField, .ListConditionField {
   max-width: 200px;
}