/*
	Jeff Heskett
	CIS131 Final Project
	12/05/2016
  Filename: style.css
	Title: (stylesheet)
  Purpose:  Common styles for all pages of the Rematch User's Guide
*/

*
{
	margin: 0;
	padding: 0;
}
	
body
{
	background-color: #333333;
}

#container
{
	width: 95%;
	margin: 5px auto 10px auto;
	max-width: 900px;
	min-width: 600px;
	background-color: #303030;
	background-image: url(images/body_back.jpg);
	font: 1em Georgia, Times, serif;
	color: black;
	border: 1px solid #000000;
	box-shadow: 5px 5px 5px 0 #000000;
}
		
/* header */
		
header
{
	height: 70px;
	background-image: url(images/header_back.jpg);
	background-repeat: repeat-x;
	background-color: #481a00;
	color: #ffd280;
}

/*
	header is a table layout (/shame). For various attempts see:
	http://cisstudent.uma.edu/~student373/cis131/headers.html
	TODO: find a way to do this without tables
*/
header table
{
	width: 100%;
}

header td
{
	text-align: center;
}

header td.icon
{
	width: 64px;
}

header h1
{
	font-size: 1.5em;
}
		
/* footer */
		
footer
{
	clear: both;
	height: 36px;
	background-image: url(images/footer_back.jpg);
	background-color: #481a00;
	color: #ffd280;
	text-align: center;
}
		
footer ul li
{
	line-height: 40px;
	display: inline;
	list-style-type: none;
}
		
footer ul li a
{
	margin: 0 1em;
	text-decoration: none;
	color: #ffd280;
}
		
footer ul li a:hover
{
	color: white;
}
		
/* navigation sidebar */
	
nav
{
	margin-top: 5px;
	float: left;
}
		
nav ul
{
	list-style: none;
	padding: 0;
}

nav ul li
{
	float: none; /* change to left for small display */
	width: 160px; /* change to 100 for small display */
}
		
nav ul li a
{
	padding-left: 35px;
	color: #ffd280;
	display: block;
	height: 48px;
	line-height: 48px;
	text-decoration: none;
	background-repeat: no-repeat;
	font-weight: bold;
}
		
nav ul li a:hover
{
	color: white;
}
		
/* background images for the nav sidebar */
nav ul li a.about { background-image: url(images/nav_back.png), url(images/nav_about.png); }
nav ul li a.views { background-image: url(images/nav_back.png), url(images/nav_views.png); }
nav ul li a.cards { background-image: url(images/nav_back.png), url(images/nav_cards.png); }
nav ul li a.pets { background-image: url(images/nav_back.png), url(images/nav_pets.png); }
nav ul li a.teams { background-image: url(images/nav_back.png), url(images/nav_teams.png); }
nav ul li a.queue { background-image: url(images/nav_back.png), url(images/nav_queue.png); }
nav ul li a.options { background-image: url(images/nav_back.png), url(images/nav_options.png); }
nav ul li a.faq { background-image: url(images/nav_back.png), url(images/nav_faq.png); }

/* pagenav is section after all content and before footer, to go back and forward through guide */

.pagenav
{
	margin: 10px 15px 10px 165px;
	padding: 0.25em 1em;
	background-color: #481a00;
	border: 1px solid #000000;
	box-shadow: 5px 5px 5px 0 #000000;
	border-radius: 5px;
	clear: right;
	background-image: url(images/pagenav_back.jpg);
}

.pagenav a
{
	text-decoration: none;
	color: #ffd280;
}

.pagenav a:hover
{
	color: white;
}

.pagenav a.left
{
	float: left;
}

.pagenav a.right
{
	float: right;
}

.pagenav a.top
{
	display: block;
	text-align: center;
}

/* .content is the big boxes with pale yellow background and dark text */
		
.content
{
	margin: 10px 15px 10px 165px;
	padding: 1em;
	background-color: #ffeccc;
	border: 1px solid #000000;
	box-shadow: 5px 5px 5px 0 #000000;
	border-radius: 10px;
	clear: right;
	overflow: auto;
}

/* h2 is meant for primary headers in each content section */
.content h2
{
	color: #481a00;
	font-size: 1.25em;
}

/* h3 is for sub-headers within a single section */
.content h3
{
	color: #481a00;
	font-size: 1.15em;
}

/* if an h3 has an img it's likely an image to displayed inline on left (see views sub-pages) */
.content h3 img
{
	margin-right: 0.25em;
	width: 24px;
	height: 24px;
	vertical-align: bottom;
}
		
