/*
 * $CRT 01 Aug 2006 : hb
 *
 * $AUT Holger Burkarth
 * $DAT >>main.css<< 20 Nov 2008  13:45:56 - (c) proDAD
 *
 * $VER: 1.0.10 (29.08.2008) (@ Copyright 2006-2008 proDAD GmbH)
 */




/* CSS-Styles:
 * ===========
 *
 * Hervorhebung:
 * -------------
 *   - blkmark
 *   - review
 *   - box
 *   - box2
 *   - box3
 *   - listbox
 *   - noticebox
 *   - important
 *   - lightmark30
 *   - lightmark60
 *   - linemark
 *   - linemark2
 *   - linemark3
 *   - linemarkImportant
 *   - segment_strong
 *   - screenshotTextMark
 *   - InfoTipBox [wie ToolTip]
 *
 *
 * Anmerkung:
 * ----------
 *   - notice
 *   - sub  [inline]
 *   - icon
 *   - symbol
 *   - small [ca. 20% kleiner]
 *   - tiny [ca. 30% kleiner]
 *
 *
 * Funktion:
 * ---------
 *   - filmstrip
 *   - mediaplayer
 *   - columnlist
 *   - imglist
 *   - linklist
 *   - linklist2
 *   - linklist3
 *   - formlist
 *   - hrzlist
 *   - vrtlist
 *   - navigation
 *   - news
 *   - samplelist
 *   - screenshot
 *   - icon
 *
 *
 * Banner:
 * -------
 *   - black-banner
 *
 *
 * Intern:
 * -------
 *   - PluginMenu
 *   - TopMenu
 *
 *
 *
 *
 * Details:
 * --------
 *
 * "review"
 *   logischer Textblock für (Test)-Berichte.
 *   - <h2> -- Optionale einleitende Überschrift
 *
 *
 * "blkmark"
 *   Positiv markierter Textblock.
 *   - <h2> -- Optionale einleitende Überschrift
 *
 *
 * "box"
 *   logischer Textblock.
 *   - <h2> -- Optionale einleitende Überschrift
 *   - <dl> -- Feature-Aufzählung
 *
 *
 * "columnlist"
 *   Liste mit 4 Columns pro Zeile mittels einer Tabelle.
 *     [z.B.: Technologie-Partner]
 *   - Anwenden: <div class="samplelist">...<table>...
 *
 *
 * "filmstrip"
 *   Liste von Preview-Images, optional zum Anklicken
 *
 *
 * "imglist"
 *   Feature-Aufzählung mit Text+Images.
 *   - Verändert Eigenschaften von "box".
 *   - Anwenden: <div class="imglist">...<div class="box">...
 *
 *
 * "important"
 *   Wichtige Info als Textblock.
 *   - <h2> -- Optionale einleitende Überschrift
 *
 *
 * "lightmark30"
 * "lightmark60"
 *   Dezent positiv markierter Textblock.
 *
 *
 * "linemark"
 *   Textzeile mit positiver Markierung.
 *
 *
 *
 * "linklist"
 *   Links als Liste.
 *
 *
 * "hrzlist"
 *   Horizontale Liste.
 *   - Anwenden: <ul class="hrzlist"> <li> </li> </ul>
 *
 * "vrtlist"
 *   Vertikale Liste.
 *   - Anwenden: <ul class="vrtlist"> <li> </li> </ul>
 *
 *
 * "navigation"
 *   Anzeige der aktuellen Position in der Site.
 *   - "label"    -- Titel wie "Sie befinden sich hier:"
 *   - "selected" -- Name der aktuellen Seite
 *
 *
 * "news"
 *   Meldungen anzeigen.
 *   - "item"   -- Eine Nachricht "umschließend"
 *   - <h2>     -- Headline einer Nachricht
 *     + "mark" -- Markierte Nachricht: NEW
 *   - <p>      -- Nachricht / Text
 *   - <ol>     -- Liste von Links zur Nachricht
 *   - <u>      -- Unterüberschrift im Text
 *   - <i>      -- Eigenname/Bezeichnung im Text
 *
 *
 * "notice"
 *   Kleine (unwichtige) Anmerkung.
 *
 *
 * "PluginMenu"
 *   Auswählbare Plugins.
 *
 *
 * "samplelist"
 *   Samples auflisten
 *   - Ermöglicht (klickbare) Images als Tabelle
 *   - Anwenden: <div class="samplelist">...<table>...
 *
 * "screenshot"
 *   Nicht klickbares Image.
 *
 * "icon"
 *   Nicht klickbares kleines Image.
 *
 *
 * "icon"
 *   Kleines Bild für z.B. Infos
 *   - Anwenden: <img class="icon" ... >
 *
 * "symbol"
 *   klickbares kleines Image: z.B. Play
 *
 *
 * "segment_strong"
 *   Mehrere Produkt-Infos auf einer Seite anzeigen.
 *   - <h2>    -- Produktname als Überschrift
 *   - "links" -- Liste von Links zum Produkt
 *
 *
 * "TopMenu"
 *   Hauptmenü
 */


















/*
 * Grunddefinition der Seiten.
 */
body
{
	padding:			0px;
	margin:				0px;
	color:				black;
	background-color:	white;
}


/*********************************************************************/
/*********** nicht Design bezogen ************************************/
/*********************************************************************/

