/*
+---------------------------------------------------------------+
|	1st Winnersh Scout Group.
|	/includes/styleMain.css
|   Cascading Style Sheet
|
|
|	©Steve Graham 2006-2008
|
|	steve.graham@matata1.myvnc.com
|
+---------------------------------------------------------------+
*/
/*
* {border: 1px solid orange;}
*/

/*
* Scouts - style sheet
* Main styling components
* This sheet called in the header file "includes/header.htm"
*
* This version specific to 1st Winnersh Scout Group.
* www.winnersh.escouts.net
*
* Copyright ©Stephen N Graham 2006-2008
*/

/* **************************************************************** */
body {
  text-align:center;  /* hack to center layout in quirky browsers */
}
#container {
  text-align:left;    /* required to reverse out the centering hack in body style, above */
}

/* A hack to force the vertical scrollbar in Firefox
   which prevents the window width re-sizing when the
   content exceeds the height of the current window */
html {
  height:100.5%;
}
/* **************************************************************** */

/* begin main site format components */
/* **************************************************************** */
body {
  margin:0;
  font-family: Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, sans-serif;
  font-style: normal;
  font-size:12px;
  background-color:#FFFFFF;
  color: #000;
}
#container {
  position:relative;
  width:950px;          /* set the width of the page. Note that the logo image must be the same width  */
  padding:0px;
  margin-left:auto;     /* center on the page.  But see the centering hack for quirky browsers, above. */
  margin-right:auto;
}
#logoBox {
  width:100%;
  height:80px;
  background-color:#D1DADC;      /* set a colour to match you logo image if for any reason it's not there */
  background-image:url(../images/logo.jpg);  /* this displays the site logo as an image */
  background-position: center;
  background-repeat: no-repeat;
}
#logoBox h1 {
  position:absolute;
  left:-3000px;  /* off screen! So that it's only visible for non-CSS browsers */
}
/* Begin subHead styles (the left hand column,    */
/* the title bar for the lefthand column         */
/* **************************************************************** */
#descColTitleM, #descColTitleB, #descColTitleC, #descColTitleS{
  float: left;
  height:22px;
  width:230px;
  text-align:center;
  color: #ffffff;
  padding-top:4px;
}
#descColTitle span {
  display:block;
  font-size:14px;
  padding-top:5px;
}

/* begin navigation menu styles */
/* **************************************************************** */
#menuBox {
  position: relative;
  float: left;
  left:0;
  z-index:400;
  width:720px;
  height:26px;
  background-color: #999;
}
#menu {
  position:absolute;
  width: 100%;
  left:0px;
  top:0px;
  padding:3px 0 3px 0;
  margin:0;
  text-align:left;
}
#menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 11.1%;
  float: left;
  text-align: center;
}
#menu ul ul{
	text-align: center;
}
#menu ul ul li{
  height:22px;
  padding-top:3px;
}
#menu ul + ul li h2 a{
	border-left: 1px solid #444;
}
#menu ul ul ul{
    position: absolute;
    top: 0;
    left: 100%;
}
#menu a, #menu h2, #menu li {
font: normal 14px/18px arial, verdana, tahoma, "Trebuchet MS", helvetica, sans-serif;
display: block;
margin:0;
padding:0 0 2px 0;
}
#menu a,
#menu li
{
color: #4D1979;
text-decoration: none;
margin:0;
}
#menu li:hover,
#menu li:hover a:hover
{
color: #fff;
}
#menu ul ul a{
padding-left:4px;
}
#menu ul:hover ul {
  background-color: #999;
}
#menu ul ul li:hover, #menu ul ul li:hover ul {
  background-color: #AAA;
}
#menu ul ul ul li:hover, #menu ul ul ul li:hover ul {
  background-color: #BBB;
}
#menu ul ul ul ul li:hover{
  background-color: #CCC;
}
#menu li {
  position: relative;
}
#menu ul ul {
position: relative;
left:5px;
z-index: 500;
  width: 99%;
}
#menu ul ul,
#menu ul li:hover ul ul,
#menu ul ul li:hover ul ul {
  display: none;
}
#menu ul li:hover ul,
#menu ul ul li:hover ul,
#menu ul ul ul li:hover ul {
  display: block;
}
/* end navigation menu styles   */

