/* - - - - -- - - - - - - - - - - - - - - - 
Description: Generic Global Styles
- - - - - - - - - - - - - - - - - - - - - */

/* Clear all default CSS, and reset specific elements */
*{margin:0; padding:0;} /* set all elements to have 0 margin and padding */
p {line-height:1.4;text-align:left; margin-bottom:13px;}
p.last{margin-bottom:0px;}
ul, li {list-style: none; }
table{border-collapse:collapse;border-spacing:0;font-size:inherit;font:100%;}
fieldset,img,a img{border:0;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;} 
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} 
input, textarea, select{font-family:inherit;color:inherit;}

/* Heading ................................................................................*/ 
h1,h2,h3,h4,h5,h6 { font-family: Arial,Verdana, sans-serif; color:#111; clear:both;  margin: 0;} 
DIV.text_container H1 { 
    width:430px;height:28px;display:block;font-size:0px;
    background-position:0px 0px;background-repeat:no-repeat;
} 


/* Links ................................................................................*/ 
a                   { color: #aaa; text-decoration: none; outline: none; }
a:visited             { color: #666; text-decoration: none; outline: none; }
a:hover, a:active   { color: #ccc; text-decoration: none; outline: none; cursor:pointer; cursor:hand; }
a:focus             { color: #888; text-decoration: none; outline: none; }
:focus                 { -moz-outline-style:none;text-decoration: none; outline: none; }           
#main_content a, #main_content_iframe a, a.link { text-decoration:underline; } /** underline links not in panel nav **/ 


/* 
Generic Base Styles
.............................................................*/ 
.clearfix:after {  content: ".";  display: block;  clear: both;  visibility: hidden; line-height: 0;  height: 0;  }  
.clearfix { display: inline-block;  }  
html[xmlns] .clearfix {  display: block;  }  
* html .clearfix {  height: 1%;  }

.hidden     {display: none;}
.invisible { visibility: hidden;}
.clickable { cursor: pointer; }
.unclickable { cursor: default !important; }
.shoppable {text-decoration: underline; cursor: pointer; }
.clear { float:none; clear: both; }  
.white { color: #fff;}
.offMap {position:relative;left:-5000px;} 
.cms_layer { z-index:0 !important } /* cms overrides */ 
.bold_white {font-weight: bold;color: #fff;}
.noflash { width:100%;height:100%;font-size:0px; text-indent:-5000px;display:none;}

.sprite, .sprite-off, .btn { display:block; text-indent:-5000px; font-size:0px; background-repeat:no-repeat; background-position:0px 0px;width:100%; }
.sprite:hover  { background-position:0px 50%;cursor:pointer;cursor:hand;}
.sprite-on { background-position:0px 100%; }
.sprite-on:hover  { background-position:0px 100%; }

/* - - - - -- - - - - - - - - - - - - - - - 
Global Layout
- - - - - - - - - - - - - - - - - - - - - */
 
HTML {margin-bottom: 1px;} 
BODY { position: relative; } 
HTML, BODY, #module_wrapper { width: 100%;color:#888888;letter-spacing: 0.02em;} 
BODY, #module_wrapper {height: 100%;background: #000 url(/images/common/bkg_sub.gif) 0 0 repeat-y; font:10px/1.22 PGothic, ms ui gothic, osaka, sans-serif;}
#main_container { height: 100%; }

BODY.macpro, BODY.macpro #module_wrapper, BODY.macpro #main_container  {background-color: #eee; } 
BODY.macpro #main_content  {letter-spacing: 0em; }
 
#main_table { height: 100%; }
#main_table .main_td { vertical-align: top; height: 100%; }
#main_content_td, #panel_nav_td, #panel_open_td { vertical-align: top; }
#main_content { height: 100%; position:relative; } 
#main_content_btm { padding-top: 20px; } 
#column_spacer_td, #column_spacer { width: 1px; height: 100%; vertical-align:top;}

#main_bkg_div, #flash_placeholder { width:100%;height:100%;} 

/** Layout for Pages with no open Panel, e.g. pages with full flash or Checkout pages **/ 
        .noOpenPanel, .noOpenPanel #module_wrapper {background: #000 url(/images/common/bkg_site.gif) 0 0 repeat-y;}
        .noOpenPanel #main_content { width: 100%; height: 100%; min-width: 600px;padding:0px; }
        .noOpenPanel #main_table { width: 100%; }
        .noOpenPanel #color_nav_td { width: 3px }
        .noOpenPanel #panel_open_td { width:1px;overflow:hidden;background:none; }
        .noOpenPanel #panel_open { width:1px;overflow:hidden;background:none; }
        .noOpenPanel #panel_open_spacer { width:1px;overflow:hidden;background:none; }
        .noOpenPanel #homepage_flash_container { width: 100%; height: 100%; } 
        .noOpenPanel #main_bkg { width: 100%; height: 100%; } 
        .noOpenPanel #main_content_btm { display: none;padding:0px; }  

        .no-open-panel, .no-open-panel #module_wrapper {background: #000 url(/images/common/bkg_site.gif) 0 0 repeat-y;}
        .no-open-panel #main_content { width: 100%; height: 100%; min-width: 600px;padding:0px; }
        .no-open-panel #main_table { width: 100%; }
        .no-open-panel #color_nav_td { width: 3px }
        .no-open-panel #panel_open_td { width:1px;overflow:hidden;background:none; }
        .no-open-panel #panel_open { width:1px;overflow:hidden;background:none; }
        .no-open-panel #panel_open_spacer { width:1px;overflow:hidden;background:none; }
        .no-open-panel #homepage_flash_container { width: 100%; height: 100%; } 
        .no-open-panel #main_bkg { width: 100%; height: 100%; } 
        .no-open-panel #main_content_btm { display: none;padding:0px; } 
        

.pop_body { background: #fff; } /* popup/cms/plain window body */ 

.preload_iepngfix { display: none; } /* for ie6 */



/* - - - - - - CSS Document - - - - - - - - - 
Description: Sliding Panel Styles
- - - - - - - - - - - - - - - - - - - - - */

/* Panel Nav
-----------------------------------------------------*/ 
#panel_nav_td { width: 1px; }
#panel_nav_spacer { width: 1px; }
#panel_container { height: 100%; } 
 
/** Checkout (n) in the gnav **/
#shopping_bag { clear:both;display: block;padding-top: 2px;line-height: 12px;}
#shopping_bag A.checkout { float: left; margin-right: 6px; width:70px;height:12px; }
#shopping_bag a { color: #777; } 

.panel {
    background: #181818;
    border-left: 1px solid #373737;
    border-right: 2px solid #373737;
    width: 280px;
    height: auto;
    min-height: 100%;
    padding: 0;
    position: absolute;
    top: 0;
    left: -96px; 
    font-size: .9em;
    z-index: 2;
    display: none;
}

.panel_active { z-index: 5; } /* z-index for currently visible sliding panel */
#panel_open { display: none; }
#panel_open_td { width: 1px; }
#panel_open .progress,.panel .progress { margin: 90px 0 0 130px;display: block;}
.panel_btm { height: 30px; }

/* cms positioning */
.panel_cms_html { position: relative; top: 9px; }
#panel_open .panel_cms_html { margin-top: 36px; top: 0; }
#psubnav_macpro { margin: 0; }
#psubnav_macpro .panel_cms_html { margin-top: 0; top: -28px; }

.panelnav_container {margin-bottom:30px;} 

/** open panel **/
#panel_open_td { 
    width: 283px;
    background-image: url(/images/common/bkg_panel_open.gif);
    background-repeat: repeat-y;
}
#panel_open_spacer { width: 283px; height: 1px; }
#panel_open {
    display: block;
    width: 280px;
    padding: 0 0 0 1px; /* compensate for 1px border in bg */  
}
#panel_open .panelnav_container { padding: 0 0 30px 0; }


/* Close Button
--------------------------------*/
a.close, div.closedark, div.closelight {  
    display: block;
    background: transparent url(/images/common/btn_close.gif) 0 0 no-repeat;
    width: 8px;
    height: 8px;  
    text-indent: -9999px;  
    margin: 12px 0 0 257px;
    overflow: hidden;
    cursor: pointer;
}       
a.close:hover { background-position: 0 -8px;}    
div.closedark { background-position: 0 -16px; }    
#panel_open_topclear { height: 20px; } /* where close button would be in panel_open */


/* Category Level
----------------------------------*/
.panelnav_subnav { padding-bottom: 20px; }
.panelnav_detail_container { margin: 28px 0 10px 0; }
.panelnav_subnav_mixed .panelnav_detail_container { margin: 0; }
.panelnav_detaillink_container { margin: 28px 0 0 0; display: none; }
.panelnav_accordion_container { margin-top: 38px; }
.panelnav_accordion_container li { line-height: 8px; }
.panelnav_subnav_mixed .panelnav_accordion_container { margin-top: 0; padding-top: 9px; clear: both; }

.panelnav_link {background: none;width: 280px;margin: 0 0 -2px 0;float: left;cursor: pointer;} 
.panelnav_link a { display: block; } 
a.panelnav_link:hover { background: #282828; } 
.panelnav_link_on { background: #282828; } 
.panelnav_link h3 {margin: 1px 0 2px 5px;width: 203px;height:18px;height:12px;color: #aaa;font-weight: bold;;} 

.panelnav_detail {width: 265px; margin: 0 0 0 7px;border-top: 2px solid #282828;border-bottom: 2px solid #282828;padding: 7px 0;float: left;} 
.panelnav_detail_text {float: left;width: 208px;} 
.panelnav_detail_text H3 {width:200px;/**height:12px; MK: clashes with sprites**/;height:18px;display:block;} 
.panelnav_accordion_container .panelnav_detail_text H3 { height:12px; }
.panelnav_detail p {line-height: 1.2; color: #888888; padding: 0 10px 0 5px;margin: 0;}

.panelnav_detail .pop_message p,
.panelnav_detail .pop_message span { padding: 0;color: #777 !important; }

.panelnav_thumb, .panelnav_thumb_off, 
.panelnav_thumb_on {
    width: 56px;
    height: 56px;
    float: left;
}

.panelnav_thumb[class] {
    margin-left: 0px;
}

.panel .link_hd, #panel_open .link_hd {
    margin-left: 12px;
    display: block;
}
.panel .link_hd img, #panel_open .link_hd img {
    width: 250px;
    height: 18px;
}

/**.panelnav_detail .panelnav_detail_hd { width: 200px; height: 12px; } MK: clashing with sprites **/

.panelnav_cell_category .panelnav_detail_hd,
.panelnav_detaillink_container .panelnav_detail_hd { height: 18px; }

#psubitem_featured_goodbyes .panelnav_detail_hd { width: 250px; }

div.panelnav_link + div.link_hd { padding-top: 6px; clear: both; }

.panelnav_link .nothumb .panelnav_detail_text {
    float: left;
    width: 260px;
}
.panelnav_hspacer {
    width: 1px;
    height: 56px;
    float: left;
}


/* Accordion List Level
-----------------------------------------*/

.panelnav_content {
    margin: -2px 0 0 14px;
}
.panelnav_content a {
    display: block;
    width: 250px;
    height: 18px;
}

.panel .accordion_content, #panel_open .accordion_content {
    display: block;
    line-height: 0;
    margin: 8px 0 15px 0;
}

.panel .accordion_hd, #panel_open .accordion_hd {
    margin: 1px 0 0 12px;
    cursor: pointer;
    line-height: 0; 
    width: 250px;
    height: 18px;
    background-repeat:no-repeat;
    padding: 0;
}
  
#accountnav .accordion_hd { margin-left: 12px; }


/* Panel Title/Description
-----------------------------------------*/

.panelnav_section_descr { 
    width: 245px;
    margin-left: 12px;
}

.panelnav_section_hd {
    padding: 7px 0 7px 12px;
}


/* used? */
#panelnav_desc {
    padding: 48px 0 0 13px;
    width: 248px;
    margin: 0 0 15px 0;
    float: left;
}

#panelnav_desc img {    margin: 0 0 15px 0;} 
#panelnav_desc p { line-height: 1.2;} 
#panelnav_desc h3 { margin: 20px 0 2px 0;}

/* Default Category & Item 
-----------------------------------------*/

/* dimmed style for items in selected cat */
.panelnav_category_default {}
.panelnav_category_default .panelnav_detail p,
.panelnav_category_default .panelnav_detail span { color: #222; }

.panelnav_category_default .unclickable a,
.unclickable panel_detail { 
    cursor: default;
}

.panelnav_link_on .panelnav_detail p,
.panelnav_link_on .panelnav_detail span { 
    color: #888888;
}


.panelnav_default { background: #282828; }
.panelnav_default .panelnav_detail p { 
/** color:#555555;888CHANGE  **/
    color: #888888;
}

#result_title {
    padding: 0px 10px 15px 10px;
    position:relative;
    top: -3px;
}


/* Section-specific Panel Styles */

/* My Mac Panel
--------------------------------*/

#my_mac_panel { padding-top: 10px; }
#panel_open #my_mac_panel { padding-top: 37px; }
#my_mac_panel .panelnav_content { margin: 0 0 0 12px; }
#my_mac_panel #special_offers { margin-bottom: 8px; }
#my_mac_panel A { text-decoration: underline; color: #aaa; } 
#my_mac_panel A:hover { color: #fff; }
.overlay_image { 
    position:relative; 
    top:-18px;
    left:144px;
    z-index:9999; 
}

p.logged_in { margin: 0; padding: 0 0 3px 0; }


/* Profile/Account
--------------------------------*/
#accountnav ul {
    line-height: 0;
    display: block;
    margin: 0;
    padding: 0;
}
#accountnav #accountnav_accordion { visibility: hidden; } /* hide until loaded */
#psubitem_myaccount_sub A { height:18px;}

#accountnav .accordion_hd { margin-top: 0; }
#accountnav .accordion_content { margin: 0 0 0 12px; }

#co_accountnav { margin: 3px 0 28px 0; }
#co_accountnav .signout_link { cursor: pointer; }

#co_signin_nav {
    position: relative;
    padding-top: 30px;
    margin-left: 12px;
    clear: both;
}   

#view_profile, #signout,
#create_account, #signin { display: block; margin-top: 6px;}

.italic_grey {
    color: #747775;
    font-size: 10px;
    font-style: italic;
}


/* Giftcards
--------------------------------*/
#psubitem_aboutgiftcard { float: none; clear: both; padding-top: 14px; }


/* Search/Discontinued
--------------------------------*/

.panelnav_disc_hd {
    padding: 7px 0 7px 12px;
    /*position:relative;*/
}

.panelnav_disc_descr { 
    width: 245px;
    margin-left: 12px;
}

#discontinued_search {
    margin: 0 0 16px 12px;
    width: 245px;
}

#discontinued_search FORM { float: left; }

#discontinued_search .text_field {
    background: #000 url(/images/forms/bkg_input_utility.gif) 0 0 repeat-x;
    border: 1px solid #323332;  
    border-top-color: #323332;
    border-right: 0;  
    color: #888;
    font-family: arial;
    font-size: 11px;
    width: 125px;
    height: 16px;
    padding: 5px 0 0 5px; 
    margin: 0;
    float: left;
}

#discontinued_search input.btn { 
    border: 0; 
    width: 27px;
    height: 23px;
    padding: 0;
}

#discontinued_search #disc_search_progress {
    margin: 16px 0 0 170px;
    padding: 0;
    display: none;
}

#disc_search_hd { margin-top: 9px; }

#psubnav_search.panelnav_detail_container { margin: -4px 0 10px 0; }

.search_results_message {
    color: #ffffff;
    padding-left: 12px;
    width: 230px;
    height: 46px;
}
.search_results_message span { white-space: nowrap; }

.search_content_results { display: block; padding-bottom: 0px; }

p.search_content_header {
    font-family: arial; 
    color: #aaa; 
    font-size: 11px; 
    font-weight: bold;
}

.search_results_hd { padding: 0 0 11px 12px; }

.panelnav_link_quickbuy { cursor: default; }

.panelnav_link_search h3,
.panelnav_link_quickbuy h3 { margin: 1px 0 0 5px; }

.panelnav_link_quickbuy .panelnav_detail_text p { 
    padding: 0 0 0 5px;
    width: 198px;
    height: 20px;
    clear: both;
}

.panelnav_link_search .panelnav_detail_text p { height: 32px; }

.panelnav_link_quickbuy .inventory_status { 
    font-weight: bold;
    margin: 9px 0 0 5px;
    width: 190px;
    display: none;
}

.panelnav_link_quickbuy .panelnav_btn_add { 
    width: 93px;
    height: 23px;
    padding: 0;
    margin: 0;
}

.panelnav_link_search .panelnav_btn_view_shades { 
    margin-left: 5px;
    background-image:url(/images/search/btn_view_shades.gif);
    width:200px;
    height:12px;
}
.panelnav_link_on .panelnav_btn_view_shades {
	background-position:0px 100%;
}

.smoosh_small {
    float: left;
    width: 56px;
    height: 56px;
    overflow: hidden;
}


/* - - - - - - CSS Document - - - - - - - - - 
Description: Forms Styles
- - - - - - - - - - - - - - - - - - - - - */ 

/* Body Forms
-----------------------------------------------------*/

#input_offercode { font-size: 11px; }

.form_container { float: left; margin: 0; position:relative;}

input[type=text], input[type=password], textarea {   
    font-family: arial;
    font-size: 11px;
    width: 174px;
    padding: 3px 0 3px 5px;  
    background-color: white;
    border-top: 2px solid #666;
    border-left: 2px solid #666;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

input[type=text], input[type=password] { 
    height: 13px; 
}

textarea { 
    height: 125px;
    overflow: auto;
}

input.radio,
input.checkbox {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    float: left; 
    border: 0;
    padding: 0;
}

fieldset { margin-top: 7px; }
.form_select { margin: 0 0 7px 0; float: none; clear: both; }
.form_select_last { margin-bottom: 0; float: none; clear: both; }
.form-select-multi { margin: 0 0 7px 0; float: none; clear: both; }

.form_container .form-button {
    width: 184px;
    height: 23px;
    background: none;
    border: none;
    margin: 30px 0 0 0;
    padding: 0;
}
  
.form_container .signin-submit {
    width: 182px;
    height: 23px;
    background: none;
    border: none;
    margin: 15px 0;
    padding: 0;
}

input#btn_submit {
    width: 182px;
    background: none;
    border: none;
    margin: 30px 0 0 0;
    padding: 0;
}

.checkout_field_p { margin: 0;}
p.p_signup { margin: 0 0 10px 0;}
.checkout_field { margin-bottom: 0; padding-bottom: 6px; }
.checkout_field[class], .form_dropdown { padding-bottom: 0; margin-bottom: 6px; }

.form_container fieldset label {
    color: #888;
    display: block;
    font-size: 11px;
    line-height: 11px;
    margin: 0 0 3px 7px;
}


.form_select label,
.form_select label.side { padding-top: 0px; display: inline-block; width: 270px; }
/*.form_select label.field_label { padding-top: 6px; display: block; width: 270px; }*/
.form_select label.img_label { padding-top: 3px; }
.form_select label.side img { padding-top: 3px; }
.btn_label { margin-top: 12px; }
.form-select-multi label:after { content: ".";  display: block;  clear: both;  visibility: hidden; line-height: 0;  height: 0; } 
.form-select-multi label { display: block; border: 3px solid #000; /* forces new line */ }

.form_container p { margin-bottom: 0; line-height: 1.2; }
.form_container .text_container p { width: 350px; }

.text_container .form_select input {
    margin-top: 5px;
}
 
#reg_form p { margin-bottom: 0; line-height: 1.2; }


#btn_bottom { margin: 30px 0 0 0;}
#btn_top { margin: 8px 0 0 0;}

#check_balance {
    margin: 15px 0 6px 0;
    display: block;
}
 
#f { margin: 0; /**height: 23px; MK:why is this here?**/ float: left; }

#f p { margin-bottom: 0; line-height: 1.2; }


/* SELECT: DropDownSelect
-----------------------------------------------------*/

/* ss: DropDownSelect TK */ 
.form_container SELECT { width: 182px; } /* ss: for now */
SELECT {padding:2px 0 2px 0;}
/*SELECT {padding:1px 0 3px 0;} */
SELECT OPTION {padding:0 2px;}

 

/* Error styles
-----------------------------------------------------*/

/*Errors*/
.form-errors-container {
    padding: 20px 0 30px 0; 
    width: 300px;
}

H2.error-header { background:url(/checkout/images/headers/h_oops.gif) 0 0 no-repeat; width:180px; height:12px; margin: 0; }
#my_mac_panel H2.error-header { display: none; }

#shipping_error .form-errors-container,
#billing_error .form-errors-container,
#reg_form .form-errors-container,
#contact_error .form-errors-container { padding: 20px 0 26px 0; }

#signin-container .form-errors-container { padding: 6px 0 24px 0; }
#review_error .form-errors-container { padding: 30px 0 0 0; }
#address_book_error .form-errors-container { padding: 20px 0 30px 0; }
#back_to_mac_error .form-errors-container { padding: 26px 0 26px 0; }
#giftcard_error .form-errors-container { padding: 30px 0 6px 0; }
#my_mac_panel .form-errors-container { padding: 15px 0 30px 0; width: 265px; }

.form-errors-background { background: #f8f8f8; padding: 7px; }
.form-errors { margin: 4px 0; color: #777; font-weight: normal; }
.form-errors li { margin: 5px 0; }
.form-errors .error-bullet { color: #ff0000;}



.field_error .select_button {
    background: transparent url(/images/forms/bkg_select_error.gif) repeat-x top left;
}

.field_error .select_dropdownLabel {
    color: #fff;
}

.field_error .select_dropdown_arrow {
    background: url(/images/forms/select_arrow_error.gif) no-repeat top right;
}

.form_select input,
.form_select input.field_error { background: none; }


/* - - - - - - CSS Document - - - - - - - - - 
Description: Base Styles for Popover Messages
- - - - - - - - - - - - - - - - - - - - - */

.pop_body { background: #fff; }
.pop_wrapper { position: relative; z-index:10; margin: 0; }
.pop_container { position: absolute; left: -10000px; } /* load off-screen */

/* Links */
.pop_message a, .pop_prod a, .pop_email a { color: #444; text-decoration: underline; }
.pop_message a:hover, .pop_prod a:hover, .pop_email a:hover { color: #111; }

/* Description Text */
.pop_desc { float: left; color:#777;/*** 888CHANGE**/ }
.pop_desc p { line-height: 1.2; font-size: 11px; }
.pop_desc .pop_title { 
    margin: 0 0 2px 0; 
    font-weight: bold; 
    display: block;
    line-height: .9;
    font-size: 11px; 
    width:100%;
}

.pop_desc .pop_inv_status {
    font-size: 11px;
    line-height: .9;
    display: block;
}

/* Close Button */
a.pop_close {
    background-image: url(/images/popup/pop_close.gif);
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    width: 7px;
    height: 8px;
    overflow: hidden;
    float: right;
    position: relative;
    right: 7px;
}

a.pop_close:hover { background-position: 0 -8px; }

/* Color Swatch */
.pop_swatch { 
    float: left;
    margin: 0 0 0 7px;
    width: 160px;
}


/* Popup Message & Popup Email
---------------------------------------------------------*/
.pop_message, .pop_prod, .pop_email {
    background: #f8f8f8 url(/images/popup/bkg_popup.gif) left bottom repeat-x;
    border: 1px solid #fff;
    padding: 7px 0 0 7px;
}

.pop_message { width: 234px; }
.pop_message .pop_desc {
    width: 211px; 
}

.pop_email { width: 169px; }
.pop_email .pop_desc {
    width: 162px; 
} 

.pop_message .pop_desc p, .pop_email .pop_desc p { margin: 0 0 8px 0; }

.pop_message .pop_btn, .pop_email .pop_btn { margin-bottom: 7px; }

.pop_message .pop_btn { float: right; margin-right: 4px; }
.pop_message .cart_item_count { float: left; margin-top: 7px; white-space: nowrap; }

.rel_prod .pop_container { margin: -4px 0 0 62px; }


/* Popup Left Nav
---------------------------------------------------------*/

#pop_search_invalid,
#pop_email_valid,
#pop_email_invalid { margin-top: -55px; }

#pop_location_invalid { margin-top: -70px; }


/* Popup Product
---------------------------------------------------------*/
.pop_prod { width: 234px; }

.pop_prod .thumb {  float: left; }

.pop_prod .pop_desc { margin: 0 7px 0 7px; width: 150px; }
.pop_prod .pop_desc p { margin: 0; }

.pop_prod .pop_btn_container { float: left; margin: 3px 0 0 7px; width: 170px; }
.pop_prod .pop_add_btn { float: right; margin-bottom: 7px; margin-right: 3px; }
.pop_prod .pop_remove_btn { float: left; margin-top: 5px; }
.pop_checkout_btn, .pop_favorites_btn { float: left; padding-bottom: 7px; }
.pop_continue_btn { margin: 6px 0 0 16px; }

#discontinued_prod .pop_wrapper {
    left:-139px;
}

/* - - - - - - CSS Document - - - - - - - - - 
Description: Global Styles for the Related Content Box
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.rel_container {
    width: 446px;
    float: left;
    margin: 30px 0 30px 0;
}

.cross_sell_container {
    width: 446px;
    background: #181818;
    float: left;
}

.cross_sell_btm {
    background: #000 url(/images/related/bkg_border_bottom.gif) 0 0 no-repeat;
    width: 446px;
    height: 7px;
    float: left;
    margin-top: -1px; /* covers up last border in rel_prod, rel_bill */
}

.cross_sell_container_small {
    width: 250px;
    background: #181818;
    float: left;
}

.rel_content_small {
    border-right: 1px solid #313131;
    border-left: 1px solid #313131;
    width: 248px;
    float: none;
}

.rel_content {
    border-right: 1px solid #313131;
    border-left: 1px solid #313131;
    width: 444px;
    float: none;
}

#discontinued_xs_container {
    background: #000000;
}

.mixable_replacements_container {
    height: 162px;
}

.replacement_prod_container {
    height: 95px;
}

.replace_prod_rel_top {
    height: 22px;
    background: url(/images/related/bkg_title_top.gif) 0 0 no-repeat;
    width: 446px;
}

.mixable_rel_top {
    background: url(/images/related/bkg_title_top.gif) 0 0 no-repeat;
    width: 446px;
    height: 21px;
}

/* Related Content Header 
----------------------*/
.bkg_rel_top { 
    background: url(/images/related/bkg_title_top.gif) 0 0 no-repeat;
    width: 446px;
    height: 21px;
    }

div.rel_head   {
    /*display: block;*/
    border-bottom: 1px solid #2a2a2a;
    padding: 4px 5px 4px 7px;
}
div.rel_head_empty   { border-bottom: 1px solid #2a2a2a; padding: 4px 5px 4px 7px; height: 9px; }

div.rel_head A, div.rel_head SPAN {
    display: block;
    float: right;
    /* Added a reverse arrow direction */
    /* background-image: url(/images/related/arrow.gif); */
    background-image: url(/images/related/arrow_rev.gif);
    background-repeat: none;
    margin: -16px 2px 0 0;
    width: 8px;
    height: 8px;
    text-indent: -9999px;
    overflow: hidden;
}

div.rel_head span[class] { margin: -8px 0 0 0; }
.ie div.rel_head SPAN {margin:-16px 2px 0 0;}

/* Arrow positioning open or closed or rev_arrow */
div.rel_head .open { background-position: 0 0;}
div.rel_head .closed { background-position: 0 -8px; }
div.rel_head .rev_arrow { background-position: 0 -18px; margin-right: 15px; }
.ie div.rel_head .rev_arrow { margin-right: 20px; }

/* collection_browser type layout in whats_new, looks, picks */
.collection_display  { padding: 0 0 0 15px !important; }  
.collection_display .display_container { margin: 0 0 5px -13px; } 
.collection_display #collection_flash { width: 460px; height: 370px; } 

#main_content {
    /*padding-left: 490px;*/
    padding-left: 14px; /* column spacer between nav & main_content takes up 1px */
    width: 475px;
}

#main_content h2 { 
    color: #fff;    
    font-size: 2.1em; 
    margin-bottom: 12px;
    height: 18px;
}

#main_content p a, #main_content p a:visited, 
#main_content p a:hover, #main_content p a:focus { text-decoration: underline;}

.text_container { margin: 0 0 0 7px; }

.text_container p {
    line-height: 1.1;
    margin-top: 0;
    margin-left: 0;
}
 
/** Collections **/ 
#collection_looks_header {display:block;width:200px;height:12px;text-indent:-5000px;background-position:7px 2px;background-repeat:no-repeat;}  
#slideshow_header {width:200px;height:12px;background-position:0 0;background-repeat:no-repeat;height;display:block;}   
#slideshow_slide {width:444px;height:325px;overflow:hidden;}
#slideshow_prev, #slideshow_next {margin-top:-11px;}
    
/** Video Tips **/
#video_tips {padding: 5px 8px;background: #282828;height: 88px;border-bottom: 1px solid #313131; } 
#video_tips #tip_title {color: #fff;/**background-color: #282828;DEVTMP **/ font-weight: bold; } 
/**#video_tips H3 {display:none;} **/
#video_tips P { line-height:1.1em; }
.rel_video {margin-left: -1px; padding: 0; width: 448px; height: 346px; /** height: 319px; **/} 

/* Video
---------------------
.rel_video { padding: 6px 6px 0 6px; } */

/* Color Swatches
---------------------- */
.rel_prod .swatch_by_color {
    width: 240px;
    padding-left: 56px;
}

/* Products
---------------------- */
/* Product Descriptions
----------------------- */
span.price {
    display: block;
    font-weight: bold;
    color: #fff;
}

/* Select Dropdowns 
----------------------*/
#prod_options { margin: 20px 0 0 0; }
.ie6 .popupVisible SELECT {visibility:hidden;} /** SPP page **/

li#prod_sort, li#prod_filter, li#prod_rec { 
    width: 184px; 
    height: 24px; 
    margin-bottom: 5px; 
    }
 
/* Add to Bag
-----------------------*/
#btn_add_to_bag { float: left; margin-top: 30px;}

/* Add to Favorites and View Related Products 
-----------------------------------------------*/
#btn_save_to_favorites, #btn_view_related, #btn_color_play {
    float: left;
    margin-top: 6px;
}
 
.btn_product_action { margin-top: 6px; }

.rel_prod, .rel_prod_tips {
    border-bottom: 1px solid #2a2a2a;
    padding: 5px 7px 0 7px;
}

.last { height: 57px; border: none; } /* Removes the border from the bottom box in the related content box */

.rel_prod_details .thumb, .rel_prod_details { float: left; }
.rel_prod_details .thumb { padding-top: 2px; }
.rel_prod_add, .rel_prod_add *, .rel_prod_view, .rel_prod_view * { float: right; }

.rel_prod_details { width: 310px; margin-bottom: 7px; }
.rel_prod_tips .rel_prod_details { width: 360px; }
.rel_prod_add, .rel_prod_view { width: 116px; }
.rel_prod_tips .rel_prod_add { width: 59px; margin-top: 48px;}

.rel_prod_details .rel_prod_head { display: block; margin: 0 0 2px 65px; width:200px;height:12px;}

.rel_prod_add span {
    font-weight: bold;
    color: #fff;
    margin: 0;
    padding: 0;
    
    /** MK: buggy in IE6 & IE7, removing it doesn't seem to cause issues in ff3
    float: right;   
    padding-left: 15px;**/
    
    width:100%;
    text-align:right;
}

.rel_prod_details p, .rel_prod_tips .rel_prod_details p { 
    line-height: 1.1; 
    padding-left: 64px;
    margin: 0;
}

.rel_prod .rel_prod_descr { width: 246px; height: 31px; }

.rel_prod_tips .rel_prod_details p { width: 300px; }

.rel_prod_add input.btn_rel_prod_add { margin: 8px 0; }
.rel_prod_add .btn_rel_prod_remove { margin-top: 6px; width: 110px; }
.rel_prod_add .clear { height: 0; line-height: 0; font-size: 0px; }

.rel_prod_add .swatch_select { margin-top: 34px; }
.rel_prod_add .inventory_status { color:#888; font-weight: normal; }

.rel_prod_view .btn_rel_view { margin-top: 15px;}

p.rel_prod_title, .rel_prod_tips p.rel_prod_title { font-weight: bold; color: #aaa;}
p.rel_prod_subtitle { color: #aaa;}

/* Products Header
---------------------------------*/
.bkg_prod_off, #bkg_prod_on { 
    width: 446px;
    height: 22px;
    }

.bkg_prod_off { background: #000 url(/images/related/bkg_prod_off.gif) 0 0 no-repeat; }
.bkg_prod_on { background: #000 url(/images/related/bkg_prod_on.gif) 0 0 no-repeat; }
.bkg_prod_red { background: #000 url(/images/related/bkg_prod_red.gif) 0 0 no-repeat; }

.bkg_prod_off a.rel_head { border: 0;}
.bkg_prod_on a.rel_head { border-right: 0; border-top: 0; border-left: 0;}


 /* add selectors here for font sizing 
----------------------------------------------------*/
add selectors here {font-size: 77%} /* =10 */

#main_content, 
#main_content_iframe,
#shopping_bag a, #utilitynav input, 
.panel, #panel_open,  
#replace, .replace_r, 
body#pop p, #search_dropdown, 
.pop_prod,
.pop_email, #cp_instructions {font-size: 85%} /* =11 */

p#swatch_select {font-size: 92%} /* =12 */

#form_entry textarea {font-size: 100%} /* =13 */
 
 
/* Color Play Flash Gradient Bar
----------------------------------*/
#color_nav_container {
    position: absolute;
    top: 0;
    left: 187px;
    width: 8px;
    height: 100%;
    z-index: 10;
}
#color_nav_container object,
#color_nav_container embed { display: block; height: 100%; }
#color_nav, #color_nav_standalone { width: 8px; }
#color_nav_td { width: 4px; }
#color_nav_spacer { width: 4px; }

#color_nav_standalone { 
    position: absolute;
    top: 0;
    left: 187px;
    height: 100%;
    z-index: 10;
}/* safari only */

/* Global Nav
----------------------------------------------------*/
#globalnav_container {
    background: #1e1e1e url(/images/common/bkg_main_panel.gif) 0 0 repeat-x;
    width: 172px;
    padding: 0 0 0 15px;
    position: relative;
    min-height: 620px;
    height: 100%;
    top: 10;
    left: 0;
    z-index: 101;
}

#globalnav_td {
    height: 100%;
    width: 187px;
    background: #1e1e1e url(/images/common/bkg_main_panel.gif) 0 0 repeat-x;
}
 
#globalnav_container H2 A {margin:9px 0 32px;display:block;text-indent:-5000px;font-size:0px;}/** mac logo **/
 
ul#globalnav { width: 160px; margin: 0; margin-bottom: 0; }
#globalnav ul { margin: 0; margin-bottom: 0; }

#globalnav li, #globalnav li ul li {
    width: 157px;
    line-height: 0;
    display: block;
    margin: 0;
    margin-bottom: 0; /* need both margin defs to override cms styles */ 
}

#globalnav .accordion_content { margin-top: -1px; }
 
#globalnav .sprite  {  width: 157px;height: 18px;  } 

#globalnav li#pnav_my_mac { position: relative; }
#globalnav .overlay_image {position: absolute;top: 0;}
#globalnav .overlay_image img {width:  18px;height: 18px;display: inline;}


/* Utility Nav
----------------------------------------------------*/
#utilitynav {
    position: absolute;
    bottom: 180px;
    height: 1%;
    margin-left: -7px;
}

#utilitynav .utilitynav_form { margin: 0 0 5px 0; }
#utilitynav fieldset { margin-top: 0; }
#utilitynav label { display: none; } 

#utilitynav input { 
    background: #000 url('/images/forms/bkg_input_utility.gif') 0 0 repeat-x;
    border: 1px solid #313131;  
    border-right: 0;  
    color: #888;  
    font-family: arial;
    width: 143px;
    height: 16px;
    padding: 4px 0 0 5px; 
    margin: 0;
    float: left;
}

#utilitynav input#search {
    background-image: none;
    background-color: #f8f8f8;
    color: #1e1e1e;
    height: 17px;
}

