/******************************************************************************
 * Author:                                                                    *
 *   Etienne Richard                                                          *
 *   Rue de la Chapelle 30                                                    *
 *   2034 Peseux                                                              *
 *   Switzerland                                                              *
 * Revision history:                                                          *
 *   2006-09-27 Initial Revision.                                             *
 *   2006-11-04 Added link formatting for "News" div.                         *
 *   2009-04-21 Minor changes.                                                *
 ******************************************************************************/


/******************************************************************************
 * Global settings
 ******************************************************************************/

/*
 * Note(s): Background image is 700x270.
 */

body {
  /* Center: */
  width               : 700px ;
  min-height          : 768px ; /* Firefox */
  margin              : 0 auto 0 auto ;
  padding             : 0 ;

  /* Background image: */
  background-image    : url("./images/ptit-train.png") ;
  background-repeat   : no-repeat ;
  background-position : top center ;

  /* Vertical borders: */
  border-left         : 2px dotted #00FF00 ;
  border-right        : 2px dotted #00FF00 ;

  font-family         : arial, verdana, helvetica, sans-serif ;

}

div#contents p
{
  text-align          : justify ;
}

div#contents a:link    { /* Unvisited link  */
  text-decoration     : none ;
  color               : #008000 ;
}
div#contents a:visited { /* Visited link    */
  text-decoration     : none ;
  color               : #008800 ;
}
div#contents a:hover   { /* Mouse over link */
  text-decoration     : underline ;
}
div#contents a:active  { /* Selected link   */
  color               : #FF0000 ;
}

div#upperTitle {
/*font-family         : "lucida calligraphy", cursive ;*/
  font-style          : italic ;
  font-weight         : bolder ;
  font-size           : smaller ;
  position            : relative ;
  top                 : 28px ;
  left                :  8px ;
}

img.btn {
  /* Reset box settings: */
  margin              : 0 ;
  padding             : 0 ;
}

div#guide img {
  display             : block ;
  float               : left  ;
  margin              : 0 3px 3px 0 ;
  padding             : 0 ;
  border              : none ;
}

div#guide {
  /* Center: */
  width               : 552px ; /* IE wants (3+1) pixels... */
  margin              : 0 auto 0 auto ;
  padding             : 0 ;
}


/******************************************************************************
 * Copyright & disclaimer
 ******************************************************************************/

div#contents p#legalMentions {
  font-size           : x-small ;
  font-family         : arial, verdana, helvetica, sans-serif ;
  color               : #808080 ; /* DarkGray */
  text-align          : center ;
}

div#contents p#legalMentions a:link    { /* Unvisited  link */
  text-decoration     : underline ;
  color               : #808080 ; /* DarkGray */
}
div#contents p#legalMentions a:visited { /* Visited    link */
  text-decoration     : underline ;
  color               : #808080 ; /* DarkGray */
}
div#contents p#legalMentions a:hover   { /* Mouse over link */
  text-decoration     : underline ;
}
div#contents p#legalMentions a:active  { /* Selected   link */
  color               : #FF0000 ;
}


/******************************************************************************
 * Menu (move the items onto the rail cars)
 ******************************************************************************/

ul#menu {
  /* Do the positioning relatively to the <ul>: */
  position            : absolute ;

  /* Reset box settings: */
  margin              : 0 ;
  padding             : 0 ;

  /* Hide the markers: */
  list-style          : none ;

  /* Set the font properties: */
  font-family         : Helvetica, sans-serif ;
  text-align          : center ;
}

li#home {
  /* Reset box settings: */
  margin              : 0 ;
  padding             : 0 ;

  /* Dimension: */
  width               : 105px ;
  height              :  40px ;

  /* Positioning: */
  position            : absolute ;
  top                 : 162px ;
  left                :  80px ;

  /* Highlight the home item: */
  font-weight         : bolder ;

/*border              : solid ;*/ /* Debug */
}

