/** phyp.project :: apps.shizen.css.zero :: 20091213 **/

/* html, body { height: 100%; overflow: hidden; } */
body { background: black; }
body, input, select, textarea { font: 12px "American Typewriter", Georgia, serif; }

/* Boxes */
#box { position: absolute; top: 50%; left: 0; width: 100%; margin-top: -330px; height: 660px; }
.box { width: 1000px; margin: 0 auto; position: relative; }

/* Header */
#header { height: 95px; }
#header span { display: none; }
#title { padding-top: 30px; }
#title a { display: block; width: 270px; height: 65px; background: url(zero/layout/shizen.png); }
#baseline { position: absolute; left: 80px; top: 105px; width: 280px; height: 30px; background: url(zero/layout/baseline.gif); }
html>body #baseline { background-image: url(zero/layout/baseline.png); }

/* Main */
#main { height: 490px; background: white no-repeat bottom; border: 10px #888 solid; border-width: 10px 0; }

/* Menu */
#menu { position: absolute; top: 0; right: 0; width: 310px; }
#menu li { display: inline; }
#menu a { float: left; height: 20px; padding-top: 60px; width: 50px; background: transparent no-repeat center; }
#menu b { display: none; width: 150px; height: 20px; position: absolute; top: 60px; right: 0; background: transparent no-repeat 0 0; }
#menu a:hover b { display: block; background-position: 0 -20px; }
#menu span { display: none; }
.home #menu { top: 295px; right: 60px; width: 930px; }
.home #menu a { height: 20px; padding-top: 155px; width: 150px; }
.home #menu b { display: block; position: static; }
#menu .numero a { background-image: url(zero/icons/numero.s.png); width: 55px; }
#menu .numero b { background-image: url(zero/titles/numero.gif); width: 170px; }
html>body #menu .numero b { background-image: url(zero/titles/numero.png); }
.home #menu .numero a { background-image: url(zero/icons/numero.gif); width: 170px; }
html>body.home #menu .numero a { background-image: url(zero/icons/numero.png); }
#menu .abonnement a { background-image: url(zero/icons/abonnement.s.png); }
#menu .abonnement b { background-image: url(zero/titles/abonnement.gif); }
html>body #menu .abonnement b { background-image: url(zero/titles/abonnement.png); }
.home #menu .abonnement a { background-image: url(zero/icons/abonnement.gif); }
html>body.home #menu .abonnement a { background-image: url(zero/icons/abonnement.png); }
#menu .distributeurs a { background-image: url(zero/icons/distributeurs.s.png); }
#menu .distributeurs b { background-image: url(zero/titles/distributeurs.gif); }
html>body #menu .distributeurs b { background-image: url(zero/titles/distributeurs.png); }
.home #menu .distributeurs a { background-image: url(zero/icons/distributeurs.gif); }
html>body.home #menu .distributeurs a { background-image: url(zero/icons/distributeurs.png); }
#menu .annonceurs a { background-image: url(zero/icons/annonceurs.s.png); }
#menu .annonceurs b { background-image: url(zero/titles/annonceurs.gif); }
html>body #menu .annonceurs b { background-image: url(zero/titles/annonceurs.png); }
.home #menu .annonceurs a { background-image: url(zero/icons/annonceurs.gif); }
html>body.home #menu .annonceurs a { background-image: url(zero/icons/annonceurs.png); }
#menu .plus a { background-image: url(zero/icons/plus.s.png); }
#menu .plus b { background-image: url(zero/titles/plus.gif); }
html>body #menu .plus b { background-image: url(zero/titles/plus.png); }
.home #menu .plus a { background-image: url(zero/icons/plus.gif); }
html>body.home #menu .plus a { background-image: url(zero/icons/plus.png); }
#menu .contact a { background-image: url(zero/icons/contact.s.png); }
#menu .contact b { background-image: url(zero/titles/contact.gif); }
html>body #menu .contact b { background-image: url(zero/titles/contact.png); }
.home #menu .contact a { background-image: url(zero/icons/contact.gif); }
html>body.home #menu .contact a { background-image: url(zero/icons/contact.png); }