/* end subHead styles   */

/* ******************************  */
/* Begin the Content Area styles  */
/* ******************************  */

/*      Main Column Styles         */
/* ******************************  */
#contentBoxM, #contentBoxB, #contentBoxC, #contentBoxS{
  position:relative;
  clear:both;
  width:100%;
  height:100%;
  background-color:#e9e9e9; /* a light tint to the background */
  background-repeat:repeat-y;
}
/*    Main page styles    */
/* these images provide the left hand column colour, extended to bottom of page */
#contentBoxM {
  background-image:url(../images/leftBack.gif);
}
/*    Beavers page styles    */
#contentBoxB {
  background-image:url(../images/leftBeaver.gif);
}
/*    Cubs page styles    */
#contentBoxC {
  background-image:url(../images/leftCub.gif);
}
/*    Scout page styles    */
#contentBoxS {
  background-image:url(../images/leftScout.gif);
}
/* left hand column */
#descCol {
  float:left;
  width:230px;
  color:#FFF;
  overflow:hidden;
}
#descCol p {
  margin-bottom:0;
}


div.desc {
  width:90%;
  padding:10px 5% 10px 5%;
}
div.desc h2 {
  font-size:16px;
  margin:18px 0px 6px 0px;
}
div.desc h3 {
  font-weight: bold;
  margin:10px 0px 5px 0px;
}
div.desc h5 {
  font-size:12px;
  margin:0px 0px 6px 0px;
}
div.desc ul {
  padding:0px 0px 0px 15px;
  list-style-position:outside;
}
div.desc ul ul {
  padding-left:10px;
}
div.desc img {
  display:inline;
}

/* right hand column */
#mainCol {
  float:left;
  width:720px;
  padding:0px;
}

/* Begin content Title Styles */
/* ***************************************************************** */
#contentHeader {
  width:96%;
  height:80px;
  margin:10px 2% 0px 2%;
  background-color:#ddd;
}
#contentLogo {
  float:left;
  background-color:#ccc;
  width:150px;                   /* this is the width and height of your logo images! */
  height:80px;
}
#contentTitle {
  color:#fb6b00;
  margin-left:170px;             /* this is 20px greater than the #contentLogo width, above */
  padding:12px 0px 0px 50px;
}
#contentTitle h1 {
  display:inline;
  font-size:24px;
  line-height:150%;
}
#contentTitle h1 span {
  display:inline;
  font-size:18px;
}
#contentTitle h1 small {
  display:inline;
  font-size:20px;
}
#contentBody {
  position:relative;
  margin:0 2% 10px 2%;
  width:96%;
}



/*
div.imgCentre {
}
div.imgCentre span {
	font:italic 10px/14px arial, verdana, tahoma, "Trebuchet MS", helvetica, sans-serif;}
*/

/* ************************** */
/*    Footer box for all pages    */
/* ****************************** */
#footerBox {
  position:relative;
  clear:both;
  width: 100%;
  padding:0;
  background-color:#DDD;
  color: #555;
}

#footerBox p {
  margin-top:0;
  padding: 0px 10px 0px 10px;
  text-align: center;
  font-style: italic;
  font-size: 10px;
}
/** ----- Credits ----- **/
#footerBox div.credits{
    position:absolute;
    width:21%;
    left:78%;
    top:5px;
}
#footerBox div.credits p{
    text-align:left;
    float:right;
}
#footerBox div.credits img{
    float:right;
}
/* **************************** */
/* end Footer box for all pages */

/* ***************************************************************** */
/* end main styling components  */


/* Begin content specific Styles */
/* ***************************************************************** */


/*    Form specific styles    */
fieldset {
	margin:0 0 5px 0;
	border:0px solid green;
	padding:0;
}
input {
  background-color: #FFF;
}
#formDisp {                  /* where is this used? */
  font-size: 12px;
  vertical-align: top;
  padding-left:0px;
  padding-right:0px;
  line-height: 130%;
  margin-top:5px;
}
#formDisp div {
  clear:both;
  padding:5px 0 5px 0;
}
#formDisp span.label {
  display:block;
  float:left;
  width:180px;
  font-style: italic;
  text-align:right;
}
input, textarea {
  border:1px solid #BBAF82;
  padding-left:5px;
  padding-right:5px;
}
.formw {
  text-align: left;
  margin-left:13px;
}
/* ************************** */
/*  end Form specific styles  */

