/************************************************************************************************************/
/*  type: CSS/screen                                                                                        */
/*  zone: WWW / Meraky-PIS                                                                                  */
/*  version: 2008/03/30                                                                                     */
/************************************************************************************************************/

/************************************************************************************************************/
/*  MAIN XHTML                                                                                              */
/************************************************************************************************************/

#meraky-pis {
  width:595px;
  margin: 0px 0px 20px 0px;
}

#meraky-pis h2 {
  display: none;
}


#meraky-pis img {
  behavior: url(/scripts/iepngfix/iepngfix.htc);
}  

/* KROKY */
#meraky-pis div.krok {
  display:block;
  clear: both;
  margin: 0px 0px 20px 0px;
} 

/* TABS */
#tabs {
  display: block;
  position: relative;
  /*width: 99.8%;*/
  width:595px;
}

#tabs ul, li {
  margin: 0;
  padding: 0;
}

#tabs ul#tabs-kalkulacky {
  display: block;
  width: 100%;
  margin: 0 0 0 0;
  font: 11px Verdana,arial,"Geneva CE",sans-serif;;
  font-weight: bold;
  border-bottom: 0px solid rgb(141,178,227);
  list-style-type: none;
  float: left;
  text-align: center;
}

#tabs .tabs-line-bottom {
  display: block;
  float: left;
  bottom: 0px;
  height: 2px;
  width: 100%;
  margin-top:-1px;
  border: 1px solid rgb(141,178,227);
  background-color: rgb(222,236,253);
  font-size: 1px;
}

ul#tabs-kalkulacky li {
  position: relative;
  display: inline;
  background: transparent url();
  padding:0;
  margin:0;
  margin-right: 3px;
  text-align: center;
}
ul#tabs-kalkulacky li a {
  float: left;
  display: inline-block;
  color: rgb(65,106,163);
  margin-right: 0px;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  background: transparent url();
  padding:0;
  margin:0;
  margin-right: 3px;
  
  color:#1C2F67;
  font-family:Verdana,arial,arial,"Geneva CE",sans-serif;
font-size:0.8em;
font-weight:bold;
}
#tabs-kalkulacky li a.active {
  color: rgb(21,66,139);
  font-weight: bold;
  position: relative;
  text-decoration: underline;
}

ul#tabs-kalkulacky a:hover {
  text-decoration: underline;
}

ul#tabs-kalkulacky li.tab a span {
  display: inline-block;
  height: 38px;
  float: left;
  cursor: pointer;
  cursor: hand;
}
ul#tabs-kalkulacky li.tab a span.tab-center span.tab-text {
  text-align: center;
  height: 20px;
  margin-top: 7px;
}
ul#tabs-kalkulacky li.tab a span.tab-left {
  width: 6px;
  background: transparent url(/images/meraky-pis/tab.png) no-repeat scroll 0 0;
}
ul#tabs-kalkulacky li.tab a span.tab-center {
  background: transparent url(/images/meraky-pis/tab.png) repeat-x scroll 0 -38px;
}
ul#tabs-kalkulacky li.tab a span.tab-right {
  width: 6px;
  background: transparent url(/images/meraky-pis/tab.png) no-repeat scroll 0 -76px;
}

ul#tabs-kalkulacky li.tab a.active span.tab-left {
  width: 6px;
  background: transparent url(/images/meraky-pis/tab-active.png) no-repeat scroll 0 0;
}
ul#tabs-kalkulacky li.tab a.active span.tab-center {
  background: transparent url(/images/meraky-pis/tab-active.png) repeat-x scroll 0 -38px;
}
ul#tabs-kalkulacky li.tab a.active span.tab-right {
  width: 6px;
  background: transparent url(/images/meraky-pis/tab-active.png) no-repeat scroll 0 -76px;
}



/* FORMS */

#meraky-pis form {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
  font: 100%!important Verdana,arial,"Geneva CE",sans-serif;;
  margin: 0;
  padding: 0;
  min-width: 500px;
  max-width: 595px;
  width: 595px; 
}

#meraky-pis form fieldset {
  / * clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
  border-color: rgb(151,102,255);
  border-width: 1px;
  border-style: solid;
  border: 1px solid rgb(229,239,248);
  padding: 10px;        /* padding in fieldset support spotty in IE */
  margin: 0;
}

