@charset "UTF-8";
/* CSS Document */

/* General */
html, body {
	background:	#dcd9d1;
	color: 		#333;
	font-family:Verdana, Geneva, sans-serif;
	margin:		0;
	padding:	0;
	
	width:		100%;}

.clear {clear: both;}
.bold {font-weight: bold;}
.italic {font-style: italic;}

	
#wrapper {
	margin: 	6px auto 0 auto;
	padding:	0;
	width:		778px;}
#header {
	background:url(../images/header.jpg) no-repeat 2px 0;
	height:229px;
	margin: 0;
	padding:0;
	width:778px;}
	#header span {display:none;}
#navigation,
#navigation ul.topnav{
	background: url(../images/navigation.jpg) no-repeat;
	height: 33px;
	margin: 0;
	padding:0;
	position:relative;
	width:778px;}
	
#navigation ul.topnav li { 
	display: block;
	float:	left;
	position:relative;}
	#navigation ul.topnav li a{
		display: block;
		height:	33px;}
		
		#navigation ul.topnav li a span {display: none;}
		
	#navigation ul.topnav li a.menu_home{
		background: url(../images/navigation.jpg) no-repeat 0 0;
		height: 33px;
		margin: 0;
		padding:0;
		width:136px;}	
	#navigation ul.topnav li a.menu_work{
		background: url(../images/navigation.jpg) no-repeat -136px 0;
		height: 33px;
		margin: 0;
		padding:0;
		width:123px;}		
	#navigation ul.topnav li a.menu_services{
		background: url(../images/navigation.jpg) no-repeat -259px 0;
		height: 33px;
		margin: 0;
		padding:0;
		width:131px;}	
	#navigation ul.topnav li a.menu_faq{
		background: url(../images/navigation.jpg) no-repeat -390px 0;
		height: 33px;
		margin: 0;
		padding:0;
		width:102px;}
	#navigation ul.topnav li a.menu_about{
		background: url(../images/navigation.jpg) no-repeat -492px 0;
		height: 33px;
		margin: 0;
		padding:0;
		width:120px;}
	#navigation ul.topnav li a.menu_contact{
		background: url(../images/navigation.jpg) no-repeat -612px 0;
		height: 33px;
		margin: 0;
		padding:0;
		width:158px;}	
		
		#navigation ul.topnav li a.menu_home:hover,
		#navigation ul.topnav li a.menu_home.active{ background-position: 0 -33px;}
		
		#navigation ul.topnav li a.menu_work:hover,
		#navigation ul.topnav li a.menu_work.active { background-position: -136px -33px;}
		
		#navigation ul.topnav li a.menu_services:hover,
		#navigation ul.topnav li a.menu_services.active{ background-position: -259px -33px;}
		
		#navigation ul.topnav li a.menu_faq:hover,
		#navigation ul.topnav li a.menu_faq.active{ background-position: -390px -33px;}
		
		#navigation ul.topnav li a.menu_about:hover,
		#navigation ul.topnav li a.menu_about.active{ background-position: -492px -33px;}
		
		#navigation ul.topnav li a.menu_contact:hover,
		#navigation ul.topnav li a.menu_contact.active{ background-position: -612px -33px;}
		
		#navigation ul.topnav li ul.subnav {
			background:	url(../images/subnav_bg.png) no-repeat;
			display: 	none;
			height:		194px;
			left:		-16px;
			margin:		0;
			padding:	0 0 0 0;
			position: 	absolute;
			top:		32px;
			width:		150px;
			z-index:	1000;
			}
			#navigation ul.topnav li ul.subnav li{
				display: block;
				float:	left;
				margin-left: 60px;}
			#navigation ul.topnav li ul.subnav li a{
				color:#fff;
				font-size:14px;
				height:22px;
				text-decoration: none;}
				#navigation ul.topnav li ul.subnav li.work_web {margin-top:15px;}
	
