@import url(http://fonts.googleapis.com/css?family=Inconsolata|Kreon:300,400,700|PT+Sans:400,700,400italic);

/* ------------------------------------------------------------------------------------ *\

   #     #
   #     # ######   ##   #####  ###### #####
   #     # #       #  #  #    # #      #    #
   ####### #####  #    # #    # #####  #    #
   #     # #      ###### #    # #      #####
   #     # #      #    # #    # #      #   #
   #     # ###### #    # #####  ###### #    #

\* ------------------------------------------------------------------------------------ */

#header {
  background:white;
  color:black;
  font-family:Kreon,'Times New Roman',times,serif;
  height:100px;
  position:relative;
  padding:0px;
}
#header h1 {
  margin:0px;
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  font-size:25pt;
  font-weight:700;
}
#header h1 em {
  font-size:22pt;
  font-weight:300;
  letter-spacing:-1px;
  font-style:normal;
}

@media (min-width: 768px) {
  #header h1 { font-size:30pt; }
  #header h1 em { font-size:28pt; }
}

nav.navbar {
  border-radius:0px;
  border-bottom:5px solid black;
  min-height:40px;
  background:black;
  overflow:hidden;
  padding:0px;
  z-index:100;
}
nav.affix {
  top: 0;
  width: 100%;
}
nav.affix-top {
  top: 0;
  width: 100%;
  margin-bottom:-50px;
}
nav button {
  background:black !important;
}
nav button .icon-bar {
  background:white !important;
}
nav .navbar-collapse {
  padding:0px;
}
nav li a {
  background:transparent !important;
  color:white !important;
  font:700 15pt Kreon,'Times New Roman',times,serif;
  margin:0px 0px 0px 30px;
  height:45px;
  padding:12px 0px 0px 0px !important;
}
nav li {
  background:black;
  padding:0px 20px 0px 20px;
  margin:0px 12px 0px 0px;
  height:45px;
}

.navbar-collapse {
  overflow:hidden;
}

@media (min-width: 768px) {
  nav.navbar {
    background:white;
  }
  nav li a {
    margin:0px;
  }
}

nav .ia-ui-menu li {
  opacity:0;
}

nav.affix .ia-ui-menu li {
  opacity:1;
}
.ia-ui-menu li {
  transition:all 0.5s;
  cursor:pointer;
}
@media (max-width: 768px) {
  nav .ia-ui-menu li { display:none; }
}

.below-nav {
  margin-top:50px;
}

/* ------------------------------------------------------------------------------------ *\

   #######
   #     # #    # ##### #      # #    # ######
   #     # #    #   #   #      # ##   # #
   #     # #    #   #   #      # # #  # #####
   #     # #    #   #   #      # #  # # #
   #     # #    #   #   #      # #   ## #
   #######  ####    #   ###### # #    # ######

\* ------------------------------------------------------------------------------------ */

.outline {
  font: 13pt 'PT Sans',verdana,sans-serif;
  background:black;
  color:white;
  padding:35px 0px 35px 0px;
}
.outline a {
  color:#87CDFF;
}
.outline h2 {
  font: 20pt Kreon,'Times New Roman',times,serif;
  margin-top:0px;
}
.outline p, .outline li {
  margin:0px 0px 12px 0px;
}
.outline h2 a, .outline h2 a:hover {
  color:white;
  text-decoration:none;
}

.outline .ia-ui-boxes {
  margin:0px 10px 0px 10px;
}
.outline .ia-ui-boxes .col-md-6 {
  padding:7px;
}
.outline .ia-ui-box {
  transition:all 0.5s;
  cursor:pointer;
}
.outline div.ia-ui-box {
  min-height:40px;
  padding:0px;
  margin:0px;
  width:100%;
  position:relative;
}
.outline div.ia-ui-box p {
  position:absolute;
  top:50%;
  margin:0px 20px 0px 20px;
  transform: translateY(-50%);
}
.outline div.ia-ui-box p i {
  margin-right:15px;
}
.outline div.ia-ui-box p strong {
  margin-right:5px;
}
@media (min-width: 768px) {
  .outline div.ia-ui-box p i {
    float:right;
    font-size:120%;
    margin:10px 0px 5px 10px;
  }
}
@media (min-width: 768px) {
  .outline div.ia-ui-box { min-height:80px; }
}
@media (min-width: 992px) {
  .outline div.ia-ui-box { min-height:130px; }
}
@media (min-width: 1200px) {
  .outline div.ia-ui-box { min-height:100px; }
}

