@import url('reset.css');

html { font-size: 62.5%; }
.clear { clear: both; }

body.text-large { font-size: 115%; }
body.text-x-large { font-size: 130%; }

#wrapper { width: 770px; margin: 0 auto; }
#print-header { display: none; }

#header { margin-top: 24px; }
#branding-wrapper { width: 770px; background: url('/images/support/home/banner.jpg') right top no-repeat; }
#branding { height: 150px; text-indent: -9999em; position: relative; background: url('/images/interface/banner_curve.png') left top no-repeat;  }
#branding span { display: block; text-indent: -9999em; width: 242px; height: 110px; background: url('/images/interface/logo.png') left top no-repeat; position: absolute; right: 261px; top: 19px; }
#search { position: absolute; float: right; right: 0; bottom: 0; width: 260px; height: 53px; background: url('/images/interface/search-bg.png') right bottom no-repeat; line-height: 53px; text-align: right; }
#search input { vertical-align: middle; margin-right: 10px; }
#branding img { display: none; }
#secondary-header { position: absolute; top: 0; right: 0; }

#content ul,
#content ol { padding-left: 20px; }
#content ul { list-style-type: disc; }
#content ol { list-style-type: decimal; }

#twitter { position: absolute; float: right; right: 10px; top: 15px; width: 209px; height: 72px; line-height: 72px; text-align: right; }
#twitter img { display: block; }


/* [=navigation]
********************/
#nav-wrapper { height: 36px; background: url('/images/interface/nav_bg.png') left top repeat-x; z-index: 50; }
#nav { position: relative; height: 36px; margin-bottom: 15px; z-index: 50; }
#nav li { display: table-cell; }
#nav li { display: inline-block; position: relative; height: 36px; }
#nav li:hover .nav-sub { display: block; z-index: 2; }
#nav li:hover a, #nav li.over a { color: #fff799; }
#nav ul { height: 29px; z-index: 50; vertical-align: middle; text-align: center; }

.nav-item { height: 29px; }
#nav li a { display: block; color: #fff; text-decoration: none;
            font-family: "Century Gothic", "Avant Garde", Helvetica, Arial, sans-serif;
            font-size: 16px !important; line-height: 16px;
            text-transform: uppercase; padding: 7px 12px 0;
            background: url('/images/interface/nav_divider.png') right 4px no-repeat; }
#nav li.last a { background: 0; }
#nav li.first a { padding-left: 16px; }

#nav ul.nav-sub { display: none; position: absolute; width: 140px; text-align: left;
                  height: auto; padding-top: 5px; background-color: #fff; z-index: 40;
                  border: solid #62a7bd; border-width: 0 1px 1px; padding: 0 5px; }
#nav ul.nav-sub li { padding: 5px 0; display: block; font-size: .9em; line-height: 1;
                     border-bottom: solid 1px #62a7bd; height: auto; width: 100%; }
#nav ul.nav-sub li.last { border: 0; }
#nav ul.nav-sub a { color: #1a7591; background: 0; padding: 0; font-size: 12px !important; font-weight: bold; }
#nav ul.nav-sub a:hover { color: #0d004c; }
#nav ul.nav-sub .divider { margin: 0 10px; color: #62a7bd; text-transform: uppercase; font-size: 20px !important; }

/* [=layout]
********************/
#content { overflow: hidden; clear: both; border-bottom: solid 30px #ded4cb; margin-top: 30px;
           padding-bottom: 15px; font: normal 1.6em Calibri, Tahoma, Helvetica, Arial, sans-serif;
           z-index: 1; }
#content a { color: #4790a8; text-decoration: none; }
#content a:hover { text-decoration: underline; }

#main.col { width: 425px; float: left; }
#sidebar.col { width: 324px; float: right; }
#main p { margin: 10px 0; }
#main .story { color: #4d331c; font-size: 1.1em; margin: 25px 0; }
#sidebar.article { margin-left: 15px; margin-bottom: 10px; margin-right: 0; float: right; width: 245px; }
#sidebar { position: relative; z-index: 1; }
#main #sidebar { margin: 0 0 10px 10px; clear: both; }
#main-content { float: left; }

