/* -------------------------------------------------------------- 
	
	content-design.css	
	* Styles for content-level markup
	
-------------------------------------------------------------- */

			.content { }

				/* Styles for Content Area */
				#contentArea { }
					
					.sectionHdr {
						position: absolute;
						top: 137px;
						left: 24px;
						overflow: hidden;
						}
					
						/* sIFR Headers*/
						.section.sub h1.sifrHdr {
							float: left;
							margin: 0 !important;
							padding: 0 6px 0 0 !important;
							font-size: 60px;
							font-weight: normal;
							color: #F9DFE0;
							/*color: #fff;
							filter:alpha(opacity=70);
							-moz-opacity:0.7;
							-khtml-opacity: 0.7;
							opacity: 0.7;*/
						}
	
						.section.sub p.sifrLeadin {
							float: left;
							position: relative;
							top: 34px;
							margin: 0 !important;
							padding: 0 !important;
							font-size: 32px;
							font-family: Arial;
							color: #F9DFE0;
							/*color: #fff;
							filter:alpha(opacity=70);
							-moz-opacity:0.7;
							-khtml-opacity: 0.7;
							opacity: 0.7;*/
						}
                        

					/* For Sections Subpage Layout */
					.section { }
					
						.section.sub { }
						
							.section.sub hr {
								clear: both;
								margin-bottom: 1.2em;
							}
							
							.section.sub h2.mainHdr {
								margin-bottom: 16px;
								padding-bottom: 8px;
								font-size: 2em;
								font-family: "Times New Roman", Times, serif;
								font-weight: normal;
								color: #74080C;
								border-bottom: 1px dotted #B7A7A8;
							}
							
							.section.sub p {
								margin-bottom: 20px;
								padding-right: 12px;
								font-size: 1.7em;
								font-family: "Times New Roman", Times, serif;
								line-height: 20px;
							} 
	
							/*.section.sub p {
								margin-bottom: 12px;
								font-size: 1.1em;
								line-height: 16px;
							}*/
					
							.section.sub h3 {
								margin-bottom: 10px;
								font-size: 1.4em;
								font-weight: bold;
								line-height: 14px;
								color: #EC1C24;
							}
	
							.section.sub h4 {
								font-size: 1.2em;
								font-weight: bold;
								line-height: 14px;
								color: #333;
							}
	
							#aboutMainContent ul, #offeringsMainContent ul, #clienteleMainContent ul { }
								
								#aboutMainContent ul li, #offeringsMainContent ul li, #clienteleMainContent ul li {
									padding: 0 0 8px 28px !important;
									background: url(../../img/content-design/list-style.png) 0 0 no-repeat;
									font-size: 1.6em;
									font-family: "Times New Roman", Times, serif;
								}
									
							.section.sub a {
								color: #EC1C24;
								text-decoration: none;
								}
	
								.section.sub a:hover {
									border-bottom: 1px dotted #EC1C24;
									}
							
							/* content bucket */
							div.contentBucket {
								position: relative;
								/*padding-left: 94px;*/
								padding-bottom: 18px;
								}
								
								div.contentBucket img {
									position: absolute;
									top: 0;
									left: 0;		
								}
	
								div.contentBucket h4 {
									margin: 0 !important;
									padding: 2px 0 2px 0 !important;
									}
									
									div.contentBucket h4 a {
										padding-right: 18px;
										background: url(../../img/content-design/arrow-link.gif) 100% 4px no-repeat;
										}
										div.contentBucket h4 a:hover {
											border-bottom: none !important;	
										}
	
								div.contentBucket p {
									margin: 0 !important;
									padding: 0 !important;
									font-size: 12px !important;
									font-family: Arial !important;
									line-height: 14px !important;
									}
									
								div.contentBucket span {
									color: #EC1C24;
								}
						
							/* for portfolio subpages  */
							
							ul.portfolioItems {
								height: 412px;
								}
						
								ul.portfolioItems li {
									float: left;
									padding-right: 12px;
									padding-bottom: 8px;
								}
								
								ul.portfolioItems a:hover {
									border: none !important;
								}
								
								
							ul.portfolioPagination {
								clear: both;
								text-align: right;
								padding-right: 12px;
								}
								
								ul.portfolioPagination li {
									display: inline;
								}
								
								ul.portfolioPagination a {
									padding: 1px 10px 14px 4px;
									text-align: center;
									color: #333 !important;
									}
									
									ul.portfolioPagination a:hover {
										border: none !important;
										color: #EC1C24 !important;
									}
									
									ul.portfolioPagination a.selectedPag {
										background: url(../../img/content-design/bg-pagination.gif) top left no-repeat;
										color: #fff !important;
									}
									
							div.portfolioTarget {
								height: 412px;
							}
					
							div.portfolioExpand {
								position: absolute;
								top: 229px;
								left: 601px;
								padding: 32px 21px 0 22px;
								width: 210px;
								height: 358px;
								background: url(../../img/content-design/bg-portfolio_expand.png) top left no-repeat; 
								}
								
								div.portfolioShow{
									display: none;
									position: absolute;
									top: 239px;
									right: 38px;
									width: 16px;
									height: 16px;
									background: url(../../img/content-design/btn-show_hide.png) top left no-repeat; 								
								}
								
								div.portfolioShowHide {
									position: absolute;
									top: 10px;
									left: -8px;
									width: 16px;
									height: 16px;
									background: url(../../img/content-design/btn-show_hide.png) top left no-repeat; 
									}
										
									div.portfolioShowHide a {
										border: none !important;
										}
	
								div.portfolioExpand h2 {
									font-weight: bold;
									font-size: 1.1em;
									padding-bottom: 2.0em;
								}
								
								div.portfolioExpand p {
									font-size: 1.1em !important;
									font-family: arial !important;
									line-height: 16px !important;
									padding-bottom: 0 !important;
								}
								
								div.portfolioExpand ul {
									margin-bottom: 18px;
									}
								
									div.portfolioExpand ul li {
										padding: 0 0 6px 14px;
										background: url(../../img/content-design/list-style_portfolio.gif) 0 2px no-repeat;
										font-size: 1.1em !important;
									}
									
								div.portfolioExpand p a span {
									width: 14px; 
									height: 9px;
									background: url(../../img/content-design/portfolio-link-popup.png) -2px 2px no-repeat;
								}
					
							/* for about subpages  */
								
							.aboutImages {
								position: relative;
								left: -6px;
							}
								
							ul.awards { }
								
								ul.awards li {
									padding: 0 0 14px 30px !important;
									background: url(../../img/content-design/icon-awards.png) 0 -1px no-repeat !important;
								}
									
							ul.specialThanks { }
								
								ul.specialThanks li {
									padding: 0 0 14px 30px !important;
									background: url(../../img/content-design/icon-specialthanks.png) 0 0 no-repeat !important;
								}
							
							/* for Christian's Bio */
							
							.bioChristian, .bioAndrew {
								width: 574px;
								}
							
								.bg {
									position: absolute;
									top: 190px;
									right: 0;
									width: 400px;
									height: 493px;
									z-index: 1;
									}
									
									.bioAndrew .bg {
										background: url(../../img/content/about/bg-andrew.png) top right no-repeat;
									}
								
									.bioChristian .bg {
										background: url(../../img/content/about/bg-christian.png) top right no-repeat;
									}
								
								.bioQuote {
									position: relative;
									width: 388px;
									margin-bottom: 24px;
									padding: 30px 26px 30px 26px;
									background: url(../../img/content-design/bg-bio_quote.png) top left no-repeat;
									border-bottom: 1px solid #C0C0C0;
									z-index: 2;
									}
									
									.bioQuote p {
										margin: 0 !important;
										padding: 0 !important;
										font-size: 24px !important;
										line-height: 32px !important;
										color: #431C1E !important;
									}
									
								#boilerplateText p {
									position: relative;
									margin: 0;
									z-index: 2;
									}
	
									#boilerplateText span {
										display: inline;
										padding: 2px 4px 5px 6px;
										background: #fff;
										font-size: 14px !important;
										line-height: 18px !important;
										}
								
							/* Events Calendar */

							#aboutMainContent .calendar {
								position: relative;
								margin-bottom: 24px;
								padding: 0 20px 0 27px;
								width: 517px;
								height: 103px;
								background: url(../../img/content-design/bg-about_calendar_listing.png) top left no-repeat;
								}

								#aboutMainContent .calMonths {
									position: absolute;
									top: 21px;
									left: 19px;
									width: 53px;
									text-align: center;
									color: #fff;
								}
							
								#aboutMainContent .calDays {
									position: absolute;
									top: 34px;
									left: 19px;
									width: 53px;
									text-align: center;
									font-size: 3em;
									color: #fff;
								}
								
								#aboutMainContent .calendar h3 {
									position: absolute;
									top: 20px;
									left: 83px;
									font-size: 18px;
									font-weight: normal;
									font-family: "Times New Roman", Times, serif;
									color: #42181A;
								}
							
								#aboutMainContent .calendar h3 a {
									color: #42181A;
									}
									
									#aboutMainContent .calendar h3 a:hover {
										border-bottom: 1px dotted #74080C;
										color: #42181A;
										}

								#aboutMainContent .calendar p {
									position: absolute;
									top: 40px;
									left: 83px;
									padding-right: 84px;
									font-size: 16px;
									font-weight: normal;
									font-family: "Times New Roman", Times, serif;
									color: #42181A;
									}
									
								#aboutMainContent .calendar div.learnMore {
									position: absolute;
									top: 20px;
									right: 20px;
									color: #74080C;
									font-size: 12px;
									font-weight: bold;
									font-family: "Times New Roman", Times, serif;
									text-align: right;
									}

									#aboutMainContent .calendar div.learnMore a {
										color: #74080C;
										font-style: italic;
										}

										#aboutMainContent .calendar div.learnMore a:hover {
											border-bottom: 1px dotted #74080C;
											font-style: italic;
											color: #74080C;
											}
							

					/* For Double Column with Icons Layout (ie. genius solutions) */
							ul.iconCol {
								float: left; 
								width: 280px;
								}
								
								ul.iconCol.left {
									width: 260px;
									padding-right: 20px;
								}
								
								li#iconCoaches { background: url(../../img/content/solutions/icon-coaches.png) top left no-repeat; }
								li#iconPhotog { background: url(../../img/content/solutions/icon-photog.png) top left no-repeat; }
								li#iconRE { background: url(../../img/content/solutions/icon-re.png) top left no-repeat; }
								li#iconLaw { background: url(../../img/content/solutions/icon-legal.png) top left no-repeat; }
								li#iconEcomm { background: url(../../img/content/solutions/icon-ecomm.png) top left no-repeat; }
								li#iconHSM { background: url(../../img/content/solutions/icon-hsm.png) top left no-repeat; }
								li#iconCMS { background: url(../../img/content/solutions/icon-cms.png) top left no-repeat; }
								li#iconSmallBusiness { background: url(../../img/content/solutions/icon-small_biz.png) top left no-repeat; }
								
								ul.iconCol li div.contentBucket {
									margin-bottom: 16px;
									padding-left: 60px;			
									height: auto;
									min-height: 68px;
									}
									
									ul.iconCol li div.contentBucket p {
										margin-bottom: 0 !important;
										font-size: 11px !important;
										font-family: arial !important;
										line-height: 14px !important;
									}
								

						/* For Sections Landingpage Layout */
						.section.sub.landing { } /* refer to home.css */

			.blog { }
			
				/* Styles for Blog Content Area */
				#blogContentArea {
					padding: 24px 320px 24px 24px;
					color: #fff;
					}
					
					#blogContentArea h1 {
						margin-bottom: 3px;
						width: 556px;
						height: 50px;
						background: url(../../img/headers/hdr-blog.png) top left no-repeat;
						}
						
						#blogContentArea h1 span {
							display: none;
						}
						
						#blogContentArea h2 {
							margin-bottom: 4px;
							padding-left: 5px;
							font-family: "Times New Roman", Times, serif;
							font-weight: normal;
							font-size: 1.6em;
						}
						
						#blogContentArea p {
							margin-bottom: 9px;
							padding-left: 4px;
							font-weight: normal;
							font-size: 1.1em;
							line-height: 14px;
						}
						
						#blogContentArea a {
							color: #fff;
							text-decoration: none;
							}
							
							#blogContentArea a:hover {
								border-bottom: 1px dotted #E9C3C4;
							}
						
						div.comments {
							padding: 4px 0 0 37px;
							height: 21px;
							background: url(../../img/content-design/blog-comments.png) 4px 0 no-repeat;
							font-family: "Times New Roman", Times, serif;
							font-size: 1.1em;
							font-weight: bold;
						}
						
						div.author {
							padding: 3px 0 13px 4px;
							font-family: "Times New Roman", Times, serif;
							font-size: 1.1em;
							font-style: italic;
						}
						
						#blogContentArea hr {
							margin: 0 0 11px 4px;
							border: 0; 
							height: 1px; 
							background: #BA4A4D; 
								*color: #BA4A4D; 
						}
						
						div.viewPostings {
							padding-top: 6px;
							font-family: "Times New Roman", Times, serif;
							font-size: 1.1em;
							}

							div.viewPostings a {
								font-weight: bold;
								text-decoration: none;
							}
						
				
				/* Styles for Blog Focus Area */
				#blogFocusArea {
					position: absolute;
					top: 12px;
					right: 12px;
					padding: 20px 28px 28px 28px;
					width: 221px;
					height: 230px;
					background: url(../../img/layout/bg-blog-focus.png) top left no-repeat;
					}
					
					#blogFocusArea h2 {
						margin-bottom: 14px;
						font-family: "Times New Roman", Times, serif;
						font-weight: normal;
						font-size: 1.6em;
						color: #fff;
					}

					#blogFocusArea p {
						font-family: "Times New Roman", Times, serif;
						font-weight: normal;
						font-size: 1.3em;
						color: #fff;
						line-height: 20px;
					}
					
				/* Styles for Blog Callout */
				#blogCallout {
					position: absolute;
					top: 302px;
					right: 12px;
					}
					
					#blogCallout a {
						display: block;
						width: 277px;
						height: 65px;
						background: url(../../img/callouts/blog-callout-communication.png) top left no-repeat;
						filter: alpha(opacity=80);
						-moz-opacity: 0.8;
						-khtml-opacity: 0.8;
						opacity: 0.8;
						}
						
						#blogCallout a:hover {
							filter: alpha(opacity=100);
							-moz-opacity: 1.0;
							-khtml-opacity: 1.0;
							opacity: 1.0;
						}
						
						#blogCallout a span {
							display: none;	
						}



