/* ===================================================================================================================
   * 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
   =================================================================================================================== */

/* Base
====================================================================================================================== */
/* Font sizes to be in rem with px fallback. Base font basically set here to 10px because 62.5% (html) of browser default (16px) is 10px.
Commented out 100% font-size in reset.css. */
html
{
	font-size: 62.5%;
}

/* Set bg colour. Font size not required here due to set in html above. */
body
{
	background-color: #000000; /* BLACK. */
}

/* Large BG images per section: Use html element and background-size property (CSS3). Same for missing 404 page. */
html body.home, html body.missing
{
	background: url(../img/background-images/home-bg50.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #000000;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.home-bg50.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='home-bg50.jpg', sizingMethod='scale')";
}
html body.our-story
{
	background: url(../img/background-images/our-story-bg40.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #000000;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.our-story-bg40.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='our-story-bg40.jpg', sizingMethod='scale')";
}
html body.portfolio
{
	background: url(../img/background-images/portfolio-bg50.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #000000;## Creation date: 01/02/2013
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.portfolio-bg50.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='portfolio-bg50.jpg', sizingMethod='scale')";
}
html body.media
{
	background: url(../img/background-images/media-bg50.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #000000;## Creation date: 01/02/2013
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.media-bg50.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='media-bg50.jpg', sizingMethod='scale')";
}
html body.contact-us, html body.disclaimer, html body.privacy-policy, html body.sitemap
{
	background: url(../img/background-images/contact-bg50.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #000000;## Creation date: 01/02/2013
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.contact-bg50.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='contact-bg50.jpg', sizingMethod='scale')";
}



/* Set the default text color to be slightly lighter than pure black to avoid excessive contrast.
Set fonts to Arial and Helvetica before fallback to sans-serif -> overwrites reset (sans-serif only). */
body, button, input, select, textarea
{
	font-family: Arial, Helvetica, Verdana, sans-serif;
	color: #FFFFFF; /* WHITE.*/
}

/* General horizontal rule. Display block. Set height and border top (same). Margin top and bottom. No padding. */
hr
{
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #E1E600; /* NAV YELLOW. */
	margin: 1em 0;
	padding: 0;
}

/* Remove text-shadow in selection highlight (can look messy): h5bp.com/i - these selection declarations have to be separate.
Change bg colour for highlighted text.If necessary also add declaration for text colour. */
::-moz-selection
{
	background: #b3d4fc;
	text-shadow: none;
}
::-webkit-selection
{
	background: #b3d4fc;
	text-shadow: none;
}
::selection
{
	background: #b3d4fc;
	text-shadow: none;
}



/* Fonts
====================================================================================================================== */
/* TTF = Screen, EOT = IE6-8, WOFF = IE9, FF3.6, Chrome 6+, 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.
All fonts already previously purchased. */
@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-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-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+ */
}

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

/* Apply new font to certain definitions. Fallback for font declarations made in body above and also here. */
/* Main content heading h2 (Helvetica Thin). */
h2
{
	font-family: 'NimbusSanD-UltLig', Arial, Helvetica, Verdana, sans-serif;
	font-weight: normal;
}

/* Navigation text including dropdown (Helvetica Roman), side navigation text including submenu, h4, h5 */
#header #navWrapper, #navcontainer_sec, h4, h5
{
	font-family: 'NimbusSanD-Light', Arial, Helvetica, Verdana, sans-serif;
}

/* Side navigation main heading, h3 (Helvetica Bold), phone number next to nav, text Home page, link text Splash page. */
#navcontainer_sec .sideNavHead, h3, #header #navWrapper #phoneEmail #phone, .home section p, .splash-intro section p
{
	font-family: 'NimbusSanD-Reg', Arial, Helvetica, Verdana, sans-serif;
	font-weight: normal;
}

/* Rollover buttons text home page to be bold. Also SUBMIT text on contact page button. */
.home section ul.hover_block li a span, .zemContactForm button.zemSubmit
{
	font-family: 'NimbusSanD-Bol', Arial, Helvetica, Verdana, sans-serif;
	font-weight: normal;
}



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

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

/* Home page to have less padding after each paragraph. */
.home p
{
	padding-bottom: 6px;
}

/* Change all heading colours, if required. */
h1, h2, h3, h4, h5
{
	color: inherit; /* CHANGE COLOUR, if required. */
}

/* REM -> not applied due to too many font-sizes set to px in foundation.css.
Font-size for html set to 62.5% on top of this style sheet. 1em equals 10px.
Now override the px set with CSS3 unit: rem (relative to root to overcome the compounding problem for nested items).
Specify px first as fallback for not compatible browsers IE8 etc. Modern browsers are perfectly resizable now with rem's.  */
p
{ font-size: 12px; font-size: 1.2rem; } /* Even design is 11pt. */
h1
{ font-size: 40px; font-size: 4.0rem; } /* Only used hidden. */
h2
{ font-size: 32px; font-size: 3.2rem; margin-bottom: 0.3em; letter-spacing: 1px; } /* Main content heading. Also apply margin bottom. Also apply letter-spacing. */
h3
{ font-size: 15px; font-size: 1.5rem; margin-bottom: 0.2em; } /* Even design is 14pt. Apply margin bottom. */
h4
{ font-size: 11px; font-size: 1.1rem; margin-bottom: 1em; } /* Apply margin bottom. */
h5
{ font-size: 11px; font-size: 1.1rem; margin-bottom: 1em; } /* Apply margin bottom. */

/* Main navigation text 15pt (design is 14pt). */
#header #navWrapper, .splash-intro section p
{ font-size: 15px; font-size: 1.5rem; } /* Even design is 14pt. */

/* Phone and email address left inside navigation text 13pt (design is 11pt). */
#header #navWrapper #phoneEmail
{ font-size: 13px; font-size: 1.3rem; line-height: normal; } /* Even design is 11pt and it should be 1.1rem as p. Normal line-height to avoid nav pushing down. */

/* Main navigation dropdown text 13pt (design is 11pt). */
#header #navWrapper ul ul
{ font-size: 13px; font-size: 1.3rem; } /* Even design is 11pt and it should be 1.1rem as p. */

/* Side navigation text 13pt (design is 11pt). Appropriate line-height. */
#navcontainer_sec
{ font-size: 13px; font-size: 1.3rem; line-height: 1.8; } /* Even design is 11pt and it should be 1.1rem as p. */

/* Heading inside side navigation 15pt (design is 14pt). */
#navcontainer_sec .sideNavHead
{ font-size: 15px; font-size: 1.5rem; } /* Even design is 14pt. */

/* Lists items inside main content area same size as p. */
section ul li, section ol li
{ font-size: 12px; font-size: 1.2rem; line-height: 1.5; } /* Even design is 11pt. Also line-height same as p. */

/* Table inside main content area same size as p. */
section table
{ font-size: 12px; font-size: 1.2rem; line-height: 1.5; } /* Even design is 11pt. Also line-height same as p. */

/* Larger font for Home page text. */
.home section p
{ font-size: 16px; font-size: 1.6rem; line-height: normal; } /* 16pt.Also normal line-height. */

/* Heading inside side navigation 15pt (design is 14pt). */
.home section ul.hover_block li a span
{ font-size: 15px; font-size: 1.5rem; } /* Even design is 14pt. */

/* Submit button on contact page. */
.zemContactForm button.zemSubmit
{ font-size: 16px; font-size: 1.6rem; } /* 16pt. */

/* Bottom footer part with links (Arial) and 10pt (design is 8pt). */
#footerOutside #footer-bottom p
{ font-size: 10px; font-size: 1.0rem; } /* Even design is 8pt. */

/* LISTS. */
/* Override lists with less margin top. */
ol, ul { margin: 0.6em 0 1em 0; }

/* etc.....!!!! */


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

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

/* Visited links to be White (no change). */
a:visited
{
	color: #FFFFFF; /*WHITE. */
}

/* Hover links to be Yellow (Nav Yellow). */
a:hover
{
	color: #E1E600; /* NAV YELLOW. */
}

/* Active links to be Yellow (Nav Yellow). */
a:active
{
	color: #E1E600; /* NAV YELLOW. */
}

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


/* Boxes (Round Corners etc) -> not 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;
}
.no-js #jsnotice
{
	display: block;
	padding: 5px;
	color: #FFFFFF; /* WHITE. */
	background-color: #F20; /* RED. */
}


