/* #mark basic styles */

body {
	background-color:	#a1c4c7;
	color:				#005e66;
	margin:				0;
	-webkit-tap-highlight-color: rgba(70,134,140,0.3);
}
body.dark {
	background-color:	#005e66;
	color:				#a1c4c7;
}

a {
	text-decoration:	none;
	text-shadow:		rgba(255,255,255,0.1) 0 1px 1px;
}
a, #questions h4 a, #footer h3 a {
	color:				#005259;
}
a, #questions h4 a {
	font-weight:		bold;
}
body.dark a {
	text-shadow:		rgba(0,0,0,0.2) 0 1px 1px;
}
body.dark a, body.dark #footer h3 a {
	color:				#c1dee0;
}
h1 a, h2 a, h3 a, h4 a,
body.dark h1 a, body.dark h2 a, body.dark h3 a, body.dark h4 a,
div.buttons span.cancel a {
	font-weight:		normal;
	color:				#fff;
}
a:hover, a:active, a:focus {
	text-decoration:	underline;
}

::selection {
	background-color:	#91b7ba;
}
body.dark ::selection {
	color:				#fff;
}

h1 a, h2 a, h3 a {
	font-weight:		normal;
}
pre {
	background-color:	#95babd;
	border-radius:		4px;
	padding:			10px;
	overflow-x:			scroll;
}
b {
	opacity:			0.85;
}
s {
	opacity:			0.4;
}

/* #mark main sections */

#page {
	/* background-image:	url("../images/grid.png");
	background-position:50% 0;
	background-repeat:	repeat-y;
	background-size:	950px auto; */
	min-width:			768px;
	min-height:			400px;
	padding:			0;
	margin:				0;
}
#top {
	background:			url("../images/clouds.png") 50% 0 repeat-x;
	height:				313px;
	margin:				0 auto;
	padding:			0 60px;
	overflow:			hidden;
}
#header {
	position:			relative;
	max-width:			890px;
	height:				300px;
	margin:				0 auto;
	padding:			0;
}
#content {
	position:			relative;
	max-width:			890px;
	margin:				20px auto 0 auto;
	padding:			0 60px 0 60px;
	-webkit-tap-highlight-color: rgba(255,255,255,0.3);
}
#main {
	width:				calc(100% - 230px);
	float:				left;
}
#more {
	width:				200px;
	margin-top:			-80px;
	float:				right;
	clear:				right;
}
#more div.section {
	clear:				both;
}
#bottom {
	clear:				both;
	margin:				0;
	padding:			20px 60px 0 60px;
}
#footer {
	position:			relative;
	max-width:			890px;
	margin:				0 auto;
	padding:			15px 0 40px 0;
	border-top:			1px solid rgba(89,146,150,0.7);
}

@media only screen and (max-width: 800px) {
	#top, #content, #bottom {
		padding-left:		50px;
		padding-right:		50px;
	}
}

/* #mark navigation */

#header h1 a, #header h1 b {
	background-image:	url("../images/nav-v4/junecloud.png");
	display:			block;
	position:			absolute;
	top:				80px;
	left:				-4px;
	width:				439px;
	height:				64px;
	text-indent:		-9999px;
	overflow:			hidden;
}
#nav {
	display:			block;
	position:			absolute;
	top:				160px;
	left:				54px;
	width:				321px;
	height:				24px;
	text-indent:		-9999px;
	overflow:			hidden;
}
#subnav {
	display:			block;
	position:			absolute;
	top:				119px;
	right:				-4px;
	width:				207px;
	height:				24px;	
	text-indent:		-9999px;
	overflow:			hidden;
}

