/*
 * Video Edit app
 * @author Handcraft <code@handcraft.co>
 */

/* Eric Meyer Reset v2.0 | 20110126 <http://meyerweb.com/eric/tools/css/reset/> */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin:0; border:0; padding:0;
	outline:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display:block;
}
blockquote, q {
	quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}

/* ================================ */
/* BASIC SETTINGS */

html {
	background:#eee;
}
html,
body {
	margin:0; padding:0;
	min-width:320px;
	font-family:'Calibri','Trebuchet MS','Verdana','Helvetica',Arial,sans-serif;
	font-family:'Avenir', sans-serif;
	line-height:1.4;
	background:#eee;
}

h1, h2, h3 {
	margin:10px 0;
	padding:0;
	font-weight:bold; font-weight:300;
}
h1 { font-size:2.50em; margin:0 0 0.5em 0; }
h2 { font-size:2em; margin:0.5em 0; }
h3 { font-size:1.5em; margin:0.5em 0; }

p {
	margin:1em 0;
	padding:0;
}

li { margin-left:20px; }

strong { font-weight:bolder; }
em { font-style:italic; }
a,
a:visited {
	color:#1791d0;
	background:inherit;
	text-decoration:none;
}
a:hover {
	color:#5db3e0;
	text-decoration:underline;
	cursor:pointer;
}
img {
	margin:10px 0 5px;
}

img,
video,
iframe { max-width:100%; }

blockquote {
	padding:0 12px;
	border-left:6px solid #EBD9BB;
	color:#666;
	font-family:Georgia, serif;
	font-style:italic;
	font-size:0.9em;
	line-height:1.4em;
}

.info {
	margin:8px 0;
	font-size:12px;
	color:#666;
}

section { clear:both; }

/* Tables */

