/*
:: phyp.project :::::::::::::::::::
:: apps.bymutation.css.screen :: :|
:: 20100119 ::::::::::::::::: @greg
*/

html, body { height: 100%; overflow: hidden; }
body { background: #f0f2f4; }
body, input, select, textarea { font: 12px "Courier New", Courier, Times, serif; letter-spacing: -.1ex; }

/* Boxes */
#hbox, #vbox { width: 100%; height: 100%; }
#hbox { background: transparent repeat-y top center; }
#vbox { background: transparent repeat-x center center; }
#box { position: absolute; top: 50%; left: 0; width: 100%; margin-top: -375px; height: 750px; background: transparent no-repeat center center; }
.box { width: 900px; margin: 0 auto; position: relative; }

/* Header */
#header { height: 100px; }
#header span { display: none; }
#title { padding-top: 20px; }
#title a { display: block; width: 250px; height: 64px; background: url(screen/layout/bymutation.gif); position: relative; top: 40px; left: -40px; z-index: 10; }
html>body #title a { background-image: url(screen/layout/bymutation.png); }
/* html>body #title a { position: fixed; top: 20px; left: 20px; } */
#baseline { display: none; }

/* Main */
#main { height: 605px; }
#subtitle { position: relative; z-index: 11; width: 500px; top: 25px; }

/* Menu */
#menu { position: absolute; top: -30px; right: 50px; width: 280px; text-align: right; font-size: 1.4em; }
/* html>body #menu { position: fixed; top: 20px; right: 20px; } */
#body #menu a { color: #4b4c4d; }
#menu li { line-height: 18px; }
#menu li li { line-height: 15px; font-size: .75em; padding-right: 10px; }
#menu li li li { line-height: 13px; font-size: .8em; padding-right: 10px; }
#body #menu li.on a,
#menu a:hover { color: black; font-weight: bold; }
#body #menu li.on li a { color: #4b4c4d; font-weight: normal; }
#body #menu li.on li.on a,
#body #menu li.on li a:hover { color: black; font-weight: bold; }
#menu li.on a { font-size: 1.3em; }

/* Body */
#body { padding: 10px 50px; height: 585px; /* overflow: auto; */ text-align: justify; }
#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 h1 { font-size: 2em; }
#body h2 { font-size: 2em; font-weight: normal; }
#body h3 { font-size: 1.4em; font-weight: normal; }
#body h4 { font-size: 1.3em; font-weight: normal; }
#body select,
#body input,
#body textarea { border: 1px #ccc solid; padding: 0 3px; background: transparent; text-align: left; }
#body select { padding: 0; }
#body label { cursor: pointer; }
#body input.submit { cursor: pointer; }
#body ul.bullets { text-align: left; }
#body ul.bullets li { padding: 0 0 .3em 24px; background: url(screen/icons/bullet.gif) no-repeat top left; }
html>body #body ul.bullets li { background-image: url(screen/icons/bullet.png); }

/* Footer */
#footer { height: 45px; text-align: left; font-size: 10px; }
#footer .box { width: 100%; }
#footer ul { margin: 0 10px; margin-top: 22px; }
#footer li { display: inline; }
#footer,
#footer a,
#footer em { color: #8b8c8d; font-style: normal; }
#footer a:hover { color: #4b4c4d; }

/* List, highlight & details */
#list { position: absolute; z-index: 3; overflow: hidden; }
#list div { border-top: 1px transparent solid; width: 450px; }
#list div.truncated { border-color: #ddd; }
#list ul { margin-top: 80px; }
#list li { line-height: 16px; height: 16px; overflow: hidden; }
#list a { font-weight: bold; }
#list span { float: left; width: 102px; text-align: right; margin-right: 7px; font-weight: normal; font-size: 0.9em; }
#list li.on { font-size: 1.5em; height: 32px; line-height: 32px; }
#list li.on a { color: black; }
#list li.on span { font-weight: bold; font-size: .6em; }
#list #sp-up { height: 0; }
#list #sp-down { height: 290px; }
#highlight { position: absolute; z-index: 2; width: 290px; height: 290px; }
#highlight img { position: absolute; }
#details { position: absolute; width: 350px; text-align: right; font-size: 1.2em; }
#details h2,
#details div.off,
#details div.photo { display: none; }
#details em { font-style: normal; font-size: .9em; font-weight: bold; }
#details address { font-style: normal; font-size: .9em; }

/* News */
.news #hbox { background-image: url(screen/backgrounds/home.top.gif); }
.news #vbox { background-image: url(screen/backgrounds/home.bottom.gif); }
.news #box { background-image: url(screen/backgrounds/home.center.jpg); }
.news #body { padding-top: 45px; }
.news #body a,
.news #body h2 { color: #877480; }
.news #body a:hover { color: black; }
.news #subtitle { display: none; }
.news #highlight { top: 235px; left: 135px; background: url(screen/backgrounds/home.frame.jpg) no-repeat; }
.news #list { top: 300px; left: 50px; height: 565px; margin-top: -240px; }
.news #highlight div { padding: 17px 16px 23px 24px; }
.news #list li.next a { color: #222; }
.news #list li.next span { color: #4e1ebd; }
.news #list li.on span { color: #4e1ebd; }
.news #list li.past a { color: #797b7d; }
.news #list li.past span { color: #9584b9; }
.news #list li a:hover { color: black; }
.news #details { bottom: 140px; right: 50px; width: 350px; }
.news #details em { color: #4e1ebd; }

/* Shops */
.shops #hbox { background-image: url(screen/backgrounds/shops.top.gif); }
.shops #vbox { background-image: url(screen/backgrounds/shops.bottom.gif); }
.shops #box { background-image: url(screen/backgrounds/shops.center3.jpg); }
.shops #body { padding-top: 45px; }
.shops #body a,
.shops #body h2 { color: #877480; }
.shops #body a:hover { color: black; }
.shops #list { top: 340px; left: 10px; height: 525px; margin-top: -240px; }
.shops #list li a { color: #222; }
.shops #list span { width: 122px; }
.shops #list li span { color: #ed865a; }
.shops #list li.spot { font-size: 1.3em; font-weight: bold; letter-spacing: .3em; margin-left: 129px; }
.shops #list li.spot span { font-size: 1em; text-align: left; }
.shops #list li.on span { color: #ed865a; }
.shops #list li a:hover { color: black; }
.shops #details { bottom: 200px; right: 50px; }
.shops #details h2 { display: block; color: #ed865a; }
.shops #details em { color: #ed865a; }

/* Philo */
.philo #hbox { background-image: url(screen/backgrounds/philo.top2.gif); }
.philo #vbox { background-image: url(screen/backgrounds/philo.bottom.gif); }
.philo #box { background-image: url(screen/backgrounds/philo.center2.jpg); }
.philo #body { padding-top: 45px; }
.philo #body a,
.philo #body h2 { color: #791d16; }
.philo #body a:hover { color: black; }
.philo #body h2 { font-size: 1.2em; }
.philo #body h1 { margin-bottom: 60px; }
.philo #body p { font-size: 1.05em; }
.philo #body p.more,
.philo #body p.less { margin-top: 20px; font-weight: bold; }
.philo #body p.more { text-align: right; }
.philo #body div.ar { padding-top: 20px; }
.philo #body div.al { clear: left; }
.philo #body div.pic { width: 180px; height: 180px; background: transparent no-repeat center; }
.philo #body div.ar div.pic { background-image: url(screen/backgrounds/philo.left.png); padding: 10px 10px 20px 20px; margin: 0 20px 10px 0; float: left; position: relative; left: -20px; }
.philo #body div.al div.pic { background-image: url(screen/backgrounds/philo.right.png); padding: 10px 15px 20px 15px; margin: 0 0 10px 20px; float: right; position: relative; right: -20px; }

/* Presse */
.presse #vbox { background-image: url(screen/backgrounds/presse.bottom.gif); }
.presse #box { background: url(screen/backgrounds/presse.center.jpg) no-repeat bottom center; }
.presse #body { padding-top: 45px; }
.presse #body a,
.presse #body h2 { color: #77696a; }
.presse #body a:hover { color: black; }
.presse #highlight { top: 265px; right: 105px; background: url(screen/backgrounds/presse.frame.jpg) no-repeat; }
.presse #highlight div { padding: 17px 24px 23px 16px; }
.presse #list { top: 330px; right: 20px; height: 535px; margin-top: -240px; }
.presse #list ul { margin-top: 144px; }
.presse #list span { width: 202px; }
.presse #details { top: 80px; left: 50px; text-align: left; }
.presse #details h2 { display: block; font-size: 1.3em; margin-bottom: 0; }
.presse #details h3 { font-size: 1em; font-weight: normal; margin-top: 0; }
.presse #details h4 { display: none; }
.presse #details p.link { text-align: right; }
.presse #details p.quote { font-size: 0.8em; }
.presse #details em { color: #877480; }
.presse #details div.shot { margin: 1em 0; }
.presse #details div.shot img { border: 3px #877480 solid; display: block; margin: 0 auto; }

/* Dressing */
.dressing #hbox { background: #f5f0ee; }
.dressing #vbox { background-image: url(screen/backgrounds/dressing.bottom.gif); }
/* .dressing #title a { background-image: url(screen/layout/bymutation-pink.png); } */
.dressing #body { padding-top: 45px; }
.dressing #body h2 { margin-top: 30px; }
.dressing #body h2.collection { margin-top: 60px; }
.dressing #body h2 a { color: black; }
.dressing #body a { color: #444; font-weight: bold; }
.dressing #body a:hover { color: black; }
.dressing #body div.scroll { width: 500px; position: absolute; z-index: 100; }
.dressing #body div.scroll-right { background: transparent url(screen/backgrounds/blur.right.png) repeat-y left; left: 850px; cursor: e-resize; }
.dressing #body div.scroll-left { background: transparent url(screen/backgrounds/blur.left.png) repeat-y right; left: -450px; cursor: w-resize; }
.dressing #body div.panorama { margin: 1em 0; }
.dressing #body div.pan { position: absolute; left: -750px; width: 2400px; }
.dressing #body ul.slide { position: relative; display: block; }
.dressing #body ul.slide li { float: left; margin-right: 0; }
.dressing #body ul.slide li div { width: 320px; height: 330px; padding: 0 30px; display: table-cell; vertical-align: middle; }
.dressing #body div.collections { height: 330px; }
.dressing #body div.collections div.scroll { height: 330px; }
.dressing #body div.collections li { margin-right: 5px; }
.dressing #body div.collections img { border: 5px white solid; }
.dressing #body div.pics { height: 255px; }
.dressing #body div.pics div.scroll { height: 255px; }
.dressing #body div.pics li a { display: block; width: 160px; height: 245px; padding: 5px; background: url(screen/backgrounds/pic.frame.png) no-repeat; }
.dressing #zoom div.off { display: none; }
.dressing #zoom div.pic { position: absolute; top: 20px; right: 80px; border: 1px #ccc solid; z-index: 200; }
.dressing #zoom div.pic img { border: 20px white solid; display: block; }
.dressing #zoom div.caption { position: absolute; bottom: 50px; right: 550px; width: 300px; text-align: right; z-index: 201; }
.dressing #zoom h3 { margin-top: 0; }
.dressing #zoom h4 { font-style: italic; font-size: 0.8em; margin-bottom: 0; }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: black; z-index: 120; }

/* Contact */
.contact #hbox { background-color: #dadde1; background-image: url(screen/backgrounds/contact.top.gif); }
.contact #vbox { background-image: url(screen/backgrounds/contact.bottom.gif); }
.contact #box { background-image: url(screen/backgrounds/contact.center4.jpg); }
/* .contact #title a { background-image: url(screen/layout/bymutation-dark.png); } */
.contact #body { padding-top: 45px; }
.contact #body form { float: right; width: 300px; text-align: right; padding-top: 50px; }
.contact #body form h2 { font-size: 1.3em; }
.contact #body label { display: block; margin-top: .5em; font-weight: bold; }
.contact #body input.email,
.contact #body textarea { width: 250px; text-align: right; }
.contact #body input.submit { margin-top: .5em; background: #dadde1; }
.contact #body input,
.contact #body textarea { -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 1px 3px; background: #dfe2e5; }
.contact #body div.al { float: left; margin-top: 200px; width: 280px; }
.contact #body p { font-size: 1.2em; }
.contact #body div.ar { float: right; clear: right; margin-top: 100px; margin-right: 120px; width: 250px; }
.contact #body address { font-style: normal; margin: 1em 0; font-size: 1.1em; }
.contact #body a,
.contact #body h2 { color: #25272c; }
.contact #body div.al a { /* display: block; margin-top: 1em;*/ font-weight: bold; }
.contact #body div.ar a { font-weight: bold; font-size: 1.2em; }
.contact #body a:hover { color: black; }

/* Errors */
.error #body h1 { padding-top: 200px; }
.error #vbox { background-image: url(screen/backgrounds/error.bottom.gif); }
.error #body a { color: #444; }
.error #body a:hover { color: black; }