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:#CCCCCC;
    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, .bullettext
{
    color:#999999;
    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
{
    margin-left:15px;}

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

a:hover
{
	text-decoration: underline;}

img
{
    border:0px;}

input
{
    }

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

/* overall screen css */

/* pale grey surrounding css */

#full
{
    position:relative; /* enables absolute positioning (of mandatory *) to reference from this element*/
    padding-bottom:10px;
    padding-top:10px;
    max-width:740px; /* required to centralise page in all browsers */
    width:740px; /* 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 */}

/* dark grey area with set width */

#page
{
    background-color:#666666;
    width:100%;}

/* coloured page banner */

.banner
{
	width:740px;
	height:115px;}

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

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

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

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

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

.banner_heading
{
    display:none;}

/* menu css */

.menuitem
{
    text-align:right;
    font-size:97%;
    list-style-type:none;
    list-style-image:none;
    margin-right:15px;
    margin-left:0px;
    padding-top:0.4em;
    padding-bottom:0.4em;}

.menuitem a
{
    color:#999999;
    text-decoration:none;}

.welcome a.selected, .welcome a.unselected:hover, .main_content a:hover.welcomelink, .main_content .welcomeheading
{
    color:#F0037F;}

.services a.selected, .services a.unselected:hover, .main_content a:hover.serviceslink, .main_content .servicesheading, .main_content .servicesbullet
{
    color:#FF7800;}

.packaging a.selected, .packaging a.unselected:hover, .main_content a:hover.packaginglink, .main_content .packagingheading, .main_content .portfolio_title
{
    color:#00A0C6;}

.online_brief a.selected, .online_brief a.unselected:hover, .main_content a:hover.online_brieflink, .main_content .online_briefheading, .online_brieflabel
{
    color:#7FBC23;}

.contact a.selected, .contact a.unselected:hover, .main_content a:hover.contactlink, .main_content .contactheading, .contactlabel
{
    color:#E50000;}

.menudivider
{
    border-bottom-style:solid;
    border-bottom-color:#CCCCCC;
    border-bottom-width:1px;}

/* content area */

#page_inner
{
    margin-top:25px;
    overflow:hidden; /* in case an element in a container is/gets "too large", the element would stick outside of the container */
    display:block;
    background-image:url("../images/graphics/misc/pharma_barcode.jpg");
    background-position: bottom right;
	background-repeat: no-repeat;}

#page_body
{
    background-image:url("../images/graphics/misc/pharma_side_tabs.jpg");
    background-position: bottom left;
	background-repeat: no-repeat;}

#menu
{
    float:left;
    width:130px;
    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 */}

#mainarea
{
    float:left;
    width:610px;
    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 */}

/* white content area */
    
#content
{
    width:560px;
    background-color:#FFFFFF;}

.contenttopleft
{
    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;}

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

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

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

/* content header image */

.header
{
    width:540px;
    height:93px;
    margin:0px 10px 0px 0px; /* IE wouldn't display bottom content grey curves until 10px gap was divided up between header and main content */}

.welcome_header
{
    background-image:url("../images/headers/welcome_header1.jpg");}

.services_header
{
    background-image:url("../images/headers/services_header1.jpg");}

.packaging_header
{
    background-image:url("../images/headers/packaging_header1.jpg");}

.online_brief_header
{
    background-image:url("../images/headers/online_brief_header1.jpg");}

.contact_header
{
    background-image:url("../images/headers/contact_header1.jpg");}

/* main content css */

.main_content
{
    padding:10px 0px 0px 10px; /* left 10px applied to content_cols instead otherwise IE made the white area 10px wider on right */
    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 */}

.content_cols
{
    width:500px;
    padding:20px 30px 2em 20px;
    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 */}

/* single column */

.welcome_col
{
    padding-left:260px; /* padding used so that background image can be displayed bottom right of content area*/}

.single_col
{
    margin-left:260px;
    width:240px;}

/* 2-column css */

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

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

.right_two
{
    margin-left:20px;}

/* misc css */

.leftalign
{
    text-align:left;}

.centeralign
{
    text-align:center;}

.rightalign
{
    text-align:right;}

.welcomeimage
{
    background-image:url("../images/home/left_bg.jpg");
    background-position: bottom left;
	background-repeat: no-repeat;}

.servicesbackground
{   background-image:url("../images/services/carton.gif");
    background-position: bottom left;
	background-repeat: no-repeat;}

.grey
{
    color:#636363;}

/* css for portfolio pages */

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

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

.bottom_spacer
{
    padding-bottom:1em;}

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

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

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

.portfolioimage
{
    width:220px;
    height:220px;
/*    height:196px; */}

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

/* form css */

.buttons
{
    margin-left:0px; /* margin zero not transferred through to buttons so div applied and set to zero */}

.label, .field
{
    margin-bottom:1em; /* space form fields out vertically */}

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

.fieldwidth
{
    width:200px; /* input box width */}

.mandatory
{
    position:absolute; /* using position relative instead would leave a gap where the * was moved from */
    left:400px;}

/* copyright info etc */

.pagefooter
{
    text-align:center;
    font-size:xx-small;
    padding-left:140px;
    padding-right:60px;}

.w3c
{
    
    max-height:26px;}

.w3c
{
    list-style:none;
    padding-left:5px;
    padding-top:5px;
    padding-bottom:5px;
    float:right;}

.w3c a
{
    height:26px;
    width:73px;}
    
.w3clogo
{
    width:73px;
    height:26px;}