/*
===============================================================
CUSTOM STYLES FOR OSHPD
===============================================================
The idea here is to keep ALL the CSS in one place: this file.
To edit colors, use "colorscheme_oshpd.css"

CONTENTS
* SITE-WIDE / UTILITY
* CONTACT CARDS
* SERVER WARNING BANNER
* USER INTERFACES
* HEADER / NAVIGATION
* HOMEPAGE
* WHAT'S NEW SLIDER
* ACCORDION PANELS 
===============================================================
*/
/*
======================
* SITE-WIDE / UTILITY
======================
*/
/*********
* 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%;
}

/*********
* STYLING
*/

/* custom colored search button */
.submit_container,
.ie7 .submit_container,
.ie8 .submit_container {
	background-image:url(/images/template2013/oshpd/header_search_submitbutton.png) !important;
}
/* heading tag tweaks */
.container_style_b h5 {
	text-align:left;
	padding-left:4px;
	margin:4px 0;
}
/* adding border lines */
.dash-line-top		{border-top:thin dashed lightgray;}
.dash-line-bottom	{border-bottom:thin dashed lightgray;}

/*********
* CUSTOM STUFF
*/

/* Contact listings for Right Column */
.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;
}

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

.three_column{
	-webkit-column-count:3;
	-moz-column-count:3;
	column-count:3;
}
.two_columns li,
.three_column li{
	-webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}


/* Inline Display for .list_style_4 from OTech template 
	Blue disc for bullets, normal links, tight spacing */
.list_style_5, .list_style_5 ul {
	list-style-type:none;
	padding-left:5px;
}
.list_style_5 li {
	background:transparent url(../images/template2013/oshpd/bullet_oshpd_blue_disc.png) no-repeat 0px 2px;
	padding:0 15px 4px 18px;
	display:inline;
}
.list_style_5 li li {
	margin:3px 0 0 0;
	padding:0 8px 0 6px;
	display:inline;
}

/* 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);	}
/* 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,
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	{
	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
						{	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);		}
/* add a status sticker */
.new:after{
	content:"New!";
	color:red;
	font-weight:bold;
	margin-left:0.3em;
	padding:0.15em;
	border-radius:0.25em;
}
.new-before:before{
	content:"New!";
	color:red;
	font-weight:bold;
	margin-right:0.3em; 
	padding:0.15em;
	border-radius:0.25em;
}
.new-yellow:after{
	content:"New!";
	background-color:yellow;
	color:black;
	font-weight:bold;
	margin-left:0.3em;
	padding:0.15em;
	border-radius:0.25em;
}
.new-yellow-before:before{
	content:"New!";
	background-color:yellow;
	color:black;
	font-weight:bold;
	margin-right:0.3em; 
	padding:0.15em;
	border-radius:0.25em;
}
.soon:after,
.soon-after:after{
	content:"Coming Soon";
	background-color:#ddd;
	color:black;
	font-weight:bold;
	margin-left:0.3em;
	padding:0.15em;
	border-radius:0.25em;
}
.soon-before:before{
	content:"Coming Soon";
	background-color:#ddd;
	color:black;
	font-weight:bold;
	margin-right:0.3em; 
	padding:0.15em;
	border-radius:0.25em;
}
/* server warning banner */
#server-banner{
	display:block;
	padding: 1em;
	border: thick solid red;
	color: red;
	font-weight:bold;
	background-color:white;
	text-align:center;	
}
/* 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;
}
/* date modified */
#modified-date{
	font-style:italic;
	font-weight:bold;
	font-size:9pt;
	color:#473f2c;
}
/*
======================
* USER INTERFACES
======================
*/
/* ACCORDION */
.accordion .manuals{
	cursor:pointer;
	display:block;
}

