﻿/* upgraded broswer reset this is used in place of * */
body, div, h1, h2, h3, h4, h5, h6, p, a img, pre, blockquote, form, ul, ol, dl {
 margin: 0;
 padding: 0;
 border: 0;
}

li:before {
   content: "" !important;
}

/******************
Typography       */

body {
 background: #1e1e1e;
 font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
 font-size: 62%;
 color: #373737;
}

h1 {
 margin: 0 0 20px 0;
 font-size: 2em;
 font-weight: normal;
}

h1.smallWidth {
 float: left;
 width: 200px;
}

h2 {
 color: #be0808;
 font-size: 1.5em;
 font-weight: bold;
 margin: 0 0 10px;
}

h2 a {
 color: #be0808;
}

#sidebar h2 a {
 display: block;
 width: 100%;
 height: 100%;
}

h1 span, h2 span {
 display: none;
}

h3 {
 font-size: 1.4em;
 color: #BA0001;
 margin: 12px 0 5px;
}

h4 {
 font-size: 1.2em;
 margin: 0 0 7px;
}

dl {
 margin: 0;
 padding: 0;
 font-size: 1.4em;
 padding-bottom: 20px;
}

dt {
 margin: 0;
 padding: 0;
}

dd {
 margin: 0;
 padding: 0;
}

#content p {
 font-size: 1.4em;
 line-height: 1.6em;
 margin: 0 0 1.0em;
}

#content p.BackToContentLink {float: right;}
#content p.BackToContentLink a {display: block;}

#content blockquote{
 text-align:center;
 margin:30px 0 40px;
 padding-left:85px;
 color:#888;
 background:url(../Images/quote-open.gif) no-repeat left top;
}

#content blockquote p{
 padding-right:85px;
 background:url(../Images/quote-close.gif) no-repeat right bottom;
 font-size:1.2em;
 color:#666;
}

a { text-decoration: none; color: #8A0808;}
.morelink { color: #FBBC39; float: right;}
.morelink a, div#footer p a { color: #FBBC39;}
p a:hover, li a:hover, dd a:hover { text-decoration: underline;}

#content ul {
 font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
 font-size: 1.4em;
 list-style-image: none;
 list-style-position: outside;
 list-style-type: none;
 margin: 0 0 1em;
}

#content ul li {
 background: transparent url(../Images/li.gif) no-repeat 11px 7px;
 margin: 0 0 5px;
 padding: 0 10px 0 32px;
}

#content ul li.NoBullets {
 background: transparent url() no-repeat 11px 7px;
}

fieldset {
 border: 0;
}

#content ul.smallul {
 color: #010101;
}

#content ul.smallul li {
 background: transparent url(../Images/li.gif) no-repeat 2px 7px;
 margin: 0 0 5px;
 padding: 0 0 0 13px;
}

.productions-link {
 color:#FFFFFF;
 font-size:11px;
 font-weight:bold;
 position:absolute;
 right:12px;
 top:64px;
}


/* ----------------- 

    This section contains all the styles for H1 tags which are main page titles, also included are the strap lines which
    are designated by [ 1A - 3D ]

    1. FelineSoft
    2. FelineSoft Services
    3. ?
    4. ?
    5. ?

    -------------------------

    1A. Time and Money. We Save You Both
    2B. How we can help your business, in plain english
    3C. ?
    4D. ?
    5D. ?

-------------------- */


#felineSoftHome {
 background: url(  '../Images/h1/felineSoftHome.gif' ) no-repeat;
 width: 100px;
 height: 21px;
}

#timeAndMoney {
 background: url(  '../Images/h2/timeAndMoney.gif' ) no-repeat;
 width: 346px;
 height: 21px;
}

#felineSoftService {
 background: url(  '../Images/h1/felineSoftHome.gif' ) no-repeat;
 width: 100px;
 height: 21px;
}

#howWeCanHelp {
 background: url(  '../Images/h2/timeAndMoney.gif' ) no-repeat;
 width: 346px;
 height: 21px;
}

