/* -----------------------------------------------------------------------


 Blueprint CSS Framework 0.9
 http://blueprintcss.org

   * Copyright (c) 2007-Present. See LICENSE for more info.
   * See README for instructions on how to use Blueprint.
   * For credits and origins, see AUTHORS.
   * This is a compressed file. See the sources in the 'src' directory.

----------------------------------------------------------------------- */

/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}

/* typography.css */
html {font-size:100.01%;}
body {font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:2em;line-height:1;margin:2em 0 1em;}
h2 {font-size:1.5em;margin:2em 0 1em;}
h3 {font-size:1.2em;line-height:1;margin:2em 0 1em;}
h4 {font-size:1em;line-height:1.25;margin-bottom:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {margin:0 0 1.5em;}
p img.left {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
a:focus, a:hover {color:#000;}
a {color:#009;text-decoration:underline;}
blockquote {margin:1.5em;color:#666;font-style:italic;}
strong {font-weight:bold;}
em, dfn {font-style:italic;}
dfn {font-weight:bold;}
sup, sub {line-height:0;}
abbr, acronym {border-bottom:1px dotted #666;}
address {margin:0 0 1.5em;font-style:italic;}
del {color:#666;}
pre {margin:1.5em 0;white-space:pre;}
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
li ul, li ol {margin:0;}
ul, ol {margin:0 1.5em 1.5em 0;padding-left:3.333em;}
ul {list-style-type:disc;}
ol {list-style-type:decimal;}
dl {margin:0 0 1.5em 0;}
dl dt {font-weight:bold;}
dd {margin-left:1.5em;}
table {margin-bottom:1.4em;width:100%;}
th {font-weight:bold;}
thead th {background:#c3d9ff;}
th, td, caption {padding:4px 10px 4px 5px;}
tr.even td {background:#e5ecf9;}
tfoot {font-style:italic;}
caption {background:#eee;}
.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
.hide {display:none;}
.quiet {color:#666;}
.loud {color:#000;}
.highlight {background:#ff0;}
.added {background:#060;color:#fff;}
.removed {background:#900;color:#fff;}
.first {margin-left:0;padding-left:0;}
.last {margin-right:0 !important;padding-right:0;}
.top {margin-top:0;padding-top:0;}
.bottom {margin-bottom:0;padding-bottom:0;}


/* grid.css */
.container {width:950px;margin:0 auto;}
.showgrid {background:url(src/grid.png);}
.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {float:left;margin-right:10px;}
.last {margin-right:0;}
.span-1 {width:30px;}
.span-2 {width:70px;}
.span-3 {width:110px;}
.span-4 {width:150px;}
.span-5 {width:190px;}
.span-6 {width:230px;}
.span-7 {width:270px;}
.span-8 {width:310px;}
.span-9 {width:350px;}
.span-10 {width:390px;}
.span-11 {width:430px;}
.span-12 {width:470px;}
.span-13 {width:510px;}
.span-14 {width:550px;}
.span-15 {width:590px;}
.span-16 {width:630px;}
.span-17 {width:670px;}
.span-18 {width:710px;}
.span-19 {width:750px;}
.span-20 {width:790px;}
.span-21 {width:830px;}
.span-22 {width:870px;}
.span-23 {width:910px;}
.span-24 {width:950px;margin-right:0;}
input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 {border-left-width:1px;border-right-width:1px;padding-left:5px;padding-right:5px;}
input.span-1, textarea.span-1 {width:18px;}
input.span-2, textarea.span-2 {width:58px;}
input.span-3, textarea.span-3 {width:98px;}
input.span-4, textarea.span-4 {width:138px;}
input.span-5, textarea.span-5 {width:178px;}
input.span-6, textarea.span-6 {width:218px;}
input.span-7, textarea.span-7 {width:258px;}
input.span-8, textarea.span-8 {width:298px;}
input.span-9, textarea.span-9 {width:338px;}
input.span-10, textarea.span-10 {width:378px;}
input.span-11, textarea.span-11 {width:418px;}
input.span-12, textarea.span-12 {width:458px;}
input.span-13, textarea.span-13 {width:498px;}
input.span-14, textarea.span-14 {width:538px;}
input.span-15, textarea.span-15 {width:578px;}
input.span-16, textarea.span-16 {width:618px;}
input.span-17, textarea.span-17 {width:658px;}
input.span-18, textarea.span-18 {width:698px;}
input.span-19, textarea.span-19 {width:738px;}
input.span-20, textarea.span-20 {width:778px;}
input.span-21, textarea.span-21 {width:818px;}
input.span-22, textarea.span-22 {width:858px;}
input.span-23, textarea.span-23 {width:898px;}
input.span-24, textarea.span-24 {width:938px;}
.append-1 {padding-right:40px;}
.append-2 {padding-right:80px;}
.append-3 {padding-right:120px;}
.append-4 {padding-right:160px;}
.append-5 {padding-right:200px;}
.append-6 {padding-right:240px;}
.append-7 {padding-right:280px;}
.append-8 {padding-right:320px;}
.append-9 {padding-right:360px;}
.append-10 {padding-right:400px;}
.append-11 {padding-right:440px;}
.append-12 {padding-right:480px;}
.append-13 {padding-right:520px;}
.append-14 {padding-right:560px;}
.append-15 {padding-right:600px;}
.append-16 {padding-right:640px;}
.append-17 {padding-right:680px;}
.append-18 {padding-right:720px;}
.append-19 {padding-right:760px;}
.append-20 {padding-right:800px;}
.append-21 {padding-right:840px;}
.append-22 {padding-right:880px;}
.append-23 {padding-right:920px;}
.prepend-1 {padding-left:40px;}
.prepend-2 {padding-left:80px;}
.prepend-3 {padding-left:120px;}
.prepend-4 {padding-left:160px;}
.prepend-5 {padding-left:200px;}
.prepend-6 {padding-left:240px;}
.prepend-7 {padding-left:280px;}
.prepend-8 {padding-left:320px;}
.prepend-9 {padding-left:360px;}
.prepend-10 {padding-left:400px;}
.prepend-11 {padding-left:440px;}
.prepend-12 {padding-left:480px;}
.prepend-13 {padding-left:520px;}
.prepend-14 {padding-left:560px;}
.prepend-15 {padding-left:600px;}
.prepend-16 {padding-left:640px;}
.prepend-17 {padding-left:680px;}
.prepend-18 {padding-left:720px;}
.prepend-19 {padding-left:760px;}
.prepend-20 {padding-left:800px;}
.prepend-21 {padding-left:840px;}
.prepend-22 {padding-left:880px;}
.prepend-23 {padding-left:920px;}
.border {padding-right:4px;margin-right:5px;border-right:1px solid #eee;}
.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #eee;}
.pull-1 {margin-left:-40px;}
.pull-2 {margin-left:-80px;}
.pull-3 {margin-left:-120px;}
.pull-4 {margin-left:-160px;}
.pull-5 {margin-left:-200px;}
.pull-6 {margin-left:-240px;}
.pull-7 {margin-left:-280px;}
.pull-8 {margin-left:-320px;}
.pull-9 {margin-left:-360px;}
.pull-10 {margin-left:-400px;}
.pull-11 {margin-left:-440px;}
.pull-12 {margin-left:-480px;}
.pull-13 {margin-left:-520px;}
.pull-14 {margin-left:-560px;}
.pull-15 {margin-left:-600px;}
.pull-16 {margin-left:-640px;}
.pull-17 {margin-left:-680px;}
.pull-18 {margin-left:-720px;}
.pull-19 {margin-left:-760px;}
.pull-20 {margin-left:-800px;}
.pull-21 {margin-left:-840px;}
.pull-22 {margin-left:-880px;}
.pull-23 {margin-left:-920px;}
.pull-24 {margin-left:-960px;}
.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float:left;position:relative;}
.push-1 {margin:0 -40px 1.5em 40px;}
.push-2 {margin:0 -80px 1.5em 80px;}
.push-3 {margin:0 -120px 1.5em 120px;}
.push-4 {margin:0 -160px 1.5em 160px;}
.push-5 {margin:0 -200px 1.5em 200px;}
.push-6 {margin:0 -240px 1.5em 240px;}
.push-7 {margin:0 -280px 1.5em 280px;}
.push-8 {margin:0 -320px 1.5em 320px;}
.push-9 {margin:0 -360px 1.5em 360px;}
.push-10 {margin:0 -400px 1.5em 400px;}
.push-11 {margin:0 -440px 1.5em 440px;}
.push-12 {margin:0 -480px 1.5em 480px;}
.push-13 {margin:0 -520px 1.5em 520px;}
.push-14 {margin:0 -560px 1.5em 560px;}
.push-15 {margin:0 -600px 1.5em 600px;}
.push-16 {margin:0 -640px 1.5em 640px;}
.push-17 {margin:0 -680px 1.5em 680px;}
.push-18 {margin:0 -720px 1.5em 720px;}
.push-19 {margin:0 -760px 1.5em 760px;}
.push-20 {margin:0 -800px 1.5em 800px;}
.push-21 {margin:0 -840px 1.5em 840px;}
.push-22 {margin:0 -880px 1.5em 880px;}
.push-23 {margin:0 -920px 1.5em 920px;}
.push-24 {margin:0 -960px 1.5em 960px;}
.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float:right;position:relative;}
.prepend-top {margin-top:1.5em;}
.append-bottom {margin-bottom:1.5em;}
.box {padding:1.5em;margin-bottom:1.5em;background:#E5ECF9;}
hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:none;}
hr.space {background:#fff;color:#fff;visibility:hidden;}
.clearfix:after, .container:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
.clearfix, .container {display:block;}
.clear {clear:both;}


body {
  background: #cfd6dc url(/images/flowdock_main_bg_lighter.jpg) no-repeat top center;
  font-family: "Lucida Grande", "Segoe UI", Tahoma, "DejaVu Sans", "Bitstream Vera Sans", sans-serif;
  font-size: 12pt;
  color: #111;
  padding: 0;
  margin: 0;
  min-width: 950px;
  text-align: center;
  height: 100%;
  text-rendering: optimizeLegibility;
}

#wrapper {
  left: 0;
  min-height: 100%;
  position: absolute;
  top: 0;
  width: 100%;  
}

#main, #promo-content {
  padding-bottom: 200px;
  border-left:1px solid #ccc;
  border-right:1px solid #ccc;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

#frontpage #promo-content {
  border:0;
}

#main {
  background:#fff;
}

a, a:visited { 
  color: #0072bc;
  text-decoration: none;
}

p.secondary {
  color: #444444;
}

a.secondary, a.secondary:visited {
  color: #4e4e4e;
}
a:hover, a.secondary:hover {
  color: #272727;
}

a.admin-action {
  padding: 0.3em 0.5em;
  border: 1px solid #bbb;
  text-decoration: none;
  background: url(/images/admin-button-bg.png) repeat-x top left;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  color: #fff;
}
a.admin-action:hover {
  color: #ff5;
  border-color: #dd5;
}

h1, h2, h3, h4, h5, h6 { 
  font-weight: bold;
  color: #333;
}
div.hr {
  height: 2px;
  border: none;
  background: url(/images/hr_bg.png) repeat-x top left;
  margin: 0;
  clear: both;
}

/* Generic utility classes */
.small {
  font-size: 80% !important;
  margin: 0;
  line-height: 120%;
}
.border-none {
  border: none !important;
}
.gravatar, .avatar {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background: #fff url(/images/default_user_icon_30.png) no-repeat center center;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  border:1px solid #F2F2F2;
}
.loader {
  display: block;
  width: 16px;
  height: 16px;
  background: transparent url(/images/loader_grey.gif) no-repeat center center;
}
.column-2 {
  float: left;
  width: 50%;
}
.hidden {
  display: none;
}
.light-bg {
  background: #eee;
  background: rgba(255,255,255,0.9);
}
.centered {
  text-align: center;
}
.right {
  text-align: right;
}

/* Layout styles */
.flash {
  position: absolute;
  width: 100%;
  top: 0;
  right: 0;
  text-align: center;
  background: #eee;
  border-bottom: 1px solid #aaa;
  padding: 0.3em 0;
  z-index: 99999;
}
.flash.notice {
  background: #eef;
  border-color: #99d;
  color: #225;
}
.flash.error {
  background: #fee;
  border-color: #f44;
  color: #c22;
}
.flash.success {
  background: #efe;
  border-color: #4a4;
  color: #252;
}

#sitebody {
  margin: 0 auto;
  padding: 0 0 1em;
  width: 900px;
  text-align: left;
  position: relative;
}

#header {
  height: 40px;
  padding-top: 20px;
}
#header a.logo-link {
  float: left;
}
h1.flowdock-title {
  background: transparent url(/images/flowdock-title-small-lighter.png) no-repeat top left;
  height: 23px;
  margin: 0 1px;
  text-indent: -9999px;
}
#header .main-navigation li {
  padding:0;
}

#header.login {
  height: auto;
  background: none;
}
#header.login a.logo-link {
  float: none;
  display: block;
  height: auto;
  position: relative;
  width: 124px;
  height: 135px;
  background-image: url(/images/flowdock_iconlogo_large.png);
  margin: 20px auto;
}

#header.login h1.flowdock-title,
#header.login .login-navigation,
#header.login .main-navigation { display: none; }

#header ul.main-navigation {
  float:left;
  padding:0;
  margin:3px 0 0 40px;
  text-shadow:0 1px 1px #fff;
}

#header .login-navigation {
  float:right;
  list-style:none;
  margin:0;
  padding:0;
}

#header .login-navigation li {
  float:left;
  text-shadow:0 1px 1px #fff;
  font-weight:bold;
}


#header .login-navigation li.login {
  margin:0;
  border-left: 1px solid #aaaeb1;
  padding-left: 20px;
}

#header .login-navigation li.login a {
  padding-right:25px;
  background:url(/images/login-button.png) bottom right no-repeat;
  display:block;
}

#header .login-navigation li.signup {
  padding-right: 20px;
  margin:0;
  border-right: 1px solid #fefefe;
}
#header div.hr {
  margin: 10px 0;
  float: left;
  width: 707px;
}

