/* CSS Document
/* for redflannelgroup.com
/* Markup by Sean Flanagan (sean@redflannelgroup.com)
/* All markup, copy, and images © Red Flannel Design Group, Inc. or by permission of their repsective owners.
*/

/* Welcome to the fully commented CSS for Red Flannel. 
/* We fully expect there to be some parties interested in our markup, and you're one of them! 
/* So enjoy the markup (if you can) and let's get to it...
*/

body {
	font-size: 12px; /* Set the Em for the document */
	font-family: "Times New Roman", Times, serif;
	width: 948px; /* Body width set in pixels so content grows only vertically with user text size adjustment. */
	background: url(images/bg-work.jpg) no-repeat center 0px; /* Large illustrated background for the page */
	margin: 0px auto; /* The left and right margins set to auto will center the content in the window. */
	position: relative;
}
#container {
	width: 924px;
	padding: 1em 12px; /* Again, all horizontal measurements will be in pixels. */
	border-left:  1px solid rgb(230,230,230); /* Using RGB for light grays often gets better results than Hex. */
	background: url(images/bg-paper.jpg) no-repeat right bottom; /* Paper texture on main content with page curl on lower right. */
	margin-bottom: 1em;
}
	/* Fix it for Redmond */
	* html #container {width: 948px;}
	
	#container h1 a:link, #container h1 a:visited {
		color: rgb(153,0,0);
		text-decoration: none;
	}
	#container h1 a:hover {
		color: black;
		text-decoration: none;
	}
	#container h1 a:active {
		color: rgb(102,102,102);
	}
#header, #nav, #content, #portfolio_list, #feeds, #footer {
	width: 924px;
	position: relative;
}
#header {
	height: 132px;
	border-bottom: 12px solid rgb(153,0,0);
	overflow: visible;
}
	#header a {
		display: block;
		float: left;
		margin-left: -14px;
		height: 132px;
		width: 400px;
		text-indent: -2000px;
		background: url(images/logo2.gif) no-repeat 0px 0px;
	}
	#header h3 {
		display: block;
		height: 128px;
		width: 300px;
		text-indent: -2000px;
		background: url(images/tagline.gif) no-repeat right bottom;
		position: absolute;
		right: 0px;
		top: 0px;
	}
#nav {
	height: 3.1em;
	overflow: hidden;
}
	#nav.activesub {
		height: 6em;
	}
	#nav li {
		display: block;
		float: left;
		width: 144px;
		height: 3em;
		margin-right: 12px;
	}
		#nav li a:link, #nav li a:visited, #footer {
			font-size: 1.2em;
			text-transform:  uppercase;
			line-height: 2.4em;
			color: rgb(102,102,102);
			display: block;
			position: relative;
			text-decoration: none;
			letter-spacing: 0.25em;
			border-bottom: 2px solid rgb(245,245,245);
			padding: 0px 12px;
		}
		#nav li a:hover {
			color: black;
			border-bottom: 2px solid rgb(204,0,0);
		}
		#nav li a:active {
			color: rgb(153,0,0);
		}
		#portfolio {
			width: 276px !important;
			background: url(images/bg-corner.gif) no-repeat right bottom;
			padding: 0.9em 12px;
			height: 1.3em !important;
		}
			#nav.activesub #portfolio {
				height: 4.5em !important;
			}
			.view {
				font-size: 0.8em;
			}
			.port {
				font-size: 1.2em;
				text-transform:  lowercase;
			}
			.folio {
				font-size: 1.25em;
				text-transform: lowercase;
				font-style: italic;
			}
			#portfolio ul {
				width: 276px;
				margin-top: 1em;
				border-top: 1px solid rgb(204,0,0);
			}
				#portfolio ul li {
					display: inline;
					float: left;
					padding: 12px 0px 0px 0px;
					width: 126px;
				}
			#nav #portfolio a:link, #nav #portfolio a:visited {
				border-bottom: none;
				padding: 0px 0px 0px 0px !important;
				line-height: 0.8em;
			}
			#nav #portfolio a:hover{
				border-bottom: none;
				color: rgb(204,0,0);
				padding: 0px 0px 0px 0px !important;
				line-height: 0.8em;
			}
			#nav #portfolio a:active {
				color: black;
			}
		#nav li.last {
			padding-right: 0px !important;
			margin-right: 0px !important;
			width: 144px;
		}
