/* Feuille de style du site CHAMBRS NOIRES - part 01 -> layout general */
/* author : cezarion.net */

/* General style */

* {
    margin:0pt;
    padding:0pt;
}

body {
    background:#000;
    color:#333333;
    font: 11px/1.2em "Trebuchet MS", Helvetica,"Lucida Grande",Tahoma,monospace;
    margin:0;
    padding:0;
}

pre {
    color:#FFFFFF;
}

pre.error {
    background-color:#FFFFFF;
    position:absolute;
    color:#000000;
    top:0;
    opacity:0.8;
    padding:10px;
    width:900px;
}

.clear {
    clear: both;
    visibility:hidden;
}

.hidden {
    display:none;
    clear: both;
    visibility:hidden;
}
/* Header ***********************************************************************/
#header {
    height:296px;
    width: 100%;
    margin: 0px auto;
    padding:0;
    background:#000 url(../images/header.jpg) no-repeat scroll center 0;
}
/* Navigation ***********************************************************************/

#navigation-container {
    width:100%;
    background:#303030 url(../images/navigation_ombre.gif) repeat-x scroll 0 0;
    z-index:500;
}

#navigation-container #navigation {
    width: 900px;
    height: 70px;
    margin:0 auto;
    overflow:hidden;
    padding : 7px 0 0;
    background:#303030 url(../images/header_arc.jpg) no-repeat scroll center top;
}
/* Menu déroulant *****************************************/

#navigation dl {
    float:left;
}

#navigation dt{
    overflow: hidden;
}

#navigation dt a{
    height:55px;
    width:140px;
    display:block;
    text-indent:-9999px;
    background-position:center 0;
    background-repeat:no-repeat;
}

#navigation #accueil-ddheader a {
    background: transparent url(../images/menu_accueil.gif) no-repeat scroll center 0
}

#navigation #collection-ddheader a {
    background: transparent url(../images/menu_collection.gif) no-repeat scroll center 0
}

#navigation #catalogue-ddheader a {
    background: transparent url(../images/menu_catalogue.gif) no-repeat scroll center 0
}

#navigation #lemag-ddheader a {
    background: transparent url(../images/menu_lemag.gif) no-repeat scroll center 0
}

#navigation #bonus-ddheader a {
    background: transparent url(../images/menu_bonus.gif) no-repeat scroll center 0
}

#navigation #pros-ddheader a {
    background: transparent url(../images/menu_pros.gif) no-repeat scroll center 0
}

#navigation #contacts-ddheader a {
    background: transparent url(../images/menu_contacts.gif) no-repeat scroll center 0
}

#navigation #accueil-ddheader a, #navigation #contacts-ddheader a {
    width:100px;
}

#navigation .dropdown dd {
    font: 1.1em/1.2em "Courier New", Courier, monospace !important;
    font-weight:900  !important;
    color:#000;
    position:absolute;
    overflow:hidden;
    width:140px;
    z-index:800;
    margin-top:-13px;
    display:none;
}

#navigation .dropdown ul {
    list-style:none;
}

#navigation .dropdown li {
    display:block;
    height:25px;
}

*+html #navigation .dropdown li {
    height:21px;
}

#navigation .dropdown .C1, #navigation .dropdown .C2 {
    display:block;
}


#navigation .dropdown .C1 a, #navigation .dropdown .C1 a:active,
#navigation .dropdown .C2 a, #navigation .dropdown .C2 a:active{
    display:block;
    color:#000;
    text-decoration:none;
    height:25px;
}

#navigation .C1 .left, #navigation .C1 .right, #navigation .C2 .left, #navigation .C2 .right {
    width:7px;
}

#navigation .C1 span, #navigation .C2 span {
    float:left;
    height:25px;
}

#navigation .C1 .content, #navigation .C2 .content {
    width:126px;
    line-height:2em;
}

#navigation .C1 .content {
    background:transparent url(../images/smenu_1C.png) repeat-x scroll 0 0;
}

