html,body{margin:0;padding:0;background-color:#f0f0f0;height:100%}
body{font: 0.96em 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif; text-align:center}
/*		p{margin:0 0 10px 0}*/

a { color: #333; border:none; }
/*		a img { border:none; } */

a.permalink { text-decoration: none; font-weight: bold; }
a.permalink:hover { color:#81b3cc; }

div#header {
	background:url('../images/header-background.png') repeat-x;
	height:328px;
	margin:0;
	margin-top:-2px;
}

img#logo { margin: 55px 0 0 50px; padding: 0; border:none}
div#icon { background:transparent url('../images/header-icon2.png') no-repeat center top; min-height: 328px; }

img.lazy { background:url('../images/ajax-loader.gif') center center no-repeat; }
img.lazysmall { background:url('../images/ajax-loader-small.gif') center center no-repeat; }

img.appstore { margin: 10px 0; padding: 0; border:none; }
img.feature {margin: 10px auto; }

.video { border: 4px solid white; float:right; margin:0 0 15px 15px;}
img.left { float:left; margin:0.5em 1.2em 0.5em 0;}
img.right {float:right; margin:0.5em 0 0.5em 1.2em;}

div.left, div.right { width:50%; float:left; }
.alignright { text-align: right; }


div#container{text-align:center; width:906px;margin:10px auto 0 auto; background:url('../images/content-background.png') repeat-y; border:1px solid #f0f0f0; min-height: 100%}

div.innercontainer, div.subsequentContainer { text-align:left; width:900px; margin:0 auto; }
div.innercontainer {
	background:#fefefe url('../images/first-background.png') bottom left repeat-x;
}
div.subsequentContainer, div.containerwithnewribbon {
	background:#ededed url('../images/subsequent-background.png') top left repeat-x;
}

div.containerwithnewribbon {background:url('../images/new-ribbon.png') no-repeat top right;}


div.wrapperbigger {float:left;width:850px;margin:20px 0 20px 50px;}
div.wrapper {float:left;width:790px;margin:20px 50px;}
div.wrapper p, div.wrapperbigger p {/*width: 380px;*/ line-height:1.4em; /*font-size: 0.9em;*/ }

p.caption {color: #666; font-size: 0.85em; font-style: italic; margin-top:-2em; text-align: center; }

div#content{width:490px;}
div#iphone{width:300px; text-align: left;/*  margin-top: -135px; */}

div.subsequentContent { width:100%; }

div.footerupwards, div.footerdownwards {clear:both; width:100%; background: url('../images/footer-upwards.png'); height:50px; min-height:50px; }
div.footerdownwards {background: url('../images/footer-downwards.png'); }

div.footerupwards { text-align: center; font-size: 12px;}

@font-face {
  font-family: HelveticaCB;
  src: local("HelveticaNeue-CondensedBold"), 
       local("Helvetica Neue Bold Condensed");
  font-weight: bold;
}

@font-face {
  font-family: "CA BND Web Bold";
  src: url("../fonts/CABNDWebBold.otf") format("opentype");
} 

h1, h2, h3 {
	font-family: "CA BND Web Bold", HelveticaCB, 'Helvetica Neue', 'ArialNarrow-Bold', 'Arial Narrow', Arial, sans-serif;
	font-weight: normal;
	font-size: 36px;
	color: #666;
	margin: 0.5em 0 0.5em 0;
	padding: 0;
	text-transform: uppercase;
/*	width: 380px;*/
	line-height: 1.1em;
}

/*h2 { width: 400px; }*/

h3 { font-size: 26px; }

span.hilite, span.due { color: #81b3cc }
span.due { /*font-family: "Myriad Pro";*/ font-weight:bold; text-transform:uppercase;  }

div#navigationContainer {
/* 	border:1px solid blue; */
	width:906px;
	margin:60px auto 0 auto;
	text-align: left;
}

ul#navigation {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 13px;
	text-align: right;
	float: right;
}

ul#navigation li {
	display: inline;
	margin: 0 0.8em;
}

ul#navigation li a {
	text-decoration: none;
}

