fixes #478

fixes #478

body {
	word-wrap: break-word;
	-ms-word-wrap: break-word;
	&.top-navbar {
		&.admin-bar {
			padding-top: @navbar-height;
			.topnavbar {
				&.navbar-fixed-top {
					padding-top: 32px;
				}
			}
		}
	}
	.navbar.navbar-static-top {
		margin-bottom: 0;
	}
	&.bottom-navbar {
		padding-bottom: @navbar-height;
	}
}

// Styling the (+) button on the navbar
a.toggle-nav {
	opacity:0.6;
	-webkit-transition:all 500ms ease-in-out;
	-moz-transition:all 500ms ease-in-out;
	-o-transition:all 500ms ease-in-out;
	-ms-transition:all 500ms ease-in-out;
	border-radius: 50%;

	color: @navbar-default-link-color;

	&.nav-toggle {
		color: @navbar-default-link-color;
		position: relative;
		float: left;
	}

	&.static-left {
		z-index:1;
		text-decoration: none;
		text-align: center;
		display:block;
		width: 30px;
		height: 30px;
		font-size: 20px;
		background: transparent;
		color: @brand-info;
		width: 100%;
		border-radius: 0px;
	}

	&.open {
		opacity:1;
		transform: rotate(540deg);
		-ms-transform: rotate(540deg);
		-webkit-transform: rotate(540deg);
	}
}

// Megadrop styles
#megaDrop {
	display: none;
	padding: 20px 10px;
}

.navbar {
	#searchform {
		border: 0;
	}
	.dropdown-menu {
		padding: 0;
		background: @navbar-default-bg;
		li.active a,
		li:hover a{
			background: @navbar-default-link-active-bg;
			color: @navbar-default-link-active-color;
		}
	}

	&.style1 {
		.open > a,
		.open > a:hover,
		.open > a:focus,
		a:hover,
		a:focus {
			&:first-child {
				background: @navbar-default-bg;
				border-bottom: 5px solid @brand-primary;
				padding-bottom: 10px;
			}

		}

		.active > a,
		.active > a:hover,
		.active > a:focus {
			background: @navbar-default-bg;
			border-bottom: 5px solid @brand-primary;
		}
		.dropdown-menu {
			border-top: 5px;
			margin-top: -5px;
			padding-top: 0;
			padding-bottom: 0;
			right: auto !important;
			border-top: 1px solid @brand-primary;
			a,
			a:hover,
			a:focus {
				background: block;
				color: @brand-primary;
				border-bottom: 0;
				border-top: 1px solid @brand-primary;
				padding-bottom: 0px;
			}
		}
		.navbar-nav > li > a {
				padding-bottom: 10px;
		}
	}
	&.style2 {
		li > a {
			padding-top: (((@navbar-height - @line-height-computed) / 2));
		}
		.active > a,
		.active > a:hover,
		.active > a:focus {
			background: @navbar-default-bg;
			border-top: 3px solid @brand-primary;
			padding-top: (((@navbar-height - @line-height-computed) / 2) - 3);
		}
		li ul li > a {
			border-top: none !important;
			padding-top: 0 !important;
		}
		.dropdown-menu {
			.active > a,
			.active > a:hover,
			.active > a:focus {
				color: @brand-primary;
			}
		}
	}
	&.style3 {
		border-top: 5px solid @brand-primary;
		.active > a,
		.active > a:hover,
		.active > a:focus {
			border-top: 5px solid @brand-warning;
			margin-top: -5px;
		}
		.dropdown-menu {
			.active > a,
			.active > a:hover,
			.active > a:focus {
			border-top: 2px solid @brand-warning !important;
			}
		}
	}
	&.style4 {
		border-top: 5px solid @brand-primary;
		li > a {
		}
		.active > a,
		.active > a:hover,
		.active > a:focus {
			background: @brand-primary;
			color: @body-bg;
		}
	}
	&.style5 {
		.active > a,
		.active > a:hover,
		.active > a:focus {
			background: @body-bg;
			color: @link-color;
		}
	}
	&.style6 {
		border-bottom: 5px solid @brand-primary;
		li > a {
		}
		.active > a,
		.active > a:hover,
		.active > a:focus {
			border-bottom: 5px solid @brand-warning;
			margin-bottom: -5px;
		}
		.dropdown-menu {
			.active > a,
			.active > a:hover,
			.active > a:focus {
				border-bottom: 2px solid @brand-warning !important;
			}
		}
	}
	&.metro {
		.active > a,
		.active > a:hover,
		.active > a:focus {
			background: @brand-danger;
		}
		li.open {
			a.dropdown-toggle {
				background: @brand-primary;
			}
		}
		.dropdown-menu > li > a:hover,
		.dropdown-menu > li > a:focus {
			background: @brand-primary;
		}
	}
}

.navbar a.navbar-brand {
	max-width: inherit !important;

	&.logo {
		height: @navbar-height;
		padding: @padding-base-vertical;
		img {
			max-height: 100%;
			width: auto;
			max-width: inherit !important;
		}
	}
	&.text {
		padding: ((@navbar-height - @line-height-computed) / 2) 15px;
		max-width: 100%;
	}
}

// Sub menus
// ---------------------------
.dropdown-submenu {
	position: relative;
}
// Default dropdowns
li.dropdown ul.dropdown-menu li.dropdown > .dropdown-menu {
	top: 0;
	left: 100%;
}
li.dropdown ul.dropdown-menu li.dropdown:hover > .dropdown-menu {
	display: block;
}

// Left aligned submenus
li.dropdown ul.dropdown-menu li.dropdown.pull-left {
	float: none;
}

.nav-pills > li > a {
	border-radius: @border-radius-base;
}

.navbar {
	font-family:  @navbar-font-family;
	font-size:    @navbar-font-size;
	font-style:   @navbar-font-style;
	font-weight:  @navbar-font-weight;
	li > a {
		color:        @navbar-default-link-color !important;
	}
	a.navbar-brand {
		font-family:  @brand-font-family;
		font-size:    @brand-font-size;
		font-style:   @brand-font-style;
		font-weight:  @brand-font-weight;
		color:        @brand-font-color;
	}
	.nav.nav-pills {
		li a {
			padding: @navbar-padding-vertical @navbar-padding-horizontal;
		}
	}
}

//Having topnavbar always on top of secondary
.topnavbar {
	z-index: @zindex-navbar;
	&.navbar-fixed-top {
		z-index: @zindex-navbar-fixed;
	}
}
.secondary {
	z-index: 1;
}

@media (min-width: @screen-sm) {
	.container > .navbar-header,
	.container > .navbar-collapse {
		margin-left: (@grid-gutter-width / 2);
	}

	.wrap.main-section .content {
		padding-left: (@grid-gutter-width / 2);
		padding-right: (@grid-gutter-width / 2);
	}
}

.boxed-container {
	.container > .navbar-header,
	.container > .navbar-collapse {
		margin-right: (@grid-gutter-width / 2);
		margin-left: 0;
	}
}

@media (max-width: @screen-sm) {
	.navbar .pull-right {
		float: none !important;
	}
}

.banner-navbar-static-left-mixin {
	position: fixed;
	overflow-y: auto;
	height: 100%;
	padding: 0;
	border-radius : 0px;
	top:0;

	.navbar-header {
		float: none;
	}

	.nav-main.navbar-collapse {
		padding: 0;

		ul.nav.navbar-nav,
		.pull-right {
			float: none !important;

			> li {
				width: 100%;
			}
		}
	}

	form#searchform {
		padding: (@grid-gutter-width / 2);
	}

	.logo {
		max-width: 100% !important;
		height: auto;
	}
}

.static-menu-main-mixin {
	&.col-static-1  { padding-left: 91.66%; }
	&.col-static-2  { padding-left: 83.33%; }
	&.col-static-3  { padding-left: 75%;    }
	&.col-static-4  { padding-left: 66.66%; }
	&.col-static-5  { padding-left: 58.33%; }
	&.col-static-6  { padding-left: 50%;    }
	&.col-static-7  { padding-left: 41.66%; }
	&.col-static-8  { padding-left: 33.33%; }
	&.col-static-9  { padding-left: 25%;    }
	&.col-static-10 { padding-left: 16.66%; }
	&.col-static-11 { padding-left: 8.332%; }
}

