.iluser {
    background-image: url("images/world-16.png");
    background-repeat: no-repeat;
    background-position: 11px 7px;
    padding-left: 40px;
    padding-top:7px;
    margin-top:5px;
}

.ilbutton {
    border-style: none;
    border-radius: 6px;
    background-color: #dddddd;
    width: 51px;
    height: 24px;
    text-align: right;
    vertical-align: middle;
    padding: 5px 6px;
    display: inline-block;
}

.folderdiv, .folderdivwhite {
    padding-top: 50px;
    margin-right: 10px;
    position: relative;
    text-align: left;
    display:inline-block;
    min-width: 57px;
}

.folderdiv:after, .folderdivwhite:after {
    content: " ";
    width: 50px;
    height: 32px;
    border-radius: 0 5px 5px 5px;
    box-shadow: 3px 3px 0 1px #CCCCCC;
    display: block;
    background-color: #e0e0e0;
    position: absolute;
    top: 15px;
    left: 0px;
}

.folderdivwhite:after {
    background-color: #708090;
}

.folderdiv:before, .folderdivwhite:before {
    content: " ";
    width: 25px;
    height: 5px;
    border-radius: 5px 15px 0 0;
    display: block;
    background-color: #e0e0e0;
    position: absolute;
    top: 10px;
    left: 0px;
}

.badgep {
    position: relative;
    display: block;
    top: -30px;
    left: 15px;
    z-index: 30;
}

.folderdiv:hover:after, .folderdivwhite:hover:after, .folderdiv:hover:before, .folderdivwhite:hover:before{
    background-color: white;
}

#slider_brightness, #slider_contrast, #slider_shadow, #slider_hue_rotate, #slider_saturate {
    width:200px;margin: 20px 0 0 0;display: inline-block;
}

.slider_text {
    display: inline-block;width: 70px;text-align: right;margin-right: 10px;
}

.pi100 {width:100%;}

@media ( min-width : 799px) {
    .pictureframe {padding-bottom: 5px;max-width:500px;background-color: #dddddd;border-radius:10px;display:inline-block;vertical-align: top; margin: 0 10px 10px 0;}
    #list-table { margin: 10px 10px 0px 10px;position: relative}

}
@media ( max-width : 800px) {
    .pictureframe { border-bottom: 1px solid black; }
    #list-table { margin: 20px 0px 0px 0px;position: relative}
}

.pdialog {width: 90%;}
@media only screen and (max-width: 700px){
    .pdialog {width: 100%;}
    .modal-dialog {margin:0px;}
}

.picture-edit {width:auto;display: inline-block; border-radius: 7px;padding: 5px;cursor:default;margin: 0 10px 0 10px;display: none; background-color: #eeeeee}

.pbtn {background-color: white;box-shadow: 0 0 14px 3px black;border-radius: 20px;outline: none;border: none;min-width:35px;height:24px;font-weight: bold;display:inline-block;vertical-align: middle;text-align: center;}
.pdiv {position: absolute;top: 10px;left: 10px;display:none}
.pbtn:active .sbtn:active{ outline: none;border: none;}
.pbtn:hover {background-color: lightgrey;}
.ibtn:hover + .pdiv, .pdiv:hover {display:inline-block;}
.face                       {position: absolute; border: 2px solid #ec971f;box-shadow: 1px 1px 1px 0px black; opacity:0;z-index:300;}
.recognition                {position: absolute; border: 2px solid #ff2020;box-shadow: 1px 1px 1px 0px black;z-index:200;}
.newperson, .personmodify   {position: absolute; border: 2px solid #ff2020;box-shadow: 1px 1px 1px 0px black;border-radius:10px;}
.face:hover , .facename:hover {display:inline-block; opacity:1;}
.facename {position:absolute;background-color: white;opacity: 0.7;font-size: 10px;padding:2px;border-radius:3px;color:black;opacity:0;}
.personlist {margin:3px;padding:3px}
.personlist:hover {background-color:lightgray;}
#personlist{padding:5px;}
tr:hover {background-color:floralwhite;}
td {padding:4px}
.personsearch {position:absolute; background-color:lightgray;width:280px;padding:5px;border-radius: 5px;box-shadow: 1px 1px 12px 3px black;z-index:500;}