@import url('Deprecated.css');

/* ############################################################################
   ## 
   ##  CONTENT CLASSES
   ##  - All of these are included as style options in the CMS visual editor
   ##
   ######################################################################### */

/* ####################################
   General Classes
   ################################## */

/* ####################################
   CCV Specific Content Classes
   ################################## */
   
.blue {
	color: #0f1e64;
}
.lightBlue {
	color: #009bdc;
}
.purple {
	color: #7d46a0;
}
.terracotta {
	color: #f05028;
}
.green {
	color: #6ec846;
}
.backgroundYellow {
	background: #ffd200;
}
.backgroundGrey {
	background: #f1f5f8;
}
	.backgroundYellow a, .backgroundGrey a {
		color: #0f1e64;
		text-decoration: underline;
	}
.backgroundBlue {
	background: #0f1e64;
}
	.backgroundBlue {
		color: #fff;
	}
	.backgroundBlue h2 {
		color: #ffd200;
	}
.blueBanner {
	background: #0f1e64;
	color: #fff;
}
	.blueBanner.fullWidth {
		padding-bottom: 30px;
	}
	.blueBanner h1, .blueBanner h2, .blueBanner h3, .blueBanner h4 {
		color: #ffd200;
	}
	#PageBody .blueBanner a, #PrimaryInner .blueBanner a {
		color: #fff;
		text-decoration: underline;
	}
	#PageBody .blueBanner a.linkCallToAction, #PrimaryInner .blueBanner a.linkCallToAction {
		color: #000;
		text-decoration: none;
	}
.highlightDownload {
	padding: 16px 20px 30px 20px;
	margin-bottom: 30px;
	background-color: #f1f5f8;
	background-position: 20px center;
	border-radius: 0 50px 0 50px;
	color: #0F1E64;
	overflow: hidden;
	position: relative;
	font-variant-ligatures: no-common-ligatures;
}
.highlightDownloadBackground {
	background-repeat: no-repeat;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
	width: 200px;
	height: 100%;
	float: left;
	position: absolute;
	left: 20px;
    background-size: 150px;
}
.highlightDownload h2,
.highlightDownload h3,
.highlightDownload h4 {
	margin-top: 10px;
	font-size: 1.4rem;
	margin: 1.25em 0 0.75em 0;
	font-family: "FocoCCBold", "FocoCC", "FocoBold", "Foco", Arial, Helvetica, Sans-Serif;
}

@media screen and (max-width: 640px ) {
	.highlightDownload h2,
	.highlightDownload h3,
	.highlightDownload h4 {
		font-size: 1.25rem;
	}
}
.highlightDownload.backgroundImage {
	padding-left: 250px;
}

@media screen and (max-width: 480px) {
	.highlightDownload.backgroundImage {padding:10px 20px;}
	.highlightDownloadBackground{position:relative;height: 250px;background-position:center center;float: none;}
}

.reviewedBy {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 20px 0px;
	font-size: 80%;
	margin-bottom: 40px;
}
	.reviewedBy h2 {
		font-family: "FocoCCLight", "FocoCCBold", "FocoLight", "FocoBold", Arial, Helvetica, Sans-Serif;
		font-weight: normal;
		font-size: 170%;
	}
.mobileOnly {
	display: none;
}
.mobileAndTabletOnly {
	display: none;
}
.desktopOnly {
	display: inline-block;
}
.hiddenContent{
	display: none;
}

/* Tabbed content */
.tabbedContent {}
	.tabbedContent .tabs {
		display: flex;
		border-bottom: 2px solid #d1dbe6;
	}
		.tabbedContent .tabs p {
			display: inline-block;
			justify-content: flex-start;
			padding: 0;
			margin: 0 2px 0 0;
		}
		.tabbedContent .tabs p:last-child {
			margin-right: 0;
		}
		.tabbedContent .tabs p a {
			color: #0F1E64 !important;
			padding: 8px 10px 6px;
			font-family: "FocoCCBold", "FocoBold", "FocoCC", "Foco", Arial, Helvetica, Sans-Serif;
			display: block;
			background: #f1f5f8;
		}
		.tabbedContent .tabs p a:hover {
			background: #d1dbe6;
		}
		.tabbedContent .tabs p.tabSelected {
		}
		.tabbedContent .tabs p.tabSelected a {
			background: #FFD200;
		}
	.tabbedContent .tabContent {
		padding: 10px;
	}
/* Tiles */
.tilesInner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    text-align: left;
	flex-wrap: wrap;
}
.tilesInner div.tileItem {
    max-width: 30%;
    background: #fff;
    border-radius: 5px;
    box-shadow: 2px 2px 5px 0 rgb(50 50 50 / 35%);
    padding:10px 0 75px 0;
    position: relative;
    flex-grow: 1;
	margin-bottom: 30px;
	margin-right:20px;
}
.tileImage {
	width: 100%;
}
.tileImage img {
	width: 100%;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}
.tilesInner h2, .tilesInner h3 {
    font-size: 1.2rem;
    margin: 1em 0 10px;
    padding: 0 5%;
}
#Page .tilesInner h2 a, #Page .tilesInner h3 a { 
	color: #0F1E64;
}
.tilesInner h3 a, #Tertiary .tilesInner h3 a {
    color: #0F1E64;
}
.tilesInner p {
    margin: 10px 0;
    padding: 0 5%;
}
.tilesInner div p:last-child {
}
.tilesInner div p:last-child a {
    padding-top: 10px;
    position: absolute;
    bottom: 15px;
    border-top: 1px solid #ececec;
    display: inline-block;
    width: 90%;
    text-align: right;
}
@media screen and (max-width: 640px) {
	.tilesInner {
		display: block;
		text-align: center;
	}
	.tilesInner div.tileItem {
		text-align: left;
		max-width: 400px;
		width: 100%;
		margin: 0 auto 30px;
	}
	.tilesInner h2, .tilesInner h3 {
		margin: 0 0 10px;
		padding: 1em 5% 0;
	}
}

@media screen and (max-width: 480px) {
	.mobileOnly {
		display: inline-block;
	}
	.desktopOnly {
		display: none;
	}
}
@media screen and (max-width: 1004px) {
	.mobileAndTabletOnly {
		display: inline-block;
	}
}

/*Link styles*/   
#PageBody a, #PrimaryInner a, #Tertiary a {
	color: #007AB3;
	text-decoration: none;
}
   
a.linkCallToAction,#PageBody a.linkCallToAction, button.linkCallToAction {
	background: #ffd200;
	padding: 10px 30px;
	color: #0F1E64;
	font-weight: bold;
	text-decoration: none;
	display:inline-block;
	font-family: "FocoCCBold","FocoCC","FocoBold","Foco",Arial,Helvetica,Sans-Serif;
	border-radius: 50px;
}
	.highlightContent a.linkCallToAction,#PageBody .highlightContent a.linkCallToAction{
		font-size: 130%;
	}
	a.linkCallToAction:hover,#PageBody a.linkCallToAction:hover {
		background: #FFF000;
		text-decoration: underline;
	}
	a.linkCallToAction[readonly],#PageBody a.linkCallToAction[readonly]{
		background: #757575;
	}
	.highlightContent a.linkCallToAction  img, #PageBody .highlightContent a.linkCallToAction  img {
		width: 50px;
		margin: 0 10px;
		vertical-align: middle;
	}
#PageBody a.linkCallToActionInverse, #PrimaryInner a.linkCallToActionInverse, a.linkCallToActionInverse:link, a.linkCallToActionInverse:visited {
    background: #fff;
	padding: 10px 30px;
	color: #0F1E64;
	font-weight: bold;
	border-radius: 6px;
	text-decoration: none;
	display:inline-block;
	text-align:center;
	font-family: "FocoCCBold","FocoCC","FocoBold","Foco",Arial,Helvetica,Sans-Serif;
}
	a.linkCallToActionInverse:hover{
		background: #eee;
		text-decoration: underline;
		color: #0F1E64;
	}
	a.linkCallToActionInverse[readonly] {
		background: #757575;
	}

.link-button {
	margin: 8px 0 15px;
	display: inline-block;
}
	#PageBody .link-button a, .link-button a :link, .link-button a:visited {
		background: #0F1E64;
		padding: 10px 15px;
		color: #fff;
		font-weight: bold;
		border-radius: 6px;
		text-decoration: none;
		display:inline-block;
		margin-bottom: 8px;
	}
	
.read-more, a.read-more, #PageBody  a.read-more,#PageBody  a.read-more :link,#PageBody  a.read-more:visited, #SecondaryContent  a.read-more,#SecondaryContent  a.read-more :link,#SecondaryContent  a.read-more:visited {
	width:auto;
	background: #0f1e64;
	padding: 10px 30px;
	color: #ffffff;
	border-radius: 50px;
	text-decoration: none;
	display:inline-block;
	text-align:center;
	font-family: "FocoCCBold","FocoCC","FocoBold","Foco",Arial,Helvetica,Sans-Serif;
}
	.read-more:hover, a.read-more:hover, #PageBody  a.read-more:hover, #SecondaryContent  a.read-more:hover{
		background: #3f4b83;
		text-decoration: underline;
	}
	
#PageBody a.readMoreLink, #SecondaryContent a.readMoreLink, #Tertiary a.readMoreLink {
	margin: 15px 0 5px;
	color: #0F1E64;
	font-weight: bold;
	border-radius: 4px;
	text-decoration: none;
	display: block;
}
	#PageBody  a.readMoreLink,#PageBody  a.readMoreLink :link,#PageBody  a.readMoreLink:visited, #SecondaryContent  a.readMoreLink,#SecondaryContent  a.readMoreLink :link,#SecondaryContent  a.readMoreLink:visited , #Tertiary  a.readMoreLink, #Tertiary  a.readMoreLink :link, #Tertiary  a.readMoreLink:visited{
		text-decoration: none;
	}
	#PageBody  a.readMoreLink:hover, #SecondaryContent a.readMoreLink:hover, #Tertiary a.readMoreLink:hover{
	}
	#PageBody .latestArticles a.readMoreLink{
		background:none;
		padding:0;
	}

