/**
les drapeaux viennent de : http://www.flag-icon.com/
*/



body { 
	font: 0.85em/1.3em Verdana, Arial, Helvetica, sans-serif ;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	background: #eee url(../image/background.jpg) fixed;
	color: #000;
	text-align: center;
	padding: 0;
	margin: 0;
	height: 100%;
}

h3 {
	width: 100%; /* needed for IE5+ */
	font-family: Times, serif;
	font-size: 100%;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	word-spacing: 0.3em;
	border-bottom: #888 1px solid;
}

html > body h3 {
	/* redefinition of the border to dotted,
	hidden from IE - because the dashed line
	that IE uses instead of dots looks a bit
	too crude in my opinion */
	border-bottom: #000 1px dotted;
}

acronym {
	/* in this case, I can live with IE's dashed line */
	border-bottom: #000 1px dotted;
}

a, a:link { color: #900; background: transparent; text-decoration: none; }
a:visited { color: #933; background: transparent }
a:hover { color: #966; background: transparent }
a:active { color: #988; background: transparent }

/* let's start with the whole page container */

#container {
	position: relative;
	margin: 10px auto;
	width: 85%;
	padding: 5px;
	text-align: left;
	background: #f5f5f5 url(../image/pattern.png) no-repeat center;
	border: #000 1px solid;
	color: inherit;
}

/* and now the specific divs */

#pageHeader {
	padding: 5px;
	height: 160px;
	margin: 5px;
	border: #000 solid 1px;
	text-align: left;
	background: #fff url(../image/tophead.png) repeat-x top left;
        background-size: contain;
        color: inherit;
        background-size: cover; 
}

#pageHeader h1, #pageHeader h2 {
	display: none;
}

#header {
	position: relative;
	top: 130px;
	padding: 2px;
	right: 0px;
	margin: 0;
	text-align: right;
}

#musique {
	position: absolute;
	left: 27px;
}

#header a {
	border: 0;
}

#carte {
	position: relative;
	left: 10px;
	padding: 25px 5px 5px 5px;
	width: 710px;
	margin: 0;
}

#quickSummary, #preamble, #supportingText {
	position: relative;
	left: 200px;
	padding: 25px 5px 5px 5px;
	width: 500px;
	margin: 0;
}

#quickSummary {
	border: 1px #000 dotted;
	background: #fff ;
	color: inherit;
	font-size: 0.85em;
	padding: 5px;
 
}

#quickSummary.quickSummaryindex {
    background: #fff url(../image/myosotiss.png) no-repeat right bottom;
    background-origin: content-box;

}




#quickSummary p.p1 {
	text-decoration: none;
	font-weight: bold;
	font-size: 1.85em;
	Line-Height: 1.2;
}

#quickSummary p.p2 {
	text-decoration: none;
	font-size: 1.50em;
	letter-spacing: 0.3em;
}

#quickSummary a, #preamble a, #supportingText a {
	text-decoration: none;
	font-weight: bold;
}

#explanation {
	/* a little inelegant, but gets the job done */
	margin-top: -2em;
}


p.pimg
{
     font: italic 20px Georgia, "Times New Roman", Times, serif;
}
img {
    max-width: 100%;
    height: auto;
}

#linkList {
	position: absolute;
	top: 180px;
	left: 0;
	padding: 25px 5px 5px 5px;
	margin: 0;
	width: 150px;
	/*background: url(../image/spikes.png) no-repeat center top;*/
}

#lselect ul, #lresources ul, #larchives ul {
	margin: 0 0 0.5em 0;
	padding: 0;
}

#lselect ul li, #lresources ul li, #larchives ul li{
	list-style-type: none;
	border: #000 1px solid;
	padding: 2px;
	margin: 2px;
	text-align: left;
	background: #fff;
	color: inherit;
}

/* there seems to be an issue in Opera with the hover on the lselect...
any clues to a solution would be appreciated ;) */

#lselect ul li:hover, #lresources ul li:hover, #larchives ul li:hover {
	background: #900;
	color: #fff;
}

#lselect ul li:hover a, #lresources ul li:hover a, #larchives ul li:hover a {
	background: inherit;
	color: #eee;
}

