/**
 * Vineolia
 * 
 * Another Kemar joint
 * @version: 1.0 (07.08.2009)
 * @version: 1.1 (13.02.2010) glossary
 * @version: 1.2 (10.08.2010) cahiers
 *
**/

/* Reset
-------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Global
-------------------------------------------------------- */
html {
    height: 100% !important;
    font: normal normal normal 12px/normal "Lucida Grande", Tahoma, Arial, sans-serif;
    background: #fbf3ce url(../img/background.gif) no-repeat 50% 0;
    background-attachment: fixed;
    overflow-y: scroll;
}
body {
    width: 860px;
    padding: 10px;
    margin: 0 auto;
    color: #000;
    /*
        le position: relative; break le positionnement du plugin jQuery colorbox : posLeft l.344
        je le commente pour le moment je sais plus pourquoi je l'avais mis mais il doit y avoir une putain de bonne raison
    */
    /* position: relative;*/
}

a:link     { color: #000; text-decoration: underline; }
a:visited  { color: #000; text-decoration: underline; }
a:hover    { color: #000; text-decoration: none; }
a:focus    { color: #000; text-decoration: none; }
a:active   { color: #000; text-decoration: none; }

h1, h2, h3, h4, h5 {
    font-weight: normal;
    margin: 14px 0;
}
h1 { font-size: 19px; }
h2 { font-size: 18px; }
h3 { font-size: 17px; }
h4 { font-size: 16px; }
h5 { font-size: 15px; }

p, ul, ol { margin: 14px 0; }

ul li {
    margin: 6px 0;
    list-style-type: disc;
    list-style-position: inside;
}
ol li {
    margin: 6px 0;
    list-style-type: decimal;
    list-style-position: inside;
}

ul ul { margin: 0 0 0 20px; }

hr {
    color: #DFDBC8;
    background: #DFDBC8;
    border: 0;
    height: 1px;
    margin: 0;
    padding: 0;
    |display: block;/*IE*/
    |margin: -0.5em 0;/*IE*/
}

label { cursor: pointer; }

/* Layout minimal
-------------------------------------------------------- */
iframe {
    overflow-y: hidden;
}
body.minimal {
    width: auto;
}
.minimal .box  {
    margin: 0 0 10px 0;
    padding: 0 10px;
    position:relative;
}
.minimal .form-full textarea {
    width: 370px;
    max-width: 370px;
    height: 80px;
}
.minimal .form-full .form-submit {
    padding: 0 10px 0 0;
    text-align: right;
}

/* Classes
-------------------------------------------------------- */
.clear { clear: both; }
.flr { float: right !important; }
.tar { text-align: right !important; }
.tac { text-align: center !important; }
.none { display: none !important; }
.noborder { border: 0 !important; }
.nomargin { margin: 0 !important; }
.small { font-size: 11px; }
.highlight, a.highlight { font-weight: bold; color: #970005; }

.nope { display: none; }/*js*/
.view { display: block; }/*js*/

a.add-item {
    display: inline-block;
    padding: 0 0 0 17px;
    min-height: 14px;
    background: url(../img/add_icon.gif) no-repeat 0 50%;
    font-size: 11px;
}
a.warning {
    display: inline-block;
    padding: 0 0 0 20px;
    min-height: 16px;
    line-height: 16px;
    background: url(../img/warning.gif) no-repeat 0 50%;
    font-size: 11px;
}
.arrow {
    background: url(../img/arrow_right.gif) no-repeat 0 5px;
    padding-left: 10px !important;
}
.arrow-down {
    background: url(../img/arrow_down.gif) no-repeat 0 7px;
}
.arrow:hover {
    text-decoration: none !important;
}
h1.arrow {
    background-position: 0 8px;
}
h1.arrow-down {
    background-position: 0 10px;
}

a.social-icon {
    display: inline-block;
    height: 16px;
    line-height: 16px;
    margin: 2px 0;
    text-decoration: none !important;
    cursor: pointer;
}
a.social-icon * {
    text-decoration: none !important;
}
a.social-icon:hover, a.social-icon:focus, a.social-icon:active {
    text-decoration: none !important;
    font-weight: bold !important;
}
.twitter {
    padding-left: 20px !important;
    background: url(../img/social_twitter.png) no-repeat 0 0;
}
.facebook {
    padding-left: 20px !important;
    background: url(../img/social_facebook.png) no-repeat 0 0;
}

h1.error404 { font-size: 60px; color: #970005; }
p.error404 { font-size: 16px; margin: 0 0 30px 0; }

span.divide { display: inline-block; margin: 0 6px !important; }

div.inline-help {
    border: 1px solid #e3e000;/*f8f4c1*/
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    background: #f8f4c1 url(../img/help.gif) no-repeat 7px 4px;
    margin: 10px 0;
    padding: 4px 4px 4px 30px;
    font-style: italic;
}
div.inline-help * {
    margin: 0 !important;
    padding: 0 !important;
}

ul.simple li {
    list-style-type: none;
    list-style-position: outside;
    margin: 0;
    padding: 2px 10px 2px 12px;
    background: url(../img/bullet.gif) no-repeat 0 8px;
}


/* Modules
-------------------------------------------------------- */
/* list-filter */
.list-filter { margin: 18px 0; font-size: 11px; }
.list-filter p { margin: 4px 0; }
.list-filter-links * { vertical-align: middle; }
.list-filter-links a { padding: 0 2px; }
.list-filter-links strong { padding: 0 2px; font-size: 16px; }
/* .filter */
form.inline { margin: 18px 0; font-size: 11px; }
form.inline * { vertical-align: middle; }
form.inline label { padding-right: 6px; }
form.inline input[type=text] { width: 300px; }
/* .search */
form.search { margin: 10px 0; color: #32312a; }
form.search p { margin: 6px 0; }
form.search label { padding: 0 5px 0 0; vertical-align: middle; }
form.search select { margin: 0 10px 0 0; }
form.search input[type=text] {
    vertical-align: middle;
    background: url(../img/search.gif) no-repeat 0 0;
    width: 289px;
    height: 29px;
    margin: 0;
    padding: 0 5px 0 6px;
    border: 0;
    outline: 0;
    /* http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/ */
    height: 23px\9;/*IE8 and below*/
    padding: 6px 5px 0 6px\9;/*IE8 and below*/
}
form.search input[type=submit] { vertical-align: middle; }
form.search .toggle-next a { font-size: 11px; color: #32312a !important; }
/* .toolbox */
ul.toolbox {
    font-size: 11px;
    _height: 1%;/*ie6*/
    background: #f7f3e3;
    color: #32312a;
    border: 1px solid #dfdbc8;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    overflow: auto;
}
ul.toolbox li {
    display: inline;
    list-style-type: none;
    list-style-position: outside;
}
ul.toolbox li a:link, ul.toolbox li a:visited {
    display: block;
    float: left;
    padding: 6px 14px 6px 18px;
    border-right: 1px solid #dfdbc8;
}
ul.toolbox li a.prev {
    background: url(../img/arrow_left.gif) no-repeat 6px 50%;
}
ul.toolbox li a.next {
    background: url(../img/arrow_right.gif) no-repeat 6px 50%;
}
ul.toolbox li a.edit {
    padding-left: 26px;
    background: url(../img/edit_icon.gif) no-repeat 6px 50%;
}
ul.toolbox li a.add {
    padding-left: 26px;
    background: url(../img/add_small.gif) no-repeat 10px 50%;
}
ul.toolbox li a.trash {
    padding-left: 26px;
    background: url(../img/trash_icon.gif) no-repeat 6px 50%;
}
ul.toolbox li a.rss {
    padding-left: 24px;
    background: url(../img/rss_12x12.gif) no-repeat 6px 50%;
}
ul.toolbox li a:hover,
ul.toolbox li a:focus,
ul.toolbox li a:active {
    background-color: #dfdbc8;
}
/* where-am-i */
.where-am-i {
    margin: 0 0 20px 0;
    font-size: 11px;
    background: #f7f3e3;
    color: #32312a;
    border: 1px solid #dfdbc8;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}
.where-am-i span {
    display: inline-block;
    padding: 6px 24px 8px 14px;
    color: #8b8b8b;
    font-weight: bold;
    font-size: 14px;
    background: url(../img/arrow_next.gif) no-repeat 100% 50%;
}
.where-am-i .last {
    background: none;
    padding: 6px 14px 8px 14px;
}
.where-am-i .here {
    color: #7a3230;
}
/* inner-nav (voir une autre notation) */
.inner-nav {
    position: absolute;
    top: -4px;
    right: 5px;
}
.inner-nav p {
    width: 300px;
    border: 1px solid #DFDBC8;
    padding: 4px 4px 4px 14px;
    font-size: 11px;
    background: #faf9f3 url(../img/arrow_down.gif) no-repeat 96% 50%;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    margin: 0;
    position: relative;
    top: 1px;
}
.inner-nav p a {
    text-decoration: none;
}
.inner-nav ul {
    position: absolute;
    display: inline-block;
    min-width: 318px;
    |width: 318px;
    max-height: 215px;
    overflow: auto;
    margin: 0;
    padding: 0;
    border: 1px solid #DFDBC8;
    background: #faf9f3;
}
.inner-nav ul li {
    font-size: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid #DFDBC8;
}
.inner-nav ul li:last-child { border: 0; }
.inner-nav ul li a:link, .inner-nav ul li a:visited {
    display: block;
    margin: 0;
    padding: 4px 4px 4px 14px;
    text-decoration: none;
    outline: 0;
}
.inner-nav ul li a.current { font-weight: bold; }
.inner-nav ul li a.all { background: #fff; font-style: italic; }
.inner-nav ul li a:hover,
.inner-nav ul li a:focus,
.inner-nav ul li a:active,
.inner-nav ul li a.all:hover,
.inner-nav ul li a.all:focus,
.inner-nav ul li a.all:active {
    background: #DFDBC8;
}
/* message système */
.system {
    margin: 0 0 10px 0;
    padding: 0 10px 0 58px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}
.system.error {
    background: #fbdabb url(../img/error_icon.png) no-repeat 18px 10px;
    color: #7d0000;
    border: 1px solid #DFDBC8;
}
.system.success {
    background: #e1f5be url(../img/success_icon.png) no-repeat 18px 10px;
    color: #005c02;
    border: 1px solid #DFDBC8;
}
.system.confirm,
.system.warning {
    background: #F7F3E3 url(../img/confirm_icon.png) no-repeat 18px 10px;
/*    color: #005372;*/
    border: 1px solid #DFDBC8;
}
.system.alert {
    background: #F7F3E3 url(../img/confirm_icon.png) no-repeat 18px 10px;
    border: 1px solid #DFDBC8;
}
.system.add {
    background: #F7F3E3 url(../img/add.png) no-repeat 18px 10px;
    border: 1px solid #DFDBC8;
}
/* formulaire pour filtrer, via js */
#js-filter {
    background: url(../img/filter.gif) no-repeat 0 0;
    display: inline-block;
    width: 240px;
    height: 33px;
    position: relative;
    margin: 10px 0 0 0;
    height: 31px\9;/*IE8 and below*/
    padding-top: 2px\9;/*IE8 and below*/
}
#js-live-filter {
    border: 0;
    background: transparent;
    position: relative;
    top: 4px;
    left: 30px;
    height: 19px;
    width: 200px;
    outline: none;
    font-size: 12px;
}
#js-live-filter-num {
    font-size: 11px;
    position: relative;
    top: 3px;
    left: 10px;
}
#js-live-filter-num strong {}

/* Check Login
-------------------------------------------------------- */
#username-check {
    padding-right: 6px;
    display: none;
}
#username-ok, #username-ko {
    display: inline-block;
    background: url(../img/small_tick.gif) no-repeat 0 1px;
    padding: 0 0 0 18px;
    color: #2DAB3B;
    font-weight: bold;
    display: none;
}
#username-ko {
    background: url(../img/small_cross.gif) no-repeat 0 1px;
    color: #AC1111;
}


/* Pager
-------------------------------------------------------- */
.pager {
    font-size: 11px;
    padding: 0;
}
.pager span, .pager strong, .pager a {
    display: inline-block;
    padding: 2px 8px 3px 8px;
    margin: 0 5px 8px 3px;
    text-decoration: none;
    text-align: center;
}
.pager strong {
    text-align: center;
}
.pager span, .pager a.pager-nav {
    width: auto;
}
.pager a.page:link, .pager a.page:visited {
    background: #f7f3e3;
    border: 1px solid #d2cfcf;
}
.pager a.page:hover, .pager a.page:focus, .pager a.page:active {
    background: #FFF;
}


/* Glossary
-------------------------------------------------------- */
#glossary .glossary-item {
    border-top: 1px solid #DFDBC8;
    position: relative;
    padding-left: 52px;
}
#glossary .glossary-item h1 {
    display: block;
    float: left;
    padding: 6px 9px 7px 9px;
    margin: 0 4px 0 0;
    position: absolute;
    top: 7px;
    left: 5px;
    min-width: 14px;
    font-weight: bold;
    border: 1px solid #DFDBC8;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
}
#glossary .glossary-item h2 {
    background: #F7F3E3\9;/*IE ANIMATED FADE PROBLEMS http://icant.co.uk/sandbox/msieopacityissue/ */
}
#glossary .glossary-item p.top {
    margin: -14px 0 10px 0;
}
#glossary-intro {
    |z-index: 3000;
}
#glossary-intro h1 {
    padding-left: 110px;
}
#glossary-intro img {
    z-index: 10;
    position: absolute;
    left: 10px;
    top: -10px;
    |z-index: 1000 !important;/*IE7*/
}
.glossary-letters {
    margin: 10px 0 30px 0;
    padding-left: 110px;
}
.glossary-letters a,
.glossary-letters strong {
    display: block;
    float: left;
    padding: 5px 7px 7px 7px;
    margin: 0 4px 0 0;
    min-width: 10px;
    font-weight: bold;
    border: 1px solid #DFDBC8;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    text-decoration: none;
    background: #FAF9F3;
    text-align: center;
}
.glossary-letters a:hover, .glossary-letters a:focus, .glossary-letters a:active {
    background: #fff;
}
.glossary-letters a.current {
    background: #7A3230;
    border: 1px solid transparent;
    color: #fff;
}

