path: root/view/theme/dispy/dark/style.less

/*
 * dispy-dark
 *
 * author, maintainer: simon <http://simon.kisikew.org/>
 * 
 * Author's notes:
 * A few things of note here. The less file is our working copy,
 * and the CSS is *generated* from it. The CSS is the one that's
 * included in the HTML, and not the less one. This is to save
 * bandwidth and processing time.
 */
/* from html5boilerplate */
/* these are to tell browsers they should be displayed a certain way */

@import "_base";

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
	display: block;
}
audio,
canvas,
video,
time {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}
audio:not([controls]), [hidden] {
	display: none;
}
/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change,
 *		without disabling user zoom: h5bp.com/g
 */
html {
	font-size: 100%;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
body {
	margin: 0;
	padding: 0;
	.default_font;
	color: @main_colour;
	background-color: @bg_colour;
}
button, input, select, textarea {
	color: @main_colour;
	background-color: @bg_colour;
}
select {
	border: 1px #555 dotted;
	padding: 1px;
	margin: 3px;
	color: @main_colour;
	background: @bg_colour;
}
option {
	padding: 1px;
	color: @main_colour;
	background: @bg_colour;
	&[selected="selected"] {
		color: @bg_colour;
		background: @main_colour;
	}
}
ul, ol {
	.list_reset;
}
tr:nth-child(even) {
	background-color: lighten(@bg_colour, 10%);
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
[disabled="disabled"] {
	background: @med_bg_colour;
	color: @disabled_colour;
}
/* remember to highlight inserts somehow! */
ins, mark {
	background-color: @bg_alt_colour;
	color: @lt_main_colour;
}
ins {
	text-decoration: none;
}
mark {
	font-style: italic;
	font-weight: bold;
}
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp, .wall-item-body code {
	font-family: monospace, monospace;
	_font-family: monospace;
	font-size: 1em;
}
/* Improve readability of pre-formatted text in all browsers */
pre, .wall-item-body code {
	.wrap;
}
q {
	quotes: none;
	&:before, &:after {
		content: "";
		content: none;
	}
}
small {
	font-size: 85%;
}
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sub {
	bottom: -0.25em;
}
sup {
	top: -0.5em;
}
img {
	border: 0 none;
}
a {
	color: @link_colour;
	text-decoration: none;
	margin-bottom: 1px;
	&:hover {
		color: @hover_colour;
		border-bottom: 1px dotted @hover_colour;
	}
	&:hover img {
		text-decoration: none;
	}
}
blockquote {
	background: #444;
	color: @main_colour;
	text-indent: 5px;
	padding: 5px;
	border: 1px #aaa solid;
	.rounded_corners;
}
.required {
	display: inline;
	color: #ff0;
	font-size: 16px;
	font-weight: bold;
	margin: 3px;
}
.fakelink, .lockview {
	color: @link_colour;
	cursor: pointer;
}
.fakelink:hover {
	color: @hover_colour;
}
.smalltext {
	font-size: 0.7em;
}
#panel {
	position: absolute;
	.rounded_corners;
	.borders(1px, solid, @main_alt_colour);
	background-color: @bg_alt_colour;
	color: @main_colour;
	padding: 1em;
}
.pager {
	margin-top: 60px;
	display: block;
	clear: both;
	text-align: center;
	span {
		padding: 4px;
		margin: 4px;
	}
}
.pager_current {
	background-color: @link_colour;
	color: @main_alt_colour;
}


/**
 * global
 */
/* .tool .action */
.action {
	margin: 5px 0;
}
.tool {
	margin: 5px 0;
	list-style: none;
}
#articlemain {
	.box(100%, 100%);
	margin: 0 auto;
}
[class$="-desc"], [id$="-desc"] {
	color: @bg_colour;
	background: @main_colour;
	.rounded_corners;
	.box_shadow(3px, 3px, 5px);
	padding: 3px;
	margin: 5px 0;
	font-weight: bold;
}


/**
 * login
 */
#asidemain .field {
	overflow: hidden;
	width: 200px;
}
#login-extra-links {
	overflow: auto !important;
	padding-top: 60px !important;
	width: 100% !important;
	a {
		margin-right: 20px;
	}
}
#login_standard {
	display: block !important;
	float: none !important;
	height: 100% !important;
	position: relative !important;
	width: 100% !important;
	.field label {
		width: 200px !important;
	}
	input {
		margin: 0 0 8px !important;
		width: 210px !important;
		&[type="text"] {
			margin: 0 0 8px !important;
			width: 210px !important; }
	}
}
#login-submit-wrapper {
	margin: 0 !important;
}
#login-submit-button {
	margin-left: 0px !important;
}
#asidemain #login_openid {
	position: relative !important;
	float: none !important;
	margin-left: 0px !important;
	height: auto !important;
	width: 200px !important;
}
#login_openid {
	#id_openid_url {
		width: 180px !important;
		overflow: hidden !important; }
	label {
		width: 180px !important;
	} }


/**
 * nav
 */
nav {
	height: 60px;
	background-color: @dk_bg_colour;
	color: @main_alt_colour;
	position: relative;
	padding: 20px 20px 10px 95px;
	a {
		text-decoration: none;
		color: @main_alt_colour;
		border: 0px;
		&:hover {
			text-decoration: none;
			color: @main_alt_colour;
			border: 0px; } }
	#banner {
		display: block;
		position: absolute;
		left: 51px;
		top: 25px;
		#logo-text a {
			font-size: 40px;
			font-weight: bold;
			margin-left: 3px; } }
}
ul#user-menu-popup {
	display: none;
	position: absolute;
	background-color: @menu_bg_colour;
	width: 100%;
	padding: 10px 0px;
	margin: 0px;
	top: 20px;
	left: 0;
	.rounded_corners(0 0 5px 5px);
	.box_shadow(5px, 5px, 10px, 0px);
	z-index: 10000;
	li {
		display: block;
		a {
			display: block;
			padding: 5px;
			&:hover {
				color: @main_colour;
				background-color: @bg_alt_colour;
			}
			&.nav-sep {
				border-top: 1px solid @bg_alt_colour; } } }
}
nav .nav-link {
	display: inline-block;
	.box(22px, 22px);
	overflow: hidden;
	margin: 0px 5px 5px;
	text-indent: 50px;
	background: transparent url(dark/icons.png) 0 0 no-repeat;
}
#nav-apps-link {
	background-position: 0 -66px;
	&:hover {
		background-position: -22px -66px; }
}
#nav-community-link, #nav-contacts-link {
	background-position: 0 -22px;
	&:hover {
		background-position: -22px -22px; }
}
#nav-directory-link {
	background-position: -44px -154px;
	&:hover {
		background-position: -66px -154px; }
}
#nav-help-link {
	background-position: 0 -110px;
	&:hover {
		background-position: -22px -110px; }
}
#nav-home-link {
	background-position: -44px -132px;
	&:hover {
		background-position: -66px -132px; }
}
#nav-intro-link {
	background-position: 0px -190px;
	&:hover {
		background-position: -44px -190px; }
}
#nav-login-link, #nav-logout-link {
	background-position: 0 -88px;
	&:hover {
		background-position: -22px -88px; }
}
#nav-messages-link {
	background-position: -44px -88px;
	&:hover {
		background-position: -66px -88px; }
}
#nav-notify-link, #nav-notifications-linkmenu {
	background-position: -44px -110px;
}
#nav-notify-link:hover {
	background-position: -66px -110px;
}
#nav-network-link {
	background-position: 0px -177px;
	&:hover {
		background-position: -22px -177px; }
}
#nav-search-link {
	background-position: 0 -44px;
	&:hover {
		background-position: -22px -44px;
	}
}
#jot-title,
#profile-link,
#profile-title,
#profile-attach-wrapper,
#profile-audio,
#profile-link,
#profile-location,
#profile-nolocation,
#profile-title,
#profile-upload-wrapper,
#profile-video,
#profile-jot-submit,
#wall-image-upload,
#wall-file-upload,
#wall-image-upload-div,
#wall-file-upload-div,
.icon,
.hover,
.focus,
.pointer {
	cursor: pointer;
}

/* popup notifications */

div.jGrowl div {
	&.notice {
		background: @notice url("../../../images/icons/48/notice.png") no-repeat 5px center;
		color: white;
		padding-left: 58px;
		margin-top: 50px;
	}
	&.info {
		background: @info url("../../../images/icons/48/info.png") no-repeat 5px center;
		color: white;
		padding-left: 58px;
		margin-top: 50px;
	}
}