@media (max-width: @screen-xs) {
	header.sm.banner.navbar.static-left,
	header.md.banner.navbar.static-left,
	header.lg.banner.navbar.static-left {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (min-width: @screen-xs) {
	header.xs {
		&.banner.navbar.static-left {
			.banner-navbar-static-left-mixin;
		}
	}
	header.sm.banner.navbar.static-left,
	header.md.banner.navbar.static-left,
	header.lg.banner.navbar.static-left {
		padding-left: 0;
		padding-right: 0;
	}
	section.xs {
		&.static-menu-main {
			.static-menu-main-mixin;
		}
	}
}

@media (min-width: @screen-sm) {
	header.sm {
		&.banner.navbar.static-left {
			.banner-navbar-static-left-mixin;
		}
	}
	header.md.banner.navbar.static-left,
	header.lg.banner.navbar.static-left {
		padding-left: 0;
		padding-right: 0;
	}
	section.sm {
		&.static-menu-main {
			.static-menu-main-mixin;
		}
	}
}

@media (min-width: @screen-md) {
	header.md {
		&.banner.navbar.static-left {
			.banner-navbar-static-left-mixin;
		}
	}
	header.lg.banner.navbar.static-left {
		padding-left: 0;
		padding-right: 0;
	}
	section.md {
		&.static-menu-main {
			.static-menu-main-mixin;
		}
	}
}

@media (min-width: @screen-lg) {
	header.lg {
		&.banner.navbar.static-left {
			.banner-navbar-static-left-mixin;
		}
	}
	section.lg {
		&.static-menu-main {
			.static-menu-main-mixin;
		}
	}
}

body {
	word-wrap: break-word;
	-ms-word-wrap: break-word;
	&.top-navbar {
		&.admin-bar {
			padding-top: 53px;
			.topnavbar {
				&.navbar-fixed-top {
					padding-top: 32px;
				}
			}
		}
	}
	.navbar.navbar-static-top {
		margin-bottom: 0;
	}
	&.bottom-navbar {
		padding-bottom: @navbar-height;
	}
}

// responsive hacks for the navbar
@media screen and (min-width: @screen-sm) {
	body {
		&.top-navbar {
			padding-top: @navbar-height;
		}
		&.bottom-navbar {
			padding-bottom: @navbar-height;
		}
	}
}

// Styling the (+) button on the navbar
a.toggle-nav {
	opacity:0.6;
	-webkit-transition:all 500ms ease-in-out;
	-moz-transition:all 500ms ease-in-out;
	-o-transition:all 500ms ease-in-out;
	-ms-transition:all 500ms ease-in-out;
	border-radius: 50%;

	color: @navbar-default-link-color;

	&.nav-toggle {
		color: @navbar-default-link-color;
		position: relative;
		float: left;
	}

	&.static-left {
		z-index:1;
		text-decoration: none;
		text-align: center;
		display:block;
		width: 30px;
		height: 30px;
		font-size: 20px;
		background: transparent;
		color: @brand-info;
		width: 100%;
		border-radius: 0px;
	}

	&.open {
		opacity:1;
		transform: rotate(540deg);
		-ms-transform: rotate(540deg);
		-webkit-transform: rotate(540deg);
	}
}

// Megadrop styles
#megaDrop {
	display: none;
	padding: 20px 10px;
}

.navbar {
	#searchform {
		border: 0;
	}
	.dropdown-menu {
		padding: 0;
		background: @navbar-default-bg;
		li.active a,
		li:hover a{
			background: @navbar-default-link-active-bg;
			color: @navbar-default-link-active-color;
		}
	}

	&.style1 {
		.open > a,
		.open > a:hover,
		.open > a:focus,
		a:hover,
		a:focus {
			&:first-child {
				background: @navbar-default-bg;
				border-bottom: 5px solid @brand-primary;
				padding-bottom: 10px;
			}

		}

		.active > a,
		.active > a:hover,
		.active > a:focus {
			background: @navbar-default-bg;
			border-bottom: 5px solid @brand-primary;
		}
		.dropdown-menu {
			border-top: 5px;
			margin-top: -5px;
			padding-top: 0;
			padding-bottom: 0;
			right: auto !important;
			border-top: 1px solid @brand-primary;
			a,
			a:hover,
			a:focus {
				background: block;
				color: @brand-primary;
				border-bottom: 0;
				border-top: 1px solid @brand-primary;
				padding-bottom: 0px;
			}
		}
		.navbar-nav > li > a {
				padding-bottom: 10px;
		}
	}
	&.style2 {
		li > a {
			padding-top: (((@navbar-height - @line-height-computed) / 2));
		}
		.active > a,
		.active > a:hover,
		.active > a:focus {
			background: @navbar-default-bg;
			border-top: 3px solid @brand-primary;
			padding-top: (((@navbar-height - @line-height-computed) / 2) - 3);
		}
		li ul li > a {
			border-top: none !important;
			padding-top: 0 !important;
		}
		.dropdown-menu {
			.active > a,
			.active > a:hover,
			.active > a:focus {
				color: @brand-primary;
			}
		}
	}
	&.style3 {
		border-top: 5px solid @brand-primary;
		.active > a,
		.active > a:hover,
		.active > a:focus {
			border-top: 5px solid @brand-warning;
			margin-top: -5px;
		}
		.dropdown-menu {
			.active > a,
			.active > a:hover,
			.active > a:focus {
			border-top: 2px solid @brand-warning !important;
			}
		}
	}
	&.style4 {
		border-top: 5px solid @brand-primary;
		li > a {
		}
		.active > a,
		.active > a:hover,
		.active > a:focus {
			background: @brand-primary;
			color: @body-bg;
		}
	}
	&.style5 {
		.active > a,
		.active > a:hover,
		.active > a:focus {
			background: @body-bg;
			color: @link-color;
		}
	}
	&.style6 {
		border-bottom: 5px solid @brand-primary;
		li > a {
		}
		.active > a,
		.active > a:hover,
		.active > a:focus {
			border-bottom: 5px solid @brand-warning;
			margin-bottom: -5px;
		}
		.dropdown-menu {
			.active > a,
			.active > a:hover,
			.active > a:focus {
				border-bottom: 2px solid @brand-warning !important;
			}
		}
	}
	&.metro {
		.active > a,
		.active > a:hover,
		.active > a:focus {
			background: @brand-danger;
		}
		li.open {
			a.dropdown-toggle {
				background: @brand-primary;
			}
		}
		.dropdown-menu > li > a:hover,
		.dropdown-menu > li > a:focus {
			background: @brand-primary;
		}
	}
}

.navbar a.navbar-brand {
	max-width: inherit !important;

	&.logo {
		height: @navbar-height;
		padding: @padding-base-vertical;
		img {
			max-height: 100%;
			width: auto;
			max-width: inherit !important;
		}
	}
	&.text {
		padding: ((@navbar-height - @line-height-computed) / 2) 15px;
		max-width: 100%;
	}
}

// Sub menus
// ---------------------------
.dropdown-submenu {
	position: relative;
}
// Default dropdowns
li.dropdown ul.dropdown-menu li.dropdown > .dropdown-menu {
	top: 0;
	left: 100%;
}
li.dropdown ul.dropdown-menu li.dropdown:hover > .dropdown-menu {
	display: block;
}

// Left aligned submenus
li.dropdown ul.dropdown-menu li.dropdown.pull-left {
	float: none;
}

.nav-pills > li > a {
	border-radius: @border-radius-base;
}

.navbar {
	font-family:  @navbar-font-family;
	font-size:    @navbar-font-size;
	font-style:   @navbar-font-style;
	font-weight:  @navbar-font-weight;
	li > a {
		color:        @navbar-default-link-color !important;
	}
	a.navbar-brand {
		font-family:  @brand-font-family;
		font-size:    @brand-font-size;
		font-style:   @brand-font-style;
		font-weight:  @brand-font-weight;
		color:        @brand-font-color;
	}
	.nav.nav-pills {
		li a {
			padding: @navbar-padding-vertical @navbar-padding-horizontal;
		}
	}
}

//Having topnavbar always on top of secondary
.topnavbar {
	z-index: @zindex-navbar;
	&.navbar-fixed-top {
		z-index: @zindex-navbar-fixed;
	}
}
.secondary {
	z-index: 1;
}

@media (min-width: @screen-sm) {
	.container > .navbar-header,
	.container > .navbar-collapse {
		margin-left: (@grid-gutter-width / 2);
	}

	.wrap.main-section .content {
		padding-left: (@grid-gutter-width / 2);
		padding-right: (@grid-gutter-width / 2);
	}
}

.boxed-container {
	.container > .navbar-header,
	.container > .navbar-collapse {
		margin-right: (@grid-gutter-width / 2);
		margin-left: 0;
	}
}

@media (max-width: @screen-sm) {
	.navbar .pull-right {
		float: none !important;
	}
}

.banner-navbar-static-left-mixin {
	position: fixed;
	overflow-y: auto;
	height: 100%;
	padding: 0;
	border-radius : 0px;
	top:0;

	.navbar-header {
		float: none;
	}

	.nav-main.navbar-collapse {
		padding: 0;

		ul.nav.navbar-nav,
		.pull-right {
			float: none !important;

			> li {
				width: 100%;
			}
		}
	}

	form#searchform {
		padding: (@grid-gutter-width / 2);
	}

	.logo {
		max-width: 100% !important;
		height: auto;
	}
}

.static-menu-main-mixin {
	&.col-static-1  { padding-left: 91.66%; }
	&.col-static-2  { padding-left: 83.33%; }
	&.col-static-3  { padding-left: 75%;    }
	&.col-static-4  { padding-left: 66.66%; }
	&.col-static-5  { padding-left: 58.33%; }
	&.col-static-6  { padding-left: 50%;    }
	&.col-static-7  { padding-left: 41.66%; }
	&.col-static-8  { padding-left: 33.33%; }
	&.col-static-9  { padding-left: 25%;    }
	&.col-static-10 { padding-left: 16.66%; }
	&.col-static-11 { padding-left: 8.332%; }
}