/* Header
-------------------------------------------------------- */
#header {
    position: relative;
    padding: 0;
    min-height: 108px;
    _height: 108px;/*ie6*/
}
#header * {
    margin: 0;
}
#header h1 a {
    display: block;
    width: 221px;
    height: 70px;
    text-indent: -10000px;
    overflow: hidden;
    background: url(../img/logo.png) no-repeat 0 0;
    _background: url(../img/logo.gif) no-repeat 0 0;/*ie6*/
}
#baseline {
    position: absolute;
    left: 50px;
    padding: 8px 0 5px 50px;
}
#header ul {
    list-style: none;
    position: absolute;
    top: 6px;
    right: 0;
}
#header ul li {
    list-style: none;
    display: inline;
}
#header ul li form {
    display: inline;
}
#header ul li * {
    vertical-align: middle;
}


/* Nav + Login Nav
-------------------------------------------------------- */
#nav,
#login-nav {
    position: relative;
    background: #32312c;
    overflow: auto;
    font-weight: bold;
    padding: 4px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    _height: 1%;/*ie6*/
}
#login-nav {
    margin: 4px 0 0 0;
    |margin-bottom: 0;/*ie6+ie7*/
    background: #7a3230;
}
#nav *,
#login-nav * {
    margin: 0;
}
#nav ul li,
#login-nav ul li {
    list-style: none;
    display: inline;
}
#nav ul li a:link, #nav ul li a:visited,
#login-nav ul li a:link, #login-nav ul li a:visited {
    color: #FFF;
    display: block;
    float: left;
    padding: 6px 10px;
    text-decoration: none;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}
