* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/* -------------------------------------------------------------- 
  
   CONTENT
   
	1.	RESET
	2.	Typography
	3.	Aside: Icon + Nav
	4. 	Main
   		a.	Sign out + Header
   		b.  Section @ 3colomn
		c.  iconSet
	
	5.	Footer
	6.	ICONS Submit Buttons 
	7.	 Grid Form: 
		a.	fieldset + input
		b.	warning + highlight
   
-------------------------------------------------------------- */
/* -------------------------------------------------------------- 
  
   RESET
   
-------------------------------------------------------------- */
/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline; }

body {
  line-height: 1.5;
  height: 100%; }

/* Tables still need 'cellspacing="0"' in the markup. */
table {
  border-collapse: separate;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal; }

table, td, th {
  vertical-align: middle; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after {
  content: ""; }

blockquote, q {
  quotes: "" ""; }

/* Remove annoying border on linked images. */
a img {
  border: none; }

/* -------------------------------------------------------------- 
  
   Typography
   
-------------------------------------------------------------- */
@font-face {
  font-family: 'IconPack';
  src: url("font/entypo.eot");
  /* IE9 Compat Modes */
  src: url("font/entypo.eot?#iefix") format("embedded-opentype"), url("font/entypo.woff") format("woff"), url("font/entypo.ttf") format("truetype"), url("font/entypo.svg#svgFontName") format("svg");
  /* Legacy iOS */ }

body {
  font: 62.5%/1.25  "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #666666;
  /*
  background:url(../img/240x40px.png) repeat fixed #e5e5e5;
  opacity: 0.55;*/ }

main section.col-one h2 {
  color: #666666;
  font: 100 2em/1.35 "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* -------------------------------------------------------------- 
  
  Aside: Icon + Nav
   
-------------------------------------------------------------- */
#nav_main {
  width: 220px;
  background-color: #3fa9f5;
  float: left; }

#nav_main h1 {
  height: 260px;
  width: 100%;
  text-align: center; }

#nav_main h1[data-icon]:before {
  font-family: 'IconPack';
  /*  font-size: 38em;
    line-height: 0.6em;*/
  font-size: 280px;
  line-height: 150px;
  height: 0em;
  content: attr(data-icon);
  speak: none;
  color: #fff; }

#nav_main nav {
  width: 100%;
  background-color: #fff;
  padding: 20px 0 0 20px; }

#nav_main nav li {
  display: block;
  width: 100%; }

#nav_main nav li a:link, #nav_main nav li a:visited {
  height: 60px;
  color: #666666;
  display: inline-block;
  font: 100 2em/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  /*lato,helvetica,sans-serif;*/
  width: 140px;
  text-align: left;
  padding: 1em 0 0 1em;
  text-decoration: none; }

#nav_main nav li a:hover, #nav_main nav li a:active, #nav_main nav li:hover a {
  color: #fff;
  background: #3fa9f5; }

#nav_main nav li span {
  height: 60px;
  width: 60px;
  background-color: #666666;
  color: #FFF;
  float: left; }

#nav_main nav li:hover span, #nav_main nav li.active span {
  background: #3fa9f5; }

li.icon [data-icon]:before {
  font-family: 'IconPack';
  /* font-size: 9em;
   line-height: 0.6em;*/
  font-size: 70px;
  line-height: 40px;
  content: attr(data-icon);
  speak: none; }

li.icon {
  display: inline-block;
  text-align: center;
  margin: 0 0 20px; }

nav li.icon:last-child {
  margin: 0; }

/* -------------------------------------------------------------- 
  
  Main: Sign out + Header
   
-------------------------------------------------------------- */
main {
  width: 700px;
  min-height: 720px;
  float: left;
  clear: right;
  margin: 0 0 0 20px; }

header {
  display: block;
  background-color: #fff;
  width: 100%;
  height: 100px; }

header h1 {
  font: 100 5em/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  /*lato,helvetica,sans-serif;*/
  float: left;
  max-width: 500px;
  margin: 0.68em 0 0;
  text-indent: -0.04em; }

