/* 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.4a
 * Version Date: 2016
*/
/* Table of Contents

	- HTML5 Reset
		- Baseline Reset
	- Defaults
		- Base Styles
	- Standard Components Layout
		- Back to Top
		- Global Navigation
		- 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		
*/

/*
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("../img/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; word-wrap: break-word;}
a:hover {text-decoration: underline;}
img.alignleft {float: left; margin: 0 16px 5px 0;}
.clear {clear: both;}


.offscreen {
  position:absolute; 
  left:-10000px; 
  top:auto; 
  width:1px; 
  height:1px; 
  overflow:hidden;
}
	
.site-container {
  display: block;
  max-width: 960px;
  margin: auto;
}

/*
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: 12px;
	/*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 .inline-div > ul> li, #SOAmainLink {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.global-nav-menu a:hover {
text-decoration: underline;
}
#SOAmainLink {
font-style:italic;
}
#SOAmainLink > span {
display: none;
}
.global-nav-menu .inline-div > ul> li{
	display: none;
	*display: inline; /* IE7 and below */
	overflow: hidden;
    padding: 10px 0 7px;
    vertical-align: bottom;
    font-size: 12px;
	*vertical-align: middle; /* IE7 and below */
}
.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("/parks/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 {
    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;
}
.site-title {
    float: left;
    margin: 0;
    padding: 8px 0 6px 0;
	text-align: center;
    vertical-align: middle;
	width: 100%;
}
.site-description {
    font-size: 23px;
    letter-spacing: 1px;
    margin: 0 0 8px 0;
    padding: 0;
    float: left;
	text-align: center;
    text-transform: uppercase;

}
/* 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: 36px;
    border: 1px solid #7F7F7F;
}
#search-button {
    cursor: pointer;
    border: 1px solid #7F7F7F;
    width: auto;
    padding: 8px 14px 7px;
    background-color: #cccccc;
    color: #222;
    margin: 0;
    font-size: .875em;
}
.search-form-expanded {
    text-align: right;
    margin: 0.5em 0 0 0;
    font-size: 80%;
    font-weight: bold;
}
label#search-label-site {
    padding: 0 15px 0 0;
}

/* Breadcrumbs */
.breadcrumb {
	background-color: #ffffff;
        color: #595959;
	font-size: 12px;
	padding: 10px;
        margin: 0;
}


/* Agency Footer */
.footer a{
	text-decoration: underline;
}
.footer a:hover{
	text-decoration: none;
}
.footer-widgets {
    background-color: #194a6b;
    color: #fff;
	font-size: .875em;
	max-width: 960px;
	margin: 0 auto;
    padding: 16px 20px 0;
	width: 100%;
}
.footer-widgets h1, .footer-widgets h2, .footer-widgets h3, .footer-widgets h4, .footer-widgets h5, .footer-widgets h6, .footer-widgets a {
	color: #fff;}
.footer-widgets a{
	font-weight: bold;
	font-style:italic;
}
.footer-widgets .wrap {
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
	width: 100%;
}
.footer-widgets .widget-area{
	width: 100%;
	float: left;	
	text-align: center;
}
.footer-widgets .footer-widgets-1, .footer-widgets .footer-widgets-2{
	margin: 0 2% 0 0;
}
.footer-widgets .footer-widgets-3 {
	margin: 0;
}

.footer-widgets p {
        font-size: 12.25px;
        font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


/*.socialmedia-icons ul {
    vertical-align: middle;
    display: inline-block;
}
.socialmedia-icons ul li a {
	color: #555555;
    background-color: #999999 !important;
    padding: 10px;
    border-radius: 3px;
    font-size: 160%;
    width: 19px !important;
}

.socialmedia-icons img {
    width: 19px;
    
}

.navlinks {
width: 100%;
word-wrap: break-word;
border-bottom: 1px solid #e2e2e2;
border-left: 1px solid #e2e2e2;
}


.navlinks ul {

box-sizing: border-box;
margin-top: 0px;
margin-bottom: 0px;

}

.navlinks li:hover {

border-left: 3px solid rgb(0,102,204);
}

.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;
}
.design-two .global-footer {
	background: none;
	color: #222;
}
#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 .seal p img{
	width: inherit;
	 
}
footer .copyright {
	margin: 8px 0;
	font-size: .875em;
	text-transform: uppercase;
}
footer .copyright a {
	margin: 8px 0;
	font-size: .875em;
}

@media only screen and (max-width: 600px)
h2 {
text-align: center;
}

.global-nav-menu {
margin-bottom: 0px;
}

@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%;
}
.site-description {
}
#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 */
}
.design-two .global-nav-menu .inline-div > ul {
	width: 100%;
}
.global-nav-menu .inline-div > ul> li:last-child {
	display: none;
}
.title-area {
	max-width: 650px;
	margin: 0 auto;
}
.site-title {
    font-size: 14px;
	text-align: left;
	width: auto;
}
.site-description {
    font-size: 1.5em;
	text-align: left;
}
header.site-header {
	margin: 0 0 0;
}
.design-two header.site-header {
    margin: 0 0 2em 0;
}

}
@media screen and (min-width: 875px){
.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;
}
}

@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-widgets .widget-area {
	float: left;
	width: 32%;
}
.footer-widgets .footer-widgets-1{
	text-align: left;
}
.footer-widgets .footer-widgets-2{
	text-align: center;
}
.footer-widgets .footer-widgets-3 {
	text-align: right;
}
#SOAfooterlinks ul {
    padding: 0px;
    margin: 0 0 16px;
	text-align: center;
}
}
@media screen and (min-width: 54em) {
}
@media screen and (min-width: 60em) {

.global-nav-menu {
margin-bottom: 2em;
}

}

}
@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;}
#soaBranding {display: none;}
#main-navigation {display:none;}
#title img.screen { display:none;}
#title img.print {display: block; padding: 0; width:auto;}
#search {display:none;}
#state_footer {display: none;}
}

.blink {
  animation: blink-animation 2s steps(2, start) infinite;
  -webkit-animation: blink-animation 2s steps(2, start) infinite;
}
@keyframes blink-animation {
  to {
    color: #e0e0e0;
  }
}
@-webkit-keyframes blink-animation {
  to {
    color: #e0e0e0;
  }
}