@charset "UTF-8";
/* CSS Document */

@-ms-viewport{
  width: device-width;
}
	body,section.u4m-rich-text div.content p {font-family:"Roboto Condensed","Helvetica Neue", Helvetica, "Open Sans",sans-serif;}
.icon-color .fa-pencil{color:blue;}
.anchor-space{margin-bottom:25px;}

img{width:100%;max-width:500px;}
#style-nav{text-align:center;max-width:750px;margin:auto;}
#style-nav ul{margin:0;padding:0;width:100%;}
#style-nav li{list-style-type:none;padding:8px 25px 0 0;display: inline-block; white-space:nowrap;font-size:14px;font-weight:bold;}
header{position:absolute!important;}
header img{border:none!important;}


/*Sections*/
section {
	/*border: 1px solid #666;*/
	padding: 0;
	margin: 0;
}
article {
	background-color: #f7f7f7;
	padding: 20px;
	margin: 5px 0 15px 0;
	border: 1px solid #ccc;
}

/* Headers*/

h1,section.u4m-rich-text div.content .h1, section.u4m-rich-text div.content h1 {
	font-size: 1.9em;
	color: #000;
      font-family: Roboto Condensed,sans-serif;
}
h1 span,h2 span,h3 span,h4 span,h5 span,h6 span {
	padding-left: 20px;
	font-weight: normal;
}
h2,section.u4m-rich-text div.content .h2, section.u4m-rich-text div.content h2  {
	font-size: 1.6em;
	color: #a6cb0b;margin-top:15px!important;
      font-family: Roboto Condensed,sans-serif;
}
h3,section.u4m-rich-text div.content .h3, section.u4m-rich-text div.content h3  {
	font-size: 1.4em;
	color: #666;
	margin-bottom:6px;
      font-family: Roboto Condensed,sans-serif;
}
h4,section.u4m-rich-text div.content .h4, section.u4m-rich-text div.content h4  {
	font-size: 1.2em;
	color: #000080;
      font-family: Roboto Condensed,sans-serif;
}
h5,section.u4m-rich-text div.content .h5, section.u4m-rich-text div.content h5  {
	font-size: 1em;
	color: #666;
      font-family: Roboto Condensed,sans-serif;
}
h6,section.u4m-rich-text div.content .h6, section.u4m-rich-text div.content h6  {
	font-size: .9em;
	color: #666;
	font-style: italic;
      font-family: Roboto Condensed,sans-serif;
}
caption {
	font-size: 1rem;
	font-weight: normal;
	color: #666;
	margin: 0 10px;
	padding:10px;
}
aside {
	font-size: .9rem;
	font-weight: normal;
	color: #fff;
	padding: 10px;
	border: 1px solid #000080;
	width: 25%;
	margin:10px 0;
	background-color:#000080;
}
aside span{padding-left:20px;color:#fff;}
img {
	margin:0;
	border: 1px solid #ccc;

}

.extra-top{margin-top:40px;}
a:link,a:visited,a:active{color:#336699;text-decoration: underline;}
a:hover,a .fa:hover{color:#a6cb0b;}
a.toplink:hover{color:#a6cb0b;}
button{padding:7px 10px;border-color:transparent;border:1px solid #999;border-radius:7px;font-size:1rem;color:#fff;font-weight:600;}
button.button-action{background-color:#92b20a;}
button.button-action1{background-color:#a6cb0b;}
button.button-action2{background-color:#9cbf0a;}
button.button-action3{background-color:#92b20a;}
button.button-action4{background-color:#88a709;}
button.button-action5{background-color:#7d9907;}
button.button-inaction{background-color:#ccc;color:#666;}
button.button-negative{background-color:#cb0b0b;color:#fff;}
div.button-types{margin:10px 0;}

button.secondary-action{color:#336699;text-decoration: underline;background-color:transparent;border:none;}
button.secondary-inaction{color:#666;text-decoration: underline;background-color:transparent;border:none;}
button.secondary-negative{color:#cb0b0b;text-decoration: underline;background-color:transparent;border:none;}
button.secondary-action:hover{color:#a6cb0b;}

button.icon-action{background-color:#000080;text-align:center;display:inline-block;border-radius:5px;padding:4px 6px;}
button.icon-inaction{background-color:#ccc;color:#666;text-align:center;display:inline-block;border-radius:5px;padding:4px 6px;}
button.icon-negative{background-color:#cb0b0b;text-align:center;display:inline-block;border-radius:5px;padding:4px 6px;}

#listIcon{width:70%;}
#listIcon li{display:inline-block;padding:15px;width:125px;}
#listIcon li i{color:#000;}

.swatch-wrapper{display:flex;flex-wrap: wrap;}
#colors article .swatch{height:200px;width:200px;}
#colors article div{vertical-align:top;}
.color-primary,.color-secondary,.color-accent,.color-accent2,.color-back{width:100%;border:1px solid #ccc;padding:20px;margin:20px;display:inline-block;}
#colors p{font-size:70%;}
.color-primary h4,.color-secondary h4,.color-accent h4,.color-primary h5,.color-secondary h5,.color-accent h5{color:#fff;}
.color-primary{background-color:#a6cb0b;color:#333;}
.color-secondary{background-color:#000080;color:#fff;}
.color-secondary p{color:#fff;} 
.color-accent{background-color:#333;color:#fff;}
.color-accent p{color:#fff;}
.color-accent2{background-color:#2FCBE4;color:#fff;}
.color-accent2 p{color:#fff;}
.color-back{background-color:#F7F7EE;color:#333;}

.color-title{font-size:20px;height:initial;}
.color-hex{font-size:15px;height:initial;}
.color-desc{font-size:12px!important;height:initial;}

code{white-space:break-spaces!important;display:block;margin-top:10px;padding:10px;border:1px solid #ccc;word-break:break-all;}

#branding img{width:100%;max-width:520px;}

#principles h3{margin-top:20px;}

#icons ul{}
#icons li{padding-top:6px;}

#principles p{margin-bottom:15px;}
#principles img{margin:0 15px 15px 0;width:100%;max-width: 300px; float:right;}
@media (max-width:500px){
	#principles img{float:none;margin:0!important;margin-top:10px!important;}
}
#principles h5{font-size:18px;padding:5px;vertical-align:middle;background-color:fff;color:#a6cb0b;}
#principles li,#pages li,#tables li,#forms li{margin:20px 0;}

#pages img{max-width:75%;}
#pages table th{background-color:#ccc;padding:8px;}
#pages table td{background-color:#fff;padding:8px;}


#text h1 span,#text h2 span,#text h3 span,#text h4 span,#text h5 span,#text h6 span{vertical-align: middle;padding-bottom:3px;}
#text h2{margin-top:0;}

.headers h1{font-size:1.9em!important;color:#000;}
.headers h2{font-size:1.6em!important;color:#000;}
.headers h3{font-size:1.4em!important;color:#a6cb0b;}
.headers h4{font-size:1.2em!important;color:#000080;}
.headers h5{font-size:1em!important;color:#666;}
.headers h6{font-size:.9em!important;color:#666;margin-top:0em!important;text-transform:initial!important}

footer{margin-top:25px;padding:8px 15px;}
footer div{color:#333;font-size:11px;}
footer a:link,footer a:active,footer a:visited{color:#336699;}
footer a:hover{color:#a6cb0b;}

button {box-shadow:initial;}

.buttons-inline button{display:inline-block !important;}

#forms h5{margin-bottom:0;padding-bottom:0;}
#forms p{margin-top:0;padding-top:0;}

.app-icons{width:400px;}
.app-icons td,.app-icons th{text-align:center;border:1px solid #ccc;border-collapse:collapse;}


.app-growl{width:275px;height:125px;padding:10px;margin:25px;display:inline-block;vertical-align:bottom;}
.app-growl .fa{padding-right:5px;}
.app-growl div{display:inline-block:margin:10px;}
.growl-add{background-color:#a6cb0b;border-color: #a6cb0b;color: #444;}
.growl-update{background-color:#a6cb0b;border-color: #a6cb0b;color: #444;}
.growl-save{background-color:#a6cb0b;border-color: #a6cb0b;color: #444;}
.growl-submit{background-color:#a6cb0b;border-color: #a6cb0b;color: #444;}
.growl-delete{background-color: #f8eab9;border-color: #a6cb0b;color: #393b3e;}
.growl-deactivate{background-color: #f8eab9;border-color: #f8eab9;color: #393b3e;}
.growl-warning{background-color: #f8eab9;border-color: #f8eab9;color: #393b3e;}
.growl-error{  background-color: #fac7c8;border-color: #fac7c8; color: #393b3e;}

.button-align-r{text-align:right;}

body{padding:10px;overflow-x:hidden;}
.back-to-top .fa{font-size:25px;color:#336699;}

.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}

.responsive-diagrams{display:flex;flex-wrap:wrap;}
.responsive-diagrams img:nth-child(1){max-width:500px!important;}
.responsive-diagrams img:nth-child(2){max-width:300px!important;}

  .grid-example-tables{margin-top:20px;}
  .grid-example-tables div{border:1px solid #ccc;border-collapse: collapse;text-align:center;}
  .grid-example-tables .p-grid{margin-bottom:20px;background-color:#fff;}