#top_section {
  float: right;
  width: 180px;
  text-align: right;
  max-height: 100px;
  font-weight: 300; }

#top_section a:link, #top_section a:visited {
  text-decoration: none;
  color: #f00;
  padding: 0 0 1px 0;
  margin: 0 0 0 10px;
  border-bottom: 2px solid none; }

#staff_status a:hover, #staff_status a:active {
  color: #f00;
  border-bottom: 2px solid #f00; }

#staff_status {
  height: 20px;
  padding: 1.1em 0 0; }

#top_action {
  display: inline-block;
  float: right;
  font: 100 1.6em/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  /*lato,helvetica,sans-serif;*/
  height: 20px;
  margin: 40px 0 0; }

#top_action a:link, #top_action a:visited {
  color: #333;
  border-bottom: 2px solid none; }

#top_action a:hover, #top_action a:active {
  color: #000; }

#top_action span {
  float: right;
  line-height: 0;
  position: relative;
  /* top:0.5em;*/
  top: 0;
  margin: 0 0 0 0.27em; }

#top_action span[data-icon]:after {
  font-family: 'IconPack';
  /* font-size: 2.8em;*/
  font-size: 30px;
  content: attr(data-icon);
  speak: none;
  /* Not to be trusted, but hey. */ }

/* -------------------------------------------------------------- 
  
  Main: Section @ 3colomn
   
-------------------------------------------------------------- */
main section.section_list {
  color: #333;
  width: 220px;
  background-color: #bdccd4;
  float: left;
  margin: 0 20px 20px 0;
  padding: 8px 5px 0;
  height: 160px;
  -webkit-transition: all 0.6s ease-in;
  -moz-transition: all 0.6s ease-in;
  transition: all 0.6s ease-in; }

main section.section_list:nth-of-type(3n) {
  margin: 0 0 20px 0; }

main.two_column section.section_list {
  margin: 0 20px 20px 0; }
main.two_column section.section_list:nth-of-type(2n) {
  margin: 0 0 20px 0; }

main section.section_list h1 {
  font: lighter 3em/1.1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0 0 0.1em 0; }

main section.section_list h3 {
  font: 300 1.4em/1.35 "Helvetica Neue", Helvetica, Arial, sans-serif; }

main section.section_list p {
  font: 700 1.1em/1.35 "Helvetica Neue", Helvetica, Arial, sans-serif; }

main section.section_list a:link, main section.section_list a:visited {
  text-decoration: none;
  color: #333;
  padding: 0 0 0px 0;
  border-bottom: 2px solid none; }

main section.section_list h1 a:hover, main section.section_list h1 a:active {
  text-decoration: none;
  color: #fff;
  border-bottom: 2px solid #fff; }

main section.section_list:hover {
  color: #fff;
  background: #666666; }

main section.section_list:hover a {
  color: #fff; }

/* -------------------------------------------------------------- 
  
  Main: Section  @ 1colomn / dashboard
   
-------------------------------------------------------------- */
main section.section_dash {
  color: #333;
  width: 460px;
  background-color: #bdccd4;
  float: left;
  margin: 0 20px 20px 0;
  height: 80px;
  /*padding:8px 5px 0;
  @include transition (all 0.6s ease-in);*/ }

main section.section_dash:nth-of-type(2n) {
  margin: 0 0 20px 0; }

main section.section_dash h1 {
  font: lighter 3em/1.1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0 0 0.1em 0;
  float: left;
  width: 260px; }

main section.section_dash h3 {
  font: 300 1.4em/1.35 "Helvetica Neue", Helvetica, Arial, sans-serif; }

main section.section_dash p {
  font: 700 1.1em/1.35 "Helvetica Neue", Helvetica, Arial, sans-serif; }

/*
main section.section_dash:hover {
	color:#fff;
	background:$base-font-color;
}*/
main section.highlight {
  background-color: #7ac943; }

main section.confirm, main section.confirm:hover {
  background-color: #F00;
  opacity: 0.8; }

main section.steptwo, main section.steptwo:hover {
  background-color: #3fa9f5; }

main section.removed, main section.removed:hover {
  width: 5px;
  opacity: 0.0; }

#vt_box {
  color: #333;
  width: 220px;
  float: right; }

#vt_box ul.gridSet {
  list-style: none;
  margin: 10px 0;
  float: left;
  font: lighter 1.5em/1 "Helvetica Neue", Helvetica, Arial, sans-serif; }

#vt_box ul.gridSet li {
  float: left;
  width: 60px;
  margin: 0 20px 10px 0;
  text-align: center;
  height: 30px;
  line-height: 2em; }

#vt_box h1 {
  font: bold 1.5em/4 "Helvetica Neue",Helvetica,Arial,sans-serif;
  height: 45px;
  border-bottom: 1px solid #666666;
  margin: 0 0 5px 0; }

#vt_box ul.gridSet li:nth-of-type(3n) {
  margin: 0 0 10px 0; }

#vt_box ul.gridSet a:link, #vt_box ul.gridSet a:visited {
  text-decoration: none;
  width: 100%;
  background-color: #bdccd4;
  height: 100%;
  color: #333;
  display: block;
  -webkit-transition: all 0.4s ease-in;
  -moz-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in; }

#vt_box ul.gridSet a.vt_complete, #vt_box ul.gridSet a.vt_complete {
  background-color: #7ac943; }

#vt_box ul.gridSet a.vt_incomplete, #vt_box ul.gridSet a.vt_incomplete {
  background-color: #F1F122; }

#vt_box ul.gridSet a.activeVT, #vt_box ul.gridSet a.activeVT {
  background-color: #3fa9f5; }

#vt_box ul.gridSet a:hover, #vt_box ul.gridSet a:active {
  background-color: #3fa9f5; }

#vt_box ul.gridSet a.vt_inactive:link, #vt_box ul.gridSet a.vt_inactive:visited {
  background-color: #e5e5e5;
  text-decoration: line-through;
  cursor: default; }

/* -------------------------------------------------------------- 
  
  Main:  iconSet + sectionIcon
   
-------------------------------------------------------------- */
main section.section_list:hover div.iconSet {
  display: block; }

div.iconSet, div.sectionIcon {
  float: right;
  height: 1em;
  display: none; }

div.sectionIcon {
  height: 20px;
  position: relative;
  right: 8px;
  width: 40px;
  text-align: right;
  display: block; }

div.sectionIcon a.closeIcon:link, div.sectionIcon a.closeIcon:visited {
  text-decoration: none;
  height: 100%; }

div.iconSet a.deleteIcon:link:after, div.iconSet a.deleteIcon:visited:after, div.sectionIcon a.closeIcon:link:after, div.sectionIcon a.closeIcon:visited:after, div.sectionIcon a.transferIcon:link:after, div.sectionIcon a.transferIcon:visited:after {
  font-family: 'IconPack';
  font-size: 4em;
  line-height: 0.4;
  height: 0em;
  padding: 4px;
  content: attr(data-icon);
  speak: none;
  color: #fff;
  text-decoration: none; }

