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:#6D6F71;
    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 */
	position:relative;}

h1, h2, h3, h4, p, li, form
{
    color:#6D6F71;
    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:#6D6F71;}

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/fr_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/fr_top_right.gif");
    background-position: top right;
	background-repeat: no-repeat;}

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

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

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

#content
{
    padding:0px 10px 10px 10px;}

/* menu css */

#primarymenu
{
    background-color:#999999;
    width:740px;
    margin-bottom:3px;
	background-image:url("/images/graphics/menu/left_top.gif");
    background-position: top left;
	background-repeat: no-repeat;}

#loginpanelcontainer
{
/* padding of 3px at bottom as spacer between login panel and submenu, since margin-bottom on loginpanel got displayed even when loginpanel was hidden */
/*	position:relative;
	display:block;*/
    width:740px;
	padding:0px 0px 3px 0px;
/*	height:2em;*/
	overflow: hidden;
	z-index:3;
/*	height:0;*/
}

#loginpanel
{
/*    background-color:#6D6F71;*/
/*	display:block;*/
	background-color:#AEAEAE;
	background-image:url("/images/graphics/menu/left.gif");
    background-position: bottom left;
	background-repeat: no-repeat;}

#secondarymenu
{
    background-color:#C3C3C3;
    float:right;
    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;}

#secondarymenu, #nosecondarymenu
{
    margin-bottom:8px;}

