/* [07/09/12]  [boB]  [Initial Setup]
[07/12/12]  [boB]  [Added styles for the index page]
[07/13/12]  [boB]  [Added styles for individual picture collections]
[08/17/12]  [boB]  [ Added a hack of sorts to make the footer display ]
[11/30/12]  [boB]  [ Now imports the global.css file for faster loads ]
[01/17/13]  [boB]  [ Moved styles from picture collections ]
[02/15/13]  [boB]  [ Added line-height to the h2 to fix problem in IE ]
[03/18/22]  [boB]  [ Added new position for page title and mobile settings for the top navigation]*/

/* Loads the global.css file */
@import url("../common-css/global.css");

/* Offsets the problems caused by the borders around the pictures-page-width */
#return-nav-top {margin-top:-35px;}

/* Changes the default position of the page title to offset the space of the border */
#page-width {
	display:block;
	margin: 225px auto 50px auto;
	width:91%;
	padding:1%;
	z-index:1;
	}

/* Sets up the page elements for pictures-index page */
.pictures-drop-cap-offset {letter-spacing:.04em;}

.pictures-h2 {
	font-size:200%;
	text-decoration:underline;
	font-family:impress;
	line-height:1.2em;
	margin-top:0px;
	margin-bottom:5px;
	}
p {text-indent:1.2em; margin:0px;}
nav img{border: 4px solid #4f2412;outline: 4px solid #78512d;margin-bottom:5px;}
.pictures-nav-box {float:left;margin-right:5%;margin-top:10px;text-align:center;font-family:impress;font-size:130%;}
.pictures-nav-box-caption {display:block;margin-top:1%;}
.toc-h3 {
	margin-top:0px;
	margin-bottom:0px;
	margin-left:2%;
	font-size:95%;
	}
.toc-description {font-style:italic;margin-left:3%;font-size:90%;}

/* Set up the background for all the pages in the pictures section */
.pictures-page-width-background {
	background-image: url("pictures-pgart/canvas_texture_white-2.jpg");
	background-repeat:repeat;
	border: 6px solid #4f2412;
	outline: 8px solid #78512d;
	border-radius: .1px;
	behavior: url(../js/pie/PIE.htc);
	}
/*
The above rule contains a hack to make the footer display on top of the page background, by using the border-radius and behavior.  Not sure why it works, but it does.
*/

/* Sets the styles for the pictures in each collection */
.pictures-grid-box {float:left;margin-right:40px;margin-top:10px;width:175px;height:200px;}
.pictures-grid-box img{display:block;margin:auto auto 5px auto;border:none;}
.intro {
	font-family: 'Verdana', 'Geneva', 'Arial', 'Helvetica', sans-serif;
	font-size: 73%;
	padding: 0px 1% 0px 1%;
	}
.caption {
	font-family: 'Arial', sans-serif;
	font-size: 68%;
	text-align:center;
    }
	
/* Mobile styles */
/* Min Width 900 */
@media only screen and (min-width: 900px){
#return-nav-top-a {display:none;}
#return-nav-top-b {position:fixed;display:block;width:100%;text-align:center;font-size:140%;margin-top:-41px;margin-left:-3%;z-index:-1;}
#return-nav-top-b ul {margin:0;padding:0;}
#return-nav-top-b li{display:inline-block;vertical-align:top;width:20%;height:25px;}
#return-nav-top-b li{*display:inline} /* display:inline fixes bug in IE7 Used only for the Index pages */
}

@media only screen and (min-width: 600px) and (max-width: 899px){
#return-nav-top-b {position:fixed;display:block;width:100%;text-align:center;font-size:140%;margin-top:-35px;margin-left:-3%;z-index:-1;}
#return-nav-top-a {display:none;}
}

/* Max Width 599 */
@media only screen and (max-width: 599px){
/* Controls the top navigation */
#return-nav-top-b {display:none;}
#return-nav-top-a {position:fixed;display:block;width:100%;text-align:center;font-size:100%;margin-top:-55px;margin-left:-3%;z-index:-1;}
#return-nav-top-a ul {margin:0;padding:0;}
#return-nav-top-a li{display:inline-block;vertical-align:top;width:40%;height:25px;}
}