*:focus {
	//disable Chrome outline of focused elements
	outline: none;
}
html, body {
	width: 100%;
	height: 100%;
	background-color: @base;
}

#rft {
	&.claro {
		font-family: @font;
		font-size: @font_size;
		color: @darkest;

		.dijitBorderContainer, .dijitContentPane, .dijitTabContainer, .dijitTabPaneWrapper {
			background: transparent;
			border: none;
		}		


		h1 {
			.noMargin;
			padding: 0 10px 8px 10px;
			float: left;
			clear: left;
			font-size: @h1Size;
			color: @headers;
			line-height: @h1Size;
			font-weight: normal;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

		h2 {
			.noOffset;
			color: @headers;
			font-size: @h2Size;
			line-height: floor(@h2Size * 1.365);

			.rftIcon {
				.setIcon(32px);
				margin-right: 8px;
			}
		}

		h3 {
			.noMargin;
			font-size: @h3Size;
			margin-bottom: @std_offset;
		}

		h4 {
			font-size: @h4Size;
		}

		//Main screen layout
		.topbar {

			overflow-y: hidden;

			.dijitMenuBar {
				.flatShading;
				background-color: transparent;
				float: right;
				clear: right;
				margin-top: 16px;
			}

			.breadcrumbs {
				color: @headers;
				.breadcrumb {
					font-size: @font_size;
					&.breadcrumbCurrent {
						color: @text;
						font-size: round(@font_size * 1.125);
					}
					&.breadcrumbHover {
						color: @blue;
					}
				}
			}
		}

		.dijitContentPane.page {
			.noOffset;
		}

		.dijitContentPane.content {
			.noOffset;
			display: block;
			clear: both;
			background-color: @base2;
			background-image: -webkit-gradient(
				50% 50%, 
				circle, 
				#666666 1%,
				#444444 100%
				);
			-moz-background-image: gradient(
				50% 50%, 
				circle, 
				#666666 1%,
				#444444 100%
				);
			-o-background-image: gradient(
				50% 50%, 
				circle, 
				#666666 1%,
				#444444 100%
				);
			-ms-background-image: gradient(
				50% 50%, 
				circle, 
				#666666 1%,
				#444444 100%
				);
			background-image: gradient(
				50% 50%, 
				circle, 
				#666666 1%,
				#444444 100%
				);

			.dijitBorderContainer {
				padding: @std_offset;
			}
		}

		//Form stuff?
		.loginLabel {
			.newLine;
			width: 100px;
		}
		.loginInput {
			width: 150px;
		}

		.rftMultipleChoiceWidget {
			display: table;
			.row {
				display: table-row;
			}
			.rowBox {
				display: table-cell;
			}
			.rowText {
				display: table-cell;
				width: 100px;
			}
			.rowBtn {
				display: table-cell;
				width: 30px;
			}
		}

		//Tabs
		.verticalTabList {
			width: 190px;
		}

		.dijitTab {
			.transition(0.2s);
			background-color: transparent;
			padding: @std_offset @std_offset_big;
			color: @headers;
			overflow: hidden;

			

			
		}

		.dijitTabContainerLeft-tabs {
			border: none;
			padding: @std_offset;

			.dijitTab {
				margin: @std_offset;
				width: 200px;
				min-height: @tab_height;
				border: 1px solid @headers;

				.dijitTabContent {
					min-height: @tab_height;
					line-height: @tab_height;
					width: 190px;
				}

				&.dijitTabChecked {
					.transition (0.1s);
					color: @text;
					border: 1px solid transparent;

					&.dijitTabHover {
						border: 1px solid transparent;
					}
				}

				&.dijitTabHover {
					.transition (0.1s);
					color: @text;
					border-color: @text;
				}

				&.dijitTabActive {
					.transition (0.1s);
					color: @headers;
				}
			}

		}
		//Tab colour settings
		&.blue .dijitTabChecked,
		.blue .dijitTabChecked,
		div.blue.dijitTabChecked {
			.bgColor ("blue");
		}
		&.green .dijitTabChecked,
		.green .dijitTabChecked,
		div.green.dijitTabChecked {
			.bgColor ("green");
		}
		&.red .dijitTabChecked,
		.red .dijitTabChecked,
		div.red.dijitTabChecked {
			.bgColor ("red");
		}
		&.orange .dijitTabChecked,
		.orange .dijitTabChecked,
		div.orange.dijitTabChecked {
			.bgColor ("orange");
		}
		&.purple .dijitTabChecked,
		.purple .dijitTabChecked,
		div.purple.dijitTabChecked {
			.bgColor ("purple");
		}


		// Inputs
		fieldset {
			border: none;
			
			&.align {
				
				input,
				.dijitTextBox,
				textarea {
					margin-left: 0;
				}

				label {
					color: @text;
					display: inline-block;
					width: 100px !important;
				}
			}
		}

		.newline {
			.newLine;
			display: block;
		}

		.floatRight {
			float: right;
			.noMargin
		}

		.rftLineListView {
			max-width: 200px;
			max-height: 500px;
			
			.rftLineListViewContent {
				width: auto;
				overflow: auto;
			}
		}
	}
}