/**** Ueberschriften ****/

/*
html, body, table, div, span {
height: 100%;
}
*/

/* Sehr großer Text für Seitentitel
   'h1' wird von den Suchmaschinen besonders hoch 
   bewertet von den Keywords her.
   h1 nehmen, wenn man will dass die Worte indiziert werden 
   'display:inline' bewirkt, dass nach dem h-tag kein Linebreak 
   gemacht wird */
h1 {
	font-size: 22px;
  font-weight: normal;	
  font-family: arial,helvetica,sans-serif;
  margin: 0px;
  display: inline; 
}

/* Wie h1, aber als styleClass-Attribut einsetzbar, wenn man keine 
   Suchmaschinenindizierung möchte */
.h1 {
  font-size: 22px;
  font-weight: normal;  
  font-family: arial,helvetica,sans-serif;
  margin: 0px;  
  display: inline; 
}

/* Großer Text für Zwischenüberschriften */
h2 {
  font-size: 16px;
  font-weight: bold;  
  font-family: arial,helvetica,sans-serif;
  margin: 0px;  
  display: inline; 
} 

/* Wie h2, aber als styleClass-Attribut einsetzbar, wenn man keine 
   Suchmaschinenindizierung möchte */
.h2 {
  font-size: 16px;
  font-weight: bold;
  font-family: arial,helvetica,sans-serif;
  margin: 0px;  
  display: inline; 
}

/* Mittelgroßer Text für Zwischenüberschriften */
h3 {
  font-size: 14px;  
  font-weight: bold;
  font-family: arial,helvetica,sans-serif;
  margin: 0px;
  display: inline; 
} 

/* Wie h3, aber als styleClass-Attribut einsetzbar, wenn man keine 
   Suchmaschinenindizierung möchte */
.h3 {
  font-size: 14px;  
  font-weight: bold;  
  font-family: arial,helvetica,sans-serif;
  margin: 0px;
  display: inline; 
}







/**** Standard-Tags ****/

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

/* Funzt nur im IE ändert da aber auch den Scrollbar rechts außen 
  scrollbar-face-color:#EBF5FF;
  scrollbar-base-color:#EBF5FF;
  scrollbar-arrow-color:black;
  scrollbar-track-color:#F3F3F3;
  scrollbar-shadow-color:#EBF5FF;
  scrollbar-highlight-color:#EBF5FF;
  scrollbar-3dlight-color:#78AAFF;
  scrollbar-darkshadow-Color:#78AAFF;
*/
body {
  font-family:arial,helvetica,sans-serif;
  padding:0px;
  margin:0px;
} 

/* Unsere Links sind in dem Blau der Plattform 
   Das sind z.B. die Links von den commandLinks (Speichern, Suchen, ...)
   oder die Titel der Visuals bei Peepholedarstellung */
a {
	font-size: 14px;
	text-decoration: none;  
	cursor: hand;
}

/* ...beim klicken ohne Unterstrich und hellorange 
   TODO das nimmt er irgendwie noch nicht... 
a:active {
	font-size: 14px;
	text-decoration: none;  
	cursor: hand;
}
*/

/* ...beim Mouseover mit Unterstrich und Orange */
a:hover {
	font-size: 14px;
	text-decoration: none;  
	cursor: hand;
}

/* Mittlgrosse Links. Erhalten ein styleClass="medium". Muss so gemacht werden, da sonst 
   beim hover wieder die größe von a:hover genommen werden würde */
a.medium-big {
  font-size: 12px;
  text-decoration: none;  
  cursor: hand;
}

a.medium-big:hover {
  font-size: 12px;
  text-decoration: none;  
  cursor: hand;
}

/* Mittlere Links. Erhalten ein styleClass="medium". Muss so gemacht werden, da sonst 
   beim hover wieder die größe von a:hover genommen werden würde */
a.medium {
  font-size: 11px;
  text-decoration: none;  
  cursor: hand;
}

a.medium:hover {
  font-size: 11px;
  text-decoration: none;  
  cursor: hand;
}


/* Kleine Links. Erhalten ein styleClass="small". Muss so gemacht werden, da sonst 
   beim hover wieder die größe von a:hover genommen werden würde */
a.small {
  font-size: 10px;
  text-decoration: none;  
  cursor: hand;
}

a.small:hover {
  font-size: 10px;
  text-decoration: none;  
  cursor: hand;
}

a.inactive {
}

img {
  border: 0px;
  position: relative;
}

img.embedded-right {
  border: 0px;
  padding-left: 10px;
  position: relative;
  float: right;
}







/**** Texte (Schriftgröße und Schrifttyp) ****/

