#content > .side#left {
	width: 30%;
}

#content > .side#left > #category-selection-area {
	padding:5px;
	margin-bottom:5px;
}

#content > .side#left > #category-selection-area > .category-item {   
	border-radius:5px;
	display:inline-block;
	padding:10px;
	margin:5px;
	cursor:pointer;
	background-color: #008040;
	transition: background-color 0.1s, color 0.05s, font-size 0.1s;
    user-select: none;
    box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 5px;
}

#content > .side#left > #category-selection-area > .category-item:hover {
    background:#00994d;
    color:#cee3d0;
}

#content > .side#left > #category-selection-area > .category-item:active {
	background-color: rgba(0,0,0,0.3)
}

#content > .side#left > #category-selection-area > .selected-category-item {
	background-color: rgba(0,0,0,0.3);
	box-shadow: inset 0 0 0 1px rgba(29, 185, 84, 0.8);
	color: rgb(29, 185, 84);
}

#content > .side#left > #category-selection-area > .selected-category-item:hover {
    background-color: rgba(0,0,0,0.6);
	color:#22dd64;
}

#content > .side#left > #category-title-area {
	padding:5px;
    margin-top:15px;   
}

#content > .side#left > #category-title-area > #category-title {
    font-size: 20px;
    font-weight:300;
    display:inline-block;
    border-radius:5px;
	margin-left:10px;
}

#content > .side#left > #snippet-selection-area {
    padding:5px;
}

#content > .side#left > #snippet-selection-area > .snippet-list {
	padding:5px;
}

#content > .side#left > #snippet-selection-area > .snippet-list {
	display:none;
}

.side#left > #snippet-selection-area > .snippet-list > .snippet-list-item {
	border-radius:5px;
	padding:10px;
	cursor:pointer;
	transition: background-color 0.1s, color 0.1s;
	margin-bottom:5px;
    xbackground-color: rgba(0, 0, 0, 0.4);
	background-color: #202d3c;
    user-select: none;
}

.side#left > #snippet-selection-area > .snippet-list > .snippet-list-item:hover {
    color:#cc7033;
}

.side#left > #snippet-selection-area > .snippet-list > .snippet-list-item:active {
	background-color: rgba(0,0,0,0.5);
}

.side#left > #snippet-selection-area > .snippet-list > .selected-snippet-list-item {
	xbackground-color: rgba(0,0,0,0.6);
	box-shadow: inset 0 0 0 1px #cc7033;
	color: #e49967;
}

.side#left > #snippet-selection-area > .snippet-list > .selected-snippet-list-item:hover {
	box-shadow: inset 0 0 0 1px #df6c20;
	color: #df6c20;
}