.markdown-body {
    font-size: 11px;
}

.markdown-body p {
  font-weight: 200;
}

Remove the css font-weight as it didn't apply everywhere and was hard to read


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

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set width on the form input elements since they're 100% wide by default */
input[type="text"],
input[type="password"] {
    max-width: 280px;
}

/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}

pre {
    padding: 0;
    background: transparent;
    border: none;
}

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

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set width on the form input elements since they're 100% wide by default */
input[type="text"],
input[type="password"] {
    max-width: 280px;
}

/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}

pre {
    padding: 0;
    background: transparent;
    border: none;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
}

Use word wrapping in code snippets

Use word wrapping in code snippets


h1.logo a {
  font-family: "Raleway";
  font-weight: 500;
}

a.headerlink {
  color: rgba(0, 0, 0, 0.1);
}

div.sphinxsidebarwrapper p.blurb {
  font-family: Lato, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Lato, sans-serif;
  font-weight: normal;
  color: #555;
}

div.sphinxsidebar li.toctree-l1 {
  font-family: Lato, sans-serif;
}

body {
  font-family: "Charis SIL", "Noto Serif", serif;
  font-size: 17px;
}

pre, .pre {
  font-family: "Code new roman", "Ubuntu Mono", monospace;
  font-size: 1em;
}

.search-btn {
  padding: 0 1em;
  font-family: Lato, sans-serif;
  font-weight: normal;
  line-height: normal;
  align-self: stretch;
}

table.docutils {
    border-style: none;
    padding: 0;
    margin: 0;
}

table.docutils th.field-name {
    border-style: none;
    font-size: 1em;
}

td.field-body code {
    margin: 0;
    padding: 0;
    border-style: none;
    font-size: 1em;
}

h1.logo, div.section#wdom > h1 {
  font-family: "Raleway";
  font-weight: 500;
}

a.headerlink {
  color: rgba(0, 0, 0, 0.1);
}

div.sphinxsidebarwrapper p.blurb {
  font-family: Lato, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Lato, sans-serif;
  font-weight: normal;
  color: #555;
}

div.sphinxsidebar li.toctree-l1 {
  font-family: Lato, sans-serif;
}

body {
  font-family: "Charis SIL", "Noto Serif", serif;
  font-size: 17px;
}

pre, .pre {
  font-family: "Code new roman", "Ubuntu Mono", monospace;
  font-size: 1em;
}

.search-btn {
  padding: 0 1em;
  font-family: Lato, sans-serif;
  font-weight: normal;
  line-height: normal;
  align-self: stretch;
}

table.docutils {
    border-style: none;
    padding: 0;
    margin: 0;
}

table.docutils th.field-name {
    border-style: none;
    font-size: 1em;
}

td.field-body code {
    margin: 0;
    padding: 0;
    border-style: none;
    font-size: 1em;
}

Change font-face of title (WDOM)

Change font-face of title (WDOM)


a.moarTLSUnsecure {
  background: rgba(222, 106, 106, 0.6) !important;
  border-radius: 6px;
  border: 2px solid #DC0000;
  padding: 4px 4px 4px 4px;
  margin: 2px 2px 2px 2px;
  transition: background 1s ease;
}

a.moarTLSUnsecure img {
 -webkit-filter:sepia(1) hue-rotate(290deg);
}

body.moarTLSUnsecure {
  background: rgba(222, 106, 106, 0.5) !important;
  transition: background 1s ease;
}

img.moarTLSFieldWarning {
  position: fixed;
  left: 94px;
  top: 0px;
}

@keyframes moarTLSOrangepulse {
  0% {
    background: #FFE7CE !important;
  }
  100% {
    background: #FF8000 !important;
    box-shadow: 0 0 15px 1px #FF8000
  }
}

input.moarTLSSensitive {
  animation: moarTLSOrangepulse 3s infinite;
}

form.moarTLSUnsecure {
  background: rgba(222, 106, 106, 0.6) !important;
  border-radius: 4px;
  border: 2px dashed #B93737;
  padding: 3px;
  margin: 3px;
  transition: 0.5s ease;
}

input.moarTLSUnsecure,
img.moarTLSUnsecure {
  transform:rotate(180deg);
  transition: transform 0.5s ease;
}

a.moarTLSUnsecure {
  background: rgba(222, 106, 106, 0.6) !important;
  border-radius: 6px;
  border: 2px solid #DC0000;
  padding: 4px 4px 4px 4px;
  margin: 2px 2px 2px 2px;
  transition: background 1s ease;
}

a.moarTLSUnsecure img {
 -webkit-filter:sepia(1) hue-rotate(290deg);
}

body.moarTLSUnsecure {
  background: rgba(222, 106, 106, 0.5) !important;
  transition: background 1s ease;
}

form.moarTLSUnsecure {
  background: rgba(222, 106, 106, 0.6) !important;
  border-radius: 4px;
  border: 2px dashed #B93737;
  padding: 3px;
  margin: 3px;
  transition: 0.5s ease;
}

input.moarTLSUnsecure,
img.moarTLSUnsecure {
  transform:rotate(180deg);
  transition: transform 0.5s ease;
}

Remove unneeded sensitive input styles

Remove unneeded sensitive input styles


.user_specs{
font-size: .75em;
display: inline-block;
}

.user_specs{
font-size: .75em;
display: inline-block;
float: right;
margin-top: 8px;
}

Add slight styling changes to user specs


#performers img {
	width: 33%;
}

.performer-detail-page {
	display: none;
}

Hide details 'view' by default

Hide details 'view' by default


body.missions .successmsg {
  background-color: #e4ffc0;
  margin: 10px 0px;
  padding: 5px 10px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}

body.missions div.body > * {
  float: left;
  width: 100%;
}

body.missions p.next_mission_link {
    width: 100%;
    text-align: right;
}

body.missions .file-upload-row {
  width: 100%
}

body.missions .file-upload {
  margin-top: 5px;
  padding: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 100%;
  background: #F4F4F4
}

body.missions .file-upload input[type="file"] {
  padding: 0;
  font-size: 100%
}

body.missions .successmsg {
  background-color: #e4ffc0;
  margin: 10px 0px;
  padding: 5px 10px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}

body.missions div.body > * {
  float: left;
  width: 100%;
}

body.missions p.next_mission_link {
    width: 100%;
    text-align: right;
}

body.missions .file-upload-row {
  width: 100%
}

body.missions .file-upload {
  margin-top: 5px;
  padding: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 100%;
  background: #F9F9F9
}

body.missions .file-upload input[type="file"] {
  padding: 0;
  font-size: 100%
}

Make the mission upload buttons have a more pale background


.post-title {
  margin-top: 0;
}

.post-title,
.post-title a {
  color: #303030;
}

.post-date {
  display: block;
  margin-top: -.5rem;
  color: #9a9a9a;
}

figure {
  margin-left: 0px;
  margin-right: 0px;
}

pre {
  overflow-x: auto;
  white-space: pre;
}

/* Related posts */
.related {
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-top: 1px solid #eee;
}
.related-posts {
  padding-left: 0;
  list-style: none;
}
.related-posts h3 {
  margin-top: 0;
}
.related-posts li small {
  font-size: 75%;
  color: #999;
}
.related-posts li a:hover {
  color: #268bd2;
  text-decoration: none;
}
.related-posts li a:hover small {
  color: inherit;
}

.post-title {
  margin-top: 0;
}

.post-title,
.post-title a {
  color: #303030;
}

.post-date {
  display: block;
  margin-top: -.5rem;
  color: #9a9a9a;
}

.post img {
  width: 100%;
}

figure {
  margin-left: 0px;
  margin-right: 0px;
}

pre {
  overflow-x: auto;
  white-space: pre;
}

/* Related posts */
.related {
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-top: 1px solid #eee;
}
.related-posts {
  padding-left: 0;
  list-style: none;
}
.related-posts h3 {
  margin-top: 0;
}
.related-posts li small {
  font-size: 75%;
  color: #999;
}
.related-posts li a:hover {
  color: #268bd2;
  text-decoration: none;
}
.related-posts li a:hover small {
  color: inherit;
}

Use full width of an image for a post.

Use full width of an image for a post.


@media only screen
and (max-width : 640px) {

	#player-info {
	  left: 10px;
  	  width: 120px;
	}

	#zone-info {
	  left: 148px;
 	  width: 150px;
	}

	#icon-panel {
	  top: 4em;
	  left: 0px;
	  margin-top: 0px;
	  margin-left: 2px;
	  max-width: 24px;
	}

	#log_icon {
	  display: none;
	}
}

@media only screen
and (max-width : 640px) {

	#player-info {
	  left: 10px;
  	  width: 120px;
	}

	#zone-info {
	  left: 148px;
 	  width: 150px;
	}

	#icon-panel {
	  top: 4em;
	  left: 0px;
	  margin-top: 0px;
	  margin-left: 2px;
	  max-width: 24px;
	}
}

Enable log button even for small devices


.countdown-wrap {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    text-align: center;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
}

.countdown-title {
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 3px;
    font-weight: 400;
    padding: 0 30px;
}

.countdown {
    list-style: none;
    margin: 20px 0;
    padding: 0;
}

.time-wrap {
    display: inline-block;
    width: 25%;
    padding: 0;
}

.time {
    display: inline-block;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
}

.unit {
    text-transform: uppercase;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.6;
    margin-top: 5px;
}

@media screen and (min-width: 768px) {
    .countdown-title {
        font-size: 28px;
    }
    .time {
        font-size: 54px;
    }
    .unit {
        font-size: 20px;
    }
}

Adjust font size on big screens

Adjust font size on big screens


body {
  padding-top: 70px;
}

.navbar-brand {
    padding: 5px 15px;
}

.navbar-nav .btn-group {
    padding-top: 7px;
    padding-bottom: 7px;
}
.spin {
    padding: 15px;
    -webkit-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

/* Condense the menu on small tablets and when the browser covers only half of the screen */
@media (max-width: 1023px) {
    .navbar-fixed-top ul.navbar-nav > li > a > translate {
        display: none;
    }
}

body {
  padding-top: 70px;
}

.navbar-brand {
    padding: 5px 15px;
}

.navbar-nav .btn-group {
    padding-top: 7px;
    padding-bottom: 7px;
}
.spin {
    padding: 15px;
    -webkit-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

/* Condense the menu on small tablets and when the browser covers only half of the screen */
@media (max-width: 1199px) {
    .navbar-fixed-top ul.navbar-nav > li > a > translate {
        display: none;
    }
}

Set the breakpoint higher to accommodate more verbose languages.


/* hex colors brown 7F3F27 FFB69B FF7E4E 7F5B4D CC643F */

* {
	font-family: Open Sans, Arial;
	text-align: center;
	background-color: #F2D1C9;

}

#header {
	background-color: #CC643F;
	margin-left: 10%;
	width: 80%;
	text-align: center;
	font-size: 6em;
}

#nav {
	background-color: #F2D1C9;
	margin-left: 10%;
	width: 80%;
	text-align: center;
	font-size: 1.5em;
}

#section1 {
	background-color: #FFB69B;
	float: left;
	margin-left: 10%;
	width: 26%;
	height: 20em;
}

#section2 {
	background-color: #FF7E4E;
	float: left;
	width: 26%;
	height: 20em;
	margin-left: 1%;
}

#section3 {
	background-color: #7F5B4D;
	float: left;
	margin-left: 1%;
	width: 26%;
	height: 20em;
}

#footer {
	background-color: #FFB69B;
	position: fixed;
	height: 2em;
	margin-left: 10%;
	width: 80%;
	bottom: 0px;
	text-align: center;
}

Add CSS file for index.html

Add CSS file for index.html


.aui-widget {
}

.aui-widget-content {
}

.aui-widget-hd {
}

.aui-widget-bd {
}

