/*------------------------------------------------------------------
This website would not be possible without the creativity, generousity, and wisdom of Stu Nicholls: http://www.cssplay.co.uk  Please check out 
his website and give him lots and lots of love.  Specifically in the form of money. 
------------------------------------------------------------------------

/*--------------------------------------------------------------------
                GLOBAL STYLES - STRUCTURAL RULES
----------------------------------------------------------------------

These are default styles that every page needs to inherit */

body {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: .8em;
	color:#000000;
	background:url("_images/_global/textbackground.jpg") repeat;
}
/* THE !important hack: if you have two duplicate properties, the bottom-most
property is the one the browser will render. However, if you follow one of those
properties with the "!important", the browser will say "Oh - that's the one I
should use - it's important!". IE, of course, is a jerk and doesn't like
to be told what to do, so it will ignore this statement and just render the
bottom-most property. But, it works to our advantage when we want to give one value
to responsible browsers, and a different one to IE. In this case, since IE likes
to add extra padding, we're telling it the main container of the site is longer
than it actually is.*/

#container {
	padding: 0px 0px 0 0px;
	margin: 0 auto;
	width: 950px;
	height:auto;
	background: url("_images/_global/textbackgroundsides.jpg") repeat-y 50% 0;
 
}
/*  HEADER */


#header {
	background: transparent url("_images/_global/logo.jpg") no-repeat 0 0; 
	padding: 0px 0 0px 0; 
	position: relative; /* this allows the rest of the elements to be positioned absolutely from header's top left. */
	height: 160px; 
	width: 900px;
}

#header #extralinks {
display:block;
position:absolute;
width: 180px;
top: 90px;
left: 690px;
padding: 0 20px;
font-weight:bold;
text-align:left;
}
		


#column_one {
	width: 200px;
	float: left;
	padding: 0 0px 0px 25px;
	margin: 0 5px 10px 0px;
	position: relative;
	overflow: visible;
}

#sliptopnews {
display:block;
position: relative;
float:left; 
background:url(_images/_global/slip_r1_c1_r1_c1) no-repeat;
background-position:top;
height: 71px;
margin: 0 0;
border: 0;
width: 200px;
}

#slip {
display:block;
position:relative;
float:left;
width: 200px;
background:url(_images/_global/slip_r2_c1.jpg) repeat-y;
background-position: top; 
background-color:#FFFFFF;
overflow:visible;
padding: 0 0 0 0;
margin: 0 0 0 0;
border: 0px;
} 

#slipbottom {
display:block;
position: relative;
float:left;
background: url(_images/_global/slip_r4_c1.jpg) no-repeat;
background-position:top;
height: 56px;
margin: 0 0;
border:0;
width: 200px;
}

#billboard {
	width: 669px;
	float: left;
	border: dashed 2px #666666;
	padding: 0 5px 10px 5px;
	margin: 0 10px 5px 0px;
}

#column_two {
	width:679px;
 	float: left;
	margin: 0px 8px 10px 8px;
	position:relative;
	}

#column_three {
	width: 383px;
	float: left;
	
	margin: 10px 5px 10px 8px;
	position: relative;
	overflow: visible;
	display:block;
}

#column_four {
	width: 256px;
	float: right;
	padding: 2px 2px 2px 2px;
	margin: 10px 8px 10px 5px;
	position: relative;
	overflow: visible;
	display:block;
}

#footer {
	font-size: 87.0%;
	clear: both;
	width: 900px;
	text-align: center;
	background-image: url("_images/_footer/footer_background.jpg") ;
	background-color: #a90909;
	color:#000;
	margin: 0;
	padding: 15px 25px 15px 25px;
}





#top {
width:950px;
background-image: url("_images/_global/textbackgroundtop.jpg");
background-repeat:no-repeat;
background-position:center;
top:0;
height: 20px;
position: relative;
z-index:20;
}




	/* -----------------------------------------------------------------
                GLOBAL STYLES - TYPE SELECTORS
--------------------------------------------------------------------

These are default styles that every page needs to inherit */

