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-image: url(../img/clear.png);
 103    background-position: center;
 104    background-repeat: no-repeat;
 105    vertical-align: top;
 106 }
 107
 108 div.entete form p {
 109    color: black;
 110    font-size: 7pt;
 111    margin-top: 1px;
 112 }
 113
 114 div.entete form p label {
 115    margin-right: 4px;
 116 }
 117
 118 div.contenu {
 119    padding-top: 50px;
 120    min-width: 630px;
 121    min-height: 100%;
 122    background-color: #7BC671;
 123 }
 124
 125 table#liste {
 126    width: 100%;
 127    border-spacing: 0px 0px;
 128    margin-bottom:40px;
 129    margin-top: 10px;
 130 }
 131
 132 table#liste .listeFichiers img {
 133    position: absolute;
 134     left: -9px;
 135     top: -18px;
 136 }
 137
 138 table#liste td {
 139    background-color: #7BC671;
 140    color: #20531A;
 141    padding: 3px;
 142 }
 143
 144 table#liste td.titre {
 145    font-weight: bold;
 146    cursor: pointer;
 147 }
 148
 149 table#liste td.annee {
 150    text-align: right;
 151    width: 50px;
 152 }
 153
 154 table#liste td.duree {
 155    text-align: right;
 156    width: 80px;
 157 }
 158
 159 table#liste td.lien {
 160    text-align: center;
 161    width: 15px;
 162 }
 163
 164 table#liste td.lien div {
 165    position: absolute;
 166 }
 167
 168 table#liste td.lien a {
 169    position: absolute;
 170    width: 15px;
 171    height: 19px;
 172    display: block;
 173    z-index: 1;
 174    background-image: url(../img/pomme1.png)
 175 }
 176
 177 table#liste td.lien a:hover {
 178    width: 30px;
 179    height: 38px;
 180    left: -7px;
 181    top: -9px;
 182    z-index: 10;
 183    background-image: url(../img/pomme2.png)
 184 }
 185
 186 table#liste td.fichier {
 187    text-align: center;
 188    width: 12px;
 189 }
 190
 191 table#liste td.fichier div {
 192    position: absolute;
 193 }
 194
 195 table#liste td.fichier div ul {
 196    display: block;
 197    position: absolute;
 198    left: 5px;
 199    top: 3px;
 200    padding: 2px;
 201 }
 202
 203 table#liste td.fichier div ul:hover {
 204    z-index: 4;
 205    background-color: #4F8749;
 206 }
 207
 208 table#liste td.fichier div ul > a {
 209    position: absolute;
 210    left: -3px;
 211    top: -4px;
 212    width: 12px;
 213    height: 20px;
 214    display: block;
 215    z-index: 3;
 216    background-image: url(../img/poire1.png);
 217 }
 218
 219 table#liste td.fichier div ul:hover > a {
 220    width: 24px;
 221    height: 40px;
 222    left: -8px;
 223    top: -14px;
 224    z-index: 10;
 225    background-image: url(../img/poire2.png);
 226 }
 227
 228 table#liste td.fichier div ul li {
 229    display: none;
 230 }
 231
 232 table#liste td.fichier div ul li a {
 233    color: #8DDD83;
 234 }
 235
 236 table#liste td.fichier div ul li a:hover {
 237    color: #BFF6B8;
 238 }
 239
 240 table#liste td.fichier div ul:hover li {
 241    display: block;
 242    z-index: 4;
 243    padding: 3px 8px 3px 17px;
 244    text-align: left;
 245    white-space: nowrap;
 246    color: #8DDD83;
 247    background-color: #2D5728;
 248    font-size: 10pt;
 249 }
 250
 251 table#liste td.fichier div ul:hover li:hover {
 252    background-color: #43773D;
 253 }
 254
 255 /* Pourquoi ca ne marche pas ? */
 256 /*
 257 table#liste td.fichier div ul:hover li:first-child {
 258    margin-top: 10px;
 259 }*/
 260
 261 table#liste td.titre:hover {
 262    background-color: #B1F1A9;
 263    padding: 3px;
 264 }
 265
 266 table#liste td.detail {
 267    background-color: #8DDD83;
 268    padding: 0px 0px 0px 0px;
 269 }
 270
 271 table#liste table.detail {
 272    display:none;
 273    width:100%;
 274    padding-bottom: 10px;
 275    border-spacing: 0px 0px;
 276 }
 277
 278 table#liste table.detail td {
 279    padding: 3px;
 280    background-color: #B1F1A9;
 281 }
 282
 283 table#liste table.detail td.titreDetail {
 284    font-weight: bold;
 285 }
 286
 287 div.pied {
 288    position: fixed;
 289    bottom: 0px;
 290    height: 20px;
 291    width: 90%;
 292    z-index: 5;
 293    min-width: 630px;
 294    padding-top: 10px;
 295    background-color: #65A35D;
 296    font-size: 10pt;
 297    -moz-border-radius: 20px 20px 0px 0px;
 298 }
 299
 300 div.pied span#tempsRecherche, div.pied span#by {
 301         margin-left: 10px;
 302         margin-right: 10px
 303 }
 304
 305 div.pied a {
 306    margin-left: 10px;
 307    margin-right: 10px
 308 }
 309