Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  
  
​
  <title>Title</title>
    <style type="text/css">
​
/* RESET ------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0; }
​
body {
  font-size: 62.5%; }
​
/* END OF RESET ------------------------------ */
a img {
  border: none;
  display: none; }
​
h1 {
  font-weight: bold;
  font-size: 19px;
  color: #333;
  margin-bottom: 20px; }
​
h2 {
  margin: 10px 0;
  font: bold 13px Verdana;
  color: #333; }
​
html, body {
  height: 100%; }
​
body {
  font-family: Verdana; }
​
#header {
  width: 100%;
  height: 60px;
  padding: 15px 0;
  background: #FFFFFF; }
​
#header_nest {
  float: right;
  margin-right: 5%; }
  #header_nest img {
    display: inline-block;
    vertical-align: middle; }
    body.ie6 #header_nest img, body.ie7 #header_nest img {
      display: inline; }
  #header_nest p {
    font: normal 10px Verdana;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    margin: 0 25px 0 15px; }
    body.ie6 #header_nest p, body.ie7 #header_nest p {
      display: inline; }
​
ul#nav {
  padding: 0 0 0 20px;
  position: relative; }
  ul#nav li {
    display: inline-block;
    vertical-align: middle;
    font: normal 11px Verdana, sans-serif;
    list-style-type: none;
    position: relative; }
    body.ie6 ul#nav li, body.ie7 ul#nav li {
      display: inline; }
    ul#nav li h2 {
      display: inline-block;
      vertical-align: middle;
      z-index: -1;
      margin: 0;
      font: normal 11px Verdana, sans-serif; }
      body.ie6 ul#nav li h2, body.ie7 ul#nav li h2 {
        display: inline; }
      ul#nav li h2 a {
        display: inline-block;
        vertical-align: middle;
        z-index: 4;
        text-decoration: none;
        position: relative;
        color: #999;
        padding: 20px 10px 20px 40px;
        white-space: nowrap; }
        body.ie6 ul#nav li h2 a, body.ie7 ul#nav li h2 a {
          display: inline; }
  ul#nav li.mega {
    z-index: 30; }
  ul#nav li.mega div {
    position: absolute;
    z-index: 200;
    padding: 10px;
    border-left: 1px solid #999;
    border-right: 3px solid #999;
    border-bottom: 2px solid #999;
    top: 52px;
    left: 0;
    margin-right: 40px;
    background: #CCC;
    /* commenting out for test case: display: none;  */ }
    ul#nav li.mega div h3 {
      display: inline;
      font: bold 13px Verdana, sans-serif; }
  ul#nav li.hovering div {
    display: block; }
  ul#nav img {
    position: absolute;
    z-index: -1;
    top: 50%;
    margin-top: -12px;
    left: 8px; }
​
#main {
  padding-right: 300px; }
​
#content {
  float: left;
  display: inline; }
​
body {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  background: #fff;
  /* Minimum width remove line if not required (does not work in IE) */ }
​
/* column container */
.colmask {
  position: relative;
  /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
  clear: both;
  float: left;
  width: 100%;
  /* width of whole page */
  overflow: hidden;
  /* This chops off any overhanging divs */ }
​
/* 2 column right menu settings */
.rightmenu {
  /* display: none; */ }
