/* ===================================================================================================================
   * Responsive styles in addition to base foundation.css (v.4.1.2)
   * Author: otti@ottimoto.com.au
   * Autor URL: http://www.ottimoto.com.au
   =================================================================================================================== */

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

/* Make Foundation wortk in IE7 as well with different box-sizing and .htc file. Change path for each website. */
* 
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url(http://www.waier.org.au/js/vendor/boxsizing.htc);
}



/* Base
====================================================================================================================== */
 
/* Body: BG colour white and lighter black for text -> override. */
body 
{
	background-color: #FFFFFF;
	color: rgb(34, 34, 34); /* LIGHTER BLACK. */
}

/* Override panel styles: Eliminate left, right and bottom padding. Change padding top to suit. Remove border. */
.panel 
{
	padding-left: 0em;
	padding-right: 0em;
	padding-bottom: 0em;
	padding-top: 0.875em; /* Same as padding top for side nav. */
	border-width: 0px;
}

/* Extra padding bottom on non tabbed pages. Also remove background. */
.nontabbed
{
	background: none;
	padding-bottom: 0.875em; /* Same as padding top for side nav. */
}

/* General horizontal rule. Change border colour and/or width and/or margin, if required.*/
hr 
{ 
	border: solid rgb(231, 235, 241); /* Light Blue. */
	border-width: 3px 0 0; 
	margin: 0em 0 1.1875em;
}

/* Set width to 75em (which equals 1200px) -> overriding foundation.css width of 62.5em. 62.5em x wished width in px divided by 1000. */
.row 
{
	max-width: 75em; /* Equals 1200px. CHANGE OR LEAVE */
}


/* Fonts
====================================================================================================================== */
/* Default fonts set in foundation.css as "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; */


/* Typography
====================================================================================================================== */
/* Standard paragraph and p inside panel to be lighter black. Reduce line-height. */
p, .panel p
{
	color: rgb(34, 34, 34); /* LIGHTER BLACK. */
	line-height: 1.3;
}

/* Main headings inside panel and tabs haeding h4 -> override with Blue. */
.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6,
h1, h2, h3, h4, h5, h6,
section#primaryContent .panel p, label
{
	color: rgb(52, 98, 135); /* BLUE. */
}

/* Line height for headings which can be over multiple lines. */
.panel h2, .panel h3, h5
{
	line-height: 1.3;
}

/* Line height to be less for heading and text in ql. Then less margin bottom and remove margin top for h6 aside only. */
h6, aside .ql p
{
	line-height: 1.2em;
}
h6
{
	margin-bottom: 0.5em;
	margin-top: 0em;
}


/* Default browser font-size is 16px -> html & body font-size in foundation.css is set to 100%. Therefore 1em equals 16px.
Foundation sets all font sizes to em's. 
We now override the em's with CSS3 unit: rem (relative to root to overcome the compounding problem for nested items). 
Fallback for not compatible browsers IE8 etc is basically the em's in foundation.css. Line-height as per foundation.css. 
Modern browsers are perfectly resizable now with rem's.  
Calculation: 34px : 16px = 2.125rem or 2.125rem*16px = 34px */
/* If size/number changes then also apply fallback in em's. */
/* Possibly different font sizes (i.e. larger) for larger devices with media query later. */
/* All of the following: Same size as em defined in foundation.css therefore no em definition required. */
h1 
{ font-size: 2.125rem; } /* equals 34px - em in foundation.css */
h2 
{ font-size: 1.6875rem; margin-bottom: 0em; } /* equals 27px - em in foundation.css Also remove margin bottom. */
h3 
{ font-size: 1.4375em; font-size: 1.4375rem; } /* equals 23px - NOT in foundation.css */
h4 
{ font-size: 1.3125em; font-size: 1.3125rem; } /* equals 21px - NOT in foundation.css */
h5 
{ font-size: 1.125rem; } /* equals 18px - em in foundation.css */
h6
{ font-size: 0.875em; font-size: 0.875rem; } /* equals 14px - NOT in foundation.css */

/* Smaller font and not bold if small text behind heading h5. */*/
h5 span
{ font-size: 0.875em; font-size: 0.875rem; font-weight: normal} /* equals 14px - NOT in foundation.css */

/* The following definitions ALL require em as fallback, since not defined in foundation.css. */
/* Normal font size for standard text to be 14px = 0.875em. */
p
{ font-size: 0.875em; font-size: 0.875rem; } /* equals 14px. */

/* Main navigation text larger then foundation.css. Also not bold. */
.top-bar-section ul li > a
{ font-size: 1em; font-size: 1rem; font-weight: normal; } /* equals 16px. */

/* Link to submenu on certain pages in same font size as breadcrumbs. */
.submenu
{ font-size: 0.6875em; font-size: 0.6875rem; }

