/*
Use `border-box` properly:
https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*/
html {
  box-sizing: border-box;
  height: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1;
}

.pageTitle{
  color: whitesmoke;
}

/* External CSS */
@import "normalize.css/normalize.css";

/* Global CSS */
@import "pure-menu.css";
@import "home.css";
@import "banner.css";
@import "explanation.css";
@import "sign-me-up.css";
@import "how-it-works.css";
@import "snackbar.css";
@import "admin.css";
@import "donations.css";

.pure-menu-horizontal .pure-menu-item {
  margin-left: 50px;
}

#menu:not(.open) .pure-menu-list {
  height: 0;
}

Fix nav bar styling issue

Fix nav bar styling issue

The 'Home' text on the menu was partially visible
behind the logo image. Looking super weird


ul.timeline {
    list-style-type: none;
    position: relative;
    margin-top: 40px;
}

ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 9px;
    width: 2px;
    height: 100%;
    z-index: 400;
}

ul.timeline > li {
    margin: 10px 0;
    margin-top: 20px;
    padding-left: 30px;
}

ul.timeline > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #0155A3;
    left: 0px;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    z-index: 400;
}

table.dataframe {
    border-collapse: collapse;
    margin-bottom: 20px;
}

table.dataframe td, table.dataframe th {
    padding: 2px 10px 2px 10px;
    border-style: solid 1px black;
}

ul.timeline {
    list-style-type: none;
    position: relative;
    margin-top: 40px;
}

ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 9px;
    width: 2px;
    height: 100%;
    z-index: 400;
}

ul.timeline > li {
    margin: 10px 0;
    margin-top: 20px;
    padding-left: 30px;
}

ul.timeline > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #0155A3;
    left: 0px;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    z-index: 400;
}

table.dataframe {
    font-size: 14px;
    border-collapse: collapse;
    margin-bottom: 20px;
}

table.dataframe td, table.dataframe th {
    padding: 2px 10px 2px 10px;
    border-style: solid 1px black;
}

Reduce dataframe fontsize from 14 to 12

Reduce dataframe fontsize from 14 to 12


@import "monokai.css";

.spacer {
  height: 80px;
}

.post-preview {
  font-size: 2.3437em;
  padding: 0;
  margin-bottom: 10px;
}

.tags {
  margin-bottom: 10px;
}

.article-footer {
  padding: 0px;
}

.center-content {
  max-width: 85%;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .spacer {
    height: 50px;
  }

  .center-content {
    max-width: 96%;
  }
}

.tags {
  font-size: 1.7577em;
}

.portfolio-title, .portfolio-desc {
  color: white;
  padding-top: 5%;
}

.portfolio-title {
  font-weight: bold;
}

.portfolio-desc {
  padding: 0px 5%;
}

@media (max-width: 768px) {
  .portfolio-wrapper {
    min-height: 250px;
  }
}

@media (max-width: 360px) {
  .portfolio-wrapper {
    min-height: 330px;
  }
}

.portfolio-btn {
  margin: 2% 0;
}

.highlight {
  font-weight: bold;
}

.highlight .c1 {
  color: white;
  font-weight: normal;
}

Change styling of .highlight class.

Change styling of .highlight class.

Made the font-weight within the .highlight class bold for easier
viewing. Changed comments font color to white for better contrast.


@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    @media (max-width: 639px) {
        #main-menu-toggle:checked ~ .main-menu {
            display: block;
        }

        .main-menu {
            display: none;
        }
    }
}

@layer components {
    .header-border {
        @apply border-b-8;

        border-image: linear-gradient(
            to right,
            theme('colors.purple.400') 20%,
            theme('colors.orange.400') 20%,
            theme('colors.orange.400') 40%,
            theme('colors.pink.400') 40%,
            theme('colors.pink.400') 60%,
            theme('colors.green.500') 60%,
            theme('colors.green.500') 80%,
            theme('colors.blue.400') 80%,
            theme('colors.blue.400') 100%
        ) 5;
    }
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    @media (max-width: 639px) {
        #main-menu-toggle:checked ~ .main-menu {
            display: block;
        }

        .main-menu {
            display: none;
        }
    }
}

@layer components {
    .header-border {
        @apply border-b-8;

        border-image: linear-gradient(
            to right,
            theme('colors.purple.400') 20%,
            theme('colors.orange.400') 20%,
            theme('colors.orange.400') 40%,
            theme('colors.pink.400') 40%,
            theme('colors.pink.400') 60%,
            theme('colors.green.500') 60%,
            theme('colors.green.500') 80%,
            theme('colors.cyan.400') 80%,
            theme('colors.cyan.400') 100%
        ) 5;
    }
}

Fix site name border gradient

Fix site name border gradient


  to-do button, to-do footer > label { cursor: pointer }

  to-do form > fieldset {
    padding: 0;
    border: none;
    background: rgba(230,230,230,.5);
    line-height: 2em;
  }

  to-do form > fieldset label {
    width: 80%;
    display: inline-block;
    // Flexbox bug for fieldset - https://stackoverflow.com/questions/28078681/why-cant-fieldset-be-flex-containers
  }

  to-do footer  {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  to-do footer header button { display: block }

  to-do footer > label {
    flex: 1;
    margin: 0 2em;
    text-align: center;
    border-radius: 0.2em;
  }

  to-do input#all:checked
    ~ footer > label[for=all],

  to-do input#active:checked
    ~ footer > label[for=active],

  to-do input#completed:checked
    ~ footer > label[for=completed]
      { background: #ddd }

to-do button {
  font-size: 70%;
}

  to-do button, to-do footer > label { cursor: pointer }

  to-do form > fieldset {
    padding: 0;
    border: none;
    background: rgba(230,230,230,.5);
    line-height: 2em;
  }

  to-do form > fieldset label {
    width: 80%;
    display: inline-block;
    // Flexbox bug for fieldset - https://stackoverflow.com/questions/28078681/why-cant-fieldset-be-flex-containers
  }

  to-do footer  {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  to-do footer header button { display: block }

  to-do footer > label {
    flex: 1;
    margin: 0 2em;
    text-align: center;
    border-radius: 0.2em;
  }

  to-do input#all:checked
    ~ footer > label[for=all],

  to-do input#active:checked
    ~ footer > label[for=active],

  to-do input#completed:checked
    ~ footer > label[for=completed]
      { background: #ddd }

to-do button,
to-do form button[type=submit] {
  font-size: 70%;
}

Fix styling of Add button

Fix styling of Add button


#header {
  background-color:black;
  color:white;
  text-align:center;
  padding:5px;
}

#nav {
  line-height:30px;
  background-color:#eeeeee;
  height:300px;
  width:100px;
  float:left;
  padding:5px;
  text-align: center;
}

#section {
  font-family: Roboto
  width:350px;
  float:left;
  padding:10px;
}

#footer {
  font-family: Roboto
  background-color: black;
  color: white;
  clear:both;
  text-align:center;
  padding:5px;
}

a {
  color: inherit;
}

#header {
  background-color:black;
  color:white;
  text-align:center;
  padding:5px;
}

#nav {
  line-height:30px;
  background-color:#eeeeee;
  height:300px;
  width:100px;
  float:left;
  padding:5px;
  text-align: center;
}

#section {
  font-family: Roboto
  width:350px;
  float:left;
  padding:10px;
}

#footer {
  font-family: Roboto;
  background-color: black;
  color: white;
  clear:both;
  text-align:center;
  height: 5em;
  width: 100%;
}

a {
  color: inherit;
}

Fix footer background-color, add width, height


[data-_extension-text-contrast='fg'],
[data-_extension-text-contrast='default'] {
  color: rgb(0, 0, 0);
}

[data-_extension-text-contrast='bg'] {
  background-color: rgb(255, 255, 255);
}

[data-_extension-text-contrast='both'],
[data-_extension-text-contrast='std'] {
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
}

[data-_extension-text-contrast='fg'],
[data-_extension-text-contrast='default'] {
  color: rgb(0, 0, 0) !important;
}

[data-_extension-text-contrast='bg'] {
  background-color: rgb(255, 255, 255) !important;
}

[data-_extension-text-contrast='both']{
  color: rgb(0, 0, 0) !important;
  background-color: rgb(255, 255, 255) !important;
}

[data-_extension-text-contrast='std'] {
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
}

Add !important to styles to override authors who think their broken css is
also !important.

- The 'std' style is for reverting to a browser default, so no need to
  force it.


/*
 * Copyright (c) 2021 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

.stack-trace-row {
  display: flex;
}

.stack-trace-function-name {
  width: 100px;
}

.stack-trace-source-location {
  display: flex;
  overflow: hidden;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ignore-list-link {
  opacity: 60%;
}

.link,
.devtools-link {
  color: var(--color-link);
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 0; /* adjust focus ring size */
}

Add styles to links in frame creation stack traces

Before: https://i.imgur.com/2cMgRT5.png
After: https://i.imgur.com/IAN7EKu.png

Fixed: 1271478
Change-Id: I0b9045df28024923561648248f35cadee98d7926
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3289777
Commit-Queue: Wolfgang Beyer <573aa99bb19da47d816981118f95c945310dd3f4@chromium.org>
Commit-Queue: Kateryna Prokopenko <04b7d4bdbd93555cee90f085bb91b72524d21fca@chromium.org>
Auto-Submit: Wolfgang Beyer <573aa99bb19da47d816981118f95c945310dd3f4@chromium.org>
Reviewed-by: Kateryna Prokopenko <04b7d4bdbd93555cee90f085bb91b72524d21fca@chromium.org>


/*
Base CSS for Pyrc
*/

body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.channel {
    border-top-style: solid;
    border-top-width: 3px;
    border-top-color: gray;
}

.hidden {
    display: none;
}

.message {
    margin: 0;
    padding-top: 4px;
    padding-bottom: 5px;
    border-top: 1px solid gray;
}

.text-entry {
    width: 99%;
}

.tabs {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    margin: 0 10px 0 0;
    padding: 120px 0 0 10px;
    width: 180px;
    overflow: hidden;
    background-color: gray;
}

.tabs li {
    margin: 5px 0;
    font-size: 22px;
    cursor: pointer;
}

.active {
    background-color: white;
}

.header {
    position: absolute;
    top: 0;
    left: 200px;
    right: 0;
    height: 50px;
}

.content {
    position: absolute;
    top: 50px;
    left: 200px;
    right: 0;
    bottom: 0;
}

/*
Base CSS for Pyrc
*/

body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.channel {
    border-top-style: solid;
    border-top-width: 3px;
    border-top-color: gray;
}

.hidden {
    display: none;
}

.message {
    margin: 0;
    padding-top: 4px;
    padding-bottom: 5px;
    border-top: 1px solid gray;
}

.text-entry {
    width: 99%;
}

.tabs {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    margin: 0 10px 0 0;
    padding: 120px 0 0 10px;
    width: 180px;
    overflow: hidden;
    background-color: gray;
}

.tabs li {
    margin: 5px 0;
    font-size: 22px;
    cursor: pointer;
}

.active {
    background-color: white;
}

.unread {
    background-color: red;
}

.header {
    position: absolute;
    top: 0;
    left: 200px;
    right: 0;
    height: 50px;
}

.content {
    position: absolute;
    top: 50px;
    left: 200px;
    right: 0;
    bottom: 0;
}

Add a truly hideous unread message class. CHANGE!


body {
    color: #502C2C;
}

.navbar-default {
    background-color: #502C2C;
    border-color: #3B2020;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background-color: #2F1A1A;
}

.jumbotron, pre {
    background-color: #F1ECEC;
}

a {
    color: #BC1818;
}

.navbar-default .navbar-brand:hover,
a:hover {
    color: #F01A1A;
}

Fix hover colour for links

Fix hover colour for links


body {
    background-color: black;
    color: white;
    font-family: Courier New;
}

div.chat-window {
    position: absolute;
    width: 95%;
    height: 85%;
}

h1.headline {

}

div.private-message {
    color: #FF3333;
}

iframe.chat-frame{
    border: 0px;
    overflow:scroll;
    width: 95%;
    height: 80%;
    margin-top: 30px;
}

form.message-form {
    top: 100px;
}

a {
    color: #0099FF;
}

div.footer {
    position: fixed;
    bottom:10px;
}

body {
    background-color: black;
    color: white;
    font-family: Courier New;
}

a {
    color: #0099FF;
}

