@charset "utf-8";
/*
Tanja Meuffels Portfolio
/*


/*Allgemeine Styles*/

* {
_behavior: url(iepngfix.htc);
}

body {
background: url(../images/bg-boden.jpg) repeat;
text-align:left;
font: normal 62.5%/1.0 "Trebuchet MS", Arial, sans-serif; /* dadurch wird 1em zu 10px */
margin: 0;
padding: 0;
}

h1 {
font-size: 1.8em;
}


h3 {
font-size:14px;
font-family:verdana, helvetica, arial, sans-serif;
letter-spacing:-1px;
color:#fff;
font-weight: 700;
text-transform:uppercase;
margin:0;
padding:8px 0 8px 0;
}

p {
color:#fff;
font-size: 20px;
line-height: 38px;
font-family: 'Trebuchet MS', verdana, helvetica, sans-serif;
padding: 0 0 10px;
margin: 20px 0 10px 0;
}

img.menue {
margin: -10px 0 0 0;
border: 1px solid red;
}

/*Hauptnavigation*/
#navi {
background:url(../images/bg-navi.gif) no-repeat;
width: 162px;
height: 258px;
position: fixed;
top: 60px;
left: 0;
font-family: Trebuchet MS, sans-serif;
font-size: 1.7em;
text-transform: uppercase;
padding: 45px 10px;
z-index: 500;
/*filter: alpha(opacity=75);
opacity: .75;*/
}

* html #navi {
background:url(../images/bg-navi.gif) no-repeat;
position: absolute;
padding: 48px 10px;
}

#navi ul {
line-height: 1.4em;
list-style-type: none;
margin: 12px 0 15px 0;
}

* html #navi ul {
padding: 10px 0 0 0;
}

* + html #navi ul {
padding: 12px 0 0 0;
}

#navi ul li ul {
margin: 0 0 10px 0;
}

* html #navi ul li ul {
padding: 0;
}

* + html #navi ul li ul {
padding: 0;
}

#navi ul li {
line-height: 1.4em;
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}

#navi ul li a {
background: url(../images/navi-pfeil-schwarz.gif) 52px 3px no-repeat;
display: block;
}

#navi ul li a:hover {
background: url(../images/navi-pfeil-gruen.gif) 54px 3px no-repeat;
display: block;
font-weight: bold;
}

#navi ul li a.kontakt {
background-position: 80px 3px!important;
}

#navi ul li a.kontakt:hover {
background-position: 82px 3px!important;
}

#navi ul li a.impressum {
background-position: 95px 3px!important;;
}


#navi ul li a.impressum:hover {
background-position: 97px 3px!important;;
}

#navi ul li ul li {
line-height: 1.3em;
}

#navi ul li ul li.zweizeilig {
line-height: 1em;
display: block;
margin: 4px 0;
}

* html #navi ul li ul li.zweizeilig {
margin: 0;
display: inline;
}

#navi ul li ul li a{
margin: 0 0 0 10px;
background: none;
}

#navi ul li ul li a:hover {
background: none;
}

#navi ul li a{
text-decoration: none;
list-style-type: none;
color: #2d272a;
margin: 0;
padding: 0;
}

#navi ul li a:hover {
color: #3a710a;
text-decoration: none;
list-style-type: none;
}

#navi ul.last {
margin: 0;
padding: 0;
}

/*Hintergrund*/

#mainwrapper {
width: 8000px;
margin: 0;
}

#topwrapper {
width: 8000px;
height: 390px;
padding: 0;
background:url(../images/bg-wand.jpg) repeat-x;
}

.bg-start {
width: 800px;
height: 512px;
position: absolute;
top: 30px;
left: 160px;
z-index: 999;
}

/*Content*/
.box {
background: url(../images/bg-box-web.gif) no-repeat;
position: absolute;
top: 0;
float: left;
width: 773px;
padding: 0;
margin: 0;
}


.box a {
display: block;
position: relative;
color: #fff;
font-size: 1.3em;
cursor: pointer;
}

.box a span {
display: none;
}

