@import 'cssdeck/_handler.css';

															/** BODY ELEMENTS **/
html,body {
	height:100%;
	background-color:#dfd921;
	background-repeat:repeat-x;
	background-position:top;
	color:#FFFFFF;
	font-family:Century Gothic;
	}


/* font */

.sectionContent h1.indexwanTitle {
font: 60px/68px 'ChunkFiveRegular', Arial, sans-serif;letter-spacing: 0;
width:530px; line-height:0.9em;
}

h1 {font: 18px/27px 'ChunkFiveRegular', Arial, sans-serif; }

h2.topNav {font: 18px/20px 'ChunkFiveRegular', Arial, sans-serif; top:15px;}
h2 {font: 18px/27px 'ChunkFiveRegular', Arial, sans-serif; }



															/** MAIN CONTAINERS **/
#container {
	width: 100%;
	/*height:100%;
	min-height: 100%;*/
	background-color:#dfd921;
	position: relative;
	}
	#header {
		height:90px;
		background-image:url(../images/header.jpg);
		background-color:#161616;
		background-position:top;
		background-repeat:no-repeat;
		position:relative;
		z-index:1;
		border-bottom:5px solid #000;
		}
		.header-in {
			margin-left:auto;
			margin-right:auto;
			width:980px;
			}
	#content-wrapper {
	width: 980px;
	height:100%;
	min-height: 100%;
	margin-left:auto;
	margin-right:auto;
	position: relative;
		}


/* 2 column layout */
	.layout-2col #content {
		width: 980px;
		}
		.work-section {margin-top:20px;}
	.layout-2col #aside {
		width: 300px;
		}


/* 3 column layout */
	.layout-3col #content {
		/* container width minus both aside widths */
		width: 440px;
		/* left aside width */
		margin-left: 200px;
		}
	.layout-3col .aside-left {
		width: 200px;
		/* this width plus content width */
		margin-left: -640px;
		}
	.layout-3col .aside-right {
		width: 200px;
		}

		#sectionHeader {
		height:460px;
		width: 980px;
		position:relative;
		z-index: 5;
		margin-left:auto;
		margin-right:auto;
		background-image:url(../images/monkey.jpg);
		background-repeat:none;
		background-position: right bottom;
		}
		#sectionHeaderSlide{
		height:460px;
		width: 980px;
		position:relative;
		z-index: 5;
		margin-left:auto;
		margin-right:auto;
		background-image:none;
		background-repeat:none;
		background-position: right bottom;
		}
		#sectionHeadertwo {
		height:320px;
		width: 100%;
		position:relative;
		}
		#sectionHeaderportfolio {
		height:190px;
		width: 100%;
		position:relative;
		}
		.sectionContent {
		width:980px;
		margin-right:auto;
		margin-left:auto;
		position:relative;
		}
		.sectionContenttwo {
		width:980px;
		margin-right:auto;
		margin-left:auto;
		position:relative;
		}
		.headerInfo {
		padding:30px 0px 0px 0px;
		margin:0px 0px 0px 0px;
		width:310px;
		position:relative;
		top:0px;
		left: 10px;
		float: left;
		}
		.headerInfolink {
		padding:30px 0px 0px 0px;
		margin:0px 0px 0px 15px;
		position:relative;
		top:0px;
		left: 20px;
		float: left;
		}
		
		.imgIndex{
		float:right;
		z-index: 1;
		}
		

		#content {
			
			}
			.content-in {
				margin-top:0px;
				width:980px;
				}
			.content-inhome {
				/*margin-top:30px;*/
				width:980px;
				}	
		#aside {
			
			}
			.aside-left {
				
				}
			.aside-right {
				
				}
				.aside-in {
					
					}
	#footer {
		height: 90px;
		position: relative;
		background-color:#161616;
		}
		.footer-in {
			margin-top:10px;
			margin-left:auto;
			margin-right:auto;
			width:980px;
			}
				.clearfooter {
				height: 90px;
				clear: both;
				}

