/* ------------------------------------------------------------
BODY
general and layout
no specific colors and no font sizes after the body
------------------------------------------------------------*/

body {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background: url(../images/layout/head.gif) no-repeat 0 0;
}

.everything {
/* sometimes you need a general container, immediately
after the body, for background or fixed element purposes */
	
}


/* ------------------------------------------------------------
   for intended general background vertical 100% - flowing till bottom
   ------------------------------------------------------------

html, body {
	height: 100%;
}
.everything {
	min-height: 100%;
	background: url(../images/layout/XXX_backgroundImageHere_XXX) repeat-y top center;
}
	------------------------------------------------------------
	------------------------------------------------------------*/



/* ------------------------------------------------------------
General purpose classes - TAGS
------------------------------------------------------------*/

div, p, a { margin: 0; padding: 0; }
ol, ul, li { margin: 0; padding: 0; }
form { margin: 0; padding: 0; }
img { margin: 0; border: 0; }
input { padding: 2px; }
table, tr, td, th,
thead, tbody, tfoot, caption { margin: 0; padding: 0; } 

table {
	display: table; 
	empty-cells: show; 
	border-collapse: collapse; 
}
tr { display: table-row; }
thead { display: table-header-group; }
tbody { display: table-row-group; }
tfoot { display: table-footer-group; }
col { display: table-column; }
colgroup { display: table-column-group; }
td, th { display: table-cell; }
caption { display: table-caption; }
td { 	vertical-align: top; }

/* -------------------------------------------------   hr --*/

hr {  
	/* for IE-like browsers */
	text-align: center;
	height: 1px;
	border: none;
}
html>body hr {  
	/* for mozilla-like browsers */
	margin: 0 auto;
	height: 1px;
	border: none;
}
hr.thin {
	
}

/* ----------------------------------------------   A link --*/

a,
a:link,
a:visited ,
a:hover,
a:focus,
a:active {
	
}

/* ------------------------------------------------------------
General purpose classes - SPECIFIC CLASSES
------------------------------------------------------------*/

.clearerBoth {
	clear: both;
	height: 1px;
	overflow: hidden;
}
.clearerLeft {
	clear: left;
	height: 1px;
	overflow: hidden;
}
.clearerRight {
	clear: right;
	height: 1px;
	overflow: hidden;
}
.hidden, .skipNav {
	display: none;
}

/* ------------------------------------------------------------
WRAPPERS generali
------------------------------------------------------------*/

.mainWrapper {
/* contains everything - header, body, footer */
	
}
.preHeadWrapper {
/* if there is a header, this can be a DIV before it,
for the placement of service links and other stuff */
	height: 143px;
}
.headWrapper {
/* the classic header zone, with a logo, an image in bkg,
and if needed some links, input for login etc */
	height: 24px;
	width: 970px;
}
.postheadWrapper {
/* this DIV zone is intended for something to be put 
under the header but before the content */
	
}
.pathWrapper {
/* the breadCrumbs zone, in which there is the path to
current page with back links to parent pages; it depends on 
a father: mean is inside .postheadWrapper or .preColumnsWrapper */
	
}
.contentWrapper {
/* ususally from this point on there is the content 
of the page, changing from page to page */
	width: 970px;
	padding: 20px 0 0 0; 
}
.preColumnsWrapper {
/* a DIV that can bu useful if some content need to 
stay before the specific columns but inside the content */
	
}
.column01Wrapper {
/* wrapper of the first column, usually a floating one */
	float: right;
	width: 244px;
	padding: 0 0 0 0;
}
.column02Wrapper {
/* wrapper of the second column, the one with the content,
in a two-colum layout, or the second floating in a three-columns */
	width: 620px;
	margin: 0 30px 0 76px;
}
.column03Wrapper {
/* in a three-columns the content colum, usually */
	display: none;
}
.preFootWrapper {
/* if something has to be put before the footer but after
the content (for sematic reasons :-) */
	
}
.footWrapper {
/* the usual footer */
	width: 885px;
	padding: 32px 0 0 0;
	margin: 32px 0 32px 86px;
	border-top: 1px dotted #f26532;
}
.postFootWrapper {
/* if something has to be put after the footer */
	
}

/* ------------------------------------------------------------
main menu
------------------------------------------------------------*/

