/* ===================================================================================================================
   * Second style sheet imported into screen.css.
   * Author: otti@ottimoto.com.au
   * Autor URL: http://www.ottimoto.com.au
   =================================================================================================================== */

/* ===================================================================================================================
Title: HTML5 Master styles - design dependent
   =================================================================================================================== */

/* Fonts
====================================================================================================================== */

/* TTF = Screen, EOT = IE5-8, WOFF = IE9, FF3.6, Chrome 5, SVG = IOS. */
/* Create font-face declarations that defines the embedded font name and source file. 
Creates arbitrary name for the font and associates it with the a direct link to the font itself. 
Eot for older IE versions, will ignore the ☺ local rule and the comma separated list and use only eot.
☺ separates from IE before other declarations. Non IE browsers in comma separated list. */
@font-face 
{
	font-family: 'NimbusSanD-Reg';
	src: url('../fonts/23F671_0_0.eot'); /* IE6–8 */
	src: url('../fonts/23F671_0_0.eot?#iefix') format('embedded-opentype'),
	url('../fonts/23F671_0_0.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Safari5.1+ */
	url('../fonts/23F671_0_0.ttf') format('truetype');
}

@font-face 
{
	font-family: 'NimbusSanD-Bol';
	src: url('../fonts/23F671_1_0.eot'); /* IE6–8 */
	src: url('../fonts/23F671_1_0.eot?#iefix') format('embedded-opentype'),
	url('../fonts/23F671_1_0.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Safari5.1+ */
	url('../fonts/23F671_1_0.ttf') format('truetype'); /* Safari3—5, Chrome4+, FF3.5, Opera 10+ */
}

@font-face 
{
	font-family: 'NimbusSanD-Light';
	src: url('../fonts/242462_0_0.eot'); /* IE6–8 */
	src: url('../fonts/242462_0_0.eot?#iefix') format('embedded-opentype'),
	url('../fonts/242462_0_0.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Safari5.1+ */
	url('../fonts/242462_0_0.ttf') format('truetype'); /* Safari3—5, Chrome4+, FF3.5, Opera 10+ */
}

/* Apply new font to certain definitions: body, button etc as NimbusSanD-Reg to have a general base for the whole website. */
/* Fallback to font declarations made in body above. */
#smallagency span, #navcontainer_sec span.navBold, h4.contactHead, p input#submitButton, .home .bigIdeasHome, .home p.whatsNew
{
	font-family: 'NimbusSanD-Bol', Helvetica, Arial, sans-serif;
	font-weight: normal;
}

/* Nimbus Bold is too bold on the web for heading. Use Regular instead and size accordingly later with normal h1 etc declarations. */
h1.head1, h2.head2, h3.head3, h4.head4, .portfoliosub section#sect2 ul.hover_block li a
{
	font-family: 'NimbusSanD-Reg', Helvetica, Arial, sans-serif;
	font-weight: normal;
}

/* Nimbus Light for home page only: small agency and phone number.*/
p.smallAgencyHome, p.phoneHome, #menubar a
{
	font-family: 'NimbusSanD-Light', Helvetica, Arial, sans-serif;
	font-weight: normal;
} 

   
/* Base
====================================================================================================================== */
 
/* Set bg colour to white. Place gradient image on repeat to extend the left and right css gradient inside header. */
body 
{
	background-color: #FFFFFF; /* White */
	background-image: url(../img/campaign-focus-bg-gradient-short.jpg);
	background-repeat: repeat-x;
}

/* Set fonts to NimbusSanD-Reg before fallback to sans-serif -> overwrites reset (sans-serif only). Font size down to 90% (from reset 100%).
Set the default text color to be standard grey (darker grey). */
body, button, input, select, textarea 
{ 
	font-family: 'NimbusSanD-Reg', Helvetica, Arial, sans-serif;
	font-size: 90%;
	color: #757D81; /* Standard grey for text for text and headings -> different grey for portfolio pages. */
}

/* Apply gradient bg to home page only. */
body.home
{
	background-image: url(../img/CFweb-black-bg-2px-LONG-NEW.jpg);
	background-repeat: repeat-x;
}

/* General horizontal rule. Display block. Set height and border top (same). Margin top and bottom. No padding. Set colour (standard grey). */
hr 
{ 
	display: block; 
	height: 1px; 
	border: 0; 
	color: #757D81; /* Standard grey for text for text and headings -> different grey for portfolio pages. */
	margin: 1em 0; 
	padding: 0; 
}


/* Typography generic
====================================================================================================================== */

/* Standard paragraph. Set colour for text or leave inherited from body declaration above. Line-Height for leading. */
p 
{
	color: inherit;
	line-height: 145%;
	padding-bottom: 10px;
}

/* All heading colours to be standard grey. Portfolio headings to have darker grey (see declaration further down). */
h1, h2, h3, h4
{
	color: #757D81; /* Standard grey for text -> will be different grey for portfolio pages. */
}
/* Sizes for headings. Also padding, if required. */
h1
{
	font-size: 140%;
	padding-top: 12px;
	padding-bottom: 10px;
}
/* Only for home page the heading needs to start further down due to the deletion of the breadcrumbs. */
.home p.tophead
{
	padding-top: 18px;
}
h2 
{
	font-size: 120%;
	padding-top: 10px;
	padding-bottom: 10px;
}
h3 
{
	font-size: 120%;
	padding-bottom: 10px;
}
h4
{
	font-size: 100%;
}


/* PORTFOLIO PAGES & HOME PAGE: Text, breadcrumbs & heading colours */
/* ----------------------------------------------------------- */
/* Portfolio pages and home page to have different/lighter grey for heading and white instead of grey for text colour. */
.portfolio p, .home p
{
	color: #FFFFFF;
}
.portfolio p#breadcrumbs, .home p#breadcrumbs
{
	color: #A1A9B1; /* lighter grey */
}
.portfolio h1, .portfolio h2, .portfolio h3, .portfolio h4,
.home h1, .home h2, .home h3, .home h4
{
	color: #A1A9B1; /* lighter grey */
}



/* ===================================================================================================================
   Links
   =================================================================================================================== */

/* Declaring the default link and visited link colours ensures that they are applied in IE6/7.
No underline. Also background colour to be inherited. Then set colour for all link states. LVHA. */
a 
{ 
	color: #B2D235; /* GREEN */
	text-decoration: none;
	background-color: inherit;
}

/* Visited links to be Green. */
a:visited 
{ 
	color: #B2D235; /* GREEN */
}

/* Hover links to be Green. */
a:hover 
{
	color: #D1E486; /* 60% GREEN */
}

/* Active links to be Green. */
a:active
{
	color: #D1E486; /* 60% GREEN */
}

/* Improve readability when focused and hovered in all browsers: h5bp.com/h - The outline is shown only if the link gains keyboard focus. */
a:hover, a:active 
{
	 outline: 0;
}

/* PORTFOLIO PAGES & HOME PAGE AND PORTFOLIO SUBPAGES: Links */
/* ----------------------------------------------------------- */
.portfolio a, .portfoliosub a, .home a
{ 
	color: #B2D235; /* CF Green */
}

/* Visited links to be Blue. */
.portfolio a:visited, .portfoliosub a:visited, .home a:visited
{ 
	color: #B2D235; /* CF Green */
}

/* Hover links to be New Dark Blue. */
.portfolio a:hover, .portfoliosub a:hover, .home a:hover
{ 
	color: #D1E486; /* New green tint. */
}

/* Active links to be New Dark Blue. */
.portfolio a:active, .portfoliosub a:active, .homeo a:active
{
	color: #D1E486; /* New green tint */
}



/* Boxes (Round Corners etc)
====================================================================================================================== */

/* Not required for this website */


/* Notice when JavaScript is off
====================================================================================================================== */
/* Paragraph with id in HTML. If JS is on -> do not display. If JS is off -> Modernizr adds .no-js class to html tag -> display text. */
.js #jsnotice 
{ 
	display: none; 
}
/* Green border around box with red text. Font to be Courier to stand out. */
.no-js #jsnotice 
{
	font-family: Courier, sans-serif;
	display: block;
	color: #F20; /* Red */
	background-color: #FFFFFF; /* White */
	padding: 5px;
	border: 2px #C8E678 solid;
}


/* Page Header
====================================================================================================================== */

/* Set height for header. */
/* Set bg colour as fallback to inherit -> Therefore make sure no bg colour for wrapper!
IE 9 shows through the body bg image since there is no fallback colour given (inherited) -> Tested in iE8 and IE9. 
The filter thing definitely does the trick for IE8 and IE9. */
#header
{
	height: 80px;
	background-color: rgb(0, 0, 0); /* BLACK. */
}


/* Navigation Main
====================================================================================================================== */

/* Navigation container. Set width and height. */
nav 
{
	width: 960px;
	height: 80px;	
}

/* MENUBAR is the root unordered list and menubar ul applies to all the sub-menu ul's.
Zero down padding and margins. Turn bullet points off. Do not add a font-size here. 
z-index higher then highest z-index inside Nivo Slider to have submenu above slider. */
#menubar, #menubar ul 
{
	padding: 0;
	margin: 0;
	list-style: none;
	z-index: 10;
}

/* All MENUBAR links (a). Display block to get links to behave like buttons. Set height and width (minus padding) of each link. 
No underline. Align text to the right and move in from right by 15px. Use line-height to move single line of text down. */
#menubar a 
{
	display: block;
	height: 76px; /* Less here to allow for 2px border bottom. */
	width: 145px;
	text-decoration: none;
	text-align: right;
	padding-right: 15px;
	line-height: 120px;
}

/* Ie6 requires inline-block instead of block for display. Less width to display all in one row due to IE bug. */
.ie6.oldie #menubar a
{
	display: inline-block;
	width: 130px;
	height: 40px;
	line-height: 40px;
}

/* First link (logo) to homepage with normal line-height. */
#menubar #home a 
{
	line-height: normal;
}

/* Each link in MENUBAR with a submenu (only Products for this website) needs trigger class assigned. 
Same height as normal nav items. Same padding (must) as menubar links. */
#menubar a.trigger
{
	height: 76px; /* Less here to allow for 2px border bottom. */
	width: 145px;
	padding-right: 15px;
}

/* Font size for main navigation items to be larger (145% of 90% of 100%).
Then the font size for submenu items to be smaller (120% of 90% of 100%). */
#menubar li a
{
	font-size: 145%;
}
#menubar li li a
{
	font-size: 120%;
}

/* List items in MENUBAR. Float left for horizontal display. Set width for IE5 Mac. 
See last rule in Navigation CSS -> sets width to auto for all other browsers 
(hides it from IE5 Mac). The width is proportional.
As you add and edit root menu items, you will need to test this width
to ensure it is wide enough to accomodate all text. */
#menubar li
{
	float: left;
	width: 160px;
}

/* Each main menu section to have a different text colour (same colour to be used later for hover effect with white text). */
#menubar li#about a, #menubar li#services a, #menubar li#portfolio a, #menubar li#pixelfocus a
{
	color: rgb(255, 255, 255); /* WHITE. */
	border-bottom: 4px solid rgb(0, 0, 0); /* Black in preparation for different colour later on hover. */
}
#menubar li#contact a
{
	color: #A1A9B1;
	border-bottom: 4px solid rgb(0, 0, 0); /* Black in preparation for different colour later on hover. */
}
/* OLD COLOURS. 
#menubar li#services a
{
	color: #53C2B6;
}
#menubar li#portfolio a
{
	color: #B2D235;
}
#menubar li#pixelfocus a
{
	color: #00B4C8;
}
*/

/* Set width for SUB-MENU box and the SUB-MENU list items inside. -> also considering padding right. */
#menubar li ul, #menubar ul li  
{
	width: 145px;
}

/* SUB-MENU links. Set width again (minus padding right from earlier link declaration). 
Change height and line-height for submenu items (about us only). */
#menubar ul li a 
{ 
	width: 145px;
	height: 40px;
	line-height: 40px;
}

/* SUB-MENU unordered lists describes each dropdown SUB-MENU group. 
Positioned absolute to appear below their root trigger.
Set to display none to hide them until trigger is moused over.
(According to manual the background color [here FFFFFF] must be set or problems will be 
encountered in MSIE -> did not happen -> no background colour set) */
#menubar li ul
{
	position: absolute;
	display: none;
}

/* Changes the text colour to white and the background color to appropriate colour when the Root-Level
MENUBAR items are moused over. The second selector sets color and background
when Root-Level MENUBAR items are accessed with the keyboard tab key. The third
selector sets an active state to support keyboard access in MSIE. The fourth 
selector is assigned to IE5 and IE6 Windows via the javascript.
Note that IE7 supports hover on elements other than links and so behaves
like Firefox, Opera, and Safari - making the menu operable even if JavaScript
is not enabled.  */
#menubar li#about:hover a, #menubar #about a:focus,
#menubar #about a:active, #menubar li#about.hvr a
{
	color: #FFFFFF;
	border-bottom: 4px solid #C8E678;
}
#menubar li#services:hover a, #menubar #services a:focus,
#menubar #services a:active, #menubar li#services.hvr a
{
	color: #FFFFFF;
	border-bottom: 4px solid #53C2B6;
}
#menubar li#portfolio:hover a, #menubar #portfolio a:focus,
#menubar #portfolio a:active, #menubar li#portfolio.hvr a
{
	color: #FFFFFF;
	border-bottom: 4px solid #B2D235;
}
#menubar li#pixelfocus:hover a, #menubar #pixelfocus a:focus,
#menubar #pixelfocus a:active, #menubar li#pixelfocus.hvr a
{
	color: #FFFFFF;
	border-bottom: 4px solid #00B4C8;
}
#menubar li#contact:hover a, #menubar #contact a:focus,
#menubar #contact a:active, #menubar li#contact.hvr a
{
	color: #FFFFFF;
	border-bottom: 4px solid #A1A9B1;
}

/* Set the SUB-MENU unordered list to be visible when its associated Root-Level MENUBAR link is moused over. 
The second selector is assigned to IE5 and IE6 via the javascript. Display block to show dropdown menu. */
#menubar li:hover ul, #menubar li.hvr ul
{
	display: block;
}

/* Set text color to white again of the SUBMENU links when the root-level
MENUBAR items are moused over (to be done next with link, since top level was assigned to link as well). 
The second selector is assigned to IE5 and IE6 via javascript. The color set should match the normal Sub-Level link color
in the rule: #menubar ul li a. Set green fallback colour for bg. Align text to right. Border bottom. */
#menubar li:hover ul a, #menubar li.hvr ul a 
{
	/*color: #FFFFFF;  not really required */
	/* background-color: #B2D235;  not really required */
	text-align: right;
	border-top: 1px #FFFFFF solid;
	border-bottom: 0px; /* Remove border bottom for dropdown items 3x. */
}
/* This is required due to the assignment of the bg colour of the main nav link earlier. 
It changes the dropdown menu bg to green when top level is hovered over. */
#menubar li#about:hover ul a
{
	background-color: #B2D235; /* Green. */
	border-bottom: 0px; /* Remove border bottom for dropdown items 3x. */
}
#menubar li#portfolio:hover ul a
{
	background-color: #94B417; /* New dark green */
	border-bottom: 0px; /* Remove border bottom for dropdown items 3x. */
}

/* The normal hover class for SUB-MENU Sub-Level links. The Important directive is required for older browsers. 
For submenu hover and active: Text color set to white and background color to tint of green or tint of blue respectively. */
/* #menubar ul li a:hover */
#menubar li#about ul a:hover
{
	background-color: #C1DB5D!important; /* 80% Green. */
	color: #FFFFFF!important; /* White */
}
#menubar li#about ul a:active
{
	background-color: #C1DB5D; /* 80% Green. */
}
#menubar li#portfolio ul a:hover
{
	background-color: #B9CE67 !important; /* New dark green tint 65%. */
	color: #FFFFFF !important; /* White */
}
#menubar li#portfolio ul a:active
{
	background-color: #B9CE67; /* New dark green tint 65%. */
}


/* The single backslash \ character inside this comment
causes IE5 Mac to ignore the following rule, which allows other
browsers to render top-level menu items to their natural width.
Do not edit this rule in any way. */
#menubar li 
{
	width: auto;
}

/* Highlight current section in main top navigation. */
.about #menubar li#about a, .why #menubar li#about a
{
	color: #FFFFFF;
	border-bottom: 4px solid #C8E678;
}
.services #menubar li#services a
{
	color: #FFFFFF;
	border-bottom: 4px solid #53C2B6;
}
.portfolio #menubar li#portfolio a, .branding #menubar li#portfolio a, .print #menubar li#portfolio a,
.web #menubar li#portfolio a, .television #menubar li#portfolio a
{
	color: #FFFFFF;
	border-bottom: 4px solid #B2D235;
}
.pixelfocus #menubar li#pixelfocus a
{
	color: #FFFFFF;
	border-bottom: 4px solid #00B4C8;
}
.contact #menubar li#contact a
{
	color: #FFFFFF;
	border-bottom: 4px solid #A1A9B1;
}



/* Wrapper
====================================================================================================================== */

/* Order important for search engines. Calculations: 
160px (aside) + 800px (primary) = 960px */

/* Main wrapper with centres the whole page with set width. 
No background colour or image to allow body bg gradient image to shine through, if gradient setup of header (incl IE's) fails. */
#wrapper 
{
	width: 960px;
	margin: 0 auto;
}


/* PrimaryContent (right column)
====================================================================================================================== */

/* Two main columns, named in order of importance and display when styles switched off.
Firstly display:inline is required for IE6 for correct column display. */
#primaryContent 
{
	float: left;
	width: 960px;
	display: inline;
}

/* Specifying twoColLayout in the body will activate the following div 
instead of the default primaryContent -> not IE 5.5 + 6. 
Float right, set width to 800px. */
#twoColLayout #primaryContent
{
	float: right;
	width: 800px;
}

/* Specifying oneColLayout in the body will activate the following div 
instead of the default primaryContent -> not IE 5.5 + 6.
Float left, set width to 960px. */
#oneColLayout #primaryContent
{
	float: left;
	width: 960px;
}

/* Home page including slider for animation */
/* ----------------------------------------------------------- */
#slider
{
	position: relative;
	width: 800px; /* Change this to your images width */
	height: 390px; /* Change this to your images height */
	background-image: url(../img/loading.gif);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
#slider215
{
	position: relative;
	width: 800px; /* Change this to your images width */
	height: 215px; /* Change this to your images height */
	background-image: url(../img/loading.gif);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
#sliderhome
{
	position: relative;
	width: 960px; /* Change this to your images width */
	height: 390px; /* Change this to your images height */
	background-image: url(../img/loading.gif);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

#slider img, #slider215 img, #sliderhome img
{
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
}
#slider a, #slider215 a, #sliderhome a
{
	border:0;
	display:block;
}


/* HOME PAGE STYLES */
/* ----------------------------------------------------------- */

/* Home page: Two columns with different width as services pages etc. */
/* ----------------------------------------------------------- */

/* */
#oneColLayout.home section#sect2
{
	min-height: 790px;
}

/*  Also used on Contact page if listing only without form. Float accordingly and set width. */
.servicesColHome1
{
	float: left;
	width: 426px;
}
.widerBox
{
	width: 850px;
}
.servicesColHome2
{
	float: right;
	width: 426px;
}

/* Link colour to be CF green instead of Portfolio for text under HP buttons. Alos for visited and active. */
.servicesColHome1 a, .servicesColHome2 a, .servicesColHome1 a:visited, .servicesColHome2 a:visited, .servicesColHome1 a:active, .servicesColHome2 a:active
{
	color: #B2D235; 
}
/* Hover links in tint of CF green. */
.servicesColHome1 a:hover, .servicesColHome2 a:hover
{
	color: #D1E486; /* 60% CF GREEN */
}


p.smallAgencyHome
{
	font-size: 300%;
	line-height: 100%;
	padding-top: 50px;
}
p.whatsNew
{
	font-size: 300%;
	line-height: 100%;
}
p.phoneHome
{
	color: #B2D235; /* CF GREEN */
	font-size: 180%;
	padding-top: 100px;
	text-align: right;
}


/* Green line of text. */
.home .homeGreenSmall
{
	color: #B2D235; /* GREEN */
}

/* Same as per portfolio rollover buttons, just with different sizes. Also changed animation height in HTML script at the bottom. 
Remove the bullet points and the padding left and bottom from lists declared earlier.
Float list items left and set width. Position relative for img position later absolute. Margin left except last in row (next declaration ). Margin bottom for Text underneath. */
.home section#sect2 ul.hover_block li
{
	background-image: none;
	padding-left: 0px;
	padding-bottom: 0px;
	
	float: left;
	width: 426px;
	position: relative;
	margin-right: 36px;
	margin-bottom: 10px;
}
.home section#sect2 ul.hover_block li.rowThird
{
	margin-right: 0px;
}

/* The links inside the list. Display block for buttons. Absolute positioned inside relative container and display as block. Overflow hidden. Set height and width. 
Green bg colour and white text. Center text. Set font size to same as h1. Line-height for single line text combined with height. Font defined on top of CSS as Nimbus. */
.home section#sect2 ul.hover_block li a 
{
	position: relative;
	overflow: hidden; /* The overflow is clipped, and the rest of the content will be invisible. */
	height: 208px;
	width: 426px;
	background-color: #B2D235; /* CF Green */
	color: #FFFFFF;
	text-align: center;
	font-size: 140%;
	line-height: 208px;
	display: block;
}

/* For multi-line text apply break in html and a span around both lines. Normal line height and display inline-block (except older FF). Align vertically in the middle.*/
.home section#sect2 ul.hover_block li a span
{
	display             : -moz-inline-box;  /* FF2 or lower */
    display             : inline-block;     /* FF3, Opera, Safari */
    line-height         : normal;
    vertical-align      : middle; 
}
/* No underline for links. */
.home section#sect2 ul.hover_block li a 
{ 
	text-decoration: none; 
}
/* The image to be positioned absolute. */
.home section#sect2 ul.hover_block li img 
{
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
}

/* Missing 404 page. */
.missing section#sect2
{
	padding-top: 40px;
}
.missing section#sect2 h1
{
	padding-top: 0;
}


/* PORTFOLIO PAGES: Main background black */
/* ----------------------------------------------------------- */
/* Black bg for Portfolio pages main content. */
#twoColLayout.portfolio section#sect1, #twoColLayout.portfolio section#sect2
{
	background-color: #000000;
}

/* All television campaign pages to extend the black background down to a minimum height, so they have at least the height of the tertiary navigation. More height for print campaign pages. */
#twoColLayout.tvccampaign section#sect2
{
	min-height: 370px;
}
#twoColLayout.printcampaign section#sect2
{
	min-height: 470px;
}
/* The ones with the moved tv campaigns don't need minimum height. */
#twoColLayout.printcampaign.cevue section#sect2, #twoColLayout.printcampaign.ocean section#sect2, #twoColLayout.printcampaign.onebrighton section#sect2,
#twoColLayout.printcampaign.pelago section#sect2, #twoColLayout.printcampaign.spring section#sect2, #twoColLayout.printcampaign.stmarks section#sect2
{
	min-height: 0;
}

/* Very first section for images/image sliders. Position relative to allow absolute position of controlNav of image slider in slider css. */
section#sect0
{
	position: relative;
}

/* First section for all other pages. */
section#sect1
{
	padding-left: 36px;
	padding-right: 36px;
}

/* First section for pages with 390px high images only: Top border for section one in light green, just below the large image. */
.three-ninety section#sect1 
{
	border-top: 2px #C8E678 solid;
	padding-left: 36px;
	padding-right: 36px;
}

/* Breadcrumbs with small padding top. No font-size change (same size as body). */
p#breadcrumbs
{
	padding-top: 7px;
}
/* Breadcrumbs on Portfolio subpages to float left to allow for tabbed navigation to flow right. */
.portfoliosub p#breadcrumbs
{
	float: left;
}

/* Breadcrumbs on Portfolio sub pages (no image or slider) to line up with left navigation. */
.branding p#breadcrumbs, .print p#breadcrumbs, .web p#breadcrumbs, .television p#breadcrumbs
{
	padding-top: 40px;
}

/* Second section for main content. Also padding left and right as first section. */
section#sect2, section#sect3
{
	padding-left: 36px;
	padding-right: 36px;
}

/* Unordered list inside main content. Set base margin top and padding left to 0. No bullet points. Reduce margin bottom from 1em to 0.5em. */
section#sect2 ul, section#sect3 ul
{
	margin-top: 0em;
	padding-left: 0px;
	list-style: none;
	margin-bottom: 0.5em;
}
/* The the list items with bg image as square bullet. Set padding etc correctly. */
section#sect2 ul li, section#sect3 ul li 
{
	background-image: url(../img/campaign-focus-bullet.gif);
	background-repeat: no-repeat;
	background-position: left 4px;
	padding-left: 15px;
	padding-bottom: 7px;
}

/* Section 4 sect4 without any padding - no declaration here. */
#sect4, #sect5
{
	border-top: 2px #C8E678 solid;
}


/* PORTFOLIO SUBPAGES: Rollover buttons (hover block). */
/* ----------------------------------------------------------- */
/* Light grey bg for Portfolio subpages main content. */
#twoColLayout.portfoliosub section#sect1, #twoColLayout.portfoliosub section#sect2, #twoColLayout.portfoliosub section#sect3
{
	background-color: #F1F1F2;
}

/* First and Second section for main content on portfolio subpages -> less padding left and right. */
#twoColLayout.portfoliosub section#sect1, #twoColLayout.portfoliosub section#sect2 
{
	padding-left: 20px;
	padding-right: 20px;
}
/* DO NOT move heading back again -> leave at smaller padding distance for that page. */
#twoColLayout.portfoliosub section#sect2 h1
{
	padding-left: 0px;
	padding-right: 0px;
}

/* Remove the bullet points and the padding left and bottom from lists declared earlier.
Float list items left and set width. Position relative for img position later absolute. Margin left except last in row (next declaration ). Margin bottom for distance to next row. */
.portfoliosub section#sect2 ul.hover_block li
{
	background-image: none;
	padding-left: 0px;
	padding-bottom: 0px;
	
	float: left;
	width: 240px;
	position: relative;
	margin-right: 20px;
	margin-bottom: 20px;
}
.portfoliosub section#sect2 ul.hover_block li.rowThird
{
	margin-right: 0px;
}

/* The links inside the list. Display block for buttons. Absolute positioned inside relative container and display as block. Overflow hidden. Set height and width. 
Green bg colour and white text. Center text. Set font size to same as h1. Line-height for single line text combined with height. Font defined on top of CSS as Nimbus. */
.portfoliosub section#sect2 ul.hover_block li a 
{
	position: relative;
	overflow: hidden; /* The overflow is clipped, and the rest of the content will be invisible. */
	height: 185px;
	width: 240px;
	background-color: #B2D235; /* CF Green */
	color: #FFFFFF;
	text-align: center;
	font-size: 140%;
	line-height: 185px;
	display: block;
}
/* For buttons without rollover get cass assigned to image and also set position relative and width/height. */
.portfoliosub section#sect2 ul.hover_block li img.noRollover
{
	position: relative;
	overflow: hidden; /* The overflow is clipped, and the rest of the content will be invisible. */
	height: 185px;
	width: 240px;
	display: block;
}
/* For multi-line text apply break in html and a span around both lines. Normal line height and display inline-block (except older FF). Align vertically in the middle.*/
.portfoliosub section#sect2 ul.hover_block li a span
{
	display             : -moz-inline-box;  /* FF2 or lower */
    display             : inline-block;     /* FF3, Opera, Safari */
    line-height         : normal;
    vertical-align      : middle; 
}
/* No underline for links. */
.portfoliosub section#sect2 ul.hover_block li a 
{ 
	text-decoration: none; 
}
/* The image to be positioned absolute. */
.portfoliosub section#sect2 ul.hover_block li img 
{
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
}




/* Two columns inside main content on services page. */
/* ----------------------------------------------------------- */
/*  Also used on Contact page if listing only without form. Float accordingly and set width. */
#servicesCol1
{
	float: left;
	width: 354px;
}
#servicesCol2
{
	float: right;
	width: 354px;
}


/* Logos on Contact page */
/* ----------------------------------------------------------- */
.contactImg, .contactImgPix
{
	height: 60px;
}
.contactImgPix img
{
	padding-top: 20px;
}


/* Google Maps */
/* ----------------------------------------------------------- */
/* Class inside div for google map to position map correctly. 
Overflow hidden to avoid text in map showing up left of map. */
#map-canvas
{
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	width: 800px;
	height: 390px;
	overflow: hidden;
}
/* Class for info window inside Google Maps. */
.infoWind p
{
	margin: 0px;
	padding: 0px;
}
/* If JavaScript is off -> Modernizr adds .no-js class to html tag -> show static image of Google Map. */
.no-js #map-canvas 
{
	background-image: url(../img/google_map_image.jpg);
	background-repeat: no-repeat;
}


/* TVC - Videos */
/* ----------------------------------------------------------- */

/* Div for video with id. Set same width as slider and set height. */
#vid-ocean, #vid-stmarks
{
	width: 800px; 
	height: 390px;
}


/* SecondaryContent - (left column). Div and not aside in case js is off in IE.
====================================================================================================================== */

/* Secondly content to the left of primary content. Float left. Set width to 160px. Text left aligned. 
All text inside aside to be larger then standard font: 120% of 90% of 100% (same as submenu font size). */
#aside 
{
	float: left;
	width: 160px;
	text-align: left;
	font-size: 120%;
}

/* All p tag formated text inside aside to have smaller text then standard font size. Standard grey text. */
#aside p
{
	/* font-size: 90%; */
	color: #757D81; /* Standard grey */
}

/* Container for top part of aside (navigation and tageline). Set height to max image height of 390px minus padding top. 
Position container relative to allow for tagline container later on to be positioned at the bottom of the sideContainerTop. */
#aside #sideContainerTop
{
	height: 350px;
	padding-top: 40px;
	position: relative;
	top: 0px;
	left: 0px;
}

/* Box inside secondary content (aside) to hold tagline. Position absolute inside relative container (sideContainerTop). 0px from bottom to align at bottom. 
Set width (minus padding). Move text also in by 25px from left. */
#smallagency
{
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 145px;
	padding-left: 15px;
}
/* Bold part of the text already defined on top of css with bold font. */
#smallagency span
{
	
}
/* No padding for text inside tagline. */
#smallagency p
{
	padding-bottom: 0px;
}

/* Phone number inside aside, but below sideContainer Top. Top border and move text in from left. Padding top. 
Font size again smaller -> 75% from 90% from 100%. */
#aside .phoneNo
{
	border-top: 2px #C8E678 solid;
	padding-left: 15px;
	padding-top: 10px;
	padding-bottom: 5px;
	font-size: 80%;
}


/* Secondary navigation left */
/* ----------------------------------------------------------- */
/* Box inside secondary content (aside) to hold secondary navigation. Smaller text then standard font size. */
#navcontainer_sec 
{
	font-size: 90%;
}

/* Unordered list for navigation items. No bullets, padding & margin. */
#navcontainer_sec ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/* Links in list to display as buttons (display: block). Text alignment left. Appropriate padding: 0 on top, 9px bottom and 15px from left. 
Also allow for 5px padding right to avoid touching of the image -> rather wrap in two lines. */
#navcontainer_sec a
{
	display: block;
	text-align: left;
	padding: 0px 5px 9px 15px;
}

/* Hide the submenu items for certain pages without submenus. */
.home #navcontainer_sec ul li ul, .services #navcontainer_sec ul li ul, .pixelfocus #navcontainer_sec ul li ul, .contact #navcontainer_sec ul li ul
{
	display: none;
}
/* Hide portfolio sub pages when on about section. */
.about #navcontainer_sec ul li#sec_portfolio ul, .why #navcontainer_sec ul li#sec_portfolio ul
{
	display: none;
}
/* Hide about sub pages when on portfolio section. */
.portfolio #navcontainer_sec ul li#sec_about ul, .branding #navcontainer_sec ul li#sec_about ul,
.print #navcontainer_sec ul li#sec_about ul, .web #navcontainer_sec ul li#sec_about ul, .television #navcontainer_sec ul li#sec_about ul
{
	display: none;
}

/* The submenu links under portfolio and about to have a further indent from the left. Show dropdown links in tinted colours. */
#navcontainer_sec ul li#sec_portfolio li a:link
{
	padding-left: 30px;
	color: #B9CE67; /* 65% new dark green */
}
#navcontainer_sec ul li#sec_about li a:link
{
	padding-left: 30px;
	color: #D3EB93; /* 80% About Colour */
}
/* Visited links (BEFORE HOVER AND ACTIVE FOR CORRECT BEHAVIOUR) to be back to the tints of the colours (like normal link). */
#navcontainer_sec ul li#sec_portfolio li a:visited, #navcontainer_sec ul li#sec_portfolio li a:visited
{
	padding-left: 30px;
	color: #B9CE67; /* 65% new dark green */
}
#navcontainer_sec ul li#sec_about li a:visited, #navcontainer_sec ul li#sec_about li a:visited
{
	padding-left: 30px;
	color: #D3EB93; /* 80% About Colour */
}
/* Hover (rollover) colour for submenu items under portfolio and about. */
#navcontainer_sec ul li#sec_portfolio li a:hover, #navcontainer_sec ul li#sec_portfolio li a:active,
#navcontainer_sec ul li#sec_about li a:hover, #navcontainer_sec ul li#sec_about li a:active
{
	padding-left: 30px;
	color: #757D81; /* Standard grey */
}

/* Links in side navigation to standard grey. No underline. Also visited links. */
#navcontainer_sec a:link, #navcontainer_sec a:visited
{
	color: #757D81; /* Standard grey */
	text-decoration: none;
}

/* Different colours again for each secondary menu item (as per main navigation on top). */
#navcontainer_sec #sec_home a:hover, #navcontainer_sec #sec_home a:active
{
	color: #000000;
}
#navcontainer_sec #sec_about a:hover, #navcontainer_sec #sec_about a:active
{
	color: #C8E678;
}
#navcontainer_sec #sec_services a:hover, #navcontainer_sec #sec_services a:active
{
	color: #53C2B6;
}
#navcontainer_sec #sec_portfolio a:hover, #navcontainer_sec #sec_portfolio a:active
{
	color: #B2D235;
}
#navcontainer_sec #sec_pixelfocus a:hover, #navcontainer_sec #sec_pixelfocus a:active
{
	color: #00B4C8;
}
#navcontainer_sec #sec_contact a:hover, #navcontainer_sec #sec_contact a:active
{
	color: #A1A9B1;
}

/* Highlight current section in vertical side navigation. */
.home #navcontainer_sec li#sec_home a
{
	color: #000000;
}
.about #navcontainer_sec li#sec_about a.beforeSub
{
	color: #C8E678;
}
.services #navcontainer_sec li#sec_services a
{
	color: #53C2B6;
}
.portfolio #navcontainer_sec li#sec_portfolio a.beforeSub
{
	color: #B2D235;
}
.pixelfocus #navcontainer_sec li#sec_pixelfocus a
{
	color:#00B4C8;
}
.contact #navcontainer_sec li#sec_contact a
{
	color: #A1A9B1;
}


/* Footer
====================================================================================================================== */

/* Footer with same width as wrapper. Cleared both sides. Footer is required for faux-columns. Padding top. */
#footer 
{
	clear: both;
	width: 960px;
	padding-top: 20px;
}

/* PORTFOLIO PAGES AND SUBPAGES AND HOME PAGE: Larger padding footer */
/* ----------------------------------------------------------- */
/* More distance between end of main content (black) and footer text to resemble the same distance as per white pages. */
.portfolio #footer, .portfoliosub #footer, .home #footer
{
	padding-top: 50px;
}


/* Contact details to float left. */
.alignleft
{
	float: left;
}

/* Copyright etc to float right. */
.alignright
{
	float: right;
}

/* Text inside left container inside footer to be standard grey and 100% of standard font size of 90%. */
#footer p.alignleft
{
	color: #757D81;
	font-size: 100%;
}
/* Text inside right container inside footer to be standard grey and 75% of standard font size. 
Move smaller text down to line up with text on the left. */
#footer p.alignright
{
	color: #757D81;
	font-size: 75%;
	text-align: right;
	padding-top: 3px;
}



/* Skiplinks 508 Requirements - Accessibility
====================================================================================================================== */

.skiplist 
{
	margin: 0; 
	padding: 0
} 
.skip 
{
	display: none; 
	text-align: left; 
	margin: 0; 
	padding: 0; 
	position: absolute
} /*All incl Opera*/

/* * html */ .skip {display: block} /*Seen by IE*/

.skip 
{
	display: block
} /*Seen by Moz, FF and Safari*/
	
.skip a 
{
	padding: 0 0.5em; 
	display: inline; 
	z-index: 2; 
	text-decoration:none; 
	position: absolute; 
	width: 14em; left: -200em;
}

.skip a:focus, .skip a:active 
{
	position: absolute; 
	left: 0.5em; 
}
	
.skip a:hover 
{
	cursor: default
}


/* Self-Clear Floats
====================================================================================================================== */
/* Clear both after floating boxes anywhere in all browsers. */
.clearing {
  height: 0;
  clear: both;
}





/* ======================================================================================================================================================================================================================================
   ======================================================================================================================================================================================================================================
	-- non-semantic helper classes -  Please define your styles before this section. --
=========================================================================================================================================================================================================================================
======================================================================================================================================================================================================================================== */

/* Image replacement. Add the .ir class to any element you are applying image-replacement to. 
Be sure to include background-image: url(pathtoimage.png); for that specific element so that image replacement can occur. */
.ir 
{ 
	display: block; 
	border: 0; 
	text-indent: -999em; 
	overflow: hidden; 
	background-color: transparent; 
	background-repeat: no-repeat; 
	text-align: left; 
	direction: ltr; 
}
.ir br 
{ 
	display: none; 
}

/* Add the .hidden class to any element you want to hide from all presentations. Hide from both screenreaders and browsers: h5bp.com/u */
.hidden 
{ 
	display: none !important; 
	visibility: hidden; 
}

/* Add the .visuallyhidden class to hide text from browsers but make it available for screen readers. Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden 
{ 
	border: 0; 
	clip: rect(0 0 0 0); 
	height: 1px; 
	margin: -1px; 
	overflow: hidden; 
	padding: 0; 
	position: absolute; 
	width: 1px; 
}

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p. */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus 
{ 
	clip: auto; 
	height: auto; 
	margin: 0; 
	overflow: visible; 
	position: static; 
	width: auto; 
}

/* Add the .invisible class to any element you want to hide without affecting layout (display: none would remove completely). 
Hide visually and from screenreaders, but maintain layout. */
.invisible 
{ 
	visibility: hidden; 
}

/* Adding .clearfix to an element will ensure that it always fully contains its floated children. Contain floats: h5bp.com/q. */ 
.clearfix:before, .clearfix:after 
{ 
	content: ""; 
	display: table; 
}
.clearfix:after 
{ 
	clear: both; 
}
.clearfix 
{ 
	zoom: 1; 
}