@media (max-width: @screen-xs) {
	header.sm.banner.navbar.static-left,
	header.md.banner.navbar.static-left,
	header.lg.banner.navbar.static-left {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (min-width: @screen-xs) {
	header.xs {
		&.banner.navbar.static-left {
			.banner-navbar-static-left-mixin;
		}
	}
	header.sm.banner.navbar.static-left,
	header.md.banner.navbar.static-left,
	header.lg.banner.navbar.static-left {
		padding-left: 0;
		padding-right: 0;
	}
	section.xs {
		&.static-menu-main {
			.static-menu-main-mixin;
		}
	}
}

@media (min-width: @screen-sm) {
	header.sm {
		&.banner.navbar.static-left {
			.banner-navbar-static-left-mixin;
		}
	}
	header.md.banner.navbar.static-left,
	header.lg.banner.navbar.static-left {
		padding-left: 0;
		padding-right: 0;
	}
	section.sm {
		&.static-menu-main {
			.static-menu-main-mixin;
		}
	}
}

@media (min-width: @screen-md) {
	header.md {
		&.banner.navbar.static-left {
			.banner-navbar-static-left-mixin;
		}
	}
	header.lg.banner.navbar.static-left {
		padding-left: 0;
		padding-right: 0;
	}
	section.md {
		&.static-menu-main {
			.static-menu-main-mixin;
		}
	}
}

@media (min-width: @screen-lg) {
	header.lg {
		&.banner.navbar.static-left {
			.banner-navbar-static-left-mixin;
		}
	}
	section.lg {
		&.static-menu-main {
			.static-menu-main-mixin;
		}
	}
}


move dropdown styles into own file

move dropdown styles into own file

.TimezoneSelection {
  border-bottom: 1px solid @gray-border;
}

.TimezoneSelection-timezone {
  margin: 10px 40px 10px 40px;
}

.TimezoneSelection-timezone--label {
  font-size: @font-size-large;
}

.TimezoneSelection-timezone--list {
  margin-top: -30px;

  &.TimezoneSelection--settings {
    margin-left: 150px;
    width: 260px;
  }
}

error: pathspec 'styles/components/TimezoneSelection.less' did not match any file(s) known to git


RAVE-795 do not hide widget content in canvas view

git-svn-id: 2c5eef89e506a7ff64d405e714ba3c778b83051b@1388764 13f79535-47bb-0310-9956-ffa450edef68

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/kidaa/rave.git/'


ref(ui): Remove qrcode CSS (#9751)

ref(ui): Remove qrcode CSS (#9751)

Does not look like we are using this anywhere

fatal: unable to access 'https://github.com/beeftornado/sentry.git/': The requested URL returned error: 403


fix bug with float class name on classroom details page

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Craftware/Kornell.git/'


style update

style update

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/staruml/RelationshipView.git/'


Updating

Updating

fatal: unable to access 'https://github.com/fusion809/atom.git/': The requested URL returned error: 403


Fix the ColorBlock component from not rendering within the viewport.

fatal: remote error: upload-pack: not our ref 28d4dccdcf35b2a1e79531bcba28a0b80993c6b7
fatal: the remote end hung up unexpectedly


css fix

css fix

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/stxnext/intranet-open.git/'


git margin

git margin

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/cgoudarzi/cgoudarzi.github.io.git/'


fix css for modals for smallscreens

fix css for modals for smallscreens


clean up margin on MDN tutorial pages

clean up margin on MDN tutorial pages

@import '../mkt/lib';

.html-rtl nav {
    text-align: left;
}

body {
    font-size: 14px;
}

.home #site-header:after {
    height: 6px;
    top: -6px;
}

#site-header {
    h1 a {
        background-image: url('../../img/ecosystem/developers_logo.png');
        height: 54px;
        width: 375px;
    }
    nav {
        padding-top: 41px;
        text-align: right;
    }
    nav a {
        margin-left: 25px;
        padding-top: 25px;
        color: #6DC7FF;
        text-transform: uppercase;
        font-size: 13pt;
        text-shadow: 0 1px 1px #444;
        &.loading-submit:after {
            margin: 0;
            top: 30px;
            right: auto;
            left: -30px;
        }
    }
    a.external {
        background-image: url('../../img/mkt/arrows/external_menu.gif');
        background-position: right 33px;
        background-repeat: no-repeat;
        padding-right: 12px;
    }
    section {
         .grain;
         background-color: @navy-gray;
         width: 100%;
         .wrapper {
             margin: 0 auto;
             width: 90%;
         }
    }
}

#page {
    clear: both;
}

#site-header .wrapper,
#top-marketing section,
#landing-page {
    max-width: 984px;
    width: 90%;
}

#top-marketing {
    .grain;
    border-bottom: darken(#404f5a, 5%) 1px solid;
    background-color: @navy-gray;
    margin: 0 auto;
    text-shadow: 0 1px 2px #000;
    .placeholder {
        margin: 0 auto;
        max-height: 250px;
        max-width: 70%;
    }
}

.call-to-action {
    padding: 20px 25px 25px;
    overflow: hidden;
    margin: 0 auto;
    width: 90%;
    img {
        float: right;
    }
    div {
        float: left;
        text-align: center;
        width: 320px;
        color: white;
        margin-top: 40px;
        p {
            margin: 10px 0 20px;
        }
    }
    h1 {
        font-size: 3em;
    }
}

#rotator {
    float: right;
}

#landing-page {
    margin: 0 auto 25px;
    img {
        max-width: 100%;
    }
}

#demo-block {
    padding-bottom: 0;
}

#demo-list {
    max-width:485px;
    float:left;
    margin: 0;
    padding: 0;
    li {
        list-style: none;
        display: inline-block;
        margin-bottom: 20px;
    }
    .placeholder {
        height: 120px;
        width: 200px;
        display: inline;
        margin-right: 20px;
    }
    span {
        display: block;
    }
    a {
        color: @medium-gray;
        img {
            opacity: .9;
        }
        &:hover {
            color: @dark-gray;
            img {
                opacity: 1;
            }
        }
    }
}

#marketing-horz {
    margin: 0;
    padding: 0;
    width: 100%;
    li {
        .border-box;
        list-style: none;
        text-align: center;
        float: left;
        max-width: 33.3%;
        padding: 0 10px;
        width: 33.33%;
    }
    li div {
        margin: 0 auto;
    }
}

#page {
    &:before {
        content: ".";
        display: block;
        height: 0;
        overflow: hidden;
    }
}

.marketing-block {
    .box-shadow(0 1px 5px -3px @black);
    overflow: hidden;
    background-color: white;
    padding: 25px;
    margin: -1px auto 0 auto;
    border: 1px solid #bbb;
    p {
        margin-bottom: 20px;
    }
}

.img-right {
    .placeholder {
        float: right;
        margin-left: 50px;
        margin-top: -40px;
        max-width: 500px;
    }
}

.no-pad {
    padding: 0;
}

#tutorial {
    margin: 25px auto 25px auto;
    max-width: 984px;
    width: 90%;
    background-color: #EFF1F2;
    padding: 0;

    h3 {
        font-size: 23px;
        margin-top: 8px;
    }
    a {
        color: #667990;
    }
    pre {
        border: dashed 2px #ddd;
        overflow: auto;
        padding: 10px;
        white-space: pre;
    }

    nav ul {
        padding: 0;
        margin: 0;
    }
    nav li {
        margin: 2px 0 2px 0;
    }
    nav img {
        box-shadow: 0 0 5px #aaa;
        border: solid 1px #E3E5E6;
    }

    #sidebar {
        width: 225px;
        float: left;
        margin-left: -100%;
        padding: 25px 0 25px 25px;
        font-size: 15px;
        color: #667990;
        a {
            display: block;
            margin-left: 15px;
            text-indent: -15px;
        }
        a.external {
            background: url(../../img/mkt/arrows/external_sidebar.gif) 100% 50% no-repeat;
            padding-right: 12px;
        }
    }
    #content {
        float: left;
        width: 100%;
    }
    #mdn-content {
        margin-left: 275px;
        background-color: #fff;
        padding: 25px;
        border-left: solid 1px #E3E5E6;
    }
    #mdn-toc {
        margin: 0;
        padding: 0 0 0 20px;
        li span {
            display: none;
        }
        ol {
            display: none;
        }
    }
}

@media (max-width: @10col) {
    h2 {
        font-size: 22px;
    }

    .home {
        #site-header {
            &:after {
                height: 8px;
                top: -28px;
            }
            a:first-child {
                margin: 0;
            }
            nav {
                clear: both;
                padding: 0;
                text-align: left;
                z-index: 1;
            }
        }
    }

    #page {
        margin-top: 0;
    }
    #landing-page #marketing-horz {
        li {
            float: left;
            font-size: 110%;
        }
    }
    #top-marketing {
        text-align: center;
        div {
            float: none;
            margin-top: 20px;
            width: 90%;
        }
        .placeholder {
            float: none;
            margin: 50px auto 0;
            max-height: 150px;
        }
    }
}

@media (max-width: @4col) {
    .home {
        #site-header {
            margin-bottom: 0;
            nav {
                clear: both;
                padding: 0;
                z-index: 1;
            }
        }
    }
    #site-header nav a {
        text-transform: none;
        + a {
            margin-left: 10px;
        }
    }
    #landing-page #marketing-horz {
        li {
            float: none;
            text-align: center;
            font-size: 120%;
            max-width: 100%;
            width: 100%;
        }
    }
    .call-to-action {
        div {
            margin: 0 auto;
            width: 100%;
        }
        .placeholder {
            margin-top: 40px;
            max-height: 130px;
        }
    }
}

@media (max-width: 800px) {
   #site-header {
        &:after {
            height: 8px;
            top: -28px;
        }
        a:first-child {
            margin: 0;
        }
        nav {
            clear: both;
            padding: 0;
            text-align: left;
            z-index: 1;
        }
    }
    #tutorial {
        nav img {
            display: none;
        }
        #content {
            width: 100%;
        }
        #mdn-content, #sidebar {
            margin-left: 0;
        }
    }
}

@import '../mkt/lib';

.html-rtl nav {
    text-align: left;
}

body {
    font-size: 14px;
}

.home #site-header:after {
    height: 6px;
    top: -6px;
}

#site-header {
    h1 a {
        background-image: url('../../img/ecosystem/developers_logo.png');
        height: 54px;
        width: 375px;
    }
    nav {
        padding-top: 41px;
        text-align: right;
    }
    nav a {
        margin-left: 25px;
        padding-top: 25px;
        color: #6DC7FF;
        text-transform: uppercase;
        font-size: 13pt;
        text-shadow: 0 1px 1px #444;
        &.loading-submit:after {
            margin: 0;
            top: 30px;
            right: auto;
            left: -30px;
        }
    }
    a.external {
        background-image: url('../../img/mkt/arrows/external_menu.gif');
        background-position: right 33px;
        background-repeat: no-repeat;
        padding-right: 12px;
    }
    section {
         .grain;
         background-color: @navy-gray;
         width: 100%;
         .wrapper {
             margin: 0 auto;
             width: 90%;
         }
    }
}

#page {
    clear: both;
}

#site-header .wrapper,
#top-marketing section,
#landing-page {
    max-width: 984px;
    width: 90%;
}

#top-marketing {
    .grain;
    border-bottom: darken(#404f5a, 5%) 1px solid;
    background-color: @navy-gray;
    margin: 0 auto;
    text-shadow: 0 1px 2px #000;
    .placeholder {
        margin: 0 auto;
        max-height: 250px;
        max-width: 70%;
    }
}

.call-to-action {
    padding: 20px 25px 25px;
    overflow: hidden;
    margin: 0 auto;
    width: 90%;
    img {
        float: right;
    }
    div {
        float: left;
        text-align: center;
        width: 320px;
        color: white;
        margin-top: 40px;
        p {
            margin: 10px 0 20px;
        }
    }
    h1 {
        font-size: 3em;
    }
}

#rotator {
    float: right;
}

#landing-page {
    margin: 0 auto 25px;
    img {
        max-width: 100%;
    }
}

#demo-block {
    padding-bottom: 0;
}

#demo-list {
    max-width:485px;
    float:left;
    margin: 0;
    padding: 0;
    li {
        list-style: none;
        display: inline-block;
        margin-bottom: 20px;
    }
    .placeholder {
        height: 120px;
        width: 200px;
        display: inline;
        margin-right: 20px;
    }
    span {
        display: block;
    }
    a {
        color: @medium-gray;
        img {
            opacity: .9;
        }
        &:hover {
            color: @dark-gray;
            img {
                opacity: 1;
            }
        }
    }
}

