diff --git a/app/views/Note/note-dev.html b/app/views/Note/note-dev.html
index c8eb9c3..04282db 100644
--- a/app/views/Note/note-dev.html
+++ b/app/views/Note/note-dev.html
@@ -11,8 +11,18 @@
 <link href="css/bootstrap.css" rel="stylesheet" />
 <!-- 先加载, 没有样式, 宽度不定 -->
 <link rel="stylesheet" href="tinymce/skins/custom/skin.min.css" type="text/css" />
+
 <!-- leanote css -->
-<link rel="stylesheet" href="css/theme/{{if .userInfo.Theme}}{{.userInfo.Theme}}{{else}}default{{end}}.css" type="text/css" id="themeLink" />
+<script>
+var hash = location.hash;
+if(hash == "#writing") {
+	var files = '<link rel="stylesheet" href="css/theme/writting-overwrite.css" type="text/css" id="themeLink" />';
+} else {
+	var files ='<link rel="stylesheet" href="css/theme/{{if .userInfo.Theme}}{{.userInfo.Theme}}{{else}}default{{end}}.css" type="text/css" id="themeLink" />';
+}
+document.write(files);
+</script>
+
 <link href="css/font-awesome-4.0.3/css/font-awesome.css" rel="stylesheet" />
 
 <!-- For Develop writting mod -->
