readme: update for r54

.hgignore

@@ -1,3 +1,4 @@
-wwwroot/*
-nbproject/*
-data/*
+mode:regex
+^_dist/
+^sites/[^/]+/data/
+^sites/[^/]+/wwwroot/

_dist/README.txt

@@ -0,0 +1,37 @@
+A static site generator for a portfolio website.
+
+The scripts used to generate the code.ivysaur.me website.
+
+Written in PHP, Bash
+
+=FEATURES=
+
+- Generates static website, minimising server load and decreasing attack surface compared to dynamic server-side PHP
+- Automatic thumbnailing and sprite sheet generation
+- Download file attachments per-project
+- One-click rebuild, one-click deploy
+- Parallel generation
+
+=CHANGELOG=
+
+2015-04-04: rXX
+- Feature: Support multiple code sites
+- Fix an issue with parallel builds on some versions of windows
+- Fix an issue corrupting URL links with multiple parameters
+- Fix a cosmetic issue with page overflow
+- Fix a cosmetic issue with whitespace on code elements
+
+2014-07-02: r39
+- Feature: Tags
+- Feature: Generate pages in parallel
+- Enhancement: Support raw HTML sections in page content
+- Fix an issue with URLs containing spaces
+- Fix a cosmetic issue with image thumbnail backgrounds
+- Fix a cosmetic issue with download sort order
+- Fix a cosmetic issue with page layout
+
+2013-09-28: r13
+- Initial public source code release
+
+2013-09-21: r3
+- Initial deployment

deploy.cmd

@@ -1,3 +0,0 @@
-@echo off
-
-start C:\bin\cygwin\bin\mintty.exe /bin/bash -l -c "rsync --delete -avz -e ""ssh -i /cygdrive/c/www/ms1_deploy_key -p 2222"" --progress /cygdrive/c/www/m6/code/wwwroot www-data@ms1.ivysaur.me:~/code.ivysaur.me/"

deploy.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+set -eu
+
+LOCALDIR=/cygdrive/c/www/m6/code/sites/code.ivysaur.me/wwwroot
+
+chmod -R 644 "$LOCALDIR"
+chmod -R a+X "$LOCALDIR"
+
+rsync --delete -avz -e "ssh -i /cygdrive/c/www/ms1_deploy_key -p 2222" --progress \
+	"$LOCALDIR" \
+	www-data@ms1.ivysaur.me:~/code.ivysaur.me/
+
+# n.b. set chmod -R a+rX remote side?
+
+read -p "Press any key to continue..."

mkdist.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+set -eu
+
+tar cJvf "codesite-$(date +%s).tar.xz" \
+	rebuild.php rebuild.sh sites/codesite.example.com \
+	--owner=0 --group=0
+
+read -p "Press any key to continue..."

rebuild.cmd

@@ -1,20 +0,0 @@
-@echo off
-
-set PHP=C:\bin\php54\php.exe
-
-echo Cleaning target directory...
-echo.
-rmdir /s /q wwwroot
-mkdir wwwroot
-mkdir wwwroot\srv
-copy static\* wwwroot
-
-echo Building pages...
-echo.
-start /b %PHP% rebuild.php 4 0
-start /b %PHP% rebuild.php 4 1
-start /b %PHP% rebuild.php 4 2
-start /b %PHP% rebuild.php 4 3
-start /b %PHP% rebuild.php 4 4
-
-pause

rebuild.php

@@ -3,16 +3,6 @@
 // Code-hosting website
 // ````````````````````
 
-// CONFIGURATION
-// `````````````
-
-define('BASEDIR', __DIR__.'\\');
-define('SITE_TITLE', 'code.ivysaur.me');
-define('PAGE_THUMB_W', 60);
-define('PAGE_THUMB_H', 60);
-define('INDEX_THUMB_W', 90);
-define('INDEX_THUMB_H', 32); // recommend a multiple of the jpg iDCT block size
-
 /**
  * Create a thumbnail of an image. It overscales, centers, and crops to fit the
  *   target dimensions.
@@ -97,23 +87,6 @@ function hesc($sz) {
 
 function text2html($sz) {
 
-	$sectionFmt = function($sz) {
-		$base = hesc($sz);	
-		
-		$base = preg_replace('~=+(.+)=+~', '<strong>\\1</strong>', $base);
-		$base = preg_replace('~(https?://[^ \\r\\n\\t]+)~i', '<a href="\\1">\\1</a>', $base);
-		
-		$btparts = explode('`', $base);
-		if (count($btparts) > 1 && (count($btparts) % 2)) {
-			for ($i = 1, $e = count($btparts); $i < $e; $i += 2) {
-				$btparts[$i] = '<span class="code">'.$btparts[$i].'</span>';
-			}
-			$base = implode('', $btparts);
-		}
-		
-		return nl2br($base);
-	};
-	
 	$identity = function($sz) {
 		return $sz;
 	};
@@ -138,6 +111,22 @@ function text2html($sz) {
 		return implode($join, $ret);
 	};
 	
+	$sectionFmt = function($sz) use($oddEven, $identity) {
+		$base = hesc($sz);	
+		
+		$base = preg_replace('~^=+(.+)=+~m', '<strong>\\1</strong>', $base);
+		$base = preg_replace('~(https?://[^ \\r\\n\\t]+)~i', '<a href="\\1">\\1</a>', $base);
+		
+		$btparts = explode('`', $base);
+		if (count($btparts) > 1 && (count($btparts) % 2)) {
+			for ($i = 1, $e = count($btparts); $i < $e; $i += 2) {
+				$btparts[$i] = '<span class="code">'.$btparts[$i].'</span>';
+			}
+		}
+		
+		return $oddEven($btparts, $identity, 'nl2br');
+	};
+	
 	$htmlSections = $splitInside('<html>', '</html>', $sz);
 	return $oddEven($htmlSections, $identity, $sectionFmt);
 }
@@ -264,7 +253,7 @@ class CProject {
 		
 		<p><?=text2html($this->longdesc)?></p>
 
-		<?=file_get_contents(__DIR__.'/footer.htm')?> 
+		<?=file_get_contents(BASEDIR.'/footer.htm')?> 
 		
 <?php if (count($this->downloads)) { ?> 
 		
@@ -289,6 +278,9 @@ class CProject {
 		<a href="srv/<?=hesc(urlencode($this->projname))?>_<?=$idx?>.<?=str_ext($origname)?>"><img src="srv/<?=hesc(urlencode($this->projname))?>_<?=$idx?>_thumb.jpg" class="thumbimage"></a>
 	<?php } ?> 
 	</div>
+	
+	<div style="clear:both;"></div>
+	
 <?php } ?> 
 	
 </div>
@@ -315,7 +307,7 @@ function template($title, $content) {
 	<body>
 		<div id="container">
 			<div id="content">
-<?=file_get_contents(__DIR__.'/header.htm')?> 
+<?=file_get_contents(BASEDIR.'/header.htm')?> 
 <?=$content?> 
 			</div>
 		</div>
@@ -434,9 +426,31 @@ function buildcommon() {
 }
 
 function main($args) {
+	$basedir = './'; //$args[0];	
 	$total   = $args[0];
 	$pos     = $args[1];
 	
+	// Parse configuration
+	
+	$config = @parse_ini_file(
+		$basedir . 'config.ini',
+		true,
+		INI_SCANNER_RAW
+	);
+	
+	if ($config === false) {
+		die("[FATAL] Couldn't load '${basedir}/config.ini'!\n");
+	}
+	
+	define('BASEDIR',       $basedir);
+	define('SITE_TITLE',    trim($config['codesite']['title']));
+	define('PAGE_THUMB_W',  intval($config['codesite']['page_thumb_w']));
+	define('PAGE_THUMB_H',  intval($config['codesite']['page_thumb_h']));
+	define('INDEX_THUMB_W', intval($config['codesite']['index_thumb_w']));
+	define('INDEX_THUMB_H', intval($config['codesite']['index_thumb_h']));
+	
+	// Perform build tasks
+	
 	if ($pos == 0) {
 		buildcommon();
 	} else {

rebuild.sh

@@ -0,0 +1,59 @@
+#!/bin/bash
+
+set -eu
+PHP=/cygdrive/c/bin/php/php.exe
+THREADS=4
+
+buildsite() {
+
+	local rebuild="$(realpath ./rebuild.php)"
+	
+	if [[ "$(uname -o)" == "Cygwin" ]] ; then
+		rebuild="$(cygpath -w "$rebuild")"
+	fi
+
+	echo "Site: ${1}"
+
+	pushd "$1" >/dev/null
+
+	echo "Cleaning target directory..."
+
+	if [[ -d wwwroot ]] ; then
+		rm -r wwwroot
+	fi
+	
+	mkdir -p wwwroot/srv
+	
+	if [[ ! -d static ]] ; then
+		mkdir static
+	fi
+	cp static/* wwwroot || true
+	
+	for htm in footer header homepage_blurb ; do
+		if [[ ! -f "${htm}.htm" ]] ; then
+			touch "${htm}.htm"
+		fi
+	done
+
+	echo "Building pages..."
+
+	for i in $(seq 0 "$THREADS") ; do
+		$PHP "$rebuild" "$THREADS" "$i" &
+	done
+	wait
+
+	echo "Site: ${1} finished."
+	echo ""
+		
+	popd >/dev/null
+}
+
+main() {
+	for site in sites/* ; do
+		buildsite "$site"
+	done
+}
+
+main "$@"
+
+read -p "Press any key to continue..."

sites/code.ivysaur.me/config.ini

@@ -0,0 +1,8 @@
+[codesite]
+title=code.ivysaur.me
+page_thumb_w=60
+page_thumb_h=60
+index_thumb_w=90
+index_thumb_h=32
+
+; n.b. Recommend a multiple of the JPEG iDCT block size for index_thumb_h

sites/code.ivysaur.me/static/style.css

@@ -26,6 +26,7 @@ h1,h2,h3 {
 .code {
 	background: #F8F8F8;
 	font-family:Consolas,monospace;
+	white-space:pre;
 }
 
 /* */
