/*
Theme Name: IT Training
Author: Dan Pace
Description: NUTH IT Training Site
Version: 1.0.1
*/

:root
{
  --main-font: "Arial";
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}


.pt-cv-readmore
{
    color: #FFFFFF !important;
    background-color: #005EB8 !important;
    border: none !important;
}

.pt-cv-title a
{
	color: #005EB8 !important;	
}
/***************************************************************************************
******************** header-nuth ********************
**************************************************************************************/
@media (max-width: 400px)
{
 	.nuthHeader
	{
		display: block;
		text-align: center;
	}
	.nuthHeader-logo
	{

		width: 100%;
		margin: 5px;
	}
	.nuthHeader-search
	{

		width: 100% !important;
		margin: 0 auto;
	}
	.nuthHeader-menu
	{
		margin: 0 auto;
		width: 100%;
	}
}


.nuthHeader
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 10px;
	margin-bottom: 10px;
	background-color: #ffffff;
	font-family: var(--main-font);
}

.nuthHeader-logo
{
	height: 100px;
 	width: 450px;
	margin: 5px;
}

.nuthHeader-menu
{
	flex-grow: 1;
	margin: 5px;
}
.nuthHeader-search
{
	margin: 5px;
 	width: 200px;
}



.nuthHeader img
{
	width: 100%;
	height: auto;	
}


button.teamButton
{
	display: inline-block;
    background-color: #FFFFFF;
    color: #005eb8;
    border: none;
    cursor: pointer;
    height: 60px;
	font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    width: auto;
    padding: 0px 15px 0px 15px;
}

button.teamButton:hover
{
	color: #FFFFFF;
	background-color: #005eb8;	
}

/***************************************************************************************
******************** footer-nuth ********************
**************************************************************************************/

.site-info
{
	background-color: #005EB8;
	color: #ffffff;
	text-align: center;
	padding: 10px;
	font-family: var(--main-font);
}
.site-info #copyright
{
	font-size: 0.7em;
}

.site-info a
{
	color: #ffffff !important;
	
}

/***************************************************************************************
******************** homepage ********************
**************************************************************************************/

.homepage_title
{

	text-align: center;
	background-image: url("https://support.nuth-itt.co.uk/wp-content/uploads/2021/02/search-image.png");
	height: 250px;
	padding-top: 40px;
}
.homepage_title h1
{
	color: #ffffff !important;
	font-weight: bold !important;

}
.homepage_title #ajaxsearchlite2
{
	margin-top: 20px;
	margin: 50px auto;
	width: 400px;
}

@media (max-width: 450px)
{
	.homepage_title #ajaxsearchlite2
{
	margin-top: 20px;
	margin: 50px auto;
	width: 200px;
}
}
/***************************************************************************************
******************** search results ********************
**************************************************************************************/
.search-title
{
	text-align: center;
	color: #005EB8;
}

.searchContainer
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 10px;
	margin-bottom: 10px;
}

.searchContainer a
{
	text-decoration: none;
	color: inherit;
}

.searchItem
{
	width: 200px;
	height: 300px;
	background-color: #FFFFFF;
	margin: 20px 10px;
	padding: 10px;
	overflow:hidden;
	text-overflow: ellipsis;
	box-shadow: 0 1.6px 3.6px 0;
	cursor: pointer;
	text-align: center;
}

.searchItem:hover,
.searchItem:focus
{
	transform: scale(1.05);
}

.searchItem h1
{
	font-size: 1.1em !important;
	margin: 2px;
	color: #005EB8;
}

.searchItem p
{
	font-size: 1em;
	margin: 2px;
	color: #000000;
	font-weight: 400;
	text-align: left;
}

.readM
{
	font-size: 0.7em  !important;
	margin-top: 5px  !important;
	margin: 2px;
	color: #000000;
	font-weight: 600  !important;

}
/***************************************************************************************
******************** search form ********************
**************************************************************************************/
.search-bar
{
	background-color: transparent;
	width: 400px;
	margin: auto;
	margin-top: 5px;
}
.search-form
{
	flex-grow: 1;
}
.search-bar input {
	width: 90%;
	font-size: 1.4rem;
	padding: 0rem 0.5rem;
	border: 0;
}

.search-bar button {
	width: 10%;
	font-size: 1.4em;
	background-color: #ffffff;
	border: 0;
	cursor: pointer;
	margin-left: -45px;
}

