Jürgen Schilling - Natur | Fotografie | Technik .

 

JürgenSchilling

Natur | Fotografie | Technik

 
 

 Home

 Black&White
 Cyanotypie
 Fotogramme
 Infrarot
 Jägerprüfung
 Kategorien
 Kirlianfotografie
 Lochkamera
 Makroaufnahmen



Lightbox


 Manuals:
 
Alle Manuals
 Aluminium eloxieren
 Hochspannungsgenerator
 Belichtungszeitentabelle
 Beurteilung v. Negativen
 Blitzlichtfotographie
 Farbmischung
 Filmentwicklung
 Infrarotfotografie
 Teslatrafo
 Teslatrafo Rechner
 Schrauben u. Gewinde

 Entwicklingszeiten:
 Agfa Rodinal
 Kodak D76

 Tiefenschäferechner

 
 Impressum


______

















  
  Bilder pro Gast
  phpMyAdmin
  Counter
  Most viewed
  Logout
  Login
  Theme curve
  Theme my-fruity

Mit einem Stylesheet Tabellenköpfe und ganze Tabellen formatieren
Über ein Stylesheet können mehrere Webseiten zentralisiert formatiert werden.
-> Diese Dokumentation soll zeigen, wie ein bereits vorhandenes Stylesheet so erweitert werden kann, daß zusätzliche Elemente ebenfalls mit ihm formatiert werden:

In meinem Fall, sollte die Kopfzeile meiner selbst gebauten Seiten immer gleich ausschauen.
Hierfür bot sich das style.css File an, das mit der Coppermine Installation mitgeliefert wurde. Diese Datei kann problemlos angepaßt werden.

 
Der Pfad zum aktuellen Stylesheet:
Der Pfad zum aktuellen Stylesheet steht in der Webseite ganz oben, direkt unter dem <head> Tag.
Im Fall von Coppermine in dem zentralen Template unter themes/my-theme/template.html

<html>
<head>
<link rel="stylesheet" href="themes/my-theme/style.css" type="text/css" />
<title>[Juergen Schilling ] - Fotografie</title>
</head>
 
Anpassungen im themes/my-theme/style.css File:
/*Kopfreihe meine selbst gebauten Seiten- grosse Schrift*/
.my-headzell{
font-weight: bold;
font-size: 130%;
background: #E8E8EA;
text-align : left;
height : 40px;
width : 100%;
}

/*Kopfreihe meine selbst gebauten Seiten-grosse Schrift*/
.my-headzell{

/* border-style: solid; */
border-width: 1px;
border-color: #CAD0D7;
border-top-style:solid;
border-right-style:none;
border-bottom-style:solid;
border-left-style:none;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 20px;
}

/*Kopfreihe meine selbst gebauten Seiten- kleine Schrift*/
.my-headzell-small{
font-weight: bold;
font-size: 100%;
background: #E8E8EA;
text-align : left;
height : 40px;
width : 100%;
}

/*Kopfreihe meine selbst gebauten Seiten-kleine Schrift*/
.my-headzell-small{

/* border-style: solid; */
border-width: 1px;
border-color: #CAD0D7;
border-top-style:solid;
border-right-style:none;
border-bottom-style:solid;
border-left-style:none;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 20px;
}


 

Den "Sprungpunkt" zum CSS-File in den HTML-Code einfügen:

Die oberste Zeile der Tabelle (= das Erste <td> </td>) wird durch die von Stylesheet formatierte Zeile ausgetauscht:

<table>
<tr>
<td>Anpassungen im themes/my-theme/style.css File</td>
</tr>
</table>



<table>
<tr>
<td  class="my-headzell">Anpassungen im themes/my-theme/style.css File</td>
</tr>
<table>




So schaut die Sache im IE8 aus:
In dem Punkt "my-headzell" wird die Schrift mit Größe 130% dargestellt.

Anpassungen im themes/my-theme/style.css File




So schaut die Sache im IE8 aus:
In dem Punkt "my-headzell-small" wird die Schrift mit Größe 100% dargestellt.

 
Anpassungen im themes/my-theme/style.css File



Vorlage für die von mir selbst angelegten Tabellen. Diese werden auch im IE10 korrekt angezeigt.
/*Von mir erstellte Tabelle*/
.my-table{
height: 12px;
text-align: left;
background: #ffffff;
border-style: solid;
border-color: #CAD0D7;
border-width: 1px;
border-collapse:collapse;
}

