fearphage/webfeeds.htm

## webfeeds.htm
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<!--
  Thanks to all contributors: Ayush, shoust
-->
<title>...</title>
<style type="text/css" media="screen,projection,tv,handheld,print,speech">
html, body {
  margin:0;
  padding:0;
  border:0;
}
body {
  color:#000;
  background:#fff;
  font:normal normal .9em/1.5em sans-serif;
  font-family: Helvetica, sans-serif;
  padding:1em 0;
}
body[class]:after {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:#fff;
  content:attr(class);
  text-transform:uppercase;
  padding-top:30%;
  text-align:center;
}
h1 {
  font-size:1.8em;
  line-height:1.8em;
  display:inline;
  text-shadow:0px 0px 4px #ddd;
  margin: 0 0 0 20px;
}
a { text-decoration:none; }
a:hover { text-decoration:underline; }
#items {
  text-align:center;
  margin:0;
  padding:0;
  overflow:hidden;
}
#items > ul {
  list-style:none;
  margin:0;
  padding:0;
  border:0;
  width:auto;
  text-align:left;
}
#items > ul > li {
  vertical-align:top;
  font:normal normal .8em/1.6em sans-serif;
  margin: 8px 8px 1em 8px;
  padding:0;
}

#items > ul > li > h2 {
  font:normal lighter 1.66em/1.2em sans-serif;
  margin:0;
  color:#000;
  text-shadow:0px 0px 4px #ddd;
  overflow:hidden;
  -o-text-overflow:ellipsis;
  max-width: 32em;
  display: inline-block;
  white-space: nowrap;
}
#items > ul > li > h2 > a {
  color:inherit;
padding:0;

}
#items > ul > li a {
  color:#b00;
}
#items > ul > li > div.content {
  border-top:1px solid #ccc;
text-align:justify;
  margin:1em 0 0 0;
  padding:1em 0 3em 0;
  color:#555;
  vertical-align:top;
  clear: both;
  overflow: hidden;
}
#items > ul > li > div p {
  margin:0 0 2em 0;
}
#items > ul > li > div a {
  font-style:italic;
  margin-right:.25em;
}
#items > ul > li > div img {
  display:none;
}
#items > ul > li > div img[src] {
  float:left;
  display:inline-block;
  border:1px solid #aaa;
  padding:1px;
  margin:1px;
  margin:1px 8px 8px 1px;
  max-width:100%;
}
#items > ul > li > div a img[src] {
  border-color:#a00;
}
#items > ul > li > div a:hover img {
  border-width:2px;
  margin:0px 7px 7px 0px;
}
#here {
  color:#555;
  font-size:.85em;
}
.mini-view .feedEntry {
  clear: left;
}
.summary {
  display: none;
}
.mini-view .summary {
  font-size: 12px;
  margin: 0;
  color: gray;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  display: block;
}
.mini-view .author, .mini-view .content {
  display: none;
}
.mini-view h2, .mini-view .summary, .mini-view .pubDate {
  font-family: Trebuchet MS, Tahoma, Verdana !important;

}
div#items.mini-view > ul > li > h2 {
  font-size: 14px;
  text-shadow: none;
  float: left;
  margin-right: .8em;
  font-weight: bold;
}
div.mini-view {
  white-space: nowrap;

}
.mini-view .summary {
  overflow: hidden;
  -o-text-overflow: ellipsis;
  font-weight: bold;
}
.mini-view#items > ul > li {
  margin-top: 6px;
  margin-bottom: 6px;
}
div.mini-view#items > ul > li:first-child {
  margin-top: 8px;
}

</style>
<script type="text/javascript">
/* <![CDATA[ */
// settings:
showFullText = false;

function addEvent(node, eventName, fn) {
  node.addEventListener(eventName, fn, false);
}
String.prototype.trim = function() {
	return this.replace( /^\s+|\s+$/g, '' );
}

/*
 *	whiteList
 *	tags + attributes and method to validate them
 */
