/* #######################################
   ##  P R O C E S S I N G J S . O R G  ##
   #######################################
*/

/* Default YUI Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} ol,ul{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';}abbr,acronym{border:0;}

/* Functional Styles */
.clear{clear:both;line-height:0;height:0;}

/* Layout & Default Styles */
body{background:#fff url(/gfx/bodybackx.gif.png) repeat-x;font-family:arial,sans-serif;font-size:80%;}
  a{color:#0075b2;text-decoration:none;}
  a:hover,a:focus{color:#00a7fd;text-decoration:underline;}
  .warning{color:#cc0000;}
  #wrap{width:1024px;margin:0 auto;}
  .inner{width:900px;margin:0 auto;}

/* Top-most banner */
#banner{background:url(/gfx/head.gif.png) no-repeat;height:142px;color:#fff;font-family:lucida console,verdana}
  #title{height:42px;}
  h1{display:none;}
  #main-logo{float:left;margin:5px 10px 0 10px;}
  #main-title{margin:12px 0 0 0;}
  #tagline{height:25px;color:#0075b2}
  h2{font-size:.9em;margin:6px 0 0 14px}
  #banner-homelink{display:block;width:900px;height:42px;background:url(gfx/home.gif) repeat-x;}
  #banner-homelink:focus{background-position:0 -42px;}

/* Main Nav-links & head-visualization */
#main-nav{height:74px;margin-top:-74px;}
  #main-nav canvas{position:absolute;background:#000;}
  img.navCanvas{position:absolute;}
  #main-nav ul{margin-left:30px;position:absolute;z-index:2;width:auto;height:35px;margin-top:39px;float:left;}
  #main-nav li{height:20px;float:left;}  
  #main-nav li a{background:url(gfx/nav-tabs.png) no-repeat 0px 0px;display:block;height:35px;color:#909090;text-decoration:none;}
  #main-nav li a:hover, #main-nav li a:focus{color:#00a7fd;background-position:left -191px;height:35px;}
  #main-nav li a span{padding-top:15px;display:block;height:20px;background:url(gfx/nav-tabs.png) no-repeat right -94px;margin-left:11px;padding-right:11px;overflow:hidden;cursor:pointer;}
  #main-nav li a:hover span, #main-nav li a:focus span{padding-top:5px;background-position:right -240px;height:30px;}
  #main-nav li a.selected{color:#00a7fd;background-position:left -48px;height:35;}
  #main-nav li a.selected span{padding-top:5px;background-position:right -142px;height:30px;}
  #main-nav a.source{color:#fff;position:relative;float:right;z-index:2;margin:55px 6px 0 0;}
  #main-nav a.source:focus{background:#fff;color:#000;}
  /* Separable focus styles if ever needed *//*
  #main-nav li a.selected:hover,#main-nav li a.selected:focus{background-position:left -191px;}
  #main-nav li a.selected:hover span,#main-nav li a.selected:focus span{background-position:right -240px;}
  */        
  
/* Main Content Styles */
#page{background:url(gfx/pagebacky.gif.png) repeat-y;width:1024px;padding:10px 0;}
  #page .inner{width:830px;margin:0px auto;} 
  #content{float:left;width:600px;}
  h3{font-size:1.5em;margin:30px 0 10px;color:#0073af;font-weight:bold;}  
  b.old{color:#996600;}
  b.new{color:#cc0000;}
  #content ul{margin:5px 0 20px 0;}
  #content ul li{list-style-type:disc;margin-left:30px;}
  #content h5{font-weight:bold;margin:20px 0 10px 0;font-size:1.1em;color:#555}
  pre{font-family:"Consolas","Courier New",Courier,mono,serif;}
  pre.fl{display:inline;}
  pre.nfl{margin-left:30px;}
  pre.invalid{color:#cc0000;}
  pre.valid{color:#008800}
  h4{font-size:1.3em;margin:30px 0 10px;color:#0073af;font-weight:bold;}
  h4 a:hover,h4 a:focus{color:#0073af;text-decoration:none!important;}
  p{margin-bottom:15px;}  
  ol li{list-style-type:decimal;margin-left:30px;margin-bottom:10px;}
  
/* Breadcrumb */
.breadcrumb{color:#bbb;height:16px;/*font-size:.8em;font-family:"Consolas","Courier New",Courier,mono,serif;*/}
  .breadcrumb a{color:#bbb;}
  .breadcrumb a:hover,.breadcrumb a:focus{color:#00a7fd;}

/* Reference List */
.refcol{width:190px;float:left;margin-top:10px;}
  .category{margin-bottom:30px;}
  .category b{margin-bottom:15px;display:block;}
  .category a{display:block;line-height:1.1em;}
  .category a:hover,.category a:focus{}
  .category h5{font-weight:normal!important;font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;font-style:italic;color:#444;font-size:11.2px!important;margin:15px 0 5px 0;}
  #reference.hidedevcoms .devcom{display:none;}
  #reference.showdevcoms .devcom{display:auto;}
  a.devcom, .devcom a{color:#cc0000;}
  .ref-col{width:185px;float:left;margin-top:10px;margin-right:15px;line-height:1.1em}
  .ref-col.last{margin-right:0;}
 
/* Reference Document */
table.ref-item{margin:30px 0 30px 0;}
  .ref-item td{vertical-align:top;padding-bottom:30px;font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;font-size:11.2px;width:480px!important;}
  pre.squish{letter-spacing:-.05em;}
  .ref-item th{vertical-align:top;width:100px!important;font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;color:#000;font-size:11.2px;}
  .ref-item h3{color:#0077b5;font-size:1.5em;font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;margin:0;padding:0;}
  .ref-item .pjs th{color:#cc0000!important;font-weight:bold;}
  .ref-item .pjs td{color:#cc0000}
  .ref-item pre{font-size:.95em;width:480px!important;}
  .ref-item .dp-highlighter{width:480px;}
  .ref-item hr{border:none;border-top:1px solid #000;margin:20px 0;width:300px;}
  .example{clear:left;margin-bottom:15px;}
  .example img{float:left;margin-right:15px;margin-bottom:15px;}
  pre.margin{margin-left:115px;width:365px!important;}

/* Sidebar - Right-hand */
#sidebar h4{margin:2px 0 5px 0}
  #sidebar{width:180px;border-left:1px dotted #0073af;float:right;margin:0 -10px 0 15px;padding:20px 0 50px 20px;}
  #sidebar ul{margin-bottom:20px}
  #sidebar span.img{margin-bottom:5px;display:block;}
  #sidebar ul li{font-size:.95em;margin-bottom:5px;line-height:1.1em;}  
  #sidebar a{background:url(gfx/bullet.gif) no-repeat 0px 1px;display:block;padding-left:20px;}
  #sidebar a:hover,#sidebar a:focus{background-position:0px -187px;}
  #sidebar ul.downloads a{background:url(gfx/bullet-download.gif) no-repeat 0px 1px;}
  #sidebar ul.downloads a:hover,#sidebar ul.downloads a:focus{background-position:0px -187px;}

/* Tail - aka Foot */
#tail-links .inner{font-size:.5em;}
  #page-end{background:url(gfx/page-end.gif.png) no-repeat;height:98px;padding-top:43px;}
  #page-end ul{padding:5px 10px 0 10px;}
  #page-end li{font-size:.85em;color:#aaa;float:left;}
  #page-end a{color:#56a0c7}
  #page-end a:hover,#page-end a:focus{color:#00a7fd}  
  #page-end li.hyper-metrix{float:right;margin-top:0;}

/* <B><PRE-esque> Styles, for including little bits of code in regular doc flow */
b.pre{font-family:"Consolas","Courier New",Courier,mono,serif;font-size:1.05em;font-weight:normal;}
  b.pre.comment{color:#7e7e7e;}
  b.pre.reserved{color:#006699;}
  b.pre.function{color:#cc6600;}
    
  .code{clear:both;margin-bottom:15px;}
  
  .example-left{float:left;margin:0 20px 20px 0;}
  .example-right{float:right;margin:0 0 20px 20px;}    
  

/* Demo pages */
.learning-demo {margin:0 0 20px 0;background:url(gfx/example200px.gif.png) no-repeat;text-align:center;width:220px;height:220px;}
  .learning-demo *{margin-top:11px;}
  .learning-demo.px400{width:420px;height:420px;background:url(gfx/example400px.gif.png) no-repeat;}
  .learning-demo.px320x240{width:340px;height:260px;background:url(gfx/example320x240px.png) no-repeat;padding:0;}
  .learning-demo.px580x150{width:600px;height:170px;background:url(gfx/example580x150px.png) no-repeat;padding:0;}
  .learning-demo.px250{width:270px;height:270px;background:url(gfx/example250px.png) no-repeat;padding:0;}
  .example200px {float:right;margin:0 -5px 20px 20px;background:url(gfx/example200px.gif.png) no-repeat;text-align:center;width:220px;height:220px;}
  .example200px *{margin-top:11px;}
  h6{clear:left;color:#646464;}
  .example200px h6{color:#646464;font-size:10pt;text-align:right;margin:5px 10px 0 0;}  .example-links{text-align:left;color:#646464;margin:5px 0 0 10px;font-size:.8em;}
  div.context-links{clear:both!important;position:relative;top:25px;}

/* Exhibition */
#exhibitions{margin-top:30px;}
  .exhibit{width:180px;margin-bottom:20px;float:left!important;margin-right:28px;height:260px;}
  .c3{margin-right:0;}
  .exhibit .demo {display:block;}
  .exhibit .demo a{display:block;}
  .exhibit .demo a img{margin-bottom:15px;}
  .author{color:#646464;font-weight:normal;}
  .exhibit p{font-size:.9em;margin:15px 0;line-height:.95em;font-family:arial;text-align:justify;}
  p.links{color:#646464;text-align:left;}

/* Icon-list, generic */
  .icon-list .icon{display:block;width:58px;height:58px;float:left;overflow:hidden;}
  .icon-list p{margin-left:58px}
  .icon-list.twitter p{margin-left:0!}
  .icon-list ul{margin-left:48px!important;}
  .icon-list ul li{list-style-type:none!important;}
  .icon-list ul li b{font-weight:normal;display:block;float:left;width:150px;text-align:right;padding-right:5px;color:#646464;}

/* depreciated?
/*form{padding-top:20px;}
form span{display:block;clear:left;margin-bottom:10px;}
form label{float:left;width:80px;text-align:left;margin-right:10px;margin-left:50px;}
form input{width:220px;}
form textarea{width:220px;height:100px;}
*/

/* Demo Screens from http://ejohn.org */
.demo-screens .section{clear:left;margin-right:-60px;}
  .demo-screens .section > a{float:left;width:200px;margin:0 20px 20px 0;height:270px;}
  .demo-screens .section > a span.info{color:#000;text-decoration:none;}
  .demo-screens .section > a:hover span.info{text-decoration:none;}
  .demo-screens .section > a img{margin-bottom:5px;}
  .demo-screens .section > a:hover{text-decoration:none!important;}
  .demo-screens .section > a:hover span{text-decoration:underline;}
  .demo-screens .section > a > span{display:block;}
  .demo-screens .section h3{display:block;}
  .demo-screens .section h3 a{display:auto;width:auto;}
  .demo-screens .section.wild a{display:block;margin:0 10px 20px 0;float:none!important;height:auto;}

/* Blog Styles */
  .navigation{color:#bbb;}
  .navigation *{display:inline;}
  .navigation a{color:#bbb;} .navigation a:hover, .navigation a:focus {color:#0af;}  
  
  .narrowcolumn{float:left;width:600px;} 
  .pages .post{padding-left:0px}
  .post{padding-left:60px}
  .widecolumn,.content{width:830px!important;}
  .widecolumn .post{padding-left:0px}
  .widecolumn h3{margin-top:14px!important;}
  .blog h4 a{background:url(gfx/blog-post.jpg) no-repeat;color:#eee!important;display:block;height:33px;padding:3px 0 0 70px;margin-left:-60px;}    
  .blog h4 a:hover,.blog h4 a:focus{text-decoration:none!important;background-position:0px -38px;color:#fff!important;} 
  .archive h4 a{background:url(gfx/archive.jpg) no-repeat;color:#eee!important;display:block;height:33px;padding:3px 0 0 70px;margin-left:-60px;}
  .search h4 a{background:url(gfx/search.jpg) no-repeat;color:#eee!important;display:block;height:33px;padding:3px 0 0 70px;margin-left:-60px;}  
  .entry{margin-top:10px;}
  .says{display:none;}
  
  .entry strong{font-weight:bold!important}
  
  ol.commentlist li{list-style-type:none;margin:0 0 10px 0;background:url(../gfx/coment-bot.png) no-repeat bottom left;padding:0 0 1px 0 ;}
  ol.commentlist .comment{display:block;padding:0;background:#e0e0e0;width:828px;}
  ol.commentlist .comment p{padding:0 20px 20px 20px;}
  ol.commentlist .comment-author{padding:20px 0 5px 20px;background:url(../gfx/coment-top.png) no-repeat top left;}
  .avatar{margin:0;vertical-align:baseline;margin-right:0px;border:1px solid #999;}
  .fn{font-size:1.2em;color:#777;}
  .comment-meta{font-size:.8em;padding:0px 0 5px 20px  ;}
  ol.commentlist .comment em{color:#aa0000;margin-left:20px;}
  
  .githubrss{margin-top:10px!important;}
  #github-rss {padding-left:30px!important;}
  #github-rss li{margin-left:58px!important;padding-left:0px;list-style-type:decimal!important;}
  #github-rss a{color:#047;}
  #github-rss a:hover,#github-rss a:focus{color:#0af;}
  
         
  .blog #sidebar h4{margin:30px 0 10px 0}
  .blog #sidebar ul li{padding:0!important;line-height:.7em;list-style-type:none;margin-left:0px;}
  .blog #sidebar ul li a{height:auto;padding:2px 0 0 14px!important;background:url(../gfx/bullet-mini.gif) no-repeat 0px 5px;display:inline!important;}
  .blog #sidebar ul li a:hover,.page.blog #sidebar ul li a:focus{background-position:0px -120px;}
  
  .blog #sidebar li p{line-height:1.1em;}
  .blog #sidebar li p a{background:none;padding:0!important;}
  
  #respond h4{background:url(gfx/blog-post.jpg) no-repeat!important;color:#eee!important;display:block;height:33px;padding:3px 0 0 70px;}
  
  #searchform {/*background:url(../gfx/pjs-search.png) no-repeat top left;padding-left:42px;*/}
  #searchform .hidden{display:none;}
  img.search{margin-bottom:10px;}
  input#s{width:120px;}
  
  #footer{clear:both;margin-top:50px;}
  #footer p{clear:both;margin:0!important;padding:0!important;}
  
  h4#comments {background:url(gfx/comments.jpg) no-repeat!important;color:#eee!important;display:block;height:33px;padding:3px 0 0 70px;}
  
  blockquote {margin:25px;font-family:Georgia1, Georgia, serif;font-size:10pt;padding:20px;border:1px dotted #ccc;color:#555;background:#eee;}              

/* twitter */
  div.tweet{margin-left:60px!important;}
  div.tweet p{margin:5px 0 0 85px}
  div.tweet a.tweeter{color:#047!important;display:block;float:left;width:85px;}
  a.at{color:#c80}  
  a.at:hover,a.at:focus{color:#0af}  
  div.tweet p span{font-size:.8em;color:#888;display:block}