div.chat-window {
    position: absolute;
    width: 95%;
    height: 85%;
}

iframe.chat-frame{
    border: 0px;
    overflow:scroll;
    width: 95%;
    height: 80%;
    margin-top: 30px;
}

div.private-message {
    color: #99CC33;
}

form.message-form {
    top: 100px;
}

div.footer {
    position: fixed;
    bottom:10px;
}

Change private message color to green

Change private message color to green


.masthead h1 {
  transform: rotate(-90deg) translate(0, -100%);
  transform-origin: right top;
  padding-bottom: 10px;
}

.masthead h1 {
  transform: rotate(-90deg) translate(0, -100%);
  transform-origin: right top;
  padding-bottom: 10px;
  overflow-x: visible;
  float: right;
}

Handle the overflow a bit nicer.

Handle the overflow a bit nicer.


:root .rgh-toggle-files {
	margin: -8px 0;
	margin-right: -10px;
	padding: 10px 13px;
}

.repository-content:not(.rgh-files-hidden) .rgh-toggle-files .octicon-unfold,
.repository-content.rgh-files-hidden .rgh-toggle-files .octicon-fold {
	display: none;
}

.rgh-files-hidden .files, /* Pre "Repository refresh" layout */
.rgh-files-hidden #files ~ .Details {
	display: none;
}

.rgh-files-hidden .file-wrap {
	border: none;
}

/* Hide "Readme" link made unnecessary by this feature #3580 */
h3.sr-only + .mt-3 .muted-link[href='#readme'] {
	display: none;
}

Hide unnecessary "Readme" link from repositories

Closes #3580


html {
  font-family: "source-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (min-width: 38em) {
  html {
    font-size: 19px;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
}

code,
pre {
  font-family: "source-code-pro", Menlo, Monaco, "Courier New", monospace;
}

code {
  font-size: 0.8rem;
}

blockquote {
  border-left-color: #ddd;
}

.post-date {
  display: block;
  color: #c9c9c9;
  font-size: 85%;
}

a {
  color: #0fa5d8;
}

a:hover,
a:focus {
  text-decoration: none;
}

.masthead {
  margin: 1rem 0;
}

.masthead-title a {
  color: #0fa5d8;
}

.page,
.post {
  margin-bottom: 2rem;
}

footer {
  margin-bottom: 2rem;
  color: #c9c9c9;
}

html {
  font-family: "source-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (min-width: 38em) {
  html {
    font-size: 19px;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
}

code,
pre {
  font-family: "source-code-pro", Menlo, Monaco, "Courier New", monospace;
}

code {
  font-size: 0.8rem;
}

blockquote {
  border-left-color: #ddd;
}

.post-date {
  display: block;
  color: #c9c9c9;
  font-size: 85%;
}

a {
  color: #0fa5d8;
}

a:hover,
a:focus {
  text-decoration: none;
}

.masthead {
  margin: 1rem 0;
}

.masthead-title a,
.post-title a {
  color: #0fa5d8;
}

.page,
.post {
  margin-bottom: 2rem;
}

footer {
  margin-bottom: 2rem;
  color: #c9c9c9;
}

Change color of post title links to blue


.post-directory {
    font-size: 14px;
    background: #fff;
    box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
    width: 300px;
}

.post-directory dt, dd{
    border-left: 5px solid #666;
    cursor: pointer;
    padding: 2px 5px 2px 15px;
}

.post-directory a{
    text-decoration: none;
}

.post-directory dt:hover, dd:hover {
    background: #666;
    border-left: 5px solid #111;
}

.post-directory dt:hover a, dd:hover a {
    font-weight: bold;
    color: #fff;
}

.col-md-4 {
    position: static; /* fix strange behavior */
}

.post-directory {
    font-size: 14px;
    background: #fff;
    box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
    width: 300px;
}

.post-directory dt, dd{
    border-left: 5px solid #666;
    cursor: pointer;
    padding: 2px 5px 2px 15px;
}

.post-directory a{
    text-decoration: none;
    display: inline-block;
    width: 100%;
}

.post-directory dt:hover, dd:hover {
    background: #666;
    border-left: 5px solid #111;
}

.post-directory dt:hover a, dd:hover a {
    font-weight: bold;
    color: #fff;
}

.col-md-4 {
    position: static; /* fix strange behavior */
}

Fix menu options on post page

Fix menu options on post page

I have updated the links of the sidebar on a post page. The reason is
that the links do not fill their parents so, the user has to click on
the menu text to reach the according section. With this commit, the user
can click beside the text, the action is triggered.

Fixes #24


.galua_section_label {
  font-style: italic;
  float: right;
  color: #999;
}

.galua_section_container {
  padding: 1em;
}

.galua_function_chip {
  display: inline-block;
  font-size: small;
  width: 3em;
  text-align: center;
  font-weight: 500;
  color: rgba(0,0,0,0.6);
  padding: 0 6px;
  border-radius: 8px;
  background-color: #e4e4e4;
  margin-bottom: 5px;
  margin-right: 5px;
}

.galua_section_label {
  font-style: italic;
  float: right;
  color: #999;
}

.collapsible-header {
  background-color: #e4e4e4;
}
.galua_section_container {
  padding: 1em;
}

table.bordered > caption {
  text-align: left;
  padding: 15px 5px 0px 5px;
  font-style: italic;
  color: #999;
  font-size: smaller;
}

td {
        padding: 0px 15px;
        vertical-align: top;
}

.galua_function_chip {
  display: inline-block;
  font-size: small;
  width: 3em;
  text-align: center;
  font-weight: 500;
  color: rgba(0,0,0,0.6);
  padding: 0 6px;
  border-radius: 8px;
  background-color: #e4e4e4;
  margin-bottom: 5px;
  margin-right: 5px;
}

Make collapsible headers stand out

Make collapsible headers stand out


.hint {
    margin: 5px 0;
    font-style: italic;
    color: #999;
}

a,tr.clickable-row {
  cursor: pointer;
}

.like-pre {
    white-space: pre-wrap;
}

.v-cent {
  padding-top: 6px;
  padding-left: 6px;
}

button {
  outline: none;
}

.rating-Regressive {
  border-left-color: Red !important;
  border-left-width: 15px !important;
}

.rating-Emerging {
  border-left-color: Orange !important;
  border-left-width: 15px !important;
}

.rating-Growing {
  border-left-color: Yellow !important;
  border-left-width: 15px !important;
}

.rating-Sustainable {
  border-left-color: Green !important;
  border-left-width: 15px !important;
}

@media (max-width: 768px) {
    div .col-xs-3 {
        display: none;
    }
    div .col-xs-9 {
        width: 100%;
    }
}

Make side tabs disappear if the width of the display is too small.


.ol-custom-overviewmap,
.ol-custom-overviewmap.ol-uncollapsible {
  bottom: auto;
  left: auto;
  right: 0;
  top: 0;
}

.ol-custom-overviewmap:not(.ol-collapsed)  {
  border: 1px solid black;
}

.ol-custom-overviewmap .ol-overviewmap-map {
  border: none;
  width: 300px;
}

.ol-custom-overviewmap .ol-overviewmap-box {
  border: 2px solid red;
}

.ol-custom-overviewmap:not(.ol-collapsed) button{
  bottom: auto;
  left: auto;
  right: 1px;
  top: 1px;
}

.ol-rotate {
  top: 170px;
  right: 0;
}

.mapcontainer {
  position: relative;
}

div.ol-custom-overviewmap,
div.ol-custom-overviewmap.ol-uncollapsible {
  bottom: auto;
  left: auto;
  right: 0;
  top: 0;
}

div.ol-custom-overviewmap:not(.ol-collapsed)  {
  border: 1px solid black;
}

div.ol-custom-overviewmap div.ol-overviewmap-map {
  border: none;
  width: 300px;
}

div.ol-custom-overviewmap div.ol-overviewmap-box {
  border: 2px solid red;
}

div.ol-custom-overviewmap:not(.ol-collapsed) button{
  bottom: auto;
  left: auto;
  right: 1px;
  top: 1px;
}

div.ol-rotate {
  top: 170px;
  right: 0;
}

Update CSS to work outside the examples template

The existing CSS doesn't work in CodeSandBox etc where ol/ol.css is imported in the JavaScript


body {
    color: #222;
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif !important;
    font-size: 12pt;
}
a {
    color: #008CBA;
}
.navbar {
    background-color: #333;
}
.navbar-brand  img {
    height: 40px;
    margin: 0px 10px;
}
.navbar-brand {
    padding-top: 10px;
    font-size: 20pt;
}
blockquote {
    font-size: 12pt;
    color: #6F6F6F;
}
.navbar .navbar-version {
    font-size: 9pt !important;
    padding-top: 2px !important;
}

.alert {
    font-size: 12pt;
}
.alert a {
    color: #FFF;
    text-decoration: underline;
}

.footer {
    color: #6F6F6F;
    margin-top: 30px;
    padding-bottom: 30px;
}

.jumbotron p {
    font-size: 16pt;
    color: #333;
}

/* CODE BLOCKS */
.highlight pre {
    font-size: 11pt;
    color: #333;
}

Make code text larger and a bit darker

Make code text larger and a bit darker


/*
 * https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
*/

body { display: flex; flex-flow: column }
body > main  { min-height: 50vh }
body > aside { min-height: 30vh }
body > header, body > footer { min-height: 10vh }

@media (orientation: landscape) {
  body           { flex-flow: row wrap }
  body > main    { flex-basis: 70% }
  body > aside   { flex-basis: 30% }
  body > main,
  body > aside   { min-height: 80vh }
  body > header,
  body > footer  { flex-basis: 100% }
}

@media (min-width:786px) {
  body { margin: auto 5vw }
}

@media (min-width:1300px) {
  body { margin: auto 23vw }
}

Update links for flexbox references

Update links for flexbox references


.strikethrough {
  text-decoration:line-through
}
/*.strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: inherit;

  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}*/

Add css file with styling for completed strikethrough


.App {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
    height: 100%;
}

Add flex to app root

Add flex to app root


header {
  font-size: 36px;
  background-color: #477B7F;
  padding: 5%;
}

.background {
  background-image: url("../pictures/languagesmedium.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: repeat;
  height: 3em;
}

.image_grid {
  list-style: none;
  width: auto;
}

.image_grid li {
  display: inline-block;
  padding: 5px;
  border: 1px solid #DDD;
  vertical-align: bottom;
  max-width: 45%;

}

.image_grid img {
  margin: 5px;
  max-width: 75%;
  height: auto;
}

.question_order {
  font-size: 22px;
  text-decoration: underline;
}
.question
{
  font-size: 28px;
}

.correct_answer {
color: blue;
}

.status {
font-size: 26px;
text-align: center;
}

#correct  {
  color: #19BF19;
}

#incorrect {
  color: #E52622;
}

#submit {
  width: 10em;
  height: 2em;
  font-size: 18px;
}

footer {
  bottom: 0;
  padding: 5%;
  background-color: #477B7F;
}

header {
  font-size: 36px;
  background-color: #477B7F;
  padding: 5%;
}

.background {
  background-image: url("../pictures/languagesmedium.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: repeat;
  height: 3em;
}

.image_grid {
  list-style: none;
  width: auto;
}

.image_grid li {
  display: inline-block;
  padding: 5px;
  border: 1px solid #DDD;
  vertical-align: bottom;
  width: 45%;
  height: 45%;

}

.image_grid img {
  margin: 5px;
  max-width: 75%;
  height: auto;
}

.question_order {
  font-size: 22px;
  text-decoration: underline;
}
.question
{
  font-size: 28px;
}

.correct_answer {
color: blue;
}

.status {
font-size: 26px;
text-align: center;
}

#correct  {
  color: #19BF19;
}

#incorrect {
  color: #E52622;
}

#submit {
  width: 10em;
  height: 2em;
  font-size: 18px;
}

footer {
  bottom: 0;
  padding: 5%;
  background-color: #477B7F;
}

Fix image height and width in grid

Fix image height and width in grid


body {
  background-color: #042545;
  color: #e9e9e9;
}

a {
  color: #60a9e0;
}

a:hover {
  color: #1094f7;
}

.twitter-tweet {
  margin: 0 auto;
}

Change color scheme to dark blue.

Change color scheme to dark blue.


body {
  background-color: #F9F5FC;
}
canvas {
  border: 1px solid #444;
}

