@charset "utf-8";
/*Author: Vicki Pearson
New style sheet for Inlon
*/

/*Design comments
Please don't change order of rules applying to screen sizes as the wrong styles will overwrite
*/

/*Use these to target specific width screens - at present only using 2 to target smnartphones and desktops
@media (min-width:481px) and (min-width:641px){ /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */

@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
}
@media (max-width:959px) { /* big landscape tablets, laptops, and desktops */
}
/*Reset margins and paddings to zero to account for browsers having different defaults*/
html
{
	overflow-y: scroll;
}

html, body
{
	margin: 0;
	padding: 0;
	font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
}
html
{
	height: 100%; /*for sticky footer*/
}
/*General pages styles*/
body
{
	color: black;
	
	font-weight: 300;
	font-size: 1.15em;
	line-height: 1.4;
	height: 100%;
	
}
h1, h2, h3, h4, h5, h6
{
	line-height: 1;
	font-weight: 100;
	/*color: #77C7AC;*/
	color: #5982c3;
	margin: 5px 0px;
}
h2:before, h3:before
{ 
  display: block; 
  content: " "; 
  margin-top: -50px; 
  height: 50px; 
  visibility: hidden; 
}

a
{
	text-decoration: none;
	font-weight: 300;
	color: #4200FF;
	color: blue;
}
a:visited
{
	color: #3A3AC9;
}
a[href] :hover
{
	color: #3c3c3c;
}

p a
{
	text-decoration:underline
}
/*Layout styles*/
#wrapper
{
	/*width: 70%;*/
	margin:0 auto;
	min-height: 100%; /*for sticky footer*/
	/*border:1px solid yellow;*/
}
#content
{
	background-color: #fff;
	width:67%;
	max-width:750px;
	margin:0 auto;
	padding-top: 150px;	
	/**border:1px solid red;/**/
	padding-bottom: 80px;
}

footer
{
	background-color: #3c3c3c;/*Darker grey for the footer ORIGINAL*/
	background-color: grey;
	text-align: center;
	height: 50px; /*was 50px before copyright*/
	margin-top: -50px; /*For sticky footer must equal size of footer*/
	color: #bababa;
	width: 100%;
	position: relative;
	clear: both; 
	font-weight: 300;/*Font styles here instead of for a tag, so that the copyright text is the same size*/
	font-size: .875em;
}
footer nav a{
	line-height: 20px;
	text-align:center;
	color: #fcfcfc;
	/*font-weight: 300;
	font-size: .875em;*/
	padding:5px;
}
footer nav a:hover
{
	color: #00C;
}

.centerClass
{
	text-align: center;
}
.centerClass img
{
	display: block;
	margin: 0 auto;
	padding:0 !important;
}

img.centerClass
{
	display: block;
	margin: 0 auto;
}

nav a:visited
{
	color: white;
}

@media (min-width:320px) 
{ /* smartphones, iPhone, portrait 480x320 phones */

	header
	{
		height: 100px;
		width: 100%;
		overflow: hidden;
		position: fixed;
		/*padding: 0 10px;*/
		top: -20px;
		left: 0;
		z-index: 999;
		background-image: url(/images/headerBackSmall.png);
		background-repeat: repeat-x;
		-webkit-transition: height 0.3s;
		-moz-transition: height 0.3s;
		-ms-transition: height 0.3s;
		-o-transition: height 0.3s;
		transition: height 0.3s;
	}
	header h1#logo
	{
		/*margin: 0 auto;*/
		height: 100px;
		width: 100px;
		/*min-width:180px;*/
		height: 91px;
		line-height: 55px;
		font-size: 55px;
		/*margin: 0;*/
		margin-left: 10px;
		background-image: url(/images/newLogoSm.png);
		background-position: 50% 0%;
		background-repeat: no-repeat;
		z-index: 5;
		margin:0 0 0 10px;
		
	}
	header nav
	{
		/*display: block;
		float: none;
		height: 150px;
		margin: 0 auto;*/
		text-align: center;
		position:absolute;
		top:20px;
		/*right:50px;*/
		right:0px;
		width:240px;	
	}
	header nav a
	{
		line-height: 20px;
		/*margin-left: 10px;*/
		margin: 0px 5px;
		color: #fcfcfc;
		font-weight: 300;
		font-size: .875em;
	}
	header nav a:hover
	{
		color: #00C;
	}
	
	
	footer nav:not(a)
	{
		font-size: 0.7em;
	}
	/*footer
	{
		font-size:0.7em;
	}*/
		#leftBar
	{
		display: none;
	}
	#rightBar
	{
		display: none;
	}
	/*header.smaller
	{
		height: 75px;
	}*/
	header.smaller h1#logo
	{
		/*height: 40px;
		line-height: 40px;
		font-size: 30px;
		background-image: none;*/
		
	}/*
	header.smaller nav
	{
		height: 35px;
	}*/
	header.smaller nav a
	{
		line-height: 10%;
		
	}
	/*Now in bottom of css*/
	/*img
	{
		max-width: 100%;
		height: auto;
	}*/
	img.floatRight
	{
		display: none;
	}
	#wrapper
	{
		width: 98%;
	}
	/*To use entire width of screen, as this is precious on phones.*/
	#content
	{
		margin: 0 auto;
		width: 98%;
	}/**/
	
}
 
