/* Modified by Miriam Richardson 9 May 2008
Applies to all the inner pages of the STRIKE website

main structure -------------------------------*/
html, body{
	height:100%;
}
body{
	background-color:black; /* all colour strips turn black at the bottom of the page */
	background-image:url(../css_js_inc/img/holdBGin.jpg); /* redefined for each section or page */
	background-repeat:repeat-x;
}
div#wrapper {
	margin-left: auto;
	margin-right: auto;
	min-height:100%;
	width:770px;
	min-width:770px;
	position:relative;
	padding:2em 0 3em;
	background: white url(../css_js_inc/img/holdRound.jpg) no-repeat 525px 200px; /*image redefined on individual sections/pages */
}
div#logo{
	background-image:url(../css_js_inc/img/logoIn.jpg);
	width:193px;
	height:185px;
	position:absolute;
	left:27px;
	top:23px;
}
ul#nav{
	position: absolute;
	left:23px;
	top:248px; /*same as #line */
	padding:0 0; 
	margin-right:0px;
	background-image:url(../css_js_inc/img/holdBGin.jpg); /*redefined for each section/page */
	background-position:0 -248px ;
	background-color:red;

	}
div#line{
	position:absolute;
	left:123px; /*right edge of #nav, width defined in common.css */
	top:248px; /*same as #nav */
	width:4px;
	height:300px;
	background-image:url(../css_js_inc/img/holdBGin.jpg); /* Redefined for individual pages */
	background-position:0 -248px;
}
ul#nav2{
	position: absolute;
	left:127px;/* right side of div#line */
	top:373px;/* determined by which item in nav menu 1 it should line up with, see list of possible values, below */
	text-align:left;
	background-image:url(../css_js_inc/img/holdBGin.jpg); /* redefined for each page; exposed by a:hover ; position varies by section */
	background-color:red;/* give a background colour in case the image is missing, so that white links still visible */
	}

/* Navigation styles ------------------------ 
The page's bg image is used to colour the hover on the menu. The colour needs to be different depending on where on the page the link is due to the gradient on the bg, therfore lighter colours high on the page, darker colours lower on the page.

The bg image is assigned to the ul#nav and ul#nav2, and that bg image is covered over by a white background on the links. When you hover over a link the link's colour is changes to transparent, showing the coloured bg. This is true for the main menu and the second level menu #nav2.

ul#nav2 is positioned so that its top item is in line with the left hand menu item to which it belongs. The menu item in the left and the right menu is underlined to indicate current location. This is controlled by placing an id on the body (Level1) and a class on the body (Level2). Each menu item in each menu has an id, therefore the stylesheet can determine which items should be highlighted.

Because ul#nav2 is positioned reative to the menu items, the top location needs to be set for each section. The numbers below indicate the number fo pixels to locate it. They also describe the backgrouund-position, so that the ul's background matches that of the page.

The third level menus appear within the second level menu (#nav2) and are controlled by css. They are located as a ul within the li to which they refer (#nav2 ul li ul). They are display:none by default. When a level 2 menu item  is current, then the display property of its enclosed ul is set to inherit so that it shows. Each level 3 menu item has an id on each li, so that it can be highlighted when it is current for the page. This highlight is by colour, without any underlines. (Only one item in the top level and second level menus are ever underlined at a time.

REvising this:
The third level menus appear within the second level menu (#nav2) and are controlled by css. They are located as ul.nav3 below the li to which they refer. They are display:none by default. 
Each .nav3 has an id that marks which level2 item it belogns with.
Each section sets the dispaly to block  (ie visible) when the level2 marker and the level3marker match.

Each level 3 menu item has an id on each li, so that it can be highlighted when it is current for the page. This highlight is by colour, without any underlines. (Only one item in the top level and second level menus are ever underlined at a time.)

The STRIKE logo is a link to the home page.
*/
#logo a{
	width:193px;
	height:185px;
	display:block;
	}
ul#nav li a{
	text-align:right;
	padding-right:8px; /*claim space for coloured right border on hover */
	border-right:1px solid white; /*doesn't line up right without this, don't know why */
	}
ul#nav li a, ul#nav2 li a{
	background-color:white; /*cover over the background image on ul (which is exposed on hover) */
	}
ul#nav2 li a{
	padding-left: 8px; /*claim space for coloured left border on hover */
	}
ul#nav li a:hover,
ul#nav2 li a:hover{
	background-color:transparent; /*expose background image in ul, or its default colour */
	color:white !important; 
	/*background-color:black;make sure all bg are dark enough for this to be white for them all; override with local colour */
	border-bottom:1px solid black;
	}