#utilitynav input.btn { 
    border: 0; 
    width: 22px;
    height: 22px;
    padding: 0;
    background-color: #292929;
}

#utilitynav #email_list_submit { float: left; }

#utilitynav .utilitynav_button {
    background: url('/images/gnav/unav_btn.gif') 0 0 no-repeat;
    color: #777;  
    font-family: arial;
    width: 171px;
    height: 22px;
    margin: 0 0 5px 0;
    overflow: hidden;
}  

#utilitynav .utilitynav_button img { padding: 5px 0 0 8px; }

#utilitynav_links { margin: 20px 0 0 7px;}

#utilitynav_links li { margin-bottom: 5px; }


/* Search input dropdown
---------------------------------------------------------------*/
#search_dropdown { 
    position: absolute;
    z-index: 150;
    width: 158px;
    background: url(/images/common/btm_search_dropdown.gif) left bottom no-repeat;
    padding-bottom: 5px;
}

#search_dropdown li {
    border-left: 1px solid #363636;
    border-right: 1px solid #363636;
    border-bottom: 1px solid #484848;
    background: #121212;
    font-weight: bold;
    padding: 3px 0 3px 7px;
}

#search_dropdown li.last { border-bottom: none; padding: 3px 0 0 7px;}

#search_dropdown li a {
    color: #aaa;
}
 
