<style>
/* Defaults / Desktop View */

img {
    border: 0;
	
}
#logo {
	padding:40px 30px 48px 30px;
	width:100px;
	text-align:center;

}
#logo h1 {
	font-size:30px;
	margin:0;
}
#text{
	font-size:15px;
}
#menu {
	padding:10px;
	font:italic 15px/18px Georgia,serif;
}
#menu ul {
	margin:0;
	padding:0;
	list-style-type:none;
}
#menu ul li {
	display:block;
	padding:0;
	margin:0 0 1px 0;
	background-color:#335099;
}
#menu a {
	color:#FFF;
	display:block;
	padding:8px 10px;
	text-decoration:none;
}
#menu a:hover {
	color:#335099;
	background:#CCF;
}
#masthead p {
	margin:0;
}
#masthead p.title {
	padding:15px;
	background:#4285f4;
	text-decoration:none;
	color:#FFF;
	font-size:18px;

}

#masthead p.title a{
	padding:15px;
	background:#4285f4;
	text-decoration:none;
	color:#FFF;
	font-size:18px;

}
<!--z-index: -1;content: "";left: 1px;right: 1px;top: 1px;bottom: 1px;-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);à§Ò-->
div.contentBox {
	margin-bottom:20px;
	
}
div.widgetMisc {
	color:BLACK;
	background:#E0E0E0;
	padding:15px;
	font-style:italic;
	text-align:center;
	font-size:18px;
	
}
div.widgetMisc2 {
	color:BLACK;
	padding:15px;
	font-size:15px;
	font-style:normal;
	text-align:left;
	border:1px solid #CCC;
}

#featureWrap {

	width:100%;
	overflow:hidden;
}
#featureWrap .feature {
	
	float:left;
	width:240px;
	margin:0 10px 0 0;
	border:1px solid #CCC;
	padding:7px;
	
	
}
#featureWrap .feature2 {
	
	float:left;
	width:240px;
	margin:0 10px 0 0;
	border:1px solid #CCC;
	padding:7px;
}

#featureWrap .feature p {
	margin:0;
}
#featureWrap .feature p.img {
	max-height:240px;
	overflow:hidden;
	
}
#featureWrap .feature p.title {
	padding:12px 0;
}
#featureWrap .feature p.title a {
	color:#335099;
	text-decoration:none;
	font-size:20px;
}
#featureWrap .feature p.desc {
	font-size:12px;
	line-height:19px;
	color:#555;
}
#featureWrapClear {
	clear:left;
}
#wrap {
	width:980px;
	margin:0 auto;
}

#wrapClear {
	clear:left;
}
#nav {
	float:left;
}
#content {
	margin-left:20px;
	float:left;
    width: 800px;
}
#navClear {
	display: none;
}
#wrap2{
	width:;
	margin:0 auto;

	
}
#sidebar{
	background:rgba(255,255,255,0.8);
	position:absolute;
          left:auto;
	top:300px;
	text-decoration:none;
	width:150px;
	border:1px solid black;
	margin-left:10px;
	
}

#sidebar a {
	color:#BLACK;
	display:block;
	padding:1px 10px;
	text-decoration:none;
	font-size:12px;
}
#sidebar h2 {
	padding:8px;
}
#sidebar li{
	padding-left:none;
}
#article{
	float:right; width: 78%;
	background:rgba(255,255,255,0.8);
}
#footer{
    clear: both;
    position: relative;
    top: 15px;
}

@media all and (max-width:980px){
	#wrap2{
	width:950px;
	margin:0 auto;
	padding-left:auto;
}
#sidebar{
	background:rgba(255,255,255,0.8);
	position:relative;
	float:left;
	alignment-adjust:central;
	top:auto;
	text-decoration:none;
	border:1px solid black;
	width:640px;
}

#sidebar a {
	color:#BLACK;
	display:block;
	padding:1px 10px;
	text-decoration:none;
}
#sidebar li{

}
}
@media all and (min-width:651px ) and (max-width:979px) {
	/*Small Desktop / Large Tablet View*/
	
	#wrap {
		width:650px;
	}
	#wrap2{
	width:650px;
	margin:0 auto;
	
}
#sidebar{
	background:rgba(255,255,255,0.8);
	position:relative;
	float:left; 
	text-decoration:none;
	border:1px solid black;
	width:610px;
}

