/* ----------
				The Wall
				
				- styling for the Wall, main and individual
				- most likely to include jCarousel support, or something simliar
---------- */

/* ----------
				Table of Contents
				
				1.0 Overwrite & Generic
				 .0 Wall
				 .0 Bubble Wall
				 .0 Wall Items
				 .0 Wall Buttons
				 .0 Wall Footer
				 .0 Wall Controls
				
				2.0 jCarousel
---------- */

/* ----------
				1.0 Overwrite & Generic
---------- */
#metaWrapper {
	width: 100%; 
	min-width: 960px;
	height: 619px;
	/* Change height back to 650px and fix scroller showing on create page (well, .js flip) */
	position: relative;
	overflow: hidden;
	}
	
#wrapper {
	width: 958px;
	margin: 0 auto;
	overflow: visible;
/*	background: url(../Images/wall/bg-wall-texture-graffitti.png) -89px 114px no-repeat;	*/
	}

#header {
	border: 0;
	}

#content {
	padding: 0;
	}
	
#theWall {
	height: 460px;
/*	overflow: hidden;	*/
	}
	
.build-info {
	display: none;
	}
	
a {
	font-weight: normal;
	}
	
.float-right {
	float: right;
	}
	
.float-left	{
	float: left;
	}
	
.align-right {
	text-align: right;
	}
	
fieldset br {
	display: block;
	width: 90%;
	height: 0;
	overflow: hidden;
	clear: both;
	}
	
	
/* ----------
				.0 Wall
---------- */
body {
	background: url(../Images/wall/bg-wall-default.jpg) center 114px repeat-x;
/*	background-image: url(../Images/wall/bg-wall-random-01.jpg);	*/
/*	background-image: url(../Images/wall/bg-wall-random-02.jpg);	*/
	}

#content {
	position: relative;
	overflow: visible;
	height: 460px;
	}
	
.logo {
	text-indent: -999em;
	overflow: hidden;
	background: url(../Images/wall/logo-thewall.png) no-repeat;
	width: 213px;
	height: 90px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	}
	
.wall-shadow {
	position: absolute;
	left: 0;
	width: 100%;
	height: 10px;
	background-position: top left;
	background-repeat: repeat-x;
	z-index: -1;
	}
	
	.wall-top-shadow {
		top: 114px;
		background-image: url(../Images/wall/wall-chrome-shadow-top.png);
		}
	
	.wall-bottom-shadow {
		top: 564px;
		background-image: url(../Images/wall/wall-chrome-shadow-bottom.png);
		}
		
		
/* ----------
				.0 Wall Buttons
					.1 Form buttons
---------- */
.wall-btn {
	margin: 0 0 0 10px;
	height: 29px;
	background-image: url(../Images/wall/btn-combo.png);
	text-indent: -999em;
	overflow: hidden;
	}
	
	.btn-large {
		background-image: url(../Images/wall/btn-reply-createwall.png);
		height: 53px;
		margin: 0;
		}
		
.wall-btn-back {
	display: block;
	text-indent: -9999em;
	cursor: pointer !important;
	border: 0 !important;
	height: 29px !important;
	padding: 0;
	overflow: hidden;
	background: url('../Images/buttons.png') !important;
	margin-right: 10px;
	}		
	
.btn-exit {
    background-position: -2488px 0 !important;
	width: 89px !important;
	}
	
	.btn-exit:hover {
		background-position: -2488px -29px !important;
		}
		
.btn-all {
	width: 119px;
	background-position: -212px 0;
	}
	
	.btn-all:hover {
		background-position: -212px -29px;
		}
		
.btn-reply {
	width: 95px;
	background-position: top left;
	}
	
	.btn-reply:hover {
		background-position: bottom left;
		}
		
.btn-create {
	width: 147px;
	background-position: top right;
	}
	
	.btn-create:hover {
		background-position: bottom right;
		}
		
