Primera adaptación de mi habitual tema personal a Redmine

app/views/layouts/base.html.erb

@@ -23,7 +23,6 @@
 
 <div class="flyout-menu js-flyout-menu">
 
-
     <% if User.current.logged? || !Setting.login_required? %>
         <div class="flyout-menu__search">
             <%= form_tag({:controller => 'search', :action => 'index', :id => @project}, :method => :get ) do %>
@@ -61,17 +60,27 @@
 <div id="wrapper2">
 <div id="wrapper3">
 <div id="top-menu">
+    <div id="wrapper-top-menu">
+    <ul class="social-menu">
+        <li class="social-link-blog"><a href="https://manuel.cillero.es" title="Blog" target="_blank" class="icon-blog"><span>Blog</span></a></li>
+        <li class="social-link-twitter"><a href="https://twitter.com/manuelcillero" title="Twitter" target="_blank" class="icon-twitter"><span>Twitter</span></a></li>
+        <li class="social-link-facebook"><a href="https://facebook.com/manuelcillero" title="Facebook" target="_blank" class="icon-facebook"><span>Facebook</span></a></li>
+        <li class="social-link-linkedin"><a href="https://es.linkedin.com/in/manuelcillero" title="Linkedin" target="_blank" class="icon-linkedin"><span>Linkedin</span></a></li>
+        <li class="social-link-github"><a href="https://github.com/manuelcillero" title="Github" target="_blank" class="icon-github"><span>Github</span></a></li>
+        <li class="social-link-mail"><a href="https://manuel.cillero.es/contact" title="Mail" target="_blank" class="icon-mail"><span>Mail</span></a></li>
+    </ul>
     <div id="account">
         <%= render_menu :account_menu -%>
     </div>
     <%= content_tag('div', "#{l(:label_logged_as)} #{link_to_user(User.current, :format => :username)}".html_safe, :id => 'loggedas') if User.current.logged? %>
     <%= render_menu :top_menu if User.current.logged? || !Setting.login_required? -%>
     </div>
+</div>
 
 <div id="header">
-
     <a href="#" class="mobile-toggle-button js-flyout-menu-toggle-button"></a>
 
+    <div id="wrapper-header">
     <% if User.current.logged? || !Setting.login_required? %>
     <div id="quick-search">
         <%= form_tag({:controller => 'search', :action => 'index', :id => @project}, :method => :get ) do %>
@@ -85,21 +94,24 @@
         <%= render_project_jump_box %>
     </div>
     <% end %>
-
     <h1><%= page_header_title %></h1>
+    </div>
     
     <% if display_main_menu?(@project) %>
     <div id="main-menu" class="tabs">
+        <div id="wrapper-main-menu">
         <%= render_main_menu(@project) %>
         <div class="tabs-buttons" style="display:none;">
             <button class="tab-left" onclick="moveTabLeft(this); return false;"></button>
             <button class="tab-right" onclick="moveTabRight(this); return false;"></button>
         </div>
         </div>
+    </div>
     <% end %>
 </div>
 
 <div id="main" class="<%= sidebar_content? ? '' : 'nosidebar' %>">
+    <div id="wrapper-main">
     <div id="sidebar">
         <%= yield :sidebar %>
         <%= view_layouts_base_sidebar_hook_response %>
@@ -113,17 +125,28 @@
     </div>
     </div>
 </div>
+</div>
 
 <div id="ajax-indicator" style="display:none;"><span><%= l(:label_loading) %></span></div>
 <div id="ajax-modal" style="display:none;"></div>
 
 <div id="footer">
+    <div id="wrapper-footer">
+    <ul class="social-menu">
+        <li class="social-link-blog"><a href="https://manuel.cillero.es" title="Blog" target="_blank" class="icon-blog"><span>Blog</span></a></li>
+        <li class="social-link-twitter"><a href="https://twitter.com/manuelcillero" title="Twitter" target="_blank" class="icon-twitter"><span>Twitter</span></a></li>
+        <li class="social-link-facebook"><a href="https://facebook.com/manuelcillero" title="Facebook" target="_blank" class="icon-facebook"><span>Facebook</span></a></li>
+        <li class="social-link-linkedin"><a href="https://es.linkedin.com/in/manuelcillero" title="Linkedin" target="_blank" class="icon-linkedin"><span>Linkedin</span></a></li>
+        <li class="social-link-github"><a href="https://github.com/manuelcillero" title="Github" target="_blank" class="icon-github"><span>Github</span></a></li>
+        <li class="social-link-mail"><a href="https://manuel.cillero.es/contact" title="Mail" target="_blank" class="icon-mail"><span>Mail</span></a></li>
+    </ul>
     <div class="bgl"><div class="bgr">
