@charset "utf-8";

/* Author: Marcello Bianchi */
/* Created: 26.11.2010 */	
/* © Copyright 2011 - MARU ARTS di Marcello Bianchi - www.maruarts.it */


/* CSS Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	list-style-type: none; 
	text-decoration: none;
	color:#333333;
	font-size: 100%;
	font-family:Arial, Helvetica, sans-serif;
	vertical-align: baseline;
}


/* global tags */

body {
	background:#f7f7f7 url(../images/bg.jpg) repeat;
	font-family: "Helvetica Neue", Helvetica, Arial, Helvetica, sans-serif;
	font-size: 14px;
}

a {
	color: #333333;
	outline: none;
}

span a, #container p a {
	border-bottom:#CCC dashed 2px;
}

span a:hover {
	background:white;
}

a:hover, a.awards, #sidebar .colourLovers:hover, #sidebar .awardsDetail span.closeSmall:hover, #sidebar ul.categories .active, #blog #content .awardsTitle {
	color: #de3c47;
}

::-moz-selection {
 background: #d7d7d7;
 color: #181818;
}

::selection {
 background: #d7d7d7;
 color: #181818;
}

#header, #wall, #aboutMe, #portfolio, #blog, .shadow {
	text-shadow: 0 1px 2px white;
}

#footer,.alert {
	text-shadow: 0 1px 2px #1a1a1a;
}


/* global classes  */

.clear { 
	clear: both; 
	height: 0; 
	width: 0;
}

.floatLeft {
	float:left;
}

.highlight {
	font-style:italic;
	color: #7f7f7f;
}

.hide {
	display: none;
}

h2 small {
	font-size:16px;
}

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

.twitter-share-button {
	padding:0px;
}

.alert {
	padding:20px;
	font-size:18px;
	color:#f2f2f2;
	text-align:center;
	position:fixed;
	top:50%;
	left:37%;
	display:none;
	overflow:hidden;
	background:#282828;
	border:1px black solid;
	filter:alpha(opacity=95);
	opacity:.95;
	-moz-opacity:0.95;
	-moz-box-shadow: 0 2px 8px #1a1a1a;
	-webkit-box-shadow: 0 2px 8px #1a1a1a;
	box-shadow: 0 2px 8px #282828;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	z-index:1000;
}

.alert span.title {
	color:white;
	font-size:26px;
	font-weight:bold;
}

.alert span.close {
	width:100px;
	height:21px;
	color:#dd3c46;
	cursor:pointer;
	padding:0 30px 0 0;
	background:url(../images/close.png) 50px -1px no-repeat;
}

.alert span.close:hover {
	color:white;
}


/*----------------------
	START CSS LAYOUT:
----------------------*/



/*  container  */

div#container {
	min-width:960px;
	padding: 0px 30px 0 30px;
	position: relative;
}


/* logo */

#logo {
	width: 103px;
	height: 152px;
	margin: 0 0 30px 0;
 }

#logo a {
	display: block;
	width: 103px;
	height: 152px;
	background: url(../images/logo.png) no-repeat;
}

#logo a:hover {
	background-position: -103px 0;
}


/* change CSS */

#changeCSS a {
	width:115px;
	height:16px;
	font-size:12px;
	color: #a6a6a6;
	padding: 9px 0 9px 13px;
	background-image:url(../images/changeCSS.png);
	position: absolute;
	top:0px;
	left: 190px;
	margin: 0 0 0 10px;
	right: 10px;
	display:none; /* to implement */
}

#changeCSS a:hover, #login a:hover {
	color: white;
}

/* login */

#login {
	width:121px;
	height:17px;
	font-size:12px;
	padding: 9px 13px 9px 13px;
	background-image:url(../images/login.png);
	position: absolute;
	top:0px;
	right: 20px;
}

#login a {
	color: #a6a6a6;
	float:left;
}

#login .it, #login .itActive, #login .en, #login .enActive {
	display: block;
	margin: 0 0 0 2px;
	width: 18px;
	height: 13px;
	background:url(../images/language.png);
	float:right;
}

#login .it {
	background-position: -18px 0;
}