.container {
  background-color: #F1EEFA;
  border: 0.5em solid #AAF;
  box-shadow: 0.25em 0.25em 0.25em #444;
  margin: 0 auto;
  padding: 2em;
  text-align: center;
  width: 30em;
}

body {
  background-color: #F9F5FC;
}
canvas {
  border: 1px solid #888;
}

.container {
  background-color: #F1EEFA;
  border: 0.5em solid #AAF;
  box-shadow: 0.25em 0.25em 0.25em #444;
  margin: 0 auto;
  padding: 2em;
  text-align: center;
  width: 30em;
}

Update canvas border color in stylesheet


/* Stop headings from appearing as links when 'contents' is used */
h2 a, h2 a:hover {
    color: inherit;
    text-decoration: none;
}

#contents {
  margin: 0;
  padding: 10px 0 10px 50px;
}

#contents ul {
  margin: 0;
  padding: 0;
}

Adjust toc on examples page

Adjust toc on examples page


@import url('theme.css');

/* Main background color modification */
.btn-info, .wy-menu-vertical a:active, .wy-side-nav-search, .wy-side-nav-search img, .wy-nav .wy-menu-vertical a:hover, .wy-nav-top img, .wy-tray-item-info, .wy-side-nav-search, .wy-dropdown-menu > dd > a:hover, .wy-dropdown-menu a:hover, .wy-nav-top {
    background-color: #d17062;
}

.wy-side-nav-search input[type=text] {
    border-color: #a47224;
}

.rst-content .note .admonition-title {
    background-color: #c9c9c9;
}

.rst-content .note {
    background-color: #e3e3e3;
}

@import url('theme.css');

/* Main background color modification */
.btn-info, .wy-menu-vertical a:active, .wy-side-nav-search, .wy-side-nav-search img, .wy-nav .wy-menu-vertical a:hover, .wy-nav-top img, .wy-tray-item-info, .wy-side-nav-search, .wy-dropdown-menu > dd > a:hover, .wy-dropdown-menu a:hover, .wy-nav-top {
    background-color: #d17062 !important;
}

.wy-side-nav-search input[type=text] {
    border-color: #a47224 !important;
}

.rst-content .note .admonition-title {
    background-color: #c9c9c9 !important;
}

.rst-content .note {
    background-color: #e3e3e3 !important;
}

Add !important to enable our fix for colors


.benchmarks .axis path,
.benchmarks .axis line {
        fill: none;
        stroke: grey;
        shape-rendering: crispEdges;
}

.benchmarks text {
    font-family: sans-serif;
    pointer-events: none;
    font-size: 10px;
}

.benchmarks .label {
        font-size: 12px;
}

.benchmarks .xaxis text {
        font-weight: bold;
        font-size: 11px;
}

.benchmarks rect.background {
    opacity: 0;
}

.benchmarks .axis path,
.benchmarks .axis line {
    fill: none;
    stroke: grey;
    shape-rendering: crispEdges;
}

.benchmarks text {
    font-family: sans-serif;
    pointer-events: none;
    font-size: 10px;
}

.benchmarks .label {
    font-size: 12px;
}

.benchmarks .xaxis text {
    font-weight: bold;
    font-size: 11px;
    text-shadow: -1px -1px #fff;
}

.benchmarks rect.background {
    opacity: 0;
}

Add text shadow, and whitespace fixes

Add text shadow, and whitespace fixes


