/* pixelmanya.com style sheets */

body {
	background: #000;
	color: #fff;
	font-family: Helvetica, Arial, Verdana, sans-serif;
}

body div {
	text-align: left;
}

/* TYPOGRAPHY */

@font-face {
	font-family: "Mueso700";
    src: url("../fonts/Museo700-Regular.otf") format('opentype');
}

@font-face {
	font-family: "Mueso500";
    src: url("../fonts/Museo500-Regular.otf") format('opentype');
}

@font-face {
	font-family: "Mueso300";
    src: url("../fonts/Museo300-Regular.otf") format('opentype');
}

@font-face {
	font-family: "MuseoSans500";
    src: url("../fonts/MuseoSans_500.otf") format('opentype');
}


h1 {
	font-size: 40px;
	font-weight: normal;
	padding: 0;
	margin: 0;
	font-family: Mueso300, sans-serif;
	color: #fff;
	word-spacing: -3px;
	line-height: 45px;
}

h2 {
	font-size: 30px;
	font-weight: normal;
	padding: 0;
	margin: 0 0 20px 0;
	font-family: Mueso500, sans-serif;
	color: #fff;
}

h3 {
	font-size: 20px;
	color: #fff;
	font-family: Mueso500, sans-serif;
	margin: 0 0 10px 0;
	font-weight: normal;
}

h4 {
	font-size: 16px;
	color: #666;
	font-family: Mueso500, sans-serif;
	margin: 0 0 80px 0;
	font-weight: normal;
}


p {
	padding: 0;
	line-height: inherit;
}

.mueso700 {
	font-family: Mueso700, sans-serif;
}

.MuseoSans500 {
	word-spacing: 1px;
	font-family: MuseoSans500, sans-serif;
}

.red {
	color: #d34328;
}

.blue {
	color: #3964c3;
}

	/* LINKS */
	
	h1 a.white {
		color: #ddd;
		text-decoration: none;
	}
	
	a.blue:link, a.blue:visited, a.blue:focus, a.blue:hover, a.blue:active {
		text-decoration: none;
		color: #3964c3;
		font-family: Mueso700, sans-serif;
	}
	
	a.red:link, a.red:visited, a.red:focus, a.red:hover, a.red:active {
		text-decoration: none;
		color: #d34328;
		font-family: Mueso700, sans-serif;
	}

	a.lightGrey:link, a.lightGrey:visited, a.lightGrey:focus, a.lightGrey:hover, a.lightGrey:active {
		font-size: 15px;
		text-decoration: none;
		color: #999;
		font-family: MuseoSans500, sans-serif;
	}
	
	a.over {
		color: #fff;
	}
	
/* END OF TYPOGRAPHY */

/* DIVS ETC. */

.left {
	width: auto;
	float: left;
}

.right {
	width: auto;
	float: right;
}

.bar {
	position: absolute;
	width: 100%;
	height: 33px;
	z-index: 100000;
}

.bar.top {
	top: 0;
	background: url(../images/pattern-top.gif) repeat-x;
}

.bar.bottom {
	top: 100%;
	margin: -32px 0 0 0;
	background: url(../images/pattern-bottom.gif) repeat-x;
}

#noscript {
	text-align: center;
	width: 940px;
	position: relative; 
	top: 40%;	
}

#noscript a {
	color: #999;
	text-decoration: none;
	border-bottom: 2px solid #999;
}

#noscript a:hover {
	color: #fff;
}

#page {
	visibility: hidden;
	top: 100px;
	margin: 0 25px 50px 25px;
	padding-bottom: 30px;
	width: 940px;
	height: inherit;
	position: relative;
}

	#page .part {
		margin-bottom: 50px;
	}
	
	#page .duoPart {
		width: 940px;
		float: left;
	}
	
		#page .part.who {
			float: left;
			width: 460px;
		}

		#page .part.where {
			float: right;
			text-align: right;
			width: 460px;
		}
		
		#part .part.work {
			padding-top: 40px;
			width: 940px;
		}
		
			#work .exampleDuo {
				position: relative;
				width: 940px;
				height: 300px;
				overflow: hidden;
				margin: 0 0 20px 0;
			}
		
			#work .exampleLeft {
				background: url(../images/pattern-3.gif) center;
				float: left;
				width: 460px;
				height: 300px;
				overflow: hidden;
			}

			#work .exampleRight {
				background: url(../images/pattern-3.gif) center;
				float: right;
				width: 460px;
				height: 300px;
				overflow: hidden;
			}
			
				#work .exampleRight .images,
				#work .exampleLeft .images {
					width: 460px;
					height: 300px;
					overflow: hidden;
				}
					
					#work .exampleLeft .images .image,
					#work .exampleRight .images .image {
						height: 300px;
					}
					
					#work .exampleLeft .border,
					#work .exampleRight .border {
						width: 460px;
						height: 300px;
						position: relative;
						margin: -300px 0 0 0;
					}
					
					*+html #work .exampleLeft .border,
					*+html #work .exampleRight .border {
						margin: -300px 0 0 0;
					}
					
						/*#work .exampleLeft .border.blue,
						#work .exampleRight .border.blue {
							background: url(../images/border-blue-2.png) no-repeat;
						}
						
						#work .exampleRight .border.red,
						#work .exampleLeft .border.red {
							background: url(../images/border-red-2.png) no-repeat;
						}*/
			
				#work .description {
					width: 460px;
					height: 300px;
					background: url(../images/pattern-4.png) no-repeat;
					position: relative;
					margin: -300px 0 0 0;
				}
				
					#work .description .inner {
						padding: 50px;
					}
					
						#work .description .inner .line {
							height: 30px;
						}
						
							#work .description .inner .line span.white {
								float: left;
								color: #fff;
								font-family: MuseoSans500, sans-serif;
								font-size: 16px;
							}
	
							#work .description .inner .line span.grey {
								color: #666;
								font-family: MuseoSans500, sans-serif;
								font-size: 15px;
								float: right;
							}
		#page p {
			margin-bottom: 15px;
			line-height: 20px;
			font-size: 16px;
		}

/* END OF DIVS ETC. */

/* GIMMICKS */

#loader {
	position: absolute;
	left: 48%;
	top: 48%;
	visibility: hidden;
}

/* END OF GIMMICKS */