/* -------------------------------------------------------------------------------- * * FRONT-OFFICE * Stylesheet * Version : $Id: layout.css 97 2011-06-01 14:04:10Z Easy Net Technology $ * -------------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------------- * * HTML * -------------------------------------------------------------------------------- */ html { height:100%; } /* -------------------------------------------------------------------------------- * * BODY * -------------------------------------------------------------------------------- */ body { font-family:helvetica; font-size:12pt; color:#000; padding:0; margin:0; } /* -------------------------------------------------------------------------------- * * GLOBAL STYLE * -------------------------------------------------------------------------------- */ a img { border:0; } .clear { clear:both; line-height:0; } .required, .global-erreur, p.erreur { color:#d67a00; } .global-erreur-under-pwd { padding:0 0 0 155px; } .info-champ-requis { float:left; padding:20px 0 0 0; font-size:12px; } .info-success { color:#86c967; font-weight:bolder; padding:20px; } .info-error { color:#d67a00; font-weight:bolder; padding:20px; } /* -------------------------------------------------------------------------------- * * DEVELOPPER / DEBUG STYLE * -------------------------------------------------------------------------------- */ .hidden { display:none; visibility:hidden; } .dev-red { background-color:red; } .dev-gold { background-color:gold; } .dev-purple { background-color:purple; } .dev-green { background-color:green; } .dev-navy { background-color:navy; } .dev-111 { background-color:#111; } .dev-222 { background-color:#222; } .dev-333 { background-color:#333; } .dev-444 { background-color:#444; } .dev-555 { background-color:#555; } .dev-666 { background-color:#666; } .dev-777 { background-color:#777; } .dev-888 { background-color:#888; } .dev-999 { background-color:#999; } .dev-000 { background-color:#000; } .dev-aaa { background-color:#aaa; } .dev-bbb { background-color:#bbb; } .dev-ccc { background-color:#ccc; } .dev-ddd { background-color:#ddd; } .dev-eee { background-color:#eee; } .dev-fff { background-color:#fff; } /* -- Opacité ------------------------------------------------------------- */ .dev-o75 { filter:alpha(opacity=75); -moz-opacity:0.75; opacity:0.75; } /********************************************************************************** * * Pictos * **********************************************************************************/ .picto-arrow { display:inline-block; width:30px; height:19px; background:url(../images/interface/fleches_20110514.png) 0px 0px no-repeat; } /* inactive : on ne montre pas */ /* .picto-arrow-previous { background-position:100px 100px; } .picto-arrow-next { background-position:100px 100px; } */ .picto-arrow-previous { background-position:-19px -25px; } .picto-arrow-next { background-position:-35px -25px; } /* survol */ a[href]:hover .picto-arrow-previous { background-position:-19px -59px; } a[href]:hover .picto-arrow-next { background-position:-35px -59px; } /* normal */ a[href] .picto-arrow-previous { background-position:-19px -25px; } a[href] .picto-arrow-next { background-position:-35px -25px; } /* -------------------------------------------------------------------------------- * * PAGE * -------------------------------------------------------------------------------- */ #page { margin:0 auto; width:960px; } .main-zone { padding:0 12px; } /* -------------------------------------------------------------------------------- * * HEADER * -------------------------------------------------------------------------------- */ #ctn-header { position:relative; padding:12px 12px 8px 12px; /*height:50px;*/ text-align:center; } #ctn-header #link-logo { /*float:left; margin:0 10px 0 0;*/ } #ctn-header #link-logo img { } /* -------------------------------------------------------------------------------- * * NAVIGATION * -------------------------------------------------------------------------------- */ #ctn-navigation { height:14px; padding:5px 0 0 0; margin:16px -12px 0 -12px; border-top:1px solid #999; } #ctn-navigation li { display:inline; padding:0; margin:75px 0 0 0; text-transform:uppercase; font-size:12pt; letter-spacing:.2pt; } #ctn-navigation li a { } /* -------------------------------------------------------------------------------- * * SUB-NAVIGATION * -------------------------------------------------------------------------------- */ #ctn-sub-navigation { text-align:center; font-size:10pt; height:20px; line-height:20px; border-top:1px solid #000; border-bottom:1px solid #000; margin:0 -12px 0 -12px; } #ctn-sub-navigation li { display:inline; padding:0; margin:0; text-transform:uppercase; } #ctn-sub-navigation li a { } #ctn-sub-navigation h1 { font-weight:normal; padding:0; margin:2px 0 0 0; text-transform:uppercase; font-size:12pt; letter-spacing:.2pt; color:#6e6e6e; } #ctn-sub-navigation-collection { /*text-align:center;*/ font-size:10pt; height:20px; line-height:20px; border-top:1px solid #000; border-bottom:1px solid #000; margin:0 -12px 0 -12px; padding:0 0 0 388px; } #ctn-sub-navigation-collection li { display:inline; padding:0; margin:0; text-transform:uppercase; } #ctn-sub-navigation-collection li a { } /* -------------------------------------------------------------------------------- * * CONTENT * -------------------------------------------------------------------------------- */ #ctn-content { min-height:250px; /*border-top:1px solid #000; border-bottom:1px solid #000;*/ } /* -------------------------------------------------------------------------------- * * ACCUEIL * -------------------------------------------------------------------------------- */ .detail-tl { margin:0 12px 12px 0; float:left; } .detail-tr { margin:0 0 12px 0; float:left; } .detail-bl, .detail-br { margin:0 12px 0 0; float:left; } .encart-bl { position:relative; float:left; width:566px; height:223px; text-align:center; } .link-logo { display:block; margin:54px 0 0 0; } #ctn-langues { position:absolute; bottom:0; width:100%; height:18px; padding:3px 0 0 0; font-size:10pt; border-top:1px solid #000; border-bottom:1px solid #000; border-bottom:1px solid #000; } #ctn-langues span { } #ctn-langues a { text-transform:uppercase; } #ctn-langues a:hover { } /* #ctn-langues a.link-fr { background-position:-8px -19px; border-left:1px solid #000; } #ctn-langues a.link-en { background-position:-4px -55px; border-right:1px solid #000; border-left:1px solid #000; } #ctn-langues a.link-ru { background-position:-10px -90px; border-right:1px solid #000; } #ctn-langues a.link-fr:hover { background-position:-106px -19px; } #ctn-langues a.link-en:hover { background-position:-102px -55px; } #ctn-langues a.link-ru:hover { background-position:-108px -90px; } */ /* -------------------------------------------------------------------------------- * * PAGINATION * -------------------------------------------------------------------------------- */ /* - Pagination -----------------------------------------------------*/ /* ul.pagination { height:30px; margin:25px 0; padding:0; list-style-type:none; text-align:center; color:#000; } ul.pagination li { width:20px; display:block; line-height:30px; text-align:center; height:30px; float:left; } ul.pagination li a { color:#666; display:block; text-align:center; width:16px; height:16px; line-height:16px; margin:8px 0 0 0; text-decoration:none; } ul.pagination li a:hover { color:#333; } ul.pagination li.paginationItemActif { background-color:#C1C70F; border:0; -moz-border-radius:15px;-webkit-border-radius:15px; color:#fff; width:30px; margin:0 2px 0 0; font-size:1.2em; font-weight:bolder; } ul.pagination li.paginationStart { } ul.pagination li.paginationEnd { } ul.pagination li.noPuce { margin:0; } ul.pagination li a.pagination { font-size:0.8em; display:block; text-align:center; width:16px; height:16px; line-height:16px; margin:8px 0 0 0; } ul.pagination li.movePrevious, ul.pagination li.moveFirst, ul.pagination li.moveNext, ul.pagination li.moveLast { width:20px; margin:0; } ul.pagination li.movePrevious a, ul.pagination li.moveFirst a, ul.pagination li.moveNext a, ul.pagination li.moveLast a { } span.paginationInfos { color:#666; font-size:80%; } */ /* -------------------------------------------------------------------------------- * * NEWS * -------------------------------------------------------------------------------- */ #ctn-news { height:550px; } /* -------------------------------------------------------------------------------- * * PORTRAIT * -------------------------------------------------------------------------------- */ #ctn-portrait { height:550px; } #ctn-portrait .txt { font-size:10pt; color:#6e6e6e; /*padding:128px 0 0 0;*/ } #ctn-portrait .txt-inner { border-top:1px solid #808080; border-bottom:1px solid #808080; margin:0 253px 0 368px; padding:12px 0; } #ctn-portrait .right { float:right; margin:0 0 0 12px; } #ctn-portrait .left { float:left; margin:0 12px 0 0; } /* -------------------------------------------------------------------------------- * * PAGES STATIQUES * -------------------------------------------------------------------------------- */ #ctn-page-statique { font-size:10pt; color:#6e6e6e; } #ctn-page-statique h1 { text-transform:uppercase; font-size:12pt; color:#000; } #ctn-page-statique h2 { font-size:10pt; color:#000; } #ctn-page-statique .left { text-align:justify; float:left; width:458px; margin:0 10px 0 0; } #ctn-page-statique .right { text-align:right; float:right; width:458px; margin:0 0 0 10px; } /* -------------------------------------------------------------------------------- * * COLLECTIONS * -------------------------------------------------------------------------------- */ #ctn-collections { /*min-height:550px;*/ } #ctn-collections .img-med { width:366px; height:550px; /*overflow:hidden;*/ float:left; } #ctn-collections .informations { width:559px; height:550px; overflow:hidden; float:right; padding:0 0 0 11px; font-size:10pt; } #ctn-collections .informations h1 { margin:10px 0 15px 0; font-size:10pt; /*text-transform:uppercase;*/ } #ctn-collections .informations p { margin:0; color:#6e6e6e; } #ctn-collections .modele { height:115px; overflow:hidden; } #ctn-collections .preview { width:559px; height:435px; background:#eee; } #ctn-collections .preview .info { text-align:center; font-style:italic; line-height:435px; } #ctn-collections .credits-photos { font-size:8pt; } /*#ctn-slider-collection { height:135px; width:960px; margin:12px 0; padding:6px 0; }*/ #ctn-collections ul { height:135px; width:960px; margin:12px 0; padding:0; } #ctn-collections ul li { display:inline-block; text-align:center; width:104px;/*102*/ height:135px; overflow:hidden; padding:0; margin:0; } #ctn-collections ul li a { display:inline-block; width:90px; height:135px; position:relative; } #ctn-collections ul li a .hover-vignette { position:absolute; z-index:9; top:0; left:0; display:block; } #ctn-collections ul li a.men-on .hover-vignette { position:absolute; z-index:9; top:0; left:0; display:none; } /* -------------------------------------------------------------------------------- * * PRET A PORTER * -------------------------------------------------------------------------------- */ #ctn-pret-a-porter { height:550px; } /* -------------------------------------------------------------------------------- * * STORE ONLINE * -------------------------------------------------------------------------------- */ #ctn-store-online { height:550px; } /* -------------------------------------------------------------------------------- * * CONTACT * -------------------------------------------------------------------------------- */ #ctn-contact { height:550px; } #ctn-contact img { float:left; margin:0 12px 0 0; } #ctn-contact .txt { height:375px; float:right; width:174px; background:#d2d2d2; color:#333; font-size:9pt; padding:175px 0 0 12px; text-align:justify; } /* #ctn-contact h1 { text-transform:uppercase; margin:0; padding:0 0 0 20px ; font-size:16px; color:#d081a7; } #ctn-contact h2 { margin:0 0 4px 0; padding:0; font-size:12px; color:#d081a7; } .cont-left { float:left; width:480px; padding:15px 0 0 0; } .cont-right { float:right; width:480px; padding:15px 0 0 0; background:url(http://www.christophejosse.com/images/interface/contact-sousplan.png) no-repeat; } .cont-planfond { width:480px; height:600px; } .cont-planfond iframe { margin:8px 0 0 28px; } */ /* -------------------------------------------------------------------------------- * * PRESSE -------------------------------------------------------------------------------- */ .press-btn { display:inline-block; width:20px; height:18px; margin:0 4px; } #presse-prev-btn { position:relative; } #presse-prev-btn a.bx-prev { position:absolute; top:0px; left:0px; z-index:999; width:12px; height:19px; text-indent: -999999px; background: url(../images/interface/fleches_20110514.png) no-repeat -19px -25px; } #presse-next-btn { position:relative; } #presse-next-btn a.bx-next { position:absolute; top:0px; right:0px; z-index:999; width:12px; height:19px; text-indent: -999999px; background: url(../images/interface/fleches_20110514.png) no-repeat -53px -25px; } /*next/prev button hover state*/ #presse-prev-btn a.bx-prev:hover { background-position:-19px -59px; } #presse-next-btn a.bx-next:hover { background-position:-53px -59px; } #ctn-presse { height:550px; } #ctn-presse ul { height:500px; width:960px; margin:50px 0 0 0; padding:0; } #ctn-presse ul li { position:relative; display:inline-block; width:936px; height:500px; overflow:hidden; padding:0; margin:0; } #ctn-presse ul li div { height:500px; width:300px; float:left; } #ctn-presse ul li div+div { margin:0 0 0 17px; } #ctn-presse ul li div.double { width:619px; } #ctn-presse ul li a { } #ctn-presse ul li img { border:1px solid #ccc; } #ctn-presse ul li h1 { margin:0; padding:0; text-transform:uppercase; font-size:10pt; color:#6e6e6e; font-weight:normal; } #ctn-presse ul li span { display:block; font-size:10pt; color:#6e6e6e; } #ctn-presse ul li a { position:absolute; display:inline-block; width:16px; height:16px; top:422px; right:2px; } #ctn-presse ul li a img { border:0; } #ctn-presse .image-indisponible { font-size:.8em; text-align:center; font-style:italic; color:#6e6e6e; background:#eee; border:1px solid #ccc; } /* -------------------------------------------------------------------------------- * * FORMS * -------------------------------------------------------------------------------- */ /* form { margin:0; padding:0; } #mailSentResult { min-height:25px; margin:10px; } .form-contact { padding:0 0 0 20px; line-height:21px; } .form-contact a { font-family:arial; font-size:12px; } .form-contact h3 { } .form-contact div { } .form-contact label { display:block; margin:0; padding:0; } .form-contact select { height:30px; } .form-contact select option { padding:5px;} .form-contact input[type='text'] { width:250px; height:20px; line-height:30px; } .form-contact input.code_captcha { width:125px; } .form-contact textarea { width:475px; color:#fff; } .form-contact textarea, .form-contact select, .form-contact input[type='text'] { font-family:georgia; font-size:14px; padding:5px; color:#fff; background-color:#C1C70F; border:0; -moz-border-radius:6px;-webkit-border-radius:6px; } .form-contact .last { } .form-contact .asterisk { font-style:italic; float:left; } */ /* -------------------------------------------------------------------------------- * * Form Fields * -------------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------------- * * Liste * -------------------------------------------------------------------------------- */ ul { margin:0; padding:0; } /* -------------------------------------------------------------------------------- * * LINKS * -------------------------------------------------------------------------------- */ a { outline:none; color:#000; text-decoration:none; border:0; } a:link { } a:visited { } a.men-on, a:hover { color:#6e6e6e; text-decoration:none; } /* -------------------------------------------------------------------------------- * * FOOTER * -------------------------------------------------------------------------------- */ #ctn-footer { position:relative; height:18px; text-align:right; margin:0 0; padding:3px 12px 0 12px; font-size:10pt; border-top:1px solid #000; border-bottom:1px solid #000; border-bottom:1px solid #000; } #ctn-footer span { } #ctn-footer a { } #ctn-footer a.fb { position:absolute; left:12px; top:1px; } #ctn-footer a:hover { } /* -------------------------------------------------------------------------------- * * MENTIONS * -------------------------------------------------------------------------------- */ #ctn-mentions { text-align:right; margin:12px 0; font-size:8pt; } #ctn-mentions ul { } #ctn-mentions ul li { display:inline; padding:0; margin:0; } #ctn-mentions ul li a { } /* #ctn-footer { height:16px; margin:0 0 70px 0; padding:3px 0; text-align:center; border-bottom:1px solid #000; } #ctn-footer a span { display:none; } #ctn-footer a { display:inline-block; width:100px; height:16px; background:url(../images/interface/accueil/langues_20110430-1.png) 0 0 no-repeat; } #ctn-footer a.link-fr { background-position:-8px -19px; border-left:1px solid #000; } #ctn-footer a.link-en { background-position:-4px -55px; border-right:1px solid #000; border-left:1px solid #000; } #ctn-footer a.link-ru { background-position:-10px -90px; border-right:1px solid #000; } #ctn-footer a.link-fr:hover { background-position:-106px -19px; } #ctn-footer a.link-en:hover { background-position:-102px -55px; } #ctn-footer a.link-ru:hover { background-position:-108px -90px; } */ /* #ctn-footer .footer-top { position:relative; padding:0 0 25px 80px; } #ctn-footer .footer-bottom { font-family:georgia; font-style:italic; color:#3b4349; text-align:center; padding:4px 0 0 0; border-top:1px solid #666; } #ctn-footer .footer-bottom a { font-style:normal; color:#3b4349; font-weight:bold; text-decoration:none; } */ /* -------------------------------------------------------------------------------- * * BLOCKS * -------------------------------------------------------------------------------- */ .entMessageDefault { background:#FFECA5; border:1px solid #FCCD51; } .entMessageConfirmation { padding:4px 4px 4px 25px; background:url(../images/interface/accept.png) #c5ffb2 5px 5px no-repeat; color: #1e731a; border:1px solid #1e731a; } .entMessageError { padding:4px 4px 4px 25px; background:url(../images/interface/exclamation.png) #ffd5cc 5px 5px no-repeat; color: #c2462c; border:1px solid #c2462c; } .entMessageWarning { padding:4px 4px 4px 25px; background:url(../images/interface/error.png) #fff1cc 5px 5px no-repeat; color: #c16803; border:1px solid #c16803; } .entMessageInformation { padding:4px 4px 4px 25px; background:url(../images/interface/information.png) #cce7ff 5px 5px no-repeat; color: #344f88; border:1px solid #344f88; } .q0 { color:#f00; } /* rouge */ .q1 { color:#008000; } /* vert */ .q2 { color:#00f; } /* bleu */ .q3 { color:#008000; } /* vert */ .q4 { color:#F68B1F; } /* orange */ .q5 { color:#800080; } /* violet */