:css
  input[type='file'] { display: none }
  /*.dropbox { background-color: transparent }*/
  /*.files img { max-height: 50px }*/
  .green-background { background-color: #607d8b }
  .card.small.uploaded { width: 100%; float: left; margin-top: 20px; margin-right: 10px; }
  .card .card-action { padding: 0px; margin: 0px; bottom: 5px }
  .card .card-action a { margin-right: 0px; margin-bottom: -5px; margin-left: 10px}
  .card-action .row { margin-bottom: 0px }
  /*.card .card-image { height: 150px }*/
  .card .card-image.uploaded { position: relative; max-height: 75% }
  .progress { position: absolute }
  .preview img, .card-image img { max-width: 100%; max-height: 100% }
  .card .card-content .card-title.activator { font-size: 7px; color: black; background-color: transparent; line-height: 8px }
  .progress { width: 70% }
  .card .card-title { font-size: 9px }
  .activator:hover { cursor: pointer }

  @media only screen and (max-width: 320px)                           { .card.small.uploaded { height: 75px } }
  @media only screen and (min-width: 321px) and (max-width: 480px)    { .card.small.uploaded { height: 100px } }
  @media only screen and (min-width: 481px) and (max-width: 768px)    { .card.small.uploaded { height: 125px } }
  @media only screen and (min-width: 769px) and (max-width: 960px)    { .card.small.uploaded { height: 175px } }
  @media only screen and (min-width: 961px) and (max-width: 992px)    { .card.small.uploaded { height: 230px } }
  @media only screen and (min-width: 993px) and (max-width: 1024px)   { .card.small.uploaded { height: 150px } }
  @media only screen and (min-width: 1025px) and (max-width: 1240px)  { .card.small.uploaded { height: 190px } }
  @media only screen and (min-width: 1241px)                          { .card.small.uploaded { height: 230px } }
  /*@media only screen and (min-width: 1600px)                          { .card .card-image.uploaded { max-height: 85% } }*/

  .card .card-image.uploaded { height: 85% }

- unless f
  = simple_form_for(resource.media.build, html: { id: "fileupload", role: 'form', multipart: true } ) do |m|
    = render partial: 'media/fields', locals: { m: m}

- else
  -# this is a really bad hack!
  -# but the (extra) form command totally f***'s up the parent form
  - simple_form_for(resource.media.build, html: { id: "fileupload", role: 'form', multipart: true } ) do |m|
    - @m = m
  = render partial: 'media/fields', locals: {m: @m}

/ Modal Structure
#modal1.modal
  .modal-content{ style: "height: 90%;overflow: scroll;" }
    %h4 Fill this

  .modal-footer{ style: "height: 10%; bottom: 0px; "}
    %a.close-modal.waves-effect.waves-green.btn{ href: "#!"}= t("submit")