@charset "utf-8";

body {
	margin: 0;
	padding: 0;
	color: #000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height: 1.4;
	display: block;
	background-color: #000000;
}

/* ~~ Selektory elementu/tagu ~~ */
ul, ol, dl { /* Vzhledem k odlišnosti jednotlivých prohlížečů je vhodné používat v seznamech nulové odsazení a okraje. Aby nedocházelo k odchylkám, můžete hodnoty zadat buď zde nebo u položek seznamu (LI, DT, DD). Pamatujte, že pokud neurčíte konkrétnější selektor, budou zde provedené úpravy přeneseny do seznamu .nav. */
	padding: 0;
	margin: 0;
}
h1, h3, h5, h6, p   {
	margin-top: 0;	 /* Odebráním horního okraje se můžete vyhnout situaci, kdy okraje přesáhnou určený element div. Zbývající spodní okraj zajistí oddělení od všech následujících elementů. */
	padding-right: 15px;
	padding-left: 15px;
	color: #900;
	font-family: "Times New Roman", Times, serif;
	font-weight: bolder;
	font-size: 36px;
	font-style: italic;
}
 h2, p {
	color: #FFF;
	font-size: 24px;
	font-weight: normal;
	font-style: italic;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	left: auto;
	text-decoration: blink;
}
a img { /* Tento selektor umožňuje odebrat výchozí modré okraje, které v některých prohlížečích obklopují obrazy, v jejichž blízkosti se nachází odkaz. */
	opacity: 1
    border-style: dotted 
    border-color: #C90 
    background-color: #F30 
    box-shadow:#33F
    transform: scale(1,5)
    transition: 3s;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 18px;
	font-style: italic;
	font-weight: 200;
	font-variant: normal;
	background-position: left top;
	display: inline;
	padding: 10px;
	margin: 10px;
	background-attachment: fixed;
	
}
/* ~~ Při tvorbě odkazů na stránce je třeba respektovat toto pořadí �?včetně skupiny selektorů použitých k vytvoření efektu najetí kurzorem. ~~ */
a:link {
	color: #CCCCCC;
	font-size: 26px;
	font-style: italic;
	font-weight: 300;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	-webkit-transition: all 0s ease 0s;
	-moz-transition: all 0s ease 0s;
	-ms-transition: all 0s ease 0s;
	-o-transition: all 0s ease 0s;
	transition: all 0s ease 0s;
	text-decoration: none;
	text-transform: capitalize;
}
a:visited {
	color: #CCCCCC;
	text-decoration: overline;
}
a:hover, a:active, a:focus { /* S touto skupinou selektorů můžete uživateli s klávesnicí zajistit stejný efekt najetí kurzorem, jako v případě uživatelů používajících myš. */
	text-decoration: none;
}

/* ~~ Tento kontejner s pevnou šířkou obklopuje ostatní elementy div.~~ */
.container {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 24px;
	font-style: italic;
	font-weight: normal;
	color: #000000;
	position: relative;
	background-color: #000;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	height: 550px;
	width: 690px;
}

