﻿/* Office Of State Programs Stylesheet                 *
 * USDOL/OSHA - Salt Lake Technical Center             *
 * Last Revised: 08/03/2015 - LT - print styles        *
                 06/08/2015 - LT - styles for redesign *
                 02/03/2015 - MW - new sheet           *
 *******************************************************/

#banner {
position:relative;
background: -moz-linear-gradient(left,  rgba(41,137,216,1) 0%, rgba(125,185,232,0) 75%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(41,137,216,1)), color-stop(75%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(41,137,216,1) 0%,rgba(125,185,232,0) 75%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(41,137,216,1) 0%,rgba(125,185,232,0) 75%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(41,137,216,1) 0%,rgba(125,185,232,0) 75%); /* IE10+ */
background: linear-gradient(to right,  rgba(41,137,216,1) 0%,rgba(125,185,232,0) 75%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
}

#banner h1 {
font-weight: bold;
padding: 30px 0 35px 270px;
margin:0;
color: #000000; 
line-height:100%;
font-size: 200%;
}
#banner h1.sge { font-size: 240%; padding-left:125px; }
#banner #vpp_logo { position: absolute; top: -9px; left:-15px; max-width:33%; height:auto; margin: 10px 0; }
#banner #sge_logo { position: absolute; top: 0px; left:10px; max-width:33%; height:auto; margin: 10px 0; }

.span7.pull-right:first-child { margin-left: 15px; }


/* #banner @ largest desktop screen size */
@media (min-width:1200px) {
	#banner h1 { font-size: 330%; }
}
/* #banner @ desktop screen size */
@media (min-width:980px) and (max-width: 1199px) { #banner h1 { font-size: 250%; } }

/* #banner and wells @ tablet screen size */
@media (min-width:768px) and (max-width: 979px) {
#banner h1.vpp-title { margin-left: -60px; }
.span3 .well-fixed { height:425px; }
.well-fixed p { padding-top:6px; font-size:11px; }
.well-fixed li { font-size:11px; }
}

@media (max-width: 767px) and (min-width: 481px) {
#banner #vpp_logo, #banner #sge_logo { position: static; }
.panels .span3 { width: 50%; float: left; }
.panels .span3 .well-fixed { margin: 15px; height: 390px; }
}

@media print { /*preserve side-by-side panel design when printing */
#banner #vpp_logo, #banner #sge_logo { position: static; }
.panels .span3 { width: 45%; float: left; }
.panels .span3 .well-fixed { margin: 15px; height: 390px; }
.visible-phone.visible-tablet.hidden-desktop .span6:first-child { width: 100%; }
}

@media(max-width: 480px) {
#banner #vpp_logo, #banner #sge_logo { position: static; }
.vpp_panel_img { display:none; }
.span3 .well-fixed { height:auto; }
.span3:nth-child(odd) { margin-left:0; }
.well-fixed p { padding-top:6px; font-size:11px; }
.well-fixed li { font-size:11px; }
}



/* intro panel */

#intro-panel { position: relative: z-index: 1; }
#intro-panel > .span7 { position: relative; z-index: 99; }

/* Main Styles for Panels */
.well-fixed {
  min-height: 20px;
  padding: 15px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  height:365px;
}

.well-fixed p { padding-top:6px; font-size:12px; }
.well-fixed li { font-size:12px; }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none), (-ms-fullscreen, :root .ie11up) {  
	.well-fixed p {font-size:11px; }
	.well-fixed li {font-size:11px; }
}
.vpp_panel_img { border-radius: 4px; margin-bottom: 15px; }

/** Rotating image**/


#featured_image{
width:100%;
position:relative;
height:300px;
background:#fff;
}
#featured_image ul.ui-tabs-nav{
position:absolute;
top:0; left:900px;
list-style:none;
padding:0; margin:0;
width:200px;
}
#featured_image ul.ui-tabs-nav li{
padding-left:15px;
color:#666;
}

#featured_image .ui-tabs-panel{
width:900px; height:300px;
background:#999; position:relative;
overflow:hidden;
}
#featured_image .ui-tabs-hide{
display:none;
}