#nav a, #subnav a {
	background-image:	url("../images/nav-v4/nav.png");
	background-repeat:	no-repeat;
	display:			block;
	position:			absolute;
	top:				0;
	height:				24px;
	text-indent:		-9999px;
	overflow:			hidden;
}
#nav a.software {
	background-position:0 0;
	left:				0;
	width:				137px;
}
#nav a.iphone {
	background-position:-137px 0;
	left:				137px;
	width:				98px;
}
#nav a.mac {
	background-position:-235px 0;
	left:				235px;
	width:				43px;
}
#nav a.web {
	background-position:-278px 0;
	left:				278px;
	width:				43px;
}
#subnav ul {
	position:			relative;
	margin:				0;
	padding:			0;
	list-style-type:	none;
}
#subnav li {
	display:			block;
	width:				1px;
	height:				1px;
	margin:				0;
	padding:			0;
	line-height:		100%;
}
#subnav a.support {
	background-position:-321px 0;
	left:				0;
	width:				74px;
}
#subnav a.journal {
	background-position:-395px 0;
	left:				74px;
	width:				75px;
}
#subnav a.about {
	background-position:-470px 0;
	left:				149px;
	width:				58px;
}
#nav a:hover, #nav a:active, #subnav a:hover, #subnav a:active, 
#page.software #nav a.software, #page.software-iphone #nav a.iphone, #page.software-mac #nav a.mac, #page.software-web #nav a.web, #page.support #subnav a.support, #page.journal #subnav a.journal, #page.about #subnav a.about {
	background-position-y:-24px;
}

#search {
	position:			absolute;
	top:				87px;
	right:				-4px;
	width:				208px;
	height:				26px;
}
#search form, form#filter {
	position:			relative;
	border:				15px solid #fff;
	border-image:		url("../images/nav-v4/search.png") 13 15 repeat;
	border-width:		13px 15px;
	opacity:			0.4;
	transition:			opacity 300ms ease-in-out, width 300ms ease;
}
#search form {
	position:			absolute;
	top:				0;
	left:				0;
	width:				calc(100% - 30px);
	height:				0;
}
#search input.search, form#filter input#filter-input {
	font:				0.8em "Helvetica Neue", Helvetica, Arial, sans-serif;
	position:			absolute;
	top:				-13px;
	left:				-13px;
	width:				calc(100% + 26px);
	height:				26px;
	border:				none;
	background-color:	transparent;
	outline:			none;
	-webkit-appearance: none;
	margin:				0;
	padding:			0 3px;
}
#search input.submit {
	background-image:	url("../images/nav-v4/go.png");
	display:			block;
	position:			absolute;
	top:				-12px;
	right:				-57px;
	width:				32px;
	height:				22px;
	margin:				0;
	padding:			0;
	text-indent:		-9999px;
	overflow:			hidden;
	border:				none;
	background-color:	transparent;
	opacity:			0;
	transition:			opacity 300ms ease-in-out;
	cursor:				pointer;
}
#search form.focus, form#filter.focus {
	opacity:			1.0;
}
#search form.focus {
	width:				calc(100% - 72px);
}
#search form.focus input.submit {
	opacity:			1.0;
}

/* #mark guys */

div.airplane {
	margin:				-100px 230px 0 -120px;
	float:				right;
}
#main div.airplane {
	margin-right:		0;
}
img.robot {
	margin:				-80px 0 15px 0;
	float:				right;
}
img.hedgie {
	margin:				-210px 0 15px 30px;
	float:				right;
}
img.bird {
	margin:				-117px 0 0 15px;
	float:				right;
	z-index:			1;
}

/* #mark footer */

#social {
	width:				204px;
	height:				40px;
	margin:				27px -2px 15px 30px;
	float:				right;
}
#social a {
	background-image:	url("../images/nav-v4/social.png");
	background-size:	166px 40px;
	display:			block;
	width:				40px;
	height:				40px;
	margin:				0 14px 10px 0;
	float:				left;
	text-indent:		-9999px;
	overflow:			hidden;
}
#social div.twitter a {
	background-position:0 0;
}
#social div.facebook a {
	background-position:-42px 0;
}
#social div.google a {
	background-position:-84px 0;
}
#social div.rss a {
	background-position:-126px 0;
	margin-right:		0;
}

#content h1, #content h2, #content h3, #content h4 {
	color:				#fff;
}
#more h3 {
	margin-bottom:		10px;
}
#legal p {
	color:				#599296;
	margin-bottom:		0;
}
#page.about #footer #legal {
	margin-top:			30px;
}

/* #mark miscellaneous */

#main div.hanging {
	margin-left:		-30px;
}