/* ~~ U záhlaví není určena jeho šířka a bude roztaženo na celou šířku rozvržení. Obsahuje vyhrazené místo pro obraz, do kterého je třeba vložit odkaz na vlastní logo. ~~ */
.header {
	-webkit-transition: all 0s 0s;
	-moz-transition: all 0s 0s;
	-ms-transition: all 0s 0s;
	-o-transition: all 0s 0s;
	transition: all 0s 0s;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 20px;
	font-style: italic;
	font-weight: 200;
	color: #666;
	font-variant: normal;
	display: inline-block;
	position: fixed;
	background-position: left top;
	top: 200px;
	width: 100%;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

/* ~~ Sloupce rozvržení ~~ 

1) Odsazení je použito pouze v horní a/nebo spodní části elementů div. Elementy vnořené v elementech div obsahují odsazení po stranách. Tímto způsobem není třeba „počítat�?rámečkový model. Je třeba si uvědomit, že pokud k samotnému elementu div přidáte boční odsazení nebo okraj, budou tyto hodnoty spolu se zadanou šířkou použity k určení *celkové* šířky. Postupovat můžete také tak, že z elementu div odstraníte hodnotu odsazení a přidáte do něj druhý element div bez zadané šířky a s odsazením, které ve vašem návrhu chcete použít.

2) Všechny sloupce jsou plovoucí a neobsahují tedy žádné okraje. Pokud je přidání okrajů nezbytné, nevkládejte je ve směru, ve kterém budou plout (např. pravý okraj u elementu div, který bude plout vpravo). V mnoha případech lze místo toho použít odsazení. V případě elementů div, kde toto pravidlo nelze dodržet, použijte v pravidlech elementu div příkaz „display:inline�? Zabráníte tak výskytu chyby, která u některých verzí prohlížeče Internet Explorer způsobuje zdvojení okrajů.

3) Vzhledem k tomu, že třídy mohou být v dokumentu použity několikrát (stejně tak několik tříd může být použito na jeden element), jsou sloupce označeny názvem třídy namísto ID. Např. dva elementy div pro boční sloupce můžete podle potřeby vrstvit na sebe. Pokud vám více vyhovuje označení pomocí ID, můžete toto nastavení snadno změnit s podmínkou, že každé ID bude v dokumentu použito pouze jednou.

4) Chcete-li navigační prvky umístit na levé straně namísto na pravé, stačí nechat tyto sloupce plout v opačném směru (všechny vpravo, ne vlevo). Budou tak zobrazeny v opačném pořadí a není potřeba elementy div přesouvat ve zdrojovém kódu HTML.

*/
.sidebar1 {
	left: 870px;
	position: absolute;
	top: 80px;
	clear: both;
	background-position: left bottom;
	height: 50px;
	width: 800px;
	padding: 20px;
	margin: auto;
	display: inline;
	background-attachment: fixed;	
}
.content {
	-webkit-transition: all 0s 0s;
	-moz-transition: all 0s 0s;
	-ms-transition: all 0s 0s;
	-o-transition: all 0s 0s;
	transition: all 0s 0s;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 20px;
	font-style: italic;
	font-weight: 200;
	color: #666;
	font-variant: normal;
	display: inline-block;
	position: absolute;
	background-position: left bottom;
	top: 650px;
	left: 200px;
	width: 1620px;
}

/* ~~ Tato skupina selektorů slouží k vytvoření seznamů v oblasti elementu .content. ~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* Toto odsazení imituje vzhled pravého odsazení ve výše uvedeném pravidle záhlaví a odstavce. Odsazení se nachází ve spodní části, aby v prostoru mezi ostatními elementy v seznamech a v levé části vytvořilo odrážku. Toto nastavení může být podle potřeby upraveno. */
}

/* ~~ Styly navigačních seznamů (pokud se rozhodnete použít předem připravenou rozbalovací nabídku Spry) ~~ */
ul.nav {
	list-style: none;
	clear: both;
	border-top-color: #CCC;
	-webkit-transition: all;
	-moz-transition: all;
	-ms-transition: all;
	-o-transition: all;
	transition: all;
	color: #CCC;
}
ul.nav li {
	color: #FFF;
}
ul.nav a, ul.nav a:visited { /* Při seskupování těchto selektorů dbejte, aby si odkazy zachovaly vzhled tlačítka i po otevření. */
	width: auto;
	color: #CCCCCC;
	-webkit-transition: all 0s ease 0s;
	-moz-transition: all 0s ease 0s;
	-ms-transition: all 0s ease 0s;
	-o-transition: all 0s ease 0s;
	transition: all 0s ease 0s;
	font-size: 16px;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	height: auto;
	font-style: italic;
	font-weight: 200;
	font-variant: normal;
	display: inline;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* Slouží ke změně pozadí a barvy textu u navigačních prvků pro myš i klávesnici. */
	color: #960;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	-webkit-transition: all 1s ease 1s;
	-moz-transition: all 1s ease 1s;
	-ms-transition: all 1s ease 1s;
	-o-transition: all 1s ease 1s;
	transition: all 1s ease 1s;
	text-align: center;
	font-size: 24px;
	text-transform: capitalize;
	text-decoration: underline;
	-moz-border-end-color: #960;
}
/* ~~ Zápatí ~~ */
.footer {
	position: absolute;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 24px;
	font-style: italic;
	font-weight: normal;
	color: #CCCCCC;
	left: 120px;
	top: 600px;
	background-position: left top;
	width: 800px;
	height: 400px;
}

