body{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 500;
    line-height: 1.428;
    /*color: inherit;*/
    font-size:16px;
    color: darkslategrey;
	letter-spacing:1px;
}


/*hyperlink and anchor tag styles*/

/* header tag styles */
h1.carousel-txt{
    text-align: left;
    font-size: 30px;    /* old */
    font-size: 2.5vh;   /* IE9 */
    font-size: 3vmax;
    /*font-size: 1vmin;*/
}

.page-header h1{
    font-size:1.69em;
    font-family: 'Titillium Web', sans-serif;
    font-weight:bold;
}

h2.carousel-txt{
    text-align: left;
    font-size: 22px;    /* old */
    font-size: 2.5vh;   /* IE9 */
    font-size: 2.5vmax;
}

.page-header h2{
    font-size:1.1em;
    letter-spacing: 2px;
    /*text-indent: 50px;*/
    word-spacing: 5px;
}

.page-header{
	border-bottom:0;
}

h3{
font-size:100%;
font-weight:bold;
}


h4{
font-size:90%;
}

h5{
font-size:105%;
}

h6{
font-size:22px;
}


p{
    font-size: 1em;
    text-align: left;
    letter-spacing: 1px;
    line-height: 1.3;
    word-spacing: 5px;
}

@media (max-width: 1099px) {
    p{
        font-size: .9em;
    }
}





.google-font{
    font-family: 'Titillium Web', sans-serif;
}

h3Err{
font-size:80%;
font-weight:bold;
color:#CC0000;
margin:0px;
padding:0px;
}



/*  General classes  */
.DisplayAsBlock{
display:block;
}

.center{
    margin-left:auto;
    margin-right:auto;
}

.no-border{
border:none;
}

.inline{
display:inline;
}

.relative{
position:relative;
}


.block{
    display: block;
}

.float-left{
float:left;
}

.clear-right{
clear:right;
}

.clear-left{
clear:left;
}

.italic{
font-style:italic;
}

.bold{
font-weight: bold;
}

.zindex100{
z-index:100;
}

.cursor_hand {
    cursor: pointer;
}

.carousel-margin{
    padding-left: 9.99999%;
    padding-right: 4.99999%;
}



/*Start of header css control, above the content*/








/* this is being used with the button that when clicked pulls out the side panel; this makes the button fixed to the screen so that it stays there even when the user scrolls */
.absolute-centered-left{
    position: fixed;
    display: block;
    left:5px;
    top: 49.99999%;
    z-index: 100;
}




.row-centered {
    text-align:center;
}

/* when using this some elements will NEED to set their width*/
.col-centered{
    margin: 0 auto;
}

/*a test class to see the grid when working with bootstrap*/
.bg-color{
    background-color: cadetblue;
}

.bg-color-opacity{
    /*opacity:0.6;*/
    background-color: rgba(0, 85, 128, 0.6);
}

.bg-color-opacity2{
    /*opacity:0.6;*/
    background-color: rgba(0, 85, 128, 0.8);
}

.full-width{
    width:100%;
}





.more-margin{
    margin-top: 5%;
    margin-bottom: 5%;
}

.more-margin-px{
    margin-top: 5px;
    margin-bottom: 5px;
}

.more-margin-top{
    margin-top: 2%;
}

.more-xl-margin-top{
    margin-top: 4%;
}

.more-margin-bot{
    margin-bottom: 2%;
}

.less-margin-bot{
    margin-bottom: -0.4%;
}

.extra-pad-p p{
    padding-top: 1.5%;
    padding-bottom: 1.5%;
}

.margin-none{
    margin: 0 0 0 0;
}



/* Text Separators  */
.main-content-img-sep{
    display:block;
    position:relative;
    padding:0;
    margin:30px auto 30px auto;
    background-image:url(../images/content-sep.jpg);
    width:390px;
    height:1px;
}











/* main menu image area */
.main-menu-img-opaque{
    width: 100%;
    height: 100%;
    opacity: 0.3;

}

.main-menu-img-opaque-background {
    position: absolute;
    /*top: 0px;
    left: 0px;*/

    object-fit:cover;
    object-position: top right;
}

@media (min-width: 768px){
    img.navbar-brand{
        margin: 0 auto;
        /*width:100%;*/
        height:auto;
    }

    div.navbar-brand{
        display: none;
    }

    .menu-logo-mobile {
        display: block;
        margin: 10px auto 0 auto;
        float: none;
    }
}

@media (max-width: 990px){
    img.navbar-brand{
        position: static;
        margin: 0 auto 0 auto;
    }

}

