/* Start of CMSMS style sheet 'Accessibility and cross-browser tools' */
/* accessibility */

/* 
menu links accesskeys 
*/
span.accesskey {
   text-decoration:none;
}

/* 
accessibility divs are hidden by default 
text, screenreaders and such will show these 
*/
.accessibility, hr {
   position: absolute;
   top: -999em;
   left: -999em;
}

/* 
definition tags are also hidden 
these are also used for menu links    
*/
dfn {
   position: absolute;
   left: -1000px;
   top: -1000px;
   width: 0;
   height: 0;
   overflow: hidden;
   display: inline;
}
/* end accessibility */


/* wiki style external links */
/* external links will have "(external link)" text added, lets hide it */
a.external span {
  position: absolute;
  left: -5000px;
  width: 4000px;
}

/* make some room for the image */
a.external {
/* css shorthand rules, read: first top padding 0 then right padding 12px then bottom then right */
  padding: 0 12px 0 0;
}
/* colors for external links */
a.external:link {
  color: #18507C;
/* background image for the link to show wiki style arrow */
  background: url(images/cms/external.gif) no-repeat 100% 0;
}
a.external:visited {
  color: #18507C; /* a different color can be used for visited external links */

/* 
Set the last 0 to -100px to use that part of the external.gif image for different color for active links 
external.gif is actually 300px tall, we can use different positions of the image to simulate rollover image changes.
*/
  background: url(images/cms/external.gif) no-repeat 100% 0; 
}

a.external:hover {
  color: #18507C;
/* Set the last 0 to -200px to use that part of the external.gif image for different color on hover */
  background: url(images/cms/external.gif) no-repeat 100% 0; 
  background-color: #C3D4DF;
}
/* end wiki style external links */


/* clearing */
/* 
clearfix is a hack for divs that hold floated elements. it will force the holding div to span all the way down to last floated item.
We strongly recommend against using this as it is a hack and might not render correctly but it is included here for convenience.
Do not edit if you dont know what you are doing
*/
	.clearfix:after {
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
	}
	* html>body .clearfix {
		display: inline-block; 
		width: 100%;
	}
	
	* html .clearfix {
		/* Hides from IE-mac \*/
		height: 1%;
		/* End hide from IE-mac */
	}

/* end clearing */
/* End of 'Accessibility and cross-browser tools' */

/* Start of CMSMS style sheet 'montessori' */
/* Below:  All these are global styles applied to everything.  However, they can be overwritten later in the CSS */

* {margin: 0; padding: 0; border: 0; text-align: left; font-family:  Arial, sans-serif; font-size: 12px; line-height: 18px;color: white;  }


/* main nav */


/* Layout */

#container { /* the container contains all the divs and makes sure they are centrally aligned.  Note that IE uses the text-align: center; in the body to align everything centrally */
	margin: 0 auto;
	width: 980px;
	background: url('images/autumn/hdr2.jpg') no-repeat top right;
<div id="film"> <!--  logos on the left side -->
   <a href = "http://www.montessori-europe.com" target="_blank">
        test
    </a>
</div>
	}

#navarea { /* This div allows an area for the main navigation tabs */
              
  	           float: right;
                    text-align:right;
                   width: auto;  
	           margin-top: -14px;
                   margin-right: 0px;
} 
#navarea h2 span {
	display: none;
}
#lftcol h2 span {
	display: none;
}
#hdr {  /* header/banner area */
	width: 980px;
	height: 180px;  
        background-color:  transparent;
 }

/*
#film { position: relative;
            bottom: 20px;
            top: 530px;
            left: 250px; 
}*/

#lftcol {  /* left column showing the extra info on the left side of the main column */
	float: left;  
        left: 0px;
 	width: 220px;
        margin-top: 50px;
        padding:0px; 
	color: white;
        height: 400px;
        font-size: 11px;
	background-color: transparent;
        overflow:auto;
}

#lftbottom {  /* left bottoms showing the logos */
	float: left;  
        left: 0px;
 	width: 220px;
        margin: 0px;
        padding-top:10px; 
	color: white;
        top: 550px;
        height: 100px;
	background-color: transparent;
        overflow:hidden;
}