@font-face {
	font-family:"Adler";
	src:url(http://stolenchair.org/adler_.ttf) format("truetype");
   }

@font-face {
	font-family:"LHFtownehall";
	src:url(http://stolenchair.org/LHFtownehall.otf) format("opentype");
   }

a {
outline:none;
}
a:link {
	text-decoration:none;
	color: #339999;
}
a:visited {
	text-decoration:none;
	color: #339999;
}
a:hover {
text-decoration:none;
	border-bottom-style:dotted;
	border-bottom-width:1px;
	color: #339999;
}

a:active {
text-decoration:none;
	border-bottom-style:dotted;
	border-bottom-width:1px;
	color: #a90909;
}


/* images wrapped in an anchor with a class of image won't have that weird hover */


a img{
border:none;
	
}
.image:hover {
border:none;
	text-decoration: none;
	background-color: #fff;
	color: #000;
}

p {
	padding: 0 0 3px 0;
	text-align:justify;
	text-indent: 0px;
}

/* h1's are pretty much the main page title */

h1 {
	font-family:Adler;
	color:#9B0909;
	padding: 0 0 0px 0;
	font-size: 160%;
	text-align:center;
}

/* h2's are underlined headings*/

h2 {
	
	padding: 3px 0 10px 0;
	font-size: 130%;
	color: #666666;
	text-align:center;
	background-image: url("_images/_global/line.jpg"); 
	background-position: bottom;
	overflow:hidden;
	background-repeat:repeat-x;
	margin: 0 0 3px 0;
}


/* h3's are left aligned, intendended for Sub-Menu titles */
h3 {

	padding: 20px 0px 15px 0px;
	font-size: 140%;
	color: #666666;
	text-align:center;
	float: center;
	background: url("_images/_global/heading3line.jpg") no-repeat; 
	background-position: bottom;
	width: 350px;
	overflow:hidden;
	margin: 0 0 3px 0;
	text-transform:capitalize;
}

/* h4's and h5's are large fonts */

h4 {
	padding: 0px 0 2px 0;
	font-size: 120%;
	text-align: center;
	font-weight: bold;
	margin: 0 0 0px 0;
}
h5 {
text-align:center;
width: 300px;
	border-top-style: dotted;
	border-top-color: #DEDCE0;
	border-top-width: 1px;
	padding: 7px 0 7px 0;
	font-size: 95%;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-bottom-style: dotted;
	border-bottom-color: #DEDCE0;
	border-bottom-width: 1px;
	margin: 0 0 15px 0;
}

blockquote {
	font-size: 85%;
	border-top-style: solid;
	border-top-color: #DEDCE0;
	border-top-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #DEDCE0;
	border-bottom-width: 1px;
	padding: 15px;
	margin: 0 0 15px 0;
	background-color: #E5E3E6;
}

.center{
text-align: center;
}


#billboard img{
	float: left;
	margin: 0 20px 5px 5px;
	}
	
img.rightimage{
float:right;
margin: 5px 0px 10px 20px;
}

img.leftimage{
float: left;
padding: 5px 20px 10px 0px;
}

img.centerimage{
float:none;
padding: 5px 5px 5px 5px;
}

hr{
border:dotted 1px #999999;

}

code {
	font-size: 90%;
	color: #000;
	margin: 0 1px 0 1px;
}


#bullet {
margin: 0 10px 0 10px;
padding: 0;
}

#bullet ul{
padding-left: 0;
margin-left:0;
}

#bullet li{
list-style: url("_images/_global/bulletstar.jpg");
list-style-position:inside;
text-indent:0;
text-align: left;
margin-bottom:5px;
}
	
#box {
border:#CCCCCC dashed 1px;
margin: 5px;
}	
/* -----------------------------------------------------------------
                       NAVIGATION
-------------------------------------------------------------------*/

#navi {
	/*background: transparent url(/_images/_header/full_header_background.jpg) no-repeat 0 0; /* this is the full nav graphic. It makes the "flicker" that IE creates on image replacement appear not to be occurring. */
	padding: 0px 0 15px 0; /* this is intended to force all the items down 42px from the top. */
	position: relative; /* this allows the rest of the elements to be positioned absolutely from header's top left. */
	height: 225px; /* since I'm floating the logo and nav, I need to specify a height so that the content doesn't cover the site tagline/section description. */
}


