/*
	TABLE OF CONTENTS

	(todo)
	(use tags so people can jump about)

	NOTES

	Colours
	red		#ed1c24
	pink	#ffaec9
	yellow	#fff200
*/

a:link		{ color:blue; text-decoration:underline; }
a:visited	{ color:purple; text-decoration:underline; }
a:hover		{ color:red; text-decoration:none; }

body {
	background-color:#eee;
	font-size:14px;
	padding-top:50px;
}

div#body {
	box-shadow:none;
	border:1px solid pink;
	border-radius:0;
	margin:1em auto;
	padding:1em;
}

hr {
	border:none;
	border-top:1px solid #ffaec9;
	margin:1.5em 0;
}

/*
	Input field stuffs	-	-	-	-	-	-	-	-	-
*/

input[type="text"],input[type="email"],input[type="password"], select, textarea {
	padding:3px;
	/*box-shadow:inset 0 1px 1px rgba(0,0,0,0.2);*/
	background-color:#f6f6f6;
	border:1px solid #ffaec9;
	margin-bottom:1em;
	font-size:1em !important;
}

/*	Post entry field	*/
textarea.TextBox {
	min-height:10em !important;
	padding:1em;
}
.textarea-autosize {
	resize:vertical !important;
}

/*	??	*/
textarea.MultiComplete {height:32px;}

/*	Hides that pointless gender enquiry and display	*/
li.Gender { display:none !important; }

/*
	Categories	-	-	-	-	-	-	-	-	-	-	-
*/

.CategoryList .Depth2 {
    margin-top: -6px !important; /* Join to parent category */
    padding-left: 1em !important; /* Overide default indent */
}

/*
	Posts	-	-	-	-	-	-	-	-	-	-	-	-
*/

blockquote.Quote, blockquote.UserQuote {
	padding:1em;
	border: 1px solid #ffaec9;
	border-left: 3px double #ffaec9;
}

/*	Thread title	*/
h1 {
	background:#fff200;
	border:1px solid #ffaec9;
	padding:.5em !important;
}

.ItemDiscussion, .DataList .Item {
	padding: 1em;
	border: 1px solid #ffaec9;
}

.DataList {
	margin-top:10px;
}

.DataList .Item {
	background:#fdfdfd !important;
	margin-bottom:5px;
}

.DataList .Read {
	background:#fdfdfd !important;
}

/*	Post author info.	*/
.DiscussionHeader, div.Item-Header.CommentHeader {
	margin:0;
	background:#ffaec9;
}

/*
	-	-	-	-	-	-	-	-	-	-	-	-	-	-
*/

/*	Make full-width ?	*/
.Row {width:100%;}

.fl {float:left;}

.fr {float:right;}

.clear {clear:both;}

.BreadcrumbsWrapper {
	font-size:13px;
	padding:6px 10px;
	background:#fafafa;
	border:1px dashed #eee;
	margin-bottom:10px;
}

/*
	Head is top panel, row is within that	-	-	-	-
	(beyond here still a mess)
*/

#Head {
	position:fixed;
	top:0;
	width:100%;
	content:'';
	padding:0.5em 0;
	height:1.4em;
	text-align:center;
	box-shadow:0 1px 4px rgba(0,0,0,0.3);
	border-bottom:2px solid #fff200;
	background:#ffaec9;
	z-index:11;
}

#Head .Row{
	width:auto !important;
	min-width:760px;
	max-width:1000px;
	margin:auto;
}

/*	Title colour	*/
#Head a {color:#fff;}
#Head a:hover {color:#ed1c24;}

#Head .SiteMenu {
	list-style:none;
	margin:0;
	padding:0;
}

#Head .SiteMenu>li {float:left;}

#Head .SiteMenu>li>a {
	float:left;
	color:#9ea0a5;
	font-weight:normal;
	padding:0 10px;
	font-size:13px;
	color:#9ea0a5;
}

#Head .SiteMenu>li>a:hover {
	color:#ed1c24;
	text-decoration:none;
}

.SiteSearch {
	margin-top:6px;
	width:100%;
}

#Form_Search {
	border-radius:2px;
	padding:6px 12px;
	box-shadow:inset 0 1px 1px rgba(0,0,0,0.2);
	background-color:#f0f0f0;
	border:0;
	margin-bottom:10px;
	width:100% !important;
	font-size:13px !important;
}

#Form_Go {
	top:9px;
	right:10px;
	background:url('http://vanilla.com/applications/dashboard/design/images/sprites.png') 0 -196px no-repeat transparent !important;
}

.SiteTitle img {height:28px;}

.PageControls {min-height:inherit;}

.FilterMenu, .PanelCategories, .PanelInfo {
	border-left:1px solid #ddd;
	border-right:1px solid #ddd;
}

.FilterMenu li, .PanelCategories li, .PanelInfo li {padding:6px 8px !important;}

.FormWrapper {
	background:transparent !important;
	padding:0 !important;
}

ul.token-input-list {
	border-radius:2px;
	padding:3px 0 !important;
	box-shadow:inset 0 1px 1px rgba(0,0,0,0.2);
	background-color:#f6f6f6 !important;
	border:0 !important;
	font-size:13px !important;
}

ul.token-input-list input {
	border:0 !important;
	background:transparent !important;
	box-shadow:0 0 0 transparent !important;
}

.TagCloud li {
	width:100%;
	background:#fdfdfd !important;
	float:left;
	padding:6px 0;
	border-radius:0 !important;
}

.TagCloud li>span {
	float:left;
	margin:0 10px;
}

.TagCloud li .Count {float:right;}

.ProfilePhotoLarge {
	width:100%;
	border-radius:3px;
}

.Button {
	padding:8px 12px;
	text-shadow:0 0 0 transparent !important;
	background:#fdfdfd !important;
	box-shadow:0 0 0 transparent !important;
	border-radius:0 !important;
	border-color:#ddd !important;
	color:#666 !important;
}

body.Profile.EditMode #Content form {
	background:transparent !important;
}

/*
 *	Panel on the right
 */

#Panel {
	float:right;
	width:240px;
	background:#fdfdfd;
	box-shadow:0 1px 1px rgba(0,0,0,0.1);
	padding:10px;
	border-radius:3px;
}

#Body{
	min-width:320px;
	max-width:1000px;
	margin:10px auto;
	box-shadow:0 1px 1px rgba(0,0,0,.3);
	padding:10px;
	background-color:#f6f6f6;
	border-radius:3px;
}

#Body .SiteMenu {
	display:block;
	float:right;
	margin-top:12px;
}

#Body .SiteMenu li a {font-size:13px;}

#Body .ContentColumn {
	margin:0 270px 0 0;
	background:#fdfdfd;
	box-shadow:0 1px 1px rgba(0,0,0,0.1);
	padding:10px;
	border-radius:3px;
}

#Panel input.InputBox {width:192px;}

/* Backwards compatibility for themes that extended/customized the old version */

#Body .Wrapper #Content {margin:0 215px 0 0;}

.Banner ul {
	background:none repeat scroll 0 0 #3B5998;
	margin:0;
	padding:0;
}

/*	Footer	*/

#Foot {margin-bottom:10px;}

#Foot a {
	color:#666;
	font-weight:bold;
}


#Menu {margin-right:0 !important;}

.Banner ul li, #Menu li {display:inline;}

.Banner ul li a, #Menu a {
	display:inline-block;
	padding:3px 7px;
	font-size:13px;
	font-weight:bold;
	color:#fdfdfd;
}

.Banner ul li a:hover, #Menu a:hover {
	text-decoration:underline;
	color:#fdfdfd;
}

#Head #Search form {
	float:right;
	padding:0;
	margin-top:-30px;
}

#Head #Search form input.InputBox {
	width:204px;
	border:0;
	padding:4px;
	margin:0 6px 0 0;
	background:#fdfdfd;
	-moz-border-radius:2px;
	-webkit-border:2px;
	border-bottom:2px;
	color:#969696;
	font-size:13px;
	vertical-align:bottom;
}
#Head #Search form input.Button {
	font-size:13px;
	border:none;
}

/* Custom for CKeditor */

#cke_Form_Body {
	border:1px solid #ddd !important;
	background:#fdfdfd;
}

.cke_editable {
	min-height:200px;
	white-space:pre-wrap;
	background-color:transparent !important;
}

.cke_inner {background:#f0f0f0 !important;}

.cke_chrome {
	border:0 !important;
	box-shadow:0 0 0 #fdfdfd !important;
}

.cke_1 .cke_top {
	border:0 !important;
	box-shadow:0 0 0 transparent !important;
	border-radius:2px;
	background:transparent !important;
}

.cke_float .cke_top {border:0 !important;}

.cke_bottom {
	background:transparent !important;
	border-top:1px solid #ddd !important;
}

.cke_wysiwyg_frame, .cke_wysiwyg_div {background:transparent !important;}

/* If window is less than 800px wide, hide the panel for
 * all pages except profile. */
@media screen and (max-width:799px) {

	/* Hide the "started by" column of the discussions table. */
	body.Discussions .DataTable .FirstUser { display:none; }

	/* Hide the panel on non-profile pages. */
	#Body .Row {position:relative;}

	#Body .ContentColumn {padding-top:50px;}

	.MeBox,	.BigButton {
		visibility:visible;
		position:relative;
		width:120px;
		display:inline-block;
	}

	.BigButton {padding:8px 20px;}

	.MeBox {width:200px;}

	#Panel {
		overflow:visible;
		visibility:hidden;
		position:absolute;
		right:2px; /* Don't know why this is adding some extra padding */
		width:auto;
		display:block;
	}

	.Column.ContentColumn {margin:0 !important;}

	/* Don't hide the panel on the profile page */
	body.Profile #Body .ContentColumn {padding-top:0;}

	body.Profile .MeBox, body.Profile .BigButton {
		visibility:visible;
		position:relative;
		top:auto;
		right:auto;
		width:auto;
	}

	body.Profile .MeBox {
		width:auto;
		right:auto;
	}

	body.Profile #Panel {
		visibility:visible;
		position:relative;
		right:auto;
		width:200px;
	}

	body.Profile .Column.ContentColumn {margin:0 220px 0 0 !important;}
}

#Head .HiddenOnDesktop {display:none;}

@media screen and (max-width:780px) {
	.Discussion .PageTitle h1 {font-size:18px;}
	#Head .Row {min-width:320px;}
	#Head .HiddenOnMobile {display:none;}
	#Head .HiddenOnDesktop {display:block;}
	.cd-panel-header .SiteTitle {padding:10px !important; line-height:2.2 !important;}
	.cd-panel-content .PanelInfo.PanelCategories {width:90%;}
	.cd-panel-content .BoxButtons.BoxNewDiscussion>.Button {margin:10px 0;}
}
@media screen and (max-width:600px) {
	body.Profile #Panel .Photo.PhotoWrap.PhotoWrapLarge, body.Profile #Panel	.BoxFilter.BoxProfileFilter {padding:10px;}
	body.Profile #Panel, body.Profile #Body .ContentColumn {width:100%; padding:0; float:left;}
	body.Profile #Body .ContentColumn {margin-top:10px !important; float:left;}
	body.Profile #Body .ContentColumn .Profile, body.Profile #Body .ContentColumn	.ProfileOptions {padding:10px;}
}

/* Slider in Panel */
.cd-main-content {text-align:center;}

.cd-main-content h3 {
	color:#000;
	padding:4em 0;
}
.cd-main-content .cd-btn {
	position:relative;
	display:inline-block;
	padding:1em 2em;
	background-color:#89ba2c;
	color:#ffffff;
	font-weight:bold;
	-webkit-font-smoothing:antialiased;
		-moz-osx-font-smoothing:grayscale;
	border-radius:50em;
	box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
	transition:all 0.2s;
		-webkit-transition:all 0.2s;
		-moz-transition:all 0.2s;

}

.no-touch .cd-main-content .cd-btn:hover {box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);}

.cd-panel {
	position:fixed;
	top:0;
	left:0;
	z-index:9999;
	height:100%;
	width:100%;
	visibility:hidden;
	transition:visibility 0s 0.6s;
		-webkit-transition:visibility 0s 0.6s;
		-moz-transition:visibility 0s 0.6s;
}

.cd-panel::after {
	/* overlay layer */
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:transparent;
	cursor:pointer;
	transition:background 0.3s 0.3s;
		-webkit-transition:background 0.3s 0.3s;
		-moz-transition:background 0.3s 0.3s;
}

.cd-panel.is-visible {
	visibility:visible;
	transition:visibility 0s 0s;
		-webkit-transition:visibility 0s 0s;
		-moz-transition:visibility 0s 0s;
}
.cd-panel.is-visible::after {
	background:rgba(0, 0, 0, 0.6);
	transition:background 0.3s 0s;
		-webkit-transition:background 0.3s 0s;
		-moz-transition:background 0.3s 0s;
}

.cd-panel.is-visible .cd-panel-close::before {
	-webkit-animation:cd-close-1 0.6s 0.3s;
	-moz-animation:cd-close-1 0.6s 0.3s;
	animation:cd-close-1 0.6s 0.3s;
}

.cd-panel.is-visible .cd-panel-close::after {
	-webkit-animation:cd-close-2 0.6s 0.3s;
	-moz-animation:cd-close-2 0.6s 0.3s;
	animation:cd-close-2 0.6s 0.3s;
}

@-webkit-keyframes cd-close-1 {
	0%, 50% {-webkit-transform:rotate(0);}
	100% {-webkit-transform:rotate(45deg);}
}

@-moz-keyframes cd-close-1 {
	0%, 50% {-moz-transform:rotate(0);}
	100% {-moz-transform:rotate(45deg);}
}

@keyframes cd-close-1 {
	0%, 50% {
		transform:rotate(0);
			-webkit-transform:rotate(0);
			-moz-transform:rotate(0);
			-ms-transform:rotate(0);
			-o-transform:rotate(0);
	}
	100% {
		transform:rotate(45deg);
			-webkit-transform:rotate(45deg);
			-moz-transform:rotate(45deg);
			-ms-transform:rotate(45deg);
			-o-transform:rotate(45deg);
	}
}

@-webkit-keyframes cd-close-2 {
	0%, 50% {-webkit-transform:rotate(0);}
	100% {-webkit-transform:rotate(-45deg);}
}

@-moz-keyframes cd-close-2 {
	0%, 50% {-moz-transform:rotate(0);}
	100% {-moz-transform:rotate(-45deg);}
}

@keyframes cd-close-2 {
	0%, 50% {
		transform:rotate(0);
			-webkit-transform:rotate(0);
			-moz-transform:rotate(0);
			-ms-transform:rotate(0);
			-o-transform:rotate(0);
	}
	100% {
		transform:rotate(-45deg);
			-webkit-transform:rotate(-45deg);
			-moz-transform:rotate(-45deg);
			-ms-transform:rotate(-45deg);
			-o-transform:rotate(-45deg);
	}
}

.cd-panel-header {
	position:fixed;
	width:75%;
	height:43px;
	line-height:38px;
	z-index:9999;
	box-shadow:0 1px 4px rgba(0,0,0,0.3);
	border-bottom:1px solid #333;
	background:#373c4a;
	-webkit-transition:top 0.3s 0s;
	-moz-transition:top 0.3s 0s;
	transition:top 0.3s 0s;
}

.cd-panel-header h3 {
	font-weight:bold;
	font-size:28px;
	color:#000;
	margin-top:10px;
	padding:0 10px;
}

.from-right .cd-panel-header, .from-left .cd-panel-header {top:-50px;}

.from-right .cd-panel-header {right:0;}

.from-left .cd-panel-header {left:0;}

.is-visible .cd-panel-header {
	top:0;
	transition:top 0.3s 0.3s;
		-webkit-transition:top 0.3s 0.3s;
		-moz-transition:top 0.3s 0.3s;
}

