/* css */
/* http://www.grafikwelten.de */
/* copyright by detlef klewer */

/* farben: schriftfarbe links blau #0050A0 */
/*         schriftfarbe       grau #8F8F8F */

* {
	   margin: 0;
	   padding: 0;
  }

body {
            background: url(bilder/grafikwelten_back.jpg) repeat-x;
            font-family: arial, sans-serif;
            color: #0050A0;
            margin: 0;
            padding: 0;
     }

/* ---------------------------------------------------------------------------------------------- umschließender container */

#komplettcontainer {
            background: url(bilder/grafikwelten_background.jpg) no-repeat;
            margin: 0 auto;
            padding: 0;
            width: 960px;
                   }

/* -------------------------------------------------------------------------------------- kopf mit logo und bildnavigation */

#kopf {
            background: url(bilder/grafikwelten_background.jpg) no-repeat;
            margin: 0;
            padding: 0;
            text-align: right;
      }

#kopf h1 {
            font-size: 72px;
            margin: 0;
            letter-spacing: 0.3em;
            padding: 0 30px 0 0;
            text-align: right;
         }

#kopf .unternavigation {
            letter-spacing: 0.1em;
            padding-right: 35px;
                       }

#kopf a.subnavi {
            border: 0;
            color: #8F8F8F;
            font-weight: bold;
            margin: 0;
            padding: 0;
                }

#kopf a:hover.subnavi {
            color: #0050A0;
                }

#kopf p {
            margin: 195px 29px 7px 7px;
            padding: 0;
        }


#kopf a {
            border: 1px solid #BFBFBF;
            margin: 0 6px;
            padding: 181px 120px 0 0;
            text-decoration: none;
        }

#kopf a.web {
            background: url(bilder/webdesign_2.jpg) top left no-repeat;

            }

#kopf a:hover.web {
            background: url(bilder/webdesign.jpg) top left no-repeat;
                  }

#kopf a.webdesign {
            background: url(bilder/webdesign.jpg) top left no-repeat;
            cursor: default;
                  }

#kopf a.illustration {
            background: url(bilder/illustration_2.jpg) top left no-repeat;

                     }

#kopf a:hover.illustration {
            background: url(bilder/illustration.jpg) top left no-repeat;
                     }

#kopf a.illu {
            background: url(bilder/illustration.jpg) top left no-repeat;
            cursor: default;
             }

#kopf a.grafik {
            background: url(bilder/grafik_2.jpg) top left no-repeat;

        }

#kopf a:hover.grafik {
            background: url(bilder/grafik.jpg) top left no-repeat;
        }

#kopf a.grafdes {
            background: url(bilder/grafik.jpg) top left no-repeat;
            cursor: default;
             }

#kopf a.comic {
            background: url(bilder/comic_2.jpg) top left no-repeat;

        }

#kopf a:hover.comic {
            background: url(bilder/comic.jpg) top left no-repeat;
        }

#kopf a.comic_2 {
            background: url(bilder/comic.jpg) top left no-repeat;
            cursor: default;
             }

#kopf a.kalligrafie {
            background: url(bilder/kalligrafie_2.jpg) top left no-repeat;

        }

#kopf a:hover.kalligrafie {
            background: url(bilder/kalligrafie.jpg) top left no-repeat;
        }

#kopf a.kalligrafie_2 {
            background: url(bilder/kalligrafie.jpg) top left no-repeat;
            cursor: default;
             }

/* ------------------------------------------------------------------------------------------ container für begrüßungstext */

#begruessungstext {
            color: #5F5F5F;
            margin: 50px 0 30px 0;
            width: 960px;
                  }

/* ------------------------------------------------------------------------------------ begrüßungstext inhalt linke spalte */

#hallo {
            /*border-right: 1px solid #8F8F8F;*/
            float: left;
            margin: 0;
            padding: 0 10px 0 15px;
            width: 315px;
       }

