/*
 *
 *		COMMON ElEMENTS (BUTTONS, HEADINGS, ETC.)  
 *
 */
 
/** *******************************************************************
 * *******************************************************************
 *		HEADINGS
 * *******************************************************************
 ** *******************************************************************/
	
	/*
	 * generic, cut from ec_resp.css
	 */

	
	h1 {
		color: #135
	}
	
	h2 {
		color: #369
	}
	
	h3 {
		color: #036
	}
	
	h4 {
		color: #004494; /* #036 */
	}
	
	h5 {
		color: #369
	}
	
	h6 {
		color: #036
	}
	
	#page-title {
		margin-top: 22px
	}
	
	h4 a {
	    text-decoration: none;
	    font-size: 1.111em; 
	    font-weight: bold;
	    line-height: 1.4em;	
	}


	/*
	 * node-exercise second-level title (reports/events)
	 * todo: move from rio-policy-support-facility.css 
	 * added by: Slava
	 */
	
	h2.pane-title, h2 {
	    color: #404040;
	    font-family: Arial;
	    font-size: 30px;
	    font-weight: bold;
	    border-bottom: 2px solid #004494;
	}
	
	/*
	 * node-exercise third-level title (reports/events)
	 * todo: move from rio-policy-support-facility.css
	 * added by: Slava
	 */
	
	h3.ec16, .group_above.row.c_left .field-label {
	    font-family: Arial;
	    font-size: 24px;
	    font-weight: bold;
	    color: #004494;
	}
	
	/* H3 in listings, like news on the home page, news in country pages, ...*/ 
	.view-view-news-items .views-field-title h3 a, 
	.view-view-nodes-on-home-page .views-field-title h3 a, 
	.node-type-riowatch-country-report h3,
	h3 a, h3 {
		font-size: 24px;
		color: #004494;
		font-family: 'Arial';
	}

	.view-display-id-latest_updates .views-field-title h4 a {
		font-size: 24px;
		color: black;
		font-family: 'Arial';
	}

	/* default view */
	.views-field-title h4 a {
		font-size: 16px;
		color: #004494;
    	font-family: 'Arial';
	}


/** *******************************************************************
 * *******************************************************************
 *		GENERIC TEXT STYLES
 *		includes content text, special paragraphs, dates and tags
 * *******************************************************************
 ** *******************************************************************/
	
	 
	/*
	 * event block text from node-exercise
	 * todo: move from rio-policy-support-facility.css line 458
	 * added by: Slava
	 */
	
	.ec16body-2 {
	    font-size: 20px;
	    line-height: 1.3;
	    color: black;
	    margin-top: 0.5em;
	}
	
	/*
	 * title text of "Tip panel"
	 * added by: Slava
	 */
	 
	.highlight-paragraph, #dyn-toc {
	    color: #004494;
	    font-weight: bold;
	    font-size: 22px;
	    font-family: 'Arial';
	}
	@media (max-width: 800px) {
		.highlight-paragraph, #dyn-toc {			font-size: 2.5vw;		}
	}
	@media (max-width: 600px) {
		.highlight-paragraph, #dyn-toc {			font-size: 0.9em;		}
	}
/* ==================================================================
 *
 *	Dynamic table of content that can be added in a page header
 *
 ================================================================== */
	#dyn-toc { 
		
	    z-index: 2;
	    background-color: #eaeaea; /* background-color: white; */
		
		/* on the right: 
	    	left: 50%;
	    	margin: -50px 0 0 585px;
	    */
	  	/* on the left: 
	    	right: 50%;
	    	margin: -50px 585px 0 0px;
	    	*/
	}
	#dyn-toc.sticky {
		/*
		top:50px;
		position: fixed;
		*/
		
		top: 50px;
	    left: 0;
	    position: fixed;
	    max-width: 18%;
	}
	#dyn-toc.not-sticky {
		/* position: absolute;*/
	}
	
	
	#dyn-toc ul { 
	    list-style-type: none;   
	    padding: 30px 30px 30px 30px; /* padding: 50px 10px 10px 10px; */ /* because wide-tip-content-new padding = 50px */
	}
	#dyn-toc li + li {
	    border-top: 1px dashed;
	}
	
	/**
		When width < 1550px we don't display this table of content, not enougth space to display a good side bar
	*/
	@media screen and (max-width :1550px) {
		#dyn-toc {
			/* visibility: hidden; */
		}
	}

