/* Sage Media CSS Styles and Layout Control Document Copyright Sage Media, All Rights Reserved info@sagemedia.ca http://www.sagemedia.ca */ /* Browser Controls */ * {padding: 0; margin: 0; outline:none; line-height:14px} /* Universal Controls */ body {background:#F2F2F2 url(/images/bgbumpy.png) no-repeat fixed top center; text-align: center; font:10px Verdana, sans-serif; color: #666; padding:22px 0 0 0} img {border:0} h1 {font-size:10px; line-height:13px; font-weight:normal; color:#666666; text-align:right; margin:0 10px 0 0; } h3 {line-height:18px; margin:0 8px 0 0; } h5 {font-style:italic; font-size:9px; font-weight:normal; font-variant:normal; color:#bfbfbf; } .hone {font-size:12px; background-color:#ECECEC; padding:5px; border:1px solid #e8e8e8; border-top:0; margin:0; -moz-border-radius: 0 0 8px 8px; -webkit-border-radius: 0 0 8px 8px;} .folioh1 {font-size:12px; background-color:#ECECEC; padding:5px; border:1px solid #e8e8e8; border-top:0; margin:0; -moz-border-radius: 0 0 8px 8px; -webkit-border-radius: 0 0 8px 8px; text-transform:uppercase; text-align:center; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;} .folioh1 strong {font-size:13px} /* Link Behaviours */ a:link {color: #666666; text-decoration: none;} a:visited {color: #666666; text-decoration: none;} a:hover {color: #65784f; text-decoration: none;} a:active {color: #666666; text-decoration: none;} /* -------------------------- Structure Controls -------------------------- */ /* Shared */ #container {text-align: left; width: 792px; margin: 0px auto; position: relative; background:none} #container1 {text-align: left; width: 792px; margin: 0px auto 0 auto; padding-bottom:0; position: relative; background-image:url(/images/mid.jpg)} #core0 {width: 792px; margin: 0; padding: 0; background: url(/images/mid.jpg); position:relative} #core00 {width: 792px; padding: 0; background: url(/images/midbig.jpg); position:relative; margin:0 auto;} #header {width: 792px; height: 104px; overflow: hidden;} #headerlogo {background: url(/images/logo.png) no-repeat left top; height: 104px; width: 165px; float: left; } #headertopleaves {background: url(/images/topbar.png) no-repeat left top; height: 77px; width: 627px; float: left; text-align:left; text-indent: -15000px;} #headertop {background: url(/images/topbar.png) no-repeat left top; height: 77px; width: 627px; float: left; text-align:left; text-indent: -15000px;} #menudiv {background: url(/images/menu1.png) no-repeat left top; height: 27px; width: 627px; float: left; overflow: hidden;} #menudivn {background: url(/images/menu1n.png) no-repeat left top; height: 27px; width: 627px; float: left; overflow: hidden;} #menudive {background: url(/images/menu1e.png) no-repeat left top; height: 27px; width: 627px; float: left; overflow: hidden;} #menu {height: 27px; width: 627px; float: left; position: relative; overflow: hidden; text-align:center} #menu a {padding:5px 1px 0 0; font-size:11px} #menu a:hover {padding: 5px 1px 0 0; margin: 0; outline:none;} #menu a:active {outline:none;} #menu li {position: absolute; list-style: none;} #menu li, #menu a {height: 27px; display: block;} #menuhome {left: 57px; width: 50px;} #menuhome a:hover {background: transparent url(/images/menu1.png) -57px -27px no-repeat;} #menuhomen {left: 125px; width: 50px;} #menuhomen a:hover {background: transparent url(/images/menu1n.png) -125px -27px no-repeat;} #menusvc {left: 109px; width: 65px;} #menusvc a:hover {background: transparent url(/images/menu1.png) -109px -27px no-repeat;} #menuportfolio {left: 178px; width: 65px;} #menuportfolio a:hover {background: transparent url(/images/menu1.png) -178px -27px no-repeat;} #menuabout {left: 248px; width:65px;} #menuabout a:hover {background: transparent url(/images/menu1.png) -248px -27px no-repeat;} #menuarticles {left: 317px; width: 60px;} #menuarticles a:hover {background: transparent url(/images/menu1.png) -317px -27px no-repeat;} #menutestimonials {left: 381px; width: 82px;} #menutestimonials a:hover {background: transparent url(/images/menu1.png) -381px -27px no-repeat;} #menucontact {left: 467px; width: 63px;} #menucontact a:hover {background: transparent url(/images/menu1.png) -467px -27px no-repeat;} #menustartnow {left: 530px; width: 82px;} #menustartnow a:hover {background: transparent url(/images/menu1.png) -530px -27px no-repeat;} #wpcontent {width:520px; padding:0 0 0 18px; margin:0; font-size:11px; position:relative; float:left} #wpcontent2 {text-align:justify; width:750px; padding:0 0 0 18px; margin:0; font-size:11px; position:relative; float:left} #wpsidebar {width:170px; padding:0 35px 0 0; text-align:left; position:relative; float:right} #wpsidebar2 {width:170px; padding:0 42px 0 0; text-align:left; position:relative; float:right} #sidebar {margin:55px 0 0 0; padding:0; width:180px} .fivethirty {text-align:justify; width:530px; max-width:530px; min-width:530px} .fiveforty {text-align:justify; width:540px; max-width:540px; min-width:540px} #footer {margin:0 auto 20px auto; padding:10px; font-size:9px; width:770px; text-align:left} #ftcopyright {float:left; padding:3px 0; width:550px} #fticons {float:right; padding:0 0 10px 0; width:220px; text-align:right} /* Homepage */ #core {height: 442px; width: 792px; margin: 0px; padding: 0px;} #indeximage {background: url(/images/index2010a.jpg) no-repeat left top; height: 443px; width: 792px; padding: 0px; margin: 0px; float: left;} #indexslideholder {width:555px; height:432px; float:left; position:absolute; top:233px; left:8px; overflow:hidden; margin:0; padding:0} #indexcontent {float: right; height: 400px; width: 204px;} .indexwelcome {font-size:11px; line-height:15px; margin-top:18px; text-align:right; padding:36px 8px 12px 8px} .twelve {font-size:12px} .indexicon {margin:2px 0} #msmmenu {background: url(/images/smmenu.gif) no-repeat left top; height: 200px; width: 146px; overflow: hidden; float:right; margin-right:8px; text-indent:-1999px} #msmmenu a {height: 29px; width:146px; display: block;} #msmweb a:hover {background: transparent url(/images/smmenu.gif) -146px 0px no-repeat} #msmbrand a:hover {background: transparent url(/images/smmenu.gif) -146px -29px no-repeat;} #msmprint a:hover {background: transparent url(/images/smmenu.gif) -146px -58px no-repeat;} #msmpkg a:hover {background: transparent url(/images/smmenu.gif) -146px -87px no-repeat;} #msmill a:hover {background: transparent url(/images/smmenu.gif) -146px -116px no-repeat;} #msmdig a:hover {background: transparent url(/images/smmenu.gif) -146px -145px no-repeat;} #msmcus a:hover {background: transparent url(/images/smmenu.gif) -146px -174px no-repeat;} #sidecta { position:absolute; top:579px; right:7px; width: 215px; z-index:100; height: 85px; } #sidectb {position:relative; top:10px; float:right; width:200px; margin-right:15px;} #sidectb a {display:inline-block; padding-right:8px} #sidectb a.last {padding-right:0px} /* Homepage (loads slide images into cache) */ .pre {position: absolute;overflow: hidden;left: -9999px; top: -9999px;height: 1px;width: 1px;} #pre1 {background-image:url(/feat/1.jpg);} #pre2 {background-image:url(/feat/2.jpg);} #pre3 {background-image:url(/feat/3.jpg);} #pre4 {background-image:url(/feat/4.jpg);} #pre5 {background-image:url(/feat/5.jpg);} /* Info Section Submenu */ #submenuspacer {width:790px; clear:both; border:1px solid #bcbcbc; border-top:0; border-bottom:0; font-size:1px; line-height:1px; padding:3px 0 2px 0; margin:0; background:#FFF} #submenu {width:790px; height:25px; background:#FFF; border:1px solid #bcbcbc; border-left:0; border-right:0; padding:0; font-size:10px; text-align:right} #submenu ul, #submenub ul {list-style:none; margin:5px 25px 10px 0;} #submenu li, #submenub li {display:inline; margin:0px 10px} #submenu li a, #submenub li a {text-transform:uppercase} #submenub {width:790px; height:auto; background:#FFF; border:none; padding:0; font-size:10px; text-align:right;} #submenub p {padding:10px 170px 10px 17px; text-align:left; line-height:1.5em;} /* All Pages Introduction */ #subintro {width:749px; background-color:#FFF; border:1px solid #bcbcbc; border-left:0; border-right:0; padding:10px 25px 15px 16px; font-size:11px; text-align:left; margin:0} #subintro h3, h3 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:14px} /* Index Welcome Panel */ #indexpanel {width:758px; height:100px; background-image:url(/images/banner.jpg); border:0; padding:10px 16px; font-size:11px; text-indent:-5000px; overflow:hidden} #indexpan {width:758px; height:80px; background-image:url(/images/banner2.png); padding:10px 16px; margin-top:5px; display:block; overflow:hidden; /*border:1px solid #eee; border-left:0; border-right:0;*/} #indexpanel h1, #indexpan h1 {font-size:0.5em; color:#F9F7F8; cursor:default; width:1px; height:1px;} #link-web {position:absolute; left:162px; top:176px; width:34px; height:20px; overflow:hidden; color:#F9F7F8} #link-brand {position:absolute; left:208px; top:176px; width:48px; height:20px; overflow:hidden; color:#F9F7F8} #link-print {position:absolute; left:265px; top:176px; width:43px; height:20px; overflow:hidden; color:#F9F7F8} #link-pub {position:absolute; left:316px; top:176px; width:82px; height:20px; overflow:hidden; color:#F9F7F8} #link-product {position:absolute; left:409px; top:176px; width:62px; height:20px; overflow:hidden; color:#F9F7F8} #link-pkg {position:absolute; left:482px; top:176px; width:78px; height:20px; overflow:hidden; color:#F9F7F8} #link-illus {position:absolute; left:570px; top:176px; width:84px; height:20px; overflow:hidden; color:#F9F7F8} #link-coll {position:absolute; left:666px; top:176px; width:74px; height:20px; overflow:hidden; color:#F9F7F8} #link-ux {position:absolute; left:751px; top:176px; width:27px; height:20px; overflow:hidden; color:#F9F7F8} /* Bubble */ .bubbleInfo {position: relative; width: 180px;} .trigger {cursor:default;} .popup {width:180px; position:absolute; margin: 35px 0 0 23px;display: none; z-index: 99; font-size:9px; background:#FFF; border:1px solid #e8e8e8; -moz-border-radius:8px; -webkit-border-radius:8px; padding:10px; overflow:visible; text-align:left } /* Services Section */ .panelleft {width:227px; padding:10px; border:1px solid #e8e8e8; float:left; display:inline; height:150px} .panelright {width:227px; padding:10px; border:1px solid #e8e8e8; float:right; display:inline; height:150px} #panelcompatright {background:url(/images/compat.png) no-repeat 110px 10px} #panelbrandright {background:url(/images/illusicons.png) no-repeat 110px 10px} #panelprintright {background:url(/images/bgprinter.png) no-repeat 110px 10px} #panelpkgright {background:url(/images/bgpkg.png) no-repeat 110px 10px} #panelillusright {background:url(/images/bgillus.png) no-repeat 110px 10px} #paneldigitalleft {background:url(/images/bgflash.png) no-repeat 110px 10px} #paneldigitalright {background:url(/images/bgdigital.png) no-repeat 110px 10px} #panelcalright {background:url(/images/bgcalendar.png) no-repeat 110px 10px} .servicesh10 {position:absolute; bottom:5px; right:0px} .servicesh1 {font-size:18px; text-transform:uppercase; color:#cdcdcd; margin:0; padding:5px 0 0 0; display:inline; float:right; text-align:right; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:245px;} .servicesh1 strong {color:#ccc} #arrowbg {text-align:left; background-image:url(/images/arrowbg.png); background-position:right; background-repeat:no-repeat; text-indent:5px; padding:5px 10px} /* Services Slider Function */ #slider {background:#FFF; padding:10px; border:1px solid #E8E8E8; -moz-border-radius: 8px; -webkit-border-radius: 8px; width:510px; max-width:510px; height:390px;} .scroll {height:390px; width:510px; max-width:510px; overflow:hidden; position:relative; clear:both; background:#FFF;} .scrollContainer {width: 4340px} .scrollContainer div.panel {padding: 0; height: 390px; width: 510px; text-align:left;} ul.navigation {list-style: none;} ul.navigation li {height:50px; padding:0; margin:0} .hide {display: none;} #web {padding-left:1px} /* Rollovers */ .svcsside {text-align:justify; width:183px; margin-top:30px; margin-left:6px} .svcsside h1 {width:173px; height:42px; border:0; color:#F8F8F8} .portfolioside {text-align:justify; width:183px; margin-top:60px; margin-left:6px} .portfolioside h1 {width:173px; height:42px; border:0; color:#F8F8F8} #sro-web h1 {background:url(/images/ico-web.png)} #sro-web:hover h1, #sro-web.selected h1 {background:url(/images/ico-web0.png)} #sro-brand h1 {background:url(/images/ico-brand.png)} #sro-brand:hover h1, #sro-brand.selected h1 {background:url(/images/ico-brand0.png)} #sro-print h1 {background:url(/images/ico-print.png)} #sro-print:hover h1, #sro-print.selected h1 {background:url(/images/ico-print0.png)} #sro-packaging h1 {background:url(/images/ico-packaging.png); width:185px} #sro-packaging:hover h1, #sro-packaging.selected h1 {background:url(/images/ico-packaging0.png)} #sro-illus h1 {background:url(/images/ico-illus.png)} #sro-illus:hover h1, #sro-illus.selected h1 {background:url(/images/ico-illus0.png)} #sro-digital h1 {background:url(/images/ico-digital.png); width:181px} #sro-digital:hover h1, #sro-digital.selected h1 {background:url(/images/ico-digital0.png)} #sro-custom h1 {background:url(/images/ico-custom.png)} #sro-custom:hover h1, #sro-custom.selected h1 {background:url(/images/ico-custom0.png)} .zvcsside h1 {width:173px; height:42px; border:0; color:#fff} #zro-web h1 {background:url(/images/zico-web.png)} #zro-web:hover h1, #zro-web.selected h1 {background:url(/images/zico-web0.png)} #zro-brand h1 {background:url(/images/zico-brand.png)} #zro-brand:hover h1, #zro-brand.selected h1 {background:url(/images/zico-brand0.png)} #zro-print h1 {background:url(/images/zico-print.png)} #zro-print:hover h1, #zro-print.selected h1 {background:url(/images/zico-print0.png)} #zro-packaging h1 {background:url(/images/zico-packaging.png); width:185px} #zro-packaging:hover h1, #zro-packaging.selected h1 {background:url(/images/zico-packaging0.png)} #zro-illus h1 {background:url(/images/zico-illus.png)} #zro-illus:hover h1, #zro-illus.selected h1 {background:url(/images/zico-illus0.png)} #zro-digital h1 {background:url(/images/zico-digital.png); width:181px} #zro-digital:hover h1, #zro-digital.selected h1 {background:url(/images/zico-digital0.png)} #zro-custom h1 {background:url(/images/zico-custom.png)} #zro-custom:hover h1, #zro-custom.selected h1 {background:url(/images/zico-custom0.png)} /* Testimonials */ .tmltitle {color:#65784f; font: 12px "FuturaSTD", Arial, Helvetica, sans-serif; margin-top:5px} .tml {width:165px; padding:3px; margin:0; border:1px solid #e8e8e8; font-size:10px; -moz-border-radius: 8px; -webkit-border-radius: 8px;} .tmlsubmit {width:172px; text-align:center; padding:2px; margin:10px 0 0 0; border:1px solid #65784f; background:#757575; color:#FFF; -moz-border-radius: 6px; -webkit-border-radius: 6px;} .testim {margin:0 0 20px 0; border:0; background:url(/images/openquote.jpg) no-repeat; padding-left:20px} .revcontainer, .revcontmed, .revcontlrg, .revcontxl {float:left; width:130px; height:110px} .revcontmed {height:140px} .revcontlrg {height:180px} .revcontxl {height:200px} .revimg {padding:2px; border:1px solid #bcbcbc} /* Quote Request */ .qtform {width:220px; padding:5px 0 5px 10px; margin:0; border:1px solid #e8e8e8; font-size:10px; -moz-border-radius: 0 0 8px 8px; -webkit-border-radius: 0 0 8px 8px; color:#999 } .qtformW {width:520px; padding:5px 0 5px 10px; margin:0; border:1px solid #e8e8e8; font-size:10px; -moz-border-radius: 0 0 8px 8px; -webkit-border-radius: 0 0 8px 8px; color:#999 } .qtsubmit {width:80px; padding:3px; margin:0; border:1px solid #e8e8e8; background:#FFF; color:#666; -moz-border-radius: 8px; -webkit-border-radius: 8px;} #quoteForm label {} .qtlabel{border:1px solid #e8e8e8;-moz-border-radius: 8px 0 0 0;-webkit-border-radius: 8px 0 0 0;font-weight:bold;background:#ECECEC;padding:5px 0 5px 10px;margin:0;width:220px;border-bottom:0;font-size:9px;} .qtlabelW{border:1px solid #e8e8e8;-moz-border-radius: 8px 0 0 0;-webkit-border-radius: 8px 0 0 0;font-weight:bold;background:#ECECEC;padding:5px 0 5px 10px;margin:0;width:520px;border-bottom:0;font-size:9px;} /* Portfolio Sections */ .folioweb {text-align:justify; width:530px; max-width:530px} .two55 {width:255px} .two50 {width:250px} .folioblock {background:#FFF; padding:10px; border:1px solid #E8E8E8; -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0;} .logoblock {background:#FFF; padding:10px 0; border:1px solid #E8E8E8; -moz-border-radius: 8px; -webkit-border-radius: 8px; text-align:center} .printblock {background:#FFF; padding:10px 0 0 0; border:1px solid #E8E8E8; -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0; position:relative; width:168px} .illblock {background:#FFF; padding:10px 0 0 0; border:1px solid #E8E8E8; -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0; width:253px; text-align:center} .autoheight {height:auto !important} /* * Slider Req */ .container {width:510px; height:500px; overflow:hidden; position:relative; cursor:pointer; } .slides { position:absolute; top:0; left:0; list-style:none; padding:0; margin:0; } .slides li { position:absolute; top:0; width:510px; display:none; padding:0; margin:0; } /* * Slider Optional */ ul.pagination {list-style:none; width:100%; padding-bottom:20px; margin-bottom:10px; margin-top:0px; padding-top:0} ul.pagination li {float:left; display:inline; text-align:left; font-size:9px; padding:0px 1px 5px 1px; margin:0px 25px 5px 0; color:#AAA } ul.pagination li h3 {list-style:none; text-transform:none; border:0; margin:0; padding:0; color:#AAA} ul.pagination li a {color:#AAA; line-height:9px} ul.pagination li.active {font-weight:normal; padding-bottom:10px; margin-bottom:10px; color:#666; background:transparent url(../images/weearrow.jpg) 50% 100% no-repeat;} ul.pagination li.active h3 {font-weight:bold; margin:0; padding:0; color:#666} ul.pagination li.active a {color:#AAA} /* -------------------------- Misc Shared Classes -------------------------- */ .whiteblock {background:#FFF; padding:10px; margin-bottom:20px; border:1px solid #E8E8E8; border-top:1px solid #E8E8E8; -moz-border-radius: 8px;-webkit-border-radius: 8px; position:relative} .content {font-size: 9px; padding: 8px 8px 0 8px;} .dottedline {font-size:0; line-height:0; height:1px; width:100%; border:0; border-top:1px dotted #ffffff; margin:15px 0} .bottomcap {width:792px; margin:0; padding:0; clear:both; line-height:1px; font-size:1px} .clear {clear:both} .clearone {clear:both; font-size:1px; line-height:1px; height:1px; margin:0; padding:0} .fll {float:left} .flr {float:right} .last {margin-right:0} .ml10 {margin-left:10px} .mt35 {margin-top:35px} .mb10 {margin-bottom:10px} .pl10 {padding-left:10px} .pl12 {padding-left:12px} .prL {display:inline; float:left; margin-right:10px; width:170px} .prL1 {display:inline; float:left; width:170px; margin-right:0} .imagereplace {position:absolute; width:1px; height:1px; overflow:hidden; left:-1000px;} .acces {position:absolute; left:-1000px;} .no {visibility:hidden} .preload {visibility:hidden; display:none; width:1px; height:1px;} .one {height:1px;} .h20 {height:20px} .vert15hor0 {margin:15px 0} .twelve {font-size:12px} .f9 {font-size:9px} .nine {font-size:9px; color:#bfbfbf} .just {text-align:justify} .center {text-align:center} .red {color:#C00} .green {color:#65784f} /* Live Form */ .form {font-size:10px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#999; padding:8px; -moz-border-radius:8px; -webkit-border-radius:8px; background-color:#FFF; border:1px solid #e8e8e8} #special {display:none;} #none {display:none;} #url {border:0!important; height:1px!important; width:1px!important; padding:0!important; margin-top:-10px} .message {background-color:#eee; margin-bottom:10px; color:#000; display:none; padding:10px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border:1px solid #e8e8e8}