/****************************************************************
   																|
   DESCRIPTION: Controls the layout of the site and styles		|
            	the menus										|
																|
 ****************************************************************/

/**********************************************************************************
   #content: Sets width of site to 780px (works well down to 800x600 resolutions)
 **********************************************************************************/

#content {  
  padding-top:6px;
  text-align: left; 
  width: 780px;
  margin: 0 auto;
}

/**************************************************************
   #header: Holds logo / cricket image and also utility links
 **************************************************************/

#header {
	position: relative;
	background-color: #006633;
	padding-left: 5px;
    padding-right: 5px;
	width: 780px;
}

/* This displays the logo and background image, if CSS is turned off user sees the H1 text */
#header H1 {
	padding: 0px;
	margin: 0px;
	height: 140px;
	text-indent: -9999px; /* hides underlying H1 text off screen */
	background-image:  url("../ONSIDE_images/backgrounds/OSCL_header.jpg");
	background-repeat: no-repeat;
}

/* Sets link style to work well with blue tab effect */
#header a {color:#FFFFFF; text-decoration:none;}

/* container for the utility links - Sitemap and Contact*/
#header #util_links {
	position: absolute;
	z-index: 3;
	top: -16px;
	left: 573px;
	width: 205px;
	padding: 5px;
	text-align: left;
	height: 30px;
	
}



/**************************************************************
   #mainMenu: Primary Navigation 
 **************************************************************/

#mainMenu {
	float: left;
	width: 100%;
	height: 40px;
	clear: both;
	background-color: #006633;
	background-image:  url("../ONSIDE_images/backgrounds/main_nav_bg.jpg");
	background-repeat: repeat-x;
	background-position: top;	
	padding-left: 5px;
    padding-right: 5px;
}

#mainMenu ul {
  margin: 0;
  padding: 0;
  
}

#mainMenu li {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}

#mainMenu li a {
  float: left;
  margin: 0 2px;
  padding: 5px 0.5em;
  height: 40px;
  font: 400 1em "trebuchet ms", serif;
  text-decoration: none;
  text-transform: lowercase;
  color:#ffffff;

}

/* rollover / current section effect */
#mainMenu li a:hover,
#mainMenu li a.here {
    background-image:  url("../ONSIDE_images/backgrounds/main_nav_bg_on.jpg");
	background-repeat: repeat-x;
	background-position: top;	  
}

.standardlist{
list-style-image:none; list-style:square;
}

/****************************************************************************
   #navcontainer: The side menu - acts as submenus for a particular section
 ****************************************************************************/


 #navcontainer {
	margin-top: 5px;
	background-color: #ecf5ff;
	padding-top: 12px;
	padding-bottom: 20px;
	background-image:  url("../ONSIDE_images/backgrounds/torn_effect_blue.gif");
	background-repeat: repeat-x;
	background-position: bottom;
}

/* Displays blue arrow bullet to help highlight we are on that page*/
#navcontainer li#active{
  list-style-image: url(../ONSIDE_images/bullets/bullet_active.gif);
  }
  
#navcontainer li#subactive{
  list-style-image: url(../ONSIDE_images/bullets/bullet_active.gif);
  }

#navcontainer a#current, #subcurrent{
 font-weight:bold;
}

#navcontainer a:hover{
 font-weight:bold;
}


/**************************************************************
   #page: Holds the main page content.
 **************************************************************/

#page {
	color: #000000;
	float: left;
	width: 100%;
	clear: both;
	background-color:#ffffff;
    padding-bottom:20px;
    padding-left: 5px;
	padding-right: 5px;
	background-image:  url("../ONSIDE_images/backgrounds/torn_effect_green.gif");
	background-repeat: repeat-x;
	background-position: bottom;
}




/**************************************************************
   #footer: Container for footer information
 **************************************************************/

#footer {
	padding: 8px;
	clear: both;
	background-color: #006633;
/*	background-color: #EFEFEF;*/
	font-size: 0.85em;
	width: 770px;
	margin: 0 auto;
	padding-left: 5px;
	padding-right: 5px;
	color:#ffffff;
	}

#footer a {color: #ffffff;}

/**************************************************************
   Classes for creating various column layouts as per required
   * Max 4 columns
 **************************************************************/

.width100 {
  width: 100%;
}

.width75 {
  width: 74%;
}

.width50 {
  width: 49.7%;
}

.width33 {
  width: 32.7%;
}

.width25 {
  width: 24.7%;
}



/**************************************************************
   Useful classes to align / float things
 **************************************************************/

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}


/**************************************************************
   Useful classes 
 **************************************************************/

.clear {
  clear: both;
}

.block {
  display: block;
}

.highlighter{
   background-color:#FFFF99;
   }

.small {
  font-size: 0.8em;
}

.green {
  color: #009900;
}

.red {
  color: #FF0000;
}

.grey {
  color: #666;
}