.text-big {
  font-size: 16px; 
}


/* Normaler Text für längere Beschreibungen */
/* TODO MADE probieren, ob 'color:#303030;' nicht sanfter wirkt */
.text {
	font-size: 15px; 
}

/* mittlere Text z.B. für die Kurzbeschreibung bei den Peepholes */
.text-medium {
	font-size: 14px;
}

/* kleiner Info-Text neben Icons */
.text-small {
	font-size: 12px;
}

/* Formulartitel for Eingabefeldern in Dunkelgrau */
.text-field-title {
  font-family:arial,helvetica,verdana,sans-serif; 
  font-size: 14px;
  font-weight: bold;  
  color: #575757;
}

/* Hilfetexte in blauer Farbe */
.text-help {
  font-size: 14px;
  font-weight: bold;
  color: #5A778A;
}

/* Hinweistexte z.B. Wartetext bei hochladen und Texte zu fehleden Angaben im Profil */
.text-info {
  font-size: 14px;
  font-weight: bold;
  color: #EE9900;
}

/* Erfolgsmeldungen z.B. nach dem Schicken einer Privatnachricht */
.text-confirmation {
  font-size: 14px;
  font-weight: bold;
  color: #426510;
}

/* Fehlertexte in violetter Farbe */
.text-error {
  font-size: 14px;
  font-weight:bold;
  color: #B55E67;
}

/* Shutdown-Warning */
.text-shutdown {
  font-size: 20px;
  font-weight: bold;
  text-decoration: blink;  
  color: #B55E67;
}


/* Formatierung der Kommentartext, so dass genug Platz für 20px Smilies ist */
.text-article {
  font-family:arial,helvetica,verdana,sans-serif; 
  font-size: 15px;
  line-height: 19px;
  vertical-align: middle;
  color: #000000;
}

/* Formatierung der Kommentarüberschrift */
.text-article-headline {
  font-family:arial,helvetica,verdana,sans-serif; 
  font-weight: bold;
  font-size: 14px; 
	color: #4D9FD1;
}

/* Anderer Font für die Aktionstexte (Editieren, Löschen,...)
   verdana hat größere Abstände zwischen den Buchstaben */
.text-action {
  font-size: 15px;
  font-family: verdana,arial,helvetica,sans-serif;
}

/* Anderer Font für die Aktionstexte (Editieren, Löschen,...)
   verdana hat größere Abstände zwischen den Buchstaben */
.text-action-small {
  font-size: 10px;
  font-family: verdana,arial,helvetica,sans-serif;
}



/**** Inputfelder (Schriftgröße, Schrifttyp, Rahmen) ****/

/* Eingabefelder (Textfelder, Comboboxen, Textareas, Checkboxen usw.) */
.input-field {
  font-family: verdena,arial,helvetica,sans-serif;
  font-size: 14px;  
  font-weight: normal;
  font-style : normal;
  text-align: left;  
  border: 2px solid #4D9FD1;
  margin: 1px;
  background-color: #ffffff;
}

/* Eingabefelder mit Fokus darauf. 
   Fokussierte Felder haben einen dickeren orangenen Rahmen 
   (Das funktioniert leider noch nicht im IE) */
.input-field:focus, .input-field.focus {
  font-family: verdena,arial,helvetica,sans-serif;
  font-size: 14px;  
  font-weight: normal;
  font-style : normal;
  text-align: left;  
  border: 2px solid #EE9900;
  margin: 1px;
  background-color: #ffffff;
}





/**** Einzelformatierung ****/ 
/* (wenn man z.B. nicht <b></b> schreiben will ) */

/* Fettschrift */
.bold {
  font-weight: bold;
}

/* Kursiv */
.italic {
	font-style: italic;
}

/* Fett und Kursiv*/
.bold-italic {
  font-weight: bold;
	font-style: italic;
}

/* Normalschrift */
.normal {
  font-weight: normal;
  font-style: normal;
}

/* Linksbündig */
.left-align {
  text-align: left;
}

/* Rechtsbündig */
.right-align {
  text-align: right;  
}

.left-align-nowrap {
  text-align: left;
  white-space: nowrap;
}

.right-align-nowrap {
  text-align: right;  
  white-space: nowrap;  
}

.right-align-bottom {
  text-align: right;  
  vertical-align: bottom;  
}

.left-align-top {
  text-align: left;
  vertical-align: top;
}

/* Verwendung z.B. für Tabellenzellen, um Inhalt top auszurichten */
/* Hinweis: Bei einem Tabellen-TD hilft hier eher ein VALIGN="top" */
.top-align {
  vertical-align: top;
}

.middle-align {
  vertical-align: middle;
}

