/*
********************************************************************************
CSS-Datei der Maria Ward-Schule, Mainz, Deutschland
URL: http://www.mws-mainz.de                   
Author: Ralph Pape                                                         
********************************************************************************

#00008B darkblue                      Schriftfarbe
#330099 leuchtendes darkblue 51,0,153 Blaues Kreuz, Ueberschriften, ...
#FFA500 orange            255,165,0   interne links
#4169E1 royalblue                     externe links
*/

/* === Standardvorgaben ===================================================== */
/* Idee: Alle Browser sollen von den gleichen Voraussetzungen ausgehen.       */
/* http://barrierefrei.e-workers.de/workshops/tricks/texte/cross_fontsize.txt */

* { 
   margin: 0;
   padding: 0; 
   iborder: 0;
}
body {
   font-family: Verdana, Helvetica, Arial, sans-serif;
   font-size: 100.01%; /* Verhindert IE-Bug, d.h. font-size % verwenden. */
   /* Ohne Einheit, um vererbungsbedingte Ueberlappungen zu vermeiden! */
   line-height: 1.3;  
}
h1 { font-size: 150%; margin: 15px 0; }
h2 { font-size: 130%; margin: 15px 0; }
h3 { font-size: 115%; margin: 15px 0; }
h4 { font-size: 100%; margin: 15px 0; }
p  { margin: 7px 0; }
blockquote { margin: 0 0 0 30px; }
ul, ol { margin: 0 0 0 30px; }
li { list-style-type: square; }
li li { list-style-type: disc; }
li li li { list-style-type: circle; }
dl { }
dt { margin: 5px 0 0 0;}
dd { margin: 0 0 0 30px; }
th, td { padding: 2px }
hr { margin: 5px 0; }

/* === Eigene Anpassungen =================================================== */

/* ___ body ___ */
body {
   background: #f4f4f4 url(hintergrund-blau-grau-gestreift_190.gif) repeat-y;
   font-size: 85%;
}

/* ___ Schrift ___ */
body, th, td, div, h1, h2, h3, h4, h5, h6, blockquote, ul, li, p, dl, dt, dd {
   font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
   color: #00008B;   /* darkblue */
}

/* ___ Ueberschriften ___ */
h1 {
   color: #4169E1;   /* royalblue */ 
}
h2 {
   color: #330099;   /* leuchtender als darkblue */
   border: none;
   border-bottom: 2px solid #cccccc;
   
   /* MWS-Schriftzug als Hintergrundbild links neben Ueberschrift darstellen. */
   padding: 0 0 0 15px;
   background-image: url(mws-quer.gif);
   background-repeat: no-repeat;
   background-position: left bottom;
}
h3 { 
   padding-left: 5px;
   border-bottom: 1px solid #330099;
   border-left: 1px solid #330099;
}

/* ___ Links ___ */
/* Links immer in Reihenfolge a, a:link, a:visited, a:hover, a:active */
a {
   text-decoration: none;
} 
a:link, a:visited {
   color: orange;
} 
a:hover {
   text-decoration: underline overline;   
}
/*  Externe Links und Emails blau darstellen und ein Symbol voranstellen.   */
/*  http://barrierefrei.e-workers.de/workshops/tricks/texte/link_extern.txt */
a.ext, a.ext:link, a.ext:visited, a.ext:hover, a.ext:before, 
a.email, a.email:link, a.email:visited, a.email:hover, a.email:before {
   white-space: nowrap;
   color: #4169E1;            /* royalblue */
   padding-left: 15px;
   background: url(link-ext.gif) no-repeat left center;
   zoom: 1; /* Workaroung for Inline Wrap Bug of IE. */
}
a.email, a.email:link, a.email:visited, a.email:hover, a.email:before {
   background: url(email.gif) no-repeat left center;
}

/* ___ Bilder ___ */
img {
   border: 0;
}

/* ___ How To Clear Floats Without Structural Markup ___
   http://positioniseverything.net/easyclearing.html
   Just add a class of .clearfix to any element containing a float needing to 
   be cleared, plus any Guillotine-Bug-fixing block elements within the 
   container.
*/
.clearfix:after {
   content: "."; 
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* ___ header ___ */
#header {
   position: relative;
   left: 0;
   top: 0;
   width: 100%;
   background-color: #330099;   /* leuchtender als darkblue */
}
#header table {
   width: 100%;
}
#header td {
   padding: 0; /* Wichtig: eventuelle vorherige Definitionen aufheben. */
   text-align: center;
   vertical-align: middle;
}
#header .logo {
   background: #f4f4f4 url(logo-background.gif) repeat-y;
}
#header .header {
   width: 99%;
}
#header h1 {
   font-size: 190%;
   color: orange;
}
#header p {
   font-size: 90%;
   color: white;
}