body {
  font-family: 'source_sans_pro', sans;
  margin: 0;
  line-height:  1.5rem;
  font-size: 1rem;
  font-weight: 300;
}
.site {
  max-width: 600px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul {
  padding-left: 2.1rem;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

article img {
  max-width: 100%;
  height: auto;

}
.bloglist .author {
  display: none;
}
.bloglist li:hover .author {
  display: inline;
}
@media only screen and (max-width: 500px) {
  :root {
    font-size: 90%;
  }
}
@media only screen and (min-width: 500px) and (max-width: 800px) {
  :root {
    font-size: 100%;
  }
}

@media only screen and (min-width: 800px) {
  :root {
    font-size: 120%;
  }
}

body {
  font-family: 'source_sans_pro', sans;
  margin: 0;
  line-height:  1.5rem;
  font-size: 1rem;
  font-weight: 300;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}
.site {
  max-width: 600px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul {
  padding-left: 2.1rem;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

article img {
  max-width: 100%;
  height: auto;

}
.bloglist .author {
  display: none;
}
.bloglist li:hover .author {
  display: inline;
}
@media only screen and (max-width: 500px) {
  :root {
    font-size: 90%;
  }
}
@media only screen and (min-width: 500px) and (max-width: 800px) {
  :root {
    font-size: 100%;
  }
}

@media only screen and (min-width: 800px) {
  :root {
    font-size: 120%;
  }
}

Use bold font for headings. (Just in case, should already be in UAs stylesheets.)


body {
    font-family: 'Ubuntu', sans-serif;
}

.input {
    font-family: 'Ubuntu', sans-serif;
}

Correct font family for input elements

Correct font family for input elements


* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.container {
    width: 95%;
    max-width: 960px;
    margin: 0 auto;
}

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

html {
    font: 400 16px/1.5em sans-serif;
}

img {
    max-width: 100%;
    vertical-align: middle;
}

table {
    width: 100%;
}

.container {
    width: 95%;
    max-width: 960px;
    margin: 0 auto;
}

/* Utility class */

.cf:after {
    display: table;
    clear: both;
    content: '';
}

.sr-only {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Add utility classes and misc. base CSS properties


body {
    background: lightgray;
    font-family: sans-serif;
}

.title {
    font-size: 30px;
    line-height: 40px;
    padding-left: 10px;
}

.framework {
    width: 680px;
    background: #0cc3ff
}

.title {
    color: white;
}

#root {
    background: #00b2ed;
}

body {
    background: lightgray;
    font-family: monospace;
}

.title {
    font-size: 30px;
    line-height: 40px;
    padding-left: 10px;
}

.framework {
    width: 680px;
    background: #0cc3ff
}

.title {
    color: white;
}

#root {
    background: #00b2ed;
}

Change of font to better see capital I

Change of font to better see capital I


.updated-text {
  position: absolute;
  left: 0;
  right: 0;
  padding: 10px 0;
  font-size: 11px;
  text-align: center;
}

.table-view-cell .icon {
  color: #007aff;
}

.map {
    width: 100%;
    height: 100%;
}

.map__search {
    position: absolute;
    margin: 0 4%;
    width: 92% !important;
    top: 2%;
}

.updated-text {
  position: absolute;
  left: 0;
  right: 0;
  padding: 10px 0;
  font-size: 11px;
  text-align: center;
}

.table-view-cell .icon {
  color: #007aff;
}

.map {
    width: 100%;
    height: 100%;
}

.map__search {
    position: absolute;
    margin: 0 4%;
    width: 92% !important;
    top: 4%;
}

Add more space in top

Add more space in top


.logo {
  margin: 0;
  margin-bottom: .25em;
}

.bigLogo {
  composes: logo;
  font-size: 64px;
}

.headerLogo {
  composes: logo;
  font-size: 24px;
}

.logoWrapper {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  padding-top: 15px;
  padding-bottom: 10px;
  width: 100%;
}

/* Targets the wrapping element of <ReactCSSTransitionGroup /> */
.logoWrapper span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.logo {
  margin: 0;
  margin-bottom: .25em;
}

.bigLogo {
  composes: logo;
  font-size: 64px;
}

.headerLogo {
  composes: logo;
  font-size: 24px;
}

.logoWrapper {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  padding-top: 15px;
  padding-bottom: 10px;
  width: 100%;
}

/* Targets the wrapping element of <ReactCSSTransitionGroup /> */
.logoWrapper span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

Change position to absolute for header logo (edit mode)


/* https://bitsofco.de/holy-grail-layout-css-grid */
:root {
  --lighter:  #ccc;
  --lightest: #fff;
  --darker:   #999;
  --darkest:  #444;
  --background: pink;
}

header, footer
  { background: var(--darker) }

aside
  { background: var(--background) }

/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout */

/* https://bitsofco.de/holy-grail-layout-css-grid */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout */

:root {
  --lighter:  #ccc;
  --lightest: #fff;
  --darker:   #999;
  --darkest:  #444;
  --background: pink;
}

header, footer
  { background: var(--darker) }

aside
  { background: var(--background) }

/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout */

Migrate link to CSS grid layout

Migrate link to CSS grid layout


/* Three columns: 100px each */

.grid-container {
    display: grid;
    grid-template-columns: 0.5fr 0.5fr;
    grid-template-rows: calc(100vh);
    grid-gap: 1rem;
    margin: 0rem;
}

.editor-container {
    height: calc(100vh)
}

/* Three columns: 100px each */

.grid-container {
    display: grid;
    grid-template-columns: 0.5fr 0.5fr;
    grid-template-rows: calc(100vh);
    grid-gap: 1rem;
    margin: 0rem;
}

#editor-container > div {
    height: calc(100vh)
}

Make editor the full viewport height

Make editor the full viewport height


@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

treechildren::-moz-tree-image(siteCol){
	list-style-image:url(chrome://global/skin/global.png);
	-moz-image-region:rect(144px 16px 160px 0);
	width:16px;
	height:16px;
	-moz-margin-end:3px}

Fix favicon sizes in password manager

Fix favicon sizes in password manager


.dev-documentation {
  padding-top: 2rem;
  padding-bottom: 1rem;
}

.dev-documentation h1 {
  padding-left: 4rem;
  margin-bottom: 0.6em;
}

.dev-documentation__section {
  margin-bottom: 2rem;
  padding: 0 0 4rem 4rem;
  border-width: 3px;
  border-color: #ddd;
  border-bottom-style: solid;
}

.dev-documentation__section:last-of-type {
  border-bottom: none;
}

@media screen and (max-width: 50em) {
  .dev-documentation h1 {
    padding-left: 1rem;
  }

  .dev-documentation__section {
    padding: 0 0 1rem 1rem;
  }

  .dev-documentation__section:last-of-type {
    padding-bottom: 1rem;
  }
}

.dev-documentation {
  padding-top: 3rem;
  padding-bottom: 1rem;
}

.dev-documentation h1 {
  padding-left: 4rem;
  margin-bottom: 0.6em;
}

.dev-documentation__section {
  margin-bottom: 3rem;
  padding: 0 2rem 3rem 4rem;
  border-width: 2px;
  border-color: hsl(0, 0%, 86%);
  border-bottom-style: solid;
}

.dev-documentation__section:last-of-type {
  border-bottom: none;
}

@media screen and (max-width: 50em) {
  .dev-documentation h1 {
    padding-left: 1rem;
  }

  .dev-documentation__section {
    padding: 0 1rem 1rem 1rem;
  }

  .dev-documentation__section:last-of-type {
    padding-bottom: 1rem;
  }
}

Adjust docs spacing and typography

Adjust docs spacing and typography


@charset "utf-8";

/*
 * JScript Render - Html styles
 * http://www.pleets.org
 *
 * Copyright 2014, Pleets Apps
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

tr.success { background: rgba(0,255,0,0.5); }
.relative { position: relative; }
.absolute { position: absolute; }
.pointer { cursor: pointer; }
button { cursor: pointer; }

.align-down-out { position: absolute; bottom: 0; left: 0; }
.list-box { background: white; width: 220px; padding: 2px; box-shadow: rgb(20, 20, 20) 0px 0px 3px; border-radius: 4px; }

.list-box .item { border: solid 1px rgb(230, 230, 230); padding: 2px; margin: 0; font-size: inherit; color: rgb(60, 60, 60); display: block; background: white; width: 100%;
	-webkit-transition: 0.2s all;
	-moz-transition: 0.2s all;
	-ms-transition: 0.2s all;
	-o-transition: 0.2s all;
	transition: 0.2s all;
}
.list-box .item:nth-child(odd) { background: rgb(240, 240, 240); }
.list-box .item:hover { background: rgb(50, 50, 50); color: white; }

/* item borders */
.list-box .item { border-top: none !important; }
.list-box .item:first { border-top: solid 1px rgb(230, 230, 230); }

/* Open Sans Font */
.open-sans-font { font-family: "Open Sans", Helvetica, Arial, sans-serif; }

Add simple list box styles

Add simple list box styles


body {
	/*background: #1a3a4e;*/
	color: #E4F1FE;
	font-family: 'Open Sans', Helvetica, sans-serif;
	width: 50%;
	background: linear-gradient(to bottom, #0a4871, #1a3a4e);
	margin: 50px auto;
}

ul {
	color: #E4F1FE;
}

h1 {
	margin-top: 30px;
	font-weight: 200;
}

.me-on-internet div {
	margin-right: 20px;
	display: inline;
}

footer {
	margin-top: 100px;
}

a:link {
	color: #bdc3c7;
	text-decoration: none;
}

a:visited {
	color: #95a5a6 ;
}

#bio-list {
	list-style-type: none;
}

#bio-list li {
	margin-bottom: 10px;
	display: inline-block;
	width: 100%;
}

@media (max-width: 480px) {
	ul {
		padding-left: 0;
	}
	body {
		margin: 2.5% 0 0 2.5%;
		width: 95%;
	}

}

body {
  background-color: black;
  color: #55ff55;
  font-family: monospace;
}
.output {
  color: white;
}
.active:after {
  content: '_';
}

Add new css for terminal

Add new css for terminal


.post-list { clear: both; width: 100%; margin: 0 0 2em 0; }
.post-list::after { display:block; content:""; clear: both; }
.post-list {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
.post {width: 50% !important; max-width: 50%}
.post { display: block; }
.post-icon { position: relative; z-index: 9;  -webkit-transition: opacity .2s ease; -moz-transition: opacity .2s ease; -ms-transition: opacity .2s ease; -o-transition: opacity .2s ease; transition: opacity .2s ease; }
.post-icon a { display: block; width: 100%; height: 100%; position: relative; z-index: 9; }
.post-icon img { max-width: 100%; height: auto; margin: 0px; }

@media screen and (max-height: 480px) {
	/*header smaller space*/
	#header { padding-top: 2em; }
	.post-list .post .grid-sizer {width: 98% !important;}
}

@media screen and (max-width: 640px) and (orientation: portrait) {
	/*galleries adapted*/
	.post-list .post .grid-sizer {width: 98% !important;}

.post-list { clear: both; width: 100%; margin: 0 0 2em 0; }
.post-list::after { display:block; content:""; clear: both; }
.post-list {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
.post {width: 50% !important; max-width: 50%}
.post { display: block; }
.post-icon { position: relative; z-index: 9;  -webkit-transition: opacity .2s ease; -moz-transition: opacity .2s ease; -ms-transition: opacity .2s ease; -o-transition: opacity .2s ease; transition: opacity .2s ease; }
.post-icon a { display: block; width: 100%; height: 100%; position: relative; z-index: 9; }
.post-icon img { max-width: 100%; height: auto; margin: 0px; }

@media screen and (max-height: 480px) {
	/*header smaller space*/
	#header { padding-top: 2em; }
	.post-list .post .grid-sizer {width: 98% !important;}
}

@media screen and (max-width: 640px) {
	/*galleries adapted*/
	.post-list .post .grid-sizer {width: 98% !important;}

Fix post layout on low rez screen

Fix post layout on low rez screen


html,body{margin:0;padding:0}body{background:#1a1826 url("http://i.cubeupload.com/SNA1S0.png") no-repeat fixed left top}.mainmenufooter a{color:#ccc}.mainmenufooter a:hover{color:#e5e5e5}.menugroup .button{color:#fff;border:solid 1px #000;background:#333}.menugroup .button:hover{color:#fff;border:solid 1px #000;background:#262626}.menugroup .button:active{color:#fff;border:solid 1px #000;background:#262626}.broadcast-lobby{color:#fff;background-color:#1a1826;padding:5px 7px;margin:0 auto;}

html,body{margin:0;padding:0}body{background:#230d26 url("http://i.cubeupload.com/aH9W6i.png") no-repeat fixed left top}.mainmenufooter a{color:#ccc}.mainmenufooter a:hover{color:#e5e5e5}.menugroup .button{color:#fff;border:solid 1px #000;background:#333}.menugroup .button:hover{color:#fff;border:solid 1px #000;background:#262626}.menugroup .button:active{color:#fff;border:solid 1px #000;background:#262626}.broadcast-lobby{color:#fff;background-color:#230d26;padding:5px 7px;margin:0 auto;}

Add a background for the New Year

Add a background for the New Year


@import '../../../css/colors.css';

.wrapper {
  padding: 1rem;
  margin-bottom: 1rem;

  border: 1px solid var(--semantic-dark-grey);
  border-radius: 5px;

  display: flex;
  flex-direction: column;

  @media(min-width: 1040px) {
    flex-shrink: 1;
    flex-basis: 11rem;
  }

  .label-input-wrapper {
    align-self: center;

    input {
      font-weight: bold;
      text-align: center;
    }
  }

  .list {
    border-top: 1px solid var(--semantic-divider-border-top-color);
    list-style: none;
    margin: 1rem 0 0 0;
    padding: 0;
  }
}

@import '../../../css/colors.css';

.wrapper {
  padding: 1rem;
  margin: 1px;

  border: 1px solid var(--semantic-dark-grey);
  border-radius: 5px;

  display: flex;
  flex-direction: column;

  @media(min-width: 1040px) {
    flex-shrink: 1;
    flex-basis: 11rem;
  }

  .label-input-wrapper {
    align-self: center;

    input {
      font-weight: bold;
      text-align: center;
    }
  }

  .list {
    border-top: 1px solid var(--semantic-divider-border-top-color);
    list-style: none;
    margin: 1rem 0 0 0;
    padding: 0;
  }
}

Apply even margins between IdeaGroups

Apply even margins between IdeaGroups


.charInfo {
    clear: both;
    padding: 20px;
    margin: 3px -3px;
    background-color: #EEE;
    border: 3px solid rgba(82,168,236,0.1);
    overflow: auto;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.charInfo section,
.charInfo table {
    float: left;
}

.charInfo section {
    text-align: center;
    margin-right: 20px;
}

.charInfo h2 {
    font-size: 6em;
    line-height: 1em;
    margin-bottom: 10px;
}

.charInfo p {
    font-style: italic;
}

.charInfo table {
    border: 1px solid #666;
    padding: 10px;
}

.charInfo th {
    text-align: right;
    padding-right: 10px;
}

Convert from DOS to UNIX line-endings.

Convert from DOS to UNIX line-endings.


/* Common Styling */

body{
    background: #fff;
    color:#222;
    font-family: 'Roboto',Verdana,Helevetica;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
}

/* Layout */

main{
    max-width: 500px;
    margin: 10em auto 1em;
    padding: 1em;
}

li{
    display: inline-block;
    margin: 0 auto;
    text-align: center;
}

/* Styling */

li a{
    text-decoration: none;
}

a{
    font-weight: 300;
    color: inherit;
    text-decoration: underline;
}

a:hover{
    opacity: 0.8;
}

h2{
    font-weight: 300;
}

Add layout and basic styling

Add layout and basic styling


body {
  font-family: 'source_sans_pro', sans;
  margin: 0;
  line-height:  1.5rem;
  font-size: 1rem;
}
.site {
  max-width: 600px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul {
  padding-left: 2.1rem;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

article img {
  max-width: 100%;
  height: auto;

}
.bloglist .author {
  display: none;
}
.bloglist li:hover .author {
  display: inline;
}
@media only screen and (max-width: 500px) {
  :root {
    font-size: 90%;
  }
}
@media only screen and (min-width: 500px) and (max-width: 800px) {
  :root {
    font-size: 100%;
  }
}

@media only screen and (min-width: 800px) {
  :root {
    font-size: 120%;
  }
}

body {
  font-family: 'source_sans_pro', sans;
  margin: 0;
  line-height:  1.5rem;
  font-size: 1rem;
  font-weight: 300;
}
.site {
  max-width: 600px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul {
  padding-left: 2.1rem;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

article img {
  max-width: 100%;
  height: auto;

}
.bloglist .author {
  display: none;
}
.bloglist li:hover .author {
  display: inline;
}
@media only screen and (max-width: 500px) {
  :root {
    font-size: 90%;
  }
}
@media only screen and (min-width: 500px) and (max-width: 800px) {
  :root {
    font-size: 100%;
  }
}

@media only screen and (min-width: 800px) {
  :root {
    font-size: 120%;
  }
}

Use Source Sans Light instead of Regular. (Looks better.)


body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
  background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
}

.card {
  margin: 4rem 0 4rem 0;
}

.input-field label {
  color: #000;
}

.range-field-wrapper .range-field {
  margin-top: 1rem !important;
  padding-top: 0;
}

.modal.bottom-sheet {
  max-height: 70%;
}

.field-title {
  font-size: 0.8rem;
}

#medication .col .card {
  margin-top: 0;
}

.radio-inline {
  display: inline;
  margin-right: 2rem;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
  background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
}

.card {
  margin: 4rem 0 4rem 0;
}

.input-field label {
  color: #000;
}

.tabs-fixed-width {
  overflow-x: hidden;
}

.range-field-wrapper .range-field {
  margin-top: 1rem !important;
  padding-top: 0;
}

.modal.bottom-sheet {
  max-height: 70%;
}

.field-title {
  font-size: 0.8rem;
}

#medication .col .card {
  margin-top: 0;
}

.radio-inline {
  display: inline;
  margin-right: 2rem;
}

Fix scrollbar appearing on last tab bug

Fix scrollbar appearing on last tab bug


body {
  // text-align: center;
}

.artist {
  border-bottom: 1px solid #dddddd;
  cursor: pointer;
  padding: 10px;
  margin: 0;
}

.artist:first-child {
    border-top-left-radius: 2px;
}

.artist:last-child {
    border-bottom-left-radius: 2px;
}

.artist-name {
  margin-top: 5px;
  display: block;
}

#search-artist-list .artist:hover {
  background-color: #eeeeee;
}

.artist img {
  max-width: 32px;
}

.artist-search {
  margin-bottom: 20px;
}

.artist-list {
  overflow-y: scroll;
  min-height: 300px;
  max-height: 500px;
}

#selected-artist-list .artist:hover {
  background-color: red;
}

.artist-choose-component {
  margin: 30px 0;
}

footer {
  margin-top: 30px;
}

body {
  // text-align: center;
}

.artist {
  border-bottom: 1px solid #dddddd;
  cursor: pointer;
  padding: 10px;
  margin: 0;
}

.artist:first-child {
    border-top-left-radius: 2px;
}

.artist:last-child {
    border-bottom-left-radius: 2px;
}

.artist-name {
  margin-top: 5px;
  display: block;
}

#search-artist-list .artist:hover {
  background-color: #eeeeee;
}

.artist img {
  max-width: 32px;
}

.artist-search {
  margin-bottom: 20px;
}

.artist-list {
  overflow-y: scroll;
  height: 300px;
}

#selected-artist-list .artist:hover {
  background-color: red;
}

.artist-choose-component {
  margin: 30px 0;
}

footer {
  margin-top: 30px;
}

Fix height of artist lists

Fix height of artist lists


body {
  background-color: #336;
  text-align: center;
}
canvas {
  background-color: #000;
  border: 4px solid #FF4;
  border-radius: 12px;
  margin: 3em;
}

#debug {
  background-color: #000;
  color: #FFF;
  font-family: monospace;
  height: 100px;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100px;
}

body {
  background-color: #336;
  text-align: center;
}
canvas {
  background-color: #000;
  border: 4px solid #FF4;
  border-radius: 12px;
  margin: 3em;
}

#debug {
  background-color: #000;
  color: #FFF;
  display: none;
  font-family: monospace;
  height: 180px;
  left: 0px;
  padding: 1em;
  position: absolute;
  text-align: left;
  top: 0px;
  width: 180px;
}

Update styling for debug area

Update styling for debug area


@import url(http://fonts.googleapis.com/css?family=Lato:300);

body {
  background-color: #2d2d2d;
  font-family: 'Lato';
  color: white;
  font-weight: 300;
}

body /deep/ h1 {
  font-weight: 300;
  text-transform: uppercase;
  font-size: 42px;
}

@import url(https://fonts.googleapis.com/css?family=Lato:300);

body {
  background-color: #2d2d2d;
  font-family: 'Lato';
  color: white;
  font-weight: 300;
}

body /deep/ h1 {
  font-weight: 300;
  text-transform: uppercase;
  font-size: 42px;
}

Use SSL for font stylesheet to stay secure


/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

.jp-LogConsoleIcon {
  background-image: var(--jp-icon-output-console);
}

@keyframes flash {
  0% {
    background-color: var(--jp-brand-color1);
  }
  50% {
    color: unset;
    background-color: unset;
  }
  100% {
    background-color: var(--jp-brand-color1);
  }
}

.jp-LogConsoleStatusItem.jp-LogConsole-flash {
  animation: flash 300ms both;
}

.jp-LogConsoleStatusItem.jp-mod-selected {
  background-color: var(--jp-brand-color1);
}

/* Need to be very specific to override the typestyle styles on status bar components */
.jp-LogConsoleStatusItem.jp-mod-selected,
.jp-LogConsoleStatusItem.jp-mod-selected div,
.jp-LogConsoleStatusItem.jp-mod-selected div span {
  color: white;
}

.jp-LogConsole .clear-icon {
  transform: rotate(90deg);
  margin-top: -1px;
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

.jp-LogConsoleIcon {
  background-image: var(--jp-icon-list);
}

@keyframes flash {
  0% {
    background-color: var(--jp-brand-color1);
  }
  50% {
    color: unset;
    background-color: unset;
  }
  100% {
    background-color: var(--jp-brand-color1);
  }
}

.jp-LogConsoleStatusItem.jp-LogConsole-flash {
  animation: flash 300ms both;
}

.jp-LogConsoleStatusItem.jp-mod-selected {
  background-color: var(--jp-brand-color1);
}

/* Need to be very specific to override the typestyle styles on status bar components */
.jp-LogConsoleStatusItem.jp-mod-selected,
.jp-LogConsoleStatusItem.jp-mod-selected div,
.jp-LogConsoleStatusItem.jp-mod-selected div span {
  color: white;
}

.jp-LogConsole .clear-icon {
  transform: rotate(90deg);
  margin-top: -1px;
}

Fix log console tab icon

Fix log console tab icon


.ViewDocuments td
{
	padding:4px;
	vertical-align:top;
 	white-space:nowrap
}

.ViewDocuments .SizeCell,
.ViewDocuments .ClicksCell
{
	text-align:right;
}

.ViewDocuments .TitleCell { width:33% }
}

.ViewDocuments .DescriptionCell { white-space:normal }

.ViewDocuments ._nonpublished { background-color:#ffc }

.ViewDocuments .dnnGrid { margin-bottom:0 }

/* DnnDateTimePicker style fix */

.dnnEditDocs .RadPicker_Default
{
	/* override inline style */
	height:33px!important;
}

.dnnEditDocs .RadPicker_Default .riTextBox
{
	height:33px;
}

/* end fix */

.dnnEditDocs{width:100%;margin:2em auto;}
.dnnEditDocs .dnnFormItem input[type=checkbox], .dnnTabsModule .dnnFormItem input[type=radio]{width:auto;}
.dnnEditDocs .dnnRight{display:block;width: 68%;}
.dnnEditDocs .urlControl br{display:block;}
.dnnEditDocs .urlControl > label{display:block;float: none;text-align:left;}

.ViewDocuments td
{
	padding:4px;
	vertical-align:top;
 	white-space:nowrap
}

.ViewDocuments .SizeCell,
.ViewDocuments .ClicksCell
{
	text-align:right;
}

.ViewDocuments .TitleCell { width:33% }

.ViewDocuments .DescriptionCell { white-space:normal }

.ViewDocuments ._nonpublished { background-color:#ffc }

.ViewDocuments .dnnGrid { margin-bottom:0 }

/* DnnDateTimePicker style fix */

.dnnEditDocs .RadPicker_Default
{
	/* override inline style */
	height:33px!important;
}

.dnnEditDocs .RadPicker_Default .riTextBox
{
	height:33px;
}

/* end fix */

.dnnEditDocs{width:100%;margin:2em auto;}
.dnnEditDocs .dnnFormItem input[type=checkbox], .dnnTabsModule .dnnFormItem input[type=radio]{width:auto;}
.dnnEditDocs .dnnRight{display:block;width: 68%;}
.dnnEditDocs .urlControl br{display:block;}
.dnnEditDocs .urlControl > label{display:block;float: none;text-align:left;}

Fix type in last commit

Fix type in last commit


.text-layer {
    font-family: Monaco, "Courier New", monospace;
    font-size: 12pX;
    cursor: text;
}

.blinker {
    animation-duration: 1s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

@keyframes blink {
    0%, 40% {
        opacity: 0;
    }

    40.5%, 100% {
        opacity: 1
    }
}

.text-layer {
    font: 12px Monaco, "Courier New", monospace;
    cursor: text;
}

.blinker {
    animation: blink 1s linear infinite alternate;
}

@keyframes blink {
    0%, 40% {
        opacity: 0;
    }

    40.5%, 100% {
        opacity: 1
    }
}

Use animation and font shorthand

Use animation and font shorthand


/**
 * Blackboard theme
 *
 * Adapted from Domenico Carbotta's TextMate theme of the same name
 *
 * @author Domenico Carbotta
 * @author Craig Campbell
 * @version 1.0.2
 */
pre {
    background: #0B1022;
    word-wrap: break-word;
    margin: 0px;
    padding: 0px;
    padding: 10px;
    color: #fff;
    font-size: 14px;
    margin-bottom: 20px;
}

pre, code {
    font-family: 'Monaco', courier, monospace;
}

pre .comment {
    color: #727272;
}

pre .constant {
    color: #D8FA3C;
}

pre .storage {
    color: #FBDE2D;
}

pre .string, pre .comment.docstring {
    color: #61CE3C;
}

pre .string.regexp, pre .support.tag.script, pre .support.tag.style {
    color: #fff;
}

pre .keyword, pre .selector {
    color: #FBDE2D;
}

pre .inherited-class {
    font-style: italic;
}

pre .entity {
    color: #FF6400;
}

pre .support {
    color: #8DA6CE;
}

pre .variable.global, pre .variable.class, pre .variable.instance {
    color: #FF6400;
}

/**
 * Blackboard theme
 *
 * Adapted from Domenico Carbotta's TextMate theme of the same name
 *
 * @author Domenico Carbotta
 * @author Craig Campbell
 * @version 1.0.2
 */
pre {
    background: #0B1022;
    word-wrap: break-word;
    margin: 0px;
    padding: 0px;
    padding: 10px;
    color: #fff;
    font-size: 14px;
    margin-bottom: 20px;
}

pre, code {
    font-family: 'Monaco', courier, monospace;
}

pre .comment {
    color: #727272;
}

pre .constant {
    color: #D8FA3C;
}

pre .storage {
    color: #FBDE2D;
}

pre .string, pre .comment.docstring {
    color: #61CE3C;
}

pre .string.regexp, pre .support.tag.script, pre .support.tag.style {
    color: #fff;
}

pre .keyword, pre .selector {
    color: #FBDE2D;
}

pre .inherited-class {
    font-style: italic;
}

pre .entity {
    color: #FF6400;
}

pre .support, *[data-language="c"] .function.call {
    color: #8DA6CE;
}

pre .variable.global, pre .variable.class, pre .variable.instance {
    color: #FF6400;
}

Handle C function calls in the CSS theme


#disqus_thread a {
  text-decoration: underline;
}
.container li a { text-decoration: underline; }

.intro-header {
  -webkit-transition: background-image 2s ease-in-out;
  -moz-transition: background-image 2s ease-in-out;
  -ms-transition: background-image 2s ease-in-out;
  -o-transition: background-image 2s ease-in-out;
  transition: background-image 2s ease-in-out;
}

/**
 * For tag cloud and archives
 * http://blog.meinside.pe.kr/Adding-tag-cloud-and-archives-page-to-Jekyll/
 */
.tag-cloud {
  list-style: none;
  padding: 0;
  text-align: justify;
  font-size: 16px;
  li {
    display: inline-block;
    margin: 0 12px 12px 0;
  }
}
#archives {
  padding: 5px;
}
.archive-group {
  margin: 5px;
  border-top: 1px solid #ddd;
}
.archive-item {
  margin-left: 5px;
}
.post-tags {
  text-align: right;
}

.navbar {
  background-color: rgba(0, 0, 0, 0.3);
}

#disqus_thread a {
  text-decoration: underline;
}
.container li a { text-decoration: underline; }

.intro-header {
  -webkit-transition: background-image 2s ease-in-out;
  -moz-transition: background-image 2s ease-in-out;
  -ms-transition: background-image 2s ease-in-out;
  -o-transition: background-image 2s ease-in-out;
  transition: background-image 2s ease-in-out;
}

/**
 * For tag cloud and archives
 * http://blog.meinside.pe.kr/Adding-tag-cloud-and-archives-page-to-Jekyll/
 */
.tag-cloud {
  list-style: none;
  padding: 0;
  text-align: justify;
  font-size: 16px;
  li {
    display: inline-block;
    margin: 0 12px 12px 0;
  }
}
#archives {
  padding: 5px;
}
.archive-group {
  margin: 5px;
  border-top: 1px solid #ddd;
}
.archive-item {
  margin-left: 5px;
}
.post-tags {
  text-align: right;
}

@media screen and (min-width: 768px) {
  .navbar {
    background-color: rgba(0, 0, 0, 0.3);
  }
}

Fix menu on screens under 768px wide

Fix menu on screens under 768px wide


/*
Date: 24 Fev 2015
Author: Pedro Oliveira <kanytu@gmail . com>
*/

.hljs
{
  color: #A9B7C6;
  background: #282b2e;
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  webkit-text-size-adjust: none;
}
.hljs-number
{
  color: #6897BB;
}

.hljs-keyword, .hljs-deletion
{
  color: #CC7832;
}
.hljs-javadoc
{
  color: #629755;
}
.hljs-comment
{
  color: #808080;
}
.hljs-annotation
{
  color: #BBB529;
}
.hljs-string, .hljs-addition
{
  color: #6A8759;
}
.hljs-function .hljs-title, .hljs-change
{
  color: #FFC66D;
}
.hljs-tag .hljs-title, .hljs-doctype
{
  color: #E8BF6A;
}
.hljs-tag .hljs-attribute
{
  color: #BABABA;
}
.hljs-tag .hljs-value
{
  color: #A5C261;
}

Put curly brace on same line

Put curly brace on same line


.select { margin: 0px; }

body {
bgcolor : #999999;
background= 'images/backstripes.gif';
padding-top : 0;
padding-right : 0;
padding-bottom : 0;
padding-left : 0;
border-top-width : 0;
border-right-width : 0;
border-bottom-width : 0px;
border-left-width : 0;
margin : 0;
}

Put body style info in CSS file.

Put body style info in CSS file.


.controls {
  margin-bottom: 25px;
}

.controls .btn {
  min-width: 45px;
}

.cells table {
  border-style: solid;
  border-width: 1px;
}
.cells td {
  width: 20px;
  height: 20px;
}

.cells td.alive {
  background-color: black;
}

.cells td.dead {
  background-color: white;
}

.cells {
  margin-bottom: 25px;
}

@keyframes fadeIn {
  0% {
    transform: scale(0.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.cells .alive {
  animation-duration: 0.05s;
  animation-name: fadeIn;
}

.dimensions input.form-control {
  width: 80px;
}

.dimensions input[type='range'] {
  min-width: 200px;
  height: 22px;
}

.dimensions .speed p.form-control-static {
  min-width: 28px;
  text-align: right;
}

.controls {
  margin-bottom: 25px;
}

.controls .btn {
  min-width: 45px;
}

.controls .play {
  min-width: 85px;
}

.controls .pause {
  min-width: 85px;
}

.cells table {
  border-style: solid;
  border-width: 1px;
}
.cells td {
  width: 20px;
  height: 20px;
}

.cells td.alive {
  background-color: black;
}

.cells td.dead {
  background-color: white;
}

.cells {
  margin-bottom: 25px;
}

@keyframes fadeIn {
  0% {
    transform: scale(0.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.cells .alive {
  animation-duration: 0.05s;
  animation-name: fadeIn;
}

.dimensions input.form-control {
  width: 80px;
}

.dimensions input[type='range'] {
  min-width: 200px;
  height: 22px;
}

.dimensions .speed p.form-control-static {
  min-width: 28px;
  text-align: right;
}

Make play/pause always have the same size


.navbar-startpage {
    margin-bottom: 0;
    background-color: #856304;
    color: #e7c568;
}

.navbar-icon-startpage:hover, .navbar-icon:active, navbar-icon:link {
    color: #e7c568;
}

.navbar-organism {
    margin-bottom: 0;
    background-color: #035656;
    color: #31879f;
}

.navbar-icon-organism:hover, .navbar-icon:active, navbar-icon:link {
    color: #31879f;
}

.navbar-startpage {
  margin-bottom: 0;
  background-color: #A6750E;
  color: #ebc677; }

.navbar-icon-startpage:hover, .navbar-icon:active, navbar-icon:link {
  color: #ebc677; }

.navbar-organism {
  margin-bottom: 0;
  background-color: #076565;
  color: #41b1b1; }

.navbar-icon-organism:hover, .navbar-icon:active, navbar-icon:link {
  color: #41b1b1; }

/*# sourceMappingURL=navigation.css.map */

Create new css file for defining flexible css classes


.contact-form {
		text-align: left;
}

.contact-form .fields label{

    text-align: left;
    margin-right: 0.5em;
    display: block;
}

.contact-form .fields input{
    display: block;
    height:15pt;
    width:230px;
    max-width:100%;
    max-height:100%;
}

.contact-form .fields textarea{
    top:50px;
    left:30px;
    width:230px;
    height:15pt;
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
}

.contact-form .fields textarea:focus {
    border: 2px solid #333;
    border-radius:5px;
    /*background-color:#000001; */
    top:0;
    left:0;
    height:200px;
    width:300px;
    max-width:100%;
    max-height:100%;
}

.contact-form .fields input:hover,
.contact-form .fields textarea:hover,
.contact-form .fields input:focus
{
    border: 2px solid #333;
    border-radius:5px;
}

.contact-form .fields .errorlist{
	color: #F00;
}

.contact-form {
		text-align: left;
}

.contact-form .fields label{

    text-align: left;
    margin-right: 0.5em;
    display: block;
}

.contact-form .fields input{
    display: block;
    height:15pt;
    width:230px;
    max-width:80%;
    max-height:80%;
}

.contact-form .fields textarea{
    top:50px;
    left:30px;
    width:230px;
    height:15pt;
    max-width:80%;
    max-height:80%;
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
}

.contact-form .fields textarea:focus {
    border: 2px solid #333;
    border-radius:5px;
    /*background-color:#000001; */
    top:0;
    left:0;
    height:200px;
    width:300px;
    max-width:80%;
    max-height:80%;
}

.contact-form .fields input:hover,
.contact-form .fields textarea:hover,
.contact-form .fields input:focus
{
    border: 2px solid #333;
    border-radius:5px;
}

.contact-form .fields .errorlist{
	color: #F00;
}

Fix rendering of form on mobiles.

Fix rendering of form on mobiles.

Makes max width of fields 80%


.div{
  background-color: #efefef;

}
.btnhide{
  float:right;
  margin-bottom: 20px;
  margin-top: -45px;
}

.searchbar{
  margin-bottom: 100px;
}

.title{
  font-size: 30px;
}

.smallTitle{
  color: lightgray;
  display: inline;
  font-size: 15px;
}

.panel{
margin-bottom: 0px !important;
}

.closed{
  content: ' ';
  height: 0;
  position: relative;
  width: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 25px solid #464545;

  /* positioning */
  left: 48%;
  z-index: 1;
}

.open{
  content: ' ';
  height: 0;
  position: relative;
  width: 0;
  border-right: 25px solid transparent;
  border-bottom: 25px solid #464545;
  border-left: 25px solid transparent;

  left: 48%;
  bottom: 25px;
  z-index: 1;
}

.div{
  background-color: #efefef;

}
.btnhide{
  float:right;
  margin-bottom: 20px;
  margin-top: -45px;
}

.searchbar{
  margin-bottom: 150px;
}

.title{
  font-size: 30px;
}

.smallTitle{
  color: lightgray;
  display: inline;
  font-size: 15px;
}

.panel{
margin-bottom: 0px !important;
}

.closed{
  content: ' ';
  height: 0;
  position: relative;
  width: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 25px solid #464545;

  /* positioning */
  left: 48%;
  z-index: 1;
}

.open{
  content: ' ';
  height: 0;
  position: relative;
  width: 0;
  border-right: 25px solid transparent;
  border-bottom: 25px solid #464545;
  border-left: 25px solid transparent;

  left: 48%;
  bottom: 25px;
  z-index: 1;
}

Fix overlay of keywords with searchbar

Fix overlay of keywords with searchbar


body {
    padding-bottom: 20px;
}

.transactions-title {
    margin: 0 0 10px 0;
}

/* CSS for table sorter */

table.tablesorter thead tr .header {
    background-image: url(../img/bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}

table.tablesorter thead tr .headerSortUp {
    background-image: url(../img/asc.gif);
}

table.tablesorter thead tr .headerSortDown {
    background-image: url(../img/desc.gif);
}

table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
    background-color: #f8f8f8;
}

body {
    padding-bottom: 20px;
}

.transactions-title {
    margin: 0 0 10px 0;
}

@media (max-width: 992px) {
    div[class*=col] {
        margin-bottom: 20px;
    }
}

/* CSS for table sorter */

table.tablesorter thead tr .header {
    background-image: url(../img/bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}

table.tablesorter thead tr .headerSortUp {
    background-image: url(../img/asc.gif);
}

table.tablesorter thead tr .headerSortDown {
    background-image: url(../img/desc.gif);
}

table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
    background-color: #f8f8f8;
}

Fix padding for small displays

Fix padding for small displays


.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
  margin-bottom: 0;
}

.tt-dropdown-menu {
  min-width: 160px;
  margin-top: 2px;
  padding: 5px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.tt-suggestion {
  display: block;
  padding: 3px 20px;
}

.tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}

.tt-suggestion.tt-is-under-cursor a {
  color: #fff;
}

.tt-suggestion p {
  margin: 0;
}

Include foreign CSS file for Twitter Typeahead


.container {
    margin-bottom: 30px;
}

.container a:visited {
    color: #555;
}

.heading {
    margin: 0;
    line-height: 1.6em;
}

.footer {
    padding-top: 15px;
    line-height: 1.5em;
}

.footerItem {
    display: inline-block;
    margin-right: 15px;
}

.container {
    margin-bottom: 30px;
}

.container a:visited {
    color: #555;
}

.heading {
    margin: 0;
    line-height: 1.6em;
}

.description {
    margin-top: 15px;
    margin-bottom: 0;
}

.footer {
    padding-top: 15px;
    line-height: 1.5em;
}

.footerItem {
    display: inline-block;
    margin-right: 15px;
}

Fix spacing in GitHub repo description

Fix spacing in GitHub repo description


body {
    margin: 0;
    padding: 0;
    font-family: Helvetica, Arial, Sans-Serif, sans-serif;
    background: white;
}

.title {
    padding: 2px;
    text-overflow-ellipsis: overflow;
    overflow: hidden;
    display: block;
}

.selected-image, .select-video {
    height: 500px;
}

.selected-image img, .select-video video {
    max-width: 100%;
    height: 450px;
}

.image-thumbnail, .video-thumbnail {
    display: flex;
    justify-content: space-around;
    overflow: auto;
    overflow-y: hidden;
}

.image-thumbnail img, .video-thumbnail video {
    width: auto;
    height: 70px;
    padding: 1px;
    border: 1px solid grey;
}

body {
    margin: 0;
    padding: 0;
    font-family: Helvetica, Arial, Sans-Serif, sans-serif;
    background: white;
}

.title {
    padding: 2px;
    text-overflow-ellipsis: overflow;
    overflow: hidden;
    display: block;
}

.selected-image, .select-video {
    height: 500px;
}

.selected-image img, .select-video video {
    max-width: 100%;
    height: 450px;
}

.image-thumbnail, .video-thumbnail {
    display: flex;
    justify-content: flex-start;
    overflow: auto;
    overflow-y: hidden;
}

.image-thumbnail img, .video-thumbnail video {
    width: auto;
    height: 70px;
    padding: 1px;
    border: 1px solid grey;
}

Align left the thumbnails in order to show the newest images/videos first.


@custom-media --sm-viewport (min-width:320px) and (max-width:640px);
@custom-media --md-viewport (min-width:640px) and (max-width:960px);
@custom-media --lg-viewport (min-width:960px);

@import "suitcss-components-test";
@import "./index.css";

@import "suitcss-components-test";
@import "./index.css";
@custom-media --sm-viewport (min-width:320px) and (max-width:640px);
@custom-media --md-viewport (min-width:640px) and (max-width:960px);
@custom-media --lg-viewport (min-width:960px);

Move imports first for postcss-import

Move imports first for postcss-import


.ProseMirror {
  position: relative;
}

.ProseMirror {
  white-space: pre-wrap;
}

.ProseMirror ul, .ProseMirror ol {
  padding-left: 30px;
  cursor: default;
}

.ProseMirror blockquote {
  padding-left: 1em;
  border-left: 3px solid #eee;
  margin-left: 0; margin-right: 0;
}

.ProseMirror pre {
  white-space: pre-wrap;
}

.ProseMirror li {
  position: relative;
  pointer-events: none; /* Don't do weird stuff with marker clicks */
}
.ProseMirror li > * {
  pointer-events: auto;
}

.ProseMirror-nodeselection *::selection, .ProseMirror-widget *::selection { background: transparent; }
.ProseMirror-nodeselection *::-moz-selection, .ProseMirror-widget *::-moz-selection { background: transparent; }

.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}

/* Make sure li selections wrap around markers */

li.ProseMirror-selectednode {
  outline: none;
}

li.ProseMirror-selectednode:after {
  content: "";
  position: absolute;
  left: -32px;
  right: -2px; top: -2px; bottom: -2px;
  border: 2px solid #8cf;
  pointer-events: none;
}

.ProseMirror {
  position: relative;
}

.ProseMirror {
  word-wrap: break-word;
  white-space: pre-wrap;
}

.ProseMirror ul, .ProseMirror ol {
  padding-left: 30px;
  cursor: default;
}

.ProseMirror blockquote {
  padding-left: 1em;
  border-left: 3px solid #eee;
  margin-left: 0; margin-right: 0;
}

.ProseMirror pre {
  white-space: pre-wrap;
}

.ProseMirror li {
  position: relative;
  pointer-events: none; /* Don't do weird stuff with marker clicks */
}
.ProseMirror li > * {
  pointer-events: auto;
}

.ProseMirror-nodeselection *::selection, .ProseMirror-widget *::selection { background: transparent; }
.ProseMirror-nodeselection *::-moz-selection, .ProseMirror-widget *::-moz-selection { background: transparent; }

.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}

/* Make sure li selections wrap around markers */

li.ProseMirror-selectednode {
  outline: none;
}

li.ProseMirror-selectednode:after {
  content: "";
  position: absolute;
  left: -32px;
  right: -2px; top: -2px; bottom: -2px;
  border: 2px solid #8cf;
  pointer-events: none;
}

Set word-wrap: break-word style in the editor

So that Firefox actually wraps words longer than a line

FIX: Make sure long words don't cause a horizontal scrollbar in Firefox

Closes prosemirror/prosemirror#542


@charset "UTF-8";
/*
 * jQuery File Upload UI Plugin CSS
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2010, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * https://opensource.org/licenses/MIT
 */

.fileupload-buttonbar .btn,
.fileupload-buttonbar .toggle {
  margin-bottom: 5px;
}
.progress-animated .progress-bar,
.progress-animated .bar {
  background: url('../img/progressbar.gif') !important;
  filter: none;
}
.fileupload-process {
  float: right;
  display: none;
}
.fileupload-processing .fileupload-process,
.files .processing .preview {
  display: block;
  width: 32px;
  height: 32px;
  background: url('../img/loading.gif') center no-repeat;
  background-size: contain;
}
.files audio,
.files video {
  max-width: 300px;
}

@media (max-width: 767px) {
  .fileupload-buttonbar .toggle,
  .files .toggle,
  .files .btn span {
    display: none;
  }
  .files .name {
    width: 80px;
    word-wrap: break-word;
  }
  .files audio,
  .files video {
    max-width: 80px;
  }
  .files img,
  .files canvas {
    max-width: 100%;
  }
}

@charset "UTF-8";
/*
 * jQuery File Upload UI Plugin CSS
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2010, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * https://opensource.org/licenses/MIT
 */

.fileupload-buttonbar .btn,
.fileupload-buttonbar .toggle {
  margin-bottom: 5px;
}
.progress-animated .progress-bar,
.progress-animated .bar {
  background: url('../img/progressbar.gif') !important;
  filter: none;
}
.fileupload-process {
  float: right;
  display: none;
}
.fileupload-processing .fileupload-process,
.files .processing .preview {
  display: block;
  width: 32px;
  height: 32px;
  background: url('../img/loading.gif') center no-repeat;
  background-size: contain;
}
.files audio,
.files video {
  max-width: 300px;
}

@media (max-width: 767px) {
  .fileupload-buttonbar .delete,
  .fileupload-buttonbar .toggle,
  .files .toggle,
  .files .btn span {
    display: none;
  }
  .files .name {
    width: 80px;
    word-wrap: break-word;
  }
  .files audio,
  .files video {
    max-width: 80px;
  }
  .files img,
  .files canvas {
    max-width: 100%;
  }
}

Hide global delete button on small-screen devices.


#clients {
  float: left;
  margin: 5px;
  padding: 5px;
  background-color: white;
}

#clients h2 {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 18px;
}

#clients .client {
  margin: 3px 0;
}

#clients .client.lost {
  font-style: italic;
  color: #999999;
}

#clients .last-seen {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid black;
  background-color: #009900;
  margin-right: 5px;
}

#clients .client.warning .last-seen {
  background-color: #FFFF00;
}

#clients .client.error .last-seen {
  background-color: #FF0000;
}

#clients .client.lost .last-seen {
  border-color: #999999;
  background-color: #CCCCCC;
}

#clients {
  float: left;
  margin: 5px;
  padding: 5px;
  background-color: white;
}

#clients h2 {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 18px;
}

#clients .client {
  margin: 3px 0;
}

#clients .client.lost {
  font-style: italic;
  color: #999999;
}