#nav-notifications-menu {
	margin: 30px 0 0 -20px;
	width: 275px;
	max-height: 300px;
	overflow-y: auto;
	font-size: 9pt;
	.contactname {
	    font-weight: bold;
		font-size: 0.9em; }
	img {
		float: left;
		margin-right: 5px; }
	.notif-when {
		font-size: 0.8em;
		display: block; }
	li {
		word-wrap: normal;
		border-bottom: 1px solid black;
		&:hover {
			color: black; }
	}
	a:hover {
		color: black;
		text-decoration: underline; }
}

nav #nav-notifications-linkmenu {
	&.on .icon.s22.notify,
	&.selected .icon.s22.notify {
		// background-image: url("../../../images/icons/22/notify_on.png");
		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAQAAABuvaSwAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAUJcAAFCXAZtv64UAAAHuSURBVCjPbZPbTlNBFIYHLixXRIhEQGNRMUopJAJyAyZ4Z2l8B+XwEBqKtjwOp8oDIAJKIJFUjdFIQCUYrRytdyb0459ht8wG9rrYs9b618y/TsYEH4ZK4qRYYIdDybZOI7TKakIfVhrJ8J2i5IBNyV93/kaaBuv3oV3MgwCTPKGHPkkPA0xRUMBrOgN4AP0o6BseEpF2m3es0qJTFQneyvMhgDsC9tZprnEcGuOPeMcDLUpW3jlLxlDBmJTFY6gLvsVv8tyh9G7U3Z6mwtCuJAoiECSh/w1+8otmTjLqF2KDNsNzRY1bruV0o6rFFtc9S5USh5RRWvAYv4xX9dYPS8ur1oBQC4Y99m2uHriRNda5ErLdU1l3jCI2xdJ3XOYLX6kP2W6K2OF54Et84jN154F31d6ukKOG92pSbcjWLRrbRhVGLTZeOtXqX46LoQSHhJo3jOo3ESrdBQbljIRKNyXUiKHNNSXhTdbZiUzyT/WJ23Zn3BBFy+2u4ZHc1eV2N7EkxAvbbqMRmZOSlbE0g/uajRgl6Iy8r1wpnaFTQ4ji+8XOEsuxYmdDWpJleXJ0+BPdoduL4p5Vavd5IOllmJfiWmSWu6d3pV4jteFWqaAGbLkdKSqtUXXUnN3DSvF8phfy/JfkxfOp9sVb2COz+hY/T0qkwwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMS0wOS0xNlQwOTozOTowMCswMjowMC9Oi90AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTEtMDktMTZUMDk6Mzk6MDArMDI6MDBeEzNhAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==");
	}
}
.show {
	display: block;
}
#notifications {
	.box(170px, 20px);
	position: absolute;
	top: -19px;
	left: 4px;
}
#nav-floater {
	position: fixed;
	top: 20px;
	right: 1%;
	padding: 5px;
	background: @dk_bg_colour;
	color: transparent;
	.rounded_corners;
	z-index: 100;
	.box(300px, 60px);
}

#nav-buttons {
	clear: both;
	list-style: none;
	padding: 0px;
	margin: 0px;
	height: 25px;
	> li {
		padding: 0;
		display: inline-block;
		margin: 0px -4px 0px 0px;
	}
}
.floaterflip {
	display: block;
	position: fixed;
	z-index: 110;
	top: 56px;
	right: 19px;
	.box(22px, 22px);
	overflow: hidden;
	margin: 0px;
	background: transparent url(dark/icons.png) -190px -60px no-repeat;
}
.search-box {
	display: inline-block;
	margin: 5px;
	position: fixed;
	right: 0px;
	bottom: 0px;
	z-index: 100;
	background: @dk_bg_colour;
	.rounded_corners;
}
#search-text {
	.borders;
	background: @bg_colour;
	color: @main_colour;
	font-size: 8pt;
	margin: 8px;
	.box(10em, 14px);
}
#scrollup {
	position: fixed;
	right: 5px;
	bottom: 40px;
	z-index: 100;
	a:hover {
		text-decoration: none;
		border: 0;
	}
}
#user-menu {
	.box_shadow(5px, 0, 10px, 0);
	display: block;
	width: 75%;
	margin: 3px 0 0 0;
	position: relative;
	.rounded_corners;
	background-color: @menu_bg_colour;
	background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAIAAwDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMH/8QAIhAAAQMEAgIDAAAAAAAAAAAAAQIDBAAFBhESIQdBMVFh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgP/xAAXEQEBAQEAAAAAAAAAAAAAAAABAAIR/9oADAMBAAIRAxEAPwCXiHO8dbsEi35BEhIehNlbUhxhBU82O+G9bKgToD2D+VlmZX9OWZBJuAiMxGlni0w0gJCED4HXv7pSi6eFML//2Q==");
	background-position: 98% center;
	background-repeat: no-repeat;
	clear: both;
	top: 4px;
	left: 10px;
	padding: 2px;
	> a {
		vertical-align: top;
	}
}
#user-menu-label {
	font-size: 12px;
	padding: 3px 20px 9px 5px;
	height: 10px;
}
.nav-ajax-update, .nav-ajax-left {
	.box(30px, 19px);
	background: transparent url(dark/notifications.png) 0 0 no-repeat;
	color: #222;
	font-weight: bold;
	font-size: 0.8em;
	padding-top: 0.2em;
	text-align: center;
	float: left;
	margin: 0 -1px 0 3px;
	display: block;
	visibility: hidden;
}
.nav-ajax-update.show, .nav-ajax-left.show {
	visibility: visible;
}
#net-update {
	background-position: 0px 0px;
}
#mail-update {
	background-position: -30px 0;
}
#notify-update {
	background-position: -60px 0px;
}
#home-update {
	background-position: -90px 0px;
}
#intro-update {
	background-position: -120px 0px;
}
#lang-select-icon {
	cursor: pointer;
	position: fixed;
	left: 28px;
	bottom: 6px;
	z-index: 10;
}
#language-selector {
	position: fixed;
	bottom: 2px;
	left: 52px;
	z-index: 10;
}
.menu-popup {
	position: absolute;
	display: none;
	width: 11em;
	background: white;
	color: @bg_colour;
	margin: 0px;
	padding: 0px;
	.borders(3px, solid, @shiny_colour);
	z-index: 100000;
	.box_shadow;
	a {
		display: block;
		color: @bg_colour;
		padding: 5px 10px;
		text-decoration: none;
		&:hover {
			background-color: lighten(@shiny_colour, 55%);
		}
	}
	.menu-sep {
	    border-top: 1px solid @med_bg_colour;
	}
	li {
		float: none;
		overflow: auto;
		height: auto;
		display: block;
		img {
			float: left;
			.box(16px, 16px);
			padding-right: 5px;
		}
	}
	.empty {
		padding: 5px;
		text-align: center;
		color: lighten(@shiny_colour, 45%);
	}
}
.notif-item {
	font-size: small;
	a {
		vertical-align: middle;
	}
}
.notif-image {
	.box(32px, 32px);
	padding: 7px 7px 0px 0px;
}
.notify-seen {
	background: darken(@main_alt_colour, 20%);
}


/**
 * sysmsg
 */
#sysmsg_info {
	position: fixed;
	bottom: 0;
	.box_shadow(@main_shadow);
	padding: 10px;
	background-color: @lt_orange;
	.borders(2px, solid, @orange);
	border-bottom: 0;
	padding-bottom: 50px;
	z-index: 1000;
}
#sysmsg {
	position: fixed;
	bottom: 0;
	.box_shadow(@main_shadow);
	padding: 10px;
	background-color: @lt_orange;
	.borders(2px, solid, @orange);
	border-bottom: 0;
	padding-bottom: 50px;
	z-index: 1000;
}
#sysmsg_info br, #sysmsg br {
	display: block;
	margin: 2px 0px;
	border-top: 1px solid @main_colour;
}


/**
 * aside
 */
#asidemain {
	float: left;
	font-size: smaller;
	margin: 20px 0 20px 35px;
	width: 25%;
	display: inline;
}

/* for now, disappear these */
#asideright, #asideleft {
	display: none;
}
.vcard {
	.fn {
		font-size: 1.7em;
		font-weight: bold;
		border-bottom: 1px solid #729fcf;
		padding-bottom: 3px;
	}
	#profile-photo-wrapper {
		margin: 20px;
		img {
			.box_shadow(3px, 3px, 10px, 0);
		}
	}
}
#asidemain {
	h4 {
		font-size: 1.2em; }
	#viewcontacts {
		text-align: right;
	}
	#contact-block {
		width: 99%;
		.contact-block-content {
			width: 99%;
			.contact-block-div {
				float: left;
				margin: 0 5px 5px 0;
				.box(50px, 50px);
				padding: 3px;
				position: relative; } } }
}