@@ -44,14 +54,14 @@ function log(o) {
 					 <span id="leftSwitcher2" title="{{msg . "leftShow"}}">lea</span>
 				</div>
 				<!-- search -->
-				<div class="pull-left">
+				<div class="pull-left" id="searchWrap">
 					<form class="navbar-form form-inline col-lg-2 hidden-xs" id="searchNote">
 						<input class="form-control" placeholder="Search" type="text" id="searchNoteInput">
 					</form>
 				</div>
 
 				<!-- 全局按钮 -->
-				<div class="pull-left" style="line-height: 40px; margin-top: 10px;">
+				<div class="pull-left" style="" id="newNoteWrap">
 				
 					<!-- 新建笔记 -->
 					<div id="newMyNote">
@@ -59,11 +69,12 @@ function log(o) {
 							<i class="fa fa-file-o"></i>
 							{{msg . "newNote"}}
 						</a>
-						|
+						<span class="new-split">|</span>
 						<a id="newNoteMarkdownBtn" title="{{msg . "newMarkdown"}}">
 						Markdown
 						</a>
-						 - <span id="curNotebookForNewNote" notebookId=""></span>
+						<span class="for-split"> - </span>
+						<span id="curNotebookForNewNote" notebookId=""></span>
 						<div class="dropdown" style="display: inline-block">
 							<a class="ios7-a dropdown-toggle"
 								id="dropdownMenu2" data-toggle="dropdown"> 
@@ -80,11 +91,12 @@ function log(o) {
 							<i class="fa fa-file-o"></i>
 							{{msg . "newNote"}}
 						</a>
-						|
+						<span class="new-split">|</span>
 						<a id="newShareNoteMarkdownBtn" title="{{msg . "newMarkdown"}}">
 						Markdown
 						</a>
-						 - <span id="curNotebookForNewSharedNote" notebookId="" userId=""></span>
+						<span class="for-split"> - </span>
+						<span id="curNotebookForNewSharedNote" notebookId="" userId=""></span>
 						<div class="dropdown" style="display: inline-block">
 							<a class="ios7-a dropdown-toggle"
 								id="dropdownMenu2" data-toggle="dropdown"> 
@@ -96,11 +108,10 @@ function log(o) {
 					</div>				
 				</div>
 				
-				<div class="pull-left" style="line-height: 40px; margin-top: 10px; margin-left: 10px;" id="leanoteMsg">
+				<div class="pull-left" id="leanoteMsg">
 					<span id="msg" style="display: inline-block;"></span>
-					<img id="loading" style="visibility: hidden" src="/images/loading-a-20.gif" />
-					
-					
+					<span id="loading">
+					</span>
 				</div>
 				
 				<!-- 
@@ -165,6 +176,10 @@ function log(o) {
 				{{end}}
 				{{end}}
 				
+				<div class="pull-right" style="line-height: 60px; margin-right:10px" id="toggleEditorMode">
+					<a href="#writing">写作模式</a>
+				</div>
+				
 				<!--
 				<ul id="setting" class="pull-right">
 					<li class="dropdown messages">
@@ -463,6 +478,7 @@ function log(o) {
 								id="moreBtn"> <i class="fa fa-angle-down"></i>
 							</a>
 						</div>
+						<div class="editorBg"></div>
 						<div id="leanoteNav">
 							<h1>
 								<i class="fa fa-align-justify" title="文档导航"></i>
@@ -479,6 +495,7 @@ function log(o) {
 					
 					<div id="mdEditor">
 						<div id="wmd-button-bar" id="mdBar"></div>
+						<div class="editorBg"></div>
 						<!-- 为了scroll -->
 	                    
 						<div class="clearfix" id="mdEditorPreview">
diff --git a/public/css/editor/editor-writting-mode.css b/public/css/editor/editor-writting-mode.css
new file mode 100644
index 0000000..fb9521f
--- /dev/null
+++ b/public/css/editor/editor-writting-mode.css
@@ -0,0 +1,12 @@
+html {
+  border: none;
+}
+body {
+  background-color: #fbfcf7;
+}
+* {
+  font-size: 16px;
+}
+pre {
+  font-size: 14px;
+}
diff --git a/public/css/editor/editor-writting-mode.less b/public/css/editor/editor-writting-mode.less
new file mode 100644
index 0000000..78eb09d
--- /dev/null
+++ b/public/css/editor/editor-writting-mode.less
@@ -0,0 +1,15 @@
+
+@bgColor: #fbfcf7;
+
+html {
+	border: none;
+}
+body {
+	background-color: @bgColor;
+}
+* {
+	font-size: 16px;
+}
+pre {
+	font-size:14px;
+}
\ No newline at end of file
diff --git a/public/css/editor/editor.css b/public/css/editor/editor.css
new file mode 100644
index 0000000..26895dc
--- /dev/null
+++ b/public/css/editor/editor.css
@@ -0,0 +1,2 @@
+html{margin-top:3px;padding:3px;border:1px solid #ebeff2;border-radius:5px;-webkit-border-radius:5px;border-width:1px;box-shadow:none}
+*{font-family:'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif}
diff --git a/public/css/editor/editor.less b/public/css/editor/editor.less
new file mode 100644
index 0000000..5ca52ea
--- /dev/null
+++ b/public/css/editor/editor.less
@@ -0,0 +1,24 @@
+
+@bgColor: #fff;
+@headerBgColor: #fff;
+@fontFamily: 'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif;
+@aWhiteColor: #fff;
+@aBlackColor: #000;
+@borderColor: #EBEFF2;
+@headerHeight: 60px;
+@hColor: #5AD4A0;
+@titleColor: @hColor;
+@fontSize: 14px;
+
+html {
+	margin-top: 3px;
+	padding: 3px;
+	border: 1px solid @borderColor;
+	border-radius: 5px;
+	-webkit-border-radius: 5px;
+	border-width: 1px;
+	box-shadow: none;
+}
+* {
+	font-family: @fontFamily;
+}
\ No newline at end of file
diff --git a/public/css/theme/default.css b/public/css/theme/default.css
index c4ba36c..8b8205a 100644
--- a/public/css/theme/default.css
+++ b/public/css/theme/default.css
@@ -1,147 +1,1115 @@
-@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;src:local('Open Sans Light'),local('OpenSans-Light'),url('../../fonts/open-sans2/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff') format('woff')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans'),local('OpenSans'),url('../../fonts/open-sans2/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url('../../fonts/open-sans2/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff') format('woff')}@font-face{font-family:'Open Sans';font-style:italic;font-weight:400;src:local('Open Sans Italic'),local('OpenSans-Italic'),url('../../fonts/open-sans2/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff') format('woff')}::selection{background:#000;color:#fff}
-::-moz-selection{background:#000;color:#fff}
-::-webkit-selection{background:#000;color:#fff}
-*,body{font-family:'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif;font-weight:300;font-size:14px}
-h1,h2,h3{font-family:'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif;font-weight:300 !important}
-a{color:#000;cursor:pointer}
-a:hover{text-decoration:none !important;color:#000}
-a.raw{color:#428bca}
-a.raw:hover{color:#2a6496}
-#header{height:60px;background-color:#25313e;color:#fff;border-bottom:1px solid #ebeff2;webkit-user-select:none;-webkit-app-region:drag;}#header a{color:#ccc}
-#header li{color:#000}
-#header li a{color:#000}
-#logo,#logo span{line-height:50px;font-size:28px}
-#logo{width:140px;height:59px;padding-left:10px;padding-top:0;border-bottom:1px solid transparent;border-color:rgba(255,255,255,0.1)}
-#logo span,#switcher span{background-color:#000;border-radius:10px;display:inline-block;padding:4px 0;line-height:1}
-#switcher{line-height:50px;padding-top:6px;padding-right:5px;width:30px;text-align:center}#switcher i{font-size:16px;cursor:pointer}#switcher i:hover{color:#0fb264}
-#switcher span{border-radius:5px;padding:8px 4px;cursor:pointer;font-size:16px}#switcher span:hover{color:#0fb264}
-#searchNote{padding-left:0;line-height:60px;margin:0}#searchNote input{background-size:18px 13px;border-color:#ebeff2;border:none;color:#ccc;background-color:#000;padding-left:14px;border-radius:5px;width:250px;line-height:20px;box-shadow:none}#searchNote input:focus{outline:none !important;border-color:#0fb264;box-shadow:none}
-#header ul{margin:0;padding:0;list-style:none}
-#header ul li.dropdown{display:inline-block;height:60px}
-#header ul>li>a.dropdown-toggle{display:block;padding:15px 5px 0 0;position:relative}
-#header span.icon{display:inline-block;font-size:28px;color:#999}
-.dropdown-menu{border-radius:0;margin:0;-webkit-box-shadow:none;box-shadow:none;border:1px solid #0fb264;overflow-x:hidden;overflow-y:auto}
-.dropdown-menu li{padding-left:10px;width:100%;height:30px;line-height:30px}
-.dropdown-menu>li>a{color:#000;display:inline-block;padding:3px 3px}
-.dropdown-menu>li:hover,.dropdown-menu>li:focus{background-color:#ebeff2}
-.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{background-color:#ebeff2}
-.ios7-a{display:inline-block;padding:0 10px 0 5px;height:40px;vertical-align:middle;line-height:38px;cursor:pointer}
-#page{overflow:auto;position:absolute;top:0;left:0;bottom:0;right:0}
-#pageInner{position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden}
-#mainContainer{position:absolute;top:59px;left:0;right:0;bottom:0;overflow:auto;zoom:1}
-#mainMask{position:absolute;left:0;right:0;bottom:0;top:0;background-color:#fff;text-align:center;padding-top:100px;z-index:1000}
-.noteSplit{position:absolute;top:0;width:5px;height:100%;overflow:hidden;z-index:5;cursor:col-resize}
-#notebookSplitter{left:170px}
-#noteSplitter{left:250px}
-#leftNotebook{position:absolute;left:0;top:0;bottom:0;width:170px}
-#notebook,#notebookMin{position:absolute;left:0;bottom:0;top:0;right:0;background-color:#41586e;z-index:2}
-#notebookMin{z-index:1;overflow-y:visible;overflow-x:visible;background-color:#41586e}#notebookMin div.minContainer{border-bottom:1px solid transparent;border-color:rgba(255,255,255,0.3);padding:5px;position:relative}#notebookMin div.minContainer i{font-size:20px;color:#fff}
-#notebookMin div.minContainer:hover i{color:#0fb264}
-#notebookMin div.minContainer ul{background-color:#fff;opacity:.8;display:none;list-style:none;margin:0;margin-left:20px;padding:5px 0;border:1px solid #0fb264;position:absolute;z-index:1000;top:0;left:10px;width:150px}#notebookMin div.minContainer ul li{padding:0 5px;cursor:pointer}#notebookMin div.minContainer ul li span{cursor:pointer}
-#notebookMin div.minContainer ul li a{cursor:pointer}
-#notebookBottom{position:absolute;bottom:0;height:30px;right:0;left:0;line-height:30px;text-align:right;padding-right:5px;background-color:#eee}#notebookBottom #leftSwitcher{border:1px solid #ccc;padding:3px 8px;cursor:pointer}
-#noteAndEditor{position:absolute;bottom:0;top:0;right:0;left:170px}
-#noteList{position:absolute;bottom:0;top:0;width:250px;overflow-x:hidden;overflow-y:hidden;border-right:1px solid #cfcfcf;border-left:1px solid #cfcfcf}
-#note{position:absolute;bottom:0;top:0;left:250px;right:0;padding-left:5px;overflow-y:hidden;overflow-x:auto;background-color:#fff}
-.folderHeader{min-height:35px;line-height:35px;cursor:pointer;border-bottom:1px solid transparent;border-color:rgba(255,255,255,0.05)}
-.folderHeader span{display:inline-block;line-height:35px;color:#fff;font-size:16px}
-.folderHeader .fa-left,.each-user .fa{display:inline-block;line-height:35px;font-size:16px;width:35px;border-right:1px solid rgba(255,255,255,0.05);text-align:center;color:#fff}
-.each-user div{cursor:pointer;border-bottom:1px solid transparent;border-color:rgba(255,255,255,0.05)}.each-user div span{display:inline-block;line-height:35px;color:#fff;padding-left:3px;font-size:14px}
-.each-user div .fa{width:20px;border-right:none}
-.each-user ul{list-style:none;margin:0;padding:0}.each-user ul a{padding-left:20px;font-size:12px}
-#myNotebooks.opened .fa-left{}
-#myNotebooks .folderBody{}
-#addNotebookPlus{padding-right:10px;color:#adbece}#addNotebookPlus .fa{font-size:16px}
-.closed .folder-icon{width:9px;height:11px;background-position:-108px -149px}
-.closed .folderBody{display:none}
-.folderBody{list-style:none;margin:0;padding:0;background-color:#37485e}
-.folderBody li{line-height:30px}
-.folderBody a{padding-left:20px;display:block;color:#adbece;cursor:pointer;border-bottom:1px solid transparent;border-color:rgba(255,255,255,0.05);line-height:35px}
-.folderBody a:hover,.folderBody .contextmenu-hover{color:#fff;background-color:rgba(0,0,0,0.05) !important}
-.folderBody a.active,.folderBody a.active:hover{background-color:#25313e !important;color:#fff}
-#notebookList input{border:1px solid #ebeff2;width:90%;box-shadow:none}#notebookList input:focus{outline:none !important;border-color:#0fb264}
-#myTag .folderBody{}#myTag .folderBody li{position:relative}
-#myTag .folderBody li .badge{width:40px;position:absolute;right:3px;top:7px;font-weight:normal;background-color:#fff;color:#000;border:1px solid #ebeff2}
-#search{border:#bababa 1px solid;background-color:#fff;white-space:nowrap;position:absolute;height:30px;left:3px;right:60px;margin-top:3px}
-#search label{display:none}
-#searchButton{border:0 none;width:16px;height:16px;overflow:hidden;cursor:pointer;position:absolute;right:3px;top:5px}
-#searchInput{border:0 none;overflow:hidden;position:absolute;right:20px;left:0;padding-left:10px;height:28px}
-#searchInput:focus{border:none;outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
-#notesAndSort{background-color:#eee;border-bottom:1px solid #ebeff2}
-#sortType{float:right}
-#noteItemList{position:absolute;left:0;right:0;bottom:0;top:0;width:100%;overflow-y:hidden;background-color:#f7f7f7;padding:0 5px}
-#noteItemList .item{position:relative;height:110px;overflow:hidden;cursor:pointer;padding:5px;border:1px solid #ebeff2;border-radius:3px;margin-top:5px;background-color:#fff}
-#noteItemList .item:hover,#noteItemList .contextmenu-hover{background-color:#ddd !important;color:#000}
-.item-active,#noteItemList .item-active:hover{background-color:#65bd77 !important;color:#fff}.item-active .item-desc .fa,#noteItemList .item-active:hover .item-desc .fa{color:#eee !important}
-.item-active .item-title,#noteItemList .item-active:hover .item-title{color:#fff}
-#noteItemList .item-thumb{padding-left:10px;width:100px;overflow:hidden;position:absolute;right:0;height:100px;background-color:#fff;margin-right:5px}
-.item-thumb img{width:100px}
-#noteItemList .item-desc{position:absolute;left:0;right:100px;margin-left:4px}#noteItemList .item-desc .fa{color:#666}
-#noteItemList .item-blog{position:absolute;right:1px;font-size:10px;z-index:2;top:1px;padding:3px;cursor:pointer;width:20px;text-align:center;opacity:.5;background-color:#464c5e}#noteItemList .item-blog .fa{color:#fff !important}
-#noteItemList .item-blog:hover{opacity:.8}
-.item-title{font-size:16px;height:22px;line-height:20px;overflow:hidden;margin-bottom:0;color:#000;border-bottom:dashed 1px #ebeff2}
-#editorTool{margin:0;padding:0;list-style:none}
-#editorTool li{display:inline-block}
-#noteTitleDiv{height:30px;border-bottom:1px solid #ddd}
-#noteTitle{height:100%;padding:0 3px;width:100%;border:none;background-color:#fff}
-#noteTitle:focus{outline:none !important}
-#editorMask{position:absolute;top:0;bottom:0;right:0;left:0;background-color:#fff;z-index:-10;padding-top:50px;text-align:center}#editorMask .fa,#editorMask a{font-size:24px}
-#editorMask a{display:inline-block;border-radius:3px;border:1px solid #ebeff2;padding:10px}#editorMask a:hover{background-color:#65bd77;color:#fff}
-#editor,#mdEditor{position:absolute;z-index:2;top:71px;bottom:0;right:0;left:5px;padding:0;display:none}
-#mdEditor{z-index:1;background-color:#fff;bottom:10px}#mdEditor #md-section-helper,#mdEditor #wmd-input{font-size:14px;line-height:22px}
-#editorContent{position:absolute;top:30px;bottom:10px;right:0;left:0;overflow:auto}
-#editor .mce-ifr{border:none;overflow:hidden !important;}
-#editor .mce-tinymce{border:none}
-#mceToolbar,#wmd-button-bar{position:relative;height:30px;overflow:hidden;border-bottom:1px solid #ccc;background-color:#f0f0f0}
-.mce-btn-small button{padding:5px 5px !important;line-height:20px !important}
-.mce-menubtn.mce-btn-small span{line-height:20px !important}
-.mce-btn span{font-family:'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif !important}
-.mce-primary button,.mce-primary button i{text-shadow:none}
-.mce-primary{background-color:#47a447 !important;border-color:#398439 !important}
-.mce-menu-item:hover,.mce-menu-item.mce-selected,.mce-menu-item:focus{background-color:#ebeff2}.mce-menu-item:hover span,.mce-menu-item.mce-selected span,.mce-menu-item:focus span{color:#000 !important}
-.mce-menu-item-normal.mce-active{background-color:#ebeff2}
-.tool-split{display:inline-block;line-height:25px;color:#ddd}
-#tool{border-bottom:1px solid #ddd}
-#tag{height:40px;line-height:38px}
-#tag .dropdown{line-height:30px}
-#addTagInput{line-height:25px;display:none;padding:0;border:none;background-color:#fff}
-#addTagInput:focus{outline:none}
-.label-default{background-color:#464c5e}
-.label-red{background-color:#d9534f}
-.label-yellow{background-color:#f0ad4e}
-.label-blue{background-color:#428bca}
-.label-green{background-color:#5cb85c}
-.label{border-radius:0;font-weight:normal}
-.label i{width:10px;cursor:pointer;font-style:normal;display:inline-block;padding-left:3px;opacity:0}
-.label i:hover{opacity:1}
-#leanoteNav{position:absolute;right:5px;top:32px;border:1px solid #ccc;border-radius:3px;background-color:#fff;opacity:.5;z-index:11;margin-right:2px}#leanoteNav h1{margin:0;font-size:18px;padding:3px;cursor:pointer}
-#leanoteNav i{padding:3px}
-#leanoteNav span{display:none}
-#leanoteNav #leanoteNavContent{display:none;overflow:auto}
-#leanoteNav.unfolder{min-width:200px;max-width:300px;opacity:.8}#leanoteNav.unfolder h1{border-bottom:1px dashed #ebeff2}
-#leanoteNav.unfolder span{display:inline}
-#leanoteNav.unfolder #leanoteNavContent{display:block;min-height:30px}
-#leanoteNav ul{margin:0;padding-left:23px}#leanoteNav ul li{list-style-type:disc}#leanoteNav ul li a:hover{color:#0fb264}
-#leanoteNav ul .nav-h2{margin-left:20px}
-#leanoteNav ul .nav-h3{margin-left:30px}
-#leanoteNav ul .nav-h4{margin-left:40px}
-#leanoteNav ul .nav-h5{margin-left:50px}
-.scrollTo-a{cursor:pointer !important}
-#noteRead{position:absolute;left:0;right:0;top:0;bottom:0;display:none;z-index:100;padding-left:5px;background-color:#fff}
-#noteReadContainer{position:relative;width:100%;height:100%}
-#noteReadTop{position:absolute;height:60px;left:0;right:0;border-bottom:1px solid #ebeff2}
-#noteReadTitle{margin:3px 0}
-#noteReadContent{position:absolute;top:60px;bottom:0;right:0;left:0;overflow:auto;padding:3px}
-.fa-calendar{color:#666}
-.dropdown-menu .fa{width:15px}
-.dropdown-menu span,.dropdown-menu a,.dropdown-menu li{cursor:default}
-#topNav a{display:inline-block;line-height:60px}
-.tab-pane{padding:5px 0 0 0}
-.alert{margin-bottom:10px}
-.btn{border-radius:0 !important}
-#notebookNavForNewNote li,#notebookNavForNewSharedNote>li{padding-left:0;border-bottom:1px solid #ebeff2}
-#notebookNavForNewNote>li:hover,#notebookNavForNewNote>li:focus,#notebookNavForNewSharedNote>li:hover,#notebookNavForNewSharedNote>li:focus{background:none}
-.new-note-left{padding:0 5px;width:95px;overflow:hidden;white-space:nowrap;border-right:1px dashed #ebeff2}.new-note-left:hover{background-color:#ebeff2}
-.new-note-right{padding:0 5px}.new-note-right:hover{background-color:#ebeff2}
-#historyList table{width:100%}
-#historyList .btns{border-top:1px dashed #eee;padding:5px 0}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Open Sans Light'), local('OpenSans-Light'), url('../../fonts/open-sans2/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans'), local('OpenSans'), url('../../fonts/open-sans2/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../../fonts/open-sans2/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Open Sans Italic'), local('OpenSans-Italic'), url('../../fonts/open-sans2/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff') format('woff');
+}
+/*"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue", Helvetica, "Microsoft Yahei", Verdana, Simsun, "Segoe UI", "Segoe UI Web Regular", "Segoe UI Symbol",  "BBAlpha Sans", "S60 Sans", Arial, sans-serif;*/
+::selection {
+  background: #000000;
+  color: #ffffff;
+}
+::-moz-selection {
+  background: #000000;
+  color: #ffffff;
+}
+::-webkit-selection {
+  background: #000000;
+  color: #ffffff;
+}
+*,
+body {
+  font-family: 'Open Sans', 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
+  font-weight: 300;
+  font-size: 14px;
+}
+h1,
+h2,
+h3 {
+  font-family: 'Open Sans', 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
+  font-weight: 300 !important;
+}
+a {
+  color: #000000;
+  cursor: pointer;
+}
+a:hover {
+  text-decoration: none !important;
+  color: #000000;
+}
+a.raw {
+  color: #428bca;
+}
+a.raw:hover {
+  color: #2a6496;
+}
+/* header */
+#header {
+  height: 60px;
+  background-color: #25313e;
+  color: #ffffff;
+  border-bottom: 1px solid #ebeff2;
+  /* for app */
+
+  webkit-user-select: none;
+  /* 还不知 */
+
+  -webkit-app-region: drag;
+  /* -webkit-app-region: no-drag; */
+
+}
+#header a {
+  color: #ccc;
+}
+#header li {
+  color: #000000;
+}
+#header li a {
+  color: #000000;
+}
+#logo,
+#logo span {
+  line-height: 50px;
+  font-size: 28px;
+}
+#logo {
+  width: 140px;
+  height: 59px;
+  padding-left: 10px;
+  padding-top: 0px;
+  border-bottom: 1px solid transparent;
+  border-color: rgba(255, 255, 255, 0.1);
+}
+#logo span,
+#switcher span {
+  background-color: #000;
+  border-radius: 10px;
+  display: inline-block;
+  padding: 4px 0;
+  line-height: 1.0;
+}
+#switcher {
+  line-height: 50px;
+  padding-top: 6px;
+  padding-right: 5px;
+  width: 30px;
+  text-align: center;
+}
+#switcher i {
+  font-size: 16px;
+  cursor: pointer;
+}
+#switcher i:hover {
+  color: #0fb264;
+}
+#switcher span {
+  border-radius: 5px;
+  padding: 8px 4px;
+  cursor: pointer;
+  font-size: 16px;
+}
+#switcher span:hover {
+  color: #0fb264;
+}
+#searchNote {
+  padding-left: 0;
+  line-height: 60px;
+  margin: 0;
+}
+#searchNote input {
+  background-size: 18px 13px;
+  border-color: #ebeff2;
+  border: none;
+  color: #ccc;
+  background-color: #000;
+  padding-left: 14px;
+  border-radius: 5px;
+  width: 250px;
+  line-height: 20px;
+  box-shadow: none;
+}
+#searchNote input:focus {
+  outline: none !important;
+  border-color: #0fb264;
+  box-shadow: none;
+}
+#header ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+#header ul li.dropdown {
+  display: inline-block;
+  height: 60px;
+}
+#header ul > li > a.dropdown-toggle {
+  display: block;
+  padding: 15px 5px 0 0;
+  position: relative;
+}
+#header span.icon {
+  display: inline-block;
+  font-size: 28px;
+  color: #999999;
+}
+.dropdown-menu {
+  border-radius: 0;
+  margin: 0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border: 1px solid #0fb264;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.dropdown-menu li {
+  padding-left: 10px;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+}
+.dropdown-menu > li > a {
+  color: #000000;
+  display: inline-block;
+  padding: 3px 3px;
+}
+.dropdown-menu > li:hover,
+.dropdown-menu > li:focus {
+  background-color: #ebeff2;
+}
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+  background-color: #ebeff2;
+}
+.ios7-a {
+  display: inline-block;
+  padding: 0 10px 0 5px;
+  height: 40px;
+  vertical-align: middle;
+  line-height: 38px;
+  cursor: pointer;
+}
+/*********************/
+#page {
+  overflow: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+#pageInner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+#mainContainer {
+  position: absolute;
+  top: 59px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+  zoom: 1;
+}
+#mainMask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background-color: #fff;
+  text-align: center;
+  padding-top: 100px;
+  z-index: 1000;
+}
+.noteSplit {
+  position: absolute;
+  top: 0;
+  width: 5px;
+  height: 100%;
+  overflow: hidden;
+  z-index: 5;
+  cursor: col-resize;
+}
+#notebookSplitter {
+  left: 170px;
+}
+#noteSplitter {
+  left: 250px;
+}
+#leftNotebook {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 170px;
+}
+#notebook,
+#notebookMin {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  top: 0;
+  right: 0;
+  /*border: 1px solid #ccc;*/
+
+  background-color: #41586e;
+  /*
+  overflow-y: auto;
+  overflow-x: auto;
+  */
+
+  z-index: 2;
+}
+#notebookMin {
+  z-index: 1;
+  overflow-y: visible;
+  overflow-x: visible;
+  background-color: #41586e;
+}
+#notebookMin div.minContainer {
+  border-bottom: 1px solid transparent;
+  border-color: rgba(255, 255, 255, 0.3);
+  padding: 5px;
+  position: relative;
+}
+#notebookMin div.minContainer i {
+  font-size: 20px;
+  color: #fff;
+}
+#notebookMin div.minContainer:hover i {
+  color: #0fb264;
+}
+#notebookMin div.minContainer ul {
+  background-color: #fff;
+  opacity: 0.8;
+  display: none;
+  list-style: none;
+  margin: 0;
+  margin-left: 20px;
+  padding: 5px 0px;
+  border: 1px solid #0fb264;
+  position: absolute;
+  z-index: 1000;
+  top: 0;
+  left: 10px;
+  width: 150px;
+}
+#notebookMin div.minContainer ul li {
+  padding: 0 5px;
+  cursor: pointer;
+}
+#notebookMin div.minContainer ul li span {
+  cursor: pointer;
+}
+#notebookMin div.minContainer ul li a {
+  cursor: pointer;
+}
+#notebookBottom {
+  position: absolute;
+  bottom: 0px;
+  height: 30px;
+  right: 0;
+  left: 0;
+  line-height: 30px;
+  text-align: right;
+  padding-right: 5px;
+  background-color: #eee;
+}
+#notebookBottom #leftSwitcher {
+  border: 1px solid #ccc;
+  padding: 3px 8px;
+  cursor: pointer;
+}
+#noteAndEditor {
+  position: absolute;
+  bottom: 0;
+  top: 0;
+  right: 0;
+  left: 170px;
+}
+#noteList {
+  position: absolute;
+  bottom: 0;
+  top: 0;
+  width: 250px;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  border-right: 1px solid #cfcfcf;
+  border-left: 1px solid #cfcfcf;
+}
+#note {
+  position: absolute;
+  bottom: 0;
+  top: 0;
+  left: 250px;
+  right: 0;
+  padding-left: 5px;
+  overflow-y: hidden;
+  overflow-x: auto;
+  background-color: #ffffff;
+}
+.folderHeader {
+  min-height: 35px;
+  line-height: 35px;
+  cursor: pointer;
+  border-bottom: 1px solid transparent;
+  border-color: rgba(255, 255, 255, 0.05);
+}
+.folderHeader span {
+  display: inline-block;
+  line-height: 35px;
+  color: #fff;
+  font-size: 16px;
+}
+.folderHeader .fa-left,
+.each-user .fa {
+  display: inline-block;
+  line-height: 35px;
+  font-size: 16px;
+  width: 35px;
+  border-right: 1px solid rgba(255, 255, 255, 0.05);
+  text-align: center;
+  color: #fff;
+}
+.each-user div {
+  cursor: pointer;
+  border-bottom: 1px solid transparent;
+  border-color: rgba(255, 255, 255, 0.05);
+}
+.each-user div span {
+  display: inline-block;
+  line-height: 35px;
+  color: #fff;
+  padding-left: 3px;
+  font-size: 14px;
+}
+.each-user div .fa {
+  width: 20px;
+  border-right: none;
+}
+.each-user ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.each-user ul a {
+  padding-left: 20px;
+  font-size: 12px;
+}
+#myNotebooks.opened .fa-left {
+  /*
+	background-color: #65bd77;
+	color: #e2f3e5;
+*/
+
+}
+#myNotebooks .folderBody {
+  /*
+	max-height: 600px; 
+	overflow: auto;
+*/
+
+}
+#addNotebookPlus {
+  padding-right: 10px;
+  color: #ADBECE;
+}
+#addNotebookPlus .fa {
+  font-size: 16px;
+}
+.closed .folder-icon {
+  /* 折叠状态 */
+
+  width: 9px;
+  height: 11px;
+  background-position: -108px -149px;
+}
+.closed .folderBody {
+  display: none;
+}
+.folderBody {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  background-color: #37485e;
+}
+.folderBody li {
+  line-height: 30px;
+}
+.folderBody a {
+  padding-left: 20px;
+  display: block;
+  color: #ADBECE;
+  cursor: pointer;
+  border-bottom: 1px solid transparent;
+  border-color: rgba(255, 255, 255, 0.05);
+  line-height: 35px;
+}
+.folderBody a:hover,
+.folderBody .contextmenu-hover {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.05) !important;
+}
+.folderBody a.active,
+.folderBody a.active:hover {
+  background-color: #25313e !important;
+  color: #fff;
+}
+#notebookList input {
+  border: 1px solid #ebeff2;
+  width: 90%;
+  box-shadow: none;
+}
+#notebookList input:focus {
+  outline: none !important;
+  border-color: #0fb264;
+}
+#myTag .folderBody {
+  /*
+	max-height: 200px; 
+	overflow: auto;
+*/
+
+}
+#myTag .folderBody li {
+  position: relative;
+}
+#myTag .folderBody li .badge {
+  width: 40px;
+  position: absolute;
+  right: 3px;
+  top: 7px;
+  font-weight: normal;
+  background-color: #ffffff;
+  color: #000000;
+  border: 1px solid #ebeff2;
+}
+/* notelist */
+#search {
+  border: #bababa 1px solid;
+  background-color: #fff;
+  white-space: nowrap;
+  position: absolute;
+  height: 30px;
+  left: 3px;
+  right: 60px;
+  margin-top: 3px;
+}
+#search label {
+  display: none;
+}
+#searchButton {
+  border: 0 none;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+  cursor: pointer;
+  position: absolute;
+  right: 3px;
+  top: 5px;
+}
+#searchInput {
+  border: 0 none;
+  overflow: hidden;
+  position: absolute;
+  right: 20px;
+  left: 0px;
+  padding-left: 10px;
+  height: 28px;
+}
+#searchInput:focus {
+  border: none;
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+#notesAndSort {
+  background-color: #eee;
+  border-bottom: 1px solid #ebeff2;
+}
+#sortType {
+  /*  position: absolute;
+  right:0;*/
+
+  float: right;
+}
+/* item list */
+#noteItemList {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  width: 100%;
+  overflow-y: hidden;
+  background-color: #f7f7f7;
+  padding: 0 5px;
+}
+#noteItemList .item {
+  position: relative;
+  height: 110px;
+  overflow: hidden;
+  cursor: pointer;
+  padding: 5px;
+  border: 1px solid #ebeff2;
+  border-radius: 3px;
+  margin-top: 5px;
+  background-color: #fff;
+}
+#noteItemList .item:hover,
+#noteItemList .contextmenu-hover {
+  background-color: #ddd !important;
+  color: #000000;
+}
+.item-active,
+#noteItemList .item-active:hover {
+  background-color: #65bd77 !important;
+  color: #fff;
+}
+.item-active .item-desc .fa,
+#noteItemList .item-active:hover .item-desc .fa {
+  color: #eee !important;
+}
+.item-active .item-title,
+#noteItemList .item-active:hover .item-title {
+  color: #fff;
+}
+#noteItemList .item-thumb {
+  padding-left: 10px;
+  width: 100px;
+  overflow: hidden;
+  position: absolute;
+  right: 0px;
+  height: 100px;
+  background-color: #fff;
+  margin-right: 5px;
+}
+.item-thumb img {
+  width: 100px;
+}
+#noteItemList .item-desc {
+  position: absolute;
+  left: 0;
+  right: 100px;
+  margin-left: 4px;
+}
+#noteItemList .item-desc .fa {
+  color: #666;
+}
+#noteItemList .item-blog {
+  position: absolute;
+  right: 1px;
+  font-size: 10px;
+  z-index: 2;
+  top: 1px;
+  padding: 3px;
+  cursor: pointer;
+  width: 20px;
+  text-align: center;
+  opacity: 0.5;
+  background-color: #464C5E;
+}
+#noteItemList .item-blog .fa {
+  color: #fff !important;
+}
+#noteItemList .item-blog:hover {
+  opacity: 0.8;
+}
+.item-title {
+  /*font-weight: 400;*/
+
+  font-size: 16px;
+  height: 22px;
+  line-height: 20px;
+  overflow: hidden;
+  margin-bottom: 0px;
+  color: #000000;
+  border-bottom: dashed 1px #ebeff2;
+}
+/* note */
+/* editor */
+#editorTool {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+#editorTool li {
+  display: inline-block;
+}
+#noteTitleDiv {
+  height: 30px;
+  border-bottom: 1px solid #ddd;
+}
+#noteTitle {
+  height: 100%;
+  padding: 0px 3px;
+  width: 100%;
+  border: none;
+  background-color: #ffffff;
+}
+#noteTitle:focus {
+  outline: none !important;
+}
+#editorMask {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  right: 0;
+  left: 0;
+  background-color: #fff;
+  z-index: -10;
+  padding-top: 50px;
+  text-align: center;
+}
+#editorMask .fa,
+#editorMask a {
+  font-size: 24px;
+}
+#editorMask a {
+  display: inline-block;
+  border-radius: 3px;
+  border: 1px solid #ebeff2;
+  padding: 10px;
+}
+#editorMask a:hover {
+  background-color: #65bd77;
+  color: #fff;
+}
+#editor,
+#mdEditor {
+  position: absolute;
+  z-index: 2;
+  top: 71px;
+  bottom: 0px;
+  right: 0;
+  left: 5px;
+  padding: 0;
+  display: none;
+}
+#mdEditor {
+  z-index: 1;
+  background-color: #fff;
+  bottom: 10px;
+}
+#mdEditor #md-section-helper,
+#mdEditor #wmd-input {
+  font-size: 14px;
+  line-height: 22px;
+}
+#editorContent {
+  position: absolute;
+  top: 30px;
+  bottom: 10px;
+  right: 0;
+  left: 0;
+  overflow: auto;
+}
+/* 包裹iframe */
+#editor .mce-ifr {
+  border: none;
+  overflow: hidden !important;
+  /*不知道哪里设置了auto*/
+
+  /*border-radius: 5px;*/
+
+}
+/* 最顶层 */
+#editor .mce-tinymce {
+  border: none;
+}
+/*编辑器按钮*/
+#mceToolbar,
+#wmd-button-bar {
+  position: relative;
+  height: 30px;
+  overflow: hidden;
+  border-bottom: 1px solid #ccc;
+  background-color: #f0f0f0;
+}
+/* 编辑器工具 需要important, 因为mce还要有js加载css, 肯定在此之后 */
+/*加高, 之前显得拥挤*/
+.mce-btn-small button {
+  padding: 5px 5px !important;
+  line-height: 20px !important;
+}
+.mce-menubtn.mce-btn-small span {
+  line-height: 20px !important;
+}
+.mce-btn span {
+  font-family: 'Open Sans', 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif !important;
+}
+.mce-primary button,
+.mce-primary button i {
+  text-shadow: none;
+}
+.mce-primary {
+  background-color: #47a447 !important;
+  border-color: #398439 !important;
+}
+.mce-menu-item:hover,
+.mce-menu-item.mce-selected,
+.mce-menu-item:focus {
+  background-color: #ebeff2;
+}
+.mce-menu-item:hover span,
+.mce-menu-item.mce-selected span,
+.mce-menu-item:focus span {
+  color: #000 !important;
+}
+.mce-menu-item-normal.mce-active {
+  background-color: #ebeff2;
+}
+.tool-split {
+  display: inline-block;
+  line-height: 25px;
+  color: #ddd;
+}
+/*标签与其它工具*/
+#tool {
+  border-bottom: 1px solid #ddd;
+}
+/* tag */
+#tag {
+  height: 40px;
+  line-height: 38px;
+}
+#tag .dropdown {
+  line-height: 30px;
+}
+#addTagInput {
+  line-height: 25px;
+  display: none;
+  padding: 0;
+  border: none;
+  background-color: #ffffff;
+}
+#addTagInput:focus {
+  outline: none;
+}
+.label-default {
+  background-color: #464C5E;
+}
+.label-red {
+  background-color: #d9534f;
+}
+.label-yellow {
+  background-color: #f0ad4e;
+}
+.label-blue {
+  background-color: #428bca;
+}
+.label-green {
+  background-color: #5cb85c;
+}
+.label {
+  border-radius: 0;
+  font-weight: normal;
+}
+.label i {
+  width: 10px;
+  cursor: pointer;
+  font-style: normal;
+  /*border-left: 1px solid #ccc;*/
+
+  display: inline-block;
+  padding-left: 3px;
+  opacity: 0;
+}
+.label i:hover {
+  opacity: 1;
+}
+/* leanote nav */
+#leanoteNav {
+  position: absolute;
+  right: 5px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  background-color: #fff;
+  opacity: 0.5;
+  z-index: 11;
+  margin-right: 2px;
+}
+#leanoteNav h1 {
+  margin: 0;
+  font-size: 18px;
+  padding: 3px;
+  cursor: pointer;
+}
+#leanoteNav i {
+  padding: 3px;
+}
+#leanoteNav span {
+  display: none;
+}
+#leanoteNav #leanoteNavContent {
+  display: none;
+  overflow: auto;
+}
+#leanoteNav.unfolder {
+  min-width: 200px;
+  max-width: 300px;
+  opacity: 0.8;
+}
+#leanoteNav.unfolder h1 {
+  border-bottom: 1px dashed #ebeff2;
+}
+#leanoteNav.unfolder span {
+  display: inline;
+}
+#leanoteNav.unfolder #leanoteNavContent {
+  display: block;
+  min-height: 30px;
+}
+#leanoteNav ul {
+  margin: 0;
+  padding-left: 23px;
+}
+#leanoteNav ul li {
+  list-style-type: disc;
+}
+#leanoteNav ul li a:hover {
+  color: #0fb264;
+}
+#leanoteNav ul .nav-h2 {
+  margin-left: 20px;
+}
+#leanoteNav ul .nav-h3 {
+  margin-left: 30px;
+}
+#leanoteNav ul .nav-h4 {
+  margin-left: 40px;
+}
+#leanoteNav ul .nav-h5 {
+  margin-left: 50px;
+}
+.scrollTo-a {
+  cursor: pointer !important;
+}
+#noteRead {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: none;
+  z-index: 100;
+  padding-left: 5px;
+  background-color: #fff;
+}
+#noteReadContainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+#noteReadTop {
+  position: absolute;
+  height: 60px;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid #ebeff2;
+}
+#noteReadTitle {
+  margin: 3px 0;
+}
+#noteReadContent {
+  position: absolute;
+  top: 60px;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  overflow: auto;
+  padding: 3px;
+}
+/*scroll*/
+/*
+::-webkit-scrollbar {
+  width: 5px;
+  height: 8px;
+  background: none;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #41586e;
+  opacity: 0.1;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color:#dadada
+}
+::-webkit-scrollbar-thumb:active {
+  background-color:#606060
+}
+::-webkit-scrollbar-thumb:disabled {
+  background-color:#f9f9f9
+}
+::-webkit-scrollbar-corner {
+  background-color:#f0f0f0
+}
+::-webkit-scrollbar-button {
+  height: 0;
+  background-color:#f0f0f0;
+  background-repeat:no-repeat
+}
+::-webkit-scrollbar-button:vertical {
+  height:0px
+}
+::-webkit-scrollbar-button:horizontal {
+  width:33px
+}
+::-webkit-scrollbar-button:horizontal:increment {
+  background-position:0 -444px
+}
+::-webkit-scrollbar-button:horizontal:decrement {
+  background-position:12px -425px
+}
+::-webkit-scrollbar-button:vertical:increment {
+  background-position:-1px -391px
+}
+::-webkit-scrollbar-button:vertical:decrement {
+  background-position:-1px -358px
+}
+::-webkit-scrollbar-button:hover {
+  background-color:#dadada
+}
+::-webkit-scrollbar-button:horizontal:increment:hover {
+  background-position:0 -548px
+}
+::-webkit-scrollbar-button:horizontal:decrement:hover {
+  background-position:12px -529px
+}
+::-webkit-scrollbar-button:vertical:increment:hover {
+  background-position:-1px -495px
+}
+::-webkit-scrollbar-button:vertical:decrement:hover {
+  background-position:-1px -462px
+}
+::-webkit-scrollbar-button:active {
+  background-color:#606060
+}
+::-webkit-scrollbar-button:horizontal:increment:active {
+  background-position:0 -652px
+}
+::-webkit-scrollbar-button:horizontal:decrement:active {
+background-position:12px -633px
+}
+::-webkit-scrollbar-button:vertical:increment:active {
+background-position:-1px -599px
+}
+::-webkit-scrollbar-button:vertical:decrement:active {
+background-position:-1px -566px
+}
+::-webkit-scrollbar-button:disabled {
+background-color:#f9f9f9
+}
+::-webkit-scrollbar-button:horizontal:increment:disabled {
+background-position:0 -756px
+}
+::-webkit-scrollbar-button:horizontal:decrement:disabled {
+background-position:12px -737px
+}
+::-webkit-scrollbar-button:vertical:increment:disabled {
+background-position:-1px -703px
+}
+::-webkit-scrollbar-button:vertical:decrement:disabled {
+background-position:-1px -670px
+}
+*/
+/*from notebook*/
+/*::-webkit-scrollbar{width:7px;height:7px;}::-webkit-scrollbar-thumb{background-color:rgba(50,50,50,0.3);}::-webkit-scrollbar-thumb:hover{background-color:rgba(50,50,50,0.6);}::-webkit-scrollbar-track{background-color:rgba(50,50,50,0.1);}::-webkit-scrollbar-track:hover{background-color:rgba(50,50,50,0.2);}
+*/
+.fa-calendar {
+  color: #666;
+}
+.dropdown-menu .fa {
+  width: 15px;
+}
+.dropdown-menu span,
+.dropdown-menu a,
+.dropdown-menu li {
+  cursor: default;
+}
+#topNav a {
+  display: inline-block;
+  line-height: 60px;
+}
+.tab-pane {
+  padding: 5px 0 0 0;
+}
+.alert {
+  margin-bottom: 10px;
+}
+.btn {
+  border-radius: 0 !important;
+}
+#notebookNavForNewNote li,
+#notebookNavForNewSharedNote > li {
+  padding-left: 0;
+  border-bottom: 1px solid #ebeff2;
+}
+#notebookNavForNewNote > li:hover,
+#notebookNavForNewNote > li:focus,
+#notebookNavForNewSharedNote > li:hover,
+#notebookNavForNewSharedNote > li:focus {
+  background: none;
+}
+.new-note-left {
+  padding: 0 5px;
+  width: 95px;
+  overflow: hidden;
+  white-space: nowrap;
+  border-right: 1px dashed #ebeff2;
+}
+.new-note-left:hover {
+  background-color: #ebeff2;
+}
+.new-note-right {
+  padding: 0 5px;
+}
+.new-note-right:hover {
+  background-color: #ebeff2;
+}
+#historyList table {
+  width: 100%;
+}
+#historyList .btns {
+  border-top: 1px dashed #eee;
+  padding: 5px 0;
+}
+#leanoteMsg {
+  line-height: 40px;
+  margin-top: 10px;
+  margin-left: 10px;
+}
+#newNoteWrap {
+  line-height: 40px;
+  margin-top: 10px;
+}
+#loading {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  content: url(../../images/loading-a-20.gif);
+  margin-top: 10px;
+  visibility: hidden;
+}
diff --git a/public/css/theme/default.less b/public/css/theme/default.less
index 4b0c74b..8138076 100644
--- a/public/css/theme/default.less
+++ b/public/css/theme/default.less
@@ -907,7 +907,6 @@ a.raw:hover {
 #leanoteNav {
   position: absolute; 
   right: 5px;
-  top:32px;
   border: 1px solid #ccc; 
   border-radius: 3px;
   background-color: #fff;
@@ -1191,4 +1190,18 @@ background-position:-1px -670px
 		border-top: 1px dashed #eee;
 		padding: 5px 0;
 	}