/*In Page - Link list*/
ul.pageLinkList{width:100%;padding:0;margin:0;list-style:none;text-align:left;}
	ul.pageLinkList li{width:100%;padding:0;margin:0;}
		ul.pageLinkList li a{margin: 0;padding:12px 5px;color:#0F1E64;text-decoration:none;display:block;background:#f1f5f8 url(/App_Sites/ccv/Templates/Default/images/template/menu-arrow.png) center right no-repeat;line-height:100%;border-bottom:1px solid #e5e2e0;}
		ul.pageLinkList li a:hover{background-color:#d8d8d8;}
	.highlightContent ul.pageLinkList{font-weight:bold;}
		.highlightContent ul.pageLinkList a, #Tertiary .highlightContent ul.pageLinkList a{text-decoration:none;}
.whiteBox {
	background: #fff;
	padding: 20px;
	display: inline-block;
	margin: 30px;
	border-radius: 4px;
	color: #333;
	width: 30%;
	/*margin-left: 50%;*/
	float: right;
	margin-right: 50px;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.2);
}
	#PageBody .whiteBox h2 a {
		color: #0F1E64;
		text-decoration: none;
		font-size: 130%;
	}
@media screen and (max-width: 600px) {
	.whiteBox {
		width: auto;
		margin-left: auto;
		margin-right: auto;
		opacity:0.95;
	}
}

/*Background/Text Colors*/
.greyBackground{
	background:#f1f5f8;
}
.whiteText{
	color:#fff;
}	

/*Content style*/
.highlightContent {
  box-sizing:border-box;
  width:100%;
	background: #f1f5f8;
	color: #0F1E64;
	padding: 30px 50px 30px;
	border-radius: 50px;
	display: inline-block;
	margin: 30px 0 45px;
}
.highlightContentBlue, .highlightContentDarkBlue {
  box-sizing:border-box;
  width:100%;
  background: #0F1E64;
  color: #fff;
  padding: 25px 30px 30px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  display: inline-block;
	margin: 30px 0 45px;
}
	.highlightContent h2, .highlightContent h3 {
		margin-top: 0;
	}
	#PageBody .highlightContent a, #PrimaryInner .highlightContent a, #Tertiary .highlightContent a {
		color: #0F1E64;
		text-decoration: underline;
	}
	#PageBody .highlightContent a.read-more, #PrimaryInner .highlightContent a.read-more, #Tertiary .highlightContent a.read-more {
		color: #fff;
		text-decoration: none;
	}
	#PageBody .highlightContent h3 a, #PrimaryInner .highlightContent h3 a, #Tertiary .highlightContent h3 a {
		text-decoration: none;
	}
	#PageBody .highlightContent a.linkCallToAction, #PrimaryInner .highlightContent  a.linkCallToAction, #Tertiary .highlightContent  a.linkCallToAction {
		text-decoration: none;
	}
	#PageBody .highlightContent .pageMenuList a, #PrimaryInner .highlightContent .pageMenuList a, #Tertiary .highlightContent .pageMenuList a  {
		text-decoration: none;
	}
	.highlightContentBlue a, .highlightContentBlue h2, .highlightContentBlue h3, .highlightContentDarkBlue a, .highlightContentDarkBlue h2, .highlightContentDarkBlue h3 {
		color: #fff;
		margin-top: 0;
	}
	#PageBody .highlightContentBlue a, #PrimaryInner .highlightContentBlue a, #Tertiary .highlightContentBlue a, #PageBody .highlightContentDarkBlue a, #PrimaryInner .highlightContentDarkBlue a, #Tertiary .highlightContentDarkBlue a {
		text-decoration: underline;
		color: #fff;
	}
	#PageBody .highlightContentBlue a.linkCallToAction, #PrimaryInner .highlightContentBlue a.linkCallToAction, #Tertiary .highlightContentBlue a.linkCallToAction, #PageBody .highlightContentDarkBlue a.linkCallToAction, #PrimaryInner .highlightContentDarkBlue a.linkCallToAction, #Tertiary .highlightContentDarkBlue a.linkCallToAction {
		color: #0F1E64;
		text-decoration: none;
	}
.highlightContent .big, .highlightContentBlue .big, .highlightContentDarkBlue .big {
	font-size: 1.2rem;
}
	.highlightContent .huge, .highlightContentBlue .huge, .highlightContentDarkBlue .huge {
		font-size: 2rem;
	}