.collapse.in {
    display: block;
    width: 100%;
}

/*@media (min-width: 768px){*/
    /*.center-the-nav{*/
        /*float:left;*/
        /*width:100%;*/
        /*margin: 0 auto;*/
        /*display: compact;*/
        /*table-layout: auto;*/
    /*}*/
/*}*/


@media (min-width: 1200px){
    .container {
        /* width: 1170px; */
    }
}
@media (min-width: 992px){
    .container {
       width: 970px;
    }
}

.navbar-header{
    /*width:100%;*/
}









/* control the menubar fonts */
.navbar-brand{
    font-size: 1em;
    font-family: 'Titillium Web', sans-serif;
    font-weight: bold;
}

.navbar-nav{
    font-size: 1.1em;
    font-family: 'Titillium Web', sans-serif;
    margin:0 0 0 0;
}

.dropdown-menu{
    font-size: .9em;
    font-family: 'Titillium Web', sans-serif;
}

.navbar-center{
    margin-left: auto;
}


/*@media (min-width: 720px){*/
    /*.navbar-nav{*/
        /*font-size: .9em;*/
        /*font-family: 'Titillium Web', sans-serif;*/
    /*}*/
/*}*/











/* used on the modules page for img cation */
.mode-det-h4{
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:150px;
    display:inline-block;
}

div.panel-body.img{
    margin-right:30px;
}













/*On Downloads Page*/

.main-content-heading{
    font-weight: bold;
    margin:0 0 12px 0;
}

.main-content-img-left{
    float:left;
    display:block;
}

.main-content-text-alt{
    display:block;
    margin:0 0 12px 0;
    clear: right;
}

.middle-content-heading-link{
    display:block;
}

/* this is just a quick fix for the downloads page*/
table{
    margin-top: 15px;
}

.fix-downloads a{
    display:block;
    margin:0 0 30px 0;
    left:0;
}



/*Videos Fix CSS*/
.vid_txt{
    /*float:left;*/
    display:block;
    clear: left;
    margin:0 0 12px 0;
    width:100%;
}

.vid_txt:hover{
    border: 1px solid #ccc;
    border-radius: 10px;
}

.vid_tab_header{
    font-weight: bold;
    margin:60px 0 12px 0;
    display:block;
    clear:both;
}

.vid_tab_headerU{
    display:block;
    clear:both;
    font-weight: bold;
    margin:20px 0 12px 0;
}

.vid_sub_txt{
    display:block;
    clear:right;
}

.vid_sub_txt2{
    margin:0 0 0 0;
    display:block;
    clear:right;
}

















.bar-one-img{
    display: block;
    background: url(../images/bg-header-bar.gif) repeat;
    width:100%;
    height: 16px;
}

.bar-two-img{
    display: block;
    background: url(../images/top-menu-bar.jpg) repeat;
    width:100%;
    height: 51px;
}

.footer-top-bar-img{
    display: block;
    background: url(../images/footer-top-bar.gif) repeat;
    width:100%;
    height: 10px;
}












/* Home Page Text Styles */

.home-content-heading{
    font-style: italic;
    font-weight: bold;
    font-size: 1.1em;
}

@media only screen and (max-width: 768px){
    .home-content-heading{
        font-size: 1em;
    }
}


.home-content-subheading{
    font-weight: bold;
}

.body-content-normal-heading{
    display:block;
    padding:0;
    margin:40px 0 10px 0;
    color:#666;
    font-weight:bold;
    word-spacing:2px;
    line-height:150%;
    font-size:110%;
}

/* not used yet 7/12/16 nb */
.home-content-normal-text{
    font-style:normal;
    font-size: large;
}













/*after the jumbo we display a body content heading and regular body text but we want it to stand out more than the rest of the body.  these control the look of that area*/
.body-content-heading{
    font-style: italic;
    font-size: larger;
}

.body-content-subheading{
    font-weight: bold;
}

.body-content-normal-heading{
    display:block;
    padding:0;
    margin:40px 0 10px 0;
    color:#666;
    font-weight:bold;
    word-spacing:2px;
    line-height:150%;
    font-size:110%;
}

/* not used yet 7/12/16 nb */
.body-content-normal-text{
    font-style: italic;
    font-size: larger;
}

.right-side-menus{
    padding:4px 15px 4px 15px;
    font-size: .9em;
}

.footer-menu{
    padding:3px 15px 3px 15px;
}