fieldset
{
  padding: 0.5em;
  padding-left: 0px;
  text-align: left;
  background-color: #eeeeee;
  filter: progid:DXImageTransform.Microsoft.Gradient
   (startColorStr='#ffffff', endColorStr='#eeeeee', gradientType='0');
}


legend
{
  font-weight: bold;
  padding-bottom: 1.0em;
  color: #336699;
}







/*********************************************************************/
/*********************************************************************/
/*********** D e s i g n 01 ******************************************/
/*********************************************************************/
/*********************************************************************/
#Design01
{
	height:    100%;
	border:    0px;
	padding:   0px;
	margin:    0px;

	/* wird von ie6 nicht unterstützt, jedoch vom FireFox 1.5 */
	max-width: 55em; /* empirisch ermittelt: "heroglyph_std_details.html" */

	/* In Verbindung mit max-width den Inhalt zentrieren. */
	margin-left:auto; margin-right:auto;


	background-color:	white;
	font-family:		Arial, Verdana, Sans-Serif;
	color:				#555555;

	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCCCCC;

	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #CCCCCC;

	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
}

#Design01 i
{
	color:		#447777;
}


/* Zuerst alle Images ohne Rahmen
 * Dies wird (später/unten) spezifisch überschrieben
 */
#Design01 img
{
	border: 0px;
}


/* Standard Link
 */
#Design01 a:link
{
	text-decoration: underline;
	color: #3333aa;
}

#Design01 a:visited
{
	color: #606088;
}

#Design01 a:hover
{
	color: #aa3333;
	background: #eeeecc;
}

#Design01 a:active
{
	color: #888866;
}


/*
 ******** alle klickbaren Images mit hover ausstatten
 */
#Design01 a img
{
	border: 2px solid white;
}

#Design01 a:hover img
{
	border: 2px solid #990000;
}


/* Anmerkung */
#Design01 .notice
{
	font-weight: normal;
	text-align:  right;
	color: #aaaaaa;
	font-size: 0.75em;
	margin: 0px;
	padding: 0px;
}

/* Inline Anmerkung */
#Design01 .sub
{
	font-weight: normal;
	color: #aaaaaa;
	font-size: 0.75em;
}


/* kleinere Schrift */
#Design01 .small
{
	font-size: 0.8em;
}

/* kleinere Schrift */
#Design01 .tiny
{
	font-size: 0.7em;
}

#Design01 .mark
{
	color: #ffffff;
	background-color: #ff4444;
	padding: 2px 12px;
}




#Design01 p
{
	text-align: justify;
}


#Design01 .icon
{
	vertical-align:   middle;
}

#Design01 a .icon
{
	border: 0px;
}

#Design01 a:hover .icon
{
	border: 0px;
	background-color: #990000;
}

#Design01 .symbol
{
	vertical-align:   middle;
	margin: 1px 2px;
}








/* Layout
 *
 * siehe asp/dep.asp
 * define: LAYOUT
 */
#Design01 .layout-head table
{
	float:   right;
	border:  0px;
	width:   100px; /* damit Newsletter+Search rechts positioniert werden */
	height:  48px;
	margin:  1px;
	padding: 2px;
}

#Design01 .layout-main
{
	width:   100%;
	border:  0px;
	margin:  0px;
	padding: 0px;
}

#Design01 .layout-head
{
	vertical-align: top;
	margin:  0px;
	padding: 0px;
	height:  60px;
	background-color: white;
	background-image: url(gfx/head.png);
	background-position: left top;
}

#Design01 .layout-head a img
{
	margin: 1px;
	border: 1px solid #cccccc;
	background-color: white;
	padding: 0px 4px;
}

#Design01 .layout-head a:hover img
{
	border: 1px solid #aa4444;
}


#Design01 .layout-footnote
{
	font-size:  0.65em;
	margin:     0px;
	padding:    4px;
	padding-bottom:  12px;
	color:      #999999;
	text-align: center;

	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCCCCC;
}

#Design01 .layout-topmenu
{
	margin:    0px;
	padding:   0px;
}

#Design01 .layout-submenu
{
	margin:    0px;
	padding:   8px;
	vertical-align: top;
}

#Design01 .layout-banner
{
	margin:    0.5em 0px;
	padding:   0px;
}

#Design01 .layout-content
{
	font-size: 0.85em;
	margin:    2px 1em;
	padding:   2px;
	vertical-align: top;
}

/* wie oben, wird jedoch ohne horizontale Begleiter angezeigt */
#Design01 .layout-content-only
{
	font-size: 0.85em;
	vertical-align: top;
	margin:    1em;
}

/* h1 dient als Seitenüberschrift */
#Design01 .layout-content h1, #Design01 .layout-content-only h1
{
	font-size:           1.8em;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
}

#Design01 .layout-content h1 .label, #Design01 .layout-content-only h1 .label
{
	font-size: 0.7em;
	color:     #999999; /* heller als Std */
}

/* h2 dient als Standard-Überschrift */
#Design01 .layout-content h2, #Design01 .layout-content-only h2
{
	font-size:      1.6em;
	margin-top:     2.0em; /* zum Vorgänger Platz lassen */
	margin-bottom:  0.2em; /* damit der folgende Text an die Headline anschließt */
}

