/*
<style type="text/css" media="print">
    .page
    {
     -webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
</style>

http://stackoverflow.com/questions/138422/landscape-printing-from-html

ONLY in Explorer
<style type="text/css" media="print">
@page
{ 
 width: 100%; 
 height: 100%; 
 margin: 0% 0% 0% 0%; 
 filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=3);
} 
</style>
*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400&subset=latin-ext);
/*@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,600,600italic,700italic&subset=latin-ext);*/
/*@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700&subset=latin-ext);*/
@import url(https://fonts.googleapis.com/css?family=Oswald:700&subset=latin-ext);

@media print {
  body {
    --margin: 0px;
  }
  h1,h2,h3{
    --margin: 0px;
  }
  tr{ 
    page-break-inside: avoid;
  }
  table{
    width:100%;
  }
  .wiRow{
    border-bottom: 1px dotted #222;
  }
  .docHeaderContainer{
    display: none;
  }
  .docBodyContainer {
    margin-top: 0px;
  }
  .wiFirstPageHeader{
    margin-top: 0px; 
  }
 
}

@media screen {
  .wiRow:nth-child(odd){ 
    background-color: #EEE; 
  }
}


@page { 
  --size: 297mm 210mm; /* landscape*/
  --size: 210mm 297mm;   /* portrait */
  --size: landscape;
  margin: 10mm;
}

body{
  font: 400 14px/150% 'Open Sans', 'Arial', sans-serif;
}
h1,h2,h3,h4{
  padding: 5px 0 5px 0;
  
}
h1{
  color: #4a64a4;
  display:inline-block;
  font: 700 26px/150% 'Oswald', 'Arial', sans-serif;
}
h2{
  font-size:20px;
}
h3{
  color:#666;
  padding: 0px;
}
h4{
  --margin: 5px 0 5px 0;
  color:#666;
  text-align:left;
  --color: #F4C35E;
  color: #4a64a4;
}
ul{
  list-style-type: none;
  padding-left: 0px;
  margin: 0px;
}
li{
  margin: 0px;
  --border-top: 1px solid #eee;
  --border-left: 1px solid #eee;
  --border-right: 1px solid #eee;
  width: 100%;
}
li:last-child{
  margin: 0px;
  --border: 1px solid #eee;
  width: 100%;
}

a{
  text-decoration: none;
  color: #2A2A2A;
}
a:hover{
  color: #B35A00;
}

input{
  /* musi to tu byt, jinak je prepsano vychozim nastavenim inputu */
  font: 400 14px/150% 'Open Sans', 'Arial', sans-serif;
  border-radius: 3px;
  border:1px solid #DADEE9;
  padding: 6px;
  --background-color:#FFF;
}

/*
  vychozi vyska radku je 6mm
*/

.docBody{
}

.docBodyContainer {
  width: 100%;
  margin-top: 40px;
}
.docContainer {
  text-align: left;
  min-height: 100%;
  height: auto !important;
  margin: 0 auto -6em;
  padding: 10px;
}

.docHeaderContainer {
  position: fixed;
  height: 40px;
  top: 0px;
  width: 100%;
}
.defBlock{
  --max-width:960px;
  max-width:500px;
  margin: 0px auto;
  padding: 0 5px 0 5px;
}


.wiFirstPageHeader{
 --height:24mm; /* 4R */
  margin-top: 40px; 
}

.wiReportHeader{
  --font-size: 16px;
}

.wiTable{
  border-collapse: collapse;
  font-size: 13px;
  margin: 10px auto 20px auto;
  border: 1px solid #00154A;
  --border-radius: 6px;
  --color:#666;
  width: 1530px;
  border-right: 1px solid #00154A;
  border-left: 1px solid #00154a;
}

.wiTable tbody tr.wiRow {
  counter-increment: rowNumber;
}

.wiTable tbody tr.wiRow td:first-child::before {
  content: counter(rowNumber);
  display: block;
}
/*
.wiCaption{
  font-size: 15px;
  text-transform: uppercase;
  text-align: left;
  font-weight: bold;
  padding: 0 0 10px 0;
  color: black;
  letter-spacing: 3px;  
}
*/
.wiCaption{
  width:20%;
  font-size: 13px;
  text-transform: uppercase;
  text-align: left;
  --font-weight: bold;
  padding: 4px 0 4px 10px;
  background-color:#4a64a4;
  
  --background: -webkit-linear-gradient(top, #00154A, #4a64a4); /* For Safari 5.1 to 6.0 */
  --background: -o-linear-gradient(top, #00154A, #4a64a4); /* For Opera 11.1 to 12.0 */
  --background: -moz-linear-gradient(top, #00154A, #4a64a4); /* For Firefox 3.6 to 15 */
  --background: linear-gradient(to top, #00154A, #4a64a4); /* Standard syntax (must be last) */
  
  color: yellow;
  
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-right: 1px solid #4a64a4;   
  border-left: 1px solid #4a64a4;  
}
.wiHeader{
  background-color:#00154A;
  border-right: 1px solid #00154A;  
  border-left: 1px solid #00154A;
  color:#dadee9;
  position: sticky;
  top: 36px;
}
.wiHeaderRow{
  height: 6mm;
}
.wiHeaderCol{
  font-weight: normal;
  padding: 4px 8px;
  --border-right: 1px solid white;
  text-align:right;
}
.wiHeaderCol:hover{
  text-decoration: underline;
  color:white !important;
  cursor: pointer;
}
.wiHeaderColSorted{
  color: #F4C35E;
}

.wiHeaderCol:first-of-type{
  text-align:center;
}

.wiFooter{
  background-color:#00154A;
  border-right: 1px solid #00154A;  
  border-left: 1px solid #00154A;
  color:#dadee9;
}
.wiFooterHead{
  height: 18mm;
}
.wiFooterRow{
  height: 6mm;
  --color: yellow;
}
.wiFooterCol{
  padding: 4px 8px;  
  --border-right: 1px solid white;
}
.wiRow{
  height: 6mm;
  --border-bottom: 1px dotted #222;
}
.wiCol{
  padding: 4px 8px;  
}
.wiCol:first-of-type{
  color:#000;
  --border-right:1px solid #00154A;
  --width:200px;
}

.wiDatePicker{
  border: none;
  background: transparent;
  font-weight: bold;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  width: auto;
  text-align: left;
  cursor: pointer;
  padding: 0;
  outline: none;
}
.wiDatePickerWrap{
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 4px 10px;
  transition: border-color 0.2s, background 0.2s;
}
.wiDatePickerWrap:hover{
  border-color: #B35A00;
  background: #fdf6ef;
}
.wiDatePickerWrap:hover .wiDatePicker{
  color: #B35A00;
}
.wiDatePickerWrap:hover .wiDatePickerArrow{
  color: #B35A00;
}
.wiDatePickerArrow{
  font-size: 9px;
  color: #999;
  margin-left: 6px;
  pointer-events: none;
}

.btnAction{
  padding:6px;
  cursor: pointer;
  font-weight:bold;
  background-color:#F7EEDB;
  border:1px solid #F7EEDB;
  border-radius: 6px;
  color: #222;
  text-decoration: none;
  min-width: 110px;
  display: block;
  text-align: center;  
  background-image: linear-gradient(top,#F7EEDB,#F9A906 26px,#F9A906);
  background-image: -moz-linear-gradient(top,#F7EEDB,#F9A906 26px,#F9A906);
  background-image: -webkit-gradient(linear,0% 0%,0% 100%,from(#F7EEDB),to(#F9A906));
  background-image: -webkit-linear-gradient(top,#F7EEDB,#F9A906 26px,#F9A906);
}
/*
.btnAction:hover{
  background-color: #4A64A4 !important;
  border:1px solid #4A64A4;
  color:white !important;
}
*/
.button{
  padding:6px;
  margin-left: 10px;
  margin-right: 10px;  
  cursor: pointer;
  --color:#EEE;
  border:1px solid #DADEE9;
  border-radius: 6px;
  text-decoration: none;
  min-width: 110px;
  display: block;
  text-align: center;  

  /*
  background-image: linear-gradient(top,#ECECEC,#171717 26px,#171717);
  background-image: -moz-linear-gradient(top,#ECECEC,#171717 26px,#171717);
  background-image: -webkit-gradient(linear,0% 0%,0% 100%,from(#ECECEC),to(#171717));
  background-image: -webkit-linear-gradient(top,#ECECEC,#171717 26px,#171717);
  */  
}
.btnRange{
  max-width: 40px;
  min-width: 30px;
}
.button:hover{
  background-color: #DADEE9 !important;
  border:1px solid #DADEE9;
  --color:white !important;
}
.lia1{
  padding: 8px;
  margin:1px;
  display:inline-block; 
  width: 95%;
  background-color: rgb(239, 239, 239);
  border-radius: 6px;
  
}
.lia2{
  display:inline-block; 
  width:10%;
  background-image: url(/img/pop-out.png);
  background-repeat: no-repeat no-repeat;
  background-position: 50% 50%, 50% 50%;  
}
.menuItem{
  display: inline-block; 
  padding: 10px 10px 5px 10px;
  font-size: 13px;  
}


.a-left{
  text-align: left;
}
.a-right{
  text-align: right;
}
.a-center{
  text-align: center;
}
.c-negative{
  color: #FF0000;
}
.c-negative-foot{
  color: yellow;
}
.no-wrap{
  white-space: nowrap;
}