/*this class is used on Implementation Strategy page, from old html style */
.middle-content-heading-text{
	display:block;
	font-weight:bold;
	font-size:1em;
	line-height:2.5;
	letter-spacing:2px;
}
















/**/
.resp-img-text-header{
    text-align: center;
    display: block;
    width: 100%;
}





















.footer-text{
    font-size: small;
}

.copyrights-text{
    font-size: medium;
}


/*address*/
.padd{
    font-family:'arial', sans-serif;
    Font-size:125%;
    Text-align:center;
    color:#000000;
}

/*phone*/
.phone{
    font-family:'arial', sans-serif;
    Font-size:125%;
    Text-align:center;
    color:#000000;
    font-weight:bold;
}









/* tabs area */
.tabs-img-opaque{
    width: 100%;
    height: auto;
    opacity: 0.1;

}

.tabs-img-opaque-background {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index:-1;
    object-fit: cover;
    object-position: top right;
}

.nav-tabs {
    font-size: .9em;
}

.tab-border{
    border: 1px solid #ddd;
    border-top-color: transparent;
}

.tab-content{

}





/* this class is used in the img responsive area where we have the software type links/img/buttons*/
.carousel-caption {
    right: 5%;
    left: 5%;
    padding-top: 5%;
    padding-bottom: 5%;
}
















/*Templates Styles*/
.social-img{
    float: left;
    margin: 0px 25px 15px 0px;
}

@media only screen and (max-width: 500px){
    .social-img {
        margin:2px 2px 2px 2px;
        clear:both;
    }
}

@media only screen and (max-width: 500px){
    .social-body{
        clear: both;
    }
}

















/*Override the Bootstrap NavBar Collapse Code
Soon in Bootstrap 4 there will be an easier way to do this
and we will not need this code*/
@media (max-width: 848px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}














/******************/
/******************/
/* TinyMCE Editor */
.adminEditNotification{
	position: fixed;
    top: 0;
    right: 0;
    background-color: yellow;
	z-index:110;
}

.affix{
  top: 0;
  width: 100%;
}

.affix-top{
  width: 100%;
}

.affix-bottom{
  position: absolute;
  width: 100%;  
}

.tinyMCEEditorArea{
	/*display:block;
	
	left: 0;
	top: 50px;
	
	float:left;
	width: 100%;*/
	z-index:100;
	background-color:white;
}

/* these classes go on elements that are editable, they show this */
img.adminEditmode:hover {
	-moz-box-shadow: 0 0 10px yellow; 
	-webkit-box-shadow: 0 0 10px yellow; 
	box-shadow: 0 0 10px yellow;
	cursor:url(http://coveimages.s3.amazonaws.com/Pencil-icon.png) 2 30, auto;
}

.adminEditmode:hover {
	background-color: yellow;
	cursor:url(http://coveimages.s3.amazonaws.com/Pencil-icon.png) 2 30, auto;
}

.adminEditmode:hover >p{
	background-color: yellow;
	cursor:url(http://coveimages.s3.amazonaws.com/Pencil-icon.png) 2 30, auto;
}


/* inside of the myTemplates templates */
.cms-section-title{
	margin:initial;
}

.cms-section-body{
	
}

.cms-section-footer{
	
}


/****************/
/*  animations  */
/* used for animations in Angular */
.editNotificationMessageArea{
	transition: all linear 1s; 
	position:absolute; 
	display:relative;
	top:30%; 
	left:39%; 
	/* width:200px; */
	height:100px; 
	z-index:120;
	opacity: 1;
}

.editHelpArea{
	transition: all linear 1s; 
	position:fixed;
	display:relative;
	top:5%; 
	left:0; 
	margin:20px; 
	z-index:120;
	opacity: 2;
	overflow: auto;
	height: 90vh;
}

.blackTransparentBackground{
	transition: all linear 1s;
	position: fixed;
    width: 100%;
    height: 1000%;
    top: 0px;
    background-color: black;
    left: 0px;
	opacity: .7;
	z-index:100;	
}

/* this tells the angular animator what to do to the element when it is to animate it, here i have it to fade out and in */
.ng-hide {
  /*height: 0;
  width: 0;*/
  background-color: transparent;
  /*top:-200px;
  left:39%;*/
  opacity: 0;
}










/* THEME CSS STYLES
**  This area was created to decern which classes are essential to creating a new look within the website pages */

.jumbotron {
    background-image: linear-gradient(to bottom,#efe5c3 0,#afcee9 100%);
}

.footer-area-background {
    background-image: linear-gradient(to bottom,#afcee9 0,#efe5c3 100%);
	margin-top:30px;
}