/* ===================================
Stand: Zweispaltiges Layout mit entgegengesetzten floats
Datei: bildschirm.css


Aufbau: 1. Kalibrierung
        2. Allgemeine Styles
        3. Styles f�r Layoutbereiche
        4. Sonstige Styles
=================================== */

/* ==================================
   1. Kalibrierung
   =============================== */

* { padding: 0; margin: 0; }

h2, h3, p, ul, ol { margin-bottom: 1em; }

ol ul { margin-bottom: 0; }

li { margin-left: 2em; }

/* ==================================
   2. Allgemeine Styles
   =============================== */

html { height: 101%; }

body {
    background-color: #353535;
    color: white;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
}

h1 { font-size: 150%; }
h2 { font-size: 130%; }
h3 { font-size: 110%; }

#body h2{
    margin: 3% 0% 0% 3%;
}

address {
    text-align: center;
    font-size: 80%;
    font-style: normal;
    letter-spacing: 2px;
    line-height: 1.5;
}

/* ================
   Hyperlinks    */

a {
    text-decoration: none;
    outline: none;
}

a:link { color: #d90000; }
a:visited { color: #cc6600; }

a:hover,
a:focus {
    outline: none;
}
a:active {
    color: white;
}

/* =====================
   Klassen und IDs    */

.skiplink {
    position: absolute;
    top: -5000px;
    left: -5000px;
    width: 0;
    height: 0;
    overflow: hidden;
    display: inline;
}

.bildlinks {
    float: left;
    border: 3px outset #bbb;
    margin-right: 10px;
    margin-bottom: 10px;
}
.bildrechts {
    float: right;
    border: 3px outset #bbb;
    margin-bottom: 10px;
    margin-left: 10px;
}

.bildunten {
    float:left;
    border: 3px outset #bbb;
    margin: 15px;
}


.clearing {
    clear: both;
}

/* ==================================
   3. Styles f�r Layoutbereiche
   =============================== */



#wrapper {
    color: black;
    width: 990px;
    margin: auto;
    /* background-color: #39f355; FFFddd*/
    border-left: 3px solid #650103;
    border-top: 3px solid #650103;
    border-right: 2px solid #650103;
    border-bottom: 2px solid #650103;
}
#kopfbereich,
#navibereich,
#navibereich2,
#body,
#fussbereich {
    position: relative;
    clear: both;
    float: left;
    display:inline;
    width: 100%;
}

#kopfbereich .headbox{

    position:absolute;
    left:300px;
    top:15px;
    width: 400px;
    height: auto;
    background-color: #FFFddd;
    border: 3px outset #bbb;
    margin-bottom:10px;
    overflow:hidden;

}

#kopfbereich .headbox h2{
    text-align: center;
    color:red;
    margin-bottom: 0.5em;
    clear:none;
}

#kopfbereich .headbox h4{
    position:absolute;
    right:15px;
    bottom: 10px;
    text-align:right;
    color:red;
    font-size:larger;
    clear:none;
}

#kopfbereich .headbox img{
    float:left;
    margin-right:10px;
    border:none;

}
#kopfbereich .headbox p{
    margin-right:10px;
}

#kopfbereich {
    background-color: #ee4e00;
    background-image: url(../images/banner.jpg);
    color: black;
    padding: 0px 0px 140px 0px; /* oben - rechts - unten - links */
}
#kopfbereich h1 {
    position: absolute;
    top: 30px;
    right: 80px;
}
/*
#kopfbereich h1 {
    position: absolute;
    bottom: 10px;
    right: 20px;
    padding: 0px;
}*/
#kopfbereich p span {
    color: #d90000;
}
#fussball img{
         overflow:hidden;
         position:relative;
         left: 680px;
}

/*- navibereich--------------------------- */

#navibereich {
    background-color: #ee4e00;
    font-size:93%;
    line-height:normal;
}
#navibereich ul {
    margin:0;
    padding:10px 10px 0 50px;
    list-style:none;
}
#navibereich li {
    display:inline;
    /*margin: 1px;*/
}
#navibereich a {
    float:left;
    background:url("tableftF.gif") no-repeat left top;
    margin:0 0 0 4px;
    padding:0 0px 0 3px;
    text-decoration:none;
}
#navibereich a span {
    display:block;
    background:url("tabrightF.gif") no-repeat right top;
    padding:5px 10px 4px 6px;
    color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#navibereich a span {float:none;}
/* End IE5-Mac hack */
#navibereich a:hover span {
    color:#FFF;
}
#navibereich a:hover {
    background-position:0% -42px;
}
#navibereich a:hover span {
    background-position:100% -42px;
    text-decoration:none;
}

