/* Bigger Better */
#header,
#footer {background-color:#575757;}
span.gold,
span.white {font-weight:bold;}
.gold {color:#ffc907;}
p {font-family:"Helvetica Neue",Helvetica,sans-serif; line-height:22px; margin-bottom: 0;}
p.excerpt {font-family:Georgia,sans-serif; line-height:28px;}
p.excerpt.small {font-size:23px;text-align:right; line-height:28px;}
p.excerpt.large {font-size:30px; line-height:32px;}
p.fact {color:#fdebad;}
h4 { margin: 1em 0 1.5em 0; }
#peoples-choice {
	border-bottom:1px solid #CCC;
	border-top:1px solid #CCC;
	padding-bottom:2em;
	margin-bottom:1em;
	padding-top:2em;
	margin-top:1em;
}
/*
 * Intro
 */
.intro {

	background-repeat:no-repeat;
	background-position:top center;
	min-height:650px;
}
.intro #number {
	font-size:170px;
	font-family:"Arial Black",Arial;
	color:#FFF;
	line-height:1.1em;
	text-align:center;
}
.intro #better {
	color:#FFF;
	font-size:38px;
	margin-top:50px;
	line-height:1.1em;
}

.section {
	padding-top:40px;
	padding-bottom:40px;
}
.section.first {
	background-color:rgba(38,41,46,.84);
	color:#FFF;
	margin-top:-300px;
	padding-top:15px;
}
.ie7 .section.first,
.ie8 .section.first {
	-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D626292E,endColorstr=#D626292E);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D626292E,endColorstr=#D626292E);
}
.container.black {
	background-color:#000;
	color:#FFF;
}
.row.white {
	padding-top:5em;
	padding-bottom:5em;
	background-color:#FFF;
	color:#333;
	margin-top: 3em;
	margin-bottom: 3em;
}
.section p.excerpt {
	color:#e8ac08;
}
.section h3 {
	font-size:25px;
	font-weight:200;
	line-height:1em;
}
.photo {background-color:#333333;;color:#FFF;}
.photo h4 {font-size:16px;font-weight:inherit;font-weight:bold;}
.photo p.caption {font-size:13px;}

/* RGraph styles */
#sats_canvaswrap, #enrollment_canvaswrap { margin-left: 20px; float: left; overflow: hidden; background-size: 100% auto; background-repeat: no-repeat; }
#sats_canvaswrap { width: 780px; }
#enrollment_canvaswrap { width: 700px; }

canvas#line1, canvas#line2 { position: relative; }
.gradientwrap { position: relative; }
img#sats_gradient, img#enrollment_gradient { display: none; position: absolute; top: 0; left: 0; }



@media only screen and (max-width: 979px) {
	body { overflow-x: hidden; }
	canvas { display: none; }

	.container.black,
	.container.photo {
		padding-left: 20px;
		margin-left: -20px;
	}
}

/* Portrait tablet to landscape and desktop */
@media only screen and
(min-width: 768px) 
and (max-width: 979px) {
	
	/* remove stray .container below #header */
	#header+.container {
		display: none;
	}
	
	/* row/span12 reset to 750px instead of 967px */	
	.container, .container .row, .container, .container.wide > .row {
		width: 750px;
	}
	.container .row .span12 {
		width: 730px;	
	}
	.container .row .span12 .row {
		width: 729px;	
	}
	.container .row.section .span12 {
		margin-left: 0;	
	}
	
	/* eliminate offsets; all .spans in this viewport size should not have an offset */
	.offset1, .offset2, .offset4 {
		margin-left: 0;	
	}
	
	/* reset .spans to be the full width of the row */
	.row {
		margin-left: 0;	
	}
	.row.section .span2, .row.section .span3, .row.section .span4, .row.section .span7, .row.section .span8, .first, .first .span10 {
		width: 710px;	
	}
	
	/* intro content */
	#number, #better {
		width: 710px;
		text-align: center;
	}
	
	/* top 10 universities table reset */
	.span4.offset1 {
		margin-left: 20px;	
	}
	
	/* captions and excerpts */
	p.excerpt {
		width: 469px;	
		float: left;
		margin-top: 0;
	}
		p.excerpt.small {
			text-align: left;	
		}
	p.caption {
		width: 220px !important;
		margin-left: 20px;
		float: left;
		clear: right;
		margin-bottom: 40px;
	}
	#peoples-choice {
		margin-top: 40px;	
	}
	
	/* people's choice specific styles */
	#peoples-choice .span3 {
		width: 220px;	
	}
	
	/* graphs */
	#enrollment_canvaswrap {
		width: 469px;	
		height: 361px;
	}
	#sats_canvaswrap {
		width: 709px;	
		height: 416px;
	}
	.gradientwrap, #line1, #line2 {
		display: none;	
	}
	
	/* under video caption */
	.photo .span3 {
		width: 710px;	
	}
	.span3 p.caption {
		margin-left: 0;
		width: 100% !important;	
	}
	.span3 h4 { 
		margin: 1em 0 0;	
	}
	
		
}


/* Landscape phone to portrait tablet */
@media only screen and (max-width: 767px) {

	.container.black,
	.container.photo {
		padding-right: 20px;
	}

	/* row/span12 reset to 100% instead of 967px */
	.container, .container .row, .container, .container.wide > .row {
		width: 100%;
	}
	.container .row .span12, .container .row .span10 {
		width: 92%;	
	}
	.container .row .span12 .row, .container .row .span10 .section .span10 {
		width: 100%;	
	}
	
	/* eliminate offsets; all .spans in this viewport size should not have an offset */
	.offset1, .offset2, .offset4 {
		margin-left: 0;	
	}
	
	/* reset .spans to be the full width of the row */
	.row {
		margin-left: 0;	
	}
	.row.section .span2, .row.section .span3, .row.section .span4, .row.section .span7, .row.section .span8, .first, .first .span10 {
		width: 100%;
		margin-left: 0;
	}
	
	/* intro content */
	
	.intro {
		min-height: 300px;
		background-size: 767px 389px;	
	}
	.intro .row .span12 {
		width: 100%;
		margin-left: 0;
	}
	#number, #better {
		width: 100%;
		text-align: center;	
	}
		#number {
			font-size: 80px !important;	
			margin-top: 15px !important;
			font-family: Helvetica, Arial, sans-serif;
			font-weight: 900;
		}
		#better {
			font-size: 25px !important;	
			margin-top: 5px !important;
		}
	
	/* first section styles */
	.container .row .span10.offset1 {
		width: 100%;	
	}
	.section.first {
		margin-top: -120px;
		padding-top: 0;
		width: 100%;
	}
	.first .span10 p, .first .span10 h3 {
		width: 88%;
		margin: auto;	
	}
	.first p {
		padding-top: 20px;	
	}
	
	/* Changing the Subject to Top 10 chart changes */
	.section .span12 {
		width: 88% !important;	
	}
	
	/* top 10 universities table reset */
	.span4.offset1 {
		margin-left: 20px;	
	}
	
	/* Black container styles (because some sections are not wrapped in extra .span12's, we need to compromise and alter the p and header tags) */
	.container.wide.black .section .span12 {
		width: 100% !important;	
	}
	.container.wide.black p, .container.wide.black h3 {
		margin: auto;
		width: 88%;
	}
	.container.wide.black p {
		padding-top: 20px;	
	}
	.container.wide.black .section .span12 {
		margin-left: 0;	
	}
	
	/* captions and excerpts */
	
	p.excerpt {
		width: 100%;
	}
		p.excerpt.small {
			text-align: left;	
		}
	p.caption {
		width: 100%;
		margin-bottom: 0 !important;
	}
	#peoples-choice {
		margin-top: 40px;	
	}
	
	/* people's choice specific styles */
	#peoples-choice .span3 {
		width: 100%;	
	}
	
	/* SATs specific styles */
	.row.white {
		padding-top: 20px;
		padding-bottom: 20px;
	}
	
	/* graphs */
	#enrollment_canvaswrap {
		width: 280px;	
		height: 216px;/*
		background: url('/wp-content/blogs.dir/4/files/2015/05/bigger-comparison11.jpg') center center no-repeat !important;
		background-size: 280px 216px !important;*/
		margin-left: 0 !important;
	}
	#sats_canvaswrap {
		width: 260px;	
		height: 152px;/*
		background: url('/wp-content/blogs.dir/4/files/2015/05/bigger-stats1.jpg') center center no-repeat !important;
		background-size: 260px 152px !important;*/
	}
	.gradientwrap, #line1, #line2 {
		display: none;	
	}
	
	/* under video caption */
	.row.photo {
		width: 88% !important;
	}
	.row.photo .span3, .row.photo .span9 {
		width: 100%;	
		margin-left: 0;
	}
	iframe {
		width: 100% !important;
		height: 250px !important;	
	}
	.photo .span3 {
		width: 100%;	
	}
	.span3 p.caption {
		margin-left: 0;
		width: 100% !important;	
	}
	.span3 h4 { 
		margin: 1em 0 0;	
	}
	
	
	/* Header modifications */
	#story_nav .span12 {
		width: 94%;	
	}
	#story_nav .span12 .row {
		width: 100%;	
	}
	
	/* Footer modifications */
	#footer_navigation .span12 {
		margin-left: 0;	
	}
}
    

/* Landscape phones and down */
@media only screen and (max-width: 480px) {
}





