html, body {
    margin: 0;
    padding: 0;
}


#result {
    border: 1px solid gray;
    padding: 2px;
    width: 200px;
    height: 10px;
    
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 25px;
}

body {
    overflow-y: scroll;  /*  per tenere la barra di scorrimento fissa */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: black;
    background: url('../images/background_ccc.png') top left repeat-x;
    background-color: #cccccc;
}


p {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 10px;
    margin-left: 0;
}


a {
    text-decoration: none;
    color: #6669cc;
}

a:link {
    color: #000099;
}

a:visited {
    text-decoration: none;
    color: #000099;
}

a:hover {
    text-decoration: underline;
    color: #990000;
}


h1, h2, h3, h4, h5, h6 {
    color: #000000;
    line-height: 32px; 
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0px; /*5px*/
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 0px; /*5px*/  
}

h1 {
    font-size: 32px;
}

h2 {
    font-size: 22px; /*22px;*/
    padding-top: 5px;
}

h3 {
    font-size: 16px; 
}


textarea {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: black;
    border-color: black;
    border-width: 1px;
}

#page1 {
    margin-top: 15px;
    margin-right: auto;
    /* margin-bottom: 350px; */
    margin-left: auto;
    padding: 20px;
    width: 964px;
    background-color: white;
    text-align: left;
    box-shadow: 0 0 10px gray;	
}

#header1 {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 20px;
    margin-left: 0;
    padding: 0;
    clear: both; /* per gestire i div float */
}

#rivenditori {
    font-weight: 700;
    /*background: #cc3333 url(../images/32_users.png) 100% 0 no-repeat;*/
    background: #cc3333 url(../images/64_users.png) 100% 0 no-repeat;    
    padding: 10px 15px 10px;
    font-weight: 400;
    font-size: 19px;
    color:white;  
    text-align: center;
}

#loghi {
    text-align: center;
    /*background: #cc3333 url(../images/64_users.png) 100% 0 no-repeat;*/
    padding: 35px 10px 10px;
    /*color:white; */ 
}

#page {
    margin-top: 15px;
    margin-right: auto;
    margin-bottom: 15px;
    margin-left: auto;
    padding: 20px;
    width: 964px;
    background-color: white;
    text-align: left;
    box-shadow: 0 0 10px gray;	
}

#header {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 10px;
    margin-left: 0;
    padding: 0;
    clear: both; /* per gestire i div float */
}


/* above bar */ 
.above {
    padding-bottom: 30px;
}
   
.above p {
    margin-right: 20px;
    float: left;
}


p.logout {
    background: url('../images/16_exit.png') no-repeat left center;
}


p.logout a:link, p.logout a:visited {
    padding-left: 18px;
}
    

div#logo h1 {
    background-image: url('../images/logo_ca_73.png');
    background-repeat: no-repeat;
    background-position: center left;
    background-position: 3% 40%; 
    background-color: #cccccc;
    height: 96px;
    vertical-align: middle;
    /*padding-left: 256px;*/
    padding-left: 110px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 96px;
    font-size: 40px;
    font-style: italic;
    font-weight: bold;
    color: #444444;
    display: block;
}


div#logo span {
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: #444444;
} 


/* menu */
.menu {
    margin-top: 20px;
    margin-right: 0;
    margin-bottom: 10px;
    margin-left: 0;
    border-bottom: solid 1px #666666;
}

.menu ul {
    margin: 0;
    padding: 0;
    text-align: right;
}

.menu li {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 15px;
    margin-left: 2px;
    padding: 0;
    list-style: none;
    display: inline-block;
}

.menu a {
    padding: 8px 8px;
    text-decoration: none;
    color: #000000;
}
.menu a:hover {
    background: #999999;
    color: #ffffff;
    border-radius: 5px;
}
.menu .current_page_item a {
    background: #666666;
    color: #ffffff;
    border-radius: 5px;
}



/* stile per i messaggi di errore */

.error li {
    list-style: none;
}

.error {
    width: 80%;
    background-color: #eeeeee;
    border: 3px solid #cc3333;
    border-radius: 5px;
    margin: auto;
    padding: 10px;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 10px;
}

.error div {
    margin: 0px;
    background: url('../images/32_warning.png') no-repeat left top;
    min-height: 32px;
}

.error-riga {
    width: 80%;
    /*background-color: #eeeeee;*/
    /*border: 2px solid #cc3333;*/
    /*border-radius: 5px;*/
    /* margin: auto;*/
    /*padding: 2px;*/
    font-size: 18px;
    text-align: center;
    color: red;
    /*margin-top: 5px;*/
    /*margin-bottom: 5px;*/
}