.aui-widget-ft {
}

.aui-widget-stacked .aui-widget-shim {
    border: 0;
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;

	/* IE8 */
	-ms-filter: alpha(opacity=0);
	/* IE7/IE8(quirks) and below */
	filter: alpha(opacity=0);
    /* IE6 */
    _width:0;
    _height:0;
}

.aui-overlay {
	position: absolute;
}

.aui-overlay-hidden, .aui-contextoverlay-hidden {
	visibility: hidden;
}

.aui-overlay-focused {

}

Replace four spaces with a tab because this file eventually makes it into css.jspf in the portal and ant format-source complains

git-svn-id: eaac6977d0b6fa3343c402860739874625caf655@36552 05bdf26c-840f-0410-9ced-eb539d925f36


body {
  margin: 0;
  background-color: #24292e;
}
.box {
  background-color: #f8f8f8;
  font-family: 'Myriad Pro', Arial, sans-serif;
  margin: 10em auto 0;
  width: 480px;
  text-align: center;
  padding: 1em;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0,0,0,0.75);
}
.box h1 {
  margin: 0 0 0.25em 0;
}
.box p {
  margin: 0.5em;
}
.box input[type=text] {
  font-size: 14pt;
  padding: 5px;
  border: 1px solid #eeeeee;
  border-radius: 5px;
  width: 250px;
}
.box input[type=text]:focus {
  box-shadow: 0 0 5px rgba(0,0,0,0.75);
}
.box input[type=button] {
  font-size: 12pt;
  padding: 5px;
  border: 1px solid #aaaaaa;
  border-radius: 5px;
  background-color: #dddddd;
}
.box input[type=button]:hover {
  background-color: #cccccc;
  box-shadow: 0 0 5px rgba(0,0,0,0.75);
}

body {
  margin: 0;
  background-color: #24292e;
}
.box {
  background-color: #f8f8f8;
  font-family: 'Source Sans Pro', sans-serif;
  margin: 10em auto 0;
  width: 480px;
  text-align: center;
  padding: 1em;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0,0,0,0.75);
}
.box h1 {
  margin: 0 0 0.25em 0;
}
.box p {
  margin: 0.5em;
}
.box input[type=text] {
  font-size: 14pt;
  padding: 5px;
  border: 1px solid #eeeeee;
  border-radius: 5px;
  width: 250px;
}
.box input[type=text]:focus {
  box-shadow: 0 0 5px rgba(0,0,0,0.75);
}
.box input[type=button] {
  font-size: 12pt;
  padding: 5px;
  border: 1px solid #aaaaaa;
  border-radius: 5px;
  background-color: #dddddd;
}
.box input[type=button]:hover {
  background-color: #cccccc;
  box-shadow: 0 0 5px rgba(0,0,0,0.75);
}

Use Source Sans Pro for the content box font


.skylight-dialog {
    width: 50%;
    height: 400px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -25%;
    background-color: #fff;
    border-radius: 2px;
    z-index: 100;
    padding: 10px;
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}

.skylight-dialog--close {
    cursor: pointer;
    float: right;
    font-size: 1.6em;
}

.skylight-dialog__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background-color: rgba(0,0,0,0.3);
}

.skylight-dialog {
    width: 50%;
    height: 400px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -25%;
    background-color: #fff;
    border-radius: 2px;
    z-index: 100;
    padding: 10px;
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    overflow: auto;
}

.skylight-dialog--close {
    cursor: pointer;
    float: right;
    font-size: 1.6em;
}

.skylight-dialog__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background-color: rgba(0,0,0,0.3);
}

Apply overflow on Skylight modal

Apply overflow on Skylight modal

Its content can be larger than its bounds so it's better to use overflow
here.


.wrapper {
	position: relative;
	float: left;
}

.element {
	position: relative;
	top: 0;
}

.header {
	position: relative;
	height: 100vh;
}

.cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 60%);
}

.title {
	position: absolute;
	bottom: 1em;
	left: 1em;
	right: 1em;
	color: #FFF;
	font-size: 2em;
}

.body {
	padding: 1em;
	font-size: 1.125em;
	line-height: 1.3;
}

.wrapper {
	position: relative;
	float: left;
}

.element {
	position: relative;
	top: 0;
}

.header {
	position: relative;
	height: 100vh;
}

.cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 60%);
}

.title {
	position: absolute;
	bottom: 1em;
	left: 1em;
	right: 1em;
	color: #FFF;
	font-size: 2em;
}

.body {
	padding: 1em;
	font-size: 1.125em;
	line-height: 1.3;
	overflow-x: hidden;
}

Fix background position & overflow

Fix background position & overflow


/* Copyright (c) 2013 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.
 */

.default-object-snapshot-view #args {
  white-space: pre;
}

.default-object-instance-view #snapshots > * {
  display: block;
}

.default-object-view * {
  -webkit-user-select: text;
}

.default-object-view .title,
.default-object-view .title {
  border-bottom: 1px solid rgb(128, 128, 128);
  font-size: 110%;
  font-weight: bold;
}

.default-object-view td,
.default-object-view th {
  font-family: monospace;
  vertical-align: top;
}

/* Copyright (c) 2013 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.
 */

.default-object-snapshot-view #args {
  white-space: pre;
}

.default-object-instance-view #snapshots > * {
  display: block;
}

.default-object-view {
  overflow: auto;
}

.default-object-view * {
  -webkit-user-select: text;
}

.default-object-view .title,
.default-object-view .title {
  border-bottom: 1px solid rgb(128, 128, 128);
  font-size: 110%;
  font-weight: bold;
}

.default-object-view td,
.default-object-view th {
  font-family: monospace;
  vertical-align: top;
}

Make default object view have overflow so it can scroll

git-svn-id: 3a56fcae908c7e16d23cb53443ea4795ac387cf2@405 0e6d7f2b-9903-5b78-7403-59d27f066143


/*
* Element: Headers
*/

/*Setting document variables*/
:root{
	--heading-color-primary: var(--color-text);
	--heading-color-secondary: var(--color-secondary);
}

.heading-page {
    font-size: 24px;
    color: var(--heading-color-primary);
    font-family: var(--heading-font-family);
}

/*
* Element: Headers
*/

/*Setting document variables*/
:root{
	--heading-page-color-primary: var(--color-text);
	--heading-page-color-secondary: var(--color-secondary);
}

.heading-page {
    font-size: 24px;
    color: var(--heading-color-primary);
    font-family: var(--heading-font-family);
}

Fix repeated var name in heading class

Fix repeated var name in heading class

Fix overwriting var name existing in heading.css


/* Styles specific to EPUB books */

body {
  width: auto;
  margin-left: 0.5em;
}

.highlight pre {
  font-size: 80%;
  font-weight: bold;
}

code {
  font-size: 100%;
}

.code {
  font-size: 90%;
}

.aside {
  width: auto;
}

Make aside box width auto

Make aside box width auto

[Delivers #63026420]


body {
  font-family: helvetica neue;
  font-weight:200!important;
}

h1 {
  font-weight:300;
  text-align:center;
}

table {
  width:100%;
  margin:0 auto;
}

tr {

}

tr.headings td {
  font-weight:400;
  width:auto;
}

td {
  text-align:center;
  line-height:40px;
  font-size:18px;
  font-weight:300;
  width:100px;
}

td.feature {
  text-align:left;
  width:auto;
}
/*
button.stripe-button-el {
  font-size: 1.4em;
  font-weight: 200;
  background: #f0f0f0;
  background: linear-gradient(0deg, #f0f0f0, #fefefe);
  box-shadow: 0px 1px 1px #eee;
  border: 1px solid #aaa;
  border-radius: 2px;
  padding: 10px 12px;
  cursor: pointer;
  display: inline;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  border-bottom: 2px solid #aaa;
}
button.stripe-button-el:hover {
  background: linear-gradient(0deg, #e8e8e8, #f8f8f8);
}
*/

body {
  font-family: helvetica neue;
  font-weight:200!important;
}

h1, h2 {
  font-weight:300;
  text-align:center;
}

table {
  width:100%;
  margin:0 auto;
}

tr {

}

tr.headings td {
  font-weight:400;
  width:auto;
}

td {
  text-align:center;
  line-height:40px;
  font-size:18px;
  font-weight:300;
  width:100px;
}

td.feature {
  text-align:left;
  width:auto;
}
/*
button.stripe-button-el {
  font-size: 1.4em;
  font-weight: 200;
  background: #f0f0f0;
  background: linear-gradient(0deg, #f0f0f0, #fefefe);
  box-shadow: 0px 1px 1px #eee;
  border: 1px solid #aaa;
  border-radius: 2px;
  padding: 10px 12px;
  cursor: pointer;
  display: inline;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  border-bottom: 2px solid #aaa;
}
button.stripe-button-el:hover {
  background: linear-gradient(0deg, #e8e8e8, #f8f8f8);
}
*/

Add h2 to h1 rule

Add h2 to h1 rule


canvas {
	border: 2px solid black;
	background-color: black;
}
video {
	display: none;
}

Add missing css that hides the video in sample 8


/* your custom css */

.homeContainer {
  background: #282c34;
  color: white;
  padding: 80px 0;
}

.homeContainer .button {
  background: #24292e;
  border-color: white;
}

.homeContainer * {
  color: inherit;
}

.post a {
  text-decoration: underline;
}

@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
}

@media only screen and (min-width: 1024px) {
}

@media only screen and (max-width: 1023px) {
}

@media only screen and (min-width: 1400px) {
}

@media only screen and (min-width: 1500px) {
}

/* your custom css */

.homeContainer {
  background: #282c34;
  color: white;
  padding: 80px 0;
}

.homeContainer .button {
  background: #24292e;
  border-color: white;
}

.homeContainer * {
  color: inherit;
}

.post a {
  text-decoration: underline;
}

.navigationSlider .slidingNav ul {
  background: #282c34;
}

@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
}

@media only screen and (min-width: 1024px) {
  .navigationSlider .slidingNav ul {
    background: none;
  }
}

@media only screen and (max-width: 1023px) {
}

@media only screen and (min-width: 1400px) {
}

@media only screen and (min-width: 1500px) {
}

Make the navigation easier to read on small devices


:root [data-jp-theme-light='true'] {
  --jp-icon-output-console: url('./list-icon-light.svg');
}

:root [data-jp-theme-light='false'] {
  --jp-icon-output-console: url('./list-icon-dark.svg');
}

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

.jp-LogConsoleStatusItem.hilite {
  transition: background-color 1s ease-out;
  background-color: var(--jp-info-color0);
}
.jp-LogConsoleStatusItem.hilited {
  background-color: var(--jp-info-color0);
}

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

:root [data-jp-theme-light='true'] {
  --jp-icon-output-console: url('./list-icon-light.svg');
}

:root [data-jp-theme-light='false'] {
  --jp-icon-output-console: url('./list-icon-dark.svg');
}

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

.jp-LogConsoleStatusItem.hilite {
  transition: background-color 1s ease-out;
  color: var(--jp-info-color0);
  background-color: var(--jp-info-color3);
  border-color: var(--jp-info-color2);
}
.jp-LogConsoleStatusItem.hilited {
  color: var(--jp-info-color0);
  background-color: var(--jp-info-color3);
  border-color: var(--jp-info-color2);
}

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

Make the info colors consistent with usage elsewhere in JLab.


#chat {
  padding: .5em;
  border: 1px solid #777;
  height: 300px;
  overflow: scroll;
}

.user-change, .user-exit, .user-enter {
  color: #aaa;
  font-size: .8em;
}

.username {
  font-weight: bold;
  color: #226;
}

#entry {
  width: 100%;
}

.center {
  text-align :center;
  padding-top: 3px;
}

#play-nice {
  color: #AAA;
  text-align: right;
  padding: 30px 0;
}

html, body {
    height: 100%;
}

