@knight-lab/timelinejs 3.8.15 → 3.8.19

package/util/convert_json.py

@@ -1,96 +0,0 @@
-#!/usr/bin/env python
-import json
-import sys
-import re
-
-if len(sys.argv) != 2:
-    print "Usage: %s [file.json]" % sys.argv[0]
-    sys.exit(0)
-def process_date(date_str):
-    if re.match("^\d{4}$", date_str):
-        return { "year": date_str}
-    try:
-        year,month,day = re.match("^(\d{4})[/,\-](\d+)[/,\-](\d+)$",date_str).groups()
-        return { "year": year, "month": month, "day": day }
-    except AttributeError:
-        pass
-
-    sys.stderr.write("*** weird date: %s\n" % date_str) 
-    return {}
-
-def process_slide(s):
-    d = {"start_date": {}, "media": {}, "text": {}}
-    d['text']['headline'] = s.get('headline',"")
-    d['text']['text'] = s.get('text','')
-    try:
-        asset = s['asset']
-        d['media']['url'] = asset.get('media','')
-        d['media']['caption'] = asset.get('caption','')
-        d['media']['credit'] = asset.get('credit','')
-    except KeyError:
-        pass
-
-    d['start_date'] = process_date(s['startDate'])
-    try:
-        d['end_date'] = process_date(s['endDate'])
-    except KeyError:
-        pass
-
-    return d
-data = json.load(open(sys.argv[1]))
-slides = []
-newdata = { "timeline": {"slides": slides}}
-
-timeline = data['timeline']
-dates = timeline.pop('date')
-if (len(timeline)):
-    slides.append(process_slide(timeline))
-for date in dates:
-    slides.append(process_slide(date))
-
-json.dump(newdata,sys.stdout,indent=2)
-
-
-"""
-The data file should be in JSON format with the following structure
-
-{
-    "timeline": {
-        "slides": [
-            {
-                "start_date": {
-                    "year":         "1900",
-                    "month":        "01",
-                    "day":          "05",
-                    "hour":         "",
-                    "minute":       "",
-                    "second":       "",
-                    "millisecond":  "",
-                    "format":       ""
-                },
-                "end_date": {
-                    "year":         "1900",
-                    "month":        "06",
-                    "day":          "07",
-                    "hour":         "",
-                    "minute":       "",
-                    "second":       "",
-                    "millisecond":  "",
-                    "format":       ""
-                },
-                "media": {
-                    "caption":  "",
-                    "credit":   "",
-                    "url":      "url_to_your_media.jpg",
-                    "thumbnail":    "url_to_your_media.jpg"
-                },
-                "text": {
-                    "headline": "Headline Goes Here",
-                    "text":     "Your slide text goes here."
-                }
-            }
-        ]
-    }
-}
-
-"""

package/website/app.py

