/* /stylesheets/https-common/header.css - Header Style Sheet for Capital One Pages */

#header {
    width:      760px;
    height:     118px;
    background: #fff url(/images/presentation/header/header_bg_2008.jpg) no-repeat 100% 0;
    position:   absolute;
    margin:     0 0 10px !important;
    z-index:    1;
}
div.headerSimple {
    background: #fff url(/images/presentation/header/header_bg_simple.jpg) no-repeat 100% 0 !important;
    height: 101px !important;
}
div#header.headerSimple {
    margin-bottom: 18px !important;
}
#header ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ========== Skip Link ========== */
#header .skipLink {
    display: none;
}

/* ========== Capital One Home ========== */
#header .capOneHome {
    position: absolute;
    top: 3px;
    left: 5px;
    font-size: 10px;
    padding-left: 12px;
    background: transparent url(/images/presentation/common/arrows/small_arrow.gif) no-repeat 0 60%;
}

/* ========== Logos ========== */
#header h3.capOneLogo {
    position: absolute;
    top: 22px;
    left: 23px;
    width: 139px;
    height: 54px;
    background: transparent url(/images/header/logos/capone.gif) no-repeat 0 0;
    text-indent: -5000px;
    margin: 0;
}
#header h3.capOneLogo a {
    display: block;
    height: 54px;
    background: transparent url(/images/header/logos/capone.gif) no-repeat 0 0;
    text-decoration: none;
}
#header span.lobLogo {
    position: absolute;
    top: 68px;
    left: 113px;
}

/* ========== Global Navigation ========== */
#header #globalNav {
    position: absolute;
    width: 496px;
    top: 0;
    right: 0;
    z-index: 100;
}
#header #globalNav dl {
    float: left;
    position: relative;
    height: 19px;
}
#header #globalNav dl dt {
    height: 19px;
    font-size: 10px;
    color: #fff;
    cursor: pointer;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    padding: 3px 0 0 19px;
    background: transparent url(/images/presentation/header/globalnav_arrow.png) no-repeat 7px 0;

}
#header #globalNav dl.zipCode dt {
    font-weight: bold;
}
#header #globalNav dl.findProducts {
    width: 97px;
}
#header #globalNav dl.findProductsOver dt,
#header #globalNav dl.accessYourAccountOver dt,
#header #globalNav dl.customerServiceOver dt,
#header #globalNav dl.zipCodeOver dt {
    font-weight: bold;
    background-color: #4b75a5;
    border-left: 1px solid #004775;
    border-right: 1px solid #004775;
    background-position: 7px -22px;
}
#header #globalNav dl.accessYourAccount {
    width: 109px;
}
#header #globalNav dl.customerService {
    width: 118px;
}
#header #globalNav dl.zipCode {
    float: right;
    width: 172px;
}
#header #globalNav dl.zipCode dd {
    width: 152px;
    height: 78px;
    padding: 0 10px 5px;
    background: transparent url(/images/presentation/header/zip_code_bg.png) no-repeat 0 100%;
}
#header #globalNav dl.zipCode dd label {
    display: block;
    margin: 2px 0 10px;
    font-size: 12px;
}
#header #globalNav dl.zipCode dd input {
    vertical-align: middle;
    margin: 0 4px 8px 0;
    outline: none;
}
#header #globalNav dl.zipCode dd span {
    margin: 8px 0 0;
}
#header #globalNav dl dd {
    position: absolute;
    left: -999em;
    margin: 0;
}
#header #globalNav dl.zipCode #ddMessage {
    font-size: 10px;
    font-weight: bold;
    color: #ffad7f !important;
}
#header #globalNav dl.zipCode .zipCodeInput {
    width: 46px;
    height: 14px;
    padding: 2px 3px;
    border: 1px solid #004775;
    font-size: 10px;
}
#header #globalNav dl.zipCode dd #zipcode_tooltip_content {
    display: none;
    left: 198px;
    top: 653px;
}
#header #globalNav dl.zipCode dd #zipcode_tooltip_icon {
    position: relative;
    display: inline;
    padding-right: 3px;
}
#header #globalNav dl.zipCode dd #zipcode_tooltip_icon a {
    padding-right: 16px;
    background: transparent url(/images/https-common/icon/icon_tooltip_globalnav.gif) no-repeat 100% 50%;
    font-size: 10px;
}
#header #globalNav dl.zipCode dd #zipcode_tooltip_icon a:link,
#header #globalNav dl.zipCode dd #zipcode_tooltip_icon a:visited,
#header #globalNav dl.zipCode dd #zipcode_tooltip_icon a:hover,
#header #globalNav dl.zipCode dd #zipcode_tooltip_icon a:active {
    color: #fff !important;
}
#header #globalNav li {
    float: left;
    position: relative;
    background: none;
    margin: 0;
    padding: 0;
}
#header #globalNav li a,
#header #globalNav li.lastElement a span {
    color: #fff;
    display: block;
    padding: 6px 6px 5px 19px;
    font-size: 10px;
    font-weight: normal;
    text-decoration: none;
    background: #4b75a5 url(/images/presentation/header/globalnav_divider.gif) repeat-x 0 0;
    border-left: 1px solid #004775;
    border-right: 1px solid #004775;
    outline: none;
}
#header #globalNav li.lastElement a span {
    padding-bottom: 2px;
    border-bottom: 0;
}
#header #globalNav li.lastElement a {
    font-size: 10px;
    padding: 0;
    border: none;
}
#header #globalNav li a:hover,
#header #globalNav li.lastElement a:hover span {
    color: #fff;
    text-decoration: none;
    background-color: #355e8d;
}
#header #globalNav dd ul li.lastElement a span {
    cursor: pointer;
}
#header #globalNav dl.findProducts li a,
#header #globalNav dl.findProducts li.lastElement a span {
    width: 70px;
}
#header #globalNav dl.findProducts li.lastElement a {
    width: 97px;
    padding: 0 0 8px 0;
    background: transparent url(/images/presentation/header/find_prod_bttm.png) no-repeat 0 100%;
}
#header #globalNav dl.findProducts li.lastElement a:hover {
    background-position: -97px 100%;
}
#header #globalNav dl.accessYourAccount li a,
#header #globalNav dl.accessYourAccount li.lastElement a span {
    width: 82px;
}
#header #globalNav dl.accessYourAccount li.lastElement a {
    width: 109px;
    padding: 0 0 8px 0;
    background: transparent url(/images/presentation/header/access_accts_bttm.png) no-repeat 0 100%;
}
#header #globalNav dl.accessYourAccount li.lastElement a:hover {
    background-position: -109px 100%;
}
#header #globalNav dl.customerService li a,
#header #globalNav dl.customerService li.lastElement a span {
    width: 91px;
}
#header #globalNav dl.customerService li.lastElement a {
    width: 118px;
    padding: 0 0 8px 0;
    background: transparent url(/images/presentation/header/cust_serv_bttm.png) no-repeat 0 100%;
}
#header #globalNav dl.customerService li.lastElement a:hover {
    background-position: -118px 100%;
}
#header #globalNav dl.findProductsOver dd,
#header #globalNav dl.accessYourAccountOver dd,
#header #globalNav dl.customerServiceOver dd,
#header #globalNav dl.zipCodeOver dd {
    left: auto;
}
#header #globalNav dl dt span {
    display: none;
}

