body {
    background: #F2F2F2;
}

header {
    font-size: 20px;
    background-color: #DFDFDF;
    height: 80px;
    border: 2px solid #B5B7BA;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

header div {
}

header a {
    padding: 20px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 23px;
    text-align: center;
    color: #000000;  
}

h1 {
    padding: 2px;
    text-align: center;
}


footer {
    background-color: #434445;
    display: block;
    /* position: absolute;
    bottom: 5px; 
    margin-bottom: auto;
    padding-top: 1rem; */
    width: 100%;
    height: 40px;
    text-align: center;
    color: #a4a4a4;
    font-size: 20px;
    font-weight: 100;
    line-height: 40px;
}

.blog__navpane {
    display: flex;
    justify-content: space-around;
	align-items: center;
	
    border: solid 1px black;
    background: #ccc;
	height: 40px;
}
.blog__navpane a {
    padding: 20px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 300;
    font-size: 23px;
    line-height: 23px;
    text-align: center;
    color: #000000;
}

.blog__main {
    display: flex;
    align-items: stretch;
    
    border: solid 1px green;
    /* background: #abc; */
}
.blog__text {
    flex-grow: 6;
    
    margin: 5px;
    border: solid 1px black;
    /* background: #cba; */
}
    .blog__text__header {
		display: flex;
		justify-content: center;
		align-items: center;
		
		height: 40px;
        border: solid 1px yellow;
    }
		.blog__text__header a {
			margin-left: 20px;
			margin-right: 20px;
		}
    .blog__text__body {
        display: flex;
        flex-wrap: wrap;
        /*justify-content: flex-start;*/
        
        border: solid 1px yellow; 
    }

.article__preview {
    margin: 5px;
    flex-grow: 1;
    flex-shrink: 1;
    
    /* border: solid 1px blue;
    background: #bbb; */
    height: 300px;
    width: 300px;
	max-width: 350px;
}
    .article__preview img {
        /*height: 150px;*/
        width: 150px; 
        margin: 5px; 
        float: left;
    }
    .article__preview__body {
        overflow: hidden;
        height: 275px;
    }
    .article__preview__footer {
        color: blue;
        height: 25px;
        display: flex;
        justify-content: space-between;
    }
    #preview__big {
        width: 612px;
		max-width: 612px;
        
    }

.blog__sidebar {
    flex-grow: 1;
        
    margin: 5px;
    border: solid 1px red;
    /* background: #cba; */
}
.blog__sidebar__body {
	border: solid 1px green;
}
    .comment__preview__body {
        overflow: hidden;
        height: 175px;
        /* border: solid 1px white; */
    }
    .comment__preview {
		margin: 5;
        flex-grow: 1;
        flex-shrink: 1;
        
        /* border: solid 1px brown; */
        /* background: #bbb; */
        height: 175px;
        width: 300px;
        font-size: 0.8rem;
    }
    .comment__preview__footer {
        height: 20px;
        color: blue;
        /* border: solid 1px green; */
    }

.article__full {
	margin: 5px;
    flex-grow: 1;
    flex-shrink: 1;
    
    /* border: solid 1px blue;
    background: #bbb;
    height: 300px;
    width: 300px; */
}
	.article__full__header {
        overflow: hidden;
		text-align: center;
		
        /* height: 275px; */
    }
	.article__full__body {
        overflow: hidden;
        /* height: 275px; */
    }
    .article__full__footer {
        color: blue;
        height: 25px;
        display: flex;
        justify-content: space-between;
	}
	.article__full img {
        height: 300px; 
        margin: 5px; 
        float: left;
    }
	
.comment__full {
	margin: 5;
    display: flex;
	justify-content: center;    
    /* border: solid 1px brown;
    background: #bbb; */
    height: 300px;
    font-size: 0.8rem;
}
	.comment__full__body {
		
        overflow-x: hidden;
        height: 300px;
		width: 800px;
        /* border: solid 1px white; */
    }
	
.form__area {
	border: solid 1px blue;
	text-align: center;
}
	.form {
		
	}
	.form__control {
		margin: 10px;
	}
@media (max-width: 1000px) {
    .blog__sidebar {
        display: none;
    }
}