/* Page Header - Introduction (white area) + Navigation
====================================================================================================================== */

/* Header outside main wrapper. Set width to auto. Set height (Top white area + navigation). Also white over full viewport width. */
#header
{
	width: auto;
	background-color: #FFFFFF; /* WHITE. To avoid shorter white box on iPhone. */
	height: 160px;
}

/* Top container inside header to hold logo and breadcrumbs. Set width to 1024 and center inside #header horizontally. Set height. */
#header #logoBread
{
	width: 1024px;
	margin: 0 auto;
	background-color: #FFFFFF; /* WHITE.  */
	height: 100px;
}

/* Float logo left and breadcrumbs right inside header and there inside logoBread container.
Also position each correctly. Black text for breadcrumbs. */
#header #logoBread #logoLeft
{
	float: left;
	padding-left: 30px;
	padding-top: 26px;
}
#header #logoBread #breadcrumbs
{
	float: right;
	padding-right: 30px;
	padding-top: 55px;
	color: #000000; /* Required for non link text. */
}

/* Breadcrumb links in black with underline. Also visited breadcrumb links. */
#header #logoBread #breadcrumbs a, #header #logoBread #breadcrumbs a:visited
{
	color: #000000;
	text-decoration: underline;
}
/* Hover and active breadcrumb links to be Grey. */
#header #logoBread #breadcrumbs a:hover, #header #logoBread #breadcrumbs a:active
{
	color: #999999; /* GREY. */
}