p.pages {
	color:				#599296;
	margin-bottom:		0;
}
p.pages a, p.pages b {
	display:			inline-block;
	margin:				0 10px 0 0;
	padding:			6px 11px;
	border:				none;
	border-radius:		5px;
}
p.pages b {
	padding:			6px 0;
}
p.pages a {
	background:			#005e66;
	color:				#fff;
	text-align:			center;
	cursor:				pointer;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
p.pages a:hover {
	text-decoration:	none;
}
p.pages a:active {
	opacity:			0.4;
	box-shadow:			#fff 0 0 30px;
	text-decoration:	none;
}

div.video video {
	border:				1px solid #000;
}
div.video-right {
	float:				right;
	margin:				10px 0 20px 20px;
}

/* #mark images */

div.hero {
	margin:				-110px 0 15px 0;
}

div.image {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
div.image {
	display:			inline-block;
	position:			relative;
	border:				1px solid rgba(0,0,0,0.4);
	border-radius:		12px;
	margin:				0 0 5px 0;
	background-color:	#002126;
	overflow:			hidden;
}
div.image.feature {
	margin-top:			-80px;
}
#more div.image {
	border-radius:		12px;
	margin:				0 12px 8px 0;
	float:				left;
}
div.image img {
	display:			block;
}
div.image a:hover img, div.image a:active img, div.image a:focus img {
	opacity:			0.3;
}
div.image a::after {
	content:			'View »';
	display:			none;
}
div.visit a::after {
	content:			'Visit the Site »';
}
div.viewontheappstore a::after {
	content:			'View on the App Store »';
}
div.viewonthemacappstore a::after {
	content:			'View on the Mac App Store »';
}
div.downloadwidget a::after, div.downloadextension a::after, 
div.downloadapplication a::after, div.downloadactions a::after,
div.downloadworkflow a::after {
	content:			'Download »';
}
div.image a:hover::after, div.image a:active::after, div.image a:focus::after {
	font:				1.3em "Volkswagen Serial Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-transform:		uppercase;
	display:			block;
	position:			absolute;
	top:				13px;
	left:				18px;
	color:				#fff;
	text-shadow:		rgba(0,0,0,0.8) 0 1px 3px;
}
/* div.image.left {
	margin:				0 25px 15px 0;
	float:				left;
} */

/* #mark grid view and list view */

#page.grid-view #content {
	margin-top:			-60px;
}
#page.list-view div.entry:first-child div.image,
#page.journal div.entry:nth-child(2) div.image {
	margin-top:			-80px;
}
div.entry {
	margin:				0 0 20px 0;
	clear:				left;
}
#page.grid-view div.entry {
	width:				calc((100% - 30px) / 2);
	margin:				0 30px 10px 0;
	float:				left;
	clear:				none;
}
#page.grid-view div.entry:nth-child(even) {
	margin-right:		0;
}
div.entry div.heading {
	display:			table;
	margin:				0 0 3px 0;
}
div.entry div.heading-image {
	display:			table-cell;
	padding:			0 20px 0 0;
}
div.entry div.heading-image div.image {
	margin:				0;
}
div.entry div.heading-title {
	display:			table-cell;
	vertical-align:		bottom;
}

/* #mark software */

#main div.icon {
	margin:				0 0 25px -30px;
	float:				left;
}
#main div.icon img {
	display:			block;
}
#screenshots div.image {
	margin:				-80px -260px 25px 30px;
	float:				right;
}
#details {
	background-color:	#91b7ba;
	width:				200px;
	margin:				0 -245px 20px 25px;
	padding:			15px;
	border-radius: 		15px;
	float:				right;
	clear:				right;
}
#details div.badge {
	margin:				0 0 10px 0;
}

div.dashboard {
	margin-top:			30px;
}
div.dashboard h4 {
	margin:				0;
}

/* #mark badges */

div.badges.vertical {
	width:				200px;
	margin:				8px 0 0 30px;
	float:				right;
}
div.badges.vertical div.badge {
	margin:				0 0 15px 0;
}
div.badges.horizontal {
	margin:				20px 0 0 0;
}
div.badges.horizontal div.badge {
	margin:				0 15px 15px 0;
	float:				left;
}
div.badges.horizontal::after {
	content:			"";
	display:			table;
	clear:				both;
}