#navi ul#navigation {
	position: absolute;
	left: 0px;
	list-style: none;
	top: 0px;
	margin: 0;
	padding: 0;
}
#navi ul#navigation li {
	text-indent: -9999px; /* this removes the nav item text from appearing over the nav list items */
	text-decoration: none; /* this removes the nav item text from appearing over the nav list items */
	float: left; /* I suspect that without this, the nav list items stagger. */
}
#navi ul#navigation a {
	display: block; /* all the anchors need to display block, or the text appears. For some reason. */
}
#navi ul#navigation a:hover  {
border: none;
text-decoration: none;
	background-position: 0 -20px; /* this makes the nav items display their rollovers */
	
}

#navi ul#navigation a:active  {
text-decoration:none;
	border: none; /* this makes the nav items not have a border while active*/
}


#homemenu a { /* this replaces the list item's anchor with an image, gives it a width and height, and floats it left. */
	background: transparent url(_images/_global/home.jpg) no-repeat 0 0;
	width: 150px;
	height: 21px;
}
#aboutmenu a {
	background: transparent url(_images/_global/about.jpg) no-repeat 0 0;
	width: 150px;
	height: 21px;
}

#blogmenu a {
	background: transparent url(_images/_global/blog.jpg) no-repeat 0 0;
	width: 150px;
	height: 21px;
}

#ERPAmenu a {
	background: transparent url(_images/_global/ERPA.jpg) no-repeat 0 0;
	width: 150px;
	height: 21px;
}


#CSTmenu a {
	background: transparent url(_images/_global/CST.jpg) no-repeat 0 0;
	width: 150px;
	height: 21px;
}

#PlayGroundmenu a {
	background: transparent url(_images/_global/PlayGround.jpg) no-repeat 0 0;
	width: 150px;
	height: 21px;
}

#worksmenu a {
	background: transparent url(_images/_global/works.jpg) no-repeat 0 0;
	width: 150px;
	height: 21px;
}
#educationmenu a {
	background: transparent url(_images/_global/education.jpg) no-repeat 0 0;
	width: 150px;
	height: 21px;
}

#touringmenu a {
	background: transparent url(_images/_global/touring.jpg) no-repeat 0 0;
	width: 150px;
	height: 21px;
}
#mediamenu a {
	background: transparent url(_images/_global/media.jpg) no-repeat 0 0;
	width: 150px;
	height: 21px;
}
#pressmenu a {
	background: transparent url(_images/_global/press.jpg) no-repeat 0 0;
	width: 150px;
	height: 21px;
}
#donatemenu a {
	background: transparent url(_images/_global/donate.jpg) no-repeat 0 0;
	width: 150px;
	height: 21px;
}
#buymenu a {
	background: transparent url(_images/_global/buy.jpg) no-repeat 0 0;
	width: 150px;
	height: 21px;
}

/* These styles control the indication of what section the user is currently in. */

body#home #homemenu a {
	background-position: 0 -41px;
}
body#about #aboutmenu a {
	background-position: 0px -41px;

}
body#about #arrow {
background:url(_images/_global/aboutarrow.jpg) no-repeat;
float: right;
position:relative;
width: 50px;
height: 200px;
z-index:100;
}

body#works #worksmenu a {
	background-position: 0 -41px;
}
body#works #arrow {
background:url(_images/_global/worksarrow.jpg) no-repeat;
float: right;
position:relative;
width: 50px;
height: 200px;
z-index:100;
}

body#blog #blogmenu a {
	background-position: 0 -41px;
}
body#blog #arrow {
background:url(_images/_global/blogarrow.jpg) no-repeat;
float: right;
position:relative;
width: 50px;
height: 200px;
z-index:100;
}

body#ERPA #ERPAmenu a {
	background-position: 0 -41px;
}
body#ERPA #arrow {
background:url(_images/_global/ERPAarrow.jpg) no-repeat;
float: right;
position:relative;
width: 50px;
height: 200px;
z-index:100;
}


body#CST #CSTmenu a {
	background-position: 0 -41px;
}
body#CST #arrow {
background:url(_images/_global/cstarrow.jpg) no-repeat;
float: right;
position:relative;
width: 50px;
height: 200px;
z-index:100;
}


