/*--------------------------------------------------------------------------------------------------------------------------
      Struktura:
        display; position; z-index; float; clear; width; height; overflow; margin; padding; border; background; align; font;
        
      Content:
    
        1) HTML tags, reset
        2) Universal styles (display, float, margin, text-align...)
        3) Layout
---------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------------------------------------------------
 1) HTML tags, reset
---------------------------------------------------------------------------------------------------------------------------*/
* {margin:0; padding:0;}
a img { border: 0 }

body {font-size: 62.5%; font-family: arial, helvetica, sans-serif; background: #5CAC4F url(../img/background.png) repeat-x 0 0; }
a {text-decoration:none;}
/*--------------------------------------------------------------------------------------------------------------------------
 2) Universal styles (display, float, margin, text-align...) 
---------------------------------------------------------------------------------------------------------------------------*/
.noscreen {display:none;}
.cleaner {clear: both; height: 1px;}
.cleaner1 {clear: both; height: 1px; margin: 0 20px; border-bottom: #ccc dotted 1px; }
.style3 {color: #FFFFCC; }
.flash { width: 693px; margin: 5px 0; font-size: 1.4em;  }
.info  { color: #437F3A; }
.flash p { padding: 10px;border: dashed 4px #519946; font-weight: bold; }
/*--------------------------------------------------------------------------------------------------------------------------
 3) Layout
---------------------------------------------------------------------------------------------------------------------------*/
#main {width: 780px; height:100%; margin:0 auto; }


  #header {width: 770px; height: 181px; background: transparent url(../img/header.png) no-repeat 0 0;}
  
  #content-background  {width: 785px; background: #5cac4f url(../img/main-bg-middle.png) 0 0 repeat-y;}
  #content-background-top {background: url(../img/main-bg-top.png) left top no-repeat;}
  #content-background-bottom {padding: 35px 35px 45px 47px; background: url(../img/main-bg-bottom.png) left bottom no-repeat;}
  #content-background-bottom img {float:left; margin: 50px 0 0 30px;}
    #guide {float:left; width: 400px; margin:0 0 20px 50px;}
      #guide h3 {float:left; font-size: 2.1em; margin: 20px 0 0 0; color: #103d87;}
      #guide p {font-size: 1.2em; margin: 15px 0 0 0; line-height: 1.4em;}
      #guide img {margin:10px 0; padding:0;}
      
    .content { margin: 10px 0; font-size: 12px; }
    .content h3 {  font-size: 2.1em; }
    
    #list {float:left;}
      #list ul {float:left; width:450px; margin: 20px 0 0px 80px; list-style-type: none;}
      #list li {padding: 0 0 0 65px; background: url(../img/li-check.gif) no-repeat 25px 8px; font-size: 1.5em; color: #47843b; font-weight: bold; line-height: 2.5em;}
      #list img {margin:40px 0 0 70px;}  
  
    #info-top {width: 693px; background: url(../img/border-dashed-top.png) no-repeat 0 0;}
    #info-bottom {margin-top: 10px; padding: 13px 20px; background: url(../img/border-dashed-bottom.png) no-repeat left bottom; text-align: center;}
    #info-bottom h2 {font-size: 2.0em; color: #a01b1b;}
    
    #sms-code-top { float:left; clear: both; width: 693px; margin: 40px 0 0 0; background: url(../img/orangebox-top.png) no-repeat 0 0;}
    #sms-code-bottom {padding: 10px; background: url(../img/orangebox-bottom.png) no-repeat left bottom;}
      #sms-code-bottom p {font-size: 3.8em; text-align: center; font-weight: bold;  color: #fff;}
      #sms-code-bottom .cz { padding: 0 5px 0 45px; background: #C4491D url(../img/czflag.png) no-repeat 5px 50%; color: #FFFFCC; }
      #sms-code-bottom .sk { padding: 0 5px 0 45px; background: #C4491D url(../img/skflag.png) no-repeat 5px 50%; color: #FFFFCC; }
    
    .gray-i {float:left; width: 692px; margin-top: 10px; background: url(../img/gray-border-i-bg.gif) repeat-y 0 0;}
    .gray-i-top {background: url(../img/gray-border-i-top.gif) no-repeat left top;}
    .gray-i-bottom {padding: 15px 20px; background: url(../img/gray-border-i-bottom.gif) no-repeat left bottom;}
      .gray-i-bottom p {padding-left: 50px; font-size: 1.6em; font-weight: bold; color: #404040; background: url(../img/info.gif) no-repeat 0 2px;}
      .gray-i-bottom a { color: #103D87; }
      .gray-i-bottom a:hover { text-decoration: underline }
      .gray-i-bottom div.error { min-height: 40px; background: url(../img/warning.png) no-repeat 0 2px; }
      .gray-i-bottom div.error p { background: none; }
      .gray-i-bottom div.error ul {padding-left: 70px; font-size: 1.1em; font-weight: bold; color: #FF1000; background: transparent; }
      
    #send-sms {float:left; width: 692px; height: 60px; margin: 10px 0; background: url(../img/send-sms.png) no-repeat 0 0;}
      #send-sms form {margin-top:14px;}
      #send-sms form fieldset { margin: 0; padding: 0; border: 0; }
      #send-sms form p {float:left; margin: 7px 10px 0 70px; font-size:1.7em; font-weight:bold; color: #0d2c7c; }  
      #send-sms form input.text {float:left; width:290px; height:27px; padding:5px 0 0 10px; background: url(../img/input-text.png) no-repeat 0 0; border: 0; font-size:1.7em; font-weight:bold; color: #000;}
      #send-sms form input.button {margin-left: 10px;}
  
    #help { padding: 5px; }
	    #help h2 { font-size: 2.2em; margin: 20px 0 0 0; color: #103d87;}
	    #help p  { font-size: 1.3em; margin: 8px 0 0 0; line-height: 20px; }
	    #help td.form { padding: 40px 8px 0 58px; vertical-align: top; }
	    #help form { font-size: 1.6em; margin: 0 0 8px 0; }
	    #help form h4 { font-size: 0.9em; margin: 14px 0 10px 0; color: #333; }
	    #help form input.text { width: 300px; font-size: 1.2em; padding: 3px 6px; }
	    #help form input.button { font-size: 1.1em; padding: 5px 14px; margin: 20px 0 0 0; border: 0; background-color: #333; color: #fff; }
	    #help form input.imagebutton { margin: 20px 0 0 0; }
	    
    #calculator { padding: 5px; }
	    #calculator h2 { font-size: 2.2em; margin: 20px 0 0 0; color: #103d87;}
	    #calculator h3 { font-size: 2.0em; margin: 20px 0 15px 0; padding: 0 0 5px 30px; background: url(../img/calc.gif) no-repeat left 10%; border-bottom: dotted 1px #ccc; color: #D36D25;}
	    #calculator h4 { font-size: 1.8em; margin: 15px 0 15px 0; padding: 0 0 5px 30px; background: url(../img/calc.gif) no-repeat left 10%; color: #D36D25;}
	    #calculator h4 a { color: #333;  }
	    #calculator h4 a:hover { color: #333; text-decoration: underline; }
	    #calculator p  { font-size: 1.3em; margin: 8px 0 0 0; line-height: 20px; }
	    #calculator .line  { margin: 0 18px 20px 0; border-bottom: dotted 1px #ccc; }
	    #calculator td.form { width: 400px; padding: 40px 8px 0 0px; vertical-align: top; }
	    #calculator td.form img { margin: 0; }
	    #calculator td.img { width: 275px; padding: 0 15px 0 0; vertical-align: top; }

	    #calculator form { font-size: 1.6em; margin: 0 0 8px 0; }

	    #calculator form h4 { font-size: 0.9em; margin: 14px 0 10px 0; color: #333; }
	    #calculator form label { width: 140px; font-size: 0.9em; font-weight: bold; color: #333; }
	    #calculator form select { width: 200px; font-size: 1em; padding: 2px 6px; }
	    #calculator form input.text { width: 50px; font-size: 1em; padding: 2px 6px; }
	    #calculator form input.button { font-size: 1.1em; padding: 5px 14px; margin: 20px 0 0 0; border: 0; background-color: #333; color: #fff; }
	    #calculator form input.imagebutton { clear: both; margin: 20px 0 0 85px; }
	    #calculator .vysledky { margin: 40px 0 0 0; border: solid 1px #C4D4DE; background: #EAF7FC url(../img/alarm.png) no-repeat 10px 20%; }
	    #calculator .vysledky table {  width: 100%; margin: 10px 0 0 70px; font-size: 1.4em; }
	    #calculator .vysledky td.popis { width: 130px; }
	    #calculator .vysledky td { padding: 0 0 5px 0; }
	    #calculator .nbg { background-image: none !important; }
	    #calculator .nbg table { margin: 10px 0 0 5px !important; }
	    #calculator .nbg td.popis { width: 200px; padding: 0 10px 0 0; text-align: right; }
    
  #footer {margin: 10px 0 20px 0; text-align: center; font-size: 1.2em; color: #38672f;}
  #footer a { text-decoration: underline; color: #28470f }
   .sms {margin-top: 20px; font-size: 0.9em;}