/* -------------------------------------------------- */
/*    GLOBAL STUFF                                    */
/* -------------------------------------------------- */

* {
	margin: 0px;
	padding: 0px;
	border: 0px none;
}

body {
	font-family: ColaborateRegular, Arial;
	text-align: left;
	font-size: 62.5%;  /* 1em = 10px , 1.4em = 14px */
	color: #333;
}


a {
	text-decoration: none;
	color: #3AE;
}

a:hover {
	color: #07B;
}

article,
nav,
aside {
	display: block;
}



/* -------------------------------------------------- */
/*    POSITIONING                                     */
/* -------------------------------------------------- */

#all {
	text-align:center;
}

#page {
	position: relative;
	text-align:left;
	margin-left:auto;
	margin-right:auto;
	width:970px;
	min-height: 650px;
	padding-bottom: 10em;
}

/*
#all {
	background: url('../img/layout.jpg') center top no-repeat;
}

#page {
	background-color: rgba(255,255,255,0.5);
}
*/








/*  #####  HEAD ELEMENTS  #####  */


#logo {
	position: relative;
	left: 640px;
	top: 57px;
	width: 260px;
}
#logo h5 {
	margin-left: 93px;
}

#logo a, #logo h1, #logo h5{
	color: #000;
}


#mainnav {

}


#google_translate_element {
	position: absolute;
	left: 640px;
	top: 165px;
	text-align: right;
	width: 300px;
}
.goog-te-gadget > * {
	opacity: 0.3;
	color: #999;

}
.goog-te-gadget > div {
	opacity: 1;
}

#google_translate_element .goog-te-gadget {
	font-family: inherit;
}
#google_translate_element select {
	display: inline-block;
    font-size: 12px;
	font-family: inherit;
	font-weight: normal;
	padding: 4px 6px;
	background-color: #fff;
	color: #000;
	border: 1px solid #000;
	cursor: pointer;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	opacity: 1;
	transition: color 0.3s, background-color 0.3s;
	box-sizing: border-box;
	position: relative;
	outline: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="50" width="50"><polygon points="25,44 10,10 40,10" fill="black" stroke="white" stroke-width="3" /></svg>');
	background-size: 16px 16px;
	background-position: right center;
	background-repeat: no-repeat;
}



#google_translate_element select:hover,
#google_translate_element select:focus {
	background-color: #000;
	color: #fff;
	outline: none;
}
#google_translate_element select::-ms-expand {
    display: none;
}

/*  #####  PAGE ELEMENTS  #####  */


#subnav {

}



#cont, #margin {
	position: absolute;
	left: 430px;
	top: 220px;
	width: 500px;
	padding-bottom: 10em;
}

#margin { 
	width: 110px;
	display: none;
}


body.rpid12 #cont {
	left: 550px;
	width: 390px;
}

body.rpid12 #margin { 
	display: block;
}





/* -------------------------------------------------- */
/*    NAVIGATION                                      */
/* -------------------------------------------------- */

ul.nav, #records {
	list-style:none;
}
ul.nav li{
	

}
.nav a {
	font-size: 1.2em;
	text-decoration: none;
	color: #FFF;
	background: #000;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	border-radius: 50%;

	-webkit-transition: background 0.2s linear;
	-moz-transition: background 0.2s linear;
	-o-transition: background 0.2s linear;
	transition: background 0.2s linear;
}
.nav li.act li.act a {
	color: #FFF;
}

.nav li.act li a {
	letter-spacing: 0;
}

li.act {
	z-index: 5;
}
.nav a:hover {
	text-decoration: none;
}





/* ---- Mainnav -----*/

#mainnav li li a {
	font-size: 1.1em;
	text-transform: none;
}

#mainnav {
	position: absolute;
	top: 200px;
	left: 300px;
}

.nav li {
	position: absolute;
	display: table;
	width: 110px;
	height: 110px;
}
.nav .act li {
	width: 68px;
	height: 68px;
}


body#pid10.done #mainnav li{
	-webkit-transition: all 0.6s ease-out;
	-moz-transition: all 0.6s ease-out;
	-o-transition: all 0.6s ease-out;
	transition: all 0.6s ease-out;
}
body.done #all #mainnav li li{
	-webkit-transition: all 0.6s ease-out;
	-moz-transition: all 0.6s ease-out;
	-o-transition: all 0.6s ease-out;
	transition: all 0.6s ease-out;
}
body.loading #all #mainnav li {
	width: 10px;
	height: 10px;
	top:0px;
	left:0px;
	opacity: 0;
	font-size: 0.1em !important;
}
body.loading #all #mainnav li li {
	top:50px;
	left:50px;
}

/* POSITION HAUPTNAVIGATION */


li.pid11 {
	left: -209px;
	top: 145px;
}

