@charset "utf-8";

/*
POLKA colours
Pink: #ed3755
Dark Blue: #2a6fd0
Light Blue: #65b2ff (Use this blue for most)

*/

/* ................................. Reset css so different browser behaviour is more consistent ................................. */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, section {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 1em;
	font-family: inherit;
	vertical-align: baseline;
}

/* Handle HTML5 elements in older browsers */
article, aside, dialog, figure, footer, header, hgroup, section, main, heading {
	display: block;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

table, td, th {
	vertical-align: middle;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

a img {
	border: none;
}


/* ................................. end of Reset css ................................. */


/* ................................. Global .................................. */

/*
Polka Red: #ed3755
Polka Light Blue: #65b2ff
Polka Dark Blue: #2a6fd0

*/

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em; /* Any em font sizes will be relative to this value, so changing this affects ALL the text */
	line-height: 1.5;
	text-align: left;
	overflow-y:scroll; /* Stop scroll moving template position - overflow-y is a CSS 3 property, so won't validate as CSS 2.1, but still behaves same across browsers so no worries  */
}

#size_wrapper {
	width: 980px; /* 960px = most common size for 1024 x 760 screens = no horizontal scroll bar + a little breathing space - Just change this to make a wider or smaller layout and the page content and other areas will adapt accordingly - Also change 'logo_address' width if change this */
	margin-left: auto; /* Centre the page in the browser */
	margin-right: auto; /* Centre the page in the browser */
	position: relative; /* Ensure that any 'absolute'ly positioned elements are relative to the main wrapper - i.e. keep within stated width */
}

header { /* long blue bar with white above*/
	width: 100%;
	height: 211px;
	background: url(images/global/banner_bg.png) repeat-x bottom; /* Repeating banner image goes to edge of page */
	background-color: #65b2ff; /* POLKA blue */
}

#banner_image {
	height: 107px; /* Same height as the blue coloured part of the banner_bg.png graphic */
	background-image: url(images/global/banner.jpg); /* Add the banner central engine graphic */
	background-repeat: no-repeat;
	position: relative;
	top: 28px;
}


*:first-child+html #banner_image { /* IE7 bug fix - Make sure the banner image appears inside the blue bar */
	top: -12px;
}


#logo_address { /* Controls banner graphic and text - future-proof for further additions */
	width: 980px; /* 960px = most common size for 1024 x 760 = no horizontal scroll bar + a little breathing space - Just change this to make a wider or smaller layout and the page content and other areas will adapt accordingly - Also change 'size_wrapper' width if change this */
	margin-left: auto; /* Centre the page in the browser */
	margin-right: auto; /* Centre the page in the browser */
	position: relative; /* Ensure that any 'absolute'ly positioned elements are relative to the main wrapper - i.e. keep within stated width */
	padding-top: 5px;
	color: #646464;	
}

#polka_logo { 
	margin-top: -174px;	
	height: 107px; /* height required else it will collapse to nothing and can't see image */	
	background-image: url(images/global/polka-logo.png); /* Add the polka logo */
	background-repeat: no-repeat;
	position: relative;
}

#eu_flag { 
	margin-top: -110px;
	margin-left: 840px;	
	height: 107px; /* height required else it will collapse to nothing and can't see image */	
	background-image: url(images/global/EU-flag.png); /* Add the flag image */
	background-repeat: no-repeat;
	position: relative;
}

#title { /* ----------------   Polka text - reversed out of box   -------------------- */
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1.8em;
	padding: 1px;
	padding-top: 5px;
	color: #ffffff;
	background-color: #ef3756; /* POLKA pink */
	height: 40px;
	width: 580px;
	margin-top: 30px;
	margin-left: 200px;
	text-align: center;
}

/* Footer set to very bottom of each page */	
footer { 
  position: fixed; 
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #b6b7b7;
  text-align: center;
  padding: 12px;
}



/* --------------------------------  Navigation ------------------------------------ */

/* Amend 'main' width if this is changed */
nav { /* Left nav wrapper for positioning */
	width: 180px; /* Amend 'main' width if this is changed + Set 'nav ul' width to same value */
	margin-top: 0; /* This is the distance from the lowest HTML in the DOM (NOT the 'nav_menu' CSS as this absolutely positioned, i.e. out of context flow) */
	float: left; /* All content below will rise up to wrap around nav */
	margin-bottom: 10px;
	margin-left: -30px;
}

/* Strip the ul of padding and list styling */
nav ul {
	list-style-type: none;
	margin:0;
	padding:0;
	position: absolute;
	width: 180px; /* Same as nav */
}

nav p {
	font-size: 1.2em;
	padding-left: 0;
	padding-bottom: 0;
}
nav ul li {
	border-bottom: #dad7d7 thin solid;
}

/*Style for menu links - both mobile and big*/
nav li a {
	display: block;
	min-width: 140px;
	height: 24px; /* Same 'height' and 'line height' = vertically centres text */
	line-height: 24px;
	text-align: left;
	text-indent: 7px;
	color: #666666;
	background: #fff;
	text-decoration: none;
	
	/* Use CCS transitions to make the hover effect gradual and smooth - 1/2 a second - will degrade gracefully on old browsers and IE, i.e. noram hover effect */
	-moz-transition: background-color .5s ease; /* Gecko: Firefox */
	-o-transition: background-color .5s ease; /* Presto: Opera */
	-webkit-transition: background-color .5s ease; /* Webkit: Safari and Google Chrome */
	-ms-transition: background-color .5s ease; /* Trident: Microsoft / IE */
	transition: background-color .5s ease; /* Set transition properties: bgcolor, duration, ease type */
}

/*Hover state for links*/
nav li:hover a {
	background-color: #65A5FF; /* Deep blue */
	color: #FFFFFF !important; /* White text */
}

/*Prevent text wrapping*/
nav li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}

/*Style 'show menu' label button and hide it by default*/
nav .show-menu {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #fff;
	background: #09F;
	text-align: center;
	padding: 10px 0;
	display: none;
	background-image: url(images/show_menu_lines_icon.png);
	background-repeat: no-repeat;
	background-position: right;
}

/*Hide checkbox*/
nav input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
nav input[type=checkbox]:checked ~ #menu{
    display: block;
}

/* --------------------------------   End of Navigation  ------------------------------------ */


img.border {
	padding: 5px;
	border: #616161 solid thin;
}

main { /* Page content */
	margin-top: -20px;
	margin-left: 200px; /* Amend 'navigation' width if this is changed */
	padding-top: 20px;
	color: #3c3c3d;
}


#content_area {
	width: auto; /* scale to fill the area as the layout size may change in the future */
	margin-top: 20px; /* This is the distance from the lowest HTML in the DOM (NOT the 'nav_menu' CSS as this absolutely positioned, i.e. out of context flow) */
}

* html #content_area { /* Use the IE hack to stop this applying to non-IE browsers - Applies to IE6 and below */
	display: block; /* IE6 bug fix - Stop the double margin bug + provide 'layout' so positioning works */
}

.hide { /* This effectively removes items from the document */
	display: none;
}

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
	padding: 5px;
}




/* .............................................................. End of Global ............................................................... */




/* ................................. Content styles .................................. */


#content_area h1 {
	font-size: 1.6em;
	color: #65b2ff; /* Polka blue */
	padding-top: 5px;
	padding-left: 0;
	padding-bottom: 5px;
	margin-bottom: 8px;
}

#content_area h1.red {
	color: #ed3755;
}

#content_area h2.red {
	color: #ed3755;
}

#content_area a .red{
	color: #ed3755;
}

.red {
	color: #ed3755;
}

#content_area h2 {
	font-size: 1.2em;
	font-weight: bold;
	color: #646464;	/* Grey */
	padding-bottom: 3px;
}

#content_area h3 {
	font-size: 1.1em;
	padding-bottom: 3px;
	font-weight: bold;
	color: #646464;	/* Grey */
}

#content_area .page_links{
	font-size: 1.2em;
}

