/* General Notes:  I spent quite some time trying to get the right values.  In particular I want to avoid things overlapping 
I also want to use the space, and avoid the a horizontal scrollbar appears at the bottom, (i.e. the page is too wide for 
standard viewing.  The page must also resize gracefully when we change the window sizes, so finding the correct values here is not so easy
I would avoid playing with them too much since it is not so easy to get them to work in all situations, i.e. different browsers, resolutions etc. 
*/



/* LINKS*/
a
{
  text-decoration:none;
}
a.tablemenu:hover 
{
	color: #FF0000;
	font-weight: normal;
	}
a.IndexFooter
{
	position:relative;
	color:Red;
	font-weight:bolder;
	margin-top:0.5em;
	
}
a:active
{
	font-size: 12px;
	color: #FF3300;
	font-weight: bold;
}

/* Items listed as IndexTitle modify the way the paragraphs appear on the index page */
TD.IndexTitle
{
	position:relative;
}
/* IndexVerse specifies how the bible verse is modified */
P.IndexTitle,p.IndexVerse
{
	float:left;
	clear:both;
	text-align:left;
}
/* these are the images used on the index page */
 img.IndexNormal
 {
	width:90px;
	float:left;
	clear:none;
	margin-right:1em;
 }
img.IndexNormal
 {
	width:90px;
	float:left;
	margin-right:1em;
 }


/*a:active { color: #FF0000; } */
/* This removes the border from the image, which occurs automatically because it is a link, the border is not very nice though */
a  img {border:none;}

/* this defines the location of the search input */
div.search
{
	position:relative;
	float:left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	left:-3px;
	
	margin-top:10px;
}

/* BACKGROUND */
img.topLeftLogo
 {
	position:absolute;
	top:25px;
	left:55px;
	border-style:none;
 }

 /*  the tables use to generate the red cross*/
table.logoLeft,table.logoDown,table.logoDown2
{
	margin:0px 0px 0px 0px;
	border-collapse:collapse;
	position:absolute;
	background-color:#cc0000; /* this is the red color used to generate the horizontal and vertical lines */
	/* I would prefer we didn't have to do this, especially the horizontal line should be included in the top image */
	
	padding:0px 0px 0px 0px;
	
}
table.logoLeft
{
	left:0px;
	top:135px;
	width:910px;
	height:2px;
	
}	
/* the left position must be absolut in pixels otherwise the line moves when we resize */
table.logoDown
{
	left:10em;
	top:1px;
	height:24px;
	width:2px;	
}	
table.logoDown2
{
	left:10em;
	top:120px;
	height:880px;
	width:2px;
	
}
/* main */
BODY,BODY.main,body.print
{
	/*background-image:url(/images/CNET/bg/marb014.jpg);*/
  font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align: left;
	vertical-align: top;
	width:100%;
	/*background-color:#9999FF;*/
}

Table{ 
  font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align: left;
	vertical-align: top;
}
input
{
	/* this gives the yellow background on the user input fields, I don't really like the colorm should find something nice here */
	background-color:#E3FDFC;
	/*background-color:#FFFFFF;*/
}
p
{
line-height: 1.2;
margin-top:4px;
margin-bottom:1px;
}
 
 
 table.ContactsAdmin{
 position:absolute;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	left:30px;
	top:300px;
	text-align: left;
 }
 
 
 img.indexFull
 {
	width:325px;
 }
 table.Inscription
{
	position:absolute;
	left:0px;
	top:100px;
	height:954px;
	width:1px;
	
}
  table.mainWindow,table.mainWindowInternational{
 position:absolute;
	width:90%;
	left:6px;
	top:-10px;
 }
 /* main window for the international section */
  table.mainWindowInternational{
	 position:relative;
 }
 /* placement of the bible verse */
div.bibleVerse{
background-color:#F0FFFF;
border:1px solid #F0DDDD;
clear:both;
height:90px;
margin-left:5%;
margin-right:5%;
position:relative;
top:15px;
width:600px;
}
p.IndexVerse
{
background-color:#f0ffff;
font-style:italic;

}

/* the main window for printing and in the standard views */
    DIV.print,  div.mainWindow,div.archives{
 position:absolute;
 width:700px;
	left:10.1em;
	top:131px;
	margin-left:3px;

 }
 
 DIV.Section1
 {
	margin-left:5px;
	margin-right:5px;
	top:140px;
width:100%; 
 }
 table.mainWindowCol1
 {
	position:relative;
	width:40%;
	border-right: solid navy 1px;
	left:1px;
	top:0px;

 }
 table.mainWindowCol2
 {
	position:absolute;
	width:45%;
	left:46%;
	top:0px;
	margin-right:0px;
 }
 td.indexFill
 {
	height:80%;
 }
   table.archivesTitle{
 position:relative;
	left:60px;
	top:10px;
	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:17px;
	font-weight:bolder;
 }
 /* contacts page */
 td.contact
 {
	width:400px;
 }
 table.contact
 {
	width:700px;
 }
 /* GALLERY, these define how the images are positioned */
   
 div#galleryImage{
 clear:both;
 height:650px;
 width:650px;
 clear:right;
 margin:0px 0x 20px 40px;
 }
 
#largeImage img
{
  height:600px;
    margin-top:10px;
margin-left:0px;
background-color:White;
}
#largeImage td
{
  background-color:White;
}

#largeImage ,#largeImage td
{
    background-color:White;
text-align:center;
width:750px;
}

 div.galleryImage tr
 {
   width:500px;
}   
 
 div.galleryImage td
 {
   text-align:center;
   width:250px;
   background-color:Blue;
}   
div.galleryImage a
{
  color:Yellow;
font-size:15px;
font-weight:bold;
text-decoration:none;
}

 tr.galleryHeader
 {
   width:600px;
   background-color:blue;
 }
 td.galleryHeader
 {
   border:0px 0px 0px 20px;
      	width:750px;
	background-color:blue;
	color:Yellow;
	font-family:"Comic Sans MS",Arial;
	font-size:large;
	font-weight:bold;
	text-align:center;
 }
 #gallery td, td.galleryIndex
 {
   width:170px;
   	text-align:center;
   	float:left;
 }
 
  td.galleryMain
 {
	width:700px;
	text-align:center;
 }
 
 a.gallery
 {
	font-size:x-large;
	font-weight:bold;
	text-align:center;
 }
 a.gallery:link {  color:yellow;  }