#HowWeWork {
 background: url(  '../Images/h2/HowWeWork.gif' ) no-repeat;
 width: 118px;
 height: 17px;
 background-color: Purple;
}

.phoneFelinesoft {
 margin-top: 20px;
 background: #000;
 color: #FABC3D;
 margin: 30px 0 0;
 padding: 0;
}

.felineTelephoneNumberText {
 float: left;
 margin-top: 5px;
 margin-left: 5px;
}

.felineTelephoneTxtBox {
 border-left: 2px solid #FABC3D;
 border-bottom: 1px solid #ccc;
 border-top: 1px solid #ccc;
 width: 152px;
 padding-left: 3px;
 padding-top: 2px;
 padding-bottom: 2px;
 height: 20px;
 float: right;
}


/* ----------------- 

    END OF LINE

-------------------- */


#h1Services {
 width: 192px;
 height: 20px;
 background: url(  '../Images/h1/h1Services.gif' ) no-repeat;
}

#h2Services {
 width: 414px;
 height: 21px;
 background: url(  '../Images/h2/h2Services.gif' ) no-repeat;
}






/***************
Layout        */

#loading{
 position:fixed;
 height:100%;
 width:100%;
 background:url(../Images/loading-bg.png);
 z-index:99999;
 display:none;
}

#loading img{position:absolute;top:50%;left:46%;}

#mastheadwrapper {
 width: 100%;
 background: url(  '../Images/masthead-bg.jpg' ) repeat-x;
}

#masthead {
 width: 960px;
 margin: 0 auto;
 padding: 0px 0 0 0;
 z-index: 100;
 position: relative;
}

.fsLogo {
 display: block;
 float: left;
 margin: 25px 0 14px 13px;
}

.microsoftSageLogos {
 float: right;
 margin: 0 11px 0 0;
 display: inline;
}

#navigation {
 width: 957px;
 height: 43px;
 padding: 1px 0 0 1px;
 border: 1px solid #b1770b;
 border-bottom: 0;
 background: url(  '../Images/nav-bg.jpg' ) repeat-x;
 clear: left;
 list-style: none;
 overflow: visible;
}

#navigation li {
 position: relative;
 float: left;
 display: block;
 height: 43px;
 background-repeat: no-repeat;
 background-position: bottom left;
 overflow: visible;
 z-index: 9999;
}

#navigation a {
 display: block;
 height: 43px;
}

.navHome {
 width: 80px;
 background: url(  '../Images/navHome.gif' );
}
.navCompany {
 width: 105px;
 background: url(  '../Images/navCompany.gif' );
}
.navServices {
 width: 215px;
 height: 43px;
 background: url(  '../Images/navSoftware.gif' );
}
.navProducts {
 width: 100px;
 background: url(  '../Images/navProducts.gif' );
}

.navDigital {
 width: 166px;
 background: url(  '../Images/navDigital.gif' );
}

.navClients {
 width: 109px;
 background: url(  '../Images/navOurWork.gif' );
}
.navContactUs {
 width: 115px;
 background: url(  '../Images/navContactUs.gif' );
}
.navAboutUs {
 width: 115px;
 background: url(  '../Images/navAboutUs.gif' );
}

#navigation li:hover, #navigation li.sfhover {
 background-position: top left;
}
#navigation a span {
 display: none;
}

#navigation li.headlink ul {
 position: absolute;
 top: 43px;
 z-index: 10000;
 background: #545454 url(  '../Images/dropdown-bg.gif' ) no-repeat;
 border: 1px solid #3f3f3f;
 border-top: 0;
 width: 292px;
 padding: 13px 10px;
 font-size: 1.3em;
 line-height: 1;
 display: none;
}

#navigation li.sfhover ul {
 display: block;
}
#navigation li.headlink ul li {
 height: auto;
}

#navigation li.headlink ul li a {
 height: 15px;
 color: #fff;
 padding: 7px 0 4px 24px;
 width: 267px;
 margin: 0 0 1px;
 background: url(  '../Images/dropdown-li-bg.gif' ) no-repeat 0 1px;
}