.main-navigation,
.footer-links {
  position: relative;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.main-navigation li {
  display:inline;
  margin-right: 2em;
}
.footer-links li {
  display:inline;
  margin-left: 2em;
}
.main-navigation li.home {
  font-weight: bold;
}
.main-navigation li a {
  color: #4e4e4e;
  font-weight: bold;
  font-size: 100%;
}
.main-navigation li.current a {
  color: #0072BC;
}
.main-navigation li a:hover, .main-navigation li.current a:hover,
.login-navigation li a:hover {
  color: #0072BC;
}

#sidebar-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#sidebar-menu li {
  border-top: 1px solid #ddd;
  margin: 0px;
  padding: 0;
  text-align: left;
  width: 200px;
}
#sidebar-menu li:first-child {
  
}
#sidebar-menu li:last-child {
  border-bottom: 0;
}
#sidebar-menu li:hover, #sidebar-menu li:hover a {
  background: #eee;
  color:#0072BC;
}
#sidebar-menu li a {
  font-weight: bold;
  font-size: 100%;
  padding: 10px 0 10px 20px;
  display: block;
  color:#555;
  border-left:1px solid #fff;
  text-shadow:0 1px #fff;
}

#sidebar-menu li.selected a {
  color:#0072BC;
}

#sidebar-menu li.selected {
  background: #efefef;
  border-bottom:1px solid #fff;
  border-top:1px solid #fff;
  box-shadow:0 -1px 1px #ccc;
  -moz-box-shadow:0 -1px 1px #ccc;
  -webkit-box-shadow:0 -1px 1px #ccc;
}

