/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2015-06-04, 13:02:45
    Author     : Arek
*/

/* Eric Meyer's CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* End of Eric Meyer's CSS Reset */

html {
	height: 100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
	display: block;       
}
body {
	font: 12px/18px Arial, sans-serif;
	width: 100%;
	height: 100%;
}
.wrapper {
    //margin:20px;
	width: 1200px;
	margin: 20px auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}


/* Header
-----------------------------------------------------------------------------*/
.header {
    margin:20px;
	height: 55px;
    background-color: rgba(230, 230, 230, 0.95);
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright:15px;
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px;
    -webkit-border-top-left-radius:15px;
    -webkit-border-top-right-radius:15px;
    -webkit-border-bottom-left-radius:15px;
    -webkit-border-bottom-right-radius:15px;
    border-top-left-radius:15px;
    border-top-right-radius:15px;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
}


/* Middle
-----------------------------------------------------------------------------*/
.middle {
	width: 100%;
	padding: 0 0 50px;
	position: relative;
}
.middle:after {
	display: table;
	clear: both;
	content: '';
}
.container {
	width: 100%;
	float: left;
	overflow: hidden;
}
.content {
	margin: 20px 180px 20px 20px;
        height:750px;
      //  margin:20px;
    background-color: rgba(230, 230, 230, 0.95);
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright:15px;
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px;
    -webkit-border-top-left-radius:15px;
    -webkit-border-top-right-radius:15px;
    -webkit-border-bottom-left-radius:15px;
    -webkit-border-bottom-right-radius:15px;
    border-top-left-radius:15px;
    border-top-right-radius:15px;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    overflow:hidden;

}


/* Right Sidebar
-----------------------------------------------------------------------------*/
.right-sidebar {
	float: left;
	width: 160px;
	margin-left: -160px;
	position: relative;
	//background: #FFACAA;
}


/* Footer
-----------------------------------------------------------------------------*/
.footer {
	height: 20px;
	//background:#EFEFEF;
        color: #000000;
    font-family: helvetica;
    font-style: normal;
    font-size: 10px;
    line-height: 15px;
    text-align: center;  
}

body {
    background: url(bg.jpg);
    background-size: 300px 350px;
} 

.ranges
{
    margin:10px;
    width:450px;
   // background-color: yellow;

    float:left;
}
.graphs
{

   float:left;
    
    
}
canvas
{
    border:1px solid #000000;
}


.logo
{
    font-family:comic sans, comic sans ms, cursive, verdana, arial, sans-serif;
//font-weight:normal;
color:#3D3D3D;
letter-spacing:2pt;
word-spacing:10pt;
font-size:27px;
text-align:left;
//font-family:georgia, serif;
line-height:1.9;
margin-left:80px;
//font-weight: bold;
}


.laiss
{
    position: absolute;
  top: 250px;
  left: 40px;
}
.wzor1
{
    position:absolute;
    top:260px;
    left:551px;  
}
.xtss
{
    position: absolute;
  top: 280px;
  left: 550px;
}
.wzor2
{
    position:absolute;
    top:530px;
    left:551px;  
}
.ytss
{
    position: absolute;
  top: 550px;
  left: 550px;
}

.btn {
  -webkit-border-radius: 9;
  -moz-border-radius: 9;
  border-radius: 9px;
  font-family: Georgia;
  color: #ffffff;
  font-size: 20px;
  background: #8badc4;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
}

.btn:hover {
  background: #cad3d9;
  text-decoration: none;
}

input[type=range].slider {
  -webkit-appearance: none;
  width: 85%;
  margin: 0.4px 0;
}
input[type=range].slider:focus {
  outline: none;
}
input[type=range].slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 13.2px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #d9d9da;
  border-radius: 0px;
  border: 0px solid #010101;
}
input[type=range].slider::-webkit-slider-thumb {
  box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
  border: 0px solid #ff1e00;
  height: 14px;
  width: 11px;
  border-radius: 0px;
  background: rgba(28, 108, 255, 0.93);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -0.4px;
}
input[type=range].slider:focus::-webkit-slider-runnable-track {
  background: #e1e1e2;
}
input[type=range].slider::-moz-range-track {
  width: 100%;
  height: 13.2px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #d9d9da;
  border-radius: 0px;
  border: 0px solid #010101;
}
input[type=range].slider::-moz-range-thumb {
  box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
  border: 0px solid #ff1e00;
  height: 14px;
  width: 11px;
  border-radius: 0px;
  background: rgba(28, 108, 255, 0.93);
  cursor: pointer;
}
input[type=range].slider::-ms-track {
  width: 100%;
  height: 13.2px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range].slider::-ms-fill-lower {
  background: #d1d1d2;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range].slider::-ms-fill-upper {
  background: #d9d9da;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range].slider::-ms-thumb {
  box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
  border: 0px solid #ff1e00;
  height: 14px;
  width: 11px;
  border-radius: 0px;
  background: rgba(28, 108, 255, 0.93);
  cursor: pointer;
  height: 13.2px;
}
input[type=range].slider:focus::-ms-fill-lower {
  background: #d9d9da;
}
input[type=range].slider:focus::-ms-fill-upper {
  background: #e1e1e2;
}

.opis
{
    position:absolute;
    width:520px;
    top:40px;
    left: 500px;
    font-weight:normal;
    color:#000000;
    font-size:17px;
    text-align:left;
    font-family:comic sans, comic sans ms, cursive, verdana, arial, sans-serif;
    line-height:1.5;
    
}
