/* CSS Document */





/* CSS Document */


body {
	margin: 0;
	text-align: center;/*correct IE bug */
 	background-color: #FFFFFF; 
 	font-family: sans-serif;
	font-size: x-large;
	color: black;
	height: 100%;
}

span#hide {/*back to graphic version on the text only version - hide on the graphic version*/
	
}



/**************
common tag
**************/

p {
	border: 0;
	margin: 0;
	padding: 0;
	font-size:large;
	color: black;
}

ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size:large;
	line-height:1.4em;
}

a {
	color: #660000;
	text-decoration: none;
	margin-bottom:0.3em;
}

a:hover {
	text-decoration: underline;
}


img {
	border: 0;
	margin: 0;
	padding: 0;
	
}
form {
	border: 0;
	margin: 0;
	padding: 0;
}
h1{
	font-size:larger;}

h2{

	color: #333333;

}
td{
font-size:large;}
/**************
general class
**************/

.imgAlignMiddle {
	vertical-align: middle;
}

.imgAlignTop {
	vertical-align: top;
}
.floatLeft {
	float: left;
}

.floatRight {
	float: right;
}
.imgMargin{
	margin-bottom:1em;
	margin-top:0px;
	margin-right:0em;
	margin-left:0px;
	border: 0px #666666 solid;
}

.imgMarginBottom{
		margin-bottom:1em;
	border: 0px #666666 solid;
}

.imgMarginLeftRight{
}
.margin15{
	margin-top: 1em;
}
/**************
main structure
**************/

div#global{/* includes everything:  main div  and footer*/
 	margin: auto;
	width: 36em;
	text-align: left;
	background:none;/* if changed it will affect the background color of the footer*/
	display: table;/* necessary to work with height 100%*/
	border:1px solid  #666666;
	background-color:#FFFFFF;
}

div#header {
	height: 5em;
	width: 36em;
	display:block;
	border: 0;
	margin: 0;
	padding: 0;
	border-bottom:1px solid  #666666;
	text-align:right;
	background-color:#EBEBEB;
	
}


div#main {
	width: 36em;
	border: 0;
	margin: 0;
	padding: 0;
	overflow:auto;
	
	
}

div#menuMain {
	width: 36em; /* if smaller than the main width will stay on the left - if a right align is needed then add : float:right; note that the left div will go up the gap */
	height: 1.3em;
	display: block;
	border: 0;
	margin: 0;
	padding: 0;
	border-bottom:1px solid  #666666;
}

/* from here be really carefull of size  margin and padding - if a div doesn't have enough space it will go under the other.

quick reminder :
-> FOR ALL BROWSER : width or height = content size + padding + border.
-> FOR IE : width or height = content size including padding and border.

 */
 

 
 
 
div#columnNav {
	float:left;
	width: 11.3em;
	min-height: 400px; /* understood by all browser will set the size to that minimum size if not enough content. IE will need a proper height  */
	height: 100%; /* compulsory for the content to push other bloc down  */
	display:block;
	border: 0;
	margin: 0;
	padding: 10px;
	
}

/***only for the home page***/

div#columnServices{
	float:left;
	min-height: 400px; 
	height: 100%; 
	width: 11.2em;
	display:block;
	border: 0;
	margin: 0;
	padding: 10px;
}
div#columnNews {
	float:left;
	width: 10em;
	min-height: 400px; /* understood by all browser will set the size to that minimum size if not enough content. IE will need a proper height  */
	height: 100%; /* compulsory for the content to push other bloc down  */
	display:block;
	margin: 0;
	border: 0;
	padding: 10px;

}
/***only for the home page END***/



div#columnContent{ /* div that contains the main content and the right column necessary to allow a background behind the right column - if no background is needed then get rid of it */ 
	float:left;
	width:22.8em;/* Width of content and right div becarefull of padding and border */
}

div#bottomLink{/*Bottom link menu*/
	height: 4.5em;
	width: 36em;
	overflow:auto;
	border: 0;
	margin: 0;
	padding: 0;
	float:left;
		border-top:1px solid #666666;
}

div#contentAll{
	position:relative;
	}

div#footer{
	height:2em;
	width: 36em;
	display:block;
	border: 0;
	margin: auto;
	padding: 0;
	text-align:right;
	
}

/**************
header class
**************/


p.headerText {
	margin-right:13px;
	text-align:right;
	font-size:large;
	float:right;
	
} 
div.accessLinks {
	margin-left:1em;
	margin-top:13px;
	width:24em;
	display:block;
	float:left;
	text-align:left;
		font-size:medium;
}
.logoClear{
width: 430px;
height: 4em;
margin-top: 0px;
display: none;

}

/**************
Menu class
**************/








