﻿	body {
	  font-family: ubunturegular,Arial,sans-serif;
	  text-align: left;
	}

	h1.page-title {
		color: #333333;
		font-size: 36px;
		line-height: 36px;
		margin-bottom: 15px;
	}
	.tilepageContainer 
	{width:960px; 
	 margin:30px auto; 
	 padding-left:7px}
	.tile_list
	{width:960px; 
	 margin:0 auto; 
	 padding-left:8px} 
	.tile, .linkBox {

		border:1px solid #e2e2d5;
		width:226px; /* the 1px border around the tile makes the actual widthxheight 228x228 */
		height:226px;
		float:left;
		margin:0 10px 10px 0;
		position: relative;
		padding:0;
		cursor: pointer;
	}
	.tile.quote {
		font-style:normal;
		font-family:ubunturegular, sans-serif;
		line-height:normal
	}
	.tile .inner {
		position:absolute;
		top:9px; right:9px; bottom:9px; left:9px;
	 }
	.tile.quote .inner,
	.tile.calendar .inner {
		padding:20px;
		background-color:#f6f6ef;
	}
	.tile p {
		margin:0;
		color:#e11f1f;
		font-size:21px;
		line-height:26px;
	}
	.tile .caption {
		background-color: rgba(40,44,54,.8);
		position: absolute;
		right:0; bottom:0; left:0;
		color:white;
		padding:15px 10px;
		font:13px/16px ubunturegular, sans-serif; /* i know this will be ubuntu.. */
	}

	.tile .attribution {
		font-size:11px;
		color:#999999;
		position: absolute;
		right:20px; bottom:20px; left:20px;
		text-transform: uppercase;
	}
	.tile.video {clear: none !important;}
	.tile .video-play {
		position: absolute;
		top:0; right:0; bottom:0; left:0;
		background-image:url(/images/video-play.png);
	}

	.tile .rollover {
		position: absolute;
		top:0; right:0; bottom:0; left:0;
		background-color: rgb(40,44,54);
		padding:20px;
		/*border:1px solid #e2e2d5;*/
		overflow: hidden;
		display: none;
	}
	.tile.video .rollover,
	.tile.photo .rollover {
		background-color: rgba(40,44,54,.8);
	}
	.tile .rollover b, 
	.tile .rollover strong {
		font-family:ubuntubold;
		font-size:16px;
		line-height: 20px;
		color:#fff;
	}
	.tile .rollover p {
		font-family:ubunturegular;
		margin-top:8px;
		font-size:13px;
		line-height:16px;
		color:#fff;
		width:auto;
	}
	.tile .rollover a {
		font-family:ubuntubold;
		font-size:11px;
		text-transform: uppercase;
		text-decoration: none;
		color:#82bed2;
	}
	.tile .rollover a span {
		font-size:17px;
		color:#82bed2;
		display:inline;
		float:none;
	}
	.tile.video .rollover a,
	.tile.photo .rollover a,
	.tile.infographic .rollover a {
		position:absolute;
		left:20px;
		bottom:20px;
	}
.tile .rollover .moreLink {
font-family: ubuntubold;
font-size: 11px;
text-transform: uppercase;
color: #82bed2;
position: absolute;
bottom: 15px;
cursor: pointer;
}
.tile.quote .rollover {
color: #fff;
font-size: 15px;
line-height: 20px;
}
	a.btn-showmore {
		display:block;
		width:407px;
		height:38px;
		border:1px solid #cccccc;
		border-radius:5px;
		background:url(/images/btn-bg.png) repeat-x;
		color:#1e82b4;
		font-family:ubuntubold;
		margin: 5px auto 15px !important;
		text-decoration: none;
		text-align: center;
		line-height:38px;
		font-size:16px
	}
	.btn-showmore span.arrow {
		background:url(/images/btn-arrow-down.png) top right no-repeat;
		width:auto;
		height:38px;
		display: inline-block;
		padding-right:24px;
	}		
	.linkBoxes
    {width: 960px;
     margin: 0 auto;
     padding-left: 8px}
    .linkBox {height: 95px}
        .linkBox a 
        {margin: 10px;
         display: block;
         padding: 18px !important;
         color: #fff !important;
         font-size: 22px !important}
         .linkBox a:hover {color: #fff !important}
        .linkBox span 
        {font-size: 12px !important;
         display: block;}
         .linkBox.stories a {background: #ed1b24}
         .linkBox.sports a {background: #f69632}
         .linkBox.music a {background: #272d37}
         .linkBox.history a {background: #1e82b4}

	@font-face {
	    font-family: 'UbuntuLight';
	    src: url('/fonts/Ubuntu-L-webfont.eot');
	    src: url('/fonts/Ubuntu-L-webfont.eot?#iefix') format('embedded-opentype'),
	         url('/fonts/Ubuntu-L-webfont.woff') format('woff'),
	         url('/fonts/Ubuntu-L-webfont.ttf') format('truetype'),
	         url('/fonts/Ubuntu-L-webfont.svg#UbuntuLight') format('svg');
	    font-weight: normal;
	    font-style: normal;
	}

	@font-face {
	    font-family: 'UbuntuRegular';
	    src: url('/fonts/Ubuntu-R-webfont.eot');
	    src: url('/fonts/Ubuntu-R-webfont.eot?#iefix') format('embedded-opentype'),
	         url('/fonts/Ubuntu-R-webfont.woff') format('woff'),
	         url('/fonts/Ubuntu-R-webfont.ttf') format('truetype'),
	         url('/fonts/Ubuntu-R-webfont.svg#UbuntuRegular') format('svg');
	    font-weight: normal;
	    font-style: normal;
	}

@font-face {
    font-family: 'UbuntuBold';
    src: url('/fonts/Ubuntu-B-webfont.eot');
    src: url('/fonts/Ubuntu-B-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Ubuntu-B-webfont.woff') format('woff'),
         url('/fonts/Ubuntu-B-webfont.ttf') format('truetype'),
         url('/fonts/Ubuntu-B-webfont.svg#UbuntuBold') format('svg');
    font-weight: normal;
    font-style: normal;

}