body,html{
    width:100%;
	height:100%;
}

body {
    background: #eee;
}

@media (min-width: 1330px){
  nav.sidebar {
      position: fixed;
      left:0;
    }  
}

@media (min-width: 768px){
  nav.sidebar {
    position: fixed;
    left:0;
    }  
}



.colorgraph {
  height: 5px;
  border-top: 0;
  background: #c4e17f;
  border-radius: 5px;
  background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}

.navbar-brand {
    padding: 10px 15px;
}

.main .row{
	padding: 0px;
	margin: 0px;
}

.main {
    margin-bottom: 15px;
}
	
nav.sidebar.navbar {
    border-radius: 0px;
}

nav.sidebar, .main{
    -webkit-transition: margin 200ms ease-out;
    -moz-transition: margin 200ms ease-out;
    -o-transition: margin 200ms ease-out;
    transition: margin 200ms ease-out;
}

.main{
	padding: 10px 10px 0 10px;
}

@media (min-width: 768px) {
		.main{
			position: absolute;
			width: calc(100% - 40px); /*keeps 100% minus nav size*/
			margin-left: 40px;
			float: right;
		}
    
		nav.sidebar:hover + .main{
			margin-left: 200px;
		}

		nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
			margin-left: 0px;
		}
    
		nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
			text-align: center;
			width: 100%;
            height: 100%;
			margin-left: 0px;
		}

		nav.sidebar a{
			padding-right: 13px;
		}

		nav.sidebar .navbar-nav > li:first-child{
			border-top: 1px #e5e5e5 solid;
		}

		nav.sidebar .navbar-nav > li{
			border-bottom: 1px #e5e5e5 solid;
		}

		nav.sidebar .navbar-nav .open .dropdown-menu {
			position: static;
			float: none;
			width: auto;
			margin-top: 0;
			background-color: transparent;
			border: 0;
			-webkit-box-shadow: none;
			box-shadow: none;
		}

		nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
			padding: 0 0px 0 0px;
		}

		.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
			color: #777;
		}

		nav.sidebar{
			width: 200px;
			min-height:100%;
			margin-left: -160px;
			float: left;
			z-index: 8000;
			margin-bottom: 0px;
		}

		nav.sidebar li {
			width: 100%;
		}

		nav.sidebar:hover{
			margin-left: 0px;
		}
    
		.forAnimate{
			opacity: 0;
		}
	}

	@media (min-width: 1330px) {

		.main{
			width: calc(100% - 200px); 
			margin-left: 200px;
		}

		nav.sidebar{
			margin-left: 0px;
			float: left;
		}
        
		nav.sidebar .forAnimate{
			opacity: 1;
		}
	}

nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
	color: #CCC;
	background-color: transparent;
}

nav:hover .forAnimate {
	opacity: 1;
}

section {
	padding-left: 15px;
}


.huge {
    font-size: 40px;
}

.editon {
    display: none;
}

.editoff {
    width: 100%;
}

.text-bold {
    font-weight: bold;
}

.purple {
    color: #4c004c;
    background: #d8b2d8;
}

.orange {
    color: #FFA500;
    background: #ffedcc;
}

.black {
    background: #ebe1d8;
    color: #3e2a18;
}

.default {
    background: #FFFFD9;
    color: #666656;
}

.hearingoff {
    display: none;
}