/* h3 dient als Unter-Überschrift */
#Design01 .layout-content h3, #Design01 .layout-content-only h3
{
	font-size:      1.2em;
	margin-top:     1.4em; /* zum Vorgänger Platz lassen */
	margin-bottom:  0.2em; /* damit der folgende Text an die Headline anschließt */
}

/* h4 dient als Unter-Überschrift */
#Design01 .layout-content h4, #Design01 .layout-content-only h4
{
	font-size:      1.1em;
	margin-top:     1.4em; /* zum Vorgänger Platz lassen */
	margin-bottom:  0.2em; /* damit der folgende Text an die Headline anschließt */
	font-weight:    bold;
}

#Design01 .layout-content ul, #Design01 .layout-content-only ul
{
	margin-top:  0.2em; /* damit Aufzählungen sofort beginnen */
}

#Design01 .layout-content-td
{
	vertical-align: top;
	width:          100%;
}


#Design01 .layout-preview-td
{
	vertical-align: top;
	padding-top:    4em;
}

#Design01 .layout-preview-td-email
{
	vertical-align: top;
	padding-top:    0em;
}

#Design01 .layout-preview
{
	font-size: 0.8em;
	margin:    2px;
	padding:   0px 0px;
}


#Design01 .layout-preview .filmstrip
{
	background-color: #444444;
	border:   1px solid #000000;
	margin:   2px;
	padding:  2px 4px;
}

#Design01 .layout-preview .filmstrip img
{
	margin:   3px 0px;
	display:  block;
	background-color: #000000;
	border: 1px solid #aaaaaa; /* kleinen Border für nicht-klickbare images */
}

#Design01 .layout-preview .filmstrip a img
{
	border: 3px solid #aaaaaa;
}

#Design01 .layout-preview .filmstrip a:hover img
{
	border: 3px solid #ff8888;
}










/*********************************************************************/
/*********** optional zu Design01 ************************************/
/*********************************************************************/



/*
 *********** Via DIV eine farbige Box anlegen ***********
 *
 * Beispiel:
 *  <div class="blkmark" >
 *   <h2>Überschrift</h2>
 *   text
 *  </div>
 */
#Design01 .blkmark
{
	color:            white;
	background-color: #44aa44;
	border: 3px solid black;
	padding:          1em;
}

#Design01 .blkmark h2
{
	font-size:     1.2em;
	margin:        0px;
	padding:       0px;
	margin-bottom: 0.5em;
}

#Design01 .blkmark a
{
	background-color: #eeffee;
	padding:          2px 12px;
	border:           1px solid #335533;
}

#Design01 .blkmark .small
{
	color: #228822;
}

#Design01 .blkmark .screenshot
{
	border: 2px solid #114411;
	margin: 2px;
}



/*
 *********** Via SPAN eine farbige Box anlegen ***********
 *
 * Beispiel:
 *  <span class="linemark" >Text</span>
 */
#Design01 .linemark
{
	color:            white;
	background-color: #44aa44;
	padding:          1px 6px;
}

#Design01 .linemark a
{
	background-color: #eeffee;
	padding:          1px 12px;
}

#Design01 .linemark2
{
	color:            black;
	background-color: #fff0a0;
	padding:          1px 6px;
}

#Design01 .linemark3
{
	color:            white;
	background-color: #ff8080;
	padding:          2px 8px;
	font-weight:      bold;
}

#Design01 .textmark1
{
	color:            #228822;
	font-weight:      bold;
}


#Design01 .screenshotTextMark
{
	color:            black;
	background-color: yellow;
	padding:          2px 8px;
	font-weight:      bold;
}


#Design01 .linemarkImportant
{
	padding:          1em 1px;
	font-weight:      bold;
	font-size:        1.1em;
}

#Design01 .linemarkImportant a
{
	border:           1px solid #667766;
	background-color: #ccffcc;
	padding:          6px 10px;
	margin:          6px 10px;
}








/*
 *********** Via DIV eine farbige Box anlegen ***********
 *
 * Beispiel:
 *  <div class="important" >
 *   <h2>Überschrift</h2>
 *   text
 *  </div>
 */
#Design01 .important
{
	background-color: #fff0a0;
	border:  2px solid #d0a070;
	padding: 0.6em;
}

#Design01 .important h2
{
	font-size: 1.2em;
	margin:    0px;
	padding:   0px;
	margin-bottom: 0.5em;
}

#Design01 .important img
{
	vertical-align: middle;
	border-color:  #fff0a0;
}




/*
 *********** Via DIV eine farbige Box anlegen ***********
 *
 * Beispiel:
 *  <div class="review" >
 *   <h2>Überschrift</h2>
 *   text
 *  </div>
 */
#Design01 .review
{
	background-color:  #DBDBFF;
	border:  2px solid #A9A9C5;
	padding: 0.6em;
	margin: 1.5em 0px;
}

#Design01 .review h2
{
	font-size: 1.2em;
	margin:    0px;
	padding:   0px;
	margin-bottom: 0.5em;

	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #bbbbdd;
}

#Design01 .review .notice
{
	color: #888888;
}

#Design01 .review a
{
	font-weight: bold;
	color:       #555577;
}

#Design01 .review img
{
	vertical-align: middle;
	border-color:  #DBDBFF;
}





/*
 *********** Via DIV eine farbige Box anlegen ***********
 *
 * Beispiel: (30) 1/3 an Breite
 *  <div class="lightmark30" >
 *   text
 *  </div>
 */
