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