/* @override 
	http://fivedetails.com/css/fd-layout.css
	http://www.fivedetails.com/css/fd-layout.css
	http://five.site/css/fd-layout.css
*/

/* Reset */

*, html, body {
	margin:0;
	padding:0;
}

/* HTML5 tags */
header,hgroup,footer,nav,aside,section, article { 
	display: block; 
}

/* Defaults */

body {
	font-family:"LFT Etica Regular", Helvetica, Arial, sans-serif; 
	font-weight:normal; 
	font-style:normal;	
	line-height: 1.5;
	font-size: 15px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	background-color: #08232a;
	color: #ddd;
	background-repeat: no-repeat;
	background-position: center center;
}

#support #content, #backsoon #content, #error #content, #blog #content {
	background-color: #f5f6f8;
	color: #333;
}


/* ------------------------ */
/* Colour Schemes */


.fd-orange,
/* used by */
a,
#home.flow a b,
#seamless #content a:hover,
#seamless  #content a:focus {
	color: #E68317;
}

.fd-purple,
/* used by */
h1, h2, h3,
.seg-control p,
.success,
.line strong,
article blockquote p:before,
article blockquote p:after,
.copy ul li:before {
	color: #bd95be;
}

/* white */
a b,
#seamless h2,
#caption,
.popup p,
.store.flash:hover h2,
.store.flash:focus h2,
.seg-control h2,
.seg-control a:hover p,
.seg-control a:active p,
#about h1, #about h3,
nav li a:hover,
#seamless #content a,
.seamless .preview .synopsis a,
.seamless .preview h2,
.blast .intro b,
.store.flash:hover span,
body#about,
#support nav li.n-support .popup a:hover {
	color: #fff;
}



/* ------------------------ */
/* Typography */


/* Etica Bold */
a, b, strong, h1, h2, h3, h4, .logo a, nav li a, .synopsis p a b, #about h1, label, .popup p, .instructions li, .success, article blockquote p, .buybutton {
	font-family:"LFT Etica Bold", Helvetica, Arial, sans-serif;
}

/* Etica Regular */
nav li a b, .tweetblast a, #start-stop, .synopsis p a, hgroup span, #search-scope label, .tags a  {
	font-family:"LFT Etica Regular", Helvetica, Arial, sans-serif; 
	font-weight: normal;
}

/* Etica Italic */
i,em { font-family:"LFT Etica Italic", sans-serif; font-weight:normal; font-style:italic; }

a {
	text-decoration: none; 
	border-bottom: 1px solid rgba(0,0,0,0.1);
	-o-transition-property: color;
	-webkit-transition-property: color;
	-moz-transition-property: color;
	transition-property: color;
	 -o-transition-duration: 0.2s;
	 -webkit-transition-duration: 0.2s;
	 -moz-transition-duration: 0.2s;
	 transition-duration: 0.2s;	
}

a:hover,
a:focus {  
	color: #000;
	border-bottom: 1px solid rgba(0,0,0,0.6);
}

/* Turn off link borders for: */
fieldset, nav a, a img,.logo a,nav li.n-support .popup a,.support,.support:hover,.support:focus, .preview .synopsis a, #slideshow a,.tweetblast,#seamless .image a,.choose a, .button a, .tweet a, .photo a, .tags a      {
	border: 0 !important;
	text-decoration: none;
}

h1,h2 {
	line-height: 1.2;
}

h1 {
	font-size: 1.5em;
	letter-spacing: -1px;
}

#seamless h1 {
	font-size: 3.5em;
}

#seamless h1,
#seamless hgroup h2,
#home #seamless h2,
#tweetblast h1,
#tweetblast h2  { 
	font-family:"Chennai Bold Oblique", Futura, 'Arial Rounded', sans-serif; 
	font-weight:bold; 
	font-style:italic;
	text-transform: lowercase;
}

#flow h1 {
	font-size: 500%;
	text-transform: lowercase;
	width: 170px;
	height: 80px;
	text-indent: -999em;
	overflow: hidden;
	background: url(/img/flowtitle.png) no-repeat;
	margin: 0 0 0 -8px;
}

#error h1,
#backsoon h1 {
	font-size: 200%;
	margin: 0 0 1em 0;
}

#error h1 {
	line-height: 1.4;
}

#flow hgroup h2 {
	font-size: 120%;
	color: #666;
}

h2 {
	font-size: 180%;
}

h3 {
	font-size: 130%;
	margin: 0 0 0.5em 0;
	line-height: 1.2;
}

h4 {
	font-size: 16px;
}

p {
	margin: 0 0 1.5em 0;
}

fieldset p {
	margin: 0;
}

cite {
	font-style: normal;
}

.meta, .smallprint,footer, .seg-control p, .req, .helptext    {
	font-size: 11px;
}

label.error {
	font-size: 13px;
}

/* ------------------------ */
/* Layout */


header {
	padding: 1em;
}

.logo {
	padding: 0.75em 1em 0.5em 1em;
}

.logo a {
	display: block;
	width: 150px;
	height: 40px;
	text-indent: -999em;
	overflow: hidden;	
	background: url(/img/fd-logo.png);
	opacity: 0.7;
}

.logo a:hover {
	opacity: 1;
}

#home .logo a {
	background: url(/img/fd-logo-home.png);
	opacity: 1;
}

nav ul {
	list-style-type: none;
	overflow: hidden;
}

nav li {
	overflow: hidden;
}

nav li img {
	vertical-align: middle;
	float: left;
	margin: -4px 0.5em 0 0;
}

nav li a {
	color: rgba(255,255,255,0.65);
	display: block;
	text-transform: uppercase;
	font-size: 18px;
	letter-spacing: 1px;
	line-height: 1.2;
}

nav li a:active {
	background: #000;
	color: #fff;
}

nav li a b {
	letter-spacing: 0;
	text-transform: none;
	display: block;
	font-size: 13px;
}

.n-flow a,
.n-seamless a {
	font-size: 28px;
	margin: 0.5em auto;
	width: 9em;
}

.n-support,
.n-about,
.n-blog  {
	float: left;
	width: 32%;
	text-align: center;
	margin: 2em 0 0.5em 0;
}

.popup {
	display: none;
}

#content,
footer {
	padding: 1.5em;
}

footer {
	text-align: center;
}

.intro {
	font-size: 16px;
	line-height: 1.6;
}

.support {
	text-align: center;
	margin: 3em 0;
	padding: 1em 0;
	background-color: rgba(0,0,0,0.05);
	display: block;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	box-shadow:0 1px 0 rgba(255,255,255,0.1), inset 0 0 1px rgba(0,0,0,0.4);
	-moz-box-shadow:0 1px 0 rgba(255,255,255,0.1), inset 0 0 1px rgba(0,0,0,0.4);
	-o-box-shadow:0 1px 0 rgba(255,255,255,0.1), inset 0 0 1px rgba(0,0,0,0.4);
	-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.1), inset 0 0 1px rgba(0,0,0,0.4);
}

.support span {
	background-image: url(/img/help.png);
	background-position: 8px 35%;
	background-repeat: no-repeat;
	padding: 0 0 0 30px;
	line-height: 15px;
}

#seamless .support {
	color: rgba(255,255,255,0.7);
}

. getit {
	margin: 2em 0;
}

.seg-control {
	overflow: hidden;
	white-space: nowrap;
	min-width: 260px;
}

.seg-control a {
	display: block;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -o-box-sizing: border-box;    /* Firefox, other Gecko */
     -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
    width: 50%;	
	float: left;
	margin: 0 0 0.5em 0;
	text-align: center;
	background: #3D5866; /* old browsers */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3D5866), color-stop(100%,#1D2C33)); /* webkit */
	background: -moz-linear-gradient(top, #3D5866 0%, #1D2C33 100%); /* firefox */
	background: -o-linear-gradient(top, #3D5866 0%, #1D2C33 100%); /* opera */
	background: linear-gradient(top, #3D5866 0%, #1D2C33 100%); 
	border:1px solid rgba(0,0,0,0.6)!important;
	box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 0 1px #fff;
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 0 1px #fff;
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 0 1px #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
	padding: 6px 6px;
}

.seg-control a.solo
{
	width: 63%;
	float: none;
	margin: 0px auto;
	margin-bottom: 0.5em;
	
}

.seg-control a:hover,
.seg-control a:focus,
.store.flash:hover,
.store.flash:focus,
.buybutton:hover,
.buybutton:focus {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E68317), color-stop(100%,#B26411)); /* webkit */	
	background: #E68317; /* old browsers */
	background: -moz-linear-gradient(top, #E68317 0%, #B26411 100%); /* firefox */	
	background: -o-linear-gradient(top, #E68317 0%, #B26411 100%); /* opera */	
	background: linear-gradient(top, #E68317 0%, #B26411 100%); 
}

.seg-control a:active,
.buybutton:active {
	background: #3D5866; /* old browsers */
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,#3D5866), color-stop(100%,#1D2C33)); /* webkit */
	background: -moz-linear-gradient(bottom, #3D5866 0%, #1D2C33 100%); /* firefox */
	background: -o-linear-gradient(bottom, #3D5866 0%, #1D2C33 100%); /* opera */
	background: linear-gradient(bottom, #3D5866 0%, #1D2C33 100%); 
	color: #E68317;
}

.left {
	-webkit-border-top-left-radius: 12px;
	-webkit-border-bottom-left-radius: 12px;
	-moz-border-radius-topleft: 12px;
	-moz-border-radius-bottomleft: 12px;
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
	border-right: 8px solid #000;
}

.right {
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.solo {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.seg-control h2 {
	font-size: 18px;
	text-transform: uppercase;
}

.seg-control p {
	margin: 0;
	text-shadow: none;
}

.getit .req {
	text-align: center;
}

/*Home*/

#home.seamless #content{
	background: url(/img/preview-seamless-small.jpg) no-repeat right top;
	padding: 190px 1.5em 1.5em 1.5em;
}

#home.flow #content{
	background: #f1f0ec url(/img/appicon-flow-220.png) no-repeat 230px 0;
	padding: 190px 1.5em 1.5em 1.5em;
}

.preview#seamless h1 {
	text-shadow: 0 0 50px rgba(0,0,0,0.4);
}

.preview#seamless h2 {
	margin: 0 0 20px 0;
	line-height: 1;
}

.preview#flow .synopsis a {
	color: #000;
}

/*Flow*/

.store.flash {
	color: #fff;
	margin: 0 auto;
	border-radius: 8px;
	background: #3D5866; /* old browsers */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3D5866), color-stop(100%,#1D2C33)); /* webkit */
	background: -moz-linear-gradient(top, #3D5866 0%, #1D2C33 100%); /* firefox */
	background: -o-linear-gradient(top, #3D5866 0%, #1D2C33 100%); /* opera */
	background: linear-gradient(top, #3D5866 0%, #1D2C33 100%); 
	}

.store.flash p {
	background:  url(/img/mac-store.png) no-repeat 10px center; 
	padding: 10px 10px 10px 60px;
}

#flow #content {
	background: #f1f0ec url(/img/appicon-flow-220.png) no-repeat 230px 0;
	padding: 130px 1.5em 1.5em 1.5em;
	color: #333;

}

.feature img {
	max-width: 100%;
	height: auto;
}

.feature,
.row {
	clear: left;
	width: 100%;
	overflow: hidden;
	margin: 0 0 2em 0;
}

.designaward img {
	float: right;
}

.thumbs {
	list-style-type: none;
	overflow: hidden;
	margin: 1.5em 0;
}

.thumbs li {
	width: 42%;
	float: left;
	margin: 0 4% 1.5em 4%;
}

.thumbs li img {
	max-width: 100%;
	height: auto;
}

#slideshow img{
	max-width: 100%;
	height: auto;	
}

.caption {
	color: #333;
}

#caption {
	float: left;
	margin: 0 0 3em 0;
}

#controls {
	float: right;
	font-size: 13px;
}

.thumbs,
a.play {
	display: none;
}

a.prev {
	margin: 0 1em 0 0;
}

table {
	border-collapse: collapse;
	margin: 1em 0;
	width: 100%;
}

tr {
	margin: 0 0 0.75em 0;
	display: block;
}

td, #CustomerCountry, td input[type="text"] {
	display: block;
	width: 100%;
}

#PaymentType label {
	text-indent: -9999px;
	background: no-repeat;
	background-position: 0 0; 
	height: 29px;
	margin-top: -2px;
	margin-left: 5px;
	display: inline-block;
}

#PaymentType label#CreditCard {
	width: 219px;
	background-image: url(/img/creditcards.png);
}

#PaymentType span {
	display: block;
	margin: 0 0 0.5em 0;
}

#PaymentType p {
	margin: 0 0 0.5em 0;
}

label#Paypal {
	width: 50px;
	background-image: url('/img/paypal.gif');
}