#clients .last-seen {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid black;
  background-color: #009900;
  margin-right: 5px;
  border-radius: 50%;
}

#clients .client.warning .last-seen {
  background-color: #FFFF00;
}

#clients .client.error .last-seen {
  background-color: #FF0000;
}

#clients .client.lost .last-seen {
  border-color: #999999;
  background-color: #CCCCCC;
}

Update last seen indicator style

Update last seen indicator style


@import '../../../css/colors.css';

.list {
  list-style: none;

  margin: 0;
  padding-left: 0;

  /* ensure list takes up maximum vertical space amount between column header and user list */
  flex-grow: 1;

  min-height: 0;
  overflow-y: hidden;
  &:global(.overflowed) {
    overflow-y: scroll;
    border-bottom: 1px solid #C0C1C2;

    --width: 5px;
    --inverse: -5px;
    box-shadow:
      inset 0 var(--inverse) var(--width) var(--inverse) rgba(0,0,0,.7),
      inset 0 var(--width)   var(--width) var(--inverse) rgba(0,0,0,.7);

    li:last-of-type {
      border-bottom: none;
    }
  }
}

/* hack for scrollability (conditionally applied) in firefox,
   as overflow content in a flex container will not scroll
   without it. It will just continue to get larger.
   Note that this declaration does *not* limit the height due
   to the `flex-grow: 1` declaration above
*/
@-moz-document url-prefix() {
  @media (min-width: 768px) {
    .list {
      height: 1px;
    }
  }
}

