/*
---------------------------------------------------------------------

MANUXONLINE CSS

Style Type: Screen
Author: Emanuele Pelliccione
Last Update: 10-05-2009

---------------------------------------------------------------------
*/

/*
--------------------------------------------------------
GLOBALS
--------------------------------------------------------
*/

html, 
body,
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
p,
ul, 
ol, 
li,
dl, 
dt, 
dd,
a,
img,  
form,
fieldset,
legend,
label, 
input, 
textarea,
button
{
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
}
body 
{
	margin-bottom: 20px;
	background: #3b3937 url(../img/bg.png) 0 0 repeat fixed;
	color: #e4d9bb;
	font: 12px/20px verdana, arial, helvetica, sans-serif;
}
.right 
{
	float: right;
	margin: 0 0 20px 20px;
}
.left 
{
	float: left;
	margin: 0 20px 20px 0;
}
.hide
{
	position: absolute;
	top: -9999px;
	left: -9999px;
}
.show
{
	position: static;
}
hr
{
	display: none;
}

/*
--------------------------------------------------------
LAYOUT > HEADER
--------------------------------------------------------
*/

div#header
{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 88px;
	background: transparent url(../img/header.png) 0 0 repeat-x;
}
div#header-contents 
{
	width: 50%;
	height: 88px;
	background: transparent url(../img/header-red.png) 0 0 repeat-x;
}
div#logo-navigation
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
div#logo-navigation-contents
{
	position: relative;
	width: 844px;
	height: 88px;
	margin: 0 auto;
	background: transparent url(../img/header-logo.png) 0 0 no-repeat;
}
button#minimize,
button#maximize
{
	position: fixed;
	top: 46px;
	right: 0;
	z-index: 2;
	width: 28px;
	height: 94px;
	color: #99dddd;
	cursor: pointer;
	text-indent: -9999px;
}
button#minimize
{
	background: transparent url(../img/minimize.png) 0 0 no-repeat;
}
button#minimize:hover
{
	background: transparent url(../img/minimize.png) -28px 0 no-repeat;
}
button#maximize
{
	background: transparent url(../img/maximize.png) 0 0 no-repeat;
}
button#maximize:hover
{
	background: transparent url(../img/maximize.png) -28px 0 no-repeat;
}

/*
--------------------------------------------------------
LAYOUT > SECTIONS
--------------------------------------------------------
*/

div#contents
{
	width: 844px;
	margin: 0 auto;
	padding-top: 46px;
}
div.section-box
{
	padding-bottom: 5px;
	background: transparent url(../img/section-columns-bottom.png) bottom left no-repeat;
}
div.section-contents
{
	overflow: hidden;
	background: transparent url(../img/section-columns-contents.png) 0 0 repeat-y;
}
div.section-contents-main
{
	float: left;
	width: 520px;
	margin-right: 5px;
	padding: 15px 20px 0 20px;
}
div.section-contents-side
{
	float: right;
	width: 274px;
	margin-left: 5px;
	padding-bottom: 20px;
}
div.section-sub-first
{
	float: left;
	width: 250px;
	padding-right: 10px;
}
div.section-sub-second
{
	float: right;
	width: 250px;
	padding-left: 10px;
}

/*
--------------------------------------------------------
LAYOUT > SECTIONS > PROFILE
--------------------------------------------------------
*/

div#profile
{
	padding-top: 55px;
	background: transparent url(../img/section-top-profile.png) 0 0 no-repeat;
}

/*
--------------------------------------------------------
LAYOUT > SECTIONS > PORTFOLIO
--------------------------------------------------------
*/

div#portfolio
{
	padding-top: 55px;
	background: transparent url(../img/section-top-portfolio.png) 0 0 no-repeat;
}
div#portfolio div.section-box
{
	background: transparent url(../img/section-single-bottom.png) bottom left no-repeat;
}
div#portfolio div.section-contents
{
	padding: 15px 20px 0 20px;
	background: transparent url(../img/section-single-contents.png) 0 0 repeat-y;
}
div.portfolio-item
{
	overflow: hidden;
	margin-bottom: 20px;
	padding: 15px;
	background-color: #262524;
}
div.portfolio-item img
{
	float: right;
}

/*
--------------------------------------------------------
LAYOUT > SECTIONS > LINKS
--------------------------------------------------------
*/

div#links
{
	padding-top: 55px;
	background: transparent url(../img/section-top-links.png) 0 0 no-repeat;
}

/*
--------------------------------------------------------
LAYOUT > SECTIONS > CONTACTS
--------------------------------------------------------
*/