/* stile per i messaggi di conferma */

.confirm {
    width: 80%;
    background-color: #eeeeee;
    border: 3px solid #33cc33;
    border-radius: 5px;
    margin: auto;
    padding: 10px;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 10px;
}

.confirm div {
    margin: 0px;
    background: url('../images/32_checkmark2.png') no-repeat left top;
    min-height: 32px;
}



/* Stili dei titoli dei content */

.icon-title {
    padding-left: 40px;
    background-repeat: no-repeat;
    background-position: left 5px;
}


.panel {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.panel li a:link{
    text-decoration: none;
}

.panel li {
    display: block;
    position: relative;
    width: 250px;
    height: 35px;
    margin-left: 5%;
    margin-top: 15px;
    border: 1px solid #666666;
    border-radius: 10px;
}

.panel-1 li {
    display: block;
    position: relative;
    width: 180px;
    height: 35px;
    /*margin-left: 5%;*/
    margin-top: 10px;
    border: 1px solid #666666;
    border-radius: 10px;
}

.panel a {
    display: block;
    position: absolute;
    /* per allineare il testo a meta' di un block il trucco e'
     usare una line-height della stessa altezza del blocco */
    line-height: 35px;
    vertical-align: middle;
    padding-left: 80px;
    font-size: 1.6em;
}

.panel-1 a {
    display: block;
    position: absolute;
    /* per allineare il testo a meta' di un block il trucco e'
     usare una line-height della stessa altezza del blocco */
    line-height: 30px;
    vertical-align: middle;
    padding-left: 80px;
    font-size: 1.6em;
}


#h-login {
    background-image: url('../images/32_enter.png');
}
    
#h-home {
    background-image: url('../images/32_home.png');
}

#h-anagrafica {
    background-image: url('../images/32_user.png');
}

#h-utenti {
    background-image: url('../images/32_users.png');
}


#p-cerca { 
    background-image: url('../images/32_search.png');
    background-repeat: no-repeat;  
    min-width: 32px;
    padding-top: 32px;
    margin-top: -10px;
    margin-bottom: 5px;
    margin-left: 5px;
    border: 0px solid #333333;
    background-color: #cccccc00;
}


#p-file_pdf { 
    background-image: url('../images/32-pdf-icona.png');
    background-repeat: no-repeat;  
    min-width: 32px;
    padding-top: 28px;
    margin-top: -10px;
    margin-bottom: 5px;
    margin-left: 5px;
    border: 0px solid #333333;
    background-color: #cccccc00;
}

#p-file_xls { 
    background-image: url('../images/32_excel.png');
    background-repeat: no-repeat;  
    min-width: 32px;
    padding-top: 28px;
    margin-top: -10px;
    margin-bottom: 5px;
    margin-left: 5px;
    border: 0px solid #333333;
    background-color: #cccccc00;
}


#h-dettaglio {
    background-image: url('../images/32_binoculars.png')
}

#h-help {
    background-image: url('../images/32_lifebuoy.png');
}


#pnl-cerca {
    background-image: url('../images/32_search.png');
    margin: 4px;
    background-repeat: no-repeat;   
}


#pnl-anagrafica {
    background-image: url('../images/32_user.png');
    margin: 4px;
    background-repeat: no-repeat;   
}

#pnl-utenti {
    background-image: url('../images/32_users.png');
    margin: 4px;
    background-repeat: no-repeat;   
}

#pnl-utenti1 {
    background-image: url('../images/32_users.png');
    /*background-image: url('../images/32_search.png');*/
    margin: 4px;
    background-repeat: no-repeat;   
}

#pnl-documenti {
    background-image: url('../images/32-documents-symbol.png');
    margin: 4px;
    background-repeat: no-repeat;   
}

#pnl-azienda {
    background-image: url('../images/32-factories.png');
    margin: 4px;
    background-repeat: no-repeat;   
}


#pnl-scarica-file {
    background-image: url('../images/32-scarica-file.png');
    margin: 4px;
    background-repeat: no-repeat;   
}

#pnl-file-tabella {
    background-image: url('../images/32-spreadsheet-chart.png');
    margin: 4px;
    background-repeat: no-repeat;   
}

#pnl-email {
    background-image: url('../images/32-email-envelope-outline.png');
    margin: 4px;
    background-repeat: no-repeat;   
}

#pnl-aggiorna-db {
    background-image: url('../images/32-data-management.png');
    margin: 4px;
    background-repeat: no-repeat;   
}

