﻿/* This style sheet will override the base.css */

/* media query for page sub-title mobile  This needs to stay at the top to work ----------------------------------------------------------------------------*/

@media (max-width: 496px) {div#sitename-upper a, div#sitename-upper a:visited, div#sitename-upper a:hover {
	} 
	
	#sitename h1 {
	font-size: 1.15em;
font-weight:700 !Important;
margin-top:-30px;	
}}

@media (max-width: 768px) {div#sitename-upper a, div#sitename-upper a:visited, div#sitename-upper a:hover {
	} 
	
	#sitename h1 {
	font-size: 1.15em;
font-weight:700 !Important;
margin-top:-30px;	
}}

/* End media query ... Make logo right size and position */

#seal img { 
max-height:75px!Important;
max-width: 75px!Important;
margin-top:-10px;
margin-left: -15px;
}
div#header {
background-color: rgba(0,112,192,1);
}

/* Set the header-graphic*/

#header-graphic {
background-size: 100% 300px!Important;/ /* Remove this to slide image to one side*/ 
background-position: left center; 
position: absolute; /*aligns image under navigation*/ 
/*top:120px; Moved this to JS file because it was removing the links. */
}

/* Add format to large banner image - This was working but stopped for some unknown reason. */
img[src="/_layouts/15/images/WebHC/clear.png"] {
border: 0px solid transparent!important;
display:none!Important;
}

/* Aligns the sitename to the right --------------------------------------------------------------------------------------*/
/* Changing color of nav bar */
#navbar { 
position: absolute;
right: 0px;
top: 125px;
/*max-width: 1300px!Important; this sets the nav to the right a specific size*/
text-align: right;
background-color: rgba(37,46,130, 1);
/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
border-bottom: 0px solid #ccc;
padding: 0px 3%;/* can add px to nav bar if needed. */
}

/* Change nav format */
.tab { 
text-transform: uppercase;
text-align: right;
		border-style:solid;
		border-height:2px;
		border-right-color: rgba(255,255,255,.35);
		border-top-color:transparent;
		border-bottom-color:transparent;
		border-left-color:transparent;
}

/* Changing nav text  -----------------------------------------------------------------------------------------------------*/
#nav li > .tab {
color:white;
text-shadow: 1px 1px 2px rgba(0,0,0,.55);
	font-family: sans-serif;
		font-size: .8em;
		font-weight:600;
}

/* Make page content extend 100% */
div.wrap {
	width:100%;
}


/* Change Paragraph font to HC serif */
 p {
    /*font-family: "Times New Roman", Times, serif;*/
	color: Dimgray;
 }
 /* Make bullets move to right  */
 ol {
margin-left:20px;
}

/* Change the upper title font style */

div#sitename-upper a, div#sitename-upper a:visited, div#sitename-upper a:hover{
color:rgba(255,255,255,1)!Important;
	font-size: .9em;
	font-family: sans-serif;
/*font-weight:600 !Important;	*/
text-transform: uppercase;
margin-top: -20px;
} 
/* Changes sub-title font color and make bold*/
#sitename h4 {
	font-size: 1.5em;
	color:rgba(183,180,96,1) !Important; 
	border-width: 0px!Important; /*Remove h4 border on sitename*/
	top: 24px!Important;
/*font-weight:600 !Important;	*/
}

div.featured-copy {
	width: 100%!Important;
}
/* Make space to the left of the right column smaller.
.qtr1 { 
width: 15%;
}*/
/* Making all the fonts in body dimgray */

body {
	color:dimgray;
}

/* Align Body content section  -----------------------------------------------------------------------------------------------------*/
#Content{
margin-top:100px!important;
margin:auto;
width:100%;
}

#enterinfo {
	z-index:10;
	margin-bottom:55px;
	width: 70%;
	padding: 15px;
	border-radius: 4px;
	background-color: white;
	box-shadow: 0px 12px 24px 0px rgba(54,76,89,0.12);
	border: solid 1px rgba(54, 76, 89, 0.04);
	
}
 
/* add margin to searchbox*/
#searchInputBox {
	margin-top:2px;
}

/* Changing search format  -----------------------------------------------------------------------------------------------------*/


.ms-srch-sb >input {
color:white;
width: 130px;	
}
.mx-mpSearchBox {
	width: 200px;/*remove space to the left of search box*/
}
.ms-srch-sb-border { 
border: 1px solid #ffffff;
}
/* Make title large and white*/
.h2 {
    position: absolute;
    left: 0;
    top: 250px;
    width: 100%;
    text-align: center;
    font-size: 3.0em;

color:white;
text-transform:uppercase;
}


/* Review Location maps review feature * this is not working...fix later/ 

div .review-box iframe{
display: none!important;	
}

/*Format the Page title*/
#customPageTitle { 
    position: absolute;
    left: 0;
    top: 270px;
    width: 100%;
    text-align: center;
    font-size: 3.0em;
	text-shadow: 0px 0px 5px rgba(0,0,0,.15);
color:white;
/*text-transform:uppercase;*/
}

/* Make page subtitle formatted */

/* Format page titles with line ------*/
h4{
    font-size: 2.0em;
	border-style: none none solid none;
border-color: rgba(210,210,210,1)!important;
color: #000000!Important;
border-width: 1px!Important;
margin-top: 15px;
margin-bottom:20px;
width:100%;
}


