/* Custom CSS - The CSS properties in this stylesheet will over-write any original template styles if the same class names are used in addition to custom styles which can also be added. 
===============================================================
CUSTOM STYLES FOR OSHPD
===============================================================

CONTENTS
* SITE-WIDE / UTILITY
* USER INTERFACES
* HEADER / NAVIGATION
* HOMEPAGE
* SOCIAL MEDIA (RIGHT-COLUMN)
* SERVER WARNING BANNER
* RESPONSIVE TABLEAU
===============================================================

*/

/*======================
* SITE-WIDE / UTILITY
======================*/

/*********
* PRINTING
*/
@media print{
	.tab-content{
		display:block !important;
	}
}

/*********
* SPACING
*/
/* margins */
/* nones */
.margin-none		{	margin:0 !important;		}
.margin-top-none	{	margin-top:0 !important;	}
.margin-right-none	{	margin-right:0 !important;	}
.margin-bottom-none	{	margin-bottom:0 !important;	}
.margin-left-none	{	margin-left:0 !important;	}
/* 1em */
.margin-1em			{	margin:1em !important;			}
.margin-top-1em		{	margin-top:1em !important;		}
.margin-right-1em	{	margin-right:1em !important;	}
.margin-bottom-1em	{	margin-bottom:1em !important;	}
.margin-left-1em	{	margin-left:1em !important;		}
/* -1em */
.margin-n1em		{	margin:-1em !important;			}
.margin-top-n1em	{	margin-top:-1em !important;		}
.margin-right-n1em	{	margin-right:-1em !important;	}
.margin-bottom-n1em	{	margin-bottom:-1em !important;	}
.margin-left-n1em	{	margin-left:-1em !important;	}

/* paddings */
/* nones */
.padding-none			{	padding:0 !important;			}
.padding-top-none		{	padding-top:0 !important;		}
.padding-right-none		{	padding-right:0 !important;		}
.padding-bottom-none	{	padding-bottom:0 !important;	}
.padding-left-none		{	padding-left:0 !important;		}
/* 1em */
.padding-1em		{	padding:1em !important;			}
.padding-top-1em	{	padding-top:1em !important;		}
.padding-right-1em	{	padding-right:1em !important;	}
.padding-bottom-1em	{	padding-bottom:1em !important;	}
.padding-left-1em	{	padding-left:1em !important;	}


/********
* SIZING
*/
.fit-img { max-width:100%; }
.full-width { width:100%; }

/********
* FONTS
*/
@font-face {
  	font-family: 'Glyphicons Halflings';
 	src:  url('/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/fonts/glyphicons-halflings-regular.ttf') format('truetype');
}
#product-listing td a span:nth-child(2) { font-size:150%; }
#product-listing td a { text-decoration:none; }
#product-listing td:before { margin-top:3px; }
#product-listing .xdetails { font-size: 75%; }

/********
* HEADINGS
*/
.heading-overstated {	/* h5 styling from 2013 template */
	font-size: 1.2em;
	font-weight: bold;
	font-family: 'Arial Narrow', Arial, sans-serif;
	margin: .5em 0em;
}

.heading-understated {
	font-size: 1.2em;
	font-family: 'Arial Narrow', Arial, sans-serif;
	margin: .5em 0em;
}

.heading-subsection {
	font-size: 1.2em;
	font-family: 'Arial Narrow', Arial, sans-serif;
	margin: .2em 0em;
	border-bottom: 1px solid #CCC;
}

/********
* LISTS
*/
/* Nested Lists */
/* remove extra padding */
[class^="list-"] li > ul { margin-bottom: 0px !important; }
[class^="list-"] li li:last-child { padding-bottom: 0px !important; }

/* default disc */
.list-disc { margin-left: 2em; }
.list-disc>li {				/*removes bullet image and fixes spacing*/
	background: none;
	list-style-type: disc;
	padding-left: .3em;
}

/* decimal */
.list-ordered { margin-left: 2em; }
.list-ordered>li {				/*removes bullet image and fixes spacing*/
	background: none;
	list-style-type: decimal;
	padding-left: .3em;
}

/* uppercase alpha */
.list-upper { margin-left: 2em; }
.list-upper>li {				/*removes bullet image and fixes spacing*/
	background: none;
	list-style-type: upper-alpha;
	padding-left: .3em;
}

/* lowercase alpha */
.list-lower { margin-left: 2em; }
.list-lower>li {				/*removes bullet image and fixes spacing*/
	background: none;
	list-style-type: lower-alpha;
	padding-left: .3em;
}

/* no list style */
li .list-unstyled>li { /* honors unstyled class in nested lists. */
	background: none;
}


