@charset "utf-8";
.old{}
.clear { clear: both; }

#canvas { margin: 0 auto; text-align: left; width: 758px; text-shadow:none;  }
#canvas #left-panel { position: relative; float: left; background: #94c4e9; width: 230px; }
#canvas #left-panel .arrow { position: absolute; z-index: 100; left: 230px; bottom: 65px; background: url(../images/left-panel-arrow.gif) no-repeat; width: 28px; height: 55px; }
#canvas #left-panel .top { background: url(../images/left-panel-top.gif) no-repeat; height: 6px; }
#canvas #left-panel .bottom { background: url(../images/left-panel-bottom.gif) no-repeat bottom; height: 6px; }

#canvas #left-panel .menu { margin: 0 auto; padding: 7px 0 10px 0; width: 150px; }
#canvas #left-panel .menu a { float: left; display: block; background: url(../images/nextprev-sprite.png) no-repeat; width: 75px; height: 26px; text-indent: -9000em; overflow: hidden; }
#canvas #left-panel .menu .prev { background-position: 0 0; }
#canvas #left-panel .menu .prev-disabled { background-position: 0 -26px; }
#canvas #left-panel .menu .next { background-position: -75px 0; }
#canvas #left-panel .menu .next-disabled { background-position: -75px -26px; }

#canvas #left-panel .overview { margin: 0 15px; padding: 2px 10px 10px 10px; border-top: 1px solid #b4d6f0; font-size: 14px; color: #fff; }
#canvas #left-panel .overview p { margin: 0; padding: 8px 0; font-weight: bold; }
#canvas #left-panel .overview span { display: block; font-size: 13px; font-weight: normal; line-height: 1.2em; }
#canvas #left-panel .overview a { color: #fff; text-decoration: underline; line-height: 1.7em; }
#canvas #left-panel .overview a:hover { color: #fff; text-decoration: none; }

#canvas #left-panel .dragbox { background: url(../images/dragme-box.png) no-repeat 50% 50%; height: 170px; }
#canvas #left-panel .dragbox .user { margin: 0 auto; background: url(../images/drag-sprite.png) no-repeat -270px 50px; width: 45px; height: 85px; cursor: move; }

#canvas #left-panel .dragbox-secondary { background: url(../images/lg-dragme-box.png) no-repeat 50% 50%; height: 170px; }
#canvas #left-panel .dragbox-secondary .panel { float: left; margin: 4px 10px; width: 91px; height: 80px; font-size: 12px; color: #fff; text-align: center; line-height: 1.2em; }
#canvas #left-panel .dragbox-secondary .panel #highuser { margin: 0 auto; background: url(../images/drag-sprite.png) no-repeat 0 0; width: 45px; height: 45px; cursor: move; }
#canvas #left-panel .dragbox-secondary .panel #chronicconditions { margin: 0 auto; background: url(../images/drag-sprite.png) no-repeat -45px 0; width: 45px; height: 45px; cursor: move; }
#canvas #left-panel .dragbox-secondary .panel #neversick { margin: 0 auto; background: url(../images/drag-sprite.png) no-repeat -90px 0; width: 45px; height: 45px; cursor: move; }
#canvas #left-panel .dragbox-secondary .panel #normal { margin: 0 auto; background: url(../images/drag-sprite.png) no-repeat -90px 0; width: 45px; height: 45px; cursor: move; }
#canvas #left-panel .dragbox-secondary .panel #multipleprescriptions { margin: 0 auto; background: url(../images/drag-sprite.png) no-repeat -135px 0; width: 45px; height: 45px; cursor: move; }

#canvas #left-panel .dragbox-last { background: url(../images/lg-dragme-box.png) no-repeat 50% 50%; height: 170px; }
#canvas #left-panel .dragbox-last .panel { margin: 0 auto; width: 91px; height: 80px; font-size: 12px; color: #fff; text-align: center; line-height: 1.2em; }
#canvas #left-panel .dragbox-last .panel #accidentplan { margin: 0 auto; background: url(../images/drag-sprite.png) no-repeat -180px 0; width: 45px; height: 45px; cursor: move; }
#canvas #left-panel .dragbox-last .panel #criticalillness { margin: 0 auto; background: url(../images/drag-sprite.png) no-repeat -225px 0; width: 45px; height: 45px; cursor: move; }

