/*
Responsive Style
*/

#wrapper,
#access,
#access .menu-header,
div.menu,
#colophon,
#branding,
#main,
#footer {
  max-width:100%;
  min-width:260px;
}

#main {
    margin:0 auto;
}

#content h3, #content h4{
	font-weight: bold;
}

#content h4{
	color: gray;
}

/*
LAYOUT: Pre and Code
DESCRIPTION: Fixing these so when scaled down they won't create a scroll bar and break the responsiveness.
NOTE: Do not use these two together... ie. <pre><code>Something</code></pre>
*/

#content pre {
	font-size: 80%;
	overflow: hidden;
	padding: 1em;
}

#content code {
	font-size: 70%;
	margin-bottom: 24px;
}

/*
LAYOUT: Responsive Images & Video
DESCRIPTION: Responsive.
*/

#branding img, #content img {
	margin: 0;
	height: auto;
	max-width: 100%;
	width: auto;
}

iframe, object, embed{
	max-width: 100%;
}

#content .wp-caption{
	padding: 0px;
	width: auto !important;
}

#content .wp-caption.alignnone{
	clear: both;
}
.select-nav{width:100%;
margin:10px auto;}
@media only screen and (min-width: 481px) and (max-width: 1024px){
	#wrapper {
		margin: 0 auto;
		max-width: 90%;
	}
	#middlebar{
	margin:18px auto;
	width:96%;}
	#access,
	#colophon,
	#branding,
	#main,
	#footer,
	{
	    margin: 0 auto;
	    width: 100%;
	}
	 #footerinfo{
	 width:96%
	 }
	#branding{
		overflow: hidden;
	}
	
	/*
	LAYOUT: Responsive Images & Video
	DESCRIPTION: Responsive.
	*/
	#content img {
		margin: 0;
		height: auto;
		max-width: 100%;
		width: auto;
	}
	
	img, object, embed, iframe, #content .wp-caption {
		max-width: 100%;
	}
	
	#content .wp-caption img{
		max-width: 95%;
	}
	  
	/*
	LAYOUT: Two columns
	DESCRIPTION: Responsive.
	940 = 720 + 220
	100% = 76.5957447% + 23.40425535% 
	*/
	
	#container {
		float: left;
		margin: 0 -25.5319149% 0 0;
		width: 99%;
	}
	#content {
		width: 68.5957447%;
		/*margin: 0 29.787234% 0 20px;*/
		margin: 0 29.787234% 0 20px;
	}
	#primary,
	#secondary {
		overflow: hidden;
		width: 23.40425535% /* 200px / 940px */ 
	}
	
	#site-description,
	#site-title, #site-info {
		width:95% /* 700px / 940px */
	}
	#headerads{
	width:100%}

	#footer-widget-area .widget-area,
	#site-generator,
     {  
		width: 23.40425535% /* 200px / 940px */ 
	}

} /* This belongs here. It goes to @media only screen and (min-width: 481px) and (max-width: 1024px) */

@media screen and (max-width: 660px) {
	#wrapper {
		margin: 0 auto;
		width: 96%;
		padding: 0 2%;
	}
	#middlebar{
	margin:18px auto;
	width:96%;}
	#access,
	#access .menu-header,
	div.menu,
	#branding,
	#main,
	#footer {
		margin: 0 auto;
		width: 100%;
	}
	#footerinfo{max-width:100%}
	#colophon{
	width:96%;
	margin:0 2%;
	}
	#footer-widget-area {
    background:url(../../style/csshome/images/footerbg.png)repeat scroll left center ;
    }
    #footer-widget-area .widget-area{
    margin:10px auto;
    float:none;
    width:90%;
    }
    #footer-widget-area #fourth{
    margin:0 auto;
    }
     #footer-widget-area #first{
     width:90%;
     margin:10px auto;}
	div#site-title{
	margin-bottom:15px;
	width:100%;
    margin:0 auto;
	}
	#headerads{
	display:none;
	}
	#branding  {
	overflow:hidden;
	width:100%;
	}
	
	#site-title {
		width: 100%;
	}

	#container {
		float: left;
		max-width: 100%;
	}
	
	#content {
		width: 96%;
		margin: 0 2%;
	}
	
	#primary,
	#secondary {
		float: left;
		width: 96%;
		margin: 0 2%;
	}
	#secondary {
		clear: left;
	}
	
	 #site-info,#site-generator{
			float: left;
		width: 96%;
		padding: 0;
		margin: 0 2%;
	}
div#site-titlemono{
width:100%;
margin:0 auto;
}
div#site-titlemono #site-title,
div#site-titlemono #site-description{
margin:0 auto;
width:100%;}
	 #site-description, #site-title {
	 text-align:center;
	 width:100%;
	 margin:0 auto;
	 }
	#headerads{
	clear: right;
	float: left;
	width:100%;
}
	
	/*
	LAYOUT: Responsive Images
	DESCRIPTION: Responsive.
	*/
	  
	#content img {
		margin: 0;
		height: auto;
		max-width: 100%;
		width: auto;
	}
	
	img, object, embed, #content .wp-caption {
		max-width: 100%;
	}
	
	#content .wp-caption{
		width: 100%;
	}
	
	#content .wp-caption img{
		max-width: 90%;
	}

	#content .alignleft,
	#content img.alignleft {
		display: block;
		float: none;
		margin: 0 auto;
		padding: 0 0 5px;
	}
	#content .alignright,
	#content img.alignright {
		display: block;
		float: none;
		margin: 0px auto;
		padding: 0px 0px 5px 0px;
	}
	#footerinfo{max-width:100%}

} /* @media screen and (max-width: 660px) */


/*
/* We left these here for you incase you needed them. You do not need to add anything for the Videos or Images.
/*
/*
/* Media = iPad orientation: landscape */

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
	
}/* This belongs here. It goes to @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) */

/*--------------------------------------------------------------------------------*/

/* Media = iPad orientation: portrait */

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {

}/* This belongs here. It goes to @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) */

/*--------------------------------------------------------------------------------*/

/* Media = Mobile - iPhone */

@media handheld, only screen and (max-device-width: 480px) {
	iframe, object, embed{
		width: 100%;
		height: auto;
	}
	#content pre {
		font-size: 60%;
		overflow: hidden;
		padding: 1em;
	}
	
	#content code {
		font-size: 50%;
		margin-bottom: 24px;
	}
}/* This belongs here. It goes to @media handheld, only screen and (max-device-width: 480px) */
	
/* Media = Mobile - All Others - orientation:portrait */

@media handheld, only screen and (max-device-width: 480px) and (orientation:portrait) {
	iframe, object, embed{
		width: 100%;
		height: auto;
	}
	
	#content pre {
		font-size: 80%;
		overflow: hidden;
		padding: 1em;
	}

	#content code {
		font-size: 50%;
		margin-bottom: 24px;
	}
}/* @media handheld, only screen and (max-device-width: 480px) and (orientation:portrait) */

/* Media = Mobile - All Others - orientation:landscape */

@media handheld, only screen and (max-device-width: 767px) and (orientation:landscape) {
	iframe, object, embed{
		width: 100%;
		height: auto;
	}
}/* This belongs here. It goes to @media handheld, only screen and (max-device-width: 767px) and (orientation:landscape) */