/*
Theme Name: Gymnázium Rožnov
Author: Jiří Mlnařík
Version: 1.0

-------------------------------------------------------------- */

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

* {
  font-family: 'Open Sans', sans-serif;
  font-size:1em;
}


a {
  text-decoration:none;
  color:#C90000;
  transition:all 0.3s;
}

a:hover {
  color:#000;
  text-shadow:2px 2px 4px #999;
}

.pagewidth {
  max-width:1280px;
  margin-left:auto;
  margin-right:auto;
}

nav {
  display:block;
  margin:0 auto;
  height:3em;
  line-height:3em;
}

nav ul {
  list-style:none;
  height:3em;
  line-height:3em;
  margin:0;
  padding:0;
}

nav ul li {
  float:left;
  list-style:none;
  height:3em;
  line-height:3em;
  margin:0;
  padding:0;
}

nav ul li a {
  display:inline-block;
  height:3em;
  line-height:3em;
  width:auto;
  text-align:center;
  text-decoration: none;
  text-transform: uppercase;
  color:white;
  transition:none;
}

nav > div > ul {
  width:100%;
}

nav > div > ul > li {
  width:25%;
}

nav > div > ul > li.menu_swap {
  width:100%;
}

nav > div > ul > li > a {
  width:100%;
}

nav > div > ul > li > ul > li > a {
}

nav > div > ul > li > ul > li > ul > li > a {
}

nav ul li a img {
  vertical-align:middle;
}

nav ul li.current-menu-ancestor > a,
nav ul li.current-menu-item > a,
nav ul li a:hover {
  background:#C90000 !important;
  color:white;
}

.navbottom {
  display:block;
  margin:0 auto 1em auto;
}

.navbottom ul {
  list-style:none;
  margin:0;
  padding:0;
}

.navbottom ul li {
  float:left;
  list-style:none;
  margin:0;
  padding:0;
}

.navbottom ul li a {
  display:inline-block;
  margin:0 2em 0 0;
  text-decoration: none;
  text-transform: uppercase;
  color:white;
}

.navbottom ul li.current-menu-item a,
.navbottom ul li a:hover {
  color:#F3C049;
}

nav ul > li > ul {
  display:none;
  position:absolute;
  z-index:1;
  width:auto;
  height:auto;
  box-shadow:1em 0.5em 2em black;
}

nav ul > li > ul > li > ul {
  margin-left:70%;
  margin-top:-1.5em;
}

nav ul > li ul > li {
  display:block;
  float:none;
  white-space: nowrap;
  width:100%;
}

nav ul > li ul > li a {
  width:100%;
  padding-left:1em;
  padding-right:1em;
}

nav ul li:hover > ul {
  display:block;
}


#pagetitle {
  background:linear-gradient(to top, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 40%);
}

h1, p.pagetitle {
  margin:0;
  padding:0;
  line-height: calc(18px + (30 - 18) * ((100vw - 300px) / (1600 - 300)) + 1em);
  font-size: calc(18px + (30 - 18) * ((100vw - 300px) / (1600 - 300)));
  letter-spacing:0.1em;
  font-weight:normal;
}

h1 a, p.pagetitle a {
  text-decoration:none;
  color:#505050;
  margin-left:3.5em;
}

h1 a span, p.pagetitle a span {display:inline-block;}
h1 a span.short, p.pagetitle a span.short {display:none;}

@media all and (max-width:700px) {
  h1 a span, p.pagetitle a span {display:none;}
  h1 a span.short, p.pagetitle a span.short {display:inline-block;}
}

h1 img, p.pagetitle img {
  position:absolute;
  width:3em;
  height:auto;
}

#body-content h1 {
  text-align:center;
}

#body-content h1:after {
  content:"";
  height:0.1em;
  display:block;
  background:linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(201, 201, 201) 50%, rgb(255, 255, 255) 100%);#C9C9C9;
  width:70%;
  max-width:500px;
  margin:0px auto;
}

#body-content h1 + table {
  margin-top:1em;
}

.mainBanner {
  background:url(../images/gymnazium-roznov.jpg);
  background-size: cover;
  width:100%;
  height:20vw;
  margin:0;
}

.headerouter {
  background:linear-gradient(to bottom, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 100%);
  /*box-shadow:0 0 10px #999999;*/
  /*height:3em;*/
  line-height:3em;
}

#header {
}

h2 {
  font-size:calc(16px + (24 - 16) * ((100vw - 300px) / (1600 - 300)))
}

h2.withdate {
  padding-left:2em;
}

