/******************************************
Get CMStream to function with Bootstrap
This CSS appends Bootstrap Styling to CMStream classes
******************************************/

/* GLYPHICONS FONT */
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('/fonts/glyphicons-halflings-regular.eot');
    src: url('/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
        url('/fonts/glyphicons-halflings-regular.woff') format('woff'), 
        url('/fonts/glyphicons-halflings-regular.ttf') 
    format('truetype'), url('/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}


/******************************************
 N A V I G A T I O N 

Selector-Replacements:

Bootstrap:                      CMStream

.nav .navbar-nav                .menu ul
.active                         .menuSelected
ul > li > a                     ul > li > span a

******************************************/

/*Make navbar and module-actions not interfere with Shadowbox*/
.navbar,
.module-content .module-actions {
    z-index: 998;
}


.menu {
    margin: 0 -15px;
}

    .menu ul {
        margin: 7.5px 0;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }

        .menu ul:before, .menu ul:after {
            display: table;
            content: " ";
        }

        .menu ul:after {
            clear: both;
        }

@media (min-width: 768px) {
    .menu ul {
        float: left;
        margin: 0;
    }
}


.menu ul > li {
    position: relative;
    display: block;
}

@media (min-width: 768px) {
    .menu ul > li {
        float: left;
    }
}

.menu ul > li > span a {
    position: relative;
    display: block;
    padding: 10px 15px;
    line-height: 20px;
    color: #777777;
}

@media (min-width: 768px) {
    .menu ul > li > span a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

.menu ul > li > span a:hover, .menu ul > li > span a:focus {
    text-decoration: none;
    color: #333333;
    background-color: transparent;
}

.menu ul > .menuSelected > span a, .menu ul > .menuSelected > span a:hover, .menu ul > .menuSelected > span a:focus {
    color: #555555;
    background-color: #e7e7e7;
}



/*******************************************/
/* S I D E    N A V I G A T I O N */
/*******************************************/
/* First level of nav */
#SideMenu .menu > ul {
    padding-top: 10px;
    padding-bottom: 10px;
    text-shadow: 0 1px 0 #fff;
    background-color: #f7f5fa;
    border-radius: 5px;
    float: none;
    margin: 0;
    display: block;
}

    #SideMenu .menu > ul li {
        float: none;
        display: block;
    }

/* All levels of nav */
#SideMenu .menu ul > li > span a {
    display: block;
    color: #716b7a;
    padding: 5px 20px;
}

#SideMenu .menu ul > li:hover {
    text-decoration: none;
    background-color: #e5e3e9;
    border-right: 1px solid #dbd8e0;
}

#SideMenu .menu ul > .menuSelected > span a,
#SideMenu .menu ul > .menuSelected:hover > span a,
#SideMenu .menu ul > .menuSelected:focus > span a {
    font-weight: bold;
    color: #563d7c;
    background-color: transparent;
    border-right: 1px solid #563d7c;
}

/* Nav: second level (shown on .menuSelected) */
#SideMenu .menu ul .menudropdown ul {
    display: none; /* Hide by default, but at >768px, show it */
    float: none;
    display: block;
}

    #SideMenu .menu ul .menudropdown ul > li > span a {
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 30px;
    }

/* Show and affix the side nav when space allows it */
@media screen and (min-width: 992px) {
    #SideMenu .menu ul > .menuSelected > ul {
        display: block;
    }
}

@media (min-width: 0) and (max-width: 767px) {
    .clear-xs-left {
        clear: left;
    }

    .clear-xs-right {
        clear: right;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .clear-sm-left {
        clear: left;
    }

    .clear-sm-right {
        clear: right;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .clear-md-left {
        clear: left;
    }

    .clear-md-right {
        clear: right;
    }
}

@media (min-width: 1200px) {
    .clear-lg-left {
        clear: left;
    }

    .clear-lg-right {
        clear: right;
    }
}

.clear-all-left {
    clear: left;
}

.clear-all-right {
    clear: right;
}