/* 	design3 - CSS Stand 02.07.09  - SEAM 2.1.1 ONLY 
	copyright 2009 www.cocompose.com 

	SAMPLES
******************************************************************************
Beispiel für Einbindung der Background-Container

class="cont_onwhite"
class="cont_ongreen"
class="cont_ondark"

	USED COLORS - Development
*******************************************************************************
Weiss:								fff
Gruen:								a3c822
Grau(Text ALT):	7c7c7c
Grau(Back ALT):	494949
Grau(Text NEU):				494848
Grau(Back NEU!): 				2b2d31
Hellgrau(Tabelle NEU!): 		f0f0f0
Hellgrau(Tabelle NEU!):
Hellgrau Rundungen Linie 		d0d0d0

	BROWSERSPECIFIC Rules-Library (to remember)
*******************************************************************************
Classes names that define an input field and a button appearance
See also: http://www.css-hack.de
http://standards.webmasterpro.de
!! IMPORTANT !! Use hacks always in their own rule -> do not combine in one rule

Generic rules
.CssClass {
	}

MSIE 6 specific rules (Star-HTML):
* html .CssClass {
	}
* html divName {
	}

MSIE 7 (Opera 6)specific rules (Star-Plus HTML):
* + html .CssClass {
	}
* + html divName {
	}

MSIE 7 specific rules (Star-Plus HTML):
*:first-child+html .CssClass {
	}

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




/* RESET HTML SETTINGS
******************************************************************************************************** */

a,
:link,
:visited {
	text-decoration: none;
	}

/* removed as this makes problems with lists (numbers and dots do not show up)
li,ol,ul {
	list-style-type:none;
	}*/

/* removed as this makes problems with lists */
li {
	margin: 0px;
	padding: 0px;
	}

ul { /* Auflistung Punkte*/
	margin: 0px;
	padding: 0px 0px 0px 17px;
	}

ol { /* Auflistung Zahlen */
	margin: 0px;
	padding: 0px 0px 0px 20px;
	}

/*h1,h2,h3,h4,h5,h6,pre,code*/
pre,code {
	font-size: 1em;
	}

h1,h2,h3,h4,h5,h6,pre,code {
	font-weight: normal;
	}

h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input, dl, dt, dd
 {
	margin: 0px;
	padding: 0px;
	}

img,
a img,
:link img,
:visited img,
fieldset {
	border: none;
	}

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

address {
	font-style: normal;
	}

legend {
	display: none;
	}

/* SPECIALS
************************************************************************************* */

.inline { /* Inline divs (to declared at every Inline-element - further controls hardcoded at element)*/
	display:block !important;
	display:inline !important;
	float:left !important;
	padding-left:0px;
	}

.inline2 { /* Inline common */
	display:inline;
	}
	
.inlineB { /* Inline common */
	display:inline;
	display:block !important;
	}
	
.clearer { /*clears inline divs and other*/
	display: block;
	clear: both;
	line-height: 0em;
	height: 0px;
	font-size: 0em;
	visibility: hidden;
	margin:0px;
	}

.clear {
	clear: both;
	}

.flLeft {
	float:left;
	margin-right:10px;
	}

.flRight {
	float:right;
	margin-left:10px;
	}

.txt-algn-cntr {
	text-align:center;
}


/* GENERAL SETTINGS
************************************************************************************* */

/*	 html *****************/
html {
	height: 100%;
	min-height: 100%;
	font-size: 100.01%;
	}

/*	 body + main-containers ****************/
body {
	/*background:transparent !important;*/
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-family: Arial, Helvetica, Tahoma, Geneva, Verdana, sans-serif;
	font-size: 66%;
	background-image: url(symbuttons/design3/green_bg_01.png);
	background-repeat: repeat-x;
	background-color: #a3c822;
	}

/*	 includes all except footer -  height effects footer position NEW+44 */
#website_maincontent {
	width:  1024px !important;
	height: 718px !important;
	}

/*	 includes main-navigation -  height effects content position  von 133 geändert NEW+44*/
#head {
	position: relative !important;
	top: 0px;
	left:0px;
	width: 1024px !important;
	height: 233px !important;
	text-align: left;
	z-index: 10;
	}
	
/*	 Logo ****************  */
#logo {
	background-image: url(symbuttons/design3/logo_gruenweiss_transp.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 38px;
	left: 606px;
	width: 420px;
	height: 50px;
	z-index: 10;
	}

#logo a {
	display: block;
	height: 45px;
	width: 424px;
	text-indent: -700em !important;
	}
#head_bg { /*Ist der neue design3 head background*/
	/*background-image: url(symbuttons/design3/b1024_head_1.png);*/
	background: url(symbuttons/design3/design3_roundOpt1.png) 0px -26px no-repeat;
	position: absolute;
	top: 113px;
	left:-8px;
	width: 1040px !important;
	/*height: 120px !important;    OLD unoptimized version with one image only*/
	height: 17px !important;
	text-align: left;
	z-index: 0;
	}
#head_bg2 { /*Ist der neue design3 head background*/
	background: url(symbuttons/design3/design3_roundOpt2.png) -1px 0px repeat-y;
	position: absolute;
	top: 130px;
	left:-8px;
	width: 1040px !important;
	height: 103px !important;
	text-align: left;
	z-index: 0;
	}
.loginArea {
	position: relative;
	left: 806px;
	width:  199px;
	height: 76px ;
	border-left: dotted 1px #fff;
	border-right: dotted 1px #d0d0d0;
	border-bottom: dotted 1px #fff;
	}
.dividerLine {
	position: relative;
	left: 763px;
	top: -17px;
	width:  1px;
	height: 120px ;
	border-left: dotted 1px #a0a0a0;
	}

/* cms: includes cms-Iframe and Language selector*/
#i-frame_cms_div {
	/*position: relative !important;*/
	width: 100%;
	height: 233px;
	z-index: 9;
	}