/* List items in side navigation larger then foundation.css. */
.side-nav li
{ font-size: 1em; font-size: 1rem; } /* equals 16px. */

/* Smaller font for ql in sidebar. */
aside .ql p
{ font-size: 0.8125em; font-size: 0.8125rem; } /* equals 13px. */

/* Smaller font for text inside relevant downloads box. */
.relDownloads p
{ font-size: 0.8125em; font-size: 0.8125rem; } /* equals 13px. */

/* Feature box on home page only. */
.home .featureHome p.featureText
{ font-size: 1.125rem; } /* equals 18px - em in foundation.css */

/* Quick links on Home page to be in smaller font. */
.home .quickLink p
{ font-size: 0.8125em; font-size: 0.8125rem; } /* equals 13px. */

/* Standard bullet point lists. */
section#primaryContent ul
{ font-size: 0.875em; font-size: 0.875rem; font-weight: normal} /* equals 14px - NOT in foundation.css */

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

/* Some more typography heading declarations. */
/* h2 and h3 inside panel (above content area) with text centered. */
section#primaryContent .panel h2, section#primaryContent .panel h3, section#primaryContent .panel p
{
	text-align: center;
}

/* h3 inside panel with normal font weight, in italic and appropriate padding bottom. Blue colour. Also appropriate padding to panel p. */
section#primaryContent .panel h3
{
	font-weight: normal;
	font-style: italic;
	padding-bottom: 0.2em;
}
section#primaryContent .panel p
{
	padding-bottom: 1em;
}

/* Non tabbed pages to have text and headings h2, h3, h4 and h5 moved in from left and right. Also sub-nav. 
Then for table margin instead of padding required.*/
section#primaryContent .nontabbed h2, section#primaryContent .nontabbed h3, 
section#primaryContent .nontabbed h4, section#primaryContent .nontabbed h5,
section#primaryContent .nontabbed p, section#primaryContent .nontabbed dl.sub-nav
{
	padding-left: 15px; /* equals 0.9375em */
	padding-right: 15px; /* equals 0.9375em */
}
section#primaryContent .nontabbed table
{
	margin-left: 15px; /* equals 0.9375em */
	margin-right: 15px; /* equals 0.9375em */
}
/* Don't move them in on home page. */
.home section#primaryContent .nontabbed h2, .home section#primaryContent .nontabbed h3, 
.home section#primaryContent .nontabbed h4, .home section#primaryContent .nontabbed h5,
.home section#primaryContent .nontabbed p
{
	padding-left: 0px;
	padding-right: 0px;
}
.home section#primaryContent .nontabbed h2, .home section#primaryContent .nontabbed h3.
.home section#primaryContent .nontabbed h4, .home section#primaryContent .nontabbed h5
{
	margin-bottom: 0.625em;
	margin-top: 0px;
}



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

/* LVHA. Standard links. Override foundation.css. Red. */
a 
{ 
	color: rgb(255, 0, 0); /* Red. */
}

/* Visited links to be Red. */
a:visited 
{ 
	color: rgb(255, 0, 0); /* Red. */
}

/* Hover and active links to be Dark Red. */
a:hover, a:active
{ 
	color: rgb(190, 0, 0); /* Dark Red. */
	text-decoration: underline;
}


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

/* Standard definition for rounded corners. Applied in HTML. */
.roundedCorners
{
	-webkit-border-radius: 3px; /* Safari3-4, iOS 1-3.2, Android ≤1.6 */
	-moz-border-radius: 3px; /* FF1-3.6 */
	-khtml-border-radius: 3px; /* Linux */
	border-radius: 3px; /* Standard CSS3 syntax for Opera 10.5, IE9, Safari5, Chrome, FF4, iOS 4, Android 2.1+ */
	/* useful if you don't want a bg color from leaking outside the border: */
	-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;	
}

/* Standard definition for gradients (light top to dark bottom). */
.boxGradient 
{
	background: rgb(235,243,245); /* Fallback old browsers 15% Green. */
	/* 15% Green - 30% Green. Horizontal. */
	background: -moz-linear-gradient(top,  rgb(235,243,245) 0%, rgb(198,221,226) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(235,243,245)), color-stop(100%,rgb(198,221,226))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgb(235,243,245) 0%,rgb(198,221,226) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgb(235,243,245) 0%,rgb(198,221,226) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgb(235,243,245) 0%,rgb(198,221,226) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgb(235,243,245) 0%,rgb(198,221,226) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf3f5', endColorstr='#c6dde2',GradientType=0 ); /* IE6-9 */

}



/* Page Header
====================================================================================================================== */
#header 
{
	/* background-color: #EEEEEE;  CHANGE COLOUR OR DELETE!!! */
}

