/* General Styles */
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #D0DEE2;
    font-size: 12px;
    margin: 0;
    padding: 0;
}

img {
    border: none;
}

a {
    text-decoration: none;
    color: #666666;
}

form {
    padding: 0;
    margin: 0;
}

fieldset {
    border: 1px solid #999999;
    padding: 15px;
}

#global {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}

#header {
    background-color: #484848;
    padding: 5px;
    text-align: center;
}

#header a {
    color: #CCCCCC;
}

h1 {
    color: #FFFFFF;
    font-size: 20px;
}

#middle {
    background-color: #FFFFFF;
    width: 100%;
    border: 1px solid #CCCCCC;
    padding: 10px;
}

#footer {
    background-color: #484848;
    height: 15px;
    padding: 2px;
    font-size: 10px;
    color: #CCCCCC;
}

/* Custom Select */
.custom-select {
    width: 100%;
    max-width: 150px;
    height: 25px;
    padding: 2px;
    border: 1px solid #999999;
}

/* Inputs */
input[type=text], input[type=password] {
    padding: 3px;
    border: 1px solid #999999;
    width: 100%;
    max-width: 300px;
}

input[type=button], input[type=submit] {
    cursor: pointer;
    font-size: 14px;
    background: #666666;
    padding: 5px;
    border: 1px solid #666666;
    color: #fff;
    width: 100%;
}

/* Layout */
#photo_list {
    margin-top: 20px;
}

.bloc_img_front {
    background-color: #E3EDF0;
    float: left;
    margin: 5px;
    padding: 10px;
    border: 1px solid #D7E7EA;
}

.bloc_img_admin {
    width: 100%;
    max-width: 110px;
    background-color: #E3EDF0;
    float: left;
    margin: 5px;
    text-align: center;
}

.minitxt {
    color: #666666;
    font-size: 11px;
}

.bloc_img .img_center {
    width: 100%;
    text-align: center;
    clear: both;
}

.bloc_img .img_bottom {
    width: 100%;
    text-align: center;
    clear: both;
    height: 20px;
}

.photo_list_bottom {
    clear: both;
    width: 100px;
    margin-right: 20px;
}

.bloc_error {
    background-color: #F8CBCC;
    border: 1px solid #EFABB1;
    width: 100%;
    color: #C5212E;
}

.bloc_valid {
    background-color: #D8F1D9;
    border: 1px solid #ACDBB5;
    width: 100%;
    color: #4E9441;
}

.bloc_error ul, .bloc_valid ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    padding: 5px;
}

.alert {
    color: #990000;
}

/* Menu */
#menu_left {
    float: left;
    width: 100%;
    max-width: 160px;
    margin-right: 20px;
}

#content_right {
    float: left;
    width: 100%;
    max-width: 540px;
    min-height: 350px;
}

ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul.menu li {
    border-bottom: 1px dotted #333333;
    margin-top: 10px;
    padding-bottom: 3px;
}

ul.menu li a {
    color: #333333;
}

ul.menu li.selected,
ul.menu li.selected a {
    color: #999999;
}

.bloc_title {
    margin-top: 20px;
    width: 100%;
    height: 20px;
    font-size: 14px;
    color: #FFFFFF;
    background-color: #666666;
    padding: 3px;
}

#login_box {
    width: 100%;
    max-width: 300px;
    background-color: #FFFFFF;
    margin-right: auto;
    margin-left: auto;
}

.login_title {
    width: 100%;
    max-width: 294px;
    height: 20px;
    background-color: #666666;
    padding: 3px;
    font-size: 14px;
    color: #FFFFFF;
}

.login_content {
    width: 100%;
    max-width: 290px;
    padding: 5px;
    text-align: center;
}

/* Mobile Styles */
@media (max-width: 768px) {
    #global {
        width: 90%;
        padding: 0 10px;
    }

    #header, #footer {
        width: 100%;
        padding: 10px;
    }

    #menu_left {
        width: 100%;
        margin-right: 0;
        padding-bottom: 10px;
    }

    #content_right {
        width: 100%;
        padding-left: 10px;
    }

    .custom-select {
        width: 100%;
    }

    input[type=text], input[type=password] {
        width: 100%;
    }

    .bloc_img_admin {
        width: 100%;
        max-width: 160px;
    }
}