#contactHolder {
float: left;
padding:30px;
margin:0px 0px 0px 10px;
width:590px;
background-image: url(../images/kat.jpg);
background-position: no-repeat;
}
	#contactform {
	}
	#contactform label {
	float: left;
	padding:5px;
	display: block;
	margin-bottom:5px;
	}
	#contactform input, #contactform textarea{
	float: left;
	padding:5px;
	width:280px;
	margin-bottom:5px;
	}
	#contactform input.send{
	float: left;
	padding:5px;
	width:170px;
	margin:10px 0px 0px 130px;
	cursor:pointer;
	}



															/** SUB CONTAINERS **/
* { }

.logoHold {
	margin-top:-6px;
	float:left;
	margin-left:5px;
}

.workTitle {
padding:20px 0px 0px 20px;
}

.imgStyle {
	background-color:#000;
	padding:6px;
	margin-bottom:10px;
}

.serviceImg {
margin-top:48px;
}

.showWide {
float:left;
margin-top:10px;
}
.showLeft {
float:left;
margin-right:10px;
}
.showRight {
float:left;
}
.showLeft.next {
float:left;
margin-top:10px;
margin-right:10px;
}
.showRight.next {
margin-top:10px;
float:left;
}

#rightSideWork {
width: 640px;
float:right;
margin:0px 0px 0px 0px;
position:relative;
left:10px;
}
#portfolioWork {
width: 100%;
float:right;
margin:0px 0px 0px 0px;
position:relative;
left:20px;
}
#rightSideWorkinner {
width: 640px;
float:right;
margin:10px 0px 0px 0px;
position:relative;
left:10px;
}
#rightSideWorkInner {
width: 340px;
float:left;
margin:45px 0px 0px 0px;
position:relative;
left:10px;
}
.leftSideWork {
float: left;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 10px;
width:310px;
position:relative;
top:-5px;
}
.workHolder {
float: right;
margin:30px 0px 0px 0px;
width: 630px;
border:6px solid #000;
height:400px;
}
.portfolio {
padding:0px;
margin:10px 0px 0px 10px;
list-style:none;
}
.portfolio li {
color:#fff;
margin:0px 0px 15px 0px;
}
.portfolio li a:link,.portfolio li a:visited{
color:#fff;
font-size:25px;
padding:10px;
background-color:#000;
}
.portfolio li a:hover{
color:yellow;
font-size:25px;
padding:10px;
background-color:#000;
}
.portfolio li.selected a:link,.portfolio li.selected a:visited{
color:yellow;
font-size:25px;
padding:10px;
background-color:#000;
}

.work-info {margin-left: 5px;}

.workIndex-info {margin-left: 5px; width:100%;}

															/** LISTS **/
#nav-main {
	float:right;
	}
	#nav-main li {
		margin-right:0px;
		display:block;
		width:158px;
		height:90px;
		position:relative;
		}
		#nav-main li a:link ,#nav-main li a:visited{
		display:block;
		width:158px;
		height:90px;
		color: #fff;
		font-size: 18px;
		font-weight:bold;
		text-decoration:none;
		text-shadow: 2px 2px 2px #242423;
		}
		#nav-main li a:hover{
		display:block;
		width:158px;
		font-size: 18px;
		background-color:#000;
		height:90px;
		background-image:url(../images/shape.jpg);
		background-repeat:no-repeat;
		background-position:right top;
		font-weight:bold;
		}
		#nav-main li p {
		color:#ffffff;
		font-size:11px;
		position:absolute;
		top:40px;
		left:10px;
		cursor:pointer;
		}
		.topNav {
		position:relative;
		top:20px;
		left:10px;
		font-size:14px;
		color:#fff;
		font-weight:bold;
		font-family:"Century Gothic",Arial, Helvetica, sans-serif;
		}
		
		/*------*/
		#nav-main li.first.selected,#nav-main li.selected{
		display:block;
		width:158px;
		height:90px;
		color: #fff;
		font-size: 18px;
		font-weight:bold;
		text-decoration:none;
		text-shadow: 2px 2px 2px #242423;
		background-image:url(../images/shape.jpg);
		background-repeat:no-repeat;
		background-position:right top;
		background-color:#000;
		}
		/*------*/

