/* 
these are the classes that determine which page heading and which top_menu are displayed at the 
top of the page 
========================================================================================= 

By Default, all four top menus (pre_prep, prep, senoir and sixth form) are NOT visible.
A template Parameter will make one of them visibility:visible and position:relative
========================================================================================= 
*/


ul.pre_prep , ul.prep , ul.senior , ul.sixth_form {
	display:none;
}

span.pre_prep , span.prep , span.senior , span.sixth_form {
	visibility:hidden;
	position:absolute;
}



/* =========================================================================================  */


#menu_top {
	position:relative;
	z-index:100;
	font-size:80%;
}


/* remove all the bullets, borders and padding from the default list styling */
#menu_top ul {
	padding:0;
	margin:0;
	list-style-type:none;
	clear:both;
/*	
	border:1px solid #FFFFFF;
	border-width:0  1px  0 0;
*/
}

#menu_top ul ul {
	width:122px;
	border-width:0  0  1px 0;
	
}


/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#menu_top ul li {
	float:left;
	width:122px;
	position:relative;
}


/* style the links for the top level */
#menu_top a, #menu_top a:link , #menu_top a:visited {
	display:block;
	font-size:11px;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	color:#FFFFFF;
	height:20px;
	padding-left:3px;
	border:1px solid #FFFFFF;
	border-width:1px  0  0 1px;
	line-height:18px;
	background:#000000;
}


/* a hack so that IE5.5 faulty box model is corrected */
* html #menu_top a, * html #menu_top a:visited {
	width:120px;
	w\idth:115px;
}

#menu_top li a:hover, #menu_top li:hover a {
/*	
	color:#000000;
	background:#999999 ;
	*/
	background:#ee2211;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
#menu_top ul ul {
	visibility:hidden;
	position:absolute;
	height:0;
	top:21px;
	left:0;
	width:120px;
	border:1px solid #FFFFF;
	border-width:0 0 1px 0;

/*	
	background: #009933 url(../images/menu_tab.gif) center bottom no-repeat;
	padding-bottom:20px;
*/
}

/* another hack for IE5.5 */
* html #menu_top ul ul {
	top:20px;
	t\op:21px;
}


/* ========================================================= */
/* style the links that have the sub_show and sub_hide classes applied to them by the javascript */
/* ========================================================= */
/* ========================================================= */
/* style the anchors within the LI with a class of sub_hide so that have a white arrow  */

#menu_top .sub_hide ul {
	visibility:hidden;  
}

#menu_top .sub_show ul {
 	visibility:visible; 
	border-bottom :1px solid 
}


#menu_top ul li.sub_hide a {
	color:#ffffff;
	background:#000000 url(../images/furniture/down_arrow_white.gif) bottom right no-repeat;
}


#menu_top li.sub_hide:hover a  , #menu_top li.sub_show:hover a ,  #menu_top li.sub_show a:hover , #menu_top li.sub_hide a:hover    {
/*
	color:#000000;
*/
	background: #ee2211 url(../images/furniture/down_arrow_black.gif) bottom right no-repeat;
}

/* style the anchors within the LI with a class of sub_show or ones that are being hovered over, so that have a black arrow  */
#menu_top li.sub_hide:hover a  , #menu_top li.sub_show:hover a ,  #menu_top li.sub_show a:hover , #menu_top li.sub_hide a:hover    {
/*
	color:#000000;
*/
	background: #ee2211 url(../images/furniture/down_arrow_black.gif) bottom right no-repeat;
}



/* ========================================================= */
/* ========================================================= */

 

/* style the second level links , whether they are within sub_show or sub_hide LI tags */
/* these will overides any rule above that may apply to ALL LI A  within sub)hide or sub_show */

#menu_top ul ul li a, 
#menu_top ul ul li a:link , 
#menu_top ul ul li a:visited ,
#menu_top ul li.sub_show li a , 
#menu_top ul li.sub_show li a:link , 
#menu_top ul li.sub_show li a:visited {
	background:#000000;
	color:#FFFFFF ;
	height:auto; 
	line-height:1em; 
	padding:5px 7px 5px 7px; 
	border:1px solid #FFFFFF;
	border-width:1px  0  0 0;
}
 

/* yet another hack for IE5.5 */
* html #menu_top ul ul a {
	width:120px;
	w\idth:124px;
}


#menu_top ul ul li a:hover, 
#menu_top ul ul li:hover a ,  
#menu_top ul li.sub_show:hover li a:hover , 
#menu_top ul li.sub_show li a:hover , 
#menu_top ul li.sub_hide:hover  li a:hover , 
#menu_top ul li.sub_hide li a:hover {
/*	
	color:#000000;
*/
	background: #ee2211;
}