/* GLOBAL */

a {
	color: #3975AF
}

a:hover {
	color: #579BDD
}

h4 {
	margin-bottom: 0
}

h2,
h3 {
	text-align: left
}

textarea {
	width: 270px;
	height: 65px;
	max-width: 1000px;
	max-height: 1000px
}

img {
	border: 0
}

table {
	border-collapse: collapse;
	text-align: left
}

table td.empty {
	display: none
}

header,
main,
footer,
nav {
	display: block
}

* {
	transition: color .2s;
	box-sizing: border-box
}

body.loading {
	cursor: progress
}


/* LAYOUT */

html,
body {
	margin: 0;
	padding: 0
}

body {
	min-width: 280px;
	font-family: 'Trebuchet MS', 'Arial', sans-serif;
	background-image: url(../images/bg.png)
}

/* Background pattern from subtlepatterns.com - http://subtlepatterns.com/paper-fibers/ */
html,
body,
#wrapper {
	height: 100%
}

#wrapper {
	height: auto;
	min-height: 100%;
	margin-bottom: -75px
}

header .content,
main {
	max-width: 1000px
}

/* HEADER + FOOTER */

header,
footer {
	width: 100%;
	background-color: #3975AF;
	color: white
}

header a,
footer a {
	color: white
}

header a:hover,
footer a:hover {
	color: #C5D7E8
}

header {
	height: 100px;
	background-image: url(../images/bg-header.png);
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: center center
}

header a {
	text-decoration: none
}

header .content {
	margin: 0 auto;
	height: 100%
}

header h1 {
	float: left;
	font-size: 3em;
	margin: 0 0 0 7px;
	font-weight: normal;
	line-height: 100px
}

#menu-button {
	display: none;
	padding: 37px 26px 37px 7px;
	box-sizing: content-box;
	cursor: pointer
}

header nav {
	font-size: 20px;
	float: right
}

header nav ul {
	margin: 0;
	padding: 0
}

header nav>ul>li {
	display: inline-block;
	margin: 0 7px
}

header nav>ul>li>a,
header nav>ul>li>div {
	margin-top: 35px;
	line-height: 40px;
	cursor: pointer;
	display: inline-block
}

header nav .submenu {
	display: none;
	margin-top: -10px;
	padding: 8px;
	position: absolute;
	line-height: 20px;
	list-style: none;
	border: 1px solid white;
	background-color: #3975AF;
	font-size: 16px;
	border-radius: 2px
}

header nav .submenu .item {
	display: block;
	margin-bottom: 5px
}

header nav .submenu .item.last {
	margin-bottom: 0
}

header nav li div:hover .submenu {
	display: block
}

footer {
	height: 75px;
	line-height: 75px;
	text-align: center
}

footer .separator {
	color: #6AA0CA
}


/* MAIN */

main {
	margin: 0 auto;
	padding: 10px 10px 95px 10px;
	min-height: 150px;
	text-align: justify;
	opacity: 1;
	transition: opacity .25s;
}

#homepage,
#homepage h2 {
	text-align: center
}

#homepage #logo {
	width: 80%;
	height: auto
}

#loading {
	display: block;
	position: absolute;
	z-index: 1;
	top: 120px;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	opacity: 0;
	transition: opacity .25s;
}

.center {
	text-align: center
}

.half {
	width: 30%;
	display: inline-block
}

.half.left {
	margin-left: 20%
}

.half.right {
	margin-right: 20%
}

.warning {
	color: red
}

#kontakt .invalid {
	background-color: #ECD4D4
}

.cil {
	margin-bottom: 10px
}

.cil.last {
	margin-bottom: 0px
}

.podpis {
	text-align: right;
	font-weight: bold
}

.odkazy {
	font-weight: bold;
	font-size: 1.25em;
	text-align: left
}

.photo-gallery {
	font-size: 50px;
	text-align: left
}

.photo-gallery img {
	border: 1px solid #7A7B7B
}

.datumy td {
	vertical-align: top
}

.datumy .datum {
	width: 100px
}

.graf,
.photo-big {
	display: block;
	border: 1px solid #7A7B7B;
	margin: 0 auto;
	max-width: 60%
}

table.graf {
	display: table
}

.orange {
	background-color: #FDE9D9
}

.yellow {
	background-color: #FFFF00
}

.graf-popis,
.photo-popis {
	text-align: center;
	margin-bottom: 5px
}

.rok {
	font-size: 19px;
	margin-right: 13px
}

.bordertable td,
.bordertable th {
	border: 1px solid #7A7B7B;
	padding: 3px
}

.sponzori {
	text-align: center
}

.sponzori img {
	max-height: 90px;
}

.sponzor {
	display: inline-block;
	margin: 20px;
	vertical-align: middle
}

.sponzor.last {
	margin-right: 0
}

.sponzori .vice-log {
	display: inline-block;
	text-decoration: none;
}

.sponzori .vice-log .sponzor {
	margin-left: 10px;
	margin-right: 10px;
}

.sponzori .vice-log .sponzor:first-child {
	margin-left: 20px;
}

.sponzori .vice-log .sponzor:last-child {
	margin-right: 20px;
}

.sponzori-loga {
	font-size: 0;
}

.sponzori-loga>div {
	display: inline-block;
	width: 50%;
	vertical-align: middle;
	font-size: initial;
}

