/* Construction eTool Stylesheet                       *
 * USDOL/OSHA - Salt Lake Technical Center             *
 * Last Revised: 02/13/2015 KP - new sheet             *
 *******************************************************/

.btn-warning { 	font-weight:bold; 
                margin-top: 5px;
				margin-bottom: 10px; }

#banner {
	margin: -5px 0px 0px 0px;
	position: relative;
	min-height:176px;
	background: #FFF url(images/construction_banner.png) no-repeat;
	background-size: 100% auto;
}

#banner h1 {
  position:absolute;
  right:20px;
  bottom:0;
  margin-left: 104px;
  -webkit-text-stroke: 1px #FFF;
  color: #FFF;
  text-shadow:
     3px 3px 0 #000,
    -1px -1px 0 #000,  
     1px -1px 0 #000, 
    -1px  1px 0 #000,
     1px  1px 0 #000;
	 font-size: 400%;
	 }

.page-banner {
   margin: 5px 0px 0px 0px;
   padding: 0;
   height: 170px;
   color: #FFF;
   border-bottom: 1px solid #EEE;
}

@media (max-width: 800px) {

#banner h1 {
  margin-left: -204px;
  font-size: 300%; }

}

.wellheader {
  margin:-9px -9px 9px -9px;
  border: 2px solid #296DC0;
  background-color: #296DC0;
  padding:2px;
  text-decoration:none;
  color:#FFFFFF;
  text-shadow: black 0.1em 0.1em 0.2em;
}

.accordion-heading { background-color:#296DC0; }
.accordion-heading > a > h6 { margin-bottom: 3px; }
.accordion-heading:hover { background-color:#333; 
  -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out; }
.accordion-heading > a { color:#FFF; 
   text-decoration:none; 
   text-transform:uppercase; }
.accordion-heading a > h6 { color:#FFF; }
   
#tasks .accordion-heading { background-color:#B3B3B3;  max-height:55px; }
#tasks .accordion-heading:hover { background-color:#333; 
  -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out; }
#tasks .accordion-heading > a { color:#000;  
   text-decoration:none;  }
#tasks .accordion-heading:hover > a { color:#FFF;  
   text-decoration:none;  }   
   
#tasks h6 { margin: -5px; }
#tasks.alert-info .accordion-body { background-color: #fff; }
#tasks.alert-info .accordion-heading { background-color: #B2BBCB; }
@media print {
	#tasks.alert-info { width: 100%; }
}

.showhide	{ clear:both; margin:0; padding-top: 10px; } /* styling for show/hide all button */


.alert.alert-example { width:66%; }
/* maintain appearance for landing pages with image grids */
@media only screen and (min-width : 980px) {
.link-mainpage > img { float: left; } 
.ul-mainpage > li { margin-left: 200px; } }
@media only screen and (max-width : 767px) {
.link-mainpage > img { display:none; } 
.alert.alert-example { width:40%; float:right; clear:right; }
}
@media only screen and (max-width: 400px) {
.alert.alert-example { width:100%; float:none; clear:right; }
}

/* Styling for images pulled right to keep from "stairing" and margins neat */
div.img-header { width:30%; min-width:200px; }
div.img-caption.pull-right,
img.pull-right, alert.pull-right.span4 { clear: right; }
div.text-center.img-caption.pull-right.span6 { padding-right: 12px; }

/*SAFETY BULLETIN*/
.safety-bulletin { width: 200px; }
.safety-bulletin > a { text-decoration: none; }


/* Styling for images set in rows when spans would stack them too soon, wasting vertical space */
ul.breakavoid > li { -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */ }
.img-col-2 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-width: 220px; -moz-column-width: 220px; column-width: 220px; clear:both; }
.img-col-3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; clear:both; }


/* Begin styles for indexes w/thumbnails */


.thumbnail-grid > div > div > a { width: 100%; text-decoration: none; /* no underline on links */}
.thumbnail-grid > div > div > a > span { width: 100%; max-width: 175px; height: 80px;  display: inline-block; *display: block; /* IE fix */
			background-position: center top; background-repeat: no-repeat; /* set background properties; background set on each individual li */
			-webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; /* round corners */ }

/* Healthcare Index - styling of text and larger button sizes - "border" color declared on the individual buttons on the "well well-small" div as a background color to the well*/
.index-thumbs.thumbnail-grid > div > div > a { padding-top: 73px; padding-bottom: 7px; border: 1px solid #3d5a9c; width: 100%; height: 35px; display: inline-block; *display: block;
			background-position: center top; background-repeat: no-repeat; /* set background properties; background set on each individual li */ }
.index-thumbs a > h4 { color:white; font-weight: bold; text-shadow: 2px 2px 3px rgba(0, 0, 0, 1), 2px 2px 3px rgba(0, 0, 0, 1); margin: 10px 0; }

@media screen and (max-width: 767px) { /* adjust margins for tablets transitioning to phones and vertical stacking of all links */
	.thumbnail-grid > div > div { padding: 13px 0 13px 13px; }
	.thumbnail-grid > div > div { height: 80px; }
	.thumbnail-grid > div > div > a > span { width: 110px; height: 50px; float: left; background-size: 100% 100%;
			-webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; /* round corners */ }
	.thumbnail-grid > div > div > a { font-size: 15pt; width: auto; padding: 0 10px; }
/* Healthcare Index - thin buttons*/
	.index-thumbs.thumbnail-grid > div > div { padding: 0; height: 45px; }
	.index-thumbs.thumbnail-grid > div > div > a { height: 20px; padding: 0; margin: 0; border: none; background-position: -999px -999px; }
}	
@media screen and (max-width: 479px) { /* adjust margins for phones and vertical stacking of all links */
	.thumbnail-grid > div > div > a > span { display: none; }
	.thumbnail-grid > div > div > a { font-size: 11pt; }
	.thumbnail-grid > div { margin: -8px 0; padding: 0; }
	.thumbnail-grid > div > div { height: auto; margin: 8px 0; }
}

/* End styles for indexes w/thumbnails */