#navigation li.headlink ul li a.tall {
 background: url(  '../Images/dropdown-li-bg3.gif' ) no-repeat top left;
 height: 32px;
 line-height: 1.3em;
}

#navigation li.headlink ul li a:hover {
 background-position: bottom left;
 color: #000;
 text-decoration: none;
}

#navigation li.headlink:hover ul {
 display: block;
}
#navigation li ul {
 list-style: none;
}
#navigation li ul li {
 float: left;
 clear: left;
}

#bannerwrapper {
 width: 100%;
 background: url(  '../Images/banner-bg.jpg' ) repeat-x;
 z-index: 1;
}

#banner {
 position: relative;
 width: 958px;
 padding: 0 1px;
 background: #080808 url(  '../Images/banner-inner-bg.gif' ) no-repeat;
 margin: 0 auto;
 z-index: 2;
 overflow: hidden;
}

#banner img {
 z-index: 3;
}

#banners {
 width: 958px;
 height: 218px;
 list-style: none;
 overflow: hidden;
}

#banners li {
 width: 960px;
 height: 220px;
 float: left;
}

#mainwrapper {
 width: 100%;
 background: url(  '../Images/main-bg.jpg' ) repeat-x;
}

#main {
 position: relative;
 width: 960px;
 margin: 0 auto;
 padding: 11px 0 0;
 background: #fff;
 border-top: 1px solid #1e1e1e;
}

#content {
 width: 681px;
 padding: 5px 20px 9px 20px;
 float: left;
 display: inline; /*    height: 500px; */
}

#footer {
 position: relative;
 width: 960px;
 margin: 10px auto 0 auto;
 padding: 0 0 10px 10px;
 color: #fff;
 font-size: 1.2em;
 clear: left;
}

#footer span {
 color: #FBBC39;
}




/***************
Side bar    */

#sidebar {
 width: 229px;
 float: left;
 display: inline;
}

.sidebox {
 width: 199px;
 margin: 0 0 9px;
 padding: 8px 14px 8px 13px;
 background: url(  '../Images/sidebox-bg.gif' ) repeat;
 border-left: 4px solid #fbbf45;
 color: #fff;
 font-size: 1.2em;
}

.sidebox.agencies {
 text-align: center;
 font-weight: bold;
 padding-top: 12px;
 padding-bottom: 12px;
}

.sidebox h2 {
 height: 20px;
 margin: 0 0 10px 0;
 background-repeat: no-repeat;
}

.sidebox h2 span {
 display: none;
}

.sidebox a {
 color: #fbbc39;
 text-decoration: none;
}

#h2ContactFelineSoft {
 width: 178px;
 background: url(  '../Images/h2/contactFelineSoft.gif' );
}
#h2FelineSoftClients {
 width: 175px;
 background: url(  '../Images/h2/felineSoftClients.gif' );
}
#h2FelineSoftServices {
 width: 189px;
 background: url(  '../Images/h2/felineSoftServices.gif' );
}

#h2FollowFelinesoft {
 width: 189px;
 background: url(  '../Images/h2/followFelinesoft.gif' ) no-repeat;
}

#h2CaseStudies {
 width: 122px;
 margin-bottom:3px;
 background: url(  '../Images/h2/caseStudies.gif' ) no-repeat;
}

#h2FelineSoftBlog {
 width: 152px;
 height: 25px;
 background: url(  '../Images/h2/felineSoftBlog.gif' );
}

#telephone {
 padding: 1px 0 0 32px;
 margin: 0 0 5px 0;
 height: 21px;
 background: url(  '../Images/phoneicon.gif' ) no-repeat;
 font-family: Trebuchet MS;
 font-size: 1.1em;
}

#emailUsHere {
 padding: 0 0 0 32px;
 height: 19px;
 line-height: 1em;
 background: url(  '../Images/emailicon.gif' ) no-repeat 0 2px;
 font-family: Trebuchet MS;
 font-size: 1.1em;
}

.blogItem {
 line-height: 1.4em;
 padding: 5px 0;
 display: block;
}

