/* Developed by RWB July 2017 */
/* Protoype CSS file to help web contributors code responsive images */
/* This prototype could be be incorporated into the master_rwd.css */
/* The text below the image is optional */
/* If text is entered below the image, it will be centered. Decided not to format text (strong, emphasis, etc.) since requirements vary. Easy to format text in TeamSite.*/
/* Last updated 7/3/2017 */


/* ---- CSS for multiple centered images in the body WITHOUT captions---*/ 
/* --- Works best if the images are close to the same height --*/

#body .mult_img_container {
       text-align: center;
}
#body .mult_img_container img {
     vertical-align: middle;
     display: inline-block;
     max-width:100%;
     margin: 0em 0.5em 1em 0.5em;
}

/* Responsive for multiple centered images in the body WITHOUT captions---*/ 
/* Max with goes down to 85% so that the images don't expand off the screen */
@media screen and (max-width: 481px) {
#body .mult_img_container img {
max-width: 85%;}
}


/* ---- Column Left for 2 centered images in the body WITH captions ---*/ 
/* Container width 50% */
/* At viewport 481 pixels, the contaner expands to 100% */
/* 2 column container A*/
#body .containerA {
float:left;
width:45%;
}
 
/* Responsive Starts Here For 2 column container A*/
@media screen and (max-width: 481px) {
#body .containerA {
width:100%;}
}


/* 2 column container B */
#body .containerB {
float:left;
width:45%;
}
 
/* Responsive Starts Here For 2 column container B */
@media screen and (max-width: 481px) {
#body .containerB {
width:100%;}
}




/* ---- Left 15% ----*/ 
/* Image floats left */
/* Text in the div tag aligns center. */
/* Image width 15% */
/* At viewport 481 pixels, the image expands to 85% and aligns center */
#body .img_caption_left_15 {
float:left;
width:15%;
padding-right: 1em;
text-align:center;
}
 
#body .img_caption_left_15  img{
width: 100%;
}
 
/* Responsive Starts Here */
@media screen and (max-width: 481px) {
#body .img_caption_left_15 {
float:inherit;
margin-left:auto;
margin-right:auto;
display:block;
width:100%;
padding-right: 0em;}
}


/* ---- Left 25% ----*/ 
/* Image floats left */
/* Text in the div tag aligns center. */
/* Image width 25% */
/* At viewport 481 pixels, the image expands to 85% and aligns center */
#body .img_caption_left_25 {
float:left;
width:25%;
padding-right: 1em;
text-align:center;
}
 
#body .img_caption_left_25  img{
width: 100%;
}
 
/* Responsive Starts Here */
@media screen and (max-width: 481px) {
#body .img_caption_left_25 {
float:inherit;
margin-left:auto;
margin-right:auto;
display:block;
width:100%;
padding-right: 0em;}
}


/* ---- Left 33% ----*/ 
/* Image floats left */
/* Text in the div tag aligns center */
/* Image width 33% */
/* At viewport 481 pixels, the image expands to 85% and aligns center */
#body .img_caption_left_33 {
float:left;
width:33%;
padding-right: 1em;
text-align:center;
}
 
#body .img_caption_left_33 img{
width: 100%;
}
 
/* Responsive Starts Here */
@media screen and (max-width: 481px) {
#body .img_caption_left_33 {
float:inherit;
margin-left:auto;
margin-right:auto;
display:block;
width:100%;
padding-right: 0em;}
}

/* ---- Left 50% ----*/ 
/* Image floats left */
/* Text in the div tag aligns center and is bold text */
/* Image width 50% */
/* At viewport 481 pixels, the image expands to 85% and aligns center */
#body .img_caption_left_50 {
float:left;
width:50%;
padding-right: 1em;
text-align:center;
}
 
#body .img_caption_left_50  img{
width: 100%;
}

/* Responsive Starts Here */
@media screen and (max-width: 481px) {
#body .img_caption_left_50 {
float:inherit;
margin-left:auto;
margin-right:auto;
display:block;
width:100%;
padding-right: 0em;}
}

/* Responsive Starts Here for 2 column component */
@media screen and (max-width: 799px) {
#body .columnB .grid_6 .img_caption_left_50 {
float:inherit;
margin-left:auto;
margin-right:auto;
display:block;
width:100%;}
}




/* ---- Left 75% ----*/ 
/* Image floats left */
/* Text in the div tag aligns center and is bold text */
/* Image width 75% */
/* At viewport 481 pixels, the image expands to 85% and aligns center */
#body .img_caption_left_75 {
float:left;
width:75%;
padding-right: 1em;
text-align:center;
}
 
#body .img_caption_left_75 img{
width: 100%;
}

/* Responsive Starts Here */
@media screen and (max-width: 481px) {
#body .img_caption_left_75 {
float:inherit;
margin-left:auto;
margin-right:auto;
display:block;
width:100%;
padding-right: 0em;}
}


/* ---- Center 15% ----*/ 
/* Image aligns center */
/* Text in the div tag aligns center and is bold text */
/* Image width 15% */
/* At viewport 481 pixels, the image expands to 85% and aligns center */
#body .img_caption_center_15
{
width:15%;
margin-left:auto;
margin-right:auto;
text-align:center;
}
 
#body .img_caption_center_15 img{
    width: 100%;
}


/* Responsive Starts Here */
@media screen and (max-width: 481px) {

#body .img_caption_center_15 {
width:100%;}
} 


/* ---- Center 25% ----*/ 
/* Image aligns center */
/* Text in the div tag aligns center and is bold text */
/* Image width 25% */
/* At viewport 481 pixels, the image expands to 85% and aligns center */
#body .img_caption_center_25
{
width:25%;
margin-left:auto;
margin-right:auto;
text-align:center;
}
 
