html,
body {
height: 100%;
}
body {
font-family: Helvetica, sans-serif;
font-size: 12px;
color: #333;
margin: 0;
padding: 0;
background: #0260bb;
line-height: normal;
}
/*Fix HTML editor blue background design bug due to update */
.mceContentBody {
background: #FFFFFF;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
margin: 0;
margin-bottom: 5px;
line-height: 100%;
}
h2 {
font-family: 'helvetica', sans-serif;
font-size: 28px;
font-weight: bold;
margin: 0;
margin-bottom: 15px;
margin-top: 10px;
line-height: 100%;
}
h3,
h4,
h6 {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
margin: 0;
margin-bottom: 5px;
line-height: 100%;
}
h5 {
font-family: Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
a {
text-decoration: none;
color: #0260ba;
}
.moduletable h3 {
font-size: 16px;
line-height: 100%;
margin-bottom: 5px;
color: #0260ba;
}
.moduletable p {
margin: 0 0 10px 0;
}
/*global image settings;*/
img {
/*width: 100%; this function distorts all small images becuase the site wasnt designed with the correct sized divs, in other words the orginal dev is a cock*/
width: 100%;
margin: auto;
}
.caption {
max-width: 100%;
max-height: 100%;
}
/*video css for embeded videos*/
.video-container {
position:relative;
overflow:hidden;
padding-bottom:56.25%;
padding-top:30px;
height:0;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
/*css which fixes the custum table buttons I (Doug) made*/
.table2 {
width: 100%;
position: relative;
overflow: hidden;
}
@media all and (max-width:500px){
table2{
width:100%;
}
td{
display:block;
width:100%;
}
tr{
display:block;
margin-bottom:30px;
}
}
custom {
display: block;
max-width:300px;
max-height:73px;
width: auto;
height: auto;
}
fitting-time-img {
max-width:13px;
max-height:14px;
width: auto;
height: auto;
}
fitting-difficulty-img {
max-width:61px;
max-height:15px;
width: auto;
height: auto;
}
/* input,
select {
border: 1px solid #ccc;
padding: 2px;
color: #666;
font-size: 11px;
}
#wrapper input,
#wrapper select {
border: 1px solid #eee;
border-left: 1px solid #ddd;
border-top: 1px solid #ccc;
width: 100%;
} */
input {
padding: 4px;
}
.nice-button,
.button,
.moduleCustomLink {
padding: 4px 15px;
background: #ffc800 url(../images/nice-button-bg.png) bottom repeat-x;
border: 1px solid #ffc800;
border-top: 1px solid #ffd950;
text-shadow: 1px 1px 0px #ffd950;
-webkit-border-radius: 4px;
border-radius: 4px;
color: #015FB9;
text-decoration: none;
font-size: 12px;
font-weight: normal;
cursor: pointer;
text-align: center;
}
.nice-button:hover,
.button:hover,
.moduleCustomLink {
background: #ffc800;
border-color: #ffd950;
}
.block-button {
display: block;
font-size: 14px;
font-weight: bold;
padding: 10px;
}
.slimeline-button {
background: #0260ba;
border: none;
color: #fff;
text-shadow: 1px 1px 0px #000;
padding: 2px 5px;
}
.slimeline-button:hover {
background: #97ccff;
color: #fff;
text-shadow: none;
}
.block {
width: 1150px;
margin: auto;
}
.block-inner {
padding: 10px;
}
#wrapper .block-inner {
padding: 0 10px;
padding-top: 10px;
overflow: hidden;
}
.side-margin {
float: left;
min-height: 400px;
width: 20%;
}
.component-wrapper {
float: left;
width: 80%;
}
#social {
float: right;
margin-left: 10px;
}
.social-icons {
dispaly: block;
width: 18px;
margin-left: 4px;
line-height: 100%;
float: right;
}
.social-icons img {
width: 100%;
}
#seo-top {
background: #fff;
color: #014384;
border-bottom: 1px solid #000;
min-height: 50px;
}
#seo-top a {
color: #0260ba;
}
#seo-top a:hover {
color: #97ccff;
}
#seo-top ul li a {
float: left;
padding: 10px 18px;
}
#seo-top p {
margin: 0;
}
#seo-top h1 {
font-size: 14px;
font-weight: 400;
margin: 0;
}
.whats-new {
/* float: left;
width: 60%; */
}
.new-alert {
color: #014384;
background: #ffc800;
padding: 1px 5px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.dealer-resource-block {
float: right;
}
#top {
min-height: 150px;
background: #00156a url(../images/header-bg.jpg) top center no-repeat;
border-bottom: 1px solid #0072e0;
color: #fff;
overflow: hidden;
font-weight: normal;
}
#top,
#top .block {
overflow: visible;
}
#top h1,
#top h2,
#top h3,
#top h4,
#top h5,
#top h6,
#top p {
text-shadow: 1px 1px 0px #000;
}
#top .logo,
#top .seo-intro,
#top .login,
#top .search {
float: left;
margin: 5px;
}
#top .logo {
width: 300px;
margin-top: 40px;
}
#top .logo img {
width: 100%;
}
#top .seo-intro {
width: 340px;
margin-top: 15px;
}
#top .seo-intro h1 {
margin: 0 0 10px 0;
}
#top .seo-intro p {
margin: 0 0 5px 0;
}
#top .top-group {
float: right;
width: 70%;
margin-top: 30px;
}
#top .login,
#top .search {
float: right;
}
#top .login {
text-align: center;
margin-top: 12px;
}
#top .login p {
margin: 5px 0;
}
#top a.small-link {
color: #fff;
font-size: 11px;
}
#navigation {
overflow: hidden;
background: #004c97;
border-top: 1px solid #006699;
border-bottom: 1px solid #2e80a9;
clear: both;
color: #fff;
}
#navigation .menu {
float: left;
}
#navigation .menu ul,
#navigation .menu li {
margin: 0px -5px 0px -5px;
padding: 0;
list-style: none;
}
#navigation .menu li a {
display: block;
padding: 9px 5px;
font-size: 13px;
color: #fff;
float: left;
}
#navigation .menu li a:hover {
background: #024385;
}
#navigation .subscribe {
float: right;
}
.superpro-search .searchbox.series .searchbox-inner,
.superpro-search .searchbox.model .searchbox-inner{
position: relative;
}
.superpro-search .searchbox.series .searchbox-inner:before,
.superpro-search .searchbox.model .searchbox-inner:before {
content: '';
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
left: 0;
z-index: 1;
}
#wrapper {} #wrapper .block {
background: none;
}
.panel {
border-bottom: 1px solid #2e80a9;
}
#panel-a .block,
#panel-b .block {
overflow: hidden;
background: #fff;
}
#panel-a .block .block-inner,
#panel-b .block .block-inner {
padding: 0;
}
#wrapper div {
/* overflow causes to many global issues, I have created a specific syntax that can be called on for specific content to cancel out overflow */
/*overflow: visible;*/
}
#wrapper {
background: #ffc801;
/* OLD YELLOW BACKGROUND
background: #ffc801;
*/
/*background: #e7e7e7;*/
}
#wrapper .block {
background: #dae3eb;
}
.component-area {
background: #fff;
}
.side-margin .moduletable div {
overflow: visible !important;
}
#wrapper h1,
#wrapper h2,
#wrapper h3,
#wrapper h4,
#wrapper h5,
#wrapper h6 {
color: #0260ba;
}
#wrapper .nice-button,
#wrapper .button {
background: #0260ba url(../images/navigation-bg.png) bottom repeat-x;
border: 1px solid #0072e0;
color: #fff;
text-shadow: 1px 1px 0px #000;
padding-left: 5px;
padding-right: 5px;
}
#wrapper .nice-button:hover,
#wrapper .button:hover {
background: #0260ba;
}
#wrapper a {
color: #0260ba;
}
#wrapper .moduletable {
padding: 8px;
background: #fff;
border: 1px solid #ccc;
border-left: 1px solid #ddd;
border-top: 1px solid #eee;
-webkit-border-radius: 4px;
border-radius: 4px;
margin-bottom: 10px;
overflow: hidden;
}
#wrapper .side-margin .moduletable {
background: none;
border: none;
padding: 0;
}
.side-margin {
float: left;
}
.side-margin p {
margin: 0;
}
#wrapper .partsearch input {
width: 70%;
}
#wrapper .partsearch button {
width: 20%;
float: right;
}
#component-top-a .moduletable {
padding: 0;
}
#component-top-a .cycle-slideshow p {
margin: 0;
}
#component-top-a .cycle-slideshow img {
width: 100%;
}
#component-top-a .cycle-slide {
width: 100%;
}
#component-top-a .cycle-slideshow {
width: 100%;
height: 245px;
}
#component-top-b {
margin-right: -10px;
}
#component-top-b .moduletable {
float: left;
width: 46.05%;
margin-right: 10px;
}
#component-area {
padding: 10px 20px;
border: 1px solid #ccc;
border-left: 1px solid #ddd;
border-top: 1px solid #eee;
background: #fff;
-webkit-border-radius: 4px;
border-radius: 4px;
margin-bottom: 10px;
}
#article-img {
overflow: hidden !important;
max-width: 100% !important;
margin: auto !important;
}
#map-logo-img {
max-height: 25px !important;
max-width: 23px !important;
margin: auto !important;
}
#footer-promotion {
max-width: 100% !important;
margin: auto !important;
background-image: url('https://superpro.com.au/images/banners/footer/upper%20control%20arm%20footer%20banner.jpg');
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 20px;
padding-top: 20px;
}
.footer-video {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.footer-video iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
/* 4x3 Aspect Ratio */
.footer-video-4x3 {
padding-top: 75%;
}
.column {
padding-top: 50px;
float: left;
width: 50%;
}
.column-video {
float: left;
width: 50%;
}
.column-home-button-long {
float: left;
width: 100%;
}
.column-home-button {
float: left;
width: 50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
.column-home-button {
width: 100%;
}
.column {
width: 100%;
}
.column-video {
width: 100%;
}
}
#footer {
min-height: 40px;
}
.parts_select {
text-align: center;
}
.parts_select .button {
width: 50%;
}
.parts_select select {
width: 100%;
}
#mobile-navigation {
display: none;
}
#mobile-menu {
background: #0260ba;
width: 250px;
height: 100%;
position: fixed;
top: 0;
left: -250px;
z-index: 1001;
color: #fff;
}
#message {
color: #000;
background: #ffc801;
}
#message #system-message-container #system-message {
padding: 10px;
}
#message #system-message-container .close {
display: block;
width: 15px;
height: 15px;
text-align: center;
float: right;
cursor: pointer;
background: #fff;
color: #ff0000;
}
#message #system-message-container h4.alert-heading {
float: left;
margin-right: 10px;
line-height: normal;
color: #000;
}
#message h1,
#message h2,
#message h3,
#message h4,
#message h5,
#message h6,
#message p {
margin: 0;
}
div.itemAttachmentsBlock ul.itemAttachments li {
display: block;
text-align: left;
}
div.itemToolbar {
display: none;
}
div.itemFullText h3 {
font-size: 16px;
}
div.itemToolbar {
margin: 0;
}
div.itemListCategory {
border: none;
border-bottom: 1px solid #DDD;
margin: 4px 0;
background: none;
}
div.itemContainerLast {
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px dotted #ccc;
}
.itemList .itemContainer {
padding: 3px;
margin: 3px;
border: none;
}
div.catItemLinks {
margin: 0;
}
div.catItemImageBlock {
float: left;
margin: 0 10px 0 0;
padding: 0;
}
div.itemImageBlock {
margin: 0;
padding: 0;
float: right;
}
ul.nav,
ul.nav ul.nav-child {
padding: 0;
margin: 0;
}
ul.nav li,
ul.nav ul.nav-child li {
list-style-type: none;
}
ul.nav li a,
ul.nav li ul.nav-child li a {
text-decoration: none;
color: #fff;
}
#navigation ul.nav,
#navigation ul.nav ul.nav-child {
padding: 0;
margin: 0;
}
#navigation ul.nav li,
#navigation ul.nav ul.nav-child li {
list-style-type: none;
display: inline-block;
}
#navigation ul.nav li a,
#navigation ul.nav li ul.nav-child li a {
text-decoration: none;
color: #fff;
padding: 15px 25px;
display: inline-block;
font-size: 16px;
}
#navigation ul.nav li {
position: relative;
}
#navigation ul.nav li ul.nav-child {
display: none;
position: absolute;
z-index: 999;
top: 34px;
left: 0;
width: 200px;
background: #024385;
}
#navigation ul.nav li ul.nav-child li {
width: 200px;
}
#navigation ul.nav li ul.nav-child li a {
padding: 5px 15px !important;
border: 0 !important;
border-bottom: 1px solid #0271dc !important;
display: block;
float: none !important;
}
#navigation ul.nav li ul.nav-child li a:hover {
color: #97ccff !important;
}
#navigation ul.nav li:hover ul.nav-child {
display: block;
}
.data-table {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.data-table-header th {
background: #0260ba url(../images/navigation-bg.png) bottom repeat-x;
color: #fff;
position: relative;
}
.data-table-header.main-heading th {
background: #0260ba;
}
.data-table-header th h2,
.data-table-header th h3 {
color: #fff !important;
}
.data-table-header th:hover .data-table-filters {
display: block;
}
.data-table-filters {
display: none;
position: absolute;
width: 120px;
background: #0260ba;
z-index: 999;
top: 44px;
left: 0;
}
.filter-subbrand .data-table-filters {
left: inherit;
right: 0;
}
ul.data-table-filters,
ul.data-table-filters li {
margin: 0;
padding: 0;
list-style: none;
}
ul.data-table-filters li {
cursor: pointer;
padding: 5px;
}
.data-table tr.summary {
cursor: pointer;
}
.data-table tr.summary:hover td {
background: #0260ba;
color: #fff;
}
.data-table tr.summary:hover td a {
color: #fff !important;
}
.data-table tr.selected.summary:hover td,
.data-table tr.selected td {
background: #0260ba;
color: #fff;
}
.data-table td,
.data-table-header th {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 10px;
text-align: center;
}
.diagrams {
padding: 10px;
text-align: center;
float: left;
width: 46%;
position: relative;
}
.diagrams.diagrams-Front {
border-right: 1px solid #ccc;
}
.diagrams img {
width: 100%;
height: auto;
}
.diagrams .cycle-slide {
width: 100%;
text-align: center;
}
.diagrams h3 {
font-size: 20px;
}
.diagrams-Rear {} h2.panel-title {
color: #fff !important;
background: #0260ba;
padding: 10px;
border-radius: 5px;
clear: both;
margin-bottom: 5px;
overflow: hidden;
position: relative;
cursor: pointer;
margin-top: 20px;
}
.slideshow-nav {
float: right;
}
.slideshow-nav span {
background: #0260ba;
color: #fff !important;
display: block;
padding: 3px;
cursor: pointer;
width: 15px;
height: 20px;
top: 50%;
margin-top: -10px;
line-height: 80%;
font-size: 20px;
font-style: normal;
font-weight: normal;
margin-left: 1px;
text-align: center;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
position: absolute;
left: 0;
z-index: 1001;
}
.slideshow-nav span.next {
left: inherit;
right: 0;
}
.slideshow-nav span:hover {
background: #ccc;
}
.vehicle-variants {
cursor: pointer;
position: relative;
display: inline-block;
overflow: visible !important;
float: left;
}
.vehicle-variants:hover ul {
display: block
}
.vehicle-variants p {
margin: 0;
}
.vehicle-variants ul {
display: none;
position: absolute;
width: 330px;
top: 23px;
left: -5px;
z-index: 1001;
overflow: hidden;
border-radius: 0 5px 5px 5px;
}
.vehicle-variants ul,
.vehicle-variants li {
margin: 0;
padding: 0;
list-style: none;
}
.vehicle-variants li a {
display: block;
padding: 5px 10px;
background: #0260ba;
border-bottom: 1px solid #04539e;
color: #fff !important;
font-size: 11px;
}
.vehicle-variants li a:hover {
background: #333;
}
.vehicle-variants li a.current {
background: #1d1d1d;
}
.vehicle-variants .refine-variant {
display: block;
float: left;
padding-right: 30px;
padding-left: 10px;
background: #cf0511 url(../images/down-arrow.png) 95% 50% no-repeat;
-webkit-border-radius: 4px;
border-radius: 4px;
}
/* Tabs */
#tabs {
height: 35px;
overflow: hidden;
text-align: center;
margin: 0;
padding: 0;
background: #f7f7f7;
}
#tabs li {
float: left;
list-style: none;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
outline: none;
width: 50%;
}
#tabs li a.tablink {
color: #0260ba;
padding: 10px 0;
display: block;
background: #fff;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-decoration: none;
outline: none;
cursor: pointer;
font-size: 14px;
}
#tabs li a.tablink.inactive {
color: #999;
padding: 10px 30px;
background: #e7e7e7;
outline: none;
}
#tabs li a.tablink:hover,
#tabs li a.tablink.inactive:hover {
color: #666;
outline: none;
}
.tab-container {
clear: both;
text-align: left;
/*overflow: hidden;*/
background: #fff;
padding: 20px 0;
position: relative;
}
h2.tab-title,
h3.tab-title {
font-size: 30px;
text-align: center;
color: #fff !important;
display: block;
padding: 10px 0;
border-bottom: 1px solid #333;
margin: 0;
clear: both;
}
h3.tab-title {
font-size: 14px;
color: #999 !important;
}
.product-expanded ul,
.product-expanded li {
list-style: none;
margin: 0;
padding: 0;
}
.product-expanded li {
border-bottom: 1px solid #ccc;
padding: 3px;
}
.product-expanded ul li img {
margin-bottom: -3px;
width: auto !important;
}
.product-image,
.product-expanded,
.product-snapshot {
padding: 5px;
float: left;
}
.product-image {
width: 30%;
float: left;
margin-right: 10px;
}
.product-image img {
width: 100%;
}
.product-expanded {
width: 40%;
text-align: left;
}
.product-snapshot {
width: 20%;
float: right;
}
.product-snapshot ul,
.product-snapshot li {
margin: 0;
padding: 0;
list-style: none;
}
.product-snapshot li span,
.product-snapshot li a, .buy-button, .price {
display: block;
float: none;
padding: 5px 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #015FB9;
margin: 3px;
text-align: center;
color: #fff;
}
.product-snapshot li a, .buy-button {
background: #ffc800;
}
#breadcrumbs ul,
#breadcrumbs li {
margin: 0;
padding: 0;
list-style: none;
}
#breadcrumbs li a,
#breadcrumbs li span {
display: block;
float: left;
margin-right: 10px;
}
.product-feature-content,
.product-feature-image {
width: 48%;
float: left;
}
.product-feature-image {
margin-right: 5px;
}
.product-feature-image img {
width: 100%;
}
.downloads-panel {
width: 25%;
height: 150px;
margin: 5px;
padding: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #ccc;
float: left;
text-align: center;
}
.downloads-panel img {
width: auto !important;
max-width: 100%;
max-height: 110px;
}
tr.alternate_me {
background: #e7e7e7;
}
.section-container {
background: #0260ba;
padding: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 10px;
overflow: hidden;
}
#wrapper h3.section-container-title {
color: #ffc800;
font-size: 18px;
float: left;
}
.section-container-inner {
background: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top: 35px;
padding: 15px;
overflow: hidden;
clear: both;
}
.k2ItemsBlock ul,
.k2ItemsBlock li {
margin: 0;
padding: 0;
list-style: none;
}
.k2ItemsBlock li {
height: 60px;
padding: 10px 0;
}
.k2ItemsBlock .moduleItemTitle {
font-size: 14px;
font-weight: bold;
}
.even {
background: none;
}
.moduleCustomLink {
float: right;
}
.fb-like-box iframe {
margin: 0;
width: 287px !important;
}
.tool-panel {
clear: both;
/* overflow: hidden !important; */
min-height: 24px;
border-radius: 3px;
background: #e7e7e7;
padding: 5px;
margin: 5px 0;
}
.tool-panel a {
margin-left: 5px;
}
.listing-filters {
margin-top: 5px;
float: left;
}
.expand-collapes {
display: block;
float: right;
cursor: pointer;
color: #97ccff;
}
.expand-collapes:hover {
color: #fff;
}
.vehicle-page-title {
font-size: 24px;
text-align: center;
}
.vehicle-page-title span {
font-size: 16px;
color: #ffc800;
}
.tablink span {
display: none;
margin-right: 5px;
}
.tablink.inactive span {
display: inline-block;
}
.tab-wrapper {
border: 1px solid #e7e7e7;
border-radius: 3px;
overflow: hidden;
}
.catalog-icons {
width: 50px;
}
.catalog-icon-header {
float: right;
width: 60px;
}
.catalog-icon-header img {
width: 100%;
}
.universal-parts-slideshow {
overflow: visible !important
}
.universal-parts-slideshow img {
max-height: 300px;
max-width: 580px;
}
.externally-loaded-container {
height: 300px;
}
.side-margin #q {
font-size: 14px;
width: 95%;
padding: 5px;
}
.overflowme {
overflow: visible !important;
}
.q.loading {
background: url(../images/ajax-loader.gif) 98% 50% no-repeat;
}
#footer,
#footer h3 {
color: #fff;
}
#footer .moduletable {
width: 30%;
padding: 0 15px;
float: left;
}
#footer .block-inner {
padding: 30px 15px;
overflow: hidden;
}
#footer,
#footer-cap {
overflow: hidden;
}
#footer-cap {
background: #014384;
}
#footer-cap .moduletable {
padding: 15px;
}
#footer-cap ul,
#footer-cap li {
margin: 0;
padding: 0;
}
#footer-cap li {
list-style: none;
float: left;
margin-right: 30px;
}
#footer-cap .moduletable {
float: left;
width: 46%;
}
#footer-img {
background-image: url("http://imageurlhere.com");
width: auto;
margin: auto;
float: right;
}
ul.mission-statement,
ul.mission-statement li {
margin: 0;
padding: 0;
list-style: none;
}
ul.mission-statement li {
float: left;
padding: 5px 5px 5px 30px;
background: url(/images/arrow-bg-small.png) 5px 50% no-repeat;
}
ul.mission-statement li h3 {
font-size: 13px;
}
.dealer-resource-block .logout-button .btn {
background: none;
border: 0;
color: #fff;
cursor: pointer;
}
.dealer-resource-block .logout-button .btn:hover {
border: 0 !important;
color: #97ccff;
}
.chrono_credits {
display: none;
}
.whats-new ul li {
float: left;
padding: 0px 0px 0px 10px;
}
.whats-new .item-102 {
background: url(../images/navicon-wheretobuy.png) 0% 35% no-repeat;
}
.whats-new .item-103 {
background: url(../images/navicon-whatsnew.png) 0% 35% no-repeat;
}
.whats-new .item-104 {
background: url(../images/navicon-superprotv.png) 0% 35% no-repeat;
}
.whats-new .item-105 {
background: url(../images/navicon-whysuperpro.png) 0% 35% no-repeat;
}
.whats-new .item-106 {
background: url(../images/navicon-aboutsuperpro.png) 0% 35% no-repeat;
}
.whats-new .item-107 {
background: url(../images/navicon-support.png) 0% 35% no-repeat;
}
.top-menu a,
.top-menu span {
font-weight: bold;
}
.searchboxgroup {
width: 745px;
}
.searchbox {
float: left;
width: 25%;
}
.searchbox.focus {
width: 50%;
}
.oneselected .searchbox {
width: 25%;
}
.oneselected .searchbox.focus {
width: 50%;
}
.oneselected .autosearch-complete-container {
width: 363px;
}
.twoselected .searchbox {
width: 20%;
}
.twoselected .searchbox.focus {
width: 40%;
}
.twoselected .autosearch-complete-container {
width: 288px;
}
.threeselected .searchbox {
width: 33.333%;
}
.threeselected .searchbox.focus {
width: 33.333%;
}
.threeselected .autosearch-complete-container {
width: 238px;
}
.searchbox .searchbox-inner {
padding: 5px;
background: #001268;
border: 1px solid #003366;
margin: 5px;
}
.searchbox.focus .searchbox-inner {
padding: 5px;
background: #fff;
border: 1px solid #f7f7f7;
margin: 5px;
}
.searchbox input {
width: 98%;
background: none;
border: 0;
font-size: 14px;
color: #004c97;
}
.searchbox.focus input {
color: #0260ba;
background: transparent url(../images/input-dropdown.png) 98% 50% no-repeat;
}
.searchbox.go {
width: auto;
background: none;
}
.searchbox.go .searchbox-inner {
width: auto;
background: none;
border: none;
padding: 2px;
}
.seo-title {
font-size: 18px;
}
#feature {
position: relative;
background: #000;
}
#feature .feature-img {
width: 100%;
}
#feature .title-img {
position: absolute;
z-index: 1;
top: 40%;
right: 50%;
margin-right: -550px;
}
#feature .title-text {
color: #fff;
}
#feature .title-text {
width: 400px;
top: 40%;
right: 50%;
margin-right: -600px;
position: absolute;
z-index: 1;
}
#feature .title-text h2 {
font-size: 55px;
text-shadow: 1px 1px 5px #000;
}
#feature .title-text h3 {
font-size: 24px;
color: #ffcc00;
text-shadow: 1px 1px 5px #000;
}
#feature .feature-buttons {
position: absolute;
top: 48%;
padding: 20px;
z-index: 3;
cursor: pointer;
}
#feature .feature-buttons#prev {
left: 0;
background: #0260ba url(../images/feature-prev.png) center no-repeat;
}
#feature .feature-buttons#next {
right: 0;
background: #0260ba url(../images/feature-next.png) center no-repeat;
}
#feature .cycle-slideshow,
#feature .feature-slide {
z-index: 0;
overflow: hidden;
width: 100%;
}
.featured-news-container {
overflow: hidden;
clear: both;
height: 345px;
}
.featured-news-container .featured-news,
.featured-news-container .featured-news-pager-container {
width: 50%;
float: left;
z-index: 0;
position: relative;
}
.featured-news-container .featured-news-pager-container {
z-index: 1;
}
.featured-news-container .featured-news .cycle-slide {
width: 100%;
}
.featured-news .slide-feature-img {
background: #fff;
min-height: 350px;
}
.featured-news-container .featured-news-pager .pager-link {
padding: 5px;
cursor: pointer;
overflow: hidden;
color: #43484e;
background: transparent url(../images/latestnews-arrow.png) top left no-repeat;
}
.featured-news-container .featured-news-pager .pager-link .pager-link-inner {
border-bottom: 1px solid #ccc;
overflow: hidden;
}
.featured-news-container .featured-news-pager .pager-link.cycle-pager-active {
margin-left: -60px;
padding-left: 65px;
z-index: 10;
}
.featured-news-container .featured-news-pager .pager-link h4 {
font-size: 12px;
margin: 0;
}
.featured-news-container .featured-news-pager .pager-link h3 {
font-size: 20px;
margin: 0;
}
.featured-news-container .featured-news-pager-inner {
padding: 20px 30px;
}
.featured-news-container .background-feature-img {
position: absolute;
z-index: 1;
width: 100%;
bottom: 0;
}
.featured-news-container .slide-feature-img {
position: relative;
overflow: hidden;
cursor: pointer;
}
.featured-news-container .background-feature-img img {
width: 100%;
}
.featured-news-container .background-feature-title {
position: absolute;
z-index: 2;
width: 50%;
bottom: 0;
left: 0;
color: #fff;
width: 90%;
padding: 30px;
background: url(../images/black-tint.png);
}
.featured-news-container .background-feature-title h2 {
font-size: 30px;
color: #fff;
line-height: 100%;
}
.featured-news-container .background-feature-title h3 {
font-size: 16px;
color: #ffcc00;
}
.featured-news-container h2,
.featured-news-container h3 {
margin: 0;
}
.featured-news-container .featured-news-pager .thumb-img {
float: left;
width: 100px;
margin-right: 10px;
}
.featured-news-container .featured-news-pager .thumb-img img {
width: 100%;
}
.featured-news-container .featured-news-title h2 {
font-size: 40px;
color: #0260ba;
}
.featured-news-container .featured-news-title h3 {
font-size: 24px;
margin-bottom: 10px;
color: #000;
}
.featured-news-container .featured-news-title h2 span,
.featured-news-container .featured-news-title h3 span {
color: #ffcc00;
}
.responsive-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.responsive-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#panel-a-wide {
background: #ffcc00;
}
#panel-a-wide .block .inner {
padding: 30px;
}
#panel-b {
width: auto !important;
background: #fff;
color: #333;
}
#panel-b .block {
width: auto;
}
.panel-b-slideshow {
padding: 0 !important;
overflow: hidden;
min-height: 300px;
}
.panel-b-slideshow .moduletable {
margin: 50px;
}
.panel-b-slideshow {
min-height: 300px;
}
#panel-b .block .inner {
padding: 0px;
}
#menu-grip,
#search-grip {
display: none;
}
#menu-grip {
display: none;
position: absolute;
z-index: 10001;
margin: 0;
width: 60px;
height: 60px;
}
#menu-grip img {
width: 100%;
}
#resultspanel .customblock {
border: 1px solid #ccc;
padding: 5px;
float: left;
width: 30%;
height: 200px;
margin: 8px;
}
#resultspanel .customblock h2 {
font-size: 16px;
}
#resultspanel .mwd {
width: 100%;
height: 70px;
}
#resultspanel .mwd h2 {
font-size: 12px;
}
#resultspanel .customblock h3,
#resultspanel .customblock p {
margin: 0;
}
#resultspanel .customblock h3 {
font-size: 14px;
color: #015FB9;
}
#resultspanel .customblock:hover {
background: #e7e7e7;
cursor: pointer;
}
#resultspanel .elementcontainer {
overflow: visible;
}
#map {
overflow: visible;
}
.dealersearch-table td {
padding: 0;
}
.dealersearch-field-container {
float: left;
}
.dealersearch-field-inner {
padding: 5px;
overflow: visible !important;
width: 100% !important;
}
.fields-wrapper {
clear: both;
min-height: 60px;
}
.social {
float: right;
margin-right: 15px;
margin-top: -5px;
}
.social ul,
.social li {
margin: 0;
padding: 0;
list-style: none;
}
.social li {
float: left;
margin-left: 5px;
}
.social li img {
width: 24px;
}
.refine-note {
font-size: 11px;
color: #ffcc00;
padding-right: 12px;
background: url(../images/refine-icon.png) right no-repeat;
}
.enform-signup {
padding: 20px 10px;
background: #FFFFFF
text-align: center;
}
.enform-signup input {
font-size: 20px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
width: 75%;
}
.enform-signup .button {
width: 20%;
}
.enform-signup h2 {
font-size: 40px;
margin: 10px;
}
.enform-signup h3 {
font-size: 24px;
margin: 10px;
font-weight: normal;
}
.enlarge {
width: auto;
float: none;
}
.whats-new ul li {
position: relative;
}
.whats-new ul li ul {
display: none;
position: absolute;
width: 300px;
background: #fff;
left: 0;
top: 35px;
z-index: 999;
}
.whats-new ul li ul li {
float: none;
}
.whats-new ul li ul li a {
padding: 3px 20px;
float: none !important;
display: block;
}
.whats-new ul li:hover ul {
display: block;
}
.whats-new ul li ul li ul {
margin-left: 15px;
border-left: 1px solid #f7f7f7;
}
.catchall_results {
padding: 15px;
background: #f7f7f7;
border: 1px solid #e7e7e7;
border-radius: 4px;
text-align: center;
}
.catchall_results.loading {
background: #f7f7f7 url(../images/ajax-loader.gif) center no-repeat;
}
.itemSocialSharing,
.k2Anchor {
display: none;
}
.side-margin .menu,
.side-margin .menu li {
list-style: none;
padding: 0;
margin: 0;
}
.side-margin .menu li a {
display: block;
border-bottom: 1px solid #f7f7f7;
padding: 10px;
background: #fff;
}
.side-margin .menu li a:hover {
background: #f7f7f7;
}
.side-margin .menu li ul {
padding: 0;
}
.side-margin .menu li.open a {
background: #0072e0;
color: #fff !important;
border-bottom: 1px solid #004c97;
}
.side-margin .menu li.open a.toggler {
background: #004c97;
color: #fff !important;
}
.side-margin .block-inner {
padding-top: 0 !important;
}
div.catItemHeader h3.catItemTitle,
div.itemHeader h2.itemTitle {
font-family: 'Open Sans', sans-serif;
}
.yellow-bg #component-area {
background: #ffffff;
}
#container {
overflow: hidden;
}
.typebox {
width: 155px;
text-align: center;
height: 200px;
float: left;
margin: 3px;
border: 1px solid #ccc;
padding: 0px;
}
.resultsdata {
/*overflow: scroll;
height: 210px;*/
margin-bottom: 50px;
}
.datatable {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.datatable td {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 3px;
text-align: center;
}
.datatable .tableheading {
background: #333;
color: #FFFFFF;
font-weight: bold;
}
.datatable .odd {
background: #f7f7f7;
}
.datatable tr:hover {
background: #FFC801;
}
.datatable tr:hover {
background: #ffc801;
}
.datatable td:hover {
background: #004285;
color: #fff;
cursor: default;
}
#bush-container {
clear: both;
padding: 30px 0;
}
.vehicle-results em {
font-size: 11px;
color: #ccc;
text-transform: none;
}
.display_box_hover {
text-decoration: underline !important;
}
.logingroup-container {
overflow: hidden;
}
.login-container {} .login-container fieldset {
border: 0;
margin: 0;
padding: 0;
}
.login-container input#username,
.login-container input#password {
padding: 5px;
background: #fff;
border: 1px solid #ccc;
margin: 5px 0;
}
.col {
width: 50%;
float: left;
}
.col-inner {
margin: 10px;
padding: 20px;
background: #f7f7f7;
}
div.subCategory {
border-radius: 4px;
background: #f7f7f7;
border: #e7e7e7;
}
div.subCategory h2 {
font-size: 16px;
}
div.subCategory a.subCategoryImage {
display: none;
}
#seo-top .block-inner {
overflow: hidden;
}
.dealer-title span {
font-size: 16px;
font-weight: normal;
}
.pagination ul{
display: inline-block;
padding: 0;
margin: 0;
}
.pagination ul li {display: inline;}
.pagination ul li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.icon-next:before{
content: ">";
}
.icon-previous:before{
content: "<";
}
@media all and (max-width: 1150px) {
.block {
width: auto;
}
#seo-top {
display: none;
}
#top .logo {
margin: auto;
float: none;
padding-top: 40px;
}
#top .top-group {
float: none;
width: auto;
margin-top: 20px;
}
.seo-title {
text-align: center;
}
.searchboxgroup {
width: 93%;
}
#navigation {
display: none;
}
#top {
min-height: 230px;
}
#menu-grip {
display: block;
right: 40px;
top: 40px;
}
#mobile-menu ul,
#mobile-menu li {
margin: 0;
padding: 0;
}
#mobile-menu li a {
display: block;
float: none;
padding: 20px;
font-size: 30px;
border-top: 1px solid #004c97;
border-right: 10px solid #004c97;
color: #fff;
}
#mobile-menu li ul li a {
padding: 5px 10px;
font-size: 12px;
background: #004c97;
border-top: 1px solid #004c97;
border-right: 10px solid #004c97;
}
#mobile-menu .search {
padding: 10px;
}
#mobile-menu .search input {
width: 90%;
font-size: 18px;
padding: 10px;
background: #fff url(../images/icons/search.png) 95% 50% no-repeat;
color: #666;
border: 0;
}
.featured-news-container .featured-news-title h2 {
font-size: 30px;
}
.featured-news-container .featured-news-title h3 {
font-size: 20px;
}
#feature {
height: 400px;
}
#feature .feature-img {
width: auto;
height: 400px;
margin-left: 0x;
/*By using margin you can push the banner image to the left more when usings a smaller screen device*/
/* margin-left: -180px;*/
}
#feature .title-img {
left: 50px;
width: 70%;
top: 30%;
}
#feature .title-text {
left: 0;
width: 100%;
text-align: center;
top: 30%;
}
#feature .title-text h2 {
font-size: 50px;
}
#feature .title-text h3 {
font-size: 30px;
}
#footer .moduletable {
width: 28%;
}
#footer-cap .moduletable {
width: 45%;
}
.diagrams {
width: auto;
float: none;
}
.social {
position: absolute;
top: 10px;
right: 30px;
}
}
@media all and (max-width: 767px) {
#component-area {
border: none;
border-left: none;
border-top: none;
}
#wrapper .block {
background: #FFFFFF;
}
.block {
width: 100%;
}
.block-inner {
padding-bottom: 0;
}
#menu-grip {
display: block;
right: 30px;
top: 40px;
}
#social {
float: right;
}
#search-grip {
display: block;
clear: both;
float: none;
padding: 10px;
font-size: 15px;
background: #fff url(/templates/superpro/images/search-button.png) 100% 0% no-repeat;
color: #00156a;
margin-top: 0;
font-weight: bold;
font-style: italic;
border-top: 1px solid #0072e0;
}
#search-grip span {
color: #ffcc00;
}
/*Vehcile Search Style Fixes*/
.clear-icon {
top: 5px !important;
padding-right: 20px !important;
}
#top {
min-height: 140px;
overflow: hidden;
}
#top .logo {
width: 230px;
float: left;
margin: 0;
margin-left: 20px;
margin-bottom: 20px;
}
.parts-search .go {
display: none;
}
.searchbox {
width: auto !important;
float: none !important;
}
.searchboxgroup {
width: auto;
}
.autosearch-complete-container {
width: 97% !important;
}
.superpro-search {
height: 400px;
}
.seo-title {
display: none;
}
#top .top-group {
clear: both;
}
#search-grip {
display: none;
}
.searchbox.model,
.searchbox.series {
display: none;
}
.open .searchbox.model,
.open .searchbox.series {
display: block;
}
.superpro-search {
height: auto;
}
.open.parts-search {
height: 500px;
}
#top .seo-intro {
float: right;
width: 200px;
margin-top: 15px;
}
#top .seo-intro h1 {
font-size: 16px;
}
#top .seo-intro h1,
#top .seo-intro p {
margin: 0 0 5px 0;
}
#navigation {
display: none;
}
#mobile-navigation {
display: block;
background: #0260ba url(../images/top-bg.png) bottom repeat-x;
overflow: hidden;
}
#mobile-navigation ul,
#mobile-navigation li {
margin: 0;
padding: 0;
list-style: none;
}
#mobile-navigation li span {
float: left;
margin: 10px 0 10px 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#wrapper .side-margin,
#wrapper .component-wrapper {
float: none;
width: auto;
margin: 0;
}
#wrapper .side-margin {
display: none;
}
input,
select {
font-size: 16px;
}
#component-top-a .cycle-slideshow {
height: 103px;
}
#component-top-b .moduletable {
width: auto;
float: none;
}
.whats-new {
display: none;
}
.dealer-resource-block {
float: left;
width: auto;
text-align: center;
padding: 0 5px 10px 5px;
font-size: 11px;
}
.dealer-resource-block a {
font-size: 11px;
}
.social-icons {
margin: 0;
margin-left: 1px;
width: 15px;
}
.diagrams {
width: auto;
float: none;
margin-top: 20px;
}
.diagrams img {
width: 100%;
height: auto;
}
.vehicle-page-title {
font-size: 18px;
}
/* Force table to not be like tables anymore */
table.data-table,
.data-table thead,
.data-table tbody,
.data-table th,
.data-table td,
.data-table tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.data-table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.data-table tr {
border: 5px solid #ccc;
}
.data-table tr.selected {
border: 5px solid #0260ba;
}
.data-table tr.summary td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
width: auto !important;
}
.data-table tr.summary:hover td {
border-bottom: 1px solid #2c5ba2;
}
.data-table 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;
}
/*
Label the data
*/
.data-table tr.summary td:nth-of-type(1):before {
content: "Position";
}
.data-table tr.summary td:nth-of-type(2):before {
content: "Part Name";
}
.data-table tr.summary td:nth-of-type(3):before {
content: "Part No.";
}
.data-table tr.summary td:nth-of-type(4):before {
content: "Qty/Car";
}
.data-table tr.summary td:nth-of-type(5):before {
content: "Sub Brand";
}
.data-table tr.summary td:nth-of-type(6):before {
content: "Price";
}
.data-table td,
.data-table-header th {
text-align: center !important;
}
h2.panel-title {
font-size: 14px;
}
#tabs li a.tablink {
font-size: 12px;
}
.product-image {
float: none;
margin: 0;
clear: both;
}
.hideformobile {
display: none !important;
}
#component-area {
padding: 5px;
}
.section-container {
padding: 10px;
}
#wrapper h3.section-container-title {
float: left;
display: block;
/* Fix Mobile H3 text from being to small*/
width: auto%;
}
#tabs li a.tablink.inactive {
padding: 10px 15px;
}
.expanded-view .product-image,
.expanded-view .product-expanded,
.expanded-view .product-snapshot,
.product-feature-content,
.downloads-panel,
.product-feature-image {
width: auto;
float: none;
}
#breadcrumbs .moduletable {
overflow: scroll;
}
#breadcrumbs ul.breadcrumb {
width: 9999px;
}
.featured-news {
display: none;
}
.featured-news-container {
height: auto;
}
.featured-news-container .featured-news-title h2 {
font-size: 28px;
}
.featured-news-container .featured-news-title h3 {
font-size: 16px;
}
.featured-news-container .featured-news-pager .pager-link h3 {
font-size: 14px;
}
.featured-news-container .featured-news,
.featured-news-container .featured-news-pager-container {
width: auto;
float: none;
}
.panel-b-slideshow .moduletable {
margin: 10px;
}
#feature {
height: 300px;
}
/*media max-width 767px */
#feature .feature-img {
width: auto;
height: 300px;
margin-left: 0px;
/*By using margin you can push the banner image to the left more when usings a smaller screen device*/
/* margin-left: -180px;*/
}
#feature .title-img {
left: 50px;
width: 70%;
top: 30%;
}
#feature .title-text {
left: 50px;
width: 70%;
text-align: center;
top: 30%;
}
#feature .title-text h2 {
font-size: 40px;
}
#feature .title-text h3 {
font-size: 20px;
}
#footer .moduletable,
#footer-cap .moduletable {
width: auto;
float: none;
}
.dealersearch-field-container {
float: none;
overflow: visible !important;
width: auto;
}
.dealersearch-field-inner {
padding: 2px;
}
.dealersearch-field-container select {
width: 100%;
}
.listing-filters {
float: none;
}
.tool-panel a {
margin-left: 5px;
float: none;
display: block;
}
.col {
width: auto;
float: none;
}
.hide_for_mobile {
display: none !important;
}
#footer-cap img {
max-width: 100%;
}
}