/* ============================================================
    Optimsys demo // CSS
   ============================================================ */

/* ============================================
    RESET
   ============================================ */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,
cite,code,del,dfn,font,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td
{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;text-align:left;font-family:inherit;}
table{border-collapse:collapse;border-spacing:0;}ol,ul{list-style:none;line-height:1.4em;}q:before,q:after,blockquote:before,
blockquote:after{content:"";}

/* ============================================
    GLOBAL
   ============================================ */

a { color: #99cccc; }
a:hover { color: #ccffff;}

p { line-height: 1.4em; }
p.info-box {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;

  font-size: 0.9em;
  font-weight: bold;
  padding: 10px 40px !important;
  margin: 0 0 1em 0;
}
p.info-box.good {
  background: #80a716 url(img/accept.png) no-repeat 15px center;
  border: 1px solid #3c4f07;
}
p.info-box.bad {
  background: #660000 url(img/error.png) no-repeat 5px center;
}

body {
  background: #081721 url(img/top_bg.jpg) no-repeat top center;
  color: #fff;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 62.5%;
  margin: 0;
  text-align: center;
}

#all {
  background: url(img/bg_main.gif) repeat-y;
  font-size: 1.4em;
  margin: 0 auto;
  text-align: left;
  width: 808px;
}

#all-top-gfx {
  background: url(img/top_gfx.jpg) no-repeat;
}

/* ============================================
    TOP
   ============================================ */

#top {
  height: 231px;
}

#top h1 {
  padding: 25px 0 0 25px;
}

#top h1 a {
  background: url(img/logotype.png);
  display: block;
  height: 163px;
  margin: 0 0 0 0;
  width: 235px;
}
#top h1 span { display: none; }

/* ============================================
    TITLES
   ============================================ */

h2#title {
  background: url(img/h_chci.png) no-repeat center;
  height: 71px;
  margin: 7px 0 0 0;
}
h2#title span { display: none; }

/* ============================================
    MAIN
   ============================================ */

#main {
  background: url(img/main_bg.png) repeat-y;
  margin: 30px 21px 15px 21px;
}

#main .bottom {
  background: url(img/main_bottom.png);
  clear: both;
  height: 5px;
}

/* ============================================
    STEPS
   ============================================ */

#steps {
  float: left;
  width: 496px;
}

#steps p {
  padding: 0 0 15px 0;
}

#step1, #step2 {
  padding: 0 20px 0 20px;
}

#step1 h5 {
  background: url(img/krok1.png);
  height: 54px;
  margin: -20px 0 0 -45px;
  width: 521px;
}
#step1 h5 span { display: none; }

#step2 h5 {
  background: url(img/krok2.png);
  height: 77px;
  margin: 0 0 0 -45px;
  width: 521px;
}
#step2 h5 span { display: none; }

#step2 form {
  margin: 0 0 15px 10px;
}

#step2 form ul li {
  text-align: right;
}

#step2 label {
  line-height: 33px;
  margin: 0 25px 0 0;
}

#step2 form .note {
  color: #99cccc;
  font-size: 0.8em;
  margin: 0 172px 0 0;
}

#step2 .error {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;

  background: #660000 url(img/error.png) no-repeat left center;
  border: 1px solid #081721;
  color: #fff;
  font-size: 0.8em;
  margin: 0 auto 10px auto;
  padding: 5px 0 5px 40px;
  width: 85%;
}

#step2 input#pin, #step2 input#confirmation {
  border: 0;
  margin: 0 0 2px 0;
  padding: 9px 10px;
}

#step2 input#pin {
  background: url(img/input_long.png) no-repeat;
  margin-left: 1px;
  width: 343px;
}

#step2 input#confirmation {
  background: url(img/input_short.png) no-repeat;
  width: 73px;
}

#step2 input[type=submit] {
  background: url(img/submit.png) no-repeat;
  border: 0;
  cursor: pointer;
  height: 37px;
  margin: 0 218px 0 0;
  width: 147px;
}
#step2 input[type=submit]:hover {
  background-position: 0 -37px;
}

/* ============================================
    COSTS
   ============================================ */

#costs {
  float: right;
  width: 256px;
}

#costs h4 {
  background: url(img/h_kolik.png) no-repeat center;
  height: 54px;
}
#costs h4 span { display: none; }

#costs ul {
  padding: 20px 0 20px 20px;
}

#costs ul li {
  background: url(img/accept.png) no-repeat left top;
  font-weight: bold;
  padding: 0 30px 20px 30px;
}

/* ============================================
    TRANSCRIPT
   ============================================ */

#transcript {
  margin: 15px 21px 15px 21px;
}

#transcript h2 {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  background: #081721;
  border: 1px solid #6890ab;
  margin: 0 0 20px 0;
  padding: 20px;
}

#poll {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  background: #18394f;
  margin: 0 0 30px 0;
  padding: 15px;
}

