/*
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: 102.4em;
@container_height: 76.8em;
@ratio_em: 10 / 16;

@my_green: #a8c985;
@my_brown: #857466;

@font-face {
	font-family: 'cipherRegular';
	src: url('../fonts/cipher-webfont.eot');
	src: local('☺'), url('../fonts/cipher-webfont.woff') format('woff'), url('../fonts/cipher-webfont.ttf') format('truetype'), url('../fonts/cipher-webfont.svg#webfontO5QdypMt') format('svg');
	font-weight: normal;
	font-style: normal;
}

/*
Text
----------------------------------------------------- */
p {
    color: #FFF;
    font-size: 130%;
    line-height: 130%;
    margin-bottom: 1em;
}
em {
    font-style: italic;
}
strong {
    font-weight: bold;
}
a:focus {
    outline: none;
}
h2 {
    font-family: 'cipherRegular', Arial, Verdana, sans-serif;
    font-size: 200%;
}
/*
Layout
----------------------------------------------------- */
html {
    background-color: @my_green;
    
    body {
        font-size: 100% * @ratio_em;
        font-family: Arial, Helvetica, Verdana, sans-serif;
           
        #header {
            width: 100%;
            height: 17em;
            
            .center {
                background: url('../images/back-header.png') no-repeat bottom center;
                
                h1 {
                    background: url('../images/logo-locanda-azzeccagarbugli-min.png') no-repeat top left;
                    width: 183px;
                    height: 76px;
                    position: absolute;
                    top: 7em;
                    
                    a {
                        text-indent: -9999px;
                        display: block;
                        width: 183px;
                        height: 76px;
                    }
                }
            }
        }
        #content {
            width: 100%;
            height: 49em - 6em;
            padding-top: 6em;
            border-top: .1em solid #FFF;
            border-bottom: .1em solid #FFF;
            background: @my_brown url('../images/pattern.png') repeat;
            
            .center {
                #nav {
                    position: absolute;
                    
                    li {
                        margin-bottom: 3.1em;
                        
                        a {
                            background: url('../images/item-menu.png') no-repeat top left;
                            font-size: 130%;
                            padding: 9px 0 0 3em;
                            display: block;
                            &:hover, &.selected {
                                background-position: 0 -25px;
                                color: #FFF;
                            }
                            &.selected { cursor: default; }
                        }
                    }
                }
                .page {
                    width: 70em;
                    height: 42em;
                    position: absolute;
                    top: 1em;
                    right: 5em;  
                }
            }
        }
        #footer {
            width: 100%;
            padding: 5em 0 1em 0;
            text-align: center;
            position: relative;
            
            p { font-size: 110%; }
            strong { font-size: 120%; }
            #fb-like-button { margin-top: 1em; }
        }
        .center {
            width: @container_width - 10em;
            height: 100%;
            display: block;
            position: relative;
            margin: 0 auto;
            padding: 0 5em;
        }
        a {
            color: @my_green;
            text-decoration: none;
            &:hover { color: #FFF; }
        }
        
        //fancybox
        #fancybox-close {
            width: 32px;
            height: 32px;
            background: url('../images/btn-close.png') no-repeat top left;
            top: -6px;
            right: -32px;
            display: block;
            &:hover { background: url('../images/btn-close-hover.png') no-repeat top left; }
        }
        #fancybox-left:hover {
            
            #fancybox-left-ico {
                top:  50px;
                left: 6px;
                width: 29px;
                height: 29px;
                background: url('../images/btn-prev.png') no-repeat top left;
            }
        }
        #fancybox-right:hover  {
            #fancybox-right-ico {
                top: 50px;
                right: 6px;
                left: auto;
                width: 29px;
                height: 29px;
                background: url('../images/btn-next.png') no-repeat top left;
            }
        }
        #fancybox-title-wrap { display: none; }
        //paginator
        #page-navigation {
            position: absolute;
            z-index: 100;
            top: -3em;
            right: 0;
            
            a {
                color: #fff;
                font-size: 130%;
                margin-left: 1em;
            }
            a:hover, a.active-page {
                color: @my_green;
            }
        }
    }
    .facebook {
        width: 110px;
        padding: 5px 5px 5px 25px;
        display: block;
        margin: 10px auto;
        color: #fff;
        background: url('../images/icon-facebook.png') no-repeat 0 -24px;
    }
    .facebook:hover { background-position: 0 0; } 
}
/*
Prehome
----------------------------------------------------- */
.intro {
    position: absolute;
    width: 100%;
    height: 100%;
    min-width: @container_width;
    min-height: 58em;
    background: @my_brown url('../images/pattern.png') repeat;
}
#intro {
    position: relative;
    padding-top: 14em;
    text-align: center;
    color: #FFF;
    h2 {
        font-size: 180%;
        margin: 1.5em 0 2.5em;
    }
    ul {
        margin-bottom: 6em;
        
        li {
            display: inline;
            padding: 1em 2em .7em;
            border-left: .1em solid #fff;
            &:first-child { border: 0; }
            a {
                color: #fff;
                font-family: 'cipherRegular', Arial, Verdana, sans-serif;
                font-size: 145%;
                cursor: pointer;
                &:hover { color: @my_green; }
            }
        }
    }
    #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: 1;
                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;
                }
            }
        }
    }  
}
/*
Home
----------------------------------------------------- */
#home {
    img {
        margin-bottom: 3em;
		border: .1em solid #fff;
    }
    a {
        font-size: 140%;
        text-transform: uppercase;
        position: absolute;
        bottom: 3.3em;
    }
    #btn-locanda {
        padding: 35px 35px 3px 0;
        background: url('../images/btn-locanda.png') no-repeat top right;
        left: 6em;
        &:hover { background-position: right -55px; }
    }
    #btn-ristorante {
        padding: 30px 0 3px 70px;
        background: url('../images/btn-ristorante.png') no-repeat top left;
        right: 6em;
        &:hover { background-position: 0 -50px; }
    }
}
/*
La locanda
----------------------------------------------------- */
#locanda, #ristorante {
    #icon {
        position: absolute;
        top: -2em;
        right: 0;
        width: 165px;
        height: 194px;
        background: url('../images/powwow-wedding.png') no-repeat top left;
        text-align: center;
        
        p {
        	color: #857465;
        	font-size: 130%;
        	font-weight: bold;
        	width: auto;
        	margin-top: 7.8em;
        }
    }
    ul {
        position: absolute;
        top: 19.5em;
        left: 0;
        
        li {
            display: inline;
            margin-left: .5em;
            float: left;
            
            &:first-child { margin: 0; }
            img { border: .1em solid #fff; }
            p { width: 200px; }
        }
    }
}
#locanda {
    background: url('../images/texture-locanda.png') no-repeat bottom center;
    p { width: 38em; }
}
/*
Il ristorante
----------------------------------------------------- */
#ristorante {
    background: url('../images/texture-ristorante.png') no-repeat bottom center;

    #icon-open {
        float: left;
        margin-right: 1.5em;
    }
    #icon-open + p { margin-top: 2.2em; }
}
/*
Gallery
----------------------------------------------------- */
#gallery {
    background: url('../images/texture-gallery.png') no-repeat bottom center;
    
    #order-img {
        color: #FFF;
        font-size: 140%;
        background: url('../images/item-menu.png') no-repeat 0 -25px;
        display: block;
        position: absolute;
        z-index: 100;
        top: -2.5em;
        right: 0;
        padding: 9px 0 0 25px;
    }
    #order-img:hover {
        color: @my_green;
        background-position: 0 0;
    }
    #list-pic {
        width: 100%;
        height: 100%;
        
        .pic {
        	position: absolute;
        	border: 5px solid #EEE;
        	-moz-box-shadow: 0 0 10px #333;
        	-webkit-box-shadow: 0 0 10px #333;
        	box-shadow: 0 0 10px #333;
        	background-color: #FFF;
        	
        	a { display: block; }
        }
    }
    #list-pic.order {
        padding-left: 6em;
        
        li {
            position: static;
            float: left;
            margin: 0 10px 10px 0;
        }
    }
}

