/* Reset */
body, h1, h2, h3, h4, li, ol, p, pre, section, ul {
  margin: 0;
  padding: 0;
}

body {
  font-family: Georgia, serif;
  background: #e8e8e8;
  color: #333;
  background-image: url('body-bg.png');
  background-repeat: repeat;
}

h2 {
  font: 400 28px/44px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
      sans-serif;
  margin: 0 0 22px 0;
}

h3 {
  font: 600 14px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
      sans-serif;
  color: #999;
  margin: 22px 0 0 0;
}

h4 {
  font: 600 16px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
      sans-serif;
}

p {
  font-size: 16px;
  line-height: 22px;
  margin: 22px 0;
}

h3 + p {
  /* Text immediately following a subheader should be snug with it. */
  margin-top: 0;
}

strong {
  font-weight: 700;
}

pre, code {
  font: 14px/22px Menlo, Monaco, Consolas, Courier, monospace;
  color: hsl(220, 20%, 30%);
  background: hsl(220, 20%, 95%);
  margin: 22px 0;
  padding: 0 4px;
  border-radius: 4px;
  overflow-x:auto;
  overflow-y:hidden;
}

a {
  color: #15c;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: #15c;
}

li {
  font-size: 16px;
  line-height: 22px;
}

ol, ul {
  padding-left: 22px;
}

hr {
  border: none;
  height: 1px;
  background: #ccc;
  margin: 22px 0 21px 0;
}

hr + h2 {
  margin-top: 21px; /* To compensate for the thickness of the hr. */
}

.page {
  max-width: 1000px;
  background: #fff;
  margin: 0 auto 22px auto;
  border: solid 1px #ccc;
  border-top: none;
  box-shadow: 0 0 50px #888;

  background-image: url('content-bg.png');
  background-repeat: repeat-y;
}

.header {
  background: #333;
  background-image: url('header-bg.png');
  height: 44px;
  color: hsl(0, 0%, 50%);
  font: 400 15px/44px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
      sans-serif;
}

.header .logo {
  background-image: url('dart-logo-small.png');
  width: 66px;
  height: 44px;
  float: left;
}

.header a {
  color: hsl(0, 0%, 80%);
}

.header a:hover {
  color: hsl(0, 0%, 100%);
}

.header #search-box {
  display: inline;
  float: right;
  margin-right: 22px;
}

.nav {
  float: left;
  width: 263px; /* 12 x 22px - 1 for border */
  padding: 0 22px;
  overflow: hidden;
  background: #f4f4f4;
  border-right: solid 1px #ccc;
}

.nav h2 {
  font: 400 16px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
      sans-serif;
  margin: 0 -21px;
  padding: 11px 22px;

  /* Using http://www.colorzilla.com/gradient-editor/ */
  background: -moz-linear-gradient(top, hsla(0,0%,0%,0.05) 0%, hsla(0,0%,0%,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0,0%,0%,0.05)), color-stop(100%,hsla(0,0%,0%,0)));
  background: -webkit-linear-gradient(top, hsla(0,0%,0%,0.05) 0%,hsla(0,0%,0%,0) 100%);
  background: -o-linear-gradient(top, hsla(0,0%,0%,0.05) 0%,hsla(0,0%,0%,0) 100%);
  background: -ms-linear-gradient(top, hsla(0,0%,0%,0.05) 0%,hsla(0,0%,0%,0) 100%);
  background: linear-gradient(top, hsla(0,0%,0%,0.05) 0%,hsla(0,0%,0%,0) 100%);
}

ul.icon {
  margin: 0 0 22px 0;
  padding: 0;
}

ul.icon li {
  font: 600 13px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
      sans-serif;
  list-style-type: none;
  white-space: nowrap;
}

/* Indent nested lists. */
ul.icon ul {
  margin-left: 22px;
}

.icon-class,
.icon-exception,
.icon-interface {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 5px 10px 0 2px;
  vertical-align: top;
}

.icon-class     { background: url('class.png');     }
.icon-exception { background: url('exception.png'); }
.icon-interface { background: url('interface.png'); }

.icon-library {
  background: url('library.png');
  width: 16px;
  height: 14px;
  display: inline-block;
  margin: 4px 8px 0 0;
  vertical-align: top;
}