.mainmenu {
	width: 272px;
	height: 24px;
	float: right;
	margin: 0;
	padding: 0;
}
.menu01,
.menu02,
.menu03,
.menu04 {
	width: 68px;
	height: 24px;
	display: block;
	float: left;
}
.menu01 {
	background: url(../images/layout/menu01.gif) no-repeat 0 0;
}
.menu02 {
	background: url(../images/layout/menu02.gif) no-repeat 0 0;
}
.menu03 {
	background: url(../images/layout/menu03.gif) no-repeat 0 0;
}
.menu04 {
	background: url(../images/layout/menu04.gif) no-repeat 0 0;
}
a.menu01:link, a.menu01:visited,
a.menu02:link, a.menu02:visited,
a.menu03:link, a.menu03:visited,
a.menu04:link, a.menu04:visited {
	background-position : 0 0;
	Filter: Alpha(Opacity=1000);
	-moz-opacity: 1; opacity: 1;
}
a.menu01:hover, a.menu01:active,
a.menu02:hover, a.menu02:active,
a.menu03:hover, a.menu03:active,
a.menu04:hover, a.menu04:active {
	background-position : -68px 0;
	Filter: Alpha(Opacity=60);
	-moz-opacity: 0.60; opacity: 0.60;
}
a.select:link, a.select:visited,
a.select:hover, a.select:active {
	background-position : -68px 0;
	Filter: Alpha(Opacity=1000);
	-moz-opacity: 1; opacity: 1;
}



.column01Wrapper p {
	margin: 0 0 12px 0;
	padding: 0 0 12px 0;
	bborder-bottom: 1px dotted #ccc;
}
.column01Wrapper p em {
	color: #999;
}


/* ------------------------------------------------------------
footer
------------------------------------------------------------*/

.footWrapper ul {
	list-style-type: none;
	text-align: center;
}
.footWrapper li {
	display: inline;
}
.footWrapper a {
	text-decoration: none;
	color: #999;
	padding: 0 10px 0 10px;
}


/* ------------------------------------------------------------
latest
------------------------------------------------------------*/

p.dida {
	padding: 8px 0 16px 0;
	margin: 0 0 16px 0;
	color: #999;
}
.title {
	color: #f26532;
	font-weight: bold;
}
.desc {
	
}
.kind {
	font-weight: bold;
	color: #777;
}



a.piccole {
	display: block;
	padding: 24px;
	border: 1px solid #ccc;
	float: left;
	margin: 0 17px 17px 0;
}
.thumb {
	clear: left;
	float: left;
	margin: 4px 12px 8px 0;
	
}

.column02Wrapper p {
	padding: 0 0 12px 0;
	line-height: 1.6em;
}
.column02Wrapper a {
	color: #f26532;
	text-decoration: none;
}

.smallcolonna img {
	margin: 0 0 16px 0;
}



/* ------------------------------------------------------------
colonna destra
------------------------------------------------------------*/

.column01Wrapper p.papercolumn {
	background: url(../images/bkg_paper.jpg) no-repeat 0 0;
	margin: 12px 0 12px 0;
	padding: 26px 26px 20px 26px;
}
.column01Wrapper p.webcolumn {
	background: url(../images/bkg_web.jpg) no-repeat 0 0;
	margin: 0 0 12px 0;
	padding: 6px 6px 10px 46px;
	font-family:"Courier New", Courier, monospace;
	line-height: 1.6em;
	font-size: 0.95em;
}
.column01Wrapper p.videocolumn {
	background: url(../images/bkg_video.jpg) no-repeat 0 0;
	margin: 0 0 12px 0;
	padding: 60px 6px 10px 70px;
	color: #FFF;
}






/* ------------------------------------------------------------
for menu nested UL in column
------------------------------------------------------------

.menuWrapper {
	
}
.menuWrapper ul,
.menuWrapper li {
	display: inline;
}
.menuWrapper li a {
	display: block;
}
.menuWrapper ul a {padding-left: 0;}
.menuWrapper ul ul a {padding-left: 10px;}
.menuWrapper ul ul ul a {padding-left: 20px;}

.menuWrapper ul a img.icon {
	vertical-align: middle;
	margin-right: 4px;
}

--------------------------- this is the code for the menu ------

<!-- navigation indent menu -->
<div class="menuWrapper">
	<ul>
		<li><a href="">link 1</a></li>
		<li><a href="">link 2</a>
			<ul>
				<li><a href="">firstlevel 1</a></li>
				<li><a href="">firstlevel 2</a>
					<ul>
						<li><a href=""><img src="images/icons/doc.gif" class="icon"/> secondlevel 1</a></li>
						<li><a href="" class="selected">secondlevel 2</span></li>
					</ul>
				</li>
				<li><a href="">firstlevel 3</a></li>
			</ul>
		</li>
		<li><a href="">link 3</a></li>
	</ul>
</div>
<!-- end : navigation indent menu -->

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