body{  Arial,font-family:"Trebuchet MS", Helvetica, sans-serif;}
.CB{clear:both;}
.FL{float:left;}
.FR{float:right;}
#wrap{width:950px; margin:auto;}
h1{font-size:25px; margin:20px 0 20px 0;font-variant:small-caps; font-weight:bold; }
h2{font-size:18px; margin:20px 0 0 0; font-weight:bold; font-variant:small-caps;}
div.demo{
padding:3px 10px 3px 10px;
border-left:2px solid #09F;
margin:15px 8px 15px 8px;
}

div.demo p{ font-style:italic; color:#666; font-size:14px;}
div.ajaxContent{ border:1px dotted  #999;margin: 0 6px 0 20px;}
div.ajaxContent h2{ font-size:18px; font-weight:bold;margin: 16px 20px 16px 35px;font-variant: normal; border-bottom:1px solid #333;padding:0 0 6px 0;}
div.ajaxContent p{ line-height:1.3;margin: 16px 20px 16px 35px; font-style: normal; color:#333; }

div.exp{
padding:3px 10px 3px 10px;
margin:15px 8px 15px 8px;
}

div.exp h3{ font-size:18px; text-transform:uppercase; font-weight:bold; color:#448ab0; margin:20px 0 10px 0; }
div.exp ul{ list-style:square;}

div.exp ul li {margin:10px 0 10px 0; font-size:14px;}
div.exp ul li a{color:#448ab0}
div.exp ul li span{margin:0 0 0 10px; color:#666; }
div.exp p#licence{ font-size:13px; color:#333; }
div.exp p#licence a{ color:#448ab0;text-decoration:none; }
p#footer{text-align:right; font-size:12px; margin:15px 0 15px 0; border-top:1px solid #666; padding:10px 0 0 0;}
p#footer a{ color:#448ab0;text-decoration:none;}
p#footer a:link, p#footer a:visited, p#footer a:active, {}
p#footer a:hover{text-decoration: underline;}
/* Demo 01 */
/*
MENU | Icon Size : 128px x 128px 
*/
.navigation01{ /*background-image:url(../img/bgNavDiv.png);
background-repeat:repeat-x;
background-position:0 bottom;*/
margin: 0 0 0 15px;

}

#navDemo01{ 
width:336px; 
height:80px; /*max height depend of max size icon (mouseOver) and size of navActive Background. Here no activeNav => ex: 128px+0px = 128px */
margin:0 auto;
/*background-image:url(../img/bgMenu.png);
background-repeat:repeat-x;
background-position:0 bottom;*/

padding:15px;
}


#navDemo01 li{
*float:left; /*IE 7 Hack with Float + Margin-Top */

}


#navDemo01 li.navActive a{ background-image:url(../img/navActive.png); background-repeat:no-repeat; background-position:center bottom; }
#navDemo01 li a{
position:relative;
 display:block;
float:left;
 width:48px; /* size of the icon when mouse is out */
 height:48px; /* size of the icon when mouse is out */
 /*margin-top:32px; *//*result of (iconSize_Over - iconSize_Out) => ex : 128px - 64px = 64px*/
margin:32px 0 0 0;
text-decoration:none;
padding-bottom:7px;
background-image:url(../img/bgMenu1.png); background-repeat: no-repeat; background-position: center bottom;
}
#navDemo01 li a img{ width:90%; }



/* Demo 02 */
/*
MENU | Icon Size : 128px x 128px 
*/

.navigation02{ background-image:url(../img/bgNavDiv.png);
background-repeat:repeat-x;
background-position:0 bottom;margin: 0 0 0 15px;}

#navDemo02{ 
width:448px;
height:143px; /*max height depend of max size icon (mouseOver) and size of navActive Background. ex: 128px+15px = 143px */
margin:0 auto;
background-image:url(../img/bgMenu.png);
background-repeat:repeat-x;
background-position:0 bottom;
}


#navDemo02 li{
*float:left; /*IE 7 Hack with Float + Margin-Top */

}

#navDemo02 li.navActive a{ background-image:url(../img/navActive.png); background-repeat:no-repeat; background-position:center bottom; }
#navDemo02 li a{
position:relative;
 display:block;
float:left;
 width:64px; /* size of the icon when mouse is out */
 height:64px; /* size of the icon when mouse is out */
 margin-top:64px; /*result of (iconSize_Over - iconSize_Out) => ex : 128px - 64px = 64px*/
padding-bottom:15px; /* to display the navActive Background */
text-decoration:none;
}
#navDemo02 li a img{ width:100%;}

/*TIPS */
#navDemo02 li span.tips{position: absolute; display:block; top:10px; left:70px; padding:5px; background-color:#F0F0F0; color:#448ab0; text-decoration:none; font-weight:bold; }