#pnl-dichiarazioni {
    background-image: url('../images/32-edit-document.png');
    margin: 4px;
    background-repeat: no-repeat;   
}

#pnl-ordine {
    background-image: url('../images/32-edit-document.png');
    margin: 4px;
    background-repeat: no-repeat;   
}

#pnl-statistiche {
    background-image: url('../images/32-stats-document.png');
    margin: 4px;
    background-repeat: no-repeat;   
}

#pnl-settings {
    background-image: url('../images/32-settings-symbol.png');
    margin: 4px;
    background-repeat: no-repeat;   
}

#pnl-tabella {
    background-image: url('../images/32-folder.png');
    margin: 4px;
    background-repeat: no-repeat;   
}

#pnl-articolo {
    background-image: url('../images/32-barcode.png');
    margin: 4px;
    background-repeat: no-repeat;   
}

#pnl-titolo {
    /*height:40px;*/
    /*min-width: 40px;*/
    padding: 7px 20px;
    width:40px;
    text-align: center;
    border-radius:5px;
    color: #fff;
    background: #de0221;
}


#pnl-login {
    background-image: url('../images/32_enter.png');
    margin: 4px;
    background-repeat: no-repeat;   
}

#pnl-login-1 {
    background-image: url('../images/32_enter.png');
    margin: 4px;
    background-repeat: no-repeat; 
    position: relative;
    padding-left: 50px;
    text-decoration: none;
    width: 160px;
}

#pnl-login-2 {
    background-image: url('../images/32_enter.png');
    margin: 4px;
    background-repeat: no-repeat; 
    position: relative;
    padding-left: 50px;
    text-decoration: none;
    width: 160px;
}

#pnl-logo3 {
    font-size: 30px;
}

#pnl-logo {
    width:90px;
    height:74px;
    min-width: 0px;
    padding-top: 3px;
    padding-left: 3px;
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 3px;
    /*border: 0px solid #333333;*/
    background-color: #cccccc00;
    vertical-align: middle;
}

#pnl-logo-1 {
    width:90px;
    height:74px;
    min-width: 0px;
    padding-top: 20px;
    /*padding-left: 3px;*/
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 3px;
    /*border: 0px solid #333333;*/
    /*background-color: #cccccc00;*/
    /*background-color: #eeeeee;*/
    vertical-align: middle;
   
}

#pnl-logo-2 {
    width:200px;
    height:72px;
    min-width: 0px;
    padding-top: 3px;
    padding-left: 3px;
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 10px;
    /*border: 0px solid #333333;*/
    background-color: #cccccc00;
    /*background-color: #eeeeee;*/
}

#pnl-logo-3 {
    width:auto;
    height:70px;
}


#pulsante-logo {
    width:auto;
    height:64px;
}

#pulsante-logo-1 {
    width:auto;
    height:50px;
}

#pulsante-1 {
    height:72px;
    /*padding: 30px 90px;*/
    /*border-radius:10px;*/
    /*width:96px;*/
}

#pulsante-2 {
    height:40px;
    min-width: 40px;
    /*padding: 10px 10px;*/
    /*padding-top: 20px;*/
    /*padding-bottom: 0px;*/
    width:40px;
    text-align: center;
    /*border-radius:10px;*/
    /*border: solid 1px #0076a3;*/
    /*color: #fff;*/
    /*background: #0095cd;*/
}

#pulsante-3 {
    height:40px;
    min-width: 40px;
    /*padding: 10px 10px;*/
    /*padding-top: 20px;*/
    /*padding-bottom: 0px;*/
    width:40px;
    text-align: center;
    /*border-radius:10px;*/
    /*border: solid 1px #0076a3;*/
    color: #fff;
    background: #666666;
}

#pulsante-4 {
    background-image: url('../images/16_shopping-cart-add-button.png');
    background-repeat: no-repeat;
    width:16px;
    height:16px;
    min-width: 0px;
    padding-top: 3px;
    padding-left: 3px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 5px;
    border: 0px solid #333333;
    background-color: #cccccc00;
    vertical-align: middle;
    /*color: #fff;*/
    /*background: #666666;*/
}


#pulsante-5 {
    background-image: url('../images/16-pdf-icona.png');
    background-repeat: no-repeat;
    width:16px;
    height:16px;
    min-width: 0px;
    padding-top: 3px;
    padding-left: 3px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 5px;
    border: 0px solid #333333;
    background-color: #cccccc00;
    vertical-align: middle;
    /*color: #fff;*/
    /*background: #666666;*/
}


