adactio/conditionalcats.html

## conditionalcats.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Can’t Hug Every Cat</title>
<style>
body {
    font: 1em/1.5 Cambria, Georgia, serif;
    margin: 0 5%;
}
a {
    color: #369;
    text-decoration: none;
}
@media all and (min-width: 640px) {
    [role="main"] {
        width: 60%;
        float: left;
    }
    [role="complementary"] {
        width: 30%;
        float: right;
    }
}
</style>
</head>
<body>

<div role="main">

<h1>A Metaphysical Reflection Upon The Nature Of Multitudinous Feline Affection</h1>
<footer>By <a href="http://www.youtube.com/watch?v=sP4NMoJcFd4">Debbie the Online Dater</a></footer>

<p>I love cats.<br>
I love every kind of cat.<br>
I just wanna hug all of them but I can’t;<br>
Can’t hug every cat,<br>
Can’t hug every cat.</p>

<p>So anyway I am a cat lover<br>
And I love to run.<br>
I’m sorry I’m thinking about cats again.<br>
I really love cats.</p>

<p>I’m thinking about cats again<br>
And again, and again and again and again.<br>
I think about how many don’t have a home<br>
And how I should have them.<br>
I think about how cute they are<br>
And how their ears and the whiskers and the nose.<p>

<p>I just love them.<br>
And I want them.<br>
And I want them in a basket.<br>
And I want little bow ties.<br>
I just love them.<br>
And I want them<br>
To be on a rainbow<br>
And in my bed<br>
And I just want us to roll around.</p>

<p>Sorry I’m getting emotional.<p>

<p>I love cats.<br>
I love every kind of cat.<br>
I just wanna hug all of them but I can’t;<br>
Can’t hug every cat,<br>
Can’t hug every cat.</p>

<p>So anyway I am a cat lover<br>
And I love to run.<br>
I’m sorry I’m thinking about cats again.<br>
I really love cats.<br>
But I can’t hug every cat;<br>
Can’t hug every cat,<br>
Can’t hug every cat.</p>

</div><!-- /@main -->

<div role="complementary">

<aside>
<h1>More about cats...</h1>
<div id="newsresults">
<a href="http://www.google.com/search?q=cats&amp;tbm=nws">Search Google News</a>
</div>
</aside>

</div><!-- /@complementary -->

<script>

var searchNews = function(searchterm) {
  var elem = document.createElement('script');
  elem.src = 'http://ajax.googleapis.com/ajax/services/search/news?v=1.0&q='+searchterm+'&callback=displayNews';
  document.getElementsByTagName('head')[0].appendChild(elem);
};

var displayNews = function(news) {
  var html = '',
      items = news.responseData.results,
      total = items.length;
  if (total>0) {
    for (var i=0; i<total; i++) {
      var item = items[i];
      html+= '<article>';
      html+= '<a href="'+item.unescapedUrl+'">';
      html+= '<h1>'+item.titleNoFormatting+'</h1>';
      html+= '</a>';
      html+= '<p>';
      html+= item.content;
      html+= '</p>';
      html+= '</article>';
    }
    document.getElementById('newsresults').innerHTML = html;
  }
};
if (document.querySelector) {
    (function (win) {
        var sidebar = document.querySelector('[role="complementary"]'),
            floating = window.getComputedStyle(sidebar,null).getPropertyValue('float');
        if (floating == 'right') {
          searchNews('cats');
        }
    })(this);
}

</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Can’t Hug Every Cat</title>
	<style>
	body {
	font: 1em/1.5 Cambria, Georgia, serif;
	margin: 0 5%;
	}
	a {
	color: #369;
	text-decoration: none;
	}
	@media all and (min-width: 640px) {
	[role="main"] {
	width: 60%;
	float: left;
	}
	[role="complementary"] {
	width: 30%;
	float: right;
	}
	}
	</style>
	</head>
	<body>

	<div role="main">

	<h1>A Metaphysical Reflection Upon The Nature Of Multitudinous Feline Affection</h1>
	<footer>By <a href="http://www.youtube.com/watch?v=sP4NMoJcFd4">Debbie the Online Dater</a></footer>

	<p>I love cats.<br>
	I love every kind of cat.<br>
	I just wanna hug all of them but I can’t;<br>
	Can’t hug every cat,<br>
	Can’t hug every cat.</p>

	<p>So anyway I am a cat lover<br>
	And I love to run.<br>
	I’m sorry I’m thinking about cats again.<br>
	I really love cats.</p>

	<p>I’m thinking about cats again<br>
	And again, and again and again and again.<br>
	I think about how many don’t have a home<br>
	And how I should have them.<br>
	I think about how cute they are<br>
	And how their ears and the whiskers and the nose.<p>

	<p>I just love them.<br>
	And I want them.<br>
	And I want them in a basket.<br>
	And I want little bow ties.<br>
	I just love them.<br>
	And I want them<br>
	To be on a rainbow<br>
	And in my bed<br>
	And I just want us to roll around.</p>

	<p>Sorry I’m getting emotional.<p>

	<p>I love cats.<br>
	I love every kind of cat.<br>
	I just wanna hug all of them but I can’t;<br>
	Can’t hug every cat,<br>
	Can’t hug every cat.</p>

	<p>So anyway I am a cat lover<br>
	And I love to run.<br>
	I’m sorry I’m thinking about cats again.<br>
	I really love cats.<br>
	But I can’t hug every cat;<br>
	Can’t hug every cat,<br>
	Can’t hug every cat.</p>

	</div><!-- /@main -->

	<div role="complementary">

	<aside>
	<h1>More about cats...</h1>
	<div id="newsresults">
	<a href="http://www.google.com/search?q=cats&tbm=nws">Search Google News</a>
	</div>
	</aside>

	</div><!-- /@complementary -->

	<script>

	var searchNews = function(searchterm) {
	var elem = document.createElement('script');
	elem.src = 'http://ajax.googleapis.com/ajax/services/search/news?v=1.0&q='+searchterm+'&callback=displayNews';
	document.getElementsByTagName('head')[0].appendChild(elem);
	};

	var displayNews = function(news) {
	var html = '',
	items = news.responseData.results,
	total = items.length;
	if (total>0) {
	for (var i=0; i<total; i++) {
	var item = items[i];
	html+= '<article>';
	html+= '<a href="'+item.unescapedUrl+'">';
	html+= '<h1>'+item.titleNoFormatting+'</h1>';
	html+= '</a>';
	html+= '<p>';
	html+= item.content;
	html+= '</p>';
	html+= '</article>';
	}
	document.getElementById('newsresults').innerHTML = html;
	}
	};
	if (document.querySelector) {
	(function (win) {
	var sidebar = document.querySelector('[role="complementary"]'),
	floating = window.getComputedStyle(sidebar,null).getPropertyValue('float');
	if (floating == 'right') {
	searchNews('cats');
	}
	})(this);
	}

	</script>

	</body>
	</html>