@charset "utf-8";
/* CSS Document */
#Body { background:#e7e7e7; }
#planner { background-color: #e7e7e7;font: 11px/14px verdana,arial,helvetica,sans-serif;color: #000;margin: 0;padding: 3em 0; }
#planner p { font: 14px/17px open-sans,arial,sans-serif;margin: 0;padding: .2em .7em .7em 10px; }
#planner .plannerBox p { font: 14px/17px verdana,arial,helvetica,sans-serif;margin: 0;padding: .2em .7em .7em 10px; }
.plannerBox { border:1px #ddd solid;background:#fff; padding: 15px 12px; margin-top: 15px; }
.plannerBox a, .plannerBox a:visited { color:#0066a3;text-decoration: none; }
.plannerBox a:hover { color: #69c; }
.plannerBox input { color:#000; font: normal 10px/10px verdana,arial,helvetica,sans-serif; text-align:center; }
.planner-section { /*max-width:600px;*/position:relative; }
.planner-section h3 { font: normal 14px/17px open-sans,arial,sans-serif;color:#000;margin:0;padding:0; }
h1.main { font: bold 3.7em/1em sofia-pro-condensed,sans-serif !important;color:#999; text-transform:uppercase;font-style:italic !important;margin:10px 0 5px; }
h2.main { font: bold 2.3em/1em sofia-pro-condensed,sans-serif !important; color: #666; text-transform: uppercase;font-style:italic !important;margin: 10px 0; padding: 0; }
p.main { font: normal 14px/17px open-sans,arial,sans-serif;color:#000;margin: 0;padding:.2em .7em .7em 0 !important; }
.main { text-align:center; }
.planner-section h2 { font: normal 14px/17px open-sans,arial,sans-serif; text-align:center;color:#000;margin: 0;padding:.2em .7em .7em !important; }
.border_full { border: solid 1px #c0c0c0; }
.planner-section ul { list-style-type: none;margin: 0;padding:0;width:auto; }
.planner-section ul li { float:left; }
.planner-section ul li a { display:inline-block;padding:5px 3px; margin:0 !important; text-align:center; background:#f5f5f5; width:34px;border-top:solid 2px #fff;border-right:0;border-bottom:solid 2px #fff;border-left:solid 2px #fff; }
.ulHolder { padding-left:1px;min-width:278px; }
#planner .result { font-size:10px;color: red; font-weight:bold; text-align:center; position:absolute; }
.result.one { top:30px;left:102px;z-index:50; }
.result.two { top:60px;left:375px;z-index:60; }
.result.thr { top:140px;left:108px;z-index:70; }
.result.for { top:280px;left:185px;z-index:80; }
.result.fiv { top:220px;left:440px;z-index:90; }
.result.six { top:313px;left:42px;z-index:100; }
.result.sev { top:174px;left:256px;z-index:110; }
#planner .whitebox { background:url("/portals/0/html/planner/images/blank.png") repeat-y center top;padding:2px 0 4px; }
#product1,#product2,#product3,#prodTitle { opacity:0; transition:opacity 1s ease; }
.prodBoxShow { opacity:1 !important;background:#f5f5f5;width:100%; margin:10px 0;padding: 0 15px;/*position:absolute;top:0px;*/ }
.prodTitle { opacity:1 !important; }
.prodBoxShow div { padding:10px;/*border:2px #fff solid;*/text-align:center; }
.prodBoxShow small { line-height:1.2em !important; }
.btn-xs { border-radius: 6px;font-weight:normal; }
@media(max-width:566px) {
#main-image { margin-top: 120px !important; max-width:100% !important; }
.result.one { display:none; }
.result.thr { top:0px !important;left:20px !important; }
.result.fiv { top:60px !important;left:180px !important; }
.result.two { top:0px !important;left:180px !important; }
.result.for { top:60px !important;left:20px !important; }
.result.six { top:60px !important;left:100px !important; }
.result.sev { top:0px !important;left:100px !important; }
}
@media(max-width:767px) {
#main-image { /*margin-top: 60px;*/ max-width:500px; }
li.hideLi { display:none; }
.result { width:70px; }
.result.one { top:20px;left:102px; }
.result.two { top:45px;left:306px; }
.result.thr { top:130px;left:77px; }
.result.for { top:230px;left:148px; }
.result.fiv { top:180px;left:368px; }
.result.six { top:262px;left:18px; }
.result.sev { top:146px;left:215px; }
.ulHolder { max-width:278px; }
}
@media(min-width:768px) {
.plannerBox { padding: 15px; }
.planner-section ul li a { width:40px; }
.w37 { width:41px !important; }
}
@media(min-width:992px) {
#product { position:absolute;top:300px; }
h1.main { margin:25px 0 5px; }
.main { text-align:left; }
.planner-section ul li a { width:33px; }
.w37 { width:40px !important; }
.ulHolder { padding-left:2px; }
}
@media(min-width:1200px) {
#product { top:200px; }
.planner-section ul li a { width:36px; }
.w37 { width:37px !important; }
.ulHolder { padding-left:1px; }
}