/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* LAYOUT */

body { 
	margin: 0;
	padding: 0;
	background-color: #3B3B3B;
	background-repeat: no-repeat; 
	background-image: url(/images/bg_main_low.png); 
	background-position: top center;
}

#page {
	position: relative;
	width: 945px;
	height: 660px;
	margin-left: auto;
	margin-right: auto;
	background-repeat: no-repeat; 
	background-image: url(/images/bg_main4.jpg);
}

#footer {
	position: absolute;
	width: 744px;
	top: 605px;
	left: 100px;
}

#marquee {
	position: absolute;
	width: 744px;
	height: 130px;
	top: 529px;
	left: 100px;
}

#navigation {
	position: absolute;
	top: 170px;
	left: 100px;
}

.sitename {
	position: absolute;
	width: 744px;
	height: 39px;
	margin: 0;
	padding: 0;
	top: 490px;
	left: 100px;
}

hr {
	display: none;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* TEXT */

body { 
	font-family: Helvetica;
}

#footer a {
	display: block;
	text-decoration: none;
	text-align: right;
	padding-top: 0;
	margin-top: 12px;
	padding-right: 30px;
	font-size: 10px;
	color: #595959;
	letter-spacing: 1px;
}

#footer a:hover {
	color: #881E1E;
	text-decoration: none;
}

#footer a span {
	padding-left: 15px;
}

h1.sitename {
	background-image: url(../images/title_matt_s_video.png);
	font-size: 1px;
	text-indent: -1000em;
}

h3.sitename a {
	display: block;
	width: 744px;
	height: 39px;
	background-image: url(../images/title_matt_s_video.png);
	font-size: 1px;
	text-indent: -1000em;
	outline: none;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* MAIN NAVIGATION */

#navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#navigation ul li {
	height: 34px;
	margin: 0;
	padding: 0;
	background-image: url(../images/nav_main.png);
	background-repeat: no-repeat;
}

#navigation ul li#work  	{ background-position: 0px 0px; 	width: 110px; }
#navigation ul li#words 	{ background-position: 0px -34px;  	width: 122px; 	height: 33px; }
#navigation ul li#bio		{ background-position: 0px -67px;  	width: 84px; 	height: 33px; }
#navigation ul li#shop		{ background-position: 0px -100px; 	width: 178px;	height: 53px;}
#navigation ul li#contact	{ background-position: 0px -153px; 	width: 147px;}

#navigation ul li a {
	display: block;
	height: 25px;
	padding-left: 26px;
	color: #9C9C9C;
	text-transform: uppercase;
	text-decoration: none;
	text-indent: -1000em;
	outline: none;
	background-repeat: repeat-y;
}

#navigation ul li#shop a { height: 45px; }

#navigation ul li a:hover {
	background-image: url(../images/nav_main_hover.gif);
	background-repeat: repeat-y;
}

body.work		#navigation ul li#work a,
body.words		#navigation ul li#words a,
body.bio		#navigation ul li#bio a,
body.shop		#navigation ul li#shop a,
body.contact	#navigation ul li#contact a { 
	background-image: url(../images/nav_main_hover.gif); 
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* MARQUEE */

#marquee {
	background-color: none;
	background-image: url(../images/bg_marquee.jpg);
	background-repeat: no-repeat;
	white-space: nowrap;
	border: 0px dotted green;
}

#marquee .marquee {
	width: 744px;
	height: 128px;
	overflow: auto;
}

.with-jmarquee #marquee {
	height: 69px;
}

.with-jmarquee #marquee .marquee {
	height: 69px;
	overflow: hidden;
}

#marquee a {
	margin-left: 10px;
	margin-right: 10px;
	border: 0;
	outline: none;
}

#marquee a img {
	padding-left: 10px;
	padding-right: 10px;
	border: 0;
	opacity: 1.0;
	width: 90px;
	height: 69px;
}

#marquee a:hover img {
	background-image: url(../images/marquee/video_shadow2.png);
}

#marquee span.start {
	position: absolute;
	display: block;
	border: 0px dotted red;
	width: 50px;
	height: 69px;
	z-index: 10;
	background-color: none;
	background-repeat: no-repeat;
}

#marquee span#start1 {
	top: 0px;
	left: -25px;
	background-image: url(../images/marquee_left.png);
	background-position: right;
}

#marquee span#start2 {
	top: 0px;
	right: -25px;
	background-image: url(../images/marquee_right.png);
}

#marquee span.bottom {
	position: absolute;
	display: block;
	border: 0px dotted red;
	width: 694px;
	height: 8px;
	top: 62px;
	left: 25px;
	z-index: 10;
	background-color: none;
	background-image: url(../images/marquee_bottom.png);
}

#marquee span.cover {
	position: absolute;
	display: none;
	top: 0px;
	left: 0px;
	width: 744px;
	height: 70px;
	background-image: url(../images/bg_marquee_cover.png);
}

body.home #marquee span.cover {
	display: none;
}