/* Use this for the main structures and common elements.
	Then have different additional stylesheets for different subsections, eg, forums.
*/

body {
	font-family:  Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #333;
	text-align: center;
	background-color: #312318;
	}


/**********************************************************************/	
/* COMMON UNIVERSAL ELEMENTS */

h2 {
	font-weight: bold;
	}
h3 {
	font-weight: normal;
	}

a {
	text-decoration: none;
	}
	
a:hover {
	text-decoration: underline;
	}

	
a img {
	border: none;
	}
	
p {
	color: #000;
	}
	
	
div.break {
	clear: left;
	height: 1px;
	font-size: 1px;
	background: none;
	}


input.image {
	margin-top: -8px;
	vertical-align: middle;
	}
	
	
img.submit {
	border: none;
	}
  
.error {
	color: #c00;
	}

li {
	line-height: 1em;
	}

/* For doing <hr>s nicely, from
http://diveintoaccessibility.org/day_25_using_real_horizontal_rules_or_faking_them_properly.html */
div.hr { display: none }
/*/*/a{}
div.hr {
	display: block;
	margin: 1em 0.75em 1em 0.75em ;
	border-bottom: 1px dotted #999;
	clear: left;
	}
	
	
hr { display: none }
/* */

  

/**********************************************************************/	
/* MAIN STRUCTURE - COLUMNS */
/*
	Heirarchy goes something like this:
	
	#container
		#banner
			#title
		#content
			#right
			#leftmid
*/
	
#container {
position:relative;
	width: 770px;
	margin: 0 auto 0 auto;
/*	border-left: 1px solid #fff; Stops disappearing off screen in Mozilla. */
	}
	
#header {
	width: 770 px;
	height: 210 px;
	background: #E2D2BC;
	}
	
#content {
	padding: 20px 0 0 0;
	text-align: left;
	}
	
	
#leftmid {
	margin: 0 260px 0 0;
	}
	
#full {
	margin: 0;
	width: 770px;
	}
	
#right {
	float: right;
	width: 250px;
	}

#footer {
	margin-top: 20px;
	clear: both;
	background: url(../images/pixel.gif) top left no-repeat #CFC4B1;
	}



/**********************************************************************/
/* THE MAIN TITLE AND MENU */

/* All other menu styles for the HTML menu */

.title {
	text-align: left;
	line-height: 0;
	position: relative;
	height: 210px;
	margin-bottom: -12px;
	padding:0;
	}

#title-home {
	background-image: url(../images/home.gif);
	}

	
h1 {
	margin: 145px 0 0 10px; 
	padding: 0;
	font-weight: bold;
	}
	
#menu {
	position: absolute;
	top: 0;
	left: 0 px;
	width: 250px;
	text-align: left;
	margin:  0px 0px 0px 520px ;
	line-height: 0;
	padding: 0;
	background-image: url(../images/menu_bg_2.gif)

	}
	
#menu.single{
	background-image: url(../images/menu_bg_1.gif);
	}
	
#menu ul,
#menu li {
	list-style: none;
	margin: 0;
	padding: 0;
	}

#menu li {
	background: url(../images/menuarrow_off.gif) no-repeat;
	padding: 0 0 0 16px;
	}

#menu-l li {
	width: 108px;
	line-height: 1.8 em;
	}	
	
#menu-r li {
	width: 145px;
	line-height: 1.8 em;
	}	

#menu li.on {
	background-image: url(../images/menuarrow_on.gif);
	text-decoration:none;
	}

#menu-l,
#menu-r {
	height: 210px;
	width: 250px;
	}
	
	
#menu-r {
	width: auto;
	position:absolute;
	top: 0px;
	left: 100px;
	float:left;

	}
	

#menu #menu-r li {
	background-image: url(../images/menuarrowr_off.gif);
	}
#menu #menu-r li.on {
	background-image: url(../images/menuarrowr_on.gif);
	}

#article-l-writing.writing li.on {
	color:black;
	font-weight:700;
	}

.plays#menu-r ul 		{ padding-top: 7px; }
.movies#menu-r ul		{ padding-top: 68px; }
.paintDraw#menu-r ul 		{ padding-top: 112px; }
.collection#menu-r ul 		{ padding-top: 89px; }
.tvRadio#menu-r ul 		{ padding-top: 90px; }
.writing#menu-r ul 		{ padding-top: 112px; }
.writing#article-l-writing ul { 
	padding-top: 0px; 
	padding-left: 5px; 
	margin: 5px 5px 0px 20px;
	}
/**********************************************************************/
/* THE STRUCTURAL BLOCKS WITHIN THE COLUMNS */


.title img {
	position: absolute;
	top: 0px;
	left: 0px;
	}

div.block,
div.block-l,
div.block-r {
	margin: 0 0 3px 0;
	padding: 0;
	background: url(../images/pixel.gif) bottom left no-repeat #fff;
	width: 100%;
	}

#right .block {
	background-color: #E2D2BC;
	}
	
/* You can just have an image as the entire block: */
img.block {
	display: block;
	border: none;
	margin:0px 0px 0px 10px;
	}

	
#right div.block,
#right img.block {
	margin-bottom: 10px;
	margin-top: 0px;
	}
	
div.block {
	clear: left;
	}
	
/* For doing two columns within #leftmid */
div.block-l {
	width: 250px;
	margin-left: 0;
	margin-right: 0;
	float: left;
	}
