/* Materials Monthly Stylesheet for vertical navigation */
/* for global changes you MUST change materialsmonthly-ie.css as well, values will be different in each file to accomplish the same graphic change!*/

/* 
DOCUMENTATION

This file uses a strategy of nested css boxes to produce and arrange content for materialsmonthly.com

Global tags are first redefined to set up basic formatting for text and links, then subsequent formatting is done by css code for each box/container

every page of the site has the same menu and header structure, content changes subsequently based on the function of the page.

*/

/* GLOBAL TAGS : these set up basic typography */

BODY {
	color:#333333;
	font-family: Helvetica, Arial, Lucida Grande, sans-serif;
	font-size:14px;
	line-height:130%;
	background-color:#FFFFFF;
}

a {
	color: #F93;
	text-decoration: none;
}

a:hover {

	color:#300;
}

h1 {
	/* used for really large black text */
	font-size:22px;
	color:#000000;
	line-height: 130%;
	font-style: normal;
	font-weight: normal;
	border-left-width: 1px;
	border-left-color: #000000;
}

h2 {
/* used for large black text */
	font-size:18px;
	color:#000000;
	line-height: 140%;
	font-style: normal;
	font-weight: normal;
}

h3 {
/* used for large grey text */
	font-size:18px;
	color:#666666;
	line-height: 140%;
	font-style: normal;
	font-weight: normal;
}

h4 {
/* tiny text! */
	font-size:10px;
	color:#666666;
	line-height: 140%;
	font-style: normal;
	font-weight: normal;
}

/* LAYOUT TAGS: these set up the 'boxes' into which pages are laid out */

/* HOME PAGE SPECIFIC */

.issue_header
{
	/* holds text regarding current issue on top of page */
	position: absolute;
	height: 20px;
	width: 457px;
	left: 61px;
	top: 61px;
	
}

.menu_header
{
	/* holds potential menu items on the top of the page above the blurb */
	position: absolute;
	height: 20px;
	width: 356px;
	left: 518px;
	top: 61px;
	
}

.menu_header a {
	color:#CCC;
	}
	
.menu_header a:hover {
	color:#000;
	}

.dots {
/* holds 3 grey circles in a faux whole punch motif! */
	position: absolute;
	height: 606px;
	width: 61px;
	left: 0px;
	top: 126px;
}


.subscribe {
/* hangs out on the right margin to encourage you to subscribe! */
	position: absolute;
	height: 606px;
	width: 61px;
	top: 126px;
	right: -15px;
	z-index: 5;
}

.issue_box {
/* holds sequence of images forming cover of current issue */
	position: absolute; 
	height: 606px;
	width: 457px;
	left: 61px;
	top: 126px;
}

.blurb_box
{
	/* holds enticing text about what materials monthly is */
	position: absolute;
	height: 606px;
	width: 306px;
	left: 497px;
	top: 126px;
	border-left-width: 1px;
	padding-left: 21px;
	border-left-style: solid;
	border-left-color: #000000;
}

.left_menu_low
{
	/* holds menu below issue image */
	position: absolute;
	height: 271px;
	width: 415px;
	left: 61px;
	top: 809px;
	padding-top: 11px;
	border-top: 3px black solid;
}

.right_info_low {
/* holds news and info below blurb */
	position: absolute;
	height: auto;
	width: 392px;
	left: 518px;
	top: 809px;
	padding-top: 11px;
	border-top: 3px #F93 solid;
}

.left_info_bottom {
/* when blog goes into right info low, this will hold papress info */
	position: absolute;
	height: auto;
	width: 392px;
	left: 61px;
	top: 1049px;
}


/* General Page Layout */

.general_title_header
{
	/* holds title of page */
	position: absolute;
	height: 20px;
	width: 392px;
	left: 61px;
	top: 61px;
	
}

.general_menu_header
{
	/* holds potential menu items on the top of the page above the right hand content box */
	position: absolute;
	height: 20px;
	width: 392px;
	left: 495px;
	top: 61px;
	
}

.general_menu_header a {
	color:#CCC;
	}
	
.general_menu_header a:hover {
	color:#000;
	}


.left_box {
/* holds content on left side of page */
	position: absolute; 
	height: auto;
	width: 392px;
	left: 61px;
	top: 126px;
}

.right_box
{
	/* holds content on right side of page */
	position: absolute;
	height: auto;
	width: 392px;
	left: 473px;
	top: 126px;
	border-left-width: 2px;
	padding-left: 21px;
	border-left-style: solid;
	border-left-color: #000000;
}

.form_label
{
	color: #333;
	text-align: right;
}