/*---------------------------------------------------------------------------------------
  

  
---------------------------------------------------------------------------------------*/


/*
    Basics
    Layout
    Navigation
    Misc
*/



/*---------------------------------------------------------------------------------------
   Basics
---------------------------------------------------------------------------------------*/

/* Default and Common CSS styles */
@import "default.css"; /* Base CSS - nothing to edit */
@import "common.css"; /* Common CSS - nothing to edit */
@import "typography.css"; /* Typograhy and headings */
@import "buttons.css"; /* Image replacement buttons */
@import "content.css"; /* Page specific styling */
@import "forms.css"; /* Styling for specific forms */


/* Body */
body	{ background: #fff;}


/*---------------------------------------------------------------------------------------
   Layout 
---------------------------------------------------------------------------------------*/

/*------------------------------------
   Container
------------------------------------*/
#pageContainer { width: 994px; margin: 0 auto;}

/*------------------------------------
   Accessibility
------------------------------------*/
#accessContainer { overflow: auto; width: 940px; margin: 0 0 0 25px; background: #f5f5f5; border: 1px solid #ebe8e8;}
#skip { float: left; padding: 2px 0 2px 10px;}
#accessibility { float: right; padding: 2px 10px 2px 0;}
.accessSm {}
.accessMed { font-size: 1.2em;}
.accessLrg { font-size: 1.4em;}

/*------------------------------------
   Header
------------------------------------*/
#header { overflow: hidden; width: 928px; margin: 0 0 0 34px;}
#logo { float: left;}
#kbt { float: right; margin: 0px 0 0 0;}
#btua { float: right; margin: 30px 0 0;}

/*------------------------------------
   Footer
------------------------------------*/
#footer { text-align: center; width: 100%; padding: 0 0 15px; overflow: auto;}

/*------------------------------------
   Page Cols  (Page Specific)
------------------------------------*/
/* Default */
#pageCols { width: 959px; padding: 0 0 0 35px; overflow: hidden; margin-top: 20px;}
#mainCol { width: 930px; }

/* Home Page */
body.homePage #pageCols { margin-top: 0;}
body.homePage #sideCol {float: left; width: 226px;}
	* html body.homePage #sideCol { display: inline;}
body.homePage #mainCol { float: left; width: 458px; margin-left: 10px;}
	* html body.homePage #mainCol { display: inline;}
body.homePage #sideCol2 { float: left; width: 227px; margin-left: 10px; margin-top: 20px;}
	* html body.homePage #sideCol2 { display: inline;}

/* Tidyup Page */
body.tidyupsPage #sideCol { width: 318px; padding: 0;}
body.tidyupsPage #mainCol { width: 344px;}
body.tidyupsPage #sideCol2 { width: 221px; }

/* Schools and Groups  Col Widths */
body.schoolsandgroupsPage #mainCol { width: 888px; padding: 0 20px;}

/* Funstuff Page Col Widths */
body.funstuffPage #sideCol { width: 296px; padding: 0;}
body.funstuffPage #mainCol { width: 627px;}

/*------------------------------------
   Full Width Outline
------------------------------------*/
.fullOutline { width: 930px; background: url('../images/bg-fullOutline.png') repeat-y;}
.fullOutlineTop { width: 100%; height: 12px; background: url('../images/bg-fullOutlineTop.png') no-repeat; line-height: 12px; overflow: hidden;}
.fullOutlineBottom { width: 100%; height: 12px; background: url('../images/bg-fullOutlineBottom.png') no-repeat; line-height: 12px; overflow: hidden;}
.fullOutlineContent { width: 909px; padding: 0 10px; overflow: hidden;}




/*---------------------------------------------------------------------------------------
   Navigation
---------------------------------------------------------------------------------------*/
/*------------------------------------
   Main Nav
------------------------------------*/
#navBar { background: #000; overflow: hidden; position: relative; width: 928px; margin: 0 0 0 34px; background: url('../images/bg-navBottom.png') no-repeat bottom left #000;}
ul#mainNav { padding: 0 10px; margin: 0; list-style: none; background: url('../images/bg-navTop.png') no-repeat; overflow: hidden; width: 908px;}
ul#mainNav li { float: left; display: inline; margin: 0; padding: 0 1px 0 0; background: url('../images/nav-div.png') no-repeat center right;}
ul#mainNav li a { float: left; color: #fff;  text-decoration: none; padding: 8px 14px; background: #000; font-weight: bold;} 
ul#mainNav li.last{ background: none;}
ul#mainNav li.last a { border-right: 0; padding: 8px 13px;}
	ul#mainNav li a:hover { color: #c5de91;}
	ul#mainNav li.selected a { background: #98c93c; color: #000 !important;}
ul#mainNav li.selected, ul#mainNav li.prevSelected { background: none;} /* This removes the divider on the selected nav item and previous nav item. Requires mainnav jquery to add the necessary classes */
	
/*------------------------------------
   Minor Nav
------------------------------------*/
ul#minorNav { margin: 20px 0 0; padding: 0 0 0 40px; list-style: none; float: left;}
ul#minorNav li { display: inline; margin: 0; padding: 0; background: url('../images/footerDiv.gif') no-repeat center right;}
ul#minorNav li.last { background: none;}
ul#minorNav li a { display: inline; padding: 0 9px 0 6px; color: #000; text-decoration: none; font-size: .9em; font-weight: normal;}
	ul#minorNav li a:hover { text-decoration: underline;}
	ul#minorNav li a.selected { text-decoration: underline; font-weight: bold;}

/*------------------------------------
   Minor Nav 2
------------------------------------*/
ul#minorNav2 { margin: 20px 0 0; padding: 0 30px 0 0; list-style: none; float: right;}
ul#minorNav2 li { display: inline; margin: 0; padding: 0; background: url('../images/footerDiv.gif') no-repeat center right;}
ul#minorNav2 li.last { background: none;}
ul#minorNav2 li a { display: inline; padding: 0 9px 0 6px; color: #000; text-decoration: none; font-size: .9em; font-weight: normal;}
	ul#minorNav2 li a:hover { text-decoration: underline;}
	ul#minorNav2 li a.selected { text-decoration: underline; font-weight: bold;}


/*---------------------------------------------------------------------------------------
   Misc.
---------------------------------------------------------------------------------------*/
/* Error Page */
body.errorPage p { float: left; margin: 100px 0 0 80px; width: 400px; text-align: center;}

hr { border: 0; background: #000; color: #000; height: 1px; margin: 0; padding: 0;}
.imgRight { float: right; margin: 0 0 10px 15px;}
.imgLeft { float: left; margin: 0 15px 10px 0;}
#map { width: 221px; height: 359px;}
#mapBig { width: 661px; height: 494px; border: 1px solid #ccc;}

.pastEvent  {color:#cccccc}
.currentEvent   {color:black}


/*---------------------------------------------------------------------------------------
   Amends (here while coding for simplicity so needs to be better organised when done)
---------------------------------------------------------------------------------------*/
