/********** Test Page ****************/
.Test {
    background-color:cadetblue;
}

.FraternityLabCSSTest {
    background-color:blue;
    color:white
}
/*************************************/
body {
}
/***** Side Bar *******/
#wrapper {
    padding-left: 83px;
   /* (20) + (50) + (13) = 83*/ 
   transition: all .4s ease 0s;
   height: 100%;
}

#wrapper.active { /* active is the left nav expand */
    padding-left: 283px;
    /*(20) + (250) + (13) = 283*/;
}

#wrapper.active #sidebar-wrapper {
    left: 130px; /* orginal: 150px control the width of the whole left nav  */
    width: 250px;
}

#wrapper.active #sidebar-wrapper .MenuItemText {
    display: inline; /* orginal: 70px,  This is the postiion that the left nav after it collapse */
    width: 150px;
}

#sidebar-wrapper {
    margin-left: -130px; /* orginal: -150px, move the whole left nav, -neg small no go to left and big no go to right  */
    left: 130px; /* orginal: 70px,  This is the postiion that the left nav after it collapse */
    width: 50px; /* orginal: 150px, if want to change the whole sidebar width, change width in sidebar-wrapper, sidebar-nav
                                                                and sidebar_menu   */
    background: rgba(216,216,216, 1); /* orginal: #222 */
    position: absolute;
    left:0px;
    top: -20px;
    height: 100%;
    transition: all .4s ease 0s;
}

#wrapper #sidebar-wrapper .MenuItemText {
    display: none;
}

#wrapper.active .sidebar-nav {
    display: block;
    float: left;
    width: 250px; /* orginal: 150px, single menu item width */
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-nav {
    display: block;
    float: left;
    width: 50px; /* orginal: 150px, single menu item width */
    list-style: none;
    margin: 0;
    padding: 0;
}

#page-content-wrapper {
    padding-left: 0;
    margin-left: 0;
    width: 100%;
    height: auto;
}

#wrapper.active #sidebar_menu li a,
#wrapper.active .sidebar-nav li a {
    color: rgba(0,0,0,0.9); /* orginal: #999, menu header width */
    display: block;
    float: left;
    text-decoration: none;
    width: 250px; /* orginal: 150px, menu header width */
    background: rgba(216,216,216,1); /*orginal: #252525*/
    border-top: 1px solid rgba(232, 238, 234, 1); /*orginal: 1px solid #373737*/
    border-bottom: 1px solid rgba(232, 238, 234, 1); /*orginal: 1px solid #1A1A1A*/
    -webkit-transition: background .5s;
    -moz-transition: background .5s;
    -o-transition: background .5s;
    -ms-transition: background .5s;
    transition: background .5s;
}

#sidebar_menu li a,
.sidebar-nav li a {
    color: #978282; /* orginal: #999, */
    display: block;
    float: left;
    text-decoration: none;
    width: 50px; /* orginal: 150px, menu header width */
    background: rgba(232, 238, 234, 1); /*orginal: #252525*/
    border-top: 1px solid rgba(232, 238, 234, 1); /*orginal: 1px solid #373737*/
    border-bottom: 1px solid rgba(232, 238, 234, 1); /*orginal: 1px solid #1A1A1A*/
    -webkit-transition: background .5s;
    -moz-transition: background .5s;
    -o-transition: background .5s;
    -ms-transition: background .5s;
    transition: background .5s;
}

.sidebar_name {
    padding-top: 25px;
    color: #978282; /* orginal: #fff */
    opacity: .7;
}

.sidebar-nav li {
    line-height: 40px;
    text-indent: 20px;
}

.sidebar-nav li a {
    color: #978282; /* orginal: #999 */
    display: block;
    text-decoration: none;
}

.sidebar-nav li a:hover {
    color: #978282; /* orginal: #fff, menu header width */
    background: rgba(232, 238, 234, 1); /* orginal: rgba(255,255,255,0.2), menu header width */
    text-decoration: none;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    line-height: 60px;
    font-size: 18px;
}

.sidebar-nav > .sidebar-brand a {
    color: #978282; /* orginal: #999 */
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #978282; /* orginal: #fff, menu header width */
    background: rgba(232, 238, 234, 1); /* orginal: #none */
}

#main_icon {
    float: right;
    padding-right: 18px; /* orginal: 27px, postion of the first icon in menu */
    padding-top: 20px;
}

.sub_icon {
    float: right;
    padding-right: 18px; /* orginal: 27px, postion of the sub icon in menu */
    margin-top: 8px;
    margin-bottom: 8px;
}

#wrapper.active .sub_icon {
    float: right;
    padding-right: 18px; /* orginal: 27px, postion of the sub icon in menu */
    padding-top: 10px;
}

.content-header {
    height: 65px;
    line-height: 65px;
}

.content-header h1 {
    margin: 0;
    margin-left: 20px;
    line-height: 65px;
    display: inline-block;
}


@media (max-width:767px) {
    #wrapper {
        padding-left: 70px;
        transition: all .4s ease 0s;
    }

    #sidebar-wrapper {
        left: 70px;
    }

    #wrapper.active {
        padding-left: 150px;
    }

    #wrapper.active #sidebar-wrapper {
        left: 150px;
        width: 150px;
        transition: all .4s ease 0s;
    }
}
/****************************************************/