*, body {margin:0px;padding:0px;font-family:Trebuchet MS;font-size:12px;}

body
{
  background:#BCBCBC url(template/kookyoo/background.png) repeat-x;
  text-align:center;
  font-size:14px;
  height:100%;
}

button {cursor:pointer;}

h1 { font-size:26px;  text-decoration:none;  border-bottom:1px solid #CCC;  color:#444;}
h2 { font-size:22px; color:black; padding:10px; }
h6 { font-weight:normal;font-size:8px;}
a img {border:none;}
strong {color:red;}
ul {    margin-left:20px;}
ol {    margin-left:30px;}

#banniere
{
	margin-left:auto;
	margin-right:auto;
	width:1000px;
	height:100px;
	background:url(template/kookyoo/banniere.png) no-repeat;
	color:white;
	border:none;
	text-align:right;  
	font-family:Verdana;
	font-size:16px;
}

#main
{
    display:flex;
    flex-direction:columns;
    margin-left:auto;
    margin-right:auto;
    max-width:1000px;
//height:auto;
    box-shadow:0px 0px 6px #444;
    background-color:white;
    text-align:left;
    padding-top:5px;
    overflow:auto;
//height:100%;
    padding-bottom:150px;
    overflow-x:hidden;
    overflow-y:auto;
}

#content
{
    min-height:500px;
    border-right:1px solid #DDD;
    color:#444;
    border:none;
    margin:2px;
}

#menu
{
    //position:relative;
    //float:left;
    //display:inline-block;
    padding:0px 4px 8px 0px;
    margin-left:10px;
    margin-top:-5px;
    width:100%;
    max-width:320px;
    min-height:480px;
    text-align:justify;
    color:gray;
    box-shadow:1px 1px 4px #AAA;
    background-color:#EEE;
    padding-bottom:16px;
}

#menu .separator
{
    box-shadow:2px 2px 6px #CCC;
}

#colonne
{
    float:left;
    width:28%;
}

#nouveautes
{
    float:left;
    text-align:justify;
    padding-right:10px;
    display:flex;
    flex-direction:horizontal;
    flex-wrap: wrap
}

#preview {
    max-width:100%;
}

@media (min-width: 1010px)
{
    #main, #banniere, #bottom
    {
        max-width:1000px;
    }
    #content
    {
        max-width:650px;
    }
}
@media (min-width:650px) and (max-width: 1010px)
{
    #main, #banniere, #bottom
    {
        max-width:96%;
    }
    #content
    {
        width:70%;
    }
    #menu
    {
        width:30%;
    }
    #colonne
    {
        max-width:640px;
    }
}
@media (max-width:650px)
{
    #main
    {
        flex-direction:column;
    }
    #main, #banniere, #bottom, #content, #nouveautes, #home
    {
        max-width:100%;
    }
    #colonne
    {
        width:100%;
        max-width:100%;
    }
}
@media (min-resolution: 2dppx)
{
    #main, #banniere, #bottom, #content
    {
        max-width:100%;
        width:100%;
    }
}

#banniere a
{
  color:white;
  text-decoration:none;
  letter-spacing:2px;
  text-shadow:black 1px 1px 5px;
}