#maincol {  /* main column where the main text etc is located */
	float: right;   
	width: 750px; 
        min-height: 463px;
        height:auto !important;  /* für moderne Browser */
        height:463px;  /*für den IE bis 6*/       
	background: #1C44BC;
        margin-top:57px;
        color: #C5CEE7;
}

#bttmbar {  /* bottom bar houses the copyright information and the bottom navigation */
	/* margin-bottom: 10px; 
        padding-bottom: -2px; */
	float: right;
	width: 750px;
	height: 61px;
	background: url('images/autumn/bttm.gif') no-repeat #1C44BC; /* Adds the rounded corner image to the bottom */
	background-color: transparent;
	overflow: hidden
}

#bttmbar h2 span {
	display: none;
}

#bttmbar span#copyright {   /*styles for the copyright text */
	font-size: 9px;
	color: #6488F7;
        float: left;
        margin-left: 9px;
        margin-top: 5px;
}

/* Text styles */

/* Below is the style for the main site title */

#sitetitle { /* Styles for the main site title */
	position: relative;
	top: 12px;  /* shifts text into exact position */
	left: 292px;  /* shifts text into exact position */
	font-family: Comic Sans MS, Georgia, serif;
	font-size: 38px;
	line-height: 40px;
	font-weight: 100;  /* 100 is the thinnest font weight */
	color: #FF9933; /* nice light orange "autumn" type colour */
	letter-spacing: 0.085cm; /* spaces out the letters a bit */
        white-space:nowrap;
	}

#subtitle {  /* Styles for the sites subtitle */
	position: relative;
	top: 155px;  /* shifts text into exact position */
	left: 280px;  /* shifts text into exact position */
	font-family: Comic Sans MS, Georgia, serif;
	font-size: 16px;
	font-weight: normal;
	line-height: 18px;
	color: #FF9933;
	letter-spacing: 2px; /* spaces out the letters a bit */
        white-space:nowrap;
	}

#subtitle a {   /* Styles for any links in the sub title */
	font-size: 12px;
	font-weight: normal;
	line-height: 18px;
	color: #B2C2F4;
	letter-spacing: 2px; /* spaces out the letters a bit */
 	text-decoration: none;
	border-bottom: 1px dashed #496FE4;
}

#subtitle a:hover {   /* Styles for any links in the sub title, hover state */
	color: #FFF000;
	text-decoration: none;
	border-bottom: 1px dashed #FFF000;
	}


#maincol p    {     /* paragraph text in the main column */
                              color: #C5CEE7;
                              margin: 5px 40px 5px 94px; 
                              letter-spacing: 0px;
                              text-align:justify;
                            } 

#maincol table {     /* table in the main column */
                           color: #C5CEE7;
                           margin-left: 60px; 
                           letter-spacing: 0px; 
                           vertical-align: top;

                     }
#maincol table th { 
                     font-weight: 600;
                     }
#maincol table td { 
                     color: #C5CEE7;
                     }
#maincol h3 {
	 margin: 10px 10px 5px 65px;
         font-weight: 600;  
         font-family:  Arial;
        }

#maincol h1, #maincol h2 {    /* Styles for the main column headers */
	margin: 0px 10px 5px 65px;
        font-family: Comic Sans MS, Georgia, serif;
	font-size: 17px;
	font-weight: 100;
	line-height: 19px;
	color: #FF9933;
	letter-spacing: 1px
	 }  /* headings in the main column */

#maincol .date {    /* These are the styles for the blog dates */
	margin-left: 25px;
	font-size: 9px;
	color: #B2C2F4;
	letter-spacing: 1px
}

#maincol a:link, #maincol a:visited {   /* These are the styles for the Main column links */
	color: #B2C2F4;
	text-decoration: underline;
	text-align: left;
	/* padding-left: 11px;
	 background: url('images/autumn/linkarrow.gif')  no-repeat 0% 140% ; */
}

#maincol a:hover, #maincol a:active {   /* These are the styles for the Main column links */
	color: white;
	text-decoration: none;
	text-align: left;
	/* padding-left: 11px;
	background: url('images/autumn/linkarrow.gif')  no-repeat  0% -80% ; */
}

/* Normal lists */

#maincol ul {   /* styles main area unordered(bulleted) lists */
	margin: 0px 40px 15px 150px; 
	list-style: square;
}

