/* Theme Name: Engineered Automotive Theme URI: http://www.trusz.com/ Description: Custom theme for the Engineering Automotive Website. Version: 1.0 Author: Joshua Trusz Author URI: http://www.trusz.com/ */ html, body { height:100%; width:100%; margin:0; font-family: Arial, Verdana, sans-serif; text-align: center;font-size: 125%; background: black; } body {font-size: 50%; color:white;} #container { width:100%; height:auto; display: table; padding: 0; text-align: center; background-image: url(images/bg_header.gif); background-repeat: repeat-x} #content {width:980px; margin: 0 auto; text-align: left; position: relative; overflow: hidden} #header {padding:0px;} #mainContent {margin:0; padding:0;} /* ========================= font styles =========================*/ @font-face { font-family: BellGothic; src: url('/fonts/BellGothicStd.otf'); } @font-face { font-family: BellGothicBold; src: url('/fonts/BellGothicBold.otf'); } p {font-size: 1.3em; color:#666; line-height: 20px; text-align: left;} h1 {font-size:2.0em; color: #fff; font-weight: normal; margin:0; padding:0; text-transform: uppercase; font-family: BellGothic, Arial, sans-serif;} h2 {font-size:2.6em; padding:0; margin:0; font-weight: normal; color:#fff; text-transform: uppercase; font-family: BellGothic, Arial, sans-serif;} h3 {font-size:1.6em; color: #fff; padding:0; margin:0; font-family: BellGothic, Arial, sans-serif; } h4 {font-size:18px; color: #fff;font-weight: normal; font-family: BellGothic, Arial, sans-serif; } li {font-size:12px; line-height:20px; color:#fff; padding:0; margin:0; list-style-image: url(images/img_bullet.gif)} a, a:link, a:visited {color:#fff; text-decoration: none} a:hover {text-decoration: underline} .centerImage {margin:0 150px 0 0; padding:1px; border:solid 1px #999} .leadingText {font-size: 1.4em; font-style: italic} .contentImage {margin:0px 0 10px 10px; border:solid 1px #333; padding:1px; background-color: black; position:relative;} .contentImageLeft {margin:10px 10px 10px 0px; border:solid 1px #333; padding:1px; background-color: black; position:relative;} /* ========================= home =========================*/ #homeMainArea {width:980px; height:400px; margin:0px 0 40px 0; background-position: right;} #homeImages {background-image: url(images/bg_home.jpg); background-repeat: no-repeat; top:160px; left:370px; width:602px; height: 368px; position:absolute} div#rotator { width:888px; height:377px; position:absolute; top:125px; left:50px; margin:10px 0 20px 0px; z-index: 0; overflow: hidden; padding:10px} div#rotator ul li {float:left; position:absolute; list-style-type: none;} div#rotator ul li.show {z-index:50} #homeMainContent {padding:75px 0 0 0; margin:0px 0 0 25px; width:360px; text-align: left; color:#fff; } #homeMainContent p {width:300px; color:#fff; line-height: 22px;} #homeContentArea {margin:350px 0 30px 23px; } #contentModuleOuter {border:solid 1px #666; margin:0 30px 30px 0; float:left; overflow: hidden; } #contentModuleOuterEnd {border:solid 1px #666; margin:0 0px 30px 0; float:left; overflow: hidden; } #contentModule {width:285px; min-height: 217px; border:solid 5px #353535; padding:0px;background-image: url(images/bg_contentPanel.gif); background-repeat: repeat-x; -webkit-box-shadow: rgba(0, 0, 0, 0.296875) 0px 1px 3px; -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3); overflow: hidden; } #contentModuleSocial {width:260px; min-height: 22px; border:solid 5px #353535; padding:0px;background-image: url(images/bg_contentPanel.gif); background-repeat: repeat-x; -webkit-box-shadow: rgba(0, 0, 0, 0.296875) 0px 1px 3px; -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3); } #subModules #contentModule {width:291px} #sidebar #contentModule {width:260px} #contentModuleOuter:last-child {float:left; margin:0 0 30px 0 } #contentModule image {align:center} #contentModule p {margin:0; padding:0;} #contentModule a {font-size: 1.0em;} #contentModule h3 {margin:15px 0 0 15px} #homeNews {margin:0; border-bottom: solid 1px #333; padding:15px; min-height: 120px; overflow: auto;} #homeNews:last-child {margin:0 0 15px 0; border-bottom: none} #panelViewAll {text-align: right; padding:6px; background-image: url(images/bg_contentPanel.gif); background-repeat: repeat-x} #panelViewAll p {text-align: right} #panelViewAll img {padding:0 10px 0 10px} #itemsLeft {width:50px; float:left} #itemsLeft img {padding:1px; border:solid 1px #999;} #itemsLeft img:hover {padding:1px; border:solid 1px #fff;} #itemsRight {float:right; width:190px; margin: 0;} #sidebar #itemsRight {float:right; width:170px; margin: 0;} .attachment-post-thumbnail {float: left; margin-right: 10px; } /* ========================= sub page =========================*/ #breadCrumb {margin:0 0 20px 0; padding:0px 0 0px 0px; color:#666666; font-size: 1.2em} #breadCrumb a {color:#666666} #breadCrumb a:hover {color:#fff;} .panes {overflow:hidden;} #clearFloat {clear: both;} .noBorder {border: none;} .imgLeft {padding:1px; border: solid 1px #666; margin:10px 10px 10px 0} .imgRight {padding:1px; border: solid 1px #666; margin:10px 0px 10px 10px} #subContainer {margin:0px 0 0 20px; width:960px;} #subContainerFull {margin:0px 0 0 20px; width:650px; float:left;} #subContent {margin:20px 0 20px -10px; padding:0; min-height:300px; } #subModules {margin: 0 0 0 10px} #sidebar {float:right; width:285px; margin:30px 0 0 0; padding:0 0 0 3px} #imageFloaterSales {float:right; margin:-20px 0 0 500px; padding:0; position:absolute; z-index: 200;} #imageFloaterServices {float:right; margin:-10px 0 0 480px; padding:0; position:absolute; z-index: 200;} #imageFloaterAbout {float:right; margin:-50px 0 0 480px; padding:0; position:absolute; z-index: 0;} #imageFloaterExperience {float:right; margin: 0px 0 0 555px; padding:0; position:absolute; z-index: 200;} .bgSales {background-image: url(images/bg_salesBacking.jpg); background-repeat: no-repeat; background-position: bottom;} #magnify {position: absolute; width:28px; height:23px; margin:80px 0 0 125px;float:left; padding:0; background-image: url(images/icon_magnify.gif); background-repeat: no-repeat} .bookNow {float:left; font-size: 1.4em; padding:10px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #990000; } /* ========================= blog posts =========================*/ #blogPost {width:600px; margin:0 0 30px 10px; border-bottom: solid 1px #333; overflow: auto; padding:0 0 20px 0} #blogPost #itemLeft {width:140px; float:left; margin:15px 0 0 0} #blogPost img {padding:1px; border:solid 1px #666; margin:0px 15px 10px 0} #blogPost img:hover {padding:1px; border:solid 1px #ed2328;} #blogPost #itemRight {width:430px; float:right; } #readMore {padding:10px; background-image:url(images/bg_readMore.gif); background-repeat: repeat-x; margin:-10px 0 0 0; float:right;} #calendarRight {float:right; width:400px;} #calendarLeft {float:left; width:100px;} .calendarTable {font-size: 1.3em;} .tableheader {background-color:#666;} .floatLeft {float:left;} .floatLeft img {padding:1px; border:solid 1px #666; margin:10px 15px 10px 0} .floatLeft img:hover {padding:1px; border:solid 1px #ed2328;} .floatRight {float:right; width:50%;} /* ========================= inventory =========================*/ #innerContentClip {overflow: hidden; padding: 0 0 10px 0; border-bottom: dotted 1px #efefef; margin:20px 0 0 0; overflow: hidden} #innerContent {float:right; width:750px} #innerContentNarrow {float:right; width:500px} #innerContentThumb {float:left;} #innerContentThumb img {border: solid 1px #666; padding:2px;} #innerContentThumb img:hover {border:solid 1px #ed2328;} .inventoryPrice {float:right; font-size: 1.4em; padding:0px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #4a4a4a; } .moreInfo {float:right; font-size: 1.4em; padding:10px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #910101; margin:-15px 0 0 0} /* ========================= contact =========================*/ #contactInfo {float:left; width:400px; overflow: hidden; font-size: 1.2em; line-height: 1.6em; position: relative} #officeHours {position:absolute; top:400px; left:450px; width:450px; font-size: 1.2em; line-height: 1.6em;} #contentWrap {overflow: hidden; } /* ========================= testimonials =========================*/ #testimonialWrap {margin: 0 0 20px 0} #testimonialClip {-moz-border-radius: 10px; -webkit-border-radius: 10px; border: solid 1px #333; padding:20px; background-color: #333;} #testimonialNotch {background-image: url(images/img_testimonialsNotch.png); background-repeat: no-repeat; width:39px; height:28px; position:relative; padding:0; margin:0 0 0 200px;} /* ========================= employment =========================*/ #jobContent {float:right; width:700px;} #applyButton {float:left; width:200px; text-align: center;} /* ========================= main navigation =========================*/ #headerContact {float:right; margin:15px 0 0 0; width:280px;} #textContent {text-align: right; float:left; color:#999} #socialMedia {float:right; margin: 0 0 0 10px} #socialMedia img {margin:0 5px 0 0} #logo {width:326px; height:126px; float:left; margin:31px 0 20px 0;} #topNav {height:54px; width:498px; z-index: 100; position: relative; float:right; margin:25px 0 0 0} #nav {background-image: url("images/topNav.gif"); background-repeat: no-repeat; padding:0; height:54px; width:498px; margin:0px} #nav span {display: none;} #nav li, #nav a {display:block; height:55px;} #nav li {float:left; list-style:none; display:inline;} #topNav #sales {width:77px;} #topNav #services {width:108px;} #topNav #eaexperience {width:204px;} #topNav #about {width:109px;} /* OVER STATES*/ #topNav #sales a:hover {background:url("images/topNav.gif") 0px -77px no-repeat; } #topNav #services a:hover {background:url("images/topNav.gif") -77px -77px no-repeat; } #topNav #eaexperience a:hover {background:url("images/topNav.gif") -185px -77px no-repeat; } #topNav #about a:hover {background:url("images/topNav.gif") -389px -77px no-repeat; } /* this disables the background image on the sub navs */ #topNav #sales .subNav a:hover {background:none } #topNav #services .subNav a:hover {background:none } #topNav #eaexperience .subNav a:hover {background:none } #topNav #about .subNav a:hover {background:none } /* ON STATES*/ #topNav.sales #sales a {background:url("images/topNav.gif") 0px -154px no-repeat; } #topNav.services #services a {background:url("images/topNav.gif") -77px -154px no-repeat; } #topNav.eaexperience #eaexperience a {background:url("images/topNav.gif") -185px -154px no-repeat; } #topNav.about #about a {background:url("images/topNav.gif") -389px -154px no-repeat; } /* this disables the background image on the sub navs */ #topNav.sales #sales .subNav a {background:none } #topNav.services #services .subNav a {background:none } #topNav.eaexperience #eaexperience .subNav a {background:none } #topNav.about #about .subNav a {background:none } /* ========================= sub navigation =========================*/ ul#nav li {float: left; margin: 0; padding: 0;} ul#nav li a {padding: 10px 10px; display: block; color: #f0f0f0; text-decoration: none;} ul#nav li:hover {background:none } ul#nav li .subNav {float: left; padding: 10px 0; position: absolute; height:10px; left: -140px; top:60px; display: none; /*--Hide by default--*/ width: 970px; color: #fff; font-size: 1.1em; font-family: BellGothic, Arial, sans-serif; text-transform: uppercase;} ul#nav li:hover .subNav, ul#nav li:hover .subNavAbout { display: block; } /*--Show subnav on hover--*/ ul#nav li .subNav a, ul#nav li .subNavAbout a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/ ul#nav li .subNav a:hover, ul#nav li .subNavAbout a:hover {background: none; border: none; color:#e60000} /* ========================= footer =========================*/ #footer {width:100%; height:100px; text-align: center; padding:0; margin:20px auto; font-size: 1.1em; line-height: 1.5em; background-image: url(images/bg_footer.gif); background-repeat: repeat-x } #footerContent {width:945px; height:100px; margin: 0px auto; padding:15px 0 0 0; text-align: center; position: relative;} #footerLeft {float:left; color:#999; margin:0 0 0 5px; padding:20px 0 0 0} #footerRight1 {float:right; color:#999; margin:0 0px 0 0; border-left:solid 1px #999; padding:20px 0 0 10px; text-align: left} #footerRight2 {float:right; color:#999; margin:0 20px 0 0; border-left:solid 1px #999; padding:20px 0 0 10px; text-align: left} #footer p {font-size: 0.9em; color:#999; margin:0;} #footer a {color:#999} #footer a:hover {color:#fff} /* ========================= form formatting =========================*/ .inputError { BORDER-RIGHT: #cc3333 1px solid; BORDER-TOP: #cc3333 1px solid; BORDER-LEFT: #cc3333 1px solid; BORDER-BOTTOM: #cc3333 1px solid; COLOR: #cc3333; BACKGROUND-COLOR: #FFFFD7; margin:0px; padding:2px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;width:315px;} .inputNormal { BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; BORDER-BOTTOM: #999 1px solid; COLOR: #333; BACKGROUND-COLOR: #efefef; width:315px; margin:0px; padding:2px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;} .innerError { BORDER-RIGHT: #cc3333 1px solid; BORDER-TOP: #cc3333 1px solid; MARGIN: 0 0 10px 0; BORDER-LEFT: #cc3333 1px solid; BORDER-BOTTOM: #cc3333 1px solid; COLOR: #ff0000; padding:5px; width:310px;} .submitClass { background: #ff0000; color:#fff; padding:2px; border:none; } .submitClass:hover { background: #b32017; color:#fff; padding:2px; border:none; } .success {font-weight: bold; color:#339900} /* ====================================================== Tabs ======= */ /* root element for tabs */ ul.tabs { list-style:none; margin:0 !important; padding:0; height:30px;} /* single tab */ ul.tabs li { float:left; text-indent:0; padding:0; margin:0 !important; list-style-image:none !important; } /* link inside the tab. uses a background image */ ul.tabs a { background: url(images/tabs.png) no-repeat -420px 0; font-size:12px; display:block; height: 30px; line-height:30px; width: 134px; text-align:center; text-decoration:none; color:#ccc; padding:0px; margin:0px; position:relative; top:1px;} ul.tabs a:active { outline:none; } /* when mouse enters the tab move the background image */ ul.tabs a:hover { background-position: -420px -31px; color:#fff; } /* active tab uses a class name "current". it's highlight is also done by moving the background image. */ ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a { background-position: -420px -62px; cursor:default !important; color:#fff !important;} /* Different widths for tabs: use a class name: w1, w2, w3 or w2 */ /* width 1 */ ul.tabs a.s { background-position: -553px 0; width:81px; } ul.tabs a.s:hover { background-position: -553px -31px; } ul.tabs a.s.current { background-position: -553px -62px; } /* width 2 */ ul.tabs a.l { background-position: -248px -0px; width:174px; } ul.tabs a.l:hover { background-position: -248px -31px; } ul.tabs a.l.current { background-position: -248px -62px; } /* width 3 */ ul.tabs a.xl { background-position: 0 -0px; width:248px; } ul.tabs a.xl:hover { background-position: 0 -31px; } ul.tabs a.xl.current { background-position: 0 -62px; } /* initially all panes are hidden */ div.panes div.pane { display:none; } .panes {padding:20px; background-image: url(images/bg_mainContent.gif); background-repeat: repeat-x; border-bottom: solid 1px #666;} div.panes p {margin:10px 0 10px 0; color:#ccc; } /* ============================= Comments =============================== */ h2#comments, h2#postcomment {border-top:dotted 1px #fff; margin:20px 0 0 0; padding:20px 0 0 0} #commentsWrapper {margin: 0 0 0 10px} .submitButton {background-image: url(images/bg_readMore.gif); background-repeat: repeat-x; border: none; padding:10px; color:white; cursor: pointer} #commentform #author, #commentform #email, #commentform #url, #commentform textarea { background: #fff; border: 1px solid #333; padding: .2em;} #commentform textarea {width: 100%;} #commentlist li ul {border-left: 1px solid #ddd; list-style-type: none;} #commentlist li .avatar {float: right; margin-right: 25px; border: 1px dotted #ccc; padding: 2px;} #commentlist li {padding:10px 0; border-bottom:dotted 1px #666; margin:10px 0 0 -40px; list-style: none; } .commentsField {width:300px;}