/* Format page titles no line ------*/
h4.Subtitle {
border-style: none none solid none;
border-color: rgba(210,210,210,1)!important;
color: #000000!Important;
border-width: 0px!Important;
margin-top: 15px;
margin-bottom:20px;
width:100%;
}


/* Change chrome title to all caps. */

.ms-webpart-titleText {
	text-transform:uppercase;
}

/*change navigation menu left column to all caps. */
/*.dropdown-link { */
/*text-transform:uppercase;*/
/*}*/

/*change navigation menu to all caps. */
/*li.dfwp-item { */
/*text-transform:uppercase;*/
/*}*/

.pagesubtitle {
        color: rgba(12,114,181,1);
        font-size: 1.45em;
        margin: 0 0 0 0;
        padding: 0px 0px 0px 0px;
		}

/* Add styles for social links above footer */

.colorBox {
margin: auto;
background-color: black;
color:white;
margin-top:-20px;
padding:20px;
padding-bottom: 15px;
}
.colorBox p { 
color: white! Important;
}

/* Formatting the HR--------------------*/
hr {
    display: block;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    margin-left: auto;
    margin-right: auto;
    border-style: none;
    border-width: .5px;
    height:1px;
    border-width:1;
} 


/* Align body content center at percent */
div#content { 
float: right!Important;
padding:20px!Important;
width:90%;/*This controls the width of customLeftNav and customRightContent. If you encrease this then encrease the customRightContent width */
/*margin-top:100px;*/
} 
#featured-item { 
padding: 10px;
}

/*Align left and right div of page content for IntHCCSCDCustom2 Layout*/
#customPageContent {
float: left;
width: 100%;
} 
#customLeftNav {
float: left;
width: 20%;
padding:15px;
min-width:245px;
width:250px;
margin-top: 45px;
margin-right:20px;
background-color:rgba(235,235,235,1);
border-radius: 25px;
} 

#customRightContent {
float: left;
width: 65%; /*If this percent is encreased then #content needs to encrease*/
padding-right:50px;
padding-top:20px;
} 
#customScript {
float: left;
width: 100%
} 

/* Location geolocation Map accent text size smaller */

.ms-accentText, .ms-accentText:visited  h2 { 
font-size:1.25em;
}

/* make colorbox footer links a brighter color ...this IS NOT working I added inline style in the JS default file to achieve the link color ..... */

.colorBox:link a {
	color:white!Important;
}
/* make colorbox footer links a brighter color ...this IS NOT working..... */

.colorBox:active  a {
	color:red!Important;
}

/* make colorbox footer links a brighter color ...this IS working..... */
.colorBox:hover  a {
	color:LightSkyBlue!Important;
}

/* make colorbox footer links a brighter color ...this IS NOT working..... */

.colorBox:link a {
	color:white!Important;
}

/* make bullets move to the right */
ul {
	margin-left:20px;
}


/* media query for page mobile  Warning! ...this needs to stay at the bottom to work -----------------------------------------------------------------------------*/
@media (max-width: 496px) { 
#customPageTitle { 
    position: absolute;
    left: 0;
	float:left;
    top: 250px;
    width: 100%;
    text-align: center;
    font-size: 2.7em;
color:white;
text-transform:uppercase;
}
#customRightContent {
width: 100%!Important; /*If this percent is encreased then #content needs to encrease*/
padding-right:5px;
} 
.officeimage img  {	
height:100%;
width:100%;
}
 
#enterinfo {
	z-index:10;
	margin-bottom:55px;
	width: 100%;
	padding: 15px;
	border-radius: 4px;
	background-color: white;
	box-shadow: 0px 12px 24px 0px rgba(54,76,89,0.12);
	border: solid 1px rgba(54, 76, 89, 0.04);
	
}

	} 
	
	/* media query for page mobile  Warning! ...this needs to stay at the bottom to work -----------------------------------------------------------------------------*/
@media (max-width: 960px) { 
#customRightContent {
width: 100%!Important; /*If this percent is encreased then #content needs to encrease*/
padding-right:5px;
} 


/* Add mobile friedly image on the Contact locations page  */
.officeimage  {	
padding: 10px;
float:right;
margin-top:10px;
}


/* Adjust iframe locations for mobile */

.locationmap iframe{
	height:275px;
	width:100%;
}

#enterinfo {
	z-index:10;
	margin-bottom:55px;
	width: 100%;
	padding: 15px;
	border-radius: 4px;
	background-color: white;
	box-shadow: 0px 12px 24px 0px rgba(54,76,89,0.12);
	border: solid 1px rgba(54, 76, 89, 0.04);
	
}

/* Set the header-graphic to be mobile */

#header-graphic {
/*background-size: 100% 325px!Important;/  Remove this to slide image to one side*/ 
background-position: left center; 
width:1000px;
overflow: hidden;
position: relative; /*aligns image under navigation*/ 
top: 120px; 
height:200px;
}
/* Fix mobile menu responsive */
#nav-responsive {
	padding-top: 34px;
}
	
}
	/* media query for page mobile----------------------------------------------------------------------------*/
@media (max-width: 1260px) { 
#customRightContent {
width: 100%!Important; /*If this percent is encreased then #content needs to encrease*/
padding-right:5px;
} 
	
}