/* LAYOUT
----------------------------------------------------------*/
#headerpagina, #corpopagina, #footerpagina {width: 750px; clear: both; font-family: Verdana, Arial, Helvetica, sans-serif}

#container {background: #FFF; width: 750px; text-align: left}
#centerCol {width: 340px; display: inline; float: left; margin-left: 245px; color: #696969}
#centerColWide {width: 585px; display: inline; float: left; margin-left: 0px; color: #696969}
#centerColWide p {font-size: 10px; margin: 5px 0}
#rightCol {width: 165px; float: left; margin: 0}
#leftCol {width: 245px; float: left; margin-left: -585px}

#centerCol p {width: 300px; font-size: 11px}
#titoloCSR, #headerCSR {margin-top: 13px}

#counterCSR {margin: 9px 0 11px 0; font-size: 10px}
#counterCSR em {color: #F60; font-style: normal}

#userId, #userOrientation, #permalink {color: #696969; font-size: 11px; width: 541px; line-height: 20px}
#userId {background-color: #FAF9EE; margin-top: 25px; position: relative}
#userId em {color: #F00; font-style: normal; padding: 0; position: absolute; left: 48%; top: 0}
#userOrientation {background-color: #F6F3E1; margin-top: 1px; position: relative}
#userOrientation em {color: #74B774; font-style: normal; padding: 0; position: absolute; left: 48%; top: 0}

#permalink {margin-top: 60px}
#permalink input {width: 100%}
#permalink input:focus {background-color: transparent}

#pageServ {clear: both; padding-top: 100px}

.beginTest {text-align: center; margin: 50px 0}
.beginTest a {position: relative; left: -10px}

