Www.wikivoyage.org template/temp/sandbox

<!DOCTYPE html>
<html lang="mul" dir="ltr">
<head>
<!-- {{colophon}} -->
<meta charset="utf-8">
<title>Wikivoyage</title>
<meta name="description" content="Wikivoyage, the free, worldwide travel guide that anyone can edit.">
<meta name="robots" content="index, follow">
<!-- [if lt IE 7]><meta http-equiv="imagetoolbar" content="no"><![endif] -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes">
<link rel="shortcut icon" href="/static/favicon/wikivoyage.ico">
<link rel="copyright" href="//creativecommons.org/licenses/by-sa/3.0/">
<link rel="copyright" href="//www.gnu.org/copyleft/fdl.html">
<link rel="license" href="//creativecommons.org/licenses/by-sa/3.0/">
<link rel="license" href="//www.gnu.org/copyleft/fdl.html">
<!-- See https://meta.wikimedia.org/wiki/MediaWiki:Gadget-wm-portal.js -->
<script async src="//meta.wikimedia.org/w/load.php?debug=false&amp;lang=en&amp;modules=ext.gadget.wm-portal&amp;only=scripts&amp;skin=vector&amp;*"></script>
<!-- TODO: separate into mobile specific stylesheet -->
<style type="text/css">
html {
      height: 100%;
}

body {
      background: #074A81 url('//upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Sea_and_sky_light.jpg/1024px-Sea_and_sky_light.jpg') no-repeat;
      background-size: 102% 102%;
      background-size: cover;
      background-position: bottom;
      font: 13px/1.5 sans-serif;
      margin: 0;
      overflow-x: hidden;
}
 
a,
a:active,
a:focus {
      unicode-bidi: embed;
      white-space: nowrap;
      outline: 0;
      color: #00235B;
      text-decoration: none;
}
 
a:hover {
      text-decoration: underline;
}
 
img {
      border: none;
      vertical-align: middle;
}
 
 
/*******************
 * Central logo area for wiki-project portals
 * (e.g. where the globe is on www.wikipedia.org)
 */

.central-featured {
	position: relative;
	text-align: center;
	vertical-align: middle;
	max-width: 100%;
	width: 42em;
	margin: 0 auto;
	height: 31em;
}

.central-featured-lang {
	position: absolute;
	width: 13em;
}

/* Make entire block clickable, suppress hover underline */
.central-featured-lang .link-box {
	display: block;
	padding: 0;
	text-decoration: none;
}

/* Restore underline on main label */
.central-featured-lang .link-box:hover strong {
	text-decoration: underline;
}

/* Suppress blue color */
.central-featured-lang .link-box em {
	color: black;
	text-decoration: none;
	text-shadow: 0.1em 0.1em 0.2em white;
	line-height: 1ex;
}

.central-featured-lang strong {
      font-size: larger;
      text-shadow: 0.1em 0.1em 0.2em white;
}

.central-featured-lang em {
	font-style: italic;
	font-size: larger;
}

.central-featured-lang .emNonItalicLang {
	font-style: normal;
}

.lang1 {
	top: 0%;
	right: 52%;
}
.lang2 {
	top: 0%;
	left: 52%;
}
.lang3 {
	top: 20%;
	right: 67%;
}
.lang4 {
	top: 20%;
	left: 67%;
}
.lang5 {
	top: 40%;
	right: 72%;
}
.lang6 {
	top: 40%;
	left: 72%;
}
.lang7 {
	top: 60%;
	right: 67%;
}
.lang8 {
	top: 60%;
	left: 67%;
}
.lang9 {
	top: 80%;
	right: 52%;
}
.lang10 {
	top: 80%;
	left: 52%;
}

/*******************
 * Search bar below the central logo area
 */
.search-container {
      float: none;
      margin: 0 auto 1.5em auto;
      max-width: 95%;
      padding: 0 0.3em;
      text-align: center;
      vertical-align: top;
      width: 540px;
}
 
.search-form fieldset {
      border: none;
      margin: 0;
      padding: 0;
      width: auto;
}
 