.fill {
    min-height: 100%;
    height: 100%;
}

#chat {
  padding: .5em;
  border: 1px solid #777;
  height: 300px;
  overflow-y: scroll;
}

.user-change, .user-exit, .user-enter {
  color: #aaa;
  font-size: .8em;
}

.username {
  font-weight: bold;
  color: #226;
}

#entry {
  width: 100%;
}

.center {
  text-align :center;
  padding-top: 3px;
}

#play-nice {
  color: #AAA;
  text-align: right;
  padding: 30px 0;
}

html, body {
    height: 100%;
}

.fill {
    min-height: 100%;
    height: 100%;
}

Make overflow more condusive for embedding.


/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

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

#TabsToolbar {
	-moz-box-ordinal-group: 10000 !important;
	-moz-window-dragging: default !important;
}

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

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

#TabsToolbar {
	-moz-box-ordinal-group: 10000 !important;
	-moz-window-dragging: default !important;
	margin-bottom: 0 !important;
}

Allow to handle mousemove event on fullscreen-toggler.

Firefox applies negative margin for the tabbar, thus the fullscreen toggler couldn't handle mousemove event on it.
Disabling negative margin re-introduces ability to show the tab bar by mousemove.


.kwc-abstract-image-dimension-window-crop-panel .information {
    background-image: url('/assets/silkicons/error.png');
    background-repeat: no-repeat;
    padding-left: 22px;
    margin: 3px;
    margin-left: 6px;
    background-position: left center;
}

.kwc-abstract-image-dimension-window-crop-panel .information {
    background-image: url('/assets/silkicons/error.png');
    background-repeat: no-repeat;
    padding-left: 22px;
    margin: 3px;
    margin-left: 6px;
    background-position: left center;
    line-height: 14px;
}

Set line-height for "image to small too crop" to show complete icon


/* we might need this */
#settings_plugin_flasharduino .progress {
	height: 40px;
	position: relative;
}

#settings_plugin_flasharduino .progress .bar{
	z-index: 1;
	position: absolute;
}

.progress span{
	z-index: 2;
	position: absolute;
	top: 25%;
	text-align: center;
	width: 100%;
	color: white;
}

/* we might need this */
#settings_plugin_flasharduino .progress {
	height: 40px;
	position: relative;
}

#settings_plugin_flasharduino .progress .bar{
	z-index: 1;
	position: absolute;
}

#settings_plugin_flasharduino .progress span{
	z-index: 2;
	position: absolute;
	top: 25%;
	text-align: center;
	width: 100%;
	color: white;
}

Fix css progress bar bug in OctoPrint

Fix css progress bar bug in OctoPrint

See https://github.com/foosel/OctoPrint/issues/1499 for more details of the problem.


@import "monokai.css";

.spacer {
  height: 80px;
}

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

.post-preview {
  padding: 0;
  margin-bottom: 10px;
}

.tags {
  margin-bottom: 10px;
}

.article-footer {
  padding: 0px;
}

Add proper margin between articles and article elements in the blog-index.html. file.


body {
  background-color: #F5F5F5;
}

.content {
  padding: 0 20% 0 20%;
}

@media (max-width: 767px) {
  .content {
    padding: 0 0 0 0;
  }
}

.panel-title a {
  display: block;
  margin: -10px -15px;
  padding: 10px 15px;
}

.navbar-brand {
  align-items: center;
  display: flex;
}

.navbar-brand>img {
  padding: 7px 14px 7px 0px;
}

body {
  background-color: #F5F5F5;
}

.content {
  padding: 0 25% 0 25%;
}

@media (max-width: 767px) {
  .content {
    padding: 0 0 0 0;
  }
}

.panel-title a {
  display: block;
  margin: -10px -15px;
  padding: 10px 15px;
}

.navbar-brand {
  align-items: center;
  display: flex;
}

.navbar-brand>img {
  padding: 7px 14px 7px 0px;
}

Increase margin whitespace by 10% to concentrate content to center


.hero {
  height: 200px;
}
.hero-text {
  padding-top: 25px;
  font-size: 1.25em;
}
.post {
  font-size: 1.1em;
  line-height: 1.25em;
}
.post-text {
  padding: 25px 0;
  font-size: 1.15em;
  line-height: 1.3;
}
.post-text h3, h4 {
  font-weight: 700;
}
.post-links {
  width: 360px;
}
.post-links li {
  display: block;
  padding: 20px 0;
}
.post-links li.first-post {
  padding-top: 40px;
}
.post-links li a {
  font-size: 1.5em;
  font-weight: 800;
  color: #1d1d1d;
}
.post-links li a:hover {
  text-decoration: none;
  color: #ff002d;
}
.post-links li a.active {
  color: #ff002d;
}
.row-2 {
  padding-top: 50px;
}

.hero {
  height: 200px;
}
.hero-text {
  padding-top: 25px;
  font-size: 1.25em;
}
.blog-title {
  padding-top: 40px;
}
.post {
  width: 1200px;
  margin: 0 auto;
  font-size: 1.1em;
  line-height: 1.25em;
}
.post-text {
  padding: 25px 0;
  font-size: 1.15em;
  line-height: 1.3;
}
.post-text h3, h4 {
  font-weight: 700;
}
.post-links {
  float: right;
  text-align: center;
}
.post-links li {
  display: block;
  padding: 20px 0;
}
.post-links li.first-post {
  padding-top: 40px;
}
.post-links li a {
  font-size: 1.5em;
  font-weight: 800;
  color: #1d1d1d;
  text-decoration: none;
}
.post-links li a:hover {
  text-decoration: none;
  color: #ff002d;
}
.post-links li a.active {
  color: #ff002d;
}
.single {
  padding: 15px 0;
}

Remove Bootstrap mark-up and update css

Remove Bootstrap mark-up and update css


.inline {
    display: inline-block;
}

#j2h_filters {
    margin: 0 0 50px 0;
}
#j2h_filters select {
    width: 250px;
}

.inline {
    display: inline-block;
}

#j2h_filters {
    margin: 0 0 50px 0;
}
#j2h_filters select {
    width: 200px;
}

Fix css width of dropdowns in filters row


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

.container {
  margin: 0 auto;
  text-align: center;
  width: 50%;
}

form {
    padding: 10px 10px 40px 10px;
    font-size: 24px;
}

div.centered {
    text-align: center;
}

div.centered table {
    margin: 0 auto;
    text-align: left;
}

td {
    padding: 10px;
    height: 50px;
    width: 50px;
    color: white;
    background-color: black;
    text-align:right;
    vertical-align:top;
}

sup, .message {
    color: #3385ff
}

input[type=text] {
    width: 25px;
    padding: 1px 3px;
    font-size: 22px;
    display: inline-block;
    border: 1px solid #ccc;
}

.symbol{
    padding-right: 5px;
    text-align: center;
    font-size: 30px;
}

.button {
    margin-top: 15px;
    background-color: #4CAF50;
    padding-top: 5px;
    width: 180px;
    height: 40px;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

Add minimal styling to the game

Add minimal styling to the game


.button {
	-fx-padding: 0;
	-fx-margin: 0;
	-fx-background-color: #101010;
	-fx-text-fill: white;
	-fx-font-size: 400%;
	-fx-opacity: 80%;
	-fx-border-width: 1px;
	-fx-border-color: #cecece;
	-fx-border-style: solid;
}

.button: hover{
	-fx-background-color: #000000;
	-fx-opacity: 90%;
	-fx-cursor: hand;
}

.button {
	-fx-padding: 0;
	-fx-margin: 0;
	-fx-background-color: #101010;
	-fx-text-fill: white;
	-fx-font-size: 300%;
	-fx-opacity: 85%;
	-fx-border-width: 2px;
	-fx-border-color: #cecece;
	-fx-border-style: solid;
}

.button: hover{
	-fx-background-color: #000000;
	-fx-opacity: 90%;
	-fx-cursor: hand;
}

Change small things in css file for mainmenu


@media (max-width: 768px) {

    .header {
        position: absolute;
    }

    /*sidebar*/

    #sidebar {
        height: auto;
        overflow: hidden;
        position: absolute;
        width: 100%;
        z-index: 1001;
    }

    /* body container */
    #main-content {
        margin: 0px!important;
        position: none !important;
    }

    #sidebar > ul > li {
        margin: 0 10px 5px 10px;
    }
    #sidebar > ul > li > a {
        height:35px;
        line-height:35px;
        padding: 0 10px;
        text-align: left;
    }

    #sidebar > ul > li > a, #sidebar > ul > li > ul.sub > li {
        width: 100%;
    }
    #sidebar > ul > li > ul.sub > li > a {
        background: transparent !important ;
    }

    /* sidebar */
    #sidebar {
        margin: 0px !important;
    }

    .btn {
        margin-bottom: 5px;
    }

}

@media (max-width: 480px) {

    .notification-row {
        display: none;
    }
}

@media (max-width:360px) {

    h1 {
        font-size: 1.9em;
    }
}

docs: Fix h1 size on small breakpoint in theme


.leaflet-magnifying-glass {
  border-radius: 50%;
  border: 1px solid gray;
  box-shadow: 0 0 5px gray;
  position: absolute;
  overflow: hidden;
}

.leaflet-magnifying-glass > .leaflet-container {
  height: 100%;
  width: 100%;
}