-    Powered by <%= link_to Redmine::Info.app_name, Redmine::Info.url %> &copy; 2006-2017 Jean-Philippe Lang
+        <%= Time.current.year %> &copy; SuitePro (powered by <%= link_to Redmine::Info.app_name, Redmine::Info.url %>)
     </div></div>
     </div>
 </div>
 </div>
+</div>
 <%= call_hook :view_layouts_base_body_bottom %>
 </body>
 </html>

public/themes/circlepro/font/fontello.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2018 by original authors @ fontello.com</metadata>
+<defs>
+<font id="fontello" horiz-adv-x="1000" >
+<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="rss" unicode="&#xe800;" d="M0 730q314 0 537-223t223-537l-118 0q0 266-188 453t-454 187l0 120z m0-238q218 0 371-153t153-369l-118 0q0 166-119 285t-287 119l0 118z m114-296q46 0 80-33t34-81q0-46-34-79t-80-33-80 33-34 79q0 48 34 81t80 33z" horiz-adv-x="760" />
+
+<glyph glyph-name="mail" unicode="&#xe801;" d="M30 586q-32 18-28 40 2 14 26 14l846 0q38 0 20-32-8-14-24-22-14-6-192-102t-182-98q-16-10-46-10-28 0-46 10-4 2-182 98t-192 102z m850-100q20 10 20-10l0-368q0-16-17-32t-33-16l-800 0q-16 0-33 16t-17 32l0 368q0 20 20 10l384-200q18-10 46-10t46 10z" horiz-adv-x="900" />
+
+<glyph glyph-name="blog" unicode="&#xe802;" d="M85 749l608 0c57 0 83-26 83-85l0-387c0-55-26-82-83-82l-274 0-303-244 63 244-94 0c-57 0-85 27-85 84l0 385c0 59 28 86 85 85z m75-157l0-83 456 0 0 83-456 0z m456-239l0 82-456 0 0-82 456 0z" horiz-adv-x="776" />
+
+<glyph glyph-name="github" unicode="&#xf09b;" d="M429 779q116 0 215-58t156-156 57-215q0-140-82-252t-211-155q-15-3-22 4t-7 17q0 1 0 43t0 75q0 54-29 79 32 3 57 10t53 22 45 37 30 58 11 84q0 67-44 115 21 51-4 114-16 5-46-6t-51-25l-21-13q-52 15-107 15t-108-15q-8 6-23 15t-47 22-47 7q-25-63-5-114-44-48-44-115 0-47 12-83t29-59 45-37 52-22 57-10q-21-20-27-58-12-5-25-8t-32-3-36 12-31 35q-11 18-27 29t-28 14l-11 1q-12 0-16-2t-3-7 5-8 7-6l4-3q12-6 24-21t18-29l6-13q7-21 24-34t37-17 39-3 31 1l13 3q0-22 0-50t1-30q0-10-8-17t-22-4q-129 43-211 155t-82 252q0 117 58 215t155 156 216 58z m-267-616q2 4-3 7-6 1-8-1-1-4 4-7 5-3 7 1z m18-19q4 3-1 9-6 5-9 2-4-3 1-9 5-6 9-2z m16-25q6 4 0 11-4 7-9 3-5-3 0-10t9-4z m24-23q4 4-2 10-7 7-11 2-5-5 2-11 6-6 11-1z m32-14q1 6-8 9-8 2-10-4t7-9q8-3 11 4z m35-3q0 7-10 6-9 0-9-6 0-7 10-6 9 0 9 6z m32 5q-1 7-10 5-9-1-8-8t10-4 8 7z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="twitter" unicode="&#xf309;" d="M920 636q-36-54-94-98l0-24q0-130-60-250t-186-203-290-83q-160 0-290 84 14-2 46-2 132 0 234 80-62 2-110 38t-66 94q10-4 34-4 26 0 50 6-66 14-108 66t-42 120l0 2q36-20 84-24-84 58-84 158 0 48 26 94 154-188 390-196-6 18-6 42 0 78 55 133t135 55q82 0 136-58 60 12 120 44-20-66-82-104 56 8 108 30z" horiz-adv-x="920" />
+
+<glyph glyph-name="facebook" unicode="&#xf30c;" d="M500 644l-142 0q-14 0-25-15t-11-37l0-102 178 0 0-148-178 0 0-442-170 0 0 442-152 0 0 148 152 0 0 86q0 94 59 159t147 65l142 0 0-156z" horiz-adv-x="500" />
+
+<glyph glyph-name="linkedin" unicode="&#xf318;" d="M204 698q0-40-29-68t-75-28q-44 0-72 28t-28 68q0 42 28 69t74 27 73-27 29-69z m-198-790l0 618 192 0 0-618-192 0z m306 420q0 86-4 198l166 0 10-86 4 0q60 100 190 100 100 0 161-67t61-199l0-366-192 0 0 342q0 134-98 134-70 0-98-72-6-12-6-48l0-356-194 0 0 420z" horiz-adv-x="900" />
+</font>
+</defs>
+</svg>