HTMLElement.prototype.whiteList = {
	A: {
		href: function( node ) {
			this.value = this.value.replace(/\s/g, '');
			return null!=this.value.match( /https?:\/\//i );
		},
		title: function(node) { return true; }
	}
	,IMG: {
		src:function( node ) {
			return null!=this.value.match( /http:\/\//i );
		},
		alt:function(node) { return true; }
	}
	,'P':{}
	,'UL':{}
	,'OL':{}
	,'LI':{}
	,'DL':{}
	,'DT':{}
	,'H1':{}
	,'H2':{}
	,'H3':{}
	,'H4':{}
	,'H5':{}
	,'H6':{}
	,'BR':{}
	,'STRONG':{}
}
/**
 *	Prototype extension to simplify adding and sanitizing markup to an element.
 *	arguments = some strings containing the HTML markup to sanitize and append
 */
HTMLElement.prototype.appendMarkup = function()
{
	var	dummy = document.createElement('div');
	dummy.innerHTML = arguments.join('');
	dummy.sanitize();

	//	append DOM tree of dummy in this
	var i = 0, node;
	while ((showFullText || (this.text.length<512)) && (node=dummy.childNodes[i])) {
		this.appendChild(node.cloneNode( true ));
		i++;
  }
	if (node) {
    this.appendChild(document.createTextNode( '...' ));
  }
  return this;
}
/**
 *	Prototype extension to sanitize the attributes and HTMLElements
 *	whiteList = { 'NODENAME_0':['attribute_0','attribute_1'] }
 */
HTMLElement.prototype.sanitize = function(whiteList, parent)
{
	var whiteList = whiteList||this.whiteList;

	// recurse
	for (var i = 0, previousNodeName = '/', nodeName, currentNode; currentNode = this.childNodes[i]; i++, previousNodeName = nodeName, previousNode = currentNode) {
		nodeName	= currentNode.nodeName;
		if ((currentNode.nodeType == 1) &&
        (!whiteList[nodeName] || ( (nodeName == 'BR') && ( previousNodeName=='P') ) ) )
		{
    		// either it's not in the whiteList or an extra BR -> replace currentNode by its content
    		while (currentNode.firstChild) {
    			this.insertBefore( currentNode.firstChild.cloneNode( true ), currentNode );
    			currentNode.removeChild(currentNode.firstChild);
    		}
            	this.removeChild( currentNode );

		}
		else
	    {
	        if( currentNode.nodeType==1 )
	        {
    			//  in the nodeNamesWhiteList
    			//	-> sanitize the attributes
    			for( var j=currentNode.attributes.length,attribute; attribute=currentNode.attributes[--j]; )
    		    {
    				if( 'undefined'	==typeof(whiteList[nodeName][attribute.name])
    					|| false	==whiteList[nodeName][attribute.name].apply(attribute,[currentNode]) )
    				{
    						currentNode.removeAttribute( attribute.name );
    				}
                }
                //  -> and recurse
    			currentNode.sanitize( whiteList );
    	        previousNodeName = nodeName;
	        }
	    }
	}
}
Number.prototype.pad = function(length) {
  if (!length || (length <= ('' + this).length))
    return '' + this;

  var str = '0' + this;
  while (str.length < length) {
    str = '0' + str;
  }
  return str;
}
String.prototype.to12HourTime = function(includeSeconds) {
  var pieces = this.split(':'), ampm = ' AM', tmp;
  if (pieces.length < 2)
    return '12:00 AM';

  if ((tmp = parseInt(pieces[0])) > 12) {
    tmp -= 12;
    ampm = ' PM';
  }
  return tmp + ':' + pieces[1] + (includeSeconds && (pieces.length == 3) ? ':' + pieces[2] : '') + ampm;
}

function changeArticleLength(len) {
	var itemsUl = document.getElementById('itemsUl');
	var contentDivs = itemsUl.selectNodes('li/div[@class="content"]'),
		val = len/100;
	for(var i=0, div; div=contentDivs[i]; i++){
		if(!div.orig_height)
			div.orig_height = parseFloat(getComputedStyle(div,null).height);
		if(!div.orig_paddingBottom)
			div.orig_paddingBottom = parseFloat(getComputedStyle(div,null).paddingBottom);
		div.style.height = (val * div.orig_height) + 'px';
		div.style.paddingBottom = (val * div.orig_paddingBottom) + 'px';
	}
	if(! +len)
		itemsUl.parentNode.className = 'mini-view'
	else if(itemsUl.parentNode.className.indexOf('mini-view')!=-1)
		itemsUl.parentNode.className = '';
  /* scrollbar adjust
  var width = document.body.offsetWidth - window.innerWidth;
  if ( width < 0)*/
}
function filterFeed(criteria) {

}
function searchFeed(needle) {
  var parent = document.getElementById('itemsUl'), needle = needle.replace(/\W/g, '\\$1'), showAll = !needle.length, total = 0;
  //opera.postError('in search: needle = ' + needle + ' / showall = ' + showAll + ' / childNodes.length = ' + parent.childNodes.length);
  /*Array.prototype.forEach(parent.childNodes, [function(elem) {
    opera.postError('test');
    var nodes = elem.selectNodes('.//*[contains(translate(text(), "ABCDEFGHIJKLMNOPQRSTUVWXYZ", "abcdefghijklmnopqrstuvwxyz"), "' + needle + '")]');
    opera.postError('iterating... ' + nodes.length);
    elem.style.display = (showAll || nodes.length ? 'list-item' : 'none');
    }]
  );*/
  for (var i = 0, elem, nodes; elem = parent.childNodes[i]; i++) {
    nodes = elem.selectNodes('.//*[contains(translate(text(), "ABCDEFGHIJKLMNOPQRSTUVWXYZ", "abcdefghijklmnopqrstuvwxyz"), "' + needle + '")]');
    if (showAll || nodes.length) {
      elem.style.display = '';
      total++;
    }
    else
      elem.style.display = 'none';
  }
  var count = document.getElementById('count');
  count.replaceChild(document.createTextNode(total), count.firstChild);
}
function sortFeed(method) {
  if (method == sortFeed.method)
    return;


  var compare = function(a, b) {
    if (a < b) return -1;
    if (a > b) return 1;
    return 0;
  }, fn;
  items = Array.prototype.slice.apply(theFeed.entries, [0]);

  switch(method) {
    case 'title':
      fn = function(a,b) {
        return compare(a.title.data.trim(), b.title.data.trim());
      };
      break;
    case 'source':
      fn = function(a,b) {
        return compare(a.author.trim(), b.author.trim());
      };
      break;
    case 'date':
      fn = function(a,b) {
        return compare(b.publicationDate.getTime(), a.publicationDate.getTime());
      };
      break;
    default:
      return;
  }

  Array.prototype.sort.apply(items, [fn]);
  var copy = {}
  for (var key in theFeed)
    copy[key] = theFeed[key];

  copy.entries = items;
  __outputFeed(copy);
  sortFeed.method = method;
  return;
}
sortFeed.method = 'date';
/*
 *  outputFeed
 */
function outputFeed(feed, status) {
  if (!feed) {
    var statusName = ['NO FEED ITEMS','CANCELED','REFRESH POSTPONED','NOT MODIFIED','OUT OF MEMORY','SERVER TIMEOUT','LOADING ERROR','PARSING ERROR']
    document.body.className = 'error #'+ status +' ( '+ statusName[ status ] +' )';
    return false;
  }

  itemTemplate = document.createElement('li');
  itemTemplate.className = 'feedEntry';
  itemTemplate.appendChild(document.createElement('h2'));
  itemTemplate.firstChild.appendChild( document.createElement('a'));
  itemTemplate.appendChild(document.createElement('div')).className = 'miniDate';
  itemTemplate.appendChild(document.createElement('div')).className = 'summary';
  itemTemplate.appendChild(document.createElement('div')).className = 'author';
  itemTemplate.appendChild(document.createElement('div')).className = 'pubDate';
  itemTemplate.firstChild.firstChild.appendChild(document.createTextNode('...'));
  itemTemplate.appendChild(document.createElement('div')).className = 'content';

  // set title
  top.document.title = document.getElementById('feedTitle').firstChild.nodeValue = document.createElement( 'div' ).appendMarkup(feed.title.data ).textContent.trim();

  return __outputFeed(feed);
}

function __outputFeed(feed) {
  var hItemsUl = document.getElementById('itemsUl'), count = document.getElementById('count');
  if (!feed || !hItemsUl || !count)
    return false;

  var itemsFragment = document.createDocumentFragment();

  //  walk the feed items
  for (var i = 0, feedEntry; feedEntry = feed.entries[i]; i++) {
    var itemLi = itemTemplate.cloneNode( true );
    itemLi.firstChild.firstChild.setAttribute('href', feedEntry.uri || '#');
    if (feedEntry.author)
      itemLi.childNodes[3].appendChild(document.createTextNode(feedEntry.author));

    if (feedEntry.publicationDate) {
      var pieces = feedEntry.publicationDate.toString().split(' ')
          ,date = document.createTextNode(pieces.slice(1,3).join(' ') + ', ' + pieces.slice(4,5).join('').to12HourTime());
      itemLi.childNodes[1].appendChild(date.cloneNode(false));
      itemLi.childNodes[4].appendChild(date);
    }
    //  set the title
    itemLi.firstChild.firstChild.firstChild.nodeValue = document.createElement('div').appendMarkup(feedEntry.title.data).textContent.trim();

    //  write content
    if (feedEntry.content.isMarkup)
      itemLi.lastChild.appendMarkup(feedEntry.content.data.trim());
    else if (feedEntry.content.isPlainText)
      itemLi.lastChild.appendChild(document.createTextNode(feedEntry.content.data.trim()));
    else
      itemLi.lastChild.appendChild(document.createTextNode(feedEntry.content.data));

    itemLi.childNodes[2].appendChild( document.createTextNode( itemLi.lastChild.textContent ) );

    //  append itemLi to itemsFragment
    itemsFragment.appendChild(itemLi);
  }

  hItemsUl.innerHTML = '';
  hItemsUl.appendChild(itemsFragment);
  count.replaceChild(document.createTextNode(feed.entries.length), count.firstChild);
  document.body.removeAttribute('class');
  return true;
}
window.addEventListener('load'
  ,function() {
    var here = document.getElementById('here');

    for (var i = 0; theFeed = opera.feeds.allFeeds[i++]; ) {
      if (theFeed.uri == location.href) {
        here.firstChild.nodeValue = here.href = theFeed.uri;
        break;
      }
    }
    outputFeed(theFeed);
    addEvent(document.getElementById('native'), 'click', function(e) {
      e.preventDefault();
      opera.feeds.subscribeNative(location.href);
    });
    addEvent(document.getElementById('search'), 'keypress', function(e) {
      if ((e.keyCode == 13) || (e.target.value == '')) {
        searchFeed(e.target.value);
      }
    });
    var escapedLocation = escape(location.href);
    Array.prototype.forEach.apply(document.selectNodes('//a[@rel="external"]'), [function(elem) {
      elem.href += escapedLocation;
    }]);
    var sortCategories = document.selectNodes('//div[@rel="sort"]');
    Array.prototype.forEach.apply(sortCategories, [function(elem) {
      var method = elem.firstChild.nodeValue.toLowerCase(), regex = /\sselected/;
      addEvent(elem, 'click', function() {
        Array.prototype.forEach.apply(sortCategories, [function(elem) { elem.className = elem.className.replace(regex, '') }]);
        elem.className += ' selected';
        sortFeed(method);
      });
    }]);
    document.getElementById('external').href = 'feed://' + location.href.replace(/https?\:\/\//, '');
    function doChange(e) {
      var slider = document.getElementById('slider'), direction = e.target.id;
      changeArticleLength(slider.value = Math.max(parseInt(slider.value) + ((direction == 'smaller' ? -1 : 1) *10), 0));
    }
    ['smaller', 'bigger'].forEach(function(name) {
      addEvent(document.getElementById(name), 'click', doChange);
    });
    addEvent(document.getElementById('slider'), 'change', function(e) {
      changeArticleLength(e.target.value);
    });
    document.getElementById('external').href = 'feed://' + location.href.replace(/https?\:\/\//, '');
  }
  ,false
);

/* ]]> */
</script>
<style type="text/css">
  #side_panel {
    background-color: #eee;
    width: 200px;
    position: fixed;
    top: 64px;
    right: 0;
    padding: 14px 8px 10px 10px;
    height: 100%;
    border-left: 1px solid #000;
    line-height: 1.1em;
    font-size: 0.9em;
    font-weight: 600;
  }
  @media screen and (max-width: 600px) {
    #side_panel {
      position: relative;
      width: 98%;
    }
    #items {
      margin-right: 0px !important;
    }
    #sort *, #timespans *, #feedActions *, #slidergroup *, #filtergroup * {
      display:inline !important;
    }
    #search, #sliderdiv {
      max-width:50%;
    }
  }
  #counts {
    margin:0;
    font-size:1.5em;
    line-height:1.5em;
    display:inline;
    text-shadow:0px 0px 4px #ddd;
    float: right;
    margin-right: 20px;
  }
  #items {
    margin-right: 220px;
    margin-top: 60px;
  }
  #search {
    background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAADGUlEQVR4XqWTfUhbVxjG33M/EuNHxaJVR6Gjm+BfY5udit3KoNDRsXWOTXRQB1tsV3NvPmqnk2KrQrWNG7UflEJl62QwdND+M9oyupXimqaLc53SicRuYSYuxnzJjYm5ubnn3b2jkU3Wv/rAc3h44fnxHg4HNqqru3Pc7hCTjsNWanMIaLVbVo/2dF+Ex4jJhU+6O3dZ7WK66d2mJkFw5LcdEMF8wAaWdkdB4763PxJtwpoGavhfQG9/z0tpee22VbQbJ39fU85/H5JGJ1PZUU8Szt5ckqb9stLhOJK3upr48cRA/wuwUaLNkvR6vTj0tSvTcfk+dc+FowvhZNgXSmSv3vP/0XH5F/X0mEuen59Hwdqe+M8GPcePdu1seJm/89tyZkk2cW27t4ee3lJI840szzEMPFNRRKsqi1z+lImf8cUz9XX1XG//MXsOwEWjEWfNizXw2fW/YE9taYZloFRWVMiqgCpFVlXV0lBcVgiQ4IMQPNVSWwd33a4zAHD2HwDP80iBIQWbiiHPwM1IawqTp6LMsSRDKVZ9cyfgVCgtBISSFYX72GTKB72zvgGlNGvkNQ6DOL+YWGJIEVNSCKqcUYML4VRApjTCIqHAYF5WUVRZllmto6wDysvLpxYXF3cUGwzE649s9kdSd5GBZUKYEKFYygIkgWBBLLz8SvW2zSQWi8oVFZX3cgCG47iRW7d/CL5RU86aCkwNKtIiQMIAIodAiykBQzqd3lJSVvbq3ufLmC++/FxaWYnfgn/LIh4Kjo2PRb7zPETtyXD/wLe/OkY8XfYRz1fv9V2ZOqLNXD/P4PkL5+jgyYHkofaDUlPzO5V6l+jHqaGB5wKBwE9Vz1ZHXm9s2XpzOgQLMQUzlJCqMh52VZfAheETdN+bbzFT96cgHo9RSZIiBt7wGujKQbRNAr19xx4OnxlemJiYkHw+HzqHnHNtBz/8s7W11Wy1CXjjxjV0fnoK3W63KlotCBukgz7QfF20tSc1o571GWgSBGFQL01OenB2dhb1TB7zwXSTR85dFfVgNpvfN+UbLz2aNcOT6m83ZIbg1M0CKwAAAABJRU5ErkJggg==) no-repeat 2px 2px;
    margin: 0; padding: 2px 2px 2px 22px;
		width: 90%;
    height: 22px;
		border: 1px solid #AAA; box-sizing: border-box;
  }
  #slider {
    width: 64%;
    background-color: #ddd;
    background-color: transparent;
    /*background-image: url('http://www.rikkertkoppes.com/modules/interfacing/wf2.0/slider2-h.gif');*/
    border: 1px solid silver;
  }
  @media print {
    #side_panel, #heading { display: none }
  }
  div#bigger, div#smaller {
    display: inline-block;
    content:'\a0';
    overflow:hidden;
    vertical-align:middle;
    background-repeat: no-repeat;
    width:16px;
    height:16px;
    border: 1px solid transparent;
  }
  div#bigger:hover, div#smaller:hover {
    border-color: #000;
  }
  div#bigger {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjM1MO6znwAAACdJREFUOE9jYBgFNAmBBqCp+DBNLEUxFJfttLcZZsNoGNAvrKlkEwAzpQ4BJOO3lgAAAABJRU5ErkJggg==);
  }
  div#smaller {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjM1MO6znwAAACBJREFUOE9jYBgFwzQEGoD+wodp721cttPe5lEbyAwBAJvTBwFEvjULAAAAAElFTkSuQmCC);
  }
  .group {
    margin-bottom: 14px
  }
  .group > div, .group > a {
    margin-left: 10px;
    color: #555;
  }
  .group div[class], #side_panel .group div[id] {
    margin-left: 0;
    color: #000;
  }
  .group > div.choice {
    margin-left: 10px;
    color: #555;
  }
  .group > div.choice:hover, .group > div.selected:hover {
    text-decoration: underline;
    cursor: pointer;
    margin-left: 10px;
  }
  #side_panel .group > div.selected {
    font-weight: bold;
    color: #b00;
    margin-left: 10px;
  }
  .group .grouptitle { font-weight: bold; font-size: 110%; }
  #wrapper {
    background: #a00 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAADACAYAAAAjiMLcAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAA6SURBVHja7NAhDgAwCARBaIrv/z97RRIMArubnBl5Lslqx1oAAAAAMILnosLNvQ7BYwAAAMAOvgADAGubBJq5vUivAAAAAElFTkSuQmCC) repeat-x center center;
    color: #fff;
    padding:8px;
    margin:0;
    border: 1px solid #000;
    border-width: 0 0 1px 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index:9999;
    width: 100%;
}

  #feedTitle {
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    overflow: hidden;
  }
  #heading { display: none }
  div.author, div.pubDate, .miniDate {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 1em 0 2em;
    font-size: 120%;
    font-weight: bold;
    color: #aaa;
    display: inline-block;
    max-width: 180px;
  }
  #feedActions a {
    display: block;
  }
  .miniDate {
    float: right;
    display: none;
    margin: 0 0 0 1em;
  }
  .mini-view .miniDate { display: block }
  .mini-view .pubDate { display: none }