ul#nav li a:hover{
	padding-right:4px;
	border-right:4px solid black; /*redefined for each section/page*/
	}
ul#nav2 li a:hover{
	padding-left:4px;
	border-left:4px solid black; /*redefined for each section/page*/
	}
ul#nav2 li a.long:hover{
	font-weight:normal;
	}
/*3rd level menu is in a ul#nav3, within the ul#nav2. It is indented, and the current page has a color-highlight but not underlined 
*/
#nav2 ul.nav3 li a,
#nav2 ul.nav3 li a:hover {
	padding-left:2em;
	border-bottom-color:white;
	color:black;
	}
/*using GREAT specificity, make all subitems have no speical colour or underlining, unless I really mean it (have to override the instruction to underline the current item; (Since all the links within the 3rd level menu are covered by the instruction to highlight the current, not just the link at the second level). The specificity was arrived at by trial and error. 

*/
#wrapper ul#nav2 ul#nav3 li a{
	border-bottom:1px dotted white;
	color:inherit;}

/* hide nav 3 (it will only be exposes on correct pages) */
ul#nav2 ul{
	display:none;
	}
/*
MAIN MENU: signal the menuitem for the current page
Colour needs to be different for different pages or sections.
*/

#lookListenLevel1 li#lookListen a,
#buyLevel1 li#buy a,
#joinLevel1 
li#join a,
#supportLevel1 li#support a,
#learnLevel1  li#learn a,
#performingLevel1 li#performing a,
#teachingLevel1 li#teaching a,
#profileLevel1  li#profile a,
#contactLevel1 li#contact a,
#siteLevel1 li#site a{
	font-weight:bold;
	color:orange;   /* colour redefined by section */
	border-bottom:1px dotted orange; /* colour redefined by section */
	}
	
/*determine which 3rd level menu should be showing, if any */
.eventsLevel2 ul#eventsNav3,
.corporateLevel2 ul#corporateNav3,
.stageShowLevel2 ul#stageShowNav3,
.collabLevel2 ul#collabNav3,
.classLevel2 ul#classNav3,
schShowLevel2 ul#schShowNav3
	{
	display:block;  /*block not inherit required to work in IE*/
	}


/*
Specials styles --------------------------------------------------
Specials are probably not going to be always visible. Sits below mainmenu, at bottom of line, when in use.
*/
div#specials{
	text-align:right;
	font-size:1em;
	position:absolute;
	top:550px;
	left:23px;
	width:95px; 
	margin-top:15px;
	padding:10px 5px 10px 0px;
	border-right:4px solid grey;
	}
#specials h1{
	font-size:1.4em;
	}
#specials p,
#specials h1,
#specials a{
	text-align:right;
	margin:0 0;
	color:grey;   /* colour redefined for each section */
}
#specials a{
	font-weight:bold;
	font-size:14px;
	line-height:26px; /*make space for the "BUY" to expand on hover */
	padding-top:2px;
	}
	/* enlarge the "BUY" when hovered over */
#specials a:hover{
	font-size:17px; /* change font siz e*/
	line-height:26px; /* maintain line-height */
	text-decoration:none;
	padding:0 0;
	margin:0 0;
	}
/*
Content styles ----------------------------------------------------
*/
div#content{
	width:485px;
	margin-left:255px;

	}
/*img.wide spills out of the content area and covers over the left column too. width matches the width of wrapper.
*/
img.wide{
	width:770px ;
	/*margin-left:-255px;*/
	max-width:none;
	border-top:1px solid black;
	border-bottom:1px solid black;
	margin-bottom:-3em; /* remove the extra space wrapper places at the bottom */
	}
div.pic{
	text-align:left;
	}
div.pic p{
	font-size:95%;
	margin-left:1em;
	}

div#roundPicSpace{
	width:264px;/* opens a space for text to wrap around. Temp border on individual pages is removed after positioning.*/
	height:224px;
	float:right;
	margin-right:-2em; /* undo the wrapper's padding, to line box up (sort of) to the right of wrapper */
	padding: 10px 0px 10px 10px; /* right keeps it lined up to the right; bottom determines text wrap below pic.*/
	}
#roundPicSpace img{
	width:205px;
	height:205px;
	}
/* Use this to show contact dtails on a page.*/
.contactUS{
	border:1px solid red;
	padding:0.5em;
	color:red;
	width:35%;
	float:right;
	}
