/**
 * ----------------------------------------------------------------------------
 *  FILM30s: MAIN CSS
 * ----------------------------------------------------------------------------
 *
 * Main styles.
 * @author Ken Briscoe
 * @copyright 2011
 * @since 2020-05-25
 *
 */

/*
  COLORS:
  black: 2a2a2a
  white: f0f0f0
  dark grey: 525252, 4c4c4c
  medium grey: 7f7f7f, 9a9a9a, b3b3b3
  light grey: c7c7c7
  red: f23e40
  gold: daa520
*/


/**
 * ------------------------------------
 *  FONTS
 * ------------------------------------
*/

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");


/**
 * ------------------------------------
 *  DEFAULTS
 * ------------------------------------
*/

html,
body,
div,
img,
p,
h1,
h2,
h3,
h4,
h5,
h5,
ul,
ol,
table
{
  display:block;
  position:relative;
  float:left;
  clear:both;
  margin:0;
  padding:0;
  width:auto;
  height:auto;
  border:0;
  background:transparent;
}

body {
  color:#f0f0f0;
  background:#272822; /*2a2a2a*/
  font-size:100%;
  font-style:normal;
  font-weight:normal;
  font-family:"Open Sans", Arial, sans-serif;
}

div {
}

img {
}

p {
  font-size:1.0rem;
  margin-bottom:0.8rem;
}

h1 {
  color:#d0d0d0; /*525252*/
  font-size:3.0rem;
  font-weight:bold;
  font-family:"Courier New", Courier, "Droid Sans Mono", "Open Sans", Arial, Helvetica;
  letter-spacing:0.1rem;
  text-transform:uppercase;
  margin:0 0 1rem 1rem;
}

h2 {
  color:#e0d2ac; /*666666*/
  font-size:1.3em;
  font-weight:normal;
  letter-spacing:0.1rem;
  margin:0 0 0.3rem 0;
  border-bottom:1px dotted #909090;
}

h3 {
  color:#e0d2ac;
  font-size:1.3rem;
  font-weight:normal;
  letter-spacing:0.1rem;
  margin:0 0 0.3rem 0;
}

h4 {
}

h5 {
}

h6 {
}

pre {
  font-size:1.0rem;
  font-family:"Courier New", Courier, monospace;
  width:auto;
  padding:1rem;
  background:#fff;
  border:1px dotted #909090;
  box-shadow:0 0 0.25rem #999;
}

sup {
  font-size:0.8rem;
}

ul {
  list-style-type:square;
  margin:0 0 0.8rem 1.0rem;
}

ol {
  margin:0 0 0.8rem 1.0rem;
}

li {
  margin:0.3rem 0;
}

span {
}

