/************************************************************************
Mechanical Classes
************************************************************************/
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.inline { display: inline-block; }

.margin-centered {
    margin-left: auto;
    margin-right: auto;
}

/************************************************************************
 Defaults and Element Styles
************************************************************************/

body {
    background: none repeat scroll 0 0 #fff;
    background-image: url('../Images/elements/grey_@2X.png');
    background-repeat: repeat;
    color: #000;
}
body.grayscale {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

input[type="checkbox"], input[type="radio"] {
    width: 25px;
    height: 25px;
    vertical-align: middle;
    cursor: pointer;
}
input[type="radio"] {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.form input[type="radio"] { margin-left: 50px; }
.bold {
    font-weight: 800;
}
.authorize_checkbox {
    margin-bottom: 15px;
}
.authorize_checkbox span {
    line-height: 28px;
}
.checkbox_row  {
    margin-bottom: 30px;
}
.checkbox_inner {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 16px;
    color: #222222;
}
.checkbox_inner span {
    margin-left: 10px;
}
/************************************************************************
 HEADER / FOOTER
************************************************************************/
.logoSource {
    display: none;
    height: 0px;
}

.headerRegion { background-color: #26568C; }
.headerRegion .row.bleed { padding: 0 30px; max-width: 1920px }

.headerRegion nav {}
.headerRegion nav.accountNav { float: right; margin-top: 30px; }

.headerRegion .mid-nav {
    height: auto;
    padding: 0px 10px;
}
.headerRegion .mid-nav-row {
    display: block;
    margin: 0 auto;
    clear: both;
    line-height: 10px;
}
.headerRegion .mid-nav-row ul {
    list-style: outside none none;
    width: 100%;
    height: 100%;
    margin-bottom: 0px;
    padding: 0;
    display: inline-block;
    zoom: 1;
}
.headerRegion .mid-nav-row ul li {
    list-style-type: none;
    float: left;
    position: relative;
    display: inline-block;
    text-align: center;
    min-width: 75px;
    z-index: 9;
}
.headerRegion .mid-nav-row ul li:active { box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; position: relative; top: 1px; }
.headerRegion .mid-nav-row ul li:first-child { min-width: 60px; }
.headerRegion .mid-nav-row ul li:last-child { border: none; -webkit-box-shadow: none; box-shadow: none; }

.headerRegion .mid-nav-row a { color: #ffffff; }
.headerRegion .mid-nav-row a {
    display: block;
    white-space: nowrap;
    text-transform: uppercase;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    padding: 21px 18px 21px 18px;
    margin: 0;
}
.headerRegion nav.accountNav .mid-nav-row li:hover a { background: #444444; color: #ffffff; }


@media screen and (max-width: 900px) {
    .headerRegion .mid-nav-row { padding: 0; }
    .headerRegion .mid-nav-row li a {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 767px) {
    .headerRegion .mid-nav-row ul li {
        float: none;
        border: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}



/*use the subleader for things like notifications / caution messages*/
#subheader {  position: relative;  position: relative; color: #eeeeee; /* colorScheme_primary-bg */ }
#subheader p { font-size: 1.6em; margin-bottom: 0; text-align: center; padding: 10px 0; }
#subheader a { color: #eeeeee; text-decoration: none; }
#subheader a:hover { text-decoration: none; color: #ffffff; }


/* topMenu
----------------------------------*/

#topMenu {
    background-color: #526E93;
    text-align: center;
}
#topMenu a {
    display: inline-block;
    margin: 0 10px;
    padding: 10px;
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
}
.topMenu a:hover {
    background-color: #4D82C3;
}

.topMenu-menu {

}
.topMenu-toggle {
    display: none;
    background:none;
	width:100%;
    margin: 0;
    padding: 0;
}
.topMenu-toggle a {
	width:100%;
	text-align: right;
    margin: 0 !important;
}
.topMenu-toggle a > i {
    font-size: 30px;
    margin-right: 14px
}
.topMenu-toggle.open {
    transition-property: border-top;
    transition-duration: 0.3s;
    transition-delay: 0.3s;
    border-top: 1px solid #ffffff;
}
.topMenu-toggle.open a > i {
    transition-property: transform;
    transition-duration: 0.5s;
    transition-delay: 0.3s;
    transform: rotate(180deg);
}

@media (max-width: 767px) {
    .topMenu-toggle {
        display: block;
    }
    .topMenu-menu.collapsed {
        display: none;
    }
    .topMenu-menu a, .topMenu-menu li {
        display: block;
        width: 100%;
        text-align: left;
    }
}
@media (min-width: 768px) {
    .topMenu-menu.collapsed {
        display: block !important;
    }
}


/* pageIntro
----------------------------------*/
.pageIntro { 
    max-width: 1000px; 
    margin: 10px auto;
    padding: 0 10px;
}
.pageIntro > * { }
.pageIntro > h3 { 
    font-family: 'Bitter', 'Open Sans', Helvetica, Arial, sans-serif; 
    font-size: 1.7em; 
    font-weight: 400;
    text-align: left;
    vertical-align: middle; 
    width: 65%;
    min-width: 300px;
    margin: 5px 0;
}

.pageIntro .breadcrumb { 
    padding-top: 5px;
    /*text-align: right;*/
}

.pageIntro h3.emphasizedHeader { margin: 40px auto 20px auto; }


/* Breadcrumb
----------------------------------*/
.breadcrumb-wrapper {
    padding: 0;
    /*max-width: 340px;*/
}
.breadcrumb {
	margin: 0;
	background-color: transparent;
	border-radius: 0;
	font-size: .7em;
    font-weight: bold;
	padding: 0;
}
.breadcrumb > li {
    display: inline-block;
    margin: 8px 0;
}
.breadcrumb li a:hover {
}
.breadcrumb li i {
	padding-right: 8px;
}
.breadcrumb > li + li:before {
	padding: 0 7px 0 5px;
	font-family: "FontAwesome";
	content: "\f0da";
    color: #000000;
}
.breadcrumb > .active {
	/*color: #26568C; .colorScheme_primary-text*/
}


#footer { color: #ffffff; /*background-color: #26568C; .colorScheme_primary-bg*/ }
#footer a { color: #ffffff; }

#footer [class*='adlLogo'] { width: 100%; max-width: 215px; }
#footer .adlLogo-white { display: block; }
#footer .adlLogo-black { display: none; }

#footer ul.listLayout > li > a { 
    padding: 0 5px;
    color: #ffffff; 
    background-color: inherit; 
    border: none; 
}
#footer ul.listLayout > li > a:hover { text-decoration: underline; }




/************************************************************************
 Content Wrapper /  Left Nav Menu
************************************************************************/

#mainContentWrapper {
    margin-bottom: 36px; 
}

#leftNavMenu {
    margin: 0;
    padding: 0;
    padding-right: 15px;
}
#leftNavMenu .sidebarContainer {
    /*background-color: #526E93; .colorScheme_primary-bg */
    border-style: solid;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 10px; /* .colorScheme_primary-border */
    border-bottom-width: 10px; /* .colorScheme_primary-border */
}
#leftNavMenu li.nav-parent {
    margin: 0;
}
#leftNavMenu li.nav-parent > a {
    padding: 10px 5px 10px 15px;
    font-size: 18px;
    border: none;
    /*background-color: #26568C; .colorScheme_primary-bg*/
    color: #ffffff;
}
#leftNavMenu li.nav-parent > a:hover { background-color: #444444; }
#leftNavMenu li.nav-parent > a i { margin: 0 10px 0 -5px; font-size: 18px; }
#leftNavMenu li.nav-parent.active > a { /*background-color: #526E93; .colorScheme_primary-desat*/ }
#leftNavMenu li.nav-child > a { 
    padding: 10px 5px 10px 35px;
    border: none;
    /*background-color: #526E93; .colorScheme_primary-desat*/
    color: #fff;
}
#leftNavMenu li.nav-child > a:hover { /*background-color: #4D82C3;*/ }



