// LESS variables
@rbcf_color: #b23e4b;
@rbcf_opposite_color: #ffffff;


/* Global Properties */

* {
	margin: 0;
	padding: 0;
}

html {
	position: relative;
  	min-height: 100%;
}
	
#footer {
	padding: 7px 0;
	font-size: 11px;
	text-align: center;
	position: absolute;
	bottom: 0;
	width: 100%;
}


/* CSS for low resolutions */
@media(max-width: 799px) {
	
	#rbcf-wa-content {
		display: none;
	}
	
	#resolution-notice > p {
		font-size: 16px;
		text-align: center;
		margin-top: 28px;
	}
}


/* Usual CSS */
@media(min-width: 800px) {
	
	#resolution-notice {
		display: none;
	}

	a:hover, a:active, a:focus, a:visited {
	    outline: none;
	    border: 0;
	    background-color: white;
	}
	
	h3 {
		font-weight: bold;
	 	font-size: 16px;
	}
	
	.button {
		display: inline-block;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		border: solid #d5dce0 1px;
		box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
		padding: 6px 19px;
	}
	
	.btn-rbcf {
		background-color: @rbcf_color;
		color: @rbcf_opposite_color;
	}
	
	.btn-rbcf:hover {
		text-decoration: underline;
		color: @rbcf_opposite_color;
	}
	
	.r-red {
		color: @rbcf_color;
	}

	img.spinner {
		padding-left: 40px;
	}

	span.formatted {
		white-space: pre-wrap;
	}

	.right-margin {
		margin-right: 7px;
	}

	ul.nice-list {
		list-style-type: none !important;
		margin-left: 30px;
		margin-top: 4px;
	}

	.hovered-line:hover {
		background-color: #f6f6f0;
	}

	.cursor {
		cursor: pointer;
	}
	
	/* Top of the Pages */
	
	#header-img {
		height: 90px;
		margin: 8px 0 0 10px;
		padding: 0 34px 14px 18px;
		border-bottom: solid black 3px;
		cursor: pointer;
	}
	
	.navbar-rbcf {
		margin: 0 0 28px 0;
		padding-right: 24px;
	}
	
	.navbar-rbcf > div {
		position: absolute;
		top: 2px;
		right: 24px;
	}
	
	.navbar-rbcf span {
		background-color: white;
		color: #000000;
	}
	
	ul.navbar-nav > li.underlined:hover {
		border-bottom: solid @rbcf_color 2px;
		text-decoration: none;
	}
	
	.nav > li > a:focus {
		background-color: #fff !important;
	}
	
	input#search-bar {
		display: none;
		width: 200px;
		padding: 2px 4px;
		margin-top: 12px;
		border-radius: 4px;
		outline: none;
	}
	
	/* Left Menu */
	
	.menu {
		position: fixed;
		left: 22px;
		width: 180px;
		margin-top: -6px;
	}
	
	.menu li {
		color: black;
	}
	
	.menu > ul {
		list-style: none;
	}
	
	.menu > ul > li > a {
		position: relative;
		display: block;
		padding: 7px 0 7px 10px;
	}
	
	.menu li:hover {
		color: @rbcf_color;
	}
	
	.menu a, .menu a:active, .menu a:hover {
		color: inherit;
		text-decoration: none;
	}
	
	.menu a:hover {
		background-color: @rbcf_opposite_color;
	}
	
	.menu li.active {
		font-weight: bold;
		color: @rbcf_color;
	}
	
	/* Other Pages */
	
	.content {
		margin: 0 20px 4em 20px;
	}
	
	.short-content {
		margin-left: 260px;
	}
	
	.content > p {
		margin-bottom: 32px;
	}
	
	.content a, .content a:hover {
		color: @rbcf_color;
	}
	
	.content h1 {
		font-size: 2.4em;
		font-weight: bold;
	}
	
	.content h2 {
		font-size: 1.7em;
		font-weight: bold;
		margin-top: 20px;
	}
	
	 a.welcome {
	 	font-size: 14px;
	 	font-weight: bold;
	 }
	
	/* Blocks */
	
	/* The block for a root instance. */
	div.block {
		border-radius: 10px;
		border: solid @rbcf_color 1px;
		box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
		margin-bottom: 24px;
		margin-top: -3px;
	}
	
	.block-faded {
		opacity: 0.4;
		transition: opacity 1s;
	}
	
	div.block p {
		margin: 0;
	}
	
	/* The name of a root instance's block */
	
	p.block-title {
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		background-color: @rbcf_color;
		color: @rbcf_opposite_color;
		font-weight: bold;
		padding: 6px 0 6px 18px;
	}
	
	p.block-title:hover {
		text-decoration: underline;
	}
	
	p.block-title > a {
		color: @rbcf_opposite_color;
		font-weight: bold;
	}
	
	p.block-title > a:hover {
		background-color: @rbcf_color;
		color: @rbcf_opposite_color;
	}
	
	div.block-content > p {
		margin-bottom: 16px;
	}
	
	span.block-annotation {
		display: inline-block;
		float: right;
		padding-right: 24px;
		font-weight: bold;
	}
	
	span.block-annotation:hover {
		cursor: pointer;
	}
	
	/* The content for blocks */
	
	div.block-content {
		padding: 14px 14px 0 14px;
	}
	
	
	/* app.html */
	
	/* Nested instances rely on lists. */
	.instances ul {
		list-style-type: none;
		margin: 0;
		padding: 0 0 0 30px;
	}
	
	/* The first list leaves space below. */
	.instances > ul {
		padding-bottom: 11px;
	}
	
	/* The lists have a left border. */
	.instances > ul ul:before {
		content: "";
		display: block;
		width: 0;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		border-left: 2px @rbcf_color solid;
	}
	
	/* Put list items in relative position. */
	.instances ul li {
		padding: 0 0 0 16px;
		font-size: 14px;
		line-height: 20px;
		position: relative;
	}
	
	/* List items have a top border. */
	.instances ul li:before {
		content: "";
		display: block;
		width: 12px; /* same with indentation */
		height: 0;
		border-top: 2px @rbcf_color solid;
		position: absolute;
		top: 14px;
		left: 0;
	}
	
	/* The FIRST list item (call it the main root) has a more important padding top (branch tree). */
	.instances > ul > li:first-child:before {
		top: 25px !important;
	}
	
	/* The last item in a list hides the left border (smooth effect). */
	.instances ul li:last-child:before {
		height:auto;
		top: 16px; /* (line-height/2) */
		bottom: 0;
		background: white;
		z-index: 11;
	}
	
	/* The FIRST list item has a more important padding top. */
	.instances > ul > li:first-child {
		padding-top: 10px;
	}
	
	/* Define the padding of list items. */
	.instances ul li p {
		padding: 6px 0 6px 7px;
	}
	
	/* Hover list items */
	.instances ul li.listing p:hover {
		color: @rbcf_color;
		cursor: pointer;
	}
	
	/* Selected instance */
	.instances ul > li.selected > p {
		color: @rbcf_color;
	}
	
	.editor-actions {
		padding-right: 16px !important;
	}
	
	.editor-actions > span:hover {
		cursor: pointer;
		color: @rbcf_color;
	}
	
	
	/* Uploads */
	
	#upload-result {
		margin-bottom: 0;
	}
	
	#upload-result-details {
		margin-top: 0;
		display: none;
	}
	
	#upload-result-details > ul {
		margin: 6px 0 0 36px;
	}

	/* Applications */

	span.r-help {
		font-style: italic;
		font-weight: normal;
	}
	
	option {
		padding: 0 4px 1px;
	}
	
	.error-msg {
		padding: 8px 12px;
	}
	
	.css-form input.ng-invalid.ng-touched {
		background-color: #FA787E;
	}
	
	.css-form input.ng-valid.ng-touched {
		background-color: #78FA89;
	}
	
	/* Master-Details */

	#right-block {
		float: left;
		width: 47%;
		border-radius: 10px;
		border: solid @rbcf_color 1px;
		padding: 16px;
		margin-left: 16px;
		margin-top: -3px;
		
		visibility: hidden;
		opacity: 0;
		transition: opacity 1s;
		
		/*
			We use the position to prevent scroll bars from appearing when this block is not visible.
			The position is restored to static when the block is made visible (handled in our Angular code).
		 */
		position: absolute;
	}
	
	#right-block h3 {
	 	text-align: center;
	 	margin-top: 3px;
	}
	
	#right-block > .block-controls {
		float: right;
		margin: -4px 0 0 0;
		padding: 0;
	}
	
	#right-block > ul {
		margin-left: 50px;
		margin-top: 6px;
	}
	
	.single-details {
		margin: 0 0 18px 50px;
	}
	
	.single-details > ul {
		margin-left: 50px;
		margin-top: 2px;
	}
	
	#single-block p.avatar {
		float: left;
	}
	
	#left-block {
		float: left;
		width: 100%;
		-webkit-transition: width 0.6s; /* Safari */
	    transition: width 0.6s;
	}

	/* Settings.html */

	input.form-control {
		display: inline;
	}
	
	#prefs-save-btn {
		padding-top: 8px;
		padding-bottom: 5px;
		margin-left: 4px;
	}
	
	#rprefs-ok {
		color: green;
		padding-left: 4px;
	}

	/* Instances */

	.instance-actions > img {
		max-width: 98%;
	}
	
	.instance-actions > p {
		margin-top: 18px;
	}
	
	.instance-actions > ul {
		margin: 6px 0 0 36px;
	}
	
	/* Application Bindings */
	
	label > input[type="checkbox"] {
		margin-top: 1px;
	}

	span.checkbox-text {
		padding-left: 12px;
	}

	.bindings-box {
		margin: 0;
		padding: 0 0 10px 0;
	}

	/* Applications and Avatars */

	 p.app-avatar {
		width: 170px;
		height: 160px;
		overflow: hidden;
		float: left;
	}

	p.app-avatar > img {
		width: 160px;
		height: 160px;
		border-radius: 10px;
		margin-left: 10px;
	}

	.avatar-yellow {
		background-color: #ffeb0b;
	}

	.avatar-blue {
		background-color: #82bdff;
	}

	.avatar-green {
		background-color: #5be04d;
	}

	.avatar-orange {
		background-color: #ffc017;
	}

	.app-variables {
		/*
		 *	320 px = width( app-links ) + 20
		 *	190 px = width( app-avatar ) + 30
		 */
		padding: 2px 320px 10px 190px;
	}

	.app-desc {
		/*
		 *	320 px = width( app-links ) + 20
		 *	190 px = width( app-avatar ) + 30
		 */
		padding: 17px 320px 10px 190px;
	}
	
	div.app-links {
		width: 300px;
		float: right;
		padding: 18px 10px;
	}
	
	.text-orange {
		color: #fd9816;
	}
	
	div.app-links > div > ul {
		list-style-type: none;
	}
	
	div.app-links > div {
		margin-top: 22px;
	}
	
	.rbcf-padfix {
		padding-top: 7px;
	}

	/* Notifications */

	.status-panel-bottom {
		padding-top: 44px;
	}
	
	.status-panel {
		clear: both;
	}
	
	.status-panel > p {
		padding: 5px 12px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	
	.CodeMirror {
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		height: 400px !important;
	}
	
	/* Cropping */
	
	.crop-hidden {
		opacity: 0;
	}


	/* CRON */

	div.cron-wrap div {
		display: inline-flex;
	}
	
	div.cron-wrap span {
		padding: 0 7px;
	}
	
	div.cron-wrap select {
		padding: 3px 5px;
		margin-top: -5px;
	}
	
	div.cron-wrap > .select-options > select {
		padding: 0 5px;
		margin: 0;
	}
	
	span.sortable:hover::after, span.sortable-selected::after {
		content: '\0025BC';
		font-size: 10px;
		padding-left: 7px;
	}
	
	span.sortable-up:hover::after, span.sortable-selected-up::after {
		content: '\0025B2';
		font-size: 10px;
		padding-left: 7px;
	}
	
	span.sortable:hover,
	span.sortable-up:hover,
	span.sortable-selected:hover,
	span.sortable-selected-up:hover {
		cursor: pointer; 
	}
}