styles.css

/*Style sheet for EYU main page*/
/*By Abhimat Gautam*/


/*Reset*/

* {
	margin: 0;
	padding: 0;
}


/*Typography*/

body {
	color: #444444;
	background: #ffffff;
	font-family: 'Source Sans Pro', Verdana, Sans-Serif;
	font-size: 100%;
	line-height: 1.5;
	font-weight: 400;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern" on;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
/*	font-family: Futura, 'Century Gothic', AppleGothic, sans-serif;*/
	font-family: 'Source Sans Pro', Verdana, Sans-Serif;
	font-weight: 600;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern" on;
}

h1, h2, .h1, .h2 {
	line-height: 0.95;
	margin-top: .5em;
}

h1, .h1 {
	font-weight: 700;
	font-size: 24px;
}

h1 em {
	font-weight: 700;
	font-size: 18px;
}

h2, .h2 {
	font-weight: 600;
	font-size: 18px;
}

h3, .h3 {
	font-weight: 600;
	font-size: 16px;
}

h4, .h4 {
	font-weight: 600;
	font-size: 16px;
}

h1+h2 { margin-top: 0; }

p, .p, ul, ol, table {
	font-size: 16px;
}

small, .small {
	font-size: 14px;
}

semibold, .semibold {
	font-weight: 600;
}

strong, .strong {
	font-weight: 700;
}

ultrabold, .ultrabold {
	font-weight: 900;
}

imagecaption, .imagecaption {
	font-size: 14px;
}

