/* State Look and Feel standard CSS
 * This document is a draft Cascading Style Sheet for the State of Alaska 2016 Look and Feel Standards. 
 * It is intended to provide styling to meet state standards and responsive design using HTML 5 and CSS 3 techniques.

 * Do not customize this document. Customizations will be lost when updates are released. It is recommended that make all customizations using a child style sheet.

 * ATTENTION: SOA web developers, this template is meant to be a living document meaning it can grow and change as technologies or techniques change. If you have CSS that might prove useful to other state agencies, such as accordions or photo galleries, please share with the POC of this document for inclusion.

 * Author: Stephen Mattson
 * Author URI: http://gov.alaska.gov
 * Version: 1.0.5
 * Version Date: 2016
*/
/* Table of Contents

	- HTML5 Reset
		- Baseline Reset
	- Defaults
		- Base Styles
		- Float clearing
	- Standard Components Layout
		- Back to Top
		- Global Navigation
		- Content
		- Agency Header
		- Search Box
		- Agency Footer
		- Global Footer
	- Media Queries
		- max-width: 8em
		- min-width: 12em
		- min-width: 12.4em
		- min-width: 22.8em
		- min-width: 33.75em
		- min-width: 36em
		- min-width: 48em
		- min-width: 54em
		- print		
	- Accessibilty
*/

/*
HTML5 Reset
---------------------------------------------------------------------------------------------------- */

/* Baseline Reset (normalize.css 2.1.2)
	normalize.css v2.1.2 | MIT License | git.io/normalize
--------------------------------------------- */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:1em;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

