The Telegraph CSS Project

<!DOCTYPE html>
<html>
  <head>
    <char
    <meta charset="UTF-8">
    <title>The Telegraph - 5 Maps That Will Change the Way You See the World</title>

    <style>

      body {
        font-family: Georgia, Times, serif;
        position: relative;
        margin: auto;
        width: 1100px;
        padding: 15px;
      }

      .article-body {
        position: relative;
        float: left;
        width: 650px;
        margin-left: 50px;
      }

      img {
        width: 650px;
      }

      /* Positions .read-more */
          .read-more {
            float: right;
            width: 345px;
            margin-left: 10px;
            margin-top: -40px;
          }

      /* Removes automatic numbers in <ol> */
          #read-more-list {
            list-style-type: none;
            border-bottom: 5px solid #008385;
          }

      /* Adds border to list items and uniform height */
          .read-more-list {
            border-top: 1px solid #c9c9c9;
            height: 135px;
          }

      /* Sets formatting for list numbers */
          ol li {
            color: #008385;
            font: bold 100px Georgia, Times, serif;
            position: relative;
            padding-top: 5px;
          }

      /* Sets formatting for list content */
          .read-more-list p {
            font-family: Georgia, Times, serif;
            font-weight: bold;
            font-size: 20px;
            text-decoration: none;
            color: black;
            padding-left: 80px
          }

      /* Sets formatting for time stamps */
          .time {
            color: #888888;
            font-size: 16px;
            font-family: Helvetica, Arial, sans-serif;
            font-weight: normal;
            line-height: 1.6em;
          }

      /* Sets poition for list numbers */
          .list-numbers {
            position: absolute;
          }

      /* Sets formatting behaviours for links */
          a:link, a:visited {
            color: #008385;
            text-decoration: none;
          }

      /* Sets formatting behaviours for links on hover */
          a:hover {
            color: #004849;
            text-decoration: none;
          }

      /* Sets formating behaviours for link content on hover */
          a:hover p {
            color: #008385;
            text-decoration: none;
          }

      .margin-links a {
        font-family: Arial, sans-serif;
        color: #666666;
        font-size: 0.9em;
        font-weight: 300;
        padding: 5px;
        text-decoration: none;
      }

      .margin-links a:hover {
        color: #808080;
      }

      .margin-links-footer a {
        font-family: Arial, sans-serif;
        color: #666666;
        font-size: 16px;
        font-weight: 300;
        padding: 5px;
        text-decoration: none;
        border-right: 1px solid #c9c9c9;
      }

      .margin-links-footer a:hover {
        color: #808080;
      }

      .footer-section {
        border-top: 1px solid #c9c9c9;
        width: 1040px;
        text-align: center;
        float: left;
      }

      footer {
        font-family: Arial, sans-serif;
        color: #666666;
        font-size: 16px;
        margin-bottom: 35px;
      }

      #telegraph-logo {
        position: left;
        width: 175px;
        float: left;
        opacity: 1;
      }

      #telegraph-logo:hover {
        opacity: 0.65;
      }

      #nav-links a:link, #nav-links a:visited {
        color: black;
        text-decoration: none;
        padding: 10px;
        float: right;
      }

      #nav-links a:hover {
        color: #008385;
        text-decoration: none;
      }

      #search-box {
        text-align: center;
      }

      input {
        width: 750px;
        height: 50px;
        border: 1px solid #008385;
        border-radius: 5px;
        font-size: 1.5em;
        padding-left: 20px;
        margin-top: 20px;
      }

      #chain-links a:link, #chain-links a:visited {
        color: #666666;
        font-family: Arial, sans-serif;
        font-weight: 400;
        text-decoration: none;
        font-size: 16px;
      }

      #chain-links a:hover {
        color: #008385;
      }

      #travel {
        font-size: 3em;
        font-weight: 600;
        background-color: #fff8e9;
        color: #767676;
        padding: 10px 15px 10px 15px;
        border-bottom-style: solid;
        border-bottom-width: thick;
        border-bottom-color: #008385;
        margin-top: 80px;
        margin-bottom: 0px;
      }

      #travel-links a:link, #travel-links a:visited, #travel-links a:hover {
        color: black;
        font-size: 0.75em;
        text-decoration: none;
        font-weight: normal;
        padding-left: 8px;
        padding-right: 4px;
        border-left: 1px solid #c9c9c9;
      }

      .travel-div {
        border-bottom: 1px solid #c9c9c9;
        text-align: center;
      }


      #author {
        color: black;
        text-decoration: none;
      }

      #author:hover {
        border-bottom: 2px solid black;
        padding-bottom: 3px;
      }

      #article-time {
        font-family: Arial, sans-serif;
        color: #808080;
        line-height: 50px;
      }

      .article-title {
        font-size: 2em;
        color: #222222;
        margin-left: 75px;
        font-size: 2.5em;
        line-height: 1.25em;
        margin-top: -20px;
      }

      figcaption {
        font-family: Arial, sans-serif;
        color: #808080;
        font-size: 18px;
        letter-spacing: -0.025em;
        margin-left: 40px;
      }

      figcaption a:link, figcaption a:visited, figcaption a:hover {
        color: #2e8fb7
      }

      .article-headings {
        color: #008385;
        font-size: 1.2em;
      }

      #article-list {
        list-style-type: none;
      }
      #article-list p {
        font-size: 22px;
        color: black;
        font-weight: normal;
        padding-left: 60px;
        margin-left: -90px;
      }

      .article-list-numbers {
        color: #008385;
        font: bold 22px Georgia, Times, serif;
        border: 1px solid #008385;
        text-align: center;
        border-radius: 30px;
        width: 1.2em;
        height: 1.2em;
        padding: 10px;
        position: absolute;
        margin-left: -90px;
      }

      .article-content {
        margin-left: -40px;
      }

      .article-images {
        margin-left: -80px;
      }

      .article-caption {
        margin-left: -70px;
        font-family: Arial, sans-serif;
        color: #c9c9c9;
        font-size: 0.6em;
        letter-spacing: -0.025em;
      }

    </style>

  </head>

  <body>

    <header class="margin-links">
      <a href="https://auth.telegraph.co.uk/sam-ui/login.htm">Login</a>
      <a href="https://auth.telegraph.co.uk/sam-ui/register.htm?redirectTo=http%3A%2F%2Fwww.telegraph.co.uk">Register</a>
      <a href="http://www.telegraph.co.uk/subscriptions/">Subscribe</a>
    </header>
  <div class="header-section">
    <img alt="The Telegraph Logo" src="http://www.telegraph.co.uk/content/dam/best/telegraph_OUTLINE-small.png" id="telegraph-logo">
    <h3 id="nav-links">
      <a href="">ALL SECTIONS</a>
      <a href="http://www.telegraph.co.uk/business/">BUSINESS</a>
      <a href="http://www.telegraph.co.uk/sport/">SPORT</a>
      <a href="http://www.telegraph.co.uk/news/">NEWS</a>
      <a href="http://www.telegraph.co.uk/">HOME</a>
    </h3>
  </div>

    <h1 id="travel">Travel</h1>
    <div class="travel-div">
    <h2 id="travel-links">
      <a href="http://www.telegraph.co.uk/travel/destinations/">Destinations</a>
      <a href="http://www.telegraph.co.uk/travel/hotels/">Hotels</a>
      <a href="http://www.telegraph.co.uk/travel/types-of-trip/">Types of Trip</a>
      <a href="http://www.telegraph.co.uk/travel/tours/">Tours</a>
      <a href="http://www.telegraph.co.uk/travel/cruises/">Cruises</a>
      <a href="http://www.telegraph.co.uk/travel/ski/">Ski</a>
      <a href="http://www.telegraph.co.uk/travel/family-holidays/">Family</a>
      <a href="http://www.telegraph.co.uk/travel/advice/">Advice</a>
      <a href="http://travelshop.telegraph.co.uk/exclusive-offers/?from=nwttccouk">Offers</a>
      <a href="http://www.telegraph.co.uk/travel/ultratravel">Luxury</a>
    </h2>
  </div>

  <div id="search-box">
    <form>
      <input type="text" placeholder="Search...">
    </form>
  </div>

    <h3 id="chain-links">
      <a href="http://www.telegraph.co.uk/">Home ></a>
      <a href="http://www.telegraph.co.uk/travel/">Travel ></a>
      <a href="http://www.telegraph.co.uk/travel/maps-and-graphics/">Maps and graphics</a>
    </h3>

    <div class="read-more">
      <ol id="read-more-list">
        <h4 id="read-heading"><a href="http://www.telegraph.co.uk/travel/maps-and-graphics/">READ MORE</a></h4>
          <li class="read-more-list"><a href="http://www.telegraph.co.uk/travel/your-travels/secret-city-attractions-readers-tips-recommendations-travel-advice/">
            <span class="list-numbers">1</span>
            <p>Secret corners of the world: readers' tips<br>
              <span class="time">17:50</span></p></a></li>
          <li class="read-more-list"><a href="http://www.telegraph.co.uk/travel/destinations/middle-east/united-arab-emirates/dubai/articles/new-dubai-skyscraper-to-surpass-the-worlds-tallest-building/">
            <span class="list-numbers">2</span>
            <p>New Dubai skyscraper to surpass the world's tallest<br>
              <span class="time">10:31</span></p></a></li>
          <li class="read-more-list"><a href="http://www.telegraph.co.uk/travel/news/How-to-survive-on-a-desert-island/">
            <span class="list-numbers">3</span>
            <p>How to survive on a desert island<br>
              <span class="time">9:45</span></p></a></li>
          <li class="read-more-list"><a href="http://www.telegraph.co.uk/travel/travel-competitions/Win-a-holiday-voucher/">
            <span class="list-numbers">4</span>
            <p>Win a &pound;350 holiday voucher<br>
              <span class="time">8:00</span></p></a></li>
          <li class="read-more-list"><a href="http://www.telegraph.co.uk/travel/destinations/europe/articles/The-best-beach-hotels-in-the-Mediterranean/">
            <span class="list-numbers">5</span>
            <p>The best beach hotels in the Mediterranean<br>
              <span class="time">11:02</span></p></a></li>
      </ol>
    </div>

  <div class="article-body">
    <h1 class="article-title">5 maps that will change the way you see the world</a></h1>

    <figure>
      <img alt="World Map" src="http://www.telegraph.co.uk/content/dam/Travel/2016/April/maps-hub-large.jpg">
      <figcaption>The world accord to forest size, Foreign Office advice, reliance on tourism and World Heritage Sites</figcaption>
    <figure>

    <p>By <strong><a href="http://www.telegraph.co.uk/travel/team/telegraph-travel/"><span id="author">Telegraph Travel</span></a></strong><br>
      <span id="article-time">11 APRIL 2016 10:51AM</span></p>

    <ol>
      <h2><li class="article-headings">
        Life expectancy
      </li></h2>
      <p class="article-content">This map shows the world according to life expectancy.
        The results are depressingly unsurprising. Africa is the only continent that contains nations where the average life expectancy is below 60.
        And there are 28 of them. The lowest life expectancy of all is found in Sierra Leone, where it is a staggering 46. Japan is where residents live the longest -
        84, on average, according to the World Health Organisation data, published this year. It is closely followed by six countries on 83 years: Andorra, Australia,
        Switzerland, Italy, Singapore and San Marino.
      </p>

      <figure>
      <img class="article-images" alt="Heat map indicating life expectancy" src="http://www.telegraph.co.uk/content/dam/Travel/2016/April/maps-hub-large.jpg">
      <figcaption class="article-caption">Map created by <a href="https://telegraphtravel.cartodb.com/me">telegraphtravel</a></figcaption>
      </figure>

      <h2><li class="article-headings">
        Where's safe
      </li></h2>
      <p class="article-content">This map shows those countries the Foreign Office believes is safe for British travellers
        to visit (in green), and those it doesn't (red). The Foreign Office advises against travel to parts of those countries shown in yellow.
      </p>

      <figure>
      <img class="article-images" alt="Heat map indicating where is safest to live" src="http://www.telegraph.co.uk/content/dam/Travel/2016/April/maps-hub-large.jpg">
      <figcaption class="article-caption">Map created by <a href="https://telegraphtravel.cartodb.com/me">telegraphtravel</a></figcaption>
      </figure>

      <h2><li class="article-headings">
        Terror threat
      </li></h2>
      <p class="article-content">This map shows where the Foreign Office believes a terrorist attack is most likely to occur. The threat is rated "high"
        in more than 30 countries, with summer holiday favourites such as Spain and France given the same rating as Libya, Pakistan and
        Somalia. Russia, Egypt, Tunisia, Myanmar, Kenya, the Philippines and Colombia, Turkey, Thailand, Australia and Belgium are also
        given the top rating, as well as much of the Middle East, including Iraq, Saudi Arabia, Yemen, Syria, Lebanon, Israel and Afghanistan.
        Countries where the terror threat is low include Iceland, Bolivia, Ecuador, Poland, the Czech Republic, Switzerland, Hungary, Vietnam and Japan.
      </p>

      <figure>
      <img class="article-images" alt="Heat map indicating terror threat" src="http://www.telegraph.co.uk/content/dam/Travel/2016/April/maps-hub-large.jpg">
      <figcaption class="article-caption">Map created by <a href="https://telegraphtravel.cartodb.com/me">telegraphtravel</a></figcaption>
      </figure>

      <h2><li class="article-headings">
        Population density
      </li></h2>
      <p class="article-content">Those most - and least - crowded countries are shown here, based on the latest available figures from the UN Population
        Division. If you like solitude, avoid most of the Far East and Western Europe, and consider one of the 10 least crowded places...
      </p>

      <figure>
      <img class="article-images" alt="Heat map indicating population density" src="http://www.telegraph.co.uk/content/dam/Travel/2016/April/maps-hub-large.jpg">
      <figcaption class="article-caption">Map created by <a href="https://telegraphtravel.cartodb.com/me">telegraphtravel</a></figcaption>
      </figure>

      <ol id="article-list">
        <li><span class="article-list-numbers">1</span><p>Greenland - 0.0 people per sq km</p></li>
        <li><span class="article-list-numbers">2</span><p>Falkland Islands - 0.3 people per sq km</p></li>
        <li><span class="article-list-numbers">3</span><p>Mongolia - 1.9 people per sq km</p></li>
        <li><span class="article-list-numbers">4</span><p>Western Sahara - 2.3 people per sq km</p></li>
        <li><span class="article-list-numbers">5</span><p>Namibia - 2.9 people per sq km</p></li>
        <li><span class="article-list-numbers">6</span><p>French Guiana - 2.9 people per sq km</p></li>
        <li><span class="article-list-numbers">7</span><p>Australia - 3.1 people per sq km</p></li>
        <li><span class="article-list-numbers">8</span><p>Iceland - 3.3 people per sq km</p></li>
        <li><span class="article-list-numbers">9</span><p>Suriname - 3.3 people per sq km</p></li>
        <li><span class="article-list-numbers">10</span><p>Botswana - 3.5 people per sq km</p></li>
      </ol>

      <h2><li class="article-headings">
        Alcohol consumption
      </li></h2>
      <p class="article-content">This map reflects alcohol consumption per capita. Belarus is the most sozzled state, which a typical adult consuming 17.5
        litres of pure alcohol a year - equivalent to 179 bottles of wine or 1,750 shots of vodka. It is followed by Moldova, Lithuania,
        Russia, Romania and Ukraine. Britain is 25th overall - we each consume 11.6 litres of pure alcohol a year, on average.
      </p>

      <figure>
      <img class="article-images" alt="Heat map indicating alcohol consumption globally" src="http://www.telegraph.co.uk/content/dam/Travel/2016/April/maps-hub-large.jpg">
      <figcaption class="article-caption">Map created by <a href="https://telegraphtravel.cartodb.com/me">telegraphtravel</a></figcaption>
      </figure>

    </ol>
  </div>

  <div class="footer-section">
    <h3 class="margin-links-footer">
      <a href="http://www.telegraph.co.uk/topics/about-us/3489870/Contact-Telegraph-Media-Group.html">Contact Us</a>
      <a href="http://www.telegraph.co.uk/archive/">Archive</a>
      <a href="http://telegraph.newsprints.co.uk/">Reader Prints</a>
      <a href="http://www.telegraph.co.uk/advertising/">Advertising</a>
      <a href="http://www.telegraph.co.uk/topics/syndication-services/">Syndication</a>
      <a href="http://www.telegraph.co.uk/topics/about-us/11570701/Editorial-and-commercial-guidelines.html">Guidelines</a>
      <a href="http://www.telegraph.co.uk/topics/about-us/3691972/Privacy-and-Cookie-Policy.html">Privacy</a>
      <a href="http://www.telegraph.co.uk/termsandconditions">Terms and Conditions</a>
    </h3>

    <footer>&copy; Telegraph Media Group Limited 2016</footer>
  </div>

  </body>

</html>