/* =========================================
  débogage
========================================= */
/*div { border:1px solid #FF0000; }*/

/* =========================================
  preparing the document
========================================= */
html {height: 100%} 
body {  width: 1000px; margin: 0 auto; min-height: 101%; position: relative;  color: #444; text-align: left; }
body { background: #FFFFFF; background-repeat: repeat-x; }
body {  font-family: Arial, Verdana, 'Trebuchet MS', Helvetica, sans-serif; }

/* =========================================
  containers
========================================= */
/*.container, #content, #box-menu-leftcol, #box-wrapper { border: 1px solid #DEDEDE; }*/
.button       { background-color:#D3DE25; padding: 0 1em;  font-weight:bold; border:2px solid #CCCCCC; text-align:center; }
.container { position:relative; width: 98%; margin: 0 auto; }
.container-trans {  position:relative; width: 98%;  margin: 0 auto; }
.container-trans-noborder {  position:relative; width: 98%; margin: 0 auto; }
.container-trans-footer {  position:relative; width: 98%;   margin: 0 auto; height:40px; }
.impair{ background-color: #EDEAD7;}
.resource { margin:1em 0; border-bottom:1px dashed #BBBBBB; background:#FFFFFF; padding-bottom:1em; }
.selformGenerator { width:95%; }
.label { /*margin-top:1.5em;*/ background-color:#DDDDDD; }
.label2       { float:left; width:20em; text-align:right; padding-right:1em; }

/* =========================================
  defining html elements
========================================= */
form { /*background-color:#EEEEEE;*/ }
fieldset { border:1px solid #DDDDDD; }
input[type="submit"] { background-color:#D3DE25; padding: 0 1em; font-weight:bold; }
input[type="text"], input[type="password"], select { background-color:#FFFFCC; }
textarea { width:95%; }
strong,b {font-weight: bold;}
em,i { font-style:italic; }
acronym, abbr { letter-spacing: .07em;  border:0;   cursor: help; }
a:link { color: #0B4DA2; text-decoration:underline; }
a:hover { text-decoration:none; }
a:visited { color: #551A8B; }
li a { color: #0000FF; font-size:1em; }
li a:link { text-decoration:underline; }
li a:hover  { text-decoration:none; }
li a:visited { color: #551A8B; }
p { color: #303030; text-decoration:none; font-size:1em; }
/*option { background-color:#FFFFCC; }*/

li { margin-left:0; padding:0;}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight:bold; color: #666666; }
h1 { font-size:1.5em; }
h2 { font-size:1.3em; border-bottom:1px solid #DDDDDD; margin-top:1em; }
h3 { font-size:1.2em; }
h4 { font-size:1em; }

p { text-align:justify; font-size:1.0em; padding-right:1em; margin: 0.5em 0; }

/* =========================================
        global classes and identifiers
===========================================*/
.button-more-info { position:absolute; bottom:0; text-align:right; margin-top: 1em; font-weight:bold; background-color:#DDDDFF; }
p.inline-big-text { padding: 0 0 1em 0; margin: 0; }
p.inline-big-text strong { font-size: 1.4em; }
/* =========================================
  content
========================================= */
#content-wrapper { position: relative; width: 100%; margin: 0; }
#content {  font-size:0.9em; margin-left:12em; padding:0;   min-height: 400px; /*border:1px solid #FF0000;*/ }
#content table { width:95%; }
#content h1 { margin-bottom: 1em; }
#content h2 { margin-bottom: 1em;}
#content h3 {   margin: 1.5em 0 0.7em 0; }
#content h4 {   margin-bottom: 0.7em; }
#content .box-map { width:100%; }   
#content .box-map h2 { font-size:1em; margin-bottom:0.5em; }
#content .box-map p  { font-size:0.7em; }
#content .box-map-legend h2 { font-size:1em; margin-bottom:0.5em; }

/* 
=========================================
  footer
========================================= 
The home page content consist of a two parts. The first of with 70% width and a second colon
of almost 30% of the available width
*/
#content-footer {   position:absolute; left:182px; }
#content-footer {   min-height: 400px;  height:100%; background-color: #FFFFFF; }

/* =========================================
  top-header 
========================================= */
#top-header-wrapper {  position:absolute; right:0; }
#top-header-wrapper a { font-weight: bolder; color: #04329C; font-size:0.8em; margin: 0 5px; }

/* =========================================
  header 
========================================= */
#header-wrapper { background: url(../img/bg_header-wrapper.png);  max-width: 100%;  margin: auto; }
#header-wrapper, #header { height: 80px; }
#header { background: url(../img/bg_header_900x80.jpg) right top no-repeat; text-align: right; }
#header h1 { position:absolute; top:20px; left:0; color: #04329C; font-size:0.7em;}
#header img { float: left; top: 0;  left: 0; height: 30px;  }


/* =========================================
  service navigation
========================================= */
/*
#servicenav-wrapper { position: relative; heigth:50px; background:#B9E3F9; }
#servicenav { top: 0;   right: 0; }
#servicenav ul { clear: left;   text-align: right;  list-style: none;   padding: 0; }
#servicenav li { display: inline; color: #0B4DA2; background-color:#DDDDDD; }
*/
#top-right-menu { position:absolute; top: 0; right: 0; }
#top-right-menu-lang { float:right; }
#top-right-menu div ul { margin:0; padding: 0; text-align: right;   list-style: none; }
#top-right-menu div li { display: inline; margin-left:0; color: #0B4DA2;}
#top-right-menu div li a { font-size:0.7em; }

/* =========================================
  login form
============================================*/
#login-form-horizontal  { position:absolute; top: 4em; right: 1em; font-size:0.8em; font-weight:bold; }
#login-form-horizontal input { width:7em; font-size:0.9em; }

/* =========================================
  navigation left menu colon
============================================
Attention: the width of this colon is related to the content's width */
#middle-left-menu { float:left; font-size:1em; width:10em; min-height: 450px; height:100%; border-right: 1px solid #CAEAF9; }
#middle-left-menu div { position: relative; top: 0; width: 100%; padding-bottom: 4px; margin-bottom: 0.3em; /*border:1px solid #DEDEDE;*/ }
#middle-left-menu div h1 { font-size:0.8em; text-align: center; margin: 0; width:100%; /*border: 1px solid #CCCCCC;*/ background:#FBD886; }
#middle-left-menu div ul { margin:0.5em 0; text-align: left; list-style: none;  padding: 0; }
#middle-left-menu div li {  margin: 0.2em 0; color: #0B4DA2; font-size:0.8em; padding-bottom:0; text-indent:0.2em; background-color:#EDEDED;}
/*
#middle-left-menu div li a {  font-size:0.8em; }
#middle-left-menu div li a { color: #0000FF; font-size:0.8em; text-decoration:none; }
*/
#middle-left-menu div li:hover { background-color: #EEEEEE; }

#middle-left-menu div a { font-size:0.9em;  padding-bottom:0.3em; }
/*
#middle-left-menu div a:link { text-decoration:underline; }
#middle-left-menu div a:hover  { text-decoration:none; }
#middle-left-menu div a:visited { color: #551A8B; }
#middle-left-menu div a:hover { text-decoration:underline; }
*/
/*#middle-left-menu div p a { font-size:0.8em;  margin:0.5em 0; }*/
/*#middle-left-menu div li a { font-size:0.9em; }*/

#middle-colonne   { float:left; width:73%; }
#right-colonne    { float:right; width:26%; padding:0; font-size:0.8em; border-left:1px solid #C5E8FB; height:42em; overflow:auto; }
#right-colonne h1 { margin-top:0; background-color:#FBD886; text-align:center; }
#right-colonne h2 { text-align:center; }

/* =========================================
  footer
========================================= */
#footer-wrapper { position:relative; clear:both; width: 98%;    margin: 0 auto; height:40px;}
#footer-wrapper { background: url(../img/bg_footer.jpg); height: 40px; background-repeat: repeat-x; /*border:1px solid;*/}
#footer { margin: 0 auto; width:100%; /*border:1px solid #FF0000;*/}
#footer-logo-left { float:left; }
#footer-logo-right { float:right; }
#footer p { margin:0; text-align:left; font-size: 0.7em; font-weight:normal; }
.partner-logo { position:absolute; bottom:0; right:0; }


/* ============================
    Search engine box
=============================== */
#box-search { position: absolute; top:25px; right:0; valign:middle; height:1.2em; margin:0; }
#box-search strong { font-size: 0.8em; font-weight:bold;  }
#box-search form { float:left; }
#box-search input[type~="text"] { width:150px; height:1.2em; border:1px solid #AAAAAA; }
#box-search input.submit-button { font-size:0.8em; border:1px solid #AAAAAA; background-color:#DDDDDD;  }
#box-search input.submit-button:hover { font-size:0.8em; border:1px solid #8080FF; background-color:#DDDDFE; }


/* ============================
    SELECT LIST
=============================== */
#box-select-topic { position: absolute; top:55px; left:0; margin:0; }
#box-select-topic strong { font-size: 0.8em; font-weight:bold;  }
#box-select-topic form option { background-color:#EEEEFF; }
/*#box-select-topic option { font-size:0.8em; }*/

/* =========================================
  
    HOME PAGE ELEMENTS 
  (news, themes, agenda)
    
========================================= 
Attention: the box-right (position: absolute) must be placed before the 
box-center (block element) and after the box-left (absolute) otherwhise the center box will generate a break line afterwards
and the right box will be pushed under the center box. If the box-center is introduced in the web page before the two others
they will both be pushed to the next line even if the horizontal positioning remains the same.
*/
#box-wrapper, #box-wrapper-2 { float:left; width: 100%; margin: 0; margin-bottom:0.5em; background-color:#FFFFFF; }
#box-wrapper-bottom { float:left; width: 100%; margin: 0; margin-bottom:0.5em; }
#box-wrapper-2 { border:1px solid #FAF4DC;  }   /* same bgcolor as body so it seems transparent */
#box-wrapper-right { position:absolute; right: 2em; top:0em; border:1px solid #FF0000; width: 30%; background-color:#FDFDFD; }
#box-wrapper h3 { margin:0; font-size:1em;}
#box-wrapper p { text-align:left; }

#box-simple  { float: left; width:29%; margin:0.2em; padding-left:0; }
#box-simple ul { font-size: 0.7em; }
#box-simple ul li { margin-bottom: 0.5em; list-style-type:none; }
#box-simple h2 { font-size: 0.8em; font-weight:bold; width:100%; margin-bottom: 0.4em; }
#box-simple p { font-size: 0.7em; }
#box-simple li img { width:100px; float:right; margin: 0.2em; border:1px solid #AAAAAA; }

#empty-line { font-size:0.5em; height:auto; margin:0;  }


/* =========================================
  
    TABLE STYLE ELEMENTS
      
========================================= */
th, td { font-size:0.9em; padding: 0.5em; margin:0; border-bottom:1px solid #AAAAAA; }
th     { text-align:left; font-weight:bold; background-color:#ADDFF8; }
td     { text-align:left; }


table#home-page { float:left; width:100%; }
table#home-page td { border:1px solid #DDDDDD; text-align:left; font-size:0.9em; background-color:#FFFFFF; }
table#home-page td h2 { width:100%; margin:0 auto; background-color:#ADDFF8; text-align:center; }
table#home-page td p { text-align:left; }
table#home-page td img { float:left; width:60px; margin: 0.2em; border:1px solid #AAAAAA; }
table#home-page td div.event { font-size:1em; text-align:left;}
table#home-page td div.event a { font-size:1em; }
.event { font-size:0.9em; text-align:left; background-color:#FFFFFF; margin:0; border:1px solid #DDDDDD; }
.event div { margin-bottom:0.5em; }
.event h2 { font-size:1em; margin:0; background-color:#ADDFF8; text-align:center; }
table#home-page td ul { width:100%; margin:0; padding:0; /*border:1px solid #00FF00;*/ }
table#home-page td ul li { /*border:1px solid #0000FF;*/ }

/**************************
        EVENTS
**************************/
#eventnews { padding-bottom:1em; border-bottom:1px dashed #AAA; }