/* health.com | package.css */
/* Updated for HL1580, HL1578 - Mosaic Package - 2/27/2013, Marvin Carlos */

/* Global over-rides (global.css) */
#content {width:663px; background-repeat:repeat-x; overflow:hidden}
#content #package-title {font:normal 2.6em Georgia, "Times New Roman", Times, serif; overflow:hidden; clear:left; padding:10px 0 5px 15px; width:430px}
#content #package-title a {color:#000}
#package-title-dek {overflow:hidden; padding:0 10px 5px 15px}
#content #content-title {background:#fff url("http://img2.timeinc.net/health/static/i/bg_package_corner.png") right -1px no-repeat; line-height:1.2em; width:648px; padding:10px 0 0 15px; margin-top:0; overflow:hidden}
/* .sponsorSection .ad170x30, .sponsDis .ad170x30 {margin-top:10px} */
.more-link {background:none} /* temporary over-ride to global.css */

/* Gallery over-rides (gallery.css) */
#slideshowWrapper {width:658px; margin:0; padding-top:0; overflow:hidden; background-color:#fff; padding-left:5px}
#slideshowWrapper #content-title {padding-left:10px}

/* Article over-rides (article.css) */
#article-container {width:663px; margin:0; padding-top:0; overflow:hidden; background-color:#fff}
#article-container div {margin-left:15px} /* because #article-container is rendered flush left */
#article-container div div {margin-left:0} /* because we only need a margin on the first-level div within #article-container */
#article-container .dek {margin:5px 0 0 15px}

/* Recipe over-rides (recipe.css, global.css), Calendar over-rides (calendar.css), White Page over-ride */
#recipe-page #widecol, #calendar-day #widecol, #wpbody #widecol {background:#fff url("http://img2.timeinc.net/health/static/i/bg_package_corner.png") right -1px no-repeat; margin-left:0; width:643px; padding:10px 5px 0 15px; margin-top:0; overflow:hidden}
.recipe .right_col {padding-left:0}
#calendar-day #content-title {padding:10px 0; background:none}

/* Quiz over-rides */
body#quiz #maincol {width:640px; background:#fff url("http://img2.timeinc.net/health/static/i/bg_package_corner.png") right -1px no-repeat; line-height:1.2em; width:658px; padding:10px 0 0 0; margin-top:0; overflow:hidden}
body#quiz #maincol .blog {width:640px; text-align:center}
body.notabs#quiz #maincol {background:#fff url("http://img2.timeinc.net/health/static/i/bg_package_corner_notabs.png") right 0 no-repeat; margin:10px 0 0 0; width:640px; padding:10px 5px 0 15px; overflow:hidden}

body.notabs #content #content-title {background:none}
body.notabs #slideshowWrapper, body.notabs #article-container {background:#fff url("http://img2.timeinc.net/health/static/i/bg_package_corner_notabs.png") right 0 no-repeat; margin-top:10px; line-height:1.2em; width:658px; overflow:hidden}
body.notabs#recipe-page #widecol, body.notabs#calendar-day #widecol, body.notabs#wpbody #widecol {background:#fff url("http://img2.timeinc.net/health/static/i/bg_package_corner_notabs.png") right 0 no-repeat; margin:10px 0 0 0; width:640px; padding:10px 5px 0 15px; overflow:hidden}

/* Landing Page / No-tab Page / Index*/
#package-wrapper {float:left; border:1px solid #c4e0f3; border-top:0; border-right:0; width:647px; background:#fff url("http://img2.timeinc.net/health/static/i/bg_package_tabs_nofade.png") right -1px no-repeat; margin-left:15px}
body.notabs #package-wrapper {margin-top:10px; background-position:right 0}
#package-landing #email-com {padding:0 0 0 25px}
#package-landing #pageTabs, body.index-page #pageTabs {background-position:-15px bottom; float:left; margin-left:15px; width:658px} /* this holds the tabs */
#package-landing ul.tabs, body.index-page ul.tabs {padding-left:5px}
#package-wrapper a.read-more, #index-wrapper a.read-more  {display:block; overflow:hidden; padding-left:13px; background:url("http://img2.timeinc.net/health/static/i/sprite_gen.png") -918px -247px no-repeat; font-size:11px}
#package-landing .share, body.index-page .share {float:left; margin-top:5px; margin-left:15px; width:645px}
#package-landing #email-com #email, body.index-page #email-com #email {padding-left:16px; background:url("http://img2.timeinc.net/health/static/i/sprite_gen.png") 0 -1116px no-repeat}
body.index-page #email-com { padding-bottom:0}
#index-wrapper {float:left; border:1px solid #c4e0f3; border-top:0; border-right:0; width:647px; background:#fff url("http://img2.timeinc.net/health/static/i/bg_package_tabs_nofade.png") right -1px no-repeat; margin-left:15px}

ul.tabs a,
ul.tabs span,
ul.tabs a:hover,
ul.tabs a:hover span {background: url("http://img2.timeinc.net/health/static/i/bg_package_tabs.png") no-repeat} /* tabs using sprite */