#canvas #main-panel { position: relative; margin: 0 0 0 19px; float: left; background: #f9f9f8; width: 509px; }
#canvas #main-panel .top { background: url(../images/main-panel-top.gif) no-repeat; height: 10px; }
#canvas #main-panel .content { padding: 0 15px; background: url(../images/main-panel-sides.gif) repeat-y; min-height: 400px; }
#canvas #main-panel .bottom { background: url(../images/main-panel-bottom.gif) no-repeat bottom; height: 10px; }

#canvas #main-panel #title { border-bottom: 1px solid #e4e4e3; padding-bottom: 5px; }
#canvas #main-panel #title .dropbox-title { float: left; margin: 0; padding: 0; background: url(../images/dropbox-title.png) no-repeat 0 50%; width: 120px; height: 30px; text-indent: -9000em; overflow: hidden; }
#canvas #main-panel #title span { display: block; float: right; padding-top: 8px; width: 70%; font-size: 12px; color: #a0a0a0; text-align: right; text-transform: uppercase; }
#canvas #main-panel #home { height: 107px; }
#canvas #main-panel .home-disabled { }
#canvas #main-panel .home-enabled { background: url(../images/yellow-bar.png) no-repeat 50% 0; }
#canvas #main-panel #home .home-img { margin: 10px 0 0 200px; background: url(../images/drag-sprite.png) no-repeat -315px 0; width: 45px; height: 45px; }
#canvas #main-panel #home span { display: block; font-size: 12px; color: #a0a0a0; text-align: center; text-transform: uppercase; }
#canvas #main-panel #home ul { margin: 0 0 0 150px; padding: 0; list-style: none; }
#canvas #main-panel #home ul li { float: left; }
#canvas #main-panel #home ul li.normal { background: url(../images/drag-sprite.png) no-repeat -450px -10px; width: 35px; height: 25px; }
#canvas #main-panel #home ul li.highuser { background: url(../images/drag-sprite.png) no-repeat -360px -10px; width: 35px; height: 25px; }
#canvas #main-panel #home ul li.chronicconditions { background: url(../images/drag-sprite.png) no-repeat -405px -10px; width: 35px; height: 25px; }
#canvas #main-panel #home ul li.neversick { background: url(../images/drag-sprite.png) no-repeat -450px -10px; width: 35px; height: 25px; }
#canvas #main-panel #home ul li.multipleprescriptions { background: url(../images/drag-sprite.png) no-repeat -495px -10px; width: 35px; height: 25px; }

#canvas #main-panel #drop { min-height: 150px; text-align: center; }
#canvas #main-panel .drop-disabled { padding: 10px 10px 25px 50px; }
#canvas #main-panel .drop-enabled { padding: 25px; background: url(../images/drophere-txt.png) no-repeat 50% 50%; }
#canvas #main-panel #drop .individual { display: inline; margin: 0 10px 10px 10px; float: left; text-align: center; width: 150px; }
#canvas #main-panel #drop .individual .img { margin: 0 auto; background: url(../images/drag-sprite.png) no-repeat -270px 0; width: 45px; height: 40px; }
#canvas #main-panel #drop .individual a { font-size: 12px; color: #096b83; }
#canvas #main-panel #drop .individual a:hover { font-size: 12px; color: #096b83; text-decoration: none; }
#canvas #main-panel #drop .individual ul { margin: 0; padding: 0; list-style: none; }
#canvas #main-panel #drop .individual ul li { float: left; }
#canvas #main-panel #drop .individual ul li.highuser { background: url(../images/drag-sprite.png) no-repeat -540px -10px; width: 35px; height: 25px; }
#canvas #main-panel #drop .individual ul li.chronicconditions { background: url(../images/drag-sprite.png) no-repeat -585px -10px; width: 35px; height: 25px; }
#canvas #main-panel #drop .individual ul li.neversick { background: url(../images/drag-sprite.png) no-repeat -630px -10px; width: 35px; height: 25px; }
#canvas #main-panel #drop .individual ul li.multipleprescriptions { background: url(../images/drag-sprite.png) no-repeat -675px -10px; width: 35px; height: 25px; }