.contactUS a{color:#850707;}
/*
section variations

SECOND LEVEL MENUS

Nav2 TOP CHOICES
25px per line of menu. Top of menu 1 is 248px. 
news 248px
look 273px 
buy 298px
join 323px
support 348px
learn 373px
performing 398px
teaching 423px
profile 448px
	create a 20px gap before these last 2 as the menu is too long.
contact 498px +20px = 518px But actually 491 works.
Others if needed:  523px +20px = 543px; 516px works

SECTION | body bg image |  round image |  contrast colour |  nav2 location

WITH NEWS ADDED
NEWS |  greenBGin  |  greenRound  | #518C20  |  top nav2: 248px (colours same as contact)
LISTEN  |  blueBGin  | blueRound  | #3A5EB3 |  top nav2 : 273px
BUY | ceriseBGin  |  ceriseRound |  #CA4C68 |  top nav2: 298px
JOIN  |  skyBGin  |  skyRound  | #5690BE  |  top nav2: 323px
SUPPORT |  purpleBGin  |  purpleRound |  #6056A8 top nav2: 348px
LEARN  |  yellowBGin  |  yellowRound  | E0A24B  | top nav2: 373px
PERFORM  |  redBGin  | redRound  | #B20F42 |  top nav2 : 398px
TEACHING  |   orangeBGin  |  orangeRound  | #D28D40 |  top nav2: 423px
PROFILE   |    pinkBGin |   pinkRound #91686E |  top nav2: 448px
CONTACT |  greenBGin  |  greenRound  | #518C20  | top nav2: 491px
SITEMAP  | greenRedBGin  |  greenRedRound  |  #C32C4D |  top nav2: 516px

____________________________________________________________________________
NEWS |  greenBGin  |  greenRound  | #518C20  |  top nav2: 248px (colours same as contact)

BG IMAGES of the body, the line and the menu hovers*/

#newsLevel1,
#newsLevel1 div#line,

#newsLevel1 ul#nav,
#newsLevel1 ul#nav2
	{background-image:url(../css_js_inc/img/greenBGin.jpg);}
	

 /*COLOUR:  set the border highlight colour and the Specials colour to match */	
#newsLevel1 div#specials,
#newsLevel1 ul#nav li a:hover,
#newsLevel1 ul#nav2 li a:hover{
	border-color: #518C20} /*There is a right border (#nav1), a left border (#nav2), and a bottom border (both, if it is their page).*/
	
/* make colour of text and link in specials section match */
#newsLevel1 #specials a, 
#newsLevel1 #specials p,
#newsLevel1 #specials h1
	{color:#518C20;}
	
/* POSITION #nav2 position determined by which item in nav menu 1 it should line up with, see list of possible values, above*/
#newsLevel1 ul#nav2{
	top:248px;
	background-position:0 -248px; /*match to px from top for the background image */
	}

/* mark current menuitem nav 1 and nav2. nav: the id on the body and the id on the li match. nav2:   the class on the body matches the  id on the li  */
#newsLevel1 li#news a
	{
	color:#518C20; 
	border-bottom:1px dotted #518C20;
	}
	
/*no 2nd or 3rd level menu */
____________________________________________________________________________
LOOK & LISTEN
LISTEN  |  blueBGin  | blueRound  | #3A5EB3 |  top nav2 : 273px

BG IMAGES of the body, the line and the menu hovers*/

#lookListenLevel1,
#lookListenLevel1 div#line,

#lookListenLevel1 ul#nav,
#lookListenLevel1 ul#nav2
	{background-image:url(../css_js_inc/img/blueBGin.jpg);}
	
/*sets the particular round image for the section, redefined on individual pages
#lookListenLevel1 div#wrapper
	{background-image:  url(../css_js_inc/img/blueRound.jpg);} */

 /*COLOUR:  set the border highlight colour and the Specials colour to match */	
#lookListenLevel1 div#specials,
#lookListenLevel1 ul#nav li a:hover,
#lookListenLevel1 ul#nav2 li a:hover{
	border-color: #3A5EB3} /*There is a right border (#nav1), a left border (#nav2), and a bottom border (both, if it is their page).*/
	
/* make colour of text and link in specials section match */
#lookListenLevel1 #specials a, 
#lookListenLevel1 #specials p, 
#lookListenLevel1 #specials h1
	{color:#3A5EB3;}
	
/* POSITION #nav2 position determined by which item in nav menu 1 it should line up with, see list of possible values, above*/
#lookListenLevel1 ul#nav2{
	top:273px;
	background-position:0 -273px; /*match to px from top for the background image */
	}

/* mark current menuitem nav 1 and nav2. nav: the id on the body and the id on the li match. nav2:   the class on the body matches the  id on the li  */
#lookListenLevel1 li#lookListen a,
.mp3sLevel2 li#mp3s a,
.CDLevel2 li#CD a,
.videoLevel2 li#video a,
.imagesLevel2 li#images a
	{
	color:#3A5EB3; 
	border-bottom:1px dotted #3A5EB3;
	}
	
/* CURRENTLY NO 3rd LEVEL menus for LOOK LISTEN

____________________________________________________________________________
BUY | ceriseBGin  |  ceriseRound |  #CA4C68 |  top nav2: 298px

BG IMAGES of the body, the line and the menu hovers*/

#buyLevel1,
#buyLevel1 div#line,

#buyLevel1 ul#nav,
#buyLevel1 ul#nav2
	{background-image:url(../css_js_inc/img/ceriseBGin.jpg);}
	
/*sets the particular round image for the section, redefined on individual pages
#buyLevel1 div#wrapper
	{background-image:  url(../css_js_inc/img/ceriseRound.jpg);} */

 /*COLOUR:  set the border highlight colour and the Specials colour to match */	
#buyLevel1 div#specials,
#buyLevel1 ul#nav li a:hover,
#buyLevel1 ul#nav2 li a:hover{
	border-color: #CA4C68} /*There is a right border (#nav1), a left border (#nav2), and a bottom border (both, if it is their page).*/
	
/* make colour of text and link in specials section match */
#buyLevel1 #specials a, 
#buyLevel1 #specials p,
#buyLevel1 #specials h1
	{color:#CA4C68;}
	
/* POSITION #nav2 position determined by which item in nav menu 1 it should line up with, see list of possible values, above*/
#buyLevel1 ul#nav2{
	top:298px;
	background-position:0 -298px; /*match to px from top for the background image */
	}

/* mark current menuitem nav 1 and nav2. nav: the id on the body and the id on the li match. nav2:   the class on the body matches the  id on the li  */
#buyLevel1 li#buy a,
.buyMP3Level2 li#buyMP3 a,
.buyCDsLevel2 li#buyCDs a,
.buyTshirtsLevel2 li#buyTshirts a
	{
	color:#CA4C68; 
	border-bottom:1px dotted #CA4C68;
	}
	
/*NO THIRD LEVEL MENU  for BUY
____________________________________________________________________________
JOIN  |  skyBGin  |  skyRound  | #5690BE  |  top nav2: 323px

BG IMAGES of the body, the line and the menu hovers*/

#joinLevel1,
#joinLevel1 div#line,

#joinLevel1 ul#nav,
#joinLevel1 ul#nav2
	{background-image:url(../css_js_inc/img/skyBGin.jpg);}
	
/*sets the particular round image for the section, redefined on individual pages
#joinLevel1 div#wrapper
	{background-image:  url(../css_js_inc/img/skyRound.jpg);} */

 /*COLOUR:  set the border highlight colour and the Specials colour to match */	
#joinLevel1 div#specials,
#joinLevel1 ul#nav li a:hover,
#joinLevel1 ul#nav2 li a:hover{
	border-color: #5690BE} /*There is a right border (#nav1), a left border (#nav2), and a bottom border (both, if it is their page).*/
	
/* make colour of text and link in specials section match */
#joinLevel1 #specials a, 
#joinLevel1 #specials p,
#joinLevel1 #specials h1
	{color:#5690BE;}
	
/* POSITION #nav2 position determined by which item in nav menu 1 it should line up with, see list of possible values, above*/
#joinLevel1 ul#nav2{
	top:323px;
	background-position:0 -323px; /*match to px from top for the background image */
	}

/* mark current menuitem nav 1 and nav2. nav: the id on the body and the id on the li match. nav2:   the class on the body matches the  id on the li  */
#joinLevel1 li#join a,
.maillistLevel2 li#maillist a,
.unsubscribeLevel2 li#unsubscribe a,
.privacyLevel2 li#privacy a,
.supportersLevel2 li#supporters a
	{
	color:#5690BE; 
	border-bottom:1px dotted #5690BE;
	}
	
/* NO THIRD LEVEL MENU  for JOIN at present
____________________________________________________________________________


SUPPORT |  purpleBGin  |  purpleRound |  #6056A8 top nav2: 348px

BG IMAGES of the body, the line and the menu hovers*/

#supportLevel1,
#supportLevel1 div#line,

#supportLevel1 ul#nav,
#supportLevel1 ul#nav2
	{background-image:url(../css_js_inc/img/purpleBGin.jpg);}
	
/*sets the particular round image for the section, redefined on individual pages
#supportLevel1 div#wrapper
	{background-image:  url(../css_js_inc/img/purpleRound.jpg);} */

 /*COLOUR:  set the border highlight colour and the Specials colour to match */	
#supportLevel1 div#specials,
#supportLevel1 ul#nav li a:hover,
#supportLevel1 ul#nav2 li a:hover{
	border-color: #6056A8} /*There is a right border (#nav1), a left border (#nav2), and a bottom border (both, if it is their page).*/
	
/* make colour of text and link in specials section match */
#supportLevel1 #specials a, 
#supportLevel1 #specials p,
#supportLevel1 #specials h1
	{color:#6056A8;}
	
/* POSITION #nav2 position determined by which item in nav menu 1 it should line up with, see list of possible values, above*/
#supportLevel1 ul#nav2{
	top:348px;
	background-position:0 -348px; /*match to px from top for the background image */
	}

/* mark current menuitem nav 1 and nav2. nav: the id on the body and the id on the li match. nav2:   the class on the body matches the  id on the li  */
#supportLevel1 li#support a,
.donorsLevel2 li#donors a,
.audienceLevel2 li#audience a

	{
	color:#6056A8; 
	border-bottom:1px dotted #6056A8;
	}
/*NO THIRD LEVEL MENU  for SUPPORT
____________________________________________________________________________
LEARN  |  yellowBGin  |  yellowRound  | E0A24B  | top nav2: 373px

BG IMAGES of the body, the line and the menu hovers*/

#learnLevel1,
#learnLevel1 div#line,

#learnLevel1 ul#nav,
#learnLevel1 ul#nav2
	{background-image:url(../css_js_inc/img/yellowBGin.jpg);}
	
/*sets the particular round image for the section, redefined on individual pages 
#learnLevel1 div#wrapper
	{background-image:  url(../css_js_inc/img/yellowRound.jpg);}*/

 /*COLOUR:  set the border highlight colour and the Specials colour to match */	
#learnLevel1 div#specials,
#learnLevel1 ul#nav li a:hover,
#learnLevel1 ul#nav2 li a:hover{
	border-color: #E0A24B} /*There is a right border (#nav1), a left border (#nav2), and a bottom border (both, if it is their page).*/
	
/* make colour of text and link in specials section match */
#learnLevel1 #specials a, 
#learnLevel1 #specials p,
#learnLevel1 #specials h1
	{color:#E0A24B;}
	
/* POSITION #nav2 position determined by which item in nav menu 1 it should line up with, see list of possible values, above*/
#learnLevel1 ul#nav2{
	top:373px;
	background-position:0 -373px; /*match to px from top for the background image */
	}

/* mark current menuitem nav 1 and nav2. nav: the id on the body and the id on the li match. nav2:   the class on the body matches the  id on the li  */
#learnLevel1 li#learn a,
.linksLevel2 li#links a,
.workshopsLevel2 li#workshops a,
.tertiaryLevel2 li#tertiary a,
.primaryLevel2 li#primary a,
.residencyLevel2 li#residency a,
.communityLevel2 li#community a
	{
	color:#E0A24B; 
	border-bottom:1px dotted #E0A24B;
	}
	
/*NO LEVEL 3 for  LEARN
____________________________________________________________________________
PERFORM  |  redBGin  | redRound  | #B20F42 |  top nav2 : 398px

BG IMAGES of the body, the line and the menu hovers*/
#performingLevel1,
#performingLevel1 div#line,

#performingLevel1 ul#nav,
#performingLevel1 ul#nav2
	{background-image:url(../css_js_inc/img/redBGin.jpg);}
	
/* POSITION #nav2 position determined by which item in nav menu 1 it should line up with, see list of possible values, above*/

#performingLevel1 ul#nav2{
	top:398px;
	background-position:0 -398px; /*match to px from top for the background image */
	}
