/*
	Site: Jigsaw Advertising Inc.
	Date: May 2009
	Author: Rob & Larry
	Description: Core CSS File
	Additional CSS Files: 

	WEB COLORS USED FOR THIS SITE
	---------------------------------------------------------------------
	#0089e0		Color		Used for: Bright Blue Titles/Links
	#98bc00		Color		Used for: Jigsaw Green Links
	#000000		Color		Used for: 
	#000000		Color		Used for: 
	#000000		Color		Used for: 
	#000000		Color		Used for: 
	#000000		Color		Used for: 	
	---------------------------------------------------------------------
*/

/* Base style removal, global fixes and browser/platform fixes */

:link, :visited { text-decoration: none }
ul,ol { list-style: none }
h1,h2,h3,h4,h5,h6,pre,code { font-size: 1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,dl,dt,dd,input { margin: 0; padding: 0 }
a img, :link img, :visited img { border: none }
address { font-style: normal }
a, a:link, a:visited, a:hover, a:active { outline: 0; }


/*	Custom styles begin */


body {font-family: Arial, Sans, Sans-Serif;font-size: 11px;color: #666;margin: 0;padding: 0;background-color: #333;}

* {outline: none;}

br.clear {clear: both;}
div.clear {clear: both;}

/* -------------HEADER------------- */

#headerWrapper {height: 34px;background: transparent url(bg-header.png) repeat-x;border-bottom: solid 1px #000;}

#header {height: 34px;margin: 0 auto;padding: 0;width: 961px;background: transparent;}

#header div.jscom {float: left;display: block;width: 170px;padding-left: 10px;height: 34px;text-indent: -9999px;background: transparent url(bg-jscom.png) no-repeat;}

#header a.nav {float: left;display: block;margin: 0;padding: 1px 10px 0 10px;line-height: 32px;font-size: 11px;font-weight: bold;text-transform: uppercase;text-decoration: none;color: #8e845f;border-left: solid 1px #9a8a46;}
#header a.nav b {color: #a97c50;}
#header a.nav:hover {color: white;}
#header a.nav:hover b {color: #B6D438;}


div#headerWrapper {background: transparent url(bg-header.jpg) repeat-x;}
div#headerWrapper div#header {padding-left: 25px;}

.test {
visibility: visible;
display: block;
}
/* LINKS UP STATE */
div#headerWrapper div#header a {float: left; display: inline;line-height: 33px;text-indent:-9999px;}
div#headerWrapper div#header a.home {width: 52px;background: transparent url(nav-home-up.jpg) no-repeat;}
div#headerWrapper div#header a.ourwork {width: 138px;background: transparent url(nav-ourwork-up.jpg) no-repeat;}
div#headerWrapper div#header a.contact {width: 74px;background: transparent url(nav-contact-up.jpg) no-repeat;}
div#headerWrapper div#header a.careers {width: 73px;background: transparent url(nav-careers-up.jpg) no-repeat;}
div#headerWrapper div#header a.news {width: 56px;background: transparent url(nav-news-up.jpg) no-repeat;}
div#headerWrapper div#header a.blog {width: 52px;background: transparent url(nav-blog-up.jpg) no-repeat;}
div#headerWrapper div#header a.town {width: 105px;background: transparent url(nav-town.jpg) no-repeat;}

/* LINKS HOVER & ACTIVE STATE */
div#headerWrapper div#header a.homeActive, div#headerWrapper div#header a.home:hover {width: 52px;background: transparent url(nav-home-over.jpg) no-repeat;}
div#headerWrapper div#header a.ourworkActive,div#headerWrapper div#header a.ourwork:hover {width: 138px;background: transparent url(nav-ourwork-over.jpg) no-repeat;}
div#headerWrapper div#header a.contactActive,div#headerWrapper div#header a.contact:hover {width: 74px;background: transparent url(nav-contact-over.jpg) no-repeat;}
div#headerWrapper div#header a.careersActive,div#headerWrapper div#header a.careers:hover {width: 73px;background: transparent url(nav-careers-over.jpg) no-repeat;}
div#headerWrapper div#header a.newsActive,div#headerWrapper div#header a.news:hover {width: 56px;background: transparent url(nav-news-over.jpg) no-repeat;}
div#headerWrapper div#header a.blogActive,div#headerWrapper div#header a.blog:hover {width: 52px;background: transparent url(nav-blog-over.jpg) no-repeat;}
div#headerWrapper div#header a.townActive,div#headerWrapper div#header a.town:hover {width: 105px;background: transparent url(nav-town-over.jpg) no-repeat;}


/* -------------MAIN CONTENT------------- */

div.content {margin: 0;padding: 0;border-top: dotted 1px #333;background: transparent url(bg-content.png) repeat-x;}
div.lwcontent {margin: 0; background:none; background-color: black; border: none;}


/* -------------HOME PAGE------------- */

div.content div.flashBox {width: 961px;margin: 0 auto;margin-top: 20px;margin-bottom: 10px;background-color: transparent;z-index: 999;color: #CCC;min-height: 450px;text-align: center;}

div.content div.noFlash {width: 961px;margin: 0 auto;padding: 100px 0;background-color: transparent;z-index: 999;color: #CCC;min-height: 450px;text-align: center;border-bottom: solid 1px #666;}
div.content div.noFlash h1 {margin: 100px 0 0 0;font-size: 28px;color: #999;font-weight: normal;}
div.content div.noFlash h1 span {padding: 5px 10px; color: #FFF; background-color: green; border: solid 2px white;}
div.content div.noFlash h1 b {color: #FFF;}
div.content div.noFlash p {margin: 0;padding: 10px 0; font-size: 13px;}
div.content div.noFlash p a {color: #666; text-decoration: none; border-bottom: solid 2px #333;}
div.content div.noFlash p a:hover {color: #CCC; text-decoration: none; border-bottom: solid 2px #999;}


/* -------------INTERNAL PAGES------------- */

div.content .copy {margin: 20px auto; padding: 0 0 25px 0;width: 961px;background: white url(btm-corner.gif) bottom right no-repeat;}
div.content div.lwcopy {margin: 0; padding: 0;background:none; background-color: white;}

/*  SIDENAV   */

div.content .copy .sideNav {float: left;width: 300px;margin: 0;padding: 0 0 0 20px;display: inline;background: white url(bg-copytop.jpg) top left no-repeat; text-transform: uppercase;}
div.content .copy .lwsideNav {padding-top: 15px; background:none;background-color: white;}
div.content .copy .lwsideNav a {display: block; float: left;border: solid 1px white; margin: 0 1px 4px 0}
div.content .copy .lwsideNav a:hover {border: solid 1px #CCC;}

div.content .copy .sideNav a.logo {display: block;margin: 15px 0 10px 0;height: 115px;text-indent: -9999px;background: transparent url(bg-logo.jpg) no-repeat;}
div.content .copy .sideNav .links dt a {display: block;width: 282px;padding: 4px 8px;margin: 0;color: #999;font-size: 17px;text-decoration: none;border-top: dotted 1px #EBEBEB;}
div.content .copy .sideNav .links dt a:hover {color: #666;background-color: #ebebeb;}
div.content .copy .sideNav .links dt a.active {color: black;background-color: #f0f0f0;border-bottom: solid 1px white;}
div.content .copy .sideNav .links dd {margin-bottom: 18px;display: none;visibility: hidden;}
div.content .copy .sideNav .links dd.showme {display: block;visibility: visible;}
div.content .copy .sideNav .links dd a {display: block;padding: 3px 4px 3px 6px;margin: 0;color: #999;font-size: 11px;text-decoration: none;border-top: dotted 1px #EBEBEB;border-left: solid 4px transparent;}
div.content .copy .sideNav .links dd a:hover {color: #666;background: transparent url(bg-sub.jpg) no-repeat right;border-left: solid 4px #EBEBEB;}
div.content .copy .sideNav .links dd a.active {color: #666; font-weight: bold;background: transparent url(bg-subActive.jpg) no-repeat right;border-left: solid 4px #EBEBEB;}


/*  SUBLINKS   */

div.content .copy .sideNav .links .subs {margin-bottom: 10px;}
div.content .copy .sideNav .links .subs a {display: block;width: 274px;padding: 4px 4px 4px 20px;;margin: 0;color: #666;font-size: 11px;text-decoration: none;border-top: dotted 1px #EBEBEB;}
div.content .copy .sideNav .links .subs a:hover {color: #0089e0;background-color: white;}
div.content .copy .sideNav .links .subs a.active {color: black;background-color: #f0f0f0;}

div.content .copy .sideNav ul {margin: 0;padding: 0;}

/* GENERAL PAGE STYLING */

div.content .copy .main {float: left;width: 585px;margin-left: 15px;padding: 20px;display: inline;background-color: white;border-left: dotted 1px #CCC;}
div.content .copy .lwmain {padding: 0 0 0 20px}

div.content .copy .main a {color: #0089e0;text-decoration: none;font-weight: bold;}
div.content .copy .main a:hover {color: #000;}

div.content .copy .main a.newsGallery {display: inline;float: right;margin: 10px 0 10px 20px;border: solid 1px white;}
div.content .copy .main a.newsGallery img {border: none;}
div.content .copy .main a.newsGallery:hover {border: solid 1px #CCC;}
div.content .copy .main a.gallerySample {display: inline;float: left;margin: 8px 0 0 13px;border: solid 1px #CCC;}
div.content .copy .main a.gallerySample img {border: none;}
div.content .copy .main a.gallerySample:hover {border: solid 1px #666;}

div.content .copy .main a.back {float: right;padding: 4px 8px;border: solid 1px #CCC;}
div.content .copy .main p.site {margin: 0 0 10px 10px;padding: 10px;text-align: right;border-bottom: dotted 1px #ccc;}
div.content .copy .main h1 {margin: 10px 0;padding: 0;color: #333;font-size: 36px;font-weight: normal;text-align: right;text-transform: uppercase;}
div.content .copy .main h1.lw {margin: ;padding: 0;}

div.content .copy .main h2.page-header {text-indent:0;margin: 0 0 10px 0;padding: 18px 25px 18px 10px;color: #666;line-height: 21px;font-size: 14px;font-weight: normal;background-color: #F0F0F0;}
div.content .copy .main h2 b {color: #333;}
div.content .copy .main h3 {margin: 0;padding: 10px;padding-bottom: 0;font-size: 13px;color: #0089e0;}
div.content .copy .main h3.galleryHeading {margin: 10px 0 6px 0;line-height: 23px;color: #666;border-bottom: dotted 1px #CCC;clear: both;}
div.content .copy .main h4 {margin: 0 0 10px 0;padding: 10px;padding-bottom: 0;font-size: 12px;color: #333;}
div.content .copy .main p {line-height: 17px;padding: 0 10px;font-size: 1.1em;color: #505050;margin:0 0 10px 0;}
div.content .copy .main p.misc {padding: 0 20px;}

div.content .copy .main blockquote {margin: 0 0 10px 0;padding: 10px;background-color: #f0f0f0;font-style: italic;}
div.content .copy .main .jobLite {margin: 6px 0;padding: 6px 10px;}


div.content .copy .main ul.newspage {list-style: disc;margin: 0 0 10px 28px;font-size: 1.1em;line-height: 17px;}
div.content .copy .main ul.newspage li {margin-bottom: 5px;}

/* -------------CASE STUDY PAGES------------- */

div.content .copy .main dl.focal {width: 585px;height: 205px;padding: 0;margin: 0 0 15px 0;}
div.content .copy .main dl.focal dd.gallery {padding: 174px 0 0 9px;}
div.content .copy .main dl.focal dd.gallery a#openme {background: url(open-gallery.gif) no-repeat;width: 90px;height: 23px;text-indent: -9999px;display: block;}
div.content .copy .main dl.focal dd.gallery a#openme:hover {background: url(open-gallery-hover.gif) no-repeat;}
div.content .copy .main dl.exfo {background: url(exfo-case.jpg) no-repeat;}
div.content .copy .main dl.widex {background: url(widex-case.jpg) no-repeat;}
div.content .copy .main dl.hsc {background: url(hsc-case.jpg) no-repeat;}
div.content .copy .main dl.lifestyle {background: url(lifestyle-case.jpg) no-repeat;}
div.content .copy .main dl.smls {background: url(smls-case.jpg) no-repeat;}
div.content .copy .main dl.pineridge {background: url(pineridge-case.jpg) no-repeat;}
div.content .copy .main dl.dedon {background: url(dedon-case.jpg) no-repeat;}
div.content .copy .main dl.wellspring {background: url(wellspring-case.jpg) no-repeat;}
div.content .copy .main dl.green {background: url(green-case.jpg) no-repeat;}
div.content .copy .main dl.thinkpath {background: url(thinkpath-case.jpg) no-repeat;}
div.content .copy .main dl.sounds {background: url(sounds-case.jpg) no-repeat;}
div.content .copy .main dl.misc {background: url(misc-case.jpg) no-repeat;}

div.content .copy .main h2 {text-indent: -9999px;display: block;padding: 0;margin: 0 0 20px 20px;width: 553px;height: 75px;}
div.content .copy .main h2.exfo {background: url(exfo-leadin.gif) no-repeat;}
div.content .copy .main h2.widex {background: url(widex-leadin.gif) no-repeat;}
div.content .copy .main h2.hsc {background: url(hsc-leadin.gif) no-repeat;height: 102px;}
div.content .copy .main h2.lifestyle {background: url(lifestyle-leadin.gif) no-repeat;}
div.content .copy .main h2.smls {background: url(smls-leadin.gif) no-repeat;height: 102px;}
div.content .copy .main h2.pineridge {background: url(pineridge-leadin.gif) no-repeat;}
div.content .copy .main h2.dedon {background: url(dedon-leadin.gif) no-repeat;}
div.content .copy .main h2.wellspring {background: url(wellspring-leadin.gif) no-repeat;height: 102px;}
div.content .copy .main h2.green {background: url(green-leadin.gif) no-repeat;}
div.content .copy .main h2.thinkpath {background: url(thinkpath-leadin.gif) no-repeat;height: 102px;}
div.content .copy .main h2.sounds {background: url(sounds-leadin.gif) no-repeat;height: 102px;}
div.content .copy .main h2.misc {background: url(misc-leadin.gif) no-repeat;margin-bottom: 7px;}


div.content .copy .main .SlidingPanelsContent a.caselink {background: url(open-case-study.gif) no-repeat;width: 103px;height: 23px;text-indent: -9999px;display: block;margin: 0;padding: 0;}
div.content .copy .main .SlidingPanelsContent a.caselink:hover {background: url(open-case-study-r.gif) no-repeat;}


/* -------------ACCORDION PANELS------------- */

div.content .copy .main .AccordionPanelContent {background-color: #F0F0F0;}

div.content .copy .main .AccordionPanelContent p {padding: 0 5px;margin:10px 0 0 0;font-size: 12px;}
div.content .copy .main .AccordionPanelContent p.title {font-size: 18px;line-height: 24px;}
div.content .copy .main .AccordionPanelContent p.right {text-align: right; font-size: 11px; color: #999;}
div.content .copy .main .AccordionPanelContent p.footNote {padding-top: 8px; border-top: dotted 1px #CCC; font-size: 11px;}

div.content .copy .main .AccordionPanelContent dl {padding: 0px 6px 10px 6px;margin:10px 0 0 0;background-color: white;border: solid 1px #DDD;}
div.content .copy .main .AccordionPanelContent dt {padding: 10px 0;font-size: 12px;font-weight: bold;color: #0089e0;}
div.content .copy .main .AccordionPanelContent dd {margin: 0;padding: 5px 15px 5px 5px;font-size: 12px;color: #666;border-top: dotted 1px #CCC;}


/* -------------NEWSLIST------------- */

div.content .copy .main dl.newsList {float: left;margin: 10px 15px 0 0;width: 285px;display: inline;}
div.content .copy .main dl.newsList dt {margin: 0;padding: 6px 10px 3px 10px;font-size: 12px;font-weight: bold;text-transform: uppercase;border-top: dotted 1px #CCC;border-bottom: dotted 1px #CCC;color: #666;background-color: #ebebeb;}
div.content .copy .main dl.newsList dd {margin: 0;padding: 2px 0;text-transform: normal;border-top: none;border-bottom: dotted 1px #CCC;background-color: white;}
div.content .copy .main dl.newsList dd.slider {padding: 0;}
div.content .copy .main dl.newsList dd.image a {padding: 0px;}
div.content .copy .main dl.newsList dd.image a img {border: none;}
div.content .copy .main dl.newsList dd a.incerpt {display: block;padding: 8px 10px;color: #666;font-weight: normal;}
div.content .copy .main dl.newsList dd a.incerpt:hover {color: #333;background-color: #F0F0F0;}
div.content .copy .main dl.newsList dd a.incerpt div {margin: 4px 0;color: #0089e0; font-weight: bold; text-transform: uppercase;}
div.content .copy .main dl.newsList dd p {font-size: 11px;}
div.content .copy .main dl.newsList dd.slide-switch {padding: 5px 0;line-height: 21px;}
div.content .copy .main dl.newsList dd.slide-switch a {text-indent: -9999px;display: block;float: left;}
div.content .copy .main dl.newsList dd.slide-switch a.up {height: 21px;width: 21px;background: url(up-arrow.gif) no-repeat;margin: 0 1px 0 0;}
div.content .copy .main dl.newsList dd.slide-switch a.up:hover {background: url(up-arrow-hover.gif) no-repeat;}
div.content .copy .main dl.newsList dd.slide-switch a.down {height: 21px;width: 21px;background: url(down-arrow.gif) no-repeat;margin: 0 10px 0 0;}
div.content .copy .main dl.newsList dd.slide-switch a.down:hover {background: url(down-arrow-hover.gif) no-repeat;}

/* -------------ARCHIVE LIST------------- */

div.content .copy .main dl.newsFeature {float: left;margin: 10px 0 0 0;width: 285px;display: inline;}
div.content .copy .main dl.newsFeature dt {margin: 0;padding: 6px 10px 3px 10px;font-size: 12px;font-weight: bold;text-transform: uppercase;border-top: dotted 1px #CCC;border-bottom: dotted 1px #CCC;color: #666;background-color: #ebebeb;}
div.content .copy .main dl.newsFeature dd {margin: 0;padding: 2px 0;text-transform: normal;border-top: none;border-bottom: dotted 1px #CCC;background-color: white;}
div.content .copy .main dl.newsFeature dd b {}
div.content .copy .main dl.newsFeature dd span.arrow {float: left;margin: 0 5px 15px 0;}
div.content .copy .main dl.newsFeature dd.month {padding: 6px 20px;font-size: 12px;font-weight: bold;color: #0089e0;text-align: left;text-transform: uppercase;}
div.content .copy .main dl.newsFeature dd a.incerpt {display: block;padding: 2px 20px;color: #666;font-weight: normal;}
div.content .copy .main dl.newsFeature dd a.incerpt b {color: #0089e0;}
div.content .copy .main dl.newsFeature dd a.incerpt:hover {color: black;background-color: #f0f0f0;}

/* -------------CONTACT PAGE------------- */

#contactForm {float: left;}

#contactDetails {float: right;width: 260px;}

div.main p.p-left {float: left;margin: 0 5px 0 0;width: 214px;padding-right: 0;}
div.main p b.company {font-size: 14px;color: #333;}
div.main p.p-right {float: left;margin: 0;padding: 0;}
div.main p span.light-text {color: #999;}

div.main hr.gray {border: none 0;border-top: 1px dotted #999;height: 1px;margin: 0px 10px 10px 10px;}

div.main form.jigsaw {margin-left: 10px;margin-top: 15px;}

div.main form.jigsaw div#form-left {float: left;margin: 0 5px 0 0;}
div.main form.jigsaw div#form-right {float: left;}

div.main form.jigsaw input.info {width: 233px;margin: 0 0 5px 0;border: 1px solid #ccc;padding: 3px;font-size: 10px;color: #666;}
div.main form.jigsaw select {width: 233px;margin: 0 0 5px 0;border: 1px solid #ccc;padding: 3px;font-size: 10px;color: #666;}
div.main form.jigsaw textarea {width: 233px;height: 100px;font-family: Arial;margin: 0 0 10px 0;border: 1px solid #ccc;padding: 3px;font-size: 10px;color: #666;}


/* -------------FOOTER------------- */

div.footer {margin: 0 auto;padding: 0 0 25px 0;width: 961px;}

div.footer p.blocks {display: inline;background-color: red;}

div.footer p.blocks a {float: left;margin-top: 11px;padding: 2px 7px;font-size: xx-small;text-transform: uppercase; text-decoration: none;color: #666;border-left: dotted 1px #666;}
div.footer p.blocks a sup {font-size: 10px;padding-right: 5px;}
div.footer p.blocks a:hover {color: #999;}

div.footer p.rtext {float: left;width: 300px;margin: 0 20px 0 15px;padding: 6px 0 0 0;display: inline;font-size: xx-small;text-transform: uppercase;}
div.footer p.rtext span {font-size: 13px;}
div.footer p.rtext b {color: #999;}
div.footer p.rtext a {color: #666; text-decoration: none;}
div.footer p.rtext a:hover {color: #CBDD3E;}

div.footer p.ltext {float: left;margin: 17px 17px 0 0;text-align: left;font-size: xx-small;text-transform: uppercase;}

div.footer div.follow {float: right;display: inline;padding-top: 10px;}
div.footer div.follow a.twitter {text-indent: -9999px;display: block;float: right;background: url(twitter-off.gif) no-repeat;width: 65px;height: 15px;margin: 0 15px 0 0;}
div.footer div.follow a.twitter:hover {background: url(twitter.gif) no-repeat;}
div.footer div.follow a.facebook {text-indent: -9999px;display: block;float: right;background: url(facebook-off.gif) no-repeat;width: 75px;height: 15px;margin: 0 7px 0 0;}
div.footer div.follow a.facebook:hover {background: url(facebook.gif) no-repeat;}