<html>
	<head>
		<style type="text/css">
			body {
				margin:0; padding:0;
				font-family:Helvetica, Arial, sans-serif;
				font-size:13px;
			}
			
			#results {
				margin:10px 10px 25px 0;
			}
			
			#resultsHeader {
				height:30px;
				background-color:rgb(204, 219, 228);
				border-bottom:1px solid rgba(54, 102, 212, .2);
			}
			
			#ordinal {
				float:right;
				margin:9px;
			}
			
			#verticalsList {
				list-style-type:none;
				margin:0px; padding:8px;
			}
			
			#verticalsList li {
				float:left;
				margin:0 10px;
				font-size:14px;
			}
			
			#resultsList {
				clear:both;
				margin:0; padding:0;
				min-width:900px;
				max-width:1200px;
			}
			
			#resultsList .item {
				position:relative;
				min-height:140px;
				margin:10px 0 10px 10px; padding:0;
			}
			
			embed {
				border:1px solid #aaa;
			}
			
			embed:hover {
				border:1px solid rgb(18, 76, 223);
			}
			
			#resultsList .item div.title a:link, #resultsList .item div.title a:visited {
				font-size:16px;
			}
			
			#resultsList .item div.dispurl {
				color:green;
			}
			
			#resultsList .thumbnail {
				position:absolute;
				left:0; top:0;
			}
			
			#resultsList .itemText {
				margin-left:185px;
				padding-top:10px;
				clear:both;
			}
			
			#resultsFooter {
				padding-top:12px;
				padding-left:13px;
			}
			
			#resultsFooter span.disabled {
				font-weight:bold;
			}
			
			#resultsFooter span a:link, #resultsFooter span a:visited {
				border:1px solid rgb(204, 219, 228);
				text-decoration:none;
			}

			#resultsFooter span.disabled, #resultsFooter span a:link, #resultsFooter span a:visited {
				display:inline-block;
				width:24px;
				padding:2px 0;
				text-align:center;
			}
			
			#resultsFooter span a:hover {
				background-color:rgb(54, 102, 212);
				border:1px solid rgb(43, 85, 175);
				color:white;
			}
			
			#resultsFooter #prev:link, #resultsFooter #prev:visited, #resultsFooter #next:link, #resultsFooter #next:visited {
				width:44px;
			}
		</style>
	</head>
	<body>
		<div id="resultsHeader">
			<div id="ordinal">{{ start }} - {{ end }} of {{ total }}</div>
			<div id="verticals">
				<ul id="verticalsList">
					{% if vertical == verticalKeyWeb %}
						<li><b>Web</b></li>
					{% else %}
						<li><a href="{{ webURLString }}">Web</a></li>
					{% /if %}
					{% if vertical == verticalKeyNews %}
						<li><b>News</b></li>
					{% else %}
						<li><a href="{{ newsURLString }}">News</a></li>
					{% /if %}
				</ul>
			</div>
		</div>
		
		<div id="results">
			<div id="resultsList">
				<table>
					{% for itemPair in itemPairs %}
						<tr>
							{% for item in itemPair %}
								<td>
									<div class="item">
										<div class="thumbnail">
											<a href="{{ item.clickurl }}">
												<embed width="170" height="133" 
													type="application/x-webthumbnail" 
													href="{{ item.url }}" 
													index="{{ currentLoop.parentLoop.currentIndex }}"></embed>
											</a>
										</div>
										<div class="itemText">
											<div class="title"><a href="{{ item.clickurl }}">{{ item.title }}</a></div>
											<div class="abstract">{{ item.abstract }}</div>
											<div class="dispurl">{{ item.dispurl }}</div>
										</div>
									</div>
								</td>
							{% /for %}
						</tr>
					{% /for %}
				</table>
			</div> <!-- resultsList -->

			<div id="resultsFooter">
				{% if group == 1 %}
				{% else %}
					<span><a id="prev" href="{{ prevURLString }}">Prev</a></span>
				{% /if %}
				{% for info in nextURLInfos %}
					{% if group == info.index %}
						<span class="disabled">{{ info.index }}</span>
					{% else %}
						<span><a href="{{ info.URLString }}">{{ info.index }}</a></span>
					{% /if %}
				{% /for %}
				<span><a id="next" href="{{ nextURLString }}">Next</a></span>
			</div> <!-- resultsFooter -->

		</div> <!-- results -->
	</body>
</html>