#nav ul li a:hover, #nav ul li a:focus, #nav ul li a:active,
#login-nav ul li a:hover, #login-nav ul li a:focus, #login-nav ul li a:active {
    color: #32312c;
    background: #fff;
    |border: none;/*ie7*/
}
#login-nav ul li a:hover, #login-nav ul li a:focus, #login-nav ul li a:active {
    color: #7a3230;
}
#nav ul li a.here, #login-nav ul li a.here, #login-nav ul li a.here {
    text-decoration: underline;
}

#global-search { position: absolute; top: 6px; right: 10px; }
#global-search label { display: none; }
#s-input { width: 200px; height: 14px; border: 1px solid #c3c3c3; }
#s-submit { position: relative; top: 2px; }

#logout:link, #logout:visited {
    display: block;
    position: absolute;
    top: 4px;
    right: 4px;
    background: url(../img/cross_icon.png) no-repeat 5px 9px;
    padding: 6px 4px 6px 16px;
    color: #FFF;
    text-decoration: none;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}
#logout:hover, #logout:focus, #logout:active {
    color: #32312C;
    background: #fff url(../img/cross_icon.png) no-repeat 5px -12px;
}


/* Catcher
-------------------------------------------------------- */
#catcher {
    margin: 6px 0;
    padding: 0 10px;
    overflow: auto;
    _height: 1%;/*ie6*/
}
#catcher * {
    margin: 0;
}
#catcher img {
    
    display: block;
    float: left;
    margin: 0 30px 0 0;
}
#catcher p#catchphrase {
    margin-top: 20px;
}
#catcher p {
    line-height: 18px;
    font-size: 15px;
    margin: 10px 0;
}
#catcher a { color: #970005; font-weight: bold; }