+}
+#leanoteMsg {
+	line-height: 40px; margin-top: 10px; margin-left: 10px;
+}
+#newNoteWrap {
+	line-height: 40px; margin-top: 10px;
+}
+#loading {
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	content: url(../../images/loading-a-20.gif);
+	margin-top:10px;
+	visibility: hidden;
 }
\ No newline at end of file
diff --git a/public/css/theme/simple.css b/public/css/theme/simple.css
index 543a3c4..dfad63b 100644
--- a/public/css/theme/simple.css
+++ b/public/css/theme/simple.css
@@ -1,146 +1,1081 @@
-@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;src:local('Open Sans Light'),local('OpenSans-Light'),url('../../fonts/open-sans2/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff') format('woff')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans'),local('OpenSans'),url('../../fonts/open-sans2/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url('../../fonts/open-sans2/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff') format('woff')}@font-face{font-family:'Open Sans';font-style:italic;font-weight:400;src:local('Open Sans Italic'),local('OpenSans-Italic'),url('../../fonts/open-sans2/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff') format('woff')}::selection{background:#000;color:#fff}
-::-moz-selection{background:#000;color:#fff}
-::-webkit-selection{background:#000;color:#fff}
-*,body{font-family:'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif;font-weight:300;font-size:14px}
-h1,h2,h3{font-family:'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif;font-weight:300 !important}
-a{color:#000;cursor:pointer}
-a:hover{text-decoration:none !important;color:#000}
-a.raw{color:#428bca}
-a.raw:hover{color:#2a6496}
-#header{height:60px;background-color:#fff;color:#fff;border-bottom:1px solid #ebeff2;webkit-user-select:none;-webkit-app-region:drag;}
-#header{color:#000}
-#logo,#logo span{line-height:50px;font-size:28px}
-#logo{width:140px;height:60px;padding-left:10px;padding-top:0;border-bottom:1px solid transparent;border-color:rgba(255,255,255,0.1)}
-#logo span,#switcher span{background-color:#000;color:#fff;border-radius:10px;display:inline-block;padding:4px 0;line-height:1}
-#switcher{line-height:50px;padding-top:6px;padding-right:5px;width:30px;text-align:center}#switcher i{font-size:16px;cursor:pointer}#switcher i:hover{color:#0fb264}
-#switcher span{border-radius:5px;padding:6px 4px;cursor:pointer;font-size:14px}#switcher span:hover{color:#0fb264}
-#searchNote{padding-left:0;line-height:60px;margin:0}#searchNote input{background-size:18px 13px;border-color:#ebeff2;padding-left:14px;height:30px;width:250px;line-height:20px;box-shadow:none}#searchNote input:focus{outline:none !important;border-color:#0fb264;box-shadow:none}
-#header ul{margin:0;padding:0;list-style:none}
-#header ul li.dropdown{display:inline-block;height:60px}
-#header ul>li>a.dropdown-toggle{display:block;padding:15px 5px 0 0;position:relative}
-#header span.icon{display:inline-block;font-size:28px;color:#999}
-.dropdown-menu{border-radius:0;margin:0;-webkit-box-shadow:none;box-shadow:none;border:1px solid #0fb264;overflow-x:hidden;overflow-y:auto}
-.dropdown-menu li{padding-left:10px;width:100%;height:30px;line-height:30px}
-.dropdown-menu>li>a{color:#000;display:inline-block;padding:3px 3px}
-.dropdown-menu>li:hover,.dropdown-menu>li:focus{background-color:#ebeff2}
-.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{background-color:#ebeff2}
-.ios7-a{display:inline-block;padding:0 10px 0 5px;height:40px;vertical-align:middle;line-height:38px;cursor:pointer}
-#page{overflow:auto;position:absolute;top:0;left:0;bottom:0;right:0}
-#pageInner{position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden}
-#mainContainer{position:absolute;top:60px;left:0;right:0;bottom:0;overflow:auto;zoom:1}
-#mainMask{position:absolute;left:0;right:0;bottom:0;top:0;background-color:#fff;text-align:center;padding-top:100px;z-index:1000}
-.noteSplit{position:absolute;top:0;width:5px;height:100%;overflow:hidden;z-index:5;cursor:col-resize}
-#notebookSplitter{left:170px}
-#noteSplitter{left:250px}
-#leftNotebook{position:absolute;left:0;top:0;bottom:0;width:170px}
-#notebook,#notebookMin{position:absolute;left:0;bottom:0;top:0;right:0;background-color:#fff;overflow-y:auto;overflow-x:auto;z-index:2}
-#notebookMin{z-index:1;overflow-y:visible;overflow-x:visible;background-color:#eee}#notebookMin div.minContainer{border-bottom:1px solid #ccc;padding:5px;position:relative}#notebookMin div.minContainer i{font-size:20px;color:#000}
-#notebookMin div.minContainer:hover i{color:#0fb264}
-#notebookMin div.minContainer ul{background-color:#fff;opacity:.8;display:none;list-style:none;margin:0;margin-left:20px;padding:5px 0;border:1px solid #0fb264;position:absolute;z-index:1000;top:0;left:10px;width:150px}#notebookMin div.minContainer ul li{padding:0 5px;cursor:pointer}#notebookMin div.minContainer ul li span{cursor:pointer}
-#notebookMin div.minContainer ul li a{cursor:pointer}
-#notebookBottom{position:absolute;bottom:0;height:30px;right:0;left:0;line-height:30px;text-align:right;padding-right:5px;background-color:#eee}#notebookBottom #leftSwitcher{border:1px solid #ccc;padding:3px 8px;cursor:pointer}
-#noteAndEditor{position:absolute;bottom:0;top:0;right:0;left:170px}
-#noteList{position:absolute;bottom:0;top:0;width:250px;overflow-x:hidden;overflow-y:hidden;border-right:1px solid #ebeff2;border-left:1px solid #ebeff2}
-#note{position:absolute;bottom:0;top:0;left:250px;right:0;padding-left:5px;overflow-y:hidden;overflow-x:auto;background-color:#fff}
-.folderHeader{min-height:35px;line-height:35px;cursor:pointer;border-bottom:1px solid transparent;border-color:rgba(0,0,0,0.05)}
-.folderHeader span{display:inline-block;line-height:35px;color:#000;font-size:16px}
-.folderHeader .fa-left,.each-user .fa{display:inline-block;line-height:35px;font-size:16px;width:35px;border-right:1px solid rgba(0,0,0,0.05);text-align:center;color:#000}
-.each-user div{cursor:pointer;border-bottom:1px solid transparent;border-color:rgba(0,0,0,0.05)}.each-user div span{display:inline-block;line-height:35px;color:#000;padding-left:3px;font-size:14px}
-.each-user div .fa{width:20px;border-right:none}
-.each-user ul{list-style:none;margin:0;padding:0}.each-user ul a{padding-left:20px;font-size:12px}
-#myNotebooks.opened .fa-left{}
-#myNotebooks .folderBody{max-height:600px;overflow:auto}
-#addNotebookPlus{padding-right:10px;color:#666}#addNotebookPlus .fa{font-size:16px}
-.closed .folder-icon{width:9px;height:11px;background-position:-108px -149px}
-.closed .folderBody{display:none}
-.folderBody{list-style:none;margin:0;padding:0}
-.folderBody li{line-height:30px}
-.folderBody a.active{background-color:#fff;color:#0fb264}
-.folderBody a{padding-left:20px;display:block;color:#444;cursor:pointer}
-.folderBody a:hover,.folderBody .contextmenu-hover{background-color:#ebeff2 !important}
-#notebookList input{border:1px solid #ebeff2;width:90%;box-shadow:none}#notebookList input:focus{outline:none !important;border-color:#0fb264}
-#myTag .folderBody li{position:relative}
-#myTag .folderBody li .badge{width:40px;position:absolute;right:3px;top:7px;font-weight:normal;background-color:#fff;color:#000;border:1px solid #ebeff2}
-#search{border:#bababa 1px solid;background-color:#fff;white-space:nowrap;position:absolute;height:30px;left:3px;right:60px;margin-top:3px}
-#search label{display:none}
-#searchButton{border:0 none;width:16px;height:16px;overflow:hidden;cursor:pointer;position:absolute;right:3px;top:5px}
-#searchInput{border:0 none;overflow:hidden;position:absolute;right:20px;left:0;padding-left:10px;height:28px}
-#searchInput:focus{border:none;outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
-#notesAndSort{background-color:#fff;border-bottom:1px solid #ebeff2}
-#sortType{float:right}
-#noteItemList{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;overflow-y:hidden;padding:0 5px}
-#noteItemList .item{position:relative;height:110px;overflow:hidden;cursor:pointer;padding:5px;border:1px solid #ebeff2;border-radius:3px;margin-top:5px;background-color:#fff}
-#noteItemList .item:hover,#noteItemList .contextmenu-hover{background-color:#ddd !important}
-.item-active,#noteItemList .item-active:hover{background-color:#65bd77 !important;color:#fff}.item-active .fa,#noteItemList .item-active:hover .fa{color:#eee !important}
-.item-active .item-title,#noteItemList .item-active:hover .item-title{color:#fff}
-#noteItemList .item-thumb{padding-left:10px;width:100px;overflow:hidden;position:absolute;right:0;height:100px;background-color:#fff;margin-right:5px}
-.item-thumb img{width:100px}
-#noteItemList .item-desc{position:absolute;left:0;right:100px;margin-left:4px}#noteItemList .item-desc .fa{color:#666}
-#noteItemList .item-blog{position:absolute;right:1px;font-size:10px;z-index:2;top:1px;padding:3px;cursor:pointer;width:20px;text-align:center;opacity:.5;background-color:#464c5e}#noteItemList .item-blog .fa{color:#fff !important}
-#noteItemList .item-blog:hover{opacity:.8}
-.item-title{font-size:16px;height:22px;line-height:20px;overflow:hidden;margin-bottom:0;color:#000;border-bottom:dashed 1px #ebeff2}
-#editorTool{margin:0;padding:0;list-style:none}
-#editorTool li{display:inline-block}
-#noteTitleDiv{height:30px;border-bottom:1px solid #ddd}
-#noteTitle{height:100%;padding:0 3px;width:100%;border:none;background-color:#fff;min-width:300px}
-#noteTitle:focus{outline:none !important}
-#editorMask{position:absolute;top:0;bottom:0;right:0;left:0;background-color:#fff;z-index:-10;padding-top:50px;text-align:center}#editorMask .fa,#editorMask a{font-size:24px}
-#editorMask a{display:inline-block;border-radius:3px;border:1px solid #ebeff2;padding:10px}#editorMask a:hover{background-color:#65bd77;color:#fff}
-#editor,#mdEditor{position:absolute;z-index:2;top:71px;bottom:0;right:0;left:5px;padding:0;display:none}
-#mdEditor{z-index:1;background-color:#fff;bottom:10px}#mdEditor #md-section-helper,#mdEditor #wmd-input{font-size:14px;line-height:22px}
-#editorContent{position:absolute;top:30px;bottom:10px;right:0;left:0;overflow:auto}
-#editor .mce-ifr{border:none;overflow:hidden !important;}
-#editor .mce-tinymce{border:none}
-#mceToolbar,#wmd-button-bar{position:relative;height:30px;overflow:hidden;border-bottom:1px solid #ccc;background-color:#f0f0f0}
-.mce-btn-small button{padding:5px 5px !important;line-height:20px !important}
-.mce-menubtn.mce-btn-small span{line-height:20px !important}
-.mce-btn span{font-family:'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif !important}
-.mce-primary button,.mce-primary button i{text-shadow:none}
-.mce-primary{background-color:#47a447 !important;border-color:#398439 !important}
-.mce-menu-item:hover,.mce-menu-item.mce-selected,.mce-menu-item:focus{background-color:#ebeff2}.mce-menu-item:hover span,.mce-menu-item.mce-selected span,.mce-menu-item:focus span{color:#000 !important}
-.mce-menu-item-normal.mce-active{background-color:#ebeff2}
-.tool-split{display:inline-block;line-height:25px;color:#ddd}
-#tool{border-bottom:1px solid #ddd}
-#tag{height:40px;line-height:38px}
-#tag .dropdown{line-height:30px}
-#addTagInput{line-height:25px;display:none;padding:0;border:none;background-color:#fff}
-#addTagInput:focus{outline:none}
-.label-default{background-color:#464c5e}
-.label-red{background-color:#d9534f}
-.label-yellow{background-color:#f0ad4e}
-.label-blue{background-color:#428bca}
-.label-green{background-color:#5cb85c}
-.label{border-radius:0;font-weight:normal}
-.label i{width:10px;cursor:pointer;font-style:normal;display:inline-block;padding-left:3px;opacity:0}
-.label i:hover{opacity:1}
-#leanoteNav{position:absolute;right:5px;top:32px;border:1px solid #ccc;border-radius:3px;background-color:#fff;opacity:.5;z-index:11;margin-right:2px}#leanoteNav h1{margin:0;font-size:18px;padding:3px;cursor:pointer}
-#leanoteNav i{padding:3px}
-#leanoteNav span{display:none}
-#leanoteNav #leanoteNavContent{display:none;overflow:auto}
-#leanoteNav.unfolder{min-width:200px;max-width:300px;opacity:.8}#leanoteNav.unfolder h1{border-bottom:1px dashed #ebeff2}
-#leanoteNav.unfolder span{display:inline}
-#leanoteNav.unfolder #leanoteNavContent{display:block;min-height:30px}
-#leanoteNav ul{margin:0;padding-left:23px}#leanoteNav ul li{list-style-type:disc}#leanoteNav ul li a:hover{color:#0fb264}
-#leanoteNav ul .nav-h2{margin-left:20px}
-#leanoteNav ul .nav-h3{margin-left:30px}
-#leanoteNav ul .nav-h4{margin-left:40px}
-#leanoteNav ul .nav-h5{margin-left:50px}
-.scrollTo-a{cursor:pointer !important}
-#noteRead{position:absolute;left:0;right:0;top:0;bottom:0;display:none;z-index:100;background-color:#fff}
-#noteReadContainer{position:relative;width:100%;height:100%}
-#noteReadTop{position:absolute;height:60px;left:0;right:0;border-bottom:1px solid #ebeff2}
-#noteReadTitle{margin:3px 0}
-#noteReadContent{position:absolute;top:60px;bottom:0;right:0;left:0;overflow:auto;padding:3px}
-.fa-calendar{color:#666}
-.dropdown-menu .fa{width:15px}
-.dropdown-menu span,.dropdown-menu a,.dropdown-menu li{cursor:default}
-#topNav a{display:inline-block;line-height:60px}
-.tab-pane{padding:5px 0 0 0}
-.alert{margin-bottom:10px}
-.btn{border-radius:0 !important}
-#notebookNavForNewNote li,#notebookNavForNewSharedNote>li{padding-left:0;border-bottom:1px solid #ebeff2}
-#notebookNavForNewNote>li:hover,#notebookNavForNewNote>li:focus,#notebookNavForNewSharedNote>li:hover,#notebookNavForNewSharedNote>li:focus{background:none}
-.new-note-left{padding:0 5px;width:95px;overflow:hidden;white-space:nowrap;border-right:1px dashed #ebeff2}.new-note-left:hover{background-color:#ebeff2}
-.new-note-right{padding:0 5px}.new-note-right:hover{background-color:#ebeff2}
-#historyList table{width:100%}
-#historyList .btns{border-top:1px dashed #eee;padding:5px 0}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Open Sans Light'), local('OpenSans-Light'), url('../../fonts/open-sans2/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans'), local('OpenSans'), url('../../fonts/open-sans2/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../../fonts/open-sans2/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Open Sans Italic'), local('OpenSans-Italic'), url('../../fonts/open-sans2/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff') format('woff');
+}
+/*"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue", Helvetica, "Microsoft Yahei", Verdana, Simsun, "Segoe UI", "Segoe UI Web Regular", "Segoe UI Symbol",  "BBAlpha Sans", "S60 Sans", Arial, sans-serif;*/
+::selection {
+  background: #000000;
+  color: #ffffff;
+}
+::-moz-selection {
+  background: #000000;
+  color: #ffffff;
+}
+::-webkit-selection {
+  background: #000000;
+  color: #ffffff;
+}
+*,
+body {
+  font-family: 'Open Sans', 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
+  font-weight: 300;
+  font-size: 14px;
+}
+h1,
+h2,
+h3 {
+  font-family: 'Open Sans', 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
+  font-weight: 300 !important;
+}
+a {
+  color: #000000;
+  cursor: pointer;
+}
+a:hover {
+  text-decoration: none !important;
+  color: #000000;
+}
+a.raw {
+  color: #428bca;
+}
+a.raw:hover {
+  color: #2a6496;
+}
+/* header */
+#header {
+  height: 60px;
+  background-color: #ffffff;
+  color: #ffffff;
+  border-bottom: 1px solid #ebeff2;
+  /* for app */
+
+  webkit-user-select: none;
+  /* 还不知 */
+
+  -webkit-app-region: drag;
+  /* -webkit-app-region: no-drag; */
+
+}
+#header {
+  color: #000000;
+}
+#logo,
+#logo span {
+  line-height: 50px;
+  font-size: 28px;
+}
+#logo {
+  width: 140px;
+  height: 60px;
+  padding-left: 10px;
+  padding-top: 0px;
+  border-bottom: 1px solid transparent;
+  border-color: rgba(255, 255, 255, 0.1);
+}
+#logo span,
+#switcher span {
+  background-color: #000;
+  color: #fff;
+  border-radius: 10px;
+  display: inline-block;
+  padding: 4px 0;
+  line-height: 1.0;
+}
+#switcher {
+  line-height: 50px;
+  padding-top: 6px;
+  padding-right: 5px;
+  width: 30px;
+  text-align: center;
+}
+#switcher i {
+  font-size: 16px;
+  cursor: pointer;
+}
+#switcher i:hover {
+  color: #0fb264;
+}
+#switcher span {
+  border-radius: 5px;
+  padding: 6px 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+#switcher span:hover {
+  color: #0fb264;
+}
+#searchNote {
+  padding-left: 0;
+  line-height: 60px;
+  margin: 0;
+}
+#searchNote input {
+  background-size: 18px 13px;
+  border-color: #ebeff2;
+  padding-left: 14px;
+  height: 30px;
+  width: 250px;
+  line-height: 20px;
+  box-shadow: none;
+}
+#searchNote input:focus {
+  outline: none !important;
+  border-color: #0fb264;
+  box-shadow: none;
+}
+#header ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+#header ul li.dropdown {
+  display: inline-block;
+  height: 60px;
+}
+#header ul > li > a.dropdown-toggle {
+  display: block;
+  padding: 15px 5px 0 0;
+  position: relative;
+}
+#header span.icon {
+  display: inline-block;
+  font-size: 28px;
+  color: #999999;
+}
+.dropdown-menu {
+  border-radius: 0;
+  margin: 0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border: 1px solid #0fb264;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.dropdown-menu li {
+  padding-left: 10px;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+}
+.dropdown-menu > li > a {
+  color: #000000;
+  display: inline-block;
+  padding: 3px 3px;
+}
+.dropdown-menu > li:hover,
+.dropdown-menu > li:focus {
+  background-color: #ebeff2;
+}
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+  background-color: #ebeff2;
+}
+.ios7-a {
+  display: inline-block;
+  padding: 0 10px 0 5px;
+  height: 40px;
+  vertical-align: middle;
+  line-height: 38px;
+  cursor: pointer;
+}
+/*********************/
+#page {
+  overflow: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+#pageInner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+#mainContainer {
+  position: absolute;
+  top: 60px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+  zoom: 1;
+}
+#mainMask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background-color: #fff;
+  text-align: center;
+  padding-top: 100px;
+  z-index: 1000;
+}
+.noteSplit {
+  position: absolute;
+  top: 0;
+  width: 5px;
+  height: 100%;
+  overflow: hidden;
+  z-index: 5;
+  cursor: col-resize;
+}
+#notebookSplitter {
+  left: 170px;
+}
+#noteSplitter {
+  left: 250px;
+}
+#leftNotebook {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 170px;
+}
+#notebook,
+#notebookMin {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  top: 0;
+  right: 0;
+  /*border: 1px solid #ccc;*/
+
+  background-color: #ffffff;
+  overflow-y: auto;
+  overflow-x: auto;
+  z-index: 2;
+}
+#notebookMin {
+  z-index: 1;
+  overflow-y: visible;
+  overflow-x: visible;
+  background-color: #eee;
+}
+#notebookMin div.minContainer {
+  border-bottom: 1px solid #ccc;
+  padding: 5px;
+  position: relative;
+}
+#notebookMin div.minContainer i {
+  font-size: 20px;
+  color: #000;
+}
+#notebookMin div.minContainer:hover i {
+  color: #0fb264;
+}
+#notebookMin div.minContainer ul {
+  background-color: #fff;
+  opacity: 0.8;
+  display: none;
+  list-style: none;
+  margin: 0;
+  margin-left: 20px;
+  padding: 5px 0px;
+  border: 1px solid #0fb264;
+  position: absolute;
+  z-index: 1000;
+  top: 0;
+  left: 10px;
+  width: 150px;
+}
+#notebookMin div.minContainer ul li {
+  padding: 0 5px;
+  cursor: pointer;
+}
+#notebookMin div.minContainer ul li span {
+  cursor: pointer;
+}
+#notebookMin div.minContainer ul li a {
+  cursor: pointer;
+}
+#notebookBottom {
+  position: absolute;
+  bottom: 0px;
+  height: 30px;
+  right: 0;
+  left: 0;
+  line-height: 30px;
+  text-align: right;
+  padding-right: 5px;
+  background-color: #eee;
+}
+#notebookBottom #leftSwitcher {
+  border: 1px solid #ccc;
+  padding: 3px 8px;
+  cursor: pointer;
+}
+#noteAndEditor {
+  position: absolute;
+  bottom: 0;
+  top: 0;
+  right: 0;
+  left: 170px;
+}
+#noteList {
+  position: absolute;
+  bottom: 0;
+  top: 0;
+  width: 250px;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  border-right: 1px solid #ebeff2;
+  border-left: 1px solid #ebeff2;
+}
+#note {
+  position: absolute;
+  bottom: 0;
+  top: 0;
+  left: 250px;
+  right: 0;
+  padding-left: 5px;
+  overflow-y: hidden;
+  overflow-x: auto;
+  background-color: #ffffff;
+}
+.folderHeader {
+  min-height: 35px;
+  line-height: 35px;
+  cursor: pointer;
+  border-bottom: 1px solid transparent;
+  border-color: rgba(0, 0, 0, 0.05);
+}
+.folderHeader span {
+  display: inline-block;
+  line-height: 35px;
+  color: #000;
+  font-size: 16px;
+}
+.folderHeader .fa-left,
+.each-user .fa {
+  display: inline-block;
+  line-height: 35px;
+  font-size: 16px;
+  width: 35px;
+  border-right: 1px solid rgba(0, 0, 0, 0.05);
+  text-align: center;
+  color: #000;
+}
+.each-user div {
+  cursor: pointer;
+  border-bottom: 1px solid transparent;
+  border-color: rgba(0, 0, 0, 0.05);
+}
+.each-user div span {
+  display: inline-block;
+  line-height: 35px;
+  color: #000;
+  padding-left: 3px;
+  font-size: 14px;
+}
+.each-user div .fa {
+  width: 20px;
+  border-right: none;
+}
+.each-user ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.each-user ul a {
+  padding-left: 20px;
+  font-size: 12px;
+}
+#myNotebooks.opened .fa-left {
+  /*
+	background-color: #65bd77;
+	color: #e2f3e5;
+*/
+
+}
+#myNotebooks .folderBody {
+  max-height: 600px;
+  overflow: auto;
+}
+#addNotebookPlus {
+  padding-right: 10px;
+  color: #666;
+}
+#addNotebookPlus .fa {
+  font-size: 16px;
+}
+.closed .folder-icon {
+  /* 折叠状态 */
+
+  width: 9px;
+  height: 11px;
+  background-position: -108px -149px;
+}
+.closed .folderBody {
+  display: none;
+}
+.folderBody {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.folderBody li {
+  line-height: 30px;
+}
+.folderBody a.active {
+  background-color: #ffffff;
+  color: #0fb264;
+}
+.folderBody a {
+  padding-left: 20px;
+  display: block;
+  color: #444;
+  cursor: pointer;
+}
+.folderBody a:hover,
+.folderBody .contextmenu-hover {
+  background-color: #ebeff2 !important;
+}
+#notebookList input {
+  border: 1px solid #ebeff2;
+  width: 90%;
+  box-shadow: none;
+}
+#notebookList input:focus {
+  outline: none !important;
+  border-color: #0fb264;
+}
+#myTag .folderBody li {
+  position: relative;
+}
+#myTag .folderBody li .badge {
+  width: 40px;
+  position: absolute;
+  right: 3px;
+  top: 7px;
+  font-weight: normal;
+  background-color: #ffffff;
+  color: #000000;
+  border: 1px solid #ebeff2;
+}
+/* notelist */
+#search {
+  border: #bababa 1px solid;
+  background-color: #fff;
+  white-space: nowrap;
+  position: absolute;
+  height: 30px;
+  left: 3px;
+  right: 60px;
+  margin-top: 3px;
+}
+#search label {
+  display: none;
+}
+#searchButton {
+  border: 0 none;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+  cursor: pointer;
+  position: absolute;
+  right: 3px;
+  top: 5px;
+}
+#searchInput {
+  border: 0 none;
+  overflow: hidden;
+  position: absolute;
+  right: 20px;
+  left: 0px;
+  padding-left: 10px;
+  height: 28px;
+}
+#searchInput:focus {
+  border: none;
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+#notesAndSort {
+  background-color: #ffffff;
+  border-bottom: 1px solid #ebeff2;
+}
+#sortType {
+  /*  position: absolute;
+  right:0;*/
+
+  float: right;
+}
+/* item list */
+#noteItemList {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  overflow-y: hidden;
+  padding: 0 5px;
+}
+#noteItemList .item {
+  position: relative;
+  height: 110px;
+  overflow: hidden;
+  cursor: pointer;
+  padding: 5px;
+  border: 1px solid #ebeff2;
+  border-radius: 3px;
+  margin-top: 5px;
+  background-color: #fff;
+}
+#noteItemList .item:hover,
+#noteItemList .contextmenu-hover {
+  background-color: #ddd !important;
+}
+.item-active,
+#noteItemList .item-active:hover {
+  background-color: #65bd77 !important;
+  color: #fff;
+}
+.item-active .fa,
+#noteItemList .item-active:hover .fa {
+  color: #eee !important;
+}
+.item-active .item-title,
+#noteItemList .item-active:hover .item-title {
+  color: #fff;
+}
+#noteItemList .item-thumb {
+  padding-left: 10px;
+  width: 100px;
+  overflow: hidden;
+  position: absolute;
+  right: 0px;
+  height: 100px;
+  background-color: #fff;
+  margin-right: 5px;
+}
+.item-thumb img {
+  width: 100px;
+}
+#noteItemList .item-desc {
+  position: absolute;
+  left: 0;
+  right: 100px;
+  margin-left: 4px;
+}
+#noteItemList .item-desc .fa {
+  color: #666;
+}
+#noteItemList .item-blog {
+  position: absolute;
+  right: 1px;
+  font-size: 10px;
+  z-index: 2;
+  top: 1px;
+  padding: 3px;
+  cursor: pointer;
+  width: 20px;
+  text-align: center;
+  opacity: 0.5;
+  background-color: #464C5E;
+}
+#noteItemList .item-blog .fa {
+  color: #fff !important;
+}
+#noteItemList .item-blog:hover {
+  opacity: 0.8;
+}
+.item-title {
+  /*font-weight: 400;*/
+
+  font-size: 16px;
+  height: 22px;
+  line-height: 20px;
+  overflow: hidden;
+  margin-bottom: 0px;
+  color: #000000;
+  border-bottom: dashed 1px #ebeff2;
+}
+/* editor */
+#editorTool {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+#editorTool li {
+  display: inline-block;
+}
+#noteTitleDiv {
+  height: 30px;
+  border-bottom: 1px solid #ddd;
+}
+#noteTitle {
+  height: 100%;
+  padding: 0px 3px;
+  width: 100%;
+  border: none;
+  background-color: #ffffff;
+  min-width: 300px;
+}
+#noteTitle:focus {
+  outline: none !important;
+}
+#editorMask {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  right: 0;
+  left: 0;
+  background-color: #fff;
+  z-index: -10;
+  padding-top: 50px;
+  text-align: center;
+}
+#editorMask .fa,
+#editorMask a {
+  font-size: 24px;
+}
+#editorMask a {
+  display: inline-block;
+  border-radius: 3px;
+  border: 1px solid #ebeff2;
+  padding: 10px;
+}
+#editorMask a:hover {
+  background-color: #65bd77;
+  color: #fff;
+}
+#editor,
+#mdEditor {
+  position: absolute;
+  z-index: 2;
+  top: 71px;
+  bottom: 0px;
+  right: 0;
+  left: 5px;
+  padding: 0;
+  display: none;
+}
+#mdEditor {
+  z-index: 1;
+  background-color: #fff;
+  bottom: 10px;
+}
+#mdEditor #md-section-helper,
+#mdEditor #wmd-input {
+  font-size: 14px;
+  line-height: 22px;
+}
+#editorContent {
+  position: absolute;
+  top: 30px;
+  bottom: 10px;
+  right: 0;
+  left: 0;
+  overflow: auto;
+}
+/* 包裹iframe */
+#editor .mce-ifr {
+  border: none;
+  overflow: hidden !important;
+  /*不知道哪里设置了auto*/
+
+  /*border-radius: 5px;*/
+
+}
+/* 最顶层 */
+#editor .mce-tinymce {
+  border: none;
+}
+/*编辑器按钮*/
+#mceToolbar,
+#wmd-button-bar {
+  position: relative;
+  height: 30px;
+  overflow: hidden;
+  border-bottom: 1px solid #ccc;
+  background-color: #f0f0f0;
+}
+/* 编辑器工具 需要important, 因为mce还要有js加载css, 肯定在此之后 */
+/*加高, 之前显得拥挤*/
+.mce-btn-small button {
+  padding: 5px 5px !important;
+  line-height: 20px !important;
+}
+.mce-menubtn.mce-btn-small span {
+  line-height: 20px !important;
+}
+.mce-btn span {
+  font-family: 'Open Sans', 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif !important;
+}
+.mce-primary button,
+.mce-primary button i {
+  text-shadow: none;
+}
+.mce-primary {
+  background-color: #47a447 !important;
+  border-color: #398439 !important;
+}
+.mce-menu-item:hover,
+.mce-menu-item.mce-selected,
+.mce-menu-item:focus {
+  background-color: #ebeff2;
+}
+.mce-menu-item:hover span,
+.mce-menu-item.mce-selected span,
+.mce-menu-item:focus span {
+  color: #000 !important;
+}
+.mce-menu-item-normal.mce-active {
+  background-color: #ebeff2;
+}
+.tool-split {
+  display: inline-block;
+  line-height: 25px;
+  color: #ddd;
+}
+/*标签与其它工具*/
+#tool {
+  border-bottom: 1px solid #ddd;
+}
+/* tag */
+#tag {
+  height: 40px;
+  line-height: 38px;
+}
+#tag .dropdown {
+  line-height: 30px;
+}
+#addTagInput {
+  line-height: 25px;
+  display: none;
+  padding: 0;
+  border: none;
+  background-color: #ffffff;
+}
+#addTagInput:focus {
+  outline: none;
+}
+.label-default {
+  background-color: #464C5E;
+}
+.label-red {
+  background-color: #d9534f;
+}
+.label-yellow {
+  background-color: #f0ad4e;
+}
+.label-blue {
+  background-color: #428bca;
+}
+.label-green {
+  background-color: #5cb85c;
+}
+.label {
+  border-radius: 0;
+  font-weight: normal;
+}
+.label i {
+  width: 10px;
+  cursor: pointer;
+  font-style: normal;
+  /*border-left: 1px solid #ccc;*/
+
+  display: inline-block;
+  padding-left: 3px;
+  opacity: 0;
+}
+.label i:hover {
+  opacity: 1;
+}
+/* leanote nav */
+#leanoteNav {
+  position: absolute;
+  right: 5px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  background-color: #fff;
+  opacity: 0.5;
+  z-index: 11;
+  margin-right: 2px;
+}
+#leanoteNav h1 {
+  margin: 0;
+  font-size: 18px;
+  padding: 3px;
+  cursor: pointer;
+}
+#leanoteNav i {
+  padding: 3px;
+}
+#leanoteNav span {
+  display: none;
+}
+#leanoteNav #leanoteNavContent {
+  display: none;
+  overflow: auto;
+}
+#leanoteNav.unfolder {
+  min-width: 200px;
+  max-width: 300px;
+  opacity: 0.8;
+}
+#leanoteNav.unfolder h1 {
+  border-bottom: 1px dashed #ebeff2;
+}
+#leanoteNav.unfolder span {
+  display: inline;
+}
+#leanoteNav.unfolder #leanoteNavContent {
+  display: block;
+  min-height: 30px;
+}
+#leanoteNav ul {
+  margin: 0;
+  padding-left: 23px;
+}
+#leanoteNav ul li {
+  list-style-type: disc;
+}
+#leanoteNav ul li a:hover {
+  color: #0fb264;
+}
+#leanoteNav ul .nav-h2 {
+  margin-left: 20px;
+}
+#leanoteNav ul .nav-h3 {
+  margin-left: 30px;
+}
+#leanoteNav ul .nav-h4 {
+  margin-left: 40px;
+}
+#leanoteNav ul .nav-h5 {
+  margin-left: 50px;
+}
+.scrollTo-a {
+  cursor: pointer !important;
+}
+#noteRead {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: none;
+  z-index: 100;
+  background-color: #fff;
+}
+#noteReadContainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+#noteReadTop {
+  position: absolute;
+  height: 60px;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid #ebeff2;
+}
+#noteReadTitle {
+  margin: 3px 0;
+}
+#noteReadContent {
+  position: absolute;
+  top: 60px;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  overflow: auto;
+  padding: 3px;
+}
+/*
+::-webkit-scrollbar {
+  width: 5px;
+  height: 8px;
+  background-color: @sbc;
+}
+::-webkit-scrollbar-thumb {
+  background-color: @sbc;
+  border:1px solid #dadada;
+  border-radius: 5px; 
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color:#dadada
+}
+::-webkit-scrollbar-thumb:active {
+  background-color:#606060
+}
+::-webkit-scrollbar-thumb:disabled {
+  background-color:#f9f9f9
+}
+::-webkit-scrollbar-corner {
+  background-color:#f0f0f0
+}
+::-webkit-scrollbar-button {
+  height: 0;
+  background-color:#f0f0f0;
+  background-repeat:no-repeat
+}
+::-webkit-scrollbar-button:vertical {
+  height:0px
+}
+::-webkit-scrollbar-button:horizontal {
+  width:33px
+}
+::-webkit-scrollbar-button:horizontal:increment {
+  background-position:0 -444px
+}
+::-webkit-scrollbar-button:horizontal:decrement {
+  background-position:12px -425px
+}
+::-webkit-scrollbar-button:vertical:increment {
+  background-position:-1px -391px
+}
+::-webkit-scrollbar-button:vertical:decrement {
+  background-position:-1px -358px
+}
+::-webkit-scrollbar-button:hover {
+  background-color:#dadada
+}
+::-webkit-scrollbar-button:horizontal:increment:hover {
+  background-position:0 -548px
+}
+::-webkit-scrollbar-button:horizontal:decrement:hover {
+  background-position:12px -529px
+}
+::-webkit-scrollbar-button:vertical:increment:hover {
+  background-position:-1px -495px
+}
+::-webkit-scrollbar-button:vertical:decrement:hover {
+  background-position:-1px -462px
+}
+::-webkit-scrollbar-button:active {
+  background-color:#606060
+}
+::-webkit-scrollbar-button:horizontal:increment:active {
+  background-position:0 -652px
+}
+::-webkit-scrollbar-button:horizontal:decrement:active {
+background-position:12px -633px
+}
+::-webkit-scrollbar-button:vertical:increment:active {
+background-position:-1px -599px
+}
+::-webkit-scrollbar-button:vertical:decrement:active {
+background-position:-1px -566px
+}
+::-webkit-scrollbar-button:disabled {
+background-color:#f9f9f9
+}
+::-webkit-scrollbar-button:horizontal:increment:disabled {
+background-position:0 -756px
+}
+::-webkit-scrollbar-button:horizontal:decrement:disabled {
+background-position:12px -737px
+}
+::-webkit-scrollbar-button:vertical:increment:disabled {
+background-position:-1px -703px
+}
+::-webkit-scrollbar-button:vertical:decrement:disabled {
+background-position:-1px -670px
+}
+
+*/
+.fa-calendar {
+  color: #666;
+}
+.dropdown-menu .fa {
+  width: 15px;
+}
+.dropdown-menu span,
+.dropdown-menu a,
+.dropdown-menu li {
+  cursor: default;
+}
+#topNav a {
+  display: inline-block;
+  line-height: 60px;
+}
+.tab-pane {
+  padding: 5px 0 0 0;
+}
+.alert {
+  margin-bottom: 10px;
+}
+.btn {
+  border-radius: 0 !important;
+}
+#notebookNavForNewNote li,
+#notebookNavForNewSharedNote > li {
+  padding-left: 0;
+  border-bottom: 1px solid #ebeff2;
+}
+#notebookNavForNewNote > li:hover,
+#notebookNavForNewNote > li:focus,
+#notebookNavForNewSharedNote > li:hover,
+#notebookNavForNewSharedNote > li:focus {
+  background: none;
+}
+.new-note-left {
+  padding: 0 5px;
+  width: 95px;
+  overflow: hidden;
+  white-space: nowrap;
+  border-right: 1px dashed #ebeff2;
+}
+.new-note-left:hover {
+  background-color: #ebeff2;
+}
+.new-note-right {
+  padding: 0 5px;
+}
+.new-note-right:hover {
+  background-color: #ebeff2;
+}
+#historyList table {
+  width: 100%;
+}
+#historyList .btns {
+  border-top: 1px dashed #eee;
+  padding: 5px 0;
+}
+#leanoteMsg {
+  line-height: 40px;
+  margin-top: 10px;
+  margin-left: 10px;
+}
+#newNoteWrap {
+  line-height: 40px;
+  margin-top: 10px;
+}
+#loading {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  content: url(../../images/loading-a-20-black.gif);
+  margin-top: 10px;
+  visibility: hidden;
+}
diff --git a/public/css/theme/simple.less b/public/css/theme/simple.less
index ae1a855..33f426b 100644
--- a/public/css/theme/simple.less
+++ b/public/css/theme/simple.less
@@ -872,7 +872,6 @@ border: 1px solid @borderColor;
 #leanoteNav {
   position: absolute; 
   right: 5px;
