index.css

*
{
border: 0px;
margin: 0px;
padding: 0px;
background-color: #20242a;
color: #9CA4B4;
text-align: left;
font-family: Arial, Verdana, sans-serif;
}

/* revert the background color given to links above */
a
{
background-color: inherit;
}

html, body
{
height: 100%;
width: 100%;
}

#navigation
{
float: left;
border-right: 1px solid black;
width:250px;
}

#content
{
/* this prevents horizontal scrollbars from popping up */
word-wrap: break-word;
}

.flexHorizontal
{
/* keeps the edit and delete buttons on the same line as their query */
display: flex;
/* centers the edit and delete buttons with their query */
align-items: center;
}

button
{
width: 100%;
height: 27px;
margin: 2px 0px 2px 0px;
padding: 6px;
word-wrap: break-word;
}

.clickable
{
background-color: #272B33;
max-height: 30px;
cursor: default;
}

.clickable:hover
{
background-color: #30353F;
color: #C8D5EE;
}

img
{
min-width: 27px;
min-height: 27px;
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
margin:0px;
}

.editButton
{
background-image: url(edit.png);
}

.editButton:hover
{
background-image: url(edit_bright.png);
}

.deleteButton
{
background-image: url(delete.png);
}

.deleteButton:hover
{
background-image: url(delete_bright.png);
}

input
{
margin: 5px;
padding: 5px;
border: 1px solid;
}

#file
{
margin-left: 0px;
margin-right: 0px;
border: 0px;
}

.scroller
{
padding-left: 10px;
padding-right: 10px;
height: 100%;
overflow-y: auto;
}

.message
{
background-color: #272B33;
padding: 5px;
margin-top: 5px;
margin-bottom: 5px;
}

.sender
{
font-weight: bold;
background-color:inherit;
padding: inherit;
}

.content
{
background-color:inherit;
padding: inherit;
}

.time
{
font-size: 50%;
background-color:inherit;
padding: inherit;
}