#gradient
{
  
   position:fixed;
    padding:0;
    margin:0;

    top:0;
    left:0;

    width: 100%;
    height: 100%;
}

section, footer, nav {
  display: block;
  margin:0px;
  padding:0px;
}

p
{
	margin:0px;
}

#paneldiv, #disabledbuttons
{
color:white;
}

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  -webkit-text-size-adjust: none;
  color: #333;
  padding: 0px;
   margin: 0px;
}

a {
  color: blue;
  color: hsl( 220, 90%, 40% );
  text-decoration: none;
}

a:hover {
  background-color: blue;
  background-color: hsl( 220, 90%, 50% );
  color: white;
}

#options {
  position: relative;
  z-index: 1;
}

button {
  font-size: 16px;
  -webkit-appearance: push-button;
}

footer {
  
  font-size: 0.8em;
  position: relative;
  z-index: 100;
}

#disclaimer {
  color: red;
  font-weight: bold;
  display: none;
}
.no-csstransforms3d #disclaimer { display: block; }

hr {
  border: none;
  border-top: 1px solid #CCC;
}



figure {
  margin: 0;
}

/*
code {
  font-family: 'Monaco', 'Menlo', monospace;
}



.index nav ul {
  list-style: none;
  margin: 0 0 3.0em 0;
  padding: 0;
}

.index nav ul a {
  display: block;
  font-size: 18px;
  font-weight: bold;
  line-height: 24px;
  padding: 10px;
  border: 1px solid #CCC;
  border-bottom: none;
}

.index nav ul li:first-child a {
  border-radius: 10px 10px 0 0;
}

.index nav ul li:last-child a {
  border-radius: 0 0 10px 10px;
  border-bottom: 1px solid #CCC;
}



body.doc {
  max-width: 640px;
}


.doc #content {
  font-size: 14px;  
  line-height: 1.5em;
}

.doc #content blockquote {
  margin-left: 0;
  padding: 0.8em;
  background: #EEE;
  background: hsla( 0, 0%, 0%, 0.04 );
}

.doc #content img {
  border: 1px solid #CCC;
  display: inline-block;
}

.doc #content pre {
  font-size: 12px;
  line-height: 1.5em;
}

.doc nav h1 {
  font-size: 20px;
}

.doc nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc nav li a {
  display: block;
  padding: 0.3em 0;
}

.doc nav li.current a {
  font-weight: bold;
  color: #333;
}
.doc nav li.current a:hover { color: white; }


@media screen and (min-width: 768px) {

  body.doc {
    margin-left: 220px;
  }
  
  .doc nav {
    width: 200px;
    position: fixed;
    left: 10px;
    font-size: 14px;
  }

  .doc nav h1 {
    margin-top: 0;
  }

}



.proxy-range {
  display: inline-block;
  position: relative;
  height: 30px;
  width: 200px;
  border: 1px solid hsla( 0, 0%, 0%, 0.15 );
  background-color: hsla( 0, 0%, 0%, 0.02 );
  border-radius: 15px;
  -webkit-box-shadow: inset 0 1px 7px hsla( 0, 0%, 0%, 0.3 );
     -moz-box-shadow: inset 0 1px 7px hsla( 0, 0%, 0%, 0.3 );
       -o-box-shadow: inset 0 1px 7px hsla( 0, 0%, 0%, 0.3 );
          box-shadow: inset 0 1px 7px hsla( 0, 0%, 0%, 0.3 );

}

.proxy-range.highlighted {
  background-color: hsla( 220, 90%, 50%, 0.15 );
}


.proxy-range .handle {
  width: 38px;
  height: 38px;
  -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
          border-radius: 20px;
  border: 1px solid hsla(0, 0%, 0%, 0.3);
  position: absolute;
  top: -5px;
  left: -20px;
  background-color: hsla( 220, 70%, 60%, 1.0 );
  background-image: -webkit-gradient(radial, center 15%, 0, center 30%, 30, 
    from(            hsla( 0, 0%, 100%, 0.6 ) ),  
    color-stop( 50%, hsla( 0, 0%, 100%, 0.0 ) ),
    color-stop( 50%, hsla( 0, 0%,   0%, 0.0 ) ),
    to(              hsla( 0, 0%,   0%, 0.5 ) )
  );
  background-image: -moz-radial-gradient(center 30%, cover,
    hsla( 0, 0%, 100%, 0.5 ),  
    hsla( 0, 0%, 100%, 0.0 ) 50%,
    hsla( 0, 0%,   0%, 0.0 ) 50%,
    hsla( 0, 0%,   0%, 0.5 )
  );
  -webkit-box-shadow: 
    0  2px 0px -1px hsla( 0, 0%, 100%, 1.0 ) inset, 
    0 -4px 2px -1px hsla( 0, 0%,   0%, 0.1 ) inset, 
    0  1px 2px  0px hsla( 0, 0%,   0%, 0.3 )
  ;
  -moz-box-shadow: 
    0  2px 0px -1px hsla( 0, 0%, 100%, 0.7 ) inset, 
    0 -4px 2px -1px hsla( 0, 0%,   0%, 0.1 ) inset, 
    0  1px 2px  0px hsla( 0, 0%,   0%, 0.3 )
  ;
  box-shadow: 
    0  2px 0px -1px hsla( 0, 0%, 100%, 0.7 ) inset, 
    0 -4px 2px -1px hsla( 0, 0%,   0%, 0.1 ) inset, 
    0  1px 2px  0px hsla( 0, 0%,   0%, 0.3 )
  ;
  -webkit-transition-property: width, height, top, left, -webkit-border-radius;
     -moz-transition-property: width, height, top, left, -moz-border-radius;
  -webkit-transition-duration: 0.1s;
     -moz-transition-duration: 0.1s;
}

.proxy-range.highlighted .handle {
  height: 98px;
  top: -35px;
  width: 4px;
  left: -3px;
  background-image: -webkit-gradient(linear, 0 top, 0 bottom, 
    from(            hsla( 0, 0%, 100%, 0.6 ) ),  
    color-stop( 50%, hsla( 0, 0%, 100%, 0.0 ) ),
    color-stop( 50%, hsla( 0, 0%,   0%, 0.0 ) ),
    to(              hsla( 0, 0%,   0%, 0.5 ) )
  );
  border-radius: 3px;
}


pre {
  background: #111;
  color: white;
  padding: 0.8em;
  white-space: pre-wrap;
}


code .s1,
code .s { color: #78BD55; } 
code .mi, 
code .cp { color: #5298D4; }
code .k { color: #E39B79; } 
code .kd, 
code .na { color: #A9D866; } 
code .p  { color: #EDB; } 
code .o  { color: #F63; }   
code .nb { color: #AA97AC;}


code .c,
code .c1 { color: #666; font-style: italic; }

code .nt { color: #A0C8FC; } 

code .nf { color: #9EA8B8; }
code .nc { color: #A78352; }  
code .m  { color: #DE8E50; } 
code .nd { color: #9FAD7E; }

*/