#pulsante-6 {
    background-image: url('../images/16_binoculars.png');
    background-repeat: no-repeat;
    width:16px;
    height:16px;
    min-width: 0px;
    padding-top: 3px;
    padding-left: 3px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 5px;
    border: 0px solid #333333;
    background-color: #cccccc00;
    vertical-align: middle;
}

#bt-n {
    height:40px;
    min-width: 40px; 
    width:40px;
    text-align: center;
    /*border-radius:20px;*/
    border: solid 2px #fff;
}

#bt-e {
    height:40px;
    min-width: 40px;
    width:40px;
    text-align: center;
    /*border-radius:20px;*/
    border: solid 0px #fff;
    /*border: solid 1px #0076a3;*/
    /*border: 1px solid #333333;*/
    color: #fff;
    background: #666666;
}


/* Stili degli input e output e form */

.none {
    list-style: none;
}

.output-form {
    line-height: 1.4em;
}

.output-form li {
    padding-bottom: 8px;
}

.input-form {
    line-height: 2.2em;
}

#login {
    line-height: 2.8em;
}

.input-form h3, .output-form h3 {
    border-top: solid 1px #666666;
}

label.full {
    display: inline-block;
    width: 75%;
}

label {
    display: inline-block;
    width: 25%;
}


.input-form input[type=text], 
.input-form input[type=password]
{
    display: inline-block;
    width: 50%; /* 50% */
    border: 1px solid #333333;
    font-size: 14px;
    padding: 3px;
}


.input-form input[type=submit], 
.input-form button,
.output-form input[type=submit],
.output-form button
{
    min-width: 100px;
    margin-top: 5px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #333333;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    background-color: #cccccc;
}


.input-form input[type=submit]:hover, 
.input-form input[type=submit]:active,
.input-form button:hover,
.input-form button:active,
.output-form input[type=submit]:hover, 
.output-form input[type=submit]:active,
.output-form button:hover,
.output-form button:active
{
    background: #666666;
    color: #ffffff;
    border-radius: 5px;
    cursor: pointer;
}


.btn-group input[type=submit], .btn-group button {
    display: inline-block;
}

.btn-group {
    text-align: center;
}

.btn-group-r input[type=submit], .btn-group-r button {
    display: inline-block;
    /*min-width: 40px;*/
}

.btn-group-r {
    text-align: right;
}

.btn-group-l input[type=submit], .btn-group-l button {
    display: inline-block;
    /*min-width: 40px;*/
}

.btn-group-l {
    text-align: left;
}


.input-form select {
    display: inline-block;
    width: 51%;
    border: 1px solid #333333;
    background-color: #ffffff;
    font-size: 14px;
    padding: 3px;
}


/* Larghezza campi input */

/*
#login {
    width: 100%;
}
*/

#user {
    width: 50%;
}

#password {
    width: 50%;
}    

#label_r-5 {
    width: 5%;
    text-align: right;
}    

#label_r-7 {
    width: 5%;
    text-align: right;
}  

#label_r-10 {
    width: 10%;
    text-align: right;
}    

#label_r-15 {
    width: 15%;
    text-align: right;
}

#label_r-20 {
    width: 20%;
    text-align: right;
}

#label_r-30 {
    width: 30%;
    text-align: right;
}

#attivo {
    width: 10%;
}

#stato {
    width: 15%;
}

#tipo_agente {
    width: 22%;
}

#codice_agente {
    width: 10%;
}

#campo_1 {
    width: 1%;
}

#campo_2 {
    width: 2%;
}

#campo_3 {
    width: 3%;
}

#campo_5 {
    width: 5%;
}

#campo_10 {
    width: 10%;
}

#campo_15 {
    width: 15%;
}

#campo_20 {
    width: 20%;
}

#campo_25 {
    width: 25%;
}

#campo_30 {
    width: 30%;
}

#campo_40 {
    width: 40%;
}

#campo_45 {
    width: 45%;
}

#campo_50 {
    width: 50%;
}


/* Colore campo */

.giallo { 
    background:#FFFF00; 
}

/* stile delle tabelle */

table {
    border: 1px solid #000000;
    border-collapse: collapse;
    margin-top: 5px;
    line-height: 1.2em;
    width: 100%;
    margin-bottom: 20px;
}


th, td {
    border: 1px solid #333333;
    border-collapse: collapse;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 2px;
    padding-right: 2px;
}

th {
    background-color: #666666;
    line-height: 1.8em;
    color: white;
    font-weight: bold;
}


.input-form td input[type=text],
.input-form td input[type=number]
{
    display: inline-block;
    width: 85%;
    border: 1px solid #333333;
    font-size: 14px;
    padding: 3px;
} 

