@charset "UTF-8";
/* CSS Document */


#battalion-content {
	width:100%;
	background-color:black;
	font-family: 'Open Sans', sans-serif;
	line-height:1.4!important;
}

#battalion-page-header {
	background-image:url(/wp-content/themes/full-frame/images/133rdbattalion/CCompany1916.jpg);
	background-size:cover;
	min-height:250px;
	background-repeat:no-repeat;
	background-position:bottom;
}

.battalion-wrapper {
	max-width:1280px;
	margin:0 auto;
}

.page-intro {
	padding-top:30px;
	padding-bottom:30px;
}

.page-intro h1 {
	color:#bebebe;
	font-weight: 700;
}

.page-intro p {
	font-size:18px;
	color:#ffffff;
}

#main-photo-container {
	background-color:#333132;
	padding:35px;
	color:white;
}

.legend {
	color:white;
	font-size:16px;
	padding-bottom:30px;
}

.left-legend p {
font-style:italic;
margin-bottom:5px;
margin-top:0px;
}

.middle-legend p {
	margin-top:0px;
	margin-bottom:5px;
}

.right-legend p {
	margin-top:0px;
	margin-bottom:5px;
}

.left-legend, .middle-legend, .right-legend {
float:left;
width:33%;
margin-bottom:30px;
}

#wounded, #killed, #unfit, #home {
	padding: 0 0 5px 70px;
	position:relative;
}



.legend-icon {
	max-height:30px;
	left:0;
	position:absolute;
}

.wounded, .home, .killed, .unfit {
left:33px!important;
}

#photo-container {
	width:100%;
	overflow:auto;
	position:relative;
}

#photo-container img {
	max-width:none;
}

/*DETAILS SECTION */
#details {
	background-color:black;
	padding-top:50px;
}

 #details h2 {
 	color:#bebebe;
	font-weight: 700;
 }
 
 #details .row {
	 width:100%;
 	display:block;
	min-height: 230px;
 }
 
 #details .column-half {
 	width:49%;
	display:inline-block;
	height: 250px;
    vertical-align: top;
 }
 
 #details .soldier .image img{
 	float:left;
	padding-right:30px;
	max-width:120px;
 }
 
 #details .soldier .description {
 	color:white;
 }
 
 #details .soldier .description h5 {
	 font-size:14px;
	 font-weight:bold;
	 margin-bottom:0;
	 clear:none!important;
 }
  
 #details .soldier .description p {
	 font-size:14px;
	 margin-top:0;
	 margin-bottom:0;
 }
 
   #details .soldier .description .outcome {
	margin-top:0;
	margin-bottom:0;
  }
 
  #details .soldier .description .outcome img {
	max-height:15px;
	margin-bottom:-1px;
	margin-right:3px;
  }
   
   
   /* TOOLTIP */
   
   .focus-frame, .tooltip {
	   opacity:0;
   }
   
 /*P1*/  
#atkinson-hover .focus-frame:hover, #atkinson-hover .focus-frame:hover + .tooltip, #uk1-hover .focus-frame:hover, #uk1-hover .focus-frame:hover + .tooltip, #woody-hover .focus-frame:hover, #woody-hover .focus-frame:hover + .tooltip, #kelly-hover .focus-frame:hover, #kelly-hover .focus-frame:hover + .tooltip, #smith-hover .focus-frame:hover, #smith-hover .focus-frame:hover + .tooltip, #simpson-hover .focus-frame:hover, #simpson-hover .focus-frame:hover + .tooltip, #brown-hover .focus-frame:hover, #brown-hover .focus-frame:hover + .tooltip, #moffatt-hover .focus-frame:hover, #moffatt-hover .focus-frame:hover + .tooltip, #smith2-hover .focus-frame:hover, #smith2-hover .focus-frame:hover + .tooltip, #burnett-hover .focus-frame:hover, #burnett-hover .focus-frame:hover + .tooltip, #farr-hover .focus-frame:hover, #farr-hover .focus-frame:hover + .tooltip, #king-hover .focus-frame:hover, #king-hover .focus-frame:hover + .tooltip, #louch-hover .focus-frame:hover, #louch-hover .focus-frame:hover + .tooltip {
   	opacity:1;
	-webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
   }
   
   
 /*P2*/ 