/*sets the particular round image for the section, redefined on individual pages
#performingLevel1 div#wrapper
	{background-image:  url(../css_js_inc/img/redRound.jpg);} */

 /*COLOUR:  set the border highlight colour and the Specials colour to match */	
#performingLevel1 div#specials,
#performingLevel1 ul#nav li a:hover,
#performingLevel1 ul#nav2 li a:hover{
	border-color: #B20F42} /*There is a right border (#nav1), a left border (#nav2), and a bottom border (both, if it is their page).*/

/* mark current menuitem nav 1 and nav2. nav: the id on the body and the id on the li match. nav2:   the class on the body matches the  id on the li  */
#performingLevel1 li#performing a,
.eventsLevel2 li#events a,
.corporateLevel2 li#corporate a,
.collabLevel2 li#collab a,
.classLevel2 li#class a,
.stageShowLevel2 li#stageShow a,
.schShowLevel2 li#schShow a
	{
	color:#B20F42; 
	border-bottom:1px dotted #B20F42;
	}

/* mark current page 3rd level menus, overriding earlier great (but necessary) specificity*/
.schImagesLevel3  ul#nav2 ul  li#schImages a,
.schReviewsLevel3  ul#nav2 ul  li#schReviews a,
.schVideoLevel3 ul#nav2 ul  li#schVideo a,
.schConceptsLevel3  ul#nav2 ul  li#schConcepts a,