-  top:32px;
   border: 1px solid #ccc; 
   border-radius: 3px;
   background-color: #fff;
@@ -1152,3 +1151,18 @@ background-position:-1px -670px
 		padding: 5px 0;
 	}
 }
+
+#leanoteMsg {
+	line-height: 40px; margin-top: 10px; margin-left: 10px;
+}
+#newNoteWrap {
+	line-height: 40px; margin-top: 10px;
+}
+#loading {
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	content: url(../../images/loading-a-20-black.gif);
+	margin-top:10px;
+	visibility: hidden;
+}
\ No newline at end of file
diff --git a/public/css/theme/writting-overwrite.css b/public/css/theme/writting-overwrite.css
new file mode 100644
index 0000000..cc7f01e
--- /dev/null
+++ b/public/css/theme/writting-overwrite.css
@@ -0,0 +1,957 @@
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Open Sans Light'), local('OpenSans-Light'), url('../../fonts/open-sans2/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans'), local('OpenSans'), url('../../fonts/open-sans2/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../../fonts/open-sans2/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Open Sans Italic'), local('OpenSans-Italic'), url('../../fonts/open-sans2/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff') format('woff');
+}
+/*"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue", Helvetica, "Microsoft Yahei", Verdana, Simsun, "Segoe UI", "Segoe UI Web Regular", "Segoe UI Symbol",  "BBAlpha Sans", "S60 Sans", Arial, sans-serif;*/
+::selection {
+  background: #000000;
+  color: #ffffff;
+}
+::-moz-selection {
+  background: #000000;
+  color: #ffffff;
+}
+::-webkit-selection {
+  background: #000000;
+  color: #ffffff;
+}
+html,
+body {
+  background-color: #fbfcf7;
+}
+*,
+body {
+  font-family: 'Open Sans', 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
+  font-weight: 300;
+  font-size: 16px;
+}
+h1,
+h2,
+h3 {
+  font-family: 'Open Sans', 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
+  font-weight: 300 !important;
+}
+a {
+  color: #000000;
+  cursor: pointer;
+}
+a:hover {
+  text-decoration: none !important;
+  color: #000000;
+}
+a.raw {
+  color: #428bca;
+}
+a.raw:hover {
+  color: #2a6496;
+}
+/* header */
+#header {
+  height: 60px;
+  background-color: #fbfcf7;
+  color: #ffffff;
+  border-bottom: 1px solid #ebeff2;
+  /* for app */
+
+  webkit-user-select: none;
+  /* 还不知 */
+
+  -webkit-app-region: drag;
+  /* -webkit-app-region: no-drag; */
+
+}
+#header a {
+  color: #ccc;
+}
+#header li {
+  color: #000000;
+}
+#header li a {
+  color: #000000;
+}
+#searchWrap,
+#logo,
+#switcher,
+#leftNotebook,
+.noteSplit {
+  display: none;
+}
+#header ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+#header ul li.dropdown {
+  display: inline-block;
+  height: 60px;
+}
+#header ul > li > a.dropdown-toggle {
+  display: block;
+  padding: 15px 5px 0 0;
+  position: relative;
+}
+#header span.icon {
+  display: inline-block;
+  font-size: 28px;
+  color: #999999;
+}
+.dropdown-menu {
+  border-radius: 0;
+  margin: 0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border: 1px solid #0fb264;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.dropdown-menu li {
+  padding-left: 10px;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+}
+.dropdown-menu > li > a {
+  color: #000000;
+  display: inline-block;
+  padding: 3px 3px;
+}
+.dropdown-menu > li:hover,
+.dropdown-menu > li:focus {
+  background-color: #ebeff2;
+}
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+  background-color: #ebeff2;
+}
+.ios7-a {
+  display: inline-block;
+  padding: 0 10px 0 5px;
+  height: 40px;
+  vertical-align: middle;
+  line-height: 38px;
+  cursor: pointer;
+}
+/*********************/
+#page {
+  overflow: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+#pageInner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+#mainContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+  zoom: 1;
+}
+#search {
+  border: #bababa 1px solid;
+  background-color: #fff;
+  white-space: nowrap;
+  position: absolute;
+  height: 30px;
+  left: 3px;
+  right: 60px;
+  margin-top: 3px;
+}
+#search label {
+  display: none;
+}
+#searchButton {
+  border: 0 none;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+  cursor: pointer;
+  position: absolute;
+  right: 3px;
+  top: 5px;
+}
+#searchInput {
+  border: 0 none;
+  overflow: hidden;
+  position: absolute;
+  right: 20px;
+  left: 0px;
+  padding-left: 10px;
+  height: 28px;
+}
+#searchInput:focus {
+  border: none;
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+#notesAndSort {
+  background-color: #eee;
+  border-bottom: 1px solid #ebeff2;
+}
+/* item list */
+#noteItemList {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  width: 100%;
+  overflow-y: hidden;
+  background-color: #f7f7f7;
+  padding: 0 5px;
+}
+#noteItemList .item {
+  position: relative;
+  height: 110px;
+  overflow: hidden;
+  cursor: pointer;
+  padding: 5px;
+  border: 1px solid #ebeff2;
+  border-radius: 3px;
+  margin-top: 5px;
+  background-color: #fff;
+}
+#noteItemList .item:hover,
+#noteItemList .contextmenu-hover {
+  background-color: #ddd !important;
+  color: #000000;
+}
+#noteItemList .item-thumb {
+  padding-left: 10px;
+  width: 100px;
+  overflow: hidden;
+  position: absolute;
+  right: 0px;
+  height: 100px;
+  background-color: #fff;
+  margin-right: 5px;
+}
+.item-thumb img {
+  width: 100px;
+}
+#noteItemList .item-desc {
+  position: absolute;
+  left: 0;
+  right: 100px;
+  margin-left: 4px;
+}
+#noteItemList .item-desc .fa {
+  color: #666;
+}
+#noteItemList .item-blog {
+  position: absolute;
+  right: 1px;
+  font-size: 10px;
+  z-index: 2;
+  top: 1px;
+  padding: 3px;
+  cursor: pointer;
+  width: 20px;
+  text-align: center;
+  opacity: 0.5;
+  background-color: #464C5E;
+}
+#noteItemList .item-blog .fa {
+  color: #fff !important;
+}
+#noteItemList .item-blog:hover {
+  opacity: 0.8;
+}
+.item-title {
+  /*font-weight: 400;*/
+
+  font-size: 16px;
+  height: 22px;
+  line-height: 20px;
+  overflow: hidden;
+  margin-bottom: 0px;
+  color: #000000;
+  border-bottom: dashed 1px #ebeff2;
+}
+/* note */
+/* editor */
+#editorTool {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+#editorTool li {
+  display: inline-block;
+}
+#noteTitle:focus {
+  outline: none !important;
+}
+#editor,
+#mdEditor {
+  z-index: 2;
+  top: 71px;
+  bottom: 0px;
+  right: 0;
+  left: 0;
+  padding: 0;
+  display: none;
+}
+#mdEditor {
+  z-index: 1;
+  background-color: #fff;
+  bottom: 10px;
+}
+#mdEditor #md-section-helper,
+#mdEditor #wmd-input {
+  font-size: 14px;
+  line-height: 22px;
+}
+#editorContent {
+  position: absolute;
+  top: 30px;
+  bottom: 10px;
+  right: 0;
+  left: 0;
+  overflow: auto;
+}
+/* 包裹iframe */
+#editor .mce-ifr {
+  border: none;
+  overflow: hidden !important;
+  /*不知道哪里设置了auto*/
+
+  /*border-radius: 5px;*/
+
+}
+/* 最顶层 */
+#editor .mce-tinymce {
+  border: none;
+}
+/*编辑器按钮*/
+#mceToolbar,
+#wmd-button-bar {
+  position: relative;
+  height: 30px;
+  overflow: hidden;
+  background-color: #fbfcf7;
+}
+/* 编辑器工具 需要important, 因为mce还要有js加载css, 肯定在此之后 */
+/*加高, 之前显得拥挤*/
+.mce-btn-small button {
+  padding: 5px 5px !important;
+  line-height: 20px !important;
+}
+.mce-btn {
+  background-color: #fbfcf7 !important;
+}
+.mce-menubtn.mce-btn-small span {
+  line-height: 20px !important;
+}
+.mce-btn span {
+  font-family: 'Open Sans', 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif !important;
+}
+.mce-primary button,
+.mce-primary button i {
+  text-shadow: none;
+}
+.mce-primary {
+  background-color: #47a447 !important;
+  border-color: #398439 !important;
+}
+.mce-menu-item:hover,
+.mce-menu-item.mce-selected,
+.mce-menu-item:focus {
+  background-color: #ebeff2;
+}
+.mce-menu-item:hover span,
+.mce-menu-item.mce-selected span,
+.mce-menu-item:focus span {
+  color: #000 !important;
+}
+.mce-menu-item-normal.mce-active {
+  background-color: #ebeff2;
+}
+.tool-split {
+  display: inline-block;
+  line-height: 25px;
+  color: #ddd;
+}
+/*标签与其它工具*/
+#tool {
+  display: none;
+  border-bottom: 1px solid #ddd;
+}
+/* tag */
+#tag {
+  height: 40px;
+  line-height: 38px;
+}
+#tag .dropdown {
+  line-height: 30px;
+}
+#addTagInput {
+  line-height: 25px;
+  display: none;
+  padding: 0;
+  border: none;
+  background-color: #fbfcf7;
+}
+#addTagInput:focus {
+  outline: none;
+}
+.label-default {
+  background-color: #464C5E;
+}
+.label-red {
+  background-color: #d9534f;
+}
+.label-yellow {
+  background-color: #f0ad4e;
+}
+.label-blue {
+  background-color: #428bca;
+}
+.label-green {
+  background-color: #5cb85c;
+}
+.label {
+  border-radius: 0;
+  font-weight: normal;
+}
+.label i {
+  width: 10px;
+  cursor: pointer;
+  font-style: normal;
+  /*border-left: 1px solid #ccc;*/
+
+  display: inline-block;
+  padding-left: 3px;
+  opacity: 0;
+}
+.label i:hover {
+  opacity: 1;
+}
+/* leanote nav */
+#leanoteNav {
+  position: absolute;
+  right: 5px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  background-color: #fff;
+  opacity: 0.5;
+  z-index: 11;
+  margin-right: 2px;
+}
+#leanoteNav h1 {
+  margin: 0;
+  font-size: 18px;
+  padding: 3px;
+  cursor: pointer;
+}
+#leanoteNav i {
+  padding: 3px;
+}
+#leanoteNav span {
+  display: none;
+}
+#leanoteNav #leanoteNavContent {
+  display: none;
+  overflow: auto;
+}
+#leanoteNav.unfolder {
+  min-width: 200px;
+  max-width: 300px;
+  opacity: 0.8;
+}
+#leanoteNav.unfolder h1 {
+  border-bottom: 1px dashed #ebeff2;
+}
+#leanoteNav.unfolder span {
+  display: inline;
+}
+#leanoteNav.unfolder #leanoteNavContent {
+  display: block;
+  min-height: 30px;
+}
+#leanoteNav ul {
+  margin: 0;
+  padding-left: 23px;
+}
+#leanoteNav ul li {
+  list-style-type: disc;
+}
+#leanoteNav ul li a:hover {
+  color: #0fb264;
+}
+#leanoteNav ul .nav-h2 {
+  margin-left: 20px;
+}
+#leanoteNav ul .nav-h3 {
+  margin-left: 30px;
+}
+#leanoteNav ul .nav-h4 {
+  margin-left: 40px;
+}
+#leanoteNav ul .nav-h5 {
+  margin-left: 50px;
+}
+.scrollTo-a {
+  cursor: pointer !important;
+}
+#noteRead {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: none;
+  z-index: 100;
+  padding-left: 5px;
+  background-color: #fff;
+}
+#noteReadContainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+#noteReadTop {
+  position: absolute;
+  height: 60px;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid #ebeff2;
+}
+#noteReadTitle {
+  margin: 3px 0;
+}
+#noteReadContent {
+  position: absolute;
+  top: 60px;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  overflow: auto;
+  padding: 3px;
+}
+/*scroll*/
+/*
+::-webkit-scrollbar {
+  width: 5px;
+  height: 8px;
+  background: none;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #41586e;
+  opacity: 0.1;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color:#dadada
+}
+::-webkit-scrollbar-thumb:active {
+  background-color:#606060
+}
+::-webkit-scrollbar-thumb:disabled {
+  background-color:#f9f9f9
+}
+::-webkit-scrollbar-corner {
+  background-color:#f0f0f0
+}
+::-webkit-scrollbar-button {
+  height: 0;
+  background-color:#f0f0f0;
+  background-repeat:no-repeat
+}
+::-webkit-scrollbar-button:vertical {
+  height:0px
+}
+::-webkit-scrollbar-button:horizontal {
+  width:33px
+}
+::-webkit-scrollbar-button:horizontal:increment {
+  background-position:0 -444px
+}
+::-webkit-scrollbar-button:horizontal:decrement {
+  background-position:12px -425px
+}
+::-webkit-scrollbar-button:vertical:increment {
+  background-position:-1px -391px
+}
+::-webkit-scrollbar-button:vertical:decrement {
+  background-position:-1px -358px
+}
+::-webkit-scrollbar-button:hover {
+  background-color:#dadada
+}
+::-webkit-scrollbar-button:horizontal:increment:hover {
+  background-position:0 -548px
+}
+::-webkit-scrollbar-button:horizontal:decrement:hover {
+  background-position:12px -529px
+}
+::-webkit-scrollbar-button:vertical:increment:hover {
+  background-position:-1px -495px
+}
+::-webkit-scrollbar-button:vertical:decrement:hover {
+  background-position:-1px -462px
+}
+::-webkit-scrollbar-button:active {
+  background-color:#606060
+}
+::-webkit-scrollbar-button:horizontal:increment:active {
+  background-position:0 -652px
+}
+::-webkit-scrollbar-button:horizontal:decrement:active {
+background-position:12px -633px
+}
+::-webkit-scrollbar-button:vertical:increment:active {
+background-position:-1px -599px
+}
+::-webkit-scrollbar-button:vertical:decrement:active {
+background-position:-1px -566px
+}
+::-webkit-scrollbar-button:disabled {
+background-color:#f9f9f9
+}
+::-webkit-scrollbar-button:horizontal:increment:disabled {
+background-position:0 -756px
+}
+::-webkit-scrollbar-button:horizontal:decrement:disabled {
+background-position:12px -737px
+}
+::-webkit-scrollbar-button:vertical:increment:disabled {
+background-position:-1px -703px
+}
+::-webkit-scrollbar-button:vertical:decrement:disabled {
+background-position:-1px -670px
+}
+*/
+/*from notebook*/
+/*::-webkit-scrollbar{width:7px;height:7px;}::-webkit-scrollbar-thumb{background-color:rgba(50,50,50,0.3);}::-webkit-scrollbar-thumb:hover{background-color:rgba(50,50,50,0.6);}::-webkit-scrollbar-track{background-color:rgba(50,50,50,0.1);}::-webkit-scrollbar-track:hover{background-color:rgba(50,50,50,0.2);}
+*/
+.fa-calendar {
+  color: #666;
+}
+.dropdown-menu .fa {
+  width: 15px;
+}
+.dropdown-menu span,
+.dropdown-menu a,
+.dropdown-menu li {
+  cursor: default;
+}
+#topNav a {
+  display: inline-block;
+  line-height: 60px;
+}
+.tab-pane {
+  padding: 5px 0 0 0;
+}
+.alert {
+  margin-bottom: 10px;
+}
+.btn {
+  border-radius: 0 !important;
+}
+#notebookNavForNewNote li,
+#notebookNavForNewSharedNote > li {
+  padding-left: 0;
+  border-bottom: 1px solid #ebeff2;
+}
+#notebookNavForNewNote > li:hover,
+#notebookNavForNewNote > li:focus,
+#notebookNavForNewSharedNote > li:hover,
+#notebookNavForNewSharedNote > li:focus {
+  background: none;
+}
+.new-note-left {
+  padding: 0 5px;
+  width: 95px;
+  overflow: hidden;
+  white-space: nowrap;
+  border-right: 1px dashed #ebeff2;
+}
+.new-note-left:hover {
+  background-color: #ebeff2;
+}
+.new-note-right {
+  padding: 0 5px;
+}
+.new-note-right:hover {
+  background-color: #ebeff2;
+}
+#historyList table {
+  width: 100%;
+}
+#historyList .btns {
+  border-top: 1px dashed #eee;
+  padding: 5px 0;
+}
+#left-column {
+  width: 100% !important;
+}
+#editorMask {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  right: 0;
+  left: 0;
+  background-color: #fff;
+  z-index: -10;
+  padding-top: 50px;
+  text-align: center;
+}
+#editorMask .fa,
+#editorMask a {
+  font-size: 24px;
+}
+#editorMask a {
+  display: inline-block;
+  border-radius: 3px;
+  border: 1px solid #ebeff2;
+  padding: 10px;
+}
+#editorMask a:hover {
+  background-color: #65bd77;
+  color: #fff;
+}
+html,
+body {
+  background-color: #fbfcf7;
+  overflow: hidden;
+}
+#right-column,
+#newNoteMarkdownBtn,
+#newShareNoteMarkdownBtn,
+.new-split,
+#editorMask,
+#sortType {
+  display: none;
+}
+#mainMask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background-color: #fbfcf7;
+  text-align: center;
+  padding-top: 100px;
+  z-index: 1000;
+}
+#header {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  color: #ccc;
+}
+#header #leanoteMsg {
+  position: absolute;
+  width: 700px;
+  left: 0;
+  right: 0;
+  text-align: right;
+  line-height: 60px;
+  margin: auto;
+}
+#header .pull-right:hover a {
+  color: #000;
+}
+#newNoteWrap {
+  line-height: 40px;
+  margin-top: 10px;
+  margin-left: 10px;
+}
+#newNoteWrap:hover {
+  color: #000;
+}
+#newNoteWrap:hover a {
+  color: #000;
+}
+#mainContainer {
+  overflow-y: hidden;
+}
+#newMyNote,
+#newSharedNote {
+  position: relative;
+}
+#newMyNote .dropdown-menu,
+#newSharedNote .dropdown-menu {
+  left: 0px  !important;
+}
+#newMyNote .dropdown,
+#newSharedNote .dropdown {
+  position: static;
+}
+.dropdown-menu {
+  border: 1px solid #ccc;
+  background-color: #fbfcf7;
+}
+#note {
+  position: absolute;
+  width: 700px;
+  margin: auto;
+  height: 100%;
+  left: 0;
+  right: 0;
+}
+#editor,
+#mdEditor {
+  position: absolute;
+  top: 60px;
+  z-index: 2;
+}
+#wmd-input {
+  border: none;
+  background-color: #fbfcf7;
+  font-size: 16px !important;
+}
+#md-section-helper {
+  display: none;
+}
+#mdEditorPreview {
+  top: 43px !important;
+}
+#mceToolbar,
+#wmd-button-bar {
+  height: 40px;
+  padding: 5px 0;
+}
+.editorBg {
+  height: 3px;
+  background: url(/images/editor/editor-shadow.png) no-repeat center bottom #f9faf4;
+}
+.mce-btn-small i,
+.mce-menubtn.mce-btn-small span,
+.wmd-button > span {
+  opacity: 0.85;
+}
+.mce-ico {
+  font-size: 18px;
+  line-height: 18px;
+  width: 18px;
+  height: 18px;
+}
+.tool-split {
+  line-height: 30px;
+}
+.mce-menubtn.mce-fixed-width.mce-btn-small span {
+  width: 80px;
+}
+.mce-menubtn.mce-btn-small span {
+  font-size: 16px;
+}
+#editorContent_ifr html {
+  border: none !important;
+}
+#noteTop {
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  right: 150px;
+  padding: 15px 0;
+  height: 59px;
+}
+#noteTitleDiv {
+  height: 30px;
+}
+#noteTitle {
+  height: 100%;
+  padding: 0px 3px;
+  width: 100%;
+  border: none;
+  background-color: #fbfcf7;
+}
+#noteList {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 10px;
+  margin-top: 60px;
+  width: 200px;
+  z-index: 0;
+  opacity: 0.8;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  /*
+	&:hover {
+		#noteItemListWrap {
+			display: block;
+		}
+		#notesAndSort {
+			display: block;
+		}
+	}
+	*/
+
+}
+#noteList #notesAndSort {
+  display: none;
+}
+#noteList #noteItemListWrap {
+  display: none;
+}
+#notesAndSort {
+  background: none;
+}
+#noteItemList {
+  background: none;
+}
+#noteItemList .item {
+  background: none;
+}
+.item-active,
+#noteItemList .item-active:hover {
+  background-color: #F5F8EA !important;
+  color: #000;
+}
+.item-active .item-desc .fa,
+#noteItemList .item-active:hover .item-desc .fa {
+  color: #666 !important;
+}
+.item-active .item-title,
+#noteItemList .item-active:hover .item-title {
+  color: #000;
+}
+#leanoteNav {
+  background-color: #fbfcf7;
+  opacity: 0.3;
+}
+.new-note-right {
+  padding: 0 2px;
+}
+#loading {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  content: url(../../images/loading-a-20-black.gif);
+  margin-top: 10px;
+  visibility: hidden;
+}
diff --git a/public/css/theme/writting-overwrite.less b/public/css/theme/writting-overwrite.less
new file mode 100644
index 0000000..fd36b0a
--- /dev/null
+++ b/public/css/theme/writting-overwrite.less
@@ -0,0 +1,1059 @@
+
+@bgColor: #fff;
+@headerBgColor: #25313e;
+@fontFamily: 'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif;
+@aWhiteColor: #fff;
+@aBlackColor: #000;
+@borderColor: #EBEFF2;
+@headerHeight: 60px;
+@headerHeightNoBorder: 59px;
+@hColor: #0fb264; // #47a447;// 更深 #198764; // boostrap: #5cb85c; bootstrap:hover #47a447; // #5AD4A0; // #47a447
+@titleColor: @hColor;
+@fontSize: 14px;
+@leftNotebookWidth: 170px;
+@noteListWidth: 250px;
+@noteActiveBg: #65bd77;
+
+@bgColor: #fbfcf7;
+@headerBgColor: #fbfcf7;
+@fontFamily: 'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif;
+@aWhiteColor: #fff;
+@aBlackColor: #000;
+@borderColor: #EBEFF2;
+@headerHeight: 60px;
+@hColor: #0fb264; // #47a447;// 更深 #198764; // boostrap: #5cb85c; bootstrap:hover #47a447; // #5AD4A0; // #47a447
+@titleColor: @hColor;
+@fontSize: 16px;
+@leftNotebookWidth: 170px;
+@noteListWidth: 250px;
+@noteActiveBg: #65bd77;
+@editorWidth: 700px;
+
+
+// font
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Open Sans Light'), local('OpenSans-Light'), url('../../fonts/open-sans2/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans'), local('OpenSans'), url('../../fonts/open-sans2/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../../fonts/open-sans2/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Open Sans Italic'), local('OpenSans-Italic'), url('../../fonts/open-sans2/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff') format('woff');
+}
+
+/*"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue", Helvetica, "Microsoft Yahei", Verdana, Simsun, "Segoe UI", "Segoe UI Web Regular", "Segoe UI Symbol",  "BBAlpha Sans", "S60 Sans", Arial, sans-serif;*/
+
+@selectionBg: @aBlackColor;
+@selectionColor: #fff;
+::selection { background:@selectionBg; color:@selectionColor; } 
+::-moz-selection { background:@selectionBg; color:@selectionColor; } 
+::-webkit-selection { background:@selectionBg; color:@selectionColor; }
+
+html,body {
+	background-color: @bgColor;
+}
+*, body {
+  font-family: @fontFamily;
+  font-weight: 300;
+  font-size: @fontSize;
+}
+h1, h2, h3 {
+  font-family: @fontFamily;
+  font-weight: 300 !important;
+}
+a {
+  color: @aBlackColor;
+  cursor: pointer;
+}
+
+a:hover {
+  text-decoration: none !important;
+  color: @aBlackColor;
+}
+
+// 原生的a
+a.raw {
+	color: #428bca;
+}
+a.raw:hover {
+	color: #2a6496;
+}
+
+/* header */
+
+#header {
+  height: @headerHeight;
+  background-color: @headerBgColor;
+  color: @aWhiteColor;
+  a {
+	  color: #ccc;//@aWhiteColor;
+  }
+  li {
+	  color: @aBlackColor;
+  }
+  li a {
+	  color: @aBlackColor;
+  }
+  border-bottom: 1px solid @borderColor;
+
+  /* for app */
+  webkit-user-select: none; /* 还不知 */
+  -webkit-app-region: drag; /* -webkit-app-region: no-drag; */
+}
+
+#searchWrap, #logo, #switcher, 
+#leftNotebook, 
+.noteSplit
+{
+	display: none;	
+}
+
+#header ul {
+  margin:0;
+  padding:0;
+  list-style: none;
+}
+#header ul li.dropdown {
+  display: inline-block;
+  height: @headerHeight;
+}
+
+#header ul > li > a.dropdown-toggle {
+  display: block;
+  padding: 15px 5px 0 0;
+  position: relative;
+}
+
+#header span.icon {
+  display: inline-block;
+  font-size: 28px;
+  color: #999999;
+}
+
+.dropdown-menu {
+  border-radius: 0;
+  margin:0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border: 1px solid @hColor;
+  overflow-x: hidden; 
+  overflow-y: auto;
+}
+.dropdown-menu li {
+  padding-left: 10px;
+  width: 100%;
+  height: 30px; // 父设置了line-height, 子下拉也受影响, "新建笔记"
+  line-height: 30px;
+}
+.dropdown-menu > li > a {
+  color: @aBlackColor;
+  display: inline-block;
+  padding: 3px 3px;
+}
+.dropdown-menu>li:hover, .dropdown-menu>li:focus {
+  background-color: @borderColor;
+}
+.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
+  background-color: @borderColor;
+}
+
+.ios7-a {
+  display: inline-block;
+  padding: 0 10px 0 5px;
+  height: 40px;
+  vertical-align: middle;
+  line-height: 38px;
+  cursor: pointer; 
+}
+
+/*********************/
+#page {
+  overflow: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+#pageInner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+#mainContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+  zoom: 1;
+}
+
+
+
+
+#search {
+  border: #bababa 1px solid;
+  background-color: #fff;
+  white-space: nowrap;
+  position: absolute;
+  height: 30px;
+  left:3px;
+  right:60px;
+  margin-top: 3px;
+}
+#search label {
+  display: none;
+}
+#searchButton {
+  border: 0 none;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+  cursor: pointer;
+  position: absolute;
+  right:3px;
+  top: 5px;
+}
+#searchInput {
+  border: 0 none;
+  overflow: hidden;
+  position: absolute;
+  right:20px;
+  left: 0px;
+  padding-left: 10px;
+  height: 28px;
+}
+#searchInput:focus {
+  border: none;
+  outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px
+}
+
+#notesAndSort {
+  background-color: #eee; // #65bd77; // @bgColor;
+  border-bottom: 1px solid @borderColor;
+  a.dropdown-toggle {
+	  // color: #fff;
+  }
+}
+
+/* item list */
+#noteItemList {
+  position: absolute;
+  left:0;
+  right:0;
+  bottom: 0;
+  top: 0;
+  width: 100%;
+  overflow-y: hidden;
+  background-color: #f7f7f7;
+  padding: 0 5px;
+}
+#noteItemList .item {
+  position: relative;
+  height: 110px;
+  overflow: hidden;
+  cursor: pointer;
+  padding: 5px;
+  border: 1px solid @borderColor;
+  border-radius: 3px;
+  margin-top: 5px;
+  background-color: #fff;
+}
+
+#noteItemList .item:hover, 
+#noteItemList .contextmenu-hover {
+  background-color: #ddd !important;
+  color: @aBlackColor;
+  .item-title {
+    // color: @aBlackColor;
+    //font-weight: 800;
+  }
+}
+
+#noteItemList .item-thumb  {
+  padding-left: 10px;
+  width: 100px; 
+  height: 100px; 
+  overflow: hidden;
+  position: absolute; 
+  right: 0px;
+  height: 100px;
+  background-color: #fff;
+  margin-right: 5px;
+}
+  .item-thumb img {
+     width: 100px;
+  }
+#noteItemList .item-desc {
+  position: absolute; 
+  left: 0;
+  right: 100px;
+  margin-left: 4px;
+  .fa { // folder, calender 颜色暗些
+  	color: #666;
+  }
+}
+// blog
+#noteItemList .item-blog {
+  position: absolute; 
+  right: 1px;
+  font-size: 10px;
+  z-index: 2;
+  top: 1px;
+  padding: 3px;
+  cursor: pointer;
+  .fa {
+	  color: #fff !important;
+  }
+  width: 20px;
+  text-align: center;
+  opacity: 0.5;
+  &:hover {
+	  opacity: 0.8;
+  }
+  background-color: #464C5E;
+}
+.item-title {
+    /*font-weight: 400;*/
+    font-size: 16px;
+    height: 22px;
+    line-height: 20px;
+    overflow: hidden;
+    margin-bottom: 0px;
+    color: @aBlackColor;
+    border-bottom: dashed 1px @borderColor;
+  }
+  
+/* note */
+
+/* editor */
+#editorTool {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  // width: 200px;
+}
+#editorTool li {
+  display: inline-block;
+}
+
+
+#noteTitle:focus {
+  // outline:thin dotted #333;outline:1px auto -webkit-focus-ring-color;outline-offset:-2px
+  outline: none !important;
+  // border: 1px solid @hColor;
+}
+
+#editor, #mdEditor{
+  z-index: 2;
+  top: 71px; 
+  bottom: 0px; 
+  right: 0; 
+  left: 0;  
+  padding: 0; // 0px 0px 0px 0px;
+	display: none;
+}
+#mdEditor {
+	z-index: 1;
+	background-color: #fff;
+    bottom: 10px; 
+    #md-section-helper, #wmd-input {
+		font-size: 14px;
+		line-height: 22px;			
+    }
+}
+#editorContent {
+  position: absolute;
+  top:30px;
+  bottom: 10px; 
+  right: 0; 
+  left: 0;
+  overflow: auto; // 不设置editor隐藏时没有scroll
+}
+#editorContent_ifr {
+	// padding-top: 10px;
+}
+
+/* 包裹iframe */
+#editor .mce-ifr {
+  border: none;
+  // padding: 10px;
+  overflow: hidden !important; /*不知道哪里设置了auto*/
+  /*border-radius: 5px;*/
+  // border: 1px solid @borderColor;
+  // border-top-left-radius: 5px;
+  // border-bottom-left-radius: 5px;
+}
+
+/* 最顶层 */
+#editor .mce-tinymce {
+  border: none;
+}
+#editor iframe {
+}
+/*编辑器按钮*/
+#mceToolbar, #wmd-button-bar {
+  position: relative; 
+  height: 30px; 
+  overflow: hidden; 
+  background-color: @bgColor;
+}
+/* 编辑器工具 需要important, 因为mce还要有js加载css, 肯定在此之后 */
+
+/*加高, 之前显得拥挤*/
+.mce-btn-small button {
+  padding: 5px 5px !important;
+  line-height: 20px !important;
+}
+.mce-btn {
+  background-color: @bgColor !important;
+}
+.mce-menubtn.mce-btn-small span {
+  line-height: 20px !important;
+}
+.mce-btn span {
+  font-family: @fontFamily !important;
+}
+.mce-primary button, .mce-primary button i {
+	text-shadow: none;
+}
+.mce-primary {
+	background-color: #47a447 !important;
+	border-color: #398439 !important;
+}
+// 下拉
+.mce-menu-item:hover, .mce-menu-item.mce-selected, .mce-menu-item:focus {
+	background-color: @borderColor;
+	span {
+		color: #000 !important;
+	}
+}
+// 下拉选中
+.mce-menu-item-normal.mce-active {
+	background-color: @borderColor;
+}
+// tool的分隔
+.tool-split {
+	display: inline-block;
+	line-height: 25px;	
+	color: #ddd;
+}
+
+/*标签与其它工具*/
+#tool {
+	display: none;
+  border-bottom: 1px solid #ddd;
+}
+
+/* tag */
+#tag {
+  height: 40px;
+  line-height: 38px
+}
+// 前面的38影响了dropdown
+#tag .dropdown {
+  line-height: 30px;
+}
+#addTagInput {
+  line-height: 25px;
+  display: none;
+  padding:0;
+  border: none;
+  background-color: @bgColor;
+}
+#addTagInput:focus {
+  outline: none;
+}
+.label-default {
+  background-color: #464C5E;
+}
+.label-red {
+  background-color: #d9534f;
+}
+.label-yellow {
+  background-color: #f0ad4e;
+}
+.label-blue {
+  background-color: #428bca;
+}
+.label-green {
+  background-color: #5cb85c;
+}
+.label {
+  border-radius: 0;
+  font-weight: normal;
+}
+.label i {
+  width: 10px;
+  cursor: pointer;
+  font-style: normal;
+  /*border-left: 1px solid #ccc;*/
+  display: inline-block;
+  padding-left: 3px;
+  opacity: 0;
+}
+.label i:hover {
+  opacity: 1;
+  // font-weight: bold;
+}
+
+/* leanote nav */
+
+#leanoteNav {
+  position: absolute; 
+  right: 5px;
+  border: 1px solid #ccc; 
+  border-radius: 3px;
+  background-color: #fff;
+  opacity: 0.5;
+  // display: none;
+  z-index: 11;
+  margin-right: 2px;
+  h1 {
+	margin:0;
+  	font-size: 18px;
+  	padding: 3px;
+  	cursor: pointer;
+  }
+  i {
+    padding: 3px;
+  }
+  span {
+  	display: none;
+  }
+  #leanoteNavContent {
+  	display: none;
+	overflow: auto;
+  } 
+}
+
+#leanoteNav.unfolder {
+  min-width: 200px;
+  max-width: 300px;
+  // bottom: 1px;
+  opacity: 0.8;
+  h1 {
+  	border-bottom: 1px dashed @borderColor;
+  }
+  span {
+	  display: inline;
+  }
+  
+  #leanoteNavContent {
+  	display: block;
+	min-height: 30px;
+  }
+}
+
+#leanoteNav ul {
+  margin:0;
+  padding-left: 23px;
+  li {
+  	list-style-type: disc;
+  	a {
+  		&:hover {
+  			color: @hColor;
+  		}	
+  	}
+  }
+}
+#leanoteNav ul .nav-h1 {
+}
+#leanoteNav ul .nav-h2 {
+  margin-left: 20px;
+}
+#leanoteNav ul .nav-h3 {
+  margin-left: 30px;
+}
+#leanoteNav ul .nav-h4 {
+  margin-left: 40px;
+}
+#leanoteNav ul .nav-h5 {
+  margin-left: 50px;
+}
+.scrollTo-a {
+  cursor: pointer !important;
+}
+
+//---------------
+// note for read
+#noteRead {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	display: none;
+	z-index: 100;
+	padding-left: 5px;
+	background-color: #fff;
+}
+#noteReadContainer {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+@noteReadTopHeight: 60px;
+#noteReadTop {
+	position: absolute;
+	height: @noteReadTopHeight;
+	left:0;
+	right: 0;
+	border-bottom: 1px solid @borderColor;
+}
+#noteReadTitle {
+	margin: 3px 0;
+}
+#noteReadContent {
+	position: absolute;
+	top: @noteReadTopHeight;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	overflow: auto;
+	padding: 3px;
+}
+
+@sbc: @bgColor;
+
+/*scroll*/
+/*
+::-webkit-scrollbar {
+  width: 5px;
+  height: 8px;
+  background: none;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #41586e;
+  opacity: 0.1;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color:#dadada
+}
+::-webkit-scrollbar-thumb:active {
+  background-color:#606060
+}
+::-webkit-scrollbar-thumb:disabled {
+  background-color:#f9f9f9
+}
+::-webkit-scrollbar-corner {
+  background-color:#f0f0f0
+}
+::-webkit-scrollbar-button {
+  height: 0;
+  background-color:#f0f0f0;
+  background-repeat:no-repeat
+}
+::-webkit-scrollbar-button:vertical {
+  height:0px
+}
+::-webkit-scrollbar-button:horizontal {
+  width:33px
+}
+::-webkit-scrollbar-button:horizontal:increment {
+  background-position:0 -444px
+}
+::-webkit-scrollbar-button:horizontal:decrement {
+  background-position:12px -425px
+}
+::-webkit-scrollbar-button:vertical:increment {
+  background-position:-1px -391px
+}
+::-webkit-scrollbar-button:vertical:decrement {
+  background-position:-1px -358px
+}
+::-webkit-scrollbar-button:hover {
+  background-color:#dadada
+}
+::-webkit-scrollbar-button:horizontal:increment:hover {
+  background-position:0 -548px
+}
+::-webkit-scrollbar-button:horizontal:decrement:hover {
+  background-position:12px -529px
+}
+::-webkit-scrollbar-button:vertical:increment:hover {
+  background-position:-1px -495px
+}
+::-webkit-scrollbar-button:vertical:decrement:hover {
+  background-position:-1px -462px
+}
+::-webkit-scrollbar-button:active {
+  background-color:#606060
+}
+::-webkit-scrollbar-button:horizontal:increment:active {
+  background-position:0 -652px
+}
+::-webkit-scrollbar-button:horizontal:decrement:active {
+background-position:12px -633px
+}
+::-webkit-scrollbar-button:vertical:increment:active {
+background-position:-1px -599px
+}
+::-webkit-scrollbar-button:vertical:decrement:active {
+background-position:-1px -566px
+}
+::-webkit-scrollbar-button:disabled {
+background-color:#f9f9f9
+}
+::-webkit-scrollbar-button:horizontal:increment:disabled {
+background-position:0 -756px
+}
+::-webkit-scrollbar-button:horizontal:decrement:disabled {
+background-position:12px -737px
+}
+::-webkit-scrollbar-button:vertical:increment:disabled {
+background-position:-1px -703px
+}
+::-webkit-scrollbar-button:vertical:decrement:disabled {
+background-position:-1px -670px
+}
+*/
+
+/*from notebook*/
+/*::-webkit-scrollbar{width:7px;height:7px;}::-webkit-scrollbar-thumb{background-color:rgba(50,50,50,0.3);}::-webkit-scrollbar-thumb:hover{background-color:rgba(50,50,50,0.6);}::-webkit-scrollbar-track{background-color:rgba(50,50,50,0.1);}::-webkit-scrollbar-track:hover{background-color:rgba(50,50,50,0.2);}
+*/
+
+#editorContent_ifr {
+	// border: 1px solid red;
+}
+
+.fa-calendar {
+	color: #666;
+}
+.dropdown-menu .fa {
+	width: 15px;
+}
+.dropdown-menu span, .dropdown-menu a, .dropdown-menu li {
+	cursor: default;
+}
+
+// 顶部导航, 博客
+#topNav a {
+	display: inline-block;
+	line-height: 60px;
+}
+
+.tab-pane {
+	padding: 5px 0 0 0;
+}
+.alert {
+	margin-bottom: 10px;
+}
+
+.btn {
+	border-radius: 0 !important;
+}
+
+.mce-container-body iframe {
+  //overflow-x: hidden; // firefox 不能要
+  //overflow-y: hidden;
+}
+// 新建笔记item
+#notebookNavForNewNote li, #notebookNavForNewSharedNote > li {
+	padding-left: 0;
+	border-bottom: 1px solid @borderColor;
+}
+#notebookNavForNewNote > li:hover, #notebookNavForNewNote > li:focus,
+#notebookNavForNewSharedNote > li:hover, #notebookNavForNewSharedNote > li:focus {
+	background: none;
+}
+
+.new-note-left {
+	padding: 0 5px;
+	width: 95px;
+	overflow: hidden;
+	white-space:nowrap;
+	border-right: 1px dashed @borderColor;
+	&:hover {
+		background-color:@borderColor;
+	}
+}
+.new-note-right {
+	padding: 0 5px;
+	&:hover {
+		background-color:@borderColor;
+	}
+}
+
+// 历史记录
+#historyList {
+	table {
+		width: 100%;
+	}
+	.btns{
+		border-top: 1px dashed #eee;
+		padding: 5px 0;
+	}
+}
+
+#left-column {
+	width: 100% !important;
+}
+#editorMask {
+	position: absolute; top: 0px; bottom: 0px; right: 0; left: 0; 
+	background-color: #fff;
+	z-index: -10;
+	.fa, a {
+		font-size: 24px;
+	}
+	padding-top: 50px;
+	text-align: center;
+	a {
+		display: inline-block;
+		border-radius: 3px;
+		border: 1px solid @borderColor;
+		padding: 10px;
+		&:hover {
+			background-color: @noteActiveBg;
+			color: #fff;
+		}
+	}
+}
+
+//---------------
+
+html,body {
+	background-color: @bgColor;
+	overflow: hidden;
+	
+}
+
+#right-column, 
+#newNoteMarkdownBtn, 
+#newShareNoteMarkdownBtn,
+.new-split,
+#editorMask,
+#sortType
+{
+	display: none;
+}
+#mainMask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background-color: @bgColor;
+  text-align: center;
+  padding-top: 100px;
+  z-index: 1000;
+}
+
+#header {
+	position: absolute;
+	left:0;
+	right:0;
+	z-index:1;
+	#leanoteMsg {
+		position: absolute;
+		width: @editorWidth;
+		left:0;
+		right:0;
+		text-align: right;
+		line-height: 60px;
+		margin:auto;
+	}
+	color: #ccc;
+	.pull-right {
+		&:hover {
+			a {
+				color: #000;
+			}
+		}
+	}
+}
+
+#newNoteWrap {
+	line-height: 40px; margin-top: 10px;
+	margin-left: 10px;
+	&:hover {
+		color: #000;
+		a {
+			color: #000;
+		}
+	}
+}
+
+#mainContainer {
+	overflow-y: hidden;
+}
+#newMyNote, #newSharedNote {
+	position: relative;
+	.dropdown-menu {
+		left: 0px  !important;
+	}
+	.dropdown {
+		position: static;
+	}
+}
+.dropdown-menu {
+	border: 1px solid #ccc;
+	background-color: @bgColor;
+}
+
+#note {
+	position: absolute;
+	width: @editorWidth;
+	margin: auto;
+	height: 100%;
+	left: 0;
+	right: 0;
+}
+
+#editor, #mdEditor {
+	position: absolute;
+	top: @headerHeight;
+	z-index: 2;
+}
+#wmd-input {
+	border: none;
+	background-color: @bgColor;
+	font-size: 16px !important;
+}
+#md-section-helper {
+	display: none;
+}
+#mdEditorPreview {
+	top: 43px !important; // 为了显示工具栏背景
+}
+
+#mceToolbar, #wmd-button-bar {
+	height: 40px;
+	padding: 5px 0;
+}
+.editorBg {
+	height: 3px;
+	background: url(/images/editor/editor-shadow.png) no-repeat center bottom #F9FAF4;
+}
+.mce-btn-small i, .mce-menubtn.mce-btn-small span, .wmd-button > span {
+	opacity: 0.85;
+}
+.mce-ico {
+	font-size: 18px;
+	line-height: 18px;
+	width: 18px;
+	height: 18px;
+}
+.tool-split {
+	line-height: 30px;
+}
+
+.mce-menubtn.mce-fixed-width.mce-btn-small span {
+	width: 80px;
+}
+.mce-menubtn.mce-btn-small span {
+	font-size: 16px;
+}
+#editorContent_ifr html {
+	border: none !important;
+}
+#noteTop{
+	position: absolute;
+	z-index:2;
+	left:0;
+	right: 150px;
+	padding: 15px 0;
+	height: @headerHeightNoBorder;
+}
+#noteTitleDiv {
+  height: 30px;
+}
+#noteTitle {
+  height: 100%;
+  padding: 0px 3px;
+  width: 100%;
+  border: none;
+  background-color: @bgColor;
+}
+
+//--------
+
+#noteList {
+	position: fixed;
+	top:0;
+	bottom:0;
+	left: 10px;
+	margin-top: @headerHeight;
+	width: 200px;
+	z-index: 0;
+	opacity: 0.8;
+	overflow-x: hidden;
+	overflow-y: hidden;
+	#notesAndSort {
+		display: none;
+	}
+	#noteItemListWrap {
+		display: none;
+	}
+	/*
+	&:hover {
+		#noteItemListWrap {
+			display: block;
+		}
+		#notesAndSort {
+			display: block;
+		}
+	}
+	*/
+}
+#notesAndSort {
+	background: none;
+}
+#noteItemList {
+	background: none;
+	.item {
+		background: none;
+	}
+}
+.item-active, #noteItemList .item-active:hover {
+	background-color: #F5F8EA !important;
+	color: #000;
+	.item-desc .fa {
+		 color: #666 !important;
+	  }
+  .item-title {
+    color: #000;
+    // font-weight: 800;
+  }
+}
+
+#leanoteNav {
+	background-color: @bgColor;
+	opacity: 0.3;
+}
+
+.new-note-right {
+	padding: 0 2px;
+}
+#loading {
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	content: url(../../images/loading-a-20-black.gif);
+	margin-top:10px;
+	visibility: hidden;
+}
+body {
+
+}
\ No newline at end of file
diff --git a/public/css/theme/writting.css b/public/css/theme/writting.css
new file mode 100644
index 0000000..5ab00a2
--- /dev/null
+++ b/public/css/theme/writting.css
@@ -0,0 +1,743 @@
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Open Sans Light'), local('OpenSans-Light'), url('../../fonts/open-sans2/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans'), local('OpenSans'), url('../../fonts/open-sans2/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../../fonts/open-sans2/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Open Sans Italic'), local('OpenSans-Italic'), url('../../fonts/open-sans2/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff') format('woff');
+}
+/*"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue", Helvetica, "Microsoft Yahei", Verdana, Simsun, "Segoe UI", "Segoe UI Web Regular", "Segoe UI Symbol",  "BBAlpha Sans", "S60 Sans", Arial, sans-serif;*/
+::selection {
+  background: #000000;
+  color: #ffffff;
+}
+::-moz-selection {
+  background: #000000;
+  color: #ffffff;
+}
+::-webkit-selection {
+  background: #000000;
+  color: #ffffff;
+}
+html,
+body {
+  background-color: #fbfcf7;
+}
+*,
+body {
+  font-family: 'Open Sans', 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
+  font-weight: 300;
+  font-size: 16px;
+}
+h1,
+h2,
+h3 {
+  font-family: 'Open Sans', 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
+  font-weight: 300 !important;
+}
+a {
+  color: #000000;
+  cursor: pointer;
+}
+a:hover {
+  text-decoration: none !important;
+  color: #000000;
+}
+a.raw {
+  color: #428bca;
+}
+a.raw:hover {
+  color: #2a6496;
+}
+/* header */
+#header {
+  height: 60px;
+  background-color: #fbfcf7;
+  color: #ffffff;
+  border-bottom: 1px solid #ebeff2;
+  /* for app */
+
+  webkit-user-select: none;
+  /* 还不知 */
+
+  -webkit-app-region: drag;
+  /* -webkit-app-region: no-drag; */
+
+}
+#header a {
+  color: #ccc;
+}
+#header li {
+  color: #000000;
+}
+#header li a {
+  color: #000000;
+}
+#searchWrap,
+#logo,
+#switcher,
+#leftNotebook,
+.noteSplit {
+  display: none;
+}
+#header ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+#header ul li.dropdown {
+  display: inline-block;
+  height: 60px;
+}
+#header ul > li > a.dropdown-toggle {
+  display: block;
+  padding: 15px 5px 0 0;
+  position: relative;
+}
+#header span.icon {
+  display: inline-block;
+  font-size: 28px;
+  color: #999999;
+}
+.dropdown-menu {
+  border-radius: 0;
+  margin: 0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border: 1px solid #0fb264;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.dropdown-menu li {
+  padding-left: 10px;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+}
+.dropdown-menu > li > a {
+  color: #000000;
+  display: inline-block;
+  padding: 3px 3px;
+}
+.dropdown-menu > li:hover,
+.dropdown-menu > li:focus {
+  background-color: #ebeff2;
+}
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+  background-color: #ebeff2;
+}
+.ios7-a {
+  display: inline-block;
+  padding: 0 10px 0 5px;
+  height: 40px;
+  vertical-align: middle;
+  line-height: 38px;
+  cursor: pointer;
+}
+/*********************/
+#page {
+  overflow: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+#pageInner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+#mainContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+  zoom: 1;
+}
+#search {
+  border: #bababa 1px solid;
+  background-color: #fff;
+  white-space: nowrap;
+  position: absolute;
+  height: 30px;
+  left: 3px;
+  right: 60px;
+  margin-top: 3px;
+}
+#search label {
+  display: none;
+}
+#searchButton {
+  border: 0 none;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+  cursor: pointer;
+  position: absolute;
+  right: 3px;
+  top: 5px;
+}
+#searchInput {
+  border: 0 none;
+  overflow: hidden;
+  position: absolute;
+  right: 20px;
+  left: 0px;
+  padding-left: 10px;
+  height: 28px;
+}
+#searchInput:focus {
+  border: none;
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+#notesAndSort {
+  background-color: #eee;
+  border-bottom: 1px solid #ebeff2;
+}
+/* item list */
+#noteItemList {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  width: 100%;
+  overflow-y: hidden;
+  background-color: #f7f7f7;
+  padding: 0 5px;
+}
+#noteItemList .item {
+  position: relative;
+  height: 110px;
+  overflow: hidden;
+  cursor: pointer;
+  padding: 5px;
+  border: 1px solid #ebeff2;
+  border-radius: 3px;
+  margin-top: 5px;
+  background-color: #fff;
+}
+#noteItemList .item:hover,
+#noteItemList .contextmenu-hover {
+  background-color: #ddd !important;
+  color: #000000;
+}
+#noteItemList .item-thumb {
+  padding-left: 10px;
+  width: 100px;
+  overflow: hidden;
+  position: absolute;
+  right: 0px;
+  height: 100px;
+  background-color: #fff;
+  margin-right: 5px;
+}
+.item-thumb img {
+  width: 100px;
+}
+#noteItemList .item-desc {
+  position: absolute;
+  left: 0;
+  right: 100px;
+  margin-left: 4px;
+}
+#noteItemList .item-desc .fa {
+  color: #666;
+}
+#noteItemList .item-blog {
+  position: absolute;
+  right: 1px;
+  font-size: 10px;
+  z-index: 2;
+  top: 1px;
+  padding: 3px;
+  cursor: pointer;
+  width: 20px;
+  text-align: center;
+  opacity: 0.5;
+  background-color: #464C5E;
+}
+#noteItemList .item-blog .fa {
+  color: #fff !important;
+}
+#noteItemList .item-blog:hover {
+  opacity: 0.8;
+}
+.item-title {
+  /*font-weight: 400;*/
+
+  font-size: 16px;
+  height: 22px;
+  line-height: 20px;
+  overflow: hidden;
+  margin-bottom: 0px;
+  color: #000000;
+  border-bottom: dashed 1px #ebeff2;
+}
+/* note */
+/* editor */
+#editorTool {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+#editorTool li {
+  display: inline-block;
+}
+#noteTitle:focus {
+  outline: none !important;
+}
+#editor,
+#mdEditor {
+  z-index: 2;
+  top: 71px;
+  bottom: 0px;
+  right: 0;
+  left: 0;
+  padding: 0;
+  display: none;
+}
+#mdEditor {
+  z-index: 1;
+  background-color: #fff;
+  bottom: 10px;
+}
+#mdEditor #md-section-helper,
+#mdEditor #wmd-input {
+  font-size: 14px;
+  line-height: 22px;
+}
+#editorContent {
+  position: absolute;
+  top: 30px;
+  bottom: 10px;
+  right: 0;
+  left: 0;
+  overflow: auto;
+}
+/* 包裹iframe */
+#editor .mce-ifr {
+  border: none;
+  overflow: hidden !important;
+  /*不知道哪里设置了auto*/
+
+  /*border-radius: 5px;*/
+
+}
+/* 最顶层 */
+#editor .mce-tinymce {
+  border: none;
+}
+/*编辑器按钮*/
+#mceToolbar,
+#wmd-button-bar {
+  position: relative;
+  height: 30px;
+  overflow: hidden;
+  background-color: #fbfcf7;
+}
+/* 编辑器工具 需要important, 因为mce还要有js加载css, 肯定在此之后 */
+/*加高, 之前显得拥挤*/
+.mce-btn-small button {
+  padding: 5px 5px !important;
+  line-height: 20px !important;
+}
+.mce-btn {
+  background-color: #fbfcf7 !important;
+}
+.mce-menubtn.mce-btn-small span {
+  line-height: 20px !important;
+}
+.mce-btn span {
+  font-family: 'Open Sans', 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif !important;
+}
+.mce-primary button,
+.mce-primary button i {
+  text-shadow: none;
+}
+.mce-primary {
+  background-color: #47a447 !important;
+  border-color: #398439 !important;
+}
+.mce-menu-item:hover,
+.mce-menu-item.mce-selected,
+.mce-menu-item:focus {
+  background-color: #ebeff2;
+}
+.mce-menu-item:hover span,
+.mce-menu-item.mce-selected span,
+.mce-menu-item:focus span {
+  color: #000 !important;
+}
+.mce-menu-item-normal.mce-active {
+  background-color: #ebeff2;
+}
+.tool-split {
+  display: inline-block;
+  line-height: 25px;
+  color: #ddd;
+}
+/*标签与其它工具*/
+#tool {
+  display: none;
+  border-bottom: 1px solid #ddd;
+}
+/* tag */
+#tag {
+  height: 40px;
+  line-height: 38px;
+}
+#tag .dropdown {
+  line-height: 30px;
+}
+#addTagInput {
+  line-height: 25px;
+  display: none;
+  padding: 0;
+  border: none;
+  background-color: #fbfcf7;
+}
+#addTagInput:focus {
+  outline: none;
+}
+.label-default {
+  background-color: #464C5E;
+}
+.label-red {
+  background-color: #d9534f;
+}
+.label-yellow {
+  background-color: #f0ad4e;
+}
+.label-blue {
+  background-color: #428bca;
+}
+.label-green {
+  background-color: #5cb85c;
+}
+.label {
+  border-radius: 0;
+  font-weight: normal;
+}
+.label i {
+  width: 10px;
+  cursor: pointer;
+  font-style: normal;
+  /*border-left: 1px solid #ccc;*/
+
+  display: inline-block;
+  padding-left: 3px;
+  opacity: 0;
+}
+.label i:hover {
+  opacity: 1;
+}
+/* leanote nav */
+#leanoteNav {
+  position: absolute;
+  right: 5px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  background-color: #fff;
+  opacity: 0.5;
+  z-index: 11;
+  margin-right: 2px;
+}
+#leanoteNav h1 {
+  margin: 0;
+  font-size: 18px;
+  padding: 3px;
+  cursor: pointer;
+}
+#leanoteNav i {
+  padding: 3px;
+}
+#leanoteNav span {
+  display: none;
+}
+#leanoteNav #leanoteNavContent {
+  display: none;
+  overflow: auto;
+}
+#leanoteNav.unfolder {
+  min-width: 200px;
+  max-width: 300px;
+  opacity: 0.8;
+}
+#leanoteNav.unfolder h1 {
+  border-bottom: 1px dashed #ebeff2;
+}
+#leanoteNav.unfolder span {
+  display: inline;
+}
+#leanoteNav.unfolder #leanoteNavContent {
+  display: block;
+  min-height: 30px;
+}
+#leanoteNav ul {
+  margin: 0;
+  padding-left: 23px;
+}
+#leanoteNav ul li {
+  list-style-type: disc;
+}
+#leanoteNav ul li a:hover {
+  color: #0fb264;
+}
+#leanoteNav ul .nav-h2 {
+  margin-left: 20px;
+}
+#leanoteNav ul .nav-h3 {
+  margin-left: 30px;
+}
+#leanoteNav ul .nav-h4 {
+  margin-left: 40px;
+}
+#leanoteNav ul .nav-h5 {
+  margin-left: 50px;
+}
+.scrollTo-a {
+  cursor: pointer !important;
+}
+#noteRead {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: none;
+  z-index: 100;
+  padding-left: 5px;
+  background-color: #fff;
+}
+#noteReadContainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+#noteReadTop {
+  position: absolute;
+  height: 60px;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid #ebeff2;
+}
+#noteReadTitle {
+  margin: 3px 0;
+}
+#noteReadContent {
+  position: absolute;
+  top: 60px;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  overflow: auto;
+  padding: 3px;
+}
+/*scroll*/
+/*
+::-webkit-scrollbar {
+  width: 5px;
+  height: 8px;
+  background: none;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #41586e;
+  opacity: 0.1;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color:#dadada
+}
+::-webkit-scrollbar-thumb:active {
+  background-color:#606060
+}
+::-webkit-scrollbar-thumb:disabled {
+  background-color:#f9f9f9
+}
+::-webkit-scrollbar-corner {
+  background-color:#f0f0f0
+}
+::-webkit-scrollbar-button {
+  height: 0;
+  background-color:#f0f0f0;
+  background-repeat:no-repeat
+}
+::-webkit-scrollbar-button:vertical {
+  height:0px
+}
+::-webkit-scrollbar-button:horizontal {
+  width:33px
+}
+::-webkit-scrollbar-button:horizontal:increment {
+  background-position:0 -444px
+}
+::-webkit-scrollbar-button:horizontal:decrement {
+  background-position:12px -425px
+}
+::-webkit-scrollbar-button:vertical:increment {
+  background-position:-1px -391px
+}
+::-webkit-scrollbar-button:vertical:decrement {
+  background-position:-1px -358px
+}
+::-webkit-scrollbar-button:hover {
+  background-color:#dadada
+}
+::-webkit-scrollbar-button:horizontal:increment:hover {
+  background-position:0 -548px
+}
+::-webkit-scrollbar-button:horizontal:decrement:hover {
+  background-position:12px -529px
+}
+::-webkit-scrollbar-button:vertical:increment:hover {
+  background-position:-1px -495px
+}
+::-webkit-scrollbar-button:vertical:decrement:hover {
+  background-position:-1px -462px
+}
+::-webkit-scrollbar-button:active {
+  background-color:#606060
+}
+::-webkit-scrollbar-button:horizontal:increment:active {
+  background-position:0 -652px
+}
+::-webkit-scrollbar-button:horizontal:decrement:active {
+background-position:12px -633px
+}
+::-webkit-scrollbar-button:vertical:increment:active {
+background-position:-1px -599px
+}
+::-webkit-scrollbar-button:vertical:decrement:active {
+background-position:-1px -566px
+}
+::-webkit-scrollbar-button:disabled {
+background-color:#f9f9f9
+}
+::-webkit-scrollbar-button:horizontal:increment:disabled {
+background-position:0 -756px
+}
+::-webkit-scrollbar-button:horizontal:decrement:disabled {
+background-position:12px -737px
+}
+::-webkit-scrollbar-button:vertical:increment:disabled {
+background-position:-1px -703px
+}
+::-webkit-scrollbar-button:vertical:decrement:disabled {
+background-position:-1px -670px
+}
+*/
+/*from notebook*/
+/*::-webkit-scrollbar{width:7px;height:7px;}::-webkit-scrollbar-thumb{background-color:rgba(50,50,50,0.3);}::-webkit-scrollbar-thumb:hover{background-color:rgba(50,50,50,0.6);}::-webkit-scrollbar-track{background-color:rgba(50,50,50,0.1);}::-webkit-scrollbar-track:hover{background-color:rgba(50,50,50,0.2);}
+*/
+.fa-calendar {
+  color: #666;
+}
+.dropdown-menu .fa {
+  width: 15px;
+}
+.dropdown-menu span,
+.dropdown-menu a,
+.dropdown-menu li {
+  cursor: default;
+}
+#topNav a {
+  display: inline-block;
+  line-height: 60px;
+}
+.tab-pane {
+  padding: 5px 0 0 0;
+}
+.alert {
+  margin-bottom: 10px;
+}
+.btn {
+  border-radius: 0 !important;
+}
+#notebookNavForNewNote li,
+#notebookNavForNewSharedNote > li {
+  padding-left: 0;
+  border-bottom: 1px solid #ebeff2;
+}
+#notebookNavForNewNote > li:hover,
+#notebookNavForNewNote > li:focus,
+#notebookNavForNewSharedNote > li:hover,
+#notebookNavForNewSharedNote > li:focus {
+  background: none;
+}
+.new-note-left {
+  padding: 0 5px;
+  width: 95px;
+  overflow: hidden;
+  white-space: nowrap;
+  border-right: 1px dashed #ebeff2;
+}
+.new-note-left:hover {
+  background-color: #ebeff2;
+}
+.new-note-right {
+  padding: 0 5px;
+}
+.new-note-right:hover {
+  background-color: #ebeff2;
+}
+#historyList table {
+  width: 100%;
+}
+#historyList .btns {
+  border-top: 1px dashed #eee;
+  padding: 5px 0;
+}
+#left-column {
+  width: 100% !important;
+}
+#editorMask {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  right: 0;
+  left: 0;
+  background-color: #fff;
+  z-index: -10;
+  padding-top: 50px;
+  text-align: center;
+}
+#editorMask .fa,
+#editorMask a {
+  font-size: 24px;
+}
+#editorMask a {
+  display: inline-block;
+  border-radius: 3px;
+  border: 1px solid #ebeff2;
+  padding: 10px;
+}
+#editorMask a:hover {
+  background-color: #65bd77;
+  color: #fff;
+}
diff --git a/public/css/theme/writting.less b/public/css/theme/writting.less
new file mode 100644
index 0000000..4b20516
--- /dev/null
+++ b/public/css/theme/writting.less
@@ -0,0 +1,832 @@
+
+@bgColor: #fff;
+@headerBgColor: #25313e;
+@fontFamily: 'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif;
+@aWhiteColor: #fff;
+@aBlackColor: #000;
+@borderColor: #EBEFF2;
+@headerHeight: 60px;
+@headerHeightNoBorder: 59px;
+@hColor: #0fb264; // #47a447;// 更深 #198764; // boostrap: #5cb85c; bootstrap:hover #47a447; // #5AD4A0; // #47a447
+@titleColor: @hColor;
+@fontSize: 14px;
+@leftNotebookWidth: 170px;
+@noteListWidth: 250px;
+@noteActiveBg: #65bd77;
+
+@bgColor: #fbfcf7;
+@headerBgColor: #fbfcf7;
+@fontFamily: 'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif;
+@aWhiteColor: #fff;
+@aBlackColor: #000;
+@borderColor: #EBEFF2;
+@headerHeight: 60px;
+@hColor: #0fb264; // #47a447;// 更深 #198764; // boostrap: #5cb85c; bootstrap:hover #47a447; // #5AD4A0; // #47a447
+@titleColor: @hColor;
+@fontSize: 16px;
+@leftNotebookWidth: 170px;
+@noteListWidth: 250px;
+@noteActiveBg: #65bd77;
+@editorWidth: 700px;
+
+
+// font
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Open Sans Light'), local('OpenSans-Light'), url('../../fonts/open-sans2/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans'), local('OpenSans'), url('../../fonts/open-sans2/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../../fonts/open-sans2/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Open Sans Italic'), local('OpenSans-Italic'), url('../../fonts/open-sans2/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff') format('woff');
+}
+
+/*"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue", Helvetica, "Microsoft Yahei", Verdana, Simsun, "Segoe UI", "Segoe UI Web Regular", "Segoe UI Symbol",  "BBAlpha Sans", "S60 Sans", Arial, sans-serif;*/
+
+@selectionBg: @aBlackColor;
+@selectionColor: #fff;
+::selection { background:@selectionBg; color:@selectionColor; } 
+::-moz-selection { background:@selectionBg; color:@selectionColor; } 
+::-webkit-selection { background:@selectionBg; color:@selectionColor; }
+
+html,body {
+	background-color: @bgColor;
+}
+*, body {
+  font-family: @fontFamily;
+  font-weight: 300;
+  font-size: @fontSize;
+}
+h1, h2, h3 {
+  font-family: @fontFamily;
+  font-weight: 300 !important;
+}
+a {
+  color: @aBlackColor;
+  cursor: pointer;
+}
+
+a:hover {
+  text-decoration: none !important;
+  color: @aBlackColor;
+}
+
+// 原生的a
+a.raw {
+	color: #428bca;
+}
+a.raw:hover {
+	color: #2a6496;
+}
+
+/* header */
+
+#header {
+  height: @headerHeight;
+  background-color: @headerBgColor;
+  color: @aWhiteColor;
+  a {
+	  color: #ccc;//@aWhiteColor;
+  }
+  li {
+	  color: @aBlackColor;
+  }
+  li a {
+	  color: @aBlackColor;
+  }
+  border-bottom: 1px solid @borderColor;
+
+  /* for app */
+  webkit-user-select: none; /* 还不知 */
+  -webkit-app-region: drag; /* -webkit-app-region: no-drag; */
+}
+
+#searchWrap, #logo, #switcher, 
+#leftNotebook, 
+.noteSplit
+{
+	display: none;	
+}
+
+#header ul {
+  margin:0;
+  padding:0;
+  list-style: none;
+}
+#header ul li.dropdown {
+  display: inline-block;
+  height: @headerHeight;
+}
+
+#header ul > li > a.dropdown-toggle {
+  display: block;
+  padding: 15px 5px 0 0;
+  position: relative;
+}
+
+#header span.icon {
+  display: inline-block;
+  font-size: 28px;
+  color: #999999;
+}
+
+.dropdown-menu {
+  border-radius: 0;
+  margin:0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border: 1px solid @hColor;
+  overflow-x: hidden; 
+  overflow-y: auto;
+}
+.dropdown-menu li {
+  padding-left: 10px;
+  width: 100%;
+  height: 30px; // 父设置了line-height, 子下拉也受影响, "新建笔记"
+  line-height: 30px;
+}
+.dropdown-menu > li > a {
+  color: @aBlackColor;
+  display: inline-block;
+  padding: 3px 3px;
+}
+.dropdown-menu>li:hover, .dropdown-menu>li:focus {
+  background-color: @borderColor;
+}
+.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
+  background-color: @borderColor;
+}
+
+.ios7-a {
+  display: inline-block;
+  padding: 0 10px 0 5px;
+  height: 40px;
+  vertical-align: middle;
+  line-height: 38px;
+  cursor: pointer; 
+}
+
+/*********************/
+#page {
+  overflow: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+#pageInner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+#mainContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+  zoom: 1;
+}
+
+
+
+
+#search {
+  border: #bababa 1px solid;
+  background-color: #fff;
+  white-space: nowrap;
+  position: absolute;
+  height: 30px;
+  left:3px;
+  right:60px;
+  margin-top: 3px;
+}
+#search label {
+  display: none;
+}
+#searchButton {
+  border: 0 none;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+  cursor: pointer;
+  position: absolute;
+  right:3px;
+  top: 5px;
+}
+#searchInput {
+  border: 0 none;
+  overflow: hidden;
+  position: absolute;
+  right:20px;
+  left: 0px;
+  padding-left: 10px;
+  height: 28px;
+}
+#searchInput:focus {
+  border: none;
+  outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px
+}
+
+#notesAndSort {
+  background-color: #eee; // #65bd77; // @bgColor;
+  border-bottom: 1px solid @borderColor;
+  a.dropdown-toggle {
+	  // color: #fff;
+  }
+}
+
+/* item list */
+#noteItemList {
+  position: absolute;
+  left:0;
+  right:0;
+  bottom: 0;
+  top: 0;
+  width: 100%;
+  overflow-y: hidden;
+  background-color: #f7f7f7;
+  padding: 0 5px;
+}
+#noteItemList .item {
+  position: relative;
+  height: 110px;
+  overflow: hidden;
+  cursor: pointer;
+  padding: 5px;
+  border: 1px solid @borderColor;
+  border-radius: 3px;
+  margin-top: 5px;
+  background-color: #fff;
+}
+
+#noteItemList .item:hover, 
+#noteItemList .contextmenu-hover {
+  background-color: #ddd !important;
+  color: @aBlackColor;
+  .item-title {
+    // color: @aBlackColor;
+    //font-weight: 800;
+  }
+}
+
+#noteItemList .item-thumb  {
+  padding-left: 10px;
+  width: 100px; 
+  height: 100px; 
+  overflow: hidden;
+  position: absolute; 
+  right: 0px;
+  height: 100px;
+  background-color: #fff;
+  margin-right: 5px;
+}
+  .item-thumb img {
+     width: 100px;
+  }
+#noteItemList .item-desc {
+  position: absolute; 
+  left: 0;
+  right: 100px;
+  margin-left: 4px;
+  .fa { // folder, calender 颜色暗些
+  	color: #666;
+  }
+}
+// blog
+#noteItemList .item-blog {
+  position: absolute; 
+  right: 1px;
+  font-size: 10px;
+  z-index: 2;
+  top: 1px;
+  padding: 3px;
+  cursor: pointer;
+  .fa {
+	  color: #fff !important;
+  }
+  width: 20px;
+  text-align: center;
+  opacity: 0.5;
+  &:hover {
+	  opacity: 0.8;
+  }
+  background-color: #464C5E;
+}
+.item-title {
+    /*font-weight: 400;*/
+    font-size: 16px;
+    height: 22px;
+    line-height: 20px;
+    overflow: hidden;
+    margin-bottom: 0px;
+    color: @aBlackColor;
+    border-bottom: dashed 1px @borderColor;
+  }
+  
+/* note */
+
+/* editor */
+#editorTool {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  // width: 200px;
+}
+#editorTool li {
+  display: inline-block;
+}
+
+
+#noteTitle:focus {
+  // outline:thin dotted #333;outline:1px auto -webkit-focus-ring-color;outline-offset:-2px
+  outline: none !important;
+  // border: 1px solid @hColor;
+}
+
+#editor, #mdEditor{
+  z-index: 2;
+  top: 71px; 
+  bottom: 0px; 
+  right: 0; 
+  left: 0;  
+  padding: 0; // 0px 0px 0px 0px;
+	display: none;
+}
+#mdEditor {
+	z-index: 1;
+	background-color: #fff;
+    bottom: 10px; 
+    #md-section-helper, #wmd-input {
+		font-size: 14px;
+		line-height: 22px;			
+    }
+}
+#editorContent {
+  position: absolute;
+  top:30px;
+  bottom: 10px; 
+  right: 0; 
+  left: 0;
+  overflow: auto; // 不设置editor隐藏时没有scroll
+}
+#editorContent_ifr {
+	// padding-top: 10px;
+}
+
+/* 包裹iframe */
+#editor .mce-ifr {
+  border: none;
+  // padding: 10px;
+  overflow: hidden !important; /*不知道哪里设置了auto*/
+  /*border-radius: 5px;*/
+  // border: 1px solid @borderColor;
+  // border-top-left-radius: 5px;
+  // border-bottom-left-radius: 5px;
+}
+
+/* 最顶层 */
+#editor .mce-tinymce {
+  border: none;
+}
+#editor iframe {
+}
+/*编辑器按钮*/
+#mceToolbar, #wmd-button-bar {
+  position: relative; 
+  height: 30px; 
+  overflow: hidden; 
+  background-color: @bgColor;
+}
+/* 编辑器工具 需要important, 因为mce还要有js加载css, 肯定在此之后 */
+
+/*加高, 之前显得拥挤*/
+.mce-btn-small button {
+  padding: 5px 5px !important;
+  line-height: 20px !important;
+}
+.mce-btn {
+  background-color: @bgColor !important;
+}
+.mce-menubtn.mce-btn-small span {
+  line-height: 20px !important;
+}
+.mce-btn span {
+  font-family: @fontFamily !important;
+}
+.mce-primary button, .mce-primary button i {
+	text-shadow: none;
+}
+.mce-primary {
+	background-color: #47a447 !important;
+	border-color: #398439 !important;
+}
+// 下拉
+.mce-menu-item:hover, .mce-menu-item.mce-selected, .mce-menu-item:focus {
+	background-color: @borderColor;
+	span {
+		color: #000 !important;
+	}
+}
+// 下拉选中
+.mce-menu-item-normal.mce-active {
+	background-color: @borderColor;
+}
+// tool的分隔
+.tool-split {
+	display: inline-block;
+	line-height: 25px;	
+	color: #ddd;
+}
+
+/*标签与其它工具*/
+#tool {
+	display: none;
+  border-bottom: 1px solid #ddd;
+}
+
+/* tag */
+#tag {
+  height: 40px;
+  line-height: 38px
+}
+// 前面的38影响了dropdown
+#tag .dropdown {
+  line-height: 30px;
+}
+#addTagInput {
+  line-height: 25px;
+  display: none;
+  padding:0;
+  border: none;
+  background-color: @bgColor;
+}
+#addTagInput:focus {
+  outline: none;
+}
+.label-default {
+  background-color: #464C5E;
+}
+.label-red {
+  background-color: #d9534f;
+}
+.label-yellow {
+  background-color: #f0ad4e;
+}
+.label-blue {
+  background-color: #428bca;
+}
+.label-green {
+  background-color: #5cb85c;
+}
+.label {
+  border-radius: 0;
+  font-weight: normal;
+}
+.label i {
+  width: 10px;
+  cursor: pointer;
+  font-style: normal;
+  /*border-left: 1px solid #ccc;*/
+  display: inline-block;
+  padding-left: 3px;
+  opacity: 0;
+}
+.label i:hover {
+  opacity: 1;
+  // font-weight: bold;
+}
+
+/* leanote nav */
+
+#leanoteNav {
+  position: absolute; 
+  right: 5px;
+  border: 1px solid #ccc; 
+  border-radius: 3px;
+  background-color: #fff;
+  opacity: 0.5;
+  // display: none;
+  z-index: 11;
+  margin-right: 2px;
+  h1 {
+	margin:0;
+  	font-size: 18px;
+  	padding: 3px;
+  	cursor: pointer;
+  }
+  i {
+    padding: 3px;
+  }
+  span {
+  	display: none;
+  }
+  #leanoteNavContent {
+  	display: none;
+	overflow: auto;
+  } 
+}
+
+#leanoteNav.unfolder {
+  min-width: 200px;
+  max-width: 300px;
+  // bottom: 1px;
+  opacity: 0.8;
+  h1 {
+  	border-bottom: 1px dashed @borderColor;
+  }
+  span {
+	  display: inline;
+  }
+  
+  #leanoteNavContent {
+  	display: block;
+	min-height: 30px;
+  }
+}
+
+#leanoteNav ul {
+  margin:0;
+  padding-left: 23px;
+  li {
+  	list-style-type: disc;
+  	a {
+  		&:hover {
+  			color: @hColor;
+  		}	
+  	}
+  }
+}
+#leanoteNav ul .nav-h1 {
+}
+#leanoteNav ul .nav-h2 {
+  margin-left: 20px;
+}
+#leanoteNav ul .nav-h3 {
+  margin-left: 30px;
+}
+#leanoteNav ul .nav-h4 {
+  margin-left: 40px;
+}
+#leanoteNav ul .nav-h5 {
+  margin-left: 50px;
+}
+.scrollTo-a {
+  cursor: pointer !important;
+}
+
+//---------------
+// note for read
+#noteRead {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	display: none;
+	z-index: 100;
+	padding-left: 5px;
+	background-color: #fff;
+}
+#noteReadContainer {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+@noteReadTopHeight: 60px;
+#noteReadTop {
+	position: absolute;
+	height: @noteReadTopHeight;
+	left:0;
+	right: 0;
+	border-bottom: 1px solid @borderColor;
+}
+#noteReadTitle {
+	margin: 3px 0;
+}
+#noteReadContent {
+	position: absolute;
+	top: @noteReadTopHeight;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	overflow: auto;
+	padding: 3px;
+}
+
+@sbc: @bgColor;
+
+/*scroll*/
+/*
+::-webkit-scrollbar {
+  width: 5px;
+  height: 8px;
+  background: none;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #41586e;
+  opacity: 0.1;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color:#dadada
+}
+::-webkit-scrollbar-thumb:active {
+  background-color:#606060
+}
+::-webkit-scrollbar-thumb:disabled {
+  background-color:#f9f9f9
+}
+::-webkit-scrollbar-corner {
+  background-color:#f0f0f0
+}
+::-webkit-scrollbar-button {
+  height: 0;
+  background-color:#f0f0f0;
+  background-repeat:no-repeat
+}
+::-webkit-scrollbar-button:vertical {
+  height:0px
+}
+::-webkit-scrollbar-button:horizontal {
+  width:33px
+}
+::-webkit-scrollbar-button:horizontal:increment {
+  background-position:0 -444px
+}
+::-webkit-scrollbar-button:horizontal:decrement {
+  background-position:12px -425px
+}
+::-webkit-scrollbar-button:vertical:increment {
+  background-position:-1px -391px
+}
+::-webkit-scrollbar-button:vertical:decrement {
+  background-position:-1px -358px
+}
+::-webkit-scrollbar-button:hover {
+  background-color:#dadada
+}
+::-webkit-scrollbar-button:horizontal:increment:hover {
+  background-position:0 -548px
+}
+::-webkit-scrollbar-button:horizontal:decrement:hover {
+  background-position:12px -529px
+}
+::-webkit-scrollbar-button:vertical:increment:hover {
+  background-position:-1px -495px
+}
+::-webkit-scrollbar-button:vertical:decrement:hover {
+  background-position:-1px -462px
+}
+::-webkit-scrollbar-button:active {
+  background-color:#606060
+}
+::-webkit-scrollbar-button:horizontal:increment:active {
+  background-position:0 -652px
+}
+::-webkit-scrollbar-button:horizontal:decrement:active {
+background-position:12px -633px
+}
+::-webkit-scrollbar-button:vertical:increment:active {
+background-position:-1px -599px
+}
+::-webkit-scrollbar-button:vertical:decrement:active {
+background-position:-1px -566px
+}
+::-webkit-scrollbar-button:disabled {
+background-color:#f9f9f9
+}
+::-webkit-scrollbar-button:horizontal:increment:disabled {
+background-position:0 -756px
+}
+::-webkit-scrollbar-button:horizontal:decrement:disabled {
+background-position:12px -737px
+}
+::-webkit-scrollbar-button:vertical:increment:disabled {
+background-position:-1px -703px
+}
+::-webkit-scrollbar-button:vertical:decrement:disabled {
+background-position:-1px -670px
+}
+*/
+
+/*from notebook*/
+/*::-webkit-scrollbar{width:7px;height:7px;}::-webkit-scrollbar-thumb{background-color:rgba(50,50,50,0.3);}::-webkit-scrollbar-thumb:hover{background-color:rgba(50,50,50,0.6);}::-webkit-scrollbar-track{background-color:rgba(50,50,50,0.1);}::-webkit-scrollbar-track:hover{background-color:rgba(50,50,50,0.2);}
+*/
+
+#editorContent_ifr {
+	// border: 1px solid red;
+}
+
+.fa-calendar {
+	color: #666;
+}
+.dropdown-menu .fa {
+	width: 15px;
+}
+.dropdown-menu span, .dropdown-menu a, .dropdown-menu li {
+	cursor: default;
+}
+
+// 顶部导航, 博客
+#topNav a {
+	display: inline-block;
+	line-height: 60px;
+}
+
+.tab-pane {
+	padding: 5px 0 0 0;
+}
+.alert {
+	margin-bottom: 10px;
+}
+
+.btn {
+	border-radius: 0 !important;
+}
+
+.mce-container-body iframe {
+  //overflow-x: hidden; // firefox 不能要
+  //overflow-y: hidden;
+}
+// 新建笔记item
+#notebookNavForNewNote li, #notebookNavForNewSharedNote > li {
+	padding-left: 0;
+	border-bottom: 1px solid @borderColor;
+}
+#notebookNavForNewNote > li:hover, #notebookNavForNewNote > li:focus,
+#notebookNavForNewSharedNote > li:hover, #notebookNavForNewSharedNote > li:focus {
+	background: none;
+}
+
+.new-note-left {
+	padding: 0 5px;
+	width: 95px;
+	overflow: hidden;
+	white-space:nowrap;
+	border-right: 1px dashed @borderColor;
+	&:hover {
+		background-color:@borderColor;
+	}
+}
+.new-note-right {
+	padding: 0 5px;
+	&:hover {
+		background-color:@borderColor;
+	}
+}
+
+// 历史记录
+#historyList {
+	table {
+		width: 100%;
+	}
+	.btns{
+		border-top: 1px dashed #eee;
+		padding: 5px 0;
+	}
+}
+
+#left-column {
+	width: 100% !important;
+}
+#editorMask {
+	position: absolute; top: 0px; bottom: 0px; right: 0; left: 0; 
+	background-color: #fff;
+	z-index: -10;
+	.fa, a {
+		font-size: 24px;
+	}
+	padding-top: 50px;
+	text-align: center;
+	a {
+		display: inline-block;
+		border-radius: 3px;
+		border: 1px solid @borderColor;
+		padding: 10px;
+		&:hover {
+			background-color: @noteActiveBg;
+			color: #fff;
+		}
+	}
+}
diff --git a/public/images/editor/editor-shadow.png b/public/images/editor/editor-shadow.png
new file mode 100644
index 0000000..5e9da81
Binary files /dev/null and b/public/images/editor/editor-shadow.png differ
diff --git a/public/images/loading-a-20-black.gif b/public/images/loading-a-20-black.gif
new file mode 100644
index 0000000..71dd40d
Binary files /dev/null and b/public/images/loading-a-20-black.gif differ
diff --git a/public/images/loading-a-20.gif b/public/images/loading-a-20.gif
index c71b9c3..0bd1410 100644
Binary files a/public/images/loading-a-20.gif and b/public/images/loading-a-20.gif differ
diff --git a/public/js/app/page.js b/public/js/app/page.js
index 0bfef38..883609c 100644
--- a/public/js/app/page.js
+++ b/public/js/app/page.js
@@ -1,4 +1,7 @@
 // 主页渲染