#mainContent {background: url(../images/mainContent_bg.jpg) repeat-y;}
#mainContent h2 {
		background: url(../images/mainContent_title.jpg) no-repeat;
		display: block;
		height: 50px;
		width:778px;}
	#mainContent h2 span {display: none;}
	
	body.home #mainContent h2 {background: url(../images/mainContent_title_home.jpg) no-repeat;}
	body.work #mainContent h2 {background: url(../images/mainContent_title_work.jpg) no-repeat;}
		body.work_web #mainContent h2 {background: url(../images/mainContent_title_web.jpg) no-repeat;}
		body.work_print #mainContent h2 {background: url(../images/mainContent_title_print.jpg) no-repeat;}
		body.work_logos #mainContent h2 {background: url(../images/mainContent_title_logos.jpg) no-repeat;}
		body.work_mobile #mainContent h2 {background: url(../images/mainContent_title_mobile.jpg) no-repeat;}
	
	body.services #mainContent h2 {background: url(../images/mainContent_title_services.jpg) no-repeat;}
	body.faq #mainContent h2 {background: url(../images/mainContent_title_faq.jpg) no-repeat;}
	body.about #mainContent h2 {background: url(../images/mainContent_title_about.jpg) no-repeat;}
	body.contact #mainContent h2 {background: url(../images/mainContent_title_contact.jpg) no-repeat;}
	body.privacy #mainContent h2 {background: url(../images/mainContent_title_privacy.jpg) no-repeat;}
	
	#mainContainer{
		font-size:		12px;
		margin-left:	62px;
		width:			691px;}
	
	#mainContent #leftSide{
		float: left;
		padding:15px 0 0 0;
		position:relative;
		width:	463px;}
	#mainContent #leftSide a {color:		#003366;}
	
	body.home #mainContent #leftSide {width:661px;}
		body.work #mainContent #leftSide,
		body.work_web #mainContent #leftSide,
		body.work_print #mainContent #leftSide,
		body.work_logos #mainContent #leftSide,
		body.work_mobile #mainContent #leftSide
		body.services #mainContent #leftSide {}
		body.faq #mainContent #leftSide,
		body.privacy #mainContent #leftSide{
			float: none;
			width:661px;}
		
		body.work #mainContent #leftSide #projectImage,
		body.work_web #mainContent #leftSide #projectImage,
		body.work_print #mainContent #leftSide #projectImage,
		body.work_mobile #mainContent #leftSide #projectImage,
		body.work_mobile #mainContent #leftSide #projectImage{
			display: block;
			height:	367px;
			margin:20px 0 20px -16px;
			width:	469px;}
			body.work_logos #mainContent #leftSide #projectImage{
				display: block;
				height:	283px;
				margin:20px 0 20px -16px;
				width:	469px;}
			
			body.work_mobile #mainContent #leftSide #projectImage {
				background: url(../images/portfolio/clientMobile.jpg) no-repeat;
				height: 250px;}	
			body.work_logos #mainContent #leftSide #projectImage {background: url(../images/portfolio/clientLogo_landfill.jpg) no-repeat;}	
				
			body.work_web #mainContent #leftSide #landingImage,
			body.work_print #mainContent #leftSide #landingImage{
					display:block;
					height:367px;
					width:469px;}
			body.work_web #mainContent #leftSide #landingImage {background:url(../images/portfolio/clientWeb_landfill.jpg) no-repeat;}		
			body.work_web #mainContent #leftSide #landingImage a,
			body.work_print #mainContent #leftSide #landingImage a{
					display:block;
					height:367px;
					width:469px;}
			
			
			body.work #mainContent #leftSide #projectImage span,
			body.work_web #mainContent #leftSide #projectImage span,
			body.work_print #mainContent #leftSide #projectImage span,
			body.work_logos #mainContent #leftSide #projectImage span, 
			body.work_mobile #mainContent #leftSide #projectImage span,
			body.work_web #mainContent #leftSide #landingImage span,
			body.work_print #mainContent #leftSide #landingImage a{ display:none;}
			
			
		body.knotjustdreads #mainContent #leftSide #projectImage {background: url(../images/portfolio/clientWeb_kjd.jpg) no-repeat;}
		body.snarl #mainContent #leftSide #projectImage {background: url(../images/portfolio/clientWeb_snarl.jpg) no-repeat;}
		body.omocha #mainContent #leftSide #projectImage {background: url(../images/portfolio/clientWeb_omocha.jpg) no-repeat;}
		body.stagefighting #mainContent #leftSide #projectImage {background: url(../images/portfolio/clientWeb_stagefighting.jpg) no-repeat;}
		body.dco #mainContent #leftSide #projectImage {background: url(../images/portfolio/clientWeb_dco.jpg) no-repeat;}
		body.yjc #mainContent #leftSide #projectImage {background: url(../images/portfolio/clientWeb_yjc.jpg) no-repeat;}
		
		body.fixx #mainContent #leftSide #projectImage {background: url(../images/portfolio/clientLogo_fixx.jpg) no-repeat;}
		body.idoru #mainContent #leftSide #projectImage {background: url(../images/portfolio/clientLogo_idoru.jpg) no-repeat;}
		body.kilcoo #mainContent #leftSide #projectImage {background: url(../images/portfolio/clientLogo_kilcoo.jpg) no-repeat;}
		body.omochastore #mainContent #leftSide #projectImage {background: url(../images/portfolio/clientLogo_omochastore.jpg) no-repeat;}
		body.puffmates #mainContent #leftSide #projectImage {background: url(../images/portfolio/clientLogo_puffmates.jpg) no-repeat;}
		body.roughmagic #mainContent #leftSide #projectImage {background: url(../images/portfolio/clientLogo_roughmagic.jpg) no-repeat;}
		body.shmazing #mainContent #leftSide #projectImage {background: url(../images/portfolio/clientLogo_shmazing.jpg) no-repeat;}
		body.landfilldesigns #mainContent #leftSide #projectImage {background: url(../images/portfolio/clientWeb_landfill.jpg) no-repeat;}
		body.work_logos.stagefighting #mainContent #leftSide #projectImage {background: url(../images/portfolio/clientLogo_stagefighting.jpg) no-repeat;}
		
		
		body.work_logos #mainContent #leftSide #projectImage a {
					display:block;
					height:250px;
					width:469px;}
		
		body.more #mainContent #leftSide #projectImage{
			display: block;
			height:	400px;
			margin:0 0 20px -40px;
			width:	500px;}	
			body.more #mainContent #leftSide #projectImage span{ display:inline;}
			
			
		
		body.home #mainContent #leftSide p {
			font-size:14px;
			line-height:1.2em;
			padding: 	0 0 20px 0;
			width:		661px;}
		body.work #mainContent #leftSide p,
		body.work_web #mainContent #leftSide p,
		body.work_print #mainContent #leftSide p ,
		body.work_logos #mainContent #leftSide p, 
		body.work_mobile #mainContent #leftSide p ,
		body.services #mainContent #leftSide p,
		body.about #mainContent #leftSide p {		
			line-height:1.2em;
			padding: 	0 0 20px 0;
			width:		457px;}
	
		body.more #mainContent #leftSide p{
				margin: 0 10px;
				width: 420px;}
		body.faq #mainContent #leftSide p,
		body.privacy #mainContent #leftSide p {
			line-height:1.2;
			padding: 	0 0 20px 0;
			width:		657px;}		
		body.contact #mainContent #leftSide {width: 226px;}
		body.contact #mainContent #leftSide p{
			line-height:1.2;
			padding: 	0 0 20px 0;
			width:		216px;}		
	
	#mainContent #leftSide .client_info{
		color:		#003366;
		font-size:	12px;
		font-weight:bold;}
		
	#mainContent #leftSide #clientDetails,
	#mainContent #leftSide .project_description,
	#mainContent #leftSide .project_testimonial,
	body.work_web.more #mainContent .client_name,
	body.work_mobile.more #mainContent .client_name,
	#mainContent #leftSide h3{	
		font-family: "Gill Sans", Verdana;
		font-size: 11px;
		line-height: 14px;
		text-transform: uppercase;
		letter-spacing: 2px;
		font-weight: bold;}
		
		#mainContent #leftSide #clientDetails a {color:#333;}
		#mainContent h3 {color:#003366;}
		body.services #mainContent #leftSide h3.get_in_touch { margin: 10px 0;}
		
			body.work_web.more #mainContent .client_slide,
			body.work_mobile.more #mainContent .client_slide{	
		font-family: Gill Sans, Verdana;
		font-size: 11px;
		line-height: 12px;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-weight: bold;}
		
	#mainContent #leftSide li.client_name{padding: 0 0 15px 0;}
	#mainContent #leftSide li.services_provided{padding: 0 0 5px 0;}	
	#mainContent #leftSide li.client_info{}	
	#mainContent #leftSide .project_description {padding: 0 0 5px 0;}	
	#mainContent #leftSide .view_site a{
		color:#003366; 
		text-decoration:underline;}
	
	body.services #mainContent #leftSide ul{}
	body.services #mainContent #leftSide ul li{padding: 0 0 8px 0;}
	
	body.home #mainContent #rightSide{}	
		
		body.work #mainContent #rightSide,
		body.work_web #mainContent #rightSide,
		body.work_print #mainContent #rightSide,
		body.work_logos #mainContent #rightSide, 
		body.work_mobile #mainContent #rightSide,
		body.services #mainContent #rightSide,
		body.about #mainContent #rightSide{
		background: 	url(../images/rightMenu_bg.jpg) repeat-y;
		border-top: 	1px solid #e0e0f0;
		margin-left:	483px;
		width:			216px;}
		
		body.about #mainContent #rightSide {
			background: 	url(../images/about_pic.jpg) no-repeat;
			height:			300px;}
			body.about #mainContent #rightSide span {display: none;}
		
		body.contact #mainContent #rightSide {
			background: 	#e8f1f7;
			border-left: 	1px solid #e0e0f0;
			border-right: 	1px solid #e0e0f0;
			border-top:		1px solid #e0e0f0;
			height:			auto;}
		
		body.contact #mainContent #rightSide form {padding: 10px 10px 10px 14px;}
		
		body.work #mainContent #rightSide h3,
		body.work_web #mainContent #rightSide h3,
		body.work_print #mainContent #rightSide h3,
		body.work_logos #mainContent #rightSide h3, 
		body.work_mobile #mainContent #rightSide h3,
		body.services #mainContent #rightSide h3,
		body.contact #mainContent #rightSide h3{
			color: #333;
			font-family:Arial, Helvetica, sans-serif;
			font-size:24px;
			padding:	14px 0 19px 14px;}
			body.services #mainContent #rightSide p{
				line-height: 1.2;
				padding: 0 14px 10px 14px;
				}
		
		body.work #mainContent #rightSide ul,
		body.work_web #mainContent #rightSide ul,
		body.work_print #mainContent #rightSide ul,
		body.work_logos #mainContent #rightSide ul, 
		body.work_mobile #mainContent #rightSide ul
		{
			padding: 0 14px 10px 14px;}
			body.services #mainContent #rightSide ul {padding: 0 14px 10px 14px;}
		
		body.work #mainContent #rightSide ul li,
		body.work_web #mainContent #rightSide ul li,
		body.work_print #mainContent #rightSide ul li,
		body.work_logos #mainContent #rightSide ul li, 
		body.work_mobile #mainContent #rightSide ul li,
		body.services #mainContent #rightSide ul li{padding: 0 0 5px 0;}
		
		body.work #mainContent #rightSide ul li a,
		body.work_web #mainContent #rightSide ul li a,
		body.work_print #mainContent #rightSide ul li a,
		body.work_logos #mainContent #rightSide ul li a, 
		body.work_mobile #mainContent #rightSide ul li a,
		body.services #mainContent #rightSide ul li a{
			color: #333;
			font-size:11px;
			text-decoration: none;}

	
				body.work #mainContent  .rightSide_bottom,
				body.work_web #mainContent .rightSide_bottom,
				body.work_print #mainContent  .rightSide_bottom,
				body.work_logos #mainContent  .rightSide_bottom, 
				body.work_mobile #mainContent  .rightSide_bottom,
				body.services #mainContent  .rightSide_bottom{
				background: 	url(../images/rightMenu_bottom.jpg) no-repeat;
				display: 		block;
				height:			10px;
				margin-left:	483px;
				width:			216px;}
				body.contact #mainContent  .rightSide_bottom{
				background: 	url(../images/contact_bottom.jpg) no-repeat;
				display: 		block;
				height:			11px;
				margin-left:	226px;
				width:			471px;}
		
		
	body.faq #mainContent #rightSide {}
	body.about #mainContent #rightSide {}
	body.contact #mainContent #rightSide,
	body.webmail #mainContent #rightSide{
		margin-left:226px;
		width:	473px;}
	body.contact #mainContent #rightSide{
		margin-left:226px;
		width:	469px;}	
	body.privacy #mainContent #rightSide {}
	body.contact #mainContent #rightSide a {
		color:#003366;}
	