/* --
		.1 Form buttons
-- */
div.buttons {
	margin-left: 83px !important;
	width: auto !important;
	}

fieldset .button {
	background-image: url(../Images/wall/btn-combo.png) !important;
	}

#theWall input.btn-start {
	width: 107px;
	background-position: -105px 0 !important;
	}
	
	#theWall .btn-start:hover {
		background-position: -105px -29px !important;
		}
		
#theWall #replyContainer input.btn-start {
	width: 151px;
	background-position: top right !important;
	}
			
	#theWall #replyContainer input.btn-start:hover {
		background-position: bottom right !important;
		}
	
#theWall .btn-find {
	width: 55px;
	margin-left: 10px;
	background-position: 0 0 !important;
	}
	
	#theWall .btn-find:hover {
		background-position: 0 -29px !important;
		}
		
		
/* ----------
				.0 Wall Header
---------- */
#wallHeader {
	position: absolute;
	height: 80px;
	width: 100%;
	z-index: 1005;
	}
	
	
/* ----------
				.0 Wall States
					.1 Intro / Make a wall
						- Renamed introContainer to createContainer to support # bookmarking
					.2 jCarousel - The Wall
					.3 Reply - thought / comment
---------- */

/* --
		.1
-- */
#createContainer, #replyContainer {
	padding-top: 45px;
	overflow: hidden;
	}
	
	#createContainer .intro, #createContainer .mForm, #replyContainer .mForm {
		float: left;
		}
		
	#replyContainer {
		padding-top: 95px;
		}
	
#createContainer .intro {
	color: #000;
	padding: 80px 25px 0 20px;
	width: 365px;
	font-size: 18px;
	}
	
	#createContainer a {
		color: #bf0000;
		}
		
	#createContainer a:hover {
		text-decoration: underline;
		}
		
.mForm {
	width: 528px !important;
	clear: none;
	}
	
	.fieldset-splat {
		padding: 0 0 28px;
		margin: 0 !important;
		background: url(../Images/wall/bg-wall-texture-splat.png) bottom right no-repeat;
		z-index: 9999;
		}
	
.mForm h3 {
	margin: 0 0 10px 75px;
	width: 215px;
	height: 26px;
	overflow: hidden;
	text-indent: -999em;
	overflow: hidden;
	background-image: url(../Images/wall/title-comb.png);
	background-repeat: no-repeat;
	}
	
	.mForm h3.find {
		background-position: 0 -26px;
		}
		
	.mForm h3.browse {
		width: 200px;
		margin-left: 0;
		background-position: 0 -52px;
		}
	
	.mForm label {
		color: #000;
		width: 75px;
		padding: 0;
		margin-bottom: 10px;
		line-height: 29px;
		}
		
		.mForm .l-long {
			width: 103px;
			}
			
		.mForm label strong {
			font-size: 13px;
			}
		
	.mForm .f-input {
		width: 153px;
		}
		
	.mForm .f-select {
		width: 165px;
		}
		
	.mForm .f-textarea {
		width: 428px;
		height: 86px;
		margin-bottom: 10px;
		}
		
.just-browse {
	background: url(../Images/wall/btn-justbrowse.png) no-repeat;
	width: 93px;
	height: 45px;
	text-indent: -999em;
	overflow: hidden;
	margin-left: 75px;
	display: block;
	}
	
	
/* --
		.3 Reply - thought / comment
-- */
#replyContainer .mForm {
	padding-left: 410px;
	}
	
/* ----------
				.0 Bubble Reply
---------- */
#replyContainer {
	float: right;
	width: 584px;
	padding-bottom: 75px;
	padding-top: 75px;
	background: url(../Images/wall/bg-sendmessage.png) bottom right no-repeat;
	}

