html {
background:url(images/bg.jpg) repeat-x top left #FFFFFF;
}

#webaward {
display:block; 
width:308px; 
height:189px; 
margin:auto; 
margin-top:75px; 
position:relative
}

 
#avant {
position:absolute; 
top:137px; 
left:-250px; 
color:grey; 
font:14px 'Trebuchet MS', Verdana, Arial, Sans-Serif; 
text-decoration:none; 
padding:5px 8px 0 8px;
width:230px; 
height:31px; 
display:block; 
background:url(images/avancement.png) no-repeat #FFFFFF; 
text-align:center}

a#blog {
position:absolute; 
top:159px; 
left:5px; 
text-decoration:none; 
padding:5px 8px 0 8px;
width:60px; 
height:35px;
display:block; 
background:url(images/blog.png) no-repeat #FFFFFF; 
opacity:0.60
}

a#blog:hover {
opacity:2
}

#avant span {
font-weight:bold;
}


a#twitter {
position:absolute;
right:5px; 
top:165px; 
opacity:0.60
}

a#twitter:hover {
opacity:2
}

a#twitter img {
border:none
}

.droite
{

        position: relative; /* IE is dumb */
        width: 200px; 
        padding: 2px; 
}

.graph_orange {

        position: relative; /* IE is dumb */
        width: 200px; 
        border: 1px solid orange; 
        padding: 2px; 
}
.graph_orange .bar { 
        display: block;
        position: relative;
        background: orange; 
        text-align: center; 
        color: #333; 
        height: 1em; 
        line-height: 1em;            
}

.graph_vert {

        position: relative; /* IE is dumb */
        width: 200px; 
        border: 1px solid #66CC33; 
        padding: 2px; 
}
.graph_vert .bar { 
        display: block;
        position: relative;
        background: #66CC33; 
        text-align: center; 
        color: #333; 
        height: 1em; 
        line-height: 1em;            
}

.graph_rouge {

        position: relative; /* IE is dumb */
        width: 200px; 
        border: 1px solid red; 
        padding: 2px; 
}
.graph_rouge .bar { 
        display: block;
        position: relative;
        background: red; 
        text-align: center; 
        color: #333; 
        height: 1em; 
        line-height: 1em;            
}
.graph_rouge .bar span { position: absolute; left: 1em; }
.graph_vert .bar span { position: absolute; left: 1em; }
.graph_orange .bar span { position: absolute; left: 1em; }


/* JSS */
#rep {

background:url(images/rep.jpg) repeat-x top left #FFFFFF;
}

#wrapper {
	width: 660px;
	margin: auto;
	position:relative;
}

h1 {
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	padding: 0.3em 0;
	text-indent:-99999px;
}


#nav {
top:-325px;
position:relative;
line-height:13px;
list-style: none;
padding: 0;
margin: 5px 0 10px 0;
background: #CCCCCC url(images/rep.jpg) repeat-x;
display: block;
overflow: hidden;
font-size: 0.9em;
height:42px;
text-transform:capitalize;
font-family: Trebuchet MS, Arial;
}
#nav li {
	display: inline;
}
#nav li a {
	display: block;
	float: left;
	padding: 10px 20px;
	color: #333333;
	text-decoration: none;
}
#nav li a:hover {
color: #0099CC;
	background: #999999 url(images/reph.jpg) repeat-x;
}
#load {
	display: none;
	position: absolute;
	right: 10px;
	top: 10px;
	background: url(images/ajax-loader.gif);
	width: 43px;
	height: 11px;
	text-indent: -9999em;
}

#content, .blog {
border: dashed 1px grey;
font-family: Trebuchet MS, Arial;
padding:10px;
font-size: 14px;
}

h2 {
	margin: 0;
	padding: 0.5em 0;
	color: #0099CC;
	font-family:Trebuchet MS, Arial, Sans-serif;
}
p {
	margin: 0;
	padding: 0.4em 0;
	color: #333333;
	line-height:1.4em;
}
#content img.right {
	float: right;
	margin: 0 0 8px 8px;

}

dt
{
	font-weight: bold;
}

dd
{
	padding-bottom: 30px;
	font-variant: small-caps;
}

#footer
{
	float: right;
	font-size: 12px;
}