/* Navigation (inside header)
====================================================================================================================== */

/* Navigation wrapper inside header. Set width to auto to spread over whole width of browser window. Set height. */
#header #navWrapper
{
	width: auto;
	height: 60px;
	background-color: #000000; /* BLACK. */
}

/* Navigation inside navWrapper inside header. Set width to website width and center horizontally. */
#header #navWrapper nav
{
	width: 1024px;
	margin: 0 auto;
	background-color: #000000; /* BLACK. To avoid shorter black box on iPhone. */
}

/* Box for phone and email left of navigation inside nav. Float left. Padding left and top. */
#phoneEmail
{
	float: left;
	padding-left: 60px;
	padding-top: 12px;
}

/* Unordered list with id menu. Override margin from reset. Also float whole ul inside nav to right (inside the centered 1024 nav container). */
#menu
{
	margin: 0em;
	float: right;
	background-color: #000000; /* BLACK. To avoid transparent bg on iPhone. */
}

/* List items to float left for horizontal display next to each other (not underneath). Display block for button appearance.
Set width of list items to equal width for all of them. Text align center and position relative.
z-index higher then highest z-index inside Nivo Slider to have submenu above slider.*/
#menu li
{
	float: left;
	display: block;
	width: 149px;
	text-align: center;
	position: relative;
	z-index: 100;
}

/* Navigation link text to be white. Links to display bock for button effect. Ensure no outline (outside border). No underline.
Width of each button already set in li item above. Set height of button with 2px less then whole nav to allow for border bottom on hover.
Line height for vertical centering. */
#menu li a
{
	color: #FFFFFF;  /* WHITE. */
	display: block;
	outline: 0;
	text-decoration: none;
	height: 58px;
	line-height: 58px;
}

/* Main nav items text to change to nav yellow, when hovered over. Height adjusted (minus 2px in link setup above). */
#menu li:hover a
{
	color: #E1E600;  /* NAV YELLOW. */
	border-bottom: 2px solid #E1E600;
}

/* Dropdown: No margin top or bottom to join with main nav items. Float left. Position absolute and move outside to hide first.
Text alignment left. Padding top and bottom of 10px.
80% Black bg colour with rgba (shorthand). 100% black as fallback for older browsers. */
.dropdown_1column, .dropdown_2columns, .dropdown_3columns
{
	margin: 0px auto;
	float: left;
	position:absolute;
	left: -9999em; /* Hides the drop down */
	text-align:left;
	padding: 10px 0px 10px 0px; /* 10px top and bottom. */
	background: rgb(0, 0, 0); /* Black as fallback. */
   	background: rgba(0, 0, 0, 0.8);
}

/* Dropdown: Set width of div, depending on the amount of columns. */
.dropdown_1column
{
	width: 195px;
}
.dropdown_2columns
{
	width: 390px;
}
.dropdown_3columns
{
	width: 585px;
}

/* Dropdown: Hover state of dropdown box. Align left. The move 3column dropdown left to center under main nav item (column width + 2x padding). */
#menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns
{
	left: 0px;
	top: auto;
}
#menu li:hover .dropdown_3columns
{
	left: -215px;
}

/* Dropdown: Column itself - only one column setup required here (no items stretching over two or three columns). Display inline. Float left.
Position relative. Margin left and right. Set width to 195px -> 20px + 175px + 0px. */
.col_1
{
	display: inline;
	float: left;
	position: relative;
	margin-left: 20px;
	width: 175px;
}

