mumuki-laboratory 7.5.0

data/app/views/layouts/exercise_inputs/editors/_single_choice.html.erb

@@ -0,0 +1,8 @@
+<div class="form-group">
+  <% @exercise.pretty_choices.each do |choice| %>
+    <div class="field radio complementary complementary-radio">
+      <%= form.radio_button(:content, choice.value, checked: checked?(choice, @current_content), id: choice.id, required: true) %>
+      <%= label_tag(choice.id, choice.text) %>
+    </div>
+  <% end %>
+</div>

data/app/views/layouts/exercise_inputs/editors/_text.html.erb

@@ -0,0 +1,7 @@
+<div class="field form-group mu-editor-one-liner">
+  <%= form.editor :content, 'dynamic',
+                  class: 'form-control editor',
+                  value: @current_content,
+                  style: 'display: none',
+                  data: {lines: 1} %>
+</div>

data/app/views/layouts/exercise_inputs/editors/_upload.html.erb

@@ -0,0 +1,4 @@
+<div class="form-group">
+  <textarea id="solution_content" type="text" name="solution[content]" style="display: none"></textarea>
+  <input id="upload-input" type="file" class="upload submission-control" size="5120" accept=".<%= @exercise.language.extension %>" />
+</div>

data/app/views/layouts/exercise_inputs/forms/_form.html.erb

@@ -0,0 +1,14 @@
+<% if current_user? %>
+  <% if exercise.console? %>
+    <%= hidden_field_tag(:stateful_console, exercise.stateful_console?) %>
+    <%= hidden_field_tag(:prompt, exercise.prompt) %>
+  <% end %>
+  <%= render_exercise_input_form exercise %>
+
+<% else %>
+  <p><%= t :you_must_sign_in_before_submitting %></p>
+
+  <div class="actions">
+    <%= login_button class: 'btn btn-success btn-block' %>
+  </div>
+<% end %>

data/app/views/layouts/exercise_inputs/forms/_interactive_form.html.erb

@@ -0,0 +1,50 @@
+<%= hidden_field_tag :console_endpoint, exercise_tries_path(exercise) %>
+<%= hidden_field_tag :historical_queries, @assignment.queries_with_results.to_json %>
+
+<% if exercise.extra_visible? %>
+  <ul class="nav nav-tabs" role="tablist">
+    <%= console_tab %>
+    <% if exercise.extra_visible? %>
+      <%= extra_code_tab %>
+    <% end %>
+  </ul>
+<% end %>
+
+<div class="tab-content">
+  <div role="tabpanel" class="tab-pane mu-input-panel fade in active <%= pending_messages_filter(@assignment) %>" id="console">
+    <% if @assignment.pending_messages? %>
+        <span class="pending-messages-text"> <%= t :pending_messages_explanation %>
+          <a href="javascript:{}"
+             onclick="mumuki.Chat.submitMessagesForm('<%= messages_url(exercise) %>', '<%= read_messages_path(exercise) %>')"
+             class="<%= hidden_pending(@assignment) %>"
+             data-waiting="<%= t(:sending_solution) %>">
+            <%= t :get_messages %>
+          </a>
+        </span>
+    <% end %>
+    <div class="console">
+    </div>
+    <div class="mu-overlapped">
+      <a class="console-reset submission-reset"><%= restart_icon %></a>
+    </div>
+   </div>
+  <div role="tabpanel" class="tab-pane mu-input-panel fade mu-elipsis" id="visible-extra">
+    <%= @assignment.extra_preview_html %>
+  </div>
+  <div role="tabpanel" class="tab-pane mu-input-panel fade" id="messages">
+    <%= render partial: 'layouts/messages', locals: {messages: @assignment.messages} unless @assignment.pending? %>
+  </div>
+</div>
+<%# FIXME Duplicated view in problem_form %>
+<% content_for :submission_results do %>
+  <% if current_user? %>
+    <div class="row">
+      <div class="col-md-12 submission-results">
+        <% if @assignment.solved?  %>
+          <%= render partial: 'exercise_solutions/results',
+                     locals: {assignment: @assignment, guide_finished_by_solution: false} %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/views/layouts/exercise_inputs/forms/_kids_form.html.erb