#navigation .C1 .left {
    background:transparent url(../images/smenu_1L.png) no-repeat scroll 0 0;
}

#navigation .C1 .right {
    background:transparent url(../images/smenu_1R.png) no-repeat scroll 0 0;
}

#navigation .C2 .content {
    background:transparent url(../images/smenu_2C.png) repeat-x scroll 0 0;
}

#navigation .C2 .left {
    background:transparent url(../images/smenu_2L.png) no-repeat scroll 0 0;
}

#navigation .C2 .right {
    background:transparent url(../images/smenu_2R.png) no-repeat scroll 0 0;
}

#navigation .dropdown a:hover, #navigation .dropdown a:active, #navigation .dropdown a:focus {
    color:#fbee00;
    text-decoration: none;
}

#navigation .dropdown a:hover > span, #navigation .dropdown a:active > span, #navigation .dropdown a:focus > span{
    background-position:0 -28px;
}

/* Page holder ***********************************************************************/

/*inter bloc*/
.spacer {
    height:8px;
    width: auto;
    margin: 0px auto;
    padding:0;
}

/* Content holder ***********************************************************************/

#body-container {
    width: 100%;
    min-height: 350px;
    z-index:0;
    background-color: #303030;
}

/* Content (contenu de la page) ***********************************************************************/

#content {
    width:890px;
    padding:0;
    margin: 0 auto;
    overflow:hidden;
}


/* Footer ***********************************************************************/

#footer {
    width: 100%;
    height: 100px;
    overflow: hidden;
    margin: 0 auto 10px;
    padding:0;
    color:#fbee00;
    text-align: center;
    background:#000 url(../images/footer_ombre.gif) repeat-x scroll 0 0;
}

#footer .ombre {
    width: 860px;
    height: 35px;
    margin:0 auto;
    overflow:hidden;
    padding : 0;
    background:#000 url(../images/footer_arc.jpg) no-repeat scroll center -5px;
}

#footer img[title="Mango Jeunesse"] {
    margin:0 auto 0.5em;
    width:199px;
    height:18px;
    display:block;
}

#footer ul {
    margin:0.3em auto;
    width:600px;
    display:block;
    clear:both;
}

#footer li {
    list-style-type:none;
    float:left;
}

#footer a, #footer a:link, #footer a:visited {
    color:#fbee00;
}

/*Pager**********************************/
#pager-box {
    height:20px;
    margin:0 auto;
    width:500px;
}
table#pager {
    height:25px;
    margin:4px auto 0;
    position:absolute;
    width:500px;
}

#pager .pager_link{
    background:transparent url(../images/pager_bg.jpg) repeat-x scroll left top;
}

#pager a.bt_left, #pager a.bt_right {
    width:55px;
    height:30px;
    display:block;
}

#pager a.bt_left {
    background:transparent url(../images/pager_but_g.jpg) no-repeat scroll left top;
}

#pager a:hover.bt_left {
    background:transparent url(../images/pager_but_g.jpg) no-repeat scroll left -30px;
}

#pager a.bt_right {
    background:transparent url(../images/pager_but_d.jpg) no-repeat scroll right top;
}

#pager a:hover.bt_right {
    background:transparent url(../images/pager_but_d.jpg) no-repeat scroll right -30px;
}

#pager .pager_link span {
    color:#333333;
    text-align:center;
    padding:0 5px;
}

#pager .pager_link a {
    color:#34819b;
    padding:0 5px;
}

#pager .pager_link a:hover {
    color:#0d485c;
}


/*JQUERY CSS**********************************/

/* affiche les blocs masqu�s pour jquery ************/
#showBox .tabContent {
    display:block;
}

/*->fond ecran */
#ImageBoxOverlay
{
    background-color: #000;
    z-index:900;
}

#ImageBoxOuterContainer {
    z-index:901;
}