#i-frame_cms_div .iframe_cms_itself  { /* cms: the cms-iframe itself*/
	width: 1040px;
	height: 233px;
	margin-left: -8px;
	}

/*	 includes A1-C3 -  set height value very small  for free A3 login access height war  top0 NEW+44*/
#content {
	position: relative !important;
	top: -120px !important;
	left: 0px;
	width: 1024px;
	height: 10px;
	float: left;
	z-index: 11;
	font-size:1.1em;
	line-height:1.5em;
	text-align: left;
	}
	
/*	 includes A1-C3 -  IMPORTANT set the height value very small (10px) for free A3 login access NEW+44*/
#cms_content_background {
	position: relative !important;
	top: -130px !important;
	left: 0px;
	width: 1040px;
	height: 10px !important; /*small value here (10px or less) for free A3 login access*/
	float: left;
	z-index: 5;
	}

#position_content { /* used in CMS and cc Template */
	position: absolute;
	top: 31px;
	height: 0px;
	}
	
#content_whitebasic_container{ /*used to encapsulate white rounded content area*/
	background: url(symbuttons/design3/design3_roundOpt2.png) -1042px 0px repeat-y;
	position: relative;
	top: 89px !important;
	left: -8px;
	width: 1040px;
	height: auto;
	padding-bottom: 19px;
	z-index: 1;
	}

#content_whitebasic_container2{/*place content and keep distances to page edges*/
	height:100%;
	width:974px;
	margin-left: 34px;
	padding-top: 25px;
	}

#content_whitebasic_rounding{/*round ending of white content area*/
	background: url(symbuttons/design3/design3_roundOpt1.png) 0px -44px no-repeat;
	position: relative;
	top: 89px !important;
	left: -8px;
	width: 1040px;
	height: 18px; /* DO NOT CHANGE SINCE FILMSTRIP would apear !! */
	z-index: 1;
	}

/*	 independent window for non template use*/
.independentWindow {
	font-size:1.2em;
	line-height:1.5em;
	text-align: left;
	}
	
/* CMS related settings
**************************************************************************************
************************************************************************************* */

#i-frame_head { /* USED ON CMS-SYSTEM ONLY */
    top: 0px;
    left: 0px;
    width:1068px;
    height: 233px;
    overflow: hidden;
    z-index: 20;
}

#cms_iframe_content { /* gives settings to content of iframes (necessary as not included in content)*/
	top: 0px;
	left: 0px;
	float: left;
	z-index: 11;
	font-size:1.1em;
	line-height:1.5em;
	text-align: left;
	}

#iframe_B2 { /*iframe Container */
	width: 710px;
	height: 1050px;
	padding: 0px 10px 0px 0px;
	background:transparent
	}

#cms_printwindow { /*	 includes A1-C3 -  set height value very small  for free A3 login access height war  top0 */
	position: absolute;
	top: 50px;
	left: 10px;
	width: 680px;
	float: left;
	font-size:1.1em;
	line-height:1.5em;
	text-align: left;
	}

.printsymbol{ /*printsymbol*/
	margin-bottom: -2px;
	}

/*	HEADLINES (Content-Block)
**************************************************************************************
************************************************************************************* */

#content h1,
#cms_printwindow h1,
#cms_iframe_content h1 {
	font-size: 1.3em;
	line-height: 1.3em;
	margin-bottom: 2px;
	}

#content h2,
#cms_printwindow h2,
#cms_iframe_content h2 {
	font-size: 1.2em;
	line-height: 1em;
	padding-bottom: 8px;
	}

#content h3,
#cms_printwindow h3,
#cms_iframe_content h3 {
	font-size: 1.1em;
	}

#content h4,
#cms_printwindow h4,
#cms_iframe_content h4 {
	font-size: 1em;
	font-weight: bold;
	}

#content h5,
#cms_printwindow h5,
#cms_iframe_content h5 {
	font-size: 0.9em;
	}

#content h6,
#cms_printwindow h6,
#cms_iframe_content h6 {
	font-size: 0.9em;
	margin-top: -0.5em;
	margin-bottom: 1em;
	}


.cont_ongreen h1,
.cont_ongreen h2,
.cont_ongreen h3,
.cont_ongreen h4,
.cont_ongreen h5,
.cont_ongreen h6 {
	color: #494848;
	}

.cont_ondark h1,
.cont_ondark h2,
.cont_ondark h3,
.cont_ondark h4,
.cont_ondark h5,
.cont_ondark h6 {
	color: #a3c822;
	}

.cont_onwhite h1,
.cont_onwhite h2,
.cont_onwhite h3,
.cont_onwhite h4,
.cont_onwhite h5,
.cont_onwhite h6 {
	color: #a3c822;
	}

/* Highslide Settings
**************************************************************************************
************************************************************************************* */
	
html .HS_iframe { /* HS iframe body*/
	}
	
/* MSIE 7 (Opera 6)specific rules (Star-Plus HTML): */
* + html  .HS_iframe h1{ /* HS iframe body h1 - IE7 hack */
	font-size: 1.7em;
	padding-bottom: 3px;
	}
.draggable-header { 
	}
.highslide-html { 
	}
.highslide-html div { 
	}
.highslide-html-content { 
	}
.highslide-container { 
	}
.highslide-container div { /*highslide.css (Linie 2)*/
	}
	
.highslide-html-content div.highslide-header { /*IMPORTANT FOR BACKGROUND ALL THREE NEEDED*/
	background-image: none;
	background-color: #fff;
	z-index:10;
	}
	
.highslide-html-content div { /*IMPORTANT FOR BACKGROUND ALL THREE NEEDED*/
	background: url(symbuttons/design3/green_bg_01.png) repeat-x;
	/*background-attachment: fixed;*/
	/*background-color: #262626;*/
	z-index:0;
	}