public/themes/circlepro/stylesheets/application.css

@@ -1,22 +1,7 @@
 @import url(../../../stylesheets/application.css);
+@import url(//fonts.googleapis.com/css?family=Lato:300,400,700);
 
-/* Circle Theme version 2.1.3, Copyright (C) 2011 - 2017 Kirill Bezrukov www.redmineup.com */
+/* CirclePro Theme, based on Circle Theme by Kirill Bezrukov */
-
-/**********************************************************/
-/* LOGO */
-/**********************************************************/
-
-#header > h1 {
-	background: url(../images/logo.png) no-repeat 20px 13px;
-}
-
-@media only screen and (-webkit-min-device-pixel-ratio: 2),
-only screen and (min-device-pixel-ratio: 2) {
-	#header > h1 {
-		background-image: url(../images/logo2x.png);
-		background-size: 38px 40px;
-	}
-}
 
 /**********************************************************/
 /* COMMON */
@@ -24,9 +9,9 @@ only screen and (min-device-pixel-ratio: 2) {
 
 body {
 	color: #3d454c;
-	font-size: 14px;
+	font-size: 16px;
 	line-height: 1.3;
-	font-family: "helvetica neue",helvetica,arial,sans-serif;
+	font-family: Lato,"helvetica neue",helvetica,arial,sans-serif;
 	font-smoothing: antialiased;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
@@ -34,7 +19,7 @@ body {
 }
 
 input, textarea, select {
-	font-family: "helvetica neue",helvetica,arial,sans-serif;
+	font-family: Lato,"helvetica neue",helvetica,arial,sans-serif;
 	font-size: 12px;
 }
 
@@ -42,34 +27,57 @@ a, a:link, a:visited {
 	color: #2996cc;
 }
 
-#main {
+#wrapper-top-menu,
-	background-color: #fafafa;
+#wrapper-header,
-	padding: 0px 20px;
+#wrapper-main-menu,
+#wrapper-main,
+#wrapper-footer {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 1240px;
 }
 
-#main.nosidebar {
+#wrapper3,
+#main {
+	background: #ebeae9 url(../images/bg_main.png) repeat-x 0 bottom;
+}
+#wrapper3 {
+	padding-bottom: 30px;
+}
+#main {
+	background-color: transparent;
+}
+#wrapper-main {
 	background-color: #fff;
 }
 
 div#content {
-	margin-left: -20px;
+	padding: 30px 30px 10px;
-	padding-left: 25px;
+	width: 70%;
-  padding-top: 15px;
+	background-color: #fff;
+	border-right: 0;
+}
+div#content p {
+	word-wrap: break-word;
 }
 
 #footer {
