/* -------------------------------------------------------
This file is part of the Serif 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: "DejaVu Sans"; src: url(fonts/DejaVuSans.ttf); }
@font-face{font-family: "DejaVu Serif"; src: url(fonts/DejaVuSerif.ttf); }
@font-face{font-family: "DejaVu Mono"; src: url(fonts/DejaVuSansMono.ttf); }
 
/* -------------------------------------------------------------
    1. STRUCTURE
	Media   
--------------------------------------------------------------- */
@media only screen and (max-width:992px){
body { font-family: "DejaVu Sans", sans-serif; -webkit-text-size-adjust:105%;}
#top nav a { font-size: 80% !important; }
#content-info h2, #navlinks ,.pagination { font-size: 90% !important; }
blockquote { margin: 2em;  }
#sidebar, #sidebar nav, #sidebar h2, #sidebar h3 { font-size: 90%; text-align: left;}
div.widget {float: none; margin: 1em; width: 100%;}
div.widget.weatherplus h2 {display:none;}
}

@media only screen and (min-width:993px){
body { font-family: "DejaVu Serif", Georgia, serif; }
#page , #topwidth { width: 80%; max-width: 1400px;} 
#top nav a, #content-info h2, #navlinks ,.pagination { font-size: 100% !important; }
blockquote { margin: 2em auto;  }
}

@media only screen and (max-width:1024px){
#topwidth { padding: 3%; }
.blogname { font-size: 110%; float: none; text-align: left !important;}
.post-info { width: 100%; float: none; padding: 20px; }
.post-title {line-height: 1.3em; margin: 0px 20px 20px 20px; font-size: 180%; }
.post p, #content-info p  {  margin: 2em 20px; }
h1,h2,h3,h4,h5,h6, ul, ol, p#pr.message, p#pr.error, p#breadcrumb, #navlinks , .content-inner p, .share p, .pagination, .dc-archive-month .post-content p, #attachments, .dc-archive .content-inner, dd.comment-preview, #comments, #commentsform, pre, p.field, .form-help, .remember, .buttons, #ping-url, #comments-feed 
{ margin-left: 20px; margin-right: 20px; }
}

@media screen and (min-width:1025px) and (max-width: 1367px){
#topwidth { padding: 0 2.5%; }
.blogname {  float: left; }
#navlinks { padding: 1em 0px;}
.pagination { padding: 1em 0px;}
.post-info { width: 20%; float: left; padding-right: 3%; padding-left: 3%;}
.post-info p { width: 100% !important;}
.post-title {line-height: 1.3em; margin: 0em auto 1.1em auto; max-width: 60%;  font-size: 240%; }
.post p, #content-info p { font-size: 110%;  margin: 2em auto; width: 60%;}
h1,h2,h3,h4,h5,h6, ul, ol, p#pr.message, p#pr.error, p#breadcrumb, #navlinks , .pagination, .dc-archive-month .post-content p, .share p, .dc-archive .content-inner, .content-inner p, #attachments, dd.comment-preview, #comments, #commentsform, pre, p.field, .form-help, .remember, .buttons, #pings, #ping-url, #comments-feed 
{ margin-left: auto;  margin-right: auto; width: 60%; }
#sidebar div.widget h2, #sidebar div.widget h3 {font-size: 100%; }
#sidebar div.widget ul { text-align: left;}
#sidebar div.widget ul ul { text-align: left;}
#blognav div.widget {float: left; margin: 15px; width: 21%; min-height: 200px;}
#blognav, #blogextra, #blogcustom {clear:both;}
div.widget.weatherplus {text-align: left;}
div.widget.weatherplus h3 {margin: 0; padding: 2px; }
}

