/* Style for Trails theme using Dotclear 2.37 
Licence: domaine public 
February 2026
*/

*,*::after,*::before{box-sizing:border-box}
html{font-size:100%;text-size-adjust:100%; margin:0; padding:0}
body,page {margin:0;padding:0,}
body {
-moz-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';
}
html,input,textarea { -webkit-font-smoothing:antialiased; }

* { box-sizing: border-box;} 

body {font-family:-apple-system,BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue",sans-serif;
	line-height: 1.7; font-size: 100%; color: rgb(31, 31, 31); background: white; }
	
@media screen and (max-width: 768px) {
#blognav, #blogextra, #blogcustom  { max-width: 100% !important;}
#titledesc { height: 85%; text-align: center;}
.dc-home #top h1 {  font-size: 160%;}
.dc-home #blogdesc {font-size: 150%;}
#navigation nav ul { padding-left: 20px;}
figure { margin: 1em auto;  max-width: 100%; }
div.widget {width: 100% !important;}
}

@media screen and (min-width: 769px) and (max-width: 1199px) {
#navigation nav ul { padding-left: 0 !important; }
#titledesc { height: 90%; max-width: 1000px; margin: 0 auto;  }
.dc-home #top h1 {  font-size: 400%;}
.dc-home #blogdesc {font-size: 200%;}
#navsearch { padding: 0 20px;}
figure { margin: 1.5em auto;  max-width: 97%; }
#blognav, #blogextra, #blogcustom { max-width: 100% !important;}
div.widget {  width: 49%; }
}

@media screen and (min-width: 1200px) {
#navigation nav ul, p#breadcrumb, #content  { max-width: 1000px; margin: 0 auto; }
#navigation nav ul { padding-left: 0 !important; }
#titledesc { height: 90%; max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; align-content: space-evenly;}
.dc-home #top h1 {  font-size: 700%;}
.dc-home #blogdesc {font-size: 200%;}
figure { margin: 2em auto;  max-width: 97%; }
#blognav, #blogextra, #blogcustom  { max-width: 1600px; display: flex; flex-wrap: wrap;  }
div.widget { width: 18.999%; }
}


/* -------------------------------------------------------------------
HTML
----------------------------------------------------------------------*/

a { text-decoration: none; transition: all 0.2s ease-in-out; color: DarkSlateGray;}
a:hover {}

h1, h2, h3, h4, h5, h6 { font-weight: 100; }
h1 { }
h2 { }
h3 { }
h4 { }
h5 { }
h6 { }

ol, ul {list-style-position: outside;}
ol { }
ul {list-style-type: square; }
ul ul {list-style-type: circle; }
p { font-optical-sizing: auto; }
img {max-width: 100%; }  /*  responsive image that shows immer the full image: max-width: 100%; height: auto;*/
blockquote { background: transparent url(index.php?tf=img/quote.svg) no-repeat left top; padding: 6px 50px 0; min-height: 100px; 
	    font-weight: 200; font-size: 1.7375rem; line-height: 2.025rem; max-width: 80%;  margin: 1em auto; }
blockquote p { margin: 1em auto; }
figure.media-center { display: table; margin: 2em auto;}
figure.media-center figcaption { display: table-caption; caption-side: bottom;  }
figcaption { font-size: 0.8875rem; padding: 0px 20px 20px 20px;}
fieldset{ border: none;}
abbr, acronym { line-height: 1em; text-transform: uppercase; letter-spacing: 1px; border-bottom: none; cursor: help;}
code { font-family: monospace; line-height: 1em; background: Lightgrey;}
pre { background-color: transparent; font-family: monospace; font-size: 90%; white-space: normal; vertical-align: baseline;}
code { vertical-align: baseline;}
hr {}
sup {font-size: 0.9275rem; }
table {border-collapse:collapse;border-spacing:0;width:100%;display:table}
tr {text-align: left;border-bottom: 1px solid black;}
th {border-bottom: 1px solid black; }
table,th,td {border:none}

/* -------------------------------------------------------------------
TOP  
----------------------------------------------------------------------*/

.dc-post #top, .dc-page #top, .dc-category #top, .dc-tag #top, .dc-tags #top, .dc-search #top, .dc-archive #top, .dc-archive-month #top, .dc-404 #top { display: none; }

.dc-home #top { height: 100vh; background-image: url('index.php?tf=img/title.jpg');  background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; min-height: auto; 
 background-position: center; background-repeat: no-repeat;border-bottom: 1px solid #ddd; }

.dc-home #top h1 { margin: 0; color: white; backdrop-filter: blur(1px); max-width: 1000px; }
.dc-home #top h1 a { color: white; }  
.dc-home #blogdesc {font-weight: 100;  max-width: 500px; backdrop-filter: blur(1px); } 
.dc-home #blogdesc p { color: white;  }
#top h1, #blogdesc  { padding: 20px; }
#prelude {text-align: center; backdrop-filter: blur(1px); text-align: center; }
#prelude a {}

#navsearch { width: 100%; background: rgb(247, 247, 247); border-bottom: 1px solid rgb(221, 221, 221);}

#navigation { text-align: left;}
#navigation nav { padding:20px 0 !important; margin: 0 !important; min-height: 60px; }
#navigation nav ul {  max-width: 1000px; margin: 0 auto; }
#navigation nav ul li { display: inline; }
#navigation nav li { line-height: 12px; padding: 9px 30px 9px 0px; font-weight: 100; letter-spacing: 1px; font-size: 100%; text-transform: capitalize;}
#navigation nav li a:link, nav li a:visited { color: rgb(31, 31, 31); text-decoration: none; }
#navigation nav li:last-child { margin-right: 0 !important; padding-right: 0 !important; }
#navigation nav li a:hover { }

/* -------------------------------------------------------------------
WRAPPER, PAGE, MAIN, SIDEBAR, FOOTER 
----------------------------------------------------------------------*/

#page { background-color: white; }
#wrapper { }
#main {padding: 0 20px;}
.dc-post #main, .dc-page #main, .dc-category #main, .dc-tag #main, .dc-search #main,  .dc-archive-month #main, .dc-404 #main { padding-top: 40px; }  
.dc-tags #main, .dc-archive #main { padding-top: 40px; padding-bottom: 40px;}  
.dc-page #main { padding-bottom: 40px;}  
#content  { margin-bottom: 60px;}
#sidebar {}
#footer {}

#content-info { }
#content-info h2 {  font-weight: 100; letter-spacing: 1px; text-transform: capitalize;}
#content-info p {  font-weight: 100; letter-spacing: 1px; text-transform: capitalize; }
.content-inner { }
#subcategories {}
#subcategories ul li { }
#subcategories ul li a {font-weight: 100; letter-spacing: 1px; text-transform: capitalize; }

p#breadcrumb {padding: 9px 0px; }

/*--------------------------------------------------------------------
PAGINATION, NAVLINKS
---------------------------------------------------------------------*/
#navlinks {  display: flex; justify-content: space-between; } 

.pagination {text-transform: capitalize;margin: 75px auto; padding: 10px 0; text-align: center; font-weight: 400 }  
.pagination span.label{padding: 0 5px 0 0; }
.pagination span.etc{text-decoration: none;  text-align: center;}
.pagination span.this{min-width: 13px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; background: white;border-radius: 3px; padding: 5px 12px 9px 12px;}
.pagination a { border: 1px solid rgb(127, 127, 127); border-radius: 3px; color: rgb(255, 255, 255) !important; background: rgb(31, 31, 31); padding: 5px 12px 9px 12px; margin-right: 3px; }
.pagination a:hover {color: rgb(255, 255, 255) !important; background: rgb(127, 127, 127); }
.pagination .prev, .pagination .next {  border: 1px solid rgb(127, 127, 127); border-radius: 3px; color: rgb(31, 31, 31) !important; background-color: white; padding: 2px 8px; }
.pagination a.prev, .pagination a.next {  background: rgb(31, 31, 31); color: white !important; }
.pagination a.prev:hover , .pagination a.next:hover  {color: rgb(255, 255, 255) !important; background: rgb(127, 127, 127); }

/* -------------------------------------------------------------------
POST
----------------------------------------------------------------------*/

.dc-home .post-tags, .dc-home .post-info, .dc-home .post-info-co,
.dc-category .post-tags, .dc-category .post-info, .dc-category .post-info-co,
.dc-tag .post-tags, .dc-tag .post-info, .dc-tag .post-info-co,
.dc-search .post-tags, .dc-search .post-info, .dc-search .post-info-co { display: none; }

.post {margin: 4em 0 8em 0; }
.post.first { }
.post.odd { }
.day-date { margin-bottom: 3rem; font-weight: 100; letter-spacing: 1px; text-transform: capitalize; text-align: right;} /* is normally the date above the title */
h2.post-title { font-size: 3.625rem; line-height: 1.24137; margin-top: 0rem; }
.post-info {   font-weight: 100; letter-spacing: 1px; text-transform: capitalize; text-align: right; }
.post-tags { padding-left: 0; margin-bottom: 3rem; font-weight: 100;text-align: right; }
.post-tags li:first-child { padding: 2px 0px 2px 0px; word-spacing: 2px;}
.post-tags li {	display: inline;	}
.post-tags li:after {	content: ", ";}
.post-tags li:last-child:after {	content:"";	}