.highslide-html-content div.highslide-footer { /*IMPORTANT FOR BACKGROUND ALL THREE NEEDED*/
	background-image: none;
	background-color: #fff;
	z-index:10;
	}

.highslide-body-container { /*nur in highslide-full.js selbst eingefügt Zeile 150*/
	height:100%;
	/*background: url(symbuttons/design3/green_bg_01.png) repeat-x;*/
	/*background-attachment: fixed;*/
	/*background-color: #a3c822; /*background-color: #262626;*/
	font-family: Arial, Helvetica, Tahoma, Geneva, Verdana, sans-serif;
	font-size:1.1em;
	z-index:1;
	/*opacity: .5;
	/*-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*first! */
	/*filter: alpha(opacity=50);					/* second!*/
	}

.highslide-body-container-content { /*TRIAL nur in highslide-full.js selbst eingefügt Zeile 150*/
	height:95%;
	background-color: red;
	}

.highslide-body { /*highslide.css (Linie 288)*/
	height:auto;
	background-color: red;
	}

.highslide-body .cont_ondark { /*highslide.css (Linie 288)*/
	height:auto;
	}

.highslide-header div { /*highslide.css (Linie 288)*/
	}

.highslide-container div h1,
.highslide-body h1 { /*highslide.css (Linie 288)*/
	font-size:1.3em;
	font-weight: normal;
	line-height: 1.3em;
	margin-bottom: 8px;
	}
	
.highslide-footer-close {
	width:90%; 
	border:solid 1px red;
	
	}

.HS_div { /*has to be provided in each HS-Include-Container*/
	padding:10px 20px 10px 20px;
	}


/* ERROR MESSAGES
**************************************************************************************
************************************************************************************* */

.message li {/* switch off bullets*/
	list-style-type:none;
	margin-left: -16px;
	}

/*Welcome messages im Contentbereich*/
.contentHeaderMessages li {/* switch off bullets*/
	list-style-type:none;
	margin-left: -14px;
	color: #a3c822;
	font-size: 1.2em;
	}

/*regelt Errormassages von Eingabefeldern und Selectboxen*/
.errmsg_my_project {
	z-index: 50;
	color: red;
	position: absolute;
	font-size: 0.9em;
	margin-top: -7px;
	margin-left: 5px;
	list-style-type:none;
	}

/*Messageformatierung für Registrierungsform*/
.errmsg_register1 {
	z-index: 50;
	color: red;
	position: relative;
	font-size: 0.9em;
	margin-top: -7px;
	margin-left: 5px;
	list-style-type:none;
	}
	
.errmsg_registerD3 {
	z-index: 50;
	color: red;
	position: absolute;
	top:-2px;
	left:350px;
	width:180px;
	font-size: 1.1em;
	margin-top: 0px;
	margin-left: 0px;
	list-style-type:none;
	}


.global_err_msg { /* global error messages on top of login area */
	color: orange;
	text-align: right;
	z-index: 50;
	position: absolute;
	top: 0;
	right: 0;
	padding-right: 4px;
	padding-left: 4px;
	}
.global_err_msg ul li {/* switch off bullets*/
	list-style-type:none;
	}

.errors {
	color: red;
	list-style-type:none;
	}

/*Farbiger Errorrand um Selectboxen und Texteingabefeld*/
.errors input,
.errors select {
	border: 1px solid red;
	}

.warning {
	color:#f00;
	}

/*Formatiert das Sternchen für required, wenn es über SEAM geliefert wird*/
.required {
	color: red;
	padding-left: 2px;
	}

.waitAnimContain { /* wait animation area */
	position: fixed;
	top:48%;
	left:49%;
	z-index:4000;
	vertical-align:middle;
	text-align:center;
	}
.waitAnimImg { /* wait img setting */
	height: 60px;
	width: 60px
	}

/*	GENERAL TABLE CONTROL
**************************************************************************************
************************************************************************************* */
	
table {
	/*border: none;*/
	padding: 0px;
	margin: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
	font-size: 1em;
	}

tr {
	padding: 0px;
	margin: 0px;
	border-spacing: 0px;
	}

td {
	/*text-align: left; */
	padding: 0px;
	margin: 0px;
	border-spacing: 0px;
	}
	
td {
	vertical-align: middle;
	}
	
table .top,
td .top { vertical-align: top; }

table.middle,
td .middle { vertical-align: middle; }

table.bottom,
td .bottom { vertical-align: bottom; }

table.left,
td .left { text-align: left; }

table.center,
td .center { text-align: center; }

table.right,
td .right { text-align: right; }

/* Erste Zeile Tabellen - Linie wir nicht von hier gesteuert*/
.cont_ongreen thead,
.cont_onwhite thead {
	color: #494848;
	text-align: left;
	}

.cont_ondark thead {
	color: #a3c822;
	text-align: left;
	}

/* Zahlenreihe 20 best-voted*/
.whitenumbers{
	color: #fff;
	text-align: left;
	}

/* Erste Zeile Tabellen - Linie*/
.table_head_underline {
	border-top: 1px solid #fff;
	vertical-align: top;
	}

.table_head_underline_grey {
	border-top: 1px solid #494848;
	vertical-align: top;
	}

/* RichTable Schrift in der Header-Zeile*/
.dr-table-thead,
.rich-table-header {
	background: none;
	background-color: transparent;
	vertical-align: bottom;
	}
/* RichTable Überschrift Zelle TextGrau #494848 mittleresGrau: #C4C0B9, HellesGrau:#f0f0f0 Grün:#a3c822*/
.cont_ongreen .rich-table-headercell,
.cont_ongreen .rich-table-subheader {
	border-bottom: 1px solid #494848;
	}
.cont_onwhite .rich-table-headercell,
.cont_onwhite .rich-table-subheader  {
	border-bottom: 1px solid #a3c822;
	}
.cont_ondark .rich-table-headercell,
.cont_ondark .rich-table-subheader  {
	border-bottom: 1px solid #f0f0f0;
	color: #a3c822;
	}