@@ -33,6 +34,7 @@ h1,h2,h3 {
 html, body {
 	/* structural */
 	height:100%;
+	min-height:100%;
 	margin:0;
 	border:0;
 	padding:0;
@@ -112,22 +114,18 @@ html, body {
 }
 
 .projinfo {
-	position:relative;
 }
 .projbody {	
-	position:absolute;
-	left:0;
 }
 .projbody_halfw {
-	right: 74px;
+	float:left;
+	width: 678px; /* 740px full - 60px rhs column - 2px border */
 }
 .projbody_fullw {
-	right:0;
+	
 }
 .projimg {
-	position:absolute;
-	right:0;
-	
+	float:right;
 	width:62px;	/* 60px + 2px border */
 }
 

sites/codesite.example.com/config.ini

@@ -0,0 +1,8 @@
+[codesite]
+title=codesite.example.com
+page_thumb_w=60
+page_thumb_h=60
+index_thumb_w=90
+index_thumb_h=32
+
+; n.b. Recommend a multiple of the JPEG iDCT block size for index_thumb_h

sites/codesite.example.com/footer.htm

@@ -0,0 +1,6 @@
+<p>
+	<strong>FOOTER</strong>
+</p>
+<p>
+	Content here.
+</p>

sites/codesite.example.com/header.htm

@@ -0,0 +1 @@
+<h1>HEADER</h1>

sites/codesite.example.com/homepage_blurb.htm

@@ -0,0 +1,8 @@
+
+<p>
+	Homepage blurb goes here.
+</p>
+
+<p>
+	<strong>PROJECTS</strong>
+</p>

sites/codesite.example.com/static/normalize.css

@@ -0,0 +1,406 @@
+/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined in IE 8/9.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 8/9.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9.
+ * Hide the `template` element in IE, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+    display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-family: sans-serif; /* 1 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+    background: transparent;
+}
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/**
+ * Correct font family set oddly in Safari 5 and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    font-size: 1em;
+}
+
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+
+pre {
+    white-space: pre-wrap;
+}
+
+/**
+ * Set consistent quote types.
+ */
+
+q {
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9.
+ */
+
+img {
+    border: 0;
+}
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Correct font family not being inherited in all browsers.
+ * 2. Correct font size not being inherited in all browsers.
+ * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ */
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 2 */
+    margin: 0; /* 3 */
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+    text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

sites/codesite.example.com/static/site.js

@@ -0,0 +1,46 @@
+(function() {
+	"use strict";
+
+	var show_all = function() {
+		var tr = document.querySelectorAll(".projtable tr");
+		for (var i = 0, e = tr.length; i !== e; ++i) {
+			tr[i].style.display = "table-row";
+		}
+		
+		var warn = document.querySelector(".tag-filter-warn");
+		warn.parentNode.removeChild(warn);
+	};
+	
+	var show_tag = function(tag) {
+		if (document.querySelector(".tag-filter-warn") !== null) {
+			show_all();
+		}
+	
+		var tr = document.querySelectorAll(".projtable tr");
+		for (var i = 0, e = tr.length; i !== e; ++i) {
+			tr[i].style.display = (tr[i].className.split(" ").indexOf("taggedWith-"+tag) === -1) ? "none" : "table-row";
+		}
+		
+		var div = document.createElement("div");
+		div.className = "tag-filter-warn";
+		div.innerHTML = "Filtering by tag. <a>reset</a>";
+		document.body.appendChild(div);
+		
+		document.querySelector(".tag-filter-warn a").addEventListener('click', function() {
+			show_all();
+			return false;
+		});
+	};
+
+	var get_show_tag = function(tag) {
+		return function() { show_tag(tag); return false; };
+	};
+
+	window.addEventListener('load', function() {
+		var taglinks = document.querySelectorAll(".tag-link");
+		for (var i = 0, e = taglinks.length; i !== e; ++i) {
+			var tag = taglinks[i].getAttribute("data-tag");
+			taglinks[i].addEventListener('click', get_show_tag(tag));
+		}
+	});
+})();

sites/codesite.example.com/static/style.css

@@ -0,0 +1,161 @@
+/* style.css */
+
+html {
+	overflow-y:scroll; /* always display scrollbar to prevent horizontal lurch */
+}
+img {
+	border:0;
+}
+a {
+	color:black;
+	text-decoration:underline;
+}
+a:hover {
+	color:blue;
+	cursor:pointer;
+}
+h1 a {
+	text-decoration:none;
+}
+h1 a:hover {
+	color:black;
+}
+h1,h2,h3 {
+	margin-top:0;
+}
+.code {
+	background: #F8F8F8;
+	font-family:Consolas,monospace;
+}
+
+/* */
+
+html, body {
+	/* structural */
+	height:100%;
+	margin:0;
+	border:0;
+	padding:0;
+	
+	/* cosmetic */
+	font-family:"Helvetica Neue","Segoe UI",Arial,sans-serif;
+	font-size:12px;
+	background:#DDD url('pixel_weave.png');	/* thanks subtlepatterns.com ! */
+	color:#333;
+}
+
+#container {
+	margin:0 auto;
+	width:768px;
+	position:relative;
+	
+	height:auto !important;
+	height:100%; /* oldIE */
+	min-height:100%;
+	
+	/* cosmetic */
+	background:white;
+}
+
+#content {
+	padding:14px;
+	background:white;
+}
+
+/* */
+
+.tag::before {
+	content:"";
+		
+	display:inline-block;
+	width:7px;
+	height:7px;
+	
+	margin-right:2px;
+	
+	background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAZUlEQVQI12P4//8/Awyrqqp6KSkp/QdhFRWV7cgS+kDBN0B8RVlZuRikACahB+T8ger6BMTXwJJAiTwg4xvMOCj+ART3ZwCa3YYm8QcopgsyEWasDVT3W5AVMHcgO6gViNORXQ8A84NToxbSsJcAAAAASUVORK5CYII=') no-repeat 0 0;
+}
+
+.tag-filter-warn {
+	position:fixed;
+	top:0;
+	right:0;
+	
+	padding:4px;
+	
+	background:lightyellow;
+	border-bottom: 1px solid #888;
+	border-left:1px solid #888;
+}
+
+/* */
+
+.projtable {
+	border-collapse: collapse;
+	width:100%;
+}
+.projtable tr {	
+	transition:0.2s linear;
+}
+.projtable tr:hover {
+	background:#F8F8F8;
+}
+.projtable td {
+	padding: 2px 4px;
+}
+.projtable small {
+	color:grey;
+	font-style:italic;
+}
+.projtable tr td:first-child {
+	width:95px;
+}
+
+.projinfo {
+	position:relative;
+}
+.projbody {
+	position:absolute;
+	left:0;
+}
+.projbody_halfw {
+	right: 74px;
+}
+.projbody_fullw {
+	right:0;
+}
+.projimg {
+	position:absolute;
+	right:0;
+	
+	width:62px;	/* 60px + 2px border */
+}
+
+/* */
+
+.homeimage {
+	width:90px;
+	height:32px;
+}
+
+.homeimage-sprite {
+	background: white url('logos.jpg') no-repeat 0 0;
+}
+
+.thumbimage {
+	width:60px;
+	height:60px;
+	opacity: 0.8;
+	transition:0.2s opacity;
+	border:1px solid lightgrey;
+}
+.thumbimage:hover {
+	opacity:1.0;
+}
+
+.no-image {
+	width:90px;
+	height:32px;
+	display:block;
+	background: white url('no_image.png') no-repeat 0 0;
+}