#page_overlay_container_div {position:absolute;z-index:30000;top:250px;left:38%;width:245px;height:84px}   
.page_overlay_container_div_closed {display:none;z-index:-9999px;visibility:hidden;height:0px;width:0px}

/* Footer (specific positioning and sizing styles
    can be found in home.css and sub.css)
----------------------------------------------------*/
#footernav {
    position: fixed;
    z-index: 2000;
    font-size: 100%;
    left: 0;
    bottom: 0;
    background: #fff;
    color: #acacac;
    height: 18px;
    width: 100%;
    padding: 0;
}

#footernav #copyright {display: inline-block;margin-top: 3px;padding: 0;line-height: 15px;float: left;}
#footernav ul {margin: 3px 20px 0 16px;padding: 0; float: left;}
#footernav ul li { height: 8px; float: left;margin-right: 20px;}
#footernav LI A { text-indent:-5000px;font-size:0px;}
#footernav LI A:hover { background-position: 0% 100%;}


/* Adding footer nav styles for country chooser menu. (AD) */

#footernav #country_chooser {
    float: right;
    width: 129px;
    margin: 2px 3px 0 0;
    }

    #footernav #countries_hd {
        padding-top: 15px;
        height: 0px;
        overflow: hidden;
        background: transparent url(/images/country_chooser/button.gif) no-repeat 0 0;
        display: block;
        }
    #footernav #countries_container {
        position: relative;
        z-index:104;
    }
    
    #footernav #country_chooser UL {
        position: absolute;
        padding-top: 4px;
        margin: 0;
        top: -229px; /* Add/subtract 15 pixels for each menu item */
        height: auto;
        background: transparent url(/images/country_chooser/top.gif) no-repeat 0 0;
        }
    #footernav #country_chooser UL LI {
        height: auto;
        background: #eee url(/images/country_chooser/bg.gif) repeat-x 0 0;
        padding-top: 1px;
        width: 129px; 
        } 
        #footernav #country_chooser UL LI.last {
            height: 3px;
            width: 129px;
            background: transparent url(/images/country_chooser/bg.gif) repeat-x 0 0;
            padding: 0 0 2px 0;
            }

    #footernav #country_chooser UL LI A {
        height: 0;
        width: 129px;
        padding-top: 14px;
        display: block;
        text-indent: 0;
        overflow: hidden;
        background: transparent url(/images/country_chooser/option_other.gif) repeat-x 0 0px;
        repeat-x 0 0;
        }

        

        #footernav #country_chooser UL LI A:hover {
            background-position: -135px 0;
            }
        #footernav #country_chooser UL LI.current A,
        #footernav #country_chooser UL LI.current A:hover {
            background-position: -270px 0;
        }