/* ~~ Různé třídy plovoucích elementů, vymazání elementů ~~ */
.fltrt {  /* Tuto třídu můžete použít k umístění plovoucího elementu v pravé části stránky. Plovoucí element se musí nacházet před elementem, vedle kterého má být na stránce umístěn. */
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: xx-small;
	color: rgb(255,255,255);
	width: 100%;
	font-style: italic;
	height: 500px;
	background-position: 80% 20%;
	top: 200px;
	position: absolute;
}
.fltlft { /* Tuto třídu můžete použít k umístění plovoucího elementu v levé části stránky. Plovoucí element se musí nacházet před elementem, vedle kterého má být na stránce umístěn. */
	color: rgb(102,0,0);
	border: medium groove #C90;
	margin-top: 20px;
	margin-left: 500px;
	width: 800px;
	height: 400px;
	position: relative;
}
.clearfloat { /* Pokud je z kontejneru odebrán element .footer, můžete tuto třídu aplikovat na prázdný element div nebo <br /> jako konečný element po posledním plovoucím elementu div (v rámci kontejneru). */
	position: absolute;
	left: 200px;
	width: 1420px;
	height: 300px;
	top: 2000px;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 24px;
	font-style: italic;
	font-weight: 200;
	color: #963;
	background-position: left bottom;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 20px;
}
.logo {
	-webkit-transition: all 0s 0s;
	-moz-transition: all 0s 0s;
	-ms-transition: all 0s 0s;
	-o-transition: all 0s 0s;
	transition: all 0s 0s;
	background-position: left bottom;
	position: absolute;
	width: 1720px;
	left: 200px;
	height: auto;
	background-color: rgb(255,255,255);
}
h4 {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 36px;
	font-style: italic;
	font-weight: lighter;
	color: rgb(204,204,204);
	text-transform: capitalize;
	font-variant: small-caps;
	line-height: normal;
	left: 150px;
	position: absolute;
	height: 100px;
	width: 300px;
	top: 70px;
	vertical-align: text-bottom;
	text-align: justify;
	display: inline-block;
}
.slideshow {
	-webkit-transition: all 0s 0s;
	-moz-transition: all 0s 0s;
	-ms-transition: all 0s 0s;
	-o-transition: all 0s 0s;
	transition: all 0s 0s;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 20px;
	font-style: italic;
	font-weight: 200;
	color: #666;
	font-variant: normal;
	display: inline-block;
	position: absolute;
	background-position: left bottom;
	top: 500px;
	left: 200px;
	width: 1620px;
}
.background {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 36px;
	text-transform: capitalize;
	color: #FFF;
	width: 1920px;
	position: fixed;
	background-color: #FFF;
	background-position: left top;
	border-top-color: #000;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
	height: 100%;
}
.blog1 {
	font-size: 30px;
	color: #FFF;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-style: italic;
	font-weight: 200;
	position: absolute;
	top: 500px;
	left: 150px;
	font-variant: normal;
	background-position: left bottom;
	display: inline;
}
.box {
	background-position: left top;
	color: #000;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 18px;
	font-style: italic;
	font-weight: lighter;
	font-variant: small-caps;
	position: absolute;
	border-radius: 5px;
	box-shadow: 1px 1px 30px #1c2228;
	height: 300px;
	width: 450px;
	top: 120px;
	clip: rect(auto,auto,auto,auto);
	margin: auto;
	border-top-color: #000;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
	left: 650px;
	vertical-align: middle;
	text-align: left;
	letter-spacing: normal;
	white-space: normal;
	display: table-column;
}
.box2 {
	height: auto;
	background-position: left top;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 24px;
	font-style: italic;
	font-weight: 200;
	font-variant: normal;
	color: #963;
	position: absolute;
	top: 900px;
	border-radius: 5px;
	box-shadow: 1px 1px 30px #1c2228;
	display: inline;
	margin: auto;
	left: 120px;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 50px;
	width: 1600px;
}
.name {
	position: absolute;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 36px;
	font-style: italic;
	font-weight: bolder;
	font-variant: small-caps;
	text-transform: capitalize;
	color: #FFFFFF;
	left: 150px;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
	top: 20px;
}
.line {
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #960;
	position: absolute;
	height: 20px;
	width: 1620px;
	left: 150px;
	top: 80px;
	background-position: left top;

.dotstyle-dotmove li:last-child {
	position: absolute;
	left: 0;
	margin: 0;
	width: 48px;
	-webkit-transition: -webkit-transform 0.3s ease;
	transition: transform 0.3s ease;
}