/* 
	Mad Sprocket
	Master Screen CSS
	May 2009
	
	COLORS
	
	blue	color: #50bdd6;
	orange	color: #f04700;
	green 
		
 */

/* ------------------------ 
		reset
------------------------ */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

	ol, ul {
		list-style: none;
	}
	/* tables still need 'cellspacing="0"' in the markup */
	table {
		border-collapse: separate;
		border-spacing: 0;
	}
		caption, th, td {
			text-align: left;
			font-weight: normal;
		}

		
	body {
		line-height: 1.7;
		color: #111111;
		background: #000;
		font-size: 62.5%;
		font-family: Arial, Helvetica, sans-serif;
		*padding-bottom: 8em;
	}
	
	
		a,
		a:link
		a:visited
		a:hover
		a:active {
			color: #f04700;
			text-decoration: none;
			border-bottom: 1px dotted #ccc;
		}
		
			a:hover {
				border-bottom: 1px solid #f04700
			}
	
		 #accessibility {
			position: absolute;
			left: -9999px;
		 }
		 
		 #container {
		 	background: #fff url(/content/v1/img/green-sidebar.gif) repeat-y left;
		 }
	
	
	
/* ------------------------ 
		head
------------------------ */
 #header {
	margin-left: 13px;
	background: url(/content/v1/img/bg-head-gradient.jpg) repeat-x bottom;
 }
 
 	h1 {
		display: block;
		width: 278px;
		height: 123px;
		text-indent: -9999px;
		overflow: hidden;
		background: url(/content/v1/us/img/mad-sprocket.gif) no-repeat;
		float: left;
		margin: 10px 35px 0 37px;
	}
 
 	#navigation {
		height: 153px;
		display: block;
		position: relative;
		z-index: 50;
	}
	
		#navigation li {
			display: block;
			height: 153px;
			float: left;
			_display: inline;
		}
		
			#navigation li a,
			#navigation li span {
				display: block;
				height: 153px;
				text-indent: -9999px;
				overflow: hidden;
				background: url(/content/v1/us/img/nav.gif) no-repeat;
				border: 0;
			}
			
				#navigation li#nav-home a,
				#navigation li#nav-home span {
					width: 106px;
				}
				
					#navigation li#nav-home span {
						background-position: 0 -306px;
					}
					
					#navigation li#nav-home a:hover {
						width: 106px; 
						background-position: 0 -153px;
					}
				
				#navigation li#nav-team a,
				#navigation li#nav-team span {
					width: 111px;
					background-position: -106px 0;
					background-position: -106px -459px; 
				}
				
				/*	#navigation li#nav-team span {
						background-position: -106px -306px;
					}
					
					#navigation li#nav-team a:hover {
						background-position: -106px -153px;
					}
					*/
				
				#navigation li#nav-work a,
				#navigation li#nav-work span{
					width: 110px;
					background-position: -217px 0;
					background-position: -217px -459px; 
				}
				
			/*		#navigation li#nav-work span {
						background-position: -217px -306px;
					}
					
					#navigation li#nav-work a:hover {
						background-position: -217px -153px;
					}
					*/
				#navigation li#nav-blog a,
				#navigation li#nav-blog span {
					width: 108px;
					background-position: -327px 0;
					background-position: -327px -459px; 
				}
				
			/*		#navigation li#nav-blog span {
						background-position: -327px -306px;
					}
					
					#navigation li#nav-blog a:hover {
						background-position: -327px -153px;
					}*/
				
				#navigation li#nav-contact a,
				#navigation li#nav-contact span {
					width: 164px;
					background-position: -435px 0;
				}
					#navigation li#nav-contact span {
						background-position: -435px -306px;
					}
					
					#navigation li#nav-contact a:hover {
						background-position: -435px -153px;
					}
				
				/* rss */
				
				#navigation li#nav-rss a {
					position: absolute; 
					width: 50px;
					height: 53px;
					background: url(/content/v1/img/rss.png);
					left:924px;
					top:128px;
					*left: 570px;
				}
				
				
 
