Code:
css:
*, html, body {
padding : 0;
margin : 0;
overflow:visible;
}
img {
border : none;
}
#wrap {
width : 100%;
}
#wrap2 {
position : absolute;
top : 0;
left : 0;
min-height : 100%;
min-width : 100%;
background : url(img/back.jpg);
background-position : 50% 0;
background-repeat : no-repeat;
background-attachment : fixed;
background-repeat : no-repeat;
}
#green_navi {
margin : auto;
margin-top : 5%;
width : 950px;
min-width : 950px;
}
#navi {
background : url(img/newbag.png);
background-repeat:repeat;
width : 78%;
min-width : 950px;
margin : auto;
height : 128px;
border-left : solid;
border-right : solid;
border-top : solid;
border-top-width : 10px;
border-color : #435120;
}
#contenthack {
background : #435120;
width : 100%;
margin : auto;
min-height : 354px;
}
#content {
background : #bac09e;
width : 78%;
margin : auto;
min-width : 950px;
min-height : 354px;
border-left : solid;
border-right : solid;
border-color : #435120;
}
#content2 {
background : url(img/newbag.png);
min-width : 950px;
width : 950px;
width : 78%;
margin : auto;
height : 128px;
border-left : solid;
border-right : solid;
border-bottom : solid;
border-bottom-width : 5px;
border-color : #435120;
}
#logo {
background : url(img/logo.png);
width : 236px;
height : 92px;
position : relative;
top : 10%;
right : -2%;
}
#f_navi {
height : 69px;
width : 549px;
position : relative;
top : -92px;
float : right;
}
#home {
float : left;
height : 69px;
width : 66px;
background : url(img/leer/home.png);
}
#markt {
float : left;
height : 69px;
width : 122px;
background : url(img/leer/markt.png);
}
#produkte {
float : left;
height : 69px;
width : 86px;
background : url(img/leer/produkte.png);
}
#angebote {
float : left;
height : 69px;
width : 96px;
background : url(img/leer/angebote.png);
}
#kontakt {
float : left;
height : 69px;
width : 74px;
background : url(img/leer/kontakt.png);
}
#angebote:hover {
background : url(img/auswahl/angebote.png);
}
#impressum {
float : left;
height : 69px;
width : 105px;
background : url(img/leer/impressum.png);
}
#home:hover {
background : url(img/auswahl/home.png);
}
#produkte:hover {
background : url(img/auswahl/produkte.png);
}
#produkte:active {
background : url(img/auswahl/produkte.png);
}
#impressum:hover {
background : url(img/auswahl/impressum.png);
}
#markt:hover {
background : url(img/auswahl/markt.png);
}
#kontakt:hover {
background : url(img/auswahl/kontakt.png);
}
#contenttext {
padding-left : 2%;
padding-top : 1%;
max-width : 780px;
}
#f_navi {
cursor : pointer;
}
h1 {
font-family : Arial, Helvetica, sans-serif;
font-size : 25pt;
}
p {
font-family : Arial, Helvetica, sans-serif;
font-weight : bold;
color : #333300;
padding-top : 2%;
}
img {
border : none;
}
#slideshow {
list-style : none;
color : olive;
}
#slideshow span {
display : none;
}
#wrapper {
width : 506px;
margin : 0 auto;
display : none;
}
#wrapper * {
margin : 0;
padding : 0;
}
#fullsize {
background : url(img/gback.png);
width : 500px;
height : 338px;
}
#image {
width : 500px;
margin : auto;
}
#image img {
position : absolute;
width : auto;
}
.imgnav {
position : absolute;
width : 50%;
height : 306px;
z-index : 150;
}
#imglink {
position : absolute;
height : 306px;
width : 500px;
z-index : 100;
}
.linkhover {
background : url(images/link.gif) no-repeat center center;
}
#slideleft {
float : left;
width : 20px;
height : 125px;
background : url(images/scroll-left.gif) no-repeat center center;
}
#slideleft:hover {
cursor : pointer;
}
#slideright {
float : right;
width : 20px;
height : 125px;
background : url(images/scroll-right.gif) no-repeat center center;
}
#slideright:hover {
cursor : pointer;
}
#slidearea {
float : left;
position : relative;
width : 456px;
margin-left : 0;
height : 125px;
overflow : hidden;
}
#slider {
position : absolute;
left : 0;
}
#slider img {
margin : auto;
padding-top : 20px;
}
#spalte {
width : 360px;
float : right;
}
#spalte2 {
width : 360px;
}
h1 {
color : #ffcc00;
}
#spaltp {
margin-top : 20px;
margin-right : -15px;
}
ul {
padding-left : 15px;
font-weight : bolder;
color : #ffcc00;
font-size : 12pt;
font-family : Arial, Helvetica, sans-serif;
}
p {
font-size : 12pt;
}
#lightbox {
position : absolute;
top : 20px;
left : 0;
width : 100%;
z-index : 100;
text-align : center;
line-height : 0;
color : #151410;
}
#lightbox a, #lightbox a:hover {
border-bottom : none;
color : #151410;
text-decoration : underline;
}
#lightbox a img {
border : none;
}
#outerImageContainer {
position : relative;
background-color : #fff;
width : 250px;
height : 250px;
margin : 0 auto;
}
#imageContainer {
padding : 10px;
}
#loading {
position : absolute;
top : 40%;
left : 0%;
height : 25%;
width : 100%;
text-align : center;
line-height : 0;
}
#loadingLink {
display : block;
margin : 0 auto;
padding : 0;
width : 32px;
height : 32px;
background : url("images/loading.gif") no-repeat center center;
text-indent : -9999px;
}
#hoverNav {
position : absolute;
top : 0;
left : 0;
height : 100%;
width : 100%;
z-index : 10;
}
#imageContainer > #hoverNav {
left : 0;
}
#hoverNav a {
outline : none;
}
#prevLinkImg, #nextLinkImg {
width : 49%;
height : 100%;
background : transparent url("images/blank.gif") no-repeat;
display : block;
text-indent : -9999px;
}
#prevLinkImg {
left : 0;
float : left;
}
#nextLinkImg {
right : 0;
float : right;
}
#prevLinkImg:hover, #prevLinkImg:visited:hover {
background : url("images/prevlabel.gif") no-repeat left 15%;
}
#nextLinkImg:hover, #nextLinkImg:visited:hover {
background : url("images/nextlabel.gif") no-repeat right 15%;
}
#imageDataContainer {
font : 10px Verdana, Helvetica, sans-serif;
background-color : #fff;
margin : 0 auto;
line-height : 1.4em;
}
#imageData {
padding : 0 10px;
}
#imageDetails {
width : 70%;
float : left;
text-align : left;
}
#caption {
font-weight : bold;
}
#numberDisplay {
display : block;
clear : left;
}
#detailsNav {
display : block;
clear : left;
padding : 0 0 10px 0;
}
#prevLinkDetails {
margin : 0 8px 0 0;
}
#nextLinkDetails {
margin : 0 8px 0 0;
}
#closeLink {
display : block;
margin : 0;
padding : 0 0 10px 0;
text-decoration : none;
float : right;
width : 66px;
height : 28px;
background : url("images/closelabel.gif") no-repeat;
text-indent : -9999px;
overflow : hidden;
}
#overlay {
position : absolute;
top : 0;
left : 0;
z-index : 90;
width : 100%;
height : 500px;
background-color : #151410;
}
.clearfix:after {
content : ".";
display : block;
height : 0;
clear : both;
visibility : hidden;
}
* html > body .clearfix {
display : inline-block;
width : 100%;
}
* html .clearfix {
height : 1%;
}
#paddingslide {
padding-top : 30px;
padding-left : 4%;
}