</style>
</head>
<body class='loading'>
  <div id="wrapper">
    <div id="counts">Total <span id="count">0</span></div><h1 id="feedTitle">Title of the news feed</h1>
  </div>
  <div id="heading">Fallback content in case the method <code>opera.feeds.subscribeNative()</code> is not available.</div>
  <div id="side_panel">
            <div class="group" id="filtergroup">
                <div class="grouptitle">Search Articles:</div>
                <input type="text" id="search" />
            </div>

            <div class="group" id="slidergroup">
                <div class="grouptitle">Article Length:</div>
                <div id="sliderdiv">
                    <div id="smaller"></div>
                    <input id="slider" type="range" min="0" value="100" max="100" onchange="changeArticleLength(this.value)"/>
                    <div id="bigger"></div>
                </div>
            </div>

            <div class="group" id="sort">
                <div class="grouptitle">Sort By:</div>
                <div class="choice selected" rel="sort">Date</div>
                <div class="choice" rel="sort">Title</div>
                <div class="choice" rel="sort">Source</div>
            </div>

            <div class="group" id="timespans">
                <div class="grouptitle">Recent Articles:</div>
                <div class="choice selected">All</div>
                <div class="choice">Today</div>
                <div class="choice">Yesterday</div>
                <div class="choice">Last Seven Days</div>
                <div class="choice">This Month</div>
                <div class="choice">Last Month</div>
            </div>

            <!--<div class="group" id="sourcelist">
                <div class="grouptitle">Source:</div>
                <div>Source</div>
            </div>-->

            <div class="group" id="feedActions">
                <div class="grouptitle">Actions:</div>
                <a href="#subscribe" id="native">Subscribe in Opera</a>
                <a href="feed://" id="external">Subscribe External</a>
                <a href="http://www.bloglines.com/sub/" rel="external">Add to Bloglines</a>
                <a href="http://fusion.google.com/add?feedurl=" rel="external">Add to Google</a>
                <a href="http://feeds.my.aol.com/add.jsp?url=" rel="external">Add to My AOL</a>
                <a href="http://add.my.yahoo.com/rss?url=" rel="external">Add to My Yahoo</a>
                <a href="http://www.netvibes.com/subscribe.php?url=" rel="external">Add to Netvibes</a>
                <a href="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=" rel="external">Add to NewsGator</a>
                <a href="mailto:?subject=Check+out+this+RSS+Feed&amp;body="  rel="external">Mail Link to This Feed</a>
                <a href="#bookmark" id="bookmark" rel="sidebar">Add Bookmark&hellip;</a>
            </div>
  </div>
  <div id="items">
    <ul id="itemsUl"></ul>
  </div>
  <div style="clear: both">This page was generated by Opera from <a id="here" href="#">here</a></div>