/** *******************************************************************
 * *******************************************************************
 *		COMMON ELEMENTS - LINKS
 * *******************************************************************
 ** *******************************************************************/
 
 /*
  * generic - cut from ec_resp.css
  */
	
	a {
		color: #0065a2
	}
	
	a:hover {
		color: #003556
	}
	
	a:focus {
		color: #003556
	}
	
	a:active {
		color: #003556
	}

 
/* Aymeric's comment: is it not too much? it's too much in the header back button */
.more-link { 
	padding-bottom: 1em; 
	/*
	margin-bottom: 3em; 
	*/
}

.more-link a, .back-to-parent a {
    background-color: #ffd617;
    font-weight: bold;
    color: #000;
    /*height: 40px;*/
    padding: 6px 15px 7.5px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    line-height: 1.em;
    font-size: 0.889em;
    border: 4px solid transparent;
	font-family: 'Arial';
}
.more-link a :focus, .back-to-parent a :focus {
    border: 4px solid #404040;
}
.more-link a:before, .back-to-parent a:before {
    font: 1em FontAwesome;
    color: black;
    margin-right: 8px;
    position: relative;
}
.more-link a:before {
	content: "\f0a9";
}
.back-to-parent a:before {
    content: "\f0a8";
}

.badge {
	min-width: 10px;
	padding: 0.5em 1em;
	background: #f2f2f2;
	margin-bottom: 1px;
	display: inline-block;
}

/* On a grey background box (like "Latest R&I News and Events" on home page) the badge background color must be darker */
.grey-wide-panel .badge {
	background: #d2d2d2;
}



/* badge revamping : no more needed:
.badge {background:#CCC;}
a.badge {color:#0065a2;}
.read-more {font-size:50% !important;margin:16px 0;}
  
.badge {
	display: inline-block;
	min-width: 10px;
	padding: 0.5em 1em;
	font-size: 12px;

	color: #fff;
	line-height: 1;
	vertical-align: baseline;
	text-align: left;
	background: #f2f2f2;
	border-radius: 6px;
	margin-bottom: 1px;
}

.badge:empty {
	display: none
}

a.badge:hover,a.badge:focus {
	color: #fff;
	text-decoration: none;
	cursor: pointer
}

.btn .badge {
	position: relative;
	top: -1px
}

a.list-group-item.active>.badge,.nav-pills>.active>a>.badge {
	color: #0065a2;
	background-color: #fff
}

.nav-pills>li>a>.badge {
	margin-left: 3px
}
*/

h3>a:focus {
    outline: 3px solid #ffd617;
    outline-offset: 2px;
    text-decoration: underline;
}

/** *******************************************************************
 * *******************************************************************
 *		COMMON ELEMENTS - PROPERTY/VALUE 
 * *******************************************************************
 ** *******************************************************************/
 
	/**
	 * Note:
	 * <div class="ec16prop-wrapper">
	 *		<span class="field-content"> prop name  </span>
	 *		<div > prop value </div> 
	 * </div>
	 * 
	 */

	.ec16prop, 
	.ec16val, 
	.ec16prop-wrapper { 
		font-family: Arial;
		font-size: 18px;
		color: #004494;
		font-weight: bold;
	}
	.ec16prop.last, 
	.ec16val.last, 
	.ec16prop-wrapper.last {
    	margin-bottom: 2em;
    	padding-bottom: 2em;
	}
	@media (max-width: 800px) {
		.ec16prop, .ec16val, .ec16prop-wrapper {			font-size: 2.5vw;		}
	}
	@media (max-width: 600px) {
		.ec16prop, .ec16val, .ec16prop-wrapper {			font-size: 0.7em; border-top: dashed 1px;		}
	}
	 
	.ec16val, 
	.ec16val a, 
	.ec16prop-wrapper .field-content ,
	.ec16prop-wrapper .field-content a {
		color: #888888;
	}
	
	.ec16val a:hover,
	.ec16prop-wrapper .field-content a:hover	{
		text-decoration: underline;
	}
	
	.ec16prop:after,
	.ec16prop-wrapper .views-label:after {
	    font: 1em FontAwesome;
	    color: #004494;
	    margin-left: 8px;
	    position: relative;
	content: "\f0a9";
	}
	
	div.ec16prop-wrapper>.views-label:first-child {
		width: 25%;
		float: left;
		font-weight: bold;
	}
	
	.field-field_geo_coverage .ec16prop:after,
	.ec16prop-wrapper .views-label-field-geo-coverage:after
		{ content: "\f0ac" }
	.field-field_external_document_type .ec16prop:after,
	.ec16prop-wrapper .views-label-field-external-document-type:after
		{ content: "\f016" }
	.field-field_official_adoption_year .ec16prop:after,
	.ec16prop-wrapper .views-label-field-official-adoption-year:after
		{ content: "\f073" }
	.field-field_official_publication_date .ec16prop:after,
	.ec16prop-wrapper .views-label-field-official-publication-date:after
		{ content: "\f073" }
	.field-field_report_file .ec16prop:after 
		{ content: "\f1c1" }
	.field-field_report_type .ec16prop:after,
	.ec16prop-wrapper .views-label-field-report-type:after
		{ content: "\f016" }
	.field-field_adress_simple .ec16prop:after
	{ content: "\f1ad" }
	
	
	/*
	#-------------------------------------------------------------------------------
	# PROPERTY on node page
	#-------------------------------------------------------------------------------
	*/
	/* it represents the table with properties, because when we displays the label and values on the same line, we are displaying a property*/
	.group_inline.row.c_left.field, 
	.ec16prop-wrapper {
		margin:0;
		background: #f2f2f2;
	    padding-left: 2em;
	    padding-top: 2em;
	}
	
	/* remove the padding-top to all the "property labels" that are preceded by a "property label". Therefor only the first "property label" will keep the padding-top: 2em; */ 
	.group_inline.row.c_left.field ~ .group_inline.row.c_left.field,
	.ec16prop-wrapper ~ .ec16prop-wrapper
	{
    	padding-top: 0em;
}

