@import url("globalstyles.css");/* sectional colors */
@import url("jkadditions.css");/* just during development! */
@import url("rtf_text.css");/* Controls the MCE! */

/*
LAYOUT.CSS

This sheet defines the basic layout of the page.
For styling definitions see STYLES.CSS

They have been split into two so that each distinct aspect
of the CSS is completely separate. This means that LAYOUT.CSS
should only need minor tweaking between projects, and all the
significant style changes should be done in STYLES.CSS

This layout contains no hacks for IE6 or any other browsers

*/


/****************/
/* GROUND RULES */
/****************/

/* In GROUND RULES we like to specify the overall styles that affect everything on the page */

* {
	padding: 0;									/* Lets normalise margin and padding across the board - note this will affect lists, headings and paragraphs */
	margin: 0;									/*   - this will hold true unless we specify otherwise */
}
body {
	padding: 0;									/* Standardises the space */
	margin: 0px 0px 7px 25px;								/*   around the page for different browsers */
}

 #maincontent, #header,#wrapper #footer{}
#home #navigation{display:none;}
/*************/
/* LINKSMENU */
/*************/
/* Then we like to start at the top of the page and work each element one at a time */
ul#linksmenu {
	list-style: none;							/* Remove bullets from list */
	width:550px!important;       /* RP - Resets width of UL */
	height:20px;
	float:right;
	background-image:url(edleeds.gif);
	background-repeat:no-repeat;
	background-position:right top;
	padding-top:5px;
	padding-bottom:10px;
}
ul#linksmenu li {
	display: inline;
	float:left;	
	height:20px;	
	margin-top:15px;					/* This is only really for the benefit of IE6 */
}
body ul#linksmenu li a {
	float: left;								/* Float links to the right */
	display: block;								/* So we can add padding to the a tag */
padding:5px 5px;	
	width:auto!important;							/* Add said padding */
	font-size:1em!important;
	font-family:Arial, Helvetica, sans-serif;
	
}
ul#linksmenu li.menu_Home a{border:0;}
/**********/
/* HEADER */
/**********/
#header  {padding-right: 225px; padding-left: 25px;height:105px;}
/*********************/
/* HEADER NAVIGATION */
/*********************/
/* The header navigation does not come with its own id, so let's style it here */
#header ul {									/* The ul does not need to clear the floated search form because the logo keeps it in its place */
	list-style: none;
	/*width:570px;*/
	
}
#branding{/*height:130px;*/}
#header ul li {					/* Again, an IE6 fix */
}
#header ul li a {
	display: block;								/* Same old... same old... */
	padding: 0px 0px;
	width:100px;
	padding-top:50px;
	padding-bottom:5px;
	margin-left:5px;	
	margin-right:1px;
	color:#fff;
	padding-left:5px;
}
#linksmenu a{padding-top:0!important;padding-bottom:0!important;}
 #header #branding #level1{padding-top:20px;width:560px;margin-right:218px;position:absolute;right:0px;top:25px;}
 #header #branding #level1 {}
 #header #branding #level1 li{float:left;}
  #header #branding #level1 li a{margin-right:0px;}
 
 #header #branding #level1 li.menu_music a{background-image:url(music.gif);background-repeat:no-repeat;background-position:left top;text-indent:-3000em;color:#2b3982;}
#header #branding #level1 li.menu_arts a{background-image:url(arts.gif);background-repeat:no-repeat;background-position:left top;text-indent:-3000em;color:#8b0303;}
 #header #branding #level1 li.menu_artemis a{background-image:url(artemis.gif);background-repeat:no-repeat;background-position:left top;text-indent:-3000em;color:#024930;}
 #header #branding #level1 li.menu_gallery a{background-image:url(gallery.gif);background-repeat:no-repeat;background-position:left top;text-indent:-3000em;color:#602860;}
 #header #branding #level1 li.menu_aresources a{background-image:url(resources.gif);background-repeat:no-repeat;background-position:left top;text-indent:-3000em;color:#366466;}
