/*
Begin YUI3
----------------------------------------------------- */
/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.1.0
build: 2026
*/
@import "_reset";
@import "_font";
/*
end YUI3
*/

/*
Variabili
----------------------------------------------------- */
@container_width: 97.4em;
@container_height: 62.6em;
@ratio_em: 10 / 16;

@my_red: #e30613;
@my_gray: #595959;

@font-face {
    font-family: 'HelveticaNeue Thin';
	src: url('../fonts/helvetica-thin.eot');
	src: local('☺'), url('../fonts/helvetica-thin.woff') format('woff'), url('../fonts/helvetica-thin.ttf') format('truetype'), url('../fonts/helvetica-thin.svg#webfontKMuJvLAQ') format('svg');
    font-weight: normal;
    font-style: normal;
}
.nav-link {
    font-size: 440%;
    font-family: 'HelveticaNeue Thin', Helvetica, Arial, sans-serif;
    color: #FFF;
    text-decoration: none;
    text-transform: lowercase;
    letter-spacing: -1px;
    
    &:hover { color: @my_red; }
    &.selected { color: @my_red; }
}
.icon-news {
    position: absolute;
    top: 1.5em;
    left: -2em;
    z-index: 10;
}
/*
Text
----------------------------------------------------- */
h1 {}
h2 {
    color: @my_gray;
    font-size: 200%;
    font-family: 'HelveticaNeue Thin', Helvetica, Arial, sans-serif;
}
h3 {
    color: #fff;
    font-size: 120%;
}
h4 {}
p {
    color: @my_gray;
    font-size: 120%;
    line-height: 1.3em;
}
strong {
    font-weight: bold;
}

/*
Layout
----------------------------------------------------- */
html {
    background-color: #A8A8A8;
    //background: -moz-radial-gradient(15% 45% 0deg,circle cover, #FFFFFF, #595959);
    background: -moz-linear-gradient(left, #ffffff 0%, #595959 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(100%,#595959));
    background: -webkit-linear-gradient(left, #ffffff 0%,#595959 100%);
    background: -o-linear-gradient(left, #ffffff 0%,#595959 100%);
    background: -ms-linear-gradient(left, #ffffff 0%,#595959 100%);
    background: linear-gradient(left, #ffffff 0%,#595959 100%);
    
    body {
        font-size: 100% * @ratio_em;
        width: auto;
        
        #wrapper {
            width: @container_width;
            min-height: @container_height;
            margin:  0 auto;
            font-family: Arial, Verdana, sans-serif;
            position: relative;
            
            a:focus { outline: none; }
            #header,
            #content,
            #footer {
                width: @container_width - 3em;
                padding: 0 1.5em;
                margin: 0 auto;
            }
            #content { 
                padding-top: 4em;
                min-height: 42em;
            }
            #header {
                height: 150px;
                h1 {
                    background: url("../images/logo-hotline.png") no-repeat center top;
                    width: 94px;
                    height: 42px;
                    text-indent: -9999px;
                    margin: 0 auto;
                    position: relative;
                    top: 2em;
                    a {
                        display: block;
                        width: 94px;
                        height: 42px;
                    }
                }
                #nav-main {
                    text-align: center;
                    margin: 0 auto;
                    list-style: none outside none;
                    position: relative;
                    top: 6em;
                    
                    li {
                        display: inline;
                        margin: 0 1.3em;
                        
                        a { .nav-link; } 
                    }
                }
                #nav-lang {
                    float: right;
                    color: #9a9a9a;
                    position: absolute;
                    top: .5em;
                    right: 2em;
                    li {
                        display: inline;
                        a {
                            color: #9a9a9a;
                            font-weight: bold;
                            font-size: 100%;
                            text-decoration: none;
                            &:hover { text-decoration: underline; }
                            &.selected { color: #FFF; }
                        }
                    }
                }
            }
            #content {
                position: relative;
                .box {
                    position: relative;
                    z-index: 2;
                    h2, p { color: #FFF; }
                }
                .shadow {
                    -webkit-box-shadow: 2px 2px 5px 1px #333;
                    -moz-box-shadow: 2px 2px 5px 1px #333;
                    box-shadow: 2px 2px 5px 1px #333;
                }
                .img-section { 
                    position: absolute;
                    z-index: 3;
                }
                ul {
                    text-align: center;
                    margin: 0 auto;
                    list-style: none outside none;
                    
                    li { display: inline; }
                }
            }
            #footer {
                clear: both;
                padding-bottom: 2em;
                text-align: center;
                p { font-size: 90%; }
                #logo-copiaincolla {
                    display: block;
                    width: 96px;
                    height: 17px;
                    margin: 1em auto 0 auto;
                    text-indent: -9999px;
                    background: url(/images/logo-copiaincolla.png) no-repeat top left;
                    
                    &:hover { background-position: 0 -17px;
                        position: relative;
                        text-decoration: none;
                        span.tt-container {
                            display: block;
                            text-indent: 0;
                            position: absolute;
                            top: -7.3em;
                            left: -3em;
                            z-index: 100;
                            width: 173px;
                            height: 58px;
                            padding-top: 15px;
                            background: url(/images/back-tooltip.png) no-repeat top left;
                
                            span {
                                color: #414141;
                                font-size: 9px;
                                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                                margin-left: 42px;
                            }
                            span.tt-text-payoff {
                                text-transform: uppercase;
                            }
                            span.tt-text-site {
                                font-size: 10.5px;
                            }
                        }
                    }
                }
            }
        }

