/** 
 This css/rio-report.css stylesheet is needed by all the "Report" pages
 Icons codes are availalbe there: http://fortawesome.github.io/Font-Awesome/icons/
*/

/** ****************************************************************************************** 
 The REPORT main page 
 - http://riodev.jrc.cec.eu.int/en/library/belgium-european-semester-country-report-0 ***
** ****************************************************************************************** */
/**
	Content type: Report
	Display: Default
	Purpose: embed the picture and the 'report summary' link in the Body, now aligned to the right
*/
.group-html-embedded-box {
	float: right; 
    margin-right: 1rem;
    margin-bottom: 1rem;
    margin-left: 2em;
	max-width:20%;
}
.group-html-picture-and-body {
	margin-top: 1rem;
    margin-bottom: 1rem;
}

/** after  #1510, no border anymore around the report picture, so this border+shadow has been added here */
.node-report .field-name-field-report-picture {
	border: 1px solid #c0c0c0;
	padding: .35em .625em .75em;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/**
	Content type: Report paragraph
	Display: Default and Teaser
	Puropse: create the left column
*/
.group-html-left-column {
    float: left;
    width: 17%;
}
/**
	Content type: Report paragraph
	Display: Default and Teaser
	Puropse: create the right column
*/
.group-html-right-column {
	float:right;
	width: 80%;
}

/**
	Reduce the size of H2 font size for this page (base on class name)
*/
.node-report-paragraph h2{
	font-size: 30px;
    font-weight: bold;
}

/** **********************************************/
/** Report files when more than 3 files - BEGINS */
#collapsableFileList .field-item {
	float: left;
}
#collapsableFileList a.btn-download {
	width: 98%; /* so every button has the same widh. With a small space (2%) between columns */
	margin-bottom: 4px;
}
.view-view-library a.btn-download {
	margin-bottom: 4px; /* So when several files are attache to a single report, they occupy several lines, then there is a space between lines. */
}
@media screen and (max-width :699px) {
	#collapsableFileList .field-item {width: 100%;} /* So 1 column */
}
@media screen and (min-width :700px) {
	#collapsableFileList .field-item {width: 50%;} /* So 2 columns */
}
@media screen and (min-width :950px) {
	#collapsableFileList .field-item {width: 33%;} /* So 3 columns */
}
@media screen and (min-width :1183px) {
	#collapsableFileList .field-item {width: 25%;} /* So 4 columns */
}
/** Report files when more than 3 files - ENDS */
/** **********************************************/

/** ******************************************************************************************
 The "Country peer reviews" listing page 
 - http://s-jrcbruhttp01d.net1.cec.eu.int/rio/en/policy-support-facility/peer-reviews
** ****************************************************************************************** */
/*Add a margin for each report in the listing*/
.view-view-country-peer-reviews .views-row {margin-left:50px;}

/*Reduce the size of the report titles*/
.view-view-country-peer-reviews h2{
	font-size: 25px;
	background-color: rgba(51, 51, 51, 0.1);
	padding-bottom: 0.5em;
}

/*******************************************/
/*    "Upcoming events" block in side bar */
/*******************************************/
/* indent the dates */

	/*.date-display-single{margin-left:20px;}*/

/*******************************************/
/*    "mini calendar" block in side bar */
/*******************************************/
/* vertical alignment of the month name with the arrows */
	
	/*.date-heading h3 a {padding-top: 50px;*/
}

/** ******************************************************************************************
 The "Mutual learning" listing page 
 - http://s-jrcbruhttp01d.net1.cec.eu.int/rio/en/policy-support-facility/mutual-learning
** ****************************************************************************************** */


/** ******************************************************************************************
 The "Policy studies" listing page 
 - http://s-jrcbruhttp01d.net1.cec.eu.int/rio/en/policy-support-facility/policy-studies
** ****************************************************************************************** */


/** ******************************************************************************************
 All the pages under "Policy support facility", the h3 style  
 - http://s-jrcbruhttp01d.net1.cec.eu.int/rio/en/policy-support-facility/policy-studies
** ****************************************************************************************** */
/*.page-policy-support-facility .view-content h3, .view-view-country-peer-reviews .table-responsive caption {
	margin-top: 10px;
	padding: 10px 20px;
	background-color: #0a366b;
	color: #fff;
	font-size: 20px;
}*/