#header .columns
{
	background-image: url(../img/waier-logo-transp-bg.png);
	background-repeat: repeat-y;
}

/* Center the logo image inside 12-columns. Override: Remove bottom margin. */
#header h2.logoCenter
{
	text-align: center;
	margin-bottom: 0px;
}


/* Top Bar / Navigation
====================================================================================================================== */
/* Wrapper around top bar. Position relative so it shows above image slider/static image -> internals of top-bar already positioned relative. 
Set transparent light blue bg colour. Padding-top and bottom set for different screen sizes from 480px onwards -> media-queries further down. */
#topBarWrapper
{
	background-color: rgba(231, 235, 241, 0.3); /* Light Blue. 30% Transparent. */
	position: relative;
}

/* Set width to 75em which equals 1200px -> overriding foundation.css width of 62.5em. Same width as .row override earlier. */
.contain-to-grid .top-bar 
{ 
	max-width: 75em; /* Equals 1200px. CHANGE OR LEAVE */
}

/* Override navigation black to NavBlue: First outside the grid, then bg top-bar itself, then all the other bits and pieces. */
.contain-to-grid, .contain-to-grid .top-bar, 
.top-bar-section li a:not(.button),
.top-bar-section ul,
.top-bar-section ul li > a,
.top-bar.expanded .title-area
{
	background: rgb(0, 91, 137); /* Nav Blue. */
}

/* Hover state for nav buttons to be Dark Red. */
.top-bar-section li a:not(.button):hover
{
	background: rgb(190, 0, 0); /* Dark Red. */
	text-decoration: none;
}

/* Override the vertical and horizontal divider from black to white. */
.top-bar-section > ul > .divider
{
	border-right: 1px solid rgb(255, 255, 255); /* White. */
	border-left: 1px solid rgb(255, 255, 255); /* White. */
}
.top-bar-section .divider
{
	border-top: 1px solid rgb(255, 255, 255); /* White. */
	border-bottom: 1px solid rgb(255, 255, 255); /* White. */
}

/* Remove margin bottom on smaller devices underneath top bar. Might need to bring back slightly later (min-width 48em = 768px) ??? */
.top-bar
{
	margin-bottom: 0em;
}

/* Active top-bar links in combination with body class. */
body.events .top-bar li.events a, body.awards .top-bar li.awards a, body.features .top-bar li.features a, body.grants .top-bar li.grants a, body.about .top-bar li.about a, body.archives .top-bar li.archives a,
body.membership .top-bar li.membership a, body.contact .top-bar li.contact a
{
	background: rgb(255, 0, 0); /* Red. */
}



/* Orbit - Image/Content slider & static bg images
====================================================================================================================== */
/* Position the row containing the full width 12 columns for the image or image slider relative. */
.relBox
{
	position: relative;
}
/* Then remove the padding left and right for this particular 12-column container inside that row. */
.relBox .columns
{
	padding-left: 0em;
	padding-right: 0em;
}

/* Position static image on all pages except Home page absolute. This allows for relative containers above topBarWrapper etc. */
.absPos
{
	position: absolute;
}

/* To avoid images stacked on top of each other whilst loading -> display a grey box with a spinner and images hidden by default. 
Once images are loaded, remove the bg. Need to be sorted, if used???*/
/* Position container absolute. */
.orbit-container
{
	background: rgb(248, 249, 251);
	background-image: url(../img/loading.gif);
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
}
.orbit-container img 
{ 
	display: none; 
}
.orbit-container.orbit-slides-container
{ 
	background: none; 
}
.orbit-container.orbit-slides-container img 
{ 
	display: block; 
}

/* Hide slide number and timer and bullets. */
.orbit-slide-number, .orbit-bullets, .orbit-hidden
{
	display: none !important;
}



/* Breadcrumbs/Submenu
====================================================================================================================== */
/* Remove padding, border and n=bg colour -> override. */
.breadcrumbs
{
	padding: 0px;
	border-style: none;
	background-color: Transparent;
}

/* Change breadcrumb link colour to red and remove capital letters. */
.breadcrumbs li a, .breadcrumbs li span
{
	color: rgb(255, 0, 0); /* Red. */
	text-transform: none;
}
/* Breadcrumb links on hover to be dark red. */
.breadcrumbs li a:hover
{
	color: rgb(190, 0, 0); /* Dark Red. */
}
/* Current breadcrumb page to be Blue. */
.breadcrumbs li.current a 
{
	color: rgb(52, 98, 135); /* BLUE. */
}

/* Adjust submenu to suit breadcrumb style on the left. */
.submenu
{
	float: right;
	line-height: 1.6;
	padding-top: 6px;
}


