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