.mainContent_bottom {
	background:	url(../images/mainContent_bottom.jpg) no-repeat;
	display:	block;	
	height:		17px;}	

#stripes {
	background: url(../images/stripes_bg.jpg) no-repeat;
	display: block;
	height: 216px;
	width:778px;}
	#stripes span {display: none;}
#footer {}
#footer ul#leftNav, 
#footer ul#rightNav{ 
	display: block;
	list-style-type:none; }
	
	
#footer ul#leftNav li, 
#footer ul#rightNav li{ display: inline;}

#footer ul#leftNav li a, 
#footer ul#rightNav li a{
	color: #333333;
	font-size:11px;
	text-decoration:none;}

#footer ul#leftNav{
	float:left;
	margin-left:10px;}
	#footer ul#leftNav li{}
		#footer ul#leftNav li a{margin-right:8px;}
		
#footer ul#rightNav{
	float:right;
	margin-right:10px;}
	#footer ul#rightNav li{}
		#footer ul#rightNav li a{margin-left:8px;}
	
	
	/** Client Slides  WEB**/
body.more #mainContent #leftSide .anythingSlider .client_slide .client_image a {
		display: block;
		height: 250px;
		margin: 10px auto 0;
		width:	325px;}
body.more #mainContent #leftSide .anythingSlider .client_slide .client_image a span{display: none!important;}		

body.more #mainContent #leftSide .anythingSlider .allisonlynn .client_image a{background:url(../images/portfolio/clientWeb_allisonlynn_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .anydirectflight .client_image a{background:url(../images/portfolio/clientWeb_anydirecflight_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .bbl .client_image a{background:url(../images/portfolio/clientWeb_bbl_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .byblair .client_image a{background:url(../images/portfolio/clientWeb_byblair_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .calcourtney .client_image a{background:url(../images/portfolio/clientWeb_calcourtney_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .calgarytattoos .client_image a{background:url(../images/portfolio/clientWeb_calgarytattoos_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .cbcf .client_image a{background:url(../images/portfolio/clientWeb_cbcf_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .cedarmills .client_image a{background:url(../images/portfolio/clientWeb_cedarmills_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .diamint .client_image a{background:url(../images/portfolio/clientWeb_diamint_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .dilorece .client_image a{background:url(../images/portfolio/clientWeb_dilorece_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .fpp .client_image a{background:url(../images/portfolio/clientWeb_fpp_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .gdep .client_image a{background:url(../images/portfolio/clientWeb_gdep_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .goth .client_image a{background:url(../images/portfolio/clientWeb_goth_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .idlehands .client_image a{background:url(../images/portfolio/clientWeb_idlehands_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .iodine .client_image a{background:url(../images/portfolio/clientWeb_iodine_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .johnviljoen .client_image a{background:url(../images/portfolio/clientWeb_johnviljoen_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .mattwood .client_image a{background:url(../images/portfolio/clientWeb_mattwood_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .memotext .client_image a{background:url(../images/portfolio/clientWeb_memotext_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .operationspringboard .client_image a{background:url(../images/portfolio/clientWeb_operationspringboard_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .puffmates .client_image a{background:url(../images/portfolio/clientWeb_puffmates_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .rachelleblum .client_image a{background:url(../images/portfolio/clientWeb_rachelleblum_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .ringstrom .client_image a{background:url(../images/portfolio/clientWeb_ringstrom_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .ritualdesigsn .client_image a{background:url(../images/portfolio/clientWeb_ritualdesigns_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .RL303 .client_image a{background:url(../images/portfolio/clientWeb_RL303_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .savateontario .client_image a{background:url(../images/portfolio/clientWeb_savateontario_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .simplyquick .client_image a{background:url(../images/portfolio/clientWeb_simplyquick_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .strangeworld .client_image a{background:url(../images/portfolio/clientWeb_strangeworld_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .cherrypages .client_image a{background:url(../images/portfolio/clientWeb_cherrypages_sm.jpg) no-repeat;}
body.more #mainContent #leftSide .anythingSlider .twistedcircuits .client_image a{background:url(../images/portfolio/clientWeb_twistedcircuits_sm.jpg) no-repeat;}