.aprofile dt {
	background: @main_colour;
	color: @bg_colour;
	font-weight: bold;
	.box_shadow(1px 1px 5px 0);
	margin: 15px 0 5px;
	padding-left: 5px;
}
#profile-extra-links ul {
	margin-left: 0px;
	padding-left: 0px;
	list-style: none;
}
#dfrn-request-link {
	.rounded_corners;
	color: @main_colour;
	display: block;
	font-size: 1.2em;
	padding: 0.2em 0.5em;
	background-color: @friendica_blue;
	// background-image: url(icons/connect.png);
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAE4SURBVCiRpZKxLgRRFIa//64dKruZFRIlolBviFKiVHsHrRaFikTCC+hEQtRegMQDqDUKJOPOvauSMJmjYEU2M0viT071/+fLOTlHZkadQgjLkh1LPEoj661WKw5mXG034JxtAgtmrJoVK5WZYYCy1AVQSOYbjeSqMmRmQ8v755Ne77lb5w+d4HMNJopCT7X+bwDQZKfTyf4BIAHeawHe+/kQ/FGM+QagvpFl2VSM/tyMmV7PV14AYMQ5nUp0AULIp0HXzpVvSdLYMmNVAjNdAuNAUQHgxy/ZvEQTSMw0A33DxkIIi2ma3gwC9PKSzRWF2wbdpml62DfyPF9yjlNgAnQGLJjZnXON3Xa7ff8NGPbKQPNrbAOI0a9J2ilLEzAL7P0GqJJizF+BUeDhL2cclJnZPvAg6eADf+imKjSMX1wAAAAASUVORK5CYII=");
	background-repeat: no-repeat;
	background-position: 95% center;
}
#wallmessage-link {
	///*background: #3465A4 url(dark/connect.png) no-repeat 95% center;*/
	///*border-radius: 5px 5px 5px 5px;*/
	color: @main_alt_colour;
	display: block;
	font-size: 1.2em;
	padding: 0.2em 0.5em;
}
.ttright {
	margin: 0px;
}


/**
 * contacts block
 */
.contact-block-div {
	.box(50px, 50px);
	float: left;
}
.contact-block-textdiv {
	.box(150px, 34px);
	float: left;
}


/**
 * jot
 */
#jot {
	margin: 10px 0 20px 0px;
	width: 100%;
	#jot-tools {
		margin: 0px;
		padding: 0px;
		.box(100%, 35px);
		overflow: none;
		span {
			float: left;
			margin: 10px 20px 2px 0px;
		a {
			display: block;
		}
		}
		.perms {
			float: right;
			width: 40px;
		}
		li.loading {
			float: right;
			background-color: white;
			.box(20px, 38px);
			vertical-align: center;
			text-align: center;
			border-top: 2px solid #9eabb0;
			img {
				margin-top: 10px;
			}
		}
	}
	#jot-title {
	    .borders(1px, solid, darken(@main_alt_colour, 13%));
		margin: 0 0 5px;
		.box(90%, 20px);
		font-weight: bold;
		.rounded_corners;
		vertical-align: middle;
	}
}
#jot-category {
	margin: 5px 0;
	.rounded_corners;
	.borders(1px, solid, darken(@main_alt_colour, 33%));
	color: darken(@main_alt_colour, 27%);
	font-size: smaller;
	&:focus {
		color: @main_alt_colour;
	}
}
#jot #character-counter {
	.box(6%, 15px);
	float: right;
	text-align: right;
	line-height: 20px;
	padding: 2px 20px 5px 0;
}
#profile-jot-text_parent {
	.box_shadow(5px, 0, 10px, 0, @shadow_colour);
}
#profile-jot-text_tbl {
	margin-bottom: 10px;
	background: #777;
}
#profile-jot-text_ifr {
	width: 99.900002% !important;
}
#profile-jot-text_toolbargroup, .mceCenter tr {
	background: #777;
}
[id$="jot-text_ifr"] {
	width: 99.900002% !important;
	color: @bg_colour;
	background: @main_colour;
	.mceContentBody {
		color: @bg_colour;
		background: @main_colour;
	}
}
.defaultSkin {
	tr.mceFirst {
		background: #777;
	}
	td {
		&.mceFirst, &.mceLast {
			background-color: @main_colour;
		}
	}
	span.mceIcon, img.mceIcon, .mceButtonDisabled .mceIcon {
		background-color: @main_colour;
	}
}
#profile-attach-wrapper,
#profile-audio-wrapper,
#profile-link-wrapper,
#profile-location-wrapper,
#profile-nolocation-wrapper,
#profile-title-wrapper,
#profile-upload-wrapper,
#profile-video-wrapper {
	float: left;
	margin: 0 20px 0 0;
}
#profile-rotator-wrapper {
	float: right;
}
#profile-jot-email-wrapper {
	margin: 10px 10% 0;
	.borders(1px, solid, @menu_bg_colour);
	border-bottom: 0;
}
#profile-jot-email-label {
	background-color: @menu_bg_colour;
	color: @main_colour;
	padding: 5px;
}
#profile-jot-email {
	width: 90%;
	margin: 5px;
}
#profile-jot-networks {
	margin: 0 10%;
	border: 1px solid @menu_bg_colour;
	border-top: 0;
	border-bottom: 0;
	padding: 5px;
}
#profile-jot-net {
	margin: 5px 0;
}
#jot-preview-link {
	margin: 0 0 0 10px;
	border: 0;
	text-decoration: none;
	float: right;
}
.icon-text-preview {
	margin: 0 0 -18px 0;
	display: block;
	.box(20px, 20px);
	background: url(dark/icons.png) no-repeat -128px -40px;
	border: 0;
	text-decoration: none;
	float: right;
	cursor: pointer;
}
#profile-jot-perms {
	float: right;
	background-color: @menu_bg_colour;
	.box(22px, 22px);
	.rounded_corners;
	overflow: hidden;
	border: 0px;
	margin: 0 10px 0 10px;
}
#profile-jot-plugin-wrapper {
	width: 1px;
	margin: 10px 0 0 0;
	float: right;
}
#profile-jot-submit-wrapper {
	float: right;
	width: 100%;
	margin: 10px 0 0 0;
	padding: 0;
}
#profile-jot-submit {
	height: auto;
	background-color: @menu_bg_colour;
	color: @main_alt_colour;
	.rounded_corners;
	.borders(2px, outset, @shiny_colour);
	margin: 0;
	float: right;
	.text_shadow;
	width: auto;
	&:active {
		.box_shadow(0, 0, 0, 0);
	}
}
#jot-perms-icon {
	.box(20px, 22px);
	.rounded_corners;
	overflow: hidden;
}
#profile-jot-acl-wrapper {
	margin: 0 10px;
	.borders(1px, solid, darken(@main_alt_colour, 60%));
	border-top: 0;
	display: block !important;
	.borders(1px solid @menu_bg_colour);
	.box_shadow;
}
#group_allow_wrapper,
#group_deny_wrapper,
#acl-permit-outer-wrapper,
#contact_allow_wrapper,
#contact_deny_wrapper,
#acl-deny-outer-wrapper {
	width: 47%;
}
#group_allow_wrapper,
#group_deny_wrapper,
#acl-permit-outer-wrapper {
	float: left;
}
#contact_allow_wrapper,
#contact_deny_wrapper,
#acl-deny-outer-wrapper {
	float: right;
}
#acl-permit-text {
	background-color: darken(@main_alt_colour, 60%);
	color: @main_colour;
	padding: 5px;
	float: left;
}
#jot-public {
	background-color: darken(@main_alt_colour, 60%);
	color: @alert;
	padding: 5px;
	float: left;
}
#acl-deny-text {
	background-color: darken(@main_alt_colour, 60%);
	color: @main_colour;
	padding: 5px;
	float: left;
}
#jot-title-desc {
	color: darken(@main_alt_colour, 13%);
}
#profile-jot-desc {
	color: @red_orange;
	margin: 5px 0;
}
#jot-title-wrapper {
	margin-bottom: 5px;
}
#jot-title-display {
	font-weight: bold;
}
.jothidden {
	display: none;
}
#jot-preview-content {
	background-color: @bg_alt_colour;
	color: @main_colour;
	.borders(1px, solid, @main_colour);
	.rounded_corners;
	padding: 3px 3px 6px 10px;
	.wall-item-outside-wrapper {
	    border: 0;
		.rounded_corners(0px 0px 0px 0px);
	}
}