#meraky-pis form fieldset legend {
	font-size: 16px;
  font-family:"Arial Narrow",arial,sans-serif;
  font-weight: bold;
	margin:.5em .5em .5em 0;
	color:#1C2F67;
}

#meraky-pis form label { 
	display: block;  /* block float the labels to left column, set a width */
	float: left; 
	width: 180px; 
	padding: 0; 
	margin: 0px 0 0; /* set top margin same as form input - textarea etc. elements */
	text-align: right; 
	line-height: 22px;
	font-weight: normal;
}

#meraky-pis form fieldset label:first-letter {  /* use first-letter pseudo-class to underline accesskey, note that */
	text-decoration:underline;    /* Firefox 1.07 WIN and Explorer 5.2 Mac don't support first-letter */
                                    /* pseudo-class on legend elements, but do support it on label elements */
                                    /* you could instead underline first letter on each element and accesskey */
                                    /* each input but doing only legends lessens cognitive load */
						/* changed to label first letter, opera broke after first letter legend */
}

#meraky-pis form fieldset legend {
	font-size:1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */
                       /* be careful with padding, it'll shift the nice offset on top of border  */
}

#meraky-pis form input, #meraky-pis form textarea, #meraky-pis form select {
	/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
	width:auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
	margin:0px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
  font-weight: normal;
}

#meraky-pis form input, #meraky-pis form textarea
{
  font-size: 12px;
  line-height: 18px;
  /*
  padding: 2px 2px 2px 2px;
  _padding: 2px 2px 2px 2px;*/
  background: #FFFFFF url(/images/meraky-pis/form-text-bg.gif) repeat-x scroll 0 0;
}

#meraky-pis form input
{
  line-height: 18px;
  height: 18px;
  /*border: 1px solid #B5B8C8;*/
  border-style: solid solid solid solid;
  border-width: 1px 1px 1px 1px;
  padding:2px 3px 0px 3px;
  _padding:1px 3px 1px 3px;
}

#meraky-pis form select
{
  line-height: 20px;
  height: 20px;
  border: 1px solid #B5B8C8;
}
#meraky-pis form textarea
{
  padding-bottom:0pt;
  padding-top:2px;
  border: 1px solid #B5B8C8;
}

#meraky-pis form input#reset {
	margin-left:0px; /* set margin-left back to zero on reset button (set above) */
}

#meraky-pis textarea { overflow: auto; }

#meraky-pis form small {
	display: block;
	margin: 0 0 5px 190px; /* instructions/comments left margin set to align w/ right column inputs */
	padding: 1px 3px;
	font-size: 88%;
}
#meraky-pis form .normalText {
	display: block;
	margin: 0 0 5px 190px; /* instructions/comments left margin set to align w/ right column inputs */
	padding: 1px 3px;
}

#meraky-pis form label.required{ font-weight:bold; } /* uses class instead of div, more efficient */

#meraky-pis form br {
	clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}
#meraky-pis form div.form-row {
  display: inline-block;
  clear:left;
}

.form-text {
  height:18px;
  line-height:18px;
  vertical-align:middle;
  float:left;
}
.form-text, textarea.form-field {
  background:#FFFFFF url(/images/meraky-pis/text-bg.gif) repeat-x scroll 0pt;
  border:1px solid #B5B8C8;
  padding:2px 3px 0px 3px;
  _padding:1px 3px 1px 3px;
  color: rgb(0,0,0);
}
.form-field {
  font-family:tahoma,arial,helvetica,sans-serif;
  font-size:12px;
  font-size-adjust:none;
  font-stretch:normal;
  font-style:normal;
  font-variant:normal;
  font-weight:normal;
  line-height:normal;
  margin:0pt;
  float:left;
}
.form-empty-field {
  /*color:gray;*/
}
.form-field-wrap {
  display: inline-block;
  position: relative;
  float: left;
  _margin-left:1px;
  width:380px !important;
}
.form-field-wrap .form-trigger {
  background:transparent url(/images/meraky-pis/trigger.gif) no-repeat scroll -17px 0;
  border-color: #B5B8C8;
  border-style:none none solid;
  border-width:0pt 0pt 1px 0;
  cursor:pointer;
  height:21px;
  /*position:absolute;*/
  float:left;
  top:0pt;
  width:17px;
}
.form-field-wrap .form-trigger:hover {
  background:transparent url(/images/meraky-pis/trigger.gif) no-repeat scroll -68px 0;
}
.form-field-focus {
  border-color: #7EADD9;
  border:1px solid #7EADD9;
  color: rgb(0,0,0);
}
/*
.form-field:hover {
  border-color: #7EADD9;
  border:1px solid #7EADD9;
  color: rgb(0,0,0);
}
*/
/* TABLES */

