/****************************************************
					COLOUR GUIDE
*****************************************************/

/****************************************************
				   	  RESET
*****************************************************/ 
* {
    margin: 0;
    padding: 0;
    outline: none;
}

/****************************************************
				   GLOBAL STYLES
*****************************************************/ 
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    /*background-color: rgb(240, 240, 240);*/
    /* background-color: rgb(95, 95, 95); */
	background-color: #FAF0E6;
    height: 100%;
    font-size: 16px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
    font-weight: 400;
    height: auto !important;
    height: 100%;
    min-height: 100%;
 }

#footer {	
	background-color: rgb(75,84,95); 
	height: 60px; 
	padding-top:45px;
	text-align: center; 
	position: fixed; 
	bottom: 0; 
	width: 100%; 
	color: rgb(255, 255, 255);
	/* border-top: 5px solid rgb(65, 65, 65); */
}

img {
	max-width: 100%;
}

/****************************************************
				 HEADER STYLES
*****************************************************/
.header {
	/*background-color: #ADB96E;*/
	background-color: #FFFFFF;
	text-align:center;
	/* border-radius: 15px; */
	z-index: 10;
	
}

.logo {
	margin: 0 auto;
	background-color: #4B545F;
	/* background-color: rgb(75, 84, 95); */
	/*max-height: 149px;
	max-width: 640px;*/
}

.nav {
	background-color: rgb(75, 75, 75); 
	/*border: 1px solid rgb(225, 75, 75);*/
}
/****************************************************
				 NAVIGATION STYLES
*****************************************************/

ul#nav-flex-container {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row; /*Default - will also take column*/
	flex-wrap: no-wrap; /*Default - will also take wrap */
	justify-content: center; /*Default will also take center or flex-end*/
	align-items: center; /*For vertical alignment, also accepts flex-start and flex-end*/
}

nav > ul > li {
	display:inline-block;
	position: relative;
	/*float: left;*/
}

div.header {
	background-color: rgb(75, 75, 75); /*Extends navigation to full width. Will normally be the same background colour as the nav > ul > li > a below*/
}

/*Shows highlight link on current active page*/
nav li a.active {
    background-color: rgb(0, 84, 70);
    border-left: 1px solid rgb(255, 255, 255); 
    border-right: 1px solid rgb(255, 255, 255); 
}

/*Style for top level menu links*/
/* nav > ul > li > a {
	display:block;
	min-width: 160px;  /*Width of Top level menu items*/
	/* height: 40px; */
	/* line-height: 40px;  Allows for vertically centering */
	/* font-family: Calibri, sans-serif; */
	/*font-size: 1.0em; /*Relative to font size declared for body tag*/
	/*font-weight: 200;
	color: rgb(255, 255, 202); 
	background-color: rgb(75, 75, 75);
	text-align: center;
	text-decoration: none; */
	/*text-transform: uppercase;*/
	/*border-right: 1px solid rgba(0, 0, 0, .2);
}*/

/* nav > ul > li > a:hover {
	background-color: rgb(0, 84, 70);
	color: rgb(255, 255, 202); 
} */

/*nav > ul > li:hover > ul { Styles child menu block*/
	/* display: block;
	color: rgb(255, 255, 202); 
	background-color: rgb(0, 84, 70); 
	text-decoration: none; */
	/*border-right: 1px solid rgba(252, 252, 252, .2);
}*/

/*li a.last { Do we need this block??? may only be necessary when using active link highlighting
	border-right: none;
}*/

/*nav > ul > li > ul { /*Sets postioning for child menus DO NOT CHANGE*/
	/* display: none;
    position: absolute;
    overflow: hidden; */
    /*right: 5%;*/
    /*min-width: 160px;
    z-index: 100; Makes sure sub menu stays on top
}*/

/*nav > ul > li > ul > li:hover { Sets postioning for child menus DO NOT CHANGE*/
	/*max-width: 160px;
    z-index: 100; Makes sure sub menu stays on top
}*/

/* nav > ul > li > ul > li > a {
    color: rgb(255, 255, 202); 
    font-family: Calibri, sans-serif;
	font-size: 1.0em; Relative to font size declared for body tag
    text-decoration: none; */
    /*text-transform: uppercase;*/
    /*Aheight: 40px;
	line-height: 40px;  llows for vertically centering
	padding-left: 5px;
}*/

/* nav > ul > li > ul > li:hover { 
    background-color: rgb(95, 95, 95);
    color: rgb(255, 255, 202); 
    max-width: 160px;
}
    
nav > ul > li > ul > li  > a:hover { 
    background-color: rgb(95, 95, 95);
    color: rgb(255, 255, 202); 
    max-width: 160px;
 } */


#menu-icon {
	display: hidden;
	width: 40px;
	height: 30px;
	/* colour is #CF4D35 RGB 207 77 53 */
	background:  url(../Images/hamburgersq.png) center;
	/*background:  url(../Images/menu-iconrust.png) center;*/
}

a:hover #menu-icon {

	/*background-color: rgb(75, 84, 95);*/
	/*border-radius: 4px 4px 4px 4px;*/

}

/****************************************************
				 TABLE STYLES
*****************************************************/ 

/****************************************************
                 BUTTON STYLES
*****************************************************/
.btn {
  /*color: rgb(0, 115, 170);*/
  color: rgb(255, 255, 255);  
  font-size: 1.1em;
  background: rgb(207, 77, 53);
  font-weight: normal;
  width: 100px;
  height: 35px;
  border: 1px solid rgb(207, 77, 53); /* Buttons look best with borders */
  border-radius: 5px;
  cursor: pointer;
}
 
