@import url(accessibility.css);
@import url(navi.css);
@import url(unternavi.css);

/*  Global reset all Elements (margin/ padding  */
/*****************
browsers interpret margin and padding a little differently, 
we'll remove all default padding and margins and
set them later on
******************/
* {
margin:0;
padding:0;
}

/*
Set initial font styles
*/
body {
   text-align: left;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 75.01%;
   line-height: 1em;
color: #6B7457;
}

/*

set font size for all divs,
this overrides some body rules
*/
div {
   font-size: 1em;
}

/*
if img is inside "a" it would have 
borders, we don't want that
*/
img {
   border: 0;
margin:0;
padding:0;
}

/*****************
Styleswitcher 
*****************/

#versteckt {
        display:none;
        }

/*****************
basic layout 
*****************/

body.home div#main{
padding-top: 256px;   
}

body.unsere-schule div#main{
padding-top: 52px;   
}

body.unser-schulalltag div#main{
padding-top: 80px;   
}

body.aktuelles-und-veranstaltungen div#main{
padding-top: 104px;   
}

body.bildergalerie div#main{
padding-top: 135px;   
}

body.unser-trager div#main{
padding-top: 165px;   
}

body.partner-freunde-forderer div#main{
padding-top: 195px;   
}

body.kontakt div#main{
padding-top: 225px;   
}

body.impressum div#main{
padding-top: 255px;   
}

/*** Hintergrund nach body Klasse ***/

body.home div#pagewrapper{
   background: #fff ;
margin-top: 100px;   
}

body.unser-schulalltag div#pagewrapper{
   background: #fff url(../uploads/images/hg_unserschulalltag.jpg) top left no-repeat;
padding: 100px 0 0 0;   
}

body.unsere-schule div#pagewrapper{
   background: #fff url(../uploads/images/hg_unsereschule.jpg) top left no-repeat;
padding: 100px 0 0 0;   
}

body.aktuelles-und-veranstaltungen div#pagewrapper{
   background: #fff url(../uploads/images/hg_aktuelles.jpg) top left no-repeat;
padding: 100px 0 0 0;   
}

body.bildergalerie div#pagewrapper{
   background: #fff url(../uploads/images/hg_bilder.jpg) top left no-repeat;
padding: 100px 0 0 0;   
}

body.unser-trager div#pagewrapper{
   background: #fff url(../uploads/images/hg_unsertraeger.jpg) top left no-repeat;
padding: 100px 0 0 0;   
}

body.partner-freunde-forderer div#pagewrapper{
   background: #fff url(../uploads/images/hg_partner.jpg) top left no-repeat;
padding: 100px 0 0 0;   
}

body.kontakt div#pagewrapper{
   background: #fff url(../uploads/images/hg_kontakt.jpg) top left no-repeat;
padding: 100px 0 0 0;   
}

body.impressum div#pagewrapper{
   background: #fff url(../uploads/images/hg_impressum.jpg) top left no-repeat;
padding: 100px 0 0 0;   
}

/* center wrapper, min max width */
div#pagewrapper {
   border: 0px solid black;
   margin: 0 0 0 2px;       /* this centers wrapper */
   width:937px;
}


/*** header ***
we will hide text and replace it with a image
we need to assign a height for it so that the image wont cut off
*/
div#header{ 
   position:relative;      
}

/*** Inhaltsbereich ***/

div#content {
margin: 0 auto 2em 0;
border:0px solid transparent;   /* some air above and under menu and content */
position:relative;
width:937px;
height:auto;
}

div#sidebar {
position:absolute;        /* set sidebar on the left side. Change to right to float it right instead. */
   width: 273px;     /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX IE double margin bug */
left: 0;
border:0px solid #000;
margin:0;
padding:0;
top:0;
}

/* Navigation */   
div.hauptnavi ul{
list-style:none;
width:273px;
margin:0;
padding:0;
display:inline;
}

div.hauptnavi ul li{
list-style-type:none;
margin:0;
padding:0; 
width:273px;
display:block; 
}

body.home div.hauptnavi ul li{
width:776px; 
}

div.hauptnavi ul ul{
margin: .4em 0 2em 0;
border:0px solid #e00;
display:block;
}

div.hauptnavi ul ul li{
clear:both;display:inline;width:273px;
}

div.traeger {
width:273px;
}

div.traeger img{
padding:2em 0 0 40px!important;
}

/*** Metanavi ***/

div#metanavi {
   margin: -65px 0 0 0;
float:right;
border:0px solid #e00;
position:absolute;
right:0;   
z-index:1000;
}

div#metanavi ul{
list-style:none;
margin:0;
padding:0;
}

div#metanavi ul li{
list-style-type:none;
margin:0 .25em 0 1em;
padding:0;
display:block;
}

div#metanavi ul li a{
text-decoration:none;
border:none;
}

/*** Inhaltsbereich ***/

div#main {
   margin-left: 290px; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
margin-top: 0;/* and some air on the right */
   margin-right: 0;/* and some air on the right */
border:0px solid #e00;
position:relative;
}

/*
default link styles
*/
/* set all links to have underline and bluish color */
div#main a,
div#main a:link 
div#main a:active {
   text-decoration: none;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
   background-color: inherit;
   color: #D58634; 
}

div#main a:visited {
   text-decoration: none;
   background-color: inherit;
  color: #D58634;                /* a different color can be used for visited links */
}


