/* #mark basic styles */

#page.welcome #main h3 {
	font-size:			1.9em;
}

/* #mark main sections */

#page {
	min-width:			320px;
}
#top {
	background:			url("../images/clouds-mobile@2x.png") -45px 0 repeat-x;
	background-size:	590px 170px;
	height:				140px;
	padding:			30px 30px 0 30px;
}
#header {
	height:				77px;
}
#content {
	padding:			0 20px 0 20px;
}
#bottom {
	padding:			20px 20px 0 20px;
}
#footer {
	padding-bottom:		25px;
}

/* #mark navigation */

#header h1 a, #header h1 b {
	background-image:	url("../images/nav-v4/junecloud-mobile@2x.png");
	width:				264px;
	height:				38px;
	top:				0;
	left:				-4px;
}

#nav {
	top:				44px;
	left:				0;
	width:				139px;
	height:				23px;
}
#subnav {
	top:				44px;
	left:				139px;
	right:				auto;
	width:				123px;
	height:				23px;
}

#nav a, #subnav a {
	background-image:	url("../images/nav-v4/nav-mobile@2x.png");
	background-size:	262px 46px;
	top:				0;
	height:				23px;
}
#nav a.software, #nav a.web, #subnav a.journal {
	background-image:	none;
	left:				0;
	width:				0;
}
#nav a.iphone {
	background-position:0 0;
	left:				0;
	width:				98px;
}
#nav a.mac {
	background-position:-98px 0;
	left:				98px;
	width:				41px;
}
#subnav a.support {
	background-position:-139px 0;
	left:				0;
	width:				68px;
}
#subnav a.about {
	background-position:-207px 0;
	left:				68px;
	width:				55px;
}
#nav a:hover, #nav a:active, #subnav a:hover, #subnav a:active, 
#page.software-iphone #nav a.iphone, #page.software-mac #nav a.mac, #page.support #subnav a.support, #page.about #subnav a.about {
	background-position-y:-23px;
}

#search {
	top:				4px;
	left:				295px;
	right:				8px;
	width:				auto;
}
#search form, form#filter {
	border:				15px solid #fff;
	border-image:		url("../images/nav-v4/search-mobile@2x.png") 32 38 repeat;
	border-width:		16px 19px;
}
#search form {
	width:				calc(100% - 38px);
}
#search input.search, form#filter input#filter-input {
	font:				1.0em "Helvetica Neue", Helvetica, Arial, sans-serif;
	top:				-16px;
	left:				-8px;
	width:				calc(100% + 16px);
	height:				32px;
}
#search input.submit {
	background-image:	url("../images/nav-v4/go-mobile@2x.png");
	top:				-15px;
	right:				-70px;
	width:				41px;
	height:				28px;
}
#search form.focus {
	width:				calc(100% - 89px);
}

#social {
	margin:				0 0 15px 0;
	float:				none;
}

/* #mark guys */

div.airplane {
	width:				206px;
	margin:				-88px 0 0 -50px;
	overflow:			hidden;
}
div.airplane img {
	margin-left:		-70px;
}
img.hedgie {
	margin:				-80px -5px 15px 15px;
}

/* #mark miscellaneous */

div.video-right {
	float:				none;
	margin:				15px 0;
}

/* #mark images */

div.hero {
	margin-top:			-50px;
}
div.hero img {
	width:				100%;
	height:				auto;
	min-height:			80px;
}

div.image.feature {
	margin-top:			-50px;
}

/* #mark grid view and list view */

#page.grid-view #content {
	margin-top:			-30px;
}
#page.list-view div.entry:first-child div.image,
#page.journal div.entry:nth-child(2) div.image {
	margin-top:			-50px;
}
#page.grid-view div.entry {
	width:				100%;
	margin:				0 0 20px 0;
	float:				none;
	clear:				none;
}

/* #mark software */

#main div.icon {
	margin:				3px 20px 15px 0;
}
#main div.icon img {
	width:				80px;
	height:				80px;
}
#screenshots div.image {
	margin:				-50px 0 10px 0;
}
#details {
	background-color:	transparent;
	width:				100%;
	margin:				0 0 15px 0;
	padding:			0 0 15px 0;
	border-radius: 		0;
	border-bottom:		1px solid rgba(89,146,150,0.7);
	float:				none;
	clear:				none;
}

/* #mark about */

div.me {
	margin:				6px 0 15px 15px;
}
div.me img {
	max-width:			160px;
	height:				auto;
	min-height:			80px;
}

/* #mark store */

#page.store-detail #main div.image {
	margin-top:			-50px;
}
a.pretty-button.delete {
	padding:			3px 8px;
}
a.pretty-button.delete span.button-text {
	display:			none;
}
a.pretty-button.delete::after {
	content:			"✕";
}

/* #mark forms */

input, select, textarea, input[type="checkbox"] {
	font-size:			1.1em;
}
select {
	max-width:			100%;
	padding:			5px 25px 5px 10px;
}
label {
	margin:				5px 0 3px 0;
}

/* #mark narrow screens, most phones in portrait */

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

	/* #mark main sections */

	#header {
		width:				262px;
	}

	/* #mark navigation */

	#search {
		display:			none;
	}

	/* #mark software */

	#details div.badge {
		clear:				left;
	}

	/* #mark support */

	form#filter {
		width:				calc(100% - 38px);
	}
	div.pingdom-banner {
		display:			inline-block;
		margin:				0 0 15px 0;
		float:				none;
	}

}