/* display list items inline */
.list-inline { margin-left: 0em; }
.list-inline > li {
	display: inline;
	padding-right: 1em !important;
}


/* Descriptive List */
.list-descriptive > dt { 
	font-size: 1.1em;
	font-weight: bold;
	font-family: 'Arial Narrow', Arial, sans-serif;
}
.list-descriptive > dd {
	margin-left: 1em;
	padding-bottom: 1em;
}

/* multiple columns for lists and paragraphs */
.two-columns{
	-webkit-column-count:2;
	-moz-column-count:2;
	column-count:2;
}

.three-columns{
	-webkit-column-count:3;
	-moz-column-count:3;
	column-count:3;
}
.two-columns li,
.three-columns li{
	-webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}


/* custom colored bullets for lists */

.list-overstated.gray li,
.list-understated.gray li {
  background: url("/images/template2014/bullet-gray-disc.png") no-repeat 0 3px transparent;
  padding: 0 0 14px 18px;
  /* Rotates disc arrow down when used with accordion */
}
.list-overstated.gray li.open,
.list-understated.gray li.open {
  background: url("/images/template2014/bullet-gray-disc-open.png") no-repeat 0 3px transparent;
}
.list-overstated.gold li,
.list-understated.gold li {
  background: url("/images/template2014/bullet-gold-disc.png") no-repeat 0 3px transparent;
  padding: 0 0 14px 18px;
  /* Rotates disc arrow down when used with accordion */
}
.list-overstated.gold li.open,
.list-understated.gold li.open {
  background: url("/images/template2014/bullet-gold-disc-open.png") no-repeat 0 3px transparent;
}
.list-overstated.red li,
.list-understated.red li {
  background: url("/images/template2014/bullet-red-disc.png") no-repeat 0 3px transparent;
  padding: 0 0 14px 18px;
  /* Rotates disc arrow down when used with accordion */
}
.list-overstated.red li.open,
.list-understated.red li.open {
  background: url("/images/template2014/bullet-red-disc-open.png") no-repeat 0 3px transparent;
}

/*******
* LABELS
*/

/* labels for labeling things with labels. */