#poll h3 {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;

  background: #081721;
  border: 1px solid #6890ab;
  color: #98c51e;
  font-size: 1.0em;
  font-weight: bold;
  margin: 0 0 15px 0;
  padding: 5px 20px;
}

#poll label {
  padding: 0 0 0 5px;
}

#poll label.email {
  display: block;
  font-weight: bold;
  margin: 10px 0 0 0;
  padding: 0;
}

#poll li {
  line-height: 1.6em;
}

#poll p.note {
  font-size: 0.8em;
  margin: 0 0 1em 0;
}

#poll p.final-note {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;

  background: #081721;
  color: #98c51e;
  display: inline-block;
  float: right;
  font-size: 0.9em;
  margin: 5px 65px 0 0;
  padding: 5px 10px;
}

#poll input#info_email {
  background: url(img/input_long.png) no-repeat;
  border: 0;
  margin: 5px 5px 5px 1px;
  padding: 9px 10px;
  width: 343px;
}

#poll input[type=submit] {
  background: url(img/save.png) no-repeat;
  border: 0;
  cursor: pointer;
  height: 37px;
  width: 147px;
}

#file-upload {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  background: #18394f;
  float: left;
  margin: 0 0 15px 0;
  padding: 15px;
}

#file-upload h3 {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;

  background: #081721;
  color: #98c51e;
  font-weight: bold;
  padding: 5px 10px;
  margin: -5px -5px 0.5em -5px;
}

#file-upload p {
  font-size: 0.9em;
  margin: 0 0 0.5em 0;
}

#file-upload .info {
  border-right: 1px dashed #081721;
  float: left;
  padding: 0 14px 0 0;
  width: 61%;
}

#file-upload form {
  float: right;
  width: 35%;
}

#file-upload input[type=submit] {
  display: block;
  margin: 7px 0 0 auto;
}

#transcript a.refresh {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;

  background: #18394f url(img/arrow_refresh.png) no-repeat 4px center;
  border: 1px solid #4a7088;
  display: block;
  float: left;
  font-size: 0.9em;
  line-height: 22px;
  padding: 0 5px 0 25px;
  text-decoration: none;
}
#transcript a.refresh:hover {
  background-color: #224760;
}

#transcript form.newsletter {
  margin: 0 0 10px 0;
  float: right;
}

#transcript label.newsletter {
  font-size: 0.9em;
}

table#history {
  clear: both;
  margin: 0 0 25px 0;
  width: 100%;
}

table#history th {
  background: #567890; /*#ef9103;*/
  border-top: 1px solid #fff;
  border-left: 1px solid #c9e2f3;
  border-bottom: 1px solid #003333;
  border-right: 1px solid #003333;
  font-size: 0.9em;
  font-weight: bold;
  padding: 10px 5px;
  text-align: center;
}

table#history td {
  background: #18394f;
  border: 1px solid #081721;
  border-left: 1px solid #c9e2f3;
  padding: 10px 8px;
}

table#history p {
  margin: 0 0 1em 0;
}

table#history td.id {
  background: #081721;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
}

table#history td.date {
  background: #112c3e;
  font-size: 0.9em;
  width: 70px;
}

table#history td.date span {
  background: url(img/calendar.png) no-repeat top center;
  display: block;
  padding: 20px 0 0 0;
  text-align: center;
}

table#history td.text {
  background: #f5fbff;
  color: #000;
  vertical-align: text-top;
}

table#history td.info a {
  display: block;
  font-size: 0.9em;
  line-height: 2.0em;
  width: 55px;
}

table#history td.bottom {
  border-left: 1px solid #081721;
  font-size: 0.9em;
  text-align: right;
}

table#history .length {
  background: url(img/clock.png) no-repeat left center;
  padding: 0 0 0 20px;
}

table#history .play {
  background: url(img/doc_music.png) no-repeat left center;
  padding: 0 0 0 20px;
}

table#history .delete {
  background: url(img/bin_closed.png) no-repeat left center;
  padding: 0 0 0 20px;
}

table#history .delete-all {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;

  background: #081721 url(img/bin_closed2.png) no-repeat left center;
  font-size: 0.9em;
  padding: 5px 5px 5px 20px;
  text-decoration: none;
}

/* ============================================
    FAQ, PROMOTION, LEGAL, SECURITY
   ============================================ */

#faq-notice {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  background: #081721 url(img/faq_icon.png) no-repeat left center;
  margin: 10px 21px 5px 21px;
  padding: 15px 20px 15px 80px;
}

#faq-notice p {
  /*font-style: italic;*/
}

#faq-notice a {
  /*font-weight: bold;*/
}

#faq, #legal, #security {
  margin: 15px 21px 15px 21px;
}

#faq h2, #legal h2, #security h2 {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  background: #081721 url(img/faq_icon.png) no-repeat left center;
  border: 1px solid #6890ab;
  margin: 0 0 15px 0;
  padding: 20px 20px 20px 80px;
}
#legal h2, #security h2 {
  background-image: none;
  padding: 20px;
}

#faq h3, #legal h3 {
  font-size: 1em;
  font-weight: bold;
  margin: 0 0 15px 0;
}