div.badge a, div.badge span {
	display:			block;
	background:			url("../images/badges/visit-the-site.svg") 0 0 no-repeat;
	background-size:	200px 59px;
	height:				59px;
	width:				200px;
	margin:				-1px;
	text-indent:		-9999px;
	overflow:			hidden;
	border:				1px solid #fff;
	border-radius:		5px;
}
div.badge span {
	background-image:	url("../images/badges/download-not-available.svg");
	opacity:			0.4;
}
div.badge a.downloadwidget, div.badge a.downloadextension, 
div.badge a.downloadapplication, div.badge a.downloadactions,
div.badge a.downloadworkflow {
	background-image:	url("../images/badges/download.svg");
}
div.badge a.viewontheappstore {
	background-image:	url("../images/badges/app-store.svg");
}
div.badge a.viewonthemacappstore {
	background-image:	url("../images/badges/mac-app-store.svg");
	background-size:	200px 48px;
	height:				48px;
}

div.badges.horizontal div.badge a.viewontheappstore {
	background-size:	186px 55px;
	width:				186px;
	height:				55px;
}
div.badges.horizontal div.badge a.viewonthemacappstore {
	background-size:	229px 55px;
	width:				229px;
	height:				55px;
}

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

	div.badges.horizontal div.badge {
		margin:				0 15px 15px 0;
		float:				none;
	}
	div.badges.horizontal div.badge a.viewontheappstore {
		background-size:	200px 59px;
		width:				200px;
		height:				59px;
	}
	div.badges.horizontal div.badge a.viewonthemacappstore {
		background-size:	200px 48px;
		width:				200px;
		height:				48px;
	}

}

/* #mark journal */

.comment, #addcomment {
	margin:				20px 0 0 45px;
}
.gravatar {
	margin-left:		-45px;
}

div.message, div.commentmessage, div.storemessage {
	background-color:	#95babd;
	border-radius:		3px;
	padding:			10px;
}

/* #mark support */

form#filter {
	width:				50%;
}

span.gear-button, span.info-button, span.plus-button, span.item-button {
	display:			inline-block;
	background:			url("../images/software/app-buttons-blue.png") no-repeat;
	width:				13px;
	height:				13px;
	margin:				0 2px -1px 1px;
	text-indent:		-9999px;
	overflow:			hidden;
	/* z-index:			1; */
}
span.info-button {
	background-position:-15px 0;
}
span.plus-button {
	background-position:-30px 0;
}
span.item-button {
	background-position:-45px 0;
}
div.pingdom-banner {
	background-color:	#000;
	border-radius:		8px;
	margin:				0 0 10px 20px;
	float:				right;
	overflow:			hidden;
}
div.pingdom-banner img {
	display:			block;
}

/* #mark about */

div.me {
	margin:				-75px 0 15px 30px;
	float:				right;
}

/* #mark store */

#page.store-detail #main div.image {
	margin-top:			-80px;
}
div.buttons input, div.buttons a {
	margin-right:		5px;
}
div.buttons span.cancel a {
	display:			inline-block;
	margin:				10px 0 10px 5px;
}
div.add-to-cart div.buttons {
	margin-top:			5px;
}

/* #mark forms */