.post-excerpt { max-width: 800px; margin-left: auto; margin-right: auto; font-weight: 700; word-spacing: 1px; font-size: 1.1875rem; line-height: 1.57368rem; margin-bottom: 3rem;}
.post-content {max-width: 800px; margin-left: auto; margin-right: auto; word-spacing: 1px; font-size: 1.2075rem;line-height: 1.57368;}
.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6  {margin: 3rem 0; }
.post-content a { border-bottom: 1px dashed; padding-bottom: 2px;}
.post img { background: white; padding: 0px;box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.157), 0px 2px 10px 0px rgba(0, 0, 0, 0.118) !important;} 
figure a { border: 0 !important; }  /* to avoid the a href underline  */
p.read-it {max-width: 800px; margin-left: auto; margin-right: auto; word-spacing: 1px; font-size: 1.2075rem; }

.post-info-co { font-weight: 100; letter-spacing: 1px; text-transform: capitalize;text-align: right;  }
.post-info-co a { }

.footnotes { font-size: 95%; margin-top: 4em; font-weight: 100; }
.footnotes h4 { border-top: 1px solid #ddd; padding-top: 12px;max-width: 200px; margin: 0;}

.post-info-co { }
.comment_count { }
.pings_count { }
.attach_count { }

#attachments { }
#attachments h3 { }
#attachments ul { }
#attachments ul li { }
#attachments li.audio { }
#attachments li.package { }
#attachments li.text { }

.dc-tags ul.tags { padding-left: 0; }
.dc-tags .tags li { list-style: none; display: inline-block; padding: 10px 10px 10px 0px;}

.page-info { margin-top: 6em;font-weight: 100; }
.dc-page .post {
    margin-bottom: 2em;
}

/* -------------------------------------------------------------------
COMMENTS, ATTACHMENTS 
----------------------------------------------------------------------*/
#attachments h3,#comment-form h3, #comments h3, #comments-feed h3 { margin: 0; font-size: 2.625rem;}

#attachments { margin: 3em auto; }
#attachments ul {  }
#attachments ul li {list-style: circle; list-style-position: inside;  }

#comment-form  {padding: 0}
#comment-form fieldset { padding: 0px; margin: auto;}
#comment-form .field label {    display: block; text-indent: 4px;}
#comment-form #pr, #comments {  }

#comments { margin: 3rem auto 4rem auto; }
a.comment-number { padding: 12px; height: 50px; width: 50px; border-bottom: 0 !important; border-radius: 25px; background: rgb(31, 31, 31); color: white !important;
    display: inline-block; text-align: center; vertical-align: middle; margin-right: 1.2rem;font-weight: 400;}
#comments dt { font-size: 0.999rem;  font-weight: 200; padding-top: 1.25rem;}
#comments dt a { border-bottom: 1px dashed; padding-bottom: 2px; }
#comments dl {}
#comments dd { margin-left: 0; padding-bottom: 1.25rem; }
#comments dd p {  }
#comments .first { }
#comments .odd { }
#comments .me { }

#pings {margin-top: 3em;  }
#pings dl { }
#pings dt { }
#pings dd { }
#pings .first { }
#pings .odd { }
#pings .me { }

.form-help { }

#ping-url { }
#comments-feed { }

#pr dl { }
#pr dd { }

label { }
p.field input  {width: 50%; background: white; color: rgb(31, 31, 31); padding: 8px !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; backdrop-filter: blur(1px);  }
p.field textarea  {width: 100%;  background: white;  padding: 8px !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; backdrop-filter: blur(1px);   }
p.field input:focus, p.field textarea:focus{border: 1px solid rgb(221, 221, 221); outline: none; }
p.buttons input  { padding: 8px 15px; margin: 30px 0px; color:rgb(247,247,247); border: 1px solid rgb(221, 221, 221); border-radius: 3px; background-color: rgb(31, 31, 31); 
	font-size: 95%; font-weight: 400; text-transform: capitalize;backdrop-filter: blur(1px);   }
p.buttons input:hover { background: rgb(127, 127, 127); border: 1px solid rgb(221, 221, 221);  }
p#pr.error {color: Red;}

span.jstb_icon { color: rgb(31, 31, 31) !important;} /* commonWikibar color on iOS */
button.jstb_link, button.jstb_bquote, button.jstb_pre, button.jstb_ol, button.jstb_ul, button.jstb_br, button.jstb_foreign, button.jstb_code, button.jstb_quote, button.jstb_del, button.jstb_ins, button.jstb_em, button.jstb_strong  
{ border: 1px solid rgb(221, 221, 221) !important;} 

.totop { padding: 0 20px; text-align: center; position: relative; top: 54px; z-index: 2; }

/* -------------------------------------------------------------------
FEED, PRE
----------------------------------------------------------------------*/
.feed { padding-left:20px; background: transparent url(index.php?tf=img/feed.svg) no-repeat left center; }

/*.dc-tags .tag0, .tags .tag0 { font-size: 85%; }
.dc-tags .tag10, .tags .tag10 { font-size: 90%; }
.dc-tags .tag20, .tags .tag20 { font-size: 95%; }
.dc-tags .tag30, .tags .tag30 { font-size: 100%; }
.dc-tags .tag40, .tags .tag40 { font-size: 105%; }
.dc-tags .tag50, .tags .tag50 { font-size: 110%; }
.dc-tags .tag60, .tags .tag60 { font-size: 115%; }
.dc-tags .tag70, .tags .tag70 { font-size: 120%; }
.dc-tags .tag80, .tags .tag80 { font-size: 125%; }
.dc-tags .tag90, .tags .tag90 { font-size: 130%; }
.dc-tags .tag100, .tags .tag100 { font-size: 135%; }
*/

/* messages d'erreur */
.error {border: 0; background-color: transparent; padding: 0.5em; }
.error ul { }
.error li {	list-style: square; }
	
.left { float: left; margin-right: 1em; }
.right { float: right; margin-left: 1em; }
.center { margin-left: auto; margin-right: auto; }
.left-text { text-align: left; }
.right-text { text-align: right; }
.center-text { text-align: center; }
.little-text { font-size: .8em;}
.little-upper-text { font-size: .8em; text-transform: uppercase; }

/* -------------------------------------------------------------------
SIDEBAR
----------------------------------------------------------------------*/

#sidebar { background: rgb(31,31,31); color: rgb(247,247,247);  padding: 40px 0px 0px 0px; font-size: 100%; line-height: 1.5; z-index: 1; }
#blognav, #blogextra, #blogcustom { margin: auto;}
#blognav { padding: 30px 20px 15px 20px;}
#blogextra { padding: 15px 20px 30px 20px; }
div.widget { display: inline-block; vertical-align: text-top; padding: 20px;}
div.widget.tags { width: 100% !important; }
div.widget h2, div.widget h3 { font-size: 130%; font-weight: 100;  }
div.widget a {color: rgb(247,247,247); }
.dc-home #sidebar {  }
.dc-home div.widget a, .dc-home div.widget { }

#search.widget { padding-left: 20px;  padding-right: 20px;  background: transparent;}
#search { background: rgb(247, 247, 247);}
#search.widget p { display: flex; justify-content: space-between;margin: 0.5em; }
#search.widget form { background: #ffffff; font-size: 100%; padding: 0 !important; margin: 4px 2px; border: 1px solid #ddd; border-radius: 5px;}
#search.widget input:active { border: #f7f7f7;  }
#search.widget input {width: 90.66666%;  background: transparent;  font-size: 100%; border: none; padding: 2px !important; outline-color: #ffffff; }
#search.widget input[type=submit] {width: 8.33333%; background: transparent url(index.php?tf=img/find.svg) no-repeat center center; border: none; color: transparent;} 
#search.widget input[type=submit]:hover {background: transparent url(index.php?tf=img/find.svg) no-repeat center center;  }

div.widget.text p { }

div.widget ul {  padding: 0; margin: 0; }
div.widget li { list-style-type:none; margin-bottom: 8px; }
div.widget ul ul {}
div.widget li li { list-style-type: circle;  list-style-position: inside; padding-left: 12px !important;}
div.widget.tags li { display:inline-block; list-style-type: none; border-radius: 3px; line-height: 1.5em; padding: 4px 8px 4px 8px;
    background-image: none; margin: 0 8px 8px 0; backdrop-filter: blur(1px);  }
div.widget.tags p a { padding-left: 5px;}

/* -------------------------------------------------------------------
FOOTER
----------------------------------------------------------------------*/
#footer { margin: 0 !important; min-height: 60px; color: rgb(247,247,247); background: rgb(31, 31, 31); text-align: center;}
#footer a { color: white; }
#footer p { color: white;position: relative; bottom: 16px; margin: 0 auto !important; padding: 50px 20px 20px 20px !important; max-width: 1000px;  line-height: 12px; font-weight: 100;  }

/* -------------------------------------------------------------------
SPECIAL PAGES
----------------------------------------------------------------------*/
.dc-404 {}
.dc-archive {}
.dc-archive div.content-inner ul li { display: inline-block; list-style-type:none; margin-right: 15px; }
.dc-archive-month {}
.dc-category {}
.dc-page {}
.dc-post {}
.dc-search {}
.dc-tag {}
.dc-tags ul.tags { padding-left: 0; }
.dc-tags .tags li { list-style: none; display: inline-block; padding: 10px 10px 10px 0px;}

/* -------------------------------------------------------------------
CLEAR: BOTH
----------------------------------------------------------------------*/
.post-content, .footnotes, .attachments, .post-info-co, #comments, #footer { clear:both; }