div.block-r {
	width: 250px;
	margin-left: 3px;
	margin-right: 0;
	float: left;
	}

div.article-l,
div.article-r {
	margin: 0 0 0 0;
	padding: 0;
	}
	
div.article-l {
	width: 170px;
	margin: 10px 0 0 0 ;
	float: left;
	}
	
	div.article-l-writing {
	width: 140px;
	margin: 0 0 0 0 ;
	}
	
	
div.article-r {
	width: 337px;
	margin: 10px 0 0 0 ;
	float: left;
	}
	
	
	
	
div.article-r a{
	margin-right: 25px;
	}
	
div.contact-l,
div.contact-r {
	margin:10px 0 0 10px ;
	padding: 0;
	width: 230;
	}
	
div.contact-l {
	float: left;
	border-right:1px dashed #ccc;
	}

div.contact-r {
	float: right;
	}
	
div.crew-l,
div.crew-r {
	margin:10px 0 0 0px ;
	padding: 0;
	width: 250px;
	}
	
div.crew-l {
	float: left;
	}

div.crew-r {
	float: left;
 	border-left:1px dashed #ccc;
	}

div.line{
	width:100%;
	background:url(../images/dot.gif) repeat-x;
	margin: 5px 0 5px 10px;
	}
	
div.left {
	background:white;
	float: left;
	}
	
div.right{
	background:white;
	padding-right:10px;
	padding-left:.25em;
	float: right;
	width:110px;
	align:left;
	}

div.block-neutral a{
	 margin:0 5px 5px 0px;
  }
	

div.block-neutral {
 margin:10px 5px 5px 10px;
  }
	
/* In #footer */
#left-foot {
	margin-left: 10px;
	padding: 4px 0 5px 0;
	}
	
	
	
#right-foot {
	float: right;
	padding: 4px 10px 5px 0;
	background: url(../images/pixel.gif) top right no-repeat;
	}

	
	
/**********************************************************************/	
/* THINGS WITHIN BLOCKS */

div.block-head {
	background: url(../images/pixel.gif) top left no-repeat #E2D2BC;
	}

.block-body {
	padding-top: 0px;
	padding-bottom: 10px;
	background: url(../images/pixel.gif) bottom right no-repeat;
	}
	
.block-head h2,
.block-head p {
	background: url(../images/pixel.gif) top right no-repeat;
	margin: 0 0 0 10px;
	padding: 10px 0  10px 0;

	}	
	
#right div.block-head h2 {
	margin: 0 0 0 10px;
	}	
	

.block-head p.empty {
	font-size: 1px;
	padding: 5px 0 0 0;
	}
	
.block-head p.right {
	float: right;
	margin: 5px 10px 0 0;
	background: none;
	}

.block-body h3 {
	margin: 0 10px 0 10px;

	clear: left;
	}
	
.block-body h4 {
	margin: 0 10px 0 10px;
	padding: 0;
	}
	
.block-body p {
	margin: 0 10px 1em 10px;
	line-height: 1.7em;
	}

.block-body p.last {
	margin-bottom: 0px;
	}

.block-body ul {
	margin-top: 0.5em;
	}
.block-body li {
	line-height: 1.2em;
	margin-bottom: 0.5em;
	}
	
	
div.imagetitle {
	text-align:center;
	width:100%;
	color:#959CA5;
	margin:0 0 30px 0;
	border-bottom:1px;
}



/* Home page */
.home{
		color: #f06;
}

#hp-box {
	width: 232px;
	height: 110px;
	margin: 10px 0 10px 10px;
	padding: 0;
	float: left;
	border: 1px solid #f06;
	}
	
#hp-box img.hp-thumb {
	margin-right: 10px;
	border: none;
	float: left;
	}
#hp-box h2, theDate {
	font-size: 1.2 em;
	font-weight: normal;
	margin: 5px 0 5px 0;
	}
	
p.theDate {
	color:#f06;
	text-align:right;
	padding: 15px 10px 15px 0;
	}
	
#hp-box p {
	margin-bottom: 0.4em;
	}
	
#hp-box p.last {
	margin-bottom:0em;
	line-height: 1.3em;
	}
	
#menu-l.second li.on, .home a {
	color: #f06;
	}

	
/* Second page */
.second, .second a, #menu-l.second li.on{
	color: #009CFF;
	}


/* third page */
.third, .third a, #menu-l.third li.on{
		color: #EA00FF;
		}
/**********************************************************************/
/* FONT FACES AND SIZES */
/* Keep the font definitions separate from everything else, so it's easy to tweak. */

body {
	font-size: 70%;
	}

h1 { 
	font-size: 3em;
	}

h2 {
	font-size: 1.8em;
	}

h3 {
	font-size: 1.5em;
	}
	
.block-head h4 {
	background: url(../images/pixel.gif) top right no-repeat;

	font-size: 1.8em;
	font-weight: bold;
	margin: 0 0 0 10px;
	padding: 10px 0  10px 0;
	}
	
#footer {
	letter-spacing: .10 em;
	font-size: .8 em;
	}

p,
li,
a.rss,
select {
	font-size: 1em;
	}

.smallItal{
	font-size: 0.9em;
	color: #ccc;
	text-decoration: italic;
	}


	
#menu-l li {
	font-size: 12px;
	}

#menu-r li {
	font-size: 12px;
	line-spacing:10px;
	}