/*
 * Greater than 1200px screen size
 * -- app=responsive.css
 */

@media (min-width: 1200px) {
	#content .content-main .span8 {
		width: 740px;
	}
	#comment-container {
		width: 370px;
	}
}


/*
 * Between tablet and 980px screen size
 * -- app=responsive.css
 */
 
@media (min-width: 768px) and (max-width: 979px) {
	#content .content-main .span8 {
		width: 415px;
	}
	#comment-container {
		width: 250px;
	}
	header .header-primary .brand {
		width: 50%;
	}
}


/*
 * Up to tablet screen size
 * -- app=responsive.css
 */

@media (max-width: 979px) {
	header .header-primary .navbar-inner .nav {
		float: none;
		padding: 0 20px 0;
		margin: 0;
		}
		header .header-primary .navbar-inner .nav > li > a {
			margin: 0;
			padding: 5px 0 5px;
			font-size: 14px;
		}
		header .header-primary .navbar-inner .nav > li > a:hover {
			border: none;
		}
		header .header-primary .navbar-inner .nav > li.active > a {
			border: none;
		}
		
	header .header-primary .navbar {
		z-index: 99;
		position: absolute;
		right: 0;
		top: 80px;
		}
		header .header-primary .navbar .navbar-inner {
			background: #F1F2F2;
			position: relative;
			padding: 10px 0;
			margin-top: 15px;
			}
			header .header-primary .navbar .navbar-inner:after {
				content: '';
				border-bottom: 15px solid #F1F2F2;
				border-right: 14px solid transparent;
				border-left: 14px solid transparent;
				display: block;
				position: absolute;
				top: -12px;
				right: 10px;
			}
			
	.title-image .title-details h2,
	.title-image .title-details h2 p {
		font-size: 21px;
	}
	.title-image .title-details h3 {
		font-size: 27px;
	}
	
	#content .content-main .respondent .respondent-thumb, 
	#content .content-main .case-study .case-study-thumb, 
	#content .content-main .commentary .commentary-thumb {
		width: 45px;
		height: 45px;
	}
	#content .content-main .response-inline li:first-child {
		display: block;
	}
	#content .content-main .response-excerpt {
		min-height: 200px;
	}
	#content .content-main .response-author {
		min-height: 240px;
	}
	
	.notes-queries .note h2, 
	.notes-queries .note h2 a {
		font-size: 18px;
		line-height: 24px;
	}
	
	.pressforward .pf-note h4 {
		font-size: 13px;
		line-height: 18px;
	}
			
	footer .pull-right {
		display: none;
	}
	
	.btn.small {
		font-size: 13px;
	}
}
 
@media (max-width: 767px) {
	body {
		padding: 0;
	}
	header {
		padding-left: 15px;
		padding-right: 15px;
		}
		header .header-primary {
			margin-top: 40px;
			}
			header .header-primary .navbar-inner .nav {
				float: none;
				padding: 0 20px 0;
				margin: 0;
				}
				header .header-primary .navbar-inner .nav > li > a {
					margin: 0;
					padding: 5px 0 5px;
					font-size: 14px;
				}
				header .header-primary .navbar-inner .nav > li > a:hover {
					border: none;
				}
				header .header-primary .navbar-inner .nav > li.active > a {
					border: none;
				}
				
			header .header-primary .navbar {
				z-index: 99;
				}
				header .header-primary .navbar .navbar-inner {
					background: #F1F2F2;
					position: relative;
					padding: 10px 0;
					margin-top: 15px;
					}
					header .header-primary .navbar .navbar-inner:after {
						content: '';
						border-bottom: 15px solid #F1F2F2;
						border-right: 14px solid transparent;
						border-left: 14px solid transparent;
						display: block;
						position: absolute;
						top: -12px;
						right: 10px;
					}
				
				
	footer {
		padding: 25px 20px 35px
		}
		footer .pull-right {
			display: none;
		}
		
	.title-image {
		padding-left: 15px;
		padding-right: 15px;
		height: auto;
		}
		.title-image h1 {
			margin-top: 50px;
			font-size: 32px;
		}
		.title-image .arrow {
			margin: 30px auto 0;
		}
		.title-image h1.archive-remixed-header,
		.title-image h1.notes-queries-header {
			margin-top: 75px;
		}
		.title-image h1.three-sixty-header {
			margin-top: 102px;
			}
			.title-image .title-details {
				display: none;
			}
		
	.homepage-main .divider .user-images {
		display: none;
	}
    .postlist .postitem {
        padding: 20px;
    }
	.postlist .postitem img.thumb {
        display: none;3
    }
	.notes-queries {
		padding: 50px 20px;
		}
		.notes-queries .title-area .btn {
			float: none;
			margin-top: 10px;
		}
	
	#content .content-main .span8 {
		width: 100%;
		padding: 15px 20px 55px;
	}
	#content .content-main .span4 {
		padding: 0 20px;
		margin-top: 0;
	}
	#content .content-footer {
		padding: 30px 20px;
		}
		#content .content-footer .footnote-container {
			margin-bottom: 8px;
		}
		#content .content-footer h5 {
			line-height: 30px;
			}
	#content .content-main .respondent, 
	#content .content-main .case-study, 
	#content .content-main .commentary {
		margin-top: 15px;
	}
	
	.commenticonbox {
		display: none;
	}
			
	.notes-queries .note h2, 
	.notes-queries .note h2 a {
		font-size: 24px;
		line-height: 28px;
	}
	
	.pressforward {
		padding: 50px 20px;
		}
		.pressforward .title-area h3 {
			font-size: 36px;
		}
		.pressforward .pf-note h4 {
			font-size: 16px;
			line-height: 21px;
		}
}


/*
 * Up to smartphone screen size
 * -- app=responsive.css
 */
 
@media (max-width: 480px) {

}


/*
 * Retina display screens
 * -- app=responsive.css
 */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	header .header-primary .brand a > span {
		//background-image: url(../images/logo_01@2x.png);
		background-size: 100%;	
	}
	header.three-sixty .header-primary .brand a > span {
		background-image: url(../images/logo_02@2x.png);
		background-size: 100%;
	}
	header.archive-remixed .header-primary .brand a > span {
		background-image: url(../images/logo_03@2x.png);
		background-size: 100%;
	}
}