/* couleurs 
mauve : #7E3C8B
vert : #A7C218
*/

/* Styles Basique
================================================== */
/*body {	background: linear-gradient(#EEEEEE 30%,#FFFFFF 100%); }*/
body { background: #f0f0f1 url(/images/snow.jpg) repeat-x left top; } /* noel */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; font-family:Open Sans; 
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
body {	line-height:1; }
ol, ul {list-style:none; }
blockquote, q {		quotes:none; }
blockquote:before, blockquote:after,	q:before, q:after {	content:''; content:none; }
table {		border-collapse:collapse; border-spacing:0; }

ul.puce { margin:0 0 0 15px; }
ul.puce LI { font-size:15px; color:#555; }
ul.puce LI::before { content:'\25CF'; color: #9cb41c; font-size:20px; padding-right:5px;}
ul.puce LI A { border-bottom:1px dashed #7E3C8B; }


/* #Typo
================================================== */
h1, h2, h3, h4, h5, h6 { color:#181818; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight:inherit; }
h1 { font-size:46px; margin-bottom:14px; font-family: 'Dancing Script', cursive; }
h2 { font-size:35px; margin-bottom:10px; }
h3 { font-size:28px; margin-bottom:8px; }
h4 { font-size:21px; margin-bottom:4px; }
h5 { font-size:18px; }
h6 { font-size:14px; }
.subheader { color:#777; }

.s10 { font-size:10px; }
.s11 { font-size:11px; }
.s12 { font-size:12px; }
.s13 { font-size:13px; }
.s14 { font-size:14px; }
.s15 { font-size:15px; }
.s20 { font-size:20px; }
.s24 { font-size:24px; }
.s25 { font-size:25px; }
.s30 { font-size:30px; }
.mauve { color:#944EA3; }
.vert { color:#92a820; }
.mL20 { margin:0 0 0 20px; }

.degradeVert { font-family: 'Dancing Script', cursive; color:#FFF; font-size:25px; letter-spacing:1px; padding:5px 0; background: linear-gradient(#ADC915,  #90A621); text-shadow:0 1px rgba(117, 136, 23, .75); position:relative; } 
.titreVert { font-family:'Dancing Script', cursive; color:#A7C218; font-size:35px; letter-spacing:1px; } 
.titreVertSouligne { color:#A7C218; font-size:35px; letter-spacing:1px; padding:15px 0 20px 10px; border-bottom:2px solid #CCC; margin:0 0 15px 0; } 
.titreVertSouligne .icoLettre { float:left; margin:-5px 10px 0 0; display:inline;  }
.titreVertSouligne.bgLettrine { background-position:-150px -560px;  }
.titreMauveSouligne { color:#7E3C8B; font-size:20px; padding:0 0 10px 10px; border-bottom:1px solid #CCC; margin:15px 0 15px 0; font-family:'Open Sans'; } 
.titreGrisSouligne { color:#666; font-size:20px; padding:0 0 10px 10px; border-bottom:1px solid #CCC; margin:15px 0 15px 0; font-family:'Open Sans'; line-height:24px;}
.titreOrange { color:#FF6600; font-size:20px; line-height:22px; padding:0 0 10px 10px; border-bottom:1px solid #CCC; margin:15px 0 15px 0; font-family:'Open Sans'; }
.titreResult { color:#A7C218; font-size:20px; font-family:'Open Sans'; letter-spacing:1px; padding:0 0 8px 10px; border-bottom:1px solid #CCC; margin:25px 0 10px 0; } 
p { margin:0 5px 15px 5px; line-height:22px; color:#333; }
p img { margin:0; }
.paragraphe12 { font-size:12px; }
.paragraphe14 { font-size:14px; }

em { font-style:italic; }
strong { font-weight:bold; color:#555; }
small { font-size:80%; }
bold {font-weight: bold;}

/*	Blockquotes  */
blockquote, blockquote p { font-size:17px; line-height:24px; color:#777; font-style:italic; }
blockquote { margin:0 0 20px; padding:9px 20px 0 19px; border-left:1px solid #ddd; }
blockquote cite { display:block; font-size:12px; color:#555; }
blockquote cite:before { content:"\2014 \0020"; }
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color:#555; }

hr { border:solid #ddd; border-width:1px 0 0; clear:both; margin:10px 0 30px; height:0; }

/*********** HOME PAGE ***********/

 /* texte intro */
.container .introHP { width:900px; margin:0 auto 35px auto; padding:15px; overflow:hidden; box-shadow: 0px 10px 25px -10px #AECA15; position:relative; border-radius:5px; border:1px solid #EBEBEB; }
.container .introHP p { line-height:20px; font-size:14px; line-height:20px; color:#555; margin:10px 10px 0 10px; }
.container .introHP .illust1, .illust2, .illust3, .illust4 {width:200px; height:200px; display:block; float:left; margin:0 10px 0 0; border-radius:200px; border:0px solid #dde99b;}
.introHP .illust1 { background:url("http://www.lettres-utiles.com/images/home/user1.jpg") no-repeat; }
.introHP .illust2 { background:url("http://www.lettres-utiles.com/images/home/user2.jpg") no-repeat; }
.introHP .illust3 { background:url("http://www.lettres-utiles.com/images/home/user3.jpg") no-repeat; }
.introHP .illust4 { background:url("http://www.lettres-utiles.com/images/home/user4.jpg") no-repeat; }
.container .introHP .noel { width:200px; height:200px; display:block; background:url("http://www.lettres-utiles.com/images/home/user_noel.jpg") no-repeat; float:left; margin:0 10px 0 0; border-radius:200px; border:1px solid #dde99b;}
.introHP h1 { border-bottom:1px solid #DDD; padding-bottom:10px; overflow:hidden;}

/* bloc lettres */
.blocLettresHP { background:#FFF; margin:0 auto 30px auto; position:relative; width:900px;}
.blocLettresHP SPAN.coin { width:15px; height:41px; display:block; background:url("http://www.lettres-utiles.com/images/spritePNG.png") no-repeat 0 -412px; position:absolute; right:0; top:0; }
.blocLettresHP SPAN.icoDerniere, .blocLettresHP SPAN.icoLettrePlus { position:absolute; left:0; top:-5px; }
.blocLettresHP .degradeVert { padding-left:55px; }
.blocLettresHP A { width:410px; display:block; float:left; margin:5px 10px 10px 15px; padding:0 0 0 15px; font-size:15px; background: url("http://www.lettres-utiles.com/images/spritePNG.png") no-repeat 0 -340px; }
.blocLettresHP A .titreCat { display:block; font-size:12px; font-style:italic; color:#888; margin:5px 0 0 10px; }
.blocLettresHP A:HOVER .titreCat { text-decoration:none; }
.blocLettresHP .colSep { position:absolute; left:425px; top:45px; }
.container .blocLettres .five.columns { width:45%; margin:0 0 0 20px;}
.container .blocLettres .four.columns {  }
.contenuShadow { background:#FFF; border-radius:5px; box-shadow: 0px 5px 5px 0px #DCDCDD; padding: 10px 0 10px 0;}

/* bloc Mode d'emploi */
.blocHow { border-radius:5px; margin:0 40px 25px 100px; padding:10px; overflow:hidden; position:relative; width:510px; float:left;  background:#EDE9E1; }
.blocHow H2 { font-family:'Dancing Script', cursive; font-size:25px; color:#95AC1F; font-weight:normal; margin: 10px 0 15px 0; text-align:center; }
.blocHow p { line-height:22px; font-size:14px; color:#444; padding:0; margin: 5px 0 5px 5px; }

/* autres blocs d'infos */
.blocHP { border-radius:5px; margin:0 20px 25px 100px; padding:10px; overflow:hidden; position:relative; width:420px; float:left; 
background: linear-gradient(#EDE9E1, #FFFFFF); box-shadow: 0px 5px 5px 0px #DCDCDD; }
.blocHP H2 { font-family:'Dancing Script', cursive; font-size:25px; letter-spacing:1px; color:#666; font-weight:normal; margin: 10px 0 15px 60px; }
.blocHP .ampoule { left:12px; top:7px; position:absolute; }
.blocHP .icoContexte { left:15px; top:15px; position:absolute; }
.blocHP p { padding:0 10px 0 55px; line-height:22px; font-size:14px; color:#444; }
.blocHP A { padding:5px 0 0 55px; line-height:22px; font-size:14px; display:block; }
.blocHP.ml0 { margin-left:0;}

/* outils de partage */
.outilsHP { overflow:hidden; margin:10px auto;  text-align:center; }
.outilsHP .button { margin:0 0 0 130px; }
.outilsHP .button + .button { margin:0 0 0 20px; }

/* Liens
================================================== */
a { color:#7E3C8B; outline:0; text-decoration:none; }
a:hover, a:focus { color:#7E3C8B; text-decoration:underline; }
p a {border-bottom:1px dotted #7E3C8B;}
p a, p a:visited { line-height:inherit; }
.noborder { border:0; }

.listeLiens { border-bottom:1px solid #CCC; padding:20px 10px 10px 10px; display:block; font-size:16px; font-weight:normal; margin:0; overflow:hidden; }
.listeLiens .icoLettre { float:left; margin:-10px 10px 0 0; }
p.listeLiens, .listeLiens p { line-height:20px; font-size:13px; font-weight:normal; line-height:20px; color:#555; margin:5px 0 0 40px; padding:0; }

.outils { margin:30px 0 20px 0; position:relative; overflow:hidden; height:50px; }
.outils A { width:250px; height:35px; font-size:20px; text-align:center; display:block; float:left; margin:0 20px 0 60px; background:#7A3888; color:#FFF; padding:12px 0 0 0; border-radius:5px; font-weight:normal;}
.outils a.edit {background:url("http://www.lettres-utiles.com/images/icones/edit.png") no-repeat 20px center #7A3888; }
.outils a.print {background:url("http://www.lettres-utiles.com/images/icones/print.png") no-repeat 30px center #7A3888; }
/*
.outils a.edit .icoPersonnaliser { width:18px; height:38px; margin:-12px 0 0 5px; display:block; float:left; background:url("http://www.lettres-utiles.com/images/spritePNG.png") no-repeat 0 -240px; }
.outils a.send { width:32px; height:32px; display:inline; background:url("http://www.lettres-utiles.com/images/icones/envoyer.png") no-repeat left center; position:absolute; right:20px; }
*/

.three-thirds .outils a.send { left:252px; } /*pour modele col gauche*/
.three-thirds .outils a.print { left:470px; } /*pour modele col gauche*/

/* #Listes
================================================== */
ul, ol { margin-bottom:20px; }
ul { list-style:none outside; }
ol { list-style:decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left:30px; }
ul.square { list-style:square outside; }ul.circle { list-style:circle outside; }
ul.disc { list-style:disc outside; }
ul ul, ul ol, ol ol, ol ul { margin:4px 0 5px 30px; font-size:90%; }
ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom:6px; } 
li { line-height:18px; margin-bottom:12px; }
ul.large li { line-height:21px; }
li p { line-height:21px; }

/* #Images
================================================== */
img.scale-with-grid {	max-width:100%; height:auto; }

span.ampoule { width:44px; height:50px; display:block; background:url(http://www.lettres-utiles.com/images/spritePNG.png) no-repeat 0 -171px; }
span.icoContexte { width:44px; height:50px; display:block; background:url(http://www.lettres-utiles.com/images/spritePNG.png) no-repeat -86px -293px; }
span.colSep { width:17px; height:68%; display:block; background:url(http://www.lettres-utiles.com/images/spritePNG.png) no-repeat -164px 0; }
span.icoNuage { width:41px; height:25px; display:block; background:url(http://www.lettres-utiles.com/images/spritePNG.png) no-repeat 0 -127px; }
span.icoTop5 { width:21px; height:23px; display:block; background:url(http://www.lettres-utiles.com/images/spritePNG.png) no-repeat -116px -245px; }
span.icoDerniere { width:47px; height:40px; display:block; background:url(http://www.lettres-utiles.com/images/spritePNG.png) no-repeat -87px -58px; }
span.icoLettrePlus { width:47px; height:40px; display:block; background:url(http://www.lettres-utiles.com/images/spritePNG.png) no-repeat -87px -12px; }
span.icoLettre { width:33px; height:40px; display:block; background:url(http://www.lettres-utiles.com/images/spritePNG.png) no-repeat -87px -114px; }
span.icoLettreCat { width:21px; height:23px; display:block; background:url(http://www.lettres-utiles.com/images/spritePNG.png) no-repeat -87px -246px; }
span.icoEpingle { width:38px; height:40px; display:block; background:url(http://www.lettres-utiles.com/images/spritePNG.png) no-repeat -218px -157px; }
span.icoTrombone { width:33px; height:57px; display:block; background:url(http://www.lettres-utiles.com/images/spritePNG.png) no-repeat -215px -78px; }


/* #Boutons
================================================== */

.button, button, input[type="submit"], input[type="reset"], input[type="button"] {	background:#eee; /* Old browsers */	background:#eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */	background:#eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */	background:#eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */background:#eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */	background:#eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */	background:#eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */ 
border:1px solid #aaa; border-top:1px solid #ccc; border-left:1px solid #ccc; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; color:#444; display:inline-block; 
font-size:15px; font-weight:bold; text-decoration:none; text-shadow:0 1px rgba(255, 255, 255, .75); cursor:pointer; margin-bottom:20px; line-height:normal; padding:8px 10px; position:relative; }

.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { color:#222; background:#ddd; /* Old browsers */	background:#ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */	background:#ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */		background:#ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */		background:#ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */		background:#ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */		background:#ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */	  border:1px solid #888; border-top:1px solid #aaa; border-left:1px solid #aaa; }

.button:active, button:active, input[type="submit"]:active,	input[type="reset"]:active,	input[type="button"]:active {	border:1px solid #666; background:#ccc; /* Old browsers */	background:#ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */	background:#ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */	background:#ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */	background:#ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */	background:#ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */	background:#ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }

.button.full-width, button.full-width,	input[type="submit"].full-width,	input[type="reset"].full-width,	input[type="button"].full-width {	width:100%; padding-left:0 !important; padding-right:0 !important; text-align:center; }

/* Fix for odd Mozilla border & padding issues */
	button::-moz-focus-inner,	input::-moz-focus-inner { border:0; padding:0; }

.button.small-width { width:140px; padding:10px 0 12px 40px; margin:0 0 0 10px; font-size:11px; border-radius:5px; }

.button .partager { width:33px; height:38px; display:block; position:absolute; background:url(http://www.lettres-utiles.com/images/spritePNG.png) no-repeat 0 -240px #A264AF; left:195px; top:-3px; z-index:20; position:absolute;left:0; top:0; }
.button .recommander { width:34px; height:38px; display:block; position:absolute; background:url(http://www.lettres-utiles.com/images/spritePNG.png) no-repeat 0 -291px #A264AF; left:195px; top:-3px; z-index:20; position:absolute; left:0; top:0; }
.button .resilier { width:34px; height:38px; display:block; position:absolute; background:url(http://www.lettres-utiles.com/images/spritePNG.png) no-repeat -38px -7px #A264AF; left:195px; top:-3px; z-index:20; position:absolute; left:0; top:0; }

/* #FORM
================================================== */

form {	margin-bottom:20px; }

#formulaire { background:#eee; /* Old browsers */	background:#eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */	background:#FFF -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */	background:#FFF -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */background:#FFF -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */	background:#eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */	background:#eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */ border:1px solid #aaa; border-top:1px solid #ccc; border-left:1px solid #ccc; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; padding:20px 10px 20px 20px; }

#formulaire input, #formulaire textarea { width:80%; max-width: 100%; }
#formulaire textarea { width:90%; min-height:120px; }
#formulaire select { width:60%; max-width:100%; padding:5px; }
#formulaire select OPTION { padding:3px; }
#formulaire input[type="submit"] { width:auto; clear:both; display:block; margin:10px auto 0 auto; text-align:center; }
#formulaire TABLE { background:#FFF; margin:0 0 10px 0; }

fieldset {	margin-bottom:20px; }
input[type="text"],	input[type="password"],	input[type="email"], textarea,	select {	border:1px solid #ccc; padding:6px 4px; outline:none; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; font:13px Arial, sans-serif; color:#777; margin:0; width:210px; max-width:100%; display:block; margin-bottom:20px;background:#fff; }

select {	padding:0; }

input[type="text"]:focus,	input[type="password"]:focus,	input[type="email"]:focus,	textarea:focus {	border:1px solid #aaa; color:#444; -moz-box-shadow:0 0 3px rgba(0,0,0,.2); -webkit-box-shadow:0 0 3px rgba(0,0,0,.2); box-shadow: 0 0 3px rgba(0,0,0,.2); }

textarea {	min-height:60px; }
label,	legend {		display:block; font-weight:bold; font-size:14px; margin:0 0 10px 0; color:#555; }
select {	width:220px; }
input[type="checkbox"] {	display:inline; }
label span, legend span {	font-weight:normal; font-size:13px; color:#444; }
#centre input.antispam, #centre input.codebox { width:110px; font-size:20px; }

.textAreaOutils { width:90%; }

/* formulaire pour editer la lettre */
textarea.edit {width:650px; height:500px; font: 16px Times New Roman, Times, serif;}
textarea.edit2 {width:260px; font: 16px Times New Roman, Times, serif;}
textarea.edit3 {width:330px; font: 16px Times New Roman, Times, serif; margin-left:300px;}
textarea.edit:focus, textarea.edit2:focus, textarea.edit3:focus {border:1px solid #A7C218;}
H3.edit {font-size: 20px; color: #555; margin: 0 0 20px 0;}

/*champ de recherche sur une page */
.search {background:#EEE; overflow:hidden; text-align:center; padding:20px;margin:10px; height:100px;}
.search input[type="text"] {width:500px; height:30px; border:1px solid #aaa; box-shadow: 0 0 3px rgba(0,0,0,.2); color:#444; font-size:16px; margin:0 auto 10px auto; }
.search input[type="submit"] { color:#444; box-shadow: 0 0 3px rgba(0,0,0,.2); padding:12px; font-size:14px; }

/* #MISC
================================================== */
.remove-bottom { margin-bottom:0 !important; }
.half-bottom { margin-bottom:10px !important; }
.add-bottom { margin-bottom:20px !important; }
.alerte { border-radius:5px; margin:20px 10px 20px 10px; padding:10px; position:relative; background:#EEE; font-size:12px; color:#555; line-height:20px; }
.bgColorEDE9E1 { background:#EDE9E1; }
.bgLettrine { background:url("http://www.lettres-utiles.com/images/spritePNG.png") no-repeat -150px -445px #FFF; }

/*********** HEADER ***********/
.header { height:195px; border-bottom:5px solid #E6E6E6; background:url("http://www.lettres-utiles.com/images/bck_header.jpg") repeat center 0 #E6E6E6; } 
.header .contentHeader { width:1100px; margin:0 auto; position:relative; }
.header .contentHeader .logo { width:300px; height:64px; display:block; position:absolute; left:0px; top:10px; background:url("http://www.lettres-utiles.com/images/logo.png") no-repeat center; cursor:pointer; } 
.header .contentHeader .slogan { display:block; position:absolute; left:60px; top:65px; font-family:'Open Sans'; font-style:normal; font-size:17px; color:#888; text-shadow:2px 2px rgba(255, 255, 255, .75); letter-spacing:0,5px;  } 

.header .contentHeader .autresLiens { position:absolute; top:12px; right:-10px; }
.header .contentHeader .autresLiens A { font-size:13px; border-right:1px solid #999; padding:0 9px 0 5px; font-weight:bold; }
.header .contentHeader .autresLiens A:last-child { border:0; }

.header .contentHeader .nav { width:1000px; position:absolute; top:110px; margin-left:50px; }
.header .contentHeader .nav LI { min-width:72px; border-radius:3px; font-size:13px; margin:0 0 0 10px; padding:7px; float:left; text-align:center; background:linear-gradient(#A062AD, #7A3888); }
.header .contentHeader .nav LI + LI { margin:0 0 10px 20px; text-align:center;}
.header .contentHeader .nav A.entree { display:none; }
.header .contentHeader .nav LI:HOVER, .header .contentHeader .nav LI#lacat { background:linear-gradient(#A7C118, #889C25); }
.header .contentHeader .nav LI A { color:#FFF; text-decoration:none; font-weigth:bold; }
.header .contentHeader .nav LI.lienmobile { display:none;}

.header .contentHeader .rechercher { width:470px; height:50px; position:absolute; top:45px; right:0; }
.header .contentHeader .rechercher input[type="text"] {	width:350px; border:1px solid #aaa; border-width:1px 0 1px 1px; color:#444; box-shadow: 0 0 3px rgba(0,0,0,.2); padding:12px; float:left; font-size:14px; position:relative; padding-left:40px; }
.header .contentHeader .rechercher input[type="submit"] {	width:55px; color:#444; box-shadow: 0 0 3px rgba(0,0,0,.2); padding:12px; float:left; text-transform:uppercase; font-size:14px; }
.header .contentHeader .rechercher span.loupe { width:29px; height:40px; display:block; position:absolute; background:url("http://www.lettres-utiles.com/images/spritePNG.png") no-repeat 0 0; left:10px; top:-3px; z-index:20; }
.header .contentHeader .rechercher input[type="submit"].OK { color:#FFF; background:#888; }

.header .responsive_icon, .nav .iconX { display:none; }

/* Habillage Noel */
.header .contentHeader .decoNoel1 { width:216px; height:263px; display:block; background:url(/images/decoNoel1.png) no-repeat left top;  position:absolute; top:0; left:-180px; z-index:203; }
.header .contentHeader .decoNoel2 { width:252px; height:57px; display:block; background:url(/images/decoNoel2.png) no-repeat left top; position:absolute; top:0; left:300px; }
.header .contentHeader .decoNoel3 { width:211px; height:220px; display:block; background:url(/images/decoNoel3.png) no-repeat left top; position:absolute; top:0; right:-172px; z-index:201; }
/* .header .contentHeader .decoNoel4 { width:1725px; height:389px; display:block; background:url(/images/decoNoel5.png) no-repeat left top; position:absolute; top:200px; left:-345px; z-index:200; }*/

/* header small */
#decalFixedHeader { height:195px; }
.small {position:fixed; z-index:300; box-shadow: 0 0 5px 0 #BBBBBB; width:100%; height:70px; background: #FFF; border-bottom:none; top:-70px; transition:transform 0.6s; transform:translateY(100%);}
.small .contentHeader .nav, .small .contentHeader .autresLiens, .small .contentHeader .slogan, .small .contentHeader .decoNoel1, .small .contentHeader .decoNoel3, .small .contentHeader .decoNoel4 { display:none; }
.small .contentHeader .logo {width:250px; height:53px; background:url("http://www.lettres-utiles.com/images/logo-small.png") no-repeat center; }
.small .contentHeader .rechercher {width:600px; top:10px; right:-20px;}
.small .contentHeader .rechercher input[type="submit"].OK { color:#FFF; background:#CCC; }
.small .contentHeader .rechercher input[type="submit"].OK:hover { color:#FFF; background:#555; }
.small .contentHeader .rechercher input[type="text"] {	width:400px; border:1px solid #CCC; color:#666; }
.small .contentHeader .decoNoel2 { left:269px; }

/********** MISE EN PAGE **********/
.container { width:1100px; position:relative; margin:0 auto; padding:20px 0 15px 0; background:#FFF; z-index:201; }
.container .column, .container .columns { float:left; display:inline; margin:0 30px 0 0; }
.row { margin-bottom:20px; }
/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left:0; }
.column.omega, .columns.omega { margin-right:0; }

/* Base Grid */
.container .one.column, .container .one.columns { width:40px; }
.container .two.columns { width:100px; }
.container .three.columns { width:160px; }
.container .four.columns { width:220px; margin-top:15px; }
.container .five.columns { width:280px; }
.container .six.columns { width:340px; }
.container .seven.columns { width:400px; }
.container .eight.columns { width:460px; }
.container .nine.columns { width:520px; }
.container .ten.columns { width:580px; }
.container .eleven.columns { width:640px; }
.container .twelve.columns { width:700px; }
.container .thirteen.columns { width:760px; }
.container .fourteen.columns { width:820px; }
.container .fifteen.columns { width:880px; }
.container .sixteen.columns { width:940px; }

.container .one-third.column { width:340px; margin:0; }
.container .two-thirds.column { width:710px; padding:5px; }
.container .three-thirds.column { width:750px; margin:0 0 0 5px; }
.container .central.column { width:1100px; }


/* Offsets */
.container .offset-by-one { padding-left:60px; }
.container .offset-by-two { padding-left:120px; }
.container .offset-by-three { padding-left:180px; }
.container .offset-by-four { padding-left:240px; }
.container .offset-by-five { padding-left:300px; }
.container .offset-by-six { padding-left:360px; }
.container .offset-by-seven { padding-left:420px; }
.container .offset-by-eight { padding-left:480px; }
.container .offset-by-nine { padding-left:540px; }
.container .offset-by-ten { padding-left:600px; }
.container .offset-by-eleven { padding-left:660px; }
.container .offset-by-twelve{ padding-left:720px; }
.container .offset-by-thirteen { padding-left:780px; }
.container .offset-by-fourteen { padding-left:840px; }
.container .offset-by-fifteen { padding-left:900px; }

/* categories */
.container .introCat { margin:0 0 35px 0; padding:15px; overflow:hidden; box-shadow: 0px 10px 25px -10px #AECA15; position:relative; border-radius:5px; border:1px solid #EBEBEB; }
.introCat h1 { border-bottom:1px solid #DDD; padding-bottom:10px; }
.container .introCat p { line-height:20px; font-size:14px; line-height:20px; color:#555; margin:10px 0 0 0; }
.introCat .vignetteCat { float:left; margin:0 10px 0 0; padding:3px; border:1px solid #A7C218; border-radius:3px; }
.introCat IMG { border-radius:3px; }

/* modele de lettre */
.corpsLettre { box-shadow:0px 10px 25px -10px #b1a797; font-size:15px; padding:30px; margin:20px 5px 5px 5px; border-top:1px solid #EEE; color:#444; line-height:18px; background:#FFF; }
.corpsLettre p { font-size:15px; font-family:Georgia, "Times New Roman", Times, serif; } 
.corpsLettre .nom { font-size:15px; font-style:italic; color:#555; font-family:Georgia, "Times New Roman", Times, serif; }
.corpsLettre .destinataire { font-size:15px; float:right; margin:10px 50px 20px 0; font-style:italic; color:#555; font-family:Georgia, "Times New Roman", Times, serif; }
.corpsLettre A { font-family:'Open Sans';  text-decoration:none; border-bottom:1px dotted #7E3C8B; font-size:15px;}
.corpsLettre i { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; }
.corpsLettre b { font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold; }
.corpsLettre u { font-family:Georgia, "Times New Roman", Times, serif; }
.corpsLettre SPAN {font-size: 15px; margin: 10px 50px 20px 0; padding: 0; font-style:italic; color: #666; display:block; float:right; font-family:Georgia, "Times New Roman", Times, serif;}
.corpsLettre H5 {font-size: 20px; margin: 10px 0 2px 0; padding: 0; color: #444;}
/* conseils */
.corpsLettre p.conseils { font-size:14px; line-height:24px; text-align:justify;  font-family:'Open Sans'; } 
.corpsLettre p.conseils i { font-style:italic; font-family:'Open Sans'; }
.corpsLettre p.conseils b { font-weight:bold; font-family:'Open Sans'; }
.corpsLettre H2 {  font-family: 'Dancing Script', cursive; font-size: 30px; margin: 5px 0 10px 0; padding: 0; color: #a7c218; display:block; }

/* bloc contexte et bon a savoir */
.blocInfos { border-radius:5px; margin:0 0 25px 0; padding:10px; overflow:hidden; position:relative; }
.blocInfosSmall { margin:20px; }
.blocInfos H2 { color:#944EA3; }
.blocInfos.contexte H2 { height:32px; background:url("http://www.lettres-utiles.com/images/icones/contexte.png") no-repeat; padding:5px 0 0 40px; }
.blocInfos.savoir H2 { height:32px; background:url("http://www.lettres-utiles.com/images/icones/savoir.png") no-repeat; padding:5px 0 0 40px; }

.blocInfos p { padding:5px; line-height:22px; font-size:14px; color:#444; }
.blocInfos A { border-bottom: 1px dotted #7e3c8b; }
.blocInfos H5 { color:#555; font-size:12px; text-align:left; line-height:20px; }
.contexte { width:325px; float:right; margin:0 0 0 15px; }
.blocInfos UL { font-size:14px; color:#444; }
.blocInfos UL LI { list-style: disc; margin-left:20px; line-height:20px; }


/* autres lettres */
.blocLettres { background:#FFF; margin:0 0 30px 0; position:relative;}
.blocLettres SPAN.coin { width:15px; height:41px; display:block; background:url("http://www.lettres-utiles.com/images/spritePNG.png") no-repeat 0 -412px; position:absolute; right:0; top:0; }
.blocLettres SPAN.icoDerniere, .blocLettres SPAN.icoLettrePlus { position:absolute; left:0; top:-5px; }
.blocLettres .degradeVert { padding-left:10px; }
.blocLettres A { width:315px; display:block; float:left; margin:5px 10px 10px 15px; padding:0 0 0 15px; font-size:14px; background: url("http://www.lettres-utiles.com/images/spritePNG.png") no-repeat 0 -340px; }
.blocLettres A.similaire {float:none; width:500px; margin:10px 10px 12px 35px;}

/* pub */
.carre300 { margin:15px auto 15px auto; position:relative; text-align:center; }
.one-third .carre300 { border:0; }
.one-third .carre300 .icoEpingle { display:none; } 
.pave { width:336px; margin:15px 0 15px 5px; position:relative; border:1px solid #A7C218; padding:1px; }
.pave .icoEpingle { display:block; position:absolute; left:170px; top:-25px; }
.skyscraper { margin:0 0 20px 0; text-align:center; }
.container .skyfall { position:absolute; left:-185px; top:290px; }
.superban { width:980px; padding:15px 0 15px 10px; margin:0 auto; text-align:left; background:#FFF; }
#centre .superban { background:none; } /* pr le modele col Gauche */
.banLiens { margin:15px 0 15px 0; text-align:left; }
.pubmobile { display:none; }
.pubHP { margin: 0 0 20px 0; }
.pub468 { text-align:center;  }
/*recommandation */
.reco {margin: 10px 0;}
.reco H3 {color:#777; font-size:25px; letter-spacing:1px; padding:0 0 8px 10px; border-bottom:1px solid #CCC; margin:0; font-family:'Dancing Script', cursive;}
.thumbnails-tm .videoCube a { color: #7E3C8B !important; font-weight: normal !important; }

/* tags */
.nuage { margin:0 0 15px 0; padding:0 0 10px 0; position:relative; }
.nuage SPAN.coin { width:15px; height:41px; display:block; background:url("http://www.lettres-utiles.com/images/spritePNG.png") no-repeat 0 -412px; position:absolute; right:0; top:0; }
.nuage span.icoNuage { position:absolute; left:12px; top:3px; }
.nuage SPAN.icoTop5, .nuage SPAN.icoDerniere { top:4px; left:10px; position:absolute; }
.nuage A { color:#777; margin:15px 0 0 10px; line-height:20px; }

.top5 .degradeVert { text-align:center; }
.top5 A { height:23px; color:#7E3C8B; margin:10px 0 0 10px; padding:0 0 5px 30px; border-bottom:1px solid #CCC; line-height:20px; display:block; font-size:14px; position:relative; overflow:hidden; background: url('http://www.lettres-utiles.com/images/spritePNG.png') no-repeat -87px -246px; }
.top5 A span { color:#444; display:block; }
.top5 A .icoLettreCat { display:inline; float:left; margin:0 10px 0 0; }
.four .top5 .degradeVert { font-size:16px; padding:5px 0 0 33px; } /*pour le modele col gauche */

.faceboxHP { background:#FFF; padding:5px 5px 0 5px; margin:15px 0 15px 0; text-align:center; }
/*.faceboxHP .fb_box { width:290px; height: 210px; border: 1px solid #CCC;}
.faceboxHP iframe { width:290px; height:210px; margin:0; background:#FFF; border:none; overflow:hidden; } */
.facebox { width:300px; margin:15px auto; text-align:center; } 

/* footer */
.footer { padding:20px 0 20px 0; margin:10px 0 0 0; background:url("http://www.lettres-utiles.com/images/spritePNG.png") repeat-x -150px -510px #EEE; border-top:1px solid #CCC; position:relative; }
.footer .contentFooter { width:960px; margin:0 auto; position:relative; overflow:visible; text-align:center; color:#666; }
.footer .contentFooter SPAN { margin:10px 0; font-size:13px; color:#666; display:block; }
.footer .contentFooter A { font-size:13px; padding:0 8px 0 5px; border-right:1px solid #888; }
.footer .contentFooter A + A + A + A + A { border-right:none; }
.footer .contentFooter .plus, .footer .contentFooter .group { margin:10px 0 0 0; }
.footer .contentFooter .plus A { border:0; padding:0; }
.footer .contentFooter .copyright { color:#666; margin-top:20px; }
.footer .contentFooter .copyright A, .footer .contentFooter .group A { padding:0; border:0; color:#666; }

/* Self Clearing Goodness */
.container:after { content:"\0020"; display:block; height:0; clear:both; visibility:hidden; }

.clearfix:before, .clearfix:after, .row:before, .row:after { width:0; height:0; content:'\0020'; display:block; overflow:hidden; visibility:hidden; }
.row:after, .clearfix:after { clear:both; }
.row, .clearfix { zoom:1; }
.sep { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; font-size:0; }
.sep20 { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin-bottom:20px; font-size:0; }
.fL { float:left; margin:0 20px 15px 0; position:relative; }

/* pagination */
.pagination { margin:30px 0 30px 0; text-align:center; color:#A264AF; font-size:14px; }
.pagination .pageactive, .pagination A { font-size:14px; padding:8px; border-radius:5px; }
.pagination .pageactive { background:#A264AF; color:#FFF; margin-left:10px; }
.pagination A { border:1px solid #CCC; color:#A264AF; margin:0 0 0 10px; }
.pagination A:HOVER { background:#A264AF; color:#FFF; }
.ariane { padding:15px 0 20px 10px; font-size:13px; color:#555; }
.ariane A { font-size:13px; }

/* annonce adblock */
#antiBlock { display: none; padding: 150px 0 20px 0; text-align: center; font-weight: normal; color: #666; height:25%; width:100%; position: fixed; bottom:0; z-index: 900; 
background:url("images/info.png") no-repeat top center #EEE; font-family:'Carrois Gothic'; font-size:20px; line-height:22px; border:1px solid #CCC;}

/* bandeau RGPD */
.qc-cmp-button { background-color: #069 !important; border-color: #069 !important; color: #FFF !important; }
.qc-cmp-button:hover { background-color: transparent !important; border-color: #069 !important; color:#069 !important;}
.qc-cmp-alt-action, .qc-cmp-link { color: #333 !important; }
.qc-cmp-secondary-button { border-color: #666 !important; background-color: transparent !important; color:#F00 !important; }
.qc-cmp-secondary-button:hover {  background-color: #333 !important;}
.qc-cmp-publisher-purposes-table .qc-cmp-table-header { background-color: #fafafa !important; }
.qc-cmp-publisher-purposes-table .qc-cmp-table-row { background-color: #FFF !important; }
.qc-cmp-small-toggle.qc-cmp-toggle-on, .qc-cmp-toggle.qc-cmp-toggle-on { background-color: #DDD !important; border-color: #DDD !important; }
.qc-cmp-ui, .qc-cmp-ui .qc-cmp-main-messaging, .qc-cmp-ui .qc-cmp-messaging, .qc-cmp-ui .qc-cmp-beta-messaging,  .qc-cmp-ui .qc-cmp-title,
.qc-cmp-ui .qc-cmp-sub-title, .qc-cmp-ui .qc-cmp-purpose-info, .qc-cmp-ui .qc-cmp-table, .qc-cmp-ui .qc-cmp-table-header, .qc-cmp-ui .qc-cmp-vendor-list,
.qc-cmp-ui .qc-cmp-vendor-list-title { color: #666 !important; }
.qc-cmp-ui a, .qc-cmp-ui .qc-cmp-alt-action { color: #368bd6 !important; }
.qc-cmp-ui { background-color: #EEE !important;  }
.qc-cmp-ui-content { padding: 60px !important; }
H1.qc-cmp-title {border-bottom: 1px solid #666 !important; font-size:30px !important; text-align:center;}


/********** STYLE MOBILE **********/
@media all and (max-width:640px) 
{ 
html {  width:auto; height:100%;}
body, p { word-wrap:break-word; font-size:100%; width:auto; }
img { width:auto; height:auto; max-width:100%; }
.container, .container .introHP,  .container .central.column, .header .contentHeader, .container .two-thirds.column, .cookieCNIL .content_cookieCNIL { width:auto; margin:0;  padding:0;}
.container .column, .container .columns { float: none; }
.container .one-third.column { display:none; }

/* header */
.header { height:160px;background:#E6E6E6; background-image:none;  } 
.header .contentHeader { width:auto;  }
.header .contentHeader .logo { width:250px; height:53px; background:url("http://www.lettres-utiles.com/images/logo-small.png") no-repeat center; top:0!important;} 
.header .contentHeader .slogan { font-size:11px; left:20px; } 
.header .contentHeader .autresLiens A, .small, .header .contentHeader .decoNoel1, .header .contentHeader .decoNoel2, .header .contentHeader .decoNoel3, .header .contentHeader .decoNoel4 { display:none; }

.header .contentHeader .rechercher { position:absolute; margin: 50px auto 10px auto; width:auto;  }
.header .contentHeader .rechercher input[type="text"] {width:auto; height:auto; float:left;}
.header .contentHeader .rechercher input[type="submit"] {	width:auto; height:auto; margin-right:20px; }

/* menu */
.header .responsive_icon { position:relative; display:block; float:right; width:45px; height:45px; background:#7E3C8B; cursor:pointer; margin:5px; border-radius:5px; }
.header .responsive_icon:after { content:''; position:absolute; display:block; width:1rem; height:0; top:10px; left:15px; box-shadow :0 8px 0 1px #FFF, 0 15px 0 1px #FFF, 0 22px 0 1px #FFF; }
.header .contentHeader .nav { margin:0; width:200px; height:0; z-index:1000; background:#888; overflow:hidden; }
.header .contentHeader .nav.on { height:auto; transition-property: height; transition-duration: 0.5s; position:relative; top:0; left:0;   }
.header .contentHeader .nav LI, .header .contentHeader .nav LI.lienmobile { display:block; min-width:0; border-radius:0; font-size:14px; margin:5px; float:none; text-align:center; background:none;  padding:5px; border-bottom:1px solid #EEE;  }
.header .contentHeader .nav LI + LI { margin:5px; text-align:center;}
.header .contentHeader .nav LI:HOVER { background:linear-gradient(#A062AD, #7A3888); }
.nav .iconX {position:relative; display:block; margin: 5px; width:25px; height:25px; background:#666; cursor:pointer; border-radius:5px; color:#FFF; font-size:22px; text-align:center; }

/* home page */
.container .introHP {width:auto; margin:10px 10px 30px 10px;; }
.container .introHP .illust1, .illust2, .illust3, .illust4 {display:none;}
.blocHow, .blocHP, .blocLettresHP {width:auto; float:none; margin: 10px; }
.blocLettresHP H2 {  font-size:25px; }
.degradeVert { height:auto;} 
.blocLettresHP A {width:auto; float:none; background:none; border-bottom:2px dotted #CCC;}
.blocLettresHP A .titreCat, .blocLettresHP .colSep { display:none; }
.blocLettresHP A:before {  content: "> "; }
.blocHP.ml0 {margin-left:10px;}
 
/* pub */
.pubmobile { margin:10px; display:block; }
.pubHP, .carre300, .pave, .icoEpingle, .pub468, .banLiens { display:none; }

/* categories */
.container .introCat {width:auto; margin:10px;}
.alerte {width: auto; }

/* lettre */
.contexte, .blocInfos, .blocInfosSmall, .blocLettres { width:auto; float:none; margin:10px; }
.titreVertSouligne { font-size:25px; } 
.outils, #sthoverbuttons { display:none; }
.blocLettres A.similaire {width:auto; }

ul.puce LI { background:none; padding:0; margin: 0 10px 10px 10px; list-style-type: disc; }

.footer .contentFooter { width:auto; }
.footer UL.plus, .footer UL.autresSitesPalmeris, .footer .contentFooter .tamponPalmeris, .contentFooter H5 { display:none; }
}