/* -----------------------------------
FRAMASTYLES
Par   : Rui Nibau (RNB) d'après Alexis Kauffman (aka)
Date  : juin-septembre 2005 / décembre 2006
Note  : En (re)construction - encore un gros bordel pas optimisé
----------------------------------- */
* { padding: 0; margin: 0; }
img { border: 0; }

.spip_documents_center img {
display:block;
margin:auto;
}

/* SQUELETTE 3 COLONNES */


body {
    background: #fbfbfd url("fond.png") no-repeat fixed 0 0;
    font:135% verdana,"DejaVu sans",helvetica,sans-serif; /*75% nav + BS2 */
    color: #333;
    text-align: center;
    margin:0; /* 3em 0 20px; nav + BS2 */
}
#content {
    text-align: left;
    min-width: 785px; /* taille minimale col centrale - maquette doit passer en 800x600 | 385px --> 785px */
    max-width: 950px; /* Eviter trop grande largeur pour grandes résolutions            | 500px --> 950px */
    padding: 10px 200px 0;
    border-top: 5px solid #c4c4ff;
    margin: 0 auto;
}

.spip-admin-float {z-index:1001 !important}

/* 3 COLS */

#c-centre, #c-droite, #c-gauche {
    position: relative;
    float: left;
}
#c-centre {
    width: 100%;
    padding: 0;
}
#c-droite, #c-gauche {
    font-size: 92%;
    width: 190px;
}
#c-droite {
    padding: 0 0 0 10px;
    margin: 0 -100% 0 0;
}
#c-gauche {
    right: 200px;
    padding: 0 10px 0 0;
    margin: 195px 0 0 -100%;
}
#fil {
    font-size: 92%;
    color: #c4c4ff;
    font-variant: small-caps;
    text-align: left;
    max-width: 900px;
    margin: 0 auto;
}

/* FOOTER */

#framafooter {
    clear:both;
    text-align:left;
}

#footer {
    clear: both;
    display: none;
    font-size: 0.8em;
    text-align: right;
    color: #777;
    background: #fbfbfd;
    border-width: 5px 1px 0 0;
    border-style: solid;
    border-color: #c4c4ff;
    margin: 20px -200px 0;
}
#footer p {
    padding: 5px 10px 0;
}
#footer .about {
    text-align: left;
    background: #eaeaff;
    padding: 5px 10px;
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-color: #c4c4ff;
    -moz-border-radius: 0 0 0 7px;
}

/* NAVIGATION GENERALE */

ul#nav {
    float: left;
    width: 190px;
    list-style: none;
    margin: 0 0 0 -200px;
}
ul#nav a {
    font-weight: 600;
    display: block;
    background: #f5f5ff;
    padding: 2px 10px;
    border: 1px solid #c4c4ff;
    -moz-border-radius: 5px;
    margin: 0 0 5px;
}
ul#nav a:hover,
ul#nav a:focus {
    text-decoration: none;
    background: #eaeaff;
}

/* PROPRIÉTÉS GÉNÉRALES */

a { text-decoration: none; }
a:active, a:link, a:visited { color: #00c; }
a:hover,a:focus { color: #f80; text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
    font-family: "trebuchet ms","DejaVu Serif",serif;
}
#c-centre h1 { font-size: 2em; line-height: 1.4em; }
#c-centre h2 { font-size: 1.6em; }
#c-centre h3 { font-size: 1.3em; font-weight: bold;}
#c-centre h4 { font-size: 1.1em; font-weight: bold;}

/* titre image */

h1.titre-image {
    font-size: 0;
    height: 80px;
    background-repeat: no-repeat;
    background-position: 0 50%;

}
h1.titre-image a {
    display: block;
    text-indent: -9999em; /* ope */
    height: 71px;
    background-repeat: no-repeat;
    background-position: 95% 50%;
    padding: 0 10px;
}

/* blocs */

.bloc {
    border-width: 1px 2px 2px 1px;
    border-style: solid;
    border-color: #c4c4ff;
    margin: 0 0 10px;
}
#c-centre .bloc {
    background: #fff;
    padding: 10px 20px;
    -moz-border-radius: 10px;
}
#c-centre p,
#c-centre ul,
#c-centre ol,
#c-centre dl,
#c-centre blockquote,
#c-centre pre,
#c-centre table {
    margin-bottom: 15px;
}
#c-centre li dl,
#c-gauche li dl,
#c-droite li dl {
    color: #333;
}
#c-centre h2,
#c-centre h3 {
    margin-bottom: 15px;
}