li#ren {
  /* Reset box settings: */
  margin              : 0 ;
  padding             : 0 ;

  /* Dimension: */
  width               : 105px ;
  height              :  40px ;

  /* Positioning: */
  position            : absolute ;
  top                 : 162px ;
  left                : 175px ;

/*border              : solid ;*/ /* Debug */
}

li#gal {
  /* Reset box settings: */
  margin              : 0 ;
  padding             : 0 ;

  /* Dimension: */
  width               : 105px ;
  height              :  40px ;

  /* Positioning: */
  position            : absolute ;
  top                 : 162px ;
  left                : 295px ;

/*border              : solid ;*/ /* Debug */
}

li#his {
  /* Reset box settings: */
  margin              : 0 ;
  padding             : 0 ;

  /* Dimension: */
  width               : 105px ;
  height              :  40px ;

  /* Positioning: */
  position            : absolute ;
  top                 : 162px ;
  left                : 415px ;

/*border              : solid ;*/ /* Debug */
}

li#qui {
  /* Reset box settings: */
  margin              : 0 ;
  padding             : 0 ;

  /* Dimension: */
  width               : 105px ;
  height              :  40px ;

  /* Positioning: */
  position            : absolute ;
  top                 : 162px ;
  left                : 535px ;

/*border              : solid ;*/ /* Debug */
}

li#con {
  /* Reset box settings: */
  margin              : 0 ;
  padding             : 0 ;

  /* Dimension: */
  width               : 100px ;
  height              :  40px ;

  /* Positioning: */
  position            : absolute ;
  top                 : 105px ; /* Hill */ /*  45px */ /* Sun */
  left                : 195px ; /* Hill */ /* 510px */ /* Sun */

/*border              : solid ;*/ /* Debug */
}


/******************************************************************************
 * Format required fields
 ******************************************************************************/

span.req {
  /* Always write the requirement in small letters: ;-) */
  font-size           : x-small ;

  /* Move vertically: */
  position            : relative ;
  top                 : -5px ;
}


/******************************************************************************
 * Format the language selection
 ******************************************************************************/

p#languages {
  /* Reset box settings: */
  margin              : 0 ;
  padding             : 0 ;
}


/******************************************************************************
 * Move the contents under the background-image
 ******************************************************************************/

div#contents {
  /* Margins relative to <body>: */
  margin-left         : 10px ;
  margin-right        : 10px ;

  /* Do not use "margin-top"! */
  padding-top         : 260px ;
}


/******************************************************************************
 * Center the illustrations
 ******************************************************************************/

img.Illustration {
  display             : block ;
  margin-left         : auto ;
  margin-right        : auto ;
  padding             : 0 ;
}


/******************************************************************************
 * Highlight the news
 ******************************************************************************/


div#contents p.News {
  /* Box settings: */
  margin              : 0 0 2px ;
  padding             : 2px ;

  /* Set font properties: */
  color               : #FFFFFF ; /* White   */
  background          : #DC143C ; /* Crimson */
  font-weight         : bolder ;
}

div#contents p.News a:link   { /* Unvisited link.   */
  text-decoration     : underline ;
  color               : #FFFFFF ; /* White  */
}
div#contents p.News a:visited { /* Visited link.    */
  text-decoration     : underline ;
  color               : #FFFFFF ; /* White  */
}
div#contents p.News a:hover   { /* Mouse over link. */
  text-decoration     : underline ;
}
div#contents p.News a:active  { /* Selected link.   */
  color               : #FFFFFF ; /* White  */
}


/******************************************************************************
 * Remove the border from the W3C images
 ******************************************************************************/

p.Validation a img {
  border              : none ;
}


/******************************************************************************
 * Miscellaneous.
 ******************************************************************************/

span.mandatory {
  /* Set font properties: */
  color               : #FF0000 ; /* Red */
}

div#whoWeAre img {
  display             : block ;
  margin              : 3px auto ;
  padding             : 0 ;
  border              : none ;
}