#banniere .links {padding-top:60px;}
#banniere .links a {padding:16px 10px 16px 10px;font-size:16px;}
#banniere .links a:hover{
	background-color:#0089b2;
	border-bottom:2px solid;
	border-color:#ff7f00;
	border-radius:1px;
	background:-webkit-linear-gradient( bottom, #2a2a2a, #0089b2);
	background:	  -moz-linear-gradient( bottom, #2a2a2a, #0089b2);
	background:    -ms-linear-gradient( bottom, #2a2a2a, #0089b2);
	background:     -o-linear-gradient( bottom, #2a2a2a, #0089b2);
	background:        linear-gradient( bottom, #2a2a2a, #0089b2);
}

#banniere .recherche {margin-right:50px;margin-top:22px;display:none;}
#recherche {width:243px;height:22px;}
#recherche .input {background:none;width:213px;height:23px;border:none;padding-top:4px;background-repeat:no-repeat;color:#444;border-radius:3px;}
#recherche .input:hover,#recherche .input:focus {background-color:none;}
#recherche .submit {background:none;color:white;width:22px;height:22px;background-image:url(../../style/recherche-bouton.png);border:none;background-repeat:no-repeat;cursor:pointer;}

#banniere .compte {
	float:right;
	background-color:#00c3ff;
	color:black;
	width:auto;
	text-align:center;
	border-radius:0 0 8px 8px;
	padding:6px 9px 4px 8px;
	box-shadow:1px 2px 6px black;
	background-image:url('style/icons/member.png');
	background-repeat:no-repeat;
	background-position:5px center;
}
#banniere .compte a 
{
	color:black;
	font-size:14px;
	text-shadow:none;
	font-weight:bolder;
	margin-left:20px;
}

#banniere .compte a:hover
{
	color:white;
	text-shadow:black 1px 1px 5px;
}

#content h1, #menu h1
{
    text-align:left;
    background-color:#0089b2;
    box-shadow:2px 2px 4px #CCC;
    border:none;
    color:black;
    font-size:18px;
    text-decoration:none;
    margin-left:20px;
    margin-top:12px;
    margin-bottom:12px;
    margin-right:15px;
    padding:3px 3px 3px;
    width:100%;
}

input, textarea{border-width:1px;border-color:#2e8df0;border-radius:2px;}
input:hover, textarea:hover {background-color:#79E;}
input:focus, textarea:focus {background-color:#ED7;}

#menu a img {border:none;box-shadow:1px 1px 2px #888;}
#menu a:hover {color:orange;}
#menu .commentaires {font-size:8px;color:red;}

#contenu img,#contenu embed,#contenu object
{
    width:100%;
    margin-right:3px;
}

#menu * {
  margin-left:6px;
  font-size:12px;
  text-decoration:none;
}

/*#menu h1 {
  text-align:left;
  background-color:#0089b2;
  border-radius:1px 0px 0px 1px;
  box-shadow:0px 1px 1px #333;
  border:none;
  color:white;
  font-size:16px;
  text-decoration:none;
  margin-bottom:5px;
  margin-left:10px;
  margin-top:4px;
  margin-right:-15px;
  padding:3px 3px 3px 7px;
  width:304px;
  text-shadow: 1px 2px 1px #222;
  font-family:Verdana;
}
*/
#menu h2
{
    font-size:16px;
  color: #333;
  padding-bottom:2px;
  border-bottom:1px dotted #666;
  text-align:right;
}

#menu ul {
    margin-left:20px;
}

#menu_titre { width:80%; margin:0px;}

#menu_membre {
  padding-top:5px;
  color:white;
}

#text-fr, #text-en
{
	background-image:url('style/icons/flag-fr.png');
	background-repeat:no-repeat;
	display:block;
	padding-left:24px;
	background-position:0px 3px;
	border-left:2px solid #EEE;
	border-right:2px solid #EEE;	

}

#text-en
{
	background-image:url('style/icons/flag-en.png');
}

#infos_compte
{
  text-align:left;
  margin-top:5px;
  min-height:90px;
  max-height:200px;
  padding-left:10px;
  padding-top:4px;
  line-height:16px;
}
#infos_compte label {display:inline-block;width:130px;height:16px;}
#infos_compte,#infos_compte a{color:black;}
#infos_compte p { margin: 4px; padding: 2px; padding-left:6px;border:1px solid #DDD;border-radius:4px;background:#EEE;width:225px;}
#infos_compte p  a:hover{color:orange;}
#infos_compte_form {float:right;width:150px;}
#infos_compte_form input {display:inline;text-align:left;width: 130px;}
#infos_compte_form input[type=checkbox] {margin-top:4px;margin-left:-40px;}
#infos_compte_form form {margin-top:-20px;}
#infos_compte_form label {font-size:10px;display:inline-block;}
#infos_compte img, #commentaires img {width:75px;height:75px;float:left;padding-right:5px;box-shadow:0 0 6px #666;border-radius:5px;padding:5px;margin-right:10px;}
#infos_compte img {
	float:right;
	margin-top:-28px;
	margin-right:0px;
	background:white;
}
#infos_compte h1 {
  line-height:22px;
  margin:0px;
}
#login .bouton {text-align:center;font-weight:bold;color:white;background-color:#0089b2;text-shadow:0px 0px 4px black;}

label {
  display:inline-block;
  color:black;
  width:130px;
}

textarea { width:520px; height:100px;}

#commentaires {width:100%; font-size:12px;margin-left:10px;}
#commentaires h1 {color:#666 ;font-size:30px;text-decoration:none;border-bottom:1px solid #888;}
#commentaires .message {font-size:12px;overflow:auto;width:80%;margin-left:120px;padding-left:5px;border-left:solid 2px #EEE;text-align:justify;max-width:490px;min-width:490px;	}
#commentaire {width:100%; font-size:12px; padding:10px; min-height:150px;}
#commentaire .vignette {width:100px;height:100px;float:left;}
#commentaire .infos {font-size:12px;font-weight:normal;border-bottom:solid 2px #DDD;color:#333;}
#commentaire .infos b {font-size:15px;font-weight:bold;color:black;}
#commentaire .infos b a {font-size:15px;font-weight:bold;text-decoration:none;color:black;}

#commentaires_form
{
  color:#666;
  width:100%;
  height:220px;
  font-size:12px;
}

#commentaires_form .message {overflow-y:scroll;}

#form .champ {margin:2px;}

#extrait {
  font-size:12px;
}