#canvas #main-panel .content .options { margin: 0; padding: 15px 0; list-style: none; }
#canvas #main-panel .content .options li { position: relative; float: left; margin: 0 5px; background: #fff; border-top: 2px solid #8ec9f7; border-left: 1px solid #e2e2e2; border-bottom: 5px solid #8ec9f7; border-right: 1px solid #e2e2e2; width: 220px; }
#canvas #main-panel .content .options li .group { position: absolute; top: -10px; left: 180px; z-index: 900; background: url(../images/medalscheck-sprite.png) no-repeat -10px 0; width: 29px; height: 50px; }
#canvas #main-panel .content .options li .gold { position: absolute; top: -10px; left: 180px; z-index: 900; background: url(../images/medalscheck-sprite.png) no-repeat -60px 0; width: 29px; height: 50px; }
#canvas #main-panel .content .options li .silver { position: absolute; top: -10px; left: 180px; z-index: 900; background: url(../images/medalscheck-sprite.png) no-repeat -111px 0; width: 29px; height: 50px; }
#canvas #main-panel .content .options li .bronze { position: absolute; top: -10px; left: 180px; z-index: 900; background: url(../images/medalscheck-sprite.png) no-repeat -161px 0; width: 29px; height: 50px; }
#canvas #main-panel .content .options li img { display: block; margin: 15px 15px 0 15px; }
#canvas #main-panel .content .options li .sub { display: block; margin: 0 15px; padding-top: 4px; text-align: right; font-size: 13px; color: #4b4b4b; }
#canvas #main-panel .content .options li .sub a { color: #369ad5; }
#canvas #main-panel .content .options li .off { display: block; margin: 0 15px; padding-top: 4px; text-align: right; font-size: 15px; color: #900; text-decoration: line-through; }
#canvas #main-panel .content .options li h2 { margin: 0 15px; padding: 0; font-size: 23px; color: #87a765; text-align: right; }
#canvas #main-panel .content .options li .pricing { margin: 0 15px; font-size: 12px; padding: 8px; color: #979797; text-align: right; border-right: 1px solid #ccc; }
#canvas #main-panel .content .options li .compare { display: block; margin: 10px 0 0 0; padding: 5px 10px; text-align: right; background: #e8f4fd; font-size: 12px; color: #333; text-decoration: none; text-transform: uppercase; }

#canvas #main-panel #packages { margin: -15px; padding: 0 0 15px 0; background: #fff; border: solid #d7d7d7; border-width: 1px 0; }
#canvas #main-panel #packages .options { margin: 0; padding: 15px 0; list-style: none; }
#canvas #main-panel #packages .options li { position: relative; float: left; margin: 0 5px; background: #fff; border-top: 2px solid #8ec9f7; border-left: 1px solid #e2e2e2; border-bottom: 5px solid #8ec9f7; border-right: 1px solid #e2e2e2; width: 240px; }
#canvas #main-panel #packages .options li .plan { position: relative; padding: 5px 40px 5px 8px; background: #8ec9f7; text-transform: uppercase; font-size: 12px; color: #fff; text-align: right; }
#canvas #main-panel #packages .options li .plan span.accident { display: block; position: absolute; top: -9px; right: -3px; background: url(../images/drag-sprite.png) no-repeat -720px 0; width: 45px; height: 45px; }
#canvas #main-panel #packages .options li .plan span.critical { display: block; position: absolute; top: -9px; right: -3px; background: url(../images/drag-sprite.png) no-repeat -765px 0; width: 45px; height: 45px; }
#canvas #main-panel #packages .options li h2 { margin: 0 15px; padding: 8px 0 0 0; font-size: 19px; color: #333; text-align: left; }
#canvas #main-panel #packages .options li .pricing { margin: 0 15px; font-size: 11px; padding: 8px 0; color: #979797; text-align: left; border: 0; }
#canvas #main-panel #packages .options li .total { display: block; margin: 10px; padding: 5px 10px; background: #fffff0; font-size: 12px; color: #333; text-decoration: none; border: solid #f2f2f2; border-width: 1px 0 }
#canvas #main-panel #packages .options li .total strong { font-size: 18px; }

#canvas #details { padding: 15px 0; background: #fff; }
#canvas #details .dlist { margin: 0; padding: 0; list-style: none; }
#canvas #details .dlist a { display: block; background: url(../images/expand-mid-border.gif) no-repeat 0 50%; text-decoration: none; border-bottom: 1px solid #efefef; }