/* Dropdown: Less line-height as main nav, but more then normal paragraph. Text align to the left. */
/* Remove height from main nav (58px there) to auto for dropdown links.  */
#menu ul li a, #menu ul li.dropHead
{
	line-height: 1.8;
	text-align:left;
	height: auto;

}

/* Dropdown: When main nav items hovered over -> dropdown links to be white. Also remove border.*/
#menu li:hover div a
{
	color: #FFFFFF;  /* WHITE. */
	border-bottom: none;
}
/* Dropdown: When main nav items hovered over -> and dropdown items hovered -> Change the colour to Nav Yellow and underline. */
#menu li:hover div a:hover
{
	color: #E1E600; /* NAV YELLOW. */
	text-decoration: underline;
}

/* Unordered list inside main list without bullet points. No padding and no margins. */
#menu li ul
{
	list-style: none;
	padding: 0;
	margin: 0px;
}
/* List items inside list to be positioned relative. No padding, no margins. Remove float. Text left and set width again. */
#menu li ul li
{
	position: relative;
	padding: 0;
	margin: 0;
	float: none;
	text-align: left;
	width: 175px;
}
/* Links in list on hover. */
#menu li ul li:hover
{
	padding: 0;
	margin: 0;
}

/* Highlight current section in main top navigation. It is enough to address the five main navigation items here, since each subpage has also the main section class assigned (two classes).
Ensure dropdown items are not affected by assigning a class to main navigation item and address here. */
.home #menu li#home a.mainItem, .our-story #menu li#our-story a.mainItem, .portfolio #menu li#portfolio a.mainItem,
.media #menu li#media a.mainItem, .contact-us #menu li#contact-us a.mainItem
{
	color: #E1E600;  /* NAV YELLOW. */
	border-bottom: 2px solid #E1E600;
}

/* Change the colour the active dropdown item to Nav Yellow and add underline. */
/* CAREFUL: history class assigned through Modernizr in html -> change class also in TXP. */
.overview #menu li#our-story-overview a, .histories #menu li#our-story-history a,
.strategy #menu li#our-story-strategy a, .personnel #menu li#our-story-personnel a,
.environmental-support #menu li#our-story-environmental a, .awards #menu li#our-story-awards a,
.affiliations #menu li#our-story-affiliations a,
.current-assets #menu li#portfolio-invest-current a, .past-assets #menu li#portfolio-invest-past a,
.cevue #menu li#portfolio-dev-current a, .one-brighton #menu li#portfolio-dev-current a, .peelhurst #menu li#portfolio-dev-current a,
.settlers-cove #menu li#portfolio-dev-current a, .halls-head #menu li#portfolio-dev-current a, .the-esplanade-194 #menu li#portfolio-dev-current a, .clifton-beach #menu li#portfolio-dev-current a,
.completed-projects #menu li#portfolio-dev-completed a,
.sustainable-energy #menu li#portfolio-sectors-sustainable a, .technology #menu li#portfolio-sectors-technology a,
.equity-investments #menu li#portfolio-sectors-equity a,
.m2016 #menu li#media-2016 a, .m2015 #menu li#media-2015 a, .m2013 #menu li#media-2013 a, .m2012 #menu li#media-2012 a, .archive #menu li#media-archive a
{
	color: #E1E600; /* NAV YELLOW. */
	text-decoration: underline;
}


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

/* Order important for search engines. Calculations:
276px (secondary) + 748px (primary) = 1024px */

/* Main wrapper with centres the whole page with set width.
Background image as repeated faux-filler with 50% transparency on the left (aside). Aside can't be done with transparency through rgba due to faux-filler needed.
Move whole content down by 250px. */
#wrapper
{
	width: 1024px;
	margin: 0 auto;
	margin-top: 250px;
	background-image: url(../img/faux-filler-left-transparent.png);
	background-repeat: repeat-y;
}

/* Home page is full width and does not need faux-filler. Also less bg image visible with margin-top reduced by 50px.
Also for Splash Intro page. */
.home #wrapper, .splash-intro #wrapper
{
	background-image: none;
	margin-top: 100px;
}

/* Portfolio pages with single images or image sliders above content without margin top for wrapper. */
.environmental-support #wrapper,
.current-assets #wrapper, .past-assets #wrapper,
.cevue #wrapper, .one-brighton #wrapper, .peelhurst #wrapper, .settlers-cove #wrapper, .halls-head #wrapper, .the-esplanade-194 #wrapper, .clifton-beach #wrapper,
.completed-projects #wrapper,
.sustainable-energy #wrapper, .technology #wrapper, .equity-investments #wrapper
{
	margin-top: 0px;
}

