/*
Theme Name: Tempera Child (no copyright link)
Theme URI: http://www.cryoutcreations.eu/
Description: Tempera child theme
Author: Cryout Creations
Author URI: http://www.cryoutcreations.eu
Version: 0.2
Template: tempera
*/
@import url("../tempera/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */
/*NOTE: This file is in 3 sections, please add to the appropriate bit: 
    - Modifications to theme, 
    - New styles, 
    - Modifications to plug-ins*/

/* --------------------------------------------------------------------------------*/
/* ----------------------Modifications to theme style.css ------------------------ */
/* --------------------------------------------------------------------------------*/


/* -------------------------MAIN MENU ---------------------------------------------*/

/* Add header image
#access {
	background: url(https://e4helpcenter.petroleumplace.com/help/wp-content/uploads/2024/06/IFSbanner.svg);
}*/

/* style the main menu buttons*/
#access > .menu > ul > li > a > span {
	border-style: none !important;
/*	border-color:transparent !important;*/
/*border-right:0px solid transparent; style the right border of the buttons*/
line-height: 40px; /*vertical adjust so that the logo can fit */
/*font-size: 17px; /* Change the font of P2 Logo in menu */
}
/* OBSOLETE
#access a > span{
	padding-left: 0;
	padding-right: 0;
}*/
/* OBSOLETE
#access ul li {
position:relative;
display:block;
float:left;
white-space: nowrap;
/*margin-left:19px; *//*Adjust spacing after the menu title "Explorer Help Center"*/
}

/* Hides background colour of IFS logo */
#access ul li.current_page_item > a, #access ul li.current-menu-item > a, #access ul li.current_page_ancestor > a, #access ul li.current-menu-ancestor > a {
    background-color: transparent !important;
}

/* Main menu navigation */
.menu-image-title-before.menu-image-not-hovered img,
.menu-image-hovered.menu-image-title-before .menu-image-hover-wrapper, .menu-image-title-after.menu-image-title {
    padding-left: 0;
}
/* Align main menu text vertically */
.menu-image-hover-wrapper {
	height:51px;
	line-height: 51px;
}
.menu-image-title-below menu-image-title {
	height:40px;
	line-height: 40px;
}

/* remove title text of orientation portrait*/
@media screen and (orientation: portrait) {
	.menu-image-title-below .menu-image-title,
	.menu-image-title-after .menu-image-title {
		display: none;
	}
} 

@media screen and (min-width: 650px) {
	#prime_nav {
		display: flex;
		justify-content: space-evenly;
	}
}

#prime_nav li {
	text-align:center;
	/*width:115px;*/ /*For Case Management*/
}
#prime_nav li.menu-item-type-custom {
	text-align:left;
	width:270px;
	border-color:transparent;
	box-shadow: none;
	-webkit-box-shadow: none;
}

#prime_nav li.menu-item-type-post_type a {
	height:100px;
}
#prime_nav li a > span {
	/*padding-bottom:0;*/
}
#prime_nav li a span:last-child { /* Associated with displaying the product name when icon is hovered */
	/*display:none;*/
}
@media all and (orientation: landscape) {
	/* Used to display the product name when icon is hovered */
	#prime_nav li:hover a span:last-child,
	#prime_nav li.current-menu-item a span:last-child
	{
		display:block;
	}
	#prime_nav li.menu-item-type-custom  a span:last-child{
		display:block;
	}
}

/* ----------------------------CONTENT STYLING --------------------------------------------------------*/

/* make paragraph line height not suck*/
p {
line-height: 1.8em !important;
}
.widget-area {
line-height: inherit !important;
}
#content ul{
line-height: inherit !important;
}

hr { /*hr would otherwise look like a thin box*/
	border-top: 1px solid #eee;
	border-bottom: 0;
	border-left: 0;
	border-right: 0;
}

/* Turn off printing URL next to links in Bootstrap */
a[href]:after {
    content: none;
}

/* Make the "back to top" indicator on a page stand out more */
#toTop {
	color:#8427e2;
	font-size: 30px;
	bottom: 80px;
}

/* style the text above the product icons */
.column-header-image {
font-size: 24px;
margin-bottom: 5px;
line-height: 20px;
text-align:center;
}

/* Style the search */
.search-field .form-control {
	padding:10px 16px;
	margin-left: 0px;
}
.search-field .input-lg {
	height:45px;
	border-color: #CCCCCC;
} 
.search h1.page-title {border:0; background: none;}
.search div.contentsearch {padding: 10px 0;}
.search.search-results span.author {display:none;}

/* Side bar search style */
.input-group-btn > .btn {
	z-index:2;
}

/*.sidey .widget-container{
	font-size: 12px; General font size in sidebar widgets 
}*/