#login .it:hover {
	background-position: 0 0;
}

#login .itActive {
}

#login .en {
	background-position: -54px 0;
}

#login .enActive, #login .en:hover {
	background-position: -36px 0;
}


/* navigation */

ul#nav  {
	position: absolute;
	top:100px;
	right: 10px;
}

ul#nav li { 
	float: left;
	position: relative;
	margin: 0 10px 0 0;
}

ul#nav li a {
	display: block;
	font-size: 14px;
	text-transform: uppercase;
	line-height: 14px;
	letter-spacing: 1px;
}

ul#nav .n1, ul#nav .n2, ul#nav .n3, ul#nav .n4, ul#nav .n5 {
	padding: 15px 0 11px 9px !important;
}

.n1active:hover, ul#nav li a:hover.n2active, ul#nav li a:hover.n3active, ul#nav li a:hover.n4active, ul#nav li a:hover.n5active {
	color: white;
}

ul#nav .n1 {
	width: 55px;
}

.n1active {
	width: 55px;
	color: white;
	padding: 15px 0 11px 9px;
	background-image:url(../images/nav.png);
}

ul#nav .n2 {
	width:102px;
}

.n2active {
	width:102px;
	color: white;
	padding: 15px 0 11px 9px;
	background-image:url(../images/nav.png);
	background-position: -64px 0;
}

ul#nav .n3 {
	width:90px;
}

.n3active {
	width:90px;
	color: white;
	padding: 15px 0 11px 8px;
	background-image:url(../images/nav.png);
	background-position: -175px 0;
}

ul#nav .n4 {
	width:52px;
}

.n4active {
	width:52px;
	color: white;
	padding: 15px 0 11px 10px;
	background-image:url(../images/nav.png);
	background-position: -272px 0;
}

ul#nav .n5 {
	width:112px;
}

.n5active {
	width:112px;
	color: white;
	padding: 15px 0 11px 9px;
	background-image:url(../images/nav.png);
	background-position: -333px 0;
}


/* header */

#header {
	padding: 20px 0 20px 0;
	border-top: 1px #d9d9d9 solid;
	border-bottom: 1px #d9d9d9 solid;
}

#header h1 {
	font-size:24px;
	font-weight:lighter;
}


/* portfolio */

#portfolio {
	overflow: hidden;
}

#portfolio .header {
	height:68px;
	border-top: 1px #d9d9d9 solid;
	border-bottom: 1px #d9d9d9 solid;
	background:url(../images/portfolio.png) left 15px no-repeat;
}

#portfolio .header h3.category {
	font-size:22px;
	position:absolute;
	top:214px;
	left:215px;
	overflow:hidden;
}

#navProjects {
	width:960px;
	margin:0 auto;
	padding:15px 0 0 0;
}

#navProjects .buttons {
	width:260px;
	position:relative;
	float:right;
	right:2px;
	top:0px;
}

#navProjects span.preHide, #navProjects span.nextHide {
	height:39px;
	float:left;
	margin:0 1px 0 0;
	width:89px;
	background:url(../images/navProjects.png) 0 40px no-repeat;
}

#navProjects a.pre, #navProjects a.gallery, #navProjects a.next {
	height:39px;
	float:right;
	margin:0 1px 0 0;
}

#navProjects a.pre {
	width:89px;
	background:url(../images/navProjects.png) no-repeat;
}

#navProjects a.gallery {
	width:79px;
	background:url(../images/navProjects.png) right -41px no-repeat;
}

#navProjects a.next {
	width:89px;
	background:url(../images/navProjects.png) 0px -82px no-repeat;
}

#navProjects a:hover {
	filter:alpha(opacity=85);
	opacity:.85;
	-moz-opacity:0.85;
}

#portfolio #content {
	width:960px;
	margin:0 auto;
	padding:30px 0 0 0;
}

#projects {
	width:600px;
	float:left;
	margin:0 20px 0 0;
}

#projects img {
	clear:both;
	margin:0 0 20px 0;
}


/* sidebar */

#sidebar {
	width:265px;
	float:right;
}

#sidebar h2 {
	font-size:20px;
	font-weight:bold;
	padding: 0 0 15px 0;
}