#Design01 .lightmark30
{
	width:   30%;
	border:  4px solid #44aa44;
	padding: 4px;
	margin:  2px;
}


#Design01 .lightmark60
{
	width:   60%;
	border:  4px solid #44aa44;
	padding: 1em;
	margin:  2px;
}









/*
 *********** für einen Screenshot ***********
 *
 * Beispiel:
 *  <img class="screenshot" ....
 */
#Design01 .screenshot
{
	border: 2px solid #888888;
	margin: 2px;
}


/*
 *********** für einen Icon ***********
 *
 * Beispiel:
 *  <img class="icon" ....
 */
#Design01 .icon
{
	border: 1px solid #888888;
	margin: 1px;
}





/*
 *********** eine (Info) Box anlegen ***********
 *
 * Beispiel:
 *  <div class="box" >
 *   <h2>Überschrift</h2>
 *   text
 *  </div>
 */
#Design01 .box
{
	background-color: #f4f4f4;
	border:  2px solid #cccccc;
	margin:  2em 0px; /* Anstand der Box nach oben/unten groß halten */
	padding: 0.7em;
}

/* Titel der Box */
#Design01 .box h2
{
	margin:        0px;
	margin-bottom: 1em;

	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
}


/* z.B. fpr odd/even Lines in einer Tabelle */
#Design01 .box .odd
{
	background-color: #f0fff0;
	padding: 0.5em;
}
#Design01 .box .even
{
	background-color: #f0f0f0;
	padding: 0.5em;
}

#Design01 .box img
{
	vertical-align: middle;
	border: 2px solid #f4f4f4;
}




#Design01 .box dl
{
	margin: 0px 2em;
}

#Design01 .box dt
{
	font-size:     1.1em;
	font-weight:   bold;
	margin-top:    1em;
	margin-bottom: 2px;
}

#Design01 .box dd
{
	margin-bottom: 2px;
}

#Design01 .box dd .sub
{
	margin-top: 0.3em;
	margin-left: 2em;
}


#Design01 .box .samples
{
	margin:  6px 0px;
	padding: 0px;
}

#Design01 .box .buy
{
	display: inline;
	margin:  2px 4px;
	padding: 2px 2px;
}

#Design01 .box .buy a
{
	padding:     2px 6px;
	background-color: #ffffff; /* heller als Hintergrund der gesamten Segment-Box */
	border: 2px solid #44aa44;
}









/*
 *********** eine Box anlegen ***********
 *
 * Beispiel:
 *  <div class="noticebox" >
 *   <h2>Überschrift</h2>
 *   text
 *  </div>
 */
#Design01 .noticebox
{
	font-weight: normal;
	color: #aaaaaa;
	font-size: 0.75em;

	background-color: #fafafa;
	border:  2px solid #eeeeee;
	margin:  2em 0px; /* Anstand der Box nach oben/unten groß halten */
	padding: 0.7em;
}

/* Titel der Box */
#Design01 .noticebox h2
{
	margin:        0px;
	margin-bottom: 1em;

	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #eeeeee;
}


#Design01 .noticebox dl
{
	margin: 0px 2em;
}

#Design01 .noticebox dt
{
	font-size:     1.1em;
	font-weight:   bold;
	margin-top:    1em;
	margin-bottom: 2px;
}

#Design01 .noticebox dd
{
	margin-bottom: 2px;
}


/*
 *********** eine (Info) Box anlegen ***********
 *
 * Beispiel:
 *  <div class="box2" >
 *   <h2>Überschrift</h2>
 *   text
 *  </div>
 */
#Design01 .box2
{
	background-color: #e4f4e4;
	border:  2px solid #aaccaa;
	margin:  2em 0px; /* Anstand der Box nach oben/unten groß halten */
	padding: 0.7em;
}

/* Titel der Box */
#Design01 .box2 h2
{
	margin:        0px;
	margin-bottom: 1em;

	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #aaCCaa;
}


#Design01 .box2 dl
{
	margin: 0px 2em;
}

#Design01 .box2 dt
{
	font-size:     1.1em;
	font-weight:   bold;
	margin-top:    1em;
	margin-bottom: 2px;
}

#Design01 .box2 dd
{
	margin-bottom: 2px;
}


/*
 *********** eine (Info) Box anlegen ***********
 *
 * Beispiel:
 *  <div class="box3" >
 *   <h2>Überschrift</h2>
 *   text
 *  </div>
 */
#Design01 .box3
{
	background-color: #f4f4e4;
	border:  2px solid #ccccaa;
	margin:  2em 0px; /* Anstand der Box nach oben/unten groß halten */
	padding: 0.7em;
}

/* Titel der Box */
#Design01 .box3 h2
{
	margin:        0px;
	margin-bottom: 1em;

	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCaa;
}


#Design01 .box3 dl
{
	margin: 0px 2em;
}

#Design01 .box3 dt
{
	font-size:     1.1em;
	font-weight:   bold;
	margin-top:    1em;
	margin-bottom: 2px;
}

#Design01 .box3 dd
{
	margin-bottom: 2px;
}



/*
 *********** eine (Info) Box ohne Aufzählungsknöpfe ***********
 *
 * Beispiel:
 *  <div class="listbox" >
 *   <h2>Überschrift</h2>
 *   <dl>
 *    <dt> </dt>
 *      <dd> </dd>
 *      <hr>
 *   </dl>
 *  </div>
 */
