/* -------------------------------------------------------
This file is part of the A Flower Makes My Day Dotclear theme.
Licensed under the GPL version 2.0 license.
See LICENSE file or
http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
----------------------------------------------------------*/

/* -----------------------------------------------------------------
	1. STRUCTURE
	a inscrire ici ou en important une css de structure placee dans
	le meme repertoire et appelee grace a l'instruction ci-dessous
------------------------------------------------------------------ */

@import url(custom.css);

 /*--------------------------------------------------------------
   1. STRUCTURE
   AVANT TOUTE CHOSE
--------------------------------------------------------------- */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html { font-size: 101%; -webkit-text-size-adjust: 101%;  -ms-text-size-adjust: 101%;}
html {overflow-x:hidden}
body {
-o-font-feature-settings: 'liga' 1, 'kern';
-moz-font-feature-settings: 'liga=1', 'kern=1'; /* FF old */
-moz-font-feature-settings: "liga=1, dlig=1";
-moz-font-feature-settings: 'liga' 1, 'kern';
-ms-font-feature-settings: 'liga' 1, 'kern';
-webkit-font-feature-settings: "liga", "dlig";
-webkit-font-feature-settings: 'liga' 1, 'kern';
font-feature-settings: "liga", "dlig";
font-feature-settings: 'liga' 1, 'kern'; /* Future */
}
html,input,textarea { -webkit-font-smoothing:antialiased; }

html, body, #page, #top, #prelude, #wrapper, #footer,#main, #content,#sidebar{margin:0;padding:0;border:0;vertical-align:baseline;}

@font-face {font-family: 'Open Sans';font-style: normal;font-weight: 100;src: local('Open Sans'), url(index.php?tf=fonts/OpenSans-Regular.ttf) format('ttf');}
@font-face {font-family: 'Lato';font-style: normal;font-weight: 100;src: local('Lato'), url(index.php?tf=fonts/lato.woff) format('woff');
}


/* -------------------------------------------------------------
    1. STRUCTURE
	Media   
--------------------------------------------------------------- */

@media only screen and (max-width:1024px){ 
#page {background-color: #ffffff; width: 100%; -webkit-text-size-adjust:105%; }
#top {min-height: 250px; }
#title { padding: 10px 10px 20px 10px; margin-left: 1em; margin-right: 1em; }
#top h1 { line-height: 1.3em; }
#top h1 a { font-size: 80%; }
#content { width: 100%; padding: 5%;}
.post-content p {-webkit-text-size-adjust:120%;}
a.prev { margin-bottom: 1em; }
blockquote { width: 90%;}
#sidebar {width: 100%; padding: 5%;}
}

@media screen and (min-width:1025px)  {
#page {max-width: 900px; margin: 2em auto; }
#top { min-height: 350px;  }
#top h1 { line-height: 1.7em;}
#title { padding: 3% 3% 4% 3%; width: 33%; margin-left: 5%; }
#content {width: 71.999%; float: left; padding: 3% 5%;}
blockquote { width: 70%;}
#comments dl { margin-left: auto !important; margin-right: auto !important;   }
#sidebar { font-size: 95%; width: 27.999%; padding: 3% 2%; float: right; }
}
@media screen and (min-width:1025px) and (max-width: 1367px){
#page {max-width: 1200px;}
#comments dl {width: 70%; }
#comment-form fieldset {width: 70%; margin-left: auto;margin-right: auto; }
}
@media screen  and (min-width:1368px) and (max-width: 1620px){
#page {max-width: 1300px;}
#comments dl {width: 70%; }
#comment-form fieldset {width: 70%; margin-left: auto;margin-right: auto; }
}
@media screen and (min-width: 1620px){
#page {max-width: 1500px;}
#comments dl {width: 70%; }
#comment-form fieldset {width: 70%; margin-left: auto;margin-right: auto; }
}


