/*------------------------------------------------- DEFINITION Feuille de style par défaut PROJET Fairytree (v3) VERSION 18-09-2009 AUTEUR Jean-Christophe Brebion CONTACT jean-christophe@fairytree.net CONTENU 1. Reset 2. Styles prédéfinis SOURCES http://covertprestige.info/css/base-stylesheet/ http://developer.yahoo.com/yui/reset/ -------------------------------------------------*/ /*----- 1. RESET -----*/ html { font-size: 100%;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0;} table { border-collapse:collapse; border-spacing:0;} fieldset,img { border:none;} address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal;} ol,ul { list-style:none;} caption,th { text-align:left;} h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal;} q:before,q:after { content:'';} abbr,acronym { border:0;} em { font-style: italic;} strong { font-weight: bold;} input, button, select { vertical-align: middle;} /*----- 2. STYLES PREDEFINIS-----*/ /* Clear Fix (cf. http://nclud.com/sketchbook/clearfix-is-out-were-moving-on/) */ .clear { display:inline-block;} .clear:after { display:block; visibility:hidden; clear:both; height:0; content: ".";} /*------------------------------------------- DEFINITION Feuille de style générale PROJET Fairytree (v3) VERSION 22-02-2010 AUTEUR Jean-Christophe Brebion CONTACT jean-christophe@fairytree.net SOMMAIRE 1. Typographie générale 2. Mise en page des blocs principaux 3. Styles spécifiques 3.1 Accueil 3.2 Services 3.3 Portfolio 3.4 Journal 3.5 A propos 3.6 Contact 4. Plugins jQuery COULEURS - Marron foncé: #1c1917 - Marron intermédiaire: #5c564f - Marron clair: #928776 - Jaune clair: #fffef1 - Jaune foncé: #ecde98 -------------------------------------------*/ /* @group 1. TYPOGRAPHIE */ body { margin:0; padding:0; background:#fffef1 url("images/bg-body.jpg") repeat-x top center; font-size:0.75em; font-family:Helvetica, Arial, sans-serif; color:#928776; border-top:2px solid #928776; } /*--- Styles de base ---*/ a { text-decoration:underline; color:#5c564f;} strong { color:#5c564f;} a:hover, a:focus { color:#1c1917;} a:focus { text-decoration:underline;} a:active { outline:none;} a img { border:none;} p, address { margin-bottom:1.4em; line-height:1.4em;} ul { margin:1.4em 0;} ul li { line-height:1.4em; padding: 0 0 .5em 20px; background:url("images/bg-li.png") no-repeat 5px 4px;} ol { list-style-type:decimal; list-style-position:inside; margin:1.4em 0;} ol li { line-height:1.4em; padding: 0 0 .5em 5px;} sub, sup { vertical-align:baseline; position:relative;} sup {top : -0.5em;} sub {bottom : -0.25em;} abbr { border-bottom: 1px dotted #928776;} pre { font-size: 1.2em; background:#fff; padding:8px 8px 8px 12px; border:1px solid #EFECD1; border-left:2px solid #ecde98; margin-bottom:1.4em; line-height:1.4em; overflow:auto;} #content ul li:last-child, #content ol li:last-child { padding-bottom:0; margin-bottom:0;} /*--- Typographie ---*/ .typo-date { margin-top:0; font-size:.9em; background:url("images/ico-typo-date.png") no-repeat 0 2px; padding-left:16px;} .typo-date strong { color:#928776;} .typo-extrait { padding-left:20px; border-left:1px solid #ecde98; margin:1.2em 0;} .typo-intro { font-size:1.1em;} /*--- Boutons et liens ---*/ #lnk-portfolio { display:block; text-indent:-9999px; background: url("images/btn-lnk-portfolio.png"); width:186px; height:35px; margin:1.4em auto 0;} #lnk-portfolio:hover { background: url("images/btn-lnk-portfolio.png") no-repeat 0 -34px;} #lnk-portfolio:active { background: url("images/btn-lnk-portfolio.png") no-repeat 0 -68px;} #lnk-services { display:block; text-indent:-9999px; background: url("images/btn-lnk-services.png") no-repeat 0 0; width:189px; height:35px; margin:1.8em auto 0;} #lnk-services:hover { background: url("images/btn-lnk-services.png") no-repeat 0 -34px;} #lnk-services:active { background: url("images/btn-lnk-services.png") no-repeat 0 -68px;} .lnk-savoir-plus { display:block; text-indent:-9999px; background: url("images/btn-lnk-savoirplus.png") no-repeat 0 0; width:113px; height:29px; margin-top:1.5em;} .lnk-savoir-plus:hover { background: url("images/btn-lnk-savoirplus.png") no-repeat 0 -29px;} .lnk-savoir-plus:active { background: url("images/btn-lnk-savoirplus.png") no-repeat 0 -58px;} #lnk-voir-site { display:block; text-indent:-9999px; background: url("images/btn-lnk-voirsite.png") no-repeat 0 0; width:119px; height:29px; margin:1.5em auto 0;} #lnk-voir-site:hover { background: url("images/btn-lnk-voirsite.png") no-repeat 0 -29px;} #lnk-voir-site:active { background: url("images/btn-lnk-voirsite.png") no-repeat 0 -58px;} .lnk-tous-articles { display:block; text-indent:-9999px; background: url("images/btn-lnk-tousarticles.png") no-repeat 0 0; width:119px; height:29px; margin-top:1.5em;} .lnk-tous-articles:hover { background: url("images/btn-lnk-tousarticles.png") no-repeat 0 -29px;} .lnk-tous-articles:active { background: url("images/btn-lnk-tousarticles.png") no-repeat 0 -58px;} #lnk-devis { display:block; text-indent:-9999px; background: url("images/btn-lnk-devis.png"); width:235px; height:33px; margin:1em auto 25px;} #lnk-devis:hover { background: url("images/btn-lnk-devis.png") no-repeat 0 -33px;} #lnk-devis:active { background: url("images/btn-lnk-devis.png") no-repeat 0 -66px;} #lnk-prev-projet a { display:block; float:left; text-indent:-9999px; background: url("images/btn-lnk-prevprojet.png") no-repeat 0 0; width:27px; height:24px; margin:0; padding:0;} #lnk-prev-projet a:active { background: url("images/btn-lnk-prevprojet.png") no-repeat 0 -24px;} #lnk-prev-projet a#noprev { background:url("images/bg-noprev.png") no-repeat 0 0;} #lnk-next-projet a { display:block; float:left; text-indent:-9999px; background: url("images/btn-lnk-nextprojet.png") no-repeat 0 0; width:26px; height:24px; margin:0; padding:0;} #lnk-next-projet a:active { background: url("images/btn-lnk-nextprojet.png") no-repeat 0 -24px;} #lnk-next-projet a#nonext { background:url("images/bg-nonext.png") no-repeat 0 0;} .lnk-lire-suite { display:block; text-indent:-9999px; background: url("images/btn-lnk-liresuite.png") no-repeat 0 0; width:103px; height:29px; margin:1.5em 0 0;} .lnk-lire-suite:hover { background: url("images/btn-lnk-liresuite.png") no-repeat 0 -29px;} .lnk-lire-suite:active { background: url("images/btn-lnk-liresuite.png") no-repeat 0 -58px;} #wrapper-footer #footer .bloc-footer #lnk-twitter, #wrapper-footer #footer .bloc-footer #lnk-facebook { margin-bottom:10px;} #lnk-twitter a { background:url("images/ico-twitter_16.png") no-repeat 0 3px; padding:5px 0 5px 22px; margin-bottom:10px;} #lnk-facebook a { background:url("images/ico-facebook_16.png") no-repeat 0 3px; padding:5px 0 5px 22px;} #lnk-linkedin a { background:url("images/ico-linkedin_16.png") no-repeat 0 3px; padding:5px 0 5px 22px;} /*--- Styles utiles ---*/ .txt-up { text-transform:uppercase;} .last { margin-right:0;} .noptop { margin-top:0;} .alignleft { float:left; margin: 0 1em 1em 0;} .alignright { float:right; margin: 0 0 1em 1em;} .aligncenter { margin: 1em auto;} img.imgcenter { background:#fff; display:block; padding:5px; margin: 0 auto; border:1px solid #ecde98; -moz-border-radius: 3px; -webkit-border-radius: 3px;} img.imgleft { background:#fff; display:block; padding:5px; border:1px solid #ecde98; -moz-border-radius: 3px; -webkit-border-radius: 3px; float:left; margin: 0 1em 5px 0;} img.imgright { background:#fff; display:block; padding:5px; border:1px solid #ecde98; -moz-border-radius: 3px; -webkit-border-radius: 3px; float:right; margin: 0 0 5px 1em;} /* @end */ /* @group 2. MISE EN PAGE */ #wrapper { width:950px; margin:0 auto; overflow:hidden;} #header { height:148px; position:relative;} #sidebar { width:125px; float:left; padding:185px 50px 0 0;} #main { width:775px; float:right;} #content { min-height:400px; position:relative; padding:30px 25px 50px; overflow:hidden;} #intro { width:725px; height:375px; padding:25px 25px 0; background:url("images/bg-bloc-intro.png") no-repeat 0 0; margin-top:-25px; position:relative;} #outer { width:725px; padding:45px 25px 45px; background: url("images/bg-outer.png") no-repeat 0 0; margin-top:20px; overflow:hidden;} #wrapper-footer { overflow:hidden; background:url("images/bg-wrapper-footer.png") repeat-x top left; margin:0; padding:0;} #footer { width:750px; margin:0 auto; padding:0 0 0 200px; overflow:hidden; font-size:0.9em; color:#544c43;} /*--- Blocs de mise en page ---*/ .bloc-demi { width:350px; float:left; margin-right:25px;} .bloc-tiers { width:225px; float:left; margin-right:25px;} .bloc-demi.last, .bloc-tiers.last { margin-right:0;} /*--- Header ---*/ h1#logo { width:172px; height:70px; position:absolute; top:25px; left:25px;} h1#logo:active { top:26px;} ul#access { position:absolute; top:-5px; right:0;} ul#access li { display:inline; background:none; margin:0; padding:0;} ul#access li a { color:#a1998c; font-size:0.9em; padding-left:1em;} ul#access li a:hover, ul#access li a:focus { color:#5c564f;} ul#access li a#acces-client { background: url("images/ico-lock.png") no-repeat 9px 0px; padding: 3px 0 3px 30px;} ul#access li a#sitemap { background: url("images/ico-sitemap.png") no-repeat 9px 0px; padding: 3px 0 3px 30px;} /*--- Contenu ---*/ #content h2 { font-size:3em; color:#1c1917;} #content h2 a { text-decoration:none; color:#1c1917;} #content h3 { font-size:1.5em; margin:25px 0 0.7em; padding: 0 0 0.7em 0; color:#1c1917; border-bottom:1px solid #ecde98;} #content h3 a:hover { text-decoration:underline;} #content h4 { margin:2em 0 1em; color:#5c564f; font-size:1.2em; font-weight:bold;} #content p { line-height:1.6em;} #content p#ss-titre { font-size:1.3em; margin:0.6em 0 50px; padding:0; line-height:0; font-weight:300;} /*--- Fil d'arianne ---*/ #breadcrumb { width:725px; height:30px; padding:0 25px; background:url("images/bg-breadcrumb.png"); position:absolute; bottom:0; left:0; line-height:30px; font-weight:bold; font-size:0.9em;} #breadcrumb a { color:#1c1917;} #breadcrumb a:active { line-height:31px;} #breadcrumb span.B_currentCrumb { color:#fff;} #breadcrumb span.B_firstCrumb { padding-left:0; background:none;} #breadcrumb span span, #breadcrumb > span > a { display:block; height:30px; background:url("images/bg-span-breadcrumb.png") no-repeat 0 0; padding:0 6px 0 13px; float:left;} #breadcrumb > span > a { padding-left:25px;} #breadcrumb span span span { background:none;} /*--- Sidebar ---*/ #sidebar ul.topnav { margin-top:0;} #sidebar ul.topnav li { background:none; margin:0; padding:0;} #sidebar ul.topnav li a { display:block; color:#938a79; padding-bottom:0.5em; margin-bottom:0.85em; font-size:1.1em; text-decoration:none;} #sidebar ul.topnav li a:hover, #sidebar ul.topnav li a:focus { color:#1c1917;} #sidebar ul.topnav li a:active { position:relative; top:1px;} #sidebar ul.topnav li.active a { color:#1c1917; border-bottom:1px solid #ecde98; background: url("images/bg-sidebar-li-active.png") no-repeat right 5px; font-weight:bold;} /*--- Pied de page ---*/ #footer h2 { color:#b3aa9b; font-size:1.3em; margin-bottom:25px; text-shadow:0 1px 1px #000; font-weight:bold;} #footer a { color:#544c43;} #footer a:hover, #footer a:focus { color: #fffef1;} #footer strong { color:#544c43;} #footer .bloc-footer { float:left; width:125px; margin:2px 25px 0 0; padding:25px 0; background:url("images/bg-bloc-footer.png") no-repeat top right; min-height:115px;} #footer .bloc-footer.last { margin-right:0;} #footer .bloc-footer-1, #footer .bloc-footer-4 { width:200px;} #footer .bloc-footer ul li { margin: 0 0 5px 0; line-height:1.2em; background:none; padding:0;} #footer .bloc-footer ul li.active a { color:#b3aa9b; text-decoration:none;} #footer #logo-footer { width:125px; height:52px; display:block; text-indent:-9999px; background:url("images/logo-footer.png");} /* @end */ /* @group 3. STYLES SPECIFIQUES */ /* @group 3.1 Accueil */ /* Bloc d'introduction */ #intro h2 { color:#fff; font-size:1.6em; font-weight:bold; text-shadow: 0 1px 1px #1c1917; margin-bottom:.3em;} #intro h2 strong { font-weight:bold; color:#fff; text-transform: uppercase;} #intro h2 + p { color:#39332e; text-shadow: 0 1px 0 #DFDAD1; margin-bottom:1em; line-height:1.5em; font-size:1.05em; font-weight:bold;} #intro .bloc-intro { width:350px; height:245px; float:left; margin-right:25px; } #intro .bloc-intro.last { margin-right:0;} #intro .bloc-intro ul li { margin:0; display:block; color:#5c564f; font-size:.9em; border-top:1px solid #c5beb3; border-bottom:1px solid #867e71; padding:1.1em 0 1.2em 60px; line-height:1.2em; font-size:0.95em; text-decoration:none;} #intro .bloc-intro ul li p { margin:0; padding:0; } #intro .bloc-intro ul li.presta-webdesign { background: url("images/ico-webdesign.png") no-repeat 10px 12px;} #intro .bloc-intro ul li.presta-integration { background: url("images/ico-integration.png") no-repeat 10px 12px;} #intro .bloc-intro ul li.presta-cms { background: url("images/ico-cms.png") no-repeat 10px 13px;} #intro .bloc-intro ul li.first { border-top:0;} #intro .bloc-intro ul li.last { border-bottom:0; padding-bottom:0;} #intro .bloc-intro ul li a { color:#1c1917; text-decoration:none; } #intro .bloc-intro ul li h3 { text-transform:uppercase; font-size:1.05em; color:#1c1917; display:inline; font-weight:bold; text-shadow: 0 1px 0 #BCB3A2;} #intro .bloc-intro ul li h3:hover { background:url("images/bg-sidebar-li-active.png") no-repeat right 2px; display:inline; padding-right:12px;} #intro p#bandeau-contact { position:absolute; bottom:0; left:0; width:775px; height:55px; background:#1c1917; border-top:1px solid #b2a999; line-height:55px; text-align:center; color:#544c43; font-size:1.3em; text-shadow:0 1px 0 #000; margin:0;} #intro p#bandeau-contact strong { color:#b3aa9b; font-weight:normal;} /* Slideshow */ #wrap-slideshow-home, #slideshow-home { height:170px; position:relative; overflow:hidden;} #wrap-slideshow-home #slideshow-home div { height:170px; width:350px; position:relative; overflow:hidden;} .img-front { position:absolute; top:10px; right:40px; z-index:20; -moz-box-shadow:1px 2px 8px #5c564f; -webkit-box-shadow:1px 2px 8px #5c564f; border:1px solid #fff;} .img-back { position:absolute; top:28px; left:40px; z-index:10; -moz-box-shadow:1px 2px 8px #5c564f; -webkit-box-shadow:1px 2px 8px #5c564f; border:1px solid #fff;} #wrap-slideshow-home #slideshow-home div:hover .img-front { -moz-box-shadow:1px 2px 3px #5c564f; -webkit-box-shadow:1px 2px 3px #5c564f; top:11px;} #wrap-slideshow-home #slideshow-home div:hover .img-back { -moz-box-shadow:1px 2px 3px #5c564f; -webkit-box-shadow:1px 2px 3px #5c564f; top:29px;} #btn-next { width:27px; height:27px; background:url("images/btn-next.png") no-repeat 0 0; position:absolute; top:77px; right:0; z-index:30; text-indent:-9999px; cursor:pointer; outline:0;} #btn-next:hover { background:url("images/btn-next.png") no-repeat 0 -27px;} #btn-next:active { background:url("images/btn-next.png") no-repeat 0 -54px;} #btn-prev { width:27px; height:27px; background:url("images/btn-prev.png") no-repeat 0 0; position:absolute; top:77px; left:0; z-index:30; text-indent:-9999px; cursor:pointer; outline:0;} #btn-prev:hover { background:url("images/btn-prev.png") no-repeat 0 -27px;} #btn-prev:active { background:url("images/btn-prev.png") no-repeat 0 -54px;} #degrade-right { position:absolute; top:0; right:0; height:170px; width:30px; background:url("images/bg-bloc-intro.png") repeat-x 0 -110px; z-index:25;} #degrade-left { position:absolute; top:0; left:0; height:170px; width:30px; background:url("images/bg-bloc-intro.png") no-repeat 0 -110px; z-index:25;} /* Outer */ #outer .bloc-outer { float:left; width:200px; margin-right:25px;} #outer .bloc-outer.last { width:275px; margin-right:0;} #outer h2 { color:#1c1917; border-bottom:1px solid #ecde98; font-size:1.4em; padding-bottom:0.5em; margin-bottom:25px; font-weight:normal;} #outer h3 { margin-bottom:1px; font-size:1.1em; font-weight:bold;} #outer h3 a { color:#1c1917; text-decoration:none;} #outer h3 a:hover { color:#1c1917; text-decoration:underline;} #outer p.typo-date { margin-bottom:.5em; font-weight:bold; padding-left:0; background:none;} #outer strong { color:#5c564f;} #outer img { margin-bottom:1em;} #outer img.portrait { border:1px solid #fff; -moz-box-shadow:0px 0px 3px #938a79; -webkit-box-shadow:0px 0px 3px #938a79; margin-bottom:1em;} #outer p#lnk-brief { width:225px; height:27px; background:url("images/bg-lnk-brief.png") no-repeat; font-size:0.95em; padding:8px 0 12px 48px; text-shadow: 0 1px 0 #fffef1; margin:1.4em 0;} #outer p#lnk-brief a { color:#5c564f;} #outer p#lnk-brief a:hover { color:#1c1917;} #outer p#lnk-brief .txt-up { color:#1c1917; font-weight:bold;} /* @end */ /* @group 3.2 Services */ #intro-services { overflow:hidden;} #intro-services ul.tabs { border-bottom:1px solid #ecde98; overflow:hidden; margin:-10px 0 -10px 0;} #intro-services ul.tabs li { display:inline; padding:0; background:none;} #intro-services ul.tabs li h3 { border:none; font-size:1em; display:inline;} #intro-services ul.tabs li h3 a { float:left; display:block; padding:15px 15px 5px; color:#1c1917; height:20px; outline:none; font-weight:bold; text-decoration:none;} #intro-services ul.tabs li h3 a.current { background:url("images/bg-tabs.png") repeat-x bottom left;} #intro-services .panes { clear:both; width:350px; min-height:300px; padding-top:25px;} /* Onglet Projet */ #intro-services ol#votre-projet li { padding-left:40px; list-style-type:none;} #intro-services ol#votre-projet li strong { color:#5c564f;} #intro-services ol#votre-projet li.list-one { background:url("images/bg-list-one.png") no-repeat 5px 2px;} #intro-services ol#votre-projet li.list-two { background:url("images/bg-list-two.png") no-repeat 5px 2px;} #intro-services ol#votre-projet li.list-three { background:url("images/bg-list-three.png") no-repeat 5px 2px;} #intro-services ol#votre-projet li.list-four { background:url("images/bg-list-four.png") no-repeat 5px 2px;} /* Onglet Garanties */ #intro-services ul li#standards { background: url("images/ico-standards.png") no-repeat 7px 1px; padding: 0 0 10px 50px;} #intro-services ul li#ergonomie { background: url("images/ico-ergonomie.png") no-repeat 4px 1px; padding: 0 0 10px 50px;} #intro-services ul li#performances { background: url("images/ico-performances.png") no-repeat 4px 0; padding: 0 0 10px 50px;} #intro-services ul li#technos-ouvertes { background: url("images/ico-technos-ouvertes.png") no-repeat 4px 0; padding: 0 0 10px 50px;} img.illus-services { border:1px solid #fff; -moz-box-shadow:0px 0px 3px #938a79; -webkit-box-shadow:0px 0px 3px #938a79; margin-bottom:1em;} #intro-services .panes img.logo-goplan { border:none; background:none; margin:-10px auto 10px;} /* @end */ /* @group 3.3 Portfolio */ body#portfolio #content { padding:30px 22px 25px;} body#portfolio #content > h2, body#portfolio #content > p#ss-titre, body#portfolio #content > h3 { padding-left:3px;} ul#liste-reas { overflow:hidden; padding:3px;} ul#liste-reas li { padding:0; background:none;} #content .bloc-rea { width:223px; height:200px; float:left; background:#fff; margin:0 25px 25px 0; border:1px solid #fff; -moz-box-shadow:0px 0px 5px #938a79; -webkit-box-shadow:0px 0px 5px #938a79;} #content .bloc-rea:hover { -moz-box-shadow:0px 0px 2px #938a79; -webkit-box-shadow:0px 0px 2px #938a79;} #content .bloc-rea h3 { border:none; font-size:1.1em; margin:0; padding:.6em .6em 0; font-weight:bold;} #content .bloc-rea h3 a { text-decoration:none; color:#1c1917;} #content .bloc-rea:hover h3 a { text-decoration:underline;} #content .bloc-rea p { font-size:0.9em; padding:0 .6em;} #content .bloc-rea:nth-child(3n) { margin-right:0;} #captures-projet { width:500px; padding:4px; margin-left:-4px; float:left; position:relative; z-index:10; overflow:hidden;} #content #captures-projet img { border:1px solid #fff; -moz-box-shadow:0px 0px 4px #938a79; -webkit-box-shadow:0px 0px 4px #938a79;} #nav-captures { position:absolute; top:14px; right:10px; font-size:1em; z-index:10;} #nav-captures a { display:block; float:left; height:12px; width:12px; line-height:12px; padding:3px; text-align:center; background:#938a79; color:#fff; margin-left:5px; text-decoration:none; border-radius:1px; -moz-border-radius:1px; -webkit-border-radius:1px;} #nav-captures a.activeSlide { background:#1c1917;} #details-projet { width: 200px; float:right;} #details-projet h3 { font-size:1.4em; margin:25px 0 .7em;} #details-projet h3:first-child { margin-top:0;} /* Bouton de navigation entre projets */ ul#nav-projets { position:absolute; top:33px; right:-17px; overflow:hidden;} ul#nav-projets li { background:none; display:inline;} /* @end */ /* @group 3.4 Journal */ #articles { width:450px; float:left;} #articles h3 { font-size:1.5em; border:none; padding-bottom:0;} #articles h3 a { color:#1c1917; font-weight:normal; text-decoration: none;} body#journal #articles h3 { margin:50px 0 3px;} body#journal #articles h3:first-child, body#article #articles h3:first-child { margin-top:0; padding-top:0;} p.addthis_toolbox { background:#ebdeca; padding:5px 8px;} a.addthis_button { padding: 3px 0 3px 22px; background:url(images/ico-share.png) no-repeat 0 1px;} /* Champ de recherche */ form#ajaxSearch_form { margin-bottom:25px;} form#ajaxSearch_form input#ajaxSearch_input { display:block; float:left; height:15px; border:1px solid #dfd3c0; border-width:1px 0 1px 1px; padding:5px; margin:0; background:url("images/bg-input-search.png") no-repeat left center; width:155px;} form#ajaxSearch_form input#ajaxSearch_submit { float:left; padding:0; margin:0; border:none;} p.ajaxSearch_resultsInfo { font-weight:bold; font-size:1.1em; } /* Pagination */ #nav-articles { margin-top:25px; overflow:hidden;} #nav-articles ul { text-align:center; } #nav-articles ul li { display:inline; background:none;} #nav-articles ul li a, #nav-articles ul li span { display:block; float:left; height:12px; width:12px; line-height:12px; padding:3px; text-align:center; margin:0 5px 0 0; text-decoration:none;} #nav-articles ul li a.nav-pagenum { color:#fff; line-height:14px; background:#928776; border-radius:1px; -moz-border-radius:1px; -webkit-border-radius:1px;} #nav-articles ul li.nav-pagenum-current span { color:#fff; line-height:14px; background:#1c1917; border-radius:1px; -moz-border-radius:1px; -webkit-border-radius:1px;} /* Colonne contextuelle */ #col-nav { width:200px; float:right;} #col-nav h3 { font-size:1.1em; font-weight:bold; margin:25px 0 .7em;} #col-nav h3:first-child { margin-top:0; padding-top:0;} #col-nav .titre-categories { background:url("images/ico-categories.png") no-repeat 3px 1px; padding-left:20px;} #col-nav .titre-partenaires { background:url("images/ico-partenaires.png") no-repeat 3px 1px; padding-left:20px;} ul#liens-sociaux { width:200px; height:58px; margin:25px 0 25px; background:url("images/bg-liens-sociaux.png"); position:relative; text-indent:-9999px;} ul#liens-sociaux li { display:inline; background:none;} ul#liens-sociaux li a { display:block; height:21px; width:32px; position:absolute;} ul#liens-sociaux li#rss a { background:url("images/ico-rss.png") 0 0; top:7px; left:35px;} ul#liens-sociaux li#rss a:hover { background:url("images/ico-rss.png") 0 -24px;} ul#liens-sociaux li#twitter a { background:url("images/ico-twitter.png") 0 0; top:7px; left:85px;} ul#liens-sociaux li#twitter a:hover { background:url("images/ico-twitter.png") 0 -24px;} ul#liens-sociaux li#facebook a { background:url("images/ico-facebook.png") 0 0; top:7px; left:135px;} ul#liens-sociaux li#facebook a:hover { background:url("images/ico-facebook.png") 0 -24px;} /* @end */ /* @group 3.5 A propos */ #col-side { width:225px; float:right;} #col-main { width:425px; float:left;} #col-side img { border:1px solid #fff; -moz-box-shadow:0px 0px 3px #938a79; -webkit-box-shadow:0px 0px 3px #938a79;} #col-side h3, #col-main h3 { font-size:1.4em; border:none; border-bottom:1px solid #ecde98; padding-bottom:.5em; margin: 25px 0 25px;} #col-side h3:first-child, #col-main h3:first-child { margin-top:0;} /* @end */ /* @group 3.6 Contact */ body#contact #col-side { float:right;} body#contact #col-main { float:left; width:450px;} p#infos-contact { background:url("images/ico-user.png") no-repeat 5px 1px; padding-left:50px; font-weight:bold;} input, button, select {vertical-align:middle;} .form { background: #BCB3A2 url("images/bg-form.png") repeat-x bottom left; padding:30px 15px 50px; border: 1px solid #fff; -moz-box-shadow:0px 0px 3px #938a79; -webkit-box-shadow:0px 0px 3px #938a79; margin:25px 0; position:relative;} fieldset p { overflow:hidden;} span.etoile { color:#5c564f;} legend { padding:0 10px 0 0; display:inline; color:#9e763d; font-size:1.1em;} label { float:left; text-align:right; width:110px; font-weight:bold; color:#1c1917;} input.text, input[type="file"], textarea, select { border:1px solid #928776; background:#fff; padding:5px; margin:0 0 0 10px; color:#1c1917;} input#cfEmail { background: #fff url("images/ico-mail-10.gif") no-repeat 10px center; padding-left:30px; } input#cfTelephone { background: #fff url("images/ico-tel-10.gif") no-repeat 9px center; padding-left:30px; } input.textFocus, textarea.textFocus { border:1px solid #5c564f; background:#fffef1;} input.text, textarea { -moz-border-radius: 3px; -webkit-border-radius: 3px;} p#submit-form { background:#1c1917; position:absolute; margin:0; padding:10px; bottom:0; left:0; width:428px; text-align:right; border-top:1px solid #b2a999;} .errors { background:#fff; padding:10px; margin-top:-5px; margin-bottom:15px; -moz-box-shadow:0px 0px 3px #938a79; -webkit-box-shadow:0px 0px 3px #938a79; color:#f22712;} .errors strong { color:#f22712;} .thanks { background:#fff; padding:10px; margin-top:-5px; margin-bottom:15px; -moz-box-shadow:0px 0px 3px #938a79; -webkit-box-shadow:0px 0px 3px #938a79; color:#458d0a;} .thanks strong { color:#458d0a;} input.required, textarea.required { border: 1px solid #f22712; background:#f2ddda;} input#cfEmail.required { background: #f2ddda url("images/ico-mail-10.gif") no-repeat 10px center;} p#champs-obligatoires { font-style:italic; color:#fff; position:absolute; top:10px; right:15px; font-size:.9em;} span.form-info { padding-left:120px; color:#fff; font-size:.9em; font-style:italic;} span.telephone { font-size:1.2em;} /* @end */ /* @end */ /* @group 4. PLUGINS JQUERY */ /* Tipsy 0.1.7 http://onehackoranother.com/projects/jquery/tipsy */ .tipsy { padding:5px; font-size:11px; background:url(images/tipsy.gif) no-repeat;} .tipsy-inner { padding:5px 8px 4px 8px; background-color:#1c1917; color: white; max-width: 200px; text-align: center;} .tipsy-inner { -moz-border-radius:2px; -webkit-border-radius:2px;} .tipsy-north { background-position:top center;} .tipsy-south { background-position:bottom center;} .tipsy-east { background-position:right center;} .tipsy-west { background-position:left center;} /* Colorbox 1.3.6 http://colorpowered.com/colorbox */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative; overflow:hidden;} #cboxLoadedContent{overflow:auto;} #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} #cboxOverlay{background:#1c1917;} #colorBox{} #cboxTopLeft{width:25px; height:25px; background:url(images/border1.png) 0 0 no-repeat;} #cboxTopCenter{height:25px; background:url(images/border1.png) 0 -50px repeat-x;} #cboxTopRight{width:25px; height:25px; background:url(images/border1.png) -25px 0 no-repeat;} #cboxBottomLeft{width:25px; height:25px; background:url(images/border1.png) 0 -25px no-repeat;} #cboxBottomCenter{height:25px; background:url(images/border1.png) 0 -75px repeat-x;} #cboxBottomRight{width:25px; height:25px; background:url(images/border1.png) -25px -25px no-repeat;} #cboxMiddleLeft{width:25px; background:url(images/border2.png) 0 0 repeat-y;} #cboxMiddleRight{width:25px; background:url(images/border2.png) -25px 0 repeat-y;} #cboxContent{background:#fff;} #cboxLoadedContent{margin-bottom:20px;} #cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;} #cboxCurrent{position:absolute; bottom:0px; left:120px; color:#999;} #cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;} #cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;} #cboxNext{position:absolute; bottom:0px; left:63px; color:#444;} #cboxLoadingOverlay{background:url(images/loading.gif) 5px 5px no-repeat #fff;} #cboxClose{position:absolute; bottom:0; right:0; display:block; color:#444;} /* Prettify 3-Dec-2009 http://code.google.com/p/google-code-prettify */ .str,.atv {color:#080;} .kwd,.tag {color:#008;} .com {color:#800;} .typ,.atn,.dec {color:#606;} .lit {color:#066;} .pun {color:#660;} .pln {color:#000;} /* @end */ /*------------------------------------------------ DEFINITION Feuille de style pour l'impression PROJET Fairytree (v3) VERSION 31-01-2010 AUTEUR Jean-Christophe Brebion CONTACT jean-christophe@fairytree.net -------------------------------------------------*/ @media print { #sidebar ul#menu, #footer, ul#access { display:none;} /* Prettify 3-Dec-2009 http://code.google.com/p/google-code-prettify */ .str{color:#060} .kwd,.tag{color:#006;font-weight:bold} .com{color:#600;font-style:italic} .typ{font-weight:bold} .lit{color:#044} .pun{color:#440} .atn,.typ{color:#404} .atv{color:#060} }