.highlightContent.highlightImageNavigation {
	border-radius:8px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.highlightContent.highlightImageNavigation * {
	box-sizing: border-box;
}

.highlightContent.highlightImageNavigation .col1,
.highlightContent.highlightImageNavigation .col2 {
	margin: 0;
}

.highlightContent.highlightImageNavigation .col1 {
	position: relative;
	aspect-ratio: 410 / 317;
}

.highlightContent.highlightImageNavigation .col2 {
	padding-left: 20px;
	padding-right: 20px;
}

.highlightContent.highlightImageNavigation img {
	vertical-align: top;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
    object-position: 50% 50%;
	height: 100%;
    width: 100%;
}

.navigationList ul {
	list-style: none;
	padding: 0;	
}

.navigationList li {
	padding: 5px 0;
	border-bottom: 0.3px solid rgba(0, 0, 0, 0.30);
}

#Primary .navigationList a {
	font-family: FocoCCBold, FocoBold, Arial, Helvetica, Sans-Serif;
	font-size: 16px;
	color: #000;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#Primary .navigationList a:after {
	content: url(/images/templates/icons/arrow-down.svg);
	display: block;
	transform: rotate(-90deg) translateY(-10px);
	transition: transform 0.15s ease-out;
	will-change: transform;
}

#Primary .navigationList a:hover,
#Primary .navigationList a:focus {
	text-decoration: underline;
}

#Primary .navigationList a:hover:after,
#Primary .navigationList a:focus:after {
	transform: rotate(-90deg) translateY(0px);
}

#Primary .highlightContent.highlightImageNavigation img, 
#Secondary .highlightContent.highlightImageNavigation img {
	height: 100% !important;
}

@media screen and (min-width: 600px) {
	.highlightContent.highlightImageNavigation {
		flex-direction: row;
	}
	
	.highlightContent.highlightImageNavigation .col1,
	.highlightContent.highlightImageNavigation .col2 {
		width: calc(50% - 13px);
	}
	
	.highlightContent.highlightImageNavigation .col2 {
		padding: 30px 20px 30px 0;
	}
	
} 

.width20percent {
  width: 20%;
}
.width40percent {
  width: 40%;
}
.width50percent {
  width: 50%;
}
.width60percent {
  width: 60%;
}
.width80percent {
  width: 80%;
}
@media screen and (max-width: 740px) {
  .width20percent, .width40percent, .width50percent, .width60percent, .width80percent {
    width: 100%;
  }
}
.lowlightContent {
	background: #f1f5f8;
	color: #0F1E64;
	padding: 16px 22px 12px;
	border-radius: 10px;
	font-size: 90%;
	margin-bottom: 20px;
}
	.lowlightContent h2 {
		margin-top: 0.4em;
	}
	.lowlightContent p {
		margin:0 0 1.2em 0;
	}
/* ####################################
   End CCV Specific Content Classes
   ################################## */
   
.huge {
    font-size: 150%;
    line-height: 125%;
}

    p.huge {
        margin-bottom: 1em;
    }

.big, big {
    font-size: 116.7%;
}

.small, small {
    font-size: 91.7%;
}

.tiny {
    font-size: 83.3%;
}

.hidden {
    display: none;
}

.date {
    color: #909090;
}

.author {
    color: #909090;
}

.arrowHighlight {
    padding-left: 14px;
    background: url('../../images/arrow_grey_right.gif') 2px 2px no-repeat;
}

.dropQuote1{
    margin-left: 10%;
    margin-right: 10%;
    padding: 2% 0;
    color: #99cc00;
    text-align: center;
    font-size: 125%;
    font-style: italic;
    border-top: #99cc00 2px solid;
    border-bottom: #99cc00 2px solid;
}

.helpText {
    display: inline-block;
    min-height: 20px;
    padding: 4px 0 0 20px;
    background: url('../../images/icons/16x16_help.gif') 0px 3px no-repeat;
}

    label .helpText, .fieldTitle .helpText {
        font-size: 91.7%;
        font-weight: normal;
    }

.glossaryTerm {
    border-bottom: 1px dotted;
}