/** RESPONSIVE HEADER/FOOTER STYLES **/
@media (max-width: 979px) {
	/* Header */
	#header { }
	#header>.row { width: 750px; margin: auto; }
	#header .title { width: 162px; margin-right: 40px; }
	#header .description { display: none; }
	
	#footer > .container.wide > .row,
	.header_stories > .row { width: 767px !important; }
	.header_stories .span12, #footer .span12 { width: 724px; }
	.header_stories .span3, #footer .span3 { width: 166px; }
	.header_stories .span2, #footer .span2 { width: 104px; }
	
	#footer_stories>div, #footer_navigation>div { margin-left: 15px; }
	#footer_stories { padding-top: 10px; }
}

/* Portrait tablet to landscape and desktop */
@media only screen and
(min-width: 768px) 
and (max-width: 979px) {
	
	/* Header */
	#story_nav .span12 .row {
		width: 750px !important;
		margin-left: -20px;	
	}
	
	#header .row {
		width: 750px !important;	
	}
	#body_content .description {
		display: none;	
	}
	#story_nav .span3, #footer .span3 {
		width: 166px;	
	}

	/* Footer */
	#footer_navigation .span12 {
		width: 750px;
		margin-left: 0;
	}
	#footer_navigation .span12 .row {
		width: 750px;	
		margin-left: 0;
	}
	
	#footer_stories, #footer_navigation {
		width: 750px !important;	
	}
	
	#footer_stories .span12 {
		width: 720px;	
	}
	
	
	.header_stories .bottom li,
	.footer_stories.bottom li { height: 170px; }
	
	#footer_navigation ul li {margin-left:14px;}
	#footer_navigation ul li a {font-size:13px;}
	
		
}		

/* Landscape phone to portrait tablet */
@media only screen and (max-width: 767px) {
	
	/* Header */
	#story_nav .span12 .row {
		width: 100% !important;
		margin-left: -20px;
	}
	
	#story_nav .span3, #footer_stories .span3 {
		width: 128px;	
		margin-bottom: 20px;
		display: inline-block;
		float: none;
		margin-bottom: 20px;
		vertical-align: top;
	}
	
	#header .row {
		width: 100%;	
	}
	#header .span12 {
		width: 315px !important;	
		margin-left: 0;
	}
		body.subpage #header .span12 {
			margin-left: 20px !important;	
		}
	
	#header .title {
		width: 125px;
		background-size: 125px 19px;
		left: 45px;
	}
	#header .issue {
		width: 85px;
		font-size: 10px;
		letter-spacing: 1.1px;
		padding-top: 20px;
		margin-left: 45px;
	}
	#body_content .description {
		display: none;	
	}
	#header .toggle_story_nav {
		margin-left: 10px;
		left: 0;	
	}


	/* Header/Footer story thumbnails */
	.header_stories { margin-left: -20px; padding-right: 20px; }
	.header_stories>.row { margin-left: 20px !important; }
	.header_stories .thumbnails, .footer_stories .thumbnails { margin-left: -20px; }
	.header_stories .thumbnails { margin-bottom: 0; }
	.footer_stories { padding: 30px 0 0 0; }
	.footer_stories .span3, 
	.footer_stories .span2, 
	.header_stories .span3, 
	.header_stories .span2 { width: 130px !important; height: 200px !important; overflow: hidden; margin-bottom: 5px; }
	.header_stories .title, .footer_stories .title { margin-left: 0 !important; font-size: 13px !important; line-height: 15px !important; }
	.footer_stories a span.subtitle_text, .header_stories a span.subtitle_text { padding-top: 5px; }
	.header_stories .row a .subtitle_text, 
	.header_stories .row a .title_colon,
	.footer_stories a span.subtitle_text, 
	.footer_stories a span.title_colon { display: none; }

	.header_stories .span12, 
	#footer .span12 { width: 300px !important; }
	
	.header_stories > .row { width: 100% !important; }

	/* Footer */
	#footer { }
	#footer > .container { margin-left: -20px; padding-right: 0; }
	#footer > .container.wide > .row { margin-left: 20px; width: 300px !important; }

	#footer_navigation {
		width: 100% !important;	
	}
	.footer_stories { margin-left: 20px; width: 280px !important; }
	.footer_stories .span12, #footer_navigation .span12 {
		width: 93%;
	}
	#footer_navigation .span12 .row {
		width: 93%;	
	}
	#footer_navigation h2.widgettitle {
		margin-bottom: 5px !important;	
	}
	.widget, .textwidget {
		margin-bottom: 25px !important;	
	}
	
	#issue-carousel .item .issue-title { font-size: 18px; }
	#issue-carousel .carousel-control { font-size: 12px; }
	#issue-carousel .carousel-control, 
	#issue-carousel .carousel-control.left .arrow,
	#issue-carousel .carousel-control.right .arrow { line-height: 30px; }

	#issue-carousel .thumbnails { width: 300px !important; }
	
	#footer_navigation ul { padding-top: 10px; }
	#footer_navigation ul li { display: inline; width: 100%; margin-left: 0; }
	
	#footer_navigation .span9 { width: 92% !important; }
}


#footer #footer_hr { display: none; }