/* Design Styles for Form Elements, Sitemaps, Rollover Menus, Icons
-------------------------------------------------------------- */
	
	/* Template for Icons (see icon PNGs in the img/interface directory  */
	.iconName {
		padding: 2px 0 2px 24px;
		background: url(../../img/interface/icon_Icon_Name.gif) top left no-repeat;
	}
	
	
/* Sitemap
-------------------------------------------------------------- */

	#siteMap { }
	
		#siteMap ul { }
		
			#siteMap ul li { }
		
			#siteMap ul a { }
		
				#siteMap li ul ul { }

					#siteMap li ul li { }
				
					#siteMap li ul a { }
	


/*******************************************************************************************

TITLE: the genius development framework

VERSION: 1.0.0
URI: http://www.geniusswitchstudio.com/
AUTHOR: Christian Alexander Seeber, Principal + User Experience Architect
COPYRIGHT: 2009 genius switch studio llc

DISCLAIMER: Of course the copyright is not worth much to me, 
please feel free to borrow, steal, learn, critique (not critisize). I certainly
borrowed from countless bits i've accumulated over the years to reach this level, and 
i'm sure we'll be making updates as time goes on. I think the world of web dev is a 
great place to share and teach each other, not get pissy about who owns what... That said
we're proud of this framework, and hope if you're reading this far down, that you're gaining 
something here. Metta!

DESCRIPTION: HTML/CSS/JS Framework or Repository created by genius switch 
in order to streamline all our builds. HTML Structure is always the same, 
CSS Structure is always the same, jQuery drives everything. 
Our Markup is nearly identical on every build except for the content, 
our stylesheets, elements and classes are structured nearly identically 
every time with the only difference being the actual stylings.

**********************************************************************************************/