#loginsec {display:none;height:0px;}


#destination {color:white;padding:10px;width:880px;height:320px;overflow:hidden;}

#membre h2 { font-size: 20px; color:grey;padding-top:0px;padding-left:4px;}
#membre .profil {
	width:auto; min-height:250px;
    background-color:#EEE; margin:5px;
    //border-radius:3px;
    padding:10px;
    box-shadow:2px 2px 4px #CCC;
	color:black;
	
	//background:-webkit-linear-gradient( top, #333 45%, #0089b2);
	//background:	  -moz-linear-gradient( top, #333, #0089b2);
	//background:    -ms-linear-gradient( top, #333, #0089b2);
	//background:     -o-linear-gradient( top, #333, #0089b2);
	//background:        linear-gradient( top, #333, #0089b2);
	//border:6px solid #333;
}
#membre .profil a { color : #ff7f00;}
#membre .profil img { border:6px white solid;width:128px;height:128px;box-shadow:2px 2px 4px #CCC; margin:0px 10px 10px 0px;}
#membre .profil label {font-weight:bold;margin:2px;}
#membre .blogs {color:#666;}
#membre .blogs a { font-size:14px;color:black;text-decoration:none;  border-bottom:1px solid #AAA;letter-spacing:2px;}
#membre .blogs a:hover { color:orange;font-weight:bold;letter-spacing:1px;}



/*********************/
/* Style des billets */
/*********************/

#billet
{
  font-size:12px;
  text-align:justify;
  margin:2%;
}

#billet img, #billet embed, #billet iframe, #billet object
{
    margin:-left:auto;
    margin-right:auto;
    width:100%;
}

#billet a
{
  text-decoration:none;
  font-weight:bold;
  color:#222;
  border-bottom:1px dotted #888;
}

#billet a:hover {color:#38F; border-bottom:1px dashed #38F;}

#billet img,#billet embed,#billet object
{
  border:none;
  margin:0px;
}

#billet .titre h1, #membre  h1
{
  font-size:26px;
  text-decoration:none;
  border-bottom:1px solid #CCC;
  background-color:rgba(0,0,0,0);
  color:#444;
}

#billet .infos
{
  text-align:right;
  font-size:11px;
}

#preview
{
    background-size: cover;
    display:block;
	width:100%;
	min-height:220px;
}