h3 {
  font-size:calc(14px + (20 - 14) * ((100vw - 300px) / (1600 - 300)))
}

  body.touch h2.withdate {
    padding-left:2.5em;
  }
  .indate {
    position:absolute;
    display:block;
    margin-top:0em;
    margin-left:-6em;
    font-size:calc(8px + (10 - 8) * ((100vw - 300px) / (1600 - 300)));
    color:#fff;
    transition:all 0.5s;
  }
  body.touch .indate {
    margin-top:1em;
  }
  .indate:hover,
  .indate.clicked {
    font-size:calc(16px + (20 - 16) * ((100vw - 300px) / (1600 - 300)));
    opacity:0.9;
    margin-left:-3em;
  }
  .indate.clicked {
    margin-top:0.3em;
    font-size:calc(25px + (30 - 25) * ((100vw - 300px) / (1600 - 300)));
  }
  .indate span {
    background:#555;
    width:calc(5em);
    text-align:center;
    height:2em;
    display:inline-block;
  }
  .indate span.dm {
    line-height:1.7em;
    border-top-left-radius:1em;
    border-top-right-radius:1em;
  }
  .indate span.y {
    line-height:1.6em;
    background:#AAA;
    border-bottom-right-radius:1em;
    border-bottom-left-radius:1em;
  }

#body ul {
  padding-left:0;
  list-style:none;
}

#body ul li {
  margin-left:1em;
  line-height:1.5em;
}

#body ul li:before {
  content: '';
  position:absolute;
  margin-left:-1em;
  margin-top:0.5em;
  width:0.5em;
  height:0.5em;
  background:#999;
}

.loop-wrap, h2 {
  padding-top:1em;
  border-top:0.1em solid #C9C9C9;
}

.loop-wrap:nth-of-type(1),
h2:nth-of-type(1) {
  padding-top:0;
  border-top:none;
}

.loop-wrap {
  padding-bottom:1em;
}

.loop-wrap:after {
  display:block;
  content:"";
  height:1px;
  overflow: hidden;
  clear:both;
}

footer > div {
  padding:1em 0;
  color:white;
}

footer img {
  margin-top:0em;
  height:1.2em;
}

.menu_swap {
  display:none;
}

#body-content {
  width:calc(100% - 310px);
  float:left;
  background:white;
  box-shadow:3px 10px 10px #ddd;
  padding-bottom:2em;
  margin-bottom:1em;
}

#body-content img {
  max-width:100%;
}

#body-content > div {
  padding-right:1em;
  padding-left:1em;
}

#body-content p {
  text-align:justify;
}

#body-content table {
  border-collapse: separate;
  border-spacing:2px;
  border:none;
  width:100%;
}

#body-content table td, #body-content th {
  background:linear-gradient(to bottom right, rgb(240, 240, 240) 0%, rgb(255, 255, 255) 100%);
  border:none;
}

#body-content table.nobg td, #body-content table.nobg th,
#body-content table tr.nobg td, #body-content table tr.nobg th,
#body-content table td.nobg,
#body-content th.nobg {
  background:none;
}

#body-content td:last-child, #body-content th:last-child {
  margin-right:0;
}

#body-content #rozvrhDiv table td {
  border-left:1px solid 999;
  border-top:1px solid 999;
}

#body-content #rozvrhDiv table p {
  text-align:center;
  margin:0 0 0.25em 0;
  padding:0;
}

#body-content #rozvrhDiv table .textsmall_1 {
  font-size:0.7em;
}

#body-content .gmUnselected,
#body-content .gmSelected {
  text-align:center;
  color:white;
}

#body-content .gmUnselected a {
  display:block;
  color:white;
  text-decoration: none;
}

#body-content .gmUnselected:hover,
#body-content .gmSelected {
  background:#C90000 !important;
}

#body-side {
  min-height:5em;
  background:gray;
  width:300px;
  float:right;
  padding-bottom:1em;
  border-bottom-left-radius:1em;
  border-bottom-right-radius:1em;
}

.cal-iframe {
  display:block;
  border-radius:0.5em;
  width:260px;
  margin:1em auto 0 auto;
  box-shadow:0 0 10px black;
}

.wholebutton {
  display:block;
  width:90%;
  line-height:2em;
  border:1px solid #999;
  box-shadow:5px 5px 10px rgba(0,0,0,0.5);
  text-decoration:none;
  text-align:center;
  margin:0.5em 0 0 5%;
  color:black;
  border-radius:7px;
}

.wholebutton:hover {
  border:1px solid #000;
  box-shadow:0px 0px 10px black;
}

.wholebutton img {
  max-height:1.6em;
  vertical-align:middle;
}

#calendarView {
  width:90%;
  margin-top:1em;
  margin-left:5%;
}

