/*Elements CSS Framework by Ben Henschel*/
/*Mass Reset*/
/*Thanks to Eric for this reset http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */

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, strong, 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: "" "";
}


/*----------------------------------------
Name: global.css
Developed by: Paste Magazine
Date Created: 8-27-09
Last Updated: 8-27-09
Copyright: Paste Media Group llc
----------------------------------------*/

/* Imports
----------------------------------------*/
/* now included via rails */
/* @import url("/stylesheets/v4/reset.css"); */

/* Elements
----------------------------------------*/
body
{
	margin:0;
}

body, td, th, li, p, a {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color:#333;
}

body, td, th, li
{
	font-size:.875em;
	line-height:1.6em;
}

small
{
	font-size: 0.725em; /*10px*/
}

p
{
	margin: 0 0 1em 0;
}

/*--- Link Styles ---*/
a:link, a:visited, .links p a:link, .links p a:visited
{
	color:#9a5f0d;
	font-weight:bold;
	text-decoration:none;
}

a:hover, a:active, .links p a:hover, .links p a:active
{
	color:black;
}

.links a:link, .links a:visited
{
	color:inherit;
	text-decoration:none;
}
.links a:hover, .links a:active
{
	color:#9a5f0d;
}

h1,h2,h3,h4,h5,h6,big
{
	font-family: Georgia, Tahoma, serif;
	color:#333333;
	margin:.825em 0 .5em 0;
	font-weight:bold;
	line-height:1em;
}

h1.top,h2.top,h3.top,h4.top,h5.top,h6.top
{
	margin-top:0;
}

h1
{
	font-size:40px; /*2.85em*/
	margin:.3em 0;
}

h2
{
	font-size: 24px; /*1.715em*/
}

h3
{
	font-size:1.15em;
}

h4
{
	font-size: 0.93em; /*13px*/
	color:white;
	background-color:#333;
	padding:3px 14px;
	border:1px solid white;
	-webkit-border-top-left-radius: 10px;
	-khtml-border-radius-topleft: 10px;
	-moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}
	h4 a:link, h4 a:visited
	{
		color:white;
		text-decoration:none;
	}
		h4 a:hover
		{
			text-decoration:underline;
		}

h5
{
	font-size: 0.93em; /*13px*/
}

h6
{
	font-family: verdana, sans-serif;
	font-size: 11px;
}

ul
{
	margin-left:25px;
	list-style-type:none;
}

ol
{
	margin-left:25px;
}
hr
{
	background-color:white;
	height:1px;
	border:0px dashed #d0d0d0;
	border-top-width:1px;
}

