bhf 0.4.2.2 → 0.4.2.3

data/vendor/assets/javascripts/bhf/classes/MultipleFields.js

@@ -0,0 +1,50 @@
+var MultipleFields = new Class({
+	version: 0.1,
+
+	options: {
+		spliter: ';'
+	},
+
+	// Implements: [Options, Events],
+
+	initialize: function(_object, _options) {
+		if ( ! _object) { return; }
+		// this.setOptions(_options);
+		if (_object.get('data-spliter')) {
+			this.options.spliter = _object.get('data-spliter');
+		}
+
+ 		var elem = _object;
+		var template = elem.clone()
+			.erase('name').erase('id').erase('data-spliter').erase('value')
+			.addClass('template');
+
+		elem.set('type', 'hidden');
+
+		new Element('span.add_field', {text: '+'})
+			.inject(elem, 'after')
+			.addEvent('click', function(e){
+				this.addField(elem, template);
+			}.bind(this));
+
+		elem.get('value').toString().split(this.options.spliter).each(function(data){
+			this.addField(elem, template, data);
+		}.bind(this));
+	},
+	
+	addField: function(elem, template, data){
+		template
+			.clone()
+			.set('value', data)
+			.addEvent('change', function(e){
+				var values = [];
+				e.target.getParent('.input').getElements('.template').each(function(template){
+					if (template.value.trim()) {
+						values.push(template.value.trim());
+					}
+				});
+				elem.set('value', values.join(this.options.spliter));
+			}.bind(this))
+			.inject(elem.getParent('.input').getElement('.add_field'), 'before');
+	}
+});

data/vendor/assets/javascripts/bhf_includes/wmd.js

@@ -37,7 +37,7 @@ Attacklab.wmdBase = function(){
 	
 	// The text that appears on the upper part of the dialog box when
 	// entering links.
-	var imageDialogText = "<p style='margin-top: 0px'><b>Enter the image URL.</b></p><p>You can also add a title, which will be displayed as a tool tip.</p><p>Example:<br />http://wmd-editor.com/images/cloud1.jpg   \"Optional title\"</p>";
+	var imageDialogText = "<p style='margin-top: 0px'><b>Enter the image URL.</b></p><p>You can also add a title, which will be displayed as a tool tip.</p><p>Example:<br />http://wmd-editor.comcloud1.jpg   \"Optional title\"</p>";
 	var linkDialogText = "<p style='margin-top: 0px'><b>Enter the web address.</b></p><p>You can also add a title, which will be displayed as a tool tip.</p><p>Example:<br />http://wmd-editor.com/   \"Optional title\"</p>";
 	
 	// The default text that appears in the dialog input box when entering

data/vendor/assets/stylesheets/bhf/MooEditable.css.scss

@@ -0,0 +1,176 @@
+.mooeditable-container{
+	position: relative;
+	border: 2px solid #ddd;
+}
+
+.mooeditable-ui-toolbar{
+	color: inherit;
+	background-color: #eee;
+	padding: 2px;
+}
+
+.mooeditable-ui-toolbar:after{
+	content: ".";
+	display: block;
+	height: 0;
+	clear: both;
+	visibility: hidden;
+}
+
+.mooeditable-ui-toolbar .toolbar-item,
+.mooeditable-ui-toolbar .toolbar-separator{
+	display: -moz-inline-box;
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.mooeditable-ui-toolbar .mooeditable-ui-button{
+	cursor: pointer;
+	border: 0;
+	width: auto;
+	height: auto;
+	margin: 2px;
+	padding: 2px;
+	vertical-align: middle;
+	color: inherit;
+	background-color: transparent;
+}
+* html .mooeditable-ui-toolbar .mooeditable-ui-button{ /* IE6 */
+	width: 24px;
+	overflow: visible;
+	padding: 2px 4px;
+}
+
+.mooeditable-ui-toolbar .mooeditable-ui-button.active,
+.mooeditable-ui-toolbar .mooeditable-ui-button.onActive{
+	color: inherit;
+	background-color: #ddd;
+}
+
+.mooeditable-ui-toolbar .mooeditable-ui-button:hover,
+.mooeditable-ui-toolbar .mooeditable-ui-button.hover{
+	color: inherit;
+	background-color: #fff;
+}
+
+.mooeditable-ui-toolbar .mooeditable-ui-button.disabled{
+	cursor: default;
+}
+
+.mooeditable-ui-toolbar .mooeditable-ui-button.disabled:hover{
+	color: inherit;
+	background-color: transparent;
+}
+
+.mooeditable-ui-toolbar .mooeditable-ui-button .button-icon{
+	display: -moz-inline-box;
+	display: inline-block;
+	width: 16px;
+	height: 16px;
+	vertical-align: middle;
+	color: inherit;
+	background: transparent url(mooeditable-toolbarbuttons-tango.png) no-repeat 0 -8px;
+}
+
+.mooeditable-ui-toolbar .mooeditable-ui-button .button-text{
+	display: none;
+	font-size: 13px;
+	vertical-align: middle;
+}
+
+.mooeditable-ui-toolbar .mooeditable-ui-button-text .button-icon{
+	display: none;
+}
+.mooeditable-ui-toolbar .mooeditable-ui-button-text .button-text{
+	display: inline;
+}
+
+.mooeditable-ui-toolbar .mooeditable-ui-button-icon-text{
+	width: auto;
+}
+.mooeditable-ui-toolbar .mooeditable-ui-button-icon-text .button-text{
+	display: inline;
+	margin-left: 4px;
+}
+
+.mooeditable-ui-toolbar .toolbar-separator{
+	width: 1px;
+	height: 24px;
+	margin: 2px;
+	text-indent: -999em;
+	color: inherit;
+	background-color: #fafafa;
+}
+
+.mooeditable-ui-toolbar .bold-item .button-icon{ background-position: 0 0; } 
+.mooeditable-ui-toolbar .createlink-item .button-icon{ background-position: 0 -16px; } 
+.mooeditable-ui-toolbar .indent-item .button-icon{ background-position: 0 -32px; } 
+.mooeditable-ui-toolbar .insertorderedlist-item .button-icon{ background-position: 0 -48px; } 
+.mooeditable-ui-toolbar .insertunorderedlist-item .button-icon{ background-position: 0 -64px; } 
+.mooeditable-ui-toolbar .italic-item .button-icon{ background-position: 0 -80px; } 
+.mooeditable-ui-toolbar .outdent-item .button-icon{ background-position: 0 -96px; } 
+.mooeditable-ui-toolbar .redo-item .button-icon{ background-position: 0 -112px; } 
+.mooeditable-ui-toolbar .strikethrough-item .button-icon{ background-position: 0 -128px; } 
+.mooeditable-ui-toolbar .toggleview-item .button-icon{ background-position: 0 -144px; } 
+.mooeditable-ui-toolbar .underline-item .button-icon{ background-position: 0 -160px; } 
+.mooeditable-ui-toolbar .undo-item .button-icon{ background-position: 0 -176px; } 
+.mooeditable-ui-toolbar .unlink-item .button-icon{ background-position: 0 -192px; } 
+.mooeditable-ui-toolbar .urlimage-item .button-icon{ background-position: 0 -208px; } 
+
+.mooeditable-iframe{
+	margin: 0;
+	padding: 0;
+	border: 0;
+	width: 100%;
+	vertical-align: top;
+}
+
+.mooeditable-textarea{
+	margin: 0 !important;
+	padding: 0 !important;
+	border: 0 !important;
+	width: 100% !important;
+	resize: none !important; /* disable resizable textareas in Webkit */
+	outline: 0 !important; /* disable focus ring in Safari */
+}
+
+.mooeditable-ui-dialog{
+	color: inherit;
+	background-color: #ddd;
+	position: absolute;
+	display: block;
+	cursor: default;
+	font-size: 12px;
+	z-index: 100;
+	width: 100%;
+}
+
+.mooeditable-ui-dialog .dialog-content{
+	padding: 4px 10px;
+}
+
+.mooeditable-ui-dialog .dialog-content *{
+	vertical-align: middle;
+}
+
+.mooeditable-ui-dialog input{
+	margin: 0 8px;
+}
+
+.mooeditable-ui-dialog input.text{
+	width: 300px;
+}
+
+.mooeditable-ui-button-overlay{
+	color: inherit;
+	background-color: #ddd;
+	font-size: 12px;
+	z-index: 100;
+	outline: 0;
+	-moz-outline: 0;
+	-webkit-outline: 0;
+}
+
+.mooeditable-ui-button-overlay .overlay-content{
+	padding: 10px;
+}

data/vendor/assets/stylesheets/bhf/application.css.sass

@@ -0,0 +1,1067 @@
+// sass --watch public/stylesheets/sass/bhf.sass:public/stylesheets/bhf.css --style compressed
+
+@import reset
+@import typo
+@import functions
+
+$w1: #fff
+$w2: #F1F1F1
+$k1: #000
+$b1: #38A5E9
+$b2: #0F8FDD
+$g1: #7F7F7F
+$g2: #ccc
+$g3: #424242
+
+html
+  min-width: 700px
+  height: 100%
+  overflow-y: scroll
+  background: url(bhf/small_ajax_loader.gif) no-repeat -300px -300px, url(bhf/small_ajax_loader_h.gif) no-repeat -300px -300px, #303030 url(bhf/bg.png)
+  
+
+body
+  min-width: 960px
+  min-height: 100%
+  +box-inner-shadow(0, 0, 8,#000)
+
+a
+  text-decoration: none
+  color: inherit 
+  &:focus,
+  &:active
+    outline: 0
+
+header
+  display: block
+  overflow: hidden
+  clear: both
+  padding: 0 20px
+  h1
+    float: right
+    height: 83px
+    overflow: hidden
+  nav
+    padding-top: 25px
+    li
+      float: left
+      font-weight: bold
+      margin-right: 20px
+      &.active
+        a
+          +text-shadow(#fff, -1)
+          +bg-gradient(#D5D5D5, #FFFFFF)
+          +box-shadow(0, 1, 4)
+          color: #414756
+          &:hover
+            +bg-gradient(#FFFFFF, #D5D5D5)
+            border-color: #FFFFFF
+            +text-shadow(#fff)
+            color: #414756
+            +box-inner-shadow(0, 0, 3, #fff)
+      a
+        text-decoration: none
+        display: block
+        padding: 5px 23px
+        border: 1px solid transparent
+        color: #EAEAEA
+        +text-shadow(#000, -1)
+        &:hover
+          +bg-gradient($b1, $b2)
+          color: $w1
+          border-color: $b1
+          +box-shadow(0, 1, 4)
+          +text-shadow(#0068B3)
+        &:active
+          +bg-gradient($b2, $b1)
+          +text-shadow(#0068B3, -1)
+            
+
+#content
+  display: table
+  width: 100%
+  box-sizing: border-box
+  margin-top: -20px
+  border-spacing: 20px
+  h2,
+  h3
+    +text-shadow(#fff)
+  h6
+    color: $g3
+    +text-shadow(#fff)
+    
+.quick_edit_holder,
+#main
+  display: table-cell
+  overflow: hidden
+  background: #EAEAEA
+  border: 3px solid #FFFFFF
+  box-sizing: border-box
+  padding: 10px 20px
+  +box-shadow(0, 1, 4, rgba($k1, 0.5))
+
+#main_form
+  // TODO: wtf css?
+  margin-left: -20px
+    
+
+
+#content
+  .quick_edit_holder
+    +transition-duration(0.3)
+    +transition-delay(0.2)
+    overflow-x: auto
+    position: relative
+    max-width: 400px
+    width: 400px
+    vertical-align: top
+    form
+      margin-left: 0
+      padding-bottom: 10px
+    .node,
+    .input,
+    .label
+      display: block
+    .input
+      padding-top: 0
+      min-height: 31px
+    
+    textarea
+      width: 300px
+      height: 100px
+    
+    .group
+      padding: 0
+      &:active
+        .save
+          border-right: 1px solid rgba(#fff, 0.4)
+        .save_and_next
+          border-left: 1px solid $b2
+        
+      button
+        border: none
+        background: none
+        color: inherit
+        font: inherit
+        text-shadow: inherit
+        margin: 0
+        float: left
+        cursor: pointer
+        padding: 6px 20px
+        &:focus
+          outline: 0
+        &.save
+          border-right: 1px solid $b2
+          &.create
+            border-right: none
+          &:focus
+            color: $b2
+            text-shadow: 0 0px 3px #fff
+        &.save_and_next
+          border-left: 1px solid rgba(#fff, 0.3)
+          text-indent: -9999px
+          background: url(bhf/pictos.png) no-repeat -140px -40px
+          width: 40px
+          &:focus,
+          &:hover
+            background-position: -140px -90px
+        
+
+    > button
+      //
+        &.save,
+        &.save_and_next
+          margin-left: -6px
+          padding: 6px 25px
+          font-size: 13px
+        
+      &.cancel,
+      &.open
+        float: right
+        margin-top: 0
+      &.cancel
+        margin-right: -10px
+      &.open
+        margin-right: 10px
+      &.save
+        margin-right: 16px
+
+table
+  margin-top: 20px
+  margin-bottom: 40px
+  width: 100%
+  caption
+    overflow: hidden
+    height: 28px
+    -moz-box-sizing: content-box
+    padding: 10px 10px 10px 20px
+    +border-top-radius(4)
+    +box-shadow(0, 1, 4, #ccc)
+    background: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), color-stop(50%, #CCCCCC), color-stop(51%, #DCDCDC), to(#DCDCDC))
+    background-size: 0 2px
+    text-align: left
+    h4,
+    .info
+      display: inline-block
+      +text-shadow(#fff)
+      padding-bottom: 20px
+    h4
+      color: #3E3E3E
+    .info
+      margin: 0 20px 0 10px
+      width: 290px
+      text-transform: uppercase
+      font-size: 12px
+      color: $g1
+      white-space: nowrap
+    form
+      display: inline-block
+    .create
+      float: right
+
+  td:first-child
+    padding-left: 17px
+  th:first-child
+    padding-left: 20px
+
+  td,
+  th
+    &:first-child
+      +border-left-radius(4)
+    &:last-child
+      +border-right-radius(4)
+  thead
+    th
+      padding: 4px 0
+      padding-left: 3px
+      text-align: left
+      border-top: 1px solid #C6C6C6
+      border-bottom: 1px solid #1B1B1B
+      white-space: nowrap
+      background: #3E3E3E
+      +text-shadow(#000, -1)
+      color: #C2C2C2
+      &.primary_key
+        text-transform: uppercase
+      &.sorted
+        +box-inner-shadow(0, -15, 50, #000)
+        & a:after,
+        &.desc:hover a:after
+          content: ' ▼'
+        &:hover a:after,
+        &.desc a:after
+          content: ' ▲'
+        a
+          color: #FFFFFF
+          +text-shadow
+
+  th,
+  td
+    &.drag
+      padding-left: 0px
+
+  tbody
+    td
+      border-top: 1px solid #FFFFFF
+      border-bottom: 1px solid #C6C6C6
+      &.has_many,
+      &.has_and_belongs_to_many,
+      &.text
+        max-width: 200px
+        white-space: nowrap
+        overflow: hidden
+        a
+          -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(70%,rgba($k1,1)), color-stop(95%,rgba($w1,0)))
+          
+      &.no_entries
+        text-align: center
+        text-transform: uppercase
+        padding: 10px 0
+        color: $g1
+        a
+          font-weight: bold
+          display: inline
+			
+    a
+      display: block
+      padding: 5px 3px
+      &.edit,
+      &.delete
+        padding: 0
+        margin-right: 5px
+        display: inline-block
+        text-indent: -9999px
+        width: 20px
+        height: 20px
+        background: url(bhf/pictos.png) no-repeat
+        &.clicked
+          background: url(bhf/small_ajax_loader.gif) no-repeat center center
+      &.edit
+        &:active
+          background-position: 0 -101px
+      &.delete
+        background-position: -50px 0
+        &:active
+          background-position: -50px -101px
+
+    .handle
+      background: url(bhf/pictos.png) no-repeat -94px 0
+      cursor: move
+      display: block
+    
+
+    tr      
+      &:hover td,
+      &.live_edit td
+        +bg-gradient($b1, $b2)
+        color: $w1
+        box-shadow: inset 0 1px 0 $b2, inset 0 2px 0 rgba(#fff, 0.4)
+        border-color: #EAEAEA
+        .edit
+          background-position: 0 -50px
+          &:hover
+            background-position: 0 -100px
+        .delete
+          background-position: -50px -50px
+          &:hover
+            background-position: -50px -100px
+        .handle
+          background-position: -94px -50px
+          &:hover
+            background-position: -94px -100px
+        .edit,
+        .delete
+          &.clicked
+            background: url(bhf/small_ajax_loader_h.gif) no-repeat center center
+      &.live_edit td
+        +bg-gradient($b2, $b1)
+        box-shadow: inset 0 -1px 0 $b2, inset 0 -2px 0 rgba(#fff, 0.4)
+      &.dragged
+        td
+          opacity: 0.4
+          background-color: gray
+
+  thead
+    th.drag
+      width: 24px
+
+  tfoot
+    td
+      padding-top: 10px
+      border-top: 1px solid #FFFFFF
+
+  thead,
+  tbody
+    .primary_key,
+    .number
+      padding-right: 10px
+      text-align: right
+    .primary_key
+      padding-left: 10px
+      width: 30px
+    .action
+      width: 54px
+
+
+.default_input
+  border: 1px solid #BBB
+  background: #FFF
+  +border-radius(2)
+  +box-shadow(0, 1, 0, #FFFFFF)
+  padding: 5px 5px 4px 5px
+  width: 300px
+  line-height: 10px
+  &:focus
+    outline: 0
+    +transition-duration(1)
+    box-shadow: 0 1px 12px $b2
+    -moz-box-shadow: 0 1px 12px $b2
+    border-color: $b2
+
+.search
+  input[type="text"]
+    @extend .default_input
+    width: 200px
+
+form
+  .node
+    display: table-row
+    &.string,
+    &.number,
+    &.text,
+    &.password
+      .input,
+      .label
+        padding-top: 0
+      .label
+        label
+          padding-top: 5px
+    .label
+      p,
+      label
+        display: block
+        color: $g3
+        +text-shadow(#fff)
+      width: 200px
+      .field_with_errors
+        color: red
+    &.primary_key
+      .label
+        text-transform: uppercase
+    .input,
+    .label
+      padding-top: 5px
+      vertical-align: top
+      display: table-cell
+    .input
+      input[type="password"],
+      input[type="text"],
+      .uploaded_image,
+      .uploaded_file,
+      textarea
+        @extend .default_input
+      textarea
+        width: 500px
+        height: 200px
+        line-height: 20px
+        &.wysiwyg
+          height: 400px
+      .errors
+        color: red
+      .field_with_errors
+        input
+          border-color: red
+      [disabled]
+        background: $g2 !important
+      input[type="submit"],
+      input[type="password"],
+      input[type="text"],
+      select,
+      textarea,
+      .uploaded_image,
+      .uploaded_file,
+      .mooeditable-container
+        margin-left: -6px
+      input[type="file"]
+        margin-left: -5px
+      select
+        font-size: 16px
+      .multiple_fields.template,
+      .array_fields
+        display: block
+      .add_field
+        display: block
+        font-size: 20px
+        font-weight: bold
+        width: 30px
+        margin-left: -8px
+        cursor: pointer
+        text-align: center
+        color: $k1 !important
+        text-decoration: none !important
+        &:hover
+          color: $b1 !important
+      .uploaded_file,
+      .uploaded_image
+        padding: 2px
+        width: auto
+        max-width: 400px
+        max-height: 200px
+        margin-bottom: 5px
+        display: block
+      .warning
+        font-weight: bold
+      .quick_edit
+        text-decoration: underline
+        color: $b2
+        
+      .uploaded_file
+        padding: 7px 5px 8px 7px
+        background: #999
+        color: #fff
+        &:hover
+          background: #fff
+          color: $b1
+      .relation
+        li
+          &:hover
+            .delete
+              opacity: 1
+              +transition-duration(0.5)
+          .delete
+            opacity: 0
+            &:hover
+              color: $b1
+        
+    .cancel
+      margin-left: 20px
+      color: $g1
+      &:hover
+        color: $g3
+        text-decoration: underline
+    .info
+      font-style: italic
+      font-size: 12px
+      color: $g3
+      +text-shadow(#fff)
+      
+  .error_explanation
+    margin-left: 20px
+    label
+      color: red
+      cursor: pointer
+      display: block
+      &:hover
+        color: #ff9900
+
+
+footer
+  padding-bottom: 20px
+  +text-shadow(#000, -1)
+  text-align: center
+  color: gray
+  font-size: 12px
+  line-height: 20px
+  a
+    text-decoration: none
+    &:hover
+      text-decoration: underline
+
+
+input[type="submit"],
+.button
+  cursor: pointer
+  display: inline-block
+  padding: 6px 20px
+  border: 1px solid $b2
+  margin: 20px 0 0
+  background: $b1
+  color: #fff
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
+  font-weight: bold
+  font-size: 18px
+  text-decoration: none
+  +border-radius(5)
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px rgba(255, 255, 255, 0.5), inset 0 12px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.25), inset 0 -12px 25px rgba(0, 0, 0, 0.3)
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px rgba(255, 255, 255, 0.5), inset 0 18px 5px rgba(255, 255, 255, 0.2), inset 0 10px 10px rgba(255, 255, 255, 0.25), inset 0 -12px 25px rgba(0, 0, 0, 0.3)
+  +transition-duration(0.3)
+  +transition-property(background)
+  &:hover
+    background: $b2
+  &:focus,
+  &:active
+    outline: 0
+    background: $b2
+    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4)
+    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.4), inset 0 -1px rgba(255, 255, 255, 0.5), inset 0 -18px rgba(255, 255, 255, 0.1), inset 0 -10px 10px rgba(255, 255, 255, 0.25), inset 0 -12px 25px rgba(0, 0, 0, 0.3)
+    
+
+
+input[type="submit"].alt_button,
+.alt_button
+  display: inline-block
+  padding: 12px 50px
+  +border-radius(4)
+  text-decoration: none
+  border: 1px solid gray
+  font-size: 13px
+  cursor: pointer
+  background: #666
+  padding: 5px 10px
+  box-shadow: inset 0 1px 0 rgba(#AAABAA, 0.7), inset 0 -10px 20px rgba(#333, 0.6)
+  color: $w1
+  +text-shadow(#444, -1)
+  &:hover
+    border-color: $b2
+    box-shadow: inset 0 1px 0 rgba(#fff, 0.4), inset 0 -10px 20px rgba(#333, 0.4)
+    background: $b1    
+  &:active
+    box-shadow: inset 0 -1px 0 rgba(#fff, 0.4), inset 0 10px 20px rgba(#333, 0.4)
+    +text-shadow(#444)
+  &:focus
+    outline: 0
+    +transition-duration(1)
+    +transition-property(box-shadow)
+    box-shadow: 0 1px 12px $b2
+
+#flash_massages
+  display: block
+  padding: 5px 20px
+  margin: -45px 0 10px 0
+  border: 1px solid $b1
+  +bg-gradient($b1, $b2)
+  color: $w1
+  +text-shadow(#0068B3)
+  overflow: hidden
+  height: 100%
+  +transition-duration(0.6)
+  +transition-delay
+  opacity: 0
+  &.show
+    opacity: 1
+    margin-top: 0px
+
+
+.pagination
+  a, span, em
+    @extend .alt_button
+  
+  span
+    color: gray
+    cursor: default
+    &:hover
+      background: #666
+      border-color: #999
+  
+  .page_number
+    background: transparent
+    color: #3E3E3E
+    border-color: #B7B7B7
+    +text-shadow(#fff)
+    box-shadow: inset 0 1px 0 rgba(#fff, 0.4), inset 0 -10px 10px rgba(#333, 0.1)
+    &:hover
+      color: #fff
+      +text-shadow(#999)
+      
+  em
+    font-style: normal
+    font-weight: bold
+    cursor: default
+    background: #B1B1B1
+
+.basic_info_list
+  font-size: 20px
+  font-weight: bold
+  line-height: 40px
+  color: $g3
+  +text-shadow(#fff)
+  li
+    padding-left: 10px
+    border-top: 1px solid $g2
+    +transition-duration
+    &:first-child
+      border: none
+    &:hover
+      +transition-duration(0)
+      color: $b2
+      a
+        +transition-duration(0)
+    &:hover,
+    &:hover + li
+      border-color: $b1
+    a
+      +transition-duration
+      display: block
+
+@media (max-width: 800px)
+
+
+@media (max-width: 960px)
+  .default_columns
+    thead th:nth-last-child(2),
+    tbody td:nth-last-child(2),
+    thead th:nth-last-child(3),
+    tbody td:nth-last-child(3)
+      display: none
+
+
+// MooEditable
+
+@import MooEditable
+
+.mooeditable-container
+  @extend .default_input
+  background: white
+  border: 1px solid #BBB
+  .toolbar-separator
+    background: $g2
+  .mooeditable-ui-toolbar
+    +border-radius(2)
+    margin-top: 2px
+  button
+    background: white !important
+    padding: 2px 4px 4px 4px !important
+    box-shadow: none
+    &:hover
+      background: $g2 !important
+      
+      
+// Datepicker TODO: style div.datepicker
+
+.datepicker
+  position: absolute
+  width: 172px
+  padding: 5px 10px
+  background: #E5E5E5
+  border: 1px solid #C1C2DC
+  +box-inner-shadow(0, 1, 0, #fff)
+  +border-radius(2)
+  +text-shadow(#fff)
+  color: #535b6f
+  .header
+    position: relative
+    margin-bottom: 5px
+    padding-bottom: 5px
+    border-bottom: 1px solid #C1C2DC
+    +box-shadow(0, 1, 0, #fff)
+    .title
+      padding-top: 3px
+      text-align: center
+      margin: 0 18px 0 18px
+    .previous, .next, .closeButton
+      position: absolute
+      cursor: pointer
+      overflow: hidden
+      width: 12px
+      top: 2px
+      font-weight: bold
+      &:hover
+        color: #2F4D7B
+    .previous
+      left: 4px
+    .next
+      right: 4px
+    .closeButton
+      display: none
+      right: 0px
+      top: 0px
+  .titles
+    font-weight: bold
+    font-size: 12px
+    .title.day
+      color: #535b6f
+  .body
+    position: relative
+    top: 0px
+    width: 170px
+    height: 156px
+    overflow: hidden
+    > div
+      margin-top: 2px
+      margin-left: 2px
+    
+  .time
+    position: relative
+    width: 100%
+    height: 100%
+    .hour, .separator, .minutes
+      color: #535B6F
+      background: #fff
+      width: 50px
+      font-size: 32px
+      position: absolute
+      top: 10px
+      text-align: center
+      padding: 2px
+    .hour,
+    .minutes
+      +box-shadow(0, 0, 1, #2F4D7B)
+      +text-shadow(#ccc)
+      margin-top: 8px
+      border: none
+      left: 15px
+    .separator
+      background: transparent
+      border: 0px
+      width: 10px
+      left: 76px
+    .minutes
+      left: 95px
+    .ok
+      +box-shadow(0, 0, 1, #2F4D7B)
+      +text-shadow(#ccc)
+      color: #535B6F
+      background: #fff
+      position: absolute
+      border: none
+      cursor: pointer
+      top: 73px
+      left: 15px
+      width: 134px
+      padding: 4px 0
+      font-size: 16px
+      &:hover,
+      &:focus,
+      &:active
+        background-color: #2F4D7B
+        color: #fff
+        +text-shadow(#000)
+        +box-shadow(0, 0, 1, #fff)
+  .days
+    .day
+      float: left
+      text-align: center
+      overflow: hidden
+      width: 23px
+      margin: 0 1px 1px 0
+      color: #262626
+    .day0
+      margin-right: 0
+    .week5 .day
+      margin-bottom: 0
+    .week .day
+      cursor: pointer
+      &:hover
+        +box-shadow(0, 0, 1, #2F4D7B)
+        background-color: #fff
+        color: #2F4D7B
+        +text-shadow(#ccc)
+        
+    .otherMonth
+      color: #aaa
+    .selected
+      background-color: #2F4D7B
+      color: #fff
+      +text-shadow(#000)
+      +box-shadow(0, 0, 1, #fff)
+  .months
+    .month
+      float: left
+      cursor: pointer
+      text-align: center
+      margin-top: 2px
+      padding-top: 3px
+      padding-bottom: 3px
+      width: 55px
+      overflow: hidden
+      margin: 0 1px 1px 0
+    .month3, .month6, .month9, .month12
+      margin-right: 0
+    .month10, .month11, .month12
+      margin-bottom: 0
+    .month:hover
+      +box-shadow(0, 0, 1, #2F4D7B)
+      background-color: #fff
+      color: #2F4D7B
+      +text-shadow(#ccc)
+    .selected
+      background-color: #2F4D7B
+      color: #fff
+      +text-shadow(#000)
+      +box-shadow(0, 0, 1, #fff)
+  .years
+    .year
+      float: left
+      cursor: pointer
+      text-align: center
+      margin-top: 2px
+      padding-top: 3px
+      padding-bottom: 3px
+      width: 32px
+      font-size: 12px
+      overflow: hidden
+      margin: 0 1px 1px 0
+    .year4, .year9, .year14, .year19
+      margin-right: 0
+    .year15, .year16, .year17, .year18, .year19
+      margin-bottom: 0
+    .year:hover
+      +box-shadow(0, 0, 1, #2F4D7B)
+      background-color: #fff
+      color: #2F4D7B
+      +text-shadow(#ccc)
+    .selected
+      background-color: #2F4D7B
+      color: #fff
+      +text-shadow(#000)
+      +box-shadow(0, 0, 1, #fff)
+  .unavailable
+    background: none !important
+    color: #fbb !important
+    cursor: default !important
+
+.hide
+  display: none !important
+  
+  
+#ajax_holder
+  text-indent: -9999px
+  height: 60px
+  opacity: 0
+  width: 120px
+  margin-left: -60px
+  position: fixed
+  top: -50px
+  left: 50%
+  z-index: 4000
+  +border-bottom-radius(4)
+  background: url(bhf/ajax_loader.gif) no-repeat center 16px, -webkit-gradient(linear, left top, left bottom, from($b1), to($b2))
+  border: 1px solid $b1
+  +box-shadow(0, 1, 4)
+  +transition-duration(0.6)
+  &.loading
+    height: 100px
+    opacity: 1
+    top: -4px
+    
+    
+    
+  
+#wmd-button-bar 
+  width: 100%
+  background: $w1
+  padding: 0 10px 4px 0
+  margin: 0 -6px 4px -6px
+  @extend .default_input
+#wmd-input 
+  height: 400px
+  width: 100%
+
+#wmd-preview,
+#wmd-output 
+  @extend .default_input
+  margin: 0 -6px 0 -6px
+  background-color: #F5F5F5
+  padding: 3px 5px
+  margin-bottom: 10px
+  line-height: 22px
+
+.wmd-panel
+  width: 700px !important
+
+#wmd-preview
+  img
+    display: block
+  ul,
+  ol
+    padding-left: 30px
+  ul,
+  ol,
+  h1, h2, h3, h4, h5, h6,
+  p
+    padding-bottom: 10px
+  a
+    text-decoration: underline
+    color: $b2
+    font-weight: bold
+    
+.preview_switch
+  span
+    float: right
+    margin-left: 10px
+    cursor: pointer
+    &.active
+      color: $b2
+
+#wmd-output 
+  font-size: 12px
+  line-height: 16px
+  background: $g3
+  color: $w2
+  code
+    font-family: Monaco,Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Courier New",Courier,monospace
+    white-space: pre-wrap
+
+#wmd-button-row 
+  position: relative 
+  margin-left: 5px
+  margin-right: 5px
+  margin-bottom: 5px
+  margin-top: 10px
+  padding: 0px  
+  height: 20px
+
+
+.wmd-spacer
+  width: 1px 
+  height: 20px 
+  margin-left: 14px
+  position: absolute
+  background-color: Silver
+  display: inline-block 
+  list-style: none
+
+.wmd-button
+  width: 20px 
+  height: 20px 
+  margin-left: 5px
+  margin-right: 5px
+  position: absolute
+  background-image: url(wmd-buttons.png)
+  background-repeat: no-repeat
+  background-position: 0px 0px
+  display: inline-block 
+  list-style: none
+  > a
+    width: 20px 
+    height: 20px 
+    margin-left: 5px
+    margin-right: 5px
+    position: absolute
+    display: inline-block 
+
+// TODO: style this properly
+
+#wmd-button-bar
+  #wmd-bold-button
+    left: 0px
+    background-position: 0px 0
+  #wmd-italic-button
+    left: 25px
+    background-position: -20px 0
+  #wmd-spacer1
+    left: 50px
+  #wmd-link-button
+    left: 75px
+    background-position: -40px 0
+  #wmd-quote-button
+    left: 100px
+    background-position: -60px 0
+  #wmd-code-button
+    left: 125px
+    background-position: -80px 0
+  #wmd-image-button
+    left: 150px
+    background-position: -100px 0
+  #wmd-spacer2
+    left: 175px
+  #wmd-olist-button
+    left: 200px
+    background-position: -120px 0
+  #wmd-ulist-button
+    left: 225px
+    background-position: -140px 0
+  #wmd-heading-button
+    left: 250px
+    background-position: -160px 0
+  #wmd-hr-button
+    left: 275px
+    background-position: -180px 0
+  #wmd-spacer3
+    left: 300px
+  #wmd-undo-button
+    left: 325px
+    background-position: -200px 0
+  #wmd-redo-button
+    left: 350px
+    background-position: -220px 0
+  #wmd-help-button
+    right: 0px
+    background-position: -240px 0
+
+.wmd-prompt-background
+  background-color: #000
+
+.wmd-prompt-dialog
+  border: 1px solid #999999
+  background-color: #F5F5F5
+  > div 
+    font-size: 0.8em
+    font-family: arial, helvetica, sans-serif
+  > form
+    input[type="text"] 
+      border: 1px solid #999999
+      color: black
+  > form
+    input[type="button"]
+      border: 1px solid #888888
+      font-size: 0.8em
+      font-weight: bold
+
+
+// TODO: bigger ration buttons
+
+
+// TODO: remove me
+.translation_missing
+  color: red !important