.textWrap {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
}

    .textWrap.hyphens {
        /* Adds a hyphen where the word breaks, if supported (No Blink) */
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

/* ####################################
   Specalised Links
   ################################## */

/*
    16x16 - Standard
*/

.iconPdf {
    display: inline-block;
    min-height: 16px;
    padding: 1px 0 0 20px;
    background: url('../../images/icons/16x16_pdf.gif') top left no-repeat;
}

.iconPrint {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_printer.gif') no-repeat;
}

.iconEmail {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_email.gif') no-repeat;
}

.iconRss {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_rss.gif') no-repeat;
}

.iconShare {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_share.gif') no-repeat;
}

.iconHelp {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_help.gif') no-repeat;
}

.iconDownload {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_page_download.gif') no-repeat;
}

.iconCsv, .iconXls, .iconSpreadsheet {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_xls.gif') no-repeat;
}

.iconLock {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_lock.gif') no-repeat;
}

.iconLink {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_link_2.gif') no-repeat;
}

.iconComment {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_user_comment.gif') no-repeat;
}

.iconImage {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_image.gif') no-repeat;
}

.iconSound {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_sound.png') no-repeat;
}

.iconVideo {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_mpg.gif') no-repeat;
}

.iconFeedback, .iconContact {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_user_comment.gif') no-repeat;
}

.iconLinkedIn {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('/images/cms/icons/socialmedia/linkedin_16.png') no-repeat;
}

.iconTwitter {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('/images/cms/icons/socialmedia/twitter_16.png') no-repeat;
}

.iconFacebook {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('/images/cms/icons/socialmedia/facebook_16.png') no-repeat;
}

/* 
    32x32 
*/

.iconFacebook.icon32 {
    display: inline-block;
    min-height: 32px;
    padding: 0 0 0 36px;
    background: url('../../images/icons/32x32_facebook.png') 0 0 no-repeat;
}

.iconLinkedIn.icon32 {
    display: inline-block;
    min-height: 32px;
    padding: 0 0 0 36px;
    background: url('../../images/icons/32x32_linkedin.png') 0 0 no-repeat;
}

.iconGoogle.icon32 {
    display: inline-block;
    min-height: 32px;
    padding: 0 0 0 36px;
    background: url('../../images/icons/32x32_google.png') 0 0 no-repeat;
}

.iconTwitter.icon32 {
    display: inline-block;
    min-height: 32px;
    padding: 0 0 0 36px;
    background: url('../../images/icons/32x32_twitter.png') 0 0 no-repeat;
}

.iconRss.icon32 {
    display: inline-block;
    min-height: 32px;
    padding: 0 0 0 36px;
    background: url('../../images/icons/32x32_rss.png') 0 0 no-repeat;
}

/*
    Only icons - no text
*/

.iconOnly {
    width: 16px;
    height: 16px;
    padding: 0 !important;
    text-indent: -10000em;
}

.iconOnly.icon32 {
    width: 32px;
    height: 32px;
}

.iconOnly.icon64 {
    width: 64px;
    height: 64px;
}

/*
    Page top link 
*/

.linkPageTop {
    padding: 0 0 0 12px;
    background: url('../../images/arrow_red_up.gif') 0px 2px no-repeat;
}

#PageFunctionsBottom .linkPageTop {
    padding: 0 0 0 12px;
    background: url('../../images/arrow_grey_up.gif') 0px 2px no-repeat;
}

/* ####################################
   Application / Form Buttons
   - All application buttons should have the "applicationButton" class and may have additional classes. 
   - Listed here in addiion to DefaultForms.css because buttons may appear outside forms.
   - By default all application buttons have the same style as .submitForm buttons so the styles are set in DefaultForms, but they can be overridden here if you want finer control over non-form based buttons.
   ################################## */

.applicationButton, a.applicationButton {
}

/* ####################################
   Special Lists
   ################################## */

ul.arrowPoints, ol.arrowPoints {
    margin: 1em 0;
    padding: 0;
    list-style: none;
}

    ul.arrowPoints li, ol.arrowPoints li {
        padding-left: 14px;
        margin-bottom: 0.5em;
        background: url('../../images/arrow_grey_right.gif') 0px 2px no-repeat;
    }

ul.warnings {
    margin: 0.5em 0 1.35em 0;
    padding: 0;
    list-style: none;
}

    ul.warnings li {
        margin: 0 0 0.75em 0;
        padding: 0 0 0 24px;
        background: url('../../images/icons/16x16_warning.gif') no-repeat;
        min-height: 16px;
    }
    * html .warnings li {
        /* IE6 Only */
        height: 16px;
    }

ul.horizontal {
    margin: 0 !important;
    padding: 0 !important;
}

    ul.horizontal li {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        vertical-align: middle !important;
        background: none !important;
    }

        ul.horizontal li:last-child {
            margin-right: 0 !important;
        }
    
    *:first-child+html ul.horizontal li {
        /* IE7 Only */
        display: inline !important;
    }

    ul.horizontal.menu {
    }

        ul.horizontal.menu li {
            padding-right: 1em !important;
            margin-right: 1em !important;
            border-right: #c0c0c0 1px solid;
        }

        ul.horizontal.menu li:last-child {
            padding-right: 0 !important;
            margin-right: 0 !important;
            border-right: 0 !important;
        }

ul.noBullets {
    margin-left: 0 !important;
    padding-left: 0 !important;
    list-style: none;
}

    ul.noBullets li {
        margin-left: 0 !important;
        padding-left: 0 !important;
        background: none !important;
    }
    