#content {
	padding-top: 1em;
}
	#content.text {
		overflow: hidden;
	}
	#bigpicture {
		display: block;
		width: 624px;
		height: 408px;
		padding: 12px;
		background: url(images/bg-corner.gif) no-repeat right bottom white;
		border-left:  1px solid rgb(230,230,230);
		position: absolute;
		top: 1em;
		left: -36px;
	}
	#intro {
		display: block;
		position: relative;
		left: 624px;
		width: 276px;
		padding: 1em 12px;
		border-top: 6px solid rgb(204,0,0);
		height: 16.25em;
		font-size: 2em;
		color: rgb(215,153,153);
		line-height: 2em;
		text-transform: uppercase;
		letter-spacing: 3px;
	}
		.capital {
			color: rgb(170,170,170);
			font-style: normal;
			display: block;
			position: relative;
			letter-spacing: 2px;
		}
		.capital1 {
			font-size: 1.5em;
			color: rgb(170,170,170);
			font-style: normal;
			display: block;
			position: relative;
			letter-spacing: 3px;
			font-weight: lighter;
		}
	.sc {
		font-size: 0.85em;
	}
	#project_info {
		display: block;
		position: relative;
		left: 624px;
		width: 276px;
		padding: 1em 12px;
		border-top: 6px solid rgb(204,0,0);
		height: 34.5em;
		font-size: 1em;
		line-height: 1.5em;
	}
		#project_info h1 {
			font-size: 2em;
			color: rgb(153,0,0);
			line-height: 1em;
		}
		#project_info h2 {
			font-size: 1.5em;
			color: rgb(102,102,102);
			font-style: italic;
			margin-bottom: 1em;
		}
		#project_info p {
			font-size: 1.25em;
			color: rgb(102,102,102);
			margin-bottom: 1.25em;
		}
		#project_info li {
			font-size: 1.25em;
			text-transform: uppercase;
			color: rgb(153,0,0);
			line-height: 1.5em;
			letter-spacing: 1px;
		}
			#project_info li a:link, #project_info li a:visited {
				color: rgb(153,0,0);
				text-decoration: none;
			}
			#project_info li a:hover {
				color: black;
				text-decoration: none;
			}
			#project_info li a:active {
				color: red;
				text-decoration: none;
			}
	#headline {
		display: block;
		position: relative;
		height: 4em;
		background: no-repeat top left;
		text-indent: -9999px;
	}
		#headline.news {
			background-image: url(images/news_headline.gif);
		}
		#headline.blog {
			background-image: url(images/blog_headline.gif);
		}
		#headline.portfolio {
			background: url(images/portfolio_headline.gif) no-repeat 0px 6px;
		}
		#headline.about {
			background: url(images/about_headline.gif) no-repeat 0px -6px;
		}
		#headline.contact {
			background: url(images/contact_headline.gif) no-repeat 0px -6px;
		}
	#main_story {
		display: block;
		float: left;
		width: 588px;
		padding: 1em 12px;
		border-top: 2px solid rgb(204,0,0);
		margin-right: 12px;
	}
		#main_story h1 {
			font-size: 3em;
			line-height: 1em;
			font-weight: normal;
			font-variant: normal;
			text-transform: uppercase;
			color: rgb(153,0,0);
			text-decoration: none;
			letter-spacing: 0.1em;
			margin-top: -0.1em;
			margin-bottom: 0.13em;
		}
		#main_story h2 {
			display: block;
			height: 24px;
			width: 276px;
			text-indent: -2000px;
			margin-bottom: 6px;
			background: url(images/news.gif) no-repeat top left;
		}
			#main_story.single h2 {
				background: url(images/story.gif) no-repeat top left;
			}
		#main_story h3 {
			font-size: 1em;
			text-transform: uppercase;
			color: rgb(102,102,102);
			line-height: 1.5em;
			letter-spacing: 0.2em;
			display: block;
			clear: both;
			float: left;
			width: 156px;
			height: 1.5em;
			margin-bottom: 1em;
		}
		#main_story h4 {
			font-size: 1.5em;
			text-transform: uppercase;
			color: rgb(102,102,102);
			line-height: 1em;
			letter-spacing: 0.2em;
			margin-bottom: 1em;	
			margin-left: 156px;			
		}
			#main_story h4.name {
				magin-top: 1em;
				margin-bottom: 0px !important;
				color: rgb(204,0,0);
				display: block;
			}
		#main_story h5 {
			font-size: 1.2em;
			text-transform: uppercase;
			font-style: italic;
			color: rgb(102,102,102);
			line-height: 1.25em;
			letter-spacing: 0.2em;
			margin-left: 156px;	
		}
		#main_story h6 {
			font-size: 1.5em;
			color: rgb(102,102,102);
			line-height: 1.25em;
			margin-left: 156px;
			margin-bottom: 1.25em;
		}
		#main_story p {
			font-size: 1.25em;
			line-height: 1.2em;
			color: #000000;
			text-decoration: none;
			margin-bottom: 1.2em;
			width: 432px;
			margin-left: 156px;
		}
		#main_story #summary p {
			font-size: 1.5em;
			line-height: 1em;
			color: rgb(84,84,84);
			margin-bottom: 1.1em;
			margin-top: -0.15em;
		}
			#main_story #summary p:first-line {
				text-transform: uppercase;
				letter-spacing: 1px;
			}
		#main_story blockquote {
			display: block;
			float: left;
			width: 276px;
			padding: 0.5em 12px;
			font-size: 1.5em;
			line-height: 1em;
			font-style: italic;
			color: rgb(204,0,0);
		}
	#blog_story {
		display: block;
		float: left;
		width: 432px;
		padding: 1em 12px;
		border-top: 2px solid rgb(204,0,0);
		margin-right: 12px;
	}
		#blog_story h1 {
			font-size: 3em;
			line-height: 1em;
			font-weight: normal;
			font-variant: normal;
			text-transform: uppercase;
			color: rgb(153,0,0);
			text-decoration: none;
			letter-spacing: 0.1em;
			margin-top: -0.1em;
			margin-bottom: -0.13em;
		}
		#blog_story h2 {
			display: block;
			height: 24px;
			width: 276px;
			text-indent: -2000px;
			margin-bottom: 6px;
			background: url(images/featured.gif) no-repeat top left;
		}
			#blog_story h2.recent {
				background: url(images/story.gif) no-repeat top left !important;
			}
		#blog_story h3 {
			font-size: 1em;
			text-transform: uppercase;
			color: rgb(102,102,102);
			line-height: 3em;
			letter-spacing: 0.2em;
			display: block;
			padding-right: 0.25em;
			height: 1.5em;
			margin-bottom: 2.05em;
		}
		#blog_story p {
			font-size: 1.25em;
			line-height: 1.2em;
			color: #000000;
			text-decoration: none;
			margin-bottom: 1.2em;
			width: 432px;
			display: block;
		}
		#blog_story #summary p {
			font-size: 1.5em;
			line-height: 1em;
			color: rgb(84,84,84);
			margin-bottom: 1.1em;
			display: block;
		}
			#blog_story #summary p:first-line {
				text-transform: uppercase;
				letter-spacing: 1px;
				display: block;
			}
		#blog_story blockquote {
			display: block;
			float: right;
			width: 132px;
			padding: 0.5em;
			font-size: 1.5em;
			line-height: 1em;
			font-style: italic;
			color: rgb(204,0,0);
		}
		#blog_story img {
			max-width: 488px;
			display: block;
			position: relative;
		}
			#blog_story img.left {
				float: left;
				margin-right: 12px;
			}
			#blog_story img.right {
				float: right;
				margin-left: 12px;
			}
	#blog_nav {
		display: block;
		float: left;
		width: 144px;
		margin-right: 12px;
	}
		#blog_nav h2 {
			display: block;
			height: 36px;
			width: 120px;
			text-indent: -2000px;
			margin-bottom: 0.6em;
			padding: 0px 12px;
			border-top: 2px solid rgb(204,0,0);
		}
			#blog_nav h2.categories {
				background: url(images/blog_categories.gif) no-repeat 12px 12px;
			}
			#blog_nav h2.archive {
				background: url(images/blog_archive.gif) no-repeat 12px 12px;
			}
		#blog_nav ul {
			padding: 0px 12px;
			margin-bottom: 2.25em;
		}
			#blog_nav ul li {
				font-size: 1em;
				height: 1.5em;
				text-transform: uppercase;
			}
				#blog_nav ul li a:link, #blog_nav ul li a:visited {
					line-height: 1.4em;
					display: block;
					position: relative;
					color: rgb(102,102,102);
					text-decoration: none;
					border-bottom: 0.1em solid rgb(245,245,245);
				}
				#blog_nav ul li a:hover {
					line-height: 1.4em;
					position: relative;
					color: black;
					text-decoration: none;
					border-bottom: 0.1em solid rgb(153,153,153);
				}
				#blog_nav ul li a:active {
					position: relative;
					color: black;
					text-decoration: none;
					border-bottom: 1px solid rgb(153,0,0);
				}