aside { /* Grey box rounded corners at right of page */
	width: 260px;
	background-color: #DDDDDD;
	float: right;
	padding: 30px;
	margin-left: 30px;
	margin-bottom: 30px;
	
	/* Rounded corners */
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
	
	/* Shadow */
	-moz-box-shadow: 3px 4px 4px #CCCCCC;
	-webkit-box-shadow: 3px 4px 4px #CCCCCC;
	-khtml-box-shadow: 3px 4px 4px #CCCCCC;
	box-shadow: 3px 4px 4px #CCCCCC; /* Horizontal offset, vertical offset, blur radius, colour */	
}

#content_area aside ul {
	 list-style: none; /* Remove bullets */
}

aside ul li {
	border-bottom: #dad7d7 thin solid;
	margin-left: -23px;
}

aside a {
	display: block; /* Make the hover link effect go all across */
	padding: 2px;
	text-decoration: none;
	color: #3c3c3d;
	
	/* Use CCS transitions to make the hover effect gradual and smooth - 1/2 a second - will degrade gracefully on old browsers and IE, i.e. noram hover effect */
	-moz-transition: background-color .5s ease; /* Gecko: Firefox */
	-o-transition: background-color .5s ease; /* Presto: Opera */
	-webkit-transition: background-color .5s ease; /* Webkit: Safari and Google Chrome */
	-ms-transition: background-color .5s ease; /* Trident: Microsoft / IE */
	transition: background-color .5s ease; /* Set transition properties: bgcolor, duration, ease type */
}

aside li a {
	text-indent: 7px; /* Move the text slightly to the right */
}

aside a:hover {
	background-color: #ed3755; /* polka red */
	color: #FFFFFF !important; /* White text */
}

aside h1 {
	margin-top: -20px;	
}


#white_sidebar {
	width: 600px;
	float: left;
	padding: 20px;
	margin-top: 0;
	margin-left: 20px;
	margin-bottom: 20px;
}

.large_text {
	font-size: 1.2em;
}

table {
	padding: 1px;
	border-spacing: 5px;
}

p {
	margin-bottom: 1em;
}

p.light_tint {
	background-color: #DDDDDD;
	padding: 10px;
	
	/* Rounded corners */
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

.emphasise {
	font-weight: bold;
}


#content_area ul {
	margin: 1em;
	padding: 1em;
}

em {
	font-style: italic;
}

abbr,
acronym { /* Use the 'abbreviation' and 'acronym' element and add a title (tool tip) in the HTML */
	border-bottom: 1px dotted #333333;
}

abbr:hover, abbr:focus,
acronym:hover, acronym:focus {
	cursor: help; /* Show the question mark */
}

.clear {
	clear:both;
}

main p a {
	color: #3c3c3d;
}

main p a:hover {
	text-decoration: none;
	color: #000000;
}

p a.wsm {
	padding: 5px;
	/* Use CCS transitions to make the hover effect gradual and smooth - 1/2 a second - will degrade gracefully on old browsers and IE, i.e. noram hover effect */
	-moz-transition: background-color .5s ease; /* Gecko: Firefox */
	-o-transition: background-color .5s ease; /* Presto: Opera */
	-webkit-transition: background-color .5s ease; /* Webkit: Safari and Google Chrome */
	-ms-transition: background-color .5s ease; /* Trident: Microsoft / IE */
	transition: background-color .5s ease; /* Set transition properties: bgcolor, duration, ease type */
}

p a.wsm:hover {
	background-color: #b2ce37;
}

.staff_box {
	width: 300px;
	background-color:#CCC
}

.staff_member img {
	padding-right: 10px;
}

.staff_member {
	width: 250px;
	height: 200px;
	background: #0C3;
}

/* Set default sizes for the large images on the page */
img.info1 {
	width: 685px;
	height: 477px;
}

img.info2 {
	width: 649px;
	height: 453px;
}

img.info3 {
	width: 691px;
	height: 488px;
}

img.info4 {
	width: 692px;
	height: 489px;
}





/* ---------------   Home   ---------------- */