/* Wrapper
====================================================================================================================== */
/* Wrapper wraps around all main multiple column content, except header above. Class since same style might be applied again to another wrapper further down. */
.wrapper 
{
	/* background-color: #DDDDDD;  CHANGE COLOUR OR DELETE!!! */
}



/* 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;
	color: rgb(34, 34, 34); /* Lighter grey. */
	background-color: #9C6; /* Green. */
	padding: 10px;
}



/* PrimaryContent (left column) as section
====================================================================================================================== */
/* Row with columns - might vary page or device dependant. */
section#primaryContent 
{
	/* background-color: #CCCCCC;  CHANGE COLOUR OR DELETE!!! */
}

.imgRight
{
	float: right;
	padding-left: 20px;
	padding-bottom: 10px;
}

/* Format bullet lists inside content. */
section#primaryContent ul
{
	padding-left: 40px;
	line-height: 1.3;
	color: rgb(34, 34, 34); /* Same as normal text colour. */
	margin-bottom: 0.9em; /* reduced from 1.25em. */
}

/* Distance right between Sponsor logos on Invitation pages. */
.SponsorMarginRight
{
	margin-right: 25px;
	margin-bottom: 20px;
}


/* Sub Nav
====================================================================================================================== */
/* Sub Nav. Override and add to suit.  */
.sub-nav 
{
	display: block;
	width: auto;
	overflow: hidden;
	margin: -0.25em 0 1.125em;
	padding-top: 0.25em;
	margin-right: 0;
	margin-left: -0.5625em; 
}
.sub-nav dt, .sub-nav dd 
{
	float: left;
	display: inline;
	margin-left: 0.5625em;
	margin-bottom: 0.625em;
	font-weight: normal;
	font-size: 0.875em; 
}
.sub-nav dt a, .sub-nav dd a 
{
	color: rgb(255, 0, 0); /* Red. */
	padding: 0.1875em 0.5625em;
	background: rgb(255, 255, 255); /* White. */
}     
/* Override border radius. Font weight normal instead of bold. Red bg. Pointer as cursor. */
.sub-nav dt.active a, .sub-nav dd.active a 
{
	-webkit-border-radius: 3px; /* Safari3-4, iOS 1-3.2, Android ≤1.6 */
	-moz-border-radius: 3px; /* FF1-3.6 */
	-khtml-border-radius: 3px; /* Linux */
	border-radius: 3px; /* Standard CSS3 syntax for Opera 10.5, IE9, Safari5, Chrome, FF4, iOS 4, Android 2.1+ */
	/* useful if you don't want a bg color from leaking outside the border: */
	-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;	
	
	font-weight: normal;
	background: rgb(255, 0, 0); /* Red. */
	cursor: pointer;
}
.sub-nav dt a:hover, .sub-nav dd a:hover
{
	background: rgb(190, 0, 0); /* Dark Red. */
	color: rgb(255, 255, 255); /* White. */
}


/* Buttons
====================================================================================================================== */
/* Override button style for all buttons. First change button link text to white (back from red declared for links earlier). 
Align text to the left. Change padding left and right. Remove margin bottom. Normal font weight. 
Also override bg colour to red and border colour to dark red. White text. Do NOT remove box-shadow. 
Override transition of bg colour. */
a.button
{
	color: rgb(255, 255, 255); /* White. */
}
.button, button.zemSubmit
{
	text-align: left;
	padding-left: 1em; /* equals 16px. */
	padding-right: 1em; /* equals 16px. */
	font-weight: normal;
	margin-bottom: 0em;
	
	background-color: rgb(255, 0, 0); /* Red. */
	border-color: rgb(190, 0, 0); /* Dark Red. */
	color: rgb(255, 255, 255); /* White. */
	
	/* Since transition is property, the last rule would override the first, so multiple rules applied with comma separated list. */
	-webkit-transition: background-color 300ms ease-out;
    -moz-transition: background-color 300ms ease-out;
    -o-transition: background-color 300ms ease-out;
    transition: background-color 300ms ease-out; 
}

/* Override hover effect and focus. Bg colour to be dark red. Remove link underline. Remove the box shadow on hover - just to make it more interesting. */
.button:hover, .button:focus,
button.zemSubmit:hover, button.zemSubmit:focus
{
    background-color: rgb(190, 0, 0); /* Dark Red. */
    text-decoration: none;
    
    /* Remove box-shadow. */
    -webkit-box-shadow: 0 0 0; 
	-moz-box-shadow: 0 0 0; 
	box-shadow: 0 0 0; 
}



