/*------------------------------
Author: Barry G White, http://www.etchcode.com/
Website: http://www.etchvids.com/ (does not exist)
Last Edit: 13 April 07
------------------------------*/

/* Colours -------------------
Green:		748338
Red:		cc3333
Yellow:		f9fa90
------------------------------*/

/* Global Styles
------------------------------*/
html, body {
	background: #fff;
	font: small/1.3em Helvetica, "Trebuchet MS", arial, sans-serif;
	color: #222;
	margin: 0;
	padding: 0;
	}
body {background: url(i/grunge-splatter.jpg) no-repeat bottom right;}

/* Links */
a:link, a:active {color:#cc3333; text-decoration:underline;}
a:visited {color:#cc3333; text-decoration: none;}
a:hover {color:#ff2222; text-decoration:none;}

a img {border: none;}
a:hover img {border: none;}

/* Headers */
h1 {font: 120%/100% Georgia, "times new roman", serif; line-height: 90%; font-size: 140%; text-decoration: underline;}
h2 {font: 120%/100% helvetica, arial, sans-serif; font-weight: bold; margin: 0.4em 0 0.4em 0;}
h3 {font: 110%/100% helvetica, arial, sans-serif; font-weight: normal; margin: 0.4em 0 0.4em 0;}

/* Classes */
.justify {text-align: justify;}
.centered {text-align:center;}
.clear {clear: both;}

/* Header
------------------------------*/
#header {width: 100%;}

/* quickcontrols */
#quickcontrols {float: left; background: #cc3333; width: 100%; font-size: 90%;}
#quickcontrols ul {float: right; margin: 0; padding: 0;}
#quickcontrols ul li {float: left; list-style-type: none; margin-right: 10px;}
#quickcontrols a {color: #f9fa90;}

/* masthead */
#masthead {height: 84px; clear: both;}
#masthead img {margin: 0 0 0 40px; padding-top: 5px;}

/* form */
#searchform {clear: both; background: #fff; margin-top: 10px;}
#searchform fieldset {margin: 0; border: none; text-align: center;}
#searchform fieldset label {background: url(i/icon-search.gif) no-repeat; padding-left: 15px;}
#searchform fieldset #query {width: 240px;}

/* Wrap
------------------------------*/
#wrap {width: 900px; margin: 0 auto;}

/* Container
------------------------------*/
#container {float: left; margin-bottom: 30px;}
#container p {margin: 0.2em 0 0.2em 0;}
#container h1 {text-align: center;}

/* Container: Main
------------------------------*/
#main {float: right; width: 660px;}


/* film */
#film {float: left; width: 400px; margin-left: 10px;}
#film p.vid {background: #ccc; text-align: center; height: 250px;}
#film span {font-style: italic;}

/* film: rating */
#rating {margin: 10px 0;}
#rating h2 {float:left; font-size: 100%; margin: 0.7em 0 0 0;}
#rating ul {float: left; padding: 0; margin: 0 0 0 6px;}
#rating ul li {float: left; list-style-type: none; background: transparent url(i/star.gif) no-repeat center; padding: 6px; text-indent: -9999px;}

/* artist */
#artist {float: right; width: 230px; border: 1px solid #ccc; text-align: center;}
#artist dl {width: 200px; margin: 10px auto;}
#artist dl dt {}
#artist dl dd {margin: 0;}

/* Container: Sidebar
------------------------------*/
#sidebar {float: left; width: 230px; border-right: 1px solid #ccc; margin: 0;}

#sidebar ul {margin: 0; padding: 0 0 30px 30px;}
#sidebar ul li {list-style-type: none; height: 1.8em;}
#sidebar ul li.odd {background: url(i/yellow-bg.gif) repeat-x center;}

#sidebar ul li a {
	color: #000;
	background: url(i/icon-arrow.gif) no-repeat center right;
	display: block;
	line-height: 1.8em;
	text-decoration: none;
	width: 180px;
	padding-left: 20px;}
#sidebar ul li a:hover {background: #f9fa90;}

/* Container: Feedback
------------------------------*/
#feedback {
	clear: both;
	float: left;
	width: 900px;
	background: url(i/yellow-bg.gif) repeat-x top;
	border-top: 2px solid #000;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	padding: 0 10px 20px 10px;
	}
#feedback h1 {margin-bottom: 20px; text-align: center;}

/* comments */
#comments {float: left; width: 400px;}
#comments h2 {background: transparent url(i/icon-comment.gif) no-repeat top right; display: inline; line-height: 150%; padding: 0.2em 20px 0 0;}
#comments .comment-entry {width: 400px; padding: 5px;}
#comments .odd {background: #eee; border: 1px solid #999;}
#comments .comment-author p {background: transparent url(i/icon-user.gif) no-repeat left center; padding-left: 18px;}
#comments .comment-author span {color: #aaa;}

/* comment form */
#commentform {float: right; width: 420px;}
#commentform fieldset {border: 1px solid #888; padding: 10px;}
#commentform legend {color: #444;}
#commentform label {display: block;}
#commentform input, #commentform textarea {margin: 0 0 10px 0; width: 200px;}
#commentform textarea {width: 220px;}
#commentform select {width: 12%;}
#commentform input.button {margin: 5px 0 0 0; width: 15%;}

/* Footer
------------------------------*/
#footer {clear: both; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 0 0 10px 20px;}
#footer p.meta {margin-bottom: 0;}
#footer p.meta a {padding: 1px 0 2px 20px;}

#footer a.rss {background: url(i/icon-rss.gif) no-repeat center left;}
#footer a.mail {background: url(i/icon-mail.gif) no-repeat center left;}
#footer a.about {background: url(i/icon-about.gif) no-repeat center left;}
#footer a.accesibility {background: url(i/icon-accesibility.gif) no-repeat center left;}