@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'ParisPoesie';
    src: url('t/ParisPoesie.eot');
    src: url('t/ParisPoesie.eot?#iefix') format('embedded-opentype'),
         url('t/ParisPoesie.woff') format('woff'),
         url('t/ParisPoesie.ttf') format('truetype'),
         url('t/ParisPoesie.svg#ParisPoesie') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'titre-poesie';
	src: url('t/titre-poesie.eot');
	src: local('☺'), 
		 url('t/titre-poesie.woff') format('woff'), 
		 url('t/titre-poesie.ttf') format('truetype'), 
		 url('t/titre-poesie.svg#titre-poesie') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'poeme';
	src: url('t/poeme.eot');
	src: local('☺'), 
		 url('t/poeme.woff') format('woff'), 
		 url('t/poeme.ttf') format('truetype'), 
		 url('t/poeme.svg#poeme') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'auteur';
    src: url('t/auteur.eot');
    src: url('t/auteur.eot?#iefix') format('embedded-opentype'),
         url('t/auteur.woff') format('woff'),
         url('t/auteur.ttf') format('truetype'),
         url('t/auteur.svg#auteur') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'auteur';
    src: url('t/auteur-bold.eot');
    src: url('t/auteur-bold.eot?#iefix') format('embedded-opentype'),
         url('t/auteur-bold.woff') format('woff'),
         url('t/auteur-bold.ttf') format('truetype'),
         url('t/auteur-bold.svg#auteur-bold') format('svg');
    font-weight: bold;
    font-style:: normal;
}

@keyframes "fade-in" {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes "fade-out" {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
	background-color: rgba(256, 256, 256, 0.3);
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
	background-color: rgba(256, 256, 256, 0.2);
}

body {
	background-color: #000;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	
	
   scrollbar-face-color:#e6dbc5;
   scrollbar-shadow-color:#e6dbc5;
   scrollbar-highlight-color:#e6dbc5;
   scrollbar-darkshadow-Color:#e6dbc5;
   scrollbar-arrow-color:#694f3d;
   scrollbar-3dlight-color:#ede5d5;
   scrollbar-track-color:#fcf7ed;
}

h1 {
	position:absolute;
	display:block;
	margin:0;
	padding:0;
	text-indent:-9999px;
}
h1 a {
	display:block;
	width:100%;
	height:100%;
}
#page {
	width:1024px;
	height:768px;
	position:relative;
	margin:0 auto;
	animation: fade-in 3s ease-in-out 0s;
}

ul, li, li a {
	padding:0;
	margin:0;
	display:block;
	background-repeat:no-repeat;
	transition: background-image .5s;
}

img {
	border:0;
}

.photobg {
	position:absolute;
	left:0px;
	top:0;
}

.MairieDeParis {
	position:absolute;
	right:10px;
	bottom:10px;
	display:block;
	width:200px;
	height:23px;
	background:url(../i/nav/MairiedeParis.png) no-repeat;
	text-indent:-9999px;
}
ul.footer {
	position:absolute;
	left:175px;
	top:677px;
	display:block;
	width:500px;
	height:36px;
}

.footer li {
	display:inline-block;
	text-indent: -9999px;
	height:36px;
	float:left;
}
li.pdf a {
	background:url(../i/nav/11-pdf-off.png) no-repeat;
	width:133px;
	height:36px;
}
li.pdf a:hover {
	background:url(../i/nav/11-pdf-on.png) no-repeat;
}
li.pdf {
	background: url(../i/nav/11-pdf-on.png) no-repeat -9999px -9999px;
}
li.participer a {
	background:url(../i/nav/12-participer-off.png) no-repeat;
	width:148px;
	height:36px;
}
li.participer a:hover {
	background:url(../i/nav/12-participer-on.png) no-repeat;
}
li.participer {
	background:url(../i/nav/12-participer-on.png) no-repeat -9999px -9999px;
}
li.credits a {
	background:url(../i/nav/13-credits-off.png) no-repeat;
	width:59px;
	height:36px;
}
li.credits a:hover {
	background:url(../i/nav/13-credits-on.png) no-repeat;
}
li.credits {
	background:url(../i/nav/13-credits-on.png) no-repeat -9999px -9999px;
}

a.hasard {
	position:absolute;
	left:265px;
	top:220px;
	background:url(../i/nav/hasard.png);
	display:block;
	width:150px;
	height:200px;
	text-indent:-9999px;
}

/*-------------------------------------------------------------------------------- page accueil --------------------------------------------------------------------------------*/

.HP h1 {
	left:148px;
	top:135px;
	width:336px;
	height:244px;
	background:url(../i/HP/Paris-Poesie.png) no-repeat;
}

#illustration {
	position:absolute;
	left:190px;
	top:380px;
	transition:all 1s;
}

.HP a.hasard {
	left:800px;
	top:430px;
}

.HP a.facebook {
	position:absolute;
	left:465px;
	top:600px;
	display:block;
	background:url(../i/HP/F1.png) no-repeat;
	width:49px;
	height:59px;
	text-indent:-9999px;
	transition:all 1s;
}
.HP a.facebook:hover {
	transform:rotate(10deg);
}

ul.liste-themes {
	position:absolute;
	text-indent:-9999px;
}

.HP ul.liste-themes {
	left:540px;
	top:130px;
	width:360px;
}

.HP .liste-themes li {
	width:360px;
}

.HP li.absences a {
	background:url(../i/HP/themes/1-absences-off.png) no-repeat;
	height:55px;
}
.HP li.absences a:hover {
	background:url(../i/HP/themes/1-absences-on.png) no-repeat;
}
.HP li.absences {
	background:url(../i/HP/themes/1-absences-on.png) no-repeat -9999px -9999px;
}
.HP li.hommages a {
	background:url(../i/HP/themes/2-hommages-off.png) no-repeat;
	height:55px;
}
.HP li.hommages a:hover {
	background:url(../i/HP/themes/2-hommages-on.png) no-repeat;
}
.HP li.hommages {
	background:url(../i/HP/themes/2-hommages-on.png) no-repeat -9999px -9999px;
}
.HP li.temps a {
	background:url(../i/HP/themes/3-temps-off.png) no-repeat;
	height:55px;
}
.HP li.temps a:hover {
	background:url(../i/HP/themes/3-temps-on.png) no-repeat;
}
.HP li.temps {
	background:url(../i/HP/themes/3-temps-on.png) no-repeat -9999px -9999px;
}
.HP li.mots a {
	background:url(../i/HP/themes/4-mots-off.png) no-repeat;
	height:57px;
}
.HP li.mots a:hover {
	background:url(../i/HP/themes/4-mots-on.png) no-repeat;
}
.HP li.mots {
	background:url(../i/HP/themes/4-mots-on.png) no-repeat -9999px -9999px;
}
.HP li.vie a {
	background:url(../i/HP/themes/5-vie-off.png) no-repeat;
	height:64px;
}
.HP li.vie a:hover {
	background:url(../i/HP/themes/5-vie-on.png) no-repeat;
}
.HP li.vie {
	background:url(../i/HP/themes/5-vie-on.png) no-repeat -9999px -9999px;
}
.HP li.planete a {
	background:url(../i/HP/themes/6-planete-off.png) no-repeat;
	height:60px;
}
.HP li.planete a:hover {
	background:url(../i/HP/themes/6-planete-on.png) no-repeat;
}
.HP li.planete {
	background:url(../i/HP/themes/6-planete-on.png) no-repeat -9999px -9999px;
}
.HP li.solidarites a {
	background:url(../i/HP/themes/7-solidarites-off.png) no-repeat;
	height:60px;
}
.HP li.solidarites a:hover {
	background:url(../i/HP/themes/7-solidarites-on.png) no-repeat;
}
.HP li.solidarites {
	background:url(../i/HP/themes/7-solidarites-on.png) no-repeat -9999px -9999px;
}
.HP li.amour a {
	background:url(../i/HP/themes/8-amour-off.png) no-repeat;
	height:65px;
}
.HP li.amour a:hover {
	background:url(../i/HP/themes/8-amour-on.png) no-repeat;
}
.HP li.amour {
	background:url(../i/HP/themes/8-amour-on.png) no-repeat -9999px -9999px;
}
.HP li.paname a {
	background:url(../i/HP/themes/9-paname-off.png) no-repeat;
	height:55px;
}
.HP li.paname a:hover {
	background:url(../i/HP/themes/9-paname-on.png) no-repeat;
}
.HP li.paname {
	background:url(../i/HP/themes/9-paname-on.png) no-repeat -9999px -9999px;
}

.HP li.preferes a {
	background:url(../i/HP/themes/10-pref-off.png) no-repeat;
	height:36px;
}
.HP li.preferes a:hover {
	background:url(../i/HP/themes/10-pref-on.png) no-repeat;
}
.HP li.preferes {
	background:url(../i/HP/themes/10-pref-on.png) no-repeat -9999px -9999px;
}


/*-------------------------------------------------------------------------------- page thème --------------------------------------------------------------------------------*/

#page {
	background:url(../i/HP/img-002.jpg);
	transition:all 1s;
}

