diff --git a/index.html b/index.html index 50cf393..598ad1f 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ GML + Popcorn.js - + @@ -124,20 +124,23 @@ +
+
- - -
+
- -
- - +
+
+
+ diff --git a/popcorn.gml.js b/popcorn.gml.js index 33fa0a6..e95111a 100644 --- a/popcorn.gml.js +++ b/popcorn.gml.js @@ -32,6 +32,8 @@ options.title = document.createElement( 'div' ); options.title.style.display = "none"; + options.title.style.color = "white"; + options.title.innerHTML = "#" + options.gmltag; @@ -62,8 +64,8 @@ */ start: function( event, options ){ Processing.getInstanceById( 'canvas' + options.gmltag ).loop(); - options.container.style.display = "inline"; - options.title.style.display = "inline"; + options.container.style.display = "block"; + options.title.style.display = "block"; }, /** */ diff --git a/style.css b/style.css index e92a6cc..75a8a55 100644 --- a/style.css +++ b/style.css @@ -1,260 +1,14 @@ -html, body, div, span, object, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, font, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, footer { - margin: 0; - padding: 0; - border: 0; - outline: 0; - font-size: 100%; - vertical-align: baseline; - background: transparent; -} - -html { - height: 100%; -} - body { - line-height: 1; - font-family: Helvetica, Arial, "Lucida Grande"; - font-size: 15px; - background: #f8f8f8 url(images/body_bg2.jpg) repeat-x center top; - margin: 0; - padding: 0; - height: 100%; -} - -header, footer, article, section, aside, footer { - display:block; -} - -a { - text-decoration: none; - color: #cc433d; -} - -a:hover{ - color: #f27c77; -} - -h2 { - font-size: 18px; - font-weight: 300; - font-style: normal; -} - -#wrapper { - width: 1095px; - margin: 0 auto; -} - -#title { - float: left; - padding: 15px 0 15px 0; - width: 330px; - background: #FFF url(images/test_bg.jpg); - -webkit-box-shadow: -1px 1px 1px #d9d9d9; - -moz-box-shadow: -1px 1px 1px #d9d9d9; - box-shadow: -1px 1px 1px #d9d9d9; - border: 1px solid #c6c6c6; -} - -#title a { - color: #2788d3; - font-family: Arial,sans-serif; - font-size: 30px; - font-weight: bold; - text-transform: lowercase; - text-decoration: none; - margin-left: 75px; + background-color: black; } -#title a:hover{ - color: #5c6a98; - - } - -#about { - float: right; - height: 60px; - width: 550px; - background: #FFF; - -webkit-box-shadow: -1px 1px 1px #d9d9d9; - -moz-box-shadow: -1px 1px 1px #d9d9d9; - box-shadow: -1px 1px 1px #d9d9d9; - border: 1px solid #c6c6c6; +#content { + float: right; } - -#text { - float:left; - font-size: 14px; - line-height: 16px; - width: 492px; - margin: 15px 0 0 17px; -} - -#logo { - float: right; - margin: 10px 8px 0 0; -} - #leftcontent { - clear: both; - margin-bottom: 5px; float: left; - width: 600px; } - #rightcontent { - float: right; - width: 620px; -} - -#videoattribution { - font-size:18px; - line-height: 22px; - min-height: 70px; - width: 320px; -} - -#audioattribution { - font-size:18px; - line-height: 22px; - min-height: 70px; - width: 320px; -} - -#wikidiv { - min-height: 145px; - width: 300px; -} - - -#wikidiv a { - font-size:18px; - line-height: 30px; - -} - -#footnote { - min-height: 50px; - width: 520px; -} - - -#video { - min-height: 360px; - width: 540px; -} - -aside { - margin-top: 14px; - padding: 12px; - background: #FFF; - position: relative; - -webkit-box-shadow: -1px 1px 1px #d9d9d9; - -moz-box-shadow: -1px 1px 1px #d9d9d9; - box-shadow: -1px 1px 1px #d9d9d9; - border: 1px solid #c6c6c6; - margin-bottom: 10px; -} - -.overlay{ - z-index: 9001; - display: none; - top: 0px; - left: 0px; - opacity: 0.2; - filter: alpha(opacity=20); - height: 100%; - width: 100%; - background: red; - position: absolute; -} - -.inactive{ - z-index: 9001; - display: none; - top: 0px; - left: 0px; - opacity: 0.2; - filter: alpha(opacity=20); - height: 100%; - width: 100%; - background: grey; - position: absolute; -} - -aside .content{ - padding-top: 8px; - border-top:1px dotted #dddddd; - line-height: 15px; - color: #666; -} - -#videobox{ - margin: 0px; - margin-top: 15px; - padding: 0px; - line-height: 0px; - -webkit-box-shadow: -1px 1px 1px #d9d9d9; - -moz-box-shadow: -1px 1px 1px #d9d9d9; - box-shadow: -1px 1px 1px #d9d9d9; - min-height: 360px; - background: url(images/update.png) no-repeat; -} - -aside:hover .content{ - color: #000; -} - -aside img{ - display: block; - margin-bottom: 8px; -} - -a.more { - font-weight: bold; - font-style: italic; - display: block; - text-align: right; -} - -aside .icons{ - display: block; - position: absolute; - top:6px; - right:8px; - padding: 0px; -} - -footer { - clear:both; - margin-top: 20px; - padding: 10px; - font-size: 12px; - background: #eaeaea; - -webkit-box-shadow: -1px 1px 1px #d9d9d9; - -moz-box-shadow: -1px 1px 1px #d9d9d9; - box-shadow: -1px 1px 1px #d9d9d9; - border: 1px solid #c6c6c6; - -} - -footer a { - text-decoration: none; - color: #2788d3; -} - -footer a:hover{ - color: #5c6a98; + width: 600px; + float: left; } - - -