/* ----------------------------------------------------*/ /* ---- CSS Document ----------------------------------*/ /* ----------------------------------------------------*/ /* -- (c) 2015 VIAVI Solutions --- */ /* -- Created by: Cyle Olson -- */ /* -- Modified by: Patrick McIntire -- */ /* ----------------------------------------------------*/ /* ---- Table of Contents -----------------------------*/ /* ----------------------------------------------------*/ /* -- Gobal Reset ------------- */ /* -- Universal Elements ------ */ /* -- Fonts ------------------- */ /* -- Layout Elements --------- */ /* -- Content Elements -------- */ /* -- Sections ---------------- */ /* -- Table Elements ---------- */ /* -- Form Elements ----------- */ /* -- List Items -------------- */ /* -- Typography -------------- */ /* -- Headers ----------------- */ /* -- Graphic Buttons --------- */ /* -- Image Styles ------------ */ /* -- Isotope Filtering ------- */ /* -- Accordion --------------- */ /* -- Google Map -------------- */ /* -- Carousel ---------------- */ /* -- Iconize 0.5 ------------- */ /* -- Media Queries ----------- */ /* ----------------------------------------------------*/ /* ---- Gobal Reset -----------------------------------*/ /* ----------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font-style:inherit; vertical-align: baseline;} /* -- HTML5 display-role reset for older browsers -- */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;} table {border-collapse: collapse; border-spacing: 0;} :focus {outline: 0;} /* -- Highlight Color -- */ ::selection { background: #3d98e6; color: #fbfbfb; } /* Safari 3.1+, Opera 9.5+, Chrome 2+ */ ::-moz-selection { background: #3d98e6; color: #fbfbfb; } /* Mozilla Firefox */ /* ----------------------------------------------------*/ /* ---- Universal Elements ----------------------------*/ /* ----------------------------------------------------*/ body{ /* -- Set line-height 140% of body copy -- */ font: normal 10px/14px "roboto", Arial, Helvetica, sans-serif; background: #fff; /* -webkit-font-smoothing: antialiased; */} /* -- Hidden -- */ .hidden{display: none;} /* -- Align -- */ .align-left{display: block; float: left; margin: 0 20px 20px 0;} .align-right{display: block; float: right; margin: 0 0 20px 20px;} .align-center{display: block; margin: 20px auto;} /* -- Float -- */ .float-left{float: left;} .float-right{float: right;} .center {display: block; margin: 0 auto;} /* -- Colors -- */ .color-white {color: #fbfbfb;} .color-gray {color: #777;} .color-gray-dark {color: #444;} .color-gray-light {color: #ccc;} .color-gray-lightest {color: #e9e9e9;} .color-blue {color: #500778;} .color-blue-dark {color: #500778;} .color-blue-darkest {color: #500778;} .color-orange {color: #f60;} .color-red {color: #b52a2a;} .color-green {color: #99bc00;} .color-cyan {color: #3d98e6;} .color-yellow {color: #e8be10;} /* -- Font Sizes -- */ .font-size-11px {font-size: 11px; line-height: 15px;} .font-size-12px {font-size: 12px; line-height: 18px;} .font-size-13px {font-size: 13px; line-height: 18px;} .font-size-14px {font-size: 14px; line-height: 20px;} .font-size-15px {font-size: 15px; line-height: 22px;} .font-size-16px {font-size: 16px; line-height: 24px;} /* -- Line Heights -- */ .line-height-20px {line-height: 20px;} .line-height-28px {line-height: 28px;} .line-height-40px {line-height: 40px;} /* -- Margins -- */ .margin-bottom-0px, #content p.margin-bottom-0px {margin-bottom: 0px;} .margin-bottom-10px,#content p.margin-bottom-10px {margin-bottom: 10px;} .margin-bottom-20px,#content p.margin-bottom-20px {margin-bottom: 20px;} .margin-bottom-30px,#content p.margin-bottom-30px {margin-bottom: 30px;} .margin-bottom-40px,#content p.margin-bottom-40px {margin-bottom: 40px;} .margin-left-10px {margin-left: 10px;} .margin-left-20px {margin-left: 20px;} .margin-left-30px {margin-left: 30px;} .margin-top-10px {margin-top: 10px;} .margin-top-20px {margin-top: 20px;} .margin-right-10px {margin-right: 10px;} .margin-right-20px {margin-right: 20px;} .margin-right-30px {margin-right: 30px;} .margin-right-40px {margin-right: 40px;} /* -- Paddings -- */ .padding-left-10px {padding-left: 10px;} /* -- Widths -- */ .width-25-percent {width: 25%;} .width-50-percent {width: 50%;} .width-33-percent {width: 33.33%;} .width-75-percent {width: 75%;} .width-40-percent {width: 40%;} .width-60-percent {width: 60%;} .width-70-percent {width: 70%;} .width-100-percent {width: 100%;} /* -- Links -- */ a:link, a:visited, a:active{text-decoration: none; color: #00a2f6;} a:hover, a:focus{text-decoration: underline; color: #00a2f6;} a.disable-link {text-decoration: none; color: #666;} .underline a:link, .underline a:visited, .underline a:active{text-decoration: underline;} /* ----------------------------------------------------*/ /* ---- Layout Elements -------------------------------*/ /* ----------------------------------------------------*/ /* -- Top -- */ #top{ background: #fff; border-bottom: 1px solid #ccc;} #header{ height: 85px; width: 940px; margin: 0 auto; position: relative; } /* #uc #top{background: #3b3b3b url(../img/layout/bg-top-160.png) repeat-x;} #uc #header{height: 160px;} */ /* -- Area Shape Logo -- */ #logo, #logo a, #logo a:hover{ display: block; height: 60px; width: 380px;} #logo { background: url(../img/layout/viavi-observer-logo.png) no-repeat; float: left; margin-top: 10px;} #logo h1{ display: none;} /* -- Header Nav -- */ #nav-header{ height: 20px; position:absolute; top: 34px; right: 5px; width: 300px; text-align: right;} #nav-header ul, #nav-header ul li { margin:0; padding:0;} #nav-header ul li { font: bold 12px/20px "roboto", Arial, Helvetica, sans-serif; color: #aaa; letter-spacing: 1px; display:inline; text-transform:uppercase; padding:0 6px 0 6px; border-right: solid 2px #888;} #nav-header ul li.li-last{ border-right: none; padding-right: 0px;} #nav-header a:link, #nav-header a:visited, #nav-header a:active { text-decoration: none; color: #aaa;} #nav-header a:hover, #nav-header a:focus { text-decoration: underline; color: #aaa;} /* -- Tagline -- */ #tagline {float:left; height: 15px; margin: 70px 0 0 20px;} #tageach ul { margin:0;} #tageach li{ font: normal italic 14px/14px "roboto", Arial, Helvetica, sans-serif; color: #aaa; text-shadow: 0px 1px 0px #000; list-style:none; display:none;} /* -- Search Content -- */ #search{ float: right; height: 30px; margin: 60px 0 0 0; width: 300px; background: #222 url(../img/layout/bg-search-box.png) repeat-x; border-bottom: solid 1px #474747; -moz-border-radius: 0px; -webkit-border-radius:0px; border-radius: 0px; } #search input{ border: none; margin: 0; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;} #search input#search-box{ font: normal 12px "roboto", Arial, Helvetica, sans-serif; background: none; float:left; color: #aaa; height: 30px; width: 270px;} #search input#search-btn { background: url(../img/layout/bg-search-btn.png) no-repeat 0 0; cursor: pointer; display: block; font-size: 0px; float:left; height: 30px; width: 30px;} #search input#search-btn:hover {background-position: 0 -30px;} /* -- Flag Drop Down -- */ #flags-dropdown { float:right; margin: 60px 5px 0 0;} .dropdown ul { margin:0;} .dropdown dd { position:relative; } .dropdown dt { background: #2b2b2b url(../img/layout/bg-search-box.png) repeat-x; border-bottom: solid 1px #474747; height:24px; padding:3px 6px; -moz-border-radius: 0px; -webkit-border-radius:0px; border-radius: 0px; } .dropdown dt span { background: url(../img/layout/arrow-flag.png) no-repeat right center; display:block; padding-right:16px; cursor:pointer;} .dropdown dd ul { background:#2b2b2b; border:1px solid #111; position:absolute; left:0px; top:2px; width:auto; min-width:120px; display:none; list-style:none; z-index: 100; -moz-border-radius: 0px; -webkit-border-radius:0px; border-radius: 0px; box-shadow: inset 0 0px 20px #1a1a1a; -moz-box-shadow: inset 0 0px 20px #1a1a1a; -webkit-box-shadow: inset 0 0px 20px #1a1a1a;} .dropdown dd ul li { font:normal 11px/11px "roboto", Arial, Helvetica, sans-serif; list-style: none;} .dropdown dd ul li a { padding:5px; display:block; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out;} .dropdown dd ul li a:hover { background-color:#444; box-shadow: inset 0 0 10px #333; -moz-box-shadow: inset 0 0 10px #333; -webkit-box-shadow: inset 0 0 10px #333;} .dropdown dd ul li img {vertical-align:middle; margin-right:8px; } .dropdown a, .dropdown a:visited { color:#aaa; text-decoration:none;} .dropdown a:hover { color:#fefefe;} /* -- Top Nav -- */ #nav-top { background: #3b3b3b url(../img/layout/bg-nav-top.png); min-height: 40px;} #nav { position: relative; margin: 0 auto; min-height: 38px; width: 938px; border-left: #222 1px solid; border-right: #444 1px solid;} #nav li { float: left; position: relative; height: 38px; text-transform:uppercase; list-style: none; font: bold 14px/38px "roboto", Arial, Helvetica, sans-serif; margin-top: 2px;} #nav li:hover {cursor: pointer;} #nav a { display: block; position: relative; cursor:pointer; color: #fff; text-decoration: none; text-align:center;} #nav li a{ height: 38px; text-shadow: 0px 2px 2px #111; border-left: #444 1px solid; border-right: #222 1px solid; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out;} #nav li a:hover, #nav li a:focus { background: #3b3b3b; text-shadow: 0px 2px 2px #111; box-shadow: inset 0 -15px 30px #1a1a1a; -moz-box-shadow: inset 0 -15px 30px #1a1a1a; -webkit-box-shadow: inset 0 -15px 30px #1a1a1a;} #nav li.on a, #nav li.on a:hover, #nav li.on a:focus { background: #014a75; text-shadow: 0px 2px 2px #111; box-shadow: inset 0 -15px 30px #022a42; -moz-box-shadow: inset 0 -15px 30px #022a42; -webkit-box-shadow: inset 0 -15px 30px #022a42;} #nav li#home a{width: 92px;} #nav li#products a{width: 122px;} #nav li#solutions a{width: 124px;} #nav li#resources a{width: 124px;} #nav li#support a{width: 114px;} #nav li#training a{width: 114px;} #nav li#services a{width: 114px;} #nav li#partners a{width: 116px;} #nav li#about a{width: 116px;} /* -- Sub Nav -- */ #nav-sub { background: #f2f2f2; min-height: 50px; -moz-box-shadow: inset 0px -2px 0px 0px #c6c6c6; -webkit-box-shadow: inset 0px -2px 0px 0px #c6c6c6; box-shadow: inset 0px -2px 0px 0px #c6c6c6;} #sub { font-size: 0; position: relative; margin: 0 auto; min-height: 50px; width: 940px;} #sub li { font: normal 13px/48px "roboto", Arial, Helvetica, sans-serif; display: inline-block; position: relative; border-left: #bababa solid 1px; padding:0; margin: 0 0 0 0; height: 50px; text-transform: uppercase; list-style: none;} #sub a { display: block; position: relative; cursor:pointer; margin: 0; color: #666; text-decoration: none; text-align:center; text-shadow: 0px 1px 0px #fff;} #sub li a{ border: none; border-top: solid 2px #f2f2f2; height: 48px; padding: 0px 20px; display:block; -webkit-transition: background .3s ease-out; -moz-transition: background .3s ease-out; -o-transition: background .3s ease-out; -ms-transition: background .3s ease-out; transition: background .3s ease-out;} #sub li:last-child{ border-right: #bababa solid 1px;} #sub li a:hover, #sub li a:focus, #sub li.on a, #sub li.on a:hover, #sub li.on a:focus { border: none; margin: 0; padding: 0px 20px; border-top: solid 2px #500778; background: #fff; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;} #sub li.on a, #sub li.on a:hover, #sub li.on a:focus { color: #500778;} #sub li.on {background: none;} /* -- Title -- */ #title{ background: #fff /*url(../../viavi/bg-banner-sub.png)*/; border-bottom: 1px solid #ccc; height: 80px;} #current-title{ margin: 0 auto; width: 940px;} #current-title p { font: bold 30px/80px "roboto", Arial, Helvetica, sans-serif; color:#333; text-transform:uppercase; text-shadow: none; margin-left: 0px; letter-spacing: 1px;} /* -- Right Nav -- */ #nav-right {} #subright {margin: 0 0 10px 0;} #subright li { font: normal 13px/28px "roboto", Arial, Helvetica, sans-serif; position: relative; list-style: none;} #subright a { color: #444 !important; display: block; position: relative; cursor:pointer; margin: 5px 10px; text-decoration: none; text-shadow: 0px 1px 0px #fff;} #subright li a{ height: 26px; padding: 0px 10px; -webkit-transition: background .3s ease-out; -moz-transition: background .3s ease-out; -o-transition: background .3s ease-out; -ms-transition: background .3s ease-out; transition: background .3s ease-out;} #subright li a:hover, #subright li a:focus, #subright li.on a, #subright li.on a:hover, #subright li.on a:focus { color: #444; padding: 0px 10px; background: #E5E5E5; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;} #subright li.on a, #subright li.on a:hover, #subright li.on a:focus { color: #444;} #subright li.on {background:url(../img/layout/arrow-nav-sub.gif) no-repeat bottom center;} /* -- Breadcrumbs Nav -- */ #nav-breadcrumbs { background: #e6e6e6 url(../img/layout/bg-breadcrumbs.png); height: 42px;} #breadcrumbs { position: relative; margin: 0 auto; height: 42px; width: 940px; color: #999;} #breadcrumbs li { background: url(../img/layout/arrow-breadcrumb.gif) no-repeat center right; display:inline; position: relative; height: 42px; list-style: none; padding-right: 20px; margin-right: 10px; font: normal 11px/42px "roboto", Arial, Helvetica, sans-serif;} #breadcrumbs li.li-last{background: none;} #breadcrumbs a:link, #breadcrumbs a:visited, #breadcrumbs a:active { text-decoration: none; color: #999;} #breadcrumbs a:hover, #breadcrumbs a:focus { text-decoration: underline; color: #999;} /* -- Footer -- */ #bottom{ background: #3b3b3b url(../img/layout/bg-bottom.png); padding-bottom: 30px;} #footer{ margin: 0 auto; width: 940px; color: #aaa;} #footer a:link, #footer a:visited, #footer a:active { text-decoration: none; color: #aaa;} #footer a:hover, #footer a:focus { text-decoration: underline; color: #aaa;} .footer-column { float: left; min-width: 95px; padding-right: 35px;} #nav-footer{padding: 30px 0;} #nav-footer p{ font: bold 14px/14px "roboto", Arial, Helvetica, sans-serif; margin-bottom: 10px; color: #fff; text-transform: uppercase;} #nav-footer p a:link, #nav-footer p a:visited, #nav-footer p a:active { text-decoration: none; color: #b3b3b3;} #nav-footer p a:hover, #nav-footer p a:focus { text-decoration: underline; color: #fff;} #nav-footer ul, #nav-footer ul li {margin:0; padding:0; list-style: none;} #nav-footer ul li {font:normal 11px/21px "roboto", Arial, Helvetica, sans-serif;} /*#nav-footer ul li a { -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out;}*/ #nav-footer ul li.icon-twitter a { background: url(../img/icons/twitter.png) no-repeat top left; padding-left: 22px; height: 21px; display: inline-block;} #nav-footer ul li.icon-twitter a:hover, #nav-footer ul li.icon-twitter a:focus { background-position: bottom left;} #nav-footer ul li.icon-linkedin a { background: url(../img/icons/linkedin.png) no-repeat top left; padding-left: 22px; height: 21px; display: inline-block;} #nav-footer ul li.icon-linkedin a:hover, #nav-footer ul li.icon-linkedin a:focus { background-position: bottom left;} #nav-footer ul li.icon-youtube a { background: url(../img/icons/youtube.png) no-repeat top left; padding-left: 22px; height: 21px; display: inline-block;} #nav-footer ul li.icon-youtube a:hover, #nav-footer ul li.icon-youtube a:focus { background-position: bottom left;} #nav-footer ul li.icon-rss a { background: url(../img/icons/rss.png) no-repeat top left; padding-left: 22px; height: 21px; display: inline-block;} #nav-footer ul li.icon-rss a:hover, #nav-footer ul li.icon-rss a:focus { background-position: bottom left;} #nav-footer ul li.icon-flag-fr a { background: url(../img/icons/flag-fr.png) no-repeat top left; padding-left: 22px; height: 21px; display: inline-block;} #nav-footer ul li.icon-flag-fr a:hover, #nav-footer ul li.icon-flag-fr a:focus { background-position: bottom left;} #nav-footer ul li.icon-flag-de a { background: url(../img/icons/flag-de.png) no-repeat top left; padding-left: 22px; height: 21px; display: inline-block;} #nav-footer ul li.icon-flag-de a:hover, #nav-footer ul li.icon-flag-de a:focus { background-position: bottom left;} #nav-footer ul li.icon-flag-uk a { background: url(../img/icons/flag-uk.png) no-repeat top left; padding-left: 22px; height: 21px; display: inline-block;} #nav-footer ul li.icon-flag-uk a:hover, #nav-footer ul li.icon-flag-uk a:focus { background-position: bottom left;} #nav-footer ul li.icon-flag-us a { background: url(../img/icons/flag-us.png) no-repeat top left; padding-left: 22px; height: 21px; display: inline-block;} #nav-footer ul li.icon-flag-us a:hover, #nav-footer ul li.icon-flag-us a:focus { background-position: bottom left;} #footer-map { background: url(../img/layout/bg-footer-map.png) no-repeat; float: left; display: block; height: 80px; width: 140px;} #bottom-dark{ background: #000; height: 80px; width: 100%;} #footer-dark{ background: none; height: 80px; margin: 0 auto; padding-top: 0px; width: 940px; color: #b3b3b3;} #footer-dark a:link, #footer-dark a:visited, #footer-dark a:active { text-decoration: none; color: #b3b3b3;} #footer-dark a:hover, #footer-dark a:focus { text-decoration: underline; color: #fff;} #copyright{ float: left; width: 500px;} #copyright p{ font: normal 13px/80px "roboto", Arial, Helvetica, sans-serif; text-transform:uppercase;} #nav-dark{float: right;} #nav-dark ul {margin:0; padding:0;} #nav-dark ul li { font:normal 11px/40px "roboto", Arial, Helvetica, sans-serif; display:inline; margin:0; padding: 0 9px 0 10px; border-right: solid 1px #888;} #nav-dark ul li.li-last{ border-right: none; padding-right: 0px;} /* -- Clear Fix -- */ .clearfix:after { visibility: hidden; display: block; content: ""; clear: both; height: 0;} * html .clearfix {zoom: 1; } /* IE6 */ *:first-child+html .clearfix {zoom: 1; } /* IE7 */ .clearfix {display: block;} .clear {clear:both;} /* -- New Clear Fix -- */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } /* ----------------------------------------------------*/ /* ---- Content Elements ------------------------------*/ /* ----------------------------------------------------*/ #content{float: left; width: 680px; color:#666; font: normal 14px/21px "roboto", Arial, Helvetica, sans-serif;} #content-left{float: left; width: 680px; color:#666; font: normal 14px/21px "roboto", Arial, Helvetica, sans-serif;} #content.home{float: none; width: 860px; margin: 0 auto;} #content.landing-page{float: none; width: 700px; margin: 0 auto;} #content p{margin-bottom:20px; } #content p.p-date {margin-bottom: 0px;} #content.fullwidth{float: none; width: 940px;} #content.fullwidth .column-half{width: 460px; float:left; margin-right: 20px;} #content.fullwidth .column-half-v2{width: 440px; float:left; margin-right: 40px;} #content.fullwidth .column-third{width: 300px; float:left; margin-right: 20px;} #content.fullwidth .column-twothirds{width: 580px; float:left; margin-right: 20px;} #content.fullwidth .column-forth{width: 220px; float:left; margin-right: 20px;} #content.fullwidth .column-line{margin-right: 19px; border-right: #d1d1d1 solid 1px;} #content .column-half, #content.fullwidth #content-left .column-half{width: 320px; float:left; margin-right: 40px;} #content .column-third, #content.fullwidth #content-left .column-third{width: 200px; float:left; margin-right: 40px;} #content .column-forth, #content.fullwidth #content-left .column-forth{width: 150px; float:left; margin-right: 20px;} #content .column-last {margin-right: 0 !important;} #content .column-third.column-line, #content .column-half.column-line{margin-right: 39px; border-right: #d1d1d1 solid 1px;} #content.fullwidth .column-third.column-line{margin-right: 19px; border-right: #d1d1d1 solid 1px;} .column-span-3 {/*just for dw referance*/} #content.fullwidth .column-forth.column-span-3 {width: 700px;} #content.fullwidth #tabs-subs .column-demo{width: 450px; float:left; margin-right: 40px;} #content.fullwidth #tabs-subs .column-demo-right{width: 380px; float:left;} #content.fullwidth #tabs-subs .column-half{width: 428px; float:left; margin-right: 20px;} #content.fullwidth #tabs-subs .column-third{width: 278px; float:left; margin-right: 20px;} #content.fullwidth #tabs-subs .tabs-content-left .column-half{width: 290px; float: left; margin-right: 40px;} #content.fullwidth #newsletter-box .column-half{width: 280px; float:left; margin-right: 60px;} #column-left { float:left; width: 540px; margin-right: 40px;} #column-right { float:right; width: 300px;} /* -- Containers -- */ #middle{background: none;} #middle.home{background: url(../img/layout/bg-middle-home.png);} #middle.newsletter{background: #f2f2f2 url(../img/pics/newsletter/bg-newsletter.gif);} #container{margin: 0 auto; padding: 40px 0 40px 0; width: 940px;} #container.home{padding: 0 0 30px 0;} /* -- Content Right -- */ #content-right { font: normal 13px/18px "roboto", Arial, Helvetica, sans-serif; float:right; width: 220px; color:#666;} .shadow-box-bg { background: none; height: 20px; margin-bottom: 10px;} .shadow-box h3{ text-shadow: 0px 1px 0px #fff; line-height: 20px; padding: 10px; min-height: 20px; text-align:center; background: #c6c6c6; border-bottom: none; margin-bottom: 20px; -moz-box-shadow: 0px 0 0px #d1d1d1; -webkit-box-shadow: 0px 0 0px #d1d1d1; box-shadow: 0px 0 0px #d1d1d1;} .shadow-box p{margin: 0 15px 20px 20px;} /* -- Pop Up -- */ body#popup, body#popup-video {background:#fff;} body#popup #content, body#popup-video #content{float: none; width: auto;} body#popup #content{padding: 10px 10px 0 10px;} /* ----------------------------------------------------*/ /* ---- Sections --------------------------------------*/ /* ----------------------------------------------------*/ /* -- Homepage -- */ #home-banners{ height: 400px; overflow: hidden; position:relative;} #banner-premium {background: url(../img/pics/homepage/banner-premium.png) no-repeat center;} #banner-mq-2014 {background: url(../img/pics/homepage/banner-mq-2014-v3.png) no-repeat center;} #banner-training {background: url(../img/pics/homepage/banner-training.jpg) no-repeat center;} #banner-webinar-wireshark {background: url(../img/pics/homepage/banner-webinar-wireshark.png) no-repeat center;} #banner-sotn-2014 {background: url(../img/pics/homepage/banner-sotn-2014.png) no-repeat center;} #banner-gigastor-more {background: url(../img/pics/homepage/banner-gigastor-more.png) no-repeat center;} #banner-network-world {background: url(../img/pics/homepage/banner-network-world.jpg) no-repeat center;} #banner-observer-17 {background: url(../img/pics/homepage/banner-observer-17.png) no-repeat center;} #banner-shark-week {background: url(../img/pics/homepage/banner-shark-week-v2.png) no-repeat center;} #banner-top-5-it-resolutions {background: url(../img/pics/homepage/banner-top-5-it-resolutions.png) no-repeat center;} #banner-it-hero-jacksonville{background: url(../img/pics/homepage/banner-it-hero-jacksonville.png) no-repeat center;} #banner-it-exes {background: url(../img/pics/homepage/banner-it-exes.png) no-repeat center;} #banner-network-impossible {background: url(../img/pics/homepage/banner-network-impossible.png) no-repeat center;} #banner-mq-2015 {background: url(../img/pics/homepage/banner-mq-2015.png) no-repeat center;} #banner-sotn-2015 {background: url(../img/pics/homepage/banner-sotn-2015.png) no-repeat center;} #banner-it-hero-eglin{background: url(../img/pics/homepage/banner-it-hero-eglin.png) no-repeat center;} #banner-catch-a-hacker{background: url(../img/pics/homepage/banner-catch-a-hacker.png) no-repeat center;} #banner-ciscolive-2015 {background: url(../img/pics/homepage/banner-ciscolive-2015.png) no-repeat center;} #banner-sotn-2014 h1{ font: bold 31px/31px "roboto", Arial, Helvetica, sans-serif; color:#3e3e3e; margin: 100px 0 20px 80px; text-transform:uppercase; text-shadow: 0px 1px 0px #fff;} #banner-sotn-2014 p{ font: normal 17px/24px "roboto", Arial, Helvetica, sans-serif; color:#3d3d3d; margin: 0 0 20px 80px; text-shadow: 0px 1px 0px #fff;} #banner-sotn-2014 a:link, #banner-sotn-2014 a:visited, #banner-sotn-2014 a:active{text-decoration: none; color: #500778;} #banner-sotn-2014 a:hover, #banner-sotn-2014 a:focus{text-decoration: underline; color: #500778;} #banner-sotn-2015 h1{ font: bold 28px/30px "roboto", Arial, Helvetica, sans-serif; color:#3e3e3e; margin: 80px 0 20px 80px; text-transform:uppercase; text-shadow: 0px 1px 0px #fff;} #banner-sotn-2015 h1 span.year{ font: bold 24px/30px "roboto", Arial, Helvetica, sans-serif;} #banner-sotn-2015 p{ font: normal 17px/22px "roboto", Arial, Helvetica, sans-serif; color:#3d3d3d; margin: 0 0 20px 80px; text-shadow: 0px 1px 0px #fff;} #banner-sotn-2015 p a{ background: none; padding: 2px 6px; display:inline-block;} #banner-sotn-2015 p a:hover, #banner-sotn-2015 p a:focus{background: #99c3c8;} #banner-sotn-2015 a:link, #banner-sotn-2015 a:visited, #banner-sotn-2015 a:active{ text-decoration: underline; color: #3e3e3e; text-shadow: none; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; } #banner-sotn-2015 a:hover, #banner-sotn-2015 a:focus{text-decoration: none; color: #3e3e3e; } #btn-jdsu, #btn-jdsu a {width: 162px; height: 30px; display:block;} #btn-jdsu a{background: url(../img/pics/homepage/btn-jdsu.png) no-repeat 0 0; margin: 280px 0 0 390px;} #btn-jdsu a:hover { background-position: -162px 0;} #btn-premium, #btn-premium a {width: 153px; height: 32px; display:block;} #btn-premium a{background: url(../img/pics/homepage/btn-premium.png) no-repeat 0 0; margin: 218px 0 0 272px;} #btn-premium a:hover { background-position: -153px 0;} #btn-mq-2014, #btn-mq-2014 a {width: 140px; height: 31px; display:block;} #btn-mq-2014 a{background: url(../img/pics/homepage/btn-mq-2014-v3.png) no-repeat 0 0; margin: 240px 0 0 100px;} #btn-mq-2014 a:hover { background-position: -140px 0;} #btn-training, #btn-training a {width: 186px; height: 42px; display:block;} #btn-training a{background: url(../img/pics/homepage/btn-training.png) no-repeat 0 0; margin: 332px 0 0 602px;} #btn-training a:hover { background-position: -186px 0;} #btn-sotn-2014, #btn-sotn-2014 a {width: 133px; height: 30px; display:block;} #btn-sotn-2014 a{background: url(../img/pics/homepage/btn-sotn-2014.png) no-repeat 0 0; margin: 30px 0 0 80px;} #btn-sotn-2014 a:hover { background-position: -133px 0;} #btn-webinar-wireshark, #btn-webinar-wireshark a {width: 125px; height: 30px; display:block;} #btn-webinar-wireshark a{background: url(../img/pics/homepage/btn-webinar-wireshark.png) no-repeat 0 0; margin: 285px 0 0 290px;} #btn-webinar-wireshark a:hover { background-position: -125px 0;} #btn-gigastor-more, #btn-gigastor-more a {width: 140px; height: 28px; display:block;} #btn-gigastor-more a{background: url(../img/pics/homepage/btn-gigastor-more.png) no-repeat 0 0; margin: 275px 0 0 113px;} #btn-gigastor-more a:hover { background-position: -140px 0;} #btn-network-world, #btn-network-world a {width: 153px; height: 32px; display:block;} #btn-network-world a{background: url(../img/pics/homepage/btn-network-world.png) no-repeat 0 0; margin: 250px 0 0 210px;} #btn-network-world a:hover { background-position: -153px 0;} #btn-observer-17, #btn-observer-17 a {width: 154px; height: 32px; display:block;} #btn-observer-17 a{background: url(../img/pics/homepage/btn-observer-17.png) no-repeat 0 0; margin: 270px 0 0 200px;} #btn-observer-17 a:hover { background-position: -154px 0;} #btn-shark-week, #btn-shark-week a {width: 164px; height: 38px; display:block;} #btn-shark-week a{background: url(../img/pics/homepage/btn-shark-week-v2.png) no-repeat 0 0; margin: 270px 0 0 376px;} #btn-shark-week a:hover { background-position: -164px 0;} #btn-top-5-it-resolutions, #btn-top-5-it-resolutions a {width: 150px; height: 34px; display:block;} #btn-top-5-it-resolutions a{background: url(../img/pics/homepage/btn-top-5-it-resolutions.png) no-repeat 0 0; margin: 285px 0 0 75px;} #btn-top-5-it-resolutions a:hover { background-position: -150px 0;} #btn-it-hero-jacksonville, #btn-it-hero-jacksonville a {width: 156px; height: 32px; display:block;} #btn-it-hero-jacksonville a{background: url(../img/pics/homepage/btn-it-hero-jacksonville.png) no-repeat 0 0; margin: 310px 0 0 550px;} #btn-it-hero-jacksonville a:hover { background-position: -156px 0;} #btn-it-exes, #btn-it-exes a {width: 216px; height: 78px; display:block;} #btn-it-exes a{background: url(../img/pics/homepage/btn-it-exes.png) no-repeat 0 0; margin: 280px 0 0 500px;} #btn-it-exes a:hover { background-position: -216px 0;} #btn-network-impossible, #btn-network-impossible a {width: 288px; height: 56px; display:block;} #btn-network-impossible a{background: url(../img/pics/homepage/btn-network-impossible.png) no-repeat 0 0; margin: 295px 0 0 325px;} #btn-network-impossible a:hover { background-position: -288px 0;} #btn-mq-2015, #btn-mq-2015 a {width: 174px; height: 32px; display:block;} #btn-mq-2015 a{background: url(../img/pics/homepage/btn-mq-2015.png) no-repeat 0 0; margin: 305px 0 0 540px;} #btn-mq-2015 a:hover { background-position: -174px 0;} #btn-sotn-2015, #btn-sotn-2015 a {width: 133px; height: 30px; display:block;} #btn-sotn-2015 a{background: url(../img/pics/homepage/btn-sotn-2015.png) no-repeat 0 0; margin: 20px 0 0 80px;} #btn-sotn-2015 a:hover { background-position: -133px 0;} #btn-it-hero-eglin, #btn-it-hero-eglin a {width: 156px; height: 32px; display:block;} #btn-it-hero-eglin a{background: url(../img/pics/homepage/btn-it-hero-eglin.png) no-repeat 0 0; margin: 310px 0 0 550px;} #btn-it-hero-eglin a:hover { background-position: -156px 0;} #btn-catch-a-hacker, #btn-catch-a-hacker a {width: 140px; height: 29px; display:block;} #btn-catch-a-hacker a{background: url(../img/pics/homepage/btn-catch-a-hacker.png) no-repeat 0 0; margin: 320px 0 0 380px;} #btn-catch-a-hacker a:hover { background-position: -140px 0;} #btn-ciscolive-2015, #btn-ciscolive-2015 a {width: 140px; height: 28px; display:block;} #btn-ciscolive-2015 a{background: transparent url(../img/pics/homepage/btn-ciscolive-2015.png) no-repeat 0 0; margin: 225px 0 0 100px;} #btn-ciscolive-2015 a:hover { background-position: -140px 0;} #home-features{ background: url(../img/layout/bg-home-features.png) repeat-x; height:280px;} #home-features-slides{ width: 940px; height: 240px; margin: 0 auto;} #home-features-shadow{ background: url(../img/layout/bg-home-features-shadow.png) no-repeat; width: 860px; height: 20px; margin: 0 auto;} .home-feature-box { background: #f8f8f8 url(../img/layout/bg-feature.png) no-repeat bottom right; width: 230px; min-height: 150px; padding: 10px 10px 10px 20px; border: #fff solid 1px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: 0 0 0 1px #d1d1d1; -moz-box-shadow: 0 0 0 1px #d1d1d1; -webkit-box-shadow: 0 0 0 1px #d1d1d1; text-shadow: 0px 1px 0px #fff;} .home-feature-box a{ text-decoration: none;} .home-feature-box a:hover{} .home-feature-box p{color:#666; font: normal 15px/21px "roboto", Arial, Helvetica, sans-serif;} .home-feature-box p:last-child { background: #fefefe; color:#3d98e6; border: #ccc solid 2px; float: right; display: inline-block; padding: 2px 10px; position:absolute; bottom:26px; right: 14px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;} .home-feature-box:hover p{color:#500778;} #home-left { width: 560px; float:left; margin-right: 40px;} #home-box-tabs, #home-box-video, .shadow-box{ background: #f2f2f2; padding-bottom: 10px; margin-bottom: 1px; border: none; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: 0 0 0 0 #d1d1d1; -moz-box-shadow: 0 0 0 0 #d1d1d1; -webkit-box-shadow: 0 0 0 0 #d1d1d1;} #home-box-tabs {width: 558px; min-height: 238px;} #home-box-tabs-bg { background: url(../img/layout/bg-shadow-tabs.png) no-repeat; height: 20px; margin-bottom: 20px;} #home-box-video {width: 258px; min-height: 238px;} #home-box-video h3{ line-height: 40px; padding: 0 15px; text-shadow: 0px 1px 0px #fff; border-bottom: 1px solid #d1d1d1; box-shadow: 0px 1px 0px #fff; -moz-box-shadow: 0px 1px 0px #fff; -webkit-box-shadow: 0px 1px 0px #fff;} #home-box-video p{ font: bold 14px/18px "roboto", Arial, Helvetica, sans-serif; margin: 0 15px 10px 15px; color: #555; text-align:center;} #home-box-video-bg { background: url(../img/layout/bg-shadow-video-home.png) no-repeat; height: 20px; margin-bottom: 20px;} #home-video, #home-video span.hover{ width: 230px; height: 150px; display:block;} #home-video { background: url(../img/pics/homepage/video-o17-thumb.jpg) 0 0 no-repeat; margin: 15px auto; position:relative;} #home-video * {display: none;} #home-video span.hover { position: absolute; top: 0; left: 0; background: url(../img/pics/homepage/video-o17-thumb-over.jpg) no-repeat;} #tabs-home .list-wrap {padding: 20px; margin-top: 10px;} #tabs-home .nav-tabs { margin: 0; height: 40px; border-bottom: 1px solid #d1d1d1; -moz-box-shadow: 0px 1px 0px #fff; -webkit-box-shadow: 0px 1px 0px #fff; box-shadow: 0px 1px 0px #fff;} #tabs-home .nav-tabs li{ list-style: none; margin: 0; font: bold 16px/40px "roboto", Arial, Helvetica, sans-serif; text-shadow: 0px 1px 0px #fff; float:left; border-right: 1px solid #d1d1d1; -moz-box-shadow: 1px 0px 0px #fff; -webkit-box-shadow: 1px 0px 0px #fff; box-shadow: 1px 0px 0px #fff;} #tabs-home .nav-tabs li.li-last { border: none; border-right: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;} #tabs-home .nav-tabs li a { background: url(../img/layout/bg-h3-shadow-box.png) repeat-x bottom; background-position: 0px 40px; display: block; padding: 0 20px; color: #555; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out;} #tabs-home .nav-tabs li a:hover, #tabs-home .nav-tabs li a:focus, #tabs-home .nav-tabs li a.current, #tabs-home .nav-tabs li a.current:hover { background-position: 0px 0px; text-decoration:none; color: #500778; } #home-box-case-studies{ background: #e8e8e8; padding: 20px; border: #dadada solid 1px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;} /* -- Content Tabs -- */ .list-wrap-height-auto { height:auto !important; /*overide for accordion */} #tabs-subs .list-wrap { color: #555; background: #f2f2f2; border: none; border-bottom: 2px solid #c6c6c6; margin-top: 20px; padding: 30px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;} #tabs-subs .nav-tabs { background: #dedede url(../img/layout/bg-tabs.png) repeat-x bottom; margin: 0px; padding: 1px; min-height: 38px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;} #tabs-subs .nav-tabs li{ list-style: none; font: bold 14px/38px "roboto", Arial, Helvetica, sans-serif; text-shadow: 0px 1px 0px #fff; float:left; border-right: 1px solid #ccc; -moz-box-shadow: 1px 0px 0px #eee; -webkit-box-shadow: 1px 0px 0px #eee; box-shadow: 1px 0px 0px #eee;} #tabs-subs .nav-tabs li.li-last { border: none; border-right: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;} #tabs-subs .nav-tabs li a { display: block; padding: 0 12px; color: #555;} #tabs-subs .nav-tabs li a:hover, #tabs-subs .nav-tabs li a:focus, #tabs-subs .nav-tabs li a.current, #tabs-subs .nav-tabs li a.current:hover { background: #fefefe url(../img/layout/bg-tabs-over.png) repeat-x bottom; text-decoration:none; color: #500778;} .tabs-content-left{float: left; width: 620px;} .tabs-content-left .solutions-box {padding: 30px 30px 10px 30px;} .tabs-content-right {float:right;width: 220px;} .tabs-content-right h3{ color: #555; text-shadow: 0px 1px 0px #fff; line-height: 30px; padding: 10px 10px 0px 20px; min-height: 20px; border-top: 1px solid #d7d7d7;} .tabs-content-right h3.h3-no-top-border{ border-top: none; margin-top:0;} .tabs-content-right p{ margin: 0 20px 20px 20px; font-size: 13px; line-height: 19px;} .tabs-content-right ul { margin: 0 20px 20px 20px; } .tabs-content-right ul li { font: normal 13px/16px "roboto", Arial, Helvetica, sans-serif; margin-bottom: 6px; list-style:none;} /* -- Products -- */ .products-box { color: #666; padding: 30px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -moz-box-shadow: 0px 1px 4px #bbb; -webkit-box-shadow: 0px 1px 4px #bbb; box-shadow: 0px 1px 4px #bbb; /* -- http://www.colorzilla.com/gradient-editor/ --*/ background: #f3f3f3; /* Old browsers */ background: -webkit-linear-gradient(top, #fafafa 0%, #f3f3f3 100%); /* Chrome10+,Safari5.1+ */ background: -moz-linear-gradient(top, #fafafa 0%, #f3f3f3 100%); /* FF3.6+ */ background: -ms-linear-gradient(top, #fafafa 0%, #f3f3f3 100%); /* IE10+ */ background: -o-linear-gradient(top, #fafafa 0%, #f3f3f3 100%); /* Opera 11.10+ */ background: linear-gradient(top, #fafafa 0%, #f3f3f3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#f3f3f3',GradientType=0 ); /* IE6-9 */} .product-content { display: table;} .product-img, .product-txt, .product-btn{ display: table-cell; vertical-align: middle;} .product-img{ width: 150px; padding-right: 30px;} .product-txt{ width: 520px; padding-right: 40px;} .product-btn{ width: 140px;} .product-banner { min-height: 130px; color: #333; background: #efefef url(../img/layout/bg-product-banner.gif); border-top: solid 2px #f5f5f5; margin-bottom: 30px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -moz-box-shadow: 0px 1px 4px #bbb; -webkit-box-shadow: 0px 1px 4px #bbb; box-shadow: 0px 1px 4px #bbb; text-shadow: 0px 1px 0px #fff;} .product-banner-img, .product-banner-txt, .product-banner-btn{ float: left;} .product-banner-img{ width: 300px;} .product-banner-txt{ width: 320px; margin: 30px 20px 0 20px;} .product-banner-txt p{ font: normal 16px/22px "roboto", Arial, Helvetica, sans-serif;} .product-banner-btn{ width: 190px; margin-top: 30px} #product-overview-img { float: right; margin-left: 30px; border-left: 1px solid #d1d1d1;} #product-overview-img img{ padding-left: 30px; border-left: 1px solid #fff;} .products-right-box { background: #fff; margin-bottom: 20px; padding-bottom: 1px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -moz-box-shadow: 0 0 5px #ddd; -webkit-box-shadow: 0 0 5px #ddd; box-shadow: 0 0 5px #ddd;} /* -- GigaStor Options -- */ .options-content { display: table;} .options-img, .options-txt{ display: table-cell; vertical-align: middle;} .options-img{ width: 180px; padding: 5px 40px 5px 0; position:relative;} .options-label{ position:absolute; bottom: 2px;left: 0; text-align:center; width: 180px; color: #333; font-size: 15px; } .options-label-5u{ position:absolute; bottom: 15px;left: 0; text-align:center; width: 180px; color: #333; font-size: 15px; } .options-txt{ width: 610px;} .options-icon { float: right; margin-top: 10px;} .options-icon a { color: #888;} .options-icon p { font-size:12px; line-height: 28px;} .options-icon img { margin-left: 5px; margin-top: -5px; float:right;} /* -- GigaStor Calculator -- */ .calculator-imgs {text-align: center;} .calculator-img-2U { padding-top: 164px;} .calculator-img-5U { padding-top: 191px;} .calculator-img-one { padding-top: 0px;} .calculator-img-two { padding-top: 115px;} .calculator-img-three { padding-top: 20px;} /* -- Solutions -- */ .solutions-box { color: #666; padding: 30px; margin-bottom: 30px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -moz-box-shadow: 0px 1px 4px #bbb; -webkit-box-shadow: 0px 1px 4px #bbb; box-shadow: 0px 1px 4px #bbb; /* -- http://www.colorzilla.com/gradient-editor/ --*/ background: #eeeeee; /* Old browsers */ background: -webkit-linear-gradient(top, #fafafa 0%, #eeeeee 100%); /* Chrome10+,Safari5.1+ */ background: -moz-linear-gradient(top, #fafafa 0%, #eeeeee 100%); /* FF3.6+ */ background: -ms-linear-gradient(top, #fafafa 0%, #eeeeee 100%); /* IE10+ */ background: -o-linear-gradient(top, #fafafa 0%, #eeeeee 100%); /* Opera 11.10+ */ background: linear-gradient(top, #fafafa 0%, #eeeeee 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */} #solutions-overview { margin-top: 30px;} #solutions-overview .solutions-box p{ margin-bottom: 0px;} #solutions-overview .solutions-box img {float:left; margin: 20px 30px 30px 0;} .solutions-icon { border-right: #d1d1d1 1px solid; box-shadow: 1px 0 0 0 #fff; -moz-box-shadow: 1px 0 0 0 #fff; -webkit-box-shadow: 1px 0 0 0 #fff; float:left; min-height:60px; margin-right: 30px; margin-bottom: 15px;} .solution-title { background: url(../img/layout/bg-h-solution.gif) repeat-x center; margin: 0 10px 20px 10px;} .solution-title span {margin-left: 10px; padding: 0 10px; background-color: #fff;} .solutions-content-left{float: left; width: 620px;} .solutions-content-right {float:right; width: 220px;} .solutions-content-right ul { margin: 0 0 14px 0; padding-bottom: 8px; border-bottom: 1px solid #d1d1d1; -moz-box-shadow: 0px 1px 0px #fff; -webkit-box-shadow: 0px 1px 0px #fff; box-shadow: 0px 1px 0px #fff;} .solutions-content-right ul li { font: normal 12px/16px "roboto", Arial, Helvetica, sans-serif; margin-bottom: 8px; list-style:none;} .solutions-right-box { background-color: #eaeaea; padding: 20px; margin-bottom: 20px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;} .solutions-box .solutions-right-box h3{ font: normal 16px/24px "roboto", Arial, Helvetica, sans-serif; color: #444; margin-bottom: 4px; text-shadow: 0px 1px 0px #fff; } .solutions-box .solutions-box p{ font-size: 13px; line-height: 19px;} .solutions-box h2{font: bold 23px/34px "roboto", Arial, Helvetica, sans-serif; color:#555; margin-bottom: 20px;} .solutions-box h2.o16, .solutions-box h2.margin-bottom-0px{margin-bottom: 0px;} .solutions-box h3{font: bold 18px/26px "roboto", Arial, Helvetica, sans-serif; color:#666;} .solutions-box .solutions-box h3{color:#444; margin-bottom: 20px;} /* -- Industries -- */ #industries .list-wrap { /*color: #555; background: #f5f5f5; border: 1px solid #e5e5e5; margin-top: 20px; padding: 30px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;*/} #industries .nav-tabs { background: url(../img/layout/bg-tabs-over.png) repeat-x bottom; margin: 0 0 20px 0; padding: 0 1px; height: 38px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -moz-box-shadow: 0px 1px 4px #bbb; -webkit-box-shadow: 0px 1px 4px #bbb; box-shadow: 0px 1px 4px #bbb;} #industries .nav-tabs li{ list-style: none; font: bold 14px/38px "roboto", Arial, Helvetica, sans-serif; text-shadow: 0px 1px 0px #fff; float:left; border-right: 1px solid #ccc; -moz-box-shadow: 1px 0px 0px #fefefe; -webkit-box-shadow: 1px 0px 0px #fefefe; box-shadow: 1px 0px 0px #fefefe;} #industries .nav-tabs li a { display: block; padding: 0 12px; color: #555;} #industries .nav-tabs li a:hover, #industries .nav-tabs li a:focus, #industries .nav-tabs li a.current, #industries .nav-tabs li a.current:hover { background: url(../img/layout/bg-tabs.png) repeat-x bottom; text-decoration:none; color: #500778;} /* -- Services -- */ #serviced {} .services-banner-text { width: 740px; display: block; float:left;} .services-banner-sub { width: 690px; display: block; float:left; padding-left: 10px;} .services-content { display: table; margin-bottom: 30px; padding: 0 20px;} .services-img, .services-txt, .services-btn{ display: table-cell; vertical-align: middle;} .services-img{ width: 130px;} .services-txt{ width: 630px; padding-right: 40px;} .services-btn{ width: 120px; text-align:center;} #serviced a:link, #serviced a:visited, #serviced a:active{text-decoration: none; color: #3d98e6;} #serviced a:hover, #serviced a:focus{text-decoration: none; color: #500778;} #serviced .services-btn a:link, #serviced .services-btn a:visited, #serviced .services-btn a:active{text-decoration: none; color: #3d98e6;} #serviced .services-btn a:hover, #serviced .services-btn a:focus{text-decoration: none; color: #999;} #serviced h1{font: normal 32px/36px "roboto", Arial, Helvetica, sans-serif; color:#444; margin-bottom: 10px; padding: 0 0 5px 0; border-bottom: #ccc solid 1px;} #serviced h2{font: normal 24px/32px "roboto", Arial, Helvetica, sans-serif; color:#444;} #serviced h2 a:link, #serviced h2 a:visited, #serviced h2 a:active{text-decoration: none; color: #3d98e6;} #serviced h2 a:hover, #serviced h2 a:focus{text-decoration: underline; color: #500778;} #serviced h3{font: bold 18px/28px "roboto", Arial, Helvetica, sans-serif; color:#777; margin-bottom: 5px;} #serviced h4{font: normal 17px/26px "roboto", Arial, Helvetica, sans-serif; color:#444; margin-bottom: 10px;} .s-icon-classroom {padding: 6px 0px 4px 40px; background: url(../img/pics/services/icon-classroom.png) no-repeat center left;} .s-icon-online {padding: 6px 0px 4px 40px; background: url(../img/pics/services/icon-online.png) no-repeat center left;} .s-icon-custom {padding: 6px 0px 4px 40px; background: url(../img/pics/services/icon-custom.png) no-repeat center left;} .training-header { background-color: #fff; line-height: 24px; height: 24px; padding: 6px 0px 6px 0px; text-align:center; margin-bottom: 20px !important; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;} /*#serviced p {font-size: 16px; line-height: 24px;}*/ #services-banner { padding: 0 20px;} #services-banner p{font-size: 16px; line-height: 26px; color:#777;} #serviced .services-btn p ,#serviced .brochure-icon p{font-size: 12px; line-height: 18px; margin: 0; padding-top: 5px;} #serviced .brochure-icon p{ line-height: 12px; padding: 3px;} .services-link .services-arrow { background: url(../img/pics/services/overview-arrow.png); display: block; width: 50px; height: 36px; margin: 0 auto;} .services-link:hover .services-arrow { background-position: -50px 0;} /*.services-arrow { background: url(../img/pics/services/overview-arrow.png); display: block; width: 50px; height: 36px; margin: 0 auto;} .services-arrow:hover { background-position: -50px 0;}*/ .brochure-icon { float: right; text-align:center; text-transform:uppercase; } .services-box, .training-box-v2 { background-color: #f2f2f2; padding: 30px; margin-bottom: 20px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -moz-box-shadow: 0px 2px 0px #c6c6c6; -webkit-box-shadow: 0px 2px 01px #c6c6c6; box-shadow: 0px 2px 0px #c6c6c6;} .training-box-v2 { padding: 20px; min-height: 165px;} .services-box-right { background-color: #f2f2f2; padding-top: 20px; margin-bottom: 20px; border: none; -moz-box-shadow: 0px 2px 0px #c6c6c6; -webkit-box-shadow: 0px 2px 0px #c6c6c6; box-shadow: 0px 2px 0px #c6c6c6;} #serviced .shadow-box h3{ font: bold 16px/24px "roboto", Arial, Helvetica, sans-serif; color:#444; } #serviced .services-box-right h4 { text-align:center; text-shadow: 0px 1px 0px #fff; color: #3d98e6; font: normal 18px/22px "roboto", Arial, Helvetica, sans-serif; padding-bottom: 10px; margin: 0 10px 20px 10px; border-bottom: 2px solid #bbb; } /* -- Resources -- */ #resources-banner { background: url(../img/pics/resources/resources-banner.png) no-repeat; display: block; height: 190px; padding: 30px 40px; margin-bottom: 30px;} .resources-banner-txt { float: right; width: 470px; margin: 20px;} .resources-box { box-shadow: 0 2px 0 0 #c6c6c6; -moz-box-shadow: 0 2px 0 0 #c6c6c6; -webkit-box-shadow: 0 2px 0 0 #c6c6c6; margin-bottom: 60px;} #resourced a:link, #resourced a:visited, #resourced a:active{text-decoration: none; color: #3d98e6;} #resourced a:hover, #resourced a:focus{text-decoration: none; color: #500778;} #resourced p { margin-bottom: 10px;} #resourced h2{font: normal 20px/28px "roboto", Arial, Helvetica, sans-serif; color:#333;} #resourced h2 a:link, #resourced h2 a:visited, #resourced h2 a:active{text-decoration: none; color: #333;} #resourced h2 a:hover, #resourced h2 a:focus{text-decoration: underline; color: #333;} .pc-banner h1{font: bold 24px/28px "roboto", Arial, Helvetica, sans-serif; color:#333; margin-bottom: 10px;} .pc-banner-white {color: #fff;} .pc-banner-white h1{font: bold 24px/28px "roboto", Arial, Helvetica, sans-serif; color: #fff; margin-bottom: 10px;} /* -- Features Subpages -- */ .resource-img { float: left; margin-right: 30px;} .wrap-pc { padding: 20px 30px; margin-bottom: 30px; border-bottom: 1px solid #d1d1d1} .carousel-pc > div {display: block; float: left; position:relative; } .features-sub { position:relative;} .features-sub .feature-pc { font: normal 14px/21px "roboto", Arial, Helvetica, sans-serif; float:left; width: 400px; height: 135px; padding: 0 20px;} .features-sub p { margin-bottom: 10px;} .features-sub p:last-child { margin-bottom: 0px;} .features-sub .prev, .features-sub .next {top: 50px;} .features-sub .prev, .features-sub .next { width:25px; height:25px; display:block; text-indent:-999em; background: transparent url(../img/carousel/arrows-features-sub.png) no-repeat 0 0; position:absolute;} .features-sub .prev {left:-25px;} .features-sub .next {background-position: -25px 0; right:-25px;} .features-sub .prev:hover {background-position: 0 -25px;} .features-sub .next:hover {background-position: -25px -25px;} .features-sub .pager {margin:0 auto; text-align: center;display: none;} .features-sub .pager a { margin: 0 5px 0 0;text-decoration: none; display:inline-block; width:8px; height:8px; text-indent:-999em; overflow:hidden; background: transparent url(../img/carousel/controls.png) no-repeat -2px -32px;} .features-sub .pager a.selected { background: transparent url(../img/carousel/controls.png) no-repeat -12px -32px;} #pc-wp img.align-left { margin: 0 30px 20px 15px} .resource-feature{ background: none; color: #555; font-size: 14px; line-height: 20px; width: 230px; min-height: 120px; padding: 0px; float: left; margin: 0 30px;} .resource-feature p{ margin-bottom: 10px;} .resource-feature p a{letter-spacing: .03em;} .resources-box h1{ font: normal 28px/28px "roboto", Arial, Helvetica, sans-serif; color:#444; border-bottom: 1px solid #d1d1d1; padding-bottom: 14px; margin-bottom: 20px; -moz-box-shadow: 0px 1px 0px #fff; -webkit-box-shadow: 0px 1px 0px #fff; box-shadow: 0px 1px 0px #fff;} #resourced h2.h2-overview{font: bold italic 16px/24px "roboto", Arial, Helvetica, sans-serif; color:#444;} #resourced .wrap-pc h3{font: normal 18px/24px "roboto", Arial, Helvetica, sans-serif; color:#444;} #resourced .wrap-pc h3 a:link,#resourced .wrap-pc h3 a:visited,#resourced .wrap-pc h3 a:active{text-decoration: none; color: #444;} #resourced .wrap-pc h3 a:hover,#resourced .wrap-pc h3 a:focus{text-decoration: underline; color: #444;} /* -- IT Briefs -- */ #it-banner { background: url(../img/pics/resources/it-banner.png) no-repeat; display: block; height: 115px; padding: 30px 40px; margin-bottom: 40px;} .it-banner-txt { float: left; width: 310px;} /* -- White Papers -- */ #wp-banner { background: url(../img/pics/resources/wp-banner.png) no-repeat; display: block; height: 115px; padding: 30px 40px; margin-bottom: 40px;} .wp-banner-txt { float: left; width: 400px;} #papers a:link, #papers a:visited, #papers a:active{text-decoration: none; color: #3d98e6;} #papers a:hover, #papers a:focus{text-decoration: none; color: #500778;} #papers p { margin-bottom: 10px;} #papers h3{font: normal 20px/28px "roboto", Arial, Helvetica, sans-serif; color:#333;} #papers h3 a:link, #papers h3 a:visited, #papers h3 a:active{text-decoration: none; color: #333;} #papers h3 a:hover, #papers h3 a:focus{text-decoration: underline; color: #333;} .white-paper{ float: right; width: 200px; margin: 0 0 10px 40px; position:relative;} .white-paper:after{clear: both;} .white-paper img {} .white-paper a.btn-blue { position:absolute; top: 50px; left: 60px;} .accordion-simple .white-paper{ float: left; width: 110px; margin: 0 40px 10px 0; position:relative;} .resource-feature.wp-feature{ width: 270px; min-height: 90px; margin: 10px 30px 10px 0;} .resource-feature.wp-feature img{ float: left; margin-right: 20px;} .resource-feature.wp-feature:last-child{ margin-right: 0;} /* -- Case Studies -- */ #cs-banner { background: url(../img/pics/resources/cs-banner.png) no-repeat; display: block; height: 115px; padding: 30px 40px; margin-bottom: 40px;} .cs-banner-txt { float: left; width: 310px;} #cases a:link, #cases a:visited, #cases a:active{text-decoration: none; color: #666;} #cases a:hover, #cases a:focus{text-decoration: none; color: #500778;} .case-feature{ background: #eee; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; font-size: 13px; line-height: 18px; width: 260px; min-height: 120px; padding: 10px 20px; float: left; margin-right: 20px; margin-bottom: 20px;} #content .case-feature p{ margin-bottom: 5px;} .case-study-thumb{ float: left; width: 145px; text-align:center; margin: 5px 40px 10px 0;} .case-last{margin-right: 0px;} .case-arrow{ background: url(../img/layout/arrow-case.png) no-repeat; width: 24px; height: 24px; float: right; margin-top: 20px; margin-left: 20px;} .case-product{width: 220px; float: right; margin-left: 80px;} .case-quote{ background: #eee; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; font-size: 13px; color: #666; min-height: 80px; padding: 20px; margin-bottom: 20px; box-shadow: inset 0 0 20px #ddd; -moz-box-shadow: inset 0 0 20px #ddd; -webkit-box-shadow: inset 0 0 20px #ddd;} .case-quote img { float: left; margin-right: 40px;} .case-quote-expand{margin-bottom: 40px;} #content .case-quote p{margin: 10px 0 5px 0;} .case-quote-name{ font-size: 11px; color: #888; text-align:right; padding-right: 10px;} /* -- Brochures -- */ #brochure-banner { background: url(../img/pics/brochures/brochures-banner.png) no-repeat; display: block; height: 115px; padding: 40px 30px; margin-bottom: 40px;} .brochure-banner-txt { float: left; width: 280px;} .brochure-banner-txt p{ line-height: 21px;} .brochure-width {margin: 0 30px; } .column-brochure{width: 425px; float:left; margin-right: 30px;} .brochure-box{ background: #f6f6f6; padding: 25px 25px 20px 25px; margin-bottom: 20px; border: none; border-bottom: #c6c6c6 solid 2px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;} .brochure-box img{ float: left; margin-right: 25px; margin-bottom: 5px;} #brochure-banner h1{font: bold 28px/28px "roboto", Arial, Helvetica, sans-serif; color:#222; text-transform: uppercase; margin-bottom: 10px;} #resourced .brochure-box p{ margin-bottom: 0px;} #resourced .brochure-box h2{font: bold 20px/28px "roboto", Arial, Helvetica, sans-serif; margin-bottom: 4px; } #resourced .brochure-box h3{font: normal 17px/24px "roboto", Arial, Helvetica, sans-serif; color:#3d98e6; margin-bottom: 20px;} #resourced h1.brochure-title { font: bold italic 26px/26px "roboto", Arial, Helvetica, sans-serif; color:#3d98e6; margin-bottom: 0px; padding: 20px 30px 20px 20px;} #resourced .brochure-box a.btn-brochure{ background: #0999f2 !important; font: bold 14px "roboto", Arial, Helvetica, sans-serif; color:#fff; padding: 5px 15px; text-align:center; text-transform:uppercase; text-decoration:none; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px;} /* -- White Papers -- */ .white-paper{ float: right; width: 200px; margin: 0 0 10px 40px; position:relative;} .white-paper:after{clear: both;} .white-paper img {} .white-paper a.btn-blue { position:absolute; top: 50px; left: 60px;} /* -- Analyst Papers -- */ #ap-banner { background: url(../img/pics/resources/ap-banner.png) no-repeat; display: block; height: 140px; padding: 30px 40px; margin-bottom: 40px;} .ap-banner-txt { float: left; width: 300px;} .analyst-papers .resources-box { padding-left: 10px;} #resourced.analyst-papers h2 { margin-bottom: 10px;} .ap-img { display:table-cell; padding-right: 30px; vertical-align:middle;} .ap-txt { display:table-cell; width: 530px; padding-right: 30px; vertical-align:middle;} .ap-btn {display:table-cell;vertical-align:middle;} /* -- Case Studies -- */ #cases a:link, #cases a:visited, #cases a:active{text-decoration: none; color: #777;} #cases a:hover, #cases a:focus{text-decoration: none; color: #500778;} .case-feature{ background: #eee; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; font-size: 13px; line-height: 18px; width: 260px; height: 140px; padding: 10px 20px; float: left; margin-right: 20px; margin-bottom: 20px;} .case-last{margin-right: 0px;} .case-arrow{ background: url(../img/layout/arrow-case.png) no-repeat; width: 24px; height: 24px; float: right; margin-top: 20px; margin-left: 20px;} .case-product{width: 220px; float: right; margin-left: 80px;} .case-quote{ background: #eee; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; font-size: 13px; color: #666; min-height: 80px; padding: 20px; margin-bottom: 20px; box-shadow: inset 0 0 20px #ddd; -moz-box-shadow: inset 0 0 20px #ddd; -webkit-box-shadow: inset 0 0 20px #ddd;} .case-quote img { float: left; margin-right: 40px;} #content .case-quote p{margin: 10px 0 5px 0;} .case-quote-name{ font-size: 11px; color: #888; text-align:right; padding-right: 10px;} /* -- Newsletter -- */ #logo-insight { background: url(../img/pics/newsletter/logo-insight.png) no-repeat; display: block; height: 120px; width: 260px; float: left; } #newsletter-box{ color: #666; padding: 30px; background: #f2f2f2; font-size: 14px; line-height: 22px;} #newsletter-top { display: table;} #newsletter-title, #newsletter-issue{ display: table-cell; vertical-align: middle;} #newsletter-title {width: 620px;} #newsletter-issue {width: 220px; padding-left: 40px;} #newsletter-issue ul{margin-bottom:0; margin-left:15px; } #newsletter-left{float: left; width: 620px;} #newsletter-right {float:right; width: 220px; font-size: 14px; line-height: 21px;} #newsletter-right p{margin-bottom:16px; } #newsletter-right ul { margin: 0 0 14px 0;} #newsletter-right ul li { font: normal 14px/21px "roboto", Arial, Helvetica, sans-serif; margin-bottom: 6px; list-style:none;} .icon-email { background: url(../img/pics/newsletter/icon-email.png) no-repeat; display:inline-block; width: 20px; height: 14px; margin-right: 6px;} .share-icons {} .share-icons ul{ margin: 0; height: 24px;} .share-icons li { float:left; margin: 0 2px 0 0; list-style: none; color: #444; line-height: 24px;} .share-icons li.share-this{ margin-right: 10px;} .share-icons li a { background: url(../img/pics/newsletter/share-icons.png); display: block; width: 24px; height: 24px;} .share-icons li a:hover { opacity: 1 !important;} .share-icons li a span{display:none !important;} .share-icons li.icon-facebook a { background-position: 0 0;} .share-icons li.icon-twitter a { background-position: -24px 0;} .share-icons li.icon-googleplus a { background-position: -48px 0;} .share-icons li.icon-linkedin a { background-position: -72px 0;} .share-icons li.icon-pinterest a { background-position: -96px 0;} .share-icons li.icon-facebook a:hover, #share-icons li.icon-facebook a:focus { background-position: 0px 24px;} .share-icons li.icon-twitter a:hover, #share-icons li.icon-twitter a:focus { background-position: -24px 24px;} .share-icons li.icon-googleplus a:hover, #share-icons li.icon-googleplus a:focus { background-position: -48px 24px;} .share-icons li.icon-linkedin a:hover, #share-icons li.icon-linkedin a:focus { background-position: -72px 24px;} .share-icons li.icon-pinterest a:hover, #share-icons li.icon-pinterest a:focus { background-position: -96px 24px;} .newsletter-box, .training-box, .resources-box { color: #666; padding: 30px; margin-bottom: 20px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: 0 2px 0 0 #c6c6c6; -moz-box-shadow: 0 2px 0 0 #c6c6c6; -webkit-box-shadow: 0 2px 0 0 #c6c6c6; /* -- http://www.colorzilla.com/gradient-editor/ --*/ background: #f2f2f2; /* Old browsers */ background: -webkit-linear-gradient(top, #f2f2f2 0%, #f2f2f2 100%); /* Chrome10+,Safari5.1+ */ background: -moz-linear-gradient(top, #f2f2f2 0%, #f2f2f2 100%); /* FF3.6+ */ background: -ms-linear-gradient(top, #f2f2f2 0%, #f2f2f2 100%); /* IE10+ */ background: -o-linear-gradient(top, #f2f2f2 0%, #f2f2f2 100%); /* Opera 11.10+ */ background: linear-gradient(top, #f2f2f2 0%, #f2f2f2 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */} #content-right .newsletter-box {padding: 20px;} .newsletter-white, .products-white { padding: 20px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: 0 2px 0 0 #c6c6c6; -moz-box-shadow: 0 2px 0 0 #c6c6c6; -webkit-box-shadow: 0 2px 0 0 #c6c6c6; background: #fcfcfc;} .products-white { margin-bottom: 20px;} .products-white table { margin-bottom: 0px;} /* -- Videos -- */ #video-options { float: right; margin: 10px 20px 0 0;} #video-list { margin: 0 0 20px 0;} #video-list li{ list-style:none; display:inline; padding:0 10px 0 0; font-size:14px; text-transform:uppercase; } #video-list li a {padding:0 0 0 10px;} #video-list li a:link, #video-list li a:visited,#video-list li a:active{ text-decoration:none; color:#666;} #video-list li a:hover, #video-list li a:focus{ text-decoration:underline; color:#666;} #video-list li a.selected{ color:#500778; text-decoration: underline;} .video-box{ line-height:0px; background: #f8f8f8; padding: 10px 0; margin-bottom: 1px; text-align:center; border: #fff solid 1px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: 0 0 0 1px #d1d1d1; -moz-box-shadow: 0 0 0 1px #d1d1d1; -webkit-box-shadow: 0 0 0 1px #d1d1d1;} .column-video{width: 280px; float:left; margin: 1px 15px;} .video-box-shadow { background: url(../img/layout/bg-shadow-video.png) no-repeat; height: 20px; margin-bottom: 20px;} #content .video-box p{margin: 0 20px; font-size: 13px; line-height: 30px;} #v2 #video-options { float: none; margin: 30px 15px 15px 15px;} #v2 #video-list { margin: 20px 0; padding:0;} #v2 #video-list li{ font: normal 16px/16px "roboto", Arial, Helvetica, sans-serif; color: #999; padding-right: 10px; list-style:none; display:inline; text-transform:uppercase; } #v2 #video-list li a { padding: 5px 15px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; background: #e3e3e3; color: #999; } #v2 #video-list li a:link, #v2 #video-list li a:visited, #v2 #video-list li a:active{ text-decoration:none; color:#666;} #v2 #video-list li a:hover, #v2 #video-list li a:focus{ text-decoration:none; background: #500778; color: #fff;} #v2 #video-list li a.selected{ background: #500778; color: #fff;} .video-set { padding: 15px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: 0 2px 0 0 #c6c6c6; -moz-box-shadow: 0 2px 0 0 #c6c6c6; -webkit-box-shadow: 0 2px 0 0 #c6c6c6; background: #f2f2f2;} .video-holder { background-color: #e3e3e3; margin: 15px 15px 0 15px; padding-bottom: 10px} .video-disc { margin: 10px 20px;} #content .video-disc p{ margin-bottom: 0px; font-size: 15px; line-height: 22px;} #content .column-video p{margin-bottom: 10px;} .video-set .column-video{width: 272px; float:left; margin: 0px 15px 30px 15px; overflow:hidden; height: 290px;} .video-set .column-video img{ margin-bottom: 5px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;} .video-category{ margin: 0 15px; border-top: 3px solid #d9d9d9; width: 96%; padding-top: 10px;} .video-set p {font-size: 14px; line-height: 20px;} .video-set h2{font: normal 26px/32px "roboto", Arial, Helvetica, sans-serif; color:#666; margin-bottom: 10px;} .video-set h3{font: normal /*16px/22px*/ 18px/24px "roboto", Arial, Helvetica, sans-serif; color:#500778; margin-bottom: 4px;} .video-set .video-disc h2{font: normal 21px/26px "roboto", Arial, Helvetica, sans-serif; color:#500778;margin-bottom: 2px; } .video-set .isotope .isotope-item { -webkit-transition-property: top, left, opacity; -moz-transition-property: top, left, opacity; -ms-transition-property: top, left, opacity; -o-transition-property: top, left, opacity; transition-property: top, left, opacity; } /* -- Carousel -- */ #video-scroller {position: relative;} .video-fix {min-height: 500px;} #video-scroller figure { list-style: none; width: 910px; display: block; float: left; position:relative;} #video-scroller .video-disc { width: 540px; border-right: 1px solid #b0b0b0; padding-right: 20px;} .video-slide-btns { position:absolute; bottom: 20px; right:45px; width: 200px; height: 25px; padding: 20px 15px;} #video-scroller .prev,#video-scroller .next { width:25px; height:25px; display:block; text-indent:-999em; background: transparent url(../img/carousel/arrows-video.png) no-repeat 0 0; } #video-scroller .prev {background-position:0 0; float: left;} #video-scroller .next {background-position: -25px 0; float:right;} #video-scroller .prev:hover {background-position: 0 -25px; } #video-scroller .next:hover {background-position: -25px -25px; } #video-scroller .pager {text-align:center; margin-top: 10px;} #video-scroller .pager a { margin: 0 5px 0 0;text-decoration: none; display:inline-block; width:9px; height:9px; text-indent:-999em; background: transparent url(../img/carousel/bullets-video.png) no-repeat 0 0;} #video-scroller .pager a.selected { background-position: 0 -9px;} /* -- Download Demos -- */ .demos-form{ padding: 20px; background: #f2f2f2; border: none; border-bottom: 2px solid #c6c6c6; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;} #title-observer, #title-oi, #title-landing { background: #e2e2e2; line-height: 60px; text-align:center; font-family: "roboto", Arial, Helvetica, sans-serif; color:#500778; margin-bottom: 20px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;} #title-observer{font-size: 30px;} #title-oi {font-size: 24px;} #title-landing {font-size: 22px;} /* -- Support -- */ #support-box{ background: #eaeaea; position:relative; min-height: 170px; padding: 20px 30px 20px 30px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;} .shadow-box-full { background: url(../img/layout/bg-shadow-support.png) no-repeat; height: 20px; margin-bottom: 10px;} .support-titles { border-right: #d1d1d1 2px solid; float: left; margin-right: 20px; width: 360px; box-shadow: 2px 0 0 #e7e7e7; -moz-box-shadow: 2px 0 0 #e7e7e7; -webkit-box-shadow: 2px 0 0 #e7e7e7;} #support-box h2{ font: bold 20px/35px "roboto", Arial, Helvetica, sans-serif; text-shadow: 0px 1px 0px #fff; margin: 10px 0 10px 0; color: #500778;} #support-box h2 a { background: url(../img/layout/arrow-text-gray-h2.png) no-repeat center right; padding-right: 20px;} /* -- Support | Search -- */ #search-support form{margin: 0;} #search-support{ width: 180px; height: 30px; margin: 0 auto 10px auto; background-color: #ddd; border-bottom: solid 1px #fff; -moz-border-radius: 0px; border-radius: 0px; -webkit-border-radius:4px; box-shadow: inset 0 2px 6px #bbb; -moz-box-shadow: inset 0 2px 6px #bbb; -webkit-box-shadow: inset 0 2px 6px #bbb;} #search-support input{ border: none; margin: 0; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;} #search-support input#search-support-box{ font: normal 12px "roboto", Arial, Helvetica, sans-serif; background: none; float:left; color: #aaa; height: 30px; width: 150px;} #search-support input#search-support-btn { background: url(../img/layout/bg-search-support-btn.png) no-repeat 0 0; cursor: pointer; display: block; font-size: 0px; float:left; height: 30px; width: 30px;} #search-support input#search-support-btn:hover {background-position: 0 -30px;} /* -- Support | User Forum -- */ .forum-box{ background: #f1f1f1; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; position:relative; height: 90px; padding: 10px 10px 10px 20px;} .forum-box h3{margin-top:20px; font-size: 18px;} .forum-box p{margin-right: 60px;} .forum-blob{ background: url(../img/layout/blob-forum.png) no-repeat; width: 60px; height: 50px; position:absolute; top: 20px; right: 20px;} .forum-arrow { background: url(../img/layout/arrow-forum.png) no-repeat; width: 20px; height: 20px; position:absolute; bottom: 10px; right: 10px;} #forum-iframe {width: 100%; height: 800px;} #user-forum a:link, #user-forum a:visited, #user-forum a:active{text-decoration: none; color: #666;} #user-forum a:hover, #user-forum a:focus{text-decoration: none; color: #500778;} /* -- NIU Training -- */ /* -- NIU Nav -- */ #niu-nav{ padding-bottom: 10px; margin-bottom: 30px; border-bottom: 0px; -moz-box-shadow: inset 0px -1px 0px 0px #ccc; -webkit-box-shadow: inset 0px -1px 0px 0px #ccc; box-shadow: inset 0px -1px 0px 0px #ccc;} #niu-nav ul, #niu-nav ul li { margin:0; padding:0;} #niu-nav ul li { font: normal 16px/22px "roboto", Arial, Helvetica, sans-serif; color: #666; display:inline; padding:0 0 0 0; border-right: solid 1px #666;} #niu-nav ul li.li-last{ border-right: none; padding-right: 0px;} #niu-nav ul li:last-child{ border-right: none; padding-right: 0px;} #niu-nav li a:hover, #niu-nav li a:focus, #niu-nav li.on a, #niu-nav li.on a:hover, #niu-nav li.on a:focus { border-bottom: solid 1px #3d98e6; text-decoration: none; color: #3d98e6;} #niu-nav li a { padding: 0 15px 10px 15px; color: #666;} #content .training-box{padding: 20px; min-height: 140px;} #content-right .training-box {padding: 20px; } #content .column-course{width: 170px; float:left; margin-right: 20px;} #niu-course-box { background: #004f7e url(../img/layout/bg-niu-courses.png) no-repeat; padding: 140px 20px 20px 20px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;} #niu-course-box h3{ font: bold 14px/20px "roboto", Arial, Helvetica, sans-serif; color:#fff;} #niu-course-box p { font: normal 12px/18px "roboto", Arial, Helvetica, sans-serif; color: #fff; margin-top: 15px;} #niu-title-main, #niu-title-sub{ margin-bottom: 30px; border: #e7e7e7 solid 1px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;} #niu-title-main {background: #f8f8f8 url(../img/layout/bg-niu-main.png) repeat-x;} #niu-title-sub {background: #f8f8f8 url(../img/layout/bg-niu-sub.png) repeat-x;} #niu-title-main h2 {line-height: 90px;} #niu-title-sub h2{line-height: 40px;} #niu-logo-main, #niu-logo-sub { background: url(../img/layout/logo-niu-main.png) no-repeat; float: left; height: 90px; width: 90px; padding-right: 20px; margin: 0 20px; border-right: #ccc solid 1px; box-shadow: 1px 0 #fff; -moz-box-shadow: 1px 0 #fff; -webkit-box-shadow: 1px 0 #fff;} #niu-logo-sub { background: url(../img/layout/logo-niu-sub.png) no-repeat; height: 40px;} .niu-form{ background-color: #ededed; padding: 30px 0px 30px 30px; margin-bottom: 20px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -moz-box-shadow: 0px 2px 0px #c6c6c6; -webkit-box-shadow: 0px 2px 0px #c6c6c6; box-shadow: 0px 2px 0px #c6c6c6;} /* -- Partners -- */ .partners-box{ background: #f8f8f8; padding: 30px 40px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;} /* -- About Us -- */ #featured-customers p{margin-bottom: 10px;} /* -- About Us (Timeline) -- */ #timeline { height: 200px; overflow: hidden; position: relative; background: url('../img/layout/timeline-dot.gif') left 39px repeat-x;} #dates {height: 50px; margin: 0;} #dates li { list-style: none; float: left; width: 85px; height: 30px; line-height: 30px; font-size: 21px; text-align: center; padding-bottom: 15px; background: url('../img/layout/timeline-dot-big.png') center bottom no-repeat;} #dates a { text-decoration: none; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; padding: 2px 6px;} #dates a:hover { background: #ccc;} #dates a.selected { color: #fff; background: #500778; box-shadow: inset 0 -10px 15px #500778; -moz-box-shadow: inset 0 -10px 15px #500778; -webkit-box-shadow: inset 0 -10px 15px #500778;} #issues { margin: 0; text-align:center;} #issues li { width: 620px; list-style: none; float: left;} #issues li div.year{ padding: 20px 40px 0 40px;} #issues li h1 { font-size: 48px; margin-top: 30px; text-align:center;} #issues li h2{ font-size: 18px;} #issues li p { font-size: 14px; font-weight: normal; line-height: 22px;} #issues .col-half{width: 50%; float:left;} #issues .col-half h1{margin-left: 0px;} #issues .col-half h2, #issues .col-half img{margin-right: 0px;} #issues .align-left{display: block; float: left; margin: -10px 20px 20px 0;} #issues .align-right{display: block; float: right; margin: -10px 0 20px 20px;} #nextdate,#prevdate { position: absolute; font-size: 70px; top: 125px; width: 25px; height: 25px; text-indent: -9999px; overflow: hidden; background: url('../img/layout/timeline-arrows.png') no-repeat 0 0;} #nextdate:hover {background-position: -25px -25px;} #prevdate:hover {background-position: 0 -25px;} #nextdate {background-position: -25px 0; right: 0; } #prevdate {left: 0;} /* -- Events -- */ .column-event{width: 100%;} /*#events-container a { display: inline-block; padding: 0px 25px 0px 0px; position: relative;} #events-container a:before, #events-container a:after { border-right: 3px solid; content: ''; height: 8px; margin-top: -6px; position: absolute; -moz-transform: rotate(135deg); -o-transform: rotate(135deg); display: block; -webkit-transform: rotate(135deg); transform: rotate(135deg); right: 10px; top: 50%; width: 0;} #events-container a:after { margin-top: -2px; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);} #events-container a:hover,#events-container a:focus, #events-container a:hover:before, #event-container a:hover:after, #events-container a:focus:before, #event-container a:focus:after {}*/ .events-right-box{ background: #e6e6e6; padding: 20px; margin-bottom: 30px; border: #fff solid 1px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: 0 0 0 1px #d1d1d1; -moz-box-shadow: 0 0 0 1px #d1d1d1; -webkit-box-shadow: 0 0 0 1px #d1d1d1;} .events-content-right {float:right; width: 220px;} #event-month-title{ background: #500778; text-align:center; font: bold italic 26px/36px "roboto", Arial, Helvetica, sans-serif; color:#fff; padding-top: 2px; margin-bottom: 20px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;} #event-list { margin:0} #event-list li { font: bold italic 14px/26px "roboto", Arial, Helvetica, sans-serif; position: relative; text-align:center; list-style: none; background: #fff; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; margin-bottom: 6px;} #event-list a { display: block; position: relative; cursor:pointer; text-decoration: none; text-shadow: 0px 1px 0px #fff;} #event-list li a{ -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out;} #event-list li a:link, #event-list li a:visited, #event-list li a:active{ text-decoration:none; color:#500778;} #event-list li a:hover, #event-list li a:focus{ text-decoration:none; color:#444;} #event-list li a.selected{ color:#444; text-decoration: none;} #event-list a.selected { display: inline-block; padding: 0px 22px 0px 0px; position: relative;} #event-list a.selected:before, #event-list a.selected:after { border-right: 3px solid; content: ''; height: 8px; margin-top: -6px; position: absolute; -moz-transform: rotate(135deg); -o-transform: rotate(135deg); display: block; -webkit-transform: rotate(135deg); transform: rotate(135deg); right: 10px; top: 50%; width: 0;} #event-list a.selected:after { margin-top: -2px; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);} /* -- News -- */ .news-logo {float:right; margin: 30px 0 30px 20px;} /* ----------------------------------------------------*/ /* ---- Table Elements --------------------------------*/ /* ----------------------------------------------------*/ table{margin-bottom: 30px; width: 100%;} td, th{vertical-align:top; padding-right: 10px;} th{font-weight:bold; text-align:left;} td.td-align-right, th.td-align-right, tr.tr-align-right td{text-align:right;} td.td-align-center, th.td-align-center, tr.tr-align-center td{text-align:center;} td.td-valign-top, th.td-valign-top, tr.tr-valign-top td{vertical-align:top;} td.td-valign-middle, th.td-valign-middle, tr.tr-valign-middle td{vertical-align:middle;} td.td-valign-bottom, th.td-valign-bottom, tr.tr-valign-bottom td{vertical-align:bottom;} td.td-line{border-left: #d1d1d1 solid 1px; padding-left: 10px;} .table-tds-40px-height td { height: 40px; vertical-align:middle;} .table-alt {background-color:#f8f8f8;} .table-alt th {font-size: 16px; font-weight:normal; color:#444; background-color: #fff;} .table-alt td, .table-alt th {padding: 10px;} .table-alt tr.tr-alt {background:#eee;} .table-alt-m {background-color:#f1f1f1;} .table-alt-m th {font-size: 16px; font-weight:normal; color:#444; background-color: #fff;} .table-alt-m td, .table-alt-m th {padding: 10px;} .table-alt-m tr.tr-alt {background:#e9e9e9; color: #fff;} .table-gap {background-color:#ebebeb;} .table-gap td, .table-gap th {padding: 5px 10px; border: 2px solid #fff; vertical-align:middle; text-align:center;} .table-gap th { font-weight: normal; background:#3d98e6; color: #fff; text-transform:uppercase;} .table-gap tr.tr-alt, .table-gap tr:hover {background:#b2b2b2; color: #fff;} .table-gap .hover {background:#b2b2b2; color: #fff !important;} .table-gap th.td-blue {background-color:#3d98e6;} .table-gap td.td-blue {background-color:#500778; color: #fff; text-align:right;} #newsletter-box .table-alt tr {background-color:#f5f5f5;} #newsletter-box .table-alt tr.tr-alt {background:#e8e8e8;} #newsletter-box .table-alt th {font-size: 16px; font-weight:bold; color:#fefefe; background-color: #555;} table.margin-bottom-0px {margin-bottom: 0px;} .table-alt2 {background-color:#f8f8f8; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd;} .table-alt2 th {font-size: 16px; font-weight:normal; color:#444; background-color: #fff;} .table-alt2 td, .table-alt2 th {padding: 10px; border-top: 1px solid #ddd;border-right: 1px solid #ddd;} .table-alt2 tr.tr-alt {background:#e5e5e5;} .table-altrow td, .table-altrow th {padding: 5px; border-top: 1px solid #ddd;border-right: 1px solid #ddd;} .table-altrow {border-left: 1px solid #ddd; border-bottom: 1px solid #ddd;} .table-altrow tr.tr-alt {background:#eee;} .table-alt-norow td, .table-altrow th {padding: 5px; border-top: 1px solid #ddd;} .table-alt-norow {border-bottom: 1px solid #ddd;} .table-alt-norow tr.tr-alt {background:#ddd;} .table-hover td{border-bottom:1px solid #ddd;} .table-hover tr:hover{background:#f5f5f5;} td.td-width-5{width:5%;} td.td-width-10{width:10%;} td.td-width-15{width:15%;} td.td-width-20{width:20%;} td.td-width-25{width:25%;} td.td-width-30{width:30%;} td.td-width-35{width:35%;} td.td-width-40{width:40%;} td.td-width-45{width:45%;} td.td-width-55{width:55%;} td.td-width-50{width:50%;} td.td-width-60{width:60%;} td.td-width-70{width:70%;} td.td-width-75{width:75%;} td.td-width-80{width:80%;} td.td-width-90{width:90%;} td.td-width-100{width:100%;} /* ----------------------------------------------------*/ /* ---- Form Elements ---------------------------------*/ /* ----------------------------------------------------*/ /* Same width for input and select boxes */ input, select, textarea { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;} input[type ^="text"], input[type ^="password"], select, textarea{ font-family: "roboto", Helvetica, Arial, sans-serif; background: #fff; padding: 8px; margin: 0 10px 5px 0; color: #888; border: #ddd solid 1px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: inset 0 2px 0 #fff; -moz-box-shadow: inset 0 2px 0 #fff; -webkit-box-shadow: inset 0 2px 0 #fff;} input:hover, input:focus, select:hover, select:focus, textarea:hover, textarea:focus {background-position: 0px -10px; background-color: #fff; border-color: #ccc;} input[type ^="radio"], input[type ^="checkbox"]{ margin: 0 5px 4px 0; vertical-align: middle; padding: 0px;} input[type ^="submit"], input[type ^="reset"], input[type ^="button"]{cursor:pointer;} input[disabled ^="disabled"]{ cursor: not-allowed; background-color: #e3e3e3; background-position: 0px 15px; color:#fefefe; border-color: #ccc; box-shadow: inset 0 2px 0 #f2f2f2; -moz-box-shadow: inset 0 2px 0 #f2f2f2; -webkit-box-shadow: inset 0 2px 0 #f2f2f2;} textarea {font: normal 13px/18px "roboto", Arial, Helvetica, sans-serif;} table input{margin: 0;} /* -- Label Sizes [+20] -- */ label, .label{width:180px; display:inline-block; cursor: pointer; line-height: 28px;} .label{cursor:auto; line-height:normal;} .label-width-auto{width: auto !important;} .newsletter-box label, .newsletter-box .label { width:auto;} .label-80px, .form-labels-80px label, .form-labels-80px .label {width: 80px;} .label-100px, .form-labels-100px label, .form-labels-100px .label {width: 100px;} .label-120px, .form-labels-120px label, .form-labels-120px .label {width: 120px;} .label-140px, .form-labels-140px label, .form-labels-140px .label {width: 140px;} .label-200px, .form-labels-200px label, .form-labels-200px .label {width: 200px;} .label-240px, .form-labels-240px label, .form-labels-240px .label {width: 240px;} /* -- Input Sizes [+20] -- */ .input-80px, select.input-80px{width: 80px;} .input-100px, select.input-100px{width: 100px;} .input-130px, .form-inputs-130px input[type ^="text"], .form-inputs-130px input[type ^="password"], select.input-130px, .form-inputs-130px select {width: 130px;} .input-140px, .form-inputs-140px input[type ^="text"], .form-inputs-140px input[type ^="password"],select.input-140px, .form-inputs-140px select {width: 140px;} .input-160px, .form-inputs-160px input[type ^="text"], .form-inputs-160px input[type ^="password"], select.input-160px, .form-inputs-160px select {width: 160px;} .input-170px, .form-inputs-170px input[type ^="text"], .form-inputs-170px input[type ^="password"], select.input-170px, .form-inputs-170px select {width: 170px;} .input-180px, .form-inputs-180px input[type ^="text"], .form-inputs-180px input[type ^="password"], select.input-180px, .form-inputs-180px select {width: 180px;} .input-190px, .form-inputs-190px input[type ^="text"], .form-inputs-190px input[type ^="password"], select.input-190px, .form-inputs-190px select {width: 190px;} .input-200px, select.input-200px{width: 200px;} .input-210px, select.input-210px{width: 210px;} .input-260px, .form-inputs-260px textarea, .form-inputs-260px input[type ^="text"], .form-inputs-260px input[type ^="password"], select.input-260px, .form-inputs-260px select {width: 260px;} .input-280px, select.input-280px{width: 280px;} .input-290px, select.input-290px{width: 290px;} .input-390px, select.input-390px{width: 390px;} .input-no-right-margin, .form-inputs-no-right-margin input[type ^="text"], .form-inputs-no-right-margin input[type ^="password"], .form-inputs-no-right-margin select {margin: 0 0 5px !important;} /* -- Validation -- */ .txt-required {color: #0079c2;} form input.error, form select.error, form textarea.error{background: #f8dbdb; border-color: #e77776; color: #ba2c2c;} form input.error:focus, form select.error.focus, form textarea.error:focus {background:#f8dbdb;} form figure{color: #ba2c2c; margin-left: 185px; font-style: italic; font-size: 12px;} form figure label {line-height:20px; margin-bottom: 10px;} .newsletter-box form figure{margin-left: 5px; } .form-labels-100px figure {margin-left: 105px;} .form-labels-100px figure label{width: auto !important;} .form-labels-120px figure {margin-left: 125px;} .form-labels-120px figure label{width: auto !important;} .form-labels-240px figure {margin-left: 245px;} .form-labels-240px figure label{width: auto !important;} .form-box-light{ background: #f2f2f2; padding: 20px; margin-bottom: 30px; border: none; border-bottom: #c6c6c6 solid 2px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;} .form-box-dark{ background: #f2f2f2; padding: 20px; margin-bottom: 30px; border: none; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: 0 2px 0 0 #c6c6c6; -moz-box-shadow: 0 2px 0 0 #c6c6c6; -webkit-box-shadow: 0 2px 0 0 #c6c6c6;} .form-box-dark input, .form-box-dark select, .form-box-dark textarea{ background: #fff;} .form-box-dark input:hover, .form-box-dark input:focus, .form-box-dark select:hover, .form-box-dark select:focus, .form-box-dark textarea:hover, .form-box-dark textarea:focus { box-shadow: inset 0 0 3px #e2e2e2; -moz-box-shadow: inset 0 0 3px #e2e2e2; -webkit-box-shadow: inset 0 0 3px #e2e2e2;} .niu-form input[type ^="text"], .niu-form select{ background: #fff; display:inline; margin: 0 10px 10px 0; border: none;} .terms-conditions{ width: 90%; height: 90px; overflow:auto; background: #fff; padding: 10px; margin-bottom: 20px; color: #888; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: 0 0 0 1px #ddd; -moz-box-shadow: 0 0 0 1px #ddd; -webkit-box-shadow: 0 0 0 1px #ddd;} .error-messages{ padding: 20px; color:#ba2c2c; border: 1px solid #e77776; background: #f8dbdb; margin-bottom: 20px; border-radius: 0px; -moz-border-radius:5px; -webkit-border-radius:5px;} .error-messages ul{margin: 0; padding: 0; } .error-messages li{ background: url(../img/iconize/error.png) no-repeat 0 2px; list-style:none; padding-left: 25px; line-height: 25px;} .error-message-red, .error-message-green, .error-message-yellow, .error-message-blue{ padding: 10px; border: 1px solid; margin-bottom: 20px; border-radius: 0px; -moz-border-radius:4px; -webkit-border-radius:4px;} .error-message-blue, .input-blue, .input-blue:hover { color: #00529B; border-color: #00529B; background-color: #BDE5F8;} .error-message-green, .input-green, .input-green:hover { color: #4F8A10; border-color: #4F8A10; background-color: #DFF2BF;} .error-message-yellow, .input-yellow, .input-yellow:hover { color: #9F6000; border-color: #9F6000; background-color: #FEEFB3;} .error-message-red, .input-red, .input-red:hover { color: #D8000C; border-color: #D8000C; background-color: #FFBABA;} .error-messages-right { padding: 0 20px; color:#ba2c2c; margin-bottom: 15px;} .error-messages-right ul{margin: 0; padding: 0; } .error-messages-right li{ background: url(../img/iconize/error.png) no-repeat 0 2px; list-style:none; padding-left: 25px; line-height: 25px;} .shadow-box form, .shadow-box iframe{margin: 0 20px 20px 20px;} .shadow-box input, .shadow-box select, .shadow-box textarea{ background: #e5e5e5; padding: 5px; margin-bottom: 5px; color: #666; width: 180px; border: #ccc solid 1px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: inset 0 4px 6px #d7d7d7; -moz-box-shadow: inset 0 4px 6px #d7d7d7; -webkit-box-shadow: inset 0 4px 6px #d7d7d7;} .shadow-box label, .shadow-box .label{line-height: 24px;} .shadow-box input.btn-blue, .shadow-box input.btn-cyan {width: 100%;} .shadow-box form figure{margin-left: 0;} .services-box-right input, .services-box-right select, .services-box-right textarea{ background: #e5e5e5; display:inline; margin: 0 10px 10px 0; border: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;} .newsletter-box input, .newsletter-box select, .newsletter-box textarea{ width: 180px; font-size: 12px; background: #fff;} .newsletter-box ul{ margin: 20px 0 0 20px;} /* -- Credit Cards -- */ .cards { overflow: hidden; margin: 2px 0 8px 124px;} .cards li { -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; background-image: url(../img/icons/credit-cards.png); background-position: 0 0; float: left; height: 32px; margin-right: 8px; text-indent: -9999px; width: 51px; list-style:none;} .cards li:last-child { margin-right: 0;} .cards .amex { background-position: 102px 0;} .cards .mastercard { background-position: 51px 0;} .cards .visa.off { background-position: 0 32px;} .cards .amex.off { background-position: 102px 32px;} .cards .mastercard.off { background-position: 51px 32px;} #cardnumber.valid { background-image: url(../img/icons-fam/accept.png); background-position: 96% center; background-repeat: no-repeat;} /* ----------------------------------------------------*/ /* ---- List Items ------------------------------------*/ /* ----------------------------------------------------*/ ul li{list-style:circle; /*list-style:disc;*/} ul li ul li{list-style:circle;} ul li ul li ul li{list-style:disc;} ol li{list-style:decimal; margin-left:10px;} ol li ol li{list-style:lower-alpha;} ol li ul li{list-style:circle;} ol li ol li ol li{list-style:lower-roman;} ol.list-upper-alpha li{list-style:upper-alpha; margin-left:10px;} ol.list-lower-alpha li{list-style:lower-alpha; margin-left:10px;} /* -- Vertical Spacing -- */ ul, ol{margin-bottom:30px; margin-left:25px; } ul ul, ol ol{margin-left:28px; } ul ul, ol ol, ol ul, ul ol{margin-bottom:20px;} ul ul ul, ol ol ol, ol ul ul, ol ol ul, ul ol ol, ul ol ol{margin-bottom:10px;} ul.list-nobullets, ol.list-nobullets{margin-left:0; list-style:none; } ul.list-nobullets li, ol.list-nobullets li{list-style:none;} ul.list-hidebullets, ol.list-hidebullets{margin-left: 10px; list-style:none; } ul.list-hidebullets li, ol.list-hidebullets li{list-style:none;} ul.list-li-margin-bottom-20px li, ol.list-li-margin-bottom-20px li{margin-bottom:20px;} /* ----------------------------------------------------*/ /* ---- Typography ------------------------------------*/ /* ----------------------------------------------------*/ /* -- Styles -- */ strong{font-weight:bold;} em{font-family:"roboto", Arial, Helvetica, sans-serif; font-style:italic;} /* http://webdesignandsuch.com/how-to-fix-sup-sub-line-height-problem-with-css/ sub, sup { font-size: 70%; line-height: 0; position: relative; vertical-align: baseline;} sup {top: -0.6em; } sub {bottom: -0.25em; } */ sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative; font-size: 11px;} sup {bottom: 1ex;} sub {top: .5ex;} .txt-align-center{text-align:center;} .txt-align-right{text-align:right;} .txt-small{font-size:11px;} .txt-smallcaps{font-variant:small-caps;} .txt-allcaps{text-transform:uppercase;} .txt-view-all {font-size:12px; text-transform:uppercase; float:right;} .txt-view-all-customers {font-size:13px; text-transform:uppercase; margin-left: 10px;} pre {font-family: "roboto", Arial, Helvetica, sans-serif;} /* -- HRs -- */ hr, .hr{border: none; height: 1px; background-color: #d1d1d1; border-bottom: 1px solid #fff; margin: 20px 0px; clear:both;} .hr-hide{ height: 2px; margin: 20px 0px; clear:both;} #newsletter-box .hr {background-color: #bbb; height: 4px; border-bottom: none; margin: 30px 0px;} #newsletter-right .hr {height: 0px; margin: 25px 0px; border-bottom: 1px dotted #f2f2f2;} #niu-course-box .hr {background-color: #0080cc; height: 4px; margin: 5px 0; border-bottom: none;} #resources-wp-box .hr {background-color: #500778; height: 2px; margin: 5px 0; border-bottom: none; clear:none;} #resources-cs-box .hr {background-color: #ed710c; height: 2px; margin: 5px 0 10px 0; border-bottom: none;} #resources-vids-box .hr {background-color: #666; height: 2px; margin: 0 0 10px 0; border-bottom: 2px solid #e5e5e5;} .video-box .hr {margin: 10px 0;} .hr6px {background-color: #ccc; height: 6px; margin: 10px 0px 40px 0; clear:both;} .hr6pxv2 {background-color: #ccc; height: 6px; margin: 30px 0px; clear:both;} /* -- Arrows -- */ .arrow-text-blue {padding-right: 20px; background: url(../img/layout/arrow-text-blue.png) no-repeat center right;} .arrow-text-dark-blue {padding-right: 20px; background: url(../img/layout/arrow-text-dark-blue.png) no-repeat center right;} .arrow-text-dark-orange {padding-right: 20px; background: url(../img/layout/arrow-text-dark-orange.png) no-repeat center right;} .arrow-text-gray {padding-right: 20px; background: url(../img/layout/arrow-text-gray.png) no-repeat center right;} /* -- Block Quotes -- */ blockquote p{font: italic 14px/22px Georgia, Times, "Times New Roman", serif;} blockquote p:before{content:"\201C"; font-size: 70px; font-weight:bold; line-height: 1px; margin-right: 15px; vertical-align:-26px;} blockquote p:after {content:"\201D"; font-size: 70px; font-weight:bold; line-height: 1px; vertical-align:-44px;} blockquote p:first-child{display:inline;} blockquote p:last-child{margin-bottom:0;} .single-quote blockquote p{font: italic 18px/26px Georgia, Times, "Times New Roman", serif;} .single-quote blockquote p:before{content:"\201C"; font-size: 50px; font-weight:bold; line-height: 1px; margin-right: 10px; vertical-align:-16px;} .single-quote blockquote p:after {content:"\201D"; font-size: 50px; font-weight:bold; line-height: 1px; padding-left: 5px;vertical-align:-24px;} .single-quote p.blockquote-source { font: italic 13px/18px "roboto", Arial, Helvetica, sans-serif; color: #555; margin: 10px 5px; text-align:right;} .case-quote blockquote { padding: 10px 0;} .case-quote blockquote p{font: italic 14px/22px Georgia, Times, "Times New Roman", serif;} .case-quote blockquote p:before{content:"\201C"; font-size: 50px; font-weight:bold; line-height: 1px; margin-right: 10px; vertical-align:-18px;} .case-quote blockquote p:after {content:"\201D"; font-size: 50px; font-weight:bold; line-height: 1px; vertical-align:-30px;} .solutions-content-right blockquote p{font: italic 13px/21px Georgia, Times, "Times New Roman", serif;} .solutions-content-right blockquote p:before{content:"\201C"; font-size: 40px; font-weight:bold; line-height: 1px; margin-right: 10px; vertical-align:-16px;} .solutions-content-right blockquote p:after {content:"\201D"; font-size: 40px; font-weight:bold; line-height: 1px; padding-left: 5px;vertical-align:-24px;} .solutions-content-right p.blockquote-source { font: italic 13px/18px "roboto", Arial, Helvetica, sans-serif; color: #555; margin: 10px 5px 0 0 !important; text-align:right;} .tabs-content-right blockquote { padding: 20px;} .tabs-content-right blockquote p{font: italic 13px/21px Georgia, Times, "Times New Roman", serif; margin-left: 0px;} .tabs-content-right blockquote p:before{content:"\201C"; font-size: 40px; font-weight:bold; line-height: 1px; margin-right: 10px; vertical-align:-16px;} .tabs-content-right blockquote p:after {content:"\201D"; font-size: 40px; font-weight:bold; line-height: 1px; padding-left: 5px;vertical-align:-24px;} .tabs-content-right p.blockquote-source { font: italic 13px/18px "roboto", Arial, Helvetica, sans-serif; color: #555; margin: 0px 25px 20px 20px; text-align:right;} .training-box blockquote p{font: italic 13px/21px Georgia, Times, "Times New Roman", serif;} .training-box blockquote p:before{content:"\201C"; font-size: 40px; font-weight:bold; line-height: 1px; margin-right: 10px; vertical-align:-16px;} .training-box blockquote p:after {content:"\201D"; font-size: 40px; font-weight:bold; line-height: 1px; padding-left: 5px;vertical-align:-24px;} .training-box p.blockquote-source { font: italic 13px/18px "roboto", Arial, Helvetica, sans-serif; color: #555; margin: 10px 5px 0 0 !important; text-align:right;} .training-box-v2 blockquote p{font: normal 17px/22px "roboto", Arial, Helvetica, sans-serif; color:#3d98e6;} .training-box-v2 blockquote p:before{content:"\201C"; font-size: 22px; font-weight:normal; line-height: 1px; margin-right: 1px; vertical-align:-1px;} .training-box-v2 blockquote p:after {content:"\201D"; font-size: 22px; font-weight:normal; line-height: 1px; padding-left: 1px;vertical-align:-1px;} .training-box-v2 p.blockquote-source { font: italic 13px/18px "roboto", Arial, Helvetica, sans-serif; color: #666; margin: 10px 5px 0 0 !important; text-align:right;} #home-box-case-studies blockquote { background: url(../img/layout/bg-quote.png) no-repeat; color: #666; padding-left: 80px;} #home-box-case-studies blockquote p {margin: 0 40px 0 0;} #home-box-case-studies blockquote p:before{ display: none;} #home-box-case-studies blockquote p:after {display:none;} #home-box-case-studies blockquote p:first-child{display:block;} #home-box-case-studies blockquote p.blockquote-source { font: bold 11px/22px "roboto", Arial, Helvetica, sans-serif; color: #555; text-transform:uppercase; margin-top: 20px; text-align:right;} #home-box-case-studies a {color: #555;} /* ----------------------------------------------------*/ /* ---- Headers ---------------------------------------*/ /* ----------------------------------------------------*/ h1{font: bold 28px/28px "roboto", Arial, Helvetica, sans-serif; color:#500778; margin-bottom: 20px;} h2{font: bold 20px/28px "roboto", Arial, Helvetica, sans-serif; color:#555;} h3{font: bold 16px/24px "roboto", Arial, Helvetica, sans-serif; color:#444;} h4{font: normal 15px/22px "roboto", Arial, Helvetica, sans-serif; color:#444;} h5{font: bold 15px/20px "roboto", Arial, Helvetica, sans-serif; color:#666;} h6{font: bold 14px/20px "roboto", Arial, Helvetica, sans-serif; color:#676767; margin-bottom: 2px;} h2 a:link, h2 a:visited, h2 a:active{text-decoration: none;} h2 a:hover, h32 a:focus {text-decoration: underline;} h3 a:link, h3 a:visited, h3 a:active {text-decoration: none;} h3 a:hover, h3 a:focus {text-decoration: underline;} h4 a:link, h4 a:visited, h4 a:active{text-decoration: none;} h4 a:hover, h4 a:focus {text-decoration: underline;} #popup h1{font: bold 24px/28px "roboto", Arial, Helvetica, sans-serif; color:#555; margin-bottom: 0;} #popup h2{font: bold 18px/24px "roboto", Arial, Helvetica, sans-serif;} #popup .consult h1{font: bold 28px/28px "roboto", Arial, Helvetica, sans-serif; color:#500778; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #ccc;} #popup .consult h1 span.color-blue{font: normal 28px/28px "roboto", Arial, Helvetica, sans-serif; color:#555 !important;} #tabs-subs h2{color: #500778;} #tabs-subs .product-banner h2{font: bold 20px/22px "roboto", Arial, Helvetica, sans-serif; color:#222; margin-bottom: 10px;} #tabs-subs .product-banner h3{font: bold 16px/16px "roboto", Arial, Helvetica, sans-serif; color:#222; margin-bottom: 10px; text-transform:uppercase;} #tabs-subs .products-white h2{font: bold 19px/24px "roboto", Arial, Helvetica, sans-serif; color:#666;} #tabs-subs .products-white h3{font: bold 17px/24px "roboto", Arial, Helvetica, sans-serif; color:#500778; margin-bottom: 10px;} .locations h2 { font-size: 18px; line-height:28px;} .home h2 {font: bold 18px/26px "roboto", Arial, Helvetica, sans-serif; color: #555;} .home h3 {font: bold 16px/24px "roboto", Arial, Helvetica, sans-serif; color: #555;} .home-feature-box h3{ font: bold 16px/32px "roboto", Arial, Helvetica, sans-serif; color: #333; border-bottom: 1px solid #bbb; padding: 4px 0; margin-bottom: 10px; -moz-box-shadow: 0px 1px 0px #fff; -webkit-box-shadow: 0px 1px 0px #fff; box-shadow: 0px 1px 0px #fff;} .home-feature-box h3.feature-blog { padding-left: 40px; background: url(../img/icons/feature-blog.png) no-repeat center left;} .home-feature-box h3.feature-case-study { padding-left: 40px; background: url(../img/icons/feature-case-study.png) no-repeat center left;} .home-feature-box h3.feature-pdf { padding-left: 40px; background: url(../img/icons/feature-pdf.png) no-repeat center left;} .home-feature-box h3.feature-product { padding-left: 40px; background: url(../img/icons/feature-product.png) no-repeat center left;} .home-feature-box h3.feature-solution { padding-left: 40px; background: url(../img/icons/feature-solution2.png) no-repeat center left;} .home-feature-box h3.feature-video { padding-left: 40px; background: url(../img/icons/feature-video.png) no-repeat center left;} .home-feature-box h3.feature-white-paper { padding-left: 40px; background: url(../img/icons/feature-white-paper.png) no-repeat center left;} .home-feature-box h3.feature-ema { padding-left: 40px; background: url(../img/icons/feature-ema.png) no-repeat center left;} .home-feature-box h3.feature-trophy { padding-left: 40px; background: url(../img/icons/feature-trophy.png) no-repeat center left;} #newsletter-box h1{font: bold 26px/50px "roboto", Arial, Helvetica, sans-serif; color:#500778; text-transform: uppercase; margin-bottom:0;} #newsletter-box h2{font: bold 24px/34px "roboto", Arial, Helvetica, sans-serif; color:#444;} #newsletter-box h3{font: bold 16px/28px "roboto", Arial, Helvetica, sans-serif; color:#555; margin-bottom: 4px;} #newsletter-box h4{font: bold 18px/24px "roboto", Arial, Helvetica, sans-serif; color:#444;} #newsletter-box h5{font: bold 15px/20px "roboto", Arial, Helvetica, sans-serif; color:#666;} .newsletter-box h1{font: bold 28px/38px "roboto", Arial, Helvetica, sans-serif; color:#555;} .newsletter-box h1 em {font-family:"roboto", Arial, Helvetica, sans-serif; font-style:italic; font-weight:bold; } .newsletter-box h2{font: bold 20px/34px "roboto", Arial, Helvetica, sans-serif; color:#500778; border-bottom: 2px solid #ccc; padding-bottom: 10px; padding-right: 40px; display:inline;} .newsletter-box h3{font: bold 18px/28px "roboto", Arial, Helvetica, sans-serif; color:#555; margin-bottom: 10px;} .newsletter-box h4{ font: bold 14px/30px "roboto", Arial, Helvetica, sans-serif; background: #9f9f9f; text-align:center; color:#fff; margin-bottom: 20px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;} .h3-clock {padding-left: 34px; background: url(../img/pics/newsletter/icon-clock.png) no-repeat;} .h3-events {padding-left: 34px; background: url(../img/pics/newsletter/icon-events.png) no-repeat;} .h3-articles {padding-left: 34px; background: url(../img/pics/newsletter/icon-articles.png) no-repeat;} .h3-trivia {padding-left: 34px; background: url(../img/pics/newsletter/icon-trivia.png) no-repeat;} #events-container h2{font: bold italic 24px/34px "roboto", Arial, Helvetica, sans-serif; color:#555; margin-bottom:0;} #events-container h3{font: bold italic 18px/24px "roboto", Arial, Helvetica, sans-serif; color:#555; margin-bottom: 0; padding-top: 20px;} #events-container h4{font: normal italic 18px/24px "roboto", Arial, Helvetica, sans-serif; color:#555;} .events-container h2{font: bold italic 24px/34px "roboto", Arial, Helvetica, sans-serif; color:#500778; margin-bottom:0;} .events-container h3{font: bold italic 18px/24px "roboto", Arial, Helvetica, sans-serif; color:#555; margin-bottom: 0; padding-top: 20px;} .events-container h4{font: normal italic 18px/24px "roboto", Arial, Helvetica, sans-serif; color:#555;} /* ----------------------------------------------------*/ /* ---- Graphic Buttons -------------------------------*/ /* ----------------------------------------------------*/ a.btn-blue, a.btn-gray, a.btn-light-gray, a.btn-orange, a.btn-cyan, a.btn-red, input.btn-blue, input.btn-red, input.btn-green, input.btn-cyan { background: #500778; font: bold 14px "roboto", Arial, Helvetica, sans-serif; color:#fff; padding: 10px; text-align:center; text-transform:uppercase; text-decoration:none; border: none; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; } a.btn-blue:hover, input.btn-blue:hover { background: #3d98e6;} input.btn-blue, input.btn-red, input.btn-green, input.btn-cyan {padding: 10px 15px;} input.btn-red { background: #b32d2d url(../img/layout/bg-btn-red.png) repeat-x left center; border: #701212 solid 1px; box-shadow: inset 0 1px 0 #ce5656; -moz-box-shadow: inset 0 1px 0 #ce5656; -webkit-box-shadow: inset 0 1px 0 #ce5656;} input.btn-red:hover { background: #cc3333 url(../img/layout/bg-btn-red-over.png) repeat-x left center;} input.btn-green { background: #50b928 url(../img/layout/bg-btn-green.png) repeat-x left center; border: #2d7213 solid 1px; box-shadow: inset 0 1px 0 #7bc85e; -moz-box-shadow: inset 0 1px 0 #7bc85e; -webkit-box-shadow: inset 0 1px 0 #7bc85e;} input.btn-green:hover { background: #5bd22d url(../img/layout/bg-btn-green-over.png) repeat-x left center;} a.btn-orange { background: #f60 url(../img/layout/bg-btn-orange.png) repeat-x left center; border: #994000 solid 1px; text-shadow: 0px 1px 0px #994000; box-shadow: inset 0 1px 0 #ff8a33; -moz-box-shadow: inset 0 1px 0 #ff8a33; -webkit-box-shadow: inset 0 1px 0 #ff8a33;} a.btn-orange:hover { background: #ff7c1a url(../img/layout/bg-btn-orange-over.png) repeat-x left center;} a.btn-gray, input.btn-blue.disabled { background: #7b7b7b ; box-shadow: inset 0 1px 0 #999; -moz-box-shadow: inset 0 1px 0 #999; -webkit-box-shadow: inset 0 1px 0 #999; text-shadow: 0px 1px 0px #555;} a.btn-gray:hover, input.btn-blue.disabled:hover { background: #7b7b7b;} a.btn-blue.disabled { cursor: not-allowed; background: #7b7b7b ; box-shadow: inset 0 1px 0 #999; -moz-box-shadow: inset 0 1px 0 #999; -webkit-box-shadow: inset 0 1px 0 #999; text-shadow: 0px 1px 0px #555;} a.btn-blue.disabled:hover { background: #7b7b7b;} a.btn-light-gray { background: #eee url(../img/layout/bg-btn-light-gray.png) repeat-x left center; color:#999; border: #ddd solid 1px; box-shadow: inset 0 0 0 1px #f8f8f8; -moz-box-shadow: inset 0 0 0 1px #f8f8f8; -webkit-box-shadow: inset 0 0 0 1px #f8f8f8; text-shadow: 0px 1px 0px #fff;} a.btn-light-gray:hover { background: #f1f1f1 url(../img/layout/bg-btn-light-gray-over.png) repeat-x left center;} #serviced a.btn-cyan, #resourced a.btn-cyan {color: #fff;} #resourced.analyst-papers a.btn-cyan {background: #3d98e6 !important;padding: 10px 20px !important;} #resourced.analyst-papers a.btn-cyan:hover { background: #500778 !important;} a.btn-cyan, input.btn-cyan { background: #3d98e6; border: none; text-shadow: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;} a.btn-cyan:hover, input.btn-cyan:hover { background: #500778;} #content-right a.btn-blue, a.btn-block {display:block;} a.btn-inline-block {display: inline-block;} .iconize-none-btn, a.iconize-none-btn { background: #0172b7 url(../img/layout/bg-btn-blue.png) repeat-x left center !important; padding: 10px !important;} .iconize-none-btn:hover, a.iconize-none-btn:hover { background: #0172b7 url(../img/layout/bg-btn-blue-over.png) repeat-x left center !important;} a.btn-small, input.btn-small {font-size: 12px; } a.btn-bigmed, input.btn-bigmed {font-size: 18px;padding: 10px;} a.btn-big, input.btn-big {font-size: 21px; padding: 10px 20px;} a.btn-bigother, input.btn-bigother {font-size: 21px; padding: 10px;} a.btn-bigger, input.btn-bigger {font-size: 28px; padding: 10px 20px;} a.btn-full-schedule { background-color: #500778; font-size: 12px; color:#fff !important; padding: 5px 10px; text-transform:uppercase; text-decoration:none; text-shadow: 0px 1px 0px #500778; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;} a.btn-full-schedule:hover {background-color: #0090e6;} a.btn-product{ background: #cacaca url(../img/layout/bg-btn-product.png) repeat-x; font: bold 14px "roboto", Arial, Helvetica, sans-serif; color:#fff; padding: 10px 0px; text-align:center; text-transform:uppercase; text-decoration:none; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; text-shadow: 0px 1px 0px #7b7b7b;} a.btn-product:hover { background: #d5d5d5 url(../img/layout/bg-btn-product-over.png) repeat-x;} #which-tap, #which-tap li { margin:0;} #which-tap { text-align:center; margin: 40px auto 50px auto;} #which-tap li{ list-style: none; display: inline; padding: 0 10px;} ul.circles { margin:0 auto; display: table; position:relative;} ul.circles { background: url(../img/layout/bg-dashes.png) repeat-x left center; margin:0 auto; display: table; position:relative;} ul.circles li{ font: bold 18px/30px "roboto", Arial, Helvetica, sans-serif; background: #ccc; color:#fff; list-style: none; text-align: center; width:30px; height:30px; /*box-shadow: inset 1px 1px 3px 1px rgba(0, 0, 0, .3); -moz-box-shadow: inset 1px 1px 3px 1px rgba(0, 0, 0, .3); -webkit-box-shadow: inset 1px 1px 3px 1px rgba(0, 0, 0, .3);*/ display: inline-block; border-radius: 50%; margin: 0; margin-right: 60px; } ul.circles li.current{ background: #500778;} ul.circles li:last-child { margin-right: 0px;} /* ----------------------------------------------------*/ /* ---- Image Styles ----------------------------------*/ /* ----------------------------------------------------*/ img {border:none;} .img-border{border: 1px solid #d1d1d1; padding: 4px;} .img-rounded{border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;} .feature-box { border: 1px solid #646464; padding: 7px; margin: 0 40px 0 0; position: relative; width: 244px; height: 144px; float:left; background-color: #454545;} .feature-box img {position:absolute; top: 7px; left: 7px; width: 244px; height: 144px;} .feature-last {margin: 0;} .shadow-box img {display: block; margin: 0px auto 10px auto;} /* ----------------------------------------------------*/ /* ---- Isotope Filtering -----------------------------*/ /* ----------------------------------------------------*/ .isotope-item {z-index: 2;} .isotope-hidden.isotope-item {pointer-events: none; z-index: 1;} .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s;} .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width;} .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity;} /* ----------------------------------------------------*/ /* ---- Accordion -------------------------------------*/ /* ----------------------------------------------------*/ .accordion {} .accordion .inner {padding:10px;} .accordion h2, .accordion h3, #tabs-subs .accordion h5 { background: #f5f5f5; margin-bottom: 5px; line-height: 40px; border: #fff solid 1px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: 0 0 0 1px #ddd; -moz-box-shadow: 0 0 0 1px #ddd; -webkit-box-shadow: 0 0 0 1px #ddd; cursor: pointer;} .accordion h2 a, .accordion h3 a, #tabs-subs .accordion h5 a{text-decoration:none;} #tabs-subs .accordion h5 {line-height: 32px;} .accordion h3.h3-no-accordian-style{ border: none; margin: 0; background:none; line-height: 24px; cursor:auto; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;} a.trigger { background: url(../img/layout/accordion-plus.png) no-repeat 99% center; padding-left:10px;} a:hover.trigger {background-color:#eee;} a.trigger.open {background: #eee url(../img/layout/accordion-minus.png) no-repeat 99% center;} a:hover.trigger.open, a:focus.trigger.open, a:active.trigger.open {} #tabs-subs .accordion h2, #tabs-subs .accordion h3, #tabs-subs .accordion h5 { background: #fefefe; font-weight:normal;} #tabs-subs a:hover.trigger {background-color:#fefefe;} #tabs-subs a.trigger.open {background: #fefefe url(../img/layout/accordion-minus.png) no-repeat 99% center;} .accordion-simple .inner {padding: 20px 10px 10px 10px; border-bottom: #ddd solid 1px;} .accordion-simple h2{ line-height: 46px; border-bottom: #ddd solid 1px; cursor: pointer;} .accordion-simple h2 a{text-decoration:none;color: #3d98e6;} .accordion-simple a.trigger { background: url(../img/layout/accordion-plus-2.png) no-repeat 99% center; padding-left:10px;} .accordion-simple a:hover.trigger {background: #f5f5f5 url(../img/layout/accordion-plus-2.png) no-repeat 99% center;} .accordion-simple a.trigger.open {background: #f5f5f5 url(../img/layout/accordion-minus-2.png) no-repeat 99% center;} /*a:hover.trigger.open, a:focus.trigger.open, a:active.trigger.open {}*/ .accordion-simplev2 .inner {padding: 10px 10px 0 10px;} .accordion-simplev2 h2,#serviced .accordion-simplev2 h3 { line-height: 42px; border-bottom: #bbb solid 1px; cursor: pointer; margin: 0;} .accordion-simplev2 h2 a, .accordion-simplev2 h3 a {text-decoration:none;color: #3d98e6;} .accordion-simplev2 a.trigger { background: url(../img/layout/accordion-plus-2.png) no-repeat 99% center; padding-left:10px;} .accordion-simplev2 a:hover.trigger {background: #f5f5f5 url(../img/layout/accordion-plus-2.png) no-repeat 99% center;} .accordion-simplev2 a.trigger.open {background: #f5f5f5 url(../img/layout/accordion-minus-2.png) no-repeat 99% center;} /* ----------------------------------------------------*/ /* ---- Google Map ------------------------------------*/ /* ----------------------------------------------------*/ #map{width:100%; height: 240px;} #map.maplocation{} #map.active{} #map.infobox{display: none;} .m_tooltip{ position: absolute;text-align: center;left: 0;top: 0;z-index: -2;color: #fff; float: left;margin-top: 10px;padding: 10px; width: 300px; border: 1px solid #313436; text-shadow: 0px 0px 3px #000; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 1px 2px #000; /* FF3.5+ */ -webkit-box-shadow: 0px 1px 2px #000; /* Saf3.0+, Chrome */ box-shadow: 0px 1px 2px #000; background-image: -webkit-linear-gradient(top, rgba(31,34,36,.9), rgba(0, 0, 0, 0.7)); background-image: -moz-linear-gradient(top, rgba(31,34,36,.9), rgba(0, 0, 0, 0.7)); background-image: -moz-linear-gradient(top, rgba(31,34,36,.9), rgba(0, 0, 0, 0.7)); background-image: -ms-linear-gradient(top, rgba(31,34,36,.9), rgba(0, 0, 0, 0.7)); background-image: -o-linear-gradient(top, rgba(31,34,36,.9), rgba(0, 0, 0, 0.7)); background-image: linear-gradient(top, rgba(31,34,36,.9), rgba(0, 0, 0, 0.7));} .no-rgba .m_tooltip{ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#313436', EndColorStr='#222526');} .no-cssgradients .m_tooltip{background: #313436;} .m_tooltip p{margin-bottom: 0; font-size: 16px;} #map p a:link, #map p a:visited, #map p a:active{text-decoration: underline; color: #ccc;} #map p a:hover, #map p a:focus{text-decoration: underline; color: #bbb;} #map h2{color:#fff;} /* ----------------------------------------------------*/ /* ---- Carousel --------------------------------------*/ /* ----------------------------------------------------*/ #banners div { width: 1920px; height: 400px; overflow: hidden; float: left;} #banners div figure { display: block; width: 940px; position: relative; margin: 0 auto;} #prevhome, #nexthome { width:50px; height:50px; margin-top: -25px; display:block; text-indent:-999em; background: url(../img/carousel/controls-home.png) no-repeat 0 0; position:absolute; top: 50% ;z-index: 15;} #prevhome { background-position:0 0; left: 50%; margin-left: -460px;} #nexthome { background-position: -50px 0; right: 50%; margin-right: -460px; } #prevhome:hover {background-position:0 -50px;} #nexthome:hover {background-position:-50px -50px;} .pager-home { position:absolute;z-index: 15; bottom: 20px; right: 50%; margin-right: -460px; } .pager-home a { margin: 0 5px 0 0;text-decoration: none; display:inline-block; width:12px; height:12px; text-indent:-999em; background: transparent url(../img/carousel/pages-home.png) no-repeat 0 0;} .pager-home a.selected { background-position: 0 -12px;} #quotes { position:relative; width: 820px;} #quotes {margin: 0; padding: 0; display: block;} #quotes div { width: 820px; display: block; float: left; position:relative;} .pager-quotes {margin:10px auto 0 auto; text-align: center; height: 8px;} .pager-quotes a { margin: 0 5px 0 0;text-decoration: none; display:inline-block; width:8px; height:8px; text-indent:-999em; background: transparent url(../img/carousel/controls.png) no-repeat -2px -32px;} .pager-quotes a.selected { background: transparent url(../img/carousel/controls.png) no-repeat -12px -32px;} #quotes-right div { margin-top: 4px;} .solutions-right-box .pager-quotes {margin:0; text-align: right;} .solutions-right-box .pager-quotes span{ display: none;} .products-right-box .pager-quotes {margin:0; text-align: right;} .products-right-box .pager-quotes span{ display: none;} #features-home {width: 900px; height: 240px; margin: 0 20px; position: relative;} #carousel {width: 900px; height: 220px; } #carousel div { list-style: none; width: 260px; height: 160px; /* margin: 40px 20px 0 20px;*/ margin: 30px 20px 0 20px; padding-bottom: 25px; display: block; float: left; position:relative;} #features-home .prev,#features-home .next { width:15px; height:21px; display:block; text-indent:-999em; background: transparent url(../img/carousel/controls.png) no-repeat 0 0; position:absolute; top: 110px;} #features-home .prev {background-position:0 0;left:-20px;} #features-home .next {background-position: -18px 0; right:-20px;} #features-home .prev:hover {left:-21px; background: transparent url(../img/carousel/controls-over.png) no-repeat 0 0;} #features-home .next:hover { right:-21px; background: transparent url(../img/carousel/controls-over.png) no-repeat -18px 0;} #features-home .pager {margin:0 auto; text-align: center;} #features-home .pager a { margin: 0 5px 0 0;text-decoration: none; display:inline-block; width:8px; height:8px; text-indent:-999em; background: transparent url(../img/carousel/controls.png) no-repeat -2px -32px;} #features-home .pager a.selected { background: transparent url(../img/carousel/controls.png) no-repeat -12px -32px;} /* ----------------------------------------------------*/ /* ---- Iconize 0.5 -----------------------------------*/ /* ----------------------------------------------------*/ a[href$='.doc'], a[href$='.rtf'], a[href$='.dot'], a[href$='.docx'] { padding: 5px 20px 5px 0; background: url(../img/iconize/icon_doc.gif) no-repeat center right;} a[href$='.txt'] { padding: 5px 20px 5px 0; background: url(../img/iconize/icon_txt.gif) no-repeat center right;} a[href$='.xls'], a[href$='.xlsx'] { padding: 5px 20px 5px 0; background: url(../img/iconize/icon_xls.gif) no-repeat center right;} a[href$='.rss'], a[href$='.atom'] { padding: 5px 20px 5px 0; background: url(../img/iconize/icon_feed.gif) no-repeat center right;} a[href$='.ppt'], a[href$='.pps'], a[href$='.pptx'], a[href$='.potx'] { padding: 5px 20px 5px 0; background: url(../img/iconize/icon_pps.gif) no-repeat center right;} a[href$='.pdf'], .iconize-pdf { padding: 5px 20px 5px 0; background: url(../img/iconize/icon_pdf.gif) no-repeat center right;} a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'], a[href$='.bzip'], a[href$='.ace'] { padding: 5px 20px 5px 0; background: url(../img/iconize/icon_archive.gif) no-repeat center right;} a[href$='.ttf'] { padding: 5px 20px 5px 0; background: url(../img/iconize/icon_ttf.gif) no-repeat center right;} a[href ^="mailto:"] { padding: 5px 20px 5px 0; background: url(../img/iconize/icon_mailto.gif) no-repeat center right;} .iconize-calculator { padding: 5px 20px 5px 0; background: url(../img/icons-fam/calculator.png) no-repeat center right;} #resourced a[href$='.pdf']{padding: 0px; background:none;} .iconize-pc { padding: 5px 34px 5px 0 !important; background: url(../img/icons/premium-content.png) no-repeat center right !important;} /*a[href^="http:"],*/ .iconize-popup{ background: url(../img/icons/popup.png) no-repeat right center; padding-right: 14px;} /* use this class to make sure that images won't get iconized */ .iconize-none, a.iconize-none {padding-right: 0px !important; background: none !important;} .solutions-content-right a[href$='.pdf'], .tabs-content-right a[href$='.pdf']{padding-right: 0px !important; background: none !important;} .home-feature-box a[href$='.pdf']{padding: 0px !important; background:none !important;} /* JW Player hide logo*/ #mediaplayer_logo { display: none;} /* ----------------------------------------------------*/ /* ---- Media Queries ---------------------------------*/ /* ----------------------------------------------------*/ /* CSS for View Full Site */ .rwd-display-options{ text-align: center; } .rwd-display-option{ cursor: pointer; } #view-responsive{ display: inline;} #view-full{ display: none; } /* http://www.websitedimensions.com/ */ /* -- iPad [Landscape] -- */ @media only screen and (max-width: 1024px) {} /* -- iPad [Portrait] -- */ @media only screen and (max-width: 768px) { .hidden-ipad {display: none;} } /* -- iPhone [Landscape] -- */ @media only screen and (max-width: 640px) { #view-full{ display: inline; } #view-responsive{ display: none;} .responsive-img{max-width:100%; height:auto;} .hidden-iphone {display: none;} #nav, #current-title, #breadcrumbs, #footer-dark, #copyright {width: 480px;} #header,#sub, #container, #content, #content.fullwidth, #breadcrumbs, #footer {width: 440px} #content, #content-left, #copyright, #nav-dark, .tabs-content-left{float: none; } #tagline, #nav-header, #current-title p, #footer-map {display: none;} #current-title p {display: block;} #search{width: 180px;} #search input#search-box{width: 140px;} #nav-top, #nav {min-height: 80px;} #nav {border: none;} #nav li#home a{width: 96px;} #nav li#products a{width: 124px;} #nav li#solutions a{width: 126px;} #nav li#resources a{width: 126px;} #nav li#support a{width: 119px;} #nav li#training a{width: 118px;} #nav li#services a{width: 118px;} #nav li#partners a{width: 119px;} #nav li#about a{width: 109px;} #nav-sub {background: #e6e6e6 url(../img/layout/bg-nav-sub.png) repeat-x bottom;} #sub li.on {background: none;} #title {height: 80px;} #bottom, #nav-dark{display: none;} #bottom-dark { height: auto;} #footer-dark { background: none;text-align:center; height: auto;} #sub li {margin: 0;} #container{padding: 20px 0 20px 0;} #content.fullwidth .column-half, #content.fullwidth .column-third, #content.fullwidth .column-forth{width: auto; float:none; margin-right: 0;} #content.fullwidth .column-line{margin-right: 0; border-right: none;} #content img {max-width:100%; height:auto;} #content .column-half, #content .column-third, #content .column-forth, #content .column-course{width: auto; float:none; margin-right: 0;} #content.fullwidth .column-half-v2, #content.fullwidth .column-half, #content.fullwidth .column-third, #content.fullwidth .column-twothirds, #content.fullwidth .column-forth{width: auto; float:none; margin-right: 0;} #content.fullwidth #tabs-subs .column-half, #content.fullwidth #tabs-subs .column-third, #content.fullwidth #tabs-subs .column-forth{width: auto; float:none; margin-right: 0;} #content.fullwidth #tabs-subs .column-demo{width: auto; float:none; margin-right: 0;} #content.fullwidth #tabs-subs .column-demo-right{width: auto; float:none; margin-right: 0;} iframe {width: 100% !important;} #content.home{ width: 100%;} #home-banners{height: auto;} #banners div { width: 640px; height: 240px; } #banners div figure { width: 90%; } #banners div figure.hidden-iphone { display: none;} #banners div{background-size: cover !important;} #banners div figure, #banners div figure a{background-size: cover !important;} #banners div figure, #banners div figure a{ width: 150px; height: 24px; display:block; background: none; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius:4px; font: bold 14px/24px "roboto", Arial, Helvetica, sans-serif; color:#fff; text-align:center;} #banners div figure { margin-top: 190px; margin-left: 10%;background-color: rgba(0, 0, 0, 0.3);} #banners div figure span{ display:inline !important; padding: 0 10px; } #banners div figure a{margin: 0 !important;} #banners div figure a { background-position: 0 !important;} #prevhome { background-position:0 0; left: 50%; margin-left: -45%;} #nexthome { background-position: -50px 0; right: 50%; margin-right: -45%; } .pager-home { bottom: 20px; right: 50%; margin-right: -45%; } #home-features-slides{width: 95%;} #features-home {width: 90%;} #carousel {width: 460px;} #carousel div {width: 360px; background: none; margin: 40px 90px 0 90px;} .home-feature-box {width: 310px; background: #f7f7f7;} #home-features-shadow{ width: 100%;} #home-left { width: 100%; float:none; margin-right: 0px;} #home-box-tabs {width: 100%; min-height: 238px;} #home-box-tabs-bg { display: none;} #tabs-home .nav-tabs li{} #tabs-home .nav-tabs li a {padding: 0 15px;} #home-box-video { margin-top: 20px;} #home-box-video {width: auto;} #home-box-video p{text-align:left; margin-top: 40px;} #home-box-video-bg {background-size: cover;} #home-video { float:left; margin: 10px 20px 0px 15px;} #home-box-case-studies blockquote { background: none; padding: 0;} #home-box-case-studies blockquote p {margin: 0;} #home-box-case-studies blockquote p:first-child:before {content: "\201C"; font-size: 13px; display:inline; line-height: 1px; margin-right: 5px; vertical-align:0px;} #quotes { width: 100%;} #quotes div {width: 100%;} #content-right{display: none;} .shadow-box{margin-bottom: 20px;} .shadow-box-bg{display: none;} #content-right.content-right-show{display: block; width: 100%; margin-top: 20px;} #iPicture{ display: none;} .tabs-content-right {float:none;width: 100%;} .solutions-content-right {float:none;width: 100%;} .events-content-right {float:none;width: 100%;} .product-img, .product-txt, .product-btn{ display: block; width: 100%; padding: 0;} .product-banner-img, .product-banner-txt, .product-banner-btn{ float: none; width: auto;} .product-banner-txt{ margin: 0 20px;} .product-banner-btn{ margin: 0 20px; padding-bottom: 20px;} .product-img img{max-width:100%;height:auto;} #product-overview-img { display: none;} #gigastor-calculator .float-right {float: none;} #tabs-subs .nav-tabs { height:auto;} #tabs-subs .nav-tabs:after { visibility: hidden; display: block; content: ""; clear: both; height: 0;} #tabs-subs .nav-tabs li{ border-bottom: 1px solid #ccc;border-bottom: 1px solid #eee; width: 49%;} .services-img, .services-txt, .services-btn{ display: block; width: 100%; padding: 0; text-align:left;} .services-link .services-arrow { margin: 0;} /*.product-banner-img, .product-banner-txt, .product-banner-btn{ float: none; width: auto;} .product-banner-txt{ margin: 0 20px;} .product-banner-btn{ margin: 0 20px; padding-bottom: 20px;} .product-img img{max-width:100%;height:auto;} #product-overview-img { display: none;}*/ .services-banner-text { width: 100%; float:none;} .services-banner-sub { width: 100%; float:none; padding-left: 10px;} #industries .nav-tabs { height:auto;} #industries .nav-tabs:after { visibility: hidden; display: block; content: ""; clear: both; height: 0;} #industries .nav-tabs li{ border-bottom: 1px solid #ccc;border-bottom: 1px solid #eee; width: 49%;} #solutions-overview .solutions-box img {float:left; margin: 20px 30px 30px 0;} .solutions-icon { min-height:120px; } #tabs-subs .list-wrap, .solutions-box {padding: 20px;} .solutions-content-left{float: none; width: 400px;} .tabs-content-left img, .solutions-content-left img{ max-width:100%; height:auto;} .tabs-content-left{float: none; width: 400px;} .solutions-content-left img{ max-width:100%; height:auto;} .case-feature{ width: 85%; min-height: 90px;} .case-product{ display:none;} .resource-feature, .resource-feature.wp-feature{ width:100%; min-height: 90px; margin: 10px 0;} .resource-img {float: none; margin: 0 0 20px 0;} .demos-form { margin-bottom: 20px;} #video-options { float: none; margin: 10px 0 0 0;} .video-box {padding: 5px;} .video-box img{max-width:100%; height:auto;} .column-video{width: 190px; float:left; margin: 1px 10px 20px 10px;} .video-box-shadow { display: none;} .support-titles { width: auto; border-right: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;} .features-sub .feature-pc {width: 360px; height: auto; padding: 0 10px;} .case-quote img { float: none; margin-right: 0px;max-width:100%;height:auto;} .ap-img, .ap-txt, .ap-btn { display:block;width: auto; margin: 0; padding:0;} #niu-logo-main, #niu-logo-sub {width:0px; overflow:hidden; padding:0; height: 40px;} #niu-title-main h2 {line-height: 40px;} #content .training-box {min-height: 40px;} #niu-course-box { display: none;} label, .label{width:160px;} .input-190px, .form-inputs-190px input[type ^="text"], .form-inputs-190px input[type ^="password"], select.input-190px, .form-inputs-190px select {width: 180px;} .input-210px, select.input-210px{width: 170px;} .input-260px, .form-inputs-260px textarea, .form-inputs-260px input[type ^="text"], .form-inputs-260px input[type ^="password"], select.input-260px, .form-inputs-260px select {width: 240px;} .input-280px, select.input-280px{width: 380px;} .input-290px, select.input-290px{width: 180px;} .input-390px, select.input-390px{width: 190px;} .partners-box { padding: 10px;} .timeline {display: none;} /* Force table to not be like tables anymore */ #popup table, #popup thead, #popup tbody, #popup th, #popup td, #popup tr { display: block; } #popup tr { } #popup td { /* Behave like a "row" */ border: none; position: relative; } #popup td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap;} .calculator-img-one, .calculator-img-two, .calculator-img-three { padding-top: 0px;} } @media only screen and (max-width: 568px) { #banners div { width: 568px; height: 230px; } #carousel div {margin: 30px 60px 0 60px;} } @media only screen and (max-width: 480px) { #banners div { width: 480px; height: 230px; } #carousel div {margin: 40px 20px 0 20px;} } /* -- iPhone [Portrait] -- */ @media only screen and (max-width: 360px) { #nav, #current-title, #breadcrumbs, #footer-dark, #copyright {width: 100%;} #header,#sub, #container, #content, #content.fullwidth, #breadcrumbs, #footer {width: 100%} #content, #content-left, #content.fullwidth, #content.home, #breadcrumbs{width: 300px; padding: 0 10px;} #header { height: 80px;padding-top:1px;} #logo {float: none; margin: 10px auto;} #search{width: 190px; margin: 10px 25px 0 0;} #search input#search-box{width: 160px;} #flags-dropdown {margin: 10px 5px 0 0;} #nav-top, #nav {min-height: 120px;} #nav {border: none; width: 320px; margin: 0 auto;} #nav li { font-size: 13px;} #nav li#home a{width: 88px;} #nav li#products a{width: 112px;} #nav li#solutions a{width: 114px;} #nav li#resources a{width: 110px;} #nav li#support a{width: 102px;} #nav li#training a{width: 102px;} #nav li#partners a{width: 102px;} #nav li#about a{width: 102px;} .solutions-content-left{width: 100%;} .tabs-content-left{width: 100%;} #tabs-subs .nav-tabs li{ font-size: 12px;} #banners div figure { margin-top: 120px; margin-left: 5%;} #banners div figure, #banners div figure a{ width: 130px; overflow:hidden; } #banners div { width: 360px; height: 160px; } #carousel {width: 320px;} #carousel div {width: 320px; height: 160px; background: none; margin: 30px 20px 0 20px;} #home-features { height: 0px;} #home-features-slides{width: 90%; display: none;} .home-feature-box {width: 180px; background: #f7f7f7; height: 150px; padding: 10px 20px 10px 20px;} .home-feature-box p { font-size: 14px;} #home-left { padding-top: 20px;} #tabs-home .nav-tabs li{ font-size: 12px;} #tabs-home .nav-tabs li a {padding: 0 8px;} #home-box-video p{text-align:center; margin-top: 0px;} #home-video { float:none; margin: 10px auto;} .column-video{width: 260px;} #niu-title-main h2 { font-size: 16px;} .case-study-thumb{float: none;width: auto;margin: 5px 0px 10px 0;} .accordion-simple .white-paper { float: none;} .features-sub .feature-pc {width: 220px; text-align: center;} #pc-wp img.align-left, .feature-pc img.align-left{ margin: 0 auto 20px auto; float:none;} label, .label{width:110px; font-size: 14px;} .label-140px, .form-labels-140px label, .form-labels-140px .label {width: 110px;} .input-260px, .form-inputs-260px textarea, .form-inputs-260px input[type ^="text"], .form-inputs-260px input[type ^="password"], select.input-260px, .form-inputs-260px select {width: 150px;} .input-280px, select.input-280px{width: 230px;} .column-line {margin-right: 0; border-right: none !important;} .news-logo { float: none; margin: 10px 0; display:block;} .width-50-percent {width: 100%} .width-33-percent {width: 100%;} /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } tr { } td { /* Behave like a "row" */ border: none; position: relative; } td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap;} td.td-width-5{width:100%;} td.td-width-10{width:100%;} td.td-width-15{width:100%;} td.td-width-20{width:100%;} td.td-width-25{width:100%;} td.td-width-30{width:100%;} td.td-width-35{width:100%;} td.td-width-40{width:100%;} td.td-width-45{width:100%;} td.td-width-55{width:100%;} td.td-width-50{width:100%;} td.td-width-60{width:100%;} td.td-width-70{width:100%;} td.td-width-75{width:100%;} td.td-width-80{width:100%;} td.td-width-90{width:100%;} td.td-width-100{width:100%;} td.td-align-right, th.td-align-right, tr.tr-align-right td{text-align:left;} td.td-align-center, th.td-align-center, tr.tr-align-center td{text-align:left;} input[type^="text"], input[type^="password"], select, textarea { width: 100%;} h1{font: bold 22px/24px "roboto", Arial, Helvetica, sans-serif; color:#500778; margin-bottom: 20px;} h2{font: bold 18px/24px "roboto", Arial, Helvetica, sans-serif; color:#555;} h3{font: bold 15px/22px "roboto", Arial, Helvetica, sans-serif; color:#444;} h4{font: normal 14px/20px "roboto", Arial, Helvetica, sans-serif; color:#444;} h5{font: bold 14px/20px "roboto", Arial, Helvetica, sans-serif; color:#666;} h6{font: bold 14px/20px "roboto", Arial, Helvetica, sans-serif; color:#676767; margin-bottom: 2px;} img.align-left{display: block; float: none; margin: 20px 0;} img.align-right{display: block; float: none; margin: 20px 0;} #current-title {display: none;} } @media only screen and (max-width: 320px) { #banners div { width: 320px; height: 140px; } #banners div figure { margin-top: 100px; margin-left: 5%;} #search{width: 200px; margin: 10px 20px 0 0;} } /* -- Print -- */ @media print { * {background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } #top, #nav-top, #content-right, #nav-breadcrumbs, #bottom {display:none;} }