@import '../../../css/colors.css';

.list {
  list-style: none;

  margin: 0;
  padding-left: 0;

  /* ensure list takes up maximum vertical space amount between column header and user list */
  flex-grow: 1;

  min-height: 0;

  transition: box-shadow 0ms ease-in;
  overflow-y: hidden;
  &:global(.overflowed) {
    overflow-y: scroll;
    border-bottom: 1px solid #C0C1C2;

    --width: 5px;
    --inverse: -5px;
    box-shadow:
      inset 0 var(--inverse) var(--width) var(--inverse) rgba(0,0,0,.7),
      inset 0 var(--width)   var(--width) var(--inverse) rgba(0,0,0,.7);

    transition: box-shadow 250ms ease-in;
    li:last-of-type {
      border-bottom: none;
    }
  }
}

/* hack for scrollability (conditionally applied) in firefox,
   as overflow content in a flex container will not scroll
   without it. It will just continue to get larger.
   Note that this declaration does *not* limit the height due
   to the `flex-grow: 1` declaration above
*/
@-moz-document url-prefix() {
  @media (min-width: 768px) {
    .list {
      height: 1px;
    }
  }
}

Add transition for box-shadows on overflow: scroll lists

  - this was kind of jarring and awkward when switching between mobile tabs
    - so when we enter a scrollable state, the shadows come in softly, but leave instantly


