﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <title>500 error page</title>
    <style type="text/css">
        body{
            margin:0!important;
        }
        
        .wrapper{
            position: relative;
            min-height:100%;
        }
        .header{
            border-bottom: 1px solid rgb(107, 114, 107);
        }
        
        .header__banner{
           width:100%;
           display:table;
        }

        .banner__img, .banner__left, .banner__right{
            display: table-cell;
        }

         .banner__img{
            width: 1061px;
         }

        .banner__left{
            background-color:#41DC5D;
        }

        .banner__right{
            background-color:#006736;
        }

        .header__logo{
            text-align: left;
            padding-top: 20px;
            padding-bottom: 30px;
        }   

        .content{
            padding: 32px 0;
            min-height: 332px;
            padding-bottom: 265px !important;
        }

        .content__top{
            position:relative;
            padding-left: 130px;
        }

        .content__top__img{
            position: absolute;
            top:5px;
            left:0;
        }
        
        .content__top__title{
            margin-top:0;
        }

        .content__bottom{
            margin-top: 45px;
        }

        .list{
            margin-top: 20px;
        }

        .list li{
            margin-bottom: 1.5em;
        }

        .footer{
            background-color: #DDD6CA;
            padding: 20px 0;
            position: absolute;
            bottom: 0;
            left:0;
            width:100%;
            min-height: 150px;
        }

         .footer-social{
            list-style: none;
            overflow: hidden;
            width: 50%;
            padding-left: 0;
            line-height: 2.4;
         }

        .footer-social li{
            float: left;
            width: 15%;
        }

        .footer-social li span{
            font-size: 0.813rem;
         }

        .footer-social img{
            width: 2.25em;
            height: 2.25em;
            display: block;
        }

        .center-content{
            max-width: 61em;
            margin: 0 auto;
            padding: 20px;
        }

        .small-font{
            font-size: 0.844rem;
        }

        .medium-font{
            font-size: 1.125rem;
        }

        .large-font{
            font-size:2.25rem;
        }

        .f-left{
            float:left;
        }

        .f-right{
            float:right;
        }

        .f-clear
        {
            clear:both;
        }

        .col-pink{
            color:#6c1359;
        }

        html,body{
           height:100%;
        }
        
        p,ul{
            font-family: Arial, Helvetica, sans-serif;
            font-weight: normal;
        }

        ul{
            padding-left:16px;
        }

        h1,h2,h3{
            font-family:'Gill Sans MT', GillSans, Calibri, 'Trebuchet MS', Arial, sans-serif;
            font-weight: normal;
        }   

        h1{
           line-height: 1.1;
           font-size: 2.25rem;
           margin-bottom: 0.4em;
        }

        p, ul, h2{
            line-height: 1.5;
        }

        a{
            color:#222;
        }

        a:hover{
            color: #035e8f;
        }

        @media only screen and (max-width: 950px){
            .footer-social{             
                width: 100%;
            }

            .footer-social li{
            
                
            }
        }
        
        @media only screen and (max-width: 768px){
            .header__logo{
                text-align: center;
                padding: 12px 20px !important;
            }

            .header__logo img{
                width: 127px;
            }

            .content{
                width:596px;
                margin: 0 auto;
            }

            .footer-social{
                width:100%;
                border-top: 1px solid #6B726B;
                border-bottom: 1px solid #6B726B;
                padding: 10px 0 35px 0;
            }

            .footer-social li{
           
                width:25%;
            }
        }

        @media only screen and (max-width: 600px){
            .content{
                width:auto;
            }

            .content__top{
                padding-left:0;
            }

            .content__top__img{
                top:-6px;
                width: 65px;
            }

            .content__top__title{
                margin-left:95px;
            }
        }

        @media only screen and (max-width: 430px){
            .content__top__img{
                top:0;   
            }
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="header">
            <div class="header__banner">            
                <div class="banner__left"></div>
                <div class="banner__img"><img width="100%" src="https://beta.islington.gov.uk/_common/img/banner.png" alt="banner"></div>
                <div class="banner__right"></div>
            </div>          
            <div class="header__logo center-content"><img src="https://beta.islington.gov.uk/_common/img/svg/fallback/logo.png" width="200" alt="islington-logo"></div>
        </div>
        <div class="content center-content">
            <div class="content__top">
                <div class="content__top__img"> 
                   <img width="100%" src="https://beta.islington.gov.uk/~/media/images/500-page/fixing" alt="something broken">   
                </div>         
                <h1 class="content__top__title col-pink">Something is broken</h1>
                <p class="medium-font">We're sorry about that. Our engineers are trying to fix it. <br> Please try again later. </p>
            </div>
            <div class="content__bottom">
                <h2>What can you do in the meantime</h2>
                <p class="small-font">If you need to do something on the site urgently, you can still do these things:</p>
                <ul class="list small-font">
                    <li>
                        <a href="https://secure.islington.gov.uk/payments/sales/launchinternet.aspx?payableonly=true&amp;utm_content=(direct)|(none)">Make payments</a>
                    </li>
                    <li>
                        <a href="https://myeaccount.islington.gov.uk/myeaccount/Account/Login.aspx">Check your account</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer">
            <div class="center-content">
                <ul class="footer-social">
                    <li>
                        <a href="https://www.facebook.com/RecyclingIslington" target="_blank">
                            <span>Facebook</span>
                            <img src="https://beta.islington.gov.uk/~/media/images/footer-images/social-media-links/facebook.svg" alt="Facebook logo">
                        </a>
                    </li>
                    <li>
                        <a href="https://www.flickr.com/photos/islingtonlife/" target="_blank">
                            <span>Flickr</span>
                            <img src="https://beta.islington.gov.uk/~/media/images/footer-images/social-media-links/flickr.svg" alt="Flickr Logo">
                        </a>
                    </li>
                    <li>
                        <a href="https://twitter.com/IslingtonBC" target="_blank">
                            <span>Twitter</span>
                            <img src="https://beta.islington.gov.uk/~/media/images/footer-images/social-media-links/twitter.svg" alt="Twitter Logo">
                        </a>
                    </li>
                    <li>
                        <a href="https://www.youtube.com/user/IslingtonTube" target="_blank">
                            <span>Youtube</span>
                            <img src="https://beta.islington.gov.uk/~/media/images/footer-images/social-media-links/youtube.svg" alt="Youtube Logo">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

