div.layer:nth-child(n+4) > h2 {
    box-shadow: -1px 0px 10px 1px rgba(0, 0, 0, 0.5);
}

div.layer ul.tabs li {
    float: left;
    line-height: 2em;
}

div.layer ul.tabs a
{
    display: inline-block;
    width: 6em;
    height: 3em;
    line-height: 2.2em;
    vertical-align: top;
    
    background-color: #bbb;
    color: White;
    text-decoration: none;
    text-align: center;
    
    margin: 0;
    margin-right: 10px;
}

div.layer ul.tabs a.selected
{
    background-color: White;
    color: #aaa;
}

div.layer div.tabPlaceholder
{
    position: absolute;
    
    top: 3.2em; /* (tabs) */
    bottom: 0;
    left: 0;
    right: 0;
    
    background-color: white;
    /*background-image: url('../../images/common/noise.png');*/
    background-repeat: repeat;
    
    overflow: hidden;
}

div.layer.root div.tabPlaceholder
{
    background-image: none;
}

body.esd div.layer div.tabPlaceholder
{
    background-color: white;
    background-image: none;
}

div.tabContent
{
    position: absolute;
    
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    overflow: hidden;
    
    display: none;
}

div.tabContent.show {
    display: block;
}

div.layer.root div.tabPlaceholder
{    
    top: 3.3em;
}

@media only screen and (max-width: 459px) {
    /* the number 459px is the exact size chrome wraps the menu as it currently is. very fragile, don't be surprised if it should change. alternatives are flex layout (too much of a change) or js (this is better) */
    div.layer.root div.tabPlaceholder {
        top: 5.95em;
    }
}

div.tabContent div.index
{
    z-index: 100;
    position: absolute;
    right: 20px;
    top: 16px;
    bottom: 2px;
    width: 25px;
    
    color: #999;
    
    font-size: smaller;
}

div.tabContent div.index ul.index {
    padding: 0;
    list-style: none;
}

div.tabContent ul.index li
{
    width: 25px;
    text-align: center;
    /*border-bottom: solid 1px #999;*/
    padding: 1px 0px 0px;
}

div.tabContent div.index a
{
    display: inline-block;
    color: White;
    width: 25px;
    text-decoration: none;
    color: black;
}

div.tabContent div.entries
{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 16px;
    right: 0;
    padding-right: 22px;
    
    -webkit-overflow-scrolling:touch; /* ipad */    
    overflow-y: scroll;
    *overflow: scroll; /* ie7 */
}

div.tabContent div.entries div.childItem
{
    margin-top: 0;
}

div.tabContent div.entries div.childItem:last-child
{
    margin-bottom: 0;
}

div.layer div.tabPlaceholder.loading::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: url('https://resources.esd.org.uk/images/common/loading.small.purple.gif');
    background-repeat: no-repeat;
    background-position: center center;
    pointer-events: none;
}

div.tabContent.text
{
    padding: 1em;
    color: #333333;
    
    overflow-y: scroll;
    *overflow: scroll; /* ie7 */
}

div.tabContent.text label
{
    font-weight: bold;
    display: block;
    margin: 0;
}

div.tabContent.text p,
div.tabContent.text ul
{
    margin: 0 0 1em 0;
}

div.tabContent.text ul
{
    list-style-type: square;
    list-style-position: inside;
}

div.tabContent.text div.section .styleLists dd ul {
    list-style-type: disc;
    list-style-position: inside;
}

div.tabContent.text div.section .styleLists dd ol {
    list-style-type: decimal;
    list-style-position: inside;
}

/* tools */

/*div.tabContent.text div.tools
{
    margin-bottom: 1em;
}*/

div.tabContent.text div.tools div.tool
{
    width: 100px;
    height: 140px;
    display: inline-block;
    text-align: center;
    margin-right: 1em;
    position: relative;
    float: left;
}

div.tabContent.text div.tools a
{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 140px;
    margin-left: auto;
    margin-right: auto; 
}

div.tabContent.text div.tools a:hover
{
    text-decoration: none;
}

div.tools span.icon
{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100px;
    height: 100px;
    border: none;
    /* http://lginform.local.gov.uk/sites/all/themes/lga/images/design/sprite-chart-types.png */
    background-image: url('../../images/icons/barChart.100x100.png');
    background-repeat: no-repeat;
}

div.tools span.label
{
    display: block;
    position: absolute;
    top: 100px;
    left: 5px;
    width: 90px;
    height: 40px;
    
    font-family: Arial;
    font-size: 12px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    
    color:#2e2e2e;
}