.label-primary{ background-color:#569bbd;}
.label-success{ background-color:#69a134;}
.label-info{ background-color:#ceaa7a;}
.label-warning{ background-color:#f9a01f;}
.label-danger{ background-color:#b42e34;}

/***********************
* SERVER WARNING BANNER
*/
#server-banner{
	display:block;
	padding: 1em;
	border: thick solid red;
	color: red;
	font-weight:bold;
	background-color:white;
	text-align:center;	
}



/*======================
* USER INTERFACES
======================*/

/* Add Icons */
/* add icons to list items */
li.folder-icon			{	list-style-image:url(/images/icon.folder.png);	}
li.zip-icon				{	list-style-image:url(/images/icon.zip.png);		}
li.docx-icon				{	list-style-image:url(/images/icon.docx.png);	}
li.img-icon				{	list-style-image:url(/images/icon.img.png);		}
li.link-icon				{	list-style-image:url(/images/icon.link.png);	}
li.mail-icon				{	list-style-image:url(/images/icon.mail.png);	}
li.pdf-icon				{	list-style-image:url(/images/icon.pdf.png);		}
li.pptx-icon				{	list-style-image:url(/images/icon.pptx.png);	}
li.txt-icon				{	list-style-image:url(/images/icon.txt.png);		}
li.vid-icon				{	list-style-image:url(/images/icon.vid.png);		}
li.xlsx-icon				{	list-style-image:url(/images/icon.xlsx.png);	}
li.file-icon,
li.folder-icon>ul,
li.zip-icon>ul			{	list-style-image:url(/images/icon.file.png);	}
li.xml-icon				{	list-style-image:url(/images/icon.xml.png);	}

/* add icons to links */
a.folder-icon:before,	
a.zip-icon:before, .auto-icons [href*=".zip"]:before, .auto-icons [href*=".rar"]:before, .auto-icons [href*=".7z"]:before,
a.docx-icon:before, .auto-icons [href*=".doc"]:before, .auto-icons [href*=".dot"]:before,
a.img-icon:before	,	.auto-icons [href*=".jpg"]:before, .auto-icons [href*=".png"]:before, .auto-icons [href*=".gif"]:before, .auto-icons [href*=".bmp"]:before,
a.link-icon:before, .auto-icons [href*=".html"]:before, .auto-icons [href*=".php"]:before, .auto-icons [href*=".asp"]:before,
a.mail-icon:before	,	.auto-icons [href*="mailto:"]:before,
a.pdf-icon:before	,	.auto-icons [href*=".pdf"]:before,
a.pptx-icon:before	,	.auto-icons [href*=".ppt"]:before,
a.txt-icon:before	,	.auto-icons [href*=".txt"]:before,	.auto-icons [href*=".rtf"]:before,
a.vid-icon:before	,	.auto-icons [href*=".mpg"]:before, .auto-icons [href*=".avi"]:before, .auto-icons [href*=".mov"]:before,
a.xlsx-icon:before	,	.auto-icons [href*=".xls"]:before, .auto-icons [href*=".xlsx"]:before, .auto-icons [href*=".xlsm"]:before, 
a.file-icon:before	,	.auto-icons [href*=".xml"]:before
	{
	position:relative;
	top:0.3em;
	margin-right:0.3em;
}
a.folder-icon:before	{	content:url(/images/icon.folder.png);	}
a.zip-icon:before, .auto-icons [href*=".zip"]:before, .auto-icons [href*=".rar"]:before, .auto-icons [href*=".7z"]:before		
						{	content:url(/images/icon.zip.png);		}
a.docx-icon:before	, .auto-icons [href*=".doc"]:before, .auto-icons [href*=".dot"]:before
						{	content:url(/images/icon.docx.png);		}
a.img-icon:before	,	.auto-icons [href*=".jpg"]:before, .auto-icons [href*=".png"]:before, .auto-icons [href*=".gif"]:before, .auto-icons [href*=".bmp"]:before
						{	content:url("/images/icon.img.png");		}
a.link-icon:before	, .auto-icons [href*=".html"]:before, .auto-icons [href*=".php"]:before, .auto-icons [href*=".asp"]:before
						{	content:url(/images/icon.link.png);		}
a.mail-icon:before	,	.auto-icons [href*="mailto:"]:before
						{	content:url(/images/icon.mail.png);		}
a.pdf-icon:before	,	.auto-icons [href*=".pdf"]:before
						{	content:url(/images/icon.pdf.png);		}
a.pptx-icon:before	,	.auto-icons [href*=".ppt"]:before
						{	content:url(/images/icon.pptx.png);		}
a.txt-icon:before	,	.auto-icons [href*=".txt"]:before	,	.auto-icons [href*=".rtf"]:before
						{	content:url(/images/icon.txt.png);		}
a.vid-icon:before	,	.auto-icons [href*=".mpg"]:before, .auto-icons [href*=".avi"]:before, .auto-icons [href*=".mov"]:before
						{	content:url(/images/icon.vid.png);		}
a.xlsx-icon:before,	.auto-icons [href*=".xls"]:before, .auto-icons [href*=".xlsx"]:before, .auto-icons [href*=".xlsm"]:before
						{	content:url(/images/icon.xlsx.png);		}
a.file-icon:before		{	content:url(/images/icon.file.png);		}
a.xml-icon:before,	.auto-icons [href*=".xml"]:before
						{	content:url(/images/icon.xml.png);		}

/* Buttons */
.btn-primary,
.btn-primary:active{
   color:white;
   border-color:#004891 !important;
   border-top-color: #569bbd;
   background: #4193d0;
   background: -webkit-gradient(linear, left top, left bottom, from(#0e5ca7), to(#4193d0));
   background: -webkit-linear-gradient(top, #0e5ca7, #4193d0);
   background: -moz-linear-gradient(top, #0e5ca7, #4193d0);
   background: -ms-linear-gradient(top, #0e5ca7, #4193d0);
   background: -o-linear-gradient(top, #0e5ca7, #4193d0);
}
.btn-primary:hover {
   color:#004891;
   border-color: #4193d0 !important;
   background: #95c2e8;
   background: -webkit-gradient(linear, left top, left bottom, from(#c1e8fb), to(#95c2e8));
   background: -webkit-linear-gradient(top, #c1e8fb, #95c2e8);
   background: -moz-linear-gradient(top, #c1e8fb, #95c2e8);
   background: -ms-linear-gradient(top, #c1e8fb, #95c2e8);
   background: -o-linear-gradient(top, #c1e8fb, #95c2e8);
}
.btn-success,
.btn-success:active{
   border-color:#00522b !important;
   border-top-color: #9cc133;
   background: #69a134;
   background: -webkit-gradient(linear, left top, left bottom, from(#2d8539), to(#69a134));
   background: -webkit-linear-gradient(top, #2d8539, #69a134);
   background: -moz-linear-gradient(top, #2d8539, #69a134);
   background: -ms-linear-gradient(top, #2d8539, #69a134);
   background: -o-linear-gradient(top, #2d8539, #69a134);
}
.btn-success:hover {
   color:#00522b;
   border-color: #2d8539 !important;
   background: #9cc133;
   background: -webkit-gradient(linear, left top, left bottom, from(#9cc133), to(#69a134));
   background: -webkit-linear-gradient(top, #9cc133, #69a134);
   background: -moz-linear-gradient(top, #9cc133, #69a134);
   background: -ms-linear-gradient(top, #9cc133, #69a134);
   background: -o-linear-gradient(top, #9cc133, #69a134);
}
.btn-info,
.btn-info:active{
   color:black;
   border-color: #c29b63 !important;
   border-top-color: #ceaa7a;
   background: #feefd1;
   background: -webkit-gradient(linear, left top, left bottom, from(#edc79f), to(#feefd1));
   background: -webkit-linear-gradient(top, #edc79f, #feefd1);
   background: -moz-linear-gradient(top, #edc79f, #feefd1);
   background: -ms-linear-gradient(top, #edc79f, #feefd1);
   background: -o-linear-gradient(top, #edc79f, #feefd1);
}
.btn-info:hover {
   color:#feefd1;
   border-color: #c29b63 !important;
   background: #edc79f;
   background: -webkit-gradient(linear, left top, left bottom, from(#edc79f), to(#ceaa7a));
   background: -webkit-linear-gradient(top, #edc79f, #ceaa7a);
   background: -moz-linear-gradient(top, #edc79f, #ceaa7a);
   background: -ms-linear-gradient(top, #edc79f, #ceaa7a);
   background: -o-linear-gradient(top, #edc79f, #ceaa7a);
}
.btn-warning,
.btn-warning:active{
   color:white;
   border-color: #cd6f3c !important;
   border-top-color: #ef8133;
   background: #f9a01f;
   background: -webkit-gradient(linear, left top, left bottom, from(#e5812c), to(#f9a01f));
   background: -webkit-linear-gradient(top, #e5812c, #f9a01f);
   background: -moz-linear-gradient(top, #e5812c, #f9a01f);
   background: -ms-linear-gradient(top, #e5812c, #f9a01f);
   background: -o-linear-gradient(top, #e5812c, #f9a01f);
}
.btn-warning:hover {
   color:#cd6f3c;
   border-color: #ef8133 !important;
   background: #ffc907;
   background: -webkit-gradient(linear, left top, left bottom, from(#ffc907), to(#f9a01f));
   background: -webkit-linear-gradient(top, #ffc907, #f9a01f);
   background: -moz-linear-gradient(top, #ffc907, #f9a01f);
   background: -ms-linear-gradient(top, #ffc907, #f9a01f);
   background: -o-linear-gradient(top, #ffc907, #f9a01f);
}
.btn-danger,
.btn-danger:active{
   color:white;
   border-color: #9b3226 !important;
   border-top-color: #b42e34;
   background: #d05835;
   background: -webkit-gradient(linear, left top, left bottom, from(#b23339), to(#d05835));
   background: -webkit-linear-gradient(top, #b23339, #d05835);
   background: -moz-linear-gradient(top, #b23339, #d05835);
   background: -ms-linear-gradient(top, #b23339, #d05835);
   background: -o-linear-gradient(top, #b23339, #d05835);
}
.btn-danger:hover {
   color:#9b3226;
   border-color: #d05835 !important;
   background: #red;
   background: -webkit-gradient(linear, left top, left bottom, from(red), to(#d05835));
   background: -webkit-linear-gradient(top, red, #d05835);
   background: -moz-linear-gradient(top, red, #d05835);
   background: -ms-linear-gradient(top, red, #d05835);
   background: -o-linear-gradient(top, red, #d05835);
}


/* Footnote Styling */
.footnote { 
	font-size: .8em;
	border-top: 1px solid #eee;
}


/* Sub-Panels */
.panel-body > .sub-panel { 
	width: 96%;
	margin: auto;
}
.sub-panel * { padding-left: 1em; }
.sub-panel > h5 {
	font-family: 'Arial Narrow', 'Helvetica Narrow', Arial, Helvetica, sans-serif;
	font-stretch: condensed;
	font-weight:normal;
	color:black;
	border-bottom: 1px solid #000;
	font-size:1.2em;
	padding:6px 0;
}

/* contact cards */
.contact-card{
	border-width:thin;
	border-style:solid;
	list-style:none;
	padding-left:0;
	margin-top:1em;
	margin-bottom:-1px;
}
.contact-card.sub{
	width:93.7%;
	margin:0 auto;
}
.contact-card table{	
	width:100%;
	margin:0;
}
.contact-card td{
	padding:0.2em;
}
.contact-card .name{
	display:block;
	margin:0;
	padding:0.2em;
	font-weight:bold;
}
.contact-card a:link,
.contact-card a:visited{
	text-decoration:none;
}
.contact-card a:hover{
	text-decoration:underline;
}

/* Contact listings for Right Column */
/* Template v4 */
.panel.first > .contacts {
	background: none !important;
}
.contacts h5, h6 { 
	margin: 0px 0px;
	padding: 3px 0px;
	font-weight: bold;
	font-size: 1.1em;
	font-family: 'Arial Narrow', 'Helvetica Narrow', Arial, Helvetica, sans-serif;
}

/* 2013 Template */
.contact_column {
	width:90%;
	margin:0 7% 5% 7%;
}
.contact_column h6 {
	font-family: 'Arial Narrow', 'Helvetica Narrow', Arial, Helvetica, sans-serif;
	/*font-stretch: condensed;*/
	font-weight:bold;
	font-size:1.1em;
	margin:0 0 0 0;
}
.contact_column > p { 
	margin-top: 0px;
	padding-top: 0px;
}

/*
======================
* HEADER / NAVIGATION
======================
*/
.division-title {
	text-decoration:underline; 
}


/*
===========
* HOMEPAGE
===========
*/
/* Most Visited Tab Pane Styles */
#most-visited * li {
	margin-left: 1em;
}
/* Tab Icons */
.social-media-icons {
	border: 1px solid #ceaa7a;
	margin-bottom: -.3em;
}

/* Center all social media widgets/plugins */
#socialMediaTabs .tab-pane > * {
    text-align: center;
}

/* Facebook Page Plugin */
.fb-page, .fb-page iframe[style], .fb-page span {
    width: 100% !important;
	max-width: 100% !important;
	height: 300px !important;
}
@media (min-width: 1280px) {
	.fb-page, .fb-page iframe[style], .fb-page span {
		margin-left: 2.4%;
	}
}
@media (max-width: 992px) {
	.fb-page, .fb-page iframe[style], .fb-page span {
		margin-left: 8%;	
	}
}
@media (max-width: 768px) {
	.fb-page, .fb-page iframe[style], .fb-page span {
		margin-left: 8.5%;	
	}
}
@media (max-width: 600px) {
	.fb-page, .fb-page iframe[style], .fb-page span {
		margin-left: 0;	
	}
}

/* Youtube Playlist */
#YouTubeTab > iframe {
	max-width: 100%;
}
@media (min-width: 1280px) {
	#YouTubeTab > iframe {
		width: 392px;
		height: 300px;
	}
}
@media (max-width: 992px) {
	#YouTubeTab > iframe {
		width: 568px;
		height: 380px;
		margin-left: 5.5%;
	}
}
@media (max-width: 768px) {
	#YouTubeTab > iframe {
		width: 568px;
		height: 380px;
		margin-left: 8%;
	}
}
@media (max-width: 650px) {
	#YouTubeTab > iframe {
		width: 100%;
		height: 100%;
		margin-left: 0;
	}
}

/*======================
* SOCIAL MEDIA (RIGHT-COLUMN)
======================*/

/* Connect With Us */
#connect-social { text-align: center; }
#connect-social img { width: 15%; }

/*======================
* RESPONSIVE TABLEAU
======================*/

.tableauPlaceholder {
	position: relative;
	width: 100% !important;
	overflow: visible !important;
}

.tableauPlaceholder iframe.tableauViz {
	position: absolute;
	width: 100% !important;
	height: 100% !important;
	overflow-x:auto;
	overflow-y:hidden !important;
}

@media only screen and (max-width: 768px) {
	.tableauPlaceholder  {
		margin-bottom: 30px;
		background: #CCC;
		height: 200px !important;
	}
	.tableauPlaceholder iframe.tableauViz {
		display: none !important;
	}

	.tableauPlaceholder:before {
		position: absolute;
		content: '\e621';
		font-family: 'CaGov' !important;
		font-size: 70px;
		width: 100%;
		height: 80px;
		margin-top: -10px;
		left: 0;
		top: 30px;
		line-height: 80px;
		text-align: center;
	}

	.tableauPlaceholder:after {
		position: absolute;
		content: 'Please use a device with a larger screen  \A to view this visualization. \A Laptop or desktop preferred.';
		width: 100%;
		height: 50px !important;
		left: 0;
		top: 130px;
		margin-top: -25px;
		white-space: pre;
		text-align: center;
		padding: 0 10px;
		box-sizing: border-box;
	}
	[id^='tableau-svg-spinner-container']{display:none;}
}