​
.rightmenu .colleft {
  float: left;
  width: 200%;
  margin-left: -200px;
  position: relative;
  right: 100%;
  background: #fff; }
​
.rightmenu .col1wrap {
  float: left;
  width: 50%;
  position: relative;
  left: 50%;
  padding-bottom: 1em; }
​
.rightmenu .col1 {
  margin: 50px 55px 0 245px;
  /* removed temporarily: overflow:auto; */
  padding-bottom: 20px; }
​
.rightmenu .col2 {
  float: right;
  width: 180px;
  position: relative;
  left: 195px; }
  .rightmenu .col2 h3 {
    display: inline-block;
    color: #FFFFF;
    margin-left: -9px;
    padding: 10px 9px;
    background-color: #5D973A;
    cursor: pointer;
    width: 100%;
    color: #EEEEEE; }
    body.ie6 .rightmenu .col2 h3, body.ie7 .rightmenu .col2 h3 {
      display: inline; }
​
#sidebar {
  width: 200px;
  color: black;
  float: right;
  display: inline;
  height: 300px; }
​
#footer {
  width: 100%;
  clear: both;
  background: #333; }
  #footer ul {
    display: inline-block;
    margin: 30px; }
    body.ie6 #footer ul, body.ie7 #footer ul {
      display: inline; }
    #footer ul li {
      display: inline-block;
      list-style-type: none;
      margin: 0 9px; }
      body.ie6 #footer ul li, body.ie7 #footer ul li {
        display: inline; }
      #footer ul li a {
        color: #FFF;
        text-decoration: none;
        font: normal 1.4em Verdana, sans-serif; }
​
.dataset {
  display: none;
  overflow: auto;
  width: 100%;
  font: normal 13px Verdana, sans-serif;
  border-collapse: collapse;
  margin: 0 0 0 0; 
  height: 200px;
}
​
.dataTables_wrapper {
  margin: 0 0 40px 0; }
​
.dataset td {
  padding: 3px 10px; }
​
.dataset th {
  font: bold 10px Verdana, sans-serif;
  text-align: left;
  padding: 7px 3px 4px 10px; }
​
.dataTables_filter {
  margin: 8px;
  float: right; }
​
.dataTables_length {
  margin: 8px;
  float: left; }
​
.dataTables_info {
  margin: 8px;
  float: left; }
​
.dataTables_paginate {
  margin: 8px;
  float: right; }
  .dataTables_paginate .ui-state-default {
    padding: 2px; }
​
/* environmental impact styles */
#pg_environmental-impact .dataset tr.odd, #pg_reporting .dataset tr.odd {
  background-color: #DDFFDD; }
#pg_environmental-impact .dataset tr.odd td:first-child, #pg_reporting .dataset tr.odd td:first-child {
  background-color: #C4FFC4; }
#pg_environmental-impact .dataset tr.even td:first-child, #pg_reporting .dataset tr.even td:first-child {
  background-color: #D5FFD5; }
​
.grp_dash .dataTables_scrollBody {
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC; }
​
/* end environmental impact styles */
/* Login Styles */
#pg_login {
  background-color: #F5F5F5;
  width: 100%;
  height: 100%; }
  #pg_login #login_nested {
    height: 200px;
    width: 298px;
    position: absolute;
    top: 50%;
    margin-top: -100px;
    left: 50%;
    margin-left: -150px;
    text-align: right;
    font: normal 12px Verdana, sans-serif; }
    #pg_login #login_nested img {
      text-align: right;
      margin: 19px 39px 0 0; }
    #pg_login #login_nested form {
      margin-top: -10px;
      text-align: left;
      padding: 0 39px 30px; }
    #pg_login #login_nested input#submit {
      display: inline-block;
      background-color: #808080;
      color: white;
      border: none;
      padding: 10px;
      font-size: 12px;
      width: 100%;
      border-bottom: 1px solid #666;
      border-left: 1px solid #777; }
      body.ie6 #pg_login #login_nested input#submit, body.ie7 #pg_login #login_nested input#submit {
        display: inline; }
    #pg_login #login_nested ul.errorlist {
      color: red;
      margin: 5px 0; }
      #pg_login #login_nested ul.errorlist li {
        list-style-type: none;
        font: normal 10px Verdana, sans-serif; }
    #pg_login #login_nested #id_username, #pg_login #login_nested #id_password, #pg_login #login_nested .placeholder {
      padding: 7px 6px;
      margin: 3px 0px;
      width: 206px;
      position: relative;
      display: block; }
    #pg_login #login_nested .placeholder {
      color: #999; }
