/************************************/
/******          MULAR         ******/
/************************************/
#logo.min {
    position:relative;
    max-width:300px
}

/************************************/
/******         WRAPPER        ******/
/************************************/
#wrapper {
    position:relative;
    z-index:0
}

#mask {
	background-color:rgba(0,0,0,0.50);
    position:absolute;
    z-index:49
}

.slide .toggler {
    right:85%!important
}

.slide #sidebar {
    right:0!important
}

.slide #chapter-menu {
    right:85%!important
}

.slide #wrapper {
    left:-85%
}

/************************************/
/******     NAV MENU - MURAL   ******/
/************************************/
#mural.min .navmenu {
    float:right;
    padding:0 25px 0 3px;
    margin-top:15px;
    margin-right:25px;
    font-size:18px
}

#mural.min .navmenu, #mural.min .navmenu a {
    color:#fff
}

#mural.min .navmenu a:hover{
	color:#f45269
}

#mural.min {
    min-height:20%;
    height:20%;
    background:url(../img/HomepageMural/mural-condensed.png) no-repeat center center;
    -webkit-background-size:100% auto!important;
    -moz-background-size:100% auto!important;
    -o-background-size:100% auto!important;
    background-size:100% auto!important
}

#logo.min img {
    width:25%;
    min-width:150px;
    margin:15px
}

/************************************/
/******      CHAPTER MENU      ******/
/************************************/
#chapter-menu {
    text-align:right;
    z-index:5;
    width:100%
}

.chapter {
    text-align:left;
    padding:5px 0
}

.glyphicon.glyphicon-chevron-down {
    font-size:30px;
    padding:5px
}

.container.primary-font,#chapters a {
    margin:0 auto;
    line-height:40px;
    vertical-align:middle
}

a .glyphicon-chevron-down {
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg)
}

a.collapsed .glyphicon-chevron-down {
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg)
}

/************************************/
/******    BREADCRUMBS STYLE   ******/
/************************************/
.breadcrumb.style {
    border-radius:0;
    border:1px solid #d2d2cd;
    vertical-align:middle;
    margin-top:20px
}

.breadcrumb.style a {
    text-align:justify
}

.breadcrumb.style li:last-child a {
    color:#00AACD
}

/************************************/
/******         SIDEBAR        ******/
/************************************/
#sidebar {
    border:1px solid #d2d2cd;
    margin:20px 0 0;
    z-index:20;
    overflow-y:scroll
}

#sidebar .panel-heading {
    border-radius:0
}

#sidebar .panel-body {
    background:#f2f3ed;
    padding:0
}

#sidebar .panel-title {
    padding:10px 0;
    border-bottom:none
}

#sidebar .panel-title h3 {
    margin-right:10px
}

#sidebar .active {
    font-weight:700;
    font-style:italic
}

#sidebar .sidebar-group {
    border:1px solid #d2d2cd;
    margin:20px 0 0
}

.panel .panel-heading .glyphicon {
    margin-left:10px
}

#sidebar .panel {
    -webkit-box-shadow:none
}

/************************************/
/******    NAV MENU - SIDEBAR  ******/
/************************************/
.navmenu {
    color:gray;
    font-size:16px
}

#sidebar .navmenu {
    background:#EEE;
    padding:14px;
    text-align:center;
    color:#a4a4a4
}

#sidebar .navmenu a {
    color:#949494;
    margin: 0 15px 0 15px;
}

#sidebar .navmenu a:hover {
    color:grey
}

/************************************/
/******         TOGGLER        ******/
/************************************/
.toggler {
    font-size:20px;
    border-radius:5px 0 0 5px;
    height:100px;
    width:50px;
    position:fixed;
    z-index:50
}

.toggler:focus {
    outline:none
}

/************************************/
/******     CONTENT STYLING    ******/
/************************************/
.col-md-8,.col-sm-8 {
    float:right
}

.content-block {
    z-index:1;
    border:1px solid #d6d7d1;
    background:#f2f3ed;
    margin-bottom:15px
}

.content-block-title h1 {
    margin-top:0;
    font-size:30px
}

.content-block-body img {
	max-width: 100%!important;
	text-align: center;
}

.content-block-title,.content-block-body {
    padding:15px
}

/************************************/
/******      Enviromental      ******/
/************************************/
#sidebar .panel-heading,#sidebar ol,#sidebar a,.breadcrumb.style a,.content-block-title h1,.content-block-body {
	color: #7a7b77;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#sidebar,#sidebar .panel-heading:nth-child(odd),.breadcrumb.style,.content-block-title {
    background-color:#e6e7e1
}

.active,#chapters a,.toggler,.glyphicon.glyphicon-chevron-down {
    color:rgba(0,0,0,0.50)
}

#wrapper,#chapter-menu,a .glyphicon-chevron-down,.toggler {
    -webkit-transition:all .3s;
    -moz-transition:all .3s;
    -ms-transition:all .3s;
    -o-transition:all .3s;
    transition:all .3s
}

#mask,#mask-box,.content-block-title {
    width:100%;
    height:100%
}

#chapter-menu a,#sidebar a {
    text-decoration:none
}

.breadcrumb.style,#sidebar ol {
    line-height:30px
}

#sidebar .panel,.toggler {
    margin:0
}

#sidebar,.toggler {
    padding:0
}

#sidebar .panel,.toggler {
    border:none
}

#heading,#chapter-menu,.toggler {
	right: 0;
	background-color: #F7687A;
}

#wrapper,#mask-box {
    left:0
}

#mask-box,#sidebar {
    top:0
}

/************************************************************************/
/**************************      MEDIA QUERIES     **********************/
/************************************************************************/
/* Extra small devices (phones, less than 768px) */
@media (max-width: 767px) {
	.content-block-title h1 {
	    font-size:20px
	}
	
	.content-block-title {
	    padding-bottom:5px
	}
	
	.breadcrumb.style a {
	    font-size:smallest;
	}

	#sidebar .navmenu {
	    padding:10px
	}
	#sidebar .navmenu{
		font-size: 14px!important;	
	}
	
	#sidebar .navmenu a {
	    margin-left:5px!important;
	    margin-right:5px!important;
	}

}

/* Small devices (desktops, 768px and down) */
@media (max-width: 991px) {
	#sidebar {
	    max-height:none!important;
	    height:100%!important;
	    width:85%;
	    right:-100%;
	    position:fixed;
	    margin:0;
	    -webkit-transition:all .3s;
	    -moz-transition:all .3s;
	    -ms-transition:all .3s;
	    -o-transition:all .3s;
	    transition:all .3s
	}

	#wrapper {
	    margin-top:-50px
	}
	
	#sidebar .navmenu a {
	    margin-left:15px;
	    margin-right:15px
	}
	
	#sidebar .navmenu {
	    font-size:18px
	}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
	#sidebar {
	    width:320px;
	    float:left
	}
	
	#sidebar-box {
	    padding:0
	}
	
	#content-container {
	    margin-bottom:0
	}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	#sidebar {
	    width:390px
	}
	
	#sidebar-box {
	    padding:0
	}
	
	#content-container {
	    margin-bottom:0
	}
}