#searchInput {
      vertical-align: middle;
      border: solid thin lightblue;
      border-radius: 2px 0 0px 2px;
      font-size: 20px;
      margin: 0;
      padding: 6px 2px 5px 8px;
}

.formBtn {
      vertical-align: middle;
      height: 38px;
      border: solid thin lightblue;
      border-left: none;
      border-radius: 0 2px 2px 0;
      background-color: #0067BB;
      color: white;
      margin:0 0 0 -4px;
      padding:4px 5px 6px 6px;
      cursor:pointer;
}

#searchLanguage {
      vertical-align: middle;
      height: 38px;
      border: solid thin lightblue;
      border-radius: 2px;
      background-color: #0067BB;
      color: white;
      font-size: 20px;
      padding: 4px;
      margin: 0 0 0 8px;
}

/**
 * Style for horizontal lists (separator following item).
 * @note Support for unused tags like <dt> has been stripped out, and the
 *		 dependency on :last-child and JavaScript has been removed in favor of
 *		 :before.
 * @source mediawiki.org/wiki/Snippets/Horizontal_lists
 * @revision 6 (2014-05-09)
 * @author [[User:Edokter]]
 */
.hlist ul {
	margin: 0;
	padding: 0;
}
/* Display list items inline */
.hlist li {
	display: inline;
}
/* Display nested lists inline */
.hlist ul ul {
	display: inline;
}
/* Generate interpuncts */
.hlist li:before {
	content: " · ";
	font-weight: bold;
}
.hlist li:first-child:before {
	content: none;
}
/* Add parentheses around nested lists */
.hlist li + ul:before {
	content: "\00a0(";
}
.hlist li + ul:after {
	content: ") ";
}

/*******************
 * Language lists, etc.
 */
 
.langlist {
      font-size: larger;
      text-align: center;
      margin: 0.5em 3em 2.5em 3em;
      clear: both;
}

.langlist a {
      white-space: nowrap;
}

/* .langlist-large {
      font-size: larger;
}
 
.langlist-tiny {
      margin: 0.5em 3em 3em 3em;
}
 
.langlist-others {
      margin: 0 3em 2em 3em;
      font-weight: bold;
} */
 
.otherprojects {
      white-space: nowrap;
      overflow:hidden;
      font-weight: bold;
      margin: 0;
      padding: 0.6em 0.5em 0.5em 0.5em;
      vertical-align: middle;
      width: 100%;
      background: #2D2D2D;
      color: white;
      border: gray thin solid;
}

.otherprojects a {
      color: #bbb;
      padding: 0.3em;
}
.otherprojects table {
      height: auto;
      width: 100%;
      border-style: none;
}
 
.wm-site-info {
      clear: both;
      margin: 3.5em 4em 0.5em 4em;
      text-align: right;
}
 

/******************
 * Print stylesheet
 */

@media print {
 
      body {
            background-color: transparent;
      }
      
      a {
            color: black !important;
            background: none !important;
            padding: 0 !important;
      }
      
      a:link,
      a:visited {
            color: #520;
            background: transparent;
      }
      
      img {
            border: none;
      }
      
}

.central-featured-logo {
	background-image: url('//upload.wikimedia.org/wikipedia/commons/b/b7/Wikivoyage-Logo-v3-en-highlight.png');
	/* @embed */
	background-image: -webkit-linear-gradient(transparent, transparent), url('//upload.wikimedia.org/wikipedia/commons/d/d1/Wikivoyage-Logo-v3-en.svg');
	/* @embed */
	background-image: linear-gradient(transparent, transparent), url('//upload.wikimedia.org/wikipedia/commons/d/d1/Wikivoyage-Logo-v3-en.svg');
background-position: center center;
	background-repeat: no-repeat;
	width:100%;
	height:100%;
	left:0;
	top:0;
}


/****************
 * Mobile specific media queries
 */

