@import "reset.css";
@import "fonts.css";

/*-----------------------------------------------------------------------------
Primary Style Sheet

version:   1.0
author:    DRAWING AND MANUAL.
website:   http://www.d-deprtment.jp

-----------------------------------------------------------------------------*/
html {  width:100%;
		height:100%; 
		overflow-x:hidden; 
		padding: 0;
		overflow-y: scroll;
		}

body {
	width:100%;
	height:100%;
	color:#fff;
	background-color:#13120d;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
		background-image:
; 	background-image: url(showreel.jpg);
		}

img{margin:0;padding:0;border:none;}
a:focus, a:hover, a:active { outline:none }

	

/* Container ----------------------------------------------------------------*/
#container {
	position:relative;
	display:block;
	width:100%;
	margin:0;
	padding:0;
}
.js #container,
.js #top-nav,
.js #footer {
	visibility: hidden;
}

#container-inner {
	margin:0 auto;
	/* 	padding: 40px 0 0 0; */
	width:100%;
	/* 	float:left; */
	position: relative;
	top: 25px;
	right: 25px;
}

#container2 {
	margin:0 auto;
	padding: 0 20px 0 20px;
	width:960px;
	text-align:left;
}


/* --------------------------------------------------------------------------*/
/* top nav -------------------------------------------------------------------*/
#top-nav {
	font-size:100%;
	top:0;
	left:0;
	margin:0 0 0 0;
	padding:10px;
	text-align: right;
	width: 100%;
	display:block;
	background-color:#000000;
	height: 20px;
	position: fixed;
	z-index: 20;
	}

#top-nav span.logo { margin: 0; float: left }

#top-nav ul {
	display: inline;
	padding: 0 20px 0 0;
	margin: 0;
}
#top-nav ul li{
	display: inline;
	padding: 0;
	margin: 0 10px 0 0;
	line-height:1.5em;
}
#top-nav ul li a {
	display: inline-block;
	color: #fff;
	text-decoration: none;
	padding: 0;
	margin: 0;
	font-size: 95%;
	font-weight: normal;
	text-transform:uppercase;
	border-bottom: 3px solid #000000;
}

#top-nav ul li a:hover {border-bottom: 3px solid #FFFFFF;}

#top-nav ul li a.active {border-bottom: 3px solid #FFFFFF;}
	

/* --------------------------------------------------------------------------*/
/* pagebody -----------------------------------------------------------------*/
#pagebody {
	position:relative;
	left:0;
	height:1px;
}
#grid {
	position:absolute;
	width:auto;
	left:0;/* hack for win ie6 */
}
#grid div.item{
	position:absolute;
	background:#000;
	width:190px;
	text-align:left;
}
#grid div.item div.body{
	line-height: 1.2em;
	padding: 8px;
}
#grid div.item div.body img{
	padding: 0;
}
#grid div.item div.body ul.rotation{
	margin-bottom: 8px;
}
#grid div.item div.body div{
}
#grid div.item div.body .title{
	font-family: Helvetica, Arial black, sans-serif; 
	color:#FFFFFF; 
	text-transform:uppercase; 
	display:block; 
	font-size:175%; 
	line-height: 1.0em; 
	font-weight: bold;
	margin: 15px 0 0 0;
	}

#grid div.item div.body .description{
	font-size:90%; 
	padding-top: 0; 
	font-family:Helvetica, Arial, sans-serif; 
	color:#7f7e7b; 
	display:block; 
	line-height: 1.3em;
}

.description a { text-transform:uppercase; display:block; font-size: 15px; color:#FFFFFF; text-decoration:none; margin-top: 10px; border-bottom: 3px solid #000;}
.description a:hover { border-bottom: 3px solid #FFFFFF;  }

.description p {margin: 0 0 10px 0;}

#grid div.item div.body ul{
	font-size:85%;
	margin:0;
	padding:0;
}


.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0px;
	top: 0;
	height: 100%;
	background: #ddd;
}
.jScrollPaneDrag {
	position: absolute;
	background: #999;
	cursor: pointer;
	overflow: hidden;
	right: 0;
}
.jScrollPaneDrag:hover {
	background: #666;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}



/* --------------------------------------------------------------------------*/
/* home details  -------------------------------------------------------------------*/
#home-details {
	position:relative;
/* 	float: left; */
/* 	display: inline; */
	font-size:90%;
	margin: 75px 0 0;
	padding: 75px 0 0;
	text-align: left;
	clear:both;
	color:#7f7e7b;
	width: 100%;
	}
	
#home-details ul{
	display: inline-block;
	margin: 0 auto;
	padding: 0;
	border-top: #fff 2px solid;
	}
	
#home-details ul li{
	display: inline-block;
	padding: 0;
	margin: 35px 0 20px 25px;
	line-height:1.3em;
	width: 20%;
	float:left;
	}
	
#home-details ul li a{
	display: inline-block;
	}


#home-details h3 { font-family: Helvetica, Arial black, sans-serif; color:#FFFFFF; text-transform:uppercase; display:block; font-size:175%; line-height: 1.0em; font-weight: bold; margin: 0 0 5px 0; }







/* --------------------------------------------------------------------------*/
/* HOME - large promos -------------------------------------------------------------------*/
.sickcity-home { margin: 0; background-image: url(../image/home_projects_sick_city_club.jpg); background-repeat:no-repeat;  width: 374px; height: 320px; display:block; }

.project_info {  padding: 10px; background-image: ; background-repeat: repeat;  width: 354px; float:left; display:block; margin: 0; margin: 0; }
.project_info h3 { font-family:Helvetica, Arial black,  sans-serif; color:#FFFFFF; text-transform:uppercase; display:block; font-size:175%; line-height: 1.0em; font-weight: bold; margin: 0; }
.project_info p { font-size:90%; margin: 0 0 10px 0; font-family:Helvetica,Arial,  sans-serif; color:#7f7e7b; display:block; line-height: 1.3em; width: 94%; display:block; }
.project_info a { text-transform:uppercase; display:block; font-size: 15px; color:#FFFFFF; text-decoration:none; margin-top: 10px; border-bottom: 3px solid #000;}
.project_info a:hover { border-bottom: 3px solid #FFFFFF;  }
.project_info span { font-family:Helvetica, Arial black, sans-serif; color:#777; text-transform:uppercase; display:block; font-size:110%; line-height: 1.0em; font-weight: bold; display:block;  }




/* --------------------------------------------------------------------------*/
/* Home - nav -------------------------------------------------------------------*/

	

#homenav {		
	border:0;	
	font-family: Helvetica, Arial, sans-serif;
	float:left;
	display:block;
	padding: 0 0 8px 0;
	width: 572px;
	height: 320px;
	background-image:
	background-repeat:no-repeat;
	}

#homenav ul {
	position:relative;
	top: 115px;
	right: 220px;
	list-style-type:none;
	margin: 0;
	text-align: right;
	list-style-type:none;
	line-height: 2.3em;
	}


#homenav a {
	display:block;
	text-decoration:none;
	color:#fff;
	margin: 0 0 0 0;
	font-size:280%;
	text-transform:uppercase;
	font-weight: bold; 
	cursor: pointer;
	}

#homenav li a:hover,
#homenav li a.sel {
	color:#fff;
	}
	



/* --------------------------------------------------------------------------*/
/* WORK - window -------------------------------------------------------------------*/


.work_outer_container {		
	border:0;
	font-family: Helvetica, Arial, sans-serif;
	width: 650px;
	float: right;
	display:block;
	margin: auto;
	padding: 20px 0 0 0;
	}

.work_outer_container2 {		
	border:0;
	font-family: Helvetica, Arial, sans-serif;
	width: 650px;
	float: right;
	display:block;
	margin: auto;
	padding: 100px 0 0 0;
	}



.work_container {		
	border: 0;
	font-family: Helvetica, Arial, sans-serif;
	width: 630px;
	float: left;
	background-color: #050505;
	display: block;
	margin: 0 0 10px 0;
	padding: 10px; 
	}


.work_container img {
	float: left;
	}	
	

.work_details { width: 200px; float:right; display:block; margin: 5px 5px 0 0;  }
.work_details h3 { font-family:Helvetica, Arial black, sans-serif; color:#FFFFFF; text-transform:uppercase; display:block; font-size:175%; line-height: 1.0em; font-weight: bold; }
.work_details p { font-size:90%; padding-top: 18px; font-family:Helvetica, Arial, sans-serif; color:#777777; display:block; line-height: 1.2em; width: 94%; }
.work_details a { text-transform:uppercase; display:block; font-size:120%; color:#FFFFFF; text-decoration:none; margin-top: 18px; padding-bottom: 3px; }
.work_details a:hover { border-bottom: 3px solid #FFFFFF; padding-bottom: 0;  }





/* --------------------------------------------------------------------------*/
/* WORK - nav - view by -------------------------------------------------------------------*/

	

#view_by {		
	border:0;	
	font-family: Helvetica, Arial, sans-serif;
	float: left;
	display: block;
	padding: 100px 15px 0 312px;
	width: 100%;
	margin: auto;
	}

#view_by ul {
	list-style-type:none;
	margin: 0 0 0 0;
	text-align: left;
	list-style-type:none;
	line-height: 2.1em;
	display: inline-block;
	}

#view_by ul li{
	display: inline;
	padding: 0;
	margin: 0 0 0 32px;
	}

#view_by li a {
	text-decoration:none;
	color:#333;
	margin: 0 0 0 0;
	font-size:130%;
	text-transform:uppercase;
	font-weight: bold; 
	cursor: pointer;
	display: inline-block;
	}

#view_by li a:hover,
#view_by li a.sel {
	color:#fff;
	}

