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