.rich-table-headercell {
	background-color: transparent;
	background: none;
	vertical-align: bottom;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 0px;
	padding-right: 5px;
	margin-right: 10px;
	text-align: left;
	}
.rich-table-subheadercell { /*	Defines styles for tables, if header is implemented in column (e.g table sortable and filterable)*/
	text-align:left;
	vertical-align: top;
	text-align:left;
	padding-bottom: 2px;
	padding-left: 0px;
	padding-right: 5px;
	margin-right: 10px;
	}
/* RichTable - Ganze Zeile Tablecontent*/
/*1.Zeile Folgezeilen im Tabellenblock bei Mehrzeiligkeit*/
.cont_ongreen .rich-table-firstrow {
	border-bottom: 1px solid #fff;
	}

.cont_onwhite .rich-table-firstrow {
	border-bottom: 1px solid #f0f0f0;
	}

.cont_ondark .rich-table-firstrow {
	border-bottom: 1px solid #f0f0f0;
	}

/*Folgezeilen im Tabellenblock bei Mehrzeiligkeit*/
.cont_ongreen .rich-table-row {
	border-bottom: 1px solid #fff;
	}

.cont_onwhite .rich-table-row {
	border-bottom: 1px solid #f0f0f0;
	}

.cont_ondark .rich-table-row {
	border-bottom: 1px solid #f0f0f0;
	}
	
.dualRow .rich-table-row { /*schaltet die border bottom aus*/
	}

/* RichTable - Zelle Tablecontent*/
/*
.cont_ongreen .rich-table-cell  {
	border-bottom: 1px solid #fff;
	}
.cont_onwhite .rich-table-cell  {
	border: 1px solid #f0f0f0;
	}
.cont_ondark .rich-table-cell  {
	border-bottom: 1px solid #f0f0f0;
	}*/

.rich-table-cell {
	padding: 2px 5px 2px 0px;
	margin-right: 10px;
	text-align: left;
	vertical-align: middle;
	}

.dualRow .rich-table-firstrow { /*schaltet die border bottom aus*/
	border: 0px solid #f0f0f0;
	}

.noBorders .rich-table-cell,
.noBorders .dr-table-cell,
.noBorders .rich-table-row,
.noBorders td,
.noBorders tr,
.noBorders .dr-table-row { /*schaltet die border bottom aus*/
	border: solid 0px #000;
	padding: 0px;
	}
	
/*Rich Tablecontrol Scroller  #494848 mittleresGrau: #C4C0B9, HellesGrau:#f0f0f0 Grün:#a3c822*/
.cont_ongreen .rich-datascr-button {
	border: 1px solid #494848;
	color: #fff;
	height: 10px;
	}
.cont_onwhite .rich-datascr-button {
	border: 1px solid #C4C0B9;
	color: #494848;
	}
.cont_ondark .rich-datascr-button {
	border: 1px solid #f0f0f0;
	color: #fff;
	}


/* Zeilen Tabellen aus DB (project searchresult)- Linien und mittige vetikale ausrichtung*/
.table_content_underline {
	border-bottom: 1px solid #fff;
	vertical-align: middle;
	}

/* Zeilennummerierung Tabellen, ohne Top20*/
.cont_onwhite .rowCount {
	font-size: 0.9em;
	color: #bfbfbf;
	font-style: italic;
	padding-right: 5px;
	border-right: solid 1px #f0f0f0;
	}

.cont_ondark .rowCount  {
	font-size: 0.9em;
	color: #d4d4d4;
	font-style: italic;
	padding-right: 5px;
	border-right: solid 1px #f0f0f0;
	}

.cont_ongreen .rowCount {
	font-size: 0.9em;
	color: #eeeeee;
	font-style: italic;
	padding-right: 5px;
	border-right: solid 1px #f0f0f0;
	}




/* BUTTONS AND FORM-ELEMENTS
**************************************************************************************
************************************************************************************* */

/*Standardelemente
**************************************************************************************
************************************************************************************* */

/*regelt Text Eingabefelder in Formularen (h:inputText styleClass="form_textfield")*/
.form_textfield {
	border: solid 1px #a3c822;
	background: #fff;
	color: #494848;
	height: 14px;
	font-size: 1em;
	padding: 0px 3px 0px 3px;
	margin-left: 0px;
	}

.form_textarea {
	border: solid 1px #a3c822;
	background: #fff;
	color: #494848;
	font-size: 1em;
	padding-left: 3px;
	margin-left: 0px;
	}

/*regelt SelectOneboxen in Formularen (h:selectOneMenu styleClass="form_selectbox") */
.form_selectbox {
	position:relative;
	top: -1px;
	border: solid 1px #a3c822;
	background-color: #fff;
	color: #494848;
	height: 17px;
	font-size: 0.9em;
	width: 110px;
	overflow: hidden;
	}

/*Position fuer language-selector auf home-seite*/
#language_selector {
	position: absolute;
	top: 17px;
	left: 0px;
	}
	
/*regelt SelectOneboxen in Formularen (h:selectOneMenu styleClass="form_selectbox") */
.form_selectbox_language {
	position:relative;
	top: -1px;
	border: solid 1px #a3c822;
	background-color: transparent;
	color: #fff;
	height: 17px;
	font-size: 1em;
	width: 80px;
	overflow: hidden;
	}
.form_selectbox_language option{ /*Ausklapp zustand*/
	background: #fff;
	color: #494848;
	font-size: 1em;
	}

/*Dateibrowser (s:fileUpload styleClass="file-browser")*/
.file-browser, input {
	/*border: 1px solid #a3c822;*/
	border-style: none;
	/* background: #fff; */
	height: 17px;
	font-size: 1em;
	color: #494848;
	padding-left: 0px;
	margin-left: 0px;
}
.white-file-browser, input {
	border: 1px solid #a3c822;
	background: #fff;
	height: 17px;
	font-size: 1em;
	color: #494848;
	padding-left: 0px;
	margin-left: 0px;
}