/* Common Margin Usage (ie. ml6 = margin left 6px)
----------------------------------------------------*/
.ml6, p.ml6 { margin-left: 6px; }

.mt0, p.mt0, fieldset.mt0 { margin-top: 0; }
.mt6, p.mt6 { margin-top: 6px;}
.mt10, p.mt10 { margin-top: 10px;}
.mt15, p.mt15 { margin-top: 15px;}
.mt20, p.mt20 { margin-top: 20px; }
.mt30, p.mt30 { margin-top: 30px; }

.mb3, p.mb3, div.mb3 { margin-bottom: 3px;}
.mb5, p.mb5 { margin-bottom: 5px;}
.mb6, p.mb6 { margin-bottom: 6px;}
.mb15, p.mb15, input.mb15 { margin-bottom: 15px;}
.mb20, p.mb20, input.mb20 { margin-bottom: 20px;}
.mb25, p.mb25, input.mb25 { margin-bottom: 25px;}
.mb30, p.mb30, input.mb30 { margin-bottom: 30px;}

.pt5, p.pt5 { padding-top: 5px; }
.pt10, p.pt10 { padding-top: 10px; }
.pt12, p.pt12 { padding-top: 12px; }
.pt15, p.pt15 { padding-top: 15px; }
.pt20, p.pt20 { padding-top: 20px; }
.pt25, p.pt25 { padding-top: 25px; }
.pt30, p.pt30 { padding-top: 30px; }      