/*
Index
----------------------------------------------------- */
        &.index {
            #wrapper {
                #header { height: 5em; }
                #content {
                    padding-top: 0;
                    height: 56em;
                    
                    .img-section { left: 3em; }
                    #right-bar {
                        width: 27em;
                        position: absolute;
                        top: -1em;
                        left: 65em;
                        
                        #nav {
                            text-align: left;
                            margin-bottom: 5.5em;           
                            li {
                                display: block;
                                margin-bottom: -.7em;
                                a { .nav-link; } 
                            }
                        }
                        h2 { margin-bottom: .5em; }
                    }
                    #news-list {
                        position: relative;
                        z-index: 2;
                        top: 44em;
                        
                        li {
                            position: relative;
                            width: 16.3em;
                            height: 7.8em;
                            float: left;
                            margin-left: 3em;
						
                            
                            div.box {
                                width: 16.3em - 3;
                                height: 7.8em - 1;
                                padding: 1em 0 0 3em;
                                text-align: left; 
                                background: #666666;
                                background: -moz-linear-gradient(top, #666666 0%, #212121 100%);
                                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#212121));
                                background: -webkit-linear-gradient(top, #666666 0%,#212121 100%);
                                background: -o-linear-gradient(top, #666666 0%,#212121 100%);
                                background: -ms-linear-gradient(top, #666666 0%,#212121 100%);
                                background: linear-gradient(top, #666666 0%,#212121 100%);
                                
                                p {
                                    font-size: 110%;
                                    line-height: 1.1em;
									height: 48px;
                                }
                                a {
                                    color: @my_red;
                                    text-decoration: none;
                                    float: right;
                                    position: relative;
                                    right: 1em;
                                    &:hover { text-decoration: underline; }
                                }
                            }
                            img { .icon-news; }
                        }
                    }
                    form {
                        position: relative;
                        top: 43em;
                        left: 5em;
                        legend, input, input[type=submit], p { font-size: 110%; }
                        legend, input[type=submit], p, a { color: #FFF; }
                        legend {
                            text-transform: uppercase;
                            margin-bottom: .5em;
                            padding: .8em 2em 0 0;
                            background: url("../images/icon-padlock.png") no-repeat right top;
                        }
                        input {
                            width: 18em;
                            padding: .3em;
                            color: #777;
                            margin-bottom: .5em;
                            -webkit-border-radius: 15px;
                            -moz-border-radius: 15px;
                            border-radius: 15px;
                        }
                        input[type=submit] {
                            cursor: pointer;
                            -webkit-border-radius: 10px;
                            -moz-border-radius: 10px;
                            border-radius: 12px;
                            border: 1px solid @my_red;
							width: auto;
                            padding: 2px 10px;
                            margin-left: .7em;
                            font-weight: bold;
                            background: @my_red;
                            background: -moz-linear-gradient(top, #eb515a 47%, #e30613 47%);
                            background: -webkit-gradient(linear, left top, left bottom, color-stop(47%,#eb515a), color-stop(47%,#e30613));
                            background: -webkit-linear-gradient(top, #eb515a 47%,#e30613 47%);
                            background: -o-linear-gradient(top, #eb515a 47%,#e30613 47%);
                            background: -ms-linear-gradient(top, #eb515a 47%,#e30613 47%);
                            background: linear-gradient(top, #eb515a 47%,#e30613 47%);
                            -webkit-box-shadow: 2px 2px 2px #333;
                            -moz-box-shadow: 2px 2px 2px #333;
                            box-shadow: 2px 2px 2px #333;
                            &:hover {
                                -webkit-box-shadow: 1px 1px 1px #333;
                                -moz-box-shadow: 1px 1px 1px #333;
                                box-shadow: 1px 1px 1px #333;
                            }
                        }
                        a:hover { text-decoration: none; }
                        #login-name {
                            margin-top: 5px;
                            img { position: relative; top: 5px; }
                            span { color: #E30613; }
                            #logout { margin-top: .5em; display: block; }
                            #admin { margin-top: .5em; display: block; }
                            a:hover { text-decoration: none; }
                        }
                    }
                }
            }
        }
/*
Chi Siamo
----------------------------------------------------- */
        &.chi-siamo {
            #content {
                ul {
                    position: relative;
                    top: 4.5em;
                    padding-left: 6.5em;
                    
                    li {
                        width: 25.8em;
                        height: 25.8em;
                        margin-right: 2em;
                        float: left;
                        position: relative;
                        
                        div.box {
                            width: 25.8em - ( 2.2 * 2);
                            height: 25.8em - ( 2.2 );
                            padding: 2.2em 2.2em 0;
                            background-color: @my_red;
                            text-align: left;

                            h2 { margin-bottom: .7em; }
                            p {
                                font-size: 120%;
                                line-height: 1.1em;
                            }
                        }
                    }
                }
                .img-section {
                    top: 31em;
                    left: 50.5em;
                }
            }
        }
/*
Prodotti
----------------------------------------------------- */
        &.prodotti {
            #content {
                height: 53em;
                p {
                    width: 36em;
                    margin-top: 2em;
                    font-weight: bold;
                }
                h2, p { margin-left: 150px; }
                .img-section {
                    top: 5em;
                    right: 12em;
                }
                ul {
                    position: absolute;
                    top: 25em;
                    left: 12.5em;
                    
                    li {
                        width: 105px;
                        float: left;
                        margin: 0 2em 1.5em 0;
                        
                        img { margin-bottom: .5em; }
                        a {
                            color: @my_gray;
                            font-size: 120%;
                            text-decoration: none;
                            background: url("../images/arrow.png") no-repeat center right;
                            padding: .3em 1.5em .3em 1em;
                            
                            &:hover { color: #333; }
                        }
                    }
                }
            }
        }
/*
News
----------------------------------------------------- */
        &.news {
            #wrapper {
                #content {
                    width: 97.4em - ( 26 + 1.5 );
                    padding-left: 26em;
                    
                    h2 { margin-bottom: 1em; }
                    .img-section {
                        top: 6.5em;
                        left: 7em;
                    }
                    ul {
                        position: relative;
                        top: 2.5em;
                        text-align: left;
                        padding-bottom: 5em;
                        
                        li {
                            position: relative;
                            
                            div.box {
                                width: 58.4em - ( 3 * 2 );
                                padding: 2em 3em;
                                display: block;
                                text-align: left;
                                margin-bottom: 1em;
                                background: #646464;
                                background: -moz-linear-gradient(top, #646464 0%, #222222 100%);
                                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#646464), color-stop(100%,#222222));
                                background: -webkit-linear-gradient(top, #646464 0%,#222222 100%);
                                background: -o-linear-gradient(top, #646464 0%,#222222 100%);
                                background: -ms-linear-gradient(top, #646464 0%,#222222 100%);
                                background: linear-gradient(top, #646464 0%,#222222 100%);
                                
                                h2 { margin: 0; }
                                h3 { margin-bottom: 1.3em; }
                                p { line-height: 1.1em; }
                                a {
                                    color: @my_red;
                                    text-decoration: none;
                                    &:hover { text-decoration: underline; }
                                }
                            }
                            img { .icon-news; }
                        }
                    }
                }
            }
        }
/*
Contatti
----------------------------------------------------- */
        &.contatti {
            background: url("../images/background-line-contact.png") repeat-x top left;
            #wrapper {
                #content {
                    height: 58em;
                    .img-section {
                        left: 20em;
                        top: 22px;
                    }
                    ul {
                        position: relative;
                        z-index: 4;
                        top: 60px;
                        li {
                            display: inline;
                            float: left;
                            text-align: left;
                            border-left: 1px solid #fff;
                            padding: 3em 0 1em 1em;
                            width: 20em;
                            &:first-child { margin: 0 7em 0 1em; }
                            p { margin-top: 1.5em; }
                            a {
                                color: #fff;
                                background: url("../images/icon-mail.png") no-repeat right top;
                                padding: 0.5em 3em 0 0;
                                &:hover { text-decoration: none; }
                            }
                        }
                    }
                    .google-link {
                        position: absolute;
                        top: 30em;
                        left: 3em;
                        padding: 0.5em 7em .5em 0;
                        color: @my_gray;
                        font-size: 120%;
                        text-decoration: none;
                        background: url("../images/logo-google-maps.png") no-repeat right center;
                    }
                    .google-link:hover { text-decoration: underline; }
                }
            }
        }
    // chiudo il tag BODY
    }
// chiudo il tag HTML
}