/*
 * botmgallery.css
 */

/* ID's' */
#botmgallery { 
   width: 100%;
}

#botmenddiv { 
   width: 100%; 
   clear: both;
}

#botmtitle {
   font-size: 24px;
   font-weight: normal;
   text-align: center;
}

/* Classes */
.botmgalleryyrbox {
   margin: 0 auto;
   width: 80%;
   padding: 1em;
   background-color: lavender;
   border-style: solid;
   border-color: white;
   border-width: 20px;      
   overflow: hidden;
}

.botmgalleryyrtitle {
   width: 100%;
   text-align: center;
   font-weight: 700;
   font-size: 18px;
   background-color: lightblue;
}

.botmgallerymthbox { 
   width: 25%;
   height: 220px;
   float: left;
   text-align: center; 
   padding: .5em;
}

.botmgallerymthbox img {
 max-width: 100%;
 max-height: 100%;
}
 
/* Elements */
/* define a special link class that is used to indicate a "Owner Unknown" in the BOTM Gallery */
a.ownerunknown:link { color: #990000; }
a.ownerunknown:visited {color: #FF3300; }

/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
   #botmgallery { width: 100%; }
   .botmgalleryyrbox { width: 100%; }
   .botmgalleryyrtitle { width: 100%; }
   .botmgallerymthbox { width: 25%; }
}

/* Tablet Portrait (768px) */
@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {
   #botmgallery { width: 100%; }
   .botmgalleryyrbox { width: 100%; }
   .botmgalleryyrtitle { width: 100%; }
   .botmgallerymthbox { width: 50%; }  
}

/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
   #botmgallery { width: 100%; }
   .botmgalleryyrbox { width: 100%; }
   .botmgalleryyrtitle { width: 100%; }
   .botmgallerymthbox { width: 50%; }
}

/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
   #botmgallery { width: 100%; }
   .botmgalleryyrbox { width: 100%; }
   .botmgalleryyrtitle { width: 100%; }
   .botmgallerymthbox { width: 50%; }
}