</body>
</html>
	<?xml version="1.0" encoding="utf-8"?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
	<head>
	<!--
	Thanks to all contributors: Ayush, shoust
	-->
	<title>...</title>
	<style type="text/css" media="screen,projection,tv,handheld,print,speech">
	html, body {
	margin:0;
	padding:0;
	border:0;
	}
	body {
	color:#000;
	background:#fff;
	font:normal normal .9em/1.5em sans-serif;
	font-family: Helvetica, sans-serif;
	padding:1em 0;
	}
	body[class]:after {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:#fff;
	content:attr(class);
	text-transform:uppercase;
	padding-top:30%;
	text-align:center;
	}
	h1 {
	font-size:1.8em;
	line-height:1.8em;
	display:inline;
	text-shadow:0px 0px 4px #ddd;
	margin: 0 0 0 20px;
	}
	a { text-decoration:none; }
	a:hover { text-decoration:underline; }
	#items {
	text-align:center;
	margin:0;
	padding:0;
	overflow:hidden;
	}
	#items > ul {
	list-style:none;
	margin:0;
	padding:0;
	border:0;
	width:auto;
	text-align:left;
	}
	#items > ul > li {
	vertical-align:top;
	font:normal normal .8em/1.6em sans-serif;
	margin: 8px 8px 1em 8px;
	padding:0;
	}

	#items > ul > li > h2 {
	font:normal lighter 1.66em/1.2em sans-serif;
	margin:0;
	color:#000;
	text-shadow:0px 0px 4px #ddd;
	overflow:hidden;
	-o-text-overflow:ellipsis;
	max-width: 32em;
	display: inline-block;
	white-space: nowrap;
	}
	#items > ul > li > h2 > a {
	color:inherit;
	padding:0;

	}
	#items > ul > li a {
	color:#b00;
	}
	#items > ul > li > div.content {
	border-top:1px solid #ccc;
	text-align:justify;
	margin:1em 0 0 0;
	padding:1em 0 3em 0;
	color:#555;
	vertical-align:top;
	clear: both;
	overflow: hidden;
	}
	#items > ul > li > div p {
	margin:0 0 2em 0;
	}
	#items > ul > li > div a {
	font-style:italic;
	margin-right:.25em;
	}
	#items > ul > li > div img {
	display:none;
	}
	#items > ul > li > div img[src] {
	float:left;
	display:inline-block;
	border:1px solid #aaa;
	padding:1px;
	margin:1px;
	margin:1px 8px 8px 1px;
	max-width:100%;
	}
	#items > ul > li > div a img[src] {
	border-color:#a00;
	}
	#items > ul > li > div a:hover img {
	border-width:2px;
	margin:0px 7px 7px 0px;
	}
	#here {
	color:#555;
	font-size:.85em;
	}
	.mini-view .feedEntry {
	clear: left;
	}
	.summary {
	display: none;
	}
	.mini-view .summary {
	font-size: 12px;
	margin: 0;
	color: gray;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	display: block;
	}
	.mini-view .author, .mini-view .content {
	display: none;
	}
	.mini-view h2, .mini-view .summary, .mini-view .pubDate {
	font-family: Trebuchet MS, Tahoma, Verdana !important;

	}
	div#items.mini-view > ul > li > h2 {
	font-size: 14px;
	text-shadow: none;
	float: left;
	margin-right: .8em;
	font-weight: bold;
	}
	div.mini-view {
	white-space: nowrap;

	}
	.mini-view .summary {
	overflow: hidden;
	-o-text-overflow: ellipsis;
	font-weight: bold;
	}
	.mini-view#items > ul > li {
	margin-top: 6px;
	margin-bottom: 6px;
	}
	div.mini-view#items > ul > li:first-child {
	margin-top: 8px;
	}

	</style>
	<script type="text/javascript">
	/* <![CDATA[ */
	// settings:
	showFullText = false;

	function addEvent(node, eventName, fn) {
	node.addEventListener(eventName, fn, false);
	}
	String.prototype.trim = function() {
	return this.replace( /^\s+\|\s+$/g, '' );
	}

	/*
	* whiteList
	* tags + attributes and method to validate them
	*/
	HTMLElement.prototype.whiteList = {
	A: {
	href: function( node ) {
	this.value = this.value.replace(/\s/g, '');
	return null!=this.value.match( /https?:\/\//i );
	},
	title: function(node) { return true; }
	}
	,IMG: {
	src:function( node ) {
	return null!=this.value.match( /http:\/\//i );
	},
	alt:function(node) { return true; }
	}
	,'P':{}
	,'UL':{}
	,'OL':{}
	,'LI':{}
	,'DL':{}
	,'DT':{}
	,'H1':{}
	,'H2':{}
	,'H3':{}
	,'H4':{}
	,'H5':{}
	,'H6':{}
	,'BR':{}
	,'STRONG':{}
	}
	/**
	* Prototype extension to simplify adding and sanitizing markup to an element.
	* arguments = some strings containing the HTML markup to sanitize and append
	*/
	HTMLElement.prototype.appendMarkup = function()
	{
	var dummy = document.createElement('div');
	dummy.innerHTML = arguments.join('');
	dummy.sanitize();

	// append DOM tree of dummy in this
	var i = 0, node;
	while ((showFullText \|\| (this.text.length<512)) && (node=dummy.childNodes[i])) {
	this.appendChild(node.cloneNode( true ));
	i++;
	}
	if (node) {
	this.appendChild(document.createTextNode( '...' ));
	}
	return this;
	}
	/**
	* Prototype extension to sanitize the attributes and HTMLElements
	* whiteList = { 'NODENAME_0':['attribute_0','attribute_1'] }
	*/
	HTMLElement.prototype.sanitize = function(whiteList, parent)
	{
	var whiteList = whiteList\|\|this.whiteList;

	// recurse
	for (var i = 0, previousNodeName = '/', nodeName, currentNode; currentNode = this.childNodes[i]; i++, previousNodeName = nodeName, previousNode = currentNode) {
	nodeName = currentNode.nodeName;
	if ((currentNode.nodeType == 1) &&
	(!whiteList[nodeName] \|\| ( (nodeName == 'BR') && ( previousNodeName=='P') ) ) )
	{
	// either it's not in the whiteList or an extra BR -> replace currentNode by its content
	while (currentNode.firstChild) {
	this.insertBefore( currentNode.firstChild.cloneNode( true ), currentNode );
	currentNode.removeChild(currentNode.firstChild);
	}
	this.removeChild( currentNode );

	}
	else
	{
	if( currentNode.nodeType==1 )
	{
	// in the nodeNamesWhiteList
	// -> sanitize the attributes
	for( var j=currentNode.attributes.length,attribute; attribute=currentNode.attributes[--j]; )
	{
	if( 'undefined' ==typeof(whiteList[nodeName][attribute.name])
	\|\| false ==whiteList[nodeName][attribute.name].apply(attribute,[currentNode]) )
	{
	currentNode.removeAttribute( attribute.name );
	}
	}
	// -> and recurse
	currentNode.sanitize( whiteList );
	previousNodeName = nodeName;
	}
	}
	}
	}
	Number.prototype.pad = function(length) {
	if (!length \|\| (length <= ('' + this).length))
	return '' + this;

	var str = '0' + this;
	while (str.length < length) {
	str = '0' + str;
	}
	return str;
	}
	String.prototype.to12HourTime = function(includeSeconds) {
	var pieces = this.split(':'), ampm = ' AM', tmp;
	if (pieces.length < 2)
	return '12:00 AM';

	if ((tmp = parseInt(pieces[0])) > 12) {
	tmp -= 12;
	ampm = ' PM';
	}
	return tmp + ':' + pieces[1] + (includeSeconds && (pieces.length == 3) ? ':' + pieces[2] : '') + ampm;
	}

	function changeArticleLength(len) {
	var itemsUl = document.getElementById('itemsUl');
	var contentDivs = itemsUl.selectNodes('li/div[@class="content"]'),
	val = len/100;
	for(var i=0, div; div=contentDivs[i]; i++){
	if(!div.orig_height)
	div.orig_height = parseFloat(getComputedStyle(div,null).height);
	if(!div.orig_paddingBottom)
	div.orig_paddingBottom = parseFloat(getComputedStyle(div,null).paddingBottom);
	div.style.height = (val * div.orig_height) + 'px';
	div.style.paddingBottom = (val * div.orig_paddingBottom) + 'px';
	}
	if(! +len)
	itemsUl.parentNode.className = 'mini-view'
	else if(itemsUl.parentNode.className.indexOf('mini-view')!=-1)
	itemsUl.parentNode.className = '';
	/* scrollbar adjust
	var width = document.body.offsetWidth - window.innerWidth;
	if ( width < 0)*/
	}
	function filterFeed(criteria) {

	}
	function searchFeed(needle) {
	var parent = document.getElementById('itemsUl'), needle = needle.replace(/\W/g, '\\$1'), showAll = !needle.length, total = 0;
	//opera.postError('in search: needle = ' + needle + ' / showall = ' + showAll + ' / childNodes.length = ' + parent.childNodes.length);
	/*Array.prototype.forEach(parent.childNodes, [function(elem) {
	opera.postError('test');
	var nodes = elem.selectNodes('.//*[contains(translate(text(), "ABCDEFGHIJKLMNOPQRSTUVWXYZ", "abcdefghijklmnopqrstuvwxyz"), "' + needle + '")]');
	opera.postError('iterating... ' + nodes.length);
	elem.style.display = (showAll \|\| nodes.length ? 'list-item' : 'none');
	}]
	);*/
	for (var i = 0, elem, nodes; elem = parent.childNodes[i]; i++) {
	nodes = elem.selectNodes('.//*[contains(translate(text(), "ABCDEFGHIJKLMNOPQRSTUVWXYZ", "abcdefghijklmnopqrstuvwxyz"), "' + needle + '")]');
	if (showAll \|\| nodes.length) {
	elem.style.display = '';
	total++;
	}
	else
	elem.style.display = 'none';
	}
	var count = document.getElementById('count');
	count.replaceChild(document.createTextNode(total), count.firstChild);
	}
	function sortFeed(method) {
	if (method == sortFeed.method)
	return;


	var compare = function(a, b) {
	if (a < b) return -1;
	if (a > b) return 1;
	return 0;
	}, fn;
	items = Array.prototype.slice.apply(theFeed.entries, [0]);

	switch(method) {
	case 'title':
	fn = function(a,b) {
	return compare(a.title.data.trim(), b.title.data.trim());
	};
	break;
	case 'source':
	fn = function(a,b) {
	return compare(a.author.trim(), b.author.trim());
	};
	break;
	case 'date':
	fn = function(a,b) {
	return compare(b.publicationDate.getTime(), a.publicationDate.getTime());
	};
	break;
	default:
	return;
	}

	Array.prototype.sort.apply(items, [fn]);
	var copy = {}
	for (var key in theFeed)
	copy[key] = theFeed[key];

	copy.entries = items;
	__outputFeed(copy);
	sortFeed.method = method;
	return;
	}
	sortFeed.method = 'date';
	/*
	* outputFeed
	*/
	function outputFeed(feed, status) {
	if (!feed) {
	var statusName = ['NO FEED ITEMS','CANCELED','REFRESH POSTPONED','NOT MODIFIED','OUT OF MEMORY','SERVER TIMEOUT','LOADING ERROR','PARSING ERROR']
	document.body.className = 'error #'+ status +' ( '+ statusName[ status ] +' )';
	return false;
	}

	itemTemplate = document.createElement('li');
	itemTemplate.className = 'feedEntry';
	itemTemplate.appendChild(document.createElement('h2'));
	itemTemplate.firstChild.appendChild( document.createElement('a'));
	itemTemplate.appendChild(document.createElement('div')).className = 'miniDate';
	itemTemplate.appendChild(document.createElement('div')).className = 'summary';
	itemTemplate.appendChild(document.createElement('div')).className = 'author';
	itemTemplate.appendChild(document.createElement('div')).className = 'pubDate';
	itemTemplate.firstChild.firstChild.appendChild(document.createTextNode('...'));
	itemTemplate.appendChild(document.createElement('div')).className = 'content';

	// set title
	top.document.title = document.getElementById('feedTitle').firstChild.nodeValue = document.createElement( 'div' ).appendMarkup(feed.title.data ).textContent.trim();

	return __outputFeed(feed);
	}

	function __outputFeed(feed) {
	var hItemsUl = document.getElementById('itemsUl'), count = document.getElementById('count');
	if (!feed \|\| !hItemsUl \|\| !count)
	return false;

	var itemsFragment = document.createDocumentFragment();

	// walk the feed items
	for (var i = 0, feedEntry; feedEntry = feed.entries[i]; i++) {
	var itemLi = itemTemplate.cloneNode( true );
	itemLi.firstChild.firstChild.setAttribute('href', feedEntry.uri \|\| '#');
	if (feedEntry.author)
	itemLi.childNodes[3].appendChild(document.createTextNode(feedEntry.author));

	if (feedEntry.publicationDate) {
	var pieces = feedEntry.publicationDate.toString().split(' ')
	,date = document.createTextNode(pieces.slice(1,3).join(' ') + ', ' + pieces.slice(4,5).join('').to12HourTime());
	itemLi.childNodes[1].appendChild(date.cloneNode(false));
	itemLi.childNodes[4].appendChild(date);
	}
	// set the title
	itemLi.firstChild.firstChild.firstChild.nodeValue = document.createElement('div').appendMarkup(feedEntry.title.data).textContent.trim();

	// write content
	if (feedEntry.content.isMarkup)
	itemLi.lastChild.appendMarkup(feedEntry.content.data.trim());
	else if (feedEntry.content.isPlainText)
	itemLi.lastChild.appendChild(document.createTextNode(feedEntry.content.data.trim()));
	else
	itemLi.lastChild.appendChild(document.createTextNode(feedEntry.content.data));

	itemLi.childNodes[2].appendChild( document.createTextNode( itemLi.lastChild.textContent ) );

	// append itemLi to itemsFragment
	itemsFragment.appendChild(itemLi);
	}

	hItemsUl.innerHTML = '';
	hItemsUl.appendChild(itemsFragment);
	count.replaceChild(document.createTextNode(feed.entries.length), count.firstChild);
	document.body.removeAttribute('class');
	return true;
	}
	window.addEventListener('load'
	,function() {
	var here = document.getElementById('here');

	for (var i = 0; theFeed = opera.feeds.allFeeds[i++]; ) {
	if (theFeed.uri == location.href) {
	here.firstChild.nodeValue = here.href = theFeed.uri;
	break;
	}
	}
	outputFeed(theFeed);
	addEvent(document.getElementById('native'), 'click', function(e) {
	e.preventDefault();
	opera.feeds.subscribeNative(location.href);
	});
	addEvent(document.getElementById('search'), 'keypress', function(e) {
	if ((e.keyCode == 13) \|\| (e.target.value == '')) {
	searchFeed(e.target.value);
	}
	});
	var escapedLocation = escape(location.href);
	Array.prototype.forEach.apply(document.selectNodes('//a[@rel="external"]'), [function(elem) {
	elem.href += escapedLocation;
	}]);
	var sortCategories = document.selectNodes('//div[@rel="sort"]');
	Array.prototype.forEach.apply(sortCategories, [function(elem) {
	var method = elem.firstChild.nodeValue.toLowerCase(), regex = /\sselected/;
	addEvent(elem, 'click', function() {
	Array.prototype.forEach.apply(sortCategories, [function(elem) { elem.className = elem.className.replace(regex, '') }]);
	elem.className += ' selected';
	sortFeed(method);
	});
	}]);
	document.getElementById('external').href = 'feed://' + location.href.replace(/https?\:\/\//, '');
	function doChange(e) {
	var slider = document.getElementById('slider'), direction = e.target.id;
	changeArticleLength(slider.value = Math.max(parseInt(slider.value) + ((direction == 'smaller' ? -1 : 1) *10), 0));
	}
	['smaller', 'bigger'].forEach(function(name) {
	addEvent(document.getElementById(name), 'click', doChange);
	});
	addEvent(document.getElementById('slider'), 'change', function(e) {
	changeArticleLength(e.target.value);
	});
	document.getElementById('external').href = 'feed://' + location.href.replace(/https?\:\/\//, '');
	}
	,false
	);

	/* ]]> */
	</script>
	<style type="text/css">
	#side_panel {
	background-color: #eee;
	width: 200px;
	position: fixed;
	top: 64px;
	right: 0;
	padding: 14px 8px 10px 10px;
	height: 100%;
	border-left: 1px solid #000;
	line-height: 1.1em;
	font-size: 0.9em;
	font-weight: 600;
	}
	@media screen and (max-width: 600px) {
	#side_panel {
	position: relative;
	width: 98%;
	}
	#items {
	margin-right: 0px !important;
	}
	#sort , #timespans , #feedActions , #slidergroup , #filtergroup * {
	display:inline !important;
	}
	#search, #sliderdiv {
	max-width:50%;
	}
	}
	#counts {
	margin:0;
	font-size:1.5em;
	line-height:1.5em;
	display:inline;
	text-shadow:0px 0px 4px #ddd;
	float: right;
	margin-right: 20px;
	}
	#items {
	margin-right: 220px;
	margin-top: 60px;
	}
	#search {
	background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAADGUlEQVR4XqWTfUhbVxjG33M/EuNHxaJVR6Gjm+BfY5udit3KoNDRsXWOTXRQB1tsV3NvPmqnk2KrQrWNG7UflEJl62QwdND+M9oyupXimqaLc53SicRuYSYuxnzJjYm5ubnn3b2jkU3Wv/rAc3h44fnxHg4HNqqru3Pc7hCTjsNWanMIaLVbVo/2dF+Ex4jJhU+6O3dZ7WK66d2mJkFw5LcdEMF8wAaWdkdB4763PxJtwpoGavhfQG9/z0tpee22VbQbJ39fU85/H5JGJ1PZUU8Szt5ckqb9stLhOJK3upr48cRA/wuwUaLNkvR6vTj0tSvTcfk+dc+FowvhZNgXSmSv3vP/0XH5F/X0mEuen59Hwdqe+M8GPcePdu1seJm/89tyZkk2cW27t4ee3lJI840szzEMPFNRRKsqi1z+lImf8cUz9XX1XG//MXsOwEWjEWfNizXw2fW/YE9taYZloFRWVMiqgCpFVlXV0lBcVgiQ4IMQPNVSWwd33a4zAHD2HwDP80iBIQWbiiHPwM1IawqTp6LMsSRDKVZ9cyfgVCgtBISSFYX72GTKB72zvgGlNGvkNQ6DOL+YWGJIEVNSCKqcUYML4VRApjTCIqHAYF5WUVRZllmto6wDysvLpxYXF3cUGwzE649s9kdSd5GBZUKYEKFYygIkgWBBLLz8SvW2zSQWi8oVFZX3cgCG47iRW7d/CL5RU86aCkwNKtIiQMIAIodAiykBQzqd3lJSVvbq3ufLmC++/FxaWYnfgn/LIh4Kjo2PRb7zPETtyXD/wLe/OkY8XfYRz1fv9V2ZOqLNXD/P4PkL5+jgyYHkofaDUlPzO5V6l+jHqaGB5wKBwE9Vz1ZHXm9s2XpzOgQLMQUzlJCqMh52VZfAheETdN+bbzFT96cgHo9RSZIiBt7wGujKQbRNAr19xx4OnxlemJiYkHw+HzqHnHNtBz/8s7W11Wy1CXjjxjV0fnoK3W63KlotCBukgz7QfF20tSc1o571GWgSBGFQL01OenB2dhb1TB7zwXSTR85dFfVgNpvfN+UbLz2aNcOT6m83ZIbg1M0CKwAAAABJRU5ErkJggg==) no-repeat 2px 2px;
	margin: 0; padding: 2px 2px 2px 22px;
	width: 90%;
	height: 22px;
	border: 1px solid #AAA; box-sizing: border-box;
	}
	#slider {
	width: 64%;
	background-color: #ddd;
	background-color: transparent;
	/background-image: url('http://www.rikkertkoppes.com/modules/interfacing/wf2.0/slider2-h.gif');/
	border: 1px solid silver;
	}
	@media print {
	#side_panel, #heading { display: none }
	}
	div#bigger, div#smaller {
	display: inline-block;
	content:'\a0';
	overflow:hidden;
	vertical-align:middle;
	background-repeat: no-repeat;
	width:16px;
	height:16px;
	border: 1px solid transparent;
	}
	div#bigger:hover, div#smaller:hover {
	border-color: #000;
	}
	div#bigger {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjM1MO6znwAAACdJREFUOE9jYBgFNAmBBqCp+DBNLEUxFJfttLcZZsNoGNAvrKlkEwAzpQ4BJOO3lgAAAABJRU5ErkJggg==);
	}
	div#smaller {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjM1MO6znwAAACBJREFUOE9jYBgFwzQEGoD+wodp721cttPe5lEbyAwBAJvTBwFEvjULAAAAAElFTkSuQmCC);
	}
	.group {
	margin-bottom: 14px
	}
	.group > div, .group > a {
	margin-left: 10px;
	color: #555;
	}
	.group div[class], #side_panel .group div[id] {
	margin-left: 0;
	color: #000;
	}
	.group > div.choice {
	margin-left: 10px;
	color: #555;
	}
	.group > div.choice:hover, .group > div.selected:hover {
	text-decoration: underline;
	cursor: pointer;
	margin-left: 10px;
	}
	#side_panel .group > div.selected {
	font-weight: bold;
	color: #b00;
	margin-left: 10px;
	}
	.group .grouptitle { font-weight: bold; font-size: 110%; }
	#wrapper {
	background: #a00 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAADACAYAAAAjiMLcAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAA6SURBVHja7NAhDgAwCARBaIrv/z97RRIMArubnBl5Lslqx1oAAAAAMILnosLNvQ7BYwAAAMAOvgADAGubBJq5vUivAAAAAElFTkSuQmCC) repeat-x center center;
	color: #fff;
	padding:8px;
	margin:0;
	border: 1px solid #000;
	border-width: 0 0 1px 0;
	position: fixed;
	top: 0;
	left: 0;
	z-index:9999;
	width: 100%;
	}

	#feedTitle {
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
	overflow: hidden;
	}
	#heading { display: none }
	div.author, div.pubDate, .miniDate {
	overflow: hidden;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0 1em 0 2em;
	font-size: 120%;
	font-weight: bold;
	color: #aaa;
	display: inline-block;
	max-width: 180px;
	}
	#feedActions a {
	display: block;
	}
	.miniDate {
	float: right;
	display: none;
	margin: 0 0 0 1em;
	}
	.mini-view .miniDate { display: block }
	.mini-view .pubDate { display: none }
	</style>
	</head>
	<body class='loading'>
	<div id="wrapper">
	<div id="counts">Total <span id="count">0</span></div><h1 id="feedTitle">Title of the news feed</h1>
	</div>
	<div id="heading">Fallback content in case the method <code>opera.feeds.subscribeNative()</code> is not available.</div>
	<div id="side_panel">
	<div class="group" id="filtergroup">
	<div class="grouptitle">Search Articles:</div>
	<input type="text" id="search" />
	</div>

	<div class="group" id="slidergroup">
	<div class="grouptitle">Article Length:</div>
	<div id="sliderdiv">
	<div id="smaller"></div>
	<input id="slider" type="range" min="0" value="100" max="100" onchange="changeArticleLength(this.value)"/>
	<div id="bigger"></div>
	</div>
	</div>

	<div class="group" id="sort">
	<div class="grouptitle">Sort By:</div>
	<div class="choice selected" rel="sort">Date</div>
	<div class="choice" rel="sort">Title</div>
	<div class="choice" rel="sort">Source</div>
	</div>

	<div class="group" id="timespans">
	<div class="grouptitle">Recent Articles:</div>
	<div class="choice selected">All</div>
	<div class="choice">Today</div>
	<div class="choice">Yesterday</div>
	<div class="choice">Last Seven Days</div>
	<div class="choice">This Month</div>
	<div class="choice">Last Month</div>
	</div>

	<!--<div class="group" id="sourcelist">
	<div class="grouptitle">Source:</div>
	<div>Source</div>
	</div>-->

	<div class="group" id="feedActions">
	<div class="grouptitle">Actions:</div>
	<a href="#subscribe" id="native">Subscribe in Opera</a>
	<a href="feed://" id="external">Subscribe External</a>
	<a href="http://www.bloglines.com/sub/" rel="external">Add to Bloglines</a>
	<a href="http://fusion.google.com/add?feedurl=" rel="external">Add to Google</a>
	<a href="http://feeds.my.aol.com/add.jsp?url=" rel="external">Add to My AOL</a>
	<a href="http://add.my.yahoo.com/rss?url=" rel="external">Add to My Yahoo</a>
	<a href="http://www.netvibes.com/subscribe.php?url=" rel="external">Add to Netvibes</a>
	<a href="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=" rel="external">Add to NewsGator</a>
	<a href="mailto:?subject=Check+out+this+RSS+Feed&body=" rel="external">Mail Link to This Feed</a>
	<a href="#bookmark" id="bookmark" rel="sidebar">Add Bookmark…</a>
	</div>
	</div>
	<div id="items">
	<ul id="itemsUl"></ul>
	</div>
	<div style="clear: both">This page was generated by Opera from <a id="here" href="#">here</a></div>
	</body>
	</html>