#content .main-header {
  text-align: center;
  font-size: 200%;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
  margin: 0 0 1em 0;
  line-height: 120%;
}

.main-header#flows-header, .main-header#login-header {
  margin-left: 0;
  text-align: center;
}

#session-panel {
  position: relative;
  float: right;
  text-align: left;
  font-size: 75%;
  margin-top: -5px;
  z-index: 999;
}
#session-panel a {
  text-decoration: none;
  line-height: 16px;
  margin-right: 10px;
  color: #434343;
}
#session-panel a:hover {
  color: #0163d5;
}
#session-panel .avatar {
  position: relative;
  float: left;
  display: block;
  margin: -15px 5px 0 -41px;
  width: 30px;
  height: 30px;
}

#session-panel .email {
  font-size:90%;
  margin-left:6px;
}

#session-panel .session-links {
  white-space: nowrap;
}

#content {
  padding: 30px 0;
}

#old-footer {
  clear: both;
  text-align: right;
  font-size: 75%;
  color: #666;
  position: relative;
  padding-top: 5px;
  margin-bottom: 10px;
}
#footer {
  background: #2d2d31 url(/images/footer_bg.png) repeat-x top center;
  clear: both;
  width: 100%;
  height: 200px;
  padding-top: 10px;
  display: block;
  color: white;
  text-align: left;
  bottom: 0;
  left: 0;
  position: absolute;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:90%;
}
#footer a {
  text-decoration: none;
  color: white;
  border-color: #6699CC;
}
#footer a:hover {
  color: #77AADD;
  border-color: #77AADD;
}
#footer h4 {
  font-weight: bold;
  font-size: 100%;
  color: #fff;
  margin:0;
}
#footer p {
  margin:0 0 0 5px;
  line-height: 180%;
}
#footer .copyright {
  margin-top: 5px;
  font-size: 85%;
}
.copyright a {
  margin-left: 10px;
}