div.warning, div.feedback {font-size: 11px; margin-top: 25px}
div.warning ul {color: #F60; margin-top: 1em; line-height: 13px}


/* PROFILE + FORMS
----------------------------------------------------------*/
#sendResult h3 {width: 11em; background: url(imgs/ico_mail.png) no-repeat right center}
#sendResult fieldset {margin: 12px 0; padding: 0; border: none; border-top: 1px dotted #C0B74A}

#profile {margin: 10px 0}
#profile a {color: #696969}
#profile h3 {border-bottom: 1px solid #F60; padding: 3px 0; font-weight: normal}
#profile h3 a {color: #F60}
#profile fieldset.required {width: 400px; border: 0; padding: 0; margin: 0 0 0 70px}
#profile fieldset.optional {width: 490px; border: 0; padding: 0; margin: 10px 0 0 25px}
#profile .legend {float: right; background-color: #F7F6E3; font-size: 9px; line-height: 9px; padding: 3px; margin: 0; list-style-type: none}
#profile li {display: inline; background-position: center left; padding: 0 12px}
#profile li.society {background: url(imgs/legend_society.png) no-repeat}
#profile li.economy {background: url(imgs/legend_economy.png) no-repeat}
#profile li.environment {background: url(imgs/legend_environment.png) no-repeat; padding-right: 3px}

#profile table {clear: both; margin-top: 6px}
#profile td {border-bottom: 2px solid #FFF}

#profile table .check {width: 27px; text-align: center}
#profile table .check input {border: none}
#profile table .label {padding: 6px}

#profile table .society .check {background-color: #FDF5EC}
#profile table .society .label {background-color: #FFEBD6}

#profile table .economy .check {background-color: #F0F5F9}
#profile table .economy .label {background-color: #E0EBF5}

#profile table .environment .check {background-color: #F0F9F0}
#profile table .environment .label {background-color: #E0F5E0}

#profile #submit {text-align: center; margin: 30px auto}
#profile #submit input {border: 0}

label {font-size: 11px; color: #666}

img {border: 0}

h3 {color: #F60; font-size: 11px; font-weight: bold; margin: 11px 0 7px 0}

input, textarea, select {border: 1px solid #C3C3C3; border-top-color: #7C7C7C; border-bottom-color: #DDD; font-size: 12px; line-height: 13px; margin: 3px 0; font-family: "Courier New", Courier, monospace; color: #333}

input:focus, textarea:focus, select:focus {background-color: #FFFF99}

input.submit {border: none; background-color: #F60; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #FFF; padding: 0 18px}

form div {margin-bottom: 20px}
#profile div.l {width: 175px; float: left}
#profile div.r {width: 175px; float: right}

#profile fieldset.required input, #profile fieldset.required select {width: 100%}


/* HGRAPH
----------------------------------------------------------*/
#Hgraph {font-size: 10px; color: #666; margin: 0; padding: 0; width: 165px; height: auto; position: relative}

#Hgraph h3 {font-size: 10px; font-weight: bold; color: #A79F40; margin: 15px 0 0 0}
#Hgraph em {color: #333; font-style: normal; font-weight: bold; font-size: 11px}
#Hgraph dl {width: 165px; border-top: 1px solid #E0E0DF; margin: 10px 0 15px 0}
#Hgraph dd {display: block; width: 100%; height: 7px; margin: 0; padding: 2px 0 1px 0; border-bottom: 1px solid #E0E0DF; color: #333}
#Hgraph dd div.value {float: right; position: relative; z-index: 2; height: 8px; width: 25px; margin: 0; padding: 0; text-align: right; font-size: 8px; line-height: 8px}
#Hgraph dd div {float: left; position: absolute; z-index: 1; height: 6px; line-height: 6px; text-indent: -9999px; font-size: 6px}

#Hgraph .society_1 {background-color: #FEBE80}
#Hgraph .society_2 {background-color: #FECFA1}
#Hgraph .society_3 {background-color: #FED7AE}
#Hgraph .society_4 {background-color: #FEDFC0}
#Hgraph .society_5 {background-color: #FFEBD6}
#Hgraph .economy_1 {background-color: #A0BEE2}
#Hgraph .economy_2 {background-color: #B9CFE7}
#Hgraph .economy_3 {background-color: #C5D7EB}
#Hgraph .economy_4 {background-color: #CFE1EF}
#Hgraph .economy_5 {background-color: #DFECF5}
#Hgraph .environment_1 {background-color: #A1DFA0}
#Hgraph .environment_2 {background-color: #B8E8B8}
#Hgraph .environment_3 {background-color: #C5EBC4}
#Hgraph .environment_4 {background-color: #D0EFCF}
#Hgraph .environment_5 {background-color: #DFF5E0}


/* MOREINFO
----------------------------------------------------------*/
#moreInfo {background: url(imgs/diagLine.png); border: 1px solid #FCBF91; width: 170px; margin: 0 auto}
#moreInfo div.button {background: url(imgs/arrow.png) no-repeat right center}
#moreInfo p {background: url(imgs/arrow.png) no-repeat left center; margin: 2px 0; padding: 2px 0 2px 18px; font-size: 12px}
#moreInfo em {color: #F60; font-style: normal; font-weight: bold; font-size: 11px}
#moreInfo a {text-decoration: none; color: #696969}


/* FAQ
----------------------------------------------------------*/
#faq {width: 541px}
#faq ul {list-style-type: none; color: #F60; margin: 30px 0 40px 90px; padding: 0}
#faq li {border-bottom: 1px dotted #C0B74A; padding-bottom: 12px}
#faq li:hover {list-style-type: square}
#faq li a {color: #F60; text-decoration: none; font-size: 10px}
#faq li a:hover {font-weight: bold}
#faq h3 {clear: right; color: #696969; padding-left: 14px; background: url(imgs/bullet_grey.png) no-repeat left center}
#faq p {clear: right}
#faq p a {color: #696969}
#faq .goTop {float: right}
#faq .goTop a {color: #666; text-decoration: none}
#faq .goTop a:hover {text-decoration: underline}


/* CREDITS
----------------------------------------------------------*/
#credits {width: 541px}
#credits table {margin-top: 27px; border: none; border-collapse: collapse}
#credits tr.special {background-color: #FAF9EE}
#credits a {color: #F60}
#credits p {margin-bottom: 15px}
#credits td {border-top: 1px dotted #999; border-bottom: 1px dotted #999; border-collapse: collapse; padding: 45px 0}
#credits td.organization {width: 224px; text-align: center; font-size: 10px; font-weight: bold; color: #696969}
#credits td.info {padding-right: 10px}


/* LEGAL
----------------------------------------------------------*/
#legal {width: 541px}
#legal h3 {background-color: #FAF9EE; color: #666; font-weight: bold; padding: 7px 0}


/* NAVPANEL
----------------------------------------------------------*/
#navPanel {background-color: #F7F5D7; border-top: 3px solid #C0B74A; margin-top: 12px}
#navPanel ul {list-style-type: none; margin: 0; padding-left: 9px; text-indent: 9px}
#navPanel li {font-size: 11px; background: url(imgs/bullet.png) no-repeat center left; line-height: 26px; color: #696969; font-weight: bold}
#navPanel li a {text-decoration: none; color: #696969; font-weight: normal}
#navPanel li a:hover {text-decoration: underline}
#navPanel em {color: #F60; font-style: normal}


/* PRINT GO-TOP
----------------------------------------------------------*/
.goTop {background: transparent url(imgs/ico_top.gif) no-repeat scroll left bottom; color: #666666; float: left; font-size: 0.65em; font-weight: bold; height: 14px; margin-bottom: 2.2em; margin-left: 0px; margin-top: 1.8em; padding-top: 0.2em; text-align: left}
.goTop a {color: #666666; padding-left: 20px; text-decoration: none}
.goTop a:hover {text-decoration: underline}

.printPage {background: transparent url(imgs/ico_stampa.gif) no-repeat scroll left bottom; color: #666666; float: right; font-size: 0.65em; font-weight: bold; height: 14px; margin-bottom: 2.2em; margin-left: 0px; margin-right: 14px; margin-top: 1.8em; padding-top: 0.2em; text-align: left}
.printPage a {color: #666666; padding-left: 20px; text-decoration: none}
.printPage a:hover {text-decoration: underline}


/* PATHNAVIGAZIONE
----------------------------------------------------------*/
#pathNavigazione {background: transparent url(/css/img/puntini_hor_azzurri.gif) repeat-x scroll left bottom; color: #333333; font-size: 0.55em; font-weight: normal; height: 15px; margin-left: 5px; margin-top: 5px; padding-bottom: 4px}
#pathNavigazione a {color: #333333; font-weight: normal; text-decoration: none}
#pathNavigazione a:hover {color: #333333; font-weight: normal; text-decoration: underline}


/* QUESTIONS
----------------------------------------------------------*/
#questNav {width: 541px; height: 22px; background-color: #FAF9EE; margin: 24px 0 27px 0; font-family: Arial, Helvetica, sans-serif}
#questNav .legend {float: right; background-color: #E6E4C6; font-size: 9px; line-height: 10px; height: 13px; padding: 0px; margin: 5px 0 0 0; list-style-type: none}

#questNav li {display: inline; background-position: bottom left; padding: 0 3px 0 9px; margin-left: 3px}
#questNav li.done {background: url(imgs/legend_done.png) no-repeat}
#questNav li.current {background: url(imgs/legend_current.png) no-repeat}
#questNav li.to_do {background: url(imgs/legend_to_do.png) no-repeat; padding-right: 3px}
#questNav .highlight {font-weight: bold; color: #F60}
#questNav .contatore {margin: 6px 0 0 4px; float: left; font-size: 11px; font-weight: bold; width: 145px}

#questNav .stepper {float: left; height: 13px; padding: 0px; margin: 5px 0 0 0; list-style-type: none}
#questNav .stepper li {display: block; float: left; width: 7px; padding: 0; margin: 0}

#domanda {width: 541px; border-top: 1px solid #C1BE97; border-bottom: 1px solid #C1BE97; clear: both}
#questione {font-size: 13px; font-style: italic; font-weight: bold; padding: 24px 20px 0 20px}

#domanda .accompagno {margin-top: 10px; float: left; font-size: 17px; color: #8C9956; width: 450px}
#domanda .testo {clear: both; font-size: 16px; font-style: italic; padding-right: 60px}
#domanda .approfondisci {font-size: 10px; margin-top: 15px; margin-bottom: 7px; background: url(imgs/ico_approfondisci.png) no-repeat left center; padding-left: 16px; float: right}
#domanda .approfondisci a {color: #676C74; text-decoration: none}
#domanda .approfondisci a:hover {text-decoration: underline}

#posizioni {clear: both; text-align: center; padding-left: 10px}
#posizioni div {float: left; margin-left: 7px; margin-top: 28px}

#prevnext {clear: both; width: 541px; margin-top: 50px}
#tema_precedente {float: left}
#tema_successivo {float: right}
#tema_precedente a, #tema_successivo a {color: #454F2A; font-size: 10px; text-decoration: none}
#tema_precedente a:hover, #tema_successivo a:hover {text-decoration: underline}


/* MOREINFO
----------------------------------------------------------*/
#whatEnelDoes {width: 541px}
#whatEnelDoes h3 {font-size: 12px; font-weight: bold; color: #696969; margin: 30px 0 7px 0}
#whatEnelDoes #actions {border-top: 1px solid #C0B74A; margin-top: 18px; padding-top: 35px}
#whatEnelDoes .action {width: 195px}
#whatEnelDoes .action h3 {color: #F60}
#whatEnelDoes .l {float: left; margin-left: 35px; clear: left}
#whatEnelDoes .r {float: right; margin-right: 35px; clear: right}

#whatEnelDoes .forYou {background-color: #F3EFBE; padding: 6px 9px; margin-top: 14px}
#whatEnelDoes .forYou img {display: block}
#whatEnelDoes .forYou input {float: right; margin: 0; padding: 0}
#whatEnelDoes .forYou label {float: left; font-size: 10px}
#whatEnelDoes #submit {text-align: center; clear: both}

#whatEnelDoes input {background-color: trasparent; border: 0; padding: 0}


/* CLEARFIX
----------------------------------------------------------*/
/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after
{
content: "."; /* the period is placed on the page as the last thing before the div closes */
display: block; /* inline elements don't respond to the clear property */
height: 0; /* ensure the period is not visible */
clear: both; /* make the container clear the period */
visibility: hidden; /* further ensures the period is not visible */
}

.clearfix {display: inline-block}   /* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%}
.clearfix {display: block}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */