@charset "utf-8";
/* CSS Document */

#nav {
  display:block;
  width:640px;
  height:18px;
  position:relative;
  }
  
#nav a#title {
  display:block;
  width:640px;
  height:0px;
  padding-top:0px;
  verflow:hidden;
  position:absolute;
  left:0;
  top:0;
  background:transparent 400px 400px;
  cursor:default;
  }
/* the hack for IE pre IE6 */
* html #nav a#title {
  height:39px;
  he\ight:0;
  }
  
#nav a#title:hover {
  background-position: 0 0;
  z-index:10;
  }
  
#nav li{
  position:absolute;
  padding:0;
  margin:0;
  }
#nav #idhom {
  left:0;
  top:0px;
  z-index:20;
  }
#nav #idtec { /*technique*/
  left:63px;
  top:0px;
  z-index:20;
  }
#nav #idwho { /*who can*/
  left:182px;
  top:0px;
  z-index:20;
  }
#nav #idvis { /*vision*/
  left:317px;
  top:0px;
  z-index:20;
  }
#nav #idles { /*lessons */
  left:479px;
  top:0px;
  z-index:20;
  }
#nav #idcon { /*contact */
  left:552px;
  top:0px;
  z-index:20;
  }
  
#nav a#ahom {  
  display:block;  
  width:63px;
  height:18px;
  background:transparent url(../images/menu.png) 0 0 no-repeat;
  text-decoration:none;
  z-index:20;
  }
  #nav a#atec {
  display:block;
  width:119px;
  height:18px;
  background:transparent url(../images/menu.png) -63px 0 no-repeat;
  text-decoration:none;
  z-index:20;
  }
  #nav a#awho {
  display:block;
  width:135px;
  height:18px;
  background:transparent url(../images/menu.png) -182px 0 no-repeat;
  text-decoration:none;
  z-index:20;
  }
  #nav a#avis {
  display:block;
  width:185px;
  height:18px;
  background:transparent url(../images/menu.png) -317px 0 no-repeat;
  text-decoration:none;
  z-index:20;
  }
  #nav a#ales {
  display:block;
  width:73px;
  height:18px;
  background:transparent url(../images/menu.png) -479px 0 no-repeat;
  text-decoration:none;
  z-index:20;
  }
  #nav a#acon {
  display:block;
  width:73px;
  height:18px;
  background:transparent url(../images/menu.png) -552px 0 no-repeat;
  text-decoration:none;
  z-index:20;
  }

/* hover states */
#nav a#ahom:hover {
	background-position: 0 -36px;
}

#nav a#atec:hover {
	background-position: -63px -36px;
}

#nav a#awho:hover {
	background-position: -182px -36px;
}

#nav a#avis:hover {
	background-position: -317px -36px;
}

#nav a#ales:hover {
	background-position: -479px -36px;
}

#nav a#acon:hover {
	background-position: -552px -36px;
}
/* end of hover states */
/* you are here states */

/* this needs to be worked out using something like body id="page15" */
#homepage a#ahom {
	background-position: 0px -18px;
}

#tecpage a#atec {
	background-position: -63px -18px;
}

#whopage a#awho {
	background-position: -182px -18px;
}

#vispage a#avis {
	background-position: -317px -18px;
}

#lespage a#ales {
	background-position: -479px -18px;
}

#conpage a#acon {
	background-position: -552px -18px;
}
/* end of you are here states */

/* And now for the sub menus */

/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */

/* The wrapper clears the floating elements of the menu, not used on this menu, you can use it if you need to */

#menu_wrapper {
 background: url(../images/menu-bg.png) no-repeat right top;
	width: 776px;
	height: 18px;
	margin-left: -2px;
	padding: 0;
        }

/* Set the width of the menu elements at second and third level. Leaving first level flexible. */

#nav li li {
        width: 200px;
       }

/* Unless you know what you do, do not touch this */

#nav{
    list-style: none;
    margin: 0px;
    padding: 0px;
    }
#nav ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    }
#nav ul {
    position: absolute;
    top: auto;
    }
#nav ul ul {
    margin-top: 1px; /* this is normally 0px but for this menu we wanted the white line around the main image to show above the drop downs  */
    margin-left: -1px;
    left: 100%;
    top: 0px;
    }  
#nav li {
    margin-left: -1px;
    float: left;
    }
#nav li li {
	margin-left: 0px;
	margin-top: 1px;
	position: relative;
    }
#nav li li li {
    margin-left: 0px;
    margin-top: -1px; 
    }
#nav li li a{
    margin-left: 0px;
    margin-top: -1px;
    position: relative;
    }
/* to adjust position of classroom drop-down */
#nav li#pic54 li {
margin-left: -30px;
}

/* Styling the basic apperance of the menu elements */

#nav a {
    display: block;
    padding: 0px 0px;
    text-decoration: none;
    }
#nav li a {text-indent:-9000px; /* this moves the words (menutext) of the first layer, images, out of the way which you will need if you have only one layer/no drop downs */
    }
#nav li li a {
	text-indent:0px; /*this makes the second level words in the drop downs show up or else they will inherit the action of the line above*/
	background-color: #001257;   /* before */
	padding: 8px 10px;
	color:#fff;
	border-bottom: 1px solid #137091;
	font: bold 1.4em Arial, Helvetica, sans-serif;
	text-align: left;
    } 
	#nav li ul {	/*border-bottom: 1px solid #137091;*/
}  
#nav li#idles ul {
margin-left: -100px;
}
#nav li li :hover{background-color: #6cd7e0;
color:#333333 }   /* second and third layer drop down hover color */

/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#nav ul, #nav li:hover ul, #nav li:hover ul ul,
#nav li.menuparenth ul, #nav li.menuparenth ul ul {
    display: none;
    }
#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul,
#nav li.menuparenth ul, #nav ul li.menuparenth ul, #nav ul ul li.menuparenth ul {
    display: block;
    }


#nav li li {
    float: left;
    clear: both;
    }
#nav li li a {
    height: 1%;
    }

#nav li li.lastli a { border-bottom:0;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
-moz-border-radius-bottomleft: 8px; 
-webkit-border-bottom-left-radius: 8px; 
-moz-border-radius-bottomright: 8px; 
-webkit-border-bottom-right-radius: 8px; }