/**
 * PLEASE READ THIS FIRST
 * All styles used within this stylesheet should conform to the standards defined within Creative's Style Guide
 * Some elements in this styleguide rely on the modernizr.com javascript to function correctly
 *
 * To leverage the cascading nature of CSS, please place new styles into the appropriate locations within this sheet:
 * 1) Reset styles
 * 2) Base html elements
 *    - body
 *    - h1 - h4
 *    - p
 *    - a
 *    - table
 *    - lists
 *    - i, em, b, strong
 *    - sup
 *    - input, select, textarea, label
 * 3) Base html element modifiers
 *    - body
 *    - table
 *    - lists
 *        - separatedList
 *        - numberedFeature
 *        - quaternaryCta
 *        - paginator
 *        - sitemap
 *        - leadons
 *        - separatedList
 * 4) Layout
 *    - lclnv
 *    - cntnt
 *    - mncntnt
 *    - columns
 *    - toolbar
 *    - footer
 * 5) Layout Widgets
 *    - int'l dropdown
 *    - links in header
 *    - Browse Categories Ribbon
 *    - Browse Container
 *    - fma (regionalized content)
 *    - features (regionalized content)
 *    - article (featured artcles/homepage articles)
 *    - landingLine
 *    - rightCol
 *    - feature of the week
 *    - menu selectors
 *    - autocomplete / autosuggest
 *    - pricebars
 *    - IE upgrade bar
 * 6) Sprites
 * 7) Buttons
 * 8) Presentation Logic Exceptions
 * 9) Specific Classes
 * 10) Helper styles
 */



/**
 * SECTION 1 Reset styles
 *
 * CSS Reset - v1.0 | 20080212
 * @see http://meyerweb.com/eric/tools/css/reset/
 * - Please DO NOT change these styles
 */

html,body,header,footer,nav,section,article,aside,audio,video,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body {line-height:1}
ol,ul {list-style:none}
blockquote,q {quotes:none}
blockquote:before,blockquote:after,
q:before,q:after {content:'';content:none}
:focus {outline:0}
ins {text-decoration:none}
del {text-decoration:line-through}
table {border-collapse:collapse;border-spacing:0}



/**
 * SECTION 2 Base elements
 *
 * Base element definitions
 * - These are the base styles used by elements
 * - Please DO NOT change these styles unless you understand how much the whole site will change
 *
 * The following sub-sections exist:
 *    body
 *    h1 - h4
 *    p
 *    a
 *    table
 *    lists
 *    i, em, b, strong
 *    sup
 *    input, select, textarea, label
 */

* {text-rendering: auto}

table {
    width:100%;
    margin:25px 6px 25px 0;
}
    th, td {
        text-align:left;
        padding:5px 25px 5px 0;
    }
    th {
        font-size:1.18em;
        margin:19px 0 5px 0;
        font-weight:normal;
    }
    th a {color:#2a3333}

    tr {border-top:dotted #a3a4a7 1px}
        tr:first-child {border-top:0}
        tr.active td {background:#daebec}

/* This makes borders in FF behave as in Safari & Chrome */
input::-moz-focus-inner {
    border:0;
    margin:0;
}

input, select, textarea {
    color:#666;
    padding:4px 5px 3px;
    vertical-align:middle;
    border:solid 1px #e3e3e3;

    /* For some odd reason these classes need to have the font-family redefined for it to stick */
    font-family:"Lucida Grande", Verdana, Corbel, "Bitstream Vera Sans", "DejaVu Sans", sans-serif;
}

    input[type="radio"],
    input[type="checkbox"] {border:0}

        input[type="radio"] {margin:0 9px 3px 0;width:13px;height:13px;}
        input[type="checkbox"] {margin:0 8px 3px 0}

    input[type="image"],
    input[type="file"] {border:none}

    input:focus,
    select:focus,
    textarea:focus {border-color:#a3a4a7}

    input[type="image"]:focus,
    input[type="file"]:focus {border:none}

    textarea {
        font-size:1em;
        vertical-align:top;
    }

label {margin-right:8px}

/**
 * SECTION 3 Base html element modifiers
 *
 * This section contains logic that applies modifiers (usually classes) to base elements to have them appear differently
 * The following exceptions occur:
 *    body - adding the background image, class dependent
 *    ul
 *        navigation
 *        sitemap
 *        separatedList
 *        numberedFeature
 *        quaternaryCta
 *        paginator
 *        thumbnailList
 *    table
 *        pivot
 *        twoCol - primarily used in forms where field name is on the left
 */

/* Certain pages have a background image to break-up the whitespace far to the right */
#cntnt-wrapper {background: #FFFFFF}
#cntnt-wrapper.homeBgA {background: #FFFFFF}
#cntnt-wrapper.homeBgB {background: #FFFFFF}
#cntnt-wrapper.homeBgC {background: #FFFFFF}
#cntnt-wrapper.homeBgD {background: #FFFFFF}
#cntnt-wrapper.homeBgE {background: #FFFFFF}

/* Not every table needs to be 100% width*/
table.noWidth {width:auto;margin:0}


li.localNavMenuHeader {
    list-style-type:none;
}


/* Homepage list */
ul.listml0 {
    list-style-position: inside;
    padding-left: 1.1em;
    text-indent: -1.1em;
}

ul.listml0 li {
    margin-left: 0px;
    margin-bottom: 10px;
}

/* Ordered list for license agreements */
#list ol li {
    font-size: 15px;
    font-weight: bold;
    padding: 5px;
    margin-left: 10px;
}
    #list ol li ol li {
        list-style-type: lower-alpha;
    }

    #list ol li ol li ol li  {
        list-style-type: lower-roman;
    }

    #list ol li p, #list ol li ol li, #list ol li ul {
        font-size: 12px;
        padding: 5px;
        font-weight: normal;
    }

/* Numbered feature list */
/* TODO:only used on application/views/scripts/index/logged-out.phtml & /app_lib/lib_articles.inc.php */
.numberedFeature .liNum {
    font-size:1.63em;
    color:#a3a4a7;
    vertical-align:text-bottom;
    float:left;
}
    .numberedFeature p {
        margin-left:20px;
    }



/* Paginator specific styles */
.paginator ul.separatedList {display:inline}

    /* OMFG - an exception to an exception to an exception */
    .paginator ul.separatedList li {
        padding:0 5px;
        vertical-align:middle;
    }
    .paginator {
        padding:5px;
    }
    .paginator.big {
        margin:36px 0 12px 0;
        padding:10px;
        height: 15px;
    }

    form + .paginator {
        margin-top:1em;
    }


/* Lists containing thumbnail images */
ul.thumbnailList {margin-top:10px}

    ul.thumbnailList li {margin-top:12px}
        ul.thumbnailList li:first-child {margin-top:0}

    ul.thumbnailList img {
        vertical-align:middle;
        margin-right:12px;
    }

    ul.thumbnailList li .count {color:#2A3333}

/* Extended License List */
ul.extendedLicenses {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul.extendedLicenses li {
    margin-left:0;
}

ul.extendedLicenses li:before {
    content: '+ ';
}

/* Let the exceptions begin */
.sitemap li.localNavMenuHeader div.menuArrow {
    display:none;
}

ul.sitemap li {
    margin-left:0;
}

    ul.sitemap > li {
        width:164px;
        float:left;
    }


ul.trainingManual {margin-bottom:15px}

/* Pivot tables */
    table.pivot th img {vertical-align:-35%}
    table.pivot td {border-top:1px dotted #a3a4a7}
    table.pivot td:first-child {font-weight:bold}
    table.pivot td:last-child {padding-right:0}
    table.pivot tr:last-child td {border-bottom:1px dotted #a3a4a7}


/* For tables that don't use the "H3" style headers */
table.smallHdr th {font-size:1em}


/* Two column table, typically seen in forms with labels on the left */
table.twoCol {width:80%}
    table.twoCol tr {border:none}
    table.twoCol td {width:70%;padding-right:8px}
    table.twoCol td:first-child {width:30%}
/* Table classes for referrals */
table.noTopMargin {margin-top:0px}
tr.noBorder {border-top:none}
td.threeCol {padding:5px 37px 5px 0}
/**
 * SECTION 4 Layout
 *
 * Template / Layout styles
 * - These styles are what power the layout elements of the site
 * - If we're really organized they'll also go from top-to-bottom of the page
 */


/* Local navigation */
#lclnv {
    float:left;
    width:180px;
}

    #lclnv ul {
        list-style-type:none;
        margin:0;
        padding-right:9px;
        padding-bottom: 20px;
    }

    #lclnv > div {margin-left:-10px}

        /* Local nav sub menus */
        #lclnv li {
            padding:3px 0 0 0;
            margin:0;
        }

        #lclnv li a {
            display:inline-block;
            padding-left:5px;
            padding-bottom:3px;
        }
            #lclnv li a:hover {text-decoration:none}

        #lclnv li > ul {
            margin-left:-5px;
            padding-right:0;
        }
            #lclnv li > ul > li > ul{
                padding-bottom: 0;
            }

        #lclnv .menuArrow {
            width:20px;
            text-align:center;
            float:right;
        }

            #lclnv .menuArrow:hover,
            .navMenuHeader {cursor:pointer}

        #lclnv .localNavMenuHeader li {margin-left:18px}

        #lclnv .localNavSubMenu {display:none}

        #lclnv .localNavMenuHeader.active .localNavSubMenu {display:block}

        #lclnv .pageActive > a,
        #lclnv .active > a {
            color:#2a3333;
            font-weight:bold;
        }

        .localNav {
                width: 190px;
                float: left;
                background: url(/static/images/backgrounds/navbgA.jpg) no-repeat top left;
                /* remove the following once there is content in the local nav */
                height: 906px;
        }