table { display:block; margin:10px 0 ; width:auto; }
th,
tfoot td { padding:2px 5px; background:#eee; }
td { border:1px solid #eee; padding:5px; vertical-align:top; }


/*==== Shop CSS ====*/

.help { margin:0 0 5px 0; }
.help,
.meta { color:#999; font-size:11px; }

.message { margin:10px; border:1px solid #eee; padding:10px; background:#ffffcc; }

.messages li { border-bottom:1px solid #eee; padding:10px 0; }
.messages li:last-child { border-bottom:0; padding-bottom:0; }

.needs-js { display:none; }
.has_js .needs-js { display:block; }

.print-only { display:none; }

.left { float:left; }
.right { float:right; }
img.left { margin:0 24px 24px 0; }
img.right { margin:0 0 24px 24px; }


/*==== Admin Frontend Editing ====*/

.admin_edit { padding:3px 5px; background:#eee; font-size:11px;	 line-height:12px; text-transform:uppercase; }
.admin_edit a { color:#1791d0; font-weight:bold; }
.admin_edit img { height:10px; }

img.inline { display:inline; margin:0 5px 0 0; vertical-align:middle; }



/*==== SITE STRUCTURE ====*/

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.layoutBlock {
	position:relative;
	clear:both;
	margin:0 auto; padding:3.125%; max-width:1024px;
	z-index:10;
}


.mediaWrapper a {
	position:relative;
	display:block;
	margin:0; padding:0;
}
.playButton {
	position:absolute; left:50%; top:50%;
	margin:-78px 0 0 -78px;
	width:156px; height:156px;
	background:url(img/PlayButton.png) no-repeat center center;
	z-index:10;
	opacity:0.8;
	transform:scale(1,1); 
}
.mediaWrapper a:hover .playButton { opacity:1; transform:scale(1.4,1.4); }
/* mobile size */
.playButton { margin:-32px 0 0 -32px; width:64px; height:64px; background-size:100%; }

.mediaWrapper .title {
	display:block; position:absolute; left:50%; bottom:10%;
	margin: 0 0 0 -150px;
	width:300px;
	color:#fff;
	text-shadow: 0 1px 2px #000, 0 0 8px rgba(0,0,0,0.7);
	z-index:10;
	text-align:center;
	font-size:20px;
}

.mediaWrapper img,
#videos img {
	display:block; margin:0; padding:0; width:100%;
	vertical-align:middle;
	z-index:5;
}

.mediaWrapper {
	position:relative;
}
.mediaWrapper iframe,
.mediaWrapper video,
.mediaWrapper audio,
.mediaWrapper img {
	display:block;
	margin:0; width:100%;
	vertical-align:middle;
}

.applink {
	position:relative;
	z-index:100;
	clear:none;
	border-top:1px solid #999; border-color:rgba(0,0,0,.4);
	min-height:300px;
	background:#fff;
	box-shadow:1px 0 0 rgba(0,0,0,0.2), -1px 0 0 rgba(0,0,0,0.2);
	text-decoration:none;
}
.applink:hover,
.applink:hover * {
	text-decoration:none !important;
}
.applink .mediaWrapper {
	box-shadow:1px 0 0 rgba(0,0,0,0.2), -1px 0 0 rgba(0,0,0,0.2);
}

.applink a.tile-link {
	display:block;
	padding: 3.125% 3.125% 72px 3.125%;
	width:100%; 
	text-align:left;
}
.applink .appiconblock {
	display:block;
	margin:0 auto 4em auto;
	width:80px; height:80px;
	text-align:center;
}
/* mobile size */
.applink .appiconblock { float:left; margin:0 1em 3em 0; width:72px; height:72px; }
.applink .appiconblock span { display:none; }

.applink .appiconblock img {
	display:block;
	width:100%; margin:0 0 4px 0;
	vertical-align:middle;
}
.applink .appiconblock span {
	color:#999;
}
.applink h1 {
	text-align:left;
	font-size:1em;
	color:#666;
	padding-top:.25em;
}
#fastest-app.applink h1 em { color:#D3163D; }
#plus-app.applink h1 em { color:#A3D932; }

.applink .link {
	display:block;
	text-align:right;
	position:absolute; right:3.125%; bottom:3.125%;
	font-size:12px;
	z-index:1000;
}
.applink .link .indicator { font-size:10px; }

.actions {
	position:absolute; left:0; bottom:0; right:0;
	padding:0 3.125% 3.125% 3.125%;
	min-height:44px;
}

.button.action {
	height:44px;
	font-size:20px; line-height:44px;
	border-radius:7px;
	text-align:center;
	background:#dfed1d; /* Old browsers */
	background:-moz-linear-gradient(top, #dfed1d 0%, #8bcd28 100%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#dfed1d), color-stop(100%,#8bcd28)); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top, #dfed1d 0%,#8bcd28 100%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top, #dfed1d 0%,#8bcd28 100%); /* Opera 11.10+ */
	background:-ms-linear-gradient(top, #dfed1d 0%,#8bcd28 100%); /* IE10+ */
	background:linear-gradient(to bottom, #dfed1d 0%,#8bcd28 100%); /* W3C */
}

.appStoreLink {
	overflow:hidden;
	display:block;
	margin:0 auto; padding:0;
	width:165px; height:45px;
	background:url(img/AppStoreButton.png) no-repeat left top;
	background-size:100%;
	text-indent:100%;
	white-space:pre;
}

.linklist { margin:2em 7%; border-top:1px solid rgba(0,0,0,.1); padding:0; }
.linklist li { margin:0; padding:0; }
.linklist a {
	display:block; display:block; border:1px solid rgba(0,0,0,.1); border-top:0; padding:.75em; width:auto;
	font-size:18px;
	text-align:center;
}

footer {
	position:relative;
	clear:both;
	border-top:1px solid #999; border-color:rgba(0,0,0,.2);
	padding:32px 15% 64px 15%;
	min-height:320px;
	background: transparent url(img/footer-bg.png) no-repeat center center;
}
footer div {
	text-align:center;
}
footer #copyright {
	position:absolute; left:0; bottom:20px; right:0;
	color:#999;
}

/*
 ColorBox Core Style:
 The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/* cbox custom styles ==== */
#cboxOverlay { background:#fff; }
#colorbox{}
#cboxContent{
	overflow:visible;
	margin-top:44px; border:1px solid #000;
	box-shadow:0 2px 4px #000;
}
.cboxIframe{background:#000;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{background:#000; padding:1px;}
#cboxLoadingGraphic{background:url(/lib/colorbox/colorbox-loading.gif) no-repeat center center; }
#cboxLoadingOverlay{background:#000;}
#cboxTitle{position:absolute; bottom:-22px; left:0; color:#000;}
#cboxCurrent{position:absolute; bottom:-22px; right:205px; text-indent:-9999px;}
#cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{
	display:block;
	position:absolute; top:-56px;
	margin:0; border:0; padding:0;
	outline:0;
	width:44px; height:44px;
	background:url(/lib/colorbox/colorbox-controls.png) no-repeat right top;
	background-size:176px;
	text-indent:100%;
}
#cboxPrevious{ background-position:-44px 0px; right:44px; }
#cboxPrevious:hover{ background-position:-44px -44px; }
#cboxNext{ background-position:-88px 0px; right:0; }
#cboxNext:hover{background-position:-88px -44px;}
#cboxClose{ background-position:right top; left:0;}
#cboxClose:hover{background-position:right bottom; }
.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
.cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
.cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}


/* Extras */

html,
.playButton {
	-webkit-transition:all 0.25s;
	-ms-transition:all 0.25s;
	-o-transition:all 0.25s;
	transition:all 0.25s;
	-moz-transition:all 0.25s;
}


/* Responsive */

@media only screen and (-webkit-min-device-pixel-ratio:2) {
	.appStoreLink { background-image:url(img/AppStoreButton@2x.png); }
}

@media screen and (min-width:668px) {
	.applink h1 { font-size:1.1em; }
}

@media screen and (min-width:800px) {
	.applink h1 { font-size:1.4em; }
}

@media screen and (min-width:667px) {
	
	#videos {
		display:block;
		z-index:1;
	}
	#videos img { margin:-60px 0; }
	.applink { float:right; width:50%; min-height:100px; }
	.applink .mediaWrapper {
		display:none;
	}
	
	.appStoreLink { margin: 0 auto; }

	#extra-videos .mediaWrapper { display:none; }

}

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

	html { padding: 0 0 1px 0; }
	
	#videos img { margin:-96px 0; }

	.applink .link { position:absolute; right:2em; bottom:2em; font-size:14px; }
	.applink .link .indicator { font-size:12px; }

}

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

	html { padding:3.125%; }
	
}

@media screen and (max-width:666px) {

	#video-tiles { display:none; }

}

body,
section {
	margin:0 auto;
	max-width:1280px;
}

#videos {
	display:none;
}
#video-tiles .tile {
	float:right;
	width:50%;
}