/* TODO find films button is too big with new font size */

/* Grid of 12 columns of 5em wide.  When text size reduced need
 * to account for this in width measurements, begorrah. */

/* Grid has units of 1.5em height.  Again, proportional to font size so it is 
 * consistent across the page/site. */

/* TODO this does not have to be greyscale.  Pick some colours? */

* {
    margin: 0;
    padding: 0;
}

a {
    color: #000;
}

a:hover {
    color: #ccc;
}

a:visited {
    color: #666;
}

body {
    border: 0;
    /* TODO For better legibility at small font sizes use Lucida Grande or
     * verdana not arial as first choice.  but then headings don't look so 
     * good and film times must be wider. */
    font-family: Arial, Helvetica, serif;
    font-size: 12px;
    line-height: 1.5em;
}

/* need a little (more?) right margin/padding on cinema name in search results 
 * and probably on everything in those little tables. */

fieldset {
    border: 0;
}

h1 {
    background-color: #000;
    color: #fff;
    font-size: 2.18em;
    line-height: 1.38em; 
    margin-bottom: 0.69em;
    padding: 0 0.28em 0.69em 0.28em; 
}

h2 {
    font-size: 1.64em;
    line-height: 1.83em;
    padding: 0em 0.36em 0.9em 0.36em; 
}

h3 {
    font-size: 1.45em;
    line-height: 1.03em; 
    padding: 0.34em 0.41em 0.69em 0.41em; 
}

h4 {
    font-size: 1.18em;
    line-height: 1.27em;
    padding: 0.42em 0.5em 0.85em 0.5em;
}

h5, h6 {
    font-size: 1em;
    line-height: 1.5em;
    padding: 0.5em 0.6em 1em 0.6em;
}

p {
    line-height: 1.5em;
    padding: 0 0.6em 1.5em 0.6em;
}

table {
    border-collapse: collapse;
}

td, th { 
    vertical-align: top;
}

thead {
    display: none; 
}

tr { 
}

#banner a:visited {
    color: #000;
}

#content {
    margin: 1em;
    width: 60em; 
}

/* TODO make separate footer and menu css files and import them from this one*/
#footer {
    background-color: #ccc;
    padding-bottom: 1.5em;
    padding-top: 1.5em; /* need for IE */
}

#footer a:hover {
    color: #fff; /* TODO does this look alright?  Or just have same colour? */
}

#header {
    padding: 1.5em 0 0 0;
}

#main {
    clear: both;
    float: none;
}

#menu {
    clear: both;
    float: none;
}

#menu a {
    color: inherit;
    display: block;
    font-weight: normal;
    height: 100%;
    padding: 0 0.6em 0.3em 0.6em;
    text-decoration: none;
    width: 100%;
}

#menu a:visited {
    color: #000;
}

#menu a:visited.selected {
    color: #000;
}

#menu li {
    background-color: #fff;
    border: 0.025em #ccc solid;
    /* border-top: inherit; */
    color: #000;
    float: left;
    height: 2.95em; /* TODO make these skinnier for more real estate? */
    margin-bottom: 1.5em;
    overflow: hidden; /* TODO does this work to hide dotted lines in IE? Do we want to hide the dotted lines? */
    width: 9.8em; /* TODO needs to be this small for ie6 small text.  why? */
}

#menu li:hover, #menu li.first:hover, #menu li.last:hover, 
        #menu li.selected:hover {
    background-color: #ccc;
    color: #000;
}

#menu li.selected {
    background-color: #ccc; 
    color: #000;
    width: 9.78em; /* Take off 0.01em to work around browser rounding errors .*/
    /* 7.44 for firefox.  hmmm. */
}

#menu span.selected {
    padding: 0 0.6em 0.3em 0.6em;
}

#menu ul {
    list-style: none;
}

#tagline {
    padding: 0;
}

#title {
    float: left;
    padding: 0 0.6em 1.5em 0.6em;
    width: 38.8em;
}

/* TODO we've actually removed the heading so remove this? */
#title-text {
    /* TODO are we doing this? */
	background: url(../img/logosimple.png) no-repeat 0 0;
    /* TODO this now unnecessary? */
    font-size: 1.64em;
    font-variant: small-caps;
    font-weight: bold;
    height: 38px;
    overflow: hidden;
    padding: 0;
    text-indent: -9999px;
    width: 307px;
}

#title-text a {
    text-decoration: none;
}

#title-text a:hover {
    color: #ccc;
    text-decoration: underline;
}

.legal {
    clear: both;
    float: none;
    font-size: 0.8em;
    line-height: 1.88em;
    padding: 0 0.6em 0 0.6em;
}

/* TODO map needs to be indented like text is I think.
 * TODO actually get imdb details for films in the db.
 * TODO sort out grid for showtmes.
 */