css/yopyop.css

   1 * {
   2    margin: 0;
   3    padding: 0;
   4    border-width: 0;
   5 }
   6
   7 html {
   8    background-color: #8DDD83;
   9    height: auto;
  10    font: normal 12pt Arial, Verdana, Helvetica, sans-serif;
  11    height: 100%;
  12 }
  13
  14 a {
  15    text-decoration: none;
  16    cursor: pointer;
  17 }
  18 a:link {
  19    color: #51874A;
  20 }
  21 a:visited {
  22    color: #51874A;
  23 }
  24 a:hover {
  25    color: #5DDF4C;
  26 }
  27 a:active {
  28    color: #5DDF4C;
  29 }
  30
  31 body {
  32    width: 90%;
  33    height: auto;
  34    margin-left: auto;
  35    margin-right: auto;
  36    margin-top: 0px;
  37    text-align: left;
  38    height: 100%;
  39 }
  40
  41 h1 {
  42    font-size: 20pt;
  43    font-style: italic;
  44    font-weight: bold;
  45    margin-left: 40px;
  46 }
  47
  48 td {
  49    vertical-align:top;
  50 }
  51
  52 div.entete {
  53    width: 90%;
  54    position: fixed;
  55    z-index: 5;
  56    background-color: #65A35D;
  57    height: 50px;
  58    color: #8DDD83;
  59    -moz-border-radius: 0px 0px 20px 20px;
  60    min-width: 630px;
  61 }
  62
  63 div.entete img {
  64    position: absolute;
  65    left: 180px;
  66    top: -3px;
  67 }
  68
  69 div.entete h1 {
  70    float: left;
  71    margin-top: 8px;
  72 }
  73
  74 div.entete div#nbFilms {
  75    position: absolute;
  76    left: 280px;
  77    top: 33px;
  78    font-size: 9pt;
  79    color: black;
  80 }
  81
  82 div.entete form {
  83    float: right;
  84    padding-right: 10px;
  85    padding-top: 5px;
  86    margin-right: 30px;
  87 }
  88
  89 div.entete form input {
  90    font-size: 16pt;
  91    background-color: #B1F1A9;
  92    margin: 0px;
  93    padding: 0px;
  94 }
  95
  96 div.entete form button {
  97    position: relative;
  98    height: 25px;
  99    width: 25px;
 100    border: 0px;
 101    background-color: #B1F1A9;
 102    background-position: center;
 103    background-repeat: no-repeat;
 104    vertical-align: top;
 105    margin-left: 2px;
 106 }
 107 div.entete form button:hover {
 108    background-color: #E3FBE0;
 109 }
 110 div.entete form button:active {
 111    background-color: #FFFFFF;
 112 }
 113
 114 div.entete form button#boutonViderRecherche {
 115    background-image: url(../img/clear.png);
 116 }
 117
 118 div.entete form button#boutonToutOuvrir {
 119    background-image: url(../img/ouvrir.png);
 120 }
 121
 122 div.entete form button#boutonAuHasard {
 123    background-image: url(../img/random.png);
 124 }
 125
 126 div.entete form p {
 127    color: black;
 128    font-size: 7pt;
 129    margin-top: 1px;
 130 }
 131
 132 div.entete form p label {
 133    margin-right: 4px;
 134 }
 135
 136 div.contenu {
 137    min-width: 630px;
 138    min-height: 100%;
 139    background-color: #7BC671;
 140 }
 141
 142 table#liste {
 143    width: 100%;
 144    border-spacing: 0px 0px;
 145    margin-bottom:40px;
 146    margin-top: 50px;
 147 }
 148
 149 table#liste .listeFichiers img {
 150    position: absolute;
 151     left: -9px;
 152     top: -18px;
 153 }
 154
 155 table#liste td {
 156    background-color: #7BC671;
 157    color: #20531A;
 158    padding: 3px;
 159 }
 160
 161 table#liste td.titre {
 162    font-weight: bold;
 163    cursor: pointer;
 164 }
 165
 166 table#liste td.annee {
 167    text-align: right;
 168    width: 50px;
 169 }
 170
 171 table#liste td.duree {
 172    text-align: right;
 173    width: 80px;
 174 }
 175
 176 table#liste td.lien {
 177    text-align: center;
 178    width: 15px;
 179 }
 180
 181 table#liste td.lien div {
 182    position: absolute;
 183 }
 184
 185 table#liste td.lien a {
 186    position: absolute;
 187    width: 15px;
 188    height: 19px;
 189    display: block;
 190    z-index: 1;
 191    background-image: url(../img/pomme1.png)
 192 }
 193
 194 table#liste td.lien a:hover {
 195    width: 30px;
 196    height: 38px;
 197    left: -7px;
 198    top: -9px;
 199    z-index: 10;
 200    background-image: url(../img/pomme2.png)
 201 }
 202
 203 table#liste td.fichier {
 204    text-align: center;
 205    width: 12px;
 206 }
 207
 208 table#liste td.fichier div {
 209    position: absolute;
 210 }
 211
 212 table#liste td.fichier div ul {
 213    display: block;
 214    position: absolute;
 215    left: 5px;
 216    top: 3px;
 217    padding: 2px;
 218 }
 219
 220 table#liste td.fichier div ul:hover {
 221    z-index: 4;
 222    background-color: #4F8749;
 223 }
 224
 225 table#liste td.fichier div ul > a {
 226    position: absolute;
 227    left: -3px;
 228    top: -4px;
 229    width: 12px;
 230    height: 20px;
 231    display: block;
 232    z-index: 3;
 233    background-image: url(../img/poire1.png);
 234 }
 235
 236 table#liste td.fichier div ul:hover > a {
 237    width: 24px;
 238    height: 40px;
 239    left: -8px;
 240    top: -14px;
 241    z-index: 10;
 242    background-image: url(../img/poire2.png);
 243 }
 244
 245 table#liste td.fichier div ul li {
 246    display: none;
 247 }
 248
 249 table#liste td.fichier div ul li a {
 250    color: #8DDD83;
 251 }
 252
 253 table#liste td.fichier div ul li a:hover {
 254    color: #BFF6B8;
 255 }
 256
 257 table#liste td.fichier div ul:hover li {
 258    display: block;
 259    z-index: 4;
 260    padding: 3px 8px 3px 17px;
 261    text-align: left;
 262    white-space: nowrap;
 263    color: #8DDD83;
 264    background-color: #2D5728;
 265    font-size: 10pt;
 266 }
 267
 268 table#liste td.fichier div ul:hover li:hover {
 269    background-color: #43773D;
 270 }
 271
 272 /* Pourquoi ca ne marche pas ? */
 273 /*
 274 table#liste td.fichier div ul:hover li:first-child {
 275    margin-top: 10px;
 276 }*/
 277
 278 table#liste td.titre:hover {
 279    background-color: #B1F1A9;
 280    padding: 3px;
 281 }
 282
 283 table#liste td.detail {
 284    background-color: #8DDD83;
 285    padding: 0px 0px 0px 0px;
 286 }
 287
 288 table#liste table.detail {
 289    display: none;
 290    width: 100%;
 291    padding-bottom: 10px;
 292    border-spacing: 0px 0px;
 293 }
 294
 295 table#liste table.detail td {
 296    background-color: #B1F1A9;
 297    padding: 5px 5px 5px 5px;
 298 }
 299
 300 table#liste table.detail td.affichette {
 301    width: 0px;
 302    padding: 4px;
 303 }
 304 table#liste table.detail td.titreDetail {
 305    font-weight: bold;
 306    width: 0px;
 307 }
 308 table#liste table.detail td.detail {
 309    width: 100%;
 310    padding-left: 10px;
 311 }
 312
 313 div.pied {
 314    position: fixed;
 315    bottom: 0px;
 316    height: 20px;
 317    width: 90%;
 318    z-index: 5;
 319    min-width: 630px;
 320    padding-top: 10px;
 321    background-color: #65A35D;
 322    font-size: 10pt;
 323    -moz-border-radius: 20px 20px 0px 0px;
 324 }
 325
 326 div.pied span#tempsRecherche, div.pied span#by {
 327         margin-left: 10px;
 328         margin-right: 10px
 329 }
 330
 331 div.pied a {
 332    margin-left: 10px;
 333    margin-right: 10px
 334 }
 335