html, body {
	height: 100%;
	}

/* body hintergründe */

.body_dj {
	background-image: url("../bilder/bubbles.png");
	background-size: 250px;
	background-repeat: repeat;
	}

.body_drummer {
	background-image: url("../bilder/bubbles_drummer.png");
	background-size: 250px;
	background-repeat: repeat;
	}

.body_scientist {
	background-image: url("../bilder/bubbles_scientist.png");
	background-size: 250px;
	background-repeat: repeat;
	}

.body_about {
	background-image: url("../bilder/bubbles_about.png");
	background-size: 250px;
	background-repeat: repeat;
	}


/* maximale breite und zentrieren */

#page-wrap {
	position: relative;
	max-width: 1000px;
	min-height: 95%;
	margin: auto;
	padding-bottom: 1em;
	}

/* startseite */

#start-wrap {
	width: 100%;
	height: 100%;
	max-width: 500px;
	max-height: 500px;
	padding-top: 1em;
	margin: auto;
	}

#start1 {
	width: 50%;
	padding-top: 21%;
	padding-bottom: 21%;
	float: left;
	vertical-align: top;
	text-align: center;
	}
	
#start2 {
	width: 50%;
	padding-top: 21%;
	padding-bottom: 21%;
	padding-top: -1em;
	padding-bottom: -1em;
	display: inline-block;
	float: none;
	vertical-align: top;
	text-align: center;
	}
	
#start3 {
	width: 50%;
	padding-top: 21%;
	padding-bottom: 21%;
	display: inline-block;
    float: left;
	text-align: center;
	}

#start4 {
	width: 50%;
	padding-top: 21%;
	padding-bottom: 21%;
	display: inline-block;
	float: none;
	text-align: center;
	}

/* die einzelnen teile der seite und ihre komponenten */

#top {
	width: 100%;
	max-width: 1000px;
	top: 0;
	position: fixed;
	z-index: 999;
	}

#navbar {
	width: 100%;
	max-width: 1000px;
    vertical-align: top;
	margin: auto;
	}

#navpart1 {
	width: 33.33%;
	float: left;
	height: 2em;
	line-height: 2em;
	text-align: center;
	}
	
#navpart2 {
	width: 33.33%;
	float: left;
	display: inline-block;
	height: 2em;
	line-height: 2em;
	text-align: center;
	}
	
#navpart3 {
	width: 33.33%;
	float: none;
	display: inline-block;
	height: 2em;
	line-height: 2em;
	text-align: center;
	}

#header {
	width: 100%;
	height: 3.5em;
	line-height: 3.5em;
	text-align: center;
	}

#language {
	width: 100%;
	height: 1em;
    vertical-align: top;
	}

#language1 {
	width: 2em;
	float: right;
	line-height: 1em;
	text-align: center;
	}
	
#language2 {
	width: 2em;
	float: right;
	display: inline-block;
	height: 1em;
	line-height: 1em;
	text-align: center;
	}

#content {
	min-height: 100%;
	padding-top: 1em;
	padding-bottom: 2em;
	}

#content_2col_1 {
	margin-right: 3%;
	}
	
#content_2col_2 {
	}
	
#content_3col_1 {
	margin-right: 3%;
	}
	
#content_3col_2 {
	margin-right: 3%;
	}
	
#content_3col_3 {
	}


#dj_img {
	width: 24%;
	float: left;
	text-align: center;
	}
	
#dj_col2 {
	width: 75%;
	float: right;
	}

#footer {
	width: 100%;
	height: 3em;
	position: absolute;
	bottom: 0;
	text-align: center;
	font-size: 0.9em;
	color: #ffffff;
	}


/* classes für farbe */

.bg_dj {
	background-color: #FF66AA;
	}

.bg_dj_light {
	background-color: #FFDDEE;
	}

.bg_scientist {
	background-color: #00EEAA;
	}

.bg_drummer {
	background-color: #33BBFF;
	}

.bg_about {
	background-color: #CCCCCC;
	}

	
/*  inhalt  */

/*  sicherstellen, dass teile untereinander stehen  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  1 spalte  */

.columns_1 {
	width: 99%;
}

/*  2 spalten  */

.columns_2 {
	width: 48.5%; /* 1x margin-right: 3% */
}


/*  3 spalten  */

.columns_3 {
	width: 31.33%; /* 2x margin-right: 3% */
}


/*  column setup  */
.col {
	display: block;
	float:left;
	margin: 0 0 0 0;
}

/* .col:first-child { margin-left: 0; } */


/*  grouping  */
.group:before,
.group:after {
	content:"";
	display:table;
	clear:both;
}