#meraky-pis table {
	width:99.9%;
	border:1px solid #e3f1fe;
	border-top:1px solid #e3f1fe;
	border-right:1px solid #e3f1fe;
	margin:15px 0px 15px 1px;
	border-collapse:collapse;
	}
#meraky-pis caption {
	color: #9ba9b4;
	font-size:.94em;
	letter-spacing:.1em;
	padding:0;
	margin:1em 0 0 0;
	margin-bottom:0;
	caption-side:top;
	text-align:left;
	}	
#meraky-pis tr.odd td,
#meraky-pis tr.odd .column1 {
	background:#f4f9fe url(/images/meraky-pis/background.gif) no-repeat;
	}	
#meraky-pis .column1	{
	background:#f9fcfe;
	}
#meraky-pis td {
	color:#678197;
	border-bottom: 1px solid #e3f1fe;
	border-left:1px solid #e5eff8;
	padding:.3em 1em;
	text-align:center;
	}				
#meraky-pis th {
	font-weight:normal;
	color: #678197;
	text-align:left;
	border-bottom: 1px solid #e3f1fe;
	border-left:1px solid #e5eff8;
	padding:.3em 1em;
	}	
#meraky-pis thead th {
	background:#f4f9fe;
	text-align:center;
	font:bold 1.2em/2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
	color:#66a3d3
	}				
#meraky-pis tfoot th {
	background:#f4f9fe;
	text-align:center;
	}	
#meraky-pis tfoot th strong {
	font:bold 1.2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
	margin:.5em .5em .5em 0;
	color:#66a3d3;
		}		
#meraky-pis tfoot th em {
	color:#f03b58;
	font-weight: bold;
	font-size: 1.1em;
	font-style: normal;
	}	


/* BUTTONS */
#meraky-pis .buttons {
  text-align: left;
  height: 30px;
  clear: both;
}
.buttons a, .buttons button {
    display:inline-block;
    float:left;
    margin:0 7px 0 0;
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;

    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:100%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 30px; /* Links */
}
.buttons button{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 30px; /* IE6 */
}
.buttons button[type]{
    padding:5px 10px 5px 30px; /* Firefox */
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:4px 10px 3px 30px; /* IE7 */
}
.buttons button img, .buttons a img{
    position: absolute;
    display: inline-block;
    margin:1px 3px -3px -23px !important;
    padding:0;
    width:16px;
    height:16px;
}

/* STANDARD */

button:hover, .buttons a:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.buttons a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

/* POSITIVE */

button.positive, .buttons a.positive{
    color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}
.buttons a.positive:active{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}

/* NEGATIVE */

.buttons a.negative, button.negative{
    color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
    background:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
}
.buttons a.negative:active{
    background-color:#d12f19;
    border:1px solid #d12f19;
    color:#fff;
}

/*  BUTTON / KALKULACKA / UVOD */

.button-kalkulacka {
    position: relative;
    display:inline-block;
    float:left;
    margin:25px 30px 0 0;
    padding:0;
    cursor:pointer;
    text-decoration: none;
}
.button-kalkulacka-pripravena {
    margin-top:28px;
    width:142px;
    height:64px;
    background: transparent url(/images/meraky-pis/button-kalkulacka.png) no-repeat scroll 0 0px;
}
.button-kalkulacka-pripravena:hover {
    background-position: 0 -64px;
    text-decoration: underline;
}
.button-kalkulacka-ceka {
    width:144px;
    height:67px;
    background: transparent url(/images/meraky-pis/button-kalkulacka-priprava.png) no-repeat scroll 0 0px;
}
.button-kalkulacka-ceka:hover {
    background-position: 0 -67px;
    text-decoration: underline;
}

