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

@file		  screen.css
@description  Feuille de styles globale
@version	  20090527

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

@import url("./reset.css");

/*
 * @section Basic
 ******************************************************************************/

html {
  font-size: 62.5%;
}

html, body {
  height: 100%;
}

body {
  font-family: Arial, Verdana, sans-serif;
  font-size: 120%;
  line-height: 1.5;
  color: #fffeea;
  background: #5a4f44 url("../img/interface/bg-body.png");
  position: relative;
  /*behavior: url("/js/ie6/csshover.htc");*/
}

p,ul,ol,table { margin-bottom: 15px; }
p.flickr { margin-bottom: 30px; margin-top: 30px; }
ul { margin-left: 20px; }
a { text-decoration: none; cursor: pointer; color: #fffa9d; }
a:focus { outline: 1px dotted; }
a:visited { color: #fffa9d; }
a:hover, a:focus { color: #fff; }
a *, button * { cursor: pointer; }
hr { display: none; }
small { font-size: 90%; }
input, select, button, textarea, option { font-family: Arial, "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; font-size: 100%; }
button, label, select, option, input[type=submit] { cursor: pointer; }
.groupe:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .groupe {display: inline-block;}
/* Hides from IE-mac \*/ * html .groupe {height: 1%;} .groupe {display: block;} /* End hide from IE-mac */
sup { font-size: 70%; line-height: 1; vertical-align: super; }

button::-moz-focus-inner { border: 0; padding: 1px; }

span.amp {
  font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
  font-weight: normal;
  font-style: italic;
  font-size: 1.2em;
  line-height: 0.8;
}

h1,h2,h3,h4,h5,h6 {
  line-height: 1.1;
}

/*
 * @section Layout
 ******************************************************************************/

#wrap {

}

#page .page-inner {
  width: 960px;
  margin: 0 auto;
  background: url("../img/interface/bg-page.gif") repeat-y top center;
}


/*
 * @section Utilitaires
 ******************************************************************************/

#utilitaires {
  width: 100%;
  min-width: 960px;
  white-space: nowrap;
}

#utilitaires .utilitaires-inner {
  width: 960px;
  margin: 0 auto;
  text-transform: uppercase;
  font-weight: bold;
}

#utilitaires ul {
  margin: 0;
  padding: 15px 0 0 0;
  border-bottom: 2px solid #484036;
}

#utilitaires ul li {
  float: left;
  width: 158px;
  border-right: 2px solid #484036;
  text-align: center;
  display: inline;
}

#utilitaires ul li.apropos {
  margin-left: 479px;
  border-left: 2px solid #484036;
}

#utilitaires ul li a {
  display: block;
  outline: none;
  padding: 15px 0 11px;
}

#utilitaires ul li.rss {
  border-right: none;
}

#utilitaires ul li.rss a span {
  background: url("../img/interface/ico-rss.gif") no-repeat 0 1px;
  padding: 1px 1px 1px 17px;
  height: 1%;
}

#utilitaires ul li.active a {
  color: #3d362f;
}


/*
 * @section Logo
 ******************************************************************************/

#logo {
  width: 100%;
  min-width: 960px;
  background: url("../img/interface/bg-logo.png") no-repeat 50% 11px;
}

#logo h1, #logo p {
  margin: 0;
}

#logo a {
  width: 960px;
  height: 218px;
  display: block;
  text-indent: -9999px;
  outline: none;
  margin: 0 auto;
  border-bottom: 2px solid #484036;
}


/*
 * @section Contenu
 ******************************************************************************/

#contenu {
  width: 639px;
  float: left;
}

#contenu .contenu-inner {
  padding: 14px 14px 0;
}

/*
 * @section Sidebar
 ******************************************************************************/

#sidebar{
  width: 319px;
  float: right;
}

#sidebar .sidebar-inner {
  padding: 30px 14px;
}


/*
 * @section Pied
 ******************************************************************************/

#pied {
  width: 100%;
  min-width: 960px;
  font-weight: bold;
  color: #3d362f;
}

#pied .pied-inner {
  margin: 0 auto;
  border-top: 2px solid #484036;
  width: 960px;
}

#pied .pied-inner p {
  padding: 14px 0 14px 655px;
  margin: 0;
}


/*
 * @section Billets
 ******************************************************************************/