#CreditCardInfoTable select {
	margin: 0 1em 0 0;
}

.buybutton {
	font-size: 16px;
	float: right;
}

.releasenotes li {
	padding: 0 0 0 6em;
	margin: 0 0 0.5em 0;
	clear: left;
	position: relative;
}

.new, .fixed, .changed {
	color: #fff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	font-size: 12px;
	padding: 2px 4px;
	margin: 0 0.25em 0 0;
	text-transform: uppercase;
	letter-spacing: 1px;
	position: absolute;
	left: 0;
	width: 6em;
	text-align: center;
}

.new {
	background: #E68317;
}

.fixed {
	background: #60BF3A;
}

.changed {
	background: #46A5DD;
}

/*Seamless*/

iframe {
	margin: 1.5em 0;
	position: relative;
	z-index: 1 !important;
}

body#seamless {
	background-image:url(/img/stream.png);
	background-position: 0 0;
}

body#seamless h1 {
	line-height: 0.9;
}

#seamless .getit .iOSAppStoreBadge
{
	width: 168px;
	height: 58px;
	background: url(/img/iOSAvailableOnAppStore.png) no-repeat;
	margin: 0px auto;
	margin-top: 1.0em;
	margin-bottom: 0.5em;
}

#seamless #content {
	background: url(/img/appicon-seamless-220.png) no-repeat 230px 0;
	padding: 130px 1.5em 1.5em 1.5em;
}

.mainvideo {
	display: none;
}

.vimeolink {
	background: url(/img/posterframe.jpg) no-repeat center center;
	background-size: auto 100%;
	height: 200px;
	display: block;
	margin: 1.5em 0;
	text-align: center;
	line-height: 340px;
	font-size: 20px;
	text-shadow: 0 0 10px rgba(0,0,0,0.9);
	border: 1px solid rgba(255,255,255,0.3);
}

.tweetblast {
	display: block;
	padding: 180px 0 0 0;
	background: url(/img/beosound-small.png) no-repeat center top;
	clear: left;
}

.blast .intro {
	margin: 2em 0;
}

.image {
	text-align: center;
}

.image img {
	max-width: 100%;
	height: auto;
}

.instructions {
	clear: left;
	padding: 1em 0 0 0;
	overflow: hidden;
}

.instructions ol {
	margin: 0 0 1em 1.8em;
}

.instructions li {
	margin: 0 0 0.75em 0;
	font-size: 16px;
	color: rgba(255,255,255,0.4);
}

.instructions iframe {
	margin: 0;
}

.more {
	clear: left;
	width: 100%;
	overflow: hidden;
	margin: -60px 0 0 0;
}

#video {
	background: url(/img/video_thumb.png) no-repeat;
	width: 139px;
	height: 83px;	
	line-height: 140px;
	font-size: 12px;
	display: block;
	float: right;
	margin: 0 0 1em 1.5em;
	text-align: center;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid rgba(255,255,255,0.3);
	box-shadow: 0 0 16px #000;
	-moz-box-shadow: 0 0 16px #000;
	-o-box-shadow: 0 0 16px #000;
	-webkit-box-shadow: 0 0 16px #000;
	text-shadow: 0 1px 4px #000;
}

#video:hover,
#video:focus {
	box-shadow: 0 0 16px cyan;
	-moz-box-shadow: 0 0 16px cyan;
	-o-box-shadow: 0 0 16px cyan;
	-webkit-box-shadow: 0 0 16px cyan;
}

/*Support page*/

#support h1 {
	font-size: 22px;
	text-align: center;
	margin: 0 0 1.5em 0;
}

#support h1 img {
	margin: 0 6px 0 0;
}

.choose {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

.choose a {
	display: block;
	width: 46%;
	margin: 0 2%;
	padding: 10px 0;
	float: left;
	text-align: center;
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	border-radius: 14px;
}

.choose img {
	width: auto;
	height: 130px;
}

.choose a:hover,
.choose a:focus,
.choose a:active {
	background: rgba(0,0,0,0.05);
	box-shadow:inset 0 0 10px rgba(0,0,0,0.1);	
	-moz-box-shadow:inset 0 0 10px rgba(0,0,0,0.1);	
	-o-box-shadow:inset 0 0 10px rgba(0,0,0,0.1);	
	-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,0.1)
}

.choose a b{
	display: block;
	color: #999;
	font-size: 16px;
}

.faqs {
	margin: 1.5em 0 0 0;
}

.faqs ol {
	list-style-type: none;
	margin: 0;
}

.faqs ol ol{
	padding: 0 0 0 2em;
}

form b {
	color: red;
	font-size: 18px;
}

label {
	display: block;
}

.attach label, .attach span {
	display: inline;
	padding: 0 1em 0 0 0;
}

#OrderForm input[type="text"],
.text-field, 
textarea#message,
input.query {
	padding: 0.4em;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
    background: rgba(255,255,255,0.5);
	font-size: 14px;
	-o-transition-property: background;
	-webkit-transition-property: background;
	-moz-transition-property: background;
	transition-property: background;
	 -o-transition-duration: 0.2s;
	 -webkit-transition-duration: 0.2s;
	 -moz-transition-duration: 0.2s;
	 transition-duration: 0.2s;
	 border:1px solid rgba(0,0,0,0.35);
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

.text-field, textarea#message {
	display: block;
	margin: 0 auto;
	width: 98%;
}

#OrderForm input[type="text"]:focus,
.text-field:focus, 
textarea#message:focus {
	background: #fff;
	 border:1px solid rgba(0,0,0,0.8);
} 

#seamless .text-field, 
#seamless textarea#message {
	 border:1px solid rgba(255,255,255,0.35);
}

textarea#message {
	height: 8em;
}

.helptext {
	display: block;
	margin: 0.5em 0;
}

.submit {
	font-size: 16px;
	margin: 1em 0;
}


/* About Page */

#about #content {
	background: url(/img/brian-small.jpg) no-repeat right top;
	padding: 250px 1.5em 1.5em 1.5em;
}

#about h1 {
	margin: 0 0 1em 0;
}

#about blockquote {
	margin: 0 0 1em 1em;
    padding: 0 0 0 2em;
}

#about blockquote p {
    font-size: 1.6em;
    text-indent: -0.7em;
    margin: 0 0 0.5em 0;
    line-height: 1.5;
}

#about blockquote p:before {
	content: '“';
	font-size: 200%;
	line-height: 1;
	}
