/* Stylesheet.css */

#wrapper  {
/* width: 100%; */
max-width: 960px;
margin: 0 auto;
/* border: solid 1px #fe9900; */
border: solid 4px #003300;
}

body  {
font-family:Arial; Helvetica; sans-serif;
background-color: #ffeec6;
}


#header {
/*        background-color: #fe9900; */
        color: white;
}


h1.header {
background-color: #006600;
text-align: center;
margin: 0;
}


h1.header-eng {
background-color: #0000CD;
text-align: center;
margin: 0;
}


.topnav {
  overflow: hidden;
  background-color: #98bf21;
}

.topnav a {
/*  width: 16.66%; */
  float: left;
  display: block;
/*  color: #f2f2f2;   */
  color: #000000;
  padding: 14px 12px;
  text-decoration: none;
  font-size: 22px;
  text-align: center;
/*  margin: 0 auto;   */
  margin: 0 1rem;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/*Select all elements with the class name icon that are descendents
  of the element with a class of topnav  */
.topnav .icon {
  display: none;
}

h2.ptitle  {
text-align:center;
}

/*--------------------------------------------------------------/
/* Engineering Site Topnav Code */

.topnav-eng {
  overflow: hidden;
/*  background-color: #98bf21; */
/*  background-color: #666699; */
    background-color: #d1d1e0;
  color: #000000;
}

/* Style Links in NAV bar */

.topnav-eng a {
/*  width: 16.66%; */
  float: left;
  display: block;
/*  color: #f2f2f2; */
  color: #000000;
  padding: 14px 12px;
  text-decoration: none;
  font-size: 22px;
/*  text-align: center; */
/*  margin: 0 auto; */
  margin 0;
}

.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav-eng on small screens */
.topnav-eng .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav-eng */
.dropdown .dropbtn {
  font-size: 22px;  
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
/*  font-family: inherit; */
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background to dropdown links on hover */

.topnav-eng a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */

.dropdown:hover .dropdown-content {
  display: block;
}

.topnav-eng a:hover {
  background-color: #ddd;
  color: black;
}

/* Style for navbar Image */

.navbar-image {
    width: 53px;
     height: 80px;
/*    border-radius: 50%; */
/*    overflow: hidden;
/*    margin-top: -6px; */
}

.container1  {
/*  width: 210px; */
/*  height: 53; */
  height: 80;
/*  float: left; */
/*  border: solid 1px green; */
/*  margin: 10px; */
}

/*---------------------------------------------------------------*/


ul.list1 {
list-style-position: inside;
/* width: 600px; */
width: 80%;
list-style-type: disc;
margin: auto;
border: 4px solid green;
font-size: 20px;
}

li.list1 {
margin: 5px;
}

h3.alist   {
text-align:center;
}


p.story  {
padding: 0 1% 0 1%;
}

.box  {
margin: auto;
width: 100%;
text-align: center;
vertical-align: middle;
border-bottom: 4px solid #003300;
}

.inner_box  {
display: inline-block;
margin: 0 auto;
padding: 2%;
vertical-align: top;
width:40%;
}

.inner_box_1  {
display: inline-block;
margin: 0 auto;
padding: 2%;
/* vertical-align: middle; */
vertical-align: middle;
width:40%;
}

/* Style for Main Gallery Pages - 4 Columns */
.inner_box_2  {
display: inline-block;
margin: 0 auto;
padding: 2%;
vertical-align: middle;
width:20%;
}


/* Style for Powershot Images */
img.land {
width: 80%;
border: 12px ridge #FFCC99;
/* margin: 4% 0% 0% 0%; */
}

/* Style for 40D Images */
img.land1 {
width: 90%;
border: 12px ridge #FFCC99;
/* margin: 8% 0% 0% 0%; */
}

img.land-h  {
    border: 12px ridge #FFCC99;
    margin-top: 4%;
}


img.portrait {
width: 60%;
border: 12px ridge #FFCC99;
/* margin: 4% 0% 0% 0%; */
}

img.portrait1 {
width: 60%;
border: 12px ridge #FFCC99;
/* margin: 4% 0% 0% 0%; */
}

img.portrait-h {
/*    display: block;
    margin-left: auto;
    margin-right: auto; */
    margin-top: 4%;
    border: 12px ridge #FFCC99;
      }


.inner_box p  {
font-weight: bold;
}

.inner_box_1 p  {
font-weight: bold;
}

.inner_text_box  {
display:inline-block;
margin: 4%;
vertical-align: middle;
width: 40%;
border: 5px solid green;
}

.inner_text_box p  {
text-align: left;
}

p.image-label {
text-align: center;
margin: 0;
text-decoration: underline;
}

p.caption {
margin: 5px 0px 0px 0px;
text-align: justify;
}


/****************************************************************/
/* Coding for Home Page */

.container { width: 100%; max-width: 1280px; min-width: 320px; margin: 0 auto; clear: both; }

/*.col-3 { float: left;  width: 30.8%; margin-right: 3.8%; text-align: center} */
/* .col-3 { float: left;  width: 30.8%; text-align: center; border: 2px solid black} */
.col-3 { float: left;  width: 33%; text-align: center;}

/* Box to keep image and caption togetner */


/*.last { margin-right: 0; } */

a.textlink:hover, a.ptitle:active
{
color:#FF0000;
}

img.grframe {
   border: 1px solid #4C3C1B;
   padding: 3%;
   background-color: #3E451C;
   MARGIN-TOP: 4%;
}

img.portrait2 {
/*    display: block;
    margin-left: auto;
    margin-right: auto; */
    margin-top: 4%;
    border: 12px ridge #FFCC99;
      }
      
 img.land2  {
    border: 12px ridge #FFCC99;
    margin-top: 4%;
}     

/* Supporter Name Font Size */
   p.name-size  {
   font-size: 120%;
   margin-top: 10%;
/*   margin-top: 20px; */
      }

/* Supporter Title Style */
   .supporter-title{
      margin-bottom: 20px;
      }

/* Line Height for Supporter List */
   .supporter-list{
    line-height: 25%;
      }

/* Quote Box  */
       .quote-box  {
         width: 100%;
/*         padding: 5px; */
         margin: auto;
/*         text-align: center; */
/*         border: 1px solid green;*/
      }

/*Quote Font */
   p.quote{
   font-family: "Times New Roman", Times, serif;
   font-size: 120%;
   font-style: italic;
   font-weight: bold;
      }

/* Author */
   p.author   {
/*       margin: auto; */
       text-align: center;
      }
      

/* End of Home Page Coding */
/****************************************************************/

/*---------------------------------------------------------------*/
/*Enginering Page Data */

/* The "responsive" class is added to the topnav-eng with JavaScript when the user clicks on the icon. This class makes the topnav-eng look good on small screens (display the links vertically instead of horizontally) */

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav-eng (.icon) */

/*---------------------------------------------------------------*/


@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  .topnav-eng a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav-eng a.icon {
    float: right;
    display: block;
  }
  
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  
  /* Test--------------------------------------------------------------*/
  
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
   }
    
  
/*----------------------------------------------------------------------*/  

  
  .topnav-eng.responsive {position: relative;}
  .topnav-eng.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav-eng.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav-eng.responsive .dropdown {float: none;}
  .topnav-eng.responsive .dropdown-content {position: relative;}
  .topnav-eng.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
   }
   
}

@media only screen and (max-width:800px) { 
    /* Tablet view: 1 tiles */
    .box {
        width: 100%;
        float: none;
}
    .inner_box  {
        width: 90%
}

    .inner_box_2  {
        width: 90%
}

}

/***************************************************************/
/* Media Code for Home Page */





/* for 980px or less */
@media screen and (max-width: 980px) {
	
	#pagewrap {
		width: 94%;
	}
	.col-3 {
		width: 41%;
		padding: 1% 4%;
	}	
}



/* for 700px or less */
@media screen and (max-width: 600px) {

	.col-3 {
		width: auto;
		float: left;
	}
	
}


/****************************************************************/