*{
 margin : 0;
 padding: 0;
 box-sizing: border-box;
}

.left {
    position: absolute;
    width: 50%;
    height: 100%;
    border-right: 1px solid black;
    overflow: hidden;
    overflow-y: auto;
}

.right {
    position: absolute;
    width: 50%;
    height: 100%;
    margin-left: 50%;
    overflow: hidden;
    overflow-y: scroll; 
}

.row {
    border-bottom: 1px solid black;
    padding: 10px;
    font-size: 13px;
}

li {
    margin-left: 20px;
}

.table-div {
    height: 350px;
    overflow-y: scroll;
}

table {
    width: 100%;
    margin-left: -3px;
    font-size: 13px;
    border: 0px;
    line-height: 17px;
}

thead {
    border-bottom: 1px dotted black;
    cursor: pointer;
}

th {
    font-weight: normal;
    text-align: left;
    border-bottom: 1px dotted black;
}

td {
  padding-right: 1em;
  vertical-align: top;
  border-bottom: 1px dotted black;
}

.projects {
    height: 175px;
}

.books, .ceramics, .tea, .clay, .glazes {
    height: 350px;
}

a:visited {
    color: blue;
}

/*<!------------------------------ MediaQuery ------------------------------>*/

@media screen and (max-width: 704px) {
body {
        font-size: 9pt;
    }

div {
    display: block;
}

.left {
    width: 100%;
    height: 100%;
    position: static;
}

.right {
    width: 100%;
    margin-left: 0;
    position: static;
}

.books, .ceramics, .tea, .clay, .glazes {
    height: 200px;
}

    
    .projects-role, .projects-location {
        display: none;
    }


    .books-publisher {
        display: none;
    }

    .ceramics-nationality {
        display: none;
    }

    .tea-rating {
        display: none;
    }

    .glazes-opacity, .glazes-foodsafe {
        display: none;
    }




}