#marketing-horz {
    margin: 0;
    padding: 0;
    width: 100%;
    li {
        .border-box;
        list-style: none;
        text-align: center;
        float: left;
        max-width: 33.3%;
        padding: 0 10px;
        width: 33.33%;
    }
    li div {
        margin: 0 auto;
    }
}

.marketing-block {
    overflow: hidden;
    background-color: white;
    padding: 25px;
    margin: 25px auto 0 auto;
    border: 1px solid #BBBBBB;
    box-shadow: 0 1px 5px -3px #000000;

    p {
        margin-bottom: 20px;
    }
}

.img-right {
    .placeholder {
        float: right;
        margin-left: 50px;
        margin-top: -40px;
        max-width: 500px;
    }
}

.no-pad {
    padding: 0;
}

#tutorial {
    margin: 25px auto 25px auto;
    max-width: 984px;
    width: 90%;
    background-color: #EFF1F2;
    padding: 0;

    h3 {
        font-size: 23px;
        margin-top: 8px;
    }
    a {
        color: #667990;
        display: block;
        margin-left: 15px;
        text-indent: -15px;
    }
    pre {
        border: dashed 2px #ddd;
        overflow: auto;
        padding: 10px;
        white-space: pre;
    }

    nav ul {
        padding: 0;
        margin: 0;
    }
    nav li {
        margin: 2px 0 2px 0;
    }
    nav img {
        box-shadow: 0 0 5px #aaa;
        border: solid 1px #E3E5E6;
    }

    #sidebar {
        width: 225px;
        float: left;
        margin-left: -100%;
        padding: 25px 0 25px 25px;
        font-size: 15px;
        color: #667990;

        a.external {
            background: url(../../img/mkt/arrows/external_sidebar.gif) 7px 100% no-repeat;
            padding-right: 12px;
        }
    }
    #content {
        float: left;
        width: 100%;
    }
    #mdn-content {
        margin-left: 275px;
        background-color: #fff;
        padding: 25px;
        border-left: solid 1px #E3E5E6;
    }
    #mdn-toc {
        margin: 0;
        padding: 0 0 0 20px;
        li span {
            display: none;
        }
        ol {
            display: none;
        }
    }
}

@media (max-width: @10col) {
    h2 {
        font-size: 22px;
    }

    .home {
        #site-header {
            &:after {
                height: 8px;
                top: -28px;
            }
            a:first-child {
                margin: 0;
            }
            nav {
                clear: both;
                padding: 0;
                text-align: left;
                z-index: 1;
            }
        }
    }

    #page {
        margin-top: 0;
    }
    #landing-page #marketing-horz {
        li {
            float: left;
            font-size: 110%;
        }
    }
    #top-marketing {
        text-align: center;
        div {
            float: none;
            margin-top: 20px;
            width: 90%;
        }
        .placeholder {
            float: none;
            margin: 50px auto 0;
            max-height: 150px;
        }
    }
}

@media (max-width: @4col) {
    .home {
        #site-header {
            margin-bottom: 0;
            nav {
                clear: both;
                padding: 0;
                z-index: 1;
            }
        }
    }
    #site-header nav a {
        text-transform: none;
        + a {
            margin-left: 10px;
        }
    }
    #landing-page #marketing-horz {
        li {
            float: none;
            text-align: center;
            font-size: 120%;
            max-width: 100%;
            width: 100%;
        }
    }
    .call-to-action {
        div {
            margin: 0 auto;
            width: 100%;
        }
        .placeholder {
            margin-top: 40px;
            max-height: 130px;
        }
    }
}

@media (max-width: 800px) {
   #site-header {
        &:after {
            height: 8px;
            top: -28px;
        }
        a:first-child {
            margin: 0;
        }
        nav {
            clear: both;
            padding: 0;
            text-align: left;
            z-index: 1;
        }
    }
    #tutorial {
        nav img {
            display: none;
        }
        #content {
            width: 100%;
        }
        #mdn-content, #sidebar {
            margin-left: 0;
        }
    }
}


feat(taskcell): styles

feat(taskcell): styles

bp-table [task-cell] {
  @task-cell-height: 66px;

  position: relative;
  display: block;
  padding: 0 !important;
  margin: 0 !important;
  background: darkgray;
  height: @task-cell-height;
  .box-shadow(none);
  .content {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible !important;
    padding: 0 13px;
    background: white;
    .box-shadow(inset 0 1px @ios-cell-border-color);
  }
  &:first-child .content{
    .box-shadow(none);
  }
  &.@{tap-active} .content {
    background-color: @ios-cell-active-color;
  }

  .title {
    float: left;
    width: 70%;
    height: 34px;
    line-height: 34px;
    font-weight: bold;
  }

  time {
    float: left;
    width: 30%;
    display: block;
    text-align: right;
    line-height: 34px;
    height: 34px;
    font-size: 12px;
    color: @ios-text-secondary-color;
  }

  .description {
    float: left;
    height: 28px;
    line-height: 14px;
    font-size: 12px;
    overflow: hidden;
    white-space: pre-wrap;
  }

  &.left, &.right, {

    &.first .content:before, &.second .content:before, &:before {
      font-family: @bp-icon-font-app;
      color: white;
      position: absolute;
      text-align: center;
      width: 40px;
      height: 100%;
      line-height: @task-cell-height;
      text-align: center;
    }
  }

  &.left {
    &:before {
      content: '\f073'; // fa-calendar
    }
    &.first, &.second {
      &:before {
        display: none;
      }
      .content:before {
        content: '\f073'; // fa-calendar
        left: -40px;
      }
    }
    &.first {
      background: #347093;
    }
    &.second {
      background: #E76E48;
      .content:before {
        content: '\f00d'; // fa-times
      }
    }
  }
  &.right {
    &:before {
      content: '\f0cb'; // fa-list-ol
      right: 0;
    }
    &.first, &.second {
      &:before {
        display: none;
      }
      .content:before {
        content: '\f0cb'; // fa-list-ol
        right: -40px;
      }
    }
    &.first {
      background: #E7A048;
    }
    &.second {
      background: #33A269;
      .content:before {
        content: '\f00c'; //fa-check
      }
    }
  }
}

error: pathspec 'app/styles/directives/taskcell.less' did not match any file(s) known to git


undo delete uk-panel-badge

undo delete uk-panel-badge

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/4nxiety/pagekit.git/'


Fixed incorrect box-shadow after checked checkbox

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/rpauls/less-framework.git/'


updated button style in theme

updated button style in theme

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/aoimedia/uikit.git/'


custom select box arrow

custom select box arrow

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Eomerx/blank-less.git/'


Use CSS to approximate deploy/confirm/cancel buttons instead of using assets

/* Processed with LESS from lib/views/stylesheet.less */
@font-family: 'Ubuntu', 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* Define common colors. */
@label-color: #292929;
@text-entry-color: #6d6e70;
@charm-panel-configure-title-color: #eee7d5;
@charm-panel-configure-name-color: #8f8f88;
@charm-panel-deploy-button-color: #e45718;
@charm-panel-deploy-button-bottom-gradient: #e65c19;
@charm-panel-deploy-button-shadow: #8a2d0c;
@charm-panel-cancel-button-color: #818080;
@charm-panel-cancel-button-bottom-gradient: #a3a39f;
@charm-panel-cancel-button-shadow: #515050;
@charm-panel-separator-color: #aeaeae;

body {
    margin-top: 87px;
    background-color: #302b28;
    font-family: @font-family;
}

#viewport-wrapper {
    position: relative;
    width: 85%;
    margin: 0 auto;
    padding: 0 12px;
    min-width: 960px;
}

#vp-left-border {
    position: absolute;
    top: 0;
    left: 0;
    background: url(/juju-ui/assets/images/left_shadow.png) repeat-y;
    margin-left: -12px;
    width: 12px;
}

#vp-right-border {
    position: absolute;
    top: 0;
    right: 0;
    background: url(/juju-ui/assets/images/right_shadow.png) repeat-y;
    margin-right: -12px;
    width: 12px;
}

.view-container {
  overflow: auto;
  padding: 10px;
}

.navbar {
    margin-top: -87px;
    margin-bottom: 0;
    height: 87px;
    min-width: 800px;
    background: url(/juju-ui/assets/images/top_bar.png) repeat-x;
    padding: 0;
    position: relative;
    color: #2d2d2d!important;
    .brand {
        margin: 12px 26px 6px 10px;
        padding: 0;
    }
    > div {
        padding: 0;
        .nav-container {
            display: inline-block;
            height: 44px;
            margin: 2px 0 0 0;
            padding: 20px 0 4px;
            &#charm-search-trigger-container {
                width: 292px;
                white-space: nowrap;
            }
            .nav-section {
                border-left: 1px solid lightgray;
                display: inline-block;
                padding: 4px 10px;
                #charm-search-trigger {
                    cursor: pointer;
                }
                .btn {
                    margin: 0 5px;
                }
                input {
                    width: 128px;
                    background: url(/juju-ui/assets/images/searchbox_icon.png) no-repeat 2px 1px whiteSmoke;
                    margin: 0 10px;
                    padding: 3px 3px 3px 26px;
                    font-style: italic;
                    font-family: @font-family;
                    font-size: 0.9em;
                    &:focus {
                        background: white;
                        padding: 3px;
                        width: 151px;
                        font-style: normal;
                        font-size: 1em;
                    }
                }

            }
        }
        span:first-child .nav-section {
            border-left: none;
            padding: 0 6px;
        }
        &#nav-alerts-charms {
            float: right;
            .nav-container:first-child .nav-section {
                position: relative;
            }
        }
        &#nav-brand-env .nav-container {
            float: left;
            .provider-type {
                font-size: 0.7em;
            }
        }
    }
}

#content {
    position: relative;
    background-color: #fff;
    width: 100%;
}

#main {

}

#overview {

}

.divider {
    padding: 5px;
}

svg {
    stroke-width: 0;
}

.crosshatch-background {
    background: url(/juju-ui/assets/images/pattern_tile.png) repeat;
}

#canvas {
    position: relative;
}