.contact-button {
  margin-right: 10px;
  margin-bottom: 8px;
  float: left;
}
#twitter-button{
  display: block;
  background: transparent url(/images/follow_us_button.png) no-repeat; 
  width: 88px;
  height: 31px;
  padding: 8px 0 0 48px;
  margin-top: 5px;
}
#facebook-button{
  display: block;
  background: transparent url(/images/like_button.png) no-repeat; 
  width: 49px;
  height: 31px;
  padding: 8px 0 0 48px;
  margin-top: 5px;
}
#blog-button{
  display: block;
  background: transparent url(/images/blog_button.png) no-repeat; 
  width: 82px;
  height: 31px;
  padding: 8px 0 0 43px;
  margin-top: 5px;
  margin-right: 0;
}

ul#bottom-menu{
  background-color: #202024;
  border: 1px solid #38383f;
  margin-right: 70px;
  margin-top: 5px;
  margin-bottom:0;
  padding: 9px 10px 5px 20px;
  height: 30px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-box-shadow: inset 0 0 10px #111;
  -webkit-box-shadow: inset 0 0 10px #111;
  box-shadow: inset 0 0 10px #111;
  font-weight: normal;
}

ul#bottom-menu li{
  float: left;
  list-style-type: none;
  margin-right: 23px;
  margin-top: 2px;
}

ul#bottom-menu li.last-link {
  margin-right: 5px;
}

.bottom-logo {
  margin-left:-8px;
}


/* Page specific styles */
form#new_user_session .forgot-password-link {
  display: block;
  float: left;
}

#register-form .field.subdomain {
  margin-top: 1em;
}
#register-form .field.subdomain span {
  font-size: 140%;
}

#register-form .field.subdomain input {
  width: 8em;
  text-align: right;
  padding-right: 5px;
}
#register-form label {
  color: #111;
}
#register-form .signup-button {
  margin-top: 3em;
}
#register-form #signup-session-info {
  background: #fff;
  padding: 1em 0em 1em 1em;
  position: relative;
  border: 1px solid rgba(141, 144, 152, 0.8);
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}
#register-form #signup-session-info .content {
  padding-left: 80px;
}
#register-form #signup-session-info .content p {
  margin: 0 0 0.5em;
}
#register-form #signup-session-info .session-info {
  font-size: 120%;
}
#register-form #signup-session-info .avatar {
  position: absolute;
  width: 60px;
  height: 60px;
}
#register-form h2  {
  line-height: 40px;
}
#register-form .number-circle {
  color: #FFF;
  font-size: 120%;
  background-color: #30b7eb;
  display: block;
  float: left;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  text-align: center;
  line-height: 40px;
  margin-right: 15px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}

#flows-page {
  width: 918px;
  position: relative;
  left: -9px;
}
#flows-list {
  float: left;
  margin: 0;
  width: 100%;
}
.flow-list-item {
  width: 288px;
  height: 250px;
  margin: 0 9px 20px;
  display: block;
  float: left;
  position: relative;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  cursor: pointer;
}
.flow-thumbnail {
  background-color: #fff;
}
.flow-thumbnail,
.flow-thumbnail.disabled:hover {
  -webkit-box-shadow: 0 3px 1px rgba(0,0,0,0.3);
  -moz-box-shadow: 0 3px 1px rgba(0,0,0,0.3);
  box-shadow: 0 3px 1px rgba(0,0,0,0.3);
}
.flow-thumbnail:hover {
  -webkit-box-shadow: 0 3px 1px rgba(0,60,113,0.6);
  -moz-box-shadow: 0 3px 1px rgba(0,60,113,0.6);
  box-shadow: 0 3px 1px rgba(0,60,113,0.6);
}
.flow-thumbnail.disabled {
  background-color: #e8ebec;
  display: none;
}
.flow-thumbnail .flow-name {
  font-size: 140%;
  color: #0173c5;
  font-weight: bold;
  line-height: 1.1em;
  text-decoration: none;
  max-height: 2.25em;
  overflow: hidden;
  word-wrap: break-word;
}
.flow-thumbnail.disabled .flow-name {
  color: #888;
}
.flow-thumbnail .org-name {
  margin: 0.3em 0 1em;
}
.flow-thumbnail .flow-overlay {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 286px;
  height: 248px;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  cursor: pointer;
  z-index: 300;
}
.flow-thumbnail:hover .flow-overlay {
  top: -1px;
  left: -1px;
  border: 2px solid #0183d5;
}
.flow-thumbnail.disabled:hover .flow-overlay {
  border-color: transparent;
  cursor: default;
}
.flow-thumbnail .flow-overlay span {
  display: block;
}
.flow-thumbnail .flow-title,
.flow-thumbnail .last-message,
.flow-thumbnail .user-list {
  margin: 15px;
}
.flow-thumbnail:hover .flow-title,
.flow-thumbnail:hover .last-message,
.flow-thumbnail:hover .user-list {
  position: relative;
  top: -1px;
  left: -1px;
}
.flow-thumbnail .flow-title {
  color: #555;
}
.flow-thumbnail .last-message {
  font-size: 85%;
  padding: 0.4em 0;
  border-color: #ccc;
  border-style: solid;
  border-width: 1px 0 1px 0;
}
.flow-thumbnail .last-message .content {
  line-height: 1.3em;
  max-height: 2.6em;
  overflow: hidden;
}
.flow-thumbnail .last-message .content q {
  margin: 0;
  color: #222;
}
.flow-thumbnail .last-message .info {
  margin-top: 0.5em;
  font-size: 85%;
  color: #555;
}
/* User list styles copied from dashboard.css */
.flow-thumbnail .user-list {
  font-size: 75%;
}
.flow-thumbnail .user-list .avatar {
  margin: 0 10px 8px 0;
  float: left;
}
.flow-thumbnail .user-list .avatar.active {
  border-color: #00CF2B;
  -webkit-box-shadow: 0 0 3px #00EF10;
  -moz-box-shadow: 0 0 3px #00EF10;
  box-shadow: 0 0 3px #00EF10;
}
.flow-thumbnail .user-list .avatar.offline  {
  opacity: 0.5;
  -ms-filter: "alpha(opacity=50)";
}
.flow-thumbnail .flow-edit-link {
  z-index: 400;
  position: absolute;
  top: 1px;
  right: 1px;
  color: #888;
  background-color: #eee;
  font-size: 70%;
  padding: 0px 8px;
  -webkit-border-top-right-radius: 3px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-topright: 3px;
  -moz-border-radius-bottomleft: 6px;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 6px;
  border: 1px solid #ccc;
  border-top: none;
  border-right: none;
}
.flow-thumbnail.disabled .flow-edit-link {
  background-color: #fff;
  color: #666;
}
.flow-thumbnail .flow-edit-link:hover {
  color: #fff;
  background-color: #f17c1f;
  border-color: #f17c1f;
}

.flow-list-item.flow-create {
  font-weight: bold;
  width: 284px;
  height: 246px;
  border: 2px solid #888;
  border-color: rgba(0,0,0,0.3);
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.flow-list-item.flow-create,
.flow-list-item.flow-create span {
  color: #666;
  display: block;
}
.flow-list-item.flow-create:hover { border-color: #0183d5; }
.flow-list-item.flow-create:hover span { color: #0173c5; }
.flow-list-item.flow-create .plus {
  font-size: 100px;
  line-height: 100px;
  margin: 40px 0;
  font-weight: bold;
}
.flow-list-item.flow-create .label {
  font-size: 85%;
}
.flows-actions {
  text-align: center;
}
.flows-actions #toggle-disabled-link {
  clear: both;
}

/* Invitation accept page styles */
#accept_invitation {
  position: relative;
  text-align: center;
  float: left;
  padding: 0 10% 2em 10%;
  width: 80%;
}
#accept_invitation .back-link {
  float: left;
}
#accept_invitation div.form {
  display: none;
  overflow: hidden;
}
#accept_invitation #signup_form {
  margin: -30px 0;
}
#accept_invitation .column-2 {
  text-align: center;
  padding: 2em 0 4em;
  width: 50%;
}
#accept_invitation .column-2 p {
  margin-bottom: 2em;
}
#accept_invitation .column-2 .button {
  padding-left: 30px;
  padding-right: 30px;
}
#accept_invitation form.button-to {
  display: inline;
  margin-right: 10px;
}
#accept_invitation form.button-to div {
  display: inline;
}
#accept_invitation form.button-to button {
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  margin: 1em 0;
  padding: 0.6em 1em;
  font-size: 150%;
}

#user-edit-form #change_avatar {
  line-height: 30px;
  padding-left: 6px;
}
#user-edit-form .avatar {
  float: left;
  margin-bottom: 6px;
}

#new-flow-page {
  padding-bottom: 4em;
  overflow: hidden;
}
#new-flow-page .column-left {
  width: 70%;
  padding: 0 2% 0 0;
  margin: 0 2% 0 0;
  border-right: 1px solid #888;
}
#new-flow-page .column-right {
  width: 25%;
  margin: 1em 0 0;
  font-size: 85%;
}
#new-flow-page .help {
  padding: 2em;
}
#new-flow-page #new-flow-submit {
  float: left;
  width: 100%;
  clear: both;
}
#new-flow-page form#new_flow {
  margin-left: 0px;
}

#edit-flow-page .flow-title {
  margin: -1em 0 1em;
  text-align: center;
  font-size: 120%;
}
#edit-flow-page.disabled .flow-title {
  text-decoration: line-through;
}
#edit-flow-page form {
  text-align: center;
  overflow: visible;
}
#edit-flow-page form > * {
  float: none;
}
#edit-flow-page form .submit-field {
  height: 55px;
}
#edit-flow-page form .loader {
  margin: 0 auto;
  height: 41px;
}
#edit-flow-page form .info.disable-status,
#edit-flow-page.disabled form .info.disable-info {
  display: none;
}
#edit-flow-page.disabled form .info.disable-status,
#edit-flow-page form.edit_flow .info.disable-info {
  display: block;
}
#edit-flow-page .flow-users {
  margin: 20px auto 50px;
  width: 75%;
}
#edit-flow-page .flow-user td {
  border-bottom: 1px solid #aaa;
  padding: 5px;
}
#edit-flow-page .flow-user td.button {
  width: 110px;
}
#edit-flow-page .flow-user.blocked {
  color: #aaa;
  text-decoration: line-through;
}
#edit-flow-page .flow-user.blocked .avatar {
  opacity: 0.4;
}
#edit-flow-page .flow-user .flow-user-name {
  line-height: 32px;
}
#edit-flow-page .flow-user .admin-badge {
  display: none;
  background-color: #f17c1f;
  font-weight: bold;
  font-size: 9px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  color: #fff;
  padding: 1px 3px;
  position: relative;
  top: -2px;
  margin: 0 0.5em;
  text-decoration: none;
}
#edit-flow-page .flow-user.admin .admin-badge { display: inline; }
#edit-flow-page .flow-user .avatar {
  float: left;
  margin-right: 10px;
}
#edit-flow-page .flow-user form {
  text-align: right;
}
#edit-flow-page .flow-user form button {
  margin: 0;
}
#edit-flow-page .flow-user form .loader {
  float: right;
  width: 32px;
  height: 32px;
}

#jobs-page img {
  float: right;
  border:1px solid #444444;
  margin: 0 0 1em 1em;
}

#privacy-page ul li {
  margin: 1em 0;
}

#not-supported-page #browser_links {
  margin-top: 150px;
}
#not-supported-page #browser_links a {
  padding: 120px 20px 0px;
  background-position: center top;
  background-repeat: no-repeat;
  text-align: center;
}
#not-supported-page #browser_links a.chrome {
  background-image: url("/images/google_chrome_logo.png");
}
#not-supported-page #browser_links a.firefox {
  background-image: url("/images/mozilla_firefox_logo.png");
}


.content-area {
  background-color: #ffffff;
  text-align: left;
  border-left: 1px solid #ccc;
  margin: 0 -2px;
  padding-bottom: 40px;
}

.wider-content {
  background-color: rgba(255,255,255,0.6);
  padding: 2em 4em;
  margin: 0;
  border-left: 0;
}

.content-side {
  padding: 0 20px;
}

.content-area h1 {
  font-size: 25pt;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
  margin: 30px 0 10px 0;
}

.content-page, .content-area h1, .content-area > p {
  margin-left: 40px;
  margin-right: 40px;
}

.narrower {
  margin-right: 0;
}

.content-area h2, .content-area h3 {
  margin: 0.5em 0 0.5em 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 120%;
  font-weight: bold;
  color: #383838;
}

#tour-signup {
  float: right;
  margin: 2.8em;
  text-align: center;
}

.content-area p, .content-area li {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 90%;
  color: #383838;
}

.content-area p.lead {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 110%;
  color: #666;
  line-height:1.3;
}

.tour-item {
  clear: both;
  margin: 60px 0;
}

.tour-image-left {
  float: left;
  clear: left;
  margin: -10px 20px 20px -40px;
}

.tour-image-right {
  float: right;
  clear: right;
  margin: -10px -40px 20px 20px;
}

.team-member {
  float: left;
  width: 320px;
  margin: 20px 10px 20px 0;
}

.team-member .team-info {
  float: left;
  width: 190px;
}

.team-member h2 {
  margin: -2px 0 0 0;
}

.team-member img.profile {
  float: left;
  padding: 3px;
  margin-right: 15px;
  display: block;
  border: 1px solid #eee;
  background-color: #fff;
  -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.2);
  box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}

.team-member p.description {
  color: #7b7b7b;
  margin-bottom: 8px;
  line-height: 1.25;
}

.linkbar {
  float: left;
  background-color: #eee;
  line-height: 1;
  margin-left: -16px;
  padding: 4px 15px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
}

.linkbar a {
  margin: 0 3px;
}
 
/* TODO: Remove old FAQ and Tour page code */

#faq-page h3 {
  margin: 2em 0 0.5em;
}

.new {
  margin-left: 6px;
}

#about-page .slogan {
  text-align: center;
  font-size: 125%;
  padding: 0.6em 0;
  background: #fff;
  color: #444;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

#tour-page {
  padding: 2em 2.5em;
}
#tour-page .intro {
  padding-bottom: 1em;
}
#tour-page #flowdock-screenshot {
  float: right;
  margin: -5px -25px 25px 15px;
}
#tour-page .case {
  position: relative;
  width: 100%;
  float: left;
  padding: 2em 0;
}
#tour-page .case .balloon {
  background-repeat: no-repeat;
  background-position: top right;
  width: 280px;
  position: absolute;
  left: 0px;
  padding: 25px 0 15px 0;
}
#tour-page .case .balloon h3 {
  color: #fff;
  font-weight: normal;
  margin: 0;
  padding: 0 25px 0 15px;
  line-height: 1.2em;
}
#tour-page .case-1 .balloon { 
  background-image: url(/images/tour-case1-balloon.png); 
  top: 240px;
}
#tour-page .case-2 .balloon { 
  background-image: url(/images/tour-case2-balloon.png); 
  top: 190px;
}
#tour-page .case-3 .balloon { 
  background-image: url(/images/tour-case3-balloon.png);
  top: 200px;
  width: 230px;
}

#tour-page .case .screen-left {
  width: 404px;
  position: absolute;
  top: 20px;
  left: -20px;
}
#tour-page .case .screen-left img { z-index: 300; }
#tour-page .case .screen-right {
  float: right;
  width: 390px;
  margin-right: -20px;
  margin-top: 110px;
}
#tour-page .case.case-2 .screen-right {
  margin-top: 70px;
}
#tour-page .case.case-3 .screen-right { 
  margin-top: 90px;
  width: 437px; 
}

#tour-page .case .screen-right img { z-index: 200; }

#tour-page .case .caption {
  font-size: 83%;
  font-style: italic;
  padding: 5px;
}

#tour-page .case .screen-left .caption {
  width: 250px;
}

#tour-page #signup-button {
  display: block;
  float: left;
  line-height: 120%;
  margin-top: 1em;
}

.simple-box.error {
  background-color:#FFEDED;
  border-bottom:2px solid #D69F9F;
  border-right:2px solid #D69F9F;
  color:#8A1F11;
}

.simple-box {
  -moz-border-radius:10px 10px 10px 10px;
  -webkit-border-radius:10px 10px 10px 10px;
  border-radius:10px 10px 10px 10px;
/*  background-color:#FFEDED;
  border-bottom:2px solid #D69F9F;
  border-right:2px solid #D69F9F;*/
  font-size:140% !important;
  margin:0 0 1em;
  padding:0.1em 0;
  text-align:center;
  float: none !important;
  margin: 0.5em 0;
}

/* --------------------------------------------------------------

   Modified from: Blueprint CSS Framework v0.9.1 (http://www.blueprintcss.org/)

   forms.css
   * Sets up some default styling for forms
   * Gives you classes to enhance your forms

   Usage:
   * For text fields, use class .title or .text
   * For inline forms, use .inline (even when using columns)

-------------------------------------------------------------- */

form.styled { 
  padding: 0 20px;
  margin: auto;
  width: 400px;
  text-align: left;
  font-size: 100%;
  overflow: hidden;
}
form.styled.horizontal {
  width: 550px;
  font-size: 85%;
}

form.styled fieldset {
  margin: 0 0 1.5em 0;
  width: 100%;
  clear: both;
}
form.styled legend { 
  font-weight: bold; 
  font-size:1.2em;
}
form.styled h2 {
  margin: 2em 0 0.5em;
  font-size: 130%;
  clear: both;
  width: 100%;
}

form.styled * {
  font-size: 100%;
}
form.styled > * {
  float: left;
}
form.styled p {
  margin: 0.6em 0;
  font-size: 85%;
}

form.styled .field {
  margin: 0.5em 0;
  position: relative;
  display: block;
  float: left;
  clear: both;
  width: 100%;
}
form.styled .field.additional {
  margin: 0.2em 0 1em;
}
form.styled .field.float-right input, 
form.styled .field.float-right label {
  float: right;
}

form.styled #errorExplanation {
  float: none;
}

form.styled label { 
  font-weight: normal;
  color: #292b32;
  color: rgba(24,26,31,0.8);
  display: block;
}
form.styled .field.inline label {
  display: inline;
}
form.styled.horizontal .field label {
  float: left;
  width: 30%;
  text-align: right;
  line-height: 37px;
  margin-right: 4%;
}

form.styled .info {
  color: #494b52;
  color: rgba(24,26,31,0.6);
  margin: 0;
  clear: both;
}

form.styled.horizontal .info, form.styled.horizontal div.formError {
  margin-bottom:0.2em;
  margin-left: 34%;
}

form.styled div.formError {
  color: #d00000;
  font-size: 80%;
}

div.formError a {
  color:#C50000;
  font-weight:bold;
  text-decoration:underline;
}

form.styled input[type=text],
form.styled input[type=password],
form.styled textarea {
  background: #fff url(/images/textfield_gradient_bg.png) repeat-x top left;
  border: 1px solid #abaeb8;
  border-color: rgba(141, 144, 152, 0.8);
  width: 100%;
  outline: none;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  margin: 0.2em 0;
  font-size: 120%;
  padding: 10px 0;
  text-indent: 0.5em;
}
form.styled input[type=text]:focus,
form.styled input[type=password]:focus,
form.styled textarea:focus {
  border-color:#666;
  -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
form.styled input[type=checkbox] {
  margin: 0 0.5em 0 0;
  padding: 0;
}
form.styled .float-right input[type=checkbox] {
  margin: 0 0 0 0.5em;
}
form.styled input.inline,
form.styled.horizontal input.inline {
  display: inline;
  width: 12em;
  float: none !important;
}

form.styled textarea { width: 390px; height: 250px; padding:5px; }

form.styled.inline { line-height:3; }
form.styled.inline p { margin-bottom:0; }

form.styled .field button, form .field a.button {
  float: right;
  margin: 0 0 0 7px;
}

form.styled.horizontal input[type=text],
form.styled.horizontal input[type=password],
form.styled.horizontal textarea,
form.styled.horizontal select {
  float: left;
  width: 65%;
  padding: 5px 0;
  text-indent: 0.3em;
}
form.styled input[type=checkbox] {
  margin: 3px 0.7em 8px 0;
  float: left;
}
form.styled.horizontal input[type=checkbox] {
  margin: 5px 1em 5px 34%;
}
form.styled label.checkbox-label {
  float: left;
  font-size: 85%;
}
form.styled.horizontal label.checkbox-label {
  width: 60%;
}

form.styled #errorExplanation {
  background-color: #fee;
  margin: 0 0 1em 0;
  font-size: 85%;
  padding: 1em;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border: 1px solid #f44;
  color: #8a1f11;
}
form.styled #errorExplanation h2 {
  border-bottom: 1px solid #FBC2C4;
  padding-bottom: 0.5em;
  font-size: 85%;
}
form.styled #errorExplanation p {
  margin: 0.5em 0;
}
form.styled #errorExplanation ul {
  margin-bottom: 0.5em;
}

form.styled .fieldWithErrors {
  display: inline;
}
form.styled .fieldWithErrors input,
form.styled .fieldWithErrors textarea {
  border: 2px solid #DA2626 !important;
  -webkit-box-shadow: 0 2px 10px rgba(255,0,0,0.3);
  -moz-box-shadow: 0 2px 10px rgba(255,0,0,0.3);
  box-shadow: 0 2px 10px rgba(255,0,0,0.3);
  margin-left: -1px;
}

/* BUTTONS
 * modified from 
 * http://particletree.com/features/rediscovering-the-button-element/
 * and
 * promo.css
 */ 

.buttons a, button, a.button {
  margin: 0 7px 0 0;
  position: relative;
  
  color: #fff !important;
  font-size: 13.5pt !important;
  font-weight: 500;
  line-height: 16px;
  text-shadow: 0 1px 0 rgba(0,55,100,0.7);
  text-decoration: none !important;
  text-align: center;
  white-space: nowrap;
  
  border-width: 1px;
  border-style: solid;
  border-color: #DAEDFF #0072A5 #005285;
  outline: none;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  /*-webkit-box-shadow: 0 -1px 0 #0072A5;*/
  /*-moz-box-shadow: 0 -1px 0 #0072A5;*/
  box-shadow: 0 -1px 0 #0072A5;
  
  cursor: pointer;
  zoom: 1;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
}

.buttons a, a.button {
  padding: 10px 15px 9px 12px; /* Links */
}
.buttons a, button, a.button {
  background: #0081be url(/images/button_bluebg.png) repeat-x;
}
.buttons a, .buttons button {
  float: left;
}
.button a.primary, button.primary, a.button.primary {
  font-weight: bold;
}
.buttons a:hover, button:hover, a.button:hover,
.buttons a:focus, button:focus, a.button:focus {
  color: #fff;
  border-color: #DAEDFF #00B0FF #00B0FF;
  text-decoration: none;
  /*-webkit-box-shadow: 0 -1px 0 #00B0FF;
  -moz-box-shadow: 0 -1px 0 #00B0FF;
  box-shadow: 0 -1px 0 #00B0FF;*/
}
.buttons a:active, button:active, a.button:active {
  background: #00a5d7 url(/images/button_bluebg_active.png) repeat-x;
  color: #fff;
  border-color: #748796 #f9f9f9 #f9f9f9 #748796;
}
button img, .buttons a img, a.button img {
  margin:0 6px -3px 0;
  padding:0;
  border:none;
  width:16px;
  height:16px;
}

