form *, * /* set all margins and padding to 0 so that they can be styled up accordingly, ensures all browsers use the same margins and padding */
{
    margin:0;
    padding:0;}

html
{
    font-size:100%; /* required by IE */
    height: 100%; /* ensures that scollbar is always displayed */
    margin-bottom: 1px; /* ensures that scollbar is always displayed */}

body 
{
    background-color:#C3C3C3;
    font-family:verdana, arial, helvetica, sans serif;
    font-size:75%; /* used in this case to make website text smaller */
    text-align: center; /*centrally aligns the page */}

h1, h2, h3, h4, p, li, form
{
    color:#636363;
    text-decoration:none;}

h1, h2, h3, h4
{
    font-weight:bold;}

h2, h3, h4, p
{
    padding: 0.2em 0 1em 0;}

h1
{
    font-size:120%;
    margin:0px 0px 0.8em 0px;}

h2
{
    font-size:120%;}

h3
{
    font-size:110%;}

h4
{
    font-size:100%;}

p
{
    font-size:100%;
    text-align:justify;}

li
{
    list-style-image:url("../images/graphics/misc/bullet.gif"); /* double quotes required for IE5 on mac to display images */
    margin-left:15px; /* vertically aligns bullet point with edge of text */}

a:link, a:visited
{
	text-decoration:none;
	cursor: pointer;
	color:#636363;}

a:hover
{
	text-decoration: underline;}

img
{
    border:0px;}

input
{
    }

table, th, td
{
    font-size:100%}

/* overall screen css */

#full
{
    position:relative; /* enables absolute positioning (of mandatory *) to reference from this element*/
    padding-bottom:5px;
    max-width:760px; /* required to centralise page in all browsers */
    width:760px; /* required to centralise page in all browsers */
    text-align:left; /* set to left initially and then overwrite as required with centre, right or justify */
    margin:auto; /* centralise page */}

#skiptocontent
{
    display:none; /* display skip to content link only available to those not using css */}

/* white area with set width */

#page
{
    background-color:#FFFFFF;
    width:100%;
    margin-top:5px;}

/* white area corners */
    
#pagetopleft
{
    background-image:url("../images/graphics/content/top_left.gif"); /* double quotes required for IE5 on mac to display background images */
    background-position: top left;
	background-repeat: no-repeat;}

#pagetopright
{
    background-image:url("../images/graphics/content/top_right.gif");
    background-position: top right;
	background-repeat: no-repeat;}

#pagebottomleft
{
    background-image:url("../images/graphics/content/bottom_left.gif");
    background-position: bottom left;
	background-repeat: no-repeat;}

#pagebottomright
{
    background-image:url("../images/graphics/content/bottom_right.gif");
    background-position: bottom right;
	background-repeat: no-repeat;}

/* main area contains banner, top header, menus and text */

#content
{
    padding:10px;}

/* menu css */

#primarymenu
{
    background-color:#999999;
    width:740px;
    margin-bottom:3px;}

#secondarymenu
{
    background-color:#C3C3C3;
    float:right;
    margin-bottom:8px;}

#nosecondarymenu
{
    margin-bottom:8px;}

.primarymenu, .secondarymenu
{
    text-decoration:none;
    color:#FFFFFF;}

a.selected
{
    color:#ffffff!important;
    text-decoration:none!important;}
    
a:link.primarymenu, a:visited.primarymenu, a:link.secondarymenu, a:visited.secondarymenu
{
    text-decoration:none;
    color:#444444;}

a:hover.primarymenu, a:hover.secondarymenu
{
    text-decoration:none;
    color:#FFFFFF;}

#primarymenuleft, #secondarymenuleft
{
    background-image:url("../images/graphics/menu/left.gif");
    background-position: bottom left;
	background-repeat: no-repeat;}

#secondarymenuright
{
    background-image:url("../images/graphics/menu/right.gif");
    background-position: bottom right;
	background-repeat: no-repeat;}

#primarymenuitems, #secondarymenuitems
{
    font-size:95%;
    padding:0.3em 7px 0.3em 7px;}

/* homepage content area and main web page content area */

#homecontent
{
    margin:20px 0px;}

#maincontent
{
    margin:20px;}

/* 3 homepage columns */

.homeleft, .homemiddle, .homeright
{
    overflow:hidden; /* in case an element in a container is/gets "too large", the element would stick outside of the container */
    display:inline-block; /* make sure background colors are not painted outside of elements */}

.homeleft, .homemiddle, .homeright
{
    float:left;}

.homeleft
{
    width:160px;
    margin-left:-560px; /* allows the content area to be coded in first and styled into place */
    display:inline;}

.homemiddle
{
    width:380px;
    margin-left:180px; /* allows the content area to be coded in first and styled into place */
    display:inline;}

.homeright
{
    width:160px;
    margin-left:20px;}

/* homepage side panels */

.box
{
    width:158px; /* need to deduct 2px for the width of the border, homeright is 160px wide */
    margin-bottom:10px;
    border-color:#C3C3C3;
    border-style:dashed;
    border-width:1px;}

.boxcontent
{
    position:relative;
    background-image:url('../images/graphics/box/corner.gif');
    background-position:top right;
    background-repeat:no-repeat;
    top:-1px; /* need to move the content area by 1,1 so that corner image overlaps the surrounding border */
    right:-1px;
    font-size:90%;
    padding:10px;}

/* 2-column css, 3-column clients css */

.left_two, .right_two
{
    overflow:hidden;
    display:inline-block;}

.left_two, .right_two
{
    float:left;
    width:340px;}

.right_two
{
    margin-left:20px;}

.left_clients, .middle_clients, .right_clients
{
    overflow:hidden;
    display:inline-block;}

.left_clients, .middle_clients, .right_clients
{
    float:left;}

.middle_clients, .right_clients
{
    margin-left:20px;}

.left_clients, .middle_clients
{
    width:250px;}

.right_clients
{
    width:160px;}

/* misc css */

.hr /* apply to div rather than using ugly <hr> tag */
{
    border-bottom:dashed 1px #C3C3C3;}

.leftalign
{
    text-align:left;}

.centeralign
{
    text-align:center;}

.rightalign
{
    text-align:right;}

.title, .text
{
    float:left;
    padding: 0.2em 0 1em 0;}

.top_spacer
{
    padding-top:1em;}

.bottom_spacer
{
    padding-bottom:1em;}

/* css for who_we_are page */

.pheader /* used for headings describing team members */
{
    font-weight:bold;}

/* css for portfolio pages */

.portfolio_title, .portfolio_text
{
    display:inline-block;
    overflow:hidden;}

.portfolio_title
{
    width:60px;
    font-weight:bold;}

.portfolio_text
{
    width:280px;
    font-weight:bold;}

.portfolioimage
{
    width:175px;
    height:196px;}

.thumb
{
    padding:3px;
    border-color:#C3C3C3;
    border-style:dashed;
    border-width:1px;
    width:43.5px; /* downsizes the actual image to fit in a smaller box, reducing need for thumbnail image */
    height:48px;}

/* css for testimonial page */

.testimonial_title, .testimonial_text
{
    display:inline-block;
    overflow:hidden;}

.testimonial_title
{
    width:100px;
    font-weight:bold;}

.testimonial_text
{
    width:600px;
    text-align:justify;}

/* css for sitemap page */

.sitemap
{
    margin-left:60px;
    padding:1em 0;}

/* form css */

.column_gap
{
    margin-left:20px; /* column spacing not carried into form */}

.buttons
{
    margin-left:0px;}

.label, .field
{
    margin-bottom:1em;}

.field
{
    overflow:auto; /* allows browsers to display scrollbars after applying overflow:hidden */}

.fieldwidth
{
    width:250px;}

.mandatory
{
    position:absolute;
    left:370px;}

/* copyright info etc */

#footer
{
    clear:both;
    text-align:center;
    font-size:xx-small;}

.freshlogo
{
    float:right;
    width:54px;
    height:27px;}

.w3cposition
{
    text-align:right;
    padding-top:5px;}
    
.w3clogo
{
    width:73px;
    height:26px;}

/* simple coloured banner css */

.banner
{
	width:740px;
	height:88px;
	margin-bottom:3px;}

.avocadobanner
{
	background-image:url("../images/banners/avocado.gif");}

.blueberrybanner
{
	background-image:url("../images/banners/blueberry.gif");}

.blackberrybanner
{
	background-image:url("../images/banners/blackberry.gif");}

.christmasbanner
{
	background-image:url("../images/banners/christmas.gif");}

.cranberrybanner
{
	background-image:url("../images/banners/cranberry.gif");}

.forestberrybanner
{
	background-image:url("../images/banners/forestberry.gif");}

.gooseberrybanner
{
	background-image:url("../images/banners/gooseberry.gif");}

.grapebanner
{
	background-image:url("../images/banners/grape.gif");}

.limebanner
{
	background-image:url("../images/banners/lime.gif");}

.new_yearbanner
{
	background-image:url("../images/banners/new_year.gif");}

.orangeberrybanner
{
	background-image:url("../images/banners/orangeberry.gif");}

.passionbanner
{
	background-image:url("../images/banners/passion.gif");}

.pearbanner
{
	background-image:url("../images/banners/pear.gif");}

.pinkberrybanner
{
	background-image:url("../images/banners/pinkberry.gif");}

.strawberrybanner
{
	background-image:url("../images/banners/strawberry.gif");}

.summerberrybanner
{
	background-image:url("../images/banners/summerberry.gif");}

/* top header image */

.headertext
{
    display:none;}

.header
{
    clear:right;
    width:740px;
    height:128px;}

.advertsheader
{
    background-image:url("../images/top_headers/adverts.jpg");}

.brief_formheader
{
    background-image:url("../images/top_headers/brief_form.jpg");}

.clientsheader
{
    background-image:url("../images/top_headers/clients.jpg");}

.contactheader
{
    background-image:url("../images/top_headers/contact.jpg");}

.christmasheader
{
    background-image:url("../images/top_headers/happy_christmas.jpg");}

.directionsheader
{
    background-image:url("../images/top_headers/directions.jpg");}

.exhibitionsheader
{
    background-image:url("../images/top_headers/exhibitions.jpg");}

.gamesheader
{
    background-image:url("../images/top_headers/games.jpg");}

.graphicheader
{
    background-image:url("../images/top_headers/graphic.jpg");}

.identityheader
{
    background-image:url("../images/top_headers/identity.jpg");}

.illustrationheader
{
    background-image:url("../images/top_headers/illustration.jpg");}

.literatureheader
{
    background-image:url("../images/top_headers/literature.jpg");}

.new_mediaheader
{
    background-image:url("../images/top_headers/new_media.jpg");}

.new_yearheader
{
    background-image:url("../images/top_headers/new_year.jpg");}

.newsheader
{
    background-image:url("../images/top_headers/news.jpg");}

.packagingheader
{
    background-image:url("../images/top_headers/packaging.jpg");}

.photographyheader
{
    background-image:url("../images/top_headers/photography.jpg");}

.registerheader
{
    background-image:url("../images/top_headers/register.jpg");}

.sitemapheader
{
    background-image:url("../images/top_headers/sitemap.jpg");}

.testimonialsheader
{
    background-image:url("../images/top_headers/testimonials.jpg");}

.websitesheader
{
    background-image:url("../images/top_headers/websites.jpg");}

.welcomeheader
{
    background-image:url("../images/top_headers/welcome.jpg");}

.your_teamheader
{
    background-image:url("../images/top_headers/your_team.jpg");}

/* various colours for text/headings including styling for links to follow the colour of the page */

.avocado, .avocadocontent h1, .avocadocontent h2, .avocadocontent h3, .avocadocontent h4, .avocadoactivelink a:link, .avocadoactivelink a:visited, .avocadoactivelink a:hover, .avocadocontent a:hover
{
    color:#0D9981;}

.blackberry, .blackberrycontent h1, .blackberrycontent h2, .blackberrycontent h3, .blackberrycontent h4, .blackberryactivelink a:link, .blackberryactivelink a:visited, .blackberryactivelink a:hover, .blackberrycontent a:hover
{
    color:#661882;}

.blueberry, .blueberrycontent h1, .blueberrycontent h2, .blueberrycontent h3, .blueberrycontent h4, .blueberryactivelink a:link, .blueberryactivelink a:visited, .blueberryactivelink a:hover, .blueberrycontent a:hover
{
    color:#5079A9;}

.cranberry, .cranberrycontent h1, .cranberrycontent h2, .cranberrycontent h3, .cranberrycontent h4, .cranberryactivelink a:link, .cranberryactivelink a:visited, .cranberryactivelink a:hover, .cranberrycontent a:hover
{
    color:#C8123C;}

.christmas, .christmascontent h1, .christmascontent h2, .christmascontent h3, .christmascontent h4, .christmasactivelink a:link, .christmasactivelink a:visited, .christmasactivelink a:hover, .christmascontent a:hover
{
    color:#C5110A;}

.forestberry, .forestberrycontent h1, .forestberrycontent h2, .forestberrycontent h3, .forestberrycontent h4, .forestberryactivelink a:link, .forestberryactivelink a:visited, .forestberryactivelink a:hover, .forestberrycontent a:hover
{
    color:#204596;}

.gooseberry, .gooseberrycontent h1, .gooseberrycontent h2, .gooseberrycontent h3, .gooseberrycontent h4, .gooseberryactivelink a:link, .gooseberryactivelink a:visited, .gooseberryactivelink a:hover, .gooseberrycontent a:hover
{
    color:#7EB925;}

.grape, .grapecontent h1, .grapecontent h2, .grapecontent h3, .grapecontent h4, .grapeactivelink a:link, .grapeactivelink a:visited, .grapeactivelink a:hover, .grapecontent a:hover
{
    color:#36ADC6;}

.lime, .limecontent h1, .limecontent h2, .limecontent h3, .limecontent h4, .limeactivelink a:link, .limeactivelink a:visited, .limeactivelink a:hover, .limecontent a:hover
{
    color:#7EB925;}

.new_year, .new_yearcontent h1, .new_yearcontent h2, .new_yearcontent h3, .new_yearcontent h4, .new_yearactivelink a:link, .new_yearactivelink a:visited, .new_yearactivelink a:hover, .new_yearcontent a:hover
{
    color:#4A2F0F;}

.orangeberry, .orangeberrycontent h1, .orangeberrycontent h2, .orangeberrycontent h3, .orangeberrycontent h4, .orangeberryactivelink a:link, .orangeberryactivelink a:visited, .orangeberryactivelink a:hover, .orangeberrycontent a:hover
{
    color:#FF7900;}

.passion, .passioncontent h1, .passioncontent h2, .passioncontent h3, .passioncontent h4, .passionactivelink a:link, .passionactivelink a:visited, .passionactivelink a:hover, .passioncontent a:hover
{
    color:#ED067A;}

.pear, .pearcontent h1, .pearcontent h2, .pearcontent h3, .pearcontent h4, .pearactivelink a:link, .pearactivelink a:visited, .pearactivelink a:hover, .pearcontent a:hover
{
    color:#109480;}

.pinkberry, .pinkberrycontent h1, .pinkberrycontent h2, .pinkberrycontent h3, .pinkberrycontent h4, .pinkberryactivelink a:link, .pinkberryactivelink a:visited, .pinkberryactivelink a:hover, .pinkberrycontent a:hover
{
    color:#EF037F;}

.strawberry, .strawberrycontent h1, .strawberrycontent h2, .strawberrycontent h3, .strawberrycontent h4, .strawberryactivelink a:link, .strawberryactivelink a:visited, .strawberryactivelink a:hover, .strawberrycontent a:hover
{
    color:#F61A11;}

.summerberry, .summerberrycontent h1, .summerberrycontent h2, .summerberrycontent h3, .summerberrycontent h4, .summerberryactivelink a:link, .summerberryactivelink a:visited, .summerberryactivelink a:hover, .summerberrycontent a:hover
{
    color:#189CC0;}

.grey
{
    color:#636363;}