/* Content
-------------------------------------------------------- */
#content {
    padding-top: 20px;
    |height: 1%;/*ie6+ie7*/
}
.raisin-bkg { background: url(../img/raisins.png) no-repeat 3% 100%; }

#content p,
#content ul,
#content ol {
    line-height: 18px;
}

/**
 * Start mini internal CSS framework
 * Classes = .box | .float50-box | .bkg-box | .last-box
 *
 * ie:
 * <div class="box float50-box"></div>
 * <div class="box bkg-box float50-box last-box"></div>
 * <br class="clear" />
 *
**/
.box {
    border: 1px solid transparent;
    position: relative;
    margin: 0 0 20px 0;
    padding: 0 10px;
    |height: 1%;/*ie6*/
    |z-index: 3000;
}
.float25-box {
    margin-right: 20px;
    width: 178px;
    float: left;
}
.float50-box {
    margin-right: 20px;
    width: 398px;
    float: left;
}
.float75-box {
    margin-right: 20px;
    width: 616px;
    float: left;
}
.bkg-box {
    background: #f7f3e3;
    background: -webkit-gradient(linear, left top, left bottom, from(#f5f4ee), to(#f0ecdb));
    background: -moz-linear-gradient(-90deg, #f5f4ee, #f0ecdb);
    color: #32312a;
    border: 1px solid #dfdbc8;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}
.last-box {
    margin-right: 0;
}
/**
 * End mini internal CSS framework
**/

.box img.flr {
    |position: absolute !important;/*IE7*/
    |right: 0 !important;
}

/* Home-Page
-------------------------------------------------------- */
.inner-box {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -moz-background-origin: padding-box;
    -webkit-background-origin: padding-box;
    background-origin: padding-box;
}
.cahier-hp {
    background: url(../img/cahier.png) no-repeat 100% 100%;
    margin: 0 -10px 0 0;
    padding: 0 10px 20px 0;
}
.cahier-hp h1,
.cahier-hp p {
    margin-left: 10px;
}
.bottle-hp {
    background: url(../img/bottle.png) no-repeat 0 100%;
    margin: 0 0 0 -10px;
    padding: 0 0 0 10px;
}
.bottle-hp h1 {
    margin-left: 10px;
}
.bottle-hp p {
    line-height: normal !important;
    margin: 0 10px 0 0;
}

/* Liste des dernières entrées dans les cahiers en HP
-------------------------------------------------------- */
.item-list li {
    display: inline;
    list-style: none;
    list-style-position: outside;
}
.item-list li a:link, .item-list li a:visited {
    display: block;
    margin: 1px 48px 1px 0;
    padding: 4px 10px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    width: 350px;
    float: left;
    text-decoration: none;
}
.item-list li.odd a { clear: left; }
.item-list li a:hover, .item-list li a:focus, .item-list li a:active {
    background: #dfddd2;
    background: rgba(223, 221, 212, 0.90);
}
.item-list li a span {
    display: block;
}
.item-list li a span.item-title {
    font-size: 14px;
}
.item-list li a span.item-meta {
    color: #32312a !important;
    font-size: 11px;
}

/* Liste du top des vins sur la HP
-------------------------------------------------------- */
.top-wines {
    margin: 0 0 0 310px;
    width: 486px;
    min-height: 240px;
    overflow: hidden;
    position: relative;
}
#extra-block {
    position: absolute;
    top: 0;
    left: 0;
}
a.top-wine:link, a.top-wine:visited {
    border: 1px solid #dfdbc8;
    text-decoration: none;
    display: block;
    float: left;
    width: 140px;
    min-height: 200px;
    background: #f7f3e3;
    margin: 10px;
}
a.top-wine:hover, a.top-wine:focus, a.top-wine:active {
    background: #dfddd2;
    background: rgba(223, 221, 212, 0.90);
}
a.top-wine img,
a.top-wine strong,
a.top-wine span {
    display: block;
}
a.top-wine img {
    width: 140px;
    height: 130px;
    border-bottom: 1px solid #dfdbc8;
    margin-bottom: 10px;
}
a.top-wine strong {
    font-size: 12px;
    padding: 5px;
    text-align: center;
}
a.top-wine span {
    font-size: 12px;
    padding: 0 5px 10px 5px;
    text-align: center;
    color: #970005;
}

a#top-prev:link, a#top-prev:visited,
a#top-next:link, a#top-next:visited {
    display: none;
    width: 23px;
    height: 78px;
    text-indent: -10000px;
    overflow: hidden;
    position: absolute;
    top: 114px;
}
a#top-prev {
    left: 297px;
    background: #dfddd2 url(../img/arrow_white_left.png) no-repeat 50% 50%;
}
a#top-prev:hover, a#top-prev:focus, a#top-prev:active {
    background: #32312c url(../img/arrow_white_left.png) no-repeat 50% 50%;
}
a#top-next {
    right: 28px;
    background: #dfddd2 url(../img/arrow_white_right.png) no-repeat 50% 50%;
}
a#top-next:hover, a#top-next:focus, a#top-next:active {
    background: #32312c url(../img/arrow_white_right.png) no-repeat 50% 50%;
}