/* Container around static image with set height required to avoid height difference in some browsers. */
#imageContainer
{
	height: 250px;
}


/* PrimaryContent (left 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: 1024px;
	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 748px. Black bg. */
#twoColLayout #primaryContent
{
	float: right;
	width: 748px;
	background-color: #000000; /* BLACK. */
}

/* 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 1024px. Black bg. */
#oneColLayout #primaryContent
{
	float: left;
	width: 1024px;
	background-color: #000000; /* BLACK. */
}

/* Section inside primary content to be positioned correctly. Different for HP later! */
section
{
	padding-top: 20px;
	padding-left: 37px;
	padding-right: 36px;
}

/* Unordered lists inside main content area to with less padding left. The distance after each list item. */
section ul
{
	padding-left: 15px;
}
section ul li
{
	padding-bottom: 5px;
}

/* Indent for nested unordered list (Privacy Policy). */
section ol ol
{
	padding-left: 17px;
}

/* Class for single letter to be yellow (I.e. Strategy page). */
.yellowLetter, .yellowText
{
	color: #E1E600; /* NAV YELLOW. */
}

/* Logos on Affiliations page.Float left and have distance right. Also on Technology page. */
.affiliations section img, .technology section img
{
	float: left;
	padding-right: 30px;
	padding-bottom: 30px;
}

/* Table setup for Personnel page (former Management page). */
.personnel #sect1 table tr td
{
	padding-right: 30px;
}



/* Image slider on some pages instead of no image or static image.
====================================================================================================================== */
/* Position slider correctly and float left. */
#slider
{
	position: relative;
	width: 1024px; /* Change this to your images width */
	height: 250px; /* Change this to your images height */
	background-image: url(../img/loading.gif);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	float: left;
}


/* Splash Intro stuff
====================================================================================================================== */
/* Video set to autoplay, but Safari on iOS will not allow autoplay. Controls hidden via css, including spinner.
Once video ended, a redirection to the home page will take place (added code into video.min.js) -> edited the minimised version but around line 2383 for non-minimised version.
Also have hidden player once video is finished to avoid the big play button to show quickly before the redirect takes place.
iOS still needs to press button to play video, which is good, due to larger video content and possibly slow internet connection. */


/* Primary content on splash intro page with NO padding. */
.splash-intro section
{
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
}

video
{
	border: 0 none;
	outline: 0 none;
}

.splash-intro section p
{
	text-align: center;
	padding-top: 10px;
}

.splash-intro section p a
{
	color: #E1E600; /* NAV YELLOW. */
}

/* All controls are loaded inside video tag, but hide the bottom controls via css in order to show at least play button on iOS.
Also do not show loading spinner, which will otherwise show on iOS. */
.splash-intro section .vjs-controls, .splash-intro section .vjs-loading-spinner
{
	display: none !important;
}


/* Home page stuff
====================================================================================================================== */
/* Primary content on home page with different padding left and right.  */
.home section
{
	padding-top: 20px;
	padding-left: 62px;
	padding-right: 62px;
}

/* First paragraph on Home page to be yellow (different yellow to link colour. */
.home section p#homeYellow
{
	color: #F9F100;
}

/* HOME PAGE & PORTFOLIO -> INVEST -> PAST ASSETS & PORTFOLIO -> DEVELOP -> COMPLETED PROJECTS: Rollover buttons (hover block). */
/* ----------------------------------------------------------- */
/* Override left padding from reset. */
.home section ul.hover_block, .past-assets section ul.hover_block, .completed-projects section ul.hover_block
{
	padding-left: 0px;
}

/* Remove the bullet points. Float list items left and set width. Position relative for SPAN position later absolute.
Margin right except last in row (next declaration ). Margin bottom for distance to next row. */
.home section ul.hover_block li
{
	list-style: none;
	float: left;
	width: 220px;
	position: relative;
	margin-right: 5px;
	margin-bottom: 20px;
}
.past-assets section ul.hover_block li, .completed-projects section ul.hover_block li
{
	list-style: none;
	float: left;
	width: 111px;
	position: relative;
	margin-right: 30px;
	margin-bottom: 20px;
}
.home section ul.hover_block li.rowThird, .past-assets section ul.hover_block li.rowThird, .completed-projects section ul.hover_block li.rowThird
{
	margin-right: 0px;
}

