topical media & game development

talk show tell print

lib-flow-example-files-global-0.css / css



  
  /* look and feel for embed and email tabs */
  #shareTabs { 
          list-style-type:none; 
          padding:0;        
          float:left;
          margin:13px 0 0 0 !important;
  }
  
  #shareTabs li {          
          padding:0;
          margin:0;
          list-style-image:none !important;        
  }
  
  #shareTabs a {
          background:#444 url(/img/player/sharing.png) repeat scroll 2px 3px;
          display:block;
          width: 38px;  
          height: 38px;
          padding:0px;
          margin:0px;        
          -moz-border-radius-topright:3px;
          -moz-border-radius-bottomright:3px;
  }
  
  #shareTabs a:hover {
          background-color:#000;
  }
  
  #shareTabs a:focus {
          background-color:#444;
  }
          
  #shareTabs a.current {
          background-color:#567078;
  }
  
  #shareTabs #embedTab {
          background-position: 2px -60px;
  }
  
  /* container for each pane: video, embed and email */
  #panes {
          width:460px;
          float:left;        
          color:#fff;
          position:relative;
          z-index:1;        
          font-family:verdana;
          font-size:12px;
          margin-top:20px;
  }
  
  /* embed and email pane */
  #emailPane, #embedPane {        
          padding:10px;
          display:none;
          min-height:265px;        
  }
  
  /* player container style */
  #player {        
          display:block;        
          height:340px;        
          text-align:center;
          color:#fff;
          text-decoration:none;
          cursor:pointer;
  }
  
  #panes input, #panes textarea {
          width:420px;
          font-size:12px;
          font-family:verdana;
          border:1px inset #666;         
          padding:2px;
  }
  
  #panes textarea {
          padding:4px;
          height:100px;
  }
  
  #panes label.left {
          float:left;
          margin-right:15px;        
  }
  
  #panes label.left input {
          width:180px;                
  }
  
  #panes h2 {
          margin-top:0px !important;                
  }
  
  #embedPane textarea {
          height:130px;
          overflow-x:hidden;
          padding:4px;
          color:#123;
  }
  
  /* close image */
  div.close {
          background:url(/img/overlay/close.png) no-repeat;
          position:absolute;
          top:5px;
          right:5px;
          width:35px;
          height:35px;
          cursor:pointer;
  }
  
  /*{{{ general playlist settings, light gray */
  div.playlist {
  
          position:relative;
          overflow:hidden;                 
          height:285px !important;
  }
  
  div.playlist div.clips {        
          position:absolute;
          height:20000em;
  }
  
  div.playlist, div.clips {
          width:260px;        
  }
  
  div.clips a {
          display:block;
          background-color:#fefeff;
          padding:12px 15px;
          height:46px;
          width:196px;
          font-size:12px;
          border:1px outset #ccc;                
          text-decoration:none;
          letter-spacing:-1px;
          color:#000;
  }
  
  div.clips a.first {
          border-top-width:1px;
  }
  
  div.clips a.playing, div.clips a.paused, div.clips a.progress {
          background:url(/img/playlist/light.png) no-repeat 0px -69px;
          padding-right:60px;
          border:0;
  }
          
  div.clips a.progress {
          opacity:0.6;                
  }
  
  div.clips a.paused {
          background-position:0 0;        
  }
  
  div.clips a span {
          display:block;                
          font-size:11px;
          color:#666;
  }
  
  div.clips a em {
          font-style:normal;
          color:#f00;
  }        
  
  div.clips a:hover {
          background-color:#f9f9fa;                
  }
  
  div.clips a.playing:hover, div.clips a.paused:hover, div.clips a.progress:hover {
          background-color:transparent !important;                 
  }
  /*}}}*/
  
  /*{{{ petrol colored */
  
  div.clips.petrol a {
          background-color:#193947;
          color:#fff;
          border:1px outset #193947;
  }
  
  div.clips.petrol a.playing, div.clips.petrol a.paused, div.clips.petrol a.progress {
          background:url(/img/playlist/dark.png) no-repeat 0px -69px;
          border:0;
  }
  
  div.clips.petrol a.paused {
          background-position:0 0;        
  }
  
  div.clips.petrol a span {
          color:#aaa;
  }
  
  div.clips.petrol a em {
          color:#FCA29A;
          font-weight:bold;
  }        
  
  div.clips.petrol a:hover {
          background-color:#274D58;                
  } 
  
  div.clips.petrol a.playing:hover, div.clips.petrol a.paused:hover, div.clips.petrol a.progress:hover {
          background-color:transparent !important;                 
  }
  /*}}}*/
  
  /*{{{ low version */
  
  div.clips.low a {        
          height:31px;
  }
  
  div.clips.low a.playing, div.clips.low a.paused, div.clips.low a.progress {
          background-image:url(/img/playlist/light_small.png);
          background-position:0 -55px;
  }
  
  div.clips.low a.paused {
          background-position:0 0;        
  }
  
  /*}}}*/
  
  /*{{{ go buttons */
  
  a.go {
          display:block;
          width:18px;
          height:18px;
          background:url(/img/playlist/arrow/up.png) no-repeat;
          margin:5px 0 5px 105px;
          cursor:pointer;
  }
  
  a.go:hover, a.go.down:hover {
          background-position:0px -18px;                
  }
  
  a.go.down {
          background-image:url(/img/playlist/arrow/down.png);        
  }
  
  div.petrol a.go {
          background-image:url(/img/playlist/arrow/up_dark.png);                
  }
  
  div.petrol a.go.down {
          background-image:url(/img/playlist/arrow/down_dark.png);                
  }
  
  a.go.disabled {
          visibility:hidden;                
  }
  
  /*}}}*/
  
  /* root element should be positioned relatively so that 
          child elements can be positioned absolutely */
  div.hulu {
          position:relative;
          height:40px;
          
          /* black background with a gradient */
          background:#000 url(/img/player/skin/hulu.png) repeat-x 0 -4px;
          width:500px;
  }
  
  /* play/pause button */
  div.hulu a.play, div.hulu a.pause { 
          position:absolute;
          width: 46px;
          height: 40px;
          display:block;
          text-indent:-9999em;
          background:url(/img/player/skin/hulu.png) no-repeat 10px -61px;
          cursor:pointer;
          border-right:1px solid #000; 
  }
  
  div.hulu a.play:hover {
          background-position:10px -105px;        
  }
  
  /* pause state */
  div.hulu a.pause { 
          background-position:11px -148px;
  }
  
  div.hulu a.pause:hover {
          background-position:11px -192px;        
  }
  
  /* the timeline (or "scrubber")  */
  div.hulu div.track {  
          left:47px;
          position:absolute;
          cursor:pointer;
          width:285px;
          border-left:1px solid #999;
          height:40px;        
  }
  
  /* the draggable playhead */
  div.hulu div.playhead {
          position:absolute;
          cursor:pointer; 
          background-color:#4ff;
          opacity:0.3;
          filter: alpha(opacity=30);        
          width:3px;
          height:40px;
          border-right:1px solid #444;
  }
  
  /* buffer- and progress bars. upon runtime the width of these elements grows */
  div.hulu div.progress, div.hulu div.buffer {        
          position:absolute;
          background-color:#4ff;
          filter: alpha(opacity=10);
          opacity:0.1;
          width:0px;
          height:40px;
  }
  
  div.hulu div.buffer {
          background-color:#fff;
          opacity:0.1;
          filter: alpha(opacity=10);
  }
  
  /* time display */
  div.hulu div.time {
          position:absolute;                
          width:129px;
          left:330px;
          padding:12px 0;
          text-align:center;
          border:1px solid #999;
          border-width:0 1px;
          
          font-family:futura,"Lucida Grande","bitstream vera sans","trebuchet ms",verdana,arial;        
          font-size:12px;
          color:#fff; 
  }
  
  /* total duration in time display */
  div.hulu div.time strong {
          font-weight:normal;
          color:#666;
  }
  
  /* mute / unmute buttons */
  div.hulu a.mute, div.hulu a.unmute {
          position:absolute;
          left:460px;
          width:40px;
          height:40px;
          text-align:center;
          padding:8px 0;
          cursor:pointer;
          text-indent:-9999em;
          background:url(/img/player/skin/hulu.png) no-repeat 5px -323px;
  }
  
  div.hulu a.mute:hover {
          background-position:5px -367px;        
  }
  
  /* unmute state */
  div.hulu a.unmute {
          background-position:5px -235px;        
  }
  
  div.hulu a.unmute:hover {
          background-position:5px -279px;        
  }
  
  /* root element for tabs  */
  ul.tabs { 
          list-style:none; 
          margin:0 !important; 
          padding:0;
          height:29px;
          border-bottom:1px solid #666;        
  }
  
  /* single tab */
  ul.tabs li { 
          float:left;         
          text-indent:0;
          padding:0;
          margin:0 !important;
          list-style-image:none !important; 
  }
  
  /* link inside the tab. uses a background image */
  ul.tabs a { 
          background: url(/img/global/tabs.png) no-repeat -652px 0;
          font-size:11px;
          display:block;
          height: 30px;  
          line-height:30px;
          width: 111px;
          text-align:center;        
          text-decoration:none;
          color:#000;
          padding:0px;
          margin:0px;        
  }
  
  /* when mouse enters the tab move the background image */
  ul.tabs a:hover {
          background-position: -652px -31px;        
          color:#fff;        
  }
  
  /* active tab uses a class name "current". it's highlight is also done by moving the background image. */
  ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
          background-position: -652px -62px;                
          cursor:default !important; 
          color:#000 !important;
  }
  
  /* Different widths for tabs: use a class name: w1, w2, w3 or w2 */
  
  /* width 1 */
  ul.tabs a.w1                         { background-position: -519px -0px; width:134px; }
  ul.tabs a.w1:hover         { background-position: -519px -31px; }
  ul.tabs a.w1.current { background-position: -519px -62px; }
  
  /* width 2 */
  ul.tabs a.w2                         { background-position: -366px -0px; width:154px; }
  ul.tabs a.w2:hover         { background-position: -366px -31px; }
  ul.tabs a.w2.current { background-position: -366px -62px; }
  
  /* width 3 */
  ul.tabs a.w3                         { background-position: -193px -0px; width:174px; }
  ul.tabs a.w3:hover         { background-position: -193px -31px; }
  ul.tabs a.w3.current { background-position: -193px -62px; }
  
  /* width 4 */
  ul.tabs a.w4                         { background-position: -0px -0px; width:194px; }
  ul.tabs a.w4:hover         { background-position: -0px -31px; }
  ul.tabs a.w4.current { background-position: -0px -62px; }
  
  /* initially all panes are hidden */ 
  div.panes div.pane {
          display:none;                
  }
  
  @media print {
  
          #globalnav, #right, #user, .noprint {
                  display:none;                
          }
          
          #wrap, #content {
                  width:100%;                
                  margin:0;
          }
  }
  
  /*{{{ very basic styles */
  
  body {
          background-color:#fff;
          padding-bottom:50px;
  }
  
  body, p, div, a {
          font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana,arial,sans-serif;
          font-size:12px;
  }
  
  a {
          color:#295c72;                
  }
  
  a.external {
          background:transparent url(/img/global/external.png) no-repeat scroll right 0;
          padding-right:15px;                
  }
  
  div.clear, hr {
          clear:both;
          display:block;
          font-size:1px;
          height:0pt;
          line-height:1px;
          margin:0pt;
          padding:0pt;
  }
  
  hr {
          margin:-5px 0px 5px 0;
          border:1px solid #ccc;
          border-width:1px 0 0 0;
  }
  
  .col {
          float:left;
          margin-right:20px;
  }
  
  #content div.col50 {
          float:left;
          margin-right:40px;
          width:350px;
  }
  
  .last {
          margin-right:0px !important;                
  }
  
  div.col h2 {
          margin:0 0 5px 0;                
  }
  
  img {
          border:0;                
  }
  
  table {
          border-collapse:collapse;                
  }
  
  a:active {
    outline:none;
  }
  
  :focus, button {
    -moz-outline-style:none;
  }
  
  #content ul li, #content ol li, #right ul.smaller li {        
          margin-top:7px;        
  }
  
  #content ul li, #right ul.smaller li {
          list-style-image:url(/img/global/bullet.png);
  }
  
  #right ul.smaller {
          margin-top:20px;
  }
  
  #right ul.smaller li a.selected {
          cursor:default;
          color:#000;
          font-weight:bold;
  }
  
  body.ie7 #content ul, body.ie7 #content ol {
          margin-left:50px;
  }
  
  /*}}}*/
  
  /*{{{ typo */
  
  h1, h2, h3, h4 {
          font-weight:normal;
          letter-spacing:-1px;
          color:#444; 
          margin:35px 0 -5px 0;
  }
  
  h2 { font-size:22px; }
  h3 { font-size:18px;        }
  h4 { font-size:16px;        margin-top:20px; }
  
  h1 em, h2 em, h3 em, h4 em {
          font-style:normal;
          color:rgb(45, 90, 195);
  }
  
  ul, ol, p, table {
          margin:10px 0px;                
  }
  
  samp {
          color:#112699;                
  }
  
  .first {
          margin-top:0px;                
  }
  
  .lower {
          margin-top:20px !important;                
  }
  
  .higher {
          margin-top:40px !important;        
  }
  
  .red {
          color:#bf0d00;        
  }
  
  .blue {
          color:#2D5AC3;        
  }
  
  /*}}}*/
  
  /*{{{ global elements */
  
  #wrap {
          margin:10px auto;
          width:982px;                
  }
  
  #content {
          background:#fff url(/img/global/content_top.jpg) no-repeat;
          float:left;
          min-height:400px;        
          padding:20px;
          width:748px;
  }
  
  #right {
          float:right;
          width:180px;
  }
  
  #content, #right {
          margin-top:150px;                
  }
  
  /* demos special features */
  #demos_index #content {
          background:none;
          margin-top:0px;
          padding:0px;
          width:795px;        
  }
  
  #demos_index #right {
          margin-top:163px        
  }
  
  #breadcrumb {
          color:#999;
          font-size:11px;
          position:relative;
          top:-5px;        
          margin-bottom:-20px;
  }
  
  #breadcrumb strong, #blog #right li a strong {
          font-weight:normal;                
  }
          
  #breadcrumb a {
          font-size:11px;        
  }
  
  /* title */
  #content h1 {
          background-repeat:no-repeat;
          padding:15px 0 0 95px;
          letter-spacing:-1px;
          font-size:28px;
          height:90px;
          position:relative;
          top:-146px;
          margin:0px 0 -140px 0;
          color:#809198;
          font-weight:bold;
          width:870px;
  }
  
  #content h1 strong {
          color:#505050;        
  }
  
  /* a little wider title icon for these */
  #download_index #content h1, #forum #content h1, #forum_index #content h1 {
          padding-left:105px;                
  }
  
  /* move API tabs lower */ 
  #documentation_api #content, #documentation_api #right {
          margin-top:160px !important;        
  }
  
  #documentation_api #content h1 {
          top:-160px;        
  }
  
  #plugins_index h1 {
          padding-top:22px;                
                  top:-147px;
          margin-bottom:-125px;
  }
  
  #content h1 em {
          display:block;
          font-size:20px;
          color:#808080;
          margin-top:-2px;
          font-weight:normal;
  }
  
  /* username | logout */
  
  #user {
          margin-right:6px;
          height:10px;
  }
  
  #user a {
          font-size:11px;        
          text-decoration:none;
          color:#666;
          padding:1px 10px 1px 15px;
          display:block;
          float:right;
  }
  
  #user a strong {        
          color:#254558;
  }
  
  #user #account {
          background:transparent url(/img/global/account.png) no-repeat 0 1px; 
          padding-left:20px;
  }
  
  #user #logout {
          background:transparent url(/img/global/account.png) no-repeat scroll right -29px;
          padding-right:18px;
  }
  
  #user #account:hover {
          background-position:0 -14px !important;                
          text-decoration:underline;
  }
  
  #user #logout:hover {
          background-position:right -44px !important;
          text-decoration:underline;
          color:red;
  }
  
  a#demos, a#tutorials {
          background:transparent url(/img/global/demos_tutorials.jpg) no-repeat 0 0;
          display:block;
          float:left;
          height:77px;
          margin-bottom:15px;
          overflow:hidden;
          text-indent:-999em;
          width:180px;
  }
  
  a#demos:hover, a#demos.selected {
          background-position:0 -78px;
  }
  
  a#tutorials {
          background-position:0 -156px;
  }
  
  a#tutorials:hover, a#tutorials.selected {
          background-position:0 -234px
  }
  
  a#demos.selected, a#tutorials.selected {
          cursor:default;                
  }
  
  #footer {
          font-size:11px;
          color:navy;        
  }
  
  #footer a {
          color:#666;
          text-decoration:none;
          font-size:11px;
          margin:0px 5px;        
  }
  
  #footer a:hover {
          text-decoration:underline;
          color:#123;
  }
  /*}}}*/
  
  /*{{{ globalnav */
  
  #globalnav {  
          width: 983px; 
          height: 30px; 
          margin: 10px auto; 
          position: relative; 
          text-align: left; 
          height: 38px !important;
          z-index: 1;        
  }
  
  #globalnav ul { 
          list-style: none; 
          margin: 0; 
          padding: 0; 
  }
  
  #globalnav li { 
          float: left; 
          margin: 0; 
          padding: 0; 
          text-indent: 0; 
  }
  
  #globalnav li a, #globalnav li div { 
          float: left; 
          height: 38px; 
          line-height: 38px; 
          width: 162px; 
          overflow: hidden; 
          text-indent: -999em;         
          background-image: url(/img/global/navi.png); 
          background-repeat: no-repeat;        
  }
  
  /* todo: animated mouseover */
  #globalnav li div {
          display:none;        
          position:absolute;
  }
  #globalnav #gn1 div { background-position: 0 -42px; }
  
  /* global navi buttons */
  #globalnav #gn1 a { background-position: 0 0; width: 165px; }
  #globalnav #gn2 a { background-position: -165px 0; }
  #globalnav #gn3 a { background-position: -327px 0; }
  #globalnav #gn4 a { background-position: -489px 0; }
  #globalnav #gn5 a { background-position: -651px 0; }
  #globalnav #gn6 a { background-position: -812px 0; width: 170px;  }
  
  /* mouseover */
  #globalnav #gn1 a:hover { background-position: 0 -42px; }
  #globalnav #gn2 a:hover { background-position: -165px -42px; }
  #globalnav #gn3 a:hover { background-position: -327px -42px; }
  #globalnav #gn4 a:hover { background-position: -489px -42px; }
  #globalnav #gn5 a:hover { background-position: -651px -42px; }
  #globalnav #gn6 a:hover { background-position: -812px -42px; }
  
  /* mouse pressed */
  #globalnav #gn1 a:active { background-position: 0 -84px; }
  #globalnav #gn2 a:active { background-position: -165px -84px; }
  #globalnav #gn3 a:active { background-position: -327px -84px; }
  #globalnav #gn4 a:active { background-position: -489px -84px; }
  #globalnav #gn5 a:active { background-position: -651px -84px; }
  #globalnav #gn6 a:active { background-position: -812px -84px; }
  
  /* active button */
  #globalnav a.active                   { cursor: default; }
  #globalnav #gn1 a.active { background-position: 0 -126px; }
  #globalnav #gn2 a.active { background-position: -165px -126px !important; }
  #globalnav #gn3 a.active { background-position: -327px -126px !important; }
  #globalnav #gn4 a.active { background-position: -489px -126px !important; }
  #globalnav #gn5 a.active { background-position: -651px -126px !important; }
  #globalnav #gn6 a.active { background-position: -812px -126px !important; }
  /*}}}*/
  
  /*{{{ BOXES */
  
  /*{{{ code */
  
  pre, code, .code {
          font-family:'andale mono','bitstream vera sans mono','lucida console','courier new';
          font-size:12px;
          line-height:16px;
  }
  
  div.petrol code span.js__com {
          color:lightgreen;                
  }
  
  div.petrol code span.js__string {
          color:#bbc7cf;                
  }
  
  div.petrol code span.js__keyword {
          color:#d8c;        
  }
  
  div.petrol code span.js__flow { 
          color:#95d0df;
  }
  
  #content div.box.code {
          background:#f9f9fa url(/img/box/code_lines.png) 0px -3px repeat-y;
          padding:0px 14px 0px 35px;        
  }
  
  #content div.box.code h2 {
          margin-left:-40px;
          margin-top:0px;
  }
  
  #content table.listing div.box.code {
          padding-left:0px;
          background-image:none;        
          outline:0;
  }
  /*}}}*/
  
  /*{{{ #content box, listing, div.tip  */
  
  #content div.box, table.listing, div.tip {
          outline:1px solid #999;
          border:2px solid #fff;
          background-color:#f0f1f2;
          margin:10px 0 15px 0;
          padding:10px;
          
          /* outline radius */
          outline-radius:4px;
          -moz-outline-radius:4px;
          -webkit-outline-radius:4px;        
  }
  
  #content div.box h2 {
          margin:0px;
          background-color:#c2d0da;
          font-weight:normal;
          font-size:15px;
          line-height:30px;
          padding:0 10px;
          margin:-10px -10px 10px -10px;
  }
  
  div.tip {
          background:url(/img/global/gradient/h150.png) repeat-x;
  }
  
  /* skins */
  #content div.box.dark                                                                         { background-color:#99a6af; }
  #content div.box.dark h2                                                                 { background-color:#586e7b; }
  #content div.box.light                                                                         { background-color:#f9f9fa; }
  #content div.box.light h2                                                                 { background-color:#d7dde1; }
  #content div.box.petrol                                                                 { background-color:#295c72; }
  #content div.box.petrol h2                                                         { background-color:#254558; }
  #content div.box.petrol.dark, div.tip                                 { background-color:#254558; }
  #content div.box.petrol.dark h2, div.tip h2                 { background-color:#295c72; }
  #content div.box.ruby                                                                         { background-color:#e5e7e9; }
  #content div.box.ruby h2                                                                 { background-color:#b8128f; }
  #content div.box.ruby.dark                                                         { background-color:#b8128f; }
  #content div.box.ruby.dark h2                                                 { background-color:#552452; }
  #content div.box.black                                                                         { background-color:#000000; }
  #content div.box.black h2                                                                 { background-color:#3C4752; }
  
  /* box font colors */
  div.box.dark, div.box.petrol, div.box.black, div.tip,
  div.box.dark h2, div.box.petrol h2, div.box.ruby h2, div.box.black h2,
  div.box.dark h3, div.tip h2 {
          margin-top:0px;
          color:#fff;        
  }
  
  div.box.dark a, div.box.petrol a, div.box.black a { 
          color:yellow;        
  }
  
  div.box.petrol samp {
          color:#95D0DF;                
  }
  
  /* mouseover tip */
  div.tip {
          width:280px;                
          display:none;
          position:absolute;
          z-index:2;
  }
  
  div.tip h3 {
          color:#dee7ec;        
  }
  
  /* info, alert */
  #content div.box.info, #content div.box.alert {
          background-image:url(/img/global/info.png);
          background-position:6px center;        
          background-repeat:no-repeat;
          padding:15px 50px;
          font-size:14px;
          color:#555;
  }
  
  #content div.box.info a {
          font-size:14px;        
  }
  
  #content div.box.info.petrol {
          color:#fff;                
  }
  
  #content div.box.alert {
          background-image:url(/img/global/alert.png);
  }
  
  /*}}}*/
  
  /*{{{ #right box */
  
  #right div.box {
          width:181px;
          margin:-1px 0 7px 0;
  }
  
  #right div.box h2, #drawer a.header {
          background:url(/img/global/sidenav.png) no-repeat;
          font-size:12px;
          height:16px;
          margin:0px;
          padding:8px 10px;
          display:block;
          text-decoration:none;
          color:#000;
          letter-spacing:0px;
  }
  
  #right div.box h2.ruby {
          background-position:0 -255px;        
          color:#fff;        
  }
  
  #right div.box h2.another {
          background-position:0 -31px;
  }
  
  #right div.inside, #right div.box ul {
          background:url(/img/global/sidenav_strip.jpg) no-repeat;
  }
  
  #right div.gradient {
          background:#f0f6f7 url(/img/global/gradient/h300.png) repeat-x;        
          margin:0 3px;        
          padding:6px 8px;
  }
  
  #right div.gradient.ruby {
          background:#fff url(/img/global/gradient/h150.png) repeat-x;
  }
  
  #right div.clear {
          background:url(/img/global/sidenav.png) no-repeat 0 -353px;
          height:10px;        
  }
  
  /* box content */
  #right div.box ul {
          margin:0;
          padding:0;
  }
  
  #right div.box li {        
          list-style-type:none;                
  }
  
  #right div.box li a {
          display:block;
          padding:6px 8px;
          border-bottom:1px solid #999;
          text-decoration:none;        
          font-size:12px;
          margin:0px 3px;
  }
  
  #right div.box li a:hover {
          background-color:#efefef;
          color:black;
  }
  
  #right div.box li a.selected, #right div.box li a.selected:hover {
          background-color:#666;
          color:#fff;
          cursor:default;
  }
  
  #right div.box input.text {
          width:150px;                
  }
  
  /* mini plugin icons */
  span.icon {
          display:block;
          width:24px;
          height:24px;
          float:left;
          margin:-3px 8px 0 -4px;
          background:url(/img/title/plugins_small.png);
  }
  
  span.icon.js {
          background-position:0 -25px;        
  }
  
  span.icon.streaming {
          background-position:0 -50px;        
  }
  
  span.icon.tools {
          background-position:0 -74px;        
  }
  
  /*}}}*/
  
  /*{{{ #drawer */
  
  /*  header */
  #drawer a.header {
          background-position:0 -31px;                
  }
  
  #drawer a.first {
          background-position:0 1px;        
  }
  
  /* hover */
  #drawer a:hover {
          background-position:0 -95px; 
  }
  
  #drawer a.first:hover {
          background-position:0 -64px; 
  }
  
  /* focus */
  #drawer a:focus {
          background-position:0 -159px; 
          color:#fff;
  }
  
  #drawer a.first:focus {
          background-position:0 -128px; 
  }
  
  /* active */
  #drawer a.active {
          background-position:0 -223px; 
          color:#fff;
          cursor:default;
  }
  
  #drawer a.first.active {
          background-position:0 -191px !important; 
  }
  
  #drawer div.inside {
          display:none;                
  }
  
  #drawer div.inside.active {
          display:block;                
  }
  /*}}}*/
  
  /*}}}*/
  
  /*{{{ forms */
  form {
          margin:10px 0;                
  }
  
  input.text, textarea {
          padding:3px 4px;
          border:1px inset #ccc;
          font-size:12px;
          -moz-border-radius:3px;
          margin-top:2px;
  }
  
  textarea {
          width:98%;
          height:200px;
          padding:6px;
          font-size:13px;
          overflow:auto;
  }
  
  select {
          font-size:11px;        
          border:1px inset #ccc;
          padding:2px;
  }        
  
  td.label {
          width:120px;
          color:#809198;
  }
  
  .help {
          font-size:11px;
          color:#666;
  }
  
  td.help {
          padding-left:10px;                
  }
  
  p.less {
          color:#555;                
  }
  
  .jform input, .jform textarea, .jform select, input.readmode {
          border:0px;
          color:#000;
          cursor:pointer;
  } 
  
  .jform textarea {
          border:1px outset #ddd;        
  }
  
  input.readmode {
          text-decoration:underline;                        
  }
  
  .jform input.editmode, .jform textarea.editmode {
          border:1px inset #ccc;                
          text-decoration:none;                
          cursor:default;
  }
   
  div.error {
          color:darkred;
          font-size:11px;
  }
  
  button {
          font-size:12px;                
  }
  
  td.blank {
          border:0;
          height:30px;
  }
  
  /*}}}*/
  
  /*{{{ buttons */
  
  button {
          outline:1px outset #999;        
          border:1px solid #fff;        
          background-color:#222;
          color:#fff;
          height:24px;
          -moz-border-radius:4px;
          -moz-outline-radius:4px;
          cursor:pointer;
          font-size:11px;
  }
  
  button em {
          color:yellow;
          font-style:normal;
  }
  
  /* button.custom */
  button.custom {
          background:transparent url(/img/form/btn/normal.png) 0 0 no-repeat;        
          height:34px;        
          width:99px;        
          border:0;
          outline:0;
  }
  
  button.custom span {
          position:relative;
          top:-1px;                
  }
  
  button.custom.large {
          background-image:url(/img/form/btn/large.png);
          width:119px;
  }
  
  button.custom.low {
          background-image:url(/img/form/btn/low_small.png);
          width:75px;                
          height:26px;
          font-size:11px;
  }
  
  button.custom.low.large {
          background-image:url(/img/form/btn/low_large.png);
          width:115px;
  }
  
  button.custom.low.medium {
          background-image:url(/img/form/btn/low.png);
          width:94px;
  }
  
  button.custom.low.xlarge {
          background-image:url(/img/form/btn/low_xlarge.png);
          width:155px;
  }
  
  button.delete {
          background-image:url(/img/form/btn/delete.png);
          width:94px;                
          height:26px;
  }
  
  button.custom.low span {
          top:-2px;                
  }
  
  /* custom buttons */
  #loginButton {
          background:url(/img/form/btn/login_search.png) no-repeat 0 0;
  }
  
  #searchButton {
          background:url(/img/form/btn/login_search.png) no-repeat -100px 0;
  }
  
  #paypalButton {
          background-image:url(/img/commerce/paypal.png);        
          width:105px;
  }
  
  /* span.play */
  span.play {
          background:url(/img/player/btn/play.png) no-repeat;
          display:block;
          width:40px;
          height:41px;
          cursor:pointer;
  }
  
  span.play:hover {
          background-position:0 -41px;
  }
  
  span.play:focus {
          background-position:0 -82px;
  }
  
  span.play.large {
          background-image:url(/img/player/btn/play_full.png);
          width:125px;
  }
  
  span.play.showme {
          background-image:url(/img/player/btn/showme_full.png);
          width:125px;
  }
  
  span.play.again {
          background-image:url(/img/player/btn/watch_again_full.png);
          width:149px;
  }
  
  /*}}}*/
  
  /*{{{ tables */
  
  table.listing {
          width:100%;
          background-color:#fff;
  }
  
  table.listing td {
          border-bottom:1px solid #ddd;
          padding:5px;        
  }
  
  table.listing a:hover {
          color:#000;
  }
  
  table.listing a:hover span {
          color:#333;
  }
  
  th { 
          background:url(/img/global/gradient/h30.png) 0 0px repeat-x;
          background-color:#c2d0da;
          text-align:left;
          padding:5px; 
          border-bottom:5px solid #fff;
          font-weight:normal;
          font-size:14px;
  }
  
  table.listing td img {
          cursor:pointer;                
  }
  
  th.sort {
          cursor:pointer;
          background-color:#A2D0DA;
          border-left:1px solid #FFFFFF !important;
  }
  
  th.sort.asc, th.sort.desc {
          background-color:#ffD0DA;
  }
  
  /* api listings */
  th.col1 {
          width:120px;                
  }
  
  td.code {
          color:blue;                
          width:120px;        
  }
  
  div.type {
          color:#789;
          font-family:"courier new",courier;
  }
  
  td.default {
          color:#345;
          width:80px;        
  }
  
  td.type {
          color:navy;                
  }
  
  td.code em {
          color:#666;
          font-style:normal;
  }
  
  td.description {
          color:#333;
          font-size:12px;
  }
  
  td.code i {
          font-style:normal;
          color:#666;
  }
  
  .pre {
          white-space:pre;        
  }
  
  .code strong {
          color:navy;                
  }
  
  /*}}}*/
  
  /*{{{ player */
  
  a.player {        
          margin-top:40px;
          display:block;
          background:url(/img/player/splash.png) no-repeat;
          width:425px;
          height:298px;
          padding:0 126px 75px 127px;        
          text-align:center;
          color:#fff;
          text-decoration:none;
          cursor:pointer;
          /* 
                  width:672px;
                  height:367px; 
  	*/
  }
  
  a.player.plain {
          background-position:-125px 0;
          padding:0px;
          margin-top:0px;
  }
  
  a.player.small {
          background:url(/img/player/splash_small.png) no-repeat;
          height:186px;
          padding:0pt 24px 45px;
          width:251px;
          float:left;
          margin-right:30px;
          
          /* 
                  width:375px;
                  height:232px; 
  	*/
  }
  
  a.player.small.plain {
          background-position:-24px 0;
          padding:0px;                
  }
  
  a.player.black {
          background-image:url(/img/player/splash.png);
  }
  
  /* play button */
  a.player img {
          margin-top:115px;        
  }
  
  a.player.plain img {
          margin-top:113px;        
  }
  
  a.player.small img {
          margin-top:60px;                
  }
  
  a.player p {
          margin-bottom:-15px;
          padding-top:0px;
  }
  
  /*}}}*/
  
  /*{{{ info, overlay, grippie */
  
  /* overlay */ 
  div.overlay, #overlay {
          padding:40px;        
          width:576px;  
          display:none;
          background-image:url(/img/overlay/white.png);        
  }
  
  div.overlay div.close, #overlay div.close {
          background:url(/img/overlay/close.png) no-repeat;
          position:absolute;
          top:2px;
          right:5px; 
          width:35px;
          height:35px;
          cursor:pointer;
  }
  
  #overlay_player {                 
          display:block;
          height:450px;
  }
  
  div.grippie {
          background:#EEEEEE url(/img/forum/grippie.png) no-repeat scroll center 2px;
          border-color:#DDDDDD;
          border-style:solid;
          border-width:0pt 1px 1px;
          cursor:s-resize;
          height:9px;
          overflow:hidden;
  }
  
  #right li a span {
          display:block;
          margin-top:2px;
          color:#333;
          font-size:11px;
  }
  
  #right li a.selected span {
          display:block;
          margin-top:2px;
          color:yellow;
  }
  
  /*}}}*/
  
  /*{{{ home */
  
  #index #content {
          background:none;
          width:768px;
          margin:0px;
          padding:0px;
  }
  
  #index #right {
          width:210px;
          float:right;
          margin:-1px  0;        
  }
  
  #downloadInfo  {
          float:right;
          margin:60px 36px 0pt 0pt;
          text-align:center;
          color:#555;
          font-size:11px;        
  }
  
  #downloadInfo a {
          font-size:11px;                
  }
  
  h1#logo {
          background:transparent url(/img/home/logo-3.1.jpg) no-repeat scroll 0 0;
          float:left;
          height:131px;
          margin:25px 0 46px 25px;
          text-align:right;
          width:490px;
  }
  
  h1#logo em {
          display:none;                
  }
  
  h1#logo span {
          position:relative;
          top:32px;                
          font-size:22px;
  }
  
  a#download {
          display:block;
          background:transparent url(/img/home/download.png) no-repeat;
          width:159px;
          height:44px;
          overflow: hidden; 
          text-indent: -999em;
          margin-bottom:5px;
  }
  
  a#download:hover {
          background-position:0 -44px ;                
  }
  
  a#download:focus {
          background-position:0 -88px ;                
  }
  
  a#download.small {
          height:35px;        
  }
  
  a#download.small:hover {
          background-position:0 -34px ;                
  }
  
  a#download.small:focus {
          background-position:0 -68px ;                
  }
  
  #tab_panes {
          background:url(/img/home/main.jpg) no-repeat 0 -98px;
          position:relative;
          top:-1px;
          height:448px;         
          overflow:hidden;
          width:757px;
  }
  
  #items {
          position:absolute;
          width:9999em;
  }
  
  #items div.item {
          padding:10px 30px;
          width:690px;
          float:left;
          color:white;
          display:none;
  }
  
  #items #first {
          background:url(/img/home/main.jpg) no-repeat 0 -546px;                
          height:425px; 
          padding-top:50px;
  }
  
  #items div.item h2 {
          margin-top:20px;
          color:white;
  }
  
  #items a.flowplayer {
          display:block;
          background:transparent url(/img/global/gradient/h500.png) repeat-x;
          height:320px;
          width:430px;
          float:left;
          text-align:center;
          margin:20px 20px 0 0;
  }
  
  #items a.flowplayer img {
          margin-top:120px;                
  }
          
  #items div.col {
          float:right;
          width:230px;
          margin:0px;
  }
  
  #items #first a.flowplayer {
          width:460px;                
          margin:0px;
  }
  
  #items #first div.col {
          width:165px;                
  }
  
  #items p.more {
          font-weight:bold;
          font-size:12px;
          margin-top:30px;
  }
  
  #items div.clips {
          float:left;
          margin-top:10px;
  }
  
  #items pre code {
          line-height:14px;        
  }
  
  /* tabs */
  ul#tabs { 
          list-style:none; 
          margin:0 !important; 
          padding:0 !important; 
  }
  
  #player3 object {
          z-index:10000;                
  }
  
  ul#tabs li { 
          float:left; 
          margin:0; 
          padding:0; 
          text-indent:0; 
          list-style-image:none;
  }
  
  #content ul#tabs li a { 
          display:block;
          height: 33px;  
          overflow: hidden; 
          text-indent: -999em; 
          width: 189px; 
          background: url(/img/home/main.jpg) no-repeat;
          padding:0px;
          margin:0px;
  }
  
  #content #tabs li #t1 { background-position: 0 0; }
  #content #tabs li #t2 { background-position: -189px 0; }
  #content #tabs li #t3 { background-position: -378px 0; }
  #content #tabs li #t4 { background-position: -567px 0; width:192px;}
  
  #content #tabs li #t1:hover { background-position:      0 -33px; }
  #content #tabs li #t2:hover { background-position: -189px -33px; }
  #content #tabs li #t3:hover { background-position: -378px -33px; }
  #content #tabs li #t4:hover { background-position: -567px -33px; }
  
  #content #tabs li.active a          {cursor:default; }
  #content #tabs li.active #t1 { background-position:      0 -66px; }
  #content #tabs li.active #t2 { background-position: -189px -66px; }
  #content #tabs li.active #t3 { background-position: -378px -66px; }
  #content #tabs li.active #t4 { background-position: -567px -66px; }
  
  /* right picks */
  #right div.pick {
          background: url(/img/box/right/blank.png) no-repeat;
          width:214px;
          height:152px;
          margin:0px 0 12px 0 !important;
          cursor:pointer;
  }
  
  #right a {
          text-decoration:none !important;                
  }
  
  #right div.pick h4 {
          padding:15px 15px 0 85px;
          font-size:11px;
          color:#666;
          margin:0px;
  }
  
  #right div.pick h3 {
          padding:0px 15px 0 85px;
          font-size:13px;
          color:#000;
          margin:3px 0px;
  }
  
  #right div.pick p {
          padding:5px 15px 0 85px;
          font-size:12px;
          color:#666;
          margin:0px;
  }
  
  /* --- VISUALIZATIONS --- */
  
  /* images */
  #right div.pick.blank                 { background-image: url(/img/box/right/release.png); }
  #right div.pick.book                 { background-image: url(/img/box/right/book.png); }
  #right div.pick.release         { background-image: url(/img/box/right/release.png); }                        
  #right div.pick.screens         { background-image: url(/img/box/right/screens.png); }
  #right div.pick.flash                 { background-image: url(/img/box/right/flash.png); }
  #right div.pick.js                         { background-image: url(/img/box/right/js.png); }
  #right div.pick.streaming         { background-image: url(/img/box/right/streaming.png); }
  #right div.pick.jstools         { background-image: url(/img/box/right/jstools.png); }
  
  /* book & screens are left justified */
  #right div.pick.book h3, #right div.pick.book h4, #right div.pick.book p,
  #right div.pick.screens h3, #right div.pick.screens h4, #right div.pick.screens p
  {
          padding-left:15px;
          padding-right:76px;
  }
  
  /* release */
  #right div.pick.release h3, #right div.pick.release h4,
  #right div.pick.blank h3, #right div.pick.blank h4 {
          padding-left:15px;                
  }
          
  #right div.pick.release p, #right div.pick.blank p {
          padding:15px 15px 0 90px;        
  }
  
  #right div.pick.screens h3 {
          padding-right:92px;        
  }
  
  /* mask */
  #exposeMask {
          background-color: #123;
          color: #fff;
          text-align: center;
          padding-top:155px;
  }
  
  #exposeMask p {
          font-size: 20px; 
          width:640px;                
          margin:0px auto;
  }
  
  #exposeMask span {
          color:yellow;        
  }
  
  /* custom controlbar */
  #homeControls {
          width:430px;
  }
  
  #homeControls div.track {
          width:215px;                
  }
  
  #homeControls div.time {
          left:260px;        
  }
  
  #homeControls a.mute, #homeControls a.unmute {
          left:390px;
  }
  
  #index #emailPane, #index #embedPane {
          background:transparent url(/img/global/gradient/h500.png) repeat-x;
  }
  
  /*}}}*/
  
  /*{{{ blog  */
  
  div.blogImage {
          width:85px;
          height:85px;
          float:right;
          margin:5px 0 0 15px;
  }
  
  div.blogImage.book                 { background-image: url(/img/title/book.png); }
  div.blogImage.release         { background-image: url(/img/title/release.png); }                        
  div.blogImage.screens         { background-image: url(/img/title/screens.png); }
  div.blogImage.flash                 { background-image: url(/img/title/flash.png); }
  div.blogImage.js                         { background-image: url(/img/title/javascript.png); }
  div.blogImage.streaming { background-image: url(/img/title/streaming.png); }
  div.blogImage.jstools         { background-image: url(/img/title/tools.png); }
  
  div.blogImage.release, div.blogImage.book, div.blogImage.screens {
          float:left;
          height:150px;
          margin:5px 0pt 0pt -12px;
          width:178px;                
  }
  
  div.blogImage.book {
          height:165px;        
  }
  
  div.blogImage.screens {
          margin:5px 0pt 0pt -10px;
          width:178px;        
  }
  
  /*}}}*/
  
  


(C) Æliens 20/2/2008

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.