.parallax {
  /* The image used */
  background-image: url('./images/maths.jpg');

  /* Change height to affect how much of the BG image is seen - 100% = whole image */
  height: 300px; 
		margin-bottom: 20px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed; /* The 'fixed' creates the scroll effect - otherwise the image would behave/scroll as normal */
  background-position: center;
  background-repeat: no-repeat; /* Omit this to have repeating pattern of BG image, assuming 'bg-size' not set to 'cover' (i.e. fill area) */
  background-size: cover;
	/* 'Cover' = BEST = fills width. Can set a width in px or %
	
	'cover': Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.
	
	'contain': Scales the image as large as possible without cropping or stretching the image.
	
	The background-size property is specified in one of the following ways:
    Using the keyword values 'contain' or 'cover'.
    Using a width value only, in which case the height defaults to 'auto'.
    Using both a width and a height value, in which case the first sets the width and the second sets the height. Each value can be a <length>, a <percentage>, or auto.
	*/
}

.redbar {

	margin-top: 30px;
	background-color: #ed3755;
	font-size:16px;
	padding: 20px;
	padding-top: 30px;
	color: #FFFFFF;
}

.redbar h2 {
	color: #FFFFFF !important;
}

.bluebar {
	margin-top: 20px;
	background-color: #65b2ff;
	font-size: 16px;
	padding: 20px;
	padding-top: 30px;
	color: #FFFFFF;
}

.bluebar h2 {
	color: #FFFFFF !important;
}


.EU {
	display: table; /* Display as a table so can use 'table-cell' and 'Vertical-align' in the <p> */ 
	color: #FFFFFF;
	background-color: #003399;
	padding: 15px;
	float: left; /* Float this so that it stretches to contain the size of the image (and content) */
	vertical-align: middle;
}

.EU p {
	display: table-cell;
	vertical-align: middle;

}

.EU img {
	float: left;
	margin-top: 5px;
	padding-right: 15px;
}

/* ---------------   Research and open Positions  ---------------- */

table {
	background-color: #afcfff;
}

table th {
	background-color: #65b2ff;
	color: white;
}

.researchTable {
	width: 100%;
}

table.table-res {
	width: 100%;
}

.researchTable table tr:nth-child(1), .researchTable tr:nth-child(2), .researchTable tr:nth-child(3) {
	background-color: #f96b7f;
}

.researchTable table tr:nth-child(4), .researchTable tr:nth-child(5), .researchTable tr:nth-child(6) {
	background-color: #ffff66;
}

.researchTable table tr:nth-child(7), .researchTable tr:nth-child(8), .researchTable tr:nth-child(9) {
	background-color: #66ff66;
}

.researchTable table tr:nth-child(10), .researchTable tr:nth-child(11), .researchTable tr:nth-child(12) {
	background-color: #81d5ff;
}

.researchTable table tr:nth-child(13), .researchTable tr:nth-child(14), .researchTable tr:nth-child(15) {
	background-color: #9999ff;
}


.researchRed h2, .researchYellow h2, .researchGreen h2, .researchBlue h2, .researchPurple h2 {
	color: #000000 !important;
}

.researchRed {
	background-color: #f96b7f;
	padding: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
	color: #000000;
}

.researchYellow {
	background-color: #ffff66;
	padding: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
	color: #000000;
}

.researchGreen{
	background-color: #66ff66;
	padding: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
	color: #000000;
}

.researchBlue {
	background-color: #81d5ff;
	padding: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
	color: #000000;
}

.researchPurple {
	background-color: #9999ff;
	padding: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
	color: #000000;
}

.researchTable table a {
	color: #000000;
}

.researchTable table a:hover {
	color: blue;
	text-decoration: none;
}

.researchTable table tr.noPosition { /* Grey out a position that has been filled */
	background-color: #AAAAAA;
}


/* ---------------   Project Consortium   ---------------- */

table.table-partners {
	width:100%;
}

/* ---------------   Online Lectures   ---------------- */
table.table-lectures {
	width:100%;
	table-layout: fixed;
}

table.table-lectures th {
	text-align: center;
}

table.table-lectures td {
	text-align: center;
}

table.table-lectures th.title1, table.table-lectures th.title2, table.table-lectures th.title3 {
	width: 35%;	
}

table.table-lectures th.date1, table.table-lectures th.date2, table.table-lectures th.date3 {
	width: 10%;	
}

