@import url("common.css");
/* Common styles for all refreshed sections */
/* The CSS gods are going to kill me for this atrocity of a stylesheet, but it was necessary for limitations such as old HTML structure being unchangable due to budget constrains, and not being able to clean up the existing styles since sections are still using them */
.all_site_nav { z-index: 50000; }

#container { _position: relative; }

/* IE6 only */
#leftgutter, #rightgutter { background-color: white; }

#leftgutter { padding-left: 9999px; margin-left: -9999px; }

#rightgutter { padding-right: 9999px; margin-right: -9999px; }

.index_raise { z-index: 9999 !important; position: relative\9; }

#pagetop { width: 100%; height: 100px; text-align: center; padding: 0; position: absolute; z-index: 1000; *top: 40px; right: 0; left: 0; }

#sectionlogo { margin-left: -721px; }

#logo { float: none; height: 60px; padding: 10px 0 0; margin: 0 auto; width: 940px; }

/* TODO - width may not be necessary here */
#logo > a, #logo > img { display: none; }

.skybox-large { display: none; }

#nav_top #search_box { width: 165px; height: auto; margin-top: -42px; }

#search_box_text { width: 119px; height: 24px; border: 1px solid #CCC !important; }

.search_box_button { background-image: url("../images/common-sprite.png"); background-repeat: no-repeat; width: 31px; height: 30px; text-indent: -9999px; *text-transform: capitalize; background-position: -10px -81px; margin-left: 0; }

.search_box_button:hover { background-position: -10px -81px; }

#nav { position: relative; z-index: 2000; margin: 59px 0 160px; }

/* Margin here used to accomodate top ad (below banner) for section pages (js adjusts it if ad is not present). The "position:relative" CSS value is also used for JS refresh code to determine that section page is "refreshed."  Had to use JS because there is currently no way to use HTML/CSS to determine if a page is "refreshed" or not (i.e. the business didn't want to spend the money to have a high-level class put into the HTML to differentiate). */
#pagetop #top_ad { position: relative; float: none; margin: 40px auto 0; }

/* Use this for sub-section pages with top ad.  Using relative here to prevent horizontal scrollbar from from showing when ad has an iframe containing a 1x1 tracking pixel.  */
#pagetop #adTOPBANNER { position: relative; }

#pagetop #adTOPBANNER a { display: block; }

/* For when there's an image/link ad */
#pagetop #adTOPBANNER:before { background: url("../images/hdivider.gif") repeat-x 0 0; content: " "; display: block; height: 2px; position: absolute; bottom: -12px; left: -88px; width: 940px; }

#nav_top { float: right; width: 165px; }

.nav_items { position: absolute; top: 7px; right: 0; }

.nav_items li { display: none; }

.nav_items .adv_pointer_section { display: block; }

#nav_bottom_left a { display: block; font-size: 14px; padding: 10px 5px 12px; _float: left; }

#nav_bottom_left li { height: auto; margin: 0 4px; }

#nav_bottom_left li:first-child { margin-left: 0; }

#nav_bottom_left li:first-child a { padding-left: 0; }

#nav_bottom_left { border: 0 none; }

#nav_bottom_right { display: none; position: absolute; right: 0; font-size: 14px; border: 0; margin-top: 3px; }

#nav #nav_bottom { position: relative; width: 940px; background: none; border: 0 none; *border-top-color: #a7a7a7 !important; }

#nav #nav_bottom a:hover, #footer #footer_top a:hover, #nav #nav_bottom_left a.current { background: none; }

/* FOR PREPROD ONLY - comment this block if you need to minify this file for the LIVE site */
/* This block will go LIVE in the next release, or whenever the new vertical Hot Topic dropdown goes live */
/* The following styles block adds a "More" dropdown for Hot Topics on designated sections; it's associated with common-section-dropdown.js */
#nav_bottom_right.hottopics-vertical, .hottopics_wrap { display: none; }