#replyContainer .mForm {
	background: url(../Images/wall/bg-sendmessage.png) top right no-repeat;
	width: 554px !important;
	margin: 0;
	padding: 25px 0 0;
	float: right;
	overflow: hidden;
	}
	
	#replyContainer .mForm h3 {
		background-position: 0 -78px;
		}
	
	#replyContainer .mForm fieldset {
		background: #fff;
		overflow: hidden;
		width: 554px !important;
		float: right;
		}
	
	
/* ----------
				.0 Wall Footer
---------- */
#footerDiv {
	padding: 15px 20px 0;
	clear: both;
	}
	
#footerDiv ul {
	padding: 7px 0 0;
	margin: 0;
	}

	#footerDiv li {
		float: left;
		margin: 0 8px 0 0;
		line-height: 1em;
		}
		
	#footerDiv li a {
		line-height: 1em;
		padding: 0 8px 0 0;
		border-right: 1px solid #000;
		}
				
		
/* ----------
				.0 Wall Controls
---------- */
.wall-controls {
	position: absolute;
	bottom: -6px;
	overflow: hidden;
	right: 0;
	z-index: 999;
	height: 58px;
	}
	
	.wall-controls a {
		float: right;
		margin-top: -1px;
		}
		
.control-bg {
	background: url(../Images/wall/bg-scroll.png) center 18px no-repeat;
	width: 163px;
	height: 52px;
	text-indent: -999em;
	overflow: hidden;
	}
	
.control-bg span, .control-bg a {
	background-image: url(../Styles/skins/abf/btn-scroll.gif);
	background-repeat: no-repeat;
	display: block;
	width: 90px;
	margin: 32px auto 0;
	height: 20px;
	text-indent: -999em;
	overflow: hidden;
	}
	
	.control-bg .control-scroll {
		background-position: 0 -40px;
		}
		
	.control-bg a {
		background-position: 0 -70px;
		float: none;
		}
		
		
/* ----------
				.0 Wall Meta
---------- */
.wall-meta {
	background: url(../Images/wall/transparent-bg-darkgrey.png);
	width: 350px;
	height: 71px;
	margin-left: 203px;
	padding: 10px 0 0 25px;
	}
	
.wall-meta img {
	float: left;
	margin: 3px 20px 0 0;
	}

.wall-meta p {
	padding: 10px 10px 0;
	line-height: 12px;
	}
		
.wall-meta h3 {
	margin: 0;
	}
		
.wall-meta big {
	font-size: 22px;
	line-height: 1em;
	padding: 0 0 0 28px;
	background: url(../Images/wall/icon-chart-bubble.png) top left no-repeat;
	}
	
.wall-meta small {
	font-size: 12px;
	line-height: 14px;
	width: 95px;
	}
	
.wall-meta a {
	color: #bf0000;
	}
	
	.wall-meta a:hover {
		text-decoration: underline;
		}
	
	
/* ---------- ----------
				2.0 jCarousel
---------- ---------- */
/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container, .wall-initial {
    position: relative;
	font-family: "Comic Sans MS", cursive;
	z-index: 1000;
	}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: visible;
    position: relative;
	}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
	}

.jcarousel-list li, .jcarousel-item, .wall-initial {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 356px;
    height: 415px;
	}
	/*
	.item-odd {
		margin-top: 50px;
		}
		
	.item-odd .message-copy {
		max-height: 170px !important;
		}
	*/
	
.wall-initial {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1001;
	}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
	}

.jcarousel-prev {
    z-index: 3;
    display: none;
	}


/* --- --- */
.jcarousel-item, .wall-initial {
	padding-top: 45px;
	}