.button-kalkulacka-text {
    position: absolute;
    top: 20px;
    left: 12px;
    width:110px;
    height:50px;
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:12px;
    line-height:110%;
    font-weight:bold;
    color:rgb(65,106,163);
    cursor:pointer;
    cursor: hand;
}

/************************************************************************************************************/
/*  AJAX                                                                                                    */
/************************************************************************************************************/

/* AJAX LOADING CONTAINER */

.AJAXLoading
{
  position: relative;
  display: block;
  height: 30px;
  width: 200px;
  margin: 80px auto 0px auto;
	padding: 0px 0px 0px 0px;
	background: transparent url(/images/meraky-pis/loading_animation_liferay.gif) no-repeat 50% 50%;
	border: 1px solid rgb(232,232,232);
}
.AJAXLoading .infoText {
  display: none;
}

/* AUTOCOMPLETER */
#meraky-pis div.autocomplete {
  position:absolute;
  display:block;
  width:auto;
  width:223px !important;
  margin:0px;
  max-height: 150px;
  _height: expression(this.scrollHeight > 150? "150px" : "auto" );
  overflow-y: auto;
  border:1px solid #B5B8C8;
  background-color:rgb(255,255,255);
  z-index: 1000;
}
#meraky-pis div.autocomplete ul {
  list-style-type:none;
  list-style-image: url();
  background-image: url();
  width:auto !important;
  margin:0;
  padding:0;
}
#meraky-pis div.autocomplete ul li.selected { background-color: rgb(195, 218, 249); color: rgb(0,0,0); border: 1px solid rgb(51, 102, 153); }
#meraky-pis div.autocomplete ul li {
  display: block;
  color: rgb(0,0,0);
  position: relative;
  margin:0px;
  padding:2px;
  font-size: 10px;
  font-family: Tahoma;
  cursor:pointer;
  border: 1px solid rgb(255,255,255);
  font-weight: normal;
  background-color:rgb(255,255,255);
  list-style-type:none;
  list-style-image: url();
  background-image: url();
}
#meraky-pis div.autocomplete ul li.vlastni { font-weight: bold; color: rgb(0,0,0); border-bottom: 1px dotted rgb(51, 102, 153); }
#meraky-pis .indicator {
  display: inline-block;
  float: left;
  height: 16px;
  width: 16px;
  margin: 3px 0px 0px 5px;
  padding: 0px 0px 0px 18px;
  background: transparent url(/images/meraky-pis/ajax-loading.gif) no-repeat 0px 0px;
}

/************************************************************************************************************/
/*  INFO                                                                                                    */
/************************************************************************************************************/

/* MESSAGES */
.message {
  display: block;
  _height: 20px;
  min-height: 40px;
  margin: 10px 0px 10px 0px;
	padding: 5px 15px 5px 5px;
	font-weight: bold;
	background-color: rgb(245,245,245);
	border-top: 2px solid rgb(222,222,222);
	border-bottom: 2px solid rgb(222,222,222);
}

.message .icon {
  display: block;
  float: left;
  width: 45px;
  height: 100%;
  margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	/*color: rgb(255,0,0);*/
	text-align: center;
	font-size: 34px;
}

.message .text {
  height: 100%;
  margin: 0px 0px 0px 45px;
	padding: 10px 0px 10px 20px;
	color: rgb(0,0,0);
	color: rgb(86,86,86);
	font-size: 12px;
	border-left: 1px solid rgb(210,210,210);
}

/************************************************************************************************************/
/*  KROKY                                                                                                 */
/************************************************************************************************************/

#navigace-kroky {
  clear: both;
  display: block;
  position: relative;
  float: left;
  width: 99.8%;
  height: 30px;
  margin: 10px 0 15px 0;
  border: 1px solid rgb(187,215,243);
}

#navigace-kroky ul, #navigace-kroky li {
  margin: 0;
  padding: 0;
}

#navigace-kroky ul {
  display: block;
  float:left;
  width: 100%;
  font-family:Verdana,arial,arial,"Geneva CE",sans-serif;
  font-size:0.8em;
  font-weight:bold;

  border: 0px solid rgb(141,178,227);
  list-style-type: none;
}

#navigace-kroky ul li {
  display: inline;
  background-image: url();
  background-color: transparent;
}