.my-table td{
border-style: solid;
border-width: 1px;
border-color: #CAD0D7;
border-collapse:collapse;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 5px;
padding-right: 5px;
font-size:12px;
}

Das ".my-table td" formatiert die Zellenränder
 
Hier der Code:

<table class="my-table">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>I</td>
<td>II</td>
<td>III</td>
</tr>
</table>
 
Hier ist das Ergebnis:

 
AAAA BBBB CCCC
1111 2222 3333
I--- II-- III-
Hier das komplette http://www.sr71.dyndns.info/themes/my-theme/style.css

/*************************
Coppermine Photo Gallery
************************
Copyright (c) 2003-2010 Coppermine Dev Team
v1.0 originally written by Gregory Demar

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License version 3
as published by the Free Software Foundation.

********************************************
Coppermine version: 1.5.3
$HeadURL: https://coppermine.svn.sourceforge.net/svnroot/coppermine/trunk/cpg1.5.x/themes/fruity/style.css $
$Revision: 6985 $
$Author: gaugau $
$Date: 2010-01-02 11:38:29 +0100 (Sa, 02 Jan 2010) $
**********************************************/

/* Colors used: */
/* --------------------------------------------*/
/* #FFFFFF = RBG 255,255,255 = (white) */
/* #000000 = RBG 0, 0, 0 = (black) */
/* #FFA600 = RGB 255,166, 0 = (orange) */
/* #CCFF66 = RGB 206,255, 99 = (light green) */
/* #6BBE10 = RGB 107,190, 16 = (green) */
/* #1B2D04 = RGB 27, 45, 4 = (dark green) */
/* #FFFF00 = RGB 255,255, 0 = (yellow) */
/* #D1D7DC = RGB 209,215,220 = (light grey) */
/* #F7F37B = RGB 247,243,123 = (light yellow) */
/* #5F5F5F = RGB 95, 95, 95 = (dark grey) */
/* #E7F38C = RGB 239,243,140 = (light green) */
/* #00529B = RGB 0, 82,155 = blue */
/* #BDE5F8 = RGB 189,229,247 = cyan */
/* #4F8A10 = RGB 79,138, 16 = dark green */
/* #DFF2BF = RGB 223,242,191 = light green */
/* #9F6000 = RGB 159, 96, 0 = dark brown */
/* #FEEFB3 = RGB 254,239,179 = light brown */
/* #D8000C = RGB 216, 0, 12 = red */
/* #FFBABA = RGB 255,186,186 = pink */
/* #D63301 = RGB 214, 51, 1 = red */
/* #FFCCBA = RGB 255,204,186 = pink */
/* Meine Farben: */
/* #C0C0C0 = Tabellenrahmen (Dunkelgrau) */
/* #FCFCFC = Tabellenhintergrund (Helles Hellgrau) */
/* #E8E8EA = Tabellenhintergrund (Hellgrau) */
/* #0000FF = Dunkelblau
/* #99FF99 = Hellgruen */
/* if you don't like a color, just do a search */
/* and replace on the hex color... */

body {
background-color:#FFFFFF;
margin-top:0px;
margin-left:0px;
margin-right:0px;
padding:0px;
font-family:Verdana,Arial,sans-serif;
color:#000000;
font-size:16px;
}



h1{
font-weight: bold;
font-size: 22px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
line-height : 120%;
color : #000000;
margin: 2px;
}

h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
margin: 0px;
}

h3 {
font-weight: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 2px;
}

td {
font-size: 12px;
}

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 2px 0px;
}

pre.filepath {
margin: 0px;
padding: 0px;
}


ul, ol {
margin-left: 5px;
margin-top:0px;
margin-bottom:0px;
padding: 0px;
}

li {
margin-left: 10px;
margin-top: 4px;
margin-bottom: 4px;
padding: 0px;
list-style-position: outside;
}

ul li {
list-style-type: disc;
}

.textinput {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border: 1px solid #D1D7DC;
padding-right: 3px;
padding-left: 3px;
}

.listbox {
font-family: Verdana, Arial, Arial, Helvetica, sans-serif;
font-size: 12px;
border: 1px solid #D1D7DC;
vertical-align : left;
}

