jquery.scrolltabs.psk/examples/css/demo.css

jQuery highly configurable plugin to handle scrolling tabs horizontally when not enough space is available.

div.navbar {
  margin-bottom: 0px;
}

div.colored_header {
  color: #FFFFFF;
  background: #0baed4; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMGJhZWQ0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBkODVhMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background: -moz-linear-gradient(-45deg, #0baed4 0%, #0d85a3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#0baed4), color-stop(100%,#0d85a3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #0baed4 0%,#0d85a3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #0baed4 0%,#0d85a3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #0baed4 0%,#0d85a3 100%); /* IE10+ */
  background: linear-gradient(135deg, #0baed4 0%,#0d85a3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0baed4', endColorstr='#0d85a3',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}

div.indented_text {
  margin-left: 30px;
}

.section_title {
  margin-top: 40px;
  margin-bottom: 10px;
  border-bottom: 1px solid #999;
  padding-bottom: 5px;
  border-left: 5px solid #7ba4c7;
  padding-left: 10px;
}

#header_image {
  background: transparent url(../images/header.png) no-repeat top left;
  height: 176px;
}

div.jumbotron {
  border: 1px solid #DDD;
}

span.pre_comment {
  color: #9999AA;
  font-weight: bold;
}

span.pre_class {
  color: #7c2984;
}

span.pre_tag {
  color: #017b95;
}

span.pre_before {
  color: #e19215;
}

span.pre_attribute {
  color: #28ab1a;
}

@media screen and (max-width: 1200px){
  #header_image {
    background: transparent url(../images/header-940.png) no-repeat top left;
  }
}

@media screen and (max-width: 1000px){
  #header_image {
    background: transparent url(../images/header-compressed.png) no-repeat top left;
  }
}

div.footer {
  margin-top: 40px;
  padding-top: 15px;
  padding-bottom: 25px;
  color: #FFFFFF;
  text-align: center;
  background: #45484d; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDU0ODRkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background: -moz-linear-gradient(-45deg, #45484d 0%, #000000 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #45484d 0%,#000000 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #45484d 0%,#000000 100%); /* IE10+ */
  background: linear-gradient(135deg, #45484d 0%,#000000 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}

/******** CUSTOM SCROLL TABS ***********/

#custom_style_container1 {
  position: relative;
  left: 0px;
  right: 0px;
  background: url(../images/toolbar-bg.jpg) repeat-x;
  height: 40px;
  margin-bottom: 10px;
}

#custom_style_container1 .style1 {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  background: url(../images/toolbar-bg.jpg) repeat-x;
  text-align: left;
}

/****** PLUGIN-SPECIFIED CLASS NAMES (though it's our proprietary plugin) ********/
.style1 .scroll_tab_left_button::before {
  content: "";
  padding: 0px;
}

.style1 .scroll_tab_right_button::before {
  content: "";
  padding: 0px;
}

.style1 div.scroll_tab_inner {
  height: 40px;
  background: url(../images/toolbar-bg.jpg) repeat-x;
}

.style1 div.scroll_tab_inner span {
  padding-left: 20px;
  padding-right: 20px;
  line-height: 40px;
  font-size: 14px;
  background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -25px -40px;
  color: #FFFFFF;
  cursor: pointer;
}

.style1 div.scroll_tab_inner span.scroll_tab_first {
  background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -40px -40px;
}

.style1 div.scroll_tab_inner span.scroll_tab_over {
  background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -25px 0px !important;
}

.style1 div.scroll_tab_inner span.scroll_tab_first.scroll_tab_over {
  background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -40px 0px !important;
}

.style1 div.scroll_tab_inner span.scroll_tab_first.scroll_tab_over {
  background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -40px 0px !important;
}

.style1 div.scroll_tab_inner span.scroll_tab_left_finisher {
  padding: 0px;
  width: 10px;
  background: transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px -160px;
}

.style1 div.scroll_tab_inner span.scroll_tab_left_finisher.scroll_tab_over {
  background-position: 0px -120px !important;
}
.style1 div.scroll_tab_inner span.scroll_tab_left_finisher.tab_selected {
  background-position: 0px -200px;
}

.style1 div.scroll_tab_inner span.scroll_tab_right_finisher {
  padding: 0px;
  width: 10px;
  background: transparent url(../images/scroll_tab_bg.jpg) no-repeat right -160px;
}
.style1 div.scroll_tab_inner span.scroll_tab_right_finisher.scroll_tab_over {
  background-position: right -120px !important;
}
.style1 div.scroll_tab_inner span.scroll_tab_right_finisher.tab_selected {
  background-position: right -200px;
}


.style1 .scroll_tab_left_button {
  height: 40px;
  background: transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px -40px;
}

.style1 .scroll_tab_left_button.scroll_arrow_over {
  background: transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px 0px;
}

.style1 .scroll_tab_left_button.scroll_arrow_over {
  background: transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px 0px;
}

.style1 .scroll_tab_left_button.scroll_arrow_disabled {
  background: transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px -80px;
}

.style1 .scroll_tab_right_button {
  height: 40px;
  background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -474px -40px;
}

.style1 .scroll_tab_right_button.scroll_arrow_over {
  background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -474px 0px;
}

.style1 .scroll_tab_right_button.scroll_arrow_disabled{
  background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -474px -80px;
}

.style1 div.scroll_tab_inner span.tab_selected {
  background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -25px -80px;
}

.style1 div.scroll_tab_inner span.tab_selected.scroll_tab_first {
  background-position: -40px -200px;
}