/** ******************************************************************************************
 The "Policy challenges" page, with the listing of reports (peer reviews) of the current country   
 - http://s-jrcbruhttp01d.net1.cec.eu.int/rio/en/country-analysis/germany/policy-challenges
** ****************************************************************************************** */
/*Add a margin for each report in the listing */
.view-view-policy-challenges .views-row {margin-left:50px;}

/*Reduce the size of the report titles*/
.view-view-policy-challenges h2{
	font-size: 25px;
	background-color: rgba(51, 51, 51, 0.1);
	padding-bottom: 0.5em;
}

/*pane-view-calendar*/
/** ******************************************************************************************
 The "Policy support facility" pages   
 - http://s-jrcbruhttp01d.net1.cec.eu.int/rio/en/policy-support-facility/peer-reviews
** ****************************************************************************************** */
/*201605 The header of each box in the right column has a red baground*/
.page-policy-support-facility.rio-layout-right-column h2, .page-policy-support-facility .pane-view-news-items-news-by-section-pane h2, .page-policy-support-facility .rio-layout-right-column .pane-view-calendar h2 {
	color: #FFF;
	background-image:linear-gradient(#6593aa, #0a366b);
	border-color: transparent;
	font: 300 24px/31px "Open Sans",sans-serif;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 10px;
}

/* 201605 peer review page - table - title column : fix the width in order to have the same with for every table in the page **/
.pane-view-country-peer-reviews td.views-field-title {
	width:25%; 
}
/*201605 peer review page - table - body column : fix the width in order to have the same with for every table in the page **/
.pane-view-country-peer-reviews td.views-field-body {
	width:65%;
	border-left: 1px dotted #DDDDDD; 
}

/*The header of each box displaying events in the right column has an icon. Another css block bellow says which icon */
.rio-layout-right-column h2:before {
    float: left;
    font-size: 24px !important;  /* icon size */
    padding: 5px 5px 5px !important; /* So there is a space between the icon and the text on the right*/
    text-align: left; /* icon is aligned on the left*/
}

/*The header of each box displaying events in the right column has a calendar icon*/
.rio-layout-right-column .pane-view-calendar h2:before {
    font: 14px/18px FontAwesome; /* icon comes from this font */
    content: "\f073"; /* which icon : calendar */
}

/*The header of each box displaying news in the right column has a news icon*/
.rio-layout-right-column .pane-news h2:before {
    font: 14px/18px fontello; /* icon comes from this font */
    content: "\e002"; /* which icon : our news icon */
}

/*201605 Each box in the right column has a grey border*/
.page-policy-support-facility .rio-layout-right-column .panel-pane {padding:2px;border-style:solid;border-color:#dad2d1;border-width:1px;}

/*201605 override calendar widget styles */
.view .date-nav-wrapper .date-next,
.view .date-nav-wrapper .date-prev {
background: transparent;	
}


/*201605  TABLE > /rio/en/policy-support-facility/peer-reviews 
  The countries, which are tablea headers
 */
.pane-view-country-peer-reviews caption {
    	background-image: linear-gradient(#6593aa, #0a366b);
    	color: #FFF;
    	text-align: left;
    	padding: 5px 10px;
    	border-radius: 3px;
}

/*******************************************************************************************************************************************************************************************/
/********************************************* peer-reviews-2 - trying *********************************************************************************************************************/
/*******************************************************************************************************************************************************************************************/
/** force the full width, allowing us to display some blocak on the full width .page-policy-support-facility  */ 
#layout-body {
	width: auto;
	width: initial;
}




.page-policy-support-facility .col-md-12, .page-policy-support-facility .col-lg-12 {
	padding: 0px;
}




.wide-title-frame-new {
	margin-top: 0px;
	min-height: 251px;
	background-color: #f4f4f4 !important;
	background: url('../images/rio-header-2016.jpg') repeat-y center right;
}


/* page title, like "Peer reviews" */
.wide-title-frame h1, .wide-title-frame-new h1 {
	font-size: 3em;
	color: #022b5b; /* black */
	font-family: Arial;
	border:0;
	z-index: 0;
	position: relative;

	font-size: 39.996px;
	font-weight: 600;
	/* height: 82.9688px; {removed by Ay on 27/09}*/
	line-height: 43.9956px;
	margin-bottom: 0px;
}


@media screen and (max-width :1700px) { /* otherwise on smaller screen the text is unreadable due to the background image  */ 
	.wide-title-frame h1, .wide-title-frame-new h1 {	background: linear-gradient(to right, rgba(145, 124, 77, 0), rgba(255, 255, 255, 0.71)); }
}
@media screen and (max-width :1000px) { /* otherwise on smaller screen the text is unreadable due to the background image  */ 
	.wide-title-frame h1, .wide-title-frame-new h1 {	background: linear-gradient(to right, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.71)); }
}
@media screen and (max-width :500px) { /* otherwise on smaller screen the text is unreadable due to the background image  */ 
	.wide-title-frame h1, .wide-title-frame-new h1 {	background: linear-gradient(to right, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.87)) }
}