#Design01 .listbox
{
	background-color: #f4f4f4;
	border:  2px solid #cccccc;
	margin:  2em 0px; /* Anstand der Box nach oben/unten groß halten */
	padding: 0.7em;
}

/* Titel der Box */
#Design01 .listbox h2
{
	margin:        0px;
	margin-bottom: 1em;

	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
}

/* zweiter Titel der Box */
#Design01 .listbox h3
{
	margin:        0px;
}

#Design01 .listbox hr
{
	border:1px dotted #dddddd;
	width: 50%;
	text-align: left;
}


#Design01 .listbox dl
{
	margin: 0px 2em;
}

#Design01 .listbox dt
{
	font-weight:   bold;
	margin-top:    1em;
	margin-bottom: 2px;
}

#Design01 .listbox dd
{
	margin-bottom: 0.7em;
	padding-left: 1em;
}







/*
 *********** Erweiterung zu box ***********
 * Dient dem Auflisten z.B.: Produkten für Host-Apps
 */

#Design01 .imglist
{
	margin:  0px;
	padding: 0px;
}

#Design01 .imglist .box dt img
{
	vertical-align:   middle;
	border: 1px solid #e0e0e0;
}


#Design01 .imglist .box dt
{
	margin-top: 3em;
}

#Design01 .imglist .box dd
{
	margin-left: 5em;
	margin-top:  4px;
	display:     list-item;
}

#Design01 .imglist .box dd img
{
	vertical-align: middle;
}





/*
 *********** Erweiterung zu box ***********
 *
 */

#Design01 .samplelist
{
	margin:  0px;
	padding: 0px;
}

#Design01 .samplelist table
{
	border:  0px;
	padding: 0px;
	background-color: #444444;
	color:    white;
}

#Design01 .samplelist td
{
	border:  2px solid #555555;
	padding: 6px;
}

#Design01 .samplelist td a
{
	color:    white;
	text-decoration: none;
}
#Design01 .samplelist td a:link, #Design01 .samplelist td a:visited
{
	color:    white;
}

#Design01 .samplelist td a:hover
{
	color:            white;
	background-color: #990000;
}













/*
 ******** Segmentierte Box für z.B. Liste der Produkte ***********
 */
#Design01 .table_strong
{
}

#Design01 .segment_strong
{
	width:   96%;
	height:  96%;
	border:  2px solid #777777;
	margin:  0px;
	margin-bottom: 1.3em;
	padding: 0.3em;
	padding-bottom: 1px;
	background-color: #f4f4f4;
	filter: progid:DXImageTransform.Microsoft.Gradient
	 (startColorStr='#fcfcfc', endColorStr='#e8e8e8', gradientType='0');
}

#Design01 .segment_strong table
{
	border:  0px;
	width:   100%;
	margin:  0px;
	padding: 0px;
}

#Design01 .segment_strong .infotext
{
	min-height: 7em;
}




#Design01 .segment_strong h2
{
	padding: 0px;
	margin:  0px;
	margin-bottom: 1em;

	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
}


/* Titel der Box */
#Design01 .segment_strong h3
{
	margin:        0px;
	margin-bottom: 1em;
}


#Design01 .segment_strong .links
{
	text-align:  left;
	margin:      0px;
	margin-top:  0.2em;
	padding:     3px;
	background-color: white; /* heller als Hintergrund der gesamten Segment-Box */
	border: 1px solid #e0e0e0;
}



#Design01 .segment_strong img
{
	vertical-align: middle;
	margin:  0px;
	padding: 0px;
}


#Design01 .segment_strong .samples
{
	margin:  4px 0px;
	padding: 0px;
}

#Design01 .segment_strong .buy
{
	display: inline;
	margin:  2px 4px;
	padding: 2px 2px;
}

#Design01 .segment_strong .buy a
{
	padding:     2px 6px;
	background-color: #ffffff; /* heller als Hintergrund der gesamten Segment-Box */
	border: 2px solid #44aa44;
}


#Design01 .segment_strong .highlight
{
  background-color: #ffe78f;
  padding: 1em;
}









/*
 ******** Zeilenliste ***********
 */
#Design01 .columnlist
{
	width:   100%;
	padding: 2px;
	margin:  0px;
}

#Design01 .columnlist td
{
	width: 25%;
}

#Design01 .columnlist .column
{
	text-align: center;
	vertical-align: top;
	padding: 8px;
	margin:  0px;
	border:  1px solid #cccccc;
}










/*
 ******** News Liste ***********
 */
#Design01 .news
{
	padding: 0px;
	margin:  0px;
}

#Design01 .news .item
{
	margin:  0px;
	padding: 0px;
	padding-bottom: 2px;
	margin-bottom:  1em;
	background-color: #eeeeee;
	border: 1px solid #aaaaaa;
}

#Design01 .news h2
{
/*	font-family: Courier; */
	font-size:   1.1em;
	padding:     2px 12px;
	margin:      0px;
	font-weight: bold;

	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	color: black;
	background-color: #ffe78f;
}

#Design01 .news h2 .mark
{
	color: #ff0000;
	background-color: black;
	padding: 2px 12px;
}