#preview .texte
{
	background-color:rgba(255,255,255,.6);
	color:black;
	padding-left:6px;
    text-overflow:ellipsis;
}

#footer {width:100%;}
#footer h3 {
  text-align:left;
  border-radius:2px;
  //box-shadow:0px 2px 2px #666;
  border:none;
  color:white;
  font-size:16px;
  text-decoration:none;
  text-shadow: 1px 1px 2px #222;
  text-transform : capitalize;
}
#footer .similaires , #footer .tags {width:320px;border-radius:2px;vertical-align:top;background-color:#0089b2;text-overflow:ellipsis;padding:6px;}
#footer .similaires {white-space : nowrap;}
#footer .similaires a {font-size:12px;color:white; text-decoration:none; border-bottom:1px dotted white;text-overflow:elipsis;}
#footer .similaires a:hover {border-bottom:1px dashed #ff7f00;font-weight:bold;}
#footer .liens a {text-decoration:none;}
#footer .tags {text-align:right;vertical-align:top;}
#footer .tags a {color:black;background-color:#EEE;border-radius:3px;box-shadow:0px 0px 4px #AAA;padding:2px;font-weight:bold;text-decoration:none;font-size:14px;}
#footer .tags a:hover {background-color:#ff7f00;}
#footer .tags h3 {text-align:right;}

#footer_annonces
{
	background-color: #0089b2;
	border: medium none;
	border-radius: 5px 0 0 5px;
	box-shadow: 0 1px 2px #333333;
	color: white;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 2px 1px #222222;
	width:500px;
	height:90px;
}

#footer_changepage {
  text-align:center;
  color:gray;
  font-size:12px;
  display:inline-block;
  width:600px;
}
#footer_changepage a
{
  color:white;
  background-color:#9A9A9A;
  border:3px solid #9A9A9A;
  padding:2px;
  padding-top:3px;
  text-decoration:none;
  font-weight:bold;
  border-radius:6px 1px 2px 1px;
}
#footer_changepage a:hover {
  background-color:#BBB;
  border-color:#AAA;
  color:#666;
}

#footer_changepage b {font-size:12px;}
#footer_changepage .previous {float:left;text-align:left;margin-top:-3px;border-radius:10px 1px 2px 1px;}
#footer_changepage .next {float:right;text-align:right;margin-top:-3px;border-radius:1px 10px 1px 2px;}


/**********************/
/* Style des dossiers */
/**********************/
#conclusion p
{
  font-size:12px;
  padding-bottom:30px;
}

#dossier {
	font-size:12px;
	width:100%;
	text-align:justify;
	overflow: hidden;
}

#dossier .titre h1
{
  text-align:right;
  font-size:26px;
  text-decoration:none;
  border-bottom:1px solid #CCC;
  color:#444;
}

#dossier .infos
{
  text-align:right;
  font-size:11px;
  padding-bottom:10px;
}

#conclusion .titre
{
  font-weight:bold;
  font-size:20px;
  color:#BBB;
  border-bottom:1px dotted #BBB;
  width:578px;
}

#conclusion h1
{
  text-decoration:none;
  font-weight:bold;
  font-size:30px;
  color:#73F;
}

#conclusion .note
{
  float:right;
  font-weight:bold;
  width:46px;
  height:46px;
  background-image:url(../../style/note_bg.gif);
  background-repeat:no-repeat;
  padding-left:2px;
  margin-top:25px;
  margin-left:16px;
  font-size:34px;
}

#dossier .liens_pied
{
  border-top:1px solid #BBB;
  width:100%;
  text-align:center;
}
#dossier .liens_pied a
{
  color:#333;
}

/****************************************/
/****************************************/

#bottom
{
    margin-left:auto;
    margin-right:auto;
	width:100%;
	background-color:rgba(100, 100, 100, 0.5);
}

#pied {
	text-align:center;
	background-color:rgba(100, 100, 100, 0.5);
	width:100%;
	height:150px;
	margin-left:auto;
	margin-right:auto;
	box-shadow:0px 4px 4px black;
	padding-bottom:10px;
}