​
.grp_dash .highlights {
  display: inline-block;
  margin: 0 15px 10px 15px; }
  body.ie6 .grp_dash .highlights, body.ie7 .grp_dash .highlights {
    display: inline; }
  .grp_dash .highlights p {
    display: inline-block;
    font: normal 12px Verdana;
    text-align: center;
    margin: 0 25px 15px 0; }
    body.ie6 .grp_dash .highlights p, body.ie7 .grp_dash .highlights p {
      display: inline; }
    .grp_dash .highlights p strong {
      display: block;
      font: bold 14px Verdana; }
​
/* filterable pages */
#pg_reporting form fieldset, #pg_environmental-impact form fieldset {
  display: none;
  border: none; }
  #pg_reporting form fieldset ul li, #pg_environmental-impact form fieldset ul li {
    list-style-type: none; }
    #pg_reporting form fieldset ul li label, #pg_environmental-impact form fieldset ul li label {
      display: inline; }
​
form label {
  /* display: block; */ }
​
/* export module */
#export_module {
  margin-bottom: 15px;
  margin-top: -10px;
  display: none; }
​
​
</style>
   
</head>
​
​
<!--[if lte IE 6]><body class="ie6 ie7"><![endif]-->
​
<!--[if lte IE 7]><body class="ie7"><![endif]-->
<!--[if gte IE 8]><!--><body><!--<![endif]-->
<div id="pg_environmental-impact" class="">
  <div id="header">
    <div id="header_nest">
        
      <p>Hello, <strong>User</strong><br /> 
​
<a href="/help/contact/">Get Help</a> |
​
 
  <a href="/logout/">Logout</a></p>
​
      </div>
  </div>
  <ul id="nav">
    
​
<li class="mega">
  <h2><a href="/">Blah</a></h2></li>
​
​
    <li class="mega" style="z-index: 40;">
        <h2><a href="#">Environmental Impact</a></h2>
​
        <div>
            <h3>Blah:</h3> 
            <p>
                <a href="#">Blah</a>,
                <a href="#">Blah</a>,
                <a href="#">Blah</a>,
                <a href="#">Blah</a>
            </p>
​
        </div>
    </li>
​
​
​
    <li class="mega">
        <h2><a href="#">Blah</a></h2>
        <div>
            <h3>Blah</h3> 
            <p>
​
                <a href="#">Blah</a>,
                <a href="#">Blah</a>,
                <a href="#">Blah</a>,
                <a href="#">Blah</a>,
                <a href="#">Blah</a>,
                <a href="#">Blah</a>
            </p>
        </div>
​
    </li>
​
​
    <li>
        <h2><a href="#">Blah</a></h2>
    </li>
​
    <li class="mega">
        <h2><a href="#">Blah</a></h2>
​
        <div>
            <h3>Blah</h3> 
            <p>
​
                <a href="#">Blah</a>,
​
​
                <a href="#">Blah</a>
​
            </p>
            <h3>Miscellaneous</h3> 
            <p>
​
                <a href="#">Blah</a>
​
            </p>
        </div> 
    </li>
​
  </ul>
​
  <div class="colmask rightmenu">
    <div class="colleft">
​
      <div class="col1wrap">
        <div class="col1">
            
​
            <h1>Page Title</h1>
            
​
​
<table class="dataset">
​
 
</table>
​
                
        </div>
      </div>
      <div class="col2">
        <!-- Column 2 start -->
​
        
<h2>More filters</h2>
<p>
<a href="#">Blah</a>
<a href="#">Blah</a>
<a href="#">Blah</a>
​
<a href="#">Blah</a>
​
</p>
​
​
<h2>Filter...</h2>
​
​
​
​
​
​
​
​
        <!-- Column 2 end -->
      </div>
    </div>
  </div>
​
​
  <div id="footer">
    <ul>
      
    </ul>
  </div>
</div>
​
​
</body>
</html>
​
 
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers