/* ------------------------------------------------------------------------------ */
	/*
	
		project:				BreakAway, Ltd.
		file: 					layout.css
		creator:				r2integrated
		creation date:	02/07/2007
		copyright:			(c) 2007 r2integrated. All rights reserved.
	
	*/
/* ------------------------------------------------------------------------------ */


/* ------------------------------------------------------------------------------ */
	/*
	
		File Layout
		
		1. General
			1.1 General Outer Layout
			1.2 Header Layout
			1.3 Nav Tier 1 Layout
				1.3.1 Nav Tier 1 Rollover Styles
			1.4 Nav Utility layout
		2. Index
		3. Interior
			3.1 Main Content
			3.2 Sub Content
			3.3 Nav Tier 2
		
	*/
/* ------------------------------------------------------------------------------ */


/* =1. General Layout
   --------------------------------------------------------------------*/

		body
		{
			background: #001A24 url(../images/bg-ind-blue-rpt_x.gif) left top repeat-x;
			
		}
		
		/* =1.1 General Outer Layout
		   --------------------------------------------------------------------*/
		
				#wrap 
				{
					width: 900px;
					margin: 0 auto;
					padding: 0 0 20px 0;
				}
				
				#index #wrap
				{
					width: 960px;
					margin: 0 auto;
					padding: 0 0 20px 0;
				}
				
				.container 
				{
					height: 100%;
					float: left;
				}
				
				.container-inner {
					height: 100%;
					float: left;
					margin: 0 0 5px 5px;
				}
				
				#container-inner-2 {
					height: 100%;
					float: left;
					margin-left: -1px;
				}
		
		/* =1.1 General Outer Layout End
		   --------------------------------------------------------------------*/
		
		/* =1.2 Header Layout
		   --------------------------------------------------------------------*/
		
				#header {
					width: 100%;
					height: 127px;
					position: relative;
				}
				
				#branding {
					width: 645px;
					height: 80px;
					position: absolute;
					left: 8px;
					top: 9px;
				}
				
				#branding-logo {
					display: inline;
					float: left;
					width: 205px;
					height: 80px;
					margin:1px 0 0 0;
				}
				
				#branding-tagline {
					display: inline;
					float: left;
					margin:0 0 0 30px;
				}
		
		/* =1.2 Header Layout End
		   --------------------------------------------------------------------*/
		
		/* =1.3 Nav Tier 1 Layout
		   --------------------------------------------------------------------*/
		
				#nav-tier1 {
					position: absolute;
					top: 96px;
					left: 169px;
				}
				#nav-tier1 ul {
					list-style: none;
				}
				#nav-tier1 li {
					float: left;
					padding: 1px;
					border: solid 1px #75BFE8;
					margin-left: 10px;
				}
				#nav-tier1 li#n01 {
					margin-left: 0;
				}
				#nav-tier1 li a 
				{
					display: block;
					float: left;
					height: 15px;
					padding: 0px 5px 0px 5px;
				}
				
				/* =1.3.1 Nav Tier 1 Rollover Styles
				   --------------------------------------------------------------------*/
				
						.about #nav-tier1 li#n01,
						.serious-games #nav-tier1 li#n02,
						.entertainment #nav-tier1 li#n03,
						.mosbe #nav-tier1 li#n04,
						.difference #nav-tier1 li#n05,
						.behind-the-scenes #nav-tier1 li#n06,
						.media #nav-tier1 li#n07,
						.downloads #nav-tier1 li#n08,
						.careers #nav-tier1 li#n09 
						{
						border-color: #fff;
						}

						.about #nav-tier1 li#n01 a,
						.serious-games #nav-tier1 li#n02 a,
						.entertainment #nav-tier1 li#n03 a,
						.mosbe #nav-tier1 li#n04 a,
						.difference #nav-tier1 li#n05 a,
						.behind-the-scenes #nav-tier1 li#n06 a,
						.media #nav-tier1 li#n07 a,
						.downloads #nav-tier1 li#n08 a,
						.careers #nav-tier1 li#n09 a
						{
						background-color: #BCD9F6;
						background-image: none;
						}
				
				/* =1.3.1 Nav Tier 1 Rollover Styles End
				   --------------------------------------------------------------------*/
				
		/* =1.3 Nav Tier 1 Layout End
		   --------------------------------------------------------------------*/
		
		/* =1.4 Nav Utility Layout
		   --------------------------------------------------------------------*/
		
				#nav-utility {
					position: absolute;
					right: 0px;
					top: 40px;
				}
				#nav-utility ul {
					list-style: none;
				}
				#nav-utility li {
					display: inline;
				}
				#nav-utility li a {
					font-family:"Trebuchet MS";
					font-size: 10px;
					text-decoration: none;
					padding: 2px;
				}
				#nav-utility li a:hover {
					color: #fff;
				}
		
		/* =1.4 Nav Utility Layout End
		   --------------------------------------------------------------------*/
		
		/* =1.5 Site-Info Layout
		   --------------------------------------------------------------------*/
		
				#siteinfo
				{
					display:inline;
					float:left;
					width:100%;
					margin:11px 0 0 0;
					padding:9px 0 0 0;
					background: url(../images/sep-3pt-dotted-white.gif) left top repeat-x;
				}
				
					#siteinfo-copyright
					{
						display:inline;
						float:left;
						width:300px;
					}
					
					#siteinfo-contact
					{
						display:inline;
						float:left;
						width:300px;
					}
					
						#siteinfo-contact .locations
						{
							display:none;
						}
						
							#siteinfo-contact .locations li
							{
								display:inline;
								margin:0 12px 0 0;
							}

					#siteinfo-credit
					{
						display:inline;
						float:right;
						width:300px;
						text-align:right;
					}
					
					#siteinfo-credit a
					{
						position:relative;
						padding-right:20px;
					}
					
					#siteinfo-credit a img
					{
						display:inline;
						vertical-align:top;
					}
					
		/* =1.5 Site-Info Layout End
		   --------------------------------------------------------------------*/
		
