/* --------------------------------------------------------------------------------------
+
+   Simplified CSS (kinda) framework - v1.2
+   http://www.simplifiedstudio.com
+
+   = Firange
+
-------------------------------------------------------------------------------------- */

/*
= IMPORTING STUFF AND SETTING DEFAULT STYLES
-------------------------------------------------------------------------------------- */
@import url("reset.css");
@import url("jquery.fancybox-1.3.1.css");

/*
= MAIN ELEMENTS ---------------- */
body{ background: #121212;}
    body.home{ background: url('../images/background.png') 50% 0% no-repeat;}
    body.kontakt{ background: url('../images/background-pattern.png');}
#overlay{ background: url('../images/dots-overlay.png'); width: 100%; height: 100%; position: fixed; overflow: hidden; display: block; top: 0; left: 0;}

/*
= NAVIGATION ---------------- */
div#header{ background: url('../images/navigation.png') top left no-repeat; display: block; position: fixed; top: 0; height: 70px; padding-bottom: 17px; width: 100%; z-index: 501;}
    div#header h1{ margin: 0; padding: 0;}
    div#header h1 a{ display: block; width: 210px; height: 70px; text-indent: -9999px; float: left;}

    ul#menu{ background: url('../images/nav-separator.png') top right no-repeat; padding-right:2px; display: block; float: left;}
        ul#menu > li, ul#menu > li a{ float: left; display: block;}
        ul#menu li a{ height: 70px; line-height: 70px; padding: 0 30px; color: #0c0c01; text-decoration: none; text-shadow: 0 1px #dde281; font-weight: bold; font-size: 13px; background: url('../images/nav-separator.png') top left no-repeat;}
            ul#menu li a:hover, ul#menu li:hover, ul#menu li.sfHover, ul#menu li a.current{ background: url('../images/nav-hover.png') top left no-repeat;}
            ul#menu li a:active{ background: url('../images/nav-hover.png') bottom left no-repeat;}

    ul#menu li ul{ display: none;}
    ul#menu li ul{ position: absolute; top: 70px; padding-top: 2px;}
        ul#menu li ul li, ul#menu li ul li a{ display: block; float: left;}
        ul#menu li ul li, ul#menu li ul li:hover{ background: none;}
        ul#menu li ul li a{ display: block; height: 40px; line-height: 40px; font-size: 12px; padding: 0 15px; background: url('../images/nav-hover.png') -2px 0px no-repeat !important; margin-right: 2px; box-shadow: 0px 0px 3px #000; -webkit-box-shadow: 0px 0px 3px #000; -moz-box-shadow: 0px 0px 3px #000;}
            ul#menu li ul li a:hover{ color: #404309;}

/*
= CONTENT ---------------- */
#content{ position: relative; width: 960px; margin: 0 auto; padding: 10% 0 50px 0; height: 100%;}
#content h2{ display: inline-block; color: #a5ab27; font-size: 60px; line-height: 78px; margin-bottom: 50px;}

    div#text{ background: url('../images/text-overlay.png'); padding: 30px; color: #fff; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;}
        div#text div{ width: 430px;}
        div#text a{ font-weight: bold; color: #fff; position: relative;}
            div#text a:hover{ color: #f3f6b1;}
            div#text a:active{ top: 1px;}
            div#text div.left{ margin-right: 10px;}
            div#text div.right{ margin-left: 10px;}
    div#about{ float: left; width: 560px; background: url('../images/text-overlay.png'); padding: 30px; color: #fff;}
        div#about ul{ margin-left: 1.2em; list-style-type: square;}

    div#text dl{}
        div#text dl dt{ clear: both; float: left;}
        div#text dl dd{ float: left; margin-left: 10px;}

    .home div#text{ margin-top: 200px;}
    div#text ul{ list-style: disc;}
        div#text ul li{ }

    div#text ul.col-2{ list-style: none; float: right;}
         div#text ul.col-2 li{ width: 220px; float: left; display: block;}

        a#prev, a#next{ position: absolute; z-index: 100; background: url('../images/gallery-arrows.png') no-repeat; display: block; width: 40px; height: 69px; text-indent: -99999px; top: 70px;}
            a#prev{ background-position: top left;}
                a#prev:hover{ background-position: bottom left;}
            a#next{ background-position: top right;}
                a#next:hover{ background-position: bottom right;}

    /* Gallery -------------*/
    div#gallery{ width: 960px; position: relative; background: transparent !important;}
    div#slider{ background: transparent !important;}
    div#gallery ul{ padding: 0; list-style: none; background: transparent !important;}
        div#gallery ul li{ float: left; padding: 0; margin: 0 5px; background: transparent !important;}
        div#gallery ul li a{ float: left; display: block; width: 184px; height: 210px; position: relative; z-index: 1; overflow: hidden; box-shadow: 0px 0px 5px #000; -webkit-box-shadow: 0px 0px 5px #000; -moz-box-shadow: 0px 0px 5px #000;}
            div#gallery ul li a div.galleryOverlay{ width: 184px; height: 210px; display: block; position: absolute; z-index: 10; background: url('../images/gallery-overlay.png') no-repeat; top: 0; left: 0;}

                div#gallery ul li.first, div#gallery ul li:first-child{ margin-left: 0 !important;}
                div#gallery ul li.last, div#gallery ul li:last-child{ margin-right: 0 !important;}

            div#gallery ul li a span{ width: 172px; height: 198px; display: block; position: absolute; z-index: 20; border: 16px solid #a5ab27; top: -10px; left: -10px;}
            div#gallery ul li a img{ padding: 6px; display: block; height: 198px; min-width: 172px;}

            div#gallery a#prev{ left: -20px;}
            div#gallery a#next{ right: -20px;}

        #paginator{ position: absolute; width: 100%; text-align: center; bottom: -50px;}
            #paginator a{ text-indent: -9999px; display: inline-block; background: url('../images/paginator.png') top left; width: 15px; height: 15px; margin: 0 6px;}
            #paginator a.activeSlide{ background-position: bottom left;}

    /* References -------------*/
    #reference{ position: relative; background: transparent;}
    #referencHolder ul{ background: transparent; }
        #referencHolder ul li{ display: block; }
        #referencHolder ul li h3{ display: inline-block; color: #a5ab27; font-size: 25px; line-height: 28px; margin-bottom: 10px;}

    #reference a#prev, #reference a#next{ top: 220px;}
        #reference a#prev{left: 0;}
        #reference a#next{ left: 70px;}

    /* Accordion -------------*/
    div#accordion{ display: block; width: 320px !important; float: right; background: url('../images/text-overlay.png'); color: #fff;}
    div#accordion h3{ display: block; font-size: 12px; line-height: 28px; padding-left: 40px; background: #000 url('../images/accordion-expand.gif') 12px 50% no-repeat; margin-bottom: 1px;}
        div#accordion h3.ui-state-active{ background: #000 url('../images/accordion-collapse.gif') 12px 50% no-repeat !important;}

        div#accordion h3 a{ color: #fff; text-decoration: none;}
        div#accordion h3 a:hover{ color: #a5ab27;}

        div#accordion div{ padding: 5px 30px;}

/*
= FORM ---------------- */
form#contact{ position: relative; float: left; width: 430px; margin-right: 10px;}
    form#contact div.fieldHolder{ width: 430px; height:38px; display: block; position: relative; margin-bottom: 10px;}
    form#contact div.fieldHolder label, form#contact div.textHolder label{ color: #999; font-size:13px; font-weight:bold; line-height: 40px; width: 110px;}
    form#contact div.fieldHolder input{ border: 1px solid #333; background: #121212; font-size: 13px; color: #333; font-weight:bold; position: absolute; height: 32px; line-height: 32px; display: block; top: 12px; top: 2px; right: 0; width: 310px; padding: 0 5px; color: #fff;}
    form#contact div.textHolder{ width: 430px; height: 140px; position: relative; }
        form#contact div.textHolder textarea{ border: 1px solid #333; width: 310px; height: 126px; position: absolute; font-size: 13px; color: #333; background: #121212; right: 0; padding: 5px; color:#fff; top: 2px;}
    form#contact div.input-none{ display: none; overflow: hidden;}
            /*
            + Input and Textareas */
            form#contact div.fieldHolder:hover label, form#contact div.textHolder:hover label, form#contact div.fieldHolder.focus label, form#contact div.textHolder.focus label{ color: #999;}

            /*
            + Inputs */
            form#contact div.fieldHolder:hover input, form#contact div.fieldHolder.focus input{ border-color: #666;}

            /*
            + Textareas */
            form#contact div.textHolder:hover textarea, form#contact div.textHolder.focus textarea{ border-color: #666;}

    /*
    + Buttons */
    form#contact button{ float: right; border: 1px solid #a5ab27; background: #a5ab27; font-size:13px; color: #fff; font-weight: bold; text-shadow: 0 1px #575b0b;  line-height: 28px; padding: 0 10px; margin-top: 18px; cursor: pointer; height: 28px;}
        form#contact button:hover{ color: #000;}

    /*
    + Feedback */
    div#feedback{ position: absolute; bottom: -5px; left: 108px; width: 250px !important;}
        #feedback p { -moz-border-radius: 2px; -webkit-border-radius: 2px; font-size: 11px; margin: 0; display: inline-block;}
        .error, .notice, .success { padding:0 .8em; height: 34px; line-height: 34px; margin-bottom:1em;border:2px solid #ddd;}
        .error {color:#9a2c2c;border-color:#4b1010;}
        .notice {color:#514721;border-color:#FFD324;}
        .success {color:#75a432;border-color:#436414;}

    a.map{ display: block; width: 180px; height: 180px; background: url('../images/mapa.png') no-repeat; text-indent: -9999px; border: 4px solid #a5ab27;}
        a.map:hover{ background-position: bottom left;}