/**********************************************************
/ styles.css
/ laurettaprevost.com
/
/ This file is a stylesheet for the site displayed at
/ laurettaprevost.com.
/
/ This file is free for personal use.
/
/ Copyright 2009 Matt Thomas
/ rmatthewthomas@gmail.com
/
/*********************************************************/

/* STANDARD ELEMENTS*/

html, body {
 margin: 0;
 padding: 0;
 background: #000;
 font-family:"bitstream vera sans","lucida grande","verdana",sans-serif;
}

a {
 color: #e9edf3;
 color: #c6c9d0;
 text-decoration: none;
}

a:hover, a:active {
text-decoration: underline;
}

a:active {
outline: none;
}

:focus {
-moz-outline-style: none;
}

em {
 font-style: normal;
 font-weight: bold;
}

img {
 border: none;
}


/*  PAGE ELEMENTS  */

#page {
 width: 812px;
 padding: 0 12px 30px 12px;
 margin: 0 auto;
 color: #e9edf3;
 color: #c6c9d0;
 font-size: .9em;
}

#header {
 height: 74px;
 padding: 0;
 margin: 0;
 background: transparent url(newheader.png) no-repeat top left;
}

#header span {
 display: block;
 float: right;
 padding: 1.3em 0 0 0;
 margin: 0;
}

#nav {
 position: relative;
 float: right;
 margin-top: -31px;
 padding: 0;
 padding-left: 189px;
 text-align: right;
}

#nav li {
 display: inline-block;
 display: -moz-inline-box;
 -moz-box-orient: vertical;
 vertical-align: top;
 list-style: none;
}

#nav a {
 display: block;
 color: #c6c9d0;
 font-size: 1em;
 margin: 0 0 0 6px;
 padding: 0 0 4px 20px;
 text-indent: -12px;
}

#nav a:hover {
 text-decoration: none;
 color: #98a2ca;
}

#nav a.current {
 color: #98a2ca;
}

#nav a.current:hover {
 text-decoration: none;
 color: #c6c9d0;
}

#content {
 padding-top: 1.2em;
}

#blocker {
 position: relative;
 margin: 0;
 padding-top: 1.6em;
 min-height: 380px;
}

#blocker.solo {
 min-height: 470px;
}

#blocker a {
 color: #98a2ca;
 text-decoration: none;
 font-size: 1.1em;
}

#blocker a em {
 color: #ccc;
 font-size: 0.9em;
}

#blocker a:hover span.title, #blocker a:hover em.no_title {
 text-decoration: underline;
}

#blocker #page_title, #blocker p, #blocker h3, #blocker img, #blocker ul {
 display: block;
 margin-left: 150px;
}

#blocker #warning {
 display: block;
 width: 612px;
 margin: 0 auto;
}

#blocker #warning a {
 color: #920810;
 text-decoration: underline;
 font-size: 1em;
}

#blocker #warning a:hover {
 color: #e9121a;
}

#blocker p {
 width: 500px;
}

#blocker #page_title.center {
 margin: 0 auto;
 text-align: center;
}

#blocker p.missing {
 margin-bottom: 20px;
}

#blocker h3 {
}

#blocker img {
 margin: 0 auto 1.5em auto;
}

#blocker .solo img {
 padding-top: 40px;
}

#blocker ul {
}

#blocker li {
 list-style: none;
 margin: .8em auto;
 text-indent: -1.2em;
}

.category {
 display: none;
 position: absolute;
 font-size: 1.2em;
 padding-right: 12px;
 font-weight: bold;
 top: -1.3em;
 height: 1.3em;
}

#footer {
 position: relative;
 clear: both;
 margin-top: 32px;
 text-align: center;
}

#footer span {
 margin: 0 2em;
 z-index: 4;
}

#footer .email, #footer .phone{
 display: block;
 position: absolute;
 left: 0;
}

#footer .phone {
 left: auto;
 right: 0;
}

.rearr {
 display: none;
}


/*  STANDARD PLAYLIST */

#playlist {
 text-align: center;
 margin: 0;
 padding: 0;
}

#playlist li {
 display: inline-block;
 display: -moz-inline-box;
 -moz-box-orient: vertical;
 vertical-align: top;
 list-style: none;
 float: left;
 width: 150px;
 height: 260px;
 margin: 10px 2px;
 padding: 8px;
 font-size: 0.8em;
 overflow: hidden;
 text-align: left;
}

#playlist a:hover {
 text-decoration: none;
}

#playlist img {
 display: block;
 margin: 8px auto;
 width: 124px;
 border: 2px solid #000;
}

#playlist em {
 display: block;
 text-align: center;
 font-style: normal;
 font-weight: bold;
}



/*  HOVER PLAYLIST */

#pl {
 text-align: center;
 background: #000; 
}

#pl a {
 display: inline-block;
 display: -moz-inline-box;
 -moz-box-orient: vertical;
 vertical-align: top;
 margin: 10px 6px;
 padding: 2px;
}

#pl a img {
 display: block;
 height: 68px;
}

#pl a em {
 display: block;
 font-size: .9em;
 font-weight: normal;
 text-align: center;
 color: #c6c9d0;
}

#pl a .full {
 display: none;
 height: 0;
 visibility: hidden;
}

#pl a .showme {
 visibility: visible;
 color: #000;
}

#pl a:hover {
 text-decoration: none;
 color: #98a2ca;
}


/*  CLIP VIEWER */

#blocker a.player {	
	display: block;
	position: relative;
	margin: 0 auto;
	background: url(background.png) no-repeat;
	width: 477px;
	height: 375px;
	padding: 0;	
	text-align: center;
}

#blocker a.player img, #blocker a.player:hover img.dead {
	position: absolute;
	top: 0;
	left: 0;
	clip: rect(0px 80px 80px 0px);
	padding: 0;
	margin-top: 140px;
	margin-left: 198px;
	border: 0;
}

#blocker a.player:hover img {
	clip: rect(80px 80px 160px 0px);
	margin-top: 60px;
}


/*  INFO BOX */

#infobox {
 display: none;
 position: absolute;
 top: 0;
 left: 0;
 width: 188px;
}

#infobox img {
 display: none;
 margin: 16px 16px 6px 16px;
 width: 150px;
 border: 3px solid #000;
}

#infobox em {
 display: block;
 width: 150px;
 margin: 0;
 padding: 14px 19px 12px 19px;
 font-style: normal;
 font-weight: bold;
 text-align: center;
 background: transparent url(screentop.png) no-repeat top left;
}

#infobox span#link {
 display: block;
}

#infobox #link span {
 display: block;
 padding: 6px 12px;
 padding-bottom: 20px;
 min-height: 90px;
 background: transparent url(screen.png) no-repeat bottom left;
 font-size: .9em;
}


/*  DISPLAY BOX */

#clipinfo {
 position: absolute;
 top: 0;
 left: 0;
 width: 812px;
 height: 1em;
 text-align: center;
 color: #98a2ca;
}

#clipinfo em {
 margin-right: 1.2em;
 color: #c6c9d0;
}

#clipinfo span {
 font-size: .9em;
}