/* ___ Content ___ */
#content {
   padding: 0 30px;
   margin: 1em 0 0 200px;
}
#content .tobottom {
   text-align: left; 
}
#content .totop {
   margin-top: 2em;
   text-align: right; 
}

/* ___ Breadcrumbs ___ */
#breadcrumbs {
   border-bottom: 1px solid silver;
   font-size: 80%;
   
   min-height: 15px;
   height: auto;  _height: 15px;  /* min-height-Hack for IE */
}

/* ___ Usernavigation ___ */
#user_nav {
   text-align: right;
   padding: 2px 30px;
   font-size: 80%;
}

/* ___ Footer ___ */
#footer {
   border-top: 1px solid silver;
}
#footer p {
   margin: 10px 0 0 0;
   text-align: center;
   font-size: 80%;
}
#footer_nav {
   text-align: center;
}
#print {
   float: right;
   margin: 10px 0 0 0;
}

/* ___ Menu / Navigation links ___ */
#nav {
   float: left;
   width: 190px;
   margin-top: 1em;
   color: white; 
}
#nav ul {
   margin: 0 0 20px 20px; 
}
#nav ul ul {
   margin: 5px 0 5px 15px; 
}
#nav ul ul ul {
   margin: 3px 0 3px 15px; 
}
#nav ul ul ul ul {
   margin: 3px 0 3px 15px; 
}
#nav p {
   margin: 0; /* Wichtig: eventuelle vorherige Definitionen aufheben. */
}
#nav a.default, #nav a.default:visited, #nav a.default:hover {
   color: white; 
}
#nav a.default:hover {
   color: orange;
}
#nav a.current, #nav a.current:visited {
   color: orange;
   font-weight: bold;
}
#nav ul li {
   color: silver;    /* Aufzaehlungszeichen in Silber */ 
   list-style-type: none;
   margin-top: 4px;
}
#nav ul li p {
   border-bottom: 1px solid silver;
}
#nav ul li li p {
   border: none;
}
#nav ul ul li {
   list-style-type: square;
   font-size: 90%;
}
#nav ul ul ul li {
   font-style: italic;
   list-style-type: disc;
}
#nav ul ul ul ul li {
   font-style: italic;
   list-style-type: none;
}
#nav ul li.current, #nav ul ul li.current, 
#nav ul ul ul li.current, #nav ul ul ul ul li.current {
   color: orange;
}

/* ___ Suche ___ */
div.search_box {
   margin-left: 20px;
}
iinput {
   border: 2px groove silver;
}
div.search_box input.search_string {
   width: 165px;
}
div.search_box input.search_submit {
   width: 170px;
}
.highlight {
   background-color: yellow;
}

/* ___ Sitemap ___ */
#sitemap ul {
   margin: 0 0 0 20px;
   padding: 5px 0 0 0;
   border-left: 2px dotted #330099;
}
#sitemap li {
   list-style-type: none;
   margin: 4px 0;
   text-align: right;
}
#sitemap a {
   float: left;
   padding: 0 10px;
   border-bottom: 1px solid #330099;
}
#sitemap span {
   color: silver;
   font-size: 80%;
}

/* ___ Aktuelles ___ */
div.aktuelles {
   background-color: floralwhite;
   border: 1px solid orange;
   border-right: 2px solid orange;
   border-bottom: 2px solid orange;
   padding: 10px;
   margin-bottom: 10px;
   
   min-height: 250px;
   height: auto;  _height: 250px;  /* min-height-Hack for IE */
}

div.aktuelles h1 {
   color: #00008B;   /* darkblue */
   font-size: 115%;
   margin-top: 0;
   border-bottom: 1px solid silver;
}
div.aktuelles img {
   border: 1px solid silver;
}

/* Drop Shadow. See: http://nontroppo.org/test/shadow.html
1. Use a holder DIV - can be positioned absolute/relative/floating.
2. Set the background of this DIV with the semi-transparent gif. 
   This becomes the shadow of the box.
3. Finally, use a relatively positioned 'content' DIV inside it with: 
   top:-10px; left:-10px; set in the CSS.
*/	 
.shadowbox {
   position: relative;
   left: 5px; 
   background: url(shadowdark.gif) repeat;
}
.shadowcontent, .aktuelles {
   position: relative;
   top: -5px; /* these two define the shadow 'offset'*/
   left: -5px; /*...*/
   padding: 10px; 
}

/* ___ Termine & SEB ___ */
table.termine {
   width: 98%;
   border: 1px solid silver;
   empty-cells: show; 
}
table.termine th {
   text-align: left;
   font-size: 80%;
   background-color: silver;
}
table.termine td {
   font-size: 80%;
   vertical-align: top;
   border-top: 1px solid silver;
   border-collapse: collapse;
   empty-cells: show;   
}