div#contacts
{
	padding-top: 55px;
	background: transparent url(../img/section-top-contacts.png) 0 0 no-repeat;
}
div#contacts div.section-contents-main
{
	position: relative;
}
form 
{
	width: 520px;
	margin-bottom: 20px;
	padding-top: 6px;
	background: #262524 url(../img/form-top.png) top left no-repeat;
}
fieldset 
{
	padding-bottom: 6px;
	background: #262524 url(../img/form-bottom.png) bottom left no-repeat;
}
input, 
textarea 
{
	width: 367px;
	padding: 3px;
	border: 1px solid #524f4e;
	background-color: #343231;
}
textarea 
{
	height: 164px;
}
input:hover, 
textarea:hover 
{
	border: 1px solid #767270;
}
input:focus, 
textarea:focus 
{
	border: 1px solid #868180;
	background-color: #474443;
}
form button 
{
	position: relative;
	left: 125px;
	width: 60px;
	height: 24px;
	margin: 4px 0;
	background: transparent url(../img/invia.gif) 0 0 no-repeat;
	cursor: pointer;
}
form button span
{
	display: none;
}
form button:hover, 
form button:focus 
{
	background: transparent url(../img/invia.gif) 0 -24px no-repeat;
}
div#output
{
	position: absolute;
	bottom: 70px;
	right: 30px;
	width: 300px;
	height: 22px;
}
div#output img 
{
	position: absolute;
	top: 0;
	left: 0;
}

/*
--------------------------------------------------------
LAYOUT > SECTIONS > FOOTER
--------------------------------------------------------
*/

div#footer
{
	padding-top: 55px;
	background: transparent url(../img/section-top-footer.png) 0 0 no-repeat;
}
div#footer div.section-box
{
	background: transparent url(../img/section-single-bottom.png) bottom left no-repeat;
}
div#footer div.section-contents
{
	padding: 3px 20px;
	background: transparent url(../img/section-single-contents.png) 0 0 repeat-y;
}

/*
--------------------------------------------------------
LAYOUT > SECTIONS > 404
--------------------------------------------------------
*/

div#message-404
{
	padding-top: 55px;
	background: transparent url(../img/section-top-portfolio.png) 0 0 no-repeat;
}
div#message-404 div.section-box
{
	background: transparent url(../img/section-single-bottom.png) bottom left no-repeat;
}
div#message-404 div.section-contents
{
	padding: 15px 20px 0 20px;
	background: transparent url(../img/section-single-contents.png) 0 0 repeat-y;
}

/*
--------------------------------------------------------
TYPOGRAPHY > GLOBALS
--------------------------------------------------------
*/

h1
{
	position: absolute;
	top: 0;
	left: 0;
	text-indent: -9999px;
}
h2
{
	height: 30px;
	margin-bottom: 20px;
	border-bottom: 1px solid #413f3d;
	text-indent: -9999px;
}
h3 
{
	margin-bottom: 20px;
	padding-left: 20px;
	background: transparent url(../img/bullet-title.png) 0 50% no-repeat;
	color: #fff7e3;
	font-size: 16px;
}
h4
{
	margin-bottom: 20px;
	color: #fff7e3;
	font-size: 13px;
}
p
{
	padding-bottom: 20px;
}
ul 
{
	padding: 0 0 20px 15px;
	list-style-type: square;
}
ul.list-advanced 
{
	margin-bottom: 20px;
	padding: 0;
	list-style-type: none;
	background: transparent url(../img/dots.gif) bottom left no-repeat;
}
ul.list-advanced li 
{
	padding: 5px 0 5px 20px;
	background: transparent url(../img/dots-bullet.gif) 0 0 no-repeat;
}
ul.list-advanced-links 
{
	padding-bottom: 1px;
}
ul.list-advanced-links li 
{
	padding: 0;
	background: none;
}
dt 
{
	padding-bottom: 20px;
	color: #fff7e3;
	font-size: 13px;
	font-weight: bold;
}
dd 
{
	padding-left: 20px;
}
dl.deflist-advanced dd 
{
	margin-bottom: 20px;
	background: transparent url(../img/dots.gif) bottom left no-repeat;
}
acronym
{
	cursor: help;
}
a:link, 
a:visited 
{
	color: #99dddd;
	text-decoration: none;
}
a:hover, 
a:focus
{
	color: #fff;
	text-decoration: none;
}
ul.list-advanced-links a:link, 
ul.list-advanced-links a:visited 
{
	display: block;
	padding: 5px 0 5px 20px;
	background: transparent url(../img/dots-bullet.gif) 0 0 no-repeat;
}
ul.list-advanced-links a:hover, 
ul.list-advanced-links a:focus 
{
	background-color: #22211f;
}

/*
--------------------------------------------------------
TYPOGRAPHY > SECTIONS > PROFILE
--------------------------------------------------------
*/

