@charset "UTF-8";

html, body { height: 100%; }

body, blockquote, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, p, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr { margin: 0; padding: 0; font-family: Tahoma, Geneva, sans-serif; font-size: 13px; }
li { list-style: none inside none; }
img { border: 0; }
hr { height: 1px; margin: 1em 0; padding: 0; border: 0; background-color: #999999; color: #999999; }
small { font-family: Arial, Helvetica, Sans-Serif; font-size: 0.9em; line-height: 1.5em; }
code { font: 1.1em 'Courier New', Courier, Fixed; }
acronym, abbr, span.caps { font-size: 0.9em; letter-spacing: .07em; cursor: help; }
acronym, abbr { border-bottom: 1px dashed #999999; }

.cl, .clear { clear: both; }
br.cl { height: 0; }
.rm, .hide-contents div, .hide-contents span, .hide-contents p, .hide-contents h2, .hide-contents h3, .hide-contents blockquote { display: none; }

body { background: url(../images/page-bg.png) #0026D8 center top repeat-x scroll; color: #000000; }
a { color: #000000; }
a:hover {  }

h1 { display: none; font-size: 1.3em; }
h2 { font-size: 1.2em; }
p { margin: 0.2em 0 1em; }
p.intro { font-size: 1.2em; margin: 0 0 1em; }
div.counter-p-margin { margin: 0 0 -1em; }

p img { padding: 0; max-width: 100%; }
img.centered { display: block; margin-left: auto; margin-right: auto; }
img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; }
.alignright { float: right; }
.alignleft { float: left; }
img.jslink { cursor: pointer; }

.standard-form div { margin: 0 0 0.5em; }
.standard-form p.error { margin: 0 0 0.5em 80px; width: 426px; background: #FF9999; border: 1px solid #990000; padding: 5px; font-size: 0.8em; font-weight: bold; }
.standard-form label { float: left; width: 80px; vertical-align: top; }
.standard-form input[type="text"], .standard-form textarea, .standard-form select { width: 436px; }
.standard-form input[type="text"] {  }
.standard-form textarea { height: 300px; }
.standard-form select {  }
.standard-form button { margin: 0 0 0 80px; }
div.counter-standard-form-margin { margin: 0 0 -0.5em; }

.captioned-image { border: 1px solid #DDDDDD; text-align: center; background-color: #F3F3F3; margin: 10px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.captioned-image img { margin: 5px; padding: 0; border: 0 none; }
.captioned-image p { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; }

#outer-wrap, #header-wrap, #footer-wrap { width: 826px; min-height: 600px; margin: auto; position: relative; }
#outer-wrap { background: url(../images/page-middle.png) center top repeat-y scroll; }
#header-wrap { background: url(../images/page-top.png) center top no-repeat scroll; }
#footer-wrap { background: url(../images/page-bottom.png) center bottom no-repeat scroll; }

#left { width: 186px; float: left; margin: 412px 0 49px 29px; }
#right { width: 560px; float: right; margin: 177px 33px 49px 0; }

#header { margin: 0 0 1em; min-height: 35px; }
#topnav { padding: 0 2em; }
#topnav ul li { display: inline; }
#topnav ul li a, #topnav ul li strong { line-height: 33px; padding: 0 1em; display: block; float: left; font-weight: bold; text-decoration: none !important; }
#topnav ul li.selected a, #topnav ul li.selected strong { background: url(../images/topnav-selected.png) left top repeat-x scroll !important; color: #FFFFFF; }
#topnav ul li a:hover { background: url(../images/topnav-hover.png) left top repeat-x scroll; }

.badge-new { background: url(../images/badge-new.png) left top no-repeat scroll; width: 64px; height: 63px; }

#left .title { height: 26px; width: 170px; background-position: left top; background-repeat: no-repeat; background-attachment: scroll; border-bottom: 1px solid #999999; margin: 0 0 5px; }
.app-title { height: 36px; background-position: left top; background-repeat: no-repeat; background-attachment: scroll; margin: 0 0.4em 0 0.2em; float: left; }
.app-description { height: 30px; background-position: left top; background-repeat: no-repeat; background-attachment: scroll; clear: both; }

#left .title-apps { background-image: url(../images/text/title-left-apps.png); }
#left .title-blog-archive { background-image: url(../images/text/title-left-blog-archive.png); }
#left .title-blog-categories { background-image: url(../images/text/title-left-blog-categories.png); }
#left .title-recent-blog-posts { background-image: url(../images/text/title-left-recent-blog-posts.png); }
#left .title-recent-tweets { background-image: url(../images/text/title-left-recent-tweets.png); }
#left .title-search-blog-posts { background-image: url(../images/text/title-left-search-blog-posts.png); }

.app-title-slidepix { background-image: url(../images/text/app-title-slidepix.png); width: 72px; }
.app-description-slidepix { background-image: url(../images/text/app-description-slidepix.png); width: 262px; }

#content { margin: 1em 0 0; }

.content-box, .content-box-short { margin: 1em 0 0; }

.content-box { clear: both; }
.content-box .top { background: url(../images/content-top.png) left top no-repeat scroll; height: 15px; }
.content-box .content { background: url(../images/content-middle-top.png) left top repeat-y scroll; }
.content-box .content-inner { background: url(../images/content-middle-bottom.png) left bottom no-repeat scroll; padding: 0 12px; min-height: 245px; }
.content-box .bottom { background: url(../images/content-bottom.png) left bottom no-repeat scroll; height: 15px; }

.content-box-short { clear: both; }
.content-box-short .top { background: url(../images/content-short-top.png) left top no-repeat scroll; height: 15px; }
.content-box-short .content { background: url(../images/content-short-middle.png) left top repeat-y scroll; padding: 0 12px; }
.content-box-short .bottom { background: url(../images/content-short-bottom.png) left bottom no-repeat scroll; height: 15px; }

.app-promo .content-inner { background: url(../images/content-middle-bottom-screenshots.png) left bottom no-repeat scroll; padding: 0 12px; min-height: 245px; }

.app-promo .header { margin: 0 0 1em; height: 63px; }
.app-promo .header-badge { float: left; margin: 0 0.5em 0 0; }
.app-promo .header-title { float: left; }
.app-promo .header-action-button { float: right; margin: 0 8px 0 0; }
.app-promo .price { float: left; }

.app-promo .detail { margin: 1em 0 0; }
.app-promo .more-info { float: right; margin: 0 0 0.5em 0.5em; }
.app-promo ul.features { margin-bottom: 2em; }
.app-promo ul.features li { list-style: none; background: url(../images/bullet-blue-star.png) 0 1px no-repeat scroll; padding: 0 0 0 22px; margin: 0 0 0.3em; }
.app-promo ul.screenshots { text-align: center; margin: 0; padding: 0 0 12px; }
.app-promo ul.screenshots li { list-style: none; display: inline; margin: 0; cursor: pointer; }
.app-promo ul.screenshots li img { padding: 10px 8px 0; }
.app-promo ul.screenshots li.vertical img { background: url(../images/screenshot-thumbnail-bg-vertical.png) left top no-repeat scroll; width: 65px; }
.app-promo ul.screenshots li.horizontal img { background: url(../images/screenshot-thumbnail-bg-horizontal.png) left top no-repeat scroll; width: 98px; }

ul.version-history { padding: 0.5em 0 0 1em; }
ul.version-history li { list-style: none; background: url(../images/bullet-navy-star.png) 0 1px no-repeat scroll; padding: 0 0 0 22px; margin: 0 0 0.3em; }
ul.version-history li.new-feature { background-image: url(../images/bullet-green-star.png); }
ul.version-history li.bug-fix { background-image: url(../images/bullet-red-star.png); }

#left .outer { background: url(../images/leftnav-middle.png) left top repeat-y scroll; margin: 0 0 1em; min-height: 1px; /* <-- IE7 hack */ }
#left .inner { background: url(../images/leftnav-top.png) left top no-repeat scroll; }
#left .content { background: url(../images/leftnav-bottom.png) left bottom no-repeat scroll; padding: 7px; }
#left a { text-decoration: none; }
#left a:hover { text-decoration: underline; }
#left ul li { list-style: none; background: url(../images/bullet-purple-star.png) 0 1px no-repeat scroll; padding: 0 0 0 22px; margin: 0 0 0.6em; }
#left ul.image-links { margin: 5px 0 5px 8px; }
#left ul.image-links li { background: none; padding: 2px; margin: 0; }

#app-list ul li { background: url(../images/bullet-green-star.png) 0 1px no-repeat scroll !important; font-weight: bold; }

#recent-tweets ul li { list-style: none; background: url(../images/bullet-twitter.png) 0 1px no-repeat scroll !important; padding: 0 0 0 22px; margin: 0 0 0.6em; }
#recent-tweets ul li a.tweet-date { display: block; color: #999999; font-style: italic; font-size: 0.8em; }
#twitter-follow-me { background: url(../images/bullet-green-star.png) 0 1px no-repeat scroll; padding: 0 0 0.6em 22px; margin: 0 0 0.6em; text-decoration: underline !important; display: block; }

p.follow-me { text-align: right; }
p.follow-me span { font-size: 1.2em; }
p.follow-me img { margin: 0 0 0 1em; vertical-align: middle; }

#screenshot { position: absolute; left: 46px; top: 86px; }

/* ==== SCREENSHOT VIEWER ==== */
#sv { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100000; background: url(../images/screenshot-viewer/sv-dimmer.png) left top repeat scroll; color: #FFFFFF; }
#sv-loading { text-align:center; background: url(../images/screenshot-viewer/sv-loading.png) center 85px no-repeat scroll; height: 300px; }
#sv-loading img { margin: 132px 0 0; }
#sv-progress { border: 1px solid #555555; height: 5px; margin: 9px auto; width: 80px; }
#sv-progress-value { height: 5px; width: 0; background: #333333; }
#sv.vertical { min-width: 870px; }
#sv.horizontal { min-width: 1030px; }
#sv-close { display: block; position: absolute; right: 0; top: 0; margin: 1em; z-index: 1000000; }
#sv-content { height: 540px; position: absolute; top: 0; margin: 0 auto; position: relative; }
#sv.vertical #sv-content { width: 870px; background: url(../images/screenshot-viewer/sv-vertical.png) center center no-repeat scroll; }
#sv.horizontal #sv-content { width: 1030px; background: url(../images/screenshot-viewer/sv-horizontal.png) center center no-repeat scroll; }
#sv-content .inner { padding: 30px; }
.sv-nav-panel { position: absolute; top: 171px; width: 220px; height: 176px; padding: 12px; }
#sv-left { left: 30px; }
#sv-right { text-align: right; }
#sv.vertical #sv-right { left: 596px; }
#sv.horizontal #sv-right { left: 756px; }
.sv-nav-button { margin: 68px 0; position: absolute; }
#sv-right-button { right: 12px; }
.sv-nav-screenshot { position: absolute; left: 12px; }
.sv-nav-screenshot { text-align: center; }
#sv-left-screenshot { width: 192px; }
#sv-right-screenshot { width: 168px; }
#sv-left-screenshot.vertical { margin: 4px 0px 4px 40px; }
#sv-left-screenshot.horizontal { margin: 29px 0px 29px 40px; }
#sv-right-screenshot.vertical { margin: 4px 40px 4px 0; }
#sv-right-screenshot.horizontal { margin: 29px 40px 29px 0; }
.sv-nav-screenshot-inner { padding: 8px; margin: auto; }
.sv-nav-panel-active { cursor: pointer; }
.sv-nav-panel .vertical .sv-nav-screenshot-inner { width: 100px; height: 150px; background: url(../images/screenshot-viewer/sv-thumbnail-bg-vertical.png) left top no-repeat scroll; }
.sv-nav-panel .horizontal .sv-nav-screenshot-inner { width: 150px; height: 100px; background: url(../images/screenshot-viewer/sv-thumbnail-bg-horizontal.png) left top no-repeat scroll; }
#sv-screenshot { position: absolute; top: 30px; left: 275px; }
#sv.vertical #sv-screenshot { top: 30px; }
#sv.horizontal #sv-screenshot { top: 110px; }
.sv-screenshot-press { position: absolute; cursor: pointer; }
#sv.vertical .sv-screenshot-press { width: 160px; height: 480px; }
#sv.horizontal .sv-screenshot-press { width: 240px; height: 320px; }
#sv-screenshot-press-left { left: 0; }
#sv-screenshot-press-right { right: 0; }

/* "The time has come," the Walrus said, "to talk of many things.
Of shoes and ships and sealing-wax, of cabbages and kings.
And why the sea is boiling hot, and whether pigs have wings.
Callooh callay, no work today, we're cabbages and kings." */