#hampton-hover .focus-frame:hover, #hampton-hover .focus-frame:hover + .tooltip, #wickens-hover .focus-frame:hover, #wickens-hover .focus-frame:hover + .tooltip, #helmer-hover .focus-frame:hover, #helmer-hover .focus-frame:hover + .tooltip, #pickersgill-hover .focus-frame:hover, #pickersgill-hover .focus-frame:hover + .tooltip, #brinn-hover .focus-frame:hover, #brinn-hover .focus-frame:hover + .tooltip, #mansfield-hover .focus-frame:hover, #mansfield-hover .focus-frame:hover + .tooltip, #gillis-hover .focus-frame:hover, #gillis-hover .focus-frame:hover + .tooltip, #pake-hover .focus-frame:hover, #pake-hover .focus-frame:hover + .tooltip, #bowyer-hover .focus-frame:hover, #bowyer-hover .focus-frame:hover + .tooltip, #ashford-hover .focus-frame:hover, #ashford-hover .focus-frame:hover + .tooltip, #cowan-hover .focus-frame:hover, #cowan-hover .focus-frame:hover + .tooltip  {
    opacity:1;
	-webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
   }
   
/*P3*/   
#long-hover .focus-frame:hover, #long-hover .focus-frame:hover + .tooltip, #morris-hover .focus-frame:hover, #morris-hover .focus-frame:hover + .tooltip, #west-hover .focus-frame:hover, #west-hover .focus-frame:hover + .tooltip, #brandow-hover .focus-frame:hover, #brandow-hover .focus-frame:hover + .tooltip, #brandow2-hover .focus-frame:hover, #brandow2-hover .focus-frame:hover + .tooltip, #bantam-hover .focus-frame:hover, #bantam-hover .focus-frame:hover + .tooltip, #kellar-hover .focus-frame:hover, #kellar-hover .focus-frame:hover + .tooltip, #uk2-hover .focus-frame:hover, #uk2-hover .focus-frame:hover + .tooltip, #watson-hover .focus-frame:hover, #watson-hover .focus-frame:hover + .tooltip, #pratt-hover .focus-frame:hover, #pratt-hover .focus-frame:hover + .tooltip, #titmus-hover .focus-frame:hover, #titmus-hover .focus-frame:hover + .tooltip, #mcqueen-hover .focus-frame:hover, #mcqueen-hover .focus-frame:hover + .tooltip, #west2-hover .focus-frame:hover, #west2-hover .focus-frame:hover + .tooltip, #abbott-hover .focus-frame:hover, #abbott-hover .focus-frame:hover + .tooltip, #long2-hover .focus-frame:hover, #long2-hover .focus-frame:hover + .tooltip  {
    opacity:1;
	-webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
   }
   
 /*P4*/     
#dick-hover .focus-frame:hover, #dick-hover .focus-frame:hover + .tooltip, #caldwell-hover .focus-frame:hover, #caldwell-hover .focus-frame:hover + .tooltip, #spencer-hover .focus-frame:hover, #spencer-hover .focus-frame:hover + .tooltip, #mackenzie-hover .focus-frame:hover, #mackenzie-hover .focus-frame:hover + .tooltip, #becker-hover .focus-frame:hover, #becker-hover .focus-frame:hover + .tooltip, #cook-hover .focus-frame:hover, #cook-hover .focus-frame:hover + .tooltip, #walpole-hover .focus-frame:hover, #walpole-hover .focus-frame:hover + .tooltip, #uk3-hover .focus-frame:hover, #uk3-hover .focus-frame:hover + .tooltip, #pickersgill2-hover .focus-frame:hover, #pickersgill2-hover .focus-frame:hover + .tooltip, #martin-hover .focus-frame:hover, #martin-hover .focus-frame:hover + .tooltip, #smith3-hover .focus-frame:hover, #smith3-hover .focus-frame:hover + .tooltip, #hill-hover .focus-frame:hover, #hill-hover .focus-frame:hover + .tooltip, #mcqueen2-hover .focus-frame:hover, #mcqueen2-hover .focus-frame:hover + .tooltip, #crerar-hover .focus-frame:hover, #crerar-hover .focus-frame:hover + .tooltip, #leighton-hover .focus-frame:hover, #leighton-hover .focus-frame:hover + .tooltip, #rabbits-hover .focus-frame:hover, #rabbits-hover .focus-frame:hover + .tooltip, #sherlock-hover .focus-frame:hover, #sherlock-hover .focus-frame:hover + .tooltip, #hibberd-hover .focus-frame:hover, #hibberd-hover .focus-frame:hover + .tooltip  {
    opacity:1;
	-webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
   }


