/* COLORS
/* ---------------------------------------------------------------------------------------------------------- */
/*

orange: #f1592a
orange border: #cc6600
dark brown, text: #403833
light brown: #e3dbd6

*/


/* BASICS */
/* ---------------------------------------------------------------------------------------------------------- */
* {margin: 0; padding: 0}
body {font-family: Lucida Grande, Arial, Sans-Serif; font-size: 12px; color: #403833}

img {display: block}
a img {border: 0}
ul {list-style-type: none}
h1, h2, h3, h4 {font-weight: normal}

a {color: #f1592a; text-decoration: none}
a:hover {text-decoration: underline}

.spacer{height:20px;}
.clear {clear: both}
.left {float: left}
.right {float: right}
.hide {display: none}
.hideme {position:absolute;left:-1000em}

:focus {outline: 0} /* no more dots around links in firefox */

h1#logo {height: 79px; width: 75px; margin: 31px 0 20px 30px; position: relative}
h1#logo span {height: 100%; width: 100%; background: transparent url(../images/logoHome.png) no-repeat; position: absolute;color:#fff !important}
h2, h3 {font-size: 13px}

p {margin: 15px 0 0 0; line-height: 18px}

#top {padding: 50px 0 0 0}
[icon ^="top"] {padding: 0 0 0 10px; background: transparent url(../images/iconPage-top.gif) no-repeat center left}


/* STRUCTURE */
/* ---------------------------------------------------------------------------------------------------------- */
#wrapHeader-outside {height: 181px; width: 100%; background: transparent url(../images/background-header.gif) repeat-x left bottom; overflow: hidden}
#wrapHeader-inside {width: 840px; margin: 0 0 0 50px}
.dots {height: 55px; background: transparent url(../images/dot.gif) repeat-x 0 0}
.dotsMar {height: 55px; margin: 0 250px 0 0; background: transparent url(../images/dot.gif) repeat-x 0 0}


/* NAVIGATION */
/* ---------------------------------------------------------------------------------------------------------- */
ul#navigation {height: 50px; width: 721px; background: transparent url(../images/background-nav-end.gif) no-repeat top right}
ul#navigation li {height: 50px; width: 120px; float: left}
ul#navigation li a {height: 33px; width: 120px; padding: 17px 0 0 0; display: block; text-decoration: none; font-size: 11px; font-weight: bold; color: #403833; text-align: center}
ul#navigation li a {background: transparent url(../images/background-nav.gif) no-repeat 0 0}
ul#navigation li a:hover {color: #f1592a; background: transparent url(../images/background-nav-active.gif) no-repeat 0 -50px}
body#workAct ul#navigation li#work a,
body#servicesAct ul#navigation li#services a,
body#teamAct ul#navigation li#team a,
body#ideasAct ul#navigation li#ideas a,
body#contactAct ul#navigation li#contact a,
body#homeAct ul#navigation li#home a {color: #ff6a00; background: transparent url(../images/background-nav-active.gif) no-repeat 0 -50px}


/* HOME */
/* ---------------------------------------------------------------------------------------------------------- */
#wrapContent-home {width: 840px; margin: 30px 0 0 50px; padding: 0 0 50px 0; overflow: hidden}
#flash {height: 463px; width: 310px; margin: 10px 0 0 0; float: left}
#homeText {width: 500px; margin: 55px 0 0 0; float: right}


/* CONTACT */
/* ---------------------------------------------------------------------------------------------------------- */
#wrapContent-contact {width: 840px; margin: 30px 0 0 50px; padding: 0 0 150px 0; overflow: hidden}
#content-left-home {width: 489px; float: left}
#content-left-home p {margin: 0}
#content-left-home a {color: #403833; text-decoration: underline}
#content-left-home img#logoSmall {margin: 20px 0 10px 0}
#content-left-home span {color: #f1592a}
#content-left-home ul li {padding: 0 25px 10px 0; font-weight: bold; line-height: 18px; float: left}
#content-left-home ul li.nopad {padding: 0 0 10px 0}

#content-right-home {width: 310px; float: right}

#career a {height: 84px; width: 310px; margin: 15px 0 0 0; background: transparent url(../images/career.gif) no-repeat; top left; display: block} /* quick & dirty! */
#career a:hover {background: transparent url(../images/career-hover.gif) no-repeat; top left}
#career a span {display: none}

#wrapChat {height: 80px; width: 310px}

/* E-MAIL FORM */
#wrapForm-msgs {height: 63px}
#wrapForm-msgs a {color: #ffffff}
p#success {padding: 35px 0 0 0; font-size: 12px; font-weight: bold; display: none}
p#success img {margin: -5px 10px 0 0; float: left}
p#bademail {padding: 35px 0 0 0; font-size: 12px; font-weight: bold; display: none}
p#bademail img {margin: -7px 10px 0 0; float: left}
p#badserver {padding: 25px 0 0 0; font-size: 12px; font-weight: bold; display: none}
p#badserver img {margin: 3px 10px 0 0; float: left}


#wrapForm {height: 344px; width: 310px; background: transparent url(../images/background-form.gif) no-repeat 0 0}
#wrapForm p {margin: 0 20px; color: #ffffff}
#wrapForm fieldset {border: none}
#wrapForm label {margin: 13px 0 0 20px; color: #ffffff; display: block}
#wrapForm input#name,
#wrapForm input#email {width: 266px; margin: 3px 0 0 20px; padding: 2px 2px 3px 2px; border-left: 1px solid #ffffff; border-top: 1px solid #ffffff; border-bottom: 1px solid #cc6600; border-right: 1px solid #cc6600}
#wrapForm textarea {height: 75px; width: 270px; margin: 3px 0 0 20px; padding: 3px 0; border-left: 1px solid #ffffff; border-top: 1px solid #ffffff; border-bottom: 1px solid #cc6600; border-right: 1px solid #cc6600}
#submitter {margin: 15px 0 0 18px; display: block}


/* WORK */
/* ---------------------------------------------------------------------------------------------------------- */
#wrapContent-work {width: 840px; margin: 30px 0 0 50px; padding: 0 0 150px 0; overflow: hidden}
#wrapContent-work p.top {margin: -8px 0 0 18px; font-size: 9px; color: #b0a9a5}

ul#work-nav{width:519px; height:40px; padding:0 0 0 12px; margin:0; text-indent:-9999em; display:inline; list-style: none inside none; float:left;}
ul#work-nav li{height:40px; padding:0 21px 0 0; float:left;}
ul#work-nav li a{height:40px; float:left;}

ul#work-nav li#tab1{width:98px;}
ul#work-nav li#tab1 a{width:98px; background: transparent url(../images/tab-interactive.gif) no-repeat 0 0;}
ul#work-nav li#tab1 a:hover{background: transparent url(../images/tab-interactive-hover.gif) no-repeat 0 0;}
ul#work-nav li#tab1 a.selected{background: transparent url(../images/tab-interactive-selected.gif) no-repeat 0 0;}

ul#work-nav li#tab2{width:62px;}
ul#work-nav li#tab2 a{width:62px; background: transparent url(../images/tab-print.gif) no-repeat 0 0;}
ul#work-nav li#tab2 a:hover{background: transparent url(../images/tab-print-hover.gif) no-repeat 0 0;}
ul#work-nav li#tab2 a.selected{background: transparent url(../images/tab-print-selected.gif) no-repeat 0 0;}

ul#work-nav li#tab3{width:85px;}
ul#work-nav li#tab3 a{width:85px; background: transparent url(../images/tab-outdoor.gif) no-repeat 0 0;}
ul#work-nav li#tab3 a:hover{background: transparent url(../images/tab-outdoor-hover.gif) no-repeat 0 0;}
ul#work-nav li#tab3 a.selected{background: transparent url(../images/tab-outdoor-selected.gif) no-repeat 0 0;}

ul#work-nav li#tab4{width:98px;}
ul#work-nav li#tab4 a{width:98px; background: transparent url(../images/tab-collateral.gif) no-repeat 0 0;}
ul#work-nav li#tab4 a:hover{background: transparent url(../images/tab-collateral-hover.gif) no-repeat 0 0;}
ul#work-nav li#tab4 a.selected{background: transparent url(../images/tab-collateral-selected.gif) no-repeat 0 0;}

ul#work-nav li#tab5{width:91px; padding:0;}
ul#work-nav li#tab5 a{width:91px; background: transparent url(../images/tab-tv.gif) no-repeat 0 0; padding:0;}
ul#work-nav li#tab5 a:hover{background: transparent url(../images/tab-tv-hover.gif) no-repeat 0 0;}
ul#work-nav li#tab5 a.selected{background: transparent url(../images/tab-tv-selected.gif) no-repeat 0 0;}

ul#subNavigation {width: 520px; margin: 7px 0 0 0; float: left}
ul#subNavigation li {padding: 0 20px; background: transparent url(../images/dots-footer.gif) no-repeat center left; float: left}
ul#subNavigation li.nodiv {padding: 0 20px 0 0; background: none}
ul#subNavigation li a {font-size: 11px; text-decoration: none}
ul#subNavigation li a:hover {text-decoration: underline}
ul#subNavigation li.selected a {color: #403833; text-decoration: underline}
#large {margin: 0; font-size: 11px; float: right}

.interactiveBackground {width: 840px; margin: 0 0 15px 0; padding: 18px; background: #ffffff url(../images/backgroundWork.gif) repeat top left; clear: both; overflow: hidden} 
.interactiveBackground a {font-size: 11px}
.interactiveBackground img.screens {margin: 12px 0 0 0}
.text {width: 252px; margin: 0 19px 0 0; float: left}
.textVideo {width: 335px; margin: 0 15px 0 0; float: left}
.text p {margin: 8px 0 0 0; font-size: 11px; line-height: 16px}
.image {width: 528px; float: left}
.image .marA {height: 154px; width: 154px; margin: 0 12px 0 0; padding: 7px; background: transparent url(../images/backgroundWork-168.gif) no-repeat 0 0; float: left}
.image .marB {height: 154px; width: 154px; padding: 7px; background: transparent url(../images/backgroundWork-168.gif) no-repeat 0 0; float: left}
.image .marC {height: 154px; width: 154px; margin: 17px 12px 0 0; padding: 7px; background: transparent url(../images/backgroundWork-168.gif) no-repeat 0 0; float: left}
.image .marD {height: 154px; width: 154px; margin: 17px 0 0 0; padding: 7px; background: transparent url(../images/backgroundWork-168.gif) no-repeat 0 0; float: left}
.interactiveBackground ol {margin: 0 0 0 18px; font-size: 11px; list-style-position: outside; line-height: 16px}
.interactiveBackground ol li {padding: 5px 0 0 0}

[icon ^="mag"] {padding: 0 0 0 18px; background: transparent url(../images/iconLarger-image.gif) no-repeat center left}

#wrapperVideo {width: 450px; height: 350px; background: #000000; float: left}
#wrapper {margin: 25px auto 0 auto; width: 400px; height: 300px}

ul.videos {width: 330px; margin: 0 0 10px 0; overflow: hidden}
ul.videos li {float: left}
.videoThumbs {height: 65px; width: 65px; margin: 8px 5px 8px 0; padding: 4px; border: 1px solid #b0a9a5; background: #ffffff}
.videoThumbs-firstmar {height: 65px; width: 65px; margin: 8px 5px 8px 8px; padding: 4px; border: 1px solid #b0a9a5; background: #ffffff}
.videoThumbs-nomar {height: 65px; width: 65px; margin: 8px 0; padding: 4px; border: 1px solid #b0a9a5; background: #ffffff}

ul#menu li a.linkTitle {width: 322px; margin: 0 0 1px 0; padding: 8px 0 8px 8px; background: #e3dbd6; font-size: 12px; display: block}
ul#menu li a.linkTitle:hover {background: #b0a9a5; text-decoration: none; color: #403833}


/* SERVICES, IDEAS, TEAM */
/* ---------------------------------------------------------------------------------------------------------- */
#wrapContent {width: 840px; margin: 30px 0 0 50px; padding: 0 0 150px 0; overflow: hidden}
#wrapContent p {margin: 15px 250px 0 0}
#wrapContent p.top {margin: 0; font-size: 13px}
#wrapContent p.bot {margin: 15px 250px 50px 0}
#wrapContent h2.ideas {margin: 0 250px 0 0}

#wrapContent img.fruit {margin: 5px 0 0 0; float: right}
#wrapContent img.bulb {margin: 5px 0 0 40px; float: right}
ul#servicesA {width: 185px; margin: 20px 0 50px 0; float: left}
ul#servicesB {width: 185px; margin: 20px 45px 50px 0; float: left}
ul#servicesC {width: 175px; margin: 20px 0 50px 0; float: left}
ul#servicesA li,
ul#servicesB li,
ul#servicesC li {padding: 3px 0}
ul#servicesA li.servTitle,
ul#servicesB li.servTitle,
ul#servicesC li.servTitle {margin: 0 0 3px 0; font-weight: bold; list-style-type: none; text-decoration: underline}

#wrapContent dl {margin: 0 250px 30px 0}
#wrapContent dt {margin: 4px 0 0 0; float: left}
#wrapContent dd {margin: 0 0 0 35px; line-height: 18px}
#wrapContent dd strong {font-size: 13px; color: #f1592a}


/* FOOTER */
/* ---------------------------------------------------------------------------------------------------------- */
#wrapFooter-outside {height: 130px; width: 100%; padding: 20px 0 0 0; background: transparent url(../images/background-footer.gif) repeat-x top left; clear: both}
#wrapFooter-outside ul {width: 870px; margin: 0 0 0 50px; font-weight: bold}
#wrapFooter-outside ul li {padding: 0 15px; background: transparent url(../images/dots-footer.gif) no-repeat center right; float: left; display: inline; font-size: 11px}
#wrapFooter-outside ul li.nodiv {padding: 0 0 0 15px; background: none}
#wrapFooter-outside ul li.nopad {padding: 0 15px 0 0}
.footerAddress{float:left;margin:0 10px 0 50px;position:relative;}
.footerAddress a{margin-left:10px;margin-right:10px}
#wrapFooter-outside .facebookImage{position:absolute;left:435px;top:0}
#wrapFooter-outside .fb-like{float:left;margin: 0 10px 0 40px}
.copyright{float:right;margin:0 10px}