/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/

/*
* Extensive modifications (good and ill!)
* Joseph Pierce
* www.joepierce.org
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* Mar 2023
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Font Import
- Banner
- Grid
- Base Styles

- Navbar

- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/

/* Font Import 
-------------------------------------------------- */

@font-face {
  font-family: "RalesLight";
  src: url("../fonts/raleway/Raleway-Light.woff") format("woff");
    font-style: normal;
    font-weight: 100;
    text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "RalesExtra";
  src: url("../fonts/raleway/Raleway-Bold.woff") format("woff");
    font-style: normal;
    font-weight: 400;
    text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "Rales";
  src: url("../fonts/raleway/Raleway-Regular.woff") format("woff");
    font-style: normal;
    font-weight: 400;
    text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "Rales";
  src: url("../fonts/raleway/Raleway-SemiBold.woff") format("woff");
    font-style: bold;
    font-weight: 700;
    text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "Rales";
  src: url("../fonts/raleway/Raleway-Italic.woff") format("woff");
    font-style: italic;
    font-weight: 400;
    text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "Rales";
  src: url("../fonts/raleway/Raleway-SemiBoldItalic.woff") format("woff");
    font-style: italic;
    font-weight: 700;
    text-rendering: optimizeLegibility;
}



/* Banner
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.banner {
  position: relative;
  width: 100%;
/*  max-width: 960px; */
  margin: 0 auto;
  padding: 0 0px;
  box-sizing: border-box; 
  background-color: #1F3165; }

/* Default Small */
.bannerInner {
    background-image: url(../images/scot_vector_darkest_blue.png); 
	background-size: 44px 55px;
	background-repeat: no-repeat;
	background-position: 260px 10px; }


/* Larger than 400 */
@media (min-width: 400px) {
.bannerInner {
    background-image: url(../images/scot_vector_darkest_blue.png); 
	background-size: 44px 55px;
	background-repeat: no-repeat;
	background-position: 240px 10px; }
}


/* Larger than phablet */
@media (min-width: 550px) {
.bannerInner {
    background-image: url(../images/scot_vector_darkest_blue.png); 
	background-size: 52px 65px;
	background-repeat: no-repeat;
	background-position: 275px 10px; }
}


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }


/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 765px */
@media (min-width: 765px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }


}



/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }

	body {

  	font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  	line-height: 1.6;
/*  	font-weight: 400; */
  	font-family: "Rales", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222; 

/* HERE I AM

	background: #fff url(../images/scot_vector.png);

	background-size: 300px 300px;
	background-repeat: no-repeat;
	background-position: 50px -80px;

  
	@media (min-width: 400px) {

	background-size: 300px 300px;
	background-repeat: no-repeat;
	background-position: -80px -80px;
  
	}

	@media (min-width: 765px) {

	background-size: 300px 300px;
	background-repeat: no-repeat;
	background-position: 200px 200px;

	}

*/  
  
  
  }
  






/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 0.5; letter-spacing: .53rem; }
h5 { font-size: 1.5rem; line-height: 2;  letter-spacing: .50rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; text-transform: uppercase; margin-bottom: 2rem; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; letter-spacing: .41rem; }
  h5 { font-size: 2.0rem; letter-spacing: .35rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; 
  }

.ralesLight {
  font-family: "RalesLight", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }

.ralesExtra {
  font-family: "RalesExtra", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }

.sub_lighter {
  color: #777; }

.sub_lightest {
  color: #eee; }

.no-text {
    display: none;
    }



.hero-image {
 display: none;
 position: absolute;
 left: -210px;
 top: -82px;
 z-index: -1;
}



@media (min-width: 875px) {
.hero-image {
 display: inline;
 position: absolute;
 left: -210px;
 top: -82px;
 z-index: -1;
  background-image: url(../images/scot_roads_translucent_1000.png); /* The image used */ 			
  background-size: 300px 300px;
  background-color: #fff; /* Used if the image is unavailable */
  height: 300px; /* You must set a specified height */
  width: 300px; /* You must set a specified height */
  background-position: 0px 0px; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
#  background-size: cover; /* Resize the background image to cover the entire container */
}

}


@media (min-width: 1200px) {
.hero-image {
 display: inline;
 position: absolute;
# left: -210px;
# top: -82px;
 left: -240px;
 top: -40px;
 z-index: 1;
  background-image: url(../images/scot_roads_translucent_1000.png); /* The image used */ 			
  background-size: 100px 100px;
  background-color: #fff; /* Used if the image is unavailable */
  height: 100px; /* You must set a specified height */
  width: 100px; /* You must set a specified height */
  background-position: 0px 0px; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
#  background-size: cover; /* Resize the background image to cover the entire container */
}

}



/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a:link {
	color: #000;
	text-decoration: none;
	border-bottom: 2px dotted #B28600;
	}
	
a:visited {
	color: #000;
	text-decoration: none;
	border-bottom: 2px dashed #B28600;
	}
	
a:hover {
	color: #001EAE;
	border-bottom-style: solid;
	}


/* Navbar
–––––––––––––––––––––––––––––––––––––––––––––––––– */

  .navbar {
    display: block;
    width: 100%;
    height: 3.5rem;
    border-top: 0px;
	} 
  .navbar-list {
    list-style: none;
    margin-bottom: 0; }
  .navbar-item {
    position: relative;
    float: left;
    margin-bottom: 0; }
  .navbar-link, .navbar-link-up, .navbar-link-secondary {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: -0.05rem;
    margin-right: 9px;
    text-decoration: none;
    color: #B28600; }
  .navbar-link, .navbar-link-up, .navbar-link-secondary, .dropdown {
    font-size: 10px;
    line-height: 3.5rem; }
  .navbar-item > a {
	color: #001EAE;
	border-bottom: 0px;
	}
  .navbar-item > a.navbar-link-up {
	color: #B28600;
	border-bottom: 0px;
	}
  .navbar-item > a.navbar-link-secondary {
	color: #999;
	border-bottom: 0px;
	}
   a.dropanchor {
	color: #999;
	line-height: 3rem;
	padding-left: 5px;
	border-bottom: 0px;
	}
  .navbar-item > a.navbar-link:hover {
	color: #B28600;
	}
  .full-text {
    display: none;
    }
    
@media (min-width: 550px) {
  .navbar {
    height: 6.5rem;
    }
  .navbar-link, .navbar-link-up, .navbar-link-secondary, .dropdown {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .18rem;
    margin-right: 12px;
    text-decoration: none;
    color: #222; }
  .navbar-link, .navbar-link-up, .navbar-link-secondary, .dropdown {
    font-size: 11px;
    line-height: 6.5rem; }
  .short-text { 
    display: none;
    }
  .full-text { 
    display: inline-block; 
    }


}
    
@media (min-width: 765px) {
  .navbar {
    height: 6.5rem;
    }
  .navbar-link, .navbar-link-up, .navbar-link-secondary, .dropdown {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .18rem;
    margin-right: 14px;
    text-decoration: none;
    color: #222; }
  .navbar-link, .navbar-link-up, .navbar-link-secondary, .dropdown {
    font-size: 11px;
    line-height: 6.5rem; }
  .short-text { 
    display: none;
    }
  .full-text { 
    display: inline-block; 
    }



}

/* Larger than desktop */
@media (min-width: 1000px) {
  .navbar {
    height: 6.5rem;
    }

  .navbar-link, .navbar-link-up, .navbar-link-secondary, .dropdown {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .2rem;
    margin-right: 30px;
    text-decoration: none;
    color: #222; }
  .navbar-link, .navbar-link-up, .navbar-link-secondary, .dropdown {
    font-size: 11px;
    line-height: 6.5rem; }
  .short-text { 
    display: none;
    }
  .full-text { 
    display: inline-block; 
    }



}


/* Dropdown  */

/* The container <div> - needed to position the dropdown content */
.dropdown {
/*
    position: relative;
    display: inline-block;
    
*/
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    border-top: 1px solid #ccc;
    display: none;
    position: absolute;
    left: -13px;
    top: 45px;
    background-color: #f9f9f9;
    min-width: 110px;
    box-shadow: 0px 3px 14px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    @media (min-width: 550px) {

		.dropdown-content {
    	min-width: 155px;
		}
	}
  

/* Links inside the dropdown */
.dropdown-content a {
    color: #001EAE;
    padding-top: 1px; 
    padding-bottom: 0px;
    padding-left: 12px;

    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
	background-color: #f1f1f1;
	color: #B28600;
	}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover {
    background-color: transparent;
    color: #B28600;
}




/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


ul.highlight {
	list-style: circle inside;
	margin-top: -15px;
	margin-left: 20px;
	margin-bottom: 10px;
}

li.highlight-item {
	padding: 0px;
	margin: 0px;
	font-weight: 500;
	font-variant: small-caps;

}

dl.highlight {
	margin-top: -10px;
	margin-left: 0px;
	margin-bottom: 0px;
	line-height: 1.1em;
}

dt.highlight-item {
	border-left: 1px solid #ccc;

	padding: 5px;
	margin: 0px;
	font-weight: 500;
	
	
}

/* Larger than phablet (also point when grid becomes active) */
	@media (min-width: 550px) {

	dt.highlight-item {
		margin-left: 5px;
		}
	}

/* Larger than phablet (also point when grid becomes active) */
	@media (min-width: 765px) {

	dt.highlight-item {
		margin-left: 0px;
		}
	}



dd.highlight-item {
	padding: 0px;
	margin: 0px;
	margin-left: 15px;
	margin-bottom: 10px;
	font-weight: 300;

}



/* boxes
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.entry {

line-height: 1.7rem;
margin-bottom: 18px;

}

.blueBoxBottom {

border-radius: 0px;
padding: 8px;
background: #ccc;
border: 1px solid #1F3165;
border-left: 37px solid #1F3165;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
line-height: 1.5;
font-size: 1.3rem;
color: #333;

}

.itemBox {

width: 99%;
border-radius: 0px;
padding: 8px;
padding-left: 10px;
background: #fff;
border-left: 1px solid #ccc;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 20px;
line-height: 1.2;
display: flex;

}

.greyBox {

width: 99%;
border-radius: 0px;
padding: 8px;
background: #fff;
border-left: 1px solid #ccc;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 20px;
line-height: 1.2;



}

.greyBookBox {

width: 99%;
border-radius: 0px;
padding: 8px;
background: #fff;
border-left: 1px solid #ccc;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 20px;
line-height: 1.2;
overflow: auto;
# display: table;

}

.greyBookBoxInterior {

padding: 0px;	
margin-top: 27px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;

# display: table-cell;
# vertical-align: middle;

background: #fff;
text-align: left;

}


/* Larger than phablet (also point when grid becomes active) 
	@media (min-width: 550px) {

	.greyBox {
		padding: 12px;
		margin-top: 0px;
		margin-left: 5px;
		margin-right: 5px;
		margin-bottom: 20px;
		line-height: 1.2;
		}
	}
*/

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table {
table-layout: auto; }

th,
td {
  padding: 10px 10px;
  text-align: left;
  line-height: 1.8rem;
  border-bottom: 0px solid #E1E1E1; }
th,
td {
  padding-left: 0px;
  padding-right: 15px; }

th,
td.highlighted {
  padding-right: 29px;

  border-top: 1px solid #E1E1E1; 
  border-left: 0px solid #E1E1E1; 
  border-right: 1px solid #E1E1E1; 
  border-bottom: 1px solid #E1E1E1; 

background-color: white;

background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, #E1E1E1 4px, #E1E1E1 10px);

/*
background-image: url("../images/key_gr.png");
*/

    background-size: 15px 100%;
    background-repeat: no-repeat;
    background-position: top right;


}

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2rem; }
  
.donotwrap {
	white-space:nowrap; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; 
  }

hr.compact {
  margin-top: 0rem;
  margin-bottom: 0.2rem;
  }

.lockup {
	}

.lockup {
	}

.justif { 
	text-align: justify;
	}

.flex-item {

	}

.imageWrap {
	display: block;
	float: left;
	}

img.schoolSeal {
	padding: 0px 0px 0px 0px;
	width: 46px;
	height: 46px;
	}

img.schoolSealFlow {
	padding: 0px 10px 0px 0px;
	width: 55px;
	height: 55px;
	display: inline;
	float: left;
	}





img.blockPic {
	padding: 0px 0px 0px 0px;
	margin-bottom: 10px;
	border: 0px solid #1F3165; 
	width: 99%;
	display: none;
	}

/* Larger than Max flex */
	@media (min-width: 1020px) {

	img.blockPic {
		padding: 0px 0px 0px 0px;
		margin-top: 5px;
		margin-bottom: 5px;
		border: 0px solid #1F3165; 
		margin-left: 15px;
		margin-right: 0px;
		width: 160px;
		float: right;
		display: inline;
		}
	}


img.pubCovs {
	padding: 0px 0px 0px 0px;
	margin-top: 0px; 
	margin-right: 5px;
	margin-bottom: 2px;
#	width: 60px;
	height: 150px;
	border: 1px solid #000;
	display: inline;
	float: left;
	}

/* Larger than Max flex
	@media (min-width: 765px) {

img.pubCovs {
	padding: 0px 0px 0px 0px;
	margin-top: 2px; 
	margin-right: 5px;
	margin-bottom: 5px;
#	width: 100%;
	height: 45px;
	border: 1px solid #000;
	display: inline;
	float: left;
	}

	}
*/


div.colorBlock {
	display: inline-block;
	vertical-align: middle;
    margin-left: 0px;
    margin-right: 4px;
    margin-top: 0px;
    margin-bottom: 0px;
	padding: 0px;
	width: 8px;
	height: 8px;

	}



.boxed {

	border: 1px solid #ccc;
	background-color: #eee;
	border-radius: 4px;
	padding: 8px;
	margin-top: 0rem;	

	}
	
.grad {
	background-image: linear-gradient(to right, #eee , #fff , #fff );	
	padding-top: 24px;
	padding-bottom: 24px;
	
	}


.hide {
	visibility: hidden;
	display: none;
	
	}

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 765px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}