.accordion .manuals div{
	display:inline-block;
    -webkit-transition:0.4s;
    transition:0.4s;
	margin-right:0.2em;
}
.accordion .manuals div.down{
	transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
}
/* TABS */
.tabs>ul{
	list-style: none;
	padding:0 0.5em 0 0;
	margin:1em 0 0 0;
	background-color:gray;
	border-radius:0.5em 0.5em 0 0;
}
.tabs>ul li{
	display:inline-block;
	margin:0.5em 0 0 0.5em;
	border-radius:0.5em 0.5em 0 0;
}
.tabs>ul li:hover{
	background-color: rgba(255,255,255,0.5);
}
.tabs>ul li.active{
	background-color:white;
}
.tabs>ul li a{
	color:black;
	display:block;
	padding:0.4em;
	margin:0.3em;
	text-decoration:none;
}
/* BUTTONS */
.button,
.button:visited{
   display: inline-block;
   border:none;
   padding: 0.5em;
   margin:0.5em;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   background-color: lightgray;
   color: white;
   text-decoration: none;
   vertical-align: middle;
   cursor:pointer;
}
.button:hover{ text-decoration:none; }
.button.darkBlue{
   border-top: 1px solid #569bbd;
   background: #004891;
   background: -webkit-gradient(linear, left top, left bottom, from(#004891), to(#0e5ca7));
   background: -webkit-linear-gradient(top, #004891, #0e5ca7);
   background: -moz-linear-gradient(top, #004891, #0e5ca7);
   background: -ms-linear-gradient(top, #004891, #0e5ca7);
   background: -o-linear-gradient(top, #004891, #0e5ca7);
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
}
.button.darkBlue:hover {
   color:white;
   border-top-color: #28597a;
   background: #28597a;
   background: -webkit-gradient(linear, left top, left bottom, from(#004891), to(#4193d0));
   background: -webkit-linear-gradient(top, #004891, #4193d0);
   background: -moz-linear-gradient(top, #004891, #4193d0);
   background: -ms-linear-gradient(top, #004891, #4193d0);
   background: -o-linear-gradient(top, #004891, #4193d0);
}
.button.tanKhaki{
   color:black;
   border-top: 1px solid #fff0e0;
   background: #ceaa7a;
   background: -webkit-gradient(linear, left top, left bottom, from(#ceaa7a), to(#e5cabe));
   background: -webkit-linear-gradient(top, #ceaa7a, #e5cabe);
   background: -moz-linear-gradient(top, #ceaa7a, #e5cabe);
   background: -ms-linear-gradient(top, #ceaa7a, #e5cabe);
   background: -o-linear-gradient(top, #ceaa7a, #e5cabe);
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
}
.button.tanKhaki:hover {
   color:#004891;
   border-top-color: #fff0e0;
   background: #e5cabe;
   }
.button.darkGreen{
   border-top: 1px solid #69a134;
   background: #2d8539;
   background: -webkit-gradient(linear, left top, left bottom, from(#00522b), to(#2d8539));
   background: -webkit-linear-gradient(top, #00522b, #2d8539);
   background: -moz-linear-gradient(top, #00522b, #2d8539);
   background: -ms-linear-gradient(top, #00522b, #2d8539);
   background: -o-linear-gradient(top, #00522b, #2d8539);
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
}
.button.darkGreen:hover {
   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);
}
.button.gray{
   background: #888888;
   background: -webkit-gradient(linear, left top, left bottom, from(#494949), to(#888888));
   background: -webkit-linear-gradient(top, #494949, #888888);
   background: -moz-linear-gradient(top, #494949, #888888);
   background: -ms-linear-gradient(top, #494949, #888888);
   background: -o-linear-gradient(top, #494949, #888888);
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
}
/*
======================
* HEADER / NAVIGATION
======================
*/
header{
	z-index:20;
}
.nav_panel .division{
	clear:both !important;
	background:none !important;
	padding-left:0 !important;
	margin-left:0 !important;
	font-weight:bold;
}
.mobile-sub-menu a{
	display:block;
	padding:5px;
	margin-bottom:1px;
	color:white;
	background-color:#ceaa7a;
	text-decoration:none;
}
.mobile-sub-menu .division{
	margin-top: 10px;
}
.mobile-sub-menu .division a{
	background-color:#b06b4f;	
}

.mobile-sub-menu a.no-link{
	cursor: default;
}


/*
===========
* HOMEPAGE
===========
*/
#homepage-connect img{
	width:18%; /* because there's 5 logos */
}
#homepage-quicklinks{}
#homepage-quicklinks .ql-icon{
	height:21px;
}
/* deletos */
#homepage-icons{
	text-align:center;
}
#homepage-icons figure {
	display:inline-block;
	vertical-align:top;
	width:10%;
	font-size:0.8em;
	margin:0 1em;
}
#homepage-icons img{
	width:88%;
}
/* end deletos */
#homepage-id {
	text-align:center;
}
#homepage-id img{
	width:60%;
	min-width:200px;
	max-width:300px;
}

/*
==================
WHAT'S NEW SLIDER 
==================
*/
#whats-new{
	position:relative;
}
#whats-new .slidesjs-container{}
#whats-new .slidesjs-control{}
#whats-new .slidesjs-slide{
	position:relative;
}
#whats-new .bg-img{
	width:100%;
	z-index:0;
	position:relative;
	top:0;
	opacity:0.4;
	filter:alpha(opacity=40); /* For IE8 and earlier */
}
@media (max-width:600px){
	#whats-new .wn-text{
		top:0.1em;
		right:0;
		left:0;
		width:auto;
		
	}
}
#whats-new .wn-text{
	position: absolute;
	left:8%;
	top:1em;
	width:78%;
	padding:0 3%;
	background-color:rgba(255,255,255,0.8);
	box-sizing: content-box;
	border-radius:0.5em;
}
#whats-new .wn-text h3{
	border-color:#ceaa7a; /* specialized color declaration, belongs here */
	margin-top:0.5em;
	margin-bottom:0.5em;
}
#whats-new .publish-date{
	display:block;
	font-size-adjust: 0.45;
	font-style:italic;
	margin-top:8px;
	border-top:thin solid #e1f3fd;
}
#whats-new  .slidesjs-navigation{
	position:absolute;
	top:0;
	bottom:0;
	z-index:11;
	color:#4193d0;
	padding:5% 1% 0 1%;
	text-decoration:none;
	background-color:rgba(255,255,255,0.2);
}
#whats-new  .slidesjs-navigation:hover{
	background-color:rgba(255,255,255,0.8);
	color:#004891;
}
#whats-new .slidesjs-previous{
	left:0;
}
#whats-new  .slidesjs-next{
	right:0;
}
#whats-new  .slidesjs-pagination{
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	margin-bottom:0;
	z-index:11;
	text-align:center;
	 overflow: hidden;

}
#whats-new  .slidesjs-pagination-item{
	display:inline-block;
	margin:0 0.2em;
}
#whats-new  .slidesjs-pagination-item>a{
	padding:0.2em 1.2em;
	width:3em !important;
	border-radius:100px 100px 0 0;
	font: 0.9em normal Arial, Helvetica, sans-serif;
	text-decoration:none;
	background-color: rgba(255,255,255,0.2);
	color:#4193d0;
}
#whats-new  .slidesjs-pagination-item>a.active{
	background-color: rgba(255,255,255,0.8);
	color:#004891;
}
.responsive-video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
	z-index:99;
	margin-bottom:1em;
}
 
.responsive-video-container iframe,
.responsive-video-container object,
.responsive-video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	z-index:99;
}

/*
==================
ACCORDION PANELS 
==================
*/
.panel_title { 
	background-color: #eee;
	cursor: pointer;
}
.panel_content { 
	display: none;
}
.panel_content > p {
	margin-left: 1em;
	margin-right: 1em;
}
.panel_content > ul.list_style_3 {
	margin-left: -1.5em;
}

.subpanel_title { 
	background-color: #eee;
	cursor: pointer;
	margin-left: 1em;
	margin-right: 1em;
}
.subpanel_content {
	display:none;
	margin-left: 1em;
	margin-right: 1em;
}