div.sectionIcon a.closeIcon:link:after, div.sectionIcon a.closeIcon:visited:after {
  font-size: 5em;
  color: #F00; }

div.sectionIcon a.closeIcon:hover:after, div.sectionIcon a.closeIcon:active:after {
  color: #000; }

div.iconSet a.deleteIcon:hover:after, div.iconSet a.deleteIcon:active:after {
  color: #ccc; }

div.sectionIcon a.transferIcon:link:after, div.sectionIcon a.transferIcon:visited:after {
  position: relative;
  color: #666666;
  right: -10px; }

section.section_list:hover a.transferIcon:after {
  color: #fff; }

section.section_list div.sectionIcon a.transferIcon:hover:after, section.section_list div.sectionIcon a.transferIcon:active:after {
  color: #7ac943; }

/* -------------------------------------------------------------- 
  
  Case: Building + ul.iconSet
   
-------------------------------------------------------------- */
div.caseDetailBlock {
  background-color: #f9f9f9;
  display: block;
  float: left;
  width: 460px;
  margin: 0 0 5px; }

#content section.section_dash article {
  float: left;
  height: 100%;
  width: 83.3333%;
  padding: 8px 5px 0; }

#content section.section_dash aside.iconSet {
  float: right;
  height: 100%;
  width: 13.3333%;
  z-index: 99;
  text-align: center; }

aside.iconSet ul {
  display: block;
  height: 100%;
  list-style: none outside none; }

aside.iconSet li {
  background-color: none;
  display: block;
  height: 50%;
  width: 100%; }

aside.iconSet [data-icon]:before {
  content: attr(data-icon);
  font-family: "IconPack";
  font-size: 5em;
  position: relative;
  top: -0.3em;
  line-height: 1em; }

aside.iconSet a:link, aside.iconSet a:visited {
  color: #666666;
  float: left;
  height: 100%;
  margin: 0 auto;
  text-decoration: none;
  width: 100%; }

aside.iconSet a:hover, aside.iconSet a:active {
  color: #3fa9f5;
  background-color: #fff;
  -webkit-transition: all 0.6s ease-in;
  -moz-transition: all 0.6s ease-in;
  transition: all 0.6s ease-in; }

/* -------------------------------------------------------------- 
  
  Footer
   
-------------------------------------------------------------- */
footer {
  width: 700px;
  clear: both;
  margin: 45px 0 0 240px;
  text-align: right;
  padding: 25px 0;
  font: 0.75em/1.1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  float: left; }

#ku_logo_square {
  background-color: #099;
  height: 6.5em;
  width: 6.5em;
  color: #FFF;
  float: left;
  padding: 5px;
  margin: 0 0 20px 0;
  display: none; }

#ku_logo {
  color: #777;
  display: block;
  float: right;
  width: 220px; }

/* -------------------------------------------------------------- 
  
  ICONS Submit Buttons
   
-------------------------------------------------------------- */
a:focus {
  -moz-outline-style: none;
  outline: none; }

#icons {
  font-size: 1.2em;
  line-height: 1.2;
  float: left;
  width: 100%;
  margin: 0 0 10px; }

#icons a:link, #icons a:visited {
  background-color: #7ac943;
  color: #FFFFFF;
  display: inline-block;
  min-width: 100px;
  float: left;
  padding: 8px 10px;
  margin: 0 20px 0 0;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out; }

#icons a.submitBtn:hover, #icons a.submitBtn:active {
  background-color: #063; }

#icons a.saveBtn:link, #icons a.saveBtn:visited {
  color: #999;
  background-color: #fff;
  /*text color*/
  -webkit-transition: color 0.4s ease-out;
  -moz-transition: color 0.4s ease-out;
  transition: color 0.4s ease-out; }

#icons a.saveBtn:hover, #icons a.saveBtn:active {
  color: #f00; }

#icons a.inactiveBtn:link, #icons a.inactiveBtn:visited {
  background-color: #e5e5e5;
  color: #333; }

#icons a.deleteBtn:link, #icons a.deleteBtn:visited {
  background-color: #CC0000; }

#icons a.deleteBtn:hover, #icons a.deleteBtn:active {
  background-color: #990000; }

#icons a.cancelBtn:link, #icons a.cancelBtn:visited {
  color: #CC0000;
  background-color: #fff; }

#icons a.cancelBtn:hover, #icons a.cancelBtn:active {
  color: #900;
  text-decoration: underline; }

#icons a:link:last-child {
  margin-right: 0; }

/* -------------------------------------------------------------- 
  
   Grid Form: fieldset + input
   
-------------------------------------------------------------- */
form {
  display: inline-block;
  margin: 0 0 20px;
  padding: 0 0 20px; }

form.form_two {
  margin: 0 0 10px;
  padding: 0 0 10px; }