.billets {
  /*margin-bottom: -8px;*/
}

.billets .billet {
  margin: 0 0 30px;
  position: relative;
}

body.billet-single .billet {
  margin-right: -14px;
  border-bottom: 2px solid #484036;
  padding-right: 14px;
  margin-bottom: 30px;
}

.billets .billet .meta {
  width: 130px;
  float: left;
  background: url("../img/interface/bg-cremage.png") no-repeat top right;
  min-height: 75px;
  margin-left: -124px;
  padding-left: 124px;
  text-align: right;
  padding-right: 15px;
  padding-top: 17px;
}

.billets .billet .meta .date {
  font-size: 103%;
  margin-bottom: 11px;
}

.tags {
  text-transform: uppercase;
  font-size: 85%;
  line-height: 1.9;
  font-weight: bold;
  margin: 0 0 15px;
}

.tags a {
  font-size: 100% !important;
  margin-left: 0.4em;
  white-space: nowrap;
}

#sidebar .tags a {
  margin-left: 0;
  margin-right: 0.4em;
}

.post-categories {
  margin: 0 0 15px;
  text-transform: uppercase;
  font-size: 85%;
  font-weight: bold;
}

.post-categories li {
  margin: 0 0 10px;
  white-space: nowrap;
}

#sidebar .post-categories li {
  float: left;
  padding: 0 5px 0 0;
}

.post-categories a {
  background: #fffa9d;
  color: #3d362f;
  padding: 2px 4px;
}

.post-categories a:hover {
  background: #fff;
}

.billets .billet .meta .commentaires {
  font-weight: bold;
}

.billets .billet .contenu {
  width: 450px;
  float: right;
  padding: 8px 0 0;
}

.billets .billet .contenu h1 {
  font-size: 180%;
  line-height: 1.3;
  margin: 0 0 13px;
  font-weight: normal;
}

.billets .billet .contenu h1,
.billets .billet .contenu h1 a:hover {
  color: #c1bcab;
}

.billets .contenu .more-link {
  font-weight: bold;
  float: left;
}

.billets .contenu .commentaires {
  text-align: right;
}

.billets .contenu img {
  width: 440px;
  height: auto !important;
  min-height: 91px;
  border: 5px solid #484036;
  display: block;
  margin: 0;
  -ms-interpolation-mode:bicubic;
}

.billets .contenu img.exception {
  width: auto !important;
}

.billets .cremage-flickr {
  display: block;
  position: relative;
}

.billets .cremage-flickr span {
  display: none;
  position: absolute;
  width: 67px;
  height: 91px;
  background: url("../img/interface/bg-cremage-flickr.png") no-repeat top left;
  top: 26px;
  left: -21px;
  z-index: 60;
}

.billets .cremage-flickr img {
  position: relative;
  z-index: 50;
}

.billets .navigation {
  padding: 0 5px 30px 161px;
}

.billets .navigation .alignright { float: right; }
.billets .navigation .alignleft { float: left; }

/*
 * @section Sidebar
 ******************************************************************************/

#sidebar .boite h2 {
  font-size: 140%;
  margin: 0 0 15px;
  font-weight: normal;
}

#sidebar .boite-photos h2 span {
  float: left;
  background: url("../img/interface/ico-flickr.gif") no-repeat 100% 6px;
  padding: 0 21px 0 0;
}

#sidebar .boite {
  margin: 0 0 30px;
}

#sidebar .boite-categories {
  margin-bottom: 25px;
}

#sidebar .post-categories,
#sidebar .tags {
  margin: 0;
}

#sidebar .post-categories li {
}

#sidebar .recent-posts {
  margin: 0;
  font-weight: bold;
  line-height: 1.4;
}

#sidebar .recent-posts li {
  margin: 0 0 15px;
}

#sidebar .recent-posts span {
  display: block;
}

#sidebar .boite-photos ul {
  margin: 0;
}

#sidebar .boite-photos ul li {
  margin: 0 0 5px;
  padding: 0 5px 0 0;
  float: left;
}

#sidebar .boite-photos ul li.break {
  padding-right: 0;
}

#sidebar .boite-photos ul li img {
  display: block;
  border: 2px solid #484036;
  -ms-interpolation-mode:bicubic;
}

#sidebar .boite-billets p {
  color: #c1bcab;
}

