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

	Project:		Slate Admin 2.0
	Version:		1.0
	Last change:	07/20/2012
	Assigned to:	Rod Howard (rh)


[Table of contents]

	1. Max Width: 767px
	2. Max Width: 979px
	3. Min Width: 1200px

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

/*------------------------------------------------------------------
[1. Max Width: 767px]
*/

@media (max-width: 767px) {

    #nav .nav > li.nav-icon > a > span {
        display: inline;
    }

    .widget-accordion .collapse.in {
        height: auto;
    }

    .widget.widget-accordion .accordion {

    }

    .widget .widget-toolbar .pull-left,
    .widget .widget-toolbar .pull-right {
        float: none;

        margin-bottom: 1.5em;

        text-align: left;
    }

    .widget .widget-toolbar [class^="pull-"]:last-child {
        margin-bottom: 0;
    }

    .widget .widget-tabs .nav-tabs {
        padding-right: 1em;
        padding-left: 1em;
    }

    .widget .widget-tabs .nav-tabs > li {
        float: none;

        margin-bottom: .35em;
    }

    #info-menu {
        width: 250px;
    }

    #header .container {
        height: 73px;
        margin: 0 -20px;
    }

    #header {

    }

    #header h1 {
        width: 40%;
        line-height: 0;
    }

    #nav .container {

        margin: 0 -20px;

        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
    }

    #content {
        margin-right: -5px;
        margin-left: -5px;
    }

    #info-menu {
        position: relative;

        display: none;

        color: #333;
    }

    #info-menu .avatar img {
        padding: 2px;

        border: 1px solid #CCC;
    }

    #info #info-trigger {

        display: block;

        width: 100%;

        text-align: right;
    }

    #info-menu {
        background: white;
        position: absolute;
        right: -7px;
        top: 130%;

        padding: 12px;

        z-index: 101;

        background-color: white;
        border: 1px solid #CCC;
        border: 1px solid rgba(0, 0, 0, 0.2);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
    }

    #info-menu::before {
        content: '';
        display: inline-block;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #CCC;
        border-bottom-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        top: -7px;
        right: 9px;
    }

    #info-menu::after {
        content: '';
        display: inline-block;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid white;
        position: absolute;
        top: -6px;
        right: 10px;
    }

    #footer {
        margin-right: -5px;
        margin-left: -5px;
    }

    div.dataTables_paginate {
        float: none;

        margin-top: 1em;
    }

    div.dataTables_filter label {
        float: none;

        margin-top: 1em;
    }

    .widget-table .dataTables_wrapper .row .span6 {
        float: none;

        width: 100%;
    }

}

/*------------------------------------------------------------------
[2. Max Width: 979px]
*/

@media (max-width: 979px) {

    body.nav-fixed {
        padding-top: 0;
    }

    body.nav-fixed #header {
        visibility: visible;
    }

    body.nav-fixed #nav {
        position: static;
        top: 0;
        left: 0;

        margin-left: 0;

    }

    #nav .container {

        text-align: center;
    }

    #nav .btn-navbar i {
        color: #FFF;

        font-size: 18px;

    }

    #nav .btn-navbar {
        display: block;
    }

    #nav .btn-navbar:hover {
        text-decoration: none;
    }

    #nav .nav {
        width: 100%;
        padding: .5em 0;
        margin-left: 0;

        text-align: left;
    }

    #nav .nav > li {
        float: none;

        padding: 0 1em;

        display: block;
    }

    #nav .nav > li > a {
        display: block;
    }

    #nav .nav > li > a:hover,
    #nav .nav > li.active > a {
        background: transparent;

        border: 1px solid transparent;

        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    #nav .container {
        height: auto;
    }

    #nav .nav .dropdown-menu > li > a {
        color: #FFF;
    }

    #nav .nav .dropdown-menu > li > a:hover {
        background: transparent;
    }

    #nav .nav > li.dropdown > .dropdown-menu::before,
    #nav .nav > li.dropdown > .dropdown-menu::after {
        display: none;
    }

    #nav .dropdown-menu .sub-menu {
        left: 0;
        position: static;
        top: 0;
        visibility: visible;

        z-index: 1001;
    }

    #nav .nav > li.dropdown > .dropdown-menu > li.dropdown > .sub-menu::before {
        display: none;
    }

    #nav .navbar-search {

        top: 0;
    }

    #nav .navbar-search .search-query {

        width: 96%;

        padding: 2;

    }

    #nav .navbar-search .search-btn {
        top: 14px;
        right: 5px;
    }

    .nav-collapse .nav > li > a,
    .nav-collapse .dropdown-menu a {
        font-weight: 600;
    }

    .nav-collapse .navbar-form, .nav-collapse .navbar-search {
        padding: 9px 0 0;
    }

    .widget-tabs .nav-tabs > li > a {
        font-size: 12px;
        color: #333;
    }

    .item-row {
        display: block;

        width: auto;
    }

    .item-label {
        display: block;
        padding-left: 15px;

        font-weight: 600;
    }

    .item-content {
        display: block;

        padding: 0 15px;
        margin-top: 1.5em;
    }
}

/*------------------------------------------------------------------
[3. Min Width: 1200px]
*/
@media (min-width: 1200px) {

    body.nav-fixed #nav {
        position: fixed;
        top: 0;
        left: 50%;

        margin-left: -585px;

    }

}