@media (max-width: 550px)
{
	.search-bar
	{
		background-color: transparent;
		width: 100%;
		margin: auto;
		margin-top: 5px;
	}
}

/***************************************************************************************
********************  Office 365 templates ********************
**************************************************************************************/



.o365container {
 	display: flex;
	font-family: var(--main-font);
	
	
	
}

@media (max-width: 450px)
{
 	 .o365container
	{
   	 	display: block;
 	}
	.o365item
	{
		width: 0px; /* A fixed width as the default */
	}
	
}


.o365item
{
  	flex-shrink: 2;
	flex-grow: 1;
	width: 200px; /* A fixed width as the default */
}

.o365item-center
{ 
	flex-grow: 2; /* Set the middle element to grow and stretch */
	width:80%;
	max-width: 1280px;
}

.o365item-center ol, ul
{
	 line-height:160%;
	
}

.o365item-center h1
{
  	font-size: 2em;
	margin: 2px;
	color: #005EB8;
	text-align: center;
}

.o365item + .item
{ 
  margin-left: 2%; 
}

.o365item-center table, th, td
{
	border: 1px solid black;
	border-collapse: collapse;
}

.o365item-center td, td
{
	padding: 15px;
}
.o365navCard
{
	width: 150px;
	height: 175px;
	background-color: #FFFFFF;
	margin: 20px 10px;
	overflow:hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	text-align: center;
}

.o365navCard h2
{
	font-size: 1em;
	color: #005EB8;	
	margin-top: -30px;
}

.o365navCard:hover,
.o365navCard:focus
{
	transform: scale(1.05);
	box-shadow: 0 0.6px 1px 0;
}



.o365card
{
	width: 250px;
	height: 300px;
	background-color: #FFFFFF;
	margin: 20px 10px;
	padding: 10px;
	overflow:hidden;
	text-overflow: ellipsis;
	box-shadow: 0 1.6px 3.6px 0;
	cursor: pointer;
	text-align: center;
}

.o365card h2
{
	font-size: 1em;
	color: #005EB8;	
}

.o365card p
{
	font-size: 1em;
	margin: 2px;
	color: #000000;
	font-weight: 400;
	text-align: left;
}


.o365card:hover,
.o365card:focus
{
	transform: scale(1.05);
	box-shadow: 0 0.6px 1px 0;
}

.cat_search
{
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content: center;
	padding: 25px;
}

 #teams
{
	background-color: #454b92;
	color: #FFFFFF;
}

#excel
{
	background-color: #0e5c2f;
	color: #FFFFFF;
}

#onenote
{
	background-color: #531176;
	color: #FFFFFF;
}

#word
{
	background-color: #124078;
	color: #FFFFFF;
}

#powerpoint
{
	background-color: #b7472a;
	color: #FFFFFF;
}

#outlook
{
	background-color: #006dc4;
	color: #FFFFFF;
}

#nhs
{
	background-color: #005EB8;
	color: #FFFFFF;
}

.returnButton 
{
	padding: 5px 5px !important;
	border-radius: 5px !important;	
	text-decoration: none !important;
	font-size: 1.2Rem;
}

.returnButton:hover,
.returnButton:focus
{
	transform: scale(1.05);
	
}

.return-button-wrapper
{
	display: flex;
	margin: 25px 0px;
	justify-content: center;
}

.randomTip
{
	background-color: #005EB8;
	color: #FFFFFF;
	margin: 5px 0px;
	padding: 10px;
	text-decoration: none;
}

.randomTip a
{
	text-decoration: underline;
	font-weight: bold;
	font-size: 0.8em;
	color: #ffffff;
}


/***************************************************************************************
********************  pocket guides   *************************************************
**************************************************************************************/
.PGCardContainer
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 10px;
	margin-bottom: 10px;
}

.PGCard
{
	width: 200px;
	height: 300px;
	background-color: #FFFFFF;
	margin: 20px 10px;
	padding: 10px;
	overflow:hidden;
	text-overflow: ellipsis;
	box-shadow: 0 1.6px 3.6px 0;
	cursor: pointer;
	text-align: center;
}

.PGCard img{
    display: block;
    margin: 0 auto;
}

.PGCard:hover,
.PGCard:focus
{
	transform: scale(1.05);
}

.PGCard h1
{
	font-size: 1.1em !important;
	margin: 2px;
	color: #005EB8;
}