.button {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
border: 1px solid #005D8C;
background-image : url(images/button_bg.gif);
background-position : bottom;
cursor:pointer;
padding-left:0px;
padding-right:0px;
margin-right:2px;
}

.radio {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
vertical-align : left;
}

.checkbox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
vertical-align : left;
}

/*color gilt fuer den Unterstrich*/
a:link {
color: #000000;
text-decoration: underline;
}

a:visited {
color: #6BBE10;
text-decoration: underline;
}

a:focus {
color: #FCFCFC;
text-decoration: none;
}

a:active {
color: #FF0000;
text-decoration: underline;
}

a:hover {
color: #000000;
text-decoration: none;
background-color: #99FF99;
}

.bblink a {
color: #FCFCFC;
text-decoration: none;
}

.bblink a:hover {
color: #FF0000;
text-decoration: none;
background-color: #FFFFFF;
}

a:hover.nobg {
text-decoration: none;
background-color: #FFFFFF;
}


a:hover.yebg {
text-decoration: none;
background-color: #FFFFFF;
}

/*Das Batch Add Feld und die gesammte Haupttabelle mit der Gallerie*/
.maintable {
border: 1px solid #FFFFFF;
background-color: #FFFFFF;
table-layout: auto;
width: 100%;
margin-top: 1px;
margin-bottom: 1px;
}

.tableh1 {
/* Eine Spalte oberhalb und unterhalb Album-Thumbs Tabelle */
/* height : 50px; */
/* width: 50px; */
/* Hintergrund des Albumpfades "Home > Europe > Germany" in der Albumansicht*/
background : #FCFCFC;
color : #000000;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
font-weight:bold;
}