ul.noIndent {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* ####################################
   Content in Columns
   ################################## */
	
div.twoCols, div.threeCols, div.fourCols, div.fiveCols, div.sixCols {
	display: inline-block;
	clear: both;
	width: 100%;
	margin:1% 0;
}

    /* 2 Columns */
    
    div.twoCols .col1 {
        position: relative;
        float: left;
        width: 49%;
    }

    div.twoCols .col2 {
        position: relative;
        float: right;
        width: 49%;
    }
	@media screen and (min-width: 600px) {
		div.twoCols.cols_60_40 .col2 {
			width: 36%;
			padding-left: 20px;
			box-sizing: border-box;
		}
		div.twoCols.cols_60_40 .col1 {
			width: 62%;
			padding-right: 30px;
			box-sizing: border-box;
		}
	}
    div.twoCols.customLayout1 {
        display: table-row;
    }
    
        div.twoCols.customLayout1 > .col1 {
            display: table-cell;
            vertical-align: top;
            float: none;
            width: 58.5%;
            padding: 0 1.5% 0 0;
        }

        div.twoCols.customLayout1 > .col2 {
            display: table-cell;
            vertical-align: top;
            float: none;
            width: 38.5%;
            padding: 0 0 0 1.5%;
            border-left: #f0f0f0 1px solid;
        }

    div.twoCols.customLayout2 {
        display: table-row;
    }

        div.twoCols.customLayout2 .col1 {
            display: table-cell;
            vertical-align: top;
            float: none;
            width: 38.5%;
            padding: 0 0 0 1.5%;
            border-right: #f0f0f0 1px solid;
        }

        div.twoCols.customLayout2 .col2 {
            display: table-cell;
            vertical-align: top;
            float: none;
            width: 58.5%;
            padding: 0 0 0 1.5%;
        }

    /* 3 Columns */

    div.threeCols .col1 {
        position: relative;
        float: left;
        width: 32%;
        margin-right: 2%;
    }

    div.threeCols .col2 {
        position: relative;
        float: left;
        width: 32%;
        margin-right: 2%;
    }

    div.threeCols .col3 {
        position: relative;
        float: right;
        width: 32%;
    }
    
    /* 4 Columns */

    div.fourCols .col1 {
        position: relative;
        float: left;
        width: 24%;
        margin-right: 1.3%;
    }

    div.fourCols .col2 {
        position: relative;
        float: left;
        width: 24%;
        margin-right: 1.3%;
    }

    div.fourCols .col3 {
        position: relative;
        float: left;
        width: 24%;
        margin-right: 1.3%;
    }

    div.fourCols .col4 {
        position: relative;
        float: left;
        width: 24%;
    }
    
    /* 5 Columns */

    div.fiveCols .col1 {
        position: relative;
        float: left;
        width: 19%;
        margin-right: 1.25%;
    }

    div.fiveCols .col2 {
        position: relative;
        float: left;
        width: 19%;
        margin-right: 1.25%;
    }

    div.fiveCols .col3 {
        position: relative;
        float: left;
        width: 19%;
        margin-right: 1.25%;
    }

    div.fiveCols .col4 {
        position: relative;
        float: left;
        width: 19%;
        margin-right: 1.25%;
    }

    div.fiveCols .col5 {
        position: relative;
        float: right;
        width: 20%;
    }
    
    /* 6 Columns */

    div.sixCols .col1 {
        position: relative;
        float: left;
        width: 16%;
        margin-right: 0.8%;
    }

    div.sixCols .col2 {
        position: relative;
        float: left;
        width: 16%;
        margin-right: 0.8%;
    }

    div.sixCols .col3 {
        position: relative;
        float: left;
        width: 16%;
        margin-right: 0.8%;
    }

    div.sixCols .col4 {
        position: relative;
        float: left;
        width: 16%;
        margin-right: 0.8%;
    }
    
    div.sixCols .col5 {
        position: relative;
        float: left;
        width: 16%;
        margin-right: 0.8%;
    }

    div.sixCols .col6 {
        position: relative;
        float: left;
        width: 16%;
    }
    
/* ####################################
   Message Boxes
   ################################## */

.messageError {
    position: relative;
    clear: left;
	box-sizing:border-box;
	width:100%;
    margin: 15px 0; 
    padding: 15px;
    background: #feefef;
    border: 1px solid #EC5F35;
    border-radius: 6px;
}

    .messageError h1, .messageError h2, .messageError h3, .messageError h4 {
        /*font-family: arial, helvetica, sans-serif;*/
        font-size: 125%;
        font-weight: bold;
        margin: 0;
        padding-bottom: 0; 
        color: #EC5F35;
        border: none;
        background: none;
    }

    .messageError p {
        margin: 0 0 0.5em;
    }

    .messageError .code {
        margin-top: 2px; 
        padding-top: 0; 
        font-size: 91.7%; 
        font-weight: bold; 
        color: #EC5F35;
    }
    
    fieldset .messageError {
        margin-left: 4px;
        margin-right: 4px;
        padding: 4px;
    }

.messageConfirm {
    position: relative;
    clear: left;
    margin: 15px 0; 
    padding: 15px;
    background: #f9faf5; 
    border: 1px solid #939f38;
    border-radius: 6px;
}

    .messageConfirm h1, .messageConfirm h2, .messageConfirm h3, .messageConfirm h4 {
        /*font-family: arial, helvetica, sans-serif;*/
        font-size: 125%;
        font-weight: bold;
        margin: 0;
        padding-bottom: 0; 
        color: #939f38;
        border: none;
        background: none;
    }

    .messageConfirm p {
        margin: 0 0 0.5em;
    }

    .messageConfirm .code {
        margin-top: 2px; 
        padding-top: 0; 
        font-size: 91.7%; 
        font-weight: bold; 
        color: #939f38;
    }
    
    fieldset .messageConfirm {
        margin-left: 4px;
        margin-right: 4px;
        padding: 4px;
    }

.messageInformation {
    position: relative;
    clear: left;
    margin: 15px 0; 
    padding: 15px;
    background: #fbfaf2;
    border: 1px solid #aba000;
    border-radius: 6px;
}

    .messageInformation h1, .messageInformation h2, .messageInformation h3, .messageInformation h4 {
        /*font-family: arial, helvetica, sans-serif;*/
        font-size: 125%;
        font-weight: bold;
        margin: 0;
        padding-bottom: 0; 
        color: #aba000;
        border: none;
        background: none;
    }

    .messageInformation p {
        margin: 0 0 0.5em;
    }

    .messageInformation .code {
        margin-top: 2px; 
        padding-top: 0; 
        font-size: 91.7%; 
        font-weight: bold; 
        color: #aba000;
    }
    
    fieldset .messageInformation {
        margin-left: 4px;
        margin-right: 4px;
        padding: 4px;
    }

/* ####################################
   For Developers
   ################################## */

.developer {
    position: relative;
    clear: left;
    margin: 15px; 
    padding: 15px;
    border: 1px solid #939f38;
}

    .developer h1, .developer h2, .developer h3, .developer h4 {
        font-family: arial, helvetica, sans-serif;
        font-size: 125%;
        font-weight: bold;
        margin: 0;
        padding-bottom: 0; 
        color: #939f38;
        border: none;
        background: none;
    }

    .developer .code {
        margin-top: 2px; 
        padding-top: 0; 
        font-size: 91.7%; 
        font-weight: bold; 
        color: #939f38;
    }

/* Just to work around CMS bugs. Remove these as soon as the bugs are gone. */

.personalizeParams {
    /* 20160328 cm3 7.4.2 */
    display: none;
}
#FormPage h2.formLabel {
    /* 20160328 cm3 7.4.2 */
    display: none;
}

