13 files changed, 1616 insertions, 0 deletions

diff --git a/lib/flat-ttrss/dijit/layout/AccordionContainer.css b/lib/flat-ttrss/dijit/layout/AccordionContainer.css
new file mode 100644
index 000000000..4e2717ecc
--- /dev/null
+++ b/lib/flat-ttrss/dijit/layout/AccordionContainer.css
@@ -0,0 +1,169 @@
+/* Accordion
+ * 
+ * Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer)
+ * and the title inside of it (dijitAccordionTitle).   There are 4 basic states to style:
+ * 
+ * 1. closed pane (and default styling): 
+ * 		.dijitAccordionInnerContainer - container for each accordion child
+ * 		.dijitAccordionTitle - title for each accordion child
+ *
+ * 2. active closed pane (ie, mouse down on a title bar)
+ * 		.dijitAccordionInnerContainerActive - for background-color, border
+ * 		.dijitAccordionInnerContainerActive dijitAccordionTitle - for text color
+ * 
+ * 3. open pane (expanded child)
+ *		.dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane)
+ *			setting a margin so that there's blue trim all the way around the child
+ *
+ * 		These rules need to override the closed pane active:
+ *
+ * 		.dijitAccordionInnerContainerSelected - for background-color, border
+ * 		.dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color
+ * 
+ * 4. hovered pane, open or closed
+ * 		The selectors below affect hovering over both a closed pane (ie, hovering a title bar),
+ * 		and hovering over an open pane.   Also, treat mouse down on an open pane as a hover:
+ *
+ * 		.dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border
+ * 		.dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color
+ */
+.flat .dijitAccordionContainer {
+  border: 0 none;
+  border-radius: 4px;
+}
+.flat .dijitAccordionInnerContainer {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  -webkit-transition-property: background-color, border;
+  -moz-transition-property: background-color, border;
+  -o-transition-property: background-color, border;
+  -ms-transition-property: background-color, border;
+  transition-property: background-color, border;
+  -webkit-transition-duration: 0.3s;
+  -moz-transition-duration: 0.3s;
+  -o-transition-duration: 0.3s;
+  -ms-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-timing-function: linear;
+  -moz-transition-timing-function: linear;
+  -o-transition-timing-function: linear;
+  -ms-transition-timing-function: linear;
+  transition-timing-function: linear;
+}
+.flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainer {
+  margin-top: 0;
+  position: relative;
+}
+.flat .dijitAccordionTitle {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #ccc;
+  padding: 4px;
+  border-radius: 4px;
+  line-height: 20px;
+  cursor: pointer;
+  -webkit-transition: all 0.05s linear;
+  -moz-transition: all 0.05s linear;
+  -o-transition: all 0.05s linear;
+  -ms-transition: all 0.05s linear;
+  transition: all 0.05s linear;
+  background: #fff;
+  border: 0 none;
+  border-radius: 4px;
+}
+.flat .dijitAccordionTitle .arrowTextUp,
+.flat .dijitAccordionTitle .arrowTextDown {
+  display: none;
+  float: right;
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  font-size: 0px;
+}
+.flat .dijitAccordionTitle .arrowTextUp:before,
+.flat .dijitAccordionTitle .arrowTextDown:before {
+  content: "\f007";
+  font-size: 18px;
+}
+.flat .dijitAccordionTitle .arrowTextUp {
+  display: block;
+}
+.flat .dijitAccordionTitle .arrowTextUp:before {
+  content: "\f006";
+}
+.flat .dijitAccordionInnerContainerHover .dijitAccordionTitle {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+  background: #f2f2f2;
+  border-color: #d9d9d9;
+}
+.flat .dijitAccordionInnerContainerActive .dijitAccordionTitle {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+}
+.flat .dijitAccordionInnerContainerSelected {
+  border: 0 none;
+}
+.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle {
+  color: #fff;
+  background-color: #257aa7;
+  border-radius: 4px 4px 0 0;
+}
+.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle .arrowTextUp {
+  display: none;
+}
+.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle .arrowTextDown {
+  display: block;
+}
+.flat .dijitAccordionContainer .dijitAccordionChildWrapper {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-top: 0 none;
+  position: relative;
+  z-index: 1;
+  clear: both;
+  border-radius: 0 0 4px 4px;
+}
+.flat .dijitAccordionInnerContainer {
+  border-radius: 0;
+}
+.flat .dijitAccordionInnerContainer .dijitAccordionTitle {
+  border-radius: 0;
+}
+.flat .dijitAccordionInnerContainer:not(:last-child) .dijitAccordionChildWrapper {
+  border-radius: 0;
+}
+.flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainer {
+  border-top: 0 none;
+}
+.flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainerSelected:last-child .dijitAccordionTitle {
+  border-radius: 0;
+}
+.flat .dijitAccordionInnerContainer:first-child,
+.flat .dijitAccordionInnerContainer:first-child .dijitAccordionTitle {
+  border-radius: 4px 4px 0 0;
+}
+.flat .dijitAccordionInnerContainer:last-child,
+.flat .dijitAccordionInnerContainer:last-child .dijitAccordionTitle {
+  border-radius: 0 0 4px 4px;
+}
diff --git a/lib/flat-ttrss/dijit/layout/AccordionContainer.styl b/lib/flat-ttrss/dijit/layout/AccordionContainer.styl
new file mode 100755
index 000000000..ebfcd538b
--- /dev/null
+++ b/lib/flat-ttrss/dijit/layout/AccordionContainer.styl
@@ -0,0 +1,160 @@
+/* Accordion
+ * 
+ * Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer)
+ * and the title inside of it (dijitAccordionTitle).   There are 4 basic states to style:
+ * 
+ * 1. closed pane (and default styling): 
+ * 		.dijitAccordionInnerContainer - container for each accordion child
+ * 		.dijitAccordionTitle - title for each accordion child
+ *
+ * 2. active closed pane (ie, mouse down on a title bar)
+ * 		.dijitAccordionInnerContainerActive - for background-color, border
+ * 		.dijitAccordionInnerContainerActive dijitAccordionTitle - for text color
+ * 
+ * 3. open pane (expanded child)
+ *		.dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane)
+ *			setting a margin so that there's blue trim all the way around the child
+ *
+ * 		These rules need to override the closed pane active:
+ *
+ * 		.dijitAccordionInnerContainerSelected - for background-color, border
+ * 		.dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color
+ * 
+ * 4. hovered pane, open or closed
+ * 		The selectors below affect hovering over both a closed pane (ie, hovering a title bar),
+ * 		and hovering over an open pane.   Also, treat mouse down on an open pane as a hover:
+ *
+ * 		.dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border
+ * 		.dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color
+ */
+
+@import 'dijit_layout_variables';
+
+.{$theme-name} {
+
+	.dijitAccordionContainer {
+		border: 0 none;
+		border-radius: $accordion-border-radius;
+	}
+
+	.dijitAccordionInnerContainer {
+		background-color: $accordion-background-color;
+		border: 1px solid $accordion-border-color;
+		border-radius: $accordion-border-radius;
+		transition-property: background-color, border;
+		transition-duration: .3s;
+		transition-timing-function: linear;
+
+		+.dijitAccordionInnerContainer {
+			margin-top: $accordion-spacing;
+			position: relative;
+		}
+	}
+
+	/* title bar */
+
+	.dijitAccordionTitle {
+		button-style();
+		border: 0 none;
+		border-radius: $accordion-border-radius;
+
+		.arrowTextUp,
+		.arrowTextDown {
+			display: none;
+			float: right;
+			_icon-core-style();
+			text-align: center;
+			font-size: 0px;
+			&:before {
+				content: $icon-collapse;
+				font-size: $icon-expand-collapse-size;
+			}
+		}
+		.arrowTextUp {
+			display: block;
+			&:before {
+				content: $icon-expand;
+			}
+		}
+	}
+
+	/* Hover */
+
+	.dijitAccordionInnerContainerHover .dijitAccordionTitle {
+		button-hover-style();
+	}
+
+	/* Active */
+
+	.dijitAccordionInnerContainerActive .dijitAccordionTitle {
+		button-active-style();
+	}
+
+	/* Selected */
+
+	.dijitAccordionInnerContainerSelected {
+		border: 0 none;
+		.dijitAccordionTitle {
+			color: $accordion-title-bar-checked-text-color;
+			background-color: $accordion-title-bar-checked-background-color;
+			border-radius: $accordion-border-radius $accordion-border-radius 0 0;
+
+			.arrowTextUp {
+				display: none;
+			}
+			.arrowTextDown {
+				display: block;
+			}
+		}
+	}
+
+	/* content wrapper */
+
+	.dijitAccordionContainer .dijitAccordionChildWrapper {
+		background-color: $accordion-content-background-color;
+		border: 1px solid $accordion-content-border-color;
+		border-top: 0 none;
+		position: relative;
+		z-index: 1;
+		clear: both;
+		border-radius: 0 0 $accordion-border-radius $accordion-border-radius;
+	}
+
+
+	/* if the spacing between panes is 0 */
+
+	if($accordion-spacing[0] <= "0") {
+		.dijitAccordionInnerContainer {
+			border-radius: 0;
+			
+			.dijitAccordionTitle {
+				border-radius: 0;
+			}
+
+			&:not(:last-child) {
+				.dijitAccordionChildWrapper {
+					border-radius: 0;
+				}
+			}
+
+			+.dijitAccordionInnerContainer {
+				border-top: 0 none;
+			}
+			+.dijitAccordionInnerContainerSelected:last-child {
+				.dijitAccordionTitle {
+					border-radius: 0;
+				}
+			}
+
+			&:first-child,
+			&:first-child .dijitAccordionTitle {
+				border-radius: $accordion-border-radius $accordion-border-radius 0 0;
+			}
+			&:last-child,
+			&:last-child .dijitAccordionTitle {
+				border-radius: 0 0 $accordion-border-radius $accordion-border-radius;
+			}
+		}	
+	}
+	
+}
\ No newline at end of file
diff --git a/lib/flat-ttrss/dijit/layout/AccordionContainer_rtl.css b/lib/flat-ttrss/dijit/layout/AccordionContainer_rtl.css
new file mode 100644
index 000000000..578a93728
--- /dev/null
+++ b/lib/flat-ttrss/dijit/layout/AccordionContainer_rtl.css
@@ -0,0 +1,4 @@
+.flat .dijitAccordionTitle .arrowTextUp,
+.flat .dijitAccordionTitle .arrowTextDown {
+  float: left;
+}
diff --git a/lib/flat-ttrss/dijit/layout/AccordionContainer_rtl.styl b/lib/flat-ttrss/dijit/layout/AccordionContainer_rtl.styl
new file mode 100644
index 000000000..76ab2d37c
--- /dev/null
+++ b/lib/flat-ttrss/dijit/layout/AccordionContainer_rtl.styl
@@ -0,0 +1,12 @@
+@import 'dijit_layout_variables';
+
+.{$theme-name} {
+
+	.dijitAccordionTitle  {
+		.arrowTextUp, 
+		.arrowTextDown {
+			float: left;
+		}
+	}
+
+}
\ No newline at end of file
diff --git a/lib/flat-ttrss/dijit/layout/BorderContainer.css b/lib/flat-ttrss/dijit/layout/BorderContainer.css
new file mode 100644
index 000000000..8ada96fce
--- /dev/null
+++ b/lib/flat-ttrss/dijit/layout/BorderContainer.css
@@ -0,0 +1,97 @@
+/* BorderContainer 
+
+Splitters and gutters separate panes within a BorderContainer. Splitters can be moved up and down (horizonal splitters) or left and right (vertical splitters), while Gutters are static. A "thumb" is the slit on a Splitter that indicates it is movable. 
+
+Styling the BorderContainer widget consists of the following: 
+
+.dijitBorderContainer - for border and padding of the entire border container
+
+.dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer.  
+
+.dijitBorderContainer-dijitTabContainerTop,
+.dijitBorderContainer-dijitTabContainerBottom,
+.dijitBorderContainer-dijitTabContainerLeft,
+.dijitBorderContainer-dijitTabContainerRight,
+.dijitBorderContainer-dijitAccordionContainer   -for border of the border containers within TabContainer or AccordionContainer widget
+
+.dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers
+
+Splitters and gutters:  
+
+.dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter 
+.dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter
+.dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter 
+.dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter
+.dijitSplitterHHover - for background-color of a hovered horizontal splitter
+.dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter
+.dijitSplitterVHover  - for background-color of a hovered vertical splitter
+.dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter
+.dijitSplitterHActive - for background-color of an active horizontal splitter
+.dijitSplitterVActive - for background-color of an active horizontal splitter
+*/
+.flat .dijitBorderContainer {
+/* matches the width of the splitters between panes */
+  padding: 5px;
+}
+.flat .dijitSplitContainer-child,
+.flat .dijitBorderContainer-child {
+  border: 1px solid #ccc;
+}
+.flat .dijitBorderContainer-dijitTabContainerTop,
+.flat .dijitBorderContainer-dijitTabContainerBottom,
+.flat .dijitBorderContainer-dijitTabContainerLeft,
+.flat .dijitBorderContainer-dijitTabContainerRight,
+.flat .dijitBorderContainer-dijitAccordionContainer {
+/* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper),
+		 * so override rule setting border on domNode
+		 */
+  border: none;
+}
+.flat .dijitBorderContainer-dijitBorderContainer {
+  border: 0;
+  padding: 0;
+}
+.flat .dijitSplitterH,
+.flat .dijitGutterH {
+  background: none;
+  border: 0;
+  height: 5px;
+}
+.flat .dijitSplitterH .dijitSplitterThumb {
+  background: #ccc;
+  height: 1px;
+  top: 2px;
+  width: 19px;
+}
+.flat .dijitSplitterV,
+.flat .dijitGutterV {
+  background: none;
+  border: 0;
+  width: 5px;
+  margin: 0;
+}
+.flat .dijitSplitterV .dijitSplitterThumb {
+  background: #ccc;
+  height: 19px;
+  left: 2px;
+  width: 1px;
+  margin: 0;
+}
+.flat .dijitSplitterHHover,
+.flat .dijitSplitterVHover {
+  font-size: 1px;
+  background: #f2f2f2;
+}
+.flat .dijitSplitterHHover .dijitSplitterThumb,
+.flat .dijitSplitterVHover .dijitSplitterThumb {
+  background: #999;
+}
+.flat .dijitSplitterHActive,
+.flat .dijitSplitterVActive {
+  font-size: 1px;
+  background: #f2f2f2;
+}
+.flat .dijitSplitterHActive .dijitSplitterThumb,
+.flat .dijitSplitterVActive .dijitSplitterThumb {
+  background: #999;
+}
diff --git a/lib/flat-ttrss/dijit/layout/BorderContainer.styl b/lib/flat-ttrss/dijit/layout/BorderContainer.styl
new file mode 100755
index 000000000..c8c4de295
--- /dev/null
+++ b/lib/flat-ttrss/dijit/layout/BorderContainer.styl
@@ -0,0 +1,117 @@
+/* BorderContainer 
+
+Splitters and gutters separate panes within a BorderContainer. Splitters can be moved up and down (horizonal splitters) or left and right (vertical splitters), while Gutters are static. A "thumb" is the slit on a Splitter that indicates it is movable. 
+
+Styling the BorderContainer widget consists of the following: 
+
+.dijitBorderContainer - for border and padding of the entire border container
+
+.dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer.  
+
+.dijitBorderContainer-dijitTabContainerTop,
+.dijitBorderContainer-dijitTabContainerBottom,
+.dijitBorderContainer-dijitTabContainerLeft,
+.dijitBorderContainer-dijitTabContainerRight,
+.dijitBorderContainer-dijitAccordionContainer   -for border of the border containers within TabContainer or AccordionContainer widget
+
+.dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers
+
+Splitters and gutters:  
+
+.dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter 
+.dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter
+.dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter 
+.dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter
+.dijitSplitterHHover - for background-color of a hovered horizontal splitter
+.dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter
+.dijitSplitterVHover  - for background-color of a hovered vertical splitter
+.dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter
+.dijitSplitterHActive - for background-color of an active horizontal splitter
+.dijitSplitterVActive - for background-color of an active horizontal splitter
+*/
+
+@import 'dijit_layout_variables';
+
+.{$theme-name} {
+
+	.dijitBorderContainer {
+		/* matches the width of the splitters between panes */
+		padding: $splitter-size;
+	}
+
+	.dijitSplitContainer-child,
+	.dijitBorderContainer-child {
+		border: 1px solid $bordercontainer-border-color;
+	}
+
+	.dijitBorderContainer-dijitTabContainerTop,
+	.dijitBorderContainer-dijitTabContainerBottom,
+	.dijitBorderContainer-dijitTabContainerLeft,
+	.dijitBorderContainer-dijitTabContainerRight,
+	.dijitBorderContainer-dijitAccordionContainer {
+		/* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper),
+		 * so override rule setting border on domNode
+		 */
+		 border: none;
+	}
+
+	.dijitBorderContainer-dijitBorderContainer {
+		border: 0;
+		padding: 0;
+	}
+
+	/* Splitters and gutters */
+
+	.dijitSplitterH,
+	.dijitGutterH {
+		background:none;
+		border:0;
+		height: $splitter-size;
+	}
+
+	.dijitSplitterH .dijitSplitterThumb {
+		background: $splitter-color;
+		height: 1px;
+		top: isEven($splitter-size) ? half($splitter-size) : half($splitter-size - 1);
+		width: 19px;
+	}
+
+	.dijitSplitterV,
+	.dijitGutterV {
+		background:	$splitter-background-color;
+		border: 0;
+		width:	$splitter-size;
+		margin: 0;
+	}
+
+	.dijitSplitterV .dijitSplitterThumb {
+		background: $splitter-color;
+		height: 19px;
+		left: isEven($splitter-size) ? half($splitter-size) : half($splitter-size - 1);
+		width: 1px;
+		margin: 0;
+	}
+
+	/* hovered */
+	.dijitSplitterHHover,
+	.dijitSplitterVHover {
+		font-size: 1px;
+		background: $splitter-hovered-background-color;
+
+		.dijitSplitterThumb {
+			background: $splitter-hovered-color;
+		}
+	}
+
+	/* active (dragged) */
+
+	.dijitSplitterHActive,
+	.dijitSplitterVActive {
+		font-size: 1px;
+		background: $splitter-dragged-background-color;
+		.dijitSplitterThumb {
+			background: $splitter-dragged-color;
+		}
+	}
+	
+}
\ No newline at end of file
diff --git a/lib/flat-ttrss/dijit/layout/ContentPane.css b/lib/flat-ttrss/dijit/layout/ContentPane.css
new file mode 100644
index 000000000..d912ba4ee
--- /dev/null
+++ b/lib/flat-ttrss/dijit/layout/ContentPane.css
@@ -0,0 +1,36 @@
+/* ContentPane 
+ *	
+ * .dijitContentPane
+ * 	set padding for basic content pane
+ * 	
+ * Nested layouts:
+ * 
+ * .dijitTabContainerTop-dijitContentPane,
+ * .dijitTabContainerLeft-dijitContentPane,
+ * .dijitTabContainerBottom-dijitContentPane,
+ * .dijitTabContainerRight-dijitContentPane
+ * 	set background-color and padding of ContentPanes nested within TabContainer (can do top, left, bottom, or right) or Accordion Container
+ *
+ * .dijitAccordionContainer-dijitContentPane
+ * 	set background-color and padding of ContentPane nested within Accordion
+ *
+ * .dijitSplitContainer-dijitContentPane, 
+ *	set background-color and padding of ContentPane nested within a SplitContainer 
+ *
+ * .dijitBorderContainer-dijitContentPane
+ *	set background-color and padding of ContentPane nested within a BorderContainer 
+ */
+.flat .dijitContentPane {
+  background-color: #fff;
+  padding: 8px;
+}
+.flat .dijitTabContainerTop-dijitContentPane,
+.flat .dijitTabContainerLeft-dijitContentPane,
+.flat .dijitTabContainerBottom-dijitContentPane,
+.flat .dijitTabContainerRight-dijitContentPane,
+.flat .dijitAccordionContainer-dijitContentPane {
+  background-color: #fff;
+  padding: 8px;
+  left: 0 !important;
+  top: 0 !important;
+}
diff --git a/lib/flat-ttrss/dijit/layout/ContentPane.styl b/lib/flat-ttrss/dijit/layout/ContentPane.styl
new file mode 100755
index 000000000..eadc8ea7f
--- /dev/null
+++ b/lib/flat-ttrss/dijit/layout/ContentPane.styl
@@ -0,0 +1,45 @@
+/* ContentPane 
+ *	
+ * .dijitContentPane
+ * 	set padding for basic content pane
+ * 	
+ * Nested layouts:
+ * 
+ * .dijitTabContainerTop-dijitContentPane,
+ * .dijitTabContainerLeft-dijitContentPane,
+ * .dijitTabContainerBottom-dijitContentPane,
+ * .dijitTabContainerRight-dijitContentPane
+ * 	set background-color and padding of ContentPanes nested within TabContainer (can do top, left, bottom, or right) or Accordion Container
+ *
+ * .dijitAccordionContainer-dijitContentPane
+ * 	set background-color and padding of ContentPane nested within Accordion
+ *
+ * .dijitSplitContainer-dijitContentPane, 
+ *	set background-color and padding of ContentPane nested within a SplitContainer 
+ *
+ * .dijitBorderContainer-dijitContentPane
+ *	set background-color and padding of ContentPane nested within a BorderContainer 
+ */
+
+@import 'dijit_layout_variables';
+
+.{$theme-name} {
+
+	.dijitContentPane {
+		background-color: $contentpane-background-color;
+		padding: $contentpane-padding;
+	}		
+
+	/* contentpane in other layouts */
+	.dijitTabContainerTop-dijitContentPane,
+	.dijitTabContainerLeft-dijitContentPane,
+	.dijitTabContainerBottom-dijitContentPane,
+	.dijitTabContainerRight-dijitContentPane,
+	.dijitAccordionContainer-dijitContentPane {
+		background-color: $contentpane-nested-background-color;
+		padding: $contentpane-nested-padding;
+	    left: 0 !important;
+	    top: 0 !important;
+	}
+	
+}
\ No newline at end of file
diff --git a/lib/flat-ttrss/dijit/layout/TabContainer.css b/lib/flat-ttrss/dijit/layout/TabContainer.css
new file mode 100644
index 000000000..3a6f3b194
--- /dev/null
+++ b/lib/flat-ttrss/dijit/layout/TabContainer.css
@@ -0,0 +1,359 @@
+/* TabContainer 
+ * 
+ * Styling TabContainer means styling the TabList and Its content container  (dijitTitlePane)
+ * 
+ * Tab List: (including 4 kinds of tab location)
+ * 		.dijitTabContainerTop-tabs     - tablist container at top
+ * 		.dijitTabContainerBottom-tabs  - tablist container at bottom
+ * 		.dijitTabContainerLeft-tabs    - tablist container at left
+ * 		.dijitTabContainerRight-tabs   - tablist container at right
+ * 
+ * Tab Strip Button:
+ * 		.dijitTabStripIcon - tab strip button icon
+ * 		.dijitTabStripMenuIcon - down arrow icon position
+ * 		.dijitTabStripSlideLeftIcon - left arrow icon position
+ * 		.dijitTabStripSlideRightIcon - right arrow icon position
+ * 
+ * 		.tabStripButtonDisabled - styles for disabled tab strip buttons
+ * 
+ * Tab Button:
+ * 		.dijitTabContainerTop-tabs .dijitTab     - styles for top tab button container
+ * 		.dijitTabContainerBottom-tabs .dijitTab  - styles for bottom tab button container
+ * 		.dijitTabContainerLeft-tabs .dijitTab    - styles for left tab button container
+ * 		.dijitTabContainerRight-tabs .dijitTab   - styles for right tab button container
+ * 
+ * 		.dijitTabContainerTop-tabs .dijitTabChecked .dijitTab
+ * 				- styles for selected status of top tab button
+ * 		same to Bottom, Left, Right Tabs
+ * 
+ * 		.dijitTabHover .dijitTab   - styles when mouse hover on tab buttons
+ * 		.dijitTabActive .dijitTab  - styles when mouse down on tab buttons
+ * 		.dijitTabChecked .dijitTab  - styles when on buttons of selected tab
+ * 
+ * 		.dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs
+ * 		.dijitTabCloseButtonHover - styles when mouse hover on close action button
+ * 		.dijitTabCloseButtonActive - styles when mouse down on close action button
+ * 
+ * Tab Button: (checked status)
+ * 
+ * Tab Content Container:
+ * 		.dijitTabContainerTop-dijitContentPane
+ * 		.dijitTabContainerBottom-dijitContentPane
+ * 		.dijitTabContainerLeft-dijitContentPane
+ * 		.dijitTabContainerRight-dijitContentPane - for background and padding
+ * 
+ * Nested Tabs:
+ * 		.dijitTabContainerNested - Container for nested tabs
+ * 		.dijitTabContainerTabListNested - tab list container for nested tabs
+ */
+.flat .dijitTabContainer {
+  border-radius: 4px;
+}
+.flat .dijitTabPaneWrapper {
+  background: #fff;
+  border: 1px solid #ccc;
+  margin: 0;
+  padding: 0;
+  border-radius: 0 0 4px 4px;
+}
+.flat .dijitTabContainerTop-tabs,
+.flat .dijitTabContainerBottom-tabs,
+.flat .dijitTabContainerLeft-tabs,
+.flat .dijitTabContainerRight-tabs {
+  border: none;
+}
+.flat .dijitTabSpacer {
+  display: none;
+}
+.flat .dijitTab {
+  border: 1px solid transparent;
+  background-color: #fff;
+  text-align: center;
+  -webkit-transition-property: background, padding, margin;
+  -moz-transition-property: background, padding, margin;
+  -o-transition-property: background, padding, margin;
+  -ms-transition-property: background, padding, margin;
+  transition-property: background, padding, margin;
+  -webkit-transition-duration: 0.2s;
+  -moz-transition-duration: 0.2s;
+  -o-transition-duration: 0.2s;
+  -ms-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  -webkit-transition-timing-function: ease;
+  -moz-transition-timing-function: ease;
+  -o-transition-timing-function: ease;
+  -ms-transition-timing-function: ease;
+  transition-timing-function: ease;
+  position: relative;
+  z-index: 0;
+}
+.flat .dijitTab:before {
+  content: "";
+  display: block;
+  position: absolute;
+}
+.flat .dijitTabHover {
+  background-color: #f2f2f2;
+}
+.flat .dijitTabActive {
+  background-color: #e6e6e6;
+}
+.flat .dijitTabChecked {
+  border: 1px solid #ccc;
+  z-index: 1;
+}
+.flat .dijitTabChecked.dijitTabHover,
+.flat .dijitTabChecked.dijitTabActive {
+  border: 1px solid #ccc;
+  background-color: #fff;
+  color: #424242;
+}
+.flat .dijitTabDisabled {
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .tabStripButton {
+  background-color: transparent;
+  border: none;
+}
+.flat .dijitTabCloseButton {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1;
+  font-size: 1em;
+  vertical-align: middle;
+  margin-left: 4px;
+  opacity: 0.35;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
+  filter: alpha(opacity=35);
+}
+.flat .dijitTabCloseButton:before {
+  content: "\f00e";
+}
+.flat .dijitTabCloseButtonHover {
+  opacity: 0.75;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
+  filter: alpha(opacity=75);
+}
+.flat .dijitTabCloseButtonActive {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.flat .dijitTabContainerTop-tabs .dijitTab {
+  margin-right: 0;
+  padding: 6px 16px;
+  border-bottom-color: #ccc;
+  border-left: none;
+  border-right: none;
+}
+.flat .dijitTabContainerTop-tabs .dijitTabChecked {
+  border-bottom: 1px solid #fff;
+  border-left: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+}
+.flat .dijitTabContainerTop-tabs .dijitTabChecked:before {
+  height: 3px;
+  background: #257aa7;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+}
+.flat .dijitTabListContainer-top {
+  margin-top: 1px;
+}
+.flat .dijitTabListContainer-top .dijitTab {
+  top: 0;
+}
+.flat .dijitTabPaneWrapper.dijitTabContainerBottom-container {
+  border-radius: 4px 4px 0 0;
+}
+.flat .dijitTabContainerBottom-tabs .dijitTab {
+  margin-right: 0;
+  padding: 6px 16px;
+  border-top-color: #ccc;
+  border-left: none;
+  border-right: none;
+}
+.flat .dijitTabContainerBottom-tabs .dijitTabChecked {
+  border-top: 1px solid #fff;
+  border-left: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+}
+.flat .dijitTabContainerBottom-tabs .dijitTabChecked:before {
+  height: 3px;
+  background: #257aa7;
+  bottom: -1px;
+  left: -1px;
+  right: -1px;
+}
+.flat .dijitTabListContainer-bottom {
+  margin-top: -1px;
+}
+.flat .dijitTabListContainer-bottom .dijitTab {
+  top: 0;
+}
+.flat .dijitTabPaneWrapper.dijitTabContainerLeft-container {
+  border-radius: 0 4px 4px 0;
+}
+.flat .dijitTabContainerLeft-tabs .dijitTab {
+  margin-bottom: 0;
+  padding: 8px 12px;
+  border-right-color: #ccc;
+  border-top: none;
+  border-bottom: none;
+}
+.flat .dijitTabContainerLeft-tabs .dijitTabChecked {
+  border-right: 1px solid #fff;
+  border-top: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+}
+.flat .dijitTabContainerLeft-tabs .dijitTabChecked:before {
+  width: 3px;
+  background: #257aa7;
+  bottom: -1px;
+  left: -1px;
+  top: -1px;
+}
+.flat .dijitTabPaneWrapper.dijitTabContainerRight-container {
+  border-radius: 4px 0 0 4px;
+}
+.flat .dijitTabContainerRight-tabs .dijitTab {
+  margin-bottom: 0;
+  padding: 8px 12px;
+  border-left-color: #ccc;
+  border-top: none;
+  border-bottom: none;
+}
+.flat .dijitTabContainerRight-tabs .dijitTabChecked {
+  border-left: 1px solid #fff;
+  border-top: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+}
+.flat .dijitTabContainerRight-tabs .dijitTabChecked:before {
+  width: 3px;
+  background: #257aa7;
+  bottom: -1px;
+  right: -1px;
+  top: -1px;
+}
+.flat .tabStripButton {
+  background-color: #fff;
+  border: 1px solid transparent;
+  -webkit-transition-property: background-color;
+  -moz-transition-property: background-color;
+  -o-transition-property: background-color;
+  -ms-transition-property: background-color;
+  transition-property: background-color;
+}
+.flat .dijitTabListContainer-top .tabStripButton,
+.flat .dijitTabListContainer-bottom .tabStripButton {
+  padding: 4px 8px;
+  margin-left: 0;
+  margin-right: 0;
+}
+.flat .dijitTabListContainer-top .tabStripButton {
+  margin-bottom: 1px;
+}
+.flat .dijitTabListContainer-bottom .tabStripButton {
+  margin-top: 1px;
+}
+.flat .tabStripButtonHover {
+  background-color: #f2f2f2;
+}
+.flat .tabStripButtonActive {
+  background-color: #e6e6e6;
+}
+.flat .dijitTabStripIcon {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #257aa7;
+  vertical-align: middle;
+}
+.flat .dijitTabStripIcon:before {
+  content: "\f004";
+}
+.flat .dijitTabStripSlideRightIcon:before {
+  content: "\f005";
+}
+.flat .dijitTabStripMenuIcon:before {
+  content: "\f006";
+}
+.flat .dijitTabListContainer-top .tabStripButtonDisabled,
+.flat .dijitTabListContainer-bottom .tabStripButtonDisabled {
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .dijitTabContainerNested .dijitTabListWrapper {
+  height: auto;
+}
+.flat .dijitTabContainerTabListNested .dijitTab {
+  color: #257aa7;
+  margin: 4px;
+  padding: 4px 8px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  -webkit-transition-property: background-color, border-color;
+  -moz-transition-property: background-color, border-color;
+  -o-transition-property: background-color, border-color;
+  -ms-transition-property: background-color, border-color;
+  transition-property: background-color, border-color;
+  -webkit-transition-duration: 0.3s;
+  -moz-transition-duration: 0.3s;
+  -o-transition-duration: 0.3s;
+  -ms-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+}
+.flat .dijitTabContainerTabListNested .dijitTabHover {
+  background-color: #f2f2f2;
+}
+.flat .dijitTabContainerTabListNested .dijitTabActive {
+  color: #257aa7;
+  background-color: #e6e6e6;
+}
+.flat .dijitTabContainerTabListNested .dijitTabChecked,
+.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabHover,
+.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabActive {
+  color: #fff;
+  background-color: #257aa7;
+}
+.flat .dijitTabContainerTabListNested .dijitTabChecked:before,
+.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabHover:before,
+.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabActive:before {
+  display: none;
+}
+.flat .dijitTabContainerTabListNested.dijitTabContainerTop-tabs .dijitTab {
+  margin-right: 4px;
+}
+.flat .dijitTabContainerTabListNested.dijitTabContainerBottom-tabs .dijitTab {
+  margin-right: 4px;
+}
+.flat .dijitTabContainerTabListNested.dijitTabContainerLeft-tabs .dijitTab {
+  margin-bottom: 4px;
+}
+.flat .dijitTabContainerTabListNested.dijitTabContainerRight-tabs .dijitTab {
+  margin-bottom: 4px;
+}
+.flat .dijitTabPaneWrapperNested {
+  border: none; /* prevent double border */
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
diff --git a/lib/flat-ttrss/dijit/layout/TabContainer.styl b/lib/flat-ttrss/dijit/layout/TabContainer.styl
new file mode 100755
index 000000000..a341ed064
--- /dev/null
+++ b/lib/flat-ttrss/dijit/layout/TabContainer.styl
@@ -0,0 +1,446 @@
+/* TabContainer 
+ * 
+ * Styling TabContainer means styling the TabList and Its content container  (dijitTitlePane)
+ * 
+ * Tab List: (including 4 kinds of tab location)
+ * 		.dijitTabContainerTop-tabs     - tablist container at top
+ * 		.dijitTabContainerBottom-tabs  - tablist container at bottom
+ * 		.dijitTabContainerLeft-tabs    - tablist container at left
+ * 		.dijitTabContainerRight-tabs   - tablist container at right
+ * 
+ * Tab Strip Button:
+ * 		.dijitTabStripIcon - tab strip button icon
+ * 		.dijitTabStripMenuIcon - down arrow icon position
+ * 		.dijitTabStripSlideLeftIcon - left arrow icon position
+ * 		.dijitTabStripSlideRightIcon - right arrow icon position
+ * 
+ * 		.tabStripButtonDisabled - styles for disabled tab strip buttons
+ * 
+ * Tab Button:
+ * 		.dijitTabContainerTop-tabs .dijitTab     - styles for top tab button container
+ * 		.dijitTabContainerBottom-tabs .dijitTab  - styles for bottom tab button container
+ * 		.dijitTabContainerLeft-tabs .dijitTab    - styles for left tab button container
+ * 		.dijitTabContainerRight-tabs .dijitTab   - styles for right tab button container
+ * 
+ * 		.dijitTabContainerTop-tabs .dijitTabChecked .dijitTab
+ * 				- styles for selected status of top tab button
+ * 		same to Bottom, Left, Right Tabs
+ * 
+ * 		.dijitTabHover .dijitTab   - styles when mouse hover on tab buttons
+ * 		.dijitTabActive .dijitTab  - styles when mouse down on tab buttons
+ * 		.dijitTabChecked .dijitTab  - styles when on buttons of selected tab
+ * 
+ * 		.dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs
+ * 		.dijitTabCloseButtonHover - styles when mouse hover on close action button
+ * 		.dijitTabCloseButtonActive - styles when mouse down on close action button
+ * 
+ * Tab Button: (checked status)
+ * 
+ * Tab Content Container:
+ * 		.dijitTabContainerTop-dijitContentPane
+ * 		.dijitTabContainerBottom-dijitContentPane
+ * 		.dijitTabContainerLeft-dijitContentPane
+ * 		.dijitTabContainerRight-dijitContentPane - for background and padding
+ * 
+ * Nested Tabs:
+ * 		.dijitTabContainerNested - Container for nested tabs
+ * 		.dijitTabContainerTabListNested - tab list container for nested tabs
+ */
+
+@import 'dijit_layout_variables';
+
+.{$theme-name} {
+
+	/************ common styles *************/
+
+	.dijitTabContainer {
+		border-radius: $tab-wrapper-border-radius;
+	}
+
+	.dijitTabPaneWrapper {
+		background: $tab-wrapper-background-color;
+		border: 1px solid $tab-wrapper-border-color;
+		margin: 0;
+		padding: 0;
+		border-radius: 0 0 $tab-wrapper-border-radius $tab-wrapper-border-radius;
+	}
+
+	.dijitTabContainerTop-tabs,
+	.dijitTabContainerBottom-tabs,
+	.dijitTabContainerLeft-tabs,
+	.dijitTabContainerRight-tabs {
+		border: none;
+	}
+
+	.dijitTabSpacer {
+		// display: none if !$tab-has-gutter;
+		display: none;
+	}
+
+	/* tabs */
+
+	.dijitTab {
+		border: 1px solid $tab-border-color;
+		background-color: $tab-background-color;
+		text-align: center;
+		transition-property: background, padding, margin;
+		transition-duration: .2s;
+		transition-timing-function: ease;
+		position: relative;
+		z-index: 0;
+		if ($tab-checked-has-highlight-border) {
+			&:before {
+				content: "";
+				display: block;
+				position: absolute;
+			}
+		}
+	}
+
+	/* tabs: hover */
+
+	.dijitTabHover {
+		background-color: $tab-hover-background-color;
+	}
+
+	/* tabs: active */
+
+	.dijitTabActive {
+		background-color: $tab-active-background-color;
+	}
+
+	/* tabs: checked */
+
+	.dijitTabChecked {
+		border: 1px solid $tab-checked-border-color;
+		z-index: 1;
+		&.dijitTabHover,
+		&.dijitTabActive {
+			border: 1px solid $tab-checked-border-color;
+			background-color: $tab-checked-background-color;
+			color: $tab-checked-text-color;
+		}
+	}
+
+	/* tabs: disabled */
+
+	.dijitTabDisabled {
+		opacity: $disabled-opacity;
+	}
+
+	/* tabs: strip button */
+
+	.tabStripButton {
+		background-color: transparent;
+		border: none;
+	}
+
+	/* tabs: close button */
+
+	.dijitTabCloseButton {
+		_icon-core-style();
+		line-height: 1;
+		font-size: 1em;
+		vertical-align: middle;
+		margin-left: $tab-padding;
+		opacity: $tab-close-button-opacity;
+		&:before {
+			content: $tab-close-button-icon;
+		}
+	}
+	.dijitTabCloseButtonHover {
+		opacity: $tab-close-button-hover-opacity;
+	}
+	.dijitTabCloseButtonActive {
+		opacity: $tab-close-button-active-opacity;
+	}
+
+	/************* end common **************/
+
+
+	/*************** top tabs ***************/
+
+	.dijitTabContainerTop-tabs {
+		.dijitTab {
+			margin-right: $tab-spacing;
+			padding: $tab-top-padding;
+			border-bottom-color: $tab-wrapper-border-color;
+			border-left: none;
+			border-right: none;
+		}
+		// .dijitTabHover,
+		// .dijitTabActive,
+		// .dijitTabChecked {
+		// }
+		.dijitTabChecked {
+			border-bottom: 1px solid $tab-wrapper-background-color;
+			border-left: 1px solid $tab-wrapper-border-color;
+			border-right: 1px solid $tab-wrapper-border-color;
+			if ($tab-checked-has-highlight-border) {
+				&:before {
+					height: 3px;
+					background: $tab-highlight-color;
+					top: -1px;
+					left: -1px;
+					right: -1px;
+				}
+			}
+		}
+	}
+
+	.dijitTabListContainer-top {
+		margin-top: 1px;
+		.dijitTab {
+			top:0;
+		}
+	}
+
+	/*************** end top tabs **************/
+
+	/*************** bottom tabs ***************/
+
+	.dijitTabPaneWrapper.dijitTabContainerBottom-container {
+		border-radius: $tab-wrapper-border-radius $tab-wrapper-border-radius 0 0;
+	}
+
+	.dijitTabContainerBottom-tabs {
+		.dijitTab {
+			margin-right: $tab-spacing;
+			padding: $tab-bottom-padding;
+			border-top-color: $tab-wrapper-border-color;
+			border-left: none;
+			border-right: none;
+		}
+		// .dijitTabHover,
+		// .dijitTabActive,
+		// .dijitTabChecked {
+		// }
+		.dijitTabChecked {
+			border-top: 1px solid $tab-wrapper-background-color;
+			border-left: 1px solid $tab-wrapper-border-color;
+			border-right: 1px solid $tab-wrapper-border-color;
+			if ($tab-checked-has-highlight-border) {
+				&:before {
+					height: 3px;
+					background: $tab-highlight-color;
+					bottom: -1px;
+					left: -1px;
+					right: -1px;
+				}
+			}
+		}
+	}
+
+	.dijitTabListContainer-bottom {
+		margin-top: -1px;
+		.dijitTab {
+			top: 0;
+		}
+	}
+
+	/************ end bottom tabs ************/
+
+	/*************** left tabs ***************/
+
+	.dijitTabPaneWrapper.dijitTabContainerLeft-container {
+		border-radius: 0 $tab-wrapper-border-radius $tab-wrapper-border-radius 0;
+	}
+
+	.dijitTabContainerLeft-tabs {
+		.dijitTab {
+			margin-bottom: $tab-spacing;
+			padding: $tab-left-padding;
+			border-right-color: $tab-wrapper-border-color;
+			border-top: none;
+			border-bottom: none;
+		}
+		// .dijitTabHover,
+		// .dijitTabActive,
+		// .dijitTabChecked {
+		// }
+		.dijitTabChecked {
+			border-right: 1px solid $tab-wrapper-background-color;
+			border-top: 1px solid $tab-wrapper-border-color;
+			border-bottom: 1px solid $tab-wrapper-border-color;
+			if ($tab-checked-has-highlight-border) {
+				&:before {
+					width: 3px;
+					background: $tab-highlight-color;
+					bottom: -1px;
+					left: -1px;
+					top: -1px;
+				}
+			}
+		}
+	}
+
+	/************** end left tabs *************/
+
+	/*************** right tabs ***************/
+
+	.dijitTabPaneWrapper.dijitTabContainerRight-container{
+		border-radius: $tab-wrapper-border-radius 0 0 $tab-wrapper-border-radius
+	 }
+
+	.dijitTabContainerRight-tabs {
+		 .dijitTab {
+			margin-bottom: $tab-spacing;
+			padding: $tab-right-padding;
+			border-left-color: $tab-wrapper-border-color;
+			border-top: none;
+			border-bottom: none;
+		}
+		// .dijitTabHover,
+		// .dijitTabActive,
+		// .dijitTabChecked {
+		// }
+		.dijitTabChecked {
+			border-left: 1px solid $tab-wrapper-background-color;
+			border-top: 1px solid $tab-wrapper-border-color;
+			border-bottom: 1px solid $tab-wrapper-border-color;
+			if ($tab-checked-has-highlight-border) {
+				&:before {
+					width: 3px;
+					background: $tab-highlight-color;
+					bottom: -1px;
+					right: -1px;
+					top: -1px;
+				}
+			}
+		}
+	}
+
+	/************* end right tabs *************/
+
+	/************ left/right scroll buttons + menu button ***********/
+	.tabStripButton {
+		background-color: $tab-strip-button-background-color;
+		border: 1px solid $tab-strip-button-border-color;
+		transition-property: background-color;
+	}
+
+	.dijitTabListContainer-top ,
+	.dijitTabListContainer-bottom {
+		.tabStripButton {
+			padding: $tab-padding $tab-padding*2;
+			margin-left: $tab-spacing;
+			margin-right $tab-spacing;
+		}
+	}
+
+	.dijitTabListContainer-top {
+		.tabStripButton {
+			margin-bottom: 1px;
+		}
+	}
+
+	.dijitTabListContainer-bottom {
+		.tabStripButton {
+			margin-top: 1px;
+		}
+	}
+
+	.tabStripButtonHover {
+		background-color: $tab-strip-button-hover-background-color;
+	}
+
+	.tabStripButtonActive {
+		background-color: $tab-strip-button-active-background-color;
+	}
+
+	.dijitTabStripIcon {
+		_icon-core-style();
+		color: $tab-strip-button-arrow-color;
+		vertical-align: middle;
+		&:before {
+			content: $tab-left-icon;
+		}
+	}
+
+	.dijitTabStripSlideRightIcon {
+		&:before {
+			content: $tab-right-icon;
+		}
+	}
+
+	.dijitTabStripMenuIcon {
+		&:before {
+			content: $tab-menu-icon;
+		}
+	}
+
+	/* disabled */
+
+	.dijitTabListContainer-top .tabStripButtonDisabled,
+	.dijitTabListContainer-bottom .tabStripButtonDisabled {
+		opacity: $disabled-opacity;
+	}
+
+	/*********** end left/right scroll buttons + menu button *********/
+
+	/*************** nested tabs ***************/
+
+	.dijitTabContainerNested .dijitTabListWrapper {
+		height: auto;
+	}
+
+	.dijitTabContainerTabListNested {
+		.dijitTab {
+			color: $nestedtab-text-color;
+			margin: $tab-padding;
+			padding: $nestedtab-padding;
+			border: 1px solid $nestedtab-border-color;
+			border-radius: $nestedtab-border-radius;
+			transition-property: background-color, border-color;
+	 		transition-duration: .3s;
+		}
+		.dijitTabHover {
+			background-color: $nestedtab-hover-background-color;
+		}
+		.dijitTabActive {
+			color: $nestedtab-active-text-color;
+			background-color:$nestedtab-active-background-color;
+		}
+		.dijitTabChecked,
+		.dijitTabChecked.dijitTabHover,
+		.dijitTabChecked.dijitTabActive {
+			color: $nestedtab-checked-text-color;
+			background-color: $nestedtab-checked-background-color;
+			&:before {
+				display: none;
+			}
+		}
+
+	}
+
+	/************* nested top tabs *************/
+
+	.dijitTabContainerTabListNested.dijitTabContainerTop-tabs .dijitTab {
+		margin-right: $nestedtab-spacing;
+	}
+
+	/************* nested bottom tabs *************/
+
+	.dijitTabContainerTabListNested.dijitTabContainerBottom-tabs .dijitTab {
+		margin-right: $nestedtab-spacing;
+	}
+
+	/************* nested left tabs *************/
+
+	.dijitTabContainerTabListNested.dijitTabContainerLeft-tabs .dijitTab {
+		margin-bottom: $nestedtab-spacing;
+	}
+
+	/************* nested right tabs *************/
+
+	.dijitTabContainerTabListNested.dijitTabContainerRight-tabs .dijitTab {
+		margin-bottom: $nestedtab-spacing;
+	}
+
+
+	.dijitTabPaneWrapperNested {
+		border: none; /* prevent double border */
+		box-shadow: none;
+	}
+
+}
\ No newline at end of file
diff --git a/lib/flat-ttrss/dijit/layout/TabContainer_rtl.css b/lib/flat-ttrss/dijit/layout/TabContainer_rtl.css
new file mode 100644
index 000000000..b60a895fa
--- /dev/null
+++ b/lib/flat-ttrss/dijit/layout/TabContainer_rtl.css
@@ -0,0 +1,13 @@
+.flat .dijitTabContainerTop-tabs .dijitTabRtl,
+.flat .dijitTabContainerBottom-tabs .dijitTabRtl {
+  margin-right: 0;
+  margin-left: -1px;
+}
+.flat .dijitTabControllerRtl,
+.flat .dijitTabControllerRtl .nowrapTabStrip {
+  text-align: right;
+}
+.flat .dijitTabRtl .dijitTabCloseButton {
+  margin-left: 0;
+  margin-right: 4px;
+}
diff --git a/lib/flat-ttrss/dijit/layout/TabContainer_rtl.styl b/lib/flat-ttrss/dijit/layout/TabContainer_rtl.styl
new file mode 100755
index 000000000..ea4892d02
--- /dev/null
+++ b/lib/flat-ttrss/dijit/layout/TabContainer_rtl.styl
@@ -0,0 +1,23 @@
+@import 'dijit_layout_variables';
+
+.{$theme-name} {
+
+	.dijitTabContainerTop-tabs,
+	.dijitTabContainerBottom-tabs {
+		.dijitTabRtl {
+			margin-right: 0;
+			margin-left: -1px;
+		}
+	}
+
+	.dijitTabControllerRtl,
+	.dijitTabControllerRtl .nowrapTabStrip {
+	    text-align: right;  
+	}
+
+	.dijitTabRtl .dijitTabCloseButton {
+		margin-left: 0;
+		margin-right: $tab-padding;
+	}
+	
+}
\ No newline at end of file
diff --git a/lib/flat-ttrss/dijit/layout/dijit_layout_variables.styl b/lib/flat-ttrss/dijit/layout/dijit_layout_variables.styl
new file mode 100644
index 000000000..fdda4b59e
--- /dev/null
+++ b/lib/flat-ttrss/dijit/layout/dijit_layout_variables.styl
@@ -0,0 +1,135 @@
+/* dijit/layout/* variables */
+
+@import '../../variables';
+
+/* BorderContainer*/
+
+$bordercontainer-padding = $padding;
+$bordercontainer-border-color = $border-color;
+
+// splitter
+$splitter-size = isEven($bordercontainer-padding) ? $bordercontainer-padding + 1 : $bordercontainer-padding; // the width of the splitter, will always be an odd number since the splitter bar's width is always 1px 
+$splitter-color = $border-color; // color of the splitter thumb (the 1px wide bar)
+$splitter-hovered-color = darken($splitter-color, 25%);
+$splitter-dragged-color = $splitter-hovered-color;
+$splitter-background-color = none;
+$splitter-hovered-background-color = darken(#fff, 5%);
+$splitter-dragged-background-color = darken(#fff, 5%);
+ 
+/* ContentPane */
+
+$contentpane-padding = $padding * 2;
+$contentpane-background-color = $theme-base-color;
+
+// contentpane in other layout widgets (accordion and tab container)
+$contentpane-nested-padding = $padding * 2;
+$contentpane-nested-background-color = $theme-base-color;
+
+/* TabContainer */
+
+$tab-highlight-color = $theme-base;
+$tab-padding = $padding;
+$tab-checked-has-highlight-border = true; // whether to have a highlight bar on the edge of the tab
+
+// TabContainer: wrapper
+// (the outer container)
+$tab-wrapper-background-color = $theme-base-color;
+$tab-wrapper-border-color = $border-color;
+$tab-wrapper-border-radius = $border-radius;
+
+// tabs
+$tab-background-color = $tab-wrapper-background-color;
+$tab-border-color = transparent;
+$tab-spacing = 0; // space between tabs
+
+// hover
+$tab-hover-background-color = darken($theme-base-color, 5%);
+
+// active
+$tab-active-background-color = darken($theme-base-color, 10%);
+
+// checked
+$tab-checked-border-color = $tab-wrapper-border-color;
+$tab-checked-background-color = $tab-wrapper-background-color;
+$tab-checked-text-color = $grey-dark;
+
+// icons
+$tab-left-icon = "\f004";
+$tab-right-icon = "\f005";
+$tab-menu-icon = "\f006";
+
+// close button
+$tab-close-button-icon = "\f00e";
+$tab-close-button-opacity = .35;
+
+// hover
+$tab-close-button-hover-opacity = .75;
+
+// active
+$tab-close-button-active-opacity = 1;
+
+// tab dtrip button
+$tab-strip-button-background-color = $tab-background-color;
+$tab-strip-button-border-color = $tab-border-color;
+
+// hover
+$tab-strip-button-hover-background-color = $tab-hover-background-color;
+
+// active
+$tab-strip-button-active-background-color = $tab-active-background-color;
+
+// arrow
+$tab-strip-button-arrow-color = $theme-base;
+
+// tabs: top
+$tab-top-padding = $tab-padding * 1.5 $tab-padding * 4;
+
+// tabs: bottom
+$tab-bottom-padding = $tab-top-padding;
+
+// tabs: left
+$tab-left-padding = $tab-padding * 2 $tab-padding * 3;
+
+// tabs: right
+$tab-right-padding = $tab-left-padding;
+
+// nested tab container
+$nestedtab-spacing = $padding;
+$nestedtab-padding = $tab-padding $tab-padding * 2;
+$nestedtab-border-color = transparent;
+$nestedtab-border-radius = $border-radius;
+
+// normal
+$nestedtab-text-color = $theme-base;
+
+// hover
+$nestedtab-hover-background-color = $tab-hover-background-color;
+
+// active
+$nestedtab-active-text-color = $theme-base;
+$nestedtab-active-background-color = $tab-active-background-color;
+
+// checked
+$nestedtab-checked-background-color = $theme-base;
+$nestedtab-checked-text-color = $theme-base-color;
+
+/* AccordionContainer */
+
+$accordion-spacing = 0; // space between accordion panes; minimum value is 0
+$accordion-border-color = $border-color;
+$accordion-border-radius = $border-radius;
+$accordion-background-color = $theme-base-color;
+
+// accordion title bar 
+// normal, hover and active status styles are inherited from "form/Button"
+
+// checked
+$accordion-title-bar-checked-background-color = $theme-base;
+$accordion-title-bar-checked-text-color = $theme-base-color;
+
+// content pane
+$accordion-content-border-color = $accordion-border-color;
+$accordion-content-background-color = $theme-base-color;
+
+// icons
+// uses common vars directly