.wide-tip-frame {
	position: relative;
	/* min-height: 100px;  hack-hack */
}

.wide-tip-content {
	position: absolute;
	padding: 50px;
    top: -28em;
	background: white;	
	width: inherit;
}



.wide-tip-content-home {
	padding: 50px;
	background: white;	
}

/***** page title icon ******/
.wide-title-frame h1:before {
	content: "\f1cb";
	font: 1em FontAwesome;
    color: #00aeef; /*#0a366b;*/
    /*float: left; {removed by Ay on 27/09}*/
    margin-right: 8px;
    position: relative;
    height: 81px; /* the same as hosting H1 */
    float: left; /* so that second line of H1 text doesn't start below this image */
}

.page-country-analysis .wide-title-frame h1:before {
	content: "\f0ac";
}

/****** sub-section **********************/

.view-id-view_policy_support_facility_reports #event_date {
	color: #929292;
	font-size: 0.778em;
}

.view-id-view_policy_support_facility_reports #event_title {
	color: #004494;
    line-height: 1.5em;
    font-size: 1.5em;
	font-weight: bold;
}

.view-id-view_policy_support_facility_reports #event_body, .ec16body {
	color: black;
}

.psf-list-of-reports .row { 
    /* border-top: 1px dotted #DDDDDD; */
	padding: 0em 2em;
}

/******* sub-section description *********/
/* deleted on 11/11/16, was probably used but another approach
.wide-title-frame>div>div>div  {
    font-size: 1.3em;
    color: #404040;
    font-family: Georgia,serif;
    background: white;
    padding: 4em 5em 3em 5em;
}
*/

.wide-toggler-frame .field-type-entityreference .field-label { /* For mockup, Exercice node page */
  	font-size: 1.8em;
	background: #F2F2F2 none repeat scroll 0% 0%;
	margin: 0px 0px 0.3em;
	padding: 0.5em 0.5em 0.5em 2.2em;
}
.wide-toggler-frame .field-type-entityreference .field-items .field-label { /* For mockup, Exercice node page */
	font-size: 1em;
}

.psf-list-of-reports span[class^='col'], .psf-list-of-reports span[class*=' myclass'] {
	padding-top: 0.8em;
}


/** Togglers are the country name (peer reviews, specific support) or the report type (mutual learning) */
.psf-list-of-reports .toggler {
    font-size: 1em;
    color: black;
    font-family: Georgia,serif;
    background: #F2F2F2;
}
/* blue background when mouse hover **/
.psf-list-of-reports .toggler:hover {
    background: #0a366b; /* yellow: #FFF080 */
    color: white;
}    

.psf-list-of-reports .toggler-closed:before {
    content: "\f0da";
    font: 50px FontAwesome;
    float: right;
    width: 10px;
    padding-right: 1.3em;
}


.wide-toggler-frame {
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 7px 0 rgba(0, 0, 0, 0.19);
    margin-top: 15px;
}

.wide-toggler-body {
    	padding-left:15px;
    	padding-right:15px;
    	padding-bottom:15px;
}