/* Box for relevant downloads
====================================================================================================================== */
/* Float the whole box to the right inside the content. Margin left of box for distance to text for mobiles. More margin for larger screens -> media queries. 
Also margin-right for same indent as text. 100% width for mobile -> later media query with 40% width. */
.relDownloads
{
	float: left;
	width: 95%;
	margin-left: 10px;
	margin-right: 15px;
	margin-bottom: 15px;
}
/* Green bg colour behind heading text. top and bottom padding to show green bg colour. Usual margin on top. White text. */
.relDownloads h6
{
	background-color: rgb(67, 145, 160); /* GREEN. */
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 0.875em;
	color: rgb(255, 255, 255); /* WHITE. */
}
/* Heading and para with left and right indent. */
.relDownloads h6, .relDownloads p
{
	padding-left: 0.75em; /* equals 12px. */
	padding-right: 0.75em;
}
/* Override margin bottom -> same as margin on h6 above. */
.relDownloads p
{
	margin-bottom: 0.875em;
}
/* Links inside para to have small PDF icon as bg image. */
.relDownloads p a
{
	background-image: url(../img/pdficon_small.png);
	background-repeat: no-repeat;
}
/* Apply span in html to move text to reveal icon. */
.relDownloads p a span
{
	padding-left: 20px;
}


/* Feature page - Pagination
====================================================================================================================== */
/* Less padding then other ul's inside primary contnet. */
section#primaryContent ul.featurePagination
{
	padding-left: 30px;
}
/* Remove bullets, float list items left and appropriate padibng right of each number. */
.featurePagination li
{
	float: left;
	list-style-type: none;
	padding-right: 5px;
}

/* Tables 
====================================================================================================================== */
/* Reduce padding inside table for small screens only -> media query for padding above 480px. */
/* Override padding for table content set in foundation.css */
table thead tr th, table tfoot tr td, table tbody tr td 
{ 
	padding: 0.125em; /* equals 2px. */
	border: 1px solid rgb(221, 221, 221); /* Same grey as foundation.css around table outside for everything. */
}


/* Lightbox
====================================================================================================================== */
/* Also indent for Lightbox thumbnails left and right. Also bottom. */
.lightbox
{
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
}


/* ComplimentaryContent - (right column) as aside
====================================================================================================================== */
/* Row with columns - might vary page or device dependant. */
aside 
{
	/* background-color: #BBBBBB;  CHANGE COLOUR OR DELETE!!! */
}

/* Smaller font for p inside aside through foundation.css, but remove italic since font-face fonts are used. */
aside p 
{
	font-style: normal;
}

/* Side Nav overrides and changes. Remove padding bottom and set padding top to same as panel padding top in main content. 
Moved in with margin from right with media queries. Add margin-bottom again, whcih had been taken out by side-nav in foundation.css. */
ul.side-nav 
{
	padding-top: 0.875em; /* Equals 14px. */
	padding-bottom: 0px;
	margin-bottom: 1.25em;
}
/* Remove margin bottom and full bg colour in Nav Blue. */
.side-nav li 
{ 
	margin: 0; 
	background-color: rgb(0, 91, 137); /* Nav Blue. */
}
/* Override list items text colour with white. Apply appropriate padding top and bottom (prev margin top on li). 1em for left and right indent. */
.side-nav li a
{ 
	color: rgb(255, 255, 255); /* WHITE. */
	padding: 0.4375em 1em 0.4375em 3em;
}

/* Other indents: Only the second one needs to be indented. The next indent is done through ul. */
.side-nav li a
{
	padding-left: 1em;
}
.side-nav li a.indent
{
	padding-left: 2em;
}
.side-nav li a.doubleindent
{
	padding-left: 3em;
}
/*
.side-nav li ul
{
	margin-left: 0px;
	list-style-type: none;
}
.side-nav li li a.indent 
{
	padding-left: 3em;
}
*/

/* Active link in side nav. Override colour to white. Also red bg colour for active list link item. */
.side-nav li.active a 
{
	color: rgb(255, 255, 255); /* WHITE. */
	background-color: rgb(255, 0, 0); /* Red. */
	font-weight: normal;
}
/* Visited links also to have red bg colour. */
.side-nav li a:visited
{
	background-color: rgb(255, 0, 0); /* Red. */
}
/* Hover and active links on hover to have dark red bg. Remove link underline. */
.side-nav li a:hover, .side-nav li a:active
{
	background-color: rgb(190, 0, 0); /* Dark Red. */
	text-decoration: none;
}

.side-nav li.active li a
{
	background-color: rgb(0, 91, 137); /* Nav Blue. */
}

/* Override divider colour with white. */
.side-nav li.divider 
{
	border-top-color: rgb(255, 255, 255); /* WHITE. */
}

/* Quick link under feature image. Add margin top and bottom. Remove margin left and right since there is a row applied in this case fo this sidebar item. 
Media query for right indent, same as side-nav.*/
.row aside .row.ql
{
	margin-top: 1.25em;
	margin-left: 0em;
	margin-right: 0em;
	margin-bottom: 1.25em
}