/* Client slides - PRINT */
body.work_print.more #mainContent #leftSide .anythingSlider .allisonlynn .client_image a{background:url(../images/portfolio/clientPrint_allisonlynn_sm.jpg) no-repeat 0 10px;}
body.work_print.more #mainContent #leftSide .anythingSlider .cbcf .client_image a{background:url(../images/portfolio/clientPrint_cbcf_sm.jpg) no-repeat 0 10px;}
body.work_print.more #mainContent #leftSide .anythingSlider .mei .client_image a{background:url(../images/portfolio/clientPrint_mei_sm.jpg) no-repeat;}
body.work_print.more #mainContent #leftSide .anythingSlider .resistor .client_image a{background:url(../images/portfolio/clientPrint_resistor_sm.jpg) no-repeat;}
body.work_print.more #mainContent #leftSide .anythingSlider .goshgarian .client_image a{background:url(../images/portfolio/clientPrint_robertgosh_sm.jpg) no-repeat;}
body.work_print.more #mainContent #leftSide .anythingSlider .sharprobot .client_image a{background:url(../images/portfolio/clientPrint_sharprobot_sm.jpg) no-repeat 0 10px;}
body.work_print.more #mainContent #leftSide .anythingSlider .stainless .client_image a{background:url(../images/portfolio/clientPrint_stainless_sm.jpg) no-repeat 0 10px;}


/* Contact Form */

#contactForm {}
#contactForm input {
	background: none;
	border: none;
	border-bottom: 1px dashed #666;}

#contactForm ul {
	margin: 0 0 10px 0;
	padding: 0;}
#contactForm ul li{
	display: block;
	}

#contactForm p{
	padding:0 0 10px 0;}
#contactForm textarea {	
height: 150px;
margin: 20px 0;
width: 400px;}