/* Responsive DIV tags */
.fullWidth{ 
	width:100%;
	margin:0;
	padding:0;
	display:inline-block;
}
	.fullWidthInner{
		width: 1024px;
		margin: 0 auto;
		box-sizing: border-box;
	}
	.fullWidthInner p, .fullWidthInner ul{
		max-width: 685px;
		margin: 0 auto;
	}
	.col20Width{
		box-sizing:border-box;
		width:20%;
		margin:0;
		padding:0;
		display:inline-block;
		float:left;
	}
	.col25Width{ 
		box-sizing:border-box;
		width:25%;
		margin:0;
		padding:0;
		display:inline-block;
		float:left;
	}
	.col30Width{ 
		box-sizing:border-box;
		width:30%;
		margin:0;
		padding:0;
		display:inline-block;
		float:left;
	}
	.col33Width{ 
		box-sizing:border-box;
		width:33.3%;
		margin:0;
		padding:0;
		display:inline-block;
		float:left;
	}
		.col33Width.colMargin{
			width:31.3%;
		}
	.col50Width{ 
		box-sizing:border-box;
		width:50%;
		margin:0;
		padding:0;
		display:inline-block;
		float:left;
	}
		.col50Width.colMargin{
			width:48%;
		}
	.col70Width{ 
		box-sizing:border-box;
		width:70%;
		margin:0;
		padding:0;
		display:inline-block;
		float:left;
	}
	.col75Width{ 
		box-sizing:border-box;
		width:75%;
		margin:0;
		padding:0;
		display:inline-block;
		float:left;
	}
	.col80Width{ 
		box-sizing:border-box;
		width:70%;
		margin:0;
		padding:0;
		display:inline-block;
		float:left;
	}
	.colMarginRight{
		margin:0 1% 0 0;
	}
	.colMarginLeft{
		margin:0 0 0 1%;
	}
	.colMargin{
		margin:0 1%;
	}

/*Responsive*/	
@media screen and (max-width: 1060px) {
.fullWidth{ 
}
	.fullWidthInner{
		box-sizing:border-box;
		width:100%;
		padding:0 3%;
		display:inline-block;
	}
}

/*Research Project - Researchers Bio Data*/
.research-widget{
	box-sizing:border-box;
	width:100%;
	padding:20px 0 0 0;
	border-top:1px solid #eee;
	display:inline-block;
}
	#PageContent .research-widget  a.read-more,#PageContent .research-widget a.read-more :link,#PageContent .research-widget a.read-more:visited {
		width:auto;
		min-width:190px;
		background: #ffd200;
		padding: 15px 30px;
		color: #0F1E64;
		font-family: "FocoCCBold", "FocoCC", "FocoBold", "Foco", Arial, Helvetica, Sans-Serif;
		border-radius: 50px;
		text-decoration: none;
		display:inline-block;
		text-align:center;
	}
		#PageContent .research-widget  a.read-more:hover{
			background: #0F1E64;
			color: #fff;
		}
	.research-widget #SearchResults{
		font-size:90%;
	}
		.research-widget #SearchResults .searchResult {
			text-align:left;
		}
		.research-widget #SearchResults .searchResult .text .title{
			margin:1em 0 0 0;
		}
		.research-widget #SearchResults .searchResult .text .summary{
			margin:0 0 0.5em 0;
		}