@@ -0,0 +1,12 @@
+<%= form_for([exercise, @solution],
+             remote: true,
+             html: {role: 'form', class: 'new_solution mu-editor mu-editor-overlap'}) do |f| %>
+  <%= render_exercise_input_editor f, exercise %>
+
+  <div class="actions mu-kids-submit-button">
+    <%= render_submit_button(@assignment) %>
+  </div>
+  <div class="actions mu-kids-reset-button"></div>
+  <img class="mu-kids-compass-rose" src="/compass_rose.svg">
+  <div class="mu-kids-overlay" style="display: none"></div>
+<% end %>

data/app/views/layouts/exercise_inputs/forms/_playground_form.html.erb

@@ -0,0 +1,26 @@
+<%= hidden_field_tag :console_endpoint, exercise_queries_path(exercise) %>
+
+<% if exercise.extra_visible? %>
+  <ul class="nav nav-tabs" role="tablist">
+    <%= console_tab active: true %>
+    <% if exercise.extra_visible? %>
+      <%= extra_code_tab %>
+    <% end %>
+  </ul>
+<% end %>
+
+<div class="tab-content">
+  <div role="tabpanel" class="tab-pane mu-input-panel in active fade" id="console">
+    <div class="console">
+    </div>
+    <div class="mu-overlapped">
+      <a class="console-reset submission-reset"><%= restart_icon %></a>
+    </div>
+  </div>
+  <div role="tabpanel" class="tab-pane mu-input-panel fade mu-elipsis" id="visible-extra">
+    <%= @assignment.extra_preview_html %>
+  </div>
+</div>
+<div class="actions">
+  <%= next_exercise_button exercise %>
+</div>

data/app/views/layouts/exercise_inputs/forms/_problem_form.html.erb

@@ -0,0 +1,73 @@
+<%= hidden_field_tag(:exercise_language, exercise.highlight_mode) %>
+<%= hidden_field_tag :console_endpoint, exercise_queries_path(exercise) %>
+
+<% if should_render_problem_tabs? exercise, current_user %>
+  <ul class="nav nav-tabs" role="tablist">
+    <li role="presentation" class="active">
+      <a data-target="#editor" aria-controls="editor" tabindex="0" role="tab" data-toggle="tab" class="editor-tab"><%= fa_icon 'pencil-square' %> <%= t :solution %></a>
+    </li>
+    <% if exercise.extra_visible? %>
+      <%= extra_code_tab %>
+    <% end %>
+    <% if exercise.queriable? %>
+      <%= console_tab %>
+    <% end %>
+    <%= messages_tab exercise %>
+  </ul>
+<% end %>
+
+<div class="tab-content">
+  <div role="tabpanel" class="tab-pane mu-input-panel fade in active" id="editor">
+    <% if @assignment.pending_messages? %>
+        <span class="pending-messages-text"> <%= t :pending_messages_explanation %>
+          <a href="javascript:{}"
+             onclick="mumuki.Chat.submitMessagesForm('<%= messages_url(exercise) %>', '<%= read_messages_path(exercise) %>')"
+             class="<%= hidden_pending(@assignment) %>"
+             data-waiting="<%= t(:sending_solution) %>">
+            <%= t :get_messages %>
+          </a>
+        </span>
+    <% end %>
+    <%= form_for([exercise, @solution],
+                 remote: true,
+                 html: {role: 'form', class: "new_solution mu-editor mu-editor-overlap #{pending_messages_filter(@assignment)}"}) do |f| %>
+      <%= render_exercise_input_editor f, exercise %>
+
+      <div class="actions">
+        <%= render_submit_button(@assignment) %>
+      </div>
+    <% end %>
+  </div>
+  <div role="tabpanel" class="tab-pane mu-input-panel fade" id="console">
+    <div class="mu-overlapped-container">
+      <div class="console">
+      </div>
+      <div class="mu-overlapped">
+        <a class="console-reset submission-reset"><%= restart_icon %></a>
+      </div>
+    </div>
+    <div class="field checkbox complementary complementary-checkbox mu-editor">
+      <input checked="checked" data-index="1" id="include_solution" type="checkbox">
+      <label for="include_solution"><p><%= t(:load_solution_into_console) %></p></label>
+    </div>
+  </div>
+  <div role="tabpanel" class="tab-pane mu-input-panel fade mu-elipsis" id="visible-extra">
+    <%= @assignment.extra_preview_html %>
+  </div>
+  <div role="tabpanel" class="tab-pane mu-input-panel fade" id="messages">
+    <%= render partial: 'layouts/messages', locals: {messages: @assignment.messages} unless @assignment.pending? %>
+  </div>
+</div>
+
+<% content_for :submission_results do %>
+  <% if current_user? %>
+    <div class="row">
+      <div class="col-md-12 submission-results">
+        <% unless @assignment.pending? %>
+          <%= render partial: 'exercise_solutions/results',
+                     locals: {assignment: @assignment} %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/views/layouts/exercise_inputs/forms/_reading_form.html.erb