/* [=articles]
********************/
#article-header { margin: 0 20px 10px; overflow: hidden; }
#article-header img { margin-bottom: 5px; }
#article-header .author { width: 110px; float: left; font: normal .8em 'Franklin Gothic Medium', Helvetica, Arial, sans-serif; margin-right: 20px; text-align: center; text-transform: uppercase; letter-spacing: 1px; }
#article-header .author-name { color: #004a80; }
#article-header .author-title { color: #545454; font-style: italic; }
#article-header h1 { font: normal 2.2em 'Century Gothic', 'Franklin Gothic Medium', Helvetica, Arial, sans-serif; color: #7b2e00; text-transform: uppercase; }
#article-header h3 { font: normal 1.2em Georgia, Times, serif; color: #002157; font-style: italic; }
#article-header.has-author .title { display: block; padding-left: 130px; margin-left: -130px; }

#main.article { color: #002157; margin-left: 0;  }
#main.article p { margin-top: 0; }
#main.article h2 { font-size: 1.8em; font-weight: bold; margin-bottom: 10px; position: relative; min-height: 54px; padding-left: 63px; }
#main.article h3 { color: #608bc8; font-weight: bold; margin-bottom: 0; text-transform: uppercase; }
.pretitle { color: #0072bc; font: normal 1.1em Georgia, 'Times New Roman', Times, serif; text-transform: uppercase; letter-spacing: 1px; }
.icon-number { width: 48px; height: 54px; padding: 0 5px 0 0; text-align: center; font-weight: bold; font-size: 33px !important; line-height: 45px; color: #fff; background: #609e4d url('/images/interface/icon_number.png') left top no-repeat; display: block; position: absolute; left: 0; top: 0; }


/* [=recipes]
*******************/

div.recipe p.serves { color: #000; }
div.recipe div.ingredients h3 { margin-bottom: 10px; font-size: 14px; }
div.recipe div.ingredients { width: 320px; margin-bottom: 20px; padding: 10px 10px 5px 20px; border: 5px solid #ccc; background-color: #eee; }
div.recipe div.ingredients ul li { list-style: none; margin: 0 0 5px 0; padding: 0; }
div.recipe div.ingredients ul li span.fade { color: #333; }
div.recipe ol.instructions li { margin-bottom: 10px; padding-left: 5px; }


/* [=related_content]
*************************/
#related-content { background: url('/images/interface/sidebar_bg.png') left top repeat-y; position: relative; padding: 24px; }
#related-content-top { position: absolute; top: 0; left: 0; width: 324px; height: 41px;
	                   background: url('/images/interface/sidebar_bg_top.png') left top no-repeat; }
#related-content-bottom { position: absolute; bottom: -20px; left: 0; width: 324px; height: 41px;
	                      background: url('/images/interface/sidebar_bg_bottom.png') left top no-repeat; }
#related-content h2,
#main #related-content h2 { font: normal 2em Georgia, "Times New Roman", Times, serif; color: #1a7591; font-weight: normal; padding-left: 0; min-height: 0; }
#related-content h3 { margin-bottom: 15px; }


/* [=page-list-items]
********************/

#main.col .home-list-item { margin: 15px 0 0; padding-bottom: 10px; position: relative; padding-left: 130px; position: relative; min-height: 75px; clear: both; }
#main.col .home-list-item img.photo { position: absolute; left: 7px; top: 0; border: solid 1px #bfbfbf; margin-bottom: 20px; }
#main.col .home-list-item p.subsection { color: #666; font-weight: bold; text-transform: uppercase; font-size: 0.85em; margin-bottom: 0; }
#main.col .home-list-item .title { margin: 0 0 5px; padding-bottom: 0; }
#main.col .home-list-item .title a { color: #004a80; font: normal 1.2em/1.2 Georgia, "Times New Roman", Times, serif; text-decoration: none; }
#main.col .home-list-item .title a:hover { text-decoration: underline; }
#main.col .home-list-item .subtitle { text-transform: uppercase; color: #448cca; margin: 5px 0; font: normal .85em Georgia, "Times New Roman", Times, serif; }
#main.col .home-list-item .summary { color: #790000; font: normal .85em/1.2 Arial, Helvetica, sans-serif; clear: both; }


#sidebar .page-list-item { margin-bottom: 10px; padding-bottom: 10px; width: 130px;
                           clear: both; position: relative; padding-left: 130px; min-height: 54px; }
#sidebar .page-list-item .thumb,
  #sidebar .page-list-item .video-thumb { width: 110px; position: absolute; left: 10px; top: 0; border: solid 1px #6e6e6e; }
#sidebar .page-list-item .header { margin: 0; }
#sidebar .page-list-item .summary { margin: 0; }
#sidebar .page-list-item-last { background: 0; padding-bottom: 0; }
#sidebar h3,
#main #sidebar h3 { font: normal 1.6em 'Century Gothic', Helvetica, Arial, sans-serif; text-transform: uppercase; color: #534741; margin: 10px 0; }
#sidebar .page-list-item p.title, #sidebar .page-list-item p.title a{ color: #0d004c; min-height: 54px; text-transform: uppercase; font-size: 110%; }


#special-item p.title { color: #0d004c; text-transform: uppercase; font-size: 120%; font-weight: bold; margin: 15px 15px 0 0; }
#special-item .thumb,
#special-item .video-thumb { width: 110px; position: absolute; left: 10px; top: 0; border: solid 1px #6e6e6e; }

/*
#sidebar .page-list-item h3 a { color: #4790a8;
	                            font: normal 1.2em/1.2 "Franklin Gothic Medium", Helvetica, Arial, sans-serif;
	                            text-transform: uppercase; text-decoration: none; }
#sidebar .page-list-item h3 a:hover { text-decoration: underline; }
*/
#sidebar .page-list-item-video h3 { text-align: right; }
#sidebar .page-list-item p { color: #464646; font: normal 0.95em/1.2 "Franklin Gothic Medium", Helvetica, Arial, sans-serif; clear: both; }
#sidebar .page-list-item p.type { padding-left: 5px; text-transform: uppercase; color: #acacac; clear: none; font: normal 3em "Century Gothic", Helvetica, Arial, sans-serif; padding-bottom: 4px; }
#sidebar .page-list-item .summary { font: normal .9em 'Franklin Gothic Medium', Helvetica, Arial, sans-serif; color: #005b7f; text-transform: uppercase; }

#main h3.page-list-header { background: url('/images/interface/heading_background.png') left top repeat-x;
                            height: 25px;
                            padding: 3px 0 0 10px;
                            font: normal 16px 'Century Gothic', Helvetica, Arial, sans-serif;
                            text-transform: uppercase; color: #fff; }

#main.col .page-list-item { margin: 15px 0 0; padding-bottom: 10px; position: relative; padding-left: 130px; position: relative; min-height: 75px; clear: both; }
#main.col .page-list-item img.photo { position: absolute; left: 0; top: 0; border: solid 1px #bfbfbf; margin-bottom: 20px; }
#main.col .page-list-item p.subsection { font-weight: bold; text-transform: uppercase; font-size: 0.75em; margin-bottom: 0; }
#main.col .page-list-item .title { margin: 0 0 5px; padding-bottom: 0; }
#main.col .page-list-item .title a { color: #004a80; font: normal 1.4em/1.2 Georgia, "Times New Roman", Times, serif; text-decoration: none; }
#main.col .page-list-item .title a:hover { text-decoration: underline; }
#main.col .page-list-item .subtitle { text-transform: uppercase; color: #448cca; margin: 5px 0; font: normal .9em Georgia, "Times New Roman", Times, serif; }
#main.col .page-list-item .summary { color: #790000; font: normal .9em/1.2 Arial, Helvetica, sans-serif; clear: both; }

#related-articles-tab { margin: -23px 0 20px 20px; }


/* [=resources]
********************/
#content .resources { min-height: 50px; clear: both;
                      margin-bottom: 15px; top: -5px; width: 392px; position: relative; float: right; }
#content .resources .shadow-top,
#content .resources .shadow-bottom { height: 15px; width: 100%; background-repeat: no-repeat;
	                                 background-position: left top; position: absolute; left: 0; text-indent: -9999em; }
