/* Minification failed. Returning unminified contents. (2301,72): run-time error CSS1035: Expected colon, found ';' */ /* Normalize.css http://necolas.github.io/normalize.css/2.1.3/normalize.css Use this in preference to the classic 'reset' options http://www.cssreset.com/which-css-reset-should-i-use/ as it is lighter and less confusing/easier to analyse. ===================== */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } html { font-family: 'Open Sans', Arial, Sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } a { background: transparent; } a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } h1 { font-size: 2em; margin: 0.67em 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } mark { background: #ff0; color: #000; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } pre { white-space: pre-wrap; } q { quotes: "\201C" "\201D" "\2018" "\2019"; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } /* HTML tags the streamSWEET way ===================== */ body { font-size: 16px; line-height: 24px; font-weight: 400; color: #224f5e; margin: 0; background-color: #fff; } p { margin: 2px 0 22px 0; } h1 { font-size: 44px; line-height: 50px; font-weight: 500; color: #224f5e; margin: 20px 0px 12px 0px; } h2 { font-size: 34px; line-height: 44px; font-weight: 500; color: #224f5e; margin: 34px 0px 10px 0px; } h3 { font-size: 26px; line-height: 32px; font-weight: 500; color: #4b8a99; margin: 22px 0px 8px 0px; } h4 { font-size: 18px; line-height: 24px; font-weight: 500; color: #224f5e; margin: 20px 0px 2px 0px; } h5 { font-size: 16px; line-height: 24px; font-weight: 500; color: #999; margin: 10px 0px 2px 0px; } h6 { font-size: 16px; line-height: 24px; font-weight: 500; color: #999; margin: 10px 0px 2px 0px; } blockquote { quotes: none; font-style: italic; } hr { border-top-width: 2px; border-top-style: solid; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-color: #eaeaea; margin-right: 0px; margin-left: 0px; } img { border: 0; display: block; max-width: 100%; height: auto; width: auto\9; /* ie8 */ } a { margin: 0; padding: 0; font-size: 100%; font: inherit; vertical-align: baseline; background: transparent; } a:link, a:visited { color: #008dcc; text-decoration: none; } a:active, a:hover, a:focus { color: #333; text-decoration: none; } /* For this site */ .SimpleEventTable { width: 100%; border-top: 3px solid #32829c; } .SimpleEventHeader1 { } .SimpleEventDate { text-align: left; font-size: 18px; padding: 14px 10px 14px 20px; border-left: 3px solid #32829c; } .SimpleEventDescription { Padding: 20px 0; } .SimpleEventLocation { font-size: 18px; font-weight: 300; color: #666; } .SimpleEventImage { margin: 20px 0; } .SimpleEventLink { background-color: #275b6c; text-align: center; padding: 14px 20px 14px 20px; margin: 10px 0; border-radius: 5px; font-size: 18px; white-space: nowrap; } a.SimpleEventLink:link, a.SimpleEventLink:visited { color: #fff; text-decoration: none; } a.SimpleEventLink:hover, a.SimpleEventLink:active { background-color: #333; } /* Quick Links */ .SideTable { width: 96%; border-top: 1px solid #d6dce0; } .SideTable td { border-bottom: 1px solid #d6dce0; padding: 14px 8px; font-size: 15px; line-height: 20px; } .SideTable td:first-of-type { min-width: 40px; } .SideTable tr:hover { background-color: #f9fcfd; } .SideTable small { line-height: 10px; } .IntroText { font-size: 22px; line-height: 30px; font-weight: 300; color: #33829c; } /* Homepage */ .HomeIntroSection { background-color: #fff; padding: 30px 0; } .HomeIntroSection h1 { font-size: 34px; line-height: 40px; } .HomeIntroPanel { margin: 0 auto 30px auto; width: 80%; } .HomeContent2Shell { margin: 0 0 40px 0; background: url(/assets/images/home_harakeke.jpg) #f2f8f8 no-repeat right bottom; } /* Pale Blue Background */ .HomeLeftCol { width: 58%; float: left; } .HomeLeftCol h2 { color: #fff; font-size: 26px; line-height: 30px; margin: 0 0 20px 0; } .HomeLeftCol h3 { color: #fff; font-size: 18px; line-height: 22px; font-weight: 400; margin: 0 0 16px 0; } .HomeRightCol { width: 42%; float: left; padding-top: 30px; font-size: 14px; } /* Coloured Blocks */ .HomeBlockIntro { padding: 40px 0 20px 0; background-color: #f2f8f8; color: #224f5e; } /* Intro Container */ .HomeBlockIntroInner { width: 70%; float: right; margin-right: 10%; } /* Itro text */ .HomeBlockIntroInner h2 { color: #224f5e; } .HomeBlockIntroInner h3 { color: #224f5e; } .HomeBlock1 { padding: 40px 0 26px 0; margin-bottom: 12px; color: #fff; font-size: 16px; background: url(/assets/images/tile_orange.jpg) no-repeat #cb613d; background-size: cover; /*contain;*/ background-position: 50% 50%; } /* Orange */ .HomeBlock2 { padding: 40px 0 26px 0; margin-bottom: 12px; color: #fff; font-size: 16px; background: url(/assets/images/tile_black.jpg) no-repeat #262626; background-size: cover; /*contain;*/ background-position: 50% 50%; } /* Black */ .HomeBlock3 { padding: 40px 0 26px 0; margin-bottom: 12px; color: #fff; font-size: 16px; background: url(/assets/images/tile_green.jpg) no-repeat #30463d; background-size: cover; /*contain;*/ background-position: 50% 50%; } /* Green */ .HomeBlock4 { padding: 40px 0 26px 0; color: #fff; font-size: 16px; background: url(/assets/images/tile_blue.jpg) no-repeat #275b6c; background-size: cover; /*contain;*/ background-position: 50% 50%; } /* Blue - "No margin bottom" */ /* Handle the content inside the blocks */ .HomeBlockInner { width: 70%; float: right; margin-right: 10%; } .HomeRightColInner { width: 80%; margin-left: 10%; } .HomeEvents { padding: 10px 0 20px 0; border-bottom: 5px solid #cbd5d5; margin-bottom: 30px; } a.HomeBlockButton:link, a.HomeBlockButton:visited { display: inline-flex; align-items: center; color: #333; justify-content: center; vertical-align: middle; background-color: #fff; padding: 8px 24px 8px 16px; border-radius: 2px; margin: 30px 0; } a.HomeBlockButton:hover { cursor: pointer; background-color: #000; color: #fff; } .DownloadsTableEditor { width: 100%; } .DownloadsTableEditor hr { border-top-width: 1px; } .DownloadsTableEditor td { padding: 10px; } .DownloadsTableEditor h3 { margin: 0; } .DownloadsTableEditor h4 { margin: 0; } .DownloadsTableEditor p { margin: 2px 0 8px 0; } .BilineDiv { float: right; width: 60%; position: relative; } .Biline { color: #fff; text-align: right; font-size: 16px; line-height: 19px; margin: 116px 0 0 0; } /* Footer Strip */ .FooterStrip { height: 20px; overflow: hidden; background: url(/assets/images/tile_footer.jpg) no-repeat #000; background-size: cover; /*contain;*/ background-position: 50% 50%; } /* Feature Box */ .FeatureBox { width: 90%; background-color: #f0f5f7; min-height: 300px; margin-bottom: 25px; padding-bottom: 10px; } .FeatureBoxHeading { width: 90%; background: url(/assets/images/tile_featurebox_head.jpg) no-repeat #4b8199 right; background-size: cover; /*contain;*/ color: #fff; text-align: center; font-size: 20px; font-weight: 400; padding: 16px 0; } .FeatureBox article { margin: 0 25px 0 25px; padding-top: 20px; } .FeatureBoxHeight { min-height: 200px; } .HomeBox { width: 90%; padding: 20px 0; /*border:2px solid #cbd5d5;*/ margin-top: 20px; margin-bottom: 20px; line-height: normal; border-radius: 8px; /*background-color:#fff;*/ } .HomeBox h3 { color: #224f5e; } .HomeBoxInner { margin: 20px; padding: 0 20px; } .ButtonLogin { background-color: #3b86b7; margin: 0; border-top-left-radius: 8px; border-top-right-radius: 8px; text-align: center; /*font-size: 14px;*/ line-height: 20px; letter-spacing: 1px; font-weight: 700; padding: 12px 20px 15px 20px; } a.ButtonLogin:link, a.ButtonLogin:visited { color: #fff !important; text-decoration: none; } a.ButtonLogin:hover, a.ButtonLogin:active { color: #fff !important; background-color: #275b6c; text-decoration: none !important; } /* Story */ .StoryContainer { margin: 45px 0; background: url(/assets/images/tile_story_text.jpg) no-repeat top right #fff; } /* Story Symbol Panel */ .StorySymbol { width: 30%; float: left; color: #fff; min-height: 200px; } .StorySymbol article { margin: 45px 25px; } .StorySymbol h3 { color: #fff; } /* Story Text Panel */ .StoryText { width: 65%; float: left; line-height: 22px; } .StoryText article { margin: 25px 35px; } .StoryKikorangi { background: url(/assets/images/tile_kikorangi.jpg) no-repeat #30463d; background-size: cover; /*contain;*/ background-position: 50% 50%; } /* Blue Strand */ .StoryKakariki { background: url(/assets/images/tile_kakariki.jpg) no-repeat #30463d; background-size: cover; /*contain;*/ background-position: 50% 50%; } /* Green Strand */ .StoryKaraka { background: url(/assets/images/tile_karaka.jpg) no-repeat #30463d; background-size: cover; /*contain;*/ background-position: 50% 50%; } /* Orange Strand */ .StoryPongo { background: url(/assets/images/tile_pongo.jpg) no-repeat #30463d; background-size: cover; /*contain;*/ background-position: 50% 50%; } /* Black Strand */ /* CPD */ .Table-CPD-Domains { width: 100%; border: 2px solid #ccc; margin: 30px 0; } .Table-CPD-Domains th { vertical-align: top; text-align: center; color: #fff; width: 20%; font-size: 14px; line-height: 16px; padding: 20px 8px; } .Table-CPD-Domains td { padding: 20px 8px; font-size: 22px; } .Background-Teal { background-color: #224f5e; } /* */ .Background-Purple { background-color: #56123f; } /* CME */ .Background-Dark-Red { background-color: #8c1c24; } /* OM */ .Background-Orange { background-color: #e88032; } /* RRP */ .Background-Light-Teal { background-color: #4a809a; } /* CS */ .CPD-Domain-CME { background-color: #fdf3fa; } .CPD-Domain-OM { background-color: #fbf0f3; } .CPD-Domain-RRP { background-color: #fbefe3; } .CPD-Domain-CS { background-color: #e7f9fa; } .Table-CPD-Grading { width: 100%; border: 2px solid #ccc; margin: 30px 0; } .Table-CPD-Grading th { vertical-align: top; text-align: center; font-size: 14px; line-height: 16px; padding: 12px 8px; border-bottom: 1px solid #DEDEDE; border-left: 1px solid #ccc; } .Table-CPD-Grading td { padding: 10px 8px; font-size: 12px; vertical-align: top; border-left: 1px solid #ccc; border-bottom: 1px solid #DEDEDE; } .Grade-Excellence { width: 17%; background-color: #7fac55; } .Grade-Good { width: 17%; background-color: #7fac55; } .Grade-Satisfactory { width: 17%; background-color: #7fac55; } .Grade-Unsatisfactory { width: 17%; background-color: #f4c243; } .Grade-Fail { width: 17%; background-color: #ea6762; } /* Main container to align panels in a row */ .panel-container { display: flex; max-width: 1200px; /* Adjust width as needed */ margin: auto; } /* Spacing adjustments for the first and last columns */ .panel-container .panel:first-child { margin-left: 0; /* Remove left gap */ } .panel-container .panel:last-child { margin-right: 0; /* Remove right gap */ } /* Default gap between columns, except on the outer sides */ .panel + .panel { margin-left: 20px; /* White space between columns */ } /* Each individual panel */ .panel { flex: 1; display: flex; flex-direction: column; border: 1px solid #ddd; padding: 14px; } /* Panel header styling */ .panel-header { font-size: 15px; line-height: 18px; text-align: center; padding: 10px; border-radius: 4px; color: #fff; } /* Force equal height for all headers */ .panel-header { /*display: flex;*/ align-items: center; min-height: 60px; /* Adjust height as needed */ } /* Panel text content styling */ .panel-content { flex-grow: 1; /* Fills remaining space */ padding: 10px; font-size: 13px; line-height: 17px; } /* Responsive adjustments */ @media (max-width: 992px) { /* Stack into two columns for tablets */ .panel-container { flex-wrap: wrap; gap: 20px; } .panel { flex: 1 1 calc(50% - 20px); /* Two columns */ } .panel-header { min-height: 30px; /* Adjust height as needed */ padding-top: 15px; } } @media (max-width: 600px) { /* Stack into a single column for mobile */ .panel-container { flex-direction: column; } .panel { flex: 1 1 100%; margin: 0; /* Remove side margins */ } } /* CME TABLE */ .Table-CME { width: 100%; border: 2px solid #ccc; margin: 30px 0; background-color: #fff; } .Table-CME th { vertical-align: top; color: #fff; background-color: #56123f; font-size: 16px; line-height: 22px; padding: 10px 14px; } .Table-CME th small { font-weight: normal; } .Table-CME td { padding: 8px; font-size: 14px; line-height: 17px; vertical-align: top; border-bottom: 1px solid #ccc; } .Table-CME ul { margin: 0; } .Table-CME-SubHead { background-color: #fdf3fa; } /* OM TABLE */ .Table-OM { width: 100%; border: 2px solid #ccc; margin: 30px 0; background-color: #fff; } .Table-OM th { vertical-align: top; color: #fff; background-color: #8c1c24; font-size: 16px; line-height: 22px; padding: 10px 14px; } .Table-OM th small { font-weight: normal; } .Table-OM td { padding: 8px; font-size: 14px; line-height: 17px; vertical-align: top; border-bottom: 1px solid #ccc; } .Table-OM ul { margin: 0; } .Table-OM-SubHead { background-color: #fbf0f3; } /* RRP TABLE */ .Table-RRP { width: 100%; border: 2px solid #ccc; margin: 30px 0; background-color: #fff; } .Table-RRP th { vertical-align: top; color: #fff; background-color: #e88032; font-size: 16px; line-height: 22px; padding: 10px 14px; } .Table-RRP th small { font-weight: normal; } .Table-RRP td { padding: 8px; font-size: 14px; line-height: 17px; vertical-align: top; border-bottom: 1px solid #ccc; } .Table-RRP ul { margin: 0; } .Table-RRP-SubHead { background-color: #fbefe3; } /* CS TABLE */ .Table-CS { width: 100%; border: 2px solid #ccc; margin: 30px 0; background-color: #fff; } .Table-CS th { vertical-align: top; color: #fff; background-color: #4a809a; font-size: 16px; line-height: 22px; padding: 10px 14px; } .Table-CS th small { font-weight: normal; } .Table-CS td { padding: 8px; font-size: 14px; line-height: 17px; vertical-align: top; border-bottom: 1px solid #ccc; } .Table-CS ul { margin: 0; } .Table-CS-SubHead { background-color: #e7f9fa; } /* streamSWEET additional Fonts ===================== */ .TextStd { } .TextEmphasis { color: #999; font-style: italic; } .TextBold { font-weight: bold; } .TextSml1 { font-size: 12px; color: #666; line-height: 14px; } .TextSml2 { font-size: 11px; color: #999; } .TextLarge { font-size: 18px; } .TextQuote { font-size: 16px; font-weight: bold; color: #4898d4; line-height: 22px; font-style: italic; } .TextLabel { font-size: 12px; color: #777 !important; vertical-align: top; } .TextInstruct { font-size: 12px; color: #999; font-style: italic; } .TextNoData { color: #999; padding: 20px 5px 10px 5px; display: block; } .TextTime { font-weight: normal; } .TextDate { font-weight: bold; } /* Font - Legacy Support until replaced throughout the code. Meantime manually align with h1 h2 etc tags above and text classes used above. ===================== */ .Head1 { font-size: 36px; line-height: 42px; font-weight: normal; color: #384f7b; } .Head2 { font-size: 28px; line-height: 36px; font-weight: normal; color: #333; } .Head3 { font-size: 20px; line-height: 28px; font-weight: normal; color: #384f7b; } .Head4 { font-size: 14px; line-height: 18px; font-weight: bold; color: #3182e0; } .Text1 { font-size: 12px; color: #000; } .Text2 { font-size: 12px; color: #999; } .Text3 { font-size: 12px; color: #999; font-style: italic; } .TextStrong { font-weight: bold; } /* ======================================================================================== */ /* ======================================================================================== */ /* Template Layout */ /* ======================================================================================== */ /* ======================================================================================== */ /* First level full screen width horizontal containers for each logical section of content. Set vertical padding, background colours/images, height (if explicit) */ .ShellUserDetail { padding: 0 0; background-color: #f5f5f5; } .ShellLogoMenuHome { padding: 8px 0; background-color: #32829c; z-index: 1000; height: 160px; transition: all 0.3s; } /*.ShellLogoMenu {padding:8px 0; background-color:#32829c; z-index:1000; height:78px; transition:all 0.3s;}*/ .ShellLogoBanner { padding: 8px 0; z-index: 1000; height: 160px; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; background: url(/assets/images/banner_background.gif) right no-repeat #33829c; } .ShellMenu { padding: 0; background-color: #275b6c; position: relative; z-index: 1001; height: 60px; } .ShellHero { padding: 0; background-color: #ccc; z-index: 10; } .ShellContentStd { padding: 20px 0 30px 0; background-color: #fff; min-height: 500px; } .ShellFooter { padding: 70px 0; background-color: #275b6c; } .ShellBottom { padding: 10px 0; } /* For Admin Footer */ .FooterColor { background-color: #275b6c; } /* Second level container, nested within each logical section of the page per above. Set horizontal alignment, usable width and position (to give an anchor for nested elements with position handling). */ .SectionWrapper { margin: 0 auto; position: relative; max-width: 1380px; width: 96%; } /* Template specific layout handlers */ /* Home ===================== */ .hContent1 { width: 90%; padding: 0; background-color: #fff; text-align: left; vertical-align: top; margin-left: auto; margin-right: auto; } /* Content 1 */ .hContent2 { padding: 0px 0px 20px 0; text-align: left; vertical-align: top; } /* Content 2 */ /* Content - Standard ===================== */ .cNavSub { padding: 0px 0px 5px 0px; background-color: #fff; vertical-align: top; } .cContent1 { width: 94%; padding: 10px 0; background-color: #fff; text-align: left; vertical-align: top; margin-left: auto; margin-right: auto; } /* Content 1 */ .cContent2 { padding: 0px 0px 20px 0; text-align: left; vertical-align: top; } /* Content 2 */ /* Container for User Login Text/Name*/ .cLogin { float: right; /*background-color:#fff;*/ padding: 0 24px; margin: 10px; font-size: 13px; } .cLogin a:link, .cLogin a:visited { color: #5da6cb; text-decoration: none; } .cLogin a:hover, .cLogin a:active { color: #333; text-decoration: underline; } /* Container for basket */ .cBasket { margin: 5px 50px 0 0; float: right; color: #7F7F7F; } .cBasket a:link, .cBasket a:visited { color: #7F7F7F; text-decoration: none; text-align: right; } .cBasket a:hover, .cBasket a:active { text-decoration: underline; color: #5da6cb } .BasketIcon { float: left; margin-top: 4px; } .BasketCount { float: left; padding-top: 6px; line-height: normal; } /* Footer ===================== */ .FooterText { font-size: 9px; color: #666; line-height: 15px; } .FooterText a:link, .FooterText a:visited { color: #666; text-decoration: underline; } .FooterText a:hover, .FooterText a:active { color: #f60; text-decoration: underline; } /* Custom Footer Navigation */ /* GRID OF FOUR */ .span_1_of_4Footer { width: 23.8%; } .FooterNavText { color: #fff; font-size: 14px; line-height: 18px; font-weight: 200; } .FooterNavText a:link, .FooterNavText a:visited { color: #fff; text-decoration: none; } .FooterNavText a:hover, .FooterNavText a:active { color: #fff; text-decoration: underline; } .ShellFooter hr { border-top-width: 2px; border-top-style: solid; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-color: #a7a7a7; margin-right: 0px; margin-left: 0px; } .FooterSocialIcons { float: left; margin: 5px; } /* Material Icons */ .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* WebKit */ -webkit-font-smoothing: antialiased; /* Chrome */ text-rendering: optimizeLegibility; /* Firefox */ -moz-osx-font-smoothing: grayscale; /* IE */ font-feature-settings: 'liga'; } /* Rules for sizing the icons. */ .material-icons.md-14 { font-size: 14px; } .material-icons.md-16 { font-size: 16px; } .material-icons.md-18 { font-size: 18px; } .material-icons.md-24 { font-size: 24px; } .material-icons.md-30 { font-size: 30px; } .material-icons.md-36 { font-size: 36px; } .material-icons.md-48 { font-size: 48px; } /* Rules for using icons as black on a light background. */ .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } /* Rules for using icons as white on a dark background. */ .material-icons.md-light { color: rgba(255, 255, 255, 1); } .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } /* ======================================================================================== */ /* ======================================================================================== */ /* Navigation */ /* ======================================================================================== */ /* ======================================================================================== */ /* Responsive Menu ===================== */ /* Menu bar setup */ #nav { z-index: 10000; position: absolute; top: 0; } /* 300px indent to allow for Logo */ #nav > a { display: none; } /* Generic */ #nav ul { list-style-type: none; margin: 0; padding: 0; font-weight: 400; } #nav li { position: relative; text-align: left; } #nav li a { display: block; text-decoration: none; } /* First level */ #nav > ul > li { display: inline-block; } #nav > ul > li > a { color: #fff; font-size: 18px; padding: 18px 20px 14px 20px; } #nav > ul > li.NavParent > a:after { /*content:'\25BC'; font-size:10px; color:#888; position:absolute; top:28px; right:5px;*/ } #nav > ul > li.NavParent > a:hover { cursor: context-menu; } #nav > ul > li.NavSelected > a { color: #88c6d3; } #nav > ul > li.NavSelected > a:after { color: #5b9bb0; } #nav > ul > li:hover > a, #nav > ul > li:hover > a:after { color: #000; background-color: #fff; /*background-color:#224f5e;*/ } /* Second level */ #nav > ul > li > ul { z-index: 10001; width: 220px; position: absolute; top: calc(100% - 4px); overflow: hidden; padding: 0; max-height: 0; opacity: 0; transition: padding 0.0s, max-height 1.5s, opacity 0.5s; background-color: #fff; } #nav > ul > li:hover > ul { padding: 0; max-height: 800px; opacity: 1; overflow: visible; border: 1px solid #ccc; /*border-radius:4px;*/ } #nav > ul > li > ul > li > a { font-size: 14px; padding: 8px 15px; color: #008dcc; border-bottom: 1px solid #ccc; } #nav > ul > li > ul > li.NavParent > a:after { /*content:'\25BA'; font-size:10px; color:#5b9bb0; position:absolute; top:8px; right:5px;*/ } #nav > ul > li > ul > li:hover > a, #nav > ul > li > ul > li:hover > a:after { background-color: #f2f2f2; } /* Third level. !*!* Note that JQuery is used to set the left/right offset value AND flyout direction of the 2nd level flyout on the last element in the main nav. master_jq.js --> // FLYOUT MENU */ #nav > ul > li > ul > li > ul { z-index: 10002; position: absolute; top: -5px; left: calc(100% - 4px); padding: 0; width: 0; max-height: 0; opacity: 0; transition: padding 0.0s, width 0.0s, max-height 1.5s, opacity 0.75s; background-color: #fff; } #nav > ul > li > ul > li:hover > ul { padding: 0; width: 220px; max-height: 800px; opacity: 1; border: 1px solid #ccc } #nav > ul > li > ul > li > ul > li { display: none; } /* without this, the LI elements have size and were wrongly triggering hover events. */ #nav > ul > li > ul > li:hover > ul > li { display: block; } #nav > ul > li > ul > li > ul > li > a { font-size: 14px; padding: 8px 15px; color: #008dcc; border-bottom: 1px solid #ccc; } #nav > ul > li > ul > li > ul > li > a:hover { background-color: #f2f2f2; } /* Second level Sub Nav - Vertical ===================== */ #navSub, #navSub ul { width: 90%; list-style: none; font-size: 15px; line-height: 15px; padding: 0; margin: 0; } #navSub .sel { background-color: #eff5f7; color: #275b6c; background-image: url(/assets/images/arrow_subnav_1_on.svg); } #navSub a { display: block; color: #33829c; text-decoration: none; } #navSub li { margin: 4px 0; padding: 0px; background: url(/assets/images/arrow_subnav_1.svg) 10px 10px no-repeat; list-style: none; } #navSub li a { width: 90%; w\idth: 85%; padding: 10px 5px 10px 36px; background: url(/assets/images/arrow_subnav_1.svg) 10px 10px no-repeat; } #navSub li ul { border: 0; } #navSub li li .sel { background-color: #eff5f7; color: #275b6c; background-image: url(/assets/images/arrow_subnav_2_on.svg); } #navSub li li { margin: 0px; padding: 0px; background: url(/assets/images/arrow_subnav_2.svg) 26px 10px no-repeat; } #navSub li li a { width: 90%; w\idth: 85%; padding: 10px 5px 10px 50px; background: url(/assets/images/arrow_subnav_2.svg) 26px 10px no-repeat; } #navSub a:hover { background-color: #eff5f7; color: #33829c; transition: all 0.5s linear; } /* Second level Sub Nav - Horizontal ===================== */ .navSubH { font-size: 10px; color: #5d6786; line-height: 14px; } .navSubH a:link { color: #5d6786; text-decoration: none; } .navSubH a:visited { color: #666; text-decoration: none; } .navSubH a:active, .navSubH a:hover { color: #f60; text-decoration: underline; } /* Breadcrumbs Nav ===================== */ .MenuBCrumb { font-size: 10px; color: #333; font-weight: bold; } .MenuBCrumb a:link, .menuBCrumb a:visited { color: #666; text-decoration: none; } .MenuBCrumb a:active, .menuBCrumb a:hover { color: #a60e0e; text-decoration: underline; } /* Bottom Text Nav ===================== */ .MenuBotL1 { font-size: 12px; color: #ccc; line-height: 14px; margin-top: 35px; } .MenuBotL1 a:link { color: #32829c; text-decoration: underline; } .MenuBotL1 a:visited { color: #32829c; text-decoration: underline; } .MenuBotL1 a:active, .MenuBotL1 a:hover { color: #5da6cb; text-decoration: underline; } .MenuBotL1 span { padding: 0 5px 0 5px; color: #7c939a; } .MenuBotL2 { font-size: 12px; color: #ccc; line-height: 14px; margin-top: 10px; } .MenuBotL2 a:link { color: #32829c; text-decoration: underline; } .MenuBotL2 a:visited { color: #32829c; text-decoration: underline; } .MenuBotL2 a:active, .MenuBotL2 a:hover { color: #5da6cb; text-decoration: underline; } .MenuBotL2 span { padding: 0 5px 0 5px; color: #7c939a; } /* Main Logo */ .LogoMain { z-index: 10005; position: relative; left: 3%; top: 0; width: 285px; display: block; transition: all 0.3s; } /* Keep 'display:block;' otherwise MS Edge fails on image size!! --- Edge works 100% if a width/height is given */ /* streamSWEET Branding */ .streamSWEETLogo { float: right; margin: 20px auto; } /* group is used to replace clearfix */ .group:after { content: ""; display: table; clear: both; } /* Sticky Panel */ .sticky { position: -webkit-sticky; position: sticky; top: 0; z-index: 2000; } .sticky:before, .sticky:after { content: ' '; display: table; } /* Sticky top logo / Navigation row resize handling. Triggered by JavaScript function "init" ===================== */ header.HdrSmaller { height: 66px; padding: 3px 0; } .HdrSmaller .LogoMain { width: 120px; } .HdrSmaller .SignUpLink { top: 5px; font-size: 14px; } .HdrSmaller #nav > ul > li > a { padding: 7px 20px; } .HdrSmaller #nav > ul > li > ul { top: calc(100%); } .HdrSmaller #nav > ul > li.NavParent > a:after { top: 8px; } .HdrSmaller .Biline { font-size: 14px; line-height: 17px; margin: 24px 0 0 0; } /* Sign Up Button */ .SignUpLink { position: absolute; right: 0; top: 20px; text-align: center; font-weight: 300; padding: 5px 25px; font-size: 18px; line-height: normal; display: inline-block; border-radius: 2px; z-index: 10009; background-color: #e8762c; transition: all 0.3s; } a.SignUpLink:link, a.SignUpLink:visited { text-decoration: none; color: #fff; } a.SignUpLink:hover, a.SignUpLink:active { text-decoration: none; color: #fff; background-color: #254c6f; transition: all 0.3s ease; } /* Add an item to the basket - animated flydown ===================== */ .BasketPreview { display: block; animation: BasketAdd 20.0s forwards; opacity: 0; width: 400px; max-width: calc(95vw - 40px); padding: 5px 10px 16px 10px; background-color: #fff; border: 1px solid #ccc; box-shadow: 4px 4px 8px 0px #ccc; position: fixed; top: 20px; right: 5%; z-index: 10000; overflow: hidden; } .BasketPreview:target { display: none; } .BasketPreview > a { display: block; } /* Close Button */ .CloseIt { float: right; vertical-align: middle; margin: 5px 10px 12px 5px; padding: 4px 16px 3px 12px; font-size: 12px; line-height: 12px; border: 1px solid transparent; border-radius: 12px; } .CloseIt span { position: relative; top: -2px; left: 4px; } /* align text with icon */ .CloseIt a:hover { border: 1px solid #ccc; transition: all 1.0s ease; } /* Product Info */ .BasketPreviewName { float: left; padding: 3px 10px; font-size: 12px; } .BasketPreviewPrice { font-weight: 700; } /* View Cart Link */ .BasketPreviewCart { float: right; } .CartLink { float: right; vertical-align: middle; margin: 3px; color: #fff; border: 1px solid #ccc; background-color: #f8f8f8; padding: 3px 20px 3px 16px; font-size: 12px; line-height: 12px; border-radius: 5px; } .CartLink span { position: relative; top: -3px; left: 3px; } /* align text with icon */ .CartLink:hover { border-color: #3eb7ed; box-shadow: 0 0 3px 3px rgba(76, 76, 76, 0.1); transition: all 1.0s ease; } @keyframes BasketAdd { 0% { top: -200px; } 5% { top: 20px; opacity: 1.0; } 90% { top: 20px; opacity: 1.0; } 95% { top: 20px; opacity: 0.5; } 99% { opacity: 0.0; } 100% { top: -9000px; } } /* Added heading styles where we do not want to use h1, h2 etc */ .Heading1 { font-size: 18px; line-height: 22px; height: 38px; vertical-align: top; color: #1c374a; font-weight: bold; background-color: #f8f8f8; padding: 0 0 0 20px; border: 1px solid #ccc; border-top-left-radius: 6px; border-top-right-radius: 6px; overflow: hidden; } .Heading1 span, .Heading1 div { float: left; margin-top: 8px; } .Heading1 div { float: left; margin-top: 1px; } .Heading1 .BtnAddNew { border-top-right-radius: 6px; color: #1c374a; height: 38px; } .Heading2 { font-size: 16px; line-height: 20px; height: 34px; color: #1c374a; font-weight: normal; padding: 0 0 0 10px; vertical-align: top; background-color: #dfe3ea; overflow: hidden; } .Heading2Top { font-size: 16px; line-height: 20px; height: 34px; color: #1c374a; font-weight: normal; padding: 0 0 0 10px; vertical-align: top; background-color: #d3dce0; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid #ccc; border-bottom: 0; overflow: hidden; } .Heading2 span, .Heading2Top span { float: left; margin-top: 6px; } .Heading2 div, .Heading2Top div { float: left; margin-top: 1px; } .Heading2 aside, .Heading2Top aside { float: right; margin: 3px 10px 0 0; } .Heading2Top .BtnAddNew { border-top-right-radius: 4px; color: #1c374a; } .Heading2Top i { color: #1c374a !important; } .Heading2Top select { float: right; margin: 2px 10px 0 0 !important; height: 20px !important; font-size: 11px; border-radius: 3px; } .Heading3 { font-size: 12px; line-height: 17px; color: #1c374a; font-weight: bold; padding: 4px 5px 4px 8px !important; background-color: #e8eefa; overflow: hidden; border-bottom: 1px solid #d1d8e8; margin: 0; } .Heading3Top { font-size: 12px; line-height: 17px; height: 20px; color: #1c374a; font-weight: bold; padding: 0 0 0 5px; vertical-align: top; background-color: #e8eefa; border-top-left-radius: 4px; border-top-right-radius: 4px; overflow: hidden; } .Heading3 span, .Heading3Top span, .Heading3 div, .Heading3Top div { float: left; margin-top: 1px; } .Heading3 > a { float: right; margin-right: 5px; } .Heading3Top .BtnAddNew { border-top-right-radius: 3px; } /* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */ /* CONTENT LAYOUT - DIV based (being phased IN) */ /* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */ /* Main Content Area - Admin */ .ContentShell { overflow: hidden; padding: 0 5px 10px 5px; border-color: #eee; border-width: 0 1px 1px 1px; border-style: solid; background-color: #fcfcfc; min-height: 600px; } .ContentColSet1Left { width: 30%; float: left; } .ContentColSet1Right { width: 70%; float: right; } .ContentColSet2Left { width: 40%; float: left; } .ContentColSet2Right { width: 60%; float: right; } .ContentColSet3Left { width: 50%; float: left; } .ContentColSet3Right { width: 50%; float: right; } .ContentColSet4Left { width: 65%; float: left; } .ContentColSet4Right { width: 35%; float: right; } .ContentColContRight { margin-left: 8px; } /* Panels within content area - Admin */ .PanelShell { margin: 13px 0 0 0; } .PanelShellTop { margin: 0; } /* Occasionally needed for a panel that sits at the top, where spacing is already applied at the container level*/ .PanelContainTable { border: solid 1px #ccc; background-color: #efefef; background-image: linear-gradient(0deg, #efefef, #fff 90%); } .PanelContainText { padding: 10px; border: solid 1px #ccc; background-color: #efefef; background-image: linear-gradient(0deg, #efefef, #fff 90%); border-top-left-radius: 4px; border-top-right-radius: 4px; } .PanelContainTextSquare { padding: 10px; border: solid 1px #ccc; background-color: #efefef; background-image: linear-gradient(0deg, #efefef, #fff 90%); } .PanelContainChart { padding: 10px; border: solid 1px #ccc; background-color: #efefef; background-image: linear-gradient(0deg, #efefef, #fff 90%); border-radius: 5px; } .PanelContainTree { border-style: solid; border-width: 0 1px 1px 1px; border-color: #ccc; background-color: #efefef; background-image: linear-gradient(0deg, #efefef, #fff 90%); padding: 10px 5px 25px 5px; } .PanelContainColumns { overflow: hidden; } .PanelContainRow { overflow: hidden; background-color: #fff; border-top: 1px solid #ccc; padding: 6px; } .PanelContainRow:hover { background-color: #fcfce3; } .PanelContainRow img { border: 1px solid #ccc; } .PanelContainImgCrop { position: relative; width: 600px; } /* if desired to change container size, you must update class level variable inside ItemFileImageCrop control to match*/ .PanelTabsContentTelerik { margin-top: -1px; border: 1px solid #ccc; padding: 13px 10px 10px 10px; background-color: #fff; overflow: hidden; } .PanelContentItemSet { margin: 15px 10px 0 10px; } .PanelContentItemSet > span { display: block; line-height: 16px; } .PanelAccount { position: absolute; right: 75px; top: 0; padding-top: 5px; font-size: 14px; } .PanelAccountBasket { display: inline-block; margin: 0 30px 0 0; } .PanelAccountBasketCount { color: #f00; font-weight: bold; } .PanelLoginAccount { display: inline-block; } .PanelLoginAccount { color: #666; } .PanelLoginAccount a { } .PanelLoginAccount a:hover { color: #006f98; } .ChangeButton { background-color: #333; padding: 3px 8px; border-radius: 3px; } .PanelLoginOuter1 { position: fixed; top: 0; width: 100%; z-index: 10005; } .PanelLoginOuter2 { margin: 0 auto; max-width: 1100px; position: relative; } .PanelLogin { margin: 0 auto; background-color: #f5f5f5; padding: 15px 30px; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 5px solid #999; } .PanelLoginCont { position: absolute; top: 0; right: 150px; height: 0; overflow: hidden; } .PanelLogin input { display: inline-block; margin: 5px 0 !important; } .PanelLoginHide { float: right; margin: -20px -20px 50px 0; color: #666; padding: 0 10px; border: 1px solid transparent; } .PanelLoginHide:hover { border: 1px solid #000; background-color: #fff; cursor: pointer; } .PanelLoginProfile { background-color: #f5f5f5; padding: 15px 30px; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 5px solid #999; width: 300px; font-size: 14px; } .PanelLoginProfileCont { position: absolute; top: 0; right: 50px; height: 0; overflow: hidden; } .PanelLoginProfile a:link, .PanelLoginProfile a:visited { color: #69646c; } .PanelLoginProfile a:hover, .PanelLoginProfile a:active { color: #ff8c0a; } .PanelLoginProfileSelect { font-size: 12px; padding: 3px 10px; } /* Address Handling*/ /* data-address fields:Name, NameTradingAs, Building, StreetPOBox, Suburb, TownCity, PostZipCode, StateProvince, Country, Email, Phone*/ /* Note that for each country we may have custom formating, with several fields in one line. In those instances use first field data-address name i.e. TownCity for Auckland 1001*/ .PanelAddress > span { display: block; } .PanelAddress { margin: 15px 5px 5px 5px; font-size: 13px; line-height: 18px; } .PanelAddress span[data-address=Name], .PanelAddress span[data-address=NameTradingAs] { font-size: 18px; line-height: 24px; } .PanelAddress span[data-address=Email] { margin-top: 15px; } .PanelAddressBilling > span { display: block; } .PanelAddressBilling { margin: 15px 5px 5px 5px; font-size: 13px; line-height: 17px; } .PanelAddressBilling span[data-address=Name], .PanelAddress span[data-address=NameTradingAs] { font-size: 18px; line-height: 24px; } .PanelAddressBilling span[data-address=Email] { margin-top: 15px; } .PanelAddressDelivery > span { display: block; } .PanelAddressDelivery { margin: 15px 5px 5px 5px; font-size: 13px; line-height: 17px; } .PanelAddressDelivery span[data-address=Name], .PanelAddress span[data-address=NameTradingAs] { font-size: 18px; line-height: 24px; } .PanelAddressDelivery span[data-address=Phone] { margin-top: 15px; } /* ======================================================================================== */ /* ======================================================================================== */ /* Content - Coded outputs */ /* ======================================================================================== */ /* ======================================================================================== */ /* Responsive Containers */ /* Video */ .VideoDetailOuter { max-width: 1000px; margin: 0 auto; padding: 20px 2%; } /* iframe */ .iframe43 { position: relative; height: 0; overflow: hidden; padding-bottom: 75%; } /* Aspect ratio is achieved through "padding-bottom".... 75% = 4x3; 56.25% = 16x9. */ .iframe16x9 { position: relative; height: 0; overflow: hidden; padding-bottom: 56.25%; } /* Aspect ratio is achieved through "padding-bottom".... 75% = 4x3; 56.25% = 16x9. */ .iframe43, .iframe16x9 iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Container for the DIV based Map handling */ .containerMap { width: 100%; } .outerMap { position: relative; width: 100%; padding-top: 75%; } .innerMap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .GoogleMapInfoWindow { min-height: 100px; min-width: 200px; } .GoogleMapHeading1 { font-weight: bold; color: #11598a; } .GoogleMapText1 { font-size: 10px; } /* St No. */ .GoogleMapText2 { font-size: 10px; color: #000; } /* Suburb. */ .GoogleMapText3 { font-size: 10px; color: #000; } /* City. */ .GoogleMapText4 { font-size: 10px; color: #000; } /* Country. */ .GoogleMapText5 { font-size: 10px; color: #000; padding: 7px 0; } /* Phone. */ .GoogleMapText6 { font-size: 10px; color: #3488c1; } /* Web Address */ .GoogleMapText7 { font-size: 10px; color: #000; } /* Business type. */ .GoogleMapText8 { font-size: 10px; color: #000; } /* Untried as yet */ .GoogleMapText9 { font-size: 10px; color: #000; } /* Untried as yet */ .GoogleMapText10 { font-size: 10px; color: #000; } /* Untried as yet */ .GoogleMapButton { text-align: center; text-shadow: 0px 2px #0c1c5d; font-weight: 700; padding: 3px 20px; margin: 15px auto; font-size: 14px; line-height: normal; display: inline-block; border-radius: 5px; background-color: #0099ff; background-image: linear-gradient(0deg, #296abf, #1d327b 90%); cursor: pointer; } a.GoogleMapButton:link, a.GoogleMapButton:visited { text-decoration: none; color: #fff; } a.GoogleMapButton:hover, a.GoogleMapButton:active { text-decoration: none; background-color: #2a6abf; background-image: linear-gradient(0deg, #0099ff, #2a6abf 90%); transition: all 0.3s ease; } .GMapResultTable { margin-bottom: 20px; line-height: 1.5; border-top: 1px solid #bdbebf; background-color: #fff; width: 99%; } .GMapResultTable th { background-color: #11598a; font-weight: 300; color: #fff; padding: 10px; } .GMapResultTable tr { border-bottom: 1px solid #cdd6e1; } .GMapResultTable tr:hover { background-color: #f3f5f8; } .GMapResultTable td { font-size: 14px; padding: 12px 8px; /*vertical-align:top;*/ } .GMapResultTable td > h4 { margin: 4px 0 6px 0; } .GMapResultTableSubHead { color: #939598; font-weight: bold; } .GMapResultCol1 { width: 70%; } .GMapResultCol2 { width: 15%; } .GMapResultCol3 { width: 15%; } .GMapResultCol4 { width: 15%; } /* Table ===================== */ .TableBorder { background-color: #fff; border: 1px solid #888; margin-top: 1px; } .TableBasic { border: none; width: 100%; border-collapse: collapse; } .TableBasic td { padding: 0; } .TableInfoLayout { width: 100%; border-collapse: collapse; } .TableInfoLayout > tbody > tr > th { text-align: left; font-size: 12px; color: #333; font-weight: bold; padding: 3px 5px 2px 10px !important; border: 1px solid #bebebe; background-color: #efefef; background-image: linear-gradient(0deg, #efefef, #fff 90%); } .TableInfoLayout > tbody > tr > td { text-align: left; vertical-align: top; padding: 7px 3px 3px 3px; } .TableInfoLayout > tbody > tr:first-of-type > td { padding: 10px 3px 3px 3px; } /* should probably be reworked, because this has been moved from rugby for a handful of controls that we placed in streamSWEET. */ /* These controls are still not made part of the system properly, so we can either update them to use generic styles, or remove styles and controls */ /* usercontrol\SHOP\Payment\Front\CreditsLogBought.ascx */ /* usercontrol\front\custom\CreditsLogUsed.ascx */ /* usercontrol\front\Network\FriendsResultsList.ascx */ /* usercontrol\front\Network\MyFriends.ascx */ .AccountTable { margin-bottom: 6px; } .AccountTable td { padding: 4px 2px; } .AccountTable th { text-align: left; background-color: #fff; border: 2px solid #cde9b4; font-size: 15px; padding: 6px; background-image: url(/assets/images/tile_header_profile.jpg); background-repeat: repeat-x; } .AccountTableLeft { text-align: left; font-weight: bold; background-color: #fff; border-top: 2px solid #cde9b4; border-left: 2px solid #cde9b4; border-bottom: 2px solid #cde9b4; font-size: 15px; padding: 6px; background-image: url(/assets/images/tile_header_profile.jpg); background-repeat: repeat-x; } .AccountTableCenter { text-align: left; font-weight: bold; background-color: #fff; border-top: 2px solid #cde9b4; border-bottom: 2px solid #cde9b4; font-size: 15px; padding: 6px; background-image: url(/assets/images/tile_header_profile.jpg); background-repeat: repeat-x; } .AccountTableRight { text-align: left; font-weight: bold; background-color: #fff; border-top: 2px solid #cde9b4; border-right: 2px solid #cde9b4; border-bottom: 2px solid #cde9b4; font-size: 15px; padding: 6px; background-image: url(/assets/images/tile_header_profile.jpg); background-repeat: repeat-x; } .AccountTableSub { background-image: url(/assets/images/tile_account_sub.jpg); background-repeat: repeat-x; border-bottom: 1px solid #ccc; } /* Also from TR */ .TableInformation { padding: 2px; border: 1px solid #cde9b4; background-color: #fafcfa; width: 100%; max-width: 1200px; } .TableInformation th { font-size: 12px; color: #000; background-image: url(/assets/images/tile_header_profile.jpg); background-repeat: repeat-x; text-align: left; padding: 5px; border-bottom: 2px solid #cde9b4; } .TableInformationSub { font-size: 12px; padding: 4px; border-bottom: 2px solid #cde9b4; background-color: #ccc; } .TableInformation td { padding: 3px; vertical-align: top; border-bottom: 1px dashed #cde9b4; line-height: normal; } .TableAddAttendees { margin-top: 25px !important; } .TableAddAttendees caption { text-align: left; padding-left: 5px; font-size: 12px; font-style: italic; } /* streamSWEET predefined tables ===================== */ .Table1 { border-collapse: collapse; border: 1px solid #b7b8b8; } .Table1Head { background-color: #3c3c3c; padding: 5px 5px 5px 3px; font-size: 14px; font-weight: bold; color: #f7f7f7; text-align: left; border: 1px solid #b7b8b8; } .Table1SubHead { background-color: #d4d4d4; padding: 3px 3px 3px 3px; font-size: 12px; font-weight: bold; border-top: 1px solid #b7b8b8; border-bottom: 1px solid #b7b8b8; } .Table1Content { background-color: #fbfbfb; padding: 2px 2px 2px 3px; font-size: 12px; border-top: 1px solid #b7b8b8; border-bottom: 1px solid #b7b8b8; } .FormContItemFile { width: 90%; max-width: 800px; border-collapse: collapse; border: 1px solid #ccc; } .FormContItemFile td { padding: 2px; } /* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */ /* Data Repeater*/ /* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */ .TableDataRepeat { width: 100%; border-collapse: collapse; } .TableDataRepeat caption { text-align: left; font-size: 14px; color: #4b5267; font-weight: bold; padding: 7px 5px 4px 10px; border-color: #ccc; border-style: solid; border-width: 1px 1px 0 1px; border-top-left-radius: 4px; border-top-right-radius: 4px; } .TableDataRepeat th { font-size: 12px; color: #4b5267; font-weight: normal; text-align: left; padding: 6px; background-color: #e7edf0; } .TableDataRepeat td { font-size: 12px; text-align: left; padding: 6px; } .TableDataRepeat td a { text-decoration: none; display: block; } .TableDataRepeat td a:hover { text-decoration: none; color: #f30; } .TableDataRepeat tr:nth-child(even) { background-color: #fff; border-bottom: 1px solid #fff; } .TableDataRepeat tr:nth-child(odd) { background-color: #efefef; border-bottom: 1px solid #efefef; } .TableDataRepeat tr:hover { background-color: #fcfce3; border-bottom: 1px solid #c4c4b5; } .TableDataRepeat address { line-height: normal; font-style: normal; margin: 5px; } .TableDataRepeat address > a { margin-top: 5px; } /* Data Grid ===================== */ /* Note. There is a level of repetition and !important handling on the grid rows to override default Telerik values applied, where Telerik Grid is used. */ .datagridTable { color: #f60; background-color: #fff; width: 100%; } .dataGridCont { border-width: 0 1px 1px 1px; border-style: sold; border-color: #999; } .dataGridCont img { display: inline-block; margin: 0; vertical-align: middle; } .datagrid { background-color: #fefefe; width: 100%; } .datagrid td { padding: 0 1px 0 4px !important; font-size: 12px; border-top: 1px solid #ddd; height: 26px; } .datagrid td a { text-decoration: none; display: block; } .datagrid td a:before { content: ''; height: 100%; display: inline-block; vertical-align: middle; } .datagrid tr:first-of-type td a { height: 100%; white-space: nowrap; display: block; } /* Custom hanlding for the sortable Header Row */ .datagrid tr:last-of-type td { border-bottom: 1px solid transparent; } /* Stop the bottom row from vertical jumping - applicable where pagination exists */ .datagrid tr td:last-of-type { padding-right: 3px !important; } /* Make sure we have suitable white space at the right hand edge of the grid */ .datagridAlter { background-color: #f5f5f5; } .datagridAlter td { padding: 0 1px 0 4px !important; font-size: 12px; border-top: 1px solid #ddd; height: 26px; } .datagridAlter td a { text-decoration: none; display: block; } .datagridAlter td a:before { content: ''; height: 100%; display: inline-block; vertical-align: middle; } .datagridSelected { background-color: #dfe6cf; } .datagridSelected td { padding: 0 1px 0 4px !important; font-size: 12px; border-top: 1px solid #999; border-bottom: 1px solid #999; height: 26px; } .datagridSelected td a { text-decoration: none; display: block; } .datagridSelected td a:before { content: ''; height: 100%; display: inline-block; vertical-align: middle; } .datagridOver { background-color: #fcfce3; } .datagridOver td { padding: 0 1px 0 4px !important; font-size: 12px; border-top: 1px solid #999; border-bottom: 1px solid #999; height: 26px; } .datagridOver td a { text-decoration: none; display: block; } .datagridOver td a:before { content: ''; height: 100%; display: inline-block; vertical-align: middle; } /* datagridHeader is only applied to the header row of non-sortable, non drag n drop grids. */ .datagridHeader { padding: 0; } .datagridHeader td { padding: 4px 2px 4px 4px; } /* Extra handling for the Header Row */ .datagridColumn { color: #2d4285; background-color: #C3CAD6; background-image: linear-gradient(0deg, #C3CAD6, #EBEFF5 90%); } .datagridColumn a:link, .datagridColumn a:visited, .datagridColumn a:active { text-decoration: none; color: #2d4285; } .datagridColumn a:hover { color: #f30; } .datagridColumn a::after { content: "\21F5"; margin-left: 4px; color: transparent; } .datagridColumn a:hover::after { content: "\21F5"; margin-left: 4px; color: #333; } .datagridColumnSelected { color: #2d4285; background-color: #C3CAD6; background-image: linear-gradient(0deg, #C3CAD6, #EBEFF5 90%); } .datagridColumnSelected a:link, .datagridColumnSelected a:visited, .datagridColumnSelected a:active { text-decoration: none; color: #2d4285; } .datagridColumnSelected a::after { content: "\21F5"; margin-left: 5px; color: #333; } /*\21C5 \21E7 \21E9 \2191 \2193 */ .datagridColumnSelected a:hover { color: #f30; } /*Format pagination handling. */ .datagridPager td { height: 35px; font-size: 14px; color: #006; font-weight: normal; background-color: #fff; padding: 8px 40px 6px 0 !important; text-align: right; vertical-align: bottom; border-top: 1px solid #999; } .datagridPager td span { padding: 0 5px 0 5px; font-weight: bold; } .datagridPager td a { padding: 0 8px; margin: 0 1px 0 0; color: #999; font-weight: normal; border: 1px solid #666; display: inline-block; line-height: 20px; height: 24px; border-radius: 3px; } .datagridPager td a:hover { background-color: #555; border-color: #000; color: #fff; font-weight: bold; } /*Apply colours to key columns with data such as "Yes" and "No" so they stand out more. */ .datagridRed { font-size: 11px; color: #006; font-weight: normal; background-color: #ffd9d9; } .datagridGreen { font-size: 11px; color: #006; font-weight: normal; background-color: #d0ffce; } .datagridOrange { font-size: 11px; color: #006; font-weight: normal; background-color: #ffe6b0; } /* RadGrid - used for drag and drop grid */ .HypergridTableHeader { overflow: hidden; width: 100%; table-layout: fixed; empty-cells: show; border-collapse: collapse; } .HypergridTableHeader th { padding: 4px 2px 4px 4px; } .DivDragDropImage { margin-left: auto; margin-right: auto; width: 16px; height: 16px; text-align: center; background-image: url(/assets/images/icon_sort_up_down.gif); } .RadGridDragDropEnabled { cursor: move; } .rgPager .rgCurrentPage { text-decoration: none; color: Black; } .rgPager .rgInfoPart { display: none; } .rgMasterTable { border-collapse: collapse !important; } .rgMasterTable tr th { vertical-align: bottom; } .rgMasterTable tr:last-of-type td { border-bottom: 1px solid #999; } .rgFooterWrapper { border-top: 2px solid #999; padding-top: 5px; color: #4b5267 !important; font-size: 11px; } /* TABS PANEL - Used for presentation of content in a tabbed view. This handles the tabs that sit in Div which sits directly above a content panel. */ .Tabs { font-size: 0; padding: 0 10px 0 10px; border-bottom: 1px solid #ccc; } .Tabs a { background-color: #f5f5f2; text-align: center; border: 1px solid #ccc; border-top-left-radius: 4px; border-top-right-radius: 4px; margin-bottom: -1px; vertical-align: bottom; color: #999; padding: 7px 14px 5px 14px; font-size: 14px; display: inline-block; } .Tabs:not(a:first-of-type) { margin-left: -1px; } .Tabs a:hover, .Tabs a:link, .Tabs a:visited, .Tabs a:active { color: #999; text-decoration: none; } .Tabs a:hover { background-color: #fff; } .Tabs .TabsOn { background-color: #fff; border-bottom: 1px solid #fff; padding: 9px 14px 6px 14px !important; } .Tabs .TabsOn a:link, .Tabs .TabsOn a:visited, .Tabs .TabsOn a:active, .Tabs .TabsOn a:hover { color: #999; text-decoration: none; } /* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */ /* Telerik Tabs */ /* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */ /* Overrides to get the base environment as Stream needs it. Note this CSS Class "PanelTabsContentTelerik" (above) which is set to margin-top:-1px; */ .RadTabStrip .rtsLevel1 { border: none !important; } .RadTabStrip .rtsLink { border: none !important; } .RadTabStrip .rtsUL { border-bottom: 1px solid transparent; margin-bottom: 0 !important; } /* Primary handling - Class applies to the LI */ .RadTabStrip .RadTab { background-color: #f5f5f2; text-align: center; border: 1px solid #ccc; border-top-left-radius: 4px; border-top-right-radius: 4px; margin-bottom: -1px; vertical-align: bottom !important; } .RadTabStrip .RadTab:not(:first-child) { margin-left: -1px; } /* Control the various additional states that a tab can have */ .RadTabStrip .RadTabSelected { background-color: #fff; border-bottom: 1px solid #fff; } .RadTabStrip .RadTabHovered { background-color: #e5e5de; } .RadTabStrip .RadTabSelected.RadTabHovered { background-color: #fff; } .RadTabStrip .RadTabDisabled { color: #999; } /* Control how the text sits within the tab, and in doing so also control the overall height of each tab */ .RadTabStrip .rtsLink { padding: 7px 14px 5px 14px !important; } .RadTabStrip .RadTabSelected .rtsLink { padding: 9px 14px 6px 14px !important; } /* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */ /* Stream ===================== */ /* In-page alert and information panels */ .in-page-alert-panel { width: calc(100% - 126px); max-width: 800px; margin: 18px 10px; padding: 10px 30px 10px 70px; font-size: 1.1em; position: relative; min-height: 40px; } .in-page-alert-panel i { position: absolute; top: 15px; left: 10px; } .in-page-alert-panel p { color: #333; } .in-page-alert-panel a { font-weight: bolder; } .in-page-alert-title { font-size: 1.3em; } .in-page-alert-emphasis { font-style: italic; } .in-page-alert-btn { margin: 20px 10px 15px 10px; } .in-page-alert-note { background-color: #eaf7fd; border-left: 6px solid #2d465d; } .in-page-alert-note i { color: #2d465d; } .in-page-alert-warning { background-color: #fff8d0; border-left: 6px solid #ff9c2b; } .in-page-alert-warning i { color: #ff9c2b; } .in-page-alert-error { background-color: #f9e1df; border-left: 6px solid #e83724; } .in-page-alert-error i { color: #e83724; } /* ################ */ /* In-page alert and information panels */ .PanelInPageAlert { max-width: 800px; margin: 18px 10px; padding: 16px 20px; font-size: 1.2em; } .PanelInPageAlert i { float: left; margin: 0 auto; width: 8%; min-width: 50px; } .PanelInPageAlert p { float: left; margin: 4px 0 0 0; width: 85%; color: #333; } .Note { background-color: #eaf7fd; border-left: 6px solid #2d465d; } .Note i { color: #2d465d; } .Warning { background-color: #fff8d0; border-left: 6px solid #ff9c2b; } .Warning i { color: #ff9c2b; } .Error { background-color: #f9e1df; border-left: 6px solid #e83724; } .Error i { color: #e83724; } /* ################ */ .PanelInPageAlertTitle { font-size: 1.3em; } .PanelInPageAlertEmphasis { font-style: italic; } .PanelInPageAlert a { font-weight: bolder; } .PanelInPageInform { width: 80%; max-width: 800px; margin: 10px; padding: 14px 10px 14px 70px; font-size: 1.2em; background-color: #ffc; border: 1px solid #fc0; border-radius: 2px; box-shadow: 0 0 20px 0px #ccc; background-image: url('/assets/admin/images/icon_warning_sign.svg'); background-repeat: no-repeat; background-position: 16px 16px; } /* Alert Message Handling - Appears at bottom right of screen after content/form updates */ .AlertBox { width: 350px; margin: 0; padding: 0; border-radius: 3px; box-shadow: 0 0 20px 0px #ccc; overflow: hidden; cursor: auto; position: fixed; bottom: 20px; right: 20px; z-index: 10000; } .AlertBoxInner { padding: 10px 10px 10px 70px; overflow: hidden; z-index: 9999; } .AlertBoxTitle { margin: 5px 0 0 0; font-size: 24px; font-weight: bold; color: #333; } .AlertBoxText { margin: 15px 10px 10px 0; font-size: 1.1em; color: #333; } .AlertBoxSuccess { background-color: #e0fcd0; border: 1px solid #b0cba7; animation: ActionSuccess 10.0s forwards; } /*Green Box */ .AlertBoxInnerSuccess { background-image: url('/assets/images/msg_type_01_01.svg'); background-repeat: no-repeat; background-position: 5px 10px; } .AlertBoxError { background-color: #f9d6d5; border: 1px solid #cf756a; animation: ActionAlert 1.5s forwards; } /* Red Box */ .AlertBoxInnerError { background-image: url('/assets/images/msg_type_02_01.svg'); background-repeat: no-repeat; background-position: 5px 10px; } .AlertBoxInfo { background-color: #fff8d0; border: 1px solid #dac48f; animation: ActionAlert 1.5s forwards; } /* Orange Box */ .AlertBoxInnerInfo { background-image: url('/assets/images/msg_type_03_01.svg'); background-repeat: no-repeat; background-position: 5px 10px; } @keyframes ActionSuccess { 0% { right: -360px; } 5% { right: 40px; opacity: 0.6; } 8% { right: 10px; opacity: 1.0; } 10% { right: 27px; } 12% { right: 17px; } 13% { right: 22px; } 14% { right: 20px; } 80% { opacity: 1.0; } 99% { right: 20px; opacity: 0.0; } 100% { right: -1000px; opacity: 0.0; } } @keyframes ActionAlert { 0% { right: -360px; } 50% { right: 40px; opacity: 1.0; } 70% { right: 10px; } 85% { right: 27px; } 90% { right: 17px; } 95% { right: 22px; } 100% { right: 20px; } } /* No Results Handling */ .AlertNoResult { padding: 20px 10px 20px 20px; border: 1px solid #e5e5e5; background: #f7f7f7; margin: 30px auto; } .AlertNoResultIcon { float: left; width: 7%; margin-right: 10px; color: #F93; text-align: center; } .AlertNoResultText { float: left; width: 88%; font-size: 18px; line-height: 24px; padding: 5px; } /* Error Pages */ .ErrorBox { margin-left: auto; margin-right: auto; width: 65%; max-width: 800px; margin-top: 60px; border-top: 9px solid #FF0; background-color: #96aebb; padding: 60px 60px; color: #fff; box-shadow: 0 0 10px 10px rgba(76, 76, 76, 0.1); } .ErrorBox h1 { color: #fff !important; } .ErrorBox h2 { color: #ff0 !important; } .ErrorBox p { color: #3c515c !important; } .ErrorBox hr { border-top-width: 4px; border-top-style: solid; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-color: #b9c7ce; margin-right: 0px; margin-left: 0px; } .ErrorLink { margin-left: auto; margin-right: auto; width: 65%; padding: 30px; } .ErrorIcon { font-size: 120px !important; } /* Telerik ===================== */ .RadTabStrip a:active, .RadTabStrip a:hover { color: #f60 !important; } .TabDisabled { color: #999; } /* Over-ride telerik generated styles */ .rwControlButtons li { list-style-type: none; } .rcbHeader ul, .rcbHeader ul li, .rcbFooter ul, .rcbFooter ul li, .rcbItem ul, .rcbItem ul li, .rcbHovered ul, .rcbHovered ul li, .rcbDisabled ul, .rcbDisabled ul li { list-style-type: none !important; margin: 0px; padding: 0px; } .RadWinManager { z-index: 9999999; } /* to make rad windows show above everything else */ /* Modal ===================== */ .ModalBackground { background-color: Gray; } .ModalPopup { display: none; } /* Tool Tip ===================== */ /* File Upload ===================== */ .FileUploadHeader { font-size: 12px; font-weight: bold; color: #464c55; background-color: #c1d82f; padding: 4px; border-bottom: 1px solid #666; } /* Ajax Popup ===================== */ /* shop */ .FormTopPopup { background-image: url(/assets/images/tile_stripe.jpg); background-repeat: repeat-x; color: #fff; font-weight: bold; padding-left: 15px; } .FormButtonPopup { padding: 6px 12px 6px 12px; font-size: 14px; color: #393b4a; background-image: url(/assets/images/tile_ajaxform_header.jpg); background-repeat: repeat-x; background-color: #b0becd; text-decoration: none; } /* feedback only */ .FormTablePopup { padding: 0; margin-left: auto; margin-right: auto; background-color: #fff; } /* carried from rugby - PayPal popup, Login Message popup */ .FormHeaderPopup { padding: 5px 30px; font-size: 16px; font-weight: bold; color: #fff; background-image: url(/assets/images/tile_ajaxform_header.jpg); background-repeat: repeat-x; } .FormHeaderPopup { padding: 3px; font-size: 14px; font-weight: bold; color: #393b4a; background-image: url(/assets/images/tile_ajaxform_header.jpg); background-repeat: repeat-x; } /* \PayPal_HTML.aspx */ /* \usercontrol\SHOP\Payment\Front\CreditsBuy.ascx */ .CreditDisplay { font-size: 14px; color: #000; padding: 6px 10px; background-color: #dbefde; border: 1px solid #6eaf4e; } /* PayPal popup - \PayPal_HTML.aspx */ .TableBuyStuff { width: 100%; margin: 10px 0px; border-top: 2px solid #000; border-bottom: 2px solid #000; } .TableBuyStuff th { background-color: #f1eded; padding: 4px; } .TableBuyStuff td { padding: 4px; } /* BUY NOW POP-UP */ /* ref:http://www.sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/ */ #fade { display: none; background: #000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: .80; z-index: 9999; } .popup_block { display: none; background: #fff; padding: 0px; border: 2px solid #ddd; float: left; position: fixed; top: 50%; left: 50%; z-index: 99999; } /* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */ /* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */ /* FORMS */ /* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */ /* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */ /* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */ /* Forms :: Layout (Note. The 'section' element is used to show panels of content based on user selection) */ /* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */ .FormSetHor, .FormSetVert { border: 1px solid #ccc; border-top-left-radius: 5px; border-top-right-radius: 5px; background-color: #fefefe; margin-bottom: 10px; } .FormSetHor > section, .FormSetVert > section, .FormSetHor .FormSetHor, .FormSetVert .FormSetVert { margin: 0; padding: 0; border: none; width: 100%; } /*On occasion we need 'sub form' layout, so make it appear as though it is part of the standard form.*/ .FormSetHor > h1, .FormSetVert > h1 { font-size: 20px; font-weight: 400; background-color: #e2ebef; margin: 10px 0 0 0; padding: 10px 10px 5px 10px; } .FormSetHor > h2, .FormSetVert > h2 { font-size: 20px; font-weight: 400; background-color: #e2ebef; margin: 10px 0 0 0; padding: 18px 18px 16px 20px; } .FormSetHor > h2:first-of-type, .FormSetVert > h2:first-of-type { margin: 0; border-top-left-radius: 5px; border-top-right-radius: 5px; } .FormSetHor > h3, .FormSetHor > section > h3, .FormSetVert > h3, .FormSetVert > section > h3 { font-size: 16px; font-weight: 400; background-color: #e2ebef; margin: 10px 0 0 0; padding: 14px 14px 14px 20px; } .FormSetHor > h3:first-child, .FormSetHor > section > h3:first-child, .FormSetVert > h3:first-child, .FormSetVert > section > h3:first-child { margin: 0; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 10px 15px; line-height: 20px; } /* For when used as a top heading where sub-level forms are needed. */ .FormSetHor > div, .FormSetHor > section > div, .FormSetVert > div, .FormSetVert > section > div { padding: 10px 10px 0 10px; } .FormSetHor > div:last-of-type, .FormSetVert > div:last-of-type { padding-bottom: 10px; } .FormSetHor > div > div:nth-of-type(1), .FormSetHor > section > div > div:nth-of-type(1) { width: 25%; min-width: 150px; max-width: 200px; font-size: 14px; color: #666; display: inline-block; } .FormSetHor > div > div:nth-of-type(2), .FormSetHor > section > div > div:nth-of-type(2) { width: 70%; max-width: 850px; display: inline-block; position: relative; } .FormSetVert > div > div:nth-of-type(1), .FormSetVert > section > div > div:nth-of-type(1) { width: 95%; min-width: 200px; max-width: 95%; font-size: 14px; color: #666; padding: 0 0 5px 0; } .FormSetVert > div > div:nth-of-type(2), .FormSetVert > section > div > div:nth-of-type(2) { width: 95%; position: relative; max-width: 850px; } /* Forms that do not require any heading rows */ .FormSetFilter { border: 1px solid #ccc; border-top-left-radius: 5px; border-top-right-radius: 5px; background-color: #fefefe; margin-bottom: 10px; } .FormSetFilter > div { padding: 10px 10px 0 10px; } .FormSetFilter > div:last-of-type { padding-bottom: 10px; } .FormSetFilter > div > div:nth-of-type(1) { width: 25%; min-width: 150px; max-width: 200px; font-size: 14px; color: #666; display: inline-block; } .FormSetFilter > div > div:nth-of-type(2) { width: 70%; max-width: 850px; display: inline-block; position: relative; } /* Globally handle vertical alignment */ .FormSetHor > div > div, .FormSetHor > section > div > div, .FormSetFilter > div > div { vertical-align: top; } .FormSetHor > div > div:nth-child(2) > *, .FormSetHor > section > div > div:nth-child(2) > *, .FormSetVert > div > div:nth-child(2) > *, .FormSetVert > section > div > div:nth-child(2) > *, .FormSetFilter > div > div:nth-child(2) > * { /*vertical-align:top;*/ } /* Get the vertical alignment fully consistent */ /* Provide for inline help text */ .FormSetHor aside, .FormSetVert aside, .FormSetFilter aside { font-size: 14px; color: #999; font-style: italic; padding: 4px 0; max-width: calc(100% - 10px); } .FormSetHor > aside, .FormSetVert > aside, .FormSetFilter > aside { font-size: 14px; padding: 15px; max-width: calc(100% - 30px); } .FormSetHor aside .FormRequiredFieldNarrow, .FormSetVert aside .FormRequiredFieldNarrow { font-style: normal; } /* Provide for situations where Text is presented in place of a form field */ .FormSetHor > div > div:nth-of-type(2) > span, .FormSetHor > section > div > div:nth-of-type(2) > span, .FormSetVert > div > div:nth-of-type(2) > span, .FormSetVert > section > div > div:nth-of-type(2) > span { font-size: 1.2em; } /* This is no longer used on forms but is still used in the display of LEGACY shopping invoices, CPD, activity history, etc */ .FormTable { margin-top: 30px; margin-bottom: 30px; background-color: #fff; -webkit-box-shadow: 0 0 4px 4px rgba(76, 76, 76, 0.1); -moz-box-shadow: 0 0 4px 4px rgba(76, 76, 76, 0.1); box-shadow: 0 0 4px 4px rgba(76, 76, 76, 0.1); } .FormTable th { font-size: 24px; color: #333; font-weight: 300; padding: 18px 10px 18px 18px; background-color: #fafafa; text-align: left; border-bottom: 3px solid #e8e8e8; } .FormTable td { font-size: 16px; color: #333; font-weight: 300; padding: 6px 15px; } .FormTableHead { font-size: 14px; color: #41ae35; font-weight: bold; padding: 7px 5px 5px 15px; border-left: 4px solid #41ae35; } .FormCellHeadSub { font-size: 14px; font-weight: 300; background-color: #fafafa !important; } .InstructTextSml { font-size: 10px; color: #999; } .FormRequired { font-size: 14px; color: #f60; } .ErrStdRed { font-size: 14px; color: #f00; vertical-align: top } /* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */ /* Forms :: Generic styling of elements */ /* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */ .FormInvalid { background-color: #eaced1 !important; } /* IC: important useful when dealing with telerik */ /* Causes a star to display after mandatory form elements - apply class to a trailing span */ .FormRequiredField::after { content: "\25c9"; color: #fa613e; font-size: 12px; position: absolute; top: 0; left: calc(90% + 5px); } .FormRequiredFieldNarrow::after { content: "\25c9"; color: #fa613e; font-size: 12px; margin-left: 5px; vertical-align: top; } /* Default form element styling */ input[type="text"], input[type="number"], input[type="password"], textarea { display: inline-block; padding: 6px; font-size: 16px; color: #000; background-color: #fbfbfb; border: 1px solid #e5e5e5; } input[type="text"], input[type="number"], input[type="password"] { height: 24px !important; margin: 0 5px 0 0; } .RadInput input[type="number"] { width: 100px !important; padding: 6px 0 6px 6px !important; font-size: 16px !important; color: #000 !important; background-color: #fbfbfb !important; border: 1px solid #e5e5e5 !important; height: 30px !important; margin: 0 5px 0 0 !important; } select { display: inline-block; padding: 2px; margin: 0 5px 0 0; font-size: 12px; color: #000; background-color: #fff; border: 2px solid #888; height: 36px; } /* Padding, border and margin are REDUCED from the 'height'.*/ fieldset { width: 90%; max-width: 800px; border: 2px solid #ccc; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; margin: 0 5px; font-size: 12px; font-weight: normal; } label { padding: 0 3px 0 10px; vertical-align: top; line-height: 16px; } .RadInput_Default input[type="text"] { height: 32px !important; padding: 5px !important; font-size: 14px !important; color: #000 !important; background-color: #fff !important; border: 1px solid #bbb !important; margin: 0 20px 0 0 !important; } /* Telerik in their wisdom set: box-sizing:border-box; so padding and margin etc do not alter the set size.*/ /* Give a HOVER effect to form elements */ input[type="text"]:hover, input[type="number"]:hover, input[type="password"]:hover, textarea:hover, select:hover { border: 1px solid #333; } input[type="checkbox"]:hover, input[type="radio"]:hover { cursor: pointer; color: #f60; } label:hover { cursor: pointer; color: #f60; } .RadInput_Default input[type="text"]:hover { border: 1px solid #333 !important; } .RadComboBox input[type="text"]:hover { border: none; } /* Change the appearance on FOCUS of a form element */ textarea:focus, input:focus, select:focus { outline: none; box-shadow: 0 0 10px 0px #ccc; } input[type="text"]:focus, input[type="number"]:focus, textarea:focus { background-color: #fffaed; border: 1px solid #333; } input[type="button"]:focus { background-color: #fffaed; } .RadInput_Default input[type="text"]:focus { background-color: #fffaed !important; } .RadComboBox input:focus { background-color: #fff !important; } /* Stop above styling affecting rad combo box*/ .rcbInputCell input[type="text"]:hover { border: initial !important; } .rcbInputCell input[type="text"]:focus { background-color: initial !important; outline: initial !important; box-shadow: initial !important; } /* Change the appearance if the element is disabled */ textarea:disabled, input:disabled, select:disabled, submit:disabled { box-shadow: 0 0 8px 0px #fab9b9; } /* Form element standard widths. Note the 'calc' handling, to account for padding and bordres etc and ensure the contained form elements match exactly their set % width. */ textarea { width: calc(100% - 12px); max-width: 800px; height: 75px; } /* Assumed to ALWAYS be in a maxchar DIV */ input[type="text"] { width: calc(90% - 19px); max-width: 800px; } input[type="file"] { width: 100px !important; } select { width: 200px; } .FormWidthLong { width: 400px !important; } .FormWidthMedium { width: 200px !important; } .FormWidthShort { width: 100px !important; } .FormWidthTiny { width: 50px !important; } .FormTextAreaLarge1 { font-size: 12px; width: 90%; max-width: 1200px; height: 400px; } .FormTextAreaLarge2 { font-size: 12px; width: 90%; max-width: 1200px; height: 700px; } .FormTextAreaLarge3 { font-size: 12px; width: 90%; max-width: 1200px; height: 200px; } .FormTextAreaSmall1 { font-size: 12px; height: 60px; } .FormTextAreaCodeSnippet { font-size: 10px; background-color: #f4f4f4; color: #2d4285; height: 50px; } .FormTextAreaEmailPreview { width: 100%; max-width: 1200px; height: 700px; border: none; } .CheckboxMultiCol td { padding-right: 15px; } /* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */ /* Forms :: Containers */ /* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */ /* Wrap form elements and special sets of form elements to solves issues where the element is made up of multiple parts and/or comes from Telerik. This goes last as it often applies over-ride values The standard width is calc(90% - 5px) to ensure no overlap. Some widths vary to suport contained elements with dodgy code, sch as: width:100%; border:1px solid #000; */ /* ItemFile control - applied at the central control level */ .FormContItemFile { width: calc(90% - 2px); max-width: 800px; border-collapse: collapse; border: 1px solid #ccc; background-color: #efefef; } .FormContItemFile caption { text-align: left; font-size: 14px; color: #4b5267; font-weight: bold; padding: 7px 5px 4px 10px; border-color: #ccc; border-style: solid; border-width: 1px 1px 0 1px; background-color: #efefef; background-image: linear-gradient(0deg, #efefef, #fff 90%); border-top-left-radius: 4px; border-top-right-radius: 4px; } .FormContItemFile td { padding: 7px 3px 3px 3px; } .FormContItemFile tr:first-of-type td { padding: 10px 3px 3px 3px; } .FormContFileUp { } .FormContFileUp input[type="text"] { width: 300px; } .FormContFileUp input[type="file"] { width: 65px !important; } .FormContFileUp input[type="file"]:hover { cursor: pointer; } /* Telerik overrides to get the presentation in line with streamSWEET standard */ .FormContFileUp .ruFileWrap { height: 32px !important; } .FormContFileUp .ruFakeInput { height: 18px !important; padding: 5px !important; font-size: 14px !important; border: 2px solid #e5e5e5 !important; } .FormContFileUp .ruFakeInput:hover { border: 1px solid #333 !important; } .FormContFileUp .ruButton { height: 32px !important; background-image: none !important; padding: 2px 10px !important; font-size: 12px !important; color: #fff !important; background-color: #538bd0 !important; border-radius: 3px !important; } .FormContFileUp .ruButtonHover { background-color: #3f8f4b !important; } /* Over-ride default image handling for the Telerik tree view - apply to a containing DIV */ .FormContTree img { display: inline; } /* Remove expand/colaps icon (plus/minus) at top level node of a tree */ .RadTreeView > ul > li > div > span:nth-child(2) { display: none } /* Prev Next Links */ .NavTreePrevNext { width: 94%; margin: 10px auto; font-size: 12px; border-bottom: 1px solid #ccc; } .NavTreePrevNext span { padding: 4px 10px; border-radius: 8px; border: 1px solid #BABABA; margin: 4px 4px 8px; } .NavTreePrevNext span:hover { background-color: #fafafa; border: 1px solid #458cc7; } /* Over-ride default form element settings for auto-complete search box - apply to a containing DIV */ .FormContAutoComplete { width: 202px !important; float: left; margin: 0 5px 0 0; height: 24px; border: 1px solid #ccc; color: #666 !important; background-color: #fff; } .FormContAutoComplete .RadComboBox_Default .rcbInputCell, .FormContAutoComplete .RadComboBox_Default .rcbArrowCell { background-image: none !important; padding: 0 !important; border: none !important; } .FormContAutoComplete .RadComboBox input[type="text"] { height: 24px !important; font-size: 16px !important; line-height: 24px !important; border: 0 !important; padding: 0 0 0 5px !important; } /* Handle issues created by the JQuery that handles the MaxChar functionality on TEXTAREA - apply to a containing DIV */ .FormContTextAreaMaxChar { width: calc(90% - 5px); max-width: 800px; display: inline-block; margin: 0 5px 0 0; } /* Use this when the inner element (the TEXTAREA) has a fixed width, and that in turn is used to set the overall width / alignment of the 'required' marker. */ .FormContTextAreaMaxCharNoWidth { max-width: 800px; display: inline-block; margin: 0; } .maxlength-feedback { font-size: 12px; color: #ccc; } /* Over-ride default table cell formatting for the Telerik HTML editor and apply a max width - apply to a containing DIV */ .FormContHtmlEdit { width: calc(90% - 2px); max-width: 800px; display: inline-block; } .FormContHtmlEditWide { width: calc(90% - 2px); max-width: 1000px; display: inline-block; } .FormContHtmlEdit td, .FormContHtmlEditWide td { padding: 0 !important; } /* Wrap a Telerik Editor with a Div and apply this Class, otherwise inherited cellpadding causes the editor layout to mess up. */ .FormContHtmlEdit textarea, .FormContHtmlEditWide textarea { border: none !important; max-width: none !important; } /* Over-ride default settings for the Telerik Date Picker - apply to a containing DIV */ .FormContDate { padding: 0; display: inline-block; margin-right: 10px; } .FormContDate > div, .FormContDate > div > table { width: 140px !important; } .FormContDate td > span > input:first-of-type { height: 32px !important; margin-top: -1px !important; padding: 5px !important; } /* Contain radio button in a controlled manner */ .FormContRadioSet { max-width: 800px; display: inline-block; } .FormContRadioSet td { padding: 0 10px 0 0; } .FormContRadioSet td label { line-height: 1.5em; } /* Contain a checkbox list where C# is set to present using a table layout and it includes the LABEL tag. Apply to the "asp:CheckBoxList" control as CssClass="FormContCheckboxStd" */ .FormContCheckboxStd { width: calc(100% - 20px); } .FormContCheckboxStd td { padding-top: 8px; line-height: 1.2em; } .FormContCheckboxStd input[type="checkbox"] { vertical-align: top; margin-top: 2px; } .FormContCheckboxStd label { vertical-align: top; display: inline-block; max-width: calc(100% - 30px); } /* Contain a checkbox with a manually applied label. Put the list in a container DIV and then element in further nested DIV's */ .FormContCheckbox { width: calc(100% - 20px); display: inline-block; } .FormContCheckbox > div { display: inline-block; vertical-align: top; } .FormContCheckbox > div:nth-child(1) { width: 25px; } .FormContCheckbox > div:nth-child(2) { width: calc(100% - 100px); } /* Special handling to make a nice 'QUICK search' that appears at the top right of the screen, typically within an admin module */ .ContQuickSearch { right: 30px; position: absolute; top: 88px; width: 250px; } .ContQuickSearch input[type="text"] { margin: 0; display: block; float: left; } /* Special handling to make a nice 'FILTER search' where multiple form elements sit on a single row */ .ContFilterSearch { overflow: hidden; } .ContFilterSearch img, .ContFilterSearch input[type="text"], .ContFilterSearch input[type="password"], .ContFilterSearch select, .ContFilterSearch input[type="button"], .ContFilterSearch input[type="submit"], .ContFilterSearch span, .ContFilterSearch .FormContDate { display: block; float: left; } /* Give nice layout of the form buttons that sit at the bottom of each form - apply to a containing DIV */ .ContFormSubmit { overflow: hidden; margin: 10px 0 20px 5px; } /*Special handling for 'Groups' where added data is requested after ticking a checkbox. This 'slides' the textbox into view on the user ticking the related checkbox. Note! Assumes only 1 checkbox per GroupSet.*/ .GroupCheckboxList tr, .GroupCheckboxList td { width: 100%; } .GroupCheckboxList label { margin-left: 10px; line-height: 1.5em; } .GroupCheckboxList input[type="checkbox"] { margin-top: 5px; } .GroupCheckboxList input[type="checkbox"], .GroupCheckboxList label, .GroupCheckboxList input[type="text"] { display: block; float: left; } .GroupCheckboxList input[type="text"] { margin: -3px 0 0 10px; visibility: hidden; width: 0; transition: width 1.0s; -webkit-transition: width 1.0s } .GroupCheckboxList input[type="checkbox"]:checked + input[type="text"] { visibility: visible; width: 150px; } .GroupCheckboxList input[type="checkbox"]:checked + label + input[type="text"] { visibility: visible; width: 150px; } /* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */ /* Forms :: Buttons */ /* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */ /* Applied 'OnClick' event to disable the button from being double clicked */ submit:disabled { box-shadow: 0 0 8px 0px #fab9b9; background-color: #993300; cursor: progress; } .FormButtonSubmitted { background-color: #993300; cursor: progress; } /* Full size buttons */ .BtnAdd, .BtnUpdate, .BtnDelete, .BtnCancel, .BtnSearch, .BtnUpload, .BtnSubmit, .BtnClone, .BtnImport, .BtnArchive, .BtnGo, .BtnContinue, .BtnUpdateQty, .BtnUnlock, .BtnActivate, .BtnResendActivateEmail, .BtnSynch, .BtnPreview, .BtnReportShow, .BtnReportExport, .BtnSchedule, .BtnSend, .BtnSendTest, .BtnSendStop, .BtnClearUnsent, .BtnConfirm, .BtnBack, .BtnSelect, .BtnAssign, .BtnClose, .BtnCheck, .BtnSet, .BtnInvite, .BtnRemind, .BtnClear, .BtnCloseOff, .BtnRecalculate, .BtnValidate, .BtnRestore, .BtnYes, .BtnNo, .BtnEdit, .BtnLogin { margin: 0 5px 0 0; padding: 12px 28px; font-size: 16px; color: #fff; border: 0; background-color: #275b6c; cursor: pointer; border-radius: 4px; } .BtnAdd:hover, .BtnYes:hover { background-color: #3f8f4b; } .BtnDelete:hover, .BtnNo:hover { background-color: #8f3f43; } .BtnUpdate:hover, .BtnCancel:hover, .BtnSearch:hover, .BtnUpload:hover, .BtnSubmit:hover, .BtnClone:hover, .BtnImport:hover, .BtnArchive:hover, .BtnGo:hover, .BtnContinue:hover, .BtnUpdateQty:hover, .BtnUnlock:hover, .BtnActivate:hover, .BtnResendActivateEmail:hover, .BtnSynch:hover, .BtnPreview:hover, .BtnReportShow:hover, .BtnReportExport:hover, .BtnSchedule:hover, .BtnSend:hover, .BtnSendTest:hover, .BtnSendStop:hover, .BtnClearUnsent:hover, .BtnConfirm:hover, .BtnBack:hover, .BtnSelect:hover, .BtnAssign:hover, .BtnClose:hover, .BtnCheck:hover, .BtnSet:hover, .BtnInvite:hover, .BtnRemind:hover, .BtnClear:hover, .BtnCloseOff:hover, .BtnRecalculate:hover, .BtnValidate:hover, .BtnRestore:hover, .BtnEdit:hover, .BtnLogin:hover { background-color: #000; } .BtnAdd:focus, .BtnYes:focus { background-color: #3f8f4b; } .BtnDelete:focus, .BtnNo:focus { background-color: #8f3f43; } .BtnUpdate:focus, .BtnCancel:focus, .BtnSearch:focus, .BtnUpload:focus, .BtnSubmit:focus, .BtnClone:focus, .BtnImport:focus, .BtnArchive:focus, .BtnGo:focus, .BtnContinue:focus, .BtnUpdateQty:focus, .BtnUnlock:focus, .BtnActivate:focus, .BtnResendActivateEmail:focus, .BtnSynch:focus, .BtnPreview:focus, .BtnReportShow:focus, .BtnReportExport:focus, .BtnSchedule:focus, .BtnSend:focus, .BtnSendTest:focus, .BtnSendStop:focus, .BtnClearUnsent:focus, .BtnConfirm:focus, .BtnBack:focus, .BtnSelect:focus, .BtnAssign:focus, .BtnClose:focus, .BtnCheck:focus, .BtnSet:focus, .BtnInvite:focus, .BtnRemind:focus, .BtnClear:focus, .BtnCloseOff:focus, .BtnRecalculate:focus, .BtnValidate:focus, .BtnRestore:focus, .BtnEdit:focus, .BtnLogin:focus { background-color: #3f578f; } /* Small buttons (short to fit normal line height) */ .BtnSmlAdd, .BtnSmlUpdate, .BtnSmlSearch, .BtnSmlContinue, .BtnSmlSendTest, .BtnSmlReportShow, .BtnSmlSelect, .BtnSmlClear, .BtnSmlAssign, .BtnSmlGo, .BtnSmlYes, .BtnSmlNo { margin: 0 5px 0 0; padding: 1px 15px 3px 15px; border: 0; height: 24px; font-size: 12px; color: #fff; background-color: #275b6c; cursor: pointer; border-radius: 3px; } .BtnSmlAdd:hover, .BtnSmlYes:hover { background-color: #3f8f4b; } .BtnSmlNo:hover { background-color: #8f3f43; } .BtnSmlUpdate:hover, .BtnSmlSearch:hover, .BtnSmlContinue:hover, .BtnSmlSendTest:hover, .BtnSmlReportShow:hover, .BtnSmlSelect:hover, .BtnSmlClear:hover, .BtnSmlAssign:hover, .BtnSmlGo:hover { background-color: #000; } .BtnSmlAdd:focus, .BtnSmlYes:focus { background-color: #3f8f4b; } .BtnSmlNo:focus { background-color: #8f3f43; } .BtnSmlUpdate:focus, .BtnSmlSearch:focus, .BtnSmlContinue:focus, .BtnSmlSendTest:focus, .BtnSmlReportShow:focus, .BtnSmlSelect:focus, .BtnSmlClear:focus, .BtnSmlAssign:focus, .BtnSmlGo:focus { background-color: #3f578f; } /* custom button for the generic search at the top right of the screen */ .BtnSmlGoSearch { margin: 0 0 0 -7px; padding: 1px 5px 3px 5px; border: 0; height: 26px; font-size: 12px; color: #fff; background-color: #584b7a; background-image: linear-gradient(0deg, #584b7a, #bab3c9 90%); cursor: pointer; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .BtnSmlGoSearch:hover { background-color: #3f578f; } .BtnSmlGoSearch:focus { background-color: #3f578f; } /* Generic - create a new item button */ .BtnAddNew { background-color: transparent; margin: 0; padding: 0 10px 0 8px; font-size: 12px; height: 100%; border: none; cursor: pointer; color: #222; font-weight: normal; float: right; border: 1px solid transparent; } .BtnAddNew:hover, .BtnAddNew:focus { background-color: #b9faca; text-decoration: none; color: #222; border: 1px solid #57bd71; } /* Make a button that looks like Text that then looks like a button on hover */ .BtnText { color: #333; font-size: 100%; border: 1px solid transparent; padding: 5px 10px; background-color: transparent; cursor: pointer; border-radius: 4px; } .BtnText:hover, .BtnText:focus { border: 1px solid #333; background-color: #fff !important; } /* Update Shopping Cart Qty - make it more obvious */ .BtnTextShow { border: 1px solid #191e92; color: #fff; background-color: #191e92; animation-name: UpdateCartQty; animation-duration: 2s; animation-iteration-count: 20; -webkit-animation-name: UpdateCartQty; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: 20; } .BtnTextShow:hover, .BtnTextShow:focus { color: #90c6fc; } /* SHOPPING BASKET */ .ImgBtnBacketQtyUpdate .ImgBtnBacketQtyUpdateAlert { border: 1px solid #f00; background-color: #f3f3f3; } .ImgBtnBacketQtyUpdate:hover, .ImgBtnBacketQtyUpdate:focus { color: #522e91; border: 1px solid #999; background-color: #ddd; } /* A HREF Buttons ===================== */ .ButtonOrangeLge { background-color: #ff9c2b; text-align: center; padding: 4px 20px 4px 20px; margin: 10px 6px 10px 6px; border-radius: 4px; font-size: 16px; white-space: nowrap; } a.ButtonOrangeLge:link, a.ButtonOrangeLge:visited { color: #fff; text-decoration: none; } a.ButtonOrangeLge:hover, a.ButtonOrangeLge:active { background-color: #ffae52; } .ButtonA { background-color: #e9e9e9; text-align: center; padding: 3px 15px 3px 15px; margin: 0 6px; border-radius: 3px; } a.ButtonA:link, a.ButtonA:visited { color: #393b4a; text-decoration: none; } a.ButtonA:hover, a.ButtonA:active { color: #7a7a7a; background-color: #d7d7d7; text-decoration: none; } .ButtonALge { background-color: #ff9c2b; text-align: center; padding: 4px 20px 4px 20px; margin: 0 6px; border-radius: 4px; font-size: 16px; } a.ButtonALge:link, a.ButtonALge:visited { color: #393b4a; text-decoration: none; } a.ButtonALge:hover, a.ButtonALge:active { color: #7a7a7a; background-color: #d7d7d7; text-decoration: none; } /* Button Base */ /* New direction for standardising buttons */ .BtnBase { display: inline-block; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .BtnBase a { display: block; } .BtnLarge { font-size: 1.3rem; padding: 0.5rem 1.3rem; } /* Image Buttons ===================== */ /* EVENT */ /* IC:these were created/scheduled for conversion while ago, and finally put to use now. I got them updated with correct sizes and new path (/cpd/) */ .ImgBtnEventAdd { width: 165px; height: 42px; background: url(/assets/images/cpd/button_add_event.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; } .ImgBtnEventRemove { width: 165px; height: 42px; background: url(/assets/images/cpd/button_remove_event.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; } .ImgBtnEventFind { width: 67px; height: 33px; background: url(/assets/images/cpd/button_find_events.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; } .ImgBtnReportFind { width: 133px; height: 33px; background: url(/assets/images/cpd/button_find_report.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; } .ImgBtnEventBook { width: 125px; height: 33px; background: url(/assets/images/button_booknow.svg) no-repeat 0px 0px; margin: 10px 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; } .ImgBtnEventBook:hover { opacity: .8; } .ImgBtnEventBookLge { width: 193px; height: 51px; background: url(/assets/images/button_booknow_lge.svg) no-repeat 0px 0px; margin: 20px 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; } .ImgBtnEventBookLge:hover { opacity: .8; } /* EVENT MULTIPLE LOCATIONS */ .EventGridTable { width: 100%; margin-top: 20px; margin-bottom: 30px; background-color: #f6f7f5; } .EventGridTable th { background-color: #666; color: #fff; font-size: 12px; line-height: 15px; padding: 6px 5px; } .EventGridTable td { color: #000; font-size: 11px; font-size: 13px; padding: 3px; border-bottom: 1px solid #cfcfcf; } /* RUGBY SEARCH */ .ImgBtnSearchGo { width: 33px; height: 35px; background: url(/assets/images/button_search_go.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; } .ImgBtnSearchGoLarge { width: 36px; height: 28px; background: url(/assets/images/button_go_lge.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; } /* FEEDBACK BUTTONS */ .ImgBtnFeedbackSubmit { width: 186px; height: 38px; background: url(/assets/images/button_submit_feedback.svg) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; } .ImgBtnFeedbackIconPlus { width: 24px; height: 24px; background: url(/assets/images/icon_plus_feedback.svg) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; } .ImgBtnFeedbackIconPlus:hover { background: url(/assets/images/icon_plus_feedback_on.svg) no-repeat 0px 0px; } .ImgBtnFeedbackIconPicture { width: 24px; height: 24px; background: url(/assets/images/icon_picture_feedback.svg) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; } .ImgBtnFeedbackIconPicture:hover { background: url(/assets/images/icon_picture_feedback_on.svg) no-repeat 0px 0px; } /* CHECKOUT */ .BacktoCheckoutLink { background-color: #069; color: #fff; padding: 8px 20px; text-align: center; font-size: 12px; border-radius: 4px; } a.BacktoCheckoutLink:link, a.BacktoCheckoutLink:visited { color: #fff; text-decoration: none; display: block; } a.BacktoCheckoutLink:hover, a.BacktoCheckoutLink:active { color: #fff; text-decoration: none; background-color: #333; pointer: cursor; } /* MISC BUTTONS */ .ImgBtnSubmit { width: 101px; height: 29px; background: url(/assets/images/button_submit.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; } .ImgBtnSubmit:hover { opacity: .8; } .ImgButtonCloseBox { width: 101px; height: 31px; background: url(/assets/images/button_closebox.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; } .ImgBtnFind { width: 66px; height: 24px; background: url(/assets/images/button_find.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; } .ImgBtnTop { width: 141px; height: 34px; background: url(/assets/images/button_top.svg)no-repeat 0px 0px; margin: 20px 0 20px 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; text-align: center; font-size: 13px; line-height: 27px; } .ImgBtnTop a:link { text-decoration: none; display: block; width: 141px; height: 34px; margin: 0; } .ImgBtnTop:hover { background: url(/assets/images/button_top_on.svg) no-repeat 0px 0px; transition: all 0.9s ease; color: #3582a4; } .IconButton { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; background-color: #275b6c; padding: 8px 24px 8px 16px; border-radius: 4px; margin: 20px 0; } .IconButton:hover { cursor: pointer; background-color: #000; } /* Wider Version of this button to span across the container */ .IconButtonWide { display: inline-flex; width: 100%; align-items: center; justify-content: center; vertical-align: middle; background-color: #275b6c; padding: 8px 0; border-radius: 4px; margin: 20px 0; } .IconButtonWide:hover { cursor: pointer; background-color: #000; } a.WhiteLink:link, a.WhiteLink:visited { color: #fff; } /* Useful for making links behave like buttons */ /* IC:these are new classes, out of full ImageButton conversion */ .ImgBtnCPDPdfDownload { width: 132px; height: 25px; background: url(/assets/images/icon_download_report_pdf.png) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; } .ImgBtnCPDAddNew { width: 48px; height: 18px; background: url(/assets/images/CPD/button_addnew.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; } .ImgBtnLoginFeature { width: 101px; height: 29px; background: url(/assets/images/button_login.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; } /* A special link on the logged in user membership pages for a user to link through to the cancel tab */ .btn-cancel-membership { padding: 20px 40px 10px 0; text-align: right; } /* ======================================================================================== */ /* ======================================================================================== */ /* Modules - Shared */ /* ======================================================================================== */ /* ======================================================================================== */ /* Home Feature Controls ===================== */ .NewsHomeFeatureHead { padding: 5px; background-color: #ccc; } /* usercontrol\front\homepage\News.ascx */ .EventsHomeFeatureHead { padding: 5px; background-color: #ccc; } /* usercontrol\front\homepage\Events.ascx */ .CaseStudyFeatureHead { padding: 5px; background-color: #ccc; } /* usercontrol\front\homepage\CaseStudy.ascx */ .HomeCaseStudy { padding: 10px 0; border-bottom: 1px solid #ccc; } .FriendsPanel { padding: 2px; } .FriendsPanelHeader { padding: 3px 5px; background-color: #e6e6e6; font-size: 11px; } /* Homepage Hero */ .HeroPosition { margin: 0 auto; } /* HERO - STATIC ===================== */ .HeroPanel { width: 60%; margin: 90px 0; color: #fdfdfd; background-color: rgba(40, 40, 40, 0.8); padding: 1rem 2rem; float: right; position: relative; } /* Homepage Main Button */ .HeroStaticButton { background-color: #666; position: relative; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); font-weight: 300; border: 0.0625rem solid #8a8a8a; border-radius: 0.25rem; -webkit-border-radius: 0.25rem; -moz-border-radius: 0.25rem; margin: 10px 0; } .HeroStaticButton a:link, .HeroStaticButton a:visited { text-decoration: none !important; color: #fff !important; } .HeroStaticButton:hover { text-decoration: none !important; background-color: #435564; border: 0.0625rem solid #3f505e; } .HeroStaticButton:active { background-image: none; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.25); } /* Homepage Secondary Button */ .HeroStaticButtonAlt { background-color: #e98b3a; position: relative; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); font-weight: 300; border: 0.0625rem solid #e98b3a; border-radius: 0.25rem; -webkit-border-radius: 0.25rem; -moz-border-radius: 0.25rem; margin: 10px 0; } .HeroStaticButtonAlt a:link, .HeroStaticButtonAlt a:visited { text-decoration: none !important; color: #fff !important; } .HeroStaticButtonAlt:hover { text-decoration: none !important; background-color: #d87118; border: 0.0625rem solid #d87118; } .HeroStaticButtonAlt:active { background-image: none; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.25); } /* Citation */ .HomepageHeroStatic_Citation_Outer { max-width: 100%; } .HomepageHeroStatic_Citation { position: absolute; right: 20px; bottom: 20px; background-color: #333; color: #fff; padding: 5px 10px; line-height: 1.4; opacity: 0.6; } .HomepageHeroStatic_Citation i { font-family: Material Icons; font-size: 1em; font-style: normal; vertical-align: middle; } .HomepageHeroStatic_Citation i::before { content: "\E88F" } .HomepageHeroStatic_Citation span { font-size: 12px; font-style: italic; color: #fff; text-decoration: none; } .HomepageHeroStatic_Citation a { font-size: 12px; font-style: italic; color: #fff; text-decoration: none; } .HomepageHeroStatic_Citation a:hover { text-decoration: underline !important; } /* Background Image */ .HeroImageStatic { min-height: 300px; margin-top: 0; background-repeat: no-repeat; background-size: cover; /*contain;*/ background-position: 50% 50%; overflow: hidden; /*background-attachment:fixed;*/ } .HeroImageStatic h1 { font-weight: 300; line-height: 1.6; font-size: 2.4em; margin: 0.5em 0; color: #fff; } .HeroImageStatic hr { border-color: #bdbebf; margin: 20px 0; } /* Product Listings ===================== */ /*** THIS BLOCK OF CSS NEEDS TO BE FULLY REWORKED - IT WAS COPIED WITHOUT THOUGHT IS IS WAY, WAY, WAY OVER COMPLICATED FOR WHAT IT DOES ***/ .TableHeadProductList { font-size: 12px; font-weight: bold; color: #fff; background-color: #666; padding: 3px 3px 3px 6px; text-align: left; } #ProductList, #ProductList ul, .ProductList, .ProductList ul { list-style: none; line-height: 14px; padding: 0; margin: 0; background-color: #e5e5e5; } #ProductList .sel, .ProductList .sel { background-color: #fff; background-image: url(/assets/images/arrow_prod_toplevel_on.gif); } #ProductList a, .ProductList a { font-weight: normal; display: block; text-decoration: none; color: #000; } #ProductList li, .ProductList li { margin: 0; padding: 0; background: url(/assets/images/arrow_prod_toplevel.gif) 3px 6px no-repeat; list-style: none; border-bottom: 1px solid #f7f7f7; } #ProductList li a, .ProductList li a { width: 146px; width: 126px; padding: 4px 5px 3px 15px; background: url(/assets/images/arrow_prod_toplevel.gif) 3px 6px no-repeat; color: #878c9c; } #ProductList li ul, .ProductList li ul { border-width: 0; } #ProductList li li .sel, .ProductList li li .sel { background-color: #fff; color: #c00; background-image: url(/assets/images/arrow_prod_level2_on.gif); } #ProductList li li, .ProductList li li { margin: 0; padding: 0; background: url(/assets/images/arrow_prod_level2.gif) 10px 6px no-repeat; background-color: #f7f7f7; border-bottom: 1px solid #fff; } #ProductList li li a:hover, .ProductList li li a:hover { color: #c00; background-image: url(/assets/images/arrow_prod_level2_on.gif); } #ProductList li li a, .ProductList li li a { width: 146px; width: 116px; padding: 4px 5px 3px 25px; background: url(/assets/images/arrow_prod_level2.gif) 10px 6px no-repeat; } #ProductList a:hover, .ProductList a:hover { color: #c00; background-image: url(/assets/images/arrow_prod_toplevel_on.gif); } .ProductVariationTable { width: 100%; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; background-color: #fff; } .ProductVariationTable th { padding: 3px 2px; font-size: 11px; background-color: #fafafa; } .ProductVariationTable td { padding: 3px 2px; font-size: 11px; } .ProductHeader { border-radius: 4px; color: #fff; text-align: center; padding: 16px 0; background-color: #425d91; font-size: 18px; line-height: 20px; font-weight: 400; margin: 20px auto; } .ProductHeader h3 { margin: 0; color: #fff; } /* Image Album ===================== */ .AlbumImagePopup { background-color: #fff; border-collapse: collapse; margin: 0px; padding: 0px; width: 955px; } .AlbumImagePopupCellHeader { vertical-align: top; font-size: 12px; height: 40px; background-image: url(/assets/images/tile_stripe.jpg); background-repeat: repeat-x; color: #fff; font-weight: bold; } .AlbumImagePopupCellImage { vertical-align: middle; text-align: center; padding: 0px 5px 5px 5px; width: 740px; } .AlbumImagePopupCellThumbs { vertical-align: top; text-align: left; width: 225px; } .AlbumImageScrollerMainImage { width: 100%; text-align: left; padding: 10px; } .AlbumImageScrollerThumbnails { width: 100%; } .AlbumImageLargeImage { width: 700px; height: 100%; } .AlbumImageThumbnailImageBorder { margin: 0px 5px 5px 0px; width: 90px; height: 90px; } .AlbumImageThumbnailImageBorder td { border: 1px solid #ccc; } .AlbumImageThumbnailImageBorder td:hover, .AlbumImageThumbnailImageBorder .AlbumImageThumbnailSelected { border: 2px solid #f60; } .AlbumImageThumbnailImageBorder img { padding-top: 3px; margin-left: auto; margin-right: auto; } .AlbumImageFileDescriptionBox { display: none; position: absolute; margin: 0px; padding: 0px; float: left; border: 1px solid #ccc; background-color: #ddd; text-align: left; width: 400px; } .AlbumImageFileDescriptionBox p { padding: 5px; margin: 0px; } /* Image Rotator ===================== */ .RotatorImageList { margin-left: auto; margin-right: auto; } .AlbumImageRotatorImageBorder { margin: 0px 5px 5px 0px; width: 90px; height: 78px; } .AlbumImageRotatorImageBorder td { border: 1px solid #ccc; } .AlbumImageRotatorImageBorder td:hover { border: 2px solid #f60; } .AlbumImageRotatorImageBorder img { padding-top: 3px; } .RadRotator li { list-style: none; } /* Comments ===================== */ .CommentHeader { border-bottom: 3px solid #666; color: #000; font-weight: bold; padding: 6px 0; } .CommentAvatar, .CommentAvatarAlt { border-bottom: 1px solid #808080; padding: 5px; } .CommentText, .CommentTextAlt { background-color: #fff; border-bottom: 1px solid #808080; color: #000; font-size: 12px; padding: 10px 5px 8px; } .CommentItemNumber { color: #333; font-size: 12px; } .CommentTextUserName { color: #333; font-size: 12px; font-weight: bold; } .CommentTextDate { color: #999; font-size: 11px; } .CommentTextTime { color: #999; font-size: 11px; } /* Ratings ===================== */ .filledRatingStar { background-image: url(/assets/images/FilledStar.png); } .ratingStar { background-repeat: no-repeat; cursor: pointer; display: block; font-size: 0; height: 12px; margin: 0; padding: 0; width: 13px; } .emptyRatingStar { background-image: url(/assets/images/EmptyStar.png); } .savedRatingStar { background-image: url(/assets/images/SavedStar.png); } /* Feedback ===================== */ .FeedbackTable { width: 850px; } .feedbackPosition { position: fixed; bottom: 40px; right: 0px; } .FeedbackMenu { padding: 20px 0 0 0; } .FeedbackMenu img { margin: 5px 0; } .FeedbackSlider { width: 400px; } .FeedbackSlider td { padding: 12px 0; } /* Shop - Shared ===================== */ .PriceText { Color: #333; font-size: 16px; font-weight: bold; } .PriceTextHasOnSale { Color: #333; font-size: 14px; text-decoration: line-through; } .PriceTextOnSale { Color: #333; font-size: 16px; font-weight: bold; } .PriceGroup { color: #999; font-size: 12px; font-style: italic; padding-left: 6px; } /* Search Form */ .SearchProductsBtn { height: 68px; width: 23%; float: left; background: url(/assets/images/btn_search_products.jpg) top center no-repeat; margin: 0 !important; padding: 0; border-bottom-right-radius: 1em; border-top-right-radius: 1em; border: 1px solid #97060f; } .SearchProductsBtn:hover { opacity: .8; } .SearchProductsTextBox { float: left; width: 72%; background-color: #fff; padding: 0; font-size: 20px; line-height: normal; color: #666 !important; height: 66px; border-left: 1px solid #333; border-top: 1px solid #333; border-bottom: 1px solid #333; border-right: 1px solid #97060f; } /*----------------------------------------------*/ /* Grid Layout - Responsive Columns */ /* ----Generic handling----*/ /* Make the active area the same size as the contained DIV */ .PanelItemGrid { padding: 0 5px; } .PanelItemGrid > article { float: left; position: relative; background-color: #fff; } .PanelItemGrid > article > a { display: block; text-decoration: none; } /* Set the primary content container, including a visual border and hover effect for the panel */ .PanelItemGrid > article > a > div { border: 1px solid #e1e1e1; overflow: hidden; } .PanelItemGrid > article > a > div:hover { box-shadow: 0 0 1px 1px #e3e3e3; } /* Manage design of each ELEMENT within the panel */ .PanelItemGrid > article > a > div > div { width: 90%; margin: 15px auto; text-align: center; } .PanelItemGrid > article > a > div > div > img { max-height: 180px; margin: 5px auto; z-index: 50; transition: transform 1s; border: 0; } .PanelItemGrid > article > a > div:hover > div > img { transform: scale(1.1,1.1); } .PanelItemGrid > article > a > div > div h2 { font-size: 18px !important; line-height: 22px; color: #36C; margin: 20px 0 5px 0; } .PanelItemGrid > article > a > div > div p { font-size: 14px !important; line-height: 18px; color: #333; margin: 0; } .PanelItemGrid > article > a > div > div p:hover { cursor: pointer; } /* Layer in special markers such as 'NEW' */ .PanelItemGrid aside:nth-of-type(1) { position: absolute; z-index: 150; top: 10px; left: 0; } /* Layer in ADD TO BASKET button */ .PanelItemGrid aside:nth-of-type(2) { position: absolute; z-index: 150; bottom: 10px; left: 0; right: 0; } .PanelItemGrid aside:nth-of-type(2) a { display: block; width: calc(90% - 16px); margin: 0 auto; text-align: center; padding: 8px 5px; border: 3px solid #fff; } /* ----Case handling----*/ /* Downloads - 3 columns */ .PanelItemGrid3ColDownloads > article { width: 31%; min-width: 180px; margin: 0 1% 14px 1%; } .PanelItemGrid3ColDownloads > article > a > div { height: 380px; } /* Video - 3 columns */ .PanelItemGrid3ColVideo > article { width: 31%; min-width: 300px; margin: 0 1% 14px 1%; } .PanelItemGrid3ColVideo > article > a > div { height: 350px; } /* Generic - 4 columns */ .PanelItemGrid4Col > article { width: 23%; min-width: 130px; margin: 5px 1% 20px 1%; } .PanelItemGrid4Col > article > a > div { height: 300px; } /* Products Categories - 4 columns */ .PanelItemGrid4ColProds > article { width: 23%; min-width: 220px; margin: 5px 1% 20px 1%; } .PanelItemGrid4ColProds > article > a > div { height: 380px; } /* Image Gallery - 4 columns */ .PanelItemGrid4ColImages { margin-top: 20px; } .PanelItemGrid4ColImages > article { width: 23%; min-width: 200px; margin: 5px 1% 20px 1%; } .PanelItemGrid4ColImages > article > a > div { height: 180px; padding: 0; border: 1px solid #e1e1e1; box-shadow: none; background-color: #fcfcfc; } .PanelItemGrid4ColImages > article > a > div:hover { border: 1px solid #b7b7b7; box-shadow: none; } .PanelItemGrid4ColImages > article > a > div > img { margin: 0 auto; height: 100%; width: auto; max-width: 480px; } .PanelItemGrid4ColImages > article .ImgInfo { z-index: 51; overflow: hidden; background-color: #2b2b2b; color: #fff; opacity: 0.9; position: absolute; top: 40px; height: 0; width: 100%; -webkit-transition: -webkit-transform 0s, height 0.7s; transition: transform 0s, height 0.7s; } .PanelItemGrid4ColImages > article:hover .ImgInfo { transform: translate(0,0); -webkit-transform: translate(0,0); height: 110px; border-bottom: 2px solid #eee; } .PanelItemGrid4ColImages .ImgTitle { font-size: 13px; line-height: 15px; text-align: center; margin-top: 10px; font-weight: bold; } .PanelItemGrid4ColImages .ImgDesc { text-align: center; padding: 5px 10px 0px 10px; font-size: 12px; line-height: 14px; } .PanelItemGrid4ColImages .ImgRelatedProducts { text-align: left; padding: 5px 0px 0px 5px; font-size: 12px; line-height: 14px; } /* Login Dashboard - usercontrol\front\customer\cust_login_dashboard.ascx ===================== */ .LoginField { padding: 3px; width: 120px; background-color: #f4f4f4; border: 2px solid #069; } .ProfileBoxTable { width: 160px; border: 0; color: #666; font-size: 11px; } .ProfileInnerTable { width: 130px; margin-left: auto; margin-right: auto; border: 0; } .ProfileBoxTile { background-image: url(/assets/images/profile_box_tile.gif); background-repeat: repeat-y; background-color: #fff; padding-left: 4px; padding-right: 3px; } .ProfileCountColumn { color: #666; font-size: 10px; text-align: right; padding-right: 3px; } .ProfileIcon { padding: 4px 8px 4px 8px; text-align: center; } .LoginPanelProfile { z-index: 1000; position: absolute; right: 10px; top: 35px; background-color: #fff; width: 250px; } .LoginPanelProfile a:link, .LoginPanelProfile a:visited { color: #69646c; } .LoginPanelProfile a:hover, .LoginPanelProfile a:active { color: #ff8c0a; } .LoginPanelProfileHeader { color: #fff; background-color: #384f7b; padding: 8px 12px; font-size: 12px; font-weight: bold; } .LoginPanelProfileSelect { font-size: 12px; padding: 3px 10px; } .LoginPanelCancel { background-color: #ccc; font-size: 11px; text-align: center; padding: 2px 8px; margin: 0 10px 6px 0; } a.LoginPanelCancel:link, a.LoginPanelCancel:visited { text-decoration: none; } a.LoginPanelCancel:hover, a.LoginPanelCancel:active { color: #fff; background-color: #06c; } /* Dashboard */ .DashboardProfileBox { width: 95%; margin: 30px 0 30px 0; border: 1px solid #d9d9d9; font-size: 14px; padding: 10px; } .DashboardChartHeading ~ .DashboardProfileBox { width: 100%; margin-top: 0; box-sizing: border-box; } .DashboardChartHeading { padding: 10px 15px 10px 15px; font-size: 18px; color: #fff; background-color: #275b6c; box-sizing: border-box; } .DashboardChartTable { width: 100%; margin: 0; border: 1px solid #e4e4e4; } .DashboardChartTable th { text-align: left; padding: 5px; border-bottom: 2px solid #ccc; background-color: #f2f9fd; } .DashboardChartTable tr:hover { background-color: #f2f9fb; } .DashboardChartTable td { padding: 5px; border-bottom: 1px solid #e4e4e4; } .DashboardChartTable th:nth-child(n+2), .DashboardChartTable td:nth-child(n+2) { text-align: right; padding-right: 10px; } .DashboardChartTable td:nth-of-type(1) { padding: 5px 5px 5px 10px; } /* Special styling for the table that shows the "All Requirements" data */ .DashboardChartTable th + td { border-bottom: 2px solid #ccc; width: 50%; } .DashboardChartTable th + td img { vertical-align: bottom; display: inline-block !important; padding-left: 20px; } /* CPD Dashboard */ .cpd-dashboard-cont { padding: 0 20px; } .cpd-dashboard-cont h4 { margin: 30px 0 10px 0; } .cpd-layout-charts { display: flex; flex-direction: row; margin: 15px 0 0 0; } .cpd-layout-charts > div { box-sizing: border-box; } .cpd-layout-charts > div:nth-of-type(1) { width: 55%; padding: 0 20px 0 0; } .cpd-layout-charts > div:nth-of-type(2) { width: 45%; } .cpd-layout-charts-small { display: flex; flex-direction: row; margin: 0; } .cpd-layout-charts-small:nth-of-type(n+2) { margin: 10px 0 0 0; } .cpd-layout-charts-small > div { width: calc((100% - 10px) / 2); box-sizing: border-box; } .cpd-layout-charts-small > div:nth-of-type(1) { margin: 0 10px 0 0; } .cpd-layout-tabledata { display: flex; flex-direction: row; margin: 15px 0 0 0; } .cpd-layout-tabledata > div { box-sizing: border-box; } .cpd-layout-tabledata > div:nth-child(1) { width: 55%; padding: 0 20px 0 0; } .cpd-layout-tabledata > div:nth-child(2) { width: 45%; } .cpd-layout-tabledata > div > table { width: 100%; } .cpd-layout-tabledata > div > table:nth-of-type(n+2) { margin: 20px 0 0 0; } .cpd-layout-tabledata > div:nth-last-of-type(1) > table:nth-last-of-type(1) { margin-bottom: 40px; } @media only screen and (max-width:1080px) { .cpd-layout-charts { flex-direction: column; } .cpd-layout-charts > div:nth-child(1) { width: 100%; padding: 0; } .cpd-layout-charts > div:nth-child(2) { width: 100%; padding: 0; } .cpd-layout-charts-small:nth-of-type(1) { margin: 15px 0 0 0; } .cpd-layout-tabledata { flex-direction: column; } .cpd-layout-tabledata > div:nth-child(1) { width: 100%; padding: 0; } .cpd-layout-tabledata > div:nth-child(2) { width: 100%; padding-top: 20px; } .cpd-layout-tabledata > div > table { width: 100%; } } .DashboardAvatar img { /*-webkit-box-shadow:0 0 5px 5px rgba(76, 76, 76, 0.1); -moz-box-shadow:0 0 5px 5px rgba(76, 76, 76, 0.1); box-shadow:0 0 5px 5px rgba(76, 76, 76, 0.1);*/ border: 1px solid #e1e1e1; margin: 4px auto; height: 50px !important; } .DashboardProfileName { font-size: 22px; font-weight: normal; color: #000; } .DashboardButtonRow { padding: 26px 0; } .DashboardCompanyInfo { width: 95%; margin: 30px 0 30px 0; border: 1px solid #d9d9d9; font-size: 14px; padding: 2px 10px 10px 20px; /*background-color:#f5f5f5;*/ } .DashboardTable { width: 100%; margin: 50px auto; background-color: #fafafa; } .DashboardTable th { padding: 12px 10px; color: #384f7b; background-color: #eee; } .DashboardTable td { padding: 5px 10px; color: #000; border-bottom: 1px solid #e6e6e6; } .DashboardTableSub { background-color: #DEDEDE !important; } /* Wizard */ .WizardButtons { padding: 20px 10px; border-top: 2px solid #ccc; margin-top: 20px; } .WizardPrev { float: left; text-align: left; } .WizardNext { float: right; text-align: right; } .WizardSteps { padding: 5px; } .WizardSteps > div { float: left; margin: 0 10px 10px 0; padding: 8px 8px 8px 20px; border: 1px solid #32829c; border-radius: 10px; width: 15%; min-width: 100px; text-align: center; white-space: nowrap; } .WizardSteps i, .WizardSteps span { vertical-align: middle !important; /*margin:0 !important;*/ line-height: normal; padding: 0; } .WizardSteps aside { font-size: 0.8em; } .WizardSteps > .StepSel { color: #fff; background-color: #33829c; border: 1px solid #32829c; } /* CRM Chat ===================== */ .CRMChatOuter { width: 100%; } .CRMChatPanel { padding: 20px 0 15px 0; border: 1px solid #ddd; } .CRMChat_Item { clear: both; padding: 8px; } .CRMChat_Right { Width: 90%; border-radius: 8px; float: right; border: 1px solid #aaa; background-color: #e6eefc; padding: 6px 10px; } .CRMChat_Left { Width: 90%; border-radius: 8px; float: left; border: 1px solid #aaa; background-color: #f4f4f4; padding: 6px 10px; } .CRMChat_FileNote { Width: 90%; border-radius: 8px; float: left; border: 1px solid #aaa; background-color: #ffea00; padding: 3px 6px; } .CRMComm_Left_NotRead { width: 32px; height: 32px; float: left; } .CRMComm_Right_NotRead { width: 32px; height: 32px; float: right; } .CRMChat_ItemDateTime { text-align: right; color: #999; font-size: 10px; } .ChatBoxPanel { background-color: #f0f0f0; border: 1px solid transparent; } .ChatBoxPanelInput { margin: 15px 10px 0 10px; } .ChatBox { } .ChatBoxButton { float: right; margin: 2px 30px 10px 0; overflow: hidden; } .CRMChat_AttachedFile { Margin-top: 5px; } .CRMChat_ChatSubject { color: #888; display: block; } /* Hide the standard Item File SUBMIT button as running this before the Chat entry is saved is cart before the horse and it fails. Instead, let the chat SUBMIT button trigger the upload! */ /* .CRMChatOuter .ContFormSubmit { display: none; } */ /* Learning */ .QualStandout { border: 3px solid #cbcbcb; padding: 15px 10px; background-color: #f8f4de; } .CourseDetailBox { border: 1px solid #ccc; padding: 20px; } .TableInfoHeader { background-color: #ccc; font-size: 18px; color: #333; padding: 12px 18px; } .TableInfoHeader h1 { margin: 0; } /* ======================================================================================== */ /* ======================================================================================== */ /* Static */ /* ======================================================================================== */ /* ======================================================================================== */ .ShrinkWrap { display: block; } .ShrinkWrapInline { display: inline-block; } .nobr { display: inline; white-space: nowrap; } .BackgroundWhite { background-color: #fff; } .BackgroundGrey { background-color: #ccc; } .BackgroundTransparent { background-color: transparent; } .Hidden { visibility: hidden; } .NoDisplay { display: none; } .FloatLeft { float: left; } .FloatRight { float: right; overflow: hidden; } .OverflowHidden { overflow: hidden; } .Rotate90 { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .Rotate270 { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .AlignLeft { text-align: left; } .AlignRight { text-align: right; } .AlignCenter { text-align: center; } .AlignTop { vertical-align: top; } .AlignBottom { vertical-align: bottom; } .AlignCenterImage { margin-left: auto; margin-right: auto; } .AlignCenterObject { margin-left: auto; margin-right: auto; } .AlignLeftImage { float: left; } .AlignRightImage { float: right; } .AlignVertMiddle { vertical-align: middle; } .AlignVertMiddle2 { position: relative; top: 50%; transform: perspective(1px) translateY(-50%); } .RemovePadding { padding: 0 !important; } .Padding2 { padding: 2px; } .Padding3 { padding: 3px; } .Padding4 { padding: 4px; } .Padding5 { padding: 5px; } .Padding10 { padding: 10px; } .Padding20 { padding: 20px; } .Padding25 { padding: 25px; } .Padding30 { padding: 30px; } .PaddingBottom6 { padding-bottom: 6px; } .PaddingBottom10 { padding-bottom: 10px; } .PaddingBottom20 { padding-bottom: 20px; } .PaddingTop5 { padding-top: 5px; } .PaddingTop6 { padding-top: 6px; } .PaddingTop8 { padding-top: 8px; } .PaddingTop20 { padding-top: 20px; } .PaddingTopBot2 { padding: 2px 0; } .PaddingRight2 { padding-right: 2px } .PaddingRight3 { padding-right: 3px } .PaddingRight5 { padding-right: 5px } .PaddingRight10 { padding-right: 10px } .PaddingRight15 { padding-right: 15px } .PaddingLeft10 { padding-left: 10px; } .PaddingLeft20 { padding-left: 20px; } .PaddingLeft50 { padding-left: 50px; } .PaddingLeft100 { padding-left: 100px; } .Margin5 { margin: 5px; } .Margin10 { margin: 10px; } .Margin20 { margin: 20px; } .MarginTop3 { margin-top: 3px; } .MarginTop5 { margin-top: 5px; } .MarginTop10 { margin-top: 10px; } .MarginTop20 { margin-top: 20px; } .MarginTopBot2 { margin-top: 2px; margin-bottom: 2px; } .MarginLeft5 { margin-left: 5px; } .MarginLeft7 { margin-left: 7px; } .MarginLeft12 { margin-left: 12px; } .MarginLeft20 { margin-left: 20px; } .MarginBottom3 { margin-bottom: 3px; } .MarginBottom5 { margin-bottom: 5px; } .MarginBottom7 { margin-bottom: 7px; } .MarginBottom20 { margin-bottom: 20px; } .MarginRight6 { margin-right: 6px; } .MarginRight20 { margin-right: 20px; } .Border1Purple { border: 1px solid #e9dcf2; } .Border1Grey { border: 1px solid #ccc; } .Border3White { border: 3px solid #fff; } .BorderRightGrey { border-right: 1px solid #ccc; } .BorderLeftGrey { border-left: 1px solid #ccc; } .BorderTopGrey { border-top: 1px solid #ccc; } .BorderBottomGrey { border-bottom: 1px solid #ccc; } .BorderTop { border-top: 3px solid #ccc; } .DividerLine { margin: 10px 0; background-color: #ccc; height: 4px; } .Border3Grey { border: 3px solid #e2dbe6; } .Border1Black { border: 1px solid #000; } .BorderNone { border: none; } .BackgroundHighlight { background-color: #f7f8fd; } .BackgroundGreyLight { background-color: #e5e5e5; } .BackgroundGreyMid { background-color: #ccc; } .BackgroundDark { background-color: #333; } .Headline { padding: 20px; text-align: center; background-color: #eee; } /* Style Guide Presentation */ /* % WIDTH SETTINGS ===================== */ .Width1 { width: 1%; } .Width2 { width: 2%; } .Width3 { width: 3%; } .Width4 { width: 4%; } .Width5 { width: 5%; } .Width6 { width: 6%; } .Width7 { width: 7%; } .Width8 { width: 8%; } .Width9 { width: 9%; } .Width10 { width: 10%; } .Width12 { width: 12%; } .Width15 { width: 15%; } .Width17 { width: 17%; } .Width19 { width: 19%; } .Width20 { width: 20%; } .Width25 { width: 25%; } .Width30 { width: 30%; } .Width33 { width: 33%; } .Width34 { width: 34%; } .Width35 { width: 35%; } .Width40 { width: 40%; } .Width45 { width: 45%; } .Width50 { width: 50%; } .Width55 { width: 55%; } .Width60 { width: 60%; } .Width65 { width: 65%; } .Width70 { width: 70%; } .Width75 { width: 75%; } .Width80 { width: 80%; } .Width85 { width: 85%; } .Width90 { width: 90%; } .Width95 { width: 95%; } .Width96 { width: 96%; } .Width97 { width: 97%; } .Width98 { width: 98%; } .Width99 { width: 99%; } .Width100 { width: 100%; } .Height250 { height: 250px; } .Height500 { height: 500px; } .MinHeight200 { min-height: 200px; } .MinHeight400 { min-height: 400px; } .Zindex9 { z-index: 9000; } .Zindex7 { z-index: 7000; } .Zindex5 { z-index: 5000; } .Zindex3 { z-index: 3000; } .Zindex1 { z-index: 1000; } /* IMAGE SIZES ===================== */ .ImageBasic { border: 0px; } .ImageBorderWhite1 { border: 1px solid #fff; } .ImageBorderWhite2 { border: 2px solid #fff; } .ImageBorderWhite3 { border: 3px solid #fff; } .ImageBorderWhite10 { border: 10px solid #fff; } .ImageBorderGrey1 { border: 1px solid #ccc; } .ProductImage { margin: 5px auto !important; } /* Used for square images */ .Image16 { width: 16px; height: 16px; } .Image18 { width: 18px; height: 18px; } .Image24 { width: 24px; height: 24px; } .Image32 { width: 32px; height: 32px; } .Image40 { width: 40px; height: 40px; } .Image48 { width: 48px; height: 48px; } .Image72 { width: 72px; height: 72px; } .Image128 { width: 128px; height: 128px; } .Image256 { width: 256px; height: 256px; } .ImgItem { border: 1px solid #bbb; } /* COLORS ===================== */ .Red { color: #f00; } .Green { color: #093; } .Black { color: #000; } .White { color: #fff; } .Orange { color: #f60; } .Yellow { color: #ff0; } .GreyDark { color: #333; } /* ======================================================================================== */ /* ======================================================================================== */ /* Responsive Layouts */ /* ======================================================================================== */ /* ======================================================================================== */ /* For Help with the responsive grid system, follow the link below */ /* http://www.responsivegridsystem.com */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* Custom */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* Apply this style directly within an 'img' tag to create images that automatically resize as the parent space shrinks */ .responsive-image img { height: auto !important; max-width: 100% !important; width: 100% !important; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* Column system */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* GRID COLUMN SETUP ==================================================================== */ .col { display: block; float: left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } .colMargin_0 { display: block; float: left; margin: 0; } /* Tight Columns */ .colMargin_0:first-child { margin-left: 0; } /* GRID OF TWO ============================================================================= */ .span_2_of_2 { width: 100%; } .span_1_of_2 { width: 49.2%; } /* GRID OF THREE ============================================================================= */ .span_3_of_3 { width: 100%; } .span_2_of_3 { width: 66.13%; } .span_1_of_3 { width: 32.26%; } /* GRID OF FOUR ============================================================================= */ .span_4_of_4 { width: 100%; } .span_3_of_4 { width: 74.6%; } .span_2_of_4 { width: 49.2%; } .span_1_of_4 { width: 23.8%; } /* GRID OF FIVE ============================================================================= */ .span_5_of_5 { width: 100%; } .span_4_of_5 { width: 79.68%; } .span_3_of_5 { width: 59.36%; } .span_2_of_5 { width: 39.04%; } .span_1_of_5 { width: 18.72%; } /* GRID OF SIX ============================================================================= */ .span_6_of_6 { width: 100%; } .span_5_of_6 { width: 83.06%; } .span_4_of_6 { width: 66.13%; } .span_3_of_6 { width: 49.2%; } .span_2_of_6 { width: 32.26%; } .span_1_of_6 { width: 15.33%; } /* GRID OF SEVEN ============================================================================= */ .span_7_of_7 { width: 100%; } .span_6_of_7 { width: 85.48%; } .span_5_of_7 { width: 70.97%; } .span_4_of_7 { width: 56.45%; } .span_3_of_7 { width: 41.94%; } .span_2_of_7 { width: 27.42%; } .span_1_of_7 { width: 12.91%; } /* GRID OF EIGHT ============================================================================= */ .span_8_of_8 { width: 100%; } .span_7_of_8 { width: 87.3%; } .span_6_of_8 { width: 74.6%; } .span_5_of_8 { width: 61.9%; } .span_4_of_8 { width: 49.2%; } .span_3_of_8 { width: 36.5%; } .span_2_of_8 { width: 23.8%; } .span_1_of_8 { width: 11.1%; } /* GRID OF NINE ============================================================================= */ .span_9_of_9 { width: 100%; } .span_8_of_9 { width: 88.71%; } .span_7_of_9 { width: 77.42%; } .span_6_of_9 { width: 66.13%; } .span_5_of_9 { width: 54.84%; } .span_4_of_9 { width: 43.55%; } .span_3_of_9 { width: 32.26%; } .span_2_of_9 { width: 20.97%; } .span_1_of_9 { width: 9.68%; } /* GRID OF TEN ============================================================================= */ .span_10_of_10 { width: 100%; } .span_9_of_10 { width: 89.84%; } .span_8_of_10 { width: 79.68%; } .span_7_of_10 { width: 69.52%; } .span_6_of_10 { width: 59.36%; } .span_5_of_10 { width: 49.2%; } .span_4_of_10 { width: 39.04%; } .span_3_of_10 { width: 28.88%; } .span_2_of_10 { width: 18.72%; } .span_1_of_10 { width: 8.56%; } /* GRID OF ELEVEN ============================================================================= */ .span_11_of_11 { width: 100%; } .span_10_of_11 { width: 90.76%; } .span_9_of_11 { width: 81.52%; } .span_8_of_11 { width: 72.29%; } .span_7_of_11 { width: 63.05%; } .span_6_of_11 { width: 53.81%; } .span_5_of_11 { width: 44.58%; } .span_4_of_11 { width: 35.34%; } .span_3_of_11 { width: 26.1%; } .span_2_of_11 { width: 16.87%; } .span_1_of_11 { width: 7.63%; } /* GRID OF TWELVE ============================================================================= */ .span_12_of_12 { width: 100%; } .span_11_of_12 { width: 91.53%; } .span_10_of_12 { width: 83.06%; } .span_9_of_12 { width: 74.6%; } .span_8_of_12 { width: 66.13%; } .span_7_of_12 { width: 57.66%; } .span_6_of_12 { width: 49.2%; } .span_5_of_12 { width: 40.73%; } .span_4_of_12 { width: 32.26%; } .span_3_of_12 { width: 23.8%; } .span_2_of_12 { width: 15.33%; } .span_1_of_12 { width: 6.86%; } /* Image Crop - Keep this so the refrence point of the selector is the immediate container, and NOT . Refer the _ReadMe file with this tool. ===================== */ #MyImgAreaSelect { position: relative; } /* Expanding Panels (FAQ's or Attach a File Link) ===================== */ /* Format our link that will be used to trigger the toggle */ .TriggerText { font-size: 20px; width: 95%; color: #333; padding: 15px 10px 15px 10px; } .CRMAttchFile .TriggerText { font-family: Arial Narrow, Arial; font-size: 16px; width: 95%; color: #333; padding: 15px 10px 5px 10px; } div.TriggerText:hover { color: #f60; text-decoration: none; cursor: pointer; } /* Set the container DIV that will be transitioned */ .Outer { height: 0; position: relative; overflow: hidden; width: auto } /* Set the inner DIV(s), that hold the real content. *** THIS MUST HAVE A BORDER OR PADDING APPLIED! Otherwise the dynamic height calc may fail due to not recognising margin values */ .Inner { padding: 5px 5px 5px 30px; width: auto; } /* ======================================================================================== */ /* ======================================================================================== */ /* Custom */ /* ======================================================================================== */ /* ======================================================================================== */ /*Example Generic Table Handling*/ .TableStd { width: 90%; border-collapse: collapse; max-width: 1000px; } .TableStd > tbody { border: 1px solid #ccc; } .TableStd caption { text-align: left; font-size: 14px; color: #4b5267; font-weight: bold; padding: 10px 5px 4px 10px; border-color: #ccc; border-style: solid; border-width: 1px 1px 1px 1px; background-color: #efefef; background-image: linear-gradient(0deg, #efefef, #fff 90%); border-top-left-radius: 4px; border-top-right-radius: 4px; } .TableStd th { font-weight: bold; text-align: left; vertical-align: bottom; padding: 10px 5px 4px 5px; background-color: #fff; border-bottom: 1px solid #ccc; } .TableStd td { vertical-align: bottom; line-height: 30px; border-top: 1px solid transparent; padding: 0 5px; } .TableStd > tbody > tr:nth-child(odd) { background-color: #efefef; } .TableStd > tbody > tr:nth-child(even) { background-color: #fefefe; } .TableStd > tbody > tr:hover td { border-top: 1px solid #999; border-bottom: 1px solid #999; background-color: #fcf4e6; } .TableStd > tbody > tr > td > a { display: block; text-decoration: none; position: relative; } .TableStd > tbody > tr > td > a:hover, .TableStd > tbody > tr > td > a:active { text-decoration: underline; color: #f63; cursor: pointer; } /*Apply additional custom rendering per table*/ /*Customer Profile Table*/ .TableCustProf > thead { border-left: 1px solid #ccc; border-right: 1px solid #ccc; } /*Set matching left and right borders in the heading row*/ .TableCustProf > thead > tr > th:nth-of-type(3), .TableCustProf > tbody > tr > td:nth-of-type(3) { text-align: right; } /*Make the number in the 3rd column align right*/ .TableCustProf > thead > tr > th:nth-of-type(4), .TableCustProf > tbody > tr > td:nth-of-type(4) { text-align: center; } /*Make the size / button in the 4th column align in the middle*/ .TableCustProf > tbody > tr > td:first-of-type { font-weight: bold; } /*Make the text in the first column bold*/ .TableCustProf > tbody > tr > td > a.ABtnStd { display: inline-block; text-decoration: none; width: 75px; } /*Override the A tag handling that the table handling applies over the standard button*/ /*Site wide button style from an Anchor tag */ .ABtnStd { text-align: center; padding: 4px 12px; margin: 3px; font-size: 14px; line-height: normal; display: inline-block; } a.ABtnStd:link, a.ABtnStd:visited { text-decoration: none; } a.ABtnStd:hover, a.ABtnStd:active { text-decoration: none; color: #fff !important; background-color: #f08c3d; border-radius: 3px; } /* Rounded Button */ .BtnRounded { text-align: center; font-weight: 400; padding: 6px 18px; margin: 3px; font-size: 12px; line-height: normal; display: inline-block; border-radius: 12px; background-color: #fff; } a.BtnRounded:link, a.BtnRounded:visited { text-decoration: none; } a.BtnRounded:hover, a.BtnRounded:active { text-decoration: none; color: #fff !important; background-color: #458cc7; transition: all 0.3s ease; } .BtnGroup { display: inline-block; } /*video list icons*/ .ib_gallery img { display: inline-block; border: 1px solid #aaa; background-color: #f5f5f5; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .ib_gallery_on img { display: inline-block; border: 1px solid #aaa; background-color: #fb9d18; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .ib_brief img { display: inline-block; border: 1px solid #aaa; background-color: #f5f5f5; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .ib_brief_on img { display: inline-block; border: 1px solid #aaa; background-color: #fb9d18; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .ib_list img { display: inline-block; border: 1px solid #aaa; background-color: #f5f5f5; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .ib_list_on img { display: inline-block; border: 1px solid #aaa; background-color: #fb9d18; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } /*----------------------------------------------*/ /* List Grid Layout - Responsive Columns */ /*Containers */ .ListItem { } .ListItem article { border-top: 1px solid #e3e3e3; padding: 10px 5px; overflow: hidden; } .ListItem article > div:nth-of-type(1) { float: left; margin: 0 20px 0 0; vertical-align: top; } .ListItem article > div:nth-of-type(2) { float: left; width: 50%; vertical-align: top; } /* Responsive News */ .NewsMenuHeader { font-weight: 700; font-size: 18px; } .NewsNavCont { border: 1px solid #ccc; padding: 0 0 0 10px; border-radius: 4px; width: 100%; /*max-width:600px;*/ } #NewsNav { position: relative; top: 0; height: 40px; background-color: #fafafa; } #NewsNav > nav { line-height: 40px; } #NewsNav > nav > article { float: left; } #NewsNav > nav > aside { float: right; background-color: #777; border-radius: 4px; color: #fff; font-weight: 600; font-size: 16px; width: 40px; height: 40px; text-align: center; } #NewsNav:hover { } #NewsNav:hover > nav > aside { background-color: #555; } #NewsNav a { display: block; padding: 5px 8px; text-decoration: none; color: #222; border-radius: 5px; font-size: 18px; border: 1px solid transparent; } #NewsNav a:nth-child(odd) { background-color: #fff; color: #000; border: 1px solid #ccc; } #NewsNav a:nth-child(even) { background-color: #f7f7f7; color: #000; border: 1px solid #ccc; } #NewsNav a:hover { background-color: #fcf6e8; color: #000; border: 1px solid #e6d39e; } #NewsNav > div { border: 1px solid #666; border-radius: 4px; margin: 0; overflow: hidden; width: 100%; position: absolute; top: 40px; left: -10px; max-height: 0; opacity: 0; transition: max-height 2.0s, opacity 0.75s; -webkit-transition: max-height 2.0s, opacity 0.75s; font-weight: 200; color: #333; background-color: #fff; z-index: 500; text-align: left; } #NewsNav > div > div { padding: 7px 7px; background-color: #e0e0e0; } #NewsNav:hover > div { max-height: 600px; opacity: 1.0; overflow: visible; overflow-y: scroll; } .NewsMenuDate { font-size: 12px; color: #999; } .NewsMenuTitle { font-weight: 700; } .NewsMenuTeaser { font-size: 12px; color: #666; } .NewsTeaser { font-size: 14px; color: #666; } .CommentCount { font-size: 10px; color: #333; padding: 1px 5px; background-color: #f7f7f7; margin-left: 4px; border: 1px solid #ccc; border-radius: 3px; } .NewsMenuViewCount { font-size: 10px; color: #333; padding: 1px 5px; background-color: #f7f7f7; margin-left: 10px; border: 1px solid #ccc; border-radius: 3px; } .NewsPrevNext { text-decoration: none !important; display: block; float: right; overflow: hidden; padding: 0 10px; background-color: #fff; border-radius: 10px; } .NewsPrevNext div { display: block; float: left; line-height: 40px; margin: 0 3px; } .NewsPrevNext:hover { background-color: #ddd; color: #fff; } .NewsArrow { font-weight: bold; font-size: 30px; } .NewsArrowLeft { transform: rotate(180deg); -webkit-transform: rotate(180deg); } .NewsArrowRight { float: right; } .NewsList { padding-left: 24px; background-image: url(/assets/images/bullet_arrow_circle.gif); background-repeat: no-repeat; line-height: 22px; } .NewsHeader { height: 42px; padding-left: 12px; } /* Product Keyword Search */ .SearchPanel .RadComboBox input[type="text"] { line-height: normal !important; border: 0 !important; margin: 0; } .SearchPanel .RadComboBox_Default .rcbInputCell, .SearchPanel .RadComboBox_Default .rcbArrowCell { background-image: none !important; padding: 0 !important; } .SearchPanel { } .SearchPanelCol1 { float: left; width: 80%; } .SearchPanelCol1 input[type="text"] { width: 95% !important; margin-right: 4px; } .SearchPanelCol2 { float: left; width: 15%; padding: 3px 0; } /* Support for the 'Auto Complete' search handling, which is based on "Typeahead". On GIT: https://github.com/twitter/typeahead.js 'Typeahead' is the 'UI' view. Find documentation here: https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names 'Bloodhound' is a paired component that is the 'suggstion engine'. */ .typeahead, .tt-query, .tt-hint { height: 26px !important; padding: 8px 0 8px 12px !important; font-size: 18px !important; border: 2px solid #ccc; border-radius: 2px; outline: none; width: 100%; } .typeahead { background-color: #fff; } .typeahead:focus { border: 1px solid #0097cf; } .tt-query { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); color: red !important; } .tt-hint { color: #bbb !important; } /* This is the text that shows after the cursor within the form field. */ .tt-menu { width: 420px; margin: 0; padding: 8px 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 2px; box-shadow: 0 5px 10px rgba(0,0,0,.2); } .tt-suggestion { padding: 3px 20px; font-size: 18px; line-height: 24px; color: #000; } /* This is the text that shows as the suggestions below the form field. */ .tt-suggestion:hover { cursor: pointer; color: #fff; background-color: #0097cf; } /* .tt-suggestion.tt-cursor {color:#fff; background-color:#0097cf; color:purple !important;} */ .tt-suggestion p { margin: 0; } .gist { font-size: 14px; color: yellow !important; } /* Modal pop-up styles - Used to replace JavaScript Alert/Confirm dialogues*/ @keyframes ModalPopup_ModalContent { from { top: -100px; opacity: 0; } to { top: 0px; opacity: 1; } } .ModalPopup_ModalOuter { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.5); z-index: 99999; opacity: 0; -webkit-transition: opacity 10s ease-in; transition: opacity 2s ease-in; display: none; } .ModalPopup_ModalOuter:target { opacity: 1; display: block; } .ModalPopup_ModalOuter > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 5px; background: #fff; box-shadow: 0 0 10px 5px #555; animation-name: ModalPopup_ModalContent; animation-duration: 0.8s; text-align: left; } .ModalPopup_ModalCloser { background: #606061; color: #fff; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; border-radius: 12px; box-shadow: 1px 1px 3px #000; } .ModalPopup_ModalCloser:hover, .ModalPopup_ModalCloser:link, .ModalPopup_ModalCloser:visited { text-decoration: none; color: #fff; } .ModalPopup_ModalCloser:hover { background: #00d9ff; } /* EFFECTS */ /* Many of these effects come from here:http://ianlunn.github.io/Hover/ */ /*----------------------------------------------*/ /* STREAMSWEET PRODUCTS - HOVER TEXT */ .streamSweet-item { height: auto; float: left; position: relative; } .streamSweet-item:hover .img-title { opacity: 0.8; } .img-title { position: absolute; top: 0; margin: 0; height: 100%; width: 100%; text-align: center; opacity: 0; background-color: #fff; transition: all 1.0s ease; } .img-title p { position: absolute; color: #333; top: 30%; width: 100%; text-align: center; } /* Shadow */ .BtnShadow { -webkit-transition: box-shadow 0.3s; transition: box-shadow 0.3s; } .BtnShadow:hover, .BtnShadow:focus, .BtnShadow:active { box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); } /* Shrink */ .HoverShrink { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); } .HoverShrink:hover, .HoverShrink:focus, .HoverShrink:active { -webkit-transform: scale(0.9); transform: scale(0.9); } /* Grow */ .HoverGrow { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); } .HoverGrow:hover, .HoverGrow:focus, .HoverGrow:active { -webkit-transform: scale(1.3); transform: scale(1.3); } /* Hover Fade */ .HoverFade { } .HoverFade:hover { opacity: 0.8; } /* 'Lazy Load' Animations ===================== */ .animation-element { opacity: 0; position: relative; } /*animation element sliding from the left*/ .animation-element.slide-left { opacity: 0; -webkit-transition: all 1200ms linear; transition: all 1200ms linear; -webkit-transform: translate(-300px, 0px); transform: translate(-300px, 0px); } .animation-element.slide-left.in-view { opacity: 1; -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } /* USEFUL SNIPPETS */ /* ---------------------------------------------------------------------------------------------------------------------- * /* Download */ .DownloadFeature { background-color: #f2f9fb; padding: 8px 10px; color: #6c6c6c; border-bottom: 3px solid #e5f4f7; border-top: 3px solid #e5f4f7; margin: 30px auto; } .DownloadFeature img { margin: 6px auto; } /* Editor Images */ .FloatLeftImage { float: left; margin: 20px 20px 20px 0; } .FloatRightImage { float: right; margin: 20px 10px 20px 20px; } .CaptionRight { width: 45%; float: right; margin: 0 10px 20px 20px; padding: 20px; } .CaptionRight img { margin-bottom: 14px; } /* TABLE NO BORDER */ .TableNoBorder { margin-bottom: 20px; line-height: 1.5; border-top: 1px solid #bdbebf; background-color: #fff; } .TableNoBorder th { background-color: #f5f5f5; font-weight: 300; color: #939598; padding: 10px; } .TableNoBorder tr { border-bottom: 1px solid #bdbebf; } .TableNoBorder tr:hover { background-color: #f2f9fb; } .TableNoBorder td { font-size: 14px; padding: 8px; /*vertical-align:top;*/ } .TableNoBorderSubHead { color: #939598; font-weight: bold; } /* TABLE WITH BORDER */ .TableWithBorder { margin-bottom: 20px; line-height: 1.5; border: 2px solid #bdbebf; background-color: #fff; } .TableWithBorder th { background-color: #f5f5f5; font-weight: 300; color: #939598; padding: 10px; } .TableWithBorder tr { border-bottom: 1px solid #bdbebf; } .TableWithBorder tr:hover { background-color: #f2f9fb; } .TableWithBorder td { font-size: 14px; padding: 8px; /*vertical-align:top;*/ } .TableWithBorderSubHead { color: #939598; font-weight: bold; } /* FEATURE TABLE */ .TableFeature { margin: 20px auto; line-height: 1.5; background-color: #fff; border: 1px solid #e2ebef; } .TableFeature th { background-color: #4b8199; font-weight: 300; color: #FFF; padding: 10px; } .TableFeature tr { border-bottom: 1px solid #e2ebef; } .TableFeature tr:hover { background-color: #f2f9fb; } .TableFeature td { font-size: 14px; padding: 8px 10px; /*vertical-align:top;*/ } .TableFeatureSubHead { color: #275b6c; font-weight: normal; background-color: #e2ebef !important; } /* KEYNOTE */ .Keynote { margin: 20px auto; width: 90%; padding: 25px 30px; border-left: 4px solid #BCCEE0; font-size: 16px; line-height: 24px; display: block } /* Vote */ .VotePanel { text-align: center; max-width: 160px; color: #ccc; margin: 8px auto; } .VoteHeading { font-size: 18px; margin: 0; color: #333; } .VoteSelect { text-align: center; } .VoteCountLge { font-size: 34px; line-height: 34px; padding: 5px; } .VoteCountLge p { margin: 0 0 4px 0; color: #666; } .VoteUp { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .VoteDown { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } /* Ratings */ .RatingHeading { padding: 10px 0; color: #666; font-size: 14px; font-weight: bold; } .RatingContainer { padding: 16px 0; } .RatingContainerIndividual { padding: 8px 0; } /* Reduce vertical space a bit */ .SocialCount { color: #ccc; font-weight: normal; } .SocialTextSmall { font-size: 12px; color: #909090; } /* Customise the Sliders on the CPD - Add Activity public page - for distributing points */ .table-cpd-points-dist { margin-bottom: 20px; width: 100%; } .table-cpd-points-dist th { background-color: #fff; font-weight: 300; color: #939598; padding: 7px; font-size: 16px; } .table-cpd-points-dist td { font-size: 14px; padding: 8px; white-space: nowrap; } .table-cpd-points-dist td:nth-of-type(2) { vertical-align: top; } .table-cpd-points-dist th:last-child { text-align: right; padding-right: 15px; } .table-cpd-points-dist td:last-child { text-align: right; padding-right: 20px; } .table-cpd-points-dist tr:last-child td { border-top: 1px solid #eee; padding-top: 15px; } .table-cpd-points-dist td > div { display: inline-block; vertical-align: top; margin-right: 10px; } #activity-dist .rslSelectedregion { background-image: none !important; background-color: #00537d !important; } #activity-total .rslSelectedregion { background-image: none !important; background-color: #fc9200 !important; } /* Set the background-color to this when 100% allocated: 80aa27*/ .activity-total .rslSelectedregion { background-image: none !important; background-color: #fc9200 !important; } .activity-total100 .rslSelectedregion { background-image: none !important; background-color: #80aa27 !important; } /* ---------------------------------------------------------------------------------------------------------------------- */ /* Media Queries - MUST ALWAYS BE THE LAST BLOCK OF CSS - Always work with biggest screen to smallest. */ /* ---------------------------------------------------------------------------------------------------------------------- */ /* 1240px*/ @media only screen and (max-width:1240px) { .HomeBox { margin: 20px auto; } } /* 1080px*/ @media only screen and (max-width:1080px) { /* Use most of the width of the screen */ .ShellLogoMenuHome .SectionWrapper { width: 100%; } /* Panel grid */ .PanelItemGrid4Col > article, .PanelItemGrid4ColProds > article, .PanelItemGrid4ColImages > article { width: 31%; margin: 0 1% 14px 1%; } #nav { padding-left: 20%; } } /* 1000px*/ @media only screen and ( max-width:1000px) { /* Logo / header rows. Smaller for smaller screen + smaller on scroll */ .ShellLogoMenuHome, .ShellLogoMenu { height: 50px; } .LogoMain { width: 150px; left: 3%; } .SignUpLink { padding: 3px 15px; font-size: 14px; top: 10px; right: 3%; } #nav > ul > li > a { padding: 10px 20px; } #nav > ul > li.NavParent > a:after { top: 17px; } header.HdrSmaller { height: 45px; } .HdrSmaller .LogoMain { width: 80px; } .HdrSmaller .SignUpLink { padding: 2px 18px; font-size: 12px; } .HdrSmaller #nav > ul > li > a { padding: 7px 20px; } .HdrSmaller #nav > ul > li.NavParent > a:after { text-outline: 5px; px; } .SignUpLink { right: 30%; } .Biline { margin: 30px 0 0 0; } /* Menu icon / menu row */ #nav { top: 10px; padding: 0; width: 100%; text-align: right; } #nav > a { color: #fff; } #nav > a:hover { text-decoration: none; color: #222; } #nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type { display: inline-block; } #nav > ul { display: none; position: absolute; top: calc(100% + 15px); border: 0; width: 100%; height: auto; max-height: 90vh; overflow-y: auto; } #nav .menuicon { font-size: 50px; line-height: 20px; margin: 8px 30px 3px 0; } #nav .menutext { display: none; } /* First level */ #nav:target > ul { display: block; } #nav > ul > li { display: block; border-bottom: 1px solid #a4bbc6; background-color: #fff; } #nav > ul > li:first-child { border-top: 1px solid #a4bbc6; } #nav > ul > li > a { padding: 10px 15px; font-size: 16px; color: #5b9bb0; } #nav > ul > li.NavSelected > a { color: #000; font-weight: bold; } #nav > ul > li.NavParent > a:after { content: "\25BC"; font-size: 14px; color: #5b9bb0; position: absolute; top: 8px; right: 10px; } /* ? = ▼ = \25BC || For special chars, convert entity code to CSS hex here: http://www.evotech.net/articles/testjsentities.html */ /* Second level */ #nav > ul > li > ul { width: 100%; position: static; } #nav > ul > li:hover > ul { padding: 5px 0 15px 0; border: none; border-top: 1px solid #a4bbc6; } #nav > ul > li > ul > li > a { padding: 8px 20px; font-size: 14px; } #nav > ul > li > ul > li.NavParent > a:after { content: "\25BC"; font-size: 12px; color: #5b9bb0; position: absolute; top: 8px; right: 20px; } /* ? = ▼ = \25BC || For special chars, convert entity code to CSS hex here: http://www.evotech.net/articles/testjsentities.html */ /* Third level */ #nav > ul > li > ul > li > ul { width: 100%; position: static; } #nav > ul > li > ul > li:hover > ul { padding: 5px 0 15px 0; border: none; border-top: 1px solid #efefef; max-height: 800px; width: 100%; } #nav > ul > li > ul > li > ul > li > a { padding: 8px 25px; font-size: 12px; } .HdrSmaller #nav { top: 5px; } .HdrSmaller #nav .menuicon { font-size: 28px; margin: 0 30px 3px 0; } .HdrSmaller #nav > ul { top: calc(100% + 5px); } .FormSetHor > div > div:nth-of-type(1), .FormSetHor > section > div > div:nth-of-type(1), .FormSetFilter > div > div:nth-of-type(1) { width: 100%; display: block; padding: 0 0 3px 0; } .FormSetHor > div > div:nth-of-type(2), .FormSetHor > section > div > div:nth-of-type(2), .FormSetFilter > div > div:nth-of-type(2) { width: 100%; display: block; padding: 0 0 5px 0; } } /* 768px */ @media only screen and (max-width:768px) { .PanelItemGrid3Col > article, .PanelItemGrid3ColNarrow > article, .PanelItemGrid3ColDownloads > article, .PanelItemGrid3ColVideo > article, .PanelItemGrid4Col > article, .PanelItemGrid4ColProds > article, .PanelItemGrid4ColImages > article { width: 48%; margin: 0 1% 14px 1%; } .FloatRightImage { float: none !important; margin: 30px 0 !important; } .FloatLeftImage { float: none !important; margin: 30px 0 !important; } .CaptionRight { width: 100%; float: none; margin: 20px auto; } .OuterShadowBox { width: 98%; } .FooterNavText { text-align: center; font-size: 14px !important; line-height: 18px !important; /*border-bottom:1px solid #666;*/ margin-bottom: 15px; padding-bottom: 10px; } .ShellFooter hr { border-top-width: 2px; border-top-style: solid; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-color: #ccc; margin-right: 0px; margin-left: 0px; text-align: center; } .ShellFooter img { margin: 10px auto; } .HeroPanel { width: 70% !important; margin: 50px auto; float: none !important; } .span_1_of_4Footer { width: 100%; } .SearchPanelCol1 { float: left; width: auto; } .ShellLogoBanner { height: 90px; } .HdrSmaller .Biline { margin: 4px 0 0 0; font-size: 14px; line-height: 17px; } .Biline { font-size: 14px; line-height: 17px; } .StoryContainer { margin: 45px 0; background: url(/assets/images/tile_story_text_narrow.jpg) no-repeat bottom #fff; } /* Story Symbol Panel */ .StorySymbol { width: 100%; } .StorySymbol article { margin: 45px 25px; } /* Story Text Panel */ .StoryText { width: 100%; } .StoryText article { margin: 25px 35px; } .MenuBotL1 { text-align: center; } .MenuBotL2 { text-align: center; } } /* 720px*/ @media only screen and (max-width:720px) { .FormWidthLong { width: 100px; } .HomeLeftCol { width: 100%; } .HomeRightCol { width: 100%; } .HomeBlockInner { width: 90%; float: none; margin: 0 auto; } .HomeRightColInner { width: 90%; margin: 0 auto; } .IntroText { font-size: 19px; line-height: 24px; } .HomeIntroSection h1 { font-size: 28px; line-height: 34px; } } /* 640px */ @media only screen and (max-width:640px) { .PanelItemGrid > article > a > div { height: auto; } .PanelItemGrid3Col > article, .PanelItemGrid3ColNarrow > article, .PanelItemGrid3ColVideo > article, .PanelItemGrid3ColDownloads > article, .PanelItemGrid4Col > article, .PanelItemGrid4ColProds > article, .PanelItemGrid4ColImages > article { width: 98%; float: none; margin: 0 auto 10px auto; } .PanelItemGrid4ColProds > article > a > div { padding-bottom: 60px; } /* Give white space for the layered, bottom positioned 'Buy Now' button, now the height changes to auto. */ .PanelItemGrid4ColImages > article .ImgInfo { top: 100%; } /* Control images when they have more space to display */ .responsive-image img { height: auto !important; max-width: 80% !important; width: 80% !important; } /* Navigation */ .cNavSub { display: none; } .streamSWEETLogo { float: none; margin: 10px auto !important; } .Biline { font-size: 12px; line-height: 15px; } .FeatureBox { width: 96%; min-height: 280px; } .FeatureBoxHeading { width: 96%; } .FooterSocialIcons { float: none; margin: 25px auto; } /* Position the flydown login panel for smaller screens */ .PanelLoginCont { right: 5vw; } /* Grid Column Handling */ .col { margin: 1% 0 1% 0%; } .span_2_of_2 { width: 100%; } .span_1_of_2 { width: 100%; } .span_3_of_3 { width: 100%; } .span_2_of_3 { width: 100%; } .span_1_of_3 { width: 100%; } .span_4_of_4 { width: 100%; } .span_3_of_4 { width: 100%; } .span_2_of_4 { width: 100%; } .span_1_of_4 { width: 100%; } .span_5_of_5 { width: 100%; } .span_4_of_5 { width: 100%; } .span_3_of_5 { width: 100%; } .span_2_of_5 { width: 100%; } .span_1_of_5 { width: 100%; } .span_6_of_6 { width: 100%; } .span_5_of_6 { width: 100%; } .span_4_of_6 { width: 100%; } .span_3_of_6 { width: 100%; } .span_2_of_6 { width: 100%; } .span_1_of_6 { width: 100%; } .span_7_of_7 { width: 100%; } .span_6_of_7 { width: 100%; } .span_5_of_7 { width: 100%; } .span_4_of_7 { width: 100%; } .span_3_of_7 { width: 100%; } .span_2_of_7 { width: 100%; } .span_1_of_7 { width: 100%; } .span_8_of_8 { width: 100%; } .span_7_of_8 { width: 100%; } .span_6_of_8 { width: 100%; } .span_5_of_8 { width: 100%; } .span_4_of_8 { width: 100%; } .span_3_of_8 { width: 100%; } .span_2_of_8 { width: 100%; } .span_1_of_8 { width: 100%; } .span_9_of_9 { width: 100%; } .span_8_of_9 { width: 100%; } .span_7_of_9 { width: 100%; } .span_6_of_9 { width: 100%; } .span_5_of_9 { width: 100%; } .span_4_of_9 { width: 100%; } .span_3_of_9 { width: 100%; } .span_2_of_9 { width: 100%; } .span_1_of_9 { width: 100%; } .span_10_of_10 { width: 100%; } .span_9_of_10 { width: 100%; } .span_8_of_10 { width: 100%; } .span_7_of_10 { width: 100%; } .span_6_of_10 { width: 100%; } .span_5_of_10 { width: 100%; } .span_4_of_10 { width: 100%; } .span_3_of_10 { width: 100%; } .span_2_of_10 { width: 100%; } .span_1_of_10 { width: 100%; } .span_11_of_11 { width: 100%; } .span_10_of_11 { width: 100%; } .span_9_of_11 { width: 100%; } .span_8_of_11 { width: 100%; } .span_7_of_11 { width: 100%; } .span_6_of_11 { width: 100%; } .span_5_of_11 { width: 100%; } .span_4_of_11 { width: 100%; } .span_3_of_11 { width: 100%; } .span_2_of_11 { width: 100%; } .span_1_of_11 { width: 100%; } .span_12_of_12 { width: 100%; } .span_11_of_12 { width: 100%; } .span_10_of_12 { width: 100%; } .span_9_of_12 { width: 100%; } .span_8_of_12 { width: 100%; } .span_7_of_12 { width: 100%; } .span_6_of_12 { width: 100%; } .span_5_of_12 { width: 100%; } .span_4_of_12 { width: 100%; } .span_3_of_12 { width: 100%; } .span_2_of_12 { width: 100%; } .span_1_of_12 { width: 100%; } .ForumAvatar { width: 128px; height: 128px; margin: 10px auto; } } /* 480px */ @media only screen and (max-width:480px) { } /* TELERIK RAD WINDOW Transparency overrides */ div.RadWindow.RadWindow_Stream .rwCorner, div.RadWindow.RadWindow_Stream .rwTitlebar, div.RadWindow.RadWindow_Stream .rwStatusbarRow, div.RadWindow.RadWindow_Stream .rwFooterCenter {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); opacity:100; -moz-opacity:100; display:none; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;} div.RadWindow.RadWindow_Stream .rwTitlebar .rwIcon {display:none;} div.RadWindow.RadWindow_Stream .rwWindowContent div {width:100%;} div.RadWindow.RadWindow_Stream .rwWindowContent .CloseButton {margin-right:5px;} div.RadWindow.RadWindow_Stream {background-color:#ced7e5; border-width:3px; border-style:solid; border-color:#5176B5; padding:3px;} /* RadEditor Overrides */ .RadEditor {height:100%;} /* RadToolTip Overrides */ div.RadToolTip_ImagePopup .rtWrapperTopLeft, div.RadToolTip_ImagePopup .rtWrapperTopCenter, div.RadToolTip_ImagePopup .rtWrapperTopRight, div.RadToolTip_ImagePopup .rtWrapperLeftMiddle, div.RadToolTip_ImagePopup .rtWrapperRightMiddle, div.RadToolTip_ImagePopup .rtWrapperBottomLeft, div.RadToolTip_ImagePopup .rtWrapperBottomCenter, div.RadToolTip_ImagePopup .rtWrapperBottomRight {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); opacity:100; -moz-opacity:100; display:none; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;}