#sidebar h3 {
	font-size:16px;
	font-weight:bold;
}

#sidebar p {
	padding:0 0 20px 0;
}

#sidebar ul.categories li {
	padding:0 0 3px 0;
	list-style:inside disc;
}

#sidebar ul.categories .active {
}

#sidebar #description, #sidebar .box, #projects img {
	padding:0 0 20px 0;
	border-bottom: 1px #d9d9d9 solid;
}

#sidebar .ribbonSmall, #sidebar .ribbonSmallReturn {
	width:51px;
	height:75px;
	float:left;
	overflow:hidden;
	background:url(../images/awardsSmall.png) no-repeat;
	padding:0 0 20px 0;
	margin:0 20px 0 0;
}

#sidebar .ribbonSmall:hover {
	cursor:pointer;
	background-position: -60px 0;
}

#sidebar .ribbonSmallActive {
	width:51px;
	height:75px;
	float:left;
	overflow:hidden;
	background:url(../images/awardsSmall.png) -60px 0 no-repeat;
	padding:0 0 20px 0;
}

#sidebar .awardsDetail {
	width:188px;
	min-height:75px;
	float:left;
	overflow:hidden;
	display:none;
	border-right:1px #CCC solid;
	padding:0 5px 0 0;
}

#sidebar .awardsDetail li {
	list-style:none;
	clear:both;
	padding:0 0 2px 0;
}

#sidebar .awardsDetail span.closeSmall {
	width:50px;
	height:16px;
	font-size:12px;
	background:url(../images/closeSmall.png) 34px 0 no-repeat;
	padding:2px 0 0 0;
	float:right;
}

#sidebar .awardsDetail span.closeSmall:hover {
	cursor:pointer;
}

#sidebar p.tags, ul#twitter_update_list li a, #sidebar .colourLovers {
	color:#a6a6a6;
}

#sidebar #otherWorks, #sidebar .lastBox {
	padding:20px 0 0 0;
}

#sidebar #colorScheme {
	padding:2px 0 0 0;
	overflow:hidden;
}

#sidebar #colorScheme .color {
	width:50px;
	height:50px;
	float:left;
	border: 1px #CCC solid;
	margin:0 1px 0 0;
}

#sidebar #colorScheme .color:hover {
/*	border-color:#282828;
*/}

#sidebar .colourLovers {
	font-size:12px;
	font-style:italic;
	float:right;
	padding:3px 0 0 0;
}

#sidebar #otherWorks h2 {
	padding: 0 0 2px 0;
}

#sidebar #otherWorks h3 a {
	border-bottom:#CCC dashed 2px;
}

#sidebar #otherWorks a {
}

#sidebar #otherWorks img {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

#sidebar #otherWorks img a {
	width:57px;
	height:57px;
	padding:0 5px 5px 0;
	float:left;
}

#sidebar #otherWorks img:hover {
	filter:alpha(opacity=100);
	-moz-opacity: 1.0;
	opacity: 1.0;
/*	background-position: -57px 0;
*/}


/* blog */

.reloadBlog {
	height:350px;
	background:url(../images/loading.gif) center center no-repeat;
}

.reloadBlog p {
	font-size:18px;
	text-align:center;
	padding:30px 0 0 0;
}

#blog {
	overflow: hidden;
}

#blog .header {
	height:68px;
	border-top: 1px #d9d9d9 solid;
	border-bottom: 1px #d9d9d9 solid;
	background:url(../images/blog.png) left 15px no-repeat;
}

#blog .header .follow {
	padding:20px 0 0 0;
}

#blog .header .follow h3 {
	float:left;
	padding:16px; 10px 0 0;
}

#navProjects {
	width:960px;
	margin:0 auto;
	padding:15px 0 0 0;
}

#navProjects .buttons {
	width:260px;
	position:relative;
	float:right;
	right:2px;
	top:0px;
}

#navProjects a.pre, #navProjects a.gallery, #navProjects a.next {
	height:39px;
	float:left;
	margin:0 1px 0 0;
}

#navProjects a.pre {
	width:89px;
	background:url(../images/navProjects.png) no-repeat;
}