.psf-list-of-reports .toggler-open:before {
    content: "\f0d7";
    font: 50px FontAwesome;
    float: right;
    width: 10px;
    padding-right: 1.3em;
}

/*************************** exercise page *************************/


.fs20 {
	font-size: 20px;
}

#exercise-property-date-label:after { content: "\f073" }
#exercise-property-type-label:after { content: "\f0a9" }

#report-property-geo-coverage:after { content: "\f0ac" }
#report-property-document-type:after { content: "\f016" }
#report-property-type:after { content: "\f128" }
#report-property-year:after { content: "\f073" }
#report-property-official-publication-date:after { content: "\f133" }
#report-property-file:after { content: "\f1c1" }

#event-property-year:after { content: "\f073" }
#event-property-organizer:after { content: "\f022" }
#event-property-location:after { content: "\f041" }


#stat-property-theme:after {content: "\f108" }
#stat-property-dataset:after {content: "\f1c0" }
#stat-property-datasource:after {content: "\f140" }
#stat-property-csv:after {content: "\f15c" }

#stat-property-updatedrio:after {content: "\f073" }
#stat-property-updatesrc:after {content: "\f133" }
#stat-property-timecoverage:after {content: "\f017" }


.event {
	background: #f2f2f2;
	margin: 1em;
	padding: 0px;
}
.event.first {
	margin-left: 0;
	margin-right: 2em;
}

.event-inner {
	padding: 2em;
}

.collapse-panel {
	/*min-height: 2em;*/
	background: #ffd617;
	width: 100%;
	margin-bottom: 1em;
	padding: 1em 0;
}

.collapse-panel > div {
    font-size: 18px;
    color: #004494;
}

.psf-file-icon {
	display: block;
    float: left;
    width: 20px;
    height: 20px;
    background: url('../images/attachment-icons-mini.png') no-repeat left top;
	margin-right: 4px;
    margin-top: 2px;
}

.icon-pdf { background-position: left top }
.icon-ppt { background-position: left -20px }

.exercise-properties {
	margin-top: 2em;
    margin-bottom: 0.5em;
}



.pane-view-news-items-panel-pane-2 h2 {
	margin-bottom: 0px;
}

.grey-wide-panel {
	background: #f2f2f2;
}

.related-site {
    margin-top: 20px;
}

.view-what-is-new h4 {
	font-size: 30px;
	font-weight: bold;
	font-family: 'Arial';
	line-height: auto;
}
.view-what-is-new h4 a { color: black }


.news-title-container {
	/*
	border-top: 1px dotted #dddddd;
	border-bottom: 1px dotted #dddddd;
	*/
	display: inline-block;
    width: 100%;
    margin-bottom: 0.8em;	
}

.exercise-properties .date-display-single { font-size: 24px; font-weight: bold }


.block-geo-coverage-pages .more-link { margin-bottom: 1em; }

/* revamping: no more needed
.pane-geo-coverage-pages-back-to-parent-section .more-link a:before {
    content: "\f0a8";
}
*/
.block-geo-coverage-pages .more-link a:before {
    content: "\f0a8";
}

/* removed by Aymeric. Is it a mistake?  03/08
.view-what-is-new .views-field-changed {
	color: #898989;
	font-family: 'Arial';
	font-size: 18px;
	text-transform: uppercase;
    clear: both;	
}*/

/**
 Latest updates boxes 03/08
*/
.view-display-id-latest_updates .col-lg-4 {
    background: white;
}
.view-id-view_nodes_on_home_page .add-marging-to-inside-box {
    border: 2px solid #a0a0a0;
    padding: 2em;    	
}

.view-display-id-latest_updates .view-content {
    margin-top: 4em;
    padding-bottom: 3em;
}

/**************** Revamping : Listing of data catalogue entries = a matrix, 2 col ********************/
.view-id-view_data_catalogue_entries .add-marging-to-inside-box {
	margin: 1em 1em 1em 0;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	padding: 2em;
}
.view-id-view_data_catalogue_entries .views-field-title{
    padding: 1em;
    /*background-color: #f2f2f2;*/
}
.view-id-view_data_catalogue_entries .views-field-field-visualization-country-lvl img {
    width: 100%;
	transition: all 300ms ease-out;
	max-width: 500px;
}

