/**************************************

     »»» CSS by heger@derheger.de

**************************************/

html
{overflow-y: scroll;}

body
{margin: 0;
 padding: 0 0 15px 0;
 text-align: center;
 background: url(../images/bg.gif);}

div.head
{background: #ffffff;
 border-top: 3px solid #f0f0f0;}

div.width
{position: relative;
 margin: 0 auto;
 width: 700px;
 height: 100px;}

a.logo
{display: block;
 position: absolute;
 left: 10px;
 top: 24px;
 width: 193px;
 height: 40px;
 background: url(../images/hdkj.gif) no-repeat;}

div.main
{margin: 0 auto;
 padding: 0 0 45px 0;
 width: 700px;
 background: #ffffff;
 border-bottom: 1px solid #f0f0f0;
 border-left: 1px solid #f6f6f6;
 border-right: 1px solid #f6f6f6;}

.clear
{clear: both;}

.italic
{font-style: italic;}

.bold
{font-weight: bold;}

 
/*    Banner
************************************/

div.bannercontainer
{height: 108px;
 background: #f8f8f8 url(../images/banner_bg.gif) repeat-x;}

div.banner
{position: relative;
 width: 700px;
 height: 108px;
 margin: auto;
 background: #eeeeee url(../images/banner.jpg) no-repeat;}
 
div.banner p
{margin: 0;
padding: 0;
 position: absolute;
 top: 46px;
 right: 45px;
 font: 1.05em verdana;
 font-weight: normal;
 letter-spacing: 4px;
 color: #ffffff;}


/*    Navi
************************************/

ul.navi
{margin: 0;
 padding: 0;
 position: absolute;
 top: -3px;
 right: 0;
 border: 0px solid #000000;
 list-style: none;}

ul.navi li
{display: inline;}

ul.navi a
{float: left;
 padding: 60px 13px 0 12px;
 font: 0.75em verdana;
 font-weight: bold;
 text-decoration: none;
 color: #aaaaaa;
 border-top: 3px solid #f0f0f0;
 border-right: 1px solid #dddddd;}

ul.navi a.hdkj {padding: 60px 18px 0 17px; background: url(../images/navi.jpg) 15px 11px no-repeat;}
ul.navi li.aktiv a.hdkj {background: url(../images/navi.jpg) 14px -58px no-repeat;}


ul.navi a.kjg {padding: 60px 24px 0 23px; background: url(../images/navi.jpg) -52px 11px no-repeat;}
ul.navi li.aktiv a.kjg {background: url(../images/navi.jpg) -53px -58px no-repeat;}

ul.navi a.minis {background: url(../images/navi.jpg) -121px 11px no-repeat;}
ul.navi li.aktiv a.minis {background: url(../images/navi.jpg) -122px -58px no-repeat;}

ul.navi a.kontakt {background: url(../images/navi.jpg) -230px 11px no-repeat;}
ul.navi li.aktiv a.kontakt {background: url(../images/navi.jpg) -231px -58px no-repeat;}

ul.navi a.guest {border-right: 0; padding: 60px 2px 0 12px; background: url(../images/navi.jpg) -309px 11px no-repeat;}
ul.navi li.aktiv a.guest {background: url(../images/navi.jpg) -310px -58px no-repeat;}

ul.navi a:hover
{color: #cc8888;
 border-top: 3px solid #dddddd;}

ul.navi li.aktiv a, ul.navi li.aktiv a:hover
{color: #cc6666;
 border-top: 3px solid #cc3333;}


/*    Subnavi
************************************/

div.subnavi
{position: relative;
 top: 20px;
 left: 6px;
 float: left;
 width: 160px;
 padding: 0 0 20px 0;
 text-align: left;
 background: url(http://www.hdkj.de/images/dot.gif) 158px 0 repeat-y;}

div.subnavi span
{margin: 0 10px 0 4px;
 color: #cccccc;
 font: 0.8em verdana;}

div.subnavi a 
{text-decoration: none;
 color: #999999;
 font: 0.7em verdana;}

div.subnavi a:hover
{color: #cc3333;}

div.subnavi a.aktiv
{color: #cc3333;}

div.subnavi span.aktiv
{color: #cc3333;}


/*   Content
************************************/

div.start
{position: relative; border: 1px solid #ffffff; 
 top: 20px;
 text-align: justify;
 color: #666666;
 font: 0.7em verdana;
 background: url(http://www.hdkj.de/images/dot2.gif) 268px repeat-y;}

div.left
{position: relative;
 float: left;
 width: 270px;}

div.willkommen
{position: relative;
 left: 20px;
 height: 15px; 
 width: 95px;
 background: url(http://Www.hdkj.de/images/willkommen.gif) no-repeat;}

div.left p
{position: relative;
 left: 20px;
 margin: 10px 0 20px;
 width: 230px;}

div.left p.quote
{left: 50px;
 width: 200px;
 font-style:italic;}

div.left p.quote span
{position: absolute;
 left: -29px;
 top: 3px;
 display: block;
 width: 22px;
 height: 16px;
 background: url(http://www.hdkj.de/images/gaense.gif);}

div.center
{position: relative;
 float: left;
 width: 210px;}

a.advent
{position: relative;
 left: 23px; 
 top: 15px;
 display: block;
 width: 170px;
 height: 165px;
 background: url(http://www.hdkj.de/images/advent.gif);}

a.hdkj2
{position: relative;
 display: block;
 left: 20px;
 height: 11px; 
 width: 35px;
 background: url(http://Www.hdkj.de/images/willkommen.gif) 0 -15px no-repeat;}

a.kjg2
{position: relative;
 left: 20px;
 display: block;
 height: 13px; 
 width: 25px;
 background: url(http://Www.hdkj.de/images/willkommen.gif) 0 -30px no-repeat;}

a.minis2
{position: relative;
 left: 20px;
 display: block;
 height: 13px; 
 width: 85px;
 background: url(http://Www.hdkj.de/images/willkommen.gif) 0 -43px no-repeat;}

div.center p
{position: relative;
 left: 20px;
 width: 180px;
 margin: 2px 0 18px;}

div.right
{position: relative;
 float: right;
 width: 210px;}

div.news
{position: relative;
 left: 20px; 
 width: 152px;
 overflow: hidden;
 padding: 20px 9px 9px;
 background: #fafafa url(http://Www.hdkj.de/images/willkommen.gif) 9px -59px no-repeat;}

h3.news
{margin: 0;
 padding: 10px 0;}

p.date
{position: relative;
 bottom: 3px;
 font: 0.8em verdana;}
 
div.news p.date
{margin: 2px 0 0;}

div.news p
{text-align: left;
 margin: 2px 0 10px;}

div.content
{position: relative;
 top: 22px;
 right: 40px;
 float: right;
 width: 450px;
 text-align: justify;
 color: #666666;
 font: 0.7em verdana;}

div.content p
{margin: 0 0 15px 0;}

.center
{text-align: center;}

.iltaic
{font-style: italic}

.bold
{font-weight: bold;}

p.anmerkung1
{position: relative;
 left: 40px;
 margin: 50px 0 0 0;}

p.anmerkung2
{position: relative;
 right: 30px;
 margin: 50px 0 0 0;}

p.news
{bottom: 10px;}

p.datum
{bottom: 5px;
 font: 0.8em verdana;}

p.lr
{padding: 10px 0 30px 0;}

div.content a, div.footer a, div.impressum a, div.left a, div.news a
{text-decoration: none;
 font-style: italic;
 color: #663333;}

div.content a:hover, div.footer a:hover, div.impressum a:hover, div.left a:hover, div.news a:hover
{color: #cc3333;
 border-bottom: 1px dashed #000000;}

div.content ul
{list-style: square;}

h1
{position: relative;
 left: 180px;
 width: 270px;
 margin: 0 0 15px 0;
 padding: 0 3px 5px;
 border-bottom: 1px solid #dddddd;
 text-align: right;
 font-size: 1.1em;
 letter-spacing: 2px;
 color: #cc6666}

h1.kontakt
{margin: 0 0 30px 0;}

h1.kontakt span.grau
{font-style: italic;color: #666666;}

div.start h1
{left: 345px;}

h2
{position: relative;
 top: 8px;
 margin: 0 0 15px 0;
 font-weight: bold;
 font-size: 1em;
 color: #cc6666;}

h2.news
{font-size: 1.1em;}

h3
{position: relative;
 top: 8px;
 margin: 0 0 15px 0;
 font-weight: bold;
 font-size: 1em;
 color: #666666;}

acronym
{cursor: help;
 font-style: italic;}

acronym.headline
{border: 0;
 font-style: normal;}

span.red
{color: #cc3333;}

table.termine
{position: relative;
 left: 15px;
 width: 420px;
 margin: 10px 0 0 0;
 border-collapse: collapse;}

table.termine td
{padding: 6px 5px 15px;
 vertical-align: top;}

table.termine td span
{font-weight: bold;
 padding: 0 0 10px 0;}

td.datum
{width: 90px;}

td.zeit
{width: 60px;}

tr.grau
{background: #f9f9f9;}

img.grustu
{position: relative;
 right: 1px;
 margin: 0 0 30px 0;
 border: 1px solid #dddddd;}

img.lr
{float: left;
 border: 1px solid #dddddd;}

img.lr2
{float: right;
 border: 1px solid #dddddd;}

table.lr
{position: relative;
 left: 35px;
 width: 310px;
 text-align: left;}

table.lr2
{ width: 310px;
 text-align: left;}

table.lr td.bold, table.lr2 td.bold
{width: 110px;
 font-weight: bold;}

table.lr td, table.lr2 td
{vertical-align: top;
 padding: 0 0 8px 0;}

table.links
{margin: 0 0 10px 0;}

td.link
{width: 200px;}

table.kjg td
{padding: 0 0 10px 0;}

td.month
{padding: 0;
 width: 100px;
 vertical-align: top;}

td ul
{margin: 0;
 padding: 0 0 0 20px;
 text-align: left;}

p.struktur
{position: relative;
 bottom: 5px;
 padding: 0 0 5px 0;}

img.struktur
{float: left;
 padding: 0 20px 60px 0}

img.kjg-weiher
{float: left;
 padding: 10px 10px 5px 0;}

img.thomas-morus
{float: left;
 padding: 2px 15px 0 0;}

img.float
{float: left;
 padding: 0 10px 0 0;}

img.float_right
{float: right;
 padding: 0 0 0 10px;}
 
div.dot
{width: 440px;
 margin: 40px 0;
 border-top: 1px solid #eeeeee;}

div.content p.center a.dienstplan:hover
{border: 0;}

/* Gästebuch */

div.name
{position: relative;
 left: 45px;
 width: 350px;
 height: 17px;
 margin: 0 0 7px 0;
 background: #f6f6f6;
 border-bottom: 1px solid #eeeeee;}

span.nummer
{position: absolute;
 top: -6px;
 left: 0;
 font: 2.05em verdana;
 font-weight: 900;
 color: #e6e6e6}

span.name a
{position: relative;
 top: 3px;
 left: 55px;
 font-style: normal;
 text-decoration: none;}

span.name a:hover
{border: 0;
 color: #cc3333;}

span.name a.page
{left: 65px;}

span.name a.page img
{border: 0;}

span.datum
{position: absolute;
 top: 3px;
 right: 6px;}

div.eintrag
{position: relative;
 left: 45px;
 width: 330px;
 margin: 0 0 30px 0;
 padding: 10px;
 background: #f9f9f9 url(../images/dot.gif) repeat-x;
 line-height: 15px;}

div.eintrag img
{position: relative;
 top: 3px;
 margin: -4px 0 0;}
 
p.fehler_book
{position: relative; 
 left: 100px;
 padding: 0 0 20px 0;}

/* Formulare */

p.eintrag
{position: relative;
 left: 95px;}

p.kontakt
{position: relative;
 left: 20px;}

p.eintrag input, p.kontakt input
{width: 250px;
 height: 17px;
 margin: 3px 0 0 0;
 padding: 0 0 0 5px;
 border: 1px solid #dddddd;
 background: #f2f2f2 url(../images/feld.gif) repeat-x;}

p.eintrag select, p.kontakt select
{margin: 3px 0 0 0;}

p.eintrag textarea, p.kontakt textarea
{width: 250px;
 height: 70px;
 margin: 3px 0 0 0;
 padding: 0 0 0 5px;
 overflow: auto;
 border: 1px solid #dddddd;
 font: 1em verdana;
 background: #ffffff url(../images/feld.gif) repeat-x;}

p.eintrag input.button, p.kontakt input.button
{width: 100px;
 height: 22px;
 border: 1px solid #dddddd;
 background: url(../images/button.gif) repeat-x;
 color: #666666;
 cursor: pointer;}

p.fehler_kontakt
{position: relative;
 left: 17px;
 padding: 0 0 20px 0;}

/* paging */

div.paging
{text-align: center;} 

/* Impressum */

div.impressum
{margin: auto;
 padding: 20px 0 0;
 width: 530px;
 text-align: justify;
 color: #666666;
 font: 0.7em verdana;}

div.impressum h1
{position: relative;
 left: 300px;
 width: 270px;
 margin: 0 0 15px 0;
 padding: 0 3px 5px;
 border-bottom: 1px solid #dddddd;
 text-align: right;
 font-size: 1.1em;
 letter-spacing: 2px;
 color: #cc6666}


/*   Gallery
************************************/

img
{border: 0;}

div.content ul.pics
{width: 500px; 
 margin: 0 -40px 0 0;
 padding: 15px 0 0;
 list-style: none;}

div.content ul.pics li
{float: left;
 margin: 0 20px 20px 0;
 border: 1px solid #dddddd;}

div.content ul.pics a
{display: block;
 width: 128px;
 height: 96px;
 overflow: hidden;
 border: 5px solid #f2f2f2;}

div.content ul.pics a:hover
{border: 5px solid #e9e9e9;}

div.pic
{position: relative;
 right: 35px;
 width: 500px;
 margin: 0 -80px 0 0;
 text-align: center;}

div.pic a:hover
{border: 0;}

div.border
{margin: auto;
 border: 1px solid #dddddd;}

div.border img
{border: 5px solid #f2f2f2;}

div.border a:hover
{border: 0;}

div.border a:hover img
{border: 5px solid #eeeeee;}

div.next
{margin: auto;
 text-align: right;
 color: #999999}

div.next span
{float: left;}

div.paging
{clear: both;
 text-align: center;
 font: 1em verdana;}

div.paging a.aktiv
{font-weight: bold;}


/*   Footer
************************************/

div.footer
{position: relative;
 top: 15px;
 margin: 0 auto;
 width: 700px;
 height: 31px;
 background: #ffffff url(../images/dot.gif) repeat-x;
 border: solid #f6f6f6;
 border-width: 1px 0;
 text-align: left;
 color: #666666;
 font: 0.7em verdana;}

div.footer div
{position: relative;
 top: 10px;
 text-align: center;}