/* ________________________________________________________________________________________________________________ 01. GLOBAL STRUCTURE ________________________________________________________________________________________________________________ */ /* ________________________________________________________________________________________________________________ 02. TYPOGRAPHY ________________________________________________________________________________________________________________ */ body { font-size: 13px; font-family: 'trebuchet MS', 'arial', sans-serif; } /* ------- Links ------- */ p a, a:hover, .webtreats_subnav_widget li.current_page_item a, .commentmetadata a, .blog_meta a, .contact_widget_email,.fancy_link,.download_link,.email_link,.toggle {color:#b4b4b4;} h1,h2,h3,h4,h5 { font-family: "trebuchet MS", "arial", sans-serif;} /* ------- Misc ------- */ blockquote, .bullet_list, h5, .rss-date, .date, .awaiting_moderation, .dropcap4{color:#b4b4b4;} .inputError{border-color:#b4b4b4 !important;} .fancy_header span{background-color:#b4b4b4;} /* ------- Footer ------- */ #footer{color:#ddd;} #footer a{color:#e0e0e0;} #footer a:hover{color:#fff;} .footer_widgettitle{color:#fff;} .partial_gradient_slide h2{color:#666;} .partial_gradient_slide .slider_content{color:#787878;} /* ------- Buttons ------- */ input[type=button],input[type=reset],input[type=submit],.fancy_button, .fancy_button span, .button_link,.button_link span, h6.color_scheme_box_header, h6.color_scheme_box_header span{ background-image:url(synusa2/button_sprite.png);} /* ________________________________________________________________________________________________________________ 03. ICONS ________________________________________________________________________________________________________________ */ /* .dropcap1,.dropcap3,blockquote{background-image: url(synusa2/sprite.png);} ul.arrow_list li,ul.check_list li,ul.star_list li,ul.colored_bullet_list li,a.download_link,a.email_link{background-image: url(synusa2/mini_icons.png);} .toggle,.active,.toggle_frame .toggle,.toggle_frame .active{background-image: url(synusa2/toggle_sprite.png);} a.fancy_link{background-image: url(synusa2/fancy_link.png)} #body_block .widget_recent_comments ul li.recentcomments span, #body_block .webtreats_twitter_widget ul li, #body_block .contact_widget_name, #body_block .contact_widget_phone, #body_block .contact_widget_email{background-image: url(synusa2/mini_icons.png);} #menu_search{background-image:url(synusa2/search.png);} */ /* ________________________________________________________________________________________________________________ 04. MENU ________________________________________________________________________________________________________________ */ #main_menu .menu li { display: block; float: left; line-height:60px; list-style-type: none; padding: 0 2px; text-align: center;} #main_menu .menu li a, #main_menu .menu li a:link, #main_menu .menu li a:visited { display: block; font-size: 13px; line-height:60px; height: 42px; padding: 0 16px; color:#777; text-decoration: none; text-shadow:0 1px 1px #ccc;} #main_menu .menu li a:hover, #main_menu .menu li:hover a { background: /*url(synusa2/menu_hover.png)*/ no-repeat scroll center -5px transparent; color:#444; text-decoration: none;} /* ________________________________________________________________________________________________________________ 05. SYNUSA STYLES ________________________________________________________________________________________________________________ */ body { background: #D5D5D5; position: relative; padding-top: 1px; } .body_background { background: #f0f0f0; margin: 65px auto 0; padding: 0; position: relative; width: auto; } .minimal #body_block_background { background-color: transparent; } body, textarea { color: #4C4C4C; } /* * Basic Text Styles */ h1, h2, h3, h4, h5 { margin-bottom: 0px;} h1 { font-size: 25px;} h2 { font-size: 21px;} h3 { font-size: 15px;} h4 { font-size: 14px; font-weight: bold;} h5 { font-size: 12px; font-weight: bold;} .specialHeader { color: #151515; font-size: 27px; font-weight: bold; padding-bottom: 20px; position: relative; text-align: center; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);} .big { font-size: 1.3em; } .bigger { font-size: 1.7em; } .biggest { font-size: 2em; } .small { font-size: 0.88em; } .smaller { font-size: 0.75em; } .smallest { font-size: 0.5em; } .center { text-align: center; margin-left: auto; margin-right: auto; } .underline { background: transparent url(synusa3/underline.png) no-repeat scroll center bottom; padding-bottom: 20px; } .introtext { color: #777777; font-size: 16px; line-height: 2em; text-align: left; } .grayBox { background: #DCDCDC; padding: 7px 12px; overflow: auto; -webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px; } .hidden { display: none; } .hiddenText, .hiddenText:link, .hiddenText :visited { font-size: 0.001%; text-indent: -999em; overflow: hidden; text-decoration: none; } a, a:link, a:visited { color: #e30008; font-weight: bold; text-decoration: underline; } a:hover, a:active, a:focus { color: #ff0009; font-weight: bold; text-decoration: none; } p a:hover { text-decoration: none; } .red, .red:link, .red:visited, .red:hover, .red:active, .red:focus { color: #e30008;} .blue, .blue:link, .blue:visited, .blue:hover, .blue:active, .blue:focus { color: #0057a3; } .green, .green:link, .green:visited, .green:hover, .green:active, .green:focus { color: #1aaa03; } .gray, .gray:link, .gray:visited, .gray:hover, .gray:active, .gray:focus { color: #999999; } .checkmarks { list-style-type: none; margin: 0 0 1em; overflow: auto; text-align: left; } .checkmarks > li { background: transparent url(synusa3/checkGreen16.png) no-repeat scroll left top; font-size: 1.18em; line-height: 1.18em; margin:0 0 0.5em; padding-left: 23px; } .checkmarks .unchecked { background-image: none; } .checkmarks.right > li { background-position:right top; padding-left: 0px; padding-right: 20px; } .checkmarks li.checkedText { background-image: none; padding-right: 0; } .checkmarks .checkedText .check { float: right; } .unchecked{ } .checkmarks.twocol > li { float: left; width: 45%; padding-left: 5%; } .checkmarks.twocol.right > li { padding-right: 5%;} .checkmarks ul, .checkmarks ol { margin-left: 45px; } hr { background-color: #ddd !important;} #header, #body_block, #footer, #sub_footer { /* padding-left: 5px; padding-right:5px; width: 955px; */ } .inner { position: relative; width: 960px; } /* ________________________________________________________________________________________________________________ 06. HEADER ________________________________________________________________________________________________________________ */ #header { background: transparent !important; height: auto; z-index: 99; } #header .inner { background: transparent; margin: 0 auto; position: relative; width: 960px; } #header #logo { background: transparent url(synusa3/logo.png) no-repeat scroll top left !important; height: 82px; left: 10px; top: 25px; width: 207px; } #header #logo a{ display: block; height:82px; width: 207px; } #header #logo #logoText{ display: none; } /* #header .dealerClass { height: 10px; left: 100px; position: absolute; top: 71px; width: 110px; } */ /* #header .dealerClass.directJobber { background: transparent url(synusa2/dealerClass-directJobber.png) no-repeat scroll left center; } */ #header .inner font strong{ display: none; } #header .header_contact { color: #DDD; font-size: 18px; font-weight: bold; line-height: 24px; right: 10px; top: -55px; } #accountAccess { display: block; position: absolute; right: 10px; top: -33px; } #accountAccess a, #accountAccess a:link, #accountAccess a:visited { color: #DDD; text-decoration: none; } #accountAccess a:hover, #accountAccess a:active, #accountAccess a:focus { color: #999; text-decoration: underline; } #amsoil-header { position: absolute; top: 0; right: 0; left: 0; height: 65px; z-index: 1; } #amsoil-header > a > div > div { /* width: 960px; */ } /* ________________________________________________________________________________________________________________ 07. NAVIGATION ________________________________________________________________________________________________________________ */ #main_menu .menu-main-container { height: 42px; position: relative; top: 0 } #menu_search { display: none; } #navigation { display: block; height: 42px; margin-bottom: -42px;} /* Top Level Items */ #main_menu .menu-container, #main_menu .menu-jms-container, #main_menu .menu-rjw-container { text-align: center; width: 100%; } #main_menu .menu { display: table; margin: 0 auto; } #main_menu .menu li { background: transparent url(synusa3/navDivider.png) no-repeat scroll left center; padding-left: 2px;} #main_menu .menu li:first-child { background: transparent none; padding-left: 0px;} #main_menu .menu li a, #main_menu .menu li a:link, #main_menu .menu li a:visited { color: #666; height: 42px; line-height: 42px !important; transition: background 0.2s; -moz-transition: background 0.2s; -webkit-transition: background 0.2s; -o-transition: background 0.2s;} #main_menu .menu li a:hover, #main_menu .menu li a:focus, #main_menu .menu li a:active { background: #DDD; color: #4C4C4C;} /* Dropdown Items */ #main_menu .menu ul li a, #main_menu .menu ul li a:link, #main_menu .menu ul li a:visited { color: #4C4C4C; height: 15px; line-height: 15px !important; text-shadow: 0 3px 5px rgba(0,0,0,0.4); } #main_menu .menu ul li a:hover, #main_menu .menu ul li a:focus, #main_menu .menu ul li a:active { background: transparent url(synusa3/navHover-bg.png) repeat-x scroll center left; color: #fff; text-shadow: 0 3px 5px rgba(0,0,0,0.4) } /* Top Level Items */ #header_subNavigation { display: block; margin: 0; padding: 0; position: absolute; right: -10px; text-align: center; top: 10px; width: auto; } #header_subNavigation li { border-left: 1px solid #555; display: block; float: left; list-style-type: none; margin: 0; padding: 0; position: aboslute;} #header_subNavigation li:first-child { border-left: none;} #header_subNavigation li a, #header_subNavigation li a:link, #header_subNavigation li a:visited { color: #555; display: block; font-size: 11px; line-height: 16px; padding: 0 10px; text-decoration: none; transition: background 0.2s; -moz-transition: background 0.2s; -webkit-transition: background 0.2s; -o-transition: background 0.2s; } #header_subNavigation li a:hover, #header_subNavigation li a:focus, #header_subNavigation li a:active { background: #C00; color: #fff; } ul#department-nav { clear: both; } ul#department-nav li { float: left; margin-right: 25px; } ul#department-nav a:hover, ul#department-nav a:focus, ul#department-nav a:active { color: #333;} /* ________________________________________________________________________________________________________________ 08. COLUMNS ________________________________________________________________________________________________________________ */ .columns { clear: both; overflow: visible; } .col { float: left;} .three-col .col { width: 32%; margin-right: 2%; position: relative; } .three-col .col.three { margin-right: 0;} .two-col .col { width: 48%; margin-right: 4%; position: relative; } .two-col .col.two { margin-right: 0;} /* ________________________________________________________________________________________________________________ 09. BUTTONS ________________________________________________________________________________________________________________ */ .v3button, .v3button:link, .v3button:visited { /* display: inline-block; */ display: inline-block; border: 1px solid #bbb; color: #fff; min-width: 184px; padding: 5px 8px; text-align: center; text-decoration: none; } .v3button { /* CSS3 Button Styles */ background: #dedede; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RlZGVkZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiZGJkYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #dedede 0%, #bdbdbd 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dedede), color-stop(100%,#bdbdbd)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #dedede 0%,#bdbdbd 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #dedede 0%,#bdbdbd 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #dedede 0%,#bdbdbd 100%); /* IE10+ */ background: linear-gradient(to bottom, #dedede 0%,#bdbdbd 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#bdbdbd',GradientType=0 ); /* IE6-8 */ -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; -moz-text-shadow: 0 2px 3px rgba(0,0,0,0.15); -webkit-text-shadow: 0 2px 3px rgba(0,0,0,0.15); text-shadow: 0 2px 3px rgba(0,0,0,0.15); -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.15); -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.15); box-shadow: 0 2px 3px rgba(0,0,0,0.15); } .v3button:hover, .v3button:active, .v3button:focus { color: #fff; text-decoration: none; background: #b2b2b2; /* Old browsers */ background: -moz-linear-gradient(top, #b2b2b2 0%, #979797 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2b2b2), color-stop(100%,#979797)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #b2b2b2 0%,#979797 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #b2b2b2 0%,#979797 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #b2b2b2 0%,#979797 100%); /* IE10+ */ background: linear-gradient(to bottom, #b2b2b2 0%,#979797 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2b2b2', endColorstr='#979797',GradientType=0 ); /* IE6-9 */ } .v3button.red, .v3button.red:link, .v3button.red:visited { /* CSS3 Button Styles */ background: #cf2127; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NmMjEyNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhZjAxMDciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #cf2127 0%, #af0107 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cf2127), color-stop(100%,#af0107)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #cf2127 0%,#af0107 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #cf2127 0%,#af0107 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #cf2127 0%,#af0107 100%); /* IE10+ */ background: linear-gradient(to bottom, #cf2127 0%,#af0107 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cf2127', endColorstr='#af0107',GradientType=0 ); /* IE6-8 */ } .v3button.red:hover, .v3button.red:active, .v3button.red:focus { /* CSS3 Button Styles */ background: #e8252c; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4MjUyYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjOTAyMDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #e8252c 0%, #c90209 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8252c), color-stop(100%,#c90209)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e8252c 0%,#c90209 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e8252c 0%,#c90209 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e8252c 0%,#c90209 100%); /* IE10+ */ background: linear-gradient(to bottom, #e8252c 0%,#c90209 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8252c', endColorstr='#c90209',GradientType=0 ); /* IE6-8 */ } .v3button.blue, .v3button.blue:link, .v3button.blue:visited { /* CSS3 Button Styles */ background: #21538d; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIxNTM4ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMTMyNmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #21538d 0%, #01326c 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#21538d), color-stop(100%,#01326c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #21538d 0%,#01326c 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #21538d 0%,#01326c 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #21538d 0%,#01326c 100%); /* IE10+ */ background: linear-gradient(to bottom, #21538d 0%,#01326c 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#21538d', endColorstr='#01326c',GradientType=0 ); /* IE6-8 */ } .v3button.blue:hover, .v3button.blue:active, .v3button.blue:focus { /* CSS3 Button Styles */ background: #2768ad; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI3NjhhZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMTQxOGYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #2768ad 0%, #01418f 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2768ad), color-stop(100%,#01418f)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #2768ad 0%,#01418f 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #2768ad 0%,#01418f 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #2768ad 0%,#01418f 100%); /* IE10+ */ background: linear-gradient(to bottom, #2768ad 0%,#01418f 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2768ad', endColorstr='#01418f',GradientType=0 ); /* IE6-8 */ } .horizontalFeaturedButtons { text-align: center; margin-top: 15px; } .horizontalFeaturedButtons a { float: left; } .horizontalFeaturedButtons a:first-child { margin-right: 20px; } /* ________________________________________________________________________________________________________________ 10. MISC. BASIC FEATURES ________________________________________________________________________________________________________________ */ #body_block { padding-top: 30px; z-index: 100; } #body_block .inner { padding-bottom: 1px; } #body_block_background { width: 955px; } .right_sidebar #main { float: none; width: auto; } .shadowbreak { clear: both; display: block; background: transparent url(synusa3/shadowbreak.png) no-repeat scroll center top !important;; height: 43px; margin: 40px 0 10px; } .slideshow a { left: 0px !important; } #homepage-slideshow { display: block; height: 200px; margin-top: 4px; overflow: hidden; width: 640px; } #homepage-slideshow img { display: block; height: 200px; width: 640px; } /* Product Lookup Tool */ .list-inline { margin:0; padding: 0; text-align:center; } .lookup-icons > li { margin:0; padding-right:10px; padding-left:10px; display: inline-block; list-style-type: none; } .lookup-icons > li p { margin-bottom:0; font-size:11px} .tab-pane { padding:20px 40px; text-align:center} .lookup-overlay { margin-top:-60px; z-index:5} .lookup-icons a { display: block; padding: 5px 0; } .lookup-icons a, .lookup-icons a:active, .lookup-icons a:visited { color:#666; text-decoration: none; font-size: 10px; } .lookup-icons li:hover { background-color:#E3E3E3; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px} .auto-look { float: left; width: 78px; height: 37px; background: url(synusa4/lookup-sprite.png) no-repeat left top } .motorcycle-look { float: left; width: 67px; height: 37px; background: url(synusa4/lookup-sprite.png) no-repeat left -38px } .atv-look { float: left; width: 61px; height: 37px; background: url(synusa4/lookup-sprite.png) no-repeat left -75px } .utv-look { float: left; width: 56px; height: 37px; background: url(synusa4/lookup-sprite.png) no-repeat left -112px } .snowmobile-look { float: left; width: 73px; height: 37px; background: url(synusa4/lookup-sprite.png) no-repeat left -150px } .marine-look { float: left; width: 73px; height: 37px; background: url(synusa4/lookup-sprite.png) no-repeat left -188px } .pwc-look { float: left; width: 73px; height: 37px; background: url(synusa4/lookup-sprite.png) no-repeat left -224px } .small-look { float: left; width: 64px; height: 37px; background: url(synusa4/lookup-sprite.png) no-repeat left -258px } .heavy-look { float: left; width: 78px; height: 48px; background: url(synusa4/lookup-sprite.png) no-repeat left -296px } /* ==IMAGE HOVER - Glitchy== a img { -moz-opacity:1.0; filter:alpha(opacity=100); opacity:1.0; transition: opacity: 0.2s; -moz-transition: opacity 0.2s; -webkit-transition: opacity 0.2s; -o-transition: opacity 0.2s; } a img:hover, a img:active, a img:focus { -moz-opacity:.60; filter:alpha(opacity=60); opacity:.60; } */ /* ________________________________________________________________________________________________________________ 11. DIALOGS ________________________________________________________________________________________________________________ */ .simpleDialog { display: none; background: white; left: 50%; margin-left: -410px; min-height: 200px; padding: 45px; position: absolute; width: 730px; } .simpleDialog { /* CSS3 styling for latest browsers */ -moz-box-shadow:0 5px 10px rgba(0,0,0,0.4);; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.4); box-shadow: 0 5px 10px rgba(0,0,0,0.4); -webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;} .simpleDialog h1 { margin: 5px 0px 10px; } .simpleDialog .close { background-image:url(overlay/apple-close.png); position:absolute; right:0px; top:0px; cursor:pointer; height:27px; width:28px; } .simpleDialog .actionButtons { text-align: center; margin-top: 25px; } .simpleDialog .actionButtons .button { display: inline-block; margin: 0 10px; position: relative; } .simpleDialog .actionButtons .button .topOverlay {background: transparent url(synusa2/overlayContinueShopping.png) no-repeat scroll center center; position: absolute; left: 5px; top: 7px; height:37px; width: 190px; -moz-opacity:1.0 !important; filter:alpha(opacity=100) !important; opacity: 1 !important;} .simpleDialog .actionButtons .button .bottomOverlay {background: transparent url(synusa2/overlayBrowse.png) no-repeat scroll center center; position: absolute; right: 11px; bottom: 11px; height: 26px; width: 114px; -moz-opacity:1.0 !important; filter:alpha(opacity=100) !important; opacity: 1 !important; } /* #productOverlay { background: transparent url(overlay/white_582x331.png) no-repeat scroll center center; padding: 43px; width: 496px;} */ /* ________________________________________________________________________________________________________________ 12. HOMEPAGE ________________________________________________________________________________________________________________ */ #homepageFeature, #homepageFeature2 { border-bottom: 1px solid #BBB; position: relative; } #homepageHeaderTitle { height: 100px; width: 530px; position: absolute; top: -95px; left: 50%; margin-left: -265px; text-align: center; } #homepageFeature h1, #homepageFeature h2, #homepageFeature h3 { text-align: center; line-height: 1em; } #homepageFeature .inner { min-height: 340px; overflow: visible; } #homepageFeature .checkmarks { margin: 1em auto 2em; width: 223px; } #homepageFeature .button { margin: 0 auto; } #homepageFeature #catalogButton { position: relative; top: -20px; } #homepageFeature .col { position: absolute; width: 255px; } #homepageFeature .col.one { left: 0; margin-top: -140px; text-align: center; top: 50%; z-index: 100; } #homepageFeature .col.two { margin: -240px 0 0 -305px; left: 50%; text-align: center; top: 50%; z-index: 0; width: 610px } #homepageFeature .col.three { margin-top: -140px; right: 0; text-align: center; top: 50%; z-index: 100; } /* #bottlesFeature { position: relative; top: -120px; } */ #homepageLearnMoreFloating { position: absolute; color: #999; display: block; bottom: 3%; left: 0; right: 0; margin: 0 auto; text-align: center; text-decoration: none; z-index: 10} #homepageLearnMoreFloating:hover, #homepageLearnMoreFloating:active, #homepageLearnMoreFloating:focus { color: #555; text-decoration: underline;} .homepageFeatureOverlay { display: block; position: absolute; height: 230px; top: 0px; left: 0px; right: 0px; } .homepageFreeCatalog, .homepageLearnMore { margin-top: 10px; } /* ________________________________________________________________________________________________________________ 13. PRODUCTS ________________________________________________________________________________________________________________ */ .products {} .products p { float: left; display: block; height: auto; margin-right: 17px; } .products p a, .products p a:visited { background: #f2f2f2; border: 1px solid #DFDFDF; clear: both; display: block; height: 187px; text-align: center; text-decoration: none; padding: 10px; width: 110px; -webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px; } .products p a:hover, .products p a:focus, .products p a:active { background: #f2f2f2; border: 1px solid #ea0f1a; text-decoration: none; } .products p a img { float: left; } .productsNew {} .productsNew p { float: left; display: block; height: auto; margin-right: 4px; } .productsNew p a, .productsNew p a:visited { background: transparent; border: 0px none; clear: both; display: block; font-size: 0.001%; height: 187px; text-align: center; text-decoration: none; text-indent: -999em; padding: 10px; width: 200px; -webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px; } .productsNew p a:hover, .productsNew p a:focus, .productsNew p a:active { background: transparent; border: 0px none; text-decoration: none; } .productsNew p a * { } .productsNew p a:hover *, .productsNew p a:focus *, .productsNew p a:active * { } .productsNew p a img { float: left; } /* ________________________________________________________________________________________________________________ 07. FOOTER ________________________________________________________________________________________________________________ */ #footer { display: none; } #footer_teaser_text { display: none; color: #555;} .footer_background { background: #BBB; left: 1px; position: relative; } #sub_footer { background: #d5d5d5 url(synusa3/footer-bg.png) repeat-x center top !important; font-size: 10px; margin-bottom: 0px; width: auto; } #sub_footer .inner { margin: 0 auto; min-height: 100px; padding-top: 100px; width: 972px; } #footerLogo { position: absolute; height: 150px; margin-left: -75px; top: 30px; left: 50%; width: 150px; } #sub_footer .one_half.last { float: right; width: 40%;} #sub_footer, #sub_footer a , #sub_footer a:visited { color: #777; font-weight: normal; text-decoration: none; } #sub_footer a:hover, #sub_footer a:focus, #sub_footer a:active { color: #333; font-weight: normal; text-decoration: underline; }