#formname, #formemail, #formsite, #name, #email {
	width:				calc(100% - 12px);
	max-width:			418px;
}
#subject {
	width:				calc(100% - 1px);
	max-width:			429px;
}
#formtext, #text, #message {
	width:				calc(100% - 18px);
}
#commentpreviewarea {
	min-height:			180px;
}
#comment input, #comment textarea, #contact input, #contact textarea, input.quantity {
	padding:			5px;
	border:				0.5px solid #005e66;
	border-radius:		4px;
	box-shadow:			inset rgba(0,0,0,0.1) 0 1px 3px;
}
#comment textarea, #contact textarea {
	padding:			8px;
}
select {
	text-shadow:		#fff 0 1px 0;
	padding:			5px 20px 5px 7px;
	border:				0.5px solid #005e66;
	border-radius:		4px;
	background:			url("../images/select-arrows.png") no-repeat top right, linear-gradient(#fff,#f2f2f2);
	background-size:	auto 100%, auto;
	box-shadow:			rgba(0,0,0,0.1) 0 1px 1px;
	overflow:			hidden;
	text-overflow:		ellipsis;
	-webkit-appearance: none;
}
select option {
	background-color:	#fff;
}
div.pretty-button, div.buttons {
	margin:				15px 0 0 0;
}
div.pretty-button a, input.pretty-button, a.pretty-button {
	display:			inline-block;
	background:			#005e66;
	color:				#fff;
	margin:				0;
	padding:			8px 15px;
	border:				none;
	border-radius:		5px;
	min-width:			70px;
	text-align:			center;
	cursor:				pointer;
	-webkit-appearance: none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
div.pretty-button a:hover, input.pretty-button:hover, a.pretty-button:hover {
	text-decoration:	none;
}
div.pretty-button a:active, input.pretty-button:active, a.pretty-button:active,
div.pretty-button.down a, input.pretty-button.down, a.pretty-button.down {
	opacity:			0.4;
	box-shadow:			#fff 0 0 30px;
	text-decoration:	none;
}
td input {
	margin:				0;
}
td a.pretty-button {
	min-width:			0;
	margin:				5px 0;
	padding:			6px 11px;
}

a.small-button {
	display:			inline-block;
	background:			#005e66;
	color:				#fff;
	margin:				5px 5px 0 0;
	padding:			3px 7px;
	border:				none;
	border-radius:		5px;
	cursor:				pointer;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
a.small-button:hover {
	text-decoration:	none;
}
a.small-button:active {
	opacity:			0.4;
	box-shadow:			#fff 0 0 30px;
	text-decoration:	none;
}

input.paypal-button {
	padding-right:		120px;
	background:			#005e66 url("../images/store/paypal.png") no-repeat center right 14px;
}

/* #mark tables */

tr {
	background-color:	#95babd;
}
td:first-child {
	border-top-left-radius:		5px;
	border-bottom-left-radius:	5px;
}
td:last-child {
	border-top-right-radius:	5px;
	border-bottom-right-radius:	5px;
}

/* #mark narrow windows */

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

	/* #mark main sections */

	#main, #more {
		width:				100%;
		margin-top:			0;
		float:				none;
	}
	#more {
		margin-top:			30px;
		padding-top:		15px;
		border-top:			1px solid rgba(89,146,150,0.7);
	}

	/* #mark guys */

	img.hedgie {
		margin-top:				-160px;
	}
	#page.about #more p.press-text, #page.press #more p {
		margin-right:			100px;
	}

	/* #mark miscellaneous */

	#main div.hanging {
		margin-left:		0;
	}

	/* #mark images */

	div.image {
		margin-right:		0;
	}
	div.image img {
		width:				100%;
		height:				auto;
		min-height:			80px;
	}
	div.entry div.image img {
		width:				auto;
		max-width:			100%;
	}

	/* #mark grid view and list view */

	div.entry div.heading {
		display:			block;
	}
	div.entry div.heading-image {
		display:			block;
		margin:				0 0 5px 0;
	}
	div.entry div.heading-title {
		display:			block;
	}

	/* #mark software */

	#main div.icon {
		margin:				0 25px 10px 0;
	}
	#main div.icon img {
		width:				150px;
		height:				150px;
	}
	#screenshots div.image {
		width:				100%;
		height:				auto;
		min-height:			80px;
		margin:				-80px 0 30px 0;
		float:				none;
	}
	#screenshots div.image img {
		width:				100%;
		height:				auto;
	}
	#details {
		width:				200px;
		margin-right:		0;
	}

}

/* #mark @2x retina images */

@media only screen and (-webkit-min-device-pixel-ratio:1.3), 
	only screen and (min-device-pixel-ratio:1.3), 
	only screen and (min-resolution:120dpi) {

	/* #mark main sections */

	#top {
		background-image:	url("../images/clouds@2x.png");
		background-size:	1181px 313px;
	}

	/* #mark navigation */

	#header h1 a, #header h1 b {
		background-image:	url("../images/nav-v4/junecloud@2x.png");
		background-size:	100% 100%;
	}
	#nav a, #subnav a {
		background-image:	url("../images/nav-v4/nav@2x.png");
		background-size:	528px 48px;
	}
	#search form, form#filter {
		border-image:		url("../images/nav-v4/search@2x.png") 26 30 repeat;
	}
	#search input.submit {
		background-image:	url("../images/nav-v4/go@2x.png");
		background-size:	100% 100%;
	}

	/* #mark footer */

	#social a {
		background-image:	url("../images/nav-v4/social@2x.png");
	}

	/* #mark support */

	span.gear-button, span.info-button, span.plus-button, span.item-button {
		background-image:	url("../images/software/app-buttons-blue@2x.png");
		background-size: 	58px 13px;
	}

	/* #mark store */

	input.paypal-button {
		background-image:	url("../images/store/paypal@2x.png");
		background-size:	106px 21px;
	}

}