/* Webkit-only workaround for the border-radius clipping bug,
applied to the map container */
.leaflet-magnifying-glass-webkit {
  border-radius: 50%;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

.leaflet-magnifying-glass {
  border-radius: 50%;
  border: 1px solid gray;
  box-shadow: 0 0 5px gray;
  position: absolute;
  overflow: hidden;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.leaflet-magnifying-glass > .leaflet-container {
  height: 	100%;
  width: 	100%;
}

/* Webkit-only workaround for the border-radius clipping bug,
applied to the map container */
.leaflet-magnifying-glass-webkit {
  border-radius: 50%;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

Use box-sizing model to avoid wrong offset


@import "reset.css";

html {
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

a {
  font-weight: 100;
  color: #999;
}

a:link {
  text-decoration: none;
  text-shadow: 0 0 0 #000;
}

hr {
  border-top: 1px dashed grey;
}

time {
  font-weight: bolder;
  font-size: 18px;
}

h3 {
  font-weight: bold;
  margin-bottom: 20px;
  text-align: left;
}

@import "reset.css";

html {
  width: 100%;
  height: 100%;
}

body {
  font-family: Roboto, sans-serif;
  font-style: normal;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

a {
  font-weight: 100;
  color: #999;
}

a:link {
  text-decoration: none;
  text-shadow: 0 0 0 #000;
}

hr {
  border-top: 1px dashed grey;
}

time {
  font-weight: bolder;
  font-size: 18px;
}

h3 {
  font-weight: bold;
  margin-bottom: 20px;
  text-align: left;
}

Remove unnecessary quotes around font family name


section {
  margin-left: 15%;
  margin-right: 15%;
}
section h1 {
  text-align: center;
  margin-top: 0px;
}
section h2 {
  text-align: center;
  font-size: small;
}
article img {
  width: 40%;
}
section p {
  text-align: justify;
  margin-bottom: 1%;
}
section ul {
  margin-left: 15%;
  list-style-type: circle;
  padding-left: 3%;
}
section li {
  width: 80%;
}
.code {
  font-family: monospace;
  background-color: gray;
  display: block;
  position: relative;
  text-align: left;
  overflow: auto;
}
.center {
  margin: auto;
  width: 30%;
  border: 1px solid navy;
  padding: 10px;
  margin-bottom: 1%;
}

section {
  margin-left: 15%;
  margin-right: 15%;
}
section h1 {
  text-align: center;
  margin-top: 0px;
}
section h2 {
  text-align: center;
  font-size: small;
}
article h1 {
  text-align: left;
}
article img {
  width: 40%;
}
section p {
  text-align: justify;
  margin-bottom: 1%;
}
section ul {
  margin-left: 15%;
  list-style-type: circle;
  padding-left: 3%;
}
section li {
  width: 80%;
}
.code {
  font-family: monospace;
  background-color: #B1BFB5;
  display: block;
  position: relative;
  text-align: left;
  overflow: auto;
}
.center {
  margin: auto;
  width: 100%;
  border: 1px solid navy;
  padding: 10px;
  margin-bottom: 1%;
}

Reformat code blocks and align article headers


.sidebar-about h1 {
  font-size: 2.25rem;
}
.lead {
    font-size: 1.0rem;
    font-weight: 300;
}
pre {
    white-space: pre;
    overflow-x: scroll;
}

Make wide pre blocks use scrollbars rather than wrap.


/* Colours from:
  - "Cyber Monday": http://www.colourlovers.com/palette/1031661/Cyber_Monday
  - "Cyber Slut":   http://www.colourlovers.com/palette/975036/Cyber_Slut
 */

body {
  background: url("/script/background") center center / cover no-repeat fixed;
  font-family: monospace;
  color: white;
}

a, a:active, a:link, a:hover, a:visited {
  color: white;
}

.box, footer {
  background-color: #1E1A1C;
  border: 1px solid #764C61;
  box-shadow: 0 0 50px #F0546A;
}

select, audio, hr {
  border: 1px solid #764C61;
}

hr {
  background-color: 1px solid #764C61;
}

select {
  background-color: #1E1A1C;
  color: white;
  font-family: monospace;
}

.alert {
    color: #B83602;
}

.plain {
    color: white;
}

.info {
    color: #46C0AB;
    text-shadow: 0 0 5px #46C0AB;
}

.inlineheading {
    color: #F0546A;
}

/* Colours from:
  - "Cyber Monday": http://www.colourlovers.com/palette/1031661/Cyber_Monday
  - "Cyber Slut":   http://www.colourlovers.com/palette/975036/Cyber_Slut
 */

body {
  background: url("/background") center center / cover no-repeat fixed;
  font-family: monospace;
  color: white;
}

a, a:active, a:link, a:hover, a:visited {
  color: white;
}

.box, footer {
  background-color: #1E1A1C;
  border: 1px solid #764C61;
  box-shadow: 0 0 50px #F0546A;
}

select, audio, hr {
  border: 1px solid #764C61;
}

hr {
  background-color: 1px solid #764C61;
}

select {
  background-color: #1E1A1C;
  color: white;
  font-family: monospace;
}

.alert {
    color: #B83602;
}

.plain {
    color: white;
}

.info {
    color: #46C0AB;
    text-shadow: 0 0 5px #46C0AB;
}

.inlineheading {
    color: #F0546A;
}

Update background URL to match new nginx config.


* {
    margin  : 0;
    border  : none;
    padding : 0;
}

#chart {
    width   : 100%;
    height  : 100%;
    z-index : 1;
}
#download {
    position : absolute;
    z-index  : 2;
    left     : 1em;
    top      : 1em;
    background-color : transparent;
}
#download a {
    text-decoration : none;
}

Remove an underline from a download link


/*
 * Copyright (c) 2011 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.
 */

button.password-button {
  background: #8aaaed;
  color: #fff;
  display: inline;
  font-size: 90%;
  font-weight: bold;
  height: 18px;
  padding: 0 2px;
  position: absolute;
  top: 5px;
  width: 50px;
}

html[dir='ltr'] button.password-button {
  right: 50px;
}

html[dir='rtl'] button.password-button {
  left: 50px;
}

.inactive-password {
  background: transparent;
  border: none;
}

#saved-passwords-list .url {
  box-sizing: border-box;
  width: 40%;
}

#saved-passwords-list .name {
  -webkit-box-flex: 1;
  width: 20%;
}

#saved-passwords-list .password {
  -webkit-box-flex: 1;
  position: relative;
}

#saved-passwords-list .url,
#saved-passwords-list .name,
#password-exceptions-list .url {
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * Copyright (c) 2011 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.
 */

button.password-button {
  background: #8aaaed;
  color: #fff;
  display: inline;
  font-size: 90%;
  font-weight: bold;
  height: 18px;
  padding: 0 2px;
  position: absolute;
  top: 5px;
  width: 50px;
}

html[dir='ltr'] button.password-button {
  right: 50px;
}

html[dir='rtl'] button.password-button {
  left: 50px;
}

input[type="password"].inactive-password {
  background: transparent;
  border: none;
}

#saved-passwords-list .url {
  box-sizing: border-box;
  width: 40%;
}

#saved-passwords-list .name {
  -webkit-box-flex: 1;
  width: 20%;
}

#saved-passwords-list .password {
  -webkit-box-flex: 1;
  position: relative;
}

#saved-passwords-list .url,
#saved-passwords-list .name,
#password-exceptions-list .url {
  overflow: hidden;
  text-overflow: ellipsis;
}

DOMUI: Fix password list items from showing password input field.

BUG=none
TEST=none

Review URL: http://codereview.chromium.org/6364014

git-svn-id: http://src.chromium.org/svn/trunk/src@72724 4ff67af0-8c30-449e-8e8b-ad334ec8d88c

Former-commit-id: 5fd3049ce0ff2378a6aaffe3d7bba1e940302e80


@charset "utf-8";

html {
  margin: 0;
  padding: 0;
  font-size: 1.25em;
}

#readInner {
  display: none;
}

#scrapedown {
  margin: 1em 0;
}

#leftContainer, #rightContainer {
  margin: 0;
  padding: 0;
  position: relative;
  width: 47.5%;
}

#leftContainer {
  float: left;
  left: 1.5%;
}

#rightContainer {
  float: right;
  right: 1.5%;
}

#rightContainer > * {
  float: right;
}

.pane {
  display: block;
  overflow: auto;
  width: 100%;
  height: 800px;
  margin: 0;
  padding: 0;
}

textarea {
  font-family: monospace;
}

#previewPane:first-child {
  margin-top: 0;
}

Remove margin from preview first child

Remove margin from preview first child


html, body {
  overflow: visible;
  font-family: sans-serif;
}

pre, form, h1 {
  margin: 0;
}

body {
  background: #000;
  color: #ccc;
  word-break: break-word;
}

h1 {
  font-size: 15pt;
  text-shadow: 2px 2px #555;
  text-align: center;
}

h2 {
  font-size: 14pt;
  border-bottom: 1px solid;
}

#btns {
  text-align: center;
}

#logs {
  word-break: break-word;
}

.btn {
  border: 1px solid #555;
  -webkit-border-radius: 5px;
  text-align: center;
  display: inline-block;
  background: #444;
  min-width: 150px;
  font-size: 10pt;
  padding: 6px 10px;
  margin: 6px;
  cursor: pointer;
}

.btn:active {
  background: #222;
}

.btn:focus {
  border-color: yellow;
  outline: none;
}

.right-btn {
 float: right;
 min-width: 75px;
}

.jasmine_reporter {
  background: #eee;
  padding-bottom: 4px;
}

html, body {
  overflow: visible;
  font-family: sans-serif;
}

pre, form, h1 {
  margin: 0;
}

body {
  background: #000;
  color: #ccc;
  word-break: break-word;
}

h1 {
  font-size: 15pt;
  text-shadow: 2px 2px #555;
  text-align: center;
}

h2 {
  font-size: 14pt;
  border-bottom: 1px solid;
}

#btns {
  text-align: center;
}

#logs {
  word-break: break-word;
}

.btn {
  border: 1px solid #555;
  -webkit-border-radius: 5px;
  text-align: center;
  display: inline-block;
  background: #444;
  min-width: 150px;
  font-size: 10pt;
  padding: 6px 10px;
  margin: 6px;
  cursor: pointer;
}

.btn:active {
  background: #222;
}

.btn:focus {
  border-color: yellow;
  outline: none;
}

.right-btn {
 float: right;
 min-width: 75px;
}

#jasmine-container {
  max-height: 300px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.jasmine_reporter {
  background: #eee;
  padding-bottom: 4px;
}

Set a max-height on the Jasmine output container.


body { font-size:12pt; }
a:after { background-color:#fff; }
a:not([href^="#"]):after { content:" ( "attr(href)" ) "; }
a:not([href^="http:"]):after { content: " ( http://identi.ca/"attr(href)" ) "; }
a[href^="/"]:after { content: " ( http://identi.ca" attr(href) " ) "; }

img { border:none; }
p { orphans: 2; widows: 1; }

#site_nav_global_primary,
#site_nav_local_views,
#form_notice,
.pagination,
#site_nav_global_secondary,
.entity_actions,
.notice-options,
#aside_primary {
display:none;
}

.timestamp dt, .timestamp dd,
.device dt, .device dd {
display:inline;
}

.notices li {
margin-bottom:18px;
}

/** theme: base
 *
 * @package   Laconica
 * @author Sarven Capadisli <csarven@controlyourself.ca>
 * @copyright 2009 Control Yourself, Inc.
 * @license   http://www.fsf.org/licensing/licenses/agpl-3.0.html GNU Affero General Public License version 3.0
 * @link      http://laconi.ca/
 */

a:after { background-color:#fff; }
a:not([href^="#"]):after { content:" ( "attr(href)" ) "; }

img { border:none; }
p { orphans: 2; widows: 1; }

#site_nav_global_primary,
#site_nav_local_views,
#form_notice,
.pagination,
#site_nav_global_secondary,
.entity_actions,
.notice-options,
#aside_primary,
.form_subcription_edit .submit {
display:none;
}

.timestamp dt, .timestamp dd,
.device dt, .device dd {
display:inline;
}

.profiles li,
.notices li {
margin-bottom:18px;
}

Print stylesheet - Added license and cleanup


body {
    background: url("/images/bgnoise.gif");
    font-family: "PT Sans", sans-serif;
}

h1, h2 {
    line-height: 140px;
}

h2 {
    text-align: right;
}

h2 a {
    font-weight: normal;
}

#top {
    margin-top: 100px;
}

#content {
    background: white;
    margin-top: 50px;
    margin-bottom: 10px;
    border: 1px solid #d3d3d3;
    font-size: 150%;
}

#content div {
    margin-top: 50px;
    margin-bottom: 50px;
}

@media (max-width: 767px) {
    h2 {
        line-height: 1;
        text-align: left;
        margin-top: 50px;
    }

    #top {
        margin-top: 0;
    }

    #content {
        margin-top: 10px;
    }

    .offset2 {
        margin-left: 20px;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    h2 {
        font-size: 160%;
    }

    #top {
        margin-top: 0;
    }
}

body {
    background: url("/images/bgnoise.gif");
    font-family: "PT Sans", sans-serif;
}

h1, h2 {
    line-height: 140px;
}

h2 {
    text-align: right;
}

h2 a {
    font-weight: normal;
}

#top {
    margin-top: 100px;
}

#content {
    background: white;
    margin-top: 50px;
    margin-bottom: 10px;
    border: 1px solid #d3d3d3;
    font-size: 150%;
}

#content div {
    margin-top: 50px;
    margin-bottom: 50px;
}

@media (max-width: 767px) {
    h1 {
        font-size: 160%;
    }

    h2 {
        line-height: 1;
        text-align: left;
        margin-top: 50px;
    }

    #top {
        margin-top: 0;
    }

    #content {
        margin-top: 10px;
    }

    .offset2 {
        margin-left: 20px;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    h2 {
        font-size: 160%;
    }

    #top {
        margin-top: 0;
    }
}

Make title smaller on phones

Make title smaller on phones


.grid-organism {
  background-color: #138080;
  color: #fff;
  font-style: italic;
  font-weight: bold; }

.grid-info-organism {
  background-color: #fff;
  color: #000;
  font-style: normal;
  font-weight: normal; }