.evImagesLevel3  ul#nav2 ul  li#evImages a,
.evReviewsLevel3  ul#nav2 ul  li#evReviews a,
.evVideoLevel3 ul#nav2 ul  li#evVideo a,
.evConceptsLevel3  ul#nav2 ul  li#evConcepts a,

.corpImagesLevel3  ul#nav2 ul  li#corpImages a,
.corpReviewsLevel3  ul#nav2 ul  li#corpReviews a,
.corpVideoLevel3 ul#nav2 ul  li#corpVideo a,
.corpConceptsLevel3  ul#nav2 ul  li#corpConcepts a,

.stageITCLevel3  ul#nav2 ul  li#stageITC a,
.stageCubedLevel3  ul#nav2 ul  li#stageCube a,
.stageEleLevel3  ul#nav2 ul  li#stageEle a,
.stagePageLevel3  ul#nav2 ul  li#stagePage a,
.stageVideoLevel3 ul#nav2 ul  li#stageVideo a,
.stageConceptsLevel3  ul#nav2 ul  li#stageConcepts a,

.collabImagesLevel3  ul#nav2 ul  li#collabImages a,
.collabReviewsLevel3  ul#nav2 ul  li#collabReviews a,
.collabVideoLevel3 ul#nav2 ul  li#collabVideo a,