a.gallery:visited { color:yellow; }
a.gallery:hover { color:#E00000;}
a.gallery:active { color:#EE0000; }
a.gallery:focus { color:#AA0000;  }

table#gallery img
{
  width:125px;
  margin:10px 20px 10px 20px;
}


/*  PRINTING */
  DIV.print{
	width:700px;
	left:50px;
	top:0px;
 }
 BODY.print 
 {
	background-image:none;
  background-color:#FFFFFF; /* make sure the backgroun is white (same some ink!!!) */
}
 table.printIconHeader
 {
	width:720px;
	 text-align:right;
 }
 /* these two parameters help position the print icon correctly on the top right of the page */
 TD.printIconCell1
 {
	width:680px;
 }
 TD.printIconCell2
 {
	width:40px;

 }
 
 /* formatting for the petition form */
 .petitionForm
 {
	position:relative;
	clear:left;
	
 }
 
 
 /* MENUS */
 
/* MENUS AND MENU BACKGROUNDS*/
#HomeMenu
{
	color:Red;
	width:90px;
	text-align:right;

}
#HomeMenu div
{
	top:0px;
	left:0px;
position:absolute;	
}
 #HomeMenu h1
 {
	font-weight:normal;
	margin-left:-5px;
	margin-bottom:-8px;
	font-size:11px;
 }
  #HomeMenu h2
 {
		font-weight:normal;
	font-size:11px;
 }


  
#HomeMenu a
{
			color:Blue;
			text-decoration:none;
}

#HomeMenu a:hover
{
  color: #AAAAEE;
}


#HomeMenu div
{
	top:0px;
	left:0px;
	position:absolute;
}
table.menubgv
{
	position:absolute;
	left:0px;
	top:120px;
	height:85em;
	width:10em;
	/*background-image:url(/images/CNET/bg/marb014.jpg);*/
	/*background-image:url(/images/CNET/fd_menu5.jpg);*/
	background-color:White;
}
table.menubgh
{
	position:absolute;
	left:50px;
	top:0px;
	height:103px;
	width:200px;
	background-color:White;
	border:none;

}

/* main LEFTMENU styles */
 td.reddot,div.menu span
{
	color: #FF0000;
	font-size: 1em;
	clear:none;
	float:left;
	margin-top:2px;
	margin-right:1px;
}
div.menu h1
{
  font-size:11px;
  clear:none;
  margin:2px 0px 0px 0px;
  
}
div.menu h2
{
  font-size:10px;
  clear:none;
    margin: 2px 0px 0px 9px;

}

h2
{
	text-decoration:none;
}

div.menu
{
	position:absolute;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	left:-3px;
	top:120px;
	text-align: left;	
	margin-left:7px;
	width:190px;
}
 div.menu a,a.active
 {
	text-decoration:none;
 }
a.menu
{
    COLOR: #003399;
    TEXT-DECORATION: none;
}
a.active:link
{
    COLOR: #003399;
    TEXT-DECORATION: none;
/*        COLOR: #ff0000;*/
}

a.active
{
	  background-color:#e0ffff;

	  color:Blue;
}
a.menu:link
{
	  TEXT-DECORATION: none;
    COLOR: #0099ff; 
}
a:hover
{
    color: #AAAAEE;
    background-color: Navy;
}
/* CHaT */
h3.chatFooter
{
	text-align:left;
	margin-bottom:0px;
	margin-right:4px;
	margin-top:0px;
	font-size:12px;
	clear:none;
	float:left;
}

span.chatFooter
{
	float:left;
	width:90%;
}
div.chatForum
{
	position:relative;
	top:3px;
	left:5px;
	width:700px;
	margin-top:1px;
	clear:both;
}
p.chatInstructions
{
	margin-left:400px;
	font-size:12px;
}
p.chatForum
{
	margin-top:2px;
}
img.chatForum
{
	float:left;
}

div.efFooter
{
	width:90%;
	clear:both;
}
div.showPostFooter
{
	position:relative;
	width:90%;
}
h3.showPostFooter
{
	text-align:center;
}
a.chatHeader:link,a.chatHeader:active,a.chatHeader:visited
{
	
color: #063f63;
text-decoration:none;
font-size:10px;	
}
a.chatHeader:hover
{
	background-color:#e0ffff;

}
p.chatHeaderAbstract
{
	clear:left;
	float:left;
}
div.chatmenu
{

	position:absolute;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	left:-3px;
	top:150px;
	text-align: left;	
	margin-left:10px;

}
h2.submenu,h2.submenu a
{
  font-size:12px;
  margin:2px 0px 0px 0px;
  font-weight:normal;
  text-decoration:none;
}
p.chatHeaderText1
{
	margin-bottom:65px;
}
h1.chatHeaderText
{
font-size:10px;	
font-weight:bolder;
margin-bottom:8px;
margin-top:-5px;
width:630px;
}

table.chatHeader
{
	width:770px;
}
div.chatHeader
{
	margin-left:-5px;
	width:830px;
	background-color:White;
	height:110px;
	clear:right;
}
div.chatHeaderImage
{
	position:absolute;
	top:15px;
	left:110px;
	float:left;	
	width:210px;
	background-color:White;
	border-left:solid 2px #cc0000;
}
div.chatHeaderText
{
	left:220px;
	position:absolute;
	top:0px;
	width:600px;
}

img.chat
 {
float:left;
margin-top:-20px;
 }
div.chatHeaderMain
{
	position:absolute;
	left:130px;
	margin-top:10px;
}
table.menubghchat
{
	left:0px;
	top:0px;
	width:800px;
	background-color:#d02006;
	height:2px;
}
table.chatlogoDown2
{
	left:110px;
	top:120px;
	height:880px;
	width:0.1px;
	margin:0px 0px 0px 0px;
	border-collapse:collapse;
	position:absolute;
	background-color:#cc0000; /* this is the red color used to generate the horizontal and vertical lines */
	/* I would prefer we didn't have to do this, especially the horizontal line should be included in the top image */
	
	padding:0px 0px 0px 0px;
}

div.redLine
{
	position:absolute;
	width:820px;
	left:0px;
	top:118px;
	height:1px;
}
div.chatMain
{
	position:absolute;
	width:90%;
	left:150px;
	top:200px;
}

/*  animated images left side gallery */
div.gal1	
{
	position:absolute;
	width:110px;
	left:4px;
	top:570px;
	float:left;
}
/* intro text Home page */
#intro{
background:url(/images/lignes-fondintro.jpg);
background-repeat:repeat;	
width:528px;
height:330px;
font-family: Verdana, Arial, Helvetica, sans-serif;
position:relative;
top:-9px;	
}
#intro h1{
	color: #CC0000;
	font-weight:bold;
font-size: 13px;

}

#intro h2{
		font-size: 12px;
	color: #003399;
}
#intro p{
font-size: 11px;
margin-top:2px;
margin-bottom:10px;
}