:local(.component) {
  flex-shrink: 0;
}
:local(.hour) {
  text-align: right;
  padding: 2px 5px;
}

:local(.component) {
  flex-shrink: 0;
  position: relative;
  background-color: #fff;
}
:local(.hour) {
  text-align: right;
  padding: 2px 5px;
}

Set white background in left gutter to have a cleaner look.


@import url("common.css");

.answer,
#clipboardContent { border: 1px solid #aaa; padding: 5px; box-sizing: content-box; min-height: 100px; font-size: 17px}
#clipboardContent {display: block; width: 100%; margin: 10px 0;}
#copy {background: #359BB7; border-radius: 5px; color: #fff; padding: 5px 15px; white-space: nowrap; margin: 10px 0 5px;text-align: center;display: inline-block;position: relative;cursor: pointer;border: none;}
.rich-text-editor img[src*="data:image/png"] { margin: 4px; }
.rich-text-editor:focus img[src*="data:image/png"],
.rich-text-editor.rich-text-focused img[src*="data:image/png"] { box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2); }

Add forgotten drop shadow for inline images


.mosaic {
  position: fixed;
  bottom: 0px;
}

.chat-text {
  max-width: 800px;
  width: 100%;
  height: 230px;
  background-color: white;
  position: fixed;
  bottom: 60px;
  right: 0px;
  font-size: 0.9em;
  display: flex;
}

.chat-text .chat-general,
.chat-text .chat-alliance {
  height: inherit;
  padding-top:2px;
}

.chat-text .chat-general .chat-inner,
.chat-text .chat-alliance .chat-inner {
  overflow-y: auto;
  height: 191px;
}

.chat-text .chat-general .chat-inner > div,
.chat-text .chat-alliance .chat-inner > div{
  padding:2px;
}

.chat-button {
  position: fixed;
  bottom: 22px;
  right: 0px;
}

.chat-button .btn {
  font-size: 1.2rem;
}

.mosaic {
  position: fixed;
  bottom: 0px;
}

.chat-text {
  max-width: 800px;
  width: 100%;
  height: 230px;
  background-color: white;
  position: fixed;
  bottom: 66px;
  right: 0px;
  font-size: 0.9em;
  display: flex;
}

@media (max-width:575px) {
  .chat-text {
    bottom: 109px;
  }
}

.chat-text .chat-general,
.chat-text .chat-alliance {
  height: inherit;
  padding-top:2px;
}

.chat-text .chat-general .chat-inner,
.chat-text .chat-alliance .chat-inner {
  overflow-y: auto;
  height: 191px;
}

.chat-text .chat-general .chat-inner > div,
.chat-text .chat-alliance .chat-inner > div{
  padding:2px;
}

.chat-button {
  position: fixed;
  bottom: 22px;
  right: 0px;
}

.chat-button .btn {
  font-size: 1.2rem;
}

Fix chat on xs devices

Fix chat on xs devices


body {
    font-size: 20px;
}

code {
    font-size: 14px;
}

tt, code {
    padding: 4px 5px 1px 5px;
}

@media screen and (max-width: 875px) {
    div .sphinxsidebar {
        background: #3e4349;
    }
}

Change sidebar color of docs

Change sidebar color of docs


body {
  padding-top: 20px;
  padding-bottom: 20px;
}

.navbar {
  margin-bottom: 20px;
}

.jumbotron {
  padding: 0 !important;

}

.breadcrumbs {
  padding: 24px 60px !important;
}

#editor {
  margin: 0 60px 24px 60px;
}

.btn-edit {
  margin: 10px;
  color: #777;
  display: inline-block;
}

.btn-edit:hover {
  color: #333;
  cursor: pointer;
}

body {
  padding-top: 20px;
  padding-bottom: 20px;
}

.navbar {
  margin-bottom: 20px;
}

.jumbotron {
  padding: 0 !important;
  padding-bottom: 14px !important;
}

.breadcrumbs {
  padding: 14px 60px !important;
}

#editor {
  margin: 0 60px 24px 60px;
}

.btn-edit {
  margin: 10px;
  color: #777;
  display: inline-block;
}

.btn-edit:hover {
  color: #333;
  cursor: pointer;
}

Read and write toggle button styling finished


html, body {
    height: 100%;
}

body {
    background-color: #525252;
    font-size: 2.5em;
    font-family: 'Open Sans Condensed', sans-serif;
    color: #ffffff;
}

body a {
    color: #5bb75b;
}

body a:hover {
    color: #4cad4c;
}

.floater {
    float:left;
    height:50%;
    margin-bottom:-160px;
}

.container {
    height: 320px;
    clear: both;
    position: relative;
}

em {
    font-family: 'Dancing Script', cursive;
    font-style: inherit;
    color: #91dce7;
}

h1 {
    font-weight: normal;
    font-family: 'Benchnine', sans-serif;
    color: #c0b47c;
    font-size: 1.5em;
    margin-bottom: 0.2em;
}

h1 a {
    color: #c0b47c;
}

h1 a:hover {
    color: #b8aa6b;
}

ul {
    list-style-type: none;
}

li {
    line-height: 1.4em;
}

html, body {
    height: 100%;
}

body {
    background-color: #556270;
    font-size: 2.5em;
    font-family: 'Open Sans Condensed', sans-serif;
    color: #ffffff;
}

body a {
    color: #6dbf6d;
}

body a:hover {
    color: #5bb75b;
}

.floater {
    float:left;
    height:50%;
    margin-bottom:-160px;
}

.container {
    height: 320px;
    clear: both;
    position: relative;
}

em {
    font-family: 'Dancing Script', cursive;
    font-style: inherit;
    color: #91dce7;
}

h1 {
    font-weight: normal;
    font-family: 'Benchnine', sans-serif;
    color: #ffbf00;
    font-size: 1.5em;
    margin-bottom: 0.2em;
}

h1 a {
    color: #ffbf00;
}

h1 a:hover {
    color: #e6ac00;
}

ul {
    list-style-type: none;
}

li {
    line-height: 1.4em;
}

Use new color palette for happier mood

Use new color palette for happier mood


.portfolio  {
	margin-top: 100px;
}

/*css carrousel*/
 body {
        font-family:Arial;
        font-size:12px;
        background:#ededed;
      }
      .example-desc {
        margin:3px 0;
        padding:5px;
      }

      #carousel {
        height:500px;
        position:relative;
        clear:both;
        overflow:hidden;
        background:#FFF;
      }
      #carousel img {
        visibility:hidden; /* hide images until carousel can handle them */
        cursor:pointer;
		height: 500px;/* otherwise it's not as obvious items can be clicked */
		width: 700px;
      }

      .split-left {
        width:450px;
        float:left;
      }
      .split-right {
        width:400px;
        float:left;
        margin-left:10px;
      }
      #callback-output {
        height:250px;
        overflow:scroll;
      }
      textarea#newoptions {
        width:430px;
      }

.portfolio  {
	margin-top: 100px;
}

/*css carrousel*/
#carousel {
    height:500px;
    position:relative;
    clear:both;
    overflow:hidden;
    background:#FFF;
}

#carousel img {
    visibility:hidden;
    cursor:pointer;
	height: 500px;
	width: 700px;
 }

Purge de regles non utiliser

Purge de regles non utiliser


.container {
    margin-bottom: 30px;
}

.container a:visited {
    color: #555;
}

.heading {
    margin: 0;
    line-height: 1.6em;
    word-break: break-all;
}

.description {
    margin-top: 15px;
    margin-bottom: 0;
    word-break: break-all;
}

.footer {
    padding-top: 15px;
    line-height: 1.5em;
}

.footerItem {
    display: inline-block;
    margin-right: 15px;
}

.container {
    margin-bottom: 30px;
}

.container a:visited {
    color: #555;
}

.heading {
    margin: 0;
    line-height: 1.6em;
    word-break: break-all;
    word-break: break-word;
    hyphens: auto;
}