/* Main container for content */
#cntnt {
    width:980px;
    padding: 25px 0 60px 25px;
    min-height: 400px;
}

.fullPage#orderView {
    position: absolute; 
    height: 100%; 
    width: 100%; 
    background-color: #fff;
}

/* Ensuring a line graphic always exists whenever a local nav is displayed */
#lclnv + #mncntnt {
    background:url(/static/images/layout/localNavBg.gif) no-repeat left top;
    padding-left:25px;
}


/* This div contains all of the content of a page that is beside a local nav */
#mncntnt {
    float:left;
    width:750px;
}

/* Two-Column Uneven layout */
div.twoColUneven div.col1 {
    width:545px !important;
    margin-right:0;
    padding-right:25px;
    float:left;
}
div.twoColUneven div.col2 {
    width:180px;
    float:left;
}

div.extendedPage {width:1210px}

/* Landing pages layout for a signed in user */
#siLanding {
    width:955px;
}

    #siLanding > div.col1 {
        width: 650px;
        margin-right: 25px;
        float: left;
    }

    #siLanding > div.col2 {
        width: 280px;
        margin-top:25px;
        float: left;
    }


/* Landing pages layout - its like the twoColuneven but with different dimensions */
#landing {
    width: 955px;
    margin-top: 25px
}
    #landing > div.col1 {
        width: 650px;
        margin-right: 25px;
        float: left;
    }
    #landing > div.col2 {
        width: 280px;
        float: left;
    }

/* Columns on the homepage */
div.cols > div {
    width:289px;
    float:left;
}
    div.cols {width:650px}

    .cols #col1 {padding-right:25px}

    .cols #col2 {padding-left:25px}



/* The omni-present (except IE6) toolbar at the bottom of every page */
#toolbar {
    /* Minimum width is 980, but we need to account for spacing on the left of the toolbar */
    min-width:955px;
    height:43px;
    z-index:5000;
    position:fixed;
    left:25px;
    right:25px;
    bottom:0;
    background:#2a3333;
    -moz-border-radius:5px 5px 0 0;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    border-radius:5px 5px 0 0;
    line-height:43px;
}
    #toolbar a {
        color: #e3e3e3;
    }
    #toolbar a strong {
        color: white;
    }
    #toolbar a:hover, #toolbar a:hover span, #toolbar a:hover strong {
        color: white;
        text-decoration: underline;
    }

        #toolbar ul {
            float:left;
            margin:0;
            vertical-align:0;
            list-style-type: none;
        }

    /* The Pop-up navigation */
    #toolbar ul.navigation li {margin-left:0}

        #toolbar ul.navigation li span,
        #toolbar ul.navigation li a {
            display:inline-block;
            color: #e3e3e3;
        }
        #toolbar ul.navigation li span:hover {
            color: white;
        }

        #toolbar .sptWhiteSeparatorVertical:first-child {margin:0 12px 0 0; }
        #toolbar .sptWhiteSeparatorVertical {margin:0 12px; }

    #tbContentLeft {
        margin-left:12px;
        float:left;
    }

    #tbContentRight {
        text-align:right;
    }

    .tbNotification {font-size:80%}





/**
 * SECTION 5 Layout Widgets
 *
 * These are the styles specifically for the formatting of global widgets
 *
 * The following sections exist here:
 *    - basic search form
 *    - int'l dropdown
 *    - links / cta's
 *    - regionalized content (FMA, buckets, featured article)
 *    - rightCol
 *    - landingLine
 *    - IE upgrade warning bar
 */

/**
 * Search bar common styles
 */
.searchBar-input,
.searchBar .menuSelector,
.searchBar-submit {
    float:left;
    height: 26px;
}

.searchBar-input{
    border:0;
    font-size: 1em;
    background:white;
    -webkit-border-top-left-radius: 2em;
    -webkit-border-bottom-left-radius: 2em;
    -moz-border-radius-topleft: 2em;
    -moz-border-radius-bottomleft: 2em;
    border-top-left-radius: 2em;
    border-bottom-left-radius: 2em;
}
.searchBar-input div{
margin-left:11px;
}
.searchBar-input input{
    height: 24px;
    margin:0;
    margin-top: 1px;
    border: 0;
    padding: 0;
    font-size:1em;
    width: 168px;
}

.searchBar-submit input[type="submit"]{
    height: 26px;
    padding: 0 17px 0 15px;
    margin-left: 1px;
    border: 0;
    -webkit-border-top-right-radius: 2em;
    -webkit-border-bottom-right-radius: 2em;
    -moz-border-radius-topright: 2em;
    -moz-border-radius-bottomright: 2em;
    border-top-right-radius: 2em;
    border-bottom-right-radius: 2em;
}
.searchBar-submit input[type="submit"]:hover{ border: 0; }

.searchBar-submit input:hover { border: 0; }

.majorTerms, .collectionFma { float: left;}
.majorTerms { width: 747px; }

.majorTerms ul li {
    font-size: 1em;
    margin-left: 0;
}

.collectionFma { width: 160px; }
.collectionFma ul {
    margin-top:2px;
    margin-right:0
}
.collectionFma ul li{
    font-size: 1em;
    margin-bottom: 3px;
}
.collectionFma span{
    font-size: 1.06em;
    font-weight: bold;
}

/* Regionalized content styels - FMA */
#fma {
    width:980px;
}

    /* Homepage logged-out */
    #fma .primary {
        width:955px;
        height:375px;
        margin-right:25px;
    }

    /* Homepage logged-in and filetype landing pages */
    #fma .secondary {
        width:650px;
        height: 375px;
        float:left;
        margin-right:25px;
    }

        #fma .slideShow {position:absolute}

        #fma .chicklet {
            width:7px;
            height:8px;
            background-position:-137px -31px;
            cursor:pointer;
            float:none;
            margin-left:2px;
            margin-bottom:2px;
        }

            #fma .chicklet:hover {
                width:9px;
                height:9px;
                background-position:-144px -31px;
            }

            #fma .chickletSelected {
                width:11px;
                height:12px;
                background-position:-153px -31px;
                cursor:pointer;
                float:none;
            }

    /* Homepage logged-in and filetype landing pages */
    #fma .tertiary {
        float: left;
        height: 192px;
    }

        #fma .tertiary:nth-child(3) {padding-top:21px}

        #fma .tertiary img {
            height:153px;
            width:270px;
        }

        #fma .tertiary h2 {padding-left:10px}

        #fma .tertiary .more {
            margin-top:12px;
            margin-right:10px;
        }

        #fma .tertiary .moreHeader {height:153px}

        #fma .tertiary .moreBox {
            border-left:1px solid white;
            border-right:1px solid white;
            background:white;
            position:relative;
            z-index:1000;
        }

            #fma .tertiary .moreBox.addBorder {
                border:1px solid #e3e3e3;
                border-width:0 1px;
            }

            #fma .tertiary .moreBox h2 {
                margin-top:10px;
                margin-bottom:0px;
                width:200px;
            }

            #fma .tertiary .moreText {
                clear:both;
                z-index:1001;
                position:relative;
                background-color:#fff;
                line-height:normal;
                padding: 12px;
                border-left:1px solid #e3e3e3;
                border-right:1px solid #e3e3e3;
                width: 254px;
            }

            #fma .tertiary .fmaShadow {
                background:url(/static/images/backgrounds/tertiaryFMAdropshadow.png) repeat-x left bottom;
                height:17px;
                position:relative;
                z-index:1000;
            }

.fma-link:hover {text-decoration:none}