/* ------------------------ 
		content
------------------------ */
 #content {
 	clear: both;
 	background: url(/content/v1/img/bg-content.jpg) repeat-x top;
	top: -1px;
	position: relative;
	margin-left: 13px;
	border-left: 1px solid #a82d01;
 }
 
 	h3#tagline {
		color: #fff;
		font-size:3.7em;
		font-weight:normal;
		padding:0 0 0.3em 10px;
		position:absolute;
		font-weight: normal;
		width: 960px;
	}
	
		.sIFR-active h3#tagline {
			margin-top: 6px;
		}
		

	#inner-content {
		background: url(/content/v1/img/bg-innercontent.gif) no-repeat top;
		width: 940px;
		padding-right: 3px;
		position:relative;
		top:59px;
		font-size:1.2em;
		margin: 0 0 59px 10px;
	}
	
		#inner-content p {
			padding: .5em 0;
		}
		
			#inner-content p.footnote {
				font-size: .8em;
				color: #999;
			}
	
	/* homepage */
	
	h2 {
		color: #111111;
		font-size: 2.2em;
		padding-bottom: .2em;
	}
	
	#best-work {
		float: left;
		_display: inline;
		width: 456px;
		padding: 22px;
	}
	
		#best-work p img {
			margin-top: .5em;
			border: 11px solid #65c3d9;
		}
	
	#mad-ramblings {
		width: 395px;
		float: left;
		_display: inline;
		border-left: 1px dotted #b7b6b6;
		padding: 22px;
		background: url(/content/v1/img/ramblings-bg.jpg) repeat-y left;
	}
	
		p.date {
			background: #efefef;
			font-size: 3.2em;
			padding: 2px 5px 0 5px;			
			display: inline;
			position: relative;
			left: -22px;
			color: #000;
			float: left;
		}
		
		h4 {
			float: left;
			_display: inline;
			margin-left: -16px;
			font-size: 2em;
		}
		
		p.posted {
			float: left;
			_display: inline;
			width: 270px;
			margin-left: -16px;
		}
		
			p.posted span.by {
				text-transform: uppercase;
				background: url(/content/v1/img/keyboard-icon.gif) no-repeat top left;
				padding-left: 20px;
				margin-left: 5px;
			}
		
		div.article {
			clear: both;
			padding: .5em 10px .5em 80px;
		}
		
			p.date span.year {
				color: #4c4c4c;
			}
	
		ul.entry-options {
			background: #efefef;
			padding: 10px;
			margin: 1em 0 1em 80px;
			display: block;
		}
		
			ul.entry-options li {
				float: left;
				width: 147px;
				display: block;
				}
				
				ul.entry-options li a {
					padding-right: 25px;
					text-transform: uppercase;
					text-decoration: none;
					padding: .2em 25px .2em 0;
					border: 0;
					}
				
				ul.entry-options li.entry-comment a {
					padding-right: 20px;
					color: #50bdd6;
					background: url(/content/v1/img/comments-icon.gif) no-repeat right;
				}
				
			li.keep-reading  {
				text-align: right;
				}
				
				ul.entry-options li.keep-reading a {
					background: url(/content/v1/img/arrow-icon.gif) no-repeat right;
				}
				
/* ------------------------ 
		contact
------------------------ */
				
#contactInfo {
	padding: 22px;
	width: 210px;
	float: left;
	_display: inline;
	padding-bottom: 230px;
	background:url(/content/v1/img/robot-left.png) no-repeat bottom right;
}