@media all and (max-width:480px) {
      
      .otherprojects {
            display: none;
      }
      
      .central-featured {
            width: auto;
            height: auto;
            padding-top: 4em;
            text-align: left;
            font-size: 0.8em;
            margin-top: 8em;
      }

      .central-featured-logo {
            position: absolute;
            right: 0;
            left: 12%;
            top: -5em;
            width: 130px;
            height: 130px;
            background-size: 130px auto;
      }
      
      .central-featured-lang {
            right: auto;
            top: auto;
            position: relative;
            left: auto;
            text-align: left;
            margin-left: 1em;
            display: block;
            float: left;
            width: 45%;
      }
      
      .search-container {
            white-space: nowrap;
            left: 8px;
            top: 4px;
            text-align: center;
            position: absolute;
      }
      
      .search-form #searchInput {
            max-width: 8em;
      }
            
      .langlist {
            font-size: 1.1em;
            margin: 0.7em;
            text-align: left;
            width: auto;
      }
      
}

@media all and (max-width:240px) {

      .central-featured-lang {
            width: 100%;
      }

}

</style>
</head>
<body id="www-wikivoyage-org">






<!-- Other Projects -->

<div class="otherprojects">
<table>
<tr>
<td><a href="//www.wikipedia.org/" title="The encyclopedia anyone can edit">Wikipedia</a></td>
<td><a href="//www.wiktionary.org/" title="The dictionary you can edit">Wiktionary</a></td>
<td><a href="//www.wikinews.org/" title="Collaboratively written news">Wikinews</a></td>
<td><a href="//www.wikiquote.org/" title="Free quotes">Wikiquote</a></td>
<td><a href="//www.wikibooks.org/" title="Collaboratively written books">Wikibooks</a></td>
<td><a href="//www.wikidata.org/" title="Free data">Wikidata</a></td>
<td><a href="//species.wikimedia.org/" title="All about species">Wikispecies</a></td>
<td><a href="//www.wikisource.org/" title="Free library">Wikisource</a></td>
<td><a href="//www.wikiversity.org/" title="To learn">Wikiversity</a></td>
<td><a href="//commons.wikimedia.org/" title="Free image & media repository">Commons</a></td>
<td><a href="//www.mediawiki.org/" title="About our wiki software">MediaWiki</a></td>
<td><a href="//meta.wikimedia.org/" title="Wikimedia project coordination">Meta-Wiki</a></td>
</tr>
</table>
</div>


<br>


<div class="central-featured"><!-- Central Featured: container div for the central logo and the links to the largest language editions -->


<!-- Logo -->
<div class="central-featured-logo"></div>


<!-- Languages -->
{{topn|10|views}}

</div><!-- end Central Featured -->



<!-- Search form -->
<div class="search-container">
<form class="search-form" action="//www.wikipedia.org/search-redirect.php">
<fieldset>
<input type="hidden" name="family" value="wikivoyage">
<input id="searchInput" name="search" size="20" autofocus="autofocus" accesskey="F" dir="auto">
<button class="formBtn" type="submit" name="button" title="Search Wikivoyage" id="searchButton">
<img src="//upload.wikimedia.org/wikipedia/meta/thumb/8/86/Search-icon-white.png/16px-Search-icon-white.png" alt="Search" width="16" height="16">
</button>


<select id="searchLanguage" name="language">
{{wikis|option|≥100}}
</select>
<input type="hidden" value="Go" name="go">
</fieldset>
</form>
</div>


<!-- More languages -->
<div class="langlist hlist">
{{morewikis|ul|≥100}}
</div>


<!-- Credit & Disclaimers -->
<div class="wm-site-info">
<a href="//wikimediafoundation.org/" title="A Wikimedia Project"><img src="//upload.wikimedia.org/wikipedia/meta/b/bd/Wikimedia-button-transparent.png" width="88" height="31" alt="Wikimedia" title="A Wikimedia Project"></a><br>
<a href="//meta.wikimedia.org/wiki/www.wikivoyage.org/Photo_credit">photo credit</a> |

<a href="//wikimediafoundation.org/wiki/Privacy_policy">privacy policy</a> |

<a href="//wikimediafoundation.org/wiki/Terms_of_Use">terms of use</a>
</div>

</body>
</html>