/* very small devices (smart phones, 767px and down) */
@media (max-width: 767px) {
    
    img {
        width: 100%;
        height: auto;
    }
    
    #logo {
        
    }
    
    .navbar {
        min-height: 5px;
    }
    
    #left .main ul {
            padding: 0;
            margin-bottom: 20px;
    }
    
    #left .main > li {
        text-align: center;
    }
    
    #left .main > li > a {
            font-size: 15px;
            padding: 5px;
            display: block;
    }
    
    #left ul.sub {
            overflow: auto;
            text-align: center;
    }

    #left ul.sub li {
            display: inline-block;
            margin: 0 4px 4px 0;
    }
    
    #left ul.sub li a {
            display: block;
            font-size:10px;
            color:black;
            line-height:21px;
            font-weight:bold;
            padding: 5px 10px;
            background-color: #d2d9df;
    }
    
     #left ul.sub li a:hover,
     #left ul.sub li a.selected {
            text-decoration: none;
            color:white;
            text-shadow:0 -1px black;
            background-color: #487091 !important;
    }
    
    .hide-mobile {
        display: none;
    }
    
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    .mobile-only {
        display: none !important;
    }
    
    #contact {
        display: block;
    }
    
    #toplinks {
        display: block;
    }
    
    #toplinks li {
        display: block;
        width: 74px;
        float: left;
    }
    
    .navbar-collapse {
        padding: 0 !important;
    }
    
    .nav {
	margin:0;
	padding:0;
	list-style:none;
    }

    .nav li {
            margin:0 4px 0 0;
            font-size:10px;
            color:black;
            line-height:21px;
            font-weight:bold;
    }
    
    .nav a {
        border-bottom: 1px solid #89B697;
    }

    .nav a:link, .nav a:visited {
            color:black;
            border:1px solid white;
            padding:4px 8px;
            background-color:#d2d9df;
            border-bottom-color:#89B697;
    }

    .nav a:hover {
            color:white;
            background-color: #487091 !important;
            text-shadow:0 -1px black;
            border-bottom-color:#006;
    }

    .nav a.selected {
            color:white;
            background-color: #487091 !important;
            text-shadow:0 -1px black;
            border-bottom-color:#006;
    }
    
    #left {
            border-right:1px solid #ccc;
    }
    
    #left.werkshows-left ul.sub {
        display: block !important;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    
}