diff --git a/_shared_assets/themes/nextcloud_com/layout.html b/_shared_assets/themes/nextcloud_com/layout.html index 0e983bf99..516ee7001 100644 --- a/_shared_assets/themes/nextcloud_com/layout.html +++ b/_shared_assets/themes/nextcloud_com/layout.html @@ -12,18 +12,18 @@ {% if theme_bootswatch_theme %} {# BS2 needs "bootstrap-responsive.css". BS3 doesn't. #} {% if theme_bootstrap_version == "3" %} - {% set theme_css_files = theme_css_files + [ - '_static/bootswatch-' + bootstrap_version + '/' + theme_bootswatch_theme + '/bootstrap.min.css', - '_static/bootstrap-sphinx.css' - ] - %} + {% set theme_css_files = theme_css_files + [ + '_static/bootswatch-' + bootstrap_version + '/' + theme_bootswatch_theme + '/bootstrap.min.css', + '_static/bootstrap-sphinx.css' + ] + %} {% else %} - {% set theme_css_files = theme_css_files + [ - '_static/bootswatch-' + bootstrap_version + '/' + theme_bootswatch_theme + '/bootstrap.min.css', - '_static/bootstrap-' + bootstrap_version + '/css/bootstrap-' + bootstrap_additional_css + '.min.css', - '_static/bootstrap-sphinx.css' - ] - %} + {% set theme_css_files = theme_css_files + [ + '_static/bootswatch-' + bootstrap_version + '/' + theme_bootswatch_theme + '/bootstrap.min.css', + '_static/bootstrap-' + bootstrap_version + '/css/bootstrap-' + bootstrap_additional_css + '.min.css', + '_static/bootstrap-sphinx.css' + ] + %} {% endif %} {% else %} {% set theme_css_files = theme_css_files + ['_static/main.min.css', '_static/styles.css'] @@ -36,10 +36,10 @@ {% set css_files = css_files + theme_css_files + bootswatch_css_custom %} {% set script_files = script_files + [ - '_static/js/jquery-1.11.0.min.js', - '_static/js/jquery-fix.js', - '_static/bootstrap-' + bootstrap_version + '/js/bootstrap.min.js', - '_static/bootstrap-sphinx.js' + '_static/js/jquery-1.11.0.min.js', + '_static/js/jquery-fix.js', + '_static/bootstrap-' + bootstrap_version + '/js/bootstrap.min.js', + '_static/bootstrap-sphinx.js' ] %} @@ -53,57 +53,56 @@ {# Sidebar: Rework into our Bootstrap nav section. #} {% macro navBar() %} - +
+
+ +
+
+ + +
+
+ {% endmacro %} {% if theme_bootstrap_version == "3" %} {%- macro bsidebar() %} - {%- if render_sidebar %} -
- -
- {%- endif %} + {%- if render_sidebar %} +
+ +
+ {%- endif %} {%- endmacro %} {% else %} {%- macro bsidebar() %} - {%- if render_sidebar %} -
- -
- {%- endif %} + {%- if render_sidebar %} +
+ +
+ {%- endif %} {%- endmacro %} {% endif %} @@ -117,16 +116,16 @@ @@ -143,26 +142,26 @@
-
-
-

{{ project|e }}

-
- Versions: - {%- for v in doc_versions %} - {{v}} - {%- endfor %} -
-
-
- {% if theme_show_search %} -
- - -
- {% endif %} -
-
- {% block sidebartoc %} +
+
+

{{ project|e }}

+
+ Versions: + {%- for v in doc_versions %} + {{v}} + {%- endfor %} +
+
+
+ {% if theme_show_search %} +
+ + +
+ {% endif %} +
+
+ {% block sidebartoc %}
@@ -172,18 +171,18 @@
  • Table of Contents
    • - {{ toctree(maxdepth=3) }} + {{ toctree(maxdepth=3) }}
    - {% endblock %} + {% endblock %}
    - {% include "relations.html" %} + {% include "relations.html" %} {% block body %}{% endblock %} - {% include "relations.html" %} + {% include "relations.html" %}
    @@ -195,86 +194,86 @@ {%- block footer %}
    -
    -

    Follow us on Google Plus! - Like our Facebook page! - Subscribe to our Twitter channel! - Subscribe to our news feed! - Subscribe to our newsletter!

    -
    -
    -

    All documentation licensed under the Creative Commons Attribution 3.0 Unported license.

    -

    See who contributed to our documentation/credits.

    - {%- if show_source and has_source and sourcename and edit_on_github_url %} -

    Do you want to help us to improve this document? - {{ _('Edit this page on GitHub') }} -

    - {%- endif %} -
    +
    +

    Follow us on Google Plus! + Like our Facebook page! + Subscribe to our Twitter channel! + Subscribe to our news feed! + Subscribe to our newsletter!

    +
    +
    +

    All documentation licensed under the Creative Commons Attribution 3.0 Unported license.

    +

    See who contributed to our documentation/credits.

    + {%- if show_source and has_source and sourcename and edit_on_github_url %} +

    Do you want to help us to improve this document? + {{ _('Edit this page on GitHub') }} +

    + {%- endif %} +
    {%- endblock %} diff --git a/_shared_assets/themes/nextcloud_com/static/img/logo_blue_sprite.png b/_shared_assets/themes/nextcloud_com/static/img/logo_blue_sprite.png new file mode 100644 index 000000000..fd27d9631 Binary files /dev/null and b/_shared_assets/themes/nextcloud_com/static/img/logo_blue_sprite.png differ diff --git a/_shared_assets/themes/nextcloud_com/static/img/logo_white_sprite.png b/_shared_assets/themes/nextcloud_com/static/img/logo_white_sprite.png new file mode 100644 index 000000000..31fdbeba5 Binary files /dev/null and b/_shared_assets/themes/nextcloud_com/static/img/logo_white_sprite.png differ diff --git a/_shared_assets/themes/nextcloud_com/static/styles.css b/_shared_assets/themes/nextcloud_com/static/styles.css index 2ec8942d7..cadbf0edc 100644 --- a/_shared_assets/themes/nextcloud_com/static/styles.css +++ b/_shared_assets/themes/nextcloud_com/static/styles.css @@ -7,33 +7,7 @@ border-color: red; }*/ -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: normal; - src: local('Open Sans'), local('OpenSans'), url(fonts/OpenSans-Regular.woff) format('woff'), url(fonts/OpenSans-Regular.ttf) format('ttf'); -} - -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: bold; - src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(fonts/OpenSans-Semibold.woff) format('woff'), url(fonts/OpenSans-Semibold.ttf) format('ttf'); -} - -@font-face { - font-family: 'Open Sans'; - font-style: italic; - font-weight: normal; - src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/OpenSans-Italic.woff) format('woff'), url(fonts/OpenSans-Bold.ttf) format('ttf'); -} - -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: light; - src: local('Open Sans Light'), local('OpenSans-Light'), url(fonts/OpenSans-Light.woff) format('woff'), url(fonts/OpenSans-Light.ttf) format('ttf'); -} +@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i'); @font-face { font-family: 'Glyphicons Halflings'; @@ -120,33 +94,522 @@ button a:hover {text-decoration: none; } /* Remove line under page headers (defined in main.min.css) */ -.navbar { - background-color: #23305D; - background-attachment: scroll; - /* background-image: url(../img/home/720p.jpg); */ - background-image: url(img/home/background3.jpg); - background-position: center; - background-repeat: none; - -webkit-background-size: cover; - -moz-background-size: cover; - background-size: cover; - -o-background-size: cover; - border: 0px; - min-height: 100px !important; - /* min-height: 800px !important; */ - z-index: 0 !important; -} +/* HEADER +https://raw.githubusercontent.com/nextcloud/nextcloud.com/master/assets/css/modules/header.css */ +@-moz-document url-prefix() { + .brand { + -webkit-transform: scale(0.5); + top: -26px !important; } } +nav a { + text-decoration: none; } +.mobile-bg-container { + position: fixed; + -webkit-transform: translateZ(0); + transform: translateZ(0); + opacity: 0; } + @media (min-width: 991px) { + .mobile-bg-container { + display: none; } } + .mobile-bg-container.visible { + display: block; } + @media (min-width: 991px) { + .mobile-bg-container.visible { + display: none; } } + .mobile-bg-container.is-animatable { + opacity: 1; + width: 100%; + min-height: 100%; } + .mobile-bg-container .mobile-bg { + position: absolute; + background: #0082c9; + z-index: 2; + border-radius: 50%; + transition: all 0.3s ease-out; } + .mobile-bg-container .mobile-bg:not(.active) { + top: 0 !important; + right: calc(15px + 5%) !important; + width: 49px !important; + height: 49px !important; } -} +.nav { + z-index: 10; + padding-top: 20px; + position: absolute; + left: 0; + right: 0; + background: #0082c9; + position: relative; + opacity: 0; } + .nav.headroom { + transition: transform 500ms ease; } + .nav.headroom--not-top { + position: fixed !important; } + .nav.headroom--pinned { + transform: translate3d(0px, 0px, 0px); + opacity: 1; } + .nav.headroom--unpinned { + transform: translate3d(0px, -100px, 0px); + opacity: 0; } + .nav .container { + position: relative; + /* Fix ul and li settings in common */ } + @media (max-width: 992px) { + .nav .container { + width: 90%; } } + .nav .container .nav__bg-wrapper { + -webkit-transition: 0.3s; + transition: 0.3s; + position: absolute; + left: 0; + top: 100%; + visibility: hidden; + transition: 0.3s; + will-change: opacity; + z-index: -2; + top: 50px; } + .nav .container .nav__bg-wrapper.is-visible { + visibility: visible; + opacity: 1; } + .nav .container .nav__bg-wrapper .nav__bg { + width: 300px; + height: 200px; + background: white; + box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.11); + border: solid 1px #f1f1f1; + border-radius: 4px; + -webkit-transform-origin: left top; + transform-origin: left top; + will-change: transform; + visibility: hidden; + position: absolute; + z-index: 5; + top: 100%; } + .nav .container .nav__bg-wrapper .nav__bg:before { + content: ""; + position: absolute; + bottom: 100%; + left: 50%; + right: auto; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + height: 0; + width: 0; + border: 8px solid transparent; + border-bottom-color: #f1f1f1; } + .nav .container .nav__bg-wrapper .nav__bg:after { + content: ""; + position: absolute; + bottom: 100%; + left: 50%; + right: auto; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + height: 0; + width: 0; + border: 6px solid transparent; + border-bottom-color: white; } + .nav .container .nav__bg-wrapper .nav__bg.is-animatable { + -webkit-transition: 0.3s; + transition: 0.3s; + visibility: visible; + display: block; } + .nav .container .navbar-toggle { + display: none; } + .nav .container .brand { + z-index: 8; + position: absolute; + top: 0; + left: 0; } + .nav .container .brand .logo:not(.scrolled):not(.menu-open) { + background: url(img/logo_white_sprite.png) 0 0 no-repeat; + height: 100px; + width: 140px; + display: inline-block; + zoom: 0.5; } + .nav .container .brand .logo:not(.scrolled):not(.menu-open).hoverPlay { + background-position-x: 0; + -webkit-animation: play 2s steps(33) forwards; + -moz-animation: play 2s steps(33) forwards; + -ms-animation: play 2s steps(33) forwards; + -o-animation: play 2s steps(33) forwards; + animation: play 2s steps(33) forwards; } + .nav .container .brand .logo:not(.scrolled):not(.menu-open).stopedAnimation { + background-position-x: -4620px; } + .nav .container ul { + margin-top: 0px; } + .nav .container ul li { + margin-top: 0px; } + .nav .container .nav__sections { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + list-style-type: none; + position: absolute; + z-index: -1; + left: 20%; + top: 0%; } + @media (max-width: 1200px) { + .nav .container .nav__sections { + left: 10%; } } + .nav .container .nav__sections .nav__section { + padding: 15px 0 15px 0; + position: relative; } + .nav .container .nav__sections .nav__section:hover .nav__label { + opacity: 0.6; + cursor: default; + text-decoration: none; } + .nav .container .nav__sections .nav__section:hover .nav__links { + visibility: visible; + opacity: 1; + position: absolute; + left: 50%; + transform: translateX(-50%) translateZ(1px); } + .nav .container .nav__sections .nav__section .nav__label { + display: inline-block; + padding-left: 30px; + padding-bottom: 5px; + color: white; + -webkit-transition: 0.3s; + transition: 0.3s; + font-size: 16px; } + .nav .container .nav__sections .nav__section .nav__links { + position: absolute; + padding: 20px 20px 20px 35px; + visibility: hidden; + opacity: 0; + list-style-type: none; + transition: opacity 0.3s ease; + transition-delay: 0.1s; } + .nav .container .nav__sections .nav__section .nav__links .nav__item { + color: #666; + white-space: nowrap; } + .nav .container .nav__sections .nav__section .nav__links .nav__item a { + display: block; + padding: 5px 10px 0 0px; + font-size: 16px; + color: #555; } + .nav .container .nav__sections .nav__section .nav__links .nav__item a .nav__logo { + width: 45px; + min-height: 15px; + float: left; + vertical-align: middle; } + .nav .container .nav__sections .nav__section .nav__links .nav__item a .nav__logo img { + margin-top: 5px; + padding: 10px 8px 0 0; + height: 40px; + width: 40px; } + .nav .container .nav__sections .nav__section .nav__links .nav__item a .nav__text { + line-height: 1; + padding: 10px 30px 10px 0; } + .nav .container .nav__sections .nav__section .nav__links .nav__item a .nav__text strong { + line-height: 1.2; + font-weight: normal; + font-size: 18px; } + .nav .container .nav__sections .nav__section .nav__links .nav__item a .nav__text small { + opacity: 0.8; } + .nav .container .nav__sections .nav__section .nav__links .nav__item a:hover { + opacity: 0.6; + text-decoration: none; } + .nav .container .nav__sections .nav__section .nav__links .nav__item:not(:last-of-type) a { + padding-bottom: 5px; } + .nav .container .right-buttons { + position: absolute; + top: 0; + right: 0; + margin-top: 15px; } + .nav .container .right-buttons .ghost-btn { + text-align: center; + position: relative; + display: inline-block; } + .nav .container .right-buttons .ghost-btn a { + -webkit-transition: 0.3s; + transition: 0.3s; + position: relative; } + .nav .container .right-buttons .ghost-btn a:before { + content: ""; + position: absolute; + width: 100%; + height: 2px; + bottom: 0; + left: 0; + background-color: white; + visibility: hidden; + -webkit-transform: scaleX(0); + transform: scaleX(0); + -webkit-transition: all 0.2s ease-in-out 0s; + transition: all 0.2s ease-in-out 0s; } + .nav .container .right-buttons .ghost-btn:hover a { + text-decoration: none; } + .nav .container .right-buttons .ghost-btn:hover a:before { + visibility: visible; + -webkit-transform: scaleX(1); + transform: scaleX(1); } + .nav .container .right-buttons li { + display: inline-block; + padding-left: 30px; + padding-bottom: 5px; + font-size: 16px; + margin-top: 0px; } + .nav .container .right-buttons li a { + color: white; } -div.page-header { - border-bottom: 0px solid #EEE; -} -/* Remove border from navbar (defined in main.min.css) */ -.navbar { - border: 1px solid transparent; -} +@media (max-width: 992px) { + .nav .container .brand { + padding-left: 15px; } + .nav .container .brand .logo { + height: 53px; + width: 71px; } + .nav .container .brand .logo.menu-open { + background: url(../img/logo/logo_white_sprite.png) 0 0 no-repeat; + height: 100px; + width: 140px; + display: inline-block; + zoom: 0.5; } + .nav .container .brand .logo.menu-open.hoverPlay { + background-position-x: 0; + -webkit-animation: play 2s steps(33) forwards; + -moz-animation: play 2s steps(33) forwards; + -ms-animation: play 2s steps(33) forwards; + -o-animation: play 2s steps(33) forwards; + animation: play 2s steps(33) forwards; } + .nav .container .brand .logo.menu-open.stopedAnimation { + background-position-x: -4620px; } + .nav .container .mobile-bg { + position: fixed; + background: #0082c9; + padding-top: 25px; + z-index: 7; + top: 0; + right: 0; + width: 0; + height: 0; + visibility: hidden; + overflow: hidden; + border-bottom-left-radius: 100%; + transition: all 0.6s ease; } + .nav .container .active { + opacity: 1; + visibility: visible; + width: 150%; + height: 150%; } + .nav .container .navbar-toggle { + color: white; + background-color: white; + border-radius: 50px; + width: 50px; + height: 50px; + margin-top: 0; + z-index: 8; + display: block; + margin-right: 0; + border: none; + float: right; } + .nav .container .navbar-toggle:hover { + transform: scale(1.1); + transition: transform 0.3s cubic-bezier(0.56, 1, 0.86, 1.39); + transition-property: transform; + transition-duration: 0.3s; + transition-timing-function: cubic-bezier(0.56, 1, 0.86, 1.39); + transition-delay: initial; } + .nav .container .nav__sections-wrapper { + margin: 0 auto; + display: inline-block; + position: absolute; + top: 90px; + z-index: 2; + padding: 0; } + .nav .container .nav__sections-wrapper .nav__sections { + display: none; + position: relative; + left: 0; + padding: 0; + visibility: hidden; } + .nav .container .nav__sections-wrapper .nav__sections .nav__section { + display: block; + opacity: 1; + margin: 0; + opacity: 0; + color: white; + padding: 0; + visibility: hidden; } + .nav .container .nav__sections-wrapper .nav__sections .nav__section:last-child { + font-weight: 500; } + .nav .container .nav__sections-wrapper .nav__sections .nav__section a { + color: white; + text-decoration: none; } + .nav .container .nav__sections-wrapper .nav__sections.active { + display: block; + color: white; + margin: 0; + visibility: visible; } + .nav .container .nav__sections-wrapper .nav__sections.active .nav__section { + animation: fadeInRight .5s ease forwards; + animation-delay: .35s; + visibility: visible; } + .nav .container .nav__sections-wrapper .nav__sections.active .nav__section .nav__label { + font-size: 20px; + line-height: 20px; + padding-left: 0; + font-weight: 400; } + .nav .container .nav__sections-wrapper .nav__sections.active .nav__section:nth-of-type(2) { + animation-delay: .4s; } + .nav .container .nav__sections-wrapper .nav__sections.active .nav__section:nth-of-type(3) { + animation-delay: .45s; } + .nav .container .nav__sections-wrapper .nav__sections.active .nav__section:nth-of-type(4) { + animation-delay: .50s; } + .nav .container .nav__sections-wrapper .nav__sections.active .nav__section:nth-of-type(5) { + animation-delay: .55s; } + .nav .container .nav__sections-wrapper .nav__sections.active .nav__section:nth-of-type(6) { + animation-delay: .60s; } + .nav .container .nav__sections-wrapper .nav__sections.active .nav__section:nth-of-type(7) { + animation-delay: .65s; } + .nav .container .nav__sections-wrapper .nav__sections.active .nav__section:nth-of-type(8) { + animation-delay: .70s; } + .nav .container .nav__sections-wrapper .nav__sections.active .nav__section .nav__links { + display: none; + position: relative; + padding: 0; + width: 100%; + padding: 0 10px 0 20px; } + .nav .container .nav__sections-wrapper .nav__sections.active .nav__section .nav__links .nav__item { + margin-left: 0; } + .nav .container .nav__sections-wrapper .nav__sections.active .nav__section .nav__links .nav__item a { + font-size: 18px; + line-height: 18px; + color: white; + margin-left: 0; + font-weight: 300; } + .nav .container .nav__sections-wrapper .right-buttons { + position: relative; + padding: 0; + margin: 0; + opacity: 0; + transition: all 0.3s; } + .nav .container .nav__sections-wrapper .right-buttons.active { + opacity: 1; + transition-delay: .65s; } + .nav .container .nav__sections-wrapper .right-buttons.active .nav__label { + color: white; } + .nav .container .nav__sections-wrapper .right-buttons.active .ghost-btn a { + pointer-events: all; } + .nav .container .nav__sections-wrapper .right-buttons .ghost-btn { + font-size: 20px; + line-height: 20px; + padding-left: 0; + font-weight: 400; + display: block; + text-align: left; + padding-left: 0; + animation: fadeInRight .5s ease forwards; + pointer-events: none; } } +@keyframes fadeInRight { + 0% { + opacity: 0; + left: 20%; } + 100% { + opacity: 1; + left: 0; } } +/** +* Scrolled navbar style +*/ +.nav { + padding-bottom: 70px; + transition: all .2s ease-in; } + @media (max-width: 992px) { + .nav { + padding-bottom: 20px; } } + .nav.no-shadow { + box-shadow: none !important; } + .nav.scrolled { + position: fixed; + background: white; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.09); } + .nav.scrolled .navbar-toggle:not(.active) { + background-color: #0082c9; } + .nav.scrolled .navbar-toggle:not(.active) svg { + filter: invert(100%); } + .nav.scrolled .logo:not(.menu-open) { + background: url(img/logo_blue_sprite.png) 0 0 no-repeat; + height: 100px; + width: 140px; + display: inline-block; + zoom: 0.5; } + .nav.scrolled .logo:not(.menu-open).hoverPlay { + background-position-x: 0; + -webkit-animation: play 2s steps(33) forwards; + -moz-animation: play 2s steps(33) forwards; + -ms-animation: play 2s steps(33) forwards; + -o-animation: play 2s steps(33) forwards; + animation: play 2s steps(33) forwards; } + .nav.scrolled .logo:not(.menu-open).stopedAnimation { + background-position-x: -4620px; } + .nav.scrolled .nav__sections-wrapper .nav__sections .nav__section .nav__label, .nav.scrolled .nav__sections-wrapper .nav__sections .ghost-btn .nav__label, .nav.scrolled .nav__sections-wrapper .nav__sections .ghost-btn .nav__label, .nav.scrolled .nav__sections-wrapper .right-buttons:not(.active) .nav__section .nav__label, .nav.scrolled .nav__sections-wrapper .right-buttons:not(.active) .ghost-btn .nav__label, .nav.scrolled .nav__sections-wrapper .right-buttons:not(.active) .ghost-btn .nav__label { + color: #555; } + .nav.scrolled .nav__sections-wrapper .nav__sections .nav__section .nav__label:before, .nav.scrolled .nav__sections-wrapper .nav__sections .ghost-btn .nav__label:before, .nav.scrolled .nav__sections-wrapper .nav__sections .ghost-btn .nav__label:before, .nav.scrolled .nav__sections-wrapper .right-buttons:not(.active) .nav__section .nav__label:before, .nav.scrolled .nav__sections-wrapper .right-buttons:not(.active) .ghost-btn .nav__label:before, .nav.scrolled .nav__sections-wrapper .right-buttons:not(.active) .ghost-btn .nav__label:before { + background-color: #555; } + .nav.mobile .nav__sections-wrapper .nav__sections .nav__section .nav__label, .nav.mobile .nav__sections-wrapper .ghost-btn .nav__section .nav__label { + color: white; } + +/** +*Changed default media querys for navigation in bootstrap +*/ +@media (max-width: 1200px) { + .navbar-header { + float: none; } + + .navbar-left, .navbar-right { + float: none !important; } + + .navbar-toggle { + display: block; } + + .navbar-collapse { + border-top: 1px solid transparent; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } + + .navbar-fixed-top { + top: 0; + border-width: 0 0 1px; } + + .navbar-collapse.collapse { + display: none !important; } + + .navbar-nav { + float: none !important; + margin-top: 7.5px; } + + .navbar-nav > li { + float: none; } + + .navbar-nav > li > a { + padding-top: 10px; + padding-bottom: 10px; } + + .collapse.in { + display: block !important; } + + .navbar-nav .open .dropdown-menu { + position: static; + float: none; + width: auto; + margin-top: 0; + background-color: transparent; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; } } +@keyframes play { + from { + background-position-x: 0px; } + to { + background-position-x: -4620px; } } .banner img { padding: 15px 0;