@@ -1,101 +0,0 @@
-'''
-Main entrypoint file.  To run:
-
-  $ python serve.py
-
-'''
-from flask import Flask
-from flask import request
-from flask import render_template
-from flask import json
-from flask import send_from_directory
-import importlib
-import traceback
-import sys
-import os
-
-# Add current directory to sys.path
-site_dir = os.path.dirname(os.path.abspath(__file__))
-examples_json = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'examples.json')
-faq_json = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'faq.json')
-
-if site_dir not in sys.path:
-    sys.path.append(site_dir)
-
-# Set default FLASK_SETTINGS_MODULE for debug mode
-if not os.environ.get('FLASK_SETTINGS_MODULE', ''):
-    os.environ['FLASK_SETTINGS_MODULE'] = 'core.settings.loc'
-
-# Import settings module for the inject_static_url context processor.
-settings_module = os.environ.get('FLASK_SETTINGS_MODULE')
-
-try:
-    importlib.import_module(settings_module)
-except ImportError, e:
-    raise ImportError(
-        "Could not import settings '%s' (Is it on sys.path?): %s" \
-        % (settings_module, e))
-
-settings = sys.modules[settings_module]
-
-
-app = Flask(__name__)
-
-dist_dir = os.path.join(settings.PROJECT_ROOT, 'dist')
-
-@app.context_processor
-def inject_static_url():
-    """
-    Inject the variables 'static_url' and 'STATIC_URL' into the templates to
-    avoid hard-coded paths to static files. Grab it from the environment
-    variable STATIC_URL, or use the default. Never has a trailing slash.
-    """
-    static_url = settings.STATIC_URL or app.static_url_path
-    if static_url.endswith('/'):
-        static_url = static_url.rstrip('/')
-    return dict(static_url=static_url, STATIC_URL=static_url)
-
-
-@app.context_processor
-def inject_index_data():
-        return dict(examples=json.load(open(examples_json)),faqs=json.load(open(faq_json)))
-
-
-@app.route('/dist/<path:path>')
-def catch_build(path):
-    """
-    Serve /dist/... urls from the build directory
-    """
-    return send_from_directory(dist_dir, path)
-
-@app.route('/')
-@app.route('/<path:path>')
-def catch_all(path='index.html', context=None):
-    """Catch-all function which serves every URL."""
-    context = context or {}
-    if not os.path.splitext(path)[1]:
-        path = os.path.join(path, 'index.html')
-    return render_template(path, **context)
-
-
-if __name__ == "__main__":
-    import getopt
-
-    ssl_context = None
-    port = 5000
-
-    try:
-        opts, args = getopt.getopt(sys.argv[1:], "sp:", ["port="])
-        for opt, arg in opts:
-            if opt == '-s':
-                ssl_context = 'adhoc'
-            elif opt in ('-p', '--port'):
-                port = int(arg)
-            else:
-                print 'Usage: app.py [-s]'
-                sys.exit(1)
-    except getopt.GetoptError:
-        print 'Usage: app.py [-s] [-p port]'
-        sys.exit(1)
-
-    app.run(host='0.0.0.0', port=port, debug=True, ssl_context=ssl_context)

package/website/core/settings/base.py

@@ -1,6 +0,0 @@
-"""Common settings and globals."""
-import os
-from os.path import abspath, basename, dirname, join, normpath
-
-CORE_ROOT = dirname(dirname(abspath(__file__)))
-PROJECT_ROOT = dirname(dirname(CORE_ROOT))

package/website/core/settings/loc.py

@@ -1,16 +0,0 @@
-"""Local settings and globals."""
-import sys
-from os.path import normpath, join
-from .base import *
-
-# Import secrets (no project-specific secrets)
-#sys.path.append(
-#    abspath(join(PROJECT_ROOT, '../secrets/storymapjs/stg'))
-#)
-#try:
-#    from secrets import *
-#except ImportError, e:
-#    print 'WARNING: Could not import project secrets (%s).  You will not be able to deploy.' % (e)
-
-# Set static URL
-STATIC_URL = '/static'

package/website/examples.json