/*
Defaults
---------------------------------------------------------------------------------------------------- */
/* Base styles: opinionated defaults
--------------------------------------------- */
html {
	color: #222;
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 1em;
	line-height: 1.6;
	overflow-x: auto;
	opacity: 1;
}
body {
    background-color: #f2f2f2;
    background-image: url("./images/2016-website-bg-option3b.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 0 -40px;
}
img {max-width: 100%; height:auto; border: 0;}
.site-container {max-width: 60em; width: 100%; margin:0 auto;}
a { color: rgb(0,102,204); text-decoration: none;}
a:hover {text-decoration: underline;}
img.alignleft {float: left; margin: 0 16px 5px 0;}
.clear {clear: both;}
/* Float Clearing
--------------------------------------------- */
.clearfix:before,
.entry-content:before,
.entry:before,
.footer-block:before,
.agency-navigation:before,
.nav-secondary:before,
.pagination:before,
.site-container:before,
.site-footer:before,
.site-header:before,
.site-inner:before,
.block:before,
.wrap:before {
	clear: both;
	content: " ";
	display: table;
}

.clearfix:after,
.entry-content:after,
.entry:after,
.footer-block:after,
.agency-navigation:after,
.nav-secondary:after,
.pagination:after,
.site-container:after,
.site-footer:after,
.site-header:after,
.site-inner:after,
.block:after,
.wrap:after {
	clear: both;
	content: " ";
	display: table;
}
/*
Standard Components Layout
---------------------------------------------------------------------------------------------------- */
/* Back to Top 
--------------------------------------------- */
a.back-to-top {
	display: none;
	width: 60px;
	height: 60px;
	text-indent: -9999px;
	position: fixed;
	z-index: 999;
	right: 20px;
	bottom: 20px;
	background: #3f78a7 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAM1JREFUeNrs12ELgyAQBuDcPx9OxIlrErGfeysQBs4r7zwJohfuo/dEqFcKAIYjchsOygVTcl9Ks1evm4tRGn55cHpwUAP/Mb1hC3hsL9jBfpw07KE+XgoOQE9ohV/Az7iUosIqLWzNG8MxNIJcYgkvoVNlw0+qmkw5nsNzZaM5NVLENSjMeXrKW2LDEdkstfuCBW8ej8qTQIZHwtUapODAmGC+FfbAm9drPbmwa0CxibYLWwG0NMM3YSOI5l8tKKw7oMXe6vqTOD38FWAAl8JSohyMtPcAAAAASUVORK5CYII=')
 no-repeat center 43%;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}
/* Global Navigation 
--------------------------------------------- */
.global-nav-menu {
    background: #072f49;
    padding: 5px;
    border-top: 3px solid #edbd03;
}
.inline-div {
	margin: 0 auto;
	max-width: 960px;
}
.global-nav-menu .inline-div > ul {
	display: inline-block;
	font-size: .75em;
	line-height: 1em;
	margin: 0;
	padding: 0;
	*padding:10px 0 ; /* IE7 and below */
	text-align: right;
	max-width: 960px;
	width: 100%;
	vertical-align: bottom;
}
.global-nav-menu a {
color:#FFFFFF;
padding: 0 .63em;
letter-spacing: 1px;
font-weight: normal;
}
.global-nav-menu a:hover {
text-decoration: underline;
}
.global-nav-menu .inline-div > ul > li{
	display: none;
	*display: inline; /* IE7 and below */
	overflow: hidden;
    padding: 10px 0 7px;
	text-overflow: ellipsis;
    vertical-align: bottom;
	*vertical-align: middle; /* IE7 and below */
	white-space: nowrap;
}
.global-nav-menu .inline-div > ul > li:last-child {
display: inline-block;
}
.global-nav-menu .inline-div > ul> li:first-child {
    display: block;
	margin: 0 0 0 10px;
	padding: 0;
    position: absolute;
    text-align: left;
    width: 12em;
}
.global-nav-menu .inline-div > ul > li:first-child a {
	background-image: url("./images/2016-soa-logo.png");
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 138px 33px;
    display: inline-block;
	*display: block; /* IE7 and below */
    text-indent: -999999px;
    width: inherit;
	padding: 12px 0;
	*margin: 6px 0 0; /* IE7 and below */
}
/* Agency Header */
header.site-header {
	background-color: #194a6b;
	float: left;
    color: #ffffff;
    padding: 8px;
	margin: 0;
	width: 100%;
}
header.site-header .wrap{
	max-width:960px;
	margin: 0 auto;
}
header.site-header .title-area {
	float: left;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight:lighter;
	line-height: 1;
    overflow: hidden;
    padding: 0;
	width: 100%;
}
header.site-header .title-area a, .title-area a:hover, header.site-header .title-area h1 {
    color: #ffffff;
    text-decoration: none;
}
.site-logo {
    float: left;
    width: 12%;
    max-width: 72px;
	margin-right: 5px;
}
.site-logo img {
    margin: 0;
    padding: 0;
    width: auto;
}
h1 span.site-title {
    float: left;
    font-weight: 300;
    font-size: .563em;
    line-height: normal;
    margin-top: -10px;
    padding: 0 20px;
	text-align: center;
	text-transform:none;
    vertical-align: middle;
	width: 100%;
}
h1 span.site-description {
    font-size: .813em;
    letter-spacing: 1px;
    margin: 0 0 8px 0;
    padding: 0;
    float: left;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    font-weight: 300;
}
/* ADFG Search box */
/* By default, if javascript is on, hide the search area.  If they click the magnifying glass, the js_search_icon_was_clicked class gets added, and overrides the "hide" action (position absolute; left: -999em;), so it shows up again (by doing position: static;) */
.site-header.js_search_enabled #search-form {display:none;}
.site-header.js_search_icon_was_clicked  #search-form {display: block;}

/* By default, if javascript is on, show the mangifying glass.  If they click the magnifying glass, the js_search_icon_was_clicked class gets added, and overrides the "show" action (display: block;), so it gets hidden again with the display: none; */
.site-header.js_search_enabled #search_icon_placeholder {display: block;}
.site-header.js_search_icon_was_clicked #search_icon_placeholder {display: none;}
#search_icon_placeholder 
{
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAYCAYAAAAPtVbGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABSZJREFUeNqsVmss3WcYf85x3DklrnEb0mmZS8dU3K+tpojVQlyGRLKURGOybypaCTEfZPuwjMSi8WGhQtshMxuhJkHoiHtsiFtH1f12aLHf80//J86xLf3gSV5/7/X3Ps/ze37vkayvr9Pbt29pcnKSrK2taWpqirS0tDxbWlrMhoaG7gYEBNypra3dhlFsbKz84OBgbGFhoaC6unoL/faMjAwKCgoiuVxORkZG9ObNG1I3mfjPyckJXbp0yQCt5P79+/HT09MW8/Pz1NbWxtNy/lNeXs6fj7Cm4d69ewTAL8zNzX/Q0NCg/7W1tTVaXl6m2dlZSX19/XMTE5NTDL93KywsXJybm3PjC21ubtLr16/PNWHi9PRU8/Hjx79pa2srN0ul0lPc8CA8PHyjpKRkq7S0dCs1NXXTwMBgVx0oJydnDWdcgWe0sbFxrtHOzg5NTEw8srOzU9kYFRX1R1xcXHRKSgrhpvKlpSV5WVkZ+fn5fVBUVPQX8qayvqGhYQJA9OrVK1pZWVFpMqC7FhcXJ7O7bJqamoQ4f4tvLjwTPH358uU2x51dxyFzmZmZIbdu3fr95s2b9kwctoKCgqvOzs5ZWF/OYCqJR5g+RHK1xIHIyMguCwuLXACxh6S+gQkC0EUvLy+/ioqKjoSEhCs8zmurqqo+htHe3p4qCCiXzYlnQ7wpKSmpDCCkr69Pvb29TGdhTiKR0PHxsdDYu8PDw799fHyCXVxcXoyPj1sz+MzMTGJeXt7XiMqMCsjIyIiX2AkNDT1aXV0d4FrhQz09PUlXV5epSjo6OsTgMTEx1NnZSV1dXYRwrgQHB88zCO+Hh4bNzc2OCKsqCCaUnWvXrgmHoNiEMIleKBQK2t/fp+vXr3PihT7f3NjYmEAYsX5oa2uLxsbGhO+/FuNFGHsvNhUQKysrZQcyQk1NTQK3eSHTm8MVFhYmfHt6erhomX3CPIcQeVDu5zw6OjoKBa4C4ubm9gLfMO50dHRoJSYmfuLq6trIG5BEIWSoGZLJZALnGxsbCVpGzCIQxgJzduJh0L6d6OjoGQ63Cgjq4TtLS8swZtju7i7V1NR8hQQ38m2hUXR0dCQs5BxxrTAo1xK8MOrv7+8Uk86GHNVCmmbOURiU/XN4ePiosrJSyHJra2sQAL7x9vbO5RCpq6qDgwNBgSk7OzsGTLwqjoPO9PDhw14uTrG2IE0CCWRgyai/v39EXV1dJwakfCgk5EswLRiLCiDfzcibnMNlamq6zSoMihb19fWFnk2woaHh3CPYWWZxZDjUku7ubiFhSPovWVlZkUxP8RY4RBESEqKIiIiQcn90dPT06dOnMoRDX10J2C5fvtyGkN1guvMFWIby8/NJwoXFA7a2ttLBwcH29PT0EL7B+xjniOtFBOQ+5OZnPBcxuMgJKwO/O9J3N+YQnYB+oYGBgX729vad8G5fne+iMXVRlDt4EX9EKJV8ZckZGBi4DQp36OnpSZS5OXsrThrY1IM8hDo5OQXEx8c3I5kEfdo2MzPbTk5OprS0tDEbG5vPHjx4cAcHfQ663+Vn+6yAAigIQL/iopoMJFWvWB7kNx81Mejr6xuPujHGobZ4w23x3htB4n0gjk8g+e1Mb7QG1Nrts0X9DigC7HsOr2X/KSvMJsRUAW1TMBkYmJWAv2IYRWUGUIuHh8enCP2zxcVFZV3hd4Iv9jyTXoRmMTC8+wmhu3E2dLB9zH0vuyhhZI8A1Obu7h6DcDWhXvbhTSRy3f2PAAMAVXfzurX4bzgAAAAASUVORK5CYII=');
	background-color: #EEEEEE;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 66%;
	border: 1px solid #808080;
	border-radius: 5px;
	display: none;
	float: right; 
	height: 29px; 
	right: 10px; 
	margin: 0;
	padding: 0;
	position: absolute;
	width: 10%; 
	max-width: 44px;
}

#search_icon_placeholder:hover 
{
       cursor: pointer;
       border: 1px solid #000;
       background-color: #fff;
}
/* End ADFG Search Form */
/* Search Box */
#search-form {
    width: 240px;
    vertical-align: top;
    margin: 0 auto;
    padding: 0;
}
.search-soa [type="search"] {
    height: 29px;
    width: 10em;
    border: 0;
}
#search-button {
	cursor: pointer;
	border: none;
	width: auto;
	padding: 5px 15px;
	background-color: #cccccc;
	color: #222;
	margin: 0;
	font-size: .875em;
	vertical-align: top;	
}
.search-form-expanded {
    text-align: right;
    margin: 0.5em 0 0 0;
    font-size: 80%;
    font-weight: bold;
}
#search-form fieldset {background:none; padding: 0; margin: 0;}
#search-form legend {
    text-indent: -99999px;
    position: absolute;
}
label#search-label-site {
    padding: 0 15px 0 0;
}
/* Content */
.site-inner {
    background: #ffffff;
    box-shadow: 0px 0px 6px -3px;
}
/* Agency Footer */
.footer a{
	text-decoration: underline;
}
.footer a:hover{
	text-decoration: none;
}
.footer-block {
    background-color: #194a6b;
    color: #fff;
	font-size: .875em;
	max-width: 960px;
	margin: 0 auto;
    padding: 16px 20px 0;
	width: 100%;
}
.footer-block h1, .footer-block h2, .footer-block h3, .footer-block h4, .footer-block h5, .footer-block h6, .footer-block a {
	color: #fff;}
.footer-block a{
	font-weight: bold;
	font-style:italic;
}
.footer-block .wrap {
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
	width: 100%;
}
.footer-block .block-content-area{
	width: 100%;
	float: left;	
	text-align: center;
}
.footer-block .footer-block-1, .footer-block .footer-block-2{
	margin: 0 2% 0 0;
}
.footer-block .footer-block-3 {
	margin: 0;
}
.socialmedia-icons ul {
    vertical-align: middle;
    display: inline-block;
}
.socialmedia-icons ul li a {
	color: #555555;
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 50%;
    font-size: 160%;
}
.socialmedia-icons ul li a:hover {
    color: #ffffff;
    background-color: #999;
}
/* Global Footer */

.global-footer a{
	color: #222; 
}
.global-footer {
	color: #222;
	padding: .5em 0;
}
#SOAfooterlinks ul {
    padding: 0px;
    margin: 0 16px 16px;
}
#SOAfooterlinks ul li {
    display: inline;
    font-size: 80%;
    text-align: center;
    margin: 0 8px 0 0;
}
#SOAfooterlinks ul li a{
}
footer p {
    text-align: center;
    margin: 0 auto;
}
footer .copyright {
	margin: 8px 0;
	font-size: .875em;
	text-transform: uppercase;
}
footer .copyright a {
	margin: 8px 0;
	font-size: .875em;
}
@media screen and (max-width: 8em) {
}
@media screen and (min-width: 12em) {
}
@media screen and (min-width: 12.4em) {
}
@media screen and (min-width: 17.2em) {
}
@media screen and (min-width: 22.8em) {
.title-area {
}
.site-title {
	width: 100%;
}
#search_icon_placeholder {
	width: 38px; 
	height: 33px; 
}
}
@media only screen and (min-width: 33.75em) {

}
@media only screen and (min-width: 36em) {
.global-nav-menu .inline-div > ul > li {
    display: inline-block;
    padding: 20px 0 3px; 
/*     padding: 21px 0 3px; If search-div is active */
}
.global-nav-menu .inline-div > ul > li:last-child {
	display: none;
}
.title-area {
	max-width: 650px;
	margin: 0 auto;
}
h1 span.site-title {
	text-align: left;
	padding: 0;
	width: auto;
}
h1 span.site-description {
	text-align: left;
	width: 87%
}
}
@media screen and (min-width: 48em) {
.title-area {
	margin: 0;
}
/* ADFG Search Form CSS */
.site-header.js_search_enabled #search_icon_placeholder {display: none;}
.site-header.js_search_enabled #search-form {display: block; }
/* Original Search-Form CSS */
#search-form {
    float: right;
}
.footer-block .block-content-area {
	float: left;
	width: 32%;
}
.footer-block .footer-block-1{
	text-align: left;
}
.footer-block .footer-block-2{
	text-align: center;
}
.footer-block .footer-block-3 {
	text-align: right;
}
#SOAfooterlinks ul {
    padding: 0px;
    margin: 0 0 16px;
	text-align: center;
}
}
@media screen and (min-width: 60em) {
	header.site-header {
	margin: 2em 0 0;
}
}
@media print{
	/* Global CSS */
body { text-align: left; background: #ffffff; color: #000000;}
p, form, div, object, ul, ol, li, img, h1, h2, h3, h4, h5, h6, blockquote, table, tr, td, tbody, small { padding: 0;}
#menu-statewide-navigation, #search-form, .agency-navigation, #SOAfooterlinks {display: none;}
#search_icon_placeholder {border: none;}
}

/* Accessibility
--------------------------------------------- */	
a:focus, .title-area h1:focus, .agency-responsive-menu a:focus, .agency-responsive-menu > .first > a:focus, .agency-responsive-menu > .last > a:focus, .socialmedia-icons ul li a:focus {
    background-color: lightyellow;
    color: #bf1722;
}
.global-nav-menu .inline-div > ul > li:first-child a:focus {
    background-image: url(./images/2016-soa-logo-dark.png);
}
/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
a.visuallyhidden {
    background: transparent none repeat scroll 0 0;
    border-bottom: 1px solid white;
    border-bottom-right-radius: 8px;
    border-right: 1px solid white;
    color: white;
    left: 0;
    padding: 6px;
    position: absolute;
    top: -40px;
    transition: top 1s ease-out 0s, background 1s linear 0s;
    z-index: 100;
}
/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
a.visuallyhidden:active,
a.visuallyhidden:focus {
    background: #bf1722 none repeat scroll 0 0;
    left: 0;
    outline: 0 none;
    position: absolute;
    top: 0;
    transition: top 0.1s ease-in 0s, background 0.5s linear 0s;
}