/* CSS Document */
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #4E5869;
	margin: 0;
	padding: 0;
	color: #000F;
	background-color: #FFF;
}
a:link {
	color: #FFF;
	text-decoration: none;
}
a:visited {
	color: #FFF;
	text-decoration: none;
}
a:hover {
	color: #999;
	text-decoration: none;
}
a:active {
	color: #999;
	text-decoration: none;
}

/* ~~ Selektory elementów i znaczników ~~ */
ul, ol, dl { /* Ze względu na różnice w zachowaniu przeglądarek, dobrą praktyką jest używanie marginesów i odstępów wewnętrznych o zerowej szerokości dla elementów typu lista. Aby ułatwić sobie zachowanie spójności, można określić pożądane wartości albo tutaj, albo w parametrach elementów listy (LI, DT, DD). Pamiętaj, że wszelkie wprowadzone tu wartości zostaną przeniesione kaskadowo na listy klasy .nav, chyba że utworzysz bardziej wyspecjalizowany selektor. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* Usunięcie górnego marginesu pozwala obejść problem związany z uciekaniem marginesów z bloku DIV, w którym są zawarte. Pozostały margines dolny zapewni odstęp od kolejnych elementów. */
	padding-right: 15px;
	padding-left: 15px; /* Dodanie bocznych odstępów wewnętrznych (właściwość "padding") do elementów umieszczanych wewnątrz bloku DIV — zamiast do samego bloku DIV — pozwala uniknąć konieczności przeprowadzania obliczeń położenia w modelu blokowym. Alternatywną metodą jest użycie zagnieżdżonego bloku DIV z odstępami wewnętrznymi po bokach. */
}
a img { /* Ten selektor usuwa domyślną, niebieską ramkę, wyświetlaną przez niektóre przeglądarki wokół obrazków otoczonych łączem. */
	border: none;
}

/* ~~ Ostylowanie łączy serwisu musi być definiowane w podanej tu kolejności. Dotyczy to również grupy selektorów odpowiedzialnych za efekt "hover" (zmianę wyglądu łącza po umieszczeniu nad nim kursora) ~~ */

a:hover, a:active, a:focus { /* Ta grupa selektorów jest odpowiedzialna za stworzenie efektu "hover" przy nawigacji za pomocą klawiatury, identycznego z efektem uzyskiwanym przez użytkownika korzystającego z myszy. */
	text-decoration: none;
	color: #FFF;
}

/* ~~ Ten kontener otacza wszystkie pozostałe bloki DIV, określając ich szerokość jako wartość procentową. ~~ */
.container {
	width: 100%;
	max-width: 1920px;/* Warto ustawić maksymalną szerokość, aby uniknąć zbytniego rozszerzania się układu na dużym monitorze. Zapewnia to lepszą czytelność (wiersze są krótsze). Program IE6 nie obsługuje tej deklaracji. */
	min-width: 120px;/* Warto ustawić minimalną szerokość, aby uniknąć nadmiernego zwężania się układu. Zapewnia to lepszą czytelność (korzystniejszą długość wierszy) w kolumnach bocznych. Program IE6 nie obsługuje tej deklaracji. */
	background:none;
	margin: auto; /* Wartość "auto" po bokach z w połączeniu z określoną szerokością zapewnia wyśrodkowanie układu. Nie jest to konieczne, jeśli szerokość bloku .container ustawi się na 100%. */
}

/* ~~ Informacje dotyczące układu ~~ 

1) Odstępy wewnętrzne (właściwość "padding") dodaje się tylko na górze i/lub na dole bloku DIV. Elementy wewnątrz tego bloku DIV mają odstępy wewnętrzne po bokach. Pozwala to uniknąć konieczności skomplikowanego obliczania położenia w modelu blokowym. Należy pamiętać, że jeśli zdefiniujesz odstępy wewnętrzne lub krawędzie po bokach dla bloku DIV, to zostaną one dodane do zdefiniowanej szerokości bloku. Dlatego ostateczna szerokość całego bloku będzie inna. Możesz również usunąć odstępy wewnętrzne z elementu zawartego w bloku DIV i umieścić go w kolejnym bloku DIV bez zdefiniowanej szerokości, ale z podanymi odstępami wewnętrznymi.

*/
.content {
	padding: 5px 0;
}

