/**********************************************************************/
/*								      */
/*  These definitions create the layout of VOCA webpages,	      */
/*  with the logo at the left and spacer at the right.		      */
/*								      */
/*								      */
/*  The html#short cannot be used everywhere.			      */
/*  Attaching the gauche.gif to the background prevents it from       */
/*  shrinking before enlarged text.				      */
/*								      */
/**********************************************************************/

  html#short  {  background-image:  url(gauche.gif);  /* for short pages */
		background-repeat:  repeat-y;	   }

  table.prime { 	    width:  100%; }	/* necessary */
  td.voca   {	 background-image:  url(gauche.gif);  
		background-repeat:  repeat-y;	/* necessary for IE  */
	    background-attachment:  fixed;	/* disregarded by IE */ 
			    width:  190px;   }	/* necessary */
  table.slack  {	    width:  100%     }	/* necessary */
  td.stripe  {	 background-image:  url(right.gif);
	    background-attachment:  fixed;	/* disregarded by IE */
			    width:  24%;    }	/* necessary */
  body	{		   margin:  0;		/* necessary */
		       background:  white;   }	/* necessary */


  td.menu   {	     padding-left:  2em;
		      padding-top:  2em;
		    padding-right:  0.5em;
		   padding-bottom:  0.5em;    }

  td.main   {	     padding-left:  3em;
		      padding-top:  4em;
		    padding-right:  0.5em;
		   padding-bottom:  0.5em;    }

  td.news   {	     padding-left:  2em;
		      padding-top:  0.1em;
		    padding-right:  1em;
		   padding-bottom:  0.5em;    }

  td.art    {	     padding-left:  2em;
		      padding-top:  0.1em;
		    padding-right:  0.5em;
		   padding-bottom:  0.5em;
		       text-align:  center;    }

  td.poem   {	     padding-left:  4em;
		      padding-top:  2em;
		    padding-right:  0.5em;
		   padding-bottom:  0.5em;     }

  /***********************************************************/
  /* News sections.  This includes:			     */
  /* The first headline (article)			     */
  /* the dateline	(dateline)			     */
  /* pictures on the right  (Rfloat)			     */
  /* pictures on the left   (Lfloat) (requires table)	     */
  /* photo captions					     */
  /* footnotes						     */
  /***********************************************************/

  div.article {  margin-top:	8em;
		font-weight:	bold;
		  font-size:	x-large   }

  div.dateline { margin-top:	1em  }

  div.Rfloat {	      float:	right;
		 text-align:	center;
		     margin:	0.5em 0 0.5em 0.5em;  }

  table.Rfloat {      float:	right;
		margin-left:	1ex;
	       margin-right:	0;
		 margin-top:	1ex;
	      margin-bottom:	1ex;
		    padding:	0;  }

  table.Lfloat {      float:	left }

  div.Lfloat {	 text-align:	center;
	       margin-right:	0.5em;
		 margin-top:	0.5em;
	      margin-bottom:	0.5em;
		margin-left:	0; }

  table.center {margin-left:	auto;	 /* The use must include */
	       margin-right:	auto;  } /* width=nnn		 */

  div.caption {  text-align:	left;
	   background-color:	#ffe4c4;
		  font-size:	smaller;
		    padding:	0.5em;
	      margin-bottom:	0.3em;	 }

  caption.head, 
  p.head   {	font-weight:	bold;
		  font-size:	large;	 }

  caption.head {
	      margin-bottom:	2em;   }

  p.sub    {	font-weight:	bold;  }

  p.foot {	  font-size:	smaller;
		 margin-top:	2em; 
	      margin-bottom:	2em; }

  span.add {	font-weight:	bold;	 }   /* Addendum: */

    /***********************************************************/
    /*							       */
    /*	Expand and collapse articles			       */
    /*							       */
    /*	Style for the buttons on the homepage should	       */
    /*	match expand/collapse.				       */
    /*							       */
    /*							       */
    /***********************************************************/

    blockquote.core {	 display:   none;
		    margin-right:   0;
		   margin-bottom:   2em;  }

    p.help   {	 text-decoration:   underline;
			  cursor:   pointer;
		      text-align:   center }

    p.key   {		   width:   4em;   }

    p.key,
    td#button a {	   color:   white;
		    padding-left:   0.4em;
		  padding-bottom:   4px;
			  border:   2px solid #d3d3d3;
			  cursor:   pointer;
		background-color:   #73ada5;	 }

    td#button  {     line-height:   2em   }  /* never used */

    td#button a {   margin-right:   0.6em; 
		 text-decoration:   none;
		   padding-right:   0.5em;    }


    /***********************************************************/
    /*							       */
    /*	 toolbar menu					       */
    /*							       */
    /*	 dark green for menu items:	 #3e8682	       */
    /*	 there is no color for the left bar, since it varies   */
    /*	 pixel to pixel.				       */
    /*							       */
    /*	 position:fixed looks good for div.menu, but	       */
    /*	 it prevents seeing the lower options when they        */
    /*	 extend beyond the bottom of the screen.	       */
    /*							       */
    /***********************************************************/

    td.voca div.menu {
      background-image: url(tool.jpg);	   
      padding-top:	0px;  /* 1px fixes the top in Firefox */
      margin-top:	0;    /* and Opera, but IE fails  */
      padding-bottom:	6px;   }  

    td.voca div div  {
      font-weight:	bold;
      width:		167px;
      color:		white;
      margin-left:	6px;   
      margin-top:	5px;
      margin-bottom:	5px;
      padding-top:	0.2em;
      padding-bottom:	0.2em;
      text-align:	center;
      background-color: #3e8682;   }

    td.voca div.other {
      background-color: transparent;
      font-weight:	normal;
      color:		black;	 }

    td.voca a {
      font-weight:	bold;
      color:		white;
      text-decoration:	none;	 }

    /***********************************************************/
    /*							       */
    /*	Miscellaneous					       */
    /*							       */
    /***********************************************************/
    /*							       */
    /*	Deprecated:					       */
    /*							       */
    /*	h2 h3 h4					       */
    /*	span.under					       */
    /*	div.lead					       */
    /*	<big>						       */
    /*	<small> 					       */
    /*							       */
    /***********************************************************/

    img {		   border:  0  }     /* default for all images */

    blockquote.shade { margin-top:  0.6em;   /***********************/
		      margin-left:  0;	     /*  shaded quotes in   */
		     margin-right:  0;	     /*  spaces too small   */
		 background-color:  #dddddd; /*  for indentation.   */
		      padding-top:  0.2em;   /***********************/
		   padding-bottom:  0.4em;
		    padding-right:  0.2em;
		     padding-left:  1em;   }

    span.under {  text-decoration:  underline  }   /* deprecated */

    em.under  {   text-decoration:  underline;
		       font-style:  normal;    }

    p.preamble {       margin-top:  -2em;
		       font-style:  italic;	   /* for introductions */
		    margin-bottom:  3em;       }   /* to documents	*/

    td	 { vertical-align:	      top }
    .mid   { text-align:	      center }
    h2,h3,h4,body {
	   font-family: 	      Arial, "Lucida Sans", sans-serif;
	   font-style:		      normal }

    span.head {   font-family:	  serif }   /* gone after upload 2001 news */

    ul,ol   {	 padding-left:	1em;   /* for buttons flush with text */
		   margin-top:	1em;
		margin-bottom:	1em }
    li	 {	   margin-top:	0.7em }

  p.contents {	  margin-top:	2em;
	       margin-bottom:	3em;   }

 div.lead  {	   margin-top:	3em;	  /* no home uses */
		  font-weight:	bold;
		    font-size:	x-large   }

   td.gap   {	  padding-top:	3em;
		  font-weight:	bold   }

 hr.wide,
 hr.major  {	   margin-top:	3em;
		margin-bottom:	3em   }

 hr.bar,
 hr.minor    {	   text-align:	center;
			width:	5em   }

   div.box   {	 border-style:	solid;
		 border-width:	2px;
		 border-color:	black;
		      padding:	0.8em	 }

  div.dent     {   margin-top:	1em;
		     position:	relative;
		 padding-left:	3em;  }

  div.dent>p:first-child {
		   margin-top:	0;
		     position:	absolute;
			 left:	0;
			  top:	0  }

   


/**********************************************************************/
/*								      */
/*   Definitions for the end of page material.			      */
/*								      */
/**********************************************************************/

    img.bare {	       border:	  0 }	    /* for images */

    div.coda   {   margin-top:	  3em;
		   text-align:	  center;    }