.view-id-view_data_catalogue_entries .views-field-field-comments .field-content{
    /*background-color: #f2f2f2;*/
    padding: 1em;
}
.view-id-view_data_catalogue_entries {
	margin-top: 3em;
}
/******* revamping ends ***/
/*
 *	geotag design for homepage
 */

/* 03/08
.views-field-field-geo-coverage .field-content{
    background: #f2f2f2;
    float: left;
    border-radius: 6px;
	padding: 0 1em;
}
*/


.views-field-field-geo-coverage .field-content a {
	/*font-size: 10px; 04/08. with this row the geo badge and other badges are not consistent, geo is smaller than others in the library for instance, so I removed it */
	/*	color: black; not wanted anymore */
}


/*
 *	psf homepage
 */
 
.panel-2col-stacked .center-wrapper { margin: 2.5em auto !important; }
@media ( min-width :768px) { .panel-2col-stacked .center-wrapper { width: 750px } }
@media ( min-width :992px) { .panel-2col-stacked .center-wrapper { width: 970px } }
@media ( min-width :1200px){ .panel-2col-stacked .center-wrapper { width: 1170px } }
 
 /* responsiveness of the boxes  Events and News : 2 columns if > 768px, 1 otherwise */
 @media ( max-width :768px) { 
 	.page-policy-support-facility .panel-2col-stacked .panel-col-first {    float: left;    width: 100%;}
 	.page-policy-support-facility .panel-2col-stacked .panel-col-last {    float: left;    width: 100%;}
 }
 @media ( min-width :768px) { 
 	.page-policy-support-facility .panel-2col-stacked .panel-col-first {    float: left;    width: 50%;}
 	.page-policy-support-facility .panel-2col-stacked .panel-col-last {    float: left;    width: 50%;}
 }

/*
	Add a scroll bar around the timesheet (list of exercises as a kind of gant chart) - BEGINS
*/
	#timesheet2 { 
		background-color: transparent;
		overflow: auto;
	    z-index: 200;
	}
	
	.timesheet .data {
	    overflow: initial;
	}
	
	.timesheet .scale {
	    width: max-content;
	}
/*
	Add a scroll bar around the timesheet (list of exercises as a kind of gant chart) - ENDS
*/

.view-id-view_policy_support_facility_events { margin-top: 2em;}
.view-id-view_policy_support_facility_events .views-row h3 { margin: 0; font-size: 1em; color: black }
.view-id-view_policy_support_facility_events .views-row h3 a { color: black; font-weight: bold; font-family: 'Arial'; }
.view-id-view_policy_support_facility_events .views-row {
	padding-left: 48px;
	background: url('../images/timeline-branch.png') left top repeat-y;
	position: relative; /* important for the ::before position of this tag */
}
.view-id-view_policy_support_facility_events .views-row::before { 
    content: url(../images/timeline-branch-dot.png);
    position: absolute;
    float: left;
    left: 0px;
}
.view-id-view_policy_support_facility_events .date-display-single { color: #404040 }

.policy-support-facility-boxes-with-icons .date-display-single { color: #929292; font-weight: normal; }

.panels-flexible-region-61-bottom {
		width: 100%;
}


.btn-collapse .icon { margin-left: 0.3em; }
.icon--blue-dark { color: #004494; }
.icon--down { content: '\e81F'; }
.icon:before {
    text-decoration: none;
    display: inline-block;
    font-family: 'FontAwesome';
	font: 1em FontAwesome;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    margin-right: 4px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
 *	psf subsection
 */
 
.wide-toggler-frame h3 { 
	background: #f2f2f2; 
	/* border-bottom: none; */
	margin: 0;
	padding: 0.2em 1.5em;
    font-weight: bold;
    /* font-family: 'Arial'; */
}

.node-exercice .content {
	padding-top: 5em;
}

#exercise-property-type-value a, #exercise-property-type-value span {
    white-space: nowrap;
    margin-right: 7px;
    float: left;
}

.view-display-id-all_news { padding-top: 1em }