html {
    height: 2000px; overflow: hidden;
    margin: 0; padding: 0;
}

body {
    margin: 0; padding: 0;
    font: 13.3px/20px "Trebuchet MS", "Geneva CE", lucida, sans-serif; color: #333;
    background: #e6e6e6;
}

object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
address, cite, code, img, dl, ol, ul
fieldset, form, legend, table, caption {
    margin: 0 0 20px 0; padding:0;
    vertical-align: baseline;
}

h1  {
    font-size: 96px; font-weight: bold; letter-spacing: -7px;
}

h2 {
    font-size: 48px; letter-spacing: -1px; line-height: 60px;
    text-shadow: 0px 1px 0px #ddd;
}
#title-carousel h2 {
    font-size: 96px; font-weight: bold; letter-spacing: -5px;
}

a {
    color: #000;
}
a:hover, a:active {
    color: #000; text-decoration: none;
}

img { border: 0; }



/* ----------------------------------------------------------------------------
   Grid system */

.row { clear: both; }
    .row .row { margin: 0 -10px; }
.row-sep { height: 20px; }
    .row-sep hr { display: none; }
.col {
    position: relative; float: left;
    width: 940px; margin: 0; padding: 0 10px;
}
.row.col { padding: 0; width: auto !important; clear: none; } /* experimentalni! */
.col.on-right { float: right; }

/* 12 columns */
.col.span-1  { width: 60px; } .col.span-2  { width: 140px; } .col.span-3  { width: 220px; } .col.span-4  { width: 300px; }
.col.span-5  { width: 380px; } .col.span-6  { width: 460px; } .col.span-7  { width: 540px; } .col.span-8  { width: 620px; }
.col.span-9  { width: 700px; } .col.span-10 { width: 780px; } .col.span-11 { width: 860px; } .col.span-12 { width: 940px; }



/* ----------------------------------------------------------------------------
   Formulare */

select, input, textarea { font: normal bold 18.7px/20px "Trebuchet MS", Helvetica, sans-serif; color: #fff; }
input[type="text"] { width: 200px; }
input[type="text"], select, textarea {
    padding: 9px; border: 1px solid #afcb29; border-color: #afcb29 #d9e5a6 #d9e5a6 #afcb29;
    background: #839e08 url(../images/mask/form-input-gradient.png) 0 0 repeat-x;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /*text-shadow: 0px 1px 0px #414f04;*/
}
input[type="text"]:active, select:active, textarea:active, input[type="text"].active, select.active, textarea.active {
    border-color: #414f04;
}
textarea {
    width: 360px; height: 100px;
    font-size: 13.3px;
}
input[type="submit"] {
    height: 40px; min-width: 100px;
    margin: 5px 0; border: none;
    font-weight: bold; font-size: 14.7px; color: #000;
    background: #fff;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 5px #839e08;
    -moz-box-shadow: 0px 2px 5px #839e08;
    box-shadow: 0px 2px 5px #839e08;
    cursor: pointer;
}

/* Kontejnery */
form th, form td {
    background: none !important;
}



.hidden {
    /*display: none;*/
    position: absolute !important; top: -10000px !important; left: -10000px !important;
}
.invisible {
    visibility: hidden;
}

.center {
    text-align: center;
}


/* Fixies */
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }



/* ----------------------------------------------------------------------------
   LAYOUT */

