ul.horizontal { li { display: inline-block; } } #header { #primary.menu { ul { li { color: #555; a { color: #555; text-decoration: none; &:hover { color: black; } } background-color: #fff; padding: 10px; margin: 0; } &.horizontal { border-bottom: solid 1px #ddd; li { border-top: solid 3px #fff; &:hover { background-color: #ffe; border-top: solid 3px #999; } &.active { font-weight: bold; border-top: solid 3px #ddd; background-color: #ddd; } &.active:hover { border-top: solid 3px blue; } } } } } } .menu ul.vertical { list-style: none; padding-left: .5rem; & > li > a { border-bottom: dotted 1px #ccc; } ul { padding-left: 1rem; } li { padding-left: .3rem; } li.active > a { font-weight: bold; } } form.search-form div { position: absolute; top: .5rem; right: 0px; z-index: -1; } #content { display: flex; flex-direction: row; #highlighted { position: relative; border: solid 1px #ddd; background-color: #ffc; width: 70%; left: 15%; right: 15%; padding: 5px; font-style: italic; } .preview { border: solid 1px red; } } #content { .sidebar { padding: 5px; margin: 3px; &#sidebar_first { flex: 1 0 auto; max-width: 200px; width: 200px; border-right: solid 1px #ccc; } &#sidebar_second { flex: 1 0 auto; max-width: 240px; width: 240px; float: right; } &+#main { margin-left: 1rem; } } span.sidebar_toggle { padding: .2rem; width: 2rem; border: solid 1px #999; background-color: #ccc; display: none; cursor: pointer; &:hover { border: solid 1px #333; background-color: #fff; } } #main { flex: 1; min-width: 300px; margin-left: 2rem; } } #primary-tabs { ul.horizontal { list-style-type: none; li { display: inline; padding: 2px 5px; border: solid 1px #ccf; } li.active { border-color: #99f #99f #ddd; border-style: solid solid none; border-width: 2px 1px 0; padding: 2px 7px 1px; } } } #message li.error { background-color: #f99; border: solid 1px red; padding: 5px 2px 5px 2px; } table.with_border { thead td { font-weight: bold; } td { border: solid 1px #ccc; padding: 2px 5px 2px 5px; } } @media screen and (max-width: 600px) { div#content { flex-direction: column; span.sidebar_toggle { display: block; &+div.sidebar { display: none; } } span.sidebar_toggle { &+div.sidebar { display: none; } &+div.sidebar[data-display=no] { display: none; } &+div.sidebar[data-display=yes] { display: block; } } } form.search-form div { position: relative; } } ul.pagination li { margin-right: .5em; display: inline-block; }