/**************************************************************
   GENERAL STYLING
 **************************************************************/

body{
padding:0;
line-height: 1.4em;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
background-color: #e2e8ed;
color: #444444;
}

b{font-size: 110%;}

a{
color:#3D6EAC;
font-weight: bold;
}

a:hover{
color:#688318;
}

.blue{
color: #3D6EAC;
}

.top{
text-align: right;
font-size: 0.7em;
}

h1{
color:#444444;
font-size: 1.2em;
font-weight: bold;
}

h2{
color:#444444;
font-size: 1em;
}

h3{
color: #444444;
font-size: 1.1em;
margin-top: 18px;
}

ul.main {
list-style-position:outside;
margin-left: 15px;
padding-left: 10px;
list-style-image: url(../images/bullet.gif);
line-height: 1.4em;
}

ul.sublist {
list-style-position:outside;
margin-left: 8px;
padding-left: 8px;
list-style-image: url(../images/bullet2.gif);
line-height: 14px;
}

ul.customerquote {
list-style-position:outside;
margin-left: 8px;
padding-left: 8px;
list-style-image: url(../images/bullet2.gif);
line-height: 20px;
}

li {
margin: 0px;
padding: 0px;
}

#breadcrumb{
width: 785px;
font-size: 0.8em;
color: #444444;
padding: 10px 0px 5px 15px;
}

.date{
border-bottom: 1px solid #3d6eac;
font-size: 1.1em;
}
/**************************************************************
   HEADER AND TOP BANNER
 **************************************************************/
 
#maincontainer{
margin:0px auto; 
width:800px;
background-color: #ffffff;
}

#topbanner{
height: 100px;
width: 800px;
background-image:url(../images/charity_learning_banner.gif);
background-repeat:no-repeat;
}

/**************************************************************
   MAIN 3 COLUMNS INDEX = COLWIDTH, THEN CONTENT 
 **************************************************************/

#leftind {
width:245px; 
padding:0px 10px 10px 10px; 
float:left; 
margin-top: 2px;
}

#middleind {
width:250px; 
padding:0px 10px 10px 10px; 
float:left; 
margin-top: 2px;
}

#rightind {
width:245px; 
padding:0px 0px 10px 10px; 
float:left; 
margin-top: 2px;
}

#left {
width:150px; 
padding:30px 10px 10px 10px; 
float:left; 
margin-top: 2px;
}

#middle {
width:390px; 
padding:30px 20px 10px 10px; 
float:left; 
margin-top: 2px;
margin-left: 10px;
}

#right {
width:170px; 
padding: 30px 0px 10px 10px; 
float:left; 
margin-top: 2px;
}

#vidclip {
width:390px;
height:196px;
clear:both;
background-color: Black;
}

h4{
color: #444444;
font-size: 1.2em;
background-image:url(../images/title_bg_content.gif);
background-repeat:no-repeat;
padding: 5px 5px 8px 10px;
}

#leftcontentind h2{
color: #444444;
font-size: 1.2em;
background-image:url(../images/title_bg.gif);
background-repeat:no-repeat;
padding: 5px 5px 8px 10px;
}

#leftcontent h2{
color: #444444;
font-size: 1.2em;
background-image:url(../images/title_bg_left.gif);
background-repeat:no-repeat;
padding: 5px 5px 8px 10px;
}

#leftcontent h3{
color: #444444;
font-size: 1.2em;
background-image:url(../images/title_bg_2col_narrower.gif);
background-repeat:no-repeat;
padding: 5px 5px 8px 10px;
}

#midcontentind h2{
color: #444444;
font-size: 1.2em;
background-image:url(../images/title_bg.gif);
background-repeat:no-repeat;
padding: 5px 5px 8px 10px;
}

#midcontent h1{
color: #ffffff;
font-size: 1.4em;
background-image:url(../images/title_bg_content_blue.gif);
background-repeat:no-repeat;
padding: 5px 5px 8px 10px;
}

#midcontent h2{
color: #444444;
font-size: 1.2em;
background-image:url(../images/title_bg_content.gif);
background-repeat:no-repeat;
padding: 5px 5px 8px 10px;
}

#subcontent h2{
color: #444444;
font-size: 1.2em;
background-image:url(../images/title_bg_content.gif);
background-repeat:no-repeat;
padding: 5px 5px 8px 10px;
}

#rightcontent h2{
color: #444444;
font-size: 1.2em;
background-image:url(../images/title_bg_right.gif);
background-repeat:no-repeat;
padding: 5px 0px 8px 10px;
}

#rightcontent h3{
color: #444444;
font-size: 1.2em;
background-image:url(../images/title_bg_2col_narrow.gif);
background-repeat:no-repeat;
padding: 5px 5px 8px 10px;
}

#rightcontentind h2{
color: #444444;
font-size: 1.2em;
background-image:url(../images/title_bg.gif);
background-repeat:no-repeat;
padding: 5px 5px 8px 10px;
}

.courselistsub{
padding: 12px 10px 5px 0px;
color: #444444;
font-size: 1.0em;
font-weight: bold;
}

.courselist1{
padding: 4px 2px 4px 8px;
background-color:#e6f5a5;
}

