/* COLOURS
				RECORDING STUDIO	PRODUCTIONS		MASTERING	ONLINE MASTERING/MIXING
				(orange)			(blue)			(green)		(purple)
MAIN COLOUR		#F7931E				#4A85C9			#299973		#7F4F99				- menu bar, 
LIGHTER VERSION	#faca86								#a2fcdd							- links (unvisited)
EVEN LIGHTER	#fee7cc								#d9fef1							- links, hover
DARKER			#a25a06									#024a32						- links, visited
CONTRAST		#									#f2fb5f							- * UNUSED * -

#393839 - background (grey) (war: #353535)
#a6a6a6 - lighter grey - * UNUSED * -

a:hover {color:#E68702;}
a:active {color:#E65802;}

/*temporary*/

.to_do {
	color:#F00;
}

/* TESTING ZWEI SPALTEN */

#piccolumn_130px {
	float:left; width:130px;padding:1em;overflow:hidden; 
}

#piccolumn_304px {
	float:right; width:314px;padding:10px;overflow:hidden; 
}


#maincolumn {
	padding:1em; margin-left:130pxem;
}

.IMG_picsleft { /*unused */
	float:left;
	list-style-type:none;
	padding:0 2em 0 0;
}
.IMG_picsleft li { /*unused */
	padding-bottom:1em;
}

/* ---- page + elements ---- */

body {
	background-color: #393839;
	background-image:url(../_images/background.png);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position: 0px 200px;
	background-position:center;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 0.8em;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 1.3em;
	width:700px;
	height:100%;
	margin-left:auto;
	margin-right:auto;
	padding:0;
}

.body_indexpage {
	background-image:none;
	background-color:#393839;
}

#main {

	margin: 0 auto;
	padding-top:73px; /* height of logo + 5 px; same value needs to be in "menubox" + "header" styles */
	z-index:100;
	margin-bottom:2em;
}

.main_addmenupadding { /* height of the menu has to be added separately to the padding, because we are mixing px + em
						same value needs to be in --- ??? --- */
	padding-top:2.6em;
}

#header {
	position:fixed;
	width:700px;
	top:0px;
	height:73px;
	background-image:url(../_graphics/bg_grey.gif);
	background-colour= #393839;
/*	padding-bottom:2.6em; */
}

#footer {
	position:fixed;
	bottom:0px;
	border-top-style:solid;
	border-top-width:thin;
	border-top-color:#F7931E;
	background-image:url(../_graphics/bg_grey.gif);
	width:700px;
	height:2em;
	padding:5px;
	font-size:0.8em;	
}

#footerleft {
	float:left;
	padding-left:10px;
}

#footerright {
	float:right;
	padding-right:10px;
	color:#F7931E;
}


/* ---- general stuff ---- */
.clearfix:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility:hidden;
}

.clearboth {
clear:both;
margin-bottom:2px;
}

/* --- positioning ---*/

.center{
	display:block; 
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}

.layer_back {position:relative; z-index:1;}
.layer_front {position:relative; z-index:2;}

.marginright_10 {margin-right:10px}

.marginright_20 {margin-right:20px}

/* --- sizes ---*/

.width300 {padding-left:200px;padding-right=200px;}

/* ---- headings, paragraphs - fonts ---- */

H1 {
color: #F7931E;
font-size:1.8em;
/* text-shadow:0.1em 0.1em 0.05em #fee7cc */
}

H2 {
color: #F7931E;
font-size:1.4em;
}

H3 {
color: #F7931E;
font-size:1.2em;
}

H4 {
color: #F7931E;
font-size:1em;
}

H5 {
color: #F7931E;
font-size:1em;
font-style:italic;
}

.f_italics {font-style:italic}
.f_bold {font-weight:bold}
.f_italicsbold {font-style:italic; font-weight:bold}
.f_small {font-size:0.7em;}
.f_verysmall {font-size:0.6em;}

/* ---- links ---- */

a:link {color:#faca86;}
a:visited {color:#faca86;}
a:hover {color:#fee7cc;}
a:active {color:#E65802;}

/* ---- images ---- */

img { 
    border: none; 
}

.IMG_alignright {float:right; margin-left:20px; }

.IMG_alignleft {float:left; margin-right:20px; }

.IMG_round {
	border-radius:10px 10px 10px 10px;
	-webkit-border-radius:10px 10px 10px 10px;
	-moz-border-radius:10px 10px 10px 10px;
}

.IMG_round_colourframe {
	border-top-style:solid;
	border-top-width:30px;
	border-top-color:#F7931E;
	border-radius:10px 10px 10px 10px;
	-webkit-border-radius:10px 10px 10px 10px;
	-moz-border-radius:10px 10px 10px 10px;
	height:111px;
}


#IMG_ImgRowCentered ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align-last: justify;
  text-align: justify;}
#IMG_ImgRowCentered ul::after {
        content: "\A0";
        display: inline-block;
        height: 0;
        width: 100%;}
#IMG_ImgRowCentered li { display: inline-block }

/* ---- LISTS ---- */

.list_bullgreen
{
overflow:auto;
list-style-type: none;
padding: 0px;
margin: 0px;
}

.list_bullgreen li
{
background-image:url(../_graphics/bull_gls_green.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
padding-left: 14px;
}

.list_bullornge {
overflow:auto;
zoom:1 /* stupid IE */
list-style-type: none;
padding: 0px;
margin: 0px;
}

.list_bullornge li
{
background-image:url(../_graphics/bull_gls_ornge.gif);
background-repeat: no-repeat;
background-position: -3px 0px;
padding-left: 14px;
}

.list_bullornge_sublist {
overflow:auto;
zoom:1 /* stupid IE */
list-style-type: none;
padding: 20px;
margin: 0px;
}

.list_bullornge_sublist li
{
background-image:url(../_graphics/bull_gls_ornge.gif);
background-repeat: no-repeat;
background-position: -3px 0px;
padding-left: 34px;
}

.list_bullnote
{
overflow:auto;
list-style-type: none;
padding: 0px;
margin: 0px;
}

.list_bullnote li
{
background-image:url(../_graphics/bullet_note.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
padding-left: 14px;
}


/* ---- MENUS ---- */
/* MENU - 2 levels/with submenus */
#menubox {
position:fixed;
top:73px; /* height of logo */
height: 2.6em;
width:700px;
background-image:url(../_graphics/menubar_bg.gif);
border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
-moz-border-radius:10px 10px 0 0;
}
.stupidie {
display: none;
}
#menu {
/*position:absolute;*/
/*top: 5px;*/
/*left: 0;*/
z-index: 200;
position:relative;
margin-left: auto;
margin-right: auto;
}

#menu .firstlevel {
float: left;
display: block;
overflow: hidden;
height: 1.5em; /*Höhe des Menübalkens*/
font-weight: bold;
text-align: center;
/*background-color: #F7931E; *//*orange*/ 
/*color: #FFFFFF; *//*Menüschrift - weiss* - NO, SHOULD BE SAME AS OTHER LINKS ON SITE*/
margin-top:0.8em;
margin-bottom:0.8em;
}

#menu .firstlevel:hover {
height: auto;
/*background-color: #F7931E; *//*orange*/
/*color: #393839; *//*dark grey, background grey*//*Menüschrift - weiss* - NO, SHOULD BE SAME AS OTHER LINKS ON SITE*/
opacity:80;
}

a.seclevel-1 {
margin-top: 2px;
}
a.seclevel,
a.seclevel-1 {
display: block;
width: 115px; /*war: 7.9em*/
padding: 2px 0;
text-decoration: none;
font-weight: normal;
background-color: #F7931E; /*lighter orange*/
color: #fee7cc;
}
a:visited.seclevel,
a:visited.seclevel-1 {
color:#a25a06; /*lighter grey*/
}
a:hover.seclevel,
a:hover.seclevel-1 {
background-color: #faca86; /*even lighter orange*/
color: #F7931E;
}

span.menutag {
display: block;
cursor: default;
}

/* MENU - 1 level only/no sub-menus */

#menubox_no2ndlevel {
	position:relative;
	height: 4.2em;
	width:700px;
	background-image:url(../_graphics/menubar_bg.gif);
	border-radius:10px 10px 0 0;
	-webkit-border-radius:10px 10px 0 0;
	-moz-border-radius:10px 10px 0 0;#
	display:table;
	text-align:center;
	line-height:2em;

}

#menubox_no2ndlevel a {
	margin:0.8em;
	text-decoration:none;
}

a:visited.menubox_no2ndlevel {
/*color:#a6a6a6;*/ /*lighter grey*/
}
a:hover.menubox_no2ndlevel {
background-color: #faca86; /*even lighter orange/green etc.*/
/*color: #F7931E;*/ /*Menüschrift - weiss* - NO, SHOULD BE SAME AS OTHER LINKS ON SITE*/
}

/* ---- for pages where part of the pics is transparent 
        to position following elements over the pic ---- */


.higher_10 {
	position:relative; top:-10px;
}

.higher_30 {
	position:relative; top:-30px;
}

.higher_40 {
	position:relative; top:-40px;
}

.higher_50 {
	position:relative; top:-50px;
}

.higher_70 {
	position:relative; top:-70px;
}

.lower_100 {
	position:relative; top:100px;
}