.environment-menu {
    @border_radius: 20px;
    @background_color: #282421;

    display: none;
    background-color: @background_color;
    color: #fdf6e3;

    border-radius: @border_radius;
    -moz-border-radius: @border_radius;
    -webkit-border-radius: @border_radius;

    box-shadow: -2px 4px 4px 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: -2px 4px 4px 0 rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: -2px 4px 4px 0 rgba(0, 0, 0, 0.5);

    top: 0;
    left: 0;
    position: absolute;

    &.active {
        display: block;
    }

    .triangle {
        position: absolute;
        top: 62px;
        width: 12px;
        line-height: 21px;
        background-repeat: no-repeat;
    }
    &.left .triangle {
        right: -12px;
        background-image: url(/juju-ui/assets/images/icons/icon_shadow_triangle_right.png);
    }
    &.right .triangle {
        left: -12px;
        background-image: url(/juju-ui/assets/images/icons/icon_shadow_triangle.png);
    }

    .menu-title {
        margin: 10px;
    }

    .cancel {
        margin: 10px;
        float: right;
    }

    ul {
        margin: 10px;
        list-style-type: none;
        li {
            background-position: 5px center;
            background-repeat: no-repeat;
            border-bottom: 1px #5f594f solid;
            cursor: pointer;
            line-height: 32px;
            padding: 5px 5px 5px 5px;
            border-radius: @border_radius;
            -moz-border-radius: @border_radius;
            -webkit-border-radius: @border_radius;

            &.view-service {
                background-image: url(/juju-ui/assets/images/icons/icon_noshadow_view.png);
            }
            &.add-relation {
                background-image: url(/juju-ui/assets/images/icons/icon_noshadow_relation.png);
            }
            &.add-remove-units {
                background-image: url(/juju-ui/assets/images/icons/icon_noshadow_relation.png);
                color: gray;
                cursor: default;
                &:hover {
                    background-color: inherit;
                }
            }
            &.destroy-service {
                background-image: url(/juju-ui/assets/images/icons/icon_noshadow_destroy.png);
            }

            &:last-child {
                border-bottom: none;
            }
            &:hover {
                background-color: lighten(@background_color, 10%);
            }
        }

    }

    &#service-menu ul li {
        padding-left: 42px;
    }

}

charms.thumbnails.li { height:4em; }
.subordinate-rel-group {
    display: none;
    &.active {
        display: inline;
    }
}
.relation {
    stroke: #333333;
    stroke-width: 3px;
    &.error {
        stroke: #cc3333;
    }

    &.pending-relation {
        stroke: #faaf40;

        &.dragging {
            stroke: #fa6a40
        }
    }

    &.unused {
        visibility: hidden;
    }

    &.subordinate-relation {
        stroke: #3333cc;
    }
}
.rel-label {
    rect {
        stroke-width: 1px;
        stroke: #2c2c2c;
        fill: #eee;
    }

    tspan {
        text-anchor: middle;
        dominant-baseline: middle;
    }
}
.state-error { stroke: #FF0000; }
.state-started { stroke: #000000;}
.state-pending { stroke: #6597E8;}
div.state-error {
    @error-color: #c01c20;
    background-color: @error-color;
    color: #FFFFFF;
    &:hover {
        background-color: lighten(@error-color, 10%);
    }
}
div.state-started {
    @started-color: #d8d8d8;
    background-color: @started-color;
    &:hover {
        background-color: lighten(@started-color, 10%);
    }
}
div.state-pending {
    @pending-color: #fcd305;
    background-color: @pending-color;
    &:hover {
        background-color: lighten(@pending-color, 20%);
    }
}

.unit (@min_height: 20px, @border_radius:3px) {
    padding: 5px;
    -webkit-border-radius: @border_radius;
    -moz-border-radius: @border_radius;
    border-radius: @border_radius;
    margin-bottom: 0px;
    min-height: @min_height;
    cursor: pointer;
    .agent-state {
        display: none;
    }
}

ul#unit-large div.unit {
    .unit(40px);
}

ul#unit-medium div.unit {
    .unit;
}

ul#unit-small {
    margin-left: 0px;
    > li {
        margin-bottom: 5px;
        margin-left: 5px;
        > div.unit {
            .unit;
            width: 1.7em;
            text-align: center;
        }
    }
}

ul#unit-tiny {
    margin-left: 0px;
    > li {
        margin-bottom: 3px;
        margin-left: 3px;
        > div.unit {
            .unit(0px, 1px);
        }
    }
}

circle.mouse-down-indicator {
    stroke: #040404;
    stroke-width: 2px;
    fill: none;
}
g.service {
    fill: none;
    stroke: none;

    text {
        text-anchor: middle;
    }

    .charm-label {
        font-family: @font-family;
        font-style: italic;
        fill: #4c4c4c;
    }
    .name {
        font-family: @font-family;
        fill: #4c4c4c;
    }

   .unit-count {
        stroke-width: 0;
        text-anchor: middle;
        dominant-baseline: central;
        fill: rgba(0,0,0,0);
        font-family: @font-family;

        &.show-count {
            fill: rgba(0,0,0,1);}
        &.hide-count {
            fill: rgba(0,0,0,0);}
    }

    .sub-rel-count {
        text-anchor: middle;
        dominant_baseline: central;
        fill: #4f4f4f;
        font-family: @font-family;
        font-size: 1.2em;
    }

    .exposed-indicator {
        fill: #00F;

        &.off {
            visibility: hidden;
        }
        &.on {
            visibility: visible;
        }
    }

    .service-control-panel {
        visibility: hidden;

        &.active {
            visibility: visible;
        }

        image {
            cursor: pointer;
        }
    }
}
g.service-status {
    path {
        stroke-width: 0;
        fill: #fff;

        &.status-pending {
            fill: #fcd305;}
        &.status-good {
            fill: #b7b7b7;}
        &.status-error {
            fill: #c01c20;}
    }
}

g.unit {
    stroke-width: 0; font-weight: bold;
    font-family: @font-family; font-size: 1.2em; fill: #1626cf;

    .address {
    fill: #ffffff; font-size: 0.8em;}
    .unit-border {
    stroke-width: 2px; fill: #a0a0a0;}
}

/*
 * Notification system
 */
.notice {
    border-top: 1px solid #D0D0D0;
    padding: 1em 4px;
    margin: 1em 0 0 2px;
    cursor: pointer;

    .seen {
        background-color: rgba(222, 222, 222, 0.33);
    }

    &:first-child {
        border: none;
        padding-top: 0;
    }

    small {
        margin-left: 1em;
        font-size: 0.7em;
        color: #d0d0d0;
    }

    .header {
        background-color: #c0c0c0;
        font-size: 0.9em;
        margin: 0;
        padding: 0;
    }

    .error {
        background-color: rgba(255, 0, 0, 0.1);
    }
}

#service-footer {
    text-align: center;
    .footer-right {
        float: right;
    }
    .footer-left {
        float: left;
    }
    input {
        width: 3em;
        margin-bottom: 0;
    }
}

/*
 * Overview Module
 */
#overview {
    margin: 0;
    padding: 0;
    width: 100%;
}
#overview-tasks {
    background: url(/juju-ui/assets/images/bottom_bar.png) repeat-x;
    height: 50px;
    position: relative;
    color: #2d2d2d!important;

    .controls {
        position: absolute;
        top: 1px;
        left: 11px;
    }
    .destroy-control {
        position: absolute;
        top: 1px;
        right: 11px;
    }
}

.picker {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    height: 24px;
    &.graph-list-picker {
        width: 116px;
        .picker-body {
            width: 91px;
        }

        .picker-expanded {
            display: none;

            &.active {
                z-index: 100;
                display: block;
            }
            .picker-edge {
                display: block;
                top: auto;
                bottom: -10px;
                margin-left: -3px;
            }
            .picker-edge-right {
                left: auto;
                right: 0;
                margin-left: 0;
                margin-right: -3px;
            }
            .picker-list {
                position: absolute;
                bottom: -12px;
                left: 4px;
                height: 100%;
                background: url(/juju-ui/assets/images/view_1px.png) repeat-x;
                list-style-type: none;
                padding: 0;
                margin: 0;
                height: 54px;
                width: 108px;

                ul {
                    list-style-type: none;
                    padding: 0;
                    padding-top: 5px;
                    margin: 0;

                    li {
                        padding: 1px;

                        .activetick {
                            width: 12px;
                            height: 14px;
                            float: right;
                            background: url(/juju-ui/assets/images/selected_tick.png)
                                no-repeat
                                bottom left;
                        }
                    }
                }
            }
        }
    }
    &.zoom-picker {
        width: 56px;
        .picker-body {
            width: 36px;
        }
        /*#zoom-btn-up {
            position: absolute;
            top: 8px;
            right: 0px;
            opacity: 0;
            &.active {
                opacity: 1;
            }
        }
        #zoom-btn-down {
            position: absolute;
            bottom: -8px;
            right: 0px;
            opacity: 0;
            &.active {
                opacity: 1;
            }
        }*/
    }

    .picker-edge {
        position: absolute;
        top: 8px;
        left: 0;
    }
    .picker-body {
        position: absolute;
        top: 8px;
        left: 4px;
        background: url(/juju-ui/assets/images/picker_1px.png) repeat-x;
        height: 20px;
        padding: 3px 0 0 3px;
    }
    .picker-button {
        position: absolute;
        top: 8px;
        right: 0;
    }
    &.inactive {
        .picker-edge {
            display: none;
        }
        .picker-body {
            display: none;
        }
        .picker-button {
            display: none;
        }
    }
}

#unit-status {
    .running {
        color: green;
    }
    .pending {
        color: yellow;
    }
    .error {
        color: red;
    }
}

#relations {
    #unit-status;
    form {
        margin: 0;
    }
}

.yui3-panel {
    background: white;
    padding: 1.6em;
    border: solid black 2px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    outline: none;
    font-weight: normal;
    .yui3-widget-bd {
        margin-bottom: 1em;
    }
    .yui3-widget-buttons {
        float: right;
        .btn-danger {
            margin-right: 1em;
        }
    }
}

.yui3-widget-mask {
    background: black;
    opacity: 0.4;
}

.controls {
    .read-only {
        padding-top: 5px;
    }
}

.unit-button-palette {
    float: right;
}

.hidden {
    visibility: hidden;
}

