/* gallery.css - called by any xxx.HTML that has a gallery */

section.focusPic h2 {
	margin: 5px 0px 0px 0px;
	font-size: 120%;
}

section.focusPic {
	margin-top: 1px;
	height: 100%; /* height of <section> */
}

/* <p> created in gallerSize.js */
section.focusPic p.imgInfo {
	text-align: center;
	font-weight: bold;
}

section.focusPic img.focus {
	/* width: 48%; /* focus <img> size moved to main.css so @media codes work */
	border: 2px ridge #000000; /* #CCBCBC grey-white red tint */
	cursor: default;
	display: block;
	margin: 0px auto 0px auto; /* center "block" */
}

section.focusPic span#thisModel p {
	text-align: center;
	margin-top: 1px; /* change styling from main.css */
}
/*--------------------------------------------------------------------------*/

/* Styling for picture gallery <section> */

div.arrows {
	margin-top: 1px;
	height: 85px; /* height of <section> */
	border: 2px solid #CCBCBC; /* #CCBCBC grey-white red tint */
	max-width: 936px;
}

div.arrows a img.arrow {
	width: 15px; /* arrow is 50pxH x 15pxW */
	border: 2px solid #000000; /* add boarder so arrow doesn't move on hover */
	opacity: 0.8; /* values of 0.1 to 1.0 */
}

div.arrows a img.arrow:hover {border: 2px solid red;} /* hover color change */

div.arrows a img.aLeft {
	position: relative;
	float: left;
	margin-top: 10px;
	margin-left: 5px;
	z-index: 2; /* puts it on top of gallery which is z-index: 1 */
}

div.arrows a img.aRight {
	position: relative;
	float: right;
	margin-top: 10px;
	margin-right: 5px;
	z-index: 2; /* puts it on top of gallery which is z-index: 1 */
}

div.arrows section.picGallery {
	position: absolute;
 	border: none;
	height: 85px;
	margin: 0px auto 0px 2px; /* left 2px nudges <section> over the boarder width */
	z-index: 1;
}

section.picGallery figure {
	position: absolute;
	height: 100%; /* height of <figure> */
	left: 12px; /* pushes <section away from left arrow */
	right: 12px;
	overflow: hidden; /* hides gallery pics if they exceed <figure> */
	margin-top: 10px; /* between top of <section> and top of <figure> */
	margin-left: 5px;
	margin-right: 10px;
}

section.picGallery figure a {
	display: inline-block;
	height: 50px; /* height of <a> */
	width: 75px; /* width of <a> */
	text-decoration: none;
	font-weight: bold;
	font-size: 75%;
	font: verdana;
	cursor: pointer;
	/*margin-left: auto; /* to center pics */
	/*margin-right: 4px;*/
	margin-bottom: 40px; /* pushes 2nd row of pictures out of view */
}

section.picGallery figure a img {
	float: left;
	height: 100%; /* fill <a> container */
	border: 2px solid #CCBCBC; /* #CCBCBC grey-white red tint */
}
/*---------------------------------------------------------------------------*/

/* Style for expand/collapse (xc) Text & Icon */
span.xcText {
	float: left;
	font-size: 90%;
	color: #000000; /* black */
	text-align: left;
	font-weight: bold;
	margin: 2px 0px 2px 5px;
}

a.expander span.xcIcon {
	float: right;
	width: 23px;
	height: auto;
	color: #000000; /* black */
	text-align: center;
	border: 2px solid #000000;
	background-color: white;
	opacity: 0.8; /* values of 0.1 to 1.0 */
	box-sizing: border-box;
	margin-right: 5px;
}
/*---------------------------------------------------------------------------*/

/* Styling for expandable <section>s */
div.content {
	display: none; /* recommended by simple-expand to prevent blinking onload */
	margin-top: 15px; /* div.content is below span.xcText */
} 

div.content ul {
	clear: left; /* from expander <a> */
	font-size: 90%;
	list-style-type: none;
	list-style-position: outside; /* hanging indent of 2nd line of text */
	font-weight: normal;
	font-style: normal;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 10px; /* distance below <ul> bottom */
	margin-top: 25px; /* distance from <ul> to <li> */
}

div.content ul.wSquare {list-style-type: square;}

div.content ul li {
	text-align: left; /* aligns markers left */
	margin-left: 5px; /* horizontal distance between <ul> & <li> */
	margin-right: 5px; /* same as above to center <li> in <section> */
	margin-bottom: 5px; /* vertical distance between <li> */
	margin-top: 5px;
}

div.content ol {
	clear: left; /* from expander <a> */
	font-size: 90%;
	list-style-type: decimal;
	list-style-position: outside; /* hanging indent of 2nd line of text */
	font-weight: normal;
	font-style: normal;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 10px; /* distance below <ol> bottom */
	margin-top: 25px; /* distance from <ol> to <li> */
}

div.content ol li {
	text-align: left; /* aligns numbers left */
	font-size: 90%;
	margin-left: 10px; /* horizontal distance between <ol> & <li> */
	margin-right: 10px; /* same as above to center <li> in <section> */
	margin-bottom: 5px; /* vertical distance between <li> */
}

div.content p {
	clear: left; /* from expander <a> */
	font-size: 90%;
	margin-left: 20px;
	margin-top: 5px;
	margin-bottom: 5px;
}
div.content table {
	width: 100%; /* stretch to 100% of screen */
	margin: 5px auto 0px auto;
	padding: 0px 5px 10px 5px; /* move table away from <container> edge */
}

div.content table th {
	text-align: left;
	vertical-align: text-top; /* moves text top of box when <td> is more than 1 line */
	width: 0px; /* prevents column shift rightward if <td> text to right doesn't fill 100% box  */
	font-size: 90%;
	font-style: italic;
}
div.content table td {
	text-align: left;
	font-size: 90%;
	padding-left: 5px; /* moves text away from colon */
}

div.content table td.colon {
	text-align: left;
	vertical-align: text-top; /* moves : top of box when <td> is more than 1 line */
	width: 0px; /* prevents column shift rightward if <td> text to right doesn't fill 100% box  */
	font-size: 90%;
}

div.content h5 {
		font-size: 80%;
		margin-bottom: 10px;
}

div.content audio {
	display: block;
	margin: 0px auto 20px auto;
}

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