easejs/style.css

/**
 * ease.js color scheme
 *
 * Inspired by Tango Icon Theme
 */

@font-face {
  font-family: Open Sans;
  src: url('fonts/OpenSans-Regular.woff');
}

html, body {
  background-color:  #eeeeec;
  background-image:  url( 'images/rough_diagonal.png' );
  background-repeat: both;

  margin:  0px 0px 1.5em 0px;
  padding: 0;

  font-family: Open Sans, arial, serif;
  font-size:   16px;
  line-height: 1.25em;

  /* for use with manual pages */
  border: none !important;
}

pre {
  line-height: 1.25em;
}

a, a:active, a:link {
  color: #204a87;
  text-decoration: none;
}
a:visited {
  color: #488acf;
}
a:hover {
  text-decoration: underline;
}

#header {
  position: relative;

  background-color:  #2e3436;
  background-image:  url( 'images/dvsup.png' );
  background-repeat: both;
  color:             #babdb6;
}

#header-content {
  background-image:    url('images/logo.png');
  background-repeat:   no-repeat;
  background-position: 0px 50px;

  margin: 0px auto;
  height: 150px;
  width:  800px;
}

#header h1 {
  display: none;
  margin:  0.25em 0px 0px 0px;

  font-size: 4.5em;
  color:     #619ddb;
}

#header h1 .suffix {
  position: relative;
  top:      0.15em;

  font-size: 0.8em;
  color:     #ce5c00;
}

#header h2.desc {
  display: none;

  position: relative;
  top: -1.50em;
  left: 0.30em;

  font-size:   0.6em;
  font-weight: normal;

  padding: 0px;
  margin:  0px;
}

#content {
  position: relative;

  background-color: rgba( 255, 255, 255, 0.5 );

  border:              2px solid #babdb6;
  border-top:          0px;
  border-bottom-width: 4px;
  border-radius:       0px 0px 0.5em 0.5em;
  -moz-border-radius:  0px 0px 0.5em 0.5em;

  margin:  0px auto;
  padding: 0.5em 1em 1em 1em;

  width: 800px;

  font-size: 0.9em;
}

#menu {
  background-color: #3465a4;

  border-width: 2px 0px 4px 0px;
  border-color: #204a87;
  border-style: solid;
}

#menu ul {
  padding: 0px;
  height:  3.5em;

  margin: 0px auto;
  width:  800px;
}

#menu ul li {
  list-style: none;
  padding:    0px;

  float:       left;
  line-height: 3em;
}

#menu a, #menu a:link {
  display: inline-block;
  padding: 0.25em 1.25em;

  color:           #101010;
  text-decoration: none;
  font-weight:     bold;
}

#menu a:hover,
body.index #about a,
body.news #news a,
body.download #download a,
body.manual #manual a,
body.bugs #bugs a,
body.source #source a {
  background-color: #204a87;
}

body.index #about a,
body.news #news a,
body.download #download a,
body.manual #manual a,
body.bugs #bugs a,
body.source #source a {
  color: #f57900;
}

.footer p {
  margin: 0;
  padding: 0.1em;

  color: #2e3436;

  font-size:  0.7em;
  text-align: center;

  line-height: 1.1em;
}

.footer p.copyright {
  margin-top: 1em;
}

.footer p a, .footer p a:link {
  color: #2e3436;
}

.btn, a.btn {
  display: inline-block;

  background-color: #f57900;
  color:           white;
  font-weight:     bold;
  cursor:          pointer;
  text-align:      center;
  text-shadow:     black 0px 0px 1px;

  padding: 0.5em;

  border:            1px solid #ce5c00;
  border-radius:      0.25em;
  -moz-border-radius: 0.25em;

  background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0, rgb(245,123,0)),
      color-stop(1, rgb(206,93,0))
  );
  background-image: -moz-linear-gradient(
      center bottom,
      rgb(245,123,0) 0%,
      rgb(206,93,0) 100%
  );

  box-shadow: 0.05em 0.1em #ce5c00;
}
a.btn:hover {
  text-decoration: none;
}
a.btn:active {
  position: relative;
  box-shadow: none;

  /* to replace shadow; appear depressed */
  left: 0.05em;
  top:  0.1em;
}

.btn.go {
  border: 1px solid #4e9a06;

  background-color: rgb(116,210,22);
  background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0, rgb(116,210,22)),
      color-stop(1, rgb(139,226,52))
  );
  background-image: -moz-linear-gradient(
      center bottom,
      rgb(116,210,22) 0%,
      rgb(139,226,52) 100%
  );

  box-shadow: 0.05em 0.1em #4e9a06;
}