a {
  color:#0072a8; /*f23e40*/
  background:transparent;
  font-style:normal;
  font-weight:normal;
  text-decoration:underline;
}
a:link { }
a:visited {color:#6e6e6e;} /*9a9a9a*/
a:active {color:#ea3815; text-decoration:none;} /*9a9a9a*/
a:hover, a:focus {color:#ea3815;} /*9a9a9a*/


/**
 * ------------------------------------
 *  TABLE
 * ------------------------------------
*/

table {
  border-collapse:collapse;
  border-spacing:0;
  /*max-width:600px;*/
}

tr {
  background-color:#202020;
}

tr:nth-child(odd) {background-color:#202020;}
tr:nth-child(even) {background-color:#505050;}
tr:hover {color:#202020; background-color:#c0c0c0;}

/*
tr {margin:0; padding:0; border:0; background-color:#f0f0f0;}
tr:nth-child(odd) {background-color:#4c4c4c;}
tr:nth-child(even) {background-color:#7f7f7f;}
tr:hover {color:#ea3815; background-color:#b3b3b3;}
*/

th {
  padding:0.125rem 0.5625rem;
  color:#f0f0f0; /*c7c7c7*/
  background:#0072a8; /*2a2a2a*/
  /*font-size:0.9rem;
  font-weight:normal;*/
  text-align:center;
}

td {
  padding:0.125rem 0.5625rem;
  vertical-align:top;
  /*font-size:0.9rem;*/
}

.spreadsheet {
  margin:0 0 0.7rem 0;
  border:1px solid #c7c7c7;
}


/**
 * ------------------------------------
 *  FORM
 * ------------------------------------
*/

form,
form fieldset,
form label,
form input,
form textarea,
form select {
  display:block;
  position:relative;
  float:left;
  clear:both;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  border:0;
  font-size:1.0rem
}

form {
}

form fieldset {
  color:#c7c7c7;
  background:#4c4c4c;
  border:1px solid #c7c7c7;
  border-radius:0.5rem;
  width:auto;
  min-width: 265px;
  margin:0.3rem 0 0.7rem 0;
  padding:0.7rem 1rem 1.25rem 1rem;
  font-size:1.0em;
}

form fieldset legend {
  color:#c7c7c7;
  font-size:1.3em;
  margin:0.3rem 0 0 1rem;
}

form label {
  width:100%;
  margin:1.5rem 1rem 0.3rem 0;
  text-align:left;
  font-size:1.0em;
}


/* INPUT */
form input {
  min-width:250px;
  padding:0.2rem;
  color:#525252;
  background:#f0f0f0;
  border:1px solid #c7c7c7;
}
form input[type='text'] {margin:0.3rem 0 0 0;}
form input[type='password'] {background:#e0e0e0; margin:0.3rem 0 0 0;}
form input[type='file'] {padding:0.2rem; border:0 solid #c7c7c7;}
form input[type='checkbox'] {width:1.0rem; height:1.0rem; margin:0.3rem 0.7rem 0 0;}
form input[type='radio'] {width:1.0rem; height:1.0rem; margin:0.3rem 0 0 1rem;}
form input[type='submit'] {
  margin:1rem 0;
  padding:0.5rem 1rem;
  font-size:1.3rem;
  text-align:center;
  vertical-align:middle;
  cursor:pointer;
  color:#525252;
  background:#f0f0f0 linear-gradient(to bottom, #fff 10%,#ddd 40%,#eee 50%,#aaa 100%);
  border:1px solid #909090;
  border-radius:0.5rem;
}

/* TEXTAREA */
form textarea {
  width:95%;
  overflow:auto;
  color:#525252;
  background:#f0f0f0;
  font-family:"Open Sans", "Courier New", Courier, monospace;
  border:1px solid #c7c7c7;
}

/* SELECT */
form select {
  color:#525252;
  background:#f0f0f0;
  border:1px solid #c7c7c7;
  font-size:1.0em
}


.filter_submit {
  margin:0 0 0 0.3rem;
  width:auto;
}


/* Radio buttons... *** This needs further work. */

  .form_label_radio {
    margin-top:1.5rem;
    font-size:1rem;
  }

  .radio_label {
    display:block;
    position:relative;
    float:left;
    clear:none;
    width:200px;
    height:0.5rem;
    margin:0;
    padding:0;
  }

  .radio_label:hover {
    color:#daa520;
  }

  .radio_on {
    color:#f0f0f0;
    font-weight:bold;
  }

  form input[type='radio'].radio_button {
    display:block;
    position:relative;
    float:left;
    clear:none;
    width:1rem;
    height:0.5rem;
    margin:0;
    padding:0;
  }

/* ... */


/* ************************************************************************ */


/* ************************************************************************ */


/**
 * ------------------------------------
 *  PAGE LAYOUT
 * ------------------------------------
*/

#main_container {
  margin:0 0 0 0.5rem;
}


/* HEADER */
#header_box {
}

#header_logo {
  margin:1rem 0 1rem 1rem;
  font-size:3.0rem;
  font-weight:bold;
  font-family:"Courier New", "Open Sans", Arial, Helvetica;
  color:#525252;
}


/* CONTENT */
#content_box {
  margin:0.7rem 0 0 0;
}


/* SEARCH */
#search_box {
  margin:0 0 0.7rem 0;
}

#search_title_box {
  min-width:265px;
  margin:0.7rem 0 1.5rem 0;
  padding:1rem;
  background:#4c4c4c;
}

.search_title_label {
  color:#7f7f7f;
  font-size:1.3rem;
  font-weight:bold;
  margin:0 0.3rem 0 0;
}

.search_terms {
  color:#7f7f7f;
  font-size:1.1rem;
  margin:0 1rem 0 0;
}

.search_results {
  color:#7f7f7f;
  font-size:1rem;
}

#search_filter_box {
  margin:0.7rem 0;
  padding:0.3rem;
  background:#4c4c4c;
  border-top:5px solid #d9e0e3;
}

.search_item_box {
  margin:0.25rem 0 0.7rem 0;
  padding:0 0 0.7rem 0;
  border-bottom:1px dotted #909090;
}

.search_item_name {
  color:#7f7f7f;
  font-size:1.1em;
}

.search_item_rating {
}

.search_item_desc {
  color:#7f7f7f;
  font-size:1em;
  margin:0 0 0 1.5rem;
}

.search_button {
  margin:0.5rem 0 0 0;
}


/* VIEW */

#film_box {
  width:100%;
}