/* =1. General layout end
   --------------------------------------------------------------------*/

/* =2.0 Index
   --------------------------------------------------------------------*/

		#index #main-content-top 
		/* Top border around content */ 
		{
			width: 680px;
			height: 6px;
			font-size: 2px;
			background: url(../images/ind-border_mc_t.gif) no-repeat left top;
		}
		
		
		#index #main-content-middle 
		/* 
			Middle border around content 
			Follows height of content
		*/ 
		{
			width: 678px;
			position: relative;
			border-left: solid 1px #008fc7;
			border-right: solid 1px #008fc7;
			margin: 1px 0 1px 0;
		}
		
		#index #main-content 
		{
			display:inline;
			float: left;
			position: relative;
			left: 3px;
				width: 672px;
				min-height:30em; /* needs to be translated to PC */
			margin: -3px 0 0 0;
			padding-bottom: 30px;
			background: url(../images/bg_content.gif) repeat left top;
		}
		
		#index #main-content div.wrap
		{
			margin: 0 5px;
		}
		
		#index #main-content-bottom 
		/* 
			bottom border around content 
		*/ 
		{
			width: 680px;
			height: 6px;
			font-size: 2px;
			background: url(../images/ind-border_mc_b.gif) no-repeat left bottom;
		}

/* =2.0 Index End
   --------------------------------------------------------------------*/