#navProjects a.gallery {
	width:79px;
	background:url(../images/navProjects.png) right -41px no-repeat;
}

#navProjects a.next {
	width:89px;
	background:url(../images/navProjects.png) 0px -82px no-repeat;
}

#navProjects a:hover {
	filter:alpha(opacity=85);
	opacity:.85;
	-moz-opacity:0.85;
}

#blog #content {
	width:960px;
	margin:0 auto;
	padding:30px 0 0 0;
}

#blog #content #postContent {
	width:660px;
	float:left;
	margin:0 20px 0 0;
}

#blog #content .post {
	padding: 0 0 20px 0;
	margin:0 0 30px 0;
	clear:both;
	border-bottom:1px #d9d9d9 solid;
}

#blog #content .share {
	min-width:210px;
	float:right;
}

#blog #content a.awardDown {
	width:104px;
	height:34px;
	background:url(../images/awardsBlogButton.png) no-repeat;
	float:right;
}

#blog #content .post h1, #blog #content .post img {
	font-size:24px;
	padding:0 0 20px 0;
}

#blog #content .post h2 {
	font-size:18px;
	padding:0 0 10px 0;
}

#blog #content .post h3 {
	font-size:16px;
}

#blog #content .post p {
	padding:0 0 10px 0;
}

#blog #content .post ul {
	padding:0 0 10px 0;
}

#blog #content .post li {
	padding:2px 0 0 0;
	list-style:inside disc;
}

#projects, #blog #content .post {
	width:600px;
	float:left;
	margin:0 20px 0 0;
}

#projects img {
	clear:both;
	margin:0 0 30px 0;
}


/* wall */

ul#wall {
	margin: 20px 0 10px 0;
}

ul#wall li {
	display:inline;
	height: 19px;
	font-size:14px;
	margin: 0 20px 0 0;
	padding: 0 0 2px 18px;
	background-image:url(../images/tag.png);
	background-position: 0 2px;
	background-repeat:no-repeat;
}

ul#wall li a {
	color:#a6a6a6;
}

ul#wall li a:hover, ul#wall li a.current {
	color:#333333;
}


/* wall list */

ul#wall-list {
	margin: 20px 0 20px 0;
	overflow: hidden;
	border-bottom: 1px #d9d9d9 solid;	
}

ul#wall-list li {
	height:350px;
	float: left;
	margin: 0 20px 45px 0;
	background:url(../images/loading.gif) center center no-repeat;
}

ul#wall-list li span {
	width:100%;
	visibility:hidden;
	background:#dd3c46;
	position:relative;
	padding:10px;
	top:15px;
	left:0px;
	filter:alpha(opacity=90);
	-moz-opacity: 0.9;
	opacity: 0.9;
}

ul#wall-list li a {
	color: #14d099;
	width: 300px;
	height: 54px;
	display: block;
	padding: 311px 0 0 0;
	font-size: 11px;
}

ul#wall-list li a:hover {
	background-position: -300px 0;
}

ul#wall-list li a:hover span {
	visibility:visible;
	text-decoration: none;
	color: white;
	font-size:12px;
	letter-spacing: 1px;
}

ul#wall-list li p {
	font-size: 11px;
	line-height: 15px;
	color: #AAA;
	margin: 5px 0;
}

ul#wall-list li a .website1 {
	color: #14d099;
	width: 300px;
	height: 54px;
	display: block;
	padding: 311px 0 0 0;
	font-size: 11px;
	background:url(../images/wall/1.jpg) top left no-repeat;
}



/* about me */

#aboutMe {
	overflow: hidden;
}

#aboutMe .header {
	height:68px;
	border-top: 1px #d9d9d9 solid;
	border-bottom: 1px #d9d9d9 solid;
	background:url(../images/aboutMe.png) left 15px no-repeat;
}

#aboutMe .header .follow, #blog .header .follow {
	float:right;
}

#aboutMe .header h3 {
	padding:37px 10px 0 0;
	float:left;
}

#aboutMe .header img {
	padding:21px 0 0 1px;
}

