/*********************************************************
* CSS screen
* 
* name:     TRiplex 
*
* date:     2008.08.30
* author:   erational <http://www.erational.org>
* version:  0.1
* licence:  GPL
**********************************************************/
  

/*-----------------------------------------------------------------------------------------------
  global styles
-----------------------------------------------------------------------------------------------*/
* {	padding:0;	margin:0;}
body {	background:#fff;color:#000;font-family:Helvetica, Arial,Verdana, Arial, sans-serif;}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:0; padding:0;	font-weight:normal;}
li, dd { margin-left:5%; }
fieldset { padding: 0; border:0px solid #fff;}
label {display:block;margin-top:0.4em;}
select option{ padding:0 5px; }
.hide, .print-logo, .close-button{ display:none; }
.left{ float:left; }
.right{ float:right; }
.clear{ clear:both; height:1px; font-size:1px; line-height:1px; }
a{ color:#000; text-decoration:none;}
a:hover{	color:#aaa;}
a img{ border:none; }


/*-----------------------------------------------------------------------------------------------
  banner
-----------------------------------------------------------------------------------------------*/
#banner { height:80px;padding:10px 0;font-family:Garamond, Didot, Futura, serif;color:#777;}
#banner h1 { font-size:3.0em;line-height:100%;letter-spacing:0.2em;line-height:100%;}
#banner h2 { font-size:.9em;line-height:100%;padding-left:2px;letter-spacing:0.1em;}


/*-----------------------------------------------------------------------------------------------
  navbar
-----------------------------------------------------------------------------------------------*/
#navbar { 
   margin:-100px auto 10px auto;  
  height:80px;  
}
#navbar ul {list-style:none;margin:0 180px 0 0;float:right; border-left:1px solid #eee;padding-left:10px;width:100px;}
#navbar ul li {display:inline;float:left;}
#navbar ul li a {font-size:0.8em;padding:1px 2px;text-align:left;display:block;color:#777;width:100px;}
#navbar ul li a.on {color:#000;}  
#navbar ul li a.contact {color:#f60;font-weight:bold;}
#navbar ul li a:hover {color:#000;}

/*-----------------------------------------------------------------------------------------------
  main
-----------------------------------------------------------------------------------------------*/
#main {font-size:0.9em; }
#main a {color:#777;}
#main a:hover {color:#000;}
#main h1 { letter-spacing:0.2em; font-size:1.6em;color:#777;line-height:120%;}
#main h2 { letter-spacing:0.2em; font-size:1.6em;}
#main h2 a { color:#000;}
#main h2 a:hover {color:#777;}
#main ul {margin:0 0 0.8em 0;line-height:1.5em;}
#main p {margin:1em 0;line-height:1.25em;}
#main p.pagination {font-size:0.9em;}

#main .col_ter  { float:left;	width:31%; margin-right:2%;}  /* layout 3 col: 1+1+1 */
#main .col_2ter { float:left;	width:64%; margin-right:2%;}  /* layout 2 col: 2+1 */
#main .col_bi   { float:left;	width:48%; /*margin-right:1%;*/}  /* layout 2 col: 1+1 */
#main .col_mono {  }                                        /* layout 1 col */
#main .col_mono { font-size:0.88em; } 
#main .col_mono h1 {letter-spacing:0.1em;font-size:2.6em;margin:0.8em 0 0 0;} 
#main .col_mono h3 {margin:1.6em 0.1em 0.4em 0;letter-spacing:0.2em; border-bottom:1px solid #ddd;padding-bottom:0.2em;width:66%;}


#main a.thumb_thick {float:left;}
#main a.thumb_thick img {border:2px solid #eee; margin:0 7px 3px 0;}
#main a.thumb_thick:hover img {border:2px solid #ccc;opacity:0.7;}
#main a.focus {display:block;margin:1em 0;padding:7px 10px; color:#555;border:1px solid #bbb;background:#fafafa;width:200px;}
#main a.focus:hover {background:#eee;border:1px solid #999;}
#main .item {margin-bottom:1em; min-height:140px;}
#main .item h3 { font-size:1.2em; margin:0;}
#main .item h4 { font-size:0.9em;}
#main .quote {font-size:3em;color:#eee;position:relative;top:0.3em;}

#main .note {border-top:1px solid #ddd;font-size:0.9em;margin:1.4em 0 0.4em 0;clear:both;padding:8px;line-height:1.4em;}

/* keyword */
#main .keyword {margin:5px 0 12px 0;}
#main .keyword  a {color:#A5A2A2;text-decoration:none;margin-right:15px;padding-left:40px;background:#fff url(../img/but_tag.png) no-repeat center left;}
#main .keyword  a:hover {color:#333;}


#main #context {float:right;	width:25%;padding:10px; font-size:0.9em;}
#main #context ul {list-style:none;border-top:1px solid #eee;}
#main #context ul li {border-bottom:1px solid #eee;padding:4px 7px;margin:0;}
#main #context ul li.on {background:#fafafa;font-weight:bold;}


/* Sommaire */
#main .mytweet {margin-top:12px;min-height:340px;}
#main .mytweet .item {font-size:.88em;}
#main .mytweet a.spip_in {background:#fafafa;}
#main .mytweet .texte   {margin-top:-0.7em;}
#main .mytweet .ps {font-size:0.9em;border-top:1px solid #eee;padding-top:.4em;}

/*-----------------------------------------------------------------------------------------------
  cellar
-----------------------------------------------------------------------------------------------*/
#cellar {background:#eee;	font-family:Arial,Times,Verdana, Arial, sans-serif;height:100%;}
#cellar h2 { font-family:Times,Verdana, Arial, sans-serif;font-size:1.4em;}
#cellar h3 { font-size:0.9em;}
#cellar_core .col_ter {	float:left;	width:31%; margin-right:2%;}
#cellar ul    {	list-style-type:none;	margin:0.5em 0 2em 0;	border-top:1px solid #C2C2C2;font-size:82%;}
#cellar ul li {	list-style-type:none;	margin:0;	padding:0.5em 0;}
#cellar small {	color:#7A7A7A;}


/*-----------------------------------------------------------------------------------------------
  footer 
-----------------------------------------------------------------------------------------------*/
#footer{	clear:both;	color:#939393;	margin:2em 0;}

/*-----------------------------------------------------------------------------------------------
  SPIP (reprise de dist + spip-contrib)
-----------------------------------------------------------------------------------------------*/
hr.spip {border:none;}

/* liste */
ul.spip { margin: 0.2em 1em 0.2em 1.5em; list-style-type: disc; }
ol.spip { margin: 0.2em 1em 0.2em 1.5em; list-style-type: decimal; }
li.spip { margin: 0.1em 0.2em 0.2em 1.4em;  }

/* liens */
a.spip_out {	background: url(../img/spip_out.png) right center no-repeat;	padding-right: 15px;	border-bottom: 1px solid; text-decoration:none;}
a.spip_in  {	text-decoration:none;border-bottom:1px dashed; margin:0 3px;}
a.spip_glossaire {cursor:help;text-decoration:underline;}

/* Document */
.spip_doc_titre {font-size:0.8em;}
dl.spip_documents  {width:auto !important;}
.spip_documents_left   {  float: left;  margin-right: 8px;  margin-bottom: 8px;}
.spip_documents_right  {  float: right;  padding-left: 8px;  padding-bottom: 8px;}
.spip_documents_center {  display: block !important; text-align: center;  margin: 5px auto;}
.spip_doc_descriptif { clear: both; font-size: 0.8em; margin-left: auto; margin-right: auto; }
img.spip_logos {margin:0 8px 8px 0 !important;}

/* Paragraphes, citations, code et poesie */
blockquote.spip, .spip_serif { font-family: Georgia, Times, serif; }
blockquote, blockquote.spip {	margin: 1em 0;	padding : 4px 1em 4px 1em;	border: 1px solid #CCC;	border-left: 4px solid #A0C0E0;color: #333;}
.spip_poesie {	margin: 1em;	padding-left: 1em;	font-family: Georgia, Times, serif; font-size: 1.2em;}
.spip_poesie div { text-indent: -60px; margin-left: 60px; }
tt, .spip_code, .spip_cadre {	font-family: monospace;	font-style: normal;	font-size: 1.2em;}
.spip_code { color: #345DA4; }
tt { color: #333; }
.spip_cadre {	width: 98%; margin:0.4em 0;padding: 4px; padding-top: 0.5em;	background: #eee;	color: #3465a4;	border:0;border-left: 4px solid #345DA4;}
.spip_surligne {background: yellow;}

/* Formulaires */
.reponse_formulaire {padding:5px;background:#efefef;}
.formulaire_ecrire_auteur {margin-top:1.2em;}
.formulaire_ecrire_auteur label {display:block;}


/* Tableaux */
table.spip {	margin-bottom: 1em;	border-collapse: collapse; font-size:11px;  }
table.spip caption {	caption-side: top;	text-align: center;	margin: auto;	padding: 3px;	font-weight: bold; }
table.spip tr.row_first { background: #FFC; }
table.spip tr.row_odd { background: #DDD; }
table.spip tr.row_even { }
table.spip th, 
table.spip td { 
   padding:3px 15px 3px 0; text-align: left; vertical-align: middle;   
}
table.spip a img {border:0;}

/*****************
*  spip : formulaire (reprise de dist)
*****************/
#spip-admin {left:50px !important;width:100px;font-size:12px;}

/* Structure generale des formulaires
----------------------------------------------- */
.formulaire_spip { clear: both; margin-bottom: 2em; padding: 0; border: 0; text-align: left; font-size: 1em; }
.formulaire_spip form { margin: 0; padding: 0; } /* Bug IE/Win */

/* Fieldset */
.formulaire_spip fieldset { clear: both; margin: 0 0 1em 0; padding: 0; border: 0; }
.formulaire_spip fieldset legend { margin: 0; padding: 0; font-size: 1.05em; font-weight: bold; background-color: #fff; color: #333; } /* Preciser la couleur des legend et du fond pour IE/Win */
.formulaire_spip fieldset fieldset { margin-top: 1em; }
.formulaire_spip fieldset fieldset legend { font-size: 1em; font-weight: normal; }

/* Explications */
.formulaire_spip .explication { margin: 0.50em 0; color: #444; }

/* Lignes */
.formulaire_spip ul { margin: 0; padding: 0; list-style: none; }
.formulaire_spip ul li { clear: both; margin: 0; padding: 0.50em 0; }

/* Labels */
.formulaire_spip label { display: block; text-align: left; position: relative;  }
.formulaire_spip li p { margin-top: 0; margin-bottom: 0; }
.formulaire_adherent label {float:left;padding-right:8px;text-align:right;width:200px;}


.formulaire_spip .choix label{display:inline;font-weight:normal;}
.formulaire_spip .choix input.radio,
.formulaire_spip .choix input.checkbox {width:auto;}

/* Champs de saisie */
.formulaire_spip input.text { background:#efefef; border:1px solid #eee; }
.formulaire_spip textarea {background:#efefef;border:1px solid #eee; }
.formulaire_spip select { }


/* Boutons */
.formulaire_spip .boutons { clear: both; margin: 0; padding: 0;  }


/* Reponses, previsu et erreurs
----------------------------------------------- */

/* Champs obligatoires */
.formulaire_spip li.obligatoire {}
.formulaire_spip li.obligatoire label {}

/* Previsualisation du message */
.formulaire_spip fieldset.previsu { margin-bottom: 2em; padding: 1em; border: 2px dashed #F57900; }
.formulaire_spip fieldset.previsu legend { padding: 0 0.50em; font-weight: bold; color: #F57900; }
.formulaire_spip fieldset.previsu li { padding: 3px; border: none; }
.formulaire_spip fieldset.previsu p { margin: 1em 0; } 

/* Reponse du formulaire */
.reponse_formulaire { font-weight: bold; color: #e86519; font-size: 1.20em; }
fieldset.reponse_formulaire { border-color: #e86519; font-weight: normal; }
fieldset.reponse_formulaire.reponse_formulaire legend { color: #F57900; } /* Preciser la couleur des legend et du fond pour IE/Win */

/* * Erreurs */
.formulaire_spip li.erreur .erreur_message { display: block; color: #C30; font-weight: bold; }
.formulaire_spip li.erreur input.text, .formulaire_spip li.erreur textarea { background-color: #FCC; border-style: solid; border-color: #C30; }
.reponse_formulaire_erreur { margin: 0; color: #C30; font-weight: bold; }

/* * OK */
.reponse_formulaire_ok { margin: 0; color: #53AD20; font-weight: bold; }


/*-----------------------------------------------------------------------------------------------
  misc
-----------------------------------------------------------------------------------------------*/
.warning {   margin: 5px;  padding: 15px 15px 15px 60px;  background: #fff url(../img/but_warning.png) no-repeat 5px 5px;}
.congratulation {  margin: 5px;  padding: 15px 15px 15px 60px;  background: #fff url(../img/but_congratulation.png) no-repeat 5px 5px;}
.spacer {clear:both;}
.right {text-align:right;}
.invisible {visibility:hidden;}

/*-----------------------------------------------------------------------------------------------
  gallery
-----------------------------------------------------------------------------------------------*/
.gallery-thumb {	margin: 5px;	float: left;	text-align: center;}
.gallery-thumb img {	background: #f3f3f3;	border: 1px solid #ddd;	padding: 7px;	margin: 1px;}
.gallery-thumb a img {	border-color: #ccc;}
.gallery-thumb a:hover img {	border-width: 2px;margin: 0;}
.gal_over1 a:hover img { border-color:#3bc7cc;}
.gal_over2 a:hover img { border-color:#cea5d7;}
.gal_over3 a:hover img { border-color:#59df50;}
.gal_over4 a:hover img { border-color:#ff9626;}

.gallery-items {	margin: 0;	clear: both;}
.gallery-items h4 {padding-left:5px;}
.gallery-empty {	padding: 0.5em 1.5em;	margin: 1.5em 3em;	border: 1px solid #ddd;	background: #ffe;	font-size: 1.2em;}


/*****************
*  mobile
*****************/

@media screen and (max-width:640px)  {
      body {margin:4px;}
      #banner, #navbar, #main  {width:auto;font-size:96%;clear:both;}
      #cellar_core, .article-ps-10, #context {display:none;}

      #banner {position:absolute;top:0;right:5px;}        
      #banner h1 {font-size:16px;font-family:Arial,serif;}
      #banner h1 a {color:#000;}
      
      #navbar {margin:0;}
      #navbar ul {margin:0;padding:0;border:none;float:left;}
      #navbar ul li a,
      a.lien_pagination
      {  
          font-size:105%; 
          padding:5px 10px;margin:2px; border:1px solid #eee;
          border-radius:5px;
          background:#f1f1f1;
          background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.11, #E4E4E4),  color-stop(1, #FFFFFF));
          background-image: -moz-linear-gradient(    center bottom,    #E4E4E4 11%,   #FFFFFF 100%);
      } 
      #navbar ul li a:hover,
      a.lien_pagination:hover {
          background:#aaa;
          background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.11, #aaa),  color-stop(1, #E4E4E4));
          background-image: -moz-linear-gradient(    center bottom,    #aaa 11%,   #E4E4E4 100%);
      }

      p.pagination {color:#fff;}
      p.pagination span {color:#ccc;border-radius:5px;border:1px solid #ccc;padding:5px 10px;}

      #banner h2 {display:none;}
      #main .col_ter {margin-bottom:3em;}
      #main .col_ter,
      #main .col_2ter {float:none;width:auto;clear:both;}
      #main .mytweet {min-height:0;}
}