#about blockquote p:after {
	content: '”';
	font-size: 200%;
	line-height: 1;
	position: absolute;
	margin: 0 0 0 22px;
	}	

.nobreak {
	white-space: nowrap;
}


/*Tumblr*/

#sidebar {
	width: 250px;
	margin: 1em auto;
}

.button a {
	display: block;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
	float: left;
	font-size: 12px;
	text-align: center;
	overflow: hidden;
	height: 24px;
	margin: 0 5px 1em 0;
	line-height: 24px;
	background-image: url(/img/tumblr.png);
	background-repeat: no-repeat;
	background-position: 6px 0;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	padding: 0 12px 0 30px;
	color: #999;
	-o-transition-property: none;
	-webkit-transition-property: none;
	-moz-transition-property:none;
	transition-property: none;
}

#blog .button a:hover,
#blog .button a:focus,
#blog .button a:active {
	color: #000;	
	background-color: rgba(0,0,0,0.02);
	box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 0 1px rgba(0,0,0,0.4);
	-moz-box-shadow:0 1px 0 #fff, inset 0 0 3px rgba(0,0,0,0.1);
	-o-box-shadow:0 1px 0 #fff, inset 0 0 3px rgba(0,0,0,0.1);
	-webkit-box-shadow:0 1px 0 #fff, inset 0 0 3px rgba(0,0,0,0.2);
}

#button-rss a:hover {
	background-position: 6px -24px;
}

#button-archive a {
	background-position: 6px -48px;
}

#button-archive a:hover {
	background-position: 6px -72px;
}

#button-follow a {
	background-position: 6px -96px;
}

#button-follow a:hover {
	background-position: 6px -120px;
}

.tweet {
	clear: left;
	margin: 0 0 1em 0;
}

.tweet a{
	display: block;
	background-repeat:no-repeat;
	background-position: 4px -60px;
	background-image: url(/img/twitter.png);
	height: 30px;
	padding: 2px 0 0 42px;
	line-height: 30px;
	color: #000;
	opacity: 0.35;
	-o-transition-property: opacity;
	-webkit-transition-property: opacity;
	-moz-transition-property: opacity;
	transition-property: opacity;
}

.tweet a:hover ,
.tweet a:active {
	opacity: 1;
}

#search-form {
	clear: left;
	padding: 1em 0 0 0;
	border-top: 1px solid rgba(0,0,0,0.1);
	display: none;
}

#search-scope {
	display: none;
}

input.query {
	margin: 0 0.5em 0 0;
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	border-radius: 14px;
	font-size: 14px;
	width: 220px;
}

input {
	vertical-align: middle;
}

#search-scope {
	font-size: 12px;
	color: rgba(0,0,0,0.6);
}

#search-scope label {
	display: inline;
	margin: 0 1em 0 0;
}

article {
	padding: 0 0 2em 0;
	overflow: hidden;
	clear: left;
}

article+article {
	padding: 2em 0;	
	border-top: 1px solid rgba(0,0,0,0.1);
}

article h2 {
	margin: 0 0 1em 0;
}

.copy {
	color: rgba(0,0,0,0.8);
}

.copy p {
	margin: 0 0 0.75em;
}

.copy ul,
.copy ol {
	margin: 1em 0;
	padding: 0 0 0 2em;
}

.copy ul li,
.releasenotes li {
	list-style-type: none;
}

.copy ul li:before {
	content: "●";
	position: absolute;
	margin: -0.1em 0 0 -1em;
	font-size: 16px;
}

sup {
	color: #999;
}

pre {
	overflow: auto;
	padding: 1em;
	background: rgba(0,0,0,0.03);
	margin: 0 0 0.75em;	
	font-family: Consolas, monospace;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;	
}

article .footer {
	font-size: 12px;
}

/*Photos*/

.photo a {
	margin: 0 0 1em 0;
	display: block;
}

.photo img {
	max-width: 100%;
	display: inline-block;
	padding: 10px;
	background: #fff;
	-webkit-box-shadow: 1px 1px 0 rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.2);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	transform: rotate(-0.8deg);
	-moz-transform: rotate(-0.8deg);
	-o-transform: rotate(-0.8deg);
	-webkit-transform: rotate(-0.8deg); 
}


/*Quotes*/

article blockquote {
    font-size: 1.2em;
    margin: 1em 2em 0.5em 2em;
    line-height: 1.8;
}

article blockquote p {
	margin: 0;
	color: rgba(0,0,0,0.6);
}

article cite {
	text-align: right;
	display: block;
}

article blockquote p:before {
	content: '“';
	font-size: 200%;
	line-height: 1;
	position: absolute;
	margin: 0 0 0 -0.5em;
	}
	
article blockquote p:after {
	content: '”';
	font-size: 200%;
	line-height: 1;
	position: absolute;	
	margin: 0 0 0 0.3em;
}

.album_art {
	float: right;
	margin: 0 0 0 2em;
}

.album_art img {
	max-width: 200px;
	height: auto;
	-webkit-box-shadow: 1px 1px 0 rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.2);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	transform: rotate(0.8deg);
	-moz-transform: rotate(0.8deg);
	-o-transform: rotate(0.8deg);
	-webkit-transform: rotate(0.8deg); }

/*Links*/

.link{
	margin: 0 0 1em 0;
}

.link a {
	font-size: 18px;
}

div.meta {
	margin: 0 0 3em 0;
}

ul.meta {
	list-style-type: none;
	overflow: hidden;
	margin: 2em 0 0 0;
}

.meta li {
	float: left;
	line-height: 22px;
	margin: 0 2em 0 0;
	padding: 0.25em 0;
}

/*Chat*/

.line {
	margin: 0 0 0.25em 9em ;
	line-height: 1.4;
}

.line strong {
	float: left;
	margin: 0 0.5em 0 -9em;
}

/*Tags*/

.tags a {
	float: left;
	background-image: url(/img/tag.png);
	background-repeat: no-repeat;
	background-position: right 0;
	padding: 0 22px 0 6px;
	color: rgba(0,0,0,0.6);
	border-left: 1px solid #e2e0dd !important;
	margin: 0 0.75em 0.5em 0;
}

.tags a:hover,
.tags a:focus {
	color: rgba(0,0,0,1);
	background-position: right -32px;
	border-left: 1px solid #c7c2b3;
}

.tag-commas {
	display: none;
}

#navigation {
	text-align: center;
	border-top: 7px solid rgba(0,0,0,0.05);
	padding: 1em;
}

.clear {
	clear: both;
}