@@ -0,0 +1,3 @@
+<div class="actions">
+  <%= next_exercise_button exercise %>
+</div>

data/app/views/layouts/exercise_inputs/layouts/_input_bottom.html.erb

@@ -0,0 +1,15 @@
+<div class="row">
+  <div class="col-md-12 exercise-assignment">
+    <%= yield :assignment %>
+  </div>
+</div>
+<div class="row">
+  <div class="col-md-12 ace-editor-col">
+    <%= yield :exercise_content %>
+  </div>
+</div>
+
+<div class="scroll-pin">
+  <%= yield :submission_results %>
+  <%= render partial: 'layouts/submission_result_error' %>
+</div>

data/app/views/layouts/exercise_inputs/layouts/_input_kids.html.erb

@@ -0,0 +1,51 @@
+<% content_for :no_container do %>
+
+    <div <%= turbolinks_enable_for exercise %>>
+
+      <div class="mu-kids-landscape-support container-fluid">
+        <img class="mu-kids-character-animation"/>
+        <h3><%= t :only_landscape_support %></h3>
+      </div>
+
+      <div class="mu-kids-exercise container-fluid">
+
+        <div class="mu-kids-exercise-description">
+          <div class="mu-kids-character">
+            <%= render partial: 'layouts/kids', locals: {exercise: exercise} %>
+          </div>
+          <div class="mu-kids-blocks">
+            <%= yield :exercise_content %>
+          </div>
+        </div>
+
+        <div class="mu-kids-states mu-multiple-scenarios">
+          <div class="mu-scenarios">
+            <a class="mu-scenario-control previous hidden">
+              <%= fa_icon('caret-left', class: 'fa-lg fa-2x') %>
+            </a>
+            <a class="mu-scenario-control next hidden">
+              <%= fa_icon('caret-right', class: 'fa-lg fa-2x') %>
+            </a>
+            <div class="mu-kids-state mu-state-initial mu-kids-gbs-board-initial mu-initial-state">
+              <div class="mu-initial-state-header">
+                <strong id="mu-initial-state-text"><%= t :initial_state %></strong>
+                <strong id="mu-actual-state-text"><%= t :actual_state %></strong>
+              </div>
+              <div class="mu-kids-state-image"><%= exercise.initial_state&.html_safe %></div>
+            </div>
+            <div class="mu-kids-state mu-state-final mu-final-state">
+              <strong><%= t :expected_state %></strong>
+              <div class="mu-kids-state-image"><%= exercise.final_state&.html_safe %></div>
+            </div>
+          </div>
+          <ol class="indicators"></ol>
+        </div>
+
+      </div>
+
+      <%= render partial: 'layouts/modals/kids_results', locals: {exercise: exercise, assignment: @assignment} %>
+      <%= render partial: 'layouts/modals/kids_results_aborted' %>
+      <%= render partial: 'layouts/modals/kids_context', locals: {exercise: exercise, assignment: @assignment} %>
+
+    </div>
+<% end %>

data/app/views/layouts/exercise_inputs/layouts/_input_right.html.erb

@@ -0,0 +1,13 @@
+<div class="row">
+  <div class="col-md-6 exercise-assignment">
+    <%= yield :assignment %>
+  </div>
+  <div class="col-md-6 ace-editor-col">
+    <%= yield :exercise_content %>
+  </div>
+</div>
+
+<div class="scroll-pin">
+  <%= yield :submission_results %>
+  <%= render partial: 'layouts/submission_result_error' %>
+</div>

data/app/views/layouts/exercise_inputs/read_only_editors/_code.html.erb

@@ -0,0 +1,3 @@
+<div class="field form-group">
+  <%= read_only_editor content, exercise.language.name %>
+</div>

data/app/views/layouts/exercise_inputs/read_only_editors/_custom.html.erb