#portfolio_list.main {
		display: block;
		float: left;
		width: 288px;
		margin-right: 12px;
}
#portfolio_list h2 {
			display: block;
			position: relative;
			height: 36px;
			width: 300px;
			text-indent: -2000px;
			margin-bottom: 0.6em;
			border-top: 2px solid rgb(204,0,0);
}
	#portfolio_list h2.industry {
			background: url(images/portfolio_industry.gif) no-repeat 12px 12px;
	}
	#portfolio_list h2.media {
			background: url(images/portfolio_media.gif) no-repeat 12px 12px;
	}
#portfolio_list ul {
	display: block;
	position: relative;
	overflow: hidden;
	width: 276px;
	margin-bottom: 8px;
}
	#portfolio_list li {
		font-size: 1.25em;
		text-transform: uppercase;
		color: rgb(153,0,0);
		line-height: 1.2em;
		letter-spacing: 1px;
		display: block;
		float: left;
		height: 18px;
		width: 276px;
		padding-left: 12px;
		margin-right: 12px;
	}
		#portfolio_list li.last {
			margin-right: 0px !important;
		}
		#portfolio_list li a:link, #portfolio_list li a:visited {
			color: rgb(102,102,102);
			text-decoration: none;
		}
		#portfolio_list li a:hover {
			color: black;
			text-decoration: none;
		}
		#portfolio_list li a:active {
			color: red;
			text-decoration: none;
		}