/* DISPLAY locked Tracks and Variations
**************************************************************************************
************************************************************************************* */
.lockedTrack,
.lockedVariation {
	color: red;
}

/*IE: Anzeige checkbox - unvotable Tracks in IE farbig dekorieren - klappt nicht in Firefox und Safari*/
.inWork {
	border: solid 1px red;
	}



/* Text partiell ändern (Sonderfälle)
**************************************************************************************
************************************************************************************* */

.text_grey {
	color: #494848;
	}

.text_green {
	color: #a3c822;
	}

/*Text partiell ändern (Sonder)*/
.text_small {
	font-size: 0.9em;
}

.text_bold {
	font-weight: bold;
}

.text_underline  {
	text-decoration: underline;
}

/* div class notes >> z.B. fuer Loginfenster "SignUp" Zeilen schmaler machen*/
.linehight_1 {
	line-height: 1em;
	}

/*pre-Ausgaben (Comments und Lyrics Textareas und outputText)*/
pre { /*Allgemein für pre-Tags*/
	overflow:auto;
}

.pre_output_onwhite {
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
	color: #494848;
	font-size: 1em;
	padding-left: 3px;
	font-family: Arial, Helvetica, Tahoma, Geneva, Verdana, sans-serif;
	}
	
.listWithEnlargedSpace li { /*Used for List in register choose*/
	margin-bottom: 1.3em;
	}

/* BUTTONWINDOWS AND SPECIAL-DIVs
**************************************************************************************
************************************************************************************* */

/* Tabledivs (Tabellenersatz) */
.tablediv1 {
	position: relative;
	height: 25px;
	}

.tablediv2 {
	position: relative;
	height: 25px;
	margin-bottom:10px;
	}

/* RubrikÜberschriften #494848 #a3c822*/
#rubrik_ondark {
	position: absolute;
	top: 6px;
	left: 33px;
	width: 600px;
	height: 25px;
	padding-left: 5px;
	overflow: hidden;
	font-size: 1.2em;
	color: #494848;
	z-index: 100;
	}

#buttonwindow-A {
	z-index: 50;
	position: absolute;
	top: 93px;
	width: auto;
	height: 27px;
	}

/* Untere Buttonsleiste im A-Fenster*/
#buttonwindow-A2 {
	z-index: 50;
	position: absolute;
	top: 93px;
	left: 0px;
	width: 770px;
	height: 27px;
	}

/* Buttonsleiste im rounded-Fenster*/
#buttonwindow-B {
	z-index: 50;
	position: relative;
	top: -5px;
	left: 0px;
	width: auto;
	padding-left: 23px;
	height: auto;
	}

/* Buttonsleiste rechts im B-Fenster für Tablecontrol*/
#buttonwindow-B-tablecontrol {
	z-index: 50;
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 140px;
	padding-right: 23px;
	}

/*Platzhalter bild für userimage (register/edit user) (s:graphicImage  styleClass="userimage_placeholder")*/
#userimage_placeholder {
	background-image: url(pics/yc-logo-userpic-replace1.png);
	background-repeat: no-repeat;
	border-style: none;
	width: 105px;
	height: 78px;
	}

/*	MAIN-CONTAINTERS - ( Colorclasses of contents )
**************************************************************************************
************************************************************************************* */

/* background color classes for all main containers*/
.cont_onwhite,
.cont_onwhite table {
	background-color: transparent;
	background: transparent;
	color: #494848;
	font-size: 1em;
	line-height:1.5em;
	}
.cont_onwhite a,
.cont_onwhite a:link {
	color: #a3c822;
	text-decoration: none;
	}
.cont_onwhite a:hover {
	color: #494848;
	}
	
.cont_ondark,
.cont_ondark table {
	color: #fff;
	font-size: 1em;
	line-height:1.5em;
	}
.cont_ondark a,
.cont_ondark a:link {
	color: #a3c822;
	text-decoration: none;
	}
.cont_ondark a:hover {
	color: #fff;
	}


.cont_ongreen,
.cont_ongreen table {
	color: #fff;
	font-size: 1em;
	line-height:1.5em;
	}
.cont_ongreen a,
.cont_ongreen a:link {
	color: #494848;
	text-decoration: none;
	}
.cont_ongreen a:hover {
	color: #fff;
	}

/*	Die CONTAINTER für den Inhalt
**************************************************************************************
************************************************************************************* */


/*Containter A1-3 ist obere Reihe im Content*/
#containerA2 {
	position: absolute;
	top: 0px;
	left: 28px;
	float: left;
	width: 725px;
	height: 110px;
	z-index: 10;
	color: #fff;
	padding: 5px 0px 0px 0px;
	overflow: visible;
	}
	/* following advertisement has no padding*/
#containerA2advertisement {
	position: absolute;
	top: 0px;
	left: 28px;
	float: left;
	width: 728px;
	height: 120px;
	z-index: 10;
	color: #fff;
	padding: 0px;
	overflow: hidden;
	}

/* error message on top of A3 (includes A3_out) */
#containerA3_message {
	position: relative !important;
	top: -20px;
	left: 529px; /*war 594*/
	text-align: right;
	width: 474px;
	height: 30px;
	z-index: 50;
	}

#containerA3_out {
	position: absolute;
	top: 20px;
	left: 266px; /*war 309*/
	float:left;
	text-align: left;
	width:190px;
	height: 115px;
	z-index: 10;
	overflow: hidden;
	padding-left: 10px;
	padding-top: 5px;
	}

#containerA3_in {
	position: absolute;
	top: 0px;
	left: 794px;/*war 903*/
	text-align: left;
	width:155px;
	height: 115px;
	z-index: 10;
	padding-left: 10px;
	padding-top: 5px;
	overflow: hidden;
	}