.tableh2 {
/*Hintergrund des Albumnamens in der Albumansicht*/
background: #FFFFFF;
color : #000000;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

.tableb {
background: #FFFFFF ;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

/* This class will be used in conjunction with class tableb: attributes not particularly (re)-assigned will be taken into account from tableb. */
/* It is being used to accomplish alternating row colors for lists. */
/* It's recommended to only assign another background color that slightly differs from the one defined in tableb */
.tableb_alternate {
background: #FFFFFF;
}


/* die Tabelle mit der Fileinfo in der Intermediate Ansicht*/
.tableb_picinfo {
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 1px;
background: #FFFFFF;
font-size: 12px;
border: 0px solid black;
/*Schriftfarbe des Textes - nicht der Links*/
color: #000000;
}


/*Schriftfarbe der Links - nicht vom Text*/
.tableb_picinfo a:link {
color: #000000;
text-decoration: underline;
}
.tableb_picinfo a:visited {
color: #000000;
text-decoration: underline;
}
.tableb_picinfo a:hover {
color: #FF0000;
text-decoration: underline;
background-color: #F7F7F7;
}
.tableb_picinfo a:active {
color: #C0C0C0;
text-decoration: underline;
}



.tablef {
background: #F0F0F0;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

.catrow {
background: #FCFCFC ;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

.catrow_noalb {
background: #FCFCFC ;
color : #000000;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

.album_stat {
/* Hintergrund des "xxx files, last one added on dd.mm.yy" unter dem Album-Thumnail */
/* background: #FF0000; */
font-size : 10px;
margin: 5px 0px;
}

.thumb_filename {
font-size: 80%;
display: left;
}

.thumb_title {
font-weight : bold;
font-size: 9px;
padding: 2px;
display : left;
}

.thumb_caption {
font-size: 9px;
padding: 1px;
display : left;
}

.thumb_num_comments {
font-weight: normal;
font-size: 9px;
padding: 2px;
font-style : italic;
display : left;
}

.user_thumb_infobox {
margin-top: 1px;
margin-bottom: 1px;
}

.user_thumb_infobox th {
font-weight : bold;
font-size: 12px;
margin-top: 1px;
margin-bottom: 1px;
text-align : center;
}

.user_thumb_infobox td {
font-size: 10px;
margin-top: 1px;
margin-bottom: 1px;
text-align : center;
}

.user_thumb_infobox a {
text-decoration: none;
color: #000000;
}

.user_thumb_infobox a:hover {
color: #FF0000;
text-decoration: underline;
}

.sortorder_cell {
background : #FCFCFC;
color : #FFFFFF;
padding: 0px;
margin: 0px;
}

/*Die Sortier-Pics ueber den Thumbnils*/
.sortorder_options {
font-family: Verdana, Arial, Helvetica, sans-serif;
background : #FCFCFC;
color : #000000;
padding: 0px;
margin: 0px;
font-weight: normal;
font-size: 9px;
white-space: nowrap;
}

/* Der Balken mit den Pfeilen und unter der File Anzeige ueber dem MediumPic*/
.navmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 12px;
font-weight: bold;
background : #FCFCFC;
border-style: solid;
border-width: 1px;
border-color: #CAD0D7;
border-bottom-style: none;
border-top-style: none;
/* border-left-width:2.5em; */
border-top-width: none;
text-align : center;

/*width : 70%;*/
}

/*Abstand zwischenden Iconen ueber dem Medium Pic*/
.navmenu img {
margin-top: 1px;
margin-right: 30px;
margin-bottom: 1px;
margin-left: 5px;
}
/*Die Tabs unter den Thumbnails*/
.navmenu a {
display: block;
padding-top: 2px;
/*Abstand der Tab-Zahlen zur jeweils naechsten*/
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
text-decoration: none;
color: #000000;
}

.navmenu a:hover {
background : #99FF99;
text-decoration: none;
color: #FF0000;
}

.admin_menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
border: 1px solid #FCFCFC;
background-image : url(images/button_bg.gif);
background-position : bottom;
color: #000000;
margin-top: 0px;
margin-bottom: 0px;
text-align: center;
}

.admin_menu a {
color: #FF0000;
text-decoration: none;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
}

.admin_menu a:hover {
color: #FF0000;
text-decoration: none;
background: #FCFCFC;
}

.admin_float {
float:left;
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
margin-bottom: 1px;
max-height:1.5em;
display: block;
position: relative;
white-space:nowrap;
/*width:100px;*/
}

.admin_menu_wrapper {
width:100%;
}

#admin_menu_anim {
background-image : url(images/button_bg_anim.gif);
}

.icon {
vertical-align:left;
margin-right:1px;
}

.comment_date{
color : #5F5F5F;
font-size : 10px;
vertical-align : left;
}

.image {
border-style: solid;
border-width:1px;
border-color: #000000;
margin: 2px;
}

/* pseudo-classes for image links */
a:link .image{
border-style: solid;
border-width:1px;
border-color: #000000;
margin: 2px;
}

a:visited .image{
border-style: solid;
border-width:1px;
border-color: #FCFCFC;
margin: 2px;
}

a:focus .image{
border-style: solid;
border-width:1px;
border-color: #000000;
margin: 2px;
}

a:hover .image{
border-style: solid;
border-width:1px;
border-color: #C0C0C0;
margin: 2px;
}

a:active .image{
border-style: solid;
border-width:1px;
border-color: #000000;
margin: 2px;
}

/* pseudo-classes for leftthumb links */
a:link .leftthumb,a:visited .leftthumb,a:focus .leftthumb,a:hover .leftthumb,a:active .leftthumb{
border: 2px solid #C0C0C0;
}

.imageborder {
border: 1px solid #FCFCFC;
background-color: #FFFFFF;
margin-top: 3px;
margin-bottom: 3px;
}



/*Feld unter dem Textfeld des Intemediate Pictures*/
.display_media {
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 5px;
border: none;
background: #ffffff;
}

.catrow {
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 5px;
}

/*Text unter dem Intemediate Picture*/
.tableb {
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 5px;
border: none;
background: #ffffff;
color: #000000;
}

/*Groesse des aktiven Tabs (defaultwert - bei mit fr doe tabs nicht mehr benutzt(in themes.php)*/

.tableb_compact {
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;

}

/*Kopfreihe meine selbst gebauten Seiten- grosse Schrift*/
.my-headzell{

font-family: Arial;
font-size: 16px;
font-weight: bold;
/* font-size: 100%; */
background: #E8E8EA;
text-align : left;
height : 40px;
width : 100%;
}

/*Kopfreihe meine selbst gebauten Seiten-grosse Schrift*/
.my-headzell{
border-width: 1px;
border-color: #CAD0D7;
border-top-style:solid;
border-right-style:none;
border-bottom-style:solid;
border-left-style:none;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 20px;
}


/*Kopfreihe meine selbst gebauten Seiten- kleine Schrift*/
.my-headzell-small{
font-family: Arial;
font-weight: bold;
font-size: 12px;
background: #E8E8EA;
text-align : left;
height : 20px;
width : 100%;
}

/*Kopfreihe meine selbst gebauten Seiten-kleine Schrift*/
.my-headzell-small{
border-width: 1px;
border-color: #CAD0D7;
border-top-style:solid;
border-right-style:none;
border-bottom-style:solid;
border-left-style:none;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 20px;
}



/*Von mir erstellte Tabelle*/
.my-table{
height: 12px;
text-align: left;
background: #ffffff;
border-style: solid;
border-color: #CAD0D7;
border-width: 1px;
border-collapse:collapse;
}


.my-table td{
border-style: solid;
border-width: 1px;
border-color: #CAD0D7;
border-collapse:collapse;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 5px;
padding-right: 5px;
font-size:12px;
}


.thumbnails {

/* table-layout:fixed; */

/*Hintergrund der Tabelle mit den Thumbmails*/
background: #FCFCFC;
/*Abstand der einzelnen Thumbnails zun Tabellenrand*/
padding: 10px;


/*Hoehe der Zellen der Thumbnail-Tabelle*/
/*Die Höhe kann max. so klein sein wie das hoachste Thumbnail*/

/* height: 90px;
width: 50px;
border-width: 1px;
border-color: #CAD0D7;
border-top-style:none;
border-right-style:solid;
border-bottom-style:none;
border-left-style:solid;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
*/
}

.footer {
font-size : 9px;
}

.footer a {
text-decoration: none;
color: #000000;
}

.footer a:hover {
color: #FF0000;
text-decoration: underline;
}

.statlink {
color: #000000;
text-decoration: none;
}

.statlink a:link {
text-decoration: none;
color: #000000;
}

.statlink a {
text-decoration: none;
color: #000000;
}

.statlink a:hover {
color: #FF0000;
text-decoration: none;
}

.alblink {
font-weight:normal;
}

.alblink a {
text-decoration: underline;
color: #000000;
}

.alblink a:hover {
color: #FF0000;
text-decoration: underline;
}

.catlink {
display: block;
margin-bottom: 2px;
font-weight:bold;
}

.catlink a {
text-decoration: underline;
color: #000000;
}

.catlink a:hover {
color: #000000;
text-decoration: underline;
}

.topmenu {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
margin-top: 0px;
margin-bottom: 0px;
width:120px;
white-space:nowrap;
}

.topmenu a {
display: block;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-top: 2px;
border-left-width: 0px;
background-color: #C0C0C0;
background-image : url(images/button_bg.gif);
background-position: center;
border-bottom-width: 0px;
margin: 0px 0px 2px;
color: #625b55;
text-align: center;
text-decoration: none;
border: 1px solid #FCFCFC;
color: #ff0000;
}

.topmenu a:hover {
color: #000000;
text-decoration: none;
background: #FCFCFC;
background-image : none;
}

.img_caption_table {
border: none;
background-color: #ffffff;
width : 100%;
margin : 0px;
}

.img_caption_table th {
background: #C0C0C0 ;
font-size : 12px;
color : #FCFCFC;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
border-top : 1px solid #FFFFFF;
}

.img_caption_table td {
background: #FCFCFC ;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 10px;
border-top : 1px solid #FFFFFF;
}

.debug_text {
border: #BDBEBD;
background-color: #EFEFEF;
width : 100%;
margin : 0px;
}

.clickable_option {
color: #1B2D04;
font-weight: bold;
}

.listbox_lang {
color: #000000;
background-color: #FCFCFC;
border: 1px solid #C0C0C0;
font-size: 80%;
font-family: Arial, Helvetica, sans-serif;
vertical-align : left;
margin-top: 5px;
}

.pic_title {
color: #000000;
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
text-align : center;
padding-top:0px;
padding-bottom:0px;
margin-top:0px;
margin-bottom:0px;
line-height:1.0em;
}

.pic_caption {
color: #000000;
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
text-align : center;
padding-top:0px;
padding-bottom:0px;
margin-top:0px;
margin-bottom:0px;
line-height:1.0em;
}

#SELECT_LISTS {
text-align:center;
}

.important {
/* background-image : url(images/important.gif); */
color: red;
font-weight: bold;
padding-left:1px;
padding-right:1px;
padding-top:3px;
padding-bottom:3px;
}

#cpgChooseLanguageWrapper {
}

#cpgChooseThemeWrapper {
}

.filmstrip_background {
background-color:#FF0000;

}

.prev_strip {
text-align: left;
}

.next_strip{
text-align: left;
}


/** Swfupload css **/
div.fieldset {
border: 2px solid #0E72A4;
margin: 10px 0;
padding: 20px 10px;
}

div.fieldset span.legend {
position: relative;
padding: 3px;
top: -30px;
background-color: #FCFCFC;
color: #FFF;
font-weight: bold;
}

div.flash {
width: 375px;
margin: 10px 5px;
border-color: #C0C0C0;
}

input[disabled]{ border: 1px solid #ccc } /* FF 2 Fix */


.progressWrapper {
width: 357px;
overflow: hidden;
}

.progressContainer {
margin: 5px;
padding: 4px;
border: solid 1px #E8E8E8;
background-color: #F7F7F7;
overflow: hidden;
}
/* Message */
.message {
margin: 1em 0;
padding: 10px 20px;
border: solid 1px #FFDD99;
background-color: #FFFFCC;
overflow: hidden;
}
/* Error */
.red {
border: solid 1px #B50000;
background-color: #FFEBEB;
}

/* Current */
.green {
border: solid 1px #DDF0DD;
background-color: #EBFFEB;
}

/* Complete */
.blue {
border: solid 1px #CEE2F2;
background-color: #F0F5FF;
}

.progressName {
font-size: 8pt;
font-weight: 700;
color: #555;
width: 323px;
height: 14px;
text-align: left;
white-space: nowrap;
overflow: hidden;
}

.progressBarInProgress,
.progressBarComplete,
.progressBarError {
font-size: 0;
width: 0%;
height: 2px;
background-color: blue;
margin-top: 2px;
}

.progressBarComplete {
width: 100%;
background-color: green;
visibility: hidden;
}

.progressBarError {
width: 100%;
background-color: red;
visibility: hidden;
}

.progressBarStatus {
margin-top: 2px;
width: 337px;
font-size: 7pt;
font-family: Arial;
text-align: left;
white-space: nowrap;
color: #555;
}

a.external {
background: transparent url('../../images/link.gif') 100% 50% no-repeat;
padding-right: 10px;
}

a.progressCancel {
font-size: 0;
display: block;
height: 14px;
width: 14px;
background-image: url(../../images/cancelbutton.gif);
background-repeat: no-repeat;
background-position: -14px 0px;
float: right;
}

a.progressCancel:hover {
background-position: 0px 0px;
}

.swfupload {
vertical-align: top;
}

/**styles for photo manager*/
table#pic_sort tr td {
padding: 4px;
border-bottom: 1px solid #ccc;
}

/** styles for album manager and photo album*/
table#album_sort tr td {
padding: 3px;
border-bottom: 1px solid #ccc;
}

table#album_sort tr td span.editAlbum {
margin-left: 100px;
font-size: 10px;
line-height: 100%;
text-decoration: underline;
cursor: pointer;
display: none;
color: #000000;
}

.cpg_message_info, .cpg_message_success, .cpg_message_warning, .cpg_message_error, .cpg_message_validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.cpg_message_info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('../../images/message/info.png');
}
.cpg_message_success {
color: #4F8A10;
background-color: #DFF2BF;
background-image: url('../../images/message/ok.png');
}
.cpg_message_warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('../../images/message/warning.png');
}
.cpg_message_error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('../../images/message/stop.png');
}
.cpg_message_validation {
color: #D63301;
background-color: #FFCCBA;
background-image: url('../../images/message/error.png');
}

#GB_window {
background-color: #FCFCFC;
border: 5px solid #C0C0C0;
}

.external {
background: transparent url('../../images/link.gif') 100% 50% no-repeat;
padding-right: 10px;
}

.detail_head_collapsed, .detail_head_expanded {
color: #FCFCFC;
}



(C) Juergen Schilling 30.03.2013