/* Regionalized content styels - Features (houses buckets) */
    #feature h3 {
        margin-top:6px;
        line-height:normal;
    }

    #feature .container, .bucketContainer .container {
        width:190px;
        margin:0 25px 25px 0;
        float:left;
        height:250px;
    }

    .bucketContainer h3 {
        font-size: 1.25em;
        line-height:1.3em;
        min-height: 2.6em;
    }

/* Regionalized content styels - Featured Article */
#article {
    width:405px;
    float:left;
}

    #article h2 {margin-top:0}

    #article h3 {
        margin-top:0;
        margin-bottom:10px;
    }

    #article p {margin-bottom:10px}

    #article div.leftSide {
        width:190px;
        float:left;
    }

    #article div.rightSide {
        width:190px;
        float:right;
    }

    #feature div.container img,
    #article div.leftSide img {
        border:5px solid #e3e3e3;
        height:95px;
        width:180px;
    }


    div.featureOfTheWeek h2 {
        margin-top: 0;
        margin-bottom:11px;
    }

.homepageArticle {
    width: 280px !important;
}

.homepageArticle h2 {
    margin-top: 20px !important;
}

.homepageArticle h3 {
    margin: 5px 0px -5px 0px !important;
}

.homepageArticle img {
    border: 5px solid #E3E3E3;
}

/**
 * GENERIC MENU SELECTOR STYLING
 */
.menuSelector {
    float:left;
    position: relative;
}

.menuSelector-header {
    height: 40px;
    border-width: 1px;
    border-style: solid;
    border-bottom-width: 0;
    cursor:pointer;
    position:relative;
}

.menuSelector-header span {
    display: inline-block;
    zoom: 1;
    margin: 0 5px;
}

.menuSelector-content {
    border: 1px solid #e3e3e3;
    color: #2a3333;
    background: #ffffff;
    position: absolute;
}

.menuSelector.ims-up .menuSelector-header {
    border-top-width: 0;
    border-bottom-width: 1px;
}

.menuSelector.ims-up .menuSelector-content {
    border-bottom-width: 0;
}

.menuSelector-content ul {
    display:block;
    margin: 0;
    padding: 6px;
}

.menuSelector-content ul li {
    margin: 0;
    display:block;
    padding-top: 2px;
    color:#008595;
    white-space: nowrap;
    cursor: pointer;
}

.menuSelector-content ul li.active {
    color: #2A3333;
    font-weight: bold;
}

.menuSelector-content ul li label {cursor: pointer;}

.menuSelector-content li:hover {background:#f3f3f3}
/** END GENERIC MENUSELECTOR */

/**
 * International Dropdown
 */
.dropDownMenuActive {
    background-color:white;
    padding:5px;
}

.dropDown > a {
    color:white;
    margin-right:13px;
    padding:5px;
}

.dropDown > a:hover {
    cursor:pointer;
    text-decoration:none;
}

.dropDown > ul {
    background-color:white;
    border:solid;
    border-color:#E3E3E3;
    border-top-color:white;
    border-width:1px;
    list-style-type:none;
    margin-top:2px;
    margin-left:0px;
    padding:5px;
}

.dropDown > ul > li {
    margin-left:5px;
}

    /**
     * FILE TYPE MENUSELECTOR
     */

        #typeSelector .menuSelector-header {
            height: 26px;
            line-height: 26px;
            border: 0;
        }

        #typeSelector.active .menuSelector-header .ctaGreyArrowDown{ background-position:-37px -31px; }
        #typeSelector .menuSelector-content { text-align: left;}
        #typeSelector .menuSelector-content ul li { padding-bottom: 2px; }
        #typeSelector .menuSelector-content ul li:first-child { margin-bottom: 5px; }


    /**
     * MY ACCOUNT MENU SELECTOR
     */
        #toolbar .menuSelector-header {
            color: #ffffff;
            background-color: #2A3333;
            border-color: #2A3333;
            height: 43px;
            line-height: 43px;
            padding: 0 12px;
        }

        #toolbar .menuSelector-header span {
            display:inline;
            margin:0;
        }
        #toolbar .menuSelector-content ul li span:hover,
        #toolbar .menuSelector-header span:hover {text-decoration: underline;}
        #toolbar .menuSelector-header img {
            vertical-align:middle;
            margin:0 0 0 6px;
        }
        #toolbar .menuSelector.active .menuSelector-header .ctaWhiteArrowUp{ background-position:-29px -31px; }
        #toolbar .menuSelector.active .menuSelector-header span,
        #toolbar .menuSelector .menuSelector-content { color: #2A3333; }
        #toolbar .menuSelector .menuSelector-content li a,
        #toolbar .menuSelector .menuSelector-content li span {
            color: #008595;
            padding: 3px 0;
            line-height: 1.6em;
            display:block;
        }
        /* If you open a submenu of a menu, things get a bit wonky with the hover
           backgrounds - Add a background to the div so it covers the parent's hover background */
        #toolbar .menuSelector-content li.np div {background-color:#fff}
        #toolbar .menuSelector-content li.np li {padding-left:18px}
        #toolbar .menuSelector-content li.np span {
            background-color:#fff;
            padding-right:12px;
            padding-left: 17px !important; /* IMPORTANT IS TOXIC :( */
            background-position: 6px 9px;
        }
        #toolbar .menuSelector-content .np span:hover {background-color:#f3f3f3}
        #toolbar .menuSelector-content ul { float: none; }

/* Autocomplete/augosuggest styles */
div.autocomplete {
    width:300px;
    border:1px solid #999;
    background:#fff;
    cursor:default;
    text-align:left;
    max-height:350px;
    overflow:auto;
    overflow-x:hidden;
    position:relative;
    /** Need to get over certain arbitrary z-indexes */
    z-index: 6010;
}
    div.autocomplete .selected {
        background:#f0f0f0;
    }
    div.autocomplete div {
        padding:2px 5px;
        white-space:nowrap;
    }
    div.autocomplete strong {
        font-weight:normal;
        color:#008595;
    }
    div.autocomplete ul li.selected {
        color:#2a3333;
        font-weight: normal;
    }

div.agreementContent {
    width:600px;
    max-height:350px;
    overflow:auto;
    border:1px solid #999;
}

/* IE Upgrad warning bar */
.upgradeYourBrowserPls {
    position: absolute;
    top: 120px;
    width: 100%;
    text-align: center;
    height: 40px;
    line-height: 40px;
    background-color: #df3e21;
    color: white;
    filter: alpha(opacity=80);
    z-index: 51;
}

.upgradeYourBrowserPls a {
    color: white;
    text-decoration: underline;
}

.upgradeYourBrowserPls div {
    background:url(/static/images/sprites/spritefacet.png) no-repeat;
    margin-top: 14px;
    margin-right: 15px;
    float: right;
    width:11px;
    height:12px;
    background-position:-74px -28px;
}
.upgradeYourBrowserPls div:hover { cursor:pointer; }


/* Progress Bars */

div.progressBar {
    width: 100%;
}

    div.pbWrapper {
        background-color: #cccccc;
        margin: 0 5px;
        height: 80%;
    }

        div.pbBar {
            text-align: center;
            height: 100%;
            background-color: blue;
            color: #22EEEE;
            width: 0px;
        }

/* Tabs */
div.tabContentContainer {
    padding: 12px;
    border-top: 1px solid #e3e3e3;
    clear: both;
}

.tabHead {
    float: left;
    padding: 8px 12px;
    border-top: 1px solid white;
    color: #008595;
    cursor: pointer;
}

    .tabActive {
        border: 1px solid #e3e3e3;
        border-bottom: 1px solid #fff;
        margin-bottom: -1px;
        color: #2A3333;
    }

    .tabHead:hover {
        text-decoration: underline;
        color: #0099bb;
    }

    .tabActive:hover {
        text-decoration: none;
        color: #2A3333;
        cursor: default;
    }

/**
 * AJAX POP-UP WINDOW
 * @see js/ajax_widget_window.js
 */
#ajaxWin{
    position:absolute;
    border:solid 1px #666666;
    background:#fff;
    z-index:10001;
}
#ajaxWinWrapper{
    border:solid #666666 3px;
    padding: 12px;
}

#ajaxWin .hdr, #ajaxWin .ftr{
    clear:both;
    background:#fff;
}

    #ajaxWin .hdr{
        font-size:1.35em;
        line-height:1.15em;
        border-bottom: 1px dotted #a3a4a7;
        padding-bottom: 6px;
        margin-bottom: 6px;
    }

    #ajaxWin .ftr{
        text-align:right;
        vertical-align:middle;
        margin-top:8px;
    }

#ajaxWin td{
    padding-top:.6em;
    font-size:11px;
}