#portfolio_category.main {
		display: block;
		float: left;
		width: 612px;
		padding: none;
		margin-left: 12px;
}
#portfolio_category ul {
	display: block;
	position: relative;
	overflow: hidden;
	width: 936px;
	margin-bottom: 8px;
	margin-left: -12px;
}
	#portfolio_category h2 {
		display: block;
		position: relative;
		height: 36px;
		width: 924px;
		text-indent: -2000px;
		margin-bottom: 0.6em;
		border-top: 2px solid rgb(204,0,0);
	}
		#portfolio_category h2 {
			display: block;
			position: relative;
			height: 36px;
			width: 924px;
			text-indent: -2000px;
			margin-bottom: 0.6em;
			border-top: 2px solid rgb(204,0,0);
		}
		 #portfolio_category.main h2 {
		 	width: 612px;
		 }
		#portfolio_category h2.newwork {
			background: url(images/portfolio_newwork.gif) no-repeat 12px 12px;
		}
	#portfolio_category.main ul {
		width: 636px;
	}
	#portfolio_category li {
		font-size: 1.25em;
		text-transform: uppercase;
		color: rgb(153,0,0);
		line-height: 1.5em;
		letter-spacing: 1px;
		display: block;
		float: left;
		height: 216px;
		width: 276px;
		padding: 12px;
		margin-bottom: 12px;
		margin-left: 12px;
		background: url(images/bg-corner.gif) no-repeat right bottom white;
	}
		#portfolio_category li a:link, #portfolio_category li a:visited {
			color: rgb(102,102,102);
			text-decoration: none;
		}
		#portfolio_category li a:hover {
			color: black;
			text-decoration: none;
		}
		#portfolio_category li a:active {
			color: red;
			text-decoration: none;
		}
		#portfolio_category li img {
			width: 276px;
			height: 180px;
		}
