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


  Master CSS for all website screens
  Copyright (C) 2009   Vintage Media Ltd   www.vintagewebworks.com
  Validated for CSS level 2.1


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



/*  BODY DEFAULT, PARAGRAPHS, LISTS, HEADINGS...
------------------------------------------------------------------------------*/

body {
  background: #FFF;
  color: #555;
  text-align: left;
  }

p { /* @see baseline.css.php */
  margin-bottom: 1em;
  }

ul, ol { }

ul, ul li  { list-style: square inside; }
ol, ol li  { list-style: decimal inside; }

/* Page title or headlines */
h1 {
  color: #444;
  font-weight: 700;
  }

/* Crossheads */
h2 {
  color: #444;
  font-weight: 900;
  text-transform: uppercase;
  }

/* Box titles */
h3 {
  color: #555;
  font-weight: 100;
  }

/* Gadget headers */
h5 {
  border-bottom: 1px solid #E4E4E4;
  color: #777;
  font-weight: 100;
  margin-top: 0;
  }



/*  HYPERLINKS, CONTENT IMAGES, BLOCKQUOTES, BOXES...
------------------------------------------------------------------------------*/

a {
  padding: 0;
  }

a:link,
a:visited {
  border-bottom: 1px dotted #007CB0;
  color: #007CB0;
  }

a:active {
  border-bottom: 1px solid #000;
  color: #000;
  }

/* @note link hover effect in website.js */

#content img {
  border: 0;
  padding: 0;
  }

blockquote { }

blockquote p {
  background: url(../imgs/quote-back.gif) repeat-x 0 0;
  border-top: 2px solid #666;
  color: #666;
  font-size: 2em;
  font-weight: 100;
  line-height: 1.4;
  margin: 0 0 2.5em 0;
  padding: 0.5em 0 0 0;
  text-align: left;
  }

/* Blockquote creditation: */

blockquote p span {
  color: #888;
  font-size: 65%;
  font-variant: small-caps;
  font-weight: 100;
  line-height: 2em;
  text-transform: none;
  }

.box {
  background: #FAFAFA url(../imgs/box-back.gif) repeat-x 0 0;
  border: 1px solid #EEE;
  border-top: 2px solid #666;
  color: #555;
  margin-bottom: 1.5em;
  padding: 2.4em 1.5em 0.1em 1.5em;
  }

/* @note Bottom padding partly done by internal paragraph */



/*  VERTICAL AND HORIZONTAL RULERS
------------------------------------------------------------------------------*/

/* @note: colborder border widths are set in grid.css.php */

.border {
  border-right-color: #F4F4F4;
  border-right-style: solid;
  }

.colborder {
  border-right-color: #F4F4F4;
  border-right-style: solid;
  }

.hr {
  background: #EEE;
  border: none;
  clear: both;
  display: inline;
  float: left;
  height: 2px;
  margin: 0 0 1em 0;
  min-height: 2px;
  overflow: hidden;
  width: 100%;
  }

.spacer {
  background: transparent;
  border: none;
  clear: both;
  display: inline;
  float: left;
  height: 1px;
  margin: 0 0 1em 0;
  min-height: 1px;
  overflow: hidden;
  width: 100%;
  }



/*  LAYOUT RESOURCES
------------------------------------------------------------------------------*/

.row {
  background: transparent;
  border: none;
  clear: both;
  display: inline;
  float: left;
  overflow: hidden;
  width: 100%;
  }

.container {
  background: transparent;
  margin: 0 auto;
  padding: 0;
  }

/* @note Margin centres page */




/*  MASTHEAD & LOGO:
------------------------------------------------------------------------------*/

#masthead {
  background: transparent url(../imgs/body-back.gif) repeat-x 0 0;
  display: block;
  float: none;
  padding: 0 0 5px 0;
  width: 100%;
  }

#logo {
  background: transparent url('../imgs/logo.gif') no-repeat top left;
  height: 61px;
  margin: 0;
  width: 286px;
  }

#logo a {
  background: transparent;
  border-bottom: 0;
  display: block;
  float: left;
  height: 100%;
  width: 100%;
  }

#logo a:hover {
  background: transparent;
  border-bottom: 0;
  }



/*  MENU 1:
------------------------------------------------------------------------------*/

ul#menu1 {
  display: inline;
  float: left;
  list-style: none inside; /* Reset */
  margin: 0.5em 0 0.4em 0 ;
  padding: 0; /* Reset */
  padding-top: 30px;
  text-indent: 0; /* Reset */
  width: auto;
  }

ul#menu1 li {
  display: inline;
  float: left;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  margin: 0 0 0 1.5em;
  }

ul#menu1 li a {
  border: 0;
  cursor: pointer;
  display: block;
  float: left;
  text-decoration: none;
  }

ul#menu1 li a:link,
ul#menu1 li a:visited { }

ul#menu1 li a span { }



/*  CONTENT AREA:
------------------------------------------------------------------------------*/

#content {
  margin-bottom: 30px;
  }



/*  FOOTER:
------------------------------------------------------------------------------*/

#footer {
  background: #FAFAFA url(../imgs/footer-back.gif) repeat-x 0 0;
  border-top: 2px solid #666;
  color: #888;
  height: 99px;
  }

#footer .container {
  padding-top: 35px;
  }

ul#footer-links {
  display: block;
  float: right;
  margin: 0;
  padding: 0;
  width: auto;
  }

