/* thumbnail wrap size */
.thumbnailCategory .illustration {
    min-width: 165px !important; /* Usable range 162px-360px , optimal : Thumbnail width + 40px */
}

.commentElement .illustration {
    min-width: 220px !important; /* Usable range 219px-360px , optimal : Thumbnail width + 95px */
}

/**
 * Menubar
 */
#menubar DL {
    background: transparent none no-repeat scroll left top;
    margin: 10px 10px 10px 40px;
    padding: 3px;
    width: 251px;
    min-width: 231px;
    border: 0;
    min-height: 32px;
    overflow-x: hidden;
   
}

#menubar DT {
    background-color: transparent;
    border: 0;
    display: inline;
    margin-left: 8px;
    text-align: left;
}

#menubar DD {
    background: transparent none no-repeat scroll left bottom;
    margin-left: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 231px;
    min-width: 231px;
    border: 0;
    overflow-x: hidden;
    -moz-box-shadow: 0px 0px 4px #191919;
    -webkit-box-shadow: 0px 0px 4px #191919;
    box-shadow: 0px 0px 4px #191919;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
}

    #menubar DD P {
        background: transparent none repeat-y scroll left bottom;
        padding: 2px 16px 0;
        margin: 0;
    }

#menubar UL, #menubar #mbCategories p, #menubar .illustration {
    background: transparent none repeat-y scroll left bottom;
    margin: 0;
}

#menubar DT A {
    font-size: 100%;
}

#menubar UL {
    color: #333;
    font-size: 16px;
    line-height: 15px;
}

    #menubar UL SPAN.menuInfoCat {
        color: #666;
    }

#menubar LI {
    padding-left: 12px;
}

    #menubar LI UL {
        background: transparent url(images/transparent.gif);
    }

#menubar A, .menuInfoCat {
    font-size: 13px;
}

#menubar form {
    background: transparent none repeat-y scroll left bottom;
    margin: 0;
}

#menubar p {
    padding: 16px 16px 0;
}

.menubarFilter {
    position: relative;
    right: 8px;
    top: 16px;
}

#menubar #mbIdentification {
    background: transparent none no-repeat scroll left top !important;
}

    #menubar #mbIdentification DD {
        background: transparent none no-repeat scroll left bottom;
    }

    #menubar #mbIdentification UL, #menubar #mbIdentification p, #menubar #mbIdentification .illustration {
        background: transparent none repeat-y scroll left bottom;
    }

    #menubar #mbIdentification form {
        background: transparent none repeat-y scroll left bottom;
    }

        #menubar #mbIdentification form p {
            background: transparent none repeat-y scroll left bottom;
        }

    #menubar #mbIdentification p {
        padding: 2px 16px 0;
        margin: 0;
    }

    #menubar #mbIdentification fieldset div input[type="text"] {
        margin: 0 0 3px;
        width: 174px;
        display: inline;
    }

    #menubar #mbIdentification .button {
        height: 24px;
        width: 24px;
        right: 0px;
        top: -40px;
    }

    #menubar #mbIdentification fieldset {
        border: 0;
        margin: 0 24px 0 23px;
    }

    #menubar #mbIdentification legend {
        display: none;
    }

#mbIdentification p, .totalImages {
    color: #333;
}

#menubar #menuTagCloud {
    background: transparent none repeat-y scroll left bottom;
    margin: 0;
    padding: 0 12px;
}

#qsearchInput:focus, input:focus, select:focus, textarea:focus, input.focus, form .focus {
    background-color: transparent;
    color: #000;
    -webkit-box-shadow: inset 0 0.5px 1px rgba(0,0,0,0.6), 0 1px 0 #787878;
    -moz-box-shadow: inset 0 0.5px 1px rgba(0,0,0,0.6), 0 1px 0 #787878;
    box-shadow: inset 0 0.5px 1px rgba(0,0,0,0.6), 0 1px 0 #787878;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

#qsearchInput {
    color: #000;
}


/**
 * Content
 */
.content {
    background: none;
    min-height: 300px;
    max-width: 870px;
    margin: 3px 7px 0 330px !important;
    padding-top: 10px;
    background-size: 100% 100%;
    
}

#the_page {
    background: transparent none no-repeat scroll left top;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    z-index: 0;
    width: 100%;
    min-width: 100%;
}

.content h2 {
    margin: 0;
    padding: 0px 10px 15px 15px;
    border: 0;
}

.content .navigationBar {
    color: #333;
}
/* contentWithMenu */
.contentWithMenu {
    margin-left: 290px;
}

    .contentWithMenu #comments {
        padding: 0 0 5px 0;
    }

    .contentWithMenu #imageToolBar {
        padding-left: 0;
    }

    .contentWithMenu #imageHeaderBar .browsePath {
        margin-left: 0;
    }