/************/
/* BRANDING */
/************/
/*
This section could have been quite complex but we have made
a selection of very small changes to the XHTML which helps clean
it up and results in much nicer CSS. I assume this is OK to do.

1/ Previously #menulevel1 was nested within #branding which
   in turn was nested within #header.

   #header now wraps both #menulevel1 and #branding but the
   latter two are now independent... it seemed to make more sense.
   I assume this is OK to do?

2/ The logo has been moved below the search box.
   This had to be done to achieve consistency across all browsers
   and helps keep the CSS minimal.

3/ The search facility has been taken out of the UL as this was
   unncessary. It also allows us to style the navigation more cleanly.
*/
#branding form {
	list-style: none;							/* Turn off list styling */
	float: right;								/* Float whatever contains the form to the right */
	padding-right: 5px;							/* Give it a little room on the right */
}
#logo{width:183px;height:77px;
background-image:url(sw-logo.png);background-repeat:no-repeat;background-position:top left;
position:absolute;left:25px;top:26px;
}
/*body.standard #logo{left:100px;}*/
#Music #logo{background-image:url(sw-logo_music.png);background-repeat:no-repeat;background-position:top left;
}
#Arts #logo{background-image:url(sw-logo_arts.png);background-repeat:no-repeat;background-position:top left;
}
#Artemis #logo{background-image:url(sw-logo_artemis.png);background-repeat:no-repeat;background-position:top left;}
#Gallery #logo,.gallerymodule #logo{background-image:url(sw-logo_gallery.png);background-repeat:no-repeat;background-position:top left;}
#Resources #logo{background-image:url(sw-logo.png);background-repeat:no-repeat;background-position:top left;}
#MusicCentres #logo{background-image:url(sw-logo_centres.png);background-repeat:no-repeat;background-position:top left;}
#ExtendedServices #logo{background-image:url(logo_skills.jpg);background-repeat:no-repeat;background-position:2px 6px;}
#CityofLeedsYouthMusicGroups #logo{background-image:url(sw-logo_clym.png);background-repeat:no-repeat;background-position:top left;}
#CLYM #logo{background-image:url(sw-logo_clym.png);background-repeat:no-repeat;background-position:top left;}
/*
OK, Now we've got the styling up the top of the page sorted
we can move on to styling the main content section.
Once we've got that done we can move on to the footer.
Keeping the CSS arranged like this means there's a logical
association between the XHTML and CSS files.

Careful calculation needs to be done to ensure that you aren't
setting the widths of the columns wider than #wrapper can hold.
Depending on the final style of the site you might want to add
padding to either side of the central column, #primary, or you
might want to add right padding to the left column and left
padding to the right column, which is what we have done below.
*/
#home #creating{height:239px;
background-image: url(bg-masthead.jpg);background-repeat:no-repeat;background-position:left top;
margin:0;padding:0;
margin-right: 225px;color:#fff!important;}
#creating img{float:right;}
#creating object{float:right;width:320px; height:239px;}
#home #creating h1{font-size:28px;color:#fff!important;padding-top:30px;font-family: "Trebuchet MS";font-weight:normal!important;text-indent:-0.7ex;}
#creating p{font-size:1.2em;line-height:1.6em;}
#creating h1,#creating h2,#creating h3,#creating h4,#creating p{margin-left:80px;color:#fff!important;}
#creating h1,#creating p{}

/***************/
/* LEVEL 1 BOX */
#titlebox{background-color:#366466;margin-right: 245px;margin-left: 210px;height:80px;}
/***************/

body.standard #header  {padding-right: 225px; padding-left: 25px;}		/* right padding = #right width + 25px (according to visual) */
/*body.standard jk removed */ #primary {/*padding-right: 225px; padding-left: 225px;* jk removed*/ margin-top:10px;}		/* left padding = #left width + 25px (according to visual) */
body.standard #navigation    {float: left; width: 175px; padding-left: 25px;}	/* left padding plus plus width = 200px */
body standard #secondary   {float: right; padding: 0 8px;width: 184px;}		/* left padding plus right padding plus width = 200px */
body.standard #footer  {clear: left; margin: 0 225px 0 25px;}