.PGCard p
{
	font-size: 1em;
	margin: 2px;
	color: #000000;
	font-weight: 400;
	text-align: left;
}

/***************************************************************************************
********************  pdf guides   *************************************************
**************************************************************************************/
.pdfCardContainer
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 10px;
	margin-bottom: 10px;
}

.pdfCard
{
	width: 50px;
	height: 60px;
	background-color: #FFFFFF;
	margin: 20px 10px;
	padding: 10px;
	overflow:hidden;
	text-overflow: ellipsis;
	box-shadow: 0 1.6px 3.6px 0;
	cursor: pointer;
	text-align: center;
}

.pdfCard img{
    display: block;
    margin: 0 auto;
}

.pdfCard:hover,
.pdfCard:focus
{
	transform: scale(1.05);
}

.pdfCard h1
{
	font-size: 1.1em !important;
	margin: 2px;
	color: #005EB8;
}

.pdfCard p
{
	font-size: 1em;
	margin: 2px;
	color: #000000;
	font-weight: 400;
	text-align: center !important;
}
.row {
  display: flex;
}
/* Create two unequal columns that floats next to each other */
.column {
  float: left;

}

.left {
  width: 80%;
	padding: 2px;
}

.right {

  	width: 20%;
	border-left-style: solid;
	border-left-width: 0.5px;
	padding: 5px;
}
.theGuides
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
}
.theVids
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  clear: both;
}

/***************************************************************************************
********************  how-to-guides   *************************************************
***************************************************************************************/


.howto {
	display: flex;
   font-family: var(--main-font);
   
   
   
}

@media (max-width: 450px)
{
	 .howto
   {
		   display: block;
	}
   .howtoitem
   {
	   width: 0px; /* A fixed width as the default */
   }
   
}

.howtoitem
{
  	flex-shrink: 2;
	flex-grow: 1;
	width: 200px; /* A fixed width as the default */
}

.howtoitem-center
{ 
	
	flex-grow: 2; /* Set the middle element to grow and stretch */
	width:80%;
	max-width: 1280px;
}

.howtoitem-center ol, ul
{
	 line-height:160%;
	
}

.howto h1
{
	color: #365f91;
	font-weight: bold;
}

.guideSection
{
	color: #ffffff;
	background-color: #365f91;
	font-weight: bold;
	font-size: 1.4rem;
	padding: 5px;
}

.infoSection
{
	color: #ffffff;
	background-color: #9bbb59;
	font-weight: bold;
	font-size: 1.2rem;
	padding: 5px;
	margin: 5px 0px;

}

.warnSection
{
	color: #ffffff;
	background-color: #c0504d;
	font-weight: bold;
	font-size: 1.2rem;
	padding: 5px;
	margin: 5px 0px;

}

.printButton 
{
	padding: 5px 5px !important;
	border-radius: 5px !important;	
	text-decoration: none !important;
	background-color: #9bbb59;
    color: #FFFFFF;
	border-color: #9bbb59;
	font-size: 1.2rem;
	cursor: pointer;
}

.printButton:hover,
.printButton:focus
{
	transform: scale(1.05);
}

/*********************************************Blog*******************************************************/

.blogTitle
{
	text-align: left;
	border-bottom: solid 2px #e8e8e8;
	margin-bottom: 20px;
}
.blogTitle h1
{
	color: #005EB8;
	font-size:4em;
	text-align: left;
	margin-bottom: 20px;
}

.blogTitle h2
{
	color: #005EB8;
}

.latestArticles h2
{
	color: #005EB8;
}

.latestArticles
{
	border-bottom: solid 2px #e8e8e8;
}

.blogTitle p
{
	text-align: left;
	font-size: 1.2em;
	font-weight: bold;
}

.blogCatergory
{
	font-size: 0.8em;
	font-weight: bold;
	margin: 10px 0px;
	color: #686868;
}

.blogBio
{
	display: flex;
	flex-direction: row;

}
.blogBioDetails
{
	display: flex;
	flex-direction: column;
	flex:1;
	margin-left: 5px;
}
.blogPotrait img
{
	border-radius: 50%;
}

.blogAuthor
{
	align-content: stretch;
	margin-top: auto;
	margin-bottom: 0;
	font-weight: bold;
}

.blogDate
{
	margin-top: 0;
	margin-bottom:auto;
	font-size: 0.8em;
}