#DocNavigator
{
	position:absolute;
	left:400px;
	float:right;
	width:500px;
	
}
#DocNavigator h1,#DocNavigator a
{
color: #CC0000;
	font-size:13px;
	margin:0px;
	clear:none;
	text-decoration:none;
	
}
#DocNavigator a
{
	float:left;
}
#DocNavigator p
{
	clear:none;
}

h1
{
	font-size:larger;
	clear:both;
	float:none;
	color:Black;
}

/* article comments */
#comment
{
	clear:both;
	position:relative;
	left:15px;
	top:15px;
	background-color:White;
}
#comment input
{
	background-color:#EFFFFF;
}
#comment textarea
{
	background-color:#EFFFFF;
	
}


div#commentsFooter h5
{
	font-size:11px;
			background-color:#DDFFFF;
			top:0px;
			margin-top:0px;
			margin-bottom:5px;
}

div#commentsFooter 
{
		background-color:#EFFFFF;
	position:relative;
	top:5px;
	margin-left:20px;
	margin-bottom:30px;
	width:500px;
	clear:both;	
	padding:5px;
}

 


/* styles for new abstracts October 2008 */
/*There should be a cleaner way of specifying the styles for column 1 and 2, these should be the same except for the positioning of the columns
one solution, would be to add an exta style on each div of each abstract, but this is not so nice either... needs to be looked at
*/	

div.mainWindowCol1,div.mainWindowCol2
 {
	position:relative;
margin:0px 0px 0px 10px;
padding:0px 0px 0px 0px;
clear:none; 	width:340px;

 }
 div.mainWindowCol1
 {
	float:left;
}
 div.mainWindowCol2
 {
	float:right;
}

/* this div is the main container for the abstract */
div.mainWindowCol1 div,div.mainWindowCol2 div 
{
	clear:both;
margin:0px 0px 0px 0px;	
height:180px;
}

/* select the images on the abstract, position the image, float it to the left and try to center using the margins, also fix the image size even though
this destroy the aspect ratio, it works for all images */
div.mainWindowCol1  img,div.mainWindowCol2 img
 {
 	float:left;
 	width:73px;
 	margin-top:25px;
 	margin-right:15px;
 	border:solid 2px blue;
 }
 /* define how the data, section and author appear */
div.mainWindowCol1  p,div.mainWindowCol2 p
{
	border-top:dotted 1px Gray;
	border-bottom:solid 2px Gray;
	width:245px;
	height:140px;
	 float:right;
	 clear:right;
	 margin:0px 0px 0px 0px;
}

div.mainWindowCol1  a:link,div.mainWindowCol2 a:link
{
	font-size:10px;
	text-decoration:none;
	color:Navy;
	font-weight:bolder;
}



div.mainWindowCol1  a:hover,div.mainWindowCol2 a:hover
{
	    COLOR: #AAAAEE;

}


 /* define how the data, section  appear */
div.mainWindowCol1  h2,div.mainWindowCol2 h2
{
  clear:none;
  font-size:10px;
  float:left;
  margin:0px 5px 0px 5px;
  color:Red;	
}


div.mainWindowCol1  h3,div.mainWindowCol2 h3
{
	color:Gray;
  clear:right;
  font-size:10px;
  float:left;
  margin:0px 5px 0px 5px;
}

/* make the author a little bit smaller and not in bold */
div.mainWindowCol1   h4,div.mainWindowCol2  h4
{
	font-size:9px;
	font-weight:normal;
	float:right;
	padding:0px;
}


/* example of setting properties as a function of a given section (development)
see the html to see available css classes as a function of the section, in general the class on the div is MainMenu_SubMenun */
div.home_development h2
{
	color:Orange;
}
div.home_development img
{
	border-color:Orange;
}


/* we need some extra styles for the archives */
p.archives
{
  height:15px;
  clear:none;
  position:relative;
  top:0px;
  border:none 0 red;
}

div.mainWindowCol1 h2 a  ,div.mainWindowCol2 h2 a
{
  color:Red;
}