merged the angularjs branch

3 files changed, 713 insertions, 774 deletions

diff --git a/css/firstrun.css b/css/firstrun.css
deleted file mode 100644
index 1e2feabb2..000000000
--- a/css/firstrun.css
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * when there are no feeds in the db
- */
-#firstrun {
-    position: relative;
-    top: 50%;
-    left: 50%;
-    margin-left: -25em;
-    margin-top: -10em;
-    width: 50em;
-    height: 20em;
-    text-align: center;
-    font-weight:bold;
-    font-size:1.5em;
-    color:#777;
-}
-
-    #firstrun small { display: block; font-weight: normal; font-size: 0.8em; margin: .5em 0 1em 0; }
-    #firstrun .button { font-size: 0.7em; }
-
-    #firstrun #selections {
-        font-size:0.8em;
-        margin: 2em auto 2em 10em;
-        clear: both;
-    }
-
-    #firstrun #feed_add_url { width:20em; }
-
-    #firstrun #selections #addfeed_dialog_firstrun, #firstrun #selections #importopml_dialog_firstrun {
-	width:40em;
-	border:1px solid;
-	border-color: gray;
-	border-radius:10px;
-	-moz-border-radius:10px; /* Firefox 3.6 and earlier */
-    }
-
-    #firstrun #selections #addfeed_dialog_firstrun {
-    	height:5em;
-    }
-
-    #firstrun #selections #importopml_dialog_firstrun {
-    	height:4em;
-    }
-
-#file_upload_start {
-    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    filter:alpha(opacity=0);
-    opacity:0;
-    z-index:1001;
-    width:0;
-    height:0;
-}
diff --git a/css/news.css b/css/news.css
index 8f1e105f5..f0a013e56 100644
--- a/css/news.css
+++ b/css/news.css
@@ -1,764 +1,756 @@
 .news_input {
-    float:left;
-    font-size:12px;
-    padding:4px 2px;
-    border:solid 1px #aacfe4;
-    width:200px;
+	float:left;
+	font-size:12px;
+	padding:4px 2px;
+	border:solid 1px #aacfe4;
+	width:200px;
 }
 
 .svg {
-    border: inherit;
-    background: inherit;
+	border: inherit;
+	background: inherit;
 }
 
 div.add_parentfolder {
-    position: relative;
+	position: relative;
 }
 
 #file_upload_start {
-    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    filter:alpha(opacity=0);
-    opacity:0;
-    z-index:1001;
-    width:0;
-    height:0;
+	opacity:0;
+	z-index:1001;
+	width:0;
+	height:0;
 }
 
-/* feed/folder list */
-#leftcontent_news {
-    width: 20em;
-    margin: 0;
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-    border-right: 1px solid #ccc;
-    background-color: #f8f8f8;
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
+/**
+ * basic site structure
+ */
+.content_wrapper {
+	height: 100%; 
+	width: 100%;
 }
 
+.main_column {
+	height: 100%; 
+	position: relative; 
+	z-index: 0;
+	overflow: hidden;
+	margin: 0; 
+	padding: 0; 
+	box-sizing: border-box; 
+	-moz-box-sizing: border-box;
+}
+
+#leftcontent_news {
+	border-right: 1px solid #ccc;
+	background-color: #f8f8f8;
+	width: 20em; 
+	float: left;
+}
 
+/* feed/folder list */
 #feed_wrapper {
-    background-color: #f8f8f8;
-    position: relative;
-    top: 0;
-    height: 100%;
-    padding-bottom: 2.8em;
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	height: 100%;
+	background-color: #f8f8f8;
+	padding-bottom: 2.8em;
+	box-sizing: border-box; 
+	-moz-box-sizing: border-box;
 }
 
 #feeds {
-    height: 100%;
-    overflow: auto;
-    background-color: #eee;
-    color: #333;
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
+	height: 100%;
+	overflow: auto;
+	background-color: #eee;
+	color: #333;
+	box-sizing: border-box;
+	-moz-box-sizing: border-box;
 }
 