@@ -1,114 +0,0 @@
-[
-  {
-      "link": "http://world.time.com/2013/12/05/nelson-mandelas-extraordinary-life-an-interactive-timeline/",
-      "thumbnail": "https://timeline.knightlab.com/static/img/examples/thumbs/thumb_mandela.jpg",
-      "source": "Time Magazine",
-      "source_logo": "https://timeline.knightlab.com/static/img/examples/logos/logo_time.png",
-      "title": "Mandela: A Life of Purpose"
-  },
-  {
-      "link": "http://www.lemonde.fr/election-presidentielle-2012/visuel/2012/04/21/chronologie-une-si-longue-campagne-presidentielle_1681661_1471069.html#meter_toaster",
-      "thumbnail": "https://timeline.knightlab.com/static/img/examples/thumbs/thumb_lemonde.jpg",
-      "source": "Le Monde",
-      "source_logo": "https://timeline.knightlab.com/static/img/examples/logos/logo_lemonde.png",
-      "title": "Chronology of the French Presidential Race"
-  },
-  {
-      "link": "http://www.themaneater.com/special-sections/mu-fall-2015/",
-      "thumbnail": "https://timeline.knightlab.com/static/img/examples/thumbs/thumb_univofmissouri.jpg",
-      "source": "The Maneater",
-      "source_logo": "https://timeline.knightlab.com/static/img/examples/logos/logo_maneater.png",
-      "title": "Historic Fall at University of Missouri"
-  },
-  {
-      "link": "http://www.cnn.com/2016/04/20/asia/north-korea-restaurant-defectors/index.html",
-      "thumbnail": "https://timeline.knightlab.com/static/img/examples/thumbs/thumb_northkorea.jpg",
-      "source": "CNN",
-      "source_logo": "https://timeline.knightlab.com/static/img/examples/logos/logo_cnn.png",
-      "title": "North Korea's Nuclear Ambitions"
-  },
-  {
-      "link": "http://bulger.wbur.org/story/1977/?location=44444",
-      "thumbnail": "https://timeline.knightlab.com/static/img/examples/thumbs/thumb_bulger.jpg",
-      "source": "WBUR",
-      "source_logo": "https://timeline.knightlab.com/static/img/examples/logos/logo_wbur.png",
-      "title": "Bulger on Trial"
-  },
-  {
-      "link": "https://www.publicintegrity.org/2014/07/15/15037/decades-making-decline-irs-nonprofit-regulation",
-      "thumbnail": "https://timeline.knightlab.com/static/img/examples/thumbs/thumb_supremecourt.jpg",
-      "source": "Center for Public Integrity",
-      "source_logo": "https://timeline.knightlab.com/static/img/examples/logos/logo_centerforpublicintegrity.png",
-      "title": "The Decline of IRS Nonprofit Regulation"
-  },
-  {
-      "link": "http://www.denverpost.com/breakingnews/ci_21119904",
-      "thumbnail": "https://timeline.knightlab.com/static/img/examples/thumbs/thumb_denver_shooting.jpg",
-      "source": "Denver Post",
-      "source_logo": "https://timeline.knightlab.com/static/img/examples/logos/logo_denverpost.png",
-      "title": "Aurora, Colorado Movie Theater Shooting"
-  },
-  {
-      "link": "https://www.engadget.com/2016/04/22/microsoft-mobile-timeline/",
-      "thumbnail": "https://timeline.knightlab.com/static/img/examples/thumbs/thumb_mobile_device.jpg",
-      "source": "Engadget",
-      "source_logo": "https://timeline.knightlab.com/static/img/examples/logos/logo_engadget.png",
-      "title": "The Collapse of Microsoft and Nokia's Mobile Business"
-  },
-  {
-      "link": "http://www.ibtimes.com/islamic-state-timeline-shows-how-isis-expanded-one-year-two-countries-ten-1959705",
-      "thumbnail": "https://timeline.knightlab.com/static/img/examples/thumbs/thumb_isis.jpg",
-      "source": "International Business Times",
-      "source_logo": "https://timeline.knightlab.com/static/img/examples/logos/logo_ibt.png",
-      "title": "How ISIS Spread to 10 Countries"
-  },
-  {
-      "link": "http://www.ksat.com/news/texas/middle-school-teacher-had-sexual-relationship-with-student-authorities-say_",
-      "thumbnail": "https://timeline.knightlab.com/static/img/examples/thumbs/thumb_perpwalk.jpg",
-      "source": "KSAT",
-      "source_logo": "https://timeline.knightlab.com/static/img/examples/logos/logo_ksat.png",
-      "title": "Reported Sexual Assault Cases by Texas Educators"
-  },
-  {
-      "link": "http://vinepair.com/wine-colonized-world-wine-history/#1",
-      "thumbnail": "https://timeline.knightlab.com/static/img/examples/thumbs/thumb_wine.jpg",
-      "source": "VinePair",
-      "source_logo": "https://timeline.knightlab.com/static/img/examples/logos/logo_vinepair.png",
-      "title": "A History of Wine Around the World"
-  },
-  {
-      "link": "http://mashable.com/2014/03/13/timeline-malaysia-airlines-flight-370/?utm_cid=mash-com-Tw-main-link#hzbp7TyJREqX",
-      "thumbnail": "https://timeline.knightlab.com/static/img/examples/thumbs/thumb_malaysia-airlines.jpg",
-      "source": "Mashable",
-      "source_logo": "https://timeline.knightlab.com/static/img/examples/logos/logo_mashable.png",
-      "title": "The Mystery of Malaysia Airlines Flight 370"
-  },
-  {
-      "link": "https://timeline.knightlab.com/examples/user-interface/index.html",
-      "thumbnail": "https://timeline.knightlab.com/static/img/examples/thumbs/thumb_userinterface.png",
-      "source": "Knight Lab",
-      "source_logo": "/static/img/examples/logos/logo_knightlab.png",
-      "title": "Revolutionary User Interfaces"
-  },
-  {
-      "link": "http://beyondtheseal.com/chapter3/slide-3/",
-      "thumbnail": "https://timeline.knightlab.com/static/img/examples/thumbs/thumb_banana.png",
-      "source": "Beyond the Seal",
-      "source_logo": "/static/img/examples/logos/logo_beyondtheseal.png",
-      "title": "A Brief History of the Banana Business"
-  },
-  {
-      "link": "https://timeline.knightlab.com/examples/republican/index.html",
-      "thumbnail": "https://timeline.knightlab.com/static/img/examples/thumbs/thumb_republican.jpg",
-      "source": "Knight Lab",
-      "source_logo": "/static/img/examples/logos/logo_knightlab.png",
-      "title": "The Republican Run-Up"
-  },
-  {
-      "link": "https://timeline.knightlab.com/examples/houston/index.html",
-      "thumbnail": "https://timeline.knightlab.com/static/img/examples/thumbs/thumb_houston.jpg",
-      "source": "Knight Lab",
-      "source_logo": "/static/img/examples/logos/logo_knightlab.png",
-      "title": "Whitney Houston: 1963-2012"
-  }
-]