/**
 * section
 */
#sectionmain {
	margin: 20px;
	font-size: 0.8em;
	min-width: 475px;
	width: 67%;
	float: left;
	display: inline;
}


/**
 * tabs
 */
.tabs {
	list-style: none;
	margin: 10px 0;
	padding: 0;
	li {
		display: inline;
		font-size: smaller;
		font-weight: bold;
	}
}
.tab {
	border: 1px solid @link_colour;
	padding: 4px;
	&:hover, &.active:hover, &:active {
		background: @link_colour;
		color: @bg_colour;
	}
	&.active {
		background: @main_colour;
		color: @bg_colour;
		a {
			color: @bg_colour;
		}
	}
	a {
		border: 0;
		text-decoration: none;
	}
}

/**
 * items
 */
.wall-item-outside-wrapper {
	.borders(1px, solid, #aaa);
	.rounded_corners;
	.box_shadow(5px, 0, 10px, 0);
	&.comment {
		margin-top: 5px;
	}
}
.wall-item-outside-wrapper-end {
	clear: both;
}
.wall-item-content-wrapper {
	position: relative;
	padding: 10px;
	width: auto;
}
.wall-item-outside-wrapper .wall-item-comment-wrapper {
	/*margin-left: 90px;*/
}
.shiny {
	background: @shiny_colour;
	.rounded_corners;
}
.wall-outside-wrapper .shiny {
	.rounded_corners;
}
.heart {
	color: red;
}
.wall-item-content {
	overflow-x: auto;
	margin: 0px 15px 0px 5px;
}
[id^="tread-wrapper"], [class^="tread-wrapper"] {
	margin: 15px 0 0 0;
	padding: 0px;
}
.wall-item-photo-menu {
	display: none;
}
.wall-item-photo-menu-button {
	display: none;
	text-indent: -99999px;
	background: @menu_bg_colour url(dark/menu-user-pin.jpg) no-repeat 75px center;
	position: absolute;
	overflow: hidden;
	.box(90px, 20px);
	top: 85px;
	left: 0;
	.rounded_corners(0 0 5px 5px);
}
.wall-item-info {
	float: left;
	width: 110px;
}
.wall-item-photo-wrapper {
	.box(80px, 80px);
	position: relative;
	padding: 5px;
	background-color: @menu_bg_colour;
	.rounded_corners;
}
[class^="wall-item-tools"] * {
	/*margin: 0 0 5px 0;*/
	> * {
		/*margin: 0 0 5px 0;*/
	}
}
.wall-item-tools {
	float: right;
	opacity: 0.4;
	.transition;
	&:hover {
		opacity: 1;
		.transition;
	}
}
.wall-item-subtools1 {
	.box(30px, 30px);
	list-style: none outside none;
	margin: 20px 0 30px -20px;
	padding: 0;
}
.wall-item-subtools2 {
	height: 25px;
	list-style: none outside none;
	margin: -75px 0 0 5px;
	padding: 0;
	width: 25px;
}
.wall-item-title {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 1em;
}
.wall-item-body {
	margin: 20px 20px 10px 0px;
	text-align: left;
	overflow-x: auto;
}
.wall-item-lock-wrapper {
	float: right;
	.box(22px, 22px);
	margin: 0 -5px 0 0;
	opacity: 1;
}
.wall-item-dislike,
.wall-item-like {
	clear: left;
	font-size: 0.8em;
	color: #878883;
	margin: 5px 0 5px 120px;
}
.wall-item-author,
.wall-item-actions-author {
	clear: left;
	font-size: 0.8em;
	color: #878883;
	margin: 20px 20px 0 110px;
}
.wall-item-ago {
	display: inline;
	padding-left: 10px;
}
.wall-item-wrapper-end {
	clear: both;
}
.wall-item-location {
	margin-top: 15px;
	width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	.icon {
		float: left;
	}
	> a, .smalltext {
		margin-left: 25px;
		font-size: 0.7em;
		display: block;
	}
	> br {
		display: none;
	}
}
.wallwall {
	.wwto {
		left: 5px;
		margin: 0;
		position: absolute;
		top: 75px;
		width: 30px;
		z-index: 10001;
		.box(30px, 30px);
		img {
			width: 30px !important;
			height: 30px !important;
		}
	}
	.wall-item-photo-end {
		clear: both;
	}
}
.wall-item-arrowphoto-wrapper {
	position: absolute;
	left: 35px;
	top: 80px;
	z-index: 10002;
}
.wall-item-photo-menu {
	min-width: 92px;
	.borders(2px, solid, white);
	border-top: 0px;
	background: #555753;
	position: absolute;
	left: -2px;
	top: 101px;
	display: none;
	z-index: 10003;
	.rounded_corners;
	li a {
		white-space: nowrap;
		display: block;
		padding: 5px 2px;
		color: @main_alt_colour;
		&:hover {
			color: #555753;
			background: @main_alt_colour;
		}
	}
}
#item-delete-selected {
	overflow: auto;
	width: 100%;
}
#connect-services-header,
#connect-services,
#extra-help-header,
#extra-help,
#postit-header,
#postit {
	margin: 5px 0 0 0;
}


/**
 * comment
 */
.ccollapse-wrapper {
	font-size: 0.9em;
	margin-left: 80px;
}
.wall-item-outside-wrapper.comment {
	margin-left: 80px;
	.wall-item-photo {
		width: 40px!important;
		height: 40px!important;
	}
	.wall-item-photo-wrapper {
		width: 40px;
		height: 40px;
	}
	.wall-item-photo-menu-button {
		width: 50px;
		top: 45px;
		background-position: 35px center;
	}
	.wall-item-info {
		width: 60px;
	}
	.wall-item-body {
		margin-left: 10px;
	}
	.wall-item-author {
		margin-left: 50px;
	}
	.wall-item-photo-menu {
		min-width: 50px;
		top: 60px;
	}
}
.comment-wwedit-wrapper {
  /*margin: 30px 0px 0px 80px;*/
}
.comment-edit-wrapper {
	border-top: 1px #aaa solid;
}
[class^="comment-edit-bb"] {
	.list_reset;
	display: none;
	margin: -40px 0 5px 60px;
	width: 75%;
	> li {
		display: inline-block;
		margin: 0 10px 0 0;
		visibility: none;
	}
}
.comment-wwedit-wrapper img,
.comment-edit-wrapper img {
	.box;
}
.comment-edit-photo-link,
.comment-edit-photo {
	margin-left: 10px;
}
.my-comment-photo {
	.box(40px, 40px);
	padding: 5px;
}

[class^="comment-edit-text"] {
	margin: 5px 0 10px 20px;
	width: 84.5%;
}
.comment-edit-text-empty {
	height: 20px;
	border: 2px #c8bebe solid;
	border-radius: 5px;
	color: #c8bebe;
	.transition;
	&:hover {
		color: #999999;
	}
}
.comment-edit-text-full {
	height: 10em;
	.rounded_corners;
	.transition;
}
.comment-edit-submit-wrapper {
	width: 90%;
	margin: 5px 5px 10px 50px;
	text-align: right;
}
.comment-edit-submit {
	height: 22px;
	background-color: #555753;
	color: @main_alt_colour;
	.rounded_corners;
	border: 0;
}


/**
 * item text style
 */
.wall-item-body code {
    background-color: #444;
    border-bottom: 1px dashed #ccc;
    border-left-style: solid;
    border-left-width: 10px;
    border-top: 1px dashed #ccc;
    display: block;
    overflow-x: auto;
    padding: 5px 0 15px 10px;
    width: 95%;
	a {
		color: @lt_link_colour;
	}
}


/**
 * profile
 */
div {
	&[id$="text"] {
		font-weight: bold;
		border-bottom: 1px solid #ccc;
	}
	&[id$="wrapper"] {
		height: 100%;
		margin-bottom: 1em;
		br {
			clear: left;
		}
	}
}
.profile-match-wrapper {
	float: left;
	margin: 0 5px 40px 0;
	.box(120px, 120px);
	padding: 3px;
	position: relative;
}
.icon.drophide.profile-match-ignore {
	margin: 0 6px 0 -3px;
}
.profile-match-photo {
	
}
[id$="-end"], [class$="-end"] {
	clear: both;
	margin: 0 0 10px 0;
}
.profile-match-end {
	margin: 0 0 5px 0;
}
.profile-match-name {
	font-weight: bold;
	margin: auto auto auto 23px;
}
.profile-match-connect {
	font-style: italic;
	margin: auto auto auto 23px;
}
#advanced-profile-with {
  margin-left: 200px; }

/**
 * photos
 */

.photos {
  height: auto;
  overflow: auto; }

#photo-top-links {
  margin-bottom: 30px; }

.photo-album-image-wrapper, .photo-top-image-wrapper {
	float: left;
	.box_shadow;
	background-color: #222;
	color: @bg_colour;
	.rounded_corners;
	padding-bottom: 30px;
	position: relative;
	margin: 0 10px 10px 0;
}

#photo-photo {
	max-width: 100%;
	img {
		max-width: 100%; } }

.photo-top-image-wrapper a:hover,
#photo-photo a:hover,
.photo-album-image-wrapper a:hover {
	border-bottom: 0;
}

.photo-top-photo, .photo-album-photo {
	.rounded_corners(5px 5px 0 0);
}

.photo-top-album-name, .caption {
	position: absolute;
	bottom: 0;
	padding: 0 5px;
}

#photo-photo {
	position: relative;
	float: left; }

#photo-prev-link, #photo-next-link {
	position: absolute;
	.box(30%, 100%);
	background: white center center no-repeat;
	opacity: 0;
	.transition(all, 0.2s);
}

#photo-prev-link {
	background-image: url(dark/prev.png);
    height: 350px;
    left: 1%;
    top: 215px;
    width: 50px;
    z-index: 10;
}

#photo-next-link {
	background-image: url(dark/next.png);
    height: 350px;
    right: 45%;
    top: 215px;
    width: 50px;
}

#photo-prev-link a, #photo-next-link a {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-indent: -900000px; }

#photo-prev-link:hover {
	opacity: 1;
	.transition(all, 0.2s);
}

#photo-next-link {
	&:hover {
		opacity: 1;
		.transition(all, 0.2s);
	}
	.icon {
		display: none;
	}
}

#photo-prev-link .icon {
  display: none; }

#photos-upload-spacer,
#photos-upload-new-wrapper,
#photos-upload-exist-wrapper {
  margin-bottom: 1em; }

#photos-upload-existing-album-text,
#photos-upload-newalbum-div {
  background-color: #555753;
  color: @main_alt_colour;
  padding: 1px; }

#photos-upload-album-select,
#photos-upload-newalbum {
  width: 99%; }

#photos-upload-perms-menu {
  text-align: right; }

#photo-edit-caption,
#photo-edit-newtag,
#photo-edit-albumname {
  float: left;
  margin-bottom: 25px; }

#photo-edit-link-wrap {
  margin-bottom: 15px; }

#photo-edit-caption,
#photo-edit-newtag {
  width: 100%; }

#photo-like-div {
  margin-bottom: 25px; }

#photo-edit-caption-end,
#photo-edit-tags-end,
#photo-edit-albumname-end {
  clear: both; }

#photo-edit-delete-button {
  margin-left: 200px; }

#photo-edit-end {
  margin-bottom: 35px; }

#photo-caption {
  font-size: 110%;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 15px; }

/**
 * message
 */

.prvmail-text {
	width: 100%;
}

#prvmail-subject {
	width: 100%;
	color: @bg_colour;
	background: @main_colour;
}

#prvmail-submit-wrapper {
  margin-top: 10px; }

#prvmail-submit {
  float: right;
  margin-top: 0; }

#prvmail-submit-wrapper div {
  margin-right: 5px;
  float: left; }

.mail-list-outside-wrapper {
  margin-top: 20px; }

.mail-list-sender {
  float: left; }

.mail-list-detail {
  margin-left: 90px; }

.mail-list-sender-name {
  display: inline;
  font-size: 1.1em; }

.mail-list-date {
  display: inline;
  font-size: 0.9em;
  padding-left: 10px; }

.mail-list-sender-name, .mail-list-date {
  font-style: italic; }

.mail-list-subject {
  font-size: 1.2em; }

.mail-list-delete-wrapper {
  float: right; }

.mail-list-outside-wrapper-end {
  clear: both;
  border-bottom: 1px @main_colour dotted; }

.mail-conv-sender {
  float: left;
  margin: 0px 5px 5px 0px; }

.mail-conv-sender-photo {
	.box(32px, 32px)
}

.mail-conv-sender-name {
	float: left; }

.mail-conv-date {
	float: right; }

.mail-conv-subject {
  clear: right;
  font-weight: bold;
  font-size: 1.2em; }

.mail-conv-body {
  clear: both; }

.mail-conv-delete-wrapper {
  margin-top: 5px; }

/**
 * contacts
 */

.view-contact-wrapper, .contact-entry-wrapper {
	float: left;
	margin: 0 5px 40px 0;
	.box(120px, 120px);
	padding: 3px;
	position: relative; }

.contact-direction-wrapper {
	position: absolute;
	top: 20px; }

.contact-edit-links {
	position: absolute;
	top: 60px; }

.contact-entry-photo-wrapper {}

.contact-entry-photo {
	margin-left: 20px; }

.contact-entry-name {
	width: 120px;
	font-weight: bold;
	/*overflow: hidden;*/
}

.contact-entry-photo {
  position: relative; }

.contact-entry-edit-links .icon {
	border: 1px solid #babdb6;
	.rounded_corners(3px);
	background-color: #fff;
}

#contact-entry-url,
[id^="contact-entry-url"],
#contact-entry-network,
[id^="contact-entry-network"] {
	font-size: smaller;
}

#contact-entry-network,
[id^="contact-entry-network"] {
	font-style: italic;
}

#contact-edit-banner-name {
  font-size: 1.5em; }

#contact-edit-photo-wrapper {
  position: relative;
  float: left;
  padding: 20px; }

#contact-edit-direction-icon {
  position: absolute;
  top: 60px;
  left: 0; }

#contact-edit-nav-wrapper {
  margin-left: 0px; }

#contact-edit-links {
	margin-top: 23px;
	ul {
		.list_reset;
	}
}

#contact-drop-links {
	margin-left: 5px;
}

#contact-edit-nav-wrapper .icon {
	.borders(1px, solid, #babdb6);
	.rounded_corners(3px);
}

#contact-edit-poll-wrapper {
  margin-left: 0px; }

#contact-edit-last-update-text {
  margin-bottom: 15px; }

#contact-edit-last-updated {
  font-weight: bold; }

#contact-edit-poll-text {
  display: inline; }

#contact-edit-info_tbl, #contact-edit-info_parent, .mceLayout {
  width: 100%; }

#contact-edit-end {
  clear: both;
  margin-bottom: 65px; }

.contact-photo-menu-button {
	position: absolute;
	background: url("dark/photo-menu.jpg") top left no-repeat transparent;
	margin: 0px;
	padding: 0px;
	.box(16px, 16px);
	top: 64px;
	left: 0px;
	overflow: hidden;
	text-indent: 40px;
	display: none;
}

.contact-photo-menu {
  width: auto;
  border: 2px solid #444;
  background: @bg_colour;
  color: @main_colour;
  position: absolute;
  left: 0px;
  top: 90px;
  display: none;
  z-index: 10000;
  ul {
    margin: 0px;
    padding: 0px;
    list-style: none; }
  li a {
    display: block;
    padding: 2px;
    &:hover {
      color: #fff;
      background: #3465A4;
      text-decoration: none; } } }

/**
 * register, settings & profile forms
 */

.openid {}

#id_openid_url {
  background: url(dark/login-bg.gif) no-repeat;
  background-position: 0 50%;
  padding-left: 18px; }

#settings-nickname-desc {
	background-color: @main_colour;
	.rounded_corners;
	padding: 5px;
	color: #111;
}

#settings-default-perms {
  margin-bottom: 20px; }

#register-form div, #profile-edit-form div {
  clear: both; }

.settings-block {
  label {
    clear: left; }
  input {
    margin: 10px 5px; } }

/*#register-form label,     */
/*#profile-edit-form label {*/
/*    width: 300px;         */
/*    float: left;          */
/*}                         */

/*#register-form span,     */
/*#profile-edit-form span {*/
/*    color: #555753;      */
/*    display: block;      */
/*    margin-bottom: 20px; */
/*}                        */

#profile-edit-marital-label span {
  margin: -4px; }

.settings-submit-wrapper, .profile-edit-submit-wrapper {
  margin: 0 0 30px -3px; }

.profile-edit-side-div {
  display: none; }

/*.profile-edit-side-div:hover {
    display: block;
}
.profile-edit-side-link {
    margin: 3px 0px 0px 70px;
}*/