.grid-details-organism {
  color: #106a6a; }

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

Add missing css stylesheet for the organism grids


html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 3em;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 3em;
    line-height: 3em;
    background-color: #ffffff;
}

#repositories-list .list-group-item {
    margin-top: 0.5em;
    border: none;
    padding: 10px 15px;
}

#repositories-list .list-group-item h4 {
    margin-top: 0;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 3em;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 3em;
    line-height: 3em;
    background-color: #ffffff;
}

.nav.nav-pills {
    margin-bottom: 1.5em;
}

#repositories-list .list-group-item {
    margin-top: 0.5em;
    border: none;
    padding: 10px 15px;
}

#repositories-list .list-group-item h4 {
    margin-top: 0;
}

Add offset between navbar and content

Add offset between navbar and content


.fixed-accordion{
	position: relative;
	overflow: hidden;
}
	.fixed-accordion > li{
		position: absolute;
		overflow: hidden;
		top:	0;
		left:	0;
		right:	0;

		-webkit-backface-visibility:	hidden;
		-moz-backface-visibility:		hidden;
		backface-visibility:			hidden;

		-webkit-transform:	translateX(0);
		-moz-transform:		translateX(0);
		-ms-transform:		translateX(0);
		-o-transform:		translateX(0);
		transform:			translateX(0);

		/** Use 3D-powered accleration when possible. */
		-webkit-transform:	translateZ(0);
		-moz-transform:		translateZ(0);
		-ms-transform:		translateZ(0);
		-o-transform:		translateZ(0);
		transform:			translateZ(0);
	}

.fixed-accordion{
	position: relative;
	overflow: hidden;
}
	.fixed-accordion > li{
		position: absolute;
		overflow: hidden;
		top:	0;
		left:	0;
		right:	0;

		/** Transitions */
		transition: .3s ease all;

		/** Transforms */
		-webkit-backface-visibility:	hidden;
		-moz-backface-visibility:		hidden;
		backface-visibility:			hidden;

		-webkit-transform:	translateX(0);
		-moz-transform:		translateX(0);
		-ms-transform:		translateX(0);
		-o-transform:		translateX(0);
		transform:			translateX(0);

		/** Use 3D-powered accleration when possible. */
		-webkit-transform:	translateZ(0);
		-moz-transform:		translateZ(0);
		-ms-transform:		translateZ(0);
		-o-transform:		translateZ(0);
		transform:			translateZ(0);
	}

Add CSS3 transitions to base styling

Add CSS3 transitions to base styling


:root {
  --backgroundColor-base--document: var(--color-white);
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  background-color: var(--backgroundColor-base--document);
  box-sizing: border-box;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1;
}

a {
  text-decoration: none;
}
a:focus {
  outline: none;
}

img {
  vertical-align: middle;
}

button:focus {
  outline: none;
}

:root {
  --backgroundColor-base--document: var(--color-white);
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  background-color: var(--backgroundColor-base--document);
  box-sizing: border-box;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1;
}

a {
  text-decoration: none;
  transition: color 150ms;
}
a:focus {
  outline: none;
}

img {
  vertical-align: middle;
}

button:focus {
  outline: none;
}

Add global anchor color transition.

Add global anchor color transition.


* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    -webkit-user-select: none;
}

body {
    background: black;
    color: white;
    font-family: 'Avenir Next', 'Helvetica Neue', sans-serif;
    padding: 30px;
}

drag-region {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 36px;
    line-height: 36px;
    -webkit-app-region: drag;
    cursor: default;
    text-align: center;
    opacity: 0;
    transition: all .6s;
    transition-delay: 5s;
}

drag-region:hover {
    opacity: 1;
    transition-delay: 0s;
    background: #111;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    -webkit-user-select: none;
}

body {
    background: black;
    color: white;
    font-family: 'Avenir Next', 'Helvetica Neue', sans-serif;
    padding: 30px;
}

drag-region {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 36px;
    line-height: 36px;
    -webkit-app-region: drag;
    cursor: default;
    text-align: center;
    opacity: 0;
    transition: all .6s;
    transition-delay: 1s;
}

drag-region:hover {
    opacity: 1;
    transition-delay: 0s;
    background: #111;
}

Reduce timeout of drag-region hover

Reduce timeout of drag-region hover


div {
    background-color: red;
    width: 30px;
    height: 30px;
}

div {
    background-color: red;
    width: 30px;
    height: 30px;
    border-radius: 2px;
}

Make the div corner round

Make the div corner round


/* This is the Custom styles for pages other than the Log in and Home page*/
html {
	position: relative;
	min-height: 100%;
	/*height: 100%;*/
}

body {
	/*height: 100%; with same in html makes footer sticky, but has space issue.*/
	margin-bottom: 60px;
}

#logout{
	color: #ffffff;
}

.center-section {
  max-width: 800px;
  padding: 60px;
  margin: 0 auto;
}

.center-section ul li{
	list-style: none;
	padding: 5px;
}

.center-section ul a{
	color: #6A82CC;
	text-decoration: none;
}

.center-section table a{
	color: #6A82CC;
	text-decoration: none;
}

.selecttable{
	text-align: center;

}

.selecttable th {
	text-align: center;
}

.footer{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 60px;
	background-color: #515153;
	color: #ffffff;
	text-align: center;
}

.container .text-muted {
	margin: 20px 0;
}

Update by Angela to include custom Bootstrap styles


body {
    font-family: "Source Sans Pro";
}

.letterhead {
    font-family: "Apex New";
    font-weight: lighter;
    font-size: 32px;
    padding-bottom: 20px;
}

h1.letterhead {
  border-bottom: none;
}

.letterhead svg {
    position: absolute;
}

.letterhead span {
    position: relative;
    left: 48px;
    top: 10px;
    font-weight: 400;
}

.letterhead em {
    font-style: normal;
    font-weight: 600;
}

hr {
  border: 0 !important;
  height: 0 !important;
  background: #fff;
  page-break-after: always;
}

Add page break on ---

Add page break on ---


#second_from_top {
display: block;
position: relative;
left: 100px;
top: 500px;
}

#second_from_top {
display: block;
position: relative;
left: 100px;
top: 700px;
}

Change second block technical relative stylesheet


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;
}

pre {
  font-size: 0.75rem;
  background-color: white;
  border-left: .25rem solid #e5e5e5;
}

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

.masthead-title {
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
}

.masthead-title img {
  display: inline;
  float: left;
  border-radius: 50%;
  margin-bottom: 0;
  margin-right: 1rem;
}

footer {
  margin-bottom: 2rem;
}

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;
}

pre {
  font-size: 0.75rem;
  background-color: white;
  border-left: .25rem solid #ddd;
}

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

.masthead-title {
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
}

.masthead-title img {
  display: inline;
  float: left;
  border-radius: 50%;
  margin-bottom: 0;
  margin-right: 1rem;
}

footer {
  margin-bottom: 2rem;
}

Make left border of codeblocks a bit brighter


* {
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
}

body {
  margin: 2em;
  background: #ccf;
}

#content {
  margin: 1em;
  background: #fff;
  padding: 1em;
  -moz-border-radius: 3em;
  -webkit-border-radius: 3em;
  border-radius: 3em;
}

p {
  margin: 1em;
}

ul, ol {
  margin-left: 3em;
}

* {
  margin: 0px;
  padding: 0px;
}

h1 {
  text-align: center;
}

body {
  margin: 2em;
  background: #ccf;
}

#content {
  margin: 1em;
  background: #fff;
  padding: 1em;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  border-radius: 1em;
}

p {
  margin: 1em;
}

ul, ol {
  margin-left: 3em;
}

Change rounded border radius from 3em to 1em.


.mongo-web-shell {
  border-radius: 10px;
  height: 30em;
  padding: 8px 16px;
}

.mongo-web-shell, .mongo-web-shell * {
  background-color: #000000;
  color: #00e500;
  font-size: 15px;
}

.mongo-web-shell p {
  padding: 0;
  margin: 0;
}

.mws-response-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  word-wrap: break-word;
}

.mws-response-list li {
  margin: 3px 0;
}

.mws-form {
  display: inline-block;
  margin-left: 1ex; /* Space before the PS1 */
  width: 95%; /* TODO: This doesn't fill the space properly. */
}

.mws-input {
  border: none;
  width: 95%;
  padding: 0;
  margin: 0;
}

.mws-input:focus {
  outline: none;
}

.mongo-web-shell {
  border-radius: 10px;
  height: 30em;
  padding: 8px 16px;
}

.mongo-web-shell, .mongo-web-shell * {
  background-color: #000000;
  color: #00e500;
  font-size: 15px;
}

.mongo-web-shell p {
  padding: 0;
  margin: 0;
}

.mws-response-list {
  height: 100%;
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  word-wrap: break-word;
}

.mws-response-list li {
  margin: 3px 0;
}

.mws-form {
  display: inline-block;
  margin-left: 1ex; /* Space before the PS1 */
  width: 95%; /* TODO: This doesn't fill the space properly. */
}

.mws-input {
  border: none;
  width: 95%;
  padding: 0;
  margin: 0;
}

.mws-input:focus {
  outline: none;
}

Fix response list not scrolling issue.

Fix response list not scrolling issue.

The height was not set so the content overflowed the container.


header {
	background-color: #281892;
	border-bottom: 15px solid #0d0254;
}

.header-content {
	padding-top: 5%;
}

.selfie {
	height: auto;
	width: 25%;
	display: block;
	margin: auto;
	border-radius: 20%;
	border: 2px solid black;
}

.header-text {
	color: white;
	text-shadow: 3px 1px 2px rgba(0, 0, 0, 1);

}

Add styling to header, bottom-border, padding-top, image and text shadows.


#second_from_top {
display: block;
position: relative;
top: 820px;
left: 100px;
}

#third_from_top {
display: block;
position: relative;
top: 830px;
left: 100px;
}

#fourth_from_top {
display: block;
position: relative;
top: 840px;
left: 100px;
}

#fifth_from_top {
display: block;
position: relative;
top: 850px;
left: 100px;
}

#sixth_from_top {
display: block;
position: relative;
top: 860px;
left: 100px;
}

#seventh_from_top {
display: block;
position: relative;
top: 870px;
left: 100px;
}

main {
	display: block;
	height: 100%;
	padding-bottom: 1000px;
}

Change top on blog index

Change top on blog index


.input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 3px;
  width: 100%;
}

.disabled {
  background-color: #f9f9f9;
}

.input:focus {
  outline: none;
  box-shadow: 0 0 5px #ccc;
  border-color: #aaa;
}