.box a:hover span.tooltip {
line-height: 1.4em;
display: block;
padding: 20px 20px;
width: 163px;
height: 95px;
background: #000;
position: absolute;
top: 10px;
left: 10px;
filter: alpha(opacity=65);
opacity: .65;
}

.scrollbox {
position: relative;
overflow-y: scroll;
overflow-x: hidden;
height: 391px;
width: 773px;
}

.snippet {
width: 773px;
height: 156px;
margin: 0 0 0 50px;
}

* + html .snippet {
height: 164px;
}

*  html .snippet {
height: 164px;
}

.snippet-last {
margin-bottom: 85px;
}

* html .snippet-last {
margin-bottom: 57px;
}

* + html .snippet-last {
margin-bottom: 57px;
}

.first {
margin: 5px 0 0 50px;
}

.thumb {
width: 222px;
height: 155px;
float: left;
margin: 5px;
background: #fff;
}

.thumb-last {
margin: 10px 0 0 0;
}

.work {
left: 1680px;
}

.anker-work {
position: absolute;
top: 0;
left: 1500px;
}

.newsletter {
left: 3200px;
background: url(../images/bg-box-nl.gif) no-repeat;
}

.anker-newsletter {
position: absolute;
top: 0;
left: 3020px;
}

.banner {
left: 4700px;
background: url(../images/bg-box-banner.gif) no-repeat;
}

.anker-banner {
position: absolute;
top: 0;
left: 4520px;
}

.impressum {
left: 6200px;
background: url(../images/bg-box-impressum.gif) no-repeat;
}

.impressum p  {
font-size: 1.4em;
line-height: 1.4em;
padding: 10px 20px 0 80px;
margin: 0;
}

.impressum a {
font-size: 1em;
}

.impressum a:hover {
text-decoration: underline;
}

.impressum .navi-bottom a:hover {
text-decoration: none;
}

.impressum a.imp {
font-size: 1.4em;
padding: 10px 20px 0 80px;
}

.impressum address {
color: #fff;
font-size: 1.4em;
line-height: 1.4em;
padding: 0 20px 0 80px;
}

.anker-impressum {
position: absolute;
top: 0;
left: 6020px;
}


/*Navi bottom*/
.navi-bottom {
background: url(../images/bg-navi-bottom.gif) no-repeat;
width: 700px;
height: 51px;
margin: 0 0 0 55px;
position: absolute;
bottom: 0;
}

* html .navi-bottom {
bottom: -1px;
height: 53px;
margin: 0 0 0 60px;
}

* + html .navi-bottom {
height: 53px;
}

.navi-bottom a {
display: block;
float: left;
height: 36px;
}

.navi-bottom a:hover {
filter: alpha(opacity=65);
opacity: .65;
}

.navi-bottom a.backward-double {
background: url(../images/pfeil-backward-double.gif);
width: 45px;
margin: 8px 265px 0 10px;
}

* html .navi-bottom a.backward-double {
margin: 8px 250px 0 10px;
}

.navi-bottom a.backward-single {
background: url(../images/pfeil-backward-single.gif);
width: 20px;
margin: 8px 5px 0 0;
}

* html .navi-bottom a.backward-single {
margin: 8px 0 0 0;
}

.navi-bottom a.forward-single {
background: url(../images/pfeil-forward-single.gif);
width: 20px;
margin: 8px 265px 0 0;
}

* html .navi-bottom a.forward-single {
margin: 8px 250px 0 10px;
}

.navi-bottom a.forward-double {
background: url(../images/pfeil-forward-double.gif);
width: 45px;
margin: 8px 5px 0 0;
}

/* Helfer - am Ende der Datei belassen */

.ahem {  /*  entspricht im wesentlichen display:none; , ist aber screenreaderfreundlich */
position: absolute;
overflow: hidden;
height: 0;
width: 0;
left: -1000px;
top: -1000px;
}

.clear {
clear: both;
margin: -1px 0 0 0;  /* laesst 1px clear nach oben verschwinden */
height: 1px;  /* laesst   auf 1px schrumpfen fuer IE */
font-size: 1px;  
line-height: 1px;  
width: 100%;
}