/* ------------------------------------------------------------------------------------ *\

   #######
   #        ####   ####  ##### ###### #####
   #       #    # #    #   #   #      #    #
   #####   #    # #    #   #   #####  #    #
   #       #    # #    #   #   #      #####
   #       #    # #    #   #   #      #   #
   #        ####   ####    #   ###### #    #

\* ------------------------------------------------------------------------------------ */

.footer p {
  font-size:11pt;
  margin-top:0px;
  margin-bottom:7px;
}
.footer h3 {
  font-size:15pt;
  margin-top:0px;
}
.footer li {
 font-size:11pt;
 margin-top:0px;
 margin-bottom:2px;
}

.footer .no-bullets li i {
 float:left;
 margin-left:-24px;
 margin-top:5px;
 font-size:11pt;
}

#feedback-alert {
  background:#8C5E33;
  text-align:center;
  width:100%;
  position:fixed;
  bottom:-100px;
  left:0px;
  font: 12pt 'PT Sans',verdana,sans-serif;
  padding:10px;
  transition:bottom 1s;
}
#feedback-alert span {
  float:right;
  margin-right:50px;
}
#feedback-alert a {
  text-decoration:underline;
  color:white;
}

/* ------------------------------------------------------------------------------------ *\

  #####
 #     # #####   ##   #    # #####    ##   #####  #####     #####   ####  #####  #   #
 #         #    #  #  ##   # #    #  #  #  #    # #    #    #    # #    # #    #  # #
  #####    #   #    # # #  # #    # #    # #    # #    #    #####  #    # #    #   #
       #   #   ###### #  # # #    # ###### #####  #    #    #    # #    # #    #   #
 #     #   #   #    # #   ## #    # #    # #   #  #    #    #    # #    # #    #   #
  #####    #   #    # #    # #####  #    # #    # #####     #####   ####  #####    #

\* ------------------------------------------------------------------------------------ */

.new-section {
  margin-top:30px;
}

.new-big-section {
  margin-top:60px;
}

.body {
  padding-top:50px;
}

.body h2 {
  font: 21pt Kreon,'Times New Roman',times,serif;
}

.body .flspan {
  display:none;
}

@media (min-width: 992px) {
  .body .lside h2 {
    float:left;
    margin:0px 0px 0px -240px;
    width:220px;
  }
  .body .rside h2 {
    float:right;
    margin:0px -240px 0px 0px;
    width:220px;
    text-align:right;
  }
  .body .flspan {
    display:block;
    float:left;
    margin-left:-240px;
    width:220px;
    font-style:italic;
    font-size:14pt;
  }
  .body .flspan-alt {
    display:none;
  }
}

.body h3 {
  font: 16pt Kreon,'Times New Roman',times,serif;
}
.body p {
  margin:0px 0px 10px 0px;
  font: 13pt 'PT Sans',verdana,sans-serif;
}
.body li {
  margin:0px 0px 4px 0px;
  font: 13pt 'PT Sans',verdana,sans-serif;
}
.body td {
  font: 13pt 'PT Sans',verdana,sans-serif;
}

.no-bullets li {
  list-style-type:none;
}
.no-bullets li i {
  float:left;
  margin-left:-35px;
  margin-top:10px;
  font-size:16pt;
}

/* Black callouts */
.body .callout {
  background:black;
  color:white;
  padding:20px;
  margin:20px;
}
.body .callout code, .outline code {
  background-color:transparent;
  color:#FA89AD;
}
.body .callout .form-control, .coeffect-playground .form-control {
  color:#f0f0f0;
  background:#282828;
  border-color:#606060;
}

/* Interactive document styling */
.body .ia-ui-bar-left {
  border-left:10px solid white;
  padding-left:15px;
  margin-left:-25px;
  cursor:pointer;
}
.body .ia-ui-bar-right {
  border-right:10px solid white;
  padding-right:15px;
  margin-right:-25px;
  cursor:pointer;
}
.body .ia-ui-circle {
  width:30px;
  text-align:left;
  padding:5px 5px 5px 7px;
  border-radius:15px;
  height:30px;
  display:inline-block;
  color:white;
  font-size:12pt;
  cursor:pointer;
  float:right;
  margin:0px 10px 0px 0px;
}
@media (min-width: 992px) {
  .body .ia-ui-circle {
    float:none;
    margin:15px 0px 0px 0px;
  }
}

