body{
    font-size: 1em;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    margin: .5em .5em
}

div.row span a{
    text-decoration: none;
}

div.row span a:link {
    color: inherit;
}

div.row span a:visited {
    color: inherit;
}

div.row span a:hover {
    color: inherit;
}

div.row span a:active {
    color: inherit;
}

div.row span.date{
    cursor: pointer;
    font-size: 0.6em;
    padding-top: 5px;
    padding-right: 15px;
    color: grey;
}

div.row span.time{
    padding-top: 5px;
    padding-right: 15px;
    color: grey;
}

div.row span.delete{
    cursor: pointer;
    font-size: 1em;
    padding-top: 5px;
    color: grey;
}


div.row div.website{
  display: inline;
}

div.row div.website span.title{
    padding-right: 5px;
}

/*TODO might be interesting to render on big screen*/
div.row div.website span.domain{
    font-size: 0.6em;
    color: grey;
    display: inline-block;
    width: 90px;
    padding-left: 15px;
}

div.items div.row div.icon{
    margin-right: 5px;
}


div.icon{
    position:relative;
    width:16px;
    height:16px;
    display: inline-block;
}

div.icon{
  vertical-align: middle;
}

div.icon div{
    position: absolute;
    background-color: white;
    margin: 0 0 0 0 !important;
}

div.icon.remark{
    background-color: 0bab0b;
}

div.icon.date{
    background-color: #0066cc;
}

div.icon{
    background-color: f38401;
}

div.icon.remark div:nth-child(1){
    width: 3px;
    height:8px;
    top: 4px;
    left: 4px;
}

div.icon.remark div:nth-child(2){
    width: 2px;
    height:1px;
    top: 5px;
    left: 7px;
}

div.icon.remark div:nth-child(3){
    width: 3px;
    height:3px;
    top: 4px;
    left: 9px;
}

div.icon.remark div:nth-child(4){
    width: 0px;
    height:16px;
    top: 0px;
    right: 0px;
    background-color: white
}

div.icon.click div:nth-child(1){
    width: 8px;
    height:8px;
    top: 4px;
    left: 4px;
}

div.icon.click div:nth-child(2){
    width: 2px;
    height:4px;
    top: 6px;
    left: 7px;
    background-color: inherit
}

div.icon.click div:nth-child(3){
    width: 3px;
    height:2px;
    top: 7px;
    left: 9px;
    background-color: inherit
}

div.icon.click div:nth-child(4){
    width: 0px;
    height:16px;
    top: 0px;
    right: 0px;
    background-color: white
}


div.icon.date div:nth-child(1){
    width: 2px;
    height:8px;
    top: 4px;
    left: 7px;
}

div.icon.date div:nth-child(2){
    width: 8px;
    height:2px;
    top: 4px;
    left: 4px;
}

div.icon.level0{
    opacity:0.1;
    background-color: white;
}

div.icon.level0 div{
    background-color: black;
}

div.icon.level1 > div:nth-child(4){
    width: 14px;
}

div.icon.level2 div:nth-child(4){
    width: 12px;
}

div.icon.level3 div:nth-child(4){
    width: 10px;
}

div.icon.level4 div:nth-child(4){
    width: 8px;
}

div.icon.level5 div:nth-child(4){
    width: 6px;
}

div.icon.level6 div:nth-child(4){
    width: 4px;
}

div.icon.level7 div:nth-child(4){
    width: 2px;
}

div.icon.level8 div:nth-child(4){
    width: 0px;
}


input[name=sortType]{
    display: none;
}

fieldset.sortType{
    border: 0;
    width: 80px;
    margin-right: auto;
    margin-left: auto;
}


input.filter{
    margin-top: 5px;
    width:100%;
    display: block;
    text-align: center;
}

input.url {
    margin-top: 5px;
    width: 100%;
    display: block;
    text-align: center;
}

div.add{
  cursor: pointer;
  width: 100%;
  text-align: center;
  background-color: 4d4d4d;
  padding-top: 5px;
  padding-bottom: 5px;
  color: white;
}