@import url('reset.css');
@import url('default.css');
@import url('type.css');

/***

Font-sizes. Browser default is 16px. Set body to 75%,which is equal to 12px and,therefore,1em is 12px.
9px :0.75em
10px :0.8333em
11px :0.9167em
12px :1.0em
13px :1.0833em
14px :1.1667em
15px :1.25em
16px :1.3333em
17px :1.4167em
18px :1.5em
19px :1.5833em
20px :1.6667em
21px :1.75em
22px :1.8333em
23px :1.9167em
24px :2.0em
25px :2.0833em
26px :2.1667em
27px :2.25em
28px :2.3333em
29px :2.4167em
30px :2.5em
31px :2.5833em
32px :2.6667em

***/


.clear								{clear: both;}
.left								{float: left;}
.right								{float: right;}

img 								{-ms-interpolation-mode:bicubic; }
img.left							{float: left; margin: 0 20px 20px 0;}
img.right							{float: right; margin: 0 0 20px 20px;}

#header								{margin: 0 auto; position: fixed; top:0; left: 0; width:100%; z-index: 9000; padding: 0 0 15px; overflow: visible;}
#header-wrap						{width:1024px; margin: 0 auto; text-align: left; position: relative; padding: 15px 0;}

#logo								{float: left;}
#logo h1							{font-size: 30px;  margin: 0; padding: 0;}
#logo h2							{font-size: 14px; margin: 0; padding: 0;}

#navigation							{margin: 0; padding: 0; position: absolute; right:0; text-align: right; top:30px;}
#navigation li						{margin: 0 0 2px 0; padding: 0; text-align: left; float: left; font-size: 13px; position: relative;}
#navigation li a					{padding: 3px 10px; display: block;}
#navigation li a.gallery			{padding: 4px 11px;}
#navigation li a.gallery.over		{padding: 3px 10px;}

#galleries							{display: block; position: absolute; top:27px; left: 0; color: #fff; display: none; z-index: 9999;}
#galleries li						{float: none; width: 200px;}
#galleries li a						{padding: 3px 10px; display: block;}

#toolbar							{margin: 0; padding: 0 0 8px 0; font-size: 11px; position: absolute; right:10px; display: none; z-index: 0; top: 52px;}

#content							{margin: 0 auto; margin-top: 60px;}
#content-wrap						{width:1030px; margin: 0 auto; text-align: left;}
#content .third						{width:680px;}

#content .content p					{font-size: 13px;}
#content .content ul				{margin-left: 5px;}
#content .content ol				{margin-left: 5px;}
#content .content ul li				{font-size: 13px; list-style:circle; margin-left: 20px; }
#content .content ol li				{font-size: 13px; list-style:decimal; margin-left: 20px; }
#content .content h2				{font-size: 22px; font-weight: bold;}
#content .content h3				{font-size: 20px; font-weight: bold;}
#content .content h4				{font-size: 18px; font-weight: bold;}
#content .content h5				{font-size: 14px; font-weight: bold;}
#content .content h6				{font-size: 12px; font-weight: bold;}

ul#thumbs							{margin: 0; padding: 0;}
ul#thumbs li						{margin: 0 6px 6px 0; padding: 0; float: left; width: 200px; height: 125px; display: block; position: relative; overflow: hidden;}
ul#thumbs li a						{width: 200px; height: 125px; display: block; position: absolute; cursor: pointer; margin: 0; padding: 0; top: 0; left: 0;}
ul#thumbs li img					{position: relative; top:50%; left: 50%; opacity:.5; z-index: 1;}
ul#thumbs li span					{position: absolute; top: 50%; margin-top: -8px; left: 0; padding: 2px 5px; font-size: 14px; max-width: 80%; overflow: hidden; z-index: 5;}

#footer								{margin: 0 auto;}
#footer-wrap						{width:1024px; margin: 0 auto; text-align: left; text-align: right; padding: 10px 0;}
#footer-wrap p						{font-size: 10px;}

