main.css

body {
	background-color:gray;
}

html {
	font-size:14px;
}

/*------------
GENERAL DESIGN
------------*/

.blog-content {
	padding:0 10px 10px 10px;
}

.text-link {
	text-decoration:none;
	color:black;
}

/*-------------
HEADER
---------------*/


.blog-header {
	height:150px;
	background-color:SteelBlue;
	max-width:960px;
	border-bottom:10px solid #315a7d;
}

.blog-title {
	position:relative;
	top:75%;
	left:25px;
	color:white;
	font-size:1.5rem;
}

/*-------------
NAVBAR
--------------*/

.nav-list {
	padding:0;
	margin: 0px
}

.nav-list-item{
	background-color:#306;
	border:5px solid #1a0033;
	border-radius:0.5rem;
	height:1.5rem;
	margin:0.25rem 0px 0.25rem 0px;
}

.nav-link {
	display:block;
	text-align:center;
	color:white;
	line-height:1.5rem;
	vertical-align: middle;
	text-decoration: none;
	border-radius:0.5rem;
}

/*-----------
sidebar
-------------*/

.sidebar-container {
	display:none;
}

/*--------------
BLOG BODY
----------------*/

.blog-body {
	box-sizing: border-box;
	background-color:lightgray;
	padding:0rem 1rem 1rem 1rem;

}

/*--------------
Article Title
----------------*/

.article-title {
	margin:0;
	padding:2rem 0rem;
}


/*------------
Section title
----------------*/

.section-title{
	border-bottom:1px solid gray;
	padding-bottom:0.25rem;
	margin-top:2rem;
	text-indent: 0.75rem
}

/*-----------
Table style
-------------*/

.table-cell {
	border-collapse: collapse;
	border: 1px solid darkgray;
	padding:0.25rem;
	font-size:0.8rem;
}

.table-head-cell {
	border:1px solid black;
	text-align:left;
	background-color: #B2B2B2;
}

.table-button {
	background-color:steelblue;
	color:white;
	width:4rem;
	border:none;

}

/*--------------------
code example container
----------------------*/

.code-example-container {
	background-color: #B2B2B2;
	padding:0.75rem 0.75rem 0.75rem 0.75rem;
}

.code-example {
	font-size:0.8rem;
	font-family: "Courier New" "sans-serif";
}


/*-------
body image
--------*/

.body-image-container {
	text-align:center;
}

.body-image {
	max-width:100%;
}

/*--------
article footer
--------*/

.article-footer {
	margin: 2rem 0rem 7rem 0rem;
	color:gray;
}

/*---------------
comments section
----------------*/

.comment-break {
	display:inline-block;
	width:63px;
	text-align: center;
	line-height:1.5rem;
	vertical-align: middle;
	color:gray;
}
.line-before {
	display:inline-block;
	width:60px;
	line-height:1.5rem;
	vertical-align: middle;
}

.line-after {
	display:inline-block;
	width:49%;
	line-height:1.5rem;
	vertical-align: middle;

}

/*---------------
comments form 
----------------*/

.form-line {
	display:block;
	max-width:100%;
	height:1.5rem;
	margin: 0.75rem 0rem 0.75rem 0rem;
}

.form-label {
	display:inline-block;
	width:6.5rem;
	text-align:right;
}

.form-field {
	display:inline-block;
	height:1.5rem;
	width:50%;
	border:1px solid gray;
	margin-left:0.75rem;

}

.comment-box-container {
	width:100%;
	text-align:center;
}

.comment-box {
	width:90%;
	height:150px;
	overflow: auto;
}

.submit-container {
	width:100%;
	text-align: center;
}

.submit-button {
	width:50%;
	height:2rem;
	line-height: 2rem;
	vertical-align: middle;
	color:white;
	background-color: forestgreen;
	border:none;
	margin:1rem 0rem;
}


/*-----------
user comments
-------------*/

.profile-pic {
	float:left;
}

.sub-comment-container {
	border-left:1px solid gray;
	margin-left:3rem;
	padding-left:1rem;
}

.comment-body {
	font-size:0.9rem;
	padding-top:1rem;
}

.comment-head p {
	margin:0;
	overflow:hidden;
	padding-left:1rem;
	position:relative;
	top:0.5rem;
}

.comment-head p:nth-child(2) {
	font-weight:bold;
}

.comment-head p:nth-child(3) {
	font-style:italic;
	color:gray;
	font-size:0.9rem;
}

@media screen and (min-width: 600px) {
	
/*------------
GENERAL DESIGN
------------*/

	.blog-content {
		max-width:960px;
		padding:0;
		margin:auto;
	}

	.link-hover:hover {
		font-weight:bold;
		color: forestgreen;
	}

/*------------
large header
-------------*/

	.blog-header {
		height:300px;
	}

	.blog-title {
		top:85%;
	}

/*-----------
large navbar
------------*/

	.nav-list {
		text-align:right;
		height:2rem;
		background-color: #306;
		border-bottom:10px solid #1a0033;
	}

	.nav-list-item {
		display: inline-block;
		height:2rem;
		width:7rem;
		margin:0;
		border:none;
	}

	.nav-link {
		line-height:2rem;
	}

	.nav-link:hover {
		background-color:white;
		border:0;
		border-radius:0;
	}

/*-------------
Table
---------------*/


	.table-cell {
		font-size:1rem;
		padding:0.5rem;
	}	

	.code-example {
		font-size:1rem;
	}

	.code-example-container {
		padding:2rem 2rem 2rem 3rem;
	}

	.comment-box {
		width: 65%;
	}

	

}

@media screen and (min-width:1280px) {
	.sidebar-container {
		display: inline-block;
		position:relative;
		left:970px;
		height:249px;
	}

	.blog-body {
		position:relative;
		bottom:249px;
	}

	.sidebar-content {
		box-sizing: border-box;
		background-color:lightgray;
		padding:0.5rem 0.75rem 0.5rem 0.5rem;
		border-bottom:5px solid black;
	}

	.sidebar-list {
		font-size:0.9rem;
		margin:0px;
		padding: 0 0 1rem 0;
		list-style: none;
		font-weight: 600;
	}

	.sidebar-list-item {
		font-weight: 300;
		text-indent: 0.5rem;
	}
}