/* copyright info */
#site-copyright {
	display:block;
	float:none;
	padding-top:5px;
	font-style: italic;
	clear:both;
	margin:0 auto;
	text-align:center;
}

.breadcrumbs 
{
	text-transform:uppercase !important;
}

/* Make page headings not all caps and not huge*/
h1.entry-title  a{
	text-transform:none !important;
	font-size:30px;
	color:#360065 !important;
}

/* experimental 
h2  {
	text-transform:none;
	font-size:24px;
	color:#8427e2;
}*/


/* Make blog page headings not all caps and not huge*/
h2.entry-title  a{
	text-transform:none;
	font-size:24px;
	color:#8427e2 !important;
}

/* For non-linked headings */
h2.rn-title  {
	text-transform:none;
	font-size:24px;
	color:#8427e2 !important;
}

/*Make heading 3 inside the page nicer*/
h3 {
	font-weight: 600 !important;
	line-height: 1.45em !important;
	padding-top: 21px;
	margin-bottom: 10px !important;
	color: #360065 !important;
}

h4{
	font-size: 18px !important;
    font-weight: 600 !important;
	color: #8427e2 !important;
}

h5 { /* Make H5 stand out more but not too much */
	font-size: 16px !important;
	text-transform: uppercase;
    font-weight: bold;
	color: #360065 !important;
	margin-bottom: 10px !important;
}

h6 { /* Make H6 stand out more but not too much */
	font-size: 15px !important;
    font-weight: bold;
	/*font-style: italic;*/
	color: #8427e2 !important;
}

/* Make the continue link on blog page prettier */
a.continue-reading-link {
	border:none;
	/*color: #00a1ed !important;*/
}
a.lbg-style2 { /*Style for the reveal element in posts, style it to be the same as continue link on blog page */
	text-transform:uppercase;
	color:#8427e2;
}

/* Format code style */
.entry-content code {
    border: 0px solid transparent;
	/*border-bottom:1px solid transparent; */
	color: black;
	background-color: #eeeeee;
    clear: both;
    display: block;
    float: none;
    margin-top: 20px;/*0 auto;*/
	margin-bottom: 20px;
    overflow: auto;
    padding: 10px !important;
    text-indent: 0;
    white-space: nowrap;
	/*font-size: 16px !important;*/
}

/*Add entries for "Latest Blog Posts" section in footer*/
#footer-widget-area .widget_recent_entriesh3
{
	line-height: 1.1em !important;
	border:0;
	background: #fff;
	font-size: 20px;
	color: #0173D1;
	text-transform:none;
	padding-top:0;
}
#footer-widget-area .widget_recent_entries ul li
{
	font-size: 15px;
	line-height: 1.1em !important;
}
#footer-widget-area .widget_recent_entries ul li a
{
	color: #0173D1;
}

#footer .widget-title
{
	border-color: #ffffff !important;
}

/* Fix borders on tables so that they default to no borders*/
.entry-content table, .entry-content fieldset, .entry-content tr td, .entry-content tr th, .entry-content thead th {
    border: 0;
}

/* Resize the table width so that it fits alongside the TOC */
.table-toc  {
width: 75% !important;
}

/* Table with grey borders in a grid, for Supported Technologies only (not used on other pages)*/
.table-grid  {
	/*width: 50% !important;*/
}
.table-grid th {
	background-color: #360065;
	color: white !important;
	padding-left: 5px !important;
	letter-spacing: 1px;
	text-align: center;
/*	font-weight: 600 !important;*/
}
.table-grid tr {
	border: 1px solid #cccccc !important;
}
.table-grid td {
	padding-left: 5px !important;
	border-right: 1px solid #cccccc !important; 
	text-align: center;
}

/* Not sure what this does - Pat?*/
#content .entry-content table td img {vertical-align:middle;margin-top:-2px;}


/*Style the comment submit button*/
#commentform input#submit{
	border: 1px solid #207AB6 !important;
	border-radius:20px !important;
	color: #207AB6 !important;
}
/* Style the comment box*/
textarea#comment{
   border: 1px solid #cccccc;
   border-radius:10px;
}
/* Add a border before the comments section to separate it from the content */
#comments {
	border-top: #cccccc 1px solid;
}
/* Indent the comment replies */
ul.children {
margin-left:50px;
}
/* Style to comment form name, email, website fields */
#respond p{
	margin-top:5px;
	margin-bottom:5px;
	/*border: 1px solid #cccccc;
    border-radius:10px;*/
}
input#url {
	border: 1px solid #cccccc;
    border-radius:10px;
}
input#email {
	border: 1px solid #cccccc;
    border-radius:10px;
}
input#author {
	border: 1px solid #cccccc;
    border-radius:10px;
}
/* Comments Styling 
#comments .comment-reply-title {
	text-transform: uppercase !important;
}*/


