screen.css 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449
  1. /* Welcome to Compass.
  2. * In this file you should write your main styles. (or centralize your imports)
  3. * Import this file using the following HTML or equivalent:
  4. * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
  5. @import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,400italic,700|Vollkorn);
  6. /* line 5, ../../../../../home/daniel/.gem/ruby/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
  7. html, body, div, span, applet, object, iframe,
  8. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  9. a, abbr, acronym, address, big, cite, code,
  10. del, dfn, em, img, ins, kbd, q, s, samp,
  11. small, strike, strong, sub, sup, tt, var,
  12. b, u, i, center,
  13. dl, dt, dd, ol, ul, li,
  14. fieldset, form, label, legend,
  15. table, caption, tbody, tfoot, thead, tr, th, td,
  16. article, aside, canvas, details, embed,
  17. figure, figcaption, footer, header, hgroup,
  18. menu, nav, output, ruby, section, summary,
  19. time, mark, audio, video {
  20. margin: 0;
  21. padding: 0;
  22. border: 0;
  23. font: inherit;
  24. font-size: 100%;
  25. vertical-align: baseline;
  26. }
  27. /* line 22, ../../../../../home/daniel/.gem/ruby/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
  28. html {
  29. line-height: 1;
  30. }
  31. /* line 24, ../../../../../home/daniel/.gem/ruby/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
  32. ol, ul {
  33. list-style: none;
  34. }
  35. /* line 26, ../../../../../home/daniel/.gem/ruby/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
  36. table {
  37. border-collapse: collapse;
  38. border-spacing: 0;
  39. }
  40. /* line 28, ../../../../../home/daniel/.gem/ruby/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
  41. caption, th, td {
  42. text-align: left;
  43. font-weight: normal;
  44. vertical-align: middle;
  45. }
  46. /* line 30, ../../../../../home/daniel/.gem/ruby/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
  47. q, blockquote {
  48. quotes: none;
  49. }
  50. /* line 103, ../../../../../home/daniel/.gem/ruby/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
  51. q:before, q:after, blockquote:before, blockquote:after {
  52. content: "";
  53. content: none;
  54. }
  55. /* line 32, ../../../../../home/daniel/.gem/ruby/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
  56. a img {
  57. border: none;
  58. }
  59. /* line 116, ../../../../../home/daniel/.gem/ruby/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
  60. article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  61. display: block;
  62. }
  63. /**
  64. * Colors for the project.
  65. */
  66. /* line 12, sass/screen.scss */
  67. * {
  68. -moz-box-sizing: border-box;
  69. -webkit-box-sizing: border-box;
  70. box-sizing: border-box;
  71. }
  72. /* line 21, sass/screen.scss */
  73. body {
  74. background-color: #111;
  75. color: #ccc;
  76. font-family: "Noto Sans", Verdana, sans-serif;
  77. display: flex;
  78. flex-wrap: wrap;
  79. }
  80. /* line 29, sass/screen.scss */
  81. .grid {
  82. margin: 20px 0 20px 20px;
  83. }
  84. /* line 32, sass/screen.scss */
  85. .grid:after {
  86. content: '';
  87. display: table;
  88. clear: both;
  89. }
  90. /* line 39, sass/screen.scss */
  91. [class*='col-'] {
  92. float: left;
  93. padding-right: 20px;
  94. }
  95. /* line 44, sass/screen.scss */
  96. .col-twelfth {
  97. width: 8.33%;
  98. }
  99. /* line 45, sass/screen.scss */
  100. .col-sixth {
  101. width: 16.66%;
  102. }
  103. /* line 46, sass/screen.scss */
  104. .col-quarter {
  105. width: 25%;
  106. }
  107. /* line 47, sass/screen.scss */
  108. .col-third {
  109. width: 33.33%;
  110. }
  111. /* line 48, sass/screen.scss */
  112. .col-fivetwelfth {
  113. width: 41.66%;
  114. }
  115. /* line 49, sass/screen.scss */
  116. .col-half {
  117. width: 50%;
  118. }
  119. /* line 50, sass/screen.scss */
  120. .col-seventwelfth {
  121. width: 58.33%;
  122. }
  123. /* line 51, sass/screen.scss */
  124. .col-twothird {
  125. width: 66.66%;
  126. }
  127. /* line 52, sass/screen.scss */
  128. .col-threequarter {
  129. width: 75%;
  130. }
  131. /* line 53, sass/screen.scss */
  132. .col-fivesixth {
  133. width: 83.33%;
  134. }
  135. /* line 54, sass/screen.scss */
  136. .col-eleventwelfth {
  137. width: 91.66%;
  138. }
  139. /* line 55, sass/screen.scss */
  140. .col-full {
  141. width: 100%;
  142. }
  143. /* line 58, sass/screen.scss */
  144. #sidebar {
  145. margin-left: 20px;
  146. width: 200px;
  147. }
  148. /* line 63, sass/screen.scss */
  149. #sidebar-rechts {
  150. width: 200px;
  151. }
  152. /* line 1, sass/_content.scss */
  153. #content {
  154. line-height: 15pt;
  155. font-size: 11pt;
  156. }
  157. /* line 5, sass/_content.scss */
  158. #content p {
  159. margin-top: 10px;
  160. margin-bottom: 10px;
  161. }
  162. /* line 10, sass/_content.scss */
  163. #content ul, #content ol {
  164. list-style: disc outside;
  165. padding-left: 20px;
  166. }
  167. /* line 1, sass/_box.scss */
  168. .box {
  169. margin-bottom: 20px;
  170. }
  171. /* line 4, sass/_box.scss */
  172. .box .title {
  173. padding-left: 5px;
  174. padding-right: 5px;
  175. border-bottom: 30px solid silver;
  176. border-right: 20px solid transparent;
  177. display: inline-block;
  178. height: 0;
  179. line-height: 32px;
  180. font-family: Vollkorn, serif;
  181. font-variant: small-caps;
  182. text-shadow: 1px 1px 2px #111;
  183. color: #111;
  184. }
  185. /* line 20, sass/_box.scss */
  186. .box .body {
  187. border-top: 2px solid silver;
  188. border-bottom: 1px solid silver;
  189. background-color: #333;
  190. }
  191. /* line 26, sass/_box.scss */
  192. .box p {
  193. padding: 5px;
  194. margin: 0 !important;
  195. }
  196. /* line 32, sass/_box.scss */
  197. .box-left {
  198. float: left;
  199. }
  200. /* line 36, sass/_box.scss */
  201. .box-center {
  202. text-align: center;
  203. margin: 0 auto 20px auto;
  204. float: none;
  205. }
  206. /* line 41, sass/_box.scss */
  207. .box-center .title {
  208. border-bottom: 30px solid silver;
  209. border-right: 20px solid transparent;
  210. border-left: 20px solid transparent;
  211. }
  212. /* line 47, sass/_box.scss */
  213. .box-center .body {
  214. text-align: left;
  215. }
  216. /* line 52, sass/_box.scss */
  217. .box-right {
  218. float: right;
  219. text-align: right;
  220. }
  221. /* line 56, sass/_box.scss */
  222. .box-right .title {
  223. border-bottom: 30px solid silver;
  224. border-left: 20px solid transparent;
  225. border-right: none;
  226. }
  227. /* line 62, sass/_box.scss */
  228. .box-right .body {
  229. text-align: left;
  230. }
  231. /* line 71, sass/screen.scss */
  232. #title-bar {
  233. margin: 20px;
  234. background: radial-gradient(rgba(0, 0, 0, 0), rgba(17, 17, 17, 0.8) 60%, #111111 70%) no-repeat center, url("../bg-navy.png") no-repeat center;
  235. background-size: 853px, auto;
  236. flex-grow: 1;
  237. flex-basis: 100%;
  238. }
  239. /* line 79, sass/screen.scss */
  240. #title-bar a.logo {
  241. text-align: center;
  242. font-family: serif;
  243. font-size: xx-large;
  244. text-transform: uppercase;
  245. text-shadow: 1px 1px 2px #111;
  246. display: block;
  247. text-decoration: none;
  248. color: #ccc;
  249. }
  250. /* line 89, sass/screen.scss */
  251. #title-bar a.logo img {
  252. height: 70px;
  253. vertical-align: middle;
  254. background: radial-gradient(#111111, rgba(0, 0, 0, 0));
  255. }
  256. /* line 96, sass/screen.scss */
  257. #title-bar .titles {
  258. display: flex;
  259. justify-content: space-between;
  260. }
  261. /* line 100, sass/screen.scss */
  262. #title-bar .titles .left {
  263. padding-left: 5px;
  264. padding-right: 5px;
  265. border-bottom: 20px solid silver;
  266. border-right: 15px solid transparent;
  267. display: inline-block;
  268. height: 0;
  269. line-height: 22px;
  270. font-size: smaller;
  271. color: #111;
  272. }
  273. /* line 115, sass/screen.scss */
  274. #title-bar .titles .right {
  275. padding-left: 5px;
  276. padding-right: 5px;
  277. border-bottom: 20px solid silver;
  278. border-left: 15px solid transparent;
  279. display: inline-block;
  280. height: 0;
  281. line-height: 22px;
  282. /*font-family: $fSerif;
  283. font-variant: small-caps;*/
  284. font-size: smaller;
  285. color: #111;
  286. float: right;
  287. }
  288. /* line 133, sass/screen.scss */
  289. #title-bar .titles a, #title-bar .titles a:visited, #title-bar .titles a:active {
  290. color: #111;
  291. }
  292. /* line 139, sass/screen.scss */
  293. #title-bar .body {
  294. display: block;
  295. }
  296. /* line 143, sass/screen.scss */
  297. #title-bar .top-menu {
  298. display: flex;
  299. width: 100%;
  300. }
  301. /* line 147, sass/screen.scss */
  302. #title-bar .top-menu li {
  303. flex-grow: 1;
  304. padding: 5px;
  305. padding-top: 7px;
  306. text-align: center;
  307. width: 10px;
  308. transition: all .3s ease;
  309. font-family: Vollkorn, serif;
  310. font-variant: small-caps;
  311. text-shadow: 1px 1px 2px #111;
  312. }
  313. /* line 158, sass/screen.scss */
  314. #title-bar .top-menu li a {
  315. text-decoration: none;
  316. color: #ccc;
  317. display: block;
  318. }
  319. /* line 164, sass/screen.scss */
  320. #title-bar .top-menu li:hover {
  321. background-color: #444;
  322. }
  323. /* line 173, sass/screen.scss */
  324. .menu a {
  325. text-decoration: none;
  326. font-style: italic;
  327. font-size: smaller;
  328. color: #ccc;
  329. display: block;
  330. }
  331. /* line 181, sass/screen.scss */
  332. .menu li {
  333. padding: 7px 0 5px 5px;
  334. transition: all .3s ease;
  335. }
  336. /* line 185, sass/screen.scss */
  337. .menu li:before {
  338. content: "\f054";
  339. font-family: FontAwesome, serif;
  340. float: left;
  341. width: 0;
  342. font-size: smaller;
  343. transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  344. color: transparent;
  345. }
  346. /* line 194, sass/screen.scss */
  347. .menu li:hover {
  348. background-color: #444;
  349. }
  350. /* line 197, sass/screen.scss */
  351. .menu li:hover:before {
  352. color: inherit;
  353. width: 12px;
  354. }
  355. /* line 203, sass/screen.scss */
  356. .menu li.title {
  357. font-weight: bold;
  358. }
  359. /* line 209, sass/screen.scss */
  360. #content {
  361. margin-left: 20px;
  362. margin-right: 20px;
  363. flex-grow: 1;
  364. }
  365. /* line 214, sass/screen.scss */
  366. #content .content-header {
  367. text-align: center;
  368. border-bottom: 2px solid silver;
  369. }
  370. /* line 218, sass/screen.scss */
  371. #content .content-header .pageTitle {
  372. text-align: center;
  373. margin: 0 auto;
  374. border-bottom: 30px solid silver;
  375. border-right: 20px solid transparent;
  376. border-left: 20px solid transparent;
  377. display: inline-block;
  378. height: 0;
  379. line-height: 32px;
  380. font-family: Vollkorn, serif;
  381. font-variant: small-caps;
  382. text-shadow: 1px 1px 2px #111;
  383. color: #111;
  384. }
  385. /* line 236, sass/screen.scss */
  386. #content .content-footer {
  387. text-align: center;
  388. border-top: 1px solid silver;
  389. clear: both;
  390. }
  391. /* line 241, sass/screen.scss */
  392. #content .content-footer .copy {
  393. text-align: center;
  394. border-top: 15px solid silver;
  395. border-right: 10px solid transparent;
  396. border-left: 10px solid transparent;
  397. display: inline-block;
  398. height: 0;
  399. line-height: 0;
  400. margin: 0;
  401. padding: 0;
  402. font-size: x-small;
  403. color: #111;
  404. }
  405. /* line 253, sass/screen.scss */
  406. #content .content-footer .copy div {
  407. position: relative;
  408. top: -14px;
  409. }
  410. /* line 260, sass/screen.scss */
  411. #content .content-body {
  412. background-color: #222;
  413. padding: 20px;
  414. overflow: hidden;
  415. *zoom: 1;
  416. }