button.orangebutton, a.orangebutton, 
.orangebutton a, .orangebutton button, 
#tour-signup a {
  background: #f7992d url(/images/button_orangebg.png) repeat-x;
  border-color: #fcd3a4 #f58025 #C96A21;
  -webkit-box-shadow: 0 1px 3px #999;
  -moz-box-shadow: 0 1px 3px #999;
  box-shadow: 0 1px 3px #999;
}
button.orangebutton:hover, a.orangebutton:hover, 
.orangebutton a:hover, .orangebutton button:hover, 
#tour-signup a:hover {
  border-color: #FCDFBE transparent #FCA772; /* #fcd3a4 #f7992d #f7992d; */
}
button.orangebutton:active, a.orangebutton:active, 
.orangebutton a:active, .orangebutton button:active, 
#tour-signup a:active {
  background: #FFA33A url(/images/button_orangebg_active.png) repeat-x;
  border-color: #A6732B #f9f9f9 #f9f9f9 #A6732B;
}

button {
  width: auto;
  overflow: visible;
  padding: 7px 15px 7px 15px;
}
button[type] {
  line-height: 25px; /* Webkit */
}
*:first-child+html button[type] {
  padding: 7px 15px 7px 15px; /* IE7 */
}
.buttons a.button-small,
button.button-small,
a.button.button-small {
  font-weight: normal;
  font-size: 11px !important;
  line-height: 16px;
  color: #333 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  
  padding: 3px 6px 2px 5px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border-color: #bbb #aaa #999 !important;
  background: #cccccc url(/images/jquery-ui/ui-bg_highlight-hard_90_cccccc_1x100.png) 50% 50% repeat-x;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.buttons a.button-small:hover,
button.button-small:hover,
a.button.button-small:hover {
  background: #62c1ef url(/images/jquery-ui/ui-bg_highlight-hard_90_62c1ef_1x100.png) 50% 50% repeat-x;
}

.privacy { font-size: 85%; }
.privacy li { margin-bottom: 10px; }
.privacy h3 { margin-top: 1.5em; }

#help-page h1.main-header {
  text-align: left;
  font-size: 20pt;
  margin:0.5em 0 1em;
}

.step {
  background-color: #F2F2F2;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 22px;
  clear:both;
}

.step-number {
  float:left;
  width: 100px;
  text-align: center;
  line-height: 1;
  font-size: 52pt;
  padding-top: 10px;
  color: #B5B5B5;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: bold;
  text-shadow: 1px 1px 0 #fff;
}

.step-content {
  color: #555;
  margin-left: 100px;
  padding: 10px 15px 10px 15px;
  border-radius:0 10px 10px 0;
  -moz-border-radius:0 10px 10px 0;
  -webkit-border-radius:0 10px 10px 0;
  border-radius:0 10px 10px 0;
  background-color: #F9F9F9;
  min-height: 75px;
}

.step-content p {
  margin-top: 10px;
}

.step-img {
  margin: 10px;
  float:right;
  cursor:pointer;
}

#help-page p {
  margin:0 0 0.8em;
}

table.key-value {
  width: 0;
  border-spacing:7px;
}

table.key-value .key {
  width: 0;
}

table.key-value .value {
  background-color:#fff;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.3);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.3);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.3);
}

.img-shadow {
  -moz-box-shadow:2px 2px 4px 1px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow:2px 2px 4px 1px rgba(0, 0, 0, 0.3);
  box-shadow:2px 2px 4px 1px rgba(0, 0, 0, 0.3);
}

.api-token {
  margin-left: 5px;
  font-family:"Lucida Console",monospace;
  color: #696969;
}

.upside-down {
  -moz-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.area {
  min-height: 140px;
}

.area h3 { margin-bottom: .7em;}

img.promo {
  background:none repeat scroll 0 0 #fff;
  padding:3px;
  opacity:0.9;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
}

#help-page img.right {
  float: right;
  margin: 0pt -10px 0pt 20px;
}

#help-page .box {
  padding: 1em;
  background-color: #F9F9F9;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.screenshot {
  display:block;
  text-align:center;
}

.screenshot span {
  color:#666;
  font-size:85%;
}

.screenshot img {
  border:2px solid #fff;
  margin-bottom:5px;
  -moz-box-shadow:0 2px 5px #999;
  -webkit-box-shadow:0 2px 5px #999;
}

/* the overlayed element */
.jquery-tools-overlay {
  display:none;
  z-index:10000;
}
/* close button positioned on upper right corner */
.jquery-tools-overlay .close {
  background-image:url(/images/close.png);
  position:absolute;
  right:-15px;
  top:-15px;
  cursor:pointer;
  height:35px;
  width:35px;
}
.jquery-tools-overlay.screenshot-overlay .close {
  right:20px;
  top:10px;
}

.columns {
  border-top :1px solid #ddd;
  padding:20px 0;
}

.columns p {margin:0;}

.column {
  float:left;
}

.button.button-primary.prism {
  font-size:16pt !important;
  padding:10px 15px 9px 12px;
}

.funkycode {
  -moz-border-radius:4px 4px 4px 4px;
  -webkit-border-radius:4px 4px 4px 4px;
  border-radius:4px 4px 4px 4px;
  background-color:#F8F8F8;
  border:1px solid #DCDCDC;
  font-size:10pt;
  overflow:hidden;
  padding:5px;
}