#content .resources .shadow-top { background-image: url('/images/interface/container_shadow_top.png'); top: 0; z-index: 3; }
#content .resources .shadow-bottom { background-image: url('/images/interface/container_shadow_bottom.png'); bottom: 0; z-index: 4; }
#content .resources .content { z-index: 2; position: relative; background: url('/images/interface/container_shadow_mid.png') left top repeat-y;
                      padding: 7px 8px 7px 7px; }
#content .resources .body { padding: 10px 30px; overflow: hidden; }
#content .resources .body a { color: #555; text-decoration: none;
	                          font: normal 1.1em/1.3 Calibri, Tahoma, Helvetica, Arial, sans-serif; }
#content .resources .body a:hover { text-decoration: underline; }
#content .resources .body ul { float: left; width: 188px; }

#content .resources-akamai .body { background-color: #fce8d1; }
#content .resources-related .body { background-color: #e8ecbd; }

#sidebar.col .resources { margin: 0 auto; }

/* [=footer]
********************/
#footer { text-align: center; font: normal 1.1em Arial, Helvetica, sans-serif; margin-bottom: 20px; }
#footer p { line-height: 1.2; color: #7b2e00; }
#footer-nav { height: 26px; background-color: #9c7d62; border-bottom: solid 10px #ded4cb; text-align: center; margin-bottom: 6px; }
#footer-nav ul li { display: inline; text-transform: uppercase; line-height: 26px; padding: 0 8px; color: #fff; }
#footer-nav ul li.divider { padding: 0; }
#footer-nav ul li a:link,
#footer-nav ul li a:visited { color: #fff; text-decoration: none; }
#footer-nav ul li a:hover { text-decoration: underline; }

