html,
body {
  margin:0;
  padding:0;
  height:100%;
}
body {
  font-family: Century Gothic, Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  background: #ffffff;
}
body > div.body {
  min-height: 100%;
  position: relative;
}
.link { 
  cursor: pointer;
}
.underline {
   text-decoration: underline;
}
.strike {
   text-decoration: line-through;
}
.drag {
  cursor: move;
}
.center {
  text-align: center;
}
.shablon, .hidden {
  display: none;
}
.left { float: left;}
.right { float: right;}
.cb {
  clear: both;
}
.number {
  text-align: right;
}
h1,h2,h3,h4,h5,h6{
  font-size: 1em;
  margin: 0;
  padding: 0;
  font-weight: normal;
}
.big {
  font-size: 1.4em;
}

/*general classes*/
/*general select list*/
div.box {background-color: #fff;}
div.box > label {
  display: block; 
  color: #fff;
  background-color: #7DCEFD;
  font-size: 1.6em;
  padding: 0.318em 1em;
}
div.box > div, div.box > form {
  padding: 1em;
  display: block;
}


table {
  border-collapse: collapse;
  width: 100%;
}
table, table > thead > tr > td, table > tbody > tr > td { vertical-align: top; }
table > thead > tr > th {
  font-weight: normal;
  color: DarkSlateGray;
  background-color: Gainsboro;
  text-align: left;
}
table > thead > tr > th[data-field] {
  cursor: pointer;
}
table > thead > tr > th.[data-order-type]:after{
  dispaly: inline-block;
  margin-left: 1em;
}
table > thead > tr > th[data-order-type=ASC]:after {
  content: "▲";
  color: green;
}
table > thead > tr > th[data-order-type=DESC]:after {
  content : "▼";
  color: red;
}


table.lists {
  border-spacing: 0.2em;
}
table.lists > thead > tr > th, table.lists, table.lists > tbody > tr > td {
  border: 1px solid grey;
  padding: 0.2em;
}
table.lists > tbody > tr {
  cursor: pointer;
}
table.lists > tbody > tr:hover {
  background-color: LightSteelBlue;
}
table.lists > tbody > tr.selected, table.lists > tbody > tr.selected:hover {
  background-color: PowderBlue;
}


textarea,  select, input[type=text], input[type=password], input[type=number], input[type=email] {
  border: 1px solid grey;
  /*background-color: Ivory;*/
  font-family: Century Gothic, Tahoma, Verdana, Arial, Helvetica, sans-serif;
  /*font-style: italic;*/
  font-size: 1.1em;
  box-sizing: border-box;
}
textarea:disabled,  select:disabled, input[type=text]:disabled, input[type=password]:disabled {
  border: 1px solid #eee;
  background-color: #ddd;
}
[class~=ctl] {display: inline-block;}
input[type=button], input[type=submit], input[type=reset], button, [class~=ctl], .nav {
  border: 0;
  margin: 0;
  background-color: Chocolate;
  padding: 0.3em 1em;
  color: #fff;
  font-weght: normal;
  cursor: pointer;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover, [class~=ctl]:hover, .nav:hover {
  background-color: SaddleBrown;
} 


div[position=main] {display: none;}


div.fog, div.fog_without_loader {
  position: absolute;
  top: 0; bottom: 0; left:0; right: 0;
  background-color: Silver;
  opacity:0.8;
  z-index: 1000;
}
div.fog:after{
  content: "";
  background-image: url(images/ajax-loader.gif);
  display: block;
  position: absolute;
  top: 50%; left: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  margin-left: -8px;
  z-index: 999;
}
 
.popup > .fog{ position: fixed; z-index: -1;}
.popup > .fog:after{display: none;}
.popup {
  display: none;
  position: fixed;
  /*width: 30em;*/
  /*height: 22.5em;*/
  top: 10%;
  /*left: 50%;
  margin-left: -15em;
  */
  left: 0; right: 0;
  vertical-align: middle;
  z-index: 1000;
}
.popup > div.outer {
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-justify-content: space-around; /* Safari */
  justify-content:         space-around;
}
.popup > div.outer > div.inner {
  padding: 5em 4.1em;
  background-color: #fff;
  position: relative;
  /*position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;*/
}
.popup > div.outer > div.inner > div.close {
  background-color: #4b4f5a;
  color: #fff;
  cursor: pointer;
  font-size: 2em;
  height: 1em;
  line-height: 1em;
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  width: 1em;
  z-index: 1;
}
.popup > div.outer > div.inner > div.close:hover {
  color: #7dcefd;
}



details, summary { display: block; border: 1px solid #666; padding: 1em; }
/* Apply a pointer cursor and style the background upon hover to indicate <summary> is a clickable element. */
/* These styles can be applied regardless of whether the fallback is needed */
summary { cursor: pointer; }
summary:hover, summary:focus { background: #ddd; }

/* The following styles are not really needed, since the jQuery script takes care of hiding/displaying the elements. */
/* However, we’re still gonna use CSS as well to prevent FOUC in browsers that understand these selectors. */
/* Remember: by default (and probably most of the time), the contents of the <details> element are hidden. */
.no-details details > * { display: none; }
/* This doesn’t work very well in Firefox 3.6.x */
/* .no-details details[open] > * { display: block; } */
/* The following doesn’t toggle correctly in WebKit:
.no-details details > summary:before { content: '► '; }
.no-details details[open] > summary:before { content: '▼ '; }
*/
/* And yes, it should really be ::before, but that doesn’t work in IE8 */
.no-details details > summary:before { float: left; width: 20px; content: '► '; }
.no-details details.open > summary:before { content: '▼ '; }
/* For IE6 and IE7, who don’t support generated content, you could use padding-left + a background image instead */
/* I really couldn’t be bothered though. */
/*
.no-details details > summary { padding-left: 20px; background: url(img/arrow-sprite.png) no-repeat 0 0; }
.no-details details.open > summary { background-position: 0 -20px; }
*/
/* Make sure summary remains visible */
.no-details details summary { display: block; }



ul.tabs {
  display: block;
  margin: 0 0 0 1em;
  padding: 0;
}
ul.tabs > li {
  background-color: Lavender;
  color: #333;
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  margin: 0 0 0 0.6em;
  padding: 0.5em;
}
ul.tabs > li.selected {
  background-color: LightSteelBlue;
}
div.tab {
  background-color: LightSteelBlue;
  padding: 1em;
}


.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;

  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;

  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
}

@-webkit-keyframes flash {
    0% { background-color: none; }
    50% { background-color: OrangeRed; }
    100% { background-color: none; }
}

@-moz-keyframes flash {
    0% { background-color: none; }
    50% { background-color: OrangeRed; }
    100% { background-color: none; }
}

@-ms-keyframes flash {
    0% { background-color: none; }
    50% { background-color: OrangeRed; }
    100% { background-color: none; }
}


h1 {
  border-bottom: 1px solid darkred;
  font-size: 2em;
  margin: 0.5em 0;
}
h2 {
  /*border-bottom: 1px solid darkred;*/
  font-size: 1.4em;
  margin: 0.5em 0;
}
h3 {
  font-size: 1.2em;
  margin: 0.5em 0 0.2em 0;
}


div[data-tag=events] {}


div[data-tag=events] form[name=events] {display: none;}
div[data-tag=events] form[name=events] > label, 
div[data-tag=events] form[name=events] > div {display: block; margin-bottom: 0.2em;}
div[data-tag=events] form[name=events] > label > span,
div[data-tag=events] form[name=events] > div > span {display: inline-block; width: 10em; vertical-align: top;}
div[data-tag=events] form[name=events] > label > textarea {width: 40em; height: 5em;}
div[data-tag=events] form[name=events] > label > input[name=address],
div[data-tag=events] form[name=events] > label > input[name=phone],
div[data-tag=events] form[name=events] > label > input[name=hours],
div[data-tag=events] form[name=events] > label > input[name=ticket] {width: 40em;}
div[data-tag=events] form[name=events] input[name=delete] {float: right;}

div[data-tag=events] form[name=events_criteria]{margin: 1em 0; font-size: 1.2em;}
div[data-tag=events] form[name=events_criteria] input[name^=date_]  {width: 6em; padding: 0.1em; font-size: 1.2em;}

div[data-tag=events] div[data-result=events] {}

div[data-tag=events] div[data-result=events] > div.info {font-size: 0.9em; background-color: LightGrey; padding: 1em;}
div[data-tag=events] div[data-result=events] > table {}
div[data-tag=events] div[data-result=events] > table > thead > tr > th,  
div[data-tag=events] div[data-result=events] > table > tbody > tr > td { padding: 1em; border: 1px solid #999;}

div[data-tag=events] div[data-result=events] > table > tbody > tr { cursor: pointer; }
div[data-tag=events] div[data-result=events] > table > tbody > tr:hover { background-color: Linen; }