#rft {
	&.claro {
		//Index menu
		.rftIndexMenuBlock {
			width: @indexmenu_blockwidth;
			height: @indexmenu_blockheight;
			background: @base1;
			float: left;
			margin: @indexmenu_blockmargin;
			overflow: hidden;

			&:hover .rftIndexMenuMask {
				margin-top: -@indexmenu_blockheight;
			}
		}
		.rftIndexMenuMask {
			width: @indexmenu_blockwidth;
			height: @indexmenu_blockheight;
			background: @base1;
			color: @headers;
			margin-top: 0;

			.label {
				color: @headers;
				font-size: @indexmenu_font_size;
				height: @indexmenu_font_size;
				line-height: @indexmenu_font_size;
				margin-top: (@indexmenu_blockheight - @indexmenu_font_size) / 2;
				float: left;
			}

			.rftIcon {
				.setIcon(32px);
				float: left;
				margin: ((@indexmenu_blockheight - @indexmenu_font_size)/2) 8px 0 8px;
			}
		}
		.rftIndexMenuButton {
			.flatShading;
			.noOffset;
			.transition (0.3s);
			line-height: @button_indexmenu_height;
			border: none;

			.dijitButtonNode {
				border: none;
				color: @headers;
				font-size: @h2Size;

				.dijitButtonContents {
					vertical-align: top;

					.dijitButtonText {
						padding-bottom: 10px;
						line-height: 20px;
					}

					.rftIcon {
						.setIcon (32px);
						margin: 0 @std_offset_big;
					}
				}

				
			}

			.indexMenuMixin (@number) when (@number > 0){
				@height: @indexmenu_blockheight / @number;
				height: @height;
				width: @indexmenu_blockwidth;
				
				.dijitButtonNode {
					margin: ((@height - @button_indexmenu_content_size)/2) 0 0 0;
				}
			}

			&.oneHeight {
				.indexMenuMixin (4);
			}
			&.twoHeight {
				.indexMenuMixin (2);
			}
			&.fourHeight {
				.indexMenuMixin (1);
			}

			&.rftIndexMenuButtonHover {
				color: @text;
				.transition (0.1s);
				.dijitButtonText {
					color: @text;
					.transition(0.1s);
				}

				&.blue {
					background-color: @blue;
				}
				&.red {
					background-color: @red;
				}
				&.green {
					background-color: @green;
				}
				&.orange {
					background-color: @orange;
				}
				&.purple {
					background-color: @purple;
				}
			}

			&.rftIndexMenuButtonActive {
				.rftIcon {
					.setIcon (32px, black);
				}
				.transition(0.3s);
				color: @darkest;
				background: @text;

			}

		}

		//Topbar dropdown menu
		.dijitMenuPopup {
			.dijitMenu {
				
				.flatShading;
				color: @headers;
				background-color: @base;
				border: none;

				.dijitMenuItem {
					color: @headers;
					.flatShading;
					background-color: @base;

					&.dijitMenuItemHover,
					&.dijitMenuItemActive,
					&.dijitMenuItemSelected {
						.dijitMenuItemLabel {
							color: @text;
						}

						&.red {
							background-color: @red;
						}
						&.blue {
							background-color: @blue;
						}
						&.green {
							background-color: @green;
						}
						&.orange {
							background-color: @orange;
						}
						&.purple {
							background-color: @purple;
						}

					}

					.rftIcon {
						.setIcon (16px);
						.noMargin;
						margin-right: @std_offset_big;
					}

					&.dijitMenuItemActive .rftIcon {
						.setIcon(16px, black);
					}
				}

			}
		}


		//Main menu
		.dijitMenuBar .rftMainMenuButton {
			.flatShading;
			.transition (0.1s);
			border: none;
			height: @button_mainmenu_height;
			width: auto;
			background: transparent;
			color: @headers;
			text-align: center;
			font-size: @button_mainmenu_font_size;
			line-height: @button_mainmenu_height;
			padding: 0 @button_mainmenu_padding;
			margin: 0 @button_mainmenu_spacing;

			&.dijitMenuItemHover, 
			&.dijitMenuitemActive {
				.transition (0.1s);
			}

			&.dijitMenuItemHover {
				color: @text;
				font-size: @button_mainmenu_font_size + @button_mainmenu_font_grow;
			}

			&.dijitMenuItemActive {
				color: @blue;
				font-size: @button_mainmenu_font_size + @button_mainmenu_font_grow;
			}
			&.dijitMenuItemSelected {
				font-size: @button_mainmenu_font_size + @button_mainmenu_font_grow;
				color: @text;
			}
		}
	}
}