-    #feeds .unread_items_counter {
-        padding: 6px 8px 5px;
-        position: absolute;
-        z-index: 1000;
-        right: 0;
-        top: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        text-align: center;
-        font-size: 9pt;
-        /*border-left: 1px solid #ddd;*/
-    }
-
-    #feeds .active .unread_items_counter {
-        /*border-left: 1px solid #c5c5c5;*/
-    }
-
-    #feeds li:hover > .unread_items_counter, #feeds .all_read > .unread_items_counter {
-        display: none;
-    }
-
-    #feeds > ul {
-        min-height: 100%;
-        overflow-x: hidden;
-    }
-
-    .dnd_over {
-        -moz-transition: padding-bottom 500ms ease 0s;
-        -o-transition: padding-bottom 500ms ease 0s;
-        -webkit-transition: padding-bottom 500ms ease 0s;
-        -ms-transition: padding-bottom 500ms ease 0s;
-        transition: padding-bottom 500ms ease 0s;
-    }
-
-    #feeds > ul.dnd_over {
-
-    }
-    .dnd_over > ul {
-        -moz-transition: padding-bottom 500ms ease 0s;
-        -o-transition: padding-bottom 500ms ease 0s;
-        -webkit-transition: padding-bottom 500ms ease 0s;
-        -ms-transition: padding-bottom 500ms ease 0s;
-        transition: padding-bottom 500ms ease 0s;
-        padding-bottom: 2.5em! important;
-
-    }
-    #feeds > ul ul.dnd_over {
-        -moz-transition: padding-bottom 500ms ease 0s;
-        -o-transition: padding-bottom 500ms ease 0s;
-        -webkit-transition: padding-bottom 500ms ease 0s;
-        -ms-transition: padding-bottom 500ms ease 0s;
-        transition: padding-bottom 500ms ease 0s;
-        padding-bottom: 2.5em !important;
-    }
-
-    .all_read {
-        font-weight: normal !important;
-    }
-
-
-    #feeds .buttons {
-        position: absolute;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        display: none;
-    }
-
-        #feeds .buttons button {
-            margin: .6em .3em 0 0;
-            background-position: center;
-            background-repeat: no-repeat;
-        }
-
-        #feeds li:hover > .buttons {
-            display: block;
-        }
-
-        #feeds .buttons button.feeds_delete {
-            background-image: url('%webroot%/core/img/actions/delete.svg');
-        }
-
-        #feeds .buttons button.feeds_edit {
-            background-image: url('%webroot%/core/img/actions/rename.svg');
-        }
-
-        #feeds .buttons button.feeds_markread {
-            background-image: url('%appswebroot%/news/img/mark_read.svg');
-        }
-
-    #feeds button.collapsable_trigger {
-        position: absolute;
-        left: .5em;
-        top: .4em;
-        background: none;
-        background-image: url('%webroot%/core/img/actions/triangle-s.svg');
-        background-repeat: no-repeat;
-        background-size: 16px 16px;
-        height: 16px;
-        width: 16px;
-        border: none;
-        border-radius: 0;
-        outline: none !important;
-        box-shadow: none;
-        -moz-box-shadow: none;
-        display: none;
-        -moz-transform: rotate(-90deg);
-        -webkit-transform: rotate(-90deg);
-        -ms-transform:rotate(-90deg);
-        -o-transform:rotate(-90deg);
-        transform: rotate(-90deg);
-    }
-
-    #feeds .open .collapsable_trigger {
-        -moz-transform: rotate(0deg);
-        -webkit-transform: rotate(0deg);
-        -ms-transform:rotate(0deg);
-        -o-transform:rotate(0deg);
-        transform: rotate(0deg);
-    }
-
-        #feeds .folder.collapsable:hover button.collapsable_trigger {
-            display: block;
-        }
-
-    #feeds li {
-        border-bottom: 1px solid #ddd;
-        border-top: 1px solid #fff;
-        padding: 0 35px 0  0;
-        font-weight: bold ;
-        box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        width: 100%;
-        position: relative;
-    }
-
-    #feeds li.active {
-        background: none !important;
-        background-color: #d0d0d0 !important;
-        border-bottom: 1px solid #ccc;
-        border-top: 1px solid #ddd;
-        text-shadow: 0 1px 0 rgba(255,255,255,.7);
-    }
-
-        #feeds li a.title {
-            color: #333;
-            box-sizing: border-box;
-            -moz-box-sizing: border-box;
-            width: 100%;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-            display: block;
-            padding-left: 2em;
-            padding: 0 .5em 0 2.5em;
-            background-size: 16px 16px;
-            background-repeat: no-repeat;
-            background-position: .7em center;
-            line-height: 2.5em;
-        }
-
-            #feeds li:hover {
-                padding: 0;
-            }
-
-                #feeds li:hover > a.title {
-                    padding-right: 4em !important;
-                }
-
-                #feeds li.folder:hover > a.title {
-                    padding-right: 5.5em !important;
-                }
-
-        #feeds .starred a.title {
-            background-image: url('%appswebroot%/news/img/starred.png');
-        }
-
-        #feeds .subscriptions a.title {
-            background-image: url('%appswebroot%/news/img/rss.svg');
-        }
-
-    #feeds .feed {
-        border-bottom: 1px solid #ccc;
-    }
-
-    #feeds li:hover, #feeds li:active, .ui-draggable-dragging {
-        background-color: #ddd;
-        border-bottom: 1px solid #ccc !important;
-        border-top: 1px solid #d4d4d4 !important;
-    }
-
-    #feeds .folder {
-        padding: 0;
-    }
-
-        #feeds .folder > a.title {
-            background-image: url('%webroot%/core/img/places/folder.svg');
-            /*border-bottom: 1px solid #ddd;*/
-            text-transform:uppercase;
-        }
-
-        #feeds .folder.collapsable:hover a {
-            background-image: none;
-        }
-
-    #feeds .folder.collapsable ul {
-        display: none;
-    }
-
-    #feeds .folder.collapsable.open ul {
-        display: block;
-    }
-
-    #feeds .folder.collapsable.open {
-        padding: 0;
-        background-image: linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
-        background-image: -o-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
-        background-image: -moz-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
-        background-image: -webkit-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
-        background-image: -ms-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
-    }
-
-        #feeds .folder.collapsable.open:hover {
-            -webkit-box-shadow: inset 0 0 3px #cccccc;
-            box-shadow: inset 0 0 3px #cccccc;
-        }
-
-
-        #feeds .folder.open ul li {
-            border: 0;
-            border-bottom: 1px solid rgba(0,0,0,0);
-            border-top: 1px solid rgba(0,0,0,0);
-            box-sizing: border-box;
-            -moz-box-sizing: border-box;
-        }
-
-            #feeds .folder.open ul li a.title {
-                padding-left: 4.3em;
-                padding-right: .5em;
-                background-position: 2.5em center;
-            }
+	#feeds .unread_items_counter {
+		padding: 6px 8px 5px;
+		position: absolute;
+		z-index: 5;
+		right: 0;
+		top: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		text-align: center;
+		font-size: 9pt;
+		/*border-left: 1px solid #ddd;*/
+	}
+
+
+	#feeds li:hover > .unread_items_counter, #feeds .all_read > .unread_items_counter {
+		display: none;
+	}
+
+	#feeds > ul {
+		min-height: 100%;
+		overflow-x: hidden;
+	}
+
+	.dnd_over {
+		-moz-transition: padding-bottom 500ms ease 0s;
+		-o-transition: padding-bottom 500ms ease 0s;
+		-webkit-transition: padding-bottom 500ms ease 0s;
+		-ms-transition: padding-bottom 500ms ease 0s;
+		transition: padding-bottom 500ms ease 0s;
+	}
+
+	#feeds > ul.dnd_over {
+
+	}
+	.dnd_over > ul {
+		-moz-transition: padding-bottom 500ms ease 0s;
+		-o-transition: padding-bottom 500ms ease 0s;
+		-webkit-transition: padding-bottom 500ms ease 0s;
+		-ms-transition: padding-bottom 500ms ease 0s;
+		transition: padding-bottom 500ms ease 0s;
+		padding-bottom: 2.5em! important;
+
+	}
+	#feeds > ul ul.dnd_over {
+		-moz-transition: padding-bottom 500ms ease 0s;
+		-o-transition: padding-bottom 500ms ease 0s;
+		-webkit-transition: padding-bottom 500ms ease 0s;
+		-ms-transition: padding-bottom 500ms ease 0s;
+		transition: padding-bottom 500ms ease 0s;
+		padding-bottom: 2.5em !important;
+	}
+
+	.all_read {
+		font-weight: normal !important;
+	}
+
+
+	#feeds .buttons {
+		position: absolute;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		display: none;
+	}
+
+		#feeds .buttons button {
+			margin: .6em .3em 0 0;
+			background-position: center;
+			background-repeat: no-repeat;
+		}
+
+		#feeds li:hover > .buttons {
+			display: block;
+		}
+
+		#feeds .buttons button.feeds_delete {
+			background-image: url('%webroot%/core/img/actions/delete.svg');
+		}
+
+		#feeds .buttons button.feeds_edit {
+			background-image: url('%webroot%/core/img/actions/rename.svg');
+		}
+
+		#feeds .buttons button.feeds_markread {
+			background-image: url('%appswebroot%/news/img/mark_read.svg');
+		}
+
+	#feeds button.collapsable_trigger {
+		position: absolute;
+		left: .5em;
+		top: .4em;
+		background: none;
+		background-image: url('%webroot%/core/img/actions/triangle-s.svg');
+		background-repeat: no-repeat;
+		background-size: 16px 16px;
+		height: 16px;
+		width: 16px;
+		border: none;
+		border-radius: 0;
+		outline: none !important;
+		box-shadow: none;
+		-moz-box-shadow: none;
+		display: none;
+		-moz-transform: rotate(-90deg);
+		-webkit-transform: rotate(-90deg);
+		-ms-transform:rotate(-90deg);
+		-o-transform:rotate(-90deg);
+		transform: rotate(-90deg);
+	}
+
+	#feeds .open .collapsable_trigger {
+		-moz-transform: rotate(0deg);
+		-webkit-transform: rotate(0deg);
+		-ms-transform:rotate(0deg);
+		-o-transform:rotate(0deg);
+		transform: rotate(0deg);
+	}
+
+		#feeds .folder.collapsable:hover button.collapsable_trigger {
+			display: block;
+		}
+
+	#feeds li {
+		border-bottom: 1px solid #ddd;
+		border-top: 1px solid #fff;
+		padding: 0 35px 0  0;
+		font-weight: bold ;
+		box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		width: 100%;
+		position: relative;
+	}
+
+	#feeds li.active {
+		background: none !important;
+		background-color: #d0d0d0 !important;
+		border-bottom: 1px solid #ccc;
+		border-top: 1px solid #ddd;
+		text-shadow: 0 1px 0 rgba(255,255,255,.7);
+	}
+
+		#feeds li a.title {
+			color: #333;
+			box-sizing: border-box;
+			-moz-box-sizing: border-box;
+			width: 100%;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+			display: block;
+			padding-left: 2em;
+			padding: 0 .5em 0 2.5em;
+			background-size: 16px 16px;
+			background-repeat: no-repeat;
+			background-position: .7em center;
+			line-height: 2.5em;
+		}
+
+			#feeds li:hover {
+				padding: 0;
+			}
+
+				#feeds li:hover > a.title {
+					padding-right: 4em !important;
+				}
+
+				#feeds li.folder:hover > a.title {
+					padding-right: 5.5em !important;
+				}
+
+		#feeds .starred a.title {
+			background-image: url('%appswebroot%/news/img/starred.png');
+		}
+
+		#feeds .subscriptions a.title {
+			background-image: url('%appswebroot%/news/img/rss.svg');
+		}
+
+	#feeds .feed {
+		border-bottom: 1px solid #ccc;
+	}
+
+	#feeds li:hover, #feeds li:active, .ui-draggable-dragging {
+		background-color: #ddd;
+		border-bottom: 1px solid #ccc !important;
+		border-top: 1px solid #d4d4d4 !important;
+	}
+
+	#feeds .folder {
+		padding: 0;
+	}
+
+		#feeds .folder > a.title {
+			background-image: url('%webroot%/core/img/places/folder.svg');
+			/*border-bottom: 1px solid #ddd;*/
+			text-transform:uppercase;
+		}
+
+		#feeds .folder.collapsable:hover a {
+			background-image: none;
+		}
+
+	#feeds .folder.collapsable ul {
+		display: none;
+	}
+
+	#feeds .folder.collapsable.open ul {
+		display: block;
+	}
+
+	#feeds .folder.collapsable.open {
+		padding: 0;
+		background-image: linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
+		background-image: -o-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
+		background-image: -moz-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
+		background-image: -webkit-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
+		background-image: -ms-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
+	}
+
+		#feeds .folder.collapsable.open:hover {
+			-webkit-box-shadow: inset 0 0 3px #cccccc;
+			box-shadow: inset 0 0 3px #cccccc;
+		}
+
+
+		#feeds .folder.open ul li {
+			border: 0;
+			border-bottom: 1px solid rgba(0,0,0,0);
+			border-top: 1px solid rgba(0,0,0,0);
+			box-sizing: border-box;
+			-moz-box-sizing: border-box;
+		}
+
+			#feeds .folder.open ul li a.title {
+				padding-left: 4.3em;
+				padding-right: .5em;
+				background-position: 2.5em center;
+			}
 
 
 
 /* feed settings */