#canvas #details .dlist a h2 { margin: 0; padding: 2px 8px 0 30px; background: #fff url(../images/plus-icon.png) no-repeat 0 0; font-size: 18px; color: #3e3e3e; }
#canvas #details .dlist a h2.minus { background: #fff url(../images/minus-icon.png) no-repeat 0 0; }
#canvas #details .dlist a span { display: block; float: right; padding: 8px 20px 5px 8px; background: #fff; font-size: 11px; color: #82b85a; text-transform: uppercase; }
#canvas #details .dlist a:hover { display: block; background: url(../images/expand-mid-border.gif) no-repeat 0 50%; text-decoration: none; }
#canvas #details .dlist a:hover h2 { margin: 0; padding: 2px 8px 0 30px; background: #fff url(../images/plus-icon.png) no-repeat -1px -33px; font-size: 18px; color: #3e3e3e; }
#canvas #details .dlist a:hover h2.minus { margin: 0; padding: 2px 8px 0 30px; background: #fff url(../images/minus-icon.png) no-repeat -1px -33px; font-size: 18px; color: #3e3e3e; }
#canvas #details .dlist a:hover span { display: block; float: right; padding: 8px 20px 5px 8px; background: #fff; font-size: 11px; color: #8ec9f7; text-transform: uppercase; }
#canvas #details .detail-description { padding: 15px; font-size: 12px; }


/* ---------------------------------------------- */

#canvas #main-panel-results { position: relative; margin: 0 0 0 250px; background: #f9f9f8; width: 80%; }
#canvas #main-panel-results .content { padding: 0 15px; background: #fafafa; min-height: 400px; }

#canvas #main-panel-results #title { border-bottom: 1px solid #e4e4e3; padding-bottom: 5px; }
#canvas #main-panel-results #title .dropbox-title { float: left; margin: 0; padding: 0; background: url(../images/dropbox-title.png) no-repeat 0 50%; width: 120px; height: 30px; text-indent: -9000em; overflow: hidden; }
#canvas #main-panel-results #title span { display: block; float: right; padding-top: 8px; width: 70%; font-size: 12px; color: #a0a0a0; text-align: right; text-transform: uppercase; }

#canvas #main-panel-results .content .options { margin: 0; padding: 15px 0; list-style: none; }
#canvas #main-panel-results .content .main-groups { margin: 0 0 25px 0; padding: 0; font-size: 14px; color: #666; position: relative; height: 19px; border-bottom: 1px solid #ccc; font-weight: normal; }
#canvas #main-panel-results .content .main-groups div { position: absolute; top: 0; left: 0; padding: 10px 10px 10px 27px; background: #f9f9f8 url(../images/main-groups.png) no-repeat 0 10px;  }
#canvas #main-panel-results .content .main-medal { margin: 0 0 25px 0; padding: 0; font-size: 14px; color: #666; position: relative; height: 19px; border-bottom: 1px solid #ccc; font-weight: normal; }
#canvas #main-panel-results .content .main-medal div { position: absolute; top: 0; left: 0; padding: 10px 10px 10px 27px; background: #f9f9f8 url(../images/main-medal.png) no-repeat 7px 10px;  }
#canvas #main-panel-results .content .options li { position: relative; float: left; margin: 0 5px 15px 5px; background: #fff; border-top: 2px solid #8ec9f7; border-left: 1px solid #e2e2e2; border-bottom: 5px solid #8ec9f7; border-right: 1px solid #e2e2e2; width: 220px; }
#canvas #main-panel-results .content .options li .group { position: absolute; top: -10px; left: 180px; z-index: 900; background: url(../images/medalscheck-sprite.png) no-repeat -10px 0; width: 29px; height: 50px; }
#canvas #main-panel-results .content .options li .gold { position: absolute; top: -10px; left: 180px; z-index: 900; background: url(../images/medalscheck-sprite.png) no-repeat -60px 0; width: 29px; height: 50px; }
#canvas #main-panel-results .content .options li .silver { position: absolute; top: -10px; left: 180px; z-index: 900; background: url(../images/medalscheck-sprite.png) no-repeat -111px 0; width: 29px; height: 50px; }
#canvas #main-panel-results .content .options li .bronze { position: absolute; top: -10px; left: 180px; z-index: 900; background: url(../images/medalscheck-sprite.png) no-repeat -161px 0; width: 29px; height: 50px; }
#canvas #main-panel-results .content .options li img { display: block; margin: 15px 15px 0 15px; }
#canvas #main-panel-results .content .options li .sub { display: block; margin: 0 15px; padding-top: 4px; text-align: right; font-size: 13px; color: #4b4b4b; }
#canvas #main-panel-results .content .options li .sub a { color: #369ad5; }
#canvas #main-panel-results .content .options li .off { display: block; margin: 0 15px; padding-top: 4px; text-align: right; font-size: 15px; color: #900; text-decoration: line-through; }
#canvas #main-panel-results .content .options li h2 { margin: 0 15px; padding: 0; font-size: 23px; color: #87a765; text-align: right; }
#canvas #main-panel-results .content .options li .pricing { margin: 0 15px; font-size: 12px; padding: 8px; color: #979797; text-align: right; border-right: 1px solid #ccc; }
#canvas #main-panel-results .content .options li .compare { display: block; margin: 10px 0 0 0; padding: 5px 10px; text-align: right; background: #e8f4fd; font-size: 12px; color: #333; text-decoration: none; text-transform: uppercase; }

