<!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: color 0.5s ease;
}
a:hover {
color: black;
}

/* -------------------------------------------------------- */
/* Top bar */

#top {
margin: 20px;
display:table;
width: 95%;
}

.topSide, .topMiddle {
display:table-cell;
}

.topSide{
width: 15%;
}

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


#actions{
display: table;
width:auto;
}

.link {
display: table-cell;
/*display:inline-block;*/
-webkit-transition: opacity 0.5s ease;
}
.link:not(.current):hover {
opacity: 0.6;
}

.link img, .link span {
vertical-align: middle; display: inline-block; 
}
.link a, .link span {
color: black;
}

#actions .link img {
margin-right: 3px; width: 16px;
}

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

/* -------------------------------------------------------- */
/* 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;
}

.button img {
display: inline-block;
width: 16px;
height: 16px;
opacity: 0;
}

.remove {
float: right;
}
.modify {
float: left;
}

.button img, .preview {
-webkit-transition: opacity 0.8s ease-in-out;
}
.thumb-inner:hover .preview {
opacity: 0.6;
}
.thumb-inner:hover .button img {
opacity: 0.4;
-webkit-transition: opacity 0.8s ease-out;
}
.thumb-inner .button img:hover {
opacity: 1;
}
.thumbnail a:hover {
color:#3F7AB7;
}

/* -------------------------------------------------------- */
/* Bookmarks page */

.bookfolder{
margin-left: 2em;
margin-bottom: 0.5em;
}

/* -------------------------------------------------------- */
/* Downloads page */

.download{
margin: 1.5em 0;
}

.download img{
float: left;
margin-right: 5px;
}

/* -------------------------------------------------------- */
/* Empty pages : in the end : need to overwrite */
#content.empty {
margin-top: 10%;
text-align: center;
}


</style>
</head>

<body>

<div id="rekonq-newtabpage">
    <div id="top">
       <div class="topSide"></div>
       <div class="topMiddle">
            <div id="navigation"></div>
       </div>
       <div class="topSide">
            <div id="actions"></div>
        </div>
    </div>
    <div id="content">
    </div>
</div>

<div id="models" style="display:none">
    <div></div>
    <div class="link">
        <a href="">
            <img src="" />
            <span></span>
        </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 />
    <img />
    <p class="bookfolder"></p>
</div>

</body>
</html>