/* colors - blue
44% = 3C66C1
54% = 6699CC
64% = 336699
74% = 95B4FF
84% = 003366
89% = C0DDFF
94% = 99CCFF
*/


/* general def */

html {
height: 100%;

}

body {
background-image: url(../../2010/img/background.gif);
background-position: left top;
background-repeat: repeat;
text-align:center;
height: 100%;


}


* {
border: 0;
margin: 0;
padding: 0;
color: #000000;
font-family: verdana, arial, sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-align: left;
vertical-align: top;

}

/* links */

a {
text-decoration: underline;
}
a:hover {
color: #3C66C1;
}
a:active {
}

a:link { color:#3C66C1; text-decoration:none }
a:visited { color:#3C66C1;  text-decoration:none; }
a:hover { color:#000000; text-decoration:none;}
a:active { color:#000000; text-decoration:none; }


/* wrapper */

#wrapper {
position: relative;
width: 970px;
margin: auto;

}

/* head */



#logo {
background-image: url(../../2010/img/jugendmusik_pratteln.gif);
background-position: left top;
background-repeat: no-repeat;
margin: auto;
position: absolute;
left: 0px;
top: 77px;
height: 703px;
width: 70px;
}



#navigation {
background-position: left top;
background-color: white;
background-repeat: no-repeat;
margin: auto;
position: absolute;
left: 70px;
top: 10px;
width: 900px;
height: 52px;
}


#content {
background-color: white;
margin:auto;
padding: 20px;
position: absolute;
left: 70px;
top: 77px;
width: 860px;
min-height: 100%;
}

#footer {
position: relative;
height: 50px;
background-color: red;
margin-top: 20px;
}

/* NAVIGATION  http://www.cssnewbie.com/horizontal-dropdown-menus/  */

/* These styles create the dropdown menus. */
#navbar {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   margin: 0;
   padding: 0;
   float:left;
}

#navbar li {
   list-style: none;
   float: left;
   padding: 2px 0px 0px 2px; }

#navbar li a {
   display: block;
   padding: 3px 13px;
   text-decoration: none;
   color: #3C66C1; }

#navbar li a:hover {
   color: #ffffff;
   background-color: #6699CC;  }

#navbar li ul {
   display: none;  }

#navbar li:hover ul, #navbar li.hover ul {
   position: absolute;
   display: inline;
   width: 100%;
   margin: 0;
   padding: 0; }

#navbar li:hover li, #navbar li.hover li {
   float: left; }

#navbar li:hover li a, #navbar li.hover li a {
   color: #000; }

#navbar li li a:hover {
   color: #ffffff;
   background-color: #6699CC;   }


/* INDEX PHP */

#shuffle_pic {
margin: 0;
position: relative;
width: 200px;
height: 100px;
border-top-style:none;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:none;
border-color:#6699CC;
border-width:1px;
float: left;
}

#welcome {
position: relative;
top:0px;
margin-left: 200px;
padding-left: 20px;
border-bottom-style:solid;
border-color:#6699CC;
border-width:1px;
height: 100px;
width: 630px;
}

#index_wrap{
top: 0px;
margin: 0px;
padding: 0px;
position: relative;
width: 100%;
height: 100%;

}



#l_col {
margin-right: 0px;
padding-right: 0px;
position: relative;
width: 200px;
height: 100%;
border-right-style:solid;
border-top-style:none;
border-bottom-style:none;
border-left-style:none;
border-color:#6699CC;
border-width:1px;
float:left;
}

#l_col_title {
background-color: #336699;
margin-top:15px;
padding-top: 2px;
padding-left: 10px;
position: relative;
width: 180px;
height: 18px;
color: white;
}

#l_col_content {
margin-top:6px;
padding-top: 2px;
padding-left: 10px;
position: relative;
width: 180px;
color: black;
}

#l_col_bday {
line-height:180%
}

#r_col {
position: relative;
margin-left:200px;
padding-top: 15px;
padding-left: 20px;
width: 620px;
height: 100%;

}

#r_col_quote {
background-color: #99CCFF;

margin-bottom:30px;
padding-top: 2px;
padding-left: 10px;
position: relative;
width: 620px;
height: 40px;
color: #3C66C1;
font-style: italic;
}

