/*
style.css - The style sheet for http://joannabeen.com


Browser bugs:

Setting "text-align: center;" in div.thumb_spacer has no effect
on an image nested in div.thumb with FireFox 1.0.
So the "margin-left" needs to be set in div.thumb_w_x.

IE 6 draws too far left when "text-align: center;" is set.
So the left and right margins aren't equal in img.thumb.
And span.ie6_center is needed (only) to help center the
thumbnail labels. These compromises make Amaya and FireFox
somewhat off center while helping IE a little.


CSS wish list (things to express in the stylesheet language):

	Size relationships specified below.
	(Looks like these can be done in XSL.)

	Currently there's not even a way to specify a background-image.width.
	(Might be in CSS 3.)


Global size relationships
(it would be nice to express these in CSS):

	body.background-image.width: img.logo.width;

	div.content.left: img.logo.width;

	div.navigation.width: img.logo.width;


Thumbnail calculations:

The largest thumbnail image will be 140px wide and 140px high.
The thumbnail image margins are 20px, except the bottom which is 10.
We want a 10px margin, minimum, outside div.thumb_h_y_lines_z
and div.thumb_w_x.
The thumbnail image label is one or two lines of body.line_height, 21px.
There are also div.thumb.padding-bottom pixels below the label.
So div.thumb_spacer.width must be at least 140 + 40 + 20 = 200px
and div.thumb_spacer.height must be at least 140 + 30 + 20 + 21*2 + 5 = 237px.
	
Thumbnail size relationships
(it would be nice to express these in a stylesheet language):

	div.image_w_x.width =
		img.image_w_x.width
		+ img.image.margin * 2  // 40 * 2 (2006-12-1)
		;

	div.thumb_h_y_lines_n.height =
		img.thumb_y.height
		+ img.thumb.margin-top  // 20 (2006-12-1)
		+ img.thumb.margin-bottom  // 10 (2006-12-1)
		+ n * body.line_height  // n is 1 or 2, body.line_height = 21 (2006-12-1)
		+ div.thumb.padding-bottom  // 5 (2006-12-1)
		;

	div.thumb_h_y_lines_n.margin_top =
		( div.thumb_spacer.height - div.thumb_h_y_lines_n.height ) / 2
		;

	div.thumb_w_x.width =
		img.thumb_w_x.width
		+ img.thumb.margin-left
		+ img.thumb.margin-right
		;

	div.thumb_w_x.margin-left =
		( div.thumb_spacer.width - div.thumb_w_x.width ) / 2
		;


Card calculations:

The largest card image will be 200px wide and 200px high.
Margins inside the keyline are included in the card image.
We want a 10px (used to be 20px) margin, minimum, outside div.card_spacer.
The card image label is one or two lines of body.line_height, 21px.
There are also div.card.padding-bottom pixels below the label.
So div.card_spacer.width must be at least 200 + 20 = 220px (was 200 + 40 = 240px)
and div.card_spacer.height must be at least was 200 + 20 + 21*2 + 5 = 267px
(was 200 + 40 + 21*2 + 5 = 287px).


Card size relationships
(it would be nice to express these in a stylesheet language):

	div.card_h_y_lines_n.height =
		img.image_h_y.height
		+ n * body.line_height  // n is 1 or 2
		+ div.card.padding-bottom
		;

	div.card_h_y_lines_n.margin-top =
		( div.card_spacer.height - div.card_h_y_lines_n.height ) / 2
		;


*/

.emphasize
{
	font-weight: bolder;
}

.italic
{
    font-style: italic;
}

a {
	text-decoration: none;
	color: black;
}

a:visited {
	color: black;
}

a.current {
	color: gray;
}

a:visited.current {
	color: gray;
}

a.info {
	text-decoration: underline;
}

a.navigation {
	color: white;
}

a:visited.navigation {
	color: #FF3333;  /* Orange. http://www.lynda.com/hex.html# */
}

blockquote {
	margin-bottom: 9px;
	margin-top: 0px;
	color: #666666;  /* #606060; */
}

body {
	margin: 0px;
	background-color: #FFFFF8;  /* off-white, sRGB(FFFFF8) ~= adobe RGB(FFFFEE) */
	background-image: url( black_web.jpg );
	background-position: left;
	background-repeat: repeat-y;

	font-size: 16px;
	line-height: 21px;
 	font-family: "Times New Roman", Times, serif;
}

div.card {
	font-style: italic;
	padding-bottom: 5px;
}

div.card_h_143_lines_1 { height: 169px;	margin-top: 50px;  /* 60px; */ }
div.card_h_200_lines_1 { height: 226px;	margin-top: 22px;  /* 32px; */ }

div.card_spacer {
	width: 220px;  /* 240px; */
	height: 270px;  /* 290px; */
	float: left;

	text-align: center;

	/* border: solid aqua; */  /* debugging */
}

div.content {
	position: absolute;
	top: 0px;
	left: 216px;  /* img.logo.width */
	height: 100%
}

div.image {  /* replace with div.picture */
	margin-top: 0;
	margin-left: 4em;
	margin-bottom: 2em;

	text-align: center;
}

div.image_border {
	margin-top: 1em;
	background-color: white;
	border: 1px solid black;  /* 2px */
}

div.image_home {
	margin: 0;
	margin-bottom: 18px;
}

div.image_joanna
{
	margin: 0;
	margin-right: 1em;
	float: left;
}

div.image_quote {
	margin-left: 260px;
	margin-top: 6px;
}

div.image_title {
	margin-top: 1em;
	margin-bottom: 2em;
	font-style: italic;
}

div.image_w_206 { width: 286px; }
div.image_w_239 { width: 319px; }
div.image_w_240 { width: 320px; }
div.image_w_253 { width: 333px; }
div.image_w_267 { width: 347px; }
div.image_w_271 { width: 351px; }
div.image_w_282 { width: 362px; }
div.image_w_284 { width: 364px; }
div.image_w_285 { width: 365px; }
div.image_w_286 { width: 366px; }
div.image_w_287 { width: 367px; }
div.image_w_288 { width: 368px; }
div.image_w_290 { width: 370px; }
div.image_w_294 { width: 374px; }
div.image_w_299 { width: 379px; }
div.image_w_300 { width: 380px; }
div.image_w_303 { width: 383px; }
div.image_w_324 { width: 404px; }
div.image_w_343 { width: 423px; }
div.image_w_355 { width: 435px; }
div.image_w_400 { width: 480px; }
div.image_w_460 { width: 540px; }

div.information {
	clear: both;
	margin-top: 2em;
	margin-left: 2em;
	margin-right: 2em;
	font-family: Arial, Helvetica, Helv, sans-serif;
}

div.introduction {
	margin-left: 13px;
	margin-top: 6px;
}

div.logo_banner {
	margin-top: 62px;
}

div.gallery_title {
	margin-top: 30px;
        margin-bottom: 0.5em;
	text-align: center;
}

div.navigation {
	position: absolute;
	top: 0px;
	left: 0px;

	width: 216px;  /* img.logo.width */
}

div.picture  /* rename div.image */
{
	float: left;
	
	margin: 3em;
	padding: 2em;
	border: 1px solid black;  /* 2px */

	background-color: white;
	text-align: center;	
}

div.quote {
	margin-left: 54px;
	font-size: 120%;
}

div.thumb_spacer {
	width: 200px;
	height: 240px;
	float: left;

	/* border: solid aqua; */  /* debugging */
}

div.thumb {
	background-color: white;
	border: 1px solid black;  /* 2px */

	text-align: center;
	font-style: italic;
	padding-bottom: 5px;
}

div.thumb_h_74_lines_1 { height: 130px; margin-top: 55px; }
div.thumb_h_75_lines_1 { height: 131px;	margin-top: 54px; }
div.thumb_h_76_lines_1 { height: 132px;	margin-top: 54px; }
div.thumb_h_84_lines_1 { height: 140px; margin-top: 50px; }
div.thumb_h_88_lines_1 { height: 144px; margin-top: 48px; }
div.thumb_h_89_lines_1 { height: 145px; margin-top: 47px; }
div.thumb_h_93_lines_1 { height: 149px; margin-top: 45px; }
div.thumb_h_94_lines_1 { height: 150px; margin-top: 45px; }
div.thumb_h_95_lines_1 { height: 151px; margin-top: 44px; }
div.thumb_h_95_lines_2 { height: 172px; margin-top: 34px; }
div.thumb_h_98_lines_1 { height: 154px; margin-top: 43px; }
div.thumb_h_100_lines_1 { height: 156px; margin-top: 42px; }
div.thumb_h_105_lines_1 { height: 161px; margin-top: 39px; }
div.thumb_h_106_lines_1 { height: 162px; margin-top: 39px; }
div.thumb_h_126_lines_1 { height: 182px; margin-top: 29px; }
div.thumb_h_131_lines_1 { height: 187px; margin-top: 26px; }
div.thumb_h_132_lines_1 { height: 188px; margin-top: 26px; }
div.thumb_h_133_lines_1 { height: 189px; margin-top: 25px; }
div.thumb_h_133_lines_2 { height: 210px; margin-top: 15px; }

div.thumb_w_68 { width: 108px; margin-left: 46px; }
div.thumb_w_79 { width: 119px; margin-left: 40px; }
div.thumb_w_80 { width: 120px; margin-left: 40px; }
div.thumb_w_89 { width: 129px; margin-left: 35px; }
div.thumb_w_90 { width: 130px; margin-left: 35px; }
div.thumb_w_94 { width: 134px; margin-left: 33px; }
div.thumb_w_95 { width: 135px; margin-left: 32px; }
div.thumb_w_96 { width: 136px; margin-left: 32px; }
div.thumb_w_98 { width: 138px; margin-left: 31px; }
div.thumb_w_99 { width: 139px; margin-left: 30px; }
div.thumb_w_100 { width: 140px; margin-left: 30px; }
div.thumb_w_101 { width: 141px; margin-left: 29px; }
div.thumb_w_108 { width: 148px; margin-left: 26px; }
div.thumb_w_114 { width: 154px; margin-left: 23px; }
div.thumb_w_126 { width: 166px; margin-left: 17px; }
div.thumb_w_133 { width: 173px; margin-left: 13px; }
div.thumb_w_140 { width: 180px; margin-left: 10px; }

h3 {
	clear: both;
	margin-top: 2em;
}

hr.gallery_title {
	width: 80%;
	height: 0.5px;
	color: gray;

	margin-top: 0px;
	margin-bottom: 15px;
}

hr.table_title {
	width: 80%;
	height: 0.5px;
	color: gray;

	margin-top: 0px;
	margin-bottom: 0px;
}

img.arrow {
	width: 17px;
	height: 18px;
	border: 0;
	margin: 15px;
}

img.card {
	border: 1px solid black;  /* 2px */
}

img.home {
	width: 400px;
	height: 284px;
}

img.image_joanna 
{
	width: 144px;
	height: 144px;
}

img.image { margin: 40px; }

img.image_h_143 { height: 143px; }
img.imgae_h_200 { height: 200px; }
img.image_h_227 { height: 227px; }
img.image_h_250 { height: 250px; }
img.image_h_253 { height: 253px; }
img.image_h_266 { height: 266px; }
img.image_h_267 { height: 267px; }
img.image_h_280 { height: 280px; }
img.image_h_283 { height: 283px; }
img.image_h_284 { height: 284px; }
img.image_h_285 { height: 285px; }
img.image_h_286 { height: 286px; }
img.image_h_287 { height: 287px; }
img.image_h_300 { height: 300px; }
img.image_h_317 { height: 317px; }
img.image_h_318 { height: 318px; }
img.image_h_350 { height: 350px; }
img.image_h_394 { height: 394px; }
img.image_h_395 { height: 395px; }
img.image_h_400 { height: 400px; }

img.image_w_143 { width: 143px; }
img.image_w_200 { width: 200px; }
img.image_w_206 { width: 206px; }
img.image_w_239 { width: 239px; }
img.image_w_240 { width: 240px; }
img.image_w_253 { width: 253px; }
img.image_w_267 { width: 267px; }
img.image_w_271 { width: 271px; }
img.image_w_282 { width: 282px; }
img.image_w_284 { width: 284px; }
img.image_w_285 { width: 285px; }
img.image_w_286 { width: 286px; }
img.image_w_287 { width: 287px; }
img.image_w_288 { width: 288px; }
img.image_w_290 { width: 290px; }
img.image_w_294 { width: 294px; }
img.image_w_299 { width: 299px; }
img.image_w_300 { width: 300px; }
img.image_w_303 { width: 303px; }
img.image_w_324 { width: 324px; }
img.image_w_343 { width: 343px; }
img.image_w_355 { width: 355px; }
img.image_w_378 { width: 378px; }
img.image_w_400 { width: 400px; }
img.image_w_460 { width: 460px; }

img.introduction {
	width: 300px;
	height: 44px;
}

img.logo {
	width: 216px;
	height: 294px;
}

img.logo_swingin {
	width: 200px;
	height: 64px;
	border: 1px solid black;  /* 2px */
}

img.logo_words {
	width: 513px;
	height: 90px;
}

img.thumb {
	/* margin: 20px; */
	margin-left: 21px;  /* IE 6 centering bug */
	margin-right: 19px;  /* IE 6 centering bug */
	margin-top: 20px;
	margin-bottom: 10px;
	border: 0;
}

img.thumb_h_74 { height: 74px; }
img.thumb_h_75 { height: 75px; }
img.thumb_h_76 { height: 76px; }
img.thumb_h_84 { height: 84px; }
img.thumb_h_88 { height: 88px; }
img.thumb_h_89 { height: 89px; }
img.thumb_h_93 { height: 93px; }
img.thumb_h_94 { height: 94px; }
img.thumb_h_95 { height: 95px; }
img.thumb_h_98 { height: 98px; }
img.thumb_h_100 { height: 100px; }
img.thumb_h_105 { height: 105px; }
img.thumb_h_106 { height: 106px; }
img.thumb_h_126 { height: 126px; }
img.thumb_h_131 { height: 131px; }
img.thumb_h_132 { height: 132px; }
img.thumb_h_133 { height: 133px; }

img.thumb_w_68 { width: 68px; }
img.thumb_w_79 { width: 79px; }
img.thumb_w_80 { width: 80px; }
img.thumb_w_89 { width: 89px; }
img.thumb_w_90 { width: 90px; }
img.thumb_w_94 { width: 94px; }
img.thumb_w_95 { width: 95px; }
img.thumb_w_96 { width: 96px; }
img.thumb_w_98 { width: 98px; }
img.thumb_w_99 { width: 99px; }
img.thumb_w_100 { width: 100px; }
img.thumb_w_101 { width: 101px; }
img.thumb_w_108 { width: 108px; }
img.thumb_w_114 { width: 114px; }
img.thumb_w_126 { width: 126px; }
img.thumb_w_133 { width: 133px; }
img.thumb_w_140 { width: 140px; }

img.valid_w3 {
	border: 0;
}

span.attribution {
	margin-left: 22px;
	font-style: italic;
	font-size: 90%;
	line-height: 175%;
}

span.ie6_center {  /* IE 6 centering bug */
	margin-left: 6px;
}






/* zz */

div.missing_link {
	margin-top: 0em;
	margin-bottom: 0.3em;
	width: 100%;
	text-align: center;
	font-family: Arial, Helvetica, Helv, sans-serif;
	color: gray;
}

p.copyright_home {
	clear: both;
	margin-left: 22px;
	margin-top: 28px;
	font-family: Arial, Helvetica, Helv, sans-serif;
	font-size: 90%;
	font-style: normal;
}

p.copyright {
	clear: both;
	margin-top: 32px;
	margin-left: 6px;
	font-family: Arial, Helvetica, Helv, sans-serif;
	font-size: 90%;
	font-style: normal;
	text-align: center;
}

p.copyright_left {
	clear: both;
	margin-top: 32px;
	font-family: Arial, Helvetica, Helv, sans-serif;
	font-size: 90%;
	font-style: normal;
}

/*
p. before_list {
	margin-bottom: 0.5em;
	
}
*/

p.gallery_title {
	margin-top: 1em;
        margin-bottom: 0.5em;
	width: 100%;
	text-align: center;
	font-family: Arial, Helvetica, Helv, sans-serif;
	font-size: 120%;
	color: gray;
}

li {
	margin-top: 20px;
	margin-left: 25px;

	font-weight: bold;
	font-size: 120%;
}

li.navigation_nested {
	margin-top: 8px;
	margin-left: 18px;

	font-size: 95%;
}

li.shows 
{
	font-weight: lighter;
	font-size: 100%;
	margin-top: 4px;
}

table {
	border-collapse: collapse;
	border: thin solid black;
}

td {
	border: thin solid black;
	text-align: center;
}

th {
	font-weight: normal;
	border-top: thin solid black;
	border-left: thin solid black;
	border-right: thin solid black;
	border-bottom: medium solid black;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 0.5em;
	text-align: center;
}

th.title {
	font-weight: bolder;
}

ul {
	list-style: none;
	/* list-style_type: none; */  /* zz */
	margin-left: 0px;  /* needed for IE */
	padding: 0px;  /* needed for FireFox */
}

/* sibling selectors don't work in IE 6 */
/*
ul.shows {  
	margin-top: 0px;
}
*/