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

/****************************************************
				    GLOBAL STYLES
*****************************************************/ 

body {
	font-family: 'Open Sans', sans-serif;
	/*font-family: 'Roboto Slab', serif;*/
	font-size: 16px;
	background-color: rgb(240, 240, 240);
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	color: #000;
}

#header {
	background-color: #4B545F;
	height: 100px;
	width=100%;
	text-align: center;
	}

#menu {
	background-color: #FCFCFC;
	height: 50px;
	width=100%; 
	text-align: center; 
	line-height: 50px; 
	vertical-align: middle;
	border-bottom: 2px solid rgb(229, 229, 229);
	}

#footer {	
	background-color: #4B545F; 
	height: 80px; 
	text-align: center; 
	position: fixed; 
	bottom: 0; 
	width: 100%; 
	color: #FFFFFF;
	}
	
#pagecontent {	
	background-color: #FFFFFF; 
	margin: 0 auto; 
	position:absolute; 
	left:0; 
	right: 0; 
	width: 65%;
	}
	
p { 
	/*font-size: 80%; */
	padding-left: 10px;
	padding-top: 10px;
	}

/****************************************************
				 NAVIGATION STYLES
*****************************************************/ 	

nav {
	/*max-width: 1100px;*/
	text-align: center;
	margin: 0 auto;
	
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}

ul#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(252, 252, 252); /*Extends navigation to full width. Will normally be the same background colour as the nav > ul > li > a below*/
}

/*Style for menu links*/
nav > ul > li > a {
	display:block;
	min-width: 160px;
	height: 50px;
	line-height: 50px;  /*Allows for vertically centering*/
	font-family: Roboto Slab, serif;
	font-size: 1em; /*Relative to font size declared for body tag*/
	color: rgb(0, 0, 0);
	background-color: rgb(252, 252, 252); 
	text-decoration: none;
	border-right: 1px solid rgba(0, 0, 0, .2);
	text-align: center;
}

nav > ul > li > a:hover {
	color: rgb(207, 77, 53);
	background-color: rgb(255, 255, 255); 
	text-decoration: none;
	/*border-right: 1px solid rgba(252, 252, 252, .2);*/
}

nav > ul > li:hover > ul { /*Styles child menu block*/
	display: block;
	color: rgb(0, 0, 0); 
	background-color: rgb(255, 255, 255); 
	text-decoration: none;
}

li a.last {
	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: 300px;
    z-index: 100; /*Makes sure sub menu stays on top*/
    text-align: left;
    padding-left: 10px;
}

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

nav > ul > li > ul > li > a {
    color: rgb(0, 0, 0); 
    font-family: Roboto Slab, serif;
	font-size: 1em; /*Relative to font size declared for body tag*/
    text-decoration: none;
    height: 50px;
	line-height: 50px;  /*Allows for vertically centering*/
	padding-left: 5px;
}

nav > ul > li > ul > li > a:hover { 
    background-color: rgb(255, 255, 255);
    color: rgb(207, 77, 53); 
    max-width: 300px;
 }

/*Style for Directory menu links*/
li.directory a {
	display:block;
	min-width: 45px;
	height: 50px;
	line-height: 50px;
	font-family: Roboto Slab, serif;
	font-size: 1em;
	font-weight: 400;
	color: rgb(0, 0, 0);
	background-color: rgb(252, 252, 252); 
	text-decoration: none;
	border-right: none;
}