blockquote		{margin: 0 0 18px 18px; color:#666666; font-style: italic;}
big				{font-size:1.3em; line-height:1.3em;}
strong			{font-weight:bold;}
em				{font-style:italic;}
.extra-byline	{font-style:italic;}

nobr, .nobr {white-space: nowrap}

/* Standard Definitions
----------------------------------------*/
.left 		{float:left}
.right 		{float:right}
.clear		{clear:both}
.small		{font-size:.625em}
.large		{font-size:1em}
.soft		{color:#D3D3D3}
.hide		{display:none}
p.last		{margin-bottom:0px}
.overflow	{overflow:visible}
.expandable {display:none} /* js will display on load */
.more		{display:none}
.h			{display:block}
.no-margin	{margin:0px}

.s-box h4
{
	margin:0;
}

/* Global Styles
----------------------------------------*/
	/* Grid System
	---------------------------------------*/
	._row{width:100%;clear:both;overflow:hidden;height:1%}
	._col{float:left; width:100%}
	._1_half{width:49.999%}
	._1_3rd{width:33.333%}
	._2_3rds{width:66.666%}
	._1_4th{width:24.999%}
	._3_4ths{width:74.999%}
	._1_6th{width:16.666%}
	._5_6ths{width:83.333%}
	.uneven{/*keeps col-heights from being evened via js*/}
	
	._col .s-box
	{
		/*  
			This grid uses percentages. To display a percentage sized box, the browser 
			first calculates the percentage and saves the value to "x." It then rounds
			"x" to the nearest whole pixel for display purposes. However, when making
			additional calculations inside that box, it bases those calculations on
			"x" rather than the rounded whole pixel value.
				(eg:You have a 149px box. You place a _2_3rds and a 1_3rd column in
				that box. The browser displays a 99px (rounded from 99.3) column and a
				50px (rounded from 49.6) column. Now, if you tried to float two 25px divs
				inside the 50px column they would actually wrap because the browser
				thinks that the column is actually 49.6px wide.)
			The solution to this is to subtract .2 (# that worked in my tests. Try others) from the right margin of 
			every column's inner container.
		*/ 
		margin:3px 2.8px 3px 3px;
		padding:0;
		width:auto;
	}
	p.pad{padding:0 12px}


	/* Containers
	----------------------------------------*/
	#outer-container
	{
		overflow:hidden; /* needed when using skins with gutter links */
		position:relative;
		clear:left;
		min-width:996px;
		width:auto;
		background:#e9e9e9 url("../../images/skins/default.png") no-repeat scroll top center;
		/*background:white url("../../images/skins/beatles-xbox.jpg") no-repeat scroll top center; */
	}

    /* overflow hidden causes a z-index bug in ff2 that was a problem for an apple ad */

	.noleader #outer-container
	{
/*		overflow:visible;*/
		background:#e9e9e9 url("../../images/skins/default-noleader.jpg") no-repeat scroll top center;
	}
	.superheader #outer-container
	{
		background:#e9e9e9 url("../../images/skins/default-superheader-background.jpg") no-repeat scroll top center;
	}
	#container
	{
		width:996px;
		margin: 0px auto;
		padding-bottom:14px;
		position:relative;
	}

	/* box styles
	----------------------------------------*/
	/*	Reference:
			.box = general purpose box with border
			.s-box = sidebar box for 300px wide content
			.s-widget = sidebar box for full sidebar-width content
			.w-box = full site width box
	*/
	.box, .s-box, .w-box, .comment, #flash-notice, #flash-error{
		position:relative;
		background-color:white;
		border: 1px solid #d0d0d0;
		padding:20px;
		margin-bottom: 14px;
		clear:both;
		overflow:hidden;
		-webkit-border-top-left-radius: 10px;
		-khtml-border-radius-topleft: 10px;
		-moz-border-radius-topleft: 10px;
		border-top-left-radius: 10px;
		height:1%;
	}
		.box.no-pad{padding:0px}
		.box .pad{padding: 20px}
		.w-box
		{
			padding:20px;
			width:954px; /* based on site width of 996px */
		}
		.s-box
		{
			padding:0px;
		}
			.s-box.pad{padding:13px}
			._col .s-box.pad{padding:12px}
		.sub-box
		{
			border:0px solid #d0d0d0;
			border-top-width:3px;
			overflow:hidden;
			height:1%;
		}
			.sub-box h6
			{
				margin:10px 0 0 12px;
			}
		#flash-notice, #flash-error
		{
			-webkit-border-top-left-radius: 0px;
			-khtml-border-radius-topleft: 0px;
			-moz-border-radius-topleft: 0px;
			border-top-left-radius: 0px;
			border-color:white;
			color:white;
			border-style:dashed;
			border-width:2px;
			background-color:#6b1500;
		}
			#flash-notice a, #flash-error a{color:white}
			#flash-notice a:hover, #flash-error a:hover{text-decoration:none; color:#ca9}
	
	
	/* inverse color style
	----------------------------------------*/
	.inverse
	{
		background-color:#333;
		color:#eee;
	}
		.inverse h1, .inverse h2, .inverse h3, .inverse h4, .inverse h5, .inverse h6
		{
			color:#eee;
		}
		.inverse h4
		{
			color:#333;
			background-color:#eee;
			border-color:#333;
		}
		.inverse a:link, .inverse a:visited
		{
			color:#eee;
			font-weight:bold;
			text-decoration:none;
		}
		.inverse a:hover, .inverse a:active
		{
			color:#fff;
			text-decoration:underline;
		}
	
	/* tile list
	-----------------------------------------*/
	ul.tile
	{
		margin:0;
		overflow:hidden;
		padding:0px;
	}
		ul.tile li
		{
			float:left;
			padding:1px;
			font-size: 0.67em;
			line-height: 1.3em;
		}
		ul ul.tile li
		{
			font-size:0.75em;
		}
			ul.tile a
			{
				overflow:hidden; /* cant remember why I added overflow:hidden */
				display:block;
				width:136px;
				height:auto;
				text-align:left;
				padding:5px 10px;
				margin:1px;
				border:1px solid #ffffff;
				color:#333;
				text-decoration:none;
				-webkit-border-radius: 5px;
				-khtml-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
			}
				ul.tile a:hover
				{
					background-color: #f0f0f0;
					border-color: #d0d0d0;
					color:#9a5f0d;
				}
				ul.tile img
				{
					width:100px;
					margin:0 auto 4px auto;
					display:block;
					border:3px double #555;
				}
					ul.tile a:hover img
					{
						border-color: #9a5f0d;
					}


		.tile .no-pad a{
			padding:0px;
		}
		.tile .h
		{
			padding:0;
			margin-bottom:0;
			color:#9a5f0d;
      font-weight: bold;
		}
			.tile a:hover .h
			{
				color:#999;
			}

		ul.tile.slide
		{
			padding:5px 15px;
		}
			ul.tile.slide li
			{
				padding:0;
			}
				ul.tile.slide a
				{
          height:148px;
					width:120px;
					padding:5px;
					text-align: center;
				}
		ul.tile.slide.pad
		{
			padding:17px 27px;
		}
		ul.tile.wide-slide
		{

		}
			ul.tile.wide-slide li
			{

			}
				ul.tile.wide-slide a
				{
					width:136px;
					height:97px;
				}
					ul.tile.wide-slide img
					{
						width:130px;
						height:50px;
					}
		ul.tile.stack
		{

		}
			ul.tile.stack li
			{
				float:none;
				border:0px dashed #d0d0d0;
				border-bottom-width:1px;
			}
				ul.tile.stack.top li{border-width:1px 0 0 0}
				ul.tile.stack.bottom li{border-width:0 0 1px 0}
				ul.tile.stack li.last{border-bottom-width:0}
				ul.tile.stack a
				{
					width:auto;
				}
		
	
	/* list of stories (mt entries)
	-----------------------------------------*/
	#entry-list {}
		/* without synopsis */
		#entry-list.condensed
		{
			padding-top: 0;
		}
			#entry-list.condensed h3
			{
				margin-top: 0.3em;
			}
			#entry-list.condensed .cell
			{
				clear:both;
				padding: 4px;
				overflow: hidden;
				border:0px dashed #d0d0d0;
				border-top-width:1px;
			}
			#entry-list.condensed .cell.first
			{
				border-top-width: 0;
			}
			#entry-list.condensed img.list-thumbnail
			{
				margin: 0 15px 0 0;
				float: left;
			}
			#entry-list.condensed .breadcrumb li, /* preamble */
			#entry-list.condensed .breadcrumb a
			{
				font-family: Verdana,Helvetica,Arial,sans-serif;
				font-weight: normal;
				font-size: 11px;
			}
		
	/* Two Column Layout
	-----------------------------------------*/
	.two-column-layout
	{
		display:block;
		float:left;
		width:46%;
		margin:0 2%;
	}
		.two-column-layout ul
		{
			width:100%;
			margin:0;
		}
			.two-column-layout ul ul
			{
				margin-left:20px;
			}
			ul.two-column-list li
			{
				display:block;
				float:left;
				width:46%;
				margin:0 2%;
			}
				ul.two-column-list ul li
				{
					clear:both;
				}
				
	/* Scaffolding
	-----------------------------------------*/
	
	.scaffold
	{
	}
		.scaffold th
		{
			font-weight: bold;
		}
		.scaffold th,
		.scaffold td {
			padding:4px;
		}
	
	/* Polls
	-----------------------------------------*/
	.poll {
		margin: 20px 0;
		width: 500px;
	}
		.poll-question-mark {
			float: left;
			margin-right: 10px;
		}
		.poll h3 {
			padding-top: 10px;
		}
		.poll .results .choice {
			clear: left;
		}
		.poll .results .bar {
			background-color: #9A5F0D;
			margin-bottom:8px;
			float:left;
		}
		.poll .results .pct {
			float:left;
			margin-left: 4px;
		}
		.poll .winner {
			font-weight: bold;
		}

	/* Photo Albums
	-----------------------------------------*/
	.photos {
		display:block;
		margin-top: 10px;
		overflow:hidden;
		clear:both;
	}	 
		.photo-container {
			float: left;
			display:block;
			overflow:hidden;
			position:relative;
			margin: 0 2px 8px 2px;
			padding:2px 2px 16px 2px;
			font-size: 12px;
			text-align: center;
			width:194px;
			height:194px;
			background:#eee url("../../images/colorbox/gallery-toolbar-bg.gif") repeat-x scroll bottom left;
			border:1px solid #ccc;
			-webkit-border-radius: 3px;
			-khtml-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
		}
		
		.photo {
			display:block;
			border: 1px solid #555;
			display: block;
			margin:0 auto;
		}
		
		.pic-zoom {
			display:block;
			position:absolute;
			bottom:3px;
			left:50%;
			width:35px;
			margin-left:-16px;
		}
		
		.photo .caption {
		}
		
		.replace_photo {
			margin-bottom:4px;
			height:90px;
		}
		.replace_photo .uploadifyQueueItem {
/*			width: 176px;*/
		}
		.replace_photo #photo_imageUploader {
/*			width:110px;*/
			margin: 0 auto;
			display: block;
		}
		
		.photo-credit {
			font-size:0.8em;
			font-style:italic;
			clear:both;
			float:right;
		}
		.photo-caption {
			font-size:1.2em;
			font-weight: bold;
			float: left;
		}
		.photo-description {
		}
		
		.photo-container .footer {
			bottom:1px;
			position:absolute;
			line-height:1.4em;
			font-size:11px;
			width:100%;
		}
		
		.photo-container .footer .right {
			float:right;
			margin-right:5px;
		}
		
		.photo-container .footer .left {
			float:left;
			margin-left:3px;
		}
		
		.photo-container .footer a {
			color:#222;
		}
		
/* mplayer */
.mplayer {
	background: url("../../images/P_icon.png") no-repeat;
  bottom: 8px;
  height: 30px;
  position: absolute;
  right: 16px;
  width: 30px;
}
.mplayer-wrap {
  position: relative;
}
#lead-story .mplayer-wrap {
  float: left;
  height: 306px;
  margin-right: 15px;
  width: 306px;
}
#lead-story .mplayer {
  right: 8px;
}


#outer-container
{
	padding:30px;
	background:white;
	min-width:0;
	overflow:visible;
}
#container
{
	margin:0;
	width:auto;
}
#content
{
	border:none;
	padding:0;
	overflow:visible;
}
img
{
	border:0;
}

#leaderboard, #nav-wrapper, #header-ad, #header-subs, #breadcrumb, #byline img, #article-tools, #prevnext-nav, #related, #sidebar, #comments, .article-bar, .w-box, .s-box
{
	display:none;
}

#header
{
	margin-bottom:20px;
}