/* Remove responsiveness of this small image. */
.row aside .row.ql img 
{ 
	max-width: none; 
	padding-bottom: 0.875em;
}



/* Forms
====================================================================================================================== */
/* Same padding for form as for paragraphs etc. Fieldset/legend already removed with label in CMS. */
.zemContactForm
{
	padding-left: 15px;
	padding-right: 15px;	
}

/* Remove margin bottom on input fields. */
input[type="text"], textarea 
{
  margin-bottom: 0em;
}

/* Get rid of boldness. */
label
{
	font-weight: normal;
}

/* Submit button added same declarations as normal buttons -> see above. */

/* Error messages to be displayed without bullet points. Colour olive green. */
.zemContactForm ul.zemError li
{
	list-style: none;
	color: rgb(209, 175, 71);
}

/* Display message sent in red colour. */
.zemThanks
{
	color: rgb(209, 175, 71);
	padding-left: 15px;
	padding-right: 15px;	
}



/* Forms input override (small devices and orientation change)
====================================================================================================================== */
/* Portrait is offset when changed from landscape if input fields are set to 100% width. 
Override foundation.css and set width to auto instead of 100% for portrait and landscape in that size. ???????
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
  width: auto;
}
*/


/* Home page styles
====================================================================================================================== */
/* Box for main teaser (right column on home page) to have normal margin left and right to allow for gradient to be indented correctly. 
Distance between boxes - ok for all devices. */
.home .row .row.mainTeaser, .home .row .row.quickLink
{
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
}
/* Also teaser to have border on the left. */
.home .row .row.mainTeaser
{
	margin-top: 0.875em;
	border-left: 3px solid rgb(231, 235, 241);
}
/* Remove bg colour on teaser box completely. */
.home .panel.mainTeaser
{
	background: none;
}
/* h5 outside columns for main teaser to have padding left and right (same as columns). */
.home .panel.mainTeaser h5
{
	padding-left: 0.9375em;
	padding-right: 0.9375em;
}
/* Same distance bottom as top. */
.home .panel
{
	padding-bottom: 0.875em;
}
/* Remove responsiveness of this small image. */
.home .row .row.quickLink img 
{ 
	max-width: none; 
	padding-bottom: 0.875em;
}

/* Whole feature box to be black with transparency. Padding around. Margin bottom for distance to breadcrumbs. */
.home .featureHome
{
	background: rgb(0, 0, 0); /* Fallback for browsers that don't support rgba. Black. */
	background: rgba(0, 0, 0, 0.8);
	margin-bottom: 1.25em;
	margin-top: 1em;
}
/* Heading inside feature to have green bg. Padding top and bottom. Remove margin top. */
.home .featureHome h2
{
	background: rgb(67, 145, 160); /* Green. */
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	margin-top: 0;
}
/* h2 and normal text inside feature box to be white. No bold font. Padding left and right. */
.home .featureHome h2, .home .featureHome p
{
	color: rgb(255, 255, 255); /* White. */
	font-weight: normal;
	padding-left: 15px; /* equals 0.9375em */
	padding-right: 15px; /* equals 0.9375em */
}
/* First p inside feature with no margin top and padding bottom. Then only the feature text (not the button) with padding top too. */
.home .featureHome p
{
	margin-bottom: 0;
	padding-bottom: 0.8125em;
}
.home .featureHome p.featureText
{
	padding-top: 0.8125em;
}

/* Remove margin bottom for p in quick links and main teaser on home page only. */
.home .mainTeaser p, .home .quickLink p
{
	margin-bottom: 0em;
}



/* PayPal
====================================================================================================================== */
/* Move Paypal button in from left as all the other text. */
.membership input[type="image"]
{
	padding-left: 15px;
}




/* Helper classes
====================================================================================================================== */

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

/* DELETE: Only to show the classes for me!!!!!!!!!*/
/* Visibility classes as overview. Class .visi applied for smaller font only -> delete in css. */
.visi
{
	font-size: 0.7rem; } /* 0.7rem*16px = 11.2px. */
}

/* Clearing i.e. after lightbox thumbnail images. */
.clearing
{
	claer: both;
}



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

/* Use CSS to Specify the Aspect Ratio of a Fluid Element: Aspect ratio to be specified for #map-canvas. 
Element #map-canvas is wrapped by container #map-container to specify thew width (here 100%). 
Also, the element #map-canvas has a dummy element as a previous sibling which will express the height as a function of the width. 
Overflow hidden to avoid text in map showing up left of map. Margin top, if required. */
#map-container 
{
    display: inline-block;
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 10px;
}
#dummy 
{
    padding-top: 75%; /* 4:3 aspect ratio */
}
#map-canvas
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #F20;
}
/* Fix display error of map controls and info boxes, due to (re)sizing the images for responsiveness. */
#map-canvas img
{
	max-width: none;
}
/* 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;
}



/* Video 
====================================================================================================================== */
/* In order to avoid not validating frame border for iframes, set them to zero here. */
.flex-video iframe 
{ 
	border: none; 
}