#ContactForm {
	width: 350px;
	padding: 22px;
	float: left;
	_display: inline;
}

	#ContactForm dt {
		padding-top: 1em;
	}

	#ContactForm dd input,
	#ContactForm dd textarea  {
		width: 350px;
		padding: 2px;
		background: #efefef;
		border: 1px solid #999;
	}
	
	#ContactForm dd textarea  {

		height: 70px;
		}
		
	#ContactForm #name {
		width: 330px;
		padding-right: 20px;
		background: #efefef url(/content/v1/img/comments-icon.gif) no-repeat  334px 3px;
	}
		
	#ContactForm #from {
		width: 330px;
		padding-right: 20px;
		background: #efefef url(/content/v1/img/email.gif) no-repeat  334px 5px;
	}
	
	#sendIt {
		margin: 1em 0 0 255px;
	}
	
/* ------------------------ 
		footer
------------------------ */
 #footer {
 	clear: both;
	background: #111111;
	border-top: 1px solid #353434;
	border-bottom: 1px solid #353434;
	color: #fff;
	padding-left: 200px;
	margin-bottom: 6em;
	position: relative;
	font-size: 1.1em;
 }
 
 	#footer div {
		width: 215px;
		float: left;
		_display: inline;
		min-height: 100px;
		margin: 1em 10px;
		padding: 0 10px 10px 10px;
		border-right: 1px dotted #1e1e1e;
		min-height: 100px;
		position: relative;
		z-index: 9999;
		min-height: 200px;
		_height: 200px;
	}
	
		#footer h3 {
			color: #fff;
			font-size: 2.2em;
		}
		
		#footer li {
			background: url(/content/v1/img/bullet-footer.gif) no-repeat 0 7px;
			padding-left: 10px;
			
			margin: .3em 0;
		}
		
		#footer ul#social li {
			display: block;
			float: left;
			_display: inline;
			padding: 0;
			background: transparent;
			margin-right: 10px;
		}
		
			#footer ul#social li a {
				display: block;
				width: 42px;
				height: 42px;
				text-indent: -9999px;
				overflow: hidden;
				border: 0;
				}
				
				#footer ul#social #twitter a {
					background: url(/content/v1/us/img/twitter.gif) no-repeat;
				}
				
				#footer ul#social #facebook a {
					background: url(/content/v1/us/img/facebook.gif) no-repeat;
				}
				
				#footer ul#social #linkedin a {
					background: url(/content/v1/us/img/linkedin.gif) no-repeat;
				}
		
		#footer a.email {
			display: block;
			padding-left: 16px;
			background: url(/content/v1/img/email-footer.gif) no-repeat 0 6px;
			border: 0;
			margin-top: 1em;
		}
		
		p#copyright {
			clear: both;
			text-transform: uppercase;
			color: #898989;
			position: absolute;
			bottom : -5em;
			left: 0;
			padding-left: 20px;
			margin-top: 2em;
			background:url(/content/v1/img/robot.png) no-repeat left;
			height: 27px;
			padding: 205px 0 0 220px;
		}
	
/* ------------------------ 
		EASY CLEARING 
------------------------ */
.clear { clear:both;}
.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {
height:1%;
}
*+html .clearfix {
height:1%;
}
.clearfix {
display:block;
}
/* End hide from IE-mac */

/* ------------------------ 
		sifr
------------------------ */

@media screen {
  .sIFR-flash {
    visibility: visible !important;
    margin: 0;
    padding: 0;
  }
  
  .sIFR-replaced, .sIFR-ignore {
    visibility: visible !important;
  }
  
  .sIFR-alternate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
  }
  
  .sIFR-replaced div.sIFR-fixfocus {
    margin: 0pt; 
    padding: 0pt; 
    overflow: auto; 
    letter-spacing: 0px; 
    float: none;
  }
}

@media print {
  .sIFR-flash {
    display    : none !important;
    height     : 0;
    width      : 0;
    position   : absolute;
    overflow   : hidden;
  }
  
  .sIFR-alternate {
    visibility : visible !important;
    display    : block   !important;
    position   : static  !important;
    left       : auto    !important;
    top        : auto    !important;
    width      : auto    !important;
    height     : auto    !important;
  }
}




/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
@media screen {
  /* Example:
  .sIFR-active h1 {
    font-family: Verdana;
    visibility: hidden;
  }
  */
}