/* ========== Search ========== */
#header #search {
    position: absolute;
    top: 43px;
    right: 23px;
	height: 21px;
	width: 215px;
}
#header #search #search_field {
    width: 145px;
    height: 12px;
    font: normal 10px Arial, Helvetica, sans-serif;
    border-color: transparent;
    padding: 3px;
    color: #999;
    text-align: left;
}
#header #globalNav dl.zipCode .zipCodeInput:focus,
#header #globalNav dl.zipCode .zipCodeInput.js-focus,
#header #search #search_field:focus,
#header #search #search_field.js-focus {
    color:#000;
    background-color:#ffffff;
}
#header #search label {
    display: none;
}
#header #search .search_btn {
	width: 55px;
	height: 20px;
	margin: 0 0 0 3px;
	padding: 0;
	border: none;
	background:url(/images/presentation/common/buttons/search.gif) no-repeat left top;
	position: absolute;
	top: 0;
	right: 0;
}
/* necessary to remove the active outline around imput types in firefox */
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
	border:none;
}
#header #search .search_btn:hover,
.js-hover {
	cursor:pointer;
}

/* ========== Help - Help link used only on recruit.capitalone.com ========== */
#header a#recruitHelp {
    position: absolute;
    right: 17px;
    top: 45px;
    padding-left: 24px;
    background: transparent url(/images/https-common/icon/icon_how_can_help.gif) no-repeat 0 50%;
    line-height: 18px;
    font-size: 12px;
}

/* ========== Primary Nav ========== */

#header #primaryNav {
    width:            760px;
    position:         absolute;
    top:              104px;
    background:       url('/images/home2008/nav_grad.gif') repeat-x;
    z-index:          2;
    left:0px !important;
}

/*** ESSENTIAL STYLES ***/

.primaryNavMenu, .primaryNavMenu * {
    margin:			0;
    padding:		0;
    list-style:		none;
    vertical-align: middle;
}
.primaryNavMenu li {
    float:	            left;
    position:		relative;
    display:		block;
    border-left:1px solid #7695B2 !important;
    line-height:29px;
}
.primaryNavMenu ul {
    position:		absolute;
    top:			-999em;
    width:	        210px; /* left offset of submenus need to match (see below) */
}
.primaryNavMenu ul li {
    width:	          100%;
    line-height:      25px;
    height:           25px;
}
.primaryNavMenu #p_business {
    /*width: 230px;*/
    width: 250px;
}
.primaryNavMenu #p_business .regional {
    width: 300px;
}
.primaryNavMenu a {
    display:		block;
    position:		relative;
}