/* Carnet
-------------------------------------------------------- */
.carnet-nav {
    background: url(../img/carnet.png) no-repeat 0 0;
    height: 35px;
    padding: 4px 0 0 150px;
    margin: 20px 0 14px 0;
    font-size: 10px;
}
.carnet-nav form {
    display: inline;
}
.carnet-nav h1 {
    margin: 0;
}

/* Wine-list - liste des vins dans le compte utilisateur
-------------------------------------------------------- */
.wine-list {
    margin: 0 0 10px 0;
}
.wine-list-item {
    position: relative;
    margin: 4px 0;
    padding: 8px 3px;
    clear: left;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    |height: 1%;/*ie6+ie7*/
}
.wine-list-item:hover {
    background: #e3dfd0;
}
.wine-list-item * {
    margin: 0;
    padding: 0;
    line-height: normal;
}
.wine-list-num {
    display: block;
    width: 40px;
    position: absolute;
    top: 12px;
    font-weight: bold;
    font-size: 25px;
    text-align: center;
}
h2.wine-list-title {
    margin: 0 56px 0 40px;
    padding: 1px 0 2px 10px;
    border-left: 1px solid #c6c2b6;
    font-weight: bold;
    font-size: 14px;
}
h3.wine-list-note {
    display: block;
    width: 40px;
    position: absolute;
    top: 9px;
    right: 12px;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    color: #970005;
}
.wine-list-data {
    margin: 0 40px;
    padding: 0 0 1px 10px;
    border-left: 1px solid #c6c2b6;
    font-size: 11px;
}


/* Wine-item
-------------------------------------------------------- */
.wine-item {}

.wine-item ul {
    float: left;
    width: 418px;
    border-right: 1px solid #c6c2b6;
}
.wine-item ul li {
    |zoom: 1;/*IE6 IE7*/
    position: relative;
    list-style-type: none;
    list-style-position: outside;
    margin: 1px 0;
    padding: 0 10px 0 150px;
}
.wine-item ul li span {
    display: block;
    position: absolute;
    left: 20px;
    top: 0;
    width: 120px;
    font-weight: bold;
    text-align: right;
}

.wine-item .big-picture {
    padding: 5px 0;
    float: left;
    position: relative;
    left: -1px;
    text-align: center;
    width: 418px;
    border-left: 1px solid #c6c2b6;
}

.wine-item .wine-desc {
    margin-top: 20px;
    font-size: 12px;
    |height: 1%;/*ie6+ie7*/
}
.wine-item .wine-desc p {
    margin: 8px 0;
    line-height: 16px !important;
}


/* Note
-------------------------------------------------------- */
.note {
    border: 1px solid #c6c2b6;
    border-width: 1px 0;
    margin: 14px 0;
}
.note h3 {
    font-size: 16px;
    margin: 6px 0 4px 0;
}
.note p {
    margin: 8px 0;
    line-height: 18px !important;
}
.note .note-list {
    background: url(../img/separe.gif) repeat-y 0 0;
    |height: 1%;/*ie6+ie7*/
    margin: 8px 0;
}
.note .note-list div {
    width: 268px;
    _width: 266px;/*ie6*/
    padding: 8px 0;
    margin: 0 0 0 10px;
    float: left;
}
.note .note-list div h3 {
    font-size: 15px;
    margin: 4px 0;
    padding: 0 0 6px 0;
}
.note .note-list div ul {
    margin: 4px 0;
}
.note .note-list div ul li {
    list-style-type: none;
    list-style-position: outside;
    margin: 0;
    padding: 2px 10px 2px 12px;
    background: url(../img/bullet.gif) no-repeat 0 8px;
}

/* Affiche le nombre de résultats après une recherche
-------------------------------------------------------- */
.results-num {
    font-style: italic;
    margin-bottom: 0;
}


/* UL results-list : liste des vins dans le livre
-------------------------------------------------------- */
.results-list {}
.results-list li {
    list-style-type: none;
    list-style-position: outside;
    margin: 5px 0;
    |height: 1%;/*ie6*/
}
.results-list li a:link, .results-list li a:visited {
    display: block;
    color: #32312a;
    font-size: 14px;
    text-decoration: none;
    background: #e3dfd0 url(../img/bullet_hover.gif) no-repeat 7px 11px;
    padding: 4px 6px 4px 17px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    _height: 1%;/*ie6*/
}
.results-list li.odd a:link, .results-list li.odd a:visited {
    background: transparent url(../img/bullet_hover.gif) no-repeat 7px 11px;
}
.results-list li a:hover, .results-list li a:focus, .results-list li a:active,
.results-list li.odd a:hover, .results-list li.odd a:focus, .results-list li.odd a:active {
    font-weight: bold;
    background: #fbf9f1 url(../img/bullet_hover.gif) no-repeat 7px -9px;
}
.results-list li a span {
    font-size: 12px;
    color: #777;
    font-weight: normal;
    display: inline-block;
    margin-left: 4px;
}