/* ************************** */
/*   Admin specific syles     */
#admin {
	width:91.7%;
	margin-top:30px;
	margin-left:4.2%;
    font-size:12px;
    line-height: 130%;
}

#admin.editor {
  width:98.8%;
  margin:0px 0.6% 0px 0.6%;
}

#admin a {
	text-decoration:none;
}
.header{
    position: relative;
    background-color:#ddd;
    width:100%;
}
#admin table, #contentBody table {
    font-size:10px;
    line-height: 100%;
    font-variant:normal;
}
#admin td span{
    font-size:12px;
    line-height:140%;
}

/* Editor page */

/* headings */
#editorTitle {
  width: 50%;
  float: right;
  margin: 0 25% 0 0;
  padding: 0;
  color: #fb6b00;
}
#editorTitle h1{
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}
#editorTitle h2{
  text-align: center;
  font-size: small;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}

div.buttonBar {
  margin: 0;
  padding: 0;
  clear: both;
  float: right;
}
#admin div.buttonBar button{
  margin-bottom: 0px;
}


#article .header span {
	display:block;
	margin-bottom:0px;
}
div.editor div.header {
  margin-left: 0px;
  padding-left: 10px;
  padding-right:10px;
  width:97.25%;
}


/* end editor page */

/** Login form and upload form **/
#fileUpload fieldset {
	width:100%;
}
#fileUpload fieldset>div.float {
	width:50%;
	margin-bottom:50px;
}
#fileUpload fieldset div.float+div.float {
	width:45%;
	float:right;
}
#fileUpload div.radButton {
	clear:left;
}
#loc, #dev {
	overflow:hidden;
	width:100%;
}
#fileUpload button, #addLoc button {
	display:block;
}
#fileUpload #submit {
	margin-top:20px;
}
#logon span{
	display:block;
	margin-bottom:5px;
}
#logon span span{
	float:left;
	width:9em;
}
#logon select {
	overflow:hidden;
	width:275px;
}
#logon p input {
	border:0;
}

tr {
	background-color:#bee;
}

tr.heading {
	background-color:#4d1979;
	color: #99cc00;
}
tr.odd {
	background-color:#aaa;
}
tr.even {
	background-color:#ccc;
}
tr.odd img {
	border:0;
	margin:0px;
	padding:0px;
}
tr.odd:hover, tr.even:hover {
	background-color:#ccffff;
}
td.tBut {
  background-color:#fff;
}
td.center {
  text-align: center;
}


/* Link specific styles */
.categoryName a {
  display:block;
}
#contentList .categoryName a:hover{
    color:#000;
}
/* move the link icon and description to the sidebar */
span.categoryDesc {
  display: block;
  position:absolute;
  width:214px;   /* also set $iconWidth in links.php */
  left:-236px;   /* move to the sidebar */
  color:#FFF;
  font-size:10px;
}
#contentBody span.categoryDesc img{
  margin: 0;
  border: 0;
}

/*
div.categoryName img {
  width:220px;
}
*/

/* show the link icon and description when the link is hovered */
#contentBody div.categoryName a:hover span.categoryDesc{
  display:block;
}
/* hide the link icon and descriptions on normal view */
#contentBody div.categoryName span.categoryDesc {
  display:none;
}

/* News page specific - sidebar menu */
table.news {
  width: 100%;
  padding:0;
  margin:0;
}
table.news tr {
  background-color: transparent;
}

table.news td {
  padding:5px 5px 5px 5px;
  border:1px solid #999;
  margin:0;

}
table.news tr td + td{
  width: 24px;
}

.news {
  margin-top: 10px;
}
table.news tr + tr td{
  border-top:0px solid #999;
}
table.news td:hover{
  background-color:#5e2a8a;
}
.news a {
  text-decoration: none;
  color:#00ffff;
  overflow:hidden;
}
.news a:link{
  color:#00ffff;
}
.news a:visited {
  color:#fff;
}
.news a:hover {
  color:#fff;
}
.news a:active {
  color:#000;
}
.news span{
  color:#fff;
}
/* programme view table  */
.progTable{
  width:100%;
}
.progTable tr{
  height: 30px;
}