/* 404 */

#support #content,
#error #content,
#backsoon {
	text-align: center;
}

#backsoon header,
#backsoon logo {
	display: none;
}

#error h1, #backsoon h1 {
	font-size: 1.5em;
}

/* Desktop View */

@media only screen and (min-width: 481px) {

body {
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

h1 {
	font-size: 84px;
}

/* ------------------------ */
/* Layout */


#mask {
	position: fixed;
	background-position: left bottom;
	background-attachment: fixed;
	left:0;
	right: 0;
	bottom: 0;
	height: 120px;
	z-index: 99;	
}

header {
	position: fixed;
	background: rgba(0,0,0,0.8);
	left:0;
	right: 0;
	bottom: 0;
	height: 70px;
	z-index: 100;
	border-top: 1px solid rgba(255,255,255,0.1);
	padding: 0;
}

.logo {
	position: fixed;
	width: 150px;
	left: 50%;
	margin:0 0 0 -450px;
	bottom: 0;
	height: 70px;
	z-index: 101;
	padding: 0;
}

.logo a {
	position: absolute;
	left: -40px;
	top: 4px;
	width: 150px;
	-o-transition-property: opacity;
	-webkit-transition-property: opacity;
	-moz-transition-property: opacity;
	transition-property: opacity;
	 -o-transition-duration: 0.2s;
	 -webkit-transition-duration: 0.2s;
	 -moz-transition-duration: 0.2s;
	 transition-duration: 0.2s;	
}

.logo a:hover {
	opacity: 1;
}

#home .logo a {
	background: url(/img/fd-logo-home.png);
	opacity: 1;
}

nav {
	margin:0 auto;
	width: 700px;
	padding: 4px 0 0 200px;
	position: relative;
	z-index: 103;
}

nav ul {
	overflow: visible;	
}

.n-support,
.n-about,
.n-blog  {
	width: auto;
	text-align: left;
	margin: 0;
}

nav li {
	float: left;
	height: 66px;
	overflow: visible;
	}
	
nav li a, 
.n-flow a,
.n-seamless a {
	font-size: 16px;
	float: left;
	height: 70px;
	padding:16px 16px 0 16px;
	margin: 0 15px 0 0;
	position: relative;
	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-topright: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.n-about a {
	margin: 0;
}

nav li a b {
	display: block;	
	color: inherit;
	font-size: 11px;
}

nav li a:hover,
nav li.n-support .popup li:hover {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(61,88,102,0.6)), color-stop(100%,rgba(29,44,51,0.6))); /* webkit */
	background: -moz-linear-gradient(top, rgba(61,88,102,0.75) 0%,rgba(29,44,51,0.75) 100%); /* firefox */
	background: -o-linear-gradient(top, rgba(61,88,102,0.75) 0%,rgba(29,44,51,0.75) 100%); /* opera */
	background: linear-gradient(top, rgba(61,88,102,0.75) 0%,rgba(29,44,51,0.75) 100%); 
}

.n-seamless a,
.n-flow a {
	padding:16px 16px 0 56px;
}

nav li img {
	vertical-align: none;
	float: none;
	margin: 0;
}

.n-seamless img {
	position: absolute;
	top: -14px;
	left: 0px;
}

.n-flow a,
.n-seamless a {
	width: auto;
}

.n-flow img {
	position: absolute;
	top: -14px;
	left: 0;
}

#flow .n-flow a,
#seamless .n-seamless a,
#support .n-support>a,
#about .n-about a,
#blog .n-blog a {
	color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,0.6);
	border: 1px solid rgba(255,255,255,0.1);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3D5866), color-stop(100%,#1D2C33)); /* webkit */
	background: -moz-linear-gradient(top, #3D5866 0%, #1D2C33 100%); /* firefox */
	background: -o-linear-gradient(top, #3D5866 0%, #1D2C33 100%); /* opera */
	background: linear-gradient(top, #3D5866 0%, #1D2C33 100%);
}
	
#flow .n-flow a,
#seamless .n-seamless a    {
	background: url(/img/spotlight.png) no-repeat -55px -8px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3D5866), color-stop(100%,#1D2C33)); /* webkit */
	background: url(/img/spotlight.png) no-repeat -60px -18px, -moz-linear-gradient(top, #3D5866 0%, #1D2C33 100%); /* firefox */
	background: url(/img/spotlight.png) no-repeat -60px -18px, -o-linear-gradient(top, #3D5866 0%, #1D2C33 100%); /* opera */
	background: url(/img/spotlight.png) no-repeat -60px -18px, linear-gradient(top, #3D5866 0%, #1D2C33 100%); 
}
	
	
li.n-support {
	padding: 10px 0 0 0;	
	margin: -10px 0 0 0;
}
	
.popup {
	display: block;
	text-align: center;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;	
	position: absolute;
	z-index: 1000;
	bottom: 8px;
	margin: 0 0 0 -86px;
	background: rgba(0,0,0,0.8);
	width: 256px;
	height: 140px;
	padding: 6px 12px;
	opacity: 0;
	visibility: hidden;
	-o-transition-property: bottom,opacity;
	-webkit-transition-property: bottom,opacity,visibility;
	-moz-transition-property: bottom,opacity;
	transition-property: bottom,opacity;
	 -o-transition-duration: 0.2s;
	 -webkit-transition-duration: 0.2s;
	 -moz-transition-duration: 0.2s;
	 transition-duration: 0.2s;	
	box-shadow: 0 6px 12px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 6px 12px rgba(0,0,0,0.3);
	-o-box-shadow: 0 6px 12px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

nav li.n-support:hover .popup {
	bottom: 18px;
	opacity: 1;
	visibility: visible;
}

.popup p {
	font-size: 13px;
	margin: 6px 0;
}

nav .popup ul {
	overflow: hidden;
	list-style-type: none;
	background: url(/img/popup-arrow.png) no-repeat center bottom;
	height: 124px;
}

.popup li {
	float: left;
	margin: 0 12px;
	width: 92px;
	height: 92px;
	line-height: 104px;
	padding: 6px;
	-webkit-border-radius: 21px;
	-moz-border-radius: 21px;
	border-radius: 21px;
}

nav li.n-support .popup a  {
	display: block;
	float: none;
	position: static;
	padding: 0;
	text-indent: -999em;
	width: 92px;
	height: 92px;
}

nav li a.support-flow, 
nav li a.support-flow:hover {
	background: url(/img/appicon-flow-92.png) no-repeat;
}

nav li a.support-seamless,
nav li a.support-seamless:hover  {
	background: url(/img/appicon-seamless-92.png) no-repeat;
}
	
#content {
	margin: 0 auto;
	background: none !important;
	width: 900px;
	padding: 50px 20px 120px 20px !important;
	position: relative;
    }

.appicon {
	float: left;
	width: 220px;
	height: 220px;
	margin: 0 15px 15px 0;
	background-repeat: no-repeat;
}

.appicon.medium {
	float: left;
	width: 120px;
	height: 92px;
}

footer {
	color: rgba(255,255,255,0.4);
	background: none;
	position: fixed;
	right: 10px;
	bottom: 3px;
	z-index: 102;
	padding: 0;
}

footer p{
	margin: 0;
}

.fr {
	float: right;
}

.block {
	padding: 1em;
	margin: 3em 0;
	border-radius: 12px;
	display: block;
	overflow: hidden;
	text-decoration: none;
}


/* ------------------------ */
/* Homepage */


body.seamless#home {
    background-image: url(/img/preview-seamless.jpg);
}

body.flow#home {
    background-image: url(/img/Flow-Background.jpg);
}

#home #content {
	position: static;
}

.preview {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
    z-index: 0;
    overflow: hidden;
}

.screen {
	background: url(/img/flowpreview.png) no-repeat;
	width: 980px;
	height: 550px;
	position: absolute;
	left: 50%;
	bottom:85px;
	margin-left: -40px;
}

.screen img{
	position: absolute;
	right: -400px;
	bottom: 120px;
}

.preview .synopsis {
	width: 900px; 
	position: absolute;	
	left: 50%;
	margin: 0 0 0 -450px;
	top: 80px;
	bottom: 130px;
	color: rgba(255,255,255,0.8);
	display: block;
	background: url(/img/appicon-seamless-92.png) no-repeat 0 16px;
}

.seamless .synopsis {
	background: url(/img/appicon-seamless-92.png) no-repeat 0 16px;
}

.flow .synopsis {
	background: url(/img/appicon-flow-92.png) no-repeat 0 16px;
}

.preview#flow .synopsis {
	bottom: 190px;
}

.preview#flow h2 {
	margin: 0 0 0 104px;
	line-height: 1;
}

