@charset "UTF-8";
/*##################################################*/
/*##################################################*/

	/*HTML CODE WRITTEN BY BENJAMIN CAPLAN
    
		BENJAMIN CAPLAN: IAmCaplan.com*/


/*##################################################*/
/*##################################################*/

/*########NORMALIZE########*/
*{
	margin: 0px;
	padding: 0px;
}

body, div, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, p, blockquote, th, td, img, object{
	border: 0px;
}

a{
	text-decoration: none;
	outline: none;
	cursor: pointer;
}

ul{
	list-style-type: none;
}
/*end normalizer*/




/*########MAIN STYLES########*/
body{
	color: #666666;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 62.5%;
	background-color: #EDF1F7;
	background-image: url(../images/body_bg.jpg);
	background-repeat: repeat;
	background-position: center top; 
	background-attachment: fixed;
	}

a{
	color: #444444;
	font-weight:bold;
}

a:visited{
	color: #444444;
}

a:active{
	color: #666666;
}

a:hover{
	color: #444444;
	text-decoration: underline;
}
	
h1, h2, h3, h4, h5{
	color: #CCCCCC;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	font-style: italic;
	text-align: left;
}
h1{ 
	font-size: 5.0em;
}
h2{ 
	font-size: 2.4em;
}

	

p{
	font-size: 1.25em;
	line-height: 1.6em;
	padding-bottom: 10px;
}
/*end main styles*/




/*########DIVS########*/
/*--==EXTRA_WRAPPER==--*/
#extra_wrapper{
	position: relative;
	width: 1164px;
	height: auto;
	margin: 0 auto;
	background-image: url(../images/header_bg.png);
	background-repeat: no-repeat;
	background-position: top center;
}
/*end extra_wrapper*/





