simplified html and css

ScottDowne · Mar 26, 2011 · fc831c8 · fc831c8
1 parent ccf8b5c
commit fc831c8
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 261 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
   	<meta charset="utf-8">
   	<title>GML + Popcorn.js</title>
- 	  <!--<link href="style.css" rel="stylesheet" type="text/css" />-->
+ 	  <link href="style.css" rel="stylesheet" type="text/css" />
  	  <!--<script src="video.js" type="text/javascript" charset="utf-8"></script>-->
  	  <script src="popcorn.js" type="text/javascript" charset="utf-8"></script>
 
@@ -124,20 +124,23 @@
 </head>
 
 <body>
+  <div id="content">
+  <div id="leftcontent">
 
-
-
-    <video id="video" width="540" height="360" controls="controls" preload="auto">
+    </br>
+    <video id="video" height="500" controls="controls" preload="auto">
 
       <source src="42296985.webm">
       <source src="42296985.theora.ogv" type='video/ogg; codecs="theora, vorbis"' />
 
     </video> 
+  </div>
+  <div id="rightcontent">
 
-
-    <div class="content" id="gmldiv"></div> 
-
-  </body>
+    <div id="gmldiv"></div> 
+  </div>
+  </div>
+</body>
 </html>
 
 

diff --git 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
@@ -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;
 }
-
-
-