#lselect ul a:hover, #lresources ul a:hover, #larchives ul a:hover {
	/* this style is there to make up for IE's inability to apply
	:hover pseudo to an li. of course, it won't look the same as having the whole
	li turn red, but it should be an acceptable compromise */
	background: #900;
	color: #eee;
}

#lselect, #lresources, #larchives {
	padding: 25px 5px 5px 5px;
	background: url(../image/spikes4.png) no-repeat center top;
}



#footer {
	margin: 0;
	padding: 5px;
	/* again, I can live with IE's dashed line */
	border: 1px #000 dotted;
	background: #fff;
	color: inherit;
	text-align: center;
}

#footer a {
	margin-right: 20px;
	padding-left: 18px;
	background: url(../image/bullet.png) no-repeat left center;
}



/* and now for the big caps for each paragraph in supportingText
this is again hidden from IE, as it tends to crash otherwise and
I really can't be bothered to work around its flaws...consider it
icing on the cake for non-IE users */

body > div#supportingText p:first-letter {
	font: 2em Times, Helvetica, serif;
	float: left;
	text-transform: uppercase;
	margin: 0 3px 3px 0;
	padding: 0; 
}

/* 	the following two rules may be just a minor detail, but i think it's worth it.
they add a little download icon in front of the sample CSS and HTML download links.
the first one works in all 5+ browsers, whereas the second one is only for CSS2 compliant
ones. also, use of the |= selector may be "unorthodox", but it was the best I could come up
with since the two download links in the "participation" div are not especially marked up
with a class, AND there are other links in that div ("CSS Resource Guide", "Send us a link" and "contact me") that
do not need the little icon...hence the rule could not be applied to "#participation a" */

#quickSummary a {
	padding-left: 15px;
	background: url(../image/bullet.png) no-repeat left center;
}

#participation a[href|=zengarden] { 
	/* CSS2-compliant only */
	padding-left: 15px;
	background: url(../image/download.png) no-repeat left center;
}

/* no need for extras...they're just not displayed */

#extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 {
	display: none;
}


#requirements{ 
	background: url(../image/sceau.png) no-repeat bottom right; 

	} 

        
        /*#lettres display*/  
  
#lettreblock {
width:500px;
margin:5px;
padding:10px;
background-color:#FFF;/*blanc*/
border-left:4px double #7A96BC;  /*couleur du cadre: bleu fonce  */
border-right:4px double #7A96BC;
border-bottom:4px double #7A96BC;
border-top:4px double #7A96BC;


}


TD.lettre
{
font: 0.65em/1.3em Verdana, Arial, Helvetica, sans-serif ;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}

        
#lettreblockTop {
}


#lettreblockLeft {
float:left;
width:220px;
background-color:#FFF;/*blanc*/
border:1px dotted #7A96BC;
/*border-left:3px groove #7A96BC;  couleur du cadre: bleu clair  
border-right:3px groove #46566B; couleur du cadre: bleu moyen fonce  
border-bottom:3px groove #46566B;
border-top:3px groove #7A96BC;*/
}


#lettreblockRight {
left: 300px;
margin-left:300px;
margin-top: 0px;
background-color:#FFF;/*blanc*/
border:1px dotted #7A96BC;
/*border-left:3px solid #7A96BC;  couleur du cadre: bleu clair  
border-right:3px solid #46566B; couleur du cadre: bleu moyen fonce  
border-bottom:3px solid #46566B;
border-top:3px solid #7A96BC;*/
}

#lettreblockRight img.down5 {
margin-top: 5px;
padding-bottom: 0px;
vertical-align:bottom;
}

#lettreblockRight li {
text-decoration: none; 
list-style-type: none;  
}

#lettreblockBottom {
  padding-top:5px;
clear:both ;
/*width: 600px;*/
text-align: left;
}

#lettreblockBottom ul{
text-align: right;
font-size: 12px;
}

#lettreblockBottom li
{
list-style-type:none; 
/*text-decoration: none; 
list-style-type: none; 
text-align: left;
display: inline; 
padding:0px;*/
}

