/* ================================================================ Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-weight: inherit;
   font-style: inherit;
   font-size: 100%;
   font-family: inherit;
   vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
   outline: 0;
}
body {
   line-height: 1;
   color: black;
   background: white;
}
ol, ul {
   list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
   border-collapse: separate;
   border-spacing: 0;
}
/*caption, th, td {
   text-align: left;
   font-weight: normal;
}*/
blockquote:before, blockquote:after,
q:before, q:after {
   content: "";
}
blockquote, q {
   quotes: "" "";
}

textarea, input[type=text] {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}



.Clearfix:before, .Clearfix:after {
	content: " "; 
	display: table; 
}

.Clearfix:after {
	clear: both;
}

/**** GENERAL ****/
body {
	font-size: 1em;
	line-height: 140%;
	font-family: 'Droid Serif', serif;	
	background: url(bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	padding: 10px;
}
a, a:visited {	
	color: #1f506b;	
}
a:hover, a:active, a:focus{ 	
	color: #265e7e;	
	text-decoration: underline;
}
p {
	margin: 0.7em 0;
	font-size: 0.9em;
	line-height: 140%;
}

h3 {
	font-family: 'Oswald', sans-serif;
	font-size: 24px;
	line-height: 128%;			
}
h2 {
	font-family: 'Droid Sans', sans-serif;	font-family: 'Droid Sans', sans-serif;	
	font-size: 16px;
	font-weight: 600;
}
a.Article h3, h2, h1, div.bar {
	text-shadow:         2px 2px 2px rgba(50, 50, 50, 0.35);
}

#Frame {
	width: 1000px;		
	margin: 10px auto;
	padding: 20px 0px 5px 15px;		
	-webkit-box-shadow: 0px 0px 5px 4px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    0px 0px 5px 4px rgba(50, 50, 50, 0.5);
	box-shadow:         0px 0px 5px 4px rgba(50, 50, 50, 0.5);	
	background-color: #fff;	
	min-height: 800px;
	border: 1px solid #000;
}


a.Article, div.headlines {
	width: 298px;
	float: left;	
	color: #fff;
	text-decoration: none;
	padding: 0 10px;	
	height: 360px;
	margin: 0 15px 15px 0;
	font-size: 16px;
}
a.Article:hover, a.Article:focus {
	color: #fff;
}
a.Article div.Preview-Image {
	width: 318px;
	height: 180px;
	margin: 0 -10px 10px -10px;	
	background-repeat:no-repeat;	
	background-position:center; 
	background-size: 333px auto;
	transition: background-size 0.4s ease;		
	text-align: top;	
}
a.Article.robot div.Preview-Image {
	background-image: url('hbo-logo.jpg');
}
a.Article.script div.Preview-Image {
	background-image: url('scripts.jpg');
}
a.Article.letters div.Preview-Image {
	background-image: url('celebrity-crying.jpg');
}
a.Article.singer div.Preview-Image {
	background-image: url('singer.jpg');
}
a.Article.awkward div.Preview-Image {
	background-image: url('awkward.jpg');
}
a.Article.malachi div.Preview-Image {
	background-image: url('malachi.jpg');
}
a.Article.road div.Preview-Image {
	background-image: url('road.jpg');
}

a.Article:hover div.Preview-Image, a.Article:focus div.Preview-Image {
	background-size: 400px auto;
}
a.Article:hover h3, a.Article:focus h3 {
	text-decoration: underline;
}
a.Article div.Preview-Text {
	padding: 10px 10px 0 10px;
}
div.headlines h2 {
	display: block;
	background-color: #ff0080;
	color: white;
	padding: 5px 10px;
	margin: 0 -10px;
	text-transform: uppercase;
}
div.headlines h3 {
	font-size: 17px;
	color: #000;
	margin-top: 15px;	
}
div.headlines h3 span {
	color: #808080;	
}

div.bar {
	background-color: #ff0080;
	font-family: 'Droid Sans', sans-serif;	
	font-size: 20x;
	font-weight: 600;
	text-transform: uppercase;
	color: #fff;
	padding: 6px 10px;
	width: 964px;
	display: block;
	margin-bottom: 15px;
}
div.bar p {
	width: 450px;
	margin: 0;
	padding: 0;
	float: left;
}
div.bar p.secondary {
	float: right;
	text-align: right;
}

#logo {
	height: 246px;
	text-align: center;	
	background: url("mango.png") no-repeat scroll top left;
}
#logo h1 {		
	font-size: 150px;
	margin-top: 115px;
}

div.article-body {
	margin-bottom: 30px;
}
div.article-body p {
	font-size: 1.2em;
	margin-right: 12px;	
	margin-left: 12px;
}
div.article-body p.caption {
	font-size: 0.95em;	
	text-align: center;
	margin-top: 2px;
	font-weight: 700;
	font-family: 'Droid Sans', sans-serif;	
	margin-bottom: 30px;
	color: #808080;
}
div.article-body h1 {
	font-size: 3.2em;
	font-weight: 700;
	margin: 0.3em 10px 0.5em 10px;
	text-align: center;
	text-shadow: none;
	line-height: 125%;
	font-family: 'Oswald', sans-serif;
}
div.article-body img {
	max-width: 980px;
	-webkit-box-shadow: 0px 0px 4px 2px rgba(50, 50, 50, 0.24);
	-moz-box-shadow:    0px 0px 4px 2px rgba(50, 50, 50, 0.24);
	box-shadow:         0px 0px 4px 2px rgba(50, 50, 50, 0.24);		
	margin: 0 auto;
	border: 1px solid #000;
}
div.article-body div.image-wrapper {
	margin: 35px auto 0 auto;	
}
div.article-body p.quote {
	font-size: 1.8em;
	font-weight: 700;
	margin: 1.1em auto 0.5em auto;
	text-align: center;
	text-shadow: none;
	line-height: 125%;
	font-family: 'Oswald', sans-serif;
	width: 80%;
	color: #c05100;
}

ol {
	font-size: 1.2em;
    counter-reset:li; /* Initiate a counter */
    margin: 0 30px 0 13px; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
}
ol > li {
    position:relative; /* Create a positioning context */
    margin:0 0 12px 2em; /* Give each list item a left margin to make room for the numbers */
    padding:4px 8px; /* Add some spacing around the content */
    list-style:none; /* Disable the normal item numbering */
    border-top:2px solid #393043;
    background:#fff;
}
ol > li:before {
    content:counter(li); /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top:-2px;
    left:-2em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2em;
    /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
    margin-right:8px;
    padding:4px;
    border-top:2px solid #393043;
    color:#fff;
    background:#393043;
    font-weight:bold;
    font-family:"Helvetica Neue", Arial, sans-serif;
    text-align:center;
}
li ol,
li ul {margin-top:6px;}
ol ol li:last-child {margin-bottom:0;}


ol.count-backwards
{
    list-style-type:none;
}
ol.count-backwards > li
{
    counter-increment:start-from -1;
}
ol.count-backwards > li:before
{
    content:counter(start-from) ". ";
}



a.back-link {
	margin-left: 10px;
}

.metro1  {
	background-color: #2d6292;
}
.metro2 {
	background-color: #90aa30;
}
.metro3 {
	background-color: #6b4627;
}
.metro4 {
	background-color: #e68700;
}
.metro5 {
	background-color: #c03a00;
}
.metro6 {
	background-color: #815fb0;
}
.metro7 {
	background-color: #526db1;
}
.metro8 {
	background-color: #69003f;
}
.metro9 {
	background-color: #393043;
}