html{height: 100%;}
body{margin: 0px;width: 100%;height: 100%;font-family: sans-serif; overflow: hidden; background-color: #ffffff; color: #333333;}
/* Sidebar section selector */
aside#sidebar{
background-color: #222324;
width: 48px;
height: 100%;
position: absolute;
color: #ffffff;
}
aside#sidebar > .side_icon{
font-size: 24px;
margin: 12px;
}
/* Rest of the app */
main#main_content{
margin-left: 48px;
width: calc(100% - 48px);
height: 100%;
display: flex;
}
/* Middle section */
div#middle_section {
background-color: #ffffff;
width: 100%;
height: 100%;
min-width: 10px;
}
/* Center section */
#search > input#searchbar{
width: calc(100% - 32px);
height: 32px;
padding: 0px 8px;
margin: 8px;
border: 0px;
border-radius: 6px;
background-color: #eeeeee;
}
#content{
background-color: #eeeeee;
width: 100%;
height: calc(100% - 48px);
overflow-y: scroll;
padding-left: 10px
}
#content::-webkit-scrollbar {
width: 10px;
}
#content::-webkit-scrollbar-track {
background: #eeeeee;
}
#content::-webkit-scrollbar-thumb {
background: #555;
border-radius: 4px;
width: 6px;
padding: 0px 2px;
}
@media only screen and (min-width: 600px) {
#container{
margin-left: 5%;
margin-right: 5%;
}
}
@media only screen and (min-width: 960px) {
#container {
margin-left: 10%;
margin-right: 10%;
}
}
@media only screen and (min-width: 1280px) {
#container {
display: block;
margin-left: 20%;
margin-right: 20%;
}
}
/* Main Search Tab */
#main_search > .search_section{
float: none;
}
.top_result {
display: flex;
align-items:center;
}
.top_result > img {
display: inline-block;
border-radius: 5px;
width: 156px;
height: 156px;
}
.top_result > .info_box {
display: inline-block;
padding-left: 24px;
}
.top_result > .info_box > p {
margin: 0px;
margin-bottom: 4px;
}
.top_result > .info_box > .subtitle {
opacity: 0.75;
}
/* Download tab section */
div#download_tab_container{
background-color: #222324;
color: #ffffff;
height: 100%;
width: auto;
display: flex;
}
div#download_tab_bar{
height: 100%;
width: 32px;
}
div#download_tab_bar > label{
writing-mode: vertical-rl;
line-height: 32px;
padding-top: 8px;
}
div#download_tab{
height: 100%;
width: 300px;
display: none;
}
.download_bar_icon{
font-size: 24px;
margin: 4px;
}
/* Global stuff */
img.rounded {
border-radius: 50%;
}
span.tag {
background-color: #222324;
border-radius: 2px;
color: #ffffff;
display: inline-block;
font-size: 10px;
padding: 3px 6px;
}