body
{
    background: #ffffff;
    color: #000000;
    font-size: medium;
	font-family: "Consolas", monospace;
    margin: 0px;
    padding: 5px 10px;
}

h3
{
    color: #151515;
    font-size: 12px;
    margin: 1em;
}

hr
{
    border: 0px solid #151515;
    border-top: 1px solid #151515;
    color: #151590;
}

ul
{
    color: #151515;
    display: block;
    list-style-type: disc;
    margin: 0px;
    padding: 1em 1em 1em 2em;
}

li
{
    padding: 0px;
    text-align: left;
}



a
{
    color: #151515;
    display: block;
	font-size: x-large;
    line-height: 1.5em;
    padding: 0px 5px;
    text-decoration: none;
    text-align: left;
}

a:hover
{
    background: #e5e5e5;
	border-radius: 2px;
    color: #151590;
    text-decoration: none;
}

@media (min-width: 940px)
{
	a
	{
		font-size: larger;
	}
}

.header
{
	background-color: #454545;
	border-radius: 3px;
	margin-bottom: 5px;
	margin-top: 5px;
	padding: 5px;
}

@media (min-width: 370px)
{
	.header
	{
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
		grid-auto-rows: 30px;
		grid-gap: 5px;
	}
}

.header a
{
	border-radius: 3px;
	color: #ffffff;
	font-family: "Consolas", monospace;
	font-size: x-large;
	font-weight: bold;
	letter-spacing: 1.5px;
	line-height: 30px;
	text-align: center;
	transition: all 1s;
	vertical-align: middle;
}

@media (min-width: 370px)
{
	.header a
	{
		font-size: larger;
	}
}

.header a:hover
{
	background-color: #999999;
}


.rows
{
}

@media (min-width: 940px)
{
	.rows
	{
		display: grid;
		grid-gap: 5px;
		grid-template-columns: repeat(auto-fill, 100%);
	}
}

.row
{
}

@media (min-width: 940px)
{
	.row
	{
		display: grid;
		grid-gap: 5px;
		grid-auto-rows: minmax(60px, auto);
		grid-template-columns: repeat(10, 1fr);
	}
}

.row .section
{
    background-color: #e0e0e0;
    border-radius: 3px;
    border-top: none;
	border: 1px solid transparent;
    color: #000000;
	cursor: pointer;
	padding: 0px 5px 5px 5px;
	margin-bottom: 5px;
    text-align: center;
    vertical-align: middle;
    transition: 0.5s all;
}

@media (min-width: 940px)
{
	.row .section
	{
		display: grid;
		grid-column: span 5;
		margin-bottom: initial;
	}
}

.row .section.med-font .folder a,
.row .section .folder.med-font a
{
    font-size: medium;
}

.row .section:hover
{
	border: 1px solid #a0a0a0;
}

.row .section .name_tag
{
    align-self: center;
    font-size: x-large;
    font-weight: bold;
    justify-self: center;
	padding-bottom: 4px;
	padding-top: 7px;
}

@media (min-width: 940px)
{
	.row .section .name_tag
	{
		align-self: center;
		font-size: larger;
		padding-bottom: 0px;
		padding-top: 0px;
	}
}

.row .section .folder
{
	display: none;
}

.row.active
{
    grid-auto-rows: minmax(500px, auto);
}

.row.active .section
{
    background-color: #e0e0e0;
}

@media (min-width: 940px)
{
	.row.active .section
	{
		display: grid;
		grid-column: span 1;
	}

	.row.active .section .name_tag
	{
		align-self: start;
		padding-top: 20px;
	}
}

.row.active .section.active
{
    background-color: #f23453; /* default */
	cursor: default;
}

@media (min-width: 940px)
{
	.row.active .section.active
	{
		grid-auto-rows: minmax(200px, auto);
		grid-column: span 9;
		grid-gap: 5px;
		grid-template-columns: repeat(auto-fill, 200px);
	}
}

.row.active .section.active:hover
{
	border: 1px solid transparent;
}

.row.active .section.active .name_tag
{
    display: none;
}

.row.active .section.active .folder
{
	display: block;
}

.folder
{
    background: #c0c0c0;
    border-radius: 3px;
    border-top: none;
    color: #ffffff;
	margin-top: 5px;
    padding: 0px;
    vertical-align: text-top;
}

.folder.long
{
    grid-row: auto / span 2;
}

.folder.wide
{
    grid-column: span 2;
}

.folder.xlong
{
    grid-row: auto / span 3;
}


.folder h2
{
    background-color: #454545;
    border: 1px solid #454545;
    border-radius: 3px 3px 0px 0px;
    font-size: 13px;
    line-height: 2em;
    margin: 0px;
    padding-left: 1em;
}



/* Per-section colors */



/* work */
.row .section[data-name="work"]
{
    color: rgb(255, 108, 43);
}

.row.active .section[data-name="work"].active
{
    background-color: rgb(255, 108, 43);
	grid-template-columns: repeat(auto-fill, 140px);
}

.section[data-name="work"] .folder
{
    color: rgb(255, 108, 43);
}


/* play */
.row .section[data-name="play"]
{
    color: #7eb95e;
}

.row.active .section[data-name="play"].active
{
    background-color: #7eb95e;
}

.section[data-name="play"] .folder
{
    color: #7eb95e;
}



/* Individual folder colors */
.section folder.fb
{
    background-color: #3F5C9A;
    color: #3F5C9A;
}

footer
{
	background-color: #454545;
	border-radius: 3px;
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: 60px;
	margin-top: 5px;
	text-align: center;
}

#clock
{
	align-self: center;
	color: white;
	font-size: larger;
	line-height: 1.2;
	justify-self: center;
	text-align: center;
}

@media (max-width: 549px)
{
	.hidden-xs
	{
		display: none;
	}
}

/*
 * color palets
 * http://colorpalettes.net/?s=desert
 * http://www.color-hex.com/color-palettes/?keyword=desert
 *     http://www.color-hex.com/color-palette/33660
 */