#hallo p {
            line-height: 1.3em;
            margin: 0;
            padding: 0;
         }

#hallo .box {
            font-size: 13px; font-weight: bold; border: 2px solid #DFDFDF; margin-right: 10px; padding: 15px; line-height: 1.2em;
            }

/* ------------------------------------------------------------------------------ container für mittlere und rechte spalte */

#uebersichtcontainer {
            float: right;
            width: 640px;
                     }

/* -------------------------------------------------------------------- zusammengefasste spalten für kontakt und impressum */

#kontakt {  float: right;
            border-left: 1px solid #8F8F8F;
            border-right: 1px solid #8F8F8F;
            margin-right: 5px;
            padding: 10px;
            width: 570px;
         }

#kontakt h1 {
            border-bottom: 1px solid #8F8F8F;
            font-size: 18px;
            font-weight: normal;
            letter-spacing: 0.4em;
            margin: 0;
            padding-bottom: 2px;
            }

#kontakt p {
            font-size: 12px;
            line-height: 1.3em;
            margin: 0;
            padding: 5px 5px 5px 10px;;
           }

#kontakt img {
            float: left;
            padding: 10px 15px 10px 0;
             }

/* -------------------------------------------------------------------------------------------- mittlere und rechte spalte */

#uebersicht_links {
            float: left;
            border-right: 1px solid #8F8F8F;
            border-left: 1px solid #8F8F8F;
            padding: 10px;
            width: 290px;
                  }

#uebersicht_links h1 {
            border-bottom: 1px solid #8F8F8F;
            font-size: 18px;
            font-weight: normal;
            letter-spacing: 0.4em;
            margin: 0;
                     }

#uebersicht_links img {
            float: right;
            padding: 0 0 0 5px;
                      }

#uebersicht_links p {
            font-size: 12px;
            line-height: 1.3em;
            margin: 0;
            padding: 5px 5px 5px 10px;;
                    }
#uebersicht_links a {
            color: #0050A0;
            font-weight: bold;
            padding-left: 15px;
            text-decoration: none;
                     }

#uebersicht_links a:hover {
            color: #8F8F8F;
                           }

#uebersicht_rechts {
            float: right;
            border-right: 1px solid #8F8F8F;
            margin-right: 5px;
            padding: 10px;
            width: 280px;
                   }

#uebersicht_rechts h1 {
            border-bottom: 1px solid #8F8F8F;
            font-size: 18px;
            font-weight: normal;
            letter-spacing: 0.4em;
            margin: 0;
                     }

#uebersicht_rechts img {
            float: right;
            padding: 5px 0 0 5px;;
                      }

#uebersicht_rechts p {
            font-size: 12px;
            margin: 0;
            padding: 5px 5px 10px 10px;;
                    }

#uebersicht_rechts a {
            color: #0050A0;
            font-weight: bold;
            padding-left: 51px;
            text-decoration: none;
                     }

#uebersicht_rechts a:hover {
            color: #8F8F8F;
                           }

/* ---------------------------------------------------------------------------------------- css für die bildevrgrößerungen */

#uebersicht_links_bild {
            float: left;
            border-right: 1px solid #8F8F8F;
            border-left: 1px solid #8F8F8F;
            padding: 10px;
            width: 290px;
                  }

#uebersicht_links_bild h1 {
            border-bottom: 1px solid #8F8F8F;
            font-size: 18px;
            font-weight: normal;
            letter-spacing: 0.4em;
            margin: 0;
                     }

#uebersicht_links_bild p {
            font-size: 12px;
            line-height: 1.3em;
            margin: 0;
            padding: 5px 5px 5px 10px;;
                    }

#uebersicht_rechts_bild {
            float: right;
            border-right: 1px solid #8F8F8F;
            margin-right: 5px;
            padding: 10px;
            width: 280px;
                   }

