@font-face { font-family: 'source_sans_r'; 

src: url('fonts/regular.eot');
src: url('fonts/regular.ttf') format('truetype'),
url('fonts/regular.woff') format('woff')
; }

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

a:link { text-decoration:none; font-weight: normal; color: black; }
a:visited { text-decoration:none; color: black; } 

a:hover {
	font-weight: bold;
	font-style: italic;
	font-family: Tahoma, Geneva, sans-serif;
	color: #F30;
	background-color: #F6F;
	border-style: dotted;
	border-color: #3F6;
}


h1 a:hover { font-weight: normal; }

body { 	
	text-align: center;	
	font-family: 'source_sans_r'; 
	letter-spacing: 0.5px;

;
	
}
 img {
    border:none;
    outline:none;
}


#all_in
{
width: 80%;
position: absolute;
left: 10%;
}


#header
{
height: 100px;
z-index: 100;

width: 80%;
padding-top: 30px;
margin: 0 auto;
position: fixed;
left: 10%;
text-align: right;

}


#headblock
{
position: fixed;
top: 0px;
background-color: white;

height: 120px;
z-index: 80;
width: 100%;
}


h1 {
text-align: left;

font-weight: normal;

font-size: 30px;
}


#randompic
{
position: absolute;
top: 200px;
right: 13%;
width: 60%;
height: 800px;
background-size: contain;
background-image:  url('bilder/random/101.jpg');
background-repeat: no-repeat;
background-position: left top;
}

#pic_headline
{

text-align: left;

}

.sub_head
{
font-size: 12px;
color: grey;
display: block;
}


#pic_subtitle
{
text-align: left;
font-size: 12px;
}

#pic_subtitle_exhibit
{
text-align: left;
font-size: 14px;
margin-top: 10px;
width: 80%;
padding-bottom: 15px;
}


#main_view
{
top: 150px;
position: fixed;
width: 70%;

}

#main_view_exhibit
{
top: 150px;
position: absolute;
width: 70%;

}


#fullview
{

margin-top: 15px;
left: 0%;


background-size: contain;
background-repeat: no-repeat;
}

.video_time
{
color: grey;
padding-left: 10px;
}

#thumbs
{
right: 0%;
width: 35%;
max-width: 350px;
top: 280px;
position: absolute;
text-align: right;

}

#thumbs:hover
{
	cursor: pointer;

}
#thumbs_exhibit
{
right: 10%;
width: 35%;
max-width: 350px;
top: 280px;
position: absolute;
text-align: right;

}

#thumbs_exhibit:hover
{
	cursor: pointer;

}

.displ_yes
{
display: block;
}

.displ_no
{
display: none;

}
/*palermo*/
.still_1
{

top: 0px;
width: 100px;
height: 100px;
/*border: solid red;*/
}

.still_1 img:hover
{
cursor:pointer;
width: 110px;
}

.still_1 img
{
    width: 100px;
    right: 0px;
    position: absolute;
    margin-right: 400px;
}
/*zappa*/
.still_2
{

top: 0px;
width: 100px;
height: 100px;
/*border: solid red;*/
}

.still_2 img:hover
{
cursor:pointer;
width: 110px;
}

.still_2 img
{
    width: 100px;
    right: 0px;
    position: absolute;
    margin-right: 250px;
}
/*palma*/
.still_3
{

top: 0px;
width: 100px;
height: 100px;
/*border: solid red;*/
}

.still_3 img:hover
{
cursor:pointer;
width: 110px;
}

.still_3 img
{
    width: 100px;
    right: 0px;
    position: absolute;
    margin-right: 95px;
}
/*home*/
.still_4
{

top: 0px;
width: 100px;
height: 100px;
/*border: solid red;*/
}

.still_4 img:hover
{
	cursor: pointer;
	width: 110px;
}

.still_4 img
{
    width: 100px;
    right: 0px;
    position: absolute;
    margin-right: 400px;
}
/*cat*/
.still_5
{

top: 0px;
width: 100px;
height: 100px;
/*border: solid red;*/
}

.still_5 img:hover
{
cursor:pointer;
width: 110px;

}

.still_5 img
{
    width: 100px;
    right: 0px;
    position: absolute;
    margin-right: 250px;
}
/*muschel*/
.still_6
{

top: 0px;
width: 100px;
height: 100px;
/*border: solid red;*/
}

.still_6 img:hover
{
cursor:pointer;
width: 110px;

}

.still_6 img
{
    width: 100px;
    right: 0px;
    position: absolute;
    margin-right: 95px;
}
/*Sun*/
.still_7
{

top: 0px;
width: 100px;
height: 100px;
/*border: solid red;*/
}

.still_7 img:hover
{
cursor:pointer;
width: 110px;

}