.bottom-align {
  vertical-align: bottom;
}

.text-bottom-align {
  vertical-align: text-bottom;
}

.center-align {
  text-align: center;    
  horizontal-align: center;
}

.center-align-top {
  text-align: center;    
  horizontal-align: center;
  vertical-align: top;
}

.center-align-bottom {
  text-align: center;    
  horizontal-align: center;
  vertical-align: bottom;
}

/* Zeile soll nicht umgebrochen werden */
.nowrap {
  white-space: nowrap;
}







/**** Abstände ****/

.padding-24px {
	padding: 24px;
}

.padding-left {
  padding-left: 15px;
}

.padding-middle {
  padding-left: 15px;
  padding-right: 15px;
}

.padding-middle-5px {
  padding-left: 5px;
  padding-right: 5px;
}

.padding-middle-7px {
  padding-left: 7px;
  padding-right: 7px;
}

.padding-center {
  padding-top: 3px;
  padding-bottom: 3px;
}

.padding-center-10px {
  padding-top: 10px;
  padding-bottom: 10px;
}

.padding-top-6px {
  padding-top: 6px;
}

.padding-top-10px {
  padding-top: 10px;
}

.padding-top-15px {
  padding-top: 15px;
}

.padding-right {
  padding-right: 15px;
}

.padding-left-5px {
  padding-left: 5px;
}

.padding-left-10px {
  padding-left: 10px;
}

.padding-left-24px {
  padding-left: 24px;
}

.padding-right-24px {
  padding-right: 24px;
}

.padding-left-30px {
  padding-left: 30px;
}

.padding-right-30px {
  padding-right: 30px;
}

.padding-bottom-10px {
  padding-bottom: 10px;
}

.margin-10px {
  margin: 10px;
}

.margin-center {
  margin-top: 3px;
  margin-bottom: 3px;
}

.margin-right-4px {
  margin-right: 4px;
}

.margin-right-8px {
  margin-right: 8px;
}

.margin-right-10px {
  margin-right: 10px;            
}

.margin-right-16px {
  margin-right: 16px;
}

.margin-right-20px {
  margin-right: 20px;            
}

.margin-right-24px {
  margin-right: 24px;
}

.margin-left-4px {
  margin-left: 4px;
}

.margin-left-10px {
  margin-left: 10px;            
}

.margin-left-15px {
  margin-left: 15px;            
}

.margin-left-18px {
  margin-left: 18px;            
}

.margin-left-24px {
  margin-left: 24px;            
}

.margin-top-5px {
  margin-top: 5px;            
}

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

.margin-bottom-3px {
  margin-bottom: 3px;            
}

.margin-bottom-5px {
  margin-bottom: 5px;            
}

.margin-bottom-10px {
  margin-bottom: 10px;            
}

.margin-bottom-20px {
  margin-bottom: 20px;            
}

.separator {
  margin-top: 12px;
  margin-bottom: 8px;            
}








/**** Farben ****/

/* Dunkles Grau für Texte */
.color-text {
  color: #575757;
}

/* Dunkles Blau für Links und Textfeldumrandungen */
.color-link {
  color: #1A557D;
}

/* Blau für Informationstexte */
.color-info {
	color: #F29E02;
}

/* Blau für Hilfetexte */
.color-help {
	color: #5A778A;  	
}

/* Blau für Umrandung von Eingabefeldern und Hilfetexten sowie Feedbackwunschtext */
.color-border {
	color: #4D9FD1;
}

/* Grau für Statustexte */
.color-disabled {
  color: #7A7A7A;
}

/* Helles Orange fuer Tab und Footer */
.color-footer {
	color: #FFA62E:
}

/* Dunkles Orange für Links und Textfeldumrandungen */
.color-link-active {
	color: #EE9900;
}

/* Fehlerviolettrot */
.color-error {
	color: #CF183F;
}

/* Ganz helles Blau für den Hintergrund der Community-Box unter einem Werk */
.color-bubble-background {
  background:#FAFDFF;
}

/* Ganz helles Grau für den Hintergrund der boxPlain */
.color-box-background {
  background:#F2F2F2;
}

/* Ganz helles Grau für den Hintergrund der boxPlain */
.color-box-background-blue {
  background:#E0F3FF;
}

/* Helles Orange für den Hintergrund der boxPlain */
.color-box-background-orange {
  background:#FCF0C4;
}


/**** Blocks ****/

.block-help {
  border: 1px solid #4D9FD1;
  background:#E0F3FF;
  display:none;
  visibility:hidden;
  padding-top:5px;
  padding-bottom:5px;  
  padding-left:10px;
  padding-right:15px; 
  margin-top:3px;
  margin-bottom:12px;
}