div.tools span.icon.esd-bar
{
    background-image: url('../../images/icons/barChart.100x100.png');
}

div.tools span.icon.esd-map
{
    background-image: url('../../images/icons/map.100x100.png');
}

div.tools span.icon.esd-table
{
    background-image: url('../../images/icons/table.100x100.png');
}

div.tools span.icon.lga-inform
{
    background-image: url('../../images/icons/lgInform.100x100.png');
}

div.tools span.icon.esd-recordsRetention
{
    background-image: url('../../images/icons/recordsRetention.100x100.png');
}

div.tools span.icon.esd-powersAndDuties
{
    background-image: url('../../images/icons/powersDuties.100x100.png');
}

div.tools span.icon.esd-openDataSchemas
{
    background-image: url('../../images/icons/openDataSchemas.100x100.png');
}

div.tools span.icon.esd-openDataDatasets
{
    background-image: url('../../images/icons/openDataDatasets.100x100.png');
}

div.tools span.count {
    position: absolute;
    top: 0.5em;
    right: -0.5em;
    z-index: 1000;
    font-weight: bold;
    font-size: 0.6em;
    background-color: #9C2C98;
    min-width: 1.7em;
    height: 1.7em;
    padding-top: 0.3em;
    padding-left: 0.2em;
    padding-right: 0.1em;
    color: White;
    border-radius: 1em;
    line-height: 1.1em;
}

/* tools resources */

div.tabContent div.resourcesContainer, div.tabContent div.resourcesContainer-header {
    display: none;
}

div.contextBox
{
    font-size: 1.2em;
}

div.contextBox h2
{
    margin-top: 0;
    color: #fff;
}

div.contextBox h2 span.toolTypeLabel,
div.contextBox h2 span.resourceLabel
{
    font-weight: bold;
}

div.contextBox table thead
{
    display: none;
}

div.contextBox table.resources
{
    border-collapse: collapse;
}

div.contextBox th,
div.contextBox td
{
    vertical-align: middle;
    border-right: solid 1em transparent;
    border-bottom: solid 1em transparent;
}

div.contextBox td.toolDescription a:hover
{
    text-decoration: underline;
}

div.contextBox .relatedItem a
{
    color: White;
    padding: 0.5em;
    display: inline-block;
}



/* tools tab popup icons */

div.contextBox span.icon
{
    display: block;
    width: 32px;
    height: 32px;
    /* http://lginform.local.gov.uk/sites/all/themes/lga/images/design/sprite-chart-types.png */
    background-image: url('../../images/icons/barChart.32x32.png');
    background-repeat: no-repeat;
}

div.contextBox span.icon.esd-bar
{
    background-image: url('../../images/icons/barChart.32x32.png');
}

div.contextBox span.icon.esd-map
{
    background-image: url('../../images/icons/map.32x32.png');
}

div.contextBox span.icon.esd-table
{
    background-image: url('../../images/icons/table.32x32.png');
}

div.contextBox span.icon.tools
{
    background-image: url('../../images/icons/tools.32x32.png');
}

div.contextBox span.icon.lga-inform
{
    background-image: url('../../images/icons/lgInform.32x32.png');
}

div.contextBox span.icon.esd-recordsRetention
{
    background-image: url('../../images/icons/recordsRetention.32x32.png');
}

div.contextBox span.icon.esd-powersAndDuties
{
    background-image: url('../../images/icons/powersDuties.32x32.png');
}

div.contextBox span.icon.esd-openDataSchemas
{
    background-image: url('../../images/icons/openDataSchemas.32x32.png');
}

div.contextBox span.icon.esd-openDataDatasets
{
    background-image: url('../../images/icons/openDataDatasets.32x32.png');
}

/* end tools tab popup icons */


/*
div.contextBox div.resources div.toolLinks
{
    margin: 0.2em 0px 0.2em 0px;
}

div.contextBox div.resources div.relatedItem,
div.contextBox div.resources div.toolsTab,
div.contextBox div.resources div.tool
{
    display: inline-block;
    vertical-align: top;
}

div.contextBox div.resources div.relatedItem
{
    width: 60%;
}

div.contextBox div.resources a
{
    color: #3333aa;
    text-decoration: none;
    display: inline-block;
    padding: 0.5em;
}

div.contextBox div.resources a:hover
{
    text-decoration: underline;
}

div.contextBox div.resources div.relatedItem a
{
    color: White;
    padding: 0.5em;
    width: 100%;
    display: inline-block;
}

div.contextBox div.resources div.relatedItem a:hover
{
    text-decoration: none;
}
*/