form {
  margin:1em auto;
  border-radius:0.5em;
  border:1px solid #ddd;
  padding:0.5em 1em;
}

form input {
  border-radius:0.5em;
  border:1px solid #ddd;
  padding-left:1em;
  padding-right:1em;
}

form input[type="submit"] {
  cursor:pointer;
  border-radius:0.5em;
}

/* =Images
-------------------------------------------------------------- */

/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img {
	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
	height: auto; /* Override height to match resized width for correct aspect ratio. */
}
.alignleft,
img.alignleft {
	display: inline;
	float: left;
	margin-right: 24px;
	margin-top: 4px;
}
.alignright,
img.alignright {
	display: inline;
	float: right;
	margin-left: 24px;
	margin-top: 4px;
}
.aligncenter,
img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.alignleft,
img.alignright,
img.aligncenter {
	margin-bottom: 12px;
}
.wp-caption {
	background: #f1f1f1;
	line-height: 18px;
	margin-bottom: 20px;
	max-width: 632px !important; /* prevent too-wide images from breaking layout */
	padding: 4px;
	text-align: center;
}
.wp-caption img {
	margin: 5px 5px 0;
}
.wp-caption p.wp-caption-text {
	color: #888;
	font-size: 12px;
	margin: 5px;
}
.wp-smiley {
	margin: 0;
}
.gallery {
	margin: 0 auto 18px;
}
.gallery .gallery-item {
	float: left;
	margin-top: 0;
	text-align: center;
	width: 15%;
}
.gallery-columns-2 .gallery-item {
	width: 50%;
}
.gallery-columns-4 .gallery-item {
	width: 25%;
}
.gallery img {
	border: 2px solid #cfcfcf;
}
.gallery-columns-2 .attachment-medium {
	max-width: 92%;
	height: auto;
}
.gallery-columns-4 .attachment-thumbnail {
	max-width: 84%;
	height: auto;
}
.gallery .gallery-caption {
	color: #888;
	font-size: 12px;
	margin: 0 0 12px;
}
.gallery dl {
	margin: 0;
}
.gallery img {
	border: 10px solid #f1f1f1;
}
.gallery br+br {
	display: none;
}
#content .attachment img {/* single attachment images should be centered */
	display: block;
	margin: 0 auto;
}


@media all and (max-width:1300px) {
  .pagewidth {
    padding-left:10px;
    padding-right:10px;
  }
}

@media all and (max-width:800px) {
  nav ul  {
    position:absolute;
    margin-left:-10px;
    width:calc(100% - 1em);
    z-index:11;
  }
  nav > div > ul > li {
    width:calc(100% - 1em);
  }
  nav ul > li  {
    float:none;
    display:none;
  }
  nav ul li a {
    text-align:left;
    padding-left:1em;
  }
  nav ul > li.menu_swap,
  nav.active li.mobile {
    display:block;
  }

  nav.active li.mobile .wholebutton {
    line-height:48px;
    width:80%;
    max-width:300px;
    margin:0.2em auto;
  }

  nav.active > div > ul  {
    height:auto;
    background:rgba(0,0,0,0.9);
  }
  nav.active ul li  {
    display:block;
    box-shadow:0 10px 10px black;
    height:auto;
  }
  nav.active ul li ul {
    display:block;
    position:static;
    margin-top:auto;
    margin-left:2em;
    margin-right:3em;
    height:auto;
  }
  nav ul > li a {
    display:block;
    width:calc(100% - 1em) !important;
  }

  nav ul > li a.wholebutton {
    width:80% !important;
    margin:0.2em auto;
    text-align:center;
  }

#body-content {
  width:95%;
  margin:0 auto;
  float:none;
  box-shadow:none;
}

#body-content > div {
  padding-right:0;
  padding-left:0;
}

#body-side {
  clear:both;
  min-height:5em;
  background:gray;
  width:95%;
  float:none;
  margin:0 auto;
  padding-top:1em;
}

#body-side .wholebutton,
#body-side #calendarView {
  margin-left:auto;
  margin-right:auto;
  max-width:300px;
}

}

/* TOUCH NAVIGATION (COPY OF media 800) */
  body.touch nav ul  {
    position:absolute;
    margin-left:-10px;
    z-index:11;
  }

  body.touch nav > ul  {
    width:calc(100% - 1em) !important;
  }

  body.touch nav > div > ul > li > ul  {
    width:calc(100% - 4em);
  }

  body.touch nav > div > ul > li > ul  > li > ul  {
    width:calc(100% - 6em);
  }

  body.touch nav > div > ul > li > ul  > li > ul  > li > ul  {
    width:calc(100% - 8em);
  }