/** *******************************************************************
 * *******************************************************************
 *		COMMON ELEMENTS - BUTTONS
 * *******************************************************************
 ** *******************************************************************/
	 
	/*
	 * "show more" button
	 * todo: move from rio-policy-support-facility.css line 596
	 * added by: Slava
	 */
	 
	.btn-download {
	    background-color: #ffd617;
	    font-weight: bold;
	    color: #000;
	    min-height: 45px;
	    padding: 8.5px 15px 7.5px;
	    vertical-align: middle;
	    display: block;
	    /* test without this: float: left; Slava: node-exercise page has too wide button in this case, because parent container is a .row */
	    font-size: 0.889em;
	    border: 4px solid transparent;
	    
	    width: auto;
	    display: inline-block;
	}
	.btn-download:hover, .back-to-parent a:hover {
		background-color: rgb(255, 237, 153);
	}
	a.btn-download{
		color: #000;
		display: inline-block;
		margin-bottom: 4px; /* small space between files */
		margin-right: 4px; /* small space between files */
	}
	.field-name-field-event-attachments a.btn-download {
		margin-bottom: 0px;
	}
	/* report files inlined */
	.field-type-file .field-item {
 	   display: inline-block;
	}
	a.btn-download:hover	{
		text-decoration: none;
	}
	
	.btn-download img.file-icon {
 	   padding-bottom: 5px;
	}
	
	/* download button on the european semester page ==> Bad side effect on the Library */
	.views-field-field-report-embedded-dataset, .views-field-field-report-file {
		/* margin:2em; */
	}
	
	.more-link a:focus, .btn-download:focus, .back-to-parent a:focus  {
	    border: 4px solid #404040;
	}

	mg {
		padding-right: 10px;
	}
	
	.view-view-european-semester .views-field-field-report-embedded-dataset .file,	 /* european semester page */
	.view-view-european-semester .field-name-field-cr2015-executive-summary .field-item  /* european semester page */	{
	    display: table-row;
	}
 

	/*
	 * original button styles copied from rio.css
	 *
	 */
	 
	.btn.btn-default.form-submit {margin-top: 0em !important;background-color: #ffd617}
	.btn.btn-default.form-submit:hover {border-color: #404040;background: #ffd617}

	.views-exposed-form .views-exposed-widget {
	    float: none !important;
	    padding: .5em 1em 0 0;
	}

	/*
	 * description
	 * todo: 
	 * added by: Slava
	 */
	 
	
	.btn {
	    /* 
	    if the following btn properties are changed here, it also impacts the search field in the top menu
	    margin-bottom: 1em;
	    border-width: 2px;
	    padding: 0.75em 1em;
	    min-height: 2.75em;	    
	     */
	    line-height: 1;
	    border-radius: 0;
	    font-weight: 600;
	    font-size: 0.889em;
	    text-decoration: none;
	}
	
	.btn-collapse {
	    color: #333;
	    background-color: #fff;
	    border-color: #ccc;
	}
	
	.btn-collapse:hover {
	    color: #333;
	    background-color: #e6e6e6;
	    border-color: #adadad;
	}
	.btn.btn-collapse:hover {
	    background: #004494;
	    color: #fff;
	}
	
	.btn-collapse:hover span.toggling-text {
	    text-decoration: underline;
	}
	
	.btn.btn-collapse {
	    border-color: #004494;
	    color: #004494;
	    background: none;
	}
	
	/*
	 *	original button class from ec_resp.css
	 *
	 */
	 
	.btn {
		display: inline-block;
		margin-bottom: 0;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		background-image: none;
		border: 2px solid transparent;
		white-space: nowrap;
		padding: 5px 12px; /* 5px is important for the search bouton (magnifying glass) */
		
		/*font-weight: normal;
		font-size: 14px;*/
		line-height: 1.428571429;
		
		font-weight: 600;
		font-size: 0.889em;
		
		/* border-radius: 4px; */
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none
	}
	
	.btn:focus {
		outline: thin dotted #333;
		outline: 5px auto -webkit-focus-ring-color;
		outline-offset: -2px
	}
	
	.btn:hover,.btn:focus {
		color: #333;
		text-decoration: none
	}
	
	.btn:active,.btn.active {
		outline: 0;
		background-image: none;
		-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
		box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)
	}
	
	.btn.disabled,.btn[disabled],fieldset[disabled] .btn {
		cursor: not-allowed;
		pointer-events: none;
		opacity: .65;
		filter: alpha(opacity = 65);
		-webkit-box-shadow: none;
		box-shadow: none
	}
	
	.btn-default {
		color: #333;
		background-color: #d9edf7;
	/*	border-color: #85c5e5 */
	}
	
	.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active,.open .dropdown-toggle.btn-default
		{
		color: #333;
		background-color: #b7ddf0;
		border-color: black; /* #52addb */
	}
	
	.btn-default:active,.btn-default.active,.open .dropdown-toggle.btn-default
		{
		background-image: none
	}
	
	.btn-default.disabled,.btn-default[disabled],fieldset[disabled] .btn-default,.btn-default.disabled:hover,.btn-default[disabled]:hover,fieldset[disabled] .btn-default:hover,.btn-default.disabled:focus,.btn-default[disabled]:focus,fieldset[disabled] .btn-default:focus,.btn-default.disabled:active,.btn-default[disabled]:active,fieldset[disabled] .btn-default:active,.btn-default.disabled.active,.btn-default[disabled].active,fieldset[disabled] .btn-default.active
		{
		background-color: #d9edf7;
		border-color: #85c5e5
	}	 
	
/*
#-------------------------------------------------------------------------------
DEFAULT PAGER
#-------------------------------------------------------------------------------
*/
	.item-list .pager { /* background:#f5f5f5;border:1px solid #dddddd;border-radius:4px; */ clear:both;margin:0;padding:0.4em 0;text-align:left;}
	.pager li > a, .pager li > span {
		/* padding:0.4em 0.8em;border-radius: 4px; */
		
	    display: inline-block;
	    font-weight: bold;
	    margin: 0.938em auto;
	    max-width: none !important;
	    color: white;
	    background: #004494;
	    height: 3em;
	    line-height: 3em;
	    padding-left: 0;		
	} 
	.item-list .pager li {padding:0; margin: 0 0 0.25em 0.25em;}
	.item-list .pager li.pager-current {

    	display: inline-block;
    	padding: 11px 14px;
	    margin: 0.938em auto;	
	
		/* padding:0.4em 0.8em; */
		height: 3em;
		border: 1px solid #dddddd;
		
	    color: #004494;
	    background: #f2f2f2;
	    border-color: rgb(169, 169, 169);
	}

	
	.pager {
		padding-left: 0;
		margin: 20px 0;
		list-style: none;
		text-align: center
	}
	
	.pager:before,.pager:after {
		content: " ";
		display: table
	}
	
	.pager:after {
		clear: both
	}
	
	.pager:before,.pager:after {
		content: " ";
		display: table
	}
	
	.pager:after {
		clear: both
	}
	
	.pager li {
		display: inline
	}
	
	.pager li>a,.pager li>span {
		display: inline-block;
		padding: 1px 14px;
		/* background-color: #fff; 
		border: 1px solid #ddd;*/
	}
	
	.pager li>a:hover,.pager li>a:focus {
	/*	text-decoration: none;
		background-color: #e9f2fa */
	}
	
	.pager .next>a,.pager .next>span {
		float: right
	}
	
	.pager .previous>a,.pager .previous>span {
		float: left
	}
	
	.pager .disabled>a,.pager .disabled>a:hover,.pager .disabled>a:focus,.pager .disabled>span
		{
		color: #999;
		background-color: #fff;
		cursor: not-allowed
	}

	
/** *******************************************************************
 * *******************************************************************
 *		GENERIC NAVIGATION BOXES 
 * 		like in in http://s-jrcbruhttp01d.net1.cec.eu.int/rio/en/policy-support-facility
 * 		but now also in country analysis part: http://riodev.jrc.cec.eu.int/en/country-analysis/France
 
 		TO BE RENAMED: policy-support-facility can now disappear		
 * *******************************************************************
 ** *******************************************************************/

	/*
	 * the icon 
	 * added by: Aymeric
	 */
	.policy-support-facility-boxes-with-icons:before {
	    line-height: 18px !important;
	    float: left;
	    width: 100%; /* so text is displayed under the icon, not on the right*/
	    font-size: 94px !important;  /* icon size */
	    line-height: 62px !important;
	    padding: 0px 15px 19px !important; /* So there is a space between the icon and the text below */
	    text-align: center; /* icon is centered */
	    font: 14px/18px FontAwesome; /* icon comes from this font */
	    /*color: #B70911;*/ /* string green */
	}
	
	/*
	 * color of the arrow in the box title  
	 * added by: Aymeric
	 */
	.policy-support-facility-boxes-with-icons i, .thematic-page-item i {
		color: #004494;
	}
	
	/*
	 * The bow title  
	 * added by: Aymeric
	 */
	.policy-support-facility-boxes-with-icons h2, .thematic-page-item h2 {
	    border-bottom: 1px dotted;
	    padding: 0px 0px 0.4em;
	    margin: 0px;
	    color: #004494;
		font-size: 1.25em;
	    font-weight: bold;
	}
	
	.policy-support-facility-boxes-with-icons:before {/*content: "\f115"; *//* which icon : a folder*/}
	
	/*
	 * The box itself  
	 * added by: Aymeric
	 */
	.policy-support-facility-boxes-with-icons {
	    /*background-image:linear-gradient(#6593aa, #0a366b); blue gradient*/
	    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	    min-height: 16em;
	    color: #202020;
	    padding: 25px 15px;
	    margin-bottom: 15px; /* usefull when we have more than 3 boxes because then there is several lines */
	}
	.page-country-analysis .policy-support-facility-boxes-with-icons {
		min-height: 19em;
	}
	
	/* usefull to keep a good layout on smaller screens, otherwise the fourth bow is one line under the others */
	@media (max-width: 1182px) {
		.policy-support-facility-boxes-with-icons {
			min-height: 22em;			
		}
	}
	
	/*
	 * The block :on hover ==> Add shadow + goes 2px up  
	 * added by: Aymeric
	 */
	a .policy-support-facility-boxes-with-icons:hover {
	    -webkit-animation-name: grow-shadow-float, grow-shadow;
	    animation-name: grow-shadow-float, grow-shadow;
	    -webkit-animation-duration: .3s, 1.5s;
	    animation-duration: .3s, 1.5s;
	    -webkit-animation-delay: 0s, .3s;
	    animation-delay: 0s, .3s;
	    -webkit-animation-fill-mode: forwards;
	    animation-fill-mode: forwards;
	    -webkit-transition-property: box-shadow,background-color;
	    transition-property: box-shadow,background-color;
	    -webkit-transition-duration: 0.3s;
	    transition-duration: 0.3s;
	}
	
	/*
	?
	*/
	.policy-support-facility-boxes-with-icons .pane-title {
		color: black;
		border-bottom: 2px solid #004494;
		margin-bottom: 1em;
	}
	
	.policy-support-facility-boxes-with-icons.wide-toggler-frame {
		padding: 0;
	}
	
	/* ==================================================================
  	External site links
 	 ================================================================== */
	.policy-support-facility-boxes-with-icons img {
	    display: block;
	    margin-left: auto;
	    margin-right: auto;
	    width: 40%;
	}
	
	
	/************** Animation and transition on the 4 boxes - BEGINS */
		.grow-shadow {
		    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.50);
		    background-color: white;
		}
		
		@-webkit-keyframes grow-shadow-float {
		  100% {
		    -webkit-transform: translateY(-2px);
		    transform: translateY(-2px);
		    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.50);
		  }
		}
		
		@keyframes grow-shadow-float {
		  100% {
		    -webkit-transform: translateY(-2px);
		    transform: translateY(-2px);
		    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.50);
		  }
		}
	/************** Animation and transition on the 4 boxes - ENDS */

