/* adding borders to a div alters rendering in both IE and FF*/
/* p tags affect padding of floated divs differently to wrapping divs */
/* absolute positioning a div causes its displacing capaciy to be ignored */

/* Removed textarea from this CSS Selector Set - LUKE */

/* Updated 19/10/2011 by Joshua M Newth from Community Skillsbank, The Centre. */
body {
  padding : 0px;
  padding-bottom: 30px; /* This Padding allows for the "Under Development" Banner to be shown at the bottom of the page */
	font : small verdana, Helvetica, Arial, sans-serif;
	font-size :small;
	margin : 0px;
}

form{
	margin : 0px;
	padding : 0px;
	font-family:verdana,helvetica,arial;
}

form table td{
	vertical-align : top;
}

form table th{
	font-size : xx-small;
	text-align : right;
	vertical-align : top;
}

h1{
	color : #97b8f4;					/* Changed */
	/*font-family : "Times New Roman", Georgia, Serif;*/	/* Changed */
	font-family : Arial, Helvetica, sans-serif;
	font-size : 1.8em;					/* Changed */
	letter-spacing: .05em;					/* Changed */
	margin-top: 0px;					/* Added */
}

h2{
	color : #0000FF;
	font-family : Arial, Helvetica, sans-serif;
	font-size : 1.6em;					/* Changed */
}

h3{
	font-size:1.2em;
	color: #0D207F;
}

h4{
	font-size:1.1em;
	color: #000000;
}

/* Added (new input style) */
input {
	padding: 2px 5px 2px 5px;
}

table th{
	text-align : right;
	width : 25%;
}

/*
	In the calendar.php file please remove the lines that print the custom table.tableformat td and th values.
	That being:
		<style>
		table.tableformat td {padding:10px;} 
		table.tableformat th {padding:10px;}
		</style>
*/
th, td{
	/*margin : 2px;*/			/* Removed (margin does not apply to cells, only outer table) */
	/*padding: 2px;*/			/* Removed */
	padding : 8px 10px 8px 10px;		/* Added */
	vertical-align : top;
}

.highlight{
	color : #5F5F5F;
	font-weight : bold;
}

#content {
	/*border : 1px solid #0D207F;*/		/* Removed */
	margin : 0px 242px 0px 194px;		/* Changed left margin */
	padding : 10px;
	padding-top : 0px;
	border-left: 1px  solid #dddddd;	/* Added */
	border-right: 1px  solid #dddddd;	/* Added */
	line-height: 1.5em;			/* Added */
}

/* Added (new table style) */
table.content {
	border: outset 1px;
	margin: auto;
	margin-bottom: 20px;
	width: 98%;
	background-color: white;
}

table.content th, table.content td {
	padding: 0px 10px 0px 10px;		/* 40px 10px 30px 10px without manual spaces (eg <p></p>) */
	border: solid 1px #dddddd;
	border-left: 0;
	border-top: 0;
}

/* Added (new table style) */
table.subcontent {
	border: solid 1px #dddddd;
}

/*
	In public_roles.php please have it print each role as a separate table instead of one large table
	with the gaps as empty rows because it prints the left and right borders inbetween and is strange
	to look at.

	Just have it print:
		</table><table class="tableformat"></tbody></table>

	Instead of:
		<tr><td colspan="2" style="vertical-align:top;">&nbsp;</td></tr>

	And for the last round: (if you don't want an empty table at the end, but it doesn't matter if
					nothing is ever going to be put under it)
		</table>
	
	Also have it print a H1 heading.
		Note that it would better if there was a corresponding Latest Volunteering Opportunities
		entry in the system, there is one but that's unrelated and not linked to any menus so it
		seems it must be hardcoded into the menu. It would also mean the menu could be sorted
		alphabetically.
*/
table.tableformat{
	border-collapse: collapse;
	width: 98%;				/* Added */
	margin: auto;				/* Added */
	margin-bottom: 20px;			/* Added */
}

table.tableformat th{
	background-color:#0B1B6C;
	text-align:center;
	vertical-align:bottom;
	color:#FFFFFF;
	border:1px solid #0B1B6C;
	font-size:xx-small;
}

table.tableformat td{
	background-color:#FFFFFF;
	color:black;				/* Changed */
	border:1px solid #dddddd;		/* Changed */
	text-align:left;
}

