/* General definitions */
html, body { margin: 0px; padding: 0px; background-color: #f7f7f7; }
body { background-image: url('../images/layout/header.png'); background-repeat: repeat-x; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; }
div#wrapper { width: 980px; margin: 0px auto; }

/* Header */
div#header { width: 980px; }
h1#logo { height: 44px; width: 318px; margin: 18px 0px 0px; padding: 0px; float: left; background-image: url('../images/layout/logo.png'); background-repeat: no-repeat; opacity: 0.8; -webkit-transition-property: opacity; -webkit-transition-duration: 0.5s; }
h1#logo a { display: block; height: 44px; width: 318px; }
h1#logo:hover { opacity: 1.0; }
h1#logo span { display: none; }

/* Navigation */
ul#navigation { margin: 49px 0px 0px; padding: 0px; list-style: none; float: right; }
ul#navigation li { width: 105px; height: 31px; text-align: center; line-height: 30px; float: left; }
ul#navigation li.active, ul#navigation li.active:active { background-image: url('../images/layout/tab_active.png'); background-repeat: no-repeat; }
ul#navigation li a { display: block; width: 105px; height: 30px; font-size: 14px; font-weight: bold; text-decoration: none; text-shadow: #000 0px 1px 0px; color: #fff; opacity: 0.7; -webkit-transition-property: opacity; -webkit-transition-duration: 0.5s; }
ul#navigation li a:hover { opacity: 1.0; }
ul#navigation li a:active { padding-top: 1px; }
ul#navigation li.active a, ul#navigation li.active a:hover, ul#navigation li.active a:active, ul#navigation li.active a:visited { opacity: 1.0; padding-top: 0px; text-shadow: #10313f 0px 1px 0px; }

/* Subheader */
div#subheader { clear: both; width: 980px; height: 57px; }

div#subheader blockquote { margin: 5px 20px 4px 10px; max-width: 300px; display: block; float: left; font-size: 12px; color: #fff; text-shadow: #0c2a3a 0px 1px 0px; }
div#subheader blockquote.twitter { max-width: 450px; }
div#subheader blockquote a { color: #fff; text-shadow: #0c2a3a 0px 1px 0px; text-decoration: none; }
div#subheader blockquote a:hover { text-decoration: underline; }
div#subheader blockquote span { color: #87a6b8; text-shadow: #1b4661; font-style: italic; }
div#subheader blockquote span a  { color: #87a6b8; text-shadow: #1b4661; }
div#subheader blockquote div.loading { height: 48px; line-height: 48px; color: #87a6b8; text-shadow: #1b4661; font-style: italic; }

div#subheader div.buttons { float: right; height: 31px; padding-right: 5px; margin: 14px 10px 0px 0px; background-image: url('../images/layout/subheader_button_right.png'); background-repeat: no-repeat; background-position: right; }
div#subheader div.buttons ul { margin: 0px; padding: 0px; list-style: none; height: 31px; padding-left: 5px; background-image: url('../images/layout/subheader_button_left.png'); background-repeat: no-repeat; }
div#subheader div.buttons ul li { margin-top: 1px; height: 29px; line-height: 29px; float: left; text-align: center; }
div#subheader div.buttons ul li.left  { border-right: 1px solid #bfd3dc; }
div#subheader div.buttons ul li.center { border-left: 1px solid #0b3b54; border-right: 1px solid #bfd3dc; }
div#subheader div.buttons ul li.right { border-left: 1px solid #0b3b54; }
div#subheader div.buttons ul li a { display: block; height: 28px; padding: 0px 15px; color: #0c3f5c; text-decoration: none; font-size: 12px; text-shadow: #d4dfe4 0px 1px 0px; }
div#subheader div.buttons ul li a:hover { color: #265f7f; }
div#subheader div.buttons ul li a:active { padding-top: 1px; text-shadow: #d4dfe4 0px -1px 0px; }

/* Basic content types */
div#content { clear: both; margin-top: 10px; color: #333; }
div#content h3 { font-size: 20px; font-weight: normal; margin: 25px 0px 5px; }
div#content h3:first-child { margin-top: 0px; }
div#content p { font-size: 12px; line-height: 18px; }
div#content a { color: #28a3c6; }
div#content a:hover { color: #6ad0ed; }
div#content ul { list-style-type: square; font-size: 12px; line-height: 18px; }
div#content a.fancybox-image img { border: 2px solid #e3e3e3; -webkit-border-radius: 6px; -moz-border-radius: 6px; }
div#content .item { margin-bottom: 10px; clear: both; }

/* Content badges */
div#content .badge { background-repeat: no-repeat; background-position: right top; }
div#content .badge-free { background-image: url('../images/layout/badge_free.png'); }
div#content .badge-new { background-image: url('../images/layout/badge_new.png'); }
div#content .badge-50off { background-image: url('../images/layout/badge_50off.png'); }

/* App Store badge */
div#content .badge-appstore { opacity: 0.7; -webkit-transition-property: opacity; -webkit-transition-duration: 0.5s; display: block; width: 149px; height: 50px; float:right; margin:10px 0px 0px 20px; background-image: url('../images/layout/badge-appstore.png'); background-repeat: no-repeat; }
div#content .badge-appstore:hover { opacity: 1.0; }
div#content .badge-appstore span { display: none; }

/* Stage */
div#content div.stage div.inner-stage { width: 898px; height: 418px; margin: 0px auto; padding: 40px; }
div#content div.stage div.over { cursor: pointer; }
div#content div.stage div.inner-stage h2 { font-size: 26px; font-weight: normal; margin: 25px 0px 5px; text-align: center; }
div#content div.stage div.inner-stage p { font-size: 14px; line-height: 20px; text-align: center; }

/* Content box */
div#content div.box { background-image: url('../images/layout/content_background_top.png'); background-repeat: no-repeat; }
div#content div.box div.inner-box { padding: 1px 2px; background-image: url('../images/layout/content_background_bottom.png'); background-repeat: no-repeat; background-position: bottom; }
div#content div.box div.inner-box .seperated { background-image: url('../images/layout/content_gradient.png'); background-repeat: repeat-x; background-position: bottom; min-height: 106px; border-bottom: 1px solid #e3e3e3; }

/* Content box columns */
div#content div.box div.inner-box div.columns div.column { float: left; padding: 40px; }
div#content div.box div.inner-box div.columns div.column p:last-of-type { margin-bottom: 0px; }

div#content div.box div.inner-box div.one-column div.column { float: none; }

div#content div.box div.inner-box div.two-columns div.column { width: 428px; padding: 40px 40px 40px 20px; }
div#content div.box div.inner-box div.two-columns div.column:first-child { padding-right: 20px; padding-left: 40px; }

div#content div.box div.inner-box div.three-columns { margin: 0px 20px; }
div#content div.box div.inner-box div.three-columns div.column { width: 285px; padding: 40px 20px; }
div#content div.box div.inner-box div.three-columns div.column:first-child { width: 265px; padding-left: 40px; }
div#content div.box div.inner-box div.three-columns div.column:last-of-type { width: 265px; padding-right: 40px; }

/* Screenshots */
div#content div.box div.inner-box ul.screenshots { list-style: none; margin: 0px -20px; padding: 0px; }
div#content div.box div.inner-box ul.screenshots li { float: left; padding: 20px 20px 0px; width: 147px; height: 165px; background-image: url('../images/layout/screenshot-shadow.png'); background-repeat: no-repeat; background-position: bottom; }
div#content div.box div.inner-box ul.screenshots li a.fancybox-image img { width: 143px; height: 143px; }

/* App icons */
div#content div.box div.inner-box ul.app-icons { list-style: none; margin: 0px auto; padding: 0px; }
div#content div.box div.inner-box ul.app-icons li { float: left; width: 92px; text-align: center; min-height: 66px; background-image: url('../images/layout/icon_57x57_shadow.png'); background-repeat: no-repeat; background-position: center 38px; margin:5px 5px 0px; }
div#content div.box div.inner-box ul.app-icons li a { text-decoration: none; color: #aaa; font-size: 11px; }
div#content div.box div.inner-box ul.app-icons li a:hover { color: #ccc; }
div#content div.box div.inner-box ul.app-icons li a:hover span { text-decoration: underline; }
div#content div.box div.inner-box ul.app-icons li img { display: block; width: 57px; height: 57px; border: none; margin: 0px auto 3px; }

/* Bottom teasers */
div#content div.teasers { background-image: url('../images/layout/content_background_top.png'); background-repeat: no-repeat; }
div#content div.teasers div.inner-teasers { padding: 1px 2px; background-image: url('../images/layout/content_background_bottom_gradient.png'); background-repeat: no-repeat; background-position: bottom; }
div#content div.teasers div.inner-teasers div.teaser { float: left; margin: 1px 0px; background-repeat: no-repeat; height: 103px; width: 203px; padding: 15px 20px; border-left: 1px solid #e2e2e2; text-shadow: #fff 0px 1px 0px; font-size: 12px; line-height: 18px; }
div#content div.teasers div.inner-teasers div.teaser:first-child { border-left: none; width: 204px; }
div#content div.teasers div.inner-teasers div.over { cursor: pointer; }

div#content div.teasers div.inner-teasers div.teaser h4 { font-weight: normal; font-size: 16px; margin: 0px 0px 10px; line-height:auto; }
div#content div.teasers div.inner-teasers div.teaser h4 a { color: #333; text-decoration: none; }
div#content div.teasers div.inner-teasers div.teaser p { margin: 0px; }

/* Footer */
ul#footer { padding: 0px; list-style: none; clear: both; margin-bottom: 20px; }
ul#footer li { color: #a7a7a7; text-shadow: #fff 0px 1px 0px; font-size: 10px; }
ul#footer li.left { float: left; text-align: left; }
ul#footer li.right { float: right; text-align: right; }
ul#footer li a { color: #a7a7a7; }
ul#footer li a:hover { color: #7c7c7c; }
ul#footer li a.twitter:hover, ul#footer li a.rss:hover, ul#footer li a.newsletter:hover, ul#footer li a.facebook:hover { background-position: 0px -17px; }
ul#footer li a.twitter { background-image: url('../images/layout/icon_twitter.png'); background-repeat: no-repeat; background-position: 0px 0px; padding-left: 24px; }
ul#footer li a.rss { background-image: url('../images/layout/icon_rss.png'); background-repeat: no-repeat; background-position: 0px 0px; padding-left: 15px; }
ul#footer li a.newsletter { background-image: url('../images/layout/icon_newsletter.png'); background-repeat: no-repeat; background-position: 0px 0px; padding-left: 17px; }
ul#footer li a.facebook { background-image: url('../images/layout/icon_facebook.png'); background-repeat: no-repeat; background-position: 0px 0px; padding-left: 15px; }

br.clear { clear:both; display:block; height:1px; margin:-1px 0px 0px 0px; }