/**
 * @version     1.1.0
 * @package     plg_pulltorefresh
 * @copyright   Copyright (C) 2014. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 * @author      JoomlaForce Team <support@joomlaforce.com> - http://www.joomlaforce.com
 */
 
 
 
/* 'customizable' declares that a property can be customized without breaking functionality */
/*body { padding: 0; }*/

            /* pull down is a translate3d y position */
        #container {
            position: relative;
  /*   padding: 20px;
      -webkit-transition: -webkit-transform 0ms;
            transform: translate3d(0,0,0) scale3d(1,1,1);
            -o-transform: translate3d(0,0,0) scale3d(1,1,1);
            -ms-transform: translate3d(0,0,0) scale3d(1,1,1);
            -moz-transform: translate3d(0,0,0) scale3d(1,1,1);
            -webkit-transform: translate3d(0,0,0) scale3d(1,1,1);*/
            -webkit-backface-visibility: hidden;
			z-index:9999 !important;
        }

            /* slide up with small animation */
        #container.pullrefresh-slideup,
        #container.pullrefresh-loading {
            -o-transition: -o-transform .3s;
            -ms-transition: -ms-transform .3s;
            -moz-transition: -moz-transform .3s;
            -webkit-transition: -webkit-transform .3s;
			
        }

            /* place the pullrefresh box above the container */
        #pullrefresh {
            display: block;
            overflow: hidden;
            position: absolute;
            top: -513px;
            left: 0;
            width: 100%;
            height: 490px;
            background: #ccc;
            box-shadow: 0 -5px 10px #bbb inset;
			
        }

        #pullrefresh .message {
            position: absolute;
            left: 0;
            bottom: 20px;
            right: 0;
            color: #777;
            text-align: center;
            text-shadow: 1px 1px 0 #dfdfdf;
            font-weight: bold;
        }

            /* change message with css */
        #pullrefresh .message span:after { content: "Pull to refresh..."; }
        .pullrefresh-breakpoint #pullrefresh .message span:after { content: "Release to refresh..."; }
        .pullrefresh-loading #pullrefresh .message span:after { content: "Refresh Page..."; }


            /* icon */
        #pullrefresh .icon {
            position: absolute;
            left: 20px;
        }

            /* arrow icon */
        #pullrefresh .icon.arrow {
            background: url(assets/img/arrow.png) no-repeat;
            width: 71px;
            height: 28px;
            bottom: 10px;

            transform: rotate(90deg);
            transition: transform .3s;
            -o-transform: rotate(90deg);
            -o-transition: -o-transform .3s;
            -ms-transform: rotate(90deg);
            -ms-transition: -ms-transform .3s;
            -moz-transform: rotate(90deg);
            -moz-transition: -moz-transform .3s;
            -webkit-transform: rotate(90deg);
            -webkit-transition: -webkit-transform .3s;
            -webkit-backface-visibility: hidden;
        }

        #pullrefresh .icon.arrow.arrow-up {
            transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
        }

        /* spinner icon */
        /* rotate spinner with css animation */
        @keyframes rotate{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }
        @-o-keyframes rotate{ 0%{ -o-transform: rotate(0deg); } 100%{ -o-transform: rotate(360deg); } }
        @-ms-keyframes rotate{ 0%{ -ms-transform: rotate(0deg); } 100%{ -ms-transform: rotate(360deg); } }
        @-moz-keyframes rotate{ 0%{ -moz-transform: rotate(0deg); } 100%{ -moz-transform: rotate(360deg); } }
        @-webkit-keyframes rotate{ 0%{ -webkit-transform: rotate(0deg); } 100%{ -webkit-transform: rotate(360deg); } }

        #pullrefresh .icon.loading {
            background: url(assets/img/spinner.png) no-repeat;
            width: 19px;
            height: 19px;
            background-size: 100%;
            bottom: 0;

            animation: rotate 1s linear infinite;
            -o-animation: rotate 1s linear infinite;
            -ms-animation: rotate 1s linear infinite;
            -moz-animation: rotate 1s linear infinite;
            -webkit-animation: rotate 1s linear infinite;
        }