@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,800,700italic,800italic);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic);

* {
    box-sizing: border-box;
}

HTML {
    font-size:16px;
}

BODY {
    font-size:16px;
    line-height:20px;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    color:#000; 
    background-color:#fff;
    background-image:url(/images/background.jpg);
}

a {color:#ac120d; text-decoration:none}
a:hover {color:#da4fa3; text-decoration:none}

@media only screen and (max-width: 420px) {
    /* For tablets: */
    BODY {
        font-size:16px;
    }
}

.inner 
{
    width:100%;
    margin:0 auto;
}

@media only screen and (min-width: 1024px) {
    /* For tablets: */
    .inner 
    {
        width:1024px;
    }
}

@media only screen and (min-width: 1240px) {
    /* For tablets: */
    .inner 
    {
        width:1240px;
    }
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
    padding: 1% 3%;
}

FORM [class*="col-"] {
    float: left;
    padding: 0.5% 1%;
}

FORM 
{
    font-size:0.9em
}

FORM INPUT[type=text]
{
    border:1px solid #aaaaaa;
    color:#000;
    font-size:1em;
    width:100%;
    font-family:'Open Sans', sans-serif;
    padding:3px;
    -moz-border-radius: 3px;
    border-radius: 3px;  
    background-color:#efefef  ;
    height:26px;          
}

FORM INPUT[type=file]
{
    border:1px solid #aaaaaa;
    color:#000;
    font-size:1em;
    width:100%;
    font-family:'Open Sans', sans-serif;
    padding:3px;
    -moz-border-radius: 3px;
    border-radius: 3px;  
    background-color:#efefef  ;
    height:26px;          
}


FORM INPUT[type="text"]:disabled {
    background: #fcf4f4;
}

FORM TEXTAREA
{
    border:1px solid #aaaaaa;
    color:#000;
    font-size:1em;
    width:100%;
    font-family:'Open Sans', sans-serif;
    padding:3px;
    -moz-border-radius: 3px;
    border-radius: 3px;  
    background-color:#efefef  ;
       
}

FORM INPUT[type=password]
{
    border:1px solid #aaaaaa;
    color:#000;
    font-size:1em;
    width:100%;
    font-family:'Open Sans', sans-serif;
    padding:3px;
    -moz-border-radius: 3px;
    border-radius: 3px;  
    background-color:#efefef            
}

FORM INPUT[type=submit]
{
    border:1px solid #ac120d;
    color:#ac120d;
    font-size:1em;
    font-family:'Open Sans', sans-serif;
    padding:3px  20px;
    -moz-border-radius: 3px;
    border-radius: 3px;  
    background-color:#fcf4f4;
    text-transform:uppercase;
    cursor:pointer           
}

FORM INPUT[type=button]
{
    border:1px solid #ac120d;
    color:#ac120d;
    font-size:1em;
    font-family:'Open Sans', sans-serif;
    padding:3px  20px;
    -moz-border-radius: 3px;
    border-radius: 3px;  
    background-color:#fcf4f4;
    text-transform:uppercase;
    cursor:pointer           
}

.cella-r {text-align:right}
.cella-c {text-align:center}
.cella-i {text-align:right; padding-top:4px !important;}
.cella-b {font-weight:bold}
.cella-nodata { font-style:italic; font-size:0.8em;}

@media only screen and (max-width: 420px) 
{
    .cella-i {text-align:left; padding-top:14px !important;}
}


@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
        padding: 0.2% 3%;
    }
}

.row::after {
    content: "";
    clear: both;
    display: block;
}

header .logo 
{
    text-align:center;
}

@media only screen and (max-width: 420px) {
    /* For tablets: */
    header .logo IMG
    {
        width:70%
    }     
}

header ul {list-style:none; float:right}
header li {padding:3px; }
header li a {padding-left:25px; font-size:0.95em; background-position:left center; background-repeat:no-repeat; background-size:auto 100%; font-weight:bold;}
header li.home a {background-image:url(/images/home.png)}
header li.anagrafiche a {background-image:url(/images/persone.png)}
header li.eventi a {background-image:url(/images/eventi.png)}
header li.documenti a {background-image:url(/images/documenti.png)}
header li.esporta a {background-image:url(/images/esporta.png)}
header li.ricevuta a {background-image:url(/images/ico_ricevuta.png)}
header li.mailbox a {background-image:url(/images/mailbox.png)}
header li.visite a {background-image:url(/images/visite.png)}
header li.logout a {background-image:url(/images/logout.png)}