-#feed_settings {
-    padding: 0;
-    bottom: 0;
-    overflow:visible;
-    height:2.8em;
-    width: 20em;
-    margin:0;
-    z-index: 2;
-    background:#eee;
-    border-top: 1px solid #ccc;
-    border-right: 1px solid #ccc;
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    position:fixed;
-}
-
-    #feed_settings .controls {
-        height: 100%;
-        width: 100%;
-    }
-
-    #feed_settings .controls > li {
-        display: inline-block;
-        float: left;
-        margin: 0;
-        padding: 0;
-
-    }
-
-    #feed_settings button {
-        height: 2.4em;
-        width: 2.4em;
-        padding: .2em .1em 0 .1em;
-        margin: .15em 0 0 .15em;
-    }
-
-        #feed_settings button img {
-            border: none;
-        }
-
-    #feed_settings .controls > li:last-child button {
-        margin-right: .3em;
-    }
-
-    #feed_settings #view button {
-        padding-top: .2em;
-        background-size: 80%;
-        background-position: center center;
-        background-repeat: no-repeat;
-    }
-
-    #feed_settings #view.show_all button {
-        background-image: url('%appswebroot%/news/img/eye_all.png');
-    }
-
-    #feed_settings #view.show_unread button {
-        background-image: url('%appswebroot%/news/img/eye_unread.png');
-    }
-
-    #feed_settings #addfeedfolder {
-        margin: 0 .3em .3em .3em;
-    }
-
-        #feed_settings #addfeedfolder #addfolder {
-            background: url('%webroot%/core/img/places/folder.svg') no-repeat 10px center;
-        }
-
-        #feed_settings #addfeedfolder #addfeed {
-            background: url('%appswebroot%/news/img/rss.svg') no-repeat 10px center;
-        }
-
-        /*
-        #feed_settings #addfeedfolder:hover ul#feedfoldermenu{
-            display: block;
-        }*/
-
-        #feed_settings ul#feedfoldermenu {
-            display: none;
-            background:#EEEEEE;
-            background:-webkit-gradient(linear, 0 0, 0 100%, from(#DCDCDC), to(#EEEEEE));
-            background:-moz-linear-gradient(#DCDCDC, #EEEEEE);
-            background:-o-linear-gradient(#DCDCDC, #EEEEEE);
-            background:linear-gradient(#DCDCDC, #EEEEEE);
-            position:fixed;
-            z-index: 6;
-            margin-left: 0;
-            bottom: 2.8em;
-            border-left:1px solid #ccc;
-            border-top:1px solid #ccc;
-            border-right:1px solid #ccc;
-            border-bottom: 0;
-            -moz-box-shadow: 0 -3px 3px -3px #000;
-            -webkit-box-shadow: 0 -3px 3px -3px #000;
-            box-shadow: 0 -3px 3px -3px #000;
-        }
-
-            #feed_settings ul#feedfoldermenu li {
-                padding: 0 1em 0 2.5em;
-                float: none !important;
-                text-align: left;
-            }
-
-                #feed_settings ul#feedfoldermenu li:hover {
-                    background-color: #ccc !important;
-                }
 
+.bottom_settings {
+	padding: 0;
+	bottom: 0;
+	width: 20em;
+	margin:0;
+	z-index: 100;
+	background:#eee;
+	border-top: 1px solid #ccc;
+	border-right: 1px solid #ccc;
+	box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	position:absolute;
+	transition: height 500ms;
+}
 
+.open_add {
+	height: 0;
+	z-index: 102;
+}
 
+.open_add .personalblock {
+	margin-bottom: 1em;
+}
 
-/* item view */
-#rightcontent {
-    top: 3.5em !important;
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    left: 32.5em;
-    overflow: hidden;
+.open_add .personalblock legend {
+	margin-bottom: -1em;
 }
 
-    /**
-     * Area below the feed title and controls
-     */
-    #rightcontent #feed_items {
-        box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        overflow: auto;
-        height: 100%;
-    }
-
-        #rightcontent #feed_items.loading {
-            background-image: url('%webroot%/core/img/loading.gif');
-            background-position: center;
-            background-repeat: no-repeat;
-            background-size:
-        }
-
-        #rightcontent #feed_items li:active {
-            background: none;
-        }
-
-        /**
-         * Rules for a single feed item
-         */
-        .feed_item {
-            border-top: 1px solid #ccc;
-            min-height: 100px;
-            background-image: linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 6em);
-            background-image: -o-linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 6em);
-            background-image: -moz-linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 6em);
-            background-image: -webkit-linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 6em);
-            background-image: -ms-linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 6em);
-            padding: 2.5em 0 0 0;
-            cursor: default;
-        }
-
-        .feed_item.viewed {
-            border-right: 5px solid #F28627;
-        }
-
-
-        .feed_item:first-child {
-            border-top: 0;
-        }
-
-            /**
-             * Utils panel
-             */
-            .utils {
-                height: 2em;
-                margin: 0 0 0 1em;
-                float: left;
-            }
-
-            /**
-             * Primary feed utils which are always shown
-             */
-            .feed_item .primary_item_utils {
-                float: left;
-            }
-
-                .feed_item .primary_item_utils li {
-                    display: inline-block;
-                    line-height: 1.5em;
-                    font-size: 1em;
-                    color: #aaa;
-                    float: left;
-                    margin-left: ;
-                    cursor: default;
-                }
-
-                .feed_item .primary_item_utils li:first-child { margin: 0}
-                .feed_item .primary_item_utils li.star {
-                    background-image: url('%appswebroot%/news/img/inactive_star.svg');
-                    background-repeat: no-repeat;
-                    background-size: 1.5em 1.5em;
-                    width: 1.5em;
-                    height: 1.5em;
-                    cursor: pointer;
-                }
-
-                .feed_item .primary_item_utils li.star.important,
-                .feed_item .primary_item_utils li.star:hover {
-                    background-image: url('%appswebroot%/news/img/active_star.svg');
-                }
-
-            /**
-             * Feed title
-             */
-            .feed_item h1.item_title {
-                font-size: 1.5em;
-                margin: 0 13em 0 2.1em;
-                font-weight: bold;
-            }
-
-                .feed_item h1.item_title a {
-                    color: #222;
-                }
-                    .feed_item h1.item_title a:hover {
-                        color: #222;
-                        text-decoration: underline;
-                    }
-
-            /**
-             * Feed title when read
-             */
-            .feed_item.read h1.item_title {
-                font-weight: normal;
-            }
-
-                .feed_item.read h1.item_title a {
-                    color: #888;
-                }
-
-            /**
-             * Title of the feed to which the item belongs
-             */
-            .feed_item h2.item_feed_title {
-                color: #aaa;
-                font-size: 1.1em;
-                margin-left: 3em;
-            }
-
-            /**
-             * Author of the item
-             */
-            .feed_item h2.item_author {
-                color: #aaa;
-                font-size: 1.1em;
-                margin: .2em 0 0 3em;
-            }
-
-                .feed_item h2.item_author a {
-                    color: inherit;
-                }
-
-                    .feed_item h2.item_author a:hover {
-                        text-decoration: underline;
-                    }
-
-            .timestamp {
-                display: none;
-            }
-
-            /**
-             * Feed timestamp
-             */
-            .timeago {
-                float: right;
-                color: #aaa;
-                margin: 0 1.2em 0 0;
-                font-size: 1.1em;
-            }
-
-            /**
-             * Body of the feed item
-             */
-            .feed_item div.body {
-                padding: .75em 3em 0 3em;
-                max-width: 55em;
-                font-size: 1.1em;
-                clear: both;
-                overflow: auto;
-            }
-
-                .feed_item div.body p {
-                    line-height: 1.5;
-                    margin: .5em 0 1em 0;
-                }
-
-                .feed_item div.body img, .feed_item div.body table {
-                    max-width: 100%;
-                    height: auto;
-                    overflow: auto;
-                    word-wrap: break-word;
-                }
-
-                .feed_item div.body > img:first-child {
-                    padding: 0 1em 0 0;
-                    float: left;
-                }
-
-                .feed_item div.body h1, .feed_item div.body h2 {
-                    font-size: 1.25em;
-                    font-weight: bold;
-                    color: #222;
-                    margin: 1.5em 0 0 0;
-                }
-
-                .feed_item div.body h3 {
-                    font-size: 1.1em;
-                    font-weight: bold;
-                    color: #222;
-                    margin: 1.5em 0 0 0;
-                    text-decoration: underline;
-                }
-
-                .feed_item div.body > div {
-                    margin: .5em 0;
-                }
-
-                .feed_item div.body a {
-                    color: #0000ff;
-                    text-decoration: underline;
-                }
-
-                .feed_item div.body ul {
-                    margin: .5em 0;
-                    padding-left: 1em;
-                    list-style-type: disc;
-                }
-
-                .feed_item div.body ol {
-                    margin: .5em 0;
-                    padding-left: 1.5em;
-                }
-
-                    .feed_item div.body ul li {
-                        cursor: default;
-                        line-height: 1.5em;
-                    }
-
-                .feed_item div.body pre {
-                    padding: .5em .5em .5em 1em;
-                    background-color: #dadada;
-                    border: 1px solid #ccc;
-                    margin: .5em 0 1em 0;
-                    background-image: linear-gradient(top, rgb(215,215,215) 0%, rgb(220,220,220) 100%);
-                    background-image: -o-linear-gradient(top, rgb(215,215,215) 0%, rgb(220,220,220) 100%);
-                    background-image: -moz-linear-gradient(top, rgb(215,215,215) 0%, rgb(220,220,220) 100%);
-                    background-image: -webkit-linear-gradient(top, rgb(215,215,215) 0%, rgb(220,220,220) 100%);
-                    background-image: -ms-linear-gradient(top, rgb(215,215,215) 0%, rgb(220,220,220) 100%);
-                    overflow-y: auto;
-                }
-
-                    .feed_item div.body pre code {
-                        font-family: monospace;
-                        font-size: 1.5em;
-                    }
-            .feed_item div.body > *:last-child {
-                margin-bottom: 0;
-            }
-
-        /**
-         * Line with utils at the bottom
-         */
-        .bottom_utils {
-            width: 100%;
-            height: 2.5em;
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            -moz-box-sizing: border-box;
-        }
-
-            /**
-             * Secondary feed items which are only shown on hover
-             */
-            .feed_item .secondary_item_utils {
-                display: none;
-                float: right;
-                margin: 0 1.2em;
-            }
-
-            .feed_item .secondary_item_utils, .feed_item .secondary_item_utils a {
-                color: #000;
-            }
-
-            .feed_item:hover .secondary_item_utils {
-                display: block;
-            }
-
-                .feed_item .secondary_item_utils li {
-                    display: inline-block;
-                    padding-left: 25px;
-                }
-
-                .feed_item li.share_link {
-                    background-image: url('%webroot%/core/img/actions/share.svg'); 
-                    background-repeat: no-repeat;
-                    background-position: right center;
-                    padding-right: 20px;
-                }
-
-                .feed_item:hover .secondary_item_utils li.keep_unread {
-                    cursor: pointer;
-                }
-
-                .feed_item .secondary_item_utils li input[type=checkbox]{
-                    margin-left: 5px;
-                }
-                
-
-/* dialog/menues */
-#addfolder_dialog, #addfeed_dialog, #changefolder_dialog {
-    display: none;
+.open_add.expanded {
+	height: 18em;
 }
 
-.ui-dialog tbody tr:hover, .ui-dialog tr:active {
-    background: none !important;
+
+.bottom_popup {
+	transition: height 500ms;
 }
 
-.dropdownBtn {
-    width: 12.5em;
-    padding-left: 0;
-    padding-right:20px;
-    background: url('%webroot%/core/img/actions/triangle-s.svg') no-repeat right center;
-    text-align: left;
-    overflow: hidden;
+
+