.absences #page {
	color:#a274c6;
	background: url(../i/poeme/bg/1-absences.jpg);
}
.hommages #page {
	color:#e21818;
	background:url(../i/poeme/bg/2-hommages.jpg);
}
.temps #page {
	color:#89e918;
	background:url(../i/poeme/bg/3-temps.jpg);
}
.mots #page {
	color:#09d0e7;
	background:url(../i/poeme/bg/4-mots.jpg);
}
.vie #page {
	color:#6606bf;
	background:url(../i/poeme/bg/5-vie.jpg);
}
.planete #page {
	color:#6faa29;
	background:url(../i/poeme/bg/6-planete.jpg);
}
.solidarites #page {
	color:#ffae00;
	background:url(../i/poeme/bg/7-solidarites.jpg);
}
.amour #page {
	color:#dd1eb7;
	background:url(../i/poeme/bg/8-amour.jpg);
}
.paname #page {
	color:#1e6caf;
	background:url(../i/poeme/bg/9-paname.jpg);
}

.theme h1 {
	left:175px;
	top:131px;
	width:176px;
	height:128px;
	background:url(../i/poeme/Paris-Poesie.png) no-repeat;
}

.theme ul.liste-themes {
	position:absolute;
	left:0px;
	top:0px;
	width:1024px;
	text-indent:0;
}

.theme .liste-themes li {
	display:inline-block;
	text-indent:-9999px;
	float:left;
}

.theme li.absences a {
	background:url(../i/poeme/themes/1-absences-off.png) no-repeat;
	width:120px;
	height:220px;
}
.theme li.absences a:hover, .absences li.absences a {
	background:url(../i/poeme/themes/1-absences-on.png) no-repeat;
}
.theme li.absences {
	background:url(../i/poeme/themes/1-absences-on.png) no-repeat -9999px -9999px;
}
.theme li.hommages a {
	background:url(../i/poeme/themes/2-hommages-off.png) no-repeat;
	width:95px;
	height:120px;
}
.theme li.hommages a:hover, .hommages li.hommages a {
	background:url(../i/poeme/themes/2-hommages-on.png) no-repeat;
}
.theme li.hommages {
	background:url(../i/poeme/themes/2-hommages-on.png) no-repeat -9999px -9999px;
}
.theme li.temps a {
	background:url(../i/poeme/themes/3-temps-off.png) no-repeat;
	width:74px;
	height:115px;
}
.theme li.temps a:hover, .temps li.temps a {
	background:url(../i/poeme/themes/3-temps-on.png) no-repeat;
}
.theme li.temps {
	background:url(../i/poeme/themes/3-temps-on.png) no-repeat -9999px -9999px;
}
.theme li.mots a {
	background:url(../i/poeme/themes/4-mots-off.png) no-repeat;
	width:85px;
	height:110px;
}
.theme li.mots a:hover, .mots li.mots a {
	background:url(../i/poeme/themes/4-mots-on.png) no-repeat;
}
.theme li.mots {
	background:url(../i/poeme/themes/4-mots-on.png) no-repeat -9999px -9999px;
}
.theme li.vie a {
	background:url(../i/poeme/themes/5-vie-off.png) no-repeat;
	width:119px;
	height:105px;
}
.theme li.vie a:hover, .vie li.vie a {
	background:url(../i/poeme/themes/5-vie-on.png) no-repeat;
}
.theme li.vie {
	background:url(../i/poeme/themes/5-vie-on.png) no-repeat -9999px -9999px;
}
.theme li.planete a {
	background:url(../i/poeme/themes/6-planete-off.png) no-repeat;
	width:122px;
	height:100px;
}
.theme li.planete a:hover, .planete li.planete a {
	background:url(../i/poeme/themes/6-planete-on.png) no-repeat;
}
.theme li.planete {
	background:url(../i/poeme/themes/6-planete-on.png) no-repeat -9999px -9999px;
}
.theme li.solidarites a {
	background:url(../i/poeme/themes/7-solidarites-off.png) no-repeat;
	width:86px;
	height:95px;
}
.theme li.solidarites a:hover, .solidarites li.solidarites a {
	background:url(../i/poeme/themes/7-solidarites-on.png) no-repeat;
}
.theme li.solidarites {
	background:url(../i/poeme/themes/7-solidarites-on.png) no-repeat -9999px -9999px;
}
.theme li.amour a {
	background:url(../i/poeme/themes/8-amour-off.png) no-repeat;
	width:79px;
	height:90px;
}
.theme li.amour a:hover, .amour li.amour a {
	background:url(../i/poeme/themes/8-amour-on.png) no-repeat;
}
.theme li.amour {
	background:url(../i/poeme/themes/8-amour-on.png) no-repeat -9999px -9999px;
}
.theme li.paname a {
	background:url(../i/poeme/themes/9-paname-off.png) no-repeat;
	width:80px;
	height:85px;
}
.theme li.paname a:hover, .paname li.paname a {
	background:url(../i/poeme/themes/9-paname-on.png) no-repeat;
}
.theme li.paname {
	background:url(../i/poeme/themes/9-paname-on.png) no-repeat -9999px -9999px;
}