header h2 {text-align:right; font-family:'Droid Serif'; font-size:2em; margin:25px 0; color:#333; font-variant:small-caps;}

@media only screen and (min-width: 1024px) {
    /* For tablets: */
    header h2 {font-size:2em; margin:25px 0px;}
}

@media only screen and (max-width: 768px) {
    /* For tablets: */
    header h2 {margin:15px 0px;}
}

@media only screen and (max-width: 420px) {
    /* For tablets: */
    header h2 {text-align:left; font-size:1.4em;}
}


@media only screen and (max-width: 768px) {
    /* For tablets: */
    header li {padding:3px; float:left; margin-right:35px;}
    header li:last-child {margin-right:0;}
}

@media only screen and (max-width: 420px) {
    /* For tablets: */
    header li {margin-right:8px;}
    header li a {padding-left:16px; font-size:0.6em;}
}

footer h2 {
    font-size:1.5rem; font-family:'Droid Serif'; font-weight:300
}

footer .credits {
    font-size:0.85em; line-height:1.4em
}

@media only screen and (min-width: 1024px) {
    /* For tablets: */
    footer h2 {
        font-size:2rem;
    }
    
    footer .credits {
        font-size:0.9em; line-height:1.4em
    }    
}

@media only screen and (max-width: 600px) {
    /* For tablets: */
    footer h2 {
        font-size:1.1rem;
    }
    
    footer .credits {
        font-size:0.80em; line-height:1.4em
    }    
}

@media only screen and (max-width: 420px) {
    /* For tablets: */
    footer h2 {
        font-size:0.9rem;
    }
    
    footer .credits {
        font-size:0.7em; line-height:1.4em
    }    
}

#errore { display: none; }

#inline1
{
     overflow:auto; background-color:#eedde7; text-align:center; vertical-align:middle; color:#000;
}

#inline1 td 
{
    height:100px;
    text-align:center;
    font-size:0.85em;
    vertical-align:middle;
    line-height:1.4em;
    padding:0 10%;
    color:#000;
    font-family:'Open Sans', sans-serif;
} 

#elenco_doc ul {list-style:none;}
#elenco_doc li {padding:3px; float:left; margin-right:35px; margin-bottom:35px}
#elenco_doc li a {padding:5px 0px 5px 35px; font-size:1em; background-position:left center; background-repeat:no-repeat; background-size:auto 100%; font-variant:small-caps; font-weight:bold; }

@media only screen and (max-width: 768px) {
    /* For tablets: */
    #elenco_doc li {margin-right:2px;}
    #elenco_doc li a {padding:0px 0px 0px 20px; font-size:0.75em; font-variant:small-caps; font-weight:bold; }
}

#tabella_anagrafica {font-size:0.8em; display:table; border-collapse:collapse; line-height:1.2em; width:100%; table-layout: fixed;}
                        #tabella_anagrafica .riga {display:table-row; background-color:#fff; cursor:pointer; width:100%;}
                        
                        #tabella_anagrafica [class*="cella-"] {
                            display:table-cell;
                            padding:5px;
                            border:1px solid #ac120d;
                            vertical-align:middle
                        }          
                        
                        #tabella_anagrafica .riga:nth-child(odd) { 
                            background-color: #fcf4f4; 
                        }   
                        
                        #tabella_anagrafica .riga:hover {background-color:#f4f4f4}
                        
                         #tabella_anagrafica .intesta 
                         {
                             font-weight:bold;
                             color:#ac120d;
                             text-transform:uppercase;
                             line-height:2em;
                             }           
                        
                        #tabella_anagrafica .cella-nome {width: 30%;}
                        #tabella_anagrafica .cella-tel {width: 12%; text-align:center}
                        #tabella_anagrafica .cella-note {width: 18%; text-align:center}
                        #tabella_anagrafica .cella-email {width: 24%; white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}
                        #tabella_anagrafica .cella-tipo {width: 8%; text-align:center}
                        #tabella_anagrafica .cella-importo {width: 15%; text-align:right}
                        #tabella_anagrafica .cella-tipo SPAN {display:none; color:#ac120d}
                        
                    @media only screen and (max-width: 768px) {
                        /* For mobile phones: */
                        
                        #tabella_anagrafica {display:block; font-size:0.7em;}
                        #tabella_anagrafica .riga {display:block; border-top:1px solid #ac120d; padding:3px 3px 8px 3px;  }
                        #tabella_anagrafica .riga:last-child {border-bottom:1px solid #ac120d;}
                        #tabella_anagrafica .intesta {display:none}
                        
                        #tabella_anagrafica [class*="cella-"] 
                        {
                           padding:1px 0px;
                            width: 100%;
                            display:block;
                            border:none;
                        }
                        
                        #tabella_anagrafica .cella-tipo {text-align:right; text-transform:uppercase}
                        #tabella_anagrafica .cella-tipo IMG {display:none}
                        #tabella_anagrafica .cella-tipo SPAN {display:block;}
                        #tabella_anagrafica .cella-nome .nome {font-weight:bold;}
                        #tabella_anagrafica .cella-email {text-align:left}
                        #tabella_anagrafica .cella-email .email:before {content:'E-Mail: '}
                        #tabella_anagrafica .cella-email .tel:before {content:'Tel: '}
                    }      
                    
                                .paginatore {font-size:0.9em;}
            
             @media only screen and (max-width: 768px) {
                /* For mobile phones: */
                .paginatore {font-size:0.7em;}
            }           
            
            .pagina {padding:0px 2px 0px 0px; cursor:pointer; color:#ac120d}
            .paginasel {padding:0px 2px 0px 0px; font-weight:bolder}
            
            .pagina2 {padding:0px 2px 0px 0px; cursor:pointer; color:#ac120d}
         
            
            .btn {
                display: inline-block;
                font-size:1em;
                margin-bottom: 0;
                font-weight: normal;
                text-align: center;
                vertical-align: middle;
                touch-action: manipulation;
                cursor: pointer;
                background-image: none;
                border:1px solid #ac120d;
                white-space: nowrap;
                padding: 2px 6px 3px 6px;
                line-height: 1.42857143;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                 -moz-border-radius: 3px;
                border-radius: 3px;  
                background-color:#fcf4f4;   
            }
            
            .btn:hover  
            {
                    color:#000;
                    background-color:#efefef  ;
                    border-color:#aaaaaa
            }         

                .titolo 
                {
                    font-size:1.6em; font-weight:bold; text-transform:uppercase; color:#ac120d; padding:25px 0px 10px 0px;
                    }
                    
                    .dsc_relazione {color:#ac120d; font-variant:small-caps; font-size:1.5em; font-weight:bold;}
                    .link_relazione a {font-size:0.8em; font-style:italic}
                    
.dati {font-size:1em}                    
@media only screen and (max-width: 768px) {
    /* For tablets: */
    .dati {font-size:0.9em}
    
    .titolo  {
        font-size:1.2em; 
        }    
    .dsc_relazione {font-size:1em;}
    .link_relazione a {font-size:0.8em;}
    
}      

            #elenco_chk UL {list-style:none;}
            #elenco_chk LI {float:left; width:33%}         
            
                        #Elenco_Cartelle  {margin-top:25px;}
            #Elenco_Cartelle UL {list-style:none}
            #Elenco_Cartelle LI {float:left; width:25%; margin-bottom:5px; height:45px;}
            #Elenco_Cartelle LI a {font-family:'Open Sans'; color:#000; text-decoration:none; padding-left:50px; background-repeat:no-repeat; background-position:top left; min-height:45px; display:block; padding-top:7px; line-height:18px; }
            #Elenco_Cartelle LI a.Tipo1 {background-image:url('/images/folder1.png'); }
            #Elenco_Cartelle LI a.Tipo2 {background-image:url('/images/folder2.png'); }
            #Elenco_Cartelle LI a.Tipo3 {background-image:url('/images/folder3.png'); }
            #Elenco_Cartelle LI a.Tipo4 {background-image:url('/images/folder4.png'); }
            #Elenco_Cartelle LI a.Tipo5 {background-image:url('/images/folder5.png'); }
            #Elenco_Cartelle LI a:hover {text-decoration:underline}   
            
            #Elenco_File  {margin-top:45px;}
            #Elenco_File UL {list-style:none}
            #Elenco_File LI {float:left; width:50%; margin-bottom:5px; height:55px;}
            #Elenco_File LI > a {font-family:'Open Sans';  padding-left:50px; background-repeat:no-repeat; background-position:top left; height:45px; padding-top:7px; display:block;  line-height:18px; font-size:0.85em;  }
            #Elenco_File LI a {color:#000; text-decoration:none; }
            #Elenco_File LI  a.file_1 {background-image:url('../images/file1.png'); }
            #Elenco_File LI  a.file_2 {background-image:url('../images/file2.png'); }
            #Elenco_File LI  a.file_3 {background-image:url('../images/file3.png'); }
            #Elenco_File LI  a.file_4 {background-image:url('../images/file4.png'); }
            #Elenco_File LI  a.file_5 {background-image:url('../images/file5.png'); }
                       #Elenco_File LI  a.file_6 {background-image:url('../images/file6.png'); }
                                  #Elenco_File LI  a.file_7 {background-image:url('../images/file7.png'); }  
            #Elenco_File LI a:hover {text-decoration:underline}    
            #Elenco_File LI DIV.ttl {font-weight:bold;}   
            
            FORM INPUT[type=text].Obl {
                background-color: #f5dcdd;
            }