#service-relations {
    .btn {
        float: right;
    }
}

#juju-search-charm-panel {
    display: block;
    padding-left: 0px;
    padding-right: 0px;
    z-index: 999;
    float: none;

    .charm-panel-configure .btn {
        float: right;
    }

    .button-colors(@top-color, @bottom-color, @shadow-color, @v-pos) {
    	//@shadow-color: blue;
        @blur: 2px;
        @gradient-start: @top-color;
	@gradient-end: @bottom-color;
        background-image: -ms-linear-gradient(top, @gradient-start, @gradient-end);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@gradient-start), to(@gradient-end));
        background-image: -webkit-linear-gradient(top, @gradient-start, @gradient-end);
        background-image: -o-linear-gradient(top, @gradient-start, @gradient-end);
        background-image: -moz-linear-gradient(top, @gradient-start, @gradient-end);
        background-image: linear-gradient(top, @gradient-start, @gradient-end);
        background-repeat: repeat-x;
	-moz-box-shadow: 0 (@v-pos + 3) @blur -@blur @shadow-color inset, 2px 0 3px -2px @shadow-color inset, -2px 0 3px -2px @shadow-color inset;
	-webkit-box-shadow: 0 (@v-pos + 3) @blur -@blur @shadow-color inset, 2px 0 3px -2px @shadow-color inset, -2px 0 3px -2px @shadow-color inset;
	box-shadow: 0 (@v-pos + 3) @blur -@blur @shadow-color inset, 2px 0 3px -2px @shadow-color inset, -2px 0 3px -2px @shadow-color inset;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: none;
    }

    .btn.deploy {
        margin-top: 5px;
        margin-left: 5px;
        vertical-align: middle;
        background-position: 0 0;     /* Needed to defeat bootstrap btn:hover 0 -15px*/
	.button-colors(@charm-panel-deploy-button-color, @charm-panel-deploy-button-bottom-gradient, @charm-panel-deploy-button-shadow, 0px);
        &:active {
   	    .button-colors(@charm-panel-deploy-button-color, @charm-panel-deploy-button-color, #8a2d0c, 1px);
	}
    }

    .charm-description btn.deploy {
       float: right;
    }
    .btn.cancel {
	color: white;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
        margin-top: 5px;
        background-repeat: no-repeat;
        background-color: transparent;
        vertical-align: middle;
        background-position: 0 0;     /* Needed to defeat bootstrap btn:hover 0 -15px*/
        background-image: url(/juju-ui/assets/images/cancel-button.png);
	.button-colors(@charm-panel-cancel-button-color, @charm-panel-cancel-button-bottom-gradient, @charm-panel-cancel-button-shadow, 0px);
        &:active {
  	  .button-colors(@charm-panel-cancel-button-color, @charm-panel-cancel-button-color, @charm-panel-cancel-button-shadow, 1px);
	}
    }
    .charm-panel-configure-buttons {
      border-bottom: 1px solid @charm-panel-separator-color;
      height: 52px;
      padding-left: 8px;
      .btn {
          margin-top: 12px;
      }
    }
    .search-charm-inner {
        width: 100%;
        height: 500px;
    }
    @popover-height: 607px;
    .popover-content {
        padding: 0px;
        height: @popover-height;
    }
    .charm-nav-back {
        background-color: black;
        text-transform: uppercase;
        color: white;
        font-weight: bold;
        cursor: pointer;
    }
    .charm-panel {
        h3 {
            text-transform: capitalize;
            color: blue;
            font-weight: bold;
            margin-top: 1ex;
            margin-bottom: 1ex;
        }
        h4 {
            text-transform: uppercase;
            border-bottom: 1px dotted black;
            cursor: pointer;
            margin-top: 1ex;
            margin-bottom: 1ex;
        }
        h5 {
            margin-top: 1ex;
            &:first-child {
                margin-top: 0;
            }
        }
        height: 432px;
        overflow-y: auto;
        overflow-x: hidden;
        .collapsible {
            overflow: hidden;
        }
        &.charm-description {
            padding: 1ex 1em;
            .charm-section {
                .commitmessage {
                    padding-top: 0.8ex;
                    padding-left: 1em;
                    font-style: italic;
                    white-space: pre-wrap;
                }
            }
        }
        &.config-variant {
            padding: 1ex 1em;

            .control-group {
                width: auto;
                margin-bottom: 0;
                margin-top: 1ex;
                padding-bottom: 0;
                clear: both;
            }
            .control-description {
                display: none;
            }
            .control-label {
                width: auto;
                margin-bottom: 1ex;
                float: left;
            }
            .control-label:after {
                content: ":";
            }
            .controls {
                margin-left: auto;
                margin-right: 0;
            }
            .controls.boolean {
                input {
                    margin-left: 1ex;
                    margin-top: 0.7ex;
                }
            }
            .btn {
                 margin-top: 5px;
            }
        }
    }
    .search-result-div {
        height: @popover-height;
        overflow-y:auto;
        overflow-x:hidden;
        .series-charms {
            border-top: 4px solid #D0D0D0;
            margin-top: 8px;
            margin-bottom: 4px;
            &:first-child {
                border: none;
                margin-top: 0;
            }
            h3 {
                font-weight: bold;
                text-transform: uppercase;
                font-size: 11px;
            }
            .charm-entry {
                border-top: 1px solid #D0D0D0;
                padding: 0.5em 4px;
                padding-bottom: 4px;
                margin: 0.2em 0 0 2px;
                &:first-child {
                    border: none;
                    padding-top: 0;
                }
                .charm-summary {
                    margin-bottom: 4px;
                }
                a.charm-detail {
                    font-weight: bold;
                }
                .btn {
                    float: right;
                    opacity: 0;
                }
            }
        }
    }
}

table tr.highlighted {
   background: pink;
}

#destroy-service {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

.service-view {
    .juju-service-info-container-bottom-menu {
        background: url(/juju-ui/assets/images/bottom_bar.png) repeat-x;
        height: 50px;
        position: relative;
        color: #2d2d2d!important;

        .destroy-control {
            position: absolute;
            top: 1px;
            left: 10px;

            a {
                color: #2D2D2D!important;
            }

            a:link, a:visited, a:active, a:hover {
                text-decoration: none
            }
        }
    }

    .filter-control {
        position: absolute;
        left: 120px;
        top: 10px;

        span:first-child {
            padding-right: 5px;
        }
    }

    .service-header-partial {
      .name {
          padding-top: 38px;
          padding-left: 46px;
          height: 73px;

          div:nth-child(1) {
              font-style: normal;
              height: 28px;
              font-size: 24px;
              color: #292929;
          }

          div:nth-child(2) {
              font-style: italic;
              font-size: 16px;
              color: #6a737b;
          }
        }

        .menu-items {
            height: 26px;
            padding-top: 2px;
            padding-left: 38px;
            background: url(/juju-ui/assets/images/tab_div.png) repeat;

            .item {
                a {
                     font-size: 12px;
                     padding-left: 10px;
                     padding-right: 10px;
                     color: #292929;
                }
                a:link, a:visited, a:active, a:hover {
                     text-decoration: none
                }

                .link-active {
                    color: #dd4814 !important;
                }
                .active {
                     margin-top: 3px;
                     height: 4px;
                     background: url(/juju-ui/assets/images/tab_marker.png)
                       repeat;
                }
            }
        }
    }

    .service-common-controls {
        position: absolute;
        right: 10px;
        top: 10px;

        .control-unit-count {
            position: absolute;
            right: 120px;
            top: 0px;
            width: 305px;

            img {
                padding-top: 0px;
            }

            div {
                padding-left: 5px;
            }

            div:first-child {
                padding-top: 4px;
            }
        }

        .control-expose {
            position: absolute;
            right: 0px;
            top: 4px;
            width: 120px;

            div {
                padding-left: 5px;
            }

            .on {
                font-size: 12px; fill: #ffffff;
                position: absolute;
                right: 20px;
                top: 3px;
            }

            .off {
                font-size: 12px; fill: #292929;
                position: absolute;
                right: 40px;
                top: 3px;
            }
          }
    }
}

div.inline {
  float: left;
}

#tooltip {
    text-align: left;
    background-color: white;
    border: solid 1px black;
    padding: 0.2em 0.5em 0.3em;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    min-width: 20px;
    max-width: 400px;
}

.charm-panel-configure {
  background-image: url(/juju-ui/assets/images/configure-cog.png);
  background-repeat: no-repeat;
  background-position: 230px 42px;
  border-top: 2px solid #dd4814;
  background-color: #2F2A27;
  height: 93px;
  padding-left: 8px;
  .title {
    font-weight: lighter;
    font-size: 22px;
    color: @charm-panel-configure-title-color;
    margin-top: 35px;
  }
  .name {
    font-size: 12px;
    color: @charm-panel-configure-name-color;
    margin-top: 5px;
  }
}

/* Processed with LESS from lib/views/stylesheet.less */
@font-family: 'Ubuntu', 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* Define common colors. */
@label-color: #292929;
@text-entry-color: #6d6e70;
@charm-panel-configure-title-color: #eee7d5;
@charm-panel-configure-name-color: #8f8f88;
@charm-panel-deploy-button-color: #e45718;
@charm-panel-cancel-button-color: #979694;
@charm-panel-separator-color: #aeaeae;

body {
    margin-top: 87px;
    background-color: #302b28;
    font-family: @font-family;
}

#viewport-wrapper {
    position: relative;
    width: 85%;
    margin: 0 auto;
    padding: 0 12px;
    min-width: 960px;
}

#vp-left-border {
    position: absolute;
    top: 0;
    left: 0;
    background: url(/juju-ui/assets/images/left_shadow.png) repeat-y;
    margin-left: -12px;
    width: 12px;
}

#vp-right-border {
    position: absolute;
    top: 0;
    right: 0;
    background: url(/juju-ui/assets/images/right_shadow.png) repeat-y;
    margin-right: -12px;
    width: 12px;
}

.view-container {
  overflow: auto;
  padding: 10px;
}