/* Form .form-50 : formulaire dans un bloc 50
-------------------------------------------------------- */
.form-50 {
    line-height: normal;
    padding: 5px 0;
}
.form-50 div {
    padding: 0 0 10px 5px;
}
.form-50 label {
    display: block;
    padding: 4px 0;
}
.form-50 input[type=text],
.form-50 input[type=password] {
    width: 370px;
}
.form-50 textarea {
    width: 370px;
    max-width: 370px;
}
.form-50 select {
    margin-right: 10px;
}
.form-50 .form-submit {
    padding: 20px 15px 4px 0;
    text-align: right;
}
.form-50 p.helper {
    margin: 2px 0;
    font-style: italic;
}
.form-50 p.error {
    margin: 2px 0;
    color: #b90000;
    font-weight: bold;
}
.form-50 .error label {
    font-weight: bold;
}
.form-50 .error input,
.form-50 .error textarea {
    background: #fbdab9;
    border: 2px solid #b90000;
}
/* login part */
.form-50 .login input[type=text],
.form-50 .login input[type=password] {
    width: 320px;
}
.form-50 div.step1,
.form-50 div.step2,
.form-50 div.step3,
.form-50 div.step4,
.form-50 div.step5 {
    padding: 0 0 15px 50px;
}
.form-50 div.step1 { background: url(../img/step1.png) no-repeat 10px 4px; }
.form-50 div.step2 { background: url(../img/step2.png) no-repeat 10px 4px; }
.form-50 div.step3 { background: url(../img/step3.png) no-repeat 10px 4px; }
.form-50 div.step4 { background: url(../img/step4.png) no-repeat 10px 4px; }

.form-50 div.step5 label { display: inline; }

/* Form .form-full : formulaire pleine page
-------------------------------------------------------- */
.form-full {
    line-height: normal;
    padding: 10px 0;
}
.form-full div.inline-help {
    margin: 0 0 10px 0;
}
.form-full .box > div.inline-help {
    margin: 10px 0;
}
.form-full fieldset {
    border-top: 1px solid #d0ccbe;
}
.form-full h2 {
    padding: 30px 0 8px 0;
    margin: 0;
    font-size: 16px;
}
.form-full h2.first-title {
    padding: 0 0 8px 0;
}
.form-full h2:first-child {
    padding: 14px 0 8px 0;
}
.form-full .field-holder {
    padding: 12px 5px;
}
.form-full label span {
    color: #7a3230;
    font-size: 16px;
    vertical-align: middle;
}
.form-full label strong {
    background: #F8F4C1;
    font-size: 14px;
    padding: 4px 1px;
}
.form-full p {
    padding: 0;
    margin: 5px 0 0 0;
}
.form-full .field-holder.float50 {/* double classe */
    width: 409px;
    float: left;
}
.form-full textarea {
    width: 600px;
    max-width: 600px;
    font-size: 12px;
    font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
}
.form-full .float50 textarea {
    width: 390px;
    max-width: 390px;
}
.form-full label {
    display: block;
    padding-bottom: 5px;
}
.form-full label:hover {
    text-decoration: underline;
}
.form-full label.classic {
    display: inline;
    padding-bottom: 0;
}
.form-full h3 {
    padding: 4px 0;
    margin: 0;
    font-size: 13px;
    font-weight: bold;
    text-transform: capitalize;
}
.form-full select option {
    text-transform: capitalize;
}
.form-full ul.checkbox-list {
    margin: 0 0 10px 0;
    padding: 0;
    overflow: auto;
}
.form-full ul.checkbox-list li {
    margin: 0;
    padding: 0 4px 4px 0;
    list-style-type: none;
    list-style-position: outside;
    float: left;
    width: 205px;
    text-transform: capitalize;
}
.form-full ul.checkbox-list li.last {
    width: 201px;
    padding-right: 0;
}
.form-full div.multiple {
    padding: 0 0 5px 0;
}
.form-full .error input,
.form-full .error textarea {
    background: #fbdab9;
    border: 2px solid #b90000;
}
.form-full .error label,
.form-full p.error {
    color: #b90000;
    font-weight: bold;
}
.form-full p.helper,
.form-full span.helper {
    color: #5e5c50;
    font-style: italic;
}
.form-full .form-submit {
    padding: 40px 10px 4px 0;
    text-align: right;
}
/* Wine color chooser */
ul.wine-colors {
    list-style-type: none;
    padding: 0;
}
ul.wine-colors li {
    display: block;
    float: left;
    margin: 30px 13px 0 13px;
    padding: 0;
    width: 65px;
    height: 105px;
    list-style-type: none;
}
ul.wine-colors li a:link,
ul.wine-colors li a:visited {
    display: block;
    width: 65px;
    height: 105px;
    background: url(../img/mask.png) no-repeat 0 -210px;
    text-decoration: none;
}
ul.wine-colors li a:hover,
ul.wine-colors li a:focus,
ul.wine-colors li a:active {
    background-position: 0 -105px;
}
ul.wine-colors li a:hover *,
ul.wine-colors li a:focus *,
ul.wine-colors li a:active * {
    font-weight: bold;
}
ul.wine-colors li a span {
    display: block;
    position: relative;
    width: 65px;
    height: 30px;
    top: -30px;
    line-height: normal;
    font-size: 11px;
}
ul.wine-colors li a span strong {
    display: block;
    position: absolute;
    bottom: 5px;
    width: 75px;
    left: -5px;
    font-weight: normal;
    font-style: italic;
    text-align: center;
}
ul.wine-colors li a.selected {
    background-position: 0 0;
}
ul.wine-colors li a.selected span strong {
    font-weight: bold;
    text-decoration: underline;
}


/* Cahiers
-------------------------------------------------------- */