#slideshowoverlay					{position: fixed; top:0; left:0; display: none; margin: 0 auto; width:100%; height: 100%; z-index: 5000;}
#slideshow							{display: none; margin: 0 auto 0 -400px; width:801px; display: block; position: fixed; overflow: hidden; height: 534px; left: 50%; z-index: 6000; top: 60px;}
#next								{width:400px; height: 534px; position: absolute; top: 0; right: 0; display: block; z-index: 6500; background: url('ie-is-the-opposite-of-good.jpg');}
#next:hover							{}
#prev								{width:400px; height: 534px; position: absolute; top: 0; left: 0; display: block; z-index: 6500; background: url('ie-is-the-opposite-of-good.jpg');}
#prev:hover							{}
#next span,
#prev span							{width:400px; height: 534px; display: block;}
#main								{margin: 0; padding: 0; width: 9999em; position: absolute; text-align: center;}
#main li							{margin: 0 6px 0 0; padding: 0; width: 801px; height: 534px; display: block; list-style: none; float: left; opacity:1; position: relative; overflow: hidden;}
#main li img						{position: absolute; top: 50%; left: 50%;}
#main li.active						{opacity:1;}
#main li div,
#main li.loading div				{display: block; position: absolute; top: 50%; left: 50%; }
#main li h3							{font-size: 14px; font-family: 'Arial'; font-weight: bold; margin: 0; padding: 0; position: absolute; top:10px; left: 0; padding:2px 10px; text-align: left; max-width: 66%;}
#main li p							{font-size: 12px; font-family: 'Arial'; margin: 0; padding: 0; position: absolute; top:36px; left: 0; padding: 4px 10px; text-align: left; max-width: 66%;}

