/* ------------------------------------------------------------------------------------------------------*/
/* ZERO OUT ALL BROWSER PRE-SET VALUES  -----------------------------------------------------------------*/

* {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: Arial, Helvetica, sans-serif;
}

/* ------------------------------------------------------------------------------------------------------*/
/* BASE BLOCK ELEMENTS & GLOBAL STYLES ------------------------------------------------------------------*/

html {
	height: 100%;
	overflow-y: scroll; /* Add this in to always generate vertical scrolls (and avoid page shift on centered layouts) */
}


body {
	height: 100%;
	background: #ffffff; 
}

.wrapper {	/* Settting this up as a class so we can attach page-specific id hooks to this div element */
	width: 930px;
	margin: 0 auto;
	padding: 0 15px;
	position: relative;
	/*height: 100%;     ADD THIS IN FOR WINDOWS-ONLY CSS  */
	min-height: 100%;
}

#header {
	width: 930px;
	height: 27px;
	padding: 55px 0 0 0;
}

#pageContent {
	width: 930px;
	margin: 58px 0 25px 0;
	padding: 0 0 40px 0; /*Add bottom padding to keep the footer from laying on top of the bottom of the content */
}

#footer {
	clear: both;
	position: absolute;
	bottom: 0;
	width: 930px;
	margin: 0 10px 0 0;
	padding: 10px 0;
}

.clear {
	clear: both;
}

/* Used once at bottom of mainContent to force a height for that element. This is so the bottom-aligned footer doesn't collide with content on long pages. 
   We have to include sone content (non-breaking space) in order for the clear to work in all browsers, so make the content small so it doesn't afffect the vertical rule length. */
#mainContentClear { 
	clear: both;
	margin: 0;
	padding: 0;
	height: 1px;
	overflow: hidden;
	font-size: 1px;
	line-height: 1px;
}



/* ------------------------------------------------------------------------------------------------------*/
/* HEADER  --------------------------------------------------*/

a.logo {
	display: block;
	float: left;
	width: 281px;
	height: 28px;
	text-indent: -5000px;
	background: url(../images/shared/jmp_logo.gif) no-repeat;
}

a.logo:focus { outline: 0; } /* Gets rid of outlines in FF */



/* -----------------------------------------------------------------------------------------*/
/* HEADER / MAIN NAV  ----------------------------------------------------------------------*/

ul#mainNav {
	padding: 0;
	margin: 7px 0 0 312px;
	list-style: none;
}
	
#mainNav li{
	margin: 0 0 0 48px;
	padding: 0;
	float: left;
}

#mainNav li a {
	display: block;
	text-indent: -5000px;
	height: 18px;
	border: none;
}

/* Basic Link Styles */
#mainNav a:focus		{ outline: 0; } /* Gets rid of outlines in FF */

/* Nav Rollovers */
#mainNav .home a						{ width: 42px; background: url(../images/shared/nav_home.gif) no-repeat; }
#mainNav .home a:hover			{ background-position: -42px 0; }
#mainNav .home a:focus			{ outline: 0; }
#mainNav .work a						{ width: 38px; background: url(../images/shared/nav_work.gif) no-repeat; }
#mainNav .work a:hover  		{ background-position: -38px 0; }
#mainNav .work a:focus  		{ outline: 0; }
#mainNav .process a					{ width: 60px; background: url(../images/shared/nav_process.gif) no-repeat; }
#mainNav .process a:hover  	{ background-position: -60px 0; }
#mainNav .process a:focus  	{ outline: 0; }
#mainNav .statement a				{ width: 75px; background: url(../images/shared/nav_statement.gif) no-repeat; }
#mainNav .statement a:hover { background-position: -75px 0; }
#mainNav .statement a:focus { outline: 0; }
#mainNav .resume a					{ width: 56px; background: url(../images/shared/nav_resume.gif) no-repeat; }
#mainNav .resume a:hover  	{ background-position: -56px 0; }
#mainNav .resume a:focus  	{ outline: 0; }
#mainNav .contact a					{ width: 57px; background: url(../images/shared/nav_contact.gif) no-repeat; }
#mainNav .contact a:hover		{ background-position: -57px 0; }
#mainNav .contact a:focus		{ outline: 0; }

/* "Current Page" Highlight States */
#home #mainNav li.home a					{ background: url(../images/shared/nav_home.gif) no-repeat; background-position: -42px 0; }
#work #mainNav .work a						{ background: url(../images/shared/nav_work.gif) no-repeat; background-position: -38px 0; }
#process #mainNav .process a			{ background: url(../images/shared/nav_process.gif) no-repeat; background-position: -60px 0; }
#statement #mainNav .statement a	{ background: url(../images/shared/nav_statement.gif) no-repeat; background-position: -75px 0; }
#resume #mainNav .resume a				{ background: url(../images/shared/nav_resume.gif) no-repeat; background-position: -56px 0; }
#contact #mainNav .contact a			{ background: url(../images/shared/nav_contact.gif) no-repeat; background-position: -57px 0; }