.block-help-show {
  border: 1px solid #4D9FD1;
  background:#E0F3FF;
  display:block;
  visibility:visible;
  padding-top:5px;
  padding-bottom:5px;  
  padding-left:10px;
  padding-right:15px; 
}

.block-confirmation {
  border: 1px solid #7B9E29;
  background:#DBE8BC;
  padding-top:5px;
  padding-bottom:5px;  
  padding-left:10px;
  padding-right:15px;
  text-align: left; 
}








/**** Menüboxen ****/

dl, dt, dd { 
  margin: 0; 
  padding: 0; 
  width: auto; 
  display: block; 
}

dt { 
  font-weight: bold; 
  position: relative; 
  padding-left: 10px; 
}

dt span { 
  position: absolute; 
  right: 0; 
  top: 0; 
  font-weight: normal; 
  padding-right: 10px; 
} 

.boxfont_size { 
  font-size: 73px; 
  line-height: 73px; 
}

.boxfont_sizetable { 
  font-size: 68px; 
  line-height: 68px; 
} 

dt.box_top { 
  height: 25px; 
  line-height: 25px; 
  background: url(/icons/menu/box_top_left.gif)     left  center no-repeat; 
  text-align: left; 
} 

dt.box_top span { 
  background: url(/icons/menu/box_top_right.gif)    right center no-repeat; 
  white-space: nowrap; 
} 

img.box_top { 
  margin-top: 6px; 
}



/**** Icons ****/

/* Icon mit einem Abstand von 2px nach rechts. 
   (font-size muss rein um zu steuern wie groß der alt-Text ist) */
.icon-margin-right-2px {
  vertical-align: middle;
  margin-right: 2px;
  font-size: 8px;
}

/* Icon mit einem Abstand von 5px nach rechts. */
.icon-margin-right-5px {
  vertical-align: middle;
  margin-right: 5px;
}

.icon-margin-right-bottom-5px {
  vertical-align: text-bottom;
  margin-right: 5px;
}

/* Icon mit einem Abstand von 10px nach rechts. */
.icon-margin-right-middle-10px {
  vertical-align: middle;
  margin-right: 10px;
  font-size: 8px;
}

/* Icon mit einem Abstand von 10px nach rechts. */
.icon-margin-right-10px {
  vertical-align: text-bottom;
  margin-right: 10px;
  font-size: 8px;
}

/* Icon mit einem Abstand von 5px nach links. 
   (font-size muss rein um zu steuern wie groß der alt-Text ist) */
.icon-margin-left-5px {
  vertical-align: text-bottom;
  margin-left: 5px;
  font-size: 8px;
}

.icon-margin-left-10px {
  vertical-align: text-bottom;
  margin-left: 10px;
  font-size: 8px;
}

.icon-margin-left-15px-top {
  vertical-align: top;
  margin-left: 15px;
  font-size: 8px;
}

/* Icon mit einem Abstand von 5px nach links. 
   (font-size muss rein um zu steuern wie groß der alt-Text ist) */
.icon-margin-right-5px-middle {
  vertical-align: middle;
  margin-right: 5px;
  font-size: 8px;
}

/* Icon mit einem Abstand von 5px nach links. 
   (font-size muss rein um zu steuern wie groß der alt-Text ist) */
.icon-margin-left-5px-middle {
  vertical-align: middle;
  margin-left: 5px;
  font-size: 8px;
}

/* Icon mit einem Abstand von 5px nach links. 
   (font-size muss rein um zu steuern wie groß der alt-Text ist) */
.icon-margin-left-5px-top {
  vertical-align: top;
  margin-left: 5px;
  font-size: 8px;
}

.icon-margin-right-5px-top-bottom-2px-middle {
  vertical-align: middle;
  margin-right: 5px;
  margin-top: 2px;  
  margin-bottom: 2px;    
  font-size: 8px;
}	

/* Icon mit größeren Abständen oben und unten top-aligend
   Z.B. für das Peephole */
.icon-margin-buttom-5px-top {
  vertical-align: top;
  margin-bottom: 3px;
}

/* Icon mit einem Abstand von 5px nach links. 
   (font-size muss rein um zu steuern wie groß der alt-Text ist) */
.icon-margin-left-right-5px {
  vertical-align: text-bottom;
  margin-left: 5px;
  margin-right: 5px;  
  font-size: 8px;
}






/**** Tables ****/
table.comicview {
}

table.artistShowContent {
  align: center;
  vertical-align: top;
}

td.artistShowContent {
  align: center;
  text-align: center;
  width: 115px;
}