body#PlayGround #PlayGroundmenu a {
	background-position: 0 -41px;
}
body#PlayGround #arrow {
background:url(_images/_global/PlayGroundarrow.jpg) no-repeat;
float: right;
position:relative;
width: 50px;
height: 200px;
z-index:100;
}

body#education #educationmenu a {
	background-position: 0 -41px;
}
body#education #arrow {
background:url(_images/_global/educationarrow.jpg) no-repeat;
float: right;
position:relative;
width: 50px;
height: 200px;
z-index:100;
}

body#touring #touringmenu a {
	background-position: 0 -41px;
}
body#touring #arrow {
background:url(_images/_global/touringarrow.jpg) no-repeat;
float: right;
position:relative;
width: 50px;
height: 200px;
z-index:100;
}

body#media #mediamenu a {
	background-position: 0 -41px;
}
body#media #arrow {
background:url(_images/_global/mediaarrow.jpg) no-repeat;
float: right;
position:relative;
width: 50px;
height: 200px;
z-index:100;
}

body#press #pressmenu a {
	background-position: 0 -41px;
}
body#press #arrow {
background:url(_images/_global/pressarrow.jpg) no-repeat;
float: right;
position:relative;
width: 50px;
height: 200px;
z-index:100;
}


body#donate #donatemenu a {
	background-position: 0 -41px;
}
body#donate #arrow {
background:url(_images/_global/donatearrow.jpg) no-repeat;
float: right;
position:relative;
width: 50px;
height: 200px;
z-index:100;
}

body#buy #buymenu a {
	background-position: 0 -41px;
}
body#buy #arrow {
background:url(_images/_global/buyarrow.jpg) no-repeat;
float: right;
position:relative;
	width: 50px;
height: 200px;
z-index:100;
}

body#mail #arrow {
background:url(_images/_global/mailarrow.jpg) no-repeat;
float: right;
position:relative;
	width: 50px;
height: 200px;
z-index:100;
}

body#contact #arrow {
background:url(_images/_global/contactarrow.jpg) no-repeat;
float: right;
position:relative;
	width: 50px;
height: 200px;
z-index:100;
}

body#ERPA #arrow {
background:url(_images/_global/ERPAarrow.jpg) no-repeat;
float: right;
position:relative;
	width: 50px;
height: 200px;
z-index:100;
}


/* Sub Menu */
#submenu {
float:left;
width:auto;
display: block;
padding: 12px 92px 12px 0;
font-weight:bold;
background:url("_images/_global/closesubmenu.jpg") no-repeat right;
}


#submenu a:hover, active {
border-bottom-style:dashed;
border-bottom-width:2px;
}






/* More function */

/* always visible */
#outer .holder {padding:1em; margin:0 0px 0px 0;}
#outer .holder p {padding:5px 0 0 0; margin:0;}
#outer .holder p.bold {font-weight:bold;}
#outer .holder h2 {margin:0; padding:0;}

/* unclicked style div.more */
#outer div.more u {float:right; margin:0px 10px 0 0; cursor:pointer; color:#a00909; font-weight:bold;}
#outer div.more u.hide {display:none;}
#outer div.more p {display:none;}
#outer div.more img {display:none;}

/* clicked style div.click */
#outer div.click u.show {display:none;}
#outer div.click u.hide {display:block;}
#outer div.click p {display:block;}
#outer div.click img {display:block; float:left; padding-right:10px;}
 

/* Tabbed function */

#gallery {font: 12px Georgia, "Times New Roman", Times, serif; width:650px; padding:15px 0 0 0; line-height:15px;}
#gallery div.off {color:#339999; height:33px; margin-right:1px; line-height:33px; padding:0 5px; float:left; background:url(http://www.stolenchair.org/_images/_global/tabbedoff.gif) repeat-x left bottom; border: 2px dashed #999; border-bottom-color:#999; cursor:pointer; position:relative; z-index:20; font-stretch:condensed;}
#gallery div.on {color:#a90909; padding:0 5px; margin-right:2px; margin-top:1px; float:left; background:url(http://www.stolenchair.org/_images/_global/tabbedon.gif) repeat-x left bottom; border:2px dashed #555; cursor:pointer; border-bottom:0; height:33px; line-height:32px; position:relative; z-index:100;}

