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

/***********************************************************************
*							Table of =Contents
* ----------------------------------------------------------------------
* =Normalization (CSS Reset)..................................(Line  16)
* =SAMPLE SAMPLE..............................................(Line  72)
* =Page Styling...............................................(Line 124)
* =Inner Styling..............................................(Line 226)
*************************************************************************/

/*	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-spacing: 0; border-collapse: collapse;}

/* 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; color: black;}
	a:hover { text-decoration: underline; }
	
.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;}
	
	a em { cursor: pointer; }

body 
{
	background: #4b6e9c url(images/bg_header.png) repeat-x top left;
	font-family: Verdana, "Lucida Grande", Lucida, sans-serif;
	color: #666;
	font-size: 12px;
}

/***********************************
		=Border Corners
***********************************/
.rounded { border-top: solid 1px #000; border-bottom: solid 1px #000; margin: 0 1px; display: block; height: 1%;}
.topRounded { border-top: solid 1px #000; margin: 0 1px; display: block;}
.bottomRounded { border-bottom: solid 1px #000; margin: 0 1px; display: block;}
	.roundedInner 
	{ 
		border-left: solid 1px #000; 
		border-right: solid 1px #000; 
		margin: 0 -1px; 
		display: block; 
		padding: 20px;
		overflow: hidden;
		position: relative;
	}
	
	.linkoutButton .roundedInner 
	{ 
		padding: 10px; 
		font-weight: bold; 
		color: white; 
		text-indent: 11px;
		background-image: url(images/icon_whiteArrow.png) !important;
		background-repeat: no-repeat !important;
		background-position: 10px 50% !important;
	}
	
	a.orange .roundedInner { background-image: url(images/icon_orangeArrow.png) !important; }
	
	.blue { border-color: #4b6e9c; }
		.blue .roundedInner, 
		.roundedInner .blue .roundedInner { border-color: #4b6e9c; background: #4b6e9c;}
		
	.darkGray { border-color: #363636; }
		.darkGray .roundedInner, 
		.roundedInner .darkGray .roundedInner { border-color: #363636; background: #363636; }
	
	.white { border-color: #fff; }
		.white .roundedInner, 
		.roundedInner .white .roundedInner { border-color: #fff; background: #fff; }
		
	.green { border-color: #5f9b27; }
		.green .roundedInner, 
		.roundedInner .green .roundedInner { border-color: #5f9b27; background: #5f9b27; }
		
	.silver { border-color: #dbdbdb; }
		.silver .roundedInner, 
		.roundedInner .silver .roundedInner { border-color: #dbdbdb; background: #dbdbdb; }

	.orange { border-color: #ba9d31; }
		.orange .roundedInner, 
		.roundedInner .orange .roundedInner { border-color: #ba9d31; background: #ba9d31; }

	.gradient { border-color: #dbdbdb; margin-top: 0px;}
		.gradient .roundedInner { background: url(images/bg_gradientRounder.png) repeat-x bottom left; margin: 0 -2px;}
		
/***********************************
		=Page Styling
***********************************/
#wrapper { width: 980px; margin: 0 auto; padding: 60px 0 20px 0; position: relative;}

	.logo, .logo a { width: 138px; height: 41px; display: block; }
		.logo { position: absolute; top: 0px; left: 20px;}
			.logo em { background: url(images/ir_logo.png) no-repeat; }
			
	.mainMenu { float: left; position: absolute; top: 10px; left: 178px;}
		.mainMenu li { float: left; border-width: 0 0;}
			.mainMenu li a 
			{ 
				float: left; 
				color: #bccddd;
				font-size: 14px;
				font-weight: bold;
				text-transform: uppercase;
				padding: 0 10px;
				height: 30px;
				line-height: 30px;
				border-width: 0 0;
				background: none !important;
			}
			
			.mainMenu li#selected { border-color: #4b6e9c; border-width: 1px 0;}
				.mainMenu li#selected a { border-color: #4b6e9c; background: #4b6e9c !important; border-width: 1px;}

	.footer { clear: left; position: relative; top: 20px; margin-bottom: 20px; height: 1%;}
		.footerGroup { width: 175px; float: left; margin: 0 67px 0 0; }
		.lastFooterGroup { margin: 0px !important; }
	.footerContent { height: 1%;}
	
	.msLogo, .msLogo a { width: 105px; height: 18px; }
		.msLogo { margin: 0 0 10px 0; }
			.msLogo em { background: url(images/ir_msLogo.png) no-repeat top left; }
			
	.footerMenu { float: left; font-size: 10px;}
		.footerMenu li { float: left; padding: 0 5px 0 0; margin: 0 5px 0 0; border-right: solid 1px #848484;}
			.footerMenu li a { display: block; float: left; color: #848484;}
		.footerMenu li.last { border: none; }

/***********************************
		=Home Styling
***********************************/

.callout { margin-bottom: 20px; }
	.callout .roundedInner, .callout h2 { font-size: 30px; font-weight: normal;  color: white; padding: 20px;}
		.callout h2 { padding: 0px; }
		
.recentContributors { width: 481px; float: left; margin-right: 20px;}
.tutorials { width: 225px; float: left; }
.promotional { margin-left: 746px; }

/*** FOR DYNAMIC CONTENT, AND STRETCHY HEIGHT CONTENT WELLS, REMOVE BELOW!!! ***/
.recentContributors .roundedInner,
.tutorials .roundedInner,
.promotional .roundedInner 
{ height: 550px; }
	.roundedInner .roundedInner { height: auto; }
/*** END FIXED HEIGHT SETTINGS ***/


	h3, h3 a { font-size: 18px; font-weight: normal; margin: 0 0 14px 0;}
	.avatar { float: left;}
		.avatar img {  border: solid 1px #ba9d31; float: left; }
	.contributorStats { margin: 0 0 0 110px; }
	
	.contributorStats h4 a { font-weight: bold; color: #ba9d31; font-size: 14px; }
	.locationWebsite { font-size: 10px; display: block; margin: 0 0 10px 0;}
		.locationWebsite a { color: #ba9d31; }
		.locationWebsite a.location { font-weight: bold; }
	
	.hr { clear: left; margin: 20px 0; float: left; width: 100%; border-top: solid 1px #dbdbdb;}
		.hr hr { color: white; background: white; border: solid 1px white;}
	
	.contributors { clear: left; }
		.contributor { overflow: hidden; width: 50%; float: left; margin: 0 0 20px 0;}
			.contributor .contributorStats { margin: 0 0 0 59px; }
				.contributor .contributorStats a { font-size: 14px; color: #ba9d31; display: block; padding: 10px 0 0 0;}
				.contributor .contributorStats .locationWebsite a { font-size: 10px; display: inline; padding: 0;}
				
.tutorialRoller {  }
	.tutorialParent { margin: 0 0 25px 0; }
		.tutorialChildren {  }
			.tutorialChildren li a,
			.footerLinks li a 
			{ 
				display: block; 
				line-height: 22px; 
				height: 22px; 
				color: #ba9d31;
				padding: 0 0 0 10px;
				background: url(images/icon_grayArrow.png) no-repeat left center;
			}
		
	p { padding: 0 0 20px 0; }
	
	.promotional ul { margin: 0 0 20px 0; }
		.promotional li { line-height: 16px; display: block; padding: 0 0 0 12px; background: url(images/icon_bullet.png) no-repeat center left;}
				
		
/***********************************
		=Inner Styling
***********************************/		
.innerContentHeader .roundedInner { height: 71px; }
	h2 a { font-size: 30px; font-weight: normal; color: white; }		
	.subHeading { color: white; }
	
	.userInformation { position: absolute; top: 20px; right: 20px; width: 205px;}
		.userInformation .userStats { text-align: right; float: left; width: 115px; margin: 0 10px 0 0; position: relative; left: 29px;}
		.userInformation .avatar { position: relative; left: 29px; }
			.userInformation h3 { margin: 0px; }	
				.userInformation h3 a { font-weight: bold; font-size: 14px; color: #edd150;}
			.backToAll 
			{ 
				display: block; 
				clear: left; 
				width: 205px; 
				border-top: solid 1px #535353;
				font-size: 12px;
				font-weight: bold;
				text-align: right;
				padding: 6px 0 0 0;
				color: #edd150;
				background: url(images/icon_backToAllIcon.png) no-repeat 40px 9px;
			}
	.articleNavigation { float: left; position: absolute; bottom: 0px; left: 20px;}
		.articleNavigation li { float: left; height: 30px; margin: 0 10px 0 0; border-bottom: none;}
			.articleNavigation li a { float: left; height: 30px !important; padding: 0px 10px; line-height: 30px; color: #666;}
			.articleNavigation #selectedArticle a { color: #333333; }
			
.contentContainer { background: white; padding: 20px; font-size: 14px;}

.downloadLinks { margin-bottom: 20px; }
	.downloadLinks .roundedInner { height: 1%; }
	.downloadLinks .linkoutButton { float: left; margin: 0 10px 0 0; }
		.downloadLinks .linkoutButton .roundedInner { height: auto; }
	
.discussions h3 { font-weight: bold; }

.comment { overflow: hidden; height: 1%; margin: 0 0 40px 0; font-size: 14px;}
	.comment .userInfo { float: left; width: 206px; margin: 0 40px 0 0; text-align: right;}
		.comment .userInfo a { display: block; font-weight: bold; font-size: 14px; color: #ba9d31;}
		.comment .userInfo .date { display: block; font-size: 10px; margin: 0 0 5px 0;}
		.comment .userInfo .avatar { float: right; }
	.comment .post { margin: 0 0 0 246px; }
	
#comments { font-size: 14px; }
	#comments input { border: solid 1px #b5b5b5; width: 448px; height: 28px;}
		#comments #submit 
		{
			width: auto; 
			font-size: 14px; 
			padding: 0 10px; 
			color: #333; 
			background: #979797; 
			border: solid 1px #979797;
			margin: 0 0 0 243px;
		}
	#comments textarea { border: solid 1px #b5b5b5; width: 548px; height: 108px; }
	#comments label { float: left; line-height: 28px; display: block; width: 210px; margin-right: 33px; text-align: right;}
	#comments .row { margin: 0 0 10px 0; overflow: hidden; }