span.suffix {
  padding: 0 4px;
  color: rgba(0, 0, 0, 0.65);
  text-align: center;
  background-color: #eee;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  position: relative;
  transition: all 0.3s;
  display: table-cell;
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

span.inputGroup > input {
  display: table-cell;
}

input.suffix {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

span.inputGroup {
  position: relative;
  display: table;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 3px;
  width: 100%;
}

.disabled {
  background-color: #f9f9f9;
}

.input:focus {
  outline: none;
  box-shadow: 0 0 5px #ccc;
  border-color: #aaa;
}

.input::placeholder {
  color: #aaa;
}

span.suffix {
  padding: 0 4px;
  color: rgba(0, 0, 0, 0.65);
  text-align: center;
  background-color: #eee;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  position: relative;
  transition: all 0.3s;
  display: table-cell;
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

span.inputGroup > input {
  display: table-cell;
}

input.suffix {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

span.inputGroup {
  position: relative;
  display: table;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

Fix global field placeholder style

Fix global field placeholder style


ul .nav {
      list-style: none;
}

.nav li {
    display: inline;
}

.pull-left {
    float: left;
}

.step_part {
    border: solid black 1px;
    padding: 10px;
    height: 100%;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-right: 5px;
}

.step {
    display: inline-block;
    height: 82px;
    padding-bottom: 10px;
}

.step_part img {
    vertical-align: middle;
    height: 60px;
}

.container {
    width: 90% !important;
}

Make the content span almost the width of the page


.modal {
  position: 'fixed';
  z-index: 1040;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.backdrop {
  position: fixed;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.content {
  position: absolute;
  max-width: 640px;
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  outline: none;
}

.closeButton {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
}

.modal {
  position: 'fixed';
  z-index: 1040;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.backdrop {
  position: fixed;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.content {
  position: fixed;
  max-width: 640px;
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  outline: none;
}

.closeButton {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
}

Make modal content position fixed

Make modal content position fixed


* {
    -webkit-user-select: none;    /* Disable selection/Copy of UIWebView when tapping for a long time */
}

p {
  margin: 1em 0em;
}

Disable selection in webview by default

CSS: Disable selection in webview by default


/* -  These is a style snippet to be used with
      http://mcdlr.com/css-inject/              - */

/* -  Reddit - http://www.reddit.com/                                   - *\
|* -  I don't use the reddit enhancement suite. I believe in websites.  - *|
\* -  v1.7                                                              - */

.content {
  margin: 0;
}
.side {
  display: none;
}
.usertext.border .usertext-body {
  padding: 1em 1.5em;
}
.comment {
  margin: 1em;
}
.md {
  max-width: 64em;
}
.md p,
.md h1 {
  line-height: 1.4;
  margin: 1em 0;
}
.md p:first-of-type {
  margin-top: 5px;
}
.md p:last-of-type {
  margin-bottom: 5px;
}
.link .usertext .md {
  padding: 1em 1.5em;
  border-color: #99b3cc;
}
.arrow.up,
.arrow.down {
  display: block;
  visibility: visible;
}

/* -  /reddit  - */

/* -  These is a style snippet to be used with
      http://mcdlr.com/css-inject/              - */

/* -  Reddit - http://www.reddit.com/                                   - *\
|* -  I don't use the reddit enhancement suite. I believe in websites.  - *|
\* -  v1.8                                                              - */

body {
  background-image: none;
}
.content {
  margin: 0;
}
.side {
  display: none;
}
.usertext.border .usertext-body {
  padding: 1em 1.5em;
}
.comment {
  margin: 1em;
}
.md {
  max-width: 64em;
}
.md p,
.md h1 {
  line-height: 1.4;
  margin: 1em 0;
}
.md p:first-of-type {
  margin-top: 5px;
}
.md p:last-of-type {
  margin-bottom: 5px;
}
.link .usertext .md {
  padding: 1em 1.5em;
  border-color: #99b3cc;
}
.arrow.up,
.arrow.down {
  display: block;
  visibility: visible;
}

/* -  /reddit  - */

Remove background image for better legibility


#app-mount div[class*="app-"] {
  margin-bottom: 48px !important;
}

#dht-ctrl {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 48px;
  background-color: #fff;
  z-index: 1000000;
}

#dht-ctrl button {
  height: 32px;
  margin: 8px 0 8px 8px;
  font-size: 16px;
  padding: 0 12px;
  background-color: #7289da;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
}

#dht-ctrl button:disabled {
  background-color: #7a7a7a;
  cursor: default;
}

#dht-ctrl p {
  display: inline-block;
  margin: 14px 12px;
}

#app-mount div[class*="app-"] {
  margin-bottom: 48px !important;
}

#app-mount div[class*="app-"] > div[class*="app-"] {
  margin-bottom: 0 !important;
}

#dht-ctrl {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 48px;
  background-color: #fff;
  z-index: 1000000;
}

#dht-ctrl button {
  height: 32px;
  margin: 8px 0 8px 8px;
  font-size: 16px;
  padding: 0 12px;
  background-color: #7289da;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
}

#dht-ctrl button:disabled {
  background-color: #7a7a7a;
  cursor: default;
}

#dht-ctrl p {
  display: inline-block;
  margin: 14px 12px;
}

Fix empty space between DHT tracker and app after a recent Discord update


/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require "reset"
 *= require "jquery-ui"
 *= require_self
 *= require_tree .
*/

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require "reset"
 *= require "jquery-ui"
 *= require "base"
 *= require "header"
 *= require "formtastic"
 *= require "formtastic_changes"
 *= require "layout"
 *= require "maps"
 *= require "dateinput"
*/

Replace stylesheet Sprockets requires with specific sheets.

Start wirth new base and header.


body {
	margin:1em auto;
	max-width:40em;
	padding:0 .62em;
	font:1.2em/1.62 Hack;
}

h1, h2, h3 {
	line-height:1.2;
}

@media print {
	body {
		max-width:none
	}
}

body {
	margin:1em auto;
	max-width:40em;
	padding:0 .62em;
	font:1.2em/1.62 Hack;
	linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%)
}

h1, h2, h3 {
	line-height:1.2;
	border-bottom: 1px solid black;
}

h1 {
	border-bottom: 2px solid black;
	/* This overrides the 1px bottom border from previous section */
}

@media print {
	body {
		max-width:none
	}
}

Add background, add underline to headings.


.Masonry {
  margin-left: auto;
  margin-right: auto;
  max-width: 30em;
}

@supports (display: grid) {
  .Masonry {
    display: grid;
    grid-gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
    max-width: none;
  }
}

.Masonry > * + * {
  margin-top: 1.25rem;
}

@supports (display: grid) {
  .Masonry > * + * {
    margin-top: 0;
  }
}

@supports (display: grid) {
  .Masonry {
    display: grid;
    grid-gap: 1.25rem;
    justify-items: center;
    max-width: none;
  }

  @media (min-width: 22.5em) {
    .Masonry {
      grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
    }
  }
}

.Masonry > * {
  margin-left: auto;
  margin-right: auto;
  max-width: 40rem;
}

.Masonry > * + * {
  margin-top: 1.25rem;
}

@supports (display: grid) {
  .Masonry > * + * {
    margin-top: 0;
  }
}

Revise Masonry styles for greater responsiveness

A few changes made with @erikjung's help on the trickier parts:

- The most pleasing `min` value at large sizes is a little too wide for small sizes, so now `grid-template-columns` kicks in at a little larger than ~ `320px`.
- We're now using `auto-fit` instead of `auto-fill`, which removes the unsightly gaps when there aren't enough cells to fill the row.
- We're centering lone items using `justify-items: center`. There appears to be a `grid-gap` bug in Safari and Chrome that retains a right-hand gap at this size, but that's remedied by setting `auto` margins on the child items.
- And to keep any single item from getting too wide, we're now capping the width of the children rather than the width of the parent. This also serves as a nice fallback for grid-less browsers.


html {
  font-family: 'Reem Kufi', sans-serif;
}

.icon-block {
  padding: 0 15px;
}
footer .icon-block {
  font-size: inherit;
}

.dm-white {
  background-color: #ECEBEF;
}

.dm-white-text {
  color: #ECEBEF;
}

.dm-grey {
  background-color: #49484A;
}

.dm-grey-text {
  color: #49484A;
}

.dm-purple {
  background-color: #454AB2
}

.dm-purple-text {
  color: #454AB2
}

.dm-black{
  background-color: #140D10;
}

.dm-black-text{
  color: #140D10 !important;
}

.dm-big-nav-font {
  font-size: 2.1em;
}

#headshot {
  height: 70%;
  width: 70%;
}

.contact-link i.fa:hover {
  color: #140D10;
}

footer.page-footer {
  background-color: #ECEBEF;
}

html {
  font-family: 'Reem Kufi', sans-serif;
}

.icon-block {
  padding: 0 15px;
}
footer .icon-block {
  font-size: inherit;
}

.dm-white {
  background-color: #ECEBEF;
}

.dm-white-text {
  color: #ECEBEF;
}

.dm-grey {
  background-color: #49484A;
}

.dm-grey-text {
  color: #49484A;
}

.dm-purple {
  background-color: #454AB2
}

.dm-purple-text {
  color: #454AB2
}

.dm-black{
  background-color: #140D10;
}

.dm-black-text{
  color: #140D10 !important;
}

.dm-big-nav-font {
  font-size: 2.1em;
}

#headshot {
  height: 70%;
  width: 70%;
}

.contact-link i.fa:hover {
  color: #454AB2;
}

footer.page-footer {
  background-color: #ECEBEF;
}

Make icons purple on hover

Make icons purple on hover


main {
  margin-left: 5%;
  margin-right: 5%;
  font-family: serif;
}

h1 {
  margin-top: 5%;
  font-family: serif;
}

h2 {
  font-family: serif;
  position: relative;
  top: -10px;
}

h4{
  font-family: serif;
  position: relative;
  top: -15px;
}

#horizontalRule {
  padding: 5px;
  position: relative;
  top: -15px;
  outline-color: black;
  outline-width: 1px;
  outline-style: solid;
  background-color: black;
}

section {
  font-family: serif;
  position: relative;
  top: -15px;
}

main {
  margin-left: 5%;
  margin-right: 5%;
  font-family: serif;
}

h1 {
  margin-top: 5%;
  font-family: sans-serif;
}

h2 {
  font-family: sans-serif;
  position: relative;
  top: -10px;
}

h4{
  font-family: sans-serif;
  position: relative;
  top: -15px;
}

#horizontalRule {
  padding: 5px;
  position: relative;
  top: -15px;
  outline-color: black;
  outline-width: 1px;
  outline-style: solid;
  background-color: black;
}

section {
  font-family: sans-serif;
  position: relative;
  top: -15px;
}

Change font in template stylesheet

Change font in template stylesheet


.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; }
.ui-timepicker-div dl dd { margin: -25px 0 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }

Add css file per vrana pull request

Add css file per vrana pull request


.content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  background-color: #111;
  -webkit-transition-property: top, bottom;
          transition-property: top, bottom;
  -webkit-transition-duration: .2s, .2s;
          transition-duration: .2s, .2s;
  -webkit-transition-timing-function: linear, linear;
          transition-timing-function: linear, linear;
  -webkit-overflow-scrolling: touch;
}

.action-bar + .tab-fixed + .content {
  top: 96px;
}

.tab-fixed + .content,
.action-bar ~ .content {
  top: 48px;
}

.inset {
  padding: 20px;
}

.scroll {
  overflow: auto;
}

.content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  background-color: #111;
  -webkit-transition-property: top, bottom;
          transition-property: top, bottom;
  -webkit-transition-duration: .2s, .2s;
          transition-duration: .2s, .2s;
  -webkit-transition-timing-function: linear, linear;
          transition-timing-function: linear, linear;
  -webkit-overflow-scrolling: touch;
}

.action-bar + .tab-fixed + .content {
  top: 96px;
}

.tab-fixed + .content,
.action-bar ~ .content {
  top: 48px;
}

.inset {
  padding: 16px;
}

.scroll {
  overflow: auto;
}

Change .inset padding to 16px to match native inset padding


pre {
    background: #0B1022;
    font-family: 'Monaco', courier, monospace;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    margin: 0px;
    padding: 0px;
    padding: 10px;
    color: #fff;
    font-size: 14px;
    margin-bottom: 20px;
}

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

code .comment {
    color: #727272;
}

code .constant, code .integer {
    color: #D8FA3C;
}

code .storage {
    color: #FBDE2D;
}

code .string {
    color: #61CE3C;
}

code .keyword, code .selector, code.sql .constant {
    color: #FBDE2D;
}

code .keyword.regexp.php {
    color: #fff;
}

code .entity {
    color: #FF6400;
}

code .support {
    color: #8DA6CE;
}

code .meta {
    color: #FF6400;
}

pre {
    background: #0B1022;
    font-family: 'Monaco', courier, monospace;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    margin: 0px;
    padding: 0px;
    padding: 10px;
    color: #fff;
    font-size: 14px;
    margin-bottom: 20px;
}

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