.segnalazione_col-small{
    width: 10%;
}

.segnalazione_col-large{
    width: 30%;
}

.col-piccola{
    width: 10%;
}

.col-media{
    width: 20%;
}

.col-larga{
    width: 40%;
}

.testo-rosso {
    color: #FF0000;
}

.testo-giallo{ 
    /*background:#FFFF00;*/ 
    background-color:#FFFF00;
}

tr, td, tr.odd, tr.odd td {
    background-color: #eeeeee;
}

tr.alt-row, tr.alt-row td, tr.even, tr.even td {
    background-color: #cccccc;
}


#content {
    float: left;
    width: 80%;
    margin-bottom: 10px;
}

#content-l {
    float: left;
    width: 50%;
    margin-bottom: 10px;
}

#content-r {
    float: right;
    width: calc(50% - 30px);
    width: 50%; 
    margin-bottom: 10px;
}


#sidebar {
    /* background-color: #eeeeee; */
    float: right;
    width: calc(20% - 30px);
    /* width: 25%; */
    margin-bottom: 20px;
}



/* stile delle tabelle con scorrimento laterale */

.table-ext {width:100%;}

.table-ext thead th {
/*height:20px;*/
/*line-height:20px;*/
/*border-bottom:1px solid #ddd;*/
/*text-align: left;*/
border:0px solid #ddd;  /*abilitato*/
/*padding: 0 0 0 5px;*/
/*background: #f04;*/
color:#fff;
}

.table-ext tbody td {
border-bottom:1px solid #ddd;
}

.divinterno{
height:270px; 
overflow:auto;
width:100%;
}

.table-int {
width:100%; 
}

.table-int td {    
height:15px;
line-height:15px;
}

/* fine codice tabella */


.clear{
    clear: both; 
    width: 0px; 
    height: 0px;
}

#footer {
    clear: both;
    display: block;
    line-height: 20px;
    margin-top: 5px;
    padding-top: 4px;
    text-align: center;
    border-top: solid 1px #666666;
}

#footer p{
    margin-top: 2px;
    margin-bottom: 2px;   
}

.validator{
    text-align: center;
}

.validator p{
    margin-bottom: 0; 
}


/* decorazioni degli elementi */

.xhtml {
    padding-left: 20px;
    margin-left: 5px;
    background: url('../images/16_html5.png') no-repeat left center;
}

.css {
    padding-left: 20px;
    margin-left: 15px;
    background: url('../images/16_css3.png') no-repeat left center;
}





/*============================*
    Inizio parte responsive
 *============================*/

/* --> è la larghezza dei notebook */
@media screen and (max-width: 1023px) {
	
    #page {
        margin: 0;
        width: calc(100% - 40px);
        /* width: 100%; */
    }
      
}



/* --> è la larghezza dei tablet */
@media screen and (max-width: 768px) {
	
    #content {
	float: none;
	clear: both;
	width: 100%;
    }
	
    #sidebar {
	float: none;
	clear: both;
	width: 100%;
        padding-top: 15px;
        border-top: solid 1px #666666;
    }
	
}




/* --> è solo per la larghezza del menu 
	CAMBIA MENU
 */
@media screen and (max-width: 690px) {
    .menu {
	position: relative;
	min-height: 32px; 
    }	

    .menu ul {
	width: 200px;
	padding: 5px 0;
	position: absolute;
	top: -12px;
	left: 0;
	border: solid 1px #aaa;
	background: #fff url(../images/16_menu.png) no-repeat 10px 10px;
	border-radius: 5px;
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
    }
    
    .menu li {
	display: none; /* nasconde tutte le voci del menu <li> */
	margin: 0;
    }

    .menu .current_page_item {
	display: block; /* mostra solo la voce del menu <li> corrente */
    }
    
    .menu a {
	display: block;
	padding: 5px 5px 5px 32px;
	text-align: left;
    }

    .menu .current_page_item a {
	background: none;
	color: #000000;
    }

    /* on menu hover */
    .menu ul:hover {
	background-image: none;
    }

    .menu ul:hover li {
    	display: block;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 5px;
	margin-left: 0px;
    }
    
    .menu ul:hover .current_page_item {
	background: url(../images/16_checkmark.png) no-repeat 10px 5px;
    }
	
}




/* --> è solo per cambiare 
 * INTESTAZIONE
 */
@media screen and (max-width: 580px) {
    
    div#logo h1 {
        background-position: top center;
        background-position-y: 10px;
        /* background-color: #cccccc; */
        height: 48px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 100px;
        line-height: 42px;
	font-size: 33px;
	text-align: center;
    }
	
}