#profiles-menu-trigger {
  margin: 0px 0px 0px 25px; }

.profile-listing {
  float: left;
  margin: 20px 20px 0px 0px; }

.icon-profile-edit {
	background: url("dark/icons.png") -150px 0px no-repeat;
	border: 0;
	cursor: pointer;
	display: block;
	.box(20px, 20px);
	margin: 0 0 -18px;
	text-decoration: none;
	top: 113px;
	right: 260px;
}
#profile-edit-links ul {
	.list_reset;
	margin: 20px 0;
}
.marital {
	margin-top: 5px;
}
#register-sitename {
	display: inline;
	font-weight: bold;
}
#advanced-expire-popup {
	background: @bg_colour;
	color: @main_colour;
}
#id_ssl_policy {
	width: 374px;
}
#theme-preview img {
	margin: 10px 10px 10px 288px;
}

/**
 * contacts selector
 */

.group-delete-wrapper {
	margin: -31px 50px 0 0;
	float: right; }

/*.group-delete-icon {
    margin: 0 0 0 10px;
}*/

#group-edit-submit-wrapper {
	margin: 0 0 10px 0;
	display: inline; }

#group-edit-desc {
	margin: 10px 0px; }

#group-members, #prof-members {
	height: 200px;
	overflow: auto;
	.borders(1px, solid, #555753);
	.rounded_corners(5px 5px 0 0);
}

#group-all-contacts, #prof-all-contacts {
	height: 200px;
	overflow: auto;
	.borders(1px, solid, #555753);
	.rounded_corners(0 0 5px 5px);
}

#group-members h3,
#group-all-contacts h3,
#prof-members h3,
#prof-all-contacts h3 {
	color: @main_alt_colour;
	background-color: #555753;
	margin: 0;
	padding: 5px; }

#group-separator, #prof-separator {
	display: none; }

/**
 * profile
 */

#cropimage-wrapper {
  float: left; }

#crop-image-form {
  clear: both; }

/**
 * intros
 */

.intro-wrapper {
  margin-top: 20px; }

.intro-fullname {
  font-size: 1.1em;
  font-weight: bold; }

.intro-desc {
  margin-bottom: 20px;
  font-weight: bold; }

.intro-note {
  padding: 10px; }

.intro-end {
  padding: 30px; }

.intro-form {
  float: left; }

.intro-approve-form, .intro-approve-as-friend-end {
  clear: both; }

.intro-submit-approve, .intro-submit-ignore {
  margin-right: 20px; }

.intro-submit-approve {
  margin-top: 15px; }

.intro-approve-as-friend-label, .intro-approve-as-fan-label, .intro-approve-as-friend, .intro-approve-as-fan {
  float: left; }

.intro-form-end {
  clear: both;
  margin-bottom: 10px; }

.intro-approve-as-friend-desc {
  margin-top: 10px; }

.intro-approve-as-end {
  clear: both;
  margin-bottom: 10px; }

.intro-end, .clear {
  clear: both; }

/**
 * events
 */

.eventcal {
  float: left;
  font-size: 20px; }

.event {
  background: @bg_colour; }

.vevent {
  border: 1px solid #ccc;
  .event-description, .event-location, .event-start {
    margin-left: 10px;
    margin-right: 10px; } }

#new-event-link {
  margin-bottom: 10px; }

.edit-event-link, .plink-event-link {
  /*float: left;      */
  /*margin-top: 4px;  */
  /*margin-right: 4px;*/
  /*margin-bottom: 15px;*/ }

.event-description:before {
  content: url('../../../images/calendar.png');
  margin-right: 15px; }

.event-start, .event-end {
  margin-left: 10px;
  width: 330px;
  font-size: smaller; }

.event-start .dtstart, .event-end .dtend {
  float: right; }

.event-list-date {
  margin-bottom: 10px; }

.prevcal, .nextcal {
  float: left;
  margin-left: 32px;
  margin-right: 32px;
  margin-top: 64px; }

.event-calendar-end {
  clear: both; }

.calendar {
  font-family: monospace; }

.today {
  font-weight: bold;
  color: #F00; }

#event-start-text, #event-finish-text {
  margin-top: 10px;
  margin-bottom: 5px; }

#event-nofinish-checkbox, #event-nofinish-text, #event-adjust-checkbox, #event-adjust-text, #event-share-checkbox {
  float: left; }

#event-datetime-break {
  margin-bottom: 10px; }

#event-nofinish-break, #event-adjust-break, #event-share-break {
  clear: both; }

#event-desc-text, #event-location-text {
  margin-top: 10px;
  margin-bottom: 5px; }

#event-submit {
  margin-top: 10px; }

.body-tag {
  margin: 10px 0;
  opacity: 0.5;
  &:hover {
    opacity: 1.0 !important; } }

.filesavetags, .categorytags {
  margin: 20px 0;
  opacity: 0.5; }

.filesavetags:hover, .categorytags:hover {
  margin: 20px 0;
  opacity: 1.0 !important; }

.item-select {
  opacity: 0.1;
  margin: 5px 0 0 6px !important;
  &:hover {
    opacity: 1; } }

.checkeditem {
  opacity: 1; }

#item-delete-selected {
  margin-top: 30px; }

/* was tired of having no way of moving it around, so
* here's a little 'hook' to do so */

.delete-checked {
  position: absolute;
  left: 35px;
  margin-top: 20px; }

#item-delete-selected-end {
  clear: both; }

#item-delete-selected-icon {
  float: left;
  margin-right: 5px; }

#item-delete-selected-desc {
  float: left;
  margin-right: 5px;
  &:hover {
    text-decoration: underline; } }

.fc-state-highlight {
  background: @main_colour;
  color: @bg_colour; }

/**
 * directory
 */

.directory-item {
  float: left;
  margin: 0 5px 4px 0;
  padding: 3px;
  width: 180px;
  height: 250px;
  position: relative; }

/**
 * sidebar
 */

#group-sidebar {
	margin-bottom: 10px;
}
.group-selected,
.nets-selected,
.fileas-selected {
	padding: 3px;
	color: @bg_colour;
	background: @main_colour;
	font-weight: bold;
}
.group-selected:hover,
.nets-selected:hover,
.fileas-selected:hover {
	color: @link_colour;
	background: @bg_colour;
}
.groupsideedit {
	margin-right: 10px;
}
#sidebar-group-ul {
	padding-left: 0;
}
#sidebar-group-list {
	margin: 0 0 5px 0;
	li {
		margin-top: 10px;
	}
	.icon {
		display: inline-block;
		.box(12px, 12px);
	}
}
.sidebar-group-element {
	padding: 3px;
	&:hover {
		color: @bg_colour;
		background: @link_colour;
		font-weight: bold;
		padding: 3px;
	}
}
#sidebar-new-group {
	margin: auto;
	display: inline-block;
	color: #efefef;
	text-decoration: none;
	text-align: center;
}
#peoplefind-sidebar form {
	margin-bottom: 10px;
}
#sidebar-new-group {
	&:hover {
		/*background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );*/
		/*background: -moz-linear-gradient( center top, #b20202 5%, #d60808 100% );*/
		/*background-color: #b20202;*/ }
	&:active {
		position: relative;
		top: 1px;
	}
}
#side-peoplefind-url {
	background-color: @bg_colour;
	color: @main_colour;
	border: 1px #999 solid;
	margin-right: 3px;
	width: 75%;
	&:hover, &:focus {
		background-color: #efefef;
		color: #222;
		border: 1px 333 solid;
	}
}
.nets-ul {
	.list_reset;
	li {
		margin: 10px 0 0;
	}
}
.nets-link, .nets-all {
	margin-left: 0px;
}
#netsearch-box {
	margin: 20px 0px 30px;
	width: 135px;
	#search-submit {
		margin: 5px 5px 0px 0px;
	}
}


/**
 * admin
 */