-	margin-bottom: 12px;
+	height: 36px;
-	padding-top: 18px;
+	padding: 0;
-	padding-left: 25px;
+	border: 1px solid #182230;
-	padding-right: 25px;
+	background-color: #182330;
-	border-top: 1px solid #e0e2e3;
+	text-align: left;
-	color: #ced4d9;
+	font-size: 11px;
+	font-weight: bold;
+	color: #fff;
+}
+#footer div.bgl {
+	display: inline-block;
+	margin: 14px 0 0 30px;
 }
-
 #footer a, #footer a:visited {
 	color: #ced4d9;
 }
-
 #footer a:hover {
 	color: #2996cc;
 	text-decoration: none;
@@ -91,8 +99,10 @@ input[type="text"].questions-search.autocomplete {
 }
 
 h2 {
-	font-size: 25px;
+	color: #f30;
-	font-weight: normal;
+	font-size: 46px;
+	font-weight: 600;
+	line-height: 1em;
 	margin-top: 10px;
 }
 
@@ -119,38 +129,101 @@ div.gravatar-with-child > img.gravatar:nth-child(2) {
 	left: 35px;	
 }
 
+/**********************************************************/
+/* FONT ICONS */
+/**********************************************************/
+
+@font-face {
+	font-family: 'fontello';
+	src: url('../font/fontello.eot?47049262');
+	src: url('../font/fontello.eot?47049262#iefix') format('embedded-opentype'),
+		 url('../font/fontello.woff2?47049262') format('woff2'),
+		 url('../font/fontello.woff?47049262') format('woff'),
+		 url('../font/fontello.ttf?47049262') format('truetype'),
+		 url('../font/fontello.svg?47049262#fontello') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+[class^="icon-"]:before, [class*=" icon-"]:before {
+	font-family: "fontello";
+	font-style: normal;
+	font-weight: normal;
+	speak: none;
+
+	display: inline-block;
+	text-decoration: inherit;
+	width: 1em;
+	margin-right: .2em;
+	text-align: center;
+
+	/* For safety - reset parent styles, that can break glyph codes */
+	font-variant: normal;
+	text-transform: none;
+
+	/* fix buttons height, for twitter bootstrap */
+	line-height: 1em;
+
+	/* Animation center compensation - margins should be symmetric */
+	/* remove if not needed */
+	margin-left: .2em;
+
+	/* Font smoothing. That was taken from TWBS */
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.icon-rss:before { content: '\e800'; }
+.icon-mail:before { content: '\e801'; }
+.icon-blog:before { content: '\e802'; }
+.icon-github:before { content: '\f09b'; }
+.icon-twitter:before { content: '\f309'; }
+.icon-facebook:before { content: '\f30c'; }
+.icon-linkedin:before { content: '\f318'; }
+
 /**********************************************************/
 /* HEADER */
 /**********************************************************/
 
 #header {
-	background-color: #29333a;
+	background-color: #003346;
 	min-height: 5em;
 	padding: 0px;
 }
 
-#header > h1 {
+#wrapper-header {
-	font-family: "helvetica neue",helvetica,arial,sans-serif;
+	height: 88px;
-	text-transform: uppercase;
+	background: url(../images/logo.png) no-repeat 30px 0;
-	font-weight: 700;
+	position: relative;
-	font-size: 13px;
+} /*
-	letter-spacing: 1px;
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
-	padding: 25px 10px 25px 70px;
+	#wrapper-header > h1 {
-  margin: 0px;
+		background-image: url(../images/logo2x.png);
+		background-size: 38px 40px;
 	}
+} */
 
-#header > h1 .breadcrumbs {
+#wrapper-header > h1::before {
+	content: "-";
+	margin-right: 12px;
+}
+#wrapper-header > h1 {
+	position: absolute;
+	bottom: 7px;
+	padding: 0 0 0 138px;
+	margin: 0;
+	font-size: 15px;
+}
+#wrapper-header > h1 .breadcrumbs {
 	margin-top: -5px;
 }
 
 #quick-search {
-	margin: 20px 10px;
+	margin: 20px 28px 20px 10px;
 }
-
 #quick-search select {
 	max-width: 300px;
 }
-
 #quick-search .drdn-trigger {
 	padding-top: 4px;
 	font-size: 12px;