.blogContainer
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 10px;
	margin-bottom: 10px;
}

.blogContainer a
{
	text-decoration: none;
	color: inherit;
}

.blogItem
{
	cursor: pointer;
	box-sizing: border-box;
	display: inline-block;
	border: solid 1px #e8e8e8;
	border-radius: 4px;
	width: 100%;
	min-width: 268px;
	max-width: 378px;
	background-color: #FFFFFF;
	margin: 20px 20px;
	overflow:hidden;
	text-overflow: ellipsis;
	box-shadow: 0 1.6px 3.6px 0;
	text-align: center;

}

@media (min-width: 600px)
{

	.blogItem
	{
		min-width: unset;
		width: calc(100% / 2 - 25px);
	}


}

.blogItem:hover,
.blogItem:focus
{
	transform: scale(1.05);
}

.blogItem h1
{
	font-size: 1.1em !important;
	text-align: left;
	color: #005EB8;
	margin: 10px;
}

.blogItem h2
{
	font-size: 0.8em !important;
	font-weight: bold;
	margin: 10px;
	color: #686868;
	text-align: left;
}

.blogItem p
{
	font-size: 1em;
	margin: 10px;
	color: #000000;
	font-weight: 400;
	text-align: left;
}

.blogItem img
{
	width: 100%;
	height: 250px;
	object-fit: cover;
	object-position: center;
}

.blogReadM
{
	font-size: 0.7em  !important;
	margin-top: 5px  !important;
	margin: 10px;
	color: #000000;
	font-weight: 600  !important;

}

.featuredBlog
{
	display: grid;
	width: 100%;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	grid-auto-flow: column;
	justify-self: stretch;
}

.featuredBlog a
{
	text-decoration: none;
	color: inherit;
}

.featuredMain
{
	grid-column: 1;
	grid-row: 1 / 3;
	cursor: pointer;
	display: inline-block;
	/*box-sizing: border-box;

	border: solid 1px #e8e8e8;
	border-radius: 4px;*/
	width: 100%;
	justify-self: stretch;
	/*min-width: 268px;
	max-width: 378px;
	margin: 20px 10px;*/
	background-color: #FFFFFF;
	overflow:hidden;
	text-overflow: ellipsis;
	/*box-shadow: 0 1.6px 3.6px 0;*/
	text-align: center;
}



.featuredMain:hover,
.featuredMain:focus
{
	filter:brightness(80%);
}

.featuredMain h1
{
	font-size: 1.1em !important;
	text-align: left;
	color: #005EB8;
	margin: 10px;
}

.featuredMain h2
{
	font-size: 0.8em !important;
	font-weight: bold;
	margin: 10px;
	color: #686868;
	text-align: left;
}

.featuredMain p
{
	font-size: 1em;
	margin: 10px;
	color: #000000;
	font-weight: 400;
	text-align: left;
}

.featuredMain img
{
	width: 100%;
	/*height: 250px;*/
	object-fit: cover;
	object-position: center;
}

.featuredItem
{
	cursor: pointer;
	display: inline-block;
	/*box-sizing: border-box;
	border: solid 1px #e8e8e8;
	border-radius: 4px;
		box-shadow: 0 1.6px 3.6px 0;*/
	width: 100%;
	justify-self: stretch;
	/*min-width: 268px;
	max-width: 378px;
	margin: 20px 10px;*/
	background-color: #FFFFFF;
	overflow:hidden;
	text-overflow: ellipsis;
	text-align: center;
	margin: 10px;
}


.featuredItem:hover,
.featuredItem:focus
{
	filter:brightness(80%);
}

.featuredItem.featuredItem:nth-child(2n)
{
	margin-bottom: 0px;
}

.featuredItem.featuredItem:nth-child(3n)
{
	border-top: solid 2px #e8e8e8;
	margin-top: 0px;
}

.featuredItem h1
{
	font-size: 1.1em !important;
	text-align: left;
	color: #005EB8;
	margin: 10px;
}

.featuredItem h2
{
	font-size: 0.8em !important;
	font-weight: bold;
	margin: 10px;
	color: #686868;
	text-align: left;
}

.featuredItem p
{
	font-size: 1em;
	margin: 10px;
	color: #000000;
	font-weight: 400;
	text-align: left;
}

.featuredItem img
{
	width: 100%;
	height: 250px;
	object-fit: cover;
	object-position: center;
}