/*-- * WWW.ICARE-NET.COM - agence web * * Date de Création : 17-06-2009 * Designer : "Nom du designer" * * !!! A LIRE !!! * * Cette css n'est qu'une adaptation au gabarit des pages actuelles du dossier client ICARE * Tous les éléments auquels vous avez été habitués sont concervés mais ont, pour certains, peut être été * déplacés dans une autre CSS (ex : Les h1, h2, h3 > reset.css ). * * Des nouveautés sont apparues : * reset.css : Permet de réinitialiser les styles afin d'optimiser la compatibilité entre les navigateurs * fix-ie.css : Permet de corriger facilement les bug récurant d'IE6. * Code a placer dans le [if IE]> ) * Ici nous définirons une class ".block" pour tout les blocks et une class ".block-nomdublock" pour * personnaliser un block comme le "top-vente" ou la "newsletter", pouvant avoir des caractéristiques communes. */ /* APPEL DES CSS ==========================================================================================*/ /* <<< css de compatibilité */ @import "reset.css"; @import "fix-ie.css"; /* <<< css d'impression */ @import "print.css"; /* <<< css des Formulaires de Contact */ @import "formulaire.css"; /* <<< css des Mise en Forme */ @import "jquery.lightbox-0.5.css"; @import "jquery.ad-gallery.css"; /* ======================================================================================================= */ /***********************************************************************************************************/ /** STRUCTURE DU SITE **/ /***********************************************************************************************************/ /* LAYOUT =================================================================================================*/ .general { margin:0 auto; padding:0; width:100%; } .content { margin:0 auto; padding:10px 60px; width: 480px; background-color:#fff; } /* Colone Central */ .col-main { position:relative; float:right; width:600px;} /* Colone de Gauche */ .col-left { position:relative; float:left; left:0px; width:300px; } /* ======================================================================================================= */ /* HEADER ================================================================================================ */ .header { margin:0 auto 20px; padding:0; width:600px; position: relative; } .header .logo { display:block; margin:0; width:300px; } /* ======================================================================================================= */ /* FOOTER ================================================================================================ */ .footer { margin:20px auto 0; padding:10px; width:580px; text-align: center; color: #fff; background-color:#e21d22; } .footer p { margin:0 auto; text-align:left; clear:both; width:980px; } .footer a { color:#fff; text-decoration:none; } .footer a:hover { text-decoration:underline; } .footer .vcard { padding:10px 0 0; } .footer .adr { color:#fff; } .footer .adr .org { font-weight:bold; } /* ======================================================================================================= */ /* NAVIGATION ==============================================================================================*/ /* Main Menu >>>> ne pas oublier de mettre un clear:both; après votre menu */ .menu { position:relative; height:30px; background-color:#e21d22; } .menu, .menu ul { padding:0 0 0 10px; margin:0; list-style:none;} .menu li { float:left; } .menu li a {float:left; display:block; height:38px; line-height:38px; padding:0 17px 0 10px; font:bold 11px/38px arial, sans-serif; text-align:center; color:#333; text-decoration:none;} .menu li a:hover, .menu li a.current {color:#fff; text-align:center;} .pager { text-align:right; } /* ======================================================================================================= */ /***********************************************************************************************************/ /** CONTENUS DU SITE **/ /***********************************************************************************************************/ /* BLOCKS ================================================================================================ */ /* <<<< NB: Les class ".block" définisse l'aspect commun des éléments de class "block" */ .block { margin:10px 0; /*border:1px solid red;*/ } .block .block-titre { padding:0; } .block .block-content { padding:10px 0 0 0; } /* <<<< NB: Les Block ci-dessous ne sont qu'a titre d'exemple et sont ici vierges. Vous pouver les utiliser ou créer vos propre blocks. */ /* Presse */ .block-presse { margin:10px 0; padding:0 0 10px 0; border-bottom:1px solid #ddd; } .block-presse .block-title h2 { float:left; width:350px; font:normal 24px/1em arial, helvetica, sans-serif; color:#e31d22; } .block-presse .block-title .logo { float:right; width:80px; } .block-presse .block-title .desc { clear:both; padding:10px 0; font:bold 12px/1em arial, helvetica, sans-serif; } .block-presse .block-links { clear:both; margin:20px 0; } .block-presse .block-links .link { display:block; font: normal 14px/1em arial,helvetica,sans-serif; color:#e21d22; } .block-presse .block-links a { font:normal 11px/1em arial, helvetica, sans-serif; text-decoration:none; color:#333; } .block-presse .block-links a:hover { text-decoration:underline; color:#e21d22; } .block-presse .block-gallery {} .block-presse .block-gallery .view { padding:10px 0; } .block-presse .block-gallery .view a { filter:alpha(opacity=50); -moz-opacity : 0.5; opacity : 0.5; } .block-presse .block-gallery .view a:hover { filter:alpha(opacity=100); -moz-opacity : 1; opacity : 1; } /* Artistes */ /* <<< liste */ .block-artistes { margin:20px 0; } .block-artistes h2 { margin:0 0 5px 0; font:normal 16px/1em arial, helvetica, sans-serif; color:#e21d22; } .block-artistes ul {} .block-artistes li {} .block-artistes li a { color:#333; text-decoration:none; } .block-artistes li a:hover { color:#e21d22; text-decoration:underline; } /* <<< fiche */ .block-artiste_entete {} .block-artiste_entete h2 { font:normal 18px/1em verdana, Helvetica, sans-serif; color:#333; } .block-artiste_entete h2 .info { font:bold 11px/1em verdana, Helvetica, sans-serif; color:#999; } .block-artiste_entete ul { padding:20px 0 0 0; } .block-artiste_entete li {} .block-artiste_entete li a { display:block; font: bold 14px/1em arial,helvetica,sans-serif; text-decoration:none; color:#e21d22; } .block-artiste_entete li a:hover { text-decoration:underline; } .block-artiste_gallery { margin:40px 0 0 0;} .block-artiste_gallery h3 { margin:50px 0 0; font:bold 14px/1em Arial, Helvetica, sans-serif; color:#e21d22;} .block-artiste_details {} .block-artiste_details h3 { margin:50px 0 0; font:bold 14px/1em Arial, Helvetica, sans-serif; color:#e21d22;} .block-artiste_details p { margin:10px 0; font:normal 12px/1em verdana, Helvetica, sans-serif; color:#333; clear:both; } .block-artiste_details div.annee_artiste { margin:10px 0; float:left; width: 40px; } .block-artiste_details div.desc_artiste { margin:10px 0; width: 440px; float:right; } /* Edition */ .block-edition { margin: 20px 0 0 0; padding:0 0 20px 0; border-bottom:1px solid #ddd; } .block-edition .view { float:left; width:140px; } .block-edition .info { float:right; width:300px; } .block-edition .info h2 { margin: 0 0 20px 0; font:bold 18px/1em arial, helvetica, sans-serif; color:#e21d22; } .block-edition .info p { margin:10px 0; font-weight:bold; } .block-edition .info span { font-weight:normal; } .block-edition .info .prix { color:#e21d22; } .block-edition .info a { padding:2px; background:#e21d22; text-align:center; color:#fff; text-decoration:none; } .block-edition .info a:hover { text-decoration:underline;} .last {border:none} /* Exposition */ .annee { padding:0 0 0 10px; background:#eee; font-weight:bold; color:#333; } .block-exposition{ margin: 20px 0 0 0; padding:0 0 20px 0; /*border-bottom:1px solid #ddd;*/ } .block-exposition h2 { float:left; width:350px; font:normal 18px/1em arial, helvetica, sans-serif; color:#e31d22; } .block-exposition .logo { float:right; width:80px; } .block-exposition .date { clear:both; padding:10px 0; font:normal 12px/1em arial, helvetica, sans-serif; } /* Actualite */ .block-actu_entete {} .block-actu_entete h2 { font:normal 20px/1.2em verdana, Helvetica, sans-serif; color:#e31d22; text-transform:uppercase; } .block-actu_entete h2 .info { display:block; padding:10px 0 20px 0 ; font:bold 11px/1em verdana, Helvetica, sans-serif; color:#999; } .block-actu_entete .ancres { margin:20px 0; } .block-actu_entete ul {} .block-actu_entete li {} .block-actu_entete li a { display:block; font: bold 14px/1em arial,helvetica,sans-serif; text-decoration:none; color:#e21d22; } .block-actu_entete li a:hover { text-decoration:underline; } .block-actu_content { margin:20px 0; } .block-actu_content h3 { margin:40px 0 5px 0; color:#e31d22; } .block-actu_content p { margin:10px 0;} .block-actu_content .view { padding:10px 0; } /* Contact */ .block-contact_entete h2 { margin:40px 0 5px 0; color:#e31d22; } .block-contact_entete p { margin:10px 0;} /* ======================================================================================================= */ /* ADVICE =================================================================================================*/ #advice_contener { position:absolute; width:100%; height:100%; margin:0 auto; background:#000; filter:alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9; z-index:1000; cursor:pointer; overflow:hidden;} #advice { position:relative; display:block; margin:200px auto 100px auto; width:300px; height:200px; filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1; } /* ======================================================================================================= */ /***********************************************************************************************************/ /** OUTILS REFERENCEMENT ET COMMUNAUTAIRE **/ /***********************************************************************************************************/ /* REFERENCEMENT ET ANNUAIRE ==============================================================================*/ /* Référencement*/ #referencement { margin-right: auto; margin-left: auto; font-size: 11px; text-align: center; padding-top: 50px; color: #666; } #referencement a { color: #999; text-decoration: none; } #referencement a:hover { color: #666; } #referencement a img { border: none; padding: 3px; } /* Annuaire */ #annuaire { margin:0; padding:10px; } #annuaire h1 { font-size:18px; } #annuaire p { color:#000; } #annuaire img { padding:5px; } #annuaire a { color:#990000; text-decoration:none; } #annuaire a:hover { color:#999; } /* ======================================================================================================= */ #construction { display: block; position: absolute; right: 10px; border: 2px solid #fff; top: 10px; width: 170px; } #construction p { color: #fff; background-color:#CC0000; font: bold 12px Arial; padding: 10px; margin: 10px; text-align: center; }