body.white #logo h1					{color: #333333;}
body.white #logo h2					{color: #808080;}
body.white #header					{background: url(../img/headerbg.png) bottom left repeat-x;}
body.white							{background: #fff;}
body.white #content					{}
body.white ul#thumbs li				{background: #fff;}
body.white ul#thumbs li.loading		{background: url(../img/loader.gif) center center no-repeat #e6e6e6; }
body.white ul#thumbs li span		{background: #fff; color:#333333;}
body.white ul#thumbs li img			{background: #fff;}
body.white #slideshowoverlay		{background: rgb(255,255,255); background: rgba(255, 255, 255, 0.9);}
body.white #main li.loading			{background: url(../img/loader.gif) center center no-repeat #e6e6e6;}
body.white #main li h3				{color: #333; background: rgb(255,255,255); background: rgba(255,255,255,.7);}
body.white #main li p				{color: #333; background: rgb(255,255,255); background: rgba(255,255,255,.7);}
body.white #footer					{}
body.white #next:hover				{background: url(../img/white-over-ie.gif) center center repeat;}
body.white #prev:hover				{background: url(../img/white-over-ie.gif) center center repeat;}
body.white #next:hover span			{background: url(../img/next-black.png) center center no-repeat;}
body.white #prev:hover span			{background: url(../img/prev-black.png) center center no-repeat;}
body.white #footer p				{color: #808080;}
body.white #galleries				{background: rgb(255,255,255); background: rgba(255,255,255,.85);}
body.white #navigation li a			{color: #808080;}
body.white #navigation li a:hover	{color: #333333;}
body.white #content .third	p		{color: #808080;}
body.white #content .third	ul li	{color: #808080;}
body.white #content .third	ol li	{color: #808080;}
body.white #content .third	h2		{color: #333333;}
body.white #content .third	h3		{color: #333333;}
body.white #content .third	h4		{color: #333333;}
body.white #content .third	h5		{color: #333333;}
body.white #content .third	h6		{color: #333333;}

body.black							{background: #000;}
body.black #content					{}
body.black #logo h1					{color: #fff;}
body.black #logo h2					{color: #808080;}
body.black #header					{background: url(../img/headerbgblack.png) bottom left repeat-x;}
body.black ul#thumbs li				{background: #000;}
body.black ul#thumbs li.loading		{background: url(../img/loaderblack.gif) center center no-repeat #1a1a1a; }
body.black ul#thumbs li span		{background: #000; color:#fff;}
body.black ul#thumbs li img			{background: #000;}
body.black #slideshowoverlay		{background: rgb(0,0,0); background: rgba(0, 0, 0, 0.95);}
body.black #main li.loading			{background: url(../img/loaderblack.gif) center center no-repeat #1a1a1a;}
body.black #main li h3				{color: #fff; background: rgb(0,0,0); background: rgba(0,0,0,.7);}
body.black #main li p				{color: #fff; background: rgb(0,0,0); background: rgba(0,0,0,.7);}
body.black #footer					{}
body.black #next:hover				{background: url(../img/black-over-ie.gif) center center repeat;}
body.black #prev:hover				{background: url(../img/black-over-ie.gif) center center repeat;}
body.black #next:hover span			{background: url(../img/next.png) center center no-repeat;}
body.black #prev:hover span			{background: url(../img/prev.png) center center no-repeat;}
body.black #footer p				{color: #808080;}
body.black #galleries				{background: rgb(0,0,0); background: rgba(0,0,0,.85);}
body.black #content .third	p		{color: #808080;}
body.black #content .third	ul li	{color: #808080;}
body.black #content .third	ol li	{color: #808080;}
body.black #content .third	h2		{color: #fff;}
body.black #content .third	h3		{color: #fff;}
body.black #content .third	h4		{color: #fff;}
body.black #content .third	h5		{color: #fff;}
body.black #content .third	h6		{color: #fff;}

body.white #main li.active div,
body.black #main li.active div		{background: none;}

body.arial #logo h1					{font-family: 'Arial Black'; }
body.arial #logo h2					{font-family: 'Arial'; }
body.arial #content .third	p		{font-family: 'Arial'; }
body.arial #content .third	ul li	{font-family: 'Arial'; }
body.arial #content .third	ol li	{font-family: 'Arial'; }
body.arial #content .third	h2		{font-family: 'Arial'; }
body.arial #content .third	h3		{font-family: 'Arial'; }
body.arial #content .third	h4		{font-family: 'Arial'; }
body.arial #content .third	h5		{font-family: 'Arial'; }
body.arial #content .third	h6		{font-family: 'Arial'; }

body.helvetica #logo h1					{font-family: 'Helvetica'; font-weight: bold; }
body.helvetica #logo h2					{font-family: 'Helvetica'; }
body.helvetica #content .third	p		{font-family: 'Helvetica'; }
body.helvetica #content .third	ul li	{font-family: 'Helvetica'; }
body.helvetica #content .third	ol li	{font-family: 'Helvetica'; }
body.helvetica #content .third	h2		{font-family: 'Helvetica'; }
body.helvetica #content .third	h3		{font-family: 'Helvetica'; }
body.helvetica #content .third	h4		{font-family: 'Helvetica'; }
body.helvetica #content .third	h5		{font-family: 'Helvetica'; }
body.helvetica #content .third	h6		{font-family: 'Helvetica'; }

body.georgia #logo h1					{font-family: 'Georgia'; font-style: italic; font-weight: bold; }
body.georgia #logo h2					{font-family: 'Georgia'; font-style: italic; }
body.georgia #content .third p			{font-family: 'Georgia'; }
body.georgia #content .third ul li		{font-family: 'Georgia'; }
body.georgia #content .third ol li		{font-family: 'Georgia'; }
body.georgia #content .third h2			{font-family: 'Georgia'; font-style: italic; }
body.georgia #content .third h3			{font-family: 'Georgia'; font-style: italic; }
body.georgia #content .third h4			{font-family: 'Georgia'; font-style: italic; }
body.georgia #content .third h5			{font-family: 'Georgia'; font-style: italic; }
body.georgia #content .third h6			{font-family: 'Georgia'; font-style: italic; }
body.georgia #navigation li a			{font-family: 'Georgia'; font-style: italic; }

body.times #logo h1					{font-family: 'Times'; font-weight: bold; }
body.times #logo h2					{font-family: 'Times'; }
body.times #content .third	p		{font-family: 'Times'; }
body.times #content .third	ul li	{font-family: 'Times'; }
body.times #content .third	ol li	{font-family: 'Times'; }
body.times #content .third	h2		{font-family: 'Times'; }
body.times #content .third	h3		{font-family: 'Times'; }
body.times #content .third	h4		{font-family: 'Times'; }
body.times #content .third	h5		{font-family: 'Times'; }
body.times #content .third	h6		{font-family: 'Times'; }
body.times #navigation li a			{font-family: 'Times'; }

body.userbg #header					{position: absolute; background: none; z-index: 100;}