/*** GLOBALS ***/
html { min-height: 100%; height: auto;}
body { margin: 0px; padding: 0px; background: #8fe3ff url(images/bg-grass.jpg) no-repeat center bottom; font-family: Verdana, Arial; color: #545454; font-size: 0.7em; text-align: left; }
p { font-size: 1.00em;}
.left {float: left;} .right {float: right;} .clear {clear: both; height: 0;}
a img {border:none;}
a { color: #0B6AD5; text-decoration: none;}

.quote { font-size: 1.8em; font-weight:bold; padding-left:20px; padding-right:20px; text-align:center;color: #006ad7;}

/*** TOP NAV ***/

#top-nav div.open 
{
    background: url(images/topnav/top.jpg) no-repeat top left; height: 17px; width: 1014px; margin: 14px 0 0 0; 
}

#top-nav div.close 
{
    background: url(images/topnav/bottom.jpg) no-repeat top left; height: 15px; width: 1014px; margin: 0 0 10px 0; 
}

#top-nav div.content
{
    background: url(images/topnav/middle.jpg) repeat-y; width: 1014px; margin: 0; 
}


#top-nav #menu
{
    background-color: transparent; width: 1014px; margin: 0 auto; padding-top: 0px;
}

#top-nav #menu ul
{
    margin: 0; padding: 0 0 0 20px; list-style: none; float: left;
}

#top-nav #menu li
{
    float: left; margin: 2px 5px 0 0;
    padding: 3px 10px 0 15px;
    background: transparent url(images/topnav/divider.gif) no-repeat top left;
    height: 20px;
    font-size: 1.00em;
}

#top-nav #menu li a.selected { color: #006AD7; }

#top-nav #menu li.home
{
    background-image: none; padding-top: 1px;
}

#top-nav #menu li.home a
{
    display: block;
    width: 18px;
    height: 18px;
    background: url(images/topnav/house-icons.png) no-repeat top left;
    margin-top: -1px;
}

#top-nav #menu li.home a span { display: none; }

#top-nav #menu li.home a:hover, #top-nav #menu li.home a.selected
{
    background-position: -18px 0;
}
#top-nav a { color: #545454;}
#top-nav a:hover { color: #006AD7; }

#top-nav #tagline {float:right; margin: 5px 36px 0 0; color: #545454; }
#top-nav #tagline strong {color: #006AD7; font-weight: normal;} 

/*** CLOUDS ***/
#bg-header
{
    background: url(images/bg-clouds.png) no-repeat center bottom;
    height: 285px;
    top: 57px;
    width: 100%;
    position: absolute;
    z-index: -500;
}



/*** MAIN CONTENT PANEL FOR PAGE ***/
#page-content { background-color: transparent; width: 1014px; margin: 0 auto; }






/*** FRUITFUL LOGO ***/
img.fruitful-logo 
{
   margin: 55px 0 0 0;
   width: 279px;
   height: 80px;
}



/*** TOP BOX ***/

#box1-contact
{
    width:1014px; height: 584px; margin-top: 10px; margin-bottom: 10px; background: url(images/box1-contact.jpg) no-repeat top left;
    padding: 23px 10px 0 40px;
}

/** Top Image - curves, and shadow **/
#box1 div.top, #box2 div.top, div.box1a div.top { background: url(images/box1top.jpg) no-repeat top left; height: 17px; width: 1014px; margin: 0; } /* Note: also box2 */


/** Middle/Content section **/
#box1 div.middle, div.box1a div.middle { margin: 0; padding: 23px 10px 0 40px; background: url(images/box1content.jpg) repeat-y;}
#box1 div.middle-dark { background: url(images/box1content-dark.jpg) repeat-y; padding-top: 10px; padding-bottom: 10px; }
div.box1a div.middle { padding: 15px 40px;}

#box1 div.middle div.content .left, #box1a div.middle div.content .left { margin: 0 0 0 41px; width: 430px;  }
#box1 div.middle div.content .fullwidth { width: 870px; margin-bottom: 30px; }
#box1 div.middle div.content .right { margin: 0 16px 29px 0; }
#box1 div.middle div.content .right .text { width:378px;margin: 0 40px; }
#box1 div.middle div.content .right .text .bullet { color:#747474; }

#box1-contact .left {margin: 0 0 0 41px; width: 430px;}

div.box1a div.middle div.content .left { margin: 0px; width: 440px;  }

#box1 div.middle h1, #box1-contact h1 { padding: 0; margin: 25px 0 0 0; font-size: 2.6em; color: #006ad7; font-weight: normal; }

#box1 div.middle h2, #box1-contact h2 { padding: 0; margin: 0; font-size: 2em; color: #9c9c9c; font-weight: normal;}

#box1 div.middle h3 {font-size: 1em; padding-top:0px; margin-top: 30px;}
#box1 div.middle h3.what-is-seo {background: url(images/online-marketing/what-is-seo.gif) no-repeat top left; height: 13px; padding-top: 30px; padding-left: 56px; margin-bottom: 0px; margin-top: 15px;}
#box1 div.middle h3.how-does-seo-perform {background: url(images/online-marketing/how-does-seo-perform.gif) no-repeat top left; height: 13px; padding-top: 30px; padding-left: 56px; margin-bottom: 0px; margin-top:0px;}
#box1 div.middle h3.what-is-ppc {background: url(images/online-marketing/what-is-ppc.gif) no-repeat top left; height: 13px; padding-top: 30px; padding-left: 40px; margin-bottom: 0px; margin-top:0;}
#box1 div.middle h3.how-does-ppc-perform {background: url(images/online-marketing/how-does-ppc-perform.gif) no-repeat top left; height: 13px; padding-top: 30px; padding-left: 40px; margin-bottom: 0px; margin-top:0;}
#box1 div.middle h3.accountancy-packages {background: url(images/website-development/accountancy-packages.jpg) no-repeat top left; height: 13px; padding-top: 32px; padding-left: 32px; margin-bottom: 0px; margin-top: 0px;}
#box1 div.middle h3.charity-giving {background: url(images/mobile-development/charity-giving.gif) no-repeat top left; height: 17px; padding-top: 28px; padding-left: 50px; margin: 20px 0 0 0;}
#box1 div.middle h3.marketing-services {background: url(images/online-marketing/marketing-services.gif) no-repeat top left; height: 31px; padding-top: 3px;padding-left: 35px; margin: 10px 0 10px 0;}

#box1 div.middle h3.carpology {background: url(images/mobile-development/carpology-icon.jpg) no-repeat top left; height: 17px; padding-top: 28px; padding-left: 50px; margin: 20px 0 0 0;}

#box1 div.middle h3.keyboard {background: url(images/mobile-development/keyboard-icon.jpg) no-repeat top left; height: 17px; padding-top: 28px; padding-left: 50px; margin: 20px 0 0 0;}

div.box1a div.middle div.content h3 { font-weight: normal; color: #000000; margin: 0; font-size: 1.6em;}

div.box1a div.middle div.content .name { padding: 2px 0 10px 65px; height: 40px; border-bottom: #9c9c9c 1px solid;}
div.box1a div.middle div.content .ronnie { background: url(images/team/ronnie.jpg) no-repeat top left;}
div.box1a div.middle div.content .sam { background: url(images/team/sam.jpg) no-repeat top left;}
div.box1a div.middle div.content .nanna { background: url(images/team/nanna.jpg) no-repeat top left;}
div.box1a div.middle div.content .paul-nichols { background: url(images/team/paul-nichols.jpg) no-repeat top left;}
div.box1a div.middle div.content .neil { background: url(images/team/neil.jpg) no-repeat top left;}
div.box1a div.middle div.content .paul { background: url(images/team/paul-baxter.jpg) no-repeat top left;}
div.box1a div.middle div.content .matthew { background: url(images/team/matthew.jpg) no-repeat top left;}
div.box1a div.middle div.content .mark { background: url(images/team/mark.jpg) no-repeat top left;}
div.box1a div.middle div.content .right {width: 440px;}
div.box1a div.middle div.content .right h4 {margin: 1em 0 0 0;}
div.box1a div.middle div.content .right p {margin-top:0;}

#box1 div.middle #phone-rotator, #phone-menu {padding-right: 40px;}

#box1 div.middle #online-marketing {padding-right: 5px; padding-top: 40px;}

#box1 div.middle #website-development {padding-left: 25px; padding-top: 40px;}

/* Note: this container is introduced by photoRotator.js.
   Setting fixed width and height prevents page jumping during image transition. */
#box1 div.middle #phone-rotator-container { width:350px; height: 481px; padding-right: 40px; } 
#box1 div.middle #laptop-rotator-container { width:321px; height: 180px; padding-right: 40px; } 


/** Bottom Image - curves and shadow **/
#box1 div.bottom, div.box1a div.bottom { background: url(images/box1bottom.jpg) no-repeat top left; height: 17px; width: 1014px; margin: 0 0 10px 0; }


/** Overrides for pages with images **/
#box1.mobile-development div.bottom {background-image: url(images/mobile-development/box1bottom.jpg); }
#box1.mobile-development div.middle div.content {background: url(images/mobile-development/top-image.jpg) no-repeat bottom right; margin-right: 23px; min-height: 491px;}

#box1.creative-design div.bottom {background-image: url(images/creative-design/box1bottom.jpg); }
#box1.creative-design div.middle div.content {background: url(images/creative-design/top-image.jpg) no-repeat bottom right; margin: 0 3px 0 0; min-height: 491px;}

#box1.android-development div.middle div.content .right {margin: 110px 0 33px 0;}
#box1.android-development div.middle div.content .right .text {margin: 0 30px 0 50px;}
#box1.android-development div.middle div.content .right img.charity-giving-barcode { margin: -2px 0 -10px 250px;}

#box1.iphone-development div.middle div.content .right {margin: 110px 0 33px 0;}
#box1.iphone-development div.middle div.content .right .text {margin: 0 30px 0 50px;}
#box1.iphone-development div.middle div.content .right img.qrcode { margin: -2px 0 -10px 287px;}

#box1.ipad-development div.middle div.content .right {margin: 110px 50px 33px 0;}
#box1.ipad-development div.middle div.content .right .text {margin: 0 30px 0 50px;}
#box1.ipad-development div.middle div.content .right img.qrcode { margin: -2px 0 -10px 287px;}

#box1.team div.middle div.content {background: url(images/team-bg.jpg) no-repeat bottom right; padding-right:0; margin-right:-2px; }



/*** MIDDLE BOX ***/


/* Note - for '#box2 div.top' see '#box1 div.top' */


#box2 div.middle { background: url(images/box1content.jpg) repeat-y; margin: 0; padding: 20px 40px 10px 40px; }

#box2 div.middle div.content .left { margin: 0; width: 440px;}
#box2 div.middle div.content .right { margin: 0; width: 440px;}
#box2 div.middle div.content h3 { font-weight: normal; color: #000000; margin: 0; font-size: 1.6em;}
#box2 div.middle div.content h3 a {color: #000000;}


#box2 div.bottom { background: url(images/box2bottom.jpg) no-repeat; height: 179px; width: 974px; margin: 0 0 0 0; padding: 10px 0 0 40px; }

#box2 div.bottom div.nav .item {float: left;}
#box2 div.bottom div.nav .team {}
#box2 div.bottom div.nav .contact {margin-top: -3px; margin-left: 22px;}
#box2 div.bottom div.nav .knowledge {width: 295px; height: 135px; background: url(images/online-marketing-knowledge-bg.jpg) no-repeat; margin-left: 21px; color: #FFFFFF; padding: 10px; font-size: 0.8em;}
#box2 div.bottom div.nav .knowledge h3 { font-size: 1.8em; font-weight: normal; margin:2px 0 0 0;}
#box2 div.bottom div.nav .knowledge ul { margin: 0; padding: 5px 20px; float: left; width: 180px;}
#box2 div.bottom div.nav .knowledge img {float: right; margin-top: 55px; margin-right: 30px;}
#box2 div.bottom div.nav .knowledge a {color: #FFFFFF;}
#box2 div.bottom div.nav .knowledge a:hover {text-decoration: underline;}

/* 
    Middle Box Heading Icons 
    
    Note:
    - Both images on each page should be identical height - where they are not then whitespace should be added to top of the smaller image
    - Height of h2 tag should be set to: 19px
    - Padding is calculated as follows:
        top = image_height - 19
        left = image_width + 10
*/
#box2 div.middle h3.increasing-your-traffic{background: url(images/online-marketing/increasing-your-traffic.gif) no-repeat top left; height: 19px; padding: 15px 0 0 42px;}
#box2 div.middle h3.improving-your-roi{background: url(images/online-marketing/improving-your-roi.gif) no-repeat top left; height: 19px; padding: 15px 0 0 40px;}
#box2 div.middle h3.bespoke-ecommerce-solutions{background: url(images/website-development/bespoke-ecommerce-solutions.gif) no-repeat top left; height: 19px; padding: 17px 0 0 45px;}
#box2 div.middle h3.unlimited-development{background: url(images/website-development/unlimited-development.gif) no-repeat top left; height: 19px; padding: 17px 0 0 46px;}
/*#box2 div.middle h3.android-mobile-development{background: url(images/mobile-development/android-mobile-development.gif) no-repeat top left; height: 19px; padding: 19px 0 0 42px;}*/
/*#box2 div.middle h3.iphone-mobile-development{background: url(images/mobile-development/iphone-mobile-development.gif) no-repeat top left; height: 19px; padding: 19px 0 0 37px;}*/

#box2 div.middle h3.iphone-mobile-development {padding-top: 19px;}
#box2 div.middle h3.iphone-mobile-development span {background: url(images/mobile-development/iphone-mobile-development.gif) no-repeat top left; height: 19px; padding: 19px 0 0 37px;}
#box2 div.middle h3.android-mobile-development {padding-top: 19px;}
#box2 div.middle h3.android-mobile-development span {background: url(images/mobile-development/android-mobile-development.gif) no-repeat top left; height: 19px; padding: 19px 0 0 42px;}


#box2 div.middle h3.ecommerce-design{background: url(images/creative-design/ecommerce-design.gif) no-repeat top left; height: 19px; padding: 16px 0 0 45px; }
#box2 div.middle h3.people-will-talk-about{background: url(images/creative-design/people-will-talk-about.gif) no-repeat top left; height: 19px; padding: 16px 0 0 46px;}
#box2 div.middle h3.digital-marketing{background: url(images/digital-marketing.gif) no-repeat top left; height: 19px; padding: 15px 0 0 40px;}
#box2 div.middle h3.platforms{ height: 19px; padding: 15px 0 0 0;}

/*** BOTTOM BOX ***/

/** Background - note: 1 image for all boxes **/
#box3 {background: url(images/box3.jpg) no-repeat;  height: 466px; padding: 35px 38px 0 38px; }

/** Navigational Items **/
#box3 div.nav { padding:0;width: 936px; height: 260px; background: url(images/bottom-nav-bg.jpg) no-repeat; margin: 8px 0 0 0; padding-left: 4px; font-size: 0.9em;}
#box3 div.nav .item { float: left; height: 260px; padding: 0 15px; overflow: auto;  }
#box3 div.nav .item ul { list-style-type: none; padding: 0; margin-left:0; }
#box3 div.nav .item li { padding: 0 0 10px 0; }
#box3 div.nav .marketing { width: 206px; }
#box3 div.nav .website-development { width: 199px; }
#box3 div.nav .mobile-development { width: 198px; }
#box3 div.nav .creative-design { width: 208px; }
#box3 div.nav h3 {font-size: 1.3em; color: #000000; margin-top: 13px;}
#box3 div.nav .item a { color: #545454; text-decoration: none; }
#box3 div.nav .item a:hover { text-decoration: underline; }

/** Copyright Footer **/
#box3 .copyright, #box3 .copyright a { padding: 0; text-align: center; margin: 18px 0 0 0; font-weight: normal; color: #656565; line-height: 1.5em; }
#box3 .copyright a:hover { text-decoration: underline; }

/*** FORMS ***/

form { margin: 10px 0; }

/** Labels **/
form div.left {width: 350px !important; padding-top: 10px; margin-left: 41px; }
form div.right {width: 350px !important; padding-top: 10px; margin-right: 41px;}

form div.buttons { width: 420px; text-align: center; }

form label
{
    display: inline-block;
    width: 100px;
    margin-top: 10px;
    font-weight: normal;
    float: left;
    clear:both;
    font-size: 1.2em;
    color: #545454;
}

/** Input Controls **/
form input
{
    margin-top: 10px;
    float: left;
    width: 240px;
}

form input[type=submit]
{
    width: 63px;
    height: 22px;
    background: url(images/submit.gif) no-repeat top left;
    border: none;
    text-indent: -9999px;
    margin-left: 192px;
}

form textarea 
{
    margin-top: 10px;
    height: 75px;
    width: 240px;
}

/** Error Highlighting **/
form .error {background-color: #F6CECE;}
p.error {color:Red;}

/*** KNOWLEDGE BASE ***/
.right #kbnav, .right #kbrightnav
{
   margin-left: 60px;
}

.right #kbnav ul , .right #kbrightnav ul
{
    padding-left: 20px;
    line-height: 20px;
}

.left #kbnav ul
{
    padding-left: 15px;
    line-height: 20px;
}

/* Contact Page - Look forward to hearing from you */
.look-forward 
{
    display: block;
    width: 428px;
    height: 40px;
    background: url(images/look-forward.jpg) no-repeat top left;
    text-indent: -9999px;
}

.iphone-development .keyboard-left
{
    position: relative;
    left: -73px;
    height: 286px;
    width: 500px;
    background: url(images/mobile-development/keyboard-left.jpg) no-repeat top left;
}

.top-app
{
    height:349px;
    width:496px;
    left:440px;
    top:15px;
    position:relative;
    float:left;
}

.app-icon
{
    height:50px;
    width:50px;
    float:left;
    margin-top:14px;
    margin-left:32px;
}

.app-icon-image
{
    height:46px;
    width:46px;
    float:left;
}

.app-tabs
{
    background: url(images/home-tab-bg.png) no-repeat top left;
    height:75px;
    width:440px;
    left:0px;
    top:5px;
    position:relative;
    float:left;
}

.article-image
{
    margin:0px;
    padding:0px;
    margin-top:14px;
}

.home-paragraph
{
    margin:0px;
    padding:0px;
    margin-top:12px;
}

.new-main
{
    width:430px;
    margin:0px;
    margin-left:41px;
    position:relative;
    display:block;
}

.new-right
{
    position:absolute; 
    left:0px; 
    top:0px; 
    display:inline;
}

#wrapper {
    width:440px;
    position:absolute;
    left:493px;
    top:380px;
}

ul.tabs {
    width:440px;
    margin:0;
    padding:0;
}

ul.tabs li {
    display:block;
    float:left;
    padding:0 0px;
}

ul.tabs li a {
    display:block;
    float:left;
    padding:0px;
    padding-top:6px;
    padding-bottom:6px;
    background-color:#9c9c9c;
    color:#fff;
    text-decoration:none;
    width:146px;
    margin-right:1px;
    text-align:center;
}

.tab-content 
{
	clear:both;  
}