#secondary .widget-title {
	color: #444444;
}


/* Make preformatted text prettier*/
pre {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace !important;
	width: 100%;
	overflow: auto;
	overflow-y: hidden;
	background-color: #eeeeee !important;
}
.entry-content pre {
    color: #000000;
    background-color: #ffffff !important;
    padding: 3px !important;
    font-size: 17px !important; 
	white-space: pre-wrap;
	border: 0px;
}
/*Change the colour of the default code style used below the comment box*/
code {
    color: #999999;
    background-color: #ffffff;
}


/* Make the caption styling stand out more for "simple" captions 2e7d32 */
.caption-simple #content .wp-caption .wp-caption-text {
    color: #69A441;
    font-weight: 500;
}

/* Make the blockquote reflect a Note style */
blockquote {
	font-weight:600; /* Give the text some prominence */
}
.entry-content blockquote:before {
left:0px;
font-family:FontAwesome; /*specify font awesome family*/
content: "\f05a"; /*unicode for fa-info-circle*/
font-size:50px;
color: #8427e2; /* IFS purple */
position:absolute;
right:10px;
top:30px; /* line this up with the top of the first line of text */
}
.entry-content blockquote { 
	padding:15px ;
	padding-left:90px;
	display:block;
	font-style: normal; /*Make the italics go away*/
	clear:both;
	float:none;
	position:relative;
	border-top:1px solid transparent;
	border-bottom:1px solid transparent;
 }
#content blockquote p{ /*The paragraph style for the text*/
 margin-bottom:0;
 font-size: 16px !important;
 }
 
/* Add an optional border to images - use this in the "Image CSS Class" under Advanced options in image edit*/ 
 img.border-image {
border: 3px solid #eee !important;
padding:3px;
margin:3px;
}
#content .wp-caption img {border: 3px solid #ddd !important} /*You need this line because the equivalent style in style.css is marked !important*/

/*Don't reduce opacity when hovering over images*/
img:hover {opacity:1.0 !important;} 
#content .wp-caption img:hover {opacity:1.0}

/* Make the font size bigger on the archive pages */
.entry-summary p {
	font-size: 16px !important;
} 

/* Footer Styling */
#footer .widget-title {
	text-transform: uppercase !important;
	padding-left: 0px !important;
}

 
/* --------------------------------------------------------------------------------*/
/* ------------------------- New styles -------------------------------------------*/
/* --------------------------------------------------------------------------------*/

/* Layout of the cards on the product landing pages */
.cards {
	display:flex;
	flex-wrap: wrap;
}

/* Style each card */
.card {
	flex:1;
	width:250px;
	height:220px;
	margin-right:10px;
	margin-top:20px;
	padding:20px;
	font-family:"Open Sans", sans-serif;
	text-align:center;
	color: #360065;
}
.card a {
	color: #360065;
}

.card-title {
	font-size:24px;
	/*font-weight:400;*/ /*Bold but not too bold*/
	/*font-size:calc(100% + 0.7vw);*/
	display:block; /*gives a bit more space below the title */
	line-height: 1.1em;
}
.card-desc {
	font-size:18px;
	line-height: 1.3em;
}
.card-title2 {
	font-size:20px;
	font-weight:600; /*Bold but not too bold*/
	/*font-size:calc(100% + 0.4vw);*/
	display:block; /*gives a bit more space below the title */
	line-height: 1.2em;
	/*color: #8427E2;*/
}
.card-desc2 {
	font-size:17px;
	/*font-size:calc(90% + 0.1vw);*/ 
	line-height: 1.2em;
}

.card-desc3 {
	font-size:14.5px;
	line-height: 1.1em;
}

.flexcontainer { /*Flexbox - this makes the landing page cards wrap a bit more nicely*/
   display: -webkit-flex;
   display: flex;
   -webkit-justify-content: center;
   justify-content: center;
}

/* Landing page card styles */
div#explorer { 
	border-color: #fe12F0;
	border-style: solid;
	border-width: thick thin thin thin;
	/*color: #fe12F0 !important;*/
}
#explorer:hover a{
	color:#FE12F0 !important;
}

div#aplus { 
	border-color: #D25C0F;
	border-style: solid;
	border-width: thick thin thin thin;
	/*color: #fe12F0 !important;*/
}
#aplus:hover a{
	color:#D25C0F !important;
}

div#fo { 
	border-color: #249FF4;
	border-style: solid;
	border-width: thick thin thin thin;
	/*color: #fe12F0 !important;*/
}
#fo:hover a{
	color:#249FF4 !important;
}