/*
	Titles
*/
.item-title {
	background-image: url(../Images/wall/bg-quotes.png);
	background-repeat: no-repeat;
	padding: 0 0 0 70px;
	overflow: hidden;
	}
	
	/* -- Even Reply & Thought -- */
	.item-even .item-title {
		height: 117px;
		}
		
		.item-even .type-wall .item-title {
			background-position: 0 -122px;
			}
		
		.item-even .type-reply .item-title {
			background-position: 0 -516px;
			}
		
		.item-even .type-thought .item-title {
			background-position: 0 0;
			}
			
	.wall-initial .type-wall .item-title {
		background-position: 0 -244px;
		}
		
	.item-even .item-title h3 {
		padding: 73px 0 10px;
		}
	
	/* -- Odd Reply & Thought -- */
	.item-odd .item-title {
		background-position: 0 -638px;
		height: 57px;
		}
		
		.item-odd .type-reply .item-title {
			background-position: 0 -366px;
			height: 150px;
			}

	.item-odd .item-title h3 {
		padding: 10px 0;
		}
		
		.item-odd .type-reply .item-title h3 {
			padding: 103px 0 0;
			}
		
	/* -- Individual Wall -- */
			
.item-title h3 {
	font-family: "Comic Sans MS", cursive;
	}
		
/*
	Message
*/
.item-message {
	padding: 10px 10px 10px 70px;
	background: url(../Images/wall/bg-quotes-yrepeat.png);
	}
	
	.item-even .item-message {
		background-position: top right;
		}
		
	.item-odd .item-message {
		background-position: top left;
		}
		
.message-copy {
	overflow: auto;
	padding-right: 15px;
	max-height: 220px;
	}
	
	/* Temporary fix for a black reply max-height being to tall and hiding some of the copy */
	.item-odd .type-reply .message-copy {
		max-height: 180px;
		}
		
/*
	Meta (at bottom)
*/		
.item-meta {
	background-image: url(../Images/wall/bg-quotes.png);
	background-repeat: no-repeat;
	padding: 0 25px 0 70px;
	}
	
	.item-even .item-meta {
		height: 30px;
		background-position: -356px -265px;
		}
		
	.item-odd .item-meta {
		height: 88px;
		}
		
		.item-odd .type-wall .item-meta {
			background-position: -356px 0;
			}
		
		.item-odd .type-reply .item-meta {
			background-position: -356px -176px;
			}
		
		.item-odd .type-thought .item-meta {
			background-position: -356px -88px;
			}
		/*
		.item-odd .type-wall .item-meta {
			background-position: -356px -88px;
			}
		*/
		
/* Message */
.type-message, .type-message h3 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
	
.type-message .item-title {
	height: auto;
	padding-bottom: 0;
	}
	
	.type-message .item-title h3 {
		margin-bottom: 0;
		padding-bottom: 5px;
		font-size: 22px;
		line-height: 1em;
		}
	
.type-message .item-meta {
	display: none;
	}

.type-message .item-title, .type-message .item-message {
	background: none;
	padding-left: 10px;
	}
	
.type-message .message-copy {
	padding-right: 0;
	font-size: 18px;
	line-height: 22px;
	}

.type-message a {
	color: #c40000;
	}
	
	.type-message a:hover {
		text-decoration: underline;
		}
			
.item-meta a {
	color: #ad1e22;
	margin-left: 10px;
	}
	
	.item-meta a:hover {
		color: #000;
		}
		
/* carouselSearch */
#carouselSearch {
	position: absolute;
	bottom: 0;
	left: 10px;
	width: 700px;
	z-index: 10000;
	}
	
	#carouselSearch label {
		float: left !important;
		width: 75px !important;
		text-align: right;
		font-size: 12px;
		}
		
		
/* ----------
				Visual Preview javascript
---------- */
.selectOverlay {
    background: url(../Images/spacer.gif) !ie;
    }

.previewContainer {
	background: #fff;
	border: 1px solid #999;
	border-top-width: 3px;
	overflow: auto !important;
	}

.previewContainer img {
	display: block;
	margin: 0 auto;
	padding: 2px 0;
	}
	
.preview-image {
	width: 150px;
	height: 85px;
	position: absolute;
	top: 23px;
	right: 33px;
	}