<!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">

/* -------------------------------------------------------- */
/* css reset */
* {
border: 0; padding: 0; margin: 0;
}

/* -------------------------------------------------------- */
/* generic styles */

body {
background: url(%2/tile.gif) repeat-x #fff;
font-family: sans-serif; font-size: 0.8em;
}

#rekonq-newtabpage {
width: 100%;
text-align: center; /* center #navigation */
}

#content {
text-align: left;
margin: 0 1% 2% 1%;
}

h3 {
border-bottom-width: 1px;
-webkit-border-image: url(%2/category.png) 1 1 1 1  stretch stretch;
padding: 0.2em; margin: 0.5em 0;
font: normal bold 1em;
}

a {
color: #3F7AB7;
text-decoration: none;
-webkit-transition-property: color;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease;
}
a:hover {
color: black;
}

/* -------------------------------------------------------- */
/* Navigation bar */

#navigation {
display: inline-block;
margin: 2%;
border-width: 5px;
-webkit-border-image: url(%2/bg2.png) 12 12 12 12  stretch stretch;
}

.link {
display: inline-block;
}
.link img {
vertical-align: middle; margin-right: 5px;
}
.link a {
color: black; 
}

.current{
border-width: 6px;
-webkit-border-image: url(%2/button.png) 6 stretch stretch;
}
.link:not(.current){
margin: 0 10px;
}

/* -------------------------------------------------------- */
/* Previews */

#content.favorites, #content.closedTabs {
text-align: center;
}

.thumbnail {
display: inline-block;
width: 25%; min-width: 240px;
height: 170px;
margin: 3% 0 3% 0;
}

.thumb-inner {
width: 232px; /* 200 + 16*2 */
margin: auto;
}

.preview {
display: table-cell; vertical-align: middle;
width: 200px; height: 150px;
padding: 14px 16px 12px;
background: url(%2/bg.png) no-repeat;
-webkit-background-size: 100% 100%; 
}

.title {
padding: 0 12px;
}

.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;
}

.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">
        <div class ="thumb-inner">
            <a>
                <div class ="preview">
                    <img />
                </div>
            </a>
            <div class="title">
                <a class="button modify"><img /></a>
                <span><a></a></span>
                <a class="button remove"><img /></a>
            </div>
        </div>
    </div>
    <h3></h3>
    <a></a>
    <br />
    <p class="bookfolder"></p>
</div>

</body>
</html>