blocks 3.0.0.rc4 → 3.0.0.rc5

data/docs/_sass/_styling_overrides.scss

@@ -0,0 +1,31 @@
+body {
+  font-size: 14px;
+}
+
+.tocify-wrapper {
+  font-size: 14px;
+  & > img {
+    width: 80%;
+    margin: 1.8vw;
+    @media (max-width: $tablet-width) {
+      margin: 6vw;
+    }
+  }
+  & .tocify-subheader .tocify-item>a {
+    font-size: 13px;
+  }
+}
+
+.tocify-wrapper .tocify-item>a, .tocify-wrapper .toc-footer li {
+  padding: 5px $nav-padding 5px $nav-padding;
+}
+
+ul.search-results {
+  padding: 0;
+}
+
+.content > aside, aside.warning, aside.success {
+  text-shadow: none;
+  color: #FFFFFF;
+  font-weight: 500;
+}

data/docs/_sass/_syntax.scss

@@ -0,0 +1,78 @@
+.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight, .highlight .w {
+  color: #f8f8f2;
+  background-color: #272822;
+}
+.highlight .err {
+  color: #272822;
+  background-color: #f92672;
+}
+.highlight .c, .highlight .cd, .highlight .cm, .highlight .c1, .highlight .cs {
+  color: #75715e;
+}
+.highlight .cp {
+  color: #f4bf75;
+}
+.highlight .nt {
+  color: #f4bf75;
+}
+.highlight .o, .highlight .ow {
+  color: #f8f8f2;
+}
+.highlight .p, .highlight .pi {
+  color: #f8f8f2;
+}
+.highlight .gi {
+  color: #a6e22e;
+}
+.highlight .gd {
+  color: #f92672;
+}
+.highlight .gh {
+  color: #66d9ef;
+  background-color: #272822;
+  font-weight: bold;
+}
+.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
+  color: #ae81ff;
+}
+.highlight .kc {
+  color: #fd971f;
+}
+.highlight .kt {
+  color: #fd971f;
+}
+.highlight .kd {
+  color: #fd971f;
+}
+.highlight .s, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
+  color: #a6e22e;
+}
+.highlight .sr {
+  color: #a1efe4;
+}
+.highlight .si {
+  color: #cc6633;
+}
+.highlight .se {
+  color: #cc6633;
+}
+.highlight .nn {
+  color: #f4bf75;
+}
+.highlight .nc {
+  color: #f4bf75;
+}
+.highlight .no {
+  color: #f4bf75;
+}
+.highlight .na {
+  color: #66d9ef;
+}
+.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mb, .highlight .mx {
+  color: #a6e22e;
+}
+.highlight .ss {
+  color: #a6e22e;
+}

data/docs/_sass/_variable_overrides.scss

@@ -0,0 +1,10 @@
+$main-bg: #F9F9F9;
+
+$nav-bg: #BEBEBE;
+$nav-active-bg: #60A9C5;
+$nav-subitem-bg: #A9A9A9;
+$nav-width: 275px;
+$examples-width: 50%;
+
+$aside-warning-bg: #C24722;
+$aside-notice-bg: #3a839f;

data/docs/_sass/_variables.scss

