/* @override http://www.markupninjas.com/markupNinjas.css */

/**********************************************************************************
*	Basic Stylesheet ( For Mac: Firefox, Safari PC: Firefox, Opera, Netscape, IE6 ) 
*
*	version:	1.1
*	author:		ken hanson
*	email:		ken@markupninjas.com
*	website:	www.markupninjas.com
**********************************************************************************/

/***********************************************************************
*							Table of =Contents
* ----------------------------------------------------------------------
* =Normalization (CSS Reset)..................................(Line  30)
* =General Styling............................................(Line  62)
* =Wrappers...................................................(Line  71)
* =Header.....................................................(Line 105)
* =Subheader..................................................(Line 145)
* =Ajax Wrapper...............................................(Line 204)
* =Swappables.................................................(Line 242)
* =Blog Headliner.............................................(Line 271)
* =featuredContent............................................(Line 304)
* =Footer.....................................................(Line 339)
*************************************************************************/

/*	When Searching for items in the table of contents, use = where they show up in the text above to find items more quickly  */



/***********************************
		=Normalization
***********************************/

/* Normalizes Margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin: 0; padding: 0;}

/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 { font-size: 100%; }

/* Removes list-style from lists */
ol, ul { list-style: none; }

/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }

/* Removes border styles from tables */
table { border-collapse: collapse; border-spacing: 0; }

/* Removes border from fieldset and img */
fieldset, img { border: 0; }

/* Left aligns text in caption and th */
caption, th { text-align: left; }

/* Removes quotation marks from q */
q:before, q:after { content: ''; }

/* Normalize Links for Netscape when image replacements are used (text decorates the whole page width up to the IR'd link with an underline) */
a { text-decoration: none; }


/***********************************
		=General Styling
***********************************/
.ir { position: relative; overflow: hidden; display: block;}
	.ir em { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; display: block; background-repeat: no-repeat;}
	