/*
 * @section Page À propos
 ******************************************************************************/

body.page-apropos #contenu .contenu-inner {
  padding-top: 26px;
}

body.page-apropos .flickr {
  float: left;		
  margin: 0 30px 30px 0;
}

body.page-apropos .definitions {
  color: #c1bcab;
  font-size: 130%;
  line-height: 1.3;
}

body.page-apropos .definitions li {
  margin: 0 0 12px;
}

body.page-apropos .definitions span {
  display: block;
}

#sidebar .boite-apropos h2 {
  /*margin-bottom: 12px;*/
}

#sidebar .boite-apropos p {
  /*margin: 0;*/
}

#sidebar .boite-apropos .courriel {
  font-weight: bold;
  color: #fffa9d;
}

#sidebar .boite-apropos .courriel em {
  color: #3d362f;
  font-style: normal;
}

/*
 * @section Commentaires
 ******************************************************************************/

.nocomments {
  padding-left: 161px;
}

.commentlist .comment-author {
  float: left;
  width: 130px;
  text-align: right;
}

.commentlist .comment-author2 {
  text-align: left;
  margin-top: -1em;
}

.commentlist .comment-author2 cite {
  font-style: normal;
  font-weight: bold;
}

.commentlist .comment-text {
  float: right;
  width: 450px;
}

.commentlist li.comment {
  margin: 0 0 15px 0;
}

.comment-author .avatar {
  border: 2px solid #484036;
  -ms-interpolation-mode:bicubic;
}

.comment-meta {
}

.comment-meta cite {
  font-style: normal;
  margin-right: 0.4em;
  color: #C1BCAB;
}

.comment-meta .permalink {
  color: #fff;
  font-weight: bold;
}

#comments h2 {
  padding: 0 0 0 160px;
  font-size: 140%;
  line-height: 1.3;
  margin: 0 0 15px;
  font-weight: normal;
}

.toggle-respond,
#respond {
  padding: 0 0 0 161px;
}

.toggle-respond {
  margin: 30px 0;
  text-align: right;
  font-weight: bold;
}

.boite-inscription .champ,
#commentform .champ {
  border-bottom: 2px solid #c1bcab;
  padding: 0 0 5px 0;
  margin: 0 0 10px;
}

.boite-inscription .champ {
  margin-bottom: 15px;
}

.boite-inscription .champ label,
#commentform .champ-textarea label,
#commentform .champ label {
  float: left;
  color: #c1bcab;
  padding-right: 5px;
  font-weight: bold;
}

#commentform .champ label small {
  font-weight: normal;
  text-transform: uppercase;
  font-size: 90%;
}

.boite-inscription .champ input,
#commentform .champ input {
  float: left;
  border: none;
  background: transparent;
  padding-top: 2px;
  color: #fffeea;
  width: 62%;
}

#commentform .champ-textarea textarea {
  border: 2px solid #c1bcab;
  padding: 5px;
  width: 437px;
  height: 10em;
  clear: both;
  margin: 6px 0 0 0;
}

#sidebar .boite-inscription input.bouton,
#commentform .champ-bouton input {
  float: right;
  background: #fffa9d;
  color: #3d362f;
  font-weight: bold;
  padding: 2px 3px 1px;
  font-size: 85%;
  text-transform: uppercase;
  border: none;
}

/*
 * @section Listing de billets
 ******************************************************************************/

h1.listing-titre {
  margin: 16px 0 15px 160px;
  font-size: 140%;
  color: #C1BCAB;
  font-weight: normal;
}

h1.listing-titre strong {
  color: #FFFEEA;
  font-weight: normal;
}

ul.listing-billets {
  margin: 0;
}

ul.listing-billets li {
  margin: 0 0 30px;
}

ul.listing-billets li .infos {
  margin: 0 0 0 160px;
}

ul.listing-billets li span.image {
  float: left;
  margin: 3px 30px 0 0;
  position: relative;
  width: 126px;
  height: 126px;
  overflow: hidden;
  border: 2px solid #474035;
  display: block;
}

ul.listing-billets li span.image img {
  position: absolute;
}

ul.listing-billets li h2 {
  font-size: 180%;
  margin: 0 0 15px;
  font-weight: normal;
}

ul.listing-billets li p.date {
  margin: 0;
  font-weight: bold;
  color: #FFFEEA;
}