/* Default */ #calc-m-plugin * { margin: 0; padding: 0; border: 0; outline: none; box-sizing: border-box; } #calc-m-plugin { font-size: 15px; line-height: 1.4em; font-family: 'open_sansregular', Arial, Helvetica, sans-serif; } /* Help Classes */ #calc-m-plugin .hide-mobile { display: inline-block; } #calc-m-plugin .calc-m-half { display: table-cell; width: 50%; vertical-align: middle; } #calc-m-plugin .calc-m-row { display: table-row; } #calc-m-plugin .calc-m-table { display: table; width: 100%; border-bottom-style: solid; } #calc-m-plugin .calc-m-os-bold { font-family: 'open_sansbold', Arial, Helvetica, sans-serif; } #calc-m-plugin .calc-m-input { font-size: 15px; padding: 9px 10px; margin-right: 5px; border-style: solid; border-width: 1px; text-align: right; width: 115px; font-family: 'open_sansregular', Arial, Helvetica, sans-serif; } #calc-m-plugin .calc-m-border { border-bottom-width: 1px; border-style: solid; } /* Header */ /*#calc-m-plugin .calc-m-header > .calc-m-half { padding-right: 67px; } #calc-m-plugin .calc-m-header > .calc-m-half:first-child { padding-left: 67px; }*/ #calc-m-plugin .type-label { text-transform: uppercase; letter-spacing: 1px; padding: 5px 20px; text-align: center; vertical-align: middle; } #calc-m-plugin .calc-m-header select { width: 250px; } #calc-m-plugin #calc-m-beamshape { display: none; } #calc-m-plugin #calc-m-channelshape { display: none; } #calc-m-plugin #calc-m-weight { display: none; } /* Image Block */ #calc-m-plugin .calc-m-shape { background-position: 50% 40px; background-repeat: no-repeat; width: 50%; display: table-cell; height: 325px; } #calc-m-plugin.calc-m-shape-1 .calc-m-shape { background-image: url(../img/calc/pipe.png); } #calc-m-plugin.calc-m-shape-2 .calc-m-shape { background-image: url(../img/calc/prof-pipe.png); } #calc-m-plugin.calc-m-shape-3 .calc-m-shape { background-image: url(../img/calc/strip.png); } #calc-m-plugin.calc-m-shape-4 .calc-m-shape { background-image: url(../img/calc/circle.png); } #calc-m-plugin.calc-m-shape-5 .calc-m-shape { background-image: url(../img/calc/list.png); } #calc-m-plugin.calc-m-shape-6 .calc-m-shape { background-image: url(../img/calc/hexahedron.png); } #calc-m-plugin.calc-m-shape-7 .calc-m-shape { background-image: url(../img/calc/equal-angle.png); } #calc-m-plugin.calc-m-shape-8 .calc-m-shape { background-image: url(../img/calc/unequal-angle.png); } #calc-m-plugin.calc-m-shape-9 .calc-m-shape { background-image: url(../img/calc/channel.png); } #calc-m-plugin.calc-m-shape-10 .calc-m-shape { background-image: url(../img/calc/beam.png); } #calc-m-plugin .calc-m-variables { border-bottom-style: solid; border-bottom-width: 1px; } #calc-m-plugin .calc-m-variables .calc-m-field { display: none; padding: 7px 0; width: 100%; vertical-align: middle; } #calc-m-plugin .calc-m-variables .calc-m-field.calc-m-input-price, #calc-m-plugin .calc-m-variables .calc-m-field.calc-m-input-price-w { display: table; } #calc-m-plugin .calc-m-label-text { display: inline-block; padding: 0 15px; } #calc-m-plugin .calc-m-fields { border-left-style: solid; border-left-width: 1px; } #calc-m-plugin .calc-m-symbol { font-size: 26px; font-style: italic; margin-right: 10px; vertical-align: -1px; } /* Pipe */ #calc-m-plugin.calc-m-shape-1 .calc-m-variables .calc-m-input-d, #calc-m-plugin.calc-m-shape-1 .calc-m-variables .calc-m-input-s1, #calc-m-plugin.calc-m-shape-1 .calc-m-variables .calc-m-input-l { display: table; } /* Prof Pipe */ #calc-m-plugin.calc-m-shape-2 .calc-m-variables .calc-m-input-h, #calc-m-plugin.calc-m-shape-2 .calc-m-variables .calc-m-input-s1, #calc-m-plugin.calc-m-shape-2 .calc-m-variables .calc-m-input-b, #calc-m-plugin.calc-m-shape-2 .calc-m-variables .calc-m-input-l { display: table; } /* Strip */ #calc-m-plugin.calc-m-shape-3 .calc-m-variables .calc-m-input-h, #calc-m-plugin.calc-m-shape-3 .calc-m-variables .calc-m-input-b, #calc-m-plugin.calc-m-shape-3 .calc-m-variables .calc-m-input-l { display: table; } /* Circle */ #calc-m-plugin.calc-m-shape-4 .calc-m-variables .calc-m-input-d, #calc-m-plugin.calc-m-shape-4 .calc-m-variables .calc-m-input-l { display: table; } /* List */ #calc-m-plugin.calc-m-shape-5 .calc-m-variables .calc-m-input-l2, #calc-m-plugin.calc-m-shape-5 .calc-m-variables .calc-m-input-b, #calc-m-plugin.calc-m-shape-5 .calc-m-variables .calc-m-input-s3 { display: table; } /* Hexahedron */ #calc-m-plugin.calc-m-shape-6 .calc-m-variables .calc-m-input-d, #calc-m-plugin.calc-m-shape-6 .calc-m-variables .calc-m-input-l { display: table; } /* Equal Angle */ #calc-m-plugin.calc-m-shape-7 .calc-m-variables .calc-m-input-h, #calc-m-plugin.calc-m-shape-7 .calc-m-variables .calc-m-input-s1, #calc-m-plugin.calc-m-shape-7 .calc-m-variables .calc-m-input-l { display: table; } /* Unequal Angle */ #calc-m-plugin.calc-m-shape-8 .calc-m-variables .calc-m-input-h, #calc-m-plugin.calc-m-shape-8 .calc-m-variables .calc-m-input-s1, #calc-m-plugin.calc-m-shape-8 .calc-m-variables .calc-m-input-b, #calc-m-plugin.calc-m-shape-8 .calc-m-variables .calc-m-input-l { display: table; } /* Channel */ /*#calc-m-plugin.calc-m-shape-9 .calc-m-variables .calc-m-input-h, #calc-m-plugin.calc-m-shape-9 .calc-m-variables .calc-m-input-s1, #calc-m-plugin.calc-m-shape-9 .calc-m-variables .calc-m-input-b,*/ #calc-m-plugin.calc-m-shape-9 .calc-m-variables .calc-m-input-l { display: table; } #calc-m-plugin.calc-m-shape-9 #calc-m-material, #calc-m-plugin.calc-m-shape-9 #calc-m-beamshape { display: none; } #calc-m-plugin.calc-m-shape-9 #calc-m-channelshape { display: inline-block; } #calc-m-plugin.calc-m-shape-9 #calc-m-density { display: none; } #calc-m-plugin.calc-m-shape-9 #calc-m-weight { display: inline-block; } /* Beam */ /*#calc-m-plugin.calc-m-shape-10 .calc-m-variables .calc-m-input-h, #calc-m-plugin.calc-m-shape-10 .calc-m-variables .calc-m-input-s1, #calc-m-plugin.calc-m-shape-10 .calc-m-variables .calc-m-input-s2, #calc-m-plugin.calc-m-shape-10 .calc-m-variables .calc-m-input-b,*/ #calc-m-plugin.calc-m-shape-10 .calc-m-variables .calc-m-input-l { display: table; } #calc-m-plugin.calc-m-shape-10 #calc-m-material, #calc-m-plugin.calc-m-shape-10 #calc-m-channelshape { display: none; } #calc-m-plugin.calc-m-shape-10 #calc-m-beamshape { display: inline-block; } #calc-m-plugin.calc-m-shape-10 #calc-m-density { display: none; } #calc-m-plugin.calc-m-shape-10 #calc-m-weight { display: inline-block; } /* Buttons */ #calc-m-plugin .calc-m-btn, #calc-m-plugin .calc-m-btn:visited { font-size: .9em; text-transform: uppercase; text-decoration: none; border-width: 1px; border-style: solid; display: inline-block; font-family: 'open_sansbold', Arial, Helvetica, sans-serif; letter-spacing: 1px; padding: 10px 32px 11px; cursor: pointer; text-align: center; } #calc-m-plugin .calc-m-submit-btn { min-width: 200px; text-align: center; cursor: pointer; font-size: 15px; border-style: solid; border-width: 0 0 4px 0; letter-spacing: 1px; padding: 12px 20px 10px; } #calc-m-plugin .icon-calc { font-size: 27px; vertical-align: -5px; position: relative; } /* Select */ #calc-m-plugin .calc-m-color-select { width: 255px; } #calc-m-plugin .ui-selectmenu-button { display: block; } #calc-m-plugin .calc-m-color-select .ui-selectmenu-button { height: 51px; } #calc-m-plugin .calc-m-color-select .ui-selectmenu-button span.ui-selectmenu-text { text-overflow: inherit; } #calc-m-plugin .color-select-unit .ui-selectmenu-button span.ui-icon { right: 12px; top: 50%; margin-top: -7px; font-size: 8px; } #calc-m-plugin .color-select-unit .ui-selectmenu-text { text-overflow: ellipsis; line-height: 1.4em; font-size: 15px; padding: 14px 30px 15px 12px; height: 51px; padding-left: 12px; } #calc-m-plugin .color-select-unit { display: inline-block; vertical-align: middle; font-family: 'open_sansregular', Arial, Helvetica, sans-serif; } .ui-selectmenu-menu .ui-selectmenu-color { border: none; } .ui-selectmenu-menu .ui-selectmenu-color .ui-menu-item { padding: 5px 12px; } #calc-m-plugin .color-select-unit .ui-state-focus .ui-selectmenu-text { border: none; } .ui-selectmenu-menu .ui-menu { max-height: 150px; overflow: auto; font-family: 'open_sansregular', Arial, Helvetica, sans-serif; } .ui-selectmenu-menu .ui-menu-item { padding: 2px 5px; font-size: 15px; overflow: hidden; white-space: nowrap; } /* Submit */ #calc-m-plugin .calc-m-submit-wrapper { padding: 30px 15px; } #calc-m-plugin .calc-m-res { display: inline-block; vertical-align: middle; margin-left: 10px; } #calc-m-plugin .calc-m-info { padding: 20px 67px; } /* Media */ @media (max-width: 1900px) { #calc-m-plugin .calc-m-info { padding-left: 47px; padding-right: 47px; } } @media (max-width: 1400px) { #calc-m-plugin .calc-m-header select, #calc-m-plugin .calc-m-color-select { width: 175px; } #calc-m-plugin .calc-m-input { width: 68px; } #calc-m-plugin .calc-m-submit-btn { min-width: inherit; } #calc-m-plugin .calc-m-info { padding-left: 30px; padding-right: 30px; } } @media (max-width: 1100px) { #calc-m-plugin .calc-m-header select, #calc-m-plugin .calc-m-color-select { width: 150px; } #calc-m-plugin .calc-m-input { width: 68px; } #calc-m-plugin .calc-m-submit-btn { min-width: inherit; } } @media (max-width: 700px) { #calc-m-plugin .type-label { display: none; } #calc-m-plugin .calc-m-header .calc-m-half { width: auto; padding-left: 10px; } #calc-m-plugin > .calc-m-table { display: block; } #calc-m-plugin .calc-m-header { display: table; width: 100%; } #calc-m-plugin .calc-m-body { display: block; } #calc-m-plugin .calc-m-shape { width: 100%; display: block; } #calc-m-plugin .calc-m-fields { border-left: 0; border-top-width: 1px; border-top-style: solid; display: block; width: 100%; } #calc-m-plugin .calc-m-info { padding-left: 20px; padding-right: 20px; } } @media (max-width: 480px) { #calc-m-plugin .calc-m-header { display: block; } #calc-m-plugin .calc-m-header > .calc-m-half { display: block; } #calc-m-plugin .calc-m-header > .calc-m-half:first-child { padding-bottom: 5px; } }