#seamless h1 {
	font-size: 5em;
}

#home.seamless .preview h1 {
	margin: 0 0 0 56px;
}

#home.flow .preview h1 {
	margin: 0 0 0 95px;
}

.synopsis p {
	width: 267px;
	margin: 0;
	font-size: 16px;
	position: absolute;
	bottom: 0px;
	margin: 0 0 0 104px;
}

.synopsis img {
	float: left;
	margin: 0 0 0 -50px;
}

#seamless .synopsis img {
	margin: 20px 0 0 -50px;
}

.intro {
	margin: 3em 20% 1em 0;
}

.getit {
	float: right;
	margin: -80px 0 0 0;
}

#seamless a.left {
	width: 151px;
}

#seamless a.right {
	width: 144px;
}

.left .store {
	background: url(/img/ios-store.png) no-repeat 6px 40%;
	padding: 0 0 0 28px;
}

.right .store {
	background: url(/img/mac-store.png) no-repeat 0 40%;
	padding: 0 0 0 28px;
}

.solo .store
{
	background: url(/img/mac-store.png) no-repeat 0 40%;
	padding: 0 0 0 28px;
}

.colleft {
	float: left;
	width: 46%;
}

.colright {
	width: 46%;
	margin: 0 0 0 54%;
}

.centrecol {
	padding: 0 20%;
}

#seamless .centrecol {
	background: url(/img/sliders.png) no-repeat center 30%;
}


/* Flow page */

body#flow {
    background-color:#f1f1f1;
    background-image: url(/img/Flow-Background.jpg);
	color: #555;
	overflow-x: hidden;
}

#flow .appicon {
	background-image: url(/img/appicon-flow-220.png);
	margin: -30px 15px 15px -60px;	
}

#flow .appicon.medium {
	background-image: url(/img/appicon-flow-92.png);
	margin: 0;	
}

body#flow #mask {
	background-image: url(/img/flow-mask.png);
	background-repeat: repeat-x;
}

.flowshow {
	width: 980px;
	height: 550px;
	margin: 3em 0 0 -35px;
	background: url(/img/flowscreens-lion/macbook.png) no-repeat 0 0;
	position: relative;
	z-index: 1;
}

#dock {
	background: url(/img/flowscreens-lion/dock.png) no-repeat;
	width: 142px;
	height: 41px;
	position: absolute;
	left: 418px;
	bottom: 105px;
	z-index: 100;
}

#flow .req {
	color: rgba(0,0,0,0.3);
}

#slideshow {
	width: 826px;
	height: 550px;
	padding: 47px 0 0 154px;
}
	
#controls {
	display: none;
}

#caption {
	position: absolute;
	top: 410px;
	left: 180px;
	z-index: 20;
	color: #fff;
}

.caption {
	color: #fff;
}

.thumbs {
	display: block;
	margin: -20px auto 0 auto;
	height: 200px;
	width: 800px;
	position: relative;
	z-index: 10;
}

.thumbs li {
	float: left;
	margin: 0 12px;
	padding: 9px 0 0 0;
	width: auto;
}

a.thumb {
	display: block;
	height: 114px;
	box-shadow:0 0 4px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.6);
	-moz-box-shadow:0 0 4px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.6);
	-o-box-shadow:0 0 4px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.6);
	-webkit-box-shadow:0 0 4px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.6);
	border-radius: 4px;
	border: 3px solid white;
}

ul.thumbs li.selected a.thumb {
	border: 3px solid #333;
	box-shadow:0 0 12px rgba(0,0,0,0.5), 0 0 1px rgba(0,0,0,0.6);
	-moz-box-shadow:0 0 12px rgba(0,0,0,0.5), 0 0 1px rgba(0,0,0,0.6);
	-o-box-shadow:0 0 12px rgba(0,0,0,0.5), 0 0 1px rgba(0,0,0,0.6);
	-webkit-box-shadow:0 0 12px rgba(0,0,0,0.5), 0 0 1px rgba(0,0,0,0.6);
	background: url(/img/arrow.png) no-repeat center top;
}

ul.thumbs li.selected {
	background: url(/img/arrow.png) no-repeat center top;
}

.copyurls section,
.ql section {
	float: left;
	width: 50%;	
}

.droplets section {
	float: right;
	width: 50%;
}