.blogItem a:hover {
 border: 0;
}

.blogDate {
 text-align: right;
 font-size: .9em;
 margin: 10px 0 0;
 color: #989898;
}

.blogDate a {
 font-size: 1.1em;
}

#clientCarousel {
 margin: 0 0 8px;
 position: relative;
 width: 200px;
 height: 84px;
}

#clientCarousel ul{overflow:hidden;height:84px;}

#clientCarouselLeft {
 position: absolute;
 top: 26px;
 width: 29px;
 height: 29px;
 left: -12px;
}

#clientCarouselLeft:hover, #clientCarouselRight:hover {
 border: 0;
}

#clientCarouselRight {
 position: absolute;
 top: 26px;
 right: -8px;
 width: 29px;
 height: 29px;
}

#sideServices {
 padding: 5px 0;
}
#sideServices a {
 display: block;
}

#side-follow{list-style:none;}
#side-follow li{float:left;margin:5px 10px 3px 0;}
#side-follow li a{display:block;width:32px;height:32px;}
#side-follow li a.follow-fb{background:url(../Images/facebook32.png) no-repeat;}
#side-follow li a.follow-twitter{background:url(../Images/twitter32.png) no-repeat;}
#side-follow li a.follow-linkedin{background:url(../Images/linkedin-32.png) no-repeat;}

#sidebar ul ul#side-follow li:before {content: "" !important;	}

#sidebar ul#blog-posts{}
#sidebar ul#blog-posts li{list-style:none;padding:10px 0;}

#sidebar ul#blog-posts li.spacer{
 height:1px;
 line-height:1px;
 font-size:1px;
 background:#555; 
 padding:0;
}

/*****************
Home page       */


#content #hot{margin:20px 0;padding:0; font-size:1.5em;}

#content #hot li{
 float:left;
 display:inline;
 margin:0 25px 0 0;
 padding:0;
 background:none;
}

#hot li a{
 display:block;
 float:left;
 padding:8px 0 8px 40px;
 background:url(../Images/hotspot-logos.gif) no-repeat left 2px;
 color:#555;
 font-weight:bold;
 text-decoration:none;
}

#hot li a:hover{text-decoration:underline;}

#hot li#hot-moss{margin-right:0;}
#hot li#hot-moss a{background-position:left -94px;}

.focus-spot {
 background:url("../Images/focusFsLogo.png") no-repeat scroll 69px 24px #F3F3F3;
 border:1px solid #DDDDDD;
 float:left;
 margin:15px 10px;
 padding:60px 71px 20px;
 position:relative;
 width:175px;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
}

.focus-spot h2 {
 height: 20px;
 margin: 0 0 11px;
}

#focusServices {
 width: 82px;
 background: url(  '../Images/h2/focusServices.png' ) no-repeat;
}

#SiteMapServices {
 background: none;
}

#focusProducts {
 width: 87px;
 background: url(  '../Images/h2/focusProducts.gif' ) no-repeat;
}

#SiteMapProducts {
 background: none;
}


#focusClients {
 width: 67px;
 background: url(  '../Images/h2/focusWork.png' ) no-repeat;
}



#content .focus-spot ul {
 font-family: MS Sans Serif, Tahoma, Verdana, Arial, Helvetica;
 list-style: none;
 font-size: 1.1em;
 color: #010101;
}

#content .focus-spot ul li {
 background: transparent url(../Images/li.gif) no-repeat scroll 0.5px 50%;
 margin: 0 0 2px;
 padding: 0 0 0 13px;
 font-size: 0.95em;
}

#content .focus-spot ul li a {
 color: #010101;
}

#bigFooter {
 position: relative;
 width: 960px;
 left: 50%;
 margin: 15px auto 0 auto;
 margin-left: -480px;
 padding: 0px 0 0 0;
}

#footerFeaturedClient {
 width: 270px;
 height: 269px;
 padding: 9px 20px;
 margin: 0 15px 0 0;
 background: #151515;
 color: #ddd;
 font-size: 1.08em;
 line-height: 1.2em;
 float: left;
 display: inline;
 position: relative;
}

