@media only screen and (max-width: 778px) {

    /* general layout */

        body {
            font-size: 100%;
            overflow-x:hidden;
            width:100%;
            position:relative;
        }
        body#home ul#nav li#nav1 a, body#qual ul#nav li#nav2 a, body#support ul#nav li#nav3 a, body#faqs ul#nav li#nav4 a, body#faqs ul#nav li#nav5 a, body#cont ul#nav li#nav6 a {
            width:102%;
            margin-left:-1%;
            background:none;color:#002c77;
        }
        body#home ul#nav li#nav1 a {
            background:none;
            color:#002c77;
        }
        #container {width:100%;}
    
        #header #logo {
            width: 100%;
            position: initial
        }
        #header #logo a {
            float: right;
            margin: 32px 16px;
            font-size:60%;
        }
        #header {
            margin-top: 20px;
        }
        #header #logo a span {
            display: block;
            background-position: left;
            margin: 0;
            width: 100%;
        }
        #header #toplinks {
            text-align: center;
            background: none;
            width: 100%;
        }
        #header #toplinks form {
            background: none;
            padding: 3px;
            margin: 20px 0;
            width: 100%;
            font-size: 80%;
        }
        #header #toplinks ul {
            margin-left: 20px;
        }
        #header #toplinks input {
            width: 90%;
            font-size: 130%;
            float: none;
            margin: 2%;
        }
        #header #toplinks input.submit {
            width: 92%;
            margin: 2%;
            padding:6px;
        }
        #header #toplinks ul li {
            margin-right: 40px;
            float:none;
            display:block;
        }
        #header #toplinks ul li a  {
            font-size:120%;
            padding-bottom:12px;
        }
        div#crumb {
            font-size: 200%;
            padding-top:24px;
        }
        div#crumb ul.printEmail {display:none;}

        ul#nav {
            width: 100%!important;
        }
        ul#nav li {
            width: 90%;
            padding: 5px;
            background-color: #f0eaf3;
            margin: 10px 4.5%;
            height:30px;
        }
        ul#nav li a {
            background: none;
            height: 40px;
        }
        ul#nav li a:hover {
            background:none;color:#002c77;
        }
        div#center {
            width: 95%;
            padding: 3%;
        }
        div #left, div#right {
            width: 95%;
            padding: 3%;
        }
        #footer li {
            display: block;
            padding:10px;
            border-bottom: 1px solid;
        }
        #footer a {
            font-size: 110%;
            margin-left:3%;
        }
       
        #left ul li, #right ul li {
            background: none;
        }
    /* homepage specific */

        #left form#qualSearch input, form#qualSearch2 input {
            width: 98% !important;
        }
        
        .hmCorners {display:none;}
        div.cornerTL, div.cornerTR, div.cornerBL, div.cornerBR {display:none;}

        #homeOne {width:92%; margin:4%;}   
        #homeTwo, #homeThree {width:86%; margin:4%; padding:3%;}   

        #ipfinder {width:90%; padding:5%; margin:0%; background-color:#6d3585;left:0;}
        #ipfinder p {font-size:124%;}
        #ipfinder input {width:60%; margin-right:20px;}
        
        .hpContent {padding: 12px 32px;}

        #intro {background-color:#6d3585; height:180px; width:92%; margin:4%;}

        .homeNews p {width:98%;font-size:100%;}

        .homeNews a {text-decoration:underline;} 

        #homeTwo .hpContent, #homeThree .hpContent {padding:2%}

        #homeTwo .hpContent h2, #homeThree .hpContent h2 {text-decoration:underline;font-weight:bold; }

        #homeTwo .hpContent p, #homeThree .hpContent p {font-weight:normal;}

        #homeTwo img, #homeThree img {display:none;}

        #left ul li, #right ul li {background:none;}

        #slider, .rss, #rss {display:none;}

        ol#controls {display:none;}

        #ipfinder input.submit {padding:0 20px;}

    /* deeper page fixes */ 
    
        #left form#qualSearch input, form#qualSearch2 input {
            width: 98% !important;
        }
    
        body#news h1 span {right:20px;}
        
        div#center div.newsPanel div.standardNewsContent p {width:98%}
        
    #center h1 + img {width:100%;}
        
    /* Notification of changes table */
      #resultTable {
        border: 0;
    	padding:0;
        width:95% !important;
      }
      #resultTable thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
      }
      #resultTable tr {
        border-bottom: 3px solid #fff;
        display: block;
        margin-bottom: 1em;
    	margin-right:1em;
      }
      #resultTable th {
    	   width:100%;
    	   display:block;
      }
      #resultTable td {
        border: 1px solid #ddd;
        display: block;
    	width:100%;
      }
      #resultTable td:nth-child(4) {clear:both}
      #resultTable td:before {
        font-weight: bold;
      }
      #resultTable td:nth-child(1):before {
        content: 'Title:  ';
      }
      #resultTable td:nth-child(2):before {
        content: 'Code:  ';
      }
      #resultTable td:nth-child(3):before {
        content: 'Revised version number:  ';
      }
      #resultTable td:nth-child(4):before {
        content: 'Summary of changes:  ';
        white-space: pre;
      }
      #resultTable td:nth-child(5):before {
        content: 'Date of change:  ';
      }
      #resultTable td:last-child {
        border-bottom: 0;
    	width:100%;
      }
}
@media only screen and (max-device-width: 667px) {

    /* general layout */

         body#wide #center, div#center, div#center.wideRight {
            width: 95%;
            padding: 3%;
        }
        #header #toplinks input.submit {
            width: 93%;
            margin: 2%;
            padding:6px;
        } 
        ul#nav li {
            width: 90%;
            padding: 5px;
            background-color: #f0eaf3;
            margin: 10px;
            height:30px;
        }
        #footer a {
            font-size: 110%;
        }
        #center.wideRight form, iframe {width:100%;}
           
    /* homepage specific */

        #left form#qualSearch input, form#qualSearch2 input {
            width: 98% !important;
        }
        
        .hpContent {padding: 12px 20px;}
       
        #homeOne {width:98%; margin:1%;}   
        #homeTwo, #homeThree {width:92%; margin:1%; padding:3%;}   

        #intro {background-color:#6d3585; height:180px; width:98%; margin:1%;}    
            
        #ipfinder input.submit {padding:0 20px;}

}