#featured_image li.ui-tabs-nav-item {
border: 1px #d9d9d9 solid;
height:98.33px;
}
#featured_image li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
color:#333; background:#fff;
}
#featured_image li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured_image li.ui-tabs-selected{ /*Selected tab style*/
background:url('http://1.bp.blogspot.com/-f_SJA-pnqBs/UhnWlXoPHKI/AAAAAAAABHw/N5B2HZlHhMc/s1600/selected-item.gif') top left no-repeat;
}
#featured_image ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured_image ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured_image .ui-tabs-panel .info{
position:absolute;
top:200px; left:0;
height:100px; width: 900px;
background: url('http://4.bp.blogspot.com/-Mg9BbPgNJFM/UhnWaBDv4MI/AAAAAAAABHo/BKJgX4LNMQg/s1600/117s1g9.jpg') ;
}
#featured_image .info h2{
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured_image .info p{
margin:0 5px;
color:#fff;
}
#featured_image .info a{
text-decoration:none;
color:#fff;
}
#featured_image .info a:hover{
text-decoration:underline;
}


/*Featured Images*/
#featured_images {
	height: 300px;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
}
#featured_images_container img {
	position: absolute;
	top: 0;
	left: 0;
	width: 440px; 
	height: 300px
}
#featured_images_nav {
	width: 33%;
	height: 100%;
	z-index: 2;
	position: absolute;
	top: 0;
	right: 0;
	color: #FFF;
	background-color: #2989D8;
}
#featured_images_nav li {
	padding: 11px 10px 11px 35px;
	font-size: 125%;
	white-space:nowrap;
	line-height: 1.5em;
	border-bottom: 1px solid #FFF;
}
#featured_images_nav li:hover {
	cursor: pointer;
	background: rgba(0, 0, 0, .6);
}
#featured_images_nav li:last-child {
	border-bottom: none;
}
#featured_images_nav li.active {
	color: #FFF58C;
}
#featured_images_nav li i {
	margin-left: -28px;
	margin-right:8px;
}
@media (min-width:980px) and (max-width: 1199px) { #featured_images_nav li { padding: 9px 10px 9px 35px; } } 

/*----- SMALL NAVIGATION CONTAINER -----*/
#featured_images_nav_sm {
	width: 100%;
	overflow: auto;
	color: #FFF;
	background: rgba(0, 0, 0, .6);
}
#featured_images_nav_sm li {
	float: left;
	padding: 15px 10px 15px 35px;
	width: 90%;
	font-size: 100%;
	border-bottom: 1px solid #FFF;
}
#featured_images_nav_sm li:hover {
	cursor: pointer;
	background: rgba(0, 0, 0, .6);
}
#featured_images_nav_sm li:last-child {
	border-bottom: none;
}
#featured_images_nav_sm li.active {
	color: #FFF58C;
}
#featured_images_nav_sm li i {
	margin-left: -25px;
}

#featured_images_caption h1{
margin: 5px 0px 5px 0px; 
}

#featured_images .caption {
	margin: 0px;
	padding: 5px 10px 5px 10px;
	width: 65.2%;
	min-height: 40px;
	display: none;
	position: absolute;
	bottom: 0;
	font-size: 100%;
	background: rgba(255, 255, 255, .85);
}

/*.caption { overflow: auto; }*/
#featured_images .caption ul { margin-bottom: 10px; list-style-type: disc; }
#featured_images .caption .unstyled li {
	float: left;
	padding: 0 10px;
	border-right: 1px solid #333;
}
#featured_images .caption .unstyled li:first-child {
	padding-left: 0;
}
#featured_images .caption .unstyled li:last-child {
	border-right: none;
}
#featured_images .caption li a:hover {
	text-decoration: underline;
	color: #000;
}

.vpp-team.modal-body { padding: 0 0 0 20px; }
.vpp-team { background: url('/dcsp/vpp/images/vppbanner.png') no-repeat 87% 10px; background-size: 30% auto; }
.vpp-team > div:first-child { background-color: rgba(255,255,255,.65); padding-top: 30px; }
.vpp-team  h5 { text-align:center; }
.vpp-team p { clear: both; text-align: right; padding: 10px 15px 0 0; }
.vpp-team dl > dt { width: 35%; text-align: right; float: left; clear:left; }
.vpp-team dl > dd { width: 60%; float:left; }
.vpp-team > div > a.close { margin-top: -15px; }