/* Body */
#body { padding: 80px 10px 20px 10px; text-align: right; }
#body h1,
#body h2,
#body h3,
#body h4,
#body p,
#body ul,
#body ol,
#body dl,
#body addr { margin-bottom: .5em; }
#body h2,
#body h3,
#body h4 { margin-top: 1em; }
#body h2 { font: 2em "ITC Benguiat Gothic Std", "Trebuchet MS", Helvetica, Arial, sans-serif; font-weight: normal; }
#body h3 { font-size: 1.4em; font-weight: normal; }
#body h4 { font-size: 1.3em; font-weight: normal; }
#body fieldset { margin: 1em 0; background: #eeeeee url(zero/icons/corner.tl.png) no-repeat top left; padding-top: 16px; }
#body fieldset div { padding: 0 20px 16px 20px; background: #eeeeee url(zero/icons/corner.br.png) no-repeat bottom right; }
#body fieldset h3 { float: left; font-size: 1.2em; margin: 0; }
#body fieldset li { height: 1.6em; }
#body div.bottom fieldset,
#body div.right fieldset { width: 375px; margin-left: auto; }
#body div.left fieldset { width: 300px; }
#body select,
#body input { border: 1px #ccc solid; padding: 0 3px; background: white; text-align: left; -moz-border-radius: 3px; /* border-radius: 3px; */ -webkit-border-radius: 3px; }
#body select { padding: 0; }
#body input.price { text-align: right; width: 50px; }
#body input.text { width: 200px; }
#body input.radio { margin-left: 10px; }
#body label { cursor: pointer; }
#body input.submit { margin-top: 1em; cursor: pointer; }
#body input.bigcancel,
#body input.bigsubmit { padding: 5px 10px; -moz-border-radius: 8px 0; /* border-radius: 8px 0; */ -webkit-border-radius: 8px; color: #444; cursor: pointer; }
#body input.bigcancel:hover,
#body input.bigsubmit:hover { color: black; }
#body input.bigcancel { float: left; padding-left: 30px; background: url(zero/icons/ko.xs.png) no-repeat 5% center; }
#body input.bigsubmit { float: right; padding-right: 30px; background: url(zero/icons/ok.xs.png) no-repeat 95% center; }
#body input.missing { border-color: orange; }
#body label.missing { border-bottom: 1px orange solid; }
#body input.bad { background: red; }
#body ul.bullets-left { text-align: left; }
#body ul.bullets-left li { padding: 0 0 .3em 40px; background: url(zero/icons/bullet.l.gif) no-repeat top left; font-weight: bold; }
html>body #body ul.bullets-left li { background-image: url(zero/icons/bullet.l.png); }
#body ul.bullets-right li { padding: 0 40px .3em 0; background: url(zero/icons/bullet.r.gif) no-repeat top right; font-weight: bold; }
html>body #body ul.bullets-right li { background-image: url(zero/icons/bullet.r.png); }
#body p.messages { position: absolute; top: 30px; left: -30px; padding: 5px 10px; background: #98716c; color: white; border: 1px #eee solid; -moz-border-radius: 5px 0; /* border-radius: 5px 0; */ -webkit-border-radius: 5px; }
#body p.summary { font-size: 1.3em; padding-top: 2em; }

/* Footer */
#footer { height: 55px; text-align: right; font-size: 11px; }
#footer,
#footer a,
#footer em { color: #aaa; font-style: normal; }
#footer ul { list-style: none; float: right; padding-top: 5px; }
#copyright,
#credits { display: inline; }
#copyright { margin-right: 10px; }
#design { display: block; font-size: 10px; }
#design,
#design a { color: #666; }
#footer a:hover { color: white; }

/* Colors */
.home #main { border-color: #877480; background-image: url(zero/backgrounds/home.jpg); }
.home #body a,
.home #body h2 { color: #877480; }
.numero #main { border-color: #98716c; background-image: url(zero/backgrounds/numero.jpg); }
.numero #body a,
.numero #body h2 { color: #98716c; }
.abonnement #main { border-color: #ff7373; background-image: url(zero/backgrounds/abonnement.jpg); }
.abonnement #body a,
.abonnement #body h2 { color: #ff7373; }
.distributeurs #main { border-color: #5ac0e8; background-image: url(zero/backgrounds/distributeurs.jpg); }
.distributeurs #body a,
.distributeurs #body h2 { color: #5ac0e8; }
.annonceurs #main { border-color: #e41f8a; background-image: url(zero/backgrounds/annonceurs.jpg); }
.annonceurs #body a,
.annonceurs #body h2 { color: #e41f8a; }
.plus #main { border-color: #009935; background-image: url(zero/backgrounds/plus.jpg); }
.plus #body a,
.plus #body h2 { color: #009935; }
.contact #main { border-color: #a2a09e; background-image: url(zero/backgrounds/contact.jpg); }
.contact #body a,
.contact #body span,
.contact #body h2 { color: #a2a09e; }
#body a:hover { color: black; }

/* Home */
.home #body { padding-top: 45px; }
.home #body h2 { text-align: left; margin-bottom: .3em; float: right; width: 500px; padding-top: 1em; }
.home #body ul.left { float: left; width: 450px; margin-right: 30px; }
.home #body ul.right { float: right; width: 500px; text-align: left; padding-top: 15px; }
.home #body li { padding-bottom: 1em; line-height: 16px; }

