/* style.css */

body {
	background-color	: rgb(80, 80, 80);
	box-sizing			: content-box;
}

h1, h2, h3, h4, h5 {
	font-family		: "Yanone Kaffeesatz", Helvetica, Arial, sans-serif;
	font-weight		: bold;
	letter-spacing	: 0.05em;
}

#body {
	margin		: 16px auto;
	position	: relative;
	width		: 600px;
}


/***********
 * heading *
 ***********/

h1 {
	font-size	: 24px;
	height		: 143px;
	left		: -158px;
	position	: absolute;
	width		: 142px;
}

h1, h1 span {
	height			: 143px;
	overflow		: hidden;
	text-align		: center;
	vertical-align	: middle;
	width			: 142px;
}

h1 span {
	/* background: */
	background-image	: url(http://cloud.mochalabproductions.com/images/logo-142x143-14.png);
	background-position	: top left;
	background-repeat	: no-repeat;

	/* position: */
	position	: absolute;
	left		: 0;
	top			: 0;
	z-index		: 10;
}


/********
 * #nav *
 ********/

#nav {
	margin		: 0 auto 16px 8px;
	position	: relative;
}

#nav ul {
	display	: inline-block;
}

#nav li {
	cursor		: pointer;
	display		: inline-block;
	height		: 32px;
	margin		: 0 8px;
	position	: relative;
	text-align	: center;
}

#nav li:first-child {
	margin-left	: 0;
}

#nav li div {
	margin	: 0;
	padding	: 0;
}


/************
 * #content *
 ************/

#content {
	clear		: both;
	color		: rgb(51, 51, 51);
	width		: 600px;
}

#content-bg-top, #content-bg-bottom {
	background-position	: top left;
	background-repeat	: no-repeat;
	width				: 602px;
}

#content-bg-top {
	background-image	: url(http://cloud.mochalabproductions.com/images/content-bg-top-02.png);
	height				: 22px;
}

#content-bg-bottom {
	background-image	: url(http://cloud.mochalabproductions.com/images/content-bg-bottom-02.png);
	height				: 25px;
}


/************
 * .article *
 ************/