#ajaxWin .zeroTP{
	padding-top:0;
}

    /* sprite-ified close button */
    #AdvancedSearchContainer .close_btn,
    #ControlPanelMain .close_btn,
    #ajaxWin .close_btn,
    .modalClose {
        background:url(/static/images/sprites/btn_close_sprite.gif) no-repeat;
        background-position:0 0;
        width:24px;
        height:24px;
        cursor:pointer;
        position:absolute;
        top:0px;
        right:0px;
        margin: 10px 10px 0 0;
    }
        #AdvancedSearchContainer .close_btn:hover,
        #ControlPanelMain .close_btn:hover,
        #ajaxWin .close_btn:hover,
        .modalClose:hover {
            background-position:-24px 0
        }

#ajaxWin .txt_sm{
    font-size:11px;
}

#ajaxWin .nw{white-space:nowrap}
#ajaxWin .nw input{vertical-align:bottom}

#ajaxWinBG{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background-color:#000;
    z-index:10000;
    opacity:.5;
}

/**
 * Download table.
 */
#downloadTable{
    clear:both;
    margin:0.5em 0 0 0;
}

#downloadTable td {
    border-top: 1px dotted #a3a4a7;
}

#downloadTable th, #extendedLicenseInfo, #downloadTable td {
    padding-left: 6px;
}

.downloadTableChild:hover, .downloadTableLastChild:hover {
    cursor: pointer;
}

.downloadTableChild {
    text-align:left;
}

.downloadTableLastChild {
    padding-right: 6px !important;
    text-align:right;
    width:50px;
}

/**
 * SECTION 6.1 Sprites
 *
 *Note:If you change the following rule you must also change it in the ie6.css
 *
 * Naming conventions for sprite classes are as follows:
 * - type of sprite (spt = generic sprite, cta = call to action, ico = icon, etc)
 * - colour
 * - Name of graphic
 * - Optional orientation/direction
 */

 .sptSeparatorGreyPipe {
    background: url('/static/images/sprites/pipe.png') no-repeat;
    height: 19px;
    margin: 0 14px 0 -16px;
    width: 4px;
 }
.ctaBlueArrowRight, .ctaBlueArrowDown, .ctaBlueArrowUp, .ctaWhiteArrowDown, .ctaWhiteArrowUp, .ctaGreyArrowUp, .ctaBlueBoxArrowRight, .ctaGreyBracketRight, .sptWhiteSeparatorVertical, .sptGreySeparatorVertical, .icoWhiteShoppingCartEmpty, .icoWhiteSitemailEmpty, .icoGreySitemailEmpty, .icoGreyShoppingCartEmpty, .icoWhiteBriefcase, .icoGreyBriefcase, .ctaGreyArrowDown, .ctaCharcoalArrowDown, .icoWhiteRss, .ctaGreyArrowRight, .icoWhiteMagnifyingGlass, .icoGreySendSiteMail, .ctaBlueBoxArrowLeft, .ctaBlueBoxFirstPage, .ctaBlueBoxLastPage, .chicklet, .chickletSelected {
    background:url(/static/images/sprites/shellsprite.png) no-repeat;
}
    .ctaBlueArrowDown {
        width:8px;
        height:4px;
        background-position:-44px -31px;
    }

    .ctaBlueArrowUp {
        width:8px;
        height:4px;
        background-position:-52px -31px;   
    }

    .ctaBlueArrowRight {
        width:5px;
        height:7px;
        background-position:-60px -31px;
    }

    .ctaWhiteArrowDown {
        width:8px;
        height:4px;
        background-position:-14px -31px;
    }

    .ctaWhiteArrowUp {
        width:7px;
        height:4px;
        background-position:-22px -31px;
    }

        #toolbar .ctaWhiteArrowUp,
        #accountSelector .ctaGreyArrowDown {margin-left:6px}

    .ctaCharcoalArrowDown {
        width:11px;
        height:6px;
        background-position:-65px -31px;
    }

    .ctaGreyArrowDown {
        width:8px;
        height:4px;
        background-position:-29px -31px;
    }
        .e_accordionMenu .ctaGreyArrowDown {margin-right:6px}

    .ctaGreyArrowUp {
        width:8px;
        height:4px;
        background-position:-37px -31px;
    }

    .ctaGreyArrowRight {
        width:4px;
        height:7px;
        background-position:-271px -31px;
    }
        .e_accordionMenu .ctaGreyArrowRight {
            margin-right:6px;
        }

    .ctaBlueBoxArrowRight {
        width:12px;
        height:13px;
        background-position:-110px -31px;
    }

    .ctaBlueBoxArrowLeft {
        width:12px;
        height:13px;
        background-position:-247px -31px;
    }

    .ctaBlueBoxFirstPage {
        width:12px;
        height:13px;
        background-position:-199px -31px;
    }

    .ctaBlueBoxLastPage {
        width:12px;
        height:13px;
        background-position:-223px -31px;
    }

    .ctaGreyBracketRight {
        width:4px;
        height:7px;
        background-position:-123px -31px;
    }

    .sptWhiteSeparatorVertical {
        width:1px;
        height:13px;
        background-position:-76px -31px;
    }

    .sptGreySeparatorVertical {
        width:1px;
        height:13px;
        background-position:-77px -31px;
        margin:0 12px;
        vertical-align:middle;
    }

    .sptGreySeparatorAuto, .sptGreySeparator {
        width:1px;
        background:url(/static/images/icons/separatorGrey.png) repeat-y;
        height:13px;
        vertical-align:middle;
        margin:0 10px;
    }

    .sptGreySeparatorAuto {
        height:auto;
    }

    .icoGreySeparatorVertLong {
        height:440px;
        width:2px;
        position:relative;
        margin-top:23px;
        margin-left:650px;
        background:url(/static/images/icons/separatorGrey.png) repeat-y;
    }

    .icoGreyGlobe {
        padding-left:20px;
        padding-bottom:1px;
        background:url(/static/images/backgrounds/international_active.png) no-repeat;
    }

        .icoGreyGlobe:hover {
            background:url(/static/images/backgrounds/international_hover.png) no-repeat;
            text-decoration:none !important;
        }

        #languageSelector .icoGreyGlobe:hover {background:url(/static/images/backgrounds/international_active.png) no-repeat}

    .icoExclamationMark {
        background:url(/static/images/sprites/general/icon-exclamation-mark.png) no-repeat;
        width:14px;
        height:14px;
        margin-left:15px;
        margin-right:5px;
        margin-top:-2px;
    }

    .icoWhiteShoppingCartEmpty {
        width:15px;
        height:12px;
        background-position:-78px -31px;
    }

    .icoGreyShoppingCartEmpty {
        width:15px;
        height:12px;
        background-position:-17px -45px;
    }

        a:hover .icoGreyShoppingCartEmpty {background-position:-78px -31px}

    .icoWhiteSitemailEmpty {
        width:15px;
        height:12px;
        background-position:-94px -31px;
    }

    .icoGreySitemailEmpty {
        width:15px;
        height:12px;
        background-position:-1px -45px;
    }

        /* if sitemail image is in an <a> tag, change color on hover */
        a:hover .icoGreySitemailEmpty {background-position:-94px -31px}

    .icoWhiteBriefcase {
        width:16px;
        height:12px;
        background-position:-49px -45px;
    }

    .icoGreyBriefcase {
        width:16px;
        height:12px;
        background-position:-33px -45px;
    }

        /* if briefcase image is in an <a> tag, change color on hover */
        a:hover .icoGreyBriefcase {background-position:-49px -45px}

    .icoWhiteRss {
        width:10px;
        height:9px;
        background-position:-127px -31px;
    }

    .icoWhiteRss:hover {background-position:-164px -31px}

    .icoWhiteMagnifyingGlass {
        width:13px;
        height:12px;
        background-position:-174px -31px;
    }

    .icoGreySendSiteMail {
        width:12px;
        height:13px;
        background-position:-110px -31px;
    }

    .icoLiveChatHeader {
        padding-left:20px;
        padding-bottom:1px;
        background:url(/static/images/backgrounds/headerlivechaticon.gif) no-repeat;
    }

        .icoLiveChatHeader:hover {
            background:url(/static/images/backgrounds/headerlivechaticon_hover.gif) no-repeat;
            text-decoration:none !important;
        }

    .icoLiveChatHeaderOff {
        color:#666;
        padding-left:20px;
        padding-bottom:1px;
        background:url(/static/images/backgrounds/headerlivechaticon_disabled.gif) no-repeat;
    }

    a.icoLiveChatFooter {
        padding-left:20px;
        padding-bottom:1px;
        background:url(/static/images/backgrounds/footerlivechaticon.gif) no-repeat;
        color:#666;
        margin-bottom:5px;
        display:block;
    }

    .icoLiveChatFooterOff {
        padding-left:20px;
        padding-bottom:1px;
        background:url(/static/images/backgrounds/footerlivechaticon_disabled.gif) no-repeat;
        color:#a3a4a7;
        margin-bottom:5px;
        display:block;
    }

    .avatar {vertical-align:middle}

    .moreArrowDown {
        background:url(/static/images/arrows/grey_arrow_down.gif) no-repeat right;
        padding-right:12px;
    }

    .lessArrowUp {
        background:url(/static/images/arrows/grey_arrow_up.gif) no-repeat right;
        padding-right:12px;
    }

    .commentslink {
        background:transparent url(/static/images/sprites/comment_bubble.png) no-repeat;
        float:right;
        height:20px;
        line-height:15px;
        padding-right:10px;
        text-align:center;
        width:30px;
        font-weight:bold;
    }

    /* CSV icon by Regional Computing Center Erlangen (RRZE). Licensed under a Creative Commons Attribution 3.0 License.*/
    .csvIcon {
        background: url(/static/images/icons/csv.png) no-repeat;
        width: 16px;
        height: 16px;
        background-size: 16px 16px;
    }