#latestHolder {
	margin:0px;
	padding:0px;
	margin-top:30px;
	margin-left:10px;
	float:left;
}
	#latestHolder li {
	float:left;
	list-style:none;
	margin-right:10px;
	height:240px;
	moz-box-shadow: 10px 10px 5px #888;
	width:310px;
	border-bottom: 1px solid #000;
	}
	/*#latestHolder li p, #latestHolder li a{
	margin-left:10px;
	}*/
	.boxInfo {
	margin-left:12px;
	width:290px;
	}
#wanHolder {
	margin:0px 0px 0px 10px;
	padding:0px;
	float:left;
	width:100%;
	position:relative;
}
	#wanHolder li {
	float:left;
	display:block;
	padding:0px;
	list-style:none;
	margin: 40px 15px 0px 0px;
	height:270px;
	moz-box-shadow: 10px 10px 5px #888;
	width:310px;
	border-bottom: 1px solid #000;
	position:relative;
    padding-bottom:10px;
	}
	#wanHolder li p, #wanHolder li h2{
	margin-left:0px;
	padding:0px;
	}	
	#wanHolder li a {
	margin-left:0px;
	padding:0px;
	font-size:12px;
	}
	#wanHolder li a img {
	border:1px solid #161616;
	}
	#wanHolder li.lasted{
	margin-right:0px;
	}
	#wanHolder li.about{
	height:100%;
	padding-bottom:40px;
	}
	#wanHolder li.illustshot {
	background-image:url(../images/illust1.jpg);
	background-repeat: no=repeat;
	background-position: left bottom;
	height:370px;
	}
	#wanHolder li.webshot {
	background-image:url(../images/web1.jpg);
	background-repeat: no=repeat;
	background-position: left bottom;
	height:370px;
	}
	#wanHolder li.graphicshot {
	background-image:url(../images/graphic1.jpg);
	background-repeat: no=repeat;
	background-position: left bottom;
	height:370px;
	}
	#wanHolder li.emailshot {
	background-image:url(../images/email1.jpg);
	background-repeat: no=repeat;
	background-position: left bottom;
	height:370px;
	}
	#wanHolder li.phototshot {
	background-image:url(../images/photo1.jpg);
	background-repeat: no=repeat;
	background-position: left bottom;
	height:370px;
	}
	#wanHolder li.motionshot {
	background-image:url(../images/motion1.jpg);
	background-repeat: no=repeat;
	background-position: left bottom;
	height:370px;
	}
	#wanHolder li.blog {
	background-image:url(../images/illust1.jpg);
	background-position:left bottom;
	}
	#wanHolder li.blog a {
		display:block;
		float:left;
		text-decoration:none;
		height:320px;
		font-weight:normal;
	}
	#wanHolder li.blog strong {
	text-decoration:underline;
	}
.wanwHolder {
	margin:0px 0px 40px 20px;
	padding:0px;
	float:left;
	width:100%;
}
	.wanwHolder li {
	float:left;
	list-style:none;
	margin-top:30px;
	margin-right:10px;
	height:240px;
	moz-box-shadow: 10px 10px 5px #888;
	width:315px;
	border-bottom: 1px solid #000;
	}
	.wanwHolder li p, .wanwHolder li a{
	margin-left:10px;
	}	

.homeHeader {
	margin-right:170px;
	margin-left:20px;
}
.homeHeadertwo {
	margin-right:185px;
}	

.imgIndexset {
width:500px;
height:280px;
position:relative;
top:-124px;
left:480px;
}