#view_by span { font-family: Helvetica, Arial, sans-serif; font-size: 90%; color:#FFFFFF; display:inline-block; }





/* --------------------------------------------------------------------------*/
/* WORK - nav -------------------------------------------------------------------*/

	

#work_nav {		
	border:0;	
	font-family: Helvetica, Arial, sans-serif;
	float:left;
	display:block;
	padding: 20px 15px 0 0;
	width: 290px;
	margin: auto;
	}

#work_nav ul {
	list-style-type:none;
	margin: 0 0 0 0;
	text-align: left;
	list-style-type:none;
	line-height: 2.1em;
	}


#work_nav li a {
	display:block;
	text-decoration:none;
	color:#333;
	margin: 0 0 0 0;
	font-size:230%;
	text-transform:uppercase;
	font-weight: bold; 
	cursor: pointer;
	}

#work_nav li a:hover,
#work_nav li a.sel {
	color:#fff;
	}





/* --------------------------------------------------------------------------*/
/* WORK - left descriptions -------------------------------------------------------------------*/

	

.work_left_description {		
	border:0;	
	font-family: Helvetica, Arial, sans-serif;
	float:left;
	display:block;
	padding: 20px 15px 0 0;
	width: 290px;
	margin: auto;
	}

.work_left_description h3 { font-family:Helvetica, Arial black, sans-serif; color:#FFFFFF; text-transform:uppercase; display:block; font-size:175%; line-height: 1.0em; font-weight: bold; }
.work_left_description p { font-size:90%; padding-top: 18px; font-family:Helvetica, Arial, sans-serif; color:#777777; display:block; line-height: 1.2em; width: 94%; }

	

/* --------------------------------------------------------------------------*/
/* NEWS - nav -------------------------------------------------------------------*/

	

#news_nav {		
	border:0;	
	font-family: Helvetica, Arial, sans-serif;
	float:left;
	display:block;
	padding: 100px 15px 0 0;
	width: 290px;
	margin: auto;
	}

#news_nav ul {
	list-style-type:none;
	margin: 0 0 0 0;
	text-align: right;
	list-style-type:none;
	line-height: 2.1em;
	}


#news_nav li a {
	display:block;
	text-decoration:none;
	color:#333;
	margin: 0 0 0 0;
	font-size:230%;
	text-transform:uppercase;
	font-weight: bold; 
	cursor: pointer;
	}

#news_nav li a:hover,
#news_nav li a.sel {
	color:#fff;
	}
		





/* --------------------------------------------------------------------------*/
/* News -------------------------------------------------------------------*/

.news_details {  float:right; display:block; margin: 5px 5px 0 0; padding: 10px;  }
.news_details h3 { font-family:Helvetica, Arial black, sans-serif; color:#FFFFFF; text-transform:uppercase; display:block; font-size:175%; line-height: 1.0em; font-weight: bold; }
.news_details span { font-family:Helvetica, Arial black, sans-serif; color:#777; text-transform:uppercase; display:block; font-size:110%; line-height: 1.0em; font-weight: bold; display:block;  }
.news_details p { font-size:90%; padding-top: 18px; font-family:Helvetica, Arial, sans-serif; color:#777777; display:block; line-height: 1.2em; width: 94%; }
.news_details a { text-transform:uppercase; display:block; font-size:120%; color:#FFFFFF; text-decoration:none; margin-top: 18px; padding-bottom: 3px; }
.news_details a:hover { border-bottom: 3px solid #FFFFFF; padding-bottom: 0;  }








/* --------------------------------------------------------------------------*/
/* ABOUT US - nav -------------------------------------------------------------------*/



#about_nav {		
	border:0;
	font-family: Helvetica, Arial, sans-serif;
	float:left;
	display:block;
	padding: 40px;
	margin:auto;
	cursor: pointer;
	}

#about_nav ul {
	list-style-type:none;
	margin: 60px 0 0 0;
	text-align: left;
	cursor: pointer;
	line-height: 3.5em;
	}

#about_nav li a {
	display:block;
	text-decoration:none;
	color:#333;
	margin: 0 0 0 0;
	font-size: 350%;
	text-transform:uppercase;
	font-weight: bold; 
	cursor: pointer;
	line-height: 0.8em;
	}

#about_nav li a:hover,
#about_nav li a:active,
#about_nav li a:visited,
#about_nav li a.sel {
	color:#fff;
	cursor: pointer;
	}
	

.details_box {
	display:none;
	padding: 0 0 0 0;
	margin: 10px 0 0 0;
	}	

.details_box p {
	margin: 0 0 0 0;
	padding: 0 0 10px 0;
	font-weight: normal;
	color:#777777;
	font-size: 90%;
	width: 50%;
	line-height: 1.3em;
	}
	
.details_box h1 {
	font-size: 180%;
	margin: 0 0 5px 0;
	font-weight: bold;
	display:block;
	text-transform: uppercase;
	color:#FFFFFF;
	}

.details_box h3{
	display: block; 
	font-size: 100%;
	width: 50%;
	margin: 0 0 10px 0;
	line-height: 1.3em;
	}





/* --------------------------------------------------------------------------*/
/* sitemap - nav -------------------------------------------------------------------*/



#sitemap_nav {		
	border:0;
	font-family: Helvetica, Arial, sans-serif;
	float:left;
	display:block;
	padding: 40px;
	margin:auto;
	cursor: pointer;
	}