/* Custom Checkbox and Radio Inputs - Override/Fix
====================================================================================================================== */
/* Override foundation.css, where checkbox was set to negative z-index. */
form.custom .custom.checkbox 
{
    z-index: 0;
}



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

/* IE8 Gist - if required. 
====================================================================================================================== */
/* The Grid ---------------------- */
.lt-ie9 .row { width: 75em; max-width: 100%; min-width: 768px; margin: 0 auto; } /* Change to 75em. */
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row.large-collapse .column, 
.lt-ie9 .row.large-collapse .columns { padding: 0; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row .row.large-collapse { margin: 0; }
 
 /* Changed min-heiught from 1px to 0px -> test!!!!. */
.lt-ie9 .column, .columns { float: left; min-height: 0px; padding: 0 15px; position: relative; }
.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }
 
.lt-ie9 [class*="column"] + [class*="column"]:last-child { float: right; }
.lt-ie9 [class*="column"] + [class*="column"].end { float: left; }
 
.lt-ie9 .large-1, 
.lt-ie9 .row .large-1 { width: 8.33333%; }
 
.lt-ie9 .large-2, 
.lt-ie9 .row .large-2 { width: 16.66667%; }
 
.lt-ie9 .large-3, 
.lt-ie9 .row .large-3 { width: 25%; }
 
.lt-ie9 .large-4, 
.lt-ie9 .row .large-4 { width: 33.33333%; }
 
.lt-ie9 .large-5, 
.lt-ie9 .row .large-5 { width: 41.66667%; }
 
.lt-ie9 .large-6, 
.lt-ie9 .row .large-6 { width: 50%; }
 
.lt-ie9 .large-7, 
.lt-ie9 .row .large-7 { width: 58.33333%; }
 
.lt-ie9 .large-8, 
.lt-ie9 .row .large-8 { width: 66.66667%; }
 
.lt-ie9 .large-9, 
.lt-ie9 .row .large-9 { width: 75%; }
 
.lt-ie9 .large-10, 
.lt-ie9 .row .large-10 { width: 83.33333%; }
 
.lt-ie9 .large-11, 
.lt-ie9 .row .large-11 { width: 91.66667%; }
 
.lt-ie9 .large-12,
.lt-ie9 .row .large-12 { width: 100%; }
 
.lt-ie9 .row .large-offset-1 { margin-left: 8.33333%; }
.lt-ie9 .row .large-offset-2 { margin-left: 16.66667%; }
.lt-ie9 .row .large-offset-3 { margin-left: 25%; }
.lt-ie9 .row .large-offset-4 { margin-left: 33.33333%; }
.lt-ie9 .row .large-offset-5 { margin-left: 41.66667%; }
.lt-ie9 .row .large-offset-6 { margin-left: 50%; }
.lt-ie9 .row .large-offset-7 { margin-left: 58.33333%; }
.lt-ie9 .row .large-offset-8 { margin-left: 66.66667%; }
.lt-ie9 .row .large-offset-9 { margin-left: 75%; }
.lt-ie9 .row .large-offset-10 { margin-left: 83.33333%; }
 
.lt-ie9 .pull-2 { right: 16.66667%; }
.lt-ie9 .pull-3 { right: 25%; }
.lt-ie9 .pull-4 { right: 33.33333%; }
.lt-ie9 .pull-5 { right: 41.66667%; }
.lt-ie9 .pull-6 { right: 50%; }
.lt-ie9 .pull-7 { right: 58.33333%; }
.lt-ie9 .pull-8 { right: 66.66667%; }
.lt-ie9 .pull-9 { right: 75%; }
.lt-ie9 .pull-10 { right: 83.33333%; }
 
.lt-ie9 .push-2 { left: 16.66667%; }
.lt-ie9 .push-3 { left: 25%; }
.lt-ie9 .push-4 { left: 33.33333%; }
.lt-ie9 .push-5 { left: 41.66667%; }
.lt-ie9 .push-6 { left: 50%; }
.lt-ie9 .push-7 { left: 58.33333%; }
.lt-ie9 .push-8 { left: 66.66667%; }
.lt-ie9 .push-9 { left: 75%; }
.lt-ie9 .push-10 { left: 83.33333%; }
 
/* Nicolas Gallagher's micro clearfix */
.lt-ie9 .row { *zoom: 1; }
.lt-ie9 .row:before, .row:after { content: " "; display: table; }
.lt-ie9 .row:after { clear: both; }