.theme h2 {
	position:absolute;
	left:150px;
	top:260px;
	margin:0;
	padding: 20px 0 0 10px;
	display: block;
	width: 350px;
	height: 100px;
	/*
	overflow: hidden;
	line-height:48px;*/
	font-family:ParisPoesie, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 	font-size:48px;
	font-weight: normal;
}
.absences h2 {
	background:url(../i/poeme/themes/1-absences-titre.png) no-repeat;
	text-indent:-9999px;
	overflow: hidden;
}
.hommages h2 {
	background:url(../i/poeme/themes/2-hommages-titre.png) no-repeat;
	text-indent:-9999px;
	overflow: hidden;
}
.temps h2 {
	background:url(../i/poeme/themes/3-temps-titre.png) no-repeat;
	text-indent:-9999px;
	overflow: hidden;
}
.mots h2 {
	background:url(../i/poeme/themes/4-mots-titre.png) no-repeat;
	text-indent:-9999px;
	overflow: hidden;
}
.vie h2 {
	background:url(../i/poeme/themes/5-vie-titre.png) no-repeat;
	text-indent:-9999px;
	overflow: hidden;
}
.planete h2 {
	background:url(../i/poeme/themes/6-planete-titre.png) no-repeat;
	text-indent:-9999px;
	overflow: hidden;
}
.solidarites h2 {
	background:url(../i/poeme/themes/7-solidarites-titre.png) no-repeat;
	text-indent:-9999px;
	overflow: hidden;
}
.amour h2 {
	background:url(../i/poeme/themes/8-amour-titre.png) no-repeat;
	text-indent:-9999px;
	overflow: hidden;
}
.paname h2 {
	background:url(../i/poeme/themes/9-paname-titre.png) no-repeat;
	text-indent:-9999px;
	overflow: hidden;
}
.vote h2, .credits h2, .participer h2 {
	transform: rotate(-3.5deg);
	transform-origin:0;
}

ul.liste-poemes {
	position:absolute;
	left:150px;
	top:360px;
	display:block;
	width:360px;
	height:300px;
	margin: 0;
	overflow:auto;
	font-family:ParisPoesie, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:12px;
	transform: rotate(-3.5deg);
	transform-origin:0;
	line-height:19px;
}
ul.liste-poemes a, ul.liste-poemes li {
	padding: 0 20px 0 70px;
	text-decoration:none;
	color:#666;
	transition:background-image .5s;
	cursor:pointer;
	background-position:-70px top;
}

li sub {
	text-indent:9999px;
	color:#fff;
}
 
.absences ul.liste-poemes li:hover, .absences li.select {
	color:#a274c6;
	background:url(../i/nav/1.png) no-repeat;
}
.hommages ul.liste-poemes li:hover, .hommages li.select {
	color:#e21818;
	background:url(../i/nav/2.png) no-repeat;
}
.temps ul.liste-poemes li:hover, .temps li.select {
	color:#89e918;
	background:url(../i/nav/3.png) no-repeat;
}
.mots ul.liste-poemes li:hover, .mots li.select {
	color:#09d0e7;
	background:url(../i/nav/4.png) no-repeat;
}
.vie ul.liste-poemes li:hover, .vie li.select {
	color:#6606bf;
	background:url(../i/nav/5.png) no-repeat;
}
.planete ul.liste-poemes li:hover, .planete li.select {
	color:#6faa29;
	background:url(../i/nav/6.png) no-repeat;
}
.solidarites ul.liste-poemes li:hover, .solidarites li.select {
	color:#ffae00;
	background:url(../i/nav/7.png) no-repeat;
}
.amour ul.liste-poemes li:hover, .amour li.select {
	color:#dd1eb7;
	background:url(../i/nav/8.png) no-repeat;
}
.paname ul.liste-poemes li:hover, .paname li.select {
	color:#1e6caf;
	background:url(../i/nav/9.png) no-repeat;
}