#sitemap_nav ul {
	list-style-type:none;
	margin: 60px 0 0 0;
	text-align: left;
	cursor: pointer;
	line-height: 3.5em;
	}

#sitemap_nav li a {
	display:block;
	text-decoration:none;
	color:#333;
	margin: 0 0 0 0;
	font-size: 350%;
	text-transform:uppercase;
	font-weight: bold; 
	cursor: pointer;
	line-height: 0.8em;
	}

#sitemap_nav li a:hover,
#sitemap_nav li a:active,
#sitemap_nav li a:visited,
#sitemap_nav li a.sel {
	color:#333;
	cursor: pointer;
	}
	
	
	
	
	
/* --------------------------------------------------------------------------*/
/* footer -------------------------------------------------------------------*/
#footer {
	position:relative;
	/* float: left; */
	font-size:77%;
	top:0;
	left:0;
	margin: 30px 0 0 0;
	padding: 8px 0 22px 0;
	text-align: left;
	clear:both;	
	border-top: #fff 3px solid;
}
#footer span.copyright { margin-left: 40px; float: right; padding-bottom: 20px; }

#footer ul{
	display: inline;
	font-size:93%;
}
#footer ul li{
	display: inline;
	padding: 0 8px;
	margin: 2px 0;
	line-height:1.5em;
}
#footer ul li a {
	display: inline-block;
	text-decoration: none;
	color:#FFFFFF;
	text-transform:uppercase;
	padding-bottom:2px;
}

#footer li a:hover,
#footer li a.sel {
	color:#fff;
	border-bottom: 2px solid #FFFFFF;
	padding-bottom:0;
	}





/* --------------------------------------------------------------------------*/
/* work slideshow  -------------------------------------------------------------------*/

/*set CSS for SPAN tag surrounding each image*/
.seqslidestyle{
margin: 0;
display:inline;
float:left;
}



/* --------------------------------------------------------------------------*/
/* jobs -------------------------------------------------------------------*/



#jobs {		
	border:0;
	font-family: Helvetica, Arial, sans-serif;
	float:left;
	display:block;
	padding: 40px;
	margin:auto;
	}

#jobs ul {
	list-style-type:none;
	margin: 20px 0 0 0;
	text-align: left;
	line-height: 3.5em;
	}

#jobs li {
	display:block;
	text-decoration:none;
	color:#333;
	margin: 0 0 0 0;
	font-size: 140%;
	text-transform:uppercase;
	font-weight: bold;
	line-height: 1em;
	}

#jobs li a:link,
#jobs li a:active,
#jobs li a:visited,
#jobs li a.sel {
	color:#fff;
	text-decoration:none;
	margin: 10px 0 3px 0;
	}

#jobs li a:hover { border-bottom: 3px solid #FFFFFF; }
		

#jobs p {
	margin: 0 0 0 0;
	padding: 0 0 10px 0;
	font-weight: normal;
	color:#eeeeee;
	font-size: 100%;
	width: 50%;
	line-height: 1.3em;
	}
	
#jobs h3 {
	font-size:230%;
	margin: 100px 0 5px 0;
	font-weight: bold;
	display:block;
	text-transform: uppercase;
	color:#FFFFFF;
	}