/*
Prenotazioni e Prezzi
----------------------------------------------------- */
#prenotazioni {
    background: url('../images/texture-prenotazioni.png') no-repeat bottom center;
    
    h3 {
        color: #fff;
        font-size: 150%;
    }
    #icon {
    	width: 122px;
    	height: 137px;
        position: absolute;
        bottom: .5em;
        right: 0;
        background: url('../images/powwow-conventions.png') no-repeat top left;
        text-align: center;
        
        p {
        	font-size: 110%;
        	font-weight: bold;
        	line-height: 1em;
        	margin-top: 5.5em;
        }
    }
    table {
        width: 100%;
        margin: 2.5em 0 4em 0;
        border-top: .1em solid #fff;
        border-bottom: .1em solid #fff;
        
        tr {
            height: 5.5em;
            
            td {
                padding-top: 1em;
                
                p {
                    margin: 0;
                    span {
                        font-size: 125%;
                        color: @my_green;
                        font-family: 'cipherRegular', Arial, Verdana, sans-serif;
                        display: block;
                    }
                }
                img {
                    float: left;
                    margin-right: 1em;
                    &:hover { opacity: .7; }
                }
                .book {
                    background: url('../images/btn-book.png') no-repeat top left;
                    font-size: 120%;
                    padding: 10px 0;
                    width: 80px;
                    display: block;
                    text-align: center;
                    color: #fff;
                    position: relative;
                    right: 40px;
                    bottom: 10px;
                    float: right;
                    &:hover { background-position: 0 -33px; }
                }
            }
        }
    }
    table + p, table + p + p {
        font-size: 115%;
        width: 50em;
    }
}
/*
Artista ospite
----------------------------------------------------- */
#ospite {
    background: url('../images/texture-ospite.png') no-repeat bottom center;
    
    #poster { margin-left: 8.5em; }
    a {
        width: 15em;
        color: #FFF;
        font-size: 120%;
        position: absolute;
        right: 8.5em;
        bottom: 4.5em;
        text-align: center;
        &:hover { color: @my_green; }
    }
    #icon { bottom: 1em; }
}
/*
Parlano di noi
----------------------------------------------------- */
#parlano {
    background: url('../images/texture-parlano.png') no-repeat bottom center;
    
    ul {
        padding-left: 6em;
        
        li.item {
            width: 18em;
            height: 6.3em;
            background-color: #ccc;
            border: .6em solid #fff;
            float: left;
            margin: 0 1.5em 1.5em 0;
        }
    }
    #page-navigation { right: 3em; }
}
/*
Contatti
----------------------------------------------------- */
#contatti {
    background: url('../images/texture-contatti.png') no-repeat bottom center;
    
    img {
        position: absolute;
        bottom: 6em;
        right: -3em;
    }
    p { line-height: 2em; }
    strong { font-size: 120%; }
    ul {
        margin-top: 2em;
        
        li {
            float: left;
            margin-right: 1.5em;
        }
        #facebook,
        #youtube {
            width: 24px;
            height: 24px;
            display: block;
        } 
        #facebook { background: url('../images/icon-facebook.png') no-repeat top left; }
        #youtube { background: url('../images/icon-youtube.png') no-repeat top left; }
        #google-maps {
            width: 84px;
            height: 24px;
            display: block;
            background: url('../images/logo-google-maps.png') no-repeat top left;
        }
        #facebook:hover, #google-maps:hover, #youtube:hover {
            background-position: 0 -24px;
        }
    }
    #icon-open {
        float: left;
        position: absolute;
        top: 22em;
        left: 0;
    }
    #icon-open + p {
        margin-top: 12em;
        line-height: 1.4em;
    }
    #text-map {
        line-height: 1.4em;
        position: absolute;
        top: 0;
        right: 0;
        width: 17em;
        text-align: right;
    }
}

/*
Lingua EN
----------------------------------------------------- */

body.en {
    #locanda { background: url('../images/texture-locanda-en.png') no-repeat bottom center; }
    #ristorante { background: url('../images/texture-ristorante-en.png') no-repeat bottom center; }
    #prenotazioni { background: url('../images/texture-prenotazioni-en.png') no-repeat bottom center; }
    #ospite { background: url('../images/texture-ospite-en.png') no-repeat bottom center; }
    #parlano { background: url('../images/texture-parlano-en.png') no-repeat bottom center; }
    #contatti { background: url('../images/texture-contatti-en.png') no-repeat bottom center; }
}

/*
Landing
----------------------------------------------------- */

#landing {

h1 {font-size: 300%;
color: #fff;
font-weight: bold;
}

h2 {font-size: 180%;
color: #fff;
}

img {float: left;
margin-right: 10px;

}
}