html {height:100%;}
body {position:relative; height:100%; width:100%; min-width:960px; font:62.5%/1 "myriad-pro-1", "myriad-pro-2", "Myriad Web Pro", "Myriad Pro", Myriad, "Lucida Grande Unicode", "Lucida Grande", Verdana, Arial, sans-serif; background:#191919; color:#363636;}

i, em, cite {font-style:italic;}
b, strong {font-weight:bold;}
strike {text-decoration:line-through;}
code, pre {font-family:Monaco, "Andale Mono", "Lucida Console", "Courier New", monospace;}
abbr, acronym {font-size:85%; letter-spacing:0.1em; text-transform:uppercase;}
abbr[title], acronym[title], dfn[title] {border-bottom:1px dotted #ccc; cursor:help;}
del {text-decoration:line-through;}
address {font-style:normal;}
img {display:block;}
a {text-decoration:none;}

.replace {display:block; overflow:hidden; text-indent:-9999px; width:100%; height:100%;}
.float-right {float:right;}
.float-left {float:left;}
.clr {clear:both; overflow:hidden;}
.va-top {vertical-align:top;}
.va-middle {vertical-align:middle;}
.va-bottom {vertical-align:bottom;}
.offscreen {position:absolute; top:-9999px; left:-9999px;}
.on-top {position:relative; z-index:1;}
.small-caps {font-size:80%; letter-spacing:0.05em; text-transform:uppercase;}

header, footer, section, article, aside, hgroup {display:block;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;}

.sprite, .btn {background:url("../img/sprite.png?20101209") 0 0 no-repeat;}
a.btn {border:0 !important;}

#wrapper {overflow:hidden; position:relative; width:100%; min-height:100%; height:auto !important; height:100%; margin: 0 auto -42px; /* the bottom margin is the negative value of the footer's height */ }
#page {position:relative; z-index:1; margin:460px auto 0 auto; padding:460px 0 20px; width:720px; background:#fff;}
#header {position:absolute; top:-460px; left:0; width:720px;}
#footer {position:relative; z-index:1; margin:0 auto; width:720px; background:#fff; font-size:12px; line-height:15px; text-align:center; color:#707070;}
#footer, .push {
	height: 42px; /* .push must be the same height as .footer */
}

#awesome-line {position:absolute; top:-460px; left:0; width:1px; height:460px; background:#ff54ad;}

#header a.btn-buy-now {position:absolute; top:50px; right:70px; width:112px; height:32px; background-position:-20px -40px;}
#header a.btn-buy-now:hover {background-position:-20px -80px;}
#header a.btn-buy-now:active, #header a.btn-buy-now:focus {background-position:-20px -120px;}

#logo {position:absolute; top:50px; left:70px; width:149px; height:33px;}
#logo a {background-position:0 0;}

#tag-line {position:absolute; top:125px; left:70px; color:#fff; font-size:36px; line-height:1.2; white-space:nowrap;}

#page section {position:relative; margin:0 70px; padding:40px 0;}

/* Download layout */
.full-layout #header {position:relative; top:0; height:120px;}
.full-layout #logo {left:70px;}
.full-layout #logo a {background-position:-150px 0;}
.full-layout #tag-line {display:none;}

.full-layout #page {margin-top:0; padding:0;}

.full-layout #page #download {margin-top:0; padding-top:0;}
.full-layout #page #download hgroup {margin-top:0;}

.full-layout #header a.btn-buy-now {height:33px; background-position:-460px -40px;}
.full-layout #header a.btn-buy-now:hover {background-position:-460px -80px;}
.full-layout #header a.btn-buy-now:active, .full-layout #header a.btn-buy-now:focus {background-position:-460px -120px;}

/* Bottom section borders */
#how-to-use,
#advantages,
#getting-started {border-bottom:1px solid #e5e5e5;}

.panel {margin:0 0 30px 0; background:#ffe5f2; border:1px solid #ffdbed;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;}
.panel .button-wrapper {padding:20px;}
.panel .btn {margin:0 auto;}
.panel .info {padding:10px 20px 10px; font-size:12px; line-height:15px; background:#fff; text-align:center;
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}
.panel .info p {margin:0;}

.panel-blue {background:#e5effb; border:1px solid #cee1f8;}

.content h1,
.content .lrg {color:#000; font-size:28px; line-height:36px;}
.content .verification { color:#000; font-size:48px; text-align: center; line-height: 56px;}

.content h1 a,
.content .lrg a {color:#ff0084;}

.content h2,
.full-layout #download h1 {margin:1em 0 2em 0; color:#000; font-size:14px; line-height:16px; letter-spacing:1px; text-transform:uppercase;}

.content h2:first-child {margin-top:0;}

.content h3 {margin:0 0 0.5em 0; font-weight:bold; color:#ff0084;}
.content > h3:first-child {margin-top:0;}
.content p+h3 {margin-top:3em;}
.content #install h3 {color:#111;}

.content h4 {margin:1.5em 0 0 0; font-weight:bold; color:#191919;}

.content a {color:#191919; border-bottom:1px solid #ccc;}
.content a:hover {border-color:#555;}

.content {font-size:16px; line-height:22px;}
.content p,
.content ul,
.content ol,
.content table,
.content dl,
.content img,
.content address {margin:0 0 1em 0;}

.content ul,
.content ol {
	/*margin-left:1.5em;*/
}
.content li {margin-bottom:1em;}
.content ul li {list-style:square;}
.content ol li {list-style:decimal;}
.content .custom-bullets li {position:relative; list-style:none;}

.content .gt {position:relative; top:-1px; padding:0 2px; font-stretch:condensed; font-size:80%; color:#777;}

.shortcut {font-size:14px; font-family:"Lucida Grande Unicode", "Lucida Grande", "Arial Unicode", Arial, sans-serif;}
.bullet {position:absolute; top:0.5em; left:-16px; width:6px; height:6px; background-position:0 -40px;}

ol .bullet {top:0.25em; left:-26px; width:16px; height:16px;}

.li0 .bullet {background-position:0 -50px;}
.li1 .bullet {background-position:0 -70px;}
.li2 .bullet {background-position:0 -90px;}
.li3 .bullet {background-position:0 -110px;}
.li4 .bullet {background-position:0 -130px;}
.li5 .bullet {background-position:0 -150px;}
.li6 .bullet {background-position:0 -170px;}
.li7 .bullet {background-position:0 -190px;}
.li8 .bullet {background-position:0 -210px;}
.li9 .bullet {background-position:0 -230px;}
.li10 .bullet {background-position:0 -250px;}

/* Downloads */
#page #download {z-index:1; position:relative; margin:-730px 70px 0; padding-top:590px; padding-bottom:0;}
#download hgroup {position:relative; z-index:2; background:#fff;}
#download hgroup h1 {color:#000; font-size:28px; line-height:36px;}
#download hgroup h1 a {color:#000;}
#download hgroup h2 {display:none;}

/* Screenshots */
#screenshots {position:absolute; top:0; left:50%; width:360px; margin-left:-180px; height:800px;}
#screenshots .screenshot {display:none;}
#screens-perspective {z-index:2; position:absolute; top:0; left:-270px;}
#screens-reflection {z-index:1; position:absolute; top:370px; left:-180px;}

/* Download groups */
#download-groups {position:absolute; top:0; left:0;}
#download-groups .download {display:block; position:absolute; z-index:3; top:0; left:-70px; width:360px; padding-top:285px; cursor:pointer;}
#download-groups .icon {margin:0 auto 14px auto; width:128px; height:128px;}
#download-groups h3 {margin:0 0 14px 0; color:#000; font-size:24px; line-height:1.25; font-weight:bold; text-align:center;}
#download-groups .download .info {display:block; text-align:center; font-size:12px; line-height:16px;}
#download-groups .download .info h4 {color:#000; font-weight:bold;}

#download-groups #download-aperture {left:290px;}

#download-iphoto .icon {background-position:-20px -190px;}
#download-aperture .icon {background-position:-148px -186px;}

a.btn-download {margin:0 auto 12px auto; width:124px; height:33px; background-position:-140px -40px;}
a.btn-download:hover {background-position:-140px -80px;}
a.btn-download:active, a.btn-download:focus {background-position:-140px -120px;}

a.btn-buy-now {width:162px; height:45px; background-position:-290px -40px;}
a.btn-buy-now:hover {background-position:-290px -90px;}
a.btn-buy-now:active, a.btn-buy-now:focus {background-position:-290px -140px;}

.panel-blue a.btn-buy-now {background-position:-290px -190px;}
.panel-blue a.btn-buy-now:hover {background-position:-290px -240px;}
.panel-blue a.btn-buy-now:active, a.btn-buy-now:focus {background-position:-290px -290px;}

/* Features */
#page #features {position:relative; z-index:1; padding-right:260px; border-bottom:1px solid #e5e5e5;}
#features {font-size:18px; line-height:24px;}
#features h2 {display:none;}
#features .aside {position:absolute; top:40px; right:0; width:220px;}

#install {position:relative; margin:0 0 80px; padding-right:330px;}
#install li {position:relative; list-style:none;}
#export-screenshot {position:absolute; bottom:-40px; right:-60px; margin:0;}

#upload-screenshot {position:relative; right:-4px; margin:1.25em 0 1.5em 26px; float:right; width:391px; height:128px;}
#upload-thumb {position:absolute; top:35px; left:17px; display:block; width:71px; height:71px; border:0;}
#upload-thumb img {margin:0;}

/* Coloumns */
.columns {margin-bottom:2em;}
.columns .col {float:left;}
.col-end {margin-right:0 !important;}
.col2 {width:250px; margin-right:80px;}

/* Typekit */
.wf-active #tag-line {font-weight:300;}
.wf-active #download hgroup h1,
.wf-active .content h1,
.wf-active .content .lrg {font-weight:300;}
.wf-active .content b,
.wf-active .content strong,
.wf-active .content h4 {font-weight:600;}

.wf-active .full-layout #download h1 {font-weight:400;}

#circle, #top-fade {display:none;}

/* Rounded Corners */
.borderradius #circle {display:block; position:absolute; top:-1460px; left:50%; margin:0 0 0 -1100px;
	width:2200px; height:2200px;
	-webkit-border-radius:1100px; -moz-border-radius:1100px; border-radius:1100px;
	background:#ff0084;
	background:-moz-radial-gradient(50% 50% 0deg,circle cover, #ff0084, #d90070);	
	background:-webkit-gradient(radial, 1100 1100, 900, 1100 1100, 1100, from(#ff0084), to(#d90070));
}

/* Gradient support */
.cssgradients #top-fade {display:block; position:absolute; top:0; left:0; width:100%; height:600px; background:#fff;
	background:-moz-linear-gradient(0% 100% 90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .15));
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, .15)), to(rgba(255, 255, 255, 0)));
}

.cssgradients #page-fade {display:block; position:absolute; top:-200px; left:0; width:720px; height:200px; background:#fff;
	background:-moz-linear-gradient(0% 100% 90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 1)));
}

/* 
	3D Transforms
	Setup 3D screenshots
*/
.csstransforms3d #screenshots .screenshot {z-index:4; position:absolute; top:0; left:-343px;}
.csstransforms3d #screenshots .screenshot .image {position:relative; background:#fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.csstransforms3d #screenshots .screenshot img {position:relative; z-index:2;}
.csstransforms3d #screenshots .screenshot .shadow {position:absolute; bottom:-15px; left:0; z-index:1;}
.csstransforms3d #screenshots .screenshot .shadow-vert {position:absolute; bottom:0; right:-15px; z-index:1;}

.csstransforms3d #screenshots #screen-aperture .shadow-vert {right:auto; left:-15px;}

/* Hide default image */
.csstransforms3d #screens-perspective, .csstransforms3d #screens-reflection {display:none;}
.csstransforms3d #screenshots .screenshot {display:block;}.csstransforms3d #screenshots {-webkit-perspective: 600;}
.csstransforms3d #screenshots #screen-iphoto {
	width:686px;
	height:454px;
	left:-376px;
	z-index:4;
	-webkit-transform: scaleY(.69) scaleX(.65) rotateX(0) rotateY(3deg) translate(0, 9px) skew(0deg, -1deg) scaleZ(1) rotateZ(0deg) translateZ(0);
	-webkit-transform-origin-x: 50%;
	-webkit-transform-origin-y: 45%;
	-webkit-transition: -webkit-transform .3s ease;
}
.csstransforms3d #screenshots #screen-aperture {
	display:block;
	z-index:3;
	top:-70px;
	left:auto;
	right:-378px;
	width:686px;
	height:535px;
	-webkit-transform: scaleY(.70) scaleX(.665) rotateX(0) rotateY(-3.25deg) translate(0, -9px) skew(0deg, 1deg) scaleZ(1) rotateZ(0deg) translateZ(-10px);
	-webkit-transform-origin-x: 50%;
	-webkit-transform-origin-y: 45%;
	-webkit-transition: -webkit-transform .3s ease;
}

/* Hover */
.csstransforms3d #screenshots #screen-iphoto.hover {
	-webkit-transform: scaleY(.75) scaleX(.75) rotateX(0) rotateY(0) translate(50px, -5px) skew(0deg, 0deg) scaleZ(1) rotateZ(0deg) translateZ(10px);
	-webkit-transition: -webkit-transform .15s ease;
}
.csstransforms3d #screenshots #screen-aperture.hover {
	-webkit-transform: scaleY(.75) scaleX(.75) rotateX(0) rotateY(0) translate(-50px, -5px) skew(0deg, 0deg) scaleZ(1) rotateZ(0deg) translateZ(10px);
	-webkit-transition: -webkit-transform .15s ease;
}

/* Hover Fade */
.csstransforms3d #screenshots #screen-iphoto.hover-fade {
	-webkit-transform: scaleY(.69) scaleX(.65) rotateX(0) rotateY(3deg) translate(-100px, -20px) skew(0deg, -1deg) scaleZ(1) rotateZ(0deg) translateZ(-120px);
	-webkit-transition: -webkit-transform .15s ease;
}
.csstransforms3d #screenshots #screen-aperture.hover-fade {
	-webkit-transform: scaleY(.70) scaleX(.665) rotateX(0) rotateY(-3.25deg) translate(100px, -9px) skew(0deg, 1deg) scaleZ(1) rotateZ(0deg) translateZ(-200px);
	-webkit-transition: -webkit-transform .15s ease;
}

/* Drop opacity on fade hover */
.csstransforms3d #screenshots #screen-iphoto.hover-fade .screen, .csstransforms3d #screenshots #screen-iphoto.hover-fade .shadow,
.csstransforms3d #screenshots #screen-aperture.hover-fade .screen, .csstransforms3d #screenshots #screen-aperture.hover-fade .shadow {
	opacity:0.825;	
	-webkit-transition: -webkit-transform .15s ease;
}

/* Groups */
.csstransforms3d #download-groups .download {-webkit-transition: -webkit-transform .15s ease;}
.csstransforms3d #download-groups .download.hover-fade {
	opacity:0.85;
	-webkit-transform:scale(.95) translate(25px, 5px);
	-webkit-transition: -webkit-transform .15s ease;
}
.csstransforms3d #download-groups #download-iphoto.hover-fade {
	-webkit-transform:scale(.95) translate(-25px, 5px);
}

/* Icon Hover */
.csstransforms3d #download-groups .icon {-webkit-transition: -webkit-transform .15s ease;}
.csstransforms3d#download-groups .download.hover .icon {
	-moz-transform: scale(1.05);
	-webkit-transform:scale(1.05);
	-webkit-transition: -webkit-transform .15s ease;
}