div#sl { 
	border-color: #6B788B;
	border-style: solid;
	border-width: thick thin thin thin;
	/*color: #fe12F0 !important;*/
}
#sl:hover a{
	color:#6B788B !important;
}

div#sentinel { 
	border-color: #9898FF;
	border-style: solid;
	border-width: thick thin thin thin;
	/*color: #fe12F0 !important;*/
}
#sentinel:hover a{
	color:#9898FF !important;
}

div#verify { 
	border-color: #18B57C;
	border-style: solid;
	border-width: thick thin thin thin;
	/*color: #fe12F0 !important;*/
}
#verify:hover a{
	color:#18B57C !important;
}

div#wt { 
	border-color: #FF9855;
	border-style: solid;
	border-width: thick thin thin thin;
	/*color: #fe12F0 !important;*/
}
#wt:hover a{
	color:#FF9855 !important;
}

/* use to hide card*/
#white {
	background-color:#ffffff;
	color: #ffffff;
}

/* These div colours are being deprecated. Will delete once all the pages are updated. */

div#purple { /*Style updated - colour changed to violet*/
	/*background-color: rgba(108,108,217,1);*/
	border-color: #360065;
	border-style: solid;
	border-width: thick thin thin thin;
}
#purple:hover  a{
	/*color:#1A1B1D;*/
}
#purple:hover  {
	background-color: rgba(108,108,217,0.5);
}
#purple1 {
	color: rgba(78,31,195,1);
}

#blue {
	/*background-color:rgba(0,118,220,1);*/
	border-color: #360065;
	border-style: solid;
	border-width: thick thin thin thin;
}
#blue:hover  a{
	/*color:#1A1B1D;*/
}
#blue:hover  {
	/*background-color: rgba(0,118,220,0.5);*/
}
#blue1 {
	/*color:rgba(68, 104, 220,1);*/
	border-color: #360065;
	border-style: solid;
	border-width: thick thin thin thin;
}

#green { /*Style updated - colour changed to Sapphire*/
	/*background-color:rgba(57,90,170,1);*/
	border-color: #360065;
	border-style: solid;
	border-width: thick thin thin thin;
}
#green:hover  a{
	/*color:#1A1B1D;*/
}
#green:hover  {
	/*background-color: rgba(57,90,170,0.5);*/
}
#green1 {
	color:rgba(34,170,154,1);
}

#teal { /*Style updated - colour changed to cerulean*/
	/*background-color:rgba(50,123,177,1);*/
	border-color: #360065;
	border-style: solid;
	border-width: thick thin thin thin;
}
#teal:hover  a{
	/*color:#1A1B1D;*/
}
#teal:hover  {
	/*background-color: rgba(50,123,177,0.5);*/
}
#teal1 {
	color:rgba(22,116,116,1);
}

#leaf { /*Style updated - colour changed to purple*/
	/*background-color:rgba(84,69,182,1);*/
	border-color: #360065;
	border-style: solid;
	border-width: thick thin thin thin;
}
#leaf:hover  a{
	/*color:#1A1B1D;*/
}
#leaf:hover  {
	background-color: rgba(84,69,182,0.5);
}
#leaf1 {
	color:rgba(40,160,89,1);
}

#aqua { /*Style updated - colour changed to Turquoise*/
	/*background-color:rgba(0,162,189,1);*/
	border-color: #360065;
	border-style: solid;
	border-width: thick thin thin thin;
}
#aqua:hover  a{
	/*color:#1A1B1D;*/
}
#aqua:hover  {
	background-color: rgba(0,162,189,0.5);
}
#aqua1 {
	color:rgba(0,130,176,1);
}

#grey {
	background-color:#cccccc;
}
#grey:hover  a{
	color:#1A1B1D;
}
#grey:hover  {
	background-color: #cccccc;
}


.card-wrap {
	display:flex;
	flex-wrap: wrap;
}
.card-card { /*no box around each video*/
	border: 1px solid #737373;
	margin:10px;
	text-align:center;
	width: 200px;
}
.card-header { /*the heading text*/
	padding-left:0px;
	padding-top: 5px;
	padding-bottom: 5px;
	line-height:20px;
	color: #ffffff;
	font-weight: 500;
}
.card-heading-text { /*the heading text */
	font-size: 18px !important;
	padding-bottom: 0px;
	padding-top:0px;
	margin-bottom:0px !important;
}
.card-icon {
	padding-bottom:5px;
	padding-top:10px;
	padding-left:0px;
	min-width: 50px;
	color: #737373;
}
.card-text{
	padding:5px;
}
.card-p {
	margin-bottom: 0px !important;
	font-size: 14px !important;
}
.card-link {
	padding-left:0px;
	padding-right:10px;
	padding-bottom: 10px;
}


/* Layout of the videos pages */
.videos { /* Not used? */
	display:flex;
}
/* Style each card */
.video { /* Not used? */
	flex:1;
	width:250px;
	height:200px;
	margin-right:20px;
	margin-top:20px;
	padding:20px;
	/*font-family:"Segoe UI", "San Francisco", Roboto, Sans;*/
	text-align:center;
}
.video a { /* Not used? */
	color: #ffffff;
}
.video-title { /* Not used? */
	font-size:22px;
	/*font-weight:400; /*Bold but not too bold*/
	display:block; /*gives a bit more space below the title */
}
.video-desc { /* Not used? */
	font-size:20px;
}
.component-video { /*no box around each video*/
	border: 0px solid #360065;
	margin:10px;
	text-align:left;
	width: 280px;
}
.comp-header-video { /*the heading text*/
	padding-left:0px;
	line-height:20px;
	color: black;
	font-weight: 500;
}
.comp-heading-text-video { /*the heading text */
	font-size: 14px !important;
	padding-bottom: 0px;
	padding-top:0px;
	margin-bottom:0px !important;
}
.comp-icon-video {
	padding-bottom:5px;
	padding-top:5px;
	padding-left:0px;
	min-width: 50px;
	background-color: #360065;
}
.comp-text-video {
	padding:0px;
}
.comp-p-video {
	margin-bottom: 0px !important;
}
.comp-link-video  {
	padding-left:0px;
	padding-right:10px;
	padding-bottom: 10px;
}



/* Layout for the Components page*/
.comp-list {
	display:flex;
	flex-wrap: wrap;
}
.component { /*put a box around each component*/
	border: 1px solid #360065;
	margin:10px;
	text-align:center;
	width: 200px;
}
.component-wide { /*put a box around each component*/
	border: 1px solid #360065;
	margin:10px;
	text-align:center;
	width: 220px;
}
.comp-header { /*the heading text box*/
	padding-left:10px;
	line-height:30px;
	color: white;
	background: #360065;
}
.comp-heading-text { /*the heading text */
	font-size: 18px !important;
	padding-bottom: 5px;
	padding-top:3px;
}
.comp-content { /*keep the icon and text together*/
	display:inline-flex;
}
.comp-icon {
	padding-bottom:5px;
	padding-top:5px;
	padding-left:10px;
	min-width: 50px;
}
.comp-text {
	padding:10px;
}
.comp-text-wide {
	padding-top:5px;
	padding-left:10px;
	text-align:left;
}
.comp-link  {
	padding-left:10px;
	padding-right:10px;
	padding-bottom: 10px;
}


/* Jump buttons on the components page*/
#button-div {
	margin:0 auto;
    display:flex;
	justify-content:space-between;
	flex-wrap: wrap;
	align-items: stretch;
}
.button {
	box-shadow: none !important;
	color: #fff;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top:10px;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
	width:110px;
	border-radius:5px;
	border: none;
	-webkit-transition-duration: 0.4s; /* Safari */
	-moz-transition-duration: 0.4s;
    transition-duration: 0.4s;
}
.button, #respond .form-submit input#submit, input[type="submit"], input[type="reset"] {
	background-color: #8427E2 !important;
}
.button:hover{
	color: #ffffff;
	font-weight:600;
	background-color: #FE12F0 !important;
}

/* Used for buttons on Video page */
.button-wide {
    background-color: #8427E2 !important;
	box-shadow: none !important;
	color: #ffffff;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top:10px;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
	width:200px;
	border-radius:5px;
	border: none;
	-webkit-transition-duration: 0.4s; /* Safari */
	-moz-transition-duration: 0.4s;
    transition-duration: 0.4s;
}
.button-wide a{
	color: #ffffff;
}
.button-wide a:hover{
	color: #ffffff;
}
.button-wide:hover {
	background-color:#FE12F0 !important;
}
input[type=submit], input[type=reset] { /*change the style of the submit buttons*/
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
	box-shadow: none !important;
	text-transform: uppercase !important;
	color: #111111;
	background-color:#ffffff;
	}

/* Old layout for the Components page */
.inline { /* Make things display horizontally */
	float: left;
	margin-bottom: 15px;
}
.controlbutton{ /* For Controls landing page */
	width: 150px;
	height: 40px;
	text-align: center;
	display: block;
}
.clear{
	clear:both;
}

/* Left bar alongside paragraph GREY? */
.left-bar {
	border-left: 4px solid #919ba5;
	padding-left: 15px;
	padding-top: 2px;
	padding-Bottom: 2px;
	font-size:16px !important;
	font-weight: 500;
	background-color: #e9ebed;
	/*color: #333333 !important;*/
}
/* BLUE*/
.left-bar-p2blue {
	border-left: 4px solid #72c9f8;
	padding-left: 15px;
	padding-top: 2px;
	padding-Bottom: 2px;
	font-size:16px !important;
	font-weight: 500;
	background-color: #e3f4fe;
}
/* Red Left bar alongside paragraph */
.left-bar-red {
	border-left: 4px solid #ff6374;
	padding-left: 15px;
	padding-top: 2px;
	padding-Bottom: 2px;
	font-weight: 500;
	font-size:16px !important;
	background-color: #F0DED9;
	/*color: #444444 !important;*/
}
/* Yellow Left bar alongside paragraph.*/
.left-bar-yellow {
	border-left: 4px solid #ff8055;
	padding-left: 15px;
	padding-top: 2px;
	padding-Bottom: 2px;
	font-weight: 500;
	font-size:16px !important;
	background-color: #ffe6dd;
	/*color: #333333 !important;*/
}
/* Blue Left bar alongside paragraph*/
.left-bar-blue {
	border-left: 4px solid #72c9f8;
	padding-left: 15px;
	padding-top: 2px;
	padding-Bottom: 2px;
	font-weight: 500;
	font-size:16px !important;
	background-color: #e3f4fe;
	/*color: #333333 !important;*/
}
/* Grey Left bar alongside paragraph */
.left-bar-grey {
	border-left: 4px solid #919ba5;
	padding-left: 15px;
	padding-top: 2px;
	padding-Bottom: 2px;
	font-size:16px !important;
	background-color: #e9ebed;
}

/* Style for single instructions */
.instruct {
	border-left: 4px solid #360065;
	border-top: 1px solid #360065;
	border-bottom: 1px solid #360065;
	border-right: 1px solid #360065;
	padding-left: 15px;
	padding-top: 2px;
	padding-bottom: 5px;
	margin-bottom: 5px;
	font-weight: 500;
	font-size:16px !important;
	color: #360065;
}
/* Lime left bar alongside paragraph */
/*.return {
	border-left: 4px solid #7c942a;
	padding-left: 15px;
	padding-top: 2px;
	padding-Bottom: 2px;
	font-size:16px !important;
	font-weight: 500;
	background-color: #F7FBEC;
	color: #444444 !important;align-content
}*/

/*Create a 2-column layout with text aligned to the left*/
#col2 {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    text-align: left;
	-webkit-column-gap: 3px; /* Chrome, Safari, Opera */
    -moz-column-gap: 5px; /* Firefox */
    column-gap: 3px;
}

/*Create a 3-column layout with text aligned to the left*/
#col3 {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    text-align: left;
}

/*Make the headings inside the page nicer, to be used with h2 9 (was 00a2bd)*/
.page-subheading {
    color: #8427e2 !important;
}
/*OBSOLETE - Make the headings inside the page nicer, to be used with h4 on component reference*/
.page-subheading2 {
    color: #919ba5 !important;
    border-bottom: 1px solid #aaa;
    padding: 0px;
    clear: both;
    font-weight: bold !important;
	font-size: 16px !important;
	text-transform: uppercase;
}

/*OBSOLETE - Make the headings inside the page nicer, to be used with h1*/
/*.page-subheading3 {
    border-bottom: 1px solid #aaa;
    padding: 5px;
    clear: both;
    font-weight: 500 !important;
}*/

/*Paragraph style that looks like a heading so it doesn't appear in TOC */
.no-toc-heading {
	font-size: 20px !important;
	color: #360065;
	font-weight: 500;
	line-height: 1.45em !important;
	padding-top: 20px;
	margin-bottom: 10px !important;
}

/* For bigger text in articles */
.intro-text  {
	/*text-transform:none;*/
	font-size:16px !important;
	line-height: 1.5em !important;
	/*color:#00a1ed !important;*/
}

/* For publish date text in articles */
.pagedate  {
	font-style: italic;
	color:#999999 !important;
}

/* For no search results page */
#content p.search-results  {
	font-size:20px !important;
	color:#666666 !important;
	margin-top: 30px;
}

/* For semibold intro paragraph in articles */
.overview  {
	font-size:16px !important;
	line-height: 1.5em !important;
	font-weight:600;
}

/* Like Intro text but without the space before or after, a bit like a term-definition pair */
.no-space-text  ul > li{
	font-size:16px !important;
	list-style: none !important;
}

.dl-term {
	display: block !important;
	margin-bottom: 0px !important;
	font-size: 16px !important;
	line-height: 1.3em !important;
    font-weight: bold;
}
.dl-def { 
	display: block !important;
	margin-top: 0px !important;
	font-size: 16px !important;
	line-height: 1.3em !important;
}

