@import url('https://fonts.googleapis.com/css?family=Muli');

html {
	font-family: 'Muli', sans-serif;
	font-size: 74%;
}

/* ~~ reset stylu przeglądarki ~~ */
* {margin: 0; padding: 0;}

/* ~~ wymuszenie traktowania znaczników html5 jako blokowe ~~ */
header, footer, section, aside, nav, article {display: block;}

/* ~~ ustawienia dla znacznika ciała ~~ #e6e6e6*/
/* body {background: #fff; font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 12px; color: #555; overflow-y: scroll; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto;}*/
 body {background: #fff; color: #555; overflow-y: scroll; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto;}

/* ~~ ustawienia dla głównego kontenera strony ~~ */
#wrapper {width: 980px; min-height: 800px; margin: 10px auto; background-color: #fff;}

header{animation-duration: 2s; animation-name: action;}
@keyframes action {from {opacity:0.6;}to {opacity:1;}}

/* ~~ REUSABLE ~~ */
.hide {text-indent: -998em; height: 8px;}
img {border: 0;}
img.aligncenter {clear: both; display: block; margin-top: 15px; margin-left: auto; margin-right: auto; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
img.alignright {float: right; display: block; text-align: right;}
img.odst-dol-gora {padding-top: 15px; padding-bottom: 15px;}
img.odst-dol {padding-bottom: 15px;}
.ozdobnik {margin: 115px auto;}
p.align-right {text-align: right; margin-bottom: 10px;}
span.blue-1 {color: #058abe;}
span.blue-2 {color: #1575a5;}
figcaption.center {text-align: center; padding: 10px;}
figcaption.right {text-align: right; padding: 10px;}
.tooltip {padding: 10px 15px 12px 15px; border-radius: 7px; background-color: rgba(0, 0, 0, .8); opacity: 1; -webkit-transition: visibility 0.2s, opacity 0.2s; transition: visibility 0.2s, opacity 0.2s; position: absolute; z-index: 9999; font: 12px/1 Tahoma, Arial, sans-serif; text-align: center; color: #fff;}
.tooltip:after {content: ""; display: block; width: 0; height: 0; margin-left: -6px; border-style: solid; border-width: 10px 6px 0 6px; border-color: rgba(0, 0, 0, .8) transparent transparent transparent; position: absolute; left: 50%; bottom: -10px;}
.tooltip.hidden {opacity: 0; visibility: hidden;}

/* ~~ nagłówek strony ~~ */
header {background: url("../images/logo.png") no-repeat center; height: 170px;*}
header #kula {position: relative; margin-top: 117px; margin-right: 0px; margin-left: 910px; -webkit-animation-name: ruch; -webkit-animation: ruch 8s infinite; -webkit-animation-direction: alternate; animation-name: ruch; animation: ruch 8s infinite; animation-direction: alternate;}
#kula {-webkit-animation-timing-function: linear;}
#kula {animation-timing-function: linear;}
@-webkit-keyframes ruch { from {right: 0px;} to {right: 700px;} }
@keyframes ruch { from {right: 0px;} to {right: 700px;} }

/* ~~ wstecz ~~ */
#wstecz {margin-top: 10px; margin-right: 10px; margin-bottom: -50px; text-align: right;}

/* ~~ wstecz egzamin~~ */
#wstecz-egz {margin-top: 10px; margin-right: 30px; margin-bottom: -40px; text-align: right;}

/* ~~ cytat dla strony ~~ */
#cytat {margin-top: -30px; text-align: right; padding-right: 50px; color: #005A93; font-size: 1.5em; font-weight: bold;}

/* ~~ nawigacja strony (menu) ~~ */
nav {margin: 0 auto;}
nav ul {margin: 0 20px; width: 620px;}
nav ul li {display: inline-block; list-style: none; font-size: 1.35em; font-weight: bold;}
nav ul li a {display: inline-block; background: #CCE6FF; text-decoration: none; text-align: center; color: #005A93; font-weight: bold; padding: 8px 0px; width: 121px;}
nav ul li a:hover {color: #005A93; background: #99CCFF;}
nav #aktywny {color: #005A93; background: #99CCFF;}

/* ~~ linki podstron ~~ */
a {color: #1C69A8; text-decoration: none; font-size: 1.05em;}
a:hover {color: #BADAF3;}

/* ~~ sekcja top ~~ */
#top-1 {margin: 25px 0 0 20px; background: url("../images/baner.jpg") no-repeat left; width: 620px; height: 170px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#top-2{margin: -171px 20px 0 0; background: url("../images/ok.jpg") no-repeat right; height: 170px;}

/* ~~ sekcja bloki ~~ */
#bloki {margin: 10px 0 0 20px;}
#bloki h3 {border-bottom: 1px #999 solid; color: #00a9dd; font-size: 1.25em; padding: 2px 0;}
#bloki #blok-1, #blok-2, #blok-3 {margin-right: 20px; float: left; width: 30.5%; height: 300px;}

#blok-1 ul {margin: 10px 5px; list-style: none;}
#blok-1 ul li {font-size: 1.15em; padding: 5px 0; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; text-overflow: ellipsis;}

.blok ul {margin: 10px 5px; list-style: none;}
.blok ul li {font-size: 1.15em; padding: 5px 0; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; text-overflow: ellipsis;}


#blok-2 td {font-size: 1.1em; padding: 1px 0 0 0;}

#blok-3 img {margin-top: 20px;}
#blok-3 ul {margin: 10px 5px; list-style: none; text-align:center;}
#blok-3 ul li {font-size: 1.15em; padding: 5px 0;}

#blok-4 {margin-top: 20px; margin-bottom: 20px; float: right; width: 700px;}
#blok-4 p {padding: 15px 20px 6px 0 ; font-size:1.2em; line-height: 1.5; text-align: left;}

/* ~~ artykuły ~~ */
article {margin: 0 20px 0 20px; clear: both; padding: 10px 0 10px 0; text-align: left;}
article h3 {margin-top: 10px; border-bottom: 1px #999 solid; color: #00a9dd; font-size: 1.25em; padding: 5px 0;}
article p {padding-bottom: 10px; font-size:1.2em; line-height: 1.5;}
article div.kolumn-2 {-webkit-column-count: 2; -moz-column-count: 2; padding: 10px 0px;}

/* ~~ podstrony ~~ */
#main {margin: 10px 20px 0 20px;}
#main h2 {margin-top: 20px; border-bottom: 1px #999 solid; color: #00a9dd; font-size: 1.35em; padding: 5px 0; width: 915px}
#main h3 {color: #00a9dd; margin: 20px 20px 0px 20px; font-size: 1.25em;}
#main p {padding-top: 5px; padding-bottom: 5px; font-size:1.2em; line-height: 1.5;}
#main .opis {padding: 15px 20px; text-align: left;}
#main .opis-2 {padding: 0px 20px 10px 20px; text-align: left;}
#main .opis-3 {margin-right: 20px; padding: 15px 20px 0px 20px; text-align: left;}
#main .wpis {margin-right: 20px; padding: 8px 20px 5px 20px; text-align: left;}
#main ol {margin: 5px 15px 5px 15px}
#main ol li {margin: 0 30px; padding: 4px; text-align: left; font-size:1.2em; line-height: 1.6;}
#main ul {margin: 15px}
#main ul li {margin: 0 30px; padding: 4px; text-align: left; font-size:1.2em; line-height: 1.6;}
#main #kalkulator {margin: 100px auto; clear: both; display: block;}
#main div.kolumn-2 {-webkit-column-count: 2; -moz-column-count: 2; padding: 10px 0px;}
#main #videoPlayer {margin-top: 20px; margin-right: 25px; margin-left: 25px;}

#main h3.egzamin {color: #000000; margin: 20px 20px 10px 0px; font-size: 1.25em;}
#main p.egzamin {margin-right: 25px; padding-top: 5px; padding-bottom: 5px; font-size:1.2em; line-height: 1.5;}
#main p.center {text-align: center;}
#main .ip-form, #start, #adresy {padding-top: 20px; padding-left: 350px; font-size: 1.2em;}

/* ~~ podstrony ~~ */
#actual {margin: 10px 20px 0 20px;}
#actual h2 {margin-top: 20px; border-bottom: 1px #999 solid; color: #00a9dd; font-size: 1.35em; padding: 5px 0; width: 915px}
#actual h3 {color: #00a9dd; margin: 20px 20px 0px 20px; font-size: 1.25em;}
#actual p {padding-top: 5px; font-size:1.2em; line-height: 1.5;}
#actual .opis {padding: 15px 20px; text-align: left;}
#actual .opis-2 {padding: 0px 20px 10px 20px; text-align: left;}
#actual .opis-3 {margin-right: 20px; padding: 15px 20px 0px 20px; text-align: left;}
#actual .wpis {margin-right: 20px; padding: 8px 20px 5px 20px; text-align: left;}
#actual ol {margin: 5px 15px 5px 15px}
#actual ol li {margin: 0 30px; padding: 4px; text-align: left; font-size:1.2em; line-height: 1.6;}
#actual ul {margin: 15px}
#actual ul li {margin: 0 30px; padding: 4px; text-align: left; font-size:1.2em; line-height: 1.6;}
#actual #kalkulator {margin: 100px auto; clear: both; display: block;}
#actual div.kolumn-2 {-webkit-column-count: 2; -moz-column-count: 2; padding: 10px 0px;}
#actual #videoPlayer {margin-top: 20px; margin-right: 25px; margin-left: 25px;}

/* ~~ podstrona: obrazki ~~ */
#kontakt {margin: 20px 0; background: url("../images/kontakt.png") no-repeat left; float: left; width: 97px; height: 100px;}
#o_mnie {margin: 20px 0; background: url("../images/kostki.jpg") no-repeat left; float: left; width: 162px; height: 205px;}

/* ~~ Efekt harminijki ~~ */
#harm h3 {margin: 20px; display: block; color: #fff; padding: 10px 5px 10px 20px; font-weight: lighter; cursor: pointer; background: #03284d;
}
.lista p {font-size: 1.2em; padding: 15px 25px; text-align: justify;}
.lista p.center{text-align: center;}

/* ~~ kontenery aplikacji ~~ */
.box {margin: 20px 0 20px 55px; background: #fff; height: 370px; width: 390px; display: block; float: left; box-shadow: 3px 3px 7px #777; -webkit-box-shadow: 3px 3px 7px #777; -moz-box-shadow: 3px 3px 7px #777; border-radius: 6px;}
.box img {padding: 10px; float: left;}
.box h4 {color: #00a9dd; float: left; display: block; margin-top: 50px; font-size: 1.3em}
.box p {margin: 5px 0px 0px 25px; width: 87%; height: 45%; text-align: left; display: block; clear: both; padding-left: 5px;}
.box a {font-weight: bold;}
.weblink {text-align: right; width: 100%;}

/* ~~ formularz kontaktowy ~~ */
#poczta {margin: 30px 0 118px 0; width: 720px; float: right;}
#poczta p {font-size: 1.2em; padding-right: 20px; text-align: justify;}
#poczta label {display: block; font-size: 1.2em; padding: 10px 0;}
#poczta input[type="text"] {width: 250px; height: 20px; border: 1px solid #cccccc; padding: 5px; color: #000; font-size: 1.1em; text-align: left; display: block;}
#poczta input[type="email"] {width: 250px; height: 20px; border: 1px solid #cccccc; padding: 5px; color: #000; font-size: 1.1em; display: block;}
#poczta textarea {width: 685px; height: 120px; border: 1px solid #cccccc; padding: 5px; font-family: Arial, Helvetica, Verdana, sans-serif; color: #000; font-size: 1.1em; display: block;}
#poczta button {margin: 10px 0 0 0; width: 120px; height: 30px; display: block; cursor: pointer;}

/* ~~ Mapa ~~ */
#map {margin: -90px 20px 0 0; width: 720px; float: right; display: block;}
#mapForm {margin: 10px 0 20px 0; width: 720px; float: right;}
#mapForm input[type="text"] {width: 250px; height: 20px; border: 1px solid #cccccc; padding: 5px; color: #000; font-size: 1.1em; text-align: left;}
#mapForm button {margin: 10px 0 0 10px; width: 120px; height: 30px; cursor: pointer;}

/* ~~ AJAX ~~ */
#message {display: none; width: 500px; padding: 10px 0 0 0; margin: 0 auto; line-height: 22px; text-align: center;}
#message.error {display: block; color: #D3626C; font-size: 1.1em; font-weight: bold;}
#message.success {display: block; color: #06C; font-size: 1.1em; font-weight: bold;}

/* ~~ formularz kalkulator IP ~~ */
select {padding: 2px; width: 164px;}
input[type="text"]{margin: 10px 0;padding: 2.2px; width: 30px; text-align: center;}
input[type="submit"] {margin: 10px 0; width: 230px; height: 30px; display: block; cursor: pointer;}
input[type="reset"] {margin-left: auto; margin-right: auto; width: 220px; height: 30px; display: block; cursor: pointer;}

/* ~~ formularz oceny ~~ */
#oceny {margin: 10px auto; width: 450px; height: 100px; font-size: 1.2em;}
#oceny fieldset {display: block; padding: 5px; border: #00A9E3 solid thin;}
#oceny legend {margin: 0 10px; color:#06C;}
#oceny select {margin: 10px auto; padding: 3px; width: 220px; display: block;}
#oceny input[type="submit"]{width: 220px; margin: 10px auto; display: block; cursor: pointer;}

/* ~~ formularz przedmioty ~~ */
#przedmioty {margin: 10px auto; width: 500px; height: 110px; font-size: 1.2em;}
#przedmioty fieldset {display: block; padding: 5px; border: #00A9E3 solid thin;}
#przedmioty legend {margin: 0 10px; color:#06C;}
#przedmioty select {margin: 10px auto; padding: 3px; width: 250px; display: block;}
#przedmioty input[type="submit"]{width: 250px; margin: 10px auto; display: block; cursor: pointer;}

/* ~~ formularz klasa sieci ~~ */
.siec {margin: 60px auto; width: 400px; height: 100px; font-size: 1.2em;}
.siec fieldset {display: block; margin: 30px auto; padding: 5px; border: #00A9E3 solid thin;}
.siec legend {margin: 0 10px; color:#06C;}
.siec select {margin: 10px auto; padding: 3px; width: 220px; display: block;}
.siec input[type="submit"]{width: 220px; margin: 10px auto; display: block; cursor: pointer;}

.punkty {margin-top: 120px; margin-left: auto; margin-right: auto; width: 400px; height: 100px; font-size: 1.2em; border: #00A9E3 solid thin;}
.punkty fieldset {display: block; margin: 30px auto; padding: 5px; border: #00A9E3 solid thin;}
.punkty legend {margin: 0 10px; color:#06C; font-size: 1.0em;}
.punkty select {margin: 10px auto; padding: 3px; width: 220px; display: block;}

/* ~~ formularz identyfikator sieci ~~ */
#siec {margin: 60px auto; width: 400px; height: 100px; font-size: 1.2em;}
#siec fieldset {display: block; margin: 30px auto; padding: 5px; border: #00A9E3 solid thin;}
#siec legend {margin: 0 10px; color:#06C;}
#siec select {margin: 10px auto; padding: 3px; width: 220px; display: block;}
#siec input[type="submit"]{width: 220px; margin: 10px auto; display: block; cursor: pointer;}

/* ~~ formularz hosty w sieci ~~ */
#siec-host {margin: 60px auto; width: 400px; height: 130px; font-size: 1.2em;}
#siec-host fieldset {display: block; margin: 30px auto; padding: 5px; border: #00A9E3 solid thin;}
#siec-host legend {margin: 0 10px; color:#06C;}
#siec-host select {margin: 10px auto; padding: 3px; width: 220px; display: block;}
#siec-host input[type="submit"]{width: 220px; margin: 10px auto; display: block; cursor: pointer;}
.align-center {margin: 10px auto; text-align: center;}
.maska {width: 100px}

/* ~~ formularz dodawania danych do bazy ~~ */
#baza {margin: 30px auto; width: 900px; font-size: 1.2em;}
#baza fieldset {display: block; margin: 30px auto; padding: 5px; border: #00A9E3 solid thin;}
#baza legend {margin: 0 10px; color:#06C;}
#baza select {margin-left: 20px; margin-top: 20px; padding: 3px; width: 250px; display: block; text-align: left;}
#baza input[type="text"]{ width: 850px; margin: 30px auto; display: block; padding: 5px; text-align: left;}
#baza input[type="submit"] {width: 220px; margin: 30px auto; display: block; cursor: pointer;}

/* ~~ formularz zmiany hasła ~~ */
#updbaza {margin: 30px auto; width: 400px; font-size: 1.2em;}
#updbaza fieldset {display: block; margin: 30px auto; padding: 5px; border: #00A9E3 solid thin;}
#updbaza legend {margin: 0 10px; color:#06C;}
#updbaza input[type="password"]{ width: 250px; margin: 30px auto; display: block; padding: 5px; text-align: center;}
#updbaza input[type="submit"] {width: 250px; margin: 30px auto; display: block; cursor: pointer;}

/* ~~ tabela default ~~ */
table.material {margin-top: 20px; border-collapse: collapse; width: 70%; padding: 1px; margin-left: 30px; border: #00A9E3 solid thin;}
table.material tr:hover {background-color: #F0F8FF;}
table.material th {background-color: #F0F8FF; font-size:1.2em; padding: 10px; color: #00a9dd;}
table.material td {padding: 10px; font-size:1.2em; border: #00A9E3 solid thin;}
table.material td a {padding: 5px 50px 5px 5px;}
table.material td a:hover {padding: 5px 50px 5px 5px; color: #005A93;}
table.material td.nr{text-align: center; font-weight: bold;}

ul.material {text-decoration: none; list-style: none; display: inline-block;}
ul.material li a:link, li a:visited {margin-left: -19px; margin-top: -3px; margin-bottom: -3px; display: block; width: 640px; padding: 8px; font-size:1em; border: #00A9E3 solid thin;}
ul.material li a:hover {background-color: #F0F8FF; color: #005A93;}

/* ~~ tabela ~~ */
table.material-1 {margin-top: 20px; border-collapse: collapse; width: 50%; padding: 1px; margin-left: 30px; border: #00A9E3 solid thin;}
table.material-1 tr:hover {background-color: #F0F8FF;}
table.material-1 th {background-color: #F0F8FF; font-size:1.2em; padding: 10px; color: #00a9dd;}
table.material-1 td {padding: 10px; font-size:1.2em; border: #00A9E3 solid thin;}
table.material-1 td a {padding: 5px 50px 5px 5px;}
table.material-1 td a:hover {padding: 5px 50px 5px 5px; color: #005A93;}
table.material-1 td.nr{text-align: center; font-weight: bold;}

ul.material-1 {text-decoration: none; list-style: none; display: inline-block;}
ul.material-1 li a:link, li a:visited {margin-left: 90px; margin-top: -3px; margin-bottom: -3px; display: block; width: 650px; padding: 8px; font-size:1em; border: #00A9E3 solid thin;}
ul.material-1 li a:hover {background-color: #F0F8FF; color: #005A93;}

/* ~~ tabela ~~ */
table.material-2 {margin-top: 20px; border-collapse: collapse; width: 70%; padding: 1px; margin-left: 30px; border: #00A9E3 solid thin;}
table.material-2 tr:hover {background-color: #F0F8FF;}
table.material-2 th {background-color: #F0F8FF; font-size:1.2em; padding: 10px; color: #00a9dd;}
table.material-2 td {padding: 10px; font-size:1.2em; border: #00A9E3 solid thin;}
table.material-2 td a {padding: 5px 50px 5px 5px;}
table.material-2 td a:hover {padding: 5px 50px 5px 5px; color: #005A93;}
table.material-2 td.nr{text-align: center; font-weight: bold;}

ul.material-2 {text-decoration: none; list-style: none; display: inline-block;}
ul.material-2 li a:link, li a:visited {margin-left: -19px; margin-top: -3px; margin-bottom: -3px; display: block; width: 860px; padding: 8px; font-size:1em; border: #00A9E3 solid thin;}
ul.material-2 li a:hover {background-color: #F0F8FF; color: #005A93;}

/* ~~ tabela egzamin ~~ */
table.egzamin {margin-top: 20px; border-collapse: collapse; width: 98%; padding: 1px; margin-left: 0px; border: #00A9E3 solid thin;}
table.egzamin tr:hover {background-color: #F0F8FF;}
table.egzamin th {background-color: #F0F8FF; font-size:1.2em; padding: 10px; color: #00a9dd;}
table.egzamin td {padding: 10px; font-size:1.1em; border: #00A9E3 solid thin;}
table.egzamin td a {padding: 5px 50px 5px 5px;}
table.egzamin td a:hover {padding: 5px 50px 5px 5px; color: #005A93;}
table.egzamin td.pusty{width: 49%; background-color: #F0F8FF;}

/* ~~ tabela identyfikator sieci ~~ */
.tab-sieci {margin: 30px auto; min-width: 900px;}
.tab-sieci td {padding: 4px; text-align: center; font-size: 1.1em; border: #00A9E3 solid thin;}
.blue {background: #DEE9F3;}
.yellow {background: #FFEEAA;}
.dark-blue {background: #15C5FF;}

/* ~~ tabela podsieci ~~ */
.tab-sieci-dane {margin: 5px auto; width: 400px;}
.tab-sieci-dane td {padding: 8px; text-align: center; font-size: 1.1em; border: #00A9E3 solid thin;}

/* ~~ tabela ilość hostów ~~ */
.tab-sieci-hosty {margin: 5px auto;}
.tab-sieci-hosty td {padding: 8px; text-align: center; font-size: 1.1em; border: #00A9E3 solid thin;}

/* ~~ tabela podsieci ~~ */
.tab-podsieci {margin: 5px auto; min-width: 900px;}
.tab-podsieci td {padding: 4px; text-align: center; font-size: 1.1em; border: #00A9E3 solid thin;}

/* ~~ tabela pytania ~~ */
#pytania img {margin: 20px auto;}
#pytania p {text-align: center; margin-bottom: 10px; color: #06C;}
#pytania table {margin: 0 auto; padding: 10px; width: 800px;}
#pytania table th {padding: 8px; text-align: center; font-size: 1.2em; border: #00A9E3 solid thin;}
#pytania table td {padding: 8px; text-align: left; font-size: 1.1em; border: #00A9E3 solid thin;}
#pytania table #nr {width: 25px; text-align: center;}

#loader {width: 50px; height: 50px; margin: 0px auto; position: absolute; margin-top:-84px; margin-left: 630px;}

/* ~~ tabela pytania baza ~~ */
#pytania-baza table {margin: 0 auto; padding: 10px; width: 900px;}
#pytania-baza table th {padding: 8px; text-align: center; font-size: 0.9em; border: #00A9E3 solid thin;}
#pytania-baza table td {padding: 8px; text-align: left; font-size: 0.8em; border: #00A9E3 solid thin;}
#pytania-baza table td.kol {width: 25px; text-align: center;}
#pytania-baza table td.edycja {width: 35px; text-align: center;}
#pytania-baza table td.usun {width: 35px; text-align: center;}

/* ~~ formularz wagi ocen ~~ */
#wagi p {text-align: center; margin-bottom: 10px; color: #06C;}
#wagi table {margin: 0 auto; min-width: 470px; padding: 10px;}
#wagi table th {padding: 5px; text-align: right; font-size: 1.2em; width: 60px; border: #00A9E3 solid thin}
#wagi table td {width: 20px; border: #00A9E3 solid thin; padding: 3px; text-align: center;}
#wagi select {margin: 10px auto; padding: 3px; width: 45px;}
#wagi input[type="submit"]{width: 220px; margin: 10px auto; display: block;}

/* ~~ logowanie ~~ */
p.success {margin-top: 10px; margin-bottom: -40px; color: #339966; text-align: center; font-size: 1em;}
p.warning {margin-top: 10px; margin-bottom: -40px;color: #FF9900; text-align: center; font-size: 1em;}
p.error {margin-top: 10px; margin-bottom: -40px; color: #FF0000; text-align: center; font-size: 1em;}
.logowanie label {font-size: 1em; padding: 10px 0;}
.logowanie input[type="text"]{margin: 10px 0;padding: 2.2px; width: 170px; text-align: center;}
.logowanie input[type="password"]{margin: 10px 0;padding: 2.2px; width: 170px; text-align: center;}
.logowanie input[type="submit"]{width: 150px; margin: 10px auto; display: block;}

/* ~~ wynik obliczeń średniej ważonej ~~ */
#wynik p {text-align: center; margin-bottom: 10px; color: #06C;}
#wynik table {margin: 0 auto; min-width: 450px;}
#wynik table th {border: #00A9E3 solid thin; padding: 10px; text-align: left; font-size: 1.2em;}
#wynik table #srednia {background: #DEE9F3; text-align: center;}
#wynik table td {border: #00A9E3 solid thin; width: 50px; text-align: center; font-size: 1.2em;}

/* ~~ ramka iframes ~~*/
iframe {
	margin-left: 22px;
	border: none;
	height: auto;
	width: 890px;
}
/* ~~ ramka iframes ~~*/
#brick-buster {
	margin-left: 22px;
	border: none;
	height: 680px;
	width: 890px;
}

/* ~~ forma dla konwersji ~~*/
.konwersja fieldset{
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	border: #00A9E3 solid thin; 
	width: 620px;
	padding: 10px;
	font-size: 1.2em;
}

.konwersja legend {
	margin: 0 10px;
	font-weight: bold;
	color:#06C;
}

.konwersja input[type=text]{
	border: #00A9E3 solid thin;
	width: 200px;
	height: 26px;
}

.konwersja input[type=radio]{
	margin-left: 5px;
	cursor: pointer;
}
.punkty input[type=radio]{
	cursor: pointer;
}

.konwersja button{
	background-color: #99CCFF;
	border: none;
	color: #005A93;
	padding: 8px 25px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 0.9em;
	font-weight: bold;
	cursor: pointer;
}

#konwersja-form{
	text-align: center;	
}

#konwersja-wybor{
	text-align: center;	
}

#konwersja-wynik p {
	margin-top: 5px;
	font-size: 1em;
	text-align: center;
	font-weight: bold;
}

/* ~~ forma dla konwersji ~~*/
.kalkulator fieldset{
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	border: #00A9E3 solid thin; 
	width: 620px;
	padding: 10px;
	font-size: 1.2em;
}

.kalkulator legend {
	margin: 0 10px;
	font-weight: bold;
	color:#06C;
}

.kalkulator input[type=text]{
	border: #00A9E3 solid thin;
	width: 200px;
	height: 26px;
}

.kalkulator input[type=radio]{
	margin-left: 5px;
	cursor: pointer;
}

.kalkulator button{
	background-color: #99CCFF;
	border: none;
	color: #005A93;
	padding: 8px 25px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 0.9em;
	font-weight: bold;
	cursor: pointer;
}

#kalkulator-form{
	text-align: center;	
}

#kalkulator-wybor{
	text-align: center;	
}

#kalkulator-wynik p {
	margin-top: 5px;
	font-size: 1em;
	text-align: center;
	font-weight: bold;
}

/* ~~ przycisk do góry ~~ */
.backToTop {padding: 15px 25px; border: none; border-radius: 10px; background: rgba(158, 209, 236,0.8); opacity: 1; -webkit-transition: visibility 0.2s, opacity 0.2s; transition: visibility 0.2s, opacity 0.2s; position: fixed; bottom: 30px; right: 30px; cursor: pointer; font: 14px/1 Tahoma, Arial, sans-serif; color: #006583;}
.backToTop.hidden {opacity: 0; visibility: hidden;}

/* ~~ stopka aplikacji~~ */
footer.apk {background-color: #FFF; margin: 0px 20px 0 20px; color: #333; clear: both; padding: 15px 0;}
footer.apk p {text-align: right; margin-right: 5px;}

/* ~~ stopka ~~ */
footer {background-color: #F0F8FF; margin: 20px 20px 0 20px; color: #333; clear: both; padding: 15px 0;}
footer p {text-align: right; margin-right: 15px;}