.btn:hover {
 color: rgb(255, 255, 255);
 background: rgb(181, 33, 6);
 border: 1px solid rgb(181, 33, 6);
}

/****************************************************
                 LINKS STYLES
*****************************************************/	

/****************************************************
                 PRINT STYLES
*****************************************************/	


/****************************************************
                 FORM STYLES
*****************************************************/	
fieldset {
	margin: 0 auto;
	border-radius: 5px;
	max-width: 750px;
}

fieldset legend {
	color: rgb(207, 77, 53);
}

input {
	font-size: 1em;
	height: 35px;
	padding-left: 8px;
	border: 1px solid rgb(217, 217, 217);
	border-radius: 3px;
}

/****************************************************
                GENERAL STYLES
*****************************************************/	
div#body-flex-container {
	margin: 0;
	padding-top: 15px;
	display: flex;
	flex-direction: row; /*Default - will also take column*/
	flex-wrap: no-wrap; /*Default - will also take wrap */
	justify-content: center; /*Default will also take center or flex-end*/
	align-items: center; /*For vertical alignment, also accepts flex-start and flex-end*/
}

div#body-flex-container > div {
	/*flex-grow: 1;*/ /*Fills screen width*/
	/*width: 33%;*/
	/*padding-top: 45px;*/
	color: rgb(75, 84, 95); 
	font-weight: 300;
	font-size: 1em;
	/*border: 1px solid rgb(75, 84, 95);  */
	border-collapse: collapse;
}

/*'flex' property is shorthand for flex-grow, flex-shrink, flex-basis
Default value is 0 1 auto;
flex-grow - numerical value that flex item will grow relative to the rest of the flex items in the flex container when free space is distributed 
flex-shrink - numerical value that flex item will shrink relative to the rest of the flex items in the flex container when free space is distributed 
flex-basis - specifies initial  size of the flex item. Percentages OK*/

div.left {
	align-self: flex-start;
	flex: 1 6 25%; 
	-webkit-order: 1;
    order: 1;
	padding-left: 15px;
    /*Styles below are for easy viewing of layout and can be changed*/
	/*margin: 4px;
    padding: 5px;
    border: 1px solid rgb(136, 136, 187); 
    border-radius: 7pt;
    background: rgb(204, 204, 255);*/
}

article {
	align-self: flex-start;
	flex: 3 1 50%;
	-webkit-flex: 3 1 60%;
	-webkit-order: 2;
    order: 2;
    /*Styles below are for easy viewing of layout and can be changed*/
	margin: 4px;
    padding: 25px;
    border: 1px solid rgb(75, 75, 75);
    /*border-style: double;*/
    /*border-radius: 7pt;*/
    background: rgb(255, 255, 255);
}

div.right { 
	align-self: flex-start;
	flex: 1 6 25%;
	-webkit-flex: 1 6 20%;
	-webkit-order: 3;
     order: 3;
	 padding-left: 35px;
	 /*Styles below are for easy viewing of layout and can be changed*/
	/*margin: 4px;
    padding: 5px;
    border: 1px solid rgb(136, 136, 187);
    border-radius: 7pt;
    background: rgb(204, 204, 255);*/
}

/*ul li:first-child { background: #c2d775;}
ul li:nth-child(2) { background: #007278;}
ul li:nth-child(3) { background: #c7b600;}
ul li:nth-child(4) { 
	background: #a90077; 
	align-self: flex-end;}*/ /*Takes any of the attributes of align-items and apllies them only to the element in question */
/*ul li:nth-child(5) { background: #00a378;}
ul li:last-child { background: #00ea72;}*/

/****************************************************
                MEDIA QUERIES
*****************************************************/	

@media screen and (min-width: 901px) { /*Rules apply for browser width above 901 px - Computer screens*/

}

@media only screen and (min-width : 481px) and (max-width : 900px)  { /*Rules apply for browser width between 480 and 900 px - Tablets */
div#body-flex-container {
	-webkit-flex-flow: column;
    flex-direction: column;
}

#body-flex-container > article,  #body-flex-container> div.left,  #body-flex-container > div.right {
/* Return them to document order */
	-webkit-order: 0;
     order: 0;
}

#body-flex-container > div.left,  #body-flex-container > div.right, header, footer {
	min-height: 50px;
	/*max-height: 150px;*/
	overflow: hidden; /*Keeps things clean but can hide content*/
}
}	
	

@media only screen and (max-width : 480px) { /*Rules apply for browser width below 480 px - Phones*/

#menu-icon {
	display:inline-block;
	float: left;
}

nav ul#nav-flex-container {
	display: none;
	position: absolute;
	left: 0px;
	top: 45px;
	list-style-type: none;
	background-color: #0099AB; 
	border: 1px solid rgb(75, 84, 95);
	padding-right: 5px;
	margin-right: 5px;
	/*border-radius: 5px;*/
	width: 30%;
	z-index: 10;
}

nav ul#nav-flex-container:hover {
	display: flex;
	flex-direction: row; 
	flex-wrap: wrap;
	z-index: 3;
}

nav:hover ul#nav-flex-container {
	display: block;
}

div#body-flex-container {
	-webkit-flex-flow: column;
    flex-direction: column;
}

#body-flex-container > article,  #body-flex-container> div.left,  #body-flex-container > div.right {
/* Return them to document order */
	-webkit-order: 0;
     order: 0;
}

#body-flex-container > div.left,  #body-flex-container > div.right, header, footer {
	min-height: 50px;
	/*max-height: 150px;*/
	overflow: hidden; /*Keeps things clean but can hide content*/
}
}