/****************/
/* MAIN CONTENT */
/****************/
#maincontent {				
clear:left;				/* Main content wrapper needs to clear the navigation just above it */
padding-right:225px;

}
/**************/
/* NAVIGATION */
/**************/
#navigation {
	float: left;
	width: 160px;								/* Total width = 160+20 = 180px */	
	min-height:160px;
/*	background-color: #fdf;	*/					/* Handu background colours so you can see the columns clearly */
}
#navigation ul {
	list-style: none;
}
/***********/
/* PRIMARY */
/***********/
#primary {
padding-right: 5%; 
min-height:450px;
/*	background-color: #dff;	*/
}
#home #primary{margin-left:80px;margin-top:30px;}
div.event img{float:left;margin-right:5px;padding-bottom:15px;margin-bottom:5px;}
div.event p a.more{float:right;}
div.event p{color:#000;}
/*************/
/* SECONDARY */
/*************/
#secondary {
float: right; 
padding: 0 8px;
width: 184px;							/* Total width = 160+20 = 180px */
	min-height:700px;
	background-image:url(bg_rhc.jpg);
	background-repeat:no-repeat;
	background-position:left top;
	margin-top:103px;
}
/** Right hand Feeds - Feeds Styling **/
#calendar{height:20px;}
#calendar a{color:#000;font-size:1.4em;text-transform:capitalize;height:20px;text-align:center;}
#sectionfeed{margin-top:10px;margin-left:10px;margin-right:10px;}
#sitewidefeed{margin-top:10px;margin-left:10px;margin-right:10px;}
#sitewidefeed a {margin: 0 !important; padding: 0!important}
#sectionfeed h1,#sectionfeed h2,#sectionfeed h3,#sectionfeed h4,#sectionfeed a,
#sitewidefeed h1,#sitewidefeed h2,#sitewidefeed h3,#sitewidefeed h4,#sitewidefeed a
{
color:#000!important;
margin:0!important;
}
#sitewidefeed a{word-wrap: break-word;white-space:pre-wrap;
}
#sitewidefeed h1{font-size:1.4em;}
#sitewidefeed h2{font-size:1.3em;}
#sitewidefeed h3{font-size:1.2em; margin-top: 20px !important;}
#sitewidefeed h4{font-size:1.1em;}

#sitewidefeed h3 a {
}

#sectionfeed h1{font-size:1.4em;margin-bottom:10px!important;}
#sectionfeed h2{font-size:1.3em;margin-bottom:5px;}
#sectionfeed h3{font-size:1.2em;margin-bottom:5px; margin-top: 20px !important;}
#sectionfeed h4{font-size:1.1em;margin-bottom:5px;}

/*****************/
#Music #secondary{background-image:url(sw-rhc_music.png);background-repeat:no-repeat;background-position:left top;}
#Arts #secondary{background-image:url(sw-rhc_arts.png);background-repeat:no-repeat;background-position:left top;}
#Artemis #secondary{background-image:url(sw-rhc_artemis.png);background-repeat:no-repeat;background-position:left top;}
#Gallery #secondary{background-image:url(sw-rhc_gallery.png);background-repeat:no-repeat;background-position:left top;}
#Resources #secondary{background-image:url(rhc_resources.gif);background-repeat:no-repeat;background-position:left top;}
#MusicCentres #secondary{background-image:url(centres_rhc.gif);background-repeat:no-repeat;background-position:left top;}
#ExtendedServices #secondary{background-image:url(skills_rhc.jpg);background-repeat:no-repeat;background-position:right top;}
#CityofLeedsYouthMusicGroups #secondary{background-image:url(clym_rhc.gif);background-repeat:no-repeat;background-position:left top;}
#CLYM #secondary{background-image:url(clym_rhc.gif);background-repeat:no-repeat;background-position:left top;}
#secondary div{color:#000;font-size:1.2em;}
#secondary div:first-child{margin-top:20px;}
#secondary div a{width:180px; z-index:99;cursor:pointer;display:block;margin-left:5px;}
#secondary #bulletin a{background-image:url(rhc_bulletin.gif);background-repeat:no-repeat;background-position:left top;height:52px;margin-top:20px;}
#secondary #centres a{background-image:url(rhc_centres.gif);background-repeat:no-repeat;background-position:left top;height:55px;}
#secondary #clym a{background-image:url(rhc_clym.gif);background-repeat:no-repeat;background-position:left top;height:50px;}
#secondary #musicschool a{background-image:url(rhc_skills.gif);background-repeat:no-repeat;background-position:left top;height:45px;}
#secondary #artsandmusic a{background-image:url(rhc_artsmusic.gif);background-repeat:no-repeat;background-position:left top;height:55px;}
#secondary #centres a:hover{background-image:url(rhc_centres_hl.gif);background-repeat:no-repeat;background-position:left top;height:55px;}
#secondary #clym a:hover{background-image:url(rhc_clym_hl.gif);background-repeat:no-repeat;background-position:left top;height:50px;}
#secondary #musicschool a:hover{background-image:url(skills_skills.gif)!important;background-repeat:no-repeat;background-position:left top;height:45px;}

