body, td {
    font-family: Roboto, Helvetica, Arial, sans-serif; /*"Myriad Set Pro","Lucida Grande","Helvetica Neue","Helvetica","Arial","Verdana","sans-serif" */
    font-size: 14px;
}
a, a:hover, a:active, a:visited {
    text-decoration: none;
}
button {
    cursor: pointer;
}
.topbar {
    position: absolute;
    background-color: #000;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 20px;
    padding: 10px;
    color: #FFF;
}
.logo2 {
    font-family: Myriad Pro, Segoe UI, Helvetica, Arial;
    font-size: 20px;
    padding: 15px 0px;
    position: fixed;
    height: 20px;
    width: 160px;
    text-align: center;
    background-color: #222;
    z-index: 500;
    float: top;
    color: #fff;
    left: 0px;
}
.topbar a, .topbar a:hover, .topbar a:active, .topbar a:visited,
.navbar a, .navbar a:hover, .navbar a:active, .navbar a:visited {
    color: #FFF;
}
.navbar {
    position: absolute;
    left: 0px;
    width: 160px;
    top: 0px;
    bottom: 0px;
    background-color: #333;
    color: #fff;
    text-align: center;
    font-size: 10px;
    z-index: 400;
    overflow-y: auto;
    overflow-x: hidden;
    /*margin-top: 50px;*/
}
.navbar ul {
    list-style: none;
    padding: 0px;
    /*overflow: auto;*/
    background-color: #333;
    width: 160px;
}
.navbar ul li {
    padding: 15px 0px;
}
.navbar ul li a, .navbar ul li a:hover, .navbar ul li a:active, .navbar ul li a:visited {
    text-decoration: none;
}
.navbar li:hover {
    text-shadow: 0px 0px 20px #000;
    background-color: rgba(255,255,255,.5);
    box-shadow: 0px 0px 20px #000;
}
.navbar ul li .fa {
    display: block;
}
.workarea {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: calc(100% - 160px);
    overflow-y: hidden;
}
.listbar {
    position: absolute;
    left: 0px;
    width: 50%;
    top: 0px;
    bottom: 0px;
    background: #EEEEEE;
    border-right: 1px solid #DDDDDD;
    z-index: 300;
    overflow: auto;
}
.avatar {
    display: block;
    margin:60px 0px 10px 0px;
    background-color: #333;
    width: 160px;
}
.avatar img {
    border-radius: 100%;
    box-shadow: 0px 0px 10px #000;
}
.headerbar {
    height: 50px;
    background-color: rgba(0,0,0,.2);
    padding: 0px;
    line-height: 20px;
    position: fixed;
}
.headerbar h1 {
    display: inline-block;
    font-weight: 100;
    font-size: 24px;
    padding: 0px 10px;
}
.listbar .headerbar {
    width: calc(50% - 160px * .5);
}
.detailbar .headerbar {
    width: calc(50% - 160px * .5);
}
.headerbar .searchbar {
    display: inline-block;
    float: right;
}
.headerbar .searchbar input[type=search] {
    border: 0px;
    font-size: 20px;
    width: 0px;
    transition: width 1s;
    background-color: rgba(255,255,255,0);
}
.headerbar .searchbar input[type=search]:focus, .searchbar:hover input[type=search] {
    width: 100px;
    border-bottom: 1px solid #333;
    padding: 15px 10px;
    line-height: 20px;
}
.headerbar button {
    height: 50px;
    border: none;
    background-color: transparent;
    padding: 0px 15px;
}
.headerbar button:hover {
    box-shadow: 0px 0px 20px #000;
    background-color: rgba(255,255,255,.5);
}
.list {
    list-style: none;
    margin: 0px;
    padding: 0px;
    margin-top: 20px;
}
.list li {
    border-bottom: 1px solid #666;
    min-height:70px;
}
.list h2, .list .description {

}
.list button {
    border: none;
    background-color: transparent;
}
.list button:hover {
    background-color: #fff;
}
.list .thumb {
    height: 100%;
    float: left;
}
.leftbuttons, .rightbuttons {
    display: inline-block;
}
.rightbuttons {
    display: block;
    float: right;
}
.detailbar {
    position: absolute;
    right: 0px;
    width: 50%;
    top: 0px;
    bottom: 0px;
    overflow-y: scroll;
}
.txt-button {
    font-size: 20px;
}
.btn-ok {
    color: #009933;
}
.btn-cancel {
    color: #666666;
}
.btn-active {
    color: #00CC33;
}
.btn-not-active {
    color: #990000;
}


.pictureList {
    display: inline-block;

}
.pictureList button{
    width: 30px;
    height: 30px;
    background-color: transparent;
    border: medium none;
    margin-left: 10px;
    top: -6px;
    position: relative;
    left: 105px;
}
.pictureList div{
    width:140px;
    height:100px;
    background-size: cover;
}
.delFaButton{
    cursor: pointer;
    background-color: transparent;
    border: medium none;
    color:#000000;
}
.addFaButton{
    cursor: pointer;
    background-color: transparent;
    border: medium none;
    color: green;
}