+//-------------
+// 编辑器模式
+var em = new editorMode();
 
 // ifr 的高度, 默认是小20px, 启动1s后运行resizeEditor()调整之
 
@@ -96,15 +99,17 @@ $(function() {
 		
 		var height = $("#mceToolbar").height();
 
+		// 现在是折叠的
 		if (height < $("#popularToolbar").height()) {
 			$("#mceToolbar").height($("#popularToolbar").height());
 			$(this).find("i").removeClass("fa-angle-down").addClass("fa-angle-up");
 			
 		} else {
-			$("#mceToolbar").height(30);
+			$("#mceToolbar").height(height/2);
 			$(this).find("i").removeClass("fa-angle-up").addClass("fa-angle-down");
 		}
 		
+		/*
 		// 新加 3.12
 		var mceToolbarHeight = $("#mceToolbar").height();
 		$("#editorContent").css("top", mceToolbarHeight);
@@ -113,6 +118,7 @@ $(function() {
 		$("#leanoteNav").css("top", mceToolbarHeight + 2);
 
 		$("#editor").css("top", $("#noteTop").height());
+		*/
 		
 		resizeEditor();
 		
@@ -184,7 +190,7 @@ $(function() {
 		selector : "#editorContent",
 		// height: 100,//这个应该是文档的高度, 而其上层的高度是$("#content").height(),
 		// parentHeight: $("#content").height(),
-		content_css : ["css/bootstrap.css", "css/editor.css"],
+		content_css : ["css/bootstrap.css", "css/editor/editor.css"].concat(em.getWritingCss()),
 		skin : "custom",
 		language: LEA.locale, // 语言
 		plugins : [
@@ -611,7 +617,7 @@ $(function() {
 	if(LEA.isMobile) {
 		UserInfo.NoteListWidth = 101;
 	}
-	resize3ColumnsEnd(UserInfo.NotebookWidth, UserInfo.NoteListWidth);
+//	resize3ColumnsEnd(UserInfo.NotebookWidth, UserInfo.NoteListWidth);
 	if (UserInfo.LeftIsMin) {
 		minLeft(false);
 	}
@@ -679,4 +685,89 @@ $(function() {
 		$("#wmd-panel-preview").css("width", "100%");
 	}, 10);
 	
-});
\ No newline at end of file
+	// 编辑器模式
+	em.init();
+});
+
+// 编辑器模式
+function editorMode() {
+	this.writingHash = "#writing";
+	this.normalHash = "#normal";
+	this.isWritingMode = location.hash == this.writingHash;
+	
+	this.toggleA = null;
+}
+
+editorMode.prototype.toggleAText = function(isWriting) {
+	var self = this;
+	setTimeout(function() {
+		toggleA = $("#toggleEditorMode a");
+		if(isWriting) {
+			toggleA.attr("href", self.normalHash).text("普通模式");
+		} else {
+			toggleA.attr("href", self.writingHash).text("写作模式");
+		}	
+	}, 0);
+}
+editorMode.prototype.isWriting = function(hash) {
+	return hash == this.writingHash;
+}
+editorMode.prototype.init = function() {
+	this.changeMode(this.isWritingMode);
+	var self = this;
+	$("#toggleEditorMode").click(function() {
+		var $a = $(this).find("a");
+		var isWriting = self.isWriting($a.attr("href"));
+		self.changeMode(isWriting);
+	});
+}
+// 改变模式
+editorMode.prototype.changeMode = function(isWritingMode) {
+	this.toggleAText(isWritingMode);
+	if(isWritingMode) {
+		this.writtingMode();
+	} else {
+		this.normalMode();
+	}
+}
+editorMode.prototype.normalMode = function() {
+	var $c = $("#editorContent_ifr").contents();
+	
+	$c.contents().find("#writtingMode").remove();
+	$c.contents().find('link[href$="editor-writting-mode.css"]').remove();
+			
+		$("#noteItemListWrap, #notesAndSort").show();
+	$("#noteList").unbind("mouseenter").unbind("mouseleave"); 
+	
+	var theme = UserInfo.Theme || "default";
+	theme += ".css";
+	$("#themeLink").attr("href", "/css/theme/" + theme);
+	
+	
+}
+editorMode.prototype.writtingMode = function() {
+//	$("body").fadeOut();
+	
+	$("#themeLink").attr("href", "/css/theme/writting-overwrite.css");
+	
+	setTimeout(function() {
+		var $c = $("#editorContent_ifr").contents();
+		$c.contents().find("head").append('<link type="text/css" rel="stylesheet" href="/css/editor/editor-writting-mode.css" id="writtingMode">');
+	}, 0);
+		
+	$("#noteItemListWrap, #notesAndSort").fadeOut();
+	$("#noteList").hover(function() {
+		$("#noteItemListWrap, #notesAndSort").fadeIn();
+	}, function() {
+		$("#noteItemListWrap, #notesAndSort").fadeOut();
+	});
+	
+//	$("body").fadeIn();
+}
+
+editorMode.prototype.getWritingCss = function() {
+	if(this.isWritingMode) {
+		return ["css/editor/editor-writting-mode.css"];
+	}
+	return [];
+}
\ No newline at end of file