h2#title-main-profile
{
	background: transparent url(../img/title-main-profile.png) 0 0 no-repeat;
}
div#profile div.section-contents-main a:link,
div#profile div.section-contents-main a:visited
{
	border-bottom: 1px dotted #99dddd;
}
div#profile div.section-contents-main a:hover,
div#profile div.section-contents-main a:focus
{
	border-bottom: 1px dotted #fff;
}

/*
--------------------------------------------------------
TYPOGRAPHY > SECTIONS > PORTFOLIO
--------------------------------------------------------
*/

h2#title-main-portfolio
{
	background: transparent url(../img/title-main-portfolio.png) 0 0 no-repeat;
}
p.portfolio-link
{
	clear: right;
	padding: 11px 0 0 0;
}
div.portfolio-item a:link img, 
div.portfolio-item a:visited img 
{
	border: 6px solid #4b4846;
}
div.portfolio-item a:hover img,
div.portfolio-item a:focus img  
{
	border: 6px solid #65615f;
}
p.portfolio-link a:link, 
p.portfolio-link a:visited 
{
	display: block;
	width: 719px;
	height: 35px;
	padding-left: 55px;
	background: #1d1c1b url(../img/portfolio-link.gif) 0 0 no-repeat;
	line-height: 34px;
}
p.portfolio-link a:hover, 
p.portfolio-link a:focus 
{
	background: #000 url(../img/portfolio-link.gif) 0 -35px no-repeat;
}
a.thickbox
{
	display: block;
	position: relative;
}
a.thickbox span 
{
	display: none;
}
a.thickbox:hover span 
{
	display: block;
	position: absolute;
	top: 157px;
	right: 4px;
	width: 32px;
	height: 32px;
	background: #65615f url(../img/icon-magnify.gif) 0 0 no-repeat;
}

/*
--------------------------------------------------------
TYPOGRAPHY > SECTIONS > LINKS
--------------------------------------------------------
*/

h2#title-main-links
{
	background: transparent url(../img/title-main-links.png) 0 0 no-repeat;
}
div#links h3
{
	clear: both;
}

/*
--------------------------------------------------------
TYPOGRAPHY > SECTIONS > CONTACTS
--------------------------------------------------------
*/

h2#title-main-contacts
{
	background: transparent url(../img/title-main-contacts.png) 0 0 no-repeat;
}
label 
{
	display: block;
	float: left;
	width: 110px;
	margin: 5px 15px 0 0;
	text-align: right;
}
input, 
textarea 
{
	color: #e4d9bb;
	font: 12px verdana, arial, helvetica, sans-serif;
}
form dt 
{
	padding-bottom: 0;
}
form dd 
{
	padding: 8px 0 20px 0;
	background: #262524 url(../img/form-separator.png) bottom left no-repeat;
}
sup
{
	color: #e4d9bb;
}
p#form-note
{
	font-size: 10px;
	font-style: italic;
}
p#ok 
{
	padding: 0 0 0 30px;
	background: transparent url(../img/icon-ok.png) 0 0 no-repeat;
}
p#error 
{
	padding: 0 0 0 30px;
	background: transparent url(../img/icon-error.png) 0 0 no-repeat;
}

/*
--------------------------------------------------------
TYPOGRAPHY > SECTIONS > FOOTER
--------------------------------------------------------
*/

div#footer p
{
	padding-bottom: 0;
	color: #a19c8f;
	font-size: 10px;
	text-align: center;
}
p#link-top
{
	display: none;
}

/*
--------------------------------------------------------
TYPOGRAPHY > SECTIONS > 404
--------------------------------------------------------
*/

h2#title-main-404
{
	background: transparent url(../img/title-main-404.png) 0 0 no-repeat;
}
div#message-404 a:link,
div#message-404 a:visited
{
	border-bottom: 1px dotted #99dddd;
}
div#message-404 a:hover,
div#message-404 a:focus
{
	border-bottom: 1px dotted #fff;
}

/*
--------------------------------------------------------
TYPOGRAPHY > SECTIONS > SIDE
--------------------------------------------------------
*/

div.section-contents-side
{
	font-size: 11px;
}
div.section-contents-side h2
{
	height: 38px;
	margin-bottom: 0;
	border-bottom: 0;
	text-indent: -9999px;
}
div.section-contents-side ul
{
	padding: 0;
	list-style-type: none;
}
div.section-contents-side li
{
	border-bottom: 1px solid #1e1d1c;
	line-height: 20px;
}
div.section-contents-side ul.menu-sub-sections li
{
	padding: 6px 20px; /* for disabled js scenery */
}
div.section-contents-side li a:link, 
div.section-contents-side li a:visited 
{
	display: block;
	padding: 6px 20px;
}
div.section-contents-side li a:hover, 
div.section-contents-side li a:focus 
{
	background: #4d4c49 url(../img/menu-arrow.gif) 10px 50% no-repeat;
}