/* Media Queries
====================================================================================================================== */
/* No Media Queries for required for screen sizes below 768px = 48em, due to mobile first. 
This means all declarations above are for screens below 768px (iPads, iPhones etc). */
/* 
480px = 30em
768px = 48em
1280px = 80em
1440px = 90em
*/

/* Smaller displays (but not smallest - thats above through mobile first): 480px - 767px. */
@media only screen and (min-width: 30em) {
	/* ------------ Wrapper around top bar (transparent) only visible above 480px. ------------ */
	/* Small padding-top and bottom only set for screens above 480px. */
	#topBarWrapper {
		padding-top: 20px;
		padding-bottom: 15px;
	}
	/* ------------ End Wrapper around top bar. ------------ */
	
	/* ------------ Relevant downloads box. ------------ */
	/* Larger margin left. */
	.relDownloads {
		margin-left: 25px;
	}
	/* ------------ End Relevant downloads box. ------------ */
	
	/* ------------ Table padding. ------------ */
	/* Padding inside table for screens above 480px. */
	table thead tr th, table tfoot tr td, table tbody tr td { 
		padding: 0.3125em; /* equals 5px; */
	}
	/* ------------ End Table padding. ------------ */
	
	/* ------------ Relevant Downloads box. ------------ */
	/* Float left instead of right and make 100% wide. */
	.relDownloads {
		float: right;
		width: 40%;
	}
	/* ------------ End Relevant Downloads box. ------------ */
}

/* Medium Displays: 768px - 939px. Styles for screens that are at least 768p = 48em.  */
@media only screen and (min-width: 48em) {
	
	/* ------------ Touch devices only. .touch class added to the body element by Modernizr, if applicable ------------ */
	.touch h1 {
		color: #F20; /* RED - CHANGE COLOUR OR DELETE!!!!! */
	}
	/* ------------ End Touch devices only. ------------ */
	
	/* ------------ Wrapper around top bar (transparent) only visible above 768px. ------------ */
	/* Larger padding-top and bottom only set for screens above 768px. */
	#topBarWrapper {
		padding-top: 50px;ARCH SE
		padding-bottom: 15px;
	}
	/* ------------ End Wrapper around top bar. ------------ */
	
	/* ------------ Footer second column right aligned. ------------ */
	#footer .largeRightAlign p {
		text-align: right;
	}
	/* ------------ End Footer second column right aligned. ------------ */
}

/* Breakpoint - Above breakpoint for top bar. 940px - 1279px. Styles for screens that are at least 940 px = 58.75em. */
@media only screen and (min-width: 58.75em) {
	
	/* ------------ Top bar above its breakpoint: Remove name/logo on very left of top bar completely. ------------ */
	.top-bar .name {
		display: none;
	}
	/* ------------ End Top bar above its breakpoint. ------------ */
	
	/* ------------ Wrapper around top bar (transparent) only visible above 940px. ------------ */
	/* Additioanl margin bottom in addition to padding-top and bottom only set for screens above 940px. */
	#topBarWrapper {
		padding-top: 50px;
		padding-bottom: 15px;
		margin-bottom: 25px;
	}
	/* ------------ End Wrapper around top bar. ------------ */
	
	/* ------------ Side nav & Quick Link. ------------ */
	/* Move whole nav bock in from right above the breakpoint. */
	.side-nav, .featureImg, .row aside .row.ql {
		margin-right: 1.25em; /* Equals 20px. */
	}
	/* ------------ End Side nav. ------------ */
	
	/* ------------ Home feature box. ------------ */
	/* Remove margin top on larger screens. */
	.home .featureHome {
		margin-top: 0em;
	}
	/* ------------ End Home feature box. ------------ */
	
	/* ------------ Home welcome text with indent right. ------------ */
	.home section#primaryContent .nontabbed h2, .home section#primaryContent .nontabbed h3, .home section#primaryContent .nontabbed p {
		padding-right: 30px;
	}
	/* ------------ End Home welcome text with indent right. ------------ */
}

/* Breakpoint - Below breakpoint. */
@media only screen and (max-width: 58.6875em) {
	/* Hide doubled up divider once menu is collapsed. */
	.hide-below-breakpoint {
		display: none !important;
	}
	/* On smaller screens make heading inside feature box on home page smaller.  */
	.home .featureHome h2 { 
		font-size: 1.375rem; /* equals 22px. */
	} 
}

/* Large Displays: 1280px - 1440px */
@media only screen and (min-width: 80em) {

}

/* X-Large Displays: 1440px and up */
@media only screen and (min-width: 90em) {

}

/* Landscape displays. */
@media screen and (orientation: landscape) {

}

/* Portrait displays. */
@media screen and (orientation: portrait) {

}