body {
 margin: 0;
 padding: 0;
 font: 80%/1.5 "Trebuchet MS", Verdana, sans-serif;
 color: #333;
 background-color: #EEE;
 height: 100%; /* IE fix */
}

h1 {
 font-size: 200%;
 color: #666;
 margin: 0.1em 0 0.5em -0.8em;
}
h2 {
 width: 100%; /* IE fix */
 font-size: 130%;
 color: #FFF;
 background-color: #666;
 margin: 2em 0 0.8em -1em;
 padding-left: 0.6em;
}
h3 {
 font-size: 100%;
 width: 90%; 
 padding-left: 11em;
 color: #666;
 margin: 2em 0 0.8em 0;
}
h4 {
  font-size: 90%;
  width: 80%;
  padding-left: 13em;
}


.hide {
 display: none;
}

#header {
 position: relative;
 width: 100%;
 height: 5.3em;
 background-color: #666;
 color: #FFF;
 font-style: italic;
 cursor: default;
}
#header #logo {
 position: absolute;
 z-index: 2;
 left: 0.8em;
 top: 5%;
 width: 4.3em;
 height: 4.3em;
 border-width: 0;
}
#header #span {
 display: none;
}
#header #dcphotography {
 position: absolute;
 top: 15%;
 left: 3.5em;
 height: 3.0em;
 font-size: 2.0em;
}
#header #imaging {
 position: absolute;
 top: 60%;
 left: 0;
 width: 100%;
 height: 1.56em;
 text-indent: 8em;
 font-size: 1.1em;
 background-color: #333;
}

#pagina {
 position: relative;
 width: 100%;
 z-index: 10;
}

#contenuto {
 margin: 0 10% 0 10.2em;
 border-left: 1px solid #666;
 padding: 1em 0 2em 4em;
 padding-left: 20;
}

#contenuto a {
 color: #666;
}
#contenuto ul {
 padding-left: 0;
 margin-left: 1.2em;
}
#contenuto ol {
 padding-left: 0;
 margin-left: 1.7em;
}
#contenuto dt {
 margin-top: 0.8em;
}
#contenuto dd {
}

#contenuto li {
 margin: 0.2em 0em 0.2em 0.2em;
 padding-left: 0.5em;
}

#contenuto1 {
 margin: 0 10% 0 13em;
 border-left: 1px solid #666;
 padding: 1em 0 2em 4em;
 padding-left: 20;
}

#contenuto1 a {
 color: #666;
}
#contenuto1 ul {
 padding-left: 0;
 margin-left: 1.2em;
}
#contenuto1 ol {
 padding-left: 0;
 margin-left: 1.7em;
}
#contenuto1 dt {
 margin-top: 0.8em;
}
#contenuto1 dd {
}
#contenuto1 li {
 margin: 0.2em 0em 0.2em 0.2em;
 padding-left: 0.5em;
}


#chiusura {
 width: 100%;
 font-size: 90%;
 color: #666;
 border-top: 1px solid #333;
 text-align: center;
}
#chiusura a {
 color: #333;
}

#scrollmenu {
 z-index: 100;
 position: absolute;
 top: 1em;
 left: 0.5em;
 width: 11em;
 overflow: visible;
}

#scrollmenu ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
}

/*
 If you want per-item background images in your menu items, here's how to do it.
 1) Assign a unique ID tag to each link in your menu, like so: <a id="xyz" href="#">
 2) Copy and paste these next lines for each link you want to have an image:
    .menulist a#xyz {
      background-image: url(out.gif);
    }
    .menulist a#xyz:hover, .menulist a.highlighted#xyz, .menulist a:focus {
     background-image: url(over.gif);
    }
*/



/* All <ul> tags in the menu including the first level */
.menulist, .menulist ul {
 margin: 0;
 padding: 0;
 width: 7.0em;
 list-style: none;
}

/* Submenus (<ul> tags) are hidden and absolutely positioned across from their parent */
.menulist ul {
 visibility: hidden;
 position: absolute;
 top: 0px;
 font-size: 1.0em;
 left: 80px;
}