/* searchbox styling begins*/
#searchdiv{position:absolute;top:-22px;right:0px;}
#searchbox{background-color: #739394;
list-style:none;margin:0;padding:0;height:124px;color:#fff;width:196px!important; 
background-image:url(bg_search.jpg);
background-repeat:no-repeat; background-position:bottom left;
}
#searchbox input.btn{height:20px;border:1px solid #fff;}

#Music #secondary #searchbox{background-image:url(search_music.gif);background-repeat:no-repeat;background-position:left top;}
#Arts #secondary #searchbox{background-image:url(search_arts.gif);background-repeat:no-repeat;background-position:left top;}
#Artemis #secondary #searchbox{background-image:url(search_artemis.gif);background-repeat:no-repeat;background-position:left top;}
#Gallery #secondary #searchbox{background-image:url(search_gallery.gif);background-repeat:no-repeat;background-position:left top;}
#Resources #secondary #searchbox{background-image:url(search_resources.gif);background-repeat:no-repeat;background-position:left top;}
#MusicCentres #secondary #searchbox{background-image:url(search_centres.gif);background-repeat:no-repeat;background-position:left top;}
#ExtendedServices #secondary #searchbox{background-image:url(search_skills.jpg);background-repeat:no-repeat;background-position:left top;}


#secondary div{}
#searchbox form{padding-top:35px;}
#searchbox ul{padding-top:27px;margin-right:15px;}
#searchbox ul li{list-style:none;padding:0;margin:0;display:inline;float:right;}
#searchbox ul li a{color:#fff;font-weight:normal!important;font-size:1em;}
#searchbox ul li.menu_Sitemap{border-right:1px solid #fff;padding-right:5px;}
#searchbox ul li.menu_Accessibility{padding-left:5px;padding-right:0px;}
#search{width:130px;display:block;border:0;height:20px;}
#submit{display:inline;width:30px;margin-left:3px;background-color:#366366;color:#fff;border:0;font-weight:bold;}
.searchtext input{float:left;}
.searchtext{font-size:1.1em;margin-left:15px;margin-top:15px;text-transform:uppercase;font-weight:normal;font-family:Arial, Helvetica, sans-serif;}


/*** Module Layouts **/
/** Gallery Layout **/
.gallerylevel1 #primary li.item{list-style:none;width: 150px;
float: left;
margin-right: 42px;
margin-bottom: 40px;
min-height: 150px;
overflow-x: visible;
overflow-y: visible;
margin-top:15px;}


.gallerymodule #primary,
.gallerymodule #titlebox,
.gallerymodule #footer{
margin-right:0;padding-right:0!important;
}
.gallerymodule #secondary{display:none!important;}
.gallerylevel1 #primary li.item a{}
.gallerylevel1 #primary li.item img{}
.gallerylevel1 #primary p.caption{color:#602860;font-size:1.8em;font-weight:bold;}
#Gallery #secondary,#Calendar #secondary{display:none;}
#Gallery #footer{margin-right:0;}
#imgtext{float:right;}
#mainimg{float:left;}
#scrollmenuwrapper{
height: 150px;
overflow-x: auto;
overflow-y: hidden;
width:95%;
}
.level2page #scrollmenuwrapper{clear:both;}
.level3page #scrollmenuwrapper{clear:left!important;width:420px;}
.level3page #imgtext{margin-bottom:-100%;}