td.ringetop {
  background-image: url(/icons/RingBg.gif); 
  background-repeat: repeat-x;
}

td.comicview {
  align: center;
}

td.margin-enumeration-left {
  padding-left: 16px;
}

td.sidebar-middle {
  padding-left:10px;
  padding-right:10px;
  nowrap;
}

td.sidebar-top-middle {
  background: url(/icons/menu/sidebar_top_middle.gif) repeat-x;
  height:25px;
}

td.sidebar-bottom-middle {
  background: url(/icons/menu/sidebar_bottom_middle.gif) repeat-x;
  height:25px;
  vertical-align: bottom;
}

td.padding-top {
  align: center;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
}

td.padding-middle {
  align: center;
  padding-left: 15px;
  padding-right: 15px;
}

td.padding-bottom {
  align: center;
  padding-bottom: 15px;
  padding-left: 15px;
  padding-right: 15px;
}







/**** Enumerations ****/

.left-normal-enum {
  text-align: left;
  margin-right: 5px;
  vertical-align: middle;
  margin-top: 3px;
}

.wide-enumeration-bold {
  margin-right: 24px;
  font-weight: bold;
  text-align: left;
  font-style : normal;
}






/**** Sonstiges ****/

/* */
.float-left {
  float: left;
}
  

/* Auflistung mit <ul><li>... mit luftigem Abstand zwischen den Aufzählungspunkten */
.big-ul li {
  padding: 5px;
}

.table-help {
  border: 3px solid #5A778A;
  background:#E0F3FF;
  display:none;
  visibility:hidden;  
}

/* Zum Verbergen eines Elements */
.hidden-element {
  display: none;
  visibility: hidden;
}

.visible-element {
  display: block; 
  visibility: visible;	
}


/* Die Minimalbreite einer Seite wenn sehr wenig Inhalt drauf ist z.B. beim Login */ 
.width-min {
  width: 500px;
  max-width: 500px;
}

/* Die Breite von z.B. den Sprechblasen unter einem Visual */ 
.width-medium {
  width: 725px;
  max-width: 725px;
}


/* Die Standardbreite von unseren Dialogen, der Communitybox usw. */ 
.width-default {
	width: 800px;
  max-width: 800px;  	
}

/* Die Maximalbreite bei einer Aufloesung von 1024 * 768 */ 
.width-max {
  width: 900px;
  max-width: 900px;   
}

.height-190px {
	height: 190px;
}

/* Die Maximalbreite wird auf 900px gesetzt. Fuer IE ist ein hack drin, weil der 
   max-width nicht versteht. */
.max-width-900px {
  max-width: 900px;
  width: expression(document.body.clientWidth>900?'900px':'100%');
  width: 100%;	
}

.max-width-800px {
  max-width: 800px;
  width: expression(document.body.clientWidth>800?'800px':'100%');
  width: 100%;  
}

.max-width-600px {
  max-width: 600px;
  width: expression(document.body.clientWidth>600?'600px':'100%');
  width: 100%; 
}

.max-width-260px {
  max-width: 260px;
  width: expression(document.body.clientWidth>260?'260px':'100%');
  width: 100%; 
}


/* Anti-Spam */
.spybot { 
  display: none; 
}

/* Zwei kleine Hilfsklassen, damit der Nutzer informiert wird, wenn
   sein Browser die neue style.css oder die javascript.js nicht geladen hat.
   Sie werden verwendet in pages/common/tabTitle.xhtml, wo 
   auch der verwendete Style ausgetauscht werden muss */
.press-refresh-B {
  font-size: 20px;
  font-weight: bold;
  text-decoration: blink;  
  color: #B55E67;
}

.press-refresh-A {
  display: none; 
}

/* footer.xhtml div */
.footer {
  height: 20px;
  line-height: 14px;
  text-align: right;
  padding-right: 10px;
  background: url(/icons/menu/footer.gif) left repeat-x;";  
}












/**** VERALTET! BITTE NICHT MEHR VERWENDEN ****/

.button-row {
  text-align: left;
  width:10%;  
}

/* Zelle von Visual-Auflistungs Tabellen mit Abstand zur nächsten Zeile */
.visual-text {
	margin-top: 10px;
	margin-bottom: 5px;
	text-align: left;
  vertical-align: top;
  width: 250px;
  nowrap;
}

.full-width {
  width: 100%;
}

/* Zelle von Visual-Auflistungs Tabellen mit Abstand zur nächsten Zeile */
.gallery-icon {
  vertical-align: text-bottom;
  margin-top: 3px;
  margin-bottom: 3px;
  margin-left: 4px;
  margin-right: 4px;
}