/*
 All menu items (<li> tags) are relatively positioned to correctly offset their submenus.
 They have borders that are slightly overlaid on one another to avoid doubling up.
*/
.menulist li {
 position: relative;
 border-bottom: 1px solid #555;
 border-right: 4px solid #555;
 left: 15px;
 top: 0px;
 background: #CCC;
 margin-bottom: 5px;
 
}
.menulist ul>li:last-child {
 margin-bottom: 1px;
}

/* Links inside the menu */
.menulist a {
 display: block;
 left: 24px;
 padding: 3px;
 border-bottom: 1px solid #555;
 color: #000;
 text-decoration: none;
}

/*
 Lit items: 'hover' is mouseover, 'highlighted' are parent items to visible menus.
*/
.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus {
 color: #FFF;
 font-size: 1.0em;
 background-color: #555;
}
.menulist a.highlighted {
 color: #FFF;
 background-color: #555;
}

/*
 If you want per-item background images in your menu items, here's how to do it.
 1) Assign a unique ID tag to each link in your menu, like so: <a id="xyz" href="#">
 2) Copy and paste these next lines for each link you want to have an image:
    .menulist a#xyz {
      background-image: url(out.gif);
    }
    .menulist a#xyz:hover, .menulist a.highlighted#xyz, .menulist a:focus {
     background-image: url(over.gif);
    }
*/


/* 'subind' submenu indicators, which are automatically prepended to 'A' tag contents. */
.menulist a .subind {
 float: right;
}

/* This semi-commented section exists to fix bugs in IE/Windows (the 'Holly Hack'). \*/
* html .menulist li {
 float: left;
 height: 1%;
}
* html .menulist a {
 height: 1%;
}
/* End Hack */

/* RULES FOR THE "MENUDIV" OBJECT */


/* An absolutely positioned and hidden DIV (treated as a layer in NS4). */
.menudiv {
 position: absolute;
 visibility: hidden;
 z-index: 1000;
 border: 2px outset #FFFFCC;
 /* Borders:     Top    Right  Bottom    Left   */
 border-color: #FFFFCC #666633 #666633 #FFFFCC;
 background-color: #CCCC99;
 /* layer-background-color is non-standard and NS4 only. */
 layer-background-color: #CCCC99;
 padding: 5px;
 font: 14px/22px Arial, Helvetica, sans-serif;
 /* Here's a cool effect, try uncommenting this, althought it's non-standard: */
 /* filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8 */
}

/* Formatting to apply to the elements inside the "menudiv" class elements. */
/* Of course, you can put whatever you want within the menu divs, these are just examples. */

.menudiv .header {
 width: 100%;
 font-weight: bold;
 text-align: center;
 border-bottom: 2px dashed #999966;
 margin-bottom: 5px;
}

.menudiv a {
 display: block;
 /* I've specified borders for each side individually so NS4 ignores this setting */
 border-top: 1px solid #CCCC99;
 border-right: 1px solid #CCCC99;
 border-bottom: 1px solid #CCCC99;
 border-left: 1px solid #CCCC99;
 color: #003333;
 text-indent: 5px;
 text-decoration: none;
}

/* I'm using :hover and :active pseudo-classes for link mouse effects. */
.menudiv a:hover {
 border: 1px solid #336699;
 border-color: #6699CC #003366 #003366 #6699CC;
 background-color: #336699;
 color: #FFFFFF;
}
.menudiv a:active {
 border: 1px solid #003366;
 border-color: #000000 #3366CC #3366CC #000000;
 background-color: #003366;
 color: #FFFFFF;
}

/*
The script will automatically assign a class of "highlighted" to elements that currently
have an active submenu, so here's a little CSS to format links within a .menudiv element.
*/
.menudiv .highlighted {
 background-color: #336699;
 border-color: #336699;
 color: #FFFFFF;
}

/* The links in the upper-left that pop out 'divMenu' menus. */
.trigger a {
 font: Bold 14px Arial, Helvetica, sans-serif;
 color: #003366;
 text-decoration: none;
}

/* Likewise, style active trigger links */
.trigger a.highlighted {
 color: #CC9966;
}