/* Category thumbnails on main page */
.thumbnailCategories li {
    background: transparent none no-repeat scroll right bottom;
    width: 45%;
    margin: 10px;
    margin-left:20px;
    padding: 5px;
    -moz-box-shadow: 0px 0px 4px #191919;
    -webkit-box-shadow: 0px 0px 4px #191919;
    box-shadow: 0px 0px 4px #191919;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
}

.thumbnailCategory {
    background: transparent none no-repeat scroll left bottom;
    padding: 0 0 2px;
    margin: 0;
}

    .thumbnailCategory .illustration {
        background: transparent none no-repeat scroll left top;
        padding: 0 5px 0 10px;
        margin: 0 !important;
        text-align: center;
    }

        .thumbnailCategory .illustration a {
            display: block;
            margin: 0 auto;
            padding: 20px 4px 0;
            border: 0;
        }

    .thumbnailCategory .description {
        background: transparent none no-repeat scroll right top;
        margin: 0;
        padding: 15px 10px 3px 0;
        overflow: hidden !important;
        height: 158px;
    }

        .thumbnailCategory .description .text {
            display: block;
            margin: 10px 2px 0 0;
            overflow: auto;
            overflow-x: hidden;
            padding: 0 0 5px;
        }

        .thumbnailCategory .description p.dates {
            margin: 0 15px 0 15px;
            text-align: right;
        }

        .thumbnailCategory .description H3 {
            display: block;
        }

.thumbnailCategories li:hover {
    background: rgba(0, 0, 0, .2);
    transition:0.2s;
}

/* header */
#theHeader {
    min-height: 90px;
    height: 90px;
    margin-top:30px;
    margin-left:170px;
    padding-top:10px;
    margin-bottom:20px;
    width:900px;
    -moz-box-shadow: 0px 0px 4px #191919;
    -webkit-box-shadow: 0px 0px 4px #191919;
    box-shadow: 0px 0px 4px #191919;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
}

.header_msgs {
    background: transparent none repeat scroll left top;
    border: 0;
    color: #333;
    font-size: 24px;
    left: 0;
    margin: 0;
    padding: 10px 0 6px 0;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 99;
}

.header_notes {
    background: transparent none repeat scroll left top;
    border: 0 none;
    color: #333;
    font-size: 16px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 99;
}

.infos {
    color: #f70;
    border: 0;
    background: transparent url(icon/infos.png) no-repeat center right;
    margin-left: 40px;
    text-align: left;
}

.errors {
    color: #f33;
    border: 0;
    background: transparent url(icon/errors.png) no-repeat center right;
    margin-left: 40px;
    text-align: left;
    font-weight: bold;
}

    .infos li, .errors li {
        list-style-type: none;
    }

/* User comments */
#comments {
    margin-left: 10px;
    margin-right: 5px;
    margin-top:10px;
    margin-bottom:10px;
    -moz-box-shadow: 0px 0px 4px #191919;
    -webkit-box-shadow: 0px 0px 4px #191919;
    box-shadow: 0px 0px 4px #191919;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
}

.content .commentElement {
    border: 1px solid #666;
}

    .content .commentElement.odd {
        background-color: transparent;
    }

    .content .commentElement.even {
        background-color: #111;
    }

    .content .commentElement .illustration {
        margin: 2px;
        text-align: center;
    }

    .content .commentElement .description {
        padding: 15px 10px 3px 0;
        overflow-x: hidden !important;
    }

#comments .commentsList hr {
    display: none;
}

#comments .filter input[type="submit"] {
    margin-top: 1.8em;
}

/* Thumbnails */
.thumbnails .wrap2 {
    border: 1px solid #333; /* thumbnails border color and style */
    border-radius: 4px 4px; /* round corners with CSS3 compliant browsers */
}

    .thumbnails .wrap2:hover {
        color: #333;
        background-color: #111;
        border: 1px solid #ff3363; /* thumbnails border color when mouse cursor is over it */
    }

.calItem {
    border: 1px solid #333;
    margin: 0 5px;
    padding: 2px 5px 0 8px;
}

.calItemEmpty, td.calDayCellEmpty, td.calDayCellFull {
    border: 1px solid #333;
}


/**
 * Picture
 */
#imageToolBar {
    padding: 0 7%;

}

#imageHeaderBar .imageNumber {
    margin-right: 7%;
}

#imageHeaderBar .browsePath {
    margin-left: 7%;
}

#imageHeaderBar, #imageToolBar A:hover {
    background-color: transparent;
}

    #imageHeaderBar H2 {
        border: 0;
    }

#theImage A, .illustration A, A.navThumb, A.navThumb {
    border-bottom-width: 0;

}