/* ------------------------------------------------------------
   1. STRUCTURE
   Bloc de styles à supprimer, ne servent qu'aux premiers tests 
------------------------------------------------------------- */
body { background-color: #454545; color: #333333; text-align: center; font-size: 1em; line-height: 1.5em; font-family: "Open Sans",sans-serif; text-rendering: geometricPrecision; }

/* ------------------------------------------------------------
	2. BALISES HTML PAR DEFAUT
------------------------------------------------------------- */

a {color: #333333; text-decoration: none;}
img { max-width: 100%; } 
p {}
ul { list-style: none;}


h1,h2,h3,h4,h5,h6 { clear:both; font-family: "Lato",sans-serif; font-weight: 100; text-transform: uppercase;}
h1 {font-size: 2.5em;}
h2 {font-size: 1.7em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1em;}	
h5 {font-size: 0.8em;}	
h6 {font-size: 0.5em;}

img {max-width: 100%; height:auto;} /*AVANT TOUTE CHOSE*/
	
sub,sup {font-size:75%;line-height:0; position:relative;vertical-align:baseline}
sup {top:-0.5em}
sub {bottom:-0.25em}
abbr[title], acronym { }

blockquote { background-color: #cdf2f2; border-radius: 1em; padding: 0.5% 2.5%; margin: 2em auto;  }
blockquote  a { font-weight: 100 !important;}
blockquote  p {margin: 0.5em 0 !important;}

button,input,select,textarea {font:inherit;margin:0}
button {overflow:visible}
button,select {text-transform:none}
button,html input[type=button],input[type=reset],input[type=submit] {-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled] {cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner {border:0;padding:0}
fieldset { border: none;margin: 0;padding: 0;}
form { border: none;margin: 0;padding: 0;}
input[type=checkbox],input[type=radio] {padding:0}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {height:auto}
input[type=search] {box-sizing:content-box;-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {-webkit-appearance:none}
textarea {overflow:auto}

input#q { width: 77%;padding: 1px;}
#sidebar input.submit { width: 20%; padding: 0px;text-transform: uppercase;}
input.submit {padding: 5px;text-transform: capitalize; }
input.preview {padding: 5px;text-transform: capitalize; }
.field input {background: transparent; border: 1px solid rgba(0, 0, 0, 0.22); width: 100%; padding: 5px 10px; }
.field textarea {background: transparent; border: 1px solid rgba(0, 0, 0, 0.22);   width: 100%; padding: 5px 10px; }
.buttons input {-webkit-appearance: textfield;-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;border: none;cursor: pointer;text-transform: capitalize;}
.buttons input.preview,.buttons input.submit  {border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.22);  background-color: rgba(226,228,199, 0.33);  font-size: 100%;padding: 8px !important;text-transform: capitalize;}
.buttons input.preview:hover,.buttons input.submit:hover  { background-color: rgba(226,228,179, 0.33);}
.form-help {font-weight: 700;font-size:0.8em;}

a { transition: all 0.2s ease-in-out;}
ol, ul {list-style-position: inside;}
pre {padding: 20px; white-space: normal; margin: 1em auto; }
hr {-moz-box-sizing:content-box;box-sizing:content-box}
hr { background-color: #333333; clear: both; width: 40%;  height: 1px; border: none; margin: 2em auto;}

figcaption,figure,nav {display:block}
audio,canvas,video {display:inline-block;vertical-align:baseline;max-width: 100%;/*AVANT TOUTE CHOSE*/} 
audio:not([controls]) {display:none;height:0}[hidden],template {display:none}
figcaption {margin: 1em 0 2em 0; text-align: center; font-size: 80%;}
figure {margin: 1em auto; }

legend {border:0;padding:0}

small {font-size:80%}
svg:not(:root) {overflow:hidden}
table {border-collapse:collapse;border-spacing:0;width:100%;display:table}
table {margin: 1em 0; border:none;}
th{padding: 4px; }
td {padding: 4px;}


/* ------------------------------------------------------------
	3. PAGE
------------------------------------------------------------- */

#page { background-color: #6c7871; background-repeat:repeat; background-image: url('index.php?tf=img/sidebar.png');  } 
#wrapper {text-align: left; }

p#breadcrumb { font-size: 80%; color: #ffffff; margin: 0; background-color: #333333;padding: 1em 5%; }
p#breadcrumb a { color: #ffffff; }


/* ------------------------------------------------------------
	4. TOP
------------------------------------------------------------- */

#top {display: flex; -webkit-display: flex;  flex-wrap: wrap;  align-content: space-evenly; height: auto; background: #333333 url(index.php?tf=img/title.jpg); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; padding: 0; position: relative;}
#title { color: #ffffff;  background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(0, 0, 0, 0.66); height: auto; }
#top h1 {  margin: 0; padding: 0; }
#top h1 a { color: #ffffff;  text-shadow: 1px 1px 5px #e7b500; font-weight: 100;}
.site-baseline {padding: 2%;}

.topnav nav ul {display: inline; padding: 0;}
.topnav { font-size: 90%; overflow: hidden; background-color: #333;}
.topnav a { float: left; display: block; color: #f2f2f2;  text-align: center;  padding: 14px 16px; text-decoration: none; font-size: 110%;}
.topnav a:hover { background-color: #fee100; color: black;}
.topnav li.li1 a { background-color: #f0c600;  color: black;}
.topnav .icon { display: none;}

@media screen and (max-width: 900px) {
.topnav a:not(:first-child) {display: none;} 
.topnav a{display: none;}
.topnav a.icon {float: right; display: block; }
}

@media screen and (max-width: 900px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {position: absolute; right: 0;top: 0; }
  .topnav.responsive a {float: none;display: block; text-align: left;}
}

#prelude { display: none;}


/* ------------------------------------------------------------
	5. CONTENT
------------------------------------------------------------- */

#content { background-color: white; text-align: left; }
#content-info { font-size: 90%; margin-bottom: 1em;}
#subcategories { font-size: 90%; margin-bottom: 1em;}
#content-info h2 { font-size: 110% !important; font-weight: 700; padding-bottom: 8px;border-bottom: 1px dotted rgba(0, 0, 0, 0.33); line-height: 1.5em;}
#content-info p {margin: 1em 0;}
#subcategories h3, #attachments h3 {font-size: 110% !important; font-weight: 700; padding-bottom: 8px; border-bottom: 1px dotted rgba(0, 0, 0, 0.33);}
#subcategories ul,#attachments ul {padding: 0;}

#navlinks {text-align: center; margin-bottom: 2em;padding-bottom: 8px; border-bottom: 1px dotted rgba(0, 0, 0, 0.33); min-height: 30px;}
.pagination {text-align: center; padding-top: 8px; border-top: 1px dotted rgba(0, 0, 0, 0.33); min-height: 30px;}
a.prev { float: left; }
a.next {float: right; }

/* ------------------------------------------------------------
	6. POST
------------------------------------------------------------- */

.post {margin-bottom: 6em;}
.dc-post .post, .dc-page .post {margin: 3em 0 5em 0;}
.dc-category .post, .dc-tag .post, .dc-search .post {margin: 3em 0;}

.dc-home .day-date, .dc-post .day-date, .dc-page .day-date, .dc-category .day-date, .dc-tag .day-date, .dc-search .day-date { display: none;}
.day-date { font-size: 90%; }
.post-title {    word-spacing: 3px; }
.post-info, .page-info {font-size: 80%; margin-bottom: 2em;}
.post-info p {margin: 0; }
.author, .date {/* display:none; */ }
.author {margin-right: 0em;}
.date {margin-right: 1em;}
.category {background : transparent url(index.php?tf=img/icon_category.png) no-repeat left center; padding: 2px 0 0 20px; margin-right: 0.5em; }
.comment_count { padding: 20px 0px 20px 20px; background : transparent url(index.php?tf=img/icon_comments.png) no-repeat left center; margin-right: 0.5em; }
.ping_count {background : transparent url(index.php?tf=img/icon_trackbacks.png) no-repeat left center; padding: 2px 0 0 18px; margin-right: 0.5em; }
.attach_count {background : transparent url(index.php?tf=img/icon_attach.png) no-repeat left center; padding: 2px 0 0 18px; margin-right: 0.5em; }
.permalink {background : transparent url(index.php?tf=img/icon_permalink.png) no-repeat left center; padding: 2px 0 0 18px; margin-right: 0.5em; }
ul.post-tags { display: inline; text-align: center;}
ul.post-tags {background : transparent url(index.php?tf=img/icon_tags.png) no-repeat left center; padding: 2px 0 0 18px; }
ul.post-tags li{ list-style: none;padding: 0;}
.post-tags li{display:inline-block;}
.post-tags li:after {content: ", ";}
.post-tags li:last-child:after {content:"";}

h2.post-title {line-height: 1.5em;}
.post-excerpt p {font-weight: 700;}
.post-content p {margin: 1em 0;}
.post-excerpt p a, .post-content p a { border-bottom: 1px dotted rgba(0, 0, 0, 0.22); padding-bottom: 2px; }
.post-excerpt,.post-content { line-height: 1.6em;}
.post-excerpt ul,.post-content ul {list-style-position: inline; list-style: circle;}
.post-excerpt il il,.post-content  li li {padding-left: 20px;}
.footnotes {font-size: 90%;}
.read-it { text-align: right;}


/* ------------------------------------------------------------
	7. COMMENT
------------------------------------------------------------- */

#comments h3, #comment-form h3 {margin-top: 5em; font-size: 110% !important; font-weight: 700; border-bottom: 1px dotted rgba(0, 0, 0, 0.33);}
#comments dl {clear: both; margin: 3em auto;   }
#comments dt { font-size: 80%; margin: 0 0 2em 0; }
#comments dt a {color: #e45e00;}
#comments dd { border-radius: 1em; padding: 0.5% 2.5%; margin: auto;}
.dd-comment {  width: 1.5rem;  height: 1.5rem;  margin-left: 1.5rem;  }
#comments dd {background-color: #cdf2f2; }
.dd-comment {  fill: #cdf2f2;}

/* ------------------------------------------------------------
	8. SIDEBAR
------------------------------------------------------------- */

#sidebar { color: white; text-align: left; }
#sidebar h2, #sidebar h3 {font-size: 90% !important; font-weight: 700; border-bottom: 1px dotted rgba(255, 255, 255, 0.33); padding-bottom: 3px; margin-bottom: 13px;}
#sidebar a {color: white;	}
div.widget {background: rgba(0, 0, 0, 0.33); border: 1px solid rgba(0, 0, 0, 0.66);  padding: 5%; margin: 0 0 2em 0; }
div.widget h2 {margin: 0 0 .5em 0; }
div.widget ul {margin: 0; padding: 0;}
div.widget li li {padding-left: 20px;}
div.widget.tags ul li{ display:inline-block; padding: 1%;  margin: 0 1% 1% 0;}
div.widget.tags p strong a { font-weight: 100; background : transparent url(index.php?tf=img/icon_next.svg) no-repeat left center; padding: 2px 0 0 18px; margin-right: 1em; }



/* ------------------------------------------------------------
	9. FOOTER 
------------------------------------------------------------- */

#gotop { z-index: 1000;position: fixed;bottom: 0;right: 0.5em; width: auto; padding: 0.25em 0.35em; border-radius: 0.25em;text-align: center; }
#gotop a, #gotop a:link, #gotop a:hover, #gotop a:active { border: none;}
#gotop {border: 1px solid #333333;background-color:#ffd302;  font-size: 120%; text-align: center; }
#gotop a, #gotop a:link, #gotop a:hover, #gotop a:active {background: transparent; color:black; }

#footer { font-size: 80%; color: #ffffff; margin: 0; padding: 1em 5%; background-color: #333333;}
p#footer { color: #ffffff; }
#footer a { color: #ffffff; }
#blogcustom {clear:both;max-width: 1600px; height: auto; margin:  0 auto; padding: 0.5% 0%; }
.blogcustom__title {display: none;}
#blogcustom div.widget { padding: 1%; }
#blogcustom div.widget input[type=text] {width: 76.66666%;  background-color: transparent; border: 1px solid #edede0ff; }
#blogcustom div.widget input[type=submit] {width: 19.33333%; padding: 1px 0; background-color: transparent; text-transform: uppercase; border: 1px solid #edede0ff; }
#blogcustom div.widget input[type=text], #blogcustom div.widget input[type=submit] {color: #FFFFFF; }
#footerbgr {border-top: 1px solid #eeeeee; clear:both;margin: 0%; padding: 1% 2%; height: auto; min-height: 50px;}
#footer p { margin: 0;padding-top: 6px;}
/* ------------------------------------------------------------
	10. CLASSES COMMUNES
------------------------------------------------------------- */
.feed {background : transparent url(index.php?tf=img/icon_feed.svg) no-repeat left center; padding: 0 0 0 20px; }

.error { background: #FF6600; border-radius: 1em; padding: 2.5%; }
#pr {max-width: 70%; margin: 3em auto;}


/* ------------------------------------------------------------
	11. PAGES SPECIFIQUES
	j'indique le marqueur du body, a completer pour cibler 
	plus precisement (cf l'exemple ci-dessus pour les tags)
------------------------------------------------------------- */

.dc-home { }
.dc-post { }
.dc-categories { }
.dc-category { }
.dc-archive-month .content-inner .post-content {margin-bottom: 5em;}
.dc-archive-month p.day-date  { margin-top: 3em !important; margin-bottom: 0.1em !important;}
.dc-archive-month h2.post-title  {margin-top: 0.3em !important; margin-bottom: 0.3em !important;}
.dc-archive-month .post-info {margin-top: 0.3em !important; margin-bottom: 3em !important;}
.dc-archive .content-inner {text-align: left; }
.dc-archive h4{margin-bottom: 0.5em; padding: 4px 0; }
.dc-archive ul, .dc-archive ul li {list-style:none; margin: 3px 0 0 0;padding: 0;	text-indent: 0;}
.arch-block {display: block;margin: 0 0 2em 4em;vertical-align: top;}
.arch-block:first-child {margin-left: 0;}
.arch-block li {line-height: 1.5em; padding: 2px 0px 2px 0px; }
.arch-block li li {padding: 0px 0px 0px 20px;	}
.arch-block ul ul {margin-left: 20px;}
#time-criteria h3:first-child { margin:0; padding:0 5px; margin-top: 0;	}
#by-date {	margin-right: 0; margin-bottom: 2em; margin-top: 2em;}
#by-date h3 {	display: none; line-height:30px;	margin-bottom: 0; }
#by-date div {display: inline-block;	vertical-align: top;	margin: 0 0.5em; width: 10em;	}
#by-date ul {margin-bottom: 1.5em;}
#by-date span {}
#by-date ul, #by-tag ul, #by-cat ul {	list-style:none; }
.dc-tags ul.tags{ list-style: none; padding-left: 0;}
.dc-tags ul.tags li { display: inline; padding: 0em 1.5em 1.5em 0em;}
.dc-tag { }
.dc-404 { }
.dc-search { }

/* ---------------------------------------------------
	12. ET POUR FINIR NE PAS OUBLIER LES CLEARERS
	ici ceux le plus souvent necessaires
--------------------------------------------------- */
#top, #wrapper, .post,.post-content, .post-info, .post-info-co, .footnotes, .attachments, #comments, .pagination, #navlinks, #footer, .post h3, .post h4 {clear:both;}