#Design01 .news .item p
{
	font-size:    0.9em;
	margin-top:   0.2em;
	margin-left:  2em;
	margin-right: 2em;
}

#Design01 .news .item ol
{
	margin-top:   1px;
	margin-left:  6em;
}

#Design01 .news .item i
{
	text-decoration: none;
	color:           #55AA55;
	font-weight:     bold;
}

#Design01 .news .item u
{
	text-decoration: none;
	font-weight: bold;
	font-size:   1.07em;
}



















#Design01 .navigation
{
	font-size:  0.7em;
	text-align: left;
	margin:     0px;
	margin-bottom: 4em;
	padding:    1px;
	color:      #999999;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #eeeeee;
}

#Design01 .navigation .label
{
	font-weight:   bold;
	padding-right: 6px;
}

#Design01 .navigation .selected
{
	font-weight: bold;
	padding: 1px 4px;
}



#Design01 .linklist
{
	font-size:  0.9em;
	width:      97%;
	text-align: left;
	margin:     1.0em 4px;
	padding:    6px;
	background-color: #f6f6f6;
	border: 1px solid #e0e0e0;
}

#Design01 .linklist img
{
	vertical-align: middle;
	margin:  0px;
	padding: 0px 2px;
}

#Design01 .linklist a
{
	white-space: nowrap; /* Links nicht umbrechen */
}


/*
 *********** ***********
 *
 * Beispiel:
 *  <div class="linklist2" >
 *   <h2>Überschrift</h2>
 *   <ul> <li> ...
 *   text
 *  </div>
 */
#Design01 .linklist2
{
	font-size:  0.9em;
	text-align: left;
	margin:     1.0em 4px;
	margin-top: 2.0em;
	padding:    6px;
	background-color: #f6f6f6;
	border: 1px solid #e0e0e0;
	width: 19em;
}

#Design01 .linklist2 img
{
	vertical-align: middle;
	margin:  0px;
	padding: 0px 2px;
}

#Design01 .linklist2 ul
{
	margin: 0.5em 1.5em;
	margin-top: 0.1em;
}

#Design01 .linklist2 li
{
	margin-bottom: 0.1em;
}

#Design01 .linklist2 h2
{
	margin:        0px;
	margin-bottom: 1em;
	font-size:     1.1em;

	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
}

#Design01 .linklist2 ul
{
	padding:        0px;
	margin-top:     4px;
	margin-bottom:  4px;
}



/*
 *********** ***********
 *
 * Beispiel:
 *  <div class="linklist3" >
 *   <h2>Überschrift</h2>
 *   <ul> <li> ...
 *   text
 *  </div>
 */
#Design01 .linklist3
{
	text-align: left;
	margin-top: 2.0em;
	padding:    6px;
}

#Design01 .linklist3 img
{
	vertical-align: middle;
	margin:  0px;
	padding: 0px 2px;
}

#Design01 .linklist3 ul
{
	margin: 0.5em 1.5em;
	margin-top: 0.1em;
}

#Design01 .linklist3 li
{
	margin-bottom: 0.1em;
	list-style-image: url(gfx/GoToNextHS.png);
}

#Design01 .linklist3 h2
{
	margin:        0px;
	margin-bottom: 1em;
	font-size:     1.1em;

	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
}





/*
 *********** ***********
 *
 * Beispiel:
 *  <div class="formlist" >
 *   <ul> <li> ...
 *  </div>
 */
#Design01 .formlist table
{
	margin:     0em 2em;
}
#Design01 .formlist table
{
	vertical-align:   top;
}

#Design01 .formlist th
{
	font-weight: normal;
	vertical-align:   top;
}














#Design01 .hrzlist
{
	text-align: left;
	margin:     1px;
	padding:    0px;
}

#Design01 .hrzlist img
{
	vertical-align: middle;
	margin:  0px;
	padding: 0px 2px;
}

#Design01 .hrzlist a
{
	white-space: nowrap; /* Links nicht umbrechen */
}

#Design01 .hrzlist li
{
	display:    inline;
	list-style: none;
	padding:    1px 4px;
	margin:     0px;
}




#Design01 .vrtlist
{
	text-align: left;
	margin:     0px;
	padding:    0px;
}

#Design01 .vrtlist li
{
	list-style: none;
	padding:    0.1em 0.2em;
	margin:     0px;
}






#Design01 .filmstrip
{
	background-color: #444444;
	border:  1px solid #000000;
	margin:  2px;
	padding: 2px 4px;
	text-align: center;
}

#Design01 .filmstrip img
{
	background-color: #000000;
}



#Design01 .mediaplayer
{
	background-color: #000000;
	border:  2px solid #666666;
	margin:  2px;
	padding: 6px 6px 0px 6px;
	text-align: center;
	/*background-image: url(gfx/ado-mm-screenshot.jpg); */
	background-repeat:no-repeat;
	background-position: center top;
}

#Design01 .mediaplayer img
{
	background-color: #444444;
}











/*********************************************************************/
/*********** Plugin - Menu zu Design01 *******************************/
/*********************************************************************/


#Design01 .PluginMenu
{
	text-align: center;
	margin:  0px;
	padding: 0px;
	border:  2px solid #dddddd;
	white-space: nowrap; /* Links nicht umbrechen */
}

