/* Theme Name: Huddle 2012 Description: Theme for all Huddle sites built on WordPress Version: 1.1 Author: Daniel Rajendran */ /* =========================== CONTENTS: 01 Defaults 02 Fluid Grid 03 Tyopgraphy 04 Tables and lists 05 Forms 06 Buttons 07 Utility classes 08 Design classes 09 Structure 10 Page specific ?? Media queries =========================== */ /* ---------------------------------------------------------------------------------------------------------- 01 Sensible defaults ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ @import url(//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800); html,body,div,span,object,iframe, h1,h2,h3,h4,h5,h6,p,blockquote, pre,abbr,address,cite,code,del, dfn,em,img,ins,kbd,q,samp,small, strong,sub,sup,var,b,i,dl,dt,dd, ol,ul,li,fieldset,form,label, legend,table,caption,tbody,tfoot, thead,tr,th,td,article,aside, canvas,details,figcaption,figure, footer,header,hgroup,menu,nav, section,summary,time,mark,audio,video { border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; margin: 0; padding: 0; } * { background-repeat: no-repeat; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; *behavior: url(/blog/wp-content/themes/huddle2012/script/boxsizing.htc); } div, article, section, header, footer, nav, li { position: relative; } article,aside,details,figcaption, figure,footer,header,hgroup,nav,section { display: block; } audio,canvas,video { display: inline; zoom: 1; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; background: #FFFFFF; } a:focus { outline: thin dotted; } li { list-style: none; } abbr[title] { border-bottom: none; } b,strong { font-weight: 700; } i,em,dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #CCCCCC; margin: 0 0 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: 700; } pre,code,kbd,samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; } pre { white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before,q:after { content: none; } small { font-size: 85%; } strong { font-weight: 700 !important;} sub, sup { font-size: 0.625em; } p sub, p sup { font-size: 0.83em; } sub { vertical-align: sub; } sup { vertical-align: super; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; margin: 0 0 1.125em 0; } img.max-width { max-width: 100%; } table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } audio:not([controls]),[hidden] { display: none; } /* ---------------------------------------------------------------------------------------------------------- 02 Fluid Grid ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ .row { width: 100%; height: auto; position: relative; margin: 0 0 1.125em 0; zoom: 1; } /* 100% width container for holding our columns */ .row:before, .row:after { content: ""; display: table; } .row:after { clear: both; } .col { display: block; float: left; margin: 0 0 1.125em 2%; vertical-align: top; } /* flexible columns - width is defined by additional class */ .col.first { margin-left: 0 !important; } /* remove padding on first col for older browsers */ .col:first-child { margin-left: 0; } /* remove padding on first col for modern browsers */ .span-1 { width: 6.5%; } .span-2 { width: 14.9%; } .span-3 { width: 23.5%; } .span-4 { width: 32.0%; } .span-5 { width: 40.5%; } .span-6 { width: 49.0%; } .span-7 { width: 57.5%; } .span-8 { width: 66.0%; } .span-9 { width: 74.5%; } .span-10 { width: 83.0%; } .span-11 { width: 91.5%; } .span-12 { width: 100%; margin-left: 0; } /* special cases */ .col-5 { width: 18.4%; } /* ---------------------------------------------------------------------------------------------------------- 03 Typography ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; line-height: 1.5; font-weight: 400; color: #666666; } p { font-size: 0.75em; color: #666666; margin: 0 0 18px 0; } a { text-decoration: none; color: #0089D0; } p a:hover, span a:hover, li a:hover { text-decoration: underline; } p a { color: #0089D0 !important; } h1, h2, h3, h4, h5, h6 { padding: 0; color: #141414; display: block; font-weight: 400; line-height: 1.1em; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; color: #0089D0; } h1 { font-size: 2.25em; margin-bottom: 0.15em; } /* 36 pixels */ h2 { font-size: 0.875em; margin-bottom: 1.125em; } /* 14 pixels */ h3 { font-size: 1.25em; margin-bottom: 0.45em; } /* 20 pixels */ h4 { font-size: 1em; font-weight: 700; margin-bottom: 0.45em; } /* 16 pixels */ h5 { font-size: 0.875em; font-weight: 700; margin-bottom: 0.45em; } /* 14 pixels */ h6 { font-size: 0.75em; text-transform: uppercase; font-weight: 700; margin-bottom: 0.45em; line-height: 1.5em; } /* 12 pixels */ .text-tiny { font-size: 0.625em !important; } /* 10 pixels */ p.text-tiny { margin-bottom: 0.75em; } p .text-tiny { font-size: 0.83em !important; } .text-small { font-size: 0.6875em !important; } /* 11 pixels */ p.text-small { margin-bottom: 1em; } p .text-small { font-size: 0.92em !important; } .text-normal { font-size: 0.75em !important; } /* 12 pixels */ p.text-normal { margin-bottom: 1.5em; } .text-medium { font-size: 0.875em !important; } /* 14 pixels */ p.text-medium { margin-bottom: 1.285em; } .text-big { font-size: 1em !important; } /* 16 pixels */ p.text-big { margin-bottom: 1.125em; } .text-bigger { font-size: 1.25em !important; } p.text-bigger { margin-bottom: 0.8em; } .text-14p { font-size: 14px !important; } .text-18p { font-size: 18px !important; } .text-20p { font-size: 20px !important; } .text-24p { font-size: 24px !important; } .text-26p { font-size: 26px !important; } .text-28p { font-size: 28px !important; } .text-30p { font-size: 30px !important; } .text-32p { font-size: 32px !important; } .text-36p { font-size: 36px !important; line-height: 54px; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; } .text-justify { text-align: justify !important; } .text-light { font-weight: 300 !important; } .text-standard { font-weight: 400 !important; } .text-bold { font-weight: 700 !important; } .text-heavy { font-weight: 800 !important;} .text-italic { font-style: italic !important; } .text-underline { text-decoration: underline !important; } .text-highlight { color: #0089D0 !important; } .text-lowercase { text-transform: lowercase !important; } .text-uppercase { text-transform: uppercase !important; } .text-capitalize { text-transform: capitalize !important; } .text-black { color: #141414 !important; } .text-blue { color: #0089D0 !important; } .text-orange { color: #FE5C00 !important; } .text-grey { color: #666666 !important; } .text-white { color: #FFFFFF !important; } .text-green { color: #77BB22 !important; } blockquote .quote { font-style: italic; color: #141414; font-weight: 700; margin-bottom: 0.25em; } blockquote .quotee { color: #0089D0; font-weight: 700; } .code-snip { overflow-x: scroll; overflow-y: visible; font-size: 0.75em; border: 1px solid #CCCCCC; background: #E5E5E5; padding: 0.875em; } .code-snip pre { white-space: pre; } /* ---------------------------------------------------------------------------------------------------------- 05 Tables and lists ----------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ table { margin-bottom: 1.125em; font-size: 0.75em; } tr { } th, td { padding: 0.25em 1em; border: 1px solid #CCCCCC; text-align: left; } th { background: #0089D0; color: #FFFFFF; font-weight: 700; } td { } .different-rows tr:nth-of-type(odd) { background-color: #E5F3FA; } table.tablesorter thead tr .header { background-position: right center; cursor: pointer; background-repeat: no-repeat; background-image: url("img/global/tablesort-default.gif"); } table.tablesorter thead tr .headerSortDown { background-image: url("img/global/tablesort-desc.gif"); } table.tablesorter thead tr .headerSortUp { background-image: url("img/global/tablesort-asc.gif"); } .list { margin: 0 0 1.125em 0.875em; } .list li { margin-bottom: 0.25em; clear: both; } ul.list li { list-style: disc outside; font-size: 12px; } ol.list li { list-style: decimal outside; font-size: 12px; } .list ol, .list ul { margin-left: 2.5em; } .list ul li { list-style: disc outside; } .list ol li { list-style: decimal outside;; } .list li a { font-weight: 400; } ol.alpha li { list-style-type: lower-latin; } ol.decimal li { list-style-type: decimal; } ol.roman li { list-style-type: lower-roman; } ul.no-bullets { margin-left: 0; } ul.no-bullets li { list-style: none; } .widget ul { margin-left: 0; } .widget ul li { } .widget ul li.link-last a, .widget ul li:last-child a { border: none; } .widget ul li a { font-size: 0.75em; color: #666666; line-height: 1.5em; display: block; border-bottom: 1px solid #E4E4E4; padding: 0.35em 1em; } .widget ul li.current-menu-item { background-color: #A1DCFB !important; } .widget ul li.current-menu-item a { color: #FFFFFF; } .widget ul li ul { border-bottom: 1px solid #E4E4E4; } .widget ul li ul li { background: #FFFFFF; border-bottom: none !important; } .widget ul li ul li a { padding-left: 2em; color: #666666 !important; } ul.blue-chevrons { margin-left: 0; } ul.blue-chevrons li { list-style: none !important; } ul.blue-chevrons li a { } ul.blue-chevrons li .icon { display: block; float: left; background: url("img/sprite.png") no-repeat -9px -60px; height: 1em; width: 0.4em; margin-right: 1em; } ul.blue-chevrons li .text { display: block ; margin-left: 15px; } ul.large-icons { margin-left: 0; } ul.large-icons li { list-style: none !important; margin-bottom: 1.5em; clear: both; display: block; } ul.large-icons li a { color: #0089D0; } ul.large-icons strong { color: #141414; font-size: 1.2em; } ul.large-icons li span.icon { display: block; float: left; width: 3.75em; height: 3.75em; margin: 0.4em 1em 2em 0; } ul.large-icons li span.check-box { background: url("img/sprite.png") no-repeat -123px -10px; } ul.large-icons li span.users { background: url("img/sprite.png") no-repeat -169px -10px; } ul.large-icons li span.padlock { background: url("img/sprite.png") no-repeat -215px -10px; } ul.large-icons li span.brush { background: url("img/sprite.png") no-repeat -261px -10px; } ul.large-icons li span.question { background: url("img/sprite.png") no-repeat -307px -10px; } ul.orange-ticks { margin-left: 0; } .orange-ticks li { list-style: none !important; margin-bottom: 0.75em; clear: left; overflow: hidden; } .orange-ticks li .tick { display: block; float: left; background: url("img/sprite.png") no-repeat -36px -104px; height: 1.17em; width: 1.17em; margin: 0.3em 1em 0 0; } .orange-ticks li .text { display: block; margin-left: 2.17em; } .orange-ticks a { } ul.small-icons { margin-left: 0; } ul.small-icons li { list-style: none; margin-bottom: 9px; clear: both; } ul.small-icons li .icon { display: block;float: left; height: 30px; width: 30px; } ul.small-icons li .icon img { margin: 0; } ul.small-icons li .text { display: block; margin-left: 45px; line-height: 30px; } ul.blue-ticks { margin-left: 0; } .blue-ticks li { list-style: none !important; margin-bottom: 0.75em; clear: left; overflow: hidden; } .blue-ticks li .tick { display: block; float: left; background: url("img/sprite.png") no-repeat -13px -104px; height: 1.17em; width: 1.17em; margin: 0.3em 1em 0 0; } .blue-ticks li .text { display: block; margin-left: 2.17em; } .blue-ticks a { } ul.big-numbers { margin-left: 0; overflow: hidden; } .big-numbers li { list-style: none !important; margin-bottom: 0.75em; clear: both; } .big-numbers li .number { display: block; float: left; height: 1em; width: 1em; line-height: 1em; color: #0089D0; font-weight: 700; font-size: 3em; vertical-align: top; margin: -0.075em 0 0 0; } .big-numbers li .text { display: block; margin-left: 4em; } ul.very-big-numbers { margin-left: 0; overflow: hidden; } .very-big-numbers li { list-style: none !important; margin-bottom: 1.5em; clear: both; } .very-big-numbers li .number { display: block; float: left; height: 1em; width: 1em; line-height: 1em; color: #0089D0; font-size: 5em; vertical-align: top; margin: -0.075em 0.25em 0.2em 0; } .very-big-numbers li .text { font-size: 1.2em; } ul.links { margin-left: 0; } ul.links li { list-style: none; border-bottom: 1px solid #CCCCCC; padding: 0.25em 0; } ul.links li a { color: #0089D0; } ul.file-icons { margin-left: 0; } ul.file-icons li { list-style: none !important; clear: both; min-height: 30px; color: #0089D0; } ul.file-icons li a { } ul.file-icons .icon { display: block; float: left; height: 30px; width: 30px; background: #666666; } ul.file-icons .pdf { background: url("/wp-content/themes/huddle2012/img/sprite.png") no-repeat -169px -78px; } ul.file-icons .video { background: url("/wp-content/themes/huddle2012/img/sprite.png") no-repeat -200px -78px; } ul.file-icons .text { display: block; margin-left: 40px; padding-top: 5px; } /* ---------------------------------------------------------------------------------------------------------- 06 Forms ---------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ button::-moz-focus-inner,input::-moz-focus-inner { border:0; padding:0; } form { overflow: auto; } legend { } label { cursor: pointer; width: 100%; position: relative; font-size: 0.75em; color: #666666; } input[type="text"], input[type="password"], input[type="select"], input[type="search"] { border: 1px solid #E4E4E4; background: #FFFFFF; font-size: 0.75em; padding: 0.415em; margin-bottom: 1.5em; vertical-align: middle; } 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-decoration { -webkit-appearance: none; } input[type="radio"] { } input[type="checkbox"] { } input[type="file"] { } input[type=checkbox],input[type=radio] { box-sizing: border-box; } input[type="submit"], input[type="reset"], input[type="button"] { position: relative; width: auto; overflow: visible; cursor: pointer; -webkit-appearance: button; } ::-webkit-input-placeholder { color: #BBB; } :-moz-placeholder { color: #BBB; opacity: 1; } ::-moz-placeholder { color: #BBB; opacity: 1; } :-ms-input-placeholder { color: #BBB; } select { display: block; border: 1px solid #E4E4E4; background: #FFFFFF; font-size: 0.75em; margin-bottom: 1.5em; } textarea { width: 100%; display: block; clear: left; overflow: auto; border: 1px solid #E4E4E4; background: #FFFFFF; padding: 0.415em; margin-bottom: 1.5em; font-family: Arial, Helvetica, sans-serif; font-size: 0.75em; vertical-align: top; resize: vertical; } .fancybox-inner .form-holder { width: 490px; display: block; clear: both; } .wtl-form { color: #141414; overflow: visible; } .wtl-form .col { margin-bottom: 0; } .wtl-form .input-field { width: 100%; *width: 95% !important; } .wtl-form input, .wtl-form select, .wtl-form textarea { margin: 0; color: #141414; } .wtl-form input { padding: 0.25em; } .wtl-form select { padding: 0.25em 0.25em 0.25em 0.167em; *padding: 3px; } .wtl-form textarea { margin-bottom: 1.125em; } .wtl-form .submit { text-transform: uppercase; margin: 0.25em auto 1.125em auto; padding: 0.25em 2em; } .wtl-form .error_holder { height: 1.125em; display: block; position: relative; } .wtl-form span.error { color: #F00; font-size: 0.625em; position: absolute; line-height: 1.8em; top: 0; left: 0; } #pass-tip-holder { z-index: 2; width: 100%; height: 146px; position: absolute; left: 0; top: -153px; overflow: visible; } #pass-tip { border: 1px solid #73BEE5; position: relative; } #pass-tip:after, #pass-tip:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } #pass-tip:after { border-color: rgba(239, 246, 252, 0); border-top-color: #eff6fc; border-width: 10px; left: 50%; margin-left: -10px; } #pass-tip:before { border-color: rgba(115, 190, 229, 0); border-top-color: #73bee5; border-width: 11px; left: 50%; margin-left: -11px; } #pass-tip-head { padding: 9px 15px; background: #FFFFFF; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; } #pass-tip-head p { font-size: 14px; } #pass-tip-body { padding: 9px 0 9px 15px; background: #EFF6FC; border-top: 1px solid #73BEE5; -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } #pass-tip-body li { font-size: 11px; line-height: 18px; } #pass-tip-body i { width: 12px; height: 12px; margin-right: 6px; } /* ---------------------------------------------------------------------------------------------------------- 07 Buttons -------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ .btn { display: inline-block; } .btn span { font-weight: 700; text-align: center; margin: 0; white-space: nowrap; display: block; height: 2.2em; line-height: 2.2em; overflow: visible; zoom: 1; *display: inline; cursor: pointer; } .btn-nav { padding: 0 0.375em; margin: 0 0.125em; } .btn-nav span { font-size: 0.625em; font-weight: 400; } .btn-tiny { padding: 0 0.6875em; } /* 9px font, 5.5px padding */ .btn-tiny span { font-size: 0.5625em; font-weight: 700; } .btn-small { padding: 0 1em; -webkit-border-radius: 2px;-moz-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; } /* 10px font, 8px padding */ .btn-small span { font-size: 0.625em; font-weight: 700; } .btn-med { padding: 0 1.3em; -webkit-border-radius: 3px;-moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } /* 12px font, 10px padding */ .btn-med span { font-size: 0.75em; font-weight: 700; } .btn-big { padding: 0.25em 2em; -webkit-border-radius: 4px;-moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } /* 16px font, 12px padding */ .btn-big span { font-size: 1em; font-weight: 700; } input.btn-big { font-size: 0.875em; font-weight: 700; height: 2.715em; margin-bottom: 1.285em; } .btn-orange { border: none; color: #FFFFFF !important; background-color: #FF5C00; } .btn-white { border: none; color: #0089D0 !important; background-color: #FFFFFF; } .btn-green { border: none; color: #FFFFFF !important; background-color: #77BB22; } .btn-blue { border: none; color: #FFFFFF !important; background-color: #0089D0; } .btn-lt-blue { border: none; color: #FFFFFF !important; background-color: #78C5EE; } /* ---------------------------------------------------------------------------------------------------------- 08 Utilities classes ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ .block { display: block !important; } .inline { display: inline !important; } .inline-block { display: inline-block !important; } .hide { display: none !important; } .invisible { visibility: hidden !important; } .visible { visibility: visible !important; } .overflow-hidden { overflow: hidden !important; } .overflow-visible { overflow: visible !important; } .clear { clear: both; } .clear-left { clear: left; } .clear-right { clear: right; } .float-none { float: none; } .float-left { float: left; position: relative; } img.float-left, .alignleft { float: left; margin-right: 1.875em; } .float-right { float: right; position: relative; } img.float-right, .alignright { float: right; margin-left: 1.875em; } .no-border { border: none !important; } .no-border-top { border-top: none !important; } .no-border-right { border-right: none !important; } .no-border-bottom { border-bottom: none !important; } .no-border-left { border-left: none !important; } .border-grey { border: 1px solid #E4E4E4; } .border-top-grey { border-top: 1px solid #E4E4E4; } .border-right-grey { border-right: 1px solid #E4E4E4; } .border-bottom-grey { border-bottom: 1px solid #E4E4E4; } .border-left-grey { border-left: 1px solid #E4E4E4; } .border-blue { border: 1px solid #73BEE5; } .border-top-blue { border-top: 1px solid #73BEE5; } .border-right-blue { border-right: 1px solid #73BEE5; } .border-bottom-blue { border-bottom: 1px solid #73BEE5; } .border-left-blue { border-left: 1px solid #73BEE5; } .border-lt-blue { border: 1px solid #E5F3FA; } .border-top-lt-blue { border-top: 1px solid #E5F3FA; } .border-right-lt-blue { border-right: 1px solid #E5F3FA; } .border-bottom-lt-blue { border-bottom: 1px solid #E5F3FA; } .border-left-lt-blue { border-left: 1px solid #E5F3FA; } .border-bottom-white { border-bottom: 1px solid #FFFFFF; } .border-dotted { border-style: dotted !important; } .border-dashed { border-style: dashed !important; } .no-margin { margin: 0 !important; } .no-margin-top { margin-top: 0 !important; } .no-margin-right { margin-right: 0 !important; } .no-margin-bottom { margin-bottom: 0 !important; } .no-margin-left { margin-left: 0 !important; } .margin-top-18 { margin-top: 18px !important; } .margin-top-36 { margin-top: 36px !important; } .margin-right-15 { margin-right: 15px !important; } .margin-right-30 { margin-right: 30px !important; } .margin-bottom-9 { margin-bottom: 9px !important; } .margin-bottom-18 { margin-bottom: 18px !important; } .margin-bottom-36 { margin-bottom: 36px !important; } .margin-left-15 { margin-left: 15px !important; } .margin-left-30 { margin-left: 30px !important; } .margin-bottom-half { margin-bottom: 0.5625em !important; } .margin-bottom-full { margin-bottom: 1.125em !important; } .margin-top-half { margin-top: 0.5625em !important; } .margin-top-full { margin-top: 1.125em !important; } .flush-top { margin-top: -1.125em; } .flush-right { margin-right: -1.125em !important; float: right; position: relative; margin-left: 1.875em; } .flush-bottom { margin-bottom: -0.9375em !important; } .flush-left { margin-left: -1.125em !important; float: left; margin-right: 1.875em; } .padding-left, .padding-left-15 { padding-left: 15px !important; } .padding-right, .padding-right-15 { padding-right: 15px !important; } .padding-left-30 { padding-left: 30px !important; } .padding-right-30 { padding-right: 30px !important; } .no-padding { padding: 0 !important; } .up-18 { margin-top: -1.125em !important; } .up-36 { margin-top: -2.25em !important; } .right-15 { margin-right: -0.9375em !important; } .right-30 { margin-right: -1.875em !important; } .down-18 { margin-bottom: -1.125em !important; } .down-36 { margin-bottom: -2.25em !important; } .left-15 { margin-left: -0.9375em !important; } .left-30 { margin-left: -1.875em !important; } .bg-lt-grey { background: #F7F7F7; } .bg-hdl-blue { background: #0089D0; } .zero-height { height: 0 !important; } /* for dealing with clearing divs in IE7 */ /* ---------------------------------------------------------------------------------------------------------- 09 Design classes ------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ .hr { border-bottom: 1px solid #E4E4E4; clear: both; display: block; margin-bottom: 1.125em; *height: 1px; } .hr-short { border-bottom: 1px solid #E4E4E4; clear: both; display: block; width: 70%; margin: 0 auto 1.125em; *height: 1px; } .box-padding { padding: 1.125em 0.9735em 0 0.9735em; } .box-shadow { box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); } .box-round { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; margin: 0 0 1.125em 0; } .box-grey { background: #F7F7F7; border: 1px solid #E4E4E4; margin: 0 0 1.125em 0; } .box-grey-round { background: #F7F7F7; border: 1px solid #E4E4E4; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; margin: 0 0 1.125em 0; } .box-blue { background: #E5F3FA; border: 1px solid #73BEE5; margin: 0 0 1.125em 0; } .box-blue-round { background: #E5F3FA; border: 1px solid #73BEE5; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; margin: 0 0 1.125em 0; } .img-thumb-small { background: #FFFFFF; border: 1px solid #CCCCCC; padding: 3px; margin-bottom: 1.125em; overflow: hidden; box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); } .img-thumb-small img { margin: 0; width: 100%; } .img-thumb-medium { background: #FFFFFF; border: 1px solid #CCCCCC; padding: 4px; margin-bottom: 1.125em; overflow: hidden; box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); } .img-thumb-medium img { margin: 0; width: 100%; } .img-thumb-big { background: #FFFFFF; border: 1px solid #CCCCCC; padding: 5px; margin-bottom: 1.125em; overflow: hidden; box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); } .img-thumb-big img { margin: 0; width: 100%; } .img-overlay { padding: 5%; position: absolute; top: 0; left: 0; background-color: #E5E5E5\9; background-color: rgba(102,102,102,0.75); width: 100%; height: 100%; z-index: 10; opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; display: none\9; } .hover-opaque:hover, .img-dim:hover { opacity: 0.60; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .img-overlay p, .img-overlay p a { color: #FFFFFF !important; } .img-overlay:hover { opacity: 1; display: block\9; } .arrow-right-start, .arrow-right-end { display: inline-block; background: url("img/sprite.png") no-repeat -32px -60px; height: 1em; width: 0.5em; } .arrow-right-start { margin-right: 0.5em; } .arrow-right-end { margin-left: 0.5em; } .link-chevron-right { padding-left: 3px; color: #FE5C00; } .date-box { background: #0089D0; text-align: center; margin-top: 0.2em; padding: 0.25em; } .date-box .month { } .date-box .day { font-size: 1.6em; } .date-box .month, .date-box .day { display: block; font-weight: 700; color: #FFFFFF !important; line-height: 1em; } .green-dot { display: block; height: 18px; width: 18px; background: url("/wp-content/themes/huddle2012/img/sprite.png") no-repeat -11px -153px; } .orange-dot { display: block; height: 18px; width: 18px; background: url("/wp-content/themes/huddle2012/img/sprite.png") no-repeat -34px -153px; } .blue-dot { display: block; height: 18px; width: 18px; background: url("/wp-content/themes/huddle2012/img/sprite.png") no-repeat -57px -153px; } .tick-orange { display: block; height: 21px; width: 26px; background: url("/wp-content/themes/huddle2012/img/sprite.png") no-repeat -232px -157px; } .tick-green { display: block; height: 21px; width: 26px; background: url("/wp-content/themes/huddle2012/img/sprite.png") no-repeat -261px -157px; } .tick-blue { display: block; height: 21px; width: 26px; background: url("/wp-content/themes/huddle2012/img/sprite.png") no-repeat -290px -157px; } .bg-lt-blue { background: #E5F3FA; } .bg-lt-grey { background: #F6F6F6; } .bg-grey { background: #E5E5E5; } .gradient-rtl { background: url("img/global/gradient-rtl-12-col.png") repeat-y right #FFFFFF; } .show-hide-heading { background: #F7F7F7; padding: 18px 15px 0 15px; cursor: pointer; } .grad-hor-white-grey { background: #ffffff; background: -moz-linear-gradient(left, #ffffff 0%, #f1f1f1 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(100%,#f1f1f1)); background: -webkit-linear-gradient(left, #ffffff 0%,#f1f1f1 100%); background: -o-linear-gradient(left, #ffffff 0%,#f1f1f1 100%); background: -ms-linear-gradient(left, #ffffff 0%,#f1f1f1 100%); background: linear-gradient(to right, #ffffff 0%,#f1f1f1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1',GradientType=1 ); } .grad-hor-grey-white { background: #f1f1f1; background: -moz-linear-gradient(left, #f1f1f1 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f1f1f1), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(left, #f1f1f1 0%,#ffffff 100%); background: -o-linear-gradient(left, #f1f1f1 0%,#ffffff 100%); background: -ms-linear-gradient(left, #f1f1f1 0%,#ffffff 100%); background: linear-gradient(to right, #f1f1f1 0%,#ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#ffffff',GradientType=1 ); } /* ---------------------------------------------------------------------------------------------------------- 03 Structure ------------------------------------------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ body { background: #F5F5F5; } .wrapper { margin: 0 auto; height: auto; padding: 0; width: 980px; } /***** Header area - naviation, logos, search, etc *****/ #header, #header-simple { width: 100%; padding-top: 12px; z-index: 100; -webkit-box-shadow: 0 2px 5px rgba(50, 50, 50, 0.25); -moz-box-shadow: 0 2px 5px rgba(50, 50, 50, 0.25); box-shadow: 0 2px 5px rgba(50, 50, 50, 0.25); border-bottom: 1px solid #CCCCCC\9; background: #FFFFFF; } #header-simple { } #header .gradient, #header-simple .gradient { z-index: -1; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #FFFFFF; background: -moz-linear-gradient(top, #FFFFFF 1%, #F7F7F7 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#FFFFFF), color-stop(100%,#F7F7F7)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #FFFFFF 1%,#F7F7F7 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #FFFFFF 1%,#F7F7F7 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #FFFFFF 1%,#F7F7F7 100%); /* IE10+ */ background: linear-gradient(to bottom, #FFFFFF 1%,#F7F7F7 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#F7F7F7',GradientType=0 ); /* IE6-9 */ } #header .wrapper { height: 76px; } #action-nav { clear: both; width: 100%; position: relative; height: auto; height: 16px; margin-bottom: 12px; } #action-nav ul { float: right; } #action-nav li { font-size: 10px; line-height: 16px; color: #AFAFAF; margin: 0; float: left; padding: 0; } #action-nav li a { color: #AFAFAF; font-weight: 700; text-transform: uppercase; } #action-nav .divider { color: #CCCCCC; right: 0; margin: 0 15px; } #nav-holder { height: 36px; margin-bottom: 12px; } #nav-holder #top-nav-btn { margin: 5px 0; float: right; } #logo { height: 36px; width: 133px; float: left; margin: -5px 0 0 0; overflow: hidden; position: relative; clear: both; } #header-simple #logo { width: 100%; margin: 0 1em 0.75em 0; } #header-simple #logo a { margin-right: 1em; } #primary-nav { z-index: 200; position: relative; float: left; width: 650px; margin: 0 35px; } #primary-nav .primary-nav-item { position: relative; float: left; } #primary-nav .primary-nav-item.hover .primary-nav-header { text-decoration: none; background: #0089d0; color: #FFFFFF; -webkit-box-shadow: -2px 0 5px rgba(50, 50, 50, 0.25), 2px 0 5px rgba(50, 50, 50, 0.25); -moz-box-shadow: -2px 0 5px rgba(50, 50, 50, 0.25), 2px 0 5px rgba(50, 50, 50, 0.25); box-shadow: -2px 0 5px rgba(50, 50, 50, 0.25), 2px 0 5px rgba(50, 50, 50, 0.25); } #primary-nav .primary-nav-item.hover .sub-menu { visibility: visible; } #primary-nav .primary-nav-header { font-size: 13px; line-height: 36px; position: relative; float: left; padding: 0 18px 12px 18px; cursor: pointer; color: #666666; text-transform: uppercase; } #primary-nav #prod-overview { width: 350px; } #primary-nav #prod-overview ul { width: 50%; width: 49%\9; } #primary-nav #using-huddle { width: 350px; } #primary-nav #using-huddle ul { width: 50%; width: 49%\9; } #primary-nav .sub-menu { visibility: hidden; z-index: 99999; border-top: 1px solid #CCCCCC; background: #FFFFFF; top: 48px; left: 0; position: absolute; overflow: visible; -webkit-box-shadow: -2px 2px 5px rgba(50, 50, 50, 0.25), 2px 2px 5px rgba(50, 50, 50, 0.25); -moz-box-shadow: -2px 2px 5px rgba(50, 50, 50, 0.25), 2px 2px 5px rgba(50, 50, 50, 0.25); box-shadow: -2px 2px 5px rgba(50, 50, 50, 0.25), 2px 2px 5px rgba(50, 50, 50, 0.25); -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; border-right: 1px solid #CCCCCC\9; border-bottom: 1px solid #CCCCCC\9; border-left: 1px solid #CCCCCC\9; } #primary-nav .sub-menu ul { width: 100%; } #primary-nav .sub-menu li { position: relative; overflow: visible; font-size: 12px; line-height: 36px; height: 36px; padding: 0 15px; } #primary-nav .sub-menu li.list-header { font-weight: 700; color: #0089D0; text-transform: uppercase; } #primary-nav .sub-menu li.list-header a { font-weight: 700; color: #0089D0; text-transform: uppercase; } #primary-nav .sub-menu li a { color: #666666; white-space: nowrap; } #primary-nav .sub-menu li a:hover { text-decoration: none; } #primary-nav .box-blue { border: none; font-size: 11px; padding: 15px; margin: 0; } #primary-nav .box-blue .cta-headline, #primary-nav .box-blue .cta-subheading { white-space: nowrap; display: block; } #primary-nav .box-blue .cta-headline { text-transform: uppercase; font-weight: 700; color: #141414; } #primary-nav .box-blue .cta-subheading { color: #666666; margin-bottom: 8px; } #primary-nav .box-blue .cta-button span { font-size: 10px; } #site-search { width: 18%; float: right; height: 2.25em; position: relative; margin: 0 0 0 1.5%; } #site-search input { bottom: 0; right: 0; width: 100% !important; position: absolute; padding: 2px; margin-bottom: -0.4em; font-size: 0.75em; *width: 90% !important; } /***** Content area - where all the good stuff goes *****/ #splash { background: #FFFFFF; } #content { background: #FFFFFF url("img/content-bg.png") repeat-x; } #content-simple { background: #F5F5F5; padding: 1.875em 0; } #content .wrapper, #content-simple .wrapper { background: #FFFFFF; } .content-padding { padding: 18px 30px; } #sidebar-content { padding: 1.125em 0 1.125em 0.9735em; margin: 0; } /* The sidebar */ #main-content { padding: 1.125em 1.875em 1.125em 0.625em; margin-bottom: 0; } /* The main body content */ #main-content-simple { padding: 1.125em 1.875em; margin: 0; -webkit-box-shadow: 0 2px 5px rgba(50, 50, 50, 0.25); -moz-box-shadow: 0 2px 5px rgba(50, 50, 50, 0.25); box-shadow: 0 2px 5px rgba(50, 50, 50, 0.25); } #full-page-width-content { padding: 1.125em 1.875em 1.125em 0.9735em; } /* The secondary nav in the side bar */ #secondary-nav li { border-bottom: none; padding: 0 !important; } #secondary-nav li a { font-size: 0.875em; color: #141414; font-weight: 700; line-height: 1.5em; padding: 0.3125em 0.75em; } #secondary-nav li.current-menu-item, #secondary-nav li.current_page_item { background-color: #A1DCFB; } #secondary-nav li.current-menu-item a, #secondary-nav li.current_page_item a { color: #FFFFFF; } /* The call to action boxout in the side bar */ .widget { background: #F7F7F7; border: 1px solid #E4E4E4; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; margin: 0 0 1.125em 0; } .widget .widgettitle { color: #141414; text-transform: uppercase; font-size: 0.75em; font-weight: 700; background: #F1F1F1; padding: 0.425em 1.2em; } /* hiding sidebar sub-menus */ #use-case .sub-menu, #industry .sub-menu { display: none; } .current-menu-ancestor .sub-menu, .current-menu-parent .sub-menu, .current-menu-item .sub-menu { display: block !important; } /* The call to action boxout in the side bar */ #cta-list { } #cta-list li { position: relative; padding: 0.4375em 0.75em; border-bottom: 1px solid #E4E4E4; } #cta-list .link-last { border-bottom: none; } #cta-list li a { height: 1.84em; display: block; color: #141414; font-size: 0.75em; border-bottom: none; } #cta-list li p { color: #141414; } #cta-list li span { display: block; float: left; width: 1.375em; height: 1.375em; margin-right: 0.625em; } #cta-list li.cta-free-trial { background: #F1F1F1; } #cta-list li.cta-free-trial span { background: url("img/sprite.png") no-repeat -9px -10px; } #cta-list li.cta-demo { } #cta-list li.cta-demo span { background: url("img/sprite.png") no-repeat -55px -10px; } #cta-list li.cta-phone { } #cta-list li.cta-phone span { background: url("img/sprite.png") no-repeat -32px -10px; margin-bottom: 3.5em; } /* Read more list in the side bar */ .read-more-links { padding: 0 13px; } .read-more-links h5, .read-more-links li a { font-size: 12px; } #crumbs { font-weight: 700; color: #0089D0; line-height: 1.5em; margin: 0.2em 0 1em; overflow: hidden; font-size: 0.625em } #crumbs .crumb-wrapper { line-height: 1.5em; white-space: nowrap;; } #crumbs .raquo { color: #CCCCCC; } #crumbs .crumbs-fade { pointer-events: none; position: absolute; width: 150px; height: 100%; top: 0; right: 0; background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); background-image: -ms-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); } #header-count-twitter, #header-count-facebook, #header-count-linkedin, #header-count-gplus { margin-left: 0.5em; display: block; float: right; } .comment-count .comment-icon { display: inline-block; height: 1.2em; width: 1.2em; margin: 0 0.4em -0.25em 0; background: url("img/sprite.png") no-repeat -83px -15px; } /***** Footer area - links, social, legal, etc *****/ #footer { width: 100%; background: #F5F5F5; padding: 1.125em 0.9735em 0 0.9735em; } #footer .wrapper { background: #F5F5F5; } #footer ul { margin-bottom: 1.125em; } #footer li { line-height: 1em; clear: both; } #footer li a { color: #666666; font-size: 0.6875em; } .sharrre { cursor: pointer; overflow: hidden; line-height: 1em; } .sharrre a { font-size: 0.6875em; } .sharrre .count { border: 1px solid #E4E4E4; background: #FFFFFF; text-align: center; color: #141414; font-size: 0.82em; width: 2.5em; display: inline-block; font-weight: 700; height: 1.56em; margin-top: 0.33em; line-height: 1.33em; } .sharrre .share { margin-left: 0.36em; } .share-icons .icon { display: block; float: left; height: 0.875em; width: 0.9em; margin: 0.1875em 0.125em 0 0; } .social-icon-twitter .icon { background: url("img/sprite.png") no-repeat -9px -79px; } .social-icon-facebook .icon { background: url("img/sprite.png") no-repeat -32px -79px; } .social-icon-linkedin .icon { background: url("img/sprite.png") no-repeat -55px -79px; } .social-icon-gplus .icon { background: url("img/sprite.png") no-repeat -78px -79px; } .social-icon-youtube .icon { background: url("img/sprite.png") no-repeat -101px -79px; } .social-icon-flickr .icon { background: url("img/sprite.png") no-repeat -124px -79px; } .modal-dialogue { width: 500px; padding: 1.125em 0.9735em 0 0.9735em; } .modal-dialogue p { } .downloadClick, .webinarClick { cursor: pointer; } #error, .wpdberror { display: none; } #demo-section { background: #4A4A4A; } /* ---------------------------------------------------------------------------------------------------------- 10 Page specific -------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /* Homepage (May 2014) */ #home-a h2 { font-size: 42px; line-height: 54px; margin-bottom: 18px; font-weight: 300; font-family: 'Open Sans', sans-serif; } .shelf-triangle { width: 0px; height: 0px; border-style: solid; border-width: 40px 37.5px 0 37.5px; border-color: #db1bbe transparent transparent transparent; position: absolute; top: 0; left: 50%; margin-left: -37.5px; } #slider-section { background: #F5F5F5; height: 405px; } #slider-section .wrapper { padding-top: 72px; } #home-a #slider-section .row { width: 740px; } #home-a #slider-section .float-left { margin-right: 5px; } #home-a #slider-section .text-14p { margin: 9px 0 0 0; } #home-a #slide-business { background: #F5F5F5 url("img/home/home-section-business-bg.jpg") center top no-repeat; height: 405px; width: 100%; } #home-a #slide-enterprise-it { background: #F5F5F5 url("img/home/home-section-enterprise-it-bg.jpg") center top no-repeat; height: 405px; width: 100%; } #home-a #customer-section { background: #FFFFFF; } #home-a #customer-section .wrapper { padding: 54px 0 18px 0; } #home-a #customer-section .shelf-triangle { border-color: #F5F5F5 transparent transparent transparent; } #home-a #customer-logos { height: 116px; } #huddle-is-section { background: #F5F5F5; } #huddle-is-section .wrapper { padding: 54px 0 36px 0; } #huddle-is-section .shelf-triangle { border-color: #FFFFFF transparent transparent transparent; } #news-section { background: #FFFFFF; } #news-section .wrapper { padding: 54px 0 36px 0; } #news-section .shelf-triangle { border-color: #F5F5F5 transparent transparent transparent; } #home-a #demo-section { } #demo-section .wrapper { padding-top: 54px; } #demo-section .shelf-triangle { border-color: #FFFFFF transparent transparent transparent; } /* Homepage (October 2013) */ #home-b h3 { font-family:'HelveticaNeueW01-UltLt', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 100; font-size: 32px; line-height: 40px; margin-bottom: 36px; } #home-b .btn-big { margin-bottom: 54px; padding: 4px 36px; } #home-b .btn-big span { font-size: 20px; font-family:'HelveticaNeueW01-55Roma', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; } #home-b .btn-blue { border: 1px solid #0089D0; } #home-b .btn-blue:hover { background-color: #005784; -webkit-transition: background-color 500ms linear; -moz-transition: background-color 500ms linear; -o-transition: background-color 500ms linear; -ms-transition: background-color 500ms linear; transition: background-color 500ms linear;border: 1px solid #005784; -webkit-transition: border 500ms linear; -moz-transition: border 500ms linear; -o-transition: border 500ms linear; -ms-transition: border 500ms linear; transition: border 500ms linear; } #intro-section { text-align: center; background: #FFFFFF; } #intro-section .bg-holder { background: #FFFFFF url('/wp-content/themes/huddle2012/img/home/intro-section-bg.jpg') no-repeat center center; background-size: cover; position: absolute; left: 0; top: 0; height: 545px; width: 100%; } #intro-section .wrapper { padding-top: 54px; height: 700px; } #intro-section h1, #intro-section h2 { color: #FFFFFF; } #intro-section h1 { font-family:'HelveticaNeueW01-55Roma', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; font-size: 46px; line-height: 48px;margin-bottom: 18px; } #intro-section h2 { font-family:'HelveticaNeueW01-45Ligh', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; font-size: 24px; line-height: 32px; margin-bottom: 36px; } #intro-section .btn { width: 215px; } #intro-section .btn-white { background-image: url('/wp-content/themes/huddle2012/img/home/white-btn-bg.png'); background-color: transparent; background-repeat: repeat; border: 1px solid #FFFFFF; margin-left: 10px; } #intro-section .btn-white span { color: #FFFFFF; } #intro-section .slider-holder { overflow: hidden; } #intro-section .slider-holder img { position: absolute; top: 0; left: 0; } #intro-section #device-holder { height: 360px margin-bottom: 54px; } #intro-section #macbook-holder { position: absolute; height: 350px; width: 656px; left: 0px; top: 0px; background: url('/wp-content/themes/huddle2012/img/home/intro-section-macbook-bg.png') no-repeat center center; } #macbook-holder .slider-holder { position: absolute; height: 269px; width: 428px; top: 26px; left: 114px; background: #FFFFFF; border: 1px solid #CCCCCC; border-bottom-color: #AAAAAA; cursor: pointer; } #macbook-holder .play-btn-holder { width: 180px; height: 180px; position: absolute; left: 50%; top: 50%; margin: -103px 0 0 -90px; z-index: 30; cursor: pointer; background: url('/wp-content/themes/huddle2012/img/home/intro-section-macbook-play-btn.png') no-repeat center center; } #intro-section #ipad-landscape-holder { position: absolute; height: 221px; width: 365px; right: 0px; top: 140px; background: url('/wp-content/themes/huddle2012/img/home/intro-section-ipad-landscape-bg.png') no-repeat center center; } #ipad-landscape-holder .slider-holder { position: absolute; height: 188px; width: 251px; top: 9px; left: 59px; background: #FFFFFF; } #intro-section #iphone-holder { position: absolute; height: 295px; width: 146px; left: 520px; top: 55px; background: url('/wp-content/themes/huddle2012/img/home/intro-section-iphone-bg.png') no-repeat center center; } #iphone-holder .slider-holder { position: absolute; height: 208px; width: 118px; top: 40px; left: 15px; background: #FFFFFF; } #about-huddle-section { background: #FFFFFF; text-align: center; } #about-huddle-section .wrapper { padding-top: 24px; } #about-huddle-section h3 { color: #666666; } #about-huddle-section .col { padding: 0 15px;} #about-huddle-section img { text-align: center; margin-bottom: 36px; } #about-huddle-section h5 { color: #0089D0; font-size: 20px; font-family:'HelveticaNeueW01-65Medi', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; line-height: 24px; } #about-huddle-section p { font-family:'HelveticaNeueW01-45Ligh', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 16px; } #home-b #customer-section { background: #FFFFFF url('/wp-content/themes/huddle2012/img/home/hero-section-bg.jpg') no-repeat center center; background-size: cover; text-align: center; } #home-b #customer-section .wrapper { padding-top: 54px; } #home-b #customer-section h2 { font-family:'HelveticaNeueW01-UltLt', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 100; font-size: 60px; line-height: 72px; margin-bottom: 18px; } #home-b #customer-section h2, #customer-section h3 { color: #0089D0;} #home-b #customer-section img { margin-bottom: 54px; } #get-started-section { background: #0089d0; text-align: center;} #get-started-section .wrapper { padding-top: 90px; } #get-started-section h3 { color: #FFFFFF; } #get-started-section .btn { border: 1px solid #FFFFFF; margin-bottom: 90px; } #get-started-section .btn:hover { border: 1px solid #0089D0; -webkit-transition: border 500ms linear; -moz-transition: border 500ms linear; -o-transition: border 500ms linear; -ms-transition: border 500ms linear; transition: border 500ms linear; } #video-callout { background: #333333; padding: 18px 15px; text-align: center; } /* Free trial (October 2014) */ #free-trial-oct-14 h1 { color: #0089D0; text-align: center; font-family:'HelveticaNeueW01-55Roma', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; font-size: 40px; line-height: 48px; margin-bottom: 18px; } #free-trial-oct-14 h2 { color: #0089D0; text-align: center; font-family:'HelveticaNeueW01-55Roma', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; font-size: 24px; line-height: 32px; margin-bottom: 36px; } #free-trial-oct-14 { background: #F5F5F5; padding: 54px 0 0 0; } #free-trial-oct-14 .form-holder { background: #FFFFFF; padding: 30px; margin-bottom: 18px; border: 1px solid #DEDEDE; } #free-trial-oct-14 .field-holder { background: #F1F1F1; padding: 9px; margin-bottom: 18px; } #free-trial-oct-14 .field-holder .icon-ok-sign { display: none; } #free-trial-oct-14 .field-holder .valid ~ .icon-ok-sign { position: absolute; right: 8px; top: 10px; color: #77BB22 !important; display: block; } #free-trial-oct-14 .field-holder select.valid ~ .icon-ok-sign { right: 24px;} #free-trial-oct-14 .field-holder .icon-remove-sign { display: none; } #free-trial-oct-14 .field-holder .error ~ .icon-remove-sign { position: absolute; right: 8px; top: 10px; color: #FE5C00 !important; display: block; } #free-trial-oct-14 .field-holder select.error ~ .icon-remove-sign { right: 24px;} #free-trial-oct-14 label { display: block; font-size: 14px; margin-bottom: 4px; } #free-trial-oct-14 input.required, #free-trial-oct-14 select.required { width: 100%; color: #666; margin: 0; height: 36px; border: 1px solid #CCCCCC; font-size: 16px; line-height: 36px; padding: 0; *behavior: none; } html>/**/body #free-trial-oct-14 input.required, html>/**/body #free-trial-oct-14 select.required { padding: 0 0 0 10px !important; } #free-trial-oct-14 input.required:focus, #free-trial-oct-14 select.required:focus { border: 1px solid #0089D0; } #free-trial-oct-14 select.defaultInvalid { color: #BBB; } #free-trial-oct-14 select option { color: #666666; } #free-trial-oct-14 input[type=submit] { width: 100%; border: none; background: #0089D0; color: #FFFFFF; font-size: 18px; padding: 16px; margin-top: 18px; } #free-trial-oct-14 input[type=submit]:hover { background: #005784; -webkit-transition: background-color 500ms linear; -moz-transition: background-color 500ms linear; -o-transition: background-color 500ms linear; -ms-transition: background-color 500ms linear; transition: background-color 500ms linear; } #free-trial-oct-14 input.error, #free-trial-oct-14 select.error { border: 1px solid #FE5C00; } #free-trial-oct-14 .error-holder { position: absolute; right: 0px; top: 36px; height: 16px; width: 100% ;} #free-trial-oct-14 .error-holder .error { font-size: 10px; line-height: 16px; color: #FFFFFF; background: #FE5C00; position: absolute; right: 0px; top: 0; height: 16px; padding: 0 6px; } #free-trial-oct-14 #password-strength { margin-bottom: 14px; } #free-trial-oct-14 #password-strength p { margin-bottom: 4px; font-size: 14px; } #free-trial-oct-14 #password-strength i { margin: 0 4px 0 10px; } #free-trial-oct-14 #password-strength i.icon-ok-sign { color: #77BB22 !important; } #free-trial-oct-14 .error-dialog h5 { color: #FFFFFF; padding: 10px 18px; margin: 0; } #free-trial-oct-14 .error-dialog p { padding: 18px 18px 0 18px; } #free-trial-oct-14 #email-in-use-message { border: 1px solid #FE5C00; margin-bottom: 18px; } #free-trial-oct-14 #email-in-use-message h5 { background: #FE5C00; } #free-trial-oct-14 #unknown-error-message { border: 1px solid #FF0000; margin-top: 18px; } #free-trial-oct-14 #unknown-error-message h5 { background: #FF0000; } /* Thank you page */ #thank-you h1 { color: #0089D0; text-align: center; font-family:'HelveticaNeueW01-55Roma', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; font-size: 40px; line-height: 48px; margin-bottom: 18px; } #thank-you { background: #F5F5F5; padding: 54px 0 0 0; } #thank-you .content { background: #FFFFFF; padding: 30px; margin-bottom: 18px; border: 1px solid #DEDEDE; } #thank-you .content p { font-size: 16px; line-height: 24px;} #envelope-wrapper { width: 70px; height: 40px; margin: 30px auto; -webkit-perspective: 200; -webkit-perspective-origin: 50% 50%; -moz-perspective: 200; -moz-perspective-origin: 50% 50%; display: none\9; } #envelope-wrapper .envelopebg { width: 70px; height: 44px; background-color: #005784; position: absolute; margin-bottom: 0; z-index: 3; } #envelope-wrapper .envelope { width: 0px; eight: 0px; position: relative; margin-bottom: 0; border-left: 35px #0070AA solid; border-bottom: 22px #0089d0 solid; border-right: 35px #0089D0 solid; border-top: 22px rgba(0,0,0,0) solid; z-index: 4; } #envelope-wrapper .letter { width: 54px; border: 1px solid #DDDDDD; height: 44px; background-color: #FAFAFA; position: relative; top:-75px; left: 8px; z-index: 3; -webkit-animation: letteranim 1s 2s 1 forwards; -o-animation: letteranim 1s 1.25s 1 forwards; animation: letteranim 1s 1.25s 1 forwards; } #envelope-wrapper .letter:after { content: ""; position: absolute; width: 32px; height: 6px; background-color: #b0daf0; top:6px; left: 6px; } #envelope-wrapper .letter:before { content: ""; position: absolute; width: 21px; height: 6px; background-color: #b0daf0; top:15px; left: 6px; } #envelope-wrapper .opener { position: relative; width: 0; height: 0; border-left: 35px rgba(0,0,0,0) solid; border-top: 31px #005784 solid; border-right: 35px rgba(0,0,0,0) solid; top: -44px; z-index: 5; transform-origin:0 0; -ms-transform-origin:0 0; -webkit-transform-origin:0 0; -webkit-animation: openanim 0.5s 1.5s 1 forwards; -o-animation: openanim 0.5s 1s 1 forwards; animation: openanim 0.5s 1s 1 forwards; } @keyframes letteranim { 0% { top: -75px; } 50% { top: -75px; } 100% { top: -95px; } } @-webkit-keyframes letteranim { 0% { top: -75px; } 50% { top: -75px; } 100% { top: -95px; } } @keyframes openanim { 0% { -webkit-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); z-index :5;} 50% { -webkit-transform: rotateX(90deg); -0-transform: rotateX(90deg); transform: rotateX(90deg); z-index :4; } 100% { -webkit-transform: rotateX(180deg); -0-transform: rotateX(180deg); transform: rotateX(180deg); z-index :2; } } @-webkit-keyframes openanim { 0% { -webkit-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); z-index :5; } 50% { -webkit-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); z-index :4; } 100% { -webkit-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); z-index :2; } } /* Industry pages */ #why-huddle-col { width: 64%; } #features-col { margin-left: 6%; width: 30%; } #il3-3-col .box-blue-round { height: 11.85em; } /* New style use case pages */ .use-case-intro .img-col { width: 28%; text-align: center; } .use-case-intro .text-col { width: 48%; } .use-case-intro .btn-col { width: 20%; } .use-case-intro .btn-col .btn-big { width: 100%; padding: 5px; text-align: center; } .use-case-intro .btn-col .btn-big span { font-size: 14px; } /* Goodbye SharePoint */ #replace-sp-boxout { background: #E5F3FA url("/wp-content/themes/huddle2012/img/use-cases/sharepoint/replace-sharepoint-bg.png") no-repeat bottom right; padding: 36px 160px 18px 30px; margin-bottom: 36px; } #regen-sp-boxout { background: #E5F3FA url("/wp-content/themes/huddle2012/img/use-cases/sharepoint/regen-sharepoint-bg.png") no-repeat bottom right; padding: 36px 160px 18px 30px; margin-bottom: 36px; } #sp-calc-boxout { background: #F1F1F1 url("/wp-content/themes/huddle2012/img/use-cases/sharepoint/sp-calc-boxout-bg.png") no-repeat bottom right; padding: 36px 160px 18px 30px; margin-bottom: 36px; } /* Industry pages -- SharePoint Calculator */ #sp-calc-lp #main-content-simple { background: #FFFFFF url('/wp-content/themes/huddle2012/img/key-use-cases/sp-calc-lp-bg.png') no-repeat top right; } #sp-calc-live #main-content-simple { background: #FFFFFF url('/wp-content/themes/huddle2012/img/key-use-cases/sp-calc-live-bg.png') no-repeat top right; } .spc-tip { color: #0089D0; cursor: pointer; } .spc-form-part { padding: 0.9375em; border: 1px dashed #CCCCCC; background: #F7F7F7; margin-bottom: 1.125em; } .spc-form-part table {} .spc-form-part input { margin-bottom: 0; } .spc-form-part td {border: none; } .spc-main-details {} .spc-main-details td { border: none; text-align: right; font-size: 1.125em; padding: 0.25em 0 0.25em 1.5em; } .spc-main-details input { border: none; background: none; color: #FFFFFF; font-weight: bold; text-align: right; } .spbreakdowndetail { cursor: pointer; } #spc-add-details { font-size: 11px; } #spc-add-details th { font-weight: bold; color: #141414; font-size: 1em; background: none; border: none; padding: 0.25em; } #spc-add-details td { padding: 0.25em; } #spc-add-details .item-col { width: 200px; } #spc-add-details .costing-model { width: 268px; } #spc-add-details input { text-align: right; font-size: 11px; color: #141414; background: #FFFFFF; border: 1px solid #CCCCCC; padding: 3px; width: 82px; } /* Government */ #what-huddle-does { background: url("img/industry/government/iphone-bg.jpg") no-repeat bottom right; } #capitol-building-bg { background: url("img/industry/government/capitol-building-blue-bg.png") no-repeat bottom right; } #big-ben-bg { background: url("img/industry/government/big-ben-blue-bg.png") no-repeat bottom right; padding-right: 8.5em; } /* This is Huddle */ #features-nav { } #features-nav li { } #features-nav li a { color: #0089D0 !important; font-size: 0.75em; padding-left: 2em; cursor: pointer; } #features-nav li a.selected { background: #E2F4FC; } /* Connected Desktop */ .cde-nav-box { background: #F1F1F1; color: #666666; text-transform: uppercase; font-weight: bold; padding: 18px 0; text-align: center; } .cde-nav-box p { font-size: 11px; margin-bottom: 0; } .cde-nav-box:hover { background: #0089D0; color: #FFFFFF; } .cde-nav-box:hover p { color: #FFFFFF; } #cde-infographic { background: #C9E2DF url("/wp-content/themes/huddle2012/img/this-is-huddle/connected-desktop/infographic-bg.png") right top no-repeat; height: 200px; } #cde-infographic p { line-height: 1.75em } /* Pricing */ #pricing-content-top { padding: 2.25em 1.875em 1.125em 1.875em; } #pricing-content-bottom { padding: 1.125em 1.875em; } #price-plans { background: #E5F3FA; padding: 2.25em 1.875em; } #price-plans .col { background-color: #FFFFFF; border: 5px solid #CCCCCC; } #price-plans h2 { font-size: 2.25em; margin-bottom: 0.5em; color: #666666; } #price-plans .currency-changer { clear: both; width: 80px; margin: 0 auto 7px auto; height: 23px; } #price-plans #currency-switcher { background: #FFFFFF; width: 46px; padding: 6px 6px 0 6px; height: 104px; border: 5px solid #CCCCCC; border-radius: 23px; position: absolute; left: -25px; top: 98px; } #price-plans .currency-icon { height: 24px; width: 24px; display: block; border-radius: 12px; color: #FFFFFF; text-align: center; margin: 0 0 6px 0; cursor: pointer; } #price-plans .currency-icon i { line-height: 24px; font-size: 14px; text-align: center; } #price-plans .currency-icon-grey { background: #CCCCCC; } #price-plans .currency-icon-orange { background: #FE5C00; } #price-plans .pricing-callout { width: 130px; height: 130px; margin: 0 auto 18px auto; border-radius: 65px; } #price-plans .pricing-callout span { color: #FFFFFF; text-align: center; } #price-plans .pricing-callout span.pricing-prefix { font-size: 30px; line-height: 30px; } #price-plans .pricing-callout span.pricing-price { font-size: 60px; font-weight: 700; line-height: 60px; } #price-plans .pricing-callout img { margin: 0 auto; } #price-plans .pricing-callout p { text-align: center; font-weight: 700; color: #FFFFFF; font-size: 10px; } #price-plans .pricing-callout-workgroup { background: #FE5C00; padding-top: 18px; } #price-plans .pricing-callout-enterprise { background: #77BB22; padding-top: 18px; } #price-plans .pricing-callout-unlimited { background: #0089D0; } #price-plans .btn { width: 100%; } #compare-plans .toggle { cursor: pointer; } #compare-plans .icon-chevron-sign-right, #compare-plans .icon-chevron-sign-down { padding-left: 5px; color: #73BEE5; } #compare-plans td { text-align: center; padding: 0.75em 1em; vertical-align: middle; } #compare-plans td.first-col { text-align: left; } #compare-plans .tick-orange, #compare-plans .tick-green, #compare-plans .tick-blue { margin: 0 auto; } /* PPC - old */ #ppc-old #splash-text { padding: 4em 0 0 1em; } #ppc-old #splash-text h1 { font-size: 2.75em; font-weight: 700; } #ppc-old #splash-text h2 { font-size: 0.875em; line-height: 1.5em; color: #666666; margin-bottom: 2em; } #ppc-old #content h3 { font-size: 1.375em; text-transform: uppercase; } #ppc-old #content #sidebar { padding-left: 1.25em; } #ppc-old #content #callout { height: 9.25em; width: 8.6875em; position: absolute; left: 18.75em; top: -8.125em; background: url("img/campaign/ppc/callout-bubble.png") no-repeat; text-align: center; padding: 2.1875em 1.125em; } #ppc-old #content #callout span { color: #FFFFFF; font-size:0.6975em; font-weight: 700; text-transform: uppercase; } /* PPC - new */ #ppc-new h1 { font-size: 2.125em; } ul.big-percent { margin-left: 0; overflow: hidden; } .big-percent li { list-style: none !important; margin-bottom: 0.75em; clear: both; } .big-percent li .number { display: block; float: left; height: 2.1em; width: 2.5em; line-height: 1em; color: #0089D0; font-weight: 400; font-size: 3.3em; vertical-align: top; margin: 0 0.25em 0.2em 0; } .big-percent li .text strong { font-size: 1.25em; } /* Customers - Case studies */ #case-study-promo { background: url("/wp-content/themes/huddle2012/img/customers/case-study-promo-bg.jpg") no-repeat; background-position: center center; height: 175px; padding: 18px 185px 0 15px; margin: 18px 0; } #case-study-promo p { font-size: 13px; } #case-study-filters { padding: 0 5px; } #case-study-filters p, #case-study-filters label { margin-bottom: 9px; line-height: 28px; font-size: 14px; } #case-study-filters select { display: inline; padding: 4px; margin-bottom: 9px; } #case-study-container .iso-logo { width: 128px; height: 122px; margin: 0 5px 10px 5px; float: left; overflow: hidden; vertical-align: middle; text-align: center; } #case-study-container .iso-logo p { margin: 42px 0 0 0; color: #FFFFFF; text-transform: uppercase; font-size: 14px; font-weight: 700; text-decoration: none; } #case-study-container .iso-logo img { width: 100%; margin: 0px; } #case-study-container .icon-file-text { position: absolute; right: 6px; bottom: 6px; color: #999999; } /* Customers - Testimonials */ #testimonials-promo { background: url("/wp-content/themes/huddle2012/img/customers/testimonials-promo-bg.png") no-repeat; background-position: top center; margin: 18px 0; padding: 24px 0 0 0; height: 278px; } #testimonials-promo h3 { font-size: 36px; color: #666666; margin: 0 0 18px 30px; } .quote-holder { position: absolute; top: 82px; right: 0px; width: 690px; } .quote-holder .banner-quote { padding: 0 30px; margin-bottom: 36px; height: 100px; } .quote-holder .banner-quotee { background: #7C7C7C; height: 60px; padding: 9px 130px 0 30px; } .quote-holder .banner-quotee p { font-size: 14px; color: #FFFFFF; margin: 0px; } .quote-holder .banner-logo { position: absolute; bottom: 10px; right: 10px; margin: 0; } .testimonial-logo { width: 100px; height: 95px; } /* 404 */ .error404 h1 { font-size: 10em; } .error404 h2 { font-size: 2.29em; } .error404 h1, .error404 h2 { line-height: 1em; margin-bottom: 0; font-weight: 700; } .error404 #main-content-simple p, .error404 #main-content-simple li { color: #141414 !important; } .error404 input { font-size: 1em; width: 75%; } /* Content pages */ .share-icon-round .icon { height: 1.75em; width: 1.75em; display: block; background-image: url("img/sprite.png"); background-repeat: no-repeat; margin: 0 auto; } #share-twitter .icon { background-position: -231px -123px; } #share-facebook .icon { background-position: -260px -123px; } #share-linkedin .icon { background-position: -289px -123px; } #share-gplus .icon { background-position: -318px -123px; } #share-pinterest .icon { background-position: -347px -123px; } #share-email .icon { background-position: -376px -123px; } /* ---------------------------------------------------------------------------------------------------------- 11 Plugins -------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /*! Isotope v1.5.25 - http://isotope.metafizzy.co/ */ /**** Isotope Filtering ****/ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /**** Isotope CSS3 transitions ****/ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; } /**** disabling Isotope CSS3 transitions ****/ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; transition-duration: 0s; } /*! AnythingSlider v1.4 - http://css-tricks.com/anythingslider-jquery-plugin/ */ #home-slider { width: 480px; height: 270px; list-style: none; overflow-y: hidden; overflow-x: hidden; *box-sizing: content-box !important; } #product-slider { width: 690px; height: 300px; list-style: none; overflow-y: hidden; overflow-x: hidden; *box-sizing: content-box !important; } #seo-slider { width: 690px; height: 425px; list-style: none; overflow-y: hidden; overflow-x: hidden; *box-sizing: content-box !important; } #seo-slider h4, #seo-slider p { text-indent: -99999px; position: absolute; } #seo-slider .anythingSlide { width: 690px; height: 425px; } #product-slider-holder .arrow a { background: url("/wp-content/themes/huddle2012/img/global/slider-controls.png"); } #product-slider-holder .back { left: 10px; } #product-slider-holder .back a { background-position: left top; } #product-slider-holder .back a:hover, #product-slider-holder .back a.hover { background-position: left -140px; } #product-slider-holder .forward { right: 10px; } #product-slider-holder .forward a { background-position: right top; } #product-slider-holder .forward a:hover, #product-slider-holder .forward a.hover { background-position: right -140px; } .anythingSlider-default { margin: 0 auto; padding: 0; } .anythingSlider-default .anythingControls a { background: #777 url("/wp-content/themes/huddle2012/img/home/slider-controls.png") center -288px repeat-x; color: #000; } .anythingSlider-default .anythingControls a.cur { background: #888; color: #000; } .anythingSlider-default.activeSlider .anythingControls a { background-color: #666666; color: #0089D0; border: 1px solid #FFFFFF; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } .anythingSlider-default.activeSlider .anythingControls a.cur, .anythingSlider-default.activeSlider .anythingControls a:hover { background: #0089D0; color: #666666; border: 1px solid #FFFFFF; } /* Navigation Arrows */ .anythingSlider-default .arrow { top: 50%; position: absolute; display: block; } .anythingSlider-default .arrow a { display: block; width: 45px; height: 140px; margin: -70px 0 0 0; text-align: center; outline: 0; background: url("/wp-content/themes/huddle2012/img/home/slider-controls.png") no-repeat; } /* back arrow */ .anythingSlider-default .back { left: -50px; } .anythingSlider-default .back a { background-position: left top; } .anythingSlider-default .back a:hover, .anythingSlider-default .back a.hover { background-position: left -140px; } /* forward arrow */ .anythingSlider-default .forward { right: -50px; } .anythingSlider-default .forward a { background-position: right top; } .anythingSlider-default .forward a:hover, .anythingSlider-default .forward a.hover { background-position: right -140px; } /* Navigation Links */ .anythingSlider-default .anythingControls { outline: 0; display: none; position: absolute; right: 0px; bottom: 10px; } .anythingSlider-default .anythingControls ul { margin: 0; padding: 0; float: left; } .anythingSlider-default .anythingControls ul li { display: inline; } .anythingSlider-default .anythingControls ul a { display: inline-block; text-decoration: none; width: 10px; height: 10px; margin: 0 5px 0 0; } .anythingSlider-default .anythingControls ul a span { display: none; } /* navigationSize window */ .anythingSlider-default .anythingControls .anythingNavWindow { overflow: hidden; float: left; } /* Autoplay Start/Stop button */ .anythingSlider-default .anythingControls .start-stop { padding: 2px 5px; width: 40px; text-align: center; text-decoration: none; float: right; z-index: 100; outline: 0; } /* Navigation Arrows IE8 and older */ .as-oldie .anythingSlider-default .arrow { top: 30%; } .as-oldie .anythingSlider-default .arrow a { margin: 0; } .as-oldie .anythingSlider-default .anythingControls li { margin-left: 3px; } .as-oldie .anythingSlider-default .anythingControls a { margin: 0; *box-sizing: content-box !important; } .as-oldie .anythingSlider-default .anythingNavWindow { margin: 0 2px; } .as-oldie .anythingSlider-default .anythingNavWindow li { padding: 3px 0 0 0; } /* Common styling */ .anythingSlider { display: block; overflow: visible !important; position: relative; } .anythingSlider .anythingWindow { overflow: hidden; position: relative; width: 100%; height: 100%; } .anythingSlider .anythingBase { background: transparent; list-style: none; position: absolute; overflow: visible !important; top: 0; left: 0; margin: 0; padding: 0; } .anythingSlider .anythingBase li { height: 275px; width: 980px; } .anythingSlider .arrow span { display: block; visibility: hidden; } .anythingSlider .arrow.disabled { display: none; } .anythingSlider .panel { background: transparent; display: block; overflow: hidden; float: left; padding: 0; margin: 0; } .anythingSlider .vertical .panel { float: none; } .anythingSlider .fade .panel { float: none; position: absolute; top: 0; left: 0; z-index: 0; } .anythingSlider .fade .activePage { z-index: 1; } /*! fancyBox v2.1.3 - fancyapps.com/fancybox/#license */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp { padding: 0; margin: 0; border: 0; outline: none; vertical-align: top; } .fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020; } .fancybox-skin { position: relative; background: #0089D0; color: #444; text-shadow: none; } .fancybox-opened { z-index: 8030; } .fancybox-opened .fancybox-skin { -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .fancybox-outer, .fancybox-inner { position: relative; display: block; clear: both; } .fancybox-outer { background: #FFFFFF; } .fancybox-inner { overflow: hidden; background: #FFFFFF; } .fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; } .fancybox-error { color: #444; font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; padding: 15px; white-space: nowrap; } .fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%; } .fancybox-image { max-width: 100%; max-height: 100%; } #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url("img/fancybox/fancybox_sprite.png"); } #fancybox-loading { position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060; } #fancybox-loading div { width: 44px; height: 44px; background: url("img/fancybox/fancybox_loading.gif") center center no-repeat; } .fancybox-close { position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 8040; } .fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url("img/fancybox/blank.gif"); /* helps IE */ -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 8040; } .fancybox-prev { left: 0; } .fancybox-next { right: 0; } .fancybox-nav span { position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden; } .fancybox-prev span { left: 10px; background-position: 0 -36px; } .fancybox-next span { right: 10px; background-position: 0 -72px; } .fancybox-nav:hover span { visibility: visible; } .fancybox-tmp { position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important; } /* Overlay helper */ .fancybox-lock { overflow: hidden; } .fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url("img/fancybox/fancybox_overlay.png"); } .fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0; } .fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; } /* Title helper */ .fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; z-index: 8050; } .fancybox-opened .fancybox-title { visibility: visible; } .fancybox-title-float-wrap { position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center; } .fancybox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; font-weight: bold; line-height: 24px; white-space: nowrap; } .fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff; } .fancybox-title-inside-wrap { padding-top: 10px; } .fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8); } /*! jQuery UI v1.8.21 - http://jqueryui.com/ */ /* Layout helpers */ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); } .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; } .ui-helper-clearfix:after { clear: both; } .ui-helper-clearfix { zoom: 1; } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); } /* Interaction Cues */ .ui-state-disabled { cursor: default !important; } /* Overlays */ .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Component containers */ .ui-widget { font-family: Helvetica, Arial, sans-serif; font-size: 1.1em; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Helvetica, Arial, sans-serif; font-size: 1em; } .ui-widget-content { border: 1px solid #dddddd; background: #ffffff; color: #444444; } .ui-widget-content a { color: #444444; } .ui-widget-header { border: 1px solid #dddddd; background: #dddddd; color: #444444; font-weight: bold; } .ui-widget-header a { color: #444444; } /* Interaction states */ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #dddddd; background: #0089D0; font-weight: bold; color: #0089D0; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #0089D0; text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #0089D0; background: #0089D0; font-weight: bold; color: #ffffff; } .ui-state-hover a, .ui-state-hover a:hover { color: #ffffff; text-decoration: none; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #dddddd; background: #ffffff; font-weight: bold; color: #ff0084; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #ff0084; text-decoration: none; } .ui-widget :active { outline: none; } /* Interaction Cues */ .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #cccccc; background: #ffffff; color: #444444; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #444444; } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #ff0084; background: #ffffff 50% 50% repeat-x; color: #222222; } .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #222222; } .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #222222; } .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; } /* Overlays */ .ui-widget-overlay { background: #eeeeee 50% 50% repeat-x; opacity: .80;filter:Alpha(Opacity=80); } .ui-widget-shadow { margin: -4px 0 0 -4px; padding: 4px; background: #aaaaaa 50% 50% repeat-x; opacity: .60;filter:Alpha(Opacity=60); -moz-border-radius: 0; -khtml-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } .ui-slider { position: relative; text-align: left; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em !important; height: 1.2em !important; cursor: default; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } .ui-slider-horizontal { height: 0.7em; } .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider-vertical { width: .8em; height: 100px; } .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .ui-slider-vertical .ui-slider-range-max { top: 0; } /*! qTip2 v2.0.0 - http://craigsworks.com/projects/qtip2/ */ /* Core qTip styles */ .ui-tooltip,.qtip{position:absolute;left:-28000px;top:-28000px;display:none;max-width:280px;min-width:50px;font-size:10.5px;line-height:12px;border-width:1px;border-style:solid;} /* Fluid class for determining actual width in IE */ .ui-tooltip-fluid{display:block;visibility:hidden;position:static!important;float:left!important;} .ui-tooltip-content{position:relative;padding:5px 9px;overflow:hidden;font-size:12px;line-height:17px;text-align:left;word-wrap:break-word;} .ui-tooltip-content strong{font-size:14px;line-height:20px;} .ui-tooltip-content span{font-weight:700;} .ui-tooltip-titlebar{position:relative;min-height:14px;padding:5px 35px 5px 10px;overflow:hidden;border-width:0 0 1px;font-weight:700;} .ui-tooltip-titlebar + .ui-tooltip-content{border-top-width:0!important;} /* Default close button class */ .ui-tooltip-titlebar .ui-state-default{position:absolute;right:4px;top:50%;margin-top:-9px;cursor:pointer;outline:medium none;border-width:1px;border-style:solid;} * html .ui-tooltip-titlebar .ui-state-default{top:16px;} /* IE fix */ .ui-tooltip-titlebar .ui-icon,.ui-tooltip-icon .ui-icon{display:block;text-indent:-1000em;direction:ltr;} .ui-tooltip-icon,.ui-tooltip-icon .ui-icon{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-decoration:none;} .ui-tooltip-icon .ui-icon{width:18px;height:14px;text-align:center;text-indent:0;font:normal bold 10px/13px Tahoma, sans-serif;color:inherit;background:transparent none no-repeat -100em -100em;} /* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */ .ui-tooltip-focus{} /* Applied on hover of tooltips i.e. added/removed on mouseenter/mouseleave respectively */ .ui-tooltip-hover{} /* Default tooltip style */ .ui-tooltip-default{border-color:#F1D031;background-color:#FFFFA3;color:#555;} .ui-tooltip-default .ui-tooltip-titlebar{background-color:#FFEF93;} .ui-tooltip-default .ui-tooltip-icon{border-color:#CCC;background:#F1F1F1;color:#777;} .ui-tooltip-default .ui-tooltip-titlebar .ui-state-hover{border-color:#AAA;color:#111;} /*! Light tooltip style */ .ui-tooltip-light{background-color:#FFF;border-color:#E2E2E2;color:#454545;} .ui-tooltip-light .ui-tooltip-titlebar{background-color:#f1f1f1;} /*! Dark tooltip style */ .ui-tooltip-dark{background-color:#505050;border-color:#303030;color:#f3f3f3;} .ui-tooltip-dark .ui-tooltip-titlebar{background-color:#404040;} .ui-tooltip-dark .ui-tooltip-icon{border-color:#444;} .ui-tooltip-dark .ui-tooltip-titlebar .ui-state-hover{border-color:#303030;} /* IE9 fix - removes all filters */ .ui-tooltip:not(.ie9haxors) div.ui-tooltip-content,.ui-tooltip:not(.ie9haxors) div.ui-tooltip-titlebar{filter:none;-ms-filter:none;} /* Tips plugin */ .ui-tooltip .ui-tooltip-tip{margin:0 auto;overflow:hidden;z-index:10;} .ui-tooltip .ui-tooltip-tip,.ui-tooltip .ui-tooltip-tip *{position:absolute;line-height:.1px!important;font-size:.1px!important;color:#123456;background:transparent;border:0 dashed transparent;} .ui-tooltip .ui-tooltip-tip canvas{top:0;left:0;} /* Modal plugin */ #qtip-overlay{position:fixed;left:-10000em;top:-10000em;} /* Applied to modals with show.modal.blur set to true */ #qtip-overlay.blurs{cursor:pointer;} /* Change opacity of overlay here */ #qtip-overlay div{position:absolute;left:0;top:0;width:100%;height:100%;background-color:#000;opacity:0.7;filter:alpha(opacity=70);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);} /* ---------------------------------------------------------------------------------------------------------- ?? Media queries -------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /* Standard desktops - 1024 pixels and up */ @media only screen and (min-width: 980px) { /* V3 landing pages */ .landing-page-v3 #secondary-logo-section { display: none; } } @media only screen and (max-width: 979px) and (min-width: 760px) { .responsive #logo { text-align: center; } .responsive .wrapper { width: 100%; } /* V3 landing pages */ .landing-page-v3 #secondary-logo-section { display: none; } } @media only screen and (max-width: 759px) and (min-width: 521px) { .responsive #logo { text-align: center; } .responsive .wrapper { width: 100%; } /* V3 landing pages */ .landing-page-v3 .blue-wash-header { background: #FFFFFF; padding-top: 18px; } .landing-page-v3 #header-content { height: auto; } .landing-page-v3 #header-image { display: none; } .landing-page-v3 h1 { margin-top: 18px; color: #141414; } .landing-page-v3 #content-col { width: 49%; } .landing-page-v3 #form-col { width: 49%; } .landing-page-v3 #sub-col-1 { width: 100%; } .landing-page-v3 #sub-col-2 { width: 100%; margin: 0 0 18px 0; } .landing-page-v3 #primary-logo-section { display: none; } .landing-page-v3 #secondary-logo-section { display: block; } } @media only screen and (max-width: 519px) { .responsive #logo { text-align: center; } .responsive .wrapper { width: 100%; min-width: 320px; } .responsive .row > .col { width: 100%; float: none; margin: 0 0 18px 0; } /* V3 landing pages */ .landing-page-v3 .blue-wash-header { background: #FFFFFF; } .landing-page-v3 #header-content { height: auto; margin: 0; } .landing-page-v3 #header-image { display: none; } .landing-page-v3 h1 { margin: 0 0 18px 0; text-align: center; color: #141414; } .landing-page-v3 #primary-logo-section { display: none; } } /* Added on 20th-Jun-2014 for Assets Images for Marketing Page */ .assets .view { overflow: hidden; text-align: center; /* width: 331px; */ /* height: 203px; */ /* float: left; */ /* position: relative; */ /* cursor: default; */ /* background: #fff; */ } .assets .view .mask, .assets .view .content { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; padding: 18px 15px; } .assets .view img { /* display: block; */ /* position: relative; */ } .assets .view p { font-size: 14px; color: #FFFFFF; /* position: relative; */ /* font-family:Arial, Helvetica, sans-serif; */ /* padding: 19px 20px 20px; */ /* text-align: center; */ } .assets .view-first img { /* smooth transition on the image */ -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .assets .view-first:hover img { /* makes the image bigger on hover */ -webkit-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -ms-transform: scale(1.1,1.1); transform: scale(1.1,1.1); } .assets .view-first .mask { /* set opacity for the mask layer */ -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; background-color: #999999\9; background-color: rgba(61, 61, 61, 0.85); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .assets .view-first:hover .mask { /* change the opacity of the mask layer on hover */ -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } .assets .view-first p, .assets .view-first a.btn { /* move the text and button down 100px and hide them */ -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -o-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .assets .view-first:hover p, .assets .view-first:hover a.btn { /* on hover, return the text and button to starting position and unhide them */ -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; transition-delay: 0.1s; } .assets .view-first:hover p, .assets .view-first:hover a.btn { }