/************************************************************************
Independent-Styling Classes : BUTTONS 
************************************************************************/

.silverButton {
    -moz-box-shadow: inset 0 0 0 0 #ffffff;
    -webkit-box-shadow: inset 0 0 0 0 #ffffff;
    -ms-box-shadow: inset 0 0 0 0 #ffffff;
    box-shadow: inset 0 0 0 0 #ffffff;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
    background: -moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
    background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
    background: -o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
    background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
    background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
    background-color: #f9f9f9;
    border: 1px solid #dcdcdc;
    cursor: pointer;
    color: #666666;
    text-decoration: none;
    text-shadow: 0 0 0 #ffffff;

    -webkit-transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    -o-transition: color 0.2s linear;
    transition: color 0.2s linear;

    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
}
.silverButton:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
    background: -moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
    background: -webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
    background: -o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
    background: -ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
    background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
    background-color: #e9e9e9;
}
.silverButton:active {
    position: relative;
    top: 1px;
}

.widget_title.silverButton { padding: 10px 0; }
.widget_title.silverButton .plusMinus { font-size: 13px; }

.button.buttonClicked {
    /*background-color: #00A499; .colorScheme_secondary-bg */
    box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; 
    position: relative; 
    top: 1px;
}

a.pillButton, .pillButton > a {
    border-style: solid;
    border-width: 2px;
    padding: 4px;
    background-color: #ffffff;
    /*color: #26568C; .colorScheme_primary-text*/
    font-weight: bold;

    -webkit-transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    -o-transition: color 0.2s linear;
    transition: color 0.2s linear;

    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
}
a.pillButton:hover, .pillButton:hover > a {
    background-color: #26568C;
    color: #ffffff;
    text-decoration: none;
}


/* Return to Top */
#returnToTop {
    display: none;
    text-align: center;
    /*background-color: #26568C; .colorScheme_primary-bg */
    width: 100px;
    bottom: 0px;
    right: 20px;
}
#returnToTop > a {
    line-height: 20px;
    font-size: 18px;
    border: none;
    color: #ffffff;
    margin: 0;
    padding: 8px;
    padding-top: 20px;
    width: 100%;
    height: 100px;
    display: block;

    -webkit-transition: padding-top 0.1s ease;
    -moz-transition: padding-top 0.1s ease;
    -o-transition: padding-top 0.1s ease;
    transition: padding-top 0.1s ease;
}
#returnToTop > a:hover { 
    background-color: #444444; 
    padding-top: 10px;
}
#returnToTop > a > i { 
    display: block; 
    margin: 0;
    padding: 0;
    font-size: 25px;
}

