/* --------------------------------------------------------------

   main.css
   
   Date: 2012.04.03. 12:33
   Version: 1.0 
   Author: Kádár Péter <kp@kpdesign.hu>
   Project: 1213w_lafem.hu
   
-------------------------------------------------------------- */

/* Import default CSS files
-------------------------------------------------------------- */
@import "reset.css";
@import "grid.css";
@import "typography.css";
@import "../webfonts/webfonts.css";

body { background: #5a5748 url("../images/bg-body.png") repeat-y top center; }

/* Header
-------------------------------------------------------------- */
header {
    background: url("../images/bg-header.jpg") no-repeat;
    height: 195px;
}
    #logo {
        background: url("../images/logo.png") no-repeat 45px 40px;
        margin: 0;
        padding: 0;
        width: 100%;
    }

        #logo a {
            display: inline-block;
            height: 195px;
            margin: 0;
            width: 100%;
        }
            #logo a span { display: none; }

    nav {
        background: #201f18 url("../images/bg-nav.png") repeat-x;
        border: 1px solid #363428;
        border-bottom-color: #0d0c0a;
        border-left-color: #24221a;
        border-right-color: #12110d;
        display: block;
        height: 30px;
        position: absolute;
        top: 166px;
        width: 978px;
    }

        nav ul {
            list-style: none;
            margin: 3px 0 0 0;
            padding: 0;
        }
        
        nav ul li { float: left; margin-left: 14px; }
        nav ul li a, .page h2 span {
            background: transparent url("../images/bg-nav-menu.png") repeat-x 0 0;
            color: #dfb167;
            display: inline-block;
            font-size: 1.125em;
            height: 25px;
            line-height: 25px;
            padding: 0 15px;
            position: relative;
            text-decoration: none;
        }
        nav ul li a:hover {
            background-position: 0 -25px;
            color: #201f18;
        }
        nav ul.main li a:before, nav ul.main li a:after, .page h2 span:before, .page h2 span:after {
            background: url("../images/sprite.png") no-repeat 0 0;
            content: ' ';
            display: block;
            height: 25px;
            position: absolute;
            width: 15px;
        }
        nav ul.main li a:before, .page h2 span:before {
            left: 0;
            top: 0;
        }
        nav ul.main li a:after, .page h2 span:after {
            background-position: -15px 0;
            right: 0;
            top: 0;
        }
        nav ul.main li a:hover:before {
            background-position: 0 -25px;
        }
        nav ul.main li a:hover:after {
            background-position: -15px -25px;
        }

    .slogan {
        color: #a8a388;
        font-size: 1.125em;
        margin-left: 40px;
        line-height: 30px;
    }

/* Language Select
-------------------------------------------------------------- */
#language-select { /*margin: 4px 14px 0 6px;*/}
#language-select ul li { margin: 2px 6px 0 6px; }
#language-select ul li a {
    background: transparent url("../images/flags.png") no-repeat 0 0;
    height: 19px;
    margin: 0;
    padding: 0;
    width: 29px;
    line-height: 1;
}
#language-select ul li.active { display: none; }
#language-select ul li#flag-hu a { background-position: 0 0; }
#language-select ul li#flag-de a { background-position: 0 -19px; }
#language-select ul li a span, #language-select ul li span { display: none; }

/* Frontpage
-------------------------------------------------------------- */
#frontpage {
    background: url("../images/bg-frontpage.png") repeat-y top center;
    text-align: center;
}
#slider { margin: 3px 0 0 40px; }
.slides_container {
    width:900px;
    height:963px;
}
.slides_container div {
    width:900px;
    height:963px;
    display:block;
}

/* Pages
-------------------------------------------------------------- */
.page {
    background: #cecaaf;
    border-radius: 18px;
    margin: 15px 40px;
    text-align: center;
}
.page h1 {
    color: #5a5748;
    font-family: 'DinMMedium';
    font-size: 1.75em;
    height: 50px;
    line-height: 50px;
    margin: 0;
}
.page h2 {
    background: #201f18;
    color: #dfb167;
    font-family: 'DinMBoldBold';
    font-size: 1.25em;
    height: 32px;
    line-height: 32px;
    margin: 0;
}
.page h2 span { margin-top: 1px; }

/* Products
-------------------------------------------------------------- */
.product-list { position: relative; height: auto; }
.product-item { position: relative; display: block; height: 230px; }
.product-info {
    color: #5a5748;
    font-family: 'DinMBoldBold';
    font-size: 1.25em;
    position: absolute;
    top: 50px;
}
.product-info h3, .product-info h4, .product-info p {
    color: #5a5748;
    font-size: 1.25em;
    margin: 0;
}
#pw1 .product-info { top: 45px; right: 400px; }
#pw2 .product-info { left: 355px; }
#pw3 .product-info { right: 345px; }
#pw4 .product-info { top: 46px; left: 370px; }
#pw5 .product-info { top: 47px; right: 345px; }
#pw2, #pw3, #pw4 { margin-top: -80px; }
#pw5 { margin-top: -70px; }

.product-item-column {
    float: left;
    height: 600px;
    width: 450px;
}
.product-item-column .product-info {
    margin: 0 auto;
    width: 450px;
    top: 374px;
}
#csomagleszorito-gumikotel { height: 530px; }
#csomagleszorito-gumikotel .product-info {
    left: 56px;
    text-align: left;
    top: 350px;
    width: 270px;
}
#csomagleszorito-gumikotel .product-info h3 { margin-bottom: 1em; }

#szelep-atalakitok { height: 565px; }
#szelep-atalakitok .product-info { top: 0; }
#szelep-atalakitok .product-info h3 { position: absolute; text-align: left; width: 250px; }
#szelep-atalakitok .product-info h3.singo-rovid { left: 210px; top: 185px; }
#szelep-atalakitok .product-info h3.singo-tomloveges { left: 570px; top: 185px; }
#szelep-atalakitok .product-info h3.motorkupos-tomloveges { left: 165px; top: 500px; }
#szelep-atalakitok .product-info h3.motorkupos-menetes { left: 570px; top: 500px; }

#egyeb-termekek { height: 350px; padding-bottom: 2em; }
#egyeb-termekek .product-info { top: 0; }
#egyeb-termekek .product-info h3 { position: absolute; width: 200px; text-align: left; }
#egyeb-termekek .product-info h3.egyeb-markolat { left: 257px; top: 91px; }
#egyeb-termekek .product-info h3.egyeb-autos-fej { left: 530px; top: 275px; }

/* Contact & Google maps
-------------------------------------------------------------- */
.address { font-size: 1.25em; }
.address h2 {
    background: none;
    color: #201f18;
    font-family: 'DinMBoldBold';
    margin-bottom: 1em;
}
.address a {
    color: #201f18;
    text-decoration: none;
}
.address a:hover { text-decoration: underline; }
#gmap { width: 630px; text-align: center; border: 3px solid #5a5748; }

/* Footer
-------------------------------------------------------------- */
footer {
    background: #201f18;
    height: 135px;
}

/* Misc.
-------------------------------------------------------------- */
.center { text-align: center; margin: 0 auto; }