/* ----------------------------------------------------- Kellogg’s Special K Europe (http://www.specialk.co.uk) SCREEN style sheet author: mN -> hello@madebymn.co.uk version: 2009.06 ----------------------------------------------------- CONTENTS: 1. GLOBAL 2. TYPOGRAPHY 2.1. BUTTONS 2.2. LISTS 3. GENERAL LAYOUT 4. HEADER 4.1. NAVIGATION 5. SUBNAV 6. CONTENT 6.1. REUSABLE ELEMENTS 6.1.1. VIDEO PLAYER 6.1.2. GALLERY CAROUSEL 6.1.3. THUMBLIST 6.1.4. TABS 6.1.5. RELATED PANEL 6.1.6. TABLES 6.1.7. JQUERY RATING PLUGIN 6.1.8. ACCORDION 6.x. HOME 6.x. FORUMS 6.x. SUCCESS STORIES 6.x. PRODUCTS 6.x. ABOUT US 7. PERSONAL PLAN 8. FOOTER 9. SITEMAP 10. SEARCH RESULTS NOTES: - CSS is written, where appropriate, in the same order as the markup - Dropped element name from #container, #header, #content and #footer for sake of legibility - Major sections (Navigation) are indented and have their own point-number - Added math comments to end of lines to show where numbers come from (calculated margins, for example) ----------------------------------------------------- */ /* =1. GLOBAL */ html {font-family: Arial, Verdana, sans-serif; height: 100%;} body {width: 100%; height: 100%; margin: 0 auto; line-height:1; font-size:62.5%;} .padding-right-6 {padding-right: 6px;} .margin-right-6 {margin-right: 6px;} .padding-left-6 {padding-left: 6px;} .margin-left-6 {margin-left: 6px;} a.red-link {color:#ee2b4e;} /* =2. TYPOGRAPHY Global styles only — specifics can be specified elsewhere in the code */ strong {font-weight: bold;} em {font-style: italic;} em strong, strong em {font-weight: bold; font-style: italic;} .upper {text-transform: uppercase;} h1,h2,h3,h4,h5 {font-family: "Times", "Times New Roman", "Georgia", serif;} h1 {color:#00559D; font-size:3.6em; margin-bottom: 20px;} /* text-indent: -24px; margin-left: 24px; */ h1 span{color: #00a4e1; clear: both; display: block;} h1 {padding-left: 24px;} .personalplan h1 {padding-left: 0px;} h1 span {position: relative; left: -24px;} .narrow #content h3 {color:#00559D; font-family:"Times New Roman"; font-size:2.1em; font-weight:normal; margin-bottom:10px;} .wide #content table tbody tr td h3 {color:#00559D; font-family:"Times New Roman"; font-size:1.9090909em; font-weight:normal; margin-bottom:10px;} .wide #content table tbody tr td a {font-size: 1.09090909em; color: #ee2b4e;} p{margin-bottom: auto; color: #666;} #content p {font-size: 1.2em; line-height: 14px; margin-bottom: 14px;} #content div.intro p {font-size: 1.4em; line-height: 18px; margin-bottom: 18px;} #intro-text {background: transparent url(../images/global/rule.gif) repeat-x scroll 0 bottom; padding:0 0 5px 0; margin:0 0 20px 0;} #intro-text p {font-size:1.4em; line-height:130%;} #content p.smallCopy, #content div.intro p.smallCopy {font-size:1em; line-height:120%;} a {color: #006699; text-decoration: none;} a:visited {} a:active {} a:hover {text-decoration: underline;} h1 a{color:#00559D;} h1 span a {color: #00a4e1;} /* CONTENT LEVEL LINKS */ .wide p a, .wide li a, .narrow p a, .narrow li a {color: #EE2B4E;} /* AND OVERRIDE FOR PERSONAL PLAN… */ .personalplan p a, .personalplan li a {color: #006699;} /* Headings with icons */ h1.icon, h2.icon, h3.icon {min-height: 23px; height: auto!important; height: 23px; font-size: 2.3em; float: left; margin-bottom: 10px; color: #00559d; font-family: Arial, Helvetica, Verdana, sans-serif; clear: both; float: left; width: 100%; display: block; vertical-align: middle; line-height: 41px;} h1.icon span, h2.icon span, h3.icon span {background: url(../images/personalplan/icons_white.gif) 0 0; width: 41px; height: 41px; margin-right: 9px; display: block; float: left; position: relative; } div.hr {float: left; width: 100%; height: 1px; background: #e7e7e7; line-height: 1px; font-size: 1px; display: none;} /* Using this for testing */ div.hr hr {display: none;} div.rule {float: left; width: 100%; height: 2px; line-height: 2px; font-size: 2px; background: url(../images/global/rule.gif) repeat-x; clear: both; display: inline; margin-bottom: 16px;} div.clear{ clear:both; height:0px; line-height:1px;padding:0px; margin:0px; } span.error {color: #ee2b4e;} /* =2.1. Buttons */ a.button-red {float: left; display: block; width: auto; line-height: 21px; font-size: 1.2em; color: #fff!important; font-weight: bold; padding: 0 3px 0 9px; background: url(../images/global/button_red_onblue.gif) no-repeat; position: relative;} a.button-red span {float: left; width: 15px; height: 21px; display: block; position: absolute; top: 0; right: -15px; background: url(../images/global/button_red_onblue.gif) no-repeat right 0;} a.button-red-plus {float: left; display: block; width: auto; line-height: 21px; font-size: 1.2em; color: #fff!important; font-weight: bold; padding: 0 9px 0 3px; background: url(../images/global/button_red_plus_left.gif) no-repeat right 0; position: relative;} a.button-red-plus span {float: left; width: 15px; height: 21px; display: block; position: absolute; top: 0; left: -15px; background: url(../images/global/button_red_plus_left.gif) no-repeat left 0;} a.button-red-plus:hover{ text-decoration:none;} a.button-red-arrowr, a.button-red-arrowl {float: left; display: block; width: auto; line-height: 18px; font-size: 1.2em; color: #fff!important; font-weight: bold; padding: 0 9px 0 3px; background: url(../images/global/btn-redwhitear-left-sml.gif) no-repeat right 0; position: relative;} a.button-red-arrowl span {float: left; width: 15px; height: 18px; display: block; position: absolute; top: 0; left: -15px; background: url(../images/global/btn-redwhitear-left-sml.gif) no-repeat left 0;} a.button-red-arrowr:hover, a.button-red-arrowl:hover{ text-decoration:none; } a.button-red-arrowr{background: url(../images/global/btn-redwhitear-right-sml.gif) no-repeat left 0;padding: 0 3px 0 9px;} a.button-red-arrowr span{right: -15px; background: url(../images/global/btn-redwhitear-right-sml.gif) no-repeat right 0;float: left; width: 15px; height: 18px; display: block; position: absolute; top: 0; } a.button-arrowr-redwhite, /* small red button on white */ a.button-arrowr-redwhite span {background: url(../images/global/button_arrowr_redwhite.gif) no-repeat; display: block; float: left; color: #fff;} a.button-arrowr-redwhite {padding: 0 15px 0 8px; font-size: 1.2em; line-height: 18px; font-weight: bold; color: #fff!important; position: relative;} a.button-arrowr-redwhite span {width: 15px; height: 18px; background-position: -285px 0; position: absolute; right: 0; top: 0;} a.button-arrowr-redwhite:hover {text-decoration: none;} a.button-arrow-white, /* Large red button on white */ a.button-arrow-white span {background: url(../images/global/button_arrow_white.gif) no-repeat; display: block; float: left; } a.button-arrow-white {padding: 0 21px 0 11px; line-height: 26px; position: relative; display: block; width: auto; color: #fff!important; font-size: 1.4em; font-weight: bold;} a.button-arrow-white span{background-position: -279px 0; width: 21px; height: 26px; position: absolute; top: 0; right: 0; display: block;} a.button-arrow-white:hover {text-decoration: none;} a.button-arrow-pink, /* Large red button on pink */ a.button-arrow-pink span {background: url(../images/global/button_arrow_pink.gif); display: block; float: left;} a.button-arrow-pink {padding: 0 21px 0 11px; line-height: 26px; position: relative; display: block; width: auto; color: #fff!important;} a.button-arrow-pink span{background-position: -279px 0; width: 21px; height: 26px; position: absolute; top: 0; right: 0; display: block;} a.button-arrow-pink:hover {text-decoration: none;} .btn-small {position: relative; clear:left; float:left; margin: 10px 0 0 10px;} .btn-medium {position: relative; clear:left; float:left; margin: 10px 0 0 10px;} .btn-large {position: relative; clear:left; float:left; margin: 10px 0 0 10px;} .btn-white {position: relative; clear:left; float:left; margin: 10px 0 0 10px;} .btn-large label {background: #ee2b4e url(../images/global/btn-large-left.gif) repeat-y left top; color: #fff; font-family: Arial; font-size: 1.8em; font-weight: bold; line-height: 40px;display: block; padding-left: 13px; padding-right: 33px; cursor: pointer;} .btn-medium label {background: #ee2b4e url(../images/global/btn-medium-left.gif) repeat-y left top; color: #fff; font-family: Arial; font-size: 1.4em; font-weight: bold; line-height: 30px; display: block;padding-left: 11px; padding-right: 25px; cursor: pointer;} .btn-small label {background: #ee2b4e url(../images/global/btn-small-left.gif) repeat-y left top;color: #fff;font-family: Arial;font-size: 1.1em;font-weight: bold;line-height: 21px;display: block; padding-left: 7px; padding-right: 23px; cursor: pointer;} .btn-large input {width: 33px; height: 40px; position: absolute; right: -1px; top: 0px;} .btn-medium input {width: 25px; height: 30px; position: absolute; right: -1px; top: 0px;} .btn-small input {width: 23px; height: 21px; position: absolute; right: -1px; top: 0px;} .btn-medium.on_pink label {background: #ffebed url(../images/global/btn-onpink-medium-left.gif) repeat-y left top;} .btn-white label{ background: #d61d3d url(../images/global/btn-white-med-left.gif) repeat-y left top; color: #d61d3d; font-family: Arial; font-size: 1.4em; font-weight: bold; line-height: 26px; display: block;padding-left: 11px; padding-right: 25px; cursor: pointer; } .btn-white input {background: #d61d3d;width: 16px; height: 26px; position: absolute; right: -1px; top: 0px;} /* =2.2. LISTS */ ol li {display: list-item;} /* This allows an `ol` to increment in MSIE—must be a reset bug */ ol {list-style-type: decimal; list-style-position: outside; width: 417px; margin: auto auto 8px 26px; padding-top: 8px; float: left; display: inline; clear: both;} /* 28 (margin) - 20 (li margin) = 8 (ul margin) */ ol li {margin-left: 26px; font-size: 2.1em; clear: right; color: #06599f; font-family: Times, "Times New Roman", Georgia, serif; margin-bottom: 6px;} /* 20 (margin) - 14 (p margin) = 6 (li margin) */ ol li p {font-size: 0.5714em!important; color: #666; font-family: Arial, Verdana, sans-serif; } /* 12 (child) / 21 (parent) = 0.5714 (child in em) */ ol.legal {} ol.legal li {color: #666; font-family: Arial, Helvetica, Verdana, sans-serif!important; font-size: 1.2em; } ol.legal li p {} .narrow #content ul { color:#666666; font-size:1.2em; line-height:130%; list-style-type:disc; margin:0 0 20px 52px; } .narrow #content ul li { margin:0 0 5px 0; } div.table {width: 686px; border: 0px solid lime; float: left; position: relative; left: -10px; display: inline; margin-bottom: 14px;} div.table ul {width: 290px; float: left; margin-left: 0!important; margin-left: -10px; display: inline;} div.table ul.col2 {width: 365px; margin-left: 20px!important; margin-left: 0;} div.table ul li {float: left; background: url(../images/global/rule.gif) 0 bottom repeat-x; width: 100%; padding: 8px 0 7px 0; margin: 0 0 0 10px; position: relative; border: 0px solid red; clear:both;} ul.col2 li {border: 0px solid blue;} div.table ul li a {color: #666; font-size: 1.2em; line-height: 14px; padding: 0 0 0 14px; background: url(../images/global/arrow_red_small.gif) no-repeat 0 50%;} div.table ul li.feature {background: #e8f0f9; margin-top: 3px;} div.table ul li.feature div.thumb {background: pink; float: left; width: 84px; height: 84px; margin: -1px 6px 7px 4px; position: relative;} div.table ul li.feature div.thumb span {background: url(../images/global/masks/mask_feature_84.gif) no-repeat; display: block; width: 84px; height: 84px; position: absolute; top: 0; left: 0; z-index: 9;} div.table ul li.feature div.copy {float: left; width: 180px; margin: 4px 0 13px 3px;} div.table ul li.feature div.copy h3 {font-weight: bold; color: #00559d; font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1.2em; margin-bottom: 3px;} div.table ul li.feature div.copy h3, div.table ul li.feature div.copy p {} div.table ul li.feature div.copy p {margin-bottom: 0px;} ul.table {width: 686px; margin-left: -10px; margin-bottom: 14px;} ul.table li {float: left; background: url(../images/global/rule.gif) 0 bottom repeat-x; width: 290px; padding: 8px 0 7px 0; margin: 0 0 0 10px; display: inline;} ul.table li.odd {width: 365px;} ul.table li a {color: #666; font-size: 1.2em; line-height: 14px; padding: 0 0 0 14px; background: url(../images/global/arrow_red_small.gif) no-repeat 0 3px; display: block;} /* ul.inline-pods, ul.inline-pods * {border: 1px solid pink;}*/ ul.inline-pods {width: 455px!important; float: left; margin-left: -5px!important; padding: 0; text-indent: 0; left: 0;} ul.inline-pods li {width: 147px; float: left;list-style-type: none; margin:0 2px!important; padding: 0; text-indent: 0; float: left; cursor: pointer;} ul.inline-pods li a img {margin-bottom: 4px;} ul.inline-pods li a span {color: #00559d; font-size: 1.166666667em; line-height: 16px; font-family: Times, "Times New Roman", Georgia, serif; display: block; padding: 0 3px; width: 141px;} ul.inline-pods li a:hover {text-decoration: none;} /* =3. GENERAL LAYOUT */ #container {width: 937px; min-height: 707px; height: auto!important; height: 707px; margin: auto; } /* Use negative margin */ #container #header, #container #footer {width: 925px; margin: auto; display: inline; margin-left: 6px;} #container #content {width: 925px; margin: auto;} .home #container {background: url(../images/global/curves/home.jpg) no-repeat 551px 0;} .narrow #container {background: url(../images/global/curves/narrow.jpg) no-repeat 622px 0; background-position: 622px 0!important;} .product-detail #container {background: url(../images/global/curves/product_detail.jpg) no-repeat 692px 0;} .wide #container {background: url(../images/global/curves/wide.jpg) no-repeat 836px 0} .full #container {background: url(../images/global/curves/full.jpg) no-repeat 841px 0} .nocurve #container {background-image: none} /* * #container {background: url(../images/global/curves/grid.gif) 0 0!important}*/ /* =4. HEADER */ #header {min-height: 100px; height: auto!important; height: 100px; width: 100%; float: left; display: inline; clear: both; position: relative; margin-bottom: 27px!important; z-index: 9; } .home #container #header {margin-bottom: 0px!important;} #header p#logo {float: left;} /* =4.1 NAVIGATION*/ #header div#navigation {width: 750px; float: right; margin: 55px 0 10px 0; position: relative; background: #f44560 url(../images/global/navigation_bg_off.gif) repeat-x 0 bottom;} #header div#navigation ul {width: 720px; margin: 0 15px; min-height: 25px; height: auto!important; height: 25px; } #header div#navigation ul li {float: left; position: relative; height: 100%; display: block;} #header div#navigation ul li a {color: #fff; font-weight: bold; text-decoration: none; font-size: 1.2em; line-height: 14px; padding: 5px 9px 6px 9px; display: block; background: #f44560 url(../images/global/navigation_bg_off.gif) repeat-x 0 bottom; outline: none; text-align: center; float: left;} #header div#navigation ul li a:hover, #header div#navigation ul li a.active {background: #ad2639 url(../images/global/navigation_bg_on.gif) repeat-x 0 bottom;} #header div#navigation ul li.first a span {height: 25px; width: 15px; display: block; background: #f44560 url(../images/global/navigation_ends_off.gif) 0 bottom no-repeat; position: absolute; bottom: 0; } #header div#navigation ul li.first a {padding-left: 3px;} #header div#navigation ul li.first span {position: absolute; top: 0; left: -15px; } #header div#navigation ul li.first a:hover span, #header div#navigation ul li.first a.active span {background: #ad2639 url(../images/global/navigation_ends_on.gif) 0 bottom no-repeat;} #header div#navigation div#nav-end {height: 25px; width: 15px; display: block; background: #f44560 url(../images/global/navigation_ends_off.gif) no-repeat -15px bottom; position: absolute; top: 0; right: 0;} /* MULTI-LINE NAVIGATION */ #header div#navigation.two-line-nav {} #header div#navigation.two-line-nav ul {min-height: 39px; height: auto!important; height: 39px;} #header div#navigation.two-line-nav ul li a {min-height: 28px; height: auto!important; height: 28px; } #header div#navigation.two-line-nav ul li.first a span {height: 39px!important;} #header div#navigation.two-line-nav div#nav-end {height: 39px!important; padding: 0; } #header div#breadcrumb {width: 756px; float: right; font-size: 1.1em;} #header div#breadcrumb * {display: block; float: left; color: #666;} #header div#breadcrumb p, #header div#breadcrumb ul li a {margin-right: 8px;} #header div#breadcrumb ul li a {background: url(../images/global/arrow_red_small.gif) no-repeat 0 3px; padding-left: 8px; line-height: 15px;} #header div#breadcrumb ul li a.active {color: #ee2b4e;} #header div#breadcrumb ul {width: 656px; clear: none;} #header div#breadcrumb ul * {width: auto; float: none; clear: none; display: inline;} #header div#top-forms {position: absolute; top: 18px; right: 0px; z-index: 9;} #header div#top-forms div#signin {float: right; margin-right: 20px; padding-right: 12px; background: url(../images/global/top_forms_bg.gif) no-repeat top right;} #header div#top-forms div#signin h2 {font-size: 1.7em; color: #00559d; float: left; margin-right: 10px; padding-top: 3px; line-height: 21px; position: relative; top: -3px;} #header div#top-forms div#signin p {float: left; font-size: 1.2em; display: inline;} #header div#top-forms div#signin p input.input-text {margin-right: 10px; width: 135px; color: #ccc;} #header div#top-forms div#signin p label {display: none;} #header div#top-forms div#signin p span {display: block; clear:both;} #header div#top-forms div#signin span.error {width: 350px; display: block; clear: both; font-size: 1.1em; color: #ee2b4e; margin-top: -1px; float: left; background: #fff; padding: 3px; position: relative; left: -3px;} #header div#top-forms div#signin input.button-login {position: relative; top: 2px; } #header div#top-forms div#search {position: relative; float: right; top: 0;} #header div#top-forms div#search label {display: none;} #header div#top-forms div#search input.input-search {width: 100px; color: #ccc;} #header div#top-forms div#search input.button-search {position: relative; top: 2px; margin-left: 3px;} /* =5. SUBNAV */ #subnav {float: left; width: 161px; margin: 0 8px 12px 6px; display: inline;} #subnav ul {float:left; font-size: 1.4em;} #subnav ul li {float: left; width:154px; padding: 0; padding-right:7px; margin-bottom: 0;} #subnav ul li a {display:block; padding: 3px 12px 4px 12px; color: #00559d; line-height: 125%; margin: 0; outline: none; width: 130px;} #subnav ul li.active {background: url('../images/global/sidebar-nav-arrow.gif') no-repeat right 6px;} /* Had to position this from the top incase the `li` has a child */ #subnav ul li.active a, div#subnav ul li a:hover {background-color:#d1e1f3; text-decoration: none;} #subnav ul li ul {border-top: 1px solid #fff; font-size: 0.8899em; display: inline; float: left;padding: 0; margin: 0; display: inline;} #subnav ul li ul li {padding-right: 0px; } #subnav ul li ul li a {background-color: #e8f0f9!important;} #subnav ul li ul li.active a, #subnav ul li ul li a:hover {background: none #d1e1f3!important;} #subnav ul li ul li.active ul {margin-bottom: 1px;} #subnav ul li ul li.active ul li a, #subnav ul li ul li ul li a:hover {display:block; background: none #e8f0f9!important;} /* e8f0f9 / d1e1f3 */ #subnav ul li ul li ul li.active a, #subnav ul li ul li ul li a:hover {background: #d1e1f3!important;} /* =6. CONTENT REMEMBER: This has 6px of padding (to allow for shadows & gradients), so you will need to add +/- 6px to any element that is supposed to be on the left/right edge. */ #content {float: left; position: relative; margin-bottom: 12px!important; padding: 0 6px; min-height: 400px; height: auto!important; height: 400px;} /* =.NET // These should reflect the Umbraco page types */ .sub #container #content {width: 750px; padding: 0; display: inline;} .narrow #container #content {width: 443px;} .wide #container #content {width: 666px;} .product-detail #container #content {width: 518px;} .planhome #container #content {width:937px;} #content div#primary {float: left; width: 100%;} /* =6.1 REUSABLE ELEMENTS You can find documentation for these in the Code Snippets directory */ /* =6.1.1 VIDEO PLAYER */ div#video div#video-player {height: 219px; width: 365px; margin: 0 auto 10px auto; background: pink;} div#video div#video-controls {position: relative; width: 515px; margin:0 0 20px -70px;} div#video div#video-controls div.scrollable{position:relative;overflow:hidden;width:365px!important; min-height:78px; min-height: 78px; height: auto!important; height: 78px; margin: auto;} div#video div#video-controls div.scrollable ul {width:20000em;position:absolute;} div#video div#video-controls div.scrollable ul li{float:left; width: 85px; height: 78px; margin-right: 8px; background: pink; overflow:hidden;} div#video div#video-controls span.prev, div#video div#video-controls span.next {position: absolute; background: url(../images/global/button_lr.gif); height: 18px; width: 18px; display: block;} div#video div#video-controls span.prev {left: 48px; top: 26px;} div#video div#video-controls span.next {right: 48px; top: 26px; background-position: -18px 0;} div#video div#video-controls span.prev:hover {background-position: -0px -18px;} div#video div#video-controls span.next:hover {background-position: -18px -18px;} /* =6.1.2 GALLERY CAROUSEL */ div.gallery {position: relative; width: 442px;} div.gallery div.scrollable{position:relative;overflow:hidden;width:310px!important; margin: auto;} div.gallery div.scrollable ul {width:20000em;position:absolute;} div.gallery div.scrollable ul li{float:left; width: 310px; margin-right: 8px; text-align: center;} div.gallery div.scrollable ul li img {margin-bottom: 34px;} div.gallery span.prev, div.gallery span.next {position: absolute; background: url(../images/global/button_lr.gif); height: 18px; width: 18px; display: block;} div.gallery span.prev {left: 20px; top: 130px;} div.gallery span.next {right: 20px; top: 130px; background-position: -18px 0;} div.gallery span.prev:hover {background-position: -0px -18px;} div.gallery span.next:hover {background-position: -18px -18px;} /* =6.1.3 THUMBLIST (for success stories page) */ ul.thumblist {float: left; margin: 12px 0 0 -86px; width: 752px; display: inline;} ul.thumblist li {width: 290px; margin: 0 0 28px 86px; display: inline; position: relative; min-height: 108px; height: auto!important; height: 108px;float: left; } ul.thumblist li h3, ul.thumblist li p {margin-left: 150px; } ul.thumblist li h3 {font-size: 1.2em; color: #00559d; font-family: Arial, Verdana, sans-serif; font-weight: bold; margin-bottom: 5px;} ul.thumblist li p {font-size: 1.2em; line-height: 125%;} ul.thumblist li p a {clear: both; float: left; color: #e7284a;} ul.thumblist li p a:hover {text-decoration: underline;} ul.thumblist li div {width: 148px; height: 108px; margin-left: -4px;float: left; position: absolute; top: 0; left: 0;} ul.thumblist li div p {position: relative; margin-left: 0; width: 100%; height: 100%;} ul.thumblist li div p img, ul.thumblist li div p span {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} ul.thumblist li div p span {background: url(../images/about/mask.gif); } /* =6.1.4 TABS */ div.tabs {margin-bottom: 18px; float: left;} div.tabs ul.tab-list {clear: both; float: left; position: relative; left: 10px; display: inline; z-index: 10;} div.tabs ul.tab-list li {width: auto; float: left;} div.tabs ul.tab-list li a {line-height: 33px; background: url(../images/global/tabs/tab_background.gif) no-repeat left -33px; position: relative; display: block; float: left; text-align: center; font-family: Times, "Times New Roman", serif; font-size: 1.4em; padding: 0 12px;} div.tabs ul.tab-list li a span {background: url(../images/global/tabs/tab_end.gif) no-repeat 0 -33px; display: block; height: 33px; width: 12px; position: absolute; top: 0; right: 0!important; right: -1px;} div.tabs ul.tab-list li a.current, div.tabs ul.tab-list li a:hover {background: url(../images/global/tabs/tab_background.gif) no-repeat left -0px; text-decoration: none;} div.tabs ul.tab-list li a.current span, div.tabs ul.tab-list li a:hover span {background: url(../images/global/tabs/tab_end.gif) no-repeat left -0px} div.tabs div.panes {float: left; clear: both; width: 518px; z-index: 9; position: relative; top: -3px;} div.tabs div.panes div.top, div.tabs div.panes div.middle, div.tabs div.panes div.bottom {background: url(../images/global/tabs/pane_background.gif); width: 100%; float: left;} div.tabs div.panes div.middle {background-position: -518px 0; width: 490px; padding: 0 14px;} div.tabs div.panes div.bottom {background-position: 0 -12px;} div.tabs div.panes div.top, div.tabs div.panes div.bottom {height: 12px;} /* =6.1.5 RELATED PANEL */ div.related-panel {float: left; width: 528px; margin-left: -5px; display: inline;} div.related-panel.wide {width: 678px;} div.related-panel div {width: 145px; background: #d7e6f5; float: left; margin: 0 5px; padding: 10px 10px 7px 10px; color: #00559d; display: inline;} div.related-panel-double div{ width: 300px; background: #d7e6f5; float: left; margin: 0 12px 0 0; padding: 10px 10px 7px 10px; color: #00559d; display: inline; } div.related-panel-double div.last{ margin-right:0; } div.related-panel.wide div {width: 196px;} div.related-panel div h3, div.related-panel-double div h3 {font-size: 1.2em; font-size: 1.4em; font-family: Arial, Helvetica, Verdana, sans-serif; font-weight: bold; margin-bottom: 14px;} div.related-panel div ul li, div.related-panel-double div ul li {font-size: 1.2em; line-height: 1.4em; margin-bottom: 3px;} div.related-panel div ul li a, div.related-panel-double div ul li a {color: #006699;} /* =6.1.6 TABLES */ table {width: 100%; color: #666; font-size: 1.1em; line-height: 12px;} table tr td, table tr th {padding: 8px 10px;} table tr th {background: #e4ecf7; border-bottom: 1px solid #fff; font-weight: bold;} table tr.odd {background-color: #f1f4fb;} /* =6.1.7 “jQuery.Rating” PLUGIN CSS http://www.fyneworks.com/jquery/star-rating/ added here so can be overwritten for specific sections later */ div.rating{cursor:pointer;margin:1.5em;clear:both;display:block} div.rating:after{content:'.';display:block;height:0;width:0;clear:both;visibility:hidden} div.rating-cancel,div.star-rating{float:left;width:17px;height:15px;text-indent:-999em;cursor:pointer;display:block;background:transparent;overflow:hidden} div.rating-cancel,div.rating-cancel a{background:url(../images/global/delete.gif) no-repeat 0 -16px} div.star-rating,div.star-rating a{background:url(../images/global/star.gif) no-repeat 0 0px} div.rating-cancel a,div.star-rating a{display:block;width:16px;height:100%;background-position:0 0px;border:0} div.star-rating-on a{background-position:0 -16px!important} div.star-rating-hover a{background-position:0 -32px} /* Read Only CSS */ div.star-rating-readonly a{cursor:default !important} /* Partial Star CSS */ div.star-rating{background:transparent!important;overflow:hidden!important} .stars-static{float:right; width:95px; height:20px;padding:5px 0 0 0;} /* added by ian for meal picker ratings */ /* =6.1.8 ACCORDION */ .accordion { background:#fff; margin: 0;} .accordion .trigger {clear:both; margin:0 0px; cursor:pointer; background: url(../images/global/rule.gif) repeat-x bottom;} .accordion .trigger h4 {background: url(../images/global/accordion/arrow-off.gif) no-repeat 3px 50%; font-family:Arial,Helvetica,sans-serif; font-size: 1.3em!important; font-weight: bold; color: #666!important; padding: 8px 18px; margin: 0!important;} .accordion .selected {background: #e7eff9; } .accordion .selected h4 {background: url(../images/global/accordion/arrow-on.gif) no-repeat 3px 50%;} .accordion .hover {background: #e7eff9 url(../images/global/rule.gif) repeat-x bottom;} .accordion .hover h4{background: url(../images/global/accordion/arrow-on.gif) no-repeat 3px 50%;} .accordion .slider {width: 407px; float:left; padding:5px 18px 5px 18px; background: #e7eff9 url(../images/global/rule.gif) repeat-x bottom; } .accordion .slider p {width: 100%;} .showSlider { display:block; } .hideSlider { display:none; } #content .slider p {line-height:18px;} /* sample meal guide */ #meal-guides .slider {padding:0px 0px 0px 0px;width:100%; background-color:#fff;} #meal-guides .selected {background: #fff;} #meal-guides .hover {background: #fff url(../images/global/rule.gif) repeat-x bottom;} #meal-guides .trigger h4 {font-size: 1.4em!important; font-weight: normal; color: #00559D!important; padding: 14px 18px; } #meal-guides .hover h4{background: url(../images/global/accordion/arrow-on-white.gif) no-repeat 3px 50%;} #meal-guides .selected h4 {background: url(../images/global/accordion/arrow-on-white.gif) no-repeat 3px 50%;} /* =6.2 SNIPPETS Reusable buttons, graphics and so on… */ p.button-glamour {background: url(../images/global/arrow_red_medium.gif) no-repeat 0 50%; padding-left: 10px; float: left; width: 100%; } p.button-glamour a {display: block; float: left; width: 100%;} p.button-glamour a:hover {text-decoration: none;} p.button-glamour a span {display: block; display: inline-block; margin-left: 13px; height: 38px; width: 153px; background: url(../../assets-cms/images/global/buttons/glamour.gif) no-repeat; text-indent: -9999px; vertical-align: middle;} /* =6.x HOME */ #page-home #content div#primary {width: 690px; min-height: 500px; height: auto!important; height: 500px; margin: auto auto 10px -5px; background: url(../images/home/primary_bg.jpg) no-repeat; clear: both; display: inline; position: relative; z-index: 1;} #page-home #content div#primary div#theswf {position: absolute; width: 690px; height: 500px; top: 0px; left: 0; margin-bottom:0; } #page-home #content div#primary h1 {display: block; width: 100%; height: 100%; position: absolute; top:0; left: 0;} #page-home #content div#primary h1 a {display: block; width: 100%; height: 100%; text-indent: -9999px; position: absolute; top:0; left: 0;} #page-home #content div#pods {width: 280px; position: absolute; top: 7px; right: 6px; z-index: 9;} #page-home #content div#pods ul li {min-height: 123px; height: auto!important; height: 124px; float: right; position: relative;} #page-home #content div#pods ul li#pod-a {width: 280px;} #page-home #content div#pods ul li#pod-b {width: 280px;} #page-home #content div#pods ul li#pod-c {width: 266px;} #page-home #content div#pods ul li#pod-d {width: 240px;} #page-home #content div#pods ul li a {display: block; height: 100%; width: 100%; position: absolute; text-indent: -9999px;} #page-home #content div#pods ul li#pod-1 {width:280px;} #page-home #content div#pods ul li#pod-2 {width:280px;} #page-home #content div#pods ul li#pod-3 {width:266px;} #page-home #content div#pods ul li#pod-4 {width:240px;} /* =6.x SUCCESS STORIES */ #page-successstories div#primary {width: 215px; float: left; display: inline;} #page-successstories div#video {float: right; width: 516px; margin-right: 15px; display: inline; } #page-successstories div#secondary {float: left; clear: both; display: inline; width: 666px;} #page-successstories div#secondary h2 {font-size: 2.1em; color: #00559d; margin-bottom: 10px;} .testimonial-thumb {float:left; width:160px;} .testimonial-block {float:left;} /* =6.x FORUMS */ #page-forum h1#forum-header { padding-left:0;} div#forum-container {width: 666px; } div#forum-container div#forum-sort {float: left; margin-bottom: 10px;} div#forum-container div#forum-sort h3, div#forum-container div#forum-sort ul {float: left; font-family: Arial, Verdana, sans-serif; color: #666; font-size: 1.1em;} div#forum-container div#forum-sort ul li {float: left; margin-left: 10px; padding: 0; width: auto!important;} div#forum-container div#forum-header {float: left; width: 100%; min-height: 33px; height: auto!important; height: 33px; background: url(../images/forums/top_bg.gif) 0 -33px; position: relative; border-bottom: 1px solid #fff;} div#forum-container div#forum-header div#forum-header-left, div#forum-container div#forum-header div#forum-header-right {width: 12px; height: 33px; background: url(../images/forums/top_bg.gif); position: absolute; top: 0; left: 0;} div#forum-container div#forum-header div#forum-header-right {top: 0; left: 654px; background-position: -12px 0;} div#forum-container div#forum-header-inner {padding:7px 14px 0px;} div#forum-container div#forum-header-inner select, div#forum-container div#forum-header-inner-left{ float:left; } div#forum-container div#forum-header-inner-right{ float:right; } div#forum-container ul.forum-content{float: left;border-bottom:1px solid #D6E5F5;} div.data-pager {float: right;clear:left;} div#forum-header-inner-left a.back-link{background: url(../images/forums/page-left.gif) no-repeat left 50%; padding-left:10px;margin-top:5px; color:#00559d; float:left;font-size:1.2em; font-weight:bold;} div#forum-header-inner-left a.back-link:hover{color:#00559d;} div#forum-container ul li {padding: 12px 12px 0 50px; position: relative; float: left; width: 604px;} div#forum-container ul li p, div#forum-container ul li div.body {width: 100%; float: left; clear: both;} div#forum-container ul li:hover, div#forum-container ul li.hover, div#forum-container ul li.selected {background: #fbfae7;} div#forum-container ul li div.icon{ height:40px; width:40px;position:absolute; top:12px; left:5px; background:url(../images/forums/user-comment.gif) no-repeat; } div#forum-container ul li.kelloggs div.icon { background:url(../images/forums/kelloggs-post.gif) no-repeat; } div#forum-container ul li div.rule {margin: 12px -12px 0 -50px; width: 666px; display: inline;} div#forum-container ul li div.title {float: left; clear: both; margin-bottom: 6px;} div#forum-container ul li div.title div.text {width: 500px;} div#forum-container ul li div.title h4 {color: #00559d; font-size: 1.4em; line-height: 16px; font-family: Arial, Verdana, sans-serif; margin-right: 4px; max-width: 380px; display: inline!important; float: left;} div#forum-container ul li div.title h4 a{color: #00559d; display: inline;} div#forum-container ul li div.title span.pipe {float: none; color: #666; font-size: 12px; float: left;} div#forum-container ul li div.title h4, div#forum-container ul li div.title span{float: left;} div#forum-container ul li div.title span {color: #ee2b4e; font-size: 1.2em; line-height: 16px; vertical-align: middle;} div#forum-container ul li div.title h4 span {float: none; color: #666; font-size: 12px; line-height: 16px;} div#forum-container ul li div.title div.rating {position: absolute; top: 0; right: 0;} div#forum-container ul li div.author {float: left; clear: both; color: #666; font-style: italic; font-size: 1.2em; line-height: 14px; margin-bottom: 6px; width: 100%;} div#forum-container ul li div.body {float: left; clear: both;} div#forum-container ul li.indented{ padding-left:80px;width:574px; } div#forum-container ul li.indented div.icon{ height:40px; width:40px;position:absolute; top:12px; left:35px; background:url(../images/forums/user-comment.gif) no-repeat; } div#forum-container ul li.indented div.rule {margin: 12px 0 0 -80px; width: 666px;} .data-pager { position: relative; background: url(../images/forums/pager-bg.gif) repeat-x; color:#00559d; height: 29px; float: right; clear: both; margin: 1px 0 0 0; } .data-pager .pager-inner { margin: 7px 12px; } .data-pager .pager-inner span span { text-decoration: underline; font-weight:bold; } .data-pager .pager-inner img { position: relative; top: 1px; } .data-pager .left-cnr { position: absolute; top: 0; left: 0; background: url(../images/forums/pager-left-cnr.gif) no-repeat; display: block; height: 29px; width: 9px; } .data-pager .right-cnr { position: absolute; top: 0; right: 0; background: url(../images/forums/pager-right-cnr.gif) no-repeat; display: block; height: 29px; width: 9px; } .data-pager a, .data-pager a:visited { color:#00559d; text-decoration: none; } .data-pager a:hover { text-decoration: underline; } #forum-add-comment { clear:both; margin:20px 0px 20px 50px;float:left;padding:15px 20px 35px 50px;width: 480px; background: url(../images/forums/add-comment-bg.gif) no-repeat; color: #fff;position:relative; display: inline;} #forum-add-comment p { color: #fff; } #forum-add-comment div { padding: 12px 50px;} #forum-add-comment div.rads { width: 100%;} #forum-add-comment div.no-padding { padding: 0; } #forum-add-comment fieldset { border: none; } #forum-add-comment fieldset div { margin-bottom: 8px; padding: 0; float: left; } #forum-add-comment legend, #forum-add-comment h3 { font-family: "Times New Roman", Courier, Garamond, serif; font-size: 1.7em; font-weight: normal; color: #fff; text-indent: 0; margin-bottom: 15px; } #forum-add-comment label.leftText { position:relative; top: 0.3em; float:left; width: 140px; text-align: right; color: #fff; font-size: 1.2em; padding-right: 10px; } #forum-add-comment label.rightText { position:relative; top: 0.3em; float:left; text-align: left; color: #fff; font-size: 1.2em; padding-left: 10px; } #forum-add-comment label.rightText a {color:#fff; text-decoration:underline} #forum-add-comment label.rightText a:hover {color:#fff; text-decoration:none} #forum-add-comment div.btn-white{ position:relative; top: 0.3em; float:left; margin-left:150px; display: inline;} #forum-add-comment .checkbox { float:left; width: 140px; text-align: right; } #forum-add-comment .checkbox input { width: auto; border: none; float: none; } #forum-add-comment .radio { position:relative; top: 0.2em;} #forum-add-comment .radio label { float: none; position: static; top:auto; } #forum-add-comment input.inputTxt, #forum-add-comment textarea.inputTxt { float: left; font-family: Arial, Helvetica, sans-serif; width: 220px; font-size:1.2em;padding:2px 0; color:#666; border: 1px solid #fff; } #forum-add-comment .asyncUploader { float: left; display:block; width:220px; } #forum-add-comment .radio input { width: auto; border: none; float: none; } #forum-add-comment .submit-btn { width: 73px; height: 26px; float: left;} #forum-add-comment .comment-validation { position:relative; top: 0.3em; font-size: 1.2em; font-style: italic; padding: 2px; margin-left: 10px; } #forum-add-comment div.footer{ height:20px; width:550px; background:url(../images/forums/add-comment-bg.gif) no-repeat 0 bottom;position:absolute; bottom: 0!important; bottom:-1px;padding:0;left:0; } /* =6.x.2 FORUM CATEGORY HOMEPAGE */ #forum-category{ float:left; margin-bottom:18px;} #forum-category ul.category-list{ float:left; margin:15px 0 0 15px; } #forum-category ul.category-list li {float: left; clear: both; margin-bottom: 6px;} #forum-category ul.category-list li h4 {color: #00559d; font-size: 1.4em; line-height: 16px; font-family: Arial, Verdana, sans-serif; margin-right: 4px;} #forum-category ul.category-list li h4 a{color: #00559d;} #forum-category ul.category-list li h4 span {float: none; color: #666; font-size: 12px; margin-left: 4px;} #forum-category ul.category-list li h4, #forum-category ul.category-list li span{float: left; } #forum-category ul.category-list li span {color: #ee2b4e; font-size: 1.2em; line-height: 14px; vertical-align: middle;} #forum-category div.forum-category-image{ float:left;position:relative; width:223px; height:246px;margin:3px 0 0 0; } #forum-category div.forum-category-image span{ position:absolute; display:block; width:100%; height:100%; background: url('../images/global/masks/mask3colTall.png') no-repeat; } /* =6.x.3 FORUM HOMEPAGE CATEGORY BOXES */ #page-forum #content ul#forums-list, .section-list ul {float: left; padding-top:15px; margin-left: -5px; margin-bottom: 23px; width: 674px;} #page-forum #content ul#forums-list li, .section-list ul li { float:left; width:223px; margin:0 0 15px 1px;} #page-forum #content ul#forums-list h2 {margin-left: 5px;} #page-forum #content table {float: left; margin: -15px 0 20px 0;} #page-forum #content table tr td {padding: 0; margin: 0; width: 156px; vertical-align: bottom;} #page-forum #content table tr td h2 {margin: 15px 0 5px 5px; display: block; float: left; width: 100%;vertical-align: bottom;} #page-forum #content table tr td h2 a {color:#00559D; font-size: 1.9090909em; line-height: 21px; display: inline; padding: 0 3px 0px 0px; vertical-align: bottom; } #page-forum #content table tr td h2 span {background: url(../images/global/arrow_red_medium.gif) no-repeat; height: 10px; width: 7px; display: inline-block; line-height: 0; font-size: 0; position: relative; top: -3px;} #page-forum #content table tr td.forum-image { position:relative; margin: 0; padding: 0;} #page-forum #content table tr td.forum-image span{ position:absolute; display:block; width:223px; height:156px; background: url('../images/forums/mask.png') no-repeat; float: left;} #page-forum #content ul#forums-list div.forum-image{ position:relative; width:223px; height:156px;margin:3px 0 0 0; } #page-forum #content ul#forums-list div.forum-image span{ position:absolute; display:block; width:100%; height:100%; background: url('../images/forums/mask.png') no-repeat; } #forum-bottom-links dl {width:193px; padding:10px; background-color:#dfebf7; float:left; margin:0 0 0 10px; } #page-forum #content ul#forums-list h2 a, .section-list h2 a {color: #00559d; font-size: 2.1em; display: inline; padding-top: 0pt; padding-right: 10px; padding-bottom: 0pt; padding-left: 5px; background-color: transparent; background-image: url(../images/global/arrow_red_medium.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: right 50%;} /* =6.x TEN THINGS */ #page-tenthings #content div#primary div#movie {width: 761px; height: 600px; background: url(../../assets-cms/images/about/alternative_tenthings.jpg) no-repeat; } /* =6.x VIDEO STYLE */ .videopage div#primary {width: 666px;} .videopage div#primary div.intro {width: 215px; float: left;} .videopage div#primary div.intro h2 {font-size: 2.1em; color: #00559d;} .videopage div#primary div.intro p small {font-size: 0.85714em;} /* 12 (child) / 14 (parent) = 0.85714 */ .videopage div#primary div#video {float: right; width: 370px;} .videopage div#primary div#video div#player {width: 365px; height: 220px; background: pink; margin-bottom: 10px;} .videopage div#primary div#video p {font-size: 1em; line-height: 12px!important; color: #666;} .videopage div#secondary h2 {font-size: 2.1em; color: #00559d;} /* =6.x PRODUCT HOME */ #page-producthome div#product-carousel {width: 666px; height: 251px; background: pink; float: left; clear: both; margin-bottom: 21px;} #page-producthome h1 {float: left; display: inline; width: 290px;} #page-producthome div.intro {width: 366px; float: left; display: inline;} #page-producthome div.intro p {width: 290px;} #page-producthome ul.product-features {width: 290px; float: right; } #page-producthome ul.product-features li {float: left; background: #fff url(../images/global/rule.gif) repeat-x left bottom; padding-bottom: 2px;} #page-producthome ul.product-features li.last {background-image: none;} #page-producthome ul.product-features li h2, #page-producthome ul.product-features li p {float: left;} #page-producthome ul.product-features li h2 {font-size: 1.8em; line-height: 20px; color: #00559d; margin-top: 17px;} #page-producthome ul.product-features li h2 a {color: #00559d;} #page-producthome ul.product-features li h2 a span {color: #00a4e1; display: block;} #page-producthome ul.product-features li div {float: left; width: 164px;} #page-producthome ul.product-features li img {float: right; width: 126px;} /* =6.x PRODUCT HOME REFRESH */ #page-producthome-refresh {width: 930px!important;} #page-producthome-refresh #carousel {margin-top: -20px;} #page-producthome-refresh #carousel .rule {margin-top: 0;} #page-producthome-refresh #pages {float: left; width: 290px;clear: none; display: inline;} #page-producthome-refresh #pages a {color: #003178; font-size: 1.4em; padding: 0 21px 0 10px; line-height: 28px; display: inline-block; margin-bottom: 0px;} #page-producthome-refresh #pages a.active {background: #c4d8f0 url(../images/products/refresh/arrow.gif) no-repeat center right; text-decoration: none;} #page-producthome-refresh #pages a:hover {text-decoration: none;} #page-producthome-refresh #info {width: 355px; float: right; margin-right: 97px; clear: none; display: inline;} #page-producthome-refresh-links {width: 930px!important;} #page-producthome-refresh #movie {background: #ffffff url(../images/products/refresh/taste-collection.jpg) no-repeat top left; width:930px; height:510px;} #page-producthome-refresh #movie h1 {text-indent:-9999px;} /* =6.x PRODUCT DETAIL */ #page-productdetail div.tabs div.panes div.pane {padding-top: 10px;} #page-productdetail div.tabs div.panes div.pane {} #page-productdetail div.tabs div.panes div.pane h2 {font-size: 1.2em; text-transform: uppercase; font-family: Arial, Helvetica, Verdana, sans-serif; margin-bottom: 12px; font-weight: bold; color: #666;} #page-productdetail div.tabs div.panes div.pane table {margin-bottom: 12px;} #page-productdetail div.tabs div.panes div.pane dl {width: 100%; float: left; font-size: 1.2em; color: #666; margin-bottom: 12px;} #page-productdetail div.tabs div.panes div.pane dl dt {width: 50%; float: left;} #page-productdetail div.tabs div.panes div.pane dl dd {width: 50%; float: left;} #page-productdetail div.tabs div.panes div.pane dl dd ul li {margin-bottom: 3px;} #page-productdetail div.tabs div.panes div.pane div#gda_values_wrap {overflow:auto;margin:0 auto; color: #000!important; width: 400px;} #page-productdetail div.tabs div.panes div.pane div#gda_values_wrap dl {width:80px; height:127px; background:url(../images/products/gda_element.gif) no-repeat; float:left;color: #000!important;} #page-productdetail div.tabs div.panes div.pane div#gda_values_wrap dl dt {float: left; text-align:center; width: 100%; margin: 20px 0 10px 0;} #page-productdetail div.tabs div.panes div.pane div#gda_values_wrap dl dd {float: left; text-align:center; width: 100%; font-weight: bold;} #page-productdetail div.tabs div.panes div.pane div#gda_values_wrap dl dd ul li.gda_percent {float: left; text-align:center; width: 100%; font-weight: bold; margin-top: 30px; display: block;} #page-productdetail div.tabs div.panes div.pane div#gda_values_wrap ul.gda-column {width:80px; color: #000!important; list-style-type:none; margin:0; padding:16px 0 0 0; float:left; background:url(../images/products/gda_element_top.gif) no-repeat; background-position:center top;} #page-productdetail div.tabs div.panes div.pane div#gda_values_wrap ul.gda-column li {list-style-type:none; text-align:center;font-size: 1.2em;} #page-productdetail div.tabs div.panes div.pane div#gda_values_wrap ul.gda-column li.gda_title {background:url(../images/products/gda_element_body.gif) repeat; background-position:center top; padding:5px 2px 5px 2px;} #page-productdetail div.tabs div.panes div.pane div#gda_values_wrap ul.gda-column li.gda_value {background:url(../images/products/gda_element_body.gif) repeat; background-position:center top; font-weight: bold; padding:5px 0 5px 0;} #page-productdetail div.tabs div.panes div.pane div#gda_values_wrap ul.gda-column li.gda_percent {background:url(../images/products/gda_element_bottom.gif) no-repeat; text-align:center; height:50px; font-weight: bold; padding:10px 0 0 0;} #page-productdetail div.tabs div.panes div.pane .gda_hide {display:none;} #page-productdetail div.tabs div.panes div.pane p.gda_labels{text-transform:uppercase;font-weight:bold;text-align:center;margin: 5px 0 12px 0; padding:0;} #page-productdetail div.tabs div.panes div.pane p.typicalText{text-transform:uppercase;font-weight:bold;margin:5px 0;padding-left:10px;} #page-productdetail div.tabs div.panes div.pane #nutrition_info, #page-productdetail div.tabs div.panes div.pane #ingredients_info, #page-productdetail div.tabs div.panes div.pane #gda_info{padding:8px 20px;} #page-productdetail div.tabs div.panes div.pane .gda_desc{padding:8px 0px;} #page-productdetail div.tabs div.panes div.pane #gdaTableWrap{overflow:auto;padding-bottom:10px;background-color:#D7E6F5;margin-bottom:20px;} #page-productdetail div.tabs div.panes div.pane table {margin: 0!important;} /* =6.x EXPERT ADVICE*/ .wide #content table.index-table {float: left; margin: -15px 0 20px 0;} .wide #content table.index-table tr td h2 {margin: 15px 0 5px 5px; } .wide #content table.index-table tr td h2 a { color:#00559D!important; font-size: 1.75em; line-height: 21px; display: inline; padding: 0 10px 0px 0px; background: url(../images/global/arrow_red_medium.gif) no-repeat right 50%; vertical-align: bottom; } .wide #content table.index-table tr td {vertical-align: bottom; padding: 0;} .wide #content table.index-table tr td.forum-image{ position:relative; width:223px; height:156px; margin:3px 0 15px 0;} .wide #content table.index-table tr td.forum-image span{ position:absolute; display:block; width:223px; height:156px; background: url('../images/forums/mask.png') no-repeat; float: left;} /* .section-list h2 a { color:#00559D; font-size:2.1em; display: inline; padding: 0 10px 0 0px; background: url(../images/global/arrow_red_medium.gif) no-repeat right 50%;}*/ /* =6.x PRODUCT RANGE */ #range_checkboxes {overflow:hidden; width:650px; padding:0 0 20px 0; background: transparent url(../images/global/rule.gif) repeat-x scroll 0 bottom} #range_checkboxes dt {font-size:1.2em; color:#666; float:left; padding:5px 0 0 0; margin:0 15px 0 0} #range_checkboxes ul {font-size:1.2em; float:left; font-size:1.8em; font-family:times;color:#00559D;} #range_checkboxes ul li {float:left; display:inline; margin:0 20px 0 0; } #range_checkboxes ul li input {margin:0 10px 0 0;} .dynamicproductlistunderlay {background: transparent url(images/ajax-loader.gif) no-repeat 50% 50%; width:100%; height:auto !important; height: 300px; min-height:300px;} .dynamicproductlist {margin: 20px 10px;background:#fff;height:auto !important;height:300px;min-height:300px; width:660px;} .dynamicproductlist ul li {float: left; width: 100px; height:140px; overflow:hidden; margin: 0 10px;display:inline;} .dynamicproductlist .noresults {width:100%; height:300px;padding-top:140px;text-align:center} #page-getstarted div#primary {width: 466px!important; margin: 36px 0 12px 62px; float: left; clear:both; display: inline;} #page-getstarted div#primary h1 {color: #00559d!important;} #page-getstarted div#primary h1 strong {font-weight: normal; color: #ee2b4e;} #page-getstarted div#primary h1 span {font-size: 0.777777em; position: relative; left: -20px;color: #00559d!important;} #page-getstarted div#secondary {clear: both; float: left; width: 600px; margin-left: 62px; display: inline;min-height: 305px; height: auto!important; height: 305px; } #page-getstarted div#secondary div {display: inline;} #page-getstarted div#secondary div h2 {font-weight: normal; color: #00559d; font-size: 2.3em; margin-bottom: 14px;} #page-getstarted div#secondary div h2 span {font-weight: bold;} #page-getstarted div#secondary div.signup {width: 276px; float: left; border-right: 1px solid #999; padding-right: 34px; margin-right: 34px;} #page-getstarted div#secondary div.login {width: 218px; padding-left: 0px; margin-left: 0px; float: left; } #page-getstarted div#secondary div p {float: left; clear: both; width: 100%;} #page-getstarted div#secondary div p label {clear: both; width: 100%; float: left; margin-bottom: 3px;} #page-getstarted div#secondary div p input {float: left;} #page-getstarted div#secondary div p.optin {float: left; } #page-getstarted div#secondary div p.optin input {float: left; clear: none;} #page-getstarted div#secondary div p.optin label {clear: none; width: auto; margin-left: 6px; float: left; width: 230px;} #page-getstarted div#secondary div p.dob small {margin-top: 3px; float: left; width: auto; display: block; clear: both; width: 100%;} #page-getstarted div#secondary div p.dob small a {} #page-getstarted div#secondary div p.dob label {float: left; clear: none; width: auto; margin-right: 3px;} #page-getstarted div#secondary div p.dob span {display: block; float: left; position: relative; top: -3px; } #page-getstarted div#secondary p.sex input, #page-getstarted div#secondary p.sex label {float: left; clear: none; width: auto; margin-right: 3px; margin-bottom: 0; line-height:10px; } #page-getstarted div#secondary div p small a {float: left; padding-right: 7px; background: url(../images/global/arrow_red_pink_small.gif) no-repeat right 50%;} #page-getstarted div#secondary div p small a {color: #666;} #page-getstarted div#secondary div p input.text {width: auto; width: 270px;} #page-getstarted div#secondary div p span.error {color: #ee2b4e; margin-top: 3px; font-size: 0.833333em;} #page-getstarted div#secondary div p span.info {color: #00559d; margin-top: 3px; font-size: 0.833333em;} #page-getstarted div#secondary div.login p input.text {width: 218px!important;} /* Competition */ #form-wrap .registercontrol {width:276px;} #form-wrap div p {float: left; clear: both; width: 100%;} #form-wrap div p label {clear: both; width: 100%; float: left; margin-bottom: 3px;} #form-wrap div p input {float: left;} #form-wrap div p.optin label {clear: none; width: auto; margin-left: 6px;} #form-wrap div p.dob small {margin-top: 3px; float: left; width: auto; display: block; clear: both; width: 100%;} #form-wrap div p.dob small a {} #form-wrap div p.dob label {float: left; clear: none; width: auto; margin-right: 3px;} #form-wrap div p.dob span {display: block; float: left; position: relative; top: -3px; } #form-wrap p.sex input, #form-wrap p.sex label {float: left; clear: none; width: auto; margin-right: 3px; margin-bottom: 0;} #form-wrap div p small a {float: left; padding-right: 7px; background: url(../images/global/arrow_red_pink_small.gif) no-repeat right 50%;} #form-wrap div p small a {color: #666;} #form-wrap div p input.text {width: auto; width: 270px;} #form-wrap div p span.error {color: #ee2b4e; margin-top: 3px; font-size: 0.833333em; clear:both; float:left;} #form-wrap div p span.info {color: #00559d; margin-top: 3px; font-size: 0.833333em;} #form-wrap div.login p input.text {width: 218px!important;} #form-wrap div p.instruction textarea {height:100px;width:100%;} #form-wrap div p.checkbox input, #form-wrap div p.optin input {margin:0 5px 0 0;padding:0;} #form-wrap div p.checkbox label, #form-wrap div p.optin label {float:none;clear:none;} #page-getstarted #planner-rightimage {position: absolute; top: 0; right: 0; background: #fff; width: 272px; height: 491px; float: left;} /* =6.x ABOUT US */ #page-aboutus h1 {float: left; display: inline; width: 290px;} #page-aboutus div.intro {width: 366px; float: left; display: inline;} #page-aboutus div.intro p {width: 290px; font-size:1.2em; line-height:14px; } #page-aboutus div.intro p#intro { font-size:1.4em; line-height:18px; margin-bottom:18px; } #page-aboutus h2 {font-size: 1.8em; line-height: 20px; color: #00559d; padding:0;} #page-aboutus #small-print { color:#999; font-size:0.9em; line-height:12px;} #page-aboutus ul.product-features {width: 290px; float: right; margin:42px 0 0 0; } #page-aboutus ul.product-features li {float: left; background: #fff url(../images/global/rule.gif) repeat-x left bottom; padding-bottom: 11px;} #page-aboutus ul.product-features li.last {background-image: none;} #page-aboutus ul.product-features li h2, #page-aboutus ul.product-features li p {padding:5px 0 0 0; width: 148px;} #page-aboutus ul.product-features li h2 {font-size: 1.8em; line-height: 20px; color: #00559d; padding:0;} #page-aboutus ul.product-features li h2 a {color: #00559d} #page-aboutus ul.product-features li h2 span {padding:0 7px 0 0;background:transparent url(../images/global/arrow_red_small.gif) no-repeat scroll right 50%; clear:both; display: inline-block;} #page-aboutus ul.product-features li div {float: left; width: 148px; padding:12px 0 0 0;} #page-aboutus ul.product-features li.last div { padding:27px 0 0 0; } #page-aboutus ul.product-features li img {float: right; width: 126px;} #page-aboutus #video-container { float:left; width:373px; padding-bottom:15px; } #page-aboutus #video-container h2, #page-aboutus #video-text h2 {line-height:30px;} #page-aboutus #video-text h2 {margin-bottom:7px;} #page-aboutus #video-text { margin-left:10px; width:250px;float:left;} /* =7.x PERSONAL PLAN */ #takethetourbtn {position:absolute; top:510px; left:80px;} #take-tour {width:614px; height:339px; margin:10px auto 10px auto; background: url(../images/shapemate/tour-bg.jpg) no-repeat; padding:7px;} #content p#tour-btn {width:324px; margin:20px auto 0 auto;} .hiddenform { display:none; } #planner #left-menus{ float:left; width:145px;} .planner-side-btns ul{ float:left; padding:5px 0 0 0;} .planner-side-btns ul li{ clear:left; float:left; width:100%; padding:3px 0;} a.button-tesco{ display:block; height:67px; width:145px; text-indent:-9999px; background: url(../images/personalplan/btn-tesco.gif) no-repeat;} .personalplan .mySpkLogo {position:absolute; top:-10px; right:15px;} .personalplan .sign_out {position:absolute; top:15px; right:135px;} .personalplan div#content a.swap{ padding-right: 14px; background: url(../images/personalplan/icon_swap.gif) no-repeat right 50%; } .personalplan div#content a.add{ padding-right: 14px; background: url(../images/personalplan/icon_add.gif) no-repeat right 50%; } .personalplan div#content a.write{ padding-right: 14px; background: url(../images/personalplan/icon_write.gif) no-repeat right 50%; } .personalplan div#content a.print{ padding: 5px 26px 5px 0; background: url(../images/personalplan/icon_print_on_pink.gif) no-repeat right 50%;} .personalplan div#content a.subtract{ padding-right: 14px; background: url(../images/personalplan/icon_subtract.gif) no-repeat right 50%; } .personalplan div#content {width: 845px!important; margin-top: -27px!important;} .personalplan div#content div#planner-title {margin-right: 23px; min-height: 55px; height: auto!important; height: 55px; text-align: right; width: 400px; float: right;} .personalplan div#content div#planner-title h2 {font-size: 3.1em; color: #ee2b4e; font-family: Arial, Helvetica, Verdana, sans-serif; float: right;} .personalplan div#content div#planner-title h2 span { font-weight:bold; } .personalplan div#content div#planner-title a.sign_out {font-size: 1.1em; color: #ee2b4e; font-family: Arial, Helvetica, Verdana, sans-serif; float: right;clear:right;margin-top:0.5em;background:url(../images/personalplan/icon_signout.gif) no-repeat right 50%;padding-right:12px;} .personalplan div#content div#planner div#planner-tabs {position: absolute; top: -20px; left: 0; z-index: 9999;} .personalplan div#content div#planner div#planner-tabs ul {margin-left: 15px;} .personalplan div#content div#planner div#planner-tabs ul li {float: left; margin-bottom: -5px; position: relative; z-index: 9999;} .personalplan div#content div#planner div#planner-tabs ul li a {background: #d1e1f3 url(../images/personalplan/tabs.gif) 0 -40px no-repeat; display: block; padding: 0 10px; position: relative; margin: 0 4px; font-size: 1.4em; line-height: 25px; float: left; display: inline;} .personalplan div#content div#planner div#planner-tabs ul li a span {width: 10px; height: 25px; background: #d1e1f3 url(../images/personalplan/tabs.gif) -290px -40px no-repeat; position: absolute; right: 0px!important; right: -1px; top: 0; display: block;} .personalplan div#content div#planner div#planner-tabs ul li a:hover {background: #d1e1f3 url(../images/personalplan/tabs.gif) 0 -65px no-repeat; display: block; padding: 0 10px; position: relative; margin: 0 4px; font-size: 1.4em; line-height: 25px; float: left; display: inline; text-decoration: none;} .personalplan div#content div#planner div#planner-tabs ul li a:hover span {width: 10px; height: 25px; background: #d1e1f3 url(../images/personalplan/tabs.gif) -290px -65px no-repeat; position: absolute; right: 0px!important; right: -1px; top: 0; display: block;} .personalplan div#content div#planner div#planner-tabs ul li a.active:hover, .personalplan div#content div#planner div#planner-tabs ul li a.active {background: #d1e1f3 url(../images/personalplan/tabs.gif) 0 0px no-repeat; display: block; padding: 0 14px; position: relative; margin: 0 0px; font-size: 1.8em; line-height: 35px; padding-top: 5px; float: left; display: inline; margin-top: -16px; top: 4px;} .personalplan div#content div#planner div#planner-tabs ul li a.active:hover span, .personalplan div#content div#planner div#planner-tabs ul li a.active span {width: 14px; height: 40px; background: #d1e1f3 url(../images/personalplan/tabs.gif) -286px 0px no-repeat; position: absolute; right: 0px!important; right: -1px; top: 0; display: block;} .personalplan div#content div#planner {width: 845px!important; background: url(../images/personalplan/background.png) repeat-y; margin-left: -5px; float: left; position: relative; z-index: 1;} .personalplan div#content div#planner.full {width: 934px!important; background: url(../images/personalplan/background_full.png) repeat-y;} .personalplan div#content div#planner div#inner {width: 807px!important; background: url(../images/personalplan/background.png) -845px -14px no-repeat; padding: 19px; float: left; min-height: 296px; height: auto!important; height: 296px; position: relative;} .personalplan div#content div#planner.full div#inner {width: 896px!important; background: url(../images/personalplan/background_full.png) -934px -14px no-repeat; padding: 19px 19px 69px 19px; float: left; min-height: 246px; height: auto!important; height: 246px; position: relative;} /* PLANNER SUBNAV */ .personalplan div#content div#planner.sub div#inner div#planner-subnav {width: 145px; float: left; clear:both;} .personalplan div#content div#planner.sub div#inner div#planner-subnav ul li {float: left; margin-bottom: 1px; clear: both; width: 145px;} .personalplan div#content div#planner.sub div#inner div#planner-subnav ul li a {font-size: 1.4em; line-height: 16px; padding: 7px 6px 7px 6px; background: #ffedf1; display: block;} .personalplan div#content div#planner.sub div#inner div#planner-subnav ul li a.active, .personalplan div#content div#planner.sub div#inner div#planner-subnav ul li a:hover {text-decoration: none; background: #fff;} .personalplan div#content div#planner div#inner div#planner-date {font-weight: bold; font-size: 2.3em; text-transform: uppercase; color: #ee2b4e; line-height: 23px; min-height: 26px; height: auto!important; height: 26px; display: block; background: #fff url(../images/personalplan/date_bg.gif) no-repeat; position: absolute; top: 8px; right: 8px!important; right: 7px; padding: 0 4px 0 8px; float: left; z-index: 99;} .personalplan div#content div#planner div#inner div#planner-date span {font-size: 0.478em; vertical-align: middle;} /* PLANNER HEADER — This is at the top of `primary` */ .personalplan div#content div#planner div#inner div#primary div#planner-head {margin: 4px 0 10px 0;} .personalplan div#content div#planner div#inner div#primary div#planner-head div.the-text {float: left; clear: none; } .personalplan div#content div#planner div#inner div#primary div#planner-head h1 {font-size: 2.6em; line-height: 28px; margin-bottom: 10px; padding: 7px 0; height: auto; text-indent: 0px!important; width: 630px;} .personalplan div#content div#planner div#inner div#primary div#planner-head p {font-size: 1.4em; line-height: 16px; float: left; margin-bottom: 16px; width: 525px;} /* `.alt` — for pages with icons and smaller (24px) H1 */ .personalplan div#content div#planner div#inner div#primary div#planner-head.alt {min-height: 56px; height: auto!important; height: 56px; margin-bottom: 10px; float: left; text-indent: 0;} .personalplan div#content div#planner div#inner div#primary div#planner-head.alt h1 {margin: 16px 0 0px 0; font-size: 2.4em; width: 600px; display: block; float: left; width: auto;} /* Darker pink background with border… */ .personalplan div#content div#planner div#inner div#primary div#planner-head.alt div.inner {background: #ffebed; border: 1px solid #ffc1cb; float: left; padding: 10px;} .personalplan div#content div#planner div#inner div#primary div#planner-head.alt div.inner h1 {padding: 0; margin: 6px 0 0 0;} .personalplan div#content div#planner div#inner div#primary div#planner-head.options div.inner {border: 0; border-top: 1px solid #ffc1cb; background: url(../images/personalplan/plannerhead_background.gif) left bottom; position: relative; padding-bottom: 50px; width: 634px;} .personalplan div#content div#planner div#inner div#primary {width: 100%; float: left;} .personalplan div#content div#planner.sub div#inner div#primary {width: 652px; float: right;} .personalplan div#content div#planner div#bottom {width: 846px!important; background: url(../images/personalplan/background.png) -845px 0px no-repeat; height: 14px; float: left;} .personalplan div#content div#planner.full div#bottom {width: 934px!important; background: url(../images/personalplan/background_full.png) -934px 0px no-repeat; height: 14px; float: left;} .personalplan div#content div#planner div#planner-sideimage {width: 282px; max-height: 493px!important; height: 493px; position: relative; top: -19px; left: -19px; z-index: 9; margin-bottom: 0; padding-bottom: 16px; overflow: hidden; margin-bottom: -52px!important; margin-bottom: -53px;} .personalplan div#content div#planner div#planner-sideimage div#mask {width: 282px; height: 100%; background: url(../images/personalplan/sideimage.png) no-repeat; position: absolute; top: 0; left: 0;} .personalplan div#content div#planner div#planner-sideimage div#mask-bottom {width: 282px; height: 16px; background: url(../images/personalplan/sideimage.png) 0 -495px no-repeat; position: absolute; bottom: 0; left: 0;} .personalplan div#content #primary div#planner-head {clear: both; width: 100%; float: left;} /* Page specific stuff is elsewhere… */ .personalplan div#content #primary.narrow {width: 560px!important; float: right!important;} #content div#questions p {font-size:1.4em; line-height:16px;} #page-questions div#primary {width: 560px!important; height: 100%;} #page-questions div#primary div#questions {width: 560px; float: right; z-index: 999; position: relative;margin:43px 40px 0 0; display: inline;} #page-questions div#primary div#questions h1 { text-indent: 0; margin:0 0 15px 0; position: relative; padding-left:0; } #page-questions div#primary div#questions h1 span {display: inline; text-indent: 0; margin: 0; color: #ee2b4e; } #page-questions div#primary div#questions ul.question-pagination {float: right; margin-top: 10px; } #page-questions div#primary div#questions ul.question-pagination li {float: left; margin-left: 10px;} #page-questions div#primary div#questions span.twoWeekError{background-color:white; border:1px solid #EE2B4E; color:#EE2B4E; display:block; font-size:0.85em; font-weight:bold; margin:3px 0 0; padding:3px;} /* PROGRESS BREADCRUMB */ #page-questions div#primary div#progress {position: absolute; bottom: 30px; left: 320px; width: 525px;} #page-questions div#primary div#progress div#strewth, #page-questions div#primary div#progress div#strewth div#counter {background: url(../images/personalplan/progress.gif) no-repeat; height: 21px; width: 525px;} #page-questions div#primary div#progress div#strewth {float: left; clear:both; position: relative; background-position: 0 -21px; margin: 0 auto; display: inline; } #page-questions div#primary div#progress.nine div#strewth {width: 469px; margin-left: 28px;} #page-questions div#primary div#progress.eight div#strewth {width: 413px; margin-left: 56px;} #page-questions div#primary div#progress.seven div#strewth {width: 357px; margin-left: 84px;} #page-questions div#primary div#progress.six div#strewth {width: 301px; margin-left: 116px; } #page-questions div#primary div#progress div#strewth div#counter {position: absolute; top: 0; left: 0; background-position: -56px 0; text-indent: -9999px;} #page-questions div#primary div#progress.q1 div#strewth div#counter {background-position: -504px 0;} #page-questions div#primary div#progress.q2 div#strewth div#counter {background-position: -448px 0;} #page-questions div#primary div#progress.q3 div#strewth div#counter {background-position: -392px 0;} #page-questions div#primary div#progress.q4 div#strewth div#counter {background-position: -336px 0;} #page-questions div#primary div#progress.q5 div#strewth div#counter {background-position: -280px 0;} #page-questions div#primary div#progress.q6 div#strewth div#counter {background-position: -224px 0;} #page-questions div#primary div#progress.q7 div#strewth div#counter {background-position: -168px 0;} #page-questions div#primary div#progress.q8 div#strewth div#counter {background-position: -112px 0;} #page-questions div#primary div#progress.q9 div#strewth div#counter {background-position: -56px 0;} #page-questions div#primary div#questions div.form {width: 560px; float: left; padding: 0; margin:0 0 20px 0;} #page-questions div#primary div#questions div.form ol {list-style: none; width: 560px; list-style-position: inside; margin: 0; padding: 0;} #page-questions div#primary div#questions div.form ol li {width: 560px; float: left; margin: 0 0 4px 0; background: #fff url(../images/personalplan/question_bg.gif) repeat-x 0 bottom; clear: both; position: relative; z-index: 1; cursor:pointer; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;} #page-questions div#primary div#questions div.form ol li p {position: relative; padding: 8px 12px 8px 12px; width: 536px; height: 100%; line-height: auto; z-index: 3; font-size: 1.4em; font-family: Arial, Verdana, sans-serif; color: #00559d; margin: 0; float: left; clear: both; } #page-questions div#primary div#questions div.form ol li.hover p {color: #fff;} #page-questions div#primary div#questions div.form ol li p label {float: left; cursor:pointer; padding-right:15px} #page-questions div#primary div#questions div.form ol li p input {float: right;} #page-questions div#primary div#questions div.form ol li div.underlay {float: left; position: absolute; top: 0; left: 0; /*height: 100%!important;*/ width: 560px; height: 30px; background: #ee2b4e; z-index: 2; display: block; display: none; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;} #page-questions div#primary div#questions div.form ol li div.active {display: block;} /* We have to reset these. Thanks to MSIE’s lack of support for the “first child” selector… */ #page-questions div#primary div#questions div.form ol li div.more {float: left; clear: both; width: 100%;} #page-questions div#primary div#questions div.form ol li div.more p, #page-questions div#primary div#questions div.form ol li.hover div.more p {color: #666;} #page-questions div#primary div#questions div.form ol li div.more p a {color: #ee2b4e; font-weight: bold;} #page-questions div#primary div#questions div.form ol li div.more label {margin-right: 5px;} #page-questions div#primary div#questions div.form ol li div.more input {float: left;} #page-questions div#primary div#questions.js div.form ol li input.checkbox {display: none;} #page-questions div#primary div#questions.js div.form ol li input.radio {display: none;} #page-questions div#primary div#questions.js div.form ol li .more input.radio {display: inline;} #page-questions div#primary div#questions.js div.form ol li span.checkbox {display: block; position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; background: transparent url(../images/personalplan/question_checkbox.png) -24px 0; float: right; zoom: 1;} #page-questions div#primary div#questions.js div.form ol li.checked span.checkbox {background-position: 0;} #page-getstarted #planner-sideimage {position: absolute; top: 0; left: 0; background: #fff; width: 272px; height: 491px; float: left;} #page-questions #plan-loader-outer { height:456px;text-align:center; } #page-questions #plan-loader-outer h1 { padding-top: 100px; } #page-questions #plan-loader {height:66px;width:66px;margin: 0 auto 14px auto;background-image:url(../images/personalplan/plan-loader.gif); } /* =7.x DASHBOARD */ #page-dashboard #tailorswf-container { padding-bottom: 10px; } #page-dashboard div#content div#planner div#inner div#primary div#planner-head div.avatar {width: 75px; height: 75px; background: #fff; float: left; margin-right: 20px;} #page-dashboard div#content div#planner div#inner div#primary div#planner-head div.avatar a {display: block; width: 75px; height: 75px; position: relative; float: left;} #page-dashboard div#content div#planner div#inner div#primary div#planner-head div.avatar a img {float: left;} #page-dashboard div#content div#planner div#inner div#primary div#planner-head div.avatar a span {display: block; width: 75px; height: 75px; background: url(../images/personalplan/avatar_mask_pink.gif); position: absolute; top: 0; left: 0; z-index: 9999; float: left;} #page-dashboard div#content div#planner div#inner div#primary div#planner-head p {width: 490px;} #page-dashboard div#content div#planner div#inner div#primary div#planner-head div#planner-feelings {float: right; width: 220px; margin-top: -12px; display: inline;} #page-dashboard #planner-feelings div.emoticon, #page-dashboard #planner-feelings div.emoticon-pink {float: left;} #page-dashboard div#content div#planner div#inner div#primary div#planner-head div#planner-feelings div.form {float: right; width: 165px; margin: 12px 0px 0 10px; display: inline;} #page-dashboard div#content div#planner div#inner div#primary div#planner-head div#planner-feelings div.form select {width: 165px;} #page-dashboard div#content div#planner div#inner div#primary div.panels {float: left; width: 805px!important; margin: auto;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel {background: #fff; border: 1px solid #ffc1cb; padding: 10px; float: left;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan {padding-bottom: 0px; margin-bottom: 8px; width: 783px; clear: both; float: left;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.top {float: left; clear: both; width: 100%;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan h2 { float: left; clear: both;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.top {float: left; clear: both; width: 100%; } #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.top p{float:left;padding-left:52px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan ul.actions {float: right; } #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan ul.actions li { margin-bottom: 5px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan ul.actions li a {color: #ed2b4e; font-size: 1.2em; line-height: 12px; text-align: right; } #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan ul.actions li a:hover {text-decoration: none;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-thismeal {float: left; width: 275px; margin-left: -9px; display: inline;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-thismeal h3 {background: #e8f0f9; padding: 6px 10px 4px 10px; font-size: 1.1em; text-transform: uppercase; color: #666; font-weight: bold; float: left; font-family: Arial, Helvetica, Verdana, sans-serif; width: 255px; margin-bottom: 1px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-thismeal h3 a { color:#666; } #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-thismeal p.caption {margin: 3px!important;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-thismeal p.caption a { color:#666; } #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-thisweek {float: right; width: 502px; margin-right: -9px; display: inline;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-thisweek dl dt {background: #e8f0f9; padding: 6px 12px 4px 12px; font-size: 1.1em; text-transform: uppercase; color: #666; font-weight: bold; float: left; width: 478px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-thisweek dl dd {float: left; clear: both; width: 100%;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-thisweek dl dd ul {float: left; width: 100%;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-thisweek dl dd ul li {padding: 8px 12px 6px 12px; font-size: 1.1em; line-height: 15px; color: #666; width: 140px; float: left; } #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-thisweek dl dd ul li {padding: 8px 12px 6px 12px; font-size: 1.1em; line-height: 15px; color: #666; width: 140px; float: left; } #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-thisweek dl dd ul li a { color: #666; } #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-thisweek a.button-viewfullmealplan {float: right;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-fullplan {float: right; width: 495px; margin-right: 0px; display: inline;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-fullplan div.todays {float: left; width: 291px; padding-bottom: 10px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-fullplan div.todays h3 {background: #e8f0f9; text-transform: uppercase; font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1.1em; color: #666; font-weight: bold; padding: 6px 10px 4px 10px; margin-bottom: 11px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-fullplan div.todays h3 a { color: #666; } #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-fullplan div.todays ul {float: left; font-size: 1.2em; line-height: 14px; color: #666; padding: 0 5px; clear: both;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-fullplan div.todays ul li {margin-bottom: 11px; } #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-fullplan div.todays ul li a { color: #666; } #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-fullplan div.todays div {float: left; margin: 12px 0 0 0; padding: 0; width: 100%;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-fullplan div.todays div a.button-viewfullmealplan {float: right; clear: both;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-fullplan div.todays p {text-align: center; margin-top: 23px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-fullplan div.todays p a.button-generatemeals {margin: 0 auto 10px auto; float: none; display: inline-block;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-fullplan div.other {float: right; width: 191px; padding-bottom: 10px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-fullplan div.other h3 {background: #e8f0f9; text-transform: uppercase; font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1.1em; color: #666; font-weight: bold; padding: 6px 10px 4px 10px; margin-bottom: 11px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-fullplan div.other h3#button-diary {padding: 0; width: 191px; height: 78px; position: relative; margin-bottom: 11px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-fullplan div.other ul {float: left; font-size: 1.2em; line-height: 14px; color: #666; padding: 0 5px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-fullplan div.other ul li {float: left; clear: left; margin-bottom: 11px;width: 100%;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-mealplan div.section-fullplan div.other a.button-viewevents {float: right;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.left {width: 292px; float: left;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.right {width: 505px; float: right;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.left div.panel#panel-support {float: left; width: 270px; margin-bottom: 8px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.left div.panel#panel-support h2 {/*width: 270px;*/} #page-dashboard div#content div#planner div#inner div#primary div.panels div.left div.panel#panel-support ul {margin: 0 0 10px -9px; width: 288px; padding-bottom: 5px; float: left; background: url(../images/global/rule.gif) repeat-x left bottom; display: inline;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.left div.panel#panel-support ul li {float: left; clear: both; margin-bottom: 1px; display: block; width: 100%;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.left div.panel#panel-support ul li a {padding: 5px 12px; background: #e8f0f9; font-size: 1.2em; color: #666; font-weight: bold; display: block;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.left div.panel#panel-support a.button-viewcommunity {float: right; } #page-dashboard div#content div#planner div#inner div#primary div.panels div.left div.panel#panel-support a.image-button {float: right; } #page-dashboard div#content div#planner div#inner div#primary div.panels div.left div.panel#panel-promo {padding: 1px!important; margin-bottom: 8px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.left div.panel#panel-promo * {margin: 0; padding: 0; float: left;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.left div.panel#panel-settings {float: left; width: 270px; padding-bottom: 5px; color:#666;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.left div.panel#panel-settings ul {float: right; width: 100%;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.left div.panel#panel-settings ul li {width: 100%; float: left; margin-bottom: 5px;} #page-dashboard div#content div#planner div#inner div#primary div.pagenels div.left div.panel#panel-settings ul li a {text-align: right; display: block; color: #ee2b4e; font-size: 1.2em; } #page-dashboard div#content div#planner div#inner div#primary div.panels div.left div.panel#panel-settings ul li a:hover {text-decoration: none;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.left div.panel#panel-settings ul li span.displayField { display:none; } #page-dashboard div#content div#planner div#inner div#primary div.panels div.left div.panel#panel-settings ul li a#more-options-button { display:none; } #page-dashboard div#content div#planner div#inner div#primary div.panels div.left div.panel#panel-settings ul li a#close-details { display:none; float:left; padding-top:10px } #page-dashboard div#content div#planner div#inner div#primary div.panels div.left div.panel#panel-settings ul li input.save-button { float:right; display:block; } #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-advice {float: right; width: 483px; margin-bottom: 8px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-advice h2 {/*width: 483px;*/} #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-advice div.rule {margin: 0 -9px 10px -9px; width: 501px; display: inline;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-advice h3 {color: #00559d; font-weight: bold; font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1.2em; margin-bottom: 9px; background: url(../../assets/images/personalplan/speech.gif) no-repeat 0 50%; padding: 3px 0 3px 25px; float: left; clear: both; width: 430px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-advice blockquote {line-height: 16px; font-style: italic; color: #666; margin: 0 25px 12px 25px; display: inline; display: block;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-advice div {} #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-advice div.AdviceIntro {float:left; margin-right:12px; display:inline;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-advice div.ShareYourFeelings {float:right;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-advice div.Advice {float:left; } #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-advice div#planner-feelings {float: right; width: 235px;margin-top:-12px; display:inline; } #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-advice div#planner-feelings div.emoticon-pink {float: left;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-advice div#planner-feelings div.form {float: right; width: 178px; margin: 12px 0px 0 00px; display: inline; } #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-advice a.button-viewadvice {float: right;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-weather {float: right; width: 483px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-weather div#pod-weather {float: left; width: 195px; margin-bottom: 5px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-weather h3 {font-size: 1.4em; color: #666; background: none; width: auto; float: none; font-family: Arial, Helvetica, Verdana, sans-serif; } #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-weather h3 span {float: left; position: relative; top: -13px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-weather select {width: 100%; float: left;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-weather p#select-area {clear:both;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-weather div#pod-recipe {float: right; width: 267px; padding: 10px; margin-right: -9px; margin-bottom: 5px; display: inline; border-left: 1px dashed #ccc;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-weather div#pod-recipe div.img {position: relative; width: 100px; height: 70px; float: left;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-weather div#pod-recipe div.img span {position: absolute; bottom: 0; left: 0; background: #8fa100; color: #fff; font-size: 0.9em; text-transform: uppercase; display: block; padding: 3px; font-weight: bold;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-weather div#pod-recipe div.text {float: right; width: 156px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-weather div#logo-wunderground {float: left; margin-top: -4px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-weather div#logo-wunderground-text {font-size:0.8em;} #page-dashboard div#content div#planner div#inner div#primary div#panel-recipesearch {float: right; width: 483px; margin-bottom: 8px;} #page-dashboard div#content div#planner div#inner div#primary div#panel-recipesearch div.logo-wunderground { float:right; } #page-dashboard div#content div#planner div#inner div#primary div#panel-recipesearch div.the-search {padding: 4px 0 14px 0;} #page-dashboard div#content div#planner div#inner div#primary div#panel-recipesearch div.the-search label {width: 165px; font-size:1.3em; line-height: 15px; font-weight: bold; display: block; color: #666; padding-right: 65px; float: left;} #page-dashboard div#content div#planner div#inner div#primary div#panel-recipesearch div.the-search div.input {float: left; width: 250px; display: block; clear: none; vertical-align:baseline;} #page-dashboard div#content div#planner div#inner div#primary div#panel-recipesearch div.the-search div.input input.rsearch {float: left; } #page-dashboard div#content div#planner div#inner div#primary div#panel-recipesearch div.the-search div.input input.rsubmit {float: left; margin: 0 0 0 4px; vertical-align:bottom; } #page-dashboard div#content div#planner div#inner div#primary div#panel-recipesearch div.weather div.right div.panel#panel-recipesearch {float: right; width: 483px; margin-bottom: 8px;} #page-dashboard div#content div#planner div#inner div#primary div#panel-recipesearch div.weather div.left {width: 205px; float: left;} #page-dashboard div#content div#planner div#inner div#primary div#panel-recipesearch div.weather div.left div#pod-weather {} #page-dashboard div#content div#planner div#inner div#primary div#panel-recipesearch div.weather div.left div#pod-weather h3 {font-size: 1.4em; color: #666; background: none; width: auto; float: left; font-family: Arial, Helvetica, Verdana, sans-serif; margin: 0; clear: both;} #page-dashboard div#content div#planner div#inner div#primary div#panel-recipesearch div.weather div.left div#pod-weather h3 span {float: left; position: relative; top: -13px;} #page-dashboard div#content div#planner div#inner div#primary div#panel-recipesearch div.weather div.left div#pod-weather {float: left; width: 195px; margin-bottom: 5px;} #page-dashboard div#content div#planner div#inner div#primary div#panel-recipesearch div.weather div.right {float: right; width: 270px;} #page-dashboard div#content div#planner div#inner div#primary div#panel-recipesearch div.weather div.right div#pod-recipe {float: right; width: 267px; padding: 10px; margin-right: -9px; margin-bottom: 5px; display: inline; border-left: 1px dashed #ccc;} #page-dashboard div#content div#planner div#inner div#primary div#panel-recipesearch div.weather div.right div#pod-recipe div.img {position: relative; width: 100px; height: 70px; float: left;} #page-dashboard div#content div#planner div#inner div#primary div#panel-recipesearch div.weather div.right div#pod-recipe div.img span {position: absolute; bottom: 0; left: 0; background: #8fa100; color: #fff; font-size: 0.9em; text-transform: uppercase; display: block; padding: 3px; font-weight: bold;} #page-dashboard div#content div#planner div#inner div#primary div#panel-recipesearch div.weather div.right div#pod-recipe div.text {float: right; width: 156px;} #page-dashboard div#content div#planner div#inner div#primary div#panel-recipesearch div.weather div.right div#pod-recipe div.text strong {font-weight: normal; font-size: 1.166666667em; display: block; margin-bottom: 9px;} .no-js-submit-mood { float:right; margin-top: 5px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.left div#panel-settings.panel ul li { font-size: 1.1em; } #panel-settings { position: relative; } #panel-settings a.subtract, #panel-settings a.icon-add { display: block; position: absolute; right: 12px; } #panel-settings a.subtract { color: #ed2b4e; font-size: 1.2em; line-height: 12px; text-align: right; display: block; padding-right: 15px; } #panel-settings ul {float: left; margin-bottom: 5px;} #panel-settings h3 { color:#00559D; font-size:1.2em; font-weight:bold; margin:0 0 12px 0; padding:0; font-family: Arial, Helvetica, Verdana, sans-serif;} #panel-settings label { display:block; float:left; font-weight:bold; margin:4px 0; width:115px; } #panel-settings span.settings_field { display:block; float:left; margin:4px 0; } #panel-settings input.checkbox { margin:4px 0; } #panel-settings fieldset p input.save-button { display: block; float: right; } #panel-settings fieldset .bmi-check { margin-bottom: 14px; } #panel-settings fieldset .bmi-check p { font-size: 1.1em; clear: left; margin-bottom: 0; } #panel-settings fieldset .bmi-check p label { width: 245px; font-weight:normal; } .viewfullmealplan {margin-right: 10px;} /* 7.x FORUM */ #page-commumityforum div#content div#planner div#inner div#primary div#planner-head.alt p.button-findabuddy {float: right; margin: 25px 0 0px 0; width: auto;} #page-commumityforum div#content div#planner div#inner div#primary a.button-findabuddy {position: relative; display: block; float: left; width: auto; line-height: 28px; background: url(../images/personalplan/button_findabuddy.gif); padding: 0 28px 0 8px; color: #fff; font-size: 14px;} /* Fix this */ #page-commumityforum div#content div#planner div#inner div#primary a.button-findabuddy:hover {text-decoration: none;} #page-commumityforum div#content div#planner div#inner div#primary a.button-findabuddy span {display: block; width: 25px; height: 28px; position: absolute; right: 0; top: 0; background: url(../images/personalplan/button_findabuddy.gif) -275px 0;} #page-commumityforum div#content div#planner div#inner div#primary p.button-findabuddy {float: right; margin: 10px 0 10px 0;} #page-commumityforum div#content div#planner div#inner div#primary div.panels {border: 1px solid #ffc1cb; float: left; width: 100%; } /* This allows for the 1px stroke around the panels */ #page-commumityforum div#content div#planner div#inner div#primary div.panels div#panel-yourbuddies div p {font-size: 1.4em; margin-bottom: 8px;} #page-commumityforum div#content div#planner div#inner div#primary div.panels div#panel-yourbuddies div.inner-forum p { padding: 16px; } #page-commumityforum div#content div#planner div#inner div#primary div.panels div#panel-yourbuddies div blockquote p {font-size: 1.2em;} #page-commumityforum div#content div#planner div#inner div#primary div.panels div#panel-yourbuddies div p a {color: #ee2b4e;} #page-commumityforum div#content div#planner div#inner div#primary div.panels div.panel {float: left; clear: both; background: #fff; width: 100%;} #page-commumityforum div#content div#planner div#inner div#primary div.panels div.panel h2 {background: #e8f0f9; font-family: Arial, Helvetica, Verdana, sans-serif; color: #666; font-size: 1.4em; font-weight: bold; padding: 10px 17px;} #page-commumityforum div#content div#planner div#inner div#primary div.panels div.panel div.inner {padding: 16px 16px 0 16px; float: left; color: #666; width: 620px;} /* This is the white part of the panel */ #page-commumityforum div#content div#planner div#inner div#primary div.panels div.panel div.inner-forum {padding: 0; float: left; color: #666; width: 620px;} /* This is the white part of the panel */ #page-commumityforum div.inner-forum ul li { position: relative; clear: both; float: left; margin-bottom: 10px; width: 100%;} #page-commumityforum div.inner-forum ul li.last {background: none; margin-bottom: 0; padding-bottom: 0;width: 100%;} #page-commumityforum div.inner-forum ul li div.post { background: url(../images/global/rule.gif) repeat-x left bottom; width: 100%; clear:both; float: left; padding: 16px;} #page-commumityforum div.inner-forum ul li div.posthover { background: #fbfae7 url(../images/global/rule.gif) repeat-x left bottom; width: 100%; clear:both; float: left; padding: 16px; cursor:pointer;} #page-commumityforum div.inner-forum ul li p.title {margin-bottom: 6px; font-size: 1.4em; line-height: 16px; float: left; width: 100%;} #page-commumityforum div.inner-forum ul li p.title a {color: #00559d!important;} #page-commumityforum div.inner-forum ul li p.title a strong {color: #00559d;} #page-commumityforum div.inner-forum ul li blockquote {line-height: 14px; font-style: italic; margin-bottom: 6px; clear: both; float: left; width: 100%;} #page-commumityforum div.inner-forum ul li div.right {float: right; width: 150px; position: absolute; top: 0; right: 0;} #page-commumityforum div.inner-forum ul li div.right div.rating {float: right; margin: -3px 0 12px 0!important; margin: 0 0 12px 0; clear: both;} #page-commumityforum div.inner-forum ul li div.right div.rating span {display: none;} #page-commumityforum div.inner-forum ul li div.right a {float: right; clear: both;} #page-commumityforum div.inner-forum ul li p.meta {font-size: 1em!important; float: left; clear:both; width:100%; margin-bottom: 0;} #page-commumityforum div.inner-forum ul li p.meta a {color: #00559d!important;} #page-commumityforum div.inner-forum ul li div.user {position: relative; clear: both; float: left; padding: 0px 0 10px 112px; width: 508px; min-height: 75px!important; height: auto; height: 75px;} #page-commumityforum div.inner-forum ul li div.user div.avatar {width: 75px; height: 75px; position: absolute; top: 0; left: 0;} #page-commumityforum div.inner-forum ul li div.user div.avatar a {display: block; width: 75px; height: 75px; position: relative; float: left;} #page-commumityforum div.inner-forum ul li div.user div.avatar a img {float: left;} #page-commumityforum div.inner-forum ul li div.user div.avatar a span {display: block; width: 75px; height: 75px; background: url(../images/personalplan/avatar_mask.gif); position: absolute; top: 0; left: 0; z-index: 9999; float: left;} #page-commumityforum div.inner-forum ul li div.user p.emoticon {position: absolute; text-indent: -9999px; top: 1px; left: 82px;} #page-commumityforum div.inner-forum ul li div.panel-send p {float: left;} #page-commumityforum div.inner-forum ul li div.panel-send textarea {width: 460px; border: 1px solid #ccc;} #page-commumityforum div.inner-forum ul li div.panel-send p.input {float: left;} #page-commumityforum div.inner-forum ul li div.panel-send input {float: left;} #page-commumityforum div.inner-forum ul li div.panel-send input a.cancel {display: none; float: left;} #page-commumityforum div.inner-forum ul li ul li {background: none; padding: 0;} #page-commumityforum div.inner-forum ul li h3 {font-size: 1.4em; font-family: Arial, Helvetica, Verdana, sans-serif; margin-bottom: 14px; float: left;} #page-commumityforum div.inner-forum ul li h3 strong {color: #00559d;} #page-commumityforum div.inner-forum ul li ul {} #page-commumityforum div.inner-forum ul li ul li {font-size: 1.1em; margin-bottom: 4px; width: auto;} #page-commumityforum div.inner-forum ul li ul li strong {text-transform: uppercase;} #page-commumityforum div.inner-forum ul li a.button-red-arrowr {float: right; margin: 0 16px 2px 0; display: inline; display: none;} #page-commumityforum div.inner-forum ul li ul.options {float: right; width: auto; } #page-commumityforum div.inner-forum ul li ul.options li {width: auto; float: right; } #page-commumityforum div.inner-forum ul li ul.options li a {font-size: 1.1em;} #page-commumityforum div.inner-forum ul li ul.options li p {font-size: 1.166666667em!important; font-weight: bold; text-align: right; margin-bottom: 2px;} /* 7.x COMMUNITY */ #page-community div#content div#planner div#inner div#primary div.panels div.panel#panel-hello {float: left; background: #fff2f4; border: 1px solid #ffc1cb; padding: 10px; width: 631px; margin-bottom: 11px;} #page-community div#content div#planner div#inner div#primary div.panels div.panel#panel-hello div.avatar {width: 75px; height: 75px; background: #fff; float: left; margin-right: 20px;} #page-community div#content div#planner div#inner div#primary div.panels div.panel#panel-hello div.avatar a {display: block; width: 75px; height: 75px; position: relative; float: left;} #page-community div#content div#planner div#inner div#primary div.panels div.panel#panel-hello div.avatar a img {float: left;} #page-community div#content div#planner div#inner div#primary div.panels div.panel#panel-hello div.avatar a span {display: block; width: 75px; height: 75px; background: url(../images/personalplan/avatar_mask_light.gif); position: absolute; top: 0; left: 0; z-index: 9999; float: left;} #page-community div#content div#planner div#inner div#primary div.panels div.panel#panel-hello h2 {color: #00559d; font-size: 1.8em; font-family: Arial, Helvetica, Verdana, sans-serif; margin-bottom: 9px; } #page-community div#content div#planner div#inner div#primary div.panels div.panel#panel-hello p {width: 282px; padding: 0; float: left; } #page-community div#content div#planner div#inner div#primary div.panels div.panel#panel-hello div#planner-feelings {float: right; width: 235px;margin-top:-12px; display:inline; } #page-community div#content div#planner div#inner div#primary div.panels div.panel#panel-hello div#planner-feelings div.emoticon-pink {float: left;} #page-community div#content div#planner div#inner div#primary div.panels div.panel#panel-hello div#planner-feelings div.form {float: right; width: 178px; margin: 12px 0px 0 00px; display: inline; } div#panel-support-banner {margin-bottom: 10px; float: left; background: #fff; padding: 2px; border: 1px solid #ffc1cb; width: 647px;} div#panel-support-banner * {margin: 0; padding: 0; font-size: 1px; line-height: 1px; float: left!important; float: none;} #page-community div#content div#planner div#inner div#primary div.panels div.left {width: 321px; float: left;} #page-community div#content div#planner div#inner div#primary div.panels div.right {width: 321px; float: right;} #page-community div#content div#planner div#inner div#primary div.panels div.left h2, #page-community div#content div#planner div#inner div#primary div.panels div.right h2 {width: 240px} div.panel#panel-buddies {float: left; width: 299px; padding: 10px; background: #fff; border: 1px solid #ffc1cb;} #page-dashboard div.panel#panel-buddies {width: 270px; margin:0 0 10px 0;} div.panels div.left div.panel#panel-buddies p {margin-bottom: 5px;} div.panel#panel-buddies ul {margin-top: 12px 0 12px 0;} div.panel#panel-buddies ul li {float: left; clear: both; width: 100%; margin-bottom: 3px;} div.panel#panel-buddies ul li img {float: left; display:inline; margin:0 5px 0 0;} div.panel#panel-buddies ul li span {float:left; display:inline; margin:3px 5px 0 0;} div.panel#panel-buddies ul li div {float: left;display:inline; margin:3px 0 0 0;} #page-community div#content div#planner div#inner div#primary div.panels div.left div.panel#panel-buddies a.image-button {float: right; margin-top: 6px;} #page-community div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-forum {float: left; width: 299px; padding: 10px; background: #fff; border: 1px solid #ffc1cb;} #page-community div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-forum p {margin-bottom: 5px;} #page-community div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-forum ul {margin-top: 12px;} #page-community div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-forum ul li {margin-bottom: 20px;} #page-community div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-forum ul li p strong {color: #3075af;} #page-community div#content div#planner div#inner div#primary div.panels div.right div.panel#panel-forum a.image-button {float: right; margin-top: -6px;} #page-community #panel-forum a { font-weight: bold; } #page-community #panel-forum a.post { color: #666; font-weight: normal; } /* =7.x BUDDIES */ #page-buddies div#content div#planner div#inner div#primary div#planner-head.alt p.button-findabuddy {float: right; margin: 25px 0 0px 0; width: auto;} #page-buddies div#content div#planner div#inner div#primary a.button-findabuddy {position: relative; display: block; float: left; width: auto; line-height: 28px; background: url(../images/personalplan/button_findabuddy.gif); padding: 0 28px 0 8px; color: #fff; font-size: 14px;} /* Fix this */ #page-buddies div#content div#planner div#inner div#primary a.button-findabuddy:hover {text-decoration: none;} #page-buddies div#content div#planner div#inner div#primary a.button-findabuddy span {display: block; width: 25px; height: 28px; position: absolute; right: 0; top: 0; background: url(../images/personalplan/button_findabuddy.gif) -275px 0;} #page-buddies div#content div#planner div#inner div#primary p.button-findabuddy {float: right; margin: 10px 0 10px 0;} #page-buddies div#content div#planner div#inner div#primary div.panels {border: 1px solid #ffc1cb; float: left; width: 100%; } /* This allows for the 1px stroke around the panels */ #page-buddies div#content div#planner div#inner div#primary div.panels div#panel-yourbuddies div.inner p {font-size: 1.4em; margin-bottom: 8px;} #page-buddies div#content div#planner div#inner div#primary div.panels div#panel-yourbuddies div.inner p a {color: #ee2b4e;} #page-buddies div#content div#planner div#inner div#primary div.panels div#panel-yourbuddies div.inner div.intro p {font-size:1.3em;} #page-buddies div#content div#planner div#inner div#primary div.panels div#panel-yourbuddies div.inner div.intro p strong {font-size:1.1em;} #page-buddies div#content div#planner div#inner div#primary div.panels div#panel-yourbuddies div.inner input {margin-right: 6px;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel {float: left; clear: both; background: #fff; width: 100%;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel h2 {background: #e8f0f9; font-family: Arial, Helvetica, Verdana, sans-serif; color: #666; font-size: 1.4em; font-weight: bold; padding: 10px 17px;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner {padding: 16px; float: left; color: #666;} /* This is the white part of the panel */ #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li {background: url(../images/global/rule.gif) repeat-x left bottom; position: relative; width: 508px; clear: both; float: left; padding: 0px 0 10px 112px; margin-bottom: 10px;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li.last {background: none; margin-bottom: 0; padding-bottom: 0;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li div.avatar {position: absolute; top: 00px; left: 00px; width: 75px; height: 75px;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li div.avatar a {display: block; width: 75px; height: 75px; position: relative; float: left;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li div.avatar a img {float: left; display: block; position: absolute; top: 0; left: 0;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li div.avatar a span {display: block; width: 75px; height: 75px; background: transparent url(../images/personalplan/avatar_mask.gif); position: absolute; top: 0; left: 0; z-index: 9999; float: left; zoom:1; display: block!important; display: none;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li p.emoticon {position: absolute; text-indent: -9999px; top: 1px; left: 82px;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li div.panel-send p {float: left;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li div.panel-send textarea {width: 500px; border: 1px solid #ccc; color:#00559D; font-family:Arial,Verdana,sans-serif; font-size:1.5em;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li div.panel-send p.input {float: left;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li div.panel-send input {float: left;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li div.panel-send a { color:#EE2B4E; float:right; margin:5px 19px 0 0; font-size:1.2em; } #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li div.panel-send input a.cancel {display: none; float: left;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li div.panel-report p {float: left;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li div.panel-report textarea {width: 500px; border: 1px solid #ccc; color:#00559D; font-family:Arial,Verdana,sans-serif; font-size:1.5em;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li div.panel-report p.input {float: left;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li div.panel-report input {float: left;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li div.panel-report a { color:#EE2B4E; float:right; margin:5px 19px 0 0; font-size:1.2em; } #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li div.panel-report input a.cancel {display: none; float: left;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li ul li {background: none; padding: 0;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li h3 {font-size: 1.4em; font-family: Arial, Helvetica, Verdana, sans-serif; margin-bottom: 14px; float: left;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li h3 strong {color: #00559d; clear: both;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li ul.details {min-height:70px; float: left; clear: both; width: 100%;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li ul li {font-size: 1.1em; margin-bottom: 4px; width: auto; width: 100%;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li ul li strong {text-transform: uppercase;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li a.button-red-arrowr {float: right; margin: 0 16px 2px 0; display: inline; display: none;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li ul.options {float: right; width: auto; } #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li ul.options li {width: auto; float: right; } #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li ul.options li a {font-size: 1.1em;} #page-buddies div#content div#planner div#inner div#primary div.panels div.panel div.inner ul li ul.options li p {font-size: 1.166666667em!important; font-weight: bold; text-align: right; margin-bottom: 2px;} #page-buddies div#content div#planner.buddyfinder div#inner div#primary div#planner-head.alt div.inner p#button-backtobuddies {float: right; width: auto;} #page-buddies div#content div#planner.buddyfinder div#inner div#primary div#planner-head div.inner p#button-backtobuddies {float: right; width: auto;} #page-buddies div#content div#planner.buddyfinder div#inner div#primary div.panel#panel-sort {background: #ffcdd2; text-align: center;} #page-buddies div#content div#planner.buddyfinder div#inner div#primary div.panel#panel-sort div {margin: auto; text-align: center; display: table;} #page-buddies div#content div#planner.buddyfinder div#inner div#primary div.panel#panel-sort div h4 {float: left; font-size: 1.2em; color: #666; font-family: Arial, Helvetica, Verdana, sans-serif; line-height: 28px; margin-right: 13px;} #page-buddies div#content div#planner.buddyfinder div#inner div#primary div.panel#panel-sort div ul {float: left;} #page-buddies div#content div#planner.buddyfinder div#inner div#primary div.panel#panel-sort div ul li {float: left; background: #ffe6e9; margin-left: 1px;} #page-buddies div#content div#planner.buddyfinder div#inner div#primary div.panel#panel-sort div ul li a {padding: 8px 19px 8px 11px; display: block; font-size: 1.2em; color: #00559d; position: relative;} #page-buddies div#content div#planner.buddyfinder div#inner div#primary div.panel#panel-sort div ul li a:hover, #page-buddies div#content div#planner.buddyfinder div#inner div#primary div.panel#panel-sort div ul li a.active {text-decoration: none; background: #fff;} #page-buddies div#content div#planner.buddyfinder div#inner div#primary div.panel#panel-sort div ul li a span {width: 10px; height: 10px; font-size: 0; line-height: 0; display: block; position: absolute; right: 6px; top: 9px; background: url(../images/personalplan/arrows-tabs.gif) -10px 0;} #page-buddies div#content div#planner.buddyfinder div#inner div#primary div.panel#panel-sort div ul li a.active span, #page-buddies div#content div#planner.buddyfinder div#inner div#primary div.panel#panel-sort div ul li a:hover span {background-position: 0 0;} #page-buddies div#content div#planner.buddyfinder div#inner div#primary div.panel#panel-pagination {border-bottom: 1px solid #ffc1cb;} #page-buddies div#content div#planner.buddyfinder div#inner div#primary div.panel#panel-pagination div ul {float: right; margin-right: 9px; display: inline;} #page-buddies div#content div#planner.buddyfinder div#inner div#primary div.panel#panel-pagination div ul li {float: left; margin-left: 12px;} #page-buddies div#content div#planner.buddyfinder div#inner div#primary div.panel#panel-pagination div ul li a {font-size: 1.2em; line-height: 30px; color: #00559d;} #page-buddies div#content div#planner.buddyfinder div#inner div#primary div.panel#panel-pagination div ul li a.active {text-decoration:underline;} #page-buddies div#content div#planner.buddyfinder div#inner div#primary div.panel#panel-pagination-bottom {border-top: 1px solid #ffc1cb; background: #fff; float: left; width: 100%;} #page-buddies div#content div#planner.buddyfinder div#inner div#primary div.panel#panel-pagination-bottom div ul {float: right; margin-right: 9px; display: inline;} #page-buddies div#content div#planner.buddyfinder div#inner div#primary div.panel#panel-pagination-bottom div ul li {float: left; margin-left: 12px;} #page-buddies div#content div#planner.buddyfinder div#inner div#primary div.panel#panel-pagination-bottom div ul li a {font-size: 1.2em; line-height: 30px; color: #00559d;} #page-buddies div#content div#planner.buddyfinder div#inner div#primary div.panel#panel-pagination-bottom div ul li a.active {text-decoration:underline;} #page-buddies div#content div#planner.chat div#inner div#primary div.panels div.panel div.inner ul li ul.options {float: right; width: auto; position: absolute; top: 10px; right: 0px;} #page-buddies div#content div#planner.chat div#inner div#primary div.panels div.panel div.inner ul li ul.options li {width: auto; float: right; } #page-buddies div#content div#planner.chat div#inner div#primary div.panels div.panel div.inner ul li ul.options li a {font-size: 1.1em;} #page-buddies div#content div#planner.chat div#inner div#primary div.panels div.panel-message {} #page-buddies div#content div#planner.chat div#inner div#primary div.panels div.panel-message div.inner {padding-left: 112px;} #page-buddies div#content div#planner.chat div#inner div#primary div.panels div.panel-message div.inner textarea {width: 460px;} #page-buddies div#content div#planner.chat div#inner div#primary div.panels div.panel-dialogue {float: left;} #page-buddies div#content div#planner.chat div#inner div#primary div.panels div.panel-dialogue ul li {background: none!important;padding: 0!important; margin-left: 71px; display: inline; width: 420px!important;} #page-buddies div#content div#planner.chat div#inner div#primary div.panels div.panel-dialogue ul li.you {margin-left: 175px;} #page-buddies div#content div#planner.chat div#inner div#primary div.panels div.panel-dialogue ul li div.top {background: url(../images/personalplan/chat_bg.gif) -420px 0 no-repeat; width: 392px; padding: 14px 14px 0 14px; margin: 0;} #page-buddies div#content div#planner.chat div#inner div#primary div.panels div.panel-dialogue ul li div.bottom {background: url(../images/personalplan/chat_bg.gif) no-repeat -420px -500px; height: 27px; width: 420px; margin: 0;} #page-buddies div#content div#planner.chat div#inner div#primary div.panels div.panel-dialogue ul li.you div.top {background: url(../images/personalplan/chat_bg.gif) -0px 0 no-repeat;} #page-buddies div#content div#planner.chat div#inner div#primary div.panels div.panel-dialogue ul li.you div.bottom {background: url(../images/personalplan/chat_bg.gif) no-repeat -0px -500px;} #page-buddies div#content div#planner.chat div#inner div#primary div.panels div.panel-dialogue ul li.first div.top {background: url(../images/personalplan/chat_bg.gif) -840px 0 no-repeat;} #page-buddies div#content div#planner.chat div#inner div#primary div.panels div.panel-dialogue ul li.first div.bottom {background: url(../images/personalplan/chat_bg.gif) no-repeat -840px -500px;} #page-buddies div#content div#planner.chat div#inner div#primary div.panels div.panel-dialogue ul li div blockquote {font-style: italic; margin-bottom: 12px; color: #666;} #page-buddies div#content div#planner.chat div#inner div#primary div.panels div.panel-dialogue ul li div p {margin: 0;} #page-buddies div#content div#planner.request div#inner div#primary div#planner-head.alt p#button-backtobuddies {float: right; width: auto;} #page-buddies div#content div#planner.request div#inner div#primary div.panels div.panel div.inner ul {margin: 0;} #page-buddies div#content div#planner.request div#inner div#primary div.panels div.panel div.inner ul li {background: none; padding-left: 0;} #page-buddies div#content div#planner.request div#inner div#primary div.panels div.panel div.inner ul li div.message {float: left; width: 632px;} #page-buddies div#content div#planner.request div#inner div#primary div.panels div.panel div.inner ul li div.message ul.options {float: right; width: auto; } #page-buddies div#content div#planner.request div#inner div#primary div.panels div.panel div.inner ul li div.message ul.options li {width: auto; float: right; } #page-buddies div#content div#planner.request div#inner div#primary div.panels div.panel div.inner ul li div.message ul.options li a {font-size: 1.1em;} #page-buddies div#content div#planner.request div#inner div#primary div.panels div.panel div.inner ul li div.message ul.dialogue {margin-left: 96px; } #page-buddies div#content div#planner.request div#inner div#primary div.panels div.panel div.inner ul li div.message ul.dialogue li {background: none!important;padding: 0!important; display: inline; width: 420px!important;} #page-buddies div#content div#planner.request div#inner div#primary div.panels div.panel div.inner ul li div.message ul.dialogue li.you {margin-left: 175px;} #page-buddies div#content div#planner.request div#inner div#primary div.panels div.panel div.inner ul li div.message ul.dialogue li div.top {background: url(../images/personalplan/chat_bg.gif) -420px 0 no-repeat; width: 392px; padding: 14px 14px 0 14px; margin: 0;} #page-buddies div#content div#planner.request div#inner div#primary div.panels div.panel div.inner ul li div.message ul.dialogue li div.bottom {background: url(../images/personalplan/chat_bg.gif) no-repeat -420px -500px; height: 27px; width: 420px; margin: 0;} #page-buddies div#content div#planner.request div#inner div#primary div.panels div.panel div.inner ul li div.message ul.dialogue li div blockquote {font-style: italic; margin-bottom: 12px; color: #666;} #page-buddies div#content div#planner.request div#inner div#primary div.panels div.panel div.inner ul li div.message ul.dialogue li div p {margin: 0;} #page-buddies div#content div#planner.request div#inner div#primary div.panels div.panel div.inner ul li div.info {position: relative; float: left; padding-left: 112px;} #page-buddies div#content div#planner.request div#inner div#primary div.panels div.panel div.inner ul li div.info p.emoticon {position: absolute; text-indent: -9999px; top: 1px; left: 82px!important;} /* EMOTICONS & ICONS */ .emoticon {background: url(../images/personalplan/emoticons.jpg); display: block;} .emoticon-pink {background: url(../images/personalplan/emoticons_pink.jpg); display: block;} .tiny-default {width: 25px; height: 25px; background-position: 0 -164px;} .tiny-motivated {width: 25px; height: 25px; background-position: -25px -164px;} .tiny-happy {width: 25px; height: 25px; background-position: -50px -164px;} .tiny-slimmer {width: 25px; height: 25px; background-position: -75px -164px;} .tiny-healthy {width: 25px; height: 25px; background-position: -100px -164px;} .tiny-ok {width: 25px; height: 25px; background-position: -125px -164px;} .tiny-bored {width: 25px; height: 25px; background-position: -150px -164px;} .tiny-sleepy {width: 25px; height: 25px; background-position: -175px -164px;} .tiny-hungry {width: 25px; height: 25px; background-position: -200px -164px;} .tiny-struggling {width: 25px; height: 25px; background-position: -225px -164px;} .tiny-confused {width: 25px; height: 25px; background-position: -250px -164px;} .small-default {width: 25px; height: 25px; background-position: 0 -164px;} .small-motivated {width: 25px; height: 25px; background-position: -25px -164px;} .small-happy {width: 25px; height: 25px; background-position: -50px -164px;} .small-slimmer {width: 25px; height: 25px; background-position: -75px -164px;} .small-healthy {width: 25px; height: 25px; background-position: -100px -164px;} .small-ok {width: 25px; height: 25px; background-position: -125px -164px;} .small-bored {width: 25px; height: 25px; background-position: -150px -164px;} .small-sleepy {width: 25px; height: 25px; background-position: -175px -164px;} .small-hungry {width: 25px; height: 25px; background-position: -200px -164px;} .small-struggling {width: 25px; height: 25px; background-position: -225px -164px;} .small-confused {width: 25px; height: 25px; background-position: -250px -164px;} .medium-default {width: 40px; height: 40px; background-position: 0 -165px;} .medium-motivated {width: 40px; height: 40px; background-position: -40px -165px;} .medium-happy {width: 40px; height: 40px; background-position: -80px -165px;} .medium-slimmer {width: 40px; height: 40px; background-position: -120px -165px;} .medium-healthy {width: 40px; height: 40px; background-position: -160px -165px;} .medium-ok {width: 40px; height: 40px; background-position: -200px -165px;} .medium-bored {width: 40px; height: 40px; background-position: -240px -165px;} .medium-sleepy {width: 40px; height: 40px; background-position: -280px -165px;} .medium-hungry {width: 40px; height: 40px; background-position: -320px -165px;} .medium-struggling {width: 40px; height: 40px; background-position: -360px -165px;} .medium-confused {width: 40px; height: 40px; background-position: -400px -165px;} .medium-default {width: 40px; height: 40px; background-position: 0 -165px;} .lightmedium-motivated {width: 40px; height: 40px; background-position: -40px -125px;} .lightmedium-happy {width: 40px; height: 40px; background-position: -80px -125px;} .lightmedium-slimmer {width: 40px; height: 40px; background-position: -120px -125px;} .lightmedium-healthy {width: 40px; height: 40px; background-position: -160px -125px;} .lightmedium-ok {width: 40px; height: 40px; background-position: -200px -125px;} .lightmedium-bored {width: 40px; height: 40px; background-position: -240px -125px;} .lightmedium-sleepy {width: 40px; height: 40px; background-position: -280px -125px;} .lightmedium-hungry {width: 40px; height: 40px; background-position: -320px -125px;} .lightmedium-struggling {width: 40px; height: 40px; background-position: -360px -125px;} .lightmedium-confused {width: 40px; height: 40px; background-position: -400px -125px;} .lightmedium-default {width: 40px; height: 40px; background-position: 0px -125px;} .large-default {width: 124px; height: 124px; background-position: 0 0;} .large-motivated {width: 124px; height: 124px; background-position: -124px 0;} .large-happy {width: 124px; height: 124px; background-position: -248px 0;} .large-slimmer {width: 124px; height: 124px; background-position: -320px 0;} .large-healthy {width: 124px; height: 124px; background-position: -496px 0;} .large-ok {width: 124px; height: 124px; background-position: -640px 0;} .large-bored {width: 124px; height: 124px; background-position: -744px 0;} .large-sleepy {width: 124px; height: 124px; background-position: -868px 0;} .large-hungry {width: 124px; height: 124px; background-position: -992px 0;} .large-struggling {width: 124px; height: 124px; background-position: -1116px 0;} .large-confused {width: 124px; height: 124px; background-position: -1240px 0;} .weather-icon {background: url(../images/personalplan/weather-matrix.jpg); display: block;} .weather-sunny { width:50px; height: 50px; background-position: 0 0; } .weather-slightycloudy { width:50px; height: 50px; background-position: -50px 0; } .weather-mostlycloudy { width:50px; height: 50px; background-position: -100px 0; } .weather-verycloudy { width:50px; height: 50px; background-position: 0 -50px; } .weather-overcast { width:50px; height: 50px; background-position: -50px -50px; } .weather-cloudy { width:50px; height: 50px; background-position: -100px -50px; } .weather-heavy-rain { width:50px; height: 50px; background-position: 0 -100px; } .weather-rain { width:50px; height: 50px; background-position: -50px -100px; } .weather-showers { width:50px; height: 50px; background-position: -100px -100px; } .weather-snow { width:50px; height: 50px; background-position: 0 -150px; } .weather-sleet { width:50px; height: 50px; background-position: -50px -150px; } .weather-fog { width:50px; height: 50px; background-position: -100px -150px; } .weather-storms { width:50px; height: 50px; background-position: 0 -200px; } .weather-windy { width:50px; height: 50px; background-position: -50px -200px; } .weather-coldwind { width:50px; height: 50px; background-position: -100px -200px; } a.icon-add, a.icon-update, a.icon-arrow, a.icon-move, a.icon-pin, a.icon-alert {color: #ed2b4e; font-size: 1.2em; line-height: 12px; text-align: right; display: block; background: url(../images/personalplan/icons_small.gif) no-repeat right top; padding-right: 15px; display: block;} a.icon-update {background-position: right -0px;} a.icon-add {background-position: right -36px;} a.icon-arrow {background-position: right -180px;} a.icon-move {} a.icon-pin {} a.icon-alert {} .icon-white, .icon-pink, .icon-blue {display: block; padding: 9px 0; padding-left: 52px!important; min-height: 23px; height:auto!important; height: 23px; font-size: 1.8em; line-height: 20px; color: #00559d; font-family: Arial, Helvetica, Verdana, sans-serif; margin-bottom: 10px; clear: both; } .icon-white {background: url(../images/personalplan/icons_41_white.gif) no-repeat;} .icon-pink {background: url(../images/personalplan/icons_41_pink.gif) no-repeat;} .icon-blue {background: url(../images/personalplan/icons_41_blue.gif) no-repeat;} .icon-buddies {background-position: 0 -369px;} .icon-forum {background-position: 0 -246px;} .icon-mealplan {background-position: 0 -492px;} .icon-support {background-position: 0 -246px;} .icon-advice {background-position: 0 -123px;} .icon-widget {background-position: 0 -615px; font-family: "Times", "Times New Roman", "Georgia", serif;} /* =7.x PERSONAL PLAN DAY */ div#planner-head-intro { padding:10px 0; } div#planner-head-intro h1{height:auto;font-size: 2.4em; line-height: 28px; text-indent: 0; margin: 0 0 10px 0; vertical-align: middle; width: 552px;} div#planner-head-intro div.avatar {width: 75px; height: 75px; background: #fff; float: left; margin-right: 20px;} #panel-customize-plan {width:652px;border:1px solid #FFC1CB;background:#ffebed; float: left;} #panel-customize-plan-content { padding:8px 8px 8px 44px;position:relative;min-height:28px; height:auto !important; height:28px; float: left;} #panel-customize-plan-content p{ margin-bottom:0; } #panel-customize-plan-content p.intro{ font-weight:bold; font-size:1.4em; line-height:16px; padding: 6px 0;} /* temp fix for vertical align - won't work if text over two lines */ #custom-button{ position:absolute; top:8px; left:8px; height:28px; width:28px; overflow:hidden; } #custom-button a{display:block; width:28px; height:28px; text-indent:-9999px; background: url(../images/personalplan/custom-btn.gif) no-repeat; } #custom-button.subtract a{ background-position: -28px 0; } #custom-open{ float:left; width:654px;margin:-1px 0 0; } #custom-open-inner{border-right:1px solid #FFC1CB; border-left:1px solid #FFC1CB;background:#ffebed;float:left; width:652px;} .custom-open-inner{border-right:1px solid #FFC1CB; border-left:1px solid #FFC1CB;background:#ffebed;float:left; width:652px;} #custom-open-footer{ float:left;height:48px; width:100%;background:transparent url(../images/personalplan/plannerhead_background.gif) no-repeat center bottom;margin-bottom:10px;position:relative; } div.custom-open-col{ float:left; padding:0 0 0 15px; width:300px;} div.custom-open-col-info{ float:left; padding:0 0 0 15px; width:100%; clear:both;} div.custom-open-col-quad{ float:left; padding:0 0 0 15px; width:110px; } div.custom-open-col-quad.last{ width:230px; } div.custom-question{ padding:0 0 10px 0; } #content div.custom-question p{ margin: 0; padding:0 0 5px 0; } div.custom-button-submit{ clear:left;float:left; margin:0 auto; padding-bottom:10px; padding-left:10px;} div.custom-button-submit div.btn-medium{ margin-top:0; } #planner-below-customize{ margin-top:10px; width:100%; float:left; } #user-plan-details-msg p { margin-right:15px;} #panel-dayplan .rating p span { display:block; } #plan-day div.panel, #plan-week div.panel{border:1px solid #FFC1CB;float:left;width:100%;} #panel-dayplan { position: relative; } ul#meal_tabs{background-color: #FFC1CB;height:23px;padding: 0 0 1px;width:100%;} #meal_tabs li{display:block-inline;float:left;height:23px;overflow:none;background: #FFE0E6 url(../images/personalplan/arrows-tabs-noneactive.gif) no-repeat 95% 50%;color:#f13a60;font-size:1.4em;line-height:23px;text-align:center;position:relative;margin:0 1px 0 0;padding:0px 20px;} #meal_tabs li.right{ display:block-inline;float:right;height:23px;overflow:none;background: none;color:#EE2B4E;font-size:1.0em;line-height:23px;text-align:center;position:relative;margin:0 1px 0 0;padding:0px; } #meal_tabs li.right a{color:#ED2B4E;} #meal_tabs li.active{background: #FFF url(../images/personalplan/arrows-tabs-active.gif) no-repeat 95% 50%;color: #00559D;} #meal_tabs li a{ color:#00559D;} #meal_tabs li.active a{ color:#00559D;} #meal_tabs li.no-tab{ background:none; color:#666; } div.panel-dayplanner{ float:left;clear:both;background:#FFF url(../images/personalplan/dayplan_background.gif) repeat-y; border-top:3px solid #dedede;border-bottom:3px solid #dedede; width: 100%;} .panel-dayplanner div.plan{ width:440px;float:left; display: inline;} .panel-dayplanner div.events-and-tips{ width:208px; float:right; margin-left:4px; display: inline;} div.add-event-form {float: left; display: block;} div.panel-dayplan-hf{ clear:both;position:relative; background:#FFF;padding:10px 17px; width: 618px;} div.panel-dayplan-hf h2{ font-size: 1.4em; font-weight: bold; background:none; padding:0; float:left;color:#00559d; font-family: Arial, Helvetica, Verdana, sans-serif; } div.panel-dayplan-hf h2 span{ font-weight:normal; } ul.dayplan-hf_right{display:block; float:right; } ul.dayplan-hf_right li{ float:left; padding-left:3px; } ul.dayplan-hf_right .btn-small{margin:0;} .panel-dayplanner div.plan ul li{ float:left; width: 100%; clear:left; } .panel-dayplanner div.plan ul li.hover, .panel-dayplanner div.plan ul li:hover{cursor: pointer;} .panel-dayplanner div.plan ul li.snack{ background: #e8f0f9; } .panel-dayplanner div.plan ul li div.meal{ float:left;display:block; padding:13px 15px;font-size:1.4em;width:410px; background: url(../images/personalplan/arrows-down.gif) no-repeat 98% 50%;} .panel-dayplanner div.plan ul li div.meal.open{ float:left;display:block; padding:15px;width:410px; background: url(../images/personalplan/arrows-up.gif) no-repeat 98% 50%;} .panel-dayplanner div.plan ul li div.meal span{ display:block; width:100px; float:left;color:#666;padding-left: 20px;} .panel-dayplanner div.plan ul li.breakfast div.meal span{ background:url(../images/personalplan/meals_breakfast_icon.gif) no-repeat 0 50%; } .panel-dayplanner div.plan ul li.lunch div.meal span{ background:url(../images/personalplan/meals_lunch_icon.gif) no-repeat 0 50%; } .panel-dayplanner div.plan ul li.dinner div.meal span{ background:url(../images/personalplan/meals_dinner_icon.gif) no-repeat 0 50%; } .panel-dayplanner div.plan ul li.legal{font-family: Arial, Verdana, sans-serif; color:#666666;padding:10px;} .panel-dayplanner div.plan ul li div.meal {float: left; clear: both;} .panel-dayplanner div.plan ul li div.meal h3{ float:left;font-family: Arial, Verdana, sans-serif; color:#00559d; width:280px; line-height: 16px; padding-left: 5px;} .panel-dayplanner div.plan ul li div.meal_description{ clear:left; padding:10px; } .meal_description .meal_image{ float:left; width:280px; padding: 0 10px 10px 0; } .meal_description div.rating{ float:right; padding: 0 10px 15px 0; margin:0; clear:none;} #content .meal_description div.rating p{text-align:center;margin:0;padding:4px 0; } .meal_description .meal_upper, .meal_description .meal_lower {width:100%;float:left;clear:left; } div.meal_instructions_top{ float:left; width: 100%; margin-bottom: 14px;} div.meal_instructions_top ul{ clear:left;float:left;padding:10px 0; } div.meal_instructions_top ul li{color:#666; font-size:1.2em;line-height:1.3em; } #content div.meal_instructions_top p{ clear:left;float:left;margin-bottom:0.5em; width: 100%;} #content div.meal_lower p{float:left;clear:left; width: 100%; margin-bottom: 14px;} .meal_instructions_lower {width: 100%;} .meal_instructions_lower input.input-left{ float:left; margin-right:5px; } .recipe-lower ul li, .meal_instructions_top ul, .meal_instructions_top ul li, .meal_instructions_top p, .meal_instructions_lower ul, .meal_instructions_lower ul li, .meal_instructions_lower p {width: 100%;} .meal_instructions_lower ul li {font-size: 1.2em; color: #666; line-height: 16px;} .recipe-lower ul {margin-bottom: 14px;} ul.change-meals{ float:left; padding:5px 0; } ul.change-meals li{ float:left; clear:left; padding:0 0 10px 0; } ul.change-meals li a { font-size:1.2em; color:#ED2B4E; background: url(../images/global/arrow_red_small.gif) no-repeat right 50%; padding-right: 10px; } ul.change-meals li label { font-size:1.2em; color:#ED2B4E; padding: 0 13px 0 0; background: url(../images/personalplan/arrows-tabs-active.gif) no-repeat right 50%; } .panel-dayplanner div.events-and-tips {float: right;} .panel-dayplanner div.events-and-tips div.events, .panel-dayplanner div.events-and-tips div.tips { float:left;} .panel-dayplanner div.events-and-tips div.events{ width:100%; } .panel-dayplanner div.events-and-tips h4{ font-family: Arial, Verdana, sans-serif;font-size:1.2em; color:#00559d; line-height:24px; } .panel-dayplanner div.events-and-tips div.events h4{margin:5px 10px 10px 10px ;padding-left:25px;background: url(../images/personalplan/icon_events.gif) no-repeat 0 50%; } .panel-dayplanner div.events-and-tips div.events ul.events-list{ padding:0 0 10px; } .panel-dayplanner div.events-and-tips div.events ul.events-list li{ font-size:1.2em; color:#00559d;display:block; background:#eeeeee url(../images/personalplan/icon_events_pin.gif) no-repeat 10px 5px; padding:7px 30px 10px;border-bottom:1px solid #FFF;position:relative;} .panel-dayplanner div.events-and-tips div.events ul.events-list li a{ color:#00559d; } div.events ul.events-list li div.remove-event{width:10px; height:10px; position:absolute; top:7px; right:10px;} div.events ul.events-list li div.remove-event a{ text-indent:-9999px; display:block; height:10px; width:10px; background: url(../images/personalplan/icon_cross.gif) no-repeat; } .panel-dayplanner div.events-and-tips div.events p#add-event{ } div.events div.add-event-form{padding:0 10px 10px 10px; } div.events div.add-event-form select{ width:178px; } div.events div.add-event-form textarea{ padding:3px; font-family: Arial, Verdana, sans-serif; color:#00559d; width:178px; } div.events div.add-event-form ul{ float:right;} div.events div.add-event-form ul li{ float:right;clear:right; padding:3px 0; } div.events div.add-event-form ul li a.subtract{ text-align:right; color:#ed2b4e;font-size:1.2em} div.events div.add-event-form h5{ font-family: Arial, Verdana, sans-serif;font-size:1.2em; color:#666; padding:0 10px;font-weight:bold;line-height:1.4em;padding:5px 0;} div.events-and-tips div.rule{ margin-bottom:0; } .panel-dayplanner div.events-and-tips p.right, .panel-dayplanner div.events-and-tips p.right{ text-align:right; } .panel-dayplanner div.events-and-tips div.events p a.add, .panel-dayplanner div.events-and-tips div.tips p a.swap{ text-align:right; color:#ed2b4e;} .panel-dayplanner div.events-and-tips div.tips{ padding:10px; width: 188px; } .panel-dayplanner div.events-and-tips div.tips h4{padding-left:25px;background: url(../images/personalplan/icon_tips.gif) no-repeat 0 50%;margin:0 0 10px; } .panel-dayplanner div.events-and-tips div.tips img{ margin-bottom:5px; } #content .panel-dayplanner div.events-and-tips div.events p{padding: 0 10px;} #content .panel-dayplanner div.events-and-tips div.tips p{ margin-bottom:10px; } #content .panel-dayplanner div.events-and-tips div.events div.add-event-form p{padding:0;} /* FORM WITH SIX DROPDOWNS */ div#form-find {width: 634px; float: left; display: inline; margin-left: -6px; float: left;} div#form-find p {width: 305px!important; margin: 0 4px 12px 6px; float: left; display: inline;} div#form-find p label, div#form-find p select {float: left; clear: both; width: 100%;} div#form-find p label {font-size: 0.85714em; margin-bottom: 2px;} div#form-find p#field-search {background: url(../images/personalplan/icon_search.gif) no-repeat; background-position:right bottom; width: 200px!important; margin-top: 0px;} /*div#form-find p#field-search label {text-indent: -9999px;}*/ div#form-find p#field-search input {border: 1px solid #ccc; width: 158px!important; width: 158px; color: #00559d; font-size: 0.865em; padding: 2px 6px; float: left;} #plan-recipe-book div#form-find { padding:0 0 0 15px; } #plan-recipe-book #custom-open-inner p input.submit { margin:0 0 0 15px; } #plan-recipe-book div#form-find p label { font-size: 1em; } #plan-recipe-book div#form-find p#field-search { padding-bottom:2px; } /* =7.x PERSONAL PLAN WEEK */ div.panel-weekplanner{ float:left;clear:both;background:#FFF url(../images/personalplan/dayplan_background.gif) repeat-y; border-top:3px solid #dedede;border-bottom:3px solid #dedede;width:100%; } .week_planner_day_topleft, .week_planner_day_topright, .week_planner_day_left, .week_planner_day_right {width:324px;height:184px;background-color:#FFF;} .week_planner_day_left, .week_planner_day_right {border-top:3px solid #DEDEDE;} .week_planner_day_topleft, .week_planner_day_left {border-right:3px solid #DEDEDE;float:left;clear:left;margin-left:1px} .week_planner_day_topright, .week_planner_day_right {float:right;clear:right;} .week_planner_day {border-bottom: 1px solid #FFC1CB;} .wp_day_left{width:77px;border-right:1px dotted #CCC;height:150px;float:left;background-color: #FFF;} .wp_day_icon{ margin-top: 5px; text-align: center;} .wp_day_icon img{ padding: 2px; margin: 0 auto;} #wp_current_day{background: url(../images/personalplan/wp_day_notify.gif) no-repeat top left;} .week_planner_day_left .wp_day_left{width:78px;} .wp_day_right{width: 246px;float:left;} .wp_day_right ul, .week_planner_day_right .wp_day_right ul{width: 245px;} .week_planner_day_left div.wp_day_right{width: 245px;float:left;} .wp_top{ float:left; position: relative;height:150px; } .wp_day_events{ width:304px;float:left; clear:left; padding:10px; background: #FFF; height:14px;font-size:1.1em;border-top:1px solid #DEDEDE;} .wp_day_events div.wp_planned{ float:left; color:#666; } .wp_day_events a{ float:right; color:#ED2B4E; } .wp_date{width:100%;height:55px;text-align:center;padding:15px 0 0 0;} .wp_date h3{margin:0;padding:0;color: #EE2B4E;font-size:30px;font-weight:bold;font-family: Arial, Helvetica;} #content .wp_date p{padding:5px 0 0 0;margin:0;text-transform: uppercase;font-size:10px;line-height:10px;} .panel-weekplanner li{background-color:#FFF;padding-left: 25px;height:25px;line-height:25px;overflow:hidden;color:#666666;font-weight:bold;} .panel-weekplanner li.snack{ background: #e8f0f9;font-weight:normal;} .panel-weekplanner li.breakfast { background:url(../images/personalplan/meals_breakfast_icon.gif) no-repeat 5px 50%; } .panel-weekplanner li.lunch { background:url(../images/personalplan/meals_lunch_icon.gif) no-repeat 5px 50%; } .panel-weekplanner li.dinner { background:url(../images/personalplan/meals_dinner_icon.gif) no-repeat 5px 50%; } .wp_day_right dt{width:60px;float:left;clear:left;padding-left: 10px;} .wp_day_right dd{width:409px;float:left;} .wp_day_right dd ul li{display:inline;float:left;height:25px;} .wp_notes_events{padding:20px 30px 0 30px;font-size:12px;} .wp_notes_events p{margin-bottom:10px;} .wp_notes_events h3{font-size:15px;color:#00559D;margin-bottom:10px;font-family: Arial, Helvetica;} a.linkWeekDay{position:absolute;top:0;left:0;z-index:500;display:block;width:100%;height:150px;} a.linkWeekDay:hover{background-color: #D1E1F3;filter:alpha(opacity=30); -moz-opacity:0.3;opacity: 0.3;} #ajax-loader { display:none;position:absolute;left:0;top:0;width:100%;height:200px;background: #ffffff url(../images/shapemate/sm_loader.gif) no-repeat center center;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;text-align:center; } .wp_no_data { clear:left;float:left;width:380px;height:200px;padding:20px; } /* =7.x PERSONAL PLAN ADVICE */ #plan-advice div#planner-head-intro h1{ margin:0; } #plan-advice div.panels {border: 1px solid #ffc1cb; float: left; width: 100%; } /* This allows for the 1px stroke around the panels */ #plan-advice div.inner-panels{ border-top:0px; zoom:1; float: left; clear: both; width: 100%;} #plan-advice div.inner-panels .inner ul {width: 100%; display: inline;} #plan-advice div.panel{background:#FFFFFF; clear:both; float:left; width:100%; } #plan-advice div.panel h2{ background:#E8F0F9; color:#666666; font-family: Arial,Helvetica,Verdana,sans-serif;font-size:1.4em;font-weight:bold;padding:10px 17px;} #plan-advice div.inner ul li {padding: 12px 12px 12px 60px; position: relative; float: left;background: transparent url(../images/global/rule.gif) repeat-x left bottom; width: 580px;} #plan-advice div.inner ul li:last-child, #plan-advice div.inner ul li.last{background: none;} #plan-advice div.inner ul li div.icon{ height:40px; width:40px;position:absolute; top:12px; left:12px; overflow:hidden; }/*background:url(../images/forums/kelloggs-post.gif) no-repeat; */ #plan-advice div.inner ul li div.advice-content{padding: 0 40px 0 0;} #plan-advice div.inner ul li div.advice-content h3{color:#00559d;font-family: Arial, Helvetica;font-size:1.4em; line-height: 14px; padding-bottom:8px;} #plan-advice #content div.inner ul li div.advice-content p{ line-height:1.4em; } #plan-advice div.inner ul li div.advice-right{text-align:right;font-size:1.2em;} #plan-advice div.inner ul li div.advice-right a{ margin-left:10px; } #plan-advice #content div.inner ul li div.advice-right a.saved{ color:green; } #plan-advice #content div.inner ul li a{ color:#ee2b4e; } /* =7.x PERSONAL PLAN SETTINGS */ #plan-settings div#content div#planner div#inner div#primary div#planner-head div.avatar {width: 75px; height: 75px; background: #fff; float: left; margin-right: 20px;} #plan-settings div#content div#planner div#inner div#primary div#planner-head div.avatar a {display: block; width: 75px; height: 75px; position: relative; float: left;} #plan-settings div#content div#planner div#inner div#primary div#planner-head div.avatar a img {float: left;} #plan-settings div#content div#planner div#inner div#primary div#planner-head div.avatar a span {display: block; width: 75px; height: 75px; background: url(../images/personalplan/avatar_mask_pink.gif); position: absolute; top: 0; left: 0; z-index: 9999; float: left;} #plan-settings div#content div#planner.sub div#inner div#primary {width: 807px;} #plan-settings div#planner-head-intro h1{ margin:0; } #plan-settings div.panels {border: 1px solid #ffc1cb; float: left; width: 100%; } /* This allows for the 1px stroke around the panels */ #plan-settings div.panel{background:#FFFFFF; clear:both; float:left; width:100%; } #plan-settings div.panel h2 {background: #E8F0F9 ; color:#666666; font-family: Arial,Helvetica,Verdana,sans-serif; font-weight: bold; padding:10px 17px; font-size: 1.4em;} #plan-settings div.panel h2 span {margin-bottom: 0; color: #666; font-size: 1em;} #plan-settings div.details-saved {margin-bottom: 10px;} #plan-settings div.details-saved h2 {background: #fff;} #plan-settings div.form-col-left { width:383px; float:left; margin-top:12px; padding-left:17px; } #plan-settings div.form-col-right { width:400px; float:right; margin-top:12px;} #plan-settings div.form-col-single { margin:12px 340px 0 17px; } #plan-settings label.label { font-weight:bold; float:left; } #plan-settings div.form-col-left label.label, #plan-settings div.form-col-single label.label { width:138px; } #plan-settings div.form-col-right label.label { width:98px; } #plan-settings div#user-details-extra label.label { width:130px; } #plan-settings p.indent { margin-left:138px; } #plan-settings legend { display:none; } #plan-settings input.field, #plan-settings select.field, #plan-settings textarea.field { font-family:Arial, Helvetica, sans-serif; } #plan-settings input.field { color:#666; font-size:0.9em; padding:0; width:226px; } #plan-settings textarea.field { color:#666; font-size:0.9em; padding:0; width:282px; height:93px; } #plan-settings input.radio { margin-right:10px; } #plan-settings dl {font-family:Arial, Helvetica, sans-serif; font-size:1.2em; color:#666; margin-bottom:25px;} #plan-settings dt {font-weight:bold;} #plan-settings dd {padding-top:6px;} #plan-settings dd input {margin-right:4px;} #plan-settings .select-list label {font-weight:bold; display:block; margin-bottom:5px;} #plan-settings p.update-button {text-align:right; margin-right:15px;} /* =7.x PERSONAL PLAN WIDGET DOWNLOAD */ #page-dashboard div.panel#panel-widget-download {width: 783px;} #page-dashboard #widget-banner { width:100%;border-left:1px solid #FFC1CB;border-right:1px solid #FFC1CB;border-top:1px solid #FFC1CB; background:url(../images/personalplan/widget_bg.jpg) no-repeat #7c182b top; width:803px; } #page-dashboard #widget-banner div#widget-display { float:right; height:368px; width:419px; overflow:hidden; } #page-dashboard #widget-banner div#widget-text-button { float:left; width:381px; text-align:center; padding-top:37px; } #page-dashboard #widget-banner div#widget-text-button h2 { color:#fff;font-family:Arial,Helvetica,Verdana,sans-serif;font-size:1.7em;line-height:24px; margin:0 45px 1em 45px; } #page-dashboard #widget-banner div#widget-swf-button { margin:20px auto 0 auto; width:310px; height:137px;} #page-dashboard div#content div#planner div#inner div#primary div.panels div.panel#panel-widget-download {border-left:1px solid #FFC1CB;border-right:1px solid #FFC1CB;border-bottom:1px solid #FFC1CB;border-top:none;} #panel-widget-download div.widget-text-col { float:left; width:48%; padding:20px 0; } #panel-widget-download div.col-spacing { margin-left:20px; } #panel-widget-download div.widget-text-col ul { list-style-type:disc; padding-left:15px; } #panel-widget-download div.widget-text-col li { font-size:1.3em; margin-bottom:20px; color:#666; line-height:18px; } #panel-widget-download div.widget-text-col h3 { color:#00559D; font-size:1.6em; margin-bottom:14px; font-family: Arial,Helvetica,Verdana,sans-serif; } #panel-widget-download div.widget-text-col dl { font-size:1.2em; margin-bottom:20px; color:#666; line-height:14px; } #panel-widget-download div.widget-text-col dt { color:#00559D; font-size:1.1em; margin-bottom:5px; } #panel-widget-download div.widget-text-col dd { margin-bottom:20px; } #panel-widget-download div.widget-text-col dd img { float:left; margin-right:10px; } #panel-widget-download div.widget-text-col dd ul {margin: 0 0 -7px 10px;} #panel-widget-download div.widget-text-col dd ul li {list-style: none; font-size: 0.833em; line-height: 12px; margin-bottom: 5px; text-indent: 0;} /* =7.x PERSONAL PLAN MOBILE DOWNLOAD */ #page-dashboard div#mobile-panel { width:783px; } #page-dashboard div#mobile-panel h1 { padding-left:24px; } #page-dashboard div#mobile-panel p { font-size:1.5em; } #page-dashboard div#mobile-panel p a { color:#ED2B4E; } #page-dashboard div.panel#mobile-panel ul { list-style: disc outside none; font-size:1.5em; color:#666666; padding-left:20px;} #page-dashboard div.panel#mobile-panel li { padding:12px; } #page-dashboard div.panel#mobile-panel div#left-content { width:460px; float:left; padding-left:30px; padding-top:20px; padding-bottom:50px;} #page-dashboard div.panel#mobile-panel div#right-content { width:240px; float:right; } /* =7.x PERSONAL PLAN RECIPE */ #plan-recipe p#button-backtorecipes{float:right;} #plan-recipe p#button-backtorecipes a.button-arrow-pink{float:left;} #plan-recipe div.panels {border: 1px solid #ffc1cb; float: left; width: 100%; } /* This allows for the 1px stroke around the panels */ #plan-recipe div.inner-panels{ border-top:0px;} #plan-recipe div.panel{background:#FFFFFF;clear:both;float:left;width:100%;} #plan-recipe div.panel h2{ font-size:2.4em; color:#00559d;padding: 10px 0 15px 0;} #plan-recipe div.panel div.inner{padding:10px;} #plan-recipe div.recipe-upper{ float:left;width:100% } #plan-recipe div.recipe-upper ul{padding:0 0 0 15px;} #plan-recipe div.recipe-upper ul li{ font-size:1.2em; line-height:1.4em;color:#666; list-style: disc outside; } #plan-recipe div.recipe-left{width:315px; float:left;} #plan-recipe div.recipe-right{width:275px; float:right;} #plan-recipe div.recipe-lower{ clear:both;float:left; padding-top:10px; } #plan-recipe div.recipe-right div.rating p{float:left;} #plan-recipe div.recipe-right div.rating p span{display:block; float:left;line-height:17px;padding:0 5px;} #plan-recipe div.recipe-right div.rating{ margin:10px 0; } #plan-recipe div.rule{margin-bottom:0;} #plan-recipe div#add-plan{ float:left; width:100%; } #plan-recipe div#add-plan div#add-plan-inner{float:right;padding: 10px 25px 10px 10px;} #plan-recipe div.related-panel-double{ margin-top:10px;float:left; } /* RECIPE COLLAPSIBLE ADD TO MY PLAN LAYER */ #meal-swap-outer { position:relative; } #meal-swap-outer p.error { margin:0; padding: 10px 10px 0 10px; } #meal-swap-outer p.error span {color: #ee2b4e; } #add-plan p.right { clear:both;color:#ED2B4E; text-align:right; padding: 10px 10px 0 0; } #add-plan p.right a { color:#ED2B4E; text-align:right; } .plan-date-selector { float: left; width: 160px; padding: 15px 10px; } .meal-swap { width: 340px; float: right; margin: 15px 25px 10px 10px; } .meal-swap-item { background:#D7E6F5 none repeat scroll 0 0; color:#666666; padding: 10px; clear: left; float: left; width: 330px; margin-bottom: 10px; } #content .meal-swap-item p { margin-bottom: 0; float: left; line-height:1.8em; } .meal-swap-item span { margin: 0px 10px 0 0; float: left; display: block; font-weight: bold; width: 75px; } .meal-swap-item span.meal-swap-name { font-weight: normal; width: 170px; } .meal-swap-item input { float: right; } #plan-recipe .meal-swap h3 { color:#00559D; font-size:2em; padding:0px 0 15px; } /* =7.x PERSONAL PLAN RECIPE BOOK */ #plan-recipe-book div#custom-open{ } #plan-recipe-book div#custom-open div.intro{ padding:10px;} #plan-recipe-book #content div#custom-open div.intro p{ margin-bottom:10px; } #plan-recipe-book #content p.search-icon{background: url(../images/personalplan/icon_search.gif) no-repeat; padding-left: 28px;margin-top:10px;} #plan-recipe-book #content p.search-icon input{width:200px; border:1px solid #CCC; color:#00559D;padding:3px 5px;} #plan-recipe-book div.panels {border: 1px solid #ffc1cb; float: left; width: 100%; } /* This allows for the 1px stroke around the panels */ #plan-recipe-book div.panel{background:#FFFFFF;clear:both;float:left;width:100%;} #plan-recipe-book div.panel h2{ font-size:2.4em; color:#00559d;padding: 10px 0 15px 0;} #plan-recipe-book div.inner-panels{ border-bottom:1px solid #ffc1cb;float:left;clear:left; width:100%;} #plan-recipe-book ul.pagination{ padding:7px 0;float:right; } #plan-recipe-book ul.pagination li{ padding:0 8px; float:left; font-size:1.2em; line-height:1.4em; } #plan-recipe-book ul.pagination li.selected a{ text-decoration:underline; } #plan-recipe-book ul.recipes li{font-size:1.2em;line-height:1.4em; padding:5px 115px 5px 15px; position:relative;} #plan-recipe-book ul.recipes li.alt{ background:#e8f0f9; } #plan-recipe-book ul.recipes li div.rating{ position: absolute; right:15px;top:5px;margin:0; } #plan-recipe-book div.related-panel-double{ margin-top:10px;float:left; } /* =7.x PERSONAL PLAN SHOPPING LIST */ #plan-shopping-list div#panel-customize-plan{margin-bottom:10px;} #plan-shopping-list div#custom-open{border-top: 1px solid #ffc1cb;} #plan-shopping-list div.custom-open-col{ float:left; padding:0 0 0 15px; width:auto;} #plan-shopping-list div#panel-customize-plan div#planner-head-intro, #plan-shopping-list div#custom-open div#planner-head-intro{ padding:10px;} #plan-shopping-list div#custom-open div#planner-head-intro h1{ margin-bottom:0; } #plan-shopping-list div#custom-open div#custom-open-inner div.custom-open-col div.custom-question p { margin-bottom:14px; padding:0;} #plan-shopping-list div#custom-open div#custom-open-inner input { float:right; padding: 10px; } #plan-shopping-list div#custom-open div#custom-open-inner input.show-shopping {float: left!important; margin-left: 5px; margin-top:15px; } #plan-shopping-list div.panels {border: 1px solid #ffc1cb; float: left; width: 100%; } /* This allows for the 1px stroke around the panels */ #plan-shopping-list div.panel{background:#FFFFFF;clear:both;float:left;width:100%;} #plan-shopping-list div.panel h2{ background:#E8F0F9;color:#666666;font-family:Arial,Helvetica,Verdana,sans-serif;font-size:1.4em;font-weight:bold;padding:10px;} /* Was padding: 10px 17px */ #plan-shopping-list div.panel h2#intro { background:#fff;color:#06599f;font-family:Arial,Helvetica,Verdana,sans-serif;font-size:1.6em;padding:20px 10px 10px 10px;} /* Was padding: 10px 17px */ #plan-shopping-list div.panel ol { width: 550px; margin-left: 10px; } #plan-shopping-list div.panel ol li { font-family:Arial,Helvetica,Verdana,sans-serif;font-size:1.4em; list-style-type: none; margin-bottom: 10px; margin-left: 0px; } #plan-shopping-list div.panel p.intro-text { margin-left: 28px; } #plan-shopping-list div.panel ol#intro-options li { padding-left: 150px; height: 65px; line-height: 65px; } #plan-shopping-list div.panel ol#intro-options li.i { background: #fff url(../images/personalplan/shopping-intro-1.jpg) no-repeat left center; } #plan-shopping-list div.panel ol#intro-options li.ii { background: #fff url(../images/personalplan/shopping-intro-2.jpg) no-repeat left center; } #plan-shopping-list div.panel ol#intro-options li.iii { background: #fff url(../images/personalplan/shopping-intro-3.jpg) no-repeat left center; } #plan-shopping-list div.panel #btn-container { width: 580px; margin: 0; padding: 0; clear: left; } #plan-shopping-list div.panel #btn-container a, #plan-shopping-list div.panel #btn-container input { float: right; margin: 10px 0 10px 10px; } #plan-shopping-list div.panel #btn-container .prev { float: left; } #plan-shopping-list div.panel ul#question { float: left; clear: both; width: 559px; margin-left: 18px; margin-bottom: 0px; } #plan-shopping-list div.panel ul#question li { float: left; clear: both; width: 559px; height: 31px; background: #fff url(../images/personalplan/question_off.gif) no-repeat 0px 0px; margin-bottom: 5px; cursor: pointer; } #plan-shopping-list div.panel ul#question li.on { background: #fff url(../images/personalplan/question_on.gif) no-repeat 0px 0px; } #plan-shopping-list div.panel ul#question li p { color:#06599f; float: left; clear: both; line-height:31px; } #plan-shopping-list div.panel ul#question li.on p { color: #fff; } #plan-shopping-list div.panel ul#question li p label { display:block;float:left;width:510px;padding-left: 10px;cursor:pointer; } #plan-shopping-list div.panel ul#question li p input { } #plan-shopping-list div.panel ul#question li p span { display:block;float:right;width:31px;height:31px;background: transparent url(../images/personalplan/question_checkbox_off.gif) no-repeat center center; } #plan-shopping-list div.panel ul#question li.on p span { background: transparent url(../images/personalplan/question_checkbox_on.gif) no-repeat center center; } #plan-shopping-list div.panel ul#question li p span.checked { background: transparent url(../images/personalplan/question_checkbox_tick.gif) no-repeat center center; } #plan-shopping-list div.panel #date-options { background-color:#FFEDF1;float:left;margin-left:23px;position:relative;top:-5px;width:550px; } #plan-shopping-list div.panel #date-options div { width: 250px; float: left; padding: 10px 8px 10px 8px; } #plan-shopping-list div.panel #date-options div p { color:#06599f; margin-bottom: 5px; } #plan-shopping-list div.panel ul.choose-meals-week { position: relative; width: 559px; margin-left: 18px; clear: both; margin-bottom: 10px; } #plan-shopping-list div.panel ul.choose-meals-week .rule { margin: 0; } #plan-shopping-list div.panel a#print-me, #plan-shopping-list div.panel ul.choose-meals-week li a { color:#06599f; width: 559px; height: 31px; background: #fff url(../images/personalplan/question_arrow_off.gif) no-repeat 0px 0px; cursor: pointer; line-height: 31px; font-size: 1.4em; outline: none; position: relative; width: 559px; clear: both; display: block; } #plan-shopping-list div.panel a#print-me { margin-left: 18px; margin-bottom: 10px; } #plan-shopping-list div.panel ul.choose-meals-week li a:hover, #plan-shopping-list div.panel ul.choose-meals-week li a.on { background: #fff url(../images/personalplan/question_arrow_on.gif) no-repeat 0px 0px; color: #fff;text-decoration: none; } #plan-shopping-list div.panel a#print-me:hover { color: #fff; background-image: url(../images/personalplan/question_arrow_on_right.gif); text-decoration: none; } #plan-shopping-list div.panel ul.choose-meals-week li#tesco a span { text-indent: -9999px; display: inline-block; width: 73px; height: 31px; background: transparent url(../images/personalplan/Tesco_Norm.gif) no-repeat center center; } #plan-shopping-list div.panel ul.choose-meals-week li#tesco a:hover span, #plan-shopping-list div.panel ul.choose-meals-week li#tesco a.on span { background: transparent url(../images/personalplan/Tesco_White.gif) no-repeat center center; } #plan-shopping-list div.panel a#print-me strong, #plan-shopping-list div.panel ul.choose-meals-week li a strong { padding-left: 10px; } #plan-shopping-list div.panel ul.choose-meals-day, #plan-shopping-list div.panel div.slide-container { margin: 0 5px; width: 559px;background-color:#FFE7EA; padding:0; width: 552px; position:relative;} #plan-shopping-list div.panel ul.choose-meals-week li div.slide-container a { width: auto; margin: 0; background-image: none; background-color: transparent; } #plan-shopping-list div.panel p#email-list { position: relative; background-color: transparent; background-image: none; padding: 20px 10px } #plan-shopping-list div.panel p#email-list input.btn-send { position: relative; top: 5px; left: 10px; margin-right: 20px; } #plan-shopping-list div.panel ul.choose-meals-day li p { position: relative; background-color:#FFE7EA; background-image: none; clear: both; color:#06599f; font-size: 1.4em; width: 552px; cursor:auto; height:31px; line-height:31px; margin:0; } #plan-shopping-list div.panel ul.choose-meals-day li p strong { font-size: 120%; padding-left: 10px; padding-right: 5px; } #plan-shopping-list div.panel ul.choose-meals-day li p a { background:none repeat scroll 0 0 transparent;clear:none;display:inline;float:right;font-size:80%;height:auto;margin-right:8px;width:auto; position: absolute; right: 0px; top: 0px; } #plan-shopping-list div.panel ul.choose-meals-day li p a:hover { background:none repeat scroll 0 0 transparent; color: #06599F; } #plan-shopping-list div.panel ul.sl-items { width:100%; margin: 0; } #plan-shopping-list div.panel ul.sl-items li { height: 24px; margin: 0; padding: 0; } #plan-shopping-list div.panel ul.sl-items li p { clear:both; height: 24px; line-height: 2em; font-size: 1.2em; margin: 0; padding: 4px 0; background-image: none; width: 552px; background-color:#FFE7EA; } #plan-shopping-list div.panel ul.sl-items li.on p { background-color: #FEF4F5; background-image: none; } #plan-shopping-list div.panel ul.sl-items li p input { float: right; margin: 6px 8px; } #plan-shopping-list div.panel ul.sl-items li p span { display:block;float:right;width:2em;height:2em;background: transparent url(../images/personalplan/Sml_Tick_Off.gif) no-repeat center center; cursor:pointer; } #plan-shopping-list div.panel ul.sl-items li p span.checked { background: transparent url(../images/personalplan/Sml_Tick_On.gif) no-repeat center center; } #plan-shopping-list div.panel ul.sl-items li p label { color:#06599f; float: left; display: block;padding-left: 10px;cursor:pointer; width: 500px; line-height: 2em; } #plan-shopping-list p.no-meals { width: 575px; text-align: right; margin: 0; padding: 0; } #plan-shopping-list p.no-meals span { margin: 8px 0; } #plan-shopping-list span.email-confirmation { display: block; color:#06599f; min-height: 18px; width: 515px; } #plan-shopping-list div.panel #tesco-login { padding:10px 270px 10px 10px; min-height:180px; height:auto !important; height:180px; } #plan-shopping-list div.panel #tesco-login input.text { width: 250px; } #plan-shopping-list div.panel #tesco-register { border-left:1px solid #DEDEDE;height:180px;padding:0 10px;position:absolute;right:0;top:10px;width:245px; } #plan-shopping-list div.panel .btn-tesco { float: right; display: block; margin: 10px; float: right; } #plan-shopping-list div.panel #tesco-register a.btn-tesco:hover { background-image: none; } #plan-shopping-list div.panel ul.choose-meals-week > li#tesco p span.error { background-image: none; } #plan-shopping-list div.panel #tesco-loading { height: 180px; background: transparent url(../images/personalplan/loadingbar.gif) no-repeat center center; display: none; } #plan-shopping-list div.panel #tesco-loading p { background-color:transparent;background-image:none;color:#666666;font-size:1.1em;line-height:1.3em;margin:0 auto;padding-top:25px;text-align:center;width:250px; } #plan-shopping-list div.panel #tesco-login p, #plan-shopping-list div.panel #tesco-register p { position: relative; background-color: transparent; background-image: none; font-size: 1.1em; line-height: normal; width: auto; height: auto; margin-top: 10px; clear: right; color: #666; } #plan-shopping-list div.panel #tesco-login p label, #plan-shopping-list div.panel #tesco-register p label { color:#06599F; } #plan-shopping-list div.panel #tesco-login p.login-error { color: #ee2b4e; } #plan-shopping-list div.panel #tesco-register p.tesco-title { padding: 0; margin: 0; color:#06599F; } #plan-shopping-list div.panel #tesco-register p.tesco-title strong { line-height: 30px; font-size: 1.4em; margin: 0; padding: 0; } #plan-shopping-list #planner-head-intro span { position:absolute;right: 5px;top: 20px; font-size: 1.2em; color: #06599f; } #plan-shopping-list div.inner{ width:100%; float:left; } #plan-shopping-list div.shopping-panel{ border:3px solid #ffc1cb;border-width:3px 2px; } #plan-shopping-list div.shopping-panel p{ margin:10px; } #plan-shopping-list #custom-open-inner span.error {float: left; clear: both; width: 630px; display: inline; color: #ee2b4e; margin: 0 0 12px 15px;} #plan-shopping-list ul.list-control-meal {float:right;} #plan-shopping-list ul.list-control-meal li{ float:left;padding:10px;} #plan-shopping-list ul.list-control {float:right; margin: 10px 0;height:24px;line-height:24px;} #plan-shopping-list ul.list-control li{ float:left;margin-left:3px;} #plan-shopping-list ul.list-control li.buy-list{ padding:3px 15px 0; } #plan-shopping-list ul.list-control li.right-col{ border-left:1px solid #CCC;margin-left:6px;padding:0 3px;} #plan-shopping-list ul.list-control a.print-icon-white{ display:block; width:24px; height:24px; text-indent:-9999px; background: url(../images/personalplan/icon_print_on_white.gif) no-repeat center 50%; } div.shopping-panel h2.shopping-list { float: left; } div.shopping-panel div.table-wrap{ padding:1px 1px 30px 1px; } div.shopping-panel table{ padding-bottom:1px; border-bottom:1px solid #dedede; } div.shopping-panel table tr.header{background:none; } div.shopping-panel table tr.header th{background:none; border-bottom:2px solid #dedede;} div.shopping-panel table tr th.ingredientName { width:30%; } div.shopping-panel table tr th.ingredientQuantity { width:30%; } div.shopping-panel table tr th.ingredientRecipesUsed { width:20%; } div.shopping-panel table tr th.remove, div.shopping-panel table tr td.remove{ text-align: center;width:20%; vertical-align: top; } div.shopping-panel table tr td.remove a{text-indent:-9999px; display:block; height:10px; background: url(../images/personalplan/icon_cross.gif) no-repeat center;} div.shopping-panel table tr td { font-size: 1.2em; color:#00559d; } div.shopping-panel table tr td.ingredientName { width:30%; } div.shopping-panel table tr td.ingredientQuantity { width:30%; } div.shopping-panel table tr td.ingredientRecipesUsed { width:20%; } div.shopping-panel table tr td p {font-size: 0.9em;} div.shopping-panel table img {float:left;display:inline; margin:0 0 0 30px;} div.shopping-panel table .shoppListMealDetail {float:left; display:inline; width: 100%;} .shoppListMealDetail ul {color:#666; line-height:1.2em} #plan-shopping-list div.shopping-panel .shoppListMealDetail p {margin:5px 0 5px 0; font-size:0.9em; margin-bottom: 12px;} div.shopping-panel table tr th.qty, div.shopping-panel table tr td.qty{ text-align: center;width:50px; } div.shopping-panel table tr td.qty input{ width:44px;padding:2px; border:1px solid #dedede; } div.shopping-panel table tr th.cost, div.shopping-panel table tr td.cost{ text-align: center;width:15%; } div.shopping-panel div.totals{ font-size:2.4em; font-weight:bold; color:#00559d;text-align:right; line-height:1.4em;padding:0 30px 10px 0;} div.shopping-panel div.totals span{ color:#666; font-weight:normal;padding-right:10px;font-size:0.75em; } div.shopping-panel div#meals table tr {border-bottom: 10px solid #f5f5f5;} div.shopping-panel div#meals table tr td {background: #fff; padding: 12px 6px;} div.shopping-panel div#meals table tr td h3 a{color: #666; font-family: Arial, Helvetica, Verdana, sans-serif; font-weight: bold; font-size: 1em; } div.shopping-panel div#meals table tr td .shoppListMealDetail ul {float: left!important; margin-bottom: 0; font-size: 0.909090909091em;} div.shopping-panel div#meals table tr td .shoppListMealDetail img {float: right!important;} /* div.shopping-panel div.pnlTescoLogin, div.shopping-panel div.pnlTescoLogin * {border: 1px solid lime;}*/ div.shopping-panel div.pnlTescoLogin {width:337px;float:right;background:#E8F0F9;color:#666666;font-family:Arial,Helvetica,Verdana,sans-serif;font-size:1.4em;padding:10px; margin-right: 10px!important; display: inline;} div.shopping-panel div.pnlTescoLogin div {margin-bottom: 2px;} div.shopping-panel div.pnlTescoLogin label {font-size: 0.85714em; width: 90px; margin-right: 5px; float: left; padding: 3px 0;} div.shopping-panel div.pnlTescoLogin input.text {border: 1px solid #e4e4e4; width: 153px; padding: 3px;} div.shopping-panel div.pnlInfo {float:left;width:260px;padding:10px;} /* =7.x PERSONAL FOOD DIARY */ #plan-food-diary div.panels {border: 1px solid #ffc1cb; float: left; width: 100%; } /* This allows for the 1px stroke around the panels */ #plan-food-diary div.panel{background:#FFFFFF;clear:both;float:left;width:100%;} #plan-food-diary div.panel h2{ font-size: 1.8em; font-weight: bold; background:none; float:left; font-family: Arial, Helvetica, Verdana, sans-serif;color:#00559d;padding: 10px 0 15px 15px;} #plan-food-diary div.panel h2 span{ font-weight:normal; } #plan-food-diary div.inner-panels{ border-bottom:2px solid #dedede;float:left;clear:left; width:100%;} #plan-food-diary div.change-dates{ font-size:1.4em; float:left; padding:7px 15px; line-height:1.7em; color:#00559d; } #plan-food-diary div.change-dates a{ padding:0 10px 0 30px; background: url(../images/personalplan/icon_changedate.gif) no-repeat; color:#ee2b4e; font-weight:bold;display:block;float:left; min-height:24px; height:auto !important; height:24px;} #plan-food-diary ul.pagination{ padding:7px 0;float:right; } #plan-food-diary ul.pagination li{ padding:0 8px; float:left; font-size:1.2em; line-height:1.4em; } #plan-food-diary ul.pagination li.selected a{ text-decoration:underline; } #plan-food-diary div.panel h3{ background:#d1e1f3;color:#666666;font-family:Arial,Helvetica,Verdana,sans-serif;font-size:1.4em;font-weight:bold;padding:8px 15px;clear:left;position:relative;} #plan-food-diary ul.day-plan-food{ border-bottom:1px solid #dedede;float:left; width:100%; } #plan-food-diary ul.day-plan-food li{ float:left; width: 100%; clear:left;line-height:130%;position:relative; } #plan-food-diary ul.day-plan-food li div.meal {} #plan-food-diary ul.day-plan-food li div.meal h3 {display: none;} #plan-food-diary ul.day-plan-food li.snack{ background: #e8f0f9; } #plan-food-diary ul.day-plan-food li div.meal{ float:left;display:block; padding:8px 0 8px 15px;font-size:1.4em;width:637px;} #plan-food-diary ul.day-plan-food li div.meal span{ display:block; width:100px; float:left;color:#666;padding-left: 20px;} #plan-food-diary ul.day-plan-food li.breakfast div.meal span{ background:url(../images/personalplan/meals_breakfast_icon.gif) no-repeat 0 50%; } #plan-food-diary ul.day-plan-food li.lunch div.meal span{ background:url(../images/personalplan/meals_lunch_icon.gif) no-repeat 0 50%; } #plan-food-diary ul.day-plan-food li.dinner div.meal span{ background:url(../images/personalplan/meals_dinner_icon.gif) no-repeat 0 50%; } #plan-food-diary ul.day-plan-food li div.meal h4, #plan-food-diary ul.day-plan-food li div.meal div.meal-edit{ float:left;font-family: Arial, Verdana, sans-serif; color:#00559d; width:285px;padding-left:20px; background:url(../images/personalplan/icon_write_grey.gif) no-repeat ;} #plan-food-diary ul.day-plan-food li div.meal div.meal-edit{font-size:0.8em;background:url(../images/personalplan/icon_write.gif) no-repeat ;} #plan-food-diary ul.day-plan-food li div.meal div.meal-edit input.text{float:left; width:200px; border:1px solid #dedede; margin-right:5px;padding:4px; color:#666; } #plan-food-diary a.button-red-arrowr{ font-weight:normal; } #plan-food-diary ul.day-plan-food li div.meal div.meal-edit a.button-red-arrowr span{background:transparent url(../images/global/btn-redwhitear-right-sml.gif) no-repeat right 0;display:block;float:left;height:18px;position:absolute;right:-15px;top:0;width:15px;padding-left:0;} #plan-food-diary ul.day-plan-food li div.meal div.meal-edit label { display:none; } #plan-food-diary div.sub-plan{ float:left; padding:15px; width: 622px; clear:both;} #plan-food-diary #content div.sub-plan p{ font-size:1.4em;} #plan-food-diary div.sub-plan textarea{ width:350px; height:25px; padding:5px; border: 1px solid #dedede;float:left; margin-right:10px;font-family:Arial,Helvetica,Verdana,sans-serif;font-size:1.2em;color:#00559d; } #plan-food-diary ul.day-plan-food li div.meal h4, #plan-food-diary ul.day-plan-food li div.meal div.meal-edit {font-size: 1em; background-image: none; } #plan-food-diary ul.day-plan-food li div.meal h4 {line-height: 20px; } #plan-food-diary ul.day-plan-food li div.meal h4.tick { background-image:url(../images/personalplan/green-tick.gif); } #plan-food-diary ul.day-plan-food li div.meal h4.cross { background-image:url(../images/personalplan/red-cross.gif); } div.meal input { margin-left: 20px; width: 250px; color: #666; } #plan-food-diary div.panel h3 span.ate-this { top:5px; width:100px; text-align:center;font-weight:normal; font-size: 0.75em; position:absolute; right:15px; } #plan-food-diary ul.day-plan-food li div.ate-this { width:100px; font-size: 1.1em; color: #666; text-align:center; position:absolute; right:15px; top:8px; } #plan-food-diary ul.day-plan-food li div.ate-this label { margin-left: 3px; } #addthis {position:absolute; top:-20px; right:-5px; line-height:16px;} #plan-recipe #addthis {position:absolute; top:20px!important; right:15px; line-height:16px;} #addthis a {color:#666666;} /* =7.x BMI CALCULATOR */ #bmi-calculator h3 {font-weight: bold; font-size: 1.4em; line-height: 18px; margin-bottom: 4px; font-family: Arial, Helvetica, Verdana, sans-serif; color: #666;} #bmi-calculator input {color: #666; border: 1px solid #ccc; padding: 1px;} #bmi-calculator div.switch {margin-bottom: 18px;} /* =7.x END OF PLAN SURVEY */ #content div.survey_questions h3{ padding-left:14px;margin-bottom:14px;font-size:1.6em; color:#00559D; font-family: Arial, Helvetica, Verdana, sans-serif;float:left} #content div.survey_questions span.error { float:left; padding: 0.5em; } #content div.survey_questions p{ padding-left:52px;margin-bottom:7px;clear:left; } #content div.survey_questions label{ margin-bottom:7px; } #content div.survey_questions textarea{ margin-top:7px;width:390px; height:80px; } div.survey_questions div.btn-medium{ margin:0 0 16px 52px; } p.bmi-calculator-return {float:right; margin-right:15px;margin-top:30px;margin-bottom:30px;} /* =8. FOOTER */ #footer {width: 100%; float: left; font-size: 1em;} #footer * {float: left; color: #999;} #footer p {margin-bottom: 15px;} #footer p, #footer ul li a {margin-right: 12px;} /* =9. SITEMAP */ #sitemap ul li a {background: transparent url(../images/global/rule.gif) repeat-x scroll center bottom; color:#00559D; display:block; font-family:Times New Roman; font-size:2.1em; padding:10px 0 10px 0; margin:0 0 10px 0;} #sitemap ul li li a {background: transparent none repeat scroll 0 0; font-family:arial; font-size:1.4em; padding:5px 0 5px 0; margin:0 0 0 0;} #sitemap ul li li li a {color:#666; font-size:1.2em; padding:0 0 5px 10px; margin:0 0 0 0;} /* =10 SEARCH RESULTS */ .search-result-results a {font-size:1.2em;} .search-result-results span {color:#EE2B4E;} .search-result-results dt {margin:0 0 5px 0;} .search-result-results dd {margin:0 0 15px 0;} #content .search-result-results p {margin:0 0 0px 0; padding:0 0 0px 0;} #content .search-result-results p.path {font-size:1.1em; color:#999;} .search-result-head {background:transparent url(../images/global/rule.gif) repeat-x scroll 0 bottom; padding:0 0 5px 0; margin:0 0 20px 0;width:100%; } #content p.term {font-size:2em; margin:20px 0 14px 0;} .searchbox .text{font-size:1.2em; color:#00559D;} div#primary.sitemap-recipe div.panels div.panel div.inner h2 {color: #00a4e1; font-size: 3.6em!important;} div#primary.sitemap-recipe div.panels div.panel div.inner div.recipe-upper ul{padding:0 0 0 15px;} div#primary.sitemap-recipe div.panels div.panel div.inner div.recipe-upper ul li{ font-size:1.2em; line-height:1.4em;color:#666; list-style: disc outside; } div#primary.sitemap-recipe div.panels div.panel div.inner div.recipe-left{width:315px; float:left;} div#primary.sitemap-recipe div.panels div.panel div.inner div.recipe-right{width:275px; float:right;} div#primary.sitemap-recipe div.panels div.panel div.inner div.recipe-lower{ clear:both;float:left; padding-top:10px; } div#primary.sitemap-recipe div.panels div.panel div.inner div.recipe-right div.rating p{float:left;} div#primary.sitemap-recipe div.panels div.panel div.inner div.recipe-right div.rating p span{display:block; float:left;line-height:17px;padding:0 5px;} div#primary.sitemap-recipe div.panels div.panel div.inner div.recipe-right div.rating{ margin:10px 0; } .pager{font-size:0.85em;} .pager a.next {margin: auto 10px auto 7px;} .pager .thecount {margin-right: 3px;} .pager span.thecount { font-weight: bold; color: #EE2B4E; } .pager a.prev {margin: auto 10px;} /* BRANDBOOK */ td.bb-asset-thumb /* =11 SURVEY */ #sliding_popup {position:fixed !important; position: absolute; z-index: 9999;} #sliding_popup div.popup-top {float: left; width: 100%; padding: 18px 0; background: #ffe5e9 url(../images/global/popup/top_bg2.gif) repeat-x left bottom;} #sliding_popup div.popup-top div.inner, #sliding_popup div.popup-bottom div.inner {width: 937px; margin: auto; position: relative;} #sliding_popup div.popup-top div.inner div.left, #sliding_popup div.popup-bottom div.inner div.left {width: 670px; float: left;} #sliding_popup div.popup-top div.inner div.left {background: url(../images/global/popup/top_icon.gif) no-repeat 0 50%; padding-left: 50px;} #sliding_popup div.popup-top input.input-image {position: absolute; right: 50px; top: 20px;} #sliding_popup div.popup-top a {color: #ee2b4e;} #sliding_popup div.popup-top a.close {position: absolute; top: 5px; right: 0; display: block; width: 28px; height: 28px; background: url(/assets/images/global/popup/button_close.gif) no-repeat; text-indent: -9999px;} #sliding_popup div.popup-top h1 {font-size: 2.2em; margin-bottom: 5px; padding: 0;} #sliding_popup div.popup-top p {color: #00428b; font-size: 1.4em; font-family: Times, "Times New Roman", Georgia, serif; margin-bottom: 0; line-height: 16px;} #sliding_popup div.popup-bottom {float: left; width: 100%; position: relative; padding: 0 0 0 0; background: #fff url(../images/global/popup/bottom_bg.gif) repeat-x 0 -18px;} #sliding_popup div.popup-bottom div.popup-bottom-gradient {position: absolute; bottom: 0; left: 0; height: 12px; width: 100%; background: url(../images/global/popup/bottom_bg.gif) repeat-x;} #sliding_popup div.popup-bottom h2 {color: #00428b; font-size: 1.8em; line-height: 20px; margin-bottom: 14px;} #sliding_popup div.popup-bottom p {font-size: 1.2em; line-height: 14px; margin-bottom: 14px;} #sliding_popup div.popup-bottom div.form p {margin-bottom: 6px;} #sliding_popup div.popup-bottom div.form p label {margin-left: 6px;} #sliding_popup div.popup-bottom input.input-image {position: absolute; right: 50px; top: 20px;} #sliding_popup div.popup-bottom div.inner {padding:10px 0 10px 0; overflow:hidden;} #sliding_popup .btnAnswer {position:absolute; right:80px; top:5px;} #sliding_popup2 div.popup-top div.inner {width:200px;} #sliding_popup2 div.popup-top {color: #00559d; font-size: 14px; font-family: Arial; float: left; background: #ffffff; margin:10px; height:200px;} #sliding_popup2 div.popup-top a.close {position: absolute; top: 5px; right: 10px; display: block; width: 28px; height: 28px; background: url(/assets/images/global/popup/button_close.gif) no-repeat; text-indent: -9999px;} #sliding_popup2 div.popup-top p {color: #00559d; font-size: 14px; font-family: Arial;} #sliding_popup2 .signupReason {padding-bottom:10px;width:200px;} #sliding_popup2 .signupReason select {width:265px;} #sliding_popup2 div.improve {padding-bottom:10px;} #sliding_popup2 .improve textarea {padding-bottom:10px;width:250px;height:50px} #sliding_popup2 .popupText {width:250px;padding-bottom:10px;} .locale-fr-fr #container {background: url(../images/global/curves/wide-pink.png) no-repeat 836px 0} .home-locale-fr-fr #container {background: url(../images/global/curves/home-pink.jpg) no-repeat 551px 0;} /* SANJ TESCO LIST MESS */ div.shopping-panel div.pnlInfo {padding:0 10px;} div.shopping-panel div.pnlInfo a {color:#EE2B4E;} div.shopping-panel div.pnlTescoLogin {margin:0 0 10px 0} div.shopping-panel div.pnlTescoLogin label {overflow:hidden; width:100px;} #plan-shopping-list div.shopping-panel {border:none;} #plan-shopping-list ul.list-control {margin:10px; } #plan-shopping-list ul.list-control li {margin-left:10px;} #plan-shopping-list ul.list-control li a {color:#EE2B4E; font-weight:bold; font-size:1.2em;} .tescoSignInBtn {margin:10px 0 0 105px} .tesco-logo {margin:10px;} #plan-shopping-list .panel h2.main {float:left; background:none; margin:5px 0 0 0;} #plan-shopping-list .shopping-panel .login-error p {margin:0 0 0 0; font-size:0.8em; color:#EE2B4E; margin:0 0 10px 0 ;} ul.tescoLinks {margin:10px 0 0 0} ul.tescoLinks li { margin:5px 0 0 0;} ul.tescoLinks li a {font-size:0.8em; color:#666666; background:transparent url(/assets/images/tesco/arra-red-blue.gif) no-repeat scroll 0 3px; padding-left: 8px;} a.update-list{color:#EE2B4E; float:right; margin: 0 10px 12px 0; font-size:1.2em; font-weight:bold; display: block;} #tesco-loader {width:640px; margin:30px 0 30px 0;} .loading-anim {width:66px; margin:0px auto;} .loading-msg {width:100%; text-align:center; overflow:hidden;} /*Rob mobile page hack*/ ul.mobile-promo-list { list-style: disc outside none; font-size:1.5em; color:#666666; padding-left:20px;} ul.mobile-promo-list li { padding:12px; } /*Personal Plan Home 03-Feb-2010*/ #page-personalplan-home { width:610px;float:left; } #page-personalplan-home #primary p{ font-size:1.2em; text-align:justify;} #page-personalplan-home{overflow:hidden; } #page-personalplan-home .intro, #page-personalplan-home .advert{ float:left;} #page-personalplan-home .intro{width:100%; background:url(../images/personalplan/totally_free_advert.jpg) no-repeat right top;} #page-personalplan-home .introNLNL{width:100%; background:url(../images/personalplan/totally_free_advert_nlnl.jpg) no-repeat right top;} #page-personalplan-home .introNLBE{width:100%; background:url(../images/personalplan/totally_free_advert_nlbe.jpg) no-repeat right top;} #page-personalplan-home .introFRBE{width:100%; background:url(../images/personalplan/totally_free_advert_frbe.jpg) no-repeat right top;} #page-personalplan-home #introtext{ font-size:1.4em!important;} #page-personalplan-home .text{ font-size:1.0em;} #page-personalplan-home p{ margin:0 0 0 30px; } #page-personalplan-home .advert{ width:auto; height:255px; margin:0 50px 0 15px; display:inline;} #page-personalplan-home .advert img{ float:left;} #page-personalplan-home .imgHolder, #page-personalplan-home .txtHolder{ float:left;} #page-personalplan-home .txtHolder{ width:390px; margin:5px 0 0 20px; position:relative; top:10px;} #page-personalplan-home .txtHolder p{ margin:0px;} #page-personalplan-home .txtHolder h2{ margin:0px 0 4px 0;color:#00559d; font-size:1.5em; font-family: Arial; } #page-personalplan-home .clear{ clear:both; height:1px; width:auto; overflow:hidden;} #page-personalplan-home ul{ margin-left:20px;} #personal-plan-form{width:313px; height:auto; overflow:hidden; background:url(../images/personalplan/form_rpt.jpg); float:left; position:relative; left:10px; bottom:50px;} #personal-plan-form #inner{width:280px; margin-left:17px;overflow:hidden; float:left; display:inline;} #personal-plan-form p label{ margin:0px 0 0 0; font-size:1.1em; float:left;} #personal-plan-form p input{ float:left;} #personal-plan-form h2{ font-size:2.1em;margin:50px 0 25px 0px;color:#01a4e1;} #personal-plan-form h2 span{ color:#00559d;font-size:1.4em;} #personal-plan-form .gender{ margin-top:5px 0 8px 0; float:left} #personal-plan-form small a{ color:#928f90; float:left;} #personal-plan-form label { color:#858384;} #personal-plan-form small a {color:#858384;font-size:1.0em; width:100%;float:left} #personal-plan-form small a:hover{ color:#858384; text-decoration:none;} #personal-plan-form input.text { width:270px; height:14px; float:left; margin:4px 0px 14px 0px;} #personal-plan-form .sex { float:left; width:100%;font-size:1.2em} #personal-plan-form .sex .radio {width:100%; float:left;} #personal-plan-form .sex input {width:20px; float:left; padding:0px;} #personal-plan-form .sex label {width:30px; float:left;color:#858384; padding-top:6px;} #personal-plan-form #dob-container {color:#928f90;overflow:hidden; float:left; width:230px;height:auto; margin:15px 0 12px 0;} #personal-plan-form .button{ margin:12px 0 0px 0;} #personal-plan-form .footer{ width:313px; height:56px; float:left;background:url(../images/personalplan/form_bg_btm.jpg);} #video-container #player{ display:inline; } #personal-plan-form .labelstop { font-size:1.2em} #personal-plan-form-msn{width:313px; height:auto; overflow:hidden; background:url(../images/personalplan/form_rpt.jpg); float:left; position:relative; left:10px;} #personal-plan-form-msn #inner{width:280px; margin-left:17px;overflow:hidden; float:left; display:inline;} #personal-plan-form-msn p label{ margin:0px 0 0 0; font-size:1.1em; float:left;} #personal-plan-form-msn p input{ float:left;} #personal-plan-form-msn h2{ font-size:2.1em;margin:50px 0 25px 0px;color:#01a4e1;} #personal-plan-form-msn h2 span{ color:#00559d;font-size:1.4em;} #personal-plan-form-msn .gender{ margin-top:5px 0 8px 0; float:left} #personal-plan-form-msn small a{ color:#928f90; float:left;} #personal-plan-form-msn label { color:#858384;} #personal-plan-form-msn small a {color:#858384;font-size:1.0em; width:100%;float:left} #personal-plan-form-msn small a:hover{ color:#858384; text-decoration:none;} #personal-plan-form-msn input.text { width:270px; height:14px; float:left; margin:4px 0px 14px 0px;} #personal-plan-form-msn .sex { float:left; width:100%;font-size:1.2em} #personal-plan-form-msn .sex .radio {width:100%; float:left;} #personal-plan-form-msn .sex input {width:20px; float:left; padding:0px;} #personal-plan-form-msn .sex label {width:30px; float:left;color:#858384; padding-top:6px;} #personal-plan-form-msn #dob-container {color:#928f90;overflow:hidden; float:left; width:230px;height:auto; margin:15px 0 12px 0;} #personal-plan-form-msn .button{ margin:12px 0 0px 0;} #personal-plan-form-msn .footer{ width:313px; height:56px; float:left;background:url(../images/personalplan/form_bg_btm.jpg);} #personal-plan-form-msn .labelstop { font-size:1.2em} .taletour{ font-size:2.3em; margin: 44px 0 13px 36px; color:#00559d;} a.taletour{text-decoration:none;} .personal-plan-vid div{position:relative; right:20px; background-image:url(../images/personalplan/personal-plan-hme-vid.jpg);} .videoHolder{height:355px; width:616px;background-image:url(../images/personalplan/demovid-frame.jpg);} .videoHolder #player{ float:left; position:relative; left:18px; top:14px;} .alignradio{ position:relative; bottom:5px} .tourLink{ color:#ee2b4e;} .personal-plan-bg{background:url(../images/personalplan/form_bg_small.jpg); width:100%; height:auto;} /* Shape mate alternative 24.02.2010 */ #intro-alt .formItem {font-size:1.1em; float:left; margin-top:5px;} #intro-alt .formItemOptin {width: 100%;} #intro-alt .formItemOptin input {width:20px; float:left; overflow:hidden; display:inline;} #intro-alt .formItemOptin label {width:240px; float:left; overflow:hidden; display:inline;} #intro-alt .formItemOptin label {width:240px; float:left; overflow:hidden; display:inline;} #intro-alt .formItem span {position:relative; bottom:12px; width:100%;} #intro-alt .formItembirth {position:relative; bottom:5px; margin-top:8px;} #intro-alt .formItembirth span {font-size:0.8em; width:100%; float:left; height:auto;} #intro-alt .formItembirth span strong {font-weight:normal; color:#666666;font-size:1.5em; text-decoration:none;} #intro-alt .formItem label {font-size:1.2em;} #intro-alt .radio {display: inline;} #intro-alt .sex label {padding:0;} #intro-alt .clear {clear:both;} #intro-alt .error {clear:both;} #intro-alt small {margin:8px 0 0 0;} #intro-alt #buttonPos {position:relative; top:8px;} #intro-alt .btnholder {margin-top:10px; display:block;} #intro-alt .confirmPassword {float:left; width:100%; height:25px; margin:0px;} #intro-alt .matchPassword {float:left; width:100%; height:10px; position:relative; margin-top:0px;} #intro-alt .dobLabel {font-size:1.4em!important; float:left;} #intro-alt .genderheight {height:65px;} #intro-alt .formItembirth {float:left; width:auto;width:100%;} #intro-alt small a {float: left; padding-right: 6px; background: url(../images/global/arrow_red_pink_small.gif) no-repeat right 50%; width:auto; margin:10px 0 5px -3px;} #intro-alt .formItem span label {margin:0 10px 0 4px;} .narrow #intro-alt {color: #666;} .narrow #intro-alt .formItem {font-size:1.1em; float:left; margin-top:5px;} .narrow #intro-alt .formItemOptin {width: 100%;} .narrow #intro-alt .formItemOptin input {width:20px; float:left; overflow:hidden; display:inline;} .narrow #intro-alt .formItemOptin label {width:240px; float:left; overflow:hidden; display:inline;} .narrow #intro-alt .formItem span {position:relative; bottom:12px; width:100%;} .narrow #intro-alt .formItembirth {position:relative; bottom:5px; margin-top:8px;} .narrow #intro-alt .formItembirth span {font-size:0.8em; width:100%; float:left; height:auto;} .narrow #intro-alt .formItembirth span strong {font-weight:normal; color:#666666;font-size:1.5em; text-decoration:none;} .narrow #intro-alt .formItem label {font-size:1.2em; float: left; width: 120px; clear: none;} .narrow #intro-alt .formItem input {float: left; clear: right;} .narrow #intro-alt .formItem span {float: left; clear: both; display: block; padding: 0; top: 0!important; left: 120px; width: 200px; margin: 3px 0 0 0;} .narrow #intro-alt .formItembirth div span.error {margin: 3px 0 0 120px; font-size: 1.1em;} .narrow #intro-alt .radio {margin-left: 120px; display: block; float: left; top: 0; left: 0;} .narrow #intro-alt .radio label {padding:0; margin: 0; float: auto; clear: none; width: 30px!important;} .narrow #intro-alt .radio div {margin-left: 0!important;} .narrow #intro-alt .genderheight {height:auto;} .narrow #intro-alt .clear {clear:both;} .narrow #intro-alt .error {clear:both;} .narrow #intro-alt small {margin:8px 0 0 0;} .narrow #intro-alt #buttonPos {position:relative; top:8px;} .narrow #intro-alt .btnholder {margin-top:10px; display:block;} .narrow #intro-alt .confirmPassword {float:left; width:100%; height:auto; margin:0px;} .narrow #intro-alt .matchPassword {float:left; width:100%; height: auto; position:relative; margin-top:0px;} .narrow #intro-alt .dobLabel {font-size:1.4em!important; float:left;} .narrow #intro-alt .genderheight {} .narrow #intro-alt .formItembirth {float:left; width:auto;width:100%;} .narrow #intro-alt small a {float: left; padding-right: 6px; background: url(../images/global/arrow_red_pink_small.gif) no-repeat right 50%; width:auto; margin:10px 0 5px -3px;} .narrow #intro-alt .formItem span label {margin:0 10px 0 4px;} #intro .why-link {float: left; margin: 25px 0 15px 0; } #supporting-text {width:250px; margin:-323px 0 20px 415px; } #supporting-text h2 {margin:0 0 7px 0;} /*-----RED DRESS-----*/ .hidetext {display: block;text-indent: -9999em;overflow: hidden;} .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix { display: inline-block;} /* Hides from IE-mac OLD SKOOL!\*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /*-----LAYOUT-----*/ #dress-content{background:url(../images/dress/bg-dress2.jpg) top right no-repeat; clear:both; width:927px; border-right:10px solid #FFF; } #dress-text{float:left; width:380px; margin-left:20px;} #dress-img{float:right; width:504px; position:relative;} #dress-vids{clear:both; background:url(../images/dress/hr.gif) top left repeat-x; padding:25px 0 85px; width:878px; margin-top:30px; } #dress-flash{width:307px; height:427px; z-index:1; position:absolute; top:0; right:0;} #dress-flash-alt{ background:url(../images/dress/flash-dress.jpg); height:427px; width:307px; } #dress-thumb{z-index:100; position:absolute; top:87px; left:5px; width:199px;} .dressbox{border:1px solid #e1e1e1; width:190px; background:#FFF; margin-bottom:10px;} .dressbox a:hover img{ -moz-opacity:.70; filter:alpha(opacity=70); opacity:.70; } .dressbox-inner{padding:3px;} .dressbox-caption{padding:10px 5px;} /*-----END LAYOUT-----*/ /*-----IMG REPLACEMENT-----*/ h1.dress-title{background:url(../images/dress/title-dress.gif); width:380px; height:146px; padding:0; margin:0;} a.buy-dress{ background:url(../images/dress/bttn-buy.gif); width:222px; height:26px; display:block; cursor:pointer; margin-bottom:27px;} a.enter-comp{ background:url(../images/dress/bttn-comp.gif); width:184px; height:26px; display:block; cursor:pointer;} /*-----END IMG REPLACEMEN-----*/ /*-----TEXT-----*/ #content p.text-intro{font-size:1.4em; line-height:1.3; width:365px; margin-bottom:20px;} #content p.text-body, #content p.text-win, #content p.noflash{margin-bottom:25px; line-height:1.25;} #content p.text-body{ width:380px;} #content p.text-win{width:350px;} #content p.noflash{width:auto; margin-top:17px;} #content p.noflash span{font-weight:bold; font-size:1.45em; color:#00559D;} h2.dress-sub{ color:#00559d; font-size:21px; margin-bottom:7px;} #dress-vids h2.dress-sub{margin-bottom:0;} .dressbox a{color:#ee0a39; font-size:1.1em; line-height:1.1;} a.magnify{background:url(../images/dress/bg-takealook.gif) top left no-repeat; padding:2px 0 0 18px; height:13px; display:block; cursor:pointer;} .arrow{background:url(../images/dress/arrow.gif) bottom left no-repeat; width:9px; height:8px; display:inline-block;} /*-----END TEXT-----*/ /*-----MISC-----*/ .hr-narrow{ background:url(../images/dress/hr.gif) top left repeat-x; width:380px; height:27px;} /*-----END MISC-----*/ /*-----LAYOUT-----*/ #dressimg-content{background:url(../images/dress/bg-dress-image.jpg) top right no-repeat; clear:both; width:927px; border-right:10px solid #FFF; margin-bottom:60px;} #bigimg{margin:89px 0 60px 150px;} /*-----END LAYOUT-----*/ /*-----IMG REPLACEMENT-----*/ a.buycomp{ background:url(../images/dress/bttn-buycomp.gif); width:384px; height:26px; margin-left:307px;} /*-----END IMG REPLACEMEN-----*/ /* MSN */ #msn-content #msn-top {width: 930px; min-height: 620px; height: auto!important; height: 620px; background: url(../images/msn/background.jpg) no-repeat; margin-top: -10px;} #msn-content #msn-top h1 {display: none;} #msn-content #msn-top p {width: 464px; padding-top: 137px; margin-left: 19px; font-size: 1.4em; line-height: 17px;z-index: 9999; position: relative;} #msn-content #msn-top #msn-intro {width: 549px; min-height: 191px; height: auto!important; height: 191px; background: url(../images/msn/intro.jpg); margin: -24px 0 20px 5px; z-index: 9990; padding-left: 15px;} #msn-content #msn-top #msn-intro h2 {color: #00559d; font-size: 2.2em; padding-top: 42px; margin: 0 0 10px 0; float: left; clear: both;} #msn-content #msn-top #msn-intro p {padding: 0; width: 340px; margin-left: 0; float: left; clear: both;} #msn-content #msn-top #msn-intro a.button-arrow-white {margin-left: 0; float: left; clear: both;} #msn-content #msn-top ul {margin-left: 15px;} #msn-content #msn-top ul li {width: 186px; float: left; padding: 80px 10px 10px 10px;} #msn-content #msn-top ul li h3 {font-size: 2em; line-height: 22px; margin-bottom: 10px; color: #00559d;} #msn-content #msn-top ul li h3 a {color: #00559d; display: block;} #msn-content #msn-top ul li h3 a span {background: url(../images/global/arrow_red_small.gif) no-repeat scroll 0 3px transparent; display: none; width: 10px; height: 10px; vertical-align: baseline;} #msn-content #msn-top ul li p {padding: 0; width: auto; margin: 0; font-size: 1.1em; line-height: 13px;} #msn-content #msn-top ul li.msn-pod-1 {background: url(../images/msn/pod_1.gif) no-repeat;} #msn-content #msn-top ul li.msn-pod-2 {background: url(../images/msn/pod_2.gif) no-repeat;} #msn-content #msn-top ul li.msn-pod-3 {background: url(../images/msn/pod_3.gif) no-repeat;} #msn-content #msn-top ul li.msn-pod-1 h3 a {background: url(../images/msn/pod_1_text.gif) no-repeat; width: 160px; height: 34px; text-indent: -99999px;} #msn-content #msn-top ul li.msn-pod-2 h3 a {background: url(../images/msn/pod_2_text.gif) no-repeat; width: 181px; height: 38px; text-indent: -99999px;} #msn-content #msn-top ul li.msn-pod-3 h3 a {background: url(../images/msn/pod_3_text.gif) no-repeat; width: 177px; height: 15px; text-indent: -99999px;} #msn-content #msn-bottom {width: 830px; margin: 30px 0 0 15px;} #msn-content #msn-bottom div.text {width: 530px; padding-top: 20px; float: left;} #msn-content #msn-bottom h2 {color: #00559d; font-size: 2.2em; margin-bottom: 22px;} #msn-content #msn-bottom li {padding-bottom: 30px; float: left; width: 830px; clear: both;} #msn-content #msn-bottom li.sec-1 {background: url(../images/msn/bg_1.jpg) 569px 0 no-repeat; } #msn-content #msn-bottom li.sec-2 {background: url(../images/msn/bg_2.jpg) 569px 0 no-repeat;} #msn-content #msn-bottom li.sec-3 {background: url(../images/msn/bg_3.jpg) 569px 0 no-repeat; min-height: 440px; height: auto!important; height: 440px;} #msn-content #msn-bottom li ul {margin-bottom: 14px;} #msn-content #msn-bottom li li {float: none; } #msn-content #msn-bottom li li, #msn-content #msn-bottom li p.small {font-size: 1.2em; line-height: 14px; color: #666; list-style-type: disc; margin: 0 0 3px 1.5em; padding: 0;} #msn-content #msn-bottom li p.small {margin-left: 0;} #msn-content #msn-bottom p {} #msn-content #msn-bottom p.intro, #msn-content #msn-bottom h3 {font-size: 1.4em; line-height: 16px; margin-bottom: 16px;} #msn-content #msn-bottom h3 {margin-bottom: 3px; font-family: Arial, Verdana, sans-serif; color: #666;} /* BRAND BOOK DOWNLOAD AREA */ li.ml-folder { list-style-type: none; } li.ml-folder h1 { font-size: 1.6em; padding-left: 0px; margin-bottom: 10px; } .narrow #content li.ml-folder ul { margin: 0 0 15px 30px } li.ml-file a { color:#666666; font-size:0.8em; } .lblSpkConsumption { height:30px; width:310px; float:left; clear:right; }