/* end tools resources */

/* end tools */

div.tabContent.text ul.items
{
    list-style-type: none;
    list-style-position: inside;
    margin-bottom: 2em;
    padding: 0;
}

    div.tabContent.text ul.items li div.relatedItem {
        margin-bottom: 0.5em;
    }

div.tabContent.text ul.items li:last-child
{
    margin-bottom: 0;
}

div.tabContent.text div.relatedItem a
{
    text-decoration: none;
    color: white;
    width: calc(100% - 1em);
    display: inline-block;
    padding: 0.5em;
}

div.tabContent.text div.relatedItem .itemType
{
    font-size: inherit;
    vertical-align: inherit;
}


div.tabContent div.searchOptions
{
    position: absolute;
    /*padding: 1em 2em 1em 2em;*/
    color: #333333;
    top: 0;
    left: 0;
    right: 0;
    height: 6em;
}

div.tabContent div.searchResults
{
    position: absolute;
    left: 0;
    top: 7em;
    bottom: 0;
    right: 0;
    padding-right: 0;
    
    overflow-y: scroll;
    *overflow: scroll; /* ie7 */
}

div.tabContent div.tool div.image
{
    display: inline-block;
    float: left;
}

div.tabContent div.tool ul.items
{
    margin-left: 128px;
}

/* help */

div.tabContent.text.help
{
    padding: 0;
}

div.tabContent.text.help h2
{
    font-weight: bold;
    padding: 0;
    margin: 0;
    
    background-color: #e0e0e0;
    font-size: 2.5em;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
    border-bottom: dashed 2px #666666;
    border-radius: 0 5px 0 0;
}

div.tabContent.text.help h2 a
{
    display: inline-block;
    width: auto;
    color: Black;
    text-decoration: none;
}

/* faq */

div.tabContent.text.help div.faq p.q
{
    padding-bottom: 0;
    margin-bottom: 0;
}

/* end faq */

/* comments */

div.tabContent.text.help div.comment-form p.notSignedIn
{
    padding-bottom: 0;    
}

div.tabContent.text.help div.comment-form textarea
{
    width: 99%;
}

div.tabContent.text.help div.comment-form p.dim
{
    font-size: small;
    padding-bottom: 0;    
}

div.tabContent.text.help div.comment-form input.button
{
    border-width: 0;
    background-color: transparent;
    
    background-image: url(../../images/common/postcomment.png);
    background-position: left -30px;
    background-repeat: no-repeat;
    
    height: 30px;
    width: 160px;
    
    margin-top: 1em;
}

div.tabContent.text.help div.comment-form.reply-form input.button
{
    background-image: url(../../images/common/reply.png);
}


div.tabContent.text.help div.comment-form input.cancel,
div.tabContent.text.help div.comment-form.reply-form input.cancel
{
    background-image: url(../../images/common/cancel.png);
}

div.tabContent.text.help div.comment-form.reply-form
{
    padding-bottom: 2em;
}

div.tabContent.text.help div.comment-form input:hover.button,
div.tabContent.text.help div.comment-form input.button.hover
{
    background-position: left top;
}

div.tabContent.text.help div.comments
{
    padding-top: 2em;
}

div.tabContent.text.help div.comments p.message,
div.tabContent.text.help div.comment p.details,
div.tabContent.text.help div.comment p.options
{
    padding-bottom: 0;
}

div.tabContent.text.help div.comment p.details
{
    font-weight: bold;
}

div.tabContent.text.help div.comments div.responses
{
    margin-left: 0;
}

div.tabContent.text.help div.comments div.responses p.message,
div.tabContent.text.help div.comments div.responses p.details
{
    border-left: 20px solid #eee;
    padding-left: 10px;
}

div.tabContent.text.help div.comment p.options
{
    text-align: right;
    margin-bottom: 1em;
}

/* end comments */

/* end help */





/* inner item content */

div.layer.dark-nav
{
    overflow: hidden;
}

/*div.layer.shadowed.dark-nav
{
    overflow: visible; /* allows the top-shadow to be visible (root is the only element with top-shadow) */
}*/

div.layer.dark-nav div.background
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

div.layer.dark-nav div.itemContent
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

div.layer.dark-nav div.itemContent div.esd-tabs
{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin-top: 0;
}

div.layer.group div.itemContent div.esd-tabs {
    display: none;
}

div.layer.dark-nav div.itemContent div.tabs ul
{
    padding: 1.6em 0 1.6em 1.6em;
    background-color: #333333;
    border-radius: 5px 0 0 5px;
    position: absolute;
    top: 15px;
    left: 15px;
    bottom: 15px;
    width: 195px;
}

