/*
 ===================================================================
   Movie Cake
   CSS file.
   Author: Avinash Chopde <avinash@aczoom.com> http://www.aczoom.com/
   Created: Nov 2005
 ---------------------------------
   3 column liquid layout, using percentages for position and widths
   Works good for any browser widths, even 200px or less wide, best
   at over 600px wide. All columns are floats, with widths and horizontal
   column margins specified in percentages.

   To get percentage width and margin look decent on both FireFox
   and IE6, create two DIVs to wrap columns - outside one with width alone,
   no horizontal margin/padding/border, & define horizontal margin, padding,
   border only in the inside div.  And, total width for all columns is
   kept at 99% (1% less just to be safe).

   Sizing browser window larger (> 800px?) will make each column
   expand - left, middle, and right, but use of max-width in left/right
   will restrict their expansion, and by using max-width in the
   inside-div's for left/right columns, this allows half- the extra space
   to appear around the middle column, this looks nicer in very
   wide (> 1024px?) browser windows.
   IE does not honor max-width, so workarounds used (JavaScript
   width expressions, in php/html files).
   Using em to specify max-widths - that way, text won't get crunched up,
   for larger default font sizes, assuming user also uses larger widths
   in this case.
   Using px to specify min-widths - that way, images won't get crunched up,
   nor will left/right columns look odd - long and thin with too much
   white space surrounding them, for smaller default font sizes.

   Requirement: floats of thumbnails in middle column should wrap around
   in that column - tendency in IE6 to have all thumbnails in single row,
   extending past middle column right boundary. Using two div's for middle
   column to fix this for IE6, with display modifier.

   Much modified version of:
      http://www.maxdesign.com.au/presentation/liquid/example11.htm

   Workarounds for browsers using <!--[if gte IE 5]> <![endif]--> are
   in the php/html files, before closing </head> statement.

   CSS help/references/examples (not all used, just here as references):

   http://www.cssplay.co.uk/menus/centered2.html - CSS only. not using that.
   Easier to just use <table> for menu.

   http://www.allthatscool.com/test/index.php
       3 cols, header, footer, middle column fully fluid.
 ===================================================================
 */

/* ---------- body:
   min-width fix for IE in overrides in php/html file before </head> line.
 */
body {
    min-width: 520px;
    margin: 0;
    padding-left: 7px;

    font-family: "Trebuchet MS", "Luxi Sans", "Helvetica", "Arial", sans-serif;
    font-size: 80%;
    text-align: center;

    background-color: #fee;
    color: #000;
    background-image: url('images/poster1a1s.jpg');
}
   
/* ---------- h2:
   used for tags/bylines - 2 line headings, when used with .byline
 */
h2 {
    margin: 1px auto;
    font-size: 120%;
    font-weight: bold;
    font-variant: small-caps;
    line-height: 95%;
    color: #c00;
}
h2 .byline {
    padding-left: 30px;
    color: #000;
}

/* ---------- h1:
   big headline, not used much
 */
h1 {
    margin: 1px auto;
    font-size: 150%;
    font-weight: bold;
    font-variant: small-caps;
    line-height: 95%;
    color: #c00;
}
h1 .byline {
    padding-left: 30px;
    color: #000;
}

/* ---------- h3:
   used for specific events, reviews headings
 */
h3 {
    margin: 0.5em auto 0.1em auto;
    font-size: 120%;
    font-weight: bold;
    line-height: 95%;
}

/* ---------- a:
 */
a, a:link, a:active {
    color: #00f;
}
a:visited {
    color: #339;
}
a:hover {
    color: #006;
}

/* ---------- boxit:
   create a dashed line border around this section
 */
.boxit {
    clear: both;
    margin: 2.5em auto 0.5em auto;
    padding: 3px;
    /* don't use - changes dashed to solid -moz-border-radius: 9% */ /* mozilla only */
    border-radius: 3%; /* CSS3 only */
    border: 1px dashed #333;
}
/* ---------- multiple-blurbs:
   uses multiple boxits, with no vertical space between each boxit, overriding
   margins for boxit for this case.
 */
.multiple-blurbs {
    margin: 2.5em auto;
}
.multiple-blurbs .boxit {
    margin: -1px auto 0 auto; /* -1px so two consecutive boxits border is one */
}

