/* First 9 rules are the pages - leave them at top - sxcript assumes this location*/
/*
 First page is shown by default. Other pages are animated in as the user swipes
 left or right.  The currently shown page is animated off screen in the direction
 of the swipe.
 */
div#page01{left:0px;opacity: 0.0;}
/* Initially all hidden right */
div#page02{left:320px;-webkit-animation-timing-function: ease-in;opacity: 0.0;}
div#page03{left:320px;-webkit-animation-timing-function: ease-in;opacity: 0.0;}
div#page04{left:320px;-webkit-animation-timing-function: ease-in;opacity: 0.0;}
div#page05{left:320px;-webkit-animation-timing-function: ease-in;opacity: 0.0;}
div#page06{left:320px;-webkit-animation-timing-function: ease-in;opacity: 0.0;}
div#page07{left:320px;-webkit-animation-timing-function: ease-in;opacity: 0.0;}
div#page08{left:320px;-webkit-animation-timing-function: ease-in;opacity: 0.0;}
div#page09{left:320px;-webkit-animation-timing-function: ease-in;opacity: 0.0;}
div#paging 
{    
    -webkit-transition-duration: 0.5s;
    -webkit-transition-property: top;
    -webkit-transition-timing-function: ease-in-out;
    margin-top:10px;
    position: absolute;
    text-decoration:none;
    word-wrap: nowrap;
    color:white;
    font-style: normal;
    font-size:32;
    font-weight: 800;
    font-family: Helvetica, sans-serif;
    text-align:center;
    top: 370px;
    left: 5px;
    width:94%;
}
div#pageon
{
    display: inline-block;    
    /*padding-top:4px;*/
    padding-left:6px;
    color:white;
    font-style: normal;
    font-size:32;
    font-weight: 800;
    font-family: Helvetica, sans-serif;
    text-align:center;    
}
div#pageoff
{
    display: inline-block;    
    /*padding-top:4px;*/
    padding-left:6px;
    color:gray;
    font-style: normal;
    font-size:32;
    font-weight: 800;
    font-family: Helvetica, sans-serif;
    text-align:center;    
}
img#pageonimg
{
    height:10;    
    width:10;    
}
img#pageoffimg
{
    height:10;    
    width:10;    
}
@-webkit-keyframes hideToLeft 
{
    0% 
    {
        left:0px;
        opacity: 1.0;
    }
    100% 
    {
        left:-320px;
        opacity: 0.0;
    }
}
@-webkit-keyframes showFromRight 
{
    0% 
    {
        left:320px;
        opacity: 0.0;
    }
    100% 
    {
        left:0px;
        opacity: 1.0;
    }
}
@-webkit-keyframes hideToRight 
{
    0% 
    {
        left:0px;
        opacity: 1.0;
    }
    100% 
    {
        left:320px;
        opacity: 0.0;
    }
}
@-webkit-keyframes showFromLeft 
{
    0% 
    {
        left:-320px;
        opacity: 0.0;
    }
    100% 
    {
        left:0px;
        opacity: 1.0;
    }
}
@-webkit-keyframes fakeRight 
{
    0% 
    {
        left:0px;
        opacity: 1.0;
    }
    50% 
    {
        left:100px;
        opacity: 0.5;
    }
    100% 
    {
        left:0px;
        opacity: 1.0;
    }
}
@-webkit-keyframes fakeLeft 
{
    0% 
    {
        left:0px;
        opacity: 1.0;
    }
    50% 
    {
        left:-100px;
        opacity: 0.5;
    }
    100% 
    {
        left:0px;
        opacity: 1.0;
    }
}
@-webkit-keyframes appearAnimation 
{
    0% 
    {
        opacity: 0.0;
    }
    100% 
    {
        opacity: 1.0;
    }
}
/* Other elements of the page */
div#icon 
{
    position: relative;
    width:77px;
    height:77px;
    text-align:center;
    vertical-align:center;
    top: 0px;
    left: -3px;
}
div#icon img 
{
    -webkit-transition-duration: 0.5s;
    -webkit-transition-property: top;
    -webkit-transition-timing-function: ease-in-out;
    
    position: relative;
    top:13px;
    left:0px;
}
.springboard-header {
    width:100%; 
}

div#springboard 
{
    overflow: hidden;
    -webkit-transition-duration: 5.0s;
    -webkit-transition-property: background;
    -webkit-transition-timing-function: ease-in-out;
}

/* Rows */
div#row01
{
    -webkit-transition-duration: 0.5s;
    -webkit-transition-property: top;
    -webkit-transition-timing-function: ease-in-out;
    
    position: relative;
    top:0px;
    left:13px;    
}
div#row02
{
    -webkit-transition-duration: 0.5s;
    -webkit-transition-property: top;
    -webkit-transition-timing-function: ease-in-out;
    
    position: relative;
    top:120px;
    left:13px;    
}
div#row03
{
    -webkit-transition-duration: 0.5s;
    -webkit-transition-property: top;
    -webkit-transition-timing-function: ease-in-out;
    
    position: relative;
    top:240px;
    left:13px;    
}

/* Items in row */
div#item01
{
    -webkit-transition-duration: 0.5s;
    -webkit-transition-property: left;
    -webkit-transition-timing-function: ease-in-out;
    
    position: absolute;
    top:0px;
    left:0px;
}
div#item02
{
    -webkit-transition-duration: 0.5s;
    -webkit-transition-property: left;
    -webkit-transition-timing-function: ease-in-out;
    
    position: absolute;
    top:0px;
    left:105px;
}
div#item03
{
    -webkit-transition-duration: 0.5s;
    -webkit-transition-property: left;
    -webkit-transition-timing-function: ease-in-out;
    
    position: absolute;
    top:0px;
    left:210px;
}

div#title a 
{
    -webkit-transition-duration: 0.5s;
    -webkit-transition-property: top;
    -webkit-transition-timing-function: ease-in-out;

    margin-top:2px;
    padding:2px;
    padding-right:4px;
    padding-left:4px;
    padding-top:2px;
    padding-bottom:2px;
    position: absolute;
    text-decoration:none;
    word-wrap: nowrap;
    color:white;
    font-style: normal;
    font-size:12;
    font-weight: 600;
    font-family: Helvetica, sans-serif;
    height:16px;
    width:81px;
    text-align:center;
    top: 77px;
    left: -4px;
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
 
div#springboard > div
{
    -webkit-transition-duration: 0.5s;
    -webkit-transition-property: margin-left, top;
    -webkit-transition-timing-function: ease-in-out;

    overflow: hidden;
    position: absolute;
    padding-left:0px;
    padding-right:0px;
    margin-left:0px;
    margin-right:0px;
    width:100%;
    height:100%;
    top:0px;
}