/* -------------------------------------------- */

#canvas #details { padding: 15px 0; background: #fff; }
#canvas #details .dlist { margin: 0; padding: 0; list-style: none; }
#canvas #details .dlist a { display: block; padding-bottom: 4px; text-decoration: none; border-bottom: 1px solid #efefef; }
#canvas #details .dlist a h2 { margin: 0; padding: 2px 8px 0 30px; background: #fff url(../images/plus-icon.png) no-repeat 0 -5px; font-size: 18px; color: #3e3e3e; }
#canvas #details .dlist a span { display: block; float: right; padding: 3px 20px 5px 8px; background: #fff; font-size: 11px; color: #82b85a; text-transform: uppercase; }
#canvas #details .dlist a:hover { display: block; background: url(../images/expand-mid-border.gif) no-repeat 0 50%; text-decoration: none; }
#canvas #details .dlist a:hover h2 { margin: 0; padding: 2px 8px 0 30px; background: #fff url(../images/plus-icon.png) no-repeat -1px -38px; font-size: 18px; color: #3e3e3e; }
#canvas #details .dlist a:hover span { display: block; float: right; padding: 3px 20px 5px 8px; background: #fff; font-size: 11px; color: #8ec9f7; text-transform: uppercase; }
#canvas #details .detail-description { padding: 15px; font-size: 12px; }


#canvas #details .dlist a.coverageImpact { background: url(../Images/coverage.png); width: 32px; height: 32px; display: inline-block; margin: 0px 0px 0px 4px; padding-bottom:0px; }
#canvas #details .dlist a.employeeImpact { background: url(../Images/employees.png); width: 32px; height: 32px; display: inline-block; margin: 0px 0px 0px 4px; padding-bottom:0px; }
#canvas #details .dlist a.employerImpact { background: url(../Images/employers.png); width: 32px; height: 32px; display: inline-block; margin: 0px 0px 0px 4px; padding-bottom:0px; }
#canvas #details .dlist a.financialImpact { background: url(../Images/financial.png); width: 32px; height: 32px; display: inline-block; margin: 0px 0px 0px 4px; padding-bottom:0px; }
#canvas #details .dlist a.administrativeImpact { background: url(../Images/document_prepare.png); width: 32px; height: 32px; display: inline-block; margin: 0px 0px 0px 4px; padding-bottom:0px; }

.scrollable .items a.coverageImpact { background: url(../Images/coverage.png); width: 32px; height: 32px; display: inline-block; margin: 0px 0px 0px 4px; padding-bottom:0px; }
.scrollable .items a.employeeImpact { background: url(../Images/employees.png); width: 32px; height: 32px; display: inline-block; margin: 0px 0px 0px 4px; padding-bottom:0px; }
.scrollable .items a.employerImpact { background: url(../Images/employers.png); width: 32px; height: 32px; display: inline-block; margin: 0px 0px 0px 4px; padding-bottom:0px; }
.scrollable .items a.financialImpact { background: url(../Images/financial.png); width: 32px; height: 32px; display: inline-block; margin: 0px 0px 0px 4px; padding-bottom:0px; }
.scrollable .items a.administrativeImpact { background: url(../Images/document_prepare.png); width: 32px; height: 32px; display: inline-block; margin: 0px 0px 0px 4px; padding-bottom:0px; }

span.coverageImpact { background: url(../Images/coverage.png); float:left; width: 32px; height: 32px; display:inline-block; margin: 0px 0px 0px 4px; padding-bottom:0px; }
span.employeeImpact { background: url(../Images/employees.png); float:left; width: 32px; height: 32px; display: inline-block; margin: 0px 0px 0px 4px; padding-bottom:0px; }
span.employerImpact { background: url(../Images/employers.png); float:left; width: 32px; height: 32px; display: inline-block; margin: 0px 0px 0px 4px; padding-bottom:0px; }
span.financialImpact { background: url(../Images/financial.png); float:left; width: 32px; height: 32px; display: inline-block; margin: 0px 0px 0px 4px; padding-bottom:0px; }
span.administrativeImpact { background: url(../Images/document_prepare.png); float:left; width: 32px; height: 32px; display: inline-block; margin: 0px 0px 0px 4px; padding-bottom:0px; }