/**
 * SECTION 6.2 ICONS
 */
.icons, .iconsWide {
    background-image:url(/static/images/icons.png);
    background-repeat:no-repeat;
    width:12px;
    height:12px;
    padding:0;
    margin:0;
    overflow:hidden;
    vertical-align:top
}
    .icons.photo {background-position: -84px -24px}
    .icons.flash {background-position: -132px -24px}
    .icons.illustration, .icons.vector {background-position: -96px -24px}
    .icons.video-169,
    .icons.video-43,
    .icons.video {background-position: -108px -24px}
    .icons.audio {background-position: -252px 0}

    .icons.photoExclusive {background-position: -72px 0}
    .icons.flashExclusive {background-position: -36px -36px}
    .icons.illustrationExclusive, .icons.vectorExclusive {background-position: -120px -36px}

    .icons.videoExclusive { background-position: -288px 0; }
    .icons.audioExclusive { background-position: -300px 0; }

    .icons.vetta, .icons.vettaPhoto { background-position: -336px 0; }
    .icons.vettaIllustration {background-position: -336px -12px}
    .icons.vettaVideo {background-position: -228px -36px;}
    .icons.agency { background-position: -24px -36px; }
    .icons.editorial { background: url("/static/images/sprites/search/editorial.png") no-repeat; background-position: -1px -1px; width: 27px; height: 18px;}

    .icons.exclusivePlus,
    .icons.photoExclusivePlus {background-position: 0 -36px}
    .icons.photoPlus {background-position: -216px -36px}
    .icons.pump {background-position: -120px -24px}

    .icons.flames0 {background: none; float:left;}
    .icons.flames100 {background-position: -144px -24px; float:left;}
    .icons.flames500 {background-position: -156px -24px; float:left;}
    .icons.flames1000 {background-position: -168px -24px; float:left;}
    .icons.flames10000 {background-position: -180px -24px; float:left;}
    .icons.flames25000 {background-position: -192px -24px; float:left;}

    .icons.lbAdd {background-position: -228px -24px;}
    .icons.lbDel {background-position: -240px -24px}

    /**
     * icons for canister levels/filetypes
     */
    .icons.canPhotoBase {background-position: 0 0}
    .icons.canPhotoBronze {background-position: -12px 0}
    .icons.canPhotoSilver {background-position: -24px 0}
    .icons.canPhotoGold {background-position: -36px 0}
    .icons.canPhotoDiamond {background-position: -48px 0}
    .icons.canPhotoBlkDiamond {background-position: -60px 0}

    .icons.canAudioBase {background-position: -96px 0}
    .icons.canAudioBronze {background-position: -108px 0}
    .icons.canAudioSilver {background-position: -120px 0}
    .icons.canAudioGold {background-position: -132px 0}
    .icons.canAudioDiamond {background-position: -144px 0}
    .icons.canAudioBlkDiamond {background-position: -156px 0}

    .icons.canVideoBase {background-position: -168px 0}
    .icons.canVideoBronze {background-position: -180px 0}
    .icons.canVideoSilver {background-position: -192px 0}
    .icons.canVideoGold {background-position: -204px 0}
    .icons.canVideoDiamond {background-position: -216px 0}
    .icons.canVideoBlkDiamond {background-position: -228px 0}

    .icons.canFlashBase {background-position: -48px -36px}
    .icons.canFlashBronze {background-position: -60px -36px}
    .icons.canFlashSilver {background-position: -72px -36px}
    .icons.canFlashGold {background-position: -84px -36px}
    .icons.canFlashDiamond {background-position: -96px -36px}
    .icons.canFlashBlkDiamond {background-position: -108px -36px}

    .icons.canIllustrationBase {background-position: -132px -36px}
    .icons.canIllustrationBronze {background-position: -144px -36px}
    .icons.canIllustrationSilver {background-position: -156px -36px}
    .icons.canIllustrationGold {background-position: -168px -36px}
    .icons.canIllustrationDiamond {background-position: -180px -36px}
    .icons.canIllustrationBlkDiamond {background-position: -192px -36px}

    .icons.kotc {background-position: 0 -24px}
    .icons.lotsaDL {background-position: -24px -24px}
    .icons.hallOfFame {background-position: -36px -24px}
    .icons.anamorphic {background-position: -48px -24px}
    .icons.lock {background-position: -60px -24px}
    .icons.magnifyGlass {background-position: -72px -24px}
    .icons.iotw {background-position: -312px -24px}

    .icons.wikiWarrior {background-position: 0 -12px}
    .icons.wikiOldSchool {background-position: -12px -12px}
    .icons.banHammer {background-position: -24px -12px}
    .icons.moderator {background-position: -36px -12px}
    .icons.specialOps {background-position: -48px -12px}
    .icons.inspector {background-position: -60px -12px}
    .icons.admin {background-position: -72px -12px}
    .icons.thumbUp {background-position: -84px -12px}

    /* Steel Cage icons */
    .icons.scTie {background-position: -96px -12px}
    .icons.scDead {background-position: -108px -12px}
    .icons.scPussy {background-position: -120px -12px}
    .icons.scChicken {background-position: -132px -12px}
    .icons.scLoss {background-position: -144px -12px}

    .icons.scWin16-19 {background-position: -156px -12px}
    .icons.scWin20-24 {background-position: -168px -12px}
    .icons.scWin13-15 {background-position: -180px -12px}
    .icons.scWin10-12 {background-position: -192px -12px}
    .icons.scWin7-9 {background-position: -204px -12px}
    .icons.scWin4-6 {background-position: -216px -12px}
    .icons.scWin1-3 {background-position: -228px -12px}
    .icons.scBEC {background-position: -240px -12px}

    .icons.contestWin {background-position: -252px -12px}
    .icons.scScale {background-position: -264px -12px}

    .icons.dotw {background-position: -276px -12px}
    .icons.designSpotlight {background-position: -288px -12px}
    .icons.payg {background-position: -300px -12px}
    .icons.sub {background-position: -312px -12px}

    .vettaSale {
    	height: 11px;
    	width: auto;
    	margin: 0;
    	padding: 0;
    	float:left;
    	vertical-align:bottom;
    	padding-right:0.5em;
    }

.iconsWide {width: 17px;}
    .iconsWide.cartAdd {background-position: -240px -36px;}

/**
 * SECTION 7 Buttons
 *
 * These are the different buttons (CTA = Calls To Action) used on the site
 */

.btnCta0, .btnCta1, .btnCta2, .btnCta3 {
    display:inline-block;
    line-height:1.2em;
}


/* Super CTAs */
.btnCta0,
input[type="button"].btnCta0 {
    padding:5px 12px;
    border:solid 1px #cc3318;
    color:#fff !important;
    font-size:1.09em;
    font-weight:normal;
    text-decoration:none !important;
    margin-right:8px;
    background:url(/static/images/buttons/buttonRedBg.gif) left top repeat-x;
    cursor:pointer;
    }

    .btnCta0:hover,
    input[type="button"].btnCta0:hover {
        border:solid 1px #df3e21;
        text-decoration:none !important;
        color:#fff;
        background:url(/static/images/buttons/buttonRedBgHover.gif) left top repeat-x;
        cursor:pointer;
    }


/* Primary CTAs */
.btnCta1,
input[type="submit"] {
    padding:5px 12px;
    border:solid 1px #056672;
    color:#fff;
    font-size:1.09em;
    margin-right:8px;
    background:url(/static/images/buttons/buttonBlueBg.gif) left top repeat-x;
    cursor:pointer;
}

    .btnCta1:hover,
    input[type="submit"]:hover {
        border:solid 1px #0099bb;
        text-decoration:none;
        color:#fff;
        background:url(/static/images/buttons/buttonBlueBgHover.gif) left top repeat-x;
    }

