auf_savoirs_en_partage/static/css/global.css

   1 /*
   2 Feuille de styles - GLOBAL
   3 Par Erick chez http://www.ixmedia.com
   4 Date de creation: 2009-05-11
   5 Modification: 2009-05-14 [Erick]
   6 */
   7
   8 /* COULEURS
   9
  10 TXT -----------> #3a3125 et #000
  11 LINK ----------> #97012c
  12 LIGNES grises -> #e0e0e0 et #d5d5d5
  13 */
  14
  15 /* Mise en page */
  16
  17 body { padding: 0; margin: 0; font-size: 9pt; font-family: Verdana, Arial, sans-serif;
  18        color: #3a3125; background: #fff url(../img/background-body.jpg) repeat-y 50% 0; }
  19 #fond { padding: 0; margin: 0; position: relative;
  20         background: url(../img/background-fond.jpg) no-repeat 50% 0; text-align: left; }
  21 #enrobage { padding: 30px 0; margin: 0 auto; position: relative; width: 940px; }
  22
  23 /* Navigation */
  24
  25 #nav-gauche, #nav-droite { color: #fff; height: 25px; line-height: 25px; font-size: 80%; padding-left: 5px;
  26                            background: #4c4030 url(../img/sous-menu-top-coin-gauche.gif) no-repeat top left; }
  27 #nav-gauche div, #nav-droite div { background: #4c4030 url(../img/sous-menu-top-coin-droit.gif) top right no-repeat;
  28                                    padding-right: 5px; }
  29 #nav-gauche a, #nav-droite a { padding: 0 5px; color: #fff; font-weight: bold; }
  30 #nav-gauche { position: absolute; top: 2px; left: 0; }
  31 #nav-droite { position: absolute; top: 2px; right: 0; }
  32
  33 /* Entête */
  34
  35 #logo { position: absolute; top: 70px; left: 0; }
  36 #entete { margin-left: 220px; color: #97012c;
  37           font-family: Myriad Pro, Lucida Grande, sans-serif; font-size: 135%; }
  38 #entete h1, #entete #titresep { color: #3a3125; font-weight: normal; font-size: 185%; letter-spacing: -1px;
  39              margin: 0.67em 0 0.25em; }
  40 #entete h1 em { color: #db602f; font-size: 55%; font-style: normal; letter-spacing: normal; }
  41 #entete h2 { border: 0; font-size: 100%; letter-spacing: normal; margin: 0;}
  42 #entete form { position: relative; width: 390px; height: 78px;
  43                background: url(../img/recherche-background.gif) no-repeat top left; }
  44 #entete label { display: block; color: #3a3125; letter-spacing: -1px; font-size: 115%; }
  45 #entete label em { font-size: 60%; font-style: normal; font-weight: normal; letter-spacing: normal; }
  46 #entete input { position: absolute; top: 31px; left: 5px; width: 300px; height: 16px; background: none; border: none; }
  47 #entete button { position: absolute; top: 17px; left: 329px; width: 45px; height: 45px;
  48                  background: url(../img/recherche-button.gif) no-repeat top left;
  49                  border: none; cursor: pointer; }
  50 #entete button:hover { background: url(../img/recherche-button-over.gif) no-repeat top left; }
  51
  52 /* Contenu */
  53
  54 #boite-principale { width: 744px; background: url(../img/contenu-bkg-middle.png) repeat-y 0 0;
  55                     position: relative; margin-top: 30px; min-height: 500px; }
  56 #boite-principale .top-border { position: absolute; top: -10px; }
  57 #boite-principale .bottom-border { position: absolute; bottom: -10px; }
  58
  59 #flash-message { margin: 10px 20px; background: #f3e3e7; color: #b03d5e; padding: 1em; font-size: 120%;
  60                  border: 1px solid #b03d5e; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
  61 #contenu { position: relative; padding: 5px 20px; }
  62 #contenu img.top, .resultats img.top { height:10px; position:relative; top:-10px; left:0;}
  63 #contenu img.bottom, .resultats img.bottom{ height:10px; position:relative; bottom:-10px; left:0;}
  64
  65 /* Régions/Disciplines */
  66
  67 #regions_disciplines { position: absolute; top: 30px; right: 0; width: 190px;
  68                        background: url(../img/col-droite-background-bottom.png) no-repeat bottom left;
  69                        font-size: 90%; padding-bottom: 8px; }
  70 #regions_disciplines div { background: url(../img/col-droite-background.png) repeat-x top left;
  71                            padding: 10px; }
  72 #regions_disciplines p { font-weight: normal; font-size: 100%; margin: 2em 0 0.67em; text-transform: lowercase; letter-spacing: 0 }
  73 #regions_disciplines p em { font-size: 180%; letter-spacing: -1px; font-style: normal; display: block; text-transform: capitalize; }
  74 #regions_disciplines ul { margin: 0; padding: 0; list-style: none; }
  75 #regions_disciplines li { margin: 0; padding: 0; }
  76 #regions_disciplines a { display: block; margin-left: 5px; padding: 1px 5px; text-decoration: none; color: black; }
  77 #regions_disciplines li.active a,
  78 #regions_disciplines a:hover { background: #d5d5d5; margin-left: 0; border-left: 5px solid #666; }
  79
  80 /* Liens */
  81
  82 a { text-decoration: none; color: #97012c; }
  83 a:hover { text-decoration: underline; }
  84 a img { border: none; }
  85
  86 /* Titres */
  87
  88 h1, h3 { font-weight: normal; font-size: 180%; letter-spacing: -1px; }
  89 h2 { font-weight: normal; font-size: 150%; letter-spacing: -1px; border-bottom: 2px solid #3a3125; clear: right; }
  90 h1 a, h2 a, h3 a { color: #3a3125; }
  91 .sous-titre { margin: -1em 0 1.5em 0; }
  92
  93 /* Formulaires */
  94
  95 form { margin: 1em 0; }
  96 form td, form th { vertical-align: top }
  97 form th { width: 20em; text-align: left; font-weight: normal; }
  98 form p { margin-top: 0 }
  99 input[type=text] { width: 20em }
 100 input.date, form input.time { width: 8em; }
 101 textarea { height: 7em }
 102 select { width: 80%; overflow: hidden }
 103 fieldset { padding: 10px; margin: 0; position: relative;
 104            border-top: 1px solid black; border-bottom: none;
 105            border-left: none; border-right: none; }
 106 fieldset fieldset { border: 1px solid #ccc; background: #fafafa; margin: 10px; padding: 15px; }
 107 legend { font-weight: bold; color: #000000; margin: 0; padding:0 0.5em; }
 108 legend em { font-weight: normal; font-style: normal; }
 109 form .help { font-size: 90%; margin: 0; }
 110 form ul.errorlist { color:red; margin:0; padding: 0; }
 111 form ul.errorlist li { list-style:none; }
 112
 113 .horizontal-radio-buttons ul { margin-left:0 }
 114 .horizontal-radio-buttons li { display:inline }
 115
 116 .delete-row { font-size: 90%; position:absolute; top:5px; right:5px }
 117 .add-row { font-size: 90%; float:right; margin-right:16px }
 118 .edit-publication { font-size: 90%; position: absolute; bottom: 5px; right: 5px; cursor: pointer; }
 119
 120 .form-errors { margin: 10px 0px; background: #f3e3e7; color: #b03d5e; padding: 1em; font-size: 120%;
 121                border: 1px solid #b03d5e; }
 122 /* Tables */
 123
 124 table { width: 100%; }
 125 td, th { vertical-align: middle; padding: 5px }
 126 td ul, td ol { padding: 0; margin: 0; list-style: none; }
 127 tr.odd { background:#ddd; }
 128
 129 /* Listes */
 130
 131 dt { font-weight: bold; }
 132 dd { padding: 0; margin: 0 0 1em 0; }
 133 ul.items-and-actions li { padding: 3px; border-bottom: 1px solid #ddd; }
 134 div.item-actions { float: right; }
 135 div.item-actions a { padding: 5px; }
 136 div.item-actions a.alerte { padding-right: 15px; }
 137 div.item-actions a.alerte.active { background: url(../img/icon-yes.gif) right center no-repeat; }
 138
 139 /* Styles inline */
 140
 141 .label { font-weight: bold; width: 150px; }
 142
 143 /* Page d'accueil */
 144
 145 .demi-gauche { width: 345px; background-color: #f5f5f5; float: left; }
 146 .demi-droite { width: 345px; float: right; }
 147
 148 .box { position: relative; padding: 10px; font-size: 90%; }
 149 .box h3 { margin: 0 0 3px 0; }
 150
 151 ul.actions-accueil { margin: 0; padding: 0 0 1em 0; list-style: none; font-size: 90%; }
 152 ul.actions-accueil li { display: inline; padding-right: 10px; }
 153
 154 ul.liste-de-l-accueil { padding: 0; margin: 1em 0; list-style: none; }
 155 ul.liste-de-l-accueil li { padding: 1em 0; border-top: 2px solid #d5d5d5;}
 156 ul.liste-de-l-accueil img { float:left; margin:0 1em 5px 0; max-width:75px;}
 157 ul.liste-de-l-accueil .titre { font-weight:bold; margin: 0.25em 0; }
 158
 159 .rss-icon { position: absolute; top: 15px; right: 20px; }
 160
 161 /* Actions */
 162
 163 ul.actions { font-size: 90%; float: right; text-align: right; list-style: none;
 164              background: #f4f4f4; border: 1px solid #e4e4e4;
 165              padding: 10px 10px 10px 10px;
 166              -moz-border-radius: 5px; -webkit-border-radius: 5px; }
 167
 168 /* Pages de recherche */
 169
 170 .pagination { text-align: center; margin: 1em 0; }
 171 .resultatRecherche {  padding: 0 25px 1.5em; }
 172 .details { font-size: 90%; margin-top: 6px; }
 173
 174 /* Clearfix */
 175
 176 .clearfix {display:inline-block; }
 177 .clearfix:after, .container:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}
 178 * html .clearfix { height:1%; }
 179 .clearfix { display:block; }
 180
 181 /* Cadre */
 182
 183 .cadre { width: 70%; margin: 50px auto; padding: 20px; background: #f9f9f9; border: 1px solid #aaa }
 184 .cadre h1 { margin: -20px -20px 0 -20px; padding: 5px; background: #aaa; color: white; font-size: 120%; font-weight: bold; text-align: center; }
 185
 186 /* Liste message */
 187
 188 .message { margin-bottom:20px; }
 189 .message .info { font-size:90%; }