#navigace-kroky ul li.krok span {
  float: left;
  display: inline-block;
  height: 30px;
  width: 33.33%;
  background: transparent url(/images/meraky-pis/kroky.png) repeat-x scroll 0 -30px;
}
#navigace-kroky ul li.krok span.predchozi {
  background: transparent url(/images/meraky-pis/kroky.png) repeat-x scroll 0 -90px;
}
#navigace-kroky ul li.krok span.aktualni {
  background: transparent url(/images/meraky-pis/kroky.png) repeat-x scroll 0 -90px;
}

#navigace-kroky ul li.krok span span {
  display: inline-block;
  height: 30px;
  width: auto;
  background-color: transparent;
}

#navigace-kroky ul li.krok span span.krok-sipka {
  float: right;
  width: 26px;
  background: transparent url(/images/meraky-pis/kroky.png) no-repeat scroll 0 0px;
}
#navigace-kroky ul li.krok span.predchozi span.krok-sipka {
  background: transparent url(/images/meraky-pis/kroky.png) no-repeat scroll 0 -60px;
}
#navigace-kroky ul li.krok span.aktualni span.krok-sipka {
  background: transparent url(/images/meraky-pis/kroky.png) no-repeat scroll 0 -150px;
}
#navigace-kroky ul li.krok span span.krok-text {
  height: 20px;
  margin: 7px 0 0 60px;
  text-align: center;
  background-color: transparent;
  background-image: url();
}
#navigace-kroky ul li.krok span.aktualni span.krok-text {
  text-decoration: underline;
  color: rbb(0,0,0);
}


/************************************************************************************************************/
/*  SEMAFOR                                                                                                 */
/************************************************************************************************************/
#semafor-container {
  display: block;
  margin: 15px 0 15px 0;
  padding: 40px 20px 40px 20px;
  border: 1px solid rgb(229,239,248);
}

#semafor-container b {
  display: block;
  margin: 15px 0 0 0;
}

#semafor {
  display: block;
  margin: 0 0 0 15%;
  height: 92px;
  background-image: url(/images/meraky-pis/semafor.png);
  background-repeat: no-repeat;
  background-color: transparent;
}

.spotrebic-usporny {
  background-position: center -184px;
}
.spotrebic-malo-usporny {
  background-position: center -92px;
}
.spotrebic-neusporny {
  background-position: center 0px;
}


/************************************************************************************************************/
/*  OTHERS                                                                                                  */
/************************************************************************************************************/

.hidden {
  display: none !important;
}

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.clear {
  clear: both;
}

.clearLeft {
  clear: left;
}

.clearRight {
  clear: right;
}

/* ALIGN */

.left { text-align: left; }
.center { text-align: center; }
.centerAll * { text-align: center; }
.right { text-align: right; }
.verticalAlignTop { vertical-align: top; }

/* POSITION */

.positionRelative { position: relative; }

/* COLORS */
.white { color: rgb(255,255,255); }
.red { color: rgb(255,0,0); }
.lightRed { color: rgb(255,64,64); }

/* BORDER */
.noBorder { border: 0px; }
.whiteBottomBorder { border-bottom: 1px solid rgb(255,255,255); }

/* WIDE */

.width30px { width: 30px; }
.widthHalf { width: 48%; }
.width90p { width: 90%; }
.widthFull { width: 100%; }


/* COLORS */
.siteRed { color: rgb(255, 0, 0); }
.siteDarkBlue { color: rgb(96, 109, 148); }

/* OTHERS */

.marginLeft30px { margin-left: 30px; }
.marginLeft25px { margin-left: 25px; }
.marginLeft15px { margin-left: 15px; }
.marginBootom0px { margin-bottom: 0px; }
.marginTop0px { margin-top: 0px; }
.marginTop15px { margin-top: 15px; }


.bold { font-weight: bold; }
.italic { font-style: italic; }

/************************************************************************************************************/
/*  BROWSER FIXING                                                                                          */
/************************************************************************************************************/

.fixPng {
  behavior: url(/scripts/iepngfix/iepngfix.htc);
}
/* validation - custom style */
.validation-advice {
  margin: 0px 0px 0px 5px !important;
  padding: 3px 5px 3px 5px !important;
  float:right !important;
/*  display:inline-block !important;*/
  width:210px !important;
}