.content p
{
	margin: 0.75em 0;
}

/* for lists that should closely follow the preceding <p> */
.content p.listfollows
{
	margin-bottom: 0.25em;
}

.content ul
{
	margin-left: 2em;
	margin-bottom: 1em;
	list-style-position: outside;
	list-style-type: disc;
}
		
.content ul li
{
	margin: 0.1em 0.25em;
}

/* content figures float right (overflow: auto is on parent container so they don't overflow bottom) */

.content figure
{
	margin-left: 1em;
	margin-bottom: 1em;
	float: right;
}

.content figure img
{
	border: solid 2px black;
	box-shadow: 5px 5px 5px 0 #000000;
	border-radius: 10px;
}

.content figure figcaption
{
	font-style: italic;
	font-size: 0.8em;
	text-align: center;
	margin-top: 0.25em;
	
}

.content a
{
	color: black;
}

/*
	hoverimage is a div container (use div instead of section to avoid validation warnings about
	section headers missing) to display a large resizable img with small 36x36 overlays during hover.
	see views_default_journal.htm for usage.
*/

.hoverimage
{
	position: relative;
	width: 95%;
	height: auto;
	margin: 1em auto;
}

/* primrary image should inherit main */
.hoverimage img.main
{
	display: block;
	margin: 1em auto 2em auto;
	width: 100%;
	border: 1px solid #000000;
	box-shadow: 5px 5px 5px 0 #000000;
	border-radius: 10px;
}

/* the overlay img (like marker01.png to marker12.png) should inherit overlay */
.hoverimage img.overlay
{
	width: 36px;
	height: 36px;
	position: absolute;
	overflow: hidden;
	display: none;
}

.hoverimage:hover img.overlay
{
	display: block;
}

/* for the pet cards pages; cardimage is the big imagemapped card on left */

.cardimage
{
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
}

.cardimage img
{
	width: 275px;
	height: 435px;
	border: 1px solid #000000;
	box-shadow: 5px 5px 5px 0 #000000;
	border-radius: 10px;
}

/* generic style for in-line images to display left, center or right */

p.leftimage
{
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
}
p.leftimage img
{
	border: 1px solid #000000;
	box-shadow: 5px 5px 5px 0 #000000;
	border-radius: 10px;
}

p.rightimage
{
	float: right;
	margin-left: 1em;
	margin-bottom: 1em;
}
p.rightimage img
{
	border: 1px solid #000000;
	box-shadow: 5px 5px 5px 0 #000000;
	border-radius: 10px;
}

p.centerimage
{
	float: none;
	text-align: center;
}
p.centerimage img
{
	border: 1px solid #000000;
	box-shadow: 5px 5px 5px 0 #000000;
	border-radius: 10px;
}

/* for the sample code (pets_scripts.htm) or team strings (teams.htm) */
.codeblock
{
	padding: 1em;
	font: 0.8em Consolas, Lucida Console, Courier, monospace;
	background-color: #fff6e6;
	border: solid 1px black;
}

/* removes the ugly dotted underline from abbr-tagged text for screen readers */
abbr
{
	text-decoration: none;
}


/* Media Queries */
		
@media only screen and (min-width : 150px) and (max-width : 620px)
{

	#container
	{
		margin: 0;
		width: 100%;
		min-width: 150px;
		max-width: 620px;
		box-shadow: none;
	}

	header h1
	{
		font-size: 1.25em;
	}
			
	footer ul li a
	{
		margin: 0 1px;
	}
	
	nav
	{
		float: none;
		margin-top: 0;
	}
			
	nav ul li
	{
		float: left;
		width: 100px;
	}
			
	nav ul li a
	{
		font-weight: normal;
	}

	.pagenav
	{
		margin: 5px;
		clear: both;
	}
	
	.content
	{
		margin: 5px;
		clear: both;
	}

	.leftimage
	{
		float: none;
	}
	
	.rightimage
	{
		float: none;
	}
	
}

/* For very narrow displays, make figures block and centered */
@media only screen and (min-width : 150px) and (max-width : 400px)
{
		
	.content figure
	{
		margin-left: 0;
		float: none;
		display: block;
		text-align: center;
	}

	.hoverimage img.overlay
	{
		width: 24px;
		height: 24px;
	}

	.pagenav a.left
	{
		float: none;
		display: block;
	}

	.pagenav a.right
	{
		float: none;
		display: block;
		text-align: right;
	}


}