<style type="text/css">
body {
font-family: Arial, Tahoma;
font-size: 0.8em;
background: bbb;
line-height: 1.6em;
}
hr {
margin-top: -7px;
color: maroon;
}
#container_rahmen, .copyright {
position: absolute;
}
#container_rahmen {
background: fff;
top: 50%;
left: 50%;
width: 800px;
height: 450px;
margin-top: -225px;
margin-left: -400px;
padding: 15px;
border-bottom: #6f6f6f solid 1px;
border-right: #6f6f6f solid 1px;
}
#container {
background: efefef;
width: 100%;
height: 100%;
border-top: #6f6f6f solid 1px;
border-left: #6f6f6f solid 1px;
border-bottom: #bbb solid 1px;
border-right: #bbb solid 1px;
padding: 10px;
}
#bild {
float:left;
margin-right: 15px;
}
#ueberschrift {
font-size: 2em;
font-family: Quark Neon, Arial;//Annifont;//Monotype Corsiva;
}
/* style the outer div to give it width */
.menu {
width: 750px;
font-size: 0.85em;
border-top: 2px solid maroon;
padding-bottom: 10px;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.menu ul ul {
width: 150px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float: left;
width: 139px;
position: relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
width: 150px;
height: 30px;
font-size: 1em;
color: #fff;
text-decoration:none;
display: block;
border: 1px solid #fff;
border-width: 1px 1px 0 0;
background: maroon;
padding-left: 10px;
line-height:30px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:149px;
w\idth:139px;
}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background: maroon;
color: #fff;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background: maroon;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background: #e2dfa8;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background: maroon;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility: hidden;
position: absolute;
height: 0;
top: 31px;
left: 0;
width: 150px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}
/* position the third level flyout menu */
.menu ul ul ul{
left:129px;
top:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-129px;
}
/* style the table so that it takes no ppart in the layout - required for IE to work */
table {
position:absolute;
top:0px;
left:0px;
}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background: #e2dfa8;
font-size: 0.7em;
color: maroon;
height: auto;
line-height: 1em;
padding: 5px 10px;
width: 129px
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:150px;
w\idth:129px;
}
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color: #fff;
background: #8c0003;
}
/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}
.footer {
position: absolute;
width: 200px;
bottom: 15px;
right: 15px;
text-align: right;
padding-right: 10px;
}
a.foot,a.foot:active,a.foot:visited {
color: maroon;
}
a.foot:hover {
background: maroon;
color: #fff;
}
.copyright {
top: 50%;
left: 50%;
width: 800px;
height: 35px;
margin-top: 235px;
margin-left: -400px;
text-align: center;
font-weight: bold;
font-size: 0.85em;
}
/* Picture.css */
/* default link style - needed to make the :active work correctly in IE */
a, a:visited, a:hover, a:active {
color: maroon;
}
/* style the outer containing div to fit the landscape, portrait and buttons */
#album {
width: 250px;
height: 300px;
background: #eee;
border: 1px solid #aaa;
margin: 0 auto;
margin-top: 10px;
}
/* remove the padding margin and bullets from the list. Add a top margin and width to fit the images and a position relative */
.gallery {
padding: 0;
margin: 300px 0 0 0;
list-style-type: none;
position: relative;
width: 250px;
padding-left: 30px;
}
/* remove the default image border */
.gallery img {
border: 0;
}
/* make the list horizontal */
.gallery li {
float: left;
}
/* style the link text to be central in a surrounding box */
.gallery li a, .gallery li a:visited {
font-size: 0.8em;
float: left;
text-decoration: none;
color: maroon;
background: #e2dfa8;
text-align: center;
width: 26px;
height: 26px;
line-height: 24px;
border: 2px solid #fff;
margin: 2px;
}
/* position the images using an absolute position and hide them from view */
.gallery li a img {
position:absolute;
padding: 5px;
top: -275px;
left: 15;
visibility: hidden;
border: 0;
}
/* fix the top position for the landscape images */
.gallery li a img.landscape {
top:-300px;
}
/* fix the left position for the portrait images */
.gallery li a img.portrait {
left:60px;
}
/* style the hover background color for the text boxes */
.gallery li a:hover {
background: #8c0003;
color: #fff;
}
/* style the active/focus colors for the text boxes (required for IE) */
.gallery li a:active, .gallery li a:focus {
background: maroon;
color: #fff;
}
/* make the images visible on active/focus */
.gallery li a:active img, .gallery li a:focus img {
visibility:visible;
}
</style>
