/*
Theme Name: Horne's website
Theme URI: http://www.alexhorne.com/
Description: A theme for Alex hornes website
Version: 0.1
Author: Daniel Lewis
Author URI: http://www.mrdaniellewis.co.uk
*/

@charset "utf-8";

/*------------------------------------------------------------------------------
CSS reset - http://developer.yahoo.com/yui/reset/
------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym {border:0;}
div{margin:0; zoom:1;} /* IE has layout fix and Moz border fix*/

/*------------------------------------------------------------------------------
Base styles
------------------------------------------------------------------------------*/
/*Always show scroll bar - stops "jumping" when moving between pages*/
html {overflow-y: scroll;}
/*Colours and fonts*/
body {background: #FF0000; color: white; font-family: arial, sans-serif; font-size: 1em;}
td, th  {font-family: arial, sans-serif; font-size: 100%;} /*Make sure IE tables inherit font-size and family*/
textarea, text {font-family: arial, sans-serif; font-size: 100%;}
/*Centre the content in IE*/
body {text-align: center;}
#page {min-width: 760px; max-width: 900px; margin: auto; text-align: left; }
/*Max width hack fot IE5/6 v ugly!*/
#page {_width: 760px; _width: expression(document.body.clientWidth > (900) ? "900px" : document.body.clientWidth < (760) ? "760px" : "auto");}
/*Hide content for screenreaders*/
.accessibilityhidden {position: relative; left: -990px; width: 10px; overflow: hidden;}
.dummyclear {clear: both;}

/*------------------------------------------------------------------------------
Header
------------------------------------------------------------------------------*/
#header {background: url(images/header.gif) no-repeat top center; height: 36px; margin: 1em 0;}
#header a {display: block; text-decoration: none; height: 36px; width: 383px; margin: auto;}

/*------------------------------------------------------------------------------
Main navigation menus
------------------------------------------------------------------------------*/
ul#navleft {float: left; margin: 15px 0 0 0; padding: 0;}
ul#navleft li {margin-top: 15px;}
ul#navright {float: right; margin: 15px 0 0 0; padding: 0;}
ul#navright li {margin-top: 15px;}

ul.nav li a {display: block; min-width: 110px; _width: 110px; text-decoration: none; font-size: 20px; text-align: center; color: black; font-weight: bold;}
ul.nav a:hover,
ul.nav a.current {color: white;}

/*------------------------------------------------------------------------------
#Maincontent
------------------------------------------------------------------------------*/

#maincontent {padding: 0; margin: 20px 120px;}
#maincontent .contents {padding: 1.5em 2em 2em 2em;}
/* This is the fix the IE italics problem http://www.positioniseverything.net/explorer/italicbug-ie.html*/
#maincontent .contents {overflow: visible;}
#maincontent h2 {color: #F5F500; border-bottom: 1px dotted red; margin-bottom: 20px; font-size: 140%; font-weight: bold;}
#maincontent h3 {color: #EEAD37; margin: 1em 0 0.5em 0; font-size: 120%;}
#maincontent p {margin-top: 1em; line-height: 130%;}
#maincontent li {line-height: 130%;}
#maincontent a {color: yellow;}
#maincontent a:visited {color: yellow;}
#maincontent a:hover {color: black; text-decoration: none; background: yellow;}
#maincontent blockquote {margin: 0; padding-left: 50px; background: url(images/blockquotestart.gif) no-repeat top left; min-height: 30px;}
#maincontent blockquote div {padding-right: 50px; background: url(images/blockquoteend.gif) no-repeat bottom right; min-height: 30px;}
#maincontent blockquote cite {color: #eead37;}
/*IE 7 is slightly ballsing the spacing - try to correct*/
#maincontent blockquote p:first-child {margin-top:0;}
#maincontent blockquote {margin-top: 1em;}

#maincontent ul {list-style: disc; margin: 0.3em 0 0 3em;}
#maincontent ul ul {list-style: square; margin-top: 0;}

img.alignright {float:right;}
img.alignleft {float:left;}

strong {font-weight: bold;}
em {font-style: italic;}

/*------------------------------------------------------------------------------
Curved backgrounds using CSS - maybe one day
------------------------------------------------------------------------------*/
/*.yellowcurve {background: yellow; 
	-moz-border-radius: 10px; -moz-box-shadow: 0 0 10px #444;
	-webkit-border-radius: 10px; -webkit-box-shadow: 0 0 10px #444;
	border-radius: 10px; box-shadow: 0 0 10px #444;
}
.yellowcurve:hover,
.yellowcurve.current {background: blue;
	-moz-border-radius: 10px; -moz-box-shadow: 0 0 10px 5px white;
	-webkit-border-radius: 10px; -webkit-box-shadow: 0 0 10px 5px #fff;
	border-radius: 10px; box-shadow: 0 0 10px 5px #fff;
}
.bluecurve {background: #0000FF;
	-moz-border-radius: 20px; -moz-box-shadow: 0 0 20px #444;
	-webkit-border-radius: 20px; -webkit-box-shadow: 0 0 20px #444;
	border-radius: 20px; box-shadow: 0 0 20px #444;
}*/

/*------------------------------------------------------------------------------
Image based backgrounds
------------------------------------------------------------------------------*/
.yellowcurve span.bd {min-height: 15px; _height: 15px; display: block; min-width: 110px;}
.yellowcurve .contents {display: block; padding: 5px 8px 10px 8px;
	cursor: pointer; /*IE wasn't displaying the correct cursor*/
}
.yellowcurve {background: #F5F500 url(images/bluebox-l.gif) repeat-y top left;}
.yellowcurve  .bd {background: url(images/bluebox-r.gif) repeat-y top right;}
.yellowcurve  .bd .bd {background: url(images/bluebox-t.gif) repeat-x top right;}
.yellowcurve  .bd .bd .bd {background: url(images/bluebox-b.gif) repeat-x bottom right;}
.yellowcurve  .bd .bd .bd .bd {background: url(images/bluebox-tl.gif) no-repeat top left;}
.yellowcurve  .bd .bd .bd .bd .bd {background: url(images/bluebox-tr.gif) no-repeat top right;}
.yellowcurve  .bd .bd .bd .bd .bd .bd {background: url(images/bluebox-bl.gif) no-repeat bottom left;}
.yellowcurve  .bd .bd .bd .bd .bd .bd .bd {background: url(images/bluebox-br.gif) no-repeat bottom right;}

.yellowcurve:hover {background: #0000FF url(images/blueboxglow-l.gif) repeat-y top left;}
.yellowcurve:hover .bd {background: url(images/blueboxglow-r.gif) repeat-y top right;}
.yellowcurve:hover .bd .bd {background: url(images/blueboxglow-t.gif) repeat-x top right;}
.yellowcurve:hover .bd .bd .bd {background: url(images/blueboxglow-b.gif) repeat-x bottom right;}
.yellowcurve:hover .bd .bd .bd .bd {background: url(images/blueboxglow-tl.gif) no-repeat top left;}
.yellowcurve:hover .bd .bd .bd .bd .bd {background: url(images/blueboxglow-tr.gif) no-repeat top right;}
.yellowcurve:hover .bd .bd .bd .bd .bd .bd {background: url(images/blueboxglow-bl.gif) no-repeat bottom left;}
.yellowcurve:hover .bd .bd .bd .bd .bd .bd .bd {background: url(images/blueboxglow-br.gif) no-repeat bottom right;}

.yellowcurve.current {background: #0000FF url(images/blueboxglow-l.gif) repeat-y top left;}
.yellowcurve.current .bd {background: url(images/blueboxglow-r.gif) repeat-y top right;}
.yellowcurve.current .bd .bd {background: url(images/blueboxglow-t.gif) repeat-x top right;}
.yellowcurve.current .bd .bd .bd {background: url(images/blueboxglow-b.gif) repeat-x bottom right;}
.yellowcurve.current .bd .bd .bd .bd {background: url(images/blueboxglow-tl.gif) no-repeat top left;}
.yellowcurve.current .bd .bd .bd .bd .bd {background: url(images/blueboxglow-tr.gif) no-repeat top right;}
.yellowcurve.current .bd .bd .bd .bd .bd .bd {background: url(images/blueboxglow-bl.gif) no-repeat bottom left;}
.yellowcurve.current .bd .bd .bd .bd .bd .bd .bd {background: url(images/blueboxglow-br.gif) no-repeat bottom right;}*/

.bluecurve {background: #0000FF url(images/box-l.gif) repeat-y top left;}
.bluecurve .bd {background: url(images/box-r.gif) repeat-y top right;}
.bluecurve .bd .bd {background: url(images/box-t.gif) repeat-x top right;}
.bluecurve .bd .bd .bd {background: url(images/box-b.gif) repeat-x bottom right;}
.bluecurve .bd .bd .bd .bd {background: url(images/box-tl.gif) no-repeat top left;}
.bluecurve .bd .bd .bd .bd .bd {background: url(images/box-tr.gif) no-repeat top right;}
.bluecurve .bd .bd .bd .bd .bd .bd {background: url(images/box-bl.gif) no-repeat bottom left;}
.bluecurve .bd .bd .bd .bd .bd .bd .bd {background: url(images/box-br.gif) no-repeat bottom right;}

/*Some sort of weird inheritance is going on - respecify the #maincontent style*/
#maincontent {background: #0000FF url(images/box-l.gif) repeat-y top left;}

/*------------------------------------------------------------------------------
Items list
------------------------------------------------------------------------------*/
#maincontent ul.itemlist {list-style-type: none; margin: 0; padding: 0;}
#maincontent ul.itemlist li {margin: 10px 0; padding: 0.5em; border: 2px solid #EEAD37; min-height: 150px; _height: 150px;}
#maincontent ul.itemlist li h3 {font-size: 110%; border-bottom: none; margin: 0 0 1em 0;}
#maincontent ul.itemlist li h3 a.image{margin: 0 10px 0 0; float: left;}
#maincontent ul.itemlist li {border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -ie-border-radius: 10px; -opera-border-radius: 10px;}
#maincontent .shows p,
#maincontent .books p {padding-left: 110px;}
#maincontent .films p {padding-left: 210px;}
#maincontent .shows h3 a.image,
#maincontent .books h3 a.image {min-width: 100px; _width: 100px;}
#maincontent .films h3 a.image {min-width: 200px; _width: 200px;}

/*------------------------------------------------------------------------------
Videos
------------------------------------------------------------------------------*/
#video {_height: 1px; /*IE hack*/}
#video .video {text-align: center;}

table.filmcontrols {width: 100%; margin: 1em 0;}
table.filmcontrols td {width: 33.33%}
table.filmcontrols td.left {text-align: left;}
table.filmcontrols td.right {text-align: right;}
table.filmcontrols td.centre {text-align: center;}

/*------------------------------------------------------------------------------
Photos
------------------------------------------------------------------------------*/
#photos { _height: 1px; /*IE hack*/}
.photo {text-align: center;}
.description{}
.thumbnails{}
.thumbnail {width: 100px; height: 75px; _height: 85px; text-align: center; vertical-align: middle; float: left; margin: 5px;}
#maincontent .thumbnail a:hover {background: none;}

/*------------------------------------------------------------------------------
The contact form
------------------------------------------------------------------------------*/
#maincontent .standardform fieldset {border: none;}
#maincontent .standardform div.label {margin: 10px 0 3px 0; color: #F5F500;}
#maincontent .standardform input.text {width: 100%; margin: 0 0 10px 0; font-size: inherit;}
#maincontent .standardform textarea {width: 100%; clear: left; height: 100px; margin: 0 0 10px 0;}
#maincontent .standardform input.submit {background: #008DDE; font-weight: bold; color: white; cursor: pointer; font-size: inherit;}
#maincontent .standardform input.submit:hover {background-color: #EEAD37; color: #890000;}

#maincontent .standardform div.input2 {
	/*This element is hidden in an attempt to prevent spamming*/
	display: none !important; visibility: hidden !important;
}

/*------------------------------------------------------------------------------
Edit link
------------------------------------------------------------------------------*/
#pageeditlink {position: fixed; top: 0; right: 0; padding: 0.25em 0.5em !important; margin: 0 !important; background: #0000FF;}