.navbar {
    margin-top: -87px;
    margin-bottom: 0;
    height: 87px;
    min-width: 800px;
    background: url(/juju-ui/assets/images/top_bar.png) repeat-x;
    padding: 0;
    position: relative;
    color: #2d2d2d!important;
    .brand {
        margin: 12px 26px 6px 10px;
        padding: 0;
    }
    > div {
        padding: 0;
        .nav-container {
            display: inline-block;
            height: 44px;
            margin: 2px 0 0 0;
            padding: 20px 0 4px;
            &#charm-search-trigger-container {
                width: 292px;
                white-space: nowrap;
            }
            .nav-section {
                border-left: 1px solid lightgray;
                display: inline-block;
                padding: 4px 10px;
                #charm-search-trigger {
                    cursor: pointer;
                }
                .btn {
                    margin: 0 5px;
                }
                input {
                    width: 128px;
                    background: url(/juju-ui/assets/images/searchbox_icon.png) no-repeat 2px 1px whiteSmoke;
                    margin: 0 10px;
                    padding: 3px 3px 3px 26px;
                    font-style: italic;
                    font-family: @font-family;
                    font-size: 0.9em;
                    &:focus {
                        background: white;
                        padding: 3px;
                        width: 151px;
                        font-style: normal;
                        font-size: 1em;
                    }
                }

            }
        }
        span:first-child .nav-section {
            border-left: none;
            padding: 0 6px;
        }
        &#nav-alerts-charms {
            float: right;
            .nav-container:first-child .nav-section {
                position: relative;
            }
        }
        &#nav-brand-env .nav-container {
            float: left;
            .provider-type {
                font-size: 0.7em;
            }
        }
    }
}

#content {
    position: relative;
    background-color: #fff;
    width: 100%;
}

#main {

}

#overview {

}

.divider {
    padding: 5px;
}

svg {
    stroke-width: 0;
}

.crosshatch-background {
    background: url(/juju-ui/assets/images/pattern_tile.png) repeat;
}

#canvas {
    position: relative;
}

.environment-menu {
    @border_radius: 20px;
    @background_color: #282421;

    display: none;
    background-color: @background_color;
    color: #fdf6e3;

    border-radius: @border_radius;
    -moz-border-radius: @border_radius;
    -webkit-border-radius: @border_radius;

    box-shadow: -2px 4px 4px 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: -2px 4px 4px 0 rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: -2px 4px 4px 0 rgba(0, 0, 0, 0.5);

    top: 0;
    left: 0;
    position: absolute;

    &.active {
        display: block;
    }

    .triangle {
        position: absolute;
        top: 62px;
        width: 12px;
        line-height: 21px;
        background-repeat: no-repeat;
    }
    &.left .triangle {
        right: -12px;
        background-image: url(/juju-ui/assets/images/icons/icon_shadow_triangle_right.png);
    }
    &.right .triangle {
        left: -12px;
        background-image: url(/juju-ui/assets/images/icons/icon_shadow_triangle.png);
    }

    .menu-title {
        margin: 10px;
    }

    .cancel {
        margin: 10px;
        float: right;
    }

    ul {
        margin: 10px;
        list-style-type: none;
        li {
            background-position: 5px center;
            background-repeat: no-repeat;
            border-bottom: 1px #5f594f solid;
            cursor: pointer;
            line-height: 32px;
            padding: 5px 5px 5px 5px;
            border-radius: @border_radius;
            -moz-border-radius: @border_radius;
            -webkit-border-radius: @border_radius;

            &.view-service {
                background-image: url(/juju-ui/assets/images/icons/icon_noshadow_view.png);
            }
            &.add-relation {
                background-image: url(/juju-ui/assets/images/icons/icon_noshadow_relation.png);
            }
            &.add-remove-units {
                background-image: url(/juju-ui/assets/images/icons/icon_noshadow_relation.png);
                color: gray;
                cursor: default;
                &:hover {
                    background-color: inherit;
                }
            }
            &.destroy-service {
                background-image: url(/juju-ui/assets/images/icons/icon_noshadow_destroy.png);
            }

            &:last-child {
                border-bottom: none;
            }
            &:hover {
                background-color: lighten(@background_color, 10%);
            }
        }

    }

    &#service-menu ul li {
        padding-left: 42px;
    }

}

charms.thumbnails.li { height:4em; }
.subordinate-rel-group {
    display: none;
    &.active {
        display: inline;
    }
}
.relation {
    stroke: #333333;
    stroke-width: 3px;
    &.error {
        stroke: #cc3333;
    }

    &.pending-relation {
        stroke: #faaf40;

        &.dragging {
            stroke: #fa6a40
        }
    }

    &.unused {
        visibility: hidden;
    }

    &.subordinate-relation {
        stroke: #3333cc;
    }
}
.rel-label {
    rect {
        stroke-width: 1px;
        stroke: #2c2c2c;
        fill: #eee;
    }

    tspan {
        text-anchor: middle;
        dominant-baseline: middle;
    }
}
.state-error { stroke: #FF0000; }
.state-started { stroke: #000000;}
.state-pending { stroke: #6597E8;}
div.state-error {
    @error-color: #c01c20;
    background-color: @error-color;
    color: #FFFFFF;
    &:hover {
        background-color: lighten(@error-color, 10%);
    }
}
div.state-started {
    @started-color: #d8d8d8;
    background-color: @started-color;
    &:hover {
        background-color: lighten(@started-color, 10%);
    }
}
div.state-pending {
    @pending-color: #fcd305;
    background-color: @pending-color;
    &:hover {
        background-color: lighten(@pending-color, 20%);
    }
}

.unit (@min_height: 20px, @border_radius:3px) {
    padding: 5px;
    -webkit-border-radius: @border_radius;
    -moz-border-radius: @border_radius;
    border-radius: @border_radius;
    margin-bottom: 0px;
    min-height: @min_height;
    cursor: pointer;
    .agent-state {
        display: none;
    }
}

ul#unit-large div.unit {
    .unit(40px);
}

ul#unit-medium div.unit {
    .unit;
}

ul#unit-small {
    margin-left: 0px;
    > li {
        margin-bottom: 5px;
        margin-left: 5px;
        > div.unit {
            .unit;
            width: 1.7em;
            text-align: center;
        }
    }
}

ul#unit-tiny {
    margin-left: 0px;
    > li {
        margin-bottom: 3px;
        margin-left: 3px;
        > div.unit {
            .unit(0px, 1px);
        }
    }
}

circle.mouse-down-indicator {
    stroke: #040404;
    stroke-width: 2px;
    fill: none;
}
g.service {
    fill: none;
    stroke: none;

    text {
        text-anchor: middle;
    }

    .charm-label {
        font-family: @font-family;
        font-style: italic;
        fill: #4c4c4c;
    }
    .name {
        font-family: @font-family;
        fill: #4c4c4c;
    }

   .unit-count {
        stroke-width: 0;
        text-anchor: middle;
        dominant-baseline: central;
        fill: rgba(0,0,0,0);
        font-family: @font-family;

        &.show-count {
            fill: rgba(0,0,0,1);}
        &.hide-count {
            fill: rgba(0,0,0,0);}
    }

    .sub-rel-count {
        text-anchor: middle;
        dominant_baseline: central;
        fill: #4f4f4f;
        font-family: @font-family;
        font-size: 1.2em;
    }

    .exposed-indicator {
        fill: #00F;

        &.off {
            visibility: hidden;
        }
        &.on {
            visibility: visible;
        }
    }

    .service-control-panel {
        visibility: hidden;

        &.active {
            visibility: visible;
        }

        image {
            cursor: pointer;
        }
    }
}
g.service-status {
    path {
        stroke-width: 0;
        fill: #fff;

        &.status-pending {
            fill: #fcd305;}
        &.status-good {
            fill: #b7b7b7;}
        &.status-error {
            fill: #c01c20;}
    }
}

g.unit {
    stroke-width: 0; font-weight: bold;
    font-family: @font-family; font-size: 1.2em; fill: #1626cf;

    .address {
    fill: #ffffff; font-size: 0.8em;}
    .unit-border {
    stroke-width: 2px; fill: #a0a0a0;}
}

/*
 * Notification system
 */
.notice {
    border-top: 1px solid #D0D0D0;
    padding: 1em 4px;
    margin: 1em 0 0 2px;
    cursor: pointer;

    .seen {
        background-color: rgba(222, 222, 222, 0.33);
    }

    &:first-child {
        border: none;
        padding-top: 0;
    }

    small {
        margin-left: 1em;
        font-size: 0.7em;
        color: #d0d0d0;
    }

    .header {
        background-color: #c0c0c0;
        font-size: 0.9em;
        margin: 0;
        padding: 0;
    }

    .error {
        background-color: rgba(255, 0, 0, 0.1);
    }
}

#service-footer {
    text-align: center;
    .footer-right {
        float: right;
    }
    .footer-left {
        float: left;
    }
    input {
        width: 3em;
        margin-bottom: 0;
    }
}

/*
 * Overview Module
 */
#overview {
    margin: 0;
    padding: 0;
    width: 100%;
}
#overview-tasks {
    background: url(/juju-ui/assets/images/bottom_bar.png) repeat-x;
    height: 50px;
    position: relative;
    color: #2d2d2d!important;

    .controls {
        position: absolute;
        top: 1px;
        left: 11px;
    }
    .destroy-control {
        position: absolute;
        top: 1px;
        right: 11px;
    }
}

.picker {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    height: 24px;
    &.graph-list-picker {
        width: 116px;
        .picker-body {
            width: 91px;
        }

        .picker-expanded {
            display: none;

            &.active {
                z-index: 100;
                display: block;
            }
            .picker-edge {
                display: block;
                top: auto;
                bottom: -10px;
                margin-left: -3px;
            }
            .picker-edge-right {
                left: auto;
                right: 0;
                margin-left: 0;
                margin-right: -3px;
            }
            .picker-list {
                position: absolute;
                bottom: -12px;
                left: 4px;
                height: 100%;
                background: url(/juju-ui/assets/images/view_1px.png) repeat-x;
                list-style-type: none;
                padding: 0;
                margin: 0;
                height: 54px;
                width: 108px;

                ul {
                    list-style-type: none;
                    padding: 0;
                    padding-top: 5px;
                    margin: 0;

                    li {
                        padding: 1px;

                        .activetick {
                            width: 12px;
                            height: 14px;
                            float: right;
                            background: url(/juju-ui/assets/images/selected_tick.png)
                                no-repeat
                                bottom left;
                        }
                    }
                }
            }
        }
    }
    &.zoom-picker {
        width: 56px;
        .picker-body {
            width: 36px;
        }
        /*#zoom-btn-up {
            position: absolute;
            top: 8px;
            right: 0px;
            opacity: 0;
            &.active {
                opacity: 1;
            }
        }
        #zoom-btn-down {
            position: absolute;
            bottom: -8px;
            right: 0px;
            opacity: 0;
            &.active {
                opacity: 1;
            }
        }*/
    }

    .picker-edge {
        position: absolute;
        top: 8px;
        left: 0;
    }
    .picker-body {
        position: absolute;
        top: 8px;
        left: 4px;
        background: url(/juju-ui/assets/images/picker_1px.png) repeat-x;
        height: 20px;
        padding: 3px 0 0 3px;
    }
    .picker-button {
        position: absolute;
        top: 8px;
        right: 0;
    }
    &.inactive {
        .picker-edge {
            display: none;
        }
        .picker-body {
            display: none;
        }
        .picker-button {
            display: none;
        }
    }
}

#unit-status {
    .running {
        color: green;
    }
    .pending {
        color: yellow;
    }
    .error {
        color: red;
    }
}

#relations {
    #unit-status;
    form {
        margin: 0;
    }
}

