body	{background: #000; font-family: Helvetica Neue, Arial, Helvetica, sans-serif; color: black; font-size: 14px;}

h1, h2 {font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif; font-size: 25px; }
h2 {font-size: 16px;}

.clickable { cursor: hand; cursor: pointer;}

#container	{width: 1000px; height: 610px; margin: 0 auto;}

#cases	{position: relative; float: left; width: 280px; height: 580px; background: url('images/rightPaneBg.png') repeat-y right #000; color: #FFF; padding: 15px 0;}
#cases ul	{list-style: none; display: none; margin: 10px 0 0 15px;}
#cases ul.expanded	{display: block;}
#cases h2	{background: url('images/groupHeader.png'); height: 21px; line-height: 21px; border: #3F3F3F 1px solid; padding-left: 19px; margin: 0 1px 1px 0;}
#cases h2.expanded	{background: url('images/groupHeaderExpanded.png');}
#cases h2 a	{display: block; text-decoration: none; color: #CCC; cursor: pointer; cursor: hand;}
#cases ul li	{margin-bottom: 10px;}
#cases ul li a	{display:block; font-size: 14px; text-decoration: none; color: #CCC; cursor: pointer; cursor: hand;}
#cases ul li.selected a {color: #FFF; text-decoration: underline;}
#cases h1	{text-align: center; margin-bottom: 10px;}


#picture, #caseBrowser	{ float: left; background: white;}

#picture	{width: 720px; height: 480px; position: relative; }
#picture img.fullPic, #picture img.noscript {width: 720px; height: 480px;}
#picture .infobox-x	{position: absolute; bottom: 0px; right: 0px;}
#picture .infobox-x div.border, #picture .infobox-x p	{float: left;}
#picture .infobox-x div.border div	{width: 10px; height:24px; background: url('images/infoBgLight.png');}
#picture .infobox-x div.border div.corner {height: 10px; background: url('images/infoRightCornerTopLight.png');}
#picture .infobox-x div.border:first-child div.corner {background: url('images/infoLeftCornerTopLight.png');}
#picture .infobox-x p	{display: block; padding: 10px 0 10px; background: url('images/infoBgLight.png') repeat; color: #FFF;}
#picture #pictureInfo	{margin-right: 30px;}
#picture #description	{width: 250px; margin-right: 464px;}

#picture .infobox-y	{position: absolute; bottom: 0px; right: 0px;}
#picture .infobox-y:hover { opacity: 1; filter:alpha(opacity=100);}
#picture .infobox-y div.top	{width: 100%;}
#picture .infobox-y div.top *	{float: left;}
#picture .infobox-y div.top div.corner {height: 10px; width: 10px; background: url('images/infoRightCornerTopLight.png');}
#picture .infobox-y:hover div.top div.corner {background: url('images/infoRightCornerTopDark.png');}
#picture .infobox-y div.top div.corner:first-child {background: url('images/infoLeftCornerTopLight.png');}
#picture .infobox-y:hover div.top div.corner:first-child {background: url('images/infoLeftCornerTopDark.png');}
#picture .infobox-y div.top div.corner + div {background: url('images/infoBgLight.png'); width: 230px; height: 10px;}
#picture .infobox-y:hover div.top div.corner + div {background: url('images/infoBgDark.png');}
#picture .infobox-y h1	{font-size: 16px; color: #FFF; text-decoration: underline; padding: 0 10px 10px; width: 230px; background: url('images/infoBgLight.png'); height: 16px; margin-top: 10px;}
#picture .infobox-y:hover h1	{background: url('images/infoBgDark.png');}
#picture .infobox-y a	{top: 0;}
#picture .infobox-y a img	{ float: right; margin: -18px 10px 0 0;}
#picture .infobox-y p	{display: block; padding: 0 10px 10px; background: url('images/infoBgLight.png') repeat; color: #FFF;}
#picture .infobox-y:hover p	{background: url('images/infoBgDark.png');}

#picture #nextButton, #picture #prevButton	{position: absolute;}
#picture #nextButton a, #picture #prevButton a	{float: left; display: block; background: url('images/infoBgLight.png'); font-size: 15px; text-transform: uppercase; color: #FFF; text-decoration: none;}
#picture #nextButton	{right: 0; top: 50px;}
#picture #prevButton	{left: 0; top: 50px;}
#picture #nextButton a	{padding: 10px 10px 10px 0;}
#picture #prevButton a	{padding: 10px 0 10px 10px;}
#picture #prevButton a img	{margin: 0 4px 0 0;}
#picture #nextButton a img	{margin: 0 0 0 4px;}
#picture #nextButton:hover a, #picture #prevButton:hover a	{text-decoration: underline; background: url('images/infoBgDark.png');}
#picture #nextButton div.border	{float: left;}
#picture #prevButton div.border {float: right;}
#picture #nextButton div.border div, #picture #prevButton div.border div	{background: url('images/infoBgLight.png'); width: 10px; height: 15px;}
#picture #nextButton div.border div.corner	{background: url('images/infoLeftCornerBottomLight.png');height: 10px;}
#picture #nextButton div.border div.corner:first-child	{background: url('images/infoLeftCornerTopLight.png'); height: 10px;}
#picture #prevButton div.border div.corner	{background: url('images/infoRightCornerBottomLight.png');height: 10px;}
#picture #prevButton div.border div.corner:first-child	{background: url('images/infoRightCornerTopLight.png'); height: 10px;}
#picture #nextButton:hover div.border div, #picture #prevButton:hover div.border div	{background: url('images/infoBgDark.png');}
#picture #nextButton:hover div.border div.corner	{background: url('images/infoLeftCornerBottomDark.png');}
#picture #nextButton:hover div.border div.corner:first-child	{background: url('images/infoLeftCornerTopDark.png');}
#picture #prevButton:hover div.border div.corner	{background: url('images/infoRightCornerBottomDark.png');}
#picture #prevButton:hover div.border div.corner:first-child	{background: url('images/infoRightCornerTopDark.png');}

#picture #galleryInfo	{width: 100%; height: 100%; background: #000;}
#picture #galleryInfo img	{display: block; margin: 0 auto; padding-top: 85px; width: 720px;}
#picture #galleryInfo p	{color: #FFF; padding: 0 68px;}
#picture #galleryInfo p.legal	{font-size: 10px; position: absolute; bottom: 0; text-align: center;}
#picture .loader	{position: absolute; top: 259px; left: 342px;}


#caseBrowser	{width: 718px; height: 115px; background: url('images/bottomPaneBg.png') repeat-x top #000; color: #FFF; padding:7px 1px;}
#caseBrowser *	{ line-height: 0;}
#caseBrowser li		{float: left; background: #000; width: 169px; height: 115px; margin: 0 5px; display: inline;}
#caseBrowser img	{height: 110px; float: left; display: inline; border: 2px white solid; opacity: 0.4; filter:alpha(opacity=40); cursor: hand; cursor: pointer;}
#caseBrowser li.selected img, #caseBrowser #browser li.selected img:hover	{opacity: 1; filter:alpha(opacity=100)}
#caseBrowser li img:hover	{opacity: 0.7; filter:alpha(opacity=70)}