#services {
margin:0px;
padding:5px 0px 0px 10px;
height:100%;
}
#services li {
list-style:none;
margin:0px;
padding:0px;
height:20px;
border:none;
}

#wanHolder li ul {
height: auto;
margin:0px 0px 0px 10px;
padding:0px;
}
#wanHolder li ul li {
padding:0px;
margin:0px 0px 5px 0px;
height: 30px;
border:none;
background:url(../images/list.png);
background-repeat: repeat-y;
float:left;
}
#wanHolder li ul li.no3 {
background:url(../images/list.png);
background-repeat: repeat-y;
background-position:0 -64px;
}
#wanHolder li ul li.no4 {
background:url(../images/list.png);
background-repeat: repeat-y;
background-position:0 -32px;
}
#wanHolder li ul li.no5 {
background:url(../images/list.png);
background-repeat: repeat-y;
background-position:0 -96px;
}
#wanHolder li ul li.no6 {
background:url(../images/list.png);
background-repeat: repeat-y;
background-position:0 -161px;
}
#wanHolder li ul li.no7 {
background:url(../images/list.png);
background-repeat: repeat-y;
background-position:0 -129px;
}
#wanHolder li ul li p {
padding:5px 5px 5px 45px;
}

#twitter_update_list li {
list-style-type: none;
}
#twitter_update_list span {
color: #000000;
line-height:1.3em;
}
#twitter_update_list li a {
}
#twitter_update_list span a {
display: inline;
color: #000000;
}
#twitter_update_list span a:hover {
text-decoration: underline;
color: #666666;
}
#wanHolder li  li{
height:40px;
margin:0px 0px 0px 0px;
border:none;
width:280px;
padding: 10px 0px 0px 10px;
}

/*-----------------------navigation---------------------------*/
#shareLink {
	width: 140px; 
	height: 55px;
    background:url(../images/footer-link.jpg);
	margin:0 0 0 0;
	padding:0;
	display:inline;
	float:left;
	}	
  #shareLink li {
	margin: 0;
	padding: 0;
	list-style: none;
	float:left;
}
  #shareLink li, #shareLink a {
	height: 55px;
	display: block;
	}	
#shareOne {
	width: 132px;
}
#shareTwo {
	width: 126px;
}
#shareThree {
	width: 60px;
}
#shareOne a:hover {
    background: transparent url(../images/footer-link.jpg) 0px -54px no-repeat;}	
#shareTwo a:hover {
    background: transparent url(../images/footer-link.jpg) -132px -54px no-repeat;}	
#shareThree a:hover {
    background: transparent url(../images/footer-link.jpg) -260px -54px no-repeat;}										
/*-----------------------navigation END---------------------------*/



															/** TYPOGRAPHY **/
h1 {
	float:left;
	}
.sectionContent h1 {
	position:relative;
	z-index:200;
	color:#000;
	font-size:50px;
	margin-top:30px;
	margin-left:0px;
	padding:0px 0px 0px 10px;
	height:100px;
	float:left;
	}
.headerInfo h1 {
width:100%;
margin-bottom:20px;
}	
.headerInfo h1.pageBlub {
font-size:30px;
}
.leftSideWork h1.pageBlub {
display:block;
font-size:30px;
clear:both;
width:100%;
}
.yellow {
	color: #ffc20e;
	font-size:30px;
	line-height: 1.2em;
	position:relative;
	bottom:20px;
	padding:0px;
	margin:0px;
	}
#wanHolder h2 {
width:100%;
margin:0px 0px 20px 10px;
font-size:22px;
}	
strong,p,strong a,p a {
	color:#000;
	font-size:12px;
	line-height:1.5em;
	}
