@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

/*
        Dreamweaver Fluid Grid Properties
        ----------------------------------
        dw-num-cols-mobile:		5;
        dw-num-cols-tablet:		8;
        dw-num-cols-desktop:	12;
        dw-gutter-percentage:	15;
        
        Inspiration from "Responsive Web Design" by Ethan Marcotte 
        http://www.alistapart.com/articles/responsive-web-design
        
        and Golden Grid System by Joni Korpi
        http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

@media only screen and (max-width: 480px) {

    .gridContainer {
        margin-left: auto;
        margin-right: auto;
        width: 88.626%;
        padding-left: 1.1869%;
        padding-right: 1.1869%;
    }

    #ozadje { display:none; }

    #logo { width:100%; }
    .main-menu { position:relative; text-align: center;padding: 5% 0; }
    .main-menu > ul > li { margin-bottom: 5px; }
    .cat_warning { color: #fff; }


    #header {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    }

    #left {
        clear: none;
        float: left;
        margin-left: 0%;
        width: 100%;
        display: block;
        margin-top: 4%;
    }

    #bottom {
        clear: none;
        float: left;
        margin-top: 6%;
        width: 100%;
        display: block;
    }

    #left_player {
        clear: none;
        float: left;
        width: 100%;
        display: block;
    }

    #center {
        clear: both;
        float: left;
        margin-left: 0;
        margin-bottom: 20px;
        width: 100%;
        display: block;

    }

    #center_thumbs {
        clear: both;
        float: left;
        margin-left: 1.3%;
        width: 100%;
        display: block;
    }

    .right {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
        margin-top: 0.6%;
    }

    #footer {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    }

    .pancek-main-menu {
        margin:0px 0 30px 0;
        float:left;
        width:100%;
        text-align: center;
    }
    .pancek-main-menu ul {
        position:static !important;
        padding:0 !important;
    }
    .pancek-main-menu li {
        box-shadow:none !important;
        border:0 !important;
        border-bottom:1px solid #d9d9d9 !important;
        display:block !important;
        float:none !important;
        margin:0 !important;
        background: none !important;
    }
    .pancek-main-menu li a {
        color: #015080;
        line-height: 33px;
        padding: 0 0;
        text-decoration: none;
    }
    .pancek-main-menu li a:hover {
        color: #fff;
    }
    .pancek-main-menu li ul {
        display:none !important;
    }
    .pancek-main-menu li:hover > ul {
        display:block !important;
    }
    .scroll-pane-arrows
    {
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    div.fullwidth .stolpec { width: 100% !important;}

    div.login_right div.albumi, .mobile_hide, li.mobile_hide {
        /*	display:none;*/
    }
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) and (max-width: 768px) {

    .gridContainer {
        width: 97.5%;
        /*width: 91.4836%; */
        padding-left: 0.7581%;
        padding-right: 0.7581%;
    }

    #header {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    }

    #logo { width:76%; }
    .main-menu {
        bottom: 34px;
        left: 122px;
        position:relative;
    }

    .main-menu > ul > li {
        float:left;
        margin-right:10px;
    }

    .cat_warning {
        color: #fff;
        margin: 0% 2.5% 1% 1.5%;
    }  

    #left {
        clear: none;
        float: left;
        /*margin-left: 1.6574%;*/
        width: 100%;
        display: block;

    }
    #bottom {
        clear: none;
        float: left;
        /*margin-left: 1.6574%;*/
        width: 100%;
        display: block;

    }
    #left_player {
        clear: none;
        display: block;
        margin: 10px auto;

    }
    #center {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    }

    #center_thumbs {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    }

    .right {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;

    }
    #footer {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    }

    navigacija a:hover {
        color: #fff;
    }

    .pancek-main-menu {
        float: right;
        margin-top: 9px;
        position: relative;
        width: 100%;
    }
    .pancek-main-menu ul {
        margin:0;
    }
    .pancek-main-menu li ul {
        padding-top:2px;
        left:-2px;
    }
    .pancek-main-menu li {
        white-space:nowrap;
        display:block;
        position:relative;
        margin:0;
        padding:0;
        z-index:100;
    }
    .pancek-main-menu a {
        color: #015080;
        font-family: "Helvetica neue",Arial,sans-serif;
        font-size: 14px;
        font-weight: bold;
        margin-right: 8px;
        position: relative;
        text-decoration:none;

    }
    .pancek-main-menu a:hover {
        text-decoration:none;
        color:#015080;
    }

    .pancek-main-menu > ul > li {
        float:left;
        margin-right:10px;
    }
    .pancek-main-menu > ul > li:last-child {
        margin-right:0;
    }
    .pancek-main-menu li ul {
        display:none;
        position:absolute;
        top:100%;
        z-index:100;
    }
    .pancek-main-menu li:hover > ul {
        display:block;
    }
    .scroll-pane-arrows
    {
        width: 100%;
        height: 402px;
        overflow: auto;
    }
    .desktop_hide {
        display:none;
    }
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
    .gridContainer {
        width: 100%;
        max-width: 960px;
        padding-left: 0.4891%;
        padding-right: 0.4891%;
        margin: auto;
        position:relative;
    }

    #header {
        clear: both;
        float: left;
        margin-left: 0;
        display: block;
    }

    #logo { width:100%; height: 100px }
    .main-menu {
        bottom: 34px;
        left: 122px;
        position:relative;
    }

    .main-menu > ul > li {
        float:left;
        margin-right:10px;
    }

    #left {
        clear: both;
        float: left;
        margin-left: 0;
        width: 18.5%;
        display: block;


    }

    #bottom {
        display: block;
        /*margin-right: 4%;*/
        margin-top: 0.5%;
    }

    .cat_warning {
        margin: 0% 2.5% 1% 1.5%;
    }

    #left_player {
        clear: both;
        display: block;
        float: left;
        margin-left: 1.5%;
        width: 30%;
        margin-top: 0px;
        
    }
    #left_player.vstopna_left{
        margin-top: 25px;  
    }
    #right_soulfly.right{
        margin-top: 25px;  
    }
    .naprave_front{
        margin-top: 50px;
    }

    .dash_left { 
        margin-top: 100px;
        margin-bottom: 18px; 
        bottom: 30px;
    }

    .dash_right {
        position: absolute;
        bottom: 30px;
        right:20px;
    }
    div.gridContainer .dash_center  {
        position: absolute;
        left:32%;
        bottom: 30px;
    }
    .login_center { margin-top: 20px; }
    .login_right { margin-top: 20px; }

    #center {
        clear: none;
        display: block;
        float: left;
        margin-left: 3%;
        width: 30%;
    }
    #center_thumbs {
        clear: none;
        display: block;
        float: right;
        width: 67.7%;
        margin-top: 0.7%;
    }

    .right {
        clear: none;
        display: block;
        float: left;
        margin-left: 3%;
        margin-bottom:0%;
        width: 30.5%;
    }

    #footer {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    }

    .pancek-main-menu {
        float: right;
        position: relative;
        width: 100%;
        margin-top: 12px;
        margin-bottom: 10px
    }
    .pancek-main-menu ul {
        margin:0;
    }
    .pancekmain-menu li ul {
        padding-top:2px;
        left:-2px;
    }

    .pancek-main-menu li {
        white-space:nowrap;
        display:block;
        position:relative;
        margin:0;
        padding:0;
        z-index:100;
    }
    .pancek-main-menu a {
        color: #015080;
        font-family: "Helvetica neue",Arial,sans-serif;
        font-size: 14px;
        font-weight: bold;
        margin-right: 8px;
        position: relative;
        text-decoration:none;

    }
    .pancek-main-menu a:hover {
        text-decoration:none;
        color:#015080;
    }

    .pancek-main-menu > ul > li {
        float:left;
        margin-right:10px;
    }
    .pancek-main-menu > ul > li:last-child {
        margin-right:0;
    }
    .pancek-main-menu li ul {
        display:none;
        position:absolute;
        top:100%;
        z-index:100;
    }
    .pancek-main-menu li:hover > ul {
        display:block;
    }

    .scroll-pane-arrows
    {
        width: 100%;
        height: 402px;
        overflow: auto;
    }

    .desktop_hide {
        display:none;
    }
}