/* ======================================================================================= Feuille de style originelle de CreaSite 63 CMS par CreaSite63.com L'utilisation des CSS peut vous simplifier la vie. Ne copiez pas cette feuille de style juste pour la copier. Si les CSS vous sont etrangères,essayez de comprendre sans faire du simple copier-coller. Merci. Nom De L'Auteur:Nour-Eddine El Mrini Site De L'Auteur:www.creasite63.com Nom Du CSS:CreaSite 63 CMS Commentaires & Dispositions: Marges Externes / Marges Internes:T R B L / TB LR / T R BL Ordre Des Liens:LVHA http://www.creasite63.com ======================================================================================= */ /***********************************************************************************/ /**************************[ DÉBUT DE LA FEUILLE DE STYLE ]**************************/ /***********************************************************************************/ /* POUR COMMENCER ON SUPPRIME LES MARGES EXTÉRIEURES ET INTÉRIEURES,BORDURES,DECORATIONS ETC DE TOUS LES ÉLEMENTS */ *{margin:0;padding:0;outline:none;outline:0;text-decoration:none;list-style-type:none;} /* Autres Reset */ a img{border:none;} hr{clear:both;visibility:hidden;} /* Autres Reset */ /* POUR COMMENCER ON SUPPRIME LES MARGES EXTÉRIEURES ET INTÉRIEURES,BORDURES,DECORATIONS ETC DE TOUS LES ÉLEMENTS */ /* LAYOUT GLOBAL DE LA PAGE:DISPOSITION DES ÉLEMENT PRINCIPAUX */ html,body{height:100%;text-align:center;/* MERCI IE ! */} #page{min-height:100%;height:auto !important;height:100%;margin:0 auto -40px auto;} #ipage{float:left;margin:15px auto 0 auto;} #droite,#gauche{min-height:100%;height:auto !important;height:100%;} #droite p{margin:0 0 10px 0;} #pied,.pousse{height:40px;clear:both;} #pied{padding-top:15px;border-top:2px solid #222;margin:0 auto;} /*===============*/ a{color:#FF6533;} a:hover,a:focus{color:#FF4C00;} /*===============*/ /* LAYOUT GLOBAL DE LA PAGE:DISPOSITION DES ÉLEMENT PRINCIPAUX */ /* COULEURS */ body{background:#000;color:#eee;} #head{margin:15px auto 0 auto;background:#000 url(head.jpg) no-repeat;width:770px;height:40px;position:relative;text-align:left;} #droite{background:#000;} #gauche{background:#000;} #pied{color:#555;} #searchstyle select{background:#333;color:#ccc;font-family:Tahoma,Verdana,Helvetica,sans-serif;outline:0;min-width:250px;} #searchstyle input{outline:0;background:#222;border:1px solid #333;color:#aaa;font-family:Tahoma,Verdana,Helvetica,sans-serif;} /* COULEURS */ /* POLICES,TAILLES ETC */ body{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:1em;} #page{width:780px;font-size:0.75em;} #ipage{width:770px;margin-bottom:50px;} #droite{float:right;width:580px;text-align:left;} #gauche{float:left;width:170px;text-align:left;margin-left:5px;} #pied{width:780px;font-size:0.65em;} /* POLICES,TAILLES ETC */ /* ICI ON COMMENCE A METTRE EN VRAC LES DIFFÉRENTS ÉLEMENTS DE LA PAGE */ #rstyle{position:absolute;right:8px;top:8px;} #nav_gauche{margin:10px 2px;border-top:1px solid #444;border-bottom:1px solid #444;} #infogauche{margin:5px 2px;border:1px solid #444;} #infogauche .note{background:#555;color:#fff;border-bottom:1px solid #444;padding:3px;font-weight:bold;} #infogauche .tip{background:#bbb;color:#eee;padding:3px;font-weight:bold;text-align:justify;} #nav_gauche h2{font-variant:small-caps;font-weight:900;color:#777;} #nav_gauche ul{padding:5px 0px;} #nav_gauche li a{display:block;padding:3px 0px;width:165px;background:#000;font-variant:small-caps;font-weight:900;} #nav_gauche li a:link,#nav_gauche li a:visited{color:#fff;} #nav_gauche li a:hover{background:#fbac3a url(bgvig.png);color:#ff0;text-align:right;padding-right:5px;width:160px;} #droite h2{line-height:24px;font-variant:small-caps;border-top:1px solid #A50328;border-bottom:1px solid #A50328;font-weight:900;font-family:"Trebuchet MS",Times,serif;color:#fff;margin-bottom:10px;} #droite h2:hover{border-top:1px solid yellow;border-bottom:1px solid yellow;color:#666;} #droite h3{border-bottom:1px solid #930;color:#960;font-size:1em;} #head p{line-height:40px;padding-left:8px;} #preart{text-align:justify;float:right;} .vignette{width:188px;height:210px;border:1px solid #000;float:left;position:relative;margin:0 0 15px 0;background:#111;} .vignette img:hover{border:2px solid #555;width:184px;height:176px;cursor:pointer;} .m5{margin:0 5px;} .vignette p{font-size:10px;color:#fff;text-align:center;background:#f08e00;border:1px solid #fdbe00;width:186px;} .vignimage{float:left;margin-right:10px;padding:5px;background:#333;border:1px solid #930;} .vignimage:hover{background:#fc3;} .start{filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;} .reset{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} .lienspied{padding:8px 0 8px 0;} .retourtop{padding-bottom:8px;} .infobulle{background:#E0ECFF url(information.png) 15px 50% no-repeat;padding:5px 20px 5px 45px;border:1px solid #A5C9FF;color:#135;margin:5px 0 5px 0;font-size:0.65em;font-family:verdana;} .vigLB{padding:3px;background:#fff;border:#bbb;margin-right:8px;margin-bottom:8px;} #listeartiste{margin:0 0 10px 0;} #listeartiste h3{clear:both;margin:10px 0 10px 0;} /*.cb{ margin-top:15px; clear:both; }*/ .prix{font-size:18px;color:#fc0;font-weight:bold;border:1px solid #111;margin:15px 25px;} .left{text-align:left;} .vigart{float:left;margin:0 10px 7px 0;} .jaunec{color:#000;background:#FFCC33;} .jaunef{color:#000;background:#F5B800;} .jaunec:hover,.jaunef:hover{background:#ff0;color:#000;cursor:crosshair;} /* ICI ON COMMENCE A METTRE EN VRAC LES DIFFÉRENTS ÉLEMENTS DE LA PAGE */ /* On charge les Classes LightBox */ #lightbox{position:absolute;left:0;width:100%;z-index:100;text-align:center;line-height:0;} #lightbox img{width:auto;height:auto;} #lightbox a img{border:none;} #outerImageContainer{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto;} #imageContainer{padding:10px;} #loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0;} #hoverNav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10;} #imageContainer>#hoverNav{left:0;} #hoverNav a{outline:none;} #prevLink,#nextLink{width:49%;height:100%;background-image:url(data:image/gif;base64,AAAA);/* Trick IE into showing hover */ display:block;} #prevLink{left:0;float:left;} #nextLink{right:0;float:right;} #prevLink:hover,#prevLink:visited:hover{background:url(../images/prevlabel.gif) left 15% no-repeat;} #nextLink:hover,#nextLink:visited:hover{background:url(../images/nextlabel.gif) right 15% no-repeat;} #imageDataContainer{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;width:100%;} #imageData{padding:0 10px;color:#666;} #imageData #imageDetails{width:70%;float:left;text-align:left;} #imageData #caption{font-weight:bold;} #imageData #numberDisplay{display:block;clear:left;padding-bottom:1.0em;} #imageData #bottomNavClose{width:66px;float:right;padding-bottom:0.7em;outline:none;} #overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;background-color:#000;} /* On charge les Classes LightBox */ /*On charge les classes liées à la gestion de la pagination */ div.pagination{padding:3px;margin:3px;text-align:center;color:#a0a0a0;font-size:80%;} div.pagination a{border:1px solid #909090;margin-right:3px;padding:2px 5px;background-image:url('bar.gif');background-position:bottom;text-decoration:none;color:#c0c0c0;} div.pagination a:hover,div.pagination a:active{border:1px solid #f0f0f0;background-image:url(invbar.gif);background-color:#404040;color:#ffffff;} div.pagination span.courante{margin-right:3px;padding:2px 5px;border:1px solid #ffffff;font-weight:bold;background-color:#606060;color:#ffffff;} div.pagination span.desactive{margin-right:3px;padding:2px 5px;border:1px solid #606060;color:#808080;} .preart{text-align:justify;} .lirelasuite{clear:both;margin:12px 0;padding:2px 5px 2px 5px;background:#444;border:1px solid #888;} .left{text-align:left;} /*On charge les classes liées à la gestion de la pagination */ /* Boutons Liens */ .buttons a,.buttons button{display:block;float:left;margin:0 7px 0 0;background-color:#f5f5f5;border:1px solid #dedede;border-top:1px solid #eee;border-left:1px solid #eee;font-family:"Lucida Grande",Tahoma,Arial,Verdana,sans-serif;font-size:100%;line-height:130%;text-decoration:none;font-weight:bold;color:#565656;cursor:pointer;padding:5px 10px 6px 7px;border-radius:5px 5px;-moz-border-radius:5px;/* Links */} .buttons button{width:auto;overflow:visible;padding:4px 10px 3px 7px;border-radius:5px 5px;-moz-border-radius:5px;/* IE6 */} .buttons button[type]{padding:5px 10px 5px 7px;/* Firefox */ line-height:17px;border-radius:5px 5px;-moz-border-radius:5px;/* Safari */} *:first-child+html button[type]{padding:4px 10px 3px 7px;/* IE7 */} .buttons button img,.buttons a img{margin:0 3px -3px 0 !important;padding:0;border:none;width:16px;height:16px;} button:hover,.buttons a:hover{background-color:#E6EFC2;border:1px solid #C6D880;color:#529214;} .buttons a:active{background-color:#6299c5;border:1px solid #6299c5;color:#fff;} /* POSITIVE */ button.positive,.buttons a.positive{color:#529214;} .buttons a.positive:hover,button.positive:hover{background-color:#E6EFC2;border:1px solid #C6D880;color:#529214;border-radius:5px 5px;-moz-border-radius:5px;} .buttons a.positive:active{background-color:#529214;border:1px solid #529214;color:#fff;} /* NEGATIVE */ .buttons a.negative,button.negative{color:#d12f19;} .buttons a.negative:hover,button.negative:hover{background:#fbe3e4;border:1px solid #fbc2c4;color:#d12f19;} .buttons a.negative:active{background-color:#d12f19;border:1px solid #d12f19;color:#fff;} /* Boutons Liens */ /* On Charge Les Gliders */ div.scroller{width:578px;height:255px;overflow:hidden;border:1px solid #333;} div.scroller div.section{width:578px;height:255px;overflow:hidden;float:left;padding:5px;} div.scroller div.content{width:10000px;} div#section1{background:#111;color:#ddd;} div#video{background:#111 url(tutovid.gif) no-repeat 95% 50%;color:#ddd;} #videos{} .controls{text-align:center;margin-top:8px;} /* On Charge Les Gliders */ /* Boites Alertes Infos Messages Etc */ .alert{background:#fbe3e4 url(exclamation.png) 15px 50% no-repeat;padding:5px 20px 5px 45px;border:1px solid #fbc2c4;color:#d12f19;margin:5px 0 5px 0;} .info{background:#E0ECFF url(information.png) 15px 50% no-repeat;padding:5px 20px 5px 45px;border:1px solid #A5C9FF;color:#135;margin:0 0 5px 0;} .ok{background:#E6EFC2 url(tick.png) 15px 50% no-repeat;padding:5px 20px 5px 45px;border:1px solid #C6D880;color:#529214;margin:5px 0 5px 0;} /* Boites Alertes Infos Messages Etc */ /* Tableaux */ #dateconcert table{margin-top:10px;border:1px solid #333;border-collapse:collapse;width:100%;} #dateconcert th{border:1px solid #333;padding:5px;background:#930;color:#fff;} #dateconcert td{border:1px solid #333;padding:5px;} #panier{margin-top:10px;border:1px solid #333;border-collapse:collapse;width:100%;} #panier th{border:1px solid #333;padding:5px;background:#930;color:#fff;} #panier td{border:1px solid #333;padding:5px;} /* tableaux */ /* Contact */ form p{margin:1em 0;} form p.double{/* Empêcher le dépassement des flottants */ overflow:hidden;/* Idem pour IE6 */ width:100%;} form p.double label{float:left;width:150px;text-align:right;font-weight:bold;cursor:pointer;} form p.double label span.info{display:block;margin-top:.2em;font-size:.8em;font-weight:normal;cursor:default;} form p.double input, form p.double select, form p.double textarea{width:250px;margin-left:12px;padding:2px 4px;} form p.double textarea{padding:2px 0 0 4px;width:320px;height:6em;} form p.simple{margin-left:160px;} /* Contact */ /* Loader Ajax Etc */ .waiting { background-image:url('waiting.gif'); background-repeat:no-repeat; background-position:center center; background-color:white; height:100px; } .bigWaiting { background-image:url('bigWaiting.gif'); background-repeat:no-repeat; background-position:center 20%; background-color:white; } .blackWaiting { background-image:url('blackWaiting.gif'); background-repeat:no-repeat; background-position:center center; background-color:black; } .ajax_attente { background-image:url('bigBlackWaiting.gif'); background-repeat:no-repeat; background-position:center center; background-color:black; } /* input.required, textarea.required { border: 1px solid #00A8E6; } input.validation-failed, textarea.validation-failed { border: 1px solid #FF3300; color : #FF3300; font-weight:bold; background:#fbe3e4; } input.validation-passed, textarea.validation-passed { border: 1px solid #00CC00; color : #000; } */ .validation-advice { margin: 2px 0; padding: 1px; color :#FF3300; font-weight: bold; text-align:center; } .custom-advice { margin: 5px 0; padding: 5px; background-color: #C8AA00; color : #FFF; font-weight: bold; } .descriptif { margin-left:120px;height:99px;border:1px solid #333; } .descriptif:hover { border:1px solid #666; } /* Loader Ajax Etc */ /* Modal */ #MB_overlay { position: absolute; margin: auto; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background-color: #000!important; } #MB_overlay[id] { position: fixed; } #MB_window { position: absolute; top: 0; border: 0 solid; text-align: left; z-index: 10000; } #MB_window[id] { position: fixed!important; } #MB_frame { position: relative; background-color: #EFEFEF; height: 100%; } #MB_header { margin: 0; padding: 0; } #MB_content { padding: 6px .75em; overflow: auto; } #MB_caption { font: bold 100% "Lucida Grande", Arial, sans-serif; text-shadow: #FFF 0 1px 0; padding: .5em 2em .5em .75em; margin: 0; text-align: left; color:#fff; } #MB_close { display: block; position: absolute; right: 5px; top: 4px; padding: 2px 3px; font-weight: bold; text-decoration: none; font-size: 18px; } #MB_close:hover { background: transparent; color:#ff0; } #MB_loading { padding: 1.5em; text-indent: -10000px; background: transparent url(spinner.gif) 50% 0 no-repeat; } /* Color scheme */ #MB_window { background-color: #EFEFEF; color: #000; } #MB_content { border-top: 1px solid #F9F9F9; } #MB_header { background-color: #993300; border-bottom: 1px solid #CCC; color:#fff; } #MB_caption { color: #fff; } #MB_close { color: #f00; font-size:20px; } #MB_close:hover { color: #ff0; } /* Alert message */ .MB_alert { margin: 10px 0; text-align: center; } /* Modal */ /**************************************/ /* tab */ .onglet { clear: both; display: none; background: #3e3e3e; padding: 1em; margin-top:-6px; } .onglet.active-tab-body { display: block; } #tabs { list-style: none; margin:0; } #tabs li { float: left; } #tabs li a.first { margin-left:0; } #tabs a { float: left; padding: 5px 8px; margin-left: 6px; background-color: #6d6d6d; text-decoration: none; color: #999999; } #tabs a.active-tab { background-color: #3e3e3e; border-top: 3px solid #fc3; padding-top: 3px; color: #ccc; } #tinybox { position:absolute; display:none; padding:10px; background:#333 url(wait.gif) no-repeat 50% 50%; border:5px solid #930; z-index:2000;border-radius:5px 5px;-moz-border-radius:5px; -moz-box-shadow:0 0 5px 5px #333; -webkit-box-shadow:0 0 5px 5px #333; box-shadow:0 0 5px 5px #333;} #tinymask {cursor:pointer;position:absolute; display:none; top:0; left:0; height:100%; width:100%; background:#000; z-index:1500} #tinycontent {position:relative;background:#333} #closex {position:absolute; top:-10px; right:-10px; z-index:80000; background-image:url(fermer.png); background-repeat:no-repeat; width:24px; height:24px; padding:0px; margin:0px;cursor: hand; cursor: pointer;} /***********************************************************************************/ /***************************[ FIN DE LA FEUILLE DE STYLE ]***************************/ /***********************************************************************************/ /* ======================================================================================= Feuille de style originelle de CreaSite 63 CMS par CreaSite63.com L'utilisation des CSS peut vous simplifier la vie. Ne copiez pas cette feuille de style juste pour la copier. Si les CSS vous sont etrangères,essayez de comprendre sans faire du simple copier-coller. Merci. Nom De L'Auteur:Nour-Eddine El Mrini Site De L'Auteur:www.creasite63.com Nom Du CSS:CreaSite 63 CMS Commentaires & Dispositions: Marges Externes / Marges Internes:T R B L / TB LR / T R BL Ordre Des Liens:LVHA http://www.creasite63.com ======================================================================================= */