@media only screen and (min-width:768px) {
	.cd-panel-header {width:70%;}
}

@media only screen and (min-width:1170px) {
	.cd-panel-header {width:50%;}
}

.cd-panel-close {
	position:absolute;
	top:0;
	right:0;
	height:100%;
	padding:4px 20px;
	/* image replacement */
	display:inline-block;
	overflow:hidden;
	text-align:center;
	white-space:nowrap;
	color:#fff;
}

.cd-panel-close::before, .cd-panel-close::after {
	/* close icon created in CSS */
	position:absolute;
	top:22px;
	left:20px;
	height:3px;
	width:20px;
	background-color:#424f5c;
	/* this fixes a bug where pseudo elements are slighty off position */
	backface-visibility:hidden;
		-webkit-backface-visibility:hidden;
}

.cd-panel-close::before {
	transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-o-transform:rotate(45deg);
}

.cd-panel-close::after {
	transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
}

.no-touch .cd-panel-close:hover {
	background-color:#ccc;
}

.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
	background-color:#ffffff;
	transition-property:transform;
		-webkit-transition-property:-webkit-transform;
		-moz-transition-property:-moz-transform;
	transition-duration:0.3s;
		-webkit-transition-duration:0.3s;
		-moz-transition-duration:0.3s;
}

.no-touch .cd-panel-close:hover::before {
	transform:rotate(220deg);
		-webkit-transform:rotate(220deg);
		-moz-transform:rotate(220deg);
		-ms-transform:rotate(220deg);
		-o-transform:rotate(220deg);
}

.no-touch .cd-panel-close:hover::after {
	transform:rotate(135deg);
		-webkit-transform:rotate(135deg);
		-moz-transform:rotate(135deg);
		-ms-transform:rotate(135deg);
		-o-transform:rotate(135deg);
}

.cd-panel-container {
	position:fixed;
	width:75%;
	height:100%;
	top:0;
	background:#f0f0f0;
	z-index:1;
	transition-property:transform;
		-webkit-transition-property:-webkit-transform;
		-moz-transition-property:-moz-transform;
	transition-duration:0.3s;
		-webkit-transition-duration:0.3s;
		-moz-transition-duration:0.3s;
	transition-delay:0.3s;
		-webkit-transition-delay:0.3s;
		-moz-transition-delay:0.3s;
}

.from-right .cd-panel-container {
	right:0;
	-webkit-transform:translate3d(100%, 0, 0);
	-moz-transform:translate3d(100%, 0, 0);
	-ms-transform:translate3d(100%, 0, 0);
	-o-transform:translate3d(100%, 0, 0);
	transform:translate3d(100%, 0, 0);
}

.from-left .cd-panel-container {
	left:0;
	transform:translate3d(-100%, 0, 0);
		-webkit-transform:translate3d(-100%, 0, 0);
		-moz-transform:translate3d(-100%, 0, 0);
		-ms-transform:translate3d(-100%, 0, 0);
		-o-transform:translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
	transform:translate3d(0, 0, 0);
		-webkit-transform:translate3d(0, 0, 0);
		-moz-transform:translate3d(0, 0, 0);
		-ms-transform:translate3d(0, 0, 0);
		-o-transform:translate3d(0, 0, 0);
	transition-delay:0s;
		-webkit-transition-delay:0s;
		-moz-transition-delay:0s;
}

@media only screen and (min-width:768px) {
	.cd-panel-container {width:70%;}
}

@media only screen and (min-width:1170px) {
	.cd-panel-container {width:50%;}
}

.cd-panel-content {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding:60px 15px;
	overflow:auto;
	/* smooth scrolling on touch devices */
	-webkit-overflow-scrolling:touch;
}

.cd-panel-content p {
	color:#424f5c;
	line-height:1.4;
	margin:2em 0;
}

.cd-panel-content p:first-of-type {margin-top:0;}

@media only screen and (min-width:768px) {
	.cd-panel-content p {line-height:1.6;}
}