/* Marcos CSS File */

body {
color: #000000;
background: #DDDDDD;
font: 90% Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}

#banner {
position: absolute;
left: 40px;
}

#bodybox {
position: absolute;
left: 40px;
top: 170px;
color: #000000;
background: #DDDDDD;
width: 700px;
font: 16px Arial, Helvetica, sans-serif;
text-decoration: none;
border: 1px solid #fff;
}

/* general tables with the input forms */
table.innertbl {
width : 65%;
border : solid;
border-top-width : 0;
border-right-width : 0;
border-bottom-width : 0;
border-left-width : 0;
background-color : #DDDDDD;
font-weight : bold;
text-decoration : none;
padding-top : 35px;
padding-bottom : 25px;
padding-right : 15px;
padding-left : 35px;
font: 16px Arial, Helvetica, sans-serif;
}

#portrait {
position: absolute;
left: 500px;
top: 200px;
color: #000000;
background: #DDDDDD;
border: 0;
}

#backlink {
position: absolute;
left: 630px;
top: 540px;
color: #000000;
background: transparent;
border: 0;
text-decoration : none;
}

img {
border: 0 none;
}


/* -----------  ERSTE REIHE ---------- */

#navi1_1 {
position: absolute;
left: 40px;
top: 160px;
float: left;
width: 125px;
padding: 0;
background: #257 url(../images/About.png);
color: #000000;
}
#navi1_1 a {
display: block;
font: bold 16px Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
border: 1px solid #fff;
width: 125px;
height: 125px;
color: #000000;
background: #257 url(../images/About.png);
}
#navi1_1 a:hover {
color: #FF0000;
background: #ccc url(../images/About_bw.png);
}
#navi1_1 a .showcase {
display: none;
}
#navi1_1 a:hover .showcase {
position: absolute;
top: 180px;
left: 600px;
display: block;
width: 300px;
text-align: left;
font: bold 2.1em Verdana, Arial, Helvetica, sans-serif;
background: transparent;
color: #000;
padding: 5px;
}


#navi1_2 {
position: absolute;
left: 190px;
top: 160px;
float: left;
width: 125px;
padding: 0;
background: #257;
color: #FFFFFF;
}
#navi1_2 a {
display: block;
font: bold 16px Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
border: 1px solid #fff;
width: 125px;
height: 125px;
color: #fff;
background: #257;
}
#navi1_2 a:hover {
color: #FF0000;
background: #CCC;
}
#navi1_2 a .showcase {
display: none;
}
#navi1_2 a:hover .showcase {
position: absolute;
top: 180px;
left: 450px;
display: block;
width: 300px;
text-align: left;
font: bold 2.1em Verdana, Arial, Helvetica, sans-serif;
background: transparent;
color: #000;
padding: 5px;
}


#navi1_3 {
position: absolute;
left: 340px;
top: 160px;
float: left;
width: 125px;
padding: 0;
background: #257 url(../images/Contact.png);
color: #FFFFFF;
}
#navi1_3 a {
display: block;
font: bold 16px Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
border: 1px solid #fff;
width: 125px;
height: 125px;
color: #fff;
background: #257 url(../images/Contact.png);
}
#navi1_3 a:hover {
color: #FF0000;
background: #ccc url(../images/Contact_bw.png);
}
#navi1_3 a .showcase {
display: none;
}
#navi1_3 a:hover .showcase {
position: absolute;
top: 180px;
left: 300px;
display: block;
width: 300px;
text-align: left;
font: bold 2.1em Verdana, Arial, Helvetica, sans-serif;
background: transparent;
color: #000;
padding: 5px;
}


#navi1_4 {
position: absolute;
left: 490px;
top: 160px;
float: left;
width: 125px;
padding: 0;
background: #257 url(../images/Xing.png);
color: #000000;
}
#navi1_4 a {
display: block;
font: bold 16px Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
border: 1px solid #fff;
width: 125px;
height: 125px;
color: #000000;
background: #257 url(../images/Xing.png);
}
#navi1_4 a:hover {
color: #FF0000;
background: #ccc url(../images/Xing_bw.png);
}
#navi1_4 a .showcase {
display: none;
}
#navi1_4 a:hover .showcase {
position: absolute;
top: 180px;
left: 150px;
display: block;
width: 300px;
text-align: left;
font: bold 2.1em Verdana, Arial, Helvetica, sans-serif;
background: transparent;
color: #000;
padding: 5px;
}



/* -----------  ZWEITE REIHE ---------- */

#navi2_1 {
position: absolute;
left: 40px;
top: 310px;
float: left;
width: 125px;
padding: 0;
background: #257 url(../images/Installation.png);
color: #FFFFFF;
}
#navi2_1 a {
display: block;
font: bold 16px Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
border: 1px solid #fff;
width: 125px;
height: 125px;
color: #FFFFFF;
background: #257 url(../images/Installation.png);
}
#navi2_1 a:hover {
color: #FF0000;
background: #ccc url(../images/Installation_bw.png);
}
#navi2_1 a .showcase {
display: none;
}
#navi2_1 a:hover .showcase {
position: absolute;
top: 30px;
left: 600px;
display: block;
width: 300px;
text-align: left;
font: bold 2.1em Verdana, Arial, Helvetica, sans-serif;
background: transparent;
color: #000;
padding: 5px;
}