/**************
Menu class
**************/
#menuMain div{
	display:block;
	float:left;
	width:11.5em;
	height:1.1em;
	padding:2px;
	padding-left:8px;
	border-right:1px solid #666666;
}
#menuMain div#menuRight, #menuMain div#menuRightSelected {
border-right:0px;
width:11em;
}

/*class for the DIV within mainMenu*/
#menuLeft, #menuMiddle, #menuRight {
	background-color:#f2f2f2;
}
#menuLeft:hover{
	background-color:#1294a5;
}
#menuMiddle:hover{
	background-color:#8f936e;
}
#menuRight:hover {
	background-color:#c29342;
}
/*class for the DIV within mainMenu EMD*/

/*class for the links*/
#menuLeft a:hover, #menuLeft:hover a, #menuMiddle a:hover, #menuMiddle:hover a, #menuRight a:hover, #menuRight:hover a{
color: #000000;
text-decoration:none;
}
/**LEFT*/
#menuLeft a{
color: #1294a5;
}
#menuLeftSelected{
background-color:  #1294a5;
}
#menuLeftSelected a{
color:#000000;
}

/**MIDDLE*/
#menuMiddle a{
color: #7F8463;
}
#menuMiddleSelected{
background-color: #8f936e;
}
#menuMiddleSelected a{
color:#000000;
}

/**RIGHT*/
#menuRight a{
color: #c29342;
}
#menuRightSelected{
background-color: #c29342;
}
#menuRightSelected a{
color: #000000;
}
/*class for the links END*/



/***specific to menu second level***/
div#mainAbout div#colorMenu{
background-color: #1294a5;
display:block;
width:36em;
height:4px;
}
div#mainServices div#colorMenu{
background-color: #8f936e;
display:block;
width:36em;
height:4px;
}
div#mainNews div#colorMenu{
background-color: #c29342;
display:block;
width:36em;
height:4px;
}



/**************
columnNav Class
**************/
.columnNavBox{
border-top:1px dotted #666666;
padding-top:5px;
margin-bottom:1em;
border-bottom:1px dotted #666666;
}

/**** specific to menu about ****/
div#menuAbout{
height:18em;
display:table;
}
div#donation{
border:0px;
height:4em;
font-size:x-large;
}
.leftBox{
padding-top:5px;
margin-bottom:1em;
}
div#menuAbout h3{
margin-bottom:1em;
font-size:x-large;
color:#1294a5;
}
div#menuAbout div.leftBox h3{
margin-bottom:1em;
margin-top:5em;
font-size:x-large;
color:#1294a5;
}
div#menuAbout ul{
padding-bottom:5px;
}
div#menuAbout ul li a{
font-weight:bold;
font-size:large;
color:#1294a5;
}
div#menuAbout ul li{
}
div#menuAbout ul li ul li{
list-style:none;
margin-left:0;
}
div#menuAbout ul li ul li a{
font-weight:normal;
font-size:large;
color: #660000;
}

#bottomLeft{
height:9em;
}
.clearAll{
clear:both;
}

/**** specific to menu services ***/

div#menuServices p{
margin-top:1em;
margin-bottom:1em;
color:#666666;
}

div#menuServices ul li a{
font-weight:bold;
font-size:large;
color:#7F8463;
}
div#menuServices ul li{
}
div#menuServices ul li ul li, div#menuServices div.contentBox ul li{
list-style:none;
margin-left:0;
color: #660000;

}
div#menuServices ul li ul li a, div#menuServices div.contentBox ul li a{
font-weight:normal;
font-size:large;
color: #660000;
}
div#menuServices select{
width:11em;
margin-bottom:5px;
}
div#menuServices input{
outline-style: none;
outline-width: medium;
padding-bottom: 4px;
}
div.contentBox{
border-top:dotted 1px #999999;
margin-top:5px;
margin-bottom:5px;
padding-top:5px;
padding-bottom:0px;
}
div.contentBox h3{
margin-bottom:5px;
margin-top:0px;
color:#7F8463;
font-size:x-large;
}
div.contentBox span a{
margin-top:5px;
display:block;
font-size:large;
}
#bkgMiddleBox{
background-repeat:repeat-x;
padding-top:3px;
padding-bottom:3px;
}

#languages{
margin-left:5px;
color:#666666;
}


/*****specific to menu News *******/
.imgNews{
vertical-align: middle;
margin-bottom:5px;
border: 1px #666666 solid;
float:right;
margin-left:5px;
}
div.rightBox{
border-bottom:dotted 1px #999999;
margin-top:0px;
margin-bottom:5px;
padding-top:0px;
padding-bottom:5px;
display:block;
float:left;
}
div.rightBox h3{
margin-bottom:5px;
margin-top:0px;
color:#c29342;
font-size:x-large;
}
div.rightBox div{
margin-bottom:3px;
color:#666666;
display:block;
float:left;
width:100%;
}
div.rightBox div p a{
font-size:large;
font-weight:normal;
line-height:1.3em;
}