/* a.blog-mea
------------------*/
a.blog-mea:link, a.blog-mea:visited {
    display: block;
    position: relative;
    width: 578px;
    max-width: 578px;
    height: 90px;
    max-height: 90px;
    background: url(../img/cahiers_link.png) no-repeat 0 0;
    padding: 10px 20px;
    margin: 0 0 10px 0;
    text-decoration: none;
    -webkit-box-shadow: rgba(0, 0, 0, 0.10) 0 1px 6px;
    -moz-box-shadow: rgba(0, 0, 0, 0.10) 0 1px 6px;
    box-shadow: rgba(0, 0, 0, 0.10) 0 1px 6px;
}
a.blog-mea:hover, a.blog-mea:focus, a.blog-mea:active {
    background-position: 0 -110px;
}
a.blog-mea .title {
    display: block;
    padding: 6px 170px 10px 0;
    font-size: 19px;
}
a.blog-mea .desc {
    display: block;
    margin: 0 170px 10px 0;
    font-size: 12px;
    line-height: 16px;
    color: #32312a;
}
a.blog-mea .read {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 170px;
    height: 110px;
    line-height: 110px;
    text-align: center;
    font-size: 19px;
}
a.blog-mea:hover .read, a.blog-mea:focus .read, a.blog-mea:active .read {
    text-decoration: underline;
}

/* .blog-list-item
------------------*/
.blog-list-item {
    border-top: 1px solid #dfdbc8;
    padding: 2px 0 0 16px;
    margin: 10px 0;
    background: url(../img/bullet.gif) no-repeat 6px 20px;
}
.blog-list-item h2 {
    font-size: 16px;
    margin: 10px 0 5px 0;
    padding: 0 0 0 4px;
}
.blog-list-item a:link, .blog-list-item a:visited {
    display: inline-block;
    padding: 2px 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    background: #e3dfd0;
    text-decoration: none;
}
.blog-list-item a:hover, .blog-list-item a:focus, .blog-list-item a:active {
    background: #fbf9f1;
}
/* h2 links */
.blog-list-item h2 a:link, .blog-list-item h2 a:visited, .blog-list-item h2 a:hover, .blog-list-item h2 a:focus, .blog-list-item h2 a:active {
    padding: 4px 8px;
    margin: 0 0 0 -4px;
}
.blog-list-item p {
    margin: 5px 0 5px 3px;
    padding: 0;
    color: #777;
}
.blog-list-item p a:link, .blog-list-item p a:visited {
    color: #777 !important;
    background: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    padding: 0;
}
.blog-list-item p a:hover, .blog-list-item p a:focus, .blog-list-item p a:active {}
.blog-list-item ul li {
    list-style: none;
}

/* .blog-header
------------------*/
.blog-header {
    position: relative;
    background: url(../img/blog_header.png) no-repeat 0 0;
    width: 820px;
    height: 90px;
    padding: 10px 20px;
    margin: 0 0 20px 0;
}
.blog-header h1 {
    margin: 5px 220px 5px 180px;
}
.blog-header p {
    font-size: 11px;
    color: #32312a;
    margin: 5px 220px 5px 180px;
}
.blog-header img {
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
}
.blog-header a.more:link, .blog-header a.more:visited {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background: url(../img/blog_header.png) no-repeat 100% -110px;
    width: 190px;
    height: 110px;
    padding: 0 0 0 30px;
    line-height: 110px;
    text-align: center;
    font-size: 19px;
}
.blog-header a.more:hover, .blog-header a.more:focus, .blog-header a.more:active {
    background-position: 100% -220px;
}

/* .blog-content
------------------*/
.blog-content {
    width: 580px;
    float: left;
    margin-bottom: 10px;
}
.blog-content h1 {
    margin-bottom: 20px;
}

/* .blog-aside
------------------*/
.blog-aside {
    margin: 0 0 10px 20px;
    width: 230px;
    float: left;
}
.blog-aside .item {
    background: #ede9d8;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    padding: 5px 15px;
    margin: 0 0 20px 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 6px;
    -moz-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 6px;
    box-shadow: rgba(0, 0, 0, 0.15) 0 1px 6px;
}
.blog-aside .item h2 {
    font-size: 13px;
    margin: 5px 0 8px 0;
}
.blog-aside .item p,
.blog-aside .item ul {
    font-size: 11px;
    margin: 5px 0;
}

/* .post-title
------------------*/
h1.post-title {
    width: 560px;
    color: #000;
    font: italic 30px/130% georgia,'times new roman',serif;
    letter-spacing: -1px;
    margin: 20px 0;
    padding: 0 10px;
    line-height: 34px;
    background: none;
}

/* .post-metadata
------------------*/
.post-metadata {
    background: #ede9d8;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    padding: 10px;
    margin: 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 6px;
    -moz-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 6px;
    box-shadow: rgba(0, 0, 0, 0.15) 0 1px 6px;
}
.post-metadata .author,
.post-metadata .date,
.post-metadata .comments-num,
.post-metadata .permalink {
    margin-right: 10px;
}

/* .post
------------------*/
.post {
    font-size: 13px;
    padding: 0 10px;
}
.post p {
    line-height: 20px;
    margin: 18px 0;
}
.post img {
    display: block;
    margin: 0 auto;
    max-width: 500px;
    border: 2px solid #EDE9D8;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 6px;
    -moz-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 6px;
    box-shadow: rgba(0, 0, 0, 0.15) 0 1px 6px;
}
.post ul li {
    list-style-type: none;
    list-style-position: outside;
    margin: 0;
    padding: 2px 10px 2px 12px;
    background: url(../img/bullet.gif) no-repeat 0 8px;
}

