It's unlikely to be of any use outside of our site as it's extremely specific in its styling to get them to stack right. At an rate the CSS is as follows.
Code:
@media (min-width: 768px) {
.cbRegistration #cbregProduct_3MO-PLAN_ID,
.cbRegistration #cbregProduct_6MO-PLAN_ID,
.cbRegistration #cbregProduct_1YR-PLAN_ID {
position: relative;
}
.cbRegistration #cbregProduct_3MO-PLAN_ID + #cbregProduct_6MO-PLAN_ID,
.cbRegistration #cbregProduct_3MO-PLAN_ID + #cbregProduct_1YR-PLAN_ID,
.cbRegistration #cbregProduct_6MO-PLAN_ID + #cbregProduct_1YR-PLAN_ID {
margin-left: -284px;
}
.cbRegistration #cbregProduct_3MO-PLAN_ID .cbRegNameDesc,
.cbRegistration #cbregProduct_6MO-PLAN_ID .cbRegNameDesc,
.cbRegistration #cbregProduct_1YR-PLAN_ID .cbRegNameDesc {
height: 535px;
}
.cbRegistration #cbregProduct_3MO-PLAN_ID .radio-inline,
.cbRegistration #cbregProduct_6MO-PLAN_ID .radio-inline,
.cbRegistration #cbregProduct_1YR-PLAN_ID .radio-inline {
position: absolute;
z-index: 3;
left: 15px;
}
.cbRegistration #cbregProduct_3MO-PLAN_ID .radio-inline {
bottom: 55px;
}
.cbRegistration #cbregProduct_6MO-PLAN_ID .radio-inline {
bottom: 35px;
}
.cbRegistration #cbregProduct_1YR-PLAN_ID .radio-inline {
bottom: 15px;
}
.cbRegistration #cbregProduct_3MO-PLAN_ID + #cbregProduct_6MO-PLAN_ID:not(.cbregPlanSelected) .cbRegNameDesc,
.cbRegistration #cbregProduct_3MO-PLAN_ID + #cbregProduct_1YR-PLAN_ID:not(.cbregPlanSelected) .cbRegNameDesc,
.cbRegistration #cbregProduct_6MO-PLAN_ID + #cbregProduct_1YR-PLAN_ID:not(.cbregPlanSelected) .cbRegNameDesc {
background: transparent;
}
.cbRegistration #cbregProduct_3MO-PLAN_ID + #cbregProduct_6MO-PLAN_ID:not(.cbregPlanSelected) .cbregName,
.cbRegistration #cbregProduct_3MO-PLAN_ID + #cbregProduct_6MO-PLAN_ID:not(.cbregPlanSelected) .cbregDescription,
.cbRegistration #cbregProduct_6MO-PLAN_ID + #cbregProduct_1YR-PLAN_ID:not(.cbregPlanSelected) .cbregName,
.cbRegistration #cbregProduct_6MO-PLAN_ID + #cbregProduct_1YR-PLAN_ID:not(.cbregPlanSelected) .cbregDescription,
.cbRegistration #cbregProduct_3MO-PLAN_ID.cbregPlanSelected + #cbregProduct_6MO-PLAN_ID + #cbregProduct_1YR-PLAN_ID .cbregName,
.cbRegistration #cbregProduct_3MO-PLAN_ID.cbregPlanSelected + #cbregProduct_6MO-PLAN_ID + #cbregProduct_1YR-PLAN_ID .cbregDescription,
.cbRegistration #cbregProduct_3MO-PLAN_ID.cbregPlanSelected + #cbregProduct_1YR-PLAN_ID .cbregName,
.cbRegistration #cbregProduct_3MO-PLAN_ID.cbregPlanSelected + #cbregProduct_1YR-PLAN_ID .cbregDescription,
.cbRegistration #cbregProduct_6MO-PLAN_ID.cbregPlanSelected + #cbregProduct_1YR-PLAN_ID .cbregName,
.cbRegistration #cbregProduct_6MO-PLAN_ID.cbregPlanSelected + #cbregProduct_1YR-PLAN_ID .cbregDescription {
visibility: hidden;
}
.cbRegistration #cbregProduct_3MO-PLAN_ID + #cbregProduct_6MO-PLAN_ID:not(.cbregPlanSelected) .cbRegNameDesc,
.cbRegistration #cbregProduct_3MO-PLAN_ID + #cbregProduct_1YR-PLAN_ID:not(.cbregPlanSelected) .cbRegNameDesc,
.cbRegistration #cbregProduct_6MO-PLAN_ID + #cbregProduct_1YR-PLAN_ID:not(.cbregPlanSelected) .cbRegNameDesc,
.cbRegistration #cbregProduct_3MO-PLAN_ID.cbregPlanSelected + #cbregProduct_6MO-PLAN_ID + #cbregProduct_1YR-PLAN_ID .cbRegNameDesc,
.cbRegistration #cbregProduct_3MO-PLAN_ID.cbregPlanSelected + #cbregProduct_1YR-PLAN_ID .cbRegNameDesc,
.cbRegistration #cbregProduct_6MO-PLAN_ID.cbregPlanSelected + #cbregProduct_1YR-PLAN_ID .cbRegNameDesc {
border: 0;
}
.cbRegistration #cbregProduct_3MO-PLAN_ID.cbregPlanSelected,
.cbRegistration #cbregProduct_6MO-PLAN_ID.cbregPlanSelected,
.cbRegistration #cbregProduct_1YR-PLAN_ID.cbregPlanSelected {
z-index: 2;
}
}
Replace 3MO-PLAN_ID, 6MO-PLAN_ID, and 1YR-PLAN_ID with your actual plan ids. You'll likely need to make changes to all of it as again it's designed specifically for our site. It's also for the rounded template and won't work with default template.
krileon
