/* 	- - - Color References - - -
	color: #ED1B24; PopSci MG
	color: #ED1B24; Popular Science
	color: #AB1700; Toolmonger
	color: #F05423; Instructables
	color: #ED1B24; PopSci dot com
	color: #666666; 
	color: #000000;
*/

/* -- Tags -- */
html, body  {
	font: 100% Arial, Helvetica, sans-serif; 
	background: #666;
	margin: 0; 
	padding: 0;
	text-align: right; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #666;
}


/* -- classes -- */

	/* -- Tables -- */
	.DataTable { width: 100%; border: none; border-collapse: collapse; border-spacing: 0; }
	.DataTable td #alt { background-color:#666; }
	.DataTable tr { background-color:#FFF; }
	.DataTable td { padding: 0px 0; }
	
	/* -- Lists -- */
	.DictList { width: 90%; margin: 3em auto; font-color: red }
	.DictList dt { font-weight: bold; color: #666; width: 150px; border-bottom: 1px dotted #333; text-transform: uppercase; }
	.DictList dd { margin: -20px 0 25px 150px; background: #EF3F42; padding: 10px; }
	.DictList dd .PDFList { margin-top: 1em; }

	.LinkList { list-style-type: none; margin-bottom: 1em; }
	.LinkList li { margin-bottom: 1em; background: 0 4px no-repeat; padding-left: 12px; }
	
	
	ol { font: normal 1em Arial, san-serif; color: #000; }
	ol p { font: normal .8em Arial, Helvetica, sans-serif; color: #000; } 
	
	/* -- Lists with Content -- */
	
	#ContentList { padding-left: 0; margin: 10px; width: 425px; }	
	#ContentList li { list-style: none; margin: 1em 0; padding: 1em 0 .3em 0; border-top: 1px solid gray; }
	#ContentList li a { text-decoration: none; }
	
	#CirculationList { padding-left: 0; margin: 20px; display: inline; }	
	#CirculationList ul { margin-left: 0; padding-left: 0; }
	#CirculationList li { list-style: none; margin: 0; padding: 0; }
	#CirculationListnoBullet li { margin: 0; padding: .5em; border-bottom:thin #000 solid; }
	#CirculationListBullet ul li { list-style: bullet; margin: 10px; padding: .2em 0 0 .5em; color:#666; line-height: 1em; font-size: .9em; }
	#CirculationList li a { text-decoration: none; }
	
	#AdListBullet ul li { list-style: bullet; margin: 10px; padding: .2em 0 0 .5em; color:#666; line-height: 1em; font-size: .5em; }
	#AdListnoBullet li { margin: 0; padding: .5em; border-bottom:thin #000 solid; font-size: .9em; }
	#AdSpecsListnoBullet li { margin: 0; padding: .5em; border-bottom:thin #666 solid; }
		
	#ssList ul { margin: 0px; padding: 0; }
	#contactList ul { margin: 0px; padding: 0; } /* -- id for contacts -- */
	#calList ul { margin: 0px; padding: 0; font-size: .9em; } /* -- id for editorial calendars -- */
		
	/* -- Text -- */
	.p { margin-top: 0px; margin-bottom: 1em; }
	#Content { line-height: 1.5em; font-style:bold; font-weight:900; margin: 10px; padding-bottom: 2px; font-size: 1.2em; } /* -- Content Title -- */
	#ContentMedia { line-height: 1.5em; font-style:bold; font-weight:600; margin: 0; padding: 0; font-size: 1.2em; float:left; }
	.Heavy { font-family: "Arial", impact, helvetica, sans-serif; }
	.Serif { font-family: cambria, 'lucida bright', georgia, palatino, bookman, 'Bookman Old Style', 'Book Antiqua', serif; }

	
	/* -- Text for Science Illustrated Main Content Area -- */
	
	.bodyContent { line-height: 1.3em; font-family: arial; font-size: .9em; margin: 0px 10px 10px 10px; padding-bottom: 0px; text-align:justify; }
	.bodyContentHeader { line-height: 1.3em; font-size: 1.2em; font-family: Arial, Helvetica, sans-serif; font-weight:600; margin: 0px; padding-bottom: 5px; text-align:left; }
	#ContentMain { line-height: 1.5em; font-style:bold; font-weight:600; margin: 10px; padding-bottom: 2px; font-size: 1em; } /* -- Content Main Table - Deals with Text and Images -- */
	
	#Source { font: italic .9em Arial, Helvetica, sans-serif; color: #666; }  /* -- Deals with Source Footer after Stats -- */

	
	/* -- Sidebars -- */
	.threeCols #container { 
		min-width: 65em;  /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
		max-height: auto;
		background: #FFF;
		margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
		border: none;
		/* text-align: right;  this overrides the text-align: center on the body element. */
	}
	.threeCols #mainlogo { 
		float: top; 
		width: 11em; /* since this element is floated, a width must be given */
		height: 2em;
		background: #FFF; /* the background color will be displayed for the length of the content in the column, but no further */
		padding: 0px 0 0px 0; /* top and bottom padding create visual space within this div */
	}	
		
	.threeCols #greyStripe { 
		float: top; 
		width: 2em; /* since this element is floated, a width must be given */
		height: 4em;
		background-image:none;/* the background color will be displayed for the length of the content in the column, but no further */
		margin: 0 auto;
		padding: 0px 0 0px 0; /* top and bottom padding create visual space within this div */
	}
	
	.threeCols #sidebar1 {
		float: left; 
		width: 11em; /* since this element is floated, a width must be given */
		height: 250em;
		background: #ED1B24; /* the background color will be displayed for the length of the content in the column, but no further */
		padding: 15px 0; /* top and bottom padding create visual space within this div */
	}
	
	.threeCols #sidebar2 {
		float: left; 
		width: 1em; /* since this element is floated, a width must be given */
		height: 250em;
		background: #000; /* the background color will be displayed for the length of the content in the column, but no further */
		padding: 15px 0; /* top and bottom padding create visual space within this div */
	}
	
	.threeCols #sidebar3 {
		float: right; 
		width: 11em; /* since this element is floated, a width must be given */
		height: 250em;
		background: #ED1B24; /* the background color will be displayed for the length of the content in the column, but no further */
		padding: 15px 0; /* top and bottom padding create visual space within this div */
	}
	
	.threeCols #sidebar4 {
		float: right; 
		width: 1em; /* since this element is floated, a width must be given */
		height: 250em;
		background: #000; /* the background color will be displayed for the length of the content in the column, but no further */
		padding: 15px 0; /* top and bottom padding create visual space within this div */
	}	

	.threeCols #sidebar5 { /* this is the grey sidebar screen left */
		float: right; 
		width: 2em; /* since this element is floated, a width must be given */
		height: 251.4em;
		background: #666; /* the background color will be displayed for the length of the content in the column, but no further */
		padding: 0px 0 15px 0; /* top and bottom padding create visual space within this div */
	}	
	
	.threeCols #sidebar6 { /* this is the grey sidebar screen right */
		float: left; 
		width: 2em; /* since this element is floated, a width must be given */
		height: 251.4em;
		background: #666; /* the background color will be displayed for the length of the content in the column, but no further */
		padding: 0px 0 15px 0; /* top and bottom padding create visual space within this div */
	}
	/* -- Sidebars text -- */
	.threeCols #sidebar1 h5, 
	.threeCols #sidebar1 p, 
	.threeCols #sidebar2 p, 
	.threeCols #sidebar2 h3 {
		margin-left: 5px; /* the left and right margin should be given to every element that will be placed in the side columns */
		margin-right: 5px;
	}

	/* -- mainContent -- */
	.threeCols #mainContent {
	  margin: 0 18em 0 18em; /* the right margin can be given in ems or pixels. It creates the space down the right side of the page. */ color:#000; font-style:bold; }
	.mainContent { line-height: 1.2em; font-size: 1.2em; margin: 2px; padding-bottom: 2px;}
	.mediakitMenu { bottom: .2em; }

	/* Miscellaneous classes for reuse */
	.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
		float: right;
		margin-left: 8px;
	}
	.fltlft { /* this class can be used to float an element left in your page */
		float: left;
		margin-right: 8px;
	}
	.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
		clear:both;
	    height:0;
	    font-size: 1px;
	    line-height: 0px;
	}