p, ul, ol, table {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

@media screen and (min-width: 480px) {
	h1, .h1 { font-size: 42px; }
	h2, .h2 { font-size: 26px; }
	h3, .h3 { font-size: 22px; }
    h4, .h4 { font-size: 20px; }
	p, .p, ul, ol, table { font-size: 20px;}
	small, .small { font-size: 16px;}
	imagecaption, .imagecaption { font-size: 16px;}
}	

@media screen and (min-width: 640px) {
	h1, .h1 { font-size: 54px; }
	h2, .h2 { font-size: 28px; } 
	h3, .h3 { font-size: 24px; }
    h4, .h4 { font-size: 20px; }
}

/*Figure Styles*/

figure {
	margin: 0 0 1.5em;
}

@media screen and (min-width: 640px) {
	.pull-left {
		float: left;
		max-width: 50%;
		margin: 0 1em 1.5em 0;
		
		left: 50%;
	}
	
	.pull-right {
		float: right;
		max-width: 50%;
		margin: 0 0 1.5em 1em;

		right:50%
	}

	/*header figure.float {
		float: right;
		padding: 7px;
		max-width: 50%;
		margin-left: 1em;
	}*/
}

figure.bleed {
	margin-right: -10%;
	margin-left: -10%;
}

figure img {
	max-width: 100%;
	margin: 0;
}

figcaption {
	padding-top: 0.5em;
	margin-left: 1em;
	font-style: italic;
    font-family: 'Source Sans Pro', Verdana, Sans-Serif;
	font-weight: 300;
	font-size: 14px;
}

.bleed figcaption {
	padding-right: 8%;
	padding-left: 8%;
}

figure.border {
	border:1px solid #000;
}

figure.bleed {
	margin-right: -25%;
	margin-left: -25%;
}

/*Header Styles*/

header {
	width: 90%;
	padding: 2em 5% 0;
	max-width: 64em;
	margin: 0 auto;
	overflow: hidden;
	text-align: center;
}

header:after {
	clear: both;
	content: '.';
	display: block;
	height: 0;
	visibility: hidden;
}

@media screen and (min-width: 720px) {
	header {
		display: table;
		height: 500px;
		position: relative;
	}
	
	.logo-panel {
		width: 500px;
		float: left;
		max-width: 50%;
		margin: 0 0em 0em 0;
		
		height: 100%;
		
		position: absolute;
		display: table;
	}
	
	.logo-container {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	
	.info-panel {
		float: right;
		margin: 0 0em 0em 0;
		height: 100%;
		width: 50%;
		/*line-height: 100px;
		text-align: center;*/
		
		left: 50%;
		position: absolute;
		display: table;
	}
	
	.info-text {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		
		/*display: inline-block;
		vertical-align: middle;

		line-height: normal;*/
	}

	/*header figure.float {
		float: right;
		padding: 7px;
		max-width: 50%;
		margin-left: 1em;
	}*/
}

header h1 {
	padding-bottom: 0.1em;
}

header h1, header p {
	margin: 0;
}

header a, a.block-title {
	color: #444444;
}

a.block-title:hover {
	text-decoration: none;
	color: #009999;
}

header a:hover {
	/*text-decoration: none;*/
}

header hr {
	width: 40%;
	margin: 1em auto;
	height: 2px;
	border: 0 none;
	background-color: #DDD;
}

/*Navbar*/

ul.pages {
	list-style: none;
	padding-bottom: 0em;
}

ul.pages > li {
	display: inline-block;
	margin-right: 0.5em;
	margin-left: 0.5em;
	height: 1em;
	line-height: 1em;
	position: relative;
}

ul.pages li a {
	display: block;
}


/*Content Styles*/

.wrap {
	width: 90%;
	padding: 0 5%;
	max-width: 42em;
	margin: 0 auto;
	overflow: hidden;
}
article {
	margin-top: 2em;
}

.blocks img {
	max-width: 100%;
	height: auto;
	
	margin-top: 1em;
	margin-bottom: 0.5em;
		
	/*Centering the image*/
	display: block;
	margin-left: auto;
	margin-right: auto;
	
	/*Rounding the corners*/
	border-radius: 0px;
}

.block img {
	max-width: 85%;
	height: auto;
}

.blocks imagecaption {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

a {
	color: #009999;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.block h2 {
	text-align: center;
    margin-top: 1em;
	margin-bottom: 0em;
}

.block h3 {
	text-align: center;
	margin-top: 1em;
	margin-bottom: 0em;
}

.block ul, .block ol {
	margin-left: 2em;
}

.block ul.pages {
	margin-left: 0;
}

.block ul ul, .block ul ol, .block ol ul, .block ol ol {
	margin-top: 0;
}

.block footer ul, .block footer ol {
	margin: 0;
}

.block table {
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse
}

.block table td, th {
	padding: 0.5em;
}

.block table td, th {
	border: 1px solid #ccc;
}

.block table td strong {
	font-weight: 600;
}

.block hr {
	width: 10%;
	margin: 1em auto;
	height: 2px;
	border: 0 none;
	background-color: #DDD;
}

.quote blockquote {
	padding: 0;
	border: none;
}

.quote .source {
	text-align: right;
	font-style: normal;
}

.block footer {
	padding: 0;
	margin-top: 1em;
	color: #aaa;
	font-style: italic;
	float: right;
}

.block footer a {
	color: #aaa;
}

.block footer a:hover {
	color: #999;
}

.block footer .source {
	float: right;
	margin-right: 0;
	font-style: italic;
}

.block footer ul li {
	display: inline-block;
	margin-left: 1em;
}

.tags {
	margin-top: 1em;
}

.pagination {
	margin-top: 4em;
	text-align: center;
	line-height: 3em;
}

.pagination:after {
	clear: both;
	content: '.';
	display: block;
	height: 0;
	visibility: hidden;
}

.pagination a {
	display: block;
	height: 3em;
	padding: 0 1em;
	border-radius: 0.25em;
}

.pagination a:hover {
	background: #eee;
	text-decoration: none;
}

.pagination .previous {
	float: left;
}

.pagination .next {
	float: right;
}

footer.wrap {
	padding-top: 2em;
	padding-bottom: 2em;
}

/*Video Styles*/

.video-container {
    width: 100%;
	max-width: 1280px;
	margin-left: auto;
    margin-right: auto;
	
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0px;
	height: 0;	
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*Sponsor Styles*/

table.sponsor-first {
	width: 100%;
	/*margin: 0em;*/
}

table.sponsor {
	width: 100%;
	margin: 0em;
}

table.sponsor tr, table.sponsor-first tr {
	margin.bottom = 0em;
}

table.sponsor td, table.sponsor-first td {
	margin.bottom = 0em;
	vertical-align: middle;
	border: 1px;
	width: 50%;
}

table.sponsor td.full, table.sponsor-first td.full {
	margin.bottom = 0em;
	vertical-align: middle;
	border: 1px;
	width: 100%;
}

table.sponsor td h3, table.sponsor-first td h3, h4 {
	text-align: center;
	margin: 0em;
}

.block h3.emptySponsor, h4.emptySponsor {
	color: #DDD;
}