/*
	Theme Name: SAF Clean
	Theme URI: http://html5blank.com
	Description: SAF Clean (Based on HTML5 Blank v. 1.4.3)
	Version: 0.1
	Tags: SAF, Blank, HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}
img {
	max-width:100%;
	vertical-align:bottom;
}


input:focus {
	outline:0;
	border:1px solid #04A4CC;
}


/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-webkit-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-moz-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}

/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.wp-caption {
	background:#FFF;
	border:1px solid #F0F0F0;
	max-width:96%;
	padding:5px 3px 10px;
	text-align:center;
}
.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}


/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
	* {
		background:transparent !important;
		color:#000 !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}
	a,
	a:visited {
		text-decoration:underline;
	}
	a[href]:after {
		content:" (" attr(href) ")";
	}
	abbr[title]:after {
		content:" (" attr(title) ")";
	}
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content:"";
	}
	pre,blockquote {
		border:1px solid #999;
		page-break-inside:avoid;
	}
	thead {
		display:table-header-group;
	}
	tr,img {
		page-break-inside:avoid;
	}
	img {
		max-width:100% !important;
	}
	@page {
		margin:0.5cm;
	}
	p,
	h2,
	h3 {
		orphans:3;
		widows:3;
	}
	h2,
	h3 {
		page-break-after:avoid;
	}
}

/*******************************/