.primaryNavMenu li:hover {
    visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.primaryNavMenu li:hover ul,
.primaryNavMenu li.sfHover ul {
    left:			-6px; /* so that we can have the transparent png border */
    top:			28px; /* match top ul list item height */
}

/*** SKIN ***/

.primaryNavMenu {
    float:            left;
}

.primaryNavMenu a {
    font-size:        14px;
    font-weight:      bold;
    color:            #fff;
    text-decoration:  none;
}
.primaryNavMenu a, .primaryNavMenu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    color:            #fff;
}
.primaryNavMenu li a {
    color:#fff;
    float:left;
    padding: 0 10px 0 10px;
} 
.primaryNavMenu li#p_customer_services {
    border-right:     solid 1px #7695b2;
}
.primaryNavMenu li li a,
.primaryNavMenu li li div {
    float:            none;
    font-size:        12px;
    height:           100%;
    margin:           0 5px 0 5px;
    background:       #5780ae;
    border-left:      solid 1px #7695b2;
    border-right:     solid 1px #7695b2;
}
/* list item and outer border for each dropdown member */

.primaryNavMenu li {
    line-height:      29px;
    border-left:      1px solid #7695b2;
}
.primaryNavMenu li li {
    border:           none;
    background:       url(/images/home2008/horz_border.png) repeat-y left !important;
}
.primaryNavMenu li li span {
    height:           100%;
    width:            auto;
    display:          block;
    background:       url(/images/home2008/horz_border.png) repeat-y right;
}

/* hover behavior for the dropdowns */

.primaryNavMenu li:hover.p_entry,
.primaryNavMenu li.p_entry.sfHover {
    background:       #5780ae url(/images/home2008/nav_grad_hl.gif) repeat-x !important;
    outline:          0;
    height:           30px;
}
.primaryNavMenu li li:hover,
.primaryNavMenu li li.sfHover {
    background:       url(/images/home2008/horz_border.png) repeat-y left;
}

.primaryNavMenu li li a:focus,
.primaryNavMenu li li a:hover,
.primaryNavMenu li li a:active
{
    color:#fff;
    background:       #1a4e7e;
    outline:          0;
}

.primaryNavMenu li.p_entry a
{
    color:#fff;
}

/* the border on the first item in the dropdown */

.primaryNavMenu li.topItem a {
    border-left:      solid 1px #7695b2 !important;
    border-right:     solid 1px #7695b2 !important;
    border-top:       solid 1px #5780ae !important;
}
.primaryNavMenu font.submenuItems {
    margin-left: 20px;
}

/* unique styles for the business dropdown separator */

.primaryNavMenu li.blankEntry {
    line-height:      11px;
    height:           11px;
}
.primaryNavMenu li.blankEntry div {
    padding:          0 5% 0 5%;
    background:       #5780ae;
    padding-top:      7px;
}
.primaryNavMenu li.blankEntry div div {
    height:           1px;
    border:           none;
    border-bottom:    #fff 1px solid;
}
.primaryNavMenu li.blankEntry hr {
    border:           #fff;
    background-color: #fff;
    height:           1px;
    color:            #fff;
}

/* the last little section in each drop-down, where the gradient is */

.primaryNavMenu li.bottomItem {
    height:           100%;
    line-height:      12px;
    display:          block;
}
.primaryNavMenu li.bottomItem span span {
    border:           none;
    padding-bottom:   5px;
    background:       url(/images/home2008/vert_border.png) repeat-x bottom;
}
.primaryNavMenu li.bottomItem span span span {
    margin:           0px 5px 0px 5px;
    border-bottom:    1px solid #7695b2;
    border-right:     1px solid #7695b2;
    border-left:      1px solid #7695b2;
    background:       url(/images/home2008/nav_grad_bottom.gif) repeat-x bottom;
    height:           12px;
}

/*** sub indicator arrows **/

ul li .primaryNavDownArrow {
    display:          block;
    float:            left;
    width:            16px;
    margin:           0 0 0 0;
    background:       url('/images/home2008/nav_arrow.gif') no-repeat 0px -1px;
}

ul li:hover div.primaryNavDownArrow,
ul li.sfHover div.primaryNavDownArrow {
    background:       url('/images/home2008/nav_arrow_active.gif') no-repeat;
}

@media print {
    #header {
        background-image: none;
    }
    #header .skipLink,
    #header .capOneHome,
    #header #globalNav,
    #header #search,
    #header #primaryNav {
        display: none;
    }
}


/* ========== Removes Header Elements if LOB-Specific Search ========== */
.lobSearch #header #globalNav,
.lobSearch #header #search,
.lobSearch #header #primaryNav {
    display: none;
}