.group {
    zoom:1; /* For IE 6/7 */
}

/*  hr  */

hr.dj {
    height: 0;
	border: 0;
    border-top: 2px solid #FF66AA;
}

hr.dj2 {
    width: 25%;
	margin-left: 0;
	height: 0;
	border: 0;
    border-top: 1px solid #FF66AA;
}


/*  schriften  */

body {
	font-family: Arial, sans-serif;
	font-size: 1em;
	color: #777777;
	}

h1 {
	font-size: 2em;
	color: #ffffff;
	}

h2 {
	font-size: 1.3em;
	line-height: 1em;
	}

h2.dj {
	color: #FF66AA;
	}

h2.scientist {
	color: #00EEAA;
	}

h2.drummer {
	color: #33BBFF;
	}

h2.about {
	color: #CCCCCC;
	}


a:link {
	color: #555555;
	}
a:visited {
	color: #555555;
	}
a:hover {
	color: #999999;
	}
a:active {
	color: #CCCCCC;
	}

a.header {
	font-size: 2em;
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
	}
a.header:link {
	color: #ffffff;
	}
a.header:visited {
	color: #ffffff;
	}
a.header:hover {
	color: #999999;
	}
a.header:active {
	color: #333333;
	}

a.start {
	font-size: 2em;
	color: #ffffff;
	text-decoration: none;
	}
a.start:link {
	color: #ffffff;
	}
a.start:visited {
	color: #ffffff;
	}
a.start:hover {
	color: #999999;
	}
a.start:active {
	color: #333333;
	}

a.nav {
	font-size: 1.5em;
	color: #ffffff;
	padding: 8px;
	text-decoration: none;
	}
a.nav:link {
	color: #ffffff;
	}
a.nav:visited {
	color: #ffffff;
	}
a.nav:hover {
	color: #999999;
	}
a.nav:active {
	color: #333333;
	}

a.lan {
	text-decoration: none;
	color: #BBBBBB;
	}
a.lan_dj {
	text-decoration: none;
	color: #FF66AA;
	}
a.lan_scientist {
	text-decoration: none;
	color: #00FFAA;
	}
a.lan_drummer {
	text-decoration: none;
	color: #33BBFF;
	}
a.lan_about {
	text-decoration: none;
	color: #BBBBBB;
	}

p.dj {
	color: #FF66AA;
	}

p.scientist {
	color: #00FFAA;
	}

p.drummer {
	color: #33BBFF;
	}

p.about {
	color: #CCCCCC;
	}

/* classes für farbe */

.font_dj {
	color: #FF66AA;
	}

.font_scientist {
	color: #00FFAA;
	}

.font_drummer {
	color: #33BBFF;
	}

.font_about {
	color: #BBBBBB;
	}



/*  agenda_past  */

.agenda_past_row {
	width: 100%;
        padding-top: 0.2em;
        padding-bottom: 0.2em;
        border-bottom: 1px solid #33BBFF;
		/* background-color: #CCEEFF; */
	}

.agenda_past_colgroup {
	display: inline;
	float: left;
	}

.agenda_past_column {
	display: block;
	float: left;
	margin-right: 1em;
        font-size: 0.9em;
	}
	
.agenda_past_colgroup_1 {
	width: ;
	}

.agenda_past_colgroup_2 {
	width: ;
	}


/*  agenda dj */

.agendadj_row {
	width: 100%;
        padding-top: 0.2em;
        padding-bottom: 0.2em;
        border-bottom: 1px solid #FF66AA;
		/* background-color: #FFDDEE; */
	}

.agendadj_colgroup {
	display: inline;
	float: left;
	}

.agendadj_column {
	display: block;
	float: left;
	margin-right: 1em;
    font-size: 0.9em;
	}
	
.agendadj_colgroup_1 {
	width: 9.5em;
	}

.agendadj_colgroup_2 {
	width: 8em;
	}

.agendadj_colgroup_3 {
	width: 17em;
	}

.agendadj_colgroup_4 {
	width: 25em;
	overflow-wrap: normal;
	}


/* verschiedenes */

.button {
	background-color: #ddccaa;
	border: 1px solid #201510;
	border-radius: 3px;
	padding: 0 3px 0 3px;
	}

.responsive-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

.responsive-video {
	position: relative;
	padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
	padding-top: 0px;
	height: 0;
	overflow: hidden;
	}


/*  aenderungen bei weniger als 480 pixel breite */

@media only screen and (max-width: 480px) {
	.col { margin: 0 0 0 0;}
	.columns_2, .columns_3, .agenda_colgroup { width: 100%; }
}