.bottomLink a{
font-size:large;
color:#c29342;
}
.bkgRightBox{
padding-top:3px;
padding-bottom:3px;
}
div.rightBox span a{
font-size:large;
margin-top:5px;
display:block;
}

/**************
content class
**************/

div#content{
padding:1em;
}
div#content p{
margin-bottom:1em;
color:#333333;
}
div#content ul li{
margin-left:20px;
list-style:disc;
color:#666666;
}
div#content ul, div#content ol{
margin-bottom:1em;
}
div#content ol li{
margin-left:20px;
list-style: decimal;
color:#666666;
}



div#content input.generalInput, div#content textarea {
border: #999999 1px solid;
	width: 22em;
	font-size:large;
	font-family: Arial, Helvetica, sans-serif;
	padding-left: 5px;
	padding-top: 3px;
	margin-top: 3px;
	margin-bottom: 16px;
	color: #000000;
	}
div#content input.generalInput{	
height: 1.5em;
}
div#content .specialInput{
width: 1.5em;
height: 1.5em;
vertical-align: text-top;
}
div#content textarea {
height:100px;}
	
.compStar{
font-size: large;
font-style: italic;
color: #ff0000;
}

div.subNav{
width:21em;
display:block;
padding:5px;
text-align:right;
border-bottom:#666666 1px dotted;
}
div.subNav a{
font-size:large;
}
.date{
color:#999999;
font-size:large;}

/****************
different table
****************/
/*main table*/
div#content table{
border-collapse:collapse;
border-spacing:0px;
margin-bottom:10px;
margin-top:10px;
width:100%;
}

/*table with td that can have a grey background and border everywhere*/
div#content table.greyHeaderTable{
width:100%;
border-top:1px #666666 solid;
border-left:1px #666666 solid;
border-collapse:collapse;
border-spacing:0px;
margin-bottom:10px;
margin-top:10px;
}
div#content table.greyHeaderTable td{
border-bottom:1px #666666 solid;
border-right:1px #666666 solid;
padding:3px;
}
div#content table.greyHeaderTable td.cellHighlight{
background-color:#EBEBEB;
}

/*table for the team page*/
div#content table.team{
border-collapse:collapse;
border-spacing:0px;
border-top:1px solid #666666;
margin-bottom:10px;
}
div#content table.team td{
padding:5px 10px 5px 0px;
font-size:large;
}
div#content table.team td.teamImg{
width:5em;
}


/*table for all the forms*/
table.forms{
width:100%;
}
table.forms td{
width:120px;
vertical-align:top;
}


/*diary and informtion service table*/
table.informationTable{
	width:100%;
	border-bottom:  #CCCCCC 1px solid;
	background-color:#f8f7f7;
}
table.informationTable td{
	   border-top: #dfdfdf 1px solid;
	   padding:10px;
  }





/***** specific to about***/
div#mainAbout div#content h1, div#mainAbout div#content p span{
color:#1294a5;
}
/***** specific to Services***/
div#mainServices div#content h1, div#mainServices div#content p span{
color:#7F8463;
}
/***** specific to News***/
div#mainNews div#content h1, div#mainNews div#content p span{
color:#c29342;
}



/**************
thank you and newsletter page
*************/
#columnInfo{
width:12em;
display:block;
background-color:#FFFFFF;
height:420px;
float:left;
}

#columnResponses{
float:left;
width:21em;
padding:10px;
}
#columnResponses h1{
color:#333333;
margin-top:0px;
}
div#columnResponses ul li{
margin-left:20px;
list-style:disc;
color:#666666;
line-height:16px;
}
div#columnResponses ul, div#columnResponses ol{
margin-bottom:10px;
}
div#columnResponses p{
margin-bottom:10px;
color:#333333;
line-height:16px;
}




/**************
Bottom Link class
**************/
div#bottomLink div{
display:block;
float:left;
height:4em;
padding-left:5px;

}
div#logo{
text-align:right;
border-right:1px #666666 solid;
width:11em;
padding-bottom:3px;
padding-top:2px;
height:4em;
}
div#newsletter{
padding-top:5px;
border-right:1px #666666 solid;
width:11em;
height:4em;
}
div#bottomLink div input {
 outline-style: none; 
 outline-width: medium;
 margin-right:5px;
}
div#bottomLink div p{
margin-top:0px;
margin-bottom:2px;
font-size:smaller;
}

div#search{
border-right:0px #666666 solid;
width:11em;
padding-top:5px;
height:4em;
}

/**************
footer class
**************/
div#footer p{
font-size:large;
margin-top:1em

}