﻿@charset "utf-8";


/*#navigation-panel {
	margin:0 1.6667em 1.6667em 1.6667em;
	overflow:hidden;
}*/


#navigation-panel { overflow: visible; position: relative; }

/* main image box */
#main-image-box { margin: 0; width: 970px; height: 476px; position: relative; }
    /* container Styles */
    #main-image-box .container { }

        #main-image-box .container h1 { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-size: 24px; border: none; padding: 2px 0; }

        #main-image-box .container p { display: none; margin-top: 150px; position: absolute; bottom: 40px; width: 430px; }

        #main-image-box #alto { background-image: url("/images/alto.jpg"); clip: rect(0px 136px 340px 0px); }

    #main-image-box #elefant { background-image: url("/images/01.png"); clip: rect(0px 136px 340px 0px); }

        #main-image-box #elefant .container { }

            #main-image-box #elefant .container h1 { color: #fff; }

            #main-image-box #elefant .container span { background-color: #fff; background: rgba(255, 255, 255, 0.8); color: #000; }

    #main-image-box #giraffe { background-image: url("/images/02.png"); clip: rect(0px 273px 340px 138px); }

        #main-image-box #giraffe .container { margin-left: 45px; width: 430px; }

            #main-image-box #giraffe .container h1 { margin-left: 118px; color: #000; }

            #main-image-box #giraffe .container span { background-color: #000; background: rgba(0, 0, 0, 0.8); color: #fff; }

    #main-image-box #loewe { background-image: url("/images/03.jpg"); clip: rect(0px 410px 340px 275px); }

        #main-image-box #loewe .container { margin-left: 70px; }

            #main-image-box #loewe .container h1 { margin-left: 240px; color: #fff; }

            #main-image-box #loewe .container span { background-color: #fff; background: rgba(255, 255, 255, 0.8); color: #000; }

    #main-image-box #zebra { background-image: url("/images/04.png"); clip: rect(0px 550px 340px 412px); }

        #main-image-box #zebra .container { margin-left: 95px; }

            #main-image-box #zebra .container h1 { margin-left: 351px; color: #000; }

            #main-image-box #zebra .container span { background-color: #fff; background: rgba(255, 255, 255, 0.8); color: #000; }


    #main-image-box #new { background-image: url("/images/clip_05.02.png"); clip: rect(0px 550px 340px 412px); }

        #main-image-box #new .container { margin-left: 95px; }

            #main-image-box #new .container h1 { margin-left: 351px; color: #000; }

            #main-image-box #new .container span { background-color: #fff; background: rgba(255, 255, 255, 0.8); color: #000; }


    #main-image-box #fabia { background-image: url("https://p.1cm.com.mk/contentdata/media/37/skoda_fabia_front.jpg"); clip: rect(0px 550px 340px 412px); }

        #main-image-box #fabia .container { margin-left: 95px; }

            #main-image-box #fabia .container h1 { margin-left: 351px; color: #000; }

            #main-image-box #fabia .container span { background-color: #fff; background: rgba(255, 255, 255, 0.8); color: #000; }




    #main-image-box .clip { width: 970px; height: 476px; position: absolute; top: 0; left: 0; display: block; background-color: #fff; background-position: center top; background-repeat: no-repeat; z-index: 1; cursor: pointer; }



    #main-image-box .facets:hover { clip: rect(0px 550px 340px 0px) !important; }

        #main-image-box .facets:hover .container { display: block; }

    #main-image-box .facets:hover { z-index: 10 !important; }

        #main-image-box .facets:hover .container p { display: block; }


/* other Styles */
#text a { color: #000; font-style: italic; text-decoration: underline; }

    #text a.on { background-color: yellow; padding: 2px 2px; }

a.wikipedia { background-color: yellow; padding: 0 2px; text-decoration: none; font-style: italic; white-space: nowrap; }

.clip .container a.infotext { position: absolute; bottom: 14px; display: none; cursor: pointer; width: 190px; }

a.infotext span.i { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-weight: bold; padding: 1px 7px 1px 7px; font-size: 18px; width: 10px; height: 16px; background-color: #000 !important; color: #fff !important; border: 1px solid #fff; cursor: pointer; position: relative; top: 2px; }

a.infotext span.text { display: none !important; padding: 0 2px; }

a.infotext:hover span.text { display: inline !important; }