/* Container design3 (rounded container on white background
**************************************************************************************
************************************************************************************* */


.rounded { /* rounded boxes used in vie user -> Mozilla Browsers only*/
	-moz-border-radius-bottomleft:6px;
	-moz-border-radius-bottomright:6px;
	-moz-border-radius-topleft:6px;
	-moz-border-radius-topright:6px;
	}

.column_left { /* rules distance for rounded boxes if two in one line*/
	position: relative;
	margin-left:0px;
	height: auto;
	width:729px;
	}
	
.column_right { /* rules distance for rounded boxes if two in one line*/
	position: relative;
	margin-left:10px;
	height: auto;
	width:202px;
	float:right;
	}

/* design 3 rounded containters
******************************************************************************************* */
	
/* color-independent size and behavior */

.R_container_all,
.SPECIAL_container_all{
	height:auto;
	margin-bottom: 10px;
	}
.R_container_cont,
.SPECIAL_container_cont,
.inner_SPECIAL_TRANSP_container_cont{ /* text content distances -> Valid for all containers */
	padding: 8px 20px 10px 20px;
		/*position:relative;
		top: -6px;
		left:0px;
		z-index:0;*/
	}
.SPECIAL_container_cont { /* text content distances -> Valid for all containers */
	position:relative;
	top: -6px;
	left:0px;
	z-index:0;
	}
.S_padding { /* text content distances -> Valid for all sidebar containers on mainpage */
	padding: 0px 7px 7px;
	}

/* Define Background image */
.R_container_top,
.R_container_topright,
.R_container_bottom,
.R_container_bottomright,
.SPECIAL_container_top,
.SPECIAL_container_topright,
.SPECIAL_container_bottom,
.SPECIAL_container_bottomright,
.FilmStripOuter { /* same for all NORMAL containers */
	background: url(symbuttons/design3/design3_roundOpt1.png) no-repeat;
	}

.SPECIAL_container_cont,
.SPECIAL_TRANSP_container_cont,
.loadProgress { /* Transparent Button container used in project */
	background: url(symbuttons/design3/design3_roundOpt2.png) repeat-y;
	}
.cont_ondark .R_container_top,
.cont_ongreen .R_container_top,
.SPECIAL_container_top { /* All colored and Special (no border) the same bg image */
	background-position: -10px 0px;
	width:inherit;
	height:6px;
		/*position:relative;
		z-index:1;*/
	}
.SPECIAL_container_top { /* Only behavior different since content bg has to overlap below white edges  */
		position:relative;
		z-index:1;
	}
.cont_onwhite .R_container_top { /* White extra bg image */
	background-position: -10px -13px;
	width:inherit;
	height:6px;
	}
.cont_ondark .R_container_topright,
.cont_ongreen .R_container_topright,
.SPECIAL_container_topright { /* All colored the same bg image */
	background-position: 0px 0px;
	height:6px;
	width: 6px;
	float:right !important;
	}
.cont_onwhite .R_container_topright { /* White extra bg image */
	background-position: -0px -13px;
	height:6px;
	width: 6px;
	float:right !important;
	}
.cont_ondark .R_container_bottom,
.cont_ongreen .R_container_bottom,
.SPECIAL_container_bottom { /* All colored the same bg image */
	background-position: -10px -5px;
	width:inherit;
	height:6px;
	margin-bottom:20px;
		/*position:relative;
		top: -12px;
		left:0px;
		z-index:1;*/
	}
.SPECIAL_container_bottom { /* Only behavior different since content bg has to overlap below white edges  */
		position:relative;
		top: -12px;
		left:0px;
		z-index:1;
	}
.cont_onwhite .R_container_bottom { /* White extra bg image */
	background-position: -10px -19px;
	width:inherit;
	height:6px;
	margin-bottom:20px;
		/*position:relative;
		top: -12px;
		left:0px;
		z-index:1;*/
	}
.cont_ondark .R_container_bottomright,
.cont_ongreen .R_container_bottomright,
.SPECIAL_container_bottomright{ /* All colored the same bg image */
	background-position: 0px -5px;
	height:6px;
	width: 6px;
	float:right !important;
	}
.cont_onwhite .R_container_bottomright { /* White extra bg image */
	background-position: 0px -19px;
	height:6px;
	width: 6px;
	float:right !important;
	}
.cont_ondark .R_container_top,
.cont_ondark .R_container_bottom { /* colored bg but no borders -> Must come behind bg image ! */
	background-color: #262626;
	}
.cont_ongreen .R_container_top,
.cont_ongreen .R_container_bottom { /* colored bg but no borders  -> Must come behind bg image !  */
	background-color: #a3c822;
	}
.cont_onwhite .R_container_top,
.cont_onwhite .R_container_bottom { /* colored bg but no borders  -> Must come behind bg image !  */
	background-color: #fff;
	}
.cont_ondark .R_container_cont { /* colored bg but no borders -> Must come behind bg image ! */
	background-color: #262626;
	}
.cont_ongreen .R_container_cont { /* colored bg but no borders  -> Must come behind bg image !  */
	background-color: #a3c822;
	}
.cont_onwhite .R_container_cont { /* White no bg but borders  -> Must come behind bg image ! */
	border-left: 1px solid #d0d0d0;
	border-right: 1px solid #d0d0d0;
	}
.SPECIAL_container_cont { /* White no bg but borders  -> Must come behind bg image ! */
	background-position: -20px 0px ;
	/*background-color: #262626;*/
	}
.SPECIAL_TRANSP_container_cont { /* White no bg but borders  -> Must come behind bg image ! */
	background-position: -2082px 0px ;
	/* background-color: #262626;*/
	position:relative;
	top:-5px;
	height:inherit;
	width: 100%;
	z-index: 1;	
	/* opacity: .7; 	  													 /* For non IE Browsers */
	/* -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; 	 /* first! IE8*/
	/* filter: alpha(opacity=90);			 								 /* second! IE 5-7*/
	}
