/*------------------------------------------------------------------------------------
      (C)2010 XHTML and CSS by Samuel Viani - www.samuelviani.com
------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------
  GENERAL
------------------------------------------------------------------------------------*/   
/* RESET ALL */
* {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	list-style-position: outside;
}
html {
	overflow: -moz-scrollbars-vertical; /* To keep the vertical scrool on FF */
	height: 101%; /* Setting height to 101% forces scroll bar to display on IE8 */ 
}
body {
	font: 62.5% Arial, Helvetica, sans-serif;  /* Resets font to 10px */
	background-color: #000;  
}
sup {
	font-size: 90%;
    vertical-align: baseline;
    position: relative; 
    bottom: 0.33em;
}
img {background: url(../images/backgrounds/loading.gif) center center no-repeat;}	

/* TEXT */
p, a {
	font-size: 1.2em;
	line-height: 1.5em;
	color: #eee;
	margin-bottom: 6px; 
}
a {font-size: 1em; color: #498daf; text-decoration: none;}
ul li {line-height: 2.4em;}
ul li a {font-size: 1.2em; color: #498daf; text-decoration: none;}
ul li a:hover, p a:hover {text-decoration: underline;}

/* PRELOADING IMAGES */
#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -999999px; 
   top: -999999px;
   height: 1px;
   width: 1px;
}


/*------------------------------------------------------------------------------------
  HEADER
------------------------------------------------------------------------------------*/   
#header {
	width: 100%;
	height: 237px;
	clear: both;
	margin: 0 auto;
}
#content-header {
	width: 100%;
	height: 237px;
	background: url(../images/logos/header.jpg) center center no-repeat;	
}	
#content-header h1 {
	text-indent: -999999px;
	overflow: hidden;
}
#content-header h1 a {
	width: 960px;
	height: 227px;
	display: block;
	margin: 0 auto;
}


/*------------------------------------------------------------------------------------
  NAVIGATION
------------------------------------------------------------------------------------*/   
#container-navigation {
	width: 960px;
	height: 30px;
	margin-top: 10px;
	margin-bottom: -5px;
}
#navigation {
	width: 304px;
	height: 15px;
	float: left;
	overflow: hidden;	
	position: relative; /* IE */
}
#navigation ul li {
	display: inline;
	float: left;	
}
#navigation ul li.about a,
#navigation ul li.works a,
#navigation ul li.experimental a {
	height: 30px;
	float: left;
	text-indent: -999999px;
	overflow: hidden;
	display: block;
	position: relative;
	margin-right: 15px;
}

#navigation ul li.about a {
	width: 55px;
	background: url(../images/buttons/about.png) center center no-repeat;
}
#navigation ul li.works a {
	width: 57px;
	background: url(../images/buttons/works.png) center center no-repeat;
}
#navigation ul li.experimental a {
	width: 118px;
	background: url(../images/buttons/experimental.png) center center no-repeat;
}

/* HOVER */
#navigation ul li.about a:hover,
#navigation ul li.works a:hover,
#navigation ul li.experimental a:hover {bottom: 15px;}


/*------------------------------------------------------------------------------------
  PROFILE
------------------------------------------------------------------------------------*/   
#profile {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
	background: #151515;
	border-top: solid 1px #575757; 
	border-bottom: solid 1px #575757; 
	position: relative; /* For the close button */
}
#content-left {
	width: 740px;
	float: left;
	padding: 30px 0 40px 30px;
}
#content-right {
	width: 160px;
	float: left;
	padding: 30px 0 40px 0;
}

/* BANNERS */
#content-banners {
	width: 603px;
	height: 104px;
	float: left;
}

#content-left ul li {
	width: 201px;
	height: 52px;
	float: left;
	overflow: hidden;	
	position: relative; /* IE */
}
#content-left ul li.linkedin a,
#content-left ul li.posterous a,
#content-left ul li.behance a,
#content-left ul li.flickr a,
#content-left ul li.twitter a,
#content-left ul li.facebook a {	
	width: 201px;
	height: 104px;
	float: left;
	text-indent: -999999px;
	overflow: hidden;
	display: block;
	position: relative;
}
#content-left ul li.linkedin a {background: url(../images/buttons/profile-linkedin.png) center center no-repeat;}
#content-left ul li.posterous a {background: url(../images/buttons/profile-posterous.png) center center no-repeat;}
#content-left ul li.behance a {background: url(../images/buttons/profile-behance.png) center center no-repeat;}
#content-left ul li.flickr a {background: url(../images/buttons/profile-flickr.png) center center no-repeat;}
#content-left ul li.twitter a {background: url(../images/buttons/profile-twitter.png) center center no-repeat;}
#content-left ul li.facebook a {background: url(../images/buttons/profile-facebook.png) center center no-repeat;}