#footerFeaturedClient p {
 clear: left;
}

#h2featuredClient {
 width: 262px;
 height: 21px;
 margin: 0 0 15px;
 background: url(  '../Images/h2/footerFeaturedClient.gif' ) no-repeat;
}

.featuredClientTitle {
 font-size: 1.2em;
 line-height: 1.3em;
 color: #fff;
 margin: 0 0 0;
}

.featuredClientTitle img {
 float: left;
 margin: 4px 10px 0 0;
}
.featuredClientText {
 padding-top: 9px;
}

#footerFeaturedClient .morelink {
 font-family: Trebuchet MS;
 font-size: 1.1em;
 position: absolute;
 bottom: 10px;
 right: 12px;
}

.footerContact {
 width: 270px;
 height: 269px;
 padding: 9px 20px;
 float: left;
 margin:0 15px 0 0;
 display: inline;
 background: #151515;
 color: #fff;
 font-size: 1.2em;
 font-family: Trebuchet MS;
 line-height: 1.1em;
}

.footerContact.last{margin-right:0;}

.footerContact h2 {
 margin: 0 0 8px;
}

#h2ContactLondon {
 width: 181px;
 height: 21px;
 background: url(  '../Images/h2/felineSoftLondon.gif' ) no-repeat;
}

#h2ContactBristol {
 width: 171px;
 height: 21px;
 background: url(  '../Images/h2/felineSoftBristol.gif' ) no-repeat;
}

.footerContact p span.contactDetail {
 display: block;
 color: #FBBC39;
 margin: 0 0 4px 0;
 font-size: .9em;
}

.directionslink {
 padding-top: 7px;
}
.footerContact iframe {
 margin: 4px 0 0;
 display: block;
}

.footer-fb{
 width:15px;
 height:15px;
 float:left;
 display:block;
 margin:6px 0 0 8px;
 background:url(../images/facebook15.png) no-repeat;
}

.footerContact h2{float:left;}



/**************
Home page    */

#content #home-tabs{height:31px; margin:30px 0 0;}

#content #home-tabs li{float:left;padding:0;background:none;display:inline;margin:0 2px 0 0;}
#content #home-tabs li.last{margin-right:0;}

#home-tabs a{
 display:block;
 height:31px;
 line-height:31px;
 padding:0 0 0 31px;
 background:url(../Images/home-tab.gif) no-repeat left bottom;
 font-weight:bold;
 font-size:15px;
 color:#fff;
 text-decoration:none;
 outline:none;
 float:left;
}

#home-tabs a span{
 background:url(../Images/home-tab.gif) no-repeat right bottom;
 display:block;
 padding-right:31px;
}

#home-tabs a.active{color:#fabb3a;background-position:left top;}
#home-tabs a.active span{background-position:right top;}

#home-tabs a:hover{background-position:left top;} 
#home-tabs a:hover span{background-position:right top;}


#home-panels{
 background:url(../Images/bg-tile.gif) repeat 4px 0;
 padding:10px;
 margin:0 0 10px;
}

#home-panels .content{padding:20px;background:#fff;}







/*****************
Section page    */

#sectionLinks {
 width: 669px;
 padding: 6px 0 6px 8px;
 border: 1px solid #d2d2d2;
 background: url(  '../Images/sectionLinks-bg.gif' ) repeat-y top left;
}

#theSectionLinks {
 width: 440px;
 float: left;
 list-style: none;
 font-size: 1.2em;
}

#theSectionLinks li {
 float: left;
 display: block;
}

#theSectionLinks li a {
 color: #373737;
 padding: 5px 0 6px 11px;
 margin: 0 8px 0 0;
 background: url(  '../Images/li.gif' ) no-repeat 0 10px;
 display: block;
 float: left;
 width: 200px;
}

#callback {
 width: 210px;
 padding: 5px 0 0 15px;
 float: left;
 display: inline;
}

#callback p {
 font-size: 1.2em;
 margin: 0 0 10px;
}

