/*
  ================== MAIN CSS FILE ==================

    CREATED: 28. 1. 2014
    AUTHOR: Internet Stream s.r.o.

  ===================================================
*/

/************************************ FONTS ***********************************/
/******************************************************************************/
@font-face {
    font-family: 'open_sanslight';
    src: url('../fonts/opensans-light-webfont.eot');
    src: url('../fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-light-webfont.woff') format('woff'),
         url('../fonts/opensans-light-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/opensans-regular-webfont.eot');
    src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-regular-webfont.woff') format('woff'),
         url('../fonts/opensans-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sansbold';
    src: url('../fonts/opensans-bold-webfont.eot');
    src: url('../fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-bold-webfont.woff') format('woff'),
         url('../fonts/opensans-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sansitalic';
    src: url('../fonts/opensans-italic-webfont.eot');
    src: url('../fonts/opensans-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-italic-webfont.woff') format('woff'),
         url('../fonts/opensans-italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sansbold_italic';
    src: url('../fonts/opensans-bolditalic-webfont.eot');
    src: url('../fonts/opensans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-bolditalic-webfont.woff') format('woff'),
         url('../fonts/opensans-bolditalic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/******************************** CSS RESET ***********************************/
/******************************************************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}

body        {line-height:1;}

ul          {list-style:none;}

blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}

table       {border-collapse:collapse; border-spacing:0;}

a img       {border:none;}


:focus      {outline:none;}

/***** Firefox buttons fix *****/
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {border:0;padding:0;margin:0;}


/**************************** GENERAL ELEMENTS ********************************/
/******************************************************************************/
.fLeft      {float:left;}
.fRight     {float:right;}
.aLeft      {text-align:left;}
.aRight     {text-align:right;}
.center     {text-align:center;}
.hidden     {position:absolute; top:-10000px; left:0; width:1px; height:1px; overflow:hidden;}

/*********** CLEARFIX ***********/
.group:before, .group:after {content:""; display:table;}
.group:after{clear:both;}
.group      {zoom:1;}
.clear, .clr {clear:both;}

/*********** TABLES ***********/
table   {width:100%;}
caption {}
td, th  {padding:12px 15px; border:none;}
td      {background:#ddd;}
.even td{background:#eee;}
th      {padding:15px; text-align:left; background:#ccc;}

/*********************************** LAYOUT ***********************************/
/*******************************************************************************/
.wrapper, .wrapper.vizualization, .wrapper.mhmp {width:1200px; margin:0 auto;}
@media screen and (max-width:1250px) {
    .wrapper {width:auto; max-width:1200px;}
}

/*********** HEADER ***********/
.header     {}

.headerTop  {height:70px;}

.logo       {float:left; width:50%; height:100%;}

.siteName   {display:block; padding:25px 0 0; vertical-align:middle; padding-left:10px}

.cityLink   {float:right; width:50%; text-align:right;;}
.cityLink a {display:inline-block; padding:22px 3% 0 0}


.menu li    {float:left; position:relative;}
.menu a     {display:inline-block; padding:15px 18px;}
.menu li.second {float:right;}
.menu li.second a {}
.menu ul ul {display:none; position:absolute; left:0; top:50px; z-index:10;}
.menu li.second ul {left:auto; right:0;}
.menu li:hover > ul {display:block;}


/*********** HOMEPAGE ***********/
.homeCharts {position:relative; padding:0 0 40px;}

h2.mainPageTitle {position:absolute; left:50%; top:20px; z-index:10; margin:0 0 0 -10% !important; padding:7px 0; width:20%; text-align:center; color:#fff !important;}

/*********** FOOTER ***********/
.footerLeft {float:left; width:48.5%; padding:20px 0 20px 1.5%;}
.footerRight {float:right; width:48.5%; text-align:right; padding:20px 1.5% 20px 0;}


/*********************************** STYLE ***********************************/
/*****************************************************************************/
html        {color:#252c34; font-size:12px; font-family:open_sansregular, Arial, Helvetica, sans-serif;}
body        {background:#e7e7e7;}

/*********** LINKS ***********/
a           {color:#0E5FAF; text-decoration:underline;}
a:hover     {text-decoration:none;}

.page h2 {color:#3089C9; font-weight:normal; font-size:20px; margin:30px 15px 10px;}
.page h3 {color:#3089C9; font-weight:normal; font-size:16px; margin:20px 15px 10px;}
.page h4 {color:#3089C9; font-weight:normal; font-size:14px; margin:15px 15px;}

.budgetContentBox > h2 {text-align:center; font-size:23px;}

/*********** TABLES ***********/
td, td a    {color:#004F99;}
th, th a    {color:#013668;}
td          {background:#fff; font-size:12px;}
.even td    {background:#EAF4FF;}
th          {background:#A2D2F2; font-weight:normal; font-size:13px;}
table .amount {text-align:right; white-space:nowrap;}
tr.active td {background:#3895d7; font-weight:bold;}
tr.totals td {font-weight:bold; font-size:13px; background:#A2D2F2; color:#013668;}

/*********** HEADER ***********/
.header .wrapper {background:#424d56;}

.logo a     {text-decoration:none;}
.siteName   {font-size:22px; font-family:open_sanslight, Arial, Helvetica, sans-serif; text-transform:uppercase; color:#cbcbcb;}
.cityLink a {font-size:20px; text-decoration:none; color:#cbcbcb;line-height: 29px;}

.menu       {background:#3487DB;}
.menu a     {color:#fff; font-size:20px; text-decoration:none; border-right:1px solid #acd4e8;}
.menu li.economView a {border-right:none;}
.menu li.second a {}
.menu a:hover,
.menu .active a {background:#207FBF;}
.menu ul ul a {background:#51b1f4;}


/*********** CONTENT ***********/
.page .wrapper {position:relative; background:#fff;}


/*********** HOMEPAGE ***********/
.mainPageTitle  {background:#3487DB; font-size:25px; color:#fff; font-weight:normal;}

/*********** FOOTER ***********/
.footer {color:#ccc; font-size:12px;}
.footer .wrapper {background:#424d56;}
.footer a, .footer a:hover {color:#ccc; text-decoration:none;}
.footer a:hover {color:#ccc; text-decoration:underline;}


/*********** RESPONSIVE ***********/
@media screen and (min-width:1200px) {
    .pieChart.chartArea {height:350px;}
    .barChart.chartArea {height:500px;}
    .homeCharts .chartArea.pieChart {height:450px;}
}

@media screen and (max-width:1200px) {
    .costsChaptersPage, .incomesChaptersPage {background:none;}
    .costsChaptersPage .budgetMenuBox {background:#d17c57;}
    .incomesChaptersPage .budgetMenuBox {background:#b2d84e;}
    .budgetMenuBox {position:absolute; left:-250px; top:5px; z-index:100; float:none; width:250px; box-shadow:3px 3px 3px #bbb;}
    .budgetMenuBox h3 {padding-right:30px; margin-right:-30px !important; border-radius:0 4px 4px 0; background:#333 url('../images/arrow-right.png') no-repeat 97% 11px !important; cursor:pointer;}
    .budgetMenuBox.opened h3 {background-position:97% -20px !important;}
    .budgetContentBox {float:none; width:auto;}
    .budgetContentBox .chartArea.pieChart {max-width:700px; margin:0 auto;}
    .budgetContentBox .chartArea.barChart {max-width:950px; margin:0 auto;}
    .budgetContentBox h3 {margin-left:50px;}
    
    .pieChart.chartArea {height:350px;}
    .barChart.chartArea {height:500px;}
    .homeCharts .chartArea.pieChart {height:450px;}
    .tableScroll {overflow:auto;}
}

@media screen and (max-width:1024px) {
    .menu ul li.second {float:left;}
    .menu li.economView a {border-right:1px solid #ACD4E8;}
    .menu ul li a {border-bottom:1px solid #ACD4E8;}
    .pieChart.chartArea {height:300px;}
    .barChart.chartArea {height:450px;}
    .homeCharts .chartArea.pieChart {height:400px;}
}

@media screen and (max-width:850px) {
    .menu ul li a {font-size:16px;}
    .menu ul ul {top:46px;}
    .menu li.second ul {right:auto;}
    .siteName {font-size:17px;}
    .cityLink a {font-size:17px;}
    h2.mainPageTitle {font-size:17px;}
    
    .topSuppliers, .lastCosts {width:100%; float:none;}
    
    .budgetTable .budgetValue, .budgetTable .budgetLabel {width:auto; float:none; display:block;}
    .subRow td .budgetLabel {width:auto !important; display:block;}
    
    .homeCharts .chartArea {padding:0;}
   /* .homeCharts .chartArea.income {border-top:20px solid #b2d84e;}
    .homeCharts .chartArea.costs {border-top:20px solid #d17c57;}*/
    .homeCharts .chartArea.pieChart {max-height:320px;}
    .pieChart.chartArea {height:250px;}
    .barChart.chartArea {height:400px;}
    .homeCharts .chartArea.pieChart {height:300px;}
}

@media screen and (max-width:800px) {
    .homeCharts {padding:0; background-image:none;}
    .homeCharts .chartArea {float:none; width:100%;}
    .homeCharts .chartArea svg {margin-bottom:50px;}
    h2.mainPageTitle {left:20px; width:auto; padding-left:15px; padding-right:15px; margin-left:0 !important;}
    
    .budgetTable {width:100%; margin-top:20px; margin-bottom:20px;}
    .budgetTable td {font-size:14px; padding:6px 10px; line-height:1.5;}
    .income .budgetValue {text-align:left;}
    
    .budgetTable .income,
    .budgetTable .costs,
    .budgetTable .saldo {width:auto;}
    
    td, th {padding:6px 10px; font-size:11px;}
    
    
    .budgetContentBox h3 {text-align:center; margin-left:0; margin-right:0;}
    .budgetContentBox .chartLegend + h3 {text-align:left; margin-left:10px; font-size:13px;}
    .chartLegendItem .legendSquare {width:15px; height:15px;}
    .chartLegendItem .legendLabel {font-size:11px;}
    
}
@media screen and (max-width:650px) {
    .header {height:auto;}
    .headerTop {height:auto;}
    .logo {display:block; width:100% !important; height:auto; margin:0 auto;}
    .logo img {float:none; display:block; margin:0 auto;}
    .siteName {display:block; width:100%; text-align:center; padding:0;}
    .cityLink {float:none; display:block; margin:0 auto; text-align:center;}
    .cityLink a {padding:10px 0;}
    .menu ul li a {font-size:14px;}
    h2.mainPageTitle {position:static; text-align:left; margin:20px 0 0 !important;}
    .chartArea.barChart {max-height:340px;}
    
    .page .wrapper {overflow:visible !important;}
    .pieChart.chartArea {height:200px;}
    .barChart.chartArea {height:300px;}
    .homeCharts .chartArea.pieChart {height:250px;}
}

@media screen and (max-width:500px) {
    .menu ul li.second {display:block; float:none; clear:both;}
    .menu ul li a {border-bottom:none;}
    .menu ul li.second a {display:block; border-top:1px solid #ACD4E8;}
    .menu ul li ul {position:static; margin:0 0 0 20px;}
    .menu li:hover > ul {display:none;}
    .menu li.transpAccount ul li a {}
    
}

@media screen and (max-width:400px) {
    .budgetTable td {font-size:12px;}
    
}



a {color:#b61c23;}
.logo {width:75%;}
.cityLink {width:25%;}

.menu {background:#b61c23;}
.menu a     {border-right:1px solid #E56B6F;}
.menu li {list-style: none outside none;}
.menu ul ul a {background:#b61c23;}
.menu .active a, .menu a:hover {background:#8C050A;}


.menu li.transpAccount ul {min-width:350px; background:#b61c23; z-index:20}
.menu li.transpAccount ul li a {width:150px; padding:3px 10px; margin:0 0 0 3px; float:left; border:none; border-top:1px solid #E56B6F; line-height:1.3; font-size:14px}

.budgetMenuBox h3 {background-color:#333 !important;}
.page h2,
.page h3,
.page h4 {color:#b61c23;}

th          {background:#666; color:#fff;}
th a        {color:#fff;}
td          {background:#F7F7F7; color:#333;}
tr.active td  {background:#ddd;}
.even td    {background:#eee;}
td a        {color:#b61c23;}

tr.totals td {background:#ddd; color:#222;}

.homeTables {background:#F7F7F7;}

.topSuppliers table {border-right:2px solid #fff;}

.actionHeader dl ul li a {background:#b61c23;}

.mainPageTitle  {background:#b61c23;}
.budgetTable .even .saldo {background:#ddd;}
.budgetTable .saldo {background:#eee; color:#222;}
.budgetTable .saldo a {color:#b61c23;}

.footer .wrapper {background:#474747;}

.page .wrapper {background:#F4F4F4;}

h1{font-size: 23px; padding: 10px;}
p{ padding: 10px; text-align:justify;}

address, p, ul{ padding-left: 15px; font-size: 1.2em; font-style: normal;}
.page li {list-style-type: disc; margin-left: 25px;}

@media screen and (max-width:1024px) {
    .menu li.economView a {border-right:1px solid #E56B6F;}
    .menu ul li a {border-bottom:1px solid #E56B6F;}
}
@media screen and (max-width:500px) {
    .menu ul li.second a {display:block; border-top:1px solid #E56B6F;}
}


.cityDescBox h2{ margin: 5px 10px;}
.cityDescBox{ padding: 5px 0; width: 320px;}

#editFormKlr { border-top: 1px solid gray; border-bottom: 1px solid gray; margin: 10px 10px;}
#editFormKlr .editField { padding: 5px 20px; }
#editFormKlr .editField label{ display: inline-block; width: 120px; }
.err{color:red}