/*
    3.0_2.screen-components
    
    - basic reusable items which are simple
    - components cannot contain child components or modules
    - components can use the following prefixes:
      - cp    component
      - cta   call to action
      - hs    hotspot
    
    Component styles should be grouped together with a heading name
    and description. Styles within each group should then appear as
    they do in the markup including indentation.
    
    Component definitions should be ordered alphabetically.
    
    See example below. 
    (Note: A space has been added next to * to prevent this comment block from breaking.
    This would be removed when used)

/ *
	cp-componentName
	Description of component
----------------------------------------* /
.cp-componentName {}
	.cp-componentName-member {}
	.cp-componentName a {}

/ *
	cp-secondComponentName
	Description of component
----------------------------------------* /
.cp-secondComponentName {}
	.cp-secondComponentName-member {}
	.cp-secondComponentName a {}


*/


/*
    cp-filter
    the filter bar used in listing pages
--------------------------------------------------*/
.cp-filter {
    padding: 0 0 16px;
    position: relative;
}
    /* bring form inline */
    .cp-filter .button-group,
    .cp-filter .field-item,
    .cp-filter .cp-filter-separator {
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: middle;
    }
    .cp-filter h2 {
        margin: 0;
        padding: 0 0 12px;
    }
    .cp-filter-feed {
        display: block;
        font-size: 0.8em;
        position: absolute;
        text-decoration: none;
        top: 0;
        right: 10px;
    }
    .cp-filter-feed:active,
    .cp-filter-feed:hover {
        text-decoration: none;
    }

        .cp-filter-feed .ico {
            margin-right: 3px;
        }
    .cp-filter .field-item {}
        .cp-filter label {
            /* visuallyhidden*/
            position:absolute !important;    
            clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
            clip: rect(1px, 1px, 1px, 1px);        
        }
        .cp-filter select {
            width: 140px;
        }
    .cp-filter .cp-filter-separator {
        color: #005DAB;
        font-size: 1.17em;
        font-weight: bold;
        line-height: 1.145;
        padding: 0 6px;
    }
    .cp-filter .button-group {
        clear: none;        
        padding: 0 0 0 5px;
    }
        .cp-filter button span {
            padding-right: 9px;
        }
        .cp-filter button span.btn-l {
            padding-right: 0;
            width: 9px;
        }

.cp-headerMessage{
    background: #005DAB;
    overflow:hidden;
    height:0;
}
.no-js .cp-headerMessage{height:22px;}
    .cp-headerMessage-content{
        width:940px;
        margin:0 auto;
        position:relative;
        padding:4px 0 2px 0;
    }
        .cp-headerMessage a{
            color:#6caee0;
            text-decoration: none;
            font-size:1em;
            text-decoration: none;
        }
        a.cp-headerMessage-link{
            margin:0;
            padding:0 8px 0 0;
            border-right:1px solid #6caee0;
            float:left;
            line-height:1;
        }
        .cp-headerMessage p{
            margin:0;
            padding:0;
            color:#fff;
            line-height:1;
            float:left;
            margin:0;
            padding-left: 8px;
        }
        .cp-headerMessage a.cp-headerMessage-close{
            position:absolute;
            right:0;
            top:4px;
            color:#fff;
            font-weight:bold;
        }
        .cp-headerMessage a:hover{
            color:#FC911A;
        }
/*
    iconlist
    added to a the RTE with a rich snippet
--------------------------------------------------*/
.iconlist {/*ul*/
    margin: 0 0 16px;
    padding: 0;
}
    .iconlist li {
        font-weight: bold;
        list-style: none outside none;
        margin: 0;
        padding: 0 0 16px;
    }
    .iconlist li a,
    .iconlist li a:hover {
        text-decoration: none;
    }
    /* for this to work the img needs to be 16x16 
    (or just consistent for each item in the list) */
    .iconlist li img {
        display: inline-block;
        margin-right: 10px;
        vertical-align: text-bottom;
    }


/*
    cp-inputAndButton
--------------------------------------------------*/
.cp-inputAndButton {
    position: relative;
    zoom: 1;
}
.cp-inputAndButton:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
    div.cp-inputAndButton .field-item {
        float: left;
    }
    div.cp-inputAndButton .button-group {
        clear: none;
        text-align: right;
    }
        div.cp-inputAndButton .button-group input {
            width: 130px;
        }

/*
    cp-imageAndCaption
    floated image right to sit alongside text within an article
    of some sort with a caption underneath
---------------------------------------------------------------*/
.cp-imageAndCaption {
    display: inline;
    float: right;
    margin: 0 0 16px 16px;
    width: 220px;
}
    .cp-imageAndCaption img {
        display: block;
        max-width: 220px;
        min-width: 100%;
        height: auto;
    }
    .cp-imageAndCaption span {
        display: block;
        background: #e6e7e8;
        font-style: italic;
        padding: 3px 9px;
    }

.cp-imageAndCaptionTsmall { width: 170px;}
.cp-imageAndCaptionTleft { float: left; margin: 0 16px 16px 0; }

/*
    cp-imageAndInfo
    floated image left to sit alongside text 
---------------------------------------------------------------*/
.cp-imageAndInfo {
    width: 340px;
    margin-bottom:10px;
}
    .cp-imageAndInfo img {
         float: left;
         padding-bottom: 10px;
    }
    .cp-imageAndInfo .cp-imageAndInfo-image {
         width:100px;
         min-height:53px;
         float:left;
    }
    .cp-imageAndInfo .cp-imageAndInfo-info {
         float: left;
         width: 220px;
         padding: 2px 0 10px 20px;
    }

/*
    cp-imageAndInfo
    floated image right to sit alongside text with
    border at bottom 
---------------------------------------------------------------*/
.cp-imageAndInfoRhs {
    border-bottom: 1px solid #bcbec0;
    margin-bottom: 12px;
}
    .cp-imageAndInfoRhs-image {
         float: right;
         margin: 5px 0 10px 5px;
    }


/*
    cp-searchBox
    grey searchbox with magnifier icon
    on the right
----------------------------------------*/
.cp-searchBox {
    background: #4e4e4e;
    position: relative;
    text-align: left;
    width: 162px;
}
    .js .cp-searchBox label {
        /* visuallyhidden*/
        position:absolute !important;    
        clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
        clip: rect(1px, 1px, 1px, 1px);        
    }
    .no-js .cp-searchBox label {
        color: #fff;
        left: -72px;
        position: absolute;
        top: 5px;
    }
    .cp-searchBox input {
        background: #4e4e4e;
        border: solid 1px #4e4e4e;
        color: #fff;
        font-weight: bold;
        margin: 0 3px;
        padding: 6px 0 6px;
        width: 125px;
    }
    .cp-searchBox .button {
        background: #4e4e4e url(/cms_images/sprites.png) no-repeat 0px -19px;
        border: none;
        height: 25px;
        position: absolute;
        right: 2px;
        text-indent: -9999px;
        top: 2px;
        width: 26px;
    }
    .ie6 .cp-searchBox .button {
        border: solid 1px #4e4e4e;
        padding-left: 30px;
    }
        .cp-searchBox button span {
            background: none;
        }
    .cp-searchBox-advanced {
        display: block;
        position: absolute;
        bottom: -19px;
        right: 5px;
    }


/*
    cta-cookie-button
----------------------------------------*/
.cta-cookie-button
{
    text-align:right;
}