li.pid12 {
	left: -40px;
	top: -140px;
}
li.pid13 {
	top: -60px;
	left: -310px;
	height: 88px;
	width: 88px;
}
li.pid14 {
	top: 85px;
	left: -89px;
	height: 71px;
	width: 71px;
}
li.pid15 {
	top: 6px;
	left: -128px;
	height: 71px;
	width: 71px;
}
li.pid16 {
	top: -180px;
	left: -132px;
	height: 71px;
	width: 71px;
}
li.pid17 {
	top: -135px;
	left: 612px;
	height: 71px;
	width: 71px;
}
li.pid18 {
	top: -211px;
	left: 489px;
	height: 71px;
	width: 71px;
}


/* POSITION SUBNAVIGATION BANDS & PROJECTS */

li.pid22 {
	top: 39px;
	left: -56px;
}
li.pid23 {
	top: 94px;
	left: -20px;
}
li.pid24 {
	top: 77px;
	left: 76px;
}
li.pid25 {
	top: 151px;
	left: 119px;
}
li.pid26 {
	top: 134px;
	left: 63px;
}
li.pid27 {
	top: -49px;
	left: -21px;
}


/* POSITION SUBNAVIGATION PERCASO & ANDERE LABEL */

li.pid33 {
	top: 38px;
	left: 96px;
}
li.pid34 {
	top: -15px;
	left: 125px;
}
li.pid35 {
	top: 73px;
	left: -29px;
	width: 44px !important;
	height: 44px !important;
}

/* POSITION SUBNAVIGATION ..misc... */
li.pid36 {
	top: 68px;
	left: 55px;
}
li.pid37 {
	top: 29px;
	left: 50px;
}

/* -------------------------------------------------- */
/*    COLORS   		                                  */
/* -------------------------------------------------- */

/*gelb bands and proj*/
.rpid11 h1,
.rpid11 #cont a,
li.pid11.act > a {
	color: #f5a800;
}
li.pid11 li.act a,
#mainnav li.pid11 a:hover,
li.pid11.cur a.cur {
	background: #f5a800;
	color: #FFF;
}
li.pid11.act > a {
	border: 1px solid  #f5a800;
	background: #FFF;
	color: #f5a800;
}

/*orange*/
.rpid12 h1,
.rpid12 #cont a,
li.pid12.act > a,
#records a:hover {
	color: #E65014;
}
li.pid12 li.act a,
#mainnav li.pid12 a:hover,
li.pid12.cur a.cur {
	background: #E65014;
	color: #FFF;
}
li.pid12.act > a {
	border: 1px solid  #E65014;
	background: #FFF;
	color: #E65014;
}

/*blau*/
.rpid13 h1,
.rpid13 #cont a,
li.pid13.act > a {
	color: #015fa9;
}
li.pid13 li.act a,
#mainnav li.pid13 a:hover,
li.pid13.cur a.cur {
	background: #015fa9;
	color: #FFF;
}
li.pid13.act > a {
	border: 1px solid  #015fa9;
	background: #FFF;
	color: #015fa9;
}

/*gelbgrün live*/
.rpid14 h1,
.rpid14 #cont a,
li.pid14.act > a {
	color: #B9B400;
}
li.pid14 li.act a,
#mainnav li.pid14 a:hover,
li.pid14.cur a.cur {
	background: #B9B400;
	color: #FFF;
}
li.pid14.act > a {
	border: 1px solid  #B9B400;
	background: #FFF;
	color: #B9B400;
}

/*violet soziale musik*/
.rpid15 h1,
.rpid15 #cont a,
li.pid15.act > a {
	color: #82375A;
}
li.pid15 li.act a,
#mainnav li.pid15 a:hover,
li.pid15.cur a.cur {
	background: #82375A;
	color: #FFF;
}
li.pid15.act > a {
	border: 1px solid  #82375A;
	background: #FFF;
	color: #82375A;
}

/*grün gallery*/
.rpid16 h1,
.rpid16 #cont a,
li.pid16.act > a,
.button:hover {
	color: #007D81;
}
li.pid16 li.act a,
#mainnav li.pid16 a:hover,
li.pid16.cur a.cur {
	background: #007D81;
	color: #FFF;
}
li.pid16.act > a {
	border: 1px solid  #007D81;
	background: #FFF;
	color: #007D81;
}

/*braun*/
.rpid17 h1,
.rpid17 #cont a,
li.pid17.act > a {
	color: #913723;
}
li.pid17 li.act a,
#mainnav li.pid17 a:hover,
li.pid17.cur a.cur {
	background: #913723;
	color: #FFF;
}
li.pid17.act > a {
	border: 1px solid  #913723;
	background: #FFF;
	color: #913723;
}

/*beige*/
.rpid18 h1,
.rpid18 #cont a,
li.pid18.act > a {
	color: #a9966e;
}
li.pid18 li.act a,
#mainnav li.pid18 a:hover,
li.pid18.cur a.cur {
	background: #a9966e;
	color: #FFF;
}
li.pid18.act > a {
	border: 1px solid  #a9966e;
	background: #FFF;
	color: #a9966e;
}



.pid35 a{
	background: #999;
}


#records {
}
#records li {
	position: relative;
	height: 31px;
	border-bottom: 1px solid #333;
	line-height: 13px;
	padding-top: 0.8em;
}

#records li.title {
	border-bottom: 0px none;
	padding-top: 3em;
	height: auto;
}
#records img {
	display: block;
	position: absolute;
	left: -42px;
}
#records a {
	font-size: 1.2em;
	color: #000;
	display: block;
}




/* -------------------------------------------------- */
/*    CONTENT DESIGN                                  */
/* -------------------------------------------------- */

h1 {
	font-size: 1.4em;
	padding-bottom: 0.5em;
}
h5 {
	font-size: 1em;
}

.csc-default p,
.csc-frame p,
.csc-textpic-caption {
	font-size: 1.2em;
	line-height: 1.8em;
	padding-bottom: 1em;
}

.csc-default a, #records span {
	font-size: 91.6%; /* 0.916em = 11px bei 1.2em basis */
}

h1, h2, h3, h4, h5, b, strong, .nav a {
	font-family: ColaborateBoldRegular;
	font-weight: normal;
}
.csc-header-n1 h1, .csc-frame h1, #logo h1, .csc-default a, .nav a , #records span {
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* old version conflicts mit images as li */
/* #cont li, #rightcol li */

.csc-textpic-text ul, .text-cont ul {
	padding-left: 2em;
	padding-bottom: 1.2em;
}

.csc-textpic-text ul li, .text-cont ul li{
	font-size: 1.2em;
	line-height: 1.8em;
}

.csc-textpic-text ol, .text-cont ol {
	padding-bottom: 1.2em;
}

.csc-textpic-text ol li, .text-cont ol li{
	font-size: 1.2em;
	line-height: 1.8em;
	list-style-position:  inside;
}


iframe {
	max-width: 100%;
}


#cont a, #rightcol a {

}

#cont ol {
	margin: 0;
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
}


span.spamprotection {
    display: none;
    visibility: hidden;
}


.csc-textpic-imagewrap {
	overflow: hidden;
}

div.image-cont div.csc-textpic-imagewrap .csc-textpic-image {
    margin-bottom: 0;
    margin-right: 0;
}
div.csc-textpic div.csc-textpic-imagecolumn {
	float: left;
}

div.csc-textpic-imagecolumn {
	margin-right: 20px;
	margin-bottom: 20px;
}


.textpic-cont .csc-textpic-above {
	width: 500px;
	overflow: hidden;
}
.textpic-cont .csc-textpic-imagewrap {
	width: 1600px;
}




/* ---- AKKORDEON ---- */

.csc-frame-invisible h1 {
	color: #000;
	cursor: pointer;
	font-size: 1.2em;
	font-family: inherit;
}
.csc-frame-invisible h1:before {
	content: '▸';
	padding-right: 3px;
	top: -1px;
	position: relative;
}
.csc-frame-invisible.open h1:before {
	content: '▾';
	top: 0px;
}




/* ---- OVERLAY ---- */

#veil {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 100;
	display: none;
	background: rgba(255,255,255,0.8);
}
#overlay {
	z-index: 110;
	position: fixed;
	width: 860px;
	height: 560px;
	left: 50%;
	top: 50%;
	margin-left: -430px;
	margin-top: -280px;
	text-align: center;
	display: none;
}

#container  {
	width: 860px;
	text-align: left;
	position: relative;
}
#imagebox {
	width: 800px;
	position: absolute;
	left: 0;
	top: 0;
}
#imagebox h2,
#imagebox p {
	font-size: 12px;
}
#img {
	/* text-align: center;*/
	height: 520px;
	margin-bottom: 10px;
}
#interface {
	position: absolute;
	right: 0;
	top: -8px;
	height: 563px;
	width: 60px;
}
.button {
	cursor: pointer;
	width: 30px;
	height: 30px;
	position: absolute;
	text-align: center;
	line-height: 30px;
	font-size: 1.4em;
}
.button:hover {
	/* in color definition block */
}
#close {
	top:0;
	right: 0;
}
#prev {
	bottom: 0;
	left: 0;
}
#next {
	bottom: 0;
	right: 0;
}


/* ---- Formular -----*/
/* ---- Fe-Login -----*/




.csc-mailform-field{
    margin-top: 5px;
    padding-bottom: 5px;
}

.csc-mailform-field label {
	width: 250px;
	display: block;
	vertical-align: top;
	padding-top: 2px;
	padding-bottom: 4px;
	font-size: 1.4em;
}


.csc-mailform-field input, .csc-mailform-field select {
    font-size: 1.4em;
    border: 1px dotted grey;
}

.csc-mailform-field select {
    width: 50px;
}



/* ---- Downlaod List -----*/

.csc-uploads-fileName a{
    padding-left: 2em;
    background: url('../img/dl_icon.png') no-repeat left top transparent;
    font-size: 1.2em;	
}