#sidebar a {
	color:#BLACK;
	display:block;
	padding:1px 10px;
	text-decoration:none;
}
#sidebar li{

}
	#nav {
		float:none;
		margin-bottom:20px;
	}
	#content {
		margin-left:0;
		float:none;
        width: auto;
	}
	#wrapClear {
		clear:none;
	}
	#logo {
			display: none;
	}
	#menu {
		float:left;
		margin-left:20px;
		margin-top:24px;
	}
	#menu ul li {
		float:left;
		margin:0 2px 0 0;
	}
	#menu ul li a {
		padding:10px 15px;
	}
	#navClear {
		display:inline;
		clear:left;
	}
	#featureWrap .feature {
		width: 190px;
	}
	#featureWrap .feature2 {
	
	width:190px;

}
}
@media all and (min-width:481px ) and (max-width:650px) {
	/* Small Tablet View */
	#wrap {
		width:480px;
	}
	#wrap2{
	width:480px;
	margin:0 auto;
	
}
#sidebar{
	background:rgba(255,255,255,0.8);
	position:relative;
	float:left; 
	text-decoration:none;
	width:470px;
	border:1px solid black;
}

#sidebar a {
	color:#BLACK;
	display:block;
	text-decoration:none;
}
#sidebar li{

}
	#nav {
		float:none;
		margin-bottom:20px;
	}
	#content {
		margin-left:0;
		float:none;
        width: auto;
	}
	#wrapClear {
		clear:none;
	}
	#logo {

			display: none;
	}
	#menu {
		float:left;
		margin-left:10px;
		margin-top:24px;
		font-size:12px;
	}
	#menu ul li {
		float:left;
		margin:0 2px 0 0;
	}
	#menu ul li a {
		padding:8px 12px;
	}
	#navClear {
		display:inline;
		clear:left;
	}
	#featureWrap .feature {
		width:130px;
		margin: 10px, 12px;
		min-height:300px;
		

	}
	#featureWrap .feature2 {
	

	width:130px;
		margin: 10px, 12px;
		min-height:300px;
}


	
}
@media only screen and (max-width:480px) {
	/* Smartphone view*/
	#wrap {
		width:300px;
	}
	#wrap2{
	width:300px;
	margin:0 auto;
	
}
#sidebar{
	background:rgba(255,255,255,0.8);
	position:relative;
	float:left; 
	text-decoration:none;
	width:290px;
	border:1px solid black;

}

#sidebar a {
	color:#BLACK;
	display:block;
	padding:8px 10px;
	text-decoration:none;
}
#sidebar li{

}
	#nav {
		float:none;
		margin-bottom:20px;
	}
	#content {
		margin-left:0;
		float:none;
        width: auto;
	}
	#wrapClear {
		clear:none;
	}
	#logo {
	display: none;
	}
	#menu {
		float:left;
		font-size:12px;
	}
	#menu ul li {
		float:left;
		margin:0 2px 0 0;
	}
	#menu ul li a {
		padding:8px 12px;
	}
	#navClear {
		display:inline;
		clear:left;
	}
	#featureWrap .feature {
		width:284px;
		margin-bottom: 10px;
	}
		#featureWrap .feature2 {
		display:none;
	}
	
	  .sidebar {
    float: none;
	margin:0 2px 0 0;
	background:rgba(255,255,255,0.8);
	 width: auto;
  }
  .sidebar li{
	list-style: none;
}
  .article
  {
    float: none;
	background:rgba(255,255,255,0.8);
    width: auto;
  }
  #featureWrap .feature p.img {
	  max-height:none;
	
}
}
.button2 {
    display: inline-block;
    position: relative;
    margin: 10px;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    font: bold 12px/25px Arial, sans-serif;
 
    text-shadow: 1px 1px 1px rgba(255,255,255, .22);
 
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
 
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
 
    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    transition: all 0.15s ease;
}
.green {
    color: #3e5706;
 
    background: #a5cd4e; /* Old browsers */
    background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* IE10+ */
    background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* W3C */
}
 
/* Blue Color */
 
.blue {
    color: #19667d;
 
    background: #70c9e3; /* Old browsers */
    background: -moz-linear-gradient(top,  #70c9e3 0%, #39a0be 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* IE10+ */
    background: linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* W3C */
}
 
/* Gray Color */
 
.gray {
    color: #515151;
 
    background: #d3d3d3; /* Old browsers */
    background: -moz-linear-gradient(top,  #d3d3d3 0%, #8a8a8a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(100%,#8a8a8a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* IE10+ */
    background: linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* W3C */
}
.big {
    padding: 0 40px;
    padding-top: 10px;
    height: 45px;
    text-transform: uppercase;
    font: bold 20px/22px Arial, sans-serif;
}
 
.big span {
    display: block;
    text-transform: none;
    font: italic normal 12px/18px Georgia, sans-serif;
    text-shadow: 1px 1px 1px rgba(255,255,255, .12);
}
</style>