@charset "utf-8";
/* CSS Document */

body {background-image:url(../images/bg.jpg); background-repeat:repeat-x; background-color:#003399; margin:0; font-family:Calibri, Arial, Helvetica, sans-serif; background-position:0px 100px;}
body#home {background-image:url(../images/bg.jpg); background-repeat:repeat-x; background-color:#003399; margin:0; font-family:Calibri, Arial, Helvetica, sans-serif; background-position:0px 500px;}
a {outline:none 0; border:none 0;}
.clear {clear:both;height:0;line-height:0;overflow:hidden;}
.floatR {float:right}
.floatL {float:left}
img {border:0 none; }

#top-container {width:100%; background-color:#FFF;}
#top.home {width:1000px; height:400px; margin-left:auto; margin-right:auto; background-image:url(../images/band-cheese.jpg); background-repeat:no-repeat; background-position:400px 35px; padding:20px 0 0 0;}
#top {width:1000px; background-color:#FFF; margin-left:auto; margin-right:auto; padding:20px 0 0 0;}
#top h3 {width:550px; font-family: 'Cabin Sketch', Calibri, Arial, serif; font-size:450%; margin:50px 0 0 0; text-transform:uppercase; line-height:90%; letter-spacing:-3px; color:#333;}
#top p {padding:0 0 0 5px; width:440px; font-size:90%; margin:10px 0 0 0; color:#333;}
#header {width:1000px; height:70px; margin-left:auto; margin-right:auto;}
#header h1 {float:right;text-align:right; width:500px; margin:0 10px 0 0; padding:3px 7px 3px 0; color:#CCC; overflow:hidden; font-size:80%; text-transform:uppercase; font-weight:normal;}
#header h2 {float:left; width:200px; height:70px; background-image:url(../images/logo.jpg); text-indent:-9999px; margin:0;}
#nav, #nav-home {width:650px; height:30px; float:right; list-style-type:none; text-transform:uppercase; color:#666; margin-top:10px;padding:0 17px 0 0;}
#nav li, #nav-home li {float:right; clear: right; margin-right:53px; font-size:80%;}
#nav a.none, #nav-home a.none {cursor:pointer;}
#nav li.end, #nav-home li.end {margin-right:0px;}
#nav li a, #nav-home li a {color:#666; text-decoration:none;}
#nav li a:hover, #nav-home li a:hover {border-bottom:3px solid #0066CC;}
#nav li:hover a, #nav-home li:hover a {border-bottom:3px solid #0066CC;}
#nav li:hover ul li a, #nav-home li:hover ul li a {border-bottom:none;}
#nav li ul {display:none; height:auto; position:absolute; z-index:200; margin:3px 0 0 -10px; padding-top:10px; padding-left:10px; background-image:url(../images/nav-bg.png); border:1px solid #FFF; -moz-border-radius:5px; border-radius:5px; list-style-type:none;}
#nav-home li ul {display:none; height:auto; position:absolute; z-index:200; margin:3px 0 0 -10px; padding:10px 10px 0 10px; background-image:url(../images/nav-bg.png); border:1px solid #FFF; -moz-border-radius:5px; border-radius:5px; list-style-type:none;}
#nav li:hover ul, #nav-home li:hover ul {display:block;}
#nav li li, #nav-home li li {display:block; float:none; padding:5px 0 5px 0; width:auto;}
#nav li ul a, #nav-home li ul a {display:block; font-size:115%; font-style:normal; padding:0; text-align:left; color:#333;}
#nav li ul a:hover, #nav-home li ul a:hover {color:#0066CC; border-bottom:none; padding:0;}
#top-bottom {width:100%; height:40px; background-image:url(../images/white-bg.png); background-position:bottom; background-repeat:repeat-x; margin-bottom:40px;}

ul#products {padding:0; width:1000px; height:150px; margin-left:auto; margin-right:auto; list-style-type:none; margin-bottom:60px;}
ul#products .page {margin-top:40px; margin-bottom:0px;}
ul#products li {width:150px; float:left; color:#00CCFF; display:block;}
ul#products p {margin:0}
ul#products li.fish {margin-right:20px; background-image:url(../images/fish.png); background-repeat:no-repeat; background-position:top; text-align:center; display:block}
ul#products li.fish p a {padding-top:100px; display:block; margin:0}
ul#products li.fish:hover {background-image:url(../images/fish_f2.png)}
ul#products li.tape {margin-right:20px; background-image:url(../images/tape.png); background-repeat:no-repeat; background-position:25px 15px; text-align:center;}
ul#products li.tape p a {padding-top:100px; display:block; margin:0}
ul#products li.tape:hover {background-image:url(../images/tape_f2.png)}
ul#products li.jigsaw {margin-right:20px; background-image:url(../images/jigsaw.png); background-repeat:no-repeat; background-position:center 15px; text-align:center;}
ul#products li.jigsaw p a {padding-top:100px; display:block; margin:0}
ul#products li.jigsaw:hover {background-image:url(../images/jigsaw_f2.png)}
ul#products li.knife {margin-right:20px; background-image:url(../images/knife.png); background-repeat:no-repeat; background-position:top; text-align:center;}
ul#products li.knife p a {padding-top:100px; display:block; margin:0}
ul#products li.knife:hover {background-image:url(../images/knife_f2.png)}
ul#products li.iphone {margin-right:20px; background-image:url(../images/iphone.png); background-repeat:no-repeat; background-position:top; text-align:center;}
ul#products li.iphone p a {padding-top:121px; display:block; margin:0}
ul#products li.iphone:hover {background-image:url(../images/iphone_f2.png)}
ul#products li.palette {margin-right:0px; background-image:url(../images/palette.png); background-repeat:no-repeat; background-position:center 10px; text-align:center;}
ul#products li.palette p a {padding-top:121px; display:block; margin:0}
ul#products li.palette:hover {background-image:url(../images/palette_f2.png)}
ul#products li a {width:150px; font-weight:bold; font-family: 'Calibri', arial, serif; font-size:100%; color:#CCC; text-transform:uppercase; text-decoration:none;}
ul#products li a:hover {color:#80DFFF;}

#slider-container {width:942px; height:330px; margin-left:auto; margin-right:auto; overflow:hidden;}

.quoteslide {padding:20px; width:270px; height:205px; background-color:#EBEBEB; border:1px solid #999; border-radius:5px; -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5); -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5); box-shadow: 0px 0px 2px rgba(0,0,0,0.5); color:#333; font-size:90%; margin-right:-2px;z-index:100;}
.quoteslide-field {float:right; padding-left:5px; padding-bottom:3px; width:181px; height:22px; background-image:url(../images/quoteslide-field-bg.jpg); background-repeat:no-repeat; border:0 none; font-family:Calibri, Arial, Helvetica, sans-serif; font-size:90%; margin-bottom:8px;}
.quoteslide-list {float:right; background-image:url(../images/quoteslide-field-bg.jpg); background-repeat:no-repeat; border:none 0; width:186px; height:26px; padding:2px 0 0 5px; color:#333; font-family:Calibri, Arial, Helvetica, sans-serif; font-size:90%; background-color:#FFF}
.quotesend {margin:5px 122px 0 0; float:right;}
.quoteslide p {margin:10px 0 20px 0;}
.quoteslide span {display:inline-block; float:left; font-size:90%; padding-top:4px; color:#333;}

#content, #content.home {width:1000px; margin:0 auto 0 auto; overflow:auto;}
#content p a {color:#80DFFF; text-decoration:none;}
#content p a:hover {text-decoration:underline;}
#content h2 {font-size:180%; font-family: 'Cabin Sketch', Calibri, Arial, serif; color:#80DFFF; margin:20px 0 20px 0; text-transform:uppercase;}
#content h2.pad {margin-top:50px;}
#content h3 {font-size:120%; color:#80DFFF; font-weight:normal; margin:20px 0 0 0;}
#content h3.company {font-size:150%; color:#FFF; font-weight:normal; margin:0; width:330px}
#content.home h2 {font-size:180%; font-family: 'Cabin Sketch', Calibri, Arial, serif; color:#80DFFF; width:460px; margin:0px 0 20px 0; text-transform:uppercase;}
#content.home h3 {font-size:110%; color:#FFF; font-weight:bold; margin:0;}
#content .colLeft {float:left; width:480px; margin:0 40px 0 0;}
#content .colLeft h2 a, #content .colRight h2 a {color:#FFF; text-decoration:none;}
#content .colLeft h2 a:hover, #content .colRight h2 a:hover {color:#80DFFF;}
#content .colRight {float:left; width:480px; margin:0;}
#content .colLeft p, #content .colRight p, #content p {color:#FFF; font-size:85%; margin:0 0 10px 0;}
#content a.tape {background-color:#000033; padding:3px 5px 3px 5px; color:#FFF; text-decoration:none; display:inline-block; margin:0 0 30px 0;}
#content a.tape:hover {color:#80DFFF;}
.grab {width:235px; height:161px; padding:10px; margin:0 0 20px 0; background-image:url(../images/grab-bg.png); float:right;}
#content p.grab-caption {width:100px; float:right; padding:7px 15px 0 0; font-size:70%; text-align:right; color:#CCC;}
#features.home {width:960px; padding:20px; overflow:auto; background-image:url(../images/blue-trans-bg.png); margin:30px 0 40px 0; -moz-border-radius:5px; border-radius:5px;}
#features.home .colLeft {float:left; width:460px; margin:0 40px 0 0;}
#features.home .colRight {float:left; width:460px; margin:0;}
#features.home h3 {font-size:180%; font-family: 'Cabin Sketch', Calibri, Arial, serif; color:#80DFFF; width:460px; margin:0px 0 20px 0; text-transform:uppercase;}
#features.home h2 {font-size:110%; font-family:Calibri, Arial, Helvetica, sans-serif; color:#FFF; margin:0; text-transform:none;}
#features.home p {margin:0 0 30px 0;}
#content ul {color:#FFF; line-height:110%; font-size:85%; padding:0; margin-left:10px; list-style-type:none;}
#content ul li {padding:0 0 2px 35px; margin-bottom:8px; background-image:url(../images/tick.png); background-repeat:no-repeat; background-position:0 1px;}
#content ul.first li {padding:0 0 2px 25px; background-image:url(../images/bullet.png); background-position:0 3px;}
#content #cta {position:absolute; z-index:99; margin:140px 0 0 745px; width:208px}
#content #cta .getXpress {margin:35px 0 0 0; width:208px; height:57px; background-image:url(../images/gete2express.png); cursor:pointer; display:block}
#content #cta .getXpress a {width:208px; height:57px; display:block}
#content #cta .getXpress:hover {background-position:0 -57px; display:block}
#content #cta .seeBespoke {width:208px; height:57px; background-image:url(../images/see-bespoke.png); cursor:pointer; display:block}
#content #cta .seeBespoke a {width:208px; height:57px; display:block}
#content #cta .seeBespoke:hover {background-position:0 -57px; display:block}
#content .seeExamples {width:208px; height:57px; background-image:url(../images/see-examples.png); cursor:pointer; float:right; margin:0 25px 0 0; display:block}
#content .seeExamples a {width:208px; height:57px; display:block}
#content .seeExamples:hover {background-position:0 -57px; display:block}
#content #cta .mc {margin:15px 0 0 0; width:208px; height:88px; background-image:url(../images/sell-ebay-amazon.png); cursor:pointer; display:block}
#content #cta .mc a {width:208px; height:88px; display:block}
#content #cta .mc:hover {background-position:0 -88px; display:block}
#content #cta p {text-align:center; margin:15px 0 0 0; font-size:110%; color:#80DFFF; text-shadow:1px 2px 2px #000;}
#content #cta p strong {font-size:120%; font-weight:normal;}
#content p.project {font-size:90%; font-style:italic; color:#CCC; width:330px; padding:0 0 20px 0; border-bottom:1px dashed #000033;}
#content p.testimonial {font-style:italic; color:#80DFFF; margin:20px 0 10px 0; width:330px}
#content p.role {font-size:90%; font-style:italic; color:#CCC;}
#content p.skills {font-style:italic; color:#80DFFF; margin:20px 0 10px 0;}
#content p.client {font-weight:bold; margin-bottom:20px; width:330px}
#content p.description {width:330px;}
#content p.description span {font-size:70%}
#content ul.bolt-ons {list-style-type:disc; padding-left:10px}
#content ul.bolt-ons li {background-image:none; padding:0 0 0 10px;}
#content ul.bolt-ons li a {color:#80DFFF; text-decoration:none;}
#content ul.bolt-ons li a:hover {color:#80DFFF; text-decoration:underline;}
.portfolio {float:right; margin:0 0 0 0px; width:600px; height:525px; background-image:url(../images/portfolio-bg.gif); padding:10px;}
.site {margin:40px 0 80px 0; overflow:auto;}
.flow {margin:0 0 50px 50px;}
#content .team {width:220px; float:left; margin:0 40px 30px 0;}
#content .team-end {width:220px; float:left; margin:0;}
#content .team ul, #content .team-end ul, #content .col1 ul, #content .col2 ul, #content .col3 ul {margin-left:0;}
#content .team ul li, #content .team-end ul li {background-image:none; padding:0; line-height:120%;}
#content .team strong, #content .team-end strong {color:#80DFFF; font-weight:normal; display:inline-block; margin-right:5px;}
#content .col1, #content .col2 {float:left; width:300px; margin:0 50px 30px 0; overflow:hidden;}
#content .col3 {float:left; width:300px; margin:0 0 30px 0; overflow:hidden;}
#content .col1 ul li, #content .col2 ul li, #content .col3 ul li {background-image:none; padding:0; line-height:80%;}
#content .col1 ul li.pad, #content .col2 ul li.pad, #content .col3 ul li.pad {margin-top:20px;}
#content .col1 a, #content .col2 a, #content .col3 a {color:#80DFFF; text-decoration:none;}
#content .col1 a:hover, #content .col2 a:hover, #content .col3 a:hover {color:#80DFFF; text-decoration:underline;}
#gete2express, #quoterequest {margin-top:10px;}
#gete2express p, #quoterequest p {margin:0 0 10px 0; color:#FFF;}
#gete2express form, #quoterequest form {margin-top:20px;}
.get-field, .quote-field {float:right; padding-left:5px; padding-bottom:3px; width:181px; height:22px; background-image:url(../images/get-field-bg.gif); background-repeat:no-repeat; border:0 none; font-family:Calibri, Arial, Helvetica, sans-serif; font-size:90%; margin-bottom:3px; color:#7FDFFF}
.quote-list {float:right; background-image:url(../images/get-field-bg.gif); background-repeat:no-repeat; border:none 0; width:186px; height:26px; padding:4px 0 0 5px; color:#7FDFFF; font-family:Calibri, Arial, Helvetica, sans-serif; font-size:90%; background-color:#001C4F} 
.get-area {float:right; padding:5px; width:176px; height:46px; background-image:url(../images/get-area-bg.gif); background-repeat:no-repeat; border:0 none; resize:none; font-family:Calibri, Arial, Helvetica, sans-serif; font-size:90%; resize:none; color:#7FDFFF}
#gete2express span, #quoterequest span {display:inline-block; float:left; font-size:90%; padding-top:4px; color:#FFF;}
#gete2express .send, #quoterequest .send {margin:5px 0 0 113px;}
#content .workCol {width:300px; height:380px; margin-right:50px; margin-bottom:30px; float:left; position:relative;}
#content .workCol.End {margin-right:0px}
#content .workCol a {background-color:#000033; padding:3px 5px 3px 5px; color:#FFF; display:inline-block; text-decoration:none; font-size:85%; position:absolute; bottom:0px;}
#content .workCol a:hover {color:#80DFFF;}
#content .workCol h3 {margin:0 0 10px 0;}


#content.domains {color:#FFF;}
#content.domains a {color: #80dfff;text-decoration:underline;}
#content.domains a:hover {color: #FFF;}
#content.domains ul, #content.domains ol  {margin:0 0 0 0}
#content.domains ul li {list-style:none;background-image: none;}

#content.dpa{color:#FFF;}
#content.dpa a {color: #80dfff;text-decoration:underline;}
#content.dpa a:hover {color: #FFF;}
#content.dpa ul {margin:0 0 0 0}
#content.dpa ul li {list-style:none;background-image: none;}


#footer-top {width:100%; height:40px; background-image:url(../images/footer-bg.png); background-position:bottom; background-repeat:repeat-x;}
#footer-container {width:100%; background-color:#FFF;}
#footer {width:1000px; margin-left:auto; margin-right:auto; background-color:#FFF;}
#footer-right {width:630px; float:right; text-align:right;}
#footer-social {float:right; width:255px; height:37px; margin:25px 0 25px 0;}
#footer-social .icon {float:left; margin-right:20px; border:none;}
#footer-social .icon-end {float:left; border:none; margin-right:0px; padding-top:8px;}
#footer-talk {margin:20px 0 0 0;width:250px;height:291px;float:left;background-image:url(../images/talk.jpg);background-repeat:no-repeat;background-position:top left;}
#footer-talk-grey {margin:20px 0 0 0; width:250px; height:260px; float:left;}
#footer-talk p {font-size:80%; margin:20px 0 0 2px; color:#333;}
#footer-talk form {margin-top:20px;}
.talk-field {float:right; padding-left:5px; padding-bottom:3px; width:181px; height:23px;line-height:23px; background-image:url(../images/talk-field-bg.jpg); background-repeat:no-repeat; border:0 none; font-family:Calibri, Arial, Helvetica, sans-serif; font-size:90%}
.talk-area {float:right; padding:5px; width:176px; height:46px; background-image:url(../images/talk-area-bg.jpg); background-repeat:no-repeat; border:0 none; resize:none; font-family:Calibri, Arial, Helvetica, sans-serif; font-size:90%; resize:none;}
#footer-talk span {display:inline-block; float:left; font-size:90%; margin-left:2px; padding-top:4px; color:#003399;}
#footer-talk .send {margin:5px 0 0 63px;}
.legend {float:right; width:200px; list-style-type:none; margin-bottom:0px; text-align:left}
.legend li {font-size:80%; color:#333;}
.legend li.pad {margin-top:20px;}
.legend li a {color:#003399; text-decoration:none;}
.legend li a:hover {text-decoration:underline;}
#jstwitter {width:300px; float:left; font-family: Calibri, Arial, Helvetica, sans-serif; font-size:80%; color:#333333; padding:10px; overflow:hidden; text-align:left;}
#jstwitter h3 {background-image:url(../images/latest-twitter.gif); background-repeat:no-repeat; text-indent:-9999px; overflow:hidden; width:300px; height:49px; display:block; margin:0 0 5px 0;}
#jstwitter h3 a {display:block; border:none 0}
#jstwitter .tweet {margin:0 auto 15px auto; padding:0 0 10px 0; border-bottom:1px dotted #ccc;}
#jstwitter .tweet a {text-decoration:none; color:#003399;}
#jstwitter .tweet a:hover {text-decoration:underline;}
#jstwitter .tweet .time {font-size:10px; font-style:italic; color:#666666;}
.addthis_toolbox addthis_default_style {float:left;}

#notification {background: none repeat scroll 0 0 #636261;bottom: 0;font-size: 12px;height: 50px;line-height:50px;left: -2px;opacity: 0.9;position: fixed;z-index: 2123456789;text-align: center;width: 100%;}
#cookie-info {color: #FFFFFF;margin: auto;width: 980px;text-align: left;}
#close-btn {width:23px;height:23px;float:right;padding-top:15px;}
#close-btn a {display:block; background-image:url(../images/close_btn.png);width:23px;height:23px;}
#cookie-info a {color:#FFF;text-decoration:underline;}