.film_title {
  margin:0.7rem 0;
  font-size:1.3em;
}

.film_info_row {
  margin:0 0 0.7rem 0;
}

.film_info_label {
  margin:0 0.7rem 0 0;
  border-right:1px dotted #7f7f7f;
}

.film_comments {
  margin:0 0.7rem 0.7rem 0;
  padding:0.7rem;
  background:#4c4c4c;
  border:1px dotted #c7c7c7;
}

.rating_stars {
  color:#daa520;
  font-weight:bold;
  font-size:1.0rem;
  margin:0.3rem 0 0 1rem;
}

.rating_worst {
  color:#daa520;
  margin:0 0 0 1rem;
}

.rating_not_seen {
  color:#c7c7c7;
  font-size:0.9rem;
  margin:0 0 0 1rem;
  font-style:italic;
}

.rating_not_rated {
  color:#c7c7c7;
  font-size:0.9rem;
  margin:0 0 0 1rem;
  font-style:italic;
}


/* EDIT */

#edit_box {
  /*min-height:500px;*/
  margin:0 0 0.7rem 0;
}

#filter_block {
  width:90%;
  margin:0 0 0.7rem 0;
  padding:2rem 2rem 0.7rem 1rem;
  /*border:1px dotted #c7c7c7;*/
  background:#202020;
}

#filter_alpha {margin:0 0 1rem 0;}
#filter_year {margin:0 0 1rem 0;}
#filter_director {margin:0 0 1rem 0;}
#filter_rating {margin:0 0 1rem 0;}

#misc_box {
  position:relative; float:left; clear:both; width:auto;
  margin:0 0 0.7rem 0;
      background:transparent;
}

.misc_sub {
  position:relative; float:left; clear:both;
  margin:0 0 0.7rem 0;
}

/* BUTTONS */
.button_box {
  margin:1.5rem 0;
}

a.button_link {
  color:#525252;
  background:#f0f0f0 linear-gradient(to bottom, #fff 10%,#ddd 40%,#eee 50%,#aaa 100%);
  font-size:1.1em;
  font-weight:normal;
  text-decoration:none;
  text-align:center;
  margin:0.5rem 0;
  padding:0.4rem 0.6rem;
  border:1px solid #909090;
  border-radius:0.5rem;
}
a.button_link:link {}
a.button_link:visited {}
a.button_link:active {color:#f23e40;}
a.button_link:hover {color:#f23e40;}


/* SUMMARY */
#summary_box {
  margin:1rem 0.7rem 1rem 0.7rem;
  padding:0.7rem 0 0.7rem 0.7rem;
  border-top:1px dotted #7f7f7f;
}


/* FOOTER */
#footer {
  margin:0.7rem 0;
}

.footer {
  color:#909090;
  font-size:0.8rem;
}

#vps_display {
  color:#909090;
}


/**
 * ------------------------------------
 *  MISC
 * ------------------------------------
*/

.clear_all {
  width:100%;
}

/* Font */
.bold {font-weight:900;}
.italic {font-style:italic;}
.underline {text-decoration:underline;}
.no_underline {text-decoration:none;}
.emphasis {font-style:italic; color:#ea3815;}
.small {font-size:0.8rem;}
.big {font-size:1.2rem;}

.red {color:#f23e40;}

.warning {
  color:#f23e40;
  background:#202020;
  font-style:italic;
  margin:0.7rem 0;
  padding:1.25rem;
  border:1px dotted #f23e40;
}


/**
 * ------------------------------------
 *  MEDIA QUERIES
 * ------------------------------------
 */

@media only screen and (min-width:620px) {

  #main_container {
    margin-left:1rem;
  }

  form fieldset {
    min-width:540px;
    padding:0.7rem 1rem 1.25rem 1rem;
  }

  form input {
    min-width:540px;
    padding:0.3rem;
  }

  table {
    max-width:580px;
  }

  #search_title_box {
    min-width:540px;
  }

  .search_item_rating {
    clear:none;
  }
}


@media only screen and (min-width:740px) {

  table {
    max-width:700px;
  }
}


@media only screen and (min-width:880px) {

  table {
    max-width:820px;
  }
}


@media only screen and (min-width:955px) {
}


@media only screen and (min-width:1100px) {

  table {
    max-width:960px;
  }
}


@media only screen and (min-width:1240px) {
}

/* ------------------------------------------------------------------------- */