/* The links inside the list. Display block for buttons. Relative positioned still. Overflow hidden.
Set height and width of full size list item. */
.home section ul.hover_block li a
{
	display: block;
	position: relative;
	overflow: hidden; /* The overflow is clipped, and the rest of the content will be invisible. */
	height: 125px;
	width: 220px;
}
.past-assets section ul.hover_block li a, .completed-projects section ul.hover_block li a
{
	display: block;
	position: relative;
	overflow: hidden; /* The overflow is clipped, and the rest of the content will be invisible. */
	height: 155px;
	width: 111px;
}

/* The span text inside the link (to be animated). Absolute positioned inside relative container (a).
Position outside li first. Set z-index high to be above image. Set width and height. Also line-height for horizontal centering.
Display block again so width and height come into play. Bg colour gradient from nav yellow to green.
80% transparency due to using rbga with fallback (shorthand). Black text. Center text. */
.home section ul.hover_block li a span
{
	position: absolute;
	bottom: -44px;
	z-index: 100;
	width: 220px;
	height: 34px;
	line-height: 34px;
	display: block;

	color: #000000; /* BLACK. */
	text-align: center;

	/* Nav Yellow (top) - Green (bottom). With stop at 33%. */
	background: rgb(225,230,0); /* Fallback old browsers. NAV YELLOW. */
	background: rgba(225,230,0,0.8); /* NAV YELLOW with transparency. */

	background: -moz-linear-gradient(top,  rgba(225,230,0,0.8) 0%, rgba(200,230,120,0.8) 33%, rgba(200,230,120,0.8) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(225,230,0,0.8)), color-stop(33%,rgba(200,230,120,0.8)), color-stop(100%,rgba(200,230,120,0.8))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(225,230,0,0.8) 0%,rgba(200,230,120,0.8) 33%,rgba(200,230,120,0.8) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(225,230,0,0.8) 0%,rgba(200,230,120,0.8) 33%,rgba(200,230,120,0.8) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(225,230,0,0.8) 0%,rgba(200,230,120,0.8) 33%,rgba(200,230,120,0.8) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(225,230,0,0.8) 0%,rgba(200,230,120,0.8) 33%,rgba(200,230,120,0.8) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cce1e600', endColorstr='#ccc8e678',GradientType=0 ); /* IE6-9 */
}
.past-assets section ul.hover_block li a span, .completed-projects section ul.hover_block li a span
{
	position: absolute;
	bottom: -155px;
	z-index: 100;
	width: 111px;
	height: 155px;
	line-height: 155px;
	display: block;

	color: #000000; /* BLACK. */
	text-align: center;
}

/* No underline for links. */
.home section ul.hover_block li a, .past-assets section ul.hover_block li a, .completed-projects section ul.hover_block li a
{
	text-decoration: none;
}
/* The image to be positioned absolute (still). */
.home section ul.hover_block li img, .past-assets section ul.hover_block li img, .completed-projects section ul.hover_block li img
{
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
}



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

/* Secondly content to the right of primary content. Float left. Set width to 276px.
50% Black bg colour done with bg png on wrapper declaration (faux filler). No requirement for rgba. */
#aside
{
	float: left;
	width: 276px;
}


/* Secondary navigation left (inside left column aside)
====================================================================================================================== */
/* Div container inside secondary content (aside) to hold secondary navigation. Padding around for distance between outer edge of container and navigation.*/
#navcontainer_sec
{
	padding-top: 20px;
	padding-left: 60px;
	padding-right: 10px;
	padding-bottom: 40px;
}

/* More distance after heading on contact page only. */
.contact-us #navcontainer_sec ul li.sideNavHead
{
	padding-bottom: 20px;
}
/* Bring the line-height back to normal for side content on contact page. */
.contact-us #navcontainer_sec ul li.normalLineHeight
{
	line-height: normal;
}
/* Underline email link. */
.contact-us #navcontainer_sec ul li.normalLineHeight a
{
	text-decoration: underline;
}

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

/* Links (submenus -> ul ul) in list to display as buttons (display: block). Text alignment left. 15px padding from left (indent). */
#navcontainer_sec ul ul a
{
	display: block;
	text-align: left;
	padding: 0px 0px 0px 15px;

}
/* The bring back the main links before the submenu back to left position (no padding left). */
#navcontainer_sec a.beforeSub
{
	padding-left: 0px;
}

/* Hide submenu under Portfolio -> Property Development -> Current Projects, when Completed Projects is active page. */
.completed-projects #navcontainer_sec ul ul
{
	display: none;
}