/* ---------- p:
 */
p {
    margin: 0.2em 0 0.2em 0;
    padding: 0 0.1em 0 0.4em;
    text-indent: 1em;
    text-align: left;
}
#right p, #left p {
    margin: 1.5em 0;
    padding: 0 0.1em 0 0.4em;
    text-indent: 0em;
    text-align: left;
    text-indent: 0em;
}

/* ---------- horizontal and vertical menu layouts:
   http://www.cssplay.co.uk/menus/centered2.html - CSS only. not using that.
   Using tables instead of CSS-only for menus - too many hacks
   needed to get CSS-only tables display correctly on IE, Firefox, Opera.
   Now with menu and cast list in tables, it works on IE, firefox, Opera,
   Konqueror. And the markup is pretty lean also, no hacks.
   Also: using tables allows decent menu display even when style file
   is turned off by the user, and to get the horizontal menu centered in
   all browsers.
   This section first includes definitions that are common to both 
   vertical and horizontal menus, then those that only apply to horizontal
   menus, and then finally definitions that apply only to vertical menus.
 */
/* ---------- horizontal & vertical menu, common definitions */
.menu-horiz, .menu-vert {
    line-height: 90%;
    white-space: nowrap; /* prevents breaking of text into multiple lines */
    border-spacing: 0px;
    border-padding: 0px;
    border-collapse: collapse;
    padding: 0;
}
.menu-horiz a,
.menu-vert a {
    display: block; /* to fill full table or list cell */
    padding: 0.2em 0.7em 0.2em 0.7em;
    border: 1px solid;
    border-color: #ddd #000 #000 #ddd;
    background-color: #fbf;
    background-color: #ef9dc1;
    text-decoration: none;
}
.menu-horiz a:hover, .menu-horiz a:active,
.menu-horiz-current a:link, .menu-horiz-current a:visited, 
.menu-horiz-current a:hover, .menu-horiz-current a:active,
.menu-vert a:hover, .menu-vert a:active,
.menu-vert-current a:link, .menu-vert-current a:visited,
.menu-vert-current a:hover, .menu-vert-current a:active {
    background-color: #f9f;
    background-color: #ef7ac1;
}

/* ---------- horizontal menu only definitions */
#menu-top {
    margin: 2px auto -20px auto;
    margin-left: auto; margin-right: auto; /* for IE5/Mac centering */
    text-align: center;
    font-size: 90%;
}
#menu-bottom1, #menu-bottom2 {
    font-size: 80%;
    font-weight: bold;
    margin-left: 1em;
}
.menu-horiz a {
    margin: 0px -1px 0px -1px;  /* to eat up space between cells in the table */
}
/* ---------- vertical menu only definitions */
#menu-left {
    clear: both;
    margin: 2.0em auto 0.5em auto;
    margin-left: auto; margin-right: auto; /* for IE5/Mac centering */
}

/* ---------- top title - list of cast names layout:
   IE overrides needed in html document:
    <!--[if gte IE 5]>
    <style>.cast-list .name {position: relative; height: 1em; zoom: 100%;}</style>
    <![endif]-->
 */
#cast-top {
    margin: 0.5em auto 0.5em auto;
    margin-left: auto; margin-right: auto; /* for IE5/Mac centering */
    font-size: 120%;
    font-weight: bold;
    text-align: center;
}
.cast-list {
    line-height: 90%;
    padding: 0;
    margin: 0;
    white-space: nowrap; /* prevents breaking both row of items, and name of each item, into multiple lines or rows */
}
.cast-list .name {
    padding: 0.2em 0.9em;
}
.cast-list .name:first-line {
    color: #f09;
    font-size: 90%;
}

/* ---------- bottom:
   footer section
   has a single boxit, and boxit top margin is reset to use no space
 */
#bottom {
    margin: 0em;
    text-align: left;
}
#bottom .boxit {
    margin: 0px auto 0px auto;
    padding-left: 1em;
}
#bottom p {
    text-indent: 0em;
}

/* ---------- attribution:
   suppress display, also take up no space in output
 */
.attribution {
    border-top: 1px dotted #999;
    border-bottom: 1px dotted #999;
    margin-top: 10px;
    font-size: 80%;
    display: none;
}
.webcontact {
    margin-top: 20px;
    font-size: 80%;
}


/* ---------- left:
   left column
   z-indexes don't work - wanted right column to be behind everything
   when resized width is small, but couldn't get it to stay behind middle
   or top sections.
 */
#left {
    float: left;
    margin-top: -120px;
    width: 23%;
    padding: 0;
    z-index: 3;
    text-align: center;
}
#left-inside {
    padding: 0.5em 0 0 0.5em;
    padding: 4px 0 0 4px;
    border: 3px solid #bbb;
    margin: 0 auto;
    max-width: 12em;
    min-width: 120px;
    border-radius: 10%; /* CSS3 only */
    -moz-border-radius: 10%; /* mozilla only - fails CSS validation! */
}

/* ---------- left:
   left column images
   as of now, only have images that are floated left
 */
#left img {
    float: left;
}

/* ---------- middle:
   middle column
   p is overridden in middle - use indent for paragraphs here.
   middle-inside: fix to have IE6 keep thumbnail floats inside this block,
   no effect on firefox 1.0.7.
   XXX: override for middle width for IE, reduce width to make resizing browser
   windows in IE6 not flip the right column down for atleast > 600px(?) widths,
   mainly a problem now because the body: width "expression" JavaScript
   does not work to define min body width in IE. When that is fixed, remove
   override.
 */
#middle-sole-column { /* no left or right columns */
    background-image: none;
    font-size: 120%;
    margin-top: 10px;
    padding: 0;
}
#middle {
    text-align: left;
    z-index: 9;
    background-image: none;
    text-align: left;
    font-size: 120%;
    float: left;
    width: 50%;
    margin-top: 10px;
    padding: 0;
}
#middle-inside {
    padding: 1em 5%;
}

/* ---------- right:
   right column
 */
#right {
    float: left;
    width: 26%;
    margin-top: -120px;
    z-index: 1;
    text-align: center;
}
#right-inside {
    border: 3px solid #bbb;
    padding-top: 0.5em;
    margin: 0 auto;
    max-width: 15em;
    min-width: 170px;
    border-radius: 10%; /* CSS3 only */
    -moz-border-radius: 10%; /* mozilla only - fails CSS validation! */
}
/* ---------- date-updated:
 */
p.date-updated {
    font-size: 60%;
    margin: 3em auto 1em auto;
    text-indent: 0px;
}

/* ---------- poster-small:
   in right column, for images of 150px width
 */
.poster-small {
    width: 155px; /* firefox is ok with 155px, IE needs 163px - see overrides */
    border: 1px solid silver ;
    margin: 2px auto;
    padding: 2px;
    text-align: center;
    font-style: italic;
    font-size: smaller;
}
.poster-small img {
    padding: 1px;
    border: 2px solid;
}
/* ---------- thumbnail:
   in middle column, for images of 90px width
 */
.thumbnail {
    float: left;
    width: 95px; /* firefox is ok with 95px, IE6 needs 104px - see overrides */
    border: 1px solid silver ;
    margin: 5px;
    padding: 2px;
    text-align: center;
    font-style: italic;
    font-size: smaller;
    text-indent: 0px;
}

.thumbnail img {
    margin: 0;
    padding: 1px;
    border: 2px solid;
}

/* ---------- images - logos, use as class selectors for "img":
 */
.cake-logo,
.imdb-logo {
    clear: both;
    border: 0px;
    vertical-align: middle;
    padding: 0.5em;
}
.imdb-logo {
    padding: 0;
}

/* ---------- images - portrait, single images
   portrait: may be used in a <div> surrounding the image
   single-image: used as img class 
 */
.portrait {
    float: left;
    margin: 0.5em 0.5em 0.5em 0;
    padding: 2px;
    border: 1px solid #333 ;
    text-align: center;
}

.single-image {
    padding: 2px;
    margin: 0em auto 1.0em auto;
    border: 1px solid #333 ;
    text-align: center;
}

/* ---------- clear-both - use for "br", etc tags */
.clear-both {
    clear: both;
}

/* =================================================================== */