/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Hyperlinks ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ a { color: #0060A0; text-decoration: none; } a:focus { background: #CCC; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Paragraphs ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { margin-top: 0; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Headings ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; } h1 { font-size: 0.80rem; } h2 { font-size: 0.70rem; } h3 { font-size: 0.65rem; } h4 { font-size: 0.60rem; } h5 { font-size: 0.55rem; } h6 { font-size: 0.50rem; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Document ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ html, body { margin: 0; padding: 0; } html { font-size: 1.25rem; color: #333; background: #CCC; -webkit-hyphens: auto; hyphens: auto; } body { font-family: Ruda, sans-serif; font-size: 0.7rem; line-height: 1.2rem; } #container { max-width: 45rem; margin: 1rem auto; border: 0.05rem solid #AAA; background: #FFF; } main, #main-header > div { padding: 1rem; box-sizing: border-box; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Header ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ #main-header > div { overflow: hidden; } #main-logo { height: 1.75rem; display: block; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Footer ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ #main-footer { background: #EEE; border-top: 0.05rem solid #AAA; padding: 0.25rem 1rem; text-align: center; font-size: 0.6rem; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Main Navigation ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ #main-navi { font-size: 0.6rem; background: #EEE; border: 0.05rem solid #AAA; border-left: none; border-right: none; padding: 0 1rem; } #main-navi ul { list-style: none; margin: 0; padding: 0; } #main-navi li { display: inline; } #main-navi li .fa, h1 > .fa, h2 > .fa { margin-right: 0.25rem; } #main-navi a { padding: 0.25rem 0.3rem; color: inherit; text-decoration: none; text-align: center; display: inline-block; border: 0.05rem solid transparent; border-top: none; border-bottom: none; } #main-navi a:hover, #main-navi a:focus { text-decoration: none; background: #DDD; border: 0.05rem solid #AAA; border-top: none; border-bottom: none; } #main-navi li:last-child { float: right; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Site Navigation ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ #site-navi { clear: both; display: flex; box-sizing: border-box; justify-content: space-between; } #site-navi > div { display: flex; align-items: center; border: 0.05rem solid #AAA; background: #EEE; } #site-navi > div > a { display: block; } #site-navi > section { display: flex; overflow: hidden; align-items: center; } #site-navi > section > div { border: 0.05rem solid #AAA; background: #EEE; } #site-navi .disabled { pointer-events: none; color: #AAA; } #site-navi .active a { background: #CCC !important; font-weight: 600; pointer-events: none; } #site-navi ol { list-style: none; margin: 0; padding: 0; } #site-navi li { float: left; display: inline-block; } #site-navi li + li { border-left: 0.05rem solid #AAA; } #site-navi a { padding: 0 0.5rem; text-decoration: none; color: inherit; display: inline-block; } #site-navi a:hover, #site-navi a:focus { background: #CCC; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Elements ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ pre { font-family: monospace; margin-bottom: 1rem; overflow: auto; -moz-tab-size: 4; tab-size: 4; } code, pre { font-family: monospace; color: #008B45; } strong, label { font-weight: 600; } img { border: none; max-width: 100%; } main img { border: 0.05rem solid #000; border-radius: 0.15rem; } table img { border: none; border-radius: 0; } .red { color: #B03060; } .head-link { font-size: 0.6rem; float: right; } .head-link .fa { margin-right: 0.125rem; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Brackets ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ .brackets a, a.brackets { text-decoration: none; } .brackets:after { content: "]"; } .brackets:before { content: "["; } a.brackets:before, a.brackets:after { color: #222; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Item Element ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ .item { background: #EEE; border: 0.05rem solid #AAA; overflow: hidden; margin: 0.5rem 0; } .item > header { padding: 0.25rem 1rem; border-bottom: 0.05rem solid #AAA; overflow: hidden; text-transform: uppercase; } .item > header h2 { font-size: 0.65rem; float: left; } .item > header .info { float: right; font-size: 0.6rem; font-weight: 400; } .item > header a { color: inherit; } .item > blockquote { margin: 0; padding: 0 1rem; font-family: inherit; } .item > blockquote img { display: block; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Item content on main sites ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ #content { background: #EEE; border: 0.05rem solid #AAA; margin: 0.5rem 0; padding: 0 1rem; } #content img { display: block; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Responsive ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ #toogle-nav { display: none; clear: both; } #toogle-nav-label { display: none; cursor: pointer; font-size: 1.25rem; text-align: center; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Form elements ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ input, select { background: #EEE; color: inherit; padding: 0.2rem; border: 0.1rem solid #AAA; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Table elements ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ table { width: 100%; margin: 0 0 1rem; } td { vertical-align: middle; } table, td { border-spacing: 0; border-collapse: collapse; padding: 0.5rem; border: 0.05rem solid #000; } thead, tr:nth-child(even) { background: #EEE; } thead > tr, th { font-weight: 600; font-style: italic; } thead > tr > td, th > td { text-align: center; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Responsive Level #1 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @media only screen and (max-width: 50em) { html { font-size: 1.125rem; /*18px*/ background-image: none !important; } body { line-height: 1.2rem; } #container { margin: 0; border-right: none; border-left: none; } } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Responsive Level #2 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @media only screen and (max-width: 37.5em) { main, #main-header > div { padding: 1rem; } #main-navi { padding: 0.25rem 1rem; } #main-navi a { border: 0.05rem solid transparent; } #main-navi a:hover, #main-navi a:focus { border: 0.05rem solid #BBB; } #main-navi > ul { display: none; float: none; } #main-navi > ul > li a { display: block; text-align: left; padding: 0 0.25rem; } #main-navi { overflow: hidden; } #toogle-nav-label { display: block; } #toogle-nav:checked + ul { display: block; } #main-navi li:last-child { float: none; } .item > header { text-align: center; } .item > header > h2, .item > header > .info { float: none; display: block; } } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # FontAwesome Main ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ .fa { display: inline-block; font: normal normal normal 14px/1 "FontAwesome"; font-size: inherit; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # FontAwesome Icons ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ .fa-rss:before { content: "\f09e"; } .fa-key:before { content: "\f084"; } .fa-bars:before { content: "\f0c9"; } .fa-user:before { content: "\f007"; } .fa-home:before { content: "\f015"; } .fa-search:before { content: "\f002"; } .fa-rss-square:before { content: "\f143"; } .fa-arrow-left:before { content: "\f060"; } .fa-user-secret:before { content: "\f21b"; } .fa-file-text-o:before { content: "\f0f6"; } .fa-newspaper-o:before { content: "\f1ea"; } .fa-arrow-right:before { content: "\f061"; } .fa-exclamation-triangle:before { content: "\f071"; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Font "Font Awesome" [4.7.0]: SIL Open Font License (OFL) ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @font-face { font-family: "FontAwesome"; font-weight: 400; src: url("font/font-awesome.woff2") format("woff2"); } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Font "Ruda": SIL Open Font License (OFL) ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @font-face { font-family: Ruda; font-weight: 400; src: url("font/ruda-n-400.woff2") format("woff2"); } @font-face { font-family: Ruda; font-weight: 700; src: url("font/ruda-n-700.woff2") format("woff2"); }