marceltt · October 10, 2015 16:38
diff --git a/modern-ui-admin.css b/modern-ui-admin.css
 @import url('//fonts.googleapis.com/css?family=Open+Sans:300,400,700,400italic,700italic');

 /*
 Plugin Name: Modern UI Admin CSS for GetSimple
 Description: CSS used with the Custom Admin CSS plugin for GetSimple
             to make the admin section nicer to look at.
 Version: 1.2.6
 Author: Marcel
 Aurhor URI: turi.co
 */

 /*-----------------------------------------------------------------------------
  1/3. Change the three following colors using same value to re-theme
 -----------------------------------------------------------------------------*/
 h3.floated, #index h3, #resetpassword h3,
 .wrapper a:link, .wrapper a:visited, #footer .footer-left a:hover {
  color: #354D57;
 }
 .header, .edit-nav a:link, .edit-nav a:visited, input.submit,
 input.submit:focus, input.submit:hover, .uploadifyProgressBar,
 body#index, body#resetpassword {
  background-color: #354D57;
 }
 input.text:focus, select.text:focus, textarea.text:focus {
  border-color: #354D57;
 }

 /*------------------------------------------------------------------------------
  2/3. Toggle these two floats if you want to swap the side bar position
 ------------------------------------------------------------------------------*/
 #sidebar { float: right; }
 #maincontent, .updated, .error, .notify { float: left; }


 /*------------------------------------------------------------------------------
  3/3. Finally, for custom admin CSS to work on the login page,
  add the following line to "plugins/custom-admin-css.php" after line 25:

    add_action('index-login', 'gscacss_showcss');

  All done, enjoy!
 ------------------------------------------------------------------------------*/

 /* General Elements: */
 * { text-shadow:none !important; }
 html { height:100%; overflow:auto; }
 body { color:#222; background:#f8f8f8; font:400 13px/1.4 'open sans', 'segoe ui', sans-serif; }
 h1, h2, h3, h3.floated { color:#999; font:300 32px/1.2 'open sans light', 'open sans', 'segoe ui light', sans-serif; }
 h3 em { font-style:normal; border-bottom:1px dotted #ccc; }
 h5, div.h5 { background:#f8f8f8; border:1px solid #d4d4d4; }
 li { margin:0 0 .25em; }
 pre, code { color:green; }
 a, input.submit { -o-transition:.2s; -moz-transition:.2s; -webkit-transition:.2s; transition:.2s; }

 /* Form Elements: */
 form label { color:#666; font:400 12px/1.2 'open sans', 'segoe ui', sans-serif; }
 form input.text, form select.text, form textarea { font:400 13px/1.2 'open sans', 'segoe ui', sans-serif; }
 form input.title { font-size:18px; }
 input.submit, input.submit:focus,
 input.submit:hover, input.submit:active { color:#fff !important; border:0; height:30px; min-width:6em; outline:0; border-radius:0; box-shadow:none; padding:3px 12px; background-image:none; font:400 14px/1.2 'open sans', 'segoe ui', sans-serif; }
 input.submit:focus, input.submit:hover { cursor:default; opacity:.9; }
 input.submit:active { opacity:1; background:#212121 !important; }

 .wrapper { position:relative; }
 .wrapper p { margin:0 0 1em; line-height:inherit; }
 .wrapper table { width:100%; font-size:12px; }
 .wrapper table th { color:#888; font-weight:400 !important; }
 .wrapper table td span.OKmsg { color:#090; }
 .wrapper a:link, .wrapper a:visited { font-weight:400; }
 .wrapper a:hover, .wrapper a:active { color:#212121; text-decoration:none; }

 .header { margin:0; border-top:0; filter:none; background-image:none; }
 .header .wrapper { height:60px; }
 .header h1 { top:12px; color:#fff; width:190px; font:400 20px/1.4 'open sans light', 'open sans', 'segoe ui light', sans-serif; }
 .header h1 a { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
 .header h1 a:link, .header h1 a:visited { color:#fff; display: block; }
 .header h1 a:active { top:1px; position:relative; }
 .header h1 a:after { display: block; color:rgba(255,255,255,.5); content: "Content Management System"; font:400 11px/1.4 'open sans', 'segoe ui', sans-serif; }
 .header h1:hover a:after { content: "Visit site \2192"; }

 .wrapper .nav { right:0; left:200px; width:auto; padding-top:30px; font-size:16px; }
 .wrapper .nav li { margin:0; }
 .wrapper .nav li a { padding:5px 15px; border-radius:0; }
 .wrapper .nav li a:link, .wrapper .nav li a:visited { background:transparent; color:rgba(255,255,255,.75); }
 .wrapper .nav li a:hover, .wrapper .nav li a:focus, .wrapper .nav li a:active { color:#fff; background:rgba(0,0,0,.15); }
 .wrapper .nav li.rightnav { margin:0 1px 0 0; }
 .wrapper .nav .rightnav a { bottom:-9px; position:relative; text-transform:uppercase; }
 .wrapper .nav .rightnav a:link, .wrapper .nav .rightnav a:visited { border-radius:0 !important; background:transparent; }
 .wrapper .nav .rightnav a:hover, .wrapper .nav .rightnav a:focus { background:rgba(0,0,0,.2); }
 .nav li .info,
 .nav li .warning { border:0; width:14px; height:14px; cursor:default; overflow:hidden; background:#fc3; border-radius:100%; margin:1.75em 0 0 -1.25em; }
 .wrapper #pill { z-index:20; }
 .wrapper #pill li a:link, .wrapper #pill li a:visited { color:#fff; background:rgba(0,0,0,.2); }
 .wrapper #pill li a:hover, .wrapper #pill li a:focus, .wrapper #pill li a:active { background:rgba(0,0,0,.5); }
 .wrapper #pill li.leftnav a, .wrapper .nav li.rightnav a.first { border-left-color:transparent; }
 .wrapper #pill li.leftnav a:hover { background:#c33; }
 /* The way the current tab in the primary nav is selected is pretty ridiculous. Oh well... */
 #edit .wrapper .nav li a.pages, #pages .wrapper .nav li a.pages, #menu-manager .wrapper .nav li a.pages, #plugins .wrapper .nav li a.plugins,
 #settings .wrapper .nav li a.settings, #components .wrapper .nav li a.theme, #theme .wrapper .nav li a.theme, #sitemap .wrapper .nav li a.theme,
 #theme-edit .wrapper .nav li a.theme, #navigation .wrapper .nav li a.theme, #upload .wrapper .nav li a.files, #image .wrapper .nav li a.files,
 #backups .wrapper .nav li a.backups, #support .wrapper .nav li a.support, #log .wrapper .nav li a.support, #health-check .wrapper .nav li a.support,
 #backup-edit .wrapper .nav li a.backups, #archive .wrapper .nav li a.backups, #load .wrapper .pages li a.pages, #load .wrapper .plugins li a.plugins,
 #load .wrapper .settings li a.settings, #load .wrapper .theme li a.theme, #load .wrapper .files li a.files, #load .wrapper .backups li a.backups,
 #load .wrapper .support li a.support, #load .wrapper .nav li a.current, #loadtab .wrapper .nav li a.current { color:#222; box-shadow:none; background:#fff; font-weight:400 !important; }

 /* I18N Gallery: Clear the styles set for the following selector in "plugins/i18n_gallery/header.php" */
 #loadtab .wrapper .nav li a.i18n_gallery_selected { color:#222; background:#fff; -moz-box-shadow:none; font-weight:400 !important; }

 #maincontent { width:760px; }
 #maincontent .main, #themecontent { box-shadow:none; min-height:20em; position:relative; padding:20px 30px; margin:-1px 0 0 -1px; border:1px solid #d4d4d4; border-top:0; }
 #maincontent .main pre { color:green; margin:1em 0; padding:0; }

 .edit-nav a { font-size:10px !important; border-radius:0; }
 .edit-nav a:link, .edit-nav a:visited { color:#fff !important; padding:.35em .65em; line-height:1 !important; }
 .edit-nav a:hover, #sidebar .edit-nav a:hover { opacity:.8; }
 .edit-nav a.current, .edit-nav a:active { opacity:1; background-color:#212121 !important; }
 .edit-nav em { font-style:normal; border-bottom:1px dotted #999; }

 #filter-search { text-align:center; }
 .updated, .error, .notify { width:759px; padding:0; text-align:center; background:#fff; margin:-1px 0 1px; border:1px solid #d4d4d4; border-top:0; border-bottom:0; }
 .updated p, .error p, .notify p { padding:.5em; margin:10px 30px 0; background:#ffe; border:1px solid #e6db55; }
 .error p { color:#900; border-color:#c00; background:#f9dfdd; }
 .notify_ok p { color: #090; border-color: #0c0; background: #f0ffed; }
 .updated { color:#222; }
 .wrapper table.highlight tr:hover { background-color:#ffe !important; }

 #sidebar { width:200px; margin:-1px 0 0; padding:15px 0; }
 #sidebar .snav { font-size:13px; }
 #sidebar .snav li { margin:0; }
 #sidebar .snav li a { padding:.5em 1em; border-radius:0; font-weight:400; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
 #sidebar .snav li a:link, #sidebar .snav li a:visited { margin:0; color:#444; background:none; -webkit-transition:background-color .2s; transition:background-color .2s; }
 #sidebar .snav li a:hover, #sidebar .snav li a:focus { margin:0; background:#e7e7e7; }
 #sidebar .snav li a.current, #sidebar .snav li a.current:hover { color:#222; border-radius:0; padding-left:15px; background:#d4d4d4 !important; }

 #sidebar #js_submit_line { margin:0; text-align:center; padding:0 0 10px; }
 #pagechangednotify, #autosavenotify { padding:1em 0; color:#666; font-size:11px; text-align:center; }
 #pagechangednotify { color:#c33; }

 #sidebar .snav li.upload { border-radius:0; margin-left:0; background:none; }
 #uploadify { height:30px !important; }
 .uploadifyButton { color:#111; border-radius:0; font-weight:400; font-size:13px; background:none; }
 .uploadify:hover .uploadifyButton { color:#111; background:#e7e7e7; }
 .uploadifyQueue { background:#444; }
 .uploadifyQueueItem { width:170px; }
 .uploadifyError { color:#c33 !important; }
 .uploadifyError .uploadifyProgressBar { background-color:#c33 !important; }
 #sb_filesize { padding:0 15px; }

 /* I18N Custom Fields: Tidy checkboxes, align them inline left */
 #metadata_window input[type=checkbox] { width:auto; float:left; top:.25em; position:relative; margin-right:.5em !important; }

 #footer { top:-1px; clear:both; color:#f6f6f6; position:relative; margin:0; border-top:1px solid #d4d4d4; }
 #footer p { margin:0; }
 #footer .footer-left { opacity:.5; width:760px; float:right; text-align:center; }
 #footer a {  text-decoration:none; }
 #footer a:link, #footer a:visited { color:#999; }
 #footer .gslogo, #footer a[rel=facybox_s] { display:none; }
 #footer .footer-left p:last-child { top:10px; left:15px; color:#888; width:13.5em; height:1.4em; overflow:hidden; text-align:left; position:absolute; }
 #footer .footer-left, .tree-tgl { -webkit-transition:opacity .5s ease-in .5s; transition:opacity .5s ease-in .5s; }
 #footer:hover .footer-left, .tree-tgl:hover { opacity:1; -webkit-transition:opacity .5s ease-out .25s; transition:opacity .5s ease-out .25s; }

 /* Login/Password Reset pages */
 #index *, #resetpassword * { box-sizing:border-box; }
 #index h3, #resetpassword h3 { text-align:center; font:300 24px/1.2 'segoe ui bold', 'open sans', sans-serif; }
 #index h3:after, #resetpassword h3:after { display: block; color:rgba(0,0,0,.4); margin-top: .5em; content: "Content Management System"; font:400 12px/1.4 'segoe ui', 'open sans', sans-serif; }
 #index .wrapper a:link, #index .wrapper a:visited,
 #resetpassword .wrapper a:link, #resetpassword .wrapper a:visited { color:#888; }
 #index form input.text, #resetpassword form input.text { width:100%; }
 #index .wrapper, #resetpassword .wrapper { width:auto; }
 #index .error, #resetpassword .updated { border:0; width:402px; float:none; background:none; }
 #index #maincontent .main, #resetpassword #maincontent .main { border:0; width:320px; text-align:center; border-radius:0; background:#f5f5f5 none; box-shadow:rgba(0, 0, 0, 0.2) 0 5px 10px 2px; }
 #index #maincontent form b, #resetpassword form b { color:#888; float:left; font-weight:400; }
 #index #footer, #resetpassword #footer { display:none; }
 /* A little excessive, oh well  */
 @-webkit-keyframes fadeInDown { 0%{opacity:0} 50%{opacity:0;-webkit-transform:translateY(-20px)} 100%{opacity:1;-webkit-transform:translateY(0)} }
 @keyframes fadeInDown { 0%{opacity:0} 50%{opacity:0;transform:translateY(-20px)} 100%{opacity:1;transform:translateY(0)} }
 #index #maincontent .main, #resetpassword #maincontent .main { -webkit-animation:fadeInDown 1s ease-out; animation:fadeInDown 1s ease-out; }

 /* Monokai styles for CodeMirror */
 #maincontent .CodeMirror pre { color:#fff; margin:0; }
 #maincontent .cm-s-default .CodeMirror-gutter-text pre {color: #75715e;}
 .cm-s-default {background: #272822; color: #f8f8f2;}
 .cm-s-default div.CodeMirror-selected {background: #49483E !important;}
 .cm-s-default .CodeMirror-gutter {background: #272822; border-right: 0px;}
 .cm-s-default .CodeMirror-cursor {border-left: 1px solid #f8f8f0 !important;}
 .cm-s-default span.cm-keyword {color: #f92672;}
 .cm-s-default span.cm-atom {color: #ae81ff;}
 .cm-s-default span.cm-number {color: #ae81ff;}
 .cm-s-default span.cm-def {color: #fd971f;}
 .cm-s-default span.cm-variable {color: #a6e22e;}
 .cm-s-default span.cm-variable-2 {color: #9effff;}
 .cm-s-default span.cm-property, .cm-s-default span.cm-attribute {color: #a6e22e;}
 .cm-s-default span.cm-operator {color: #fff;}
 .cm-s-default span.cm-comment {color: #8d8d81;}
 .cm-s-default span.cm-string {color: #e6db74;}
 .cm-s-default span.cm-string-2 {color: #fff;}
 .cm-s-default span.cm-meta {color: #fff;}
 .cm-s-default span.cm-error {background: #f92672; color: #f8f8f0;}
 .cm-s-default span.cm-qualifier {color: #fff;}
 .cm-s-default span.cm-builtin {color: #fff;}
 .cm-s-default span.cm-bracket {color: #f8f8f2;}
 .cm-s-default span.cm-tag {color: #f92672;}
 .cm-s-default span.cm-attribute {color: #fff;}
 .cm-s-default span.cm-link {color: #ae81ff;}
 .cm-s-default .CodeMirror-matchingbracket { color: #6c6 !important; }

 /* Custom Admin CSS page tweaks  */
 tr.custom-css { display:none; }
 textarea#custom_css { width:98%; padding:1%; outline:0; color:#f8f8f2; background:#272822; white-space:nowrap; font:13px/1.4 consolas, monospace !important; }
 form[action*="custom-admin-css"]:before { color:#c33; display:block; margin:0 0 1em; content:"This form sometimes has issues with encoding which breaks the CSS so I usually just edit the file directly, located at '/data/uploads/custom-css/custom-style.css'."; }

 /* Custom stuff for myself
   For I18N Navigation, requires wrapping the 3 links that appear above the page list in <div class="tree-tgl">...</div>.
   Can be found in /plugins/i18n_base/pages.php starting near line 130.
 */
 .tree-tgl { opacity:.25; margin:1em 0; font-size:11px; text-align:center; white-space:nowrap; }
 .tree-tgl a.cancel { color:#999 !important; padding:.25em .75em; text-decoration:none; }
 .tree-tgl a.cancel:hover { color:#000 !important; background:none !important; }

 /* WIP: Elastic layout
 .wrapper { width:99%; min-width:960px; }
 .wrapper .nav { width:99%; }
 .wrapper .nav li:first
	@import url('//fonts.googleapis.com/css?family=Open+Sans:300,400,700,400italic,700italic');

	/*
	Plugin Name: Modern UI Admin CSS for GetSimple
	Description: CSS used with the Custom Admin CSS plugin for GetSimple
	to make the admin section nicer to look at.
	Version: 1.2.6
	Author: Marcel
	Aurhor URI: turi.co
	*/

	/*-----------------------------------------------------------------------------
	1/3. Change the three following colors using same value to re-theme
	-----------------------------------------------------------------------------*/
	h3.floated, #index h3, #resetpassword h3,
	.wrapper a:link, .wrapper a:visited, #footer .footer-left a:hover {
	color: #354D57;
	}
	.header, .edit-nav a:link, .edit-nav a:visited, input.submit,
	input.submit:focus, input.submit:hover, .uploadifyProgressBar,
	body#index, body#resetpassword {
	background-color: #354D57;
	}
	input.text:focus, select.text:focus, textarea.text:focus {
	border-color: #354D57;
	}

	/*------------------------------------------------------------------------------
	2/3. Toggle these two floats if you want to swap the side bar position
	------------------------------------------------------------------------------*/
	#sidebar { float: right; }
	#maincontent, .updated, .error, .notify { float: left; }


	/*------------------------------------------------------------------------------
	3/3. Finally, for custom admin CSS to work on the login page,
	add the following line to "plugins/custom-admin-css.php" after line 25:

	add_action('index-login', 'gscacss_showcss');

	All done, enjoy!
	------------------------------------------------------------------------------*/

	/* General Elements: */
	* { text-shadow:none !important; }
	html { height:100%; overflow:auto; }
	body { color:#222; background:#f8f8f8; font:400 13px/1.4 'open sans', 'segoe ui', sans-serif; }
	h1, h2, h3, h3.floated { color:#999; font:300 32px/1.2 'open sans light', 'open sans', 'segoe ui light', sans-serif; }
	h3 em { font-style:normal; border-bottom:1px dotted #ccc; }
	h5, div.h5 { background:#f8f8f8; border:1px solid #d4d4d4; }
	li { margin:0 0 .25em; }
	pre, code { color:green; }
	a, input.submit { -o-transition:.2s; -moz-transition:.2s; -webkit-transition:.2s; transition:.2s; }

	/* Form Elements: */
	form label { color:#666; font:400 12px/1.2 'open sans', 'segoe ui', sans-serif; }
	form input.text, form select.text, form textarea { font:400 13px/1.2 'open sans', 'segoe ui', sans-serif; }
	form input.title { font-size:18px; }
	input.submit, input.submit:focus,
	input.submit:hover, input.submit:active { color:#fff !important; border:0; height:30px; min-width:6em; outline:0; border-radius:0; box-shadow:none; padding:3px 12px; background-image:none; font:400 14px/1.2 'open sans', 'segoe ui', sans-serif; }
	input.submit:focus, input.submit:hover { cursor:default; opacity:.9; }
	input.submit:active { opacity:1; background:#212121 !important; }

	.wrapper { position:relative; }
	.wrapper p { margin:0 0 1em; line-height:inherit; }
	.wrapper table { width:100%; font-size:12px; }
	.wrapper table th { color:#888; font-weight:400 !important; }
	.wrapper table td span.OKmsg { color:#090; }
	.wrapper a:link, .wrapper a:visited { font-weight:400; }
	.wrapper a:hover, .wrapper a:active { color:#212121; text-decoration:none; }

	.header { margin:0; border-top:0; filter:none; background-image:none; }
	.header .wrapper { height:60px; }
	.header h1 { top:12px; color:#fff; width:190px; font:400 20px/1.4 'open sans light', 'open sans', 'segoe ui light', sans-serif; }
	.header h1 a { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
	.header h1 a:link, .header h1 a:visited { color:#fff; display: block; }
	.header h1 a:active { top:1px; position:relative; }
	.header h1 a:after { display: block; color:rgba(255,255,255,.5); content: "Content Management System"; font:400 11px/1.4 'open sans', 'segoe ui', sans-serif; }
	.header h1:hover a:after { content: "Visit site \2192"; }

	.wrapper .nav { right:0; left:200px; width:auto; padding-top:30px; font-size:16px; }
	.wrapper .nav li { margin:0; }
	.wrapper .nav li a { padding:5px 15px; border-radius:0; }
	.wrapper .nav li a:link, .wrapper .nav li a:visited { background:transparent; color:rgba(255,255,255,.75); }
	.wrapper .nav li a:hover, .wrapper .nav li a:focus, .wrapper .nav li a:active { color:#fff; background:rgba(0,0,0,.15); }
	.wrapper .nav li.rightnav { margin:0 1px 0 0; }
	.wrapper .nav .rightnav a { bottom:-9px; position:relative; text-transform:uppercase; }
	.wrapper .nav .rightnav a:link, .wrapper .nav .rightnav a:visited { border-radius:0 !important; background:transparent; }
	.wrapper .nav .rightnav a:hover, .wrapper .nav .rightnav a:focus { background:rgba(0,0,0,.2); }
	.nav li .info,
	.nav li .warning { border:0; width:14px; height:14px; cursor:default; overflow:hidden; background:#fc3; border-radius:100%; margin:1.75em 0 0 -1.25em; }
	.wrapper #pill { z-index:20; }
	.wrapper #pill li a:link, .wrapper #pill li a:visited { color:#fff; background:rgba(0,0,0,.2); }
	.wrapper #pill li a:hover, .wrapper #pill li a:focus, .wrapper #pill li a:active { background:rgba(0,0,0,.5); }
	.wrapper #pill li.leftnav a, .wrapper .nav li.rightnav a.first { border-left-color:transparent; }
	.wrapper #pill li.leftnav a:hover { background:#c33; }
	/* The way the current tab in the primary nav is selected is pretty ridiculous. Oh well... */
	#edit .wrapper .nav li a.pages, #pages .wrapper .nav li a.pages, #menu-manager .wrapper .nav li a.pages, #plugins .wrapper .nav li a.plugins,
	#settings .wrapper .nav li a.settings, #components .wrapper .nav li a.theme, #theme .wrapper .nav li a.theme, #sitemap .wrapper .nav li a.theme,
	#theme-edit .wrapper .nav li a.theme, #navigation .wrapper .nav li a.theme, #upload .wrapper .nav li a.files, #image .wrapper .nav li a.files,
	#backups .wrapper .nav li a.backups, #support .wrapper .nav li a.support, #log .wrapper .nav li a.support, #health-check .wrapper .nav li a.support,
	#backup-edit .wrapper .nav li a.backups, #archive .wrapper .nav li a.backups, #load .wrapper .pages li a.pages, #load .wrapper .plugins li a.plugins,
	#load .wrapper .settings li a.settings, #load .wrapper .theme li a.theme, #load .wrapper .files li a.files, #load .wrapper .backups li a.backups,
	#load .wrapper .support li a.support, #load .wrapper .nav li a.current, #loadtab .wrapper .nav li a.current { color:#222; box-shadow:none; background:#fff; font-weight:400 !important; }

	/* I18N Gallery: Clear the styles set for the following selector in "plugins/i18n_gallery/header.php" */
	#loadtab .wrapper .nav li a.i18n_gallery_selected { color:#222; background:#fff; -moz-box-shadow:none; font-weight:400 !important; }

	#maincontent { width:760px; }
	#maincontent .main, #themecontent { box-shadow:none; min-height:20em; position:relative; padding:20px 30px; margin:-1px 0 0 -1px; border:1px solid #d4d4d4; border-top:0; }
	#maincontent .main pre { color:green; margin:1em 0; padding:0; }

	.edit-nav a { font-size:10px !important; border-radius:0; }
	.edit-nav a:link, .edit-nav a:visited { color:#fff !important; padding:.35em .65em; line-height:1 !important; }
	.edit-nav a:hover, #sidebar .edit-nav a:hover { opacity:.8; }
	.edit-nav a.current, .edit-nav a:active { opacity:1; background-color:#212121 !important; }
	.edit-nav em { font-style:normal; border-bottom:1px dotted #999; }

	#filter-search { text-align:center; }
	.updated, .error, .notify { width:759px; padding:0; text-align:center; background:#fff; margin:-1px 0 1px; border:1px solid #d4d4d4; border-top:0; border-bottom:0; }
	.updated p, .error p, .notify p { padding:.5em; margin:10px 30px 0; background:#ffe; border:1px solid #e6db55; }
	.error p { color:#900; border-color:#c00; background:#f9dfdd; }
	.notify_ok p { color: #090; border-color: #0c0; background: #f0ffed; }
	.updated { color:#222; }
	.wrapper table.highlight tr:hover { background-color:#ffe !important; }

	#sidebar { width:200px; margin:-1px 0 0; padding:15px 0; }
	#sidebar .snav { font-size:13px; }
	#sidebar .snav li { margin:0; }
	#sidebar .snav li a { padding:.5em 1em; border-radius:0; font-weight:400; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
	#sidebar .snav li a:link, #sidebar .snav li a:visited { margin:0; color:#444; background:none; -webkit-transition:background-color .2s; transition:background-color .2s; }
	#sidebar .snav li a:hover, #sidebar .snav li a:focus { margin:0; background:#e7e7e7; }
	#sidebar .snav li a.current, #sidebar .snav li a.current:hover { color:#222; border-radius:0; padding-left:15px; background:#d4d4d4 !important; }

	#sidebar #js_submit_line { margin:0; text-align:center; padding:0 0 10px; }
	#pagechangednotify, #autosavenotify { padding:1em 0; color:#666; font-size:11px; text-align:center; }
	#pagechangednotify { color:#c33; }

	#sidebar .snav li.upload { border-radius:0; margin-left:0; background:none; }
	#uploadify { height:30px !important; }
	.uploadifyButton { color:#111; border-radius:0; font-weight:400; font-size:13px; background:none; }
	.uploadify:hover .uploadifyButton { color:#111; background:#e7e7e7; }
	.uploadifyQueue { background:#444; }
	.uploadifyQueueItem { width:170px; }
	.uploadifyError { color:#c33 !important; }
	.uploadifyError .uploadifyProgressBar { background-color:#c33 !important; }
	#sb_filesize { padding:0 15px; }

	/* I18N Custom Fields: Tidy checkboxes, align them inline left */
	#metadata_window input[type=checkbox] { width:auto; float:left; top:.25em; position:relative; margin-right:.5em !important; }

	#footer { top:-1px; clear:both; color:#f6f6f6; position:relative; margin:0; border-top:1px solid #d4d4d4; }
	#footer p { margin:0; }
	#footer .footer-left { opacity:.5; width:760px; float:right; text-align:center; }
	#footer a { text-decoration:none; }
	#footer a:link, #footer a:visited { color:#999; }
	#footer .gslogo, #footer a[rel=facybox_s] { display:none; }
	#footer .footer-left p:last-child { top:10px; left:15px; color:#888; width:13.5em; height:1.4em; overflow:hidden; text-align:left; position:absolute; }
	#footer .footer-left, .tree-tgl { -webkit-transition:opacity .5s ease-in .5s; transition:opacity .5s ease-in .5s; }
	#footer:hover .footer-left, .tree-tgl:hover { opacity:1; -webkit-transition:opacity .5s ease-out .25s; transition:opacity .5s ease-out .25s; }

	/* Login/Password Reset pages */
	#index , #resetpassword { box-sizing:border-box; }
	#index h3, #resetpassword h3 { text-align:center; font:300 24px/1.2 'segoe ui bold', 'open sans', sans-serif; }
	#index h3:after, #resetpassword h3:after { display: block; color:rgba(0,0,0,.4); margin-top: .5em; content: "Content Management System"; font:400 12px/1.4 'segoe ui', 'open sans', sans-serif; }
	#index .wrapper a:link, #index .wrapper a:visited,
	#resetpassword .wrapper a:link, #resetpassword .wrapper a:visited { color:#888; }
	#index form input.text, #resetpassword form input.text { width:100%; }
	#index .wrapper, #resetpassword .wrapper { width:auto; }
	#index .error, #resetpassword .updated { border:0; width:402px; float:none; background:none; }
	#index #maincontent .main, #resetpassword #maincontent .main { border:0; width:320px; text-align:center; border-radius:0; background:#f5f5f5 none; box-shadow:rgba(0, 0, 0, 0.2) 0 5px 10px 2px; }
	#index #maincontent form b, #resetpassword form b { color:#888; float:left; font-weight:400; }
	#index #footer, #resetpassword #footer { display:none; }
	/* A little excessive, oh well */
	@-webkit-keyframes fadeInDown { 0%{opacity:0} 50%{opacity:0;-webkit-transform:translateY(-20px)} 100%{opacity:1;-webkit-transform:translateY(0)} }
	@keyframes fadeInDown { 0%{opacity:0} 50%{opacity:0;transform:translateY(-20px)} 100%{opacity:1;transform:translateY(0)} }
	#index #maincontent .main, #resetpassword #maincontent .main { -webkit-animation:fadeInDown 1s ease-out; animation:fadeInDown 1s ease-out; }

	/* Monokai styles for CodeMirror */
	#maincontent .CodeMirror pre { color:#fff; margin:0; }
	#maincontent .cm-s-default .CodeMirror-gutter-text pre {color: #75715e;}
	.cm-s-default {background: #272822; color: #f8f8f2;}
	.cm-s-default div.CodeMirror-selected {background: #49483E !important;}
	.cm-s-default .CodeMirror-gutter {background: #272822; border-right: 0px;}
	.cm-s-default .CodeMirror-cursor {border-left: 1px solid #f8f8f0 !important;}
	.cm-s-default span.cm-keyword {color: #f92672;}
	.cm-s-default span.cm-atom {color: #ae81ff;}
	.cm-s-default span.cm-number {color: #ae81ff;}
	.cm-s-default span.cm-def {color: #fd971f;}
	.cm-s-default span.cm-variable {color: #a6e22e;}
	.cm-s-default span.cm-variable-2 {color: #9effff;}
	.cm-s-default span.cm-property, .cm-s-default span.cm-attribute {color: #a6e22e;}
	.cm-s-default span.cm-operator {color: #fff;}
	.cm-s-default span.cm-comment {color: #8d8d81;}
	.cm-s-default span.cm-string {color: #e6db74;}
	.cm-s-default span.cm-string-2 {color: #fff;}
	.cm-s-default span.cm-meta {color: #fff;}
	.cm-s-default span.cm-error {background: #f92672; color: #f8f8f0;}
	.cm-s-default span.cm-qualifier {color: #fff;}
	.cm-s-default span.cm-builtin {color: #fff;}
	.cm-s-default span.cm-bracket {color: #f8f8f2;}
	.cm-s-default span.cm-tag {color: #f92672;}
	.cm-s-default span.cm-attribute {color: #fff;}
	.cm-s-default span.cm-link {color: #ae81ff;}
	.cm-s-default .CodeMirror-matchingbracket { color: #6c6 !important; }

	/* Custom Admin CSS page tweaks */
	tr.custom-css { display:none; }
	textarea#custom_css { width:98%; padding:1%; outline:0; color:#f8f8f2; background:#272822; white-space:nowrap; font:13px/1.4 consolas, monospace !important; }
	form[action*="custom-admin-css"]:before { color:#c33; display:block; margin:0 0 1em; content:"This form sometimes has issues with encoding which breaks the CSS so I usually just edit the file directly, located at '/data/uploads/custom-css/custom-style.css'."; }

	/* Custom stuff for myself
	For I18N Navigation, requires wrapping the 3 links that appear above the page list in <div class="tree-tgl">...</div>.
	Can be found in /plugins/i18n_base/pages.php starting near line 130.
	*/
	.tree-tgl { opacity:.25; margin:1em 0; font-size:11px; text-align:center; white-space:nowrap; }
	.tree-tgl a.cancel { color:#999 !important; padding:.25em .75em; text-decoration:none; }
	.tree-tgl a.cancel:hover { color:#000 !important; background:none !important; }

	/* WIP: Elastic layout
	.wrapper { width:99%; min-width:960px; }
	.wrapper .nav { width:99%; }
	.wrapper .nav li:first