.courselist2{
padding: 4px 2px 4px 8px;
background-color:#f2fad3;
}

.courselist3{
padding: 4px 2px 4px 8px;
background-color:#DAE8F4;
}

.courselist4{
padding: 4px 2px 4px 8px;
background-color:#ecf4fb;
}

ul.courselist {
list-style-position:outside;
margin-left: 0px;
padding-left:0px;
margin-top: -2px;
list-style-type: none;
}

.formtext {
left: 200px;
}

/**************************************************************
   BOTTOM BAR BEFORE FOOTER
 **************************************************************/

#bottom{
clear:both;
width:800px;
border-top: 1px dashed #add72f;
background-color: #eeeeee;
}

#bottomleft{
float:left;
width: 790px;
padding: 5px 0px 5px 10px;
background-color:#eeeeee;
}

#disclaimer{
clear:both;
width:800px;
background-color: #ee0000;
}

#disclaimerleft{
float:left;
width: 790px;
padding: 0px 0px 0px 10px;
background-color:#d8f090;
}

#bottomright{
float:left;
width: 390px;
}



/**************************************************************
   FOOTER
 **************************************************************/

#footer{
clear: both;
width: 800px;
height: 37px;
background-image: url(../images/charity_learning_footer.gif);
background-repeat:no-repeat;
}

#footer a{
color: #0055A4;
font-weight: normal;
}

#footerleft{
float: left;
width: 300px;
}

#footermid{
float: left;
width: 200px;
}

.footer{
color: #444444;
font-size: 0.8em;
text-align: right;
padding-right: 10px;
padding-top: 5px;
}

#footerright{
float: left;
width: 300px;
}

.copyright{
color: #444444;
font-size: 0.8em;
text-align:left;
padding-left: 10px;
padding-top: 5px;
}


/********************************************************************
 					START CONTACT FORM CSS 
 ********************************************************************/

#contactform{
width: 360px;
}

#eventbooking {
width:160px; 
}

label{
float: left;
text-align: left;
margin-right: 0.5em;
display: block;
}

.submit input
{
margin-left:120px;
margin-bottom: 10px;
} 

fieldset
{
border: 1px dashed #4E9EDA;
width: 100%;
padding:10px;
}

legend
{
color: #000;
background: #BEE620;
border: 1px solid #4E9EDA;
padding: 5px 6px;
} 

.error{
color:#FF0000;
font-size: 1.1em;}

.success{
font-size: 1.1em;}

.darkbkg{
background-color: #e2e8ed;
padding: 5px;
}

.field{
font-size: 0.8em;
}

.letter{
font-size: 1.4em;
color:#4e9eda;
font-weight: bold;
}

/********************************************************************
 					END CONTACT FORM CSS 
 ********************************************************************/
 
 
/***********************************************************
					ROLLOVER CSS
***********************************************************/
.roll1 { color: #a66; }
.roll1 a { position: relative; }
.roll1 a span { display: none; }
.roll1 a:hover { display: inline; } /* Needed to make it work in IE6 :S */
.roll1 a:hover span {
  display: block;
  position: absolute;
  right: -35em;
  top: -10em;
  width: 50em;
  height: 39em;
  margin-right: 0.2em;
  font: normal 70% Verdana, sans-serif;
  color: black;
  border: 0px solid gray;
  padding: 0.2em 0.5em 0.3em;
  cursor: default;
  z-index: 10;
  text-decoration: none;
  background-image:url(../images/screen_mm_big.png);
  background-repeat:no-repeat;
}

/* Titles - Soft Skills */
#roll2 li a {
text-decoration:none;
}

#roll2 li a span {
visibility:hidden;
display:none;
position:relative;
right:190px;
top:-36px;
width:200px;
height:0px;
color:#000;
}

#roll2 li a:hover span {
visibility:visible;
display:block;
}

#roll2 li a:hover {
visibility:visible;
color: #666666;
}

/* Quotes */
#roll3 li a {
text-decoration:none;
}

#roll3 li a span {
visibility:hidden;
display:none;
position:relative;
right:-30px;
top:-240px;
width:600px;
height:449px;
}

#roll3 li a:active span {
visibility:visible;
display:block;
}

#roll3 li a:active {
visibility:visible;
color: #666666;
}

#roll3 li a:focus span {
visibility:visible;
display:block;
}

#roll3 li a:focus {
visibility:visible;
color: #666666;
}

/* WOL*/
#roll-mem li a {
text-decoration:none;
}

#roll-mem li a span {
visibility:hidden;
display:none;
position:relative;
right:0px;
top:-250px;
width:350px;
height:0px;
color:#000;
}

#roll-mem li a:hover span {
visibility:visible;
display:block;
}

#roll-mem li a:hover {
visibility:visible;
color: #666666;
}

/* WOL*/
#roll-non li a {
text-decoration:none;
}

#roll-non li a span {
visibility:hidden;
display:none;
position:relative;
right:0px;
top:-250px;
width:350px;
height:0px;
color:#000;
}

#roll-non li a:hover span {
visibility:visible;
display:block;
}

#roll-non li a:hover {
visibility:visible;
color: #666666;
}