@import url('democontent.css');

/*
  Content - Features
*/
#features{  }

   #features h2{
      margin-bottom: 11px;
   }

   #features h4{
      color: #A2D959;
   }

   #features ul.features{
      float: left;
      position: relative;
      margin-right: -1px;
   }

      #features ul.features li{
         line-height: 9px;
      }
      #features ul[class=features] li{ line-height: 21px; }

      #features ul.features li a,
      #features ul.features li a:link,
      #features ul.features li a:visited{
         display: block;
         padding: 12px 35px 12px 10px;
         position: relative;

         font-size: 21px;
         color: #505050;
      }
      #features ul.features li.active a{
         padding: 11px 30px 11px 15px;
         position: relative;

         border: 1px solid #e1e1e1;
         border-width: 1px 0 1px 1px;
         background-color: white;
         color: #68BADA;
      }

   #features p{
      margin: 10px 0;
   }

   #features ul.showcase{
      float: left;
      width: 674px;
      padding: 10px 20px 10px;

      border: 1px solid #e1e1e1;
      background-color: white;

      font-size: 16px;
      line-height: 22px;
      overflow: hidden;
   }
   #features ul[class=showcase]{ float: none; width: auto; }

      #features ul.showcase li{ display: none; }

         #features ul.showcase li.active{ display: block; }


      /*
         Content - Features - Browsers
      */
      #features ul.showcase li.browsers{}

         #features ul.showcase li.browsers .list{
            margin-top: 15px;
            padding: 13px 0 13px 65px;

            border-top: 1px solid #f2f2f2;
            border-bottom: 1px solid #f2f2f2;
         }

            #features ul.showcase li.browsers .list .browser{
               width: 50px;
               float: left;

               margin: 0 45px 0 0;
               overflow: hidden;

               text-align: center;
            }

               #features ul.showcase li.browsers .list .browser img{
                  height: 50px;
                  width: 50px;
                  margin: 3px 0 7px;

                  behavior: url('/css/iepngfix.htc');
               }

         #features ul.showcase li.browsers p.note{
            padding: 10px 0;
         }


      /*
         Content - Features - Degradable
      */
      #features ul.showcase li.degradable{}

         #features ul.showcase li.degradable .example{
            text-align: center;
         }

            #features ul.showcase li.degradable .example img{
               margin: 0 0 15px;
            }

      /*
         Content - Features - Rounded Corners
      */
      #features ul.showcase li.round{}

         #features ul.showcase li.round .solution,
         #features ul.showcase li.round .examples{
            padding: 8px 0;
            margin: 18px 0;

            border: 1px solid #f2f2f2;
            border-width: 1px 0;

            text-align: center;
            font-size: 18px;
            color: #68BADA;
         }

         #features ul.showcase li.round .examples{
            margin: 70px 0 90px;

            color: #505050;
         }

         #features ul.showcase li.round .qtip .qtip-content{
            text-align: center;
         }


      /*
         Content - Features - Tips
      */
      #features ul.showcase li.tips{}

         #features ul.showcase li.tips .cartoon{
            width: 118px;
            height: 126px;
            margin: 130px auto;
            text-align: center;

            background: transparent url('/projects/qtip/images/features/owl.png') no-repeat 50% 100%;
            behavior: url('/css/iepngfix.htc');
         }


      /*
         Content - Features - Easy Positioning
      */
      #features ul.showcase li.position{}

         #features ul.showcase li.position .wrong{
            float: right;
            margin: 10px 0 10px 20px;
         }

         #features ul.showcase li.position p{
            overflow: hidden;
         }

         #features ul.showcase li.position .corners{
            margin: 30px 0 10px;
            text-align: center;
         }


      /*
         Content - Features - Styles
      */
      #features ul.showcase li.styles{}

         #features ul.showcase li.styles .example{
            height: 83px;
            margin: 5px 0 7px;

            text-align: center;
         }

         #features ul.showcase li.styles code{
            font-size: 14px;
            text-align: left;
         }

         #features ul.showcase li.styles p.note{ clear: both; }


      /*
         Content - Features - Degradable
      */
      #features ul.showcase li.stacking{}

         #features ul.showcase li.stacking .example{
            padding: 75px 0 15px;
            height: 80px;
         }

         #features ul.showcase li.stacking .example span{
            width: 40px;
         }


      /*
         Content - Features - Effects
      */
      #features ul.showcase li.effects{}

         #features ul.showcase li.effects h4 span{
            overflow: hidden;
            color: #8FD401;
            font-size: 19px;
         }

         #features ul.showcase li.effects .examples{
            height: 4px;
            margin: 20px 0 90px;
         }

         #features ul.showcase li.effects .qtip .qtip-content{
            cursor: pointer;
         }


      /*
         Content - Features - Dynamic content
      */

      #features ul.showcase li.ajax{}

         #features ul.showcase li.ajax .qtip{
            margin: 0 auto;
         }

         #features ul.showcase li.ajax .qtip .qtip-content{
            cursor: pointer;
         }

         #features ul.showcase li.ajax .example{
            margin: 20px 0 10px;
         }

      /*
         Content - Features - Scripting API
      */
      #features ul.showcase li.api{
         height: 410px;

         background: transparent url('/projects/qtip/images/features/code.png') no-repeat 110% 150%;
      }

         #features ul.showcase li.api img.apilogo{
            height: 115px;
            width: 150px;
            behavior: url('/css/iepngfix.htc');
         }