styles/1/euphorik.css

   1 /* coding: utf-8 */
   2
   3 @import url(pageMinichat.css);
   4 @import url(pageAdmin.css);
   5 @import url(pageProfileRegister.css);
   6 @import url(pageAbout.css);
   7
   8 * {
   9         padding: 0px;
  10         margin: 0px;
  11 }
  12
  13 body {
  14         font-family: sans-serif;
  15         font-size: 12px;
  16         color: #841919;
  17         background-color: #f6dfc2;
  18 }
  19
  20 #container {
  21         height: auto;
  22         margin: 0px;
  23 }
  24
  25 /***** Textile *****/
  26 em.leger {
  27         font-style: italic
  28 }
  29 em.fort {
  30         font-style: normal;
  31         font-weight: bold
  32 }
  33
  34 /***** Menu *****/
  35 ul#menu {
  36         background-image: url(img/logo_fond.png);
  37         height:129px;
  38         width: 100%;
  39         font-size: 11px;
  40         list-style-type:none;
  41 }
  42 #menu li:first-child {
  43         margin-left: 340px;
  44 }
  45 #menu li {
  46         margin-top: 47px;
  47         font-size: 14px;
  48         text-align: center;
  49         cursor: pointer;
  50         height:30px;
  51         z-index: 20;
  52         float: left;
  53         min-width: 60px;
  54         background-color: #f6dfc2;
  55         line-height: 32px;
  56 }
  57 #menu li.courante {
  58         background-color: #ffffff;
  59         background-image: url(img/triangle.png);
  60         background-repeat: no-repeat;
  61         background-position: center bottom
  62 }
  63 #menu li:hover {
  64         background-color: #ffffff;
  65 }
  66
  67 /***** Le menu pour le choix de la CSS *****/
  68 #menuCss {
  69         position: absolute;
  70         z-index: 10;
  71         left: 550px;
  72         top:0px;
  73         font-size: 9px;
  74 }
  75
  76 /***** Le style du contenu des pages *****/
  77 #page {
  78         font-size: 12px;
  79         background-color: #f6dfc2;
  80         padding: 10px 10px 15px 10px;
  81 }
  82 #page > h1 {
  83         margin-top: 10px;
  84         margin-left: 0px;
  85         font-size: 18px;
  86 }
  87 #page > h2 {
  88         margin-top: 10px;
  89         margin-left: 10px;
  90         font-size: 16px;
  91 }
  92 #page > h3 {
  93         margin-top: 10px;
  94         margin-left: 20px;
  95         font-size: 14px;
  96         background-color : #FFFFFF
  97 }
  98 #page > h4 {
  99         margin-top: 10px;
 100         margin-left: 25px;
 101         font-size: 12px;
 102 }
 103 #page > p {
 104         margin-top: 3px;
 105         margin-left: 35px;
 106 }
 107 #page > ul {
 108         margin-top: 3px;
 109         margin-left: 45px;
 110 }
 111 #logo {
 112         z-index: 10;
 113         background-image: url(img/logo.png);
 114         background-repeat: no-repeat;
 115         width: 304px;
 116         height: 129px;
 117         position: absolute;
 118 }
 119 #logo.ekMaster {
 120         background-image: url(img/logo_ek_master.png);
 121 }
 122
 123 /***** Le pied de page *****/
 124 #footer {
 125         background-color: #e19671;
 126         text-align: right;
 127         font-size: 9px;
 128         padding: 2px
 129 }
 130 #footer a img{
 131         border-style: none;
 132         vertical-align: middle;
 133         margin-right: 5px;
 134 }
 135 #footer span{
 136         margin-right: 10px;
 137 }
 138
 139 /***** La boite d'information (s'apparente à une MessageBox) *****/
 140 div#info {
 141         text-align: center;
 142         width:100%;
 143         position: fixed;
 144         left: 0px;
 145         top: 0px;
 146         background-color: #841919;
 147         border-bottom: 1px solid #FFFFFF;
 148         z-index: 100;
 149         color: #f0df95
 150 }
 151 div#info div.fermer {
 152         float:right;
 153         cursor: pointer;
 154         height:16px;
 155         width: 16px;
 156         background-image: url(../../img/fermer.gif)
 157 }
 158 div#info #icone {
 159         float:left;
 160         height:16px;
 161         width: 16px;
 162 }
 163 div#info #icone.interrogation {
 164         background-image: url(../../img/interrogation.gif)
 165 }
 166 div#info #icone.information {
 167         background-image: url(../../img/information.gif)
 168 }
 169 div#info #icone.exclamation {
 170         background-image: url(../../img/exclamation.gif)
 171 }
 172 div#info .boutons {
 173         padding: 1px;
 174 }
 175 div#info .boutons div {
 176         cursor: pointer;
 177         background-color: #c62929;
 178         display: inline;
 179         padding: 0px 5px 0px 5px;
 180         margin: 0px 5px 0px 5px;
 181 }
 182 div#info .boutons div:hover {
 183         background-color: #e84747;
 184 }
 185
 186 /***** Les infos bulles *****/
 187 #flecheBulle {
 188         position: absolute;
 189         z-index: 50;
 190         display: none
 191 }
 192 .flecheBulleHaut {
 193         background-image: url(img/fleche_bulle_haut.png);
 194         width: 15px;
 195         height: 8px;
 196 }
 197 .flecheBulleDroite {
 198         background-image: url(img/fleche_bulle_droite.png);
 199         width: 8px;
 200         height: 15px;
 201 }
 202 .flecheBulleBas {
 203         background-image: url(img/fleche_bulle_bas.png);
 204         width: 15px;
 205         height: 8px;
 206 }
 207 .flecheBulleGauche {
 208         background-image: url(img/fleche_bulle_gauche.png);
 209         width: 8px;
 210         height: 15px;
 211 }
 212 #messageBulle {
 213         position: absolute;
 214         z-index: 50;
 215         color: #ffffff;
 216         background-color: #841919;
 217         display: none;
 218         font-size: 10px;
 219 }
 220 #messageBulle p {
 221         padding: 3px 6px;
 222 }
 223
 224 /***** Le faux captcha *****/
 225 .captcha {
 226         display:none;
 227 }
 228
 229 /***** Les formulaires *****/
 230 form input,
 231 form button,
 232 form select {
 233         color: #841919;
 234         background-color: #f0df95;
 235         border: #841919 1px solid;
 236 }
 237 form input:hover, form input:focus,
 238 form button:hover, form button:focus,
 239 form select:hover, form select:focus {
 240         background-color: #ffffff;
 241 }
 242 form input,
 243 form select {
 244         font-size: 12px;
 245 }
 246 form button {
 247         font-size: 11px;
 248 }
 249 form input[readonly] {
 250         background-color: #d0c9aa
 251 }
 252
 253 /***** Les liens *****/
 254 .lien, a {
 255         text-decoration: underline;
 256         color: #c62929;
 257 }
 258 .lien {
 259         cursor: pointer
 260 }
 261 a:link, a:visited {
 262         color: #c62929;
 263 }
 264 .lien:hover, .lien:active, a:hover, a:active {
 265         color: #e84747;
 266 }