#faq ul.questions {
  float: left;
  padding: 0 0 15px 0;
  width: 470px;
}

#faq ul.questions li {
  background: url(img/help.png) no-repeat left top;
  margin: 0 0 0 10px;
  padding: 0 0 10px 30px;
}

#faq ul.questions li a {
  font-weight: bold;
}

#faq #questions-other {
  float: right;
  margin: -30px 3px 0 0;
  width: 280px;
}

#faq #questions-other h3 {
  background: #22455b url(img/telephone.png) no-repeat left top;
  border-bottom: 1px dotted #fff;
  clear: both;
  font-size: 0.9em;
  margin: 0 0 8px 5px;
  padding: 3px 5px 8px 25px;
}

#faq #questions-other h3 span {
  color: #ff9900;
  font-size: inherit;
  font-weight: inherit;
}

#faq dl {
  font-size: 0.9em;
  padding: 0 0 15px 30px;
}

#faq dt, #faq dd {
  display: inline-block;
  padding: 0 0 2px 0;
  width: 105px;
}

#faq dd {
  width: 125px;
}

#faq hr {
  border: 0;
  border-bottom: 1px solid #6890ab;
  clear: both;
  margin: 0 0 15px 0;
}

#faq .q-a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  background: #1e3e53;
  margin: 0 0 20px 0;
  padding: 10px;
}

#faq .q-a h4 {
  background: url(img/comment.png) no-repeat left top;
  color: #98c51e;
  display: inline-block;
  font-weight: bold;
  margin: 0 0 0.5em 0;
  padding: 0 0 0 20px;
}

#faq .q-a a.back {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;

  background: #17374c url(img/up_small.png) no-repeat left center;
  float: right;
  font-size: 0.8em;
  margin: -3px 0 0 0;
  padding: 3px 6px 3px 15px;
}

#faq .q-a p {
  margin: 0 0 0.5em 0;
}

#faq .q-a ul {
  list-style: disc;
  margin: 0 0 0 22px;
}
#faq .q-a ol {
  list-style: decimal;
  margin: 0 0 2px 23px;
}

#promotion {
  background: url(img/promo.jpg) no-repeat;
  height: 188px;
  margin: -10px 21px 5px 21px;
}

#promotion p.business {
  background: url(img/promo_text_diktovani.png) no-repeat;
  float: left;
  height: 69px;
  margin: 42px 0 0 10px;
  width: 227px;
}
#promotion p.callcenter {
  background: url(img/promo_text_monitorovani.png) no-repeat;
  float: right;
  height: 91px;
  margin: 65px 205px 0 0;
  width: 169px;
}
#promotion p span {
  display: none;
}

#legal ol {
  list-style: decimal;
  margin: 0 0 1em 25px;
}

#legal p {
  margin: 0 0 1em 0;
}

#security p {
  padding: 0 1em;
}

#security form {
  margin: 1em;
}

#security label {
  display: inline-block;
  width: 100px;
}

#security .note {
  display: block;
  font-size: 0.9em;
  margin: 0 0 0 105px;
}

#security input[type=text], #security input[type=password] {
  background: url(img/input_long.png) no-repeat;
  border: 0;
  margin: 5px 0;
  padding: 9px 10px;
  width: 343px;
}

#security input[type=submit] {
  background: url(img/confirm.png) no-repeat;
  border: 0;
  cursor: pointer;
  height: 37px;
  margin: 5px 0 0 100px;
  width: 147px;
}

/* ============================================
    FOOTER
   ============================================ */

#footer {
  background: url(img/bottom_bg.png) no-repeat bottom;
  clear: both;
  margin: 0 0 40px 0;
  padding: 10px 21px 20px 21px;
}

#footer .logotypes {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  background: #4b697e;
  float: left;
  min-height: 106px;
  padding: 33px 20px 0 20px;
  text-align: center;
  width: 336px;
}

#footer .logotypes a {
  display: inline-block;
}
#footer .logotypes a span {
  display: none;
}

#footer .logotypes a.phonexia {
  background: url(img/logo_phonexia.png);
  height: 65px;
  margin: 0 20px 0 0;
  width: 152px;
}
#footer .logotypes a.phonexia:hover {
  background-position: 0 -65px;
}

#footer .logotypes a.optimsys {
  background: url(img/logo_optimsys.png);
  height: 48px;
  width: 151px;
}
#footer .logotypes a.optimsys:hover {
  background-position: 0 -48px;
}

#footer .links-and-legal {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  background: #18394f;
  font-size: 0.9em;
  margin: 0 0 0 390px;
  padding: 15px;
}

#footer .links-and-legal ul {
  display: inline-block;
  margin: 0 20px 0 0;
}

#footer .links-and-legal li {
  background: url(img/url.png) no-repeat left top;
  padding: 0 0 5px 25px;
}

#footer hr {
  border: 0;
  border-bottom: 1px dashed #fff;
  margin: 5px 0;
}