.question { margin-bottom: 40px; }
#featured-article { margin-bottom: 30px; }

/* [=white-panel]
********************/
.white-panel { position: relative; width: 257px; left: -10px; margin: 35px 0 35px; }
.white-panel .white-panel-top { height: 20px; width: 257px; padding: 20px; background: url('/images/interface/white_panel_bg_top.png') left top no-repeat; position: absolute; top: -20px; left: 0; }
.white-panel .white-panel-bottom { height: 25px; width: 297px; background: url('/images/interface/white_panel_bg_bottom.png') left top no-repeat; position: absolute; bottom: -25px; left: 0; }
.white-panel .white-panel-mid { background: url('/images/interface/white_panel_bg_mid.png') left top repeat-y; position: relative; width: 257px; padding: 0 20px; }

.video-left-panel { position: relative; width: 210px; left: 20px; margin: 35px 0 25px; }
.video-left-panel h2 { font: normal 1.3em Georgia, 'Times New Roman', Times, serif; color: #1b4a80; }


/* [=grad-panel]
********************/
.grad-panel { width: 282px; position: relative; padding: 11px 0 18px; background: #fff url('/images/interface/grad_panel_grad.png') left bottom repeat-x; left: -5px; cursor: pointer; }
.grad-panel p { margin-bottom: 0 !important; }
.grad-panel .grad-panel-top,
.grad-panel .grad-panel-bottom { width: 282px; background-repeat: no-repeat; background-position: left top; height: 18px; }
.grad-panel .grad-panel-top { position: absolute; top: 0; left: 0; background-image: url('/images/interface/grad_panel_top.png'); }
.grad-panel .grad-panel-bottom { position: absolute; bottom: 0; left: 0; background-image: url('/images/interface/grad_panel_bottom.png'); }
.grad-panel .grad-panel-mid { background: url('/images/interface/grad_panel_mid.png') left top repeat-y; width: 246px; padding: 0 21px 0 15px; }
.grad-panel .title { font: normal 1.6em Georgia, 'Times New Roman', Times, serif; color: #898989; text-transform: uppercase; }
.grad-panel .subtitle { font: italic .9em 'Franklin Gothic Medium', Helvetica, Arial, sans-serif; color: #ed1c24; text-transform: uppercase; }
.grad-panel .description { font: normal .9em 'Franklin Gothic Medium', Helvetica, Arial, sans-serif; color: #005b7f; text-transform: uppercase; }


/* [=features]
****************************************/
#features { z-index: 2 !important; width: 400px; height: 280px; position: relative; margin-bottom: 20px; border: 1px solid #cdcdcd; padding: 10px 10px 20px; }
#features h4 { font-family: "Century Gothic", Helvetica, Arial, sans-serif; text-transform: uppercase; background-color: #458CA3; color: #fff; font-weight: normal; padding: 5px 10px; font-size: 1.05em; }
#features ul { list-style-type: none; }
#features img { margin-bottom: 10px; }
#features .feature-nav-overlay { width: 400px; height: 20px; background-color: black; opacity: 0.5; position: absolute; top: 257px; left: 10px; z-index: 4; }
#features .nav { position: absolute; z-index: 5; top: 260px; display: block; width: 12px; height: 12px; line-height: 12px; text-align: center; text-decoration: none; background-repeat: no-repeat; background-position: left top; background-image: url('/images/interface/feature_off.png'); text-indent: -9999em; }
#features .nav:hover,
#features .nav-selected { background-image: url('/images/interface/feature_on.png'); }
#features .feature { position: absolute; top: 46px; left: 10px; }
#features .feature h3 a { padding: 0 10px; margin: 0; font: normal 1.4em Georgia, 'Times New Roman', Times, serif; color: #1d3b6b; }
#features .feature .summary { padding: 0 10px 20px; margin: 5px 0; color: #711912; line-height: 1.1; }

/* [=form_fields]
********************/
.text-field { background: none; position: relative; padding: 0 3px 0 7px; height: 17px; margin-bottom: 5px; }
.text-field-left,
.text-field-right { height: 22px; background-position: left top; background-repeat: no-repeat; top: 0; position: absolute; }
.text-field-left { width: 7px; background-image: url('/images/interface/text_field_left.png'); left: 0; }
.text-field-right { width: 3px; background-image: url('/images/interface/text_field_right.png'); right: 0; }
.text-field input { border: none; height: 16px; padding-top: 5px; font: normal 11px "Franklin Gothic Medium", Helvetica, Arial, sans-serif !important; text-transform: uppercase; width: 100%; background: url('/images/interface/text_field_mid.png') left top repeat-x; }
.text-field-name { width: 100px; }
.text-field-email { width: 185px; }

.text-area { background: none; position: relative; padding: 0 7px 0 7px; height: 71px; margin-bottom: 5px; }
.text-area-left,
.text-area-right { height: 70px; background-position: left top; background-repeat: no-repeat; top: 1px; position: absolute; }
.text-area-left { width: 7px; background-image: url('/images/interface/text_area_left.png'); left: 0; }
.text-area-right { width: 7px; background-image: url('/images/interface/text_area_right.png'); right: 0; }
.text-area textarea { border: none; height: 66px; padding-top: 5px; font: normal 11px "Franklin Gothic Medium", Helvetica, Arial, sans-serif !important; text-transform: uppercase; width: 100%; background: url('/images/interface/text_area_mid.png') left top repeat-x; }

.button-go { position: relative; top: 4px; }

/* [=page-options]
********************/
#page-options { font: normal .8em Arial, Helvetica, sans-serif; color: #000; position: relative; min-height: 41px; width: 320px; float: right; top: 7px; margin-bottom: 20px; margin-top: 15px; z-index: 2; }
#page-options a { color: #000; text-decoration: none; margin-left: 20px; }
#page-options .send-to-friend { margin-bottom: 5px; }
body.text-large #page-options .send-to-friend { margin-bottom: 2px; }
body.text-x-large #page-options .send-to-friend { margin-bottom: -1px; }
#page-options .print-page { display: block; position: absolute; right: 69px; top: -6px; text-indent: -9999em; width: 41px; height: 41px; background: url('/images/interface/print.png') left top no-repeat; }
#page-options .text-size { display: block; position: absolute; right: 20px; top: -6px; text-indent: -9999em; width: 41px; height: 41px; background: url('/images/interface/text_size.png') left top no-repeat; }
#page-options .print-page:hover { background-position: left -41px; }
#page-options .text-size:hover { background-position: left -41px; }

/* [=video-description]
********************/
.video-description { font: normal 1em Calibri, Tahoma, Verdana, Arial, sans-serif; color: #0054a6; margin: 20px 20px 20px 0; }
.video-description a { color: #003663; }
.video-description h2 { font-size: 1.4em; color: #1b1464; margin: 0 0 8px; }
.video-description .time { font-size: 1.2em; color: #1b1464; margin-bottom: 8px; }

/* [=send-to-friend]
********************/
#send-to-friend { width: 280px; margin: 0 auto; }
#send-to-friend fieldset { margin: 5px 0; }
#send-to-friend fieldset legend { font: bold 1.3em 'Franklin Gothic Medium', Helvetica, Arial, sans-serif; }
#send-to-friend fieldset .text-field { margin: 10px 0; }
#send-to-friend textarea { font: normal 11px "Franklin Gothic Medium", Helvetica, Arial, sans-serif !important; text-transform: uppercase; }

#rpg { font-family: 'Franklin Gothic Medium', Helvetica, Arial, sans-serif; }
#rpg-signup-status,
#ask-an-expert-status { margin: 0 10px; color: #b00; margin-bottom: 10px; }
#rpg h3 { font-family: 'Franklin Gothic Medium', Helvetica, Arial, sans-serif; font-size: 1.2em; color: #0d004c !important; text-transform: uppercase;}
#rpg h3 img { float: left; }
#rpg h4 { color: #0076a3 !important; text-transform: uppercase; clear: both; padding-top: 10px; }
#rpg ul { list-style-image: url('/images/interface/bullet_blue.gif'); padding-left: 15px; margin-bottom: 10px; margin-top: 5px; }
#rpg ul li { color: #003471; text-transform: uppercase; font-size: .9em; }
#rpg .instructions { font-style: italic; font-size: .8em; color: #545454 !important; text-align: center; margin-bottom: 10px;  }
#rpg .instructions span { text-transform: uppercase; }
#rpg .more-info { text-align: center; margin-top: 5px; }
#rpg .more-info a { font: normal 1.2em 'Calibri', Tahoma, Verdana, Arial, sans-serif; text-decoration: underline; color: #0072bc; }


html[xmlns^=""]:not([lang*=""]) #rpg[id="RPG"] .button-go { top: 5px; }
html[xmlns^=""]:not([lang*=""]) #rpg[id="RPG"] .more-info { clear: both; padding-top: 5px; }
html[xmlns^=""]:not([lang*=""]) #rpg[id="RPG"] .text-field-email { margin-top: 5px; float: left; }


/* [=video-layout]
********************/
/*
#vidContent.vid { background: url('/images/content/tv/video/bgVideo.jpg') no-repeat; width: 100%; height: 500px; }
#videoArea { background: none; width: 421px; height: 228px; float: right; border: 2px solid red;
	         margin: 49px 51px 50px 0; position: relative; }
.vid #main { float: right; border: 1px solid blue; width: 505px; position: relative; background: white; }
.vid #sidebar { float: left; border: 1px solid red; width: 235px; position: relative; background: white; }
.clear { clear: both; }
*/
body.home #main.col { width: 400px; }
body.home #sidebar.col { width: 324px; }

body.video #content { background: #dde8ec url('/images/interface/video_content_bg.png') left top no-repeat; padding-top: 20px; margin-top:0; }
body.video #main.col .video-player { width: 524px; height: 344px; background: url('/images/interface/video_container.png') top left no-repeat; padding: 12px; }
body.video #main.col { width: 540px; float: right; margin: 0; }
body.video #sidebar.col { width: 230px; float: left; }


div.page_list_segment { width: 20px; height: 20px; text-align: center; vertical-align: top; color: #4893AB; background-color: #E6EFF8; border: solid 1px #4893AB; cursor: pointer; margin-left: 3px; padding: 0; }
div.page_list_segment_selected { color: white; background-color: #4893AB; margin-left: 3px; font-weight: bold; }



/* [=quiz]
********************/
#main.article .quiz { width: 350px; min-height: 450px; color: black; padding: 20px; background: url('/images/content/topics/2009/102/heart_quiz/quiz_header.gif') top left no-repeat; background-color: #e3eef2; }
#main.article .quiz h2 { padding: 0; color: #0D004C; }
#main.article .quiz h3 { color: #497c8f; }
#main.article .quiz ul { list-style-type: none; padding: 0; margin-bottom: 20px; }
#main.article .quiz li { font-size: 120%; margin-bottom: 4px; }
#main.article .quiz li.over { color: #1A7591; cursor: pointer; }
#main.article .quiz li.correct-response { color: green; }
#main.article .quiz li.incorrect-response { color: red; }
#main.article .quiz #quiz-score { font-weight: bold; }

/* bad stuff */
.ie6-spacing-hack { height: 6px; clear: both; }