---
# this ensures Jekyll reads the file to be transformed into CSS later
---
@import "variables";
@import "reset";
@import "window";
@import "topbar";
@import "postlist";

body {
	background: #008082;
	font-family: sans-serif, serif, monospace;
	font-size: 13px;
}

.post_list, .tag_list, .post_content, .intro {
	background: #fff8ff;
	border-width: 2px;
	border-style: ridge groove groove ridge;
	border-color: #7f787f #fff8ff #fff8ff #7f787f;
}
.tag_list {
	width: 28%;
	margin: 0 auto;
	min-height: $windowHeight;
	max-height: $windowHeight;
	overflow-y: scroll;
	display: inline-block;

	img {
		height: 16px;
		width: 16px;
		margin: -2px 5px;
	}

	a {
		text-decoration: none;
		color: #000000;
	}

	ul {
		li {
			max-width: 27ch;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
#tag-list {
    background:transparent url("{{ "/assets/img/pixel-alt.png" | relative_url }}") repeat-y 15px 0;
}
#tag-list li {
    padding:0 0 0 2px;
}
#tag-list li a {
    background: #fff8ff;
    display:block;
}
#tag-list li ul li {
    background:transparent url("{{ "/assets/img/pixel-alt.png" | relative_url }}") repeat-x 0 8px;
    margin:4px 0 4px 13px;
    padding:0 0 0 20px;
}
.post_total {
	.left, .right {
		border: 1px solid;
		border-color: #888888 #dadada #dadada #888888;
		display: inline-block;
		padding: 1px 3px;
	}
	.left {
		width: 33%;
		margin-left: 2px;
	}
	.right {
		width: 64%;
		margin-right: 2px;
	}
}

.hljs {
	background: #fff8ff;
}
.footer {
	font-size: 12px;
	margin: 30px 0 10px 0;

	p {
		text-align: center;

		a {
			color: #24244a;
		}
	}
}
@media only screen and (max-width: 900px) {
    #content {
        width: 90%;
    }
}
@media only screen and (max-width: 700px) {
    #content {
        width: 90%;
    }
	.post_content {
		width: 98%;
	}
}
@media only screen and (max-width: 400px) {
	.post_content {
		width: 97%;
	}
}
@media only screen and (max-width: 810px) {
	#wrapper {
		width: 90%;
	}
	.post_total {
		.left {
			width: 37%;
		}
		.right {
			float: right;
			width: 60%;
		}
	}
}
@media only screen and (max-width: 750px) {
	.tag_list {
		width: 99%;
	}
	.post_list, .intro {
		width: 99%;
		float: left;
	}
	.post_total {
		.left {
			width: 36%;
		}
		.right {
			float: right;
			width: 60%;
		}
	}
}
@media only screen and (max-width: 610px) {
	.tag_list {
		width: 98.7%;
	}
	.post_list, .intro {
		width: 98.7%;
		float: left;
	}
	.post_total {
		.left {
			width: 35.7%;
		}
	}
}
@media only screen and (max-width: 520px) {
	.post_total {
		.left {
			width: 34.5%;
		}
	}
}
@media only screen and (max-width: 410px) {
	.post_total {
		.left {
			width: 34%;
		}
	}
}
@media only screen and (max-width: 375px) {
	.post_total {
		.left {
			width: 33%;
		}
	}
}
::-webkit-scrollbar {
      width: 16px;
} /* this targets the default scrollbar (compulsory) */
::-webkit-scrollbar-track {
	background-image: url("{{ "/assets/img/track.png" | relative_url }}");
	background-repeat: repeat-x repeat-y;
} /* the new scrollbar will have a flat appearance with the set background color */
 
::-webkit-scrollbar-thumb {
	background-color: #cccccc;
	border-width: 2px;
	border-style: groove ridge ridge groove;
	border-color: #fff8ff #000000 #000000 #fff8ff;
} /* this will style the thumb, ignoring the track */
 
::-webkit-scrollbar-button {
	background-color: #cccccc;
	border-width: 2px;
	border-style: groove ridge ridge groove;
	border-color: #fff8ff #000000 #000000 #fff8ff;
	background-position: center center;
	background-repeat: no-repeat;

	&:vertical:decrement {
		background-image: url("{{ "/assets/img/up.png" | relative_url }}");
	}

	&:vertical:increment {
		background-image: url("{{ "/assets/img/down.png" | relative_url }}");
	}

	&:horizontal:decrement {
		background-image: url("{{" /assets/img/left.png" | relative_url }}");
	}

	&:horizontal:increment {
		background-image: url("{{ "/assets/img/right.png" | relative_url }}");
	}

	&:active {
		background-position: 1px 2px;
	}
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
 
::-webkit-scrollbar-corner {
	background-color: #cacaca;
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */