/*
	Define command elements for our resizeable style.
*/

/*	BODY	*/

body {
	font-family: arial, helvetica, serif;
	font-size: 100%;
	line-height: 1.6em;
	letter-spacing: 0.06em;
}

a { text-decoration: none; }

:focus { outline: none; }
:active { outline: none; }

font.title {
	font-family: courier, mono;
	font-size: 180%;
	line-height: 1.5em;
}	/* name of artwork */

font.credit {
	font-size: 110%;
	line-height: 1.6em;
}	/* artist names and date */


/* Default sizes are for the 900px wide template */
/*	IMAGE SIZES	*/

img.banner {
	width: 900px;
	height: 180px;
	margin: 0px;
		border: 0px;
		border-style: solid;
			padding: 0px;	
}

img.small {
	width: 360px;
	height: auto;	/* auto for height will scale it proportionally */
	/* 480 x 480, 360 x 360, 280 x 280, 200 x 200 */
}

img.medium {
	width: 450px;
	height: auto;
	/* 600 x 600, 450 x 450, 350 x 350, 250 x 250 */
}

img.wide {
	width: 750px;
	height: auto;
}

img.maximum {
	max-width: 99%;
	height: auto;
}


/*	DIVS .. top image and title, navigation A, navigation B, content area */

div.container {
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
/*	text-align: center;	*/
	margin: 0px;
/*	margin-bottom: 0px;	*/
/*	margin-left: auto;	*/
/*	margin-right: auto;	*/
		border: 0px;
			padding: 0px;
	visibility: visible;
	display: block;
}

/* Using the table instead of divs gives us easier inline formatting 
	options for navigation button placement, etc. */

table.topBar {
	width: 900px;
	margin: 0px;
		border-width: 1px;
		border-style: solid;
		border-spacing: 0px;
		border-collapse: separate;
    			padding: 0px;
	display: block;
/*	table-layout: fixed; */
}

table.pageContent {
	width: 900px;
	margin: 0px;
	margin-top: 20px;
		border-width: 1px;
		border-style: solid;
		border-spacing: 0px;
		border-collapse: separate;
			padding: 0px;
	display: block;
}

/*	DIVS .. sub divs for text, indented text, images, captions, etc .. */

tr {
	margin: 0px;
		border: 0px;
			padding: 0px;
}

td {
	margin: 0px;
		border: 0px;
			padding: 0px;

}

td.third {
	width: 300px;
}
	
td.half {
	width: 450px;
}

td.single {
	width: 900px;
}

td.default {
	width: 100%;
	text-align: center;
	vertical-align: top;
}

p.title {
	margin: 0px;
		border: 0px;
			padding: 30px 30px 30px 30px;	/* top right bottom left */
	text-align: left;
}

p.text {
	margin: 0px;
		border: 0px;
			padding: 15px 30px 15px 30px;
	text-align: justify;
}

p.quote {
	margin: 0px;
		border: 0px;
			padding: 15px 60px 15px 60px;
	text-align: justify;
}

p.center {
	margin: 0px;
		border: 0px;
			padding: 15px 30px 15px 30px;
	text-align: center;
}

p.image {
	margin: 0px;
		border: 0px;
			padding: 15px 30px 0px 30px;
	text-align: center;
}

p.audio {
	margin: 0px;
		border: 0px;
			padding: 15px 30px 0px 30px;
	text-align: center;
}

p.caption {
	margin: 0px;
		border: 0px;
			padding: 5px 30px 15px 40%;	/* top right bottom left */
	text-align: left;
	font-size: 75%;
}