/* ~~ Ten selektor grupowy obsługuje listy w bloku .content ~~ */
.content ul, .content ol { 
	padding: 0 5px 5px 10px; /* Ten odstęp wewnętrzny jest odzwierciedleniem odstępu wewnętrznego z prawej, zdefiniowanego wcześniej w regule dla nagłówków i akapitów. Odstęp wewnętrzny na dole zapewnia odpowiednie odległości od innych elementów listy. Odstęp wewnętrzny z lewej tworzy wcięcie. Wartości te można swobodnie dostosowywać. */
}

/* ~~ Różne klasy float/clear ~~ */
.fltrt {  /* Ta klasa umożliwia tworzenie elementów pływających z prawej strony (właściwość "float:right"). Element pływający musi poprzedzać w kodzie element, obok którego ma się znajdować na stronie. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* Ta klasa umożliwia tworzenie elementów pływających z lewej strony (właściwość "float:left"). Element pływający musi poprzedzać w kodzie element, obok którego ma się znajdować na stronie. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* Tę klasę można wykorzystać w znaczniku <br /> lub pustym bloku DIV, który stanowi ostatni element za ostatnim pływającym blokiem DIV (wewnątrz bloku o identyfikatorze #container), jeśli z klasy .container usunięto właściwość "overflow:hidden". */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
a.pic {

	display:inline-block;
	cursor:help;
	font-size:10px;
	font-weight:bold;
	padding:2px 6px;
	text-decoration:none;
}  
   a.pic span {
	display:none;
	padding:2px 3px;
	margin-left:8px;
	width:auto;
	}

 a.pic:hover span{
	display:inline;
	position:absolute;
	border:1px solid #000;
	color:#000;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	background-color: #FF9;
	text-align:left;
	   } 
a.info {
	-moz-box-shadow:inset 0px 0px 0px 0px #696469;
	-webkit-box-shadow:inset 0px 0px 0px 0px #696469;
	box-shadow:inset 0px 0px 0px 0px #696469;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #FFF), color-stop(1, #F90));
	background:-moz-linear-gradient(top, #FFF 5%, #F90 100%);
	background:-webkit-linear-gradient(top, #FFF 5%, #F90 100%);
	background:-o-linear-gradient(top, #FFF 5%, #F90 100%);
	background:-ms-linear-gradient(top, #FFF 5%, #F90 100%);
	background:linear-gradient(to bottom, #FFF 5%, #F90 100%);

	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF', endColorstr='#F90',GradientType=0);
	background-color:#F90;
	-moz-border-radius:10px;
	-webkit-border-radius:42px;
	border-radius:42px;
	border:1px solid #292929;
	display:inline-block;
	cursor:help;
	color:#000;
	font-family:arial;
	font-size:10px;
	font-weight:bold;
	padding:2px 6px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d3b3d;
}  
   a.info span {
	display:none;
	padding:2px 3px;
	margin-left:8px;
	width:auto;
	}

 a.info:hover span{
	display:inline;
	position:absolute;
	border:1px solid #000;
	color:#000;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	background-color: #FF9;
	text-align:left;
	   } 
a.impo {
	-moz-box-shadow:inset 0px 0px 0px 0px #696469;
	-webkit-box-shadow:inset 0px 0px 0px 0px #696469;
	box-shadow:inset 0px 0px 0px 0px #696469;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #FFF), color-stop(1, #F00));
	background:-moz-linear-gradient(top, #FFF 5%, #F00 100%);
	background:-webkit-linear-gradient(top, #FFF 5%, #F00 100%);
	background:-o-linear-gradient(top, #FFF 5%, #F00 100%);
	background:-ms-linear-gradient(top, #FFF 5%, #F00 100%);
	background:linear-gradient(to bottom, #FFF 5%, #F00 100%);

	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF', endColorstr='#F90',GradientType=0);
	background-color:#F00;
	-moz-border-radius:10px;
	-webkit-border-radius:42px;
	border-radius:42px;
	border:1px solid #000000;
	display:inline-block;
	cursor:help;
	color:#000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight:bold;
	padding:2px 7px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d3b3d;
}
a.impo span {
	display:none;
	padding:2px 3px;
	margin-left:8px;
	width:auto;
	}

 a.impo:hover span{
	display:inline;
	position:absolute;
	border:1px solid #000;
	color:#000;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	text-align:left;
	background-color: #FF8282;
	   } 
.myButton {
	-moz-box-shadow:inset 0px 0px 0px 0px #696469;
	-webkit-box-shadow:inset 0px 0px 0px 0px #696469;
	box-shadow:inset 0px 0px 0px 0px #696469;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #b8b8b8));
	background:-moz-linear-gradient(top, #000000 5%, #b8b8b8 100%);
	background:-webkit-linear-gradient(top, #000000 5%, #b8b8b8 100%);
	background:-o-linear-gradient(top, #000000 5%, #b8b8b8 100%);
	background:-ms-linear-gradient(top, #000000 5%, #b8b8b8 100%);
	background:linear-gradient(to bottom, #000000 5%, #b8b8b8 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#b8b8b8',GradientType=0);
	background-color:#000000;
	-moz-border-radius:42px;
	-webkit-border-radius:42px;
	border-radius:42px;
	border:3px solid #292929;
	display:inline-block;
	cursor:pointer;
	color:#FFF;
	font-family:arial;
	font-size:inherit;
	font-weight:normal;
	padding:5px 35px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d3b3d;
	min-width: 200px;
	max-width: 200px;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #b8b8b8), color-stop(1, #000000));
	background:-moz-linear-gradient(top, #b8b8b8 5%, #000000 100%);
	background:-webkit-linear-gradient(top, #b8b8b8 5%, #000000 100%);
	background:-o-linear-gradient(top, #b8b8b8 5%, #000000 100%);
	background:-ms-linear-gradient(top, #b8b8b8 5%, #000000 100%);
	background:linear-gradient(to bottom, #b8b8b8 5%, #000000 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8b8b8', endColorstr='#000000',GradientType=0);
	background-color:#FFF;
	text-decoration: none;
}
.myButton:active {
	position:relative;
	top:1px;
	color: #FFF;
	text-decoration: none;
}
.mySmallButton {
	-moz-box-shadow:inset 0px 0px 0px 0px #696469;
	-webkit-box-shadow:inset 0px 0px 0px 0px #696469;
	box-shadow:inset 0px 0px 0px 0px #696469;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #b8b8b8));
	background:-moz-linear-gradient(top, #000000 5%, #b8b8b8 100%);
	background:-webkit-linear-gradient(top, #000000 5%, #b8b8b8 100%);
	background:-o-linear-gradient(top, #000000 5%, #b8b8b8 100%);
	background:-ms-linear-gradient(top, #000000 5%, #b8b8b8 100%);
	background:linear-gradient(to bottom, #000000 5%, #b8b8b8 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#b8b8b8',GradientType=0);
	background-color:#000000;
	-moz-border-radius:42px;
	-webkit-border-radius:42px;
	border-radius:42px;
	border:3px solid #292929;
	display:inline-block;
	cursor:pointer;
	color:#FFF;
	font-family:arial;
	font-size:12px;
	font-weight:normal;
	padding:4px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d3b3d;
}
.mySmallButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #b8b8b8), color-stop(1, #000000));
	background:-moz-linear-gradient(top, #b8b8b8 5%, #000000 100%);
	background:-webkit-linear-gradient(top, #b8b8b8 5%, #000000 100%);
	background:-o-linear-gradient(top, #b8b8b8 5%, #000000 100%);
	background:-ms-linear-gradient(top, #b8b8b8 5%, #000000 100%);
	background:linear-gradient(to bottom, #b8b8b8 5%, #000000 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8b8b8', endColorstr='#000000',GradientType=0);
	background-color:#FFF;
	text-decoration: none;
}
.mySmallButton:active {
	position:relative;
	top:1px;
	color: #FFF;
	text-decoration: none;
}
.myButtonNA {
	-moz-box-shadow:inset 0px 0px 0px 0px #696469;
	-webkit-box-shadow:inset 0px 0px 0px 0px #696469;
	box-shadow:inset 0px 0px 0px 0px #696469;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #b8b8b8));
	background:-moz-linear-gradient(top, #000000 5%, #b8b8b8 100%);
	background:-webkit-linear-gradient(top, #000000 5%, #b8b8b8 100%);
	background:-o-linear-gradient(top, #000000 5%, #b8b8b8 100%);
	background:-ms-linear-gradient(top, #000000 5%, #b8b8b8 100%);
	background:linear-gradient(to bottom, #CCC 5%, #FFF 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#b8b8b8',GradientType=0);
	background-color:#CCC;
	-moz-border-radius:42px;
	-webkit-border-radius:42px;
	border-radius:42px;
	border:3px solid #292929;
	display:inline-block;
	cursor:pointer;
	color:#999;
	font-family:arial;
	font-size:inherit;
	font-weight:inherit;
	padding:5px 35px;
	text-decoration:inherit;
	text-shadow:0px 1px 0px #3d3b3d;
	min-width: 200px;
	max-width: 200px;
}
.myButtonNA:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #b8b8b8), color-stop(1, #000000));
	background:-moz-linear-gradient(top, #b8b8b8 5%, #000000 100%);
	background:-webkit-linear-gradient(top, #b8b8b8 5%, #000000 100%);
	background:-o-linear-gradient(top, #b8b8b8 5%, #000000 100%);
	background:-ms-linear-gradient(top, #b8b8b8 5%, #000000 100%);
	background:linear-gradient(to bottom, #b8b8b8 5%, #000000 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8b8b8', endColorstr='#000000',GradientType=0);
	background-color:#FFF;
	text-decoration: none;
}
.myButtonNA:active {
	position:relative;
	top:1px;
	color: #FFF;
	text-decoration: none;
}.circleGold {
	-moz-box-shadow: 5px 8px 9px 1px #0f0f0f;
	-webkit-box-shadow: 5px 8px 9px 1px #0f0f0f;
	box-shadow: 5px 8px 9px 1px #0f0f0f;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffdb), color-stop(1, #b8b812));
	background:-moz-linear-gradient(top, #ffffdb 5%, #b8b812 100%);
	background:-webkit-linear-gradient(top, #ffffdb 5%, #b8b812 100%);
	background:-o-linear-gradient(top, #ffffdb 5%, #b8b812 100%);
	background:-ms-linear-gradient(top, #ffffdb 5%, #b8b812 100%);
	background:linear-gradient(to bottom, #ffffdb 5%, #b8b812 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffdb', endColorstr='#b8b812',GradientType=0);
	background-color:#ffffdb;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
	border:3px solid #aba419;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	padding:8px 28px;
	text-decoration:none;
	text-shadow:1px 1px 2px #171a17;
}
.circleGold:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #b8b812), color-stop(1, #ffffdb));
	background:-moz-linear-gradient(top, #b8b812 5%, #ffffdb 100%);
	background:-webkit-linear-gradient(top, #b8b812 5%, #ffffdb 100%);
	background:-o-linear-gradient(top, #b8b812 5%, #ffffdb 100%);
	background:-ms-linear-gradient(top, #b8b812 5%, #ffffdb 100%);
	background:linear-gradient(to bottom, #b8b812 5%, #ffffdb 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8b812', endColorstr='#ffffdb',GradientType=0);
	background-color:#b8b812;
}
.circleGold:active {
	position:relative;
	top:1px;
}
.nameTop {
	-moz-box-shadow: 0px 12px 26px -8px #276873;
	-webkit-box-shadow: 0px 12px 26px -8px #276873;
	box-shadow: 0px 12px 26px -8px #276873;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #264a57), color-stop(1, #ffffff));
	background:-moz-linear-gradient(top, #264a57 5%, #ffffff 100%);
	background:-webkit-linear-gradient(top, #264a57 5%, #ffffff 100%);
	background:-o-linear-gradient(top, #264a57 5%, #ffffff 100%);
	background:-ms-linear-gradient(top, #264a57 5%, #ffffff 100%);
	background:linear-gradient(to bottom, #264a57 5%, #ffffff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#264a57', endColorstr='#ffffff',GradientType=0);
	background-color:#264a57;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	display:inline-block;
	cursor:auto;
	color:#e3eba4;
	font-family:arial;
	font-size:35px;
	font-weight:bold;
	padding:6px 2%;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
	width: 90%;
	text-align: center;
}
.regular-checkbox {
	display: none;
}

.regular-checkbox + label {
	background-color: #fafafa;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 9px;
	border-radius: 3px;
	display: inline-block;
	position: relative;
}

.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.regular-checkbox:checked + label {
	background-color: #e9ecee;
	border: 1px solid #adb8c0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	color: #99a1a7;
}

.regular-checkbox:checked + label:after {
	content: '\2714';
	font-size: 14px;
	position: absolute;
	top: 0px;
	left: 3px;
	color: #99a1a7;
}


.big-checkbox + label {
	padding: 28px;
}

.big-checkbox:checked + label:after {
	font-size: 38px;
	left: 6px;
}

.tag {
	font-family: Arial, sans-serif;
	width: 200px;
	position: relative;
	top: 5px;
	font-weight: bold;
	text-transform: uppercase;
	display: block;
	float: left;
}

.radio-1 {
	width: 193px;
}

.button-holder {
	float: left;
}