*{margin:0px;padding:0px}
.clear{clear:both}
body{font-family:arial;font-size:13px}
#container{width:100%;border:1px solid black}

/*header start here*/
#header{width:100%;height:60px;background:black;border:1px solid black;position:relative}
#image{float:left;width:80px;height:60px}
#navigation{width:100%;padding:10px 0;margin-top:20px;position:absolute;bottom:0px}
#navigation ul{list-style-type:none;float:right}
#navigation ul li{float:left;padding:0 15px}
#navigation ul li a{color:yellow;font-size:20px;text-decoration:none;font-weight:700}
#navigation ul li a:hover{text-decoration:underline; color:green}

/*content area start*/
#content{width:100%;height:1130px;padding-left:10px}

#post{width:77%;padding:1%;height:1063px;float:left;}

#slidebar{width:18%;padding:1%;margin-top:2px;height:1068px;float:left;background:#BFFFFF;border:1px solid red}

#slidebar ul#category_list{list-style-type:none;height:500px; width:200px;overflow-y:auto;font-size:15px;border:1px solid black;background:#FDDE82;margin:5px;padding:10px}
ul#category_list li{margin-bottom:5px;border-buttom:1px solid #99FFFF;padding-buttom:2px}
ul#category_list li a{text-decoration:none;font-weight:700}
ul#category_list li a:hover{text-decoration:underline}

/*footer area start*/
#footer{width:100%;height:75px;background:pink;border:1px solid black}
#bar {width:100%}
#bar ul{list-style-type:none;float:right}
#bar ul li{float:left;padding:0 15px; margin-top:25px}
#bar ul li a{color:red;font-size:20px;text-decoration:none;font-weight:700}
#bar ul li a:hover{text-decoration:underline; color:#7F137F}

/*responsive*/
@media only screen
	and (min-device-width:500px)
	and (max-device-width:1000px){
		/*style*/
		body{background:yellow;font-size:20px;color:blue;display:flex;
       flex-direction: column-reverse;
        text-align:center;}
	}
	@media only screen
	and (min-device-width:100px)
	and (max-device-width:500px){
		/*style*/
		#sidebar{background:pink;font-size:30px;color:green;}