/* Virgin FREEIP April 2010 Built for Virgin Unite by Applecado LTD http://www.applecado.co.uk/ */ body { margin:0px; background:#fff url(/images/stripes.gif) top left repeat; font-size:1em; font-family:arial, helvetica, sans-serif; color:#7d7d7d; padding: 0px 0px 20px 0px;} em { color:#d1d1d1; font-weight:normal; font-style:normal; } a { color:#c80c24; text-decoration:none; } a:hover { color:#fff; text-decoration:none; } p { margin:15px 0px 20px 0px; padding:0px; font-size:0.8em; line-height:1.5em; /* text-align:justify;*/ color:#7d7d7d; } p.large { font-size:0.95em; } p.date { color:#4d4d4d; padding:0px; margin:0px; } p.tiny { font-size:0.6em; color:#4d4d4d; padding:0px; margin:-15px 0px 0px 0px; } img { border:0px; } h1 { margin:0px; padding:0px; font-size:1.9em; color:#c80c24; font-weight:normal; } h2 { margin:20px 0px 0px 0px; padding:0px; font-size:1.1em; color:#fff; font-weight:normal; } h3 { margin:0px 0px 10px 0px; padding:0px; font-size:1em; color:#fff; font-weight:normal; position:relative; } h4 { margin:0px; padding:0px; font-size:0.9em; color:#c80c24; font-weight:normal; } h2 span { font-size:0.9em; } h3 span { font-size:0.9em; } h3 span.signup { position:absolute; top:2px; right:30px; } h3 a { color:#fff; } h3 a:hover { color:#c80c24; } h3 span a { color:#c80c24; } h3 span a:hover { color:#fff; } ul, ol { margin:0px; padding:0px; list-style:none; } ul li, ol li { margin:0px; padding:0px; line-height:1.5em; } hr { display:none; } /* useful classes */ .hr { background:url(/images/hr.gif) top center no-repeat; width:100%; overflow:hidden; height:3px; padding:0px 0px 10px 0px; margin:10px 0px 20px 0px; } .hr.shallow { padding:0px 0px 0px 0px; margin:0px; } p.shallow { margin-bottom:5px; } .margined20 { margin-top:20px; margin-bottom:20px; display:block; } .no-bottom-margin { margin-bottom:0px; } a.huge { font-size:1.9em; text-decoration:none; } a.medium { font-size:1.5em; text-decoration:none; } .gradient { font-style:italic; color:#c80c24; } a.gradient:hover { color:#fff; } .tag { color:#c80c24; } .grey { color:#7d7d7d; } .left { float:left; } .right { float:right; } span.white { color:#fff; } a.white { color:#fff; } a.white:hover { color:#c80c24; } span.caption { font-size:0.85em; color:#fff; } .tright { text-align:right; } .tcenter { text-align:center; } a.small { font-style:italic; font-size:0.9em; } a.share { display:block; width:78px; height:23px; overflow:hidden; background:url(/images/button-share.png) top left no-repeat; outline:none; } a.share:hover { background-position:bottom left; } a.share span { display:none; } /* ok, on with the CSS fun for the rest of the site. */ .full-width-wrapper { width:100%; overflow:hidden; float:left; margin:0px; padding:0px; background-position:top center; background-repeat:no-repeat; } .wrapper-inner { width:960px; overflow:hidden; margin: 0 auto; } #header { background-image:url(/images/header-gradient.png); height:50px; } #footer { background-image:url(/images/footer-gradient.png); height:110px; } #main { background-image:url(/images/main-bg.png); background-repeat:repeat-y; } #main-bottom { background-image:url(/images/main-bot-bg.png); height:10px; } #header .header-nav { list-style:none; overflow:hidden; width:300px; padding:0px; margin:15px 0px 0px 10px; } #header .header-nav li { float:left; font-size:0.7em; background:url(/images/header-nav-bg.png) 2px 0px no-repeat; padding-left:10px; padding-right:4px; margin:0px; } #header .header-nav li.first { background:none; } #header .header-nav li a { color:#000; text-transform:uppercase; text-decoration:none; } #header .header-nav li a:hover { color:#fff; } #header .header-nav li a.white { color:#fff; text-transform:uppercase; text-decoration:none; } #header .header-nav li a.white:hover { color:#000; } #header .search { list-style:none; overflow:hidden; width:320px; padding:0px; margin:0px; } #header .search ul { list-style:none; overflow:hidden; width:100%; padding:0px; margin:7px 0px 0px 0px; } #header .search ul li { display:block; float:left; margin:0px; } #header .search ul li.button { margin-left:-9px;} #header .search ul li input { border:0px; background:transparent url(/images/header-newsletter-bg.png) top left no-repeat; height:24px; width:202px; padding:0px 15px; text-align:right; color:#737373; outline:none; font-size:0.7em; font-style:italic; line-height: 24px; } #header .search ul li button { border:0px; background:transparent url(/images/button-header-submit.png) top left no-repeat; height:24px; width:79px; float:left; } #header .search ul li button:hover { background-position:bottom left; cursor:pointer; } #header .search ul li button span { display:none; } #header .signup-for-updates { display:block; width:188px; height:26px; margin:8px 10px 0px 0px; background-image:url(/images/button-sign-up-for-updates.png); background-position:top left; background-repeat: no-repeat; } #header .signup-for-updates:hover { background-position:bottom left; } #header .signup-for-updates span { display:none; } #footer .footer-nav { list-style:none; overflow:hidden; width:auto; height:20px; padding:0px; margin:15px 0px 5px 0px; } #footer .footer-nav li { float:left; font-size:0.7em; background:url(/images/header-nav-bg.png) 2px 0px no-repeat; padding-left:10px; padding-right:4px; margin:0px; } #footer .footer-nav li.first { background:none; } #footer .footer-nav li a { color:#000; text-transform:uppercase; text-decoration:none; } #footer .footer-nav li a:hover { color:#fff; } #footer .left { padding-left:55px; } #footer .right { padding-right:65px; text-align:right; } #footer .left .share { margin-left:10px; } #global { margin:10px 0px; float:left; } #global .wrapper-inner { width:956px; background:white; border:1px solid #aaa; } #global p { margin:0px; padding:15px; font-size:0.65em; color:#aaa; } #global a:hover { color:black; } #main { overflow:visible; } #main .wrapper-inner { overflow:visible; } #main .page-inner { width:830px; overflow:hidden; padding:10px 65px; } #main .page-inner.extra-padding { padding-top:40px; padding-bottom:40px; } #main .main-content { float:left; width:100%; overflow:hidden; position:relative; } #main .full-gradient { width:830px; display:block; position:relative; background:url(/images/full-width-black-grad.jpg) bottom center no-repeat; padding:20px 65px; float:left; } #main .full-gradient .left { width:600px; } #main .page-inner.cta , #main .full-gradient.cta { width:100%; padding:0px; } #main .col1 { width:530px; padding-right:25px; float:left; background:url(/images/vert-grey-line-bg.gif) top right repeat-y; } #main .col2 { width:220px; float:right; } #main .form-col1 { width:475px; padding-right:25px; float:left; background:url(/images/vert-grey-line-bg.gif) top right repeat-y; } #main .form-col2 { width:300px; float:right; } #main .col50-left { width:395px; padding-right:20px; margin:25px 0px; float:left; background:url(/images/vert-grey-line-bg.gif) top right repeat-y; } #main .col50-right { width:395px; margin:25px 0px; float:right; } #main .form-col2 ul { font-size:0.8em; } #main .item-header { width:100%; overflow:hidden; float:left; background:url(/images/vert-grey-line-bg.gif) 340px 0px repeat-y; padding:10px 0px; margin:-10px 0px 15px 0px; } #main .item-header p { margin:0px; } #main .item-header p.large { margin-bottom:20px; } #main .item-header .col1 { width:320px; padding-right:25px; float:left; background:none; } #main .item-header .col2 { width:465px; float:right; } #main .menu { float:left; width:100%; display:block; height:121px; position:relative; } #main .menu ul { width:auto; height:40px; overflow:hidden; float:left; margin-top:60px; margin-right:20px; } #main .menu ul li { float:left; margin-right:20px; } #main .menu ul li a { font-size:1.0em; color:#eaeaea; text-decoration:none; font-weight:normal; font-style: italic; } #main .menu ul li a.current , #main .menu ul li a:hover { color:#c80c24; } #main .menu .logo { position:absolute; top:12px; left:-52px; } #main .menu ul.sub { overflow:hidden; position:absolute; width:auto; bottom:00px; right:20px; margin:0px; } #main .menu ul.sub li { float:none; float:left; } #main .menu ul.sub li a { font-size:0.8em; } #main .main-content div.slider { float:left; width:650px; height:440px; overflow:hidden; background:url('/images/slider-right-bg.gif') top right repeat-y; margin-bottom:8px; } #main .main-content div.slider a { display:block; width:100%; overflow:hidden; } #main .main-content div.slider a img { float:left } #main .main-content div.slider .left { margin:20px 0px 12px 65px; width:30%; } #main .main-content div.slider .right { margin:18px 25px 12px 0px; width:30%; text-align:right; } #main .main-content div.slider .right a { text-decoration:none; } #main .main-content div.slider .right a:hover { color:black; } /* Slider */ #main div.slides { list-style:none; width:647px; height:440px; overflow:hidden; position:relative; margin:0; padding:0; } #main div.slides div.slide { position:absolute; left:0; right:0; } #main div.slides div.slide.show { z-index:500; } #main div img { } #main div.slides div.slide div.information-container { margin-top:100px; width:100%; overflow:hidden; background:url(/images/bg-information-container.jpg) top center repeat-y; } #main div.slides div.slide.show div.information-container { margin-top:0px; } #main .page-inner ul , #main .full-gradient ul { padding-left:20px; list-style:disc; margin:10px 0px; } #main .page-inner ul li , #main .full-gradient ul li { } #main .main-content div.lead { margin-top:28px; float:left; width:300px; overflow:hidden; height:357px; } #main .main-content div.lead h1.on-pink { background:url(/images/h1-on-pink-bg.jpg) top left repeat-y; display:inline-block; color:#000; width:280px; padding:15px 10px 8px 10px; font-style:italic; line-height:32px; margin:0px; } #main .main-content div.lead p { font-size:1em; padding:10px 20px 20px 10px; margin:0px; } #main .main-content div.lead .huge { display:block-inline; margin-top:0px; float:left; } #main .main-content .overview-title { float:right; margin-right:23px; margin:20px 25px 12px 0px; } #main .main-content ol.huge { list-style:none; margin:0px 0px 10px 0px; width:100%; overflow:hidden; } #main .main-content ol.huge li { margin:20px 0px 5px 0px; padding:0px 0px 0px 50px; background-position: top left; background-repeat: no-repeat; float:left; width:205px; margin-right:25px; line-height:1.5em; padding-top:2px; } #main .main-content ol.huge li.one { background-image:url(/images/ol-huge-1.jpg) ; } #main .main-content ol.huge li.two { background-image:url(/images/ol-huge-2.jpg) ; width:220px; } #main .main-content ol.huge li.three { background-image:url(/images/ol-huge-3.jpg) ; margin-right:0px; } #main .main-content .social-container { width:100%; overflow:hidden; float:left; } #main .main-content .twitter-container { width:390px; margin:25px 0px 0px 65px; float:left; overflow:hidden; } #main .main-content .activity-container { width:390px; margin:25px 65px 0px 0px; float:right; overflow:hidden; } #main .main-content .social-container ul { margin:0px 0px 20px 0px; padding:0px; list-style:none; overflow:hidden; width:100%; } #main .main-content .social-container ul li { margin:0px 0px 20px 0px; padding:22px 0px 0px 0px; font-size:0.8em; background:url(/images/grey-line-bg.gif) top left repeat-x; } #main .main-content .social-container ul li.first { background:none; } #main .main-content .partner { background:url(/images/grey-line-bg.gif) top left repeat-x; margin:20px 0px 0px 0px; padding:40px 0px 0px 0px; overflow:hidden; float:left; } #main .main-content .partner.first { background:none; margin-top:25px; padding-top:0px; } #main .main-content .partner .images { float:left; width:105px; overflow:hidden; } #main .main-content .partner .info { float:right; padding-left:10px; width:415px; overflow:hidden; } #main .main-content .other-event { background:url(/images/grey-line-bg.gif) top left repeat-x; margin:20px 0px 0px 0px; padding:40px 0px 5px 0px; overflow:hidden; float:left; } #main .main-content .other-event.first { background:none; margin-top:25px; padding-top:0px; } #main .main-content .other-event .images { float:left; width:140px; overflow:hidden; } #main .main-content .other-event .info { float:right; padding-top:5px; padding-left:10px; width:150px; overflow:hidden; } #main .main-content .other-event .info p { margin-top:0px; font-size:0.75em; } #main table.list { margin:20px 0px; width:100%; } #main table.list th { text-align:left; font-size: 1em; font-weight:normal; border-left:1px solid #282828; border-bottom:2px solid #565656; color:#4d4d4d; padding:10px 15px; } #main table.list td { font-size: 0.75em; font-weight:normal; border-left:1px solid #282828; border-bottom:2px solid #565656; padding:10px 15px; } #main table.list th.th-left , #main table.list td.td-left { border-left:0px; } #main table.list th.tcenter { text-align:center; } #main table.list th.width-60 { width:60px; } #main table.list th.width-70 { width:70px; } #main table.list th.width-80 { width:80px; } #main table.list th.width-85 { width:85px; } #main table.list th.width-100 { width:100px; } #main table.list th.width-110 { width:110px; } #main table.list th.width-120 { width:120px; } #main table.list th.width-130 { width:130px; } #main table.list th.width-140 { width:140px; } #main table.list th.width-150 { width:150px; } #main table.list th.width-160 { width:160px; } #main table.list th.width-170 { width:170px; } #main table.list th.width-180 { width:180px; } #main table.list td p { font-size:1em; padding:0px; margin:0px; text-align:left; line-height:1.2em; } /* and the calendar */ #main table.list.calendar { width:805px; margin-left:12px; } #main table.list td.day { height:120px; width:85px; vertical-align:top; } #main table.list td.day span { display:block; } #main table.list td.day.current { background-color:#1b1b1b; color:#fff; } #main table.list td.day.past { color:#2d2d2d; } #main table.list th a.date-advance { font-size:0.8em; } #main form { width:100%; } #main form ul { width:100%; overflow:hidden; list-style:none !important; margin:10px 0px !important; font-size:1em; padding-left:0px !important; } #main form ul li { width:100%; overflow:hidden; padding:13px 0px 15px 0px; background:url(/images/grey-line-bg.gif) bottom left repeat-x; } #main form label { font-size:0.8em; width:90px; padding-right:20px; text-align:right; float:left; } #main form input { font-size:0.8em; width:330px; float:left; border:0px; background:#343434; color:#efefef; padding:2px 1px; margin:0px; } #main form textarea { font-size:0.8em; font-family:arial, helvetica, sans-serif; width:330px; float:left; border:0px; background:#343434; color:#efefef; padding:4px 1px; margin:0px; } #main form div.fake-field { font-size:0.8em; width:328px; float:left; border:0px; background:#343434; color:#aaa; font-style:italic; padding:0px 1px; margin:0px 0px 0px 1px; line-height:20px; } #main form select { font-size:0.8em; width:330px; float:left; border:0px; background:#343434; color:#efefef; padding:2px 1px; } #main form input.checkbox { width:20px; padding:0px; margin:3px 0px 0px 0px; margin-left:70px; clear:left; } #main form label.checkbox-label { width:340px; margin-left:20px; padding-right:0px; text-align:left; font-size:0.7em; } #main form label.help-label { width:340px; margin-left:0px; margin-top:4px; padding-right:0px; text-align:left; font-size:0.7em; line-height:1.1em; font-style:italic; } #main form button span { display:none; } #main form button { width:89px; height:27px; border:0px; background:transparent url(/images/button-submit.png) top left no-repeat; float:right; } #main form button.next { background-image:url(/images/button-next.png) } #main form button:hover { cursor:pointer; background-position:bottom left; } #main form button.ui-datepicker-trigger { width:69px; height:18px; margin-top:4px; margin-right:30px; border:0px; background:transparent url(/images/button-calendar.png) top left no-repeat; float:right; } #main form button.ui-datepicker-trigger:hover { cursor:pointer; background-position:bottom left; } #main form .ac_loading { background:#343434 url(/images/spinner.gif) 314px 3px no-repeat; } #main form .mid-size { width:160px; } #main form .small-size { width:80px; } #main form #sf_guard_user_profile_dob_month { width:60px; margin-right:5px; float:none; } #main form #sf_guard_user_profile_dob_day { width:60px; margin-right:5px; float:none; margin-left:5px; } #main form #sf_guard_user_profile_dob_year { width:80px; margin-left:5px; float:none; } #main ol.highlight-links { margin:0px; } #main ol.highlight-links li { padding:5px 0px; } #main ol.highlight-links li a { background:url(/images/highlight-arrow.png) top left no-repeat; padding-left:20px; color:#7d7d7d; outline:none; } #main ol.highlight-links li a.current , #main ol.highlight-links li a:hover { background-position:bottom left; } /* Profile Page */ #main .page-inner .profile .col-user { width:210px; margin:25px 0px; float:left; } #main .page-inner .profile .col-schedule { width:380px; padding:0px 20px; margin:25px 0px 25px 18px; float:left; border-left:2px solid #363636; border-right:2px solid #363636; } #main .page-inner .profile .col-goal { width:160px; margin:25px 0px; float:right; } #main .page-inner .schedule { margin:20px 0px; padding-left:0px; width:100%; overflow:hidden; list-style:none; } #main .page-inner .schedule .schedule-item { overflow:hidden; } #main .page-inner .schedule .schedule-item h3 { margin:0px; } #main .page-inner .schedule .schedule-item p { margin:0px; } #main .page-inner .schedule .schedule-item div.date { overflow:hidden; margin-right:20px; width:59px; padding:3px 0px 5px 0px; float:left; background:url(/images/cal-date-bg.gif) top left repeat-y; text-align:center; } #main .page-inner .schedule .schedule-item div.date .day { font-size:2em; color:white; } #main .page-inner .schedule .schedule-item div.date .month { font-size:1em; color:black; text-transform:uppercase; } #main .page-inner .schedule li div.share-bar { width:100%; overflow:hidden; margin:10px 0px 20px 0px; float:left; background:url(/images/share-bar-bg.gif) top left repeat-x; } #main .page-inner .schedule li div.share-bar a.share { outline:none; float:right; width:64px; height:17px; display:block; background:url(/images/share-bar-button.gif) top left no-repeat; } #main .page-inner .schedule li div.share-bar a.remove { outline:none; float:left; width:64px; height:17px; display:block; background:url(/images/share-bar-remove.gif) top left no-repeat; } #main .page-inner .schedule li div.share-bar a span { display:none; } #main .page-inner .schedule li div.share-bar a:hover { background-position:bottom left; } #main ul.goal-bar { width:100%; padding-left:0px; overflow:hidden; list-style:none; } #main ul.goal-bar li { width:100%; float:left; height:28px; line-height:28px; overflow:hidden; font-size:0.8em; background:url(/images/bar-grey.jpg) 35px 0px repeat-y; border-bottom:1px solid #363636; } #main ul.goal-bar li.required { } #main ul.goal-bar li.earned { } #main ul.goal-bar li.remaining { background-image:url(/images/bar-full.jpg); padding-top:178px } #main ul.goal-bar li span.count { display:block; width:60px; float:left; color:#c80c24; font-weight:bold; font-size:1.2em; } #main ul.error_list { padding:0px; margin:0px !important; width:100%; float:right; overflow:hidden; } #main ul.error_list li { color:#c80c24; padding:0px 0px 0px 110px; margin:0px; background:none; font-size:0.75em; } /* #main a.go-button { display:block; margin: 0 auto; width:31px; height:31px; overflow:hidden; outline:none; text-indent:-10000px; background:url(/images/button-go.png) top left no-repeat; } #main a.go-button:hover { background-position:bottom left; outline:none; } #main a.go-button { display:block; margin: 0 auto; width:75px; height:27px; overflow:hidden; outline:none; text-indent:-10000px; background:url(/images/button-signup.png) top left no-repeat; } #main a.go-button:hover { background-position:bottom left; outline:none; } */ #main a.go-button { display:block; margin: 0 auto; width:126px; height:24px; overflow:hidden; outline:none; text-indent:-10000px; background:url(/images/sign-up-now.jpg) top left no-repeat; } #main a.go-button:hover { background-position:bottom left; outline:none; } #main a.more-button { display:block; margin: 0 auto; width:76px; height:27px; overflow:hidden; outline:none; text-indent:-10000px; background:url(/images/button-more-info.png) top left no-repeat; } #main a.more-button:hover { background-position:bottom left; outline:none; } .paging { width:100%; overflow:hidden; font-size:0.8em; margin-bottom:20px; } .paging .itemcount { width:50%; overflow:hidden; float:left; } .paging .pagination { width:50%; overflow:hidden; float:right; text-align:right; } .back-to-list { display:block; position:absolute; bottom:-2px; outline:none; right:0px; width:89px; height:9px; text-indent:-1000px; overflow:hidden; background-image:url(/images/back-to-list.gif); background-position: top left; background-repeat: no-repeat; } .back-to-list:hover { background-position:bottom left; outline:none; } #main .main-content div.error { width:100%; overflow:hidden; text-align:center; border-top:2px solid #900615; border-bottom:2px solid #900615; background:#6e0712; color:white; margin:10px 0px; padding:10px 0px; } #main .main-content div.success { width:100%; overflow:hidden; text-align:center; border-top:2px solid #287433; border-bottom:2px solid #287433; background:#2ea940; color:white; margin:10px 0px; padding:10px 0px; } p.learn-more {margin-top:0px !important; padding-top:0px !important;} #main ul.crossed { list-style:none; margin: 10px 0px 0px 0px; padding:0px; } #main ul.crossed li { padding:3px 0px 3px 23px; background:url(/images/pink-arrow-down.png) 0px 6px no-repeat; } #main ul.crossed li a { color:#7d7d7d; } #main ul.crossed li a:hover { color:#fff; } #main ul.requests { font-size:0.8em; margin:0px 0px 20px 0px; } #main ul.requests a.profile { color:#7d7d7d; } #main ul.requests a.profile:hover { color:white; } div#share { padding:20px 10px 0px 10px; width:450px; height:250px; overflow:hidden; display:block; } img.dob-help-text { margin-left:112px; } p.event-link { text-align:right; padding-top:20px; } span.required { color:#c80c24; } #main .page-inner .cms ul, #main .full-gradient .cms ul { font-size:0.8em; } span.coming-soon { font-size:0.85em; font-style:italic; color:#c80c24; } .left-right-container { width:100%; float:left; overflow:hidden; margin:20px 0px; } .left-right-container .left { width:47%; float:left; overflow:hidden; } .left-right-container .right { width:47%; float:right; overflow:hidden; } #main .left-right-container form input { width:250px; }