.btn.med {
  font-size: 1.5em;
}

.btn.large {
  font-size: 2em;
}

#try-console {
  width:  99%;
  height: 10em;

  font-size:   0.8em;
  font-family: monospace;
}

blockquote.git-clone,
blockquote.shell
{
  font-family: monospace;
  font-weight: lighter;
}

span.shell-start {
  font-weight: normal;
}

#content .head {
  display: block;
  width: 100%;
  padding: 1em;
  margin:  -0.5em -1em 1em -1em;

  border-bottom: 1px solid #babdb6;
}
#content .head.good {
  background-color: rgb(116,210,22);
  background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0, rgb(116,210,22)),
      color-stop(1, rgb(139,226,52))
  );
  background-image: -moz-linear-gradient(
      center bottom,
      rgb(116,210,22) 0%,
      rgb(139,226,52) 100%
  );

  border-bottom-color: #4e9a06;
}

.headline {
  position: relative;

  background-image:  url( 'images/dvsup.png' );
  padding: 1em 2em;
  margin: -0.5em -2em 0em -2em;

  border-width: 0px 2px 2px 2px;
  border-color: #2e3436;
  border-style: solid;

  border-radius: 0em 0em 1em 1em;
  color:       #d3d7cf;

  font-variant: small-caps;
}
.headline ul a:not(.subtle) {
  color: #488acf;
}

.headline h3 {
  display: inline-block;
  width:   400px;

  text-align: center;
  font-size:  2em;
  font-weight: normal;
  line-height: 1.5em;
  color:       #f57900;
  text-shadow: #f57900 1px 0px;  /* very slight bold effect */

  margin: 0.5em 0em;
}

.headline .info,
.headline .info3 {
  position: absolute;

  width: 300px;
  top: 1.5em;
  right: 1em;

  margin-right: 2em;
}
.headline .info3 {
  /* 3-line title */
  top: 2.5em;
}



/** index **/
.btn.download {
  float: right;
  margin-top: 0.65em;
  margin-right: 1em;

  text-shadow: #4e9a06 1px 1px,
               #4e9a06 -1px -1px;
}

.btn.download .note {
  position: relative;
  top: 0.55em;

  font-size:  0.45em;
  font-style: italic;
}

.btn.download .inner:before {
  position: relative;
  top:      0.25em;

  font-size:       1.25em;
  padding-right:   0.25em;
  text-decoration: underline;

  content: '⇩';
}


.info {
  clear: both;
}

a.man:before {
  /* →  */
  content: '\2192\00a0';
}


/** download **/
span.release-current {
  font-size:   1.2em;
  line-height: 1.2em;
  font-weight: bold;
}

span.release-current .version {
  font-weight: normal;
}
span.release-current .date {
  font-size: 0.9em;
  float: right;
}

ul.dlopts {
  font-size: 1.1em;
}


/** news **/
h3.git-commit {
  margin-bottom: 0.1em;
  padding-bottom: 0.1em;
}

div.git-commit-author,
div.git-commit-date {
  color: #2e3436;
  font-size: 0.9em;
}

div.git-commit-date {
  font-size: 0.8em;
}

div.git-commit-body pre {
  font-size: 0.8em;
}


.bigemph {
  font-size: 1.7em;
}

h3 > .anchor {
  display: none;
}
h3 > .anchor > a {
  text-decoration: none;
  color: inherit;

  float: right;
}
h3:hover > .anchor {
  display: inline;
}

h3.bigemph {
  border-bottom:  2px solid rgba( 226, 226, 223, 0.75 );
  padding-bottom: 0.2em;
}

pre.js, div.float {
  background-image:  url( 'images/cross_scratches.png' );
  background-repeat: both;

  border: 1px solid #babdb6;
  border-radius: 0.25em;

  font-size: 0.9em;
  padding:   1em;
}


/** Free JS */
#menu ul #whyfreejs {
  position: absolute;

  text-align:   right;
  line-height:  1.25em;
  font-variant: small-caps;

  right:  0em;
  width:  8em;
  margin: -3.25em 0em 0em 0em;
}

#menu ul #whyfreejs a {
  margin: 0em;
  padding: 0em 0.5em;
  color: #f57900;
}

#menu ul #whyfreejs a:hover {
  background-color: inherit;
}

body.whyfreejs #menu ul #whyfreejs {
  visibility: hidden;
}

body.whyfreejs #content {
  text-align: justify;
}

body.whyfreejs #content h3 {
  /* original body font */
  font-family: arial, serif;
}