.btnCta1[type="submit"][disabled], 
.btnCta1[type="submit"][disabled]:hover {
    background:url(/static/images/buttons/buttonGreyBg.gif) left top repeat-x;
    border: none;
    color: #e3e3e3;
    cursor: default;
}

/* Another Primary CTA */
.btnCta2,
input[type="button"] {
    padding:5px 12px;
    border:solid 1px #666;
    color:#fff;
    font-size:1.09em;
    margin-right:8px;
    background:url(/static/images/buttons/buttonGreyBg.gif) left top repeat-x;
    cursor:pointer;
}
    .btnCta2:hover,
    input[type="button"]:hover {
        border:solid 1px #909090;
        text-decoration:none;
        color:#fff;
        background:url(/static/images/buttons/buttonGreyBgHover.gif) left top repeat-x;
    }


/* Secondary CTAs */
.btnCta3 {
    padding-left:18px;
    background:url(/static/images/arrows/blue_arrow_right.png) no-repeat left center ;
    color:#2a3333;
    text-decoration:none;
    cursor:pointer;
}

    button.btnCta3 {
        border:none;
        padding-left:20px;
    }

    button.btnCta3:hover,
    a.btnCta3:hover,
    a.btnCta3Left:hover {text-decoration:underline}

    .btnCta3:hover {
        color:#008595;
        background:url(/static/images/arrows/blue_arrow_right_hover.png) no-repeat left center;
        text-decoration:none;
}

li > a.btnCta3 {margin-top:8px}

.btnCta3Left {
    padding-left:18px;
    background:url(/static/images/arrows/blue_arrow_left.png) no-repeat left center;
    color:#2a3333;
    line-height:1em;
}
    .btnCta3Left:hover {
        color:#008595;
        background:url(/static/images/arrows/blue_arrow_left_hover.png) no-repeat left center;
        text-decoration:none;
    }

    .btnCta3BlueRight {
        padding-right:18px;
        background:url(/static/images/arrows/blue_arrow_right.png) no-repeat right center;
    }


/* Tertiary CTAs */
.btnCta4,
.btnCta4Down,
.btnCta4Right,
.btnCta4Blue {
    padding-left:11px !important;
    background:url(/static/images/arrows/tertiaryCTAgrey.png) no-repeat left;
    color:#008595;
    text-decoration:none;
}
    .btnCta4Blue {
        padding-left:10px;
        background:url(/static/images/arrows/tertiaryCTAblue.png) no-repeat left center;
    }

    .btnCta4Right {
        background-position:right center;
        padding-left:0 !important;
        padding-right:11px !important;
    }

    .btnCta4Down {background:url(/static/images/arrows/tertiaryCTAgreydown.png) no-repeat left center}

    .tertiaryCtaGreyLeft {
        padding-left:12px;
        background:url(/static/images/arrows/tertiaryleftCTAgrey.png) no-repeat left center;
    }


/* Search Button CTA - the magnifying glass */
input[type="image"].btnCtaSearch {
    padding:6px 10px;
    border:solid 1px #a3a4a7;
    border-left:0;
    color:#fff;
    font-size:1.09em;
    background:url(/static/images/buttons/buttonGreyBg.gif) left top repeat-x;
}
    input[type="image"].btnCtaSearch:hover {background:url(/static/images/buttons/buttonGreyBgHover.gif) left top repeat-x}

    input[type="text"].searchField {
        border-right:0;
        height:14px;
        margin-right:0;
        width:105px;
    }



/**
 * SECTION 8 Presentation Logic Exceptions
 *
 * These are the really ugly exceptions for spacing, padding, positioning etc... that are expensive to run client-side
 * These should ideally be removed when there's time
 */

p + * {margin-top:1em}
h3 + p {margin-top:1em}
p + a.btnCta3, p + .btnCta1 {
    margin-top:0;
    margin-bottom:30px;
}
h2 + h3, h2 + .h3withline {margin-top:10px}

/* Ensure no margins above anything that starts the page / column */
div.twoColUneven div.col1 > *,
div.twoColUneven div.col2 > * {margin-top:0}


/**
* SECTION 9 Specific Classes
*
* These are a few of the really specific classes that are used around the site
*/

#toolbarAvatar {
    float: left;
    margin: 0;
}

#noscript-container {
    background-color: #CC0000;
    color: white;
    font-size: 120%;
    left: 0;
    top: 0;
    position: fixed;
    padding: 5px 0;
    width: 100%;
    text-align:center;
    font-weight:bold;
}

.pullout {
    background:#e3f0f1;
    padding:12px;
    margin:0;
    border-radius:0.5em;
    -webkit-border-radius:0.5em;
    -moz-border-radius:0.5em;
}

.roundedBox {
    padding: 12px;
    border-radius:0.5em;
    -webkit-border-radius:0.5em;
    -moz-border-radius:0.5em;
}

.orangeRoundedBox {
    background: #fcdfd1;
    padding: 12px;
    border-radius:0.5em;
    -webkit-border-radius:0.5em;
    -moz-border-radius:0.5em;
}

.blueNotificationBox {
    background: #E7F5F8;
    padding: 12px;
    padding-bottom: 24px;
    padding-left:20px;
    border-radius:0.5em;
    -webkit-border-radius:0.5em;
    -moz-border-radius:0.5em;
}

dl.twoColumn  {width:100%; word-wrap: break-word}
dl.twoColumn dt, dd {display:inline-block;}
dl.twoColumn dt {width:50%;}
dl.twoColumn dd {padding-left:4%; width:45%; vertical-align: top;}

.lightboxDownload {
    float: left;
    position: relative;
    width: 230px;
    margin-top: 10px;
}

.pad28 {
    padding-left: 28px;
}

.cell {
    float: left;
    vertical-align:top;
}

.cellImg {
    padding-top: 6px;
    width: 22px;
    height: 22px;
    float: left;
}

/* Form validation error box */
.error,
.myAccountError {
    padding:5px;
    padding-left:48px;
    color:#cc0000;
    border:1px #e5a3a3 solid;
    background:url(/static/images/icons/errorIcon.gif) no-repeat 10px 10px;
}
.myAccountError {
    background: none;
}


.errorRed {
    background-color:#FFEFEF;
    border:solid;
    border-width:1px;
    border-color:#CC0000;
    color:#CC0000;
    padding:10px;
    -moz-border-radius:10px;
    -webkit-border-radius: 10px;
    border-radius:10px;
}

.tblSortDsc {
    background:url(/static/images/arrows/thArrowDown.gif) no-repeat right;
    padding-right:10px;
}

.tblSortAsc {
    background:url(/static/images/arrows/thArrowUp.gif) no-repeat right;
    padding-right:10px;
}

.listNumbers {
    font-size:18px;
    color:#a3a4a7;
    margin-right:5px;
    vertical-align:top;
    width:10px;
}

/* Truncates display - should only be used inside a block-level eelment, turns any element into a block level element */
#fma .tertiary .moreBox h2,
.trnct {
    display:block;
    white-space:nowrap;
    overflow:hidden;
    -o-text-overflow:ellipsis;                               /* Opera-specific */
    -ms-text-overflow:ellipsis;                              /* IE-specific (even IE6 & 7) */
    text-overflow:ellipsis;
}

.keyword {
    font-size:.9em;
    color:#666;
}

.required {
    color:#cc0000;
    font-weight:bold;
}
    .required:before {content:"*"}

.selected {
    color:#2a3333;
    font-weight:bold;
}

h2.trainingManual {
    font-size:1em;
    font-weight: bold;
}

.editorialCaption {
    padding: 3px 5px;
    margin-top: -3px;
    margin-left: 10px;
    width: 369px;
}

.agreementUnderline {
    color: red;
    text-decoration: underline;
}

.arrowGreyRight {
    background:url(/static/images/arrows/quaternary.gif) left no-repeat;
    padding-left:10px;
    vertical-align:middle;
    margin:0;
}

div[id^="WFComponentDiv_"] table td{
    padding:0;
}

#referral-Program-warning {
    background-color:#E3F0F1;
    padding-right:5px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:10px;
    margin-left:0px;
}

.notifications .notification-bar.warning {
    background: #ffd900;
    display: block;
    padding-top: 16px;
    padding-bottom: 16px;
    text-align: center;
    font-family: "iStock Maquette", Arial, Meiryo, "Arial Unicode MS", "Arial", sans-serif;
}

