html,body { margin: 0; padding: 0; background-color: #000; color: #fff; font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; }

#accueil { width: 800px; height: 600px; margin: 20px auto 0 auto; padding: 0; background-image: url('http://www.romainpetit.fr/v5/img/labyrinthe_accueil.png'); text-align: right; }
#accueil ul { display: block; margin: 0; padding: 0; list-style: none; text-align: left; font-size: 2em; }
#accueil li { display: block; }
#accueil li.index, #accueil li.blog, #accueil li.photos, #accueil li.web, #accueil li.portfolio { position: relative; background-color: white; }
#accueil li.index, #accueil a.index { width: 148px; height: 52px; }
#accueil li.blog, #accueil a.blog { width: 137px; height: 38px; }
#accueil li.photos, #accueil a.photos { width: 203px; height: 38px; }
#accueil li.web, #accueil a.web { width: 104px; height: 38px; }
#accueil li.portfolio, #accueil a.portfolio { width: 302px; height: 38px; }
#accueil li.index { top: 0; left: 652px; }
#accueil li.blog { top: 470px; left: 120px; }
#accueil li.photos { top: 240px; left: 520px; }
#accueil li.web { top: 340px; left: 420px; }
#accueil li.portfolio { top: 60px; left: 40px; }
#accueil a { display: block; background: url('http://www.romainpetit.fr/v5/img/sprite_accueil.png') top left no-repeat; text-indent: -9000px; }
#accueil a.index { background-position: 0 0; }
#accueil a.blog { background-position: -148px 0; }
#accueil a.photos { background-position: -285px 0; }
#accueil a.web { background-position: -488px 0; }
#accueil a.portfolio { background-position: -592px 0; }
#accueil a.index:hover { background-color: #000; background-position: 0 -52px; }
#accueil a.blog:hover { background-color: #000; background-position: -148px -38px; }
#accueil a.photos:hover { background-color: #000; background-position: -285px -38px; }
#accueil a.web:hover { background-color: #000; background-position: -488px -38px; }
#accueil a.portfolio:hover { background-color: #000; background-position: -592px -38px; }

p { width: 800px; margin: 20px auto 0 auto; padding: 0; text-align: justify; text-transform: uppercase; }

#accueilext { overflow: auto; display: block; width: 800px; margin: 20px auto 0 auto; padding: 0; text-align: left; list-style-type: none; text-indent: -9000px; }
#accueilext a { float: right; display: block; background: url('http://www.romainpetit.fr/v5/img/sprite_logos.png') top left no-repeat; }
#accueilext li { display: inline; margin: 0; padding: 0; top: 0; }
#accueilext li.youtube, #accueilext a.youtube { width: 50px; height: 20px; background-position: -20px -20px; }
#accueilext a.youtube:hover { background-position: -20px 0; }
#accueilext li.facebook, #accueilext a.facebook { width: 20px; height: 20px; background-position: 0 -20px; margin-right: 40px; }
#accueilext a.facebook:hover { background-position: 0 0; }