/* ------------------------------------------------------------------------------------------------------*/
/* PAGE CONTENT BLOCK / MAIN CONTENT  --------------------------------------------------*/

#mainContent {
	width: 930px;
	margin: 0;
	padding: 0;
	background: url(../images/shared/verticalRule.gif) repeat-y 282px
}

/* We're having the following problem with the page fade-ons and the SIFR text in IE:

1. We see the content flash on before the "fade-on" script hides the content and then fades it back on.
2. We can solve this by adding .js that sets the content to display:none inline directly after the content
3. But when the content is set to display:none, the SIFR replacement doesn't work correctly
4. But visibility:hidden works...
5. The only problem... this does require javascript to "un-hide" the pages

*/

#mainContent { visibility: hidden; }





/* Definitions for two-column layout  */

.twoColumnBlock .col1 {
	float: left;
	width: 258px;
	margin-right: 102px;
	text-align: right;
	background: #FFF;
}

.twoColumnBlock .col2 {
	float: left;
	width: 570px;
	padding: 5px 0 0 0; /* Adjust the padding so that the first line of text sits baseline with the <h1> in col 1 */
}


/* Section Sub-Navigation   */

#mainContent ul#subNav {
	margin: 50px 3px 0 0;
	list-style: none;
}
	
#mainContent #subNav li{
	margin: 0 0 5px 0;
	padding: 0 0 0 0;
	font-size: 13px;
	line-height: 18px;
	text-transform: lowercase;
	color: #a3b0b7;
	background-image: none;
}


#subNav li a { }

/* Basic Link Styles */
#subNav li a:link			{ color: #a3b0b7; text-decoration: none; }
#subNav li a:visited	{ color: #a3b0b7; text-decoration: none; }
#subNav li a:hover		{ color: #602129; text-decoration: none; }
#subNav li a:active		{ color: #602129; text-decoration: none; }
#subNav li a:focus		{ outline: 0; }

/* "Current Page" Highlight States */
#subNav li.currentPage a:link			{ color: #602129; text-decoration: none; }
#subNav li.currentPage a:visited	{ color: #602129; text-decoration: none; }
#subNav li.currentPage a:hover		{ color: #602129; text-decoration: none; }
#subNav li.currentPage a:active		{ color: #602129; text-decoration: none; }



/* ------------------------------------------------*/
/* All text styles for Main Text Block area -------*/

#mainContent h1 {
	margin: 0 0 20px 0;
	padding: 0;
	font-size: 25px;
	line-height: 30px;
	color: #a3b0b7;
}

.col1 h1 { float: right; } /* We need to float this (instead of text-align) because h1s are SIFR-affected */

#mainContent h2 {
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 16px;
	line-height: 18px;
	color: #a3b0b7;
}

#mainContent p {
	margin: 0 0 14px 0;
	padding: 0;
	font-size: 13px;
	line-height: 18px;
	color: #a3b0b7;
}

#mainContent ul {
 	list-style-type: none;
	padding: 0;
	margin: 0 0 14px 0;
	font-size: 13px;
	line-height: 14px;
	color: #a3b0b7;
}

#mainContent li {
	margin: 0 0 12px 0;
	background-image:url(../images/shared/listBullet.gif);
	background-repeat: no-repeat;
	background-position: .4em .4em;
	padding-left: 13px;
}


#mainContent a:link			{ color: #602129; text-decoration: none; }
#mainContent a:visited	{ color: #602129; text-decoration: none; }
#mainContent a:hover		{ color: #602129; text-decoration: none; background: url(../images/shared/linkStyle_on.gif) repeat-x bottom; }
#mainContent a:active		{ color: #602129; text-decoration: none; background: url(../images/shared/linkStyle_on.gif) repeat-x bottom; }
#mainContent a:focus		{ outline: 0; }



/* -------------------------------------------------------------------------------------------------------*/
/* FOOTER BLOCK  -----------------------------------------------------------------------------------------*/

#footer p {
	margin: 0;
	padding: 0 0 2px 0;
	color: #d1d7db;
	font-size: 9px;
	line-height: 10px;
}

#footer #facebookLink {
	position : relative;
	top : .35em; 
}

#footer a:link { color: #d1d7db; text-decoration: none; }
#footer a:visited { color: #d1d7db; text-decoration: none; }
#footer a:hover { color: #d1d7db; text-decoration: underline; }
#footer a:active { color: #d1d7db; text-decoration: none; }