#nav_bottom_right.hottopics-vertical { display: none; position: absolute; right: 0; font-size: 14px; border: 0; padding-right: 0; margin-top: 0; }

#nav_bottom_right.hottopics-vertical a { float: none; display: block; padding: 6px 15px; margin: 0; }

#nav_bottom_right.hottopics-vertical > a, #nav #nav_bottom_right.hottopics-vertical > a:hover { float: right; background: url("../images/common-sprite.png") no-repeat; padding: 10px 20px 12px 10px; margin: 0 4px; }

#nav_bottom_right.hottopics-vertical > a { background-position: 39px -197px; }

#nav #nav_bottom_right.hottopics-vertical > a:hover { background-position: -26px -197px; }

.hottopics_wrap { *float: right; clear: both; min-width: 180px; _width: 180px; padding: 5px 0; margin-right: 4px; }

#nav_bottom_right.selected .hottopics_wrap { display: block; }

.utlslider-slide .utl-slide-right { margin-top: -65px; }

.utl_wrap_ent .utl-slide-right { margin-top: -90px; }

.utl-slide-right { height: 65px; }

.utlslider-slide h2 { font-size: 16px; margin-top: 5px; }

.utlslider-slide p { font-size: 11px; }

.utl_wrap_ent #utlent-slider-nav-news_slider li .activeSlide, .utl_wrap_ent #utlent-slider-nav-news_slider li .activeSlide:hover { background-image: url("../images/ent_slider_li_cur_bg_grey.png") !important; }

.utl_wrap_ent .orange_slider .utl_nav_wrap li a:hover { background-image: url("../images/ent_slider_hov_grey.gif") !important; }

#left_col h2.sponsoredby + .hdividier { display: none; }

.hdividier { margin: 10px 0; }

.sponsoredby { display: none; margin: -3px 0 10px; }

#uber_pointer { padding-top: 0; }

#uber_pointer + .hdividier { margin: 10px 0 0 0; background: none; }

.defcon_title { font-size: 40px; margin: -7px 0 15px; }

.defcon_right p { font-size: 14px; }

.defcon_photo { margin-bottom: 5px; }

.widescreen_defcon .defcon_related { width: auto; }

.foursquare h2, .adv_box_narrow .adv_box_top h2 { font-size: 21px; font-weight: normal; margin: 0 0 3px; }

.foursquare .first_headline_thumb { font-size: 14px; line-height: 20px; }

.foursquare_row + .foursquare_row > div { padding-top: 15px; background: url("../images/hdivider.gif") repeat-x 0 0; }

.left_col_pointer_box img { margin-bottom: 7px; }

.gallery_box .sponsored_links_inner { background-position: 0 100%; padding: 0 0 21px; }

/* don't remember writing this one; where is it in use? */
.moreheadlines_top { margin: 2px 0 4px; }

.moreheadlines_top h2 { font-family: StalemateLF, Arial, sans-serif; font-size: 18px; text-transform: lowercase; line-height: 18px; }

.readmore { background: none; width: 0; height: 0; padding: 0; }

.ad_island_feedback, #right_col .ad_island_feedback { margin-bottom: 3px; }