code .comment {
    color: #727272;
}

code .constant, code .integer {
    color: #D8FA3C;
}

code .storage {
    color: #FBDE2D;
}

code .string {
    color: #61CE3C;
}

code .keyword, code .selector, code.sql .constant {
    color: #FBDE2D;
}

code .keyword.regexp.php {
    color: #fff;
}

code .parent {
    font-style: italic;
}

code .entity {
    color: #FF6400;
}

code .support {
    color: #8DA6CE;
}

code .meta {
    color: #FF6400;
}

Add style for child classes

Add style for child classes


.align-left{
        text-align: left;
}
.align-justify{
        text-align: justify;
}
.align-center{
        text-align: center;
}
.align-right{
        text-align: right;
}
.small{
	font-size: 0.7em;
}
.big{
	font-size: 1.4em;
}

Move deprecated file from website

[NEW] Move deprecated file from website


/* setting full-screen responsive background image to page */
html {
    background-image: url('./images/drum-background.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

/* setting font of the whole body text */
body {
    font-family: Calibri, sans-serif;
}

/* defining style for a key container */
.key-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/* defining style for a single key */
.key {
    border: 3px solid black;
    border-radius: 3px;
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.4);
    text-align: center;
    padding: 6px 12px;
}

/* defining style for a single alphabetical letter inside the key */
kbd {
    font-size: 32px;
    display: block;
    color: rosybrown;
}

/* defining style for the sound word inside the key */
.sound {
    color: white;
    font-size: 16px;
}

/* setting full-screen responsive background image to page */
html {
    background-image: url('./images/drum-background.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

/* setting font of the whole body text */
body {
    font-family: Calibri, sans-serif;
}

/* defining style for a key container */
.key-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/* defining style for a single key */
.key {
    border: 3px solid black;
    border-radius: 3px;
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.4);
    text-align: center;
    padding: 6px 12px;
    margin: 15px;
}

/* defining style for a single alphabetical letter inside the key */
kbd {
    font-size: 32px;
    display: block;
    color: rosybrown;
}

/* defining style for the sound word inside the key */
.sound {
    color: white;
    font-size: 16px;
}

Add margin among key blocks

Add margin among key blocks


:host >>> markdown {
    font-size: 85%;
}

:host >>> markdown table {
    border-collapse: separate;
    border-spacing: 0;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

:host >>> markdown table th {
    font-size: 90%;
    width: 25%;
    padding: 4px;
    text-align: left;
    vertical-align: top;
    color: #444;
    background-color: #ccc;
    border: 1px solid #fff;
    border-right-color: #ccc;
    border-bottom-color: #ccc;
}

:host >>> markdown table td {
    font-size: 80%;
    padding: 4px;
    background-color: #fafafa;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

textarea {
    font-size: 80%;
}

:host >>> markdown {
    font-size: 85%;
}

:host >>> markdown table {
    border-collapse: separate;
    border-spacing: 0;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

:host >>> markdown table th {
    font-size: 90%;
    padding: 4px;
    text-align: left;
    vertical-align: top;
    color: #444;
    background-color: #ccc;
    border: 1px solid #fff;
    border-right-color: #ccc;
    border-bottom-color: #ccc;
}

:host >>> markdown table td {
    font-size: 80%;
    padding: 4px;
    background-color: #fafafa;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

textarea {
    font-size: 80%;
}

:new: Adjust columns width automatically on description


.sc-reader-xref {
  position: relative;
  color: var(--text-action-color);
}

.sc-reader-xref .se-preview {
  font-family: 'Avenir Next', 'Lato', Helvetica;
  display: none;
  line-height: 17px;
  color: #444;
  padding: 10px;
  padding-bottom: 0px;
  position: absolute;
  top: 20px;
  left: 0px;
  margin-left: -200px;
  width: 400px;
  border-radius: 4px;
  background: #fff;
  box-shadow: var(--default-box-shadow);
  z-index: 400;
  font-size: 11px;
  overflow: auto;
}

.sc-reader-xref .se-preview .se-ref {
  position: relative;
  margin-bottom: 10px;
}

.sc-reader-xref .se-preview .se-text {
  padding-left: 40px;
}

.sc-reader-xref .se-preview .se-label {
  position: absolute;
  top: 0px;
  left: 5px;
}

.sc-reader-xref:hover .se-preview {
  display: block;
}

.sc-reader-xref {
  position: relative;
  color: var(--text-action-color);
}

.sc-reader-xref.sm-fn {
  vertical-align: super;
  font-size: smaller;
}

.sc-reader-xref .se-preview {
  font-family: 'Avenir Next', 'Lato', Helvetica;
  display: none;
  line-height: 17px;
  color: #444;
  padding: 10px;
  padding-bottom: 0px;
  position: absolute;
  top: 20px;
  left: 0px;
  margin-left: -200px;
  width: 400px;
  border-radius: 4px;
  background: #fff;
  box-shadow: var(--default-box-shadow);
  z-index: 400;
  font-size: 11px;
  overflow: auto;
}

.sc-reader-xref .se-preview .se-ref {
  position: relative;
  margin-bottom: 10px;
}

.sc-reader-xref .se-preview .se-text {
  padding-left: 40px;
}

.sc-reader-xref .se-preview .se-label {
  position: absolute;
  top: 0px;
  left: 5px;
}

.sc-reader-xref:hover .se-preview {
  display: block;
}

Fix styles for reader footnotes.

Fix styles for reader footnotes.


/* Move down content because we have a fixed navbar that is 50px tall */
html {
  position: relative;
  min-height: 100%;
}

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

  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;

  /* Set the fixed height of the footer here */
  height: 60px;
}

.github-fork-ribbon-wrapper {
	top: 50px;
}
.github-fork-ribbon {
	background-color: #222222;
}
.github-fork-ribbon a {
	color: #9d9d9d;
}
.github-fork-ribbon a, .github-fork-ribbon a:hover {
	border-style: none;
}

/* Move down content because we have a fixed navbar that is 50px tall */
html {
  position: relative;
  min-height: 100%;
}

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

  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;

  /* Set the fixed height of the footer here */
  height: 60px;
}

.github-fork-ribbon-wrapper {
	top: 50px;
}
.github-fork-ribbon {
	background-color: #222222;
}
.github-fork-ribbon a {
	color: #9d9d9d;
}
.github-fork-ribbon a, .github-fork-ribbon a:hover {
	border-style: none;
	text-shadow: none;
}
.github-fork-ribbon {
	box-shadow: none;
}

Remove shadow from fork ribbon

Remove shadow from fork ribbon


/* body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}

#p2-container {
  flex: 3 1 auto;
}

.gui {
  display: flex;
  flex-direction: row;
  height: 250px;
  flex: 1 1 auto;
}

.gui-element {
  flex: 1 1 auto;
}
*/

#alternative-link {
  position: absolute;
  top: 5px;
  right: 5px;
}

#p2-container {
  flex: 3 1 auto;
}

.graph-container {
  float: left;
  width: 400px;
}

.gui-parent:
  flex: 2 1 auto;

#container {
  width: 100%;
  height: 794px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.bang {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 100%;
  text-align: center;
  font-family: monospace;
  color: red;
}

/* body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}

#p2-container {
  flex: 3 1 auto;
}

.gui {
  display: flex;
  flex-direction: row;
  height: 250px;
  flex: 1 1 auto;
}

.gui-element {
  flex: 1 1 auto;
}
*/

#alternative-link {
  position: absolute;
  bottom: 5px;
  right: 5px;
}

#p2-container {
  flex: 3 1 auto;
}

.graph-container {
  float: left;
  width: 400px;
}

.gui-parent:
  flex: 2 1 auto;

#container {
  width: 100%;
  height: 794px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.bang {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 100%;
  text-align: center;
  font-family: monospace;
  color: red;
}

Move alternative link to better location


#fTelnetContainer {
    box-sizing: content-box;
    margin: auto;
}

    #fTelnetContainer * {
        box-sizing: content-box;
    }

    #fTelnetContainer canvas {
        display: block;
        margin: auto;
    }

#fTelnetButtons {
    background-color: green;
    color: white;
    font: 14px Arial, Helvetica, sans-serif;
    margin: auto;
    padding: 5px;
    text-align: center;
}

    #fTelnetButtons a {
        color: white;
        text-decoration: none;
    }

#fTelnetClientContainer {
    position: relative;
    margin: auto;
}

#fTelnetFocusWarning {
    background-color: red;
    color: white;
    font: 14px Arial, Helvetica, sans-serif;
    margin: auto;
    padding: 5px;
    text-align: center;
}

#fTelnetScrollback {
    background-color: red;
    color: white;
    font: 14px Arial, Helvetica, sans-serif;
    margin: auto;
    padding: 5px;
    text-align: center;
}

    #fTelnetScrollback a {
        color: white;
        text-decoration: none;
    }

#fTelnetStatusBar {
    background-color: blue;
    color: white;
    font: 14px Arial, Helvetica, sans-serif;
    margin: auto;
    padding: 5px;
}

#fTelnetContainer {
    box-sizing: content-box;
    margin: auto;
}

    #fTelnetContainer #fTelnetButtons,
    #fTelnetContainer #fTelnetScrollback,
    #fTelnetContainer #fTelnetFocusWarning,
    #fTelnetContainer #fTelnetClientContainer,
    #fTelnetContainer #fTelnetStatusBar {
        box-sizing: content-box;
    }

    #fTelnetContainer canvas {
        display: block;
        margin: auto;
    }

#fTelnetButtons {
    background-color: green;
    color: white;
    font: 14px Arial, Helvetica, sans-serif;
    margin: auto;
    padding: 5px;
    text-align: center;
}

    #fTelnetButtons a {
        color: white;
        text-decoration: none;
    }

#fTelnetClientContainer {
    position: relative;
    margin: auto;
}

#fTelnetFocusWarning {
    background-color: red;
    color: white;
    font: 14px Arial, Helvetica, sans-serif;
    margin: auto;
    padding: 5px;
    text-align: center;
}

#fTelnetScrollback {
    background-color: red;
    color: white;
    font: 14px Arial, Helvetica, sans-serif;
    margin: auto;
    padding: 5px;
    text-align: center;
}

    #fTelnetScrollback a {
        color: white;
        text-decoration: none;
    }

#fTelnetStatusBar {
    background-color: blue;
    color: white;
    font: 14px Arial, Helvetica, sans-serif;
    margin: auto;
    padding: 5px;
}

Fix virtual keyboard (it shouldn't use content-box)


.goods-payment-challenge-frame {
  width: 250px;
  height: 400px;
  border: 0;
  box-shadow: none;
}

.goods-payment-challenge-frame {
  width: 100%;
  height: 400px;
  border: 0;
  box-shadow: none;
}

Make width of payment challenge frame 100%


/*
Theme Name: Air
Theme URI: https://github.com/digitoimistodude/air
Author: Digitoimisto Dude Oy
Author URI: https://www.dude.fi
Description: A minimalist WordPress starter theme.
Version: 2.0.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: air
Tags:
*/

/**
* AIR theme version information
* Last implemented _s commit: 7d0846e (Sep 23, 2016)
* Last checked _s commit: 7d0846e (Sep 23, 2016)
*
* @link https://github.com/Automattic/_s/commits/master
*
* @author Roni Laukkarinen, Timi Wahalahti
* @version 20.02.2017
* @since 28.01.2016
*/

/*
Theme Name: Air
Theme URI: https://github.com/digitoimistodude/air
Author: Digitoimisto Dude Oy
Author URI: https://www.dude.fi
Description: A minimalist WordPress starter theme.
Version: 2.0.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: air
Tags:
*/

/**
* AIR theme version information
* Last implemented _s commit: 68b0b9c (Dec 23, 2016)
* Last checked _s commit: b330bba (Dev 25, 2016)
*
* @link https://github.com/Automattic/_s/commits/master
*
* @author Roni Laukkarinen (ronilaukkarinen), Timi Wahalahti (timiwahalahti)
* @version 20.02.2017
* @since 28.01.2016
*/

Update _s version information, add nicknames for authors


body {
  padding-top: 60px;
  padding-bottom: 40px;
}

body {
  font-family: sans-serif;
  padding-top: 60px;
  padding-bottom: 40px;
}

Increase readability by using a heavier font

Bootstrap was defaulting to Helvetica Neue, which is quite thin.

Closes #36


/* CSS file placeholder. */

body{
  padding:0;
  margin:0px;
  background-color:#2A2D33;
  webkit-app-region: drag;
}

#exitAppElement, #minAppElement{
  height:12px;
  width:12px;
  position:relative;

  display:inline;
  float:right;
  margin:2px;
  margin-right:3px;
  margin-top:4px;

  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;

  opacity:0.6;
}
input{
  -webkit-app-region: no-drag;
}
#exitAppElement:hover, #minAppElement:hover{
  opacity:1;
}

