www/plugins/squelette_einsteiniumist/css/style_einsteiniumist.css

   1 /*****  Feuille de Style : "squelette Einsteiniumist"  *****/
   2
   3 /** Descriptif site spip **/
   4 #descriptif_site_spip {
   5         color: #464E53;
   6     margin: auto;
   7     padding-bottom: 25px;
   8     width: 700px;
   9 }
  10
  11 /** Slideshow **/
  12 #slideshow-wrap {
  13         margin-bottom: 36px;
  14 }
  15 #slideshow {
  16         width: 960px;
  17         margin: 0 auto;
  18 }
  19
  20
  21 #slideshow-box {
  22         padding: 33px 88px 23px 88px;
  23         width: 782px;
  24         height: 255px;
  25         overflow: hidden;
  26         background: transparent url('../img/bg-slideshow.png') 0 0 no-repeat;
  27         position: relative;
  28 }
  29 #slideshow-box .list {
  30         position: relative;
  31         width: 782px;
  32         height: 255px;
  33 }
  34 #slideshow-box .list .item {
  35         width: 782px;
  36         height: 252px;
  37         position: relative;
  38         margin: 0;
  39         padding: 0;
  40 }
  41 #slideshow-box .item .image {
  42         float: left;
  43 }
  44 #slideshow-box .item .image img {
  45         border: 8px solid #fff;
  46         padding: 1px;
  47         background: #c8c8c8 none;
  48         box-shadow: 3px 3px rgba(0,0,0,0.5);
  49 }
  50 #slideshow-box .item .image a {
  51         display: block;
  52 }
  53
  54 #slideshow-box .item .meta {
  55         width: 440px;
  56         float: right;
  57         color: #fff;
  58         text-shadow: rgba(0, 0, 0, 0.5) 1px 1px;
  59         max-height: 210px;
  60         overflow: hidden;
  61 }
  62 #slideshow-box .item .meta h3 {
  63         font: normal 28px/36px 'Sansita One', cursive;
  64         margin: 0 0 0.1em 0;
  65 }
  66 #slideshow-box .item .meta a {
  67         color: #fff;
  68         text-decoration: none;
  69 }
  70 #slideshow-box .item .meta a:hover {
  71         text-decoration: underline;
  72 }
  73 #slideshow-box .item .meta .datecat {
  74         margin: 0 0 1.5em 0;
  75         font-size: 10px;
  76         line-height: 16px;
  77         text-shadow: none;
  78         color: #368d9c;
  79         text-transform: uppercase;
  80 }
  81 #slideshow-box .item .meta .read-more {
  82         margin-top: 2em;
  83 }
  84 .dir-button {
  85         width: 88px;
  86         height: 311px;
  87         position: absolute;
  88         top: 0px;
  89         cursor: pointer;
  90 }
  91 .dir-button-l {
  92         left: 0;
  93 }
  94 .dir-button-r {
  95         right: 0;
  96 }
  97 #slideshow-controller {
  98         position: absolute;
  99         left: 430px;
 100         bottom: 30px;
 101 }
 102 #slideshow-controller button {
 103         width: 17px;
 104         height: 17px;
 105         margin: 0 5px 0 0;
 106         border: 0 none;
 107         background: transparent url('../img/button-slideshow.png') 0 0 no-repeat;
 108 }
 109 #slideshow-controller button span {
 110         display: none;
 111 }
 112 #slideshow-controller button.jqc-active {
 113         background-position: 0 100%;
 114 }
 115
 116
 117 /** Featured **/
 118 #featured-wrap {
 119         background: transparent url('../img/bg-featured-wrap.png') 0 0 repeat;
 120         padding-bottom: 16px;
 121 }
 122 #featured {
 123         width: 960px;
 124         margin: 0 auto;
 125 }
 126
 127 #featured .spip_logos {
 128         float: left;
 129         padding: 1.3em;
 130 }
 131
 132 #featured .bar {
 133         width: 302px;
 134         margin: 0 27px 0 0;
 135         float: left;
 136         padding: 0;
 137 }
 138 #featured .bar-3 {
 139         margin: 0;
 140 }
 141 #featured .widget_special .title {
 142         margin: 0;
 143         padding: 0 60px;
 144         font-size: 22px;
 145         line-height: 54px;
 146         font-weight: normal;
 147         text-align: left;
 148         font-family: 'Sansita One', cursive;
 149         color: #fff;
 150 }
 151 #featured .widget_special .title a {
 152         color: #fff;
 153 }
 154 #featured .bar-1 .widget_special .title {
 155         background: transparent url('../img/bg-featured-title-1.png') 0 0 no-repeat;
 156 }
 157 #featured .bar-2 .widget_special .title {
 158         background: transparent url('../img/bg-featured-title-2.png') 0 0 no-repeat;
 159 }
 160 #featured .bar-3 .widget_special .title {
 161         background: transparent url('../img/bg-featured-title-3.png') 0 0 no-repeat;
 162 }
 163 #featured .widget_special .content {
 164         width: 281px;
 165         height: 151px;
 166         background: transparent url('../img/bg-featured-page-content.png') 0 0 no-repeat;
 167 }
 168 #featured .widget_special .content p {
 169         display: block;
 170         margin: 0;
 171         padding: 16px 16px 23px 90px;
 172         background-position: 16px 16px;
 173         background-repeat: no-repeat;
 174         color: #727272;
 175 }
 176
 177 #featured .no-underline,
 178 #featured .no-underline:hover {
 179         text-decoration: none;
 180 }
 181
 182
 183 /*** Zone 8 images ***/
 184 #featured-list {
 185         padding: 0;
 186         margin: 0;
 187         list-style: none;
 188 }
 189
 190 #featured-list .post {
 191         padding: 0;
 192         margin: 0 36px 26px 0;
 193         width: 213px;
 194         height: 176px;
 195         float: left;
 196 }
 197 #featured-list .post:nth-child(4n+4) {
 198         margin-right: 0;
 199 }
 200 #featured-list .post:last-child {
 201         margin-bottom: 0;
 202 }
 203 #featured-list .post a {
 204         display: block;
 205         border: 5px solid #93989b;
 206         border-radius: 3px;
 207         width: 203px;
 208         height: 166px;
 209         overflow: hidden;
 210 }
 211 #featured-list .post a:hover {
 212         border-color: #293238;
 213 }
 214 #featured-list .post img {
 215         -ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* Hack IE8 */
 216     filter: alpha(opacity = 100); /* Hack IE 5-7 */
 217          -webkit-transition: opacity 0.5s ease-in-out;/* transition pour Chrome et Safari */
 218     -moz-transition: opacity 0.5s ease-in-out;/* transition pour Firefox */
 219     -o-transition: opacity 0.5s ease-in-out;/* transition pour Opéra */
 220     transition: opacity 0.5s ease-in-out;
 221 }
 222 #featured-list .post:hover img {
 223         border-color: #293238;
 224         opacity: 0.7;
 225         -ms-filter:"prodig:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* Hack IE 8 */
 226     filter: alpha(opacity = 70);
 227 }
 228 #featured-list .post:hover .info_art {
 229         height: 156px;
 230         visibility: visible;
 231 }
 232 .info_art {
 233         visibility: hidden;
 234         display: block;
 235         height: 0px;
 236         width: 130px;
 237         padding: 5px;
 238         opacity: 0.8;
 239         background-color: black;
 240         position: absolute;
 241         margin-top: -166px;
 242         overflow: hidden;
 243         -webkit-transition: height 0.4s ease-in-out;/* transition pour Chrome et Safari */
 244     -moz-transition: height 0.4s ease-in-out;/* transition pour Firefox */
 245     -o-transition: height 0.4s ease-in-out;/* transition pour Opéra */
 246     transition: height 0.4s ease-in-out;
 247 }
 248 .info_art h3 {
 249         line-height: 1em;
 250 }
 251 .info_art p {
 252         text-align: inherit;
 253         color: #fff;
 254 }
 255
 256 /** Contact Area **/
 257 #contact-area {
 258         width: 960px;
 259         margin: 0 auto 30px;
 260 }
 261 #contact-area ul {
 262         padding: 0;
 263         list-style: none;
 264 }
 265 #contact-area ul li {
 266     margin: 15px 0;
 267 }
 268 .contact-info {
 269         width: 350px;
 270         float: left;
 271 }
 272 #contact-area .contact-info ul li {
 273         background: url("../img/bd-contact-info-field.png") repeat-x scroll 0 100% transparent;
 274     margin: 15px 0;
 275     padding-bottom: 20px;
 276 }
 277 .contact-info h2 {
 278         font: normal 38px/46px 'Sansita One', cursive;
 279         margin: 0 0 0.5em 0;
 280         color: #000;
 281         text-transform: uppercase;
 282 }
 283 .contact-info p {
 284         display: block;
 285         margin: 0;
 286         padding: 0;
 287         color: #464E53;
 288 }
 289 .contact-info .field {
 290         padding: 0 0 29px 0;
 291         margin: 0 0 24px 0;
 292         background: transparent url('../img/bd-contact-info-field.png') 0 100% repeat-x;
 293 }
 294 .contact-info .field address {
 295         display: block;
 296 }
 297 .contact-info .field p {
 298         font-style: normal;
 299         padding: 0 0 0 64px;
 300         min-height: 44px;
 301         background: transparent url('') 0 0 no-repeat;
 302 }
 303 .contact-info .field-email p a {
 304         color: #464e53;
 305 }
 306 .contact-form {
 307         float: right;
 308         width: 545px;
 309         background: #6bc1d0 none;
 310         color: #fff;
 311         border-radius: 10px;
 312 }
 313 .contact-form .formulaire_spip {
 314         padding: 0;
 315         margin: 0;
 316 }
 317 .contact-form fieldset legend {
 318         display: none;
 319 }
 320 .contact-form form {
 321         padding: 30px;
 322         margin: 0;
 323 }
 324 #contact-area .contact-form .editer {
 325         display: block;
 326         margin: 0 0 12px 0;
 327         padding: 0;
 328         height: 32px;
 329         clear: none;
 330         text-align: inherit;
 331 }
 332 .contact-form form .contact-form-contact {
 333         height: auto;
 334 }
 335 #contact-area .contact-form .editer label {
 336         font-weight: bold;
 337         font-size: 14px;
 338         line-height: 32px;
 339         display: block;
 340         float: left;
 341         text-align: right;
 342         margin-right: 15px;
 343         padding: 0;
 344         width: 124px;
 345 }
 346 .contact-form form .field {
 347         display: block;
 348         float: left;
 349 }
 350 .contact-form .formulaire_ecrire_auteur ul li input {
 351         border: 0 none;
 352         border-radius: 10px;
 353         margin: 0;
 354         padding: 9px;
 355         width: 328px;
 356         font-size: 14px;
 357         line-height: 14px;
 358 }
 359 .contact-form form textarea {
 360         border: 0 none;
 361         border-radius: 10px;
 362         margin: 0;
 363         padding: 9px;
 364         width: 328px;
 365         height: 102px;
 366         font-size: 14px;
 367         line-height: 16px;
 368         max-width: 328px;
 369 }
 370 #contact-area .contact-form .saisie_texte_message_auteur {
 371         height: auto;
 372 }
 373 #contact-area .contact-form .boutons {
 374         padding-left: 139px;
 375         height: auto;
 376         margin: 0;
 377         text-align: inherit;
 378 }
 379 #contact-area .previsu .boutons {
 380         float: right;
 381 }
 382 .contact-form .formulaire_spip .submit {
 383         padding: 0 10px;
 384         text-transform: uppercase;
 385         font-weight: bold;
 386         font-size: 14px;
 387         line-height: 34px;
 388         height: 34px;
 389         text-align: center;
 390         margin: 0 auto;
 391         color: #fff;
 392         background: #26333c none;
 393         cursor: pointer;
 394         border: 0 none;
 395         border-radius: 10px;
 396 }
 397 .reponse_formulaire_ok {
 398         padding: 10px;
 399 }
 400
 401
 402 /*** Sidebar ***/
 403 #bloc_extra {
 404         width: 260px;
 405 }
 406 #bloc_extra textarea {
 407         width: 248px;
 408         max-width: 248px;
 409 }
 410
 411
 412 /*** Forum ***/
 413 .logo_auteur_forum img {
 414         max-height: 70px;
 415         max-width: 70px;
 416         border: 1px dashed #CCCCCC;
 417         padding: 2px;
 418         margin-top: 5px;
 419 }