.loadProgress { /* custom Player load data bar */
	background-position: -20px 0px ; /* was -2082 */
	}
/*	FOOTER design3
**************************************************************************************
************************************************************************************* */

.footer {
	position: relative;
	top: 87px;
	left: 5px;
	width: 1040px;
	height: 400px;
	z-index: 20;
     }

.footer_txt  {
	position: absolute;
	}

.footer_txt,
.footer_txt a,
.footer_txt a:link {
	text-decoration: none;
	}

.footer_txt a:hover {
	text-decoration:none;
	}


/*	Page Specific Styles
**************************************************************************************
************************************************************************************* */
	
/* Top 15 + New Voted ********************************** */

td.PAGE_charts15_RowNo {
	width:20px; 
	margin:-4px 0px 0px 0px;
	color:white;
	font-weight:bold;
	border-bottom: 0px
	}
	
td.PAGE_charts15_Text {
	margin:-4px 0px 0px 0px;
	border-bottom: 0px
	}

td.PAGE_charts15_button {
	width:16px;
	margin:-4px 0px 0px 0px;
	border-bottom: 0px
	}

/* view User ********************************** */

.viewuserS { /* view User and Preview only*/
	width:150px;
	padding:3px 3px 3px 10px;
	margin-bottom:10px;
	}

.viewuserL { /* view User and Preview only*/
	width:450px;
	padding:3px 3px 3px 10px;
	margin-bottom:10px;
	}

.cont_ondark .viewuserS,
.cont_ondark .viewuserL { /* view User and Preview only*/
	border: dashed 1px #494949;
	}

/* Project pages (Overview+) Media-Symbols ***** */
.OvMediaSymb { /* Media symbols left of Headline Project media windows */
	height:16px;
	width:16px;
	margin-right:10px;
	}
/* Project pages (Overview+) Track Amplitude / Content ***** */
.OvAmpCntOuter { /* Container holds images and comments */
	z-index:0;
	position:relative;
	width:400px;
	height:40px;
	overflow:visible;
	padding-right:0px;
	}
.OvAmpCntInner { /* Container holds images -> dynamic */
	position:absolute;
	width: 100%;
	height:100%;
	}
/* Project pages (Overview+) Track Amplitude / Content ***** */
.SgleTrckAmpCntOuter { /* Container holds images and comments */
	z-index:0;
	position:relative;
	width:648px;
	height:100px;
	background-color: #000;
	overflow:hidden;
	padding-right:0px;
	}
.SgleTrckAmpCntInner { /* Container holds images -> dynamic */
	position:absolute;
	width:470px;
	height:100px;
	margin-left:78px;
	margin-bottom:0px; 
	}
.A_tProgLev1 { /* Moving time marker dynamic */
	position: absolute;
	z-index:5;
	height:100%;
	width:0px;
	background:transparent;
	border-right: dashed 1px red;
	}
.A_tProgLev2 { /* Image container dynamic */
	position: absolute;
	z-index:4;
	height:100%;
	}
.A_tProgLev2Img { /* Image dynamic */
	border:0px;
	vertical-align: middle;
	}
.A_tProgLev2ImgRemain { /* Remaining Part of Image dynamic */
	height:100%;
	/* dynamic width to be set in document */
	vertical-align: middle;
	}
.cont_onwhite .A_tProgLev2ImgRemain {
	background: #fff;
	}
.cont_ondark .A_tProgLev2ImgRemain {
	background: #262626;
	}
.cont_ongreen .A_tProgLev2ImgRemain {
	background: #a3c822;
	}
.A_tProgLev3 { /* Time Progress dynamic */
	position: absolute;
	z-index:2;
	height:100%;
	width:0px;
	}
.cont_onwhite .A_tProgLev3,
.cont_ondark .A_tProgLev3 { /* Time Progress dynamic color */
	background:orange;
	}
.cont_ongreen  .A_tProgLev3 { /* Time Progress color */
	background:red;
	}
.A_tProgLev4 { /* Loading dynamic */
	position: absolute;
	z-index: 1;
	width:0px;
	height: 100%;
	}
.A_tProgLev5 { /* BG color */
	position: absolute;
	z-index:0;
	height:100%;
	}
.cont_onwhite .A_tProgLev5 { /* BG color */
	background-color:#a3c822;
	}
.cont_ongreen .A_tProgLev5,
.cont_ondark .A_tProgLev5 { /* BG color */
	background-color:#fff;
	}
.shortCommArt { /* Overlaying Artist shortcomment */
	z-index:10;
	position:absolute;
	left:5px;
	top:-2px;
	color:#c0c0c0;
	}
.shortCommArtVC { /* Overlaying Artist shortcomment for video track*/
	z-index:10;
	position:absolute;
	left:5px;
	top:5px;
	color:#c0c0c0;
	}
.shortCommArt :hover { /* Audio dynamic Level 1*/
	color:#262626;
	background: #fff;
	}
.FilmStripOuter { /* Video Track FilmStrip Top and Bottom analogue Amplitude */
	height: 7px;
	width:100%;
	background-position: 0px -62px; 
	}
.FilmStripInner { /* Video Track FilmStrip Content analogue Amplitude */
	height: 26px;
	width:100%;
	}

/* Project pages (Overview+) Comments ********** */
.ProjCommSlid { /* General Outer Container */
	position: absolute;
	top: 93px;
	left: 50px;
	height: 26px;
	width: 460px;
	overflow: visible;
	z-index:300;
	}
.ProjCommSlidContainer { /* Container with Listcontent (Flags) */
	width: 100%;
	}
.ProjCommSlidContainer ul li { /* Container with Listcontent (Flags) */
	list-style-type:none;
	margin-top: 0px;
	padding-top: 0px;
	height:0px; /* prevent from creating height distance to previous flagg */
	}
.ProjCommSlidlist { /* Rich Data List itself */
	}
