/* General element styles */
/* ---------------------- */

html
{
	font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: black;
	background: #7c8b9a url("http://static.boxerapp.com/images/prickle.png");
	background: url("http://static.boxerapp.com/images/gradient_480_reversed.png") 0 100% repeat-x,
				#7c8b9a url("http://static.boxerapp.com/images/prickle.png");
	min-width: 960px;
	position: relative;
	text-shadow: rgba(255, 255, 255, 0.2) 0 1px 0; 
}

body
{
	background: url("http://static.boxerapp.com/images/gradient_768.png") repeat-x;
	padding: 0 4em;
	margin: 0;
	min-height: 768px;
}

h1	{ margin: 0; }

h2
{
	margin: 0 0 1em;
	font-size: 150%;
	color: black;
	font-weight: normal;
	text-shadow: rgba(255, 255, 255, 0.33) 0 1px 0;
}

h3, legend
{
	margin: 0 0 0.5em;
	font-size: 100%;
	color: #c4cbcd;
	font-weight: bold;
	text-shadow: rgba(0, 0, 0, 0.33) 0 1px 2px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
h2 a		{ font-weight: normal; }
h3 a		{ color: white; }
h3 a:hover,
h3 a:focus	{ color: #521; text-shadow: inherit; }
h3 a:active	{ color: #410; text-shadow: rgba(255, 255, 255, 0.2) 0 1px 0; }

h4	{ font-size: 100%; margin: 0 0 0.5em; text-transform: uppercase; color: #364857; }

/* Bracket the current page target's heading with an eyecatching background */
:target h3:first-child, :target legend
{
	color: white !important;
	padding: 0.25em 0.5em;
	margin-top: -0.25em;
	margin-left: -0.5em;
	margin-right: -0.5em;
	background-color: #fb4;
	-webkit-border-radius: 0.75em;
	-moz-border-radius: 0.75em;
	position: relative;
}
/* Add an arrow underneath (only works in webkit for now it seems) */
:target h3:first-child:after, :target legend:after
{
	content: " ";
	position: absolute;
	background: url("http://static.boxerapp.com/images/targetarrow_down.png");
	width: 11px;
	height: 6px;
	left: 50%;
	bottom: -6px;
	margin-left: -5px;
}

:target h3.highlight-right:first-child:after
{
	background: url("http://static.boxerapp.com/images/targetarrow_right.png");
	width: 6px;
	height: 11px;
	left: auto;
	bottom: 50%;
	right: -4px;
	margin-left: 0;
	margin-bottom: -5px;
	min-height: 11px;
}

p, ul, ol	{ margin: 0 0 1em; }
p, li		{ line-height: 1.5em; }
ul, ol		{ padding: 0 0 0 2em; }
ul			{ list-style: circle url("http://static.boxerapp.com/images/bullet.png"); }
ul ul		{ list-style: square; }
p+ul, p+ol	{ margin-top: -0.5em; }

em			{ font-weight: bold; font-style: normal; }

form		{ margin: 0; }
fieldset	{ border: 0; margin: 0; padding: 0; }
legend		{ display: block; margin-bottom: 0; padding-bottom: 0.5em; }

a			{ color: #521; font-weight: bold; }
a:hover,
a:focus		{ color: white; text-shadow: rgba(0, 0, 0, 0.33) 0 -1px 0; }
a:active	{ color: #d7dbde; }

a img		{ border: 0; }

kbd, code	{ font-family: Monaco, "Andale Mono", monospace; }
code		{ font-size: 85%; }
kbd
{
	font-size: 85%;
	font-weight: normal;
	padding: 0 0.5em 0.1em;
	margin: 2px 1px 2px 0;
	background: #d9dcdf;
	color: #364857;
	text-shadow: none;
	white-space: nowrap;
	
	min-width: 1em;
	text-align: center;
	border-top: 1px solid #e9ecef;
	-webkit-box-shadow: rgba(0,0,0,0.5) 0 1px 2px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0 1px 2px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}
pre { white-space: pre-wrap; }

hr
{
	width: 100%;
	height: 0;
	border: 0;
	margin: 1em 0;
	border-top: 2px solid #364857;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}

small			{ font-size: 95%; }
small code,
small kbd		{ font-size: 100%; }

/* Minor content styles */

ins	{ font-style: italic; text-decoration: none; }

ins, small.note		{ color: #d7dbde; display: block; text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0; }
ins a, small.note a	{ color: white; text-shadow: inherit; }
ins a:hover, small.note a:hover,
ins a:focus, small.note a:focus		{ color: #632; text-shadow: rgba(255, 255, 255, 0.25) 0 1px 0; }
ins a:active, small.note a:active	{ color: #521; }

/* Column layouts */

.column			{ width: 30%; }
.wide.column	{ width: 65%; }
.left			{ float: left; clear: left; }
.right			{ float: right; clear: right; }
.middle			{ float: left; margin-left: 5%; }

.clear			{ clear: both; }
.cleared		{ clear: both; min-height: 1px; }
.cleared:after	{ content: " "; display: block; clear: both; }

.centered		{ margin-left: auto; margin-right: auto; text-align: center; }

img.centered	{ display: block; }

/* Section types */

.section		{ margin-bottom: 2em; }
.strip
{
	margin: 2em -4em;
	padding: 1em 4em 1em;
	background: #5b6d7f url("http://static.boxerapp.com/images/gradient_200.png") repeat-x;
	background: url("http://static.boxerapp.com/images/gradient_200.png") repeat-x,
				#5b6d7f url("http://static.boxerapp.com/images/grain.png");
	
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	border-bottom: 1px solid #7c8b9a;
}
.strip + .strip	{ margin-top: -2.1em; }
.strip h3,
.strip legend	{ color: #b1babc; }

.strip .left,
.strip .right	{ clear: none; }

.darker.strip			{ background-color: #364857; color: #c4cbcd; text-shadow: rgba(0, 0, 0, 0.5) 0 -1px 0; }
.darker.strip h3,
.darker.strip legend	{ color: #7c8b9a; }
.darker.strip a			{ color: white; }
.darker.strip a:hover,
.darker.strip a:focus	{ color: #621; text-shadow: rgba(255, 255, 255, 0.15) 0 1px 0; }
.darker.strip a:active	{ color: #510; }

/* Sidebars */

.sidebar
{
	background: #8e9aaa url("http://static.boxerapp.com/images/glow_oval_256_clipped.png") 50% -104px no-repeat;
	background: url("http://static.boxerapp.com/images/glow_oval_256_clipped.png") 50% -104px no-repeat,
				url("http://static.boxerapp.com/images/gradient_200_reversed.png") 0 100% repeat-x,
				#8e9aaa url("http://static.boxerapp.com/images/grain.png");

	-webkit-border-radius: 24px;
	-moz-border-radius: 24px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.33) 0 1px 5px;
	-moz-box-shadow: rgba(0, 0, 0, 0.33) 0 1px 5px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	
	padding: 1em;
	margin-bottom: 3em;
}
.along-sidebar	{ max-width: 62.5%; }

.sidebar h3	{ color: #d7dbde; text-align: center; }
.sidebar h4	{ color: #5b6d7f; text-align: center; }
.sidebar ul,
.sidebar ol	{ padding-left: 20px; }
.sidebar ul	{ list-style-image: url("http://static.boxerapp.com/images/bullet_light.png"); }
.sidebar .note	{ color: white; }

/* Thumbnails */
.thumbnails		{ margin-bottom: 0; padding: 0; list-style: none; }
.thumbnails li	{ display: inline; }
.thumbnails img	{ vertical-align: middle; }

.linked			{ padding-bottom: 2em; position: relative; }
.linked a
{
	text-decoration: none;
	outline: none;
	padding: 2px;
	margin: 0 -2px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-transition: opacity 0.25s ease-out;
	display: inline-block;
	text-align: center;
}

.linked:hover a		{ opacity: 0.5; }
.linked a:hover,
.linked a:focus		{ opacity: 1; background: url("http://static.boxerapp.com/images/glow_oval_256_clipped.png") 50% -128px no-repeat; }
.linked a:focus,
.linked a:active	{ background-color: white; background-color: rgba(255, 255, 255, 0.25); }


/* Captioning for linked thumbnails */
.linked small
{
	line-height: 1.5em;
	visibility: hidden;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	
	text-align: center;
	color: white;
	text-transform: uppercase;
	text-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
	font-weight: bold;
}

.linked.caption-on-top
{
	padding-top: 2em;
	padding-bottom: 0;
}

.linked.caption-on-top small
{
	bottom: auto;
	top: 0;
}

.linked a:hover small,
.linked a:focus small	{ visibility: visible; }

/* Framed images for blog */

img.framed
{
	padding: 7px 7px 14px;
	background: #c4cbcd;
	border-bottom-width: 12px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 2px 4px;
	-moz-box-shadow: rgba(0, 0, 0, 0.5) 0 2px 4px;	
}

a img.framed		{ background: white; }
a:hover img.framed,
a:focus img.framed	{ background: rgba(255, 255, 255, 0.66); }
a:active img.framed	{ background: rgba(255, 255, 255, 0.5); }

img.scalable	{ max-width: 100%; height: auto; }
img.shadowed
{
	-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 2px 16px;
	-moz-box-shadow: rgba(0, 0, 0, 0.5) 0 2px 16px;
	margin-top: 6px;
	margin-bottom: 12px;
}
img.osx-window	{ margin: -12px -40px -28px; min-height: 40px; min-width: 80px; } /* Compensates for drop-shadow */
img.centered.osx-window	{ margin: -12px auto -28px; }

img.left	{ margin-right: 12px; }
img.right	{ margin-left: 12px; }

/* Indented pill links/buttons */

.pill
{
	-webkit-transition: background-color 0.2s;

	display: inline-block;
	/* Overrides for button style */
	border: 0;
	cursor: pointer;
	
	color: white !important;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 95%;
	font-weight: bold;
	text-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px !important;

	line-height: 1.5em;
	min-height: 20px;	
	padding: 0 20px 0 0.75em;
	-webkit-border-radius: 0.75em;
	-moz-border-radius: 0.75em;

	background: #253645 url("http://static.boxerapp.com/images/arrow_right.png") 100% 50% no-repeat;
	background: url("http://static.boxerapp.com/images/arrow_right.png") 100% 50% no-repeat,
				#253645 url("http://static.boxerapp.com/images/gradient_20.png") repeat-x;

	-webkit-box-shadow: rgba(255, 255, 255, 0.33) 0 1px 0;
	-moz-box-shadow: rgba(255, 255, 255, 0.25) 0 0.5px 0;
}

.previous.pill
{
	background-position: 0 50%;
	background-position: 0 50%, 0 0;
	background-image: url("http://static.boxerapp.com/images/arrow_left.png"); /* For older browsers */
	background-image: url("http://static.boxerapp.com/images/arrow_left.png"), url("http://static.boxerapp.com/images/gradient_20.png");
	padding: 0 0.75em 0 20px;
}
.download.pill
{
	background-image: url("http://static.boxerapp.com/images/download.png"); /* For older browsers */
	background-image: url("http://static.boxerapp.com/images/download.png"), url("http://static.boxerapp.com/images/gradient_20.png");
}
.home.pill
{
	background-image: url("http://static.boxerapp.com/images/buuse.png"); /* For older browsers */
	background-image: url("http://static.boxerapp.com/images/buuse.png"), url("http://static.boxerapp.com/images/gradient_20.png");
}
.send.pill
{
	background-image: url("http://static.boxerapp.com/images/send.png"); /* For older browsers */
	background-image: url("http://static.boxerapp.com/images/send.png"), url("http://static.boxerapp.com/images/gradient_20.png");
}

.pill:hover,
.pill:focus		{ background-color: #732; }
.pill:active	{ background-color: #621; }

ul+.pill,
ol+.pill		{ margin-left: 2em; }


/* Layout styles */
/* ------------- */

#titles
{
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: 204px;
	min-width: 256px;
	background: url("http://boxer.thec0de.com/static/images/icon_spotlight.png") 50% 0 no-repeat;
	z-index: 1;
}
#titles h2	{ margin: 0; }
#titles img	{ display: block; margin: 0 auto; }

#navigation
{
	margin: 0 -4em 292px;
	list-style: none;
	background: #132528;
	padding: 8px 3.25em;
	border-bottom: 1px solid #7c8b9a;
	text-align: center;
}
#navigation li	{ display: inline; padding-bottom: 11px; }
#navigation a
{
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: black 0 1px 2px;
	color: white;
	letter-spacing: 1px;
	padding: 8px 0.75em 11px;

	position: relative;
	z-index: 2;
}

#navigation li.selected		{ background: url("http://static.boxerapp.com/images/navigation_arrow.png") 50% 100% no-repeat; }
#navigation li.selected a	{ color: #5b6d7f; text-shadow: black 0 -1px 1px; }
#navigation a:hover,
#navigation a:focus			{ color: #c54; }
#navigation a:active		{ color: #b43; text-shadow: black 0 -1px 1px; }

/* Next/previous area links */
#navigation li.area		{ padding: 0; margin: -0.5em 0; }
#navigation li.area a
{
	display: block;
	display: inline-block;
	color: white;
	background: #364857 no-repeat;
	-webkit-border-radius: 1.2em;
	-moz-border-radius: 1.2em;
	padding: 8px 30px 7px;
}
#navigation li.area a:hover,
#navigation li.area a:focus		{ background-color: #732; }
#navigation li.area a:active	{ background-color: #621; }

#navigation li.next	{ float: right; margin-right: -3.25em; }
#navigation li.next a
{
	padding-right: 0.75em;
	-webkit-border-top-right-radius: 0;
	-webkit-border-bottom-right-radius: 0;
	-moz-border-radius-topright: 0;
	-moz-border-radius-bottomright: 0;
	background: #364857 url("http://static.boxerapp.com/images/arrow_right.png") 10px 9px no-repeat;
	background: url("http://static.boxerapp.com/images/arrow_right.png") 10px 9px no-repeat,
				#364857 url("http://static.boxerapp.com/images/gradient_20.png") 0 0 repeat-x;
}

#navigation li.previous	{ float: left; margin-left: -3.25em; }
#navigation li.previous a
{
	padding-left: 0.75em;
	-webkit-border-top-left-radius: 0;
	-webkit-border-bottom-left-radius: 0;
	-moz-border-radius-topleft: 0;
	-moz-border-radius-bottomleft: 0;
	background: #364857 url("http://static.boxerapp.com/images/arrow_left.png") 92% 9px no-repeat;
	background: url("http://static.boxerapp.com/images/arrow_left.png") 92% 9px no-repeat,
				#364857 url("http://static.boxerapp.com/images/gradient_20.png") 0 0 repeat-x;
}

#designer		{ padding: 3em 0 2em; text-align: center; clear: both; }
#designer a
{
	display: inline-block;
	text-shadow: rgba(0, 0, 0, 0.25) 0 1px 2px;
	color: #fe0;
	opacity: 0.75;
	-webkit-transition: opacity 0.2s ease-out;
}
#designer img	{ margin: 0 auto -24px; display: block; }
#designer a:hover,
#designer a:focus	{ opacity: 1; }
#designer a:active	{ text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0; color: #fc0; }

#os-notice	{ text-align: center; margin: 0 0 2em; }
#os-notice p
{
	display: inline-block;
	background: #8cd url("http://static.boxerapp.com/images/shine_40.png") repeat-x;
	border: 3px solid #9de;
	border-color: rgba(255, 255, 255, 0.5);
	padding: 0.5em 2em;
	text-shadow: #9de 0 1px 0;
	text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;

	min-height: 4em;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
}
#os-notice em	{ display: block; }


/* fancy zoom-image appearance */

#zoom-pane,
#zoom-spinner,
#zoom-caption
{
	background: #132528;
	background: rgba(0, 0, 0, 0.66);
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	z-index: 999;
}
#zoom-image	{ width: 100%; height: 100%; margin: 0 0 1em; }
#zoom-pane	{ cursor: pointer; text-align: center; }
#zoom-spinner
{
	width: 64px;
	height: 64px;
	background-image: url("http://static.boxerapp.com/images/zoom/spinner.png");
	-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 2px 8px;
	-moz-box-shadow: rgba(0, 0, 0, 0.5) 0 2px 8px;
}
#zoom-close
{
	background: url("http://static.boxerapp.com/images/zoom/closebox.png");
	position: absolute;
	width: 30px;
	height: 30px;
	top: -15px;
	left: -15px;
}
#zoom-caption
{
	display: inline;
	display: inline-block;
	white-space: nowrap;
	color: white;
	font-weight: bold;
	padding: 0.5em 1em;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	text-shadow: black 0 1px 2px;
}