/*--==CONTAINER_MAIN==--*/
#container_main{
	width: 1020px;
	height: auto;
	margin: 0 auto;
}
/*end container_main*/

	
	/*######################################################################### HEADER   */
	/*--==CONTAINER_HEADER==--*/
	#container_header{
		position: relative;
		width: 1020px;
		height: 207px;
		padding: 0;
		margin: 0 auto;
	}
		
		/*###################################### LOGO */
		#container_logo{
			position: absolute;
			width: 405px;
			height: 207px;
			background-image: url(../images/logo.png);
			left: 50px;
			top: 0;
		}
			#logo{
				height: 150px;
				width: 300px ;
				display: block;
				margin: 0 0 0 50px;
			}
		
		
		/*###################################### SOCIAL MEDIA */
		#social_media{
			width:500px;
			height: 50px;
			float: right;
			margin: 20px 20px 0 0;
		}
			#social_media ul{
				height: 50px;
				width: auto;
				padding: 0 50px 0 0;
			}
				#social_media ul li{
					width: auto;
					height: 50px;
					float: right;
					margin-left: 20px;
				}
					#social_media ul li a{
					}
		
		
		/*###################################### MAIN NAV */
		#container_nav{
			position: absolute;
			width:1000px;
			height: 45px;
			top: 111px;
			left: 9px;
			padding: 5px 0 0 0;
			background-image: url(../images/nav_bg.png);
		}
			#active_page{
				position: absolute;
				height: 13px;
				width: 20px;
				top: 5px;
				background-image: url(../images/active_page.png);
				background-repeat: no-repeat;
				background-position: top center;
			}
				#active_page.web{
					left: 535px;
				}
				#active_page.print{
					left: 600px;
				}
				#active_page.services{
					left: 683px;
				}
				#active_page.about{
					left: 772px;
				}
				#active_page.blog{
					left: 841px;
				}
				#active_page.contact{
					left: 917px;
				}
			#container_nav ul{
				height: 45px;
				padding: 0 30px 0 0;
			}
				#container_nav ul li{
					width: auto;
					float: right;
					height: 40px;
					margin-left: 10px;
					overflow: hidden;
				}
					#container_nav ul li a{
						color: #ffffff;
						height: 22px;
						padding: 9px 5px;
						display: block;
						font-size: 1.85em;
						font-family: Georgia, "Times New Roman", Times, serif;
						font-weight: bold;
						font-style: italic;
						text-align: center;
						vertical-align: middle;
					}
						#container_nav ul li a:hover{
							text-decoration: none;
							background-image: url(../images/nav_hover.png);
							background-repeat: repeat;
						}

	
	/*######################################################################### MAIN CONTENT   */
	/*--==CONTAINER_CONTENT==--*/
	#container_content{
		position: relative;
		clear: both;
		width: 1000px;
		height: auto;
		padding: 0 10px;
		background-image: url(../images/content_wrapper.png);
		background-repeat: repeat-y;
		background-position: top center;
	}
		
		#content{
			width: auto;
			height: auto;
			padding: 20px 70px 40px 60px;
			background-image: url(../images/content_top.jpg);
			background-repeat: no-repeat;
			background-position: top center;
		}
		
		#content #content_left{
			width: 650px;
			padding-right: 15px;
			float: left;
			border-right: 1px dashed #666;
		}
			#content #content_left h2{
				margin-top: 0px;
			}
			#content #content_left h3{
				font-size: 1.7em;
				padding-bottom: 5px;
				margin-top: 0px;
			}
			#content #content_left ul{
				width: auto;
				padding: 0 0 20px 25px;
				font-size: 1.2em;
				list-style-image: url(../images/bullet.png);
			}
			
			form .form_input input[type="text"]:focus, form .form_textarea textarea:focus{
				background-color: #F8FCFF;
			}
			
			form .form_input{
				clear: both;
				width: auto;
				height: auto;
				margin: 10px 0;
				vertical-align: middle;
			}
				form .form_input .radio{
					padding: 0 5px;
				}
				form .form_input label{
					display: inline-block;
					width: 120px;
					text-align: right;
					font-size: 1.2em;
				}
				form .form_input input[type="text"]{
					display: inline-block;
					width: 400px;
					background: none;
					padding: 5px;
					border: 1px solid #666;
				}
			form .form_textarea{
				clear: both;
				width: auto;
				height: auto;
				margin: 10px 0;
			}
				form .form_textarea textarea{
					display: inline-block;
					width: 400px;
					height: 200px;
					background: none;
					padding: 5px;
					border: 1px solid #666;
				}
				form .form_textarea label{
					display: inline-block;
					width: 120px;
					text-align: right;
					font-size: 1.2em;
					vertical-align: top;
				}
				
			form .form_submit{
				width: 400px;
				height: auto;
				margin-left: 120px;
			}
				form .form_submit input[type="submit"]{
					display: inline-block;
					float: right;
				}
				
			
			#home_feature{
				width: 590px;
				margin: 0 auto;
			}
				#content #content_left #home_feature .home_feature_cell{
					float: left;
					width: 284px;
					margin: 25px 10px 25px 0;
				}
					
					#content #content_left #home_feature .home_feature_cell .home_feature_cell_img{
						width: 283px;
						height: 175px;
						float: left;
						background-image: url(../images/piece_bg.png);
						background-repeat: no-repeat;
						background-position: center;
						padding: 15px 0 1px 0;
					}
						#content #content_left #home_feature .home_feature_cell .home_feature_cell_img img{
							position: relative;
							height: 152px;
							width: 250px;
							display: block;
							border: 2px solid #B6B7AC;
							margin: 0 auto;
							padding: 0;
							cursor: pointer;
							opacity: .85;
							filter: alpha(opacity = 85);
						}
							#content #content_left #home_feature .home_feature_cell .home_feature_cell_img img:hover{
								opacity: 1;
								filter: alpha(opacity = 100);	
							}
		
		#content #content_right{
			width: 210px;
			margin-left: 690px;
			margin-top: 10px;
		}
			#content #content_right h2{
				font-size: 1.6em;
				margin-top: 15px;
			}
			#content #content_right p{
				font-size: 1.1em;
				line-height: 1.3em;
				padding-left: 10px;
			}
			#content #content_right #self{
				display: block;
				margin: 0 0 5px 2px;
				padding: 2px;
				border: 2px solid #999;
				
			}
			.sotm{
				border: 2px solid #999999;
				padding: 2px;
				display: block;
				margin-top: 5px;
			}
			
		
		
			#gallery{
				width: 100%;
				height: auto;
				margin-top: 15px;
			}
				#gallery ul{
					padding: 0;
					margin: 0;
				}
				#gallery ul li{
					width: 283px;
					height: 175px;
					display:block;
					float: left;
					background-image: url(../images/piece_bg.png);
					background-repeat: no-repeat;
					background-position: center;
					padding: 15px 0 1px 0;
					margin: 0 10px 25px 0;
				}
					#gallery ul li img{
						position: relative;
						height: 152px;
						width: 250px;
						display: block;
						border: 2px solid #B6B7AC;
						margin: 0 auto;
						padding: 0;
						cursor: pointer;
						opacity: .85;
						filter: alpha(opacity = 85);
					}
						#gallery ul li img:hover{
							opacity: 1;
							filter: alpha(opacity = 100);
						}
					
					/*########################################## GALLERY PIECE*/
					#gallery .gallery_piece{
						width: 881px;
						height: auto;
						padding:0;
						position: absolute;
						z-index: 100;
						top: 15px;
						display: none;
						margin: 0 auto;
					}
						#gallery .gallery_piece .gallery_piece_top{
							width: 881px;
							height: 31px;
							background-image: url(../images/piece_top.png);
							background-repeat: no-repeat;
							background-position: center top;
						}
						
						
						#gallery .gallery_piece .project_content{
							width: 731px;
							position: relative;
							height: 675px;
							margin: 0 auto;
							padding: 15px 80px 0 70px;
							background-image: url(../images/piece_tile.png);
							background-repeat: repeat-y;
						}
							#gallery .gallery_piece .project_content h2{
								width: 100%;
								height: auto;
								margin-top: 5px;
								font-size: 3.8em;
							}
								#gallery .gallery_piece .project_content img.feature{
									display: block;
									width: 740px;
									height: 370px;
									margin: 0 auto;
									border: 2px solid #333;
									background-color: #000;
								}
								#gallery .gallery_piece .project_content .flash_holder{
									display: block;
									width: 740px;
									height: 370px;
									margin: 0 auto;
									border: 2px solid #333;
									background-color: #000;
								}
									#gallery .gallery_piece .project_content .flash_holder .anim{
										display: block;
										width: 370px;
										height: 370px;
										margin: 0 auto;
										overflow: hidden;
									}
									#gallery .gallery_piece .project_content .flash_holder .puma_anim{
										display: block;
										width: 400px;
										height: 314px;
										margin: 30px auto 0 auto;
										overflow: hidden;
									}
							
							#gallery .gallery_piece .project_content #next{
								position: absolute;
								width: 20px;
								height: 50px;
								top: 300px;
								left: 830px;
								cursor: pointer;
								text-align: right;
							}
							
							#gallery .gallery_piece .project_content #back{
								position: absolute;
								width: 20px;
								height: 50px;
								top: 300px;
								left: 25px;
								cursor: pointer;
							}
							
							#gallery .gallery_piece .project_content #close{
								position: absolute;
								width: 75px;
								height: 20px;
								top: 660px;
								left: 720px;
								cursor: pointer;
							}
							
							#gallery .gallery_piece .project_content .project_left{
								display: inline-block;
								width: 475px;
								height: 100px;
								margin: 0;
								padding: 10px 0 0 15px;
								vertical-align: top;
							}
							#gallery .gallery_piece .project_content .project_right{
								display: inline-block;
								width: 215px;
								height: 100px;
								margin: 0 0 0 20px;
								padding: 10px 0 0 0;
								vertical-align: top;
							}
								#gallery .gallery_piece .project_content .project_right h3{
									width: auto;
									height: auto;
									margin: 0;
									padding: 0;
									font-size: 1.8em;
								}
								#gallery .gallery_piece .project_content .project_right ul{
									float: left;
									width: 100px;
									height: 230px;
									margin: 0;
								}
									#gallery .gallery_piece .project_content .project_right ul li{
										float: none;
										width: auto;
										height: auto;
										margin: 0;
										padding: 0 0 0 10px;
										background-image: none;
									}
						#gallery .gallery_piece .gallery_piece_bottom{
							width: 881px;
							height: 31px;
							background-image: url(../images/piece_bottom.png);
							background-repeat: no-repeat;
						}
						
						
	#holder{
		width: auto;
		height: 300px;
	}
	
	
	/*######################################################################### FOOTER   */
	/*--==CONTAINER_FOOTER==--*/
	#container_footer{
		width: 1020px;
		height: auto;
		margin: 0;
		text-align: center;
		padding: 0;
		background-image: url(../images/content_wrapper.png);
		background-repeat: repeat-y;
		background-position: top center;
	}
		#footer_devide{ 
			width: 1020px;
			height: 21px;
			background-image: url(../images/footer_devide.png);
			background-repeat: no-repeat;
			background-position: top center;
		}
		
		#footer{
			position: relative;
			height: auto;
			width: auto;
			padding: 20px 60px;
			margin: 0 10px;
			background-image: url(../images/footer_bg.png);
			background-repeat: repeat-x;
			background-position: top center;
			text-align: left;
		}
			#footer .footer_cell{
				width: 245px;
				height: 190px;
				float: left;
				padding: 5px 15px;
				margin: 0 6px;
			}
				#footer .footer_cell p{
					width: auto;
					height: auto;
					padding: 0 0 0 5px;
					margin: 0;
					color: #999;
					text-align: left;
					font-size: 1.35em;
					font-family: Tahoma, Geneva, sans-serif;
					font-weight: normal;
				}
				#footer .footer_cell ul{
					float: left;
					width: 100px;
					height: auto;
					padding: 0;
					margin: 0;
				}
					#footer .footer_cell ul li{
						width: 95px;
						height: 15px;
						margin: 6px 0 6px 5px;
						text-align: left;
					}
						#footer .footer_cell ul li a {
							width: auto;
							height: auto;
							display: inline;
							color: #999;
							text-align: left;
							font-size: 1.35em;
							font-family: Tahoma, Geneva, sans-serif;
							font-weight: normal;
						}
				
				#footer .footer_cell.borders{
					border-left: 2px solid #cccccc;
					border-right: 2px solid #cccccc;
				}
				
			#footer h2{
				text-decoration: underline;	
			}
			
		#footer_bottom{
			width: 1020px;
			height: 21px;
			background-image: url(../images/footer_bottom.png);
			background-repeat: no-repeat;
			background-position: top center;
		}
		
		#brush_sticker{
			height: 135px;
			width: 147px;
			position: absolute;
			top: 95px;
			left: 810px;
		}
	/*end container_footer*/
	
	#black{
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 50;
		display: none;
		background-image: url(../images/black.png);
		background-repeat: repeat;
		/*display: none;*/
	}
		
	
/*######################################################################### GENERAL RULES   */
.hidden{
	visibility: hidden;	
}
.clear{
	clear: both;	
}
.tab{
	margin: 0 0 0 20px;	
}
.no_margin{
	margin-right: 0 !important;;
}
.left{
	float: left;	
}