/* Links in side navigation to be white. No underline. Also visited links. */
#navcontainer_sec a:link, #navcontainer_sec a:visited
{
	color: #FFFFFF; /* WHITE. */
	text-decoration: none;
}
/* Hovewre and active links in side navigation to be in yellow and underlined. */
#navcontainer_sec a:hover, #navcontainer_sec a:active
{
	color: #E1E600; /* NAV YELLOW. */
	text-decoration: underline;
}

/* Highlight current page in side navigation, via body class and list id. */
/* CAREFUL: history class assigned through Modernizr in html -> change class also in TXP. */
.overview #navcontainer_sec li#sec-our-story-overview a, .histories #navcontainer_sec li#sec-our-story-history a,
.strategy #navcontainer_sec li#sec-our-story-strategy a, .personnel #navcontainer_sec li#sec-our-story-personnel a,
.environmental-support #navcontainer_sec li#sec-our-story-environmental a, .awards #navcontainer_sec li#sec-our-story-awards a,
.affiliations #navcontainer_sec li#sec-our-story-affiliations a,
.current-assets #navcontainer_sec li#sec-portfolio-invest-current a, .past-assets #navcontainer_sec li#sec-portfolio-invest-past a,
.current-projects #navcontainer_sec li#sec-portfolio-dev-current a, .completed-projects #navcontainer_sec li#sec-portfolio-dev-completed a,
.cevue #navcontainer_sec li#cevue a,
.one-brighton #navcontainer_sec li#one-brighton a,
.peelhurst #navcontainer_sec li#peelhurst a,
.settlers-cove #navcontainer_sec li#settlers-cove a,
.halls-head #navcontainer_sec li#halls-head a,
.the-esplanade-194 #navcontainer_sec li#the-esplanade-194 a,
.clifton-beach #navcontainer_sec li#clifton-beach a,
.sustainable-energy #navcontainer_sec li#sec-portfolio-sectors-sustainable a, .technology #navcontainer_sec li#sec-portfolio-sectors-technology a,
.equity-investments #navcontainer_sec li#sec-portfolio-sectors-equity a,
.m2016 #navcontainer_sec li#sec-media-2016 a, .m2015 #navcontainer_sec li#sec-media-2015 a, .m2013 #navcontainer_sec li#sec-media-2013 a, .m2012 #navcontainer_sec li#sec-media-2012 a,
.archive #navcontainer_sec li#sec-media-archive a
{
	color: #E1E600; /* NAV YELLOW. */
	text-decoration: underline;
}

/* Additional links to other subsection areas under Portfolio. Distance above. */
#navcontainer_sec li.moreSubPortfolio
{
	padding-top: 40px;
}



/* Contact Form
====================================================================================================================== */
/* Float whole form left to have Google Map on right. Set width and font size. */
.zemContactForm
{
	float: left;
	width: 290px;
	font-size: 12px;
	font-size: 1.2rem; /* Even design is 9.5pt. */
}


/* Label for headings left of form input boxes. Clear left and float left. Slight left indent. White text. */
.zemContactForm label
{
	position: relative;
	clear: left;
	float: left;
	padding-left: 5px;
	text-align: left;
	color: #FFFFFF; /* WHITE. */
}

/* Clear the break for proper display. */
.zemContactForm br
{
   clear: left;
}

/* Margin bottom for input to achieve distance between items. Black border around input and black text. Set height in ems and set width in percentages. . */
.zemContactForm input
{
	color: #000000;
	border: 1px solid #000000;
	margin-bottom: 10px;
	height: 1.8em;
	width: 75%;
}

/* Textarea also to have black text and black border around. Also indent typed in text from top. */
.zemContactForm textarea
{
	color: #000000; /* BLACK. */
	border: 1px solid #000000;
	padding-top: 3px;
	width: 75%;
}

/* Font size for input and textarea fields. Padding left to line up with indent label text above. */
.zemContactForm input, .zemContactForm textarea
{
	font-size: 12px;
	font-size: 1.2rem; /* Even design is 9.5pt. */
	padding-left: 5px;
	/* background-image: url(../img/contact-form-input-bg.gif);
	background-repeat: repeat-x;
	background-position: left top; */
}

/* Creates anchor for user in field (Standard Browsers). Remove top gradient bg image and remove blue border (Safari etc). . */
input:focus, textarea:focus
{
	outline: none;
	background-image: none;
}