.sponzori-loga img {
	display: block;
	margin: 0 auto 20px;
}

.sponzori-loga img:last-of-type {
	margin-bottom: 0;
}

#toplist {
	border: 0
}


/* MEDIA QUERIES */

@media (max-width: 1020px) {
	header nav>ul {
		display: block;
		position: absolute;
		top: 100px;
		left: 0;
		right: 0;
		background-color: blue;
		z-index: 10;
		min-width: 353px
	}

	header nav ul.menu-hidden {
		display: none
	}

	header nav>ul>li {
		display: block
	}

	header nav>ul>li {
		background-color: #296BAB
	}

	header nav>ul>li:nth-child(even) {
		background-color: #3975AF
	}

	header nav>ul>li,
	header nav>ul>li>a,
	header nav>ul>li>div {
		margin: 0;
		line-height: 1.2em
	}

	header nav>ul>li>a,
	header nav>ul>li>div {
		padding: 5px 15px
	}

	header nav .submenu {
		position: static;
		display: block;
		margin: 0;
		background: none;
		padding: 0;
		border: 0;
		line-height: 1.2em
	}

	header nav .submenu .item {
		margin: 0;
		padding-left: 10px
	}

	header #menu-button {
		display: block
	}

	.sponzori-loga>div:nth-of-type(2) {
		margin-top: 20px;
	}

	.sponzori-loga>div {
		width: 100%;
	}
}

@media (max-width: 900px) {
	table.style2 {
		width: 150px
	}

	table.style2,
	table.style2 tbody,
	table.style2 tr td {
		display: block
	}

	table.style2 tr {
		width: 50%;
		margin-bottom: 25px;
		display: inline-block;
		vertical-align: top
	}

	table.style2 {
		border: 0
	}

	table.style2 tr:nth-of-type(2n) {
		text-align: right
	}

	table.style2 tr:nth-of-type(2n) td {
		border-left: 0
	}

	table.style2 td {
		border-bottom: 0
	}

	table.style2 td:last-of-type {
		border-bottom: 1px solid #7A7B7B
	}

	table.style2 td:empty {
		display: none
	}
}

@media (max-width: 550px) {
	table.style1 {
		text-align: center
	}

	table.style1,
	table.style1 tbody,
	table.style1 tr,
	table.style1 td {
		display: block;
		width: 200px
	}

	table.style1 td {
		border: 0
	}

	table.style1 thead {
		display: none
	}

	table.style1 tr td:nth-of-type(1) {
		font-size: 1.25em
	}

	table.style1 tr td:nth-of-type(2):before {
		content: "Pondělí: "
	}

	table.style1 tr td:nth-of-type(3):before {
		content: "Úterý: "
	}

	table.style1 tr td:nth-of-type(4):before {
		content: "Středa: "
	}

	table.style1 tr td:nth-of-type(5):before {
		content: "Čtvrtek: "
	}

	table.style1 tr td:nth-of-type(6):before {
		content: "Pátek: "
	}

	table.style1 tr td:nth-of-type(7):before {
		content: "Sobota: "
	}

	table.style1 tr td:nth-of-type(8):before {
		content: "Neděle: "
	}

	table.style3 {
		text-align: center
	}

	table.style3,
	table.style3 tbody,
	table.style3 tfoot,
	table.style3 tr,
	table.style3 tr td:nth-of-type(1) {
		display: block
	}

	table.style3 thead {
		display: none
	}

	table.style3 tr:nth-of-type(4),
	table.style3 tr:nth-of-type(7),
	table.style3 tr:nth-of-type(8) {
		margin-top: 25px
	}

	table.style3,
	table.style3 td {
		border: 0
	}

	table.style3 tr td:nth-of-type(1) {
		font-size: 1.25em
	}

	table.style3 tr td:nth-of-type(2) {
		font-size: 1.125em;
		display: inline-block;
		margin: 5px 0 3px 0
	}

	table.style3 tr td:nth-of-type(1):empty,
	table.style3 tr td:nth-of-type(2):empty {
		display: none
	}

	table.style3 tr td {
		display: inline
	}

	table.style3 tr td:nth-of-type(2n+4):before {
		content: " - "
	}

	table.style3 tr td:nth-of-type(2n+4):after {
		content: " %"
	}

	table.style3 tr td:nth-of-type(2n+4):empty {
		display: none
	}

	table.style3 tr td:nth-of-type(3):before {
		content: "Kanoe:";
		display: block
	}

	table.style3 tr td:nth-of-type(5):before {
		content: "Kajaky:";
		display: block
	}

	table.style3 tr td:nth-of-type(7):before {
		content: "Rafty:";
		display: block
	}

	table.style3 tr td:nth-of-type(9):before {
		content: "Ostatní:";
		display: block
	}

	table.style3 tr td:nth-of-type(11):before {
		content: "Celkem:";
		display: block
	}
}

@media (max-width: 500px) {
	header h1 {
		font-size: 2em
	}

	footer {
		line-height: 1em;
		padding-top: 22px
	}

	footer .separator {
		display: none;
	}

	footer .author {
		display: block
	}
}

@media (max-width: 450px) {
	.sponzor {
		display: block;
		text-align: center
	}
}

@media (max-width: 350px) {
	header h1 {
		font-size: 1.5em
	}
}