/*
	General Stylesheet for layout and typography
	Initial Build : 09.2008
	Author : Francesco Prosperi
*/

/* -------------------------------------------------------------------- RESET */

* {
	margin: 0;
	padding: 0;
}

*:focus {
	outline:none;
}

html, body {
	height:100%;
	width:100%;
}

body {
	font-size:100%;
	font-family:"Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

a {
	text-decoration:none;
}

a.ext:link, a.ext:visited {
	color:#777;
	text-decoration:none;
	background: url(../img/icons/external.png) right no-repeat;
	padding-right: 13px;
}

a.ext:hover, a.ext:active {
	color:#000;
	text-decoration:none;
	background: url(../img/icons/external.png) right no-repeat;
	padding-right: 13px;
}

a.mail:link, a.mail:visited {
	color:#777;
	text-decoration:none;
	background: url(../img/icons/email.png) right no-repeat;
	padding-right: 13px;
}

a.mail:hover, a.mail:active {
	color:#000;
	text-decoration:none;
	background: url(../img/icons/email.png) right no-repeat;
	padding-right: 13px;
}

abbr {
	cursor:help;
}

/* -------------------------------------------------------------------- FULLSCREEN ICON */

img#fullscreenIcon {
	position:fixed;
	top:0;
	right:0;
	height:15px;
	width:15px;
	cursor:pointer;
	z-index:100;
}

div#picInfo {
	position:fixed;
	top:1px;
	right:17px;
	height:15px;
	width:300px;
	text-align:right;
	font-size:.6em;
	color:#777;
}

	div#picInfo a:link, div#picInfo a:visited {
		color:#777;
		text-decoration:none;
	}
	
	div#picInfo a:hover, div#picInfo a:active {
		color:#fff;
	}

* html img#fullscreenIcon, * html div#picInfo { /* ie6 hack */
	position:absolute;
}

/* -------------------------------------------------------------------- HEAD */

div#gotoTop {
	position:absolute;
	top:0;
}

#outer{
	height:100%;
	width:100%;
	display:table;
	vertical-align:middle;
}

#container {
	text-align: center;
	position:relative;
	vertical-align:middle;
	display:table-cell;
	height: 60px;
}

div#top {
	position:relative; 
	width:960px;
	height:60px;
	overflow:visible;
	margin:0 auto;
}

div#leftBlank {
	position:relative;
	top:0;
	left:0;
	float:left;
	width:445px;
	height:60px;
	background:#fff;
}
	img#latest {
		position:absolute;
		left:-9px;
		height:60px;
		width:9px;
	}
	
	span#featured {
		position:absolute;
		top:0;
		left:255px;
		float:left;
		width:188px;
		height:58px;
		background:#fff;
		overflow:hidden;
		border:1px solid #c3c3c3;
		cursor:pointer;
	}
	
	span#featured.hover {
		background:url(../portfolio/last.jpg) no-repeat;
		cursor:pointer;
	}

	img#logo {
		float:left;
		position:relative;
		left:255px;
		width:190px;
		height:60px;
	}

/* -------------------------------------------------------------------- MENU */

div#menuWrap {
	position:relative;
	top:0;
	left:0;
	float:left;
	width:515px;
	height:60px;
	overflow:hidden;
}

	div#menuBorder {
		position:relative;
		top:0;
		left:-480px;
		float:left;
		width:480px;
		height:60px;
		background:url('../img/trasp33.png');
	}

	div#menu {
		padding:16px 0 10px 64px;
		width:auto;
		height:24px;
		background:#fff;
		margin:5px;
		text-align:center;
		vertical-align:middle;
	}

ul {
	margin:0;
	padding:0;
	list-style:none;
	height:20px; 
}

li {
	margin:0;
	height:20px; 
	line-height:20px;
	float:left;
	background-position:top;
	background-repeat:no-repeat;
}


	li.menuSep {
		background:url(../img/menu_slash.png) no-repeat;
		width:20px;
		height:20px;
	}

	li#menuHome {
		background:url(../img/menu_home.png) no-repeat bottom;
		width:46px;
	}
	
	li#menuAbout {
		background-image:url(../img/menu_about.png);
		width:48px;
	}
	
	li#menuPort {
		background-image:url(../img/menu_port.png);
		width:73px;
	}
	
	li#menuBlog {
		background-image:url(../img/menu_blog.png);
		width:35px;
	}
	
	li#menuContact {
		background-image:url(../img/menu_contact.png);
		width:63px;
	}

	li.on {
		background-position:bottom;
	}

	span.placeholder {
		display:block;
		width:100%;
		cursor:pointer;
	}
					

/* -------------------------------------------------------------------- MAIN CONTENT */

div#main {
	position:relative;
	width:960px;
	height:auto;
	margin: 0 auto;
	margin-top:825px;
}

	#theBack {
		position:absolute;
		width:465px;
		height:318px;
		border:0;
		z-index:5;
		cursor:pointer;
	}

	img#feat {
		position:relative;
		width:465px;
		height:35px;
		z-index:6;
		border:0;
	}
	
	#filler {
		position:relative;
		height:283px;
		width:465px;
		z-index:4;
	}