.yui3-panel {
    background: white;
    padding: 1.6em;
    border: solid black 2px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    outline: none;
    font-weight: normal;
    .yui3-widget-bd {
        margin-bottom: 1em;
    }
    .yui3-widget-buttons {
        float: right;
        .btn-danger {
            margin-right: 1em;
        }
    }
}

.yui3-widget-mask {
    background: black;
    opacity: 0.4;
}

.controls {
    .read-only {
        padding-top: 5px;
    }
}

.unit-button-palette {
    float: right;
}

.hidden {
    visibility: hidden;
}

#service-relations {
    .btn {
        float: right;
    }
}

#juju-search-charm-panel {
    display: block;
    padding-left: 0px;
    padding-right: 0px;
    z-index: 999;
    float: none;

    .charm-panel-configure .btn {
        float: right;
    }

    .button-colors(@color) {
        @gradient-start: lighten(@color, 5%);
	@gradient-end: darken(@color, 5%);
        background-image: -ms-linear-gradient(top, @gradient-start, @gradient-end);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@gradient-start), to(@gradient-end));
        background-image: -webkit-linear-gradient(top, @gradient-start, @gradient-end);
        background-image: -o-linear-gradient(top, @gradient-start, @gradient-end);
        background-image: -moz-linear-gradient(top, @gradient-start, @gradient-end);
        background-image: linear-gradient(top, @gradient-start, @gradient-end);
        background-repeat: repeat-x;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    }
    .btn.deploy {
        margin-top: 5px;
        margin-left: 5px;
        vertical-align: middle;
        background-position: 0 0;     /* Needed to defeat bootstrap btn:hover 0 -15px*/
	.button-colors(@charm-panel-deploy-button-color);
        &, &:hover, &:active, &.active, &.disabled, &[disabled] {
          background-color: @charm-panel-deploy-button-color;
	}
    }
    .charm-description btn.deploy {
       float: right;
    }
    .btn.cancel {
        margin-top: 5px;
        background-repeat: no-repeat;
        background-color: transparent;
        vertical-align: middle;
        background-position: 0 0;     /* Needed to defeat bootstrap btn:hover 0 -15px*/
        background-image: url(/juju-ui/assets/images/cancel-button.png);
	.button-colors(@charm-panel-cancel-button-color);
        &, &:hover, &:active, &.active, &.disabled, &[disabled] {
          background-color: @charm-panel-cancel-button-color;
	}
    }
    .charm-panel-configure-buttons {
      border-bottom: 1px solid @charm-panel-separator-color;
      height: 52px;
      padding-left: 8px;
      .btn {
          margin-top: 12px;
      }
    }
    .search-charm-inner {
        width: 100%;
        height: 500px;
    }
    @popover-height: 607px;
    .popover-content {
        padding: 0px;
        height: @popover-height;
    }
    .charm-nav-back {
        background-color: black;
        text-transform: uppercase;
        color: white;
        font-weight: bold;
        cursor: pointer;
    }
    .charm-panel {
        h3 {
            text-transform: capitalize;
            color: blue;
            font-weight: bold;
            margin-top: 1ex;
            margin-bottom: 1ex;
        }
        h4 {
            text-transform: uppercase;
            border-bottom: 1px dotted black;
            cursor: pointer;
            margin-top: 1ex;
            margin-bottom: 1ex;
        }
        h5 {
            margin-top: 1ex;
            &:first-child {
                margin-top: 0;
            }
        }
        height: 432px;
        overflow-y: auto;
        overflow-x: hidden;
        .collapsible {
            overflow: hidden;
        }
        &.charm-description {
            padding: 1ex 1em;
            .charm-section {
                .commitmessage {
                    padding-top: 0.8ex;
                    padding-left: 1em;
                    font-style: italic;
                    white-space: pre-wrap;
                }
            }
        }
        &.config-variant {
            padding: 1ex 1em;

            .control-group {
                width: auto;
                margin-bottom: 0;
                margin-top: 1ex;
                padding-bottom: 0;
                clear: both;
            }
            .control-description {
                display: none;
            }
            .control-label {
                width: auto;
                margin-bottom: 1ex;
                float: left;
            }
            .control-label:after {
                content: ":";
            }
            .controls {
                margin-left: auto;
                margin-right: 0;
            }
            .controls.boolean {
                input {
                    margin-left: 1ex;
                    margin-top: 0.7ex;
                }
            }
            .btn {
                 margin-top: 5px;
            }
        }
    }
    .search-result-div {
        height: @popover-height;
        overflow-y:auto;
        overflow-x:hidden;
        .series-charms {
            border-top: 4px solid #D0D0D0;
            margin-top: 8px;
            margin-bottom: 4px;
            &:first-child {
                border: none;
                margin-top: 0;
            }
            h3 {
                font-weight: bold;
                text-transform: uppercase;
                font-size: 11px;
            }
            .charm-entry {
                border-top: 1px solid #D0D0D0;
                padding: 0.5em 4px;
                padding-bottom: 4px;
                margin: 0.2em 0 0 2px;
                &:first-child {
                    border: none;
                    padding-top: 0;
                }
                .charm-summary {
                    margin-bottom: 4px;
                }
                a.charm-detail {
                    font-weight: bold;
                }
                .btn {
                    float: right;
                    opacity: 0;
                }
            }
        }
    }
}

table tr.highlighted {
   background: pink;
}

#destroy-service {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

.service-view {
    .juju-service-info-container-bottom-menu {
        background: url(/juju-ui/assets/images/bottom_bar.png) repeat-x;
        height: 50px;
        position: relative;
        color: #2d2d2d!important;

        .destroy-control {
            position: absolute;
            top: 1px;
            left: 10px;

            a {
                color: #2D2D2D!important;
            }

            a:link, a:visited, a:active, a:hover {
                text-decoration: none
            }
        }
    }

    .filter-control {
        position: absolute;
        left: 120px;
        top: 10px;

        span:first-child {
            padding-right: 5px;
        }
    }

    .service-header-partial {
      .name {
          padding-top: 38px;
          padding-left: 46px;
          height: 73px;

          div:nth-child(1) {
              font-style: normal;
              height: 28px;
              font-size: 24px;
              color: #292929;
          }

          div:nth-child(2) {
              font-style: italic;
              font-size: 16px;
              color: #6a737b;
          }
        }

        .menu-items {
            height: 26px;
            padding-top: 2px;
            padding-left: 38px;
            background: url(/juju-ui/assets/images/tab_div.png) repeat;

            .item {
                a {
                     font-size: 12px;
                     padding-left: 10px;
                     padding-right: 10px;
                     color: #292929;
                }
                a:link, a:visited, a:active, a:hover {
                     text-decoration: none
                }

                .link-active {
                    color: #dd4814 !important;
                }
                .active {
                     margin-top: 3px;
                     height: 4px;
                     background: url(/juju-ui/assets/images/tab_marker.png)
                       repeat;
                }
            }
        }
    }

    .service-common-controls {
        position: absolute;
        right: 10px;
        top: 10px;

        .control-unit-count {
            position: absolute;
            right: 120px;
            top: 0px;
            width: 305px;

            img {
                padding-top: 0px;
            }

            div {
                padding-left: 5px;
            }

            div:first-child {
                padding-top: 4px;
            }
        }

        .control-expose {
            position: absolute;
            right: 0px;
            top: 4px;
            width: 120px;

            div {
                padding-left: 5px;
            }

            .on {
                font-size: 12px; fill: #ffffff;
                position: absolute;
                right: 20px;
                top: 3px;
            }

            .off {
                font-size: 12px; fill: #292929;
                position: absolute;
                right: 40px;
                top: 3px;
            }
          }
    }
}

div.inline {
  float: left;
}

#tooltip {
    text-align: left;
    background-color: white;
    border: solid 1px black;
    padding: 0.2em 0.5em 0.3em;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    min-width: 20px;
    max-width: 400px;
}

.charm-panel-configure {
  background-image: url(/juju-ui/assets/images/configure-cog.png);
  background-repeat: no-repeat;
  background-position: 230px 42px;
  border-top: 2px solid #dd4814;
  background-color: #2F2A27;
  height: 93px;
  padding-left: 8px;
  .title {
    font-weight: lighter;
    font-size: 22px;
    color: @charm-panel-configure-title-color;
    margin-top: 35px;
  }
  .name {
    font-size: 12px;
    color: @charm-panel-configure-name-color;
    margin-top: 5px;
  }
}


Tweak margins in topmenu

Tweak margins in topmenu

fatal: unable to access 'https://github.com/Quinten/supernapietheme.git/': The requested URL returned error: 403


sepreate page-contents(override)

sepreate page-contents(override)

//
// Page Contents
// --------------------------

.page-contents {
  padding-top: 20px;
  padding-bottom: 40px;

  @media (max-width: @screen-xs-max) {
    [class*="col-"] {
      clear: both;
      padding-bottom: 40px;
    }
  }
}

error: pathspec 'less/_page-contents.less' did not match any file(s) known to git


Send To Permalink and Send To Citation er visible now (post details)

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Det-Kongelige-Bibliotek/rex.git/'