/* CSS Document */


body {
	margin: 0;
	text-align: center;/*correct IE bug */
 	background-color: #000000; 
 	font-family: sans-serif;
	font-size: x-large;
	color: yellow;
	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:x-large;
	color:yellow;
}

ul, li {
	list-style: disc;
	list-style:inside;
	margin: 0;
	padding: 0;
	font-size:x-large;
}

a:link {
	color: #00FFFF;
	text-decoration:none;
	font-size:large;
}

a:hover {
	text-decoration:underline;
}
a:visited{
	color:#9900FF;
}


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

/**************
general class
**************/

.imgAlignMiddle {
	vertical-align: middle;
}

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

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

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

.imgMarginLeftRight{
	margin-right:5px;
	margin-left:5px;
}


/**************
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  yellow;
}

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


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  yellow;
}

/* 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: 11em;
	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: 11em;
	display:block;
	border: 0;
	margin: 0;
	padding: 10px;
}
div#columnNews {
	float:left;
	width: 11em;
	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:21.8em;/* Width of content and right div becarefull of padding and border */
}

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

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
**************/
#menuMain div{
display:block;
float:left;
width:11.1em;
height:1.1em;
padding:2px;
padding-left:10px;
border-right:1px solid yellow;
}


#menuMain div#menuRight{
border-right:0px;
width:11em;
}







/***specific to menu second level***/
div#mainAbout div#colorMenu{
display:block;
width:36em;
height:4px;
}
div#mainServices div#colorMenu{
display:block;
width:36em;
height:4px;
}
div#mainNews div#colorMenu{
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 div.leftBox h3{
margin-bottom:1em;
margin-top:7em;
}
div#menuAbout ul{
padding-bottom:5px;
}
div#menuAbout ul li a{
font-weight:bold;
font-size:large;
}
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;
}

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

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

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

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

}
div#menuServices ul li ul li a, div#menuServices div.contentBox ul li a{
font-weight:normal;
font-size:large;
}
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;
}
div.contentBox span a{
margin-top:5px;
display:block;
}
#bkgMiddleBox{
background-repeat:repeat-x;
padding-top:3px;
padding-bottom:3px;
}

#languages{
margin-left:5px;
}


/*****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;
}
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;
}

.bottomLink a{
font-size:large;
}
.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;
}
div#content ul li{
margin-left:20px;
list-style:disc;
}
div#content ul, div#content ol{
margin-bottom:1em;
}
div#content ol li{
margin-left:20px;
list-style: decimal;
}

div#content input.generalInput, div#content textarea {
border: yellow 1px solid;
background-color: #333333;
color:#FFFFFF;
font-size:large;
	width: 20em;
	font-family: Arial, Helvetica, sans-serif;
	padding-left: 5px;
	padding-top: 3px;
	margin-top: 3px;
	margin-bottom: 16px;

	}
div#content input.generalInput{	
height: 1.5em;
}

div#content textarea {
height:100px;
}
div#content .specialInput{
width:1.5em;
height:1.5em;
vertical-align: text-top;
}
.compStar{
font-size: large;
font-style: italic;
}

div.subNav{
width:21em;
display:block;
padding:5px;
text-align:right;
}
div.subNav a{
font-size:large;
}
.date{
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 yellow solid;
border-left:1px yellow solid;
border-collapse:collapse;
border-spacing:0px;
margin-bottom:10px;
margin-top:10px;
}
div#content table.greyHeaderTable td{
border-bottom:1px yellow solid;
border-right:1px yellow solid;
padding:3px;
}
div#content table.greyHeaderTable td.cellHighlight{

}

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

}


/*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:  yellow1px solid;
	
}
table.informationTable td{
	   border-top: yellow 1px solid;
	   padding:10px;
  }

/**************
thank you and newsletter page
*************/
#columnInfo{
width:12em;
display:block;
height:15em;
float:left;
}

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





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

}
div#logo{
text-align:right;
border-right:1px #666666 solid;
width:11em;
padding-bottom:3px;
padding-top:2px;
}
div#newsletter{
padding-top:5px;
border-right:1px #666666 solid;
width:11em;
}
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;
}

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

}