/* metas */

#c-centre .meta,
#c-gauche .meta,
#c-droite .meta {
    display: block;
    font-size: 80%;
    color: #777!important;
}
#c-centre .meta-kw,
#c-gauche .meta-kw,
#c-droite .meta-kw {
    font-size: 80%!important;
    color: #d28;
}

/* Liste */

#c-centre ul,
#c-centre ol {
    margin-left: 15px;
}

#c-centre .fil {
    float: left;
    color: #c4c4ff;
    font-variant: small-caps;
    margin: 0;
}

/* POPUP
 * Identifiant appliqué à la dd descriptive d'une liste de
 * ressources pour qu'elle s'affiche sous forme de popup lorsque
 * l'on passe la souris au dessus de la dt correspondante.
 */

#c-centre #popup {
    position: absolute;
    z-index: 1; /* passer au-dessus des titres de bloc, mais pas IE */
    font-size: 85%;
    width: 28em;
    padding: 8px 7px 7px 8px!important;
    border-width: 1px 2px 2px 1px;
    border-style: solid;
    -moz-border-radius: 7px;
    margin: 0!important;
    /* clair 
    color: #336;
    background: #eaeaff;
    border-color: #eaeaff #c4c4ff #c4c4ff #eaeaff;*/
    /* sombre */
    color: #fff;
    background: #6b6bb5;
    border-color: #6b6bb5 #474778 #474778 #6b6bb5;
    /* orange 
    color: #fff;
    background: #f80;
    border-color: #f80 #630 #630 #f80;*/
}

/* .LISTE-FLOAT
 * Permet de placer des listes à puces sous forme de 2 cols ou +
 * Attention : les listes doivent être suivies d'un conteneur bloc
 * avec clear:both pour éviter de déborder sur le contenu suivant.
 * .list-flot : temporaire en attendant le recalcul des skels
 */

#c-centre .liste-float {
    float: left;
    color: #c4c4ff;
    width: 40%;
    list-style: none;
    margin-right: 15px;
    margin-left: 0;
}
#c-centre .liste-float ul {
    font-size: 92%;
    padding: 5px 0 0 25px;
    margin-left: 0;
}
#c-centre .liste-float ul li {
    list-style: disc;
    margin-left: 0;
}
#c-centre .liste-float ul li:hover {
    color: #9494ff;
}
#c-centre .liste-float strong {
    font-weight: normal;
    color: #333;
    background-color: #fff;
}
#c-centre .liste-float a {
    background-color: #fff;
}
#c-centre .liste-float dl {
    margin-bottom: 0;
}
#c-centre .liste-float dd {
    font-size: 92%;
    padding-left: 0;
}

/*  .LISTE
 *  liste détaillée où les li contiennent une dl
 */

html>body #c-centre .liste li {
    list-style-image: url("ico_page_violet.png");
    padding: 0;
    margin: 0 0 5px;
}
html>body #c-centre .liste li:hover {
    list-style-image: url("ico_page_red.png");
}
#c-centre .liste dl {
    margin: 0;
}
#c-centre .liste dt {
    font-weight: normal;
    font-size: 110%;
    padding: 2px 0;
}
#c-centre .liste dd {
    padding: 0 0 2px;
}
#c-centre .liste-bestof {
    background: #f5f5ff;
    padding: 5px 10px;
    border: 1px dashed #c4c4ff;
    -moz-border-radius: 7px;
}
#c-centre .liste-bestof:before {
    display: block;
    content:'Indispensables';
    text-align: right;
    font-size: 85%;
    color: #6b6bb5;
}

/* Formulaires */