@media screen and (min-width:1368px) {
#topwidth { padding: 0 2.5%; }
.blogname {  float: left; }
#navlinks { padding: 1em 0px;}
.pagination { padding: 1em 0px;}
.post-info { width: 20%; float: left; padding-right: 3%; padding-left: 3%;}
.post-info p { width: 100% !important;}
.post-title {line-height: 1.3em; margin: 0em auto 1.1em auto; width: 60%; font-size: 240%; }
.post p, #content-info p { font-size: 110%;  margin: 2em auto; width: 60%;}
h1,h2,h3,h4,h5,h6, ul, ol, p#pr.message, p#pr.error, p#breadcrumb,  #navlinks , .pagination, .dc-archive .content-inner, .content-inner p, .dc-archive-month .post-content p, .share p, #attachments, dd.comment-preview, #comments, #commentsform, pre, p.field, .form-help, .remember, .buttons, #pings, #ping-url, #comments-feed 
{margin-left: auto;  margin-right: auto; width: 60%; }
#sidebar div.widget h2, #sidebar div.widget h3 {font-size: 110%; }
#sidebar div.widget ul { text-align: left;}
#sidebar div.widget ul ul { text-align: left;}
#blognav div.widget {float: left; margin: 15px; width: 21%; min-height: 200px;}
#blognav, #blogextra,#blogcustom {clear:both;}
div.widget.weatherplus {text-align: left;}
div.widget.weatherplus h3 {margin: 0; padding: 2px; }
}

@media screen and (min-width:1599px) {
.post p, #content-info p  { font-size: 120%;  margin: 1em auto; width: 60%; line-height: 1.7em;}
}

@media screen and (min-width:1921px) {
.post-title {width: 60%; }
.post p, #content-info p  {  margin: 1em auto; max-width: 60%;  }
h1,h2,h3,h4,h5,h6, ul, ol, p#pr.message,p#pr.error, p.breadcrumb, .dc-archive .content-inner,  .content-inner p,#attachments, .share p, comments, dd.comment-preview, #commentsform, pre, p.field, .form-help, .remember, .buttons, #pings, #ping-url, #comments-feed 
{margin-left: auto;  margin-right: auto; width: 60%;  line-height: 2em;}
}

#attachments h3, #attachments ul, #footnotes h4, #comments h3, #pings h3 { width: 100% !important; }