/** *******************************************************************
 * *******************************************************************
 *		ITEMS in LISTING pages
		
 * *******************************************************************
 ** *******************************************************************/
		/* every odd row background color is different */
		.view-view-organisations .views-row-odd,
		.view-view-library .views-row-odd,
		.view-display-id-all_news_by_country .views-row-odd, 
		.view-display-id-panel_pane_3  .views-row-odd,
		.view-display-id-all_news .views-row-odd,
		.view-id-statistics.view-display-id-page_3 .views-row-odd,
		.odd.searchResult {
		    background-color: #f8f8f8;
		}
		/* invisible left border*/
		.view-view-organisations .views-row ,
		.view-view-library .views-row ,
		.view-display-id-all_news_by_country .views-row,
		.view-display-id-panel_pane_3 .views-row,
		.view-display-id-all_news .views-row,
		.view-id-statistics.view-display-id-page_3 .views-row
		{
			padding: 20px 0px 20px 20px;
			border-left: 2px solid rgba(248, 248, 248, 0);
		}
		
		/* the left border color changed on mouse hover */
		.view-view-organisations .views-row:hover, 
		.view-view-library .views-row:hover,
		.view-display-id-all_news_by_country .views-row:hover,
		.view-display-id-panel_pane_3 .views-row:hover,
		.view-display-id-all_news .views-row:hover,
		.view-id-statistics.view-display-id-page_3 .views-row:hover
		{
			border-left: 2px solid #004494;
		}
		
		/* it's liked to the previous style def, but not really generic I know, where should we move it?*/
		.views-field.views-field-field-original-title {
		    font-weight: bold;
		}
		
		/** *******************************************************************
		 * *******************************************************************
		 *		The toggler
				
		 * *******************************************************************
		 ** *******************************************************************/
		/************************ Country Report page - Challenges Accordions (base on the "toggle" class) ***************************/
		/* icon before */
		/** .node-type-riowatch-country-report .field-group-format-toggler:before added for the CR2014 page, where the toggler is created by "Manage Display"/DIV */ 
		.toggler:before, .node-type-riowatch-country-report .field-group-format-toggler:before {
			content:"\f0da";
			font:37px/24px FontAwesome;
			float:left;
			width:10px; 
			padding-right: 1.0em;
		}
		
		.toggler-open:before {
		    content: "\f0d7";
		    font:37px/24px FontAwesome;
			float:left;width:10px; padding-right: 1.0em;
		}
		
		/* accordion header */
		.toggler, .node-type-riowatch-country-report .field-group-format-toggler {
			/*display:block;
			font-size: 1em;
			margin:0 0 0.3em;
			padding: 0.5em 0.5em 0.5em 1em;
			width:100%;
			color: #027AC6;
			padding-left: 2.2em;
			background: #EFF4E4 none repeat scroll 0% 0%;*/
		}

		/* accordion header on mouse over */
		.toggler:hover {
			/*background-image: url(images/ui-icons_3b3b3b_256x240.png); 
			background: #F7FAF2; 
			font-weight: normal; 
			color: #003366; 
			text-decoration: none;*/ 
			cursor: pointer;
		}
		


		/* accordion body */
		.group-challenge-accordion-body {
			padding: 1em 2.2em;
			border: 1px solid #E5E5E5;
			border-radius: 5px;
			font-size: 12px;
		}
		/** .node-type-riowatch-country-report .field-group-format-wrapper added for the CR2014 page, where the toggler is created by "Manage Display"/DIV */
		
		.box-accordion-body /*, .node-type-riowatch-country-report .field-group-format-wrapper*/ 
		{
			padding: 1em 2.2em;
			border: 1px solid #E5E5E5;
			border-radius: 5px;
			/*font-size: 12px;*/
		}
/** *******************************************************************
 * *******************************************************************
 *		SOMETHING ELSE 
 * 		description
		
 * *******************************************************************
 ** *******************************************************************/