#uebersicht_rechts_bild h1 {
            border-bottom: 1px solid #8F8F8F;
            font-size: 18px;
            font-weight: normal;
            letter-spacing: 0.4em;
            margin: 0;
                     }

#uebersicht_rechts_bild p {
            font-size: 12px;
            margin: 0;
            padding: 5px 5px 10px 10px;;
                    }

#übersicht_links_bild a.p1 {
            border: 0;
            color: #558D88;
            display: block;
            font-weight: bold;
            text-decoration: none;
     }

a.p1 img {
            border: 0;
            display: block;
         }

a:hover.p1 {
            color: #000;
            text-decoration: none;
            position: relative;
            z-index: 500;
           }

a.p1 b {
            display:block; position:absolute; left:-9999px; padding:10px; opacity:0; -o-box-shadow:5px 5px 2px rgba(0,0,0,0.4); -icab-box-shadow:5px 5px 2px rgba(0,0,0,0.4); -khtml-box-shadow:5px 5px 2px rgba(0,0,0,0.4); -moz-box-shadow:5px 5px 2px rgba(0,0,0,0.4); -webkit-box-shadow:5px 5px 2px rgba(0,0,0,0.4); box-shadow:5px 5px 2px rgba(0,0,0,0.4); -o-border-radius:8px;-icab-border-radius:8px; -khtml-border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -webkit-transition:opacity 0.6s ease-in-out;
            }

a:hover.p1 b {
            background: #fff;
            border: 1px solid #aaa;
            top: -215px;
            left: -5px;
            padding: 10px;
            opacity:1.0;
             }
/* ------------------------------------------------------------------------------------------------ Spalten für Referenzen */

#uebersicht_links_referenzen {
            float: left;
            border-right: 1px solid #8F8F8F;
            border-left: 1px solid #8F8F8F;
            padding: 10px;
            width: 290px;
                  }

#uebersicht_links_referenzen h1 {
            border-bottom: 1px solid #8F8F8F;
            font-size: 12px;
            font-weight: normal;
            letter-spacing: 0.1em;
            margin: 0;
                     }

#uebersicht_links_referenzen img {
            border: 1px solid #8F8F8F;
            float: right;
            margin: 8px 0 0 5px;
            padding: 0;
                      }

#uebersicht_links_referenzen p {
            font-size: 12px;
            line-height: 1.3em;
            margin: 0;
            padding: 5px;
                    }
#uebersicht_links_referenzen a {
            color: #0050A0;
            font-weight: bold;
            text-decoration: none;
                     }

#uebersicht_links_referenzen a:hover {
            color: #8F8F8F;
                           }

#uebersicht_rechts_referenzen {
            float: right;
            border-right: 1px solid #8F8F8F;
            margin-right: 5px;
            padding: 10px;
            width: 280px;
                   }

#uebersicht_rechts_referenzen h1 {
            border-bottom: 1px solid #8F8F8F;
            font-size: 12px;
            font-weight: normal;
            letter-spacing: 0.1em;
            margin: 0;
                     }

#uebersicht_rechts_referenzen img {
            border: 1px solid #8F8F8F;
            float: right;
            margin: 8px 0 0 0;
            padding: 0;;
                      }

#uebersicht_rechts_referenzen p {
            font-size: 12px;

            line-height: 1.3em;
            margin: 0;
            padding: 5px 5px 5px 10px;;
                    }

#uebersicht_rechts_referenzen a {
            color: #0050A0;
            font-weight: bold;
            text-decoration: none;
                     }

#uebersicht_rechts_referenzen a:hover {
            color: #8F8F8F;
                           }

/* --------------------------------------------------------------------------------------------------------- kontaktzeilen */

#footer {
            clear: both;
            color: #8F8F8F;
            font-size: 12px;
            background: url(bilder/grafikwelten_footer.jpg) no-repeat top left;
            margin: 0;
            padding: 15px 20px 10px 20px;
        }

#footernavigation {
            color: #8F8F8F;
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 0.2em;
            padding: 25px 0 0 0;
            text-align: center;
                  }