#aboutMe #content {
	height: 908px;
	font-size:16px;
	margin: 20px 10px 0 0;
	padding: 0 0 0 420px;
	background:url(../images/me.png) no-repeat;
}

#aboutMe h2 {
	font-size:24px;
	font-weight:bold;
	padding: 0 0 10px 0;
}

#aboutMe .impagination {
	min-width: 540px;
	padding: 40px 0 0 0;
	line-height:22px;
	clear:both;
}

#aboutMe .impagination ul {
	line-height:20px;
}

#aboutMe .impagination li {
	list-style:inside;
	list-style-type:disc;
}

.designer, .skills {
	width:245px;
	float:left;
}

.developer, .download {
	width:250px;
	float:left;
	padding: 0 0 0 40px;
}

.designer {
	padding: 0 0 0 0;
	background:url(../images/and.png) top right no-repeat;
}

.developer {
}

.skills {
	height:151px;
}

.skills ul {
	background:url(../images/stars.png) no-repeat;
}

.skills li {
	padding: 0 0 6px 3px;
	list-style-type:none;
}

.download {
	padding-top: 50px;
	background:url(../images/download.png) 40px top no-repeat;
}

.cv {
	display: block;
	width: 216px;
	height: 55px;
	background: url(../images/cv.png) no-repeat;
	clear:left;
}

.cv:hover {
	background: url(../images/cv.png) -216px no-repeat;
}

.vCard {
	display: block;
	width: 216px;
	height: 55px;
	background: url(../images/vCard.png) no-repeat;
}

.vCard:hover {
	background: url(../images/vCard.png) -216px no-repeat;
}

.awards {
	padding-top: 20px;
}

.premi {
	display:block;
	width:261px;
	height:131px;
	background:url(../images/awards.png) no-repeat;
	clear:left;
}

.premi:hover {
	background:url(../images/awards.png) -261px no-repeat;
}


/* footer */

#footer {
	height:230px;
	padding: 30px 30px 0 30px;
	background: #333333;
	position: relative;
	bottom:0px;
	clear:both;
}

#footer a {
	color:#cccccc;
}

#footer a:hover {
	color:white;
}

/* contact me */

#contactMe {
	background:url(../images/contact.png) no-repeat;
	padding:50px 0 0 0;
}

#contactMe h3 {
	color:#f7f7f7;
	font-size:16px;
	font-weight:lighter;
	font-weight:bold;
	padding: 0 0 10px 0;
}

#contactMe .impagination {
	width:220px;
	padding: 20px 0 0 0;
	line-height:22px;
	float:left;
}

#contactMe .impagination ul {
	line-height:20px;
}

#contactMe .impagination li {
	list-style-position:outside;
	list-style-type:none;
	color:#cccccc;
}

.social, .siteMap, .twitter, .facebook {
	width:220px;
	float:left;
}

.social {
}


/* twitter */

#twitter {
	width:200px;
}

#twitter a {
	color:#808080;
}


/* twitterMore */

div#twitterMore {
	padding:20px 0 0 0;
}

p#preloader {
	padding:20px;
	background: transparent url(../images/loading.gif) center top no-repeat;
}

ul#twitter_update_list {
	list-style-type: none;
}

ul#twitter_update_list li {
	padding:10px 0 10px 0;
	border-bottom: 1px #d9d9d9 dashed;
}

ul#twitter_update_list li span {
	display: block;
}

ul#twitter_update_list li span a {
	/* links in tweet */
	color: #282828;
}

ul#twitter_update_list li.firstTweet {
	padding:0 0 10px 0;
}

ul#twitter_update_list li.lastTweet {
	border-bottom: none;
}



/* credits */

#credits {
	font-size:12px;
	color:#666;
	text-align:right;
	clear:right;
}


/* go to top */

a.goTop {
 width:34px;
 height:64px;
 background:transparent url(../images/top.png) no-repeat scroll 0 0px;
 text-decoration:none;
 position:fixed;
 top:65%;
 right:0px;
 border:none;
 text-indent:-5000px;
 
 

}

a.goTop:hover {
 background-position: -34px 0;
 display:block;
 cursor:pointer;
}