/* form
------------------*/
form#comment-form {
    padding: 0 10px;
}
.form-row {
    padding: 4px 0;
    clear: left;
}
.form-row label {
    padding: 6px 0 0 0;
    margin: 0 0 0 6px;
    |position: relative;/*IE7*/
    |top: -3px;/*IE7*/
}
.submit-zone {
    padding: 10px 0;
}
form#comment-form input[type="text"] {
    width: 250px;
    border: 1px solid #DFDBC8;
    padding: 4px 2px;
    margin: 0 0 0 1px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 1px 4px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 1px 4px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 4px;
}
form#comment-form textarea {
    font: normal normal normal 12px/normal "Lucida Grande", Tahoma, Arial, sans-serif;
    width: 550px;
    max-width: 550px;
    min-height: 150px;
    border: 1px solid #EDE9D8;
    padding: 2px 4px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 1px 4px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 1px 4px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 4px;
}
form#comment-form .form-row.error {
    color: #b90000;
    font-weight: bold;
}
form#comment-form .form-row.error input,
form#comment-form .form-row.error textarea {
    background: #fbdab9;
    border: 1px solid #b90000;
}
form#comment-form .errorlist {
    margin: 2px 0 0 0;
    padding: 0;
}
form#comment-form .errorlist li {
    margin: 0 0 0 20px;
    padding: 1px 0 0 0;
    list-style: square outside;
}

/* comments
------------------*/
h2#comments {
    padding: 10px;
    background: #ede9d8;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    margin: 40px 0 10px 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 6px;
    -moz-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 6px;
    box-shadow: rgba(0, 0, 0, 0.15) 0 1px 6px;
}
.comment-metadata {
    padding: 10px;
    background: #ede9d8;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    margin: 20px -10px 10px -10px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 6px;
    -moz-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 6px;
    box-shadow: rgba(0, 0, 0, 0.15) 0 1px 6px;
}
.comment-metadata .link,
.comment-metadata .author,
.comment-metadata .date {
    margin-right: 10px;
}
.comment-item {
    padding: 0 10px;
    font-size: 12px;
}
.comment-item h4 {
    font-size: 15px;
}
/* preview */
.comment-preview {
    background: #FBF3CE;
    margin: 10px -10px 0 -10px;
    padding: 5px 10px 10px 10px;
}
.comment-preview .comment-metadata {
    margin: 0 -5px;
}


/* Footer
-------------------------------------------------------- */
#footer {
    position: relative;
    border-top: 1px solid #e8e1c4;
    margin: 40px 0 0 0;
    font-size: 11px;
    |height: 1%;/*ie6+ie7*/
}
#footer #corx {
    position: absolute;
    top: -20px;
    right: 0;
}

#header * { margin: 0; }


/* jquery-asmselect
   http://code.google.com/p/jquery-asmselect/
-------------------------------------------------------- */
.asmContainer {
    /* container that surrounds entire asmSelect widget */
    width: 94%;
}
.asmSelect {
    /* the newly created regular 'select' */
    display: inline;
}
.asmOptionDisabled {
    /* disabled options in new select */
    color: #999;
}
.asmHighlight {
    /* the highlight span */
    padding: 0;
    margin: 0 0 0 1em;
}
.asmList {
    /* html list that contains selected items */
    margin: 0.25em 0 1em 0;
    position: relative;
    display: block;
    padding-left: 0;
    list-style: none;
}
.asmList li:first-child {
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    -o-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    -o-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
}
.asmList li:last-child {
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -o-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -o-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.asmListItem {
    /* li item from the html list above */
    position: relative;
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    background: #E3DFD0;
    border: 1px solid #D0CCBE;
    width: 100%;
    margin: 0 0 -1px 0;
    line-height: 1em;
}
.asmListItem:hover {
    background-color: #FBF9F1;
}
.asmListItemLabel {
    /* this is a span that surrounds the text in the item, except for the remove link */
    padding: 5px;
    display: block;
}
.asmListSortable .asmListItemLabel {
    cursor: move;
}
.asmListItemRemove {
    /* the remove link in each list item */
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px;
}

/* jquery-colorbox
   http://colorpowered.com/colorbox/
-------------------------------------------------------- */
/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of 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;}
/* 
    ColorBox example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/
#cboxOverlay{background:#fff;}
#colorBox{}
    #cboxTopLeft{width:25px; height:25px;}
    #cboxTopCenter{height:25px;}
    #cboxTopRight{width:25px; height:25px;}
    #cboxBottomLeft{width:25px; height:25px;}
    #cboxBottomCenter{height:25px;}
    #cboxBottomRight{width:25px; height:25px;}
    #cboxMiddleLeft{width:25px;}
    #cboxMiddleRight{width:25px;}
    #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:100px; 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{}
        #cboxClose{position:absolute; bottom:0; right:0; display:block; color:#444;}
/*
    The following fixes png-transparency for IE6.  
    It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition
    
    Since this method does not support CSS background-positioning, it is incompatible with CSS sprites.
    Colorbox preloads navigation hover classes to account for this.
    
    !! Important Note: AlphaImageLoader src paths are relative to the HTML document,
    while regular CSS background ../img_colorbox are relative to the CSS document.
*/
.cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../img_colorbox/internet_explorer/borderTopLeft.png, sizingMethod='scale');}
.cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../img_colorbox/internet_explorer/borderTopCenter.png, sizingMethod='scale');}
.cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../img_colorbox/internet_explorer/borderTopRight.png, sizingMethod='scale');}
.cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../img_colorbox/internet_explorer/borderBottomLeft.png, sizingMethod='scale');}
.cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../img_colorbox/internet_explorer/borderBottomCenter.png, sizingMethod='scale');}
.cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../img_colorbox/internet_explorer/borderBottomRight.png, sizingMethod='scale');}
.cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../img_colorbox/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');}
.cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../img_colorbox/internet_explorer/borderMiddleRight.png, sizingMethod='scale');}