#c-centre input,
#c-centre textarea {
    border: 1px dashed #c4c4ff;
}
#c-centre fieldset {
    background: #f5f5ff;
    border: 1px solid #c4c4ff;
    padding: 10px;
    margin: 0 0 10px;
}
#c-centre legend {
    font-weight: bold;
    background: #eaeaff;
    padding: 2px 5px;
    border: 1px solid #c4c4ff;
    -moz-border-radius: 7px;
}
#c-centre form .bouton {
    text-align: right;
}
#c-centre form .bouton input {
    color: #fff;
    background: #9093FA;
    border: 1px solid #474778;
    -moz-border-radius: 7px;
}
#c-centre form p {
    margin-bottom: 5px;
}
#c-centre .reponse_formulaire {
    color: #f00;
    margin: 10px 0;
}

/* FRONT */

/* Front Titre */

#front h1 {
    background-image: url("logo_framasoft_20070320.png");
    text-transform: uppercase;
}
#front h1 a {
    background-image: url("front-logo-2.png");
}

/* Front Centre */
 
#front #c-centre {
    background: url("front-centre.png") no-repeat 10px 99%;
    padding-bottom: 280px;
}
#front #c-centre h2 {
    font-weight: normal;
    border-bottom: 1px dashed #c4c4ff;
    padding: 0 0 5px;
    margin: 0 0 10px;
}
#front #c-centre p,
#front #c-centre ul {
    margin-bottom: 5px;
}
#front #c-centre .liste-res dt {
    font-weight: normal;
}
#c-centre #liste-soft {
    background: #fff url("list-soft.png") no-repeat 90% 30px;
}

/* Front Une */

#une {
    text-align: center;
}
#une h3 {
    text-align: left;
}

/* RUBRIQUES */

#sous-rubrique h1 {
    text-align: right;
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding: 0;
    border-bottom: 2px solid #c4c4ff;
    margin: 0 0 10px;
}

#rubrique.rub-tl h1.titre-image { background-image: url(tribune-logo-1.png); }
#rubrique.rub-tl h1.titre-image a { background-image: url(tribune-logo-2.png); }
.rub-tl .liste-rub { background: #fff url(tribune-centre.png) no-repeat 90% 80%; }

#rubrique.rub-tutos h1.titre-image { background-image: url(tutos-logo-1.png); }
#rubrique.rub-tutos h1.titre-image a { background-image: url(tutos-logo-2.png); }
.rub-tutos .liste-rub { background: #fff url(tutos-centre.png) no-repeat 90% 80%; }

#rubrique.rub-softs h1.titre-image { background-image: url(softs-logo-1.png); }
#rubrique.rub-softs h1.titre-image a { background-image: url(softs-logo-2.png); }
.rub-softs .liste-rub { background: #fff url(softs-centre.png) no-repeat 90% 80%; }

#rubrique #c-centre h2,
#sous-rubrique #c-centre h2 {
    font-weight: normal;
    border-bottom: 1px dashed #c4c4ff;
    padding: 0 0 5px;
    margin: 0 0 10px;
}
#sous-rubrique #c-centre .fil {
    margin-top: 10px;
}
#rubrique #list-rub li,
#rubrique #liste-rub li {
    list-style-image: url("ico_cat_violet.png");
}
#rubrique #list-rub li:hover,
#rubrique #liste-rub li:hover {
    list-style-image: url("ico_cat_red.png");
}

/* ARTICLES */

#article #c-centre {
    line-height: 1.4em;
}
#article #c-centre .bloc {
    -moz-border-radius: 0 0 10px 10px;
    overflow: hidden;
}

/* Article meta publication */

#article #c-centre .meta-pub {
    list-style: none;
    text-align: right;
    font-size: 92%;
    background: #eaeaff;
    padding: 2px 5px;
    border-bottom: 1px solid #c4c4ff;
    margin: -10px -20px 0;
}

/* articles meta */

#article #c-centre .meta {
    line-height: 1.3em;
    background-image: url("meta.png");
    background-repeat: no-repeat;
    background-position: 100% 50%;
    padding: 20px 10px 10px;
    border-left: 1px solid #c4c4ff;
    margin: 0 0 15px;
}
#article #c-centre .meta li {
    list-style: none;
    display: table-row;
}
#article #c-centre .meta strong {
    color: #333;
    display: table-cell;
    font-weight: normal;
    font-size: 140%;
    font-family: monospace;
    padding-right: 5px;
}

/* Article meta out */

#article .meta-out {
    text-align: right;
    margin-bottom: 20px;
    list-style: none;
}
#article .meta-out li {
    margin-bottom: 5px;
}
#article .meta-out strong {
    text-transform: uppercase;
}

/* Article - titre */

#article #c-centre h1 {
    background: url("ico_page_violet.png") no-repeat 0 10px;
    padding: 0 0 0 20px;
    margin-bottom: 20px;
}
#logo {
    text-align: center;
}

/* Article - chapo */

#chapo {
    font-size: 92%;
    line-height: 1.3em;
    background: #f5f5ff;
    padding: 15px 30px 10px;
    border-width: 0 1px;
    border-style: solid;
    border-color: #c4c4ff;
    margin: 0 0 15px;
}
#chapo p { margin-bottom: 5px; }

/* article - photo-flickr */

.photo-flickr .meta-pub em {
    float: left;
    font-style: normal;
}
.photo-flickr .meta-pub strong {
    color: #3993ff;
}
.photo-flickr .meta-pub span {
    color: #ff1c92;
}
.photo-flickr .photo {
    text-align: center;
}
.photo-flickr .photo img {
    max-width: 100%;
    height: auto;
    border: 1px solid #c4c4ff;
    margin: 0 auto;
}

/* Article - Footnotes */

#article #a-notes {
    font-size: 92%;
    line-height: 1.3em;
    padding: 10px 0 0;
    border-top: 1px dashed #c4c4ff;
    margin: 20px 0;
}

/* Article - PS */

#article #a-ps {
    font-size: 92%;
    line-height: 1.3em;
    padding: 15px 20px;
    border-top: 1px solid #c4c4ff;
}

/* Article - Tag */

#article #tag {
    font-size: 92%;
    line-height: 1.3em;
    padding: 15px 20px;
    border-top: 1px solid #c4c4ff;
}

/* Article - Documents */

#article #a-doc {
    position: relative;
    text-align: center;
    font-size: 92%;
    line-height: 1.3em;
    margin: 40px 0 30px;
}
#article #a-doc {
    float: left;
    list-style: none;
    width: 180px;
    padding: 5px;
    border: 1px dashed #c4c4ff;
}
#article #a-doc li {
    list-style: none;
}

#article .f-sub {
    color: #777;
    text-align: center;
}
#article .f-sub strong {
    font-size: 110%;
    color: #333;
}
#article .f-sub a strong {
    color: #00c;
}

/* Notices - Bloc update */

#update {
    font-size: 92%;
    line-height: 1.3em;
    display:none;
}
#update li {
    list-style: none;
    background: #f5f5ff;
    padding: 3px 7px;
    border-width: 1px 1px 2px;
    border-style: solid;
    border-color: #c4c4ff;
    -moz-border-radius: 7px;
    margin-bottom: 10px;
}
#update strong span {
    font-weight: normal;
}
#update form p {
    margin-bottom: 5px;
}
#update label {
    display: block;
}

/* Articles - Bloc commentaires */

#comments {
    font-size: 92%;
    line-height: 1.3em;
    padding: 40px 0 0;
    clear: both;
}
#c-centre .f-msg {
    background: #f5f5ff;
    padding: 5px;
    border-width: 1px 1px 2px;
    border-style: solid;
    border-color: #c4c4ff;
    -moz-border-radius: 7px;
    margin-bottom: 10px;
}
#comments h3, #comments h4 {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 108%;
    margin-bottom: 5px;
}
#comments h3 strong a,
#comments h4 strong a {
    color: #333;
}
#comments h3 img {
    cursor: pointer;
    padding-right: 5px;
}
#c-centre .f-msg-root {
    background: #fff;
    padding: 7px;
    border: 1px solid #c4c4ff;
    margin: 7px 10px;
}
#c-centre .f-msg-son {
    background: #fff;
    padding: 7px;
    border: 1px dashed #c4c4ff;
    margin: 7px 10px;
}
#comments .f-msg-last-ans {
    margin: 0 0 5px;
}
#comments .f-msg-res {
    font-weight: bold;
    text-align: right;
    padding: 0 5px;
    margin: 0 10px 2px;
}