@@ -0,0 +1,6 @@
+<%= render_runner_assets exercise.language, :editor %>
+
+<%= render_custom_editor(exercise, true) %>
+<%= hidden_field :content, :custom_editor, id: "mu-custom-editor-value", value: content %>
+<%= hidden_field :default_content, :custom_editor, id: "mu-custom-editor-default-value", value: exercise.default_content %>
+<%= hidden_field :content_extra, :custom_editor, id: "mu-custom-editor-extra", value: exercise.extra %>

data/app/views/layouts/exercise_inputs/read_only_editors/_free_form.html.erb

@@ -0,0 +1,4 @@
+<div class="form-group">
+  <%= hidden_field_tag :solution_content, content %>
+  <%= raw exercise.free_form_editor_source %>
+</div>

data/app/views/layouts/exercise_inputs/read_only_editors/_multiple_choice.html.erb

@@ -0,0 +1,8 @@
+<div class="form-group">
+  <% exercise.pretty_choices.each do |choice| %>
+    <div class="field checkbox complementary complementary-checkbox">
+      <%= check_box_tag(choice.id, '1', checked?(choice, content), disabled: true, class: 'solution-choice mu-read-only', 'data-index' => choice.index) %>
+      <%= label_tag(choice.id, choice.text) %>
+    </div>
+  <% end %>
+</div>

data/app/views/layouts/exercise_inputs/read_only_editors/_multiple_files.html.erb

@@ -0,0 +1,29 @@
+<div class="field form-group editor-code">
+
+  <% files = exercise.files_for(content) %>
+
+  <div class="editor-files">
+    <span class="files-tabs">
+      <ul class="nav nav-tabs">
+        <% files.each_with_index do |file, index| %>
+          <li role="presentation" class="file-tab <%= 'active' if index == 0 %>" data-target="#editor-file-<%= index %>" tabindex='0' data-toggle='tab'>
+            <a class="file-name" href="#"><%= file.name %></a>
+          </li>
+        <% end %>
+      </ul>
+    </span>
+
+    <%= multifile_hidden_inputs %>
+
+    <div class="tab-content">
+      <% files.each_with_index do |file, index| %>
+        <div role="tabpanel" class="file-editor tab-pane mu-input-panel <%= 'fade in active' if index == 0 %>" id="editor-file-<%= index %>">
+          <div class=<%="content[#{file.name}]"%>>
+            <%= read_only_editor file.content, file.highlight_mode %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+
+  </div>
+</div>

data/app/views/layouts/exercise_inputs/read_only_editors/_single_choice.html.erb

@@ -0,0 +1,8 @@
+<div class="form-group">
+  <% exercise.pretty_choices.each do |choice| %>
+    <div class="field radio complementary complementary-radio">
+      <%= radio_button_tag :content, choice.value, checked?(choice, content), disabled: true, class: 'mu-read-only' %>
+      <%= label_tag(choice.id, choice.text) %>
+    </div>
+  <% end %>
+</div>

data/app/views/layouts/exercise_inputs/read_only_editors/_text.erb

@@ -0,0 +1,3 @@
+<div class="field form-group">
+  <%= Mumukit::ContentType::Markdown.to_html(Mumukit::ContentType::Markdown.code(content)) %>
+</div>

data/app/views/layouts/mailer.html.erb