#Resources .organisation{border:0;margin-top:10px;font-size:1.2em;}
#Resources .organisation select{width:140px;border:1px solid #366466;}
#Resources .organisation  input.btn{background-color:#366466;color:#fff;border:0;}

#primary #scrollmenu ul{padding-left:0;}/*jk edit*/
#primary #scrollmenu li{float:left;margin-right:12px;margin-left:0;}/*jk edit*/
#Resources #secondary{display:none;}
#Resources #dropdowns{position:absolute;right:20px;top:195px;}
#Resources #dropdowns label.directory select{width:140px;border:1px solid #366466;}
#Resources #dropdowns label.directory input.btn{background-color:#366466;color:#fff;border:0;padding:2px;}
#dirmodule #submit{background-color:#366466;color:#fff;border:0;padding:2px;margin:0!important;text-transform:capitalize;width:80px;}
#return{margin:0!important;text-transform:capitalize;}
#return2{margin:0!important;text-transform:capitalize;}
p.dropdownor{margin-top:5px!important;margin-bottom:-5px!important;}
#Resources #dropdowns label.directory {margin-top:10px;font-size:1.2em;}
#Resources #dirmodform{margin-top:10px;}
/**********/
/* private area */
/**********/
#privatelog li{ list-style:none!important;list-style-type:none!important;}
#privatelog{position:absolute;left:90px;top:120px; white-space: nowrap;}

#privatearea #primary input.btn{background-color:#366466;color:#fff;border:0;padding:2px;text-transform:capitalize;width:70px;margin-left:40%;}
#privatearea .relatives{position:relative;}
#privatearea .relatives input{position:absolute;right:25%;margin-left:15%;width:35%;}
#privatearea label.txt{display:block!important;}
#privatearea #primary input{width:35%;}
#PrivateArea #navigation li{ list-style:none!important; list-style-type:none!important;}
#PrivateArea #navigation li a{color:#366466;list-style:none!important; list-style-type:none!important;}
/**********/
/* FOOTER */
/**********/
#footer {
	clear: both;
	/*background-image:url(footer_logo.gif);background-repeat:no-repeat;background-position:left top;*/
	height:30px;
	margin-top:5px;
margin-right:225px;
}
#footer ul {
	list-style: none;
}
#footer ul li {
	display: inline;
	float:left;							/* Hit IE6 with a big stick because it still can't figure this one out! */
}
#footer ul li a {
	display: block;								/* The usual routine by now */
	padding: 2px 10px;
	font-size:1.1em;
	
}
#footer ul li.stafflogin{float:right;}
#footer ul li.stafflogin a{font-weight:bold;}
/**************/
/* FLOAT HACK */
/**************/
/*
When the contents of a div are floated, in some browsers the containing
block has a tendency to collapse. This isn't usually a problem until you start
putting background colours or background images in that div. This is a
rather neat hack* that deals with that issue. Try turning this section off and
watch the effect it has on the grey background on the header navigation.

IE6 would get confused with the border on the top of the footer so the border
has been added to the bottom of #maincontent to create the same effect. This is
why #maincontent is hacked here too otherwise the footer border would appear just
below the header as #maincontent would collapse due to the floated elements within it.

You can easily add to the elements that need this hack by adding them to
the list separated with commas
*/
div#header ul:after,
div#maincontent:after,
div#secondary:after
{content: "."; display: block; height: 0; clear: both; visibility: hidden;}

div#header ul,
div#maincontent,
div#secondary,
{display: inline-block;}

* ol li {
	margin-left:15px;
}

* ol {
		margin-left:25px;
}


/* Hides from IE-mac \*/
* html div#header ul,
* html div#maincontent,
* html div#secondary
{height: 1%;}

div#header ul,
div#maincontent
{}
/* End hide from IE-mac */

/*

* Yes, OK, there is one tiny little hack - but this is not a browser specific hack -
  no "sniffers", conditional comments or anything is required to get this working :o)

*/