#pied .column  {
	display:inline-block;
	width:30%;
	height:120px;
	vertical-align:middle;
	padding:10px;
	border-right:1px solid #999;
}

#pied hr {margin:20px;}


#pied, #pied a {
  font-size:12px;
  color:#EEE;
  text-decoration:none;
}

#pied h1 {margin-bottom:3px;}

#pied a {
	padding:3px;
	}

#pied a:hover{
  //color:#ff7f00;
  //text-decoration:overline underline;
  background-color:#ff7f00;
}

#hotlinks {
  width:300px;
  height:300px;
  float:left;
  padding:10px;
}

#hotlink {height:20px;border-bottom:dotted 1px #CCC;}
#hotlink .nouveau {color:#333;font-weight:bold;text-decoration:none;}
#hotlink .vu {color:#666;text-decoration:none;}

#clearboth {clear:both;}

#player {text-align:justify;}
#player a {color:#333;text-decoration:none;}
#player a:hover {color:black;text-decoration:underline;}
#thumb {padding-bottom:5px;padding-left:20px;}

#bulle
{
    //background-color:#EEE;
    box-shadow:2px 2px 6px #CCC;
    display:inline-block;
    margin:4px;
    padding:6px;
    border:1px solid #EEE;
    color:#AAA;
    text-overflow:ellipsis;
    overflow:hidden;
}
a #bulle:hover
{
    //background-color:#EEE;
    box-shadow:2px 2px 16px #AAA;
    color:#999;
}

#bulle a {text-decoration:none;color:orange;}
#bulle b {color:black;font-weight:bold;}
#bulle h1 {color:black;text-decoration:none;font-size:16px;text-transform: capitalize;border:none;}


#annonces a img {border:none 0px;cursor:pointer;margin:5px;width:125px;height:125px;}
#annonces 
{
	background-color: #0089b2;
	border: medium none;
	box-shadow: 0 1px 1px #333333;
	color: white;
	font-size: 18px;
	margin-bottom: 5px;
	margin-left:10px;
	margin-right: 15px;
	margin-top: -5px;
	padding-left: 10px;
	text-align: left;
	text-decoration: none;
	text-shadow: 1px 2px 1px #222222;
	width: 304px;
}
#annonces a
{
	color:white;
}

#connexion {margin:20px;text-align:center;}

form {display:inline;}
fieldset { border:0px black; }

#formulaire label {display:inline-block;width:150px;color:black;margin-top:4px;font-weight:bold;}
#formulaire input, #formulaire textarea {width:230px;border:solid 1px #AAA;background-color:#BBB;padding:2px;}
#formulaire input:hover, #formulaire textarea:hover {background-color:#CCC;}
#formulaire input:focus, #formulaire textarea:focus {background-color:#EEE;color:black;border-color:#ff7f00;}
#formulaire input[type="checkbox"]  {margin-left:30px;width:20px;vertical-align:top;}
#formulaire input[type="radio"]  {margin-left:30px;width:20px;vertical-align:top;}
#formulaire div {display:inline-block;width:80%;margin-bottom:10px;margin-top:-3px;}
input[type="submit"]    {background-color:#CCC;color:black;display:inline;border:2px solid #777;margin-left:5px;cursor:pointer;}

#formulaire textarea {width:100%;height:240px;}
#formulaire .textarea_page {width:100%;height:240px;border:solid 1px #CCC;background-color:#AAA;}
#formulaire .loginsec {display:none;}

#formulaire fieldset
{
	background-color:#CCC;
	/*//background:-webkit-linear-gradient( bottom, #222, #888);
	//background:	  -moz-linear-gradient( bottom, #222, #888);
	//background:    -ms-linear-gradient( bottom, #222, #888);
	//background:     -o-linear-gradient( bottom, #222, #888);
	//background:        linear-gradient( bottom, #222, #888);*/
    color:black;
    padding:10px;
    padding-bottom:25px;
    margin-bottom:10px;
    padding-left:auto;
    margin-right:auto;
    box-shadow:2px 2px 4px #CCC;
}
#formulaire fieldset b {color:black;}
#formulaire fieldset h1, #formulaire fieldset h2 {border-bottom:1px dotted #BBB;color:black;font-size:23px;margin-bottom:10px;margin-top:-4px;}
#formulaire fieldset h2 {font-size:20px;}
#formulaire fieldset input[type="submit"] {display:block;margin-left:auto;margin-right:auto;margin-top:20px;background-color:#00c3ff;border:#00c3ff 2px solid;color:black;font-size:14px;font-weight:bolder;width:auto;min-width:100px;box-shadow:2px 2px 4px #AAA;}
#formulaire fieldset input[type="submit"]:hover {background-color:#ff7f00;color:Cornsilk;border-color:#ff7f00;box-shadow:0px 0px 6px gray;}
#formulaire fieldset a {color:#00a3ee;text-decoration:none;}
#formulaire fieldset a:hover {color:#ff7f00;text-decoration:underline;}
#formulaire fieldset textarea {width:585px;}

#pagelink {
	text-decoration:none;
	font-weight:bold;
	background:#0089b2;
	padding:6px;
	color:white;
	text-shadow:2px 1px 2px #333;
	border-radius:6px;
	box-shadow:2px 1px 2px #333;
}