body { font-family: arial; font-size: 12px; color: #333; }
a { color: #ee3c23; }

/***********************************
		=Wrappers
***********************************/
body { background: #1e1e1e; }
	#outerWrapper { background: #000 url(http://www.markupninjas.com/themeImages/bg_footer.png) repeat-x bottom left; }
		#wrapper { width: 889px; margin: 0 auto; }
		
	#header { height: 71px; padding: 17px 0 0 0; position: relative;}
	
	#subHeader 
	{
		padding: 0 32px 0 371px;		
	}
	
	#ajaxWrapper 
	{
		float: left;
		width: ;
	}
	
		.peggedAjaxContent { width: 160px; float: left;}
		.swappable { margin-left: ; float: left; }
		
	.blogHeadliner 
	{
		float: left;
	}
		
	#footer
	{
		clear: left;
		height: 193px;
	}

/***********************************
		=Header
***********************************/
h1 { width: 301px; height: 71px; float: left;}
	h1 .ir { display: block; width: 301px; height: 71px;}
		h1 .ir em { background: url(http://www.markupninjas.com/themeImages/ir_logo.png) no-repeat top left; width: 100%; height: 100%;}

#mainNav 
{ 
	float: left;
	margin-left: 42px;	
	height: 71px;
	position: absolute;
	right: 2px;
	bottom: -3px;
	z-index: 1;
}

	#mainNav li { float: left; background: url(http://www.markupninjas.com/themeImages/bg_menuBorder.png) no-repeat right bottom;}
		#mainNav li a 
		{ 
			float: left; 
			line-height: 71px;
			color: #cecece;
			text-transform: uppercase;
			font-size: 11px;
			font-weight: bold;
			padding: 0 14px;
			margin: 0 2px 0 0;
			background: url(http://www.markupninjas.com/themeImages/bg_menu.png) repeat-x bottom left;
		}
		
		#mainNav li.first { background: url(http://www.markupninjas.com/themeImages/bg_menuBorder.png) left bottom; padding: 0 0 0 2px;}

		#mainNav li a:hover, #mainNav li.selected a { background: url(http://www.markupninjas.com/themeImages/bg_menuHover.png) repeat-x bottom left; }
		#mainNav li:hover, #mainNav li.over, #mainNav li.selected { background: url(http://www.markupninjas.com/themeImages/bg_menuBorderHover.png) bottom left; }
		
/***********************************
		=subHeader
***********************************/
#subHeader 
{
	background: #f6f6f6 url(http://www.markupninjas.com/themeImages/bg_mainTopRound.png) no-repeat top left;	
	position: relative;
	z-index: 10;
	padding: 50px 32px 32px 371px;
	float: left;
}

	.ninjastar { width: 430px; height: 442px; position: absolute; top: 16px; left: -103px;}
		.ninjastar em { background: url(http://www.markupninjas.com/themeImages/bg_ninjastar.png) no-repeat top left; }
		
	#subHeader h2 { font-size: 42px; font-family: georgia; font-weight: normal; margin: 0 0 26px 0;}
	
	#subHeader p { font-size: 14px; line-height: 26px;}
		#subHeader p a { text-decoration: underline; }
	
	.bottomBorder { padding: 0 0 39px 0; background: url(http://www.markupninjas.com/themeImages/bg_bottomBorder.png) repeat-x bottom left; margin: 0 0 36px 0}
	
	.ourFeatureList {  }
		.ourFeatureList li { float: left; width: 162px; padding-top: 71px;}
			.ourFeatureList li h3 { font-size: 14px; font-weight: bold; color: #ee3c23; margin: 0 0 15px 0; }
			.ourFeatureList li p { font-size: 12px !important; width: 138px; line-height: 22px !important; margin: 0 0 15px 0;}
				.ourFeatureList li p strong {font-weight:bold;}
			
			.featuresButton 
			{ 
				display: block;
				width: 111px;
				height: 29px;
				line-height: 29px;
				text-indent: 23px;
				background: url(http://www.markupninjas.com/themeImages/btn_featuresButton.png) no-repeat top left;
				color: #ececec;
			}
				.featuresButton:hover { background: url(http://www.markupninjas.com/themeImages/btn_featuresButtonHover.png) no-repeat top left; }
		
		.ninjaFast { background: url(http://www.markupninjas.com/themeImages/icon_time.png) no-repeat top left; }
		.handCrafted { background: url(http://www.markupninjas.com/themeImages/icon_work.png) no-repeat top left; }
		.wellPriced { background: url(http://www.markupninjas.com/themeImages/icon_price.png) no-repeat top left; }
		
/* For use on pages that aren't the home page */
/* This sucks, but we had to hack up ie6 o_O, do you blame us? */
.postWrapper {
  min-height:442px;
  height:auto !important;
  height:442px;
  /* END HACK */
  
  width: 486px;  
}

	.postWrapper a { color: #333; font-weight: bold;}
		.postWrapper h2 a { font-weight: normal; }
		.postWrapper a:hover { text-decoration: underline; }
	.postWrapper a.viewMoreLink { color: #ee3c23; display: block; margin: 0 0 40px 0;  }
	.postWrapper p { padding-bottom: 20px; }
	
	.postWrapper .featuredContentFooterImage {display: none;}		
/***********************************
		=ajaxWrapper
***********************************/
#ajaxWrapper 
{
	clear: left;
	background: #3e3e3e url(http://www.markupninjas.com/themeImages/bg_ajaxTop.png) no-repeat top left;
	color: #d4d4d4;
	position: relative;
	margin-bottom: 50px;
}

	#innerAjaxWrapper 
	{ 
		padding-bottom: 5px; 
		float: left; 	
		padding: 38px 0 29px 24px; 
		width: 865px;
		background: url(http://www.markupninjas.com/themeImages/bg_ajaxWrapperBottom.png) no-repeat bottom left;
	}
		.peggedAjaxContent h4 { text-transform: uppercase; font-size: 14px; color: #ee3c23; margin-bottom: 13px; }	
		
		.largeButton 
		{ 
			width: 154px; 
			height: 39px; 
			display: block; 
			background: url(http://www.markupninjas.com/themeImages/btn_largeButton.png) no-repeat top left;
			line-height: 41px;
			text-indent: 32px;
			font-size: 14px;
			color: #333333;
			text-transform: uppercase;
			font-weight: bold;
		}
		
			.largeButton:hover { color: white; background: url(http://www.markupninjas.com/themeImages/btn_largeButtonHover.png) no-repeat top left; }
		
/***********************************
		=Swappables
***********************************/		
.swappable { position: relative; }

.easyProcess
{
	float: left;
	margin-bottom: -27px;
	margin-left: 10px;
}
	.steps 
	{ 
		float: left; 
		width: 193px;
		height: 98px; 
		padding: 0 15px;
		padding-top: 5px;
		font-size: 12px;
		background: url(http://www.markupninjas.com/themeImages/bg_steps.png) no-repeat top left;
	}
	
	#step3 { padding-right: 0px; margin-right: 0px; }
	
		.steps h5, .ourCode h5 { font-size: 13px; font-weight: bold; text-transform: uppercase; margin: 0 0 8px 0; }
			.steps h5 em, .ourCode h5 em { color: #ee3c23; font-weight: bold; }

		.steps p, .ourCode p { line-height: 20px; }
		
.peggedAjaxContent, .easyProcessWrapper {  }
.ourCode { display:  }

.xray { width: 320px; height: 137px; float: left; margin-right: 25px; margin-left: -10px; position: relative; left: 5px;}
	.xray em { background: url(http://www.markupninjas.com/themeImages/ir_globalGrindCode.png) no-repeat top left; }

.ourCode .blurbWrappers { width: 250px; float: left; margin-right: 15px;}
	.ourCode p a { font-weight: bold; color: white; text-decoration: underline;}
	
.goBackAjax 
{ 
	display: block; 
	clear: left; 
	padding-right: 20px; 
	text-align: right; 
	font-weight: bold; 
	color: black; 
	text-decoration: underline; 
	margin: 20px 0 0 0;
}
	
/***********************************
		=blogHeadliner
***********************************/		
.blogHeadliner{ background: #eaeaea url(http://www.markupninjas.com/themeImages/bg_blogHeadlinerTop.png) no-repeat top left; float: left;}

	.blogHeadlinerInner 
	{ 
		background: url(http://www.markupninjas.com/themeImages/bg_blogHeadlinerBottom.png) no-repeat bottom left; 
		padding: 23px;
		float: left;
		width: 525px;
	}
	
		.blogHeadliner h6 { font-size: 16px; width: 223px; float: left; margin-bottom: 11px;}
			.blogHeadliner h6 em { font-style: italic; font-family: georgia; }
			.blogHeadliner h6 a { padding-left: 7px; }
			
		.blogPostImage 
		{ 
			padding: 3px; 
			width: 223px; 
			height: 87px; 
			float: left; 
			clear: left; 
			background: url(http://www.markupninjas.com/themeImages/bg_featuredImage.png) no-repeat top left;
		}
		
	.postStats { float: right; display: block; margin-bottom: 17px; color: #535353;}
		.date { border-right: solid 1px #535353; padding: 0 5px 0 0; }
	
	.postParagraphs { float: right; width: 242px; line-height: 17px;}
	.readMore { text-decoration: underline; display: block; padding-top: 10px; font-weight: bold;}
		
/***********************************
		=featuredContent
***********************************/	
.featuredContent 
{ 
	float: left; 
	width: 241px; 
	height: 128px;
	background: #ededed url(http://www.markupninjas.com/themeImages/bg_featuredContentTop.png) no-repeat top left;
	padding: 20px;
	position: relative;
	text-align: center;
	margin: 0 0 45px 36px;
}

	.featuredContent h6
	{
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 30px;
		text-indent: 20px;
		text-align: left;
		background: url(http://www.markupninjas.com/themeImages/bg_featuredContentBottom.png) no-repeat bottom left;
		font-size: 14px;
		text-transform: uppercase;
		letter-spacing: -1px;
	}
	
		.featuredContent h6 em { font-family: georgia; font-style: italic; color: #333333; padding-right: 5px; text-transform: none;}
		
/***********************************
			=Pricing
***********************************/
h3.pricing { float: left; width: 200px;}
a.start { float: right; width: 122px; height: 51px;}
	a.start em { background: url(images/ir-startnow.jpg) no-repeat top left; }
.pricesTable { clear: both; }

/* Table Styling */
.pricesTable { width: 100%; text-align: center; border: solid 2px #2f2f2f; color: #2f2f2f; margin-bottom: 20px;}
.pricesTable .even, .dayHeadings { background: #d4d4d4; color: #3e3e3e;}		
	
	.pricesTable tr { font-size: 18px; }
		.pricesTable td { padding: 5px; border-left: solid 2px #f7f7f7;}
		.pricesTable td.pgHeading, .pricesTable tr.dayHeadings th { border-left: none; color: #2f2f2f;}
	
	.pricesTable caption { display: none; }
	
	th { text-align: center; font-size: 28px; height: 45px;}
		th.hidden { text-indent: -9999px; }
		

/***********************************
		=footer
***********************************/
#footer { position: relative; }
	#footer span, #footer a { position: relative; top: 33px; color: #7b7b7b;}
		#footer .emailInfo { position: absolute; top: 33px; right: 90px;}
		#footer .phoneNumber { padding: 0 0 0 92px; color: #ee3c23; font-weight: bold; }


/***********************************
 =Undo Normalization for Blog Stuff
***********************************/
/* Normalizes Margin, padding */
.postWrapper dl, .postWrapper dt, .postWrapper dd, .postWrapper ul, .postWrapper ol, .postWrapper li 
{ padding: 0 0 10px 20px;}


/* Removes list-style from lists */
.postWrapper ol, .postWrapper ul { list-style: circle; list-style-type: square; list-style-position: inside;}

/* Normalizes font-style and font-weight to normal */
.postWrapper address, .postWrapper caption, .postWrapper cite, .postWrapper code, .postWrapper dfn, .postWrapper em, .postWrapper strong, .postWrapper th, .postWrapper var { font-style: normal; font-weight: normal; }

#subHeader dl, #subHeader dt, #subHeader dd, #subHeader ul, #subHeader ol, #subHeader li { font-size: 14px; line-height: 26px; }

/***********************************
	Some Blog Post Specifics
***********************************/
.postWrapper a img, .postWrapper img { border-bottom: solid 6px black; background: #3e3e3e; padding: 0 0 2px 0;}
	.postWrapper a:hover img { border-bottom: solid 6px #ee3c23; }