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