/*
 * Theme Name:   Ribosome EMBL
 * Theme URI:    http://bio-it.embl.de
 * Description:  A child theme for the EMBL Bio-IT Portal, based on Ribosome
 * Author:       Toby Hodges
 * Author URI:   http://bio-it.embl.de/toby-hodges
 * Template:     ribosome
 * Version:      1.0.0
 * Tags:         light, blue, green, orange, pink, white, gray, black, one-column, two-columns, right-sidebar, left-sidebar, fluid-layout, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
 * Text Domain:  ribosome-embl
 */

/*
 *  * Customise layout & alternate row backgroung colour of 'Useful Links' table on front page
 *   */
.useful_links th {
    background-color: #529a43;
}
.entry-content .useful_links th,
.comment-content th {
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        font-weight: bold;
        text-transform: uppercase;
        color: #ffffff;
}
.useful_links td {
    font-size: 0.9em;
}
.useful_links th:nth-child(1) {
  width: 750px;
}
.useful_links th:nth-child(2) {
  width: 2250px;
}
.useful_links td:nth-child(1) {
  width: 750px;
}
.useful_links td:nth-child(2) {
  width: 2250px;
}
.useful_links tr:nth-child(odd) {
    background-color: #f6f6f6;
}
/*
 *  * Shift thumbnail images for news items over to the right
 *   */
.newsthumb {
    float: right;
    padding: 6px;
}
/*
 *  * Allow toggling of nested menus (for EMBL Centres menu)
 *   * Note: this works in conjunction with additional JS code in 
 *    */
.menu .dropdown .sub-menu {
    display: none; 
}
.menu .current-menu-parent .sub-menu {
    display: block;
}
.menu .current-menu-ancestor .sub-menu {
    display: block;
}

/*
 *  * Add bolding to text of current page link in sidebar menu (or parent centre link in Centres menu)
 *   */
.menu .current-menu-item > a {
    font-weight: bold;
}
#menu-embl-centres .current-menu-parent > a[href="#"] {
    font-weight: bold;
}
/*
 *  * shift alignment of login fields to the right & fix spacing of fields - this looks much nicer
 *   */
.widget_login_wid .form-group {
    line-height: 2.181818182;
    float: right;
}
.nice-login-widget {
    font-weight: bold;
}
.nice-login-widget > a {
    font-weight: normal;
}
.tiny-event-image {
    float: right;
    vertical-align: middle;
}
.profile_picture {
    float: right;
    padding: 5px;
}
.profile_list_table td:nth-child(1) {
    width: 25%;
}
.profile_list_table td:nth-child(2) {
    width: 50%;
}
.profile_list_table td:nth-child(3) {
    width: 25%;
}
.profile_list_table tr:nth-child(odd) {
    background-color: #f6f6f6;
}
/* Minimum width of 640 pixels. */
@media screen and (min-width: 768px) {
	#primary {float:right;}
	#secondary {float:left;}
	
	.toggle-search {
		display:inherit;
		float: right;
		cursor: pointer;
		background-color: #222222;
		color: #0098D3;
		padding: 7px;
		padding: 0.5rem;
	}
	.social-icon-wrapper {
		display:inherit;
		float: right;
		padding: 7px;
		padding: 0.5rem;
		text-align: right;
		font-size: 21px;
		font-size: 1.5rem;
	}
	.boton-menu-movil {
		display:none;
	}
	
	.caja-destacados {
		display:inline-block;
		width:22%;
		vertical-align:top;
		font-size:85%;
		margin:0 1%;
		margin-bottom:28px;
		margin-bottom:2rem;
	}
	.author-avatar {
		float: left;
		margin-top: 8px;
		margin-top: 0.571428571rem;
	}
	.author-description {
		float: right;
		width: 80%;
	}
	.site {
		margin: 0 auto;
		max-width:1144px;
		max-width:81.71428571428571rem;
		/*max-width: 1096px;
 * 		max-width: 78.28571428571429rem;*/
		overflow: hidden;
	}
	.site-content {
		/* Para Sideba a la derecha
 * 		float: left;
 * 				width: 65.104166667%;
 * 						padding-right: 24px;
 * 								padding-right:1.714285714285714rem;
 * 										border-right: 1px solid #e0e0e0;*/
		/* Para Sidebar a la izquierda */
		float: left;
		/*width: 67.104166667%;*/
		width: 67%;
		border-right: none;
		/*border-left: 1px solid #e0e0e0;*/
		padding-right:0;
		padding-left:24px;
		padding-left:1.714285714285714rem;
		/* ademas para poner sidebar a la izquierda #primary {float:right;} #secondary {float:left;} */
	}
	
	body.template-front-page .site-content,
	body.attachment .site-content,
	body.full-width .site-content {
		width: 100%;
	}
	.widget-area {
		float: right;
		width: 28%;
	}
	.site-header h1,
	.site-header h2 {
		text-align: center;
	}
	.site-header h1 {
		font-size: 35px;
		font-size:2.5rem;
		margin-bottom: 0;
	}
	.main-navigation .menu-item-has-children > a:after {
		font-family: FontAwesome;
		content: "\f0d7";
		position: absolute;
		right: -14px;
		right: -1rem;
		top: 0;
	}
	.main-navigation ul ul .menu-item-has-children > a:after {
		right: 0.5625em;
		top: 0.875em;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}
	.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul {
		border-bottom: 1px solid #E0E0E0;
		border-top: 1px solid #E0E0E0;
		display: inline-block !important;
		text-align: left;
		width: 100%;
		font-weight:bold;
	}
	.sub-menu li {text-align:left;}
	.main-navigation ul {
		margin: 0;
		text-indent: 0;
	}
	.main-navigation li a,
	.main-navigation li {
		display: inline-block;
		text-decoration: none;
	}
	.main-navigation li a {
		border-bottom: 0;
		color:#6A6A6A;
		line-height: 3.692307692;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.main-navigation li a:hover,
	.main-navigation li a:focus {
		color: #F9F9F9;
	}
	.main-navigation li {
		/*margin: 0 40px 0 14px;
 * 		margin: 0 2.857142857rem 0 1rem;*/
		margin: 0 21px;
		margin: 0 1.5rem;
		position: relative;
	}
	.main-navigation li ul li {margin-left:0}
	.main-navigation li ul {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
		height: 1px;
		width: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}
	.main-navigation li ul ul {
		top: 0;
		left: 100%;
	}
	.main-navigation ul li:hover > ul,
	.main-navigation ul li:focus > ul,
	.main-navigation .focus > ul {
		border-left: 0;
		clip: inherit;
		overflow: inherit;
		height: inherit;
		width: inherit;
	}
	.main-navigation li ul li a {
		background: #efefef;
		border-bottom: 1px solid #ededed;
		display: block;
		font-size: 11px;
		font-size: 0.785714286rem;
		line-height: 2.181818182;
		padding: 8px 10px;
		padding: 0.571428571rem 0.714285714rem;
		width: 180px;
		width: 12.85714286rem;
		white-space: normal;
	}
	.main-navigation li ul li a:hover,
	.main-navigation li ul li a:focus {
		background: #e3e3e3;
		color: #444;
	}
	.main-navigation .current-menu-item > a,
	.main-navigation .current-menu-ancestor > a,
	.main-navigation .current_page_item > a,
	.main-navigation .current_page_ancestor > a {
		color: #f9f9f9;
		font-weight: bold;
	}
	.menu-toggle {
		display: none;
	}
	.entry-header .entry-title {
		font-size: 28px;
		font-size: 2rem;
	}
	#respond form input[type="text"] {
		width: 46.333333333%;
	}
	#respond form textarea.blog-textarea {
		width: 79.666666667%;
	}
	.template-front-page .site-content,
	.template-front-page article {
		overflow: hidden;
	}
	.template-front-page.has-post-thumbnail article {
		float: left;
		width: 47.916666667%;
	}
	.entry-page-image {
		float: right;
		margin-bottom: 0;
		width: 47.916666667%;
	}
	.template-front-page .widget-area .widget,
	.template-front-page.two-sidebars .widget-area .front-widgets {
		float: left;
		width: 51.875%;
		margin-bottom: 24px;
		margin-bottom: 1.714285714rem;
	}
	.template-front-page .widget-area .widget:nth-child(odd) {
		clear: right;
	}
	.template-front-page .widget-area .widget:nth-child(even),
	.template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {
		float: right;
		width: 39.0625%;
		margin: 0 0 24px;
		margin: 0 0 1.714285714rem;
	}
	.template-front-page.two-sidebars .widget,
	.template-front-page.two-sidebars .widget:nth-child(even) {
		float: none;
		width: auto;
	}
	.commentlist .children {
		margin-left: 48px;
		margin-left: 3.428571429rem;
	}
	.credits {
		width:31%;
	}
}