#footernavigation a {
            color: #0050A0;
            text-decoration: none;
                    }

#footernavigation a:hover {
            color: #8F8F8F;
                          }

.adresse {
            font-size: 11px;
            font-weight: normal;
         }

/* --- KONTAKTFORMULAR --- */

.links form.kontakt{
	   background: url(bilder/kontaktformular.gif) no-repeat 0 0 #FFFFFF;
            color: #000000;
	   width: 400px;
            height: 350px;
            padding: 4px 14px 34px 16px;
                   }

.links form.kontakt label {
	   font: bold 11px/22px arial, helvetica, sans-serif;
	   color: #224F25;
            background-color: #F5F5F5;
            padding: 0 0 8px 0;
                          }

.links form.kontakt input{
	   width: 350px;
            height: 15px;
            padding: 2px;
	   font: normal 11px/15px arial, helvetica, sans-serif;
	   background-color: #FFFFFF;
            color: #000000;
            margin: 0;
            border: 1px solid #224F25;
                         }

.links form.kontakt textarea {
	  width: 350px;
           height: 150px;
           padding: 2px;
	  font: normal 11px/15px arial, helvetica, sans-serif;
	  background-color: #FFFFFF;
           color: #000000;
           margin: 0;
           border: 1px solid #224F25;
           }

.links form.kontakt input.senden {
	  width: 65px;
           height: 20px;
           padding: 0;
           margin: 3px 0 0 0;
           }

.links form.kontakt p {
	  font: bold 11px/25px arial, helvetica, sans-serif;
	  color: #224F25;
           background-color: #F5F5F5;
           padding: 4px 0 0 0;}

/* Javascriptkreis */

#textRechtsSpirale {
      width: 400px;
      position: absolute;
      top: 1050px;
                    }

.button {
         font-size: 7pt;
         color: #333333;
         border-style: solid;
         border-width: 1px;
         border-color: #333333;
         background-color: #FFFFFF;
            }
.buttonclick {
         font-size: 7pt;
         color: #FFFFFF;
         border-style: solid;
         border-width: 1px;
         border-color: #333333;
         background-color: #666666;
            }
.hom {
         visibility: hidden;
         position: absolute;
         left: 0px;
         top: 0px;
         width: 128px;
         height: 124px;
            }

.dark {
         visibility: hidden;
         position: absolute;
         left: 290px;
         top: 231px;
         color: #6B6854;
         font-size: 11px;
            }

a.darklink {
         color: #6B6854;
         font-size: 11px;
         text-decoration: none;
            }

a:hover.darklink {
         color: #7F0A5F;
         font-size: 11px;
         text-decoration: none;
            }

a.maillink {
         color: #6B6854;
         font-size: 14px;
         font-weight: bold;
         text-decoration: none;
            }

a:hover.maillink {
         color: #7F0A5F;
         font-size: 14px;
         font-weight: bold;
         text-decoration: none;
         }

a.navitext {
       background:url(bilder/arrow-normal.gif) 0 50% no-repeat #F6F4E4;
       color:#4C4B43;
       font:13px Arial, Helvetica, sans-serif;
       font-weight:bold;
       padding:0 0 0 22px;
       text-decoration:none;
                  }

a.navitext:hover {
       background:url(bilder/arrow-normal.gif) 0 50% no-repeat #F6F4E4;
       color:#7F0A5F;
       text-decoration:none;
                       }

/*.gallerycontainer {position: relative; height: 300px;}
.thumbnail img {border: 1px solid white; margin: 0 5px 5px 0;}
.thumbnail:hover {background-color: transparent;}
.thumbnail:hover img {border: 1px solid blue;}
.thumbnail span {
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;}
.thumbnail span img {border-width: 0; padding: 2px;}
thumbnail:hover span {visibility: visible; top: 50px; left: 30px; z-index: 50;}*/