@@ -159,22 +232,90 @@ div.gravatar-with-child > img.gravatar:nth-child(2) {
 /**********************************************************/
 /* TOP-MENU */
 /**********************************************************/
+
 #top-menu {
-	background: #000;
+	height: 31px;
-	padding: 7px 20px 2px 25px;
+	line-height: 31px;
+	background: #556372;
+	padding: 0;
  	font-size: 0.9em;
 }
-
+#top-menu ul {
+	margin: 0 30px;
+}
 #top-menu a {
 	margin-right: 15px;
  	font-weight: normal;
- 	color: #9da2a6;
+ 	color: #aaa;
 }
-
 #top-menu a:hover {
 	color: #fff;
 	text-decoration: none;
 }
+#top-menu #loggedas,
+#top-menu #loggedas a,
+#top-menu ul li:last-child a {
+	margin-right: 0;
+}
+
+/**********************************************************/
+/* SOCIAL-MENU */
+/**********************************************************/
+
+ul.social-menu {
+	float: right;
+	margin: 0;
+}
+ul.social-menu > li {
+	list-style-type: none;
+	float: left;
+}
+ul.social-menu > li a {
+	margin: 0 !important;
+	font-size: 20px;
+	display: block;
+	width: 30px;
+	min-height: 30px;
+	line-height: 30px;
+	height: 100%;
+	text-align: center;
+	transition-property: all;
+	transition-duration: 0.3s;
+	transition-timing-function: ease-out;
+	transition-delay: 0s;
+}
+ul.social-menu > li a span {
+	display: none;
+}
+ul.social-menu > li:hover a {
+	color: #fff !important;
+}
+ul.social-menu .social-link-blog:hover a {
+	background-color: #ffa133;
+}
+ul.social-menu .social-link-twitter:hover a {
+	background-color: #46d4fe;
+}
+ul.social-menu .social-link-facebook:hover a {
+	background-color: #37589b;
+}
+ul.social-menu .social-link-linkedin:hover a {
+	background-color: #419cca;
+}
+ul.social-menu .social-link-github:hover a {
+	background-color: #bd2c00;
+}
+ul.social-menu .social-link-mail:hover a {
+	background-color: #9fae37;
+}
+#footer ul.social-menu > li a {
+	color: #8ca7be;
+	border-radius: 300px;
+}
+#footer ul.social-menu {
+	margin: 3px 30px 0 0;
+}
+
 /**********************************************************/
 /* MAIN-MENU */
 /**********************************************************/
@@ -184,34 +325,29 @@ div.gravatar-with-child > img.gravatar:nth-child(2) {
 	width: 100%;
 	background-color: #3d454c;
 	font-weight: 500;
+	font-size: 0.9em;
 	position: relative;
 	height: auto;
 	box-sizing: border-box;
 }
-
 #main-menu ul {
-	padding: 0 15px;
+	padding: 0 15px 0 20px;
 	width: 100%;
 	white-space: nowrap;
 }
-
 #main-menu li {
 	margin: 0px;
-	padding: 13px 0px;
+	padding: 12px 0;
 	float: none;
 	display: inline-block;
 }
-
 #main-menu li > a {
 	color: #9da2a6;
 }
-
-
 #main-menu li a:hover, #main-menu li a.selected, #main-menu li a.selected:hover {
 	background: none;
 	color: #fff;
 }
-
 #main-menu .menu-button {
 	position: absolute;
 	right: 10px;
@@ -224,46 +360,35 @@ div.gravatar-with-child > img.gravatar:nth-child(2) {
 	background: url(../images/menu_button.png) no-repeat;
 	background-size: 16px 16px; /* for retina displays */
 }
-
 #main-menu .menu-button:hover {
 	background: url(../images/menu_button_hover.png) no-repeat;
 	background-size: 16px 16px; /* for retina displays */
 }
-
 /* new object + button */
 #main-menu li a.new-object {
 	background-color: #3d454c;
 }
-
 #main-menu .menu-children {
 	border: 0px;
-  margin-top: 13px;
+	margin-top: 10px;
-  left: 0px;
 }
-
 #main-menu .menu-children,
 #main-menu .menu-children li {
 	padding: 0px;
 }