div.layer.dark-nav div.tabs ul li
{
    display: block;
}

div.layer.dark-nav div.tabs ul li a
{
    background-color: #333333;
    background-image: none;
    color: #cccccc;
    display: block;
}

div.layer.dark-nav div.tabs ul li a.selected
{
    color: #333333;
    background-image: none;
    background-color: #ececec;
}

div.layer.dark-nav div.itemContent div.tabPlaceholder
{
    /*margin-top: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    border-radius: 0 5px 5px 0;*/
    /*margin-left: 195px;*/
    /*padding: 1px;*/
    top: 4em;
    /*background-color: #ececec;*/
    background-image: none;
}

div.layer.group div.itemContent div.tabPlaceholder {
    top: 1em;
}

/*div.layer.group div.itemContent div.tabPlaceholder {
    
    margin-left: 15px;
    border-radius: 5px;
}*/


div.layer.dark-nav div.itemPanel div.background
{
    background-color: white;
    /*background-image: url('../../images/common/noise.png');
    background-repeat: repeat;*/
    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* end inner item content */

/* text sections */

div.tabContent.text
{
    margin: 0;
    padding: 0;
    overflow-y: auto;
}

div.tabContent.help.text
{
    margin: 0;
}

div.tabContent div.section
{
    background-color: white;
    padding: 0;
    margin-top: 0.5em;
    margin-bottom: 0;
    border-radius: 0;
}

div.tabContent div.section.allDiscontinued {
    margin: 1em;
    padding: 1em;
    padding-left: 3em;
    font-size: 1.2em;
    color: #333;

    background-image: url('../images/common/tab-exclamation.png');
    background-repeat: no-repeat;
    background-position: 1em 1em;
}

div.tabContent div.section.allDiscontinued a {
    color: #3333aa;
    text-decoration: none;
}

div.tabContent div.section.allDiscontinued a:hover {
    text-decoration: underline;
}

.dark-nav div.tabContent div.section
{
    /*border: solid 1px #cccccc;*/
}

div.tabContent div.section:last-child
{
    margin-bottom: 0;
}

/*
div.tabContent div.section div.prop
{
    display: table;
    -webkit-column-width: 45%;
    -webkit-column-count: 2;
}

div.tabContent div.section dl
{
    display: table-row;
    margin-bottom: 1em;
}

div.tabContent div.section dt
{
    display:table-cell;
    font-weight: bold;
    padding-bottom: 1em;
}

div.tabContent div.section dd
{
    display:table-cell;
    padding-left: 1em;
    padding-bottom: 1em;
}

*/

/*
div.tabContent div.section div.prop
{
    clear: both;
}

div.tabContent div.section div.prop label,
div.tabContent div.section div.prop p
{
    display: block;
    float: left;
    padding: 0;
    margin: 0;
}*/

div.tabContent.text div.section ul
{
    margin: 0;
    padding: 0;
    list-style-position: outside;
    list-style-type: none;
}

div.tabContent.text div.section li.discontinued
{
    display: none;
}

div.tabContent.text.showDiscontinued div.section li.discontinued
{
    display: block;
}

/*div.tabContent div.section div.col
{
    display: block;
    width: 47%;
    margin-right: 2%;
    float: left;
}*/

div.tabContent div.section dl
{
    padding-bottom: 1em;
    display: table;
}

div.tabContent div.section dt
{
    font-weight: bold;
    min-width: 6em;
}

div.tabContent div.section dt,
div.tabContent div.section dd
{
    display: table-cell;
}

div.tabContent div.section dd {
    word-break: break-word;
    overflow-wrap: break-word;
}

html.ie7 div.tabContent div.section dt,
html.ie7 div.tabContent div.section dd
{
    position: relative;
}

div.tabContent div.section dd
{
    padding-left: 1em;
}

div.tabContent div.section.relationships dl
{
    display: block;
}

div.tabContent div.section.relationships dt,
div.tabContent div.section.relationships dd
{
    display: block;
    font-weight: normal;
    padding-left: 0;
}

div.tabContent div.section.relationships dt
{
    padding-bottom: 0.5em;
}

div.tabContent div.section.relationships dt label
{
    font-weight: bold;
    margin: 0;
}

div.tabContent div.section div.end
{
    clear: both;
}

/* end text sections */


/* rdf */


div.tabContent div.section.sparql dl.block,
div.tabContent div.section.sparql dl.block dt,
div.tabContent div.section.sparql dl.block dd
{
    display: block;
    width: 100%;
    padding-left: 0;
    font-weight: normal;
}

div.sparql textarea
{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    padding: 0.2em;
}

table.rdf
{
    vertical-align: top;
    margin-bottom: 1em;
}

table.rdf th,
table.rdf td
{
    border: solid 1px #bbbbbb;
    vertical-align: top;
    padding: 0.5em;
}

table.rdf th
{
    font-weight: bold;
}

table.rdf ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* end rdf */





div.tabContent div.entries div.childItem.discontinued,
div.tabContent div.relatedItem.discontinued,
div.tabContent .showOnlyWhenShowingDiscontinued,
div.tabContent.showDiscontinued .hideWhenShowingDiscontinued
{
    display: none !important;
}

div.tabContent.showDiscontinued div.entries div.childItem.discontinued,
div.tabContent.showDiscontinued div.relatedItem.discontinued,
div.tabContent.showDiscontinued .showOnlyWhenShowingDiscontinued,
div.tabContent .hideWhenShowingDiscontinued
{
    display: inherit !important;
}



@media only screen and (device-width: 768px)
{
    /* ipad only */
    div.tabContent div.index
    {
        right: 1px;
    }
}




@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
/* ReSharper disable once CssObsolete */
only screen and (min-device-pixel-ratio: 2) 
{
    /*div.layer div.tabPlaceholder,
    div.layer.dark-nav div.itemPanel div.background
    {
        background-image: url('../../images/common/noise@2x.png');
        background-size: 73px 197px;
    }*/
    
    
    
    
    div.tools span.icon
    {
        background-image: url('../../images/icons/barChart.200x200.png');
        background-size: 100px 100px;
    }

    div.tools span.icon.esd-bar
    {
        background-image: url('../../images/icons/barChart.200x200.png');
        background-size: 100px 100px;
    }

    div.tools span.icon.esd-map
    {
        background-image: url('../../images/icons/map.200x200.png');
        background-size: 100px 100px;
    }

    div.tools span.icon.esd-table
    {
        background-image: url('../../images/icons/table.200x200.png');
        background-size: 100px 100px;
    }

    div.tools span.icon.lga-inform
    {
        background-image: url('../../images/icons/lgInform.200x200.png');
        background-size: 100px 100px;
    }

    div.tools span.icon.esd-recordsRetention
    {
        background-image: url('../../images/icons/recordsRetention.200x200.png');
        background-size: 100px 100px;
    }

    div.tools span.icon.esd-powersAndDuties
    {
        background-image: url('../../images/icons/powersDuties.200x200.png');
        background-size: 100px 100px;
    }

    div.tools span.icon.esd-openDataSchemas
    {
        background-image: url('../../images/icons/openDataSchemas.200x200.png');
        background-size: 100px 100px;
    }
    
    div.tools span.icon.esd-openDataDatasets
    {
        background-image: url('../../images/icons/openDataDatasets.200x200.png');
        background-size: 100px 100px;
    }
    

    div.contextBox span.icon
    {
        background-image: url('../../images/icons/barChart.64x64.png');
        background-size: 32px 32px;
    }

    div.contextBox span.icon.esd-bar
    {
        background-image: url('../../images/icons/barChart.64x64.png');
        background-size: 32px 32px;
    }

    div.contextBox span.icon.esd-map
    {
        background-image: url('../../images/icons/map.64x64.png');
        background-size: 32px 32px;
    }

    div.contextBox span.icon.esd-table
    {
        background-image: url('../../images/icons/table.64x64.png');
        background-size: 32px 32px;
    }

    div.contextBox span.icon.tools
    {
        background-image: url('../../images/icons/tools.64x64.png');
        background-size: 32px 32px;
    }

    div.contextBox span.icon.lga-inform
    {
        background-image: url('../../images/icons/lgInform.64x64.png');
        background-size: 32px 32px;
    }

    div.contextBox span.icon.esd-recordsRetention
    {
        background-image: url('../../images/icons/recordsRetention.64x64.png');
        background-size: 32px 32px;
    }

    div.contextBox span.icon.esd-powersAndDuties
    {
        background-image: url('../../images/icons/powersDuties.64x64.png');
        background-size: 32px 32px;
    }

    div.contextBox span.icon.esd-openDataSchemas
    {
        background-image: url('../../images/icons/openDataSchemas.64x64.png');
        background-size: 32px 32px;
    }

    div.contextBox span.icon.esd-openDataDatasets
    {
        background-image: url('../../images/icons/openDataDatasets.64x64.png');
        background-size: 32px 32px;
    }
}