/* 960px Fixed-Width Template (Font at 16px/24px)

NOTES:
- Base styles and template created by Cole Brown (take-flight.net)
- Several defaults taken from normalize.css (with thanks to Nicolas Gallagher and Jonathan Neal)
----------------------------------------------------------------------------------------------------*/


/* Base Layout
----------------------------------------------------------------------------------------------------*/
html, body { height: 100%; margin: 0; padding: 0; }
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

article, aside, details,
figcaption, figure, footer,
header, hgroup, nav,
section { display: block; }

img { border: 0; -ms-interpolation-mode: bicubic; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }

[hidden] { display: none; }

  /* Clearfix */
.clear:before,
.clear:after { content: ""; display: table; }
.clear:after { clear: both; }
.clear { zoom: 1; }

  /* Colour Scheme
Purple (Header): #491E3F;
Blue (Links): #336185;
Brown (Accent): #735736;
White (Background for text): #F2F2F2;
Grey (Site background): #A6A6A6;
*/

/* Base Typography & Positioning

This is a reset of styles and the general behaviour of all text and positioning. Changes here will 
be site-wide. If you need to make a change to a small section of code, see the Theme Library 
below and find the specific container element.
----------------------------------------------------------------------------------------------------*/
body { color: #333; font-family: Arial, Helvetica, Tahoma, sans-serif; font-size: 16px; line-height: 24px; text-align: left; }
body, button, input, select, textarea { font-family: sans-serif; }

a { color: #336185; font-weight: bold; text-decoration: none; }
a:active { }
a:focus { outline: thin dotted; }
a:link { }
a:visited { }
a:hover { text-decoration: underline; }
a:hover, a:active { outline: 0; }

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

small { font-size: 75%; }

ul, ol { margin: 0; padding: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; }

dd { margin: 0 0 0 40px; }

h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
h1, p, ul, ol, dl, table, small { margin-bottom: 24px; }
h1, h2, h3, h5, h6 { font-weight: normal; }
h4, blockquote, dt, caption { font-weight: 600; }
h2, h3, h4, h5, h6, th, caption, dt { }

h1, h2, h3, h4, h5, h6 { color: #735736; font-family: Georgia, 'Times New Roman', serif; }

h1 { border-bottom: 1px solid #735736; font-size: 28px; line-height: 41px; margin: 0 0 4px; padding: 0; }
h2 { font-size: 24px; font-style: italic; line-height: 24px; margin: 0; padding: 12px 0 12px 0; } 
     h2 a { text-decoration: none; border-bottom: none; }
     h2 a:hover { text-decoration: none; border-bottom: none; }
h3 { font-size: 18px; line-height: 24px; }
     h3 a, h3 a:hover { text-decoration: none; }
h4 { font-size: 16px; font-weight: bold; line-height: 24px; }
h5 { font-size: 16px; font-weight: normal; line-height: 24px; }
h6 { font-size: 12px; letter-spacing: 1px; line-height: 18px; text-transform: uppercase; }

abbr[title] { border-bottom: 1px dotted; }
mark { background: #ff0; color: #000; }

pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
code { font-family: sans-serif; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

blockquote { font-size: 18px; font-style: italic; margin: 1em 40px; }
q { font-style: italic; line-height: 24px; quotes: none; }
q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse;  border-spacing: 0; font-size: 14px; width: 100%; }
caption { font-variant: small-caps; font-size: 16px; line-height: 45px; text-align: left; }
tr th { border-bottom: none; line-height: 24px; }
tr td { border-bottom: 1px dotted #ccc; line-height: 23px; padding: 5px 0; }

form { margin: 0; padding-top: 5px; }
fieldset { border: 1px solid #ccc; margin: 0 2px 24px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; *margin-left: -7px; }
label { font-weight: bold; }
input, textarea { font-size: 16px; padding: 1px; }
textarea { overflow: auto; vertical-align: top; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }


/* Theme Library
------------------------------------------------------------------------------------------------------
1. Branding
2. Navigation (Main)
3. Breadcrumbs and Pagination Navigation
4. Global Content Type
5. Unique Content Types
	5a. Homepage
	5b. Footer
----------------------------------------------------------------------------------------------------*/


/* 1. Branding

The Branding includes the <header> and all its contained elements. This includes the logo and 
the top navigation.
----------------------------------------------------------------------------------------------------*/
header { background: #491E3F; box-shadow: 0px 3px 5px #a0a0a0; overflow: hidden; width: 100%; -moz-box-shadow: 0px 3px 5px #a0a0a0; -webkit-box-shadow: 0px 3px 5px #a0a0a0; }

.logo { float: left; }
p.title { color: #f2f2f2; font-size: 28px; line-height: 46px; margin: 0; padding: 0; }
p.subtitle { color: #a38e9e; font-family: Georgia, 'Times New Roman', serif; font-size: 24px; font-style: italic; line-height: 24px; margin: 0; padding: 0; }


/* 2. Navigation (Main)

The Navigation section contains the styles for the main navigation of the site, as well as any
future subnavigation or side navigation elements.
----------------------------------------------------------------------------------------------------*/
#navigation-main { margin: 24px 0 0; }
#navigation-main ul { float: right; list-style: none; margin: 0; padding: 0; }
#navigation-main ul li { border-left: 1px solid #75556e; color: #f2f2f2; float: left; font-size: 14px; margin: 0 0 0 19px; padding: 0 0 0 20px; text-transform: uppercase; }
#navigation-main ul li.first { border-left: 0px; margin: 0; padding: 0; }
#navigation-main ul li a { color: #f2f2f2; display: block; font-weight: normal; }


/* 3. Breadcrumbs and Pagination Navigation

For any styling to breadcrumbs and pagination.
----------------------------------------------------------------------------------------------------*/


/* 4. Global Content Type
----------------------------------------------------------------------------------------------------*/
body { background: #A6A6A6; }

#container { background: #F2F2F2; border: 1px solid #999; border-top: 0px; box-shadow: 0px 3px 5px #a0a0a0; margin: 0 auto; min-height: 200px; -moz-box-shadow: 0px 3px 5px #a0a0a0; -webkit-box-shadow: 0px 3px 5px #a0a0a0; }
.wrapper { background: transparent; margin: 0 auto; }

img.photo { background: #fff; border: 1px solid #ccc; float: left; margin: 0; padding: 9px; width: 180px; }
.film { background: #fff; border: 1px solid #ccc; float: left; margin: 0 0 24px; padding: 9px; }
.desc { color: #666; font-size: 12px; line-height: 18px; margin: 0; }

.grid-1, 
.grid-2,
.grid-3,
.grid-4 {}


/* 5. Unique Content Types

Unique content types are for elements that control unique sections of your site, like the homepage,
specific forms, and internal page layouts that differ from a sitewide standard layout.
----------------------------------------------------------------------------------------------------*/

/* 5a. Homepage 
------------------------------*/


/* 5b. Footer
------------------------------*/
footer { color: #666; font-size: 12px; line-height: 18px; }
footer a { font-weight: normal; }

footer ul { list-style: none; margin: 0 0 24px; padding: 0; width: 100%; }
footer ul li { border-left: 1px solid #888; float: left; margin: 0 0 0 19px; padding: 0 0 0 20px; }
footer ul li.first { border-left: 0px; margin: 0; padding: 0; }

footer .contact { text-align: right; }

/* 5c. About Page
------------------------------*/
table#resume tr td.production { width: 37%; }
table#resume tr td.role { width: 30%; }
table#resume tr td.director { width: 33%; }
table#resume tr td.footnote { color: #666; font-size: 12px; }

/* 5d. Image Gallery
------------------------------*/
.pictures img.photo { background: #fff; border: 1px solid #ccc; float: left; margin: 0 15px 24px; padding: 9px; width: 100px; }