/* =3.0 Interior
   --------------------------------------------------------------------*/

		/* =3.1 Main Content Area
		   --------------------------------------------------------------------*/
		
				#main-content-top 
				/* Top border around content */ 
				{
					width: 533px;
					height: 6px;
					font-size: 2px;
					background: url(../images/border_mc_t.gif) no-repeat left top;
				}
				
				#main-content-img 
				/* 
					Top Image on page, as necessary 
					This Creates the background around the image. Needs to be the specific size
				*/
				{
					width: 518px;
					height: 113px;
					position: relative;
					left: 3px;
					top: 3px;
					background: url(../images/border_mc_img.gif) no-repeat left top;
				}
				
				#main-content-img img {
					position: relative;
					left: 3px;
					top: 3px;
				}
				
				#main-content-middle 
				/* 
					Middle border around content 
					Follows height of content
				*/ 
				{
					width: 531px;
					position: relative;
					border-left: solid 1px #008fc7;
					border-right: solid 1px #008fc7;
					margin: 1px 0 1px 0;
				}
				
				#main-content 
				{
					float: left;
					position: relative;
					left: 3px;
						width: 525px;
						min-height:30em; /* needs to be translated to PC */
					margin: -3px 0 0 0;
					padding-bottom: 30px;
					background: url(../images/bg_content.gif) repeat left top;
				}
				
				#main-content div.wrap
				{
					margin: 0 20px;
				}
				
				#main-content-bottom 
				/* 
					bottom border around content 
				*/ 
				{
					width: 533px;
					height: 6px;
					font-size: 2px;
					background: url(../images/border_mc_b.gif) no-repeat left bottom;
				}
				
				/* =3.1.1 About - Bios Layout
				   --------------------------------------------------------------------*/
				
						.bio
						{
							display:inline;
							float:left;
							width:100%;
							margin:12px 0 12px 0;
							padding:0 0 11px 0;
							background: url(../images/sep-3pt-dotted-white.gif) left bottom repeat-x;
						}
						
							.bio img
							{
								display:inline;
								float:left;
								width:155px;
								margin:0 12px 0 0;
								padding:2px;
								border:1px solid #008fc7;
								background:#000;
							}
							
							.bio h2
							{
								display:inline;
								float:left;
								width:310px;
							}
				
				/* =3.1.1 About - Bios Layout End
				   --------------------------------------------------------------------*/
				
				/* =3.1.2 Case Studies
				   --------------------------------------------------------------------*/
				
						.casestudy
						{
							margin:0 0 12px 0;
							padding:0 0 11px 0;
							background: url(../images/sep-3pt-dotted-white.gif) left bottom repeat-x;
						}
						
							.casestudy img
							{
								display:inline;
								float:left;
								margin:0 12px 0 0;
								padding:2px;
								border:1px solid #008fc7;
								background:#000;
							}
							
							.casestudy img+.info>h2
							{
								display:inline;
								float:left;
								width:300px;
							}
				
				/* =3.1.2 Case Studies End
				   --------------------------------------------------------------------*/
				
				/* =3.1.3 Contact Layout
				   --------------------------------------------------------------------*/
				
						.contact .col3
						{
							display:inline;
							float:left;
							width:31%;
							margin:0 2% 12px 0;
						}
				
				/* =3.1.3 Contact Layout End
				   --------------------------------------------------------------------*/
				
				/* =3.1.4 Featured Games
				   --------------------------------------------------------------------*/
				
						ul.featured li
						{
							display:inline;
							margin:0 8px 0 0;
						}
						
						.feature
						{
							margin:0 0 12px 0;
							padding:0 0 11px 0;
							background: url(../images/sep-3pt-dotted-white.gif) left bottom repeat-x;
						}
						
							.feature img
							{
								display:inline;
								float:left;
								margin:0 12px 0 0;
								padding:2px;
								border:1px solid #008fc7;
								background:#000;
							}
							
							.feature img+h2, .feature p
							{
								display:inline;
								float:right;
								width:310px;
								margin-right:0;
							}
				
				/* =3.1.4 Featured Games End
				   --------------------------------------------------------------------*/
				
				/* =3.1.5 News & Media Links
				   --------------------------------------------------------------------*/
				
						.media-list ul, .media-list ul li
						{
							list-style:none;
						}
						
						.media-list li
						{
							margin:0 0 21px 0;
						}
						
				
				/* =3.1.5 News & Media Links End
				   --------------------------------------------------------------------*/
				
				/* =3.1.6 Photo Gallery layout
				   --------------------------------------------------------------------*/
				
						#photogallery
						{
							margin:0;
							padding:0;
							list-style:none;
						}
						
							#main-content #photogallery li
							{
								display:inline;
								float:left;
								width:110px;
								margin:0 8px 2px 0;
								padding:0;
							}
				
				/* =3.1.6 Photo Gallery Layout End
				   --------------------------------------------------------------------*/
				
		/* =3.1 Main Content Area End
		   --------------------------------------------------------------------*/
		
		/* =3.2 Sub Content Area
		   --------------------------------------------------------------------*/
		
				/* =3.2.1 Modules
				   --------------------------------------------------------------------*/
				
						.module .wrap
						{
							margin:6px 6px 10px 6px;
						}
				
						/* =3.2.1.1 Testimonial
						   --------------------------------------------------------------------*/
								
								#testimonial-top  
								/* border around content */ 
								{
									width: 188px;
									height: 6px;
									font-size: 2px;
									background: url(../images/border_promo_t.gif) no-repeat left top;
								}
								
								#testimonial-middle 
								/* border around content */ 
								{
									width: 186px;
									position: relative;
									border-left: solid 1px #008fc7;
									border-right: solid 1px #008fc7;
									margin: 1px 0 1px 0;
								}
								
								#testimonial {
									width: 180px;
									float: left;
									position: relative;
									left: 3px;
									margin: -3px 0 -3px 0;
									background: url(../images/bg_content.gif) repeat left top;
								}
								
								#testimonial-bottom 
								/* border around content */ 
								{
									width: 188px;
									height: 6px;
									font-size: 2px;
									background: url(../images/border_promo_b.gif) no-repeat left bottom;
								}
								
								
						/* =3.2.1.1 Testimonial End
						   --------------------------------------------------------------------*/
						
						/* =3.2.1.2 Promo
						   --------------------------------------------------------------------*/
						
								#promo-top  
								/* border around content */ 
								{
									width: 188px;
									height: 6px;
									font-size: 2px;
									background: url(../images/border_promo_t.gif) no-repeat left top;
								}
								
								#promo-middle 
								/* border around content */ 
								{
									width: 186px;
									position: relative;
									border-left: solid 1px #008fc7;
									border-right: solid 1px #008fc7;
									margin: 1px 0 1px 0;
								}
								
								#promo {
									width: 180px;
									float: left;
									position: relative;
									left: 3px;
									margin: -3px 0 -3px 0;
									background: url(../images/bg_content.gif) repeat left top;
								}
								
								#promo-bottom 
								/* border around content */ 
								{
									width: 188px;
									height: 6px;
									font-size: 2px;
									background: url(../images/border_promo_b.gif) no-repeat left bottom;
								}
						
						/* =3.2.1.2 Promo End
						   --------------------------------------------------------------------*/
						
				/* =3.2.1 Modules End
				   --------------------------------------------------------------------*/
				
		/* =3.2 Sub Content Area End
		   --------------------------------------------------------------------*/
		
		/* =3.3 Nav Tier 2
		   --------------------------------------------------------------------*/
		
				#nav-tier2-top 
				/* border around content*/ 
				{
					width: 165px;
					height: 6px;
					font-size: 2px;
					background: url(../images/border_nt2_t.gif) no-repeat left top;
				}
				
				#nav-tier2-middle 
				/* border around content*/ 
				{
					width: 163px;
					position: relative;
					border-left: solid 1px #008fc7;
					border-right: solid 1px #008fc7;
					margin: 1px 0 1px 0;
				}
				
				#nav-tier2-middle img {
					display: block;
				    position: relative;
					left: 3px;
					margin: -3px 0 1px 0;
				}
				
				#nav-tier2 {
					width: 157px;
					float: left;
					position: relative;
					left: 3px;
					margin: 0 0 -3px 0;
					/*background: url(../images/bg_content.gif) repeat left top;*/
				}
				
				#nav-tier2-bottom 
				/* border around content*/ 
				{
					width: 165px;
					height: 6px;
					font-size: 2px;
					background: url(../images/border_nt2_b.gif) no-repeat left bottom;
				}
		
		/* =3.3 Nav Tier 2 End
		   --------------------------------------------------------------------*/
		
/* =3.0 Interior End
   --------------------------------------------------------------------*/