@import url("global.css");

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

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

#titles
{
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: 204px;
	min-width: 256px;
	background: url("../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;
}
#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("../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("../images/arrow_right.png") 10px 9px no-repeat;
	background: url("../images/arrow_right.png") 10px 9px no-repeat,
				#364857 url("../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("../images/arrow_left.png") 92% 9px no-repeat;
	background: url("../images/arrow_left.png") 92% 9px no-repeat,
				#364857 url("../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("../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("../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("../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;
}