.pb5, p.pb5 { padding-bottom: 5px; }
.pb10, p.pb10 { padding-bottom: 10px; }
.pb30, p.pb30 { padding-bottom: 30px; }


/* Swatches
---------------------- */
.swatch_list { float: none; }


/* Swatches by Color
---------------------- */
.swatch_by_color {
    width: 175px;
    margin: 1px 0 0 8px;
}
.swatch_by_color .swatch_hex_container {
    display: block; 
    float: left;
    position: relative;
    width: 12px;
    height: 12px;
    margin: 0 1px 1px 0;
}

.swatch_by_color .swatch_hex_container_selected {
    width: 10px;
    height: 10px;
    border:1px solid #fff;
}

.swatch_by_color .swatch_hex {
    height: 12px;
    cursor: pointer;
}

.swatch_by_color .swatch_hex_selected {
    border: 1px solid #000;
    height: 8px;
}

.swatch_by_color .swatch_hex_smoosh {
    overflow: hidden;
}

.swatch_by_color .swatch_tooltip {
    padding: 3px 4px 3px 3px;
    line-height: 12px;
    top: -20px;
    left: 12px;
    position: absolute;
    visibility: hidden;
    border: 1px solid #333333;
    color: #FFFFFF;
    z-index: 9;
    white-space: nowrap;
}

