Chris@0: /* --------------- System Tabs  --------------- */
Chris@0: 
Chris@0: div.tabs {
Chris@18:   margin-bottom: 20px;
Chris@0:   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
Chris@0: }
Chris@0: .tabs ul.primary {
Chris@0:   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
Chris@0: }
Chris@0: .tabs ul.primary li a {
Chris@18:   display: block;
Chris@18:   height: 1.8em;
Chris@18:   padding: 0 10px 3px;
Chris@0:   color: #000;
Chris@18:   border-width: 1px;
Chris@18:   border-style: solid solid none solid;
Chris@18:   border-color: #bbb;
Chris@0:   background-color: #ededed;
Chris@18:   text-shadow: 0 1px 0 #fff;
Chris@18:   font-size: 0.929em;
Chris@0:   line-height: 1.9;
Chris@0: }
Chris@0: .tabs ul.primary li.is-active a {
Chris@18:   border: 1px solid #bbb;
Chris@14:   background-color: #fff;
Chris@0: }
Chris@14: 
Chris@0: @media screen and (max-width: 37.5em) { /* 600px */
Chris@0:   .tabs ul.primary {
Chris@0:     border-bottom: 1px solid #bbb;
Chris@0:   }
Chris@0:   .tabs ul.primary li {
Chris@0:     display: block;
Chris@0:     margin: 0;
Chris@0:   }
Chris@0:   .tabs ul.primary li a {
Chris@0:     padding: 5px 10px;
Chris@0:   }
Chris@0:   .tabs ul.primary li.is-active a {
Chris@0:     border-bottom: none;
Chris@0:   }
Chris@0: }
Chris@14: 
Chris@0: @media screen and (min-width: 37.5em) { /* 600px */
Chris@0:   .tabs ul.primary {
Chris@18:     overflow: hidden;
Chris@18:     height: auto;
Chris@18:     margin: 0;
Chris@18:     padding: 0 3px;
Chris@18:     white-space: nowrap;
Chris@18:     border: none;
Chris@0:     border-collapse: collapse;
Chris@18:     background: transparent url(../../images/tabs-border.png) repeat-x left bottom;
Chris@0:     line-height: normal;
Chris@0:   }
Chris@0:   .tabs ul.primary li {
Chris@0:     display: block;
Chris@0:     float: left; /* LTR */
Chris@18:     margin: 0 5px 0 0; /* LTR */
Chris@0:     vertical-align: bottom;
Chris@0:   }
Chris@0:   [dir="rtl"] .tabs ul.primary li {
Chris@18:     float: right;
Chris@0:     margin: 0 0 0 5px;
Chris@0:   }
Chris@0:   .tabs ul.primary li a {
Chris@0:     float: left; /* not LTR */
Chris@0:     border-top-left-radius: 6px;
Chris@0:     border-top-right-radius: 6px;
Chris@0:   }
Chris@0:   .tabs ul.primary li.is-active a {
Chris@0:     border-bottom: 1px solid #fff;
Chris@0:   }
Chris@0: }
Chris@0: .tabs ul.secondary {
Chris@18:   overflow: hidden;
Chris@0:   margin: 5px;
Chris@0:   padding: 0.5em 0;
Chris@18:   border-bottom: none;
Chris@0: }
Chris@0: .tabs ul.secondary li {
Chris@0:   display: block;
Chris@0:   float: left; /* LTR */
Chris@0:   margin: 0;
Chris@0:   padding: 0 1em;
Chris@18:   border-right: 1px solid #ccc; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"] .tabs ul.secondary li {
Chris@18:   float: right;
Chris@18:   border-right: none;
Chris@0:   border-left: 1px solid #ccc;
Chris@0: }
Chris@0: .tabs ul.secondary li:last-child {
Chris@0:   border-right: none; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"] .tabs ul.secondary li:last-child {
Chris@0:   border-left: none;
Chris@0: }
Chris@0: .tabs ul.secondary li:first-child {
Chris@0:   padding-left: 0; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"] .tabs ul.secondary li:first-child {
Chris@0:   padding-right: 0;
Chris@0: }
Chris@0: .tabs ul.secondary li a {
Chris@0:   display: inline;
Chris@0:   padding: 0.25em 0.5em;
Chris@0:   text-decoration: none;
Chris@0: }
Chris@0: .tabs ul.secondary li a.is-active {
Chris@0:   border-bottom: none;
Chris@0:   border-radius: 5px;
Chris@18:   background: #f2f2f2;
Chris@0: }