html {
    height:100%;
    border:none;
}

body {
    position:relative;
    top:-18px;
    font-family:Arial,Helvetica,sans-serif;
    height:100%;
    margin:8px;
    padding:0;
    border:none;
    background-color:#EFEFEF;
    overflow:hidden;
}
aside{ 
    margin:1em;
    font-size:small;
    float:right ; 
    color:grey;
}
header {
    height:10%;
    margin:1em;
    padding:0
    padding-top:1em;
}
#numTopics{
    margin-left:1em;
    margin-right:0.5em;
}
#content {
    height:90%;
}
#topics, #documents {
    padding:0;
    margin:0;
    overflow-y:scroll;
    height:91%;
    border-top:groove;
    border-left:groove;
    border-bottom:groove;
    border-right:1px solid grey;
}

.topics {
    height:100%;
    width:50%;
    float:left;
    display:table;
}
.documents { 
    padding-left:1px;
    height:100%;   
    width:50%;
    display:table;
  }
h2 { text-align:center; }
hr { width:90%; }
#numTopics{
    vertical-align:top;
    font-size:large;
}
button{
    vertical-align:middle;
}

.word:before { content:' '; }
.word[data-weight="16"]{font-size:4em; font-weight:800;}
.word[data-weight="15"]{font-size:3.87em; font-weight:770;}
.word[data-weight="14"]{font-size:3.74em; font-weight:740;}
.word[data-weight="13"]{font-size:3.6em; font-weight:720;}
.word[data-weight="12"]{font-size:3.46em; font-weight:690;}
.word[data-weight="11"]{font-size:3.32em; font-weight:660;}
.word[data-weight="10"]{font-size:3.16em; font-weight:630;}
.word[data-weight="9"]{font-size:3.0em; font-weight:600;}
.word[data-weight="8"]{font-size:2.83em; font-weight:565;}
.word[data-weight="7"]{font-size:2.65em; font-weight:530;}
.word[data-weight="6"]{font-size:2.45em; font-weight:490;}
.word[data-weight="5"]{font-size:2.24em; font-weight:450;}
.word[data-weight="4"]{font-size:2.0em; font-weight:400;}
.word[data-weight="3"]{font-size:1.73em; font-weight:345;}
.word[data-weight="2"]{font-size:1.41em; font-weight:280;}
.word[data-weight="1"]{font-size:1em; font-weight:50;}
.word{
    display:inline;
    margin:0.2em;
}

div.cloud {
    display:block;
    margin: 1%;
    padding: 1%;
    font-size:6pt;
    border-style:groove;
    border-color : sky-blue;
    background-color:#E9E9E9;
 }
div.cloud:hover { 
    background-color:#369;
    border-style:ridge;
    cursor:pointer;
}
div.cloud:after { 
    content:'\A';
}
div.cloud.highlight {
    background-color:#48C;
}
div.cloud.highlight:hover {
    cursor:default;
}

div.story {
    padding:1px;
    margin:1px;
    border-collapse:collapse;
    margin-bottom:5px;
    background-color:rgba(210,180,140,1) ;
    display:table-row; 
    height:2em;
}

div.story > span {
    display:table-cell;
    vertical-align:middle;
    padding:4px;
    padding-left:6px;
    border:outset;
    border-left:none;
}
span.date, span.page { 
    font-size:small; 
    white-space:pre;
}
span > span { display: block; }
span.page:before {
    content:"page ";
}

span.headline, span.date {
    font-size:large;
    margin:0.25em;
    text-align:center;
}
span.by { 
    text-align:right;
    margin:0.25em;
}