#content-left ul li.linkedin a:hover,
#content-left ul li.posterous a:hover,
#content-left ul li.behance a:hover, 
#content-left ul li.flickr a:hover, 
#content-left ul li.twitter a:hover, 
#content-left ul li.facebook a:hover {bottom: 52px;}

/* BUTTON-CLOSE */
#bt-close {
	width: 58px;
	height: 19px;
	overflow: hidden;	
	display: block;		
	background: #eee;
	position: absolute;
	bottom: 0px;
	right: 0px;
}
#bt-close a {
	height: 19px;
	display: block;		
	font-size: 1.3em;
	color: #000;
	text-decoration: none;
	padding: 0 8px 0 8px;	
}
#bt-close a:hover {color: #eee; background: #2e586e;}	


/*------------------------------------------------------------------------------------
  CONTAINER
------------------------------------------------------------------------------------*/   
#container { 
	width: 960px;
	margin: 0 auto;
}

/* CONTAINER-CASE */
.container-case {
	width: 960px;
	float: left;
	margin-bottom: 80px;
	position: relative; /* For the top button */
}
.copy {
	width: 960px;
	height: 40px;
	_margin-top: 20px;
	float: left;
}

/* SUBTITLES */
h2 {
	font-size: 1.6em;
	color: #498daf;
}

/* SLIDER BUTTONS */
.anythingSlider             {width: 960px; height: 540px; float: left; position: relative;}
.anythingSlider .wrapper    {width: 960px; overflow: auto; height: 540px; position: absolute; top: 0; left: 0;}
.anythingSlider .wrapper ul {width: 99999px; list-style: none; position: absolute; top: 0; left: 0; margin: 0;}
.anythingSlider ul li       {display: block; float: left; padding: 0; height: 540px; width: 960px; margin: 0;}

.anythingSlider .arrow {
	height: 18px;
	width: 89px;
	text-indent: -999999px; 
	cursor: pointer; 
	position: absolute;
	top: -19px;
	right: 30px;
}
.anythingSlider .forward { 
	width: 29px;
	height: 18px;
	float: left;
	background: url(../images/buttons/forward.png) center top no-repeat;	
}
.anythingSlider .backward { 
	width: 29px;
	height: 18px;
	position: absolute;
	right: 60px;
	background: url(../images/buttons/backward.png) center top no-repeat;	
}
.anythingSlider .forward:hover  {background-position: 0 -18px;}
.anythingSlider .backward:hover {background-position: 0 -18px;}

/* BUTTON-TOP */
.buttom-top {
	width: 29px;
	height: 18px;
	float: right;
	overflow: hidden;	
	display: block;		
	position: relative; /* IE */
	margin-bottom: 1px;
}
.buttom-top a {
	height: 36px;
	text-indent: -999999px;
	overflow: hidden;
	display: block;	
	position: relative;
	background: url(../images/buttons/top.png) center top no-repeat;	
}	
.buttom-top a:hover {bottom: 18px;}	

/* MORE CASES LINK */
#more-cases {
	height: 19px;
	float: right;
	display: block;		
	position: relative; /* IE */
	background: #eee;	
	_width: 160px;
	_text-align: center;
}
#more-cases a {
	height: 19px;
	display: block;		
	font-size: 1.3em;
	color: #000;
	text-decoration: none;
	padding: 0 8px 0 8px;
}
#more-cases a:hover {color: #eee; background: #2e586e;}


/*------------------------------------------------------------------------------------
  FOOTER
------------------------------------------------------------------------------------*/   
#footer {
	width: 100%;
	height: 221px;
	float: left;	
	clear: both;
	background: url(../images/backgrounds/footer.jpg) center bottom no-repeat;
}
#content-footer {
	width: 100%;
	height: 180px;
	margin: 0 auto;
	text-indent: -999999px;
	overflow: hidden;	
}