.editing img{
	display: block;
	margin: 0 auto;
}

.designaward h3,
.designaward p {
	padding: 0 0 0 30%;
}

.copyurls img,
.ql img {
	float: right;
}

.droplets img,
.designaward img{
	float: left;
}

.version {
	overflow: hidden;
	padding: 0 0 3em 0;
}

.version h3 {
	float: left;
	width: 15%;
	clear: left;
}

.releasenotes {
	clear: left;
	overflow: hidden;
}

.releasenotes ul {
	float: right;
	width: 81%;
}

/* Seamless page */

body#seamless {
    background-color: #000;
    background-image: url(/img/Seamless-Background.jpg);
}

#seamless #content a {
	border-bottom: 1px solid rgba(255,255,255,0.2);
}

#seamless .appicon {
	background-image: url(/img/appicon-seamless-220.png);
	margin: 0 0 0 -60px;	
}

#seamless .appicon.medium {
	background-image: url(/img/appicon-seamless-92.png);
	margin: 20px 0 0 0;	
}

body#seamless #mask {
	background-image: url(/img/seamless-mask.png);
	background-repeat: repeat-x;
}

#seamless .getit .iOSAppStoreBadge
{
	margin-top: 0px;
}

#seamless .req {
	color: rgba(255,255,255,0.4);
}

.tweetblast {
	font-size: 18px;
	min-height: 334px;
	padding: 50px 500px 0 0;
	background: url(/img/beosound.png) no-repeat right top;
}

.video {
	margin: 3em auto;
	width: 100%;
	z-index: 1;
}

.mainvideo {
	display: block;
	z-index: 1 !important;
}

.vimeolink {
	display: none;
}


/* Tweetblast */


#seamless .centrecol.blast {
	background: url(/img/sliders.png) no-repeat center 35%;
	padding: 20px 20% 0 20%;
}
	
.instructions ol {
	width: 48%;
}

.winner {
	float: right;
	width: 48%;
}

/* About Page */


body#about {
    background-image: url(/img/brian.jpg);
}

body#about #mask {
	background-image: url(/img/brian-mask.png);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 150px;
}

#about h1 {
	font-size: 30px;
	margin: 0 0 1em 0;
}

.about {
	padding: 3em 0 3em 0;
	width: 620px;
	padding: 50px 280px 70px 0;
	margin: 0 auto;
}

#about blockquote {
	margin: 0 0 1em 1em;
    padding: 0 0 0 2em;
    float: right;
    width: 46%;
   }

#about a {
	color: #fff;
	border-bottom: 1px solid rgba(255,255,255,0.4);
}

/* Support */

body#support,
body#error,
body#backsoon,
body#blog {
	background-color: #fff;
	background-image: url(/img/Support-Background.jpg);
	color: #000;
}

.choose {
	width: 70%;
}

.choose img {
	height: auto;
}

.faqs {
	width: 60%;
	float: left;
	margin: 0;
}

.faqss{
	width: 60%;
	float: left;
	margin: 0;
}

#flow .row,
#seamless .row {
	margin: 50px 0 0 0;
}

form.email,
.success {
	float: right;
	width: 32%;
}

form p {
	margin: 0 0 0.5em 0;
}


/* Purchase */


table {
	border-collapse: collapse;
	width: auto;
}

tr {
	margin: 0 0 0.75em 0;
	display: table-row;
}

td, #CustomerCountry, td input[type="text"] {
	width: auto;
}

td {
	display: table-cell;
	padding: 0.5em 0;
	vertical-align: top;
}

td.FieldLabel {
	text-align: right;
	vertical-align: top;
	width: 9em;
}

#CreditCardInfoTable td.FieldLabel {
	width:10em;
}

td#StateFieldLabel {
	width: 5em;
}

#OrderForm label {
	margin: 0 0.75em 0 0;
	line-height: 29px;
}

#OrderForm {
	/*background: url(/img/tint-05.png) 445px top no-repeat;*/ 
	clear: left;
	margin: 0px auto;
	border: 1px solid rgba(0,0,0,0.2);
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	overflow: hidden;
	box-shadow:inset 0 0 10px rgba(0,0,0,0.1);	
	-moz-box-shadow:inset 0 0 10px rgba(0,0,0,0.1);	
	-o-box-shadow:inset 0 0 10px rgba(0,0,0,0.1);	
	-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,0.1);
	padding: 14px;	
}

#OrderForm #WhoYouAre {
	height: 100%;
	width: 420px;
	float: left;
	padding: 0 14px 0 0;
}

#OrderForm input[type="text"],
#OrderForm #WhoYouAre select {
	width: 100%;
}

#OrderForm #WhoYouAre input#CustomerState {
	width: 50px;
}

#OrderForm #HowToPay {
    overflow: hidden;
	height: 100%;
	width: 420px;
	margin-left: 50%;
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius-topright: 6px;
	-webkit-border-bottom-right-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	padding: 0 0 0 14px;
}

#PaymentType {
	margin: 0 0 14px 0;
	padding: 0 0 14px 0;
	overflow: hidden;
	border-bottom: 1px solid rgba(0,0,0,0.2);
}

.payoptions p {
	display: inline;
	margin: 0 0.5em 0 0;
	line-height: 29px;
}

#PaymentType span {
	display: inline;
}

#PaymentType input {
	margin: -5px 0 0 10px;
}

#OrderForm #HowToPay table#CreditCardInfoTable td input
{
	width: 250px;
}

#OrderForm #HowToPay select#CustomerCreditCardExpirationMonth
{
	width: 50px;
}

#OrderForm #HowToPay select#CustomerCreditCardExpirationYear
{
	width: 70px;
}

#OrderForm #HowToPay #OrderExplanation
{
	padding: 12px;
	text-align: left;
}

#OrderForm #HowToPay #PayPalInfo
{
	padding: 12px;
	text-align: left;
}

#CompleteOrder {
	clear: left;
	overflow: hidden;
	padding: 1em;
}

.thankspurchase{
	width: 50%;
	margin: 0 auto;
}

.thankspurchase .intro {
	clear: left;
}

tr.error, label.error {
	color: red;
}

label.error {
	background: red;
	color: #fff;
	padding: 6px;
	position: relative;
	display: inline;
	top:0;
}

tr.error .helptext {
	color: #333;
}

#OrderForm tr.error input[type="text"] {
	border: 2px solid red;
	background: #fff;
}