div.hide {display:none; width:0; overflow:hidden;}
div.show {clear:left; background:#fff; width:650px; margin-top:0; top:-3px; border:2px dashed #555; padding:7px; position:relative; z-index:50; font: Georgia, "Times New Roman", Times, serif; line-height:18px; }
div.show img {padding: 5px 10px 5px 0;}
.clear {clear:both;} 

/* Magnify function */

#HOLD {width:648px; height:280px; background:url();margin:0 auto;}
 
ul.OUT {padding:0; margin:0; list-style:none; width:190px; height:270px; float:left; position:relative;}
ul.OUT ul {padding:0; margin:0; list-style:none;}
ul.OUT span {display:none; color:#339999; text-align:center; font:bold 12px/15px Georgia, sans-serif; position:absolute; top:295px; left:0; width:200px; z-index:100;}
ul.OUT a {text-decoration:none; border-bottom:dashed 1px #339999;}
 
ul.OUT table {border-collapse:collapse; padding:0; margin:-1px;}
 
ul.OUT li {display:block; float:left; padding:2.5px; margin:0;}
 
* html ul.OUT li {padding:0;} /* for IE6 */
* html ul.OUT li a {float:left; display:block; padding:2.5px;} /* for IE6 */
 
ul.OUT li.IN img {width:100%; display:block; border:0; cursor:pointer;}
 
ul.OUT li:hover {padding:1px;}
ul.OUT li:hover span {display:block;}
* html ul.OUT a:hover {padding:1px;}
* html ul.OUT a:hover span {display:block;}
 
ul.OUT li.IN:hover img {width:190px; }

/* MAGNIFY horizontal posters */

#HOLDhor {width:648px; height:150px; background:url();margin:0 auto;}
 
ul.OUThor {padding:0; margin:0; list-style:none; width:170px; height:150px; float:left; position:relative;}
ul.OUThor ul {padding:0; margin:0; list-style:none;}
ul.OUThor span {display:none; color:#339999; text-align:center; font:bold 12px/15px Georgia, sans-serif; position:absolute; top:150px; left:0; width:150px; z-index:100;}
ul.OUThor a {text-decoration:none; border-bottom:dashed 1px #339999;}
 
ul.OUThor table {border-collapse:collapse; padding:0; margin:-1px;}
 
ul.OUThor li {display:block; float:left; padding:3px; margin:0;}
 
* html ul.OUThor li {padding:0;} /* for IE6 */
* html ul.OUThor li a {float:left; display:block; padding:3px;} /* for IE6 */
 
ul.OUT li.INhor img {width:100%; display:block; border:0; cursor:pointer;}
 
ul.OUThor li:hover {padding:1px;}
ul.OUThor li:hover span {display:block;}
* html ul.OUThor a:hover {padding:1px;}
* html ul.OUThor a:hover span {display:block;}
 
ul.OUThor li.INhor:hover img {width:190px; }


/* Vertical Text Menu */

#vertical {
  width:15em; 
  padding:0;
  margin:0 auto; 
  list-style-type:none; 
  font-size:1em; 
  font-family:georgia, "times new roman", serif;
  }
#vertical li {
  float:left; 
  border:2px solid #eee;
  margin:1px;
  }
#vertical li a {
  text-decoration:none; 
  color:#000; 
  display:block; 
  width:1em; 
  height:1em; 
  border-top:1px solid #000; 
  height:auto;
  }
#vertical li a em {
  font-style:normal; 
  display:block; 
  text-align:center; 
  background:#fff; 
  border-left:1px solid #000; 
  border-right:1px solid #000;
  }
#vertical li a em.nd {
  border-bottom:1px solid #000;
  }
#vertical li a:hover {
  background:#eee;
  }
#vertical li a:hover em {
  background:#eee; 
  color:#a90909;
  }



/* WORKS MENU - greying image */

