/*
	-- -- -- -- -- -- --
	MULTI-MEDIA INTERACTIVE
	Description: Global Page Rules
	Last Update: 6/12/2011
	Authors: Ryan Schoch
	Copyright 2011 Multi-Media Interactive 
	
	Dependencies
	 - reset.less
	-- -- -- -- -- -- --
*/

@import 'common.less'; /* Needed for LESS variables/mixins/functions */

/* = Page Structure >>
-------------------------------------------------------------- */

#mm_wrapper {
	font-size: 12px;
	font-family: 'Arial','Helvetica', sans-serif;
	color: #000;
	
	background-color: #2c2c2c; /* fallback color */
	background: -moz-linear-gradient(100% 20% 90deg, #000, #1A1A1A); /* Fire Fox */
	background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#1A1A1A), to(#000)); /* Safari, Chrome */
	background: -o-linear-gradient(#000, #1A1A1A); /* Opera */

	#mm_container {
		background-color: #dee1e5; /* fallback color */
		background: -moz-linear-gradient(100% 20% 90deg, #dee1e5, #FFFFFF); /* Fire Fox */
		background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#FFFFFF), to(#dee1e5)); /* Safari, Chrome */
		background: -o-linear-gradient(#dee1e5, #FFFFFF); /* Opera */
		.drop-shadow(1px 3px 20px 5px rgba(0, 0, 0, 0.5));
		
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
		-moz-border-radius-bottomleft: 8px;
		-moz-border-radius-bottomright: 8px;
		-webkit-border-bottom-left-radius: 8px;
		-webkit-border-bottom-right-radius: 8px;
		
		padding-bottom: 33px;
	
		/* = Header >>
		-------------------------------------------------------------- */
		#mm_header {
			border-bottom: 3px solid #333;
			width: 1020px;
			z-index: 1000;
			min-height: 90px;
			padding-bottom: 10px;
			
			background-color: #000; /* fallback color */
			background: -moz-linear-gradient(100% 90% 90deg, #000, #1A1A1A); /* Fire Fox */
			background: -webkit-gradient(linear, 0% 0%, 0% 50%, from(#1A1A1A), to(#000)); /* Safari, Chrome */
			background: -o-linear-gradient(#000, #1A1A1A); /* Opera */
			
			#mm_banner {
				border-bottom: 1px solid #090909;
				height: 17px;
				z-index: 1000; 
				.bg-gradient();
			}
				
			/* = Logo >>
			-------------------------------------------------------------- */
			h1 {
				font-size: 24px;
				font-weight: normal;
				margin: 0;
				padding: 22px 0 0 30px;
				color: #fff;
				
				img {
					border: none;
					margin: 0;
				}
			}
			
			/* = Header Nav >>
			-------------------------------------------------------------- */	
			#mm_nav ul {
				text-transform: none;
				float: right;
				margin: 1px 0 0;
			
				li {
					float: right;
					display: inline;
					margin: 0 0 1px;
					line-height: 21px;
					
					.contact-us-trig {
						cursor: pointer;
					}
				
					a, .contact-us-trig {
						display: block;
						padding: 15px 30px;
						text-decoration: none;
						color: #bbb;
						font-size: 13px;
						font-weight: bold;
						
						span {
							font-weight: normal;
							font-size: 10px;
							color: #777c82 !important; /* Fix this */
							line-height: 16px;
							text-transform: none; 
							text-shadow: none;
							margin-bottom: 8px;
						}
					
						&:hover {
							color: #fff;
							background: #000;
						}
						
						&.active {
							background: #000;
							color: #fff;
						}
					}
				}
				
				ul {
					display: none;
					position: absolute;
					top: 64px;
					left: 0;
					width: 170px;
					/* Menu shadows */
					box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
					-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
					-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
					z-index: 99999;
					padding: 0 0 10px;
					margin: 0;
					background: #000;
					border-top: 25px solid #000;
					.border-radius(4px);
					
					li {
						width: 100%;
						
						a {
							background: #000;
							display: block;
							padding: 10px 15px;
							margin: 0;
							color: #ccc;
							border-right: none;
							font-size: 11px;
							
							&:hover {
								background: #222;
								color: #fff;
							}
						}
					}
					
					ul {
						display: none;
						position: absolute;
						top: 0;
						left: 170px;
						/* Menu shadows */
						box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
						-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
						-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
						width: 170px;
						z-index: 99999;
						padding: 0 0 10px;
						margin: 0;
						background: #000;
						border-top: 4px solid #000;
						.border-radius(4px);
						
						li {
							width: 100%;
							
							a {
								background: #000;
								display: block;
								padding: 10px 15px;
								margin: 0;
								color: #ccc;
								border-right: none;
								font-size: 11px;
							}
						}
						
						ul {
							left: 100%;
							top: -4px;
						}
					}
				}
			}
		}
		
		/* = Left Column
		-------------------------------------------------------------- */
		#mm_left-col {
			margin-left: 30px;
			margin-right: 0;
			
			img {
				margin-bottom: 20px;
			}
			
			.mm_page-title {
				font-family: 'Custom';
				font-size: 30px;
				border-top: 1px solid #B4B8BA;
				padding: 20px 0;
			}
			
			p {
				font-size: 13px;
				line-height: 21px;
				color: #333;
				margin-bottom: 15px;
				
				&.last {
					margin-bottom: 20px;
				}
				
				&.has-margin {
					margin-bottom: 20px;
				}
			}
			
			.process-title {
				height: 30px;
				font-family: 'Custom';
				font-size: 25px;
				padding: 7px 0 0 50px;
				margin-bottom: 10px;
				background: transparent url(imgs/sprite.icons.png) no-repeat;
				
				&.one {
					background-position: 0 -860px;
				}
				
				&.two {
					background-position: 0 -910px;
				}
				
				&.three {
					background-position: 0 -960px;
				}	
			}
		}
			
		/* = Right Sidebar
		-------------------------------------------------------------- */
		#mm_sidebar-right {
			width: 288px;
			margin: 0 30px;
			
			.sidebar_content {
				border: 1px solid #a6a9ac;
				background-color: #eeeff1;
				padding: 30px 0;
				margin-bottom: 20px;
				
				&.last {
					margin-bottom: 0;
				}
				
				h3 {
					font-family: 'Custom';
					font-size: 30px;
					border-bottom: 3px solid #767c82;
				}
				
				&.contact {
					padding: 30px 20px;
					
					h3 {
						margin: 0 0 20px 0;
					}
				}
				
				.contact-details {

					li {
						list-style-type: none;
					}

					li:first-child {
						font-size: 30px;
						color: #343434;
						margin-bottom: 25px;

						~ li {
							margin-bottom: 5px;

							h5 {
								font-size: 14px;
								font-weight: bold;
								margin-bottom: 5px;
							}

							p {
								padding-left: 20px;
								background: transparent url(imgs/sprite.icons.png) 0 -809px no-repeat;
								
								a {
									text-decoration: none;
									color: #1d1d1e;
								}
							}
						}
					}
				}
			}
			
			h3 {
				color: #333;
				font-size: 24px;
				border-bottom: 3px solid #777c82;
				width: 250px;
				padding-bottom: 15px;
				margin: 0 20px;
				background: transparent;
			}
			
			h4 {
				
			}
			
			.history {
				
				h4 {
					font-size: 12px;
					font-weight: bold;
					line-height: 18px;
					padding: 0 20px;
					margin-top: 10px;
				}
				
				p {
					font-size: 11px;
					line-height: 18px;
					padding: 0 20px;
				}
			}
			
			ul.social_profiles {
				padding: 0 16px;
			}
			
			ul.sidebar {
				list-style: none;
				margin: 0;
				padding: 0;
				
				li {
					margin: 0;
					padding: 0 20px;
					list-style: none;
					
			/*	&:hover {
						background-color: #AE0000;
					}
			*/
				}
				
				span {
					width: 225px; /* become 290px with padding */
					display: inline-block;
					padding: 14px 0 10px 25px;
					
					font-size: 12px;
					font-weight: bold;
					color: #333;
					
					border-bottom: 1px solid #777c82;
					text-decoration: none;
					
				/*	&:hover {
						color: #FFF;
						border: none;
					}
				*/
					
				/*	background: transparent url(../images/lab_GUI_1_0.png) -600px -120px no-repeat;
					
					&:hover {
						background: #777c82 url(../images/lab_GUI_1_0.png) -600px -180px no-repeat;
						color: #fff
					}
				*/	
					&.web {
						background-position: 0 -307px;
						
				/*		&:hover {
							background-position: 0 -557px;
						}
				*/
					}
					
					&.mobile {
						background-position: 0 -340px;
						
				/*		&:hover {
							background-position: 0 -590px;
						}
				*/
					}
					
					&.video {
						background-position: 0 -369px;
						
				/*		&:hover {
							background-position: 0 -619px;
						}
				*/
					}
					
					&.motion {
						background-position: 0 -397px;
						
				/*		&:hover {
							background-position: 0 -647px;
						}
				*/
					}
					
					&.print {
						background-position: 0 -428px;
						
				/*		&:hover {
							background-position: 0 -678px;
						}
				*/
					}
					
					&.brand {
						background-position: 0 -459px;
						
				/*		&:hover {
							background-position: 0 -709px;
						}
				*/
					}
					
					&.graphic {
						background-position: 0 -498px;
						
				/*		&:hover {
							background-position: 0 -739px;
						}
				*/
					}
					
					&.writing {
						background-position: 0 -529px;
						
				/*		&:hover {
							background-position: 0 -769px;
						}
				*/
					}
				}
			}
		}
	}
	
	.mm_project {
		
		&.grid_12 {
			margin: 0;
			padding: 0;
			width: 1020px;
		}
		
		h3, h6 {
			margin-bottom: 10px;
		}
		
		h3 {
			font-size: 30px;
		}
		
		h6 {
			font-size: 20px;
		}
		
		.left-col {
			width: 280px;
			margin: 0 10px 0 30px;
			
			.project-info {
				margin: 0;
				
				li {
					list-style: inside square;
					list-style-image: url(../images/bullet.png);
					line-height: 21px;
					
					&.title {
						font-weight: bold;
						list-style: none;
					}
					
					&.client,
					&.release_date {
						list-style: none;
						margin-bottom: 10px;
					}
				}
			}
			
			.project-text {
				font-size: 12px;
				color: #777c82;
			}
		}
		
		.right-col {
			
			&.grid_8 {
				width: 640px;
				margin: 0;
				padding: 0;
				margin-left: 30px;	
			}
		}
		
		p.project-text {
			font-size: 14px;
			line-height: 21px;
			color: #333;
			margin: 10px 0 20px 0;
		}
		
		.relatedwork {
			line-height: 21px;
			list-style-image: url(../images/bullet.png);
		}
	}
	
	/* = Footer >>
	-------------------------------------------------------------- */
	.mm_footer {
		color: #44484e;
		padding: 15px 30px;

		.copyright {
			font-size: 11px;
			color: #BBB;
			float: left;
			margin-top: 6px;
			
			.company {
				font-weight: bold;
				margin: 0 5px;
			}
		}
		
		ul {
			float: right;
			
			li {
				.inline-block();
				margin-right: 3px;
				
				&.last {
					margin-right: 0;
				}
				
				.mm_icon:hover {
					
					&.facebook {
						background-position: 0 0;
					}
					
					&.twitter {
						background-position: 0 -30px;
					}
					
					&.linkedin {
						background-position: 0 -60px;
					}
					
					&.youtube {
						background-position: 0 -90px;
					}
					
					&.rss {
						background-position: 0 -120px;
					}
				}
			}
		}
		
		a {
			color: #777c82;
			
			&.toplink {
				color: #777c82;
				text-decoration: none;
				
				&:hover {
					color: #111;
					text-decoration: none;
					background: #777c82;
				}
			}
		}
	}
	
} /* end: #mm_wrapper */


/* =Portfolio Page Styles (NEST IN CORRECT LOCATION)
-------------------------------------------------------------- */
.pr {
	border: none;
	border-bottom: 1px solid #B4B8BA;
	clear: both;
	height: 0;
	line-height: 0;
	width: 100%;
	font-size: 0;
	padding: 0;
	margin: 0 0 30px 30px;
}

.portfolio_cat_group {
	
	h6 {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
	}
	
	.meta {
		font-size: 12px;
		margin-bottom: 10px;
		.inline-block;
	}
}

.portfolio_items_group {
	
	.portfolio_item {
		width: 196px;
		height: 140px;
		background: url(imgs/portfolio/portfolio.thumbs.png) 0 0 no-repeat;
		border: 1px solid #B4B8BA;
		
		&.sanofi {
			background-position: 0 0;
		}
		
		&.bluecross {
			background-position: 0 -150px;
		}
		
		&.thieme {
			background-position: 0 -300px;
		}
		
		&.pocono {
			background-position: 0 -450px;
		}
		
		&.rgracie {
			background-position: 0 -600px;
		}
		
		&.prangley {
			background-position: 0 -750px;
		}
		
		&.cfc {
			background-position: 0 -900px;
		}
		
		&.inhofer {
			background-position: 0 -1050px;
		}
		
		&.cope {
			background-position: 0 -1200px;
		}
		
		&.cgracie {
			background-position: 0 -1350px;
		}
		
		&.diaz {
			background-position: 0 -1500px;
		}
		
		&.chaloux {
			background-position: 0 -1650px;
		}
		
		&.kollar {
			background-position: 0 -1800px;
		}
		
		&.wright {
			background-position: 0 -1950px;
		}
		
		&.forbes {
			background-position: 0 -2100px;
		}
		
		&.seitz {
			background-position: 0 -2250px;
		}
		
		&.bacco {
			background-position: 0 -2400px;
		}
		
		&.wildbunch {
			background-position: 0 -2550px;
		}
		
		&.biomass {
			background-position: 0 -2700px;
		}
		
		&.longos {
			background-position: 0 -2850px;
		}
	}
}


/* (NEST IN CORRECT LOCATION)
-------------------------------------------------------------- */
.mm_page-heading.grid_12 {
	margin: 10px 30px 0;
/*	border-top: 1px dashed #777c82; */
	border-bottom: 1px solid #b4b8ba;
	line-height: 36px;
}

.mm_page-heading {
	background: transparent;
	padding: 10px 0 20px;
}

h2.mm_page-heading {
	font-family: 'Custom';
	font-size: 34px;
	line-height: 30px;
	font-weight: normal;
	color: #777c82;
	margin-bottom: 0;
}

h2.mm_page-heading span {
	color: #333;
}

h2.mm_page-heading a:hover {
	text-decoration: underline;
}

/* =Tooltip (NEST IN CORRECT LOCATION)
-------------------------------------------------------------- */
#tooltip {
	position: absolute;
	color: #d6dbdd;
	background: #111;
	padding: 0 6px;
	font-size: 11px;
	display: none;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	text-shadow: none;
}

/* =Breadcrumbs
-------------------------------------------------------------- */
.breadcrumbs {
	padding-bottom: 20px;
	font-size: 11px;
	font-weight: bold;
	color: #777c82;
}

.breadcrumbs a {
	color: #333;
	text-decoration: none;
}

.breadcrumbs a:hover {
	text-decoration: underline;
}

/* = 960 Grid >>
-------------------------------------------------------------- */
.container_12 {
	width: 1020px;
	margin: 0 auto;
}

.float {
	display: inline;
	float: left;
	position: relative;
}

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	display: inline;
	float: left;
	position: relative;
	margin-right: 20px;
	margin-left: 20px;
}

.container_12 { 
	.grid_1 {width: 45px;}
	.grid_2 {width: 130px;}
	.grid_3 {width: 215px;}
	.grid_4 {width: 290px;}
	.grid_5 {width: 385px;}
	.grid_6 {width: 470px;}
	.grid_7 {width: 555px;}
	.grid_8 {width: 640px;}
	.grid_9 {width: 725px;}
	.grid_10 {width: 810px;}
	.grid_11 {width: 895px;}
	.grid_12 {width: 960px;}
}