#exitAppElement{
  background-color:#ff4d4d;
  margin-right:5px;
}

#minAppElement{
  background-color:green;
}

/* CSS file placeholder. */

body{
  padding:0;
  margin:0;
  background-color:#2A2D33;
  webkit-app-region: drag;
}

#exitAppElement, #minAppElement{
  height:12px;
  width:12px;
  position:relative;

  float:right;
  margin:2px;
  margin-right:3px;
  margin-top:4px;

  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;

  opacity:0.6;
}
input{
  -webkit-app-region: no-drag;
}
#exitAppElement:hover, #minAppElement:hover{
  opacity:1;
}

#exitAppElement{
  background-color:#ff4d4d;
  margin-right:5px;
}

#minAppElement{
  background-color:green;
}

REFACTOR css padding and margin values.

REFACTOR css padding and margin values.


/* Allows tip/success icons to show outside of the section */
.markdown-section {
  overflow: visible !important;
}

p.tip {
  border-left-color: #f66;
}

p.tip,
p.success {
  padding: 12px 24px 12px 30px;
  margin: 2em 0;
  border-left-width: 4px;
  border-left-style: solid;
  background-color: #f8f8f8;
  position: relative;
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
}

p.tip:before {
  content: "!";
  background-color: #f66;
}

p.tip::before,
p.success::before {
  position: absolute;
  top: 14px;
  left: -12px;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  text-align: center;
  line-height: 20px;
  font-weight: bold;
  font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
}

Fix for icon getting clipped

Fix for icon getting clipped


html{font-size:85%;margin:0 10px}
div.manager-container{padding:0 10px;max-width:1200px;margin:auto}
.icon-image{display:inline}
h5.tabdescription{margin:10px 0}
h4.tkaction{margin-top:10px;text-align:center}
select#styledSelect_Tool_Capabilities,select#styledSelect_Scenarios{height:200px}
/*ul#tutorialCategories li{min-width:110px}*/
ul#tutorialCategories li a{padding-left:0;padding-right:0; cursor:default;}
div#viewDetails,div#startTutorial{min-width:60px;padding:5px}
ul#tutorialCategories li#tabCapabilities {float:none;width:100% !important; margin:0 }

.library, .project, .application, .uicontrol { font-weight: bold; }
.filepath { font-family: monospace; }
.cmdname { font-weight: bold; font-family: monospace; }
.option { font-family: monospace; }
.kwd { font-weight: bold; }
.varname { font-style : italic;}
.parmname { font-weight: bold; font-family: monospace; white-space: nowrap; }
.code { font-family: monospace; }
.userinput { font-family: monospace; }
.msgph { font-family: monospace; }
.systemoutput { font-family: monospace; }

html{font-size:85%;margin:0 10px}
div.manager-container{padding:0 10px;max-width:1200px;margin:auto}
.icon-image{display:inline}
h5.tabdescription{margin:10px 0}
h4.tkaction{margin-top:10px;text-align:center}
select#styledSelect_Tool_Capabilities,select#styledSelect_Scenarios{height:200px}
/*ul#tutorialCategories li{min-width:110px}*/
ul#tutorialCategories li a{padding-left:0;padding-right:0; cursor:default;}
div#viewDetails,div#startTutorial{min-width:60px;padding:5px}
ul#tutorialCategories li#tabCapabilities {float:none;width:100% !important; margin:0 }

ol ol { list-style: lower-alpha;}
ol ol ol { list-style: lower-roman;}

.library, .project, .application, .uicontrol { font-weight: bold; }
.filepath { font-family: monospace; }
.cmdname { font-weight: bold; font-family: monospace; }
.option { font-family: monospace; }
.kwd { font-weight: bold; }
.varname { font-style : italic;}
.parmname { font-weight: bold; font-family: monospace; white-space: nowrap; }
.code { font-family: monospace; }
.userinput { font-family: monospace; }
.msgph { font-family: monospace; }
.systemoutput { font-family: monospace; }

Add support for nested ol lists 1.a.i.

Add support for nested ol lists 1.a.i.


/**********************
*****   Masthead ******
**********************/

.masthead .container {
  margin-left: 2rem;
  margin-right: 2rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.masthead .container p {
  width: 25vw;
  font-size: .75rem;
}

/**********************
******   Sidebar ******
**********************/

.sidebar {
  width: 14rem;
  background: linear-gradient(to bottom, #000000 35%, #F57979 80%);
  font-weight: 300;
}

.mars {
  margin-left: 5vw;
  margin-top: -3vw;
  margin-bottom: 10vh;
}

.icon-holder {
  margin-top: 20vh;
  margin-left: 2rem;
}

.icon-list {
  list-style: none;
  display: flex;
  flex-direction: row;
}

.icon-list li {
  margin-right: 1rem;
}

.icon-list img:hover {
  cursor: pointer;
}

.icon-list img {
  height: 2rem;
}

@media only screen and (max-width: 500px) {
  .sidebar {
    display: none;
  }
  .wrap {
    margin-left: 0;
  }
}

a.sidebar-nav-item {
  font-size: 1rem;
  font-weight: 300;
  margin-left: 1rem;
}

a.sidebar-nav-item:hover {
  color: #b3ebff;
}

/**********************
****  Main Content ****
**********************/

.wrap {
  margin-left: calc(14rem + 5vw);
}

.post-title {
  font-size: 1.7rem;
}

.post-date {
  font-size: .8rem;
}

.content {
  margin-left: 2rem;
}

Move style updates to correct place

Move style updates to correct place


header {
	margin-bottom: 40px;
}
footer {
	margin-top: 40px;
}

table {
	border-collapse: collapse;
}
td,
th {
	border: 1px solid #000;

	padding: 5px;
}
th {
	background-color: #bbb;
}

Add some basic CSS styling

Add some basic CSS styling


#comparison h3, #comparison h5, #comparison p {
    text-align: center;
  }
pre {
    background-color: #444;
    color: #FFF;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    padding: 10px;
    border-radius: 6px;
    font-size: 13px;
  }

  .about-container {
    margin-top: 50px;
  }
  h1, h2, h3, h4, h5, h6 {
    margin-top: 40px;
    margin-bottom: 50px;
  }

.for-contributors {
  padding: 1.5em;
}

Add padding for contributors 'this can be you' text


div#preload { display: none; }

body {
    height: 100%;
    padding: 0;
    margin: 0;
}
html, body, #map {
    height: 100%;
}

#legend {
  background-color: rgb(243, 244, 242);
  padding: 10px;
  padding-right: 25px;
  font-family: 'Lato', sans-serif;
  text-align: left;
}

#legend h4 {
  font-size: large;
}

#legend p {
  font-size: medium;
}

#status {
  width: min-content;
  display: inline;
}

#status img {
  float: left;
  padding-top: 15px;
  padding-right: 8px;
}

#status p {
  float: left;
}

div#preload { display: none; }

body {
    height: 100%;
    padding: 0;
    margin: 0;
}
html, body, #map {
    height: 100%;
}

#legend {
  background-color: rgb(243, 244, 242);
  padding: 10px;
  padding-right: 25px;
  font-family: 'Lato', sans-serif;
  text-align: left;
  border-bottom-left-radius: 8px;
}

#legend h4 {
  font-size: large;
}

#legend p {
  font-size: medium;
}

#status {
  width: min-content;
  display: inline;
}

#status img {
  float: left;
  padding-top: 15px;
  padding-right: 8px;
}

#status p {
  float: left;
}

Add curved corner for legend

Add curved corner for legend


.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;
}

.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-duration: 0.4s;
    transition-property: transform;
}

.leaflet-control-minimap a.minimized {
    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;
}

.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 .25s ease-in-out;
}

.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;
}

Make it work with webkit

Make it work with webkit

Stupid prefixes enforcing the hidden WebKit hegemony agenda promulgated by
Google...


html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
    font-size: 24px;
    background-color: #444444;
}

[data-slide] {
    height: 100vh;
}

body * {
    color: #EEEEEE;
}

#archive-holder {
    position: absolute;
    bottom: 0;
}

.title {
    padding-top: 24px;
}

.title-only {
    text-align: right;
    font-size: 72px;
}

.content {
    margin-top: 48px;
}

html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
    font-size: 24px;
    background-color: #444444;
}

[data-slide] {
    height: 100vh;
}

body * {
    color: #EEEEEE;
}

#archive-holder {
    position: absolute;
    bottom: 0;
}

.title {
    padding-top: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #E0E0E0;
}

.title-only {
    text-align: right;
    font-size: 72px;
}

.content {
    margin-top: 48px;
}

Add a separator between slide title and content


body {
    background-color: #eee;
}

.wrap {
	position: relative;
    min-width: 950px;
}

.content {
    width: 800px;
    margin: 10px auto;
}

/***** Global Component *****/
body {
    background-color: #eee;
}

:global .input {
    padding: 0 8px;
    border-style: solid;
    border-color: #bfbfbf;
    border-width: 1px 1px 2px 1px;
    font-size: 14px;
    color: #222;

    &:focus {
        border-color: #2b99d6;
    }

    &.input--small {
        line-height: 24px;
    }

    &.input--medium {
        line-height: 32px;
    }

    &.input--large {
        font-size: 28px;
        line-height: 40px;
        padding: 0 10px;
    }

    &.input--error {
        border-color: #d93f2b;
    }
}

:global .input__msg {
    margin-top: 6px;
    color: #d93f2b;
    font-size: 14px;
}

:global .button {
    cursor: pointer;
    padding: 0 12px;
    min-width: 80px;
    font-size: 14px;
    color: #222;
    text-align: center;
    background-color: #cfcfcf;
    border: 1px solid #cfcfcf;

    &.button--small {
        height: 24px;
    }

    &.button--medium {
        height: 32px;
    }

    &.button--large {
        height: 40px;
        min-width: 96px;
    }

    &.button--red {
        background-color: #df313b;
        border-color: #df313b;
        color: #FFF;
    }
    &.button--blue {
        background-color: #2695d2;
        border-color: #2695d2;
        color: #FFF;
    }
}

:global .close {
    cursor: pointer;
    color: #222;
    font-size: 14px;
}

.wrap {
	position: relative;
    min-width: 950px;
}

.content {
    width: 800px;
    margin: 10px auto;
}

Set global input and basic button

Set global input and basic button


@import "https://fonts.googleapis.com/icon?family=Material+Icons";
@import "https://code.getmdl.io/1.2.0/material.blue_grey-blue.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css";
@import "alert.css";

@import "https://fonts.googleapis.com/icon?family=Material+Icons";
@import "https://code.getmdl.io/1.3.0/material.blue_grey-blue.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
@import "alert.css";

Upgrade external CSS libraries (mdl, font-awesome).