* { margin: 0; padding: 0; }
a img { border: 0 none; }
a:focus { outline: 0 none; }
body { color: #666; font-size: 80%; font-family: Verdana, Arial, Helvetica, Sans-Serif; }

#top { 
	height: 80px; background: #FFF; 
	position: relative;
	margin-bottom: 40px;
}
#top img {
	margin: 10px 59px 10px 10px;
}

#top h1 { 
	background-color: #4D4D4D;
	color: #4D4D4D;
	font-size: 100%;
	font-weight: normal;
	text-align: right;
	padding-bottom: 8px;
}
#top h1 span {
	background: url(/app/images/coin.gif) bottom left no-repeat #FFF;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 4px;
	white-space: nowrap;
}
#top ul { list-style: none; position: absolute; bottom: 3px; left: 263px; }
#top ul li { display: inline; margin: 0 0.5em; }
#top ul li a { color: white; text-decoration: none; }
#top ul li a:hover,#top ul li a:focus, #top ul li.on a { color: yellow; }

#main { width: 960px; margin: 1em auto; border: 1px solid #888 }
#nav { margin: 30px 0; }
#nav ul { list-style: none; border-bottom: 1px dotted #ddd; width: 221px; margin-bottom: 20px; }
#nav ul li a {
	display: block; 
	font-weight: bold;
	padding: 3px 10px; text-decoration: none; border-top: 1px dotted #ddd; 
	color:  #888;					
}
#nav ul li a:hover, #nav ul li a:focus, #nav ul li.on ul li a:hover, #nav ul li.on ul li a:focus { color: #BF0000; }
#nav ul li ul { border: none; margin-bottom: 10px; }
#nav ul li.on a, #nav ul li.on ul li.on a { color: #BF0000; }
#nav ul li ul { display: none; }
#nav ul li.on ul { display: block; }
#nav ul li ul li a, #nav ul li.on ul li a { color: #888; font-weight: normal; border: none; font-size: 85%; padding-left: 20px; }

#content h1, #content h2, #content h3, #content h4 { font-family: "Courier New", Courier, "Bookman Old Style", Bookman, Times, Serif; clear: both; }
#content h1 { margin: 1em 0; color: #666; letter-spacing: 0.1em;}
#content h2 { margin: 1em 0; color: #666;  }
#content h3 { margin: 1em 0; color: #666; }
#content h4 { font-size: 1em; margin: 1em 0; color: #666; }
p { margin: 1em 0; text-align: justify; }
#nav { float: left; width: 220px; }
#content { float: left; padding-left: 50px; width: 610px; margin-bottom: 20px; }
#content.embeded { float: none; width: 604px; padding: 12px; padding-left: 16px; }
#content.embeded_fullpage { padding-left: 32px; }
#content.embeded *:first-child { margin-top: 0; }
#footer { position: relative; clear: both;  background-color: #4D4D4D; color: white; text-align: center; padding: 2px; margin-top: 20px; }
#footer a { color: white; }
#w3c { position: absolute; left: 8px; top: -24px; }

span.infobulle { position: relative; border-bottom: 1px dotted #BF0000; color: #A04444; cursor: help; }
span.infobulle span { color: #BF0000; z-index: 100; background-color: white; display: none; position: absolute; top: 1.8em; left: 1em; width: 18em; border: 1px solid #BF0000; background-color: #fff; padding: 0.5em; }
span.infobulle:hover span { display: block; }

div.section { display: none; border: 1px solid #eee; border-top: none; padding: 1em; }
div.showhide { margin-top: 1em; cursor: help; text-align: center; background-color: #eee; }

div.code { white-space: nowrap; font-family:"Courier New", Courier, monospace; padding: 1em; border: 1px solid #ccc; background-color: #eee; overflow: auto; margin: 1em 0; }
div.code a { text-decoration: none; }
span.admin { float: left; margin: 0 0 20px 10px; font-size: 70%; color: #ccc; text-decoration: none; cursor: pointer; }
span.admin:hover { color: #900; }
#content span.admin { margin: 0 0 20px 0; }

.wrong { color: red; }
a.external { background: url(/app/images/external.gif) top right no-repeat; padding-right: 10px; }
a.ressource { background: right no-repeat; padding-right: 20px; }
a { color: #c60; }

img.left { float: left; margin-right: 1em; }
img.right { float: right; margin-left: 1em; }
img.center { display: block; margin: 1em auto; }
img.middle { display: inline; vertical-align: middle; }
div.legend { margin: 3em 0; text-align: center; }
div.legend img { display: inline; margin-bottom: 1em; }

div.table { margin: 16px 0; }
table { border-collapse: collapse; width: 100%; }
table th { background-color: #ddd; text-align: left; }
table td, table th { padding: 2px 5px; border: 1px solid #ccc; margin: 0; }
table td.left, table th.left { text-align: left; }
table td.center, table th.center { text-align: center; }
table td.right, table th.right { text-align: right; }

table.mep { width: auto; }
table.mep td, table.mep th { vertical-align: top; border: 0 none; padding: 8px 12px; max-width: 400px; }

#content .w50 { width: 50%; margin-left: auto; margin-right: auto; }
#content .w60 { width: 60%; margin-left: auto; margin-right: auto; }
#content .w70 { width: 70%; margin-left: auto; margin-right: auto; }
#content .w80 { width: 80%; margin-left: auto; margin-right: auto; }
#content .w90 { width: 90%; margin-left: auto; margin-right: auto; }

#content ul { margin: 1em 0 1em 2em; }
#content ul li { padding-bottom: 0.3em; }
#content span.touche { padding: 0 2px; background-color: #ccc; border: 1px outset #ccc; font-weight: bold; }

div.video_link { }
div.video_link a { display: inline-block; text-decoration: none; }
div.video_link a span { display: block; text-align: center; margin-top: 2px; text-decoration: none; }
div.video_link img { border: 1px solid black; text-decoration: none; border-radius: 6px; box-shadow: 5px 5px 5px #ccc; }