.notifications .notification-bar.warning span.text {
    font-size: 16px;
}

.notifications .notification-bar.warning span.close img{
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter:alpha(opacity=50);
    float: right;
    margin-right: 20px;
}

.notifications .notification-bar.warning span.close img:hover { 
  opacity: 1;
  filter:alpha(opacity=100);
  -moz-opacity: 1;
}

.notifications .notification-bar.warning a {
    color: #fe423f;
    font-weight: 500;
    text-decoration: none;
    -webkit-transition-delay: 0s;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-property: all;
    -webkit-transition-timing-function: ease-in-out;
    transition-delay: 0s;
    transition-duration: 0.2s;
    transition-property: all;
    transition-timing-function: ease-in-out;
}

.notifications .notification-bar.warning span.text a:hover { 
   color: #e12522;
   text-decoration: none;
}

.notifications .notification-bar.warning span.text a:not(.close) { 
  margin-left: 5px; 
}

.incentiveBar {
    top: 0px;
    width: 100%;
    text-align: left;
    line-height: 40px;
    background:#0099BB;
    color: white;
    filter: alpha(opacity=80);
    z-index: 1;
    overflow: hidden;
}

.incentiveBar.referralIncentiveBar {
    height: 36px;
    overflow: hidden;
}

.incentiveBar.euCookieIncentiveBar {
    height: 50px;
    border-bottom: 1px solid #2c3e3d;
}

.incentiveBar a {
    color: white;
    text-decoration: underline;
}

.incentiveClose {
    float: left;
    width:190px;
    height:40px;
    margin-top: -4px;
}

.incentiveClose.referralIncentiveClose {
    background: url(/static/images/referral/incentiveBar_PtrnLft.png) repeat-y;
}

.incentiveCloseArea {
    background-image:url(/static/images/referral/btn_close_sprite.png);
    background-repeat:no-repeat;
    height:40px;
    float:left;
    width:20px;
    margin-top:10px;
    margin-left:13px;
}

.incentiveCloseArea:hover {
    background-position: -48px 0px;
}