/*P5*/   
#day-hover .focus-frame:hover, #day-hover .focus-frame:hover + .tooltip, #uk4-hover .focus-frame:hover, #uk4-hover .focus-frame:hover + .tooltip, #perrin-hover .focus-frame:hover, #perrin-hover .focus-frame:hover + .tooltip, #price-hover .focus-frame:hover, #price-hover .focus-frame:hover + .tooltip, #moffatt2-hover .focus-frame:hover, #moffatt2-hover .focus-frame:hover + .tooltip, #knowles-hover .focus-frame:hover, #knowles-hover .focus-frame:hover + .tooltip, #west3-hover .focus-frame:hover, #west3-hover .focus-frame:hover + .tooltip, #uk5-hover .focus-frame:hover, #uk5-hover .focus-frame:hover + .tooltip, #bayham-hover .focus-frame:hover, #bayham-hover .focus-frame:hover + .tooltip, #christmas-hover .focus-frame:hover, #christmas-hover .focus-frame:hover + .tooltip, #buck-hover .focus-frame:hover, #buck-hover .focus-frame:hover + .tooltip, #mcdowell-hover .focus-frame:hover, #mcdowell-hover .focus-frame:hover + .tooltip, #miller-hover .focus-frame:hover, #miller-hover .focus-frame:hover + .tooltip, #mccall-hover .focus-frame:hover, #mccall-hover .focus-frame:hover + .tooltip, #mcintosh-hover .focus-frame:hover, #mcintosh-hover .focus-frame:hover + .tooltip, #uk6-hover .focus-frame:hover, #uk6-hover .focus-frame:hover + .tooltip {
    opacity:1;
	-webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
   }
   
   /*P6*/
   #west4-hover .focus-frame:hover, #west4-hover .focus-frame:hover + .tooltip, #brown2-hover .focus-frame:hover, #brown2-hover .focus-frame:hover + .tooltip, #williams-hover .focus-frame:hover, #williams-hover .focus-frame:hover + .tooltip, #west5-hover .focus-frame:hover, #west5-hover .focus-frame:hover + .tooltip, #ball-hover .focus-frame:hover, #ball-hover .focus-frame:hover + .tooltip, #carnaham-hover .focus-frame:hover, #carnaham-hover .focus-frame:hover + .tooltip, #murphy-hover .focus-frame:hover, #murphy-hover .focus-frame:hover + .tooltip, #pamplin-hover .focus-frame:hover, #pamplin-hover .focus-frame:hover + .tooltip, #pamplin2-hover .focus-frame:hover, #pamplin2-hover .focus-frame:hover + .tooltip, #fick-hover .focus-frame:hover, #fick-hover .focus-frame:hover + .tooltip, #west6-hover .focus-frame:hover, #west6-hover .focus-frame:hover + .tooltip, #lambert-hover .focus-frame:hover, #lambert-hover .focus-frame:hover + .tooltip, #smith4-hover .focus-frame:hover, #smith4-hover .focus-frame:hover + .tooltip, #uk7-hover .focus-frame:hover, #uk7-hover .focus-frame:hover + .tooltip, #nethercott-hover .focus-frame:hover, #nethercott-hover .focus-frame:hover + .tooltip, #billington-hover .focus-frame:hover, #billington-hover .focus-frame:hover + .tooltip, #bowyer3-hover .focus-frame:hover, #bowyer3-hover .focus-frame:hover + .tooltip, #watts-hover .focus-frame:hover, #watts-hover .focus-frame:hover + .tooltip, #uk8-hover .focus-frame:hover, #uk8-hover .focus-frame:hover + .tooltip, #uk9-hover .focus-frame:hover, #uk9-hover .focus-frame:hover + .tooltip, #sparks-hover .focus-frame:hover, #sparks-hover .focus-frame:hover + .tooltip {
    opacity:1;
	-webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
   }
   
      /*P7*/
   #brandow3-hover .focus-frame:hover, #brandow3-hover .focus-frame:hover + .tooltip, #smith4-hover .focus-frame:hover, #smith4-hover .focus-frame:hover + .tooltip, #jones-hover .focus-frame:hover, #jones-hover .focus-frame:hover + .tooltip, #bennett-hover .focus-frame:hover, #bennett-hover .focus-frame:hover + .tooltip, #smith5-hover .focus-frame:hover, #smith5-hover .focus-frame:hover + .tooltip, #uk10-hover .focus-frame:hover, #uk10-hover .focus-frame:hover + .tooltip, #matthews-hover .focus-frame:hover, #matthews-hover .focus-frame:hover + .tooltip, #bennett2-hover .focus-frame:hover, #bennett2-hover .focus-frame:hover + .tooltip, #underhill-hover .focus-frame:hover, #underhill-hover .focus-frame:hover + .tooltip, #smith6-hover .focus-frame:hover, #smith6-hover .focus-frame:hover + .tooltip, #hagan-hover .focus-frame:hover, #hagan-hover .focus-frame:hover + .tooltip, #musgrove-hover .focus-frame:hover, #musgrove-hover .focus-frame:hover + .tooltip {
    opacity:1;
	-webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
   }
   
         /*P8*/
   #knowles2-hover .focus-frame:hover, #knowles2-hover .focus-frame:hover + .tooltip, #pattison-hover .focus-frame:hover, #pattison-hover .focus-frame:hover + .tooltip, #bint-hover .focus-frame:hover, #bint-hover .focus-frame:hover + .tooltip, #fraklin-hover .focus-frame:hover, #fraklin-hover .focus-frame:hover + .tooltip, #uk11-hover .focus-frame:hover, #uk11-hover .focus-frame:hover + .tooltip, #craig-hover .focus-frame:hover, #craig-hover .focus-frame:hover + .tooltip, #brown3-hover .focus-frame:hover, #brown3-hover .focus-frame:hover + .tooltip, #chambers-hover .focus-frame:hover, #chambers-hover .focus-frame:hover + .tooltip, #harrison-hover .focus-frame:hover, #harrison-hover .focus-frame:hover + .tooltip, #walpole2-hover .focus-frame:hover, #walpole2-hover .focus-frame:hover + .tooltip, #morris2-hover .focus-frame:hover, #morris2-hover .focus-frame:hover + .tooltip, #uk12-hover .focus-frame:hover, #uk12-hover .focus-frame:hover + .tooltip {
    opacity:1;
	-webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
   }
   
            /*P9*/
   #uk13-hover .focus-frame:hover, #uk13-hover .focus-frame:hover + .tooltip, #matthews2-hover .focus-frame:hover, #matthews2-hover .focus-frame:hover + .tooltip, #uk14-hover .focus-frame:hover, #uk14-hover .focus-frame:hover + .tooltip, #uk15-hover .focus-frame:hover, #uk15-hover .focus-frame:hover + .tooltip, #logan-hover .focus-frame:hover, #logan-hover .focus-frame:hover + .tooltip, #wood2-hover .focus-frame:hover, #wood2-hover .focus-frame:hover + .tooltip, #jones2-hover .focus-frame:hover, #jones2-hover .focus-frame:hover + .tooltip, #larsson-hover .focus-frame:hover, #larsson-hover .focus-frame:hover + .tooltip, #bennett3-hover .focus-frame:hover, #bennett3-hover .focus-frame:hover + .tooltip, #alexander-hover .focus-frame:hover, #alexander-hover .focus-frame:hover + .tooltip, #masters-hover .focus-frame:hover, #masters-hover .focus-frame:hover + .tooltip {
    opacity:1;
	-webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
   }
   
  
  
   
   .tooltip .rank, .tooltip .career, .tooltip .location, .tooltip .outcome {
   		font-size:13px;
   }
   .tooltip .name {
	   font-weight:700;
   		font-size: 15px;
   }
   
   .tooltip .outcome img {
   		max-height:15px!important;
		margin-right:3px;
		margin-bottom:-2px;
   }
   
   .tooltip p {
   	margin-bottom:0;
	margin-top:0;
   }
   
   .tooltip .content {
   		padding:15px;
   }
   
   .tooltip {
		background-image:url(/wp-content/themes/full-frame/images/133rdbattalion/icons/toooltip.svg);
		background-repeat:no-repeat;
		background-position:bottom;
		position:absolute;
		color:white;
    	width: 360px;
    	height: 140px;
		bottom:-7px;
		left:7px;
		background-size:380px;
	}
		.focus-frame {
		position:absolute;
		z-index:999;
		}
		
		.focus-frame img {
		z-index:999;
		}
		.rollover {
			position:absolute;
		}
		
@media only screen and (max-width: 768px){
.left-legend, .middle-legend, .right-legend {
		width:100%;
}
#wounded .legend-icon, #home .legend-icon {
		bottom:11px;
}

.middle-legend {
	margin-bottom:0px;
}
}

@media only screen and (max-width: 767px){
#details .column-half {
		width:100%;
}
}

#back-to-image {
    background-color: #666;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    color: #eee;
    cursor: pointer;
    height: 40px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    text-align: center;
    text-decoration: none;
    width: 40px;
    z-index: 9999;
}

#back-to-image:hover {
	background-color: #000;
    color: #fff;	
    text-decoration: none;
}

#back-to-image:before {
    content: '\f432';
}

#back-to-image:before {
    font-size: 26px;
	padding-top:5px;
}

.page-id-422 #scrollup {
	display:none!important;
	opacity: 0!important;
}