body { text-align:center; width:100%; height:100%; padding: 0; margin: 0; font-family: Arial, sans-serif; font-size: 14px; background: rgb(0,23,69); }
a img { border: none; }

.content {
	max-width: 1200px;
	padding: 0;
	margin: 0 auto;
	background-color: #333;
}

.head {
	width: 100%;	
	text-align: left;
	background: #e5e5e5 url(images/top-right.gif) bottom right no-repeat;
	border-bottom: 1px solid red;
}

.head img { max-width: 100%; height: auto; vertical-align: top; }
#content { width:auto; padding: 0 0 5px 0; margin: 0; background: #fff }
h1 { text-align: left; font-size: 24px; color: #990000; padding:0 10px; margin:10px 0 }
.hidden { display:none }
.warning { color: red; }
a:link, a:hover, a:visited { color:black; }

.lang { width: 100%; text-align: right; padding-top:.2em; }
.lang img { width:1.5em; padding-right: .3em; }

/* Kalendář */

#calendar { margin: 0 1em;; }
#months { width:100%; display: flex; flex-wrap: wrap;  }
.months div { flex: 1 0 5em; border:1px solid black; padding: 0; margin: 0; background:rgb(240,240,240) }
.months div.closed { background:gray }
.months .selected a { background:red; color:white; }
#calendar a { display:block; width:100%; padding: 0.5em 0; text-decoration:none }
.months .today { border: 1px solid red; border-left: 2px solid red;  border-right: 2px solid red }
#yearselector { width:100%;border-collapse:collapse }
.years td.selected { background:red; }
.years .selected a { color:white; font-weight: bold }
.years td { border:1px solid black; padding: 5px 10px; margin: 0 }

/*#calendar { margin: 0 1em;; }
#calendar table { width:100%; border-collapse:collapse }
.years { padding: 0; margin: 0; background: white }
.years td { border:1px solid black; padding: 0; margin: 0 }
.years td#pyear, #years td#nyear { width:29px }
.months { padding: 0; margin: 0 }
.months td { width:79px; border:1px solid black; padding: 0; margin: 0; background:rgb(240,240,240) }
.months td.closed { background:gray }
.years .selected { background:rgb(240,240,240) }
.months .selected a { background:red; color:white; }
#calendar a { display:block; width:100%; padding: 0.2em 0; text-decoration:none }
.months .today { border: 1px solid red; border-left: 2px solid red;  border-right: 2px solid red }*/

/* Formulář rezervace */

#inputform { max-width: 40em; margin: 0 auto; }
#inputform fieldset { background: #ebebeb; border: 1px solid #b8c3c3; border-radius: 5px; padding: 1em; margin:1em 0; text-align:left }
#inputform fieldset label { width:12em; display:inline-block; vertical-align: middle; }
#inputform fieldset label { display:table-cell; vertical-align: middle; padding: 3px 0 }
#inputform fieldset label.checkbox { width:auto; vertical-align:top; padding: 0 1em 0 0.5em; }
#inputform fieldset input { margin:0; display:inline-block; vertical-align: middle; }
#inputform p { text-align:left; padding:2px 0; margin:0; min-height:24px; display: table}
#inputform p.checkbox { padding:10px 0 0 0; }
#inputform .checkbox input { float:none; width:15px; height:15px; margin:0; background:white; border:none; text-align:left }
#name, #sname, #address, #comment, #phone, #email, #contact { width:22em }
.hint { border-bottom: 1px dotted gray }
#inputform p.center { text-align: center; margin: 0 auto; }

#inputform fieldset .checkboxblock { text-indent: -25px; padding-left: 25px; }
#inputform fieldset .checkboxblock span { width: 20px; display:inline-block; text-indent: 0; }
#inputform .title { font-weight: bold; }
#inputform .inputformnewsletter { display: none; }
#inputformchoice { position: absolute; top: 2%; width: 97%; text-align: center}
#inputformchoice .title { font-size: 1.5em; }
#inputformchoice .icons { display: flex; flex-wrap: wrap; justify-content: center; }
#inputformchoice button { margin: 1em 1em 1em 0; padding: 1em; flex: 0 1 15em; font-weight: bold; }
#inputformchoice button img { width:100%; height:auto; margin-bottom:1em }

#inputformsubmit { border: 2px solid green; font-weight: bold; color: #fff; background: green; }
#inputform .tours .hint span { font-size: .75em; }

/* Patička */

.foot { clear:both; background: #dddddd; padding-bottom: 10px; background: #333; color: white }
.foot p { margin:0; padding-top:10px; font-size: 80%; border-top: 1px solid gray }
.foot a { text-decoration: underline }

#aggregate { clear:both; padding:0 1em; }
#aggregate table.aggregate { width:100%; background:rgb(235,235,235); }
table.aggregate { border-collapse:collapse; }
.aggregate th { min-width:2em; border: 1px solid black; padding: 0.3em 0 }
.aggregate th.ssunday, .aggregate td.ssunday { background: rgb(255,160,110); }
.aggregate th.sunday, .aggregate td.sunday { color: red; }
.aggregate td { text-align: center; border: 1px solid black; padding: 0; margin: 0; }
.aggregate tr td:first-child { font-weight: bold; width: 4em; padding-left: .3em; text-align: left; }
.aggregate .free { background: #FFFFFF; }
.aggregate .maybe { background: #FFFFFF; font-weight: bold; }
/*.aggregate .czech { background: #FFF196 }*/
.aggregate span.flag { display: inline-block; width:1.5em; height: 1em; margin-left:.2em; }
.aggregate .czech span.flag { background: url('images/lang0f.png') no-repeat top right; background-size: 100% 100%; }
/*.aggregate .foreign { background: #B3DBFF; }*/
.aggregate .lang1 span.flag { background: url('images/lang1f.png') no-repeat top right; background-size: 100% 100%; }
.aggregate .lang2 span.flag { background: url('images/lang2f.png') no-repeat top right; background-size: 100% 100%; }
.aggregate .lang3 span.flag { background: url('images/lang3f.png') no-repeat top right; background-size: 100% 100%; }
.aggregate td a { display:flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; margin: 0; padding: .3em 0; text-decoration:none; }
.aggregate td.selected { background: green; }
.aggregate td.selected a { color: white; font-weight: bold; }
.aggregate .highlighted { background: #eee }
.aggregate th.highlighted { background: green; color: white; }
.aggregate tr.highlighted td:first-child { background: green; color: white; font-weight: bold; }
.aggregate td.full { background: gray; }
.aggregate td.fulllight { background: #ccc; }

.legend table { display: inline-block }
.legend table td:first-child { width:auto; }
.legend table td, .legend table th { padding: 0 5px; }
.legend table img { width: 1.5em; height: 1em; vertical-align: middle; margin: 1px 0; }

img.flag { height: 1em; vertical-align: middle; }

#grayout {
	position: fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:#000;
	z-index:50;
}

.loader {
	position: absolute;
	width: 66px;
	height: 66px;
	margin: -33px 0 0 -33px;
	top:50%;
	left:50%;
	background:url('loader.gif') no-repeat center;
	z-index:51;	
}

#confirmation h1 { text-align: center; font-size: 20px; padding:0 10px; margin:10px 0; color: #144CAD; }
#confirmation h1.warning { color: red; }

#footinfo, #headinfo {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center;
}

#headinfo { padding: .5em 0 0 1em; }

#footinfo { margin-top: 1em; }

#footinfo div { padding: 1em; flex: 1 1 auto; }

#headinfo div.info { flex: 1 1 60%; }

#headinfo div { padding: 0 1em 1em 0; }

#headinfo div.legend { flex: 1 1 auto; font-size: 130%; }
#headinfo div.legend { font-size: 1.5em; }
#headinfo .llegend, #headinfo .llegend table { width: 60%; }

#headinfo .legend table { display: table; margin-left: auto; margin-right: auto }
#headinfo .legend table td:first-child { width: 5em; text-align: center; }
#headinfo .legend table td, .legend table th { text-align: left }
#headinfo .legend table caption { font-weight: bold; text-align: left; margin-bottom: .2em; text-align: center }

.info p {
	background: #eee;
	border-radius: 6px;
	padding: 1em;
	margin: 0;
	vertical-align: middle;
	border: 1px solid #ccc;	
	text-align: left;
}

img.icon {
	vertical-align: middle;
	margin-right: 5px;
}

.info .icon { width: 2.5em; height: auto; float: left; }

#loader {
	position: absolute;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;	
	background: #ffffff;
	background: rgba(255,255,255,.5);
	z-index:9999;
	display: none;	
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff)";
}

#loader img {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left:-25px;
}

body .ui-dialog .ui-dialog-title { width: 100%; }

#tourpicker { width:100%; background: #333; margin-top: 15px; position:relative; text-align:left; }
#tourpicker div:first-child { width:50%; position:relative; margin-left:0; left:0; }
#tourpicker div:last-child { width:auto; position:absolute; left:50%; right:0; margin-left:6px }
#tourpickert div { padding: 7px 0; display: inline-block; color:#999; font-size: 16px; font-weight: bold; border-radius: 10px 10px 0 0; margin-left:1px; border: 1px solid #999; border-bottom: none; cursor: pointer; text-align:center; position:absolute; left:50%; right:0; }
#tourpicker div { padding: 7px 0; display: inline-block; color:#999; font-size: 16px; font-weight: bold; border-radius: 10px 10px 0 0; margin-left:1px; border: 1px solid #999; border-bottom: none; cursor: pointer; text-align:center; width:33%; }
#tourpicker div.active { background:#fff; color: black; border-color: white; }

.fixed-dialog {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
}

@media only screen and (max-width: 1000px)  
{
	.head { background-image: none !important; }
	.wday { display: none; }
	.aggregate tr td:first-child { width: auto; }
}