* {
    font-family: tahoma;
    font-size: 14px;
}

A {
    color:#0000FF;
}

BODY {
    background-color: #FEF4E0;
    margin: 0px;
}
#error {
    width:300px;
    background-color: #A00;
    background: -webkit-gradient(linear, left top, left bottom, from(#F44), to(#A00));
    -webkit-box-shadow: #999 0px 0px 10px;
    color: #FFF;
    padding: 20px;
    position: absolute;
    left: 50%;
    margin-left: -170px;
    top: 100px;
    border-radius: 10px;
    border:2px solid #FFF;
    text-align: center;
    z-index:5;
}

#header {
    background-color: #655241;
    background: -webkit-gradient(linear, left top, left bottom, from(#655241), to(#352211));
    border-bottom: 2px solid #FFF;
    -webkit-box-shadow: #999 0px 0px 10px;

    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 100px;

    position:absolute;
    height:150px;
    left:0px;
    top:0px;
    right:0px;

    z-index: 2;
}

#search, #tags, #sites {
    list-style: none;
    clear:both;
    margin:0px;
    padding:0px;
    overflow:auto;
}
#search {
    height:60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding:8px;
}
#tags {
    height:60px;
    padding-left:8px;
    padding-top:4px;
}
#content {
    background-color: #FFF;

    position:absolute;
    left:30px;
    top:150px;
    bottom:10px;
    right:30px;

    z-index: 1;

    background: -webkit-gradient(linear, left top, left bottom, from(#F6F4F2), to(#FFFFFF));
    border-left: 1px solid #EEE;
    border-right: 1px solid #EEE;
    border-bottom: 1px solid #EEE;
    -webkit-box-shadow: #999 0px 0px 10px;
    border-bottom-left-radius:15px;
}

#sites {
    position:absolute;
    top:26px;
    bottom: 7px;
    left:0px;
    width:200px;
    overflow:auto;
    border-right:1px solid #999;
}

#details {
    position:absolute;
    top:30px;
    left:205px;
    right:5px;
    bottom:5px;
    overflow:auto;

    list-style: none;
    margin:0px;
    padding:0px;
}
#details>LI {
    float:left;
    padding: 10px 15px;

    width:275px;
    height:100px;
    margin: 5px;

    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E0E0E0));
    -webkit-box-shadow: #666 0px 0px 5px;
    border-radius:5px;

    opacity:0.4;
    position:relative;
}
#details>LI.end{
    clear:both;
    visibility:hidden;
    height:1px;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
}
#details HR {
    position:absolute;
    bottom:24px;
    width:260px;
}

#sites LI {
    height:20px;
    cursor:pointer;
    padding-left:10px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
#sites LI.selected,
#sites LI:hover {
    font-weight: bold;
    padding-left:15px;
}
#sites LI.selected{
    background-color: #E0E0FF;
}
#search LI, #tags LI {
    float:left;
    cursor:pointer;
}
.tag {
    padding:3px 8px;
    margin-right:2px;
    margin-bottom:2px;
    border-radius:6px;
    color:#FFF;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.2);
    z-index:4;
}
#search .tag:hover{
    background-image: url(./img/close.png);
    background-position:top right;
    background-repeat:no-repeat;

}
#filter {
    margin-right:10px;
}
#filter INPUT {
    border-radius:5px;
    border:none;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.9);
}
#details INPUT {
    margin-top:0px;
    margin-bottom:2px;
    border:none;
    border-bottom:1px dashed #CCC;
    padding:0px;
    width:260px;
}
#details INPUT:disabled {
    background-color: rgba(255, 255, 255, 0.6);
}

#details DIV {
    margin-left:1px;
    margin-top:0px;
    margin-bottom:3px;
    width:260px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    height:17px;
}

#details HR {
    margin:0px;
}
.label {
    font-weight: bold;
    font-size:18px;
}
#details DIV.label {
    height: 22px;
}
.edit
, .trash
, .valid
, .cancel {
    background-repeat: no-repeat;
    width:16px;
    height:16px;
    position: absolute;
    right:5px;
    cursor:pointer;
}
.edit {
    visibility: hidden;
    background-image: url(./img/edit.png);
    top:5px;
}
.valid {
    background-image: url(./img/valid.png);
    top:50px;
}
.trash {
    background-image: url(./img/trash.png);
    bottom:5px;
}
.cancel {
    background-image: url(./img/cancel.png);
    top:70px;
}

LI:hover .edit
, .selected .edit {
    visibility:visible;
}
.editing .edit {
    visibility:hidden!important;
}
.running .valid
, .running .cancel
, .running .trash {
    visibility:hidden!important;
}
#details>LI.running {
    background-image: url(./img/loading.gif);
    background-repeat: no-repeat;
    background-position: right top;
}

.editing DIV.label
, .editing DIV.url
, .editing DIV.login
, .editing DIV.password
, .editing DIV.tags
{
    display:none;
}

#auth {
    position: absolute;
    z-index: 5;
    top:50px;
    left:50%;
    width: 200px;
    margin-left: -110px;
    background: -webkit-gradient(linear, left top, left bottom, from(#F44), to(#A00));
    border-radius:10px;
    -webkit-box-shadow: #999 0px 0px 10px;
    padding:10px;
    display:none;
}

#auth DIV {
    color:#FFFFFF;
    font-size:16px;
    margin-bottom:5px;
    font-weight: bold;
}

#auth INPUT {
    border:1px solid #FFF;
    border-radius:3px;
    width:100%;
}

#logout {
    width:64px;
    height:64px;
    cursor:pointer;
    background-repeat: no-repeat;
    background-image: url('./img/logout.png');
    position:absolute;
    z-index:4;
    right:15px;
    top:15px;
    display:none;
}
#loading {
    background-repeat: no-repeat;
    background-image: url('./img/ajax_loading.gif');
    position:absolute;
    z-index:4;
    left:50%;
    margin-left:-110px;
    bottom:0px;
    width:220px;
    height:19px;
}