/* Elements for running coeffect code snippets */
.pre-play, .pre-edit {
  position:relative;
}
.pre-play a, .pre-edit a {
  cursor:pointer;
  position:absolute;
  right:25px;
  top:8px;
  font:10pt 'PT Sans',verdana,sans-serif;
  color:#909090;
  text-decoration:none;
}
.pre-edit a {
  top:18px;
  right:38px
}
.pre-play a i, .pre-edit a i {
  margin-right:2px;
}
.pre-play a:hover, .pre-edit a:hover {
  color:#505050;
  text-decoration:none;
}
h2 a, h2 a:hover {
  color:black;
  text-decoration:none;
}

/* ------------------------------------------------------------------------------------ *\

   ######
   #     # #        ##   #   #  ####  #####   ####  #    # #    # #####
   #     # #       #  #   # #  #    # #    # #    # #    # ##   # #    #
   ######  #      #    #   #   #      #    # #    # #    # # #  # #    #
   #       #      ######   #   #  ### #####  #    # #    # #  # # #    #
   #       #      #    #   #   #    # #   #  #    # #    # #   ## #    #
   #       ###### #    #   #    ####  #    #  ####   ####  #    # #####

\* ------------------------------------------------------------------------------------ */

.btn {
  background:black;
  color:white;
}

.btn:focus, .btn.hover, .btn:hover {
  background:#404040 !important;
  color:white !important;
}

.coeffect-playground button i {
  margin-right:10px;
}
.coeffect-playground table td:last-child {
  width:100%;
}
.coeffect-playground table {
  margin:5px 4% 5px 4%;
  width:92%;
}
.coeffect-playground table td {
  padding-bottom:3px;
}
.coeffect-playground td.label {
  text-align:right;
  display:block;
  padding-top:8px;
}
.coeffect-playground button {
  text-align:center;
  float:right;
  border-color:#808080;
  background:#282828;
  min-width:150px;
  margin:0px 4% 10px 0px;
}
.coeffect-playground button:focus, .coeffect-playground button.hover, .coeffect-playground button:hover {
  background:#404040 !important; color:white !important;
  border-color:#808080;
}

.coeffect-playground textarea.form-control {
  font-size:12pt;
  font-family:Inconsolata;
  height:120px;
  margin:15px 4% 5px 4%;
  width:92%;
}

/* Playground with live chart */
.coeffect-playground .live-chart {
  margin:0px 4% 0px 4%;
  width:92%;
}
.canvas-wrapper {
  border:1px solid #606060;
  border-radius:5px;
  margin-top:10px;
  padding:2px;
}
.drawing-space {
  border:1px solid #606060;
  border-radius:5px;
  height:200px;
  background:#282828;
  position:relative;
}
.drawing-space span {
  color:#383838;
  font-size:12pt;
  position:absolute;
  right:10px;
  bottom:10px;
  text-align:right;
  font-weight:bold;
}
.drawing-space span i {
  float:left;
  font-size:26pt;
  margin-right:10px;
  margin-top:5px;
}

/* ------------------------------------------------------------------------------------ *\

    #####
   #     # #####  ######  ####  #   ##   #
   #       #    # #      #    # #  #  #  #
    #####  #    # #####  #      # #    # #
         # #####  #      #      # ###### #
   #     # #      #      #    # # #    # #
    #####  #      ######  ####  # #    # ######

\* ------------------------------------------------------------------------------------ */

/* Box with information about how playgrounds work on homepage */
#playground-callout i {
  float:left;
  font-size:200%;
  margin:-2px 10px 5px -35px;
}

@media (min-width: 768px) {
  #playground-callout i { margin-top:10px; }
}

.grid .cur {
  background:#996C46;
}
.grid .nb {
  background:#6B5232;
}
.grid td, .grid tr
{
  background:#282828;
  border:solid 1px #606060;
  padding:10px;
}
.grid td
{
  width:50px;
  text-align:center !important;
}

/* ------------------------------------------------------------------------------------ *\

    ###
     #  #    # ##### ###### #####    ##    ####  ##### # #    # ######
     #  ##   #   #   #      #    #  #  #  #    #   #   # #    # #
     #  # #  #   #   #####  #    # #    # #        #   # #    # #####
     #  #  # #   #   #      #####  ###### #        #   # #    # #
     #  #   ##   #   #      #   #  #    # #    #   #   #  #  #  #
    ### #    #   #   ###### #    # #    #  ####    #   #   ##   ######

\* ------------------------------------------------------------------------------------ */

