@font-face {
  font-family: "Segoe UI Local";
  font-weight: 200;
  src: local("Segoe UI Light");
}
@font-face {
  font-family: "Segoe UI Local";
  font-weight: 400;
  src: local("Segoe UI");
}
@font-face {
  font-family: "Segoe UI Local";
  font-weight: 600;
  src: local("Segoe UI Semibold");
}
html, body { height: 100% }
body {
    background-color: #f2f2f2;
    font: 1em "Segoe UI Local","Segoe WP","Segoe UI Web",Tahoma,"Helvetica Neue",Helvetica,"Meiryo UI",Meiryo,Arial Unicode MS,sans-serif;
    width: 100%;
    margin: 0 auto;
}

body.conversation {
    overflow-x: hidden;
}

.left {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 30%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}
.right {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 70%;
    height: 100%;
    overflow: hidden;
}
div#selected-conversation-placeholder {
    display: block;
    width: 100%;
    height: 92%;
    overflow: hidden;
}
.object {
    width: 100%;
    height: 98%;
    overflow-x: hidden;
    overflow-x: hidden;
}

body.index {
    overflow: hidden;
}
div.header {
    position: fixed;
    top: 0rem;
    left: 1rem;
    width: 100%;
    background-color: #f2f2f2;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}
h1 {
    color: #0b0b10;
    font-size: 1.5em;
    top: 0rem;
    left: 1rem;
    padding-left: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-top: 0;
    margin-bottom: 1rem;
    width: 100%;
    background-color: #f2f2f2;
}
h1.conversations {
    position: static;
    margin-bottom: 0rem;
    padding-left: 7rem;
    background: url(skype.svg) 1rem 1rem no-repeat;
    margin-bottom: 0rem;
}

div.author {
    color: #626f82;
    padding-bottom: 0.5rem;
}
div.quote:before{
    display:block;
    height:0;
    content:"“";
    margin-left: -1.5rem;
    font:italic 50px/1 Georgia, serif;
    color:#999
}
div.quote {
    font-style: italic;
    margin-left: 1.5rem;
    margin-bottom: 0.5rem;
}
span.author {
    color: #626f82;
}
span.timestamp {
    color: #626f82;
    padding-left: 0.5rem;
    font-size: small;
}
span.timestamp-conv {
    color: #626f82;
    padding-left: 0.5rem;
    font-size: small;
}
span.messageCount {
    color: #626f82;
    font-size: small;
}
span.at:before{
    content:"@"
}
span.at {
    font-style: italic;
    color: #626f82;
}
ul {
    list-style-type: none;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
}
ul.conversations {
    position: absolute;
    top: 8rem;
    bottom: 0;
    width: 90%;
    overflow-y: scroll;
}
li.message {
    border-radius: 5px;
    background-color: white;
    color: #0b0b10;
    padding-left: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 0.5rem auto;
}
li.conversations {
    background-color: #f2f2f2;
    color: #0b0b10;
    padding-left: 0.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 0 auto;
    word-wrap: break-word;
    border-bottom-style: solid;
    border-bottom-width: thin;
    border-bottom-color: #626f82;
}

li.conversations-sel {
    background-color: #c7edfc;
    color: #0b0b10;
    padding-left: 0.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 0 auto;
    word-wrap: break-word;
    border-bottom-style: solid;
    border-bottom-width: thin;
    border-bottom-color: #626f82;
}