.work-info h2{
font-size:30px;
padding-bottom:10px;
}
.workIndex-info h2{
font-size:30px;
padding-bottom:10px;
}
.work-info p {
padding-bottom:10px;
}
.workIndex-info p {
padding-bottom:10px;
}
.work-info a {
font-size:12px;
}
p strong.numberStyle {
font-size:20px;
}
.footer-in p {
	margin-top:10px;
	margin-left:10px;
	color:#fff;
	font-size:11px;
	line-height:1.3em;
	clear:both;
}
.highlightwan {
color:#fff;
font-size:11px;
}
a {
	color:#000;
	font-size:14px;
	line-height:1.2em;
	font-weight:bold;
	}
	a:visited {

		}	
	a:hover {
		}

h1.indexTitle {
background: transparent url(../images/title.png) 10px 0px no-repeat;
width:100%;
height:112px;
position:absolute;
top:0px;
left:0px;
}
h1.indexTitle span.title {
text-indent:-9999px;
position:absolute;
}
.indexText{
padding:20px 0px 140px 10px;
width:345px;
float:left;
position: absolute;
z-index:1;
top:130px;
left:0px;
}





															/** FORMS **/
form {
	
	}
	
	
	
															/** portfolio **/
* Layout */
.boundingBox{ margin: 0 auto; width: 916px; }

/* Content */

#content{ padding: 20px 0; }

/* Content - Portfolio Listing */

ul#portfolio-filter{ margin: 20px 0px 0px 0px; padding: 0; line-height: 64px; 
background: transparent url(../images/icon-tag-green.png) left no-repeat; float:left; }
ul#portfolio-filter li{ display: block; margin-left:0px; margin-bottom:0px; border-top:1px solid #000; float:left;}
ul#portfolio-filter a{ display:block; width:175px; padding: 0.5em 0.5em; background: none; color: #000; 
font-size:20px; font-weight: bold; text-decoration: none; font-size:14px; }
ul#portfolio-filter a:hover, ul#portfolio-filter a.current{ color: #888; }
ul#portfolio-filter a.current{ background-color: #000; }


ul#portfolio-list{ 
    float: left;
    margin: 0 0 0 10px;
    padding: 0;
    position: relative;
    width: 100%;
}
ul#portfolio-list li{
    border-bottom: 1px solid #000000;
    display: block;
    float: left;
    height: 230px;
    list-style: none outside none;
    margin: 40px 15px 0 0;
    padding: 0 0 10px;
    position: relative;
    width: 310px;}
ul#portfolio-list li a{ display: block; width: 310px; height: 200px; font-size:12px; overflow: hidden;}
ul#portfolio-list li p{ font-size: 11px; line-height: 15px; color: #000; margin: 5px 0; }

ul#portfolio-list li span{ overflow: hidden;}
ul#portfolio-list li a.thumb {
width: 310px;
height: 200px;
}


.fixed {
  position: fixed;
  top: 0;
}

.tweet2 {
float:right; clear:both; position:relative; top:20px;
}

#terms {
margin: 0px 0px 0px 20px;
width:500px;
}
h1.termsText {
margin:0px;
font-weight:bold;
padding:0px;
font-size:20px;
}

ul#portfolio-filter a.designlink { 
background-image:url(../images/shape2.png);
background-repeat:no-repeat;
background-position:right top;
}
ul#portfolio-filter a.weblink { 
background-image:url(../images/shape3.png);
background-repeat:no-repeat;
background-position:right top;
}
ul#portfolio-filter a.illustlink { 
background-image:url(../images/shape4.png);
background-repeat:no-repeat;
background-position:right top;
}
ul#portfolio-filter a.motionlink { 
background-image:url(../images/shape1.png);
background-repeat:no-repeat;
background-position:right top;
}
ul#portfolio-filter a.emaillink { 
background-image:url(../images/shape6.png);
background-repeat:no-repeat;
background-position:right top;
}
ul#portfolio-filter a:hover.photolink { 
background-image:url(../images/shape7.png);
background-repeat:no-repeat;
background-position:right top;
}


    /** blog **/