#feeds, #feeds_news {
	overflow: hidden;
}
#feed_news {
	float: left;
	width: 276px;
}
	#feeds h1, #feeds_news h1, #portfolio_category h1 {
		font-size: 1.75em;
		line-height: 0.875em;
		font-weight: normal;
		font-variant: normal;
		text-transform: uppercase;
		color: rgb(153,0,0);
		text-decoration: none;
		letter-spacing: 0.1em;
	}
		#portfolio_category h1 {
			display: block;
			width: 900px;
			padding: 12px;
			border-top: 2px solid rgb(204,0,0);			
		}
	#feeds h2, #feeds_news h2 {
		display: block;
		height: 24px;
		width: 276px;
		text-indent: -2000px;
		background: no-repeat top left;
		margin-bottom: 6px;
	}
	#feeds h3, #feeds_news h3 {
		font-size: 1em;
		text-transform: uppercase;
		color: rgb(102,102,102);
		line-height: 1.5em;
		letter-spacing: 0.2em;
	}
		#feeds h3 em, #feeds_news h3 em, #blog_story h3 em, #blog_story h4 em {
			font-style: italic;
			text-transform: lowercase;
		}
	#feeds p, #feeds_news p {
		font-size: 1em;
		line-height: 1.5em;
		color: rgb(84,84,84);
		text-decoration: none;
		margin-bottom: 1.5em;
	}
	#blog {
		display: block;
		float: left;
		width: 276px;
		padding: 1em 12px;
		margin-right: 12px;
		border-top: 2px solid rgb(204,0,0);
		position: relative;
	}
		#feeds_news #blog {
			width: 276px;
			margin-right: 0px;
			margin-top: -3px;
		}
		#blog h2 {
			background: url(images/blog.gif) no-repeat;
		}
	#news, #around {
		display: block;
		float: left;
		width: 588px;
		padding: 1em 12px;
		border-top: 2px solid rgb(204,0,0);
		position: relative;
	}
		#feeds_news #news, #feeds_news #around {
			width: 276px;
		}
		#news h2, #around h2 {
			background: url(images/news.gif) no-repeat;
		}
			#feeds_news #news h2 {
				background: url(images/recent.gif) no-repeat;
			}
			#feeds_news #around h2 {
				background: url(images/blog_around.gif) no-repeat;
			}
		#news h3, #around h3 {
			display: block;
			float: left;
			clear: both;
			width: 156px;
			height: 1.5em;
		}
			#feeds_news #news h3, #feeds_news #around h3 {
				float: none;
				width: 276px;
			}
		#news p, #around p {
			display: block;
			float: left;
			width: 432px;
			margin-bottom: 1.5em;
		}
			#feeds_news #news p, #feeds_news #around p {
				width: 276px;
			}
#footer {
	font-size: 1em;
	color: rgb(204,204,204);
	margin-bottom: 1.5em;
	background: white;
	border-bottom: none;
}