/* ------------------------------------------------------------
   1. STRUCTURE
   Bloc de styles à supprimer, ne servent qu'aux premiers tests 
------------------------------------------------------------- */
body { background-color: #EFEFEB; color: #4a4a45; font-size: 100%; line-height: 1.5em; text-rendering: geometricPrecision; }

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

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


h1,h2,h3,h4,h5,h6 { clear:both; font-weight: 100; }
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 { max-width: 540px; background-color: #cdf2f2; border-radius: 1em; padding: 0.5% 2.5%; }
blockquote  a { font-weight: 100 !important;}
blockquote  p { width: 100% !important; margin: 0.5em 0 !important; }
blockquote  ol, blockquote  ul {list-style: circle !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: 2px;}
#sidebar input.submit { width: 20%; padding: 1px;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 { font-family: "DejaVu Mono", mono; white-space: normal; }
code { font-family: "DejaVu Mono", mono; white-space: normal; }
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 {max-width: 90%; font-size: 80%; font-family: "DejaVu Sans", sans-serif; margin: 1em auto; text-align: center; }
figure { text-align: center; margin: 1em auto; }

legend {border:0;padding:0}

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


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

#page { background-color: white; margin: 0 auto; } 
#wrapper {text-align: left; padding: 1em 0 0 0;}

p#breadcrumb { margin: 0 auto; padding: 1em 0; }


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

#top { background-color: #464b4f; height: auto; width: 100%;}

#topwidth { margin: 0 auto; }
.blogname {  font-size: 130%; text-transform: uppercase; margin: 0; padding: 8px 8px; }
.blogname a { color: #ffffff;  font-weight: 100;}
.site-baseline {padding: 2%; display: none;}


#top nav  { overflow: hidden;  margin: 0 auto; position: relative; }
#top nav ul { font-size: 90%; display: inline; padding: 0; margin-left: 0px; margin-right: 0px;    }
#top nav a { float: left; display: block; color: white;  text-align: center;  padding: 8px 16px; text-decoration: none; }
#top nav a:hover { color: lightgrey; }


#prelude { color: white; }

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

#content {min-height: 400px;}
#content-info h2 { font-size: 130% !important;  border-bottom: 1px dotted #ebebeb; padding-bottom: 20px; }
#navlinks { border-bottom: 1px dotted #ebebeb; padding-bottom: 20px !important;  }

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

.post { padding: 1em 0; margin-top: 2em; margin-bottom: 3em; }
.dc-post .post { margin-bottom: 1em !important; }
.day-date { font-size: 80%; display: none; }
.post-title {font-weight: 700; }
.post-info, .page-info {font-size: 80%;  margin-bottom: 2em;}
.page-info {display: none;}
.post-info p {margin: 0; }
.author, .date {}
.author, .on, .time {margin-right: 0em; display:none; }
.date {margin-right: 1em;}
.category {background : transparent url(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(img/icon_comments.png) no-repeat left center; margin-right: 0.5em; }
.ping_count {display:none; background : transparent url(img/icon_trackbacks.png) no-repeat left center; padding: 2px 0 0 18px; margin-right: 0.5em; }
.attach_count { display:none; background : transparent url(img/icon_attach.png) no-repeat left center; padding: 2px 0 0 18px; margin-right: 0.5em; }
.permalink {background : transparent url(img/icon_permalink.png) no-repeat left center; padding: 2px 0 0 18px; margin-right: 0.5em; }
ul.post-tags { display: inline; margin: 0 !important; font-size: 110%;}
ul.post-tags {background : transparent url(img/icon_tags.png) no-repeat left center; padding: 2px 0 0 18px; }
ul.post-tags li { padding: 0;}
.post-tags li{display:inline-block;}
.post-tags li:after {content: ", ";}
.post-tags li:last-child:after {content:"";}
.post-excerpt, .post-content {line-height: 1.7em; }
.post-excerpt a, .post-content a {border-bottom: 1px dotted #4a4a45; padding-bottom: 1px; font-style: italic;}
.post-excerpt a img,.post-content a img, figure a {border-bottom: 0px dotted #4a4a45 !important;  padding-bottom: 0px !important;  }
.post-excerpt ol, .post-content ol{list-style-type: upper-roman;}
 .post-excerpt ul, .post-content ul {list-style-type: circle; }
#attachments ul { padding: 0;}
#attachments ul li { }
#attachments li.audio { }
#attachments li.package { }
#attachments li.text { }

div#center { max-width: 90%; margin-left:auto; margin-right:auto; }

/* ------------------------------------------------------------
	7. COMMENTS, PINGS
------------------------------------------------------------- */

#comments h3, #comment-form h3 {margin-top: 5em; font-weight: 700; }
#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;}
dd.comment-preview {margin-bottom: 2em;}

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

#sidebar { background-color: #464b4f; color: #fff; padding: 35px; margin-top: 2em;}
#sidebar h2, #sidebar h3 { margin: 0 !important;  }
#sidebar a {  color: #a9a9a9; }
#sidebar a:hover { color: #fff; }
#blognav { padding: 1em 0 2em 0;}
#blogextra { padding: 2em 0 1em 0;}

div.widget ul {list-style-type: none; padding: 0; margin: 0 !important; }
div.widget ul ul {padding-left: 20px;}
div.widget.tags li {display: inline;}

/* boites du menu des widgets livres avec Dotclear */
div#search.widget { }
div#search.widget form { }
div#search.widget input[type=text] { width: 71.66666%; background-color: #e9e9e9; border: 0px; border-radius: 3px; } /* ou #search #q */
div#search.widget input[type=submit] {width: 25.33333%; background-color: #e9e9e9; border: 0px; border-radius: 3px; } /* ou #search .submit */

div#topnav.widget { }
div.topnav-arch.widget { }
div.topnav-home.widget { }

div.widget.selected { }
div.widget.lang { }
div.widget.categories { }
div.widget.syndicate { }
div.widget.feed {	} 
div.widget.lastposts { }
div.widget.lastcomments { }
div.widget.pages { }
div.widget.text { }
div.widget.text span {clear:both;}
div.widget.links { }
div.widget.simple-menu { }

div.tags { }
div.widget.tags ul { width: 100% !important;}
div.tags li { }
/* a completer separement ou globalement pour le sidebar et la page 
spécifique des tags avec les differentes class des tags en fonction 
de leur frequence - voir 9/ classes communes */

/* ------------------------------------------------------------
	8.1 PLUGIN SPECIFIQUES
------------------------------------------------------------- */
.external-link { }
a img.external-link {cursor: pointer; margin:0;box-shadow: none !important;}
.external-link a img { } /* également .post-content a img */

div.widget.shortArchives  { }

.gravatar { }

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

#footer { font-size: 90%;  background: #30373a; height: auto;}
#footer p {text-align: right; padding: 10px; margin: 0; color: white;}
#footer a { text-transform: uppercase; color: white;}

#gotop {display: none;z-index: 1000;position: fixed;bottom: 0;right: 0.5em; width: auto; padding: 0.25em 0.75em;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:#333333;color: white;font-size:90%;text-align: center; }
#gotop a, #gotop a:link, #gotop a:hover, #gotop a:active {background: transparent;color:white; }


/* ------------------------------------------------------------
	10. CLASSES COMMUNES
------------------------------------------------------------- */

/* class sur les liens rss (on peut y placer l'icone
feed.png a piocher dans le theme par defaut par ex.) */

.feed { padding-left:20px;background : transparent url(img/icon_feed.svg) no-repeat left center;	 }


/* tags dans le sidebar et dans la page les regroupant
(exemple ici pour un nuage) */
.dc-tags ul.tags {
	padding-left: 0 !important;
}
.dc-tags #content ul li, .dc-tags #content ul li a, .tags ul li, .tags ul li a {
	display: inline;
	width: auto;
	padding-left: 0;
	padding-right: 4px;
	background: transparent;
	line-height: 1.5em;
}
.tags ul li a:hover {
	background-image :none;
}
.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 : 1px solid #c44;
	background : #df0;
	padding : 0.5em;
	}
.error ul {
	padding-left : 20px;
	}
.error li {
	list-style : square;
	}

/* exemples de ceux que j'ajoute souvent */
.left { float:left; margin-right:1em; }
.right { float:right; margin-left:1em; }
.center { margin-left:auto; margin-right:auto; }
.justify{text-align:justify;}
.left-align{text-align:left;}
.right-align{text-align:right;}
.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;}
.top{top:0}
.bottom{bottom:0}
.vertical{word-break:break-all;line-height:1;text-align:center;width:0.6em}

/* ------------------------------------------------------------
	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-page  h3 { margin-top: 4em !important;}
.dc-categories { }
.dc-category { }
.dc-archive .content-inner {text-align: left; }
.dc-archive h4 { padding: 4px 0;  font-size: 120%; margin-bottom: 0.5em; margin-left: 0 !important; font-weight: 700;}
.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 2em;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 1.5em 0 0; }
#by-date div { width: 28.99%; 	}
#by-date ul {margin-bottom: 1.5em;}
#by-date span {}
#by-date ul, #by-tag ul, #by-cat ul {	list-style:none; }
.dc-archive-month { }
.dc-tags { }
.dc-tag { }
.dc-404 .content-inner { min-height: 200px; }
.dc-404 .content-inner p { margin-top: 40px; }
.dc-search { }

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