#navi2_2 {
position: absolute;
left: 190px;
top: 310px;
float: left;
width: 125px;
padding: 0;
background: #257 url(../images/Publications.png);
color: #FFFFFF;
}
#navi2_2 a {
display: block;
font: bold 16px Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
border: 1px solid #fff;
width: 125px;
height: 125px;
color: #fff;
background: #257 url(../images/Publications.png);
}
#navi2_2 a:hover {
color: #FF0000;
background: #ccc url(../images/Publications_bw.png);
}
#navi2_2 a .showcase {
display: none;
}
#navi2_2 a:hover .showcase {
position: absolute;
top: 30px;
left: 450px;
display: block;
width: 300px;
text-align: left;
font: bold 2.1em Verdana, Arial, Helvetica, sans-serif;
background: transparent;
color: #000;
padding: 5px;
}


#navi2_3 {
position: absolute;
left: 340px;
top: 310px;
float: left;
width: 125px;
padding: 0;
background: #257 url(../images/Ooo.png);
color: #FFFFFF;
}
#navi2_3 a {
display: block;
font: bold 16px Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
border: 1px solid #fff;
width: 125px;
height: 125px;
color: #fff;
background: #257 url(../images/Ooo.png);
}
#navi2_3 a:hover {
color: #FF0000;
background: #257 url(../images/Ooo_bw.png);
}
#navi2_3 a .showcase {
display: none;
}
#navi2_3 a:hover .showcase {
position: absolute;
top: 30px;
left: 310px;
display: block;
width: 300px;
text-align: left;
font: bold 2.1em Verdana, Arial, Helvetica, sans-serif;
color: #000;
padding: 5px;
}


#navi2_4 {
position: absolute;
left: 490px;
top: 310px;
float: left;
width: 125px;
padding: 0;
background: #257 url(../images/Codings.png);
color: #000000;
}
#navi2_4 a {
display: block;
font: bold 16px Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
border: 1px solid #fff;
width: 125px;
height: 125px;
color: #000000;
background: #257 url(../images/Codings.png);
}
#navi2_4 a:hover {
color: #FF0000;
background: #ccc url(../images/Codings_bw.png);
}
#navi2_4 a .showcase {
display: none;
}
#navi2_4 a:hover .showcase {
position: absolute;
top: 30px;
left: 150px;
display: block;
width: 300px;
text-align: left;
font: bold 2.1em Verdana, Arial, Helvetica, sans-serif;
background: transparent;
color: #000;
padding: 5px;
}


/* -----------  DRITTE REIHE ---------- */

#navi3_1 {
position: absolute;
left: 40px;
top: 460px;
float: left;
width: 125px;
padding: 0;
background: #257 url(../images/Delicious.png);
color: #FFFFFF;
}
#navi3_1 a {
display: block;
font: bold 16px Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
border: 1px solid #fff;
width: 125px;
height: 125px;
color: #000000;
background: #257 url(../images/Delicious.png);
}
#navi3_1 a:hover {
color: #FF0000;
background: #ccc url(../images/Delicious_bw.png);
}
#navi3_1 a .showcase {
display: none;
}
#navi3_1 a:hover .showcase {
position: absolute;
top: -120px;
left: 600px;
display: block;
width: 300px;
text-align: left;
font: bold 2.1em Verdana, Arial, Helvetica, sans-serif;
background: transparent;
color: #000000;
padding: 5px;
}


#navi3_2 {
position: absolute;
left: 190px;
top: 460px;
float: left;
width: 125px;
padding: 0;
background: #257 url(../images/Flickr.png);
color: #000000;
}
#navi3_2 a {
display: block;
font: bold 16px Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
border: 1px solid #fff;
width: 125px;
height: 125px;
color: #000000;
background: #257 url(../images/Flickr.png);
}
#navi3_2 a:hover {
color: #FF0000;
background: #ccc url(../images/Flickr_bw.png);
}
#navi3_2 a .showcase {
display: none;
}
#navi3_2 a:hover .showcase {
position: absolute;
top: -120px;
left: 450px;
display: block;
width: 300px;
text-align: left;
font: bold 2.1em Verdana, Arial, Helvetica, sans-serif;
background: transparent;
color: #000;
padding: 5px;
}


#navi3_3 {
position: absolute;
left: 340px;
top: 460px;
float: left;
width: 125px;
padding: 0;
background: #257 url(../images/Facebook.png);
color: #FFFFFF;
}
#navi3_3 a {
display: block;
font: bold 16px Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
border: 1px solid #fff;
width: 125px;
height: 125px;
color: #fff;
background: #257 url(../images/Facebook.png);
}
#navi3_3 a:hover {
color: #FF0000;
background: #ccc url(../images/Facebook_bw.png);
}
#navi3_3 a .showcase {
display: none;
}
#navi3_3 a:hover .showcase {
position: absolute;
top: -120px;
left: 300px;
display: block;
width: 300px;
text-align: left;
font: bold 2.1em Verdana, Arial, Helvetica, sans-serif;
background: transparent;
color: #000;
padding: 5px;
}


#navi3_4 {
position: absolute;
left: 490px;
top: 460px;
float: left;
width: 125px;
padding: 0;
background: #257 url(../images/GnuPG.png);
color: #000000;
}
#navi3_4 a {
display: block;
font: bold 16px Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
border: 1px solid #fff;
width: 125px;
height: 125px;
color: #000000;
background: #257 url(../images/GnuPG.png);
}
#navi3_4 a:hover {
color: #FF0000;
background: #ccc url(../images/GnuPG_bw.png);
}
#navi3_4 a .showcase {
display: none;
}
#navi3_4 a:hover .showcase {
position: absolute;
top: -120px;
left: 150px;
display: block;
width: 300px;
text-align: left;
font: bold 2.1em Verdana, Arial, Helvetica, sans-serif;
background: transparent;
color: #000;
padding: 5px;
}