@media screen and (max-width: 750px) {
    #returnToTop {
        bottom: 0px !important;
    }
}


/* Toggle Switches */
.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}

input.cmn-toggle-round-flat + label {
  padding: 2px;
  width: 60px;
  height: 30px;
  background-color: #dddddd;
  border-radius: 60px;
  transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:before,
input.cmn-toggle-round-flat + label:after {
  display: block;
  position: absolute;
  content: "";
}
input.cmn-toggle-round-flat + label:before {
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  background-color: #fff;
  border-radius: 60px;
  transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:after {
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 25px;
  background-color: #dddddd;
  border-radius: 50px;
  transition: margin 0.4s, background 0.4s;
}
input.cmn-toggle-round-flat:checked + label {
  background-color: #8ce196;
}
input.cmn-toggle-round-flat:checked + label:after {
  margin-left: 26px;
  background-color: #8ce196;
}



/************************************************************************
Independent-Styling Classes / General
************************************************************************/

/* DIVIDER */
[class*='hr'] { margin: 10px 0; }
.hr-dashed { border: 0; border-bottom: 1px dashed #ccc; background: #999; }
.hr-solid { height: 8px; background-color: #FDBF5C; }

.title-fullBreak {
    border-bottom: 3px solid #444;
    border-top: 3px solid #444;
    display: block;
    padding: 5px;
    margin: 20px 5%;
    color: #444;
    background-color: #fff;
    text-align: center;
    line-height: 2.3em;
}
.title-fullBreak i {
    font-size: 1.5em;
    line-height: 1.5em;
    padding: 3px 5px;
    /*color: #26568C; .colorScheme_primary-text*/
    position: relative;
}
.title-fullBreak .fa-caret-right { float: left; }
.title-fullBreak .fa-caret-left { float: right; }

.title-flatBlock {
    /*background-color: #26568C; .colorScheme_primary-bg*/
    color: #ffffff;
    max-width: 600px;
    padding: 10px;
    padding-left: 5%;
    margin: 20px 0;
    font-family: Bitter, 'Open Sans',Arial, Helvetica, sans-serif;
}

.emphasizedHeader { 
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-style: italic;
    letter-spacing: 1px; 
}
.title-emphasizedHeader {
    display: inline-block;
    color: #444444;
    /*background-color: #F1EEEA; colorScheme_offwhite-bg */
    border: 0px solid #333;
    padding: 0;
    padding-right: 30px;
    line-height: 2em;
}
.title-emphasizedHeader i {
    position: relative;
    left: -10px;
    margin: -10px 0;
    margin-right: 20px;
    padding: 20px;
    font-size: 1.3em;
    line-height: .8em;
    color: #444444;
    background-color: #cfc7bd;
    border: 2px solid #444444;
}

div.progressContainer { margin: 20px 0;}
div.progressContainer h6 { font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 1.2em; }



.slimRibbon > strong { color: #ffffff; display: inherit; min-width: 100px; margin: 0; }
.slimRibbon > strong:before,
.slimRibbon > strong:after {
	content: "";
	border-color: #444444 transparent transparent transparent;
	position: absolute;
	border-style: solid;
	bottom: -.65em;
}
.slimRibbon > strong:before { left: 0; border-width: .7em 0 0 .7em; }
.slimRibbon > strong:after { right: 0; border-width: .7em .7em 0 0; }




/************************************************************************
Independent-Styling Classes : Lists
************************************************************************/

/*List layouts generic - specific, rare listLayouts in dependent classes*/
ul[class*='listLayout'] { width: 100%; list-style: none; padding: 0; margin: 0; }
ul[class*='listLayout'] > li { display: inline-block; }

ul.listLayout-verticalNav { }
ul.listLayout-verticalNav > li { display: block; width: 100%; }
ul.listLayout-verticalNav > li > a { 
    display: block; 
    width: 100%; 
    padding: 5px 0 5px 15px;
    color: #03384e;
    border-bottom: 1px solid #efefef;
}
ul.listLayout-verticalNav > li:last-child > a { border: none; }
ul.listLayout-verticalNav > li:hover > a,
ul.listLayout-verticalNav > li > a:hover { background-color: #26568C; color: #ffffff; }
ul.listLayout-verticalNav > li > a.active { background-color: #26568C; color: #ffffff; }

ul.listLayout-outlinedParagraphs {}
ul.listLayout-outlinedParagraphs > li { 
    width: 100%;
    border-style: solid; 
    border-width: 2px;
    border-color:  #26568C; /* replaced by colorScheme_primary-border in html */
    margin-bottom: 10px; 
    padding: 8px 8px 15px;
} 


/*Conventional list styles*/

ul.infoList {}
ul.infoList > li {}
ul.infoList > li > i {}
ul.infoList > li > p {}



/************************************************************************
Independent-Styling Classes : Index cards
************************************************************************/


.matteThumb, .assessmentNav, .indexCard, .sidebarContainer, .article {
    background: #fff;
    border: 5px solid #fff;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    box-shadow: 0 2px 2px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.2);

    -webkit-transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    -o-transition: color 0.2s linear;
    transition: color 0.2s linear;

    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
    
}

indexCardContainter {}
.row.indexCardContainer { padding: 0 15px; }

.indexCard { 
    width: 100%;
    margin: 40px auto;
    padding: 20px 0;
    box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.2);
}
.cardlessContent {
    width: 100%;
    margin: 40px auto;
    padding: 20px 0;
}
.indexCard.collapsed { padding: 0; margin: 0; }


.sidebarContainer { margin: 40px auto; width: 100%; min-width: 150px; }
.sidebarContainer > h6 { 
    margin: 0 0 20px 0; 
    padding: 20px 0 20px 15px;
    border-bottom: 1px dashed #ccc;
}
.sidebarContainer .listLayout-verticalNav li a {
    font-family: 'Open Sans',Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 5px 5px 5px 15px;
}



/************************************************************************
Independent-Styling Classes : Icon Blocks
************************************************************************/

/* use with assessmentIcon class prefix, but can use these anywhere*/
/*see assessment categories for example*/
.iconBlock {
    min-height: 125px;
    padding-top: 75px;
    text-align: center;
    vertical-align: bottom;
    border: 1px solid #000000;
}
a.iconBlock {
    display: inline-block;
    width: 125px;
    height: 125px;
    margin: 0;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 21px; 
    font-weight: 400;
    /*background-color: #F1EEEA; colorScheme_offwhite-bg */
    color: #000000;

    -webkit-transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    -o-transition: color 0.2s linear;
    transition: color 0.2s linear;

    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
}
a.iconBlock:hover { background-color: #FDBF5C; }
a.iconBlock:active { box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; position: relative; top: 1px; }
a.iconBlock[class*='assessmentIcon'] {}
a.iconBlock > span { }
h1.iconBlock {
    display: block;
    margin: 30px auto;
    padding-bottom: 15px;
    font-family: "Bitter","Open Sans", Helvetica, Arial, sans-serif;
    font-size: 2.3em;
    font-weight: 400;
    letter-spacing: 1px;
}


/*iconTiles */
.iconTile {
    color: #000000;
    background-color: #ffffff;
    padding: 30px;
}
.iconTile i { 
    font-size: 36px;
	/*color: #26568C; colorScheme_primary-text*/
	width: 70px;
	height: 70px;
    border-style: solid;
    border-width: 5px;
	/*border-color: #26568C; colorScheme_primary-border*/
	text-align: center;
	line-height: 65px;
	float: left;
	margin: 0 30px 100px 0;
}
.iconTile * {
	margin-top: 0;
    margin-left: 30px;
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	    -ms-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
			transition: all 0.2s linear;
}
.iconTile h4 { color: #000000; }
.iconTile p {
    color: #000000;
    font-size: 18px;
    margin-top: 10px;
}
.iconTile a { 
    text-align: center; 
    margin: 0 auto; 
    display: inline-block; 
}

@media screen and (max-width: 700px) {
    .iconTile i { 
        float: none; 
        display: block; 
        margin: 0 auto 30px auto;
    }
    .iconTile a { width: 100%; }
}


/************************************************************************
Independent-Styling Classes : Thumbnail / gallery blocks
************************************************************************/

.matteThumb .matteThumbLabel {
    background-color: #444444;
    background: rgba(0,0,0,.7);
    color: #fff;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-size: 19px;
    text-align: left;
    /*letter-spacing: 1px;*/
    display: block;
    overflow: hidden;
    padding: 7px 3%;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}
.matteThumb .matteThumbLabel > h4 {
    color: #fff;
    margin-top: 0;
    margin-bottom: 3px;
    font-size: 21px;
}
.matteThumb img { width: 100% !important; height: auto; }
.matteThumb .matteThumbContent > img { padding-bottom: 40px; /*colorScheme_secondary-bg*/ }
.matteThumb + * > .button { margin-top: 5px; }

.matteThumbOverlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 97%; 
    color: #fff; 
    display: block; 
    opacity: 0; 
    -webkit-transition: opacity 0.25s ease-out; 
    -moz-transition: opacity 0.25s ease-out; 
    -o-transition: opacity 0.25s ease-out; 
    transition: opacity 0.25s ease-out; 
}
.portofoliothumb:hover .matteThumbOverlay, a.matteThumbOverlay:hover { 
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    -ms-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out; 
    opacity: 1; 
    color: #ffffff;
}
.matteThumbOverlay > i { font-size: 30px; margin-top: 10%; }
.matteThumbOverlay > p { font-size: 19px; }

.matteThumbOverlay, .matteThumbContent > img {
    /*background: #00A499;  colorScheme_secondary-bg*/
}

.topicGrid > div.two { min-width: 140px; }
.topicGrid > div.three { min-width: 200px; }


@media only screen and (max-width: 480px) and (min-width: 300px) {
    .topicGrid > div.two { width: 50% !important; float: left; }
    .topicGrid > div.two:last-child { float: left; }
}



/*titled thumbs --> used as category headers */
.titledThumb { 
    margin: 0;
    margin-bottom: -20px; 
    padding: 0; 
    width: auto;
    display: block;
    overflow: hidden;
}
.titledThumb > img {  
    width: 90%; 
    margin: 0 auto; 
    padding: 0; 
    display: block;
}
.titledThumb > h4 {
    background-color: #444444;
    background: rgba(0,0,0,.75);
    color: #ffffff;
    font-family: 'Bitter','Open Sans', Helvetica, Arial, sans-serif;
    font-size: 21px;
    text-align: center;
    letter-spacing: 2px;
    display: block;
    width: 99%;
    margin: 0px;
    padding: 7px 3%;
    position: relative;
    left: 0;
    bottom: 50px;
    float: left;
}

/************************************************************************
Independent-Styling Classes : Social Links
************************************************************************/

.socialLinks i.fa { 
    color: #e5e5e5; 
    font-size: 2em; 
    -webkit-transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    -o-transition: color 0.2s linear;
    transition: color 0.2s linear;

    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
}
.socialLinks a:hover i.fa { color: #ffd800; }
.socialLinks a:hover i.fa-facebook-square { color: #3b5998; }
.socialLinks a:hover i.fa-google-plus-square { color: #dd4b39; }
.socialLinks a:hover i.fa-twitter-square { color: #00aced; }
.socialLinks a:hover i.fa-pinterest-square { color: #cb2027; }

.socialLinks ul.listLayout li { margin: 0 7px; }



/************************************************************************
Independent-Styling Classes : Assessment Navigation
************************************************************************/

.assessmentNav {}
.row div.four.columns.assessmentNav { 
    width: 295px; 
    min-width: 295px;
    margin: 20px 5px;
    padding: 10px 0;
    text-align: center;
}
.assessmentNav .titledThumb {}
.assessmentNav .titledThumb > img {}
.assessmentNav .titledThumb > h4 {}
.assessmentNav ul.listLayout-categoryNav {}

ul.listLayout-categoryNav { margin: 0; padding: 0 9px; }
ul.listLayout-categoryNav li {
    float: left; 
    text-align: center;
    margin: 3px;
    padding: 0px;
}
ul.listLayout-categoryNav li a.iconBlock {}
ul.listLayout-categoryNav li:hover a.iconBlock, 
ul.listLayout-categoryNav li a.iconBlock:hover { }

ul.listLayout-categoryNav li > span[class*='target'] { width: auto; margin: 0; padding: 0; }
ul.listLayout-categoryNav > li:last-child:nth-child(odd) { margin-left: 65px; }

ul.listLayout-categoryNav li.showMore { display: block; width: 100%; margin: 10px -6px 0 -4px; }
ul.listLayout-categoryNav li.showMore a { display: block; width: 100%; margin: 0; }
ul.listLayout-categoryNav li.showMore:hover a,
ul.listLayout-categoryNav li.showMore a:hover {}


[class*='assessmentIcon'] { 
    background-image: url('../Images/assessmentIcons/assessmentIcon-placeholder.png'); 
    background-repeat: no-repeat; 
    background-position: center top; 
}
/*can also micromanage the text/top padding here*/
.assessmentIcon-Hygiene {
	background: url('../Images/assessmentIcons/blacklow/assessmentIcon-hygiene.png'); 
	background: url('../Images/assessmentIcons/blackhigh/assessmentIcon-hygiene.png') center top / contain no-repeat; 
}
.assessmentIcon-Mobility {
	background: url('../Images/assessmentIcons/blacklow/assessmentIcon-mobility.png'); 
	background: url('../Images/assessmentIcons/blackhigh/assessmentIcon-mobility.png') center top / contain no-repeat; 
}
.assessmentIcon-Dressing {
	background: url('../Images/assessmentIcons/blacklow/assessmentIcon-dressing.png'); 
	background: url('../Images/assessmentIcons/blackhigh/assessmentIcon-dressing.png') center top / contain no-repeat; 
}
.assessmentIcon-BathingandToileting {
	background: url('../Images/assessmentIcons/blacklow/assessmentIcon-bathingtoileting.png'); 
	background: url('../Images/assessmentIcons/blackhigh/assessmentIcon-bathingtoileting.png') center top / contain no-repeat; 
}
.assessmentIcon-MealsEating {
	background: url('../Images/assessmentIcons/blacklow/assessmentIcon-mealseating.png'); 
	background: url('../Images/assessmentIcons/blackhigh/assessmentIcon-mealseating.png') center top / contain no-repeat; 
}
.assessmentIcon-MedicationManagement {
	background: url('../Images/assessmentIcons/blacklow/assessmentIcon-medicationmanagement.png'); 
	background: url('../Images/assessmentIcons/blackhigh/assessmentIcon-medicationmanagement.png') center top / contain no-repeat; 
}
.assessmentIcon-MealPreparation {
	background: url('../Images/assessmentIcons/blacklow/assessmentIcon-mealpreparation.png'); 
	background: url('../Images/assessmentIcons/blackhigh/assessmentIcon-mealpreparation.png') center top / contain no-repeat; 
}
.assessmentIcon-HouseholdChores {
	background: url('../Images/assessmentIcons/blacklow/assessmentIcon-householdchores.png'); 
	background: url('../Images/assessmentIcons/blackhigh/assessmentIcon-householdchores.png') center top / contain no-repeat; 
}
.assessmentIcon-Communication {
	background: url('../Images/assessmentIcons/blacklow/assessmentIcon-communication.png'); 
	background: url('../Images/assessmentIcons/blackhigh/assessmentIcon-communication.png') center top / contain no-repeat; 
}
.assessmentIcon-Finances {
	background: url('../Images/assessmentIcons/blacklow/assessmentIcon-finances.png'); 
	background: url('../Images/assessmentIcons/blackhigh/assessmentIcon-finances.png') center top / contain no-repeat; 
}
.assessmentIcon-Transportation {
 	background: url('../Images/assessmentIcons/blacklow/assessmentIcon-transportation.png'); 
	background: url('../Images/assessmentIcons/blackhigh/assessmentIcon-transportation.png') center top / contain no-repeat; 
}
.assessmentIcon-Shopping {
	background: url('../Images/assessmentIcons/blacklow/assessmentIcon-shopping.png'); 
	background: url('../Images/assessmentIcons/blackhigh/assessmentIcon-shopping.png') center top / contain no-repeat; 
}
.assessmentIcon-Falls {
	background: url('../Images/assessmentIcons/blacklow/assessmentIcon-falls.png');
	background: url('../Images/assessmentIcons/blackhigh/assessmentIcon-falls.png') center top / contain no-repeat; 
}
.assessmentIcon-Depression {
	background: url('../Images/assessmentIcons/blacklow/assessmentIcon-depression.png');
	background: url('../Images/assessmentIcons/blackhigh/assessmentIcon-depression.png') center top / contain no-repeat; 
}
.assessmentIcon-Pain {
	background: url('../Images/assessmentIcons/blacklow/assessmentIcon-pain.png');
	background: url('../Images/assessmentIcons/blackhigh/assessmentIcon-pain.png') center top / contain no-repeat; 
}
.assessmentIcon-Medication {
	background: url('../Images/assessmentIcons/blacklow/assessmentIcon-medication.png');
	background: url('../Images/assessmentIcons/blackhigh/assessmentIcon-medication.png') center top / contain no-repeat; 
}



.indexCard.assessmentDescription { width: auto; max-width: 700px; }
.indexCard.assessmentDescription img { margin-bottom: 20px; width: 100%; max-width: 215px; }

.indexCard.assessmentQuestion { width: auto; max-width: 700px; padding: 20px; min-height: 300px; }
.indexCard.assessmentQuestion h2 { font-size: 2.3em; letter-spacing: 1px; line-height: initial; margin-bottom: 30px; }
.indexCard.assessmentQuestion .answerButtons .button { padding: 15px 60px 16px; }
.indexCard.assessmentQuestion { position: relative; }
.indexCard.assessmentQuestion #loader > img { position: absolute; right: 30px; bottom: 20px; }




/************************************************************************
Independent-Styling Classes : AssessmentBanners
************************************************************************/

div.assessmentBanner {
    width: 100%;
    max-width: 500px;
    margin: 0;
    padding: 0;
}
div.assessmentBanner img {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
}
div.assessmentBanner p {
    background-color: #03384e;
    color: #ffffff;
    margin: 0;
    padding: 10px;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 18px;
    
}
div.assessmentBanner a.button {
    margin: 0;
}






/************************************************************************
Page-Specific : Articles and Categories
************************************************************************/

div.article {
    padding: 10px;
}

div.article > .articleHeader {}
div.article > .articleHeader > h6 { font-size: 20px; }
div.article > .articleHeader > h4 { font-size: 24px; }
div.article > .articleHeader > p {}

div.article > .articleBody { font-size: 1.0em; }

.indexCard.articleTeaser { padding: 20px; }
.indexCard.articleTeaser > h3 { letter-spacing: 1px; }
.indexCard.articleTeaser > h3:hover > a,
.indexCard.articleTeaser > h3 > a:hover { }
.indexCard.articleTeaser > p { margin: 20px 0; }
.indexCard.articleTeaser img {
    padding:10px;
    float:left;
    width:20%;
    min-width: 120px;
    height:20%;
}
.indexCard.articleTeaser .button { 
    display: block; 
    width: 30%;
    min-width: 170px;
    margin-left: auto; 
    margin-right: auto;
}


.indexCard.quicktipTeaser { margin: 20px auto; padding: 10px;min-height: 175px; }
.indexCard.quicktipTeaser > a { border: none; }
.indexCard.quicktipTeaser h4 {
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 23px; 
    text-align: center; 
    /*background-color: #526E93; colorScheme_primary-desat */
    color: #fff;
    padding: 10px 5px;
    margin: 0 0 10px 0;
    min-height: 89px;
}
.indexCard.quicktipTeaser .quicktipTeaser-img { height: 150px; overflow: hidden; }
.indexCard.quicktipTeaser img {
    width: 60%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.indexCard.quicktipTeaser p { margin: 10px 0; min-height: 115px; }
.indexCard.quicktipTeaser .button { display: block; }


.indexCard.newsletterTopic { width: 290px; padding: 10px 10px 0 10px; }
.indexCard.newsletterTopic .slimRibbon { left: 1px; }
.hr-solid.newsletterTopic { position: relative; top: 160px; z-index: -1; }





/************************************************************************
Page-Specific : Healthcare Navigators
************************************************************************/

.navigatorPanel {}
.navigatorPanel > p.navigatorDescription {
    text-align: left;
    font-size: 20px;
    padding: 10px;
    min-height: 215px;
}
.navigatorPanel > .button.expand { margin-top: 10px; }

.navigatorNav {}
.navigatorNav > .sidebarContainer li a { }
.navigatorNav .row > .topicGrid .six.columns { padding: 15px; }


.navigatorContent { padding: 15px; }
.navigatorContent strong { color: #000000; }
.navigatorContent li{ margin-bottom: 15px; }
.navigatorContent img { text-align: center; }




/************************************************************************
Page-Specific : Home / Landing
************************************************************************/
.heroImage { /*width: 1000px; margin: 0 auto;*/ } /*just proof-of-concept, you can still do this for client wraps*/
.heroImage > img { width: 100%; height: auto; }


.heroContainer {
    display: inline-block;
    position: absolute;
    bottom: 2px;
    left: 0px;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
    background-color: #000;
    background-color: rgba(0,0,0,.75);
}
.heroContainer > * { color: #fff; line-height: 40px; }
.heroContainer > h1 {
    font-family: Bitter, Georgia, 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 25px;
    letter-spacing: 1px;
}
.heroContainer > p {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 23px;
    width: 80%;
}
.heroContainer div.buttonSpacer { margin-bottom: 0px }
.heroContainer a.button {
    position: absolute;
    bottom: 0;
    right: 0;
}
.heroContainer a.button:active { top: initial; bottom: 3px; }

@media only screen and (max-width: 1080px) and (min-width: 700px) {
    .heroContainer { width: 100%; max-width: 2000px; padding: 15px; }
    .heroContainer > * { line-height: 25px; }
    .heroContainer > h1 { font-size: 23px; }
    .heroContainer > p { font-size: 21px; width: 80%; }
    .heroContainer div.buttonSpacer { margin-bottom: 0px; }
    .heroContainer a.button { padding: 8px 17px 9px; font-size: 17px; }
}
@media only screen and (max-width: 700px) {
    .heroContainer { position: static; padding: 10px; }
    .heroContainer > * { line-height: 25px; }
    .heroContainer > h1 { font-size: 18px; }
    .heroContainer > p { font-size: 18px; width: 100%; }
    .heroContainer div.buttonSpacer { margin-bottom: 40px; }
    .heroContainer a.button { padding: 8px 17px 9px; font-size: 17px; }
}


.introduction-Container {
    width: 100%;
    height: auto;
    background-image: url(../Images/banners/heroImage-faded01.jpg);
    background-size: cover;
    background-position: center right;
    margin: 0 auto;
}
.introduction-Container .mask {
    padding: 40px 0;
    background-color: rgba(0, 0, 0, .35);
}
.introduction-Container .row {
    margin-left: auto;
    margin-right: auto;
    padding: 20px 10px;
}
.introduction-Container h2, .introduction-Container p {
    text-shadow: 2px 2px 3px rgba(0, 0, 0, .5);
    color: #ffffff;
}
.introduction-Container p {
    margin-bottom: 40px;
}
.introduction-Container .button {
    margin-top: 10px;
    margin-bottom: 10px;
}
.introduction-Container .flex-video {
    -webkit-box-shadow: 7px 7px 20px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 7px 7px 20px -1px rgba(0,0,0,0.75);
    box-shadow: 7px 7px 20px -1px rgba(0,0,0,0.75);
    margin-top: 20px;
}


/************************************************************************
Client Marketing
************************************************************************/

div.clientMarketing {
    width: 100%;
    padding: 0;
    font-size: 16px;
    padding: 15px;
}
div.clientMarketing img {
    width: 100%;
    height: auto !important;
}
/*may eventually remove*/
div.clientMarketing > p {
    margin: 0 auto;
    padding: 0;
}
div.clientMarketing table {
    width: 100%;
}
div.clientMarketing em, div.clientMarketing i { 
    font-style: italic;
}
div.clientMarketing strong, div.clientMarketing b { 
    font-style: bold;
    font-weight: 700;
}
div.clientMarketing [class*='ckTemplate'] h4 {
    font-family: 'Bitter','Open Sans',Arial,Helvetica,sans-serif;
    font-size: 21px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 25px;
    margin: 10px 0;
}
div.clientMarketing [class*='ckTemplate'] ul {
    padding-left: 30px;
}





/************************************************************************
Page-Specific : Assessment Results page
************************************************************************/

#assessmentResults {}


#assessmentResults .title-emphasizedHeader { color: #fff; border: 3px solid #777; border-left: none; }
#assessmentResults .title-emphasizedHeader i { left: 0; }

#assessmentResults input[type="submit"].button { margin-bottom: 10px; }


/************************************************************************
Default rules to override in client css
************************************************************************/

/* ---------------- */
/* --Color-Scheme-- */
/* ---------------- */

/* remember, you can always override the important by using a more specific selector */
.colorScheme_primary-text { color: #244d7c; }
.colorScheme_primary-bg { background-color: #26568C; }
.colorScheme_primary-desat { background-color: #526E93; }
.colorScheme_primary-hover:hover { background-color: #4D82C3; }
.colorScheme_primary-border { border-color: #26568C; }
.colorScheme_secondary-text { color: #007c74; }
.colorScheme_secondary-bg { background-color: #00A499; }
.colorScheme_secondary-hover:hover { background-color: #00A499; }
.colorScheme_secondary-border { border-color: #00A499; }
.colorScheme_accent-text { color: #FDBF5C; }
.colorScheme_accent-bg { background-color: #FDBF5C; }
.colorScheme_offwhite-text { color: #F1EEEA; }
.colorScheme_offwhite-bg { background-color: #F1EEEA; }



/* ---------------- */
/* --LOGO-- */
/* ---------------- */

/* DEFAULT MULTI HEADER */
/* Keep in mind, these are intended to be overriden in the client.css, including width percentages if so desired */

#logoSource-desktop { background-image: url('orange/logo-desktop.png'); }
#logoSource-tablet { background-image: url('orange/logo-tablet.png'); }
#logoSource-mobile { background-image: url('orange/logo-mobile.png'); }

#headerLogo-desktop {
    width: 90%;
    max-width: 240px;
    min-width: 240px;
}
#headerLogo-tablet {
    width: 60%;
    max-width: 240px;
    min-width: 240px;
}
#headerLogo-mobile {
    width: 240px;
}

.headerRegion { background-color: #26568C; }

#topMenu {
    background-color: #526E93;
}
#topMenu a {
    color: #fff;
}
#topMenu a:hover {
    background-color: #4D82C3;
}


/* ------------------------ */
/* --OtherSpecificElements--*/
/* ------------------------ */

a { color: #26568C; }
strong { color: #26568C; }

.readmore, .button { 
    background: #26568C; 
    -webkit-box-shadow: inset 0 -5px 0 0 #03384e;
    box-shadow: inset 0 -4px 0 0 #03384e;
}
.readmore:hover { 
    text-decoration: none; 
    -webkit-box-shadow: inset 0 -5px 0 0 #03384e;
    box-shadow: inset 0 -4px 0 0 #03384e;
}

a.pillButton:hover, .pillButton:hover > a { background-color: #26568C; }

ul.listLayout-verticalNav > li > a:hover { background-color: #26568C; color: #ffffff; }
ul.listLayout-verticalNav > li > a.active { background-color: #26568C; color: #ffffff; }

.hr-solid { background-color: #FDBF5C; }

a.iconBlock:hover { background-color: #FDBF5C; }















/* -------------------------------------------------------- */
/* --Less Important / Random (not part of client styles) -- */
/* -------------------------------------------------------- */

::-moz-selection{ background: #26568C; color:#fff; }
::selection{ background:#26568C;color:#fff; }
.tags { background:#26568C; }
.back-top a:hover{ background-color: #26568C; }
.slide {	margin: 0;	padding: 0;	border-top: solid 4px #26568C;}
.btn-slide { background:#26568C url(../../images/plus.png) no-repeat;}
.btn-slide.active { background: #26568C url(../../images/minus.png) no-repeat;}
.panel { border-left:4px solid #26568C; }



/*Assorted quick styles*/

.block {
    width: 100%;
    margin: 15px auto;
    padding: 0;
}

.roundedDiv {
    background-color: #ffffff;
    border-radius: 25px;
    border: 2px solid #26568C;
    padding: 20px; 
}

.articleSource {
    background-color: #F1EEEA;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 13px;
    font-family: 'Segoe UI', 'Open Sans', sans-serif;
}



@media print {
    .accountNav { display: none !important; }
    #topMenu { display: none !important; }
    #mainContentWrapper { background: none !important; }
    .breadcrumb { display: none !important; }
    #leftNavMenu { display: none !important; }
    .sidebarContainer { display: none !important; }
    #returnToTop { display: none !important; }
    .stButton, .st_fblike { display: none !important; }
    
    a.button { display: none !important; }

    .articleHeader > h6 { display: none !important; }
    .headline { padding-bottom: 0px; }
    .indexCard { margin-top: 5px; margin-bottom: 5px; }

    .column, .columns { width: auto !important; float: none; }
	.column:last-child, .columns:last-child { float: none }
	.column:before, .columns:before, .column:after, .columns:after { content: ""; display: table; }
	.column:after, .columns:after { clear: both }

    .four .logo { width: 40% !important; }
    #footer .adlLogo-white { display: none !important; }
    #footer .adlLogo-black { display: block !important; width: 40% !important; }

    .no-print { display: none !important; }
}

.validation-summary-errors ul{
    list-style:none;
    color:red;
}