.incentiveBar .referralSignUp {
    float: right;
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.incentiveBar h2 {
    display: inline;
    margin-right: 40px;
}

.incentiveBar .euCookie h2 {
    margin-left: 10px;
}

.incentiveBar .euCookie {
    float: left;
    line-height: 50px;
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.incentiveBar #euCookieCta {
    float: right;
    margin-right: 19px;
    margin-top: 12px;
}

.incentiveCloseText {
    margin-left:25px;
    margin-top:-7px;
    float:left;
    text-decoration: none;
    text-align:left;
    width:100px;
}

/**
 * Pay-As-You-Go Credits Styles
 */
.saveDescription {
    margin: 0px;
    color: #666666;
    font-family: 'Lucida Grande', Verdana, Corbel, 'Bitstream Vera Sans', 'DejaVu Sans', sans-serif; 
    font-size: 9px;
    font-style: italic; 
    margin-top: 25px;
    margin-bottom: -40px;
}
.saveDescription p {
    margin: 0px;
    padding: 0px;
}

table.abm, table.abm tr {border: 1px solid #e3e3e3; height: 36px; padding: 0px; vertical-align: middle;}
table.abm td {height: 36px; padding: 0px; vertical-align: middle;}
table.abm th {border:none;}
table.abm {border-top: none; border-left: none; border-right: none}
table.abm tr {border-left: none; border-right: none}
table.abm {padding: 0 15px;}

table.abm .abmCredits {
    line-height: 36px;
    padding-left: 15px;
    font-family: "Trebuchet MS", "Segoe UI", Trebuchet, "Bitstream Vera Sans", "DejaVu Sans", sans-serif;
    min-width:110px;
}

table.abm .abmCredits .creditsValue {
    font-size: 18px;
    color: #2499a7;
}
table.abm .abmCredits .creditsTitle {
    font-size: 14px;
    color: #2a3333;
}

table.abm .abmSubmit{
    float: right; 
    margin-right: 15px;
    line-height: 36px;
}
table.abm .abmPrice {padding-left: 15px; font-size: 12px;}
table.abm .abmPrice .footnote {font-size: 11px; margin-left: 15px;}
table.abm .abmPrice label {margin: 0px;}

table.abm .abmSubmit #adminPaygSubmit {
    margin-right: 0px;
}
table.abm .creditTableHead {height: 1px}
table.abm .creditTableHead th {padding-left: 15px}

.notificationAdminMessage {
    background: #f3f3f3;
    border: 1px solid #cc0000;
    padding: 20px 0;
    width: 722px;
    font-family: 'Lucida Grande', Verdana, Corbel, 'Bitstream Vera Sans', 'DejaVu Sans', sans-serif;  
    font-size: 14px;
    color: #cc0000;
}
.notificationHolder {
    margin: 0 20px;
}

.currencyForm {
    width: 724px;
    margin-top: 10px;
}
/**
 * SECTION 10 Helper Styles
 *
 * These are the different classes used throughout the site, reuse as often as possible
 */


/* Positioning */
.fr {float:right}
.fl {float:left}
.cl, .clear {
    clear:both;
    display:block;
    float: none;
}

/* Display */
.h, .dn {display:none}
.dib {display:inline-block }
.dil {display:inline}

/* Visibility */
.vh {visibility:hidden}

/* Justification */
.r {text-align:right}
.l {text-align:left}
.j {text-align:justify}
.c {text-align:center}

/* Vertical Alignment */
.t {vertical-align:top}
.btm {vertical-align:bottom}
.m {vertical-align:middle}

/* Colour Related*/
.grey {color:#A3A4A7}
.bggrey {background-color:#f3f3f3}
.altgrey {color:#f3f3f3}
.bgGreyLight {background-color:#e3e3e3}
.bgBlue {background-color:#E3F0F1}
.orange {color:#EF3600}
.blue {color:#008595}
.green {color:green}
ins, .red {color:red}
.err {color:#cc0000}
.greyText {color:#ccc}
.darkGrey {color:#2a3333}
.hiliteText {color:#fff}
.greyBorder {border:5px solid #e3e3e3}
.hl:hover {background-color:#f3f3f3}
.bgred {background-color:darkred}

/* Text formatting related */
.small {font-size:0.95em}
.large {font-size:1.2em}

/* Padding around */
.p10 {padding:10px}
.p30 {padding:30px}


/* Padding Bottoms */
.pb0 {padding-bottom:0px}
.pb4 {padding-bottom:4px}
.pb5 {padding-bottom:5px}
.pb8 {padding-bottom:8px}
.pb10 {padding-bottom:10px}
.pb15 {padding-bottom:15px}
.pb12 {padding-bottom:12px}
.pb20 {padding-bottom:20px}
.pb40 {padding-bottom:40px}

/* Padding Tops */
.pt0 {padding-top:0px}
.pt2 {padding-top:2px}
.pt4 {padding-top:4px}
.pt5 {padding-top:5px}
.pt10{padding-top:10px}
.pt15{padding-top:15px}
.pt30{padding-top:30px}

/* Padding Left */
.pl5 {padding-left:5px}
.pl10 {padding-left:10px}
.pl15 {padding-left:15px}
.pl20 {padding-left:20px}
.pl23 {padding-left:23px}
.pl50 {padding-left:50px}
.pl252 {padding-left:252px}

/* Padding Right */
.pr0 {padding-right:0px}
.pr5 {padding-right:5px}
.pr20 {padding-right:20px}
.pr50 {padding-right:50px}

/* Margin Bottoms */
.mb1 {margin-bottom:1px}
.mb2 {margin-bottom:2px}
.mb5 {margin-bottom:5px}
.mb7 {margin-bottom: 7px}
.mb10 {margin-bottom:10px}
.mb12 {margin-bottom:12px}
.mb15 {margin-bottom:15px}
.mb20 {margin-bottom:20px}
.mb21 {margin-bottom:21px}
.mb25 {margin-bottom:25px}
.mb30 {margin-bottom:30px}
.mb70 {margin-bottom:70px}

/* Margin Tops */
.mt0 {margin-top:0}
.mt2 {margin-top:2px}
.mt5 {margin-top:5px}
.mt8 {margin-top:8px}
.mt10, ul.pmt10 li {margin-top:10px}
.mt12 {margin-top:12px}
.mt15 {margin-top:15px}
.mt20 {margin-top:20px !important}
.mt25 {margin-top:25px}
.mt30 {margin-top:30px}
.mt40 {margin-top:40px}
.mt50 {margin-top:50px}
.mt70 {margin-top:70px}
.w286 {width:286px}

/* Margin Rights */
.mr0 {margin-right:0}
.mr5 {margin-right:5px}
.mr6 {margin-right:6px}
.mr10 {margin-right:10px}
.mr12 {margin-right:12px}
.mr16 {margin-right:16px}
.mr30 {margin-right:30px}
.mr50 {margin-right:50px}
.mr78 {margin-right:78px}

/* Margin Lefts */
.ml0 {margin-left:0px}
.ml5 {margin-left:5px}
.ml6 {margin-left:6px}
.ml10 {margin-left:10px}
.ml15 {margin-left:15px}
.ml12 {margin-left:12px}
.ml20 {margin-left:20px}
.ml25 {margin-left:25px}
.ml40 {margin-left:40px}
.ml50 {margin-left:50px}
.ml51 {margin-left:51px}
.ml80 {margin-left:80px}
.ml96 {margin-left:96px}
.ml112 {margin-left:112px}
.ml-30 {margin-left:-30px}

/* Margin Misc */
.nm {margin:0 !important}
.mh4 {margin:0 4px}

/* Borders */
.nb {border:none}
.bb {border-bottom:#e3e3e3 1px solid}
.gb {border: #ccc 1px solid}
.bbd {border-bottom:1px dotted #A3A4A7}
.bs {border:1px solid #A3A4A7}
.brdrR {background: url(/static/images/icons/separatorGrey.png) top right repeat-y; }

/* Widths */
.w25p {width:25%}
.w33p {width:33%}
.w48p {width:48%}
.w50p {width:50%}
.w66p {width:66%}
.w75p {width:75%}
.w82p {width:82%}
.w85p {width:85%}
.w96p {width:96%}
.w99p {width:99%}
.w100p {width:100%}
.w10 {width:10px}
.w50 {width:50px}
.w82 {width:82px}
.w85 {width:85px}
.w90 {width:90px}
.w95 {width:95px}
.w102 {width:102px}
.w110 {width:110px}
.w134 {width:134px}
.w165 {width:165px}
.w162 {width:162px}
.w195 {width:195px}
.w200 {width:200px}
.w222 {width:222px}
.w280 {width:280px}
.w286 {width:286px}
.w289 {width:289px}
.w300 {width:300px}
.w310 {width:310px}
.w350 {width:350px}
.w370 {width:370px}
.w500 {width:500px}
.w600 {width:600px}
.w770 {width:770px}

/* Heights */
.h17 {height:17px}
.h40 {height:40px}
.h50 {height:50px}
.h150 {height: 150px}
.h380 {height:380px}

/* Padding */
.p5 {padding: 5px 5px 5px 0}
.p15 {padding: 15px 15px 15px 15px}

/* Misc helper styles */
.tdn {text-decoration:none !important}
.np {padding:0 !important}
.cp {cursor:pointer}
.fb {font-weight:bold}
.nobr, .nw {white-space: nowrap;}
.fi {font-style:italic}
.ndnt {padding:10px 10px}
.ln {list-style-type:none}
.st {text-decoration:line-through;}

/**
 * Mobile device-specific styles (1024px is the max width of the iPad)
 */
@media screen and (max-device-width: 1024px) {

    /* Prevent iOS, WinMobile from adjusting font size */
    html {
        -webkit-text-size-adjust:none;
        -ms-text-size-adjust:none;
    }

    #toolbar {
        position:relative;
        padding:0;
        margin:0;
    }
}

/**
 * Will hide the element when the js e_print() is envoked
 */
@media print {
    .e_print { visibility: hidden; }
}

/**
 *
 * Date picker
 *
 */

.datepicker {
    position: absolute;
    text-align: center;
    border: 1px #C4D5E3 solid;
    background: #FFFFFF;
    padding: 1em;
    border: 1px solid black;
    width: 245px;
}
.datepicker table {
    margin: 0px;
    padding: 0px;
    text-align: center;
    width: 100%;
}
.datepicker table thead tr th {
    padding: 0px;
    margin: 0px;
    width: 35px;
    text-align:center;
    padding-bottom: 2em;
}
.datepicker table tbody tr {
    border: 1px white solid;
    margin: 0px;
    padding: 0px;
}
.datepicker table tbody tr td {
    border-bottom: dotted 1px #a3a4a7;
    margin: 0px;
    padding: 0px;
    text-align: center;
    color: #008595;
}

.datepickerPrev,
.datepickerNext,
.datepicker table tfoot tr td {
    cursor: pointer;
    color: #008595;
    text-align: center;
    padding:0;
}

.datepicker table tbody tr td:hover,
.datepicker table tbody tr td.outbound:hover,
.datepicker table tbody tr td.today:hover {
    background: #e9eff4;
    cursor: pointer;
}
.datepicker table tbody tr td.wday {
    color: black;
    border:0;
    cursor: text;
    font-weight:bold;
}
.datepicker table tbody tr td.wday:hover {
    background: #fff;
}
.datepicker table tbody tr td.outbound {
    background: #e8e4e4;
}
.datepicker table tbody tr td.today {
    border:0;
    border: 1px #16518e solid;
    background: #000;
}
.datepicker table tbody tr td.nclick,
.datepicker table tbody tr td.nclick_outbound,
.datepicker table tbody tr td.nclick_today {
    cursor:default; color:#aaa;
    background: #fff;
}

/**
 * Sound player
 * soundPlayer class is important, JS uses this to observe click the event to play the mp3
 */
.soundPlayer {}
.soundPlayerSmallTrack {
    vertical-align: middle;
    line-height: 24px;
    border-bottom: 1px solid #F4F4F4;
    padding: 8px 0;
}
.soundPlayerCntr {
    margin-left: 30px;
}
.soundPlayerBtn {
    margin-left:-30px;
}
.soundPlayerTitle {
    line-height:15px;
    padding-top:4px;
    float: left;
}

ol.lower-roman li {list-style-type:lower-roman !important;}

/**
 * Referral Program Styles
 */

thead.darkHeader {
    background-color: #F3F3F3;
}

tr.darkBack {
    background-color: #F3F3F3;
    border-top: 0;
}

tr.shortRowDarkBack {
    border-top: 0;
    background-color: #F3F3F3;
    padding: 5px 25px 1px 0;
}

tr.shortRow {
    border-top: 0;
    padding: 5px 25px 1px 0;
}

tr.rowSpacer {
    height: 20px;
    border-top: 0;
}

tr.dottedBorderBottom {
    border-bottom: dotted #A3A4A7 1px;
}

td.darkBack {
    background-color: #F3F3F3;
}

td.referralFirstColumn {
    width:185px;
}

td.referralFirstColumnLarge {
    width:250px;
}

td.referralSmallerColumn {
    width:240px;
}

td.referralNormalColumn {
    width:124px;
    text-align: center;
}

#optedOutArea {
    padding-left: 15px;
    padding-bottom: 5px;
    padding-top: 15px;
    padding-right: 15px;
    float:left;
    width:720px;
    clear:right;
    background-color: #E3F0F1;
    margin-bottom:10px;
}

div#noBanner {
    width: 728px;
    height: 90px;
    background: #2A3333;
    text-align: center;
    color: #FFF;
    display: table-cell;
    vertical-align: middle;
}

[disabled] {
    border: 0;
    background: white;
    color: black;
}

.reportingTable {
    max-height: 160px;
    overflow: auto;
}

.dropbox{
    border: 2px solid #DDD;
    background-color: #FEFFEC;
    width: 150px;
    height: 100px;
}

.box{
    clear: both;
    border:solid 1px #CCC;
    padding:18px 30px;
}

/* Modalize/Modal default styling */
#modal-box {
    display: none;
}

#modal-mask {
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
    text-align: center;
    z-index: 9000;
    background-color: #000000;
}

#modal-content-wrapper {
    background-color:white;
    border: 5px solid #666666;
    display:none;
    padding: 20px;
    position: fixed;
    left:50%;
    top:50%;
    z-index:9999;
}

#modal-header {
    margin-bottom: 10px;
    padding-bottom: 10px;
    font-family: "Trebuchet MS", "Segoe UI", Trebuchet, "Bitstream Vera Sans", "DejaVu Sans", sans-serif;
    border-bottom: 1px dotted #A3A4A7;
    line-height: 1em;
    font-size: 1.5em;
}

#modal-close-button {
    margin: 15px 15px 0px 0px;
}

.mr-400{
    margin-right: -400px;
}

.mt17{
    margin-top: 17px;
}

div.front-page-center-tile .searchBar { 
    position:relative; 
}
div.front-page-center-tile .searchBar .searchBar-submit {
    position: absolute;
    right: 0; top: 0;
}
div.front-page-center-tile .searchBar .searchBar-input {
    float:none;
    margin: 0 30px 0 0;
}

#editorialInfoTip p {
    line-height: 18px;
}