#callback fieldset {
 border: 1px solid #b1b1b1;
 width: 206px;
 background: url(  '../Images/input-bg.gif' ) repeat-x;
}

#callback label {
 width: 45px;
 padding: 6px 0 6px 5px;
 background: #1e1e1e;
 border-right: 2px solid #eabc5c;
 color: #d7be88;
 display: block;
 float: left;
 font-size: 1.2em;
}

#callback input {
 padding: 6px 0 0 6px;
 border: 0;
 font-size: 1.1em;
 color: #373737;
 height: 14px;
 width: 100px;
 background: none;
 font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}


/*****************
Products page    */

.screenshots img {
 float: left;
 margin: 0 10px 0 0;
}



/*****************
Clients page    */

.clients-ul {
 padding:9px 9px 7px;
 height: auto;
 background: #f6f6f6;
 border: 1px solid #eee;
 float: left;
}

#content .clients-ul li {
 padding: 0;
 background: none;
 float: left;
 display: inline;
 margin: 2px 4px;
 width: 124px;
}

#content .clients-ul li img {
 width: 100%;
}

#content .clients-ul li.clear {
 float: none;
 width: 100%;
 display: block;
 margin: -1px 0 0;
}



/*************************
   Testimonials page   ***
*************************/

#content #testimonial-nav{
 width:168px;
 float:left;
 background:#f6f5f5;
 border:1px solid #dcdcdc;
 font-size:1.1em;
 line-height:14px;
 border-radius:4px;
 -moz-border-radius:4px;
 display:none;
 text-align:center;
}

#content #testimonial-nav li{
 margin:0;
 border-bottom:1px solid #dcdcdc;
 background:none;
 padding:0;
 position:relative;
}

#content #testimonial-nav li.last{border:none;}

#testimonial-nav li a{
 display:block;
 padding:7px;
 color:#4a4a4a;
 text-decoration:none;
 outline:none;
}

#testimonial-nav li.active a,#testimonial-nav li.active a:hover{
 background-color:#dcdcdc;
 cursor:default;
 background-image: -moz-linear-gradient(100% 100% 90deg, #dcdcdc, #ececec);
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ececec), to(#dcdcdc));
}

#testimonial-nav li a:hover{background:#ececec;}

#testimonial-nav li.active a{font-weight:bold;}

#testimonial-nav li em{
 width:11px;
 height:100%;
 position:absolute; right:-11px; top:0;
 background:url(../Images/right-arrow.png) no-repeat left center;
 display:none;
}

#testimonial-nav li.active em{display:block;}

#testimonial{
 width:419px;
 padding:30px 40px 20px; 
 margin:0 0 20px;
 float:right;
 background:#f6f5f5 url(../Images/testimonial-bg.png) no-repeat 16px 14px;
 text-align:left;
 border:1px solid #dcdcdc;
 border-radius:4px;
 -moz-border-radius:4px;
 display:none;
}

#testimonial h2{margin:0 0 20px;}

#content #testimonial p{
 font-size:1.2em;
 font-style:italic;
 line-height:1.8em;
 margin:20px 0;
}

#content #testimonial p.testimonialer{color:#666;font-style:normal;font-weight:bold;}

#content #testimonial p.testimonialer a{color:#666;border-bottom:1px dotted;}
#content #testimonial p.testimonialer a:hover{text-decoration:none;}

#content #the-testimonials{font-size:1em;}

#content #the-testimonials li{background:none;padding:0;}






/****************************
***   Case Studies page   ***
****************************/

#case-nav{width:226px;border-left: 4px solid #fbbf45;list-style:none;}

#case-nav a{
 background:url(../Images/bg-60pc.gif);
 display:block;
 padding:15px 0 15px 20px;
 font-size:1.4em;
 color:#f0f0f0;
 font-weight:bold;
 border-bottom:1px solid #9e9e9e;
}

#case-nav a:hover, #case-nav .active a{text-decoration:none;background:url(../Images/bg-80pc.gif);}
#case-nav .active a{color:#f7bd38;}
#case-nav li{position:relative;}