.primarymenu, .secondarymenu, .loginitem
{
    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, .loginitem a:link, .loginitem a:visited, .loginpanel label
{
    text-decoration:none;
    color:#444444;}

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

#primarymenuitems, #secondarymenuitems, #loginmenuitems, .loginitem
{
    font-size:95%;
	min-height:1.5em;
    padding:0.3em 7px 0.3em 7px;}

#loginpanelitems
{
/*	position:relative;*/
	float:right;
}

.loginitem
{
/*	position:relative;*/
	width:auto;
	float:left;
}


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

#maincontent
{
    margin:30px 30px 0px 30px;}

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

.left_two, .right_two
{
    overflow:hidden;
    display:inline-block;
    float:left;
    width:325px;}

.right_two
{
    margin-left:30px;}

#menu_left_two, #menu_right_two
{
    overflow:hidden;
    display:inline-block;}

#menu_left_two
{
    float:left;}

#menu_right_two
{
    float:right;}

#menu_right_two
{
    margin-left:30px;}

.col1_4, .col2_4, .col3_4, .col4_4
{
    overflow:hidden;
    display:inline-block;
    float:left;
	width:155px;}

.col2_4, .col3_4, .col4_4
{
    margin-left:20px;}

/* misc css */

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

.clear
{
    clear:both;
}

.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:120px; /* downsizes the actual image to fit in a smaller box, reducing need for thumbnail image */
    height:132.5px;
    margin-left:4px;
    margin-right:4px;
}

#image_gallery
{
    text-align:center;
    margin-bottom:1.5em;
}

/* 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;}

#footer span
{
    padding:0px 0.5em 0px 0.5em;}

.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:98px;
	margin-bottom:3px;}

.welcomebanner
{
	background-image:url("/images/banners/welcome-banner.gif");}

.brandingbanner
{
	background-image:url("/images/banners/brand-identity-banner.gif");}

.identitybanner
{
	background-image:url("/images/banners/corporate-identity-banner.gif");}

.advertsbanner
{
	background-image:url("/images/banners/advertising-banner.gif");}

.exhibitionsbanner
{
	background-image:url("/images/banners/exhibitions-banner.gif");}

.literaturebanner
{
	background-image:url("/images/banners/literature-banner.gif");}

.photographybanner
{
	background-image:url("/images/banners/photography-banner.gif");}

.web_mediabanner
{
	background-image:url("/images/banners/webdesign-banner.gif");}

.clientsbanner
{
	background-image:url("/images/banners/clients-banner.gif");}

.contactbanner
{
	background-image:url("/images/banners/contact-banner.gif");}

.online_briefbanner
{
	background-image:url("/images/banners/online-brief-banner.gif");}

.testimonialsbanner
{
	background-image:url("/images/banners/testimonials-banner.gif");}

.newsbanner
{
	background-image:url("/images/banners/news-banner.gif");}

.registerbanner
{
	background-image:url("/images/banners/register-banner.gif");}

.sitemapbanner
{
	background-image:url("/images/banners/sitemap-banner.gif");}


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

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


/* top header image */

.headertext
{
    display:none;}

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

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

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

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

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

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

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

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

.web_mediaheader
{
    background-image:url("/images/top_headers/webdesign-header.jpg");}

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

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

.online_briefheader
{
    background-image:url("/images/top_headers/online-brief-header.jpg");}

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

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

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

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



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

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


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

.welcome, .welcomecontent h1, .welcomecontent h2, .welcomecontent h3, .welcomecontent h4, .welcomeactivelink a:link, .welcomeactivelink a:visited, .welcomeactivelink a:hover, .welcomecontent a:hover, a:hover.welcomelink 
{
    color:#ED7A23;}

.branding, .brandingcontent h1, .brandingcontent h2, .brandingcontent h3, .brandingcontent h4, .brandingactivelink a:link, .brandingactivelink a:visited, .brandingactivelink a:hover, .brandingcontent a:hover, a:hover.brandinglink
{
    color:#F0AF3E;}

.identity, .identitycontent h1, .identitycontent h2, .identitycontent h3, .identitycontent h4, .identityactivelink a:link, .identityactivelink a:visited, .identityactivelink a:hover, .identitycontent a:hover, a:hover.identitylink
{
    color:#673272;}

.adverts, .advertscontent h1, .advertscontent h2, .advertscontent h3, .advertscontent h4, .advertsactivelink a:link, .advertsactivelink a:visited, .advertsactivelink a:hover, .advertscontent a:hover, a:hover.advertslink
{
    color:#015341;}

.exhibitions, .exhibitionscontent h1, .exhibitionscontent h2, .exhibitionscontent h3, .exhibitionscontent h4, .exhibitionsactivelink a:link, .exhibitionsactivelink a:visited, .exhibitionsactivelink a:hover, .exhibitionscontent a:hover, a:hover.exhibitionslink
{
    color:#00AEEF;}

.literature, .literaturecontent h1, .literaturecontent h2, .literaturecontent h3, .literaturecontent h4, .literatureactivelink a:link, .literatureactivelink a:visited, .literatureactivelink a:hover, .literaturecontent a:hover, a:hover.literaturelink
{
    color:#5A7298;}

.photography, .photographycontent h1, .photographycontent h2, .photographycontent h3, .photographycontent h4, .photographyactivelink a:link, .photographyactivelink a:visited, .photographyactivelink a:hover, .photographycontent a:hover, a:hover.photographylink
{
    color:#EC519D;}

.web_media, .web_mediacontent h1, .web_mediacontent h2, .web_mediacontent h3, .web_mediacontent h4, .web_mediaactivelink a:link, .web_mediaactivelink a:visited, .web_mediaactivelink a:hover, .web_mediacontent a:hover, a:hover.web_medialink
{
    color:#D42027;}

.clients, .clientscontent h1, .clientscontent h2, .clientscontent h3, .clientscontent h4, .clientsactivelink a:link, .clientsactivelink a:visited, .clientsactivelink a:hover, .clientscontent a:hover, a:hover.clientslink
{
    color:#6D52A1;}

.contact, .contactcontent h1, .contactcontent h2, .contactcontent h3, .contactcontent h4, .contactactivelink a:link, .contactactivelink a:visited, .contactactivelink a:hover, .contactcontent a:hover, a:hover.contactlink
{
    color:#578E95;}

.online_brief, .online_briefcontent h1, .online_briefcontent h2, .online_briefcontent h3, .online_briefcontent h4, .online_briefactivelink a:link, .online_briefactivelink a:visited, .online_briefactivelink a:hover, .online_briefcontent a:hover, a:hover.online_brieflink
{
    color:#92C744;}

.testimonials, .testimonialscontent h1, .testimonialscontent h2, .testimonialscontent h3, .testimonialscontent h4, .testimonialsactivelink a:link, .testimonialsactivelink a:visited, .testimonialsactivelink a:hover, .testimonialscontent a:hover, a:hover.testimonialslink
{
    color:#177BBF;}

.news, .newscontent h1, .newscontent h2, .newscontent h3, .newscontent h4, .newsactivelink a:link, .newsactivelink a:visited, .newsactivelink a:hover, .newscontent a:hover, a:hover.newslink
{
    color:#1B3F72;}

.register, .registercontent h1, .registercontent h2, .registercontent h3, .registercontent h4, .registeractivelink a:link, .registeractivelink a:visited, .registeractivelink a:hover, .registercontent a:hover, a:hover.registerlink
{
    color:#00ACA2;}

.sitemap, .sitemapcontent h1, .sitemapcontent h2, .sitemapcontent h3, .sitemapcontent h4, .sitemapactivelink a:link, .sitemapactivelink a:visited, .sitemapactivelink a:hover, .sitemapcontent a:hover, a:hover.sitemaplink
{
    color:#FDE900;}


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

.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, a:hover.new_yearlink
{
    color:#4A2F0F;}


.grey
{
    color:#6D6F71;}