<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<style type="text/css">
/* ------------------------------------------------------- */
/* generic styles */
html, body, div, h1, h2, h3, h4, a, p{
margin:0;
padding:0;
border:0;
}
body{
background: url(%2/tile.gif) repeat-x #fff;
font-family: sans-serif;
font-size: 0.8em;
text-align: center;
}
h1{
font: normal bold 2em sans-serif;
text-align:right;
color: #3F7AB7;
margin-right:3%;
margin-top: 0.5%;
float:right;
}
h2{
font: normal bold 1.2em sans-serif;
color: #3F7AB7;
margin-top: 2em;
}
h3{
border-bottom-width: 1px;
-webkit-border-image: url(%2/category.png) 1 1 1 1 stretch stretch;
padding: 0.2em;
margin-top: 0.5em;
margin-bottom: 0.5em;
font: normal bold 1em sans-serif;
}
h4{
font-size: 1em;
margin-top: 0.5em;
}
a{
color: #3F7AB7;
text-decoration: none;
-webkit-transition-property: color;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease;
}
a:hover{
color: black;
}
/* ------------------------------------------------------- */
/* page sections */
#rekonq-newtabpage {
width: 100%;
}
#navigation {
display: inline-block;
margin-top: 2%;
margin-bottom: 2%;
text-align: center;
border-width: 5px;
-webkit-border-image: url(%2/bg2.png) 12 12 12 12 stretch stretch;
}
#content {
text-align: left;
margin: 2%;
}
/* -------------------------------------------------------- */
/* div navigations styles */
.link{
display: inline-block;
}
.link img{
vertical-align: middle;
margin-right: 5px;
}
.link a{
color: black;
text-decoration:none;
font: normal 1em sans-serif;
}
.current{
border-width: 6px;
-webkit-border-image: url(%2/button.png) 6 stretch stretch;
}
#navigation .link:not(.current){
margin-right: 10px;
margin-left: 10px;
}
.favorites{
text-align: center;
margin-top: -5%;
}
/* -------------------------------------------------------- */
/* Thumbnail class */
.thumbnail {
display: inline-block;
width:25%; margin-top: 7%;
min-width:250px; min-height:192px;
}
.preview img {
}
.preview {
display: table-cell;
vertical-align: middle;
width: 200px; height: 150px;
padding: 14px 16px;
background: url(%2/bg.png) no-repeat;
-webkit-background-size: 100% 100%;
-webkit-background-clip: padding;
}
.thumbnail:hover .preview , .thumbnail:hover .button img {
opacity: 0.8;
}
.button img, .preview {
-webkit-transition-property: opacity;
-webkit-transition-duration: 0.8s;
-webkit-transition-timing-function: ease-in-out;
}
.button img {
display: inline-block;
width: 16px;
height: 16px;
opacity: 0;
}
.remove {
float: right;
}
.modify {
float: left;
}
.title {
display: block;
width: 200px;
height: 15px;
padding: 0 14px;
text-align: center;
}
.thumbnail a {
text-align:center;
}
.thumbnail a:hover, span {
color:#3F7AB7;
}
/* -------------------------------------------------------- */
/* Bookmarks page*/
.bookfolder{
margin-left: 2em;
margin-bottom: 0.5em;
}
/* -------------------------------------------------------- */
</style>
</head>
<body>
<div id="rekonq-newtabpage">
<div id="navigation">
</div>
<div id="content">
</div>
</div>
<div id="models" style="display:none">
<div class="link">
<a href="">
<img src="" />
</a>
</div>
<div class="thumbnail">
<a>
<div class ="preview">
<img />
</div>
<div class="title">
<a class="button modify"><img /></a>
<span><a></a></span>
<a class="button remove"><img /></a>
</div>
</a>
</div>
<h3></h3>
<a></a>
</br>
<p class="bookfolder"></h3>
</div>
</body>
</html>