#case-nav li .arrow{
 width:25px;
 height:100%;
 position:absolute;
 top:0;
 left:-23px;
 background:url(../Images/big-left-arrow.png) no-repeat left center;
 display:none; 
}

#case-nav li.active .arrow{display:block;}


#case-study{
 padding:15px 30px 20px;
 margin:0 0 20px;
 background:#f6f5f5;
 border:1px solid #dcdcdc;
 border-radius:4px;
 -moz-border-radius:4px;
}

#content #case-subnav{
 font-size:1.1em;
 line-height:14px;
 margin:0 0 10px;
}

#content #case-subnav li{
 float:left;
 display:inline;
 margin:0 10px 0 0;
 padding:0;
 position:relative;
 background:none;
}

#content #case-subnav li.last{border:none;}

#case-subnav li a{
 background:#f6f5f5;
 border:1px solid #dcdcdc;
 display:block;
 padding:7px 30px;
 color:#4a4a4a;
 text-decoration:none;
 outline:none;
}

#case-subnav li.active a,#case-subnav li.active a:hover{
 background-color:#dcdcdc;
 cursor:default;
 background-image: -moz-linear-gradient(100% 100% 90deg, #dcdcdc, #ececec);
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ececec), to(#dcdcdc));
}

#case-subnav li a:hover{background:#ececec;}

#case-subnav li.active a{font-weight:bold;}

#case-subnav li em{
 width:100%;
 height:12px;
 position:absolute; left:0; bottom:-10px;
 background:url(../Images/down-arrow.png) no-repeat center bottom;
 display:none;
}

#case-subnav li.active em{display:block;}


#the-case-studies{display:none;}








/*****************
Contact page    */

#contact-form {
 font-size: 1.2em;
 padding:20px 0 20px 20px;
}

#contact-form label {
 float: left;
 clear: left;
 width: 200px;
 text-align: left;
 line-height: 1.2em;
 padding: 0 5px 0 0;
}

#contact-form label.lblServices {
 height: 36px;
}

#contact-form input, #contact-form select, #contact-form textarea {
 font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
 font-size: .9em;
 color: #373737;
 margin: 0 0 10px;
}

#contact-form .text-box {
 border: 1px solid #999;
 padding: 3px;
 width: 330px;
}

#contact-form textarea.text-box {
 height: 100px;
}

#contact-form select {
 padding: 2px;
 width: 338px;
}





/*****************
Misc Styles     */

.clear {
 width: 100%;
 height: 1px;
 font-size: 1px;
 line-height: 1px;
 clear: both;
}

.arrows {
 color: #bd0401;
 font-weight: bold;
 font-family: Tahoma !important;
}

.right {
 text-align: right;
}
.nomargin {
 margin: 0;
}
.norightmargin {
 margin-right: 0;
}





/* -------------------------------------
        
    The following styles are used to 
    render a panel with a list of 
    service we provide.
        
-------------------------------------- */

#felineServices {
 font-family: Tahoma,Verdana,Arial,Helvetica, 'Sans-Serif';
 font-size: 1.0em;
 width: 676px;
 border: 1px solid #d2d2d2;
}

#servicesList {
 width: 450px;
 float: left;
 position: relative;
}

#servicesList ul {
 margin: 10px 0px 10px 10px;
 list-style: none;
 color: #010101;
 padding: 0;
 position: relative;
}

#servicesList ul li {
 background: transparent url(../Images/li.gif) no-repeat scroll 2px 4px;
 height: 20px;
 margin: 0 0 2px;
 padding: 0 0 0 13px;
 position: relative;
 white-space: nowrap;
 width: 188px;
}

#servicesList ul li a {
 color: #8A0808;
}

#servicesList ul li.lastListItem {
 margin-bottom: 0;
 padding-bottom: 5px;
 position: relative;
}

#contactUsBox {
 background: url(../Images/grid.gif) repeat;
 border-left: 1px solid #D5D5D5;
 float: right;
 height: 124px;
 margin: 0;
 padding: 10px;
 width: 205px;
}