-
 #main-menu .menu-children li a {
 	padding: 10px 25px;
 }
-
 #main-menu .menu-children li a {
 	background: #3d454c;
 	color: #9da2a6;
 	font-weight: bold;
 }
-
 #main-menu .menu-children li a:hover {
 	color: #fff;
 	background: #3d454c;
 }
-
 /* tab buttons*/
-
-
 #main-menu div.tabs-buttons {
 	position: absolute;
 	right: 0;
@@ -273,7 +398,6 @@ div.gravatar-with-child > img.gravatar:nth-child(2) {
 	bottom: 0;
 	border: 0px;
 }
-
 #main-menu button.tab-left, #main-menu button.tab-right {
 	cursor: pointer;
 	height:100%;
@@ -294,22 +418,18 @@ div.gravatar-with-child > img.gravatar:nth-child(2) {
 #main-menu button.tab-left:focus, #main-menu button.tab-right:focus {
 	outline: 0;
 }
-
 #main-menu button.tab-left {
 	right: 25px;
 }
-
 #main-menu button.tab-left::before {
 	content: "\25C0";
 	background: none;
 }
-
 #main-menu button.tab-right::before {
 	right: 0;
 	content: "\25b6";
 	background: none;
 }
-
 #main-menu button.tab-left.disabled, #main-menu button.tab-right.disabled {
 	background-color: #3d454c;
 	cursor: unset;
@@ -319,18 +439,28 @@ div.gravatar-with-child > img.gravatar:nth-child(2) {
 /**********************************************************/
 /* SIDEBAR */
 /**********************************************************/
+
 #sidebar {
+	padding-right: 30px;
 	line-height: 1.3;
 }
-
 #sidebar h3 {
-	font-size:16px;
+	margin-top: 30px;
-	font-weight: normal;
+	background-color: #556372;
-	margin-top: 20px;
+	color: #eee;
-	margin-bottom: 5px;
+	font-size: 18px;
-	color: #666;
+	line-height: 23px;
+	padding: 5px 5px 5px 23px;
+}
+#sidebar h3:before {
+	content: "//";
+	margin-left: -18px;
+	letter-spacing: -1px;
+	position: absolute;
+}
+#sidebar div {
+	margin-top: 30px;
 }
-
 #sidebar p {
 	margin-top: 5px;
 }
@@ -338,6 +468,7 @@ div.gravatar-with-child > img.gravatar:nth-child(2) {
 /**********************************************************/
 /* FLASH MESSAGES */
 /**********************************************************/
+
 #errorExplanation, div.flash, .nodata, .warning, .conflict {
 	border: 0px;
 	font-weight: bold;
@@ -371,13 +502,11 @@ div.flash.warning, .conflict {
 	border: 0px;
 	padding: 30px;
 }
-
 #login-form input[type=text],
 #login-form input[type=password] {
 	padding: 1px 10px;
 	height: 24px;
 }
-
 #login-form input#login-submit {
 	padding: 0px;
 }
@@ -385,32 +514,29 @@ div.flash.warning, .conflict {
 /**********************************************************/
 /* WIKI */
 /**********************************************************/
+
 .wiki h1, .wiki h2, .wiki h3 {
 	font-weight: normal;
 	color: #000;
 }
-
 .wiki h1 {
 	font-size: 28px;
 	margin-top: 10px;
 }
-
 .wiki h2 {
 	font-size: 20px;
 }
-
 .wiki h3 {
 	font-size: 16px;
 }
-
 .wiki.wiki-page {
 	color: #6A6E71;
 }
 
-
 /**********************************************************/
 /* TAGS */
 /**********************************************************/
+
 span.tag-label-color {
 	border: 0px !important;
 	padding: 4px 8px !important;
@@ -447,6 +573,7 @@ div#content .contacts-tags-edit ul.tagit {
 /**********************************************************/
 /* Context Menu */
 /**********************************************************/
+
 div#content .context-menu-selection {
 	background-color: #2996cc !important;
 }
@@ -469,9 +596,11 @@ div#content #context-menu li:hover {
 div#content #context-menu a.disabled, div#content #context-menu a.disabled:hover {
 	color: #aaa;
 }