package/website/faq.json

@@ -1,81 +0,0 @@
-[{
-        "slug": "how-do-i-edit-my-timeline",
-        "question": "How do I edit my timeline?",
-        "answer": "Once you've created a timeline, you can make changes by going back to your Google spreadsheet. Changes you make to the spreadsheet are automatically available to your Timeline—you don't need to repeat the 'publish to the web' step (step #2). If you want to make changes to the optional settings, you will need to update your embed code, but if you are only changing content in the spreadsheet, then there's nothing else to do."
-    },
-    {
-        "slug": "what-web-browsers-does-timelinejs-work-with",
-        "question": "What web browsers does TimelineJS work with?",
-        "answer": "Our primary development and testing browser is Google Chrome. We adhere closely to web standards, so we believe that TimelineJS should work effectively in all modern web browsers. TimelineJS is known to not work with Internet Explorer versions before IE10."
-    },
-    {
-        "slug": "missing-slides",
-        "question": "Some of my slides aren't showing up. Where are they?",
-        "answer": "If the slides which aren't appearing are at the end of your timeline, look for a blank spreadsheet row right after the last slide which is appearing. When TimelineJS asks Google for your data, Google only sends up to the first blank row, so TimelineJS is actually showing everything that it can. Don't forget to look for hidden spreadsheet rows or rows with a very small height."
-    },
-    {
-        "slug": "what-are-my-options-for-changing-how-my-timeline-works",
-        "question": "What are my options for changing how my Timeline looks?",
-        "answer": "First, make sure you know everything you can do in the spreadsheet configuration, like background colors and images. Also, check out the optional settings part of 'step 3' of the authoring tool. You can change the fonts, the position of the timeline navigation, and the initial zoom level. If you still want to do more, there are some configuration options available. Most of those are for fine tuning, but some of them may be helpful."
-    },
-    {
-        "slug": "can-i-change-things-using-css",
-        "question": "There aren't enough options. I want more control over the [font size/color/etc]. Can I change things using CSS?",
-        "answer": "Because there are so many details to the styling, this is not exactly simple, but, if you have some technical capacity, you can override TimelineJS's <abbr title='Cascading Style Sheets'>CSS</abbr> rules and have complete control over the look of the timeline. For details, see <a href='/docs/overriding-styles.html'>Overriding Timeline's Styles</a>."
-    },
-    {
-        "slug": "how-can-i-categorize-or-group-my-events",
-        "question": "How can I categorize or group my events?",
-        "answer": "Every event in a timeline can have a group property. Events with the same group are shown in the same row or adjacent rows, and the common value of their group property is used as a label at the left edge of the timeline. Groups can be set using the 'group' column in the Google Spreadsheet or the 'group' property of a JSON slide object. TimelineJS does not support any other special styling for events in the same group."
-    },
-    {
-        "slug": "why-did-this-happen",
-        "question": "The first slide in my timeline isn't the first chronologically. Why did this happen?",
-        "answer": "When using the Google Spreadsheet to configure your timeline, if you put the word <code>title</code> in the <code>type</code> column, that slide will be put at the front, regardless of the values in the date columns. See the <a href='/docs/using-spreadsheets.html#title_slides'>Google Spreadsheet documentation</a> for more information."
-    },
-    {
-        "slug": "can-i-make-media-images-clickable",
-        "question": "Can I make media images clickable?",
-        "answer": "No. Many of TimelineJS's media types are interactive, and so would not be able to handle a link, and other of TimelineJS's media types have terms of service which require a link back to the source of the media. As an alternative, consider using HTML to add links in the caption, credit, or text for the slide."
-    },
-    {
-        "slug": "how-can-i-format-text",
-        "question": "How can I format text (add line breaks, bold, italics)?",
-        "answer": "TimelineJS's text fields (headline, text, caption, and credit) all accept HTML markup. A full tutorial on HTML is outside the scope of this FAQ, but here are a few basics:<br><ul><li>Wrap paragraphs in <code>&lt;p&gt;&lt;/p&gt;</code> tags to create line breaks.</li><li>Wrap text in <code>&lt;b&gt;&lt;/b&gt;</code> tags for <b>bold</b> text and <code>&lt;i&gt;&lt;/i&gt;</code> for <em>italics</em></li></ul>"
-    },
-    {
-        "slug": "how-do-i-enter-bce-dates",
-        "question": "How do I enter BCE dates?",
-        "answer": "To enter dates before the <a href='https://en.wikipedia.org/wiki/Common_Era'>common era</a>, just use a negative value for the year. Of course, you can also enter month and date if you need them."
-    },
-    {
-        "slug": "how-do-i-create-very-ancient-dates",
-        "question": "How do I create very ancient dates?",
-        "answer": "Generally, you don't have to think about it -- just enter the dates you want. Timeline can handle dates literally to the beginning of time. For dates more than about 250,000 years ago, only the year is usable. Support for those older dates is still relatively new, so if anything seems off, visit our <a href='http://knightlab.zendesk.com'>tech support site.</a>"
-    },
-    {
-        "slug": "who-can-access-the-data-in-my-google-spreadsheet",
-        "question": "Who can access the data in my Google spreadsheet?",
-        "answer": "You must make the data public to the web to use TimelineJS with a Google Spreadsheet as the data source. Normally, the data is still only visible to people who know the link, so if you publish a timeline privately, outsiders are unlikely to see the data. However, it is still public, so you must decide if that is acceptable."
-    },
-    {
-        "slug": "how-should-i-use-timelinejs",
-        "question": "Privacy is very important to me. How should I use TimelineJS?",
-        "answer": "If you want complete control over who can see the information in your timeline, you cannot use Google Spreadsheets, and you cannot use our standard <code>iframe</code> embed code. Instead, you must use <a href='/docs/json-format.html'>JSON format</a> for the data and <a href='/docs/instantiate-a-timeline.html'>instantiate the timeline</a> directly using javascript. You can then use standard web server security measures to control who has access to your timeline and the data used to create it."
-    },
-    {
-        "slug": "will-my-spreadsheet-get-picked-up-by-search-engines",
-        "question": "Will my spreadsheet get picked up by search engines?",
-        "answer": "Under normal circumstances, Google tells search engines not to index spreadsheets which are published to the web. Of course, if the page is public on the web, it is possible that a search engine will disregard those instructions."
-    },
-    {
-        "slug": "can-i-use-timelinejs-with-wordpress",
-        "question": "Can I use TimelineJS with Wordpress?",
-        "answer": "<strong>It depends.</strong> TimelineJS does not work with Wordpress.com sites. We are researching ways to address this.<br>If you are able to install plugins to your Wordpress installation, we have a <a href='https://wordpress.org/plugins/knight-lab-timelinejs/''>Wordpress plugin for Timeline</a>. It supports embedding Timelines with Wordpress \"shortcode\", and as of version 3.3.14.0, it also has experimental \"oembed\" support. That means that you can take a direct URL to a timeline (like you get with the \"get link to preview\" button) and put it in a post on a line by itself, and it should be embedded. (Make sure you've updated the plugin before you try it.)"
-    },
-    {
-        "slug": "is-timelinejs-free-for-commercial-use",
-        "question": "Is TimelineJS free for commercial use?",
-        "answer": "TimelineJS is released under the <a href='https://www.mozilla.org/en-US/MPL/2.0/'>Mozilla Public License (MPL), version 2.0</a>. That means that TimelineJS is free to \"use, reproduce, make available, modify, display, perform, distribute\" or otherwise employ. You don't need our permission to publish stories with TimelineJS and you don't need to pay us any fees or arrange any further license beyond the MPL. To read more about what you can do with TimelineJS, read our <a href='/docs/license.html'>license page</a>."
-    }
-]