/*
--------------------------------------------------------
TYPOGRAPHY > SECTIONS > SIDE > PROFILE
--------------------------------------------------------
*/

h2#title-side-profile
{
	background: transparent url(../img/title-side-profile-alt.png) 0 0 no-repeat;
}
h2#title-side-cv
{
	height: 43px;
	background: transparent url(../img/title-side-cv.png) 0 0 no-repeat;
}
h2#title-side-profiles
{
	height: 43px;
	background: transparent url(../img/title-side-profiles.png) 0 0 no-repeat;
}
p#link-cv 
{
	padding-bottom: 0;
	line-height: 18px;
}
p#link-cv a:link, 
p#link-cv a:visited 
{
	display: block;
	padding: 11px 0 11px 75px;
	border-bottom: 1px solid #1e1d1c;
	background: transparent url(../img/icon-pdf.png) 20px 50% no-repeat;
}
p#link-cv a:hover, 
p#link-cv a:focus
{
	background-color: #4d4c49;
}
p#link-cv a em 
{
	color: #e4d9bb;
	font-size: 10px; 
	font-style: normal;
}

/*
--------------------------------------------------------
TYPOGRAPHY > SECTIONS > SIDE > LINKS
--------------------------------------------------------
*/

h2#title-side-links
{
	background: transparent url(../img/title-side-links-alt.png) 0 0 no-repeat;
}

/*
--------------------------------------------------------
TYPOGRAPHY > SECTIONS > SIDE > CONTACTS
--------------------------------------------------------
*/

h2#title-side-contacts
{
	background: transparent url(../img/title-side-contacts.png) 0 0 no-repeat;
}
ul#quick-contacts li 
{
	padding: 11px 0 11px 65px;
	line-height: 18px;
}
ul#quick-contacts li a:link, 
ul#quick-contacts li a:visited 
{
	display: inline;
	padding-left: 0;
}
ul#quick-contacts li a:hover, 
ul#quick-contacts li a:focus
{
	background: none;
}
ul#quick-contacts li#contact-mail 
{
	background: transparent url(../img/icon-email.png) 20px 50% no-repeat;
}
ul#quick-contacts li#contact-msn 
{
	background: transparent url(../img/icon-msn.png) 20px 50% no-repeat;
}
ul#quick-contacts li#contact-icq 
{
	background: transparent url(../img/icon-icq.png) 20px 50% no-repeat;
}
ul#quick-contacts li#contact-mobile 
{
	background: transparent url(../img/icon-mobile.png) 20px 50% no-repeat;
}

/*
--------------------------------------------------------
TYPOGRAPHY > NAVIGATION
--------------------------------------------------------
*/

ul#navigation
{
	position: absolute;
	top: 0;
	right: 0;
	width: 612px;
	height: 46px;
	padding: 0;
	background: transparent url(../img/navigation.png) 0 0 no-repeat;
	list-style-type: none;
}
ul#navigation li 
{
	position: absolute;
	top: 0;
}
ul#navigation a 
{
	display: block;
	height: 46px;
	text-indent: -9999px;
}
li#navigation-profile 
{
	left: 109px;
	width: 87px;
}
li#navigation-portfolio 
{
	left: 207px;
	width: 103px;
}
li#navigation-links 
{
	left: 320px;
	width: 74px;
}
li#navigation-contacts 
{
	left: 404px;
	width: 99px;
}
li#navigation-profile a:hover, 
li#navigation-profile a:focus,
body.page-profile li#navigation-profile 
{
	background: transparent url(../img/navigation.png) -109px -46px no-repeat;
}
li#navigation-portfolio a:hover, 
li#navigation-portfolio a:focus,
body.page-portfolio li#navigation-portfolio 
{
	background: transparent url(../img/navigation.png) -207px -46px no-repeat;
}
li#navigation-links a:hover, 
li#navigation-links a:focus,
body.page-links li#navigation-links 
{
	background: transparent url(../img/navigation.png) -320px -46px no-repeat;
}
li#navigation-contacts a:hover, 
li#navigation-contacts a:focus,
body.page-contacts li#navigation-contacts 
{
	background: transparent url(../img/navigation.png) -404px -46px no-repeat;
}

/*
--------------------------------------------------------
TYPOGRAPHY > SUBNAVIGATION
--------------------------------------------------------
*/

div.section-contents-side li.menu-link-on a
{
	background: #4d4c49 url(../img/menu-arrow.gif) 10px 50% no-repeat;
	color: #fff;
}