#Design01 .PluginMenu h2
{
	width:       100%;
	font-size:   0.7em;
	font-weight: normal;
	text-align:  center;
	margin:      0px;
	padding:     0px;
	background-color: #eeeeee;
	border-bottom: 2px solid #dddddd;
	filter: progid:DXImageTransform.Microsoft.Gradient
	 (startColorStr='#fcfcfc', endColorStr='#e8e8e8', gradientType='0');
}

#Design01 .PluginMenu ul
{
	font-size: 0.8em;
	padding:   0px;
	margin:    0px;
	margin-bottom: 1.1em;
	margin-right:  5px;
	margin-left:   20px;
	text-align: left;
}

#Design01 .PluginMenu li
{
	margin: 0px;
	text-decoration: none;
	padding-top:    1px;
	padding-bottom: 1px;
	padding-left:   0px;
	padding-right:  0px;
	list-style-image: url(gfx/slash.gif);
	background-color: #f4f4f4;
}

#Design01 .PluginMenu li a
{
	margin:  0px;
	padding: 0px;
	text-decoration: none;
	font-size: 0.95em;
}

#Design01 .PluginMenu .Title
{
	font-size:           0.9em;
	text-align:          left;
	border:              0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #cccccc;
	padding:     2px;
	margin:      0px;
	margin-top:  0.7em;
	width:       100%;
}

#Design01 .PluginMenu .Title img
{
	padding: 0px;
	margin:  0px;
}

#Design01 .PluginMenu .Title .label
{
	font-weight: bold;
	color:       #cccccc;
	vertical-align: bottom;
	text-align: right;
	display:    inline;
	padding:    0px;
	margin:     0px;
}










/*********************************************************************/
/*********** TopMenu - Menu zu Design01 ******************************/
/*********************************************************************/


#Design01 .TopMenu
{
}

#Design01 .TopMenu ul
{
	font-size:		0.9em;
	margin:			0px;
	padding:		4px;
	padding-left:	1em;
	padding-right:	1em;
	border-top:			1px solid #aaaa77;
	border-bottom:		1px solid #aaaa77;
	background-color:	#ffe78f;
}

#Design01 .TopMenu li
{
	display:    inline;
	list-style: none;
	margin:     0px;
	padding:    2px;
	text-align:	center;
	border:     0px;
}

#Design01 .TopMenu li a
{
	text-decoration: none;
	margin:         0px;
	padding:        2px;
	padding-left:   0.5em;
	padding-right:  0.5em;
	border:     1px solid	#ffe78f;
	white-space:    nowrap; /* Links nicht umbrechen */
	font-weight:    bold;
}

#Design01 .TopMenu li a:hover
{
	background-color:	#ffffff;
	border:     1px solid #aa4444;
}


#Design01 .TopMenu .languages
{
	display: inline;
	margin:  0px;
	padding: 0px;
}


#Design01 .TopMenu .languages a
{
	border:  0px;
	margin:  0px;
	padding: 0px;
}

#Design01 .TopMenu .languages a:hover
{
	border:  0px;
	margin:  0px;
	padding: 0px;
}

#Design01 .TopMenu .languages img
{
	border:  2px solid	#ffe78f;
	margin:  0px;
	padding: 0px;
	vertical-align: middle;
}

#Design01 .TopMenu .languages a img
{
	border:  1px solid	#ffe78f;
	margin:  0px;
	padding: 0px;
}

#Design01 .TopMenu .languages a:hover img
{
	border:  1px solid #aa4444;
	margin:  0px;
	padding: 0px;
}









/*********************************************************************/
/*************** ImgTable - Design01 *********************************/
/*********************************************************************/

#Design01 .PlugList
{
	margin:  0px;
	padding: 0px;
}
#Design01 .PlugList .box dt
{
	margin-top:    0px;
	margin-bottom: 0px;
}
#Design01 .PlugList .box dd
{
	margin:  1px;
}

#Design01 .PlugList .box td
{
	border-bottom: 1px solid #e0e0e0;
}

#Design01 .PlugList .dsc
{
	font-weight:  normal;
	font-size: 0.8em;
	margin: 0em 0em 0.5em 0em;
}

#Design01 .PlugList .box td img
{
	vertical-align:   middle;
	border: 1px solid #e0e0e0;
}





#Design01 .ImgTable
{
	margin:  0px;
	padding: 0px;
	border-spacing : 0px;
}
#Design01 .ImgTableCol1
{
	padding: 0.8em;
	padding-bottom: 1.8em;
	vertical-align:  top;
	white-space: nowrap;
	font-weight: bold;
}
#Design01 .ImgTableCol2
{
	padding-top: 0.8em;
	margin-top: 0.8em;
	text-align: left;
}






/*********************************************************************/
/*************** PluginList2 - Design01 ******************************/
/*********************************************************************/

#Design01 .PluginList2
{
	margin:  0px;
	padding: 0px;
}
#Design01 .PluginList2 .Grid
{
	border: 0px;
	width: 100%;
	text-align: left;
}

#Design01 .PluginList2 .GridItm
{
	width:      26em;
	min-height: 6em;
	background-color: #e4f4e4;
	border:  2px solid #aaccaa;
	margin:  1em;
	padding: 0.5em 2em 1em 0.5em;
}

#Design01 .PluginList2 .GridItm dl
{
	margin: 0px 1em;
}