/* ---------------   Workshops   ---------------- */
table.table-workshops {
	width:100%;
	table-layout: fixed;
}

table.table-workshops th {
	text-align: center;
}

table.table-workshops td {
	text-align: center;
}

table.table-workshops th.scientific, table.table-workshops th.scientific2 {
	width: 45%;	
}

table.table-workshops th.host, table.table-workshops th.host2 {
	width: 10%;	
}

table.table-workshops th.location, table.table-workshops th.location2 {
	width: 17%;	
}

table.table-workshops th.date, table.table-workshops th.date2 {
	width: 18%;	
}

table.table-workshops th.network, table.table-workshops th.network2 {
	width: 10%;	
}

.workshops section {
	background-color: #65b2ff; 		 
	margin-bottom: 20px;
	padding: 20px;
}


/* ---------------   People   ---------------- */

.people_group {
	background-color: #ecf1eb;
}

.people_group h2 {
	font-size: 1.7em !important;
	margin-left: 30px;
	padding-top: 20px;
}

.person { /* Default style */
	display: block;
	width: 20%;
	float: left;
	padding-left: 2.5%;
	padding-right: 2.5%;
	padding-bottom: 90px;
	height: 200px;
	text-align: center;
    vertical-align: middle;
	
	/* Use CCS transitions to make the hover effect gradual and smooth - 0.3 of a second - will degrade gracefully on old browsers and IE, i.e. normal hover effect */
	-moz-transition: background-color .3s ease; /* Gecko: Firefox */
	-o-transition: background-color .3s ease; /* Presto: Opera */
	-webkit-transition: background-color .3s ease; /* Webkit: Safari and Google Chrome */
	-ms-transition: background-color .3s ease; /* Trident: Microsoft / IE */
	transition: background-color .3s ease; /* Set transition properties: bgcolor, duration, ease type */
}

.person a {
	padding-left: 2px;
	padding-right: 2px;
}

.person a:hover {
	color: #FFFFFF;
	background-color: #65b2ff;
}

img.people {
	float: right;
	margin-left: 50px;
	margin-bottom: 20px;
}

h2.people {
	font-size: 1.5em !important;
	margin-bottom: 15px;
}


/* -----------------  Media Gallery  ------------------*/

section.media {
	background-color: aquamarine;
	width: 100%;
	margin-left: auto;
    margin-right: auto;
}

.media-item {
	width: 245px;
	height: 340px;
	margin-right: 15px;
	margin-bottom: 20px;
	background-color: #d9d9d9;
	float: left;
}

/* Overide 'Media Item' height for the photo pages. Add this is auxillary class to relevant media items in relevant pages */
.media-item250 {
	height: 250px;
}

.media-item a {
	color: #FFFFFF;
}

.media-item p {
	padding: 15px;	
	color: #000000;
}

.media-item p.icon {
	background-image: url(images/media/icon-photo.png);
	background-repeat: no-repeat;
	background-position: 10px 10px;
	text-align: center;
	text-decoration: underline !important;
}

.media-bar {
	background-color: #65b2ff;
	height: 40px;
	margin-top: -5px;
	padding: 10px;
	color: #FFFFFF;
	background-image: url(images/media/icon-photo.png);
	background-repeat: no-repeat;
	background-position: 10px 10px;
	/* text-indent: 35px; */
	text-align: center;
}

/** LIGHTBOX MARKUP - MODAL effect **/

   .lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 90%;
	max-height: 80%;
	margin-top: 2%;
}

/* :target selector = Highlight active HTML anchor.
URLs with an # followed by an anchor name link to a certain element within a document.
The element being linked to is the target element and the :target selector can be used to style the current active target element. */
.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}


/* -----------------  Contact  ------------------*/