#ResearchProject {}
	.researcherName {
		font-size: 120%;
	}
	.projectBiodata {
		background: #0F1E64;
		color: #fff;
		border-radius: 15px;
	}
		.projectBiodata img {
			border-radius: 15px;
			float: left;
			margin-right: 10px;
			border: 4px solid #0F1E64;
		}
		.projectBiodataContent {
			margin-left: 10px;
			padding:1px 0;
		}
			.projectBiodata h2 {
				color: #fff;
				font-size: 100%;
				padding: 6px 0 0;
				/*font-family: Arial, Helvetica, Sans Serif;*/
				font-weight: bold;
			}
			.projectBiodata p  {
				color: #fff;
			}
	.projectDescription {
		clear: both;
		padding-top: 10px;
	}
	#ResearchProject table {
		border-spacing: 0px;
		border-collapse: collapse;
	}
		#ResearchProject th {
			vertical-align: text-top;
			text-align: left;
			color: #ffd200;
			background: #0F1E64;
			padding: 4px;
			font-weight: bold;
			border-left: 1px solid #fff;
		}
		#ResearchProject th:first-child {
			border-top-left-radius: 8px;
			border-left: 0px;
		}
		#ResearchProject th:last-child {
			border-top-right-radius: 8px;
		}
		#ResearchProject td {
			vertical-align: text-top;
			border: 1px solid #4d90d7;
			text-align: top;
			padding: 4px;
		}
	#ResearchProject .dropQuote {
		background: #4d90d7;
		color: #fff;
		font-size: 185%;
		padding: 15px 20px;
		border-radius: 15px;
		margin: 10px 0 20px;
		font-family: "FocoCC", "Foco", Arial, Helvetica, Sans Serif;
		font-weight:700;
		text-align: center;
		line-height: 130%;
	}
/*End of Research Project - Researchers Bio Data*/	
/*Box listing*/		
#PrimaryContent #PageBody .box-listing, .box-listing li{box-sizing:border-box;width:100%;margin:20px 0;padding:0;list-style:none;display: flex;flex-direction: row;flex-wrap: wrap;}
	#PrimaryContent #PageBody .box-listing li{flex: 31.33%;position:relative;width:31.3%;min-height: 250px;padding: 30px 30px 60px;margin: 0 1% 2% 1%;float:left;display:inline-block;box-shadow: 0 0 5px 1px rgb(0 0 0 / 10%);border-radius: 5px;border: 1px solid #eee;border-bottom: 3px solid #ffd200;}
		#PrimaryContent #PageBody .box-listing li:hover {-webkit-box-shadow: 0 0 5px 2px rgb(0 0 0 / 20%);box-shadow: 0 0 5px 2px rgb(0 0 0 / 20%);}
		#PrimaryContent #PageBody .box-listing li:nth-child(4n+4){clear:both;}
	#PrimaryContent #PageBody .box-listing li h2, #PrimaryContent #PageBody .box-listing li h3 {min-height: 60px;margin:0 0 20px 0;padding:0;font-size:130%;color: #0f1e64;}
	#PrimaryContent #PageBody .box-listing li h2 a, #PrimaryContent #PageBody .box-listing li h3 a{color: #0f1e64;}
	#PrimaryContent #PageBody .box-listing li p{padding:0;margin:0 0 10px 0;font-size:98%;line-height: 120%;}
	#PrimaryContent #PageBody .box-listing li p:last-child{padding:0;margin:0;}
	#PrimaryContent #PageBody .box-listing li a.linkCallToAction{position:absolute;left:0;bottom:5px;box-sizing:border-box;width:100%;padding: 10px 30px;background: #fff url(/App_Sites/ccv/Templates/Default/images/template/arrow_blue_right.gif) no-repeat;color: #0F1E64;background-position-x: 90%;background-position-y: center;    font-family: "FocoCCLight", "FocoCC", "FocoLight", "Foco", Arial, Helvetica, Sans-Serif;font-weight:bold;}
@media screen and (max-width:770px){
	#PrimaryContent #PageBody .box-listing li{width:48%;}
	#PrimaryContent #PageBody .box-listing li:nth-child(odd){clear:both;}
	#PrimaryContent #PageBody .box-listing li:nth-child(4n+4){clear:none;}
}
@media screen and (max-width:550px){
	#PrimaryContent #PageBody .box-listing li{width:98%;}
	#PrimaryContent #PageBody .box-listing li:nth-child(odd),#PrimaryContent #PageBody .box-listing li:nth-child(4n+4){clear:none;}
}
/*End of Box listing*/