ul#navigation li a:hover {
	color: #08c;
}

/* FAQ */
p.question, h5 { /*font-size: 0.9em;*/ font-weight: bold; margin-top: 2em; }
p.question:target { background-color:#fcffb1; }

p.answer { /*font-size: 0.9em;*/ line-height: 130%; }
ul#faq { margin-bottom: 2em; }
ul#faq li { /*font-size: 0.9em;*/ margin-left:-15px; margin-bottom: 0.5em; margin-right:0;}
ol li { margin-bottom: 0.5em; }
/*#content ul li { margin-right: 90px;margin-bottom: 0.5em; }*/

/* Buttons */
img.button {
	margin:0 0.2em;
}

a img.icon {
	border:none;
}

/* For the video */
div#iphoneFrame { 
	height: 615px;
	width: 286px;
	left: 200px;
	top: 0px;
	right: 0px;
	background: url('../images/iphone-frame.png');
	
	margin-top: -135px;
}

/* For the video */
div#iphoneiPadFrame { 
	height: 643px;
	width: 519px;
	left: 0px;
	top: 0px;
	right: 0px;
	background: url('../new-images/iphone-ipad-frame.png') no-repeat left top;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	div#iphoneiPadFrame { 
		background: url('../new-images/iphone-ipad-frame@2x.png') no-repeat left top;
		background-size: 100% 100%;
	}
}

/* For text formatting */
div.textBoxOnLeft, div.textBoxOnLeftNarrower, div.textBoxOnLeftMedium {
	float:left;
	margin:30px 90px 0 0px;
	width:400px;
}

div.textBoxOnLeftMedium {
	width:380px;
	margin-right:31px;
}

div.textBoxOnLeftNarrower {
	width:300px;
	margin-right:31px;
}

div.textBoxOnRight, div.textBoxOnRightNarrower, div.textBoxOnRightMedium {
	float:left;
	margin:30px 0 0 60px;
	width:400px;
}

div.textBoxOnRightMedium {
	width:380px;
	margin-left:31px;
}

div.textBoxOnRightNarrower {
	width:300px;
	margin-left:31px;
}

/* div.textBoxOnLeft h1, div.textBoxOnRight h1 { width:380px; } */

div.textBoxInColumn {
	float:left;
	margin:30px 20px 0 0px;
	width:240px;
}

div.textBoxHalfSize {
	float:left;
	margin:30px 30px 0 0px;
	width:370px;
}


/* For Tumblr Blog */


div.tumblr_title {
	font-weight: bold;
	font-size: 1.2em;
}


ol.tumblr_posts {
	list-style: none;
	padding: 0;
	margin:-4em 0 0 0;
}

li.tumblr_post {
	margin:4em 0;
	padding-top:3em;
	border-top:1px solid #ccc;
}


/* For Social */

div.social {
	width:110px;
	float:right;
	margin:0 0 15px 15px;
}


/* Separator */ 

div.separator {
	clear:both;
	margin:3em 0;
}

/* For developer's documentation */ 

code, tt, samp, pre {
	color: #666;
	font-family: Courier, Consolas, monospace;
	font-size: 103%;
}

div.docu_title {
	font-weight: bold;
	font-size: 1.4em;
	margin-top:2.5em;
	padding-bottom: 0.5em;
	border-bottom:1px solid #ccc;
}

span.docu_property {
	color: #996;
	font-family: 'Lucida Grande', Geneva, Helvetica, Arial, sans-serif;
	font-size: 91.67%;
	font-style: italic;
}

span.new_feature {
   color: rgba(198,0,0,0.94);
   font-weight: bold;
}


/* Updated webste with Due for Mac */
img.appIcon {
	margin-top:1.5em;
}

div#duefamily {
	left: 0px;
	top: 0px;
	right: 0px;
	width:360px;
/* 	border: 1px solid green; */
	text-align: right;
}
a.feature-hilite {
	background-color: #fcffb1;	
}