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

@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; t
		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: url(http://www.civicamente.it/site09/image/civ_bg_3.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: 40px;
}

#container2 {
	margin:0 auto;
	padding: 0 30px 0 20px;
	width:960px;
	text-align:left;
	font-family: Verdana, Geneva, sans-serif;
}


/* --------------------------------------------------------------------------*/
/* top nav -------------------------------------------------------------------*/
#top-nav {
	font-size:70%;
	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;
	font-family: Verdana, Geneva, sans-serif;
}
#top-nav ul li{
	display: inline;
	padding: 0;
	margin: 0 10px 0 0;
	line-height:1.5em;
	color: #FFF;
}
#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-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #000;
}

#top-nav ul li a:hover {
	border-bottom: 3px solid #FFFFFF;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 95%;
}

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

/* --------------------------------------------------------------------------*/
/* 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: Verdana, Geneva, sans-serif;
	color:#FFFFFF;
	text-transform:uppercase;
	display:block;
	font-size:175%;
	line-height: 1em;
	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 #3F3;  }

.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: url(../image/bg_trans.png); 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 black", 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:url(http://www.civicamente.it/site09/image/QQ.swf);*/
	
	position: relative; width:572px; height:320px; left:0; top:0;
	margin:0; padding:0 0 8px 0; overflow:hidden;
	background:url('http://www.civicamente.it/site09/image/QQ.swf') no-repeat;
	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: left;
	display:block;
	margin: auto;
	padding: 100px 0 0 0;
	}



.work_container {
	border: 0;
	font-family: Helvetica, Arial, sans-serif;
	width: 600px;
	float: left;
	background-color: #000000;
	display: block;
	padding: 0px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 40px;
	margin-left: 0;
	}


.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:#333;
	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;
	color: #FFF;
	font-family: Verdana, Geneva, sans-serif;
	}

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

#view_by li a {
	text-decoration:none;
	color:#212121;
	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;
	width: 290px;
	margin: auto;
	padding-top: 20px;
	padding-right: 15px;
	padding-bottom: 0;
	padding-left: 0;
	}

#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:#212121;
	margin: 0 0 0 0;
	font-size:150%;
	text-transform:uppercase;
	font-weight: bold;
	cursor: pointer;
	}

#work_nav li a:hover,
#work_nav li a.sel {
	color:#FFF;
	font-size: 150%;
	}





/* --------------------------------------------------------------------------*/
/* 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%; }



/* --------------------------------------------------------------------------*/
/* WORK - thumbs -------------------------------------------------------------------*/


.aaron {
	display:block;
	margin: 0;
	padding: 0;
	width: 157px;
	height: 157px;
	background-image:url(../image/work_aaron_slater.jpg);
	background-position: 0 0;
	float: left;
	}

a.aaron:hover { 
	background-position: -157px 0; 
	}

.deltarush {
	display:block;
	margin: 0;
	padding: 0;
	width: 157px;
	height: 157px;
	background-image:url(../image/work_deltarush.jpg);
	background-position: 0 0;
	float: left;
	}

a.deltarush:hover { 
	background-position: -157px 0; 
	}

.sickcity {
	display:block;
	margin: 0;
	padding: 0;
	width: 157px;
	height: 157px;
	background-image:url(../image/work_sickcityclub.jpg);
	background-position: 0 0;
	float: left;
	}

a.sickcity:hover { 
	background-position: -157px 0; 
	}	

.natwilliams {
	display:block;
	margin: 0;
	padding: 0;
	width: 157px;
	height: 157px;
	background-image:url(../image/work_nataliewilliams.jpg);
	background-position: 0 0;
	float: left;
	}

a.natwilliams:hover { 
	background-position: -157px 0; 
	}			

.sikanotions {
	display:block;
	margin: 0;
	padding: 0;
	width: 157px;
	height: 157px;
	background-image:url(../image/work_sikanotions.jpg);
	background-position: 0 0;
	float: left;
	}

a.sikanotions:hover { 
	background-position: -157px 0; 
	}		

.chilligold {
	display:block;
	margin: 0;
	padding: 0;
	width: 157px;
	height: 157px;
	background-image:url(../image/work_chilli_gold.jpg);
	background-position: 0 0;
	float: left;
	}

a.chilligold:hover { 
	background-position: -157px 0; 
	}

.jenisaint {
	display:block;
	margin: 0;
	padding: 0;
	width: 157px;
	height: 157px;
	background-image:url(../image/work_jeni_saint.jpg);
	background-position: 0 0;
	float: left;
	}

a.jenisaint:hover { 
	background-position: -157px 0; 
	}


.niko {
	display:block;
	margin: 0;
	padding: 0;
	width: 157px;
	height: 157px;
	background-image:url(../image/work_niko.jpg);
	background-position: 0 0;
	float: left;
	}

a.niko:hover { 
	background-position: -157px 0; 
	}


.genelinford {
	display:block;
	margin: 0;
	padding: 0;
	width: 157px;
	height: 157px;
	background-image:url(../image/work_gene_linford.jpg);
	background-position: 0 0;
	float: left;
	}

a.genelinford:hover { 
	background-position: -157px 0; 
	}

.audiomaster {
	display:block;
	margin: 0;
	padding: 0;
	width: 157px;
	height: 157px;
	background-image:url(../image/work_audiomaster.jpg);
	background-position: 0 0;
	float: left;
	}

a.audiomaster:hover { 
	background-position: -157px 0; 
	}
		
		


/* --------------------------------------------------------------------------*/
/* 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:left;
	display:block;
	padding: 5px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 0;
}
.news_details h3 {
	font-family:Helvetica, Arial black, sans-serif;
	color:#FFFFFF;
	text-transform:uppercase;
	display:block;
	font-size:200%;
	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: 0px;
	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;
	background-color: #000;
	color: #063;
	}

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

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

#about_nav li a:hover,
#about_nav li a:active,
#about_nav li a:visited,
#about_nav li a.sel {
	color:#999;
	cursor: pointer;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 300%;
	}
	

.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:fissa;
	/* float: left; */
	font-family: Helvetica, Arial, sans-serif;
	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;
	text-align: left;
}

#footer ul{
	display: inline;
	font-size:93%;
}
#footer ul li{
	display: inline;
	font-family: Helvetica, Arial, sans-serif;
	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;
	}
	
	
	
#container2 #view_by ul li .sel {
	color: #FFF;
}