.page {
    min-width: 960px; min-height: 1600px;/* overflow: hidden;*/
    text-align: center;
}
    .page-content {
        position: relative; width: 960px;/* overflow: hidden;*/
        margin: 0 auto;
        text-align: left;
    }

    #logo {
        position: fixed; top: 33px; left: 40px; z-index: 10000;
    }
    
    .link-sf, .link-sfn {
        position: fixed; bottom: 20px; right: 20px; z-index: 10000;
    }

    #nav {
        position: fixed; top: 40px; right: 40px; z-index: 987654321;
        margin: 0; padding: 0;
    }
        #nav li {
            display: inline;
        }
            #nav a {
                display: block; position: relative; float: left; width: 80px; height: 37px; overflow: hidden;
                margin-left: 20px;
                text-indent: 500px; white-space: nowrap;
                background: transparent url(../images/mask/nav-items.png) 0 0 no-repeat;
            }
            #nav a.home { width: 53px; background-position: 0 0; }
            #nav a.refs { width: 84px; background-position: -62px 0; }
            #nav a.clients { width: 96px; background-position: -155px 0; }
            #nav a.services { width: 61px; background-position: -262px 0; }
            #nav a.about { width: 55px; background-position: -334px 0; }
            #nav a.contact { width: 73px; background-position: -398px 0; }
            #nav a.career { width: 73px; background-position: -480px 0; }
            #nav a.home:hover { background-position: 0 -100px; }
            #nav a.refs:hover { background-position: -62px -100px; }
            #nav a.clients:hover { background-position: -155px -100px; }
            #nav a.services:hover { background-position: -262px -100px; }
            #nav a.about:hover { background-position: -334px -100px; }
            #nav a.contact:hover { background-position: -398px -100px; }
            #nav a.career:hover { background-position: -480px -100px; }
            #nav a.home.active { background-position: 0 -50px; }
            #nav a.refs.active { background-position: -62px -50px; }
            #nav a.clients.active { background-position: -155px -50px; }
            #nav a.services.active { background-position: -262px -50px; }
            #nav a.about.active { background-position: -334px -50px; }
            #nav a.contact.active { background-position: -398px -50px; }
            #nav a.career.active { background-position: -480px -50px; }

    #home-page {
        min-height: 500px;
        text-align: center;
    }
        #home-page .page-content {
            text-align: center;
        }
        #title-carousel {
            position: relative; height: 220px;
        }
            #title-carousel .carriage {
                width: 960px; position: absolute; top: 0;
            }
                #title-carousel h2 {
                    /*text-transform: lowercase;*/
                }
        .slidedown-button.slim, .slideup-button {
            position: absolute; bottom: -30px; left: 50%;
            margin-left: -53px;
            text-align: center;
        }
        #home-page .slidedown-button {
            margin-top: 40px;
        }
        /*#refs-page .slidedown-button {
            left: 173px;
        }*/
        .slideup-button {
            bottom: -220px;
        }
            .slidedown-button a, .slideup-button a {
                display: block; display: inline-block; position: relative; width: 86px; height: 86px;
                margin: 0 auto; padding: 10px;
                /*text-indent: 1000px; white-space: nowrap;*/
                color: red;
            }
                .slidedown-button a strong, .slideup-button a strong {
                    display: none;
                }
                .slidedown-button a span, .slideup-button a span {
                    display: block; position: absolute; top: 0; left: 0; width: 106px; height: 106px;
                    background: transparent url(../images/mask/button-slidedown.png) 50% 0 no-repeat;
                }
                .slideup-button a span {
                    background-image: url(../images/mask/button-slideup.png);
                }
                .slidedown-button.slim a {
                    width: 120px; height: 68px; overflow: hidden; white-space: nowrap;
                    text-indent: 140px;
                }
                .slidedown-button.slim a span {
                    width: 120px; height: 68px;
                    background: transparent url(../images/mask/button-slidedown-slim.png) 50% 0 no-repeat;
                }
                .slidedown-button a:hover span, .slideup-button a:hover span, .slidedown-button a:active span {
                    background-position: 50% -150px;
                }
        #home-page .slogan {
            position: relative; display: inline-block; height: 42px; overflow: visible;
            margin: 19px 0 -1px 0;
            font-size: 18.7px; line-height: 40px; text-align: center; letter-spacing: 0px;
            background: #ededed url(../images/mask/title-page-slogan-box.png) 0 0 repeat-x;
        }
            #home-page .slogan .le, #home-page .slogan .re {
                display: block; width: 20px; height: 42px; position: absolute; top: 0; left: -20px;
                background: #ededed url(../images/mask/title-page-slogan-box-le.png) 0 0 no-repeat;
            }
            #home-page .slogan .re {
                left: auto; right: -20px;
                background-image: url(../images/mask/title-page-slogan-box-re.png);
            }
            #home-page .slogan .shadow {
                display: block; position: relative; top: 20px; left: 0;
                margin: 0 auto -15px auto;
            }

    #refs-page {
        width: 100%;
        background: #adadad;
    }
    #refs-page .wrapper {
        position: relative; width: 10000px; height: 360px;
        /*background: transparent url(../images/mask/refs-glow.jpg) 160px 250px no-repeat;*/
    }
        #refs-carousel {
            position: relative; float: left; width: 960px;
            margin-right: 3000px;
        }
            #refs-page .keys-tip {
                display: none; position: absolute; top: 20px; right: 66px;
            }
        #refs-carousel .refs {
            position: relative; height: 320px;
            background: transparent url(../images/mask/refs-notebook.png) 100% 0 no-repeat;
        }
            #refs-carousel .ref {
                position: absolute; top: 0; left: 0;
            }
            #ref-detail {
                position: relative;
            }
            #refs-carousel .ref .detail,
            #ref-detail .detail {
                float: left; width: 360px;
                color: #eee;
            }
                #refs-carousel .ref .detail h2,
                #ref-detail .detail h2 {
                    margin-left: -3px;
                }
                    #refs-carousel .ref .detail .details a,
                    #ref-detail .detail .details a {
                        font: normal bold 12px/20px Arial; color: #000; text-decoration: none;
                    }
                    #refs-carousel .ref .detail .details a:hover,
                    #ref-detail .detail .details a:hover {
                        color: #fff;
                        background: #000;
                    }
                #refs-carousel .ref .detail .tags,
                #ref-detail .detail .tags {
                    padding: 0;
                    color: #fff;
                }
                    #refs-carousel .ref .detail .tags li,
                    #ref-detail .detail .tags li {
                        float: left;
                        margin: 0 10px 5px 0; padding: 0 5px;
                        font-size: 12px; list-style: none;
                        background: #abce06;
                        -moz-border-radius: 3px;
                        border-radius: 3px;
                    }
            #refs-carousel .ref .ref-images {
                position: relative; width: 600px; height: 320px; float: right;
                margin: 0; padding: 0;
            }
                #refs-carousel .ref .ref-images li {
                    position: absolute; top: 20px; left: 66px; width: 468px; height: 258px; overflow: hidden;
                    list-style: none;
                    -webkit-box-shadow: 0px 0px 1px #000000;
                    -moz-box-shadow: 0px 0px 1px #000000;
                    box-shadow: 0px 0px 1px #000000;
                }
        #refs-list {
            margin-right: 3000px;
        }
        #ref-detail {
            
        }
            #ref-images {
                width: 360px; float: left;
                margin-left: 60px; padding: 0;
                list-style: none;
            }
                #ref-images .images-wrapper {
                    position: relative; height: 280px;
                    margin: 0; padding: 0;
                }
                    #ref-images li {
                        width: 468px; height: 258px; overflow: hidden;
                        margin: 0; padding: 0; border: 5px solid #888;
                        -moz-border-radiu: 5px;
                        border-radius: 5px;
                    }
        #refs-carousel .refs-nav,
        #refs-list .refs-nav,
        #ref-images .images-nav,
        #fb-refs .refs-nav {
            position: absolute; width: 600px; height: 35px;
            padding-left: 360px;
            text-align: center;
        }
        #refs-list .refs-nav {
            width: 960px;
            padding: 0;
        }
        #ref-images .images-nav,
        #fb-refs .refs-nav {
            width: 480px;
            padding-left: 0;
        }
            #refs-carousel .refs-nav span,
            #refs-list .refs-nav span,
            #ref-images .images-nav span,
            #fb-refs .refs-nav span {
                display: block; display: inline-block; width: 35px; height: 35px;
                background: transparent url(../images/mask/refs-nav.png) 0 0 no-repeat;
                cursor: pointer;
            }
            #refs-carousel .refs-nav span.hover,
            #refs-list .refs-nav span.hover,
            #ref-images .images-nav span.hover,
            #fb-refs .refs-nav span.hover {
                background-image: url(../images/mask/refs-nav-hover.png);
            }
            #refs-carousel .refs-nav span.active,
            #refs-list .refs-nav span.active,
            #ref-images .images-nav span.active,
            #fb-refs .refs-nav span.active {
                background-image: url(../images/mask/refs-nav-active.png);
            }

        #refs-list {
            float: left; width: 960px; clear: none;
        }
            #refs-list .list-wrapper
            {
                position: relative; height: 320px; overflow: hidden;
            }
                #refs-list .ref {
                    height: 160px; overflow: hidden;
                    font-size: 12px;
                }
                    #refs-list .ref a {
                        text-decoration: none;
                    }
                        #refs-list .ref a .text {
                            display: block; text-indent: 5px;
                            color: #fff; background: #999;
                            -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px;
                            border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;
                            -webkit-box-shadow: 0 3px 3px #888;
                            -moz-box-shadow: 0 3px 3px #888;
                            box-shadow: 0 3px 3px #888;
                        }
                        #refs-list .ref a:hover .text, #refs-list .ref a:active .text {
                            background: #abce06;
                        }
                        #refs-list .ref a .img {
                            display: block; height: 120px; overflow: hidden;
                            -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px;
                            border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;
                            -webkit-box-shadow: 0 3px 3px #888;
                            -moz-box-shadow: 0 3px 3px #888;
                            box-shadow: 0 3px 3px #888;
                        }

        #ref-detail {
            float: left; width: 960px; clear: none;
        }
                        
        #refs-switch {
            margin: 0 0 20px 0; padding: 0;
        }
            #refs-switch li { display: inline; }
                #refs-switch a {
                    display: inline-block;
                    margin-right: 10px; padding: 5px 10px; border: 1px solid #656565;
                    color: #656565; text-decoration: none;
                    -moz-border-radius: 5px;
                    border-radius: 5px;
                }
                #refs-switch a:hover, #refs-switch a:active {
                    border-color: #000;
                    color: #000;
                }
                #refs-switch a.active {
                    border-color: #656565;
                    color: #fff;
                    background: #656565;
                }


        .slideleft-button/*, .slideright-button*/ {
            position: absolute; top: 50%; left: -130px;
            margin-top: -53px;
        }
            .slideleft-button a {
                display: block; display: inline-block; position: relative; width: 86px; height: 121px; overflow: hidden;
                margin: 0 auto; padding: 10px;
                text-indent: 140px; white-space: nowrap;
            }
                .slideleft-button a span {
                    display: block; position: absolute; top: 0; left: 0; width: 68px; height: 120px;
                    background: transparent url(../images/mask/button-slideleft-slim.png) 50% 0 no-repeat;
                }
                .slideleft-button a:hover span, .slideleft-button a:hover span, .slideleft-button a:active span {
                    background-position: 50% -200px;
                }
                
    #clients-page .client-detail {
        height: 140px; overflow: hidden;
        padding-bottom: 80px;
        text-align: center;
    }
        #clients-page .client-detail p {
            display: none; width: 360px; height: 200px;
            margin: 0 auto -200px auto;
        }
    #clients-page .clients-nav {
        padding: 40px 0 0 0;
        background: transparent url(../images/mask/clients-nav-sep.png) 50% 0 no-repeat;
    }
        #clients-page .clients-nav li {
            display: inline;
        }
            #clients-page .clients-nav li a {
                display: block; float: left; width: 134px; height: 60px;
                margin-right: 19px;
                line-height: 60px; text-align: center;
                opacity: 0.5;
            }
            #clients-page .clients-nav li.danone a { width: 60px; }
            #clients-page .clients-nav li.benckiser a { width: 85px; }
            #clients-page .clients-nav li.nuctricia a { width: 96px; }
            #clients-page .clients-nav li.johnson a { width: 120px; }
            #clients-page .clients-nav li.ferrero a { width: 100px; }
            #clients-page .clients-nav li.vileda a { width: 90px; }
            #clients-page .clients-nav li.mattoni a { width: 103px; }
            #clients-page .clients-nav li.kimberly a { width: 130px; }
            #clients-page .clients-nav li a:hover,
            #clients-page .clients-nav li a:active { opacity: 1; }
                #clients-page .clients-nav li a img {
                    vertical-align: middle;
                }

    #services-page {
        background: #777;
    }
        #services-list {
            position: relative; width: 820px; min-height: 400px; margin: 0 auto;
        }
            #services-list dt {
                width: 86px; height: 86px;
                font-size: 13.3px; line-height: 13.3px; text-align: center; color: #fff;
                background: url(../images/mask/bubble-m.png) 0 0 no-repeat;
            }
            #services-list dt.l {
                width: 114px; height: 114px;
                font-size: 16px; line-height: 16px;
                background-image: url(../images/mask/bubble-l.png);
            }
            #services-list dt.xl {
                width: 150px; height: 150px;
                font-size: 21.3px; line-height: 21.3px;
                background-image: url(../images/mask/bubble-xl.png);
            }
            #services-list dt.xxl {
                width: 184px; height: 184px;
                font-size: 24px; line-height: 24px;
                background-image: url(../images/mask/bubble-xxl.png);
            }
            #services-list dt.active {
                color: #000;
                background-position: 0 -300px;
            }
                #services-list dt strong {
                    display: block;
                }
            #services-list dd {
                width: 300px;
                margin: 0; padding: 0;
                font-size: 14.7px; color: #fff;
            }

    #about-page {
        background: #e6e6e6;
    }
        #about-us {  }
            #about-us h2 {
                margin-left: -3px;
            }
            #about-us ul {
                padding: 0;
                list-style: none;
            }
                #about-us ul li {
                    padding-left: 20px;
                    background: transparent url(../images/mask/bullet-bubble.png) 0 8px no-repeat;
                }
            #about-us a {
                font-weight: bold; color: #87a500;
            }
            #about-us a.sf-link {
                color: #009ee0;
            }
        #fresh-people {
            margin-top: 80px;
        }

    #contact-page {
        background: #aed303 url(../images/mask/contacts-glow) 50% 80px no-repeat;
    }
        #contact-page h2 {
            font-size: 28px;
        }
            #contact-page .map {
                width: 488px; height: 371px;
                background: transparent url(../images/mask/map.png) 0 0 no-repeat;
            }
                #contact-page .map a {
                    position: absolute; width: 173px; height: 172px; top: 19px; left: 80px; overflow: hidden;
                    white-space: nowrap; text-indent: 10000px;
                }
                /*#contact-page .map a:hover,
                #contact-page .map a:hover {
                    background: transparent url(../images/mask/map.png) -70px -19px no-repeat;
                }*/
        #contact-form dd {
            margin: 0; padding: 0;
        }
        #contacts {
            margin-top: -160px;
        }
            #contacts .link {
                padding-left: 22px;
                background: transparent url(../images/icon-facebook.png) 0 50% no-repeat;
            }
            #contacts .twitter.link { background-image: url(../images/icon-twitter.png); }
            #contacts .sep {
                padding: 0 0.5em;
            }

    #career-page h2 {
        margin-left: -3px;
    }
    #career-page h4 {
        margin-bottom: 0;
    }
    #career-page ul {
        padding: 0;
        list-style: none;
    }
        #career-page ul li {
            padding-left: 20px;
            background: transparent url(../images/mask/bullet-bubble.png) 0 8px no-repeat;
        }
    #career-page a {
        font-weight: bold; color: #87a500;
    }


#ajax-spinner {
    margin: 15px 0 0 15px; padding: 13px;
    background: transparent url(../images/ajax-loader.png) no-repeat 50% 50%;
    font-size: 0;
    z-index: 123456;
    display: none;
}

div.flash {
    color: black;
    background: #FFF9D7;
    border: 1px solid #E2C822;
    padding: 1em;
    margin: 1em 0;
}

a[href^="error:"] {
    background: red;
    color: white;
}


/* big redefiing for new mobile references -> in template restrict by 'isset'  */
.mobile-wrap {
	background: url("../images/mask/refs-mobile.png") transparent;
	height: 434px;
	left: 365px;
	position: absolute;
	top: -114px;
	width: 600px;
}

	.mobile-wrap .mobile-main-image {
		position: absolute; top: 38px; left: 88px
	}
	
	
#ref-images.mobile-ref li {
	width: 160px;
	height: 285px;
	margin-left: 152px;
	margin-top: -35px;
}