/* Minification failed. Returning unminified contents. (1131,19): run-time error CSS1030: Expected identifier, 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;} span.txtsmall { font-size: 14px !important; color: #5a5a5a;} table {border-collapse:collapse; border-spacing:0;} /* HTML tags the streamSWEET way ===================== */ body {font-size:16px; line-height:1.9em; color:#000; margin:0; background-color:#fff;} p {margin:2px 0 22px 0;} h1 {font-size:38px; line-height:44px; color:#000; margin:20px 0px 12px 0px;} h2 {font-size:32px; line-height:36px; font-weight:normal; color:#000; margin:34px 0px 10px 0px;} h3 {font-size:24px; line-height:28px; font-weight:normal; color:#000; margin:22px 0px 8px 0px;} h4 {font-size:18px; line-height:24px; font-weight:bold; color:#333; margin:20px 0px 2px 0px;} h5 {font-size:16px; line-height:20px; font-weight:bold; color:#333; margin:10px 0px 2px 0px;} h6 {font-size:13px; line-height:16px; font-weight:bold; color:#666; 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:#5699BE;} a:active, a:hover, a:focus {color:#385B4C;} /* 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:0; background-color:#fff; z-index:1000; height:60px; transition:all 0.3s;} .ShellLogoMenu {padding:0; background-color:#fff; z-index:1000; height:60px; transition:all 0.3s;} .ShellLogoBanner {padding:8px 0 0 0; background-color:#fff; z-index:1000; /*height:68px;*/ border-bottom:1px solid #ddd; transition:all 0.3s;} .ShellMenu {padding:0 0; background-color:#e3e3e3; height:58px;} .ShellHero {padding:0; background-color:#ccc;} .ShellContentStd {padding:20px 0 30px 0; background-color:#fff; min-height:500px;} .ShellHome1 {background-color:#fff;} .ShellHome2 {background-color:#E0E9E5; padding:40px 0;} .ShellHome2 p {font-size:15px; line-height:19px;} .ShellHome2 h2 {color:#fff; font-size:24px; line-height: 30px;} .ShellHome3 {background-color:#F1F3F6; padding:30px 0;} .ShellHome4 {background-color:#fff; padding:30px 0;} .ShellHome5 {background-color:#fff; padding:20px 0;} .ShellFooter {background-color:#fafafa;} .ShellFooterInner {background-color:#4D7E69; padding:40px 0} .ShellBottom {padding:10px 0;} /* 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:1280px; width:90%;} .Wrapper {margin:0 auto; position:relative; max-width:1280px;} /* Template specific layout handlers */ /* Home ===================== */ .hContent1 {padding:40px 0; margin-left:auto; margin-right:auto;} /* Content 1 */ .hContent2 {padding:0px 0px 20px 0; text-align:left; vertical-align:top;} /* Content 2 */ .HomePeople {margin:0 auto; max-width:1980px;} .HomePeopleCol {width:16.6666667%; float:left;} .HomePeople img {height:auto; max-height:330px;} .HomeHeading {background-color:#000; padding:10px;} .HomeHeading h1 {font-size:24px; line-height:28px; color:#fff; text-align:center; margin:5px 0;} .HomeProject {margin:40px 0 20px 0;} .HomeLinkSpeakers {min-height:260px; background-repeat:no-repeat; background-size:cover; /*contain;*/ background-position:50% 50%; background-image:url(/assets/images/home_speakers.jpg); background-color:#4D7E69; margin-bottom: 30px;} .HomeLinkSpeakers > h4 {top:90px; position: relative; font-size:42px; line-height: 48px; color: #fff;} .HomeLinkSpeakers:hover {background-image:url(/assets/images/home_speakers_on.jpg); transition:all 0.3s ease;} .HomeLinkProgram {min-height:260px; background-repeat:no-repeat; background-size:cover; /*contain;*/ background-position:50% 50%; background-image:url(/assets/images/home_program.jpg); background-color:#4D7E69; margin-bottom: 30px;} .HomeLinkProgram > h4 {top:90px; position: relative; font-size:42px; line-height: 48px; color: #fff;} .HomeLinkProgram:hover {background-image:url(/assets/images/home_program_on.jpg); transition:all 0.3s ease;} .HomeLinkSponsors {min-height:260px; background-repeat:no-repeat; background-size:cover; /*contain;*/ background-position:50% 50%; background-image:url(/assets/images/home_sponsors.jpg); background-color:#4D7E69; margin-bottom: 30px;} .HomeLinkSponsors > h4 {top:90px; position: relative; font-size:42px; line-height: 48px; color: #fff;} .HomeLinkSponsors:hover {background-image:url(/assets/images/home_sponsors_on.jpg); transition:all 0.3s ease;} /* 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 */ /* Banners */ .BannerWordForWord {background:url(/assets/images/banner_word_for_word.jpg); background-size:cover; /*contain;*/ background-position:50% 50%; overflow:hidden; min-height:180px; background-color:#121f1e; padding:10px;} .BannerTreaty30 {overflow:hidden; min-height:180px; background-color:#021520; padding:10px;} /* Program Info */ .ProgrammeTable {width:100%; background-color:#f6fdf3; margin:30px 0; font-size:14px} .ProgrammeTable th {background-color:#3b8672; color:#fff; padding:10px 15px; text-align:left; border-bottom:1px solid #e0e9e5} .ProgrammeTable td {padding:7px 15px; border-bottom:1px solid #e0e9e5} .ProgrammeTableSubHead { padding: 15px 15px !important; border-bottom:1px solid #e0e9e5 } .ButtonRegister {background-color:#e7c36a; text-align:center; padding:8px 25px; margin:10px 6px 10px 6px; border-radius:4px; font-size:18px; line-height:18px; white-space:nowrap;} a.ButtonRegister:link, a.ButtonRegister:visited {color:#424547; text-decoration:none;} a.ButtonRegister:hover, a.ButtonRegister:active {background-color:#3B3024; color:#fff;} /* Container for User Login Text/Name*/ .cLogin {float:right; /*background-color:#fff;*/ padding:0 14px; margin:10px; font-weight:400; font-size:14px; line-height: normal;} .cLogin a:link, .cLogin a:visited {color:#666; text-decoration:none;} .cLogin a:hover, .cLogin a:active {color:#333; text-decoration:underline;} /* Container for basket */ .cBasket {margin:5px 30px 0 0; float:right; color:#666; line-height:normal; text-align:right;} .cBasket a:link, .cBasket a:visited {color:#666; text-decoration:none;} .cBasket a:hover, .cBasket a:active {text-decoration:underline; color:#333} .BasketIcon {float:left;} .BasketCount {float:left; padding-top:4px; line-height:normal;} /* Contact Button */ .Contact {float:right; padding:0 14px; margin:10px; font-weight:400; font-size:14px; line-height:normal;} .Contact a:link, .Contact a:visited {color:#666; text-decoration:none;} .Contact a:hover, .Contact a:active {text-decoration:underline; color:#333} /* 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; background-color:#fff;} #nav li {position:relative; text-align:left;} #nav li a {display:block; text-decoration:none; color:#555;} /* First level */ #nav > ul > li {display:inline-block;} #nav > ul > li > a {color:#000; font-size:16px; padding:14px 14px; border-top:2px solid #999; margin:0 2px;} /*#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:#4D7E69; background-color:#E0E9E5; border-top: 2px solid #4D7E69;} #nav > ul > li.NavSelected > a:after {color:#555;} #nav > ul > li:hover > a, #nav > ul > li:hover > a:after {color:#222; background-color:#E0E9E5;} /* Second level */ #nav > ul > li > ul {z-index:10001; width:200px; position:absolute; top:calc(100% - 14px); overflow:hidden; padding:0; max-height:0; opacity:0; transition:padding 0.0s, max-height 1.5s, opacity 0.5s;} #nav > ul > li:hover > ul {padding:15px 0; max-height:800px; opacity:1; overflow:visible; border:1px solid #E0E9E5; border-radius:4px; background-color:#f1f4f3; box-shadow:0 0 3px 3px rgba(76, 76, 76, 0.1);} #nav > ul > li > ul > li > a {font-size:14px; padding:8px 15px; color:#333;} #nav > ul > li > ul > li.NavParent > a:after {content:'\25BA'; font-size:10px; color:#555; position:absolute; top:8px; right:5px;} #nav > ul > li > ul > li:hover > a, #nav > ul > li > ul > li:hover > a:after {color:#4D7E69;} /* Third level. !*!* Note that JQuery is used to affect the direction of the flyout on the last item in the main nav. */ #nav > ul > li > ul > li > ul {z-index:10002; position:absolute; top:-1px; left:calc(100% - 5px); padding:0; width:0; max-height:0; opacity:0; transition:padding 0.0s, width 0.0s, max-height 1.5s, opacity 0.75s;} #nav > ul > li > ul > li:hover > ul {padding:15px 0; width:200px; max-height:800px; opacity:1; border:1px solid #E0E9E5; border-radius:4px; background-color:#f1f4f3; box-shadow:0 0 3px 3px rgba(76, 76, 76, 0.1);} #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;} #nav > ul > li > ul > li > ul > li > a:hover {color:#4D7E69;} /* Second level Sub Nav - Vertical ===================== */ #navSub, #navSub ul {width:100%; list-style:none; font-size:14px; line-height:14px; padding:0; margin:0;} #navSub .sel {background-color:#fff; color:#4D7E69; background-image:url(/assets/images/arrow_subnav_1_on.svg);} #navSub a {display:block; color:#666; text-decoration:none;} #navSub li {margin:4px 0px; 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:8px 5px 5px 36px; background:url(/assets/images/arrow_subnav_1.svg) 10px 10px no-repeat;} #navSub li ul {border:0;} #navSub li li .sel {background-color:#fff; color:#4D7E69; 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:8px 5px 5px 50px; background:url(/assets/images/arrow_subnav_2.svg) 26px 10px no-repeat;} #navSub a:hover {background-color:#fff; color:#4D7E69; 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:#7c939a; text-decoration:underline;} .MenuBotL1 a:visited {color:#7c939a; text-decoration:underline;} .MenuBotL1 a:active, .MenuBotL1 a:hover {color:#fff; 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:#7c939a; text-decoration:underline;} .MenuBotL2 a:visited {color:#7c939a; text-decoration:underline;} .MenuBotL2 a:active, .MenuBotL2 a:hover {color:#fff; text-decoration:underline;} .MenuBotL2 span {padding:0 5px 0 5px; color:#7c939a;} /* Main Logo */ .LogoMain {z-index:10005; position:relative; left:3%; top:0; /*height:68px;*/ transition:all 0.3s;} .LogoNZSTI {float:right;} /* 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;} .sticky:before,.sticky:after {content:' ';display:table;} /* Sticky top logo / Navigation row resize handling. Triggered by JavaScript function "init" ===================== */ /* No need for any of this header.HdrSmaller {height:44px; padding:3px 0;} .HdrSmaller .LogoMain {} .HdrSmaller #nav > ul > li > a {padding:7px 14px;} .HdrSmaller #nav > ul > li > ul {top:calc(100%);} .HdrSmaller #nav > ul > li.NavParent > a:after {top:8px;} */ /* Sign Up Button */ .SignUpLink {position:absolute; right:0; /*top:10px;*/ display:inline-block; z-index:10009; transition:all 0.3s;} .SignUpLink:hover {opacity:0.6;} /* 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:#e0e9e5; 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:#e0e9e5; 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;} /* 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:#e0e9e5; 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:#e0e9e5; 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 - 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; background-color:#efefef; background-image:linear-gradient(0deg, #efefef, #fff 90%); border-top-left-radius:4px; border-top-right-radius:4px;} .TableDataRepeat th {font-size:12px; color:#4b5267; font-weight:normal; text-align:left; padding:4px; background-color:#f2f4f3; background-image:linear-gradient(0deg, #f2f4f3, #eeeff1 90%);} .TableDataRepeat td {font-size:12px; text-align:left; padding:4px 3px;} .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;} /* 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:#e0e9e5; margin:10px 0 0 0; padding:10px 10px 5px 10px;} .FormSetHor > h2, .FormSetVert > h2 {font-size:20px; font-weight:400; background-color:#e0e9e5; 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:#f2f4f3; 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 {color:#999; font-style:italic; padding:4px 0; max-width:calc(100% - 10px);} .FormSetHor > aside, .FormSetVert > aside, .FormSetFilter > aside {padding:15px; max-width:calc(100% - 30px);} /* 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:"\2605"; color:#fa613e; font-size:12px; position:absolute; top:0; left:calc(90% + 5px);} .FormRequiredFieldNarrow::after {content:"\2605"; color:#fa613e; font-size:12px; margin-left:5px; vertical-align:top;} /* Default form element styling */ input[type="text"], 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="password"] {height:24px; margin:0 5px 0 0;} 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 5px; vertical-align:top;} .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="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, textarea:focus {background-color:#fffaed;} 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:110px;} .FormWidthLong {width:400px !important;} .FormWidthMedium {width:150px !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 the JQuery that handles the MaxChar functionality on textareas - apply to a containing DIV */ .FormContTextAreaMaxChar {width:calc(90% - 5px); max-width:800px; display:inline-block; margin:0 5px 0 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;} /* OContain radio button in a controlled manner */ .FormContRadioSet {max-width:800px; display:inline-block;} .FormContRadioSet td {padding:0 10px 0 0;} /* 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 label {margin-left: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:8px 22px; font-size:16px; color:#fff; border:0; background-color:#000; 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:#000; 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:94px; height:31px; background:url(/assets/images/button_top.svg)no-repeat 0px 0px; margin:20px 0 20px 0; padding:3px 0 0 3PX; border:none; background-color:transparent; cursor:pointer; display:inline-block; text-align:center; font-size:13px; line-height:27px;} .ImgBtnTop a:link., a:visited {text-decoration:none; display:block; width:94px; height:31px; margin:0; color:#333;} .ImgBtnTop:hover {background:url(/assets/images/button_top_on.svg) no-repeat 0px 0px; transition:all 0.9s ease;} .IconButton {display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; background-color:#eaeaea; padding:8px 16px 8px 8px;} .IconButton:hover {cursor:pointer;} /* 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;} /* ======================================================================================== */ /* ======================================================================================== */ /* 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 */ .HomeEvents {padding: 10px 0; border-bottom: 1px solid #ccc;} .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:30%; margin:90px 0; color:#fdfdfd; background-color:rgba(0, 0, 0, 0.6); padding:1rem 2rem; float:right; position:relative;} /* Homepage Main Button */ .HeroStaticButton {background-color:#3b8672; position:relative; box-shadow:0 5px 5px rgba(0, 0, 0, 0.2); font-weight:400; border:0.0625rem solid #3b8672; border-radius:0.25rem; -webkit-border-radius:0.25rem; -moz-border-radius:0.25rem; margin:10px 5px; font-size:18px; line-height:18px;} .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:#8fc260; position:relative; box-shadow:0 5px 5px rgba(0, 0, 0, 0.2); font-weight:400; border:0.0625rem solid #8fc260; border-radius:0.25rem; -webkit-border-radius:0.25rem; -moz-border-radius:0.25rem; margin:10px 5px; font-size:18px; line-height:18px;} .HeroStaticButtonAlt a:link, .HeroStaticButtonAlt a:visited {text-decoration:none !important; color:#fff !important;} .HeroStaticButtonAlt:hover {text-decoration:none !important; background-color:#efc258; border:0.0625rem solid #efc258;} .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:400; font-size:32px; line-height:36px; margin:0.5em 0; color:#fff;} .HeroImageStatic h2 {font-size:24px; line-height:28px; color:#fff;} .HeroImageStatic h3 {font-size:18px; line-height:22px; color:#fff;} .HeroImageStatic hr {border-color:#666; 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;} .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:2px 10px 10px 20px;/*background-color:#f5f5f5;*/} .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 #ccc; 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:#4d7e69; border:1px solid #4d7e69;} /* 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;} /* 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:#8fc260;} .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 */ /* ======================================================================================== */ /* ======================================================================================== */ /* Main Icons */ .BigIconPanel {color:#484849;} .BigIconPanel p {font-size:16px;} .BigIcon {float:left; width:20%; min-width:90px;} .BigIconText h2 {float:left; width:80%; margin:24px 0 0 0; font-size:28px;} .SearchInterpreter {float:right; margin:0 0 6px 0;} .SearchTranslator {float:right; margin:2px 0 0 0;} /*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 #768f82; background-color:#f5f5f5; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;} .ib_gallery_on img {display:inline-block; border:1px solid #768f82; background-color:#b0dc80; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;} .ib_brief img {display:inline-block; border:1px solid #768f82; background-color:#f5f5f5; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;} .ib_brief_on img {display:inline-block; border:1px solid #768f82; background-color:#b0dc80; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;} .ib_list img {display:inline-block; border:1px solid #768f82; background-color:#f5f5f5; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;} .ib_list_on img {display:inline-block; border:1px solid #768f82; background-color:#b0dc80; -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:#f5fbe9; color:#000; border:1px solid #e9f3ee;} #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-bottom:20px; line-height:1.5; border-top:1px solid #bdbebf; background-color:#fff;} .TableFeature th {background-color:#f5f5f5; font-weight:300; color:#939598; padding:10px;} .TableFeature tr {border-bottom:1px solid #bdbebf;} .TableFeature tr:hover {background-color:#f2f9fb;} .TableFeature td {font-size:14px; padding:8px; /*vertical-align:top;*/} .TableFeatureSubHead {color:#939598; font-weight:bold;} /* 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;} /* ---------------------------------------------------------------------------------------------------------------------- */ /* Media Queries - MUST ALWAYS BE THE LAST BLOCK OF CSS - Always work with biggest screen to smallest. */ /* ---------------------------------------------------------------------------------------------------------------------- */ /* 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 {/*height:50px;*/ left:3%;} .SignUpLink {top:20px; right:5%; height:30px;} #nav > ul > li > a {padding:10px 20px;} #nav > ul > li.NavParent > a:after {top:17px;} /* No need header.HdrSmaller {height:45px;} .HdrSmaller .LogoMain {height:35px;} .HdrSmaller #nav > ul > li > a {padding:7px 20px;} .HdrSmaller #nav > ul > li.NavParent > a:after {text-outline: 5px;px;} */ /* Menu icon / menu row */ #nav {top:10px; padding:10px 0 0 4px; width:100%; background-color:#fafafa; border:1px solid #ccc;} #nav > a {color:#4D7E69; text-decoration:none;} #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:44px; line-height:20px; margin:3px 30px 3px 40px;} #nav .menutext {display:none;} /* First level */ #nav:target > ul {display:block;} #nav > ul > li {display:block; border-bottom:1px solid #ddd;} #nav > ul > li:first-child {border-top:1px solid #ddd;} #nav > ul > li > a {padding:10px 15px; font-size:16px;} #nav > ul > li.NavParent > a:after {content:"\25BC"; font-size:14px; color:#888; 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 #efefef; box-shadow:none;} #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:#555; 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; box-shadow:none;} #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:18px !important; line-height:26px !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;} .span_1_of_4Footer {width:100%;} .SearchPanelCol1 {float:left; width:auto;} .HomeHeading h1 {font-size:18px; line-height:20px; margin:2px 0;} } /* 720px*/ @media only screen and (max-width:720px) { .FormWidthLong {width:100px;} /* Sticky Panel */ .sticky {position:relative;} .sticky:before,.sticky:after {} } /* 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;} .HeroPanel {width:80% !important; margin:50px auto; float:none !important;} .LogoMain {margin:0 auto; left:0; top:0;} .LogoNZSTI {float:none; margin:0 auto; height:60px;} .streamSWEETLogo {float:none; margin:10px auto !important;} /* 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;}