.type-box {
  display: inline-block;
  font: 600 13px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
      sans-serif;
  background: #f4f4f4;
  padding: 0 6px 0 3px;
  border-radius: 4px;
}

.type-box .icon-class,
.type-box .icon-exception,
.type-box .icon-interface {
  /* Make a little snugger with the text. */
  margin-right: 5px;
}

.content {
  margin-left: 308px; /* 14 x 22 */
  padding: 22px 22px;
}

.clear {
  clear: both;
}

.footer {
  max-width: 956px; /* 1000 - 22 - 22 */
  text-align: center;
  margin: 22px auto;
  color: #888;
}

.footer p {
  font: 400 13px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
      sans-serif;
}

.method .doc,
.field .doc {
  padding-left: 44px;
  /* Ensure there is some space between members with no documentation. */
  min-height: 22px;
}

.param {
  font: 600 14px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
      sans-serif;
}

.crossref {
  font: 600 15px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
      sans-serif;
}

.doc h1 {
  font: 700 17px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
      sans-serif;
  color: #666;
}

.doc h2 {
  font: 600 16px/22px 'Open Sans', 'Lucida Sans Unicode',
      'Lucida Grande', sans-serif;
  color: #666;
}

/* Style external links in docs differently. */
.doc a[href^="http:"]:after,
.doc a[href^="https:"]:after {
  content: url('external-link.png');
}

/* Highlight members on hover so you can see which docs are for which member. */
.method:hover,
.field:hover {
  margin: 0 -22px;
  border: solid 4px hsl(40, 100%, 85%);
  padding: 0 18px;
  border-top: none;
  border-bottom: none;
}

/* Only show the "code" link for the highlighted member. */
.show-code {
  float: right;
  font: 600 11px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
      sans-serif;
  padding-left: 6px; /* In case it gets too close to the member. */
}

.method:hover .show-code,
.field:hover .show-code {
  display: inline;
}

/* Only show permalinks when hovered over. */
.anchor-link {
  display: none;
}

h2:hover > .anchor-link,
h4:hover > .anchor-link {
  display: inline;
}

/* Only show code when expanded. */
pre.source {
  display: none;
}

pre.source.expanded {
  display: block;
}

/* Links that don't cause a page refresh. */
.anchor-link, .anchor-link:visited,
.show-code, .show-code:visited {
  color: hsl(40, 100%, 40%);
  display: none;
  cursor: pointer;
}

.anchor-link:hover,
.show-code:hover {
  color: hsl(40, 100%, 60%);
}

/* Syntax highlighting. */
/* Note: these correspond to the constants in classify.dart. */
pre.source .e { color: hsl(  0, 100%, 70%); } /* Error */
pre.source .c { color: hsl(220,  20%, 65%); } /* Comment */
pre.source .i { color: hsl(220,  20%, 20%); } /* Identifier */
pre.source .k { color: hsl(220, 100%, 50%); } /* Keyword */
pre.source .p { color: hsl(220,  20%, 50%); } /* Punctuation */
pre.source .o { color: hsl(220,  40%, 50%); } /* Operator */
pre.source .s { color: hsl( 40,  90%, 40%); } /* String */
pre.source .n { color: hsl( 30,  70%, 50%); } /* Number */
pre.source .t { color: hsl(180,  40%, 40%); } /* Type Name */
pre.source .r { color: hsl(200, 100%, 50%); } /* Special Identifier */
pre.source .a { color: hsl(220, 100%, 45%); } /* Arrow */

/* Interpolated expressions within strings. */
pre.source .si {
  background: hsl(40, 100%, 90%);
}

pre.source .s.si { background: hsl(40, 80%, 95%); }
pre.source .i.si { color: hsl(40, 30%, 30%); }
pre.source .p.si { color: hsl(40, 60%, 40%); }

/* Enable these to debug the grid: */

/*
body {
  background: -webkit-linear-gradient(top, #eee 0, #fff 10%, #fff 90%, #eee 100%);
  background-size: 22px 22px;
  background-repeat: repeat;
}

.page {
  background: none;
}

h1 {
  border-left: solid 4px green;
}

h2 {
  border-left: solid 4px blue;
}

h3 {
  border-left: solid 4px red;
}

h4 {
  border-left: solid 4px orange;
}

p {
  border-left: solid 4px purple;
}

section {
  border-left: solid 4px gray;
}
*/