li.directory a:hover {
	/*display:block;
	min-width:150px;
	height: 50px;
	line-height: 50px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
	color: rgb(207, 77, 53);
	background-color: rgb(255, 255, 255); 
	text-decoration: none;
}

#menu-icon {

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

a:hover #menu-icon {

	background-color: #4B545F;
	border-radius: 4px 4px 4px 4px;

}

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

.TableNoStriping {
	margin: 0 auto;
	border-width : 1px;
	border-style : solid;
	border-color : #A8A8A8;
	padding: 0 0 0 0;
	height: 100%;
}

.TableWideNoStriping {
	max-width: 1200px;
	margin: 0 auto;
	border-width : 1px;
	border-style : solid;
	border-color : #A8A8A8;
	padding: 0 0 0 0;
	height: 100%;
}

.TableWide {
	max-width: 1200px;
	margin: 0 auto;
	border-width : 1px;
	border-style : solid;
	border-color : #A8A8A8;
	padding: 0 0 0 0;
	height: 100%;
}

.TableWide tr:nth-child(even) {
  background-color: rgb(255, 255, 255);
}


.TableWide tr:nth-child(odd) {
  background-color: rgb(224, 224, 224);
}

/*Table.TableWide Tr.d0 Td {
	background-color: #FFFFFF;
	font-family: Verdana, Arial, sans-serif;
	font-size: 1em;	
}
Table.TableWide Tr.d1 Td {
	background-color: #E0E0E0;
	font-family: Verdana, Arial, sans-serif;
	font-size: 1em;	
}

Table.TableWide Tr.d2 Td {
	background-color: #FAF9E7;
	font-family: Verdana, Arial, sans-serif;
	font-size: 1em;	
}*/

.JobListingHeader {
	font-size: 1.1em;
	font-weight: 200;
	font-family: 'Open Sans', sans-serif;
	color: rgb(255, 255, 255);
	text-align: left;
	padding-left: 12px;
	padding-top: 7px;
	padding-bottom: 7px;
	border: 1px solid rgb(88, 88, 88);
	background-color: rgb(75, 84, 95);

}	

.TableData {
	font-size: 1em;
	font-weight: normal;
	font-family: 'Open Sans', sans-serif;
	text-align: left;
	padding: 2px 0px 2px 15px;
}	

.TableDataForm {
	font-size: 1em;
	font-weight: normal;
	font-family: 'Open Sans', sans-serif;
	text-align: right;
	padding: 2px 0px 2px 15px;
}

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


h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 15px;
	padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}

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

a {
	color: rgb(207, 77, 53);
	font-size: 10pt;	

a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	max-width: 100%
	border: none;
}

}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	/*color: rgb(207, 77, 53);*/
	text-decoration: none; 
	font-size: 1em;
}
/* a:visited {
	color: #6E6C64;
	text-decoration: underline; */

a:hover, a:active, a:focus { 
	text-decoration: none;
	color: rgb(0, 0, 0);
}

.submenu > a { /*This is neccessary to style the dropdown nav lists BEFORE the dropdown links are hovered over (when you hover over the parent link and the dropdown first shows)*/
	color: rgb(240, 240, 240);
}

.has-sub > a:after {
    /*content: '>';*/
    position: absolute;
    color: rgb(240, 240, 240); 
	text-decoration: none;
    right: 14px;
}

a.directorylink {
	color: #000000;
}

a.directorylink:visited {
	color: rgb(207, 77, 53);
}	

a.qref {
	font-size: .9em;
	font-weight: normal; 
	/* color: #3299A8; */
	color: rgb(207, 77, 53); 
	text-decoration: None;
}

a.qref:hover {
	font-size: .9em;
	font-weight: normal; 
	/* color: #3299A8; */
	color: rgb(103, 143, 28); 
	text-decoration: None;
}

a.qref:visited {
	color: rgb(207, 77, 53);
	font-size: .9em;	
}		

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

.TitlePrint {
	font-size: 1em;
	font-weight: bold;
	font-family: 'Open Sans', sans-serif;
	color: rgb(0, 0, 0);
}


.JobDataPrint {
	font-size: 1em;
	font-weight: normal;
	font-family: 'Open Sans', sans-serif;
}

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

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

textarea {
	padding-left: 8px;
	border: 1px solid rgb(217, 217, 217);
	border-radius: 3px;
	font-family: Verdana;
	font-size: 1em;
}


/****************************************************
                GENERAL STYLES
*****************************************************/	
.container {
	width: 960px;
	background-color: #FFF;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
	border-radius: 15px;
	border-width : 1px;
	border-style : solid;
	border-color : #4B545F;
}

.sidebar1 {
	float: right;
	width: 200px;
	background-color: #FFFFFF;
	padding-bottom: 10px;
	border-radius: 5px; 
}