/* liens spéciaux */

#c-centre a.spip_glossaire {
    background: url("link_wikipedia.png") no-repeat 0 0;
    padding-left: 15px;
}
#c-centre a.spip_in {
    background: url("link_framasoft.png") no-repeat 0 0;
    padding-left: 15px;
}
#c-centre a.spip_out {
    background: url("link_out.gif") no-repeat 0 0;
    padding-left: 15px;
}
#c-centre a.spip_glossaire,
#c-centre a.spip_in,
#c-centre a.spip_out {
    opacity: 0.60;
}
#c-centre a.spip_glossaire:hover,
#c-centre a.spip_in:hover,
#c-centre a.spip_out:hover {
    opacity: 1;
}

/* FORUM (formulaire) */

#forum #c-centre {
    font-size: 92%;
}
#c-centre .previsu p {
    margin-bottom: 5px;
}
#forum #c-centre label {
    display: block;
}
#forum #c-centre input,
#forum #c-centre textarea {
    width: 100%;
}
#forum #c-centre .bouton input {
    font-size: 85%;
    width: 200px;
}

/* Barre de mise en forme */

table.spip_barre {
    width: 100%;
    margin: 0 0 5px;
}
table.spip_barre td {
    height: 18px;
    padding: 0;
    margin: 0 0 5px;
}
table.spip_barre p.small {
    margin: 0 0 5px;
}
table.spip_barre a {
    margin: 0 5px 0 0;
}
table.spip_barre img {
    background: #c4c4ff;
    padding: 0;
    border: 1px solid #9494ff;
    margin: 0;
}
table.spip_barre img:hover {
    background: #fff;
}
table.spip_barre input {
    font-size: 85%;
    width: 100%;
    border: 0!important;
}

/* AUTEUR */

#auteur #c-centre .meta {
    line-height: 1.3em;
    padding: 20px 10px 10px;
    border-left: 1px solid #c4c4ff;
    margin: 0 0 15px;
}
#auteur #c-centre .meta li {
    list-style: none;
}
#auteur #c-centre h1 {
    background: url("ico_auteur.png") no-repeat 0 10px;
    padding: 0 0 0 20px;
    margin-bottom: 20px;
}
#auteur #c-centre label {
    display: block;
}
#auteur #c-centre input,
#auteur #c-centre textarea {
    width: 100%;
}
#auteur #c-centre input[type='submit'] {
    width: 200px;
}

/* COLONNES GAUCHE / DROITE */

#c-gauche h3,
#c-droite h3 {
    font-size: 140%;
    font-weight: bold;
    background-color: #eaeaff;
    padding: 3px 5px;
    border-bottom: 1px dashed #c4c4ff;
    margin: 0 0 10px;
}

#c-gauche .bloc,
#c-droite .bloc {
    background: #f5f5ff;
}
#c-gauche .bloc {
    border-width: 1px 2px 2px 1px;
    -moz-border-radius: 0 0 10px 0;
}
#c-droite .bloc {
    border-width: 1px 1px 2px 2px;
    -moz-border-radius: 0 0 0 10px;
}
#c-gauche ul,
#c-droite ul {
    color: #c4c4ff;
    margin: 0 5px 10px;
}
#c-gauche ul li,
#c-droite ul li {
    margin: 0 0 2px 15px;
}
#c-gauche ul li:hover,
#c-droite ul li:hover {
    color: #9494ff;
}
#c-gauche ul ul,
#c-droite ul ul {
    color: #333;
    margin: 0 0 5px;
}
#c-gauche p,
#c-droite p {
    margin: 0 5px 5px;
}
#c-gauche dt,
#c-droite dt {
    font-weight: bold;
}

/* Bloc framagora
 * Bloc reprenant les derniers posts de Framagora
 */