#wrap {position:relative; width:500px; height:400px; background:#FFFFFF; padding:0px; position:relative; font-family:Georgia, "Times New Roman", Times, serif;}
#wrap h1 {color:#000; font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal; }
#outerImage {padding:0px; margin:0; list-style:none; }
#outerImage li a {color:#000; text-decoration:none;}
#outerImage table {border-collapse:collapse; width:0; height:0; margin:-1px -4px;}
#outerImage span {display:block; width:400px; height:300px; background:url(http://www.stolenchair.org/_images/_content/works/full.jpg) ; position:absolute; left:0px; top:100px; }
#innerImage {padding:0; margin:0; list-style:none;}
#innerImage li {float:left; color:#000; font-weight:bold; font-size:14px;}
#innerImage li a {float:left; color:#000; font-weight:bold; text-decoration:none;  white-space:nowrap;}
#innerImage li a b {display:block; width:50px; height:300px; position:absolute; background:#transparent;}

#innerImage li a b#link1 {left:0px; top:100px;}
#innerImage li a b#link2 {left:50px; top:100px;}
#innerImage li a b#link3 {left:100px; top:100px;}
#innerImage li a b#link4 {left:150px; top:100px;}
#innerImage li a b#link5 {left:200px; top:100px;}
#innerImage li a b#link6 {left:250px; top:100px;}
#innerImage li a b#link7 {left:300px; top:100px;}
#innerImage li a b#link8 {left:350px; top:100px;}

 
#outerImage li a:hover {border:0;}
#outerImage :hover span {background:url(http://www.stolenchair.org/_images/_content/works/dark.jpg);}
 
#innerImage li a:hover {color:#339999; font-weight:bold;}
#innerImage li a:hover b {cursor:pointer;}

 
#innerImage :hover b#link1 {background:#fff url(http://www.stolenchair.org/_images/_content/works/qpsliver.jpg);}
#innerImage :hover b#link2 {background:#fff url(http://www.stolenchair.org/_images/_content/works/kindersliver.jpg);}
#innerImage :hover b#link3 {background:#fff url(http://www.stolenchair.org/_images/_content/works/tisdsliver.jpg);}
#innerImage :hover b#link4 {background:#fff url(http://www.stolenchair.org/_images/_content/works/tapsliver.jpg);}
#innerImage :hover b#link5 {background:#fff url(http://www.stolenchair.org/_images/_content/works/commediasliver.jpg);}
#innerImage :hover b#link6 {background:#fff url(http://www.stolenchair.org/_images/_content/works/killmesliver.jpg);}
#innerImage :hover b#link7 {background:#fff url(http://www.stolenchair.org/_images/_content/works/stagekisssliver.jpg);}
#innerImage :hover b#link8 {background:#fff url(http://www.stolenchair.org/_images/_content/works/mwlsliver.jpg);}





/* Twitter */

#twitter_div {
display:block;
position:relative;
float:left;
width: 200px;
overflow:visible;
padding: 0 0 0 0;
margin: 0 0 0 0;
border: 0px;
} 

#twitter_div ul {
padding-left: 0;
margin-left:0;
}

#twitter_div li{
list-style: none;
list-style-position:inside;
text-indent:0;
text-align: left;

margin-bottom:8px;
}

#left_align {
display:block;
position:relative;
float:left;
overflow:visible;
padding: 0 0 0 0;
margin: 0 0 0 0;
border: 0px;
} 

#left_align ul {
padding-left: 50px;
margin-left:0;
}

#left_align li{
text-indent:0;
list-style-position:outside;
text-align: left;
margin-bottom:8px;
}


/* RSS feed */

/* begin styles for RSS Feed */

.rss-box {
	 margin: 0;
	 width: 190px;
	 background-color: #ffffff;
	 border: 0;
	 
}
.rss-items {
	margin-top:0px;
	padding:0.5em;
	margin-left:0px;
	color:#000000;
}
p.rss-title {padding:0.5em;}
.rss-title {
	font-size: 10pt;
	background-color: #C4C5FF;
	color: black;
	font-weight:bold;
	text-align: left;
}

.rss-item  {
  font-size: 10pt;
  color: black;
  font-family: Arial, Helvetica;
  list-style:none;
  padding-bottom:1em;
}

.rss-item a {
	color:#a90909;
	font-size: 10pt;
	font-weight:normal;
	}
	
.rss-item a:visited {
	color: #a90909;
}

.rss-date {
	font-size: 7pt;
	color: black;
	}