input.button
{
      opacity : 1.0;
    -moz-opacity : 1.0;
    -ms-filter: "alpha(opacity=100)"; /* IE 8 */
    filter : alpha(opacity=100); /* IE < 8 */
background-color:#CCCCFF;/*gris*/
color:black;
        -moz-border-radius: 30px;
        -webkit-border-radius: 30px;
        border-radius: 30px;
		/*width:60%;
		margin-top: 2%;
		margin-bottom: 2%;
		margin-left:20%;
		margin-right:20%;*/
     
		border: 1px solid black;
       cursor:pointer;
}
input.button:hover
{
background-color:	#ff9600; /*meme couleur que les links*/
} 

input.buttonAdd
{
      opacity : 1.0;
    -moz-opacity : 1.0;
    -ms-filter: "alpha(opacity=100)"; /* IE 8 */
    filter : alpha(opacity=100); /* IE < 8 */

color:black;
        -moz-border-radius: 30px;
        -webkit-border-radius: 30px;
        border-radius: 30px;
		/*width:60%;
		margin-top: 2%;
		margin-bottom: 2%;
		margin-left:20%;
		margin-right:20%;*/
 
		border: none;
    cursor:pointer;
    background-color:transparent;
    background-image:url(../img/note_add.png);
    background-repeat:no-repeat;
    background-position:center center;
       cursor:pointer;
       
    border: 3px solid transparent;
}

input.buttonAdd:hover
{
border: 3px solid #ff9600; /*meme couleur que les links*/
} 

input.buttonDel
{
      opacity : 1.0;
    -moz-opacity : 1.0;
    -ms-filter: "alpha(opacity=100)"; /* IE 8 */
    filter : alpha(opacity=100); /* IE < 8 */

color:black;
        -moz-border-radius: 30px;
        -webkit-border-radius: 30px;
        border-radius: 30px;
		/*width:60%;
		margin-top: 2%;
		margin-bottom: 2%;
		margin-left:20%;
		margin-right:20%;*/
 
		border: none;
    cursor:pointer;
    background-color:transparent;
    background-image:url(../img/b_drop.png);
    background-repeat:no-repeat;
    background-position:center center;
    cursor:pointer;
    border: 3px solid transparent;
}

input.buttonDel:hover
{
border: 3px solid #ff9600; /*meme couleur que les links*/
} 

input.buttonMod
{
      opacity : 1.0;
    -moz-opacity : 1.0;
    -ms-filter: "alpha(opacity=100)"; /* IE 8 */
    filter : alpha(opacity=100); /* IE < 8 */
    color:black;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
		/*width:60%;
		margin-top: 2%;
		margin-bottom: 2%;
		margin-left:20%;
		margin-right:20%;*/
 
		border: none;
    cursor:pointer;
    background-color:transparent;
    background-image:url(../img/b_save.png);
    background-repeat:no-repeat;
    background-position:center center;
    cursor:pointer;
    border: 3px solid transparent;
}

input.buttonMod:hover
{
border: 3px solid #ff9600; /*meme couleur que les links*/
} 


input.buttonDelSel
{
      opacity : 1.0;
    -moz-opacity : 1.0;
    -ms-filter: "alpha(opacity=100)"; /* IE 8 */
    filter : alpha(opacity=100); /* IE < 8 */

color:black;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
		width:28px;
    height:28px;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-left:0px;
		margin-right:0px;
 
		border: none;
    cursor:pointer;
    background-color:transparent;
    background-image:url(../img/garbage.png);
    background-repeat:no-repeat;
    background-position:center center;
    cursor:pointer;
    border: 3px solid transparent;
}

input.buttonDelSel:hover
{
border: 3px solid #ff9600; /*meme couleur que les links*/
} 

input.buttonModSel
{
      opacity : 1.0;
    -moz-opacity : 1.0;
    -ms-filter: "alpha(opacity=100)"; /* IE 8 */
    filter : alpha(opacity=100); /* IE < 8 */
    color:black;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
		width:28px;
    height:28px;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-left:0px;
		margin-right:0px;
 
		border: none;
    cursor:pointer;
    background-color:transparent;
    background-image:url(../img/disks.png);
    background-repeat:no-repeat;
    background-position:center center;
    cursor:pointer;
    border: 3px solid transparent;
}

input.buttonModSel:hover
{
border: 3px solid #ff9600; /*meme couleur que les links*/
}