body.whyfreejs .essay {
  position: relative;

  background-image: url('//www.gnu.org/graphics/another-gnu-type-sm.png');
  background-position: bottom right;
  background-repeat: no-repeat;
  background-color: white;

  border: 1px solid #888a85;
  border-width: 0.25em 1px;
  border-radius: 0.5em;

  margin: 0em 5em;
  padding: 1em;
}

body.whyfreejs .essay p:first-child {
  margin-top: 0em;
}

body.whyfreejs .essay .firsts {
  font-variant: small-caps;
  font-size: 1.1em;
}

body.whyfreejs .essay .sign {
  font-variant: small-caps;
  text-align: right;
  font-size: 0.9em;

  margin-top: -1em;
}

a.subtle,
body.whyfreejs .essay .sign a {
  color: inherit;
}

body.whyfreejs .essay dl dt.imp {
  font-weight: bold;
}
body.whyfreejs .essay dl dt.imp+dd {
  margin-bottom: 1em;
}

body.whyfreejs .essay dl dd {
  margin-left: 1.5em;
}

body.whyfreejs p.imgattr {
  display: inline-block;
  position: absolute;

  margin: -1em 0px;
  padding: 0px;
  font-size: 0.7em;

  /* these "vendor"-specific prefixes can one day be removed; indeed, modern
   * versions of FF do not need the -moz- prefix; it's included for slightly
   * out-of-date browsers */
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);

  width: 30em;
  right: -14.5em;
  bottom: 16em;
}

body.whyfreejs p.imgattr a {
  color: #888a85;
}

blockquote.quote {
  font-style:  italic;
}


/* from manual (overrides some of the styles above) */
div.float {
  padding: 0;
}
div.float pre.verbatim,
div.float table {
  background-color: transparent; /* for those who don't support rgba */
}

a.top {
  float: right;
}

div.node {
  background-color: rgba( 220, 220, 220, 0.15 );
  border-bottom: 1px solid #babdb6;

  margin:  -0.5em -1em 1em -1em; /* negate #content padding */
  padding: 1em;
}
div.node p {
  margin:  0;
  padding: 0;
}
div.node hr {
  display: none;
}


/*
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
Modified slightly from its original by Mike Gerwitz
*/

pre .comment,
pre .template_comment,
pre .diff .header,
pre .javadoc {
  color: #998;
  font-style: italic
}

pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .lisp .title,
pre .subst {
  color: #000;
  font-weight: bold
}

pre .number,
pre .hexcolor {
  color: #40a070
}

pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula {
  color: #d14
}

pre .title,
pre .id {
  color: #900;
  font-weight: bold
}

pre .javascript .title,
pre .lisp .title,
pre .subst {
  font-weight: normal
}

pre .class .title,
pre .haskell .label,
pre .tex .command {
  color: #458;
  font-weight: bold
}

pre .tag,
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword {
  color: #000080;
  font-weight: normal
}

pre .attribute,
pre .variable,
pre .instancevar,
pre .lisp .body {
  color: #008080
}

pre .regexp {
  color: #009926
}

pre .class {
  color: #458;
  font-weight: bold
}

pre .symbol,
pre .ruby .symbol .string,
pre .ruby .symbol .keyword,
pre .ruby .symbol .keymethods,
pre .lisp .keyword,
pre .tex .special,
pre .input_number {
  color: #990073
}

pre .builtin,
pre .built_in,
pre .lisp .title {
  color: #0086b3
}

pre .preprocessor,
pre .pi,
pre .doctype,
pre .shebang,
pre .cdata {
  color: #999;
  font-weight: bold
}

pre .deletion {
  background: #fdd
}

pre .addition {
  background: #dfd
}

pre .diff .change {
  background: #0086b3
}

pre .chunk {
  color: #aaa
}

pre .tex .formula {
  opacity: 0.5;
}


/* GNU/Linux page fold */
#gnuinside {
  position: absolute;
  display:  block;

  top:    0px;
  right:  0px;
  width:  50px;
  height: 50px;
}




/*
Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
*/

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #F0F0F0;
}


/* Base color: saturation 0; */

.hljs,
.hljs-subst {
  color: #444;
}

.hljs-comment {
  color: #888888;
}

.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
  font-weight: bold;
}


/* User color: hue: 0 */

.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
  color: #880000;
}

.hljs-title,
.hljs-section {
  color: #880000;
  font-weight: bold;
}

.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #BC6060;
}


/* Language color: hue: 90; */

.hljs-literal {
  color: #78A960;
}

.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition {
  color: #397300;
}


/* Meta color: hue: 200 */

.hljs-meta {
  color: #1f7199;
}

.hljs-meta-string {
  color: #4d99bf;
}


/* Misc effects */

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}