Chris@0: /**
Chris@0:  * @file
Chris@0:  * Override of misc/vertical-tabs.css.
Chris@0:  */
Chris@0: 
Chris@0: .vertical-tabs {
Chris@0:   position: relative;
Chris@0:   overflow: hidden;
Chris@0:   margin: 10px 0;
Chris@0:   border: 1px solid #bdbdbd;
Chris@0:   border-radius: 4px;
Chris@0:   background: #e6e5e1;
Chris@0: }
Chris@0: .vertical-tabs__menu {
Chris@0:   float: left; /* LTR */
Chris@0:   width: 240px;
Chris@0:   margin: 0 -100% -1px 0; /* LTR */
Chris@0:   padding: 0;
Chris@0:   border-bottom: 1px solid #ccc;
Chris@0:   line-height: 1;
Chris@0: }
Chris@0: [dir="rtl"] .vertical-tabs__menu {
Chris@0:   float: right;
Chris@0:   margin: 0 0 -1px -100%;
Chris@0: }
Chris@0: .vertical-tabs__menu-item {
Chris@0:   position: relative;
Chris@0: }
Chris@0: .vertical-tabs__menu-item.is-selected {
Chris@0:   z-index: 1;
Chris@0:   overflow-x: hidden;
Chris@0:   width: 100%;
Chris@0:   border-right: 1px solid #fcfcfa; /* LTR */
Chris@18:   border-bottom: 1px solid #b3b2ad;
Chris@0:   box-shadow: 0 5px 5px -5px hsla(0, 0%, 0%, 0.3);
Chris@0: }
Chris@0: .vertical-tabs__menu-item.last {
Chris@0:   border-bottom: none;
Chris@0: }
Chris@0: [dir="rtl"] .vertical-tabs__menu-item.is-selected {
Chris@18:   border-right: none;
Chris@0:   border-left: 1px solid #fcfcfa;
Chris@0: }
Chris@0: .vertical-tabs__menu-item:focus,
Chris@0: .vertical-tabs__menu-item:active {
Chris@0:   z-index: 2;
Chris@0: }
Chris@0: .vertical-tabs__menu-item a {
Chris@0:   display: block;
Chris@0:   padding: 10px 15px 15px;
Chris@18:   text-decoration: none;
Chris@0:   border-bottom: 1px solid #b3b2ad;
Chris@0:   background-color: #f2f2f0;
Chris@0:   text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
Chris@0: }
Chris@0: .vertical-tabs__menu-item:last-child a {
Chris@0:   border-bottom: 0;
Chris@0: }
Chris@0: .vertical-tabs__menu-item.is-selected a,
Chris@0: .vertical-tabs__menu-item a:hover,
Chris@0: .vertical-tabs__menu-item a:focus {
Chris@0:   background: #fcfcfa;
Chris@0:   text-shadow: none;
Chris@0: }
Chris@0: .vertical-tabs__menu-item a:focus {
Chris@0:   outline: none;
Chris@0: }
Chris@0: .vertical-tabs__menu-item a:focus .vertical-tabs__menu-item-title {
Chris@0:   text-decoration: underline;
Chris@0: }
Chris@0: .vertical-tabs__menu-item a:active .vertical-tabs__menu-item-title,
Chris@0: .vertical-tabs__menu-item.is-selected a:focus .vertical-tabs__menu-item-title {
Chris@0:   text-decoration: none;
Chris@0: }
Chris@0: .vertical-tabs__menu-item.is-selected a {
Chris@18:   padding-left: 11px; /* LTR */
Chris@18:   text-decoration: none;
Chris@0:   color: #004f80;
Chris@0:   border-bottom: none;
Chris@0: }
Chris@0: [dir=rtl] .vertical-tabs__menu-item.is-selected a {
Chris@18:   padding-right: 11px;
Chris@0:   padding-left: 15px;
Chris@0: }
Chris@0: .vertical-tabs__menu-item.is-selected a:hover,
Chris@0: .vertical-tabs__menu-item.is-selected a:focus {
Chris@0:   color: #007ecc;
Chris@0: }
Chris@0: [data-vertical-tabs-panes] {
Chris@0:   background-color: #fcfcfa;
Chris@0: }
Chris@0: .vertical-tabs__panes {
Chris@0:   margin: 0 0 0 240px; /* LTR */
Chris@0:   padding: 10px 15px 10px 15px;
Chris@0:   border-left: 1px solid #a6a5a1; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"] .vertical-tabs__panes {
Chris@0:   margin: 0 240px 0 0;
Chris@18:   border-right: 1px solid #a6a5a1;
Chris@0:   border-left: none;
Chris@0: }
Chris@0: .vertical-tabs__panes:after {
Chris@0:   display: table;
Chris@0:   clear: both;
Chris@18:   content: "";
Chris@0: }
Chris@0: .vertical-tabs__pane {
Chris@0:   margin: 0;
Chris@0:   padding: 0;
Chris@18:   color: #595959;
Chris@0:   border: 0;
Chris@0: }
Chris@0: .vertical-tabs__menu-item-summary {
Chris@0:   display: block;
Chris@0:   padding-top: 0.4em;
Chris@0:   color: #666;
Chris@0: }
Chris@0: .vertical-tabs__pane > summary {
Chris@0:   display: none;
Chris@0: }