package/website/static/css/desert.css

@@ -1,34 +0,0 @@
-/* desert scheme ported from vim to google prettify */
-pre.prettyprint { display: block; background-color: #333 }
-pre .nocode { background-color: none; color: #000 }
-pre .str { color: #ffa0a0 } /* string  - pink */
-pre .kwd { color: #f0e68c; font-weight: bold }
-pre .com { color: #87ceeb } /* comment - skyblue */
-pre .typ { color: #98fb98 } /* type    - lightgreen */
-pre .lit { color: #cd5c5c } /* literal - darkred */
-pre .pun { color: #fff }    /* punctuation */
-pre .pln { color: #fff }    /* plaintext */
-pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag    - lightyellow */
-pre .atn { color: #bdb76b; font-weight: bold } /* attribute name  - khaki */
-pre .atv { color: #ffa0a0 } /* attribute value - pink */
-pre .dec { color: #98fb98 } /* decimal         - lightgreen */
-
-/* Specify class=linenums on a pre to get line numbering */
-ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
-li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
-/* Alternate shading for lines */
-li.L1,li.L3,li.L5,li.L7,li.L9 { }
-
-@media print {
-  pre.prettyprint { background-color: none }
-  pre .str, code .str { color: #060 }
-  pre .kwd, code .kwd { color: #006; font-weight: bold }
-  pre .com, code .com { color: #600; font-style: italic }
-  pre .typ, code .typ { color: #404; font-weight: bold }
-  pre .lit, code .lit { color: #044 }
-  pre .pun, code .pun { color: #440 }
-  pre .pln, code .pln { color: #000 }
-  pre .tag, code .tag { color: #006; font-weight: bold }
-  pre .atn, code .atn { color: #404 }
-  pre .atv, code .atv { color: #060 }
-}

package/website/static/css/site.css

@@ -1,74 +0,0 @@
-.more-options {
-  margin: 20px 0;
-  display: none;
-}
-
-#hide-options {
-    display: none;
-}
-
-.help-block {
-    font-size: 85%;
-    font-style: italic;
-    color: #999;
-}
-
-.checkbox input { margin-right: 20px; }
-
-#embed-font-dropdown,
-ul#embed-font {
-    list-style-type:none;
-    margin: 0;
-    font-family: sans-serif;
-    padding: 0;
-}
-ul#embed-font{
-    display:none;
-    position:absolute;
-    width: 90%;
-    top: 60px;
-    border: 1px solid #ccc;
-    box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
-    background-color: #FAFAFA;
-    z-index: 10;
-    padding: 10px 25px 10px 30px;
-}
-ul#embed-font li img {
-    max-width: 60%;
-}
-#embed-font-dropdown > li > p {
-    font-family: "Apres RE", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 14px;
-    margin: 0;
-    padding: 0px;
-}
-#embed-font-dropdown img { cursor: pointer; }
-.fa.fa-check { margin: 0 5px 0 -20px; }
-
-#preview-embed {
-    display: none;
-}
-
-.note-error {
-  display: none;
-}
-.note-error:before {
-  content: "Warning: "
-}
-
-/* faq.html */
-h6.label {
-  font-size: 1.3em;
-  padding: 3em inherit 1em;
-}
-div.question p, div.question ul {
-  margin-left: 2em;
-}
-div.question p:first-child {
-  font-weight: bolder;
-}
-
-img.make-step-2 {
-  float: left;
-  margin-right: 7px;
-}