/* http://www.webtoolkit.info/css-clearfix.html */
/* cf = clearfix */
.cf:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.cf {display: inline-block;}
html[xmlns] .cf {display: block;}
* html .cf {height: 1%;}

.left {
  float:left;
}

body {
  font-size:101%;
  background:#9cf url(/img/bg.png) repeat-x fixed left top;
}

html, body, div, p, ul, ol, span, a, table, td, form, img, li, button {
  margin: 0;
  padding: 0;
  font-family: Arial, "Trebuchet MS", Tahoma, Verdana, Sans-Serif;
}

a {color:#f00}

img {border:0}
form {margin:0}

h1 {
  font-family:"Century Gothic","Apple Gothic","Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  font-size:30px;
  font-weight:normal;
  margin:0 0 20px 0;
}

h3 {
  display:block;
  font-size:1em;
  padding:5px 10px;
  margin:20px 0 10px 0;
  color:#333;
  background:#ccc;
  border:1px solid #999;
}

#bodyWrapper {
  font-size:0.8em;
  width:492px;
  margin:20px auto 20px auto;
}

#logo {margin-bottom:5px}

#main {background:#fff;border:1px solid #000;padding:20px;}

#footer {padding:10px;color:#000;background:#ccc;border:1px solid #000;border-top:0;}
#footer a {color:#000;font-weight:bold;}
#footer a:hover {text-decoration:underline;}

span#teaserText {
  font-weight:bold;
  line-height:2em;
}

span#teaserText span {
  background:#ffc;
}


div#teaserText input, div#teaserText select {
  width:100%;
  border:1px solid #999;
  padding:4px;
  margin-bottom:5px;
  color:#999;
}

/* forms */

form {
  background:#ddd;
  padding:20px;
  margin-top:0px;
}

form.content button {
  padding:5px 10px;
}

form#betaForm {border:3px solid #ccc}

h2.wizard {
  margin-bottom:0;
  padding:10px;
  background:#aaa;
}

h2#betaError {
  margin-bottom:0;
  padding:10px;
  background:#f00;
}

div#betaJoin {
  margin-top:20px;
  padding:10px;
  background:#ffc;
  border:1px solid #cc9;
}

div#betaJoin a {
  color:#000;
}

div.help {
  background-color:#ffc;
  border:1px solid #cc0;
  line-height:1.5em;
  margin-bottom:20px;
  padding:10px;
}

label {
  display:block;
  font-weight:bold;
  margin:20px 0 3px 0;
  cursor:pointer;
}

textarea {
  height:70px;
}

.std {
  background-color:#fafafa;
  border:1px solid #999;
  max-width:100%;
  padding:4px;
  width:100%;
}

.std:focus {
  background-color:#fff;
  border-color:#000;
}

.std.error {
  border:1px solid #f00;
}

div.error {
  color:#f00;
  font-size:11px;
  margin:2px;
  display:none;
}

form#betaForm.error {
  border:3px solid #f00;
  border-top:0;
  background:#fed;
  
}



div.note {
  color:#666;
  font-size:11px;
  margin:2px 0 2px 0;
}

form button {
  font-weight:bold;
}

a.button {
  color:#fff;
  font-weight:bold;
  font-size:17px;
  margin-top:10px;
  padding:12px 0 0 15px;
  text-decoration:none;
}

a.button:hover {
  text-decoration:underline;
}

div.imgCaption {
  color:#999;
  border-top:0 !important;
  border-color:#666 !important;
  text-align:center;
}

img.photo {border:1px solid #999;padding:1px;margin-top:20px}

/* index / homepage */

/* http://jirox.net/AsButtonGen/ */
a#install {display:block;float:left;margin-right:20px;width:205px;height:38px;background:#fff url(/img/btnInstall.png) no-repeat} /* bg:#060, height:46, width:216, roundstrength:10 */
a#demo {display:block;float:left;width:124px;height:38px;background:#fff url(/img/btnDemo.png) no-repeat} /* bg:#FF3716, height:46, width:135 */

#propaganda {padding:0;margin:0 0 0px 0;width:100%}
#propaganda, #propaganda li {list-style:none;list-style-image:none}
#propaganda li {margin:0;margin-right:15px;text-align:center;float:left;height:60px;line-height:50px}
#propaganda li.last {margin:0}
#propaganda li img {margin:auto;padding:10px;border:1px solid #fff}
#propaganda li img {border:1px solid #999;border-top:1px solid #ccc;border-left:1px solid #ccc}
#propaganda li:hover img {border:1px solid #333;border-top:1px solid #999;border-left:1px solid #999}
#propaganda li .caption {margin-top:5px;font-size:11px;color:#333}
#propaganda li:hover .caption {margin-top:5px}

h2 {
  display:block;
  font-size:1em;
  padding:5px 10px;
  margin:20px 0 10px 0;
  color:#fff;
  background:#069;
}

#tour {border:10px solid #09c;background:#fff;width:430px}
#tour ul {float:left;list-style:none;list-style-image:none;margin:0;padding:0 0px 0 0;width:140px;background:#09c;font-size:13px}
#tour ul li {font-weight:bold;color:#def;background:#08b;margin-bottom:5px;padding:5px 10px;cursor:pointer;border-right:5px solid #09c}
#tour ul li.active {color:#09c;background:#fff;border-right:0}
#tour ul li.last {margin-bottom:0}
#lightbox .text {display:none}
#lightbox .text.active {display:block}
#lightbox {float:right;width:270px;padding:10px 10px 5px 5px}
#lightbox em {background:#ffc;font-style:normal}

/* wizard */

form ul, form ul li  {list-style:none;list-style-image:none}
form ul {margin:5px 0 0 0;padding:0}
form ul li {background:#ccc;margin-right:10px;float:left;padding:2px 10px;cursor:pointer;font-weight:bold;color:#666;border:2px solid #ccc}
form ul li.active {background:#999;color:#fff;border-color:#000}

#clr_b.active {background:#666;color:#fff;border-color:#000}
#clr_w.active {background:#fff;color:#000;border-color:#ccc}
#clr_r.active   {background:#f00;color:#fff;border-color:#c00}
#clr_g.active {background:#393;color:#fff;border-color:#060}
#clr_bl.active  {background:#09c;color:#fff;border-color:#069}

#codeWrapper {display:none;margin-top:30px}
h2#codeTitle {margin:0;color:#fff;background:#999}
textarea#code  {background:#ffc;color:#000;margin:0 0 10px 0;width:354px;border:1px solid #000}

.step {border:3px solid #000;margin-bottom:20px}
.step h2 {margin:0;padding:5px;color:#000;font-weight:bold;font-size:13px;background-color:#fff}
.step h2 strong {font-size:40px;margin:0 7px 0 10px;font-family:"Century Gothic","Apple Gothic","Lucida Grande",Helvetica,Arial,Verdana,sans-serif;}
.step ul, .step .padder {padding:0 20px 10px 20px;background:#fff;margin:0;width:364px}
.step.one   {border-color:#f00}
.step.two   {border-color:#393}
.step.three {border-color:#09c}
.step.four  {border-color:#000;margin-bottom:0}
.step.one   h2 strong {color:#f00}
.step.two   h2 strong {color:#393}
.step.three h2 strong {color:#09c}
.step.four  h2 strong {color:#000}

#btnCodeCreate {padding:10px;font-size:19px;border-top:1px solid #666;border-left:1px solid #666;border-right:2px solid #000;border-bottom:2px solid #000}

#betaForm div {margin-bottom:20px;margin-top:-20px}