Custom Demos
Demonstrations built from scratch or found in the wild.
Custom Built
Snake
Molten Bar Chart
Found "In The Wild"
Line Intersection
Substrate
/* #######################################
## 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;}
/* Demonstrations built from scratch or found in the wild.Custom Demos
Custom Built
Snake
Molten Bar Chart
Found "In The Wild"
Line Intersection
Substrate