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

* { margin: 0px; padding: 0px; }
.clearer { clear: both; }
body { border-top: solid 4px #CC0000; }

/* text */
p, li, h1, h2, h3 { font-family: Georgia, "Times New Roman", Times, serif; }
.dark-grey-txt { color: #4B4040; }
.dark-grey-txt2 { color: #CC0000; font-size: 120%; }
.light-grey-txt { color: #8A7575; font-size: 70%; }
.blue-txt { color: #1C73F1; font-size: 12px; }
.imgfloat {float: left; }
.red-text { color: #CC0000; }
.error { color: #CC0000; }

h1 { font-weight: normal; }


/* framework */
#frame { width: 960px; margin: 0px auto 30px auto; }

#frame-top { height: 170px; }
#frame-top ul { margin-top: 45px; padding: 0px 0px 0px 0px; float: right; border-right: solid 1px #AEAEAE; }
#frame-top li { list-style: none; color: #8A7575; font-size: 120%; line-height: 140%; padding: 0px 40px; }
#frame-top a { color: #8A7575; text-decoration: none; }
#frame-top a:hover { color: #CC0000; text-decoration: underline; }
#frame-top .nav { width: 680px; float: right; }
#frame-top .red { color: #CC0000; }


#frame-top h1 { float: right; padding-top: 35px; color: #8A7575; }

#frame-intro { width: 850px; margin: 0px 0px 0px auto; border-top: 1px solid #AEAEAE; border-bottom: 1px solid #AEAEAE; padding: 20px 5px; }
#frame-intro h1 { color: #8A7575; line-height: 130%; }

#frame-index-case1 { border-bottom: 1px solid #AEAEAE; padding: 20px 0px; width: 860px; margin: 0px 0px 0px auto; }
#frame-index-case1 p { color: #8A7575; padding-bottom: 10px; line-height: 150%; }
#frame-index-case1 h2 { color: #4B4040; font-size: 130%; padding: 20px 0px 10px 0px; font-weight: normal; }
#frame-index-case1 a { color: #CC0000; text-decoration: underline; }
#frame-index-case1 a:hover { color: #3366FF; text-decoration: underline; }

#frame-footer { padding-top: 20px; text-align: right; }
#frame-footer p { color: #8A7575; }

#frame-single-col { padding: 20px 0px 0px 0px; width: 860px; margin: 0px 0px 0px auto; border-bottom: 20px solid #FFFFFF; border-top: 1px solid #AEAEAE; }
#frame-single-col p { color: #8A7575; padding-bottom: 10px; line-height: 150%; }
#frame-single-col ul { float: left; width: 270px; }
#frame-single-col li { list-style: none; padding-bottom: 10px; }

#frame-single-col a { color: #CC0000; text-decoration: underline; }
#frame-single-col a:hover { color: #3366FF; text-decoration: underline; }

#frame-about { padding: 20px 0px 20px 0px; width: 860px; margin: 0px 0px 0px auto; border-bottom: 20px solid #FFFFFF;  border-bottom: 1px solid #AEAEAE; }
#frame-about p { color: #8A7575; padding-bottom: 10px; line-height: 150%; }
#frame-about ul { float: left; width: 270px; }
#frame-about li { list-style: none; padding-bottom: 10px; }
#frame-about a { color: #CC0000; text-decoration: underline; }
#frame-about a:hover { color: #3366FF; text-decoration: underline; }
#frame-about h3 { color: #8A7575; padding: 20px 0px 10px 0px; line-height: 150%; }

#frame-team { padding: 30px 0px 20px 0px; width: 860px; margin: 0px 0px 0px auto; border-bottom: 20px solid #FFFFFF;  border-bottom: 1px solid #AEAEAE; }
#frame-team p { color: #8A7575; padding-bottom: 10px; line-height: 150%; }
#frame-team ul { float: left; width: 270px; }
#frame-team li { list-style: none; padding-bottom: 10px; }
#frame-team a { color: #CC0000; text-decoration: underline; }
#frame-team a:hover { color: #3366FF; text-decoration: underline; }
#frame-team .team-divider { margin: 10px 0px 20px 0px; border-bottom: 1px solid #AEAEAE; }
#frame-team h2 { color: #4B4040; margin-bottom: 20px; font-weight: normal; }


#frame-contact { padding: 20px 0px; width: 860px; margin: 0px 0px 0px auto; border-bottom: 1px solid #AEAEAE; }
#frame-contact p, td { color: #8A7575; padding-bottom: 10px; line-height: 150%;} 
#frame-contact a { color: #CC0000; text-decoration: underline; }
#frame-contact a:hover { color: #1C73F1; text-decoration: underline; }
#frame-contact .red-text { color: #CC0000; font-weight: bold; }

.contact-left { width: 356px; float: left; margin-right: 20px; }

.contact-right { width: 460px; float: left; }
.contact-right .divider{ margin: 10px 0px 20px 0px; border-bottom: 1px solid #AEAEAE; }
.contact-right h2 { color: #4B4040; font-size: 120%; margin-bottom: 5px; font-weight: normal; }

#frame-client { border-bottom: 1px solid #AEAEAE;  border-top: 1px solid #AEAEAE; width: 860px; padding: 10px 0px; margin: 0px 0px 0px auto; }
#frame-client li { list-style: none; float: left; padding: 10px 0px; }

#frame-client-left { float: left; width: 460px; padding: 0px 30px 0px 0px; }
#frame-client-left h1 { color: #4B4040; padding-bottom: 20px; margin-top: 10px; }
#frame-client-left a { color: #CC0000; text-decoration: underline; }
#frame-client-left a:hover { color: #1C73F1; text-decoration: underline; }
#frame-client-left ul { width: 420px; }
#frame-client-left li { list-style: none; color: #8A7575; padding-bottom: 10px; line-height: 120%; }
#frame-client-left h2 { color: #4B4040; padding: 20px 0px 10px 0px; font-size: 110%; }

#frame-client-right { float: left; width: 360px; padding-top: 10px; }
#frame-client-right ul { margin: 0px auto 0px auto; }
#frame-client-right li { float: left; padding-right: 10px; list-style: none; }

#frame-client-sub { border-bottom: 1px solid #AEAEAE; border-top: 1px solid #AEAEAE; width: 860px; padding: 20px 0px; margin: 0px 0px 0px auto; }
#frame-client-sub li { list-style: none; float: left; }

.li-pad { padding-right: 10px; }

/* case study main */
#case-skin-deep { background: url(../images/case-skin-deep.jpg) no-repeat; height: 188px; padding: 50px 200px 20px 20px; }
#case-skin-deep h1 { text-align: right; color: #A35C91; margin-bottom: 10px; }
#case-skin-deep p { text-align: right; color: #77747A; padding-left: 20px; line-height: 150%; }
#case-skin-deep a { color: #A35C91; }
#case-skin-deep a:hover { color: #CC0000; }

/* case study sub */
#frame-index-case2 { border-bottom: 1px solid #AEAEAE; padding-bottom: 20px; width: 860px; margin: 0px 0px 0px auto; }

#case-pedal-revolution { float: left; width: 420px; height: 278px; background: url(../images/case-pedal-revolution.jpg) no-repeat; }
#case-pedal-revolution h1 { color: #D6E5FC; padding: 40px 20px 0px 180px; margin-bottom: 10px; }
#case-pedal-revolution p { padding: 0px 20px 30px 180px; color: #325EA2; line-height: 150%; }
#case-pedal-revolution a { color: #CC0000; text-decoration: underline; }
#case-pedal-revolution a:hover { color: #FF6600; }

#case-maw-comms { float: left; width: 420px; height: 278px; margin-left: 20px; background: url(../images/case-maw-comms.jpg) no-repeat; }
#case-maw-comms h1 { padding: 40px 180px 10px 20px; color: #65747D; }
#case-maw-comms p { padding: 0px 200px 30px 20px; color: #65747D; line-height: 150%; }
#case-maw-comms a { color: #337499; text-decoration: underline; }
#case-maw-comms a:hover { color: #CC0000; text-decoration: underline; }

/* case study subs */
#frame-index-case3 { border-bottom: 1px solid #AEAEAE; padding: 20px 0px; width: 860px; margin: 0px 0px 0px auto; }
#frame-index-case3 h1 { color: #4B4040; font-size: 130%; padding: 20px 0px 10px 0px; }
#frame-index-case3 p { color: #8A7575; line-height: 150%; }
#frame-index-case3 a { color: #CC0000; text-decoration: underline; }
#frame-index-case3 a:hover { color: #1C73F1; text-decoration: underline; }

.small-study { float: left; width: 200px; margin-left: 20px; }
.small-study-end { float: left; width: 200px; }

ul#menu, ul#menu ul { list-style-type: none; margin: 0px; padding: 0px; }
ul#menu a { display: block; text-decoration: underline; }
ul#menu li { margin-top: 1px;list-style: none; color: #8A7575; }
ul#menu, ul#menu ul, li .tech-expand { width: 820px; }

#menu .bold-header { font-size: 110%; color: #336699; font-weight: bold; padding-top: 5px; }

/* buttons */
.but-logo a { display: block; width: 220px; height: 170px; background: url("../images/logo-red-card.jpg") 0 0 no-repeat; float: left; }
.but-news a { display: block; width: 180px; height: 34px; background: url(../images/but-latest-news.gif) 0 0 no-repeat; float: right; }
.but-news a:hover { background-position: -180px 0; }

/* client buttons */

.but-client-skin-deep a { display: block; width: 200px; height: 140px; background: url(../images/client-skin-deep.gif) 0 0 no-repeat; margin-right: 20px; }
.but-client-skin-deep a:hover { background-position: -200px 0; }

.but-client-letterbox-flowers a { display: block; width: 200px; height: 140px; background: url(../images/client-letterbox-flowers.gif) 0 0 no-repeat; margin-right: 20px; }
.but-client-letterbox-flowers a:hover { background-position: -200px 0; }

.but-client-sunflex a { display: block; width: 200px; height: 140px; background: url(../images/client-sunflex.gif) 0 0 no-repeat; margin-right: 20px; }
.but-client-sunflex a:hover { background-position: -200px 0; }

.but-client-henman-green a { display: block; width: 200px; height: 140px; background: url(../images/client-henman-green.gif) 0 0 no-repeat; margin-right: 20px; }
.but-client-henman-green a:hover { background-position: -200px 0; }

.but-client-idsystems a { display: block; width: 200px; height: 140px; background: url(../images/client-idsystems.gif) 0 0 no-repeat; margin-right: 20px; }
.but-client-idsystems a:hover { background-position: -200px 0; }

.but-client-maw-comms a { display: block; width: 200px; height: 140px; background: url(../images/client-maw-comms.gif) 0 0 no-repeat; margin-right: 20px; }
.but-client-maw-comms a:hover { background-position: -200px 0; }

.but-client-pedal-revolution a { display: block; width: 200px; height: 140px; background: url(../images/client-pedal-revolution.gif) 0 0 no-repeat; margin-right: 20px; }
.but-client-pedal-revolution a:hover { background-position: -200px 0; }

.but-client-eat17 a { display: block; width: 200px; height: 140px; background: url(../images/client-eat17.gif) 0 0 no-repeat; margin-right: 20px; }
.but-client-eat17 a:hover { background-position: -200px 0; }

.but-client-brasteds a { display: block; width: 200px; height: 140px; background: url(../images/client-brasteds.gif) 0 0 no-repeat; margin-right: 20px; }
.but-client-brasteds a:hover { background-position: -200px 0; }

.but-client-clapham-collinge a { display: block; width: 200px; height: 140px; background: url(../images/client-clapham-collinge.gif) 0 0 no-repeat; }
.but-client-clapham-collinge a:hover { background-position: -200px 0; }

.but-client-carrellos a { display: block; width: 200px; height: 140px; background: url(../images/client-carrellos.gif) 0 0 no-repeat;  }
.but-client-carrellos a:hover { background-position: -200px 0; }

.but-client-barhead a { display: block; width: 200px; height: 140px; background: url(../images/client-barhead.gif) 0 0 no-repeat; margin-right: 20px; }
.but-client-barhead a:hover { background-position: -200px 0; }

.but-client-your-gaming a { display: block; width: 200px; height: 140px; background: url(../images/client-your-gaming.gif) 0 0 no-repeat; margin-right: 20px; }
.but-client-your-gaming a:hover { background-position: -200px 0; }

.but-client-naked-wines a { display: block; width: 200px; height: 140px; background: url(../images/client-naked-wines.gif) 0 0 no-repeat; }
.but-client-naked-wines a:hover { background-position: -200px 0; }

.but-client-proton a { display: block; width: 200px; height: 140px; background: url(../images/client-proton.gif) 0 0 no-repeat; margin-right: 20px; }
.but-client-proton a:hover { background-position: -200px 0; }















.but-number-1 a { display: block; width: 20px; height: 20px; background: url(../images/but-number-1.gif) 0 0 no-repeat; }
.but-number-1 a:hover { background-position: -20px 0; }

.but-number-1-selected a { display: block; width: 20px; height: 20px; background: url(../images/but-number-1.gif) -40px 0 no-repeat; }

.but-number-2 a { display: block; width: 20px; height: 20px; background: url(../images/but-number-2.gif) 0 0 no-repeat; }
.but-number-2 a:hover { background-position: -20px 0; }

.but-number-3 a { display: block; width: 20px; height: 20px; background: url(../images/but-number-3.gif) 0 0 no-repeat; }
.but-number-3 a:hover { background-position: -20px 0; }

.but-number-4 a { display: block; width: 20px; height: 20px; background: url(../images/but-number-4.gif) 0 0 no-repeat; }
.but-number-4 a:hover { background-position: -20px 0; }

.but-number-5 a { display: block; width: 20px; height: 20px; background: url(../images/but-number-5.gif) 0 0 no-repeat; }
.but-number-5 a:hover { background-position: -20px 0; }

.but-number-6 a { display: block; width: 20px; height: 20px; background: url(../images/but-number-6.gif) 0 0 no-repeat; }
.but-number-6 a:hover { background-position: -20px 0; }