Initial commit

Publishing at last!

.gitignore

@@ -0,0 +1 @@
+/.sass-cache/*

README.md

@@ -0,0 +1,20 @@
+Flat theme for Redmine
+======================
+
+[screenshot1]: http://i.imgur.com/jdKm97x.jpgg "Flat screenshot"
+
+![Flat screenshot][screenshot1]
+
+## Installation
+
+1. [Download]() the theme to `redmine/public/theme/`
+2. Open redmine in a browser and go to Administration > Settings > Display > Theme.
+
+## Make it yours
+
+The theme is made with Sass & Compass so changing colors etc. should be very easy,
+Colors are defined in the top of /sass/application.scss
+
+## License
+
+[WTFPL](http://www.wtfpl.net/)

config.rb

@@ -0,0 +1,24 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "javascripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

javascripts/theme.js

@@ -0,0 +1,18 @@
+(function($) {
+
+  $(document).ready(function() {
+    var update = $('#update')
+    var close = $("<div>", {'class': "update-close"}).text('x');
+
+    update.prepend(close);
+    close.click(function() {
+      update.hide();
+    });
+
+    // toggleFieldset();
+    $('#update fieldset.tabular legend').click(function() {
+      $(this).closest('fieldset').toggleClass('show-children');
+    });
+  });
+
+})(jQuery);

javascripts/theme.prototype.js

@@ -0,0 +1,33 @@
+// Older Redmine versions used prototype instead of jQuery.
+// If you're using Redmine < 2.1 you'll probably want to use this script instead.
+
+(function() {
+
+  function toggleSiblings() {
+    var fieldset = this.up();
+    fieldset.toggleClassName('show-children');
+  }
+
+  function hideUpdate() {
+    document.getElementById("update").hide();
+  }
+
+  document.observe("dom:loaded", function(){
+    var update = $("update");
+    var close = document.createElement("div");
+    close.innerHTML = 'x';
+    close.className = 'update-close';
+    update.insertBefore(close, update.firstChild);
+    close.onclick = hideUpdate;
+
+    // toggleFieldset();
+    var fieldsets = document.querySelectorAll('#update fieldset.tabular');
+    for (var i = 0; i < fieldsets.length; i++) {
+      fieldsets[i].children[0].onclick = toggleSiblings;
+      if (fieldsets[i].children[0].children.length) {
+        fieldsets[i].children[0].children[0].addEventListener("click", function(e) {e.stopPropagation()}, false);
+      }
+    }
+  });
+
+})();

sass/application.scss

@@ -0,0 +1,242 @@
+/* load the default Redmine stylesheet */
+@import url(../../../stylesheets/application.css);
+
+// Open Sans
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
+
+$gray-dark: #202020;
+$gray-text: #484848;
+$hotpink: #d92e47;
+
+@import "compass";
+@import "partials/formalize";
+@import "partials/tables";
+
+body {
+  font: normal 14px/1.5 'Open Sans', sans-serif;
+  font-size: 14px;
+  color: $gray-text;
+}
+
+h1, h2, h3, h4 {
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 300;
+}
+
+a, a:link, a:visited {
+  color: $hotpink;
+  @include transition(color .5s);
+  &:hover {
+    text-decoration: none;
+    color: lighten($hotpink, 25%);
+  }
+  th & {
+    color: $gray-text;
+  }
+}
+
+th {
+  font-weight: 300;
+}
+
+// Top menu bar
+#top-menu {
+  background: lighten($gray-dark, 5%);
+  height: auto;
+  @include pie-clearfix;
+  border-bottom: 1px solid lighten($gray-dark, 10%);
+  li {
+    padding: 0 10px;
+    a {
+      font-weight: normal;
+      line-height: 2.5;
+    }
+  }
+  #loggedas {
+    line-height: 2.5;
+  }
+}
+
+// Header
+#header {
+  height: auto;
+  min-height: 4em;
+  background: $gray-dark;
+  padding: 14px 17px 0 17px;
+  > h1,
+  &:before {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 20px 10px 9px;
+  }
+  &:before {
+    content: url('../images/logo.png');
+  }
+}
+
+// Search box
+#quick-search {
+  select {
+    padding: 5px 15px 5px 5px;
+    height: auto;
+    margin-left: 8px;
+  }
+  input {
+    background: lighten($gray-dark, 5%);
+    border: none;
+    color: #FFF;
+    padding: 15px 6px;
+    margin-left: 4px;
+    display: inline-block;
+  }
+  label {
+    line-height: 2.1;
+  }
+}
+
+// Menu
+#main-menu {
+  position: relative;
+  left: 0;
+  @include pie-clearfix;
+  li {
+    a {
+      font-weight: 300;
+      border-top: 3px solid $gray-dark;
+      padding: 4px 15px 7px;
+      @include transition(border-color .5s);
+      &.selected,
+      &:hover {
+        border-top: 3px solid $hotpink;
+        background: transparent;
+      }
+      &.selected {
+        font-weight: 400;
+        background: #fff;
+      }
+    }
+  }
+}
+
+// Content
+#main {
+  @include pie-clearfix;
+}
+#content {
+  width: 75%;
+  padding: 15px 20px 10px;
+  @include box-sizing(border-box);
+}
+
+#sidebar {
+  width: 22%;
+  margin-left: 3%;
+  h3 {
+    margin-top: 23px;
+  }
+}
+
+div.issue {
+  background: #f4f4f4;
+  border: none;
+  padding: 3px 15px;
+}
+
+.subject h3 {
+  font-size: 26px;
+  line-height: 2;
+}
+
+// Messages
+#errorExplanation, div.flash, .nodata, .warning, .conflict {
+  border: 1px solid;
+  padding: 2px 4px 3px 30px;
+}
+
+// Update issue
+#update {
+  position: fixed;
+  width: 80%;
+  max-width: 800px;
+  max-height: 80%;
+  overflow: auto;
+  background: #FFF;
+  padding: 10px 20px 15px;
+  box-shadow: 0 0 40px rgba(black, .5);
+  margin-left: -40%;
+  left: 50%;
+  top: 10%;
+  z-index: 20;
+  @media (min-width: 1000px) {
+    margin-left: -400px;
+  }
+  .update-close {
+    float: right;
+    border: 1px solid $gray-text;
+    line-height: 0.5;
+    font-size: 25px;
+    padding: 0 1px 6px;
+    font-weight: 300;
+    margin-right: -10px;
+    cursor: pointer;
+    @include transition(all .5s);
+    &:hover {
+      background-color: $gray-text;
+      color: #fff;
+    }
+  }
+  fieldset.tabular {
+    legend {
+      cursor: pointer;
+      color: $hotpink;
+      @include transition(color .5s);
+      &:hover {
+        color: lighten($hotpink, 25%);
+      }
+    }
+    legend small,
+    div,
+    p {
+      display: none;
+    }
+    &.show-children {
+      legend small {
+        display: inline;
+      }
+      div,
+      p {
+        display: block;
+      }
+    }
+  }
+}
+input#issue_subject,
+input#time_entry_comments,
+.tabular textarea {
+  width: 98.4%;
+  max-width: 99%;
+}
+select#time_entry_activity_id {
+  width: 95.7%;
+}
+#attachments_fields {
+  span {
+    white-space: initial;
+  }
+  input {
+    width: 30%;
+    & + input.description,
+    & + label {
+      width: 60%;
+      @media (max-width: 700px) {
+        display: block;
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+// Issue list
+table.query-columns td.buttons input[type=button] {
+  padding: 0;
+}

sass/partials/_formalize.scss

@@ -0,0 +1,367 @@
+
+@import "compass/css3";
+
+// Widths
+//----------------------------------------------------------------------------------------------------
+
+.input_tiny {
+  width: 50px;
+}
+
+.input_small {
+  width: 100px;
+}
+
+.input_medium {
+  width: 150px;
+}
+
+.input_large {
+  width: 200px;
+}
+
+.input_xlarge {
+  width: 250px;
+}
+
+.input_xxlarge {
+  width: 300px;
+}
+
+.input_full {
+  width: 100%;
+}
+
+// Added via JS to <textarea> and class="input-full".
+// Applies only to IE7. Other browsers don't need it.
+
+.input_full_wrap {
+  display: block;
+  padding-right: 8px;
+}
+
+// UI Consistency
+//----------------------------------------------------------------------------------------------------
+
+input[type="search"]::-webkit-search-decoration {
+  display: none;
+}
+
+input,
+button,
+a.button,
+select,
+textarea {
+  @include transition(box-shadow .5s);
+  // Suppress red glow that Firefox
+  // adds to form fields by default.
+  &:invalid {
+    @include box-shadow(none);
+  }
+  // Add blue glow.
+  &:focus {
+    @include box-shadow(#81c2dc 0 0 5px 0);
+    // for Opera
+    z-index: 1;
+  }
+}
+
+input[type="file"],
+input[type="radio"],
+input[type="checkbox"] {
+  &:focus,
+  &:active {
+    @include box-shadow(none);
+  }
+}
+
+button,
+a.button,
+input[type="reset"],
+input[type="submit"],
+input[type="button"] {
+  -webkit-appearance: none;
+  // @include border-radius(4px);
+  @include background-clip(padding-box);
+  background: $hotpink;
+  // @include background-image(linear-gradient(white, #dddddd));
+  border: none;
+  // border-color: #dddddd #bbbbbb #999999;
+  cursor: pointer;
+  color: #fff;
+  display: inline-block;
+  // Helvetica Neue present, because it works better
+  // for line-height on buttons than Arial, on OS X.
+  font-size: 16px;
+  outline: 0;
+  overflow: visible;
+  margin: 0;
+  padding: 0 15px;
+  line-height: 2;
+  text-shadow: none;
+  text-decoration: none;
+  vertical-align: top;
+  width: auto;
+  @include transition(all .5s);
+  &:hover,
+  &:active {
+    background: #fff;
+    color: $hotpink;
+  }
+  // IE7
+  *padding-top: 2px;
+  *padding-bottom: 0;
+  // Kill phantom spacing and dotted
+  // border that appears in Firefox.
+  &::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+  }
+  + a {
+    font-size: 16px;
+    padding: 0 15px;
+    line-height: 2;
+  }
+}
+
+a.button {
+  // IE7
+  *padding-bottom: 3px;
+}
+
+button {
+  // IE7
+  *padding-top: 1px;
+  *padding-bottom: 1px;
+}
+
+textarea,
+select,
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="month"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="text"],
+input[type="time"],
+input[type="url"],
+input[type="week"] {
+  @include box-sizing(border-box);
+  @include background-clip(padding-box);
+  @include border-radius(0);
+  -webkit-appearance: none;
+  background-color: white;
+  border: 1px solid;
+  border-color: #848484 #c1c1c1 #e1e1e1;
+  color: black;
+  outline: 0;
+  margin: 0;
+  padding: 2px 3px;
+  text-align: left;
+  font-size: 13px;
+  // Leaving out Helvetica Neue, to not throw off size="..."
+  // on inputs. Arial is more reliable, on Windows and OS X.
+  font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
+  height: 1.8em;
+  vertical-align: top;
+  // IE7
+  *padding-top: 2px;
+  *padding-bottom: 1px;
+  *height: auto;
+  &[disabled] {
+    background-color: #eeeeee;
+  }
+  .box & {
+    border: 1px solid #DDD;
+  }
+}
+
+button[disabled],
+input[disabled],
+select[disabled],
+select[disabled] option,
+select[disabled] optgroup,
+textarea[disabled],
+a.button_disabled {
+  @include box-shadow(none);
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  user-select: none;
+  color: #888888;
+  cursor: default;
+}
+
+// Separate rule for Firefox.
+// Separate rule for IE, too.
+// Cannot stack with WebKit's.
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  color: #888888;
+}
+
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+  color: #888888;
+}
+
+input.placeholder_text,
+textarea.placeholder_text {
+  color: #888888;
+}
+
+textarea,
+select[size],
+select[multiple] {
+  height: auto;
+}
+
+// Set height back to normal,
+// for Opera, WebKit, and IE.
+select[size="0"],
+select[size="1"] {
+  height: 1.8em;
+  // IE7
+  *height: auto;
+}
+
+// Tweaks for Safari + Chrome.
+@media (-webkit-min-device-pixel-ratio: 0) {
+  select[size],
+  select[multiple],
+  select[multiple][size] {
+    background-image: none;
+    padding-right: 3px;
+  }
+  select,
+  select[size="0"],
+  select[size="1"] {
+    // Base64 encoded "../images/select_arrow.gif"
+    background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==);
+    background-repeat: no-repeat;
+    background-position: right center;
+    padding-right: 20px;
+  }
+  ::-webkit-validation-bubble-message {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, black));
+    border: 0;
+    color: white;
+    font: 13px / 17px "Lucida Grande", Arial, "Liberation Sans", FreeSans, sans-serif;
+    overflow: hidden;
+    padding: 15px 15px 17px;
+    text-shadow: black 0 0 1px;
+    min-height: 16px;
+  }
+  ::-webkit-validation-bubble-arrow,
+  ::-webkit-validation-bubble-top-outer-arrow,
+  ::-webkit-validation-bubble-top-inner-arrow {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    background: #666666;
+    border-color: #666666;
+  }
+}
+
+textarea {
+  min-height: 40px;
+  overflow: auto;
+  resize: vertical;
+  width: 100%;
+}
+
+optgroup {
+  color: black;
+  font-style: normal;
+  font-weight: normal;
+  // Font family repeated, for Firefox.
+  font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
+  // Kill phantom spacing and dotted
+  // border that appears in Firefox.
+  &::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+  }
+}
+
+// `IE6
+//----------------------------------------------------------------------------------------------------
+
+// Everything below this line is for IE6.
+// Delete it if you don't support it! :)
+
+// Classes are added dynamically via JS,
+// because IE6 doesn't support attribute
+// selectors: .ie6_button, .ie6_input, etc.
+
+// Note: These style rules are somewhat
+// duplicated because IE6 bombs out when
+// it sees attribute selectors. Example:
+
+//   .ie6_button {
+//     This works in IE6.
+//   }
+
+//   .ie6_button,
+//   input[type=submit] {
+//     This doesn't work.
+//   }
+
+.ie6_button,
+* html button,
+* html a.button {
+  background: #dddddd image-url("button.png") repeat-x;
+  border: 1px solid;
+  border-color: #dddddd #bbbbbb #999999;
+  cursor: pointer;
+  color: #333333;
+  font: bold 12px / 1.2 Arial, sans-serif;
+  padding: 2px 10px 0;
+  text-decoration: none;
+  overflow: visible;
+  vertical-align: top;
+  width: auto;
+}
+
+* html a.button {
+  position: relative;
+  top: 3px;
+  padding-bottom: 2px;
+}
+
+* html button {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
+.ie6_input,
+* html textarea,
+* html select {
+  background: white;
+  border: 1px solid;
+  border-color: #848484 #c1c1c1 #e1e1e1;
+  color: black;
+  padding: 2px 3px 1px;
+  font-size: 13px;
+  font-family: Arial, sans-serif;
+  vertical-align: top;
+}
+
+* html select {
+  margin-top: 1px;
+}
+
+.placeholder_text,
+.ie6_input_disabled,
+.ie6_button_disabled {
+  color: #888888;
+}
+
+.ie6_input_disabled {
+  background: #eeeeee;
+}

sass/partials/_tables.scss

@@ -0,0 +1,28 @@
+
+tr.odd.priority-5, table.list tbody tr.odd.priority-5:hover { color: #900; font-weight: bold; }
+tr.odd.priority-5 { background: #ffc4c4; }
+tr.even.priority-5, table.list tbody tr.even.priority-5:hover { color: #900; font-weight: bold; }
+tr.even.priority-5 { background: #ffd4d4; }
+tr.priority-5 a, tr.priority-5:hover a { color: #900; }
+tr.odd.priority-5 td, tr.even.priority-5 td { border-color: #ffb4b4; }
+
+tr.odd.priority-4, table.list tbody tr.odd.priority-4:hover { color: #900; }
+tr.odd.priority-4 { background: #ffc4c4; }
+tr.even.priority-4, table.list tbody tr.even.priority-4:hover { color: #900; }
+tr.even.priority-4 { background: #ffd4d4; }
+tr.priority-4 a { color: #900; }
+tr.odd.priority-4 td, tr.even.priority-4 td { border-color: #ffb4b4; }
+
+tr.odd.priority-3, table.list tbody tr.odd.priority-3:hover { color: #900; }
+tr.odd.priority-3 { background: #fee; }
+tr.even.priority-3, table.list tbody tr.even.priority-3:hover { color: #900; }
+tr.even.priority-3 { background: #fff2f2; }
+tr.priority-3 a { color: #900; }
+tr.odd.priority-3 td, tr.even.priority-3 td { border-color: #fcc; }
+
+tr.odd.priority-1, table.list tbody tr.odd.priority-1:hover { color: #559; }
+tr.odd.priority-1 { background: #eaf7ff; }
+tr.even.priority-1, table.list tbody tr.even.priority-1:hover { color: #559; }
+tr.even.priority-1 { background: #f2faff; }
+tr.priority-1 a { color: #559; }
+tr.odd.priority-1 td, tr.even.priority-1 td { border-color: #add7f3; }

stylesheets/application.css

@@ -0,0 +1,726 @@
+@import url(../../../stylesheets/application.css);
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
+/* load the default Redmine stylesheet */
+.input_tiny {
+  width: 50px;
+}
+
+.input_small {
+  width: 100px;
+}
+
+.input_medium {
+  width: 150px;
+}
+
+.input_large {
+  width: 200px;
+}
+
+.input_xlarge {
+  width: 250px;
+}
+
+.input_xxlarge {
+  width: 300px;
+}
+
+.input_full {
+  width: 100%;
+}
+
+.input_full_wrap {
+  display: block;
+  padding-right: 8px;
+}
+
+input[type="search"]::-webkit-search-decoration {
+  display: none;
+}
+
+input,
+button,
+a.button,
+select,
+textarea {
+  -webkit-transition: box-shadow 0.5s;
+  -moz-transition: box-shadow 0.5s;
+  -o-transition: box-shadow 0.5s;
+  transition: box-shadow 0.5s;
+}
+input:invalid,
+button:invalid,
+a.button:invalid,
+select:invalid,
+textarea:invalid {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+input:focus,
+button:focus,
+a.button:focus,
+select:focus,
+textarea:focus {
+  -webkit-box-shadow: #81c2dc 0 0 5px 0;
+  -moz-box-shadow: #81c2dc 0 0 5px 0;
+  box-shadow: #81c2dc 0 0 5px 0;
+  z-index: 1;
+}
+
+input[type="file"]:focus, input[type="file"]:active,
+input[type="radio"]:focus,
+input[type="radio"]:active,
+input[type="checkbox"]:focus,
+input[type="checkbox"]:active {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+button,
+a.button,
+input[type="reset"],
+input[type="submit"],
+input[type="button"] {
+  -webkit-appearance: none;
+  -webkit-background-clip: padding;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  background: #d92e47;
+  border: none;
+  cursor: pointer;
+  color: #fff;
+  display: inline-block;
+  font-size: 16px;
+  outline: 0;
+  overflow: visible;
+  margin: 0;
+  padding: 0 15px;
+  line-height: 2;
+  text-shadow: none;
+  text-decoration: none;
+  vertical-align: top;
+  width: auto;
+  -webkit-transition: all 0.5s;
+  -moz-transition: all 0.5s;
+  -o-transition: all 0.5s;
+  transition: all 0.5s;
+  *padding-top: 2px;
+  *padding-bottom: 0;
+}
+button:hover, button:active,
+a.button:hover,
+a.button:active,
+input[type="reset"]:hover,
+input[type="reset"]:active,
+input[type="submit"]:hover,
+input[type="submit"]:active,
+input[type="button"]:hover,
+input[type="button"]:active {
+  background: #fff;
+  color: #d92e47;
+}
+button::-moz-focus-inner,
+a.button::-moz-focus-inner,
+input[type="reset"]::-moz-focus-inner,
+input[type="submit"]::-moz-focus-inner,
+input[type="button"]::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+button + a,
+a.button + a,
+input[type="reset"] + a,
+input[type="submit"] + a,
+input[type="button"] + a {
+  font-size: 16px;
+  padding: 0 15px;
+  line-height: 2;
+}
+
+a.button {
+  *padding-bottom: 3px;
+}
+
+button {
+  *padding-top: 1px;
+  *padding-bottom: 1px;
+}
+
+textarea,
+select,
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="month"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="text"],
+input[type="time"],
+input[type="url"],
+input[type="week"] {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-background-clip: padding;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  -ms-border-radius: 0;
+  -o-border-radius: 0;
+  border-radius: 0;
+  -webkit-appearance: none;
+  background-color: white;
+  border: 1px solid;
+  border-color: #848484 #c1c1c1 #e1e1e1;
+  color: black;
+  outline: 0;
+  margin: 0;
+  padding: 2px 3px;
+  text-align: left;
+  font-size: 13px;
+  font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
+  height: 1.8em;
+  vertical-align: top;
+  *padding-top: 2px;
+  *padding-bottom: 1px;
+  *height: auto;
+}
+textarea[disabled],
+select[disabled],
+input[type="date"][disabled],
+input[type="datetime"][disabled],
+input[type="datetime-local"][disabled],
+input[type="email"][disabled],
+input[type="month"][disabled],
+input[type="number"][disabled],
+input[type="password"][disabled],
+input[type="search"][disabled],
+input[type="tel"][disabled],
+input[type="text"][disabled],
+input[type="time"][disabled],
+input[type="url"][disabled],
+input[type="week"][disabled] {
+  background-color: #eeeeee;
+}
+.box textarea, .box
+select, .box
+input[type="date"], .box
+input[type="datetime"], .box
+input[type="datetime-local"], .box
+input[type="email"], .box
+input[type="month"], .box
+input[type="number"], .box
+input[type="password"], .box
+input[type="search"], .box
+input[type="tel"], .box
+input[type="text"], .box
+input[type="time"], .box
+input[type="url"], .box
+input[type="week"] {
+  border: 1px solid #DDD;
+}
+
+button[disabled],
+input[disabled],
+select[disabled],
+select[disabled] option,
+select[disabled] optgroup,
+textarea[disabled],
+a.button_disabled {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  user-select: none;
+  color: #888888;
+  cursor: default;
+}
+
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  color: #888888;
+}
+
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+  color: #888888;
+}
+
+input.placeholder_text,
+textarea.placeholder_text {
+  color: #888888;
+}
+
+textarea,
+select[size],
+select[multiple] {
+  height: auto;
+}
+
+select[size="0"],
+select[size="1"] {
+  height: 1.8em;
+  *height: auto;
+}
+
+@media (-webkit-min-device-pixel-ratio: 0) {
+  select[size],
+  select[multiple],
+  select[multiple][size] {
+    background-image: none;
+    padding-right: 3px;
+  }
+
+  select,
+  select[size="0"],
+  select[size="1"] {
+    background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==);
+    background-repeat: no-repeat;
+    background-position: right center;
+    padding-right: 20px;
+  }
+
+  ::-webkit-validation-bubble-message {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, black));
+    border: 0;
+    color: white;
+    font: 13px / 17px "Lucida Grande", Arial, "Liberation Sans", FreeSans, sans-serif;
+    overflow: hidden;
+    padding: 15px 15px 17px;
+    text-shadow: black 0 0 1px;
+    min-height: 16px;
+  }
+
+  ::-webkit-validation-bubble-arrow,
+  ::-webkit-validation-bubble-top-outer-arrow,
+  ::-webkit-validation-bubble-top-inner-arrow {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    background: #666666;
+    border-color: #666666;
+  }
+}
+textarea {
+  min-height: 40px;
+  overflow: auto;
+  resize: vertical;
+  width: 100%;
+}
+
+optgroup {
+  color: black;
+  font-style: normal;
+  font-weight: normal;
+  font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
+}
+optgroup::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+.ie6_button,
+* html button,
+* html a.button {
+  background: #dddddd url('/images/button.png?1382606282') repeat-x;
+  border: 1px solid;
+  border-color: #dddddd #bbbbbb #999999;
+  cursor: pointer;
+  color: #333333;
+  font: bold 12px / 1.2 Arial, sans-serif;
+  padding: 2px 10px 0;
+  text-decoration: none;
+  overflow: visible;
+  vertical-align: top;
+  width: auto;
+}
+
+* html a.button {
+  position: relative;
+  top: 3px;
+  padding-bottom: 2px;
+}
+
+* html button {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
+.ie6_input,
+* html textarea,
+* html select {
+  background: white;
+  border: 1px solid;
+  border-color: #848484 #c1c1c1 #e1e1e1;
+  color: black;
+  padding: 2px 3px 1px;
+  font-size: 13px;
+  font-family: Arial, sans-serif;
+  vertical-align: top;
+}
+
+* html select {
+  margin-top: 1px;
+}
+
+.placeholder_text,
+.ie6_input_disabled,
+.ie6_button_disabled {
+  color: #888888;
+}
+
+.ie6_input_disabled {
+  background: #eeeeee;
+}
+
+tr.odd.priority-5, table.list tbody tr.odd.priority-5:hover {
+  color: #900;
+  font-weight: bold;
+}
+
+tr.odd.priority-5 {
+  background: #ffc4c4;
+}
+
+tr.even.priority-5, table.list tbody tr.even.priority-5:hover {
+  color: #900;
+  font-weight: bold;
+}
+
+tr.even.priority-5 {
+  background: #ffd4d4;
+}
+
+tr.priority-5 a, tr.priority-5:hover a {
+  color: #900;
+}
+
+tr.odd.priority-5 td, tr.even.priority-5 td {
+  border-color: #ffb4b4;
+}
+
+tr.odd.priority-4, table.list tbody tr.odd.priority-4:hover {
+  color: #900;
+}
+
+tr.odd.priority-4 {
+  background: #ffc4c4;
+}
+
+tr.even.priority-4, table.list tbody tr.even.priority-4:hover {
+  color: #900;
+}
+
+tr.even.priority-4 {
+  background: #ffd4d4;
+}
+
+tr.priority-4 a {
+  color: #900;
+}
+
+tr.odd.priority-4 td, tr.even.priority-4 td {
+  border-color: #ffb4b4;
+}
+
+tr.odd.priority-3, table.list tbody tr.odd.priority-3:hover {
+  color: #900;
+}
+
+tr.odd.priority-3 {
+  background: #fee;
+}
+
+tr.even.priority-3, table.list tbody tr.even.priority-3:hover {
+  color: #900;
+}
+
+tr.even.priority-3 {
+  background: #fff2f2;
+}
+
+tr.priority-3 a {
+  color: #900;
+}
+
+tr.odd.priority-3 td, tr.even.priority-3 td {
+  border-color: #fcc;
+}
+
+tr.odd.priority-1, table.list tbody tr.odd.priority-1:hover {
+  color: #559;
+}
+
+tr.odd.priority-1 {
+  background: #eaf7ff;
+}
+
+tr.even.priority-1, table.list tbody tr.even.priority-1:hover {
+  color: #559;
+}
+
+tr.even.priority-1 {
+  background: #f2faff;
+}
+
+tr.priority-1 a {
+  color: #559;
+}
+
+tr.odd.priority-1 td, tr.even.priority-1 td {
+  border-color: #add7f3;
+}
+
+body {
+  font: normal 14px/1.5 'Open Sans', sans-serif;
+  font-size: 14px;
+  color: #484848;
+}
+
+h1, h2, h3, h4 {
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 300;
+}
+
+a, a:link, a:visited {
+  color: #d92e47;
+  -webkit-transition: color 0.5s;
+  -moz-transition: color 0.5s;
+  -o-transition: color 0.5s;
+  transition: color 0.5s;
+}
+a:hover, a:link:hover, a:visited:hover {
+  text-decoration: none;
+  color: #ed9aa6;
+}
+th a, th a:link, th a:visited {
+  color: #484848;
+}
+
+th {
+  font-weight: 300;
+}
+
+#top-menu {
+  background: #2d2d2d;
+  height: auto;
+  *zoom: 1;
+  border-bottom: 1px solid #393939;
+}
+#top-menu:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+#top-menu li {
+  padding: 0 10px;
+}
+#top-menu li a {
+  font-weight: normal;
+  line-height: 2.5;
+}
+#top-menu #loggedas {
+  line-height: 2.5;
+}
+
+#header {
+  height: auto;
+  min-height: 4em;
+  background: #202020;
+  padding: 14px 17px 0 17px;
+}
+#header > h1, #header:before {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 20px 10px 9px;
+}
+#header:before {
+  content: url("../images/logo.png");
+}
+
+#quick-search select {
+  padding: 5px 15px 5px 5px;
+  height: auto;
+  margin-left: 8px;
+}
+#quick-search input {
+  background: #2d2d2d;
+  border: none;
+  color: #FFF;
+  padding: 15px 6px;
+  margin-left: 4px;
+  display: inline-block;
+}
+#quick-search label {
+  line-height: 2.1;
+}
+
+#main-menu {
+  position: relative;
+  left: 0;
+  *zoom: 1;
+}
+#main-menu:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+#main-menu li a {
+  font-weight: 300;
+  border-top: 3px solid #202020;
+  padding: 4px 15px 7px;
+  -webkit-transition: border-color 0.5s;
+  -moz-transition: border-color 0.5s;
+  -o-transition: border-color 0.5s;
+  transition: border-color 0.5s;
+}
+#main-menu li a.selected, #main-menu li a:hover {
+  border-top: 3px solid #d92e47;
+  background: transparent;
+}
+#main-menu li a.selected {
+  font-weight: 400;
+  background: #fff;
+}
+
+#main {
+  *zoom: 1;
+}
+#main:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+#content {
+  width: 75%;
+  padding: 15px 20px 10px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+#sidebar {
+  width: 22%;
+  margin-left: 3%;
+}
+#sidebar h3 {
+  margin-top: 23px;
+}
+
+div.issue {
+  background: #f4f4f4;
+  border: none;
+  padding: 3px 15px;
+}
+
+.subject h3 {
+  font-size: 26px;
+  line-height: 2;
+}
+
+#errorExplanation, div.flash, .nodata, .warning, .conflict {
+  border: 1px solid;
+  padding: 2px 4px 3px 30px;
+}
+
+#update {
+  position: fixed;
+  width: 80%;
+  max-width: 800px;
+  max-height: 80%;
+  overflow: auto;
+  background: #FFF;
+  padding: 10px 20px 15px;
+  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
+  margin-left: -40%;
+  left: 50%;
+  top: 10%;
+  z-index: 20;
+}
+@media (min-width: 1000px) {
+  #update {
+    margin-left: -400px;
+  }
+}
+#update .update-close {
+  float: right;
+  border: 1px solid #484848;
+  line-height: 0.5;
+  font-size: 25px;
+  padding: 0 1px 6px;
+  font-weight: 300;
+  margin-right: -10px;
+  cursor: pointer;
+  -webkit-transition: all 0.5s;
+  -moz-transition: all 0.5s;
+  -o-transition: all 0.5s;
+  transition: all 0.5s;
+}
+#update .update-close:hover {
+  background-color: #484848;
+  color: #fff;
+}
+#update fieldset.tabular legend {
+  cursor: pointer;
+  color: #d92e47;
+  -webkit-transition: color 0.5s;
+  -moz-transition: color 0.5s;
+  -o-transition: color 0.5s;
+  transition: color 0.5s;
+}
+#update fieldset.tabular legend:hover {
+  color: #ed9aa6;
+}
+#update fieldset.tabular legend small,
+#update fieldset.tabular div,
+#update fieldset.tabular p {
+  display: none;
+}
+#update fieldset.tabular.show-children legend small {
+  display: inline;
+}
+#update fieldset.tabular.show-children div,
+#update fieldset.tabular.show-children p {
+  display: block;
+}
+
+input#issue_subject,
+input#time_entry_comments,
+.tabular textarea {
+  width: 98.4%;
+  max-width: 99%;
+}
+
+select#time_entry_activity_id {
+  width: 95.7%;
+}
+
+#attachments_fields span {
+  white-space: initial;
+}
+#attachments_fields input {
+  width: 30%;
+}
+#attachments_fields input + input.description, #attachments_fields input + label {
+  width: 60%;
+}
+@media (max-width: 700px) {
+  #attachments_fields input + input.description, #attachments_fields input + label {
+    display: block;
+    margin-left: 0;
+  }
+}
+
+table.query-columns td.buttons input[type=button] {
+  padding: 0;
+}