.box-center {
	background-color: #65b2ff;
	padding: 20px;
	background: linear-gradient(to right, #65b2ff, #FFFFFF);
}


/* -----------------  Search  ------------------*/

form div table {
	background-color: #FFFFFF;
}


		
input[type=submit] {
	background-color: #ed3755;
	color: white;
	padding: 10px;
	text-decoration: none;
	margin: 4px 2px;
	cursor: pointer;
}


/* ---------------   Members   ---------------- */



h1.member {
	color: #ed3755 !important;
}

/* Hover state for links */
nav.member li:hover a {
	background-color: #ed3755; /* Polka red */
}


div.errorstyle {
	width: 50%;
	background-color: #D80E0E;
	padding: 6px;
}

div.errorstyle p {
	color: #FFFFFF;
	margin-left: 10%;
	font-size: 1.5em;
}

div.errorstyleMember {
	width: 50%;
	height: 30px;
	background-color: #D80E0E;
	padding: 6px;
}

div.errorstyleMember p {
	color: #FFFFFF;
	margin-left: 10%;
	font-size: 1.5em;
}

div.success_style {
	background-color: #093;
	padding: 10px;
}

div.success_style p {
	margin-left: 90px;
	font-size: 1.3em;
}

/* --------- Agendas and minutes ------------ */

/* Note that the 'Agendas and Minutes' table is mostly controlled by the 'Workshops' CSS as the columns are identical - but table-minutes overides 'Meeting' and 'Location' column sizes */
table.table-minutes th.location {
	width: 27%;	
}

table.table-minutes th.scientific {
	width: 35%;	
}



/* ---------------   ADMIN   ---------------- */



h1.admin {
	color: #305622 !important;
}

/* Hover state for links */
nav.admin li:hover a {
	background-color: #305622; /* Green*/
}

table.table-admin {
	width:100%;
}

h2.adminName {
	font-size: 2em !important;
}


/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<   Form styles  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<  */

form input {
    font-family: inherit;
    font-size: 1em;
    border-radius: 5px;
    background-color: #65b2ff;
    color: #FFEEAA;
    padding: 0.25em;
    border: 1px;
    border-width: thin;
    border-color: #FFEEAA;
}

.form-style-2 {
    max-width: 800px;
    padding: 20px 12px 10px 20px;
}

.form-style-2 label {
    display: block;
    margin: 0px 0px 15px 0px; /* TRouBLe */
}

.form-style-2 label > span {
    width: 100px; /* Distance of labels from the fields */
    font-weight: bold;
    float: left;
    padding-top: 8px;
    padding-right: 55px; /* Padding distance between labels and fields */
}

.form-style-2 input.input-field {
    width: 48%; 
	color: #000000;
}

.form-style-2 input.input-field {	
    border-radius: 5px;
    background-color: #65b2ff;
    padding: 0.25em;
    border: 1px;
    border-width: thin;
    border: 1px solid #C2C2C2;
    padding: 7px;
}

.form-style-2 .input-field:focus {
    border: 1px solid #0C0;
}

.form-style-2 input[type=submit],
.form-style-2 input[type=button] {
    border: none;
    padding: 8px 15px 8px 15px;
    background: #ed3755;
    color: #fff;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.form-style-2 input[type=submit]:hover,
.form-style-2 input[type=button]:hover{
    background: #EA7B00;
    color: #fff;
}

/* Make grey placegholder (in form field) more legible */
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #FFFFFF;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #FFFFFF;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #FFFFFF;
}

/* GOOGLE Search */
form.googleSearch input[type=text] {
	height: 32px;
}

 /* <<<<<<<<<<<<<<<<<<<<<<<  End of Form styles <<<<<<<<<<<<<<<<<<<<<<<<<<< */
 

/* ------------------------------------------- Mobile Styles --------------------------------------------- */

/* HTML STRUCTURE 	
body
	logo_address
		banner_image
	size_wrapper
		content_area
		p
		nav			
*/


/* iPad in portrait and iPhone in landscape is 768px */


/* Cater for tablets */
@media screen and (max-width:990px){
	
	/* Fix iPhone 6 landscape problem where the fonts are way too big - Stop them scaling up */
	body {-webkit-text-size-adjust: none;}
	
	/* NOTE: All these styles will apply to ALL the browser sizes which are 960 and below, so only need to apply this once (instead of inside each media query) */
	
	
	/* Scale the top level elements to fill the screen */
	#size_wrapper {
		width: 100%;
		margin-right: 2px;
	}
	
	#logo_address {
		width: 100%;
		padding-left: 20px; /* Add breathing space to the left */
	}
	
	#title { 
		margin-left: 174px;
	}
	
	nav {  /* Reduce nav size and move to the right by 150px - as whole 'content_area' moves left */
		float: left;
		margin-left: -20px;
		width: 180px; /* Set 'nav ul' to same value */
	}
	
	nav ul {
		width: 180px;
	}
		
	#content_area img.scale { /* Make selected images scaleable - up to their native size */
		max-width: 100%;
		width: 100%;
		border: none;
	}
	
	main { /* Page content */
		margin-left: 200px;
		padding-right: 15px;
	}
	
	#eu_flag { 
		display: none;
	}
	
	aside {
		width: 200px;
		padding: 20px;
		margin-top: -50px;
	}
	
	img.info1, img.info2, img.info3, img.info4 { /* Make specific page images scaleable */
		width: 92%;
		height: auto;
	}
	
	footer {
		display: none;
	}
	
	div.errorstyleMember {
		/* Reset height to cater for mulitiple lines of text */
		height: auto;
	}

} /* End of max-width:960px */