/* A style for notes */
.note {
    border-left: 4px solid #cd92ff;
	padding-left: 15px;
	padding-top: 2px;
	padding-Bottom: 2px;
	font-size:16px !important;
	font-weight: 500;
	background-color: #f5e9ff;
	color: #444444 !important;
}
/* Another style for notes */
.note2 {
    font-weight: 500;
    font-size: 16px !important;
    padding: 5px;
}

/* Don't know what these are for? */
.new-features  {
    background: rgba(200,200,200,0.3);
	width: 740px;
}
.new-features  p{
    font-weight: 500;
    font-size: 14px !important;
    padding: 5px 5px 0px 5px;
	margin-bottom: 3px !important; 
}
.new-features  ul{
    font-weight: 500;
    font-size: 14px !important;
    padding: 0px 5px 5px 5px;
	line-height: 1.5em !important; 
}

/* Font awesome icon overlays - no longer used?*/
#enlarge{
    float: right;
    z-index:1;
}

/* New style for Best Practices, similar to the blockquote */
.best-prac { /* Used for setting up the div*/
	border-left: 4px solid #72c9f8 !important;
	margin-top: 30px;
	padding-left: 15px;
	padding-top: 2px;
	padding-Bottom: 2px;
	font-size:16px !important;
	background-color: #e3f4fe !important;
	/*color:#444444 !important;*/
    font-weight: 500;
}
.best-prac-text  {
	font-size:18px !important;
	line-height: 1.45em !important;
	/*color:#444444 !important;*/
	font-weight: 500;
	padding-left: 20px;
}
.best-prac-desc  {
	font-size:16px !important;
	line-height: 1.45em !important;
	/*color:#444444 !important;*/
	font-weight: 500;
}

.code-fragment {
    font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace !important;
	/*color: #00A1ED;*/
	background-color: #eeeeee;
}

/*Change colour of menu text on hover*/
li#menu-item-4262 a:hover {/*explorer*/
	color: #FE12F0;
	font-weight:600;
}
li#menu-item-63843 a:hover {/*aplus*/
	color: #D25C0F;
	font-weight:600;
}
li#menu-item-49350 a:hover {/*field op*/
	color: #249FF4;
	font-weight:600;
}
li#menu-item-45059 a:hover {/*shift log*/
	color: #BBC7D8;
	font-weight:600;
}
li#menu-item-44250 a:hover {/*sentinel*/
	color: #9898FF;
	font-weight:600;
}
li#menu-item-47393 a:hover {/*verify*/
	color: #18B57C;
	font-weight:600;
}
li#menu-item-44363 a:hover {/*well test*/
	color: #FF9855;
	font-weight:600;
}
/*
li#menu-item-4262 a:hover {/*reconcile
	color: #36BDC9;
font-weight:600;
}
li#menu-item-4262 a:hover {/*case management
	color: #82C6FF;
font-weight:600;
}*/

/* --------------------------------------------------------------------------------*/
/* -----------------------------Customisations for plug-ins ---------------------- */
/* --------------------------------------------------------------------------------*/

/* Add a loading spinner for the Image Map plugin */
div.loading {padding: 7px 19px 8px 50px; background: url(../../../wp-includes/images/loading.gif) no-repeat 11px 7px;}
div.page {overflow:visible;}

/* Use with Menu Image plugin to persist the hover icon state to the active state */
.current_page_item a .menu-image {
	opacity: 0 !important;
}
.current_page_item a.menu-image-hovered img.hovered-image {
	opacity: 1 !important;
}

.menu-item a.menu-image-title-below.menu-image-not-hovered img,
.menu-item a.menu-image-hovered.menu-image-title-below .menu-image-hover-wrapper {
    display: block;
    padding-bottom: 0px;
    margin: 0 auto !important;
}


/*Make the taxonomy selection drop-downs wider*/
.widget-container select {
	width:100%;
	padding-bottom: 6px;
	padding-top:6px;
}
/*Make the taxonomy selection labels more padded*/
.widget-container label {
	padding-bottom: 3px;
	padding-top:10px;
}
/*Make the taxonomy selection submit button wider*/
.widget-container input {
	width:75%;
	margin-left:10px;
}

/* Table of Contents Plus style changes */
.toc_title {
	font-weight: 600;
}
#toc_container {
	float: right;
	background-color: #fafafa;
	padding-top: 5px;
	padding-left: 5px;
	padding-right:2px;
	margin-left:5px;
	width: 230px;
}
/* Make the list bullet indents look better in the TOC */
.entry-content ul li ul {
	margin-left:3px;
	padding-bottom: 5px;
	/*list-style: square !important; Not working*/
	}
.toc_list {
	line-height: inherit !important;
	}