.texte {
	position: absolute;
	left: 535px;
	top: 130px;
	display: block;
	width: 320px;
	height: 510px;
	background: url(../i/poeme/bg/bg-poeme.png) no-repeat;/*
	overflow: auto;*/
	padding: 40px 0px 30px 40px;
	color:#000;
	font-family:ParisPoesie, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:12px;
}

.contenu-texte {
	height: 470px;
	overflow: auto;
	width: 270px;
	padding:0 20px 0 0;/*
	top: 25px;
	left: 40px;*/
}

.poeme {
	position: absolute;
	left: 535px;
	top: 130px;
	display: block;
	width: 290px;
	height: 510px;
	background: url(../i/poeme/bg/bg-poeme.png) no-repeat;/*
	overflow: auto;*/
	padding: 40px;
	font-size:16px;
	color:#000;
}

.credits .poeme, .participer .poeme, .vote .poeme {
	display:none;
}

.theme h3 {
	margin:0;
	padding:0;
	font-family: titre-poesie,"Abadi mt Condensed Extra Bold", "Arial Black", sans-serif;
	font-size:22px;
	font-weight:normal;
	position: absolute;
	bottom: 520px;
	left: 40px;
	display: inline-block;
	width: 270px;
	line-height: 22px;
}

.auteur {
	margin:0 0 20px;
	padding:0;
	font-family:auteur, Georgia, "Times New Roman", Times, serif;
	color:#666;
	font-weight:lighter;
	position: absolute;
	top: 450px;
	left: 40px;
	display: inline-block;
	width: 270px;
}

.poesie {
	height: 355px;
	overflow: auto;
	width: 240px;
	font-family: poeme, "Abadi mt Condensed Light", Helvetica, Arial, sans-serif;
	position: absolute;
	top: 85px;
	left: 40px;
	padding:0 50px 0 0;
}

.poesie p {
	margin:0 0 10px;
}

.theme a.facebook {
	position:absolute;
	left: -5px;
	top: 30px;
	display:block;
	background:url(../i/poeme/F2.png) no-repeat;
	width:39px;
	height:47px;
	text-indent:-9999px;
	transition:all .5s;
}
.theme a.facebook:hover {
	transform:rotate(10deg);
}

ul.voter {
	position:absolute;
	left: 10px;
	bottom: 25px;
}

.voter li {
	display:inline-block;
	text-indent: -9999px;
	float:left;
}

li.selection a {
	background:url(../i/poeme/vote/select.png) no-repeat;
	width:160px;
	height:90px;
}
li.selection a:hover {
	background:url(../i/poeme/vote/select-off.png) no-repeat;
}
li.selection {
	background:url(../i/poeme/vote/select-on.png) no-repeat -9999px -9999px;
}
li.je_vote a {
	background:url(../i/poeme/vote/vote-off.png) no-repeat;
	width:140px;
	height:90px;
}
li.je_vote a:hover {
	background:url(../i/poeme/vote/vote-on.png) no-repeat;
}
li.je_vote {
	background:url(../i/poeme/vote/vote-on.png) no-repeat -9999px -9999px;
}

/********************* formulaire de vote **********************/



form {
	margin:0;
	padding:0;
}
form div {
	}
form div.row {
	clear:both;
	width:90%;
	padding:0 0 10px 0;
	}

form ol {
	padding:30px 0;
	list-style:none;
	margin:0;
	}
form li {
	font-family: titre-poesie,"Abadi mt Condensed Extra Bold", "Arial Black", sans-serif;
	font-size:22px;
	color:#1e6caf;
	color:#ffae00;
	transition:all .5s;
}
form li.sortable {
	cursor: move;
	padding-left:30px;
}
form li.first {
	color:#ffae00;
	color:#e21818;}
	list-style-type: decimal;
}
form li.sortable.first:hover {
	color:#e21818;
	color:#ffae00;
	color:#1e6caf;
}
form li.sortable:hover {
	color:#e21818;
	color:#ffae00;
	color:#1e6caf;
	background:url(../i/poeme/vote/ordre.png) no-repeat;
}

fieldset {
	margin:0;
	padding:0;
	border:0;
}

fieldset legend {
	padding:0px;
	font-weight:bold;
	text-transform:uppercase;
	padding: 0 0 10px 0;
}

form label {
	display:block;
	}
form input {}
form input.checkbox {}

form input.submit {
	float:none;
	text-align: center;
	font-family: ParisPoesie, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 24px;
	cursor: pointer;
	border: 0;
	color:#1e6caf;
}
form input.missing {  background: #FFF no-repeat right center; }

.message {
	position: absolute;
	left: -340px;
	top: 370px;
	width: 280px;
	color:#000;
	border:0;
	transform: rotate(-3.5deg);
	transform-origin:0;
}