.article {
	background-image	: url(http://cloud.mochalabproductions.com/images/content-bg-middle-02.png);
	background-position	: top left;
	background-repeat	: repeat-y;

	clear		: both;
	font-family	: Tallys, Georgia, "Times New Roman", Times, serif;
	font-size	: 18px;
	padding		: 8px 32px;
	position	: relative;
	width		: 538px;
}

.ie .article {
	font-weight	: 500;
}

.no-js .article h2 {
	/* border: */
	border-color	: black;
	border-style	: dotted;
	border-width	: 1px 0;

	/* other: */
	font-size		: 24px;
	margin			: 0.5em -8px;
	padding			: 0.25em 0;
	text-indent		: 8px;
}

.js .article h2 {
	display	: none;
}

.article h3 {
	font-size	: 22px;
}

.article h4 {
	font-size	: 20px;
}

.no-js .article .top-link {
	/* other: */
	font-size	: 14px;

	/* position: */
	position	: absolute;
	right		: 0;
	top			: 1.5em;
}

.no-js .article .top-link a {
	border	: none;
}

.js .article .top-link {
	display	: none;
}

.article p {
	line-height		: 1.25em;
	margin-bottom	: 1.25em;
	margin-top		: 1.25em;
	text-align		: justify;
}

.article p:first-child,
.article p.first
{
	margin-top	: 0;
}

.article .flair {
	clear		: both;
	margin-top	: 8px;
	margin-bottom	: 8px;
}

.article .flair p,
.article .flair a
{
	color	: rgb(139, 139, 139);
}

.article .flair p {
	font-size	: 70%;
	margin		: -4px;
	padding		: 0;
	text-align	: center;
}

.article .flair a {
	border	: none;
}

.article .flair.left {
	float			: left;
	margin-right	: 8px;
}

.article .flair.right {
	float	: right;
	margin-left	: 8px;
}

.no-js .article > ul {
	margin-top	: 18px;
}

.no-js .article > ul > li {
	margin	: 0.375em 0;
}

.article a {
	border-bottom	: 1px dotted rgb(51, 51, 51);
	color			: rgb(51, 51, 51);
	font-weight		: 400;
	text-decoration	: none;
}


/****************
 * .button-rect *
 ****************/

.button-rect {
	cursor		: pointer;
	display		: inline-block;
	height		: 32px;
	position	: relative;
	text-align	: center;
}

.button-rect .left,
.button-rect .right
{
	background-position	: top left;
	background-repeat	: no-repeat;

	height		: 32px;
	position	: absolute;
	width		: 7px;
}

.button-rect .left {
	background-image	: url(http://cloud.mochalabproductions.com/images/nav-bg-inactive-left-06.png);

	left	: -7px;
	top		: 0;
}

.button-rect .right {
	background-image	: url(http://cloud.mochalabproductions.com/images/nav-bg-inactive-right-06.png);

	right	: -7px;
	top		: 0;
}

.button-rect .middle {
	background-image	: url(http://cloud.mochalabproductions.com/images/nav-bg-inactive-middle-06.png);
	background-repeat	: repeat-x;

	height	: 32px;
}

.button-rect:hover .left,
.button-rect.active .left
{
	background-image	: url(http://cloud.mochalabproductions.com/images/nav-bg-active-left-07.png);
}

.button-rect:hover .right,
.button-rect.active .right
{
	background-image	: url(http://cloud.mochalabproductions.com/images/nav-bg-active-right-07.png);
}

.button-rect:hover .middle,
.button-rect.active .middle
{
	background-image	: url(http://cloud.mochalabproductions.com/images/nav-bg-active-middle-07.png);
}

.button-rect a {
	/* block/color: */
	border		: none;
	color		: rgb(245, 245, 245);
	display		: inline-block;
	padding		: 0 4px;
	position	: relative;
	top			: 6px;

	/* font/text: */
	font-family		: "Yanone Kaffeesatz", Helvetica, Arial, sans-serif;
	font-size		: 18px;
	font-weight		: normal;
	letter-spacing	: 0.05em;
	text-decoration	: none;
	text-shadow		: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.ie .button-rect a {
	font-weight	: 500;
}

.button-rect:hover a,
.button-rect.active a
{
	color			: rgb(57, 57, 57);
	text-shadow		: 0 1px 0 rgba(255, 255, 255, 0.4);
	top				: 8px;
}


/***********
 * .button *
 ***********/

.button {
	text-align	: center;
	display		: inline-block;
}

.button a {
	/* background: */
	background-image	: url(http://cloud.mochalabproductions.com/images/button-bg-inactive-02.png);
	background-position	: left top;
	background-repeat	: no-repeat;

	/* color/cursor: */
	border	: none;
	color	: rgb(245, 245, 245);
	color	: rgba(245, 245, 245, 0.8);
	cursor	: pointer;

	/* text: */
	text-align	: center;
	text-shadow	: 0 1px 0 rgba(0, 0, 0, 0.4);

	/* position/block: */
	display		: inline-block;
	height		: 26px;
	position	: relative;
	width		: 26px;
}

.button a:hover,
.button a.active
{
	background-image	: url(http://cloud.mochalabproductions.com/images/button-bg-active-02.png);
}


.button a .num {
	position	: relative;
	top			: 3px;
	visibility	: visible;
}

.button a:hover .num {
	color			: rgb(57, 57, 57);
	text-shadow		: 0 1px 0 rgba(255, 255, 255, 0.5);
	top				: 5px;
}

.button a.active .num {
	visibility	: hidden;
}

.button a .activity {
	background-position	: left top;
	background-repeat	: no-repeat;

	position	: absolute;
	visibility	: hidden;
}

.button a.active .activity {
	visibility	: visible;
}

.button a .playing {
	background-image	: url(http://cloud.mochalabproductions.com/images/media-pause-02.png);

	height	: 10px;
	width	: 8px;
	top		: 8px;
	left	: 9px;
}

.button a .paused {
	background-image	: url(http://cloud.mochalabproductions.com/images/media-play-02.png);

	height	: 11px;
	width	: 11px;
	top		: 8px;
	left	: 9px;
}

.button a .loading {
	background-image	: url(http://cloud.mochalabproductions.com/images/media-loading-01.gif);

	height	: 24px;
	width	: 24px;
	top		: 1px;
	left	: 1px;
}

.button a .error {
	background-image	: url(http://cloud.mochalabproductions.com/images/media-error-02.png);

	height	: 18px;
	width	: 20px;
	top		: 4px;
	left	: 3px;
}


/**********
 * #audio *
 **********/

.no-js #audio .mood {
	margin-top	: 16px;
}

.no-js #audio .mood .clip {
	margin-left	: 16px;
	margin-top	: 16px;
}

.no-js #audio .mood .clip ul {
	list-style	: circle inside;
}

.no-js #audio .mood .clip li {
	margin	: 4px 0 4px 16px;
}

#audio .mood .player .unload-wait {
	display	: none;
}

.js #audio .mood .header {
	/* bg image is 130x32 */
	color		: rgb(67, 67, 67);
	cursor		: pointer;
	display		: inline-block;
	height		: 22px;
	padding		: 5px 8px 5px 0;
	text-align	: right;
	width		: 124px;
}

.js #audio .mood .header:hover,
.js #audio .mood.active .header
{
	background-image	: url(http://cloud.mochalabproductions.com/images/mood-bg-07.png);
	background-position	: left top;
	background-repeat	: no-repeat;
	color				: rgb(192, 192, 192);
}

.js #audio .mood .header h3 .select {
	/* background: */
	background-image	: url(http://cloud.mochalabproductions.com/images/mood-select-inactive-06.png);
	background-position	: left top;
	background-repeat	: no-repeat;

	/* other: */
	display			: inline-block;
	height			: 10px;
	margin-left		: 8px;
	position		: relative;
	top				: 7px;
	vertical-align	: top;
	width			: 14px;
}

.js #audio .mood .header:hover  h3 .select,
.js #audio .mood.active .header h3 .select
{
	background-image	: url(http://cloud.mochalabproductions.com/images/mood-select-active-06.png);
}

/* sibling selector? */
.js #audio .mood .header:hover + ul.clip-clist {
	display	: inline-block;
}

.js #audio .mood ul.clip-list {
	display			: none;
	position		: relative;
	vertical-align	: top;
}

.js #audio .mood ul.clip-list li {
	position	: relative;
	top			: 4px;
}

.js #audio .mood.active ul.clip-list {
	display	: inline-block;
}

.js #audio #audio-player {
	height		: 37px;
	margin-left	: 134px;
	padding		: 8px 0 0 0;
}

.js #audio #audio-player .message {
	margin	: 0;
	padding	: 0;
}


/**********
 * #video *
 **********/

#video .poster {
	display	: none;
}

.no-js #video .video {
	margin-top	: 16px;
}

.no-js #video .video ul {
	list-style	: inside circle;
	margin-left	: 16px;
}

.no-js #video .video ul li {
	margin	: 4px 0 4px 16px;
}

.js #video {
	text-align	: center;
}

.js #video #video-player {
	margin		: 8px auto 0 auto;
	text-align	: center;
}

.js #video #video-player .message {
	margin	: 0;
	padding	: 0;
}


/**********************
 * #copyright-credits *
 **********************/

#copyright-credits, #copyright-credits a {
	/* color: */
	color	: rgb(245, 245, 245);
	color	: rgba(245, 245, 245, 0.8);

	/* font/text: */
	font-family		: "Yanone Kaffeesatz", Helvetica, Arial, sans-serif;
	font-size		: 13px;
	font-weight		: 100;
	letter-spacing	: 0.05em;
	text-decoration	: none;
}

#copyright-credits {
	float		: left;
	padding		: 8px;
}

#copyright-credits p {
	margin	: 0.375em;
}

#copyright-credits a {
	border	: none;
}

/********************
 * #hosting-credits *
 ********************/

#hosting-credits {
	float		: right;
	padding		: 8px;
}

#hosting-credits a img {
	border	: none;
}