/* ---------------------------------------------------------------------------- JAVASCRIPT REFERENCED GLOBALS ---------------------------------------------------------------------------- */ .option_color { color: #000000; } .option_color_highlight_1 { color: #0868C0; } .option_color_highlight_2 { color: #0646A0; } .option_poi_color { color: #000000; } .option_poi_color_highlight_1 { color: #0646A0; } .option_poi_color_highlight_2 { color: #0868C0; } /* ---------------------------------------------------------------------------- MISC (no order, needs cleanup) ---------------------------------------------------------------------------- */ #lnkHeaderUserLogin { margin: 0 0 0.5em 1em; display: inline-block; } #divStatus { padding: 0.9em !important; } /* common toolbar stuff */ #divTools #btnSave, #divTools #btnPrint, #divTools #btnReset, #divTools #btnFlipV, #divTools #btnLineTool, #divTools #btnZoomOut { margin-bottom: 1.25em; } #divTools #divZoomSlider { margin-top: 1.25em; margin-bottom: 1.25em; } /* #btnHelp { display: none; } */ /* notes functionality was added after the initial base skin was copied and modified for many builders, so the definition for that icon is missing from many skins */ .ui-icon-note:before { content: "\f031"; } .ui-icon-line:before { content: "\f040"; } #divDialogNoteBtns { margin-top: 0; } /* visual psuedo-scroller for options area tab contents */ #divOptions .show-psuedo-scroller { background: linear-gradient(#555, #222) #555; } #divOptions .show-psuedo-scroller ul { width: 90%; border-right: 1px solid #666; } #divOptions .show-psuedo-scroller ul:before, #divOptions ul:after { font-family: FontAwesome; font-weight: normal; font-style: normal; display: inline-block; text-decoration: none; position: absolute; right: 0; opacity: 0.25; } #divOptions .show-psuedo-scroller ul:before { content: "\f0d8"; top: 47%; text-align: center; width: 11%; } #divOptions .show-psuedo-scroller ul:after { content: "\f0d7"; top: 50%; text-align: center; width: 11%; } /* social sharing features */ #divSocialIcons { margin: 3px; } #divSocialIcons > div .ui-btn-inner { display: none; } #divSocialIcons > div, #divSocialIcons > div:before { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; text-shadow: none; } #divSocialIcons > div { margin: 10px 10px 0 0; border: none; background: #fff; padding: 0; font-size: 33px; line-height: 32px; height: 23px; width: 23px; opacity: 0.9; box-shadow: 0 0 4px rgba(190,190,190,190); transition: opacity,box-shadow 150ms; } #divSocialIcons > div:hover { opacity: 1; box-shadow: 0 0 3px rgba(0,0,0,255); } #divSocialIcons > div:before { position: absolute; top: -1px; left: -1px; } #divSocial:before { color: #3b5998; } #divTwitter:before { color: #55acee; } #divPinterest:before { color: #cc2127; } /* hover type tooltip on plan elements (currently used only for SITES) */ #divStageToolTip { overflow: visible; opacity: 0.975; padding: 0.1em 0.7em 0 0.7em; background: #fff; border: 1px solid #999; border-radius: 0.3em; color: #666; text-shadow: none; box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.3) !important; } #divStageToolTip::before { content: ' '; display: block; position: absolute; height: 11px; width: 11px; background: #fff; border-left: 1px solid #999; border-bottom: 1px solid #999; left: -7px; top: 9px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #divStageToolTip.onleft::before { left: auto; right: -7px; top: 9px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } #divStageToolTip.onbottom::before { top: auto; bottom: 9px; } #divStageToolTip h3, #divStageToolTip h4, #divStageToolTip h5, #divStageToolTip p { margin: 0.6em 0; } #divStageToolTip h3 { color: #333; font-weight: 200 } #divStageToolTip h4 { margin-top: -0.4em; font-weight: 200 } #divStageToolTip h5 { font-size: 0.9em; font-weight: 200 } #divStageToolTip h5 .prefix { color: #666; } #divStageToolTip h5 .suffix { color: #444; } /* this is be overridden by javascript in most cases */ #divStageToolTip p { color: #333; font-weight: 200 } /* persistent legend on top of stage (currently used only for SITES) */ #layoutLegend #divLegend { padding: 0.3em 0.85em 0.15em 0.85em; border-radius: 0.2em; border: 1px solid #999; background: #f9f9f9; color: #555; font-size: 0.9em; text-shadow: none; border-top-right-radius: 0; } #btnLegendHandle { border: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } #btnLegendHandle .ui-btn-inner { padding: 4px 17px 3px 36px; } #btnLegendHandle .ui-btn-inner .ui-icon { top: 5px; } #btnLegendHandle .ui-btn-inner .ui-icon.ui-icon-arrow-l { top: auto; } #btnLegendHandle .ui-btn-inner .ui-btn-text { font-size: 0.9em; } #divLegend h3 { margin: 1.1em 0; font-size: 1em; color: #555; font-weight: 400; } #divLegend h4 { margin: 0.7em 0; font-weight: 200; } #divLegend h4 .prefix { display: block; float: left; height: 1.3em; width: 1.3em; margin: 0; padding: 0; } #divLegend h4 .suffix { display: block; line-height: 1.5em; margin-left: 1.65em; font-weight: 400; } #tblLegendPricing { min-height: 115px; } #tblLegendPricing tr { display: block; transition: color 1s; } #tblLegendPricing tr td { display: table-cell; padding: 2px 0; } #tblLegendPricing tr td:nth-child(1) { width: 90px; text-align: right; } #tblLegendPricing tr td:nth-child(2) { width: 170px; text-align: left; padding-left: 5px; } #tblLegendPricing tr.base td:nth-child(1) { font-size: 1.4em; } #tblLegendPricing tr.base td:nth-child(2) { vertical-align: bottom; padding-bottom: 0.3em; } #tblLegendPricing tr.total { border-top: solid 1px #bbb; } #tblLegendPricing tr.total td:nth-child(1) { font-size: 1.4em; color: #0646A0; } #tblLegendPricing tr.total td:nth-child(2) { vertical-align: bottom; padding-bottom: 0.3em; } #divPrintPreview #divLegend { border: 1px solid #ddd; color: #333; font-size: 0.3em; padding: 0 0.5em; } #divPrintPreview #divLegend h4 .prefix { border: none; } #divPrintPreview #divLegend h4 .suffix { margin-left: 2.2em; } /* ---------------------------------------------------------------------------- SMALL SCREEN LAYOUT ---------------------------------------------------------------------------- */ @media only screen and (max-device-width: 600px) { #layoutLegendSS { border: none; border-radius: 0; } #divLegend { padding: 0 0.9em 0 0.9em; background: #f9f9f9; color: #333; font-size: 0.7em; border: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } #divLegendSS { border: none; border-left: 1px solid #000; border-radius: 0.3em 0 0 0.3em; } #btnLegendSSHandle { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } /* margin-left is to give room for shadow to not be cut off */ #btnLegendSSHandle .ui-btn-inner { border: none; } #divLegend h3 { font-size: 1.2em; font-weight: bold; } #divLegend h4 { margin-bottom: 1.2em; } #divLegend h4 .prefix { margin-top: 0; } #divLegend h4 .suffix { margin-left: 1.8em; } #divHeader, #btnHeaderSSHandle, #divOptions, #btnOptionsSSHandle, #divLegendSS, #btnLegendSSHandle { -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3) !important; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3) !important; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3) !important; } #divHeaderSSHandle, #divOptionsSSHandle, #divLegendSSHandle { position: relative; z-index: -1; } #btnHeaderSSHandle { border-bottom: none; } #btnOptionsSSHandle, #btnLegendSSHandle { border-right: none; } }