/*
SITE: 		Cocoatech.com
VERSION: 	1.0
COPYRIGHT:	Copyright © 2011 Cocoatech
AUTHOR: 	Pat Dryburgh
EMAIL:		hello@patdryburgh.com
WEBSITE: 	http://patdryburgh.com
 */

/* Reset */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } nav ul { list-style: none } blockquote, q { quotes: none } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent } ins { background-color: #ff9; color: #000; text-decoration: none } mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold } del { text-decoration: line-through } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help } /* tables still need cellspacing="0" in the markup */ table { border-collapse: collapse; border-spacing: 0 } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0 } input, select { vertical-align: middle } label, input[type=button], input[type=submit], button { cursor: pointer } header, nav, article, footer, address { display: block } .clear {clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}.clearfix{display:block}* html .clearfix{height:1%}

html, body { height: 100%; width: 100% }

/* Grid */

.container { width: 960px; margin: 0 auto; position: relative }

.grid_6,.grid_4,.grid_3,.grid_2,.grid_1 { float:left; margin:0px 10px; position: relative }

.grid_1 { width:940px }

.grid_2 { width:460px }

.grid_3 { width:300px }

.grid_4 { width:220px }

.alpha { margin-left: 0 }

.omega { margin-right: 0 }

.grid_right { float:right }

	footer .grid_right { text-align: right }

.grid_1	img, .grid_2 img, .grid_3 img, .grid_4 img, .grid_6 img { max-width: 100%; height: auto }

.content-pad-right { padding-right: 4%; /* Use as necessary. Also use percents here for fluidity. */ }

.content-pad-left: { padding-left: 4% }

/* Typography */

body { font: 400 62.5% "proxima-nova-1","proxima-nova-2", helvetica, sans-serif; color: #434343; -webkit-font-smoothing: antialiased }

form input { font-family: "proxima-nova-1","proxima-nova-2", helvetica, sans-serif }

p { font-size: 1.6em; line-height: 1.5em; margin-bottom: 1.5em }

	#hero p { font-size: 1.8em }
	
	#features p, #copyright p { font-size: 1.2em; line-height: 1.5em }
	
	#tools .slides p { padding: 0 24px }
	
li 	{ list-style: none }

	nav li { font-size: 1.6em; line-height: 2.125em; margin: 0 }
	
	footer nav li { line-height: 1.5em }
	
	.message li { font-size: 1.4em; line-height: 2em }

strong { font-weight: 700 }

.small, #hero .small { font-size: 1.2em; line-height: 1.5em }



h1 { font-size: 3.0em; font-weight: 300 }
	
	#branding h1 { font-size: 2.4em; font-weight: 700 }
	
	#hero h1 { font-size: 4.8em; line-height: 1em; text-transform: uppercase; letter-spacing: .075em }
	
	.content h1 { margin-bottom: .5em }
	
		#hero h1 span { font-weight: 700 }
	
	#work-effortlessly h1 { font-size: 6em; padding: .25em 0; margin-bottom: 0 }
	
	#features h1 { font-size: 4.8em }
	
	#try h1 { display: inline-block; margin-right: 24px }
	
	form h1 { font-size: 1.2em; font-weight: 700; line-height: 1.5em; margin-bottom: .5em }
	
	#newsletter h1 { font-size: 1.6em; font-weight: 700; padding-top: .5em; padding-left: 60px }
	
		#newsletter h1 span { font-weight: 300 }

h2 { font-size: 1.6em; font-weight: 700 }

	#hero h2 { font-size: 2.4em; font-weight: 700; line-height: 1em; text-transform: uppercase; margin-bottom: .75em }
	
	#your-files-your-way h2 { margin-bottom: .25em }

	#features h2 { font-size: 1.2em; margin-bottom: .5em }
	
	#tools .slides h2 { padding: 18px 24px 0; font-size: 2.4em }
	
#testimonial, #try { position: relative; text-align: center; padding: 30px 0; margin: 28px 0 }

	#testimonial p { font-size: 6em; line-height: 1em; margin-bottom: .25em }
	
	#testimonial cite { font-size: 2.4em; font-weight: 300 }


/* Anchors */

a, footer p a {  color: #434343;  text-decoration: none;  border: 0 }

p a, .message a { border-bottom: 1px solid rgba(0,0,0,.3) }

	a:hover, a:focus { color: #347FB5 }

.button { font-size: 2.4em; font-weight: 700; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.5); display: inline-block; padding: 6px 16px 4px; border: 1px solid #3A5615; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background-color: #5f9614; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(95,149,19)), color-stop(0.5, rgb(115,169,28)), color-stop(0.5, rgb(130,179,52)), color-stop(1, rgb(149,192,75))); background-image: -moz-linear-gradient(center bottom, rgb(95,149,19) 0%, rgb(115,169,28) 50%, rgb(130,179,52) 50%, rgb(149,192,75) 100%); -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; -webkit-box-shadow: 0 2px 3px rgba(0,0,0,.2), inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5); -moz-box-shadow: 0 2px 3px rgba(0,0,0,.2), inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5); box-shadow: 0 2px 3px rgba(0,0,0,.2), inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5) }

	a.button:hover, a.button:focus { color: #fff; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(115,169,39)), color-stop(0.5, rgb(135,189,48)), color-stop(0.5, rgb(150,199,72)), color-stop(1, rgb(169,212,95))); background-image: -moz-linear-gradient(center bottom, rgb(115,169,39) 0%, rgb(135,189,48) 50%, rgb(150,199,72) 50%, rgb(169,212,95) 100%) }
	
	a.button:active { position: relative; top: 1px; -webkit-box-shadow: 0 2px 3px rgba(0,0,0,.2), inset 0 4px 8px rgba(0,0,0,.5), inset 0 0 1px rgba(255,255,255,.4); -moz-box-shadow: 0 2px 3px rgba(0,0,0,.2), inset 0 4px 8px rgba(0,0,0,.5), inset 0 0 1px rgba(255,255,255,.4); box-shadow: 0 2px 3px rgba(0,0,0,.2), inset 0 4px 8px rgba(0,0,0,.5), inset 0 0 1px rgba(255,255,255,.4) }
	
	#features .button { font-size: .8em; text-transform: uppercase; font-weight: 700; padding: 2px 3px 1px; margin-right: 4px }

#branding nav li a:hover, #branding nav li a:focus { color: #347FB5 }

#branding nav li a:active { opacity: .8 }

/* Images */

.scr { position: relative; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border: 1px solid #434343; -webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255,.45), inset -1px -1px 0 rgba(255,255,255,.45); -moz-box-shadow: inset 1px 1px 0 rgba(255,255,255,.45), inset -1px -1px 0 rgba(255,255,255,.45); box-shadow: inset 1px 1px 0 rgba(255,255,255,.45), inset -1px -1px 0 rgba(255,255,255,.45); -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; display: block; margin-bottom: 1em }

.scr:after { clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0 }

.scr img { position: relative; z-index: -1; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; float: left }

/* Forms */

form { margin: 1em 0 0 }

form input { float: left }

form input[type="text"],
form input[type="email"] { position: relative; width: 65%; -webkit-border-top-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-bottomleft: 6px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; border: 1px solid rgba(0,0,0,.5); font-size: 1.6em; color: #434343; padding: .5em 3%; margin: 0; background-color: #eff1f2; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(255,255,255,.45)), color-stop(1, rgba(255,255,255,.05))); background-image: -moz-linear-gradient(center bottom, rgba(255,255,255,.45) 0%, rgba(255,255,255,.05) 100%); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(255,255,255,.3); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(255,255,255,.3) }

	form input[type="text"]:focus, form input[type="email"]:focus { outline: 0; background-color: #f8f9fa }

form input[type="submit"] { -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; border: solid rgba(0,0,0,.5); border-width: 1px 1px 1px 0; font-size: 1.6em; font-weight: 300; letter-spacing: .075em; padding: .5em 3% 0.5em; margin: 0; width: 28%; text-transform: uppercase; color: #F3F3F3; text-shadow: 0 -1px 0 rgba(0,0,0,.6); background-color: #CACFD3; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0,0,0,.6)), color-stop(0.5, rgba(0,0,7,.4)), color-stop(0.5, rgba(0,0,0,.3)), color-stop(1, rgba(0,0,0,.25))); background-image: -moz-linear-gradient(center bottom, rgba(0,0,0,.6) 0%, rgba(0,0,7,.4) 50%, rgba(0,0,0,.3) 50%, rgba(0,0,0,.25) 100%); -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(255,255,255,.3); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(255,255,255,.3) }

	form input[type="submit"]:hover, form input[type="submit"]:focus { background-color: #dde0e2 }
	
	form input[type="submit"]:active { -webkit-box-shadow: inset 0 4px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.8), 0 1px 0 rgba(255,255,255,.3); -moz-box-shadow: inset 0 4px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.8), 0 1px 0 rgba(255,255,255,.3); box-shadow: inset 0 4px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.8), 0 1px 0 rgba(255,255,255,.3) }
	
.statusMessage { display: none }

input::-webkit-input-placeholder {
    color: #929EA6 }

input:-moz-placeholder {
    color: #929EA6 }

/* Layout */

body { background: #EFF0F0 }

hr { border-top: 1px solid #d6dadd; border-bottom: 1px solid #fff; height: 0; margin: 30px 10px!important }

.successMessage hr { border-top: 1px solid #9FA3A6; border-bottom: 1px solid #FCFDFD; margin: 18px 0!important}

#branding { padding: 2em 0; position: relative; z-index: 9 }
	#branding h1 { display: inline; margin-left: 10px }

	#branding nav { float: right; margin-right: 10px }
	
	#branding nav li, footer nav li { display: inline-block; margin-left: 1.5em }
	
	footer nav li { margin: 0 1em }
	
	#branding nav li img { margin-right: 6px }
	
#hero, #testimonial, #try { background: #FAFAFA; border: solid #D6DADD; border-width: 1px 0 1px 0; width: 100%; 
	position: relative }

#hero { background: #FAFAFA url(/assets/images/bg-hero.png) bottom left repeat-x; min-height: 46em }

#macbook { position: absolute; bottom: 8px; left: 50%; margin-left: -624px }

#intro { width: 540px; position: relative; left: 50%; margin: 3em 0 12em -70px }

	#intro div { margin-top: 2em }
	
	#intro .button { float: left; margin-right: 20px }
	
#title { background: url(/assets/images/icon-pf6.png) bottom left no-repeat; padding-left: 90px }
	
#work-effortlessly p { padding: 0 0 0 34px; position: relative }

	#work-effortlessly p img { position: absolute; top: 2px; left: 0 }

.slideshow { background: url(/assets/images/bg-ss.jpg) top center }
	
#every-tool { width: 380px; margin-left: 90px }

#tools { background-position: 0 100%; position: relative }

	#tools .slides ul { width: 100%; height: 263px; overflow: hidden }

	#tools .slides li { display: block; width: 100%; height: 100%; float: left; color: #f1f1f1; position: relative; background-color: rgba(0,0,0,.6); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; overflow: hidden }
		
	#tools img { position: absolute; top: 0 }
	
	#dot-nav { position: absolute; bottom: 0; z-index: 90; width: 100%; text-align: center; background: rgba(0,0,0,.8) }
	
	#dot-nav li { display: inline; line-height: 22px }
	
	#dot-nav a { display: inline-block; width: 10px; height: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: 0 8px; position: relative; top: 1px; background-color: #f1f1f1; -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box;	
		-webkit-box-shadow: inset 1px 1px 4px rgba(0,0,0,.4); -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.4); box-shadow: inset 0 1px 3px rgba(0,0,0,.4) }
	
	#dot-nav .active a { background-color: rgb(171,212,99); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.5) }

.columns { -moz-column-count:3; -moz-column-gap:20px; -webkit-column-count:3; -webkit-column-gap:20px; column-count:3; column-gap:20px; margin-bottom: 18px }

#slideshow { position: relative; z-index: 1; float: left; margin: 0 10px 30px; width: 940px; height: 636px; overflow: hidden }

	#slideshow li { display: block; width: 100%; height: 636px; float: left }
	
	#slideshow .show { z-index: 9 }

	.slideshow img { position: relative; top: 0; z-index: 1; width: 100%; height: auto }

#thumbs { text-align: center; margin-bottom: 30px }

	#thumbs li { margin: 0 10px; display: inline-block }
	
	#thumbs a:hover, #thumbs a:focus { -webkit-box-shadow: 0 1px 4px rgba(54,128,181,.7); -moz-box-shadow: 0 1px 4px rgba(54,128,181,.7); box-shadow: 0 1px 4px rgba(54,128,181,.7); }
	
	#thumbs .arrow { position: absolute; top: -6px; left: 53px; display: none }
	
	#thumbs .active .arrow { display: block }
	
#your-files-your-way .grid_3 .scr { position: absolute; left: 0; top: 3em }

#your-files-your-way .grid_3 p { padding-left: 80px }

#features li { min-height: 11em }

#overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 90; display: none }

.message { position: absolute; z-index: 100; left: 50%; top: 50%; margin: -25% 0 0 -186px; width: 300px; padding: 36px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border: 1px solid rgba(0,0,0,.25); letter-spacing: .075em; color: #434343; text-shadow: 0 1px 0 #fff; background-color: #F2F2F2; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(212,217,221)), color-stop(1, rgb(238,240,243))); background-image: -moz-linear-gradient(center bottom, rgb(212,217,221) 0%, rgb(238,240,243) 100%); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 1px 1px 0 rgba(255,255,255,.4), inset -1px -1px 0 rgba(255,255,255,.4), 0 3px 8px rgba(0,0,0,.4); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 1px 1px 0 rgba(255,255,255,.4), inset -1px -1px 0 rgba(255,255,255,.4), 0 3px 8px rgba(0,0,0,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 1px 1px 0 rgba(255,255,255,.4), inset -1px -1px 0 rgba(255,255,255,.4), 0 3px 8px rgba(0,0,0,.4) }

	.message p { margin: .25em 0 .5em }
	
	.message img { margin: 0 auto 12px; display: block }
	
	.message .close { position: absolute; top: 6px; right: 6px; border: 0; width: 13px; height: 14px; 
		overflow: hidden }
	
	.message .close img { position: absolute }
	
	.message ul { margin-top: 1em }

footer { padding: 0 0 48px }

	footer nav { margin-bottom: 6px }

#newsletter { position: relative; padding: 12px 12px 10px; margin: 0 10px; width: 914px; float: left; background-color: #F2F2F2; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(212,217,221)), color-stop(1, rgb(238,240,243))); background-image: -moz-linear-gradient(center bottom, rgb(212,217,221) 0%, rgb(238,240,243) 100%); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 1px 1px 0 rgba(255,255,255,.4), inset -1px -1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(255,255,255,.8); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 1px 1px 0 rgba(255,255,255,.4), inset -1px -1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(255,255,255,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 1px 1px 0 rgba(255,255,255,.4), inset -1px -1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(255,255,255,.8); border: 1px solid rgba(0,0,0,.25) }

	#newsletter h1 { float: left; width: 58% }
	
	#newsletter form { float: right; width: 35%; margin: 0 }
   
	#newsletter img { position: absolute; left: 4px; top:  6px }

#copyright { margin-top: 2em; text-align: center }

/* @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { 
	#hero .small { display: none }
	.message { left: 15%; margin-left: 0; width: 60%; font-size: 250%; padding: 54px }	
	.message .close { width: 48px; height: 50px; top: 12px; right: 12px }
	.message .close img { left: -13px }
	form input[type="text"], form input[type="email"] { width: 60%; margin-right: 5% }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
	#hero .small { display: none } 
}

@media screen and (max-height : 800px) { 
	#slideshow,	
	#slideshow li { width: 778px; height: 535px; margin-bottom: 60px }
	#thumbs .arrow { top: 36px; left: -6px; display: none }
	#code-view { padding-top: 1px } 
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
	#hero .small { display: none }
	form input[type="text"], form input[type="email"] { width: 60%; margin-right: 5% }
	form input[type="submit"] { border-width: 1px 1px 1px 1px } 
} */

.release-notes { margin-bottom: 40px; }

.release-notes p { font-size: 1.4em; margin: 1em 0 1em 0; }

.release-notes h2 { font-size: 1.6em; margin-bottom: 1em; margin-top: 2em; }

.release-notes h3 { font-size: 1.2em; }

.release-notes ol { margin-bottom: 2em; }

.release-notes ul { margin-bottom: 2em; }

.release-notes li { margin: 0 0 0.4em 3em; font-size: 1.2em; }

.release-notes ul li { list-style: circle; }

.release-notes ol li { list-style: decimal; }