#pending-update {
	float: right;
	color: #fff;
	font-weight: bold;
	background-color: #ff0000;
	padding: 0 .3em;
}
.admin {
	&.linklist {
		border: 0;
		padding: 0; }
	&.link {
		.list_reset;
	}
}
#adminpage {
	color: @main_colour;
	background: @bg_colour;
	margin: 5px;
	padding: 10px;
	dl {
	    clear: left;
		margin-bottom: 2px;
		padding-bottom: 2px;
		border-bottom: 1px solid #000;
	}
	dt {
		width: 250px;
		float: left;
		font-weight: bold;
	}
	dd {
		margin-left: 250px;
	}
	h3 {
		border-bottom: 1px solid #ccc;
	}
	.submit {
		clear: left;
	}
	#pluginslist {
		margin: 0;
		padding: 0;
	}
	.plugin {
		list-style: none;
		display: block;
		border: 1px solid #888;
		padding: 1em;
		margin-bottom: 5px;
		clear: left;
	}
	.toggleplugin {
		float: left;
		margin-right: 1em;
	}
	table {
		width: 100%;
		border-bottom: 1px solid #000;
		margin: 5px 0;
		th {
			text-align: left;
		}
	}
	td .icon {
		float: left;
	}
	table {
		&#users img {
			width: 16px;
			height: 16px;
		}
	}
	.selectall {
		text-align: right;
	}
	#users a {
		color: @main_colour;
		text-decoration: underline;
	}
}

#users .name {
	color: @main_colour;
}

/**
 * form fields
 */