.swatch_hex_container_selected .swatch_tooltip {
    top: -21px;
    left: 11px;
}

/*
#swatch_by_color a div {
    width: 8px;
    height: 8px;
    border: 1px solid #000;
}
*/

/* Swatches by Name
-----------------------*/
/*
#swatch_by_name { 
    float: left; 
    padding-left: 8px; 
    margin-top: 8px;
    }
#swatch_by_name a {
    display: block;
    color: #888;
    line-height: 1.2;
}
*/

/* Large Swatch
---------------------- */
#swatch_lg {
    color: #fff;
    margin: 12px 0 0 8px;
    float: none;
}

p#swatch_select {
    margin: 11px 0 0 8px;
    width: 165px;
    height: 10px;
}

#swatch_lg_img { height: 168px; width: 168px; overflow: hidden; }
#swatch_lg_name { margin-top: 3px; font-weight: bold; width: 165px; }
#swatch_lg_desc { color:#888888; width: 165px; }

#swatch_lg dl { margin-top: 4px;}
#swatch_lg dt { color: #fff; }
#swatch_lg dd { color: #888; }

#inventory_btn_message {
    font-family:inherit;
    margin: 0 0 5px 7px; 
}
  
/* Misc */
#firebug_placeholder {
    margin: 50px 0 0 0;
    clear: both;
    z-index: 9999;
}

.bodycopy { /* copied style from CMS */
    font-size:11px;
    line-height:13px;
    font-family:arial,verdana,helvetica,clean,sans-serif;
}

.progress { 
    width: 17px;
    height: 17px;
    background: transparent url(/images/common/icon_loading.gif) 0 0 no-repeat;
}

.mix_replacements_price_node {
    padding-left:0px !important;
    width:130px;
    text-align:right;
}
 
/** artistry newsworthy **/
h3.art_subtitle, #artist_desc h3, h3.subtitle {font-size: 136%} /* =18 */

    #newsworthy_content { 
        position: relative;
        min-height: 100%;
        height: 1700px; /* hack: forces page to recognize height of absolutely-positioned cms content.  has to be re-set depending on cms content changes */
        color: #888;
    }
    #newsworthy_content A { 
        color: #888;
        text-decoration: underline;
   }