#Design01 .PluginList2 .GridItm dt
{
	margin-top:    0px;
	margin-bottom: 0px;
}
#Design01 .PluginList2 .GridItm dd
{
	margin:  1px;
	white-space: nowrap;
}

#Design01 .PluginList2 .GridItm .sub
{
	color: #668866;
	font-size: 0.9em;
	font-weight: bold;
}

#Design01 .PluginList2 .GridItm img
{
	vertical-align:   middle;
	border: 1px solid #aaccaa;
}







/*********************************************************************/
/*************** ProductList2 - Design01 *****************************/
/*********************************************************************/

#Design01 .ProductList2
{
	margin:  0px;
	padding: 0px;
}
#Design01 .ProductList2 .Grid
{
	border: 0px;
	width: 100%;
	text-align: left;
}

#Design01 .ProductList2 .GridItm
{
	margin:  0.2em;
	padding: 0.2em;
}

#Design01 .ProductList2 .GridItm .Dsc
{
	padding: 1px;
	padding-left: 0.5em;
	vertical-align: top;
}

#Design01 .ProductList2 .GridItm .Logo
{
	margin: 0px;
	padding: 0px;
	text-align: center;
}

#Design01 .ProductList2 .Logo img
{
	vertical-align:   middle;
	border: 1px solid #aaaacc;
}


#Design01 .ProductList2 .links
{
	margin: 0px;
	margin-top: 2px;
	padding: 2px;
}

#Design01 .ProductList2 .Text
{
	margin: 0px;
	padding: 0px;
}

#Design01 .ProductList2 .Text img
{
	vertical-align:   middle;
}

#Design01 .ProductList2 .links img
{
	vertical-align:   middle;
}

#Design01 .ProductList2 .links a
{
	color: blue;
	padding: 2px;
	border: 1px solid white;
}
#Design01 .ProductList2 .links a:hover
{
	color: green;
	border: 1px solid #aaaacc;
}



#Design01 .ProductList2 .Preview
{
	border: 0px;
}

#Design01 .ProductList2 .Preview a img
{
	border: 0px ;
}




#Design01 .ProductList2 .Text
{
	font-size: 0.9em;
}


/*********************************************************************/
/*************** Banner - Design01 ***********************************/
/*********************************************************************/


#Design01 .black-banner
{
	margin:  0px;
	padding: 2px 0px;
	background: black;
	text-align: center;
}

#Design01 .black-banner a img
{
	border: 2px solid black;
}

#Design01 .black-banner a
{
	color: #5050e0;
}

#Design01 .black-banner a:hover img
{
	border: 2px solid #990000;
}






/*********************************************************************/
/*************** Upgrade - Design01 **********************************/
/*********************************************************************/

#Design01 .productBox1
{
	text-align: center;
	font-size:     1.1em;
	font-weight:   bold;
	margin:  0px;
	padding: 0.3em;
	background-color:  #f4e4e4;
	border:  2px solid #ccaaaa;
}

#Design01 .productText1
{
	background-color:  #f4e4e4;
	padding: 1px;
}

#Design01 .productBox2
{
	background-color: #e4f4e4;
	border:  2px solid #aaccaa;
	margin:  0px 2.0em;
	padding: 0.5em;
}

#Design01 .productText2
{
	background-color: #e4f4e4;
	padding: 1px;
}

#Design01 .productBox2 .title
{
	margin:      0px;
	margin-bottom: 0.5em;
	padding:     1px;
	text-align:  center;
	font-size:   0.9em;
	font-weight: bold;
}


#Design01 .productBox2 .preis
{
	margin:    0px;
	padding:   3px;
	text-align: center;
	font-size:  0.8em;
}


#Design01 .upgradeLine
{
	text-align: center;
	margin:  0px;
	margin-bottom: 2.0em;
	padding: 0px;
}

#Design01 .upgradeLine table
{
	background-color:  #fef6f6;
/*	border:  2px solid #ccaaaa; */
	width: auto;
}


#Design01 .productArrow
{
	text-align: center;
	margin:  0px;
	padding: 0px;
}





/*********************************************************************/
/*************** explore - Design01 **********************************/
/*********************************************************************/

#Design01 .explore
{
}


#Design01 .explore .Grid
{
	width: 100%;
	text-align: center;
}


#Design01 .explore img
{
	vertical-align:   middle;
}

#Design01 .explore .Headline
{
	font-weight: bold;
	font-size: 1.9em;
	color: black;
}

#Design01 .explore a img
{
	border: 0px ;
}






/*********************************************************************/
/*************** InfoTipBox - Design01 *******************************/
/*********************************************************************/

#Design01 .InfoTipBox
{
	background-color:  #FFFFE1;
	border:  1px solid #444444;
	color: #444444;
	font-size: 0.7em;
	padding: 5px;
	margin:  7px;
}









/*********************************************************************/
/*********** nicht Design bezogen ************************************/
/*********************************************************************/



/* Anzeige unterdrücken
 */
.none
{
	display: none
}





/*********************************************************************/
/*********** Flush-Video *********************************************/
/*********************************************************************/
#cs_flashBody
{
	background-color: black;
	text-align: center;
	padding: 1em;
}
#cs_noexpressUpdate
{
	margin: 0 auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #003300;
	text-align: left;
	background-image: url(small_short_nofp_bg.gif);
	background-repeat: no-repeat;
	width: 210px;
	height: 200px;
	padding: 40px;
}