table.datagrid{
	width:98%;
}
table.datagrid td, table.datagrid th{
	border: 1px solid black;
	font-size:x-small;
}
table.login  a{
	color: #0B1B6C;
}
table.login  td{
	color: #0B1B6C;
	font-size:x-small;
}

#footer {
	background-color : #FFFFFF;
	border-top : 1px solid #D3D3D3;
	clear : both;
	margin : 10px 10px 10px 10px;
	text-align : center;
}
/*
#footer a {
  border-style: solid;
  border-width: 0 1px 0 0;
  padding: 0 5px 0 5px;
}
*/
#footer span.botMenu {
  padding: 0 5px 0 5px;
}

#footer ul li {
	display : inline;
	font-size : x-small;
	list-style-type : none;
}

#header {
	padding : 5px 10px 12px 5px;
}

#logo{
	margin-left : 10px;
	margin-top : 10px;
	position : relative;
}

#main {
	margin-top : 0px;
}

#navglobal{
	float : right;
	padding : 10px;
	text-align : right;
}

/*#navglobal a {
  border-style: solid;
  border-width: 0 0 0 1px;
  padding: 0 5px 0 5px;
  }
  #navglobal a.first {
    border-left: 0;
    }
*/

/*
	In index.php and every script that prints the sidebar needs to change the right offset of the top right corner of image.
	
	Eg. Change:
		<img border="0" src="./Welcome to Community Skillsbank_files/top_right.gif" width="10" height="10" style="position:relative; top:-0.7em; right:-144px">
		
	To:
		<img border="0" src="./Welcome to Community Skillsbank_files/top_right.gif" width="10" height="10" style="position:relative; top:-0.7em; right:-154px">

	As well because I changed the line-height from the default 1.25em to 1.5em I found the top offset for each of the top_left.gif and top_right.gif (there should be 2 of each)
	needs to be changed from -0.7em to -0.8em.	
*/		
#sidebar1 {
	background-color : #b2d8ff;		/* Changed */
	border : 1px solid #b2d8ff;		/* Changed color */
	clear : left;
	float : left;
	margin-bottom : 10px;
	margin-left : 5px;
	padding : 5px;
	width : 168px;				/* Changed */
	line-height: 1.5em;			/* Added */
}

#sidebar1 ul{
	margin-top : -1em;
}

#sidebar1 ul {
	list-style : none;
	margin-left : 0px;
	padding-left : 5px;			/* Changed */
	padding-right: 5px;			/* Added */
}

#sidebar1 ul li {
	border-bottom : 1px solid #ffffff;	/* Changed color */
	/*margin-bottom : 4px;*/		/* Removed */
	padding-bottom : 12px;			/* Changed */
	padding-top: 4px;			/* Added */
	font-weight:bold;
}
#sidebar1 ul li span{
	
}

#sidebar1 ul li a{
	color : #0D207F;
	text-decoration : none;
	width : 10em;
	display: block;				/* Added (so cursor doesn't have to be over text) */
	width: 100%;				/* Added */
	height: 100%;				/* Added */
}

#sidebar1 ul li a:hover{
	color : white;				/* Changed */
}

#sidebar2 {
	background-color : #b2d8ff;		/* Changed */
	border : 1px solid #b2d8ff;		/* Changed color */
	clear : right;
	color : #0D207F;
	float : right;
	margin-bottom : 20px;
	padding : 5px;
	width : 220px;
	line-height: 1.5em;			/* Added */
}

#sidebar2 ul li {
	margin-bottom : 3px;
	padding-bottom : 3px;
}

#sidebar2 ul li a{
	color : #0D207F;
}

#sidebar3, #sidebar4 {
	background-color : #b2d8ff;		/* Changed */
	border : 4px double #97b8f4;		/* Changed color */
	clear : left;
	color : #000000;
	float : left;
	margin-bottom : 10px;
	margin-left : 5px;
	padding : 5px;
	padding-top : 10px;			/* Added */
	width : 162px;				/* Changed */
	line-height: 1.5em;			/* Added */
}

.message_bold{
	font-weight:bold;
	color:red;
}
.pageUpdated {
  color: #666;
  font-size: xx-small;
  text-align: center;
}