#maincol li {  /* List items in the main column */
	color: #C5CEE7;
        text-align:justify;
	margin-left: 10px /* This margin acts as an indent for each list item.  Indenting the whole list doesn't work well in IE. */
}

#maincol ol {   /* styles main area ordered(numbered) lists */
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 0.7em;
  line-height: 1.5em;
  list-style-type:  decimal
 }

#maincol img { /* all images in the main column */
         border: 3px solid #6488F7;
}

#lftcol a:link, #lftcol a:visited {   /* These are the styles for the left column links */
	text-decoration: underline;
	text-align: left;
        /*
	text-decoration: underline;
	text-align: left;
	padding-left: 11px;
	color: #FFF;
	text-decoration: none;
	text-align: left;
	background: url('images/autumn/lftlinkarrow.gif') no-repeat 0% 140%;
        */
}

#lftcol a:hover, #lftcol a:active {    /* These are the styles for the left column links */
	color: white;
	text-decoration: none;
	text-align: left;
     /*	padding-left: 11px;
	color: #FFF000;
	text-decoration: none;
	text-align: left;
	background: url('images/autumn/lftlinkarrow.gif') no-repeat 0% -80%;
     */
}

.leftcolbox h1,h2,h3 {   /* Titles in the left column */
	font-family: Comic Sans MS, Verdana, Arial, sans-serif;
	margin: 0 15px 12px 15px;
	font-weight: 600;
	color: white;
	letter-spacing: 0;
	font-size: 11px;
	line-height: 14px;
}

/* Main Nav */

#nav   /* Main nav */
{
	float: right;
        width:600px;
	margin-top: 20px;
	white-space: nowrap;
}

#nav li  /* Main nav list items */
{
	font-size: 10px;
	float: left;
	list-style: none;
	line-height: 21px; /* height of the tab */
	text-align: center
}


/* Other styles */

img.imageright { /* images on the right side */
         margin: 10px 0px 10px 10px; 
         float: right;
      /*   border: 3px solid #6488F7; */
}

img.imageleft { /* images on the left side */
         margin: 10px 10px 10px 0px; 
         float: left;
       /*  border: 3px solid #6488F7; */
}
p.endfloat { /* End of floats */
        clear:both;
}


div.rule {  /* Rules - blowing leaves that separate blog items */
	margin: 0 0 20px 0;
	width: 650px;
	height: 40px;
	background: url('images/autumn/leafrule.gif');
	border: 0;
}

div.leftcolbox {  /* Use this to create one of the boxes in the left column */
	padding: 0 0 0px 0;
	margin: 15px;
	width: 170px;
	background: url('images/autumn/leftboxbottom.gif') no-repeat bottom #6488F7;  
        overflow:hidden;
	}

div.leftcolboxtop { /* This div adds the top rounded corners of the box.  The bottom is included in the leftcolbox div as the background image */
	height: 10px;
	width: 170px;
        overflow: hidden;
	background: url('images/autumn/leftboxtop.gif') no-repeat top;
        background-color: transparent;
}



.leftcolbox p {   /* text style for left col boxes */
	margin: 0 15px 12px 15px;
	font-size: 11px;
	line-height: 16px;
	color: #fff;
}

.leftcolbox img { /* Styles for images in the left column boxes */
	margin: 0 auto;
	background: #6488F7;
}

acronym {  /* Acronyms are hovered over to reveal their meaning e.g. OSWD = Open Source Web Design */
	color: #ccc;
	border-bottom: 1px dashed #ccc;
	cursor: help;  /* To make cursor appear as a help question mark/arrow  */
}

#subtext { /* Additional text in the lower area */
        color: #ff9933 ;
        font-size: 12px ;
        text-align: center ;
}

/* Bottom Nav */

#bttmnav { 
               float: right;
               margin-right: 12px ;
               margin-top: 3px;
               }
#bttmnav li {display: inline; font-weight: normal;}
#bttmnav a {  padding-left: 10px; font-size: 9px; }
#bttmnav a:link, #bttmnav a:visited { color: #6488F7; }
#bttmnav a:hover, #bttmnav a:active { text-decoration: none; color: #C5CEE7; }

/* End of 'montessori' */