/*
 * This is the example from https://www.youtube.com/watch?v=oxGmXOKazw0
 * "How to make a simple responsive admin panel from scratch using HTML,
 *  CSS, JS" by ObscureCoder
 */

@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700");

* {
    /* get rid of nonzero defaults for margin and padding */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* the fonts were imported above */
    font-family: 'Open Sans';
}

.sidebar a {
    /* removes default <a> anchor style, ie. underscoring etc */
    text-decoration: none;
}


/* applies to <div id="header"> tag */
div#header {
    width: 100%;
    height: auto;
/*    height: 80px;*/
    background-color: #2c3e50;
    margin: 0 auto;
}


/* applies to <div class="logo"> tag */
/* (names with dots are class names) */
.logo /*global*/ {
    float: left;
    margin-top: 20px;
    margin-left: 20px;
}

/*
.logo img {
    float: center;
    margin-top: 30px;
    margin-left: 200px;
}
*/

.motto /*global*/ {
    float: right;
    margin-top: 30px;
    margin-right: 20px;
    color: #10b020;	/*green*/
}

/* applies to <a> within <div class="logo"> */
.logo p {
    font-size: 1.6em;
    color: #10f020;	/*green*/
}

/* applies to <span> within <a> within <div class="logo"> */
.logo p span {
    /* span is inline, no newlines */
    font-weight: 600;
}



div#container {
    width: 100%;
    margin: 0 auto;
}



.sidebar {
    /* width: 250px;*/
    width: 25vw;
    /*height: 500px;*/
    height: 100vh;	/* vh/vw = % of current viewport height/width */
    background-color: #171717;
    float: left;
}

/* I suppose one could also use .sidebar ul ... from here on: */

ul#nav {

}

ul#nav li {
    list-style: none;
}

ul#nav li a {
    color: #ccc;	/*grey*/
    display: block;	/* takes up full width, plus newline before&after */
    padding: 10px;
    font-size: 0.8em;
    border-bottom: 1px solid #0A0A0A;	/* makes the faint separating lines */
    /* transition: 0.2s;	/* delay for hover effect */
}

ul#nav li a:hover {
    background-color: #030303;	/*almost black*/
    color: #fff;		/*white*/
    padding-left: 20px;		/* shift when hovered over */
}

/* applies to <a class="selected"> within ... */
ul#nav li a.selected {
    background-color: #030303;	/*almost black*/
    color: #fff;		/*white*/
}




.content {
    width: auto;
    height: 100vh;
    background-color: #95a5a6;

    margin-left: 25vw;		/*sidebar, hmmm*/
    padding: 15px;
}


.content * {
    margin: 5px;
    color: #303030;	/*grey*/
    font-size: 1em;
}

.content a {
    color: #10b020;	/*green*/
}

.content dt {
    font-weight: 800;
}

.content dd {
    margin-left: 25px;
}

.content li {
    margin-left: 25px;
}

.content p {
    padding: 5px;
}