div.leftMain {
	position:relative;
	top:0;
	left:0;
	float:left;
	width:470px;
	height:20px;
	text-align:right;
	padding-top:10px;
	font-size:.7em;
}

	img.title {
		margin-top:1px;
		height:22px;
	}

	div.contentBorder {
		position:relative;
		left:10px;
		float:left;
		width:470px;
		margin-top:10px;
		margin-bottom:700px;
	}

	div.content {
		position:relative;
		height:auto;
		width:480px;
		font-size:0.75em;
		line-height:15px;
		background:#fff;
		text-align:justify;
		color:#000;
		border:1px solid #c3c3c3;
		margin-bottom:30px;
	}

	div.backToTop {
		display:block;
		position:relative;
		bottom:0;
		left:424px;
		width:56px;
		height:13px;
		line-height:13px;
		margin-top:2px;
		background:url('../img/back.png') no-repeat;
	}

	div.backToTopAlt {
		display:block;
		position:relative;
		bottom:0;
		left:414px;
		width:56px;
		height:13px;
		line-height:13px;
		margin-top:2px;
		background:url('../img/back.png') no-repeat;
	}

	div.backToTopAlt-on {
		display:block;
		position:relative;
		bottom:0;
		left:414px;
		width:56px;
		height:13px;
		line-height:13px;
		margin-top:2px;
		background:url('../img/back.png') no-repeat 0 -13px;
	}
	
	div.backToTop-on {
		display:block;
		position:relative;
		bottom:0;
		left:424px;
		width:56px;
		height:13px;
		line-height:13px;
		margin-top:2px;
		background:url('../img/back.png') no-repeat 0 -13px;
		cursor:pointer;
	}

	div.contentOther {
		position:relative;
		height:auto;
		width:460px;
		font-size:0.75em;
		line-height:15px;
		background:#fff;
		text-align:justify;
		color:#000;
		border:1px solid #c3c3c3;
		line-height:16px;
		padding:10px 10px 0 10px;
	}
	
		div.contentOther ul {
			height:auto;
			padding:10px;
		}
		
		div.contentOther li {
			display:block;
			float:none;
			margin-left:0px;
		}
		
		div.contentOther span.backToTop, div.contentOther span.backToTop-on {
			left:414px;
		}

	div.portfolioItem {
		width:100%;
		color:#656565;
		line-height:16px;
		background:#fff;
	}
	
	div.extra {
		position:absolute;
		left:0;
		top:25px;
		z-index:0;
		height:auto;
		width:448px;
		background:#fff;
		text-align:justify;
		color:#656565;
		padding:10px;
		border:1px solid #c3c3c3;
	}
	
	div.portInfo {
		z-index:10;
		position:relative;
		background:#fff;
		width:450px;
		padding:10px 10px 0px 10px;
	}

	div.portfolioItem p.left { float:left; width:50%;}

	div.portfolioItem p.right { float:right; width:50%; text-align:right;}
	
	div.portfolioItem span.client {
		color:#e0218a;
		font-weight:bold;
	}
	
	img.thumb {
		top:0;
		float:left;
		width:456px;
		height:313px;
		background:#fff;
		overflow:hidden;
		padding:1px;
		border:1px solid #c3c3c3;
		margin-bottom:5px;
		cursor:pointer;
		z-index:10;
	}
	
	p.cliente {
		margin-bottom:10px;
	}
	
/* -------------------------------------------------------------------- FOOTER */

div#footer {
	position:relative;
	bottom:0;
	left:0;
	clear:both;
	text-align:left;
	background:url(../img/trasp70.png);
	width:940px;
	margin-top:150px;
	padding:10px 10px 225px 10px;
	font-size:.7em;
	color:#fff;
}

div#footer span.purple {
	color:#e0218a;
}

div#footer span.left {
	float:left;
}	
	
div#footer span.right {
	float:right;
	color:#aaa;
}	

div#awards {
	margin-top:30px;
	clear:both;
}

div#awards img {
	vertical-align:top;
	margin-bottom:10px;
	border:0;
	display:block;
}

/* -------------------------------------------------------------------- FORM */

.clear {
	clear: both;
	height: 0px;
	font-size: 0px;
}

input, textarea {
	font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
	font-size:12px;
}

.formholder label {
	display: block;
	color: #656565;
	padding-bottom: 0px;
	padding-left: 2px;
	padding-top: 2px;
}

.field {
	border: 1px solid #fff;
	background: #eee;
	color: #000;
	padding: 2px;
	width:220px;
	margin-bottom: 2px;
}

.field100 {
	border: 1px solid #fff;
	background: #eee;
	color: #000;
	padding: 2px;
	width:456px;
	margin-bottom: 2px;
}

.fielderror {
	border: 1px solid #e0218a;
	background: #FFDFF0;
	color: #000;
	width:220px;
	padding: 2px;
	margin-bottom: 2px;
}

.field100error {
	border: 1px solid #e0218a;
	background: #FFDFF0;
	color: #000;
	width:456px;
	padding: 2px;
	margin-bottom: 2px;
}

.buttonholder {
	padding-top: 15px;
}
.buttonholder input {
	float: left;
}
.buttonholder span {
	display: block;
	float: left;
	font-size: 11px;
	padding-left: 10px;
	padding-top: 3px;
	color: #666;
}

.button {
	border: 1px solid #a00000;
	background: #e0218a;
	color: #fff;
	padding: 2px;
	width: 80px;
	cursor: pointer;
}

.button-off{
	border: 1px solid #555;
	background: #7E7E7E;
	color: #eee;
	padding: 2px;
	width: 80px;
	cursor: default;
}

span#sendStatus {
	padding-top:2px;
}