/* ------------------ Cater for smaller tablets and smaller mobile devices ----------------------------- */
@media screen and (max-width:767px){
	
	#size_wrapper {
		/* background-color: black !important;  Set a background colour to see if media query working */
		width: 98%;
	}
		
	nav {
		width: 100%; /* Scale the 'nav' containing div to enable the 'ul' and 'li' elements to be scaled */
		margin: 0;
		margin-top: -40px;
		margin-bottom: 10px;
	}

	nav ul { /* Hide the links by default */
		width: 100%;
		position: static;
		display: none;
		margin: 0;
		padding: 0;
	}
	
	/* Create vertical spacing */
	nav li {
		margin-bottom: 1px;
	}
	
	/* Make all menu links full width and centre */
	nav ul li, nav li a {
		width: 100%;
		text-align: center;
		text-indent: 0;
		margin-left: -15px;
	}
	
	/* Display 'show menu' link */
	nav .show-menu {
		display:block;
		margin-top: 10px;
	}
	
	#logo_address { 
		width: 100%;
		text-align: center;
		padding: 0;
		margin: 0;
		height: auto;
	}
	
	#polka_logo { 
		margin-top: 10px;	
		height: 90px; /* height required else it will collapse to nothing and can't see image */
		background-position: center;
	}
	
	#title { /* ---- POLKA text + box ----------- */
		height: auto;
		width: 100%;
		text-indent: 0;
		text-align: center;
		padding: 0;
		padding-top: 5px;
		padding-bottom: 5px;
		margin: 0;
	}
	
	header { /* long blue bar */
		height: auto;
		background: none; /* Remove repeating banner */
		margin: 0;
		width: 100%;
	}
	
	#banner_image {
		display: none;
	}

	#eu_flag {
		display: none;
	}
	
	main { /* Page content */
		width: 100%;
		margin-top: 40px;
		margin-left: 0; /* Amend 'navigation' width if this is changed */
		padding-top: 0;
		padding: 0;
		padding-right: 10px;
	}
	
	aside {
		width: 96%;
		background-color: #DDDDDD;
		float: none;
		padding: 2%;
		padding-top: 20px;
		margin-top: 15px;
		margin-left: 0;
		margin-bottom: 20px;
		padding-bottom: 10px;
	}
	
	#white_sidebar {
		width: 100%;
		padding: 0;
		margin-top: 0;
		margin-left: 0;
	}	
	
	.person { /* make people split to separate lines and scale to 100% of browser */
		display: inline;
		width: 100%;
		padding-left: 0; /* Remove left and right padding to stop them expanding outside smaller screens */
		padding-right: 0;
	}
	
	.parallax {
		background-attachment: scroll; /* Resets parallax effect back to normal scroll */
	}
	
	section.media {
		width: 250px;	
	}
	
	/* Reset tables from 'fixed' to 'auto' on 'workshops' and 'lectures' pages so that columns are not overalapped */
	table.table-workshops, table.table-lectures {
		table-layout: auto;
	}
	
}