.ProjCommSlidPosition { /* outer container holds position */
	position:relative; 
	/* top:-#{rowNo * 20}px; */ /* to be set in document */
	/* left:#{rowNo * 8}%;  */	/* to be set in document */
	/* z-index: #{rowNo}; */	/* to be set in document */
	width: 20px; 
	height: 20px; 
	/*overflow : hidden; */
	background-color: transparent;
	}
.ProjCommSlidContent { /* inner container cuts image to quadratic format */ 
	position:relative; 
	top: 0px; 
	left: 0px;
	/* z-index: #{rowNo+1}; */	/* if needed to be set in document */
	width: 20px; 
	height: 20px; 
	overflow : hidden;
	background-color: transparent;
	}
.ProjCommSlidMarker { /* Marker line */
	position:relative;
	left: 0px;
	top: -20px;
	width:1px;
	height:26px;
	border-left: solid 1px grey;
	}
	
.TrckCommSlid { /* General Outer Container */
	position: absolute;
	top: 93px;
	left: 50px;
	height: 26px;
	width: 400px;
	overflow: visible;
	z-index:300;
	}
.TrckCommSlidContainer { /* Container with Listcontent (Flags) */
	z-index:11;
	position:absolute; 
	top:25px; 
	left: 0px; 
	/* width */ 				/* to be set in document */
	height: 20px;
	}
.TrckCommSlidContainer ul li,
.TrckCommSlidContainerSpecial ul li { /* Container with Listcontent (Flags) */
	list-style-type:none;
	margin-top: 0px;
	margin-left:-17px;
	padding-top: 0px;
	height:0px; /* prevent from creating height distance to previous flagg */
	}
.TrckCommSlidlist { /* Rich Data List itself */
	}
.TrckCommSlidPosition { /* outer container holds position */
	position:relative; 
	/* top:-#{rowNo * 15}px; */ /* to be set in document */
	/* left:#{rowNo * 6}%;  */	/* to be set in document */
	/* z-index: #{rowNo +10}; */	/* to be set in document */
	width: 15px; 
	height: 15px; 
	/*overflow : hidden; */
	background: transparent;
	}
.TrckCommSlidContent { /* inner container cuts image to quadratic format */ 
	position:relative; 
	top: 0px; 
	left: 0px;
	/* z-index: #{rowNo+1}; */	/* if needed to be set in document */
	width: 15px; 
	height: 15px; 
	/* overflow : hidden; */
	background: transparent;
	}
.HSCommSlidWin { /* HS CommSlid Content */
	padding: 0px 20px 10px 20px;
	}
.TrckCommSlidMarker { /* Marker line */
	position:relative;
	left: 0px;
	top: -20px;
	width:1px;
	height:20px;
	border-left: dotted 1px red;
	}

/* Comment HS Window -> */
.CommSlidCntTdImg { 
	width:60px;
	}
.CommSlidCntTdUsr { 
	padding-left:20px;
	padding-top:6px;
	}
.CommSlidCntTdUsrSay { 
	width:60%;
	padding-left:5px
	}
.CommSlidCntTdDate { 
	text-align:right;
	}
.CommSlidCntTdTitle {
	text-align:left;
	padding-left:20px;
	}
	
/* Project pages (Overview+) Tables *************** */
/* Audio / Favorite / Video / Captions */
/* Headline -> */
.OvColRowCount_Head { /* Row Count */
	width:8px
	}
.OvColCcId_Head { /* cc-ID */
	width: 56px;
	text-align: right;
	padding-right: 5px
	}
.OvColInstrArtist_Head { /* Instrument / Artist */
	width: 115px;
	padding-left: 5px;
	border-bottom: none;
	}
.OvColBasOn_Head { /* Based On */
	width: 25px;
	}
.OvColMimik_Head { /* Mimik (prepared for later use) */
	width: 20px;
	}
.OvColAmplit_Head { /* Amplitude / Annotation */
	width: 400px;
	}
.OvColDuration_Head { /* Duration */
	width: 30px;
	padding-left:5px;
	padding-right:5px;
	}
.OvColStarted_Head { /* Started */
	width: 50px
	}
.OvColModif_Head { /* Modified */
	width: 50px;
	margin-left:10px;
	}
.OvColOption_Head { /* Options */
	padding-left:10px;
	text-align:left;
	}

/* 1st row -> */
.OvColRowCount { /* Row Count */
	text-align: right;
	padding-right: 5px;
	}
.OvColSelBox { /* Select Box */
	padding-left: 5px;
	}
.OvColBlankStatus { /* Blank Status Field */
	}
.OvColCcId { /* cc-ID */
	text-align: right;
	padding-right: 5px
	}
.OvColInstrArtist { /* Instrument / Artist */
	padding-left:5px;
	}
.OvColBasOn { /* Based On */
	}
.OvColMimik { /* Mimik (prepared for later use) */
	}
.OvColAmplit { /* Amplitude / Annotation */
	padding:0px
	}
.OvColDuration { /* Duration */
	padding-left:5px;
	padding-right:5px;
	}
.OvColStarted { /* Started */
	}
.OvColModif { /* Modified */
	}
.OvColOption { /* Options */
	padding-left:10px;
	}
/* 2nd row -> */
.OvUsrImg_2ndRow { /* User Image */
	width: 20px;
	padding-left:5px;
	border-top: none;
	}
.OvUsrName_2ndRow { /* User Name */
	border-top-style: none;
	border-top: none;
	}

/* Project pages (Overview+) Option Buttons **** */
.OvOptButt_1stRow { /* Option Buttons top */
	width:25px;
	}
.OvOptButt_2ndRow { /* Option Buttons bottom */
	width:25px;
	margin-top:7px;
	}
.OvCommentButt { /* Comments Buttons top */
	width:20px;
	}
.OvCommentCount { /* CommentsCounter top */
	width:25px;
	}