/* remove underline on hover and change color */
div#main a:hover {
   text-decoration: none;
  background-color: inherit;
   color: #6B7457;
}

/*** Footer ***/

div#footer {
   clear: both;       /* keep footer below content and menu */
   color: #1B2743;
height:1%;
}

div#footer p {
   font-size: 0.8em;
   padding: 1em 1.5em 1.5em 267px; /* some air for footer */
   margin:0 0 0 0.5em;       
   text-align: left;  /* centered text */
}

/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
   height: 1px;
   padding: 0;
   border-bottom: 1px dotted #D58634;
   margin: 0 0 1em 0;
clear:both;
}

/* relational links under content */
div.left49 {
  width: 49%; /* 50% for both left and right might lead to rounding error on some browser */
padding:0 0 0 .5em;
}

div.left49 a img{
  margin: 0 .5em 0 0;
}

div.right49 {
  float: right;
  width: 49%;
  text-align: right;
}


div.right49 a:link 
{
   text-decoration: none;
   color: #D58634!important; 
}

div.right49 a:visited {
   text-decoration: none;
  color: #D58634;     
}

/* change color */
div.right49 a:hover, div.right49 a:active  {
   text-decoration: none;
   color: #739EDB;
}


/********************
CONTENT STYLING
*********************/

/* HEADINGS */
div#content h1 {
   font-size: 2em; /* font size for h1 */
   line-height: 1em;
   margin: 0;
}

div#content h2 {
	color:#4E5540;
	font-size: 1em; 
	text-align: left; 
/* some air around the text */
	padding: 1px 0 1px .5em;
/* set borders around header */
	border-bottom: 1px dotted #D58634; 
        height:1.5em;
        line-height: 1.5em;
/* and some air under the border */
        margin: 0 0 1em 0;
clear:both;
font-weight:normal;
}

div#main h3 {
   font-size: 1em; /* font size for h3 */
   line-height: 1.2em;
   margin: 0 0 1em .5em;
color:#D58634;
font-weight:normal;
width:410px;
}

/* END HEADINGS */

/* TEXT */

div.block#text{
   margin: 0 0 0 0;
width:410px;
float:left;
   display: inline;
}

div.block{
margin: 0 0 0 0;
padding:0;
border:0px solid #e00;
}

div.block#bild{
float:right;
margin: 0 0 0 0;
background:url(../uploads/images/bild_hg_oben.gif) top right no-repeat;
width:160px;
}

div.block#bild img{
margin: 0 0 1em 0;
padding:10px 0 10px 0;
background:url(../uploads/images/bild_hg_unten.gif) bottom right no-repeat;
width:160px;
}

div.liste{
margin: 0 0 0 487px;
width:160px;
}

*+ html div.liste{
margin: 0 0 0 487px;
width:160px;
}

* html div.liste{
margin: 0 0 0 467px;
width:160px;
}

div.liste .image{
margin: 0 0 0 0;
background:url(../uploads/images/bild_hg_oben.gif) top right no-repeat;
width:160px;
}

div.liste .image img{
margin: 0 0 .5em 0;
padding:10px 0 10px 0;
background:url(uploads/images/bild_hg_unten.gif) bottom right no-repeat;
}

div.break{clear:both;}

p {
   font-size: 1em;
   margin: 0 0 1em 0; /* some air around p elements */
   line-height: 1.3em;
   padding: 0 0 0 .5em;
}

div.block#text span{
   font-size: .9em;
   margin: 0 0 1em 0; /* some air around p elements */
   line-height: 1.2em;
   padding: 0 0 0 .5em;
font-style:italic;
}

p a:link, p a:visited{
   text-decoration:none;
color:#D58634;
}

p a:hover, p a:active{
   text-decoration:underline!important;
color: #739EDB;
}

blockquote {
   border-left: 10px solid #ddd;
   margin-left: 10px;
}
strong, b {
/* explicit setting for these */
   font-weight: bold;
color:#D58634;
}
em, i {
/* explicit setting for these */
  font-size: .9em;
font-style:italic;
line-height:1.2em;
}

/* Wrapping text in <code> tags. Makes CSS not validate */
code, pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
 font-family: "Courier New", Courier, monospace;
 font-size: 1em;
}

pre {
   border: 1px solid #000;  /* black border for pre blocks */
   background-color: #ddd;
   margin: 0 1em 1em 1em;
   padding: 0.5em;
   line-height: 1.5em;
   font-size: 90%;
}

/* Separating the divs on the template explanation page, with some bottom-border */
div.templatecode {
  margin: 0 0 2.5em;
}

/* END TEXT */

/* LISTS */
/* lists in content need some margins to look nice */
div#main ul,
div#main ol,
div#main dl {
   font-size: 1.0em;
   line-height: 1.4em;
   margin: 0 0 1.5em 0;
}

div#main ul li,
div#main ol li {
   margin: 0 0 0.25em 0.5em;
}

/* definition lists topics on bold */
div#main dl dt {
   font-weight: bold;
   margin: 0 0 0 1em;
}
div#main dl dd {
   margin: 0 0 1em 1em;
}

div#main dl {
  margin-bottom: 2em;
  padding-bottom: 1em;
  border-bottom: 1px solid #c0c0c0;
}

table {
  width:390px;
height:auto!important;
margin:0 0 1em .5em;
}

td {
  vertical-align:top;
padding: 0 .5em 1em 0;
}
/* END LISTS */