/*

/// 5. fonts

//////////////////////////////////////////////////////////////////////
*/

/*
//////////////////////////////////////////////////

primary font

--------------------------------------------------

font-family: 'Roboto', Helvetica, Arial, sans-serif;

//////////////////////////////////////////////////
*/

/*
///  default
*/

:root {
  --cassiopeia-color-primary: #00008c;
  --cassiopeia-color-hover: green;
  --cassiopeia-color-link: blue;
}

body {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-weight: 400;
    font-size: 1em;
}

.site-grid {padding: 0 1.25em;}

/* change the colours of the header and menu from blue background amd white text to opposite */
.container-header {
    color: #00008c;
    background-color: white;
    background-image: none;
}
.navbar-brand {
    display:block;
    margin: 0 auto;
    text-align: center;
}
.container-header .navbar-toggler {
    color: white;
    border: 1px solid #00008c;
}
.container-header .site-description {color: #00008c; font-size: 1em; font-weight: 300;}
.container-header .mod-menu {color: #00008c;}
.container-banner form {float:right;}

/* discrete border top and bottom of the menu */
.container-nav {
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
}

/* increase the size of the menu items */
.metismenu.mod-menu .metismenu-item {font-size:1.2rem}

/* change the color of the hamburger menu toggler to blue with white border */
.container-header .navbar-toggler {color:#00008c; border: 1px solid #fff;}

/* wrap the menu if too long for the viewport */
.container-header .mod-menu {
   flex-wrap: wrap;
}

/* change the colours of the menu from blue background amd white text to opposite */
.footer {background-color: white; background-image: none;}
.footer .grid-child {flex:none;display:block; color:black;}

/* resixe the image and centralise the caption for each large image on the major pages */
#photograph {padding-bottom:0.75em;}
#photograph img {width:100%; clear:both;}
#photograph #caption{margin: 0 auto; text-align: center}

/*
//////////////////////////////////////////////////


/* titles */
h1, h2, h3, h4, h5, h6,
.moduletable h3,
div[class^="moduletable-"] h3,
div[class*=" moduletable-"] h3,
.page-header h2,
h2.item-title,
.componentheading,
#member-profile legend,
div.tag-category ul h3,
div.contact-category h2,
div.newsfeed h2,
div.newsfeed-category h2 {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-weight: 300;
}



/*
//////////////////////////////////////////////////////////////////////

/// 6. titles

//////////////////////////////////////////////////////////////////////
*/

h1,
.moduletable h3,
.page-header h2,
h2.item-title,
.componentheading,
#member-profile legend,
div.tag-category ul h3,
div.contact-category h2,
div.newsfeed h2,
div.newsfeed-category h2 {
  margin-bottom: 27px;
  margin-top: 14px;
  padding-bottom: 0;
  line-height: 1.3em;
  text-align: left;
  font-size: 2em;
  font-weight: 300;
  color: #00008c;
  border: 0 none;
}
h1 a:hover,
.page-header h2 a:hover,
h2.item-title a:hover,
div.categories-list h3 a:hover,
div.newsfeed h2 a:hover,
div.newsfeed-category h2 a:hover {
  color: #9e9e9e;
}
div.newsfeed h1,
div.newsfeed h1 a,
div.newsfeed h2,
div.newsfeed h2 a,
ddiv.newsfeed-category h1,
div.newsfeed-category h1 a,
iv.newsfeed-category h3,
div.newsfeed-category h2,
div.newsfeed-category h2 a,
div.contact-category h2 {
  color: #444;
}



/*
//////////////////////////////////////////////////////////////////////

/// 10. typography

//////////////////////////////////////////////////////////////////////
*/

 
/* add icons to external links, emails and pdfs */

a[href^="https://"], a[href^="http://"], a[href^="http://www"] {
    padding-right:20px;
	background-image:url(../images/icon_external.gif);
	background-repeat:no-repeat;
	background-position: 100% 50%;
}

a[href^="https://www.nicolabell.co.uk"], a[href^="https://nicolabell.co.uk"] { 
    background:none; 
    background-image: none;
} 

a[href^="mailto:"] { 
    background-image: url(../images/icon_mailto.gif);
	background-repeat:no-repeat;
	background-position: 100% 50%;
	padding-right:20px;
}

a[href$=".pdf"] { 
    background-image: url(../images/icon_pdf.gif);
	background-repeat:no-repeat;
	background-position: 100% 50%;
    padding-right:20px;
}

p.footerprintmsg {visibility:hidden; display: none; height:0; width:0; }

.notprint {visibility:visible; height:auto; width:auto; display: block; }

.newsearch {
    float:right;
}

.newsitem-image
{
	width: 220px;
	height: 150px;
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
	border: solid 1px #00008c;
	clear:none;
}

/*
**
**	Clients & Projects
**
*/
/* jquery impacted css for accordian tabs - impacted by highcontrast version so need to set here as the default*/
#tabs {
    background-image: none;
    color: #000;
}
#tabs li,
#tabs p {
    color: #000;
}
#tabs div a { color: #800020; }

/* responsive table design */

/* 
Generic Styling, for Desktops/Laptops 
*/

.resp-table { 
    max-width: 90%; 
    /* border: 1px solid #800020; */
    margin-left:auto; 
    margin-right:auto;
    border-collapse: separate;
    border-spacing: 5px;
}
/* Zebra striping */
.resp-table tr:nth-of-type(odd) { 
    background: #00008c; 
    color: white;
}
.resp-table th { 
    background: #C0C0FF; 
    color: white; 
    font-weight: bold; 
}
.resp-table td, .resp-table th { 
    padding: 6px; 
    border: 1px solid #00008c; 
    text-align: left; 
}
.resp-table td { 
    vertical-align: top;
}
.resp-table tr:nth-of-type(odd) a,
.resp-table tr:nth-of-type(odd) a:visited,
.resp-table tr:nth-of-type(odd) a:hover,
.resp-table tr:nth-of-type(odd) a:active {
    color:white;
    background-color: transparent;
}


/* home page tiles */
/* Style for the tiles container */
.tiles-container {
  display: flex; /* Was grid; */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* grid-gap: 1.6%; /* Adjust as per your layout */
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    grid-row-gap: 20px;
}

/* Style for each tile */

.notifier {
	width:250px;
	height:250px;
	margin:0;
	clear:both;
    z-index: 1000;
}

.tile {
    background-color: #fff;
    width:250px;
	clear:none;
    margin: 0;
    padding: 0px;
	margin-left:30px;
    margin-bottom: 20px;
    z-index: 1001;
    display:inline-block;
    vertical-align:top;
    border: 1px solid #00008c;
    border-radius: 8px;
    height:100%;
    
    flex: 0 1 auto;
    align-self: center;
}

.tile h3.newsflash-title, .tile p, .tile .newsflash p {
    z-index: 1000;
    clear:both;
    min-height: 4.0em;
    max-width:100%;
    text-align:center;
    margin:0;
    padding:0.3em;
    line-height:1.5;
}

.innernotifier {margin:0; padding:0;display:inline-block}

.innernotifier .newsflash img {display:none;height:0;width:0;visibility: hidden;}

.tile h3 {text-align: center; background-color: #00008c; color: #fff; margin:0; font-size: 1.5em; width:100%; }
.tile h3.newsflash-title {font-weight: bold; min-height: 0em; text-decoration: underline; background-color: #fff; color: #000;}

.tile p a, .tile .newsflash a.readmore {text-decoration: underline;}
.tile .newsflash a.readmore {margin-top: 0; padding:0.3em;}

.tile h3.newsflash-title:before {padding:0; content:none;}

.tile p.small {font-style:italic; font-size: 0.75em;}

.tile p, .innernotifier .newsflash p {text-align: left;color: black;}

.hovertile:hover {
    opacity: 0.4;
    background-color: #ddd;
    text-decoration:none;
}

/* tile backgrounds */
.evaluation-tile {
    background-image: url(https://nicolabell.co.uk/images/Tiles/evaluation.jpg);   
}
.learning-tile {
    background-image: url(https://nicolabell.co.uk/images/Tiles/learning.jpg);  
}
.culture-tile {
    background-image: url(https://nicolabell.co.uk/images/Tiles/culture.jpg);  
}
.europe-tile {
    background-image: url(https://nicolabell.co.uk/images/Tiles/europe.jpg); 
}
.news-tile {
    background-image: url(https://nicolabell.co.uk/images/Tiles/news.jpg);   
}
.clients-tile {
    background-image: url(https://nicolabell.co.uk/images/Tiles/clients.jpg);   
}