.classImagesLevel3  ul#nav2 ul  li#classImages a,
.classReviewsLevel3  ul#nav2 ul  li#classReviews a,
.classVideoLevel3 ul#nav2 ul  li#classVideo a

	{
	color:#B20F42; 
	border-bottom:1px dotted white;
	}

/* make colour of text and link in specials section match */
#performingLevel1 #specials a, 
#performingLevel1 #specials p,
#performingLevel1 #specials h1
	{color:#B20F42;}
/*#performingLevel1  ul#nav li a:hover
	{border-right:4px solid #B20F42; }might not need this, covered by border-color above 
#performingLevel1 ul#nav2 li a:hover
	{border-left:4px solid #B20F42; }might not need this, covered by border-color above 
____________________________________________________________________________
TEACHING  |   orangeBGin  |  orangeRound  | #D28D40 |  top nav2: 423px

BG IMAGES of the body, the line and the menu hovers*/

#teachingLevel1,
#teachingLevel1 div#line,

#teachingLevel1 ul#nav,
#teachingLevel1 ul#nav2
	{background-image:url(../css_js_inc/img/orangeBGin.jpg);}
	
/*sets the particular round image for the section, redefined on individual pages 
#teachingLevel1 div#wrapper
	{background-image:  url(../css_js_inc/img/orangeRound.jpg);}*/

 /*COLOUR:  set the border highlight colour and the Specials colour to match */	
#teachingLevel1 div#specials,
#teachingLevel1 ul#nav li a:hover,
#teachingLevel1 ul#nav2 li a:hover{
	border-color: #D28D40} /*There is a right border (#nav1), a left border (#nav2), and a bottom border (both, if it is their page).*/
	
/* make colour of text and link in specials section match */
#teachingLevel1 #specials a, 
#teachingLevel1 #specials p,
#teachingLevel1 #specials h1
	{color:#D28D40;}
	
/* POSITION #nav2 position determined by which item in nav menu 1 it should line up with, see list of possible values, above*/
#teachingLevel1 ul#nav2{
	top:423px;
	background-position:0 -423px; /*match to px from top for the background image */
	}

/* mark current menuitem nav 1 and nav2. nav: the id on the body and the id on the li match. nav2:   the class on the body matches the  id on the li  */
#teachingLevel1 li#teaching a,
.schoolsLevel2 li#schools a,
.communityLevel2 li#community a
	{
	color:#D28D40; 
	border-bottom:1px dotted #D28D40;
	}
	
/*determine when each 3rd level menu should be showing
This determines whether the third level menu appears; by default they do not show, but when the right level2 item is present, then they should show*/
.schoolsLevel2 ul#nav2 ul#schoolsNav3,
.communityLevel2 ul#communityNav3
	{
	display:block;
	}

/* mark current page 3rd level menus, overriding earlier great (but necessary) specificity
each line represents a different third level menu item*/
.bookingLevel3  ul#nav2 ul  li#booking a,
.schshowLevel3  ul#nav2 ul  li#schshow a,
.schworkLevel3 ul#nav2 ul  li#schwork a,
.schResidencyLevel3  ul#nav2 ul  li#schResidency a,

.comWorkLevel3  ul#nav2 ul  li#comWork a,
.comResourcesLevel3  ul#nav2 ul  li#comResources a,
.comBookingLevel3  ul#nav2 ul  li#comBooking a
	{
	color:#D28D40; 
	border-bottom:1px dotted white;
	}
/*	____________________________________________________________________________
PROFILE   |    pinkBGin |   pinkRound #91686E |  top nav2: 448px

BG IMAGES of the body, the line and the menu hovers*/

#profileLevel1,
#profileLevel1 div#line,

#profileLevel1 ul#nav,
#profileLevel1 ul#nav2
	{background-image:url(../css_js_inc/img/pinkBGin.jpg);}
	
/*sets the particular round image for the section, redefined on individual pages
#profileLevel1 div#wrapper
	{background-image:  url(../css_js_inc/img/pinkRound.jpg);} */

 /*COLOUR:  set the border highlight colour and the Specials colour to match */	
#profileLevel1 div#specials,
#profileLevel1 ul#nav li a:hover,
#profileLevel1 ul#nav2 li a:hover{
	border-color: #91686E} /*There is a right border (#nav1), a left border (#nav2), and a bottom border (both, if it is their page).*/
	
/* make colour of text and link in specials section match */
#profileLevel1 #specials a, 
#profileLevel1 #specials p,
#profileLevel1 #specials h1
	{color:#91686E;}
	
/* POSITION #nav2 position determined by which item in nav menu 1 it should line up with, see list of possible values, above*/
#profileLevel1 ul#nav2{
	top:448px;
	background-position:0 -448px; /*match to px from top for the background image */
	}

/* mark current menuitem nav 1 and nav2. nav: the id on the body and the id on the li match. nav2:   the class on the body matches the  id on the li  */
#profileLevel1 li#profile a,
.performersLevel2 li#performers a,
.reviewsLevel2 li#reviews a,
.showsLevel2 li#shows a,
.historyLevel2 li#history a,
.managerLevel2 li#manager a,
.managementLevel2 li#management a
	{
	color:#91686E; 
	border-bottom:1px dotted #91686E;
	}
	
/*determine when each 3rd level menu should be showing
This determines whether the third level menu appears; by default they do not show, but when the right level2 item is present, then they should show*/
.performersLevel2 ul#nav2 ul#performersNav3,
.showsLevel2 ul#showsNav3
	{
	display:block;  /*block not inherit required to work in IE*/
	}

/*determine when each 3rd level menu should be showing
This determines whether the third level menu appears; by default they do not show, but when the right level2 item is present, then they should show*/
.performersLevel2 ul#nav2 ul#schoolsNav3,
.communityLevel2 ul#communityNav3
	{
	display:block;  /*block not inherit required to work in IE*/
	}


/* mark current page 3rd level menus, overriding earlier great (but necessary) specificity
each line represents a different third level menu item*/
.murrayLevel3  ul#nav2 ul  li#murray a,
.timLevel3  ul#nav2 ul  li#tim a,
.tomLevel3 ul#nav2 ul  li#tom a,
.leniLevel3 ul#nav2 ul  li#leni a,
.otherPerformersLevel3  ul#nav2 ul  li#otherPerformers a,

.showOneLevel3  ul#nav2 ul  li#showOne a,
.showTwoLevel3  ul#nav2 ul  li#showTwo a,
.showThreeLevel3 ul#nav2 ul  li#showThree a,
.showFourLevel3  ul#nav2 ul  li#showFour a

	{
	color:#91686E; 
	border-bottom:1px dotted white;
	}
/*
	____________________________________________________________________________
CONTACT |  greenBGin  |  greenRound  | #518C20  | top nav2: 473px

BG IMAGES of the body, the line and the menu hovers*/

#contactLevel1,
#contactLevel1 div#line,

#contactLevel1 ul#nav,
#contactLevel1 ul#nav2
	{background-image:url(../css_js_inc/img/greenBGin.jpg);}
	
/*sets the particular round image for the section, redefined on individual pages 
#contactLevel1 div#wrapper
	{background-image:  url(../css_js_inc/img/greenRound.jpg);}*/

 /*COLOUR:  set the border highlight colour and the Specials colour to match */	
#contactLevel1 div#specials,
#contactLevel1 ul#nav li a:hover,
#contactLevel1 ul#nav2 li a:hover{
	border-color: #518C20} /*There is a right border (#nav1), a left border (#nav2), and a bottom border (both, if it is their page).*/
	
/* make colour of text and link in specials section match */
#contactLevel1 #specials a, 
#contactLevel1 #specials p,
#contactLevel1 #specials h1
	{color:#518C20;}
	
/* POSITION #nav2 position determined by which item in nav menu 1 it should line up with, see list of possible values, above*/
#contactLevel1 ul#nav2{
	top:491px;
	background-position:0 -491px; /*match to px from top for the background image */
	}

/* mark current menuitem nav 1 and nav2. nav: the id on the body and the id on the li match. nav2:   the class on the body matches the  id on the li  */
#contactLevel1 li#contact a,
.bookingLevel2 li#booking a,
.contPerformersLevel2 li#contPerformers a,
.managementLevel2 li#management a
	{
	color:#518C20; 
	border-bottom:1px dotted #518C20;
	}
	
/*NO THIRD LEVEL MENU FOR CONTACT
____________________________________________________________________________
SITEMAP  | greenRedBGin  |  greenRedRound  |  #C32C4D |  top nav2: 498px

BG IMAGES of the body, the line and the menu hovers*/

#siteMapLevel1,
#siteMapLevel1 div#line,

#siteMapLevel1 ul#nav,
#siteMapLevel1 ul#nav2
	{background-image:url(../css_js_inc/img/greenRedBGin.jpg);}
	
/*sets the particular round image for the section, redefined on individual pages
#siteMapLevel1 div#wrapper
	{background-image:  url(../css_js_inc/img/greenRedRound.jpg);} */

 /*COLOUR:  set the border highlight colour and the Specials colour to match */	
#siteMapLevel1 div#specials,
#siteMapLevel1 ul#nav li a:hover,
#siteMapLevel1 ul#nav2 li a:hover{
	border-color: #C32C4D} /*There is a right border (#nav1), a left border (#nav2), and a bottom border (both, if it is their page).*/
	
/* make colour of text and link in specials section match */
#siteMapLevel1 #specials a, 
#siteMapLevel1 #specials p,
#siteMapLevel1 #specials h1
	{color:#C32C4D;}
	
/* POSITION #nav2 position determined by which item in nav menu 1 it should line up with, see list of possible values, above*/
#siteMapLevel1 ul#nav2{
	top:516px;
	background-position:0 -516px; /*match to px from top for the background image */
	}

/* mark current menuitem nav 1 and nav2. nav: the id on the body and the id on the li match. nav2:   the class on the body matches the  id on the li  */
#siteMapLevel1 li#siteMap a,
.aboutUsLevel2 li#aboutUs a,
.forYouLevel2 li#forYou a,
.allLevel2 li#all a

	{
	color:#C32C4D; 
	border-bottom:1px dotted #C32C4D;
	}
	
/*no 3rd level menu 

______________________________________________________
Subscribe page, styles used by the maillist pages */
	
.joinForm form div, .unjoinForm form div, 
	{
	text-align:left;
	font-size:1em;
	line-height:1.4em;
	margin-top:2em;
		}
.joinForm fieldset, #joinList fieldset
	{
	margin:1em 0;
	padding:0.5em;
	}
.joinForm label
	{
	display:block;
	float:left;
	clear:both;
	width:80px;
	}
#joinList label
	{
	display:block;
	float:left;
	width:100px;
	}
.joinForm input{
	width:30em;
	}
.joinForm input.cbox{
	width:2em;
	}

.joinForm label.other
	{
	display:inline;
	float:none;
	width:auto;
	margin-bottom:0;
	}
#joinList label.radioB
	{
	display:inline;
	float:none;
	width:auto;
	margin-bottom:0;

	}
#joinList label.radioBb
	{
	display:inline;
	float:none;
	width:auto;
	margin-bottom:0;
	}
#joinList input.radioIn
	{
	width:1em;
	padding:0 0.5em 0  2em;
	}

.unjoinForm #content
	{
	margin-top:20em;
	}
.unjoinForm p{
	margin-bottom:1em;
	}