/* Main body */
body {    
    background-color: #ededed;
    margin: 0px;
    padding: 0px;
  	font-size: medium;
}

b, p, a {
  	font-family: Helvetica, Geneva, Tahoma, sans-serif;
}

button {
  	height: 42px;
  	width: 100%;
  	font-size: small;
  	text-align: left;
  	
  	border-style: none;
  	border-color: #4e4e4e;
  	border-width: 1px;
  	color: #2e2e2e;
}


#page {
    height: calc(100% - 81px);
  	width: 100%;
  
  	bottom: 0%;
  	position: absolute;
    
    /* Flex direction (to easily adjust position and layout later on) */
    display: flex;
    flex-direction: row;
}




/* the titlebar and category selection */
/* ------------------------------------------------------------------------------------------------------------------ */

/* The titlebar */
#titlebar {
    /* Size */
    height: 80px;
  	padding-left: 24px;
  	
  	display: flex;
  	align-items: center;

    /* Style */
    background-color: #00457d;
  	font-size: xx-large;
  	color: #ededed;

    /* Border */
    border-style: solid;
    border-width: 0px;
    border-bottom-width: 1px;
    border-color: #ededed;
}


/* Category Selection */
/* ------------------------------------------------------------------------------------------------------------------ */

/* Sidebar */
#sidebar {
    /* Size */
    width: 50px;
  	height: 100%;
    float: left;
    background-color: #2e2e2e;

    /* Position */
    overflow-x: hidden;
    white-space: nowrap;

    /* Transition (the width) */
    transition: width 0.3s ease-in-out;
}
/* Category buttons Buttons */
#sidebar > button {
  	/* Display */
  	display: flex;
  	align-items: center;
  	
    /* Visual */
    background-color: #2e2e2e;
    padding-left: 12px;
    color: #ededed;
}

/* The category selection */
#dropbar {
    /* Size */
    height: 42px;
    width: 100%;
    display: none;
    flex-direction: row;

    /* Visual */
    background-color: #2e2e2e;
    border-style: none;
}

/* Dropbar */
#dropbar > button {
    /* Size */
    height: 100%;
    flex: 1;

    /* Visual */
    background-color: #2e2e2e;
    text-align: center;
    color: #ededed;
}

#sidebar > button:hover, #dropbar > button:hover {
    background-color: #404040;
}



/* the catalog */
/* ------------------------------------------------------------------------------------------------------------------ */

#catalog {
  	overflow: auto;
  	flex: 1;
  	
    padding: 24px;
    padding-top: 32px;

    /* Transition */
    transition: width 0.3s ease-in-out;
}

#catalog > div {
  	font-size: medium;
  	color: #2e2e2e;
  	padding-bottom: 60px;
}

#category {
  	display: grid;
  	row-gap: 12px;
}
.category > button {
    border-bottom-style: dotted;

    padding-left: 8px;
    background-color: #ededed;
  	font-size: large;
}
.category > button:hover {
    background-color: #d1d1d1;
}





/* Webkit */
/* ------------------------------------------------------------------------------------------------------------------ */

/* Customized Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #d5d5d5;
}
::-webkit-scrollbar-thumb {
    background: #aeaeae;
    border-radius: 1px;
}
::-webkit-scrollbar-thumb:hover {
    background: #757575;
}



/* Media */
/* ------------------------------------------------------------------------------------------------------------------ */

/* Change layout according to viewport size (eg. adjust to phone size) */
@media (max-width: 1000px) {
	#page {
        flex-direction: column;
    }
    
    #dropbar {
        display: flex;
    }
    #sidebar {
        display: none;
    }
  	
  	#catalog > div {
      	font-size: large;
  	}
    .category > button {
		font-size: large;
    }
  	
    @media (orientation: portrait) {
      	#catalog {
			padding: 42px;
        }
        #catalog > div {
			padding-bottom: 100px;
          	font-size: xx-large;
        }
      	.category > button { 
          	font-size: xx-large;
        	height: 80px;
      	}
      	
        #dropbar {
          	height: 60px;
        }
      	#dropbar > button {
            font-size: larger;
        }
    }
}