/** HTML Tags **/
a:link {text-decoration: none; color:#ff8033;} 
a:visited {text-decoration: none; color:#ff8033;} 
a:active {text-decoration: none; color:#ff8033;} 
a:hover {text-decoration: underline; color:#ff8033;}



body {
  background-color:#f0f8ff;
  font-family: "Droid Sans", sans-serif;
  font-size:14px;color:#fff;font-weight:normal;  
  color:#222;
}

h1, h2, h3, h4, h5 {
  font-family:Oswald;font-size:14px;color:#000;font-weight:normal;
  color:#222;
}

h1 a:link,h2 a:link,h3 a:link,h4 a:link,h5 a:link {text-decoration: none; color:#222;} 
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited {text-decoration: none; color:#222;} 
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active {text-decoration: none; color:#222;} 
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover {text-decoration: underline; color:#222;}

p {
	padding-top:0px;
	margin-top:0px;
}
h2 {margin-bottom:0px;}

h1 {font-size:24px;}
h2 {font-size:18px;}



dt {
	margin-top: 15px;
	font-weight:bold;
}

dd {
  margin-left:0px;
}

.residency-location {
  margin-right:-20px;
  font-style:italic;
}

.blogposts ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size:12px;
}

.blogposts ul li {
  margin-bottom:5px;
}


.container {
  margin: 0 auto; 
  padding-left:40px;
  padding-right:40px;

}

.header {
  background-color:#434343;
  padding-left:40px;
  padding-right:40px;
  padding-bottom:5px;
  flex: 0 1;
}

.main {
  background-color:#f0f8ff;
  color:#222;
  padding-top:20px;
  ZZZmin-height: calc(100vh - 320px);
}

.footer { 
  background-color:#434343;
  padding-left:40px;
  padding-right:40px;
  padding-top:10px;
  padding-bottom:20px;
  text-align:justify;  
  color:#fff;
}

.footer-sidebar {
  text-align:right;
  width:300px;
  vertical-align:bottom;
  flex: 1;
  padding-left:10px;
}

.footer-content {
  flex:2;
}

/* WHERE ARE THESE USED?
.image {
  width: 260;
  height:260;
  border-style:solid;
  border-width:1px;
  border-color:#333;
  margin:10px;
  display:inline-block;
}

.imagebox { 
  width:600;
  height:280;
  border-style:solid;
  border-width:1px;
  border-color:#333;
}
*/

.logotype, .minilogotype {
  font-family:"Oswald";
  font-size:64px;
  color:#ff8033;
}

.minilogotype {
  font-size:24px;
  background: #434343;
}

.logotype a:link, a:visited, a:active, a:hover {
  color:#ff8033;

}

.logotype a:hover {
    text-decoration:none;
}


.faq dd {
  margin-left:20px;
}

.faq-group {
  padding-left:40px;

}

.staff dd {
  margin-left:20px;
  margin-top:0px;
}

/********** NAVIGATION **********/
.navigation a:link {text-decoration: none; color:#fff;} 
.navigation a:visited {text-decoration: none; color:#fff;} 
.navigation a:active {text-decoration: none; color:#fff;} 
.navigation a:hover {text-decoration: none; color:#ff8033;}


.navigation ul {
  display: flex;
  flex-flow: column;    
  /* This aligns items to the end line on main-axis */
  ZZZjustify-content: flex-start;

  padding: 0;
}

.navigation ul li {
    display:inline-block;
    color:#ccc;
    color:#def;

    margin-right:25px;
    font-family: "Droid Sans", sans-serif;
    font-size:16px;
    text-transform: uppercase;
}

.navigation a.active {
  background-color: #434343;
  color: #FFF;
  cursor: default;
}

/* Sub Menus */
.navigation li li {
  font-size: .8em;
  padding-bottom:5px;
  padding-top:5px;
}

.navigation li ul {
  position: absolute;
  display: none;
  width: inherit;
  background-color:#434343;
  margin-top:0px;
  padding-top:5px;
  padding-left:10px;
  padding-right:10px;
  padding-bottom:5px;
}
  
.navigation li:hover ul {
  display: block;
}

.navigation li ul li {
  display: block;
}

/* mobile first: by default, submenus are not shown */
/*.navigation ul ul {display:none!important;} /* turn off sub-menus on small screens */


.schedule table {background-color:#fff; border-spacing:2px;}
.schedule td {background-color:#e0e8ef;  padding:6px; font-size:10pt;}
.schedule th {background-color:#c0c8cf; text-align:left;padding:6px; font-size:12pt; font-family:Oswald, sans; font-weight:normal;}


.sidebar {
width:100%;
margin:0px;
margin-top:0px;

padding:10px;
padding-top:0px;
border:0px;

/* mobile first: border on top when stacked */
border-style:solid;
border-color:#434343;
border-width:0px;
border-top-width: 2px;
}

.tagline {
  color:#999;
  text-transform: uppercase;
  font-size:18px;
  margin-top:-10px;
  font-family: "Droid Sans", sans-serif;
}

.copyright {
  background-color:#434343;
  padding:10px;
  color:#f0f8ff;
}

.copyright hr {
  height:1px;
  border:none;
  color:#f0f8ff;
  background:#f0f8ff;

}

/* coloring for the calendar */
.window-open {  color: #363;}
.window-closed {  color: #633;}



label { display: inline-block; width:80px;}

blockquote { font-style:normal;}

h1:first-child { margin-top: 0 !important;  }
h2:first-child { margin-top: 0 !important;  }


/***********  FLEXBOX LAYOUT ***********/
/* Design is "mobile first" -- the HTML order will be used as elements are mostly stacked
   vertically on smaller screens. We'll use media queries to detect larger screens and then
   use flexbox/CSS to:
      bring "sidebar" up from bottom of page into right column
      adjust the navigation so that it's horizontal on larger screens instead of vertical
      lastly, we're disabling navigation submenus on smaller screens, but using them on larger screens 
*/

/* use flexbox for body -- sets min-height of body to 100% of viewport: ensures that our footer 
   will never be up near middle of page. AKA "sticky footer" */

/* Main Wrapper for Page : contains header, article (main), sidebar, footer */
.flexwrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;  
}

.flexwrapper > * {
  padding: 10px;
  padding-left:20px;
  padding-right:20px;
  flex: 1 100%;
}

/* FLEXBOX FOOTER */

.footer-flexwrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}



/* FLEX MEDIA QUERIES */

/* screens larger than 800px: bring sidebar up */
@media all and (min-width: 800px) {
  .main   { flex: 3 0px; }
  .main   { order: 1; }
  .sidebar { order: 2; }
  .footer  { order: 4; }
  
  .sidebar { 
    flex: 0 1 340px; /* will shrink to minimum size */
    border:0px;
    border-left:1px;
    border-style:solid;
    border-color:#666;
  }
  
  .navigation ul { /* navigation is horizontal on larger screens */
    flex-flow: row wrap;
    margin-bottom:0px;
  }
  
  .sidebar-calendar, .sidebar-news {
    padding-top:0px;
  }

}


/* Small screens */
@media all and (max-width: 800px) {

ZZZ.navigation ul ul {display:none!important;} /* turn off sub-menus on small screens */

  .navigation li ul li {
    float:left;
    display: inline-block;
    padding:2px;
  }
  
  .navigation li ul {
    ZZZdisplay: inline-block;
    padding:0px;
    padding-top:0px;
    padding-left:10px;
  }
  
  .navigation li ul:before {
    content: ">>.... ";
    display: inline-block;
    float:left;
  }
  

 .logotype {font-size:30px;}
 .minilogotype {font-size:16px;}
 .tagline {font-size:12px; margin-top:-5px;}
 
 .sidebar { /* adds a horizontal line to separate main from sidebar on mobile */
    border-style:solid;
    border-color:#434343;
    border-width:0px;
    border-top-width: 2px;
  }
  
  .footer-flexwrapper { flex-direction:column; }
  .footer-content {text-align:left;}
  .footer-sidebar {text-align:left; padding-left:0;}
  

}


.saf-button a:visited {
    text-decoration: none;
    color: #fff;
}

.saf-button a:link {
    text-decoration: none;
    color: #fff;
}

.saf-button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 8px 0px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    font-family: 'Droid Sans';
    margin-bottom: 8px;
	width:200px;
}