@media screen and (orientation: portrait) {
  body.touch #body-content {
    margin-top:calc(70px + 0vw);
  }

  body.touch nav ul * {
    font-size:calc(30px + 0vw);
  }

  #body-content {
    width:95%;
    margin:0 auto;
    float:none;
    box-shadow:none;
  }

  #body-content > div {
    padding-right:0;
    padding-left:0;
  }

  #body-side {
    clear:both;
    min-height:5em;
    background:gray;
    width:95%;
    float:none;
    margin:0 auto;
    padding-top:1em;
  }

  #body-side .wholebutton,
  #body-side #calendarView {
    margin-left:auto;
    margin-right:auto;
    max-width:80%;
    font-size:calc(30px + 0vw);
  }

  .nav-links * {
    font-size:25px;
  }

}

  body.touch nav > div > ul > li.menu_swap,
  body.touch nav > div > ul > li {
    width:calc(100% - 1em);
  }
  body.touch nav ul > li  {
    float:none;
    display:none;
  }
  body.touch nav ul li a {
    text-align:left;
    padding-left:1em;
  }
  body.touch nav ul > li.menu_swap,
  body.touch nav.active li.mobile {
    display:block;
  }

  body.touch nav.active > div > ul  {
    height:auto;
    background:rgba(0,0,0,0.9);
  }
  body.touch nav.active ul li  {
    display:block;
    box-shadow:0 10px 10px black;
    height:auto;
  }
  body.touch nav.active ul li ul {
    display:block;
    position:static;
    margin-top:auto;
    margin-left:2em;
    margin-right:3em;
    height:auto;
  }
  body.touch nav ul > li a {
    display:block;
    width:100% !important;
  }

  body.touch nav ul > li a.wholebutton {
    width:80% !important;
    margin:0.2em auto;
    text-align:center;
    height:2em;
    line-height:2em;
  }

/* END OF TOUCH NAVIGATION (COPY OF media 800) */



.fl {float:left;}
.fr {float:right;}
.fn {float:none;}
.ca:after {
  content:"";
  display:block;
  clear:both;
  height:0px;
  overflow:auto;
}

.clear {
  clear:both;
  height:0px;
  overflow:hidden;
}

.tc, #body-content p.tc {text-align:center;}
.tr, #body-content p.tr {text-align:right;}
.tl, #body-content p.tl {text-align:left;}
.tj, #body-content p.tj {text-align:justify;}

.hidden, .mobile {
  display:none;
}

#calendarView .evtPreview {
  position:absolute;
  display:none;
  opacity:0;
  transition:all 0.5s;
  width:150px;
  height:auto;
  box-shadow:3px 3px 6px rgba(0,0,0,0.5);
  border-radius:0.5em;
  padding:0.5em 1em;
  margin-top:10px;
  line-height:1.3em;
}

#calendarView .evtPreview.visible {
  display:block;
  opacity:1;
}

.wp-block-gallery {
  list-style:none;
}

#body .wp-block-gallery ul li {
  margin-left:0;
}

#body .wp-block-gallery ul li:before {
  display:none;
  content:"";
}

.navigation.pagination {
  padding-top:0.5em;
  border-top:1px solid #ddd;
}

.navigation.pagination h2 {
  display:none;
}

.navigation.pagination .page-numbers {
  display:inline-block;
  height:2em;
  line-height:2em;
  min-width:2.5em;
  padding:0 0.5em;
  border:1px solid #ddd;
  border-radius:0.5em;
  text-align:center;
}

.alergen {
  background:#ddd;
  margin-right:5px;
  padding:0 3px;
  border-radius:0.3em;
  border:1px solid #999;
  cursor:help;
}

#body-content table tr.listek_day td {
  border-top:1px solid #aaa;
}

.orangeCell {background:#FFCA53;}
.greenCell {background:#BFFF53;}
.blueCell {background:#BFE3FF;}

#body-content .wp-block-gallery figure img {
  max-width:250px;
}

#body-content .wp-block-gallery figure  {
  text-align:center;
}

.absQuickFrame .qfButton {
  border:1px solid #999;
  border-radius:3px;
  padding-left:10px;
  padding-right:10px;
  margin-left:3px;
  margin-right:3px;
  color:black;
  height:25px;
  line-height:25px;
  display:inline-block;
}

.absQuickFrame .qfButton:hover {
  text-decoration: none;
}

.absQuickFrame .dateButton {
  padding-left:25px;
  background:#EEE url(../images/actPDFO.png) left center no-repeat;
}

.absQuickFrame .dateButton:hover {
  background:#EEE url(../images/actPDF.png) left center no-repeat;
}