#c-gauche #list-forums {
    background : #fbfbfd;
    padding: 5px;
    border: 1px dashed #c4c4ff;
}

/* Blocs one-zik et one-img
 * Simplement pour centrer les contenus
 */

#c-gauche #one-zik dl {
    padding: 0 5px 5px;
}
#c-gauche #one-img dl {
    text-align: center;
    padding: 0 5px 5px;
}
#c-gauche #one-img span {
    display: block;
}

/* PETITS TRUCS */

.hide { display: none; }
.small { font-size: 85%; }
.new { color: #f80; }

#c-centre .sous-titre {
    color: #777;
    font-size: 85%;
    text-align: right;
    margin: 0;
}
#c-centre .bloc .sous-titre {
    margin-top: -5px;
}

.bas {
    clear: both;
    color: #777;
    font-size: 85%;
    text-align: right;
    padding: 5px 5px 0;
}
#c-centre .bloc .bas {
    border-top: 1px dashed #c4c4ff;
    margin: 10px 0 -5px!important;
}
#c-centre .bloc .bas .bas-link {
    float: left;
}

/* PLIER / DEPLIER */

/* Styles De Switch */

img.switch {
    cursor: pointer;
}

.plier,
.deplier {
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding-left: 15px!important;
    cursor: pointer;
}
h3.plier,
h3.deplier {
    background-position: 5px 50%;
    padding-left: 20px!important;
}
.plier {
    background-image: url("plier.png");
}
.deplier {
    background-image: url("deplier.png");
}

/* Choix Affichage */

#display-choice {
    font-size: 92%;
    color: #777;
    text-align: right;
}
#display-choice a {
    color: #777;
    font-weight: bold;
}
#display-choice label {
    display: inline;
    padding: 0 5px 0 0;
}
#display-choice input {
    display: inline;
    width: 10px;
    height: 10px;
    border: 1px solid #c4c4ff;
}

.google_box {
	padding-left: 6px;
	width: 135px;
	height: 1.4em;
	border: 1px solid #c4c4ff;
	font-family: verdana,helvetica,sans-serif;
	-moz-border-radius: 6px;
	font-size: 11px;
}

.google_form {
	margin: 0;
	font-weight: 600;
    display: block;
    background: #f5f5ff;
    padding: 2px 10px;
    border: 1px solid #c4c4ff;
    -moz-border-radius: 5px;
    margin: 0 0 5px;
}

.google_button {
	margin-left: 5px;
	vertical-align:bottom;
}


.g_button {
	background:#FFFFFF;
	border:1px solid #c4c4ff;
	color:#474778;
	padding:0pt;
	width:20px;
	font-size:9px;
	-moz-border-radius: 6px;
	margin-left: 5px;
	vertical-align:middle;
}
.g_button:hover {
	background:#c4c4ff;
	color:#FFFFFF;
}
#content h6 {
    border-bottom: 2px solid #c4c4ff;
	    padding: 0 10px;
    margin: 0 0 10px;
}

.para_bloc {
	margin: 0 3px 5px 5px;
}

/*
 * Bloc de demande de mise à jour d'un article
 */

.maj {
	background-color:#FDFDA1;
	border: 1px solid red;
	padding: 5px 5px 5px 5px;
	margin-bottom: 15px;
}

.maj img {
	float:left;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
}

/*
 * Bloc de publicité (la pub c'est mal :( )
 */
.publicite {
	padding: 20px 10px;
}
/*
 * Lien de téléchargement direct
 */
.ddownload {
	text-align:right;
	margin-bottom:15px;
	font-variant:small-caps;
	font-weight:bold;
}
.ddownload a {
	background-color:#EAEAF5;
	border:1px solid #c4c4ff;
	margin-bottom:15px;
	padding:3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 2px 2px 2px #888;
	box-shadow:  2px 2px 2px #888;
	padding: 5px 5px 5px 15px;
}
.ddownload a:hover{
		border:1px solid #gray;
}

.btn-default {
    color: #333 !important;
}
.btn-primary, .btn-info, .btn-success,
.btn-warning, .btn-soutenir, .btn-danger {
    color: #fff !important;   
}