.field {
	overflow: auto;
	label {
		width: 38%;
		display: inline-block;
		font-size: 1.077em;
		margin: 0 10px 1em 0;
		border: 1px @bg_colour solid;
		padding: 5px;
		background: @main_colour;
		color: #111; } }

.field .onoff {
	float: right;
	margin: 0 330px 0 auto;
	width: 80px;
	a {
		display: block;
		border: 1px solid #666;
		padding: 3px 6px 4px 10px;
		height: 16px;
		text-decoration: none;
	}
	.on, .off {
		background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAUACIDASIAAhEBAxEB/8QAGgABAQACAwAAAAAAAAAAAAAAAAQDBQEGCf/EACgQAAIBAwIFAwUAAAAAAAAAAAECAAMEERIUBRMxUpEhIoEjM1Nxkv/EABcBAAMBAAAAAAAAAAAAAAAAAAABAgT/xAAaEQEAAgMBAAAAAAAAAAAAAAAAAQIRMVES/9oADAMBAAIRAxEAPwD1ERKFNFVaNNVUYACgACcNVt1dEKUwzZwNI9cSDczDVdnuKDjomrPyJOQ2SXNq/L0rTPMzp9vXHWZfo/jT+RNFQV6e2yPt6s/Ms3EWQofhnDqjszWFqzMcljRUknxEn3ES/dup8xxPZ0hXtKFViQzorEDpkiZtqvc3mIkzs40bVe5vMbVe5vMREbrN3xy4t7utSVaZVHZQSDnAP7iIm+K1xpkm09f/2Q==');
		background-repeat: no-repeat;
	}
	.on {
		background-position: 42px 1px;
		background-color: #999;
		color: #111;
		text-align: left;
	}
	.off {
		background-position: 2px 1px;
		background-color: #ccc;
		color: #333;
		text-align: right;
	}
}

.hidden {
	display: none !important; }

.field textarea {
	.box(80%, 100px);
}

.field_help {
  display: block;
  margin-left: 297px;
  color: #aaa; }

.field.radio .field_help {
  margin-left: 297px; }

label {
	width: 38%;
	display: inline-block;
	font-size: 1.077em;
	margin: 0 10px 1em 0;
	.borders(1px, solid, @bg_colour);
	padding: 5px;
	background: @main_colour;
	color: #111;
	.box_shadow(3px, 3px, 5px);
}
input {
	.box(250px, 25px);
	.borders(1px, solid, #999);
	&[type="checkbox"],
	&[type="radio"] {
		margin: 0;
		.box(15px, 15px);
	}
	&[type="submit"],
	&[type="button"] {
		background-color: #eee;
		.borders(2px, outset, #aaa);
		.rounded_corners;
		.box_shadow(1px, 3px, 4px, 0);
		color: #2e302e;
		cursor: pointer;
		font-weight: bold;
		width: auto;
		.text_shadow;
	}
	&[type="submit"]:active,
	&[type="button"]:active {
		.box_shadow(0, 0, 0, 0);
	}
}


/*
 * update
 */
.popup {
	.box(100%, 100%);
	top: 0px;
	left: 0px;
	position: absolute;
	display: none;
	.background {
		background-color: #000;
		opacity: 0.5;
		.box(100%, 100%);
		position: absolute;
		top: 0px;
		left: 0px; }
	.panel {
		top: 25%;
		left: 25%;
		.box(50%, 50%);
		padding: 1em;
		position: absolute;
		border: 4px solid #000000;
		background-color: #FFFFFF;
	}
}

#panel {
	z-index: 100; }

.grey, .gray {
	color: gray; }

.orange {
	color: orange; }

.red {
	color: red; }

.popup .panel {
	.panel_text {
		display: block;
		overflow: auto;
		height: 80%;
	}
	.panel_in {
		.box(100%, 100%);
		position: relative;
	}
	.panel_actions {
		width: 100%;
		bottom: 4px;
		left: 0px;
		position: absolute;
	}
}

.panel_text .progress {
  width: 50%;
  overflow: hidden;
  height: auto;
  border: 1px solid #cccccc;
  margin-bottom: 5px;
  span {
    float: right;
    display: block;
    width: 25%;
    background-color: #eeeeee;
    text-align: right; } }

/**
 * OAuth
 */

.oauthapp {
  height: auto;
  overflow: auto;
  border-bottom: 2px solid #cccccc;
  padding-bottom: 1em;
  margin-bottom: 1em;
  img {
    float: left;
    width: 48px;
    height: 48px;
    margin: 10px;
    &.noicon {
      background-image: url("../../../images/icons/48/plugin.png");
      background-position: center center;
      background-repeat: no-repeat; } }
  a {
    float: left; } }

/**
 * icons
 */

.iconspacer {
	display: block;
	.box(16px, 16px);
}

.icon {
	display: block;
	.box;
	background: url(dark/icons.png) no-repeat;
	border: 0;
	text-decoration: none;
	.rounded_corners;
	&:hover {
		border: 0;
		text-decoration: none; } }

.editicon {
  display: inline-block;
  width: 21px;
  height: 21px;
  background: url(dark/editicons.png) no-repeat;
  border: 0;
  text-decoration: none; }

.shadow {
	.box_shadow(2px, 2px, 5px, 2px);
	&:active, &:focus, &:hover {
		box-shadow: 0 0 0 0;
	}
}
.editicon:hover {
	border: 0; }

.boldbb {
	background-position: 0px 0px;
	&:hover {
		background-position: -22px 0px; } }

.italicbb {
	background-position: 0px -22px;
	&:hover {
		background-position: -22px -22px; } }

.underlinebb {
	background-position: 0px -44px;
	&:hover {
		background-position: -22px -44px; } }

.quotebb {
	background-position: 0px -66px;
	&:hover {
		background-position: -22px -66px; } }

.codebb {
	background-position: 0px -88px;
	&:hover {
		background-position: -22px -88px; } }

.imagebb {
	background-position: -44px 0px;
	&:hover {
		background-position: -66px 0px; } }

.urlbb {
	background-position: -44px -22px;
	&:hover {
		background-position: -66px -22px; } }

.videobb {
	background-position: -44px -44px;
	&:hover {
		background-position: -66px -44px; } }

.icon {
	&.drop, &.drophide, &.delete {
		float: left;
		margin: 0 2px; }
	&.s22 {
		&.delete {
			display: block;
			background-position: -110px 0; }
		&.text {
			padding: 10px 0px 0px 25px;
			width: 200px; } }
	&.text {
		text-indent: 0px; }
	&.s16 {
		min-width: 16px;
		height: 16px; } }

.s16 .add {
	background: url("../../../images/icons/16/add.png") no-repeat;
}

.add {
	margin: 0px 5px; }

.article {
	background-position: -50px 0; }

.audio {
	background-position: -70px 0; }

.block {
	background-position: -90px 0px; }

.drop, .delete {
	background-position: -110px 0; }

.drophide {
	background-position: -130px 0; }

.edit {
	background-position: -150px 0; }

.camera {
	background-position: -170px 0; }

.dislike {
	background-position: -190px 0; }

.file-as {
	background-position: -230px -60px; }

.like {
	background-position: -211px 0; }

.link {
	background-position: -230px 0; }

.globe, .location {
	background-position: -50px -20px; }

.noglobe, .nolocation {
	background-position: -70px -20px; }

.no {
	background-position: -90px -20px; }

.pause {
	background-position: -110px -20px; }

.play {
	background-position: -130px -20px; }

.pencil {
	background-position: -151px -18px; }

.small-pencil {
	background-position: -170px -20px; }

.recycle {
	background-position: -190px -20px; }

.remote-link {
	background-position: -210px -20px; }

.share {
	background-position: -230px -20px; }

.tools {
	background-position: -50px -40px; }

.lock {
	background-position: -70px -40px; }

.unlock {
	background-position: -88px -40px; }

.video {
	background-position: -110px -40px; }

.attach {
	background-position: -190px -40px; }

.language {
	background-position: -210px -40px; }

.starred {
	background-position: -130px -60px; }

.unstarred {
	background-position: -150px -60px; }

.tagged {
	background-position: -170px -60px; }

.on {
	background-position: -50px -60px; }

.off {
	background-position: -70px -60px; }

.prev {
	background-position: -90px -60px; }

.next {
	background-position: -110px -60px; }

.icon.dim {
	opacity: 0.3; }

#pause {
	position: fixed;
	bottom: 40px;
	right: 30px; }

.border {
	.borders(1px, solid, #babdb6);
	.rounded_corners;
	&:hover {
		.borders(1px, solid, #babdb6);
		.rounded_corners;
	}
}

.attachtype {
	display: block;
	width: 20px;
	height: 23px;
	background-image: url(../../../images/content-types.png); }

.type-video {
	background-position: 0px 0px; }

.type-image {
	background-position: -20px 0; }

.type-audio {
	background-position: -40px 0; }

.type-text {
	background-position: -60px 0px; }

.type-unkn {
	background-position: -80px 0; }

/**
 * footer
 */

.cc-license {
	margin-top: 100px;
	font-size: 0.7em; }

footer {
	display: block;
	/*margin: 50px 20%;*/
	clear: both; }

#profile-jot-text {
	height: 20px;
	color: @main_colour;
	.borders;
	.rounded_corners;
	width: 99.5%;
}

/**
 * acl
 */

#photo-edit-perms-select, #photos-upload-permissions-wrapper, #profile-jot-acl-wrapper {
	display: block !important;
	background: @bg_colour;
	color: @main_colour; }

#acl-wrapper {
	width: 660px;
	margin: 0 auto; }

#acl-search {
	float: right;
	background: white url("../../../images/search_18.png") no-repeat right center;
	padding-right: 20px;
	margin: 6px;
	color: #111; }

#acl-showall {
	float: left;
	display: block;
	width: auto;
	height: 18px;
	background: #eeeecc url("../../../images/show_all_off.png") 8px 8px no-repeat;
	padding: 7px 10px 7px 30px;
	.rounded_corners;
	color: #999;
	margin: 5px 0;
	&.selected {
		color: #000;
		background: #ff9900 url(../../../images/show_all_on.png) 8px 8px no-repeat; } }

#acl-list {
  height: 210px;
  border: 1px solid #ccc;
  clear: both;
  margin-top: 30px;
  overflow: auto; }

/*#acl-list-content {
}*/

.acl-list-item {
	.borders;
	display: block;
	float: left;
	height: 110px;
	margin: 3px 0 5px 5px;
	width: 120px;
	img {
		.box(22px, 22px);
		float: left;
		margin: 5px 5px 20px; }
	p {
		height: 12px;
		font-size: 10px;
		margin: 0 0 22px;
		padding: 2px 0 1px; }
	a {
		background: #eeeecc 3px 3px no-repeat;
		.rounded_corners;
		clear: both;
		font-size: 10px;
		display: block;
		width: 55px;
		height: 20px;
		color: @bg_colour;
		margin: 5px auto 0;
		padding: 0 3px;
		text-align: center;
		vertical-align: middle; } }

#acl-wrapper a:hover {
	text-decoration: none;
	color: @bg_colour;
	border: 0; }

//data URI:
// data:[<MIME-type>][;charset=<encoding>][;base64],<data>
.acl-button-show {
	// background-image: url('../../../images/show_off.png');
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABxSURBVAiZY/z//z8DDMyaNUuEgYEhk4GBwZ8JJrhv3z5DZmbmMwwMDOoMDAxpLKtWraqTl5d3fPv2rcn///9XpKWlpTIwMDCwfPr0SePWrVtmP378YPn//385zASmf//+Rf/8+XMpIyPj2bS0tHcwCQBWkiq6M5HGDgAAAABJRU5ErkJggg==');
	margin: 0 auto;
}
.acl-button-hide {
	// background-image: url('../../../images/hide_off.png');
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACWSURBVAiZBcEhDsIwFAbg/72+VXQ7wPSCIlj8JMlmcKQGgdgRCCfpEz0HjgSDw3IA1AQC1QqSpXwfqeoZwHOaphsAqGpfVVVHIYQNM1+J6MLMOwA9gAOVUhBC6Ky1r7quv03TrMZxzAwAIjKIyCel9JvneQ8ApKprY8zdObfNOXMp5bEsyyDGmJaITt77NwDEGI/W2vYP0nYuQ/Tw9H4AAAAASUVORK5CYII=');
	margin: 0 auto;
}
.acl-button-show.selected {
	// background: #9ade00 url(../../../images/show_on.png);
	background: #9ade00 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABXSURBVAiZTcyhDYNQGADh7xEGwGDxhD2qUWxAwIBgE9BdoxO03YaEEX7USzh5l1yKCJl0pBoT+uIhK3zRYk52Az5444w1FijxwoYOTT4UGPHHL9a4crgBhcYSpxKVgzIAAAAASUVORK5CYII=');
	color: @bg_colour;
}
.acl-button-hide.selected {
	// background: #ff4141 url(../../../images/hide_on.png);
	background: #ff4141 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACSSURBVAiZBcGhDoJQFAbg/z/3cGliJDOTszmLichGstkMPoTzvfA2N4vN6gMYCGhwMifMTY7fxyCy4zBcCrMjAFRk7p3LWAEzRwYT2StQgMwBrGlmOJCZV72Ok+QpcTyZ1/VHAEBEyiiKHq+2/d6bZgUADMCUIqeR94t338tAns2sVKea/sy2y667AUAgN+pc+gcI6S733PoZRAAAAABJRU5ErkJggg==');
	color: @bg_colour;
}
.acl-list-item {
	&.groupshow {
		border-color: #9ade00; }
	&.grouphide {
		border-color: #ff4141; } }

/** /acl **/

/* autocomplete popup */
.acpopup {
	max-height: 175px;
	max-width: 42%;
	background-color: #555753;
	color: #fff;
	overflow: auto;
	z-index: 100000;
	border: 1px solid #cccccc;
}
.acpopupitem {
	background-color: #555753;
	padding: 4px;
	clear: left;
	img {
		float: left;
		margin-right: 4px;
	}
	&.selected {
		color: #2e302e;
		background-color: @main_alt_colour;
	}
}
.qcomment-wrapper {
	padding: 0px;
	margin: 5px 5px 5px 81%;
}
.qcomment {
  opacity: 0.5;
  &:hover {
    opacity: 1.0; } }

#network-star-link {
  margin-top: 10px; }

.network-star {
  float: left;
  margin-right: 5px;
  &.icon.starred {
    display: inline-block; } }

#fileas-sidebar {}

.fileas-ul {
  padding: 0; }

/*
 * addons theming
 */

#sidebar-page-list {
  ul {
    padding: 0;
    margin: 5px 0; }
  li {
    list-style: none; } }

#jappix_mini {
  margin-left: 130px;
  position: fixed;
  bottom: 0;
  right: 175px !important;
  /* override the jappix css */
  z-index: 999; }

//* media stuff */
@media handheld {
	body {
		font-size: 15pt;
	}
}
//* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px)
	and (max-device-width: 480px) {
	body {
		font-size: 10px;
	}
}
//* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) {
	body {
		font-size: 10px;
	}
}
//* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {
	body {
		font-size: 10px;
	}
}
//* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px)
	and (max-device-width: 1024px) {
	body {
		font-size: 16px;
	}
}
//* iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px)
	and (max-device-width: 1024px)
	and (orientation: landscape) {
	body {
		font-size: 16px;
	}
}
//* iPads (portrait) ----------- */
@media only screen and (min-device-width: 768px)
	and (max-device-width: 1024px)
	and (orientation: portrait) {
	body {
		font-size: 16px;
	}
}
//* Desktops and laptops ----------- */
//adjusted to 1024 from 1224.
//not everybody has a fucking big screen ffs
@media only screen and (min-width: 1024px) {
	body {
		font-size: 16px;
	}
}
//* Large screens - */
@media only screen and (min-width: 1520px) {
	body {
		font-size: 18px;
	}
}
//* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-device-pixel-ratio: 1.5) {
	body {
		font-size: 16px;
	}
}
.test {
	color: @link_colour;
	background-color: darken(@main_alt_colour, 13%);
}