/*------------------------------------------------------------------------------------
      (C)2011 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: #121212;
}
sup {
	font-size: 90%;
    vertical-align: baseline;
    position: relative; 
    bottom: 0.33em;
}
img {border: none; background: url(../images/backgrounds/loading.gif) center center no-repeat;}	


/* TEXT */
p {font-size: 1.3em; line-height: 1.6em; color: #fff; margin-bottom: 6px;}
a {font-size: 1em; color: #666;}
a:hover {color: #d20000;}
ul li {font-size: 1.2em; line-height: 2.3em; color: #fff;}


/* DIVISORS */
hr {
	width: 978px;
	height: 1px;
	float: left;
	background: #666;
	color: #666; /* IE */
}


/* PRELOADING IMAGES */
#preloading-images {
	position: absolute;
	left: -999999px; 
	top: -999999px;
}
#preloading-images img {display: block;}
	

/* WRAPPER */
#wrapper-all {
	width: 978px;
	margin: 0 auto;
}


/*------------------------------------------------------------------------------------
  HEADER
------------------------------------------------------------------------------------*/   
#header {
	width: 100%;
	height: 196px;
	clear: both;
	margin: 0 auto;
}
#header h1 {
	width: 454px;
	height: 196px;
	float: left;
}	
#header h1 a {height: 196px;}


/*------------------------------------------------------------------------------------
  NAVIGATION
------------------------------------------------------------------------------------*/   
#navigation {
	width: 978px;
	height: 34px;
	float: left;
	margin-top: -29px;
}
#navigation ul {
	width: 237px;
	height: 34px;
	float: right;
	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.personal a {
	height: 68px;
	float: left;
	text-indent: -999999px;
	overflow: hidden;
	display: block;
	position: relative;
}

#navigation ul li.works a {width: 72px; background: url(../images/buttons/works.png) center center no-repeat;}
#navigation ul li.personal a {width: 97px; background: url(../images/buttons/personal.png) center center no-repeat;}
#navigation ul li.about a {width: 68px; background: url(../images/buttons/about.png) center center no-repeat;}

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


/* ACTIVE */
#works #navigation ul li.works a,
#personal #navigation ul li.personal a {bottom: 34px;}


/*------------------------------------------------------------------------------------
  PROFILE
------------------------------------------------------------------------------------*/   
#wrapper-profile {
	width: 978px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	_margin-top: -13px;
	*margin-top: -13px;	
}


/* TO HIDE THE ABOUT SESSION */
#homepage #wrapper-profile,
#works #wrapper-profile,
#personal #wrapper-profile,
#error-404 #wrapper-profile {display: none;}

#profile {
	width: 978px;
	float: left;
	background: #181818;
	border-bottom: solid 1px #333;
}
#resume,
#clients,
#networking {
	width: 276px;
	float: left;
	padding: 30px 0 30px 30px;
}
#clients,
#networking {margin-left: 30px;}

#resume h3,
#clients h3,
#networking h3, 
#hub-works h3,
#hub-personal h3 {
	width: 271px;
	height: 52px;
	float: left;
	text-indent: -999999px;
	overflow: hidden;
	margin-bottom: 30px;
}
#resume h3 {background: url(../images/titles/resume.png) no-repeat;}
#clients h3 {background: url(../images/titles/clients.png) no-repeat;}
#networking h3 {background: url(../images/titles/networking.png) no-repeat;}
#hub-works h3 {margin-bottom: 0; background: url(../images/titles/hub-works.png) no-repeat;}
#hub-personal h3 {margin-bottom: 0; background: url(../images/titles/hub-personal.png) no-repeat;}


/* FIND ME ON BUTTONS */ 
#networking ul li {
	width: 201px;
	height: 34px;
	float: left;
	overflow: hidden;	
	position: relative; /* IE */
}

#networking ul li.linkedin a,
#networking ul li.posterous a,
#networking ul li.twitter a,
#networking ul li.behance a,
#networking ul li.flickr a {
	height: 68px;
	float: left;
	text-indent: -999999px;
	overflow: hidden;
	display: block;
	position: relative;
}
#networking ul li.linkedin a {width: 81px; background: url(../images/buttons/linkedin.png) center center no-repeat;}
#networking ul li.posterous a {width: 103px; background: url(../images/buttons/posterous.png) center center no-repeat;}
#networking ul li.twitter a {width: 76px; background: url(../images/buttons/twitter.png) center center no-repeat;}
#networking ul li.behance a {width: 85px; background: url(../images/buttons/behance.png) center center no-repeat;}
#networking ul li.flickr a {width: 62px; background: url(../images/buttons/flickr.png) center center no-repeat;}

#networking ul li.linkedin a:hover,
#networking ul li.posterous a:hover,
#networking ul li.twitter a:hover, 
#networking ul li.behance a:hover, 
#networking ul li.flickr a:hover {bottom: 34px;}


