/* Ville V. Vanninen / foolproof.me */
@font-face{
  font-family: 'WebSymbolsRegular';
  src: url('fonts/websymbols-regular-webfont.eot');
  src: url('fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/websymbols-regular-webfont.woff') format('woff'),
       url('fonts/websymbols-regular-webfont.ttf') format('truetype');
  }

* {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

a{color:#63b5d9; text-decoration:none;}
a:link{text-decoration:none;outline:none;}
a:visited{color:#63b5d9;text-decoration:none;outline:none;}
a:hover{text-decoration:underline;}

html {overflow: -moz-scrollbars-vertical;}

h1, h2, h3, h4{ 
	color:#6e6e6e;	
	font-family: Helvetica, Arial, sans-serif;
}
h1{font-size:42px; font-weight:300; line-height:42px; margin-left:0px; margin-top:3px; margin-bottom:3px;}
h2{font-size:24px; font-weight:300; line-height:30px; margin-left:0px; margin-top:3px; margin-bottom:3px;}
h3{font-size:16px; font-weight:normal; line-height:22px; margin: 4px 0 -4px;}
h4{font-size:16px; font-weight:300; line-height:22px; margin: 3px 0 19px;}
	
p{margin: 0px 0 8px;}

html {
  background:#ededed;
  color:#000;
  padding: 20px;
}

table {
  font-size: 14px;
}

body {
  background:#ededed;
  color:#000;
  font-size: 14px;
  line-height: 1.4;
  font-family: 'Lucida Grande', Helvetica, Arial;
  border-radius: 4px;
}

button, input, textarea, .button {
  line-height: inherit;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  padding: 0 3px;
}
textarea {
  padding: 0px 3px;
}
input {
  padding: 0px 4px;
  text-align: left;
  background: white;
  background: -webkit-linear-gradient(bottom, white, hsl(0, 0%, 97%));
  background: -moz-linear-gradient(bottom, white, hsl(0, 0%, 97%));
  background: linear-gradient(bottom, white, hsl(0, 0%, 97%));
  border-radius: 4px;
  box-shadow:
    inset 0px 1px 3px 0px rgba(0,0,0,.12),
    0px 1px 0px 1px rgba(255,255,255,.3),
    0px 0px 0px 1px rgba(0,0,0,.3);
  border: none; /* backgrounds don't clip too nicely with large radius borders, so using a drop shadow instead of a border here seems the better choice for now */
  text-align: left;
}
input[type=range] {
 vertical-align: baseline;
}


/* generic layout classes */
.splitview {
  display: box;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.view {
  padding: 8px;
}
/* end generic layout classes */

/* generic utility classes */
  .space { /* a spacer for toolbars */
    width: 32px;
  }
  .flexible { /* to make that spacer, or anything flex */
    box-flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .icon {
    font-size: .85em;
    -webkit-font-smoothing: antialiased;
    font-family: WebSymbolsRegular;
    text-align: center;
  }
  .disclosure {
    display: inline-block;
    color: rgba(0,0,0,.5);
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    background: url(img/disclosure-triangle.png) center center no-repeat;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 0;
    width: 11px;
    height: 11px;
    border-color: transparent;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all .17s ease;
    transition: all .17s ease;
    box-shadow: none;
    opacity: .4;
  }
  .disclosure:checked {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  .disabled {
    opacity: .5;
  }
/* end generic utility classes */


/* Input element styles */
button, .button {
  padding: 0 8px;
}
input.search {
  border-radius: 100px;
}

  /* "Round Textured" button style */
  .textured {
    color: rgba(0,0,0,.78);
    text-shadow: 0px 1px 0px rgba(255,255,255,.75);
    background: -webkit-linear-gradient(top, hsla(0, 0%, 100%, .8), hsla(0, 0%, 100%, 0));
    background: -moz-linear-gradient(top, hsla(0, 0%, 100%, .8), hsla(0, 0%, 100%, 0));
    background: linear-gradient(top, hsla(0, 0%, 100%, .8), hsla(0, 0%, 100%, 0));
    background-clip: padding-box;
    box-shadow:
      inset 0px 1px 1px 0px rgba(255,255,255,.15),
            0px 1px 0px 0px rgba(255,255,255,.3);
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .41);
    border-collapse: rgba(0, 0, 0, .4) rgba(0, 0, 0, .41) rgba(0, 0, 0, .41) rgba(0, 0, 0, .41);
    display: block;
    /* TODO: maybe use background-clip: content-box so the border won't overlap the background, so it can be that nice black overlay on top of the content behind the button, instead of on top of the button. */
  }
  .textured:active {
    color: rgba(0,0,0,.92);
    text-shadow: 0px 1px 0px rgba(255,255,255,.93);
    background: -webkit-linear-gradient(bottom, rgba(255, 255, 255,.3), rgba(255,255,255,.05) 75%, rgba(50,50,50,.1));
    background: -moz-linear-gradient(bottom, rgba(255, 255, 255,.3), rgba(255,255,255,.05) 75%, rgba(50,50,50,.1));
    background: linear-gradient(bottom, rgba(255, 255, 255,.3), rgba(255,255,255,.05) 75%, rgba(50,50,50,.1));
    background-clip: padding-box;
    box-shadow:
      inset 0px 2px 2px 0px rgba(0,0,0,.1),
            0px 1px 0px 0px rgba(255,255,255,.3);
    border-color: rgba(0,0,0,.55) rgba(0,0,0,.41) rgba(0,0,0,.28) rgba(0,0,0,.41);
  }
  :checked + .textured {
    color: white;
    text-shadow: 0px 1px 2px rgba(0,0,0,.45);
    background: -webkit-linear-gradient(top, rgba(0,0,0,.4), rgba(70,70,70,.3));
    background: -moz-linear-gradient(top, rgba(0,0,0,.4), rgba(70,70,70,.3));
    background: linear-gradient(top, rgba(0,0,0,.4), rgba(70,70,70,.3));
    background-clip: padding-box;
    box-shadow:
      inset 0px -3px 4px -2px rgba(255,255,255,.45),
      inset 0px 0px 4px 0px rgba(0,0,0,.5),
            0px 1px 0px 0px rgba(255,255,255,.3);
    border-color: rgba(0,0,0,.55) rgba(0,0,0,.41) rgba(0,0,0,.28) rgba(0,0,0,.41);
  }
  input[type=checkbox] + .textured:active,
  input[type=radio] + .textured:active {
    color: white;
    text-shadow: 0px 1px 2px rgba(0,0,0,.45);
    background: -webkit-linear-gradient(top, rgba(0,0,0,.5), rgba(0,0,0,.4));
    background: -moz-linear-gradient(top, rgba(0,0,0,.5), rgba(0,0,0,.4));
    background: linear-gradient(top, rgba(0,0,0,.5), rgba(0,0,0,.4));
    background-clip: padding-box;
    box-shadow:
      inset 0px 1px 4px 0px rgba(0,0,0,.37),
      inset 0px -1px 1px 0px rgba(255,255,255,.26),
            0px 1px 0px 0px rgba(255,255,255,.3);
    border-color: rgba(0,0,0,.6) rgba(0,0,0,.41) rgba(0,0,0,.28) rgba(0,0,0,.41);
    }

  /* "Push" button style */
  .push {
    background: -webkit-linear-gradient(top, hsl(0, 0%, 99%), hsl(0, 0%, 99%) 25%, hsl(0, 0%, 95%) 50%, hsl(0, 0%, 93%) 50%, hsl(0, 0%, 93%), hsl(0, 0%, 94%));
    background: -moz-linear-gradient(top, hsl(0, 0%, 99%), hsl(0, 0%, 99%) 25%, hsl(0, 0%, 95%) 50%, hsl(0, 0%, 93%) 50%, hsl(0, 0%, 93%), hsl(0, 0%, 94%));
    background: linear-gradient(top, hsl(0, 0%, 99%), hsl(0, 0%, 99%) 25%, hsl(0, 0%, 95%) 50%, hsl(0, 0%, 93%) 50%, hsl(0, 0%, 93%), hsl(0, 0%, 94%));
    border: 1px solid rgba(0,0,0,.3);
    box-shadow:
            0px 1px 0px 0px rgba(0,0,0,.05),
      inset 0px 1px 0px 0px rgba(255,255,255,.15);
    border-radius: 4px;
    text-align: center;
  }
  .push:active {
    background: -webkit-linear-gradient(top, #a8bfee, #739ee7 50%, #598fe7 50%, hsl(208, 80%, 84%));
    background: -moz-linear-gradient(top, #a8bfee, #739ee7 50%, #598fe7 50%, hsl(208, 80%, 84%));
    background: linear-gradient(top, #a8bfee, #739ee7 50%, #598fe7 50%, hsl(208, 80%, 84%));
    border-color: hsla(245, 54%, 33%, .8);
    box-shadow:
            0px 1px 0px 0px rgba(0,0,0,.05),
      inset 0px 1px 1px 0px rgba(255,255,255,.5);
  }
  input[type=checkbox] + .push:active,
  input[type=radio] + .push:active {
    background: -webkit-linear-gradient(top, #e0e0e0, #d5d5d5 50%, #cfcfcf 50%, #d5d5d5);
    background: -moz-linear-gradient(top, #e0e0e0, #d5d5d5 50%, #cfcfcf 50%, #d5d5d5);
    background: linear-gradient(top, #e0e0e0, #d5d5d5 50%, #cfcfcf 50%, #d5d5d5);
    border-color: rgba(0,0,0,.3);
  }
  :checked + .push {
    color: white;
    text-shadow: 0px 1px 2px rgba(0,0,0,.45);
    background: -webkit-linear-gradient(top, rgba(143,143,143,1), rgba(156,156,156,1));
    background: -moz-linear-gradient(top, rgba(143,143,143,1), rgba(156,156,156,1));
    background: linear-gradient(top, rgba(143,143,143,1), rgba(156,156,156,1));
    background-clip: padding-box;
    box-shadow:
      inset 0px -3px 4px -2px rgba(255,255,255,.45),
      inset 0px 0px 4px 0px rgba(0,0,0,.5),
            0px 1px 0px 0px rgba(255,255,255,.3);
    border-color: rgba(95,95,95,1) rgba(112,112,112,1) rgba(141,141,141,1) rgba(112,112,112,1);
  }
  input[type=checkbox]:checked + .push:active,
  input[type=radio]:checked + .push:active {
    background: -webkit-linear-gradient(top, rgba(113,113,113,1), rgba(126,126,126,1));
    background: -moz-linear-gradient(top, rgba(113,113,113,1), rgba(126,126,126,1));
    background: linear-gradient(top, rgba(113,113,113,1), rgba(126,126,126,1));
  }
  .segmented .push:active {
    z-index: 200;
  }
  .segmented .push:active:after {
    top: 2px;
    bottom: 2px;
    right: -1px;
  }
  .segmented :checked + .push:active:after,
  .segmented :checked + .push:active:after {
    display: none;
  }


  /* "Gradient" button style and gradient button bar*/
  .gradient {
    background: -webkit-linear-gradient(top, hsl(0, 0%, 99%), hsl(0, 0%, 98%) 49%, hsl(0, 0%, 92%) 53%, hsl(0, 0%, 93%));
    background: -moz-linear-gradient(top, hsl(0, 0%, 99%), hsl(0, 0%, 98%) 49%, hsl(0, 0%, 92%) 53%, hsl(0, 0%, 93%));
    background: linear-gradient(top, hsl(0, 0%, 99%), hsl(0, 0%, 98%) 49%, hsl(0, 0%, 92%) 53%, hsl(0, 0%, 93%));
    border: 1px solid hsl(0, 0%, 66%);
    box-shadow:
      0px -1px 0px 0px rgba(0,0,0,.05),
      0px 1px 0px 0px rgba(255,255,255,.3);
  }
  .gradient button:active,
  .gradient .button:active,
  button.gradient:active,
  .button.gradient:active {
    position: relative;
    z-index: 200;
    border-color: hsl(0, 0%, 57%);
    background: -webkit-linear-gradient(top, hsl(0, 0%, 73%), hsl(0, 0%, 75%) 49%, hsl(0, 0%, 70%) 53%, hsl(0, 0%, 69%));
    background: -moz-linear-gradient(top, hsl(0, 0%, 73%), hsl(0, 0%, 75%) 49%, hsl(0, 0%, 70%) 53%, hsl(0, 0%, 69%));
    background: linear-gradient(top, hsl(0, 0%, 73%), hsl(0, 0%, 75%) 49%, hsl(0, 0%, 70%) 53%, hsl(0, 0%, 69%));

  }
  div.gradient {
    display: box;
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 20px;
  }
  .gradient button,
  .gradient .button {
    border: none;
    display: block;
    border: 1px solid hsl(0, 0%, 66%);
    margin: -1px 0px -1px -1px;
    background: none;
  }

  /* Scope buttons */
  label.scope {
    color: black;
    padding: 0 8px;
    font-weight: bold;
    border-radius: 10em;
  }
  label.scope:hover, label.scope:focus {
    color: white;
    text-shadow: 0px 1px 0px rgba(0,0,0,.5);
    background: -webkit-linear-gradient(top, #bbbbbb, #a7a7a7);
    background: -moz-linear-gradient(top, #bbbbbb, #a7a7a7);
    background: linear-gradient(top, #bbbbbb, #a7a7a7);
  }
  :checked + label.scope, label.scope:active {
    color: black;
    background: #9b9b9b;
    color: white;
    text-shadow: 0px 1px 0px rgba(0,0,0,.5);
    box-shadow:
      inset 0px 1px 1px 0px rgba(0,0,0,.34),
      inset 0px 0px 0px 1px rgba(0,0,0,.12),
            0px 1px 0px 0px rgba(255,255,255,.45);
  }
  label.scope:active {
    background: #747374;
  }
  button.scope,
  .button.scope {
    border-radius: 4px;
    background: -webkit-linear-gradient(top, #f6f6f6, #e0e0e0);
    background: -moz-linear-gradient(top, #f6f6f6, #e0e0e0);
    background: linear-gradient(top, #f6f6f6, #e0e0e0);
    border: 1px solid rgba(0,0,0,.4);
    background-clip: border-box;
    box-shadow: 0px 1px 0px 0px rgba(255,255,255,.45);
    min-width: 14px;
    padding: 0 8px;
    text-align: center;
  }
  button.scope:active,
  .button.scope:active,
  select.scope:active  {
    background: -webkit-linear-gradient(bottom, #d2d2d2, #c5c5c5);
    background: -moz-linear-gradient(bottom, #d2d2d2, #c5c5c5);
    background: linear-gradient(bottom, #d2d2d2, #c5c5c5);
    box-shadow:
      inset 0px 2px 2px 0px rgba(0,0,0,.17),
            0px 1px 0px 0px rgba(255,255,255,.45);
    border-color: rgba(0,0,0,.55) rgba(0,0,0,.41) rgba(0,0,0,.28) rgba(0,0,0,.41);
  }
  select.scope {
    -webkit-appearance: none;
    border-radius: 4px;
    background-color: #ededed;
    background: url(img/dropdown-updown.png) right center no-repeat, -webkit-linear-gradient(top, #f6f6f6, #e0e0e0);
    background: url(img/dropdown-updown.png) right center no-repeat, -moz-linear-gradient(top, #f6f6f6, #e0e0e0);
    background: url(img/dropdown-updown.png) right center no-repeat, linear-gradient(top, #f6f6f6, #e0e0e0);
    border: 1px solid rgba(0,0,0,.4);
    background-clip: border-box;
    box-shadow: 0px 1px 0px 0px rgba(255,255,255,.45);
    display: inline-block;
    line-height: inherit;
    font-size: inherit;
    padding: 1px 16px 1px 8px;
    text-align: center;
  }
  input.scope {
    font-size: 12px;
    border-radius: 4px;
    padding: 2px 4px;
    box-shadow:
      inset 0px 1px 3px 0px rgba(0,0,0,.12),
      0px 1px 0px rgba(255,255,255,0), /* mixing the bottom bevel hilite and black transparent shadow would again look dull*/
      0px 0px 0px 1px rgba(0,0,0,.3);
  }
  button.scope.add,
  button.scope.remove {
    font-smoothing: antialiased; /* TODO: icons instead of the font*/
    color: #666;
    font-weight: bold;
    padding: 0;
    min-width: 16px;
  }

  /* segmented control */
  .segmented:after {
    content: "";
    display: block;
    clear: both;
  }
  .segmented input[type=radio] {
    display: none;
  }
  .segmented > * {
    position: relative;
    display: block;
    float: left;
    border-radius: 0;
    border-right-width: 0;
    border-left-width: 0;
  }
  .segmented > *:first-of-type {
    border-left-width: 1px;
    border-radius: 4px 0 0 4px;
  }
  .segmented > *:last-of-type {
    border-right-width: 1px;
    border-radius: 0px 4px 4px 0;
  }
  .segmented > *:after {
    z-index: 300;
    display: block;
    position: absolute;
    top: 2px;
    bottom: 2px;
    right: -1px;
    width: 1px;
    content: "";
    background: rgba(0,0,0,.17);
    box-shadow: 0px 1px 0px rgba(255,255,255,.1);
  }
  .segmented > :checked + *,
  .segmented > :active {
    z-index: 400;
  }
  .segmented > :active:after,
  .segmented > :checked + *:after {
    top: 1px;
    bottom: 0px;
    right: 0px;
  }
  .segmented > *:last-of-type:after {
    display: none;
  }

/* end button styles */

/* source list */
  .sourcelist {
    background: white;
    background: -webkit-linear-gradient(top, #eaedf2, #d3d8df);
    background: -moz-linear-gradient(top, #eaedf2, #d3d8df);
    background: linear-gradient(top, #eaedf2, #d3d8df);
    padding: 2px 0;
    border: 0px solid #bbb;
    line-height: 1.84;
    min-width: 12em;
  }
  .sourcelist:first-child {
    border-radius: 0px 0px 0px 3px;
    border-width: 0px;
    border-right-width: 1px;
  }
  .sourcelist:last-child {
    border-radius: 0px 0px 3px 0px;
    border-left-width: 1px;
  }
    .sourcelist .section-title {
      position: relative;
      display: block;
      font-size: 11px;
      padding: 0px 0px 0px 8px;
      font-weight: bold;
      color: hsl(212, 10%, 50%);
      text-shadow: 0px 1px 0px rgba(255,255,255,.8);
      text-transform: uppercase;
    }
    .sourcelist .section-title:hover:after {
      text-transform: none;
      color: hsla(212, 10%, 50%, .7);
      content: "Show/Hide";
      position: absolute;
      top: 0;
      right: 4px;
    }
    .sourcelist .section-title:active:after {
      color: hsla(215, 60%, 63%, 1);
    }
    .sourcelist .section-title + .disclosure {
      display: none;
    }
    .sourcelist .item {
      display: block;
      position: relative;
      border-style: solid;
      border-width: 1px 0px;
      border-color: transparent;
    }
    .sourcelist input[type=radio]:checked + .item {
      color: white;
      font-weight: bold;
      text-shadow: 0px 1px rgba(0,0,0,.3);
      background-clip: padding-box;
      margin: 0px 0px 0px 0px;
      border-style: solid;
      border-width: 1px 0px;
      border-color: hsla(211, 64%, 64%, 1) transparent hsla(214, 45%, 51%, 1) transparent;
      background: -webkit-linear-gradient(top, hsla(209, 66%, 68%, 1), hsla(220, 55%, 58%, 1));
      background: -moz-linear-gradient(top, hsla(209, 66%, 68%, 1), hsla(220, 55%, 58%, 1));
      background: linear-gradient(top, hsla(209, 66%, 68%, 1), hsla(220, 55%, 58%, 1));
      box-shadow: inset 0px 1px 0px hsla(209, 66%, 88%, .2);
    }
      .sourcelist .icon {
        display: inline-block;
        width: 1.5em;
        position: relative;
        top: -.18em;
      }
      .sourcelist .badge {
        background: hsla(212, 10%, 50%, .7);
        background: rgba(0,0,0,.3);
        color: white;
        font-weight: bold;
        text-align: center;
        display: inline-block;
        padding: 0px 6px;
        font-size: 11px;
        line-height: 14px;
        border-radius: 20em;
        position: absolute;
        right: 4px;
        top: 50%;
        margin-top: -7px;
        box-shadow: 0px 1px 0px rgba(255,255,255,.5); /* TODO: can't make the badge white with just css with current html structure, need to use js for this, the box shadow is not entirely accurate to lion, but makes the badge more tolerable when the item with the badge is selected */
      }
    .sourcelist input[type=radio] {
      display: none;
    }
    .sourcelist .section {
      display: box;
      box-orient: vertical;
      padding-bottom: 8px;
    }
    .disclosure + .section {
      display: none;
    }
    .disclosure:checked + .section {
      display: block;
    }
    .sourcelist .section .item {
      padding: 0 4px 0 1.6em;
    }
    .sourcelist .section .section .item {
      padding: 0 4px 0 3.2em;
    }
    .sourcelist .disclosure {
      margin-top: -1.7em;
      width: 1.6em;
      height: 1.6em;
      float: left;
      text-align: center;
      vertical-align: middle;
      position: relative;
    }


/* end something */

.header {
  text-shadow: 0px 1px 0px rgba(255,255,255,.8);
  border-radius: 3px 3px 0 0;
  background: -webkit-linear-gradient(top, hsla(0, 0%, 92%, .98), hsla(0, 0%, 71%, .95)), url(img/noise-hard.png);
  background: -moz-linear-gradient(top, hsla(0, 0%, 92%, .98), hsla(0, 0%, 71%, .95)), url(img/noise-hard.png);
  background: linear-gradient(top, hsla(0, 0%, 92%, .98), hsla(0, 0%, 71%, .95)), url(img/noise-hard.png);
  box-shadow:
    inset 0px -1px 0px 0px rgba(255,255,255,.17);
  border-bottom: 1px solid #696969;
}
  .titlebar {
    height: 22px;
    line-height: 22px;
    text-align: center;
  }
  .toolbar {
    padding: 2px 0 0 8px;
    line-height: 18px;
    display: box;
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    box-align: center;
  }
  .toolbar:after {
    display: block;
    clear: both;
    content: "";
  }
    .toolbar > * {
      display: block;
      margin-right: 8px;
      margin-bottom: 8px;
    }
    .toolbar input {
      height: 20px;
      margin-top: 1px;
    }


div.scope {
  font-weight: bold;
  background: -webkit-linear-gradient(bottom, #d9d9d9, #ededed);
  background: -moz-linear-gradient(bottom, #d9d9d9, #ededed);
  background: linear-gradient(bottom, #d9d9d9, #ededed);
  box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,.51);
  border-bottom: 1px solid #bfbfbf;
  line-height: 16px;
  font-size: 12px;
  padding: 4px 8px;
  color: #737373;
}
.bar {
}
  .bar > * {
    display: inline-block;
    vertical-align: middle;
  }
  .bar [type=radio] {
    display: none;
  }

.content {
  border-radius: 0 0 3px 3px;
  background: #ededed;
}