@@ -0,0 +1,487 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+<head>
+  <!-- NAME: SELL PRODUCTS -->
+  <!--[if gte mso 15]>
+  <xml>
+    <o:OfficeDocumentSettings>
+      <o:AllowPNG/>
+      <o:PixelsPerInch>96</o:PixelsPerInch>
+    </o:OfficeDocumentSettings>
+  </xml>
+  <![endif]-->
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <style type="text/css">
+    p{
+      margin:10px 0;
+      padding:0;
+    }
+    table{
+      border-collapse:collapse;
+    }
+    h1,h2,h3,h4,h5,h6{
+      display:block;
+      margin:0;
+      padding:0;
+    }
+    img,a img{
+      border:0;
+      height:auto;
+      outline:none;
+      text-decoration:none;
+    }
+    body,#bodyTable,#bodyCell{
+      height:100%;
+      margin:0;
+      padding:0;
+      width:100%;
+    }
+    .muMailPreviewText{
+      display:none !important;
+    }
+    #outlook a{
+      padding:0;
+    }
+    img{
+      -ms-interpolation-mode:bicubic;
+    }
+    table{
+      mso-table-lspace:0pt;
+      mso-table-rspace:0pt;
+    }
+    .ReadMsgBody{
+      width:100%;
+    }
+    .ExternalClass{
+      width:100%;
+    }
+    p,a,li,td,blockquote{
+      mso-line-height-rule:exactly;
+    }
+    a[href^=tel],a[href^=sms]{
+      color:inherit;
+      cursor:default;
+      text-decoration:none;
+    }
+    p,a,li,td,body,table,blockquote{
+      -ms-text-size-adjust:100%;
+      -webkit-text-size-adjust:100%;
+    }
+    .ExternalClass,.ExternalClass p,.ExternalClass td,.ExternalClass div,.ExternalClass span,.ExternalClass font{
+      line-height:100%;
+    }
+    a[x-apple-data-detectors]{
+      color:inherit !important;
+      text-decoration:none !important;
+      font-size:inherit !important;
+      font-family:inherit !important;
+      font-weight:inherit !important;
+      line-height:inherit !important;
+    }
+    .templateContainer{
+      max-width:600px !important;
+    }
+    a.muMailButton{
+      display:block;
+    }
+    .muMailImage{
+      vertical-align:bottom;
+    }
+    .muMailTextContent{
+      word-break:break-word;
+    }
+    .muMailTextContent img{
+      height:auto !important;
+    }
+    .muMailDividerBlock{
+      table-layout:fixed !important;
+    }
+    /*
+    @tab Page
+    @section Heading 1
+    @style heading 1
+    */
+    h1{
+      /*@editable*/color:#222222;
+      /*@editable*/font-family:Helvetica;
+      /*@editable*/font-size:40px;
+      /*@editable*/font-style:normal;
+      /*@editable*/font-weight:bold;
+      /*@editable*/line-height:150%;
+      /*@editable*/letter-spacing:normal;
+      /*@editable*/text-align:center;
+    }
+    /*
+    @tab Page
+    @section Heading 2
+    @style heading 2
+    */
+    h2{
+      /*@editable*/color:#222222;
+      /*@editable*/font-family:Helvetica;
+      /*@editable*/font-size:34px;
+      /*@editable*/font-style:normal;
+      /*@editable*/font-weight:bold;
+      /*@editable*/line-height:150%;
+      /*@editable*/letter-spacing:normal;
+      /*@editable*/text-align:left;
+    }
+    /*
+    @tab Page
+    @section Heading 3
+    @style heading 3
+    */
+    h3{
+      /*@editable*/color:#444444;
+      /*@editable*/font-family:Helvetica;
+      /*@editable*/font-size:22px;
+      /*@editable*/font-style:normal;
+      /*@editable*/font-weight:bold;
+      /*@editable*/line-height:150%;
+      /*@editable*/letter-spacing:normal;
+      /*@editable*/text-align:left;
+    }
+    /*
+    @tab Page
+    @section Heading 4
+    @style heading 4
+    */
+    h4{
+      /*@editable*/color:#999999;
+      /*@editable*/font-family:Georgia;
+      /*@editable*/font-size:20px;
+      /*@editable*/font-style:italic;
+      /*@editable*/font-weight:normal;
+      /*@editable*/line-height:125%;
+      /*@editable*/letter-spacing:normal;
+      /*@editable*/text-align:left;
+    }
+    /*
+    @tab Header
+    @section Header Container Style
+    */
+    #templateHeader{
+      /*@editable*/background-color:#e6e6e6;
+      /*@editable*/background-image:url(<%= Mumukit::Platform.laboratory.url_for('/email-banner.png') %>);
+      /*@editable*/background-repeat:no-repeat;
+      /*@editable*/background-position:center;
+      /*@editable*/background-size:cover;
+      /*@editable*/border-top:0;
+      /*@editable*/border-bottom:0;
+      /*@editable*/padding-top:45px;
+      /*@editable*/padding-bottom:45px;
+    }
+    /*
+    @tab Header
+    @section Header Interior Style
+    */
+    .headerContainer{
+      /*@editable*/background-color:#transparent;
+      /*@editable*/background-image:none;
+      /*@editable*/background-repeat:no-repeat;
+      /*@editable*/background-position:center;
+      /*@editable*/background-size:cover;
+      /*@editable*/border-top:0;
+      /*@editable*/border-bottom:0;
+      /*@editable*/padding-top:0;
+      /*@editable*/padding-bottom:0;
+    }
+    /*
+    @tab Header
+    @section Header Text
+    */
+    .headerContainer .muMailTextContent,.headerContainer .muMailTextContent p{
+      /*@editable*/color:#808080;
+      /*@editable*/font-family:Helvetica;
+      /*@editable*/font-size:16px;
+      /*@editable*/line-height:150%;
+      /*@editable*/text-align:left;
+    }
+    /*
+    @tab Header
+    @section Header Link
+    */
+    .headerContainer .muMailTextContent a,.headerContainer .muMailTextContent p a{
+      /*@editable*/color:#00ADD8;
+      /*@editable*/font-weight:normal;
+      /*@editable*/text-decoration:underline;
+    }
+    /*
+    @tab Body
+    @section Body Container Style
+    */
+    #templateBody{
+      /*@editable*/background-color:#FFFFFF;
+      /*@editable*/background-image:none;
+      /*@editable*/background-repeat:no-repeat;
+      /*@editable*/background-position:center;
+      /*@editable*/background-size:cover;
+      /*@editable*/border-top:0;
+      /*@editable*/border-bottom:0;
+      /*@editable*/padding-top:36px;
+      /*@editable*/padding-bottom:45px;
+    }
+    /*
+    @tab Body
+    @section Body Interior Style
+    */
+    .bodyContainer{
+      /*@editable*/background-color:transparent;
+      /*@editable*/background-image:none;
+      /*@editable*/background-repeat:no-repeat;
+      /*@editable*/background-position:center;
+      /*@editable*/background-size:cover;
+      /*@editable*/border-top:0;
+      /*@editable*/border-bottom:0;
+      /*@editable*/padding-top:0;
+      /*@editable*/padding-bottom:0;
+    }
+    /*
+    @tab Body
+    @section Body Text
+    */
+    .bodyContainer .muMailTextContent,.bodyContainer .muMailTextContent p{
+      /*@editable*/color:#808080;
+      /*@editable*/font-family:Helvetica;
+      /*@editable*/font-size:16px;
+      /*@editable*/line-height:150%;
+      /*@editable*/text-align:left;
+    }
+    /*
+    @tab Body
+    @section Body Link
+    */
+    .bodyContainer .muMailTextContent a,.bodyContainer .muMailTextContent p a{
+      /*@editable*/color:#00ADD8;
+      /*@editable*/font-weight:normal;
+      /*@editable*/text-decoration:underline;
+    }
+    /*
+    @tab Footer
+    @section Footer Style
+    */
+    #templateFooter{
+      /*@editable*/background-color:#333333;
+      /*@editable*/background-image:none;
+      /*@editable*/background-repeat:no-repeat;
+      /*@editable*/background-position:center;
+      /*@editable*/background-size:cover;
+      /*@editable*/border-top:0;
+      /*@editable*/border-bottom:0;
+      /*@editable*/padding-top:45px;
+      /*@editable*/padding-bottom:63px;
+    }
+    /*
+    @tab Footer
+    @section Footer Interior Style
+    */
+    .footerContainer{
+      /*@editable*/background-color:transparent;
+      /*@editable*/background-image:none;
+      /*@editable*/background-repeat:no-repeat;
+      /*@editable*/background-position:center;
+      /*@editable*/background-size:cover;
+      /*@editable*/border-top:0;
+      /*@editable*/border-bottom:0;
+      /*@editable*/padding-top:0;
+      /*@editable*/padding-bottom:0;
+    }
+    /*
+    @tab Footer
+    @section Footer Text
+    */
+    .footerContainer .muMailTextContent,.footerContainer .muMailTextContent p{
+      /*@editable*/color:#FFFFFF;
+      /*@editable*/font-family:Helvetica;
+      /*@editable*/font-size:12px;
+      /*@editable*/line-height:150%;
+      /*@editable*/text-align:center;
+    }
+    /*
+    @tab Footer
+    @section Footer Link
+    */
+    .footerContainer .muMailTextContent a,.footerContainer .muMailTextContent p a{
+      /*@editable*/color:#FFFFFF;
+      /*@editable*/font-weight:normal;
+      /*@editable*/text-decoration:underline;
+    }
+    @media only screen and (min-width:768px){
+      .templateContainer{
+        width:600px !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      body,table,td,p,a,li,blockquote{
+        -webkit-text-size-adjust:none !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      body{
+        width:100% !important;
+        min-width:100% !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      .muMailImage{
+        width:100% !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      .muMailCartContainer,.muMailCaptionTopContent,.muMailRecContentContainer,.muMailCaptionBottomContent,.muMailTextContentContainer,.muMailBoxedTextContentContainer,.muMailImageGroupContentContainer,.muMailCaptionLeftTextContentContainer,.muMailCaptionRightTextContentContainer,.muMailCaptionLeftImageContentContainer,.muMailCaptionRightImageContentContainer,.muMailImageCardLeftTextContentContainer,.muMailImageCardRightTextContentContainer,.muMailImageCardLeftImageContentContainer,.muMailImageCardRightImageContentContainer{
+        max-width:100% !important;
+        width:100% !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      .muMailBoxedTextContentContainer{
+        min-width:100% !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      .muMailImageGroupContent{
+        padding:9px !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      .muMailCaptionLeftContentOuter .muMailTextContent,.muMailCaptionRightContentOuter .muMailTextContent{
+        padding-top:9px !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      .muMailImageCardTopImageContent,.muMailCaptionBottomContent:last-child .muMailCaptionBottomImageContent,.muMailCaptionBlockInner .muMailCaptionTopContent:last-child .muMailTextContent{
+        padding-top:18px !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      .muMailImageCardBottomImageContent{
+        padding-bottom:9px !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      .muMailImageGroupBlockInner{
+        padding-top:0 !important;
+        padding-bottom:0 !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      .muMailImageGroupBlockOuter{
+        padding-top:9px !important;
+        padding-bottom:9px !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      .muMailTextContent,.muMailBoxedTextContentColumn{
+        padding-right:18px !important;
+        padding-left:18px !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      .muMailImageCardLeftImageContent,.muMailImageCardRightImageContent{
+        padding-right:18px !important;
+        padding-bottom:0 !important;
+        padding-left:18px !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      .mcpreview-image-uploader{
+        display:none !important;
+        width:100% !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      /*
+      @tab Mobile Styles
+      @section Heading 1
+      @tip Make the first-level headings larger in size for better readability on small screens.
+      */
+      h1{
+        /*@editable*/font-size:30px !important;
+        /*@editable*/line-height:125% !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      /*
+      @tab Mobile Styles
+      @section Heading 2
+      @tip Make the second-level headings larger in size for better readability on small screens.
+      */
+      h2{
+        /*@editable*/font-size:26px !important;
+        /*@editable*/line-height:125% !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      /*
+      @tab Mobile Styles
+      @section Heading 3
+      @tip Make the third-level headings larger in size for better readability on small screens.
+      */
+      h3{
+        /*@editable*/font-size:20px !important;
+        /*@editable*/line-height:150% !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      /*
+      @tab Mobile Styles
+      @section Heading 4
+      @tip Make the fourth-level headings larger in size for better readability on small screens.
+      */
+      h4{
+        /*@editable*/font-size:18px !important;
+        /*@editable*/line-height:150% !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      /*
+      @tab Mobile Styles
+      @section Boxed Text
+      @tip Make the boxed text larger in size for better readability on small screens. We recommend a font size of at least 16px.
+      */
+      .muMailBoxedTextContentContainer .muMailTextContent,.muMailBoxedTextContentContainer .muMailTextContent p{
+        /*@editable*/font-size:14px !important;
+        /*@editable*/line-height:150% !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      /*
+      @tab Mobile Styles
+      @section Header Text
+      @tip Make the header text larger in size for better readability on small screens.
+      */
+      .headerContainer .muMailTextContent,.headerContainer .muMailTextContent p{
+        /*@editable*/font-size:16px !important;
+        /*@editable*/line-height:150% !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      /*
+      @tab Mobile Styles
+      @section Body Text
+      @tip Make the body text larger in size for better readability on small screens. We recommend a font size of at least 16px.
+      */
+      .bodyContainer .muMailTextContent,.bodyContainer .muMailTextContent p{
+        /*@editable*/font-size:16px !important;
+        /*@editable*/line-height:150% !important;
+      }
+
+    }	@media only screen and (max-width: 480px){
+      /*
+      @tab Mobile Styles
+      @section Footer Text
+      @tip Make the footer content text larger in size for better readability on small screens.
+      */
+      .footerContainer .muMailTextContent,.footerContainer .muMailTextContent p{
+        /*@editable*/font-size:14px !important;
+        /*@editable*/line-height:150% !important;
+      }
+
+    }</style></head>
+<body>
+  <%= yield %>
+</body>
+</html>