/* CLOSE BUTTON */
#wrapper-bt-close {
	width: 978px;
	height: 40px;
	float: left;
	margin-top: -40px; 
}
#bt-close {
	width: 44px;
	height: 40px;
	float: right;
	overflow: hidden;	
	display: block;		
	position: relative; /* IE */
}
#bt-close a {
	height: 80px;
	text-indent: -999999px;
	overflow: hidden;
	display: block;	
	position: relative;
	background: url(../images/buttons/close.png) center top no-repeat;	
}
#bt-close a:hover {bottom: 40px;}	


/*------------------------------------------------------------------------------------
  HUB-NAVIGATION
------------------------------------------------------------------------------------*/   
#hub-navigation {
	width: 960px;
	float: left;
	margin-top: 72px;
	margin-bottom: 35px;	
	margin-left: 9px;
}
#hub-works,
#hub-personal {
	width: 465px;
	float: left;
}
#hub-personal {margin-left: 30px;}


/* CLIENTS */ 
#clients ul li a {text-decoration: none;}


/*------------------------------------------------------------------------------------
  PROJECTS
------------------------------------------------------------------------------------*/   
/* CONTAINER-PROJECT */
.container-project {
	width: 960px;
	float: left;
	margin-bottom: 80px;
	margin-left: 9px;
	position: relative; /* For the top button */
}
.copy {
	width: 960px;
	height: 52px;
	_margin-top: 15px; /* IE */
	float: left;
}
.live-website {color: #fff; float: right; text-decoration: none; font-style: italic;}
.role {
	width: 960px;
	float: left;
	margin-top: 5px;
}
.role p {color: #888;}

h4 {font: 2.6em Arial, Helvetica, sans-serif; color: #fff; line-height: 0.9em;}

.anythingSlider .wrapper ul li a:hover {
	opacity:0.6;
	filter:alpha(opacity=60);
}


/* 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: 46px;
	width: 80px;
	text-indent: -999999px; 
	cursor: pointer; 
	position: absolute;
	top: -19px;
	right: 30px;
}
.anythingSlider .next { 
	width: 46px;
	height: 80px;
	position: absolute;
	right: -21px;
	top: 230px;
	background: url(../images/buttons/next.png) center top no-repeat;	
}
.anythingSlider .previous { 
	width: 46px;
	height: 80px;
	position: absolute;
	left: -21px;
	top: 230px;
	background: url(../images/buttons/previous.png) center top no-repeat;	
}
.anythingSlider .next:hover  {background-position: 0 -80px;}
.anythingSlider .previous:hover {background-position: 0 -80px;}


/* NAVIGATION LABEL */
.navigation-label {
	position: absolute;
	top: 18px;
	right: 0px;
}
.navigation-label p {font: 1.1em Arial, Helvetica, sans-serif; color: #888888;}


/* SHOW ME MORE, GO BACK BUTTONS */
#show-me-more,
#go-back {
	width: 978px;
	height: 34px;
	float: left;
}
#show-me-more ul {
	width: 139px;
	height: 34px;
	float: left;
	overflow: hidden;	
	position: relative; /* IE */
}
#go-back ul {
	width: 83px;
	height: 34px;
	float: left;
	overflow: hidden;	
	position: relative; /* IE */
}
#show-me-more ul li,
#go-back ul li {
	display: inline;
	float: left;	
}
#show-me-more ul li.show-me-more a,
#go-back ul li.go-back a {
	height: 68px;
	float: left;
	text-indent: -999999px;
	overflow: hidden;
	display: block;
	position: relative;
}
#show-me-more ul li.show-me-more a {
	width: 139px;
	background: url(../images/buttons/show-me-more.png) center center no-repeat;
}
#go-back ul li.go-back a {
	width: 83px;
	background: url(../images/buttons/go-back.png) center center no-repeat;
}
#show-me-more ul li.show-me-more a:hover, 
#go-back ul li.go-back a:hover {bottom: 34px;}


/*------------------------------------------------------------------------------------
  FOOTER
------------------------------------------------------------------------------------*/   
#footer {
	width: 978px;
	height: 220px;
	float: left;
}
#footer-content {
	width: 305px;
	height: 96px;
	float: right;
}
#footer-content a {height: 96px;}

.copyright {
	color: #888; 
	font-style: italic;
	margin-top: 5px;
	_margin-top: -11px;
	*margin-top: -11px;	
}

/* BUTTON-TOP */
.button-top {
	width: 61px;
	height: 34px;
	float: right;

	overflow: hidden;	
	display: block;		
	position: relative; /* IE */
}
.button-top a {
	height: 68px;
	text-indent: -999999px;
	overflow: hidden;
	display: block;	
	position: relative;
	background: url(../images/buttons/top.png) center top no-repeat;	
}	
.button-top a:hover {bottom: 34px;}	


/*------------------------------------------------------------------------------------
  FADEIN-FADEOUT EFFECT
------------------------------------------------------------------------------------*/   
.fadein-fadeout a.image {cursor: pointer;}
.fadein-fadeout span { /*--Used to crop image--*/
	overflow: hidden;
	display: block;
}
.fadein-fadeout a {display: block;}

.fadein-fadeout span.logo { /*--Used to crop image--*/
	width: 454px;
	height: 196px;
}
.fadein-fadeout a.footer {cursor: default;}
.fadein-fadeout span.footer { /*--Used to crop image--*/
	width: 305px;
	height: 96px;
}