+
 /**********************************************************/
 /* TIP */
 /**********************************************************/
+
 div.tooltip:hover span.tip {
 	border: 1px solid #ccc;
 	-webkit-border-radius: 4px;
@@ -484,6 +613,7 @@ div.tooltip:hover span.tip {
 /**********************************************************/
 /* jQuery UI */
 /**********************************************************/
+
 .ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
 	font-family: "SqMarket","helvetica neue",helvetica,arial,sans-serif;
 	font-size: 1em;
@@ -645,6 +775,7 @@ div.modal {
 /**********************************************************/
 /* BUTTONS */
 /**********************************************************/
+
 #ajax-modal p.buttons input,
 .ui-datepicker .ui-datepicker-buttonpane button,
 .details input[type="submit"],
@@ -730,6 +861,16 @@ input[type="submit"].small {
 /**********************************************************/
 /* FORMS COMMON */
 /**********************************************************/
+
+.tabular.settings p {
+	padding-left: 200px;
+	padding-bottom: 8px;
+}
+.tabular.settings label {
+	margin-left: -200px;
+	width: 195px;
+}
+
 input[type="text"],
 input[type="date"],
 input[type="password"],
@@ -790,88 +931,6 @@ select {
 	height: 26px;
 }
 
-/*input[type="radio"]:hover:not(:disabled), input[type="radio"]:focus:not(:disabled),
-input[type="checkbox"]:hover:not(:disabled), input[type="checkbox"]:focus:not(:disabled) {
-    cursor: pointer
-}
-
-input[type="radio"]:active:not(:disabled), input[type="checkbox"]:active:not(:disabled) {
-    -webkit-transform: scale3d(0.9, 0.9, 0.9);
-    -moz-transform: scale3d(0.9, 0.9, 0.9);
-    -ms-transform: scale3d(0.9, 0.9, 0.9);
-    -o-transform: scale3d(0.9, 0.9, 0.9);
-    transform: scale3d(0.9, 0.9, 0.9)
-}
-
-input[type="checkbox"]::before,
-input[type="radio"]::before {
-    width: 10px;
-    height: 10px;
-    content: "";
-    display: none;
-    background: #3ba8de;
-    border: 2px solid #fff;    
-}
-
-input[type="checkbox"]::before {
-border-radius: 2px;    
-}
-
-input[type="radio"]::before {
-   border-radius: 50%; 
-}
-
-input[type="checkbox"]:checked,
-input[type="radio"]:checked {
-    border-color: #3ba8de;
-}
-
-input[type="checkbox"]:checked::before,
-input[type="radio"]:checked::before {
-    display: block
-}
-
-input[type="radio"], input[type="checkbox"] {
-    -webkit-transition: all 150ms linear;
-    -moz-transition: all 150ms linear;
-    -o-transition: all 150ms linear;
-    transition: all 150ms linear;
-    -webkit-transition-property: -webkit-transform, background-color, color, border-color;
-    -moz-transition-property: -moz-transform, background-color, color, border-color;
-    -o-transition-property: -o-transform, background-color, color, border-color;
-    transition-property: transform, background-color, color, border-color;
-    -webkit-appearance: none;
-    margin: 0;
-    background: #fff;
-    border: 1px solid #d8d9da;
-    border-radius: 3px;
-    color: #424242;
-    font-weight: 400;
-    font-size: 16px;
-    outline: 0;
-}
-
-input[type="radio"] {
-    border-radius: 50%;
-    position: relative
-}
-
-
-input[type="radio"], 
-input[type="checkbox"] {
-    width: 16px;
-    height: 16px;
-    margin-right: 2px;
-}
-
-input[type="text"]:disabled, input[type="password"]:disabled,
-input[type="number"]:disabled, input[type="email"]:disabled, 
-select:disabled, textarea:disabled,
-input[type="radio"]:disabled, input[type="checkbox"]:disabled {
-    opacity: 0.5;
-    cursor: default
-}
-*/
 .check_box_group {
 	padding: 3px 6px;
 	border: 1px solid #e0e2e3;
@@ -934,6 +993,7 @@ img.ui-datepicker-trigger {
 /**********************************************************/
 /* FORMS SPECIFIC */
 /**********************************************************/
+
 input#issue_subject,
 input#content_comments {
 	width: 97%;
@@ -1001,6 +1061,7 @@ input#content_comments {
 /**********************************************************/
 /* TABLES */
 /**********************************************************/
+
 table.list tbody td, table.list tbody tr:hover td { border: solid 1px #d7d7d7; }
 table.list thead th {
     border-width: 1px;
@@ -1049,6 +1110,7 @@ tr.odd.priority-lowest td, tr.even.priority-lowest td { border-color: #D2EAFA; }
 /**********************************************************/
 /* OBJECTS */
 /**********************************************************/
+
 div.issue,
 div.person,
 div.contact,
@@ -1064,20 +1126,18 @@ div.details {padding: 20px !important;}
 /**********************************************************/
 /* RESPONSIVE */
 /**********************************************************/
-@media all and (max-width: 899px)
+
-{
+@media all and (max-width: 899px) {
 	body #header {
 		background-color: #3d454c;
 	}
-
+	#wrapper-header {
-  body .flyout-menu {
+		background-image: none;
-    background-color: #29333a;
 	}
 
 	body .flyout-menu__avatar {
 		margin-left: 8px;
 	}
-
 	body .flyout-menu__avatar img.gravatar {
 		width: 32px;
 		height: 32px;
@@ -1089,6 +1149,9 @@ div.details {padding: 20px !important;}
 		margin-top: 3px;
 	}
 
+	body .flyout-menu {
+		background-color: #29333a;
+	}
 	body .flyout-menu a {
 		color: #9da2a6;
 	}
@@ -1102,49 +1165,41 @@ div.details {padding: 20px !important;}
 /* SELECT2 */
 /**********************************************************/
 
-.theme-Circle .select2-container--default .select2-selection--single {
+.theme-Circlepro .select2-container--default .select2-selection--single {
 	background-position: 4px 50%;
 	border: 1px solid #e0e2e3;
 	border-radius: 3px;
 	height: 26px;
 	outline: none;  
 }
-
+.theme-Circlepro .select2-container--default .select2-selection--multiple {
-
-.theme-Circle .select2-container--default .select2-selection--multiple {
 	border: 1px solid #e0e2e3;
 	border-radius: 3px;
 	outline: none;  
 }
-
+.theme-Circlepro .select2-container--default.select2-container--open .select2-selection,
-.theme-Circle .select2-container--default.select2-container--open .select2-selection,
+.theme-Circlepro .select2-container--default .select2-selection:focus,
-.theme-Circle .select2-container--default .select2-selection:focus,
+.theme-Circlepro .select2-container--default.select2-container--focus .select2-selection--single,
-.theme-Circle .select2-container--default.select2-container--focus .select2-selection--single,
+.theme-Circlepro .select2-container--default.select2-container--focus .select2-selection--multiple {
-.theme-Circle .select2-container--default.select2-container--focus .select2-selection--multiple {
 	border-color: #2996cc;	
 }
-
+.theme-Circlepro .select2-container--default .select2-selection--single .select2-selection__rendered {
-.theme-Circle .select2-container--default .select2-selection--single .select2-selection__rendered {
 	padding-left: 24px;  
 	line-height: 25px;
 	font-size: 12px;
 	outline: none;  
 }
-
+.theme-Circlepro .select2-container--default .select2-selection--multiple .select2-selection__rendered {
-.theme-Circle .select2-container--default .select2-selection--multiple .select2-selection__rendered {
 	font-size: 12px;
 }
-
+.theme-Circlepro .select2-container--default .select2-selection--single .select2-selection__arrow {
-.theme-Circle .select2-container--default .select2-selection--single .select2-selection__arrow {
 	height: 25px;
 	outline: none;  
 }
-
+.theme-Circlepro .select2-container--default .select2-selection--single .select2-selection__arrow b {
-.theme-Circle .select2-container--default .select2-selection--single .select2-selection__arrow b {
 	border-color: #afafaf transparent transparent transparent;	
 }
-.theme-Circle .select2-dropdown {
+.theme-Circlepro .select2-dropdown {
 	border: 1px solid #2996cc;
 	border-radius: 3px;
 }
-