/* note, can call up different .css style sheets by using a URL such as index.php?style=2 */

a:active { /* FIX!! for Firefox 3 thing where they outline anything you click 8/30/2008*/
  outline: none;
}a:focus
{
-moz-outline-style: none;
}

/* ****  IMAGES  **** */
img {
  border: none;
}

/* ****  TEXT  **** */
p { margin:0 0 1em 0; }

h1 {
  padding:0;margin:0;
  padding-bottom: 10px;
  padding-right: 5px;
  padding-left: 5px;
  font-weight: normal;
  text-align: right;
  color: #ece243; /* site color1 */
  font-size: 20px;
  letter-spacing: 8px;
  text-transform: uppercase;
}

h3 { /* formerly span.newsHeadline */
  display: inline;
  margin: 0;padding: 0;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 3px;
  word-spacing: 3px;
  color: #ff4e3b; /* site color3 */
  /* color: rgb(255,127,80); */
}

span.h1Border {
  padding-right: 4px; /* this includes the 8px letter-spacing of h2 */
  border-right: 4px dotted #ece243;
}

.strongLeadIn {
  font-size: 20px;
  letter-spacing: 4px;
  color: #ece243;
}

span.strongOneLine {
  display:block;
  text-align: center;
  font-weight: bold;
  letter-spacing: 3px;
  word-spacing: 3px;
}

span.date {
  margin-top: 18px;
  color: #f8a63c; /* color2 */
  font-weight: bold;
}

span.infoLine {
  font-size: 10px;
  color: #aaa;
}

span.filmDesc {
  
}

/* ****  TEXT-SPECIAL  **** */
div.newsItem, div.section {
  margin-bottom: 28px;
}

/* Right now, the nameList does nothing. Let's see if we need it. */
ul.nameList, ul.linksList {
  margin: 0;padding: 0;
  list-style-type: none;
}

ul.linksList li {
  margin: 0;padding: 0;
  margin-bottom: 10px;
}

span.dash {
  border-top: 3px dotted #ece243;
  position: relative;
  top: 9px;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 11px;
  margin-right: 7px;
}

/* ****  LINKS  **** */
a {
  text-decoration: none;
  color: #2a84ea; /* color4 */ /* paler #5096e6; */
  border-bottom: 1px dotted #2a84ea;
  padding-bottom: 1px;
}

a:hover {
  border-bottom-style: solid;
}

/* ****  MAIN  LAYOUT  **** */
	
.content{
  font-family: "Tahoma", "Geneva", sans-serif;
	color: #DFDFDF;
	font-size: 12px;
	letter-spacing: +1px;
	word-spacing: +1px;
	line-height: 1.8;
  
	width:648px;
  float:right;
  margin-top: 20px;
	margin-right:46px;
	display:block;
	padding-top:8px;
  padding-bottom: 30px;
	padding-right: 20px;
	padding-left: 30px;
}

/* .............. "clearing technique" START ..............*/
.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {display:inline-block;}
/* mac hide \*/
  * html .clearfix {height: 1%;}
  .clearfix {display: block;}
/* End hide */
/* .............. "clearing technique" END -- do not amalgamate styles...*/


body {
	color:#dfdfdf;
	background:#000;
	margin: 0;padding: 0;
}
.top{
	width:1024px;
	margin:auto;
	background:url(img/boxTop.jpg) no-repeat 2px 3px;
	padding-top:12px;
}
.bottom{
	width:1024px;
	margin:auto;
	background:url(img/boxBottom.jpg) no-repeat left bottom;
	padding-top:12px;
	padding-bottom:50px;
  margin-left: 2px;
}
.main{
	background:url(img/boxMiddle.jpg) repeat-y 101px 0;
	width:1024px;
}
.leftMenu{
	float:left;
	width:274px;
	position:relative;
	margin-top:25px;
}

/* ******** THE MENU ********* /*

/*About my rolls: 6/10/2008
  used tutorials http://tinyurl.com/4jbsx and http://tinyurl.com/3g85db
    ROLLS:
      - they work by having a rollover anchor in its proper location always
      - but the background of anchor style, which is the rollover image, is set off at -300 or whatever
      - on hover, the background (roll image) gets set in place.
    LIGHTS: very cool remote rollover technique
      - the lights are in a span within a link
      - the span is IN the link in the HTML, but positionwise, the span can be placed anywhere
      - each link needed its own unique span, because "absolute" positioning worked, but "screen" didn't for some reason, in terms of cross-browser
*/

/* ...was called "example 3"....*/
.leftMenu ul{
	list-style:none;
	margin:0;
	/*position:relative;*/
  position:static; 
}
.leftMenu li{
	display:inline;
}
.leftMenu li a{
  position: absolute; /* Absolute positions here are based off .leftMenu (since it's the next absolute/fixed block up in the cascade) */
  border-style: none;
}

.leftMenu li.mnuPoe a {
  background: url(img/roll-poest.jpg) no-repeat -200px top;
  top: 128px; left: 138px;
  width: 104px; height: 37px;
}
.leftMenu li.mnuNews a {
  background: url(img/roll-news.jpg) no-repeat -200px top;
  top: 178px; left: 155px;
  width: 40px; height: 14px;
}
.leftMenu li.mnuFilms a {
  background: url(img/roll-films.jpg) no-repeat -200px top;
  top: 207px; left: 153px;
  width: 39px; height: 13px;
}
.leftMenu li.mnuPeople a {
  background: url(img/roll-people.jpg) no-repeat -200px top;
  top: 237px; left: 145px;
  width: 56px; height: 18px;
}
.leftMenu li.mnuContact a {
  background: url(img/roll-contact.jpg) no-repeat -200px top;
  top: 258px; left: 134px;
  width: 60px; height: 24px;
}
.leftMenu li.mnuZac a {
  background: url(img/roll-zac.jpg) no-repeat -200px top;
  top: 124px; left: 10px;
  width: 88px; height: 23px;
}


/* THE SPANS ARE THE LAMP LIGHTS */
.leftMenu li a span {
	position:absolute;
	background: url(img/roll-lamp.jpg) no-repeat -300px top;
  width:0px; height:0px;
}

.leftMenu li.mnuPoe a span { top:-124px; left:-128px; }
.leftMenu li.mnuNews a span {	top:-174px;	left:-145px; }
.leftMenu li.mnuFilms a span { top:-203px;	left:-143px; }
.leftMenu li.mnuPeople a span { top:-233px;	left:-135px; }
.leftMenu li.mnuContact a span { top:-254px;	left:-124px; }
.leftMenu li.mnuZac a span { top:-120px;	left:0px; }

/*.leftMenu li a span {	background-position: left top;}*/
/*.leftMenu li a.current span,*/
.leftMenu li a:hover{
	background-position: left top;
}
.leftMenu li a:hover span {background-position: left top; width: 259px; height:119px;}