@@ -0,0 +1,105 @@
+/*
+Copyright 2008-2013 Concur Technologies, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may
+not use this file except in compliance with the License. You may obtain
+a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations
+under the License.
+*/
+
+
+////////////////////////////////////////////////////////////////////////////////
+// CUSTOMIZE SLATE
+////////////////////////////////////////////////////////////////////////////////
+// Use these settings to help adjust the appearance of Slate
+
+
+// BACKGROUND COLORS
+////////////////////
+$nav-bg: #393939 !default;
+$examples-bg: #393939;
+$code-bg: #292929;
+$code-annotation-bg: #1c1c1c;
+$nav-subitem-bg: #262626 !default;
+$nav-active-bg: #2467af !default;
+$lang-select-border: #000;
+$lang-select-bg: #222;
+$lang-select-active-bg: $examples-bg; // feel free to change this to blue or something
+$lang-select-pressed-bg: #111; // color of language tab bg when mouse is pressed
+$main-bg: #eaf2f6 !default;
+$aside-notice-bg: #8fbcd4 !default;
+$aside-warning-bg: #c97a7e !default;
+$aside-success-bg: #6ac174;
+$search-notice-bg: #c97a7e;
+
+
+// TEXT COLORS
+////////////////////
+$main-text: #333; // main content text color
+$nav-text: #fff;
+$nav-active-text: #fff;
+$lang-select-text: #fff; // color of unselected language tab text
+$lang-select-active-text: #fff; // color of selected language tab text
+$lang-select-pressed-text: #fff; // color of language tab text when mouse is pressed
+
+
+// SIZES
+////////////////////
+$nav-width: 230px !default; // width of the navbar
+$examples-width: 50% !default; // portion of the screen taken up by code examples
+$logo-margin: 20px; // margin between nav items and logo, ignored if search is active
+$main-padding: 28px; // padding to left and right of content & examples
+$nav-padding: 15px; // padding to left and right of navbar
+$nav-v-padding: 10px; // padding used vertically around search boxes and results
+$nav-indent: 10px; // extra padding for ToC subitems
+$code-annotation-padding: 13px; // padding inside code annotations
+$h1-margin-bottom: 21px; // padding under the largest header tags
+$tablet-width: 1200px; // min width before reverting to tablet size
+$phone-width: $tablet-width - $nav-width; // min width before reverting to mobile size
+
+
+// FONTS
+////////////////////
+%default-font {
+  font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
+  font-size: 13px;
+}
+
+%header-font {
+  @extend %default-font;
+  font-weight: bold;
+}
+
+%code-font {
+  font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+
+// OTHER
+////////////////////
+$nav-active-shadow: #000;
+$nav-footer-border-color: #666;
+$nav-embossed-border-top: #000;
+$nav-embossed-border-bottom: #939393;
+$main-embossed-text-shadow: 0px 1px 0px #fff;
+$search-box-border-color: #666;
+
+
+////////////////////////////////////////////////////////////////////////////////
+// INTERNAL
+////////////////////////////////////////////////////////////////////////////////
+// These settings are probably best left alone.
+
+%break-words {
+    word-break: break-all;
+    hyphens: auto;
+}

data/docs/assets/javascripts/script.js

@@ -0,0 +1,18 @@
+(function() {
+
+  var app = angular.module('MainApp', ['ngAnimate']);
+
+  app.controller('MainCtrl', function($scope) {
+
+    $scope.CheckControlSize = function() {
+      if ($scope.inputSize == 'frm-sm') {
+        $scope.inputSize = 'sm';
+      }
+      if ($scope.inputSize == 'frm-lg') {
+        $scope.inputSize = 'lg';
+      }
+    }
+
+  });
+
+}());

data/docs/assets/stylesheets/formChanges.less

@@ -0,0 +1,106 @@
+//recreate local variables
+@input-height-base: 34px;
+@input-height-small: 30px;
+@input-height-large: 46px;
+@padding-base-horizontal: 12px;
+@grid-gutter-width: 30px;
+@screen-sm-min: 768px;
+
+
+.has-feedback {
+  // Right Icon Input Padding improvements
+  // when the padding mirrors the input height, it makes the icon look like it
+  // occupies a square on the side of the control
+  .form-control{
+    padding-right: @input-height-base;
+  }
+  .form-control.input-sm,
+  &.form-group-sm .form-control{
+    padding-right: @input-height-small;
+  }
+  .form-control.input-lg,
+  &.form-group-lg .form-control {
+    padding-right: @input-height-large;
+  }
+}
+.has-feedback-left {
+  // Left Icon Input Padding
+  .form-control {
+    //reset changes to right
+    padding-right: @padding-base-horizontal;
+    padding-left: @input-height-base;
+  }
+  .form-control.input-sm,
+  &.form-group-sm .form-control{
+    padding-left: @input-height-small;
+  }
+  .form-control.input-lg,
+  &.form-group-lg .form-control {
+    padding-left: @input-height-large;
+  }
+}
+
+// Left Align Icon
+.has-feedback-left .form-control-feedback {
+    left: 0;
+}
+
+// Set Icon Line Height for vertical centering
+// If using font awesome, library is likely to come after bootstrap library and
+// override line-height set here.  I'm inclined to use !important to make it
+// easier for these line heights to persist in the case the icons are being
+// used explicitly within an input box.
+.form-control-feedback {
+    line-height: @input-height-base !important;
+}
+.input-sm + .form-control-feedback,
+.form-horizontal .form-group-sm .form-control-feedback {
+    width: @input-height-small;
+    height: @input-height-small;
+    line-height: @input-height-small !important;
+}
+.input-lg + .form-control-feedback,
+.form-horizontal .form-group-lg .form-control-feedback {
+  width: @input-height-large;
+  height: @input-height-large;
+  line-height: @input-height-large !important;
+}
+
+
+// Move Icon to top
+// Added to first selector.  If the form-control-feedback is not a sibling,
+// but a child of a sibling, we want to move it up when there is no label.
+.has-feedback label {
+  &.sr-only ~ .form-control-feedback,
+  &.sr-only ~ div .form-control-feedback {
+    top: 0;
+  }
+}
+
+.form-inline {
+  @media (min-width: @screen-sm-min) {
+    // Allow left aligned icon in inline form
+    .inline-feedback {
+      // enable absolute positioning
+      position: relative;
+      display: inline-block;
+    }
+
+    // Re-override the feedback icon.
+    .has-feedback .form-control-feedback {
+      top: 0;
+    }
+  }
+}
+
+.form-horizontal {
+  .has-feedback-left .form-control-feedback {
+    left: (@grid-gutter-width / 2);
+  }
+}
+
+
+
+
+
+

data/docs/assets/stylesheets/style.css

@@ -0,0 +1,46 @@
+/* Styles for Demo */
+body {
+  background: #FAFCFF;
+  background-image: url('http://i.imgur.com/57EjZOf.png');
+}
+pre.prettyprint {
+	width: 600px;
+	overflow: auto;
+}
+pre.prettyprint > code {
+	width: initial;
+	word-wrap: normal;
+	white-space: pre;
+}
+
+/* fix height so won't jump around page */
+.demo-space {
+  height: 100px;
+}
+
+.animate-show {
+  -webkit-transition:all ease-out 2s;
+     -moz-transition:all ease-out 2s;
+       -o-transition:all ease-out 2s;
+          transition:all ease-out 2s;
+
+  line-height:20px;
+  opacity:1;
+
+}
+.animate-show.ng-hide-remove.ng-hide-remove-active {
+  background: #37ff25; /* green */
+}
+.animate-show.ng-hide-add.ng-hide-add-active {
+  background: #ff2537; /* red */
+}
+
+.animate-show.ng-hide {
+  line-height:0;
+  opacity:0;
+}
+
+.settingsForm .form-group {
+  padding-bottom: 5px;
+  border-bottom: 1px solid lightgrey;
+}

data/docs/fonts/slate.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="slate" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" d="" horiz-adv-x="512" />
+<glyph unicode="&#xe600;" d="M438.857 877.714q119.429 0 220.286-58.857t159.714-159.714 58.857-220.286-58.857-220.286-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857zM512 165.143v108.571q0 8-5.143 13.429t-12.571 5.429h-109.714q-7.429 0-13.143-5.714t-5.714-13.143v-108.571q0-7.429 5.714-13.143t13.143-5.714h109.714q7.429 0 12.571 5.429t5.143 13.429zM510.857 361.714l10.286 354.857q0 6.857-5.714 10.286-5.714 4.571-13.714 4.571h-125.714q-8 0-13.714-4.571-5.714-3.429-5.714-10.286l9.714-354.857q0-5.714 5.714-10t13.714-4.286h105.714q8 0 13.429 4.286t6 10z" />
+<glyph unicode="&#xe602;" d="M585.143 164.571v91.429q0 8-5.143 13.143t-13.143 5.143h-54.857v292.571q0 8-5.143 13.143t-13.143 5.143h-182.857q-8 0-13.143-5.143t-5.143-13.143v-91.429q0-8 5.143-13.143t13.143-5.143h54.857v-182.857h-54.857q-8 0-13.143-5.143t-5.143-13.143v-91.429q0-8 5.143-13.143t13.143-5.143h256q8 0 13.143 5.143t5.143 13.143zM512 676.571v91.429q0 8-5.143 13.143t-13.143 5.143h-109.714q-8 0-13.143-5.143t-5.143-13.143v-91.429q0-8 5.143-13.143t13.143-5.143h109.714q8 0 13.143 5.143t5.143 13.143zM877.714 438.857q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" />
+<glyph unicode="&#xe606;" d="M733.714 531.428q0 16-10.286 26.286l-52 51.429q-10.857 10.857-25.714 10.857t-25.714-10.857l-233.143-232.571-129.143 129.143q-10.857 10.857-25.714 10.857t-25.714-10.857l-52-51.429q-10.286-10.286-10.286-26.286 0-15.429 10.286-25.714l206.857-206.857q10.857-10.857 25.714-10.857 15.429 0 26.286 10.857l310.286 310.286q10.286 10.286 10.286 25.714zM877.714 438.857q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" />
+<glyph unicode="&#xe607;" d="M658.286 475.428q0 105.714-75.143 180.857t-180.857 75.143-180.857-75.143-75.143-180.857 75.143-180.857 180.857-75.143 180.857 75.143 75.143 180.857zM950.857 0q0-29.714-21.714-51.429t-51.429-21.714q-30.857 0-51.429 21.714l-196 195.429q-102.286-70.857-228-70.857-81.714 0-156.286 31.714t-128.571 85.714-85.714 128.571-31.714 156.286 31.714 156.286 85.714 128.571 128.571 85.714 156.286 31.714 156.286-31.714 128.571-85.714 85.714-128.571 31.714-156.286q0-125.714-70.857-228l196-196q21.143-21.143 21.143-51.429z" horiz-adv-x="951" />
+</font></defs></svg>

data/docs/hooks.html

@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html ng-app="MainApp">
+
+<head>
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
+  <link rel="stylesheet/less" type="text/css" href="assets/stylesheets/formChanges.less" />
+  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
+  <link rel="stylesheet/less" type="text/css" href="assets/stylesheets/script.css" />
+
+  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script>
+  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.15/angular.min.js"></script>
+  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.15/angular-animate.js"></script>
+  <script src="assets/javascripts/script.js"></script>
+</head>
+
+<body ng-controller="MainCtrl" ng-init="icons = 'glyph'; side = 'right'; useLabel = true; inputSize = 'reg'; formType = 'basic'; validation = 'none';">
+  <div class="container">
+
+    <h2>Settings</h2>
+
+    <form class="form-horizontal settingsForm" role="form">
+      <div class="form-group">
+        <label for="icons" class="col-xs-2 control-label">Icon Side:</label>
+        <div class="col-xs-10">
+          <label class="radio-inline">
+            <input type="radio" name="side" ng-model="side" value="left" >Left
+          </label>
+          <label class="radio-inline">
+            <input type="radio" name="side" ng-model="side" value="right" >Right
+          </label>
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="icons" class="col-xs-2 control-label">Icon Set:</label>
+        <div class="col-xs-10">
+          <label class="radio-inline">
+            <input type="radio" name="icons" ng-model="icons" value="glyph" >Glypicon
+          </label>
+          <label class="radio-inline">
+            <input type="radio" name="icons" ng-model="icons" value="fa">Font Awesome
+          </label>
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="icons" class="col-xs-2 control-label">Has Label:</label>
+        <div class="col-xs-10">
+          <div class="checkbox">
+            <label>
+              <input type="checkbox" ng-model="useLabel"> Use a Label
+            </label>
+          </div>
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="icons" class="col-xs-2 control-label">Control Size:</label>
+        <div class="col-xs-10">
+          <label class="radio-inline">
+            <input type="radio" name="inputSize" ng-model="inputSize" value="reg" >default
+          </label>
+          <label class="radio-inline">
+            <input type="radio" name="inputSize" ng-model="inputSize" value="sm" >input-sm
+          </label>
+          <label class="radio-inline">
+            <input type="radio" name="inputSize" ng-model="inputSize" value="lg" >input-lg
+          </label>
+          <label class="radio-inline" title="For Horizontal Form">
+            <input type="radio" name="inputSize" ng-model="inputSize" value="frm-sm" ng-disabled="formType != 'horizontal'" >form-sm
+          </label>
+          <label class="radio-inline" title="For Horizontal Form">
+            <input type="radio" name="inputSize" ng-model="inputSize" value="frm-lg" ng-disabled="formType != 'horizontal'">form-lg
+          </label>
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="icons" class="col-xs-2 control-label">Form Type:</label>
+        <div class="col-xs-10">
+          <label class="radio-inline">
+            <input type="radio" name="formType" ng-model="formType" value="basic"
+                   ng-click="CheckControlSize();">Basic
+          </label>
+          <label class="radio-inline">
+            <input type="radio" name="formType" ng-model="formType" value="horizontal" >Horizontal
+          </label>
+          <label class="radio-inline">
+            <input type="radio" name="formType" ng-model="formType" value="inline"
+                   ng-click="CheckControlSize();">Inline
+          </label>
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="icons" class="col-xs-2 control-label">Validation State:</label>
+        <div class="col-xs-10">
+          <label class="radio-inline">
+            <input type="radio" name="validation" ng-model="validation" value="none" >None
+          </label>
+          <label class="radio-inline">
+            <input type="radio" name="validation" ng-model="validation" value="success" >has-success
+          </label>
+          <label class="radio-inline">
+            <input type="radio" name="validation" ng-model="validation" value="warning" >has-warning
+          </label>
+          <label class="radio-inline">
+            <input type="radio" name="validation" ng-model="validation" value="error" >has-error
+          </label>
+        </div>
+      </div>
+    </form>
+
+
+
+    <h2>Demo</h2>
+
+    <div class="well demo-space">
+      <form role="form" ng-class="{'form-horizontal' : formType == 'horizontal', 'form-inline' : formType == 'inline'}">
+        <div class="form-group has-feedback"
+             ng-class="{'has-feedback-left' : side == 'left', 'form-group-sm' : inputSize == 'frm-sm', 'form-group-lg' : inputSize == 'frm-lg', 'has-success' : validation == 'success', 'has-warning' : validation == 'warning', 'has-error' : validation == 'error'}">
+          <label class="control-label"
+                 ng-class="{'sr-only' : useLabel == false , 'col-sm-2' : formType == 'horizontal' && useLabel == true }">Username</label>
+          <div ng-class="{'inline-feedback' : formType == 'inline', 'col-sm-10' : formType == 'horizontal' && useLabel == true, 'col-sm-12' : formType == 'horizontal' && useLabel == false}">
+            <input type="text" class="form-control" placeholder="Username"
+                   ng-class="{'input-sm' : inputSize == 'sm', 'input-lg' : inputSize == 'lg'}"/>
+            <i class="form-control-feedback" ng-class="{'glyphicon glyphicon-user' : icons == 'glyph', 'fa fa-user': icons == 'fa' } "></i>
+          </div>
+        </div>
+      </form>
+    </div>
+
+
+    <h2>Code</h2>
+
+    <pre class="prettyprint"><code>&lt;form role=&quot;form&quot;<span class="animate-show" ng-show="formType == 'horizontal'" > class="form-horizontal"</span><span class="animate-show" ng-show="formType == 'inline'" > class="form-inline"</span>&gt;
+  &lt;div class=&quot;form-group has-feedback<span class="animate-show" ng-show="validation == 'success'" > has-success</span><span class="animate-show" ng-show="validation == 'warning'" > has-warning</span><span class="animate-show" ng-show="validation == 'error'" > has-error</span><span class="animate-show" ng-show="side == 'left'" > has-feedback-left</span><span class="animate-show" ng-show="inputSize == 'frm-sm'" > form-group-sm</span><span class="animate-show" ng-show="inputSize == 'frm-lg'" > form-group-lg</span>&quot;&gt;
+    &lt;label class=&quot;control-label<span class="animate-show" ng-show="useLabel == false" > sr-only</span><span class="animate-show" ng-show="formType == 'horizontal' && useLabel == true" > col-sm-2</span>&quot;&gt;Username&lt;/label&gt;<span class="animate-show" ng-show="formType == 'horizontal'" >
+    &lt;div class=&quot;<span class="animate-show" ng-show="useLabel == true" > col-sm-10</span><span class="animate-show" ng-show="useLabel == false" > col-sm-12</span>&quot;&gt;</span><span class="animate-show" ng-show="formType == 'inline' && side == 'left'" >
+    &lt;div class=&quot;inline-feedback&quot;&gt;</span>
+    <span class="animate-show" ng-show="formType == 'horizontal' || (formType == 'inline' && side == 'left')" >  </span>&lt;input type=&quot;text&quot; class=&quot;form-control<span class="animate-show" ng-show="inputSize == 'sm'" > input-sm</span><span class="animate-show" ng-show="inputSize == 'lg'" > input-lg</span>&quot; placeholder=&quot;Username&quot; /&gt;
+    <span class="animate-show" ng-show="formType == 'horizontal' || (formType == 'inline' && side == 'left')" >  </span>&lt;i class=&quot;form-control-feedback<span class="animate-show" ng-show="icons == 'glyph'" > glyphicon glyphicon-user</span><span class="animate-show" ng-show="icons == 'fa'" > fa fa-user</span>&quot;&gt;&lt;/i&gt;<span class="animate-show" ng-show="formType == 'horizontal' || (formType == 'inline' && side == 'left')" >
+    &lt;/div&gt;</span>
+  &lt;/div&gt;
+&lt;/form&gt;</code></pre>
+
+
+
+
+
+  </div>
+</body>
+
+</html>