/* MAKE ANY CHANGES WE WANT FOR 500 px */
@media all and (max-width: 749px) {
	body { font-size: 75%; }
	img.banner { width: 500px; height: 100px; }
	img.small { width: 250px; } /* 480 x 480, 360 x 360, 280 x 280, 200 x 200 */
	img.medium { width: 300px; } /* 600 x 600, 450 x 450, 350 x 350, 250 x 250 */
	img.wide { width: 400px; }
	table.topBar { width: 500px; }
	table.pageContent { width: 500px; }
	td.third { width: 166px; }
	td.half { width: 250px; }
	td.single { width: 500px; }
	p.title { padding:  30px 30px 30px 30px; }	/* top right bottom left */
	p.text { padding: 15px 30px 15px 30px; }
	p.quote { padding: 15px 45px 15px 45px; }
	p.center { padding: 15px 30px 15px 30px; }
	p.audio { padding: 15px 30px 0px 30px; }
	p.image { padding: 15px 30px 0px 30px; }
}

/* MAKE ANY CHANGES WE WANT FOR 700 px */
@media all and (min-width: 750px) and (max-width: 949px) {
	body { font-size: 80%; }
	img.banner { width: 700px; height: 140px; }
	img.small { width: 300px; } /* 480 x 480, 360 x 360, 280 x 280, 200 x 200 */
	img.medium { width: 450px; } /* 600 x 600, 450 x 450, 350 x 350, 250 x 250 */
	img.wide { width: 600px; }
	table.topBar { width: 700px; }
	table.pageContent { width: 700px; }
	td.third { width: 233px; }
	td.half { width: 350px; }
	td.single { width: 700px; }
	p.title { padding:  35px 45px 30px 45px; }	/* top right bottom left */
	p.text { padding: 20px 45px 20px 45px; }
	p.quote { padding: 20px 60px 20px 60px; }
	p.center { padding: 20px 45px 20px 45px; }
	p.audio { padding: 20px 45px 0px 45px; }
	p.image { padding: 20px 45px 0px 45px; }
}

/* MAKE ANY CHANGES WE WANT FOR 900 px */
@media all and (min-width: 950px) and (max-width: 1999px) {
	body { font-size: 85%; }
	img.banner { width: 900px; height: 180px; }
	img.small { width: 360px; } /* 480 x 480, 360 x 360, 280 x 280, 200 x 200 */
	img.medium { width: 500px; } /* 600 x 600, 450 x 450, 350 x 350, 250 x 250 */
	img.wide { width: 750px; }
	table.topBar { width: 900px; }
	table.pageContent { width: 900px; }
	td.third { width: 300px; }
	td.half { width: 450px; }
	td.single { width: 900px; }
	p.title { padding:  40px 60px 30px 60px; }	/* top right bottom left */
	p.text { padding: 25px 60px 25px 60px; }
	p.quote { padding: 25px 75px 25px 75px; }
	p.center { padding: 25px 60px 25px 60px; }
	p.audio { padding: 25px 60px 5px 60px; }
	p.image { padding: 25px 60px 5px 60px; }
}

/* MAKE ANY CHANGES WE WANT FOR 1200 px */
@media all and (min-width: 1600px) {	/**** CHANGE TO 2000px once it is testes */
	body { font-size: 100%; }
	img.banner { width: 1200px; height: 240px; }
	img.small { width: 480px; } /* 480 x 480, 360 x 360, 280 x 280, 200 x 200 */
	img.medium { width: 600px; } /* 600 x 600, 450 x 450, 350 x 350, 250 x 250 */
	img.wide { width: 900px; }
	table.topBar { width: 1200px; }
	table.pageContent { width: 1200px; }
	td.third { width: 400px; }
	td.half { width: 600px; }
	td.single { width: 1200px; }
	p.title { padding:  50px 75px 45px 75px; }	/* top right bottom left */
	p.text { padding: 25px 75px 25px 75px; }
	p.quote { padding: 25px 100px 25px 100px; }
	p.center { padding: 25px 75px 25px 75px; }
	p.audio { padding: 25px 75px 10px 75px; }
	p.image { padding: 25px 75px 10px 75px; }
}

/* END OF STYLE SHEET */