/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */ /*-------------------------------------------------- REQUIRED to hide the non-active tab content. But do not hide them in the print stylesheet! --------------------------------------------------*/ .tabber { display:none; } .tabberlive .tabbertabhide { display:none; } /*-------------------------------------------------- ul.tabbernav = the tab navigation list li.tabberactive = the active tab --------------------------------------------------*/ ul.tabbernav { margin:0px; padding: 5px 0px 0px 0px; border-bottom: 1px solid #d9d9d9; } ul.tabbernav li { white-space:nowrap; list-style: none; margin: 0px; padding:0px 5px 0px 0px; display: inline; } ul.tabbernav li a { color: #000000; font-size:12px; line-height:1.5em; font-weight:bold; padding: 5px 8px 5px 8px; margin: 0 0 -1px 0; border: 1px solid #d9d9d9; border-bottom: none; background: #e0e0e0; text-decoration: none; display: inline-block; min-width: 50px; text-align: center; } ul.tabbernav li a:link { color: #000000; } ul.tabbernav li a:visited { color: #000000; } ul.tabbernav li a:hover { color: #fff; background:#abadb3; border-color: #d9d9d9; } ul.tabbernav li.tabberactive a { background-color: #fff; border-bottom: 1px solid #fff; } ul.tabbernav li.tabberactive a:hover { color: #000; background: white; border-bottom: 1px solid white; } /*-------------------------------------------------- .tabbertab = the tab content Add style only after the tabber interface is set up (.tabberlive) --------------------------------------------------*/ .tabbertab { display: flex; align-items: center; } .tabberlive .tabbertab { margin:0; padding:12px 0 6px 0; border:1px solid #d9d9d9; border-top:0px; text-align: left; /* If you don't want the tab size changing whenever a tab is changed you can set a fixed height */ min-height:80px; height:auto; /* If you set a fix height set overflow to auto and you will get a scrollbar when necessary */ /* overflow:auto; */ } /* If desired, hide the heading since a heading is provided by the tab */ .tabberlive .tabbertab h2 { display:none; } .tabberlive .tabbertab p { margin:0px; padding:0px; } .tabberlive .tabbertab p form { margin:0px; padding:0px; } .top-tab-logo { float:left; width:130px; text-align:center; } .top-tab-logo img { max-width:90px; margin-top: 10px; } .top-tab-search { float:left; display: block; /* width: 70%; */ } .top-tab-search input { font-size: 16px; padding: 5px; border: 1px solid #ccc; margin-top: 6px; -webkit-appearance: none; } .top-tab-search input[type="submit"], .gsc-search-button button { cursor: pointer; } /* Google search box */ form.gsc-search-box { width: 50% !important; min-width: 500px; float: left; } .gsc-control-cse { padding-bottom: 10px; padding-top: 5px; } img.google-logo { /* float:left; */ margin: 0 15px 0 15px; width: 60px; } @media screen and (max-width:1100px) { /* Google search field */ form.gsc-search-box { min-width: 350px !important; } } @media screen and (max-width:750px) { /* For mobile phones: */ #___gcse_0 { width: 100% !important; margin: 0 !important; padding: 0; /* padding: 5px 15px; */ } .gsc-search-button button { height: 32px !important; padding: 0 15px !important; margin: 0 !important; } /* Google search field */ form.gsc-search-box { min-width: 250px !important; } img.google-logo { margin: 18px 10px 0 10px; } ul.tabbernav li a { line-height: 1.8em; } .tabbertab { flex-direction: column; } .tabbertab-google { flex-direction: row; } .tabbertab-top { min-height: 80px !important; padding-top: 15px !important; padding-bottom: 10px !important; } .top-tab-logo { text-align: center; /* height: 30px; */ } .top-tab-logo img { margin: 5px !important; max-height: 100%; } .top-tab-search { /* width:100%; */ text-align: center; display: block; } }