A.navThumb img, A.navThumb img {
    -moz-box-shadow: 0px 0px 2px #191919;
    -webkit-box-shadow: 0px 0px 2px #191919;
    box-shadow: 0px 0px 2px #191919;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin-right:3px;    
}


.rateButtonStarFull, .rateButtonStarEmpty {
    background-image: none;
}

#thePicturePage .commentElement {
    padding: 15px 2px 6px 12px;
    border: 1px solid #333;
}

#thePicturePage .commentsList {
    padding-left: 12px;
    padding-right: 12px;
    overflow: visible;
    width: auto;
}

#thePicturePage .odd {
    background-color: #222;
}

.pictureContent {
    margin: 0 7px 7px 290px;
}

#addComment fieldset {
    color: #f70;
    border-color: #f70;
}

    #addComment fieldset label {
        color: #666;
    }


/**
 * Default Layout
 */
*, *:focus, *:active, input:active, a:active, input:focus, a:focus {
    outline: none;
}

BODY {
    background: transparent none no-repeat fixed left bottom;
    margin: 0;
    min-height: 100%;
    height: 100%;
    padding: 0;
}

BODY, H1, H3, DT, INPUT.rateButtonSelected, H2, #menubar DT {
    color: #666;
}

/* forms */
FIELDSET, INPUT, SELECT, TEXTAREA {
    border: 1px solid #666;
}

    input[type="text"], input[type="password"], input[type="button"], input[type="submit"], input[type="reset"], input[type="file"] {
        background-color: transparent;
        color: #000;
    }
    

INPUT, select, textarea {
    background-color: transparent;
    color: #000;
    -webkit-box-shadow: inset 0 0.5px 1px rgba(0,0,0,0.6), 0 1px 0 #787878;
    -moz-box-shadow: inset 0 0.5px 1px rgba(0,0,0,0.6), 0 1px 0 #787878;
    box-shadow: inset 0 0.5px 1px rgba(0,0,0,0.6), 0 1px 0 #787878;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin-bottom:3px;
}

/* stupid Line but needed  due to inpact on other themes and deadline of Piwigo 2.0 */
    input[type="file"] {
        background-color: transparent;
        -webkit-box-shadow: 0;
        -moz-box-shadow: 0;
        box-shadow: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        border:none;
    }


    input[type="radio"], input[type="checkbox"], input[type="button"].rateButtonStarEmpty, input[type="button"].rateButtonStarFull {
        background-color: transparent;
    }

    input[type="button"], input[type="submit"], input[type="reset"] {
        color: #000;
        background-color: transparent;
        border-color: #000;
        -moz-box-shadow: 0px 0px 2px #191919;
        -webkit-box-shadow: 0px 0px 2px #191919;
        box-shadow: 0px 0px 2px #191919;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }

        input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
            color: #000;
            background-color: transparent;
            border-color: #000;
            -moz-box-shadow: inset 0 0.5px 1px rgba(0,0,0,0.6), 0 1px 0 #787878;
            -webkit-box-shadow: inset 0 0.5px 1px rgba(0,0,0,0.6), 0 1px 0 #787878;
            box-shadow: inset 0 0.5px 1px rgba(0,0,0,0.6), 0 1px 0 #787878;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            cursor:pointer;
        }

/* links */
A, .rateButton {
    color: #f70;
    border-width: 0;
}

    A:hover, A:active {
        color: #f33;
        border-bottom: 1px solid #ff3363;
        cursor: pointer;
    }

    a.external {
        color: #ff3363;
        border: 0;
        text-decoration: none;
    }

        a.external:hover {
            color: #ff7700;
            border: 0;
        }

    a.Piwigo {
        font-family: verdana, arial, helvetica, sans-serif !important;
        font-size: 11px;
        font-weight: normal;
        letter-spacing: 0;
        color: #F33;
        text-decoration: none;
        border: 0;
    }

        a.Piwigo:hover {
            border-bottom: 1px solid #ff3363;
        }

.titrePage img.button[alt="x"] {
    margin: 0 3px 3px;
}

tr.tagLine, fieldset.tagLetter, legend.tagLetterLegend {
    border-color: #666;
}

#debug {
    margin: 15px 15px 5px 248px;
    font-size: 12px;
    clear: both;
}

/* sprites */
.pwg-icon {
    background-image: url(../default/s26/outline_ff3363.png);
}

A:hover .pwg-icon {
    background-image: url(../default/s26/outline_ff7700.png);
}

.message {
    color: white;
    background-color: transparent;
}

.switchBox {
    background-color: #222222;
    border: 1px solid #FF3363;
    border-radius: 0 15px 0 15px;
}

.switchBoxTitle {
    border-color: #666;
}