/****************************************/
/*This stylesheet contains style elements for the Maryland Geological Survey website - reformatted in 2013*/
/*color reference: */
	/* blue on Hydro pages: #466876 */
	/* brown on Maryland Geology pages: #777257 */
	/* aqua from Coastal pages: #739B8A */
	
/* --Styles are organized in the following order: (use Ctrl+F to search for section using the $ prefix [example: $FOOTER ])
GENERAL CONTENT STYLES
CONTENT DISPLAY STYLES
HEADER
FOOTER
LEFT SIDEBAR
RIGHT SIDEBAR
SIDEBAR CONTENT BOXES
FIGURES AND IMAGES
SEARCH
BUTTON STYLES
MISCELLANEOUS STYLES
****MOBILE AND SMALLER SCREEN SIZE (styles triggered by @media queries)
********************************/
/********************************************************************************************************************/

/* $GENERAL CONTENT STYLES
   ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
   
html { min-height: 100%; overflow-x: hidden; }

body {
	font: 0.775em/1.2 Helvetica Neue, Arial, Helvetica, sans-serif;
	color: #666666;
	border-top: 30px solid #466876;
	background: -moz-linear-gradient(top, #C5C5C5 30px, #FFF 41px);
	background: -webkit-linear-gradient(top, #C5C5C5 30px, #FFF 41px);
	min-height: 100%;
	line-height: 1.4;
	position: center;
}

/*.content { line-height: 1.3; }*/
.content p { margin-bottom: 1.2em; }
.content ul { margin: 0 2em 1em; list-style: disc outside; }
.content ol { margin: 0 2em 1em; list-style: decimal outside; }
.content blockquote { border-left: 8px solid #CCC; margin: 0 2em 1em; padding-left: 1em; }
.content .linklist {position: absolute; }
.content strong, .content b { font-weight: bold; }
.content em, .content i { font-style: italic; }

.content h2 { font-size: 1.55em; color: #666; margin-bottom: 0em; }
.content h3 { font-size: 1.3em; margin-bottom: 0.5em; }
.content h4 { font-size: 1.2em; margin-bottom: 0.3em; }
.content h5 { font-size: 1.1em; margin-bottom: 0.3em; }
.content h6 { font-size: 1.1em; font-weight: normal; margin-bottom: 0.2em; }
.content h7 { font-size: .8em; color: #666; margin-bottom: 0em; }
.content table { }

/* Main content area */
.main { padding-bottom: 3em; }
.main h1 {
	background: #466876;
	color: #FFF;
	font: bold 1.9em Helvetica, Arial, sans-serif;
	line-height: 1;
	padding: 11px 13px 8px;
	margin: 0 0 23px;
}

.main h1.noMargin { margin-bottom: 0; }

/* general link style and behavior */
a { text-decoration: none; color: #336699; }
a:hover { text-decoration: none; color: black;}
a:visited { text-decoration: none; color: purple; }
header a:visited { text-decoration: none; color: inherit }
footer a:visited { text-decoration: none; color: inherit }

hr { margin: 1.5em 0; }

/* content area hr style used so it won't drop below left sidebar menu */
hr.content { clear: right; margin: 1.5em 0; }

/* END GENRAL CONTENT STYLES
	------------------------------------------------------------------------ */

/* $CONTENT DISPLAY STYLES
   ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* layout options for content */
.centered { max-width: 1140px; margin-left: auto; margin-right: auto; padding: 0 20px; }
.twoColumnLeft { margin-left: 23%; } /* for content area with left sidebar */
.twoColumnRight { margin-right: 23%; } /* for content area with right sidebar */
.threeColumn { margin-left: 23%; margin-right: 25%; } /* for content area with left sidebar and right sidebar */

/* styles to display content in flexible image slideshow - as on Home page or Hydrogeology Program page */
.indexWrapper {
  background: none repeat scroll 0 0 #ECE9D8;
  border-color: #777257;
  border-radius: 0 0 10px 10px;
  border-style: solid;
  border-width: 26px 0 0;
  box-shadow: 0 4px 4px 0px;
  -webkit-box-shadow: 0 4px 4px 0px;
  margin-bottom: 15px;
  padding: 5px;
}
.HomePageText {
font-size: 15px;
font-weight: 700;
padding: 10px;
}

.tag{
display:block;
background:#f7cf27;
opacity:0.85;
position:absolute;
z-index:11;
top:20px;
left:0px;
font-size:16px;
padding:10px 20px;
text-align:center;
color:#252525;
font-weight:bold
}
.flexWrapper { height: auto; clear: none; }


/* styles to display content in 2 columns, will change to one column for screen size less than 800px */
.columns{
	/* FF 3.5+*/
	-moz-column-count: 2;
	-moz-column-gap: 20px;
	-moz-column-rule: none;
	/*Saf3, Chrome*/
	-webkit-column-count: 2;
	-webkit-column-gap: 20px;
	-webkit-column-rule: none;
	column-count: 2;
	column-gap: 20px;
}

/* styles to display content in boxes  */
.contentBox { /* to display content in a radiused-border box to fill entire width (inline-block) */
	background: none repeat scroll 0 0 #ECE9D8; /* default gray background - can apply color ID, see below */
	border-radius: 10px;
	display: inline-block;
	margin-bottom: 10px;
	padding: 15px;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	width: auto;
	min-width: 93%;
}
.columns .contentBox { /* to display content in a radiused-border box to fit into 2 columns (block) */
  display: inline-block;
}
/* colors and backgrounds for content box */
#red {background: #F8B5A4;}
#blue {background: #A5B0B4;}
#green {background: #7FCBAD;}
#purple {background: #F8B7CB;}
#yellow {background: #FFF9AD;}
#orange {background: #FEC693;}
#aqua {background: #B0DED3;}
#brown {background: #F2CC85;}
#brown-light {background: #FEE799;}
#brown-dark {background: #FCC143;}
#blue-light {background: #A4DCED;}
#blue-dark {background: #7FBEEA;}
#gray-light {background: #ECECEC;}
#gray-dark {background: #BEBEBE;}
#gray-light {background: #D4D0C8;}

 a .contentBox:hover h2{ /* to highlight a linked content box's text upon hover */
  color: black;
}

/* to display content in a main content box as on the Groundwater Current Projects pages */
.projectBoxR {
	background: none repeat scroll 0 0 #ECE9D8;
	border-color: #466876;
	border-style: solid;
	border-width: 2px;
	color: #000066;
	float: right;
	margin: 0 0 10px 10px;
	width: 250px;
}
.projectBoxR .linksList { list-style: none outside none;}
.projectBoxR .linksList li a {
	display: block;
	padding: 2px 17px;
}
.projectBoxR .linksList li a:hover {
    background: none repeat scroll 0 0 #DBE2E4;
    text-decoration: none;
	color: black;	
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: inset 0px 1px 1px #6d6b6b;/*FF 3.5+*/
	-webkit-box-shadow: inset 0px 1px 1px #6d6b6b;/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
	box-shadow: inset 0px 1px 1px #6d6b6b;
}
.projectBoxR .linksList p { color: #666666; }
.projectBoxR h1 { font-size: 16px; clear: both; margin: 0 0 0.5em 0; text-align: center; color: #ECE9D8; }
.projectBoxR a {
	background: none repeat scroll 0 0 #ECE9D8;
	color: #466776;
	text-align: left;
}
.projectBoxR img{ /* to display an overview map image of project area as on Current Projects pages */
display: block;
margin: 0px auto 10px auto;
background: white;
padding: 5px;
border: 1px solid #466876;
}

/* END CONTENT DISPLAY STYLES
	------------------------------------------------------------------------ */
   
/* $HEADER
   ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

header { position: relative; height: 96px; margin-bottom: 48px; }

/* logo styles */
#DNRbanner { float: left; margin-top: -21px; } /* white text above MGS logo */
#logo { position: absolute; bottom: 0; } /* MGS logo */
#MDlogo { float: right; padding-top: 0px; border-top-width: 0px; margin-top: -28px; margin-right: 0; } /* Maryland logo */

/* style for header menu */
header nav {
	/*font: 1.25em Helvetica, Arial, sans-serif;*/
	font-size: 1.25em;
	position: absolute;
	right: 20px; /* From .centered */ bottom: -10px;
	text-align: right;
}

#menu { display: inline-block; }

header nav ul { margin-bottom: -20px; }
header nav li { display: inline-block; margin-left: 0.5em; white-space: nowrap;}
header nav a { color: #666; padding: 6px 6px; border-left: 1px solid #ECE9D8; border-bottom: 1px solid #ECE9D8;}
header nav a:hover { color: #666; text-decoration: none; background: #EEEEEE; padding: 6px 6px;}

/* Active state for Server Side Includes - horizontal navigation*/
header#home a#nav-home,
body#home a#nav-home,
header#mdgeo a#nav-mdgeo,
body#mdgeo a#nav-mdgeo,
body#geotour a#nav-geotour,
body#geomap a#nav-geomap,
body#phymap a#nav-phymap,
body#fossil a#nav-fossil,
body#cave a#nav-cave,
body#quake a#nav-quake,
body#minerals a#nav-minerals,
body#envgeo a#nav-envgeo,
body#currentg a#nav-currentg,
body#pastg a#nav-pastg,
body#snh a#nav-snh,
body#tr a#nav-tr,
body#lq a#nav-lq,
body#help a#nav-help,
body#site a#nav-site,
body#snc a#nav-snc,
body#sned a#nav-sned
{ background-color: #777257; color: #FFFFFF;  font-weight: bold;}

header#gw a#nav-gw,
body#gw a#nav-gw,
body#mdgw a#nav-mdgw,
body#howgw a#nav-howgw,
body#wu a#nav-wu,
body#qw a#nav-qw,
body#gwf a#nav-gwf,
body#well a#nav-well,
body#faq a#nav-faq,
body#current a#nav-current,
body#completed a#nav-completed,
body#hydro a#nav-hydro
{ background-color: #466876; color: #FFFFFF;  font-weight: bold;}

header#coastal a#nav-coastal,
body#cg a#nav-cg,
body#coastal a#nav-coastal,
body#currentc a#nav-currentc,
body#pastc a#nav-pastc,
body#biblio a#nav-biblio,
body#related a#nav-related,
body#oyster a#nav-oyster,
body#coastres a#nav-coastres,
body#baysed a#nav-baysed,
body#resbath a#nav-resbath
{ background-color: #739B8A; color: #FFFFFF;  font-weight: bold;}

header#pubs a#nav-pubs,
body#pubs a#nav-pubs,
body#maps a#nav-maps,
body#int a#nav-int,
body#reports a#nav-reports,
body#data a#nav-data,
body#coll a#nav-coll,
body#ep a#nav-ep,
body#archives a#nav-archives
{ background-color: #565249; color: #FFFFFF;  font-weight: bold;}

header#about a#nav-about,
body#about a#nav-about,
body#org a#nav-org,
body#staff a#nav-staff,
body#lib a#nav-lib,
body#dir a#nav-dir,
body#hist a#nav-hist,
body#weav a#nav-weav,
body#ques a#nav-ques,
body#empl a#nav-empl
{ background-color: #875028; color: #FFFFFF;  font-weight: bold;}

/* END HEADER
   ------------------------------------------------------------------------ */

/* $FOOTER
   ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
footer {
	background: none repeat scroll 0 0 #666666;
	border-bottom: 5px solid #466876;
	border-top: 5px solid #466876;
	clear: both;
	color: #CCCCCC;
	margin-top: 20px;
	min-height: 145px;
	padding: 10px 0;
	width: 100%;
}

footer .centered {	position: relative;}

footer a { color: #CCC; }
footer a:hover { color: #040607; text-decoration: none; }

.footerLeft {float: left; clear: none; width: 185px;}
.footerRight {float: right; font-size: 0.9em; text-align: right;}

.mgsFooterLogo { margin-top: 35px;}
.mdFooterLogo {	display: none; }
.socialMedia {margin: 0 5px;}
/* END FOOTER
   ------------------------------------------------------------------------ */

/* $LEFT SIDEBAR
   ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#sidebarLeft { float: left; width: 20%; padding-bottom: 2em; overflow: hidden; }
#sidebarLeft li { margin-bottom: 2px; }
#sidebarLeft li a {
	display: block;
	padding: 5px 11px 4px;
}

#sidebarLeft > ul { margin-bottom: 30px; padding: 0px; }
#sidebarLeft .level1 > a {
	background: #666;
	color: #FFF;
}
#sidebarLeft .level1 > a:hover {
	background: #888;
}
#sidebarLeft ul ul { margin-top: 2px; }

#sidebarLeft .level2,
#sidebarLeft .level3,
#sidebarLeft .level4 {
	margin-left: 12px;
}
#sidebarLeft a {
	background: #CCC;
	color: #333;
}
#sidebarLeft a:hover {
	background: #eee;
	text-decoration: none;
}
#sidebarLeft .level3  {
	font-size: 0.95em;
}
#sidebarLeft .level3 a {
	background: #ddd;
}
#sidebarLeft .level3 a:hover {
	background: #eee;
}
#sidebarLeft .level4  {
	font-size: 0.95em;
}
#sidebarLeft .level4 a {
	background: #eee;
}
#sidebarLeft .level4 a:hover {
	background: #fff;
}

#sidebarLeft .active > a {
	background-color: #466876;
	color: #FFF; 
	font-weight: bold; 
}
#sidebarLeft .active > a:hover {
	background-color: #466876;
}
/* END LEFT SIDEBAR
   ------------------------------------------------------------------------ */
   
/* $RIGHT SIDEBAR
   ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
   
#sidebarRight {
    float: right;
    padding-bottom: 2em;
    width: 22.2%;
}
/* END RIGHT SIDEBAR
   ------------------------------------------------------------------------ */
   
/* $SIDEBAR CONTENT BOXES
   ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.topics {
	background: none repeat scroll 0 0 #ECE9D8;
}
.featured {
  color: #888888;
  font-size: 1em;
  margin: 0 0 20px;
  padding: 15px 13px 6px;
}
#sidebarRight .linksList li a, #sidebarLeft .linksList li a {
    display: block;
    padding: 5px 0px 0px 5px;
	background: none repeat scroll 0 0 #ECE9D8;
	color: #466776;
}
#sidebarRight .linksList li a:hover, #sidebarLeft .linksList li a:hover {
    background: none repeat scroll 0 0 #DBE2E4;
    text-decoration: none;
	color: black;	
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: inset 0px 1px 1px #6d6b6b;/*FF 3.5+*/
	-webkit-box-shadow: inset 0px 1px 1px #6d6b6b;/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
	box-shadow: inset 0px 1px 1px #6d6b6b;
}

#sidebarRight h1, #sidebarLeft h1 { font-size: 15px; clear: both; margin: 0; text-align: center; }

#sidebarRight hr, #sidebarLeft hr { clear: both; margin: 0.5em 0; }

ul.linksList { padding: 0; }

.pdf-icon {margin: 0 5px -2px 0;} /* used to add margin in publication downloads and data box between icon and text */
.map-icon {margin: 0 5px -4px 0;}

/* END SIDEBAR CONTENT BOXES
   ------------------------------------------------------------------------ */
   
/* $FIGURES AND IMAGES
   ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* styles responsive maps with image mapped links */
.mapIndex { float: right;} /* used for responsive map on building stones of Baltimore pages */
img[usemap] { /* used for responsive map that will resize and retain image maps */
	border: none;
	height: auto;
	max-width: 100%;
	width: auto;
}

#baltStonesMap { /* used for responsive map on building stones of Baltimore pages */
	max-width: 345px;
	max-height: 397px;
	border: 3px solid #666666;
	-moz-border-radius: 10px;/*Firefox*/
	-webkit-border-radius: 10px;/*Safari, Chrome*/
	border-radius: 10px;
	margin-bottom: 20px;
	margin-left: 10px;
	padding: 2px;
}
#caveMap { /* used for responsive map on Gallery of Caves pages - will center the map in mapBox (see below) */
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.mapBox { /* used to contain responsive map on Gallery of Caves pages */
  border: 4px solid #777257;
  border-radius: 10px 10px 10px 10px;
  /* -webkit-box-shadow: 0px 2px 2px 0px #6d6b6b;
  box-shadow: 0 2px 2px 0px #6D6B6B; */
  margin: 10px 0;
  padding: 5px;
  clear: both;
}
/* use these styles for images that don't need resizing (250px or less) - for mobile screens the floats are removed and the images are centered */
img.right, img.left { display: block; padding: 1px; }
img.right { float: right; margin-left: 1.5em; margin-bottom: 1em; }
img.left { float: left; margin-right: 1.5em; margin-bottom: 1em; }
img.middle {vertical-align: middle;}

.pubtitle { font-weight: bold; }
.pubimage {
	float: left;
	border: 1px none #466876;
	padding: 1px;
	margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-left: 0px;
}
.staffimage {
	float: left;
	border: 1px solid #466876;
	padding: 1px;
	margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-left: 0px;
}

.mainImage {
	margin-bottom: 23px; /* Surrogate h1 margin */
	position: relative;
	overflow-y: hidden;
}

.mainImage img { /* full width image with colored bottom border */
	padding-bottom: 1px;
	border-bottom: 5px solid #466876;
	display: block;
	max-width: 100%;
}

.image100 {		/* image with 100% width  - good for use on images within a figure element */
	display: block;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

.img150pxR { display: block; width: 150px; float: right; margin-left: 12px; margin-bottom: 12px; } /* image with 150px width, floated right - for mobile screens the float is removed and the image is centered */
.img150pxL { display: block; width: 150px; float: left; margin-right: 12px; margin-bottom: 12px; } /* image with 150px width, floated left - for mobile screens the float is removed and the image is centered */
.img200pxR { display: block; width: 200px; float: right; margin-left: 12px; margin-bottom: 12px; } /* image with 200px width, floated right - for mobile screens the float is removed and the image is centered */
.img200pxL { display: block; width: 200px; float: left; margin-right: 12px; margin-bottom: 12px; } /* image with 200px width, floated left - for mobile screens the float is removed and the image is centered */
.img250pxR { display: block; width: 250px; float: right; margin-left: 12px; margin-bottom: 12px; } /* image with 250px width, floated right - for mobile screens the float is removed and the image is centered */
.img250pxL { display: block; width: 250px; float: left; margin-right: 12px; margin-bottom: 12px; } /* image with 250px width, floated left - for mobile screens the float is removed and the image is centered */
.img300pxR { display: block; width: 300px; float: right; margin-left: 12px; margin-bottom: 12px; } /* image with 300px width, floated right - for mobile screens the float is removed and the image is centered */
.img300pxL { display: block; width: 300px; float: left; margin-right: 12px; margin-bottom: 12px; } /* image with 300px width, floated left - for mobile screens the float is removed and the image is centered */
.img330pxR { display: block; width: 330px; float: right; margin-left: 12px; margin-bottom: 12px; } /* image with 330px width, floated right - for mobile screens the float is removed and the image is centered */
.img330pxL { display: block; width: 330px; float: left; margin-right: 12px; margin-bottom: 12px; } /* image with 330px width, floated left - for mobile screens the float is removed and the image is centered */
.img350pxR { display: block; width: 350px; float: right; margin-left: 12px; margin-bottom: 12px; } /* image with 350px width, floated right - for mobile screens the float is removed and the image is centered */
.img350pxL { display: block; width: 350px; float: left; margin-right: 12px; margin-bottom: 12px; } /* image with 350px width, floated left - for mobile screens the float is removed and the image is centered */

.fig50R { width: 46%; float: right; margin-left: 12px; margin-bottom: 12px; } /* figure with ~50% width (use with .image100 class), floated right - for mobile screens the float is removed and the figure is centered */
.fig50L { width: 46%; float: left; margin-right: 12px; margin-bottom: 12px; } /* figure with ~50% width (use with .image100 class), floated left - for mobile screens the float is removed and the figure is centered */
.fig200pxL { display: block; width: 200px; float: left; margin-right: 12px; margin-bottom: 12px; } /* For use with caption - figure with 250px width (use with .image100 class), floated right - for mobile screens the float is removed and the figure is centered */
.fig200pxR { display: block; width: 200px; float: right; margin-left: 12px; margin-bottom: 12px; } /* For use with caption - figure with 250px width (use with .image100 class), floated left - for mobile screens the float is removed and the figure is centered */
.fig250pxL { display: block; width: 250px; float: left; margin-right: 12px; margin-bottom: 12px; } /* For use with caption - figure with 250px width (use with .image100 class), floated right - for mobile screens the float is removed and the figure is centered */
.fig250pxR { display: block; width: 250px; float: right; margin-left: 12px; margin-bottom: 12px; } /* For use with caption - figure with 250px width (use with .image100 class), floated left - for mobile screens the float is removed and the figure is centered */
.fig250pxCenter { display: block; width: 250px; float: none; margin: 15px auto; } /* For use with caption - figure with 250px width (use with .image100 class) */
.fig300pxL { display: block; width: 300px; float: left; margin-right: 12px; margin-bottom: 12px; } /* For use with caption - figure with 300px width (use with .image100 class), floated right - for mobile screens the float is removed and the figure is centered */
.fig300pxR { display: block; width: 300px; float: right; margin-left: 12px; margin-bottom: 12px; } /* For use with caption - figure with 300px width (use with .image100 class), floated left - for mobile screens the float is removed and the figure is centered */
.fig300pxCenter { display: block; width: 300px; float: none; margin: 15px auto; } /* For use with caption - figure with 300px width (use with .image100 class) */
.fig350pxL { display: block; width: 350px; float: left; margin-right: 12px; margin-bottom: 12px; } /* For use with caption - figure with 350px width (use with .image100 class), floated right - for mobile screens the float is removed and the figure is centered */
.fig350pxR { display: block; width: 350px; float: right; margin-left: 12px; margin-bottom: 12px; } /* For use with caption - figure with 350px width (use with .image100 class), floated left - for mobile screens the float is removed and the figure is centered */
.fig350pxCenter { display: block; width: 350px; float: none; margin: 15px auto; } /* For use with caption - figure with 350px width (use with .image100 class) */
.figureFull {/* For use with caption - figure the full width of screen (use with .image100 class for responsive image, maybe use max-width declaration) */
border: 2px solid;
border-radius: 10px;
border-color: #CECCBD;
clear: both;
margin: 10px 0px 10px 0px;
padding: 5px;
overflow: hidden;
}
.figureFull img, .fig350pxL img, .fig350pxR img, .fig300pxL img, .fig300pxR img.fig250pxL img, .fig250pxR img, .fig200pxL img, .fig200pxR img { /* To center image in figure class - for image that doesn't resize with screen resolution */
display: block;
margin-left: auto;
margin-right: auto;
}

.fig50L figcaption, .fig50R figcaption, .fig250pxL figcaption, .fig250pxR figcaption, .fig200pxL figcaption, .fig200pxR figcaption, .fig350pxL figcaption, .fig350pxR figcaption, .fig300pxL figcaption, .fig300pxR figcaption, .figureFull figcaption, .contentBox figcaption, figcaption {
	display: block;
	font-size: 1em;
	font-style: italic;
	font-weight: bold;
	padding: 5px 0;
	text-align: center;
	}

.caption {
	position: absolute;
	left: 0; bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	color: #FFF;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding: 0.4em 0.6em;
}

.mainImage .caption { width: 100%; }

/* styles to display image to look like 35mm slide (as on cave pages) best used with floatbox - all will have total width of 250px to fit on most mobile screens */
.slideL { /* floated to the left */
	background-image:url('/images/paper_bg.jpg');
	border: 1px solid;
	border-radius: 10px;
	border-color: #CECECE;
	box-shadow: 0 2px 2px 0px #6D6B6B;
	-webkit-box-shadow: 0 2px 2px 0px #6D6B6B;
	float: left;
	margin: 10px 10px 10px 0px;
	padding: 5px;
	width: 244px;
}

.slideR { /* floated to the right */
	background-image:url('/images/paper_bg.jpg'); /* background image to make slide look like paper */
	border: 1px solid;
	border-radius: 10px;
	border-color: #CECECE;
	box-shadow: 0 2px 2px 0px #6D6B6B;
	-webkit-box-shadow: 0 2px 2px 0px #6D6B6B;
	float: right;
	margin: 10px 0px 10px 10px;
	padding: 5px;
	width: 244px;
}

.slideCenter{ /* not floated - centered within div */
	background-image:url('/images/paper_bg.jpg'); /* background image to make slide look like paper */
	border: 1px solid;
	border-radius: 10px;
	border-color: #CECECE;
	box-shadow: 0 2px 2px 0px #6D6B6B;
	-webkit-box-shadow: 0 2px 2px 0px #6D6B6B;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 15px;
	padding: 5px;
	width: 244px;
}

.slideR figcaption, .slideL figcaption , .slideCenter figcaption { /* using a google web font 'Knewave' that looks like handwritten marker on 35mm slide */
	display: block;
	font-family: 'Knewave', cursive;
	font-size: 1.3em;
	font-style: normal;
	font-weight: normal;
	letter-spacing:1.1px;
	padding: 2px 0 0;
	text-align: center;
}
.slideImg {
	width: 200px;	
	border-top: 2px solid #888888; /* borders are styled to look like inset film in paper slide */
	border-right: 2px solid #C7C7C7;
	border-left: 2px solid #C7C7C7;
	border-bottom: 3px solid white;
	padding: 0px;
	margin: 20px;
}
/* END FIGURES AND IMAGES
   ------------------------------------------------------------------------ */
   
/* $SEARCH
   ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Search bar  - option 1*/

.topSearch {
	float: right;
	padding: 12px 0px 0px 0px;
	*padding: 7px 0px 0px 0px; /* IE only padding */
}

.topSearchButton {
	left: -2px;
	*left: -4px; /* IE only position */
	position: relative;
	top: 0px;
	*top: 0px; /* IE only position */
}
.topSearchBox {
    border-style:solid none solid solid;
    border-color:#ddd;
    border-width:1px;
    color:#b3b3b3;
    border:0px solid;
    padding:0 0 0 3px;
    height:20px;
    background:#fff;
}
.topSearchTextBox {
	border-style: solid none solid solid;
	border-color: #DDD;
	border-width: 1px;
	color: #B3B3B3;
	border: 1px solid;
	padding: 0 0 0 3px;
	height: 20px;
	background: #DFDFDF;
}

/* Search bar  - option 2 - compatible with mobile screens */

input[type=text] { /* search input field */
	background: #ededed url(/images/search-icon.png) no-repeat 9px center;
	border: solid 1px #ccc;
	padding: 6px 10px 6px 32px;
	position: relative;
	top: 50px;
	right: -149px;
	width: 130px;
	float:right;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
}

section input[type=text] { /* search input field for search results page within content area*/
	background: #ededed no-repeat 9px center;
	border: solid 1px #ccc;
	padding: 0;
	position: static;
	top: 42px;
	right: -149px;
	width: 130px;
	float:none;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
}

input[type=text]:focus {
	width: 200px;
	background-color: #fff;
	border-color: #6dcff6;
	-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
	-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
	box-shadow: 0 0 5px rgba(109,207,246,.5);
}

input:-moz-placeholder { /* placeholder "Search MGS" */
	color: #999;
}

input::-webkit-input-placeholder {
	color: #999;
}
/* END SEARCH
   ------------------------------------------------------------------------ */
   
/* $BUTTON STYLES
   ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* download button */
a.button {
	color: #365D95;
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 1em .55em;
	margin-right: 5px;
/*	text-shadow: 0 1px 1px rgba(0,0,0,.3);	*/
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
/*	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);	*/
/*	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);	*/
/*	box-shadow: 0 1px 2px rgba(0,0,0,.2);	*/
}

a.button:hover {
	text-decoration: none;
}

a.button:active {
	position: relative;
	top: 1px;
}	

/* white button style*/
.white {
	color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top,  #fff,  #ededed);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.white:hover {
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
	background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.white:active {
	color: #999;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
	background: -moz-linear-gradient(top,  #ededed,  #fff);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}
/* END BUTTON STYLES
   ------------------------------------------------------------------------ */
   
/* $MISCELLANEOUS STYLES
   ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/*! *Spry Collapsable Panel styles (see "How Groundwater Works" page */
.smalltext_nav {
	color: #666666;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 10px;
	letter-spacing: 0px;
	text-decoration: none;
	text-transform: none;
}
.twoColumnLeft #background {
	margin-bottom: 15px;
	border-radius: 9px; 
	-moz-border-radius: 9px; 
	-webkit-border-radius: 9px; 
}
.CollapsiblePanel {
	background-color: #F6F4EC;
	color: #666666;
	margin: 0;
	padding: 0;
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
}
.CollapsiblePanelContent {
	font: 1em sans-serif;
	margin: 0;
	padding: 15px;
}
.CollapsiblePanelClosed .CollapsiblePanelTab {
	background-color: #E1ECF1;
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
}
.CollapsiblePanelTab {
	-moz-user-select: none;
	background-image: url("/images/expand.gif");
	background-position: 2px center;
	background-repeat: no-repeat;
	color: #666666;
	cursor: pointer;
	font: bold 1.2em sans-serif;
	margin: 10px 0;
	padding: 14px 9px;
	text-align: center;
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
}
.CollapsiblePanelOpen .CollapsiblePanelTab {
	background-color: #466876;
	background-image: url("/images/collapse.gif");
	background-position: 2px center;
	background-repeat: no-repeat;
	color: white;
	border-radius: 5px 5px 0 0; 
	-moz-border-radius: 5px 5px 0 0; 
	-webkit-border-radius: 5px 5px 0 0;
}
.CollapsiblePanelOpen .CollapsiblePanelTab h2 {color: #F6F4EC;}

/* END MISCELLANEOUS STYLES
   ------------------------------------------------------------------------ */
  			@media screen and (min-width: 600px) {		
			a div.menuBox {display:none}
			}
 
/* ***********************************************************************************	
**************************************************************************************
$MOBILE AND SMALLER SCREEN SIZE
**************************************************************************************	
**************************************************************************************/

/* Smaller resolutions  - to resolve horizontal menu space issues */
@media screen and (max-width: 950px) {
	header nav { font-size: 1.15em; padding-left: 0; }
}
	
@media screen and (max-width: 800px) {
	header nav { font-size: 1.00em; padding-left: 0; }
	
		/* to switch from 2 columns to 1 for mobile */
	.columns {
	/* FF 3.5+*/
	-moz-column-count: 1;
	-moz-column-gap: 0px;
	-moz-column-rule: none;
	/*Saf3, Chrome*/
	-webkit-column-count: 1;
	-webkit-column-gap: 0px;
	-webkit-column-rule: none;
	column-count: 1;
	column-gap: 0px;
	column-rule: none;
	}

}
	
@media screen and (max-width: 680px) {
	header nav li{ margin-left: -5px; padding-left: -5px; }
	/* causing problems? header nav a { padding: 3px; } */
}
	
/* Mobile */
@media handheld, only screen and (max-width: 599px) {
	
	/* Hide non-essential elements */
	.pubimage, #MDlogo {
	display: none;
	}
	/* Hide non-essential elements */
	.flex-caption {
	display: none;
	}

	/* Header */
	header { height: auto; margin-bottom: 1.5em; }
	header nav {
		width: auto;
		position: static;
		text-align: left;
		line-height: 2;
		margin: 1em 0;
	}
	
	/* search input field */
	input[type="text"], input[type="number"], textarea {
		font-size: 16px;
		}	/* to prevent zoom on iOS when text is input in form */
	
	input[type=text] {
		background: #ededed url(/images/search-icon.png) no-repeat 9px center;
		border: solid 1px #ccc;
		padding: 9px 10px 8px 32px;
		width: 45%;
		float:right;
		position: static;
		-webkit-transition: all .5s;
		-moz-transition: all .5s;
		transition: all .5s;
	}
	
	input[type=text]:focus {
		width: 45%;
		background-color: #fff;
		border-color: #6dcff6;
		-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
		-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
		box-shadow: 0 0 5px rgba(109,207,246,.5);
	}
	
	
	/*header nav li { margin: 0 1.5em 0 0; }*/
	header nav ul { padding-left: 0; }
	header nav li { width: 37%; margin: 0 20px 10px 0; text-align: left; }
	
	#logo { position: relative; padding-left: 0; }
	
	/* Sidebar Left */
	#sidebarLeft,#sidebarRight { float: none; width: auto; padding-bottom: 1.5em; }

	/* Content increased font size for mobile (maybe use later): .content p, .content ul, .content ol{ font: 1.2em/1.4 Helvetica Neue, Arial, Helvetica, sans-serif; }*/
	
	/* Main Content */
	.twoColumnLeft { margin-left: 0; }
	.twoColumnRight { margin-right: 0; }
	.threeColumn { margin: 0; }
	
	/* To remove float and center elements for mobile screens */
	img.right, img.left, .img250pxR, .img250pxL, .img200pxR, .img200pxL, .img150pxR, .img150pxL , .fig250pxL, .fig250pxR, .fig200pxL, .fig200pxR, .fig350pxL, .fig350pxR, .fig300pxL, .fig300pxR{
	float: none;
	margin: 15px auto;
	padding: 5px;
	}
	
	.contentBox h2 { text-align: center; }
	.projectBoxR {
	float: none;
	margin: 15px auto;
	width: 100%;
	}
	
	.fig50L, .fig50R, img[usemap] { 
	float: none; 
	width: 100%; 
	margin-right: auto; 
	margin-left: auto; 
	}
	
	#baltStonesMap { /* used for responsive map on building stones of Baltimore pages */
	display: block;
	margin-right: auto; 
	margin-left: auto; 
	}

	/* To ensure images have adequate bottom margin - to negate ".content *:last-child" declaration */
	.content img:last-child { margin-bottom: 15px; }	
	.fig350pxL img:last-child , .fig350pxR img:last-child , .fig300pxL img:last-child , .fig300pxR img:last-child, .fig250pxL img:last-child , .fig250pxR img:last-child , .fig200pxL img:last-child , .fig200pxR img:last-child  { margin-bottom: 0px; } /* to ensure figure caption not pushed too far down on mobile */
	
	/* To remove float and center slide figure for mobile screens */
	.slideR, .slideL {
	float: none;
	margin: 15px auto;
	padding: 5px;
	width: 244px;
	}
	
	/* Footer */
	footer .footerLeft, footer .footerRight {
	position: static;
	margin-top: 0em;
	padding-left: 0%;
	float: none;
	position: static;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	}
	
	.mgsFooterLogo {
	display: none;
	}
	.mdFooterLogo {
	display: block;
	}
	
	footer .centered { margin-top: -25px; }
	
	.content p {font-size: 15px; color: #3C3C3C;}
	/* .twoColumnLeft{font-size: 1.2em; color: #3C3C3C; } */
	
}
	
	/* Very Small Mobile */
@media handheld, only screen and (max-width: 359px) {
	
	/* make logos fit width for small screens */
	#logo img { width: 100%; max-width: 279px; }
	#DNRbanner img { width: 100%; max-width: 270px; }
		
}