/* Numero */
.numero #body p { line-height: 16px; }
.numero #body p.one { margin-left: 350px; }
.numero #body p.two { margin-left: 540px; }
.numero #body p.three { margin-left: 590px; }
.numero #body ul.bullets-left { margin-left: 210px; }
.numero #body ul.thumbs { float: left; height: 190px; width: 320px; }
.numero #body ul.thumbs li { display: inline; }
.numero #body ul.thumbs a { display: block; float: right; width: 110px; height: 30px; padding-top: 160px; margin-left: 20px; background: no-repeat top center; text-align: center; }
.numero #body ul.thumbs a.light { background-position: 7px 20px; padding-top: 145px; }
.numero #body ul.thumbs small { display: block; color: #666; }
.numero #body div.left { float: left; width: 350px; margin-right: 30px; padding-top: 80px; text-align: left; }
.numero #body div.top { float: left; width: 500px; }
.numero #body div.top h2 { float: left; padding-top: 5em; }
.numero #body div.bottom { padding-top: 150px; }
.numero #body h2 span { float: left; font-size: 1em; }
.numero #body p.legend { text-align: right; color: #666; font-size: .9em; line-height: 13px; }
.numero #body div.coords { float: left; width: 470px; margin-right: 30px; }
.numero #body div.payment { float: right; width: 470px; }

/* Cube */
.cube #body { margin-right: 50px; }
.cube #body p { line-height: 16px; }
.cube #body p.chapo { margin-left: 450px; font-weight: bold; font-size: 1.1em; }
.cube #body ul.bullets-right { margin-left: 360px; margin-top: 30px; }
.cube #body ul.bullets-left { margin-left: 660px; margin-top: 30px; }
.cube #body div.left { float: left; width: 600px; margin-right: 50px; padding-top: 2em; }
.cube #body div.left p { margin-left: 20px; }
.cube #body div.right { text-align: left; padding-top: 3em; }

/* Plus */
.plus #body h2 { margin-bottom: 2em; }
.plus #body p { line-height: 14px; }
.plus #body div.left { float: left; width: 540px; margin-right: 30px; padding-right: 30px; border-right: 1px #009935 solid; }
.plus #body div.right { text-align: left; }
.plus #body ul.bullets-right { margin-right: 100px; margin-top: 20px; }
.plus #body ul.bullets-right li { float: right; margin-left: 20px; }

/* Contact */
.contact #body a,
.contact #body span { font-size: 1.1em; }

/* Invoice */
.invoice #body .paper { padding: 20px; border: 1px #ccc solid; }
.invoice #body table.refs { float: right; width: 280px; border-spacing: 1px; }
.invoice #body table.refs td { text-align: left; padding-left: 10px; width: 100px; }
.invoice #body address { font-style: normal; }
.invoice #body address.shizen { float: left; margin: 0 20px 20px 0; }
.invoice #body address.dest { clear: right; float: right; width: 400px; text-align: left; padding: 2em 0; }
.invoice #body table.details { width: 100%; margin: 2em 0; text-align: left; }
.invoice #body table.details tbody { border: 1px #ccc solid; border-width: 1px 0; }
.invoice #body table.details td,
.invoice #body table.details th { padding: 2px 10px; }
.invoice #body table.details tfoot th { font-weight: bold; text-align: right; }
.invoice #body address.ticket { float: right; margin: 0 0 20px 20px; }
.invoice #body div.ticket { padding-left: 220px; text-align: left; }

/* Legal */
.legal-mentions a { color: #888; }

/* Words */
.home #body li em,
.home #body li span { font-size: 1.5em; color: #877480; }
.home #body li em { font-size: 2em; font-style: normal; }
.numero #body span { font-size: 1.6em; color: #98716c; }
.abonnement #body span { font-size: 1.3em; color: #ff7373; }
.distributeurs #body span { font-size: 1.4em; color: #5ac0e8; }
.annonceurs #body span { font-size: 1.4em; color: #e41f8a; }
.plus #body a { font-size: 1.1em; color: #009935; }

/* Last minute */
#body .minute { position: absolute; top: -70px; right: 0; width: 650px; color: white; }
#body .minute h2 { margin: 0; padding: 0; float: none; font-size: 1.3em; text-align: right; }
#body .minute ul { margin: 0; }
#body .minute li { padding: 0; }
#body .minute a:hover { color: white; }

/* Toggle */
#toggle { position: absolute; top: 5px; right: 5px; z-index: 200; width: 80px; height: 38px; }
#toggle a { display: block; float: right; width: 80px /*25px*/; height: 38px; background: url(zero/layout/blog.png) no-repeat right; }
/*#toggle a:hover { width: 80px; }*/
#toggle span { display: none; }