.ia {
  overflow:hidden;
  transition:all 0.7s;
}
.ia-choice {
  cursor:pointer;
}
.ia-expand {
  float:right;
  margin-right:-50px;
  font-size:16pt;
}

.ia-slides {
  font-size:16pt;
  background:black;
  margin:20px;
  color:white;
  padding:20px 0px 20px 0px;
  position:relative;
}
.ia-slides .slide {
  display:none;
}
.ia-slides .slide p {
  font: 13pt 'PT Sans',verdana,sans-serif;
}

.ia-slides .larrow {
  width:0;
  height:0;
  position:absolute;
  top:40%;
  left:20px;
  border-style:solid;
  border-width:15px 20px 15px 0px;
  border-color:transparent #808080 transparent transparent;
  cursor:pointer;
}
.ia-slides .rarrow {
  width:0;
  height:0;
  position:absolute;
  top:40%;
  right:20px;
  border-style:solid;
  border-width:15px 0px 15px 20px;
  border-color:transparent transparent transparent #808080;
  cursor:pointer;
}
.ia-slides .larrow-disabled {
  border-color:transparent #404040 transparent transparent;
  cursor:default;
}
.ia-slides .rarrow-disabled {
  border-color:transparent transparent transparent #404040;
  cursor:default;
}
.ia-slides .slide {
  margin:0px 60px 0px 60px;
}

/* ------------------------------------------------------------------------------------ *\

     #####
    #     #  ####  #####  ######     ####  #    # # #####  #####  ###### #####  ####
    #       #    # #    # #         #      ##   # # #    # #    # #        #   #
    #       #    # #    # #####      ####  # #  # # #    # #    # #####    #    ####
    #       #    # #    # #              # #  # # # #####  #####  #        #        #
    #     # #    # #    # #         #    # #   ## # #      #      #        #   #    #
     #####   ####  #####  ######     ####  #    # # #      #      ######   #    ####

\* ------------------------------------------------------------------------------------ */

/* identifier */
span.i { color:#000000; }
/* string */
span.s { color:#a31515; }
/* keywords */
span.k { color:#0000ff; }
/* comment */
span.c { color:#008000; }
/* operators */
span.o, span.op { color:#800080; }
/* numbers */
span.n { color:#000000; }
/* line number */
span.l { color:#96c2cd; }
/* type or module */
span.t { color:#2b91af; }
/* function */
span.f { color:#0000a0; }
/* DU case or active pattern */
span.p { color:#800080; }
/* mutable var or ref cell */
span.v { color:#000000; font-weight: bold; }
/* printf formatters */
span.pf { color:#2b91af; }
/* escaped chars */
span.e { color:#ff0080; }

/* inactive code */
span.inactive { color:#808080; }
/* preprocessor */
span.prep { color:#800080; }
/* fsi output */
span.fsi { color:#808080; }

/* omitted */
span.omitted {
	background:#3c4e52;
  border-radius:5px;
	color:#808080;
	padding:0px 0px 1px 0px;
}
/* tool tip */
div.tip {
	background:#e5e5e5;
  border-radius:4px;
  font:10pt 'Open Sans', arial, sans-serif;
	padding:6px 8px 6px 8px;
	display:none;
  color:#000000;
}
table.pre {
  width:100%;
}
textarea.prelike, pre {
  line-height:13pt;
  border:1px solid #d8d8d8;
  border-collapse:separate;
  font:12pt 'Inconsolata',consolas,monospace;
  margin:10px 20px 20px 20px;
  background-color:#f4f4f4;
  padding:10px;
  border-radius:5px;
  color:#000000;
}
textarea.prelike {
  width:100%;
  display:block;
  background-color:#fafafa;
}
div.prelike {
  margin-right:40px;
}
pre.fssnip code {
  font:12pt 'Inconsolata',consolas,monospace;
}
pre, code {
  font:13pt 'Inconsolata',consolas,monospace;
}

.callout pre, .outline pre {
  color:#f0f0f0;
  background:#181818;
  border-color:#606060;
}
.callout pre span.k, .outline pre span.k { color:#7FA5FF; }
.callout pre span.i, .outline pre span.i { color:#F0F0F0; }
.callout pre span.n, .outline pre span.n { color:#4ECE58; }
.callout pre span.op, .outline pre span.op { color:#BEBADA; }