/* ===== Global ================================================================= */ html {overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background-repeat:repeat-y; background-position:top center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: 1700px; margin-top:0px; height:100%;} body {margin: 0; background-image:url(http://www.maximumcollision.com/img/background.jpg); background-repeat:no-repeat; background-position:top center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: 1700px; margin-top:0px; background-color:#8496a0; height:100%;} ::-moz-selection {background: #ff7e00; color: #fff; text-shadow: none; } ::selection {background: #ff7e00; color: #fff; text-shadow: none; } .wrapper {margin:auto; width:960px; padding-left:50px; height:85%;} /* ===== Typography ============================================================= */ .text { font:14px Helvetica, Helvetica Neue, Arial; color:#444; line-height:1.2em; } .lighttext { font:14px Helvetica, Helvetica Neue, Arial; color:#FFF; line-height:1.4em; } .lighttext a { font:14px Helvetica, Helvetica Neue, Arial; color:#FFF; line-height:1.4em; } a { line-height:1.0em; color:#042b5e;} a:hover { line-height:1.0em; color:#ff7e00;} h1 { font:21px Helvetica, Helvetica Neue, Arial; color:#082e61; font-weight:bold; } h2 { font:18px Helvetica, Helvetica Neue, Arial; color:#ff7e00; font-weight:bold; } h3 { font:40px Helvetica, Helvetica Neue, Arial; color:#FFF; font-weight:bold; } ul { font:14px Helvetica, Helvetica Neue, Arial; color:#444; list-style:none; display:block; padding-bottom:5px; line-height:1.2em; } li { line-height:1.6em; } .copyrighttxt { font:11px Helvetica, Helvetica Neue, Arial; color:#FFF; } .copyrighttxt a { font:11px Helvetica, Helvetica Neue, Arial; color:#FFF; text-decoration:none; } .copyrighttxt a:hover { font:11px Helvetica, Helvetica Neue, Arial; color:#ff7e00; text-decoration:none; } /* ===== Layout ================================================================= */ #main {width:960px; height:100%;} #menu {width:659px; height:48px; margin-top:-80px; margin-left:250px; } #mainpicsbox {width:939px; height:491px; margin-top:25px; margin-left:-12px; } #tagline {width:700px; height:25px; position:absolute; margin-top:380px; margin-left:210px; } #tagline2 {width:700px; height:25px; position:absolute; margin-top:330px; margin-left:210px; } #social {width:75px; height:40px; position:absolute; margin-top:13px; margin-left:840px; } #breadcrumbs {width:585px; height:20; padding-top:0px; padding-left:0px; padding-bottom:20px; } #leftcolumn {width:617px; min-height:800px; margin-top:0px; margin-left:0px; float:left; background-color:#F4F4F4; } #insideleftcolumn {width:585px; padding-top:10px; padding-left:20px; } #rightcolumn {width:300px; min-height:780px; margin-top:-800px; margin-left:617px; float:left; padding-top:20px; background-color:#FFF; } #insiderightcolumn {width:287px; padding-left:8px; } #maincolumn {width:920px; min-height:760px; margin-top:0px; margin-left:0px; padding-bottom:20px; float:left; background-color:#F4F4F4; } #insidemaincolumn {width:900px; height:960px; padding-top:10px; padding-left:20px; } #insidemaincolumn2 {width:900px; height:auto; padding-top:10px; padding-left:20px; } #row1 {width:960px; height:275px; } #servicesbox {width:298px; height:275px; margin-left:-4px; background-image:url(http://www.maximumcollision.com/img/serviceboxbg.png); background-repeat:no-repeat; float:left; } #servicesbox:hover {width:298px; height:275px; background-image:url(http://www.maximumcollision.com/img/serviceboxbgOVER.png); background-repeat:no-repeat; } #insideservicesbox {width:258px; height:275px; margin-left:2px; padding-top:20px; padding-left:20px; } #row2 {width:960px; height:366px; } #servicesbox2 {width:298px; height:366px; margin-left:-4px; background-image:url(http://www.maximumcollision.com/img/serviceboxbg2.png); background-repeat:no-repeat; float:left; } #servicesbox2:hover {width:298px; height:366px; background-image:url(http://www.maximumcollision.com/img/serviceboxbg2OVER.png); background-repeat:no-repeat; } #insideservicesbox2 {width:258px; height:366px; margin-left:2px; padding-top:20px; padding-left:20px; } #row3 {width:960px; height:340px; } #servicesbox3 {width:298px; height:340px; margin-top:-90px; margin-left:-4px; background-image:url(http://www.maximumcollision.com/img/serviceboxbg3.png); background-repeat:no-repeat; float:left; } #servicesbox3:hover {width:298px; height:340px; background-image:url(http://www.maximumcollision.com/img/serviceboxbg3OVER.png); background-repeat:no-repeat; } #insideservicesbox3 {width:258px; height:340px; margin-left:2px; padding-top:20px; padding-left:20px; } #servicesbox4 {width:298px; height:275px; margin-top:-90px; margin-left:-4px; padding-bottom:100px; background-image:url(http://www.maximumcollision.com/img/serviceboxbg.png); background-repeat:no-repeat; float:left; } #ournetwork {width:500px; height:300px; padding-bottom:25px; float:left; } #warrantybox {width:300px; margin-right:70px; float:right; } #testimonialsbox {width:890px; height:300px; padding-bottom:25px; float:left; } #gallerybox {width:920px; height:400px; margin-left:100px; padding-bottom:150px; float:left; } #gallerythumb {width:100px; height:100px; border:0px; padding:24px; float:left;} #footer {clear:both; width:100%; height:200px; padding-top:25px; background-color:#052a5d; } #botcol1 {width:190px; margin-left:0px; float:left; } #botcol2 {width:190px; margin-left:25px; float:left; } #botcol3 {width:190px; margin-left:25px; float:left; } #botcol4 {width:190px; margin-left:20px; float:left; } #botcol5 {width:190px; margin-top:-61px; margin-right:-190px; float:right; } #creditsbox {width:160px; float:left; margin-top:15px; margin-left:100px; } /* Abbosford About Page */ #leftcolumn2 {width:617px; height:1450px; margin-top:0px; margin-left:0px; float:left; background-color:#F4F4F4; } #insideleftcolumn2 {width:585px; height:auto; padding-top:10px; padding-left:20px; } #staffbox {width:293px; height:125px; margin-right:-2px; float:left;} #rightcolumn2 {width:300px; height:1450px; margin-top:0px; margin-left:617px; padding-top:20px; background-color:#FFF; } #insiderightcolumn2 {width:287px; padding-left:8px; } #list {width:290px; padding-bottom:25px; float:left; } /* White Rock About Page */ #leftcolumn3 {width:617px; height:1950px; margin-top:0px; margin-left:0px; float:left; background-color:#F4F4F4; } #insideleftcolumn3 {width:585px; height:auto; padding-top:10px; padding-left:20px; } #laststaffbox {width:293px; height:125px; margin-right:-2px; padding-bottom:25px; float:left; } #rightcolumn3 {width:300px; height:1950px; margin-top:0px; margin-left:617px; padding-top:20px; background-color:#FFF; } #insiderightcolumn3 {width:287px; padding-left:8px; } #list {width:290px; padding-bottom:25px; float:left; } #communities {float:left;} #maps {width:290px; margin-top:-265px; float:right; padding-bottom:50px; } #abbotsford {width:290px; } #whiterock {width:290px; } /* Locations Page */ #leftcolumn4 {width:617px; height:1650px; margin-top:0px; margin-left:0px; float:left; background-color:#F4F4F4; } #insideleftcolumn4 {width:585px; height:auto; padding-top:10px; padding-left:20px; } #laststaffbox {width:293px; height:125px; margin-right:-2px; padding-bottom:25px; float:left; } #rightcolumn4 {width:300px; height:1650px; margin-top:0px; margin-left:617px; padding-top:20px; background-color:#FFF; } #insiderightcolumn4 {width:287px; padding-left:8px; } #list {width:290px; padding-bottom:25px; float:left; } /* Claims Page */ #leftcolumn5 {width:617px; height:1000px; margin-top:0px; margin-left:0px; float:left; background-color:#F4F4F4; } #insideleftcolumn5 {width:585px; height:auto; padding-top:10px; padding-left:20px; } #laststaffbox {width:293px; height:125px; margin-right:-2px; padding-bottom:25px; float:left; } #rightcolumn5 {width:300px; height:1000px; margin-top:0px; margin-left:617px; padding-top:20px; background-color:#FFF; } #insiderightcolumn5 {width:287px; padding-left:8px; } #list {width:290px; padding-bottom:25px; float:left; } /* Abbotsford Location Page */ #leftcolumn6 {width:617px; height:880px; margin-top:0px; margin-left:0px; float:left; background-color:#F4F4F4; } #insideleftcolumn6 {width:585px; height:auto; padding-top:10px; padding-left:20px; } #laststaffbox {width:293px; height:125px; margin-right:-2px; padding-bottom:25px; float:left; } #rightcolumn6 {width:300px; height:880px; margin-top:0px; margin-left:617px; padding-top:20px; background-color:#FFF; } #insiderightcolumn6 {width:287px; padding-left:8px; } #list {width:290px; padding-bottom:25px; float:left; } #estimateform {width:617px; margin-top:-50px; margin-left:-375px; } #phonenumbers {width:400px; height:20px; margin-top:16px; margin-left:460px; position:absolute; } /* ===== Graphics =============================================================== */ #logo {width:252px; height:130px; margin-top:2px; margin-left:0px; border:0px; } #facebook {width:30px; height:30px; padding-right:5px; border:0px; } #twitter {width:30px; height:30px; padding-right:5px; border:0px; } #submenu {width:940px; height:92px; margin-top:-10px; margin-left:-13px; border:0px; } #sidebarpics {width:85px; height:165px; padding-right:5px; margin-left:-7px; border:0px; } #bullet {width:10px; height:10px; margin-left:5px; padding-right:10px; border:0px; } #arrow {width:10px; height:10px; margin-left:5px; padding-right:15px; border:0px; } #arrow2 {width:10px; height:10px; margin-left:5px; border:0px; } #sidebarhrule {width:285px; height:7px; padding-top:20px; padding-bottom:20px; border:0px; } #warrantyseal {width:139px; height:139px; margin-left:75px; padding-bottom:10px; border:0px; } #subbullet {width:7px; height:7px; margin-left:5px; padding-top:6px; padding-right:5px; border:0px; } #subbullet2 {width:7px; height:9px; margin-left:5px; padding-top:-2px; padding-right:3px; border:0px; } #subbullet3 {width:7px; height:9px; margin-left:5px; padding-top:8px; padding-right:3px; padding-bottom:75px; float:left; border:0px; } #maxcolsmall {width:135px; height:68px; float:right;margin-top:15px; border:0px; } #staffthumbs {width:65px; height:81px; float:left; padding-right:5px; border:0px } #locationpics {width:589px; height:355px; padding-bottom:15px; border:0px; } #icbc {width:100px; height:100px; padding-bottom:200px; padding-right:10px; border:0px; } #candir {width:100px; height:100px; padding-bottom:200px; padding-right:10px; border:0px; } #locationthumbs {width:290px; height:200px; padding-top:10px; border:0px; } #gallerythumb {width:300px; height:100px; float:left; padding-right:5px; } /* ===== Drop Down Menu ================================================================= */ .dropmenu li a, .dropmenu li{ float: left; z-index: 100;} .dropmenu li{ list-style:none; position: relative; top: 1px; z-index:50; } .dropmenu li > ul, .dropmenu li > div { display: none; position: absolute; top: 100%;} .dropmenu li:hover > ul, .dropmenu li:hover > div{ display: block; text-align:center; z-index:100;} #subbutton {width:131px; height:42px; margin-top:-5px; margin-left:-1px; overflow:hidden;} /* ===== Bottom Menu ================================================================= */ ul#botnav {font:12px Helvetica, Helvetica Neue, Arial; margin-top:-12px; padding:0; list-style:none; } ul#botnav li {display:block; position:relative; padding-right:1px;} #botnav #last {display:block; position:relative; float:left; border-right:none; } li#botnav ul {display:none; } ul#botnav li a {display:block; text-decoration:none; color:#EEE; padding:5px 5px 5px 5px; margin-left:0px; white-space: nowrap; line-height:0.8em;} ul#botnav li a:hover {text-decoration:underline; } /* ===== Tabs Menu ================================================================= */ ul#tabnav { /* general settings */ text-align: left; /* set to left, right or center */ margin: 1em 0 2em 0; /* set margins as desired */ font: bold 11px verdana, arial, sans-serif; /* set font as desired */ border-bottom: 1px solid #042b5e; /* set border COLOR as desired */ list-style-type: none; padding: 3px 10px 3px 0px; /* THIRD number must change with respect to padding-top (X) below */ } ul#tabnav li { /* do not change */ display: inline; } body#tab1 li.tab1, body#tab2 li.tab2 { /* settings for selected tab */ border-bottom: 1px solid #F4F4F4; /* set border color to page background color */ background-color: #F4F4F4; /* set background color to match above border color */ } body#tab1 li.tab1 a, body#tab2 li.tab2 a { /* settings for selected tab link */ background-color: #fff; /* set selected tab background color as desired */ color: #000; /* set selected tab link color as desired */ position: relative; top: 1px; padding-top: 4px; /* must change with respect to padding (X) above and below */ } ul#tabnav li a { /* settings for all tab links */ padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */ border: 1px solid #042b5e; /* set border COLOR as desired; usually matches border color specified in #tabnav */ background-color: #fff; /* set unselected tab background color as desired */ color: #666; /* set unselected tab link color as desired */ margin-right: 0px; /* set additional spacing between tabs as desired */ text-decoration: none; border-bottom: none; } ul#tabnav li.tab3 a { /* settings for all tab links */ padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */ border: 1px solid #042b5e; /* set border COLOR as desired; usually matches border color specified in #tabnav */ background-color: #fbe2c9; /* set unselected tab background color as desired */ color: #666; /* set unselected tab link color as desired */ margin-right: 0px; /* set additional spacing between tabs as desired */ text-decoration: none; border-bottom: none; } ul#tabnav li a:hover { /* settings for all tab links */ padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */ border: 1px solid #042b5e; /* set border COLOR as desired; usually matches border color specified in #tabnav */ background-color: #fbe2c9; /* set unselected tab background color as desired */ color: #666; /* set unselected tab link color as desired */ margin-right: 0px; /* set additional spacing between tabs as desired */ text-decoration: none; border-bottom: none; } .servicesfooter { color: #FFF; } .servicesfooter a { color: #FFF; text-decoration: none; } /* end css tabs */