/* Definition for submit button and the hover effect. Same width as input fields above in percentage. Gradient bg without transparency. Rest standard definitions. */
.zemContactForm button.zemSubmit
{
	display: block;
	height: 44px;
	line-height: 44px;
	text-align: center;
	color: #000000;/* BLACK. */
	margin-left: 0px;
	margin-bottom: 30px;
	margin-top: 20px;
	border: none;
	cursor: pointer;
	width: 75%;

	/* Nav Yellow (top) - Green (bottom). With stop at 33%. */
	background: rgb(225,230,0); /* Fallback old browsers. NAV YELLOW. */
	background: rgba(225,230,0,1.0); /* NAV YELLOW without transparency. */

	background: -moz-linear-gradient(top,  rgba(225,230,0,1.0) 0%, rgba(200,230,120,1.0) 33%, rgba(200,230,120,1.0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(225,230,0,1.0)), color-stop(33%,rgba(200,230,120,1.0)), color-stop(100%,rgba(200,230,120,1.0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(225,230,0,1.0) 0%,rgba(200,230,120,1.0) 33%,rgba(200,230,120,1.0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(225,230,0,1.0) 0%,rgba(200,230,120,1.0) 33%,rgba(200,230,120,1.0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(225,230,0,1.0) 0%,rgba(200,230,120,1.0) 33%,rgba(200,230,120,1.0) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(225,230,0,1.0) 0%,rgba(200,230,120,1.0) 33%,rgba(200,230,120,1.0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cce1e600', endColorstr='#ccc8e678',GradientType=0 ); /* IE6-9 */
}
/* Hover to be yellow. */
.zemContactForm button:hover.zemSubmit
{
	background: rgb(225,230,0); /* NAV YELLOW. */
}

/* Error messages to be displayed without bullet points. Give distance on bottom. Colour red.
Margin and padding to zero to start at beginning of column. */
.zemContactForm ul.zemError li
{
	list-style: none;
	padding-bottom: 6px;
	color: #F20;
	padding-right: 10px;
}
#primaryContent .zemContactForm ul
{
	margin-bottom: 0px;
	padding-left: 0px;
}

/* Display message sent in red colour. Only works with message overwritten in TXP. */
.zemThanks
{
	color: #F20;
	font-size: 12px;
	font-size: 1.2rem; /* Even design is 9.5pt. */
	padding-right: 10px;
}



/* Google Map
====================================================================================================================== */

/* 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: 5px;
	margin-left: 5px;
	margin-bottom: 10px; */
	float: right;
	width: 385px;
	height: 300px;
	overflow: hidden;
}
/* Class for info window inside Google Maps. */
.infoWind p
{
	color: #000000;
	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;
}


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

/* Footer (inside wrapper) with same width as wrapper. Cleared both sides. Footer is required for faux-columns.
Set height to 1px and yellow bg colour. */
#footer
{
	clear: both;
	height: 1px;
	background-color: #E1E600; /* NAV YELLOW. */
}

/* No yellow line for footer on Splash page. */
.splash-intro #footer
{
	background-color: #000000;
}

/* Footer outside wrapper (real footer). Same width as wrapper and center vertically. Set height.
80% Black bg colour with rgba (shorthand). 100% black as fallback for older browsers. */
#footerOutside
{
	width: 1024px;
	margin: 0 auto;
	height: 100px; /* 90px high in design. */
	background: rgb(0, 0, 0); /* Black as fallback. */
   	background: rgba(0, 0, 0, 0.8);
}

/* Split the footer up in two horizontal rows via id's. First one with no declaration required. Second (bottom) div with left indent for text. */
#footerOutside #footer-top
{

}
#footerOutside #footer-bottom
{
	padding-left: 313px;
}

/* 4 columns inside the first row float left to arrange next to each other. Top padding. First col wider then 3 others. */
#footer-firstcol, #footer-secondcol, #footer-thirdcol, #footer-fourthcol
{
	float: left;
	padding-top: 12px;
}
#footer-firstcol
{
	width: 253px;/* 313px-60px = 253px. */
	padding-left: 60px; /* Move logo in from left. */
}
#footer-secondcol, #footer-thirdcol, #footer-fourthcol
{
	width: 237px;
}


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





/* Media Queries
====================================================================================================================== */
/* */
@media only screen and (min-width: 35em)
{

}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {

}




/* ======================================================================================================================================================================================================================================
   ======================================================================================================================================================================================================================================
	-- 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
{
	background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}
.ir:before
{
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

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


/* Print styles
====================================================================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        /* content: " (" attr(href) ")"; */
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
      Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}