#body .img_caption_center_25 img{
    width: 100%;
}


/* Responsive Starts Here */
@media screen and (max-width: 481px) {

#body .img_caption_center_25 {
width:100%;}
} 


/* ---- Center 33% ----*/ 
/* Image aligns center */
/* Text in the div tag aligns center and is bold text */
/* Image width 33% */
/* At viewport 481 pixels, the image expands to 85% and aligns center */
#body .img_caption_center_33
{
width:33%;
margin-left:auto;
margin-right:auto;
text-align:center;
}
 
#body .img_caption_center_33 img{
    width: 100%;
}


/* Responsive Starts Here */
@media screen and (max-width: 481px) {

#body .img_caption_center_33 {
width:100%;}
} 


/* ---- Center 50% ----*/ 
/* Image aligns center */
/* Text in the div tag aligns center and is bold text */
/* Image width 50% */
/* At viewport 481 pixels, the image expands to 85% and aligns center */
#body .img_caption_center_50
{
width:50%;
margin-left:auto;
margin-right:auto;
text-align:center;
}
 
#body .img_caption_center_50 img{
    width: 100%;
}


/* Responsive Starts Here */
@media screen and (max-width: 481px) {

#body .img_caption_center_50 {
width:100%;}
} 

/* ---- Center 75% ----*/ 
/* Image aligns center */
/* Text in the div tag aligns center and is bold text */
/* Image width 75% */
/* At viewport 481 pixels, the image expands to 85% and aligns center */
#body .img_caption_center_75
{
width:75%;
margin-left:auto;
margin-right:auto;
text-align:center;
}
 
#body .img_caption_center_75 img{
    width: 100%;
}


/* Responsive Starts Here */
@media screen and (max-width: 481px) {

#body .img_caption_center_75 {
width:100%;}
}


/* ---- Right 15% ----*/ 
/* Image floats right */
/* Text in the div tag aligns center and is bold text */
/* Image width 15% */
/* At viewport 481 pixels, the image expands to 85% and aligns center */
#body .img_caption_right_15 {
float:right;
width:15%;
padding-left: 1em;
text-align:center;
}
 
#body .img_caption_right_15 img{
width: 100%;
}
 
/* Responsive Starts Here */
@media screen and (max-width: 481px) {
#body .img_caption_right_15 {
/*  float:inherit; Noticed something strange with the float right, so I'm commnenting out this section to see if it helps. */  
margin-left:auto;
margin-right:auto;
display:block;
width:100%;
padding-left: 0em;}
}

/* ---- Right 25% ----*/ 
/* Image floats right */
/* Text in the div tag aligns center and is bold text */
/* Image width 25% */
/* At viewport 481 pixels, the image expands to 85% and aligns center */
#body .img_caption_right_25 {
float:right;
width:25%;
padding-left: 1em;
text-align:center;
}
 
#body .img_caption_right_25 img{
width: 100%;
}
 
/* Responsive Starts Here */
@media screen and (max-width: 481px) {
#body .img_caption_right_25 {
/*  float:inherit; Noticed something strange with the float right, so I'm commnenting out this section to see if it helps. */  
margin-left:auto;
margin-right:auto;
display:block;
width:100%;
padding-left: 0em;}
}

/* ---- Right 33% ----*/ 
/* Image floats right */
/* Text in the div tag aligns center and is bold text */
/* Image width 33% */
/* At viewport 481 pixels, the image expands to 85% and aligns center */
#body .img_caption_right_33 {
float:right;
width:33%;
padding-left: 1em;
text-align:center;
}
 
#body .img_caption_right_33  img{
width: 100%;
}
 
/* Responsive Starts Here */
@media screen and (max-width: 481px) {
#body .img_caption_right_33 {
/*  float:inherit; Noticed something strange with the float right, so I'm commnenting out this section to see if it helps. */  
margin-left:auto;
margin-right:auto;
display:block;
width:100%;
padding-left: 0em;}
}

/* ---- Right 50% ----*/ 
/* Image floats right */
/* Text in the div tag aligns center */
/* Image width 50% */
/* At viewport 481 pixels, the image expands to 85% and aligns center */
#body .img_caption_right_50 {
float:right;
width:50%;
padding-left: 1em;
text-align:center;
}
 
#body .img_caption_right_50  img{
width: 100%;
}
 
/* Responsive Starts Here */
@media screen and (max-width: 481px) {
#body .img_caption_right_50 {
/*  float:inherit; Noticed something strange with the float right, so I'm commnenting out this section to see if it helps. */  
margin-left:auto;
margin-right:auto;
display:block;
width:100%;
padding-left: 0em;}
}

/* Responsive Starts Here for 2 column component */
@media screen and (max-width: 799px) {
#body .columnA .grid_6 .img_caption_right_50 {
/*  float:inherit; Noticed something strange with the float right, so I'm commnenting out this section to see if it helps. */  
margin-left:auto;
margin-right:auto;
display:block;
width:100%;}
}


/* ---- Right 75% ----*/ 
/* Image floats right */
/* Text in the div tag aligns center and is bold text */
/* Image width 75% */
/* At viewport 481 pixels, the image expands to 85% and aligns center */
#body .img_caption_right_75 {
float:right;
width:75%;
padding-left: 1em;
text-align:center;
}
 
#body .img_caption_right_75  img{
width: 100%;
}
 
/* Responsive Starts Here */
@media screen and (max-width: 481px) {
#body .img_caption_right_75 {
/*  float:inherit; Noticed something strange with the float right, so I'm commnenting out this section to see if it helps. */  
margin-left:auto;
margin-right:auto;
display:block;
width:100%;
padding-left: 0em;}
}