/*
 *  WSL Colours:
 * =============
 *  BLUE: #293086
 *  GREY: #A7A9AC
 *  WHITE: #FFFFFF
 */

/*
 * Locally host fonts
 * 
 * Thanks to:
 * https://google-webfonts-helper.herokuapp.com/fonts/open-sans?subsets=latin
 */

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('fonts/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v15-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/open-sans-v15-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v15-latin-600.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/open-sans-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('fonts/open-sans-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v15-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}


body {
	margin: 0;
	font-family: 'Open Sans',Roboto,"Helvetica Neue",Arial,sans-serif;
}

a {
	color: #293086;
	text-decoration: none;
}

a:active,
a:hover {
	outline: 0;
	/*border-bottom: 1px dotted;*/
	/*text-shadow: -1px 1px #666;*/
	text-shadow: 0px 0px 2px #333;
}

.footer a {
	color: #fff;
	text-decoration: none;
}

b,
strong,
.strong {
	font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-rendering: optimizeLegibility;
	color: #293086;
	margin: 1em 0 -0.3em;
	font-weight: 700;
}

h1 {
	font-size: 1.75em;
	line-height: 1em;
	text-indent: -2em;
	border-style: none none dotted none;
	border-width: 2px;
	border-color: #A7A9AC;
}

h2 {
	font-size: 1.5em;
	line-height: 1.111em;
	text-indent: -1em;
}

h3 {
	font-size: 1.25em;
	line-height: 1.333em;
}

h4 {
	font-size: 1.1em;
	line-height: 1.2em;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	font-weight: inherit;
}



/*
 * 
 * DIVS
 * 
 */

div.header{
	/*total width = width + left padding + right padding + left border + right border + left margin + right margin */
	width : 60%;
	
	/*Order: top,left,bottom,right*/
	padding: 0px 20% 0px 20%;
	color: #293086;
	text-align: center;
	background-color : #fff;
	border-bottom: 10px solid #293086;
}

div.bodytext{
	width: 60%;
	margin: 1em 20%;
	display: inline-block;
	font-size: 1em;
	font-style: normal;
	color: #333;
}


div.footer{
	position: fixed;
	bottom: 0;
	width : 60%;
	padding: 0px 20% 0px 20%;
	font-size: 0.7em;
	color: #fff;
	text-align: center;
	background-color : #A8A9AD;
}

/*
 * BLOCKQUOTE
 */
blockquote {
    padding: 1em;
    border-left: 15px solid #A7A9AC;
    font-style: italic;
    font-weight: 300;
    color: #fff;
    background: #293086;
    clear: both;
}

blockquote p {
    margin: 1em 0 auto;
}

blockquote p:nth-child(odd) {
    margin-bottom: 0;
    text-indent: 2em;
    font-style: normal;
}

blockquote h1,
blockquote h2,
blockquote h3,
blockquote h4,
blockquote h5,
blockquote h6 {
	color: #fff;
	margin: 0 0 -0.3em;
	font-style: normal;
}

/*
 * Callout Block
 */
.callout {
    padding: 1em;
    border-left: 15px solid #A7A9AC;
    font-style: normal;
    font-weight: 300;
    color: #fff;
    background: #293086;
    clear: both;
}

.callout p {
    margin: 1em 0 auto;
}

.callout h1,
.callout h2,
.callout h3,
.callout h4,
.callout h5,
.callout h6 {
	color: #fff;
	margin: 0 0 -0.3em;
	font-style: normal;
}

.callout a {
	color: #fff;
	text-decoration: none;
}

/*
 * IMAGES
 */

img.float_left {
	float: left;
	margin: 15px;
}

img.float_right {
	float: right;
	margin: 15px;
	clear: right;
}

.bodytext ul {
	line-height: 1.3em;
}

/*
 * 
 * NAVBAR
 * 
 */

div.navbar{
	width: 80%; /*100% minus 10% padding each end*/
	margin: 0;
	padding : 0 10%;
	font-size: 1em;
	font-weight: 600;
	color: #fff;
	background-color : #A7A9AC;
}


.navbar > ul{
	list-style-type: none;
	margin: 0;
	/*padding: 5px 10% 5px 0;*/
	padding: 0;
	color: #fff;
	text-align: center;
	overflow: hidden;
	background-color: #A7A9AC;
}

ul.subnavbar{
	border-style: solid none none none;
	border-width: 2px;
	border-color: #fff;
}

.navbar li {
	border-style: none solid none none;
	border-width: 0 2px;
	border-color: #fff;
	float: left;
}

.navbar li a {
	color: #fff;
	display: block;
	text-decoration: none;
	padding: 5px 1em;
}

/* Change color on hover */
.navbar li:hover, li.nav_active{
	background-color: #293086;
}