#navibereich .navi01 {
    float:left;
    background:url("tableftF.gif") no-repeat left top;
    background-position:0% -42px;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
}
#navibereich .navi01 span {
    display:block;
    background:url("tabrightF.gif") no-repeat right top;
    background-position:100% -42px;
    padding:5px 15px 5px 6px;
    color:#444;
}
/*- navibereich2--------------------------- */

#navibereich2 {
    background-color: #ee4e00;
    background:url("tabrightF1.gif") repeat-X right top;
    background-position:100% -12px;
    padding:5px 0px 4px 0px;
    font-size:93%;
    height:13px;
    border-bottom:2px solid #666;
}
#navibereich2 ul {
    float:left;
    display:inline;
    margin:0;
    padding:0px 10px 0 50px;
    list-style:none;
}
#navibereich2 li {
    display:inline;
    padding:0;
}
#navibereich2 a {
    float:left;
    margin:0;
    padding:0 0 0 0px;
}
#navibereich2 a span {
    float:left;
    display:block;
    padding:0px 5px 0px 5px;
    color:#444;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#navibereich2 a span {float:none;}
/* End IE5-Mac hack */
#navibereich a:hover span {
    color:#FFF;
}
#navibereich2 a:hover,#navibereich2 a:focus {
    background-position:0% -42px;
    color:white;
}
#navibereich2 a:hover span {
    background-position:100% -42px;
    text-decoration:underline;
    padding:0px 5px 0px 5px;
    color: #FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#navibereich2 a:hover span {float:none; color:#111;}
/* End IE5-Mac hack */


#navibereich2 .navi01 span {
    display:block;
    background-position:100% -42px;
    text-decoration:underline;
    padding:0px 5px 0px 5px;
    color: #222;
}
#navibereich2 .navi01 {
    float:left;
    margin:0;
    text-decoration:none;
}

#textbereich {
    float:left;
    display:inline;
    width: 94%;
    padding: 3% 3% 1% 3%;
    background-color: #EE4E00; /*#E2D7D7;*/
}

/* Korrektur f�r den IE6 und kleiner */
* html #textbereich { width: 970px;margin: 0px; }
* html #textbereich1{ width: 970px;margin: 0px; }
* html #textbereich2{ width: 970px;margin: 0px; }
#body {
    background-color: #EE4E00;
}
#textbereich ul li {
    list-style-type: square;
}

#textbereich1 {
    float:left;
    display:inline;
    background-color: #EE4E00;
}

#textbereich2 {
    float:right;
    display:inline;
    background-color: #EE4E00;

}

/************************
Hüpsche Box mit Kurven und Bild
*************************/

.box{
    clear: both;
    position:relative;
    padding: 15px;
    top: 0px;
    width: auto;
    height: auto;
    background-color: #FFFddd;
    border: 3px outset #bbb;
    margin-bottom:10px;
    overflow:hidden;

}
.box img{
    padding: 4px;
    border: 1px solid #ddd;
    border-right-color: #aaa;
    border-bottom-color: #aaa;
    float:left;
    margin: 10px;
}
.box div{
    font-weight:bold;
    display:block;
    margin: 3px;
    margin-top: 20px;
}

.bildseries{
    float:left;
    border: 3px outset #bbb;
    margin: 0px 12px 5px 0px;
}
.bildserieslast{
    float:left;
    border: 3px outset #bbb;
    margin: 0px 0px 5px 0px;
}


#textbereich2 .section h1{
    text-align:center;
}


#fussbereich {
    background-color: #81C5EF;
    padding: 10px 0px 10px 0px;
    border-top: 1px solid #8c8c8c;
}

#fussbereich div{
    margin-left:20px;
}
#fussbereich address{
    float:left;
    display:inline;
    margin-left: 90px;
    margin-right: 80px;

}

/************************
Surfshop Info
  *************************/
#sufshopinfos #textbereich2 #box h1{
    text-align:center;
}
#sufshopinfos #body {
    padding-bottom: 80px;
}

/************************
Surfshop Anfahrt
  *************************/
#sufshopanfahrt #textbereich2 .section{
    clear: both;
    position:absolute;
    background-color: #377317; /*#E2D7D7;*/
    padding: 10px 20px;
    top: 150px;
    right: 180px;
    width: auto;
    height: auto;
}

iframe {
    border: 3px outset #bbb;
}

/* ==================================
   ENDE DES STYLESHEETS
   =============================== */

* html img{
    position:relative;
    z-index: 1;
}