ul#footer-links li {
  display: inline;
  float: left;
  list-style: none;
  margin: 0 0 0 20px;
  }

ul#footer-links li a {
  cursor: pointer;
  }

ul#footer-links li a:link,
ul#footer-links li a:visited { }

ul#footer-links li a span { }

ul#footer-links li a.selected,
ul#footer-links li a.selected:link,
ul#footer-links li a.selected:visited { }

ul#footer-links li a.selected span { }

ul#footer-links li#copyright-notice {
  font-weight: 700;
  }

#footer #powered-by {
  background: url(../imgs/footer-logo.gif) no-repeat 0 0;
  height: 24px;
  width: 118px;
  }

#footer #powered-by a {
  display: block;
  height: 100%;
  width: 100%;
  }


/* Force footer to bottom of screen: */
/* @see http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ */

* {
  margin: 0;
  }

html,
body {
  height: 100%;
  }

#footer,
#push-footer {
  height: 100px;
  min-height: 100px;
  }

#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -100px;
  }



/*  MESSAGES:
------------------------------------------------------------------------------*/

#tpui-messages { }

.message {
  border-color: #DBDBDB;
  border-style: solid;
  border-width: 1px;
  margin: 0 0 25px 0;
  padding: 5px 10px;
  }

.message p,
.message ul,
.message ul li {
  margin: 0;
  }

.message.clean {
  background-color: #F4F4F4;
  border-color: #DBDBDB;
  color: #555;
  }

.message.info {
  background-color: #C5E9F9;
  border-color: #90B3D4;
  color: #00529B;
  }

.message.success {
  background-color: #DFF2BF;
  border-color: #A7C388;
  color: #4F8A10;
  }

.message.warning {
  background-color: #FEEFB3;
  border-color: #FC6;
  color: #9F6000;
  }

.message.error {
  background-color: #FFD0D0;
  border-color: #E8969A;
  color: #D8000C;
  }



/*  INPUT FORMS:
------------------------------------------------------------------------------*/


.input-form {
  margin: 0 0 10px 0;
  }

.input-form p {
  margin: 0;
  }

p.note {
  color: #333;
  font-size: 90%;
  margin-left: 170px;
  }

p.note.error {
  color: red;
  font-weight: 900;
  }

fieldset {
  border-top: 1px solid #CCC;
  margin: 10px 0;
  padding: 10px 0;
  }

legend {
  color: #555;
  font-size: 1.2em;
  font-weight: 900;
  padding-right: 10px;
  }

.controlset {
  padding: 0 0 10px 0;
  }

.controlset span.label {
  display: block;
  float: left;
  margin-right: 10px;
  padding-right: 10px;
  position: relative;
  text-align: right;
  width: 150px;
  }

.controlset span.label em {
  color: red;
  font-size: 120%;
  font-style: normal;
  position: absolute;
  right: 0;
  }

.controlset label {
  /* Only used on checkboxes */
  }

.controlset div {
  margin-left: 170px;
  }

.controlset div div {
  margin-left: 0;
  }

input,
textarea {
  background: #FFF;
  border: 1px solid #CCC;
  color: #555;
  font-size: 1.1em;
  padding: 0.3em 0.4em;
  }

textarea {
  /* For cross-browser consistency: */
  font-size: 140%;
  height: 100px;
  line-height: 1.5em;
  overflow: auto;
  }

input:focus,
textarea:focus   {
  background-color: #FFF;
  border-color: #CCC;
  color: #555;
  }

.tpui-toolbar {
  padding: 0 0 0 170px;
  }



/*  BUTTONS:
------------------------------------------------------------------------------*/


/*** TPUI: BUTTONS ***/

/*

  (<div class="tpui-toolbar">)
    <div class="tpui-button-container (active)">
      <a class="tpui-button">
        <span class="tpui-button-content">
          <span class="tpui-button-label">Click me!</span>
        </span>
      </a>
    </div>
  (</div>)

*/

div.tpui-button-container {
  border: none;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
  }

/* Normal buttons: */
div.tpui-button-container a.tpui-button {
  background: #CCC;
  border: 1px solid #DDD;
  display: block;
  float: left;
  margin: 0;
  padding: 0.3em 0.8em 0.4em 0.8em;
  position: relative;
  text-decoration: none;
  }
div.tpui-button-container span.tpui-button-content {
  background: transparent;
  border: none;
  display: block;
  float: left;
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
  position: relative;
  }

/* Hover buttons: */
div.tpui-button-container a:hover {
  background: #CCC;
  }
div.tpui-button-container a:hover span.tpui-button-label {
  color: #555;
  }

/* Active buttons: */
div.tpui-button-container a:active {
  background: #CCC;

  }
div.tpui-button-container a:active span.tpui-button-content {
  color: #555;
  }

/* Active buttons (used when a button stays depressed): */
div.tpui-button-container.active a {
  background: #CCC;
  }
div.tpui-button-container.active span.tpui-button-content {
  color: #555;
  }

/* Hover active buttons: */
div.tpui-button-container.active a:hover {
  background: #CCC;
  }
div.tpui-button-container.active a:hover span.tpui-button-content {
  color: #555;
  }

/* Button labels: */
div.tpui-button-container span.tpui-button-content span {
  cursor: pointer;
  display: block;
  float: left;
  position: relative;
  }

div.tpui-button-container span.tpui-button-label {
  color: #555;
  font-size: 14px;
  font-weight: 100;
  height: 17px;
  line-height: 17px;
  letter-spacing: 0.05em;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  }