.description {
    margin-top: 15px;
    margin-bottom: 0;
    word-break: break-all;
    word-break: break-word;
    hyphens: auto;
}

.footer {
    padding-top: 15px;
    line-height: 1.5em;
}

.footerItem {
    display: inline-block;
    margin-right: 15px;
}

Add break-word property for better newlines


header > div.container > div > div > img {
    width: 260px;
    border-radius: 38px;
}

section#about div#left p {
  text-align: right;
}

header > div.container > div > div > img {
    width: 300px;
    border-radius: 150px;
}

section#about div#left p {
  text-align: right;
}

Set profile picture to be a big circle

Set profile picture to be a big circle


#container {
    margin: 10px;
}

#controls {
    margin: 10px 0px;
}

#grid td {
    background: #fafafa;
    border: 1px solid #ccc;
}

#grid td.active {
    background: #ffeba4;
}

#grid td i {
    width: 18px;
    height: 20px;
    padding: 1px 2px;
    text-align: center;
    vertical-align: middle;
}

#output {
    margin: 10px 0px;
    padding: 10px;
    background: #fafafa;
}

#container {
    margin: 10px;
}

#controls {
    margin: 10px 0px;
}

#grid {
    border-spacing: 0;
}

#grid td {
    background: #fafafa;
    border: 1px solid #ccc;
    border-top-width: 0;
    border-left-width: 0;
}

#grid tr:first-child td {
    border-top-width: 1px;
}

#grid td:first-child {
    border-left-width: 1px;
}

#grid td.active {
    background: #ffeba4;
}

#grid td i {
    width: 18px;
    height: 20px;
    padding: 1px 2px;
    text-align: center;
    vertical-align: middle;
}

#output {
    margin: 10px 0px;
    padding: 10px;
    background: #fafafa;
}

Fix styling to work with normalize.css

Fix styling to work with normalize.css


body {
    padding-top: 70px;
}

section {
    padding-top:70px;
    margin-top:-70px;
}

.leader {
    padding: inherit 10px;
}

.flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.flex-item {
  margin: 10px auto;
}

body {
    padding-top: 70px;
}

section {
    padding-top:70px;
    margin-top:-70px;
}

.leader {
    background: #ffffff;
}

.flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.flex-item {
  margin: 10px auto;
}

Change background of jumbotron to white

fix: Change background of jumbotron to white


em, strong, code
{
	/* Do not use "text-decoration: underline;",
	because the underline is very close to the corresponding text */
	padding-bottom: 1px;
}

em /* emphasis = Person name */
{
	border-bottom-width: thin;
	border-bottom-style: solid;
}

strong /* Dynasty name */
{
	border-bottom-width: medium;
	border-bottom-style: double;
}

code /*Place and country name*/
{
	border-bottom-width: thin;
	border-bottom-style: dashed;
}

sub /*Alternative word*/
{
	/*subscript presentation*/
	display: inline;
	font-size: 60%;
	background-color: black;
	color: white;
	position: relative;
	bottom: 0.3em;
}

sup /*Checked tone characters 入聲字*/
{
	/*superscript presentation*/
	text-emphasis-style: dot;
	text-emphasis-position: under left;
	-webkit-text-emphasis-style: dot;
	-webkit-text-emphasis-position: under;
}

Add style for checked tone

Add style for checked tone


.docbook .xref img[src^=images\/callouts\/],
.screen img,
.programlisting img {
    width: 1em;
}

.calloutlist img {
    width: 1.5em;
}

.prompt {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.docbook .xref img[src^=images\/callouts\/],
.screen img,
.programlisting img,
.literallayout img,
.synopsis img {
    width: 1em;
}

.calloutlist img {
    width: 1.5em;
}

.prompt,
.screen img,
.programlisting img,
.literallayout img,
.synopsis img {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Make callout marks in code unselectable

doc: Make callout marks in code unselectable

To make example copying easier.


.ui.secondary.pointing.menu .active.item {
    color: #f9f9f9 !important;
    font-weight: 500 !important;
    border-color: #00ff00 !important;
    border-width: medium !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 1.2em;
}

.ui.secondary.pointing.menu .item {
    color: rgba(128, 128, 128, 0.7) !important;
    font-weight: 500 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 1.2em;
}

.ui.secondary.pointing.menu {
    border-bottom: none !important;
}

input {
    padding: 5px;
    font-weight: 300 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 1.1em;
    outline: none !important;
}

.ui.floating.label{
    top:.5em;
    margin:0;
}
.ui.menu .item>.floating.label{
    padding:.3em .6em
}

.ui.menu{
    border-radius:0px;
}
.ui.inverted.menu{
    background-color: #1C2B36;
}

.ui.menu .item>i.icon {
    margin: 0;
}

Remove margin from the menu items to properly center


/*This file should contain all CSS related to general page layout*/

html, body{
    height: 100%;
    width: 100%;
    margin: 0px;
}

.viz-control{
  position:absolute;
  z-index:50000;
  /*display: none;*/
}

#filter-controls{
  right: 10px;
  top: 10px;
}

#list-controls{
  left: 9px;
  bottom: 9px;
}

/*Remove x axis line on ordinal bar charts*/
#beds .x path,
#baths .x path {
	stroke: none;
}

Remove x axis line on categorical bar charts


table.movie-table th{
	text-transform: capitalize;
	cursor: pointer;
}
table.movie-table th:hover{
	text-decoration: underline;
}
table.movie-table td:last-child{
	max-width:200px;
	min-width:200px;
}

table.movie-table th{
	text-transform: capitalize;
	cursor: pointer;
	position: relative;
	padding-right: 23px;
}
table.movie-table th:hover{
	background-color: #ccc;
}
table.movie-table th.sort-ascending:after{
	content: '';
	display: block;
	position: absolute;
	top: 9px;
	right: 6px;
	border-style: solid;
	border-width: 5px;
	border-color: transparent transparent #888 transparent;
}
table.movie-table th.sort-descending:after{
	content: '';
	display: block;
	position: absolute;
	top: 14px;
	right: 6px;
	border-style: solid;
	border-width: 5px;
	border-color: #888 transparent transparent transparent;
}
table.movie-table td:last-child{
	max-width:200px;
	min-width:200px;
}

Sort indicator arrows for column headings


.leaflet-control-minimap {
    border:solid rgba(255, 255, 255, 1.0) 3px;
    box-shadow: 0 1px 7px #999;
    background: #f8f8f9;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    transition: all .2s;
}

.leaflet-control-minimap a {
    background-color: rgba(255, 255, 255, 1.0);
    background-position: 1px 2px;
    background-repeat: no-repeat;
    display: block;
    outline: none;
    z-index: 99999;
    transition: all .2s;
}

.leaflet-control-minimap a.minimized {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.leaflet-control-minimap-toggle-display {
    background-image: url("images/toggle.png");
    border-radius: 2px 0px 2px 0px;
    height: 19px;
    width: 19px;
    position: absolute;
    bottom: 0;
    right: 0;
}

.leaflet-control-minimap {
    border:solid rgba(255, 255, 255, 1.0) 3px;
    box-shadow: 0 1px 7px #999;
    background: #f8f8f9;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    transition: all .2s;
}

.leaflet-control-minimap a {
    background-color: rgba(255, 255, 255, 1.0);
    background-position: 1px 2px;
    background-repeat: no-repeat;
    display: block;
    outline: none;
    z-index: 99999;
    transition: all .2s;
}

.leaflet-control-minimap a.minimized {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.leaflet-control-minimap-toggle-display {
    background-image: url("images/toggle.png");
    border-radius: 2px 0px 2px 0px;
    height: 19px;
    width: 19px;
    position: absolute;
    bottom: 0;
    right: 0;
}

Put vendor prefixes in right order

Put vendor prefixes in right order

Best practices for silly WebKit.


@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,100,300);

body {
  background-color: #D06D35;
  font-family: 'Roboto Slab', serif;
  color: #fff;
}

#intro {
  position: absolute;
  left: 50%;
  top: 50;
  transform: translate(-50%,-50%)
}

#title {
  position: absolute;
  left: 50%;
  top: 50;
  transform: translate(-50%,-50%)
}

Adjust css for name and title?

Adjust css for name and title?


/* @copyright: 2013 Single D Software - All Rights Reserved
   @summary: Cascading style sheet for the Light Maestro GUI */

* {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
}

.ui-focus, .ui-btn:focus {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#fixture-layout .ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d {
    text-align: center;
}

#fixture-layout .ui-checkbox-on, .ui-checkbox-off {
    padding: 3px;
}

#fixture-layout .ui-checkbox .ui-btn-inner {
    border: 1px solid black;
}

#control-buttons .ui-block-a, .ui-block-b {
    text-align: center;
}

#white-palette .ui-btn, #color-palette .ui-btn {
    margin: 5px;
}

div[data-role="footer"] {
    text-align: center;
}

/* @copyright: 2013 Single D Software - All Rights Reserved
   @summary: Cascading style sheet for the Light Maestro GUI */

* {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
}

input[type="text"] {
    -webkit-user-select: text !important;
}

.ui-focus, .ui-btn:focus {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#fixture-layout .ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d {
    text-align: center;
}

#fixture-layout .ui-checkbox-on, .ui-checkbox-off {
    padding: 3px;
}

#fixture-layout .ui-checkbox .ui-btn-inner {
    border: 1px solid black;
}

#control-buttons .ui-block-a, .ui-block-b {
    text-align: center;
}

#white-palette .ui-btn, #color-palette .ui-btn {
    margin: 5px;
}

div[data-role="footer"] {
    text-align: center;
}

Allow selection of text in a text box (but that's it).


body {
  font-size: 16px;
  line-height: 1.75;
}

.container {
  max-width: 600px;
}

.donate a {
  height: 63px !important;
  line-height: 63px !important;
}

.donate a span {
  margin-left: 5px !important;
}

.share a {
  margin-right: 1px;
}

.share a img {
  background-color: #212529;
  width: 63px;
  height: 63px;
}

.signature {
  text-align: center;
}

body {
  font-size: 16px;
  line-height: 1.75;
}

.container {
  max-width: 600px;
}

.main {
  margin-bottom: 32px;
}

.donate a {
  height: 63px !important;
  line-height: 63px !important;
}

.donate a span {
  margin-left: 5px !important;
}

.share a {
  margin-right: 1px;
}

.share a img {
  background-color: #212529;
  width: 63px;
  height: 63px;
}

.signature {
  text-align: center;
}

Add a little spacing after the main content.


.milestone_list {
    float:left;
    width: 15%;
    margin: 1em 0 0 15px;
}

.milestone {
    border: #d7d7d7 solid 1px;
    margin-bottom: 18px;
}

.milestone h4 {
    background: #f7f7f7;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    border-bottom: 1px solid #999;
    height: 17px;
    margin: 0;
    padding: 0;
}

.milestone td {
    font-size: 11px;
    color: #555;
}

.milestone_list {
    float:left;
    width: 15%;
    margin: 1em 0 0 15px;
}

.milestone {
    border: #d7d7d7 solid 1px;
    margin-bottom: 18px;
}

.milestone h4 {
    background: #f7f7f7;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    border-bottom: 1px solid #999;
    height: 17px;
    margin: 0;
    padding: 0;
}

.milestone table {
    padding: 0 4px;
}

.milestone td {
    font-size: 11px;
    color: #555;
}

Add a little padding around the milestone table.


.isNotificationsScrolling {
  overflow: hidden;
}

.NotificationsContainer {
  position: absolute;
  top: 100%;
  right: 20px;
  z-index: 3;
  width: 360px;
  padding-bottom: 10px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #aaa;
  border-top: 0;
}

.NotificationsContainer > .Scrollable {
  height: 300px;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

.NotificationsContainerTabs > .IconTab {
  width: calc(100% / 6);
}

@media (--break-4) {
  .NotificationsContainer {
    right: 40px;
  }
}

/* // MIN HEIGHT!  660 / 16 = 41.25em */
@media (min-height: 41.25em) {
  .NotificationsContainer > .Scrollable {
    height: 505px;
  }
}

/* // MIN HEIGHT!  760 / 16 = 47.5em */
@media (min-height: 47.5em) {
  .NotificationsContainer > .Scrollable {
    height: 605px;
  }
}

.NotificationsContainer .StreamContainer {
  padding: 0;
}

Remove top/bottom padding in notification center.