@media screen and (min-width: 768px) {
	.post-en-front-page {
		display:inline-block;
		width:30%;
		vertical-align:top;
		font-size:85%;
		margin:0 1%;
		margin-bottom:28px;
		margin-bottom:2rem;
	}
	.post-en-front-page {
		border:none;
	}
	.post-en-front-page h1 {
		font-size:21px;
		font-size:1.5rem;
		font-weight:normal;
		line-height:1.5;
	}
}

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
	body {
		background-color: #fff; #f2f2f2;
	}
	body .site {
		/*margin-bottom: 48px;
 * 		margin-bottom: 3.428571429rem;*/
		box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
	}
	body.custom-background-empty {
		background-color: #fff;
	}
	body.custom-background-empty .site,
	body.custom-background-white .site {
		padding: 0;
		margin-top: 0;
		margin-bottom: 0;
		box-shadow: none;
	}
	.main-navigation li a {
		font-size: 14px;
		font-size: 1rem;
	}
	.widget-title {
		padding: 5px 0;
		padding: 0.3571428571428571rem;
	}
	.site-content {
		border-left: 1px solid #e0e0e0;
	}
	
}

#main p,a,blockquote,ul li {
   font-size: 1em;
}
header.entry-header {
        margin-bottom: 16px;
}
#primary.site-content {
    margin-top: 4px;
}
@media (min-width: 980px){
    .nav-collapse .nav {
        width: 100%;
    }
    .nav-menu .loginoutlink {
        float: right;
        padding-right: 6%;
    }
}
.widget-area .event_detail_list li {
        border-bottom: none;
        padding: 5px;
        padding: 0.3571428571428571rem;
}
.widget-area .event_listing a {
	font-weight: bold;
}
.widget-area .text-widget .mailing_list_link {
	color: #438a34;
}
.widget-area .widget_listcategorypostswidget ul~a {
	font-size: 0.8em;
}
#highlight-banner {
    margin-bottom: 10px;
    padding: 5px;
    border: 2px;
    border-style: solid;
    border-color: #529a43;
    background-color: #f6faef;
    font-size: 0.9em;
}
#highlight-banner p {
    margin: 10px 0px 0px 0px;
}

/*
   Added 2024-04-10 Renato Alves
   The registration button in an event page isn't stylized differently when the button is in a disabled state.
   In js/prevent-embl-event-register.js we set a CSS style directly on the button.
   Instead of that approach which only works for style changes done by that javascript code
   we now set the disabled style globally
*/

.em-booking-submit:disabled {
    background-color: gray !important;
    color: lightgray !important
}