@media (min-width:950px) 
{ /* hi-res laptops and desktops */
	header
	{
		height: 180px;
		width: 100%;
		overflow: hidden;
		position: fixed;
		/*padding: 0 10px;*/
		padding: 0;
		top: -20px;
		left: 0;
		z-index: 999;
		background-image: url(/images/headerBack2.png);
		background-repeat: repeat-x;
		
		-webkit-transition: height 0.3s;
		-moz-transition: height 0.3s;
		-ms-transition: height 0.3s;
		-o-transition: height 0.3s;
		transition: height 0.3s;
	}
	
	header h1#logo
	{
		display: inline-block;
		/*width: 16%;*/	
		height: 152px;
		background-image: url(/images/LogoL.png);
		background-position: 50% 0%;
		background-repeat: no-repeat;
		/*border: 1px solid red;*/
		/*padding:0;*/
		
		width:230px;
		margin-left: 16%;/*In case the browser doesn't support calc*/
		/* Firefox */
		margin-left: -moz-calc(26.2% - 250px);	/*Mozilla: 26%(quarter of 70% from wrapper, plus 16% of 70 for leftBar width) - 250px(width of left nav menu + 20px padding)*/
		/* WebKit */
		margin-left: -webkit-calc(26.2% - 250px);
		/* Opera */
		margin-left: -o-calc(26.2% - 250px);
		/* Standard */
		margin-left: calc(26.2% - 250px);
		
	}
	header nav
	{
		display: inline-block;
		float: right;
		width:auto;
		width:40%;
		min-width:500px;
		/*margin-right: 10%;*/
		margin:0;
		margin-top:30px;
		/*font-size: 1em;
		font-size: 1.5vw;*/
		/*border:1px solid black;
		background-color:#333;*/
	}
	header nav a
	{
		height: 50px;
		float:left;
		/*line-height: 150px;*/
		/*margin-left: 20px;*/
		margin:0;
		color: #fcfcfc;
		font-weight: 300;
		/*background-color: #333;*/
		padding: 14px 16px;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
	}
	header nav a:hover
	{
		/*color: #00C;*/
		color:white;
		background-color:#333;
	}
	header.smaller
	{
		background-image: url(/images/headerBackS2.png);
		background-repeat: repeat-x;
		width: 100%;
		height: 100px;
		z-index: 1000;
		position: fixed;
		
		
	}
	header.smaller h1#logo
	{
		/*width: 16%;*/
		height: 100px;
		line-height: 55px;
		font-size: 55px;
		/*margin: 0;*/
		background-image: url(/images/newLogoSm.png);
		/*background-position: 50% 0%;
		background-repeat: no-repeat;*/
		z-index: 5;
		/*margin-left:11%;*/
	}
	
	*, *:before, *:after
	{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	header.smaller h1#logo
	{
		line-height: 50px;
		font-size: 30px;
	}
	header.smaller nav
	{
		height:40px;
		margin-top:0px;
		
	}
	header.smaller nav a
	{
		/*line-height: 50px;*/
		line-height: 22px;
		padding: 7px 16px;
		height:100%;
	}
	
	footer
	{
		font-size:0.875em;
	}
	footer nav:not(a)
	{
		font-size: 0.875em;
	}
	
	#leftBar
	{
		width: 16%;
		float: left;
		margin-top: 160px;
		/*margin-bottom: 10px;*/
		/*padding-left: 10px;*/
		/*color: black;*/
		/*position: fixed;*/
		display: inline;
		padding-right: 20px;
	}
	#leftBar a
	{
		color: black;
	}
	
	/****LEFT BAR SUB-MENUS****/
	/**-->*/
	#leftMenu
	{
		/*border: 1px solid red;*/
	}
	/* We remove the margin, padding, and list style of UL and LI components */
	#leftMenu a
	{
		width: 100%;
	}
	
	#leftMenu ul, #leftMenu ul li{
		margin:0;
		padding:0;
		list-style:none;
		float:right;
	}
	
	/* We apply background color and border bottom white and width to (150px) 230px */
	#leftMenu ul li{
		background-color:grey;
		border-bottom:solid 1px white;
		width:230px;
		border-top: 1px solid gray;
		text-align: left;
		border-left: 1em solid #0072c6;
		/**/border-left: 1em solid #6493BC;/**/
	}
	
	#leftMenu ul li:last-child
	{
		border-bottom: 1px solid gray;
	}
	
	/* We apply the background hover color when user hover the mouse over of the li component */
	#leftMenu ul li:hover{
		background-color:black;
		position:relative;
		border-color: #0072c6;
	}
	#leftMenu ul li.navBreak:hover{
		background-color:#AAB;
		background-color:#6493BC;
		position:relative;
		border-color:#AAB;
		border-top: 1px solid gray;
		border-left: 1em solid #6493BC;
		border-bottom: 1px solid white;
	}
	
	/* We apply the link style */
	#leftMenu ul li a{
		padding:2px 5px;
		color:#ffffff;
		display:inline-block;
		text-decoration:none;
		font-size:14px;
	}
	
	/**** SECOND LEVEL MENU ****/
	/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
	#leftMenu ul li ul{
		position:absolute;
		display:none;
	}
	
	/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */
	#leftMenu ul li:hover ul{
		left:210px;
		top:0px;
		display:block;
	}
	
	/**** THIRD LEVEL MENU ****/
	/* We need to hide the 3rd menu, when hovering the first level menu */
	#leftMenu ul li:hover ul li ul{
		position:absolute;
		display:none;
	}
	
	/* We show the third level menu only when they hover the second level menu parent */
	#leftMenu ul li:hover ul li:hover ul{
		display:block;
		left:150px;
		top:0;
	}
	
	#leftBar .navBreak
	{
		height: 5px;
		background-color: #AAAABB;
		background-color: #6493BC;
	}
	/*<--*/
	
	#rightBar
	{
		width: 16%;
		float: right;
		margin-top: 155px;
		padding-right: 10px;	
		color: black;
		display: inline;
	}
	#rightBar ul{
		padding:0;
		margin:0;
	}
	#rightBar li{
		list-style-type:none;
	}
	#rightBar img
	{
		max-width:200px !important;
	}
	#navList
	{
		padding: 0 1px 1px;
		margin-left: 0;
		font: bold 12px 'Segoe UI', sans-serif;
		background: gray;
		width: 14em;
		float: right;
	}
	#navList li
	{
		list-style: none;
		margin: 0;
		border-top: 1px solid gray;
		text-align: left;
	}
	#navList li a
	{
		display: block;
		padding: 0.25em 0.5em 0.25em 0.75em;
		border-left: 1em solid #AAB;
		background: #CCD;
		text-decoration: none;
	}
	#navList li a:hover
	{
		border-color: #00C;
		color: #FFF;
		background: #332;
	}
	/*Now in bottom of css*/
	/*img
	{
		max-width: none;
		height: auto;
	}*/
	img.floatRight
	{
		display: block;
		float: right;
		height: 100%;
		padding: 10px 0px;

	}
	#wrapper
	{
		width: 70%;
	}
	/*To use entire width of screen, as this is precious on phones.*/
	#content
	{
		width:67%;
		/*max-width:750px;*/
		margin:0 auto;
		padding-top: 150px;	
		padding-bottom: 80px;
	}/**/
	
}


/*Mobile Menu*/
.slicknav_menu 
{
	display:none;
}

/*@media screen and (max-width: 40em)*/	
@media screen and (max-width: 950px) 
{
	.js #menu 
	{
			display:none;
	}
	.js .slicknav_menu 
	{
			display:block;
	}
}

#menuPosition /*This is to hook the mobile menu to */
{
	position:absolute;
	top:80px;
	left:10px;
}

img
	{
		max-width: 100%;
		height: auto;
	}