/* Name: El Matador Sports Description: Version: 1.0 Author: Jeremy Anderson [ Object Adjective ] Author URI: http://www.objectadjective.com */ /* Main Globals --------------------------------------------------------------------------------------------*/ body {margin: 0; padding: 0; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 90%; color: #a5a6a7; background: #081516 url(../img/body-bg.gif) 0 0 repeat-x;} * html body {font-size: 75%;} :first-child+html body {font-size: 75%;} body, html {min-height: 100.1%;} img {border: 0;} table {border-collapse: collapse;} td {vertical-align: middle;} p {margin: 15px 8px; text-align: justify;} h1 {color: #cccdce; font-weight: normal; margin: 22px 8px 34px 8px;} h1 span {color: #0f2526; font-weight: bold; display: block;} h2 {color: #b7babe; margin: 15px 8px; letter-spacing: 1px;} h3 {color: #89a8cc; margin: 15px 8px; letter-spacing: 1px;} ul {list-style: none; margin: 10px 0 10px -15px;} * html ul {margin-left: 30px;} *:first-child+html ul {margin-left: 30px;} li {margin: 0;} .hr {border-top: 1px solid #5b696b; margin: 15px 8px;} .small {font-size: 90%;} .skip {display: none;} .block, #content .block {display: block !important;} .none {display: none;} .normal {font-weight: normal !important;} /* Global Float Control Classes (left=float: left, right=float: right, shocking!) --------------------------------------------------------------------------------------------*/ .left {float: left;} .right {float: right;} .center {text-align: center;} .clear {clear: both;} /* Links --------------------------------------------------------------------------------------------*/ :focus, :active {outline: none !important;} a {color: #931d1d; padding: 2px 3px; font-weight: bold; text-decoration: none;} a:visited {color: #903f3f;} a:hover, a.hover {border: 1px solid #fff; padding: 2px 2px; color: #fff; background: #3d699d;} .hover {cursor: pointer;} /* Main Wrapper --------------------------------------------------------------------------------------------*/ #wrapper {width: 950px; margin: 0 auto; text-align: left;} /* Header --------------------------------------------------------------------------------------------*/ #header {height: 266px;} #body home #header {height: 262px;} #header #logo {height: 215px; width: 301px; display: block; float: left; margin: 25px 0 0 0; background: transparent url(../img/logo.gif) 0 0 no-repeat; padding: 0; text-indent: -4000px;} #header #logo:hover {background-position: 0 -215px; border: 0;} /* Main Navigation --------------------------------------------------------------------------------------------*/ #nav {margin: 64px 10px 0 0; padding: 0; width: 465px; height: 47px; float: right;} #nav li {float: left;} #nav li a {display: block; height: 47px; background: transparent url(../img/nav.gif) 0 0 no-repeat; margin: 0 22px; padding: 0; text-indent: -4000px;} #nav li a:hover {border: 0;} #nav:after {content: "."; clear: both; height: 0; visibility: hidden; display: block;} * html #nav {height: 47px;} #nav .home a {width: 49px; background-position: -25px 0;} #nav .home a:hover {background-position: -25px -47px;} #bodyhome #nav .home a {background-position: -25px -94px;} #nav .product a {width: 69px; background-position: -118px 0;} #nav .product a:hover {background-position: -118px -47px;} #bodyproduct #nav .product a {background-position: -118px -94px;} #nav .aboutus a {width: 76px; background-position: -230px 0;} #nav .aboutus a:hover {background-position: -230px -47px;} #bodyabout #nav .aboutus a {background-position: -230px -94px;} #nav .contact a {width: 91px; background-position: -350px 0;} #nav .contact a:hover {background-position: -350px -47px;} #bodycontact #nav .contact a {background-position: -350px -94px;} /* Homepage --------------------------------------------------------------------------------------------*/ #bodyhome {background: #000101 url(../img/home-bg.gif) 0 0 repeat-x;} #bodyhome #mid {height: 220px; width: 894px; background: transparent url(../img/home-mid.jpg) 0 0 no-repeat; color: #73767f; padding: 96px 0 0 56px; margin-bottom: 38px;} #bodyhome #mid h1 {font-weight: normal; margin: 0; font-size: 160%;} #bodyhome #mid h1 strong {font-style: italic; color: #7d6e5e;} #bodyhome #mid .more {margin: 94px 0 0 229px;} #bodyhome #mid .info-gen {float: right; margin: 26px 11px 0 0;} #bodyhome .box {width: 301px; padding-top: 11px !important; background: #131419 url(../img/homebox-top.jpg) 0 0 no-repeat !important; float: left; color: #8e9194;}/* Importants are for IE on hover*/ #bodyhome .box .mid {width: 299px; background: transparent url(../img/homebox-mid.jpg) 0 0 repeat-x; border: 1px solid #5c5e60; border-width: 0 1px 0 1px;} #bodyhome .box .bottom {width: 301px; height: 11px; background: transparent url(../img/homebox-bottom.jpg) 0 0 no-repeat;} * html #bodyhome .box .bottom {margin-bottom: -4px;} #bodyhome .box .design {background: transparent url(../img/box-design-hover.jpg) 8px 0 no-repeat; padding: 31px 16px 18px 16px;} #bodyhome .box h2 {margin: 0 0 30px 0;} #bodyhome .box h2 a {color: #89a8cc;} #bodyhome .box h2 a:hover, #bodyhome .hover h2 a {border: 1px solid #fff; padding: 2px 2px; color: #fff; background: #3d699d;} #bodyhome #boxfeature {margin: 0 22px;} #bodyhome p, #bodyhome h1, #bodyhome h2 {margin-left: 0; margin-right: 0;} /* General Content --------------------------------------------------------------------------------------------*/ #content:after {content: "."; clear: both; height: 0; visibility: hidden; display: block;} * html #content {height: 1px;} #bodywide #content {height: 400px;} #content p {line-height: 1.2;} #content ul li {background: transparent url(../img/bullet.gif) 0 4px no-repeat; padding-left: 15px; margin: 3px 0;} .left-col {width: 405px; float: left;} .right-col {width: 504px; float: right; padding: 35px 10px 0 0;} .feature, div.pullquote {width: 405px; padding-top: 12px; background: transparent url(../img/feature-corners.gif) 0 0 no-repeat; margin: 15px 0;} div.pullquote {float: right; margin: 0 0 10px 30px; text-align: center; font-style: italic;} .feature .mid, div.pullquote .mid {padding: 13px 16px; background: transparent url(../img/feature-bg.gif) 0 0 repeat-y;} .feature .bottom, div.pullquote .bottom {height: 12px; background: transparent url(../img/feature-corners.gif) -405px 0 no-repeat;} div.pullquote .bottom {height: 36px; background: transparent url(../img/feature-bottom.gif) 0 0 no-repeat;} .feature h2 {margin-top: 0;} div.pullquote h2 {margin: 0 6px;} .pull, .form {color: #7d6e5e; padding: 0 29px; background: #09191a; border: 1px solid #0f2729; letter-spacing: 1px;} .form {width: 485px; padding: 10px; margin: 30px 0 0 8px;} * html .form {width: 475px;} * html .pull {padding: 0 19px;} /*button styles*/ #content .btn {height: 35px; display: block; background: transparent url(../img/btn.jpg) 0 0 no-repeat; padding: 0; text-indent: -4000px;} #content .btn:hover {border: 0; padding: 0;} #content .btn.more {width: 116px;} #content .btn.more:hover {background-position: 0 -35px;} #content .btn.getone {width: 116px; background-position: -116px 0;} #content .btn.getone:hover {background-position: -116px -35px;} #content .btn.send {width: 116px; background-position: -232px 0;} #content .btn.send:hover {background-position: -232px -35px;} #content .info, #content .info-gen, #content .info-gal {height: 27px; width: 27px; display: block; background: transparent url(../img/info.jpg) 0 0 no-repeat; padding: 0; text-indent: -4000px;} #content .info-gal {background: transparent url(../img/info-gal.png) 0 0 no-repeat;} #content .info:hover, #content .info-gen:hover, #content .info-gal.hover {background-position: 0 -27px; border: 0; padding: 0;} .tabs {background: transparent url(../img/tab-border.gif) 0 bottom repeat-x;} .right-col .tabs {margin: 51px 0 0 7px; width: 499px;} .tabs a {padding: 10px 24px 8px 24px; font-weight: bold; font-size: 120%; color: #081516; background: #0f2729; border: 1px solid #0f2729; border-bottom: 0; float: left; margin-right: 6px; letter-spacing: 1px;} .tabs a:hover {border-color: #0f2729; border-bottom: 0; color: #565d5e; padding: 10px 24px 8px 24px; background: #0f2729;} .tabs a.active, .tabs a.active:hover {background: #081516; color: #565d5e; border-color: #0f2729;} .tab-content {width: 451px; border: 1px solid #0f2729; border-top: 0; padding: 29px 23px; display: none;} .right-col .tab-content {margin-left: 7px;} #content .tab-content ul li {background: transparent url(../img/bullet3.gif) 0 4px no-repeat;} #design {display: block;} /* Product Gallery --------------------------------------------------------------------------------------------*/ /*preload classes*/ .svw {width: 50px; height: 20px;} .svw ul {position: relative; left: -999em;} /*core classes*/ .stripViewer {position: relative; overflow: hidden; margin: 0; } #content .stripViewer ul {margin: 0 auto; padding: 0; position: relative; left: 0; top: 0; width: 1%; list-style-type: none; clear: both;} #content .stripViewer ul li {float:left; background: transparent; padding: 0; margin: 0;} .stripTransmitter {overflow: auto; width: 1%;} #content .stripTransmitter ul {margin: 7px 0 0 0; padding: 0; position: relative; list-style-type: none; background: #112d2f;} #content .stripTransmitter ul li {width: 20px; float:left; margin: 0 8px 1px 0; background: transparent; padding: 0;} .stripTransmitter a {text-align: center; line-height: 22px; background: #112d2f; color: #a5a6a7; display: block; padding: 1px 5px; font-weight: normal;} .stripTransmitter a:hover {color: #7d6e5e; padding: 1px 5px; border: 0; background: #112d2f;} a.current, a.current:hover {background: #081516; color: #a5a6a7; font-weight: bold;} .ldrgif {margin: 150px 0 0 220px;} /*Container / Controls*/ .gallerycontainer {width: 484px; height: 346px; background: transparent url(../img/gal-BG.gif) 0 0 no-repeat; padding: 24px 0 0 30px; overflow: hidden; margin-top: -5px;} .controls {float: right; height: 16px; width: 34px; margin: -16px 46px 0 0;} * html .controls {margin-right: 23px;} .controls a {display: block; height: 12px; width: 11px; background: transparent url(../img/prevnext.gif) 0 0 no-repeat; float: left; padding: 0;} .controls a:hover {padding: 0; border: 0; background: transparent url(../img/prevnext.gif) 0 0 no-repeat;} .controls a.next {margin-left: 12px; background-position: -18px 0;} .controls a.last {background-position: 0 -16px;} .controls a.next.last {margin-left: 12px; background-position: -18px -16px;} .gallerycontainer .info-gal {position: relative; top: -67px; left: 446px; z-index: 100;} /* Footer --------------------------------------------------------------------------------------------*/ #footer {background: #000101; height: 76px; margin-top: 60px; border-top: 2px solid #0f2526; color: #3a4047;} #footer div {width: 950px; margin: 0 auto;} #footer p {margin: 10px 0;} #footer a {color: #5c5e60;} #footer a:hover {color: #8e9194; background: #3a4047; border-color: #5c5e60;} #footer .right:after {content: "."; clear: both; height: 0; visibility: hidden; display: block;} * html #footer .right {height: 1px;} /* PopUp Divs --------------------------------------------------------------------------------------------*/ .alert {width: 587px; position: absolute; z-index: 1000; left: 50%; margin-left: -293px; color: #112d2f; display: none; text-align: left;} * html .alert {width: 587px;} * html #elevation, * html #battery, * html #modular {width: 584px;} .alert .top {height: 24px; background: transparent url(../img/alert-top.png) 0 0 no-repeat;} .alert .mid {background: transparent url(../img/alert-mid.png) 0 0 repeat-y; padding: 7px 40px;} .alert .bottom {background: transparent url(../img/alert-bottom.png) 0 0 no-repeat; height: 27px; width: 587px;} .alert .mid img {border: 1px solid #818488; padding: 5px; float: left; margin: 0 25px 15px 0;} *:first-child+html .alert .mid img {position: relative;} .alert .mid h1 {margin: -25px 0 20px 0; font-weight: normal; color: #112d2f;} *:first-child+html .mid h1 {font-size: 200%;} .alert .mid strong {color: #04090a; font-style: italic;} .alert .mid a {color: #3869a1;} .alert a:hover {background: #4c79ad; color: #fff;} .alert .close, .alert .close:hover {position: relative; top: 0px; left: 490px; display: block; height: 19px; width: 19px; background: transparent url(../img/close.png) 0 0 no-repeat; padding: 0; border: 0;} .alert ul li {background: transparent url(../img/bullet2.gif) 0 4px no-repeat; padding-left: 15px;} .alert .col {width: 40%; float: left; margin: 0 20px;} #dim {width: 100%; background: #112d2f; opacity: .50; position: absolute; top: 0; left: 0; width: 100%; display: none; z-index: 1;} /* Form Styles --------------------------------------------------------------------------------------------*/ #content form {margin: 30px 10px;} form span {display: block; color: #7d6e5e;} #content form div {margin-bottom: 10px;} input, select, textarea {background: #b7babe !important; padding: 4px 4px 4px 4px; border: 1px solid #081516; color: #112d2f;} #content input, #content textarea {width: 400px; font-size: 100%;} #content textarea {font-family: Arial, Helvetica, sans-serif; font-size: 110%; white-space: nowrap;} #content #alert textarea {font-size: 75% !important;} #content select {margin: 10px 0 10px 0;} #content form option {padding-right: 10px;} #content .left select {margin-top: 0;} #content .left input {width: 100px;} input.focus, textarea.focus, select.focus {background: #7d6e5e !important; border-color: #b7babe; color: #fff !important;} input.button {border: 0; padding: 0; width: auto;} #content .check input, #content .radio input {padding: 0; margin-right: 10px; width: auto; border: 0;} label.error {background: #931d1d url(../img/error.gif) 0 0 no-repeat; padding: 23px 6px 6px 6px; color: #fff; margin: 3px 0; display: block; width: 398px; border-bottom: 1px solid #fff;}