body { font-family: Avenir, Verdana, Helvetica, sans-serif; color: #170e0b; } .display-block { display: block; } .margin-top-70 { margin-top: 70px; } .padding-13 { padding: 13px; } .position-fixed { position: fixed; } .top-0 { top: 0; } .min-height-100\% { min-height: 100%; } .header { background-color: rgb(229, 226, 216); width: 100%; height: 30px; padding: 20px; } $sidebar-width: 250px; .sidebar { background-color: rgb(242, 239, 239); width: $sidebar-width; height: 100%; border-right: 2px solid rgb(234, 224, 224); overflow: auto; a { border-bottom: 1px solid rgb(213, 202, 202); color: rgb(18, 113, 18); text-decoration: none; } a:hover, .active { background: #249124; /* Old browsers */ background: -moz-linear-gradient(top, #249124 0%, #127112 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#249124), color-stop(100%,#127112)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #249124 0%,#127112 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #249124 0%,#127112 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #249124 0%,#127112 100%); /* IE10+ */ background: linear-gradient(to bottom, #249124 0%,#127112 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#249124', endColorstr='#127112',GradientType=0 ); /* IE6-9 */ color: #ddd; } } .note-editor { margin-left: $sidebar-width; padding: 12px 15px; font: 18px/1.7 Georgia, Times, serif; outline: none; }