ol.tumblr_posts {
margin:0px;
padding:0px;
}
ol.tumblr_posts li {
list-style:none;
width:630px;
margin-bottom:30px;
padding-bottom:30px;
border-bottom: 1px solid #161616;
}
ol.tumblr_posts li img,ol.tumblr_posts li object {
width:100%;
height:100%;
}
.tumblr_caption {
margin:20px 0px 0px 0px;
}
.tumblr_title {
font-size:18px;
font-weight:bold;
padding-bottom:10px;
}
.tumblr_body p {
margin-bottom:10px;
}
.tumblr_video {
width:630px;
}

		/** slider **/
.wanSlider {
	position:relative;
	min-height:220px;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	background:#dfd921 url(../images/loading.gif) no-repeat 50% 50%;
	width:980px;
	z-index:0;
}
.wanSlider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
.wanSlider a {
	border:0;
}
/*a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
a.nivo-prevNav {
	left:15px;
}
#sliderIndex .nivo-controlNav{
	position:absolute;
	left:47%;
	bottom:-30px;
}
#sliderIndex.nivo-controlNav a{
	display:block;
	width:10px;
	height:10px;
	background:url(../images/bullets.png) no-repeat;
	text-indent:-9999px;
	border:0;
	margin-right:3px;
	float:left;
}
#sliderIndex .nivo-controlNav a.active {
	background-position:-10px 0;
}*/

#sliderIndex a {
	display:block; /* IE Fix */
}
.wanSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:60;
	display:none;
}
/* The slices in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:50;
	height:100%;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:99;
	cursor:pointer;
}
.nivo-prevNav {
	left:0px;
}
.nivo-nextNav {
	right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
	position:relative;
	z-index:99;
	cursor:pointer;
}
.nivo-controlNav a.active {
	font-weight:bold;
}
.wanSlider {
	position:relative;
}
.wanSlider img {
	position:absolute;
	top:0px;
	left:0px;
}
.button { 
border-top: 1px solid #ffffff; 
background: #000000; 
background: -webkit-gradient(linear, left top, left bottom, from(#121212), to(#000000)); 
background: -moz-linear-gradient(top, #383838, #000000); 
padding: 9px 20px; 
-webkit-border-radius: 15px; 
-moz-border-radius: 15px; 
border-radius: 15px; 
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0; 
text-shadow: rgba(0,0,0,.4) 0 1px 0; 
color: #ffffff; font-size: 14px; 
font-family: Helvetica, Arial, Sans-Serif; 
text-decoration: none; 
vertical-align: middle; } 
.button:hover { 
border-top-color: #ffffff; 
background: #ffffff; 
color: #000000; 
} 
.button:active { 
border-top-color: #ffc30e; 
background: #ffc30e; 
}

/* index */

#wanHolder li.firstP.home {
margin-top:0px;
height:inherit;
}
#wanHolder li.home {
margin-top:0px;
height:inherit;
}

h2.homeTitle {
    float:left;
    width:315px;
    padding:0px 0px 20px 0px;
    margin:0px 0px 0px 10px;
}

h2.homeTitle.clearLeft {
    width:600px;
}

#homeColOne {
    width:310px;
    float:left;
    margin:0px 10px 0px 10px;
}
#homeColTwo {
    width:310px;
    float:left;
}
#homeColThree {
    width:310px;
    float:left;
    margin:0px 0px 0px 10px;
}

.homeWorkshow {
    padding:0px 0px 10px 0px;
    border-bottom:1px solid #000;
    display:block;
}

.homeBlogshow {
    margin:20px 0px 0px 0px;
}
#homeTweetshow {
    margin:20px 0px 0px 0px;
}
#homeTweetshow #twitter_update_list li {
    list-style:none;
    margin:10px 0px;
}

.serviceShow {
    margin:20px 0px 0px 0px;
}
.serviceShow ul {
margin:15px 0px 0px 15px;
padding:0px 0px 0px 0px;
}
.serviceShow ul li {
margin:0px 0px 10px 0px;
}