.still_7 img
{
    width: 100px;
    right: 0px;
    position: absolute;
    margin-right: 400px;
}
/*Flugzeug*/
.still_8
{

top: 0px;
width: 100px;
height: 100px;
/*border: solid red;*/
}

.still_8 img:hover
{
cursor:pointer;
width: 110px;

}

.still_8 img
{
    width: 100px;
    right: 0px;
    position: absolute;
    margin-right: 250px;
}

/*Delfin*/
.still_9
{

top: 0px;
width: 100px;
height: 100px;
/*border: solid red;*/
}

.still_9 img:hover
{
cursor:pointer;
width: 110px;

}

.still_9 img
{
    width: 100px;
    right: 0px;
    position: absolute;
    margin-right: 95px;
}

.screening
{
width: 50%;
margin-top: 200px;
}
/*palermo*/
.vid
{
	
	position:relative;
	/*border: solid blue;*/
}
/*zappa*/
.vid1
{
	
	position:relative;
	/*border: solid blue;*/
	margin-left: 250px;
}
/*palma*/
.vid2
{
	
	position:relative;
	/*border: solid blue;*/
	margin-left: 375px;
}
/*home*/
.vid3
{
	
	position:relative;
	/*border: solid blue;*/
	
}
/*cat*/
.vid4
{
	
	position:relative;
	/*border: solid blue;*/
	margin-left: 250px;
}
/*muschel*/
.vid5
{
	
	position:relative;
	/*border: solid blue;*/
	margin-left: 375px;
	
}
/*Sun*/
.vid6
{
	
	position:relative;
	/*border: solid blue;*/
	
}
/*Flugzeug*/
.vid7
{
	
	position:relative;
	/*border: solid blue;*/
	margin-left: 250px;
	
}
/*Flugzeug*/
.vid8
{
	
	position:relative;
	/*border: solid blue;*/
	margin-left: 375px;
	
}

#vid_headline
{
text-align: left;
padding-bottom: 20px;
}

#vid_footline
{
text-align: left;
padding-top: 20px;
padding-bottom: 15px;
font-size: 12px;
}

.vid_title
{
    position: absolute;
	text-align: left;
  	width: 100%;


}

li
{
list-style-type: none;
font-size: 12px;
}



.vita_year {
    width: 120px;
}



#language
{
text-align: right;
top: 35px;
position: relative;
display: inline;
}

#audio
{
position: absolute;
top: 450px;
right: 0px;
}


#navi
{
	top: 120px;
	list-style: none;
	
}



.ib
{
	
display: inline-block;
padding-left: 20px;
vertical-align: top;
text-align: center;

}


.box ul
{
visibility: hidden;
}

.box:hover ul
{
visibility: visible;
background-color: white;
}



#infon{
text-align: left;
position: absolute;
right: 100%;
width: 100px;


margin-right: -100px;
}

#navi_2  li
{
display: inline;
margin-left: 4%;

}


#text
{
position: absolute;
top: 150px;
left: 60%;
text-align: left;
width: 50%;
/*border:solid yellow;*/
}


#info_text
{
position: absolute;
top: 200px;
left: 10%;
text-align: left;
width: 90%
}

.info_hl
{
font-size: 20px;
font-style: italic;
padding-bottom: 10px;
}

#contact
{
width: 200px;
}

#vita
{
position: absolute;
left: 300px;
top: 0px;
}
#vita2
{
position: absolute;
left: 0px;
top: 340px;
}

.thumbsback
{
	top: 150px;
	right: 10%;
position: fixed;


height: 100%;
z-index: -1;
max-width: 750px;
padding-bottom: 40px;
width: 60%;}




.mar
{
margin-left: 15px;
margin-right: 0px;
margin-bottom: 15px;
width: 80px;
height: 80px;
display: inline-block;
     background-repeat: no-repeat;
     background-position: right top;
     background-size: contain;
}



#content{
width: 650px;
height: 400px;

	right: 9%;
position: absolute;
top: 170px;
text-align: right;
}

.thumbstone
{
height: 120px;
margin: 5px;
}


#info{
left: 10%;
position: absolute;
top: 80px;
}

#copy
{
left: 10%;
position: fixed;
bottom: 0;
text-align: left;
width: 80%;
z-index: 100;

height: 30px;
background-color: #999999;
}



#startpic
{
position: relative;
margin: 0 auto;
width: 50%;
top: 150px;
text-align: left;
}

#infotext
{
right:  10%;
position: absolute;
top: 190px;
text-align: left;

width: 60%;
}

#infopic
{
position: fixed;
right: 10%;
top: 200px;
width: 17%;
}


.vitayear
{

display: inline-block;
width: 100px;

}

.vitae
{
position: relative;

text-align: left;
left: 0px;
}


#logo
{
    position: absolute;
    left: 0%;
    max-width: 200px;
    z-index: -1;
    opacity: 0.5;
    top: -90px;
    width: 60px;
}

}

#infotext1
{

    width: inherit;
}

}