/* RSS Widget Styling */
#footer #rss-2 .widget-title
{
	background-color: #fff !important;
	border: 0 !important;
	line-height: 1.1em;
	padding-top:2px;
	padding-bottom: 3px;
}
#footer  #rss-2 .widget-title a {
	color: #1A1B1D;
	text-transform:none;
	font-size:20px;
}
#footer  #rss-2 .widget-title a:hover {
	text-decoration:none;
}
#footer  #rss-2 .widget-title img
{
	width:14px;
	height:14px;
	margin-bottom: 4px;
}
#footer #rss-2 ul li a {
	color: #737373;
	font-size: 18px;
}
/* End RSS Widget Styling */

/* Subscribe2 signup form */
.subscribe p {
	text-align:center;
}
.subscribe label {
	display: none;
}
.subscribe input[type="text"] {
	width: 100%;
	margin-left:0;
	margin-bottom: 10px;
}
.subscribe input[type="submit"]{
	margin: 0 auto;
}
/* End Subscribe2 signup form */


/* Related Posts styling */
.rp-heading {
    font-weight: 500 !important;
	color: #2e7d32 !important;
	text-transform: uppercase !important;
	font-size:20px !important;
}
.crp_related {
    border-top: 1px solid #eeeeee;
	padding-top: 15px;
	margin-top:50px !important; 
	border-bottom: 1px solid #eeeeee;
	padding-bottom: 50px;
	margin-bottom:50px !important;
}

/* Taxonomy Drilldown styling */
.taxonomy-drilldown-reset { /* Hide the reset button */
	visibility: hidden;
}

/* WP Glossary Styling */
.wpg-please-select { /* hide the default intro text*/
	color: #ffffff;
	visibility: hidden;
}
.glossary-menu-atoz{
	text-transform: uppercase;
	padding-top: 20px;
	border-bottom: 0px solid #ffffff;
	margin-left: 0 !important;
	margin-bottom: 0px !important;
	line-height: 0 !important;
	height: 35px !important;
	vertical-align: middle !important;
}
.glossary-menu-item {
	/*text-decoration: none;*/
	list-style: none;
	font-size: 28px;
	font-weight: 600;
}
.atoz-li:hover{ /*Underline on hover*/
	text-decoration: underline;
}
.glossary-atoz { /*Add space above the terms after clicking on a letter*/
	padding-top: 25px;
}
.glossary-atoz:hover { /*Underline on hover*/
	text-decoration: underline;
}
.atozmenu-empty{
	color: #ccc;
}
.atozmenu-off{
	color: #ffffff;
    background-color: #ffffff
}
.atozmenu-off:hover{
	color: #ffffff;
	background-color: #ffffff
}
.atozmenu-on{
	text-decoration: underline;
}
.atozitems-off{
	display: none;
}
.tooltip {
	display:     none;
	background:  #f4f4f4;
	font-size:   1.1em;
	padding:     10px;
	color:       #333;
	border:      1px solid #ddd;
	line-height: 1.5em;
	width:       20%;
}
.glossary-list { /* display list horizontally in columns*/
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}
.glossary-item {
	display: inline-block !important;
	float:left;
	margin-right: 20px !important;
	font-size: 18px;
	line-height: 1.7em;
}
.glossary-item-desc .continue-reading-link { /* Style the Read More link */
	display: inline;
	padding: 0px;
	text-transform: none;
	visibility: hidden;
}
#terms-wpglossarygroup h4{
	visibility: hidden;
}

.syntaxhighlighter code {
	font-size: 16px !important;
	font-family: Monaco, "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
}


/* ========= IDEAS AND TESTING BELOW THIS LINE ================= */

/*Idea for components page, list of components with transitions overlay*/
ul.img-list { /*style the image list to remove bullets*/
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left; /*left-align the list*/
}
ul.img-list li { /*style the image list to line up images*/
  display: inline-block;
  height: 150px;
  margin: 0 1em 1em 0;
  position: relative;
  width: 150px;
  text-align: center; /*center the text*/
  }
span.text-content { /*Place the text over the images with a partially transparent background*/
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 150px;
  font-size: 12px;
  padding:5px; /*Add padding so the text isn't so close to the border*/
}
span.text-content span { /*align the image with the text*/
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
span.text-content { /*Show the text on hover*/
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 150px;
  opacity: 0;
}
ul.img-list li:hover span.text-content { /*play with the opacity on hover*/
  opacity: 1;
}
span.text-content { /*Animation for the text*/
  background: rgba(0,0,0,0.7);
  color: white;
  cursor: pointer;
  display: table;
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 150px;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}
span.text-content a{
  color:#ffffff !important;
}
/*
a:link{
color: #0076DC !important;
}*/