#r_col_title {
background-color: #6699CC;
margin-top:15px;
padding-top: 2px;
padding-left: 10px;
position: relative;
width: 620px;
height: 18px;
color: white;
}

#r_col_content {
margin-top:6px;
padding-top: 2px;
padding-left: 10px;
position: relative;
width: 620px;
color: black;
margin-bottom:30px;
}

/* STANDARD PAGES */

#title{
margin: auto;
position: relative;
padding-top: 5px;
padding-left: 40px;
margin-bottom: 15px;
width: 840px;
height: 30px;
color:#003366;
font-size:24px;
}


#l_content{
position: relative;
left: 40px;
top: 0px;
width: 630px;
min-height: 100%;
float:left;
}

#l_news_title{
background-color: #6699CC;
padding-top: 2px;
padding-left: 10px;
position: relative;
width: 630px;
height: 18px;
color: white;
float:left;
}

#l_news_author{
padding-right: 20px;
position: relative;
height: 12px;
color: #99CCFF;
float: right;
}

#l_news_text{
padding-left: 10px;
position: relative;
width: 630px;
color: black;
float: left;

}

#r_content{
position: relative;
padding-left:35px;
width: 120px;
border-top-style:none;
border-right-style:none;
border-bottom-style:none;
border-left-style:solid;
border-color:#6699CC;
border-width:1px;
float: right;
}

p.quicklink {
color: #003366;
font-weight: bold;

}

/* KORPS */

.instruments {
background-color: #99CCFF;
}


<!-- body { font-family:Verdana,Arial; color:#000000; font-size:12px; font-weight:normal; text-decoration:none; line-height:1.4em;}
-->
<!--
table { font-family:Verdana,Arial; color:#000000; font-size:12px; font-weight:normal; text-decoration:none; line-height:1.4em;}
td { vertical-align:top; text-align:left; }




.events1 { padding-top:4px; padding-left:20px; }
.events11 { padding-top:2px; padding-left:24px; padding-right:30px; padding-bottom:6px; }
.events2 { padding-top:4px; padding-left:36px; }
.events21 { padding-top:5px; padding-left:40px; padding-right:30px; padding-bottom:6px; }
.events3 { padding-top:4px; padding-left:46px; }
.events31 { padding-top:5px; padding-left:50px; padding-right:30px; padding-bottom:6px; }
.events32 { padding-bottom:8px; }
.events33 { padding-bottom:8px; text-align:right; }
.events4 { padding-top:4px; padding-left:52px; }
.events41 { padding-top:5px; padding-left:54px; padding-right:30px; padding-bottom:6px; }
.events5 { padding-top:4px; padding-left:72px; }
.events51 { padding-top:5px; padding-left:74px; padding-right:30px; padding-bottom:6px; }


.news1 { padding-top:4px; }

.quicklinks { padding-top:4px; padding-left:8px; color:#ffffff; background-color:#B00000; }


.liste1 { padding-top:4px; line-height:1.6em; }


.titel1 { font-family:Verdana,Arial; color:#000000; font-size:18px; }
.titel2 { font-family:Verdana,Arial; color:#000000; font-size:14px; font-weight:bold; }
.titel3 { font-family:Verdana,Arial; color:#000000; font-size:14px; }
.titel4 { font-family:Verdana,Arial; color:#820000; font-size:14px; font-weight:bold; }
.titel5 { font-family:Verdana,Arial; color:#820000; font-size:12px;  font-weight:bold; }


.spalte1 { padding-left:40px; }

.titelzeile { padding-top:20px; padding-bottom:20px; }

.korps { background-color:#FFEBDB; }


.rechts { text-align:right; font-size:10px; font-style:italic; }
.links { text-align:left; font-size:10px; font-style:italic; }

.waehlen { padding-left:20px; background-color:#FFEBDB; }

.spruch { line-height:1.8em; }

.strich { padding-top:10px; }

.gb { line-height:1.8em; }


.anlaesse_line { height:12px }
.anlaesse_month { padding-left:40px; width:85px; }
.anlaesse_weekday { width:25px; padding-right:10px; }
.anlaesse_date { width:40px; padding-right:20px; }
.anlaesse_time { width:40px; padding-right:20px; }
.anlaesse_name { width:260px; padding-right:20px; }
.anlaesse_place { width:200px; padding-right:40px; }

-->