.buybutton {
	color: #fff;
	font-size: 16px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	width: 122px;
	float: right;
	background: #3D5866; /* old browsers */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3D5866), color-stop(100%,#1D2C33)); /* webkit */
	background: -moz-linear-gradient(top, #3D5866 0%, #1D2C33 100%); /* firefox */
	background: -o-linear-gradient(top, #3D5866 0%, #1D2C33 100%); /* opera */
	background: linear-gradient(top, #3D5866 0%, #1D2C33 100%);
	border:1px solid rgba(0,0,0,0.6)!important;
	box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 0 1px #fff;
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 0 1px #fff;
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 0 1px #fff;
	padding: 6px 12px;
	text-transform: uppercase;
}

/* Tumblr */

body#blog #mask {
	background-image: url(/img/blog-mask.png);
	background-repeat: repeat-x;
}

#blog #content {
	clear: both;
	overflow: hidden;
}

#sidebar {
	width: 250px;
	position: fixed;
	background: url(/img/fd-textured-logo.png) no-repeat left bottom;
	padding: 0 0 270px 0;
	bottom: 120px;
	top: 60px;
}

#sidebar h4 {
	font-size: 14px;
	clear: left;
}

#posts {
	float: right;
	width: 68%;
}

article {
	padding: 0 0 2em 32px;
}

article+article {
	padding: 2em 0 2em 32px;	
}

.store.flash {
	/* -webkit-transform:rotate(8deg); */
	position: absolute;
	z-index: 100;
	border-radius:50%;
	color: #fff;
	text-align: center;
	right: 90px;
	top: -20px;
	width: 120px;
	height: 120px;
	/* border: 1px solid rgba(255,255,255,0.2); */
	line-height: 1.2;
	-webkit-box-shadow: 1px 2px 12px rgba(0,0,0,0.5);
	}

.store.flash p {
	background:  url(/img/mac-store.png) no-repeat center 14px;
	font-size: 13px;
	padding:46px 10px 0 10px;
	margin: 0;
}

.store.flash span {
	font-size: 16px;
	display: block;
	text-transform: uppercase;
	color: #bd95be;
}

} /* end of desktop view */


@media only screen and (max-device-width: 1024px) and (orientation:portrait) { 
    body  { zoom: 0.75;}
}

/* Higher res graphics for retina display */

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.logo a {
		background-image: url(/img/fd-logox2.png);
		background-repeat: no-repeat;
		background-size: 150px 40px;
}

	#home .logo a {
		background-image: url(/img/fd-logo-homex2.png);
		background-repeat: no-repeat;
		background-size: 150px 40px;
	}
	
	nav li img {
		display: none;
	}
	
	.n-flow a {
		background-repeat: no-repeat;
		background-image: url(/img/appicon-flow-48x2.png);
		background-size: 48px 48px;
		padding: 0 0 0 60px;
	}

	.n-seamless a {
		padding: 0 0 0 60px;
		background-repeat: no-repeat;
		background-image: url(/img/appicon-seamless-48x2.png);
		background-size: 47px 56px;
		min-height: 56px;
	}
	
	.store.flash p {
		background-image: url(/img/mac-store@x2.png);
		background-position: 14px center;
		background-repeat: no-repeat;
		background-size: 29px 29px;
	}
	
	
	#flow #content {
		background: #f1f0ec url(/img/appicon-flow-220x2.png) no-repeat 150% 0;
		background-size: 220px 220px;		
	}

	#seamless #content {
		background: url(/img/appicon-seamless-220x2.png) no-repeat 100% 0;
		background-size: 180px 220px;		
	}
	
	#seamless .getit .iOSAppStoreBadge
	{
		background: url(/img/iOSAvailableOnAppStore@2x.png) no-repeat;
		background-size: 168px 58px;
	}
	
	.sadpanda img, 
	.happypanda img {
		width: 50%;
		height: auto;
	}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
	.flow .synopsis {
		background: url(/img/appicon-flow-92x2.png) no-repeat 0 16px;
		background-size: 92px 92px;
	}
	
	.n-flow a,
	.n-seamless a  {	
		padding:16px 16px 0 56px;		
	}

}

/* iPad only styles */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

	/*

	body {
		padding: 70px 0 0 0;
	}
	body#home {
	    background-image: url(/img/preview-seamless-ipad-portrait.jpg);
	}   
	#home #content {
		padding: 0;
		margin: 0;
	}
	
	#mask, .popup {
		display: none;
	}

	header {
		position:absolute;
		top: 0;
		left: 0;
		width: 1024px;
		bottom: auto;
		border-top: 0;
		overflow: hidden;
	}

	footer {
		display:none;
	}

	.logo {
		position: absolute;
		left: 30px;
		top: 20px;
		z-index: 104;
		margin: 0;
	}
	
	.logo a {
		position: static;
	}

	nav {
		width: 720px;
		left: 200px;		
		padding: 20px 0 0 0;
	}
	nav li a b {
		display: none;
	}
	
	.seg-control a,
	.support {
		box-shadow: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
	}
	
	#content {
		margin: 0 42px;
	}

	#sidebar {
		position: absolute;
		bottom: auto;
		top: 60px;
	}
	#seamless .appicon {
		margin: 0 -20px 0 -40px;	
	}
	
	#seamless .getit .iOSAppStoreBadge
	{
		margin: 0px auto;
		margin-top: 0px;
		margin-bottom: 0.5em;
	}
	
	.about {
		padding: 3em 0 3em 0;
		width: 620px;
		padding: 50px 280px 70px 0;
		margin: 0 auto;
	}

	.preview .synopsis {
		bottom: auto;
		top: 160px;
	}

	.synopsis p {
		position: static;
		margin: 3em 0 0 104px;
	}
*/

}

#ThanksPurchaseContainer
{
	margin: 0;
	padding: 0;
	
	background: url(http://fivedetails.com/img/email/flow/Flow-Background.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-color: #F1F1F1;
	color: #555;
	overflow-x: hidden;
	
	font-family: "LFT Etica Regular", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	line-height: 1.5;
	font-size: 15px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	text-align: center;

	margin: 0px auto;
	width: 609px;
}

#ThanksPurchaseFlowHeader
{
	margin-top: 20px;
	width: 609px;
	height: 220px;
	background: url(http://fivedetails.com/img/email/flow/flow-license-thanks-header.png);
	background-repeat: no-repeat;
	background-position: left top;
}

#ThanksPurchaseMessage
{
	margin: 0x auto;
	margin-left: 198px;
	margin-top: -45px;
	text-align: left;
}