#ImageBoxCaption
{
    background-color: #F4F4EC;
}
#ImageBoxContainer
{
    width: 250px;
    height: 250px;
    background-color: #F4F4EC;
}
#ImageBoxCaptionText
{
    font-weight: bold;
    padding-bottom: 5px;
    font-size: 13px;
    color: #000;
}
#ImageBoxCaptionImages
{
    margin: 0;
}

#ImageBoxNextImage
{
    background:transparent url(../images/spacer.gif) no-repeat right 50%;
    z-index:991;
}

#ImageBoxPrevImage
{
    background:transparent url(../images/spacer.gif) no-repeat left 50%;
    z-index:990;
}

#ImageBoxNextImage:hover
{
    background:transparent url(../images/imagebox_next_image.jpg) no-repeat right 50%;
}

#ImageBoxPrevImage:hover
{
    background:transparent url(../images/imagebox_prev_image.jpg) no-repeat left 50%;
}

/* -> rough */

.slider1
{
    width: 5px;
    height: 500px;
    background-color: #e7e7e7;
    position: absolute;
    cursor:pointer;
}

.indicator
{
    width: 5px;
    height: 10px;
    background-color: #266A82;
    position: absolute;
    font-size: 1px;
    overflow: hidden;
}

.gallery_liste_container
{
    height:515px;
    overflow:hidden;
    padding:1px;
    position:relative;
    width:240px;
}	

.gallery_liste_content
{
    position:absolute;
}

#main_image {
    height:514px;
    width:600px;
}

.caption{
    color:#888;
    position:absolute;
    top:250px;
    left:3px;
    width:200px;
    position:relative;
    margin-top:2em;
}

.demo {
    margin:30px 0 0 0;
}	

.nav{
    padding: 0 0 15px;
    clear:both;
    float:right;
    display:block;
    width:150px;
    text-align:right;
    margin:0 234px;
    display:none;
}

.info{
    text-align:left;
    margin:30px 0;
    border-top:1px dotted #221;
    padding-top:30px;
    clear:both;
}

.info p{
    margin-top:1.6em;
}


.gallery_demo{
    width:250px;
    float:left;
    border:1px solid #e7e7e7;
}

.galleria_wrapper {

    width:600px;
    height:514px;
}

.galleria_wrapper img {
    margin : auto;
}

.gallery_demo li{
    width:55px;
    height:70px;
    border:1px solid #ffffff;
    margin: 5px;
    background-color:transparent;
}

.gallery_demo li.hover{
    border-color:#e7e7e7;
}

.gallery_demo li.active{
    border-style:solid;
    border-color:#e7e7e7;
}

.gallery_demo li div{
    left:240px
}

.gallery_demo li div .caption{
    font:italic 0.7em/1.4 georgia,serif;
}

.galleria_container{
    float:right;
    height:514px;
    margin:0 auto 10px;
    width:600px;
}

ul.galleria{
    list-style:none;
    width:240px;
}

.galleria #deb{
    background:transparent url(../images/bg_white_top.gif) repeat-x scroll left top;
    border-color:#e7e7e7;
    border-style:none none solid;
    border-width:medium medium 1px;
    clear:both;
    color:#266A82;
    font-size:11px;
    font-weight:bold;
    height:25px;
    line-height:25px;
    margin:0 0 2px;
    text-transform:uppercase;
    width:240px;
}

.galleria li{
    display:block;
    width:58px;
    height:50px;
    overflow:hidden;
    float:left;
    margin:3px;
}
.galleria li a{
    display:none;
}

.galleria li div{
    position:absolute;
    display:none;
    top:0;
    left:180px;
}

.galleria li div img{
    cursor:pointer;
}

.galleria li.active div img,.galleria li.active div{
    display:block;
}

.galleria li img.thumb{
    cursor:pointer;
    top:auto;
    left:auto;
    display:block;
    width:auto;
    height:auto;
}
.galleria li .caption{
    display:block;
    padding-top:.5em;
}
* html .galleria li div span{
    width:400px;
} /* MSIE bug */