#pageTabs {background:url("http://img2.timeinc.net/health/static/i/bg_package_tabs.png") repeat-x left bottom; float:left; width:663px; margin-top:10px} /* this holds the tabs */
ul.tabs {padding:0 0 0 15px; list-style-type:none; margin:0}
ul.tabs li {float:left}
ul.tabs li strong {display: block; margin:-12px 0 0 0; padding:0; font: normal 80% verdana, arial,sans-serif; text-align: center; color:#999; position: relative; text-transform:uppercase}
ul.tabs a {background-position: left -100px; display:block; padding:0  0 0 11px; font:normal 1.1em Verdana,sans-serif; text-decoration: none} /*the 11px spacing is split btwn the a and span so that all lines up */
ul.tabs span {background-position:right -100px; padding:9px 11px 8px 0; display:block; white-space:nowrap} /*this padding-bottom must be 1px less than the current value  line 39*/
ul.tabs a:hover {background-position: left -200px; text-decoration: none}
ul.tabs a:hover span {background-position: right -200px}

/* sponsor tab */
/*ul.tabs .sponsor span {font-size:0.9em; padding-top:3px; padding-bottom:3px; text-align:center; font-weight:bold}
ul.tabs .sponsor b {color:#888; font-size:0.8em; font-weight:normal}*/

/* safari hack for package navigation (change font-weight from bold to normal)*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
ul.tabs a{ font:normal 12px Arial,sans-serif}
}
/*styles for current tab*/
body.h_tab_1 li.tab_1 a,
body.h_tab_2 li.tab_2 a,
body.h_tab_3 li.tab_3 a,
body.h_tab_4 li.tab_4 a,
body.h_tab_5 li.tab_5 a,
body.h_tab_6 li.tab_6 a,
body.h_tab_7 li.tab_7 a,
body.h_tab_8 li.tab_8 a,
body.h_tab_9 li.tab_9 a,
body.h_tab_10 li.tab_10 a,
body.h_tab_Ad li.tab_Ad a{background-position:left top; color:#555; font-weight:bold}

#pageTabs li.tab_Ad a {color:#000}

body.h_tab_1 li.tab_1 span,
body.h_tab_2 li.tab_2 span,
body.h_tab_3 li.tab_3 span,
body.h_tab_4 li.tab_4 span,
body.h_tab_5 li.tab_5 span,
body.h_tab_6 li.tab_6 span,
body.h_tab_7 li.tab_7 span,
body.h_tab_8 li.tab_8 span,
body.h_tab_9 li.tab_9 span,
body.h_tab_10 li.tab_10 span,
body.h_tab_Ad li.tab_Ad span{background-position: right top; padding-bottom:9px}

#hero-tout {padding:10px; float:left}
#hero-tout table {background:url("http://img2.timeinc.net/health/static/i/bg_package_stripedgrey.png"); width:400px; height:300px; float:left; border-spacing:0}
#hero-tout td {padding:0; text-align:center}
#hero-tout .image {display:block; overflow:hidden; margin:0 auto; margin-right:10px}
#hero-shot {float:none; margin:auto; text-align:center; border:1px solid #e5e5e5}
#hero-tout #right-col {float:left; width:205px; margin-left:10px}
#hero-tout p {font-size:1.1em; margin:5px 0; line-height:1.3em}
#content #package-wrapper #content-title {overflow:hidden; float:none;font:normal 2.2em Georgia, "Times New Roman", Times, serif; margin-bottom:10px; width:100%; background:none; margin:0 0 10px 0; padding:0; width:auto; margin-top:0}

/* Landing Page & Index Page modules */
.tout-200 {float:left; margin:0 0 10px 0; font-size:1em}
.tout-200 li div {float:left; border:1px solid #e5e5e5; padding:2px; margin-bottom:5px}
.tout-200 table {width:200px; height:150px; float:left; border-spacing:0; background:url("http://img2.timeinc.net/health/static/i/bg_package_stripedgrey.png")}
.tout-200 td {padding:0; vertical-align:middle; text-align:center}
.tout-200 ul, .tout-75 ul, .tout ul {list-style:none; padding:0; margin-left:10px}
.tout-200 img, .tout-75 img, .tout img {overflow:hidden}
.tout-200 a {display:block; font-size:1.2em}
.tout-200 a.image, .tout-75 a.image, .tout a.image  {display:block; float:none; overflow:hidden; margin:0 auto}	
.tout-200 li {float:left; width:204px; margin-right:7px; padding-left:0; background:none}
.tout-200 p.dek, .tout-75 p {display:block; margin:3px 0}

.tout-75 {float:left; margin:10px 10px 20px 10px}
.tout-75 ul {margin-left:0}
.tout-75 li {float:left; margin-bottom:10px; border-top:1px dotted #d4d4d4; padding-top:10px; width:100%}
.tout-75 a {font-size:1.2em; float:none}
.tout-75 a.image {display:block; float:left; font-size:1.1em; padding:2px; border:1px solid #e5e5e5; width:75px; height:75px; margin-right:10px}
.tout-75 .tout-75 {float:left; width:530px}

.tout {float:left; margin:0 10px 20px 10px; padding-top:5px}
.tout ul {margin-left:0}
.tout li {float:left; margin-bottom:10px}
.tout li.spacer {width:625px; padding-top:4px; height:1px; border-top:1px dotted #d4d4d4;}
.tout a.image {display:block; float:left; font-size:1.1em; padding:2px; border:1px solid #e5e5e5; width:122px; height:122px; margin-right:10px}
.tout .tout-text {float:left; width:150px}
.tout p {margin-bottom:5px}

.two-col li {margin-right:10px; width:48%}
.two-col a {font-size:1.2em; float:none}

.four-col li {margin-right:5px; width:24%}
.four-col a.image {margin-bottom:5px}
.four-col p {width:130px}

/* Mosaic Package Styles */
body.mosaic .two-col a:hover {color:#F3514F}
body.mosaic .two-col a {color:#000; font:normal 1.3em/1.4em 'Oswald','Arial Narrow',sans-serif}
body.mosaic .two-col a.more-link {line-height:0.9em}
body.mosaic .more-link, #most-popular-home .more-link {background:url("http://img2.timeinc.net/health/static/i/sprite_gen.png") -985px -935px no-repeat} /*over-ride to temporary over-ride on global*/
body.mosaic .two-col p {font:normal 1.1em Arial, sans-serif}
body.mosaic .two-col .read-more {font:bold 1.1em Arial, sans-serif; color:#000}
body.mosaic #content #package-title, .header, body#video.mosaic #package-title {float:left; font:bold 3.9em 'Oswald','Arial Narrow',sans-serif; color:#fff; background-color:#F3514F; line-height:1.2em; margin:20px 0 0 15px; padding:0 3px; margin-bottom:15px; width:auto}
body.mosaic #content #package-title, body#video.mosaic #package-title {font-size:3em}
body.mosaic #content #package-title a, body#video.mosaic #package-title a {color:#FFF}
body.mosaic #content #package-title a:hover, body#video.mosaic #package-title a:hover {text-decoration:underline}
body.mosaic #content #content-title {background:none}
body.mosaic .tout a.image {border:0}

.mosaic-nav {clear:left;list-style:none; margin:0 0 0 15px; padding:0}
.mosaic-nav li {display:inline-block; margin-right:8px}
.mosaic-nav li:last-child {margin-right:0}
.mosaic-nav .thumb {border:1px solid #CCC; float:left; display:block; float:left}
.mosaic-nav .thumb:hover {border:1px solid #F3514F}
.mosaic-nav  h3 {margin:15px 0 0 5px; padding:1px 2px 2px 2px; float:left; text-transform:uppercase; font-size:1.2em}
.mosaic-nav .sponsor {background-color:#973997}
.mosaic-nav h3 a {color:#FFF; font-weight:300}
.mosaic-nav .hlite {border-color:#F3514F}

#gallery .mosaic-nav, #article .mosaic-nav, #quiz .mosaic-nav, #calendar .mosaic-nav, #package-section .mosaic-nav  {margin-left:10px; padding-bottom:15px; border-bottom:1px dotted #CCC}
#gallery .header {margin-left:5px; font-weight:normal}

#wrap-mosaic {width:962px; margin:12px auto; padding:1px 1px 0 1px; list-style:none; overflow:hidden; text-align:center; background-color:#CCC}
#wrap-mosaic > li {position:relative; width:320px; height:320px; float:left; margin:0 1px 1px 0}
#wrap-mosaic > .li-bot {margin-bottom:0}
#wrap-mosaic > .li-right {margin-right:0}
.tile, .effect, .effect > .caption {display:block; position:absolute}
.tile, .effect {left:0; top:0; width:320px; height:320px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
.effect {background:url("http://img2.timeinc.net/health/static/i/0.gif")} /* work-around for IE browsers */
.effect:hover {border:2px solid #F95754}
.effect:hover > .caption {background-color:#F95754; color:#FFF; opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; bottom:17px; left:32px}
.caption {bottom:20px; left:35px; font:400 1.4em 'Oswald','Arial Narrow',sans-serif; width:230px; height:30px; padding:10px; text-align:center; background-color:#FFF; color:#000; opacity:0.8; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"}
.li-ad {background-color:#EEE}

body.mosaic.h_tab_1 .tab_1, 
body.mosaic.h_tab_2 .tab_2,
body.mosaic.h_tab_3 .tab_3,
body.mosaic.h_tab_4 .tab_4,
body.mosaic.h_tab_5 .tab_5,
body.mosaic.h_tab_6 .tab_6,
body.mosaic.h_tab_7 .tab_7,
body.mosaic.h_tab_8 .tab_8,
body.mosaic.h_tab_9 .tab_9,
body.mosaic.h_tab_10 .tab_10,
body.mosaic.h_tab_Ad .tab_Ad {border:2px solid #F3514F !important}

/* Added by Priyanka for HLT-2272. */		
#package-landing .ad300x250.stickToTop {top: 90px !important;}