/*------------------------------------------------------------------------------------------------------ OS and Browser classes are added to the HTML tag by JS use these to style for different browsers -------------------------------------------------------------------------------------------------------- Available OS Classes: .win - Microsoft Windows (all versions) .vista - Microsoft Windows Vista new .linux - Linux (x11 and linux) .mac - Mac OS .freebsd - FreeBSD .ipod - iPod Touch .iphone - iPhone .ipad - iPad new .webtv - WebTV .j2me - J2ME Devices (ex: Opera mini) changed from mobile to j2me .blackberry - BlackBerry new .android - Google Android new .mobile - All mobile devices new Available Browser Classes: .ie - Internet Explorer (All versions) .ie8 - Internet Explorer 8.x .ie7 - Internet Explorer 7.x .ie6 - Internet Explorer 6.x .ie5 - Internet Explorer 5.x .gecko - Mozilla, Firefox (all versions), Camino .ff2 - Firefox 2 .ff3 - Firefox 3 .ff3_5 - Firefox 3.5 .ff3_6 - Firefox 3.6 .opera - Opera (All versions) .opera8 - Opera 8.x .opera9 - Opera 9.x .opera10 - Opera 10.x .konqueror - Konqueror .webkit or .safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome .safari3 - Safari 3.x .chrome - Google Chrome .iron - SRWare Iron Extra Codes: .js - available when JS is enabled .no-js - remains in the HTML tag when JS is disabled/off -------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------------ Modernizr adds classes to the HTML tag with JS. use these to style for different browsers' capabilites -------------------------------------------------------------------------------------------------------- Some of the most important classes available (check the HTML tag on a live page for more): Screen Layout Classes applied on resize (if you aren't already using media queries): .orientation_landscape - if the screen is wider than it is tall .orientation_portrait - if the screen is taller than it is wide .maxw_2560 - max width of screen 2560px .maxw_1920 - max width of screen 1920px .maxw_1680 - max width of screen 1680px .maxw_1440 - max width of screen 1440px .maxw_1280 - max width of screen 1280px .maxw_1152 - max width of screen 1152px .maxw_1024 - max width of screen 1024px .maxw_768 - max width of screen 768px - usually the max width for a tablet .maxw_640 - max width of screen 640px .maxw_480 - max width of screen 480px .maxw_320 - max width of screen 320px - mobile widths CSS3 selectors applied on page load (selectors are prefixed with "no-" if it is not available) : .rgba - availability of Red/Green/Blue/Alpha transparency for colours .hsla - availability of Hue/Saturation/Lightness/ Alpha transparency for colours .multiplebgs - availability of Multple background images css .backgroundsize - availability of Background Size css .borderimage - availability of Border size css .borderradius - availability of Border radius css .boxshadow - availability of Box shadow css .textshadow - availability of Text shadow css .opacity - availability of Opacity .cssanimations - availability of CSS Animations .csscolumns - availability of CSS columns .cssgradients - availability of CSS gradients .cssreflections - availability of CSS reflections .csstransforms - availability of CSS Transform animations .csstransforms3d - availability of CSS Transform 3D animations .csstransitions - availability of CSS Transitions animations .fontface - availability of @font-face font replacements --------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------------- Typography styling only - default text settings should be altered in grids -------------------------------------------------------------------------------------------------------*/ @font-face { font-family: 'KalingaRegular'; src: url('/stylesheets/fonts/kalinga.eot'); src: url('/stylesheets/fonts/kalinga.eot') format('embedded-opentype'), url('/stylesheets/fonts/kalinga.woff') format('woff'), url('/stylesheets/fonts/kalinga.ttf') format('truetype'), url('/stylesheets/fonts/kalinga.svg#KalingaRegular') format('svg'); } @font-face { font-family: 'KalingaBold'; src: url('/stylesheets/fonts/kalingab.eot'); src: url('/stylesheets/fonts/kalingab.eot') format('embedded-opentype'), url('/stylesheets/fonts/kalingab.woff') format('woff'), url('/stylesheets/fonts/kalingab.ttf') format('truetype'), url('/stylesheets/fonts/kalingab.svg#KalingaBold') format('svg'); } body{/*Fall back - just in case some text isn't wrapped in an element in the CMS*/ font-family: "Kalinga","KalingaRegular","Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; color:#455560; } /* Base Type Styles Using Modular Scale ---------------------- */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin: 0; padding: 0; font-size: 14px; direction: ltr; } p,td,li {font-family: "Kalinga","KalingaRegular","Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;color:#455560;} p img.left {float:left;margin:0 0.5em 0.5em 0;} p img.right {float:right;margin:0 0 0.5em 0.5em;} a { color:#F78F1E; text-decoration:underline; -webkit-transition:all .15s ease-in-out; -moz-transition:all .15s ease-in-out; -o-transition:all .15s ease-in-out; -ms-transition:all .15s ease-in-out; transition:all .15s ease-in-out; } a:hover {text-decoration:none;color:#F9B56B;} a:active {text-decoration:underline;color:#F79E40;} a:focus {text-decoration:none;outline:dotted thin;} p { font-family: inherit; font-weight: normal; font-size: 14px; line-height: 1.6; margin-bottom: 17px; } p.lead { font-size: 17.5px; line-height: 1.6; margin-bottom: 17px; } aside p { font-size: 13px; line-height: 1.35; font-style: italic; } hr { border: solid #b6b6b6; border-width: 1px 0 0; clear: both; margin: 10px 0 21px; height: 0; } .subheader { line-height: 1.3; color: #6f6f6f; font-weight: 300; margin-bottom: 17px; } em, i { font-style: italic; line-height: inherit; } strong, b { font-weight: bold; line-height: inherit; } small { font-size: 60%; line-height: inherit; } code { font-weight: bold; background: #ffff99; } h1, h2, h3, h4, h5, h6{font-family: "KalingaBold","Kalinga Bold","Kalinga","Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;color:#455560;font-style: normal; text-rendering: optimizeLegibility; line-height: 1.1; margin-bottom: 14px; margin-top: 14px; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; } h1 { font-size: 30px; } h2 { font-size: 37px; } h3 { font-size: 27px; } h4 { font-size: 23px; } h5 { font-size: 17px; } h6 { font-size: 14px; } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {} /* Lists ---------------------- */ ul, ol, dl { font-size: 14px; line-height: 1.6; margin-bottom: 17px; list-style-position: outside; } ul li ul, ul li ol { margin-left: 20px; margin-bottom: 0; } ul.square, ul.circle, ul.disc { margin-left: 17px; } ul.square { list-style-type: square; } ul.square li ul { list-style: inherit; } ul.circle { list-style-type: circle; } ul.circle li ul { list-style: inherit; } ul.disc { list-style-type: disc; } ul.disc li ul { list-style: inherit; } ul.no-bullet { list-style: none; } ul.large li { line-height: 21px; } ol { margin-left: 20px; } ol li ul, ol li ol { margin-left: 20px; margin-bottom: 0; } /* Blockquotes ---------------------- */ blockquote, blockquote p { line-height: 1.5; color: #6f6f6f; } blockquote { margin: 0 0 17px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; } blockquote cite { display: block; font-size: 13px; color: #555555; } blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited { color: #555555; } abbr, acronym { text-transform: uppercase; font-size: 90%; color: #222222; border-bottom: 1px solid #ddd; cursor: help; } abbr { text-transform: none; } p a, p a:visited { line-height: inherit; } /* Misc ---------------------- */ .left { float: left; } .right { float: right; } .textCenter,.textCenter,.alignCenter,.alignCentre,.text-center,.text-centre,.align-center,.align-centre,.textCenter *,.textCenter *,.alignCenter *,.alignCentre *,.text-center *,.text-centre *,.align-center *,.align-centre * {text-align:center;} .textRight,.alignRight,.text-right,.align-right,.textRight *,.alignRight *,.text-right *,.align-right *{ text-align:right; } .textLeft,.alignLeft,.text-left,.align-left,.textLeft *,.alignLeft *,.text-left *,.align-left *{ text-align:left; } .lightText,.light-text{color:#b6b6b6!important;} .largeText,.large-text{font-size:110%!important;} .largerText,.larger-text{font-size:120%!important;} .largestText,.largest-text{font-size:150%!important;} .uppercase,.uppercase *{text-transform:uppercase!important;} .lowercase,.lowercase * {text-transform:lowercase!important;} .noMarginBottom,.no-margin-bottom{margin-bottom:0!important;} .noMarginTop,.no-margin-top{margin-top:0!important;} .noMarginLeft,.no-margin-left{margin-left:0!important;} .noMarginRight,.no-margin-Right{margin-right:0!important;} .noPaddingBottom,.no-padding-bottom{padding-bottom:0!important;} .noPaddingTop,.no-padding-top{padding-top:0!important;} .noPaddingLeft,.no-padding-left{padding-left:0!important;} .noPaddingRight,.no-padding-Right{padding-right:0!important;} .hide { display: none; } .hide-override { display: none !important; } .highlight { background: #ffff99; } .row.border > div { margin-bottom:1px solid #d8d8d8; padding-bottom:10px; margin-bottom:10px; } /*-------------------------------------------------------- Buttons -------------------------------------------------------- */ .button { width: auto; background: #F78F1E; border: 1px solid #E07F18; color: white; cursor: pointer; display: inline-block; font-family: inherit; font-size: 14px; font-weight: bold; line-height: 1; margin: 0; padding: 10px 20px 11px; position: relative; text-align: center; text-decoration: none; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; -webkit-transition: background-color 0.25s linear; -moz-transition: background-color 0.25s linear; -o-transition: background-color 0.25s linear; transition: background-color 0.25s linear; behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } .button:hover, .button:focus { color: white; background-color: #E27F14; text-decoration: none; } .button:active { -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2) inset; text-decoration: none; } .button.large { font-size: 17px; padding: 15px 30px 16px; } .button.medium { font-size: 14px; } .button.small { font-size: 11px; padding: 7px 14px 8px; } .button.tiny { font-size: 10px; padding: 5px 10px 6px; } .button.expand { width: 100%; text-align: center; } .button.primary { background-color: #2ba6cb; border: 1px solid #1e728c; } .button.primary:hover, .button.primary:focus { background-color: #2284a1; } .button.success { background-color: #5da423; border: 1px solid #396516; } .button.success:hover, .button.success:focus { background-color: #457a1a; } .button.alert { background-color: #c60f13; border: 1px solid #7f0a0c; } .button.alert:hover, .button.alert:focus { background-color: #970b0e; } .button.secondary { background-color: #e9e9e9; color: #1d1d1d; border: 1px solid #c3c3c3; } .button.secondary:hover, .button.secondary:focus { background-color: #d0d0d0; } .button.radius { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .button.round { -webkit-border-radius: 1000px; -moz-border-radius: 1000px; -ms-border-radius: 1000px; -o-border-radius: 1000px; border-radius: 1000px; } .button.full-width { width: 100%; text-align: center; padding-left: 0px !important; padding-right: 0px !important; } .button.left-align { text-align: left; text-indent: 12px; } .button.disabled, .button[disabled] { opacity: 0.6; cursor: default; background: #2ba6cb; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .button.disabled:hover, .button[disabled]:hover { background: #2ba6cb; } .button.disabled.success, .button[disabled].success { background-color: #5da423; } .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus { background-color: #5da423; outline: none; } .button.disabled.alert, .button[disabled].alert { background-color: #c60f13; } .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus { background-color: #c60f13; outline: none; } .button.disabled.secondary, .button[disabled].secondary { background-color: #e9e9e9; } .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus { background-color: #e9e9e9; outline: none; } /*------------------------------------------------------------------------------------------------------ HTML 5 ------------------------------------------------------------------------------------------------------*/ /* Tell the browser to render HTML 5 elements as block */ header, footer, aside, nav, article, section { display:block; } header { } nav { } section { } aside { } article { } footer { } /*------------------------------------------------------------------------------------------------------ Generic Classes ------------------------------------------------------------------------------------------------------*/ .left { float:left; } .right { float:right; } img.left { margin-right:1em; margin-bottom:1.5em; } img.right { margin-left:1em; margin-bottom:1.5em; } .half { width:45%; /* Not exactly half to account for paddings, margins etc. */ } .hide{ /* Hide stuff without resorting to display:none; */ visibility:hidden; width:0!important; height:0!important; line-height:0!important; padding:0!important; margin:0!important; } /*------------------------------------------------------------------------------------------------------ Page Layout elements ------------------------------------------------------------------------------------------------------*/ html, body { height:100%; } body { } /*testing the width classes with colours on the body tag .maxw_2560 body { background:#000; } .maxw_1920 body { background:#222; } .maxw_1680 body { background:#444; } .maxw_1440 body { background:#666; } .maxw_1280 body { background:#888; } .maxw_1152 body { background:#ddd; } .maxw_1024 body { background:#eee; } .maxw_768 body { background:#ff0; } .maxw_640 body { background:#900; } .maxw_480 body { background:#906; } .maxw_320 body { background:#90F; } /*End of testing the width classes with colours on the body tag */ #header,#mainNav,#content,#footer { display:block; } #wrapper { } #header { padding-top:10px; border-top:10px solid #455560; } /*--------------------------------------- Main Logo styling using a H1 and an A tag ---------------------------------------*/ #logo { } #logo h1 { margin:0 0 0 0; padding:0 0 0 0; } #logo a { display:block; outline:none; } #logo a:hover, #logo a:focus { } #logo img { } #contact { } #contact p { margin:0; } #contact p > span { background: url("/images/phoneIcon.png") no-repeat scroll right center transparent; display: inline-block; padding-right: 48px; } #social { } #social ul { margin: 0; } #social ul li { padding: 0 4px 0 0; } #social ul li a { } #social ul li a:hover { } #social ul li a img { } @media only screen and (max-width: 767px) { #header { background: none repeat scroll 0 0 #FFFFFF; border-bottom: 1px solid #FFFFFF; box-shadow: 0 0 50px rgba(150, 150, 150, 0.2) inset, 0 -5px 10px rgba(0, 0, 0, 0.2); position: fixed; top: 0; width: 100%; z-index: 200; } #logo a { display: block; margin: 0 auto 5px; text-align: center; width: 50%; } #contact p { text-align:center!important; } #social ul { float: none !important; margin: 5px auto; width: 20% !important; } } /*------------------------------------------------------------------------------------------------------ Horizontal navigation - for use with BC Dynamic menus. Just put module in a div with a class .hNav -------------------------------------------------------------------------------------------------------*/ .hNav { margin: 20px 0; } .hNav > div /*BC puts a child div in by default*/ { } .hNav ul { height: 42px; background: none; padding: 0; } .hNav ul > li { float: left; display: block; position: relative; padding: 0; margin: 0; } .hNav ul > li:first-child { } .hNav ul > li:last-child { } .hNav ul li a, .hNav ul li a:visited { display:block; text-align:center; padding:0 1em; line-height:44px; height:42px; text-decoration:none; } .hNav ul li a:hover, .hNav ul li.selected a, .hNav ul li.active a { outline:none; } .hNav ul li a:active { } /*------------------------------------ Horizontal Subnav ------------------------------------*/ .hNav ul li ul { display:none; position:absolute; height: auto; width:200px; top:43px; z-index:10; margin:0; } .hNav ul li ul li { float:none; } .hNav ul li ul li a, .hNav ul li.selected ul li a, .hNav ul li.active ul li a { float:none; display:block; } .hNav ul li ul li a:hover, .hNav ul li ul li.selected a, .hNav ul li.selected ul li.selected a, .hNav ul li ul li.hovered a, .hNav ul li.hovered ul li.hovered a { } /*--------------------------------------- Horizontal sub sub nav ---------------------------------------*/ .hNav ul li ul li ul { position:absolute; top:0; left:200px; width:200px; } .hNav ul li ul li ul li { float:none; } .hNav ul li ul li ul li a, .hNav ul li.selected ul li ul li a, .hNav ul li.selected ul li.selected ul li a { } .hNav ul li ul li ul li a:hover, .hNav ul li ul li ul li.selected a, .hNav ul li.selected ul li ul li a:hover, .hNav ul li.selected ul li.selected ul li a:hover, .hNav ul li ul li ul li.active a, .hNav ul li.active ul li ul li a:hover, .hNav ul li.active ul li.active ul li a:hover { } .no-js .hNav ul li:hover ul { display:block; } @media only screen and (max-width: 767px) { /*mobile nav*/ .hNav { height: auto!important; } .hNav ul { height:auto!important;} .hNav ul li { float: none; display: block; } .hNav ul li > a{ text-align: left; } .hNav ul li a { position: relative; right: 0; top: 0; padding: 22px; line-height:normal; z-index: 2; display: block; float: none; width:100%; height:auto;} /*mobile sub nav*/ .hNav ul li ul { width:auto; position:relative; top:0; margin:0;} .hNav ul li ul li {width:auto; position:relative;} .hNav ul li ul li a,.hNav ul li.selected ul li a{background:#111!important;} .hNav ul li ul li a:hover,.hNav ul li.selected ul li a:hover{background:#444!important;} } /*--------------------------------------------------- Main Navigation ---------------------------------------------------*/ #mainNav { } #mainNav .hNav { margin:0 0 10px 0; } #mainNav .hNav > div { border-bottom:4px solid #b6b6b6; } #mainNav .hNav > div > ul { background: none repeat scroll 0 0 #F78F1E; border-bottom: 2px solid #FFFFFF; height: 44px; margin: 0; padding-bottom: 1px; } #mainNav ul li { } #mainNav ul li a { color:#fff; font-family: "KalingaBold","Kalinga Bold","Kalinga","Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight:normal; border-left:1px solid #f89b37; border-right:1px solid #dc7f1b; } #mainNav ul li a:hover, #mainNav ul li.selected > a, #mainNav ul li.hovered > a { background:#455560; border-left: 1px solid #666666; border-right: 1px solid #333333; } /*------------------------------------------------ Main sub navigation -------------------------------------------------*/ #mainNav ul li ul { background: none repeat scroll 0 0 #F78F1E; } #mainNav ul li ul li { } #mainNav ul li ul li a { border-bottom:1px solid #dc7f1b; border-top:1px solid #f89b37; border-right:none; border-left:none; } #mainNav ul li ul li a:hover, #mainNav ul li ul li.selected a, #mainNav ul li ul li.hovered a { } /*------------------------------------------------ Main sub sub navigation -------------------------------------------------*/ #mainNav ul li ul li ul { background: none repeat scroll 0 0 #F78F1E; } #mainNav ul li ul li ul li { } #mainNav ul li ul li ul li a { } #mainNav ul li ul li ul li a:hover, #mainNav ul li ul li ul li.selected a, #mainNav ul li ul li ul li.hovered a { } @media only screen and (max-width: 767px) { #mainNavToggle { position:fixed; top:12px; left:0; width:30px; height:30px; z-index:300; } #mainNavToggle a { display:block; outline:none!important; } #mainNav { background: none repeat scroll 0 0 #F78F1E; height: 100%; left: -100%; overflow: auto; position: fixed; top: 10px; width: 100%; z-index: 250; } #mainNav .hNav { margin-top:48px; border-bottom:none; } #mainNav .hNav > div { border:none; } #mainNav .hNav > div > ul { border:none; } #mainNav ul li { height:auto; } #mainNav ul li a { border-bottom:1px solid #dc7f1b; border-top:1px solid #f89b37; border-right:1px solid #dc7f1b; border-left:1px solid #f89b37; box-shadow:0 1px 20px rgba(0, 0, 0, 0.1) inset; height:auto; } #mainNav ul li a:hover, #mainNav ul li.hovered > a { border-top: 1px solid #666666; border-bottom: 1px solid #333333; } #mainNav ul li.selected > a, #mainNav ul li ul li a { border-bottom:1px solid #333; border-top:1px solid #555; border-right:1px solid #333; border-left:1px solid #555; box-shadow:0 1px 40px rgba(0, 0, 0, 0.5) inset; } } /*------------------------------------------------------------------------------------------------------ Vertical navigation ------------------------------------------------------------------------------------------------------*/ .vNav { } .vNav ul { list-style:none; margin:0 0 0 0; padding:0 0 0 0; } .vNav ul li { display:block; width:auto; position:relative; } .vNav ul li a, .vNav ul li a:visited { display:block; text-align:left; padding:0.8em; line-height:1em; height:auto; border:1px solid #DDD; border-right-color:#f8f8f8; border-top-color:#f8f8f8; background:#EEE; text-decoration:none; } .vNav ul li a:hover, .vNav ul li.hovered a, .vNav ul li.selected a { background:#EFF7FF; border:1px solid #D1D8DF; border-top-color:#f1f1f1; border-right-color:#f1f1f1; outline:none; } .vNav ul li a:active { } /*----------------------------------------- Vertical Sub Nav -----------------------------------------*/ .vNav ul li ul { display:none; position:absolute; width:100%; left:auto; top:0; z-index:10; } .vNav.collapsible ul li ul, .vNav.accordion ul li ul { position:relative; width:100%; left:0; top:auto; } .vNav ul li ul li { } .vNav ul li ul li a, .vNav ul li.selected ul li a, .vNav ul li.hovered ul li a { background:#ddd; } .vNav.collapsible ul li ul li a, .vNav.collapsible ul li.selected ul li a, .vNav.collapsible ul li.hovered ul li a, .vNav.accordion ul li ul li a, .vNav.accordion ul li.selected ul li a, .vNav.accordion ul li.hovered ul li a { padding-left: 2em; } .vNav ul li ul li a:hover, .vNav ul li ul li.selected a, .vNav ul li ul li.hovered a { background:#EFF7FF; } /*---------------------------------------- Vertical Sub Sub Nav -----------------------------------------*/ .vNav ul li ul li ul { position:absolute; width:auto; left:auto; top:0; } .vNav.collapsible ul li ul li ul, .vNav.accordion ul li ul li ul { position:relative; width:auto; left:0; top:auto; } .vNav ul li ul li ul li { } .vNav ul li ul li ul li a, .vNav ul li.selected ul li ul li a, .vNav ul li.selected ul li.selected ul li a { background:#EEE; } .vNav ul li ul li ul li a:hover, .vNav ul li ul li ul li.selected a, .vNav ul li.selected ul li ul li a:hover, .vNav ul li.selected ul li.selected ul li a:hover { background:#EFF7FF; } /*--------------------------------------------------------------------------------------------------- Main Content ---------------------------------------------------------------------------------------------------*/ #content { } #page { min-height:400px; } #sidebar, #aside { } #banner { } #banner > div { } #banner img { margin-bottom:10px; border-bottom:10px solid #b6b6b6; padding-bottom:10px; } #pageContent { } #pageContent h2, #pageContent h3 { font-size:20px; font-weight:normal; } #pageContent h4 { font-size:18px; font-weight:normal; } .testimonial { position:relative; } #home .testimonial { width:46%; float:left; margin: 10px 1.5%; } #home .testimonial:nth-child(2n+2) { float:right; } .testimonial blockquote { border: 1px solid #d8d8d8; position: relative; padding-bottom:20px; } .testimonial blockquote span { background: url("/images/speechBubblePointer.png") no-repeat scroll 0 0 transparent; bottom: -22px; height: 22px; left: 20px; position: absolute; width: 22px; } .testimonial cite { background: url("/images/testimonialIcon.png") no-repeat scroll 0 0 transparent; display: block; font-size: 22px; margin-left: 50px; min-height: 70px; padding-left: 70px; padding-top: 4px; font-style:normal; color:#b6b6b6; } .testimonial cite span { font-size: 16px; } .case { } .case > div { border-bottom:1px solid #b6b6b6; padding-bottom:10px; margin-bottom:10px; } .case h3 { margin-bottom:0; } .case h3 a { } .case h3 a:hover { } .case .date { } .case p { } #caseSummary { } #caseSummary > div { } #caseSummary h2 { font-size:22px; font-weight:normal; } #caseSummary h3 { font-size:20px; font-weight:normal; } @media screen and (max-width: 767px) { #content { padding-top:236px; padding-bottom:10px!important; } #content img { width:100%; } #banner { display:none!important; } #home .testimonial, #home .testimonial:nth-child(2n+2) { width:98%; float:none; margin:0; } } /*---------------------------- padding boxes to use in cols ----------------------------*/ .box { background:none; padding:10px; } .trans-grey { background:url(/images/darkTransBox.png) repeat; } .box1 { background: #f8f8f8; } .box2 { } .box3 { } .box4 { } .box5 { } /*------------------------------------------------------------------------------------------------------ Footer ------------------------------------------------------------------------------------------------------*/ #footer { border-top:10px solid #b6b6b6; background:#f78f1e; padding-top:10px; } #footer * { color:#fff; font-size:98%; } #footer ul { list-style-type: disc; margin-left: 17px; } #footer address { font-style:normal; } #footerContact { } #footerContact p { margin-bottom:0; } #footerContact p > span { width:25%; display:inline-block; } #footerLogo p { margin-bottom:0; } #footerLogo img { margin-bottom:36px; margin-top:26px; } * { margin:0; padding:0; } html, body, #wrapper { height: 100%; } body > #wrapper {height: auto; min-height: 100%;} #content { padding-bottom: 240px; } /* must be same height as the footer */ #footer { position: relative; margin-top: -220px; /* negative value of footer height */ height: 220px; clear:both;} @media screen and (max-width: 820px) { #footer { margin-top: 10px; height: auto; } } @media screen and (max-width: 767px) { #footer .box { margin-bottom:12px; } #footerLogo p { margin-bottom:12px; text-align:center!important; } #footerLogo img { margin-bottom:16px; } } /*------------------------------------------------------------------------------------------------------ Forms - Overwrites catalyst styles -------------------------------------------------------------------------------------------------------*/ /* Standard Forms ---------------------- */ form { margin: 0 0 19.41641px; } .row form .row { margin: 0 -6px; } .row form .row .column, .row form .row .columns { padding: 0 6px; } .row form .row.collapse { margin: 0; } .row form .row.collapse .column, .row form .row.collapse .columns { padding: 0; } label { font-size: 14px; color: #4d4d4d; cursor: pointer; display: block; font-weight: 500; margin-bottom: 3px; } label.right { float: none; text-align: right; } label.inline { line-height: 32px; margin: 0 0 12px 0; } .prefix, .postfix { display: block; position: relative; z-index: 2; text-align: center; width: 100%; padding-top: 0; padding-bottom: 0; height: 32px; line-height: 31px; } a.button.prefix, a.button.postfix { padding-left: 0; padding-right: 0; text-align: center; } span.prefix, span.postfix { background: #f2f2f2; border: 1px solid #cccccc; } .prefix { left: 2px; -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; border-top-left-radius: 2px; -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; overflow: hidden; } .postfix { right: 2px; -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; border-top-right-radius: 2px; -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; } input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea,select { background-color: white; font-family: inherit; border: 1px solid #cccccc; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.75); display: block; font-size: 14px; margin: 0 0 12px 0; padding: 6px; height: 32px; width: 100%; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear; } input[type="text"].oversize, input[type="password"].oversize, input[type="date"].oversize, input[type="datetime"].oversize, input[type="email"].oversize, input[type="number"].oversize, input[type="search"].oversize, input[type="tel"].oversize, input[type="time"].oversize, input[type="url"].oversize, textarea.oversize { font-size: 17px; padding: 4px 6px; } input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, textarea:focus { background: #fafafa; border-color: #b3b3b3; } input[type="text"][disabled], input[type="password"][disabled], input[type="date"][disabled], input[type="datetime"][disabled], input[type="email"][disabled], input[type="number"][disabled], input[type="search"][disabled], input[type="tel"][disabled], input[type="time"][disabled], input[type="url"][disabled], textarea[disabled] { background-color: #ddd; } textarea { height: auto; } select { width: 100%; } /* Fieldsets */ fieldset { border: solid 1px #ddd; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; padding: 12px; margin: 18px 0; } fieldset legend { font-weight: bold; background: white; padding: 0 3px; margin: 0; margin-left: -3px; } /* Errors */ .error input, input.error, .error textarea, textarea.error, .error input:focus, input.error:focus, .error textarea:focus, textarea.error:focus { border-color: #c60f13; background-color: rgba(198, 15, 19, 0.1); } .error input:focus, input.error:focus, .error textarea:focus, textarea.error:focus { outline-color: #f5797c; } .error label, label.error { color: #c60f13; } .error small, small.error { display: block; padding: 6px 4px; margin-top: -13px; margin-bottom: 12px; background: #c60f13; color: #fff; font-size: 12px; font-weight: bold; -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; } /* Correct FF custom dropdown height */ @-moz-document url-prefix() { form.custom div.custom.dropdown a.selector { height: 28px; } } .ie8 form.custom div.custom.dropdown a.selector { height: 28px; } table.webform { } table.webform td { } div.form,div.item { } div.form { } div.item { } fieldset { } legend { } label,.form label, .webform .label { display:block; width:auto; } input[type=text],input[type=email],input[type=url],input[type=number],input[type=password],select { width:100%; } input.cat_textbox,.form input, .webform input { } textarea, textarea.cat_listbox { width:100%; } input[type=button], button, button.catwebformbutton,.cat_button { } input[type=radio] { width:auto; } input[type=radio]:checked { } input[type=checkbox] { width:auto; } input[type=checkbox]:checked { } select, select.cat_dropdown { } select.cat_dropdown_small { } select.cat_dropdown_smaller { } /*Form common styles and error messages*/ .formHidden { position:absolute; left:-9999em; } .formInvalid { background-color:#fce8e8; } .formError { /* supply height to ensure consistent positioning for every browser */ background-color: #FCC; border:1px solid #e8a2a2; font-size:12px; color: #C00; padding:3px 10px; } /* pure CSS arrow */ .formError em { display:block; width:0; height:0; border:10px solid; border-color:#FCC transparent transparent; /* positioning */ position:absolute; bottom:-19px; left:0px; } .formSuccess { background-color: #c5f0da; border:1px solid #99cdb3 ; font-size:12px; color: #3f6e56; padding:3px 10px; } .formWarning { font-size:12px; background:#FFC; color: #C30; border:1px solid #960; padding:3px 10px; } .formWarning p { color: #C30; } /*------------------------------------------------------------------------------ CSS3 Doesn't work in IE 6-8 - but do we care? Just in case we do, there's a polyfill -------------------------------------------------------------------------------*/ .shadow { text-shadow:1px 1px 1px #666; behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } .rounded-5 { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; position:relative; behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } .rounded-top-right-5 { -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; border-radius:0 5px 0 0; position:relative; behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } .rounded-top-left-5 { -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; border-radius:5px 0 0 0; position:relative; behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } .rounded-top-5, .vNav ul li.first a { -webkit-border-top-left-radius:5px; border-top-right-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; border-radius:5px 5px 0 0; position:relative; behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } .rounded-bottom-right-5 { -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; border-radius:0 0 5px 0; position:relative; behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } .rounded-bottom-left-5 { -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; border-radius:0 0 0 5px; position:relative; behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } .rounded-bottom-5, .vNav ul li.first a { -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; border-radius:0 0 5px 5px; position:relative; behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } .rounded-left-5 { -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; border-radius:0 5px 5px 0; position:relative; behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } .rounded-right-5 { -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; border-radius:0 5px 5px 0; position:relative; behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } .rounded-10 { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position:relative; behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } .rounded-top-right-10 { -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px; border-radius:0 10px 0 0; position:relative; behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } .rounded-top-left-10 { -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px; border-radius:10px 0 0 0; position:relative; behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } .rounded-top-10 { -webkit-border-top-left-radius:10px; border-top-right-radius:10px; -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px; border-radius:10px 10px 0 0; position:relative; behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } .rounded-bottom-right-10 { -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px; border-radius:0 0 10px 0; position:relative; behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } .rounded-bottom-left-10 { -moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px; border-radius:0 0 0 10px; position:relative; behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } .rounded-bottom-10 { -moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px; border-radius:0 0 10px 10px; position:relative; behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } .rounded-left-10 { -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px; -moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px; border-radius:0 10px 10px 0; position:relative; behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } .rounded-right-10 { -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px; -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px; border-radius:0 10px 10px 0; position:relative; behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } .box-shadow { -webkit-box-shadow: 2px 2px 3px #ccc; -moz-box-shadow: 2px 2px 3px #ccc; box-shadow: 2px 2px 3px #ccc; behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } .rotate { -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); behavior:url(/Stylesheets/PIE-1.0.0/PIE.htc); } /*--------------------------------------------------------------------------------------------------------- inContext styling - use these styles to show/hide elements while inContext editing is on or off ---------------------------------------------------------------------------------------------------------*/ .inContextOn { } body.inContextOn { margin-top:40px; } .inContextOff { } #inContextWarning { position:fixed; top:0; width:100%; height:30px; z-index:100000; color:#666; line-height:30px; } #inContextWarning, .inContextOff #inContextWarning { display:none; } .inContextOn #inContextWarning { display:block; } /*------------------------------------------------------------------------------------------------------ JS disabled styles -----------------------------------------------------------------------------------------------------*/ .js #noJSWarning, #noJSWarning { display:none; } .no-js #noJSWarning { display:block; position:fixed; bottom:0; width:100%; height:30px; z-index:100000; color:#666; line-height:30px; } .no-js nav li:hover ul { display:block; } #test .row { background:#f9f9f9; } #test .column > *, #test .columns > *, #test .block-grid > li { background:#efefef; } #test .block-grid > li { border:1px solid #333; }