.hbox_top_title, .hbox_top_none_title, .hbox_narrow .hbox_top_title { font-family: StalemateLF, Arial, sans-serif; font-size: 32px; text-transform: lowercase; width: auto; height: 35px; line-height: 32px; background-color: #FFF; padding: 0 5px 0 0; margin: 5px 0 0; }

/* May need to be moved to be moved to each specific section css file if other sections have different fonts/sizes/etc */
#right_col .hbox_narrow .hbox_top_title { font-size: 24px; }

.hbox_top_title a { line-height: 38px; background: none; padding: 0; }

#right_col .hbox_top_title a { line-height: 32px; }

.hbox_body, #poll_asset, #poll_asset_body { background: none; }

.hbox_body_left { width: 300px; _width: 298px; background: none; padding: 0 10px 0 0; }

.hbox_narrow .hbox_body_left { padding: 10px 0 0; }

.hbox_wide .hbox_body_right { width: 302px; padding: 0 0 0 8px; }

#adspecial_offer_box .hbox_body_left, #right_col .hbox_narrow .hbox_body_left.poll { padding: 0; }

#right_col .hbox_body_left { width: auto; }

.hbox_btm, .hbox_btm_left, .hbox_btm_right { display: none; }

/*{background: none; width: 0; height: 0;}*/
.left_col_pointer_box { padding-bottom: 7px; margin-top: 2px; }

.moreheadlines_bottom + .hdividier { margin: 10px 0 20px; }

.first_headline, h3 { font-size: 16px; }

.other_headline { font-size: 16px; line-height: 20px; }

.rssicon, .editstrap_icon, .grey_rss_icon { display: none; }

.landing_top_leftcol .first_headline, .landing_top_midcol .first_headline { font-size: 24px; }

.landing_top_leftcol .other_headline, .landing_top_midcol .other_headline { font-size: 18px; }

.adv_box_narrow { position: relative; width: 300px; padding: 10px 9px 0; margin-right: -10px; }

.adv_box_narrow ul { padding-left: 0; margin-left: 0; list-style-type: none; }

.adv_box_narrow .adv_box_bottom h3 { font-size: 16px; margin-bottom: 10px; }

.advmorelink { margin-top: 0; }

.video_strap.hbox_wide .hbox_body_right { width: 220px; padding: 0 0 0 10px; }

.video_strap .hbox_body_right_caption { width: 110px; }

#most_popular { background-color: transparent; }

#most_popular .ui-tabs-nav { background-color: #FFF; }

#most_popular .ui-tabs-nav .ui-tabs-selected { border-width: 1px 0 0; }

#most_popular .ui-tabs-nav .ui-tabs-selected a span { height: 29px; border-bottom: 0 none; margin: 0; }

#most_popular .ui-tabs-nav li { border-width: 1px 0; border-style: solid; border-color: #F2F2F2 transparent #E6E6E6; margin: 8px 0 0; }

#most_popular .ui-tabs-nav a span { width: 98px; border-width: 1px 1px 0; border-style: solid; border-color: #FFF #E6E6E6 transparent; }

#most_popular .ui-tabs-nav a[href="#viewed"] span { border-left: 1px solid #E0E0E0; }

#most_popular .ui-tabs-nav a[href="#shared"] span { border-left: 1px solid #FFF; }

#most_popular .ui-tabs-nav a[href="#commented"] span { border-left: 1px solid #FFF; border-right: 1px solid #E0E0E0; }

#most_popular_wrapper, .landing_top_midcol-sml, #myBD-box { position: relative; z-index: 1; }

/* Allows radial gradient to work on selected straps */
#most_popular_wrapper .ui-tabs-panel, #tile_feature_poll, #myBD-box .hbox_busday_narrow { position: relative; width: 278px; border-width: 0 1px 1px\9; border-style: solid\9; border-color: #e0e0e0 \9; margin-left: 1px; margin-left: 0\9; }

/* Radial gradient extras */
/* Accessible borders for IE6-9 which don't support radial gradients; IE8 targeted in common-section-refresh.js */
#most_popular_wrapper .ui-tabs-panel:before, #tile_feature_poll:before, #myBD-box .hbox_busday_narrow:before { position: absolute; z-index: -1; top: 0; right: -1px; bottom: -1px; left: -1px; content: " "; background-image: -webkit-radial-gradient(center top, farthest-corner, black -240%, transparent 113%); background-image: -moz-radial-gradient(center top, farthest-corner, black -240%, transparent 113%); background-image: -ms-radial-gradient(center top, farthest-corner, black -240%, transparent 113%); background-image: radial-gradient(center top, farthest-corner, black -240%, transparent 113%); }

.hbox_top_sponsor { background-color: #FFF; padding: 4px 0 5px 50px; margin-right: 0; }

/* A little extra padding to cover Life and Style icons on hbox wides */
.hbox_wide .hbox_top_sponsor { padding: 4px 0 5px 60px; }

#right_col .hbox_top_sponsor { padding: 4px 0 5px 5px; }

#adspecial_offer_box { margin-bottom: 5px; }

#adsponsored_links_box h2, #adsponsored_links_box .hbox_top_none_title, #adspecial_offer_box .hbox_top_none_title, #adsponsored_contentbox .hbox_top_none_title { height: 26px; line-height: 26px; }

.sponsored_links_inner { padding: 0 10px 15px 0; }

/*.hbox_top_none, #adsponsored_links_box {background: none; border-top-width: 4px;} */
/* Commented on 7May2013 because of the following comment: TODO - remove this line when border-top-width is merged to common.css (line 40), and move background:none to the same line in common.css */
#home_top_midcol #adsponsored_links_box { margin: 20px 0 10px; }

.hbox_top_title, .hbox_top_none_title { margin-left: 0; }

.hbox_top_none_left { display: none; }

.special_offers { padding: 10px 0 0; *padding: 0; border: 0 none; margin-left: 1px; }

.blog_pointer h2 { display: block; }

.blog_pointer img { border: 1px solid #CCC; }

.video_gallery_box { margin-bottom: 0; }

.video_gallery_box div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 5px; }

.video_gallery_box .video_box_right { padding-right: 10px; }

.video_gallery_box img { margin: 3px 6px 0 0; }

#trademe-slider .hbox_top_grey { background: none; border-top-color: #CCC; }

#right_col #trademe-slider .hbox_narrow .hbox_top_title { font-size: 14px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; line-height: 26px; width: 290px; height: 26px; }

#trademe-slider .hbox_top_grey + br + div { border-top: 1px solid #E6E6E6; }

#trademe-slider .hbox_top_grey .hbox_top_title { color: #656565 !important; }

/* Recipe search */
.custom_search_container { float: left; margin-bottom: 20px; }

#custom_search_widget p { font-family: 'StalemateLF', Arial, sans-serif; font-size: 24px; line-height: 41px; text-transform: lowercase; *width: 300px; }

.custom_search_container a img { float: right; margin: 12px 0 20px 0; }

.custom_search_container > p { float: right; color: #999999; line-height: 29px; text-transform: lowercase; margin: 10px 15px 10px 0; }

.custom_search_container input[type="text"] { float: left; background-color: #FAFAFA; width: 214px; padding: 16px 10px 15px; *padding: 15px 10px; border: 1px solid #252525; border-radius: 6px 0 0 6px; }

.custom_search_container input[type="submit"] { float: left; text-indent: -9999px; *color: transparent; width: 64px; height: 49px; padding: 6px 20px 2px; border: 1px solid #252525; border: 0\9; border-radius: 0 5px 5px 0; border-radius: 0\9; cursor: pointer; /* Several IE fixes here */ background: url("../images/recipe-search-ie.png") no-repeat 0 0; /* IE 6-9 button gradient image */ background: url("../images/common-sprite.png") no-repeat 10px -139px, -o-linear-gradient(top, #3f3f3f 0%, #161616 100%); background: url("../images/common-sprite.png") no-repeat 10px -139px, -moz-linear-gradient(top, #3f3f3f 0%, #161616 100%); background: url("../images/common-sprite.png") no-repeat 10px -139px, -webkit-linear-gradient(top, #3f3f3f 0%, #161616 100%); background: url("../images/common-sprite.png") no-repeat 10px -139px, -ms-linear-gradient(top, #3f3f3f 0%, #161616 100%); background: url("../images/common-sprite.png") no-repeat 10px -139px, linear-gradient(top, #3f3f3f 0%, #161616 100%); }

.custom_search_container input[type="submit"]:active { filter: alpha(opacity=80); opacity: 0.8; }

#adPUSHDOWNBANNER img[height="1"] { display: none; }

/* Hack needed to hide 1px placeholders in empty slidedown Ad space */

.cilEmbedFrame{float: left;clear:both;}