topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

mobile-application-11-DerbyApp.iPhone-www-main.css / css



  
  /*---------Scroll area code----------*/
  
  #wrapper {
          height:270px;                /* Of course you need to specify the object height */
          position:relative;        /* On older OS versions "position" and "z-index" must be defined (absolute | relative), */
          z-index:1;                        /* it seems that recent webkit is less picky and works anyway. */
          width:100%;
          /*background:#fff;*/
          overflow:hidden;
  }
  
  #scroller {
  /*	-webkit-touch-callout:none;*/
          -webkit-tap-highlight-color:#393B8F;
          float:left;
          width:100%;
          padding:0;
  /*	-webkit-box-shadow:0 0 8px #555;        /* Don't use box shadows, they slow down drastically CSS animations */
  }
  
  ul {
          list-style:none;
          padding:0;
          margin:0;
          width:100%;
          text-align:left;
  }
  
  li {
          margin:5px 0;
          padding:3px 7px 7px 7px;
          border-bottom:1px solid #ddd;
          list-style-type:none;
          font-size:15px;
          font-weight:bold;
          margin-right:5px;
  }
  
  a:link, a:visited {
          text-decoration:none;
          color:#000;
          font-weight:bold;
  }
  
  /*
  #scroller .letterheader {
          padding:6px 0 6px 7px;
          height:16px;
          font-weight:bold;
          color:#262B85;
          width:100%;
  }
  
  */
  .btnTwoLeft {
          height:23px;
          width:150px;
          background:url(images/btn-two-left.png) no-repeat;
          float:left;
          text-align:center;
          font-size:14px;
          font-weight:200!important;
          color:#fff!important;
          font:Georgia, "Times New Roman", Times, serif;
          padding:7px 0 0 0;
          margin:2px 0;
  }
  
  .btnTwoLeftSelected {
          height:23px;
          width:150px;
          background:url(images/btn-two-left-selected.png) no-repeat;
          float:left;
          text-align:center;
          font-size:14px;
          font-weight:200!important;
          color:#fff!important;
          font:Georgia, "Times New Roman", Times, serif;
          padding:7px 0 0 0;
          margin:2px 0;
  }
  
  .btnTwoRight {
          height:23px;
          width:150px;
          background:url(images/btn-two-right.png) no-repeat;
          float:left;
          text-align:center;
          font-size:14px;
          font-weight:200!important;
          color:#fff!important;
          font:Georgia, "Times New Roman", Times, serif;
          padding:7px 0 0 0;
          margin:2px 0;
  }
  
  .btnTwoRightSelected {
          height:23px;
          width:150px;
          background:url(images/btn-two-right-selected.png) no-repeat;
          float:left;
          text-align:center;
          font-size:14px;
          font-weight:200!important;
          color:#fff!important;
          font:Georgia, "Times New Roman", Times, serif;
          padding:7px 0 0 0;
          margin:2px 0;
  }
Styles specific to the pull down/up element 

  
  .iScrollPullDown,
  .iScrollPullUp {
          background:#fff;
          border-bottom:1px solid #aaa;
          height:40px;
          line-height:40px;
          padding:5px 10px;
          font-size:14px;
          color:#999;
          font-weight:bold;
          -webkit-transform:translate3d(0,0,0);        /* Put the element in the HW accelerated layer */
  }
  
  .iScrollPullDownIcon,
  .iScrollPullUpIcon {
          display:block; float:left;
          width:40px; height:40px;
          background:url(pull-icon.png) 0 0 no-repeat;
          background-size:40px 80px;
          margin-right:5px;
          -webkit-transition-property:-webkit-transform;
          -webkit-transition-duration:250ms;
          -webkit-transform:rotate(0);
  }
  
  .iScrollPullDown.flip .iScrollPullDownIcon {
          -webkit-transform:rotate(-180deg);
  }
  
  .iScrollPullDown.loading .iScrollPullDownIcon,
  .iScrollPullUp.loading .iScrollPullUpIcon {
          background-position:0 100%;
          -webkit-animation-name:loading;
          -webkit-animation-duration:1.5s;
          -webkit-animation-iteration-count:infinite;
          -webkit-animation-timing-function:linear;
  }
  
  .iScrollPullUp {
          border-bottom:0;
  }
  
  .iScrollPullUpIcon {
          -webkit-transform:rotate(-180deg);
  }
  
  .iScrollPullUp.flip .iScrollPullUpIcon {
          -webkit-transform:rotate(0);
  }
  
  
webkit-keyframes loading {

          from { -webkit-transform:rotate(0deg); }
          to { -webkit-transform:rotate(360deg); }
  }
  
  @media screen and (-webkit-min-device-pixel-ratio:2) {
          .iScrollPullDownIcon,
          .iScrollPullUpIcon {
                  background-image:url(pull-icon@2x.png);
          }
  }
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.