.contentdirectory {

	padding: 10px 0;
	width: 900px;
	margin-left: auto;
    margin-right: auto;
	
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.contentlists  {
	font-size: 10pt;
	font-weight: normal; 
	color: #000000; 
		/* padding: 0 15px 15px 40px;  this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}

/* ~~ The footer ~~ */
.footer {
	background-color: rgb(75, 84, 95);
	position: relative; /* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	text-align: center;
	padding-bottom: 0px;	
}

.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

.directoryheading {
	max-width: 100%;
	background:#CCCCCC; 
	padding: 2px; 
	padding-left: 6px; 
	border-top: 1px solid #4B545F;
	border-left: 1px solid #4B545F;
	border-right: 1px solid #4B545F;
	font-size: 10pt;
}

.Data {
	font-size: 1.2em;
	font-weight: 300;
	font-family: 'Open Sans', sans-serif;
}

.DataNormal {
	font-size: 1em;
	font-weight: normal;
	font-family: 'Open Sans', sans-serif;
	padding: 2px 0px 2px 4px;
}

/* FAQ style section */
h1 {
	text-align: center;
	font-family: Roboto Slab, serif;
	font-size: 2em;
	font-weight: 400;
	margin: 10px 0 2px;
}

h2 {
	font-family: Roboto Slab, serif;
	font-size: 1.4em;
	font-weight: normal;
	margin: 8px 0 4px;
}

div.faq-entry .question a {
	font-size: 10pt;
	font-weight: normal; 
	/* color: #3299A8; */
	color: #0000FF; 
	text-decoration: None;
}

div.faq-entry .answer p {
	margin: 8px 0 15px 15px;
	border-left: 10px solid #cccccc;
	background-color: #f4f4f4;
	line-height: 1.4em;
	padding: 10px;
	font-size: 12px;
}

.searchresults {
	padding: 20px;
	font-size: .9em;
}

.small {
	font-size: .8em;
}

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

@media screen and (min-width: 1250px) { /*Rules apply for browser width above 901 px - Computer screens*/
	
nav {
	height: 50px;
	width: 100%; 
	text-align: center;
}
}

@media only screen and (min-width : 481px) and (max-width : 1250px)  { /*Rules apply for browser width between 480 and 1250 px - Tablets */
	
nav {
	background-color: #FCFCFC;
	height: 50px;
	width: 100%; 
}
	
#menu-icon {
	display:inline-block;
	float: left;
}	

/*Lose right border on ul container between 5-600 pixels*/

nav ul#flex-container {
	display: none;
	position: absolute;
	left: 0px;
	top: 150px;
	list-style-type: none;
	background-color: rgb(252, 252, 252); 
	border: 1px solid rgb(75, 84, 95);
	/*border-radius: 5px;*/
	width: 50%;
	z-index: 3;
}

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

nav li {
	background-color: rgb(252, 252, 252);
	text-align: center;
	width: 100%;
	padding: 0;
	margin: 0;
	border-right: none;
}

nav li a {
	border-right: none;
}

nav li.directory {
	max-width: 35px;
	height: 50px;
	line-height: 50px;
	padding: 7px;
}

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

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

#pagecontent {	
	width: 96%;
	}

textarea {
	width: 98%;
}	

menu {
	height: 50px;
	position: absolute;
}

nav {
	background-color: #FCFCFC;
	height: 50px;
	width: 100%; 
	/*margin-left: 25px;*/
}

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

nav ul#flex-container {
	display: none;
	position: absolute;
	left: 5px;
	top: 150px;
	list-style-type: none;
	background-color: rgb(252, 252, 252); 
	border: 1px solid #4B545F;
	overflow: hidden;
	/*border-radius: 5px;*/
	width: 50%;
	z-index: 3;
}

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

nav li {
	background-color: rgb(252, 252, 252);
	text-align: center;
	width: 100%;
	padding: 0;
	margin: 0;
	border-right: none;
}

nav li a {
	border-right: none;
}

nav li.directory {
	max-width: 35px;
	height: 50px;
	line-height: 50px;
	padding: 5px;
}	

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