/* Article Layout */

/*
Original Fonts:
---------------
http://www.typography.com/
headers: Forza (un-released condensed version)
body: Gotham Rounded
*/


/* TYPOGRAPHY
----------------------------------- */
/* still experimenting with this
@font-face {
    font-family: 'ArimoRegular';
    src: url('../fonts/arimo/Arimo-Regular-Latin-webfont.eot');
         url('../fonts/arimo/Arimo-Regular-Latin-webfont.woff') format('woff'),
         url('../fonts/arimo/Arimo-Regular-Latin-webfont.ttf') format('truetype'),
         url('../fonts/arimo/Arimo-Regular-Latin-webfont.svg#ArimoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/

body
{color: #000;
font: 14px/18px "Arimo", "ArimoBold", Verdana, Arial, sans-serif;
font-weight: bold;}

header * {margin: 0;}

h1, h2, h3, h4, h5 {font-weight: normal;}

h1
{font-family: Oswald, "Helvetica Narrow", "Arial Narrow", sans-serif;
font-size: 55px;
letter-spacing: -4px;
line-height: 45px;}

h1:first-letter {letter-spacing: -6px;}

h2 {}
h3 {}
h4 {}
h5 {}

header .by-line
{text-shadow: #000 0 0 0; /* make text appear a bit bolder */
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;}

figcaption {}

sub, sup
{line-height: 1;
height: 0;
position: relative;}

sub {vertical-align: bottom;}
sup {vertical-align: top;}


/* PAGE LAYOUT 
----------------------------------- */
body
{-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 48px;
margin: 0 auto;
position: relative;}

body.horizontal {width: 1024px;}
body.vertical {width: 768px;}

/* HTML5 Browser compatibility ---- */
article, aside, canvas, figcaption, figure, footer, header, hgroup, menu, nav, output, progress, section, video {display: block;}

/* CLEARED ELEMENTS ---- */
article:after, aside:after, figcaption:after, figure:after, footer:after, header:after, hgroup:after, menu:after, nav:after, output:after, progress:after, section:after, video:after
{content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}

/* PAGE ---- */
.page-wrapper {}

.page-header {text-align: right;}

.page-body
{border: 2px solid #000;
border-top: none;
padding: 0 22px 10px 22px;}

/* NAVIGATION ---- */
nav.orientation
{text-align: center;
width: 90%;
position: absolute;
top: 6px;}

	nav.orientation li
	{cursor: pointer;
	text-indent: -9000px;
	vertical-align: middle;
	display: inline-block;
	margin: 0 8px;}
	
		nav.orientation li a {display: block;}
	
	.horizontal-view, .vertical-view {border: 1px solid #939598;}
	
	.horizontal-view
	{background: url(../images/horizontal.png) no-repeat;
	width: 35px;
	height: 26px;}
	
	.vertical-view
	{background: url(../images/vertical.png) no-repeat;
	width: 26px;
	height: 35px;}
	
	.previous-page, .next-page {background: url(../images/arrows.png) no-repeat;}
	.previous-page {background-position: 0 -30px;}
	.next-page {background-position: 0 0;}
	
		.previous-page, .previous-page a, .next-page, .next-page a
		{width: 27px;
		height: 20px;}


/* ARTICLES 
----------------------------------- */
.article-header {margin-bottom: 27px;}

article {display: table;}

aside, article .main
{display: table-cell;
vertical-align: top;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;}

/* horizontal */
.horizontal article aside:first-child,
.horizontal article .main:first-child
{width: 38.4%;
padding-right: 30px;}

.horizontal article aside:last-child,
.horizontal article .main:last-child
{padding-left: 55px;}

/* vertical */
.vertical article aside:first-child,
.vertical article .main:first-child
{width: 54%;
padding-right: 20px;}

.vertical article aside:last-child,
.vertical article .main:last-child
{padding-left: 20px;}

.vertical.from-the-editor aside:after
{content: ".";
background: url(../images/rule-left-to-right.png) repeat-x;
text-indent: -9000px;
display: block;
height: 28px;
margin: 60px auto 0 auto;
visibility: visible;}

/* common */
article aside:last-child, article .main:last-child {border-left: 1px dotted #777;}

aside *:first-child, .main *:first-child {margin-top: 0;}
aside *:last-child, .main *:last-child {margin-bottom: 0;}

aside img
{display: block;
margin: 0 auto;}

aside header {margin-bottom: 46px;}

	aside header h1
	{margin-left: -3px;
	margin-bottom: 8px;}

img.cover
{-moz-box-shadow: -5px 5px 12px #666;
-webkit-box-shadow: -5px 5px 12px #666;
box-shadow: -5px 5px 8px #666;
position: relative;
left: -2px;}

/* signatures */
.signature {text-indent: -9000px;}

.chris-anderson
{background: url(../images/sig-chris-anderson.png) no-repeat;
height: 75px;}

/* FROM THE EDITOR ---- */
.from-the-editor .page-header
{background: url(../images/hdr-swoosh.png) no-repeat;
height: 90px;}

	.from-the-editor .page-header .logo
	{background: url(../images/hdr-logo.png) no-repeat top right;
	text-indent: -9000px;
	text-align: center;
	width: 159px;
	height: 90px;
	float: right;}
	
	.vertical.from-the-editor .page-header p.logo {height: 71px;}

.from-the-editor .article-header
{border-bottom: 4px solid #000;
color: #939598;
text-align: right;
padding: 8px 0 22px 0;
position: relative;}

	.from-the-editor .article-header h2
	{background: #FFF;
	font-size: 15px;
	display: inline-block;
	padding-left: 20px;
	position: relative;
	z-index: 5;}
	
		.from-the-editor .article-header:before
		{content: ".";
		border-bottom: 1px dotted #939598;
		color: #FFF;
		display: block;
		height: 0;
		z-index: 1;
		position: absolute;
		top: 17px;
		left: 0;
		width: 100%;}

.from-the-editor article {padding: 12px;}

/* FEATURE ARTICLE ---- */
.feature .page-header
{background: #000;
color: #FFF;
padding: 20px;}


/* UTILITY 
----------------------------------- */
.inactive {opacity: .2;}

.inactive, .inactive a {cursor: default !important;}


/* GENERAL 
----------------------------------- */
a img, iframe {border: none;}

img {max-width: 100%;}

/* FORMS ---- */
input, textarea, select {margin: 0;}

input[type="text"], input[type="password"], textarea
{padding: 1px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;}

textarea {overflow: auto;}

/* LISTS ---- */
header ul, nav ul, footer ul
{list-style-type: none;
padding: 0;
margin: 0;}

/* breadcrumbs */
.breadcrumbs li {display: inline-block;}

.breadcrumbs li:after
{content: " / / ";
color: #FFF;
display: inline-block;}

/* TABLES (tabular data) ---- */
table
{border-collapse: collapse;
width: 100%;}

thead {display: table-header-group;}
tfoot {display: table-footer-group;} 

th {align: left;}