input[type="text"], input[type="email"], input[type="number"], input[type="datalist"], textarea, select {
  font-size: 1.2em;
  padding: 0;
  margin: 0;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out; }

select {
  border: 1px solid #d5d5d5;
  background-color: #FFF;
  padding: 2px 3px;
  margin: -2px 0 0; }

input.span-1-5 {
  width: 20px;
  margin-right: 17px;
  text-align: center; }

input.span-2-5 {
  width: 40px;
  margin-right: 17px; }

input.span-3-5 {
  width: 60px;
  margin-right: 17px; }

input.span-4-5 {
  width: 80px;
  margin-right: 17px; }

input.span-5-5 {
  width: 100px;
  margin-right: 17px; }

input.span-6-5 {
  width: 120px;
  margin-right: 17px; }

input.span-7-5 {
  width: 140px;
  margin-right: 17px; }

legend span {
  margin-right: 20px;
  float: left; }

legend span.span-1-5 {
  width: 20px; }

legend span.span-2-5 {
  width: 40px; }

legend span.span-3-5 {
  width: 60px; }

legend span.span-4-5 {
  width: 80px; }

legend span.span-5-5 {
  width: 100px; }

legend span.span-6-5 {
  width: 120px; }

legend span.span-7-5 {
  width: 140px; }

fieldset input:last-child, fieldset input.unit {
  margin-right: 0; }

textarea {
  resize: none;
  min-height: 80px; }

input[type="text"], input[type="email"], input[type="number"], input[type="datalist"], textarea {
  border-bottom: 1px solid #999;
  background: transparent;
  padding: 5px 0 2px; }

input[type="text"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="number"]::-webkit-input-placeholder, input[type="datalist"]::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  font-weight: 100;
  color: #999; }

input[type="text"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="number"]::-moz-placeholder, input[type="datalist"]::-moz-placeholder, textarea::-moz-placeholder {
  font-weight: 100;
  color: #999; }

input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="datalist"]:focus, textarea:focus {
  outline: none;
  border-bottom: 1px solid #3FA9F5;
  background-color: #FFC; }

fieldset {
  font-size: 10px;
  color: #333333;
  display: inline-block;
  margin: 0 17px 20px 0;
  width: 220px;
  vertical-align: text-top; }

main.three_column fieldset:nth-of-type(3n) {
  margin: 0 0 10px; }

main.two_column fieldset:nth-of-type(2n) {
  margin: 0 0 10px; }

fieldset legend {
  margin-top: 0;
  font-size: 1.2em;
  font-weight: 700;
  color: #336;
  display: block;
  margin-bottom: 4px;
  height: 15px; }

fieldset.wide {
  width: 460px; }

span[data-unit]:after {
  display: inline-block;
  min-width: 20px;
  margin: 0 20px 0 0;
  content: attr(data-unit);
  speak: none; }

input[type=radio], input[type=checkbox] {
  margin: 2px 0 0; }

input[type=radio] + label, input[type=checkbox] + label {
  font-weight: 400;
  margin: 0 10px 0 5px; }

input[type=radio]:checked + label, input[type=checkbox]:checked + label {
  font-weight: 700;
  color: #000; }

/* -------------------------------------------------------------- 
  
   Grid Form: warning highlight + confirmation
   
-------------------------------------------------------------- */
.warning_block, .update_confirm {
  display: block;
  width: 100%;
  padding: 10px;
  font-weight: 600;
  text-align: center;
  clear: both;
  margin: 20px 0 0;
  background-color: #ffff33;
  color: #000; }

.update_confirm {
  background-color: #3fa9f5;
  color: #fff;
  margin: 0;
  position: fixed;
  top: 0;
  left: 0; }

@keyframes myhide {
  0% {
    opacity: 0.85; }

  100% {
    opacity: 0; } }

@keyframes highlight {
  0% {
    background-color: #7ac943; }

  65% {
    background-color: #7ac943; }

  100% {
    background-color: #bdccd4; } }