#pagelink:hover{
	text-decoration:none;
	font-weight:bold;
	background:orange;
	padding:6px;
	color:#333;
	border-radius:6px;
	box-shadow:inset 2px 1px 2px #333;
	text-shadow:0px 0px 1px #333;
}

#home
{
    //max-width:440px;
    //margin-right:200px;
    margin:10px;
}

#preview img { padding:0px;padding-right:6px;margin-left:6px;vertical-align:bottom; }
#preview { font-size:14px;color:#222;text-decoration:none;font-weight:normal; }
//#preview a:hover {color:black;border-bottom:dotted 1px #AAA;}
#preview h2 {text-align:right;color:#999;font-size:16px;border-bottom:dotted 1px #BBB;padding-bottom:0px;margin-top:-10px;font-weight:normal;padding-bottom:-5px;}
#preview
{
    height:160px;
    border:none 0px;
    box-shadow: 2px 2px 4px #CCC;
    margin:1%;
    text-align:left;
}

#preview:hover
{
    box-shadow: 2px 2px 16px #AAA;
}

#preview .texte, #preview .date, #preview .commentaires
{
    display:block;
    //width:100%;
    color:black;
    background-color:white;
    background-color:rgba(255,255,255,.7);
    font-size:20px;
    font-weight:bolder;
    padding:5px 5px 3px 5px;
}

#preview .texte
{
    line-height:31px;
    height:auto;
    text-overflow:ellipsis;
    white-space: pre-line;
}

#preview:hover .texte, #preview:hover .date, #preview:hover .commentaires
{
    display:block;
    background-color:#333;
    color:white;
    background-color:rgba(0, 0, 0,.6);
}

#preview .date, #preview .commentaires
{
    font-size:12px;
    padding:2px;
    bottom:10px;
    display:none;
}

#preview .date
{
    float:left;
    max-width:60%;
}

#preview .commentaires
{
    float:right;
    max-width:40%;
    background-image:url("style/icons.png");
    height: 16px;
    width: 16px;
    background-position:-32px;
    background-repeat:no-repeat;
    padding-left:20px;
    font-size:14px;
}

#colonne a {text-decoration:none;}

#bulle, bulle span {font-size:10px;}

#hotlink a {color:white;}
#hotlink .nouveau {color:white;}

#welcom,#welcom a {font-size:12px;color:#666;}
#welinfos {color:#AAA;}

#hierarchy
{
    display:block;
    color:grey;
    margin:0px 0px 0px 10px;
}
#hierarchy a
{
    text-transform: capitalize;
    text-decoration:none;
    color:grey;
}
#hierarchy a:hover { color : orange; text-decoration:underline; }