#servicesList #serviceUnorderedList1 {
 float: left;
 padding-left: 10px;
 padding-top: 10px;
}
#servicesList #serviceUnorderedList2 {
 float: right;
 padding-right: 0px;
 padding-top: 10px;
}
#contactUsBox p {
 font-family: Tahoma,Verdana,Arial,Helvetica, 'Sans-Serif';
 font-size: 1.1em;
 margin: 0;
 padding: 0;
}

#contactUsBox p.intro {
 margin: 0;
 padding-bottom: 6px;
 padding-top: 6px;
}


/* this renders badly in ie7 and can be corrected by forcing ie7 layout or by hacking ie7 */


span.referalText {
 position: relative; /* this is for positioning the validation bullet */
 display: block;
 float: right;
 margin-right: 298px;
 width: 131px;
}

#contact-form span.referalText label {
 float: right;
 width: 100px;
}

#contact-form span.referalText input {
}



/* can we use your name ? */


.leadPanel {
 clear: both;
}

span.canUseName {
 position: relative; /* this is for positioning the validation bullet */
 display: block;
 float: left;
 width: 131px;
 zoom: 1;
}

#contact-form span.referalText span.redValidatorAsterisks, #contact-form span.canUseName span.redValidatorAsterisks {
 position: absolute;
 top: 0;
 right: -218px;
}

#contact-form span.canUseName label {
 float: right;
 width: 100px;
 zoom: 1;
}

#contact-form span.TypeOfAppLabel {
 float: left;
 width: 200px;
}

div#content div.vsFormFeedback {
 background: url( "../Images/bgErrorMessage.png" ) no-repeat scroll 0 0;
 border-color: #999999 #999999 #999999 #FBBF45;
 border-style: solid;
 border-width: 1px 1px 1px 5px;
 clear: both;
 margin-left: 57px;
 padding: 5px;
 width: 527px;
}

/* 
    a big around the houses way of making the bullet line up 
    This is styled for FF and hacked back for IE in 

*/


span.vfValidatorTextInputBox {
 margin-top: 0px;
 position: absolute;
 right: 329px;
}

#contact-form div.textArea {
 padding-left: 0;
}

span.vfValidatorTextInputBox div.otherCommentsBullet {
 color: Gray;
 float: right;
 margin-top: -115px;
 width: 84px;
}


div#content div.vsFormFeedback p {
 font-size: 1.4em;
 font-weight: bold;
 margin: 0 0 0.8em;
 padding-left: 60px;
 padding-top: 20px;
}

div#content div.vsFormFeedback ul {
 font-size: 1.2em;
 padding-left: 29px;
}

div#content div.vsFormFeedback ul li {
 padding-top: 2px;
 background: transparent url(../Images/li.gif) no-repeat scroll 11px 7px;
}

div#buttonDiv {
 margin-left: 263px;
}




span.redValidatorAsterisks span.maybe {
}

div.confirmationAlert {
 background: url( "../Images/errorMessageSmall.png" ) no-repeat scroll 5px 8px transparent;
 border-color: #999999 #999999 #999999 #FBBF45;
 border-style: solid;
 border-width: 1px 1px 1px 5px;
 clear: both;
 margin-bottom: 10px;
 margin-left: 205px;
 margin-right: 90px;
 width: 332px;
 zoom: 1;
}

#content div.confirmationAlert p {
 font-size: 10px;
 margin-bottom: 5px;
 margin-left: 45px;
 margin-top: 5px;
}

input.contact-us-button {
 background: url( "../Images/btn_submit.gif" ) no-repeat scroll 0 0 transparent;
 height: 25px;
 width: 71px;
 display: block;
 zoom: 1;
 outline: none;
 border-style: none;
 text-indent: -9999px; /* for ie as it's such a piece of shit */
 font-size: 0px;
 display: block;
 line-height: 0px;
}

input.contact-us-button:hover {
 background: url( "../Images/btn_submit_hover.gif" ) no-repeat scroll 0 0 transparent;
 cursor: pointer;
 height: 25px;
 width: 71px;
}





.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}