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

The Designer Gift - "thedesignergift.com.au"

Written by Robert Spriggs for CanvasDesign, (c)2007 Robert Spriggs and Canvas Design, all rights reserved

The code will remain the copyright of Robert Spriggs and Cavas Design, but may be freely modified
for the The Designer Gift website only (currently thedesignergift.com.au),
or further developed for that website only, without additional permission.

The code will only be used on one server to host one domain's site at any
one time and will not be resold (unless sold as part of the website and services,
in which case this copyright condition continues and is passed to the new owner)
or made publicly available.

Robert Spriggs and Canvas Design reserves the right to use the code elsewhere, but will not divulge
that the code is used for the The Designer Gift site or make the
code publicly available.

No part of this copyright message may be edited or removed.

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

#skipmenu, .hidden {
   position: absolute;
   left: -2000px;
   width: 1900px;
   padding: 0;
   margin: 0;
}

img {
   border:none;
}

h1 { font-size: 160%; margin-bottom: 0.5em;}
h2 { font-size: 135%; margin-bottom: 0.4em;}
h3 { font-size: 116%; margin-bottom: 0.3em;}
h4 { font-size: 100%; margin-bottom: 0.3em;}
h5 { font-size: 100%; text-decoration: underline; margin-bottom: 0.3em; }

p {
  margin: 0 0 0.5em 0;
}

#leftcol h2 {
  margin: 0;
  padding: 0.2em 0 0.2em 0.2em;
  background-color: #333;
  color: #fff;
  width: 100%;
  font-size: 120%;
}

/* The following is a left-right list, used for menus */
ul.leftright {
    text-align: left;
    padding: 0;
    margin: 0;
}

ul.leftright li {
    display: inline;
    background: none;
    margin: 0;
    padding: 0;
}

ul.leftright li.current {
    display: block;
    float: left;
    padding: 0.2em 0.5em;
    text-decoration: none;
    background: #eee;
}

ul.leftright li a {
    display: block;
    padding: 0.2em 0.5em;
    float: left;
    text-decoration: none;
}

ul.leftright li a:hover, ul.leftright li a:active , ul.leftright li a:focus {
    background: #eee;
    text-decoration: underline;
}

/* the folloing is a vertical list, user for menus */
ul.vertical {
  width: 99%;
  list-style-type: none;
  margin: 0 0 0.5em 0;
  padding: 0 0 0 1px;
  display: block;
}

ul.vertical li {
   margin: 0;
   padding: 2px 0;
}

* html ul.vertical li {
   height: 1px;
}

ul.vertical li.current {
   margin: 0;
   border-left: 5px solid #000;
   padding: 3px 0 2px 3px;
   background: #eee;
}

ul.vertical li a {
   display: block;
   padding: 1px 0 0 0;
   margin: 0;
}
ul.vertical li a:link, ul.vertical li a:visited{
   border-left: 2px solid #eee;
   padding-left: 6px;
   text-decoration: none;
}
ul.vertical li a:hover, ul.vertical li a:active, ul.vertical li a:focus  {
   background: #ddd;
   border-left: 5px solid #000;
   padding-left: 3px;
   text-decoration: none;
}

/* Second level */

ul.vertical li ul {
  list-style-type: none;
  border-left: none;
  padding-left: 0px;
  margin: 2px 0;
}

ul.vertical li.current ul {
   margin: 3px 0 0 0;
   border: none;
   background: #eee;
}

ul.vertical li.current li {
   padding: 0;
   margin: 0;
}

ul.vertical li.current li a:link, ul.vertical li.current li a:visited {
   border-left: 2px solid #ccc;
   padding-left: 6px;
}
ul.vertical li.current li a:hover, ul.vertical li.current li a:active, ul.vertical li.current li a:focus {
   background: #ccc;
   border-left: 5px solid #000;
   padding-left: 3px;
   text-decoration: none;
}

ul.vertical li.current li.current {
   border: none;
   background: none;
   border-left: 5px solid #000;
   padding-left: 3px;
   margin: 0;
}
ul.vertical li.current li.current a:link, ul.vertical li.current li.current a:visited {
   border-left: none;
   padding-left: 0;
}
ul.vertical li.current li.current a:hover, ul.vertical li.current li.current a:active, ul.vertical li.current li.current a:focus {
   padding-left: 0;
}
ul.vertical li.current a:link, ul.vertical li.current a:visited {
   border-left: none;
   padding-left: 0px;
}
ul.vertical li.current a:hover, ul.vertical li.current a:active , ul.vertical li.current a:focus {
   border-left: none;
   padding-left: 0px;
   text-decoration: none;
}

 /* Third level */
ul.vertical li.current li.current li.current {
   background: #505050;
}
ul.vertical li.current li.current li a:link, ul.vertical li.current li.current li a:visited {
   border-left: 2px solid #000;
   padding-left: 6px;
}
ul.vertical li.current li.current li a:hover, ul.vertical li.current li.current li a:active , ul.vertical li.current li.current li a:focus {
   border-left: 5px solid #000;
   padding-left: 3px;
}

/* The following is for debugging - please leave it in!*/
.debug {
    font-family: courier;
    margin: 5px 0 5px 0;
    padding: 0 0 5px 0;
    background: white;
    border-bottom: 1px solid gray;
}
.debug h1, .debug h2 {
    margin: 0 0 10px 0;
    padding: 0;
    background: #fff;
    color: #000;
}
.thisline {
    background: #ff0;
}

.thischar {
    color: #f00;
}


/* The following is a page nav for lists. Automatically called */

.pagenav {
      border-top: 1px solid #333;
      border-bottom: 1px solid #333;
      margin: 0.5em 0 1em 0;
      padding: 2px;
      font-size: 90%;
      background: #fff;
}

.pagenav h2 {
      font-weight: normal;
      display: inline;
}

.pagenav ul {
      display: inline;
      margin: 0 0 0 0.5em;
      padding: 0;
}

.pagenav li {
      display: inline;
      padding: 0 0 0 12px;
      background: url('../images/site/diamond.gif') no-repeat 0 50%;
}

.pagenav li.first {
      background: url('');
      padding-left: 0;
}

.pagenav li a {
        color: #333;
        text-decoration: none;
}

.pagenav li a:hover {
        color: #666;
        text-decoration: underline;
}

/* Paste thsi in for showing mono-spaces fonts */

code {
   font: 120% courier, monospace;
}

/* All the forms stuff */

input, select, textarea {
   font-size: 100%;
   padding: 0.2em;
}

#content form {
   margin: 0;
   padding: 0;
}

#content fieldset {
   margin: 0.3em 0 0.5em 0;
   padding: 5px 0;
}

#content fieldset.invisible {
   border: none;
   margin: 0;
   padding: 0;
}

#content legend {
   text-align: left;
   font-weight: bold;
   font-size: 120%;
   color: #000;
}

fieldset span.compulsory {
   font-size: 100%;
   margin: 0 0 0 0.5em;
}

#content fieldset p {
   margin: 0 0 0.25em 0;
   display: block;
}

#content fieldset label {
   padding-top: 0.3em;
   width: 10em;
   text-align: left;
   margin: 0 0.5em 0 0;
   display: block;
   float: left;
   white-space: nowrap;
}

#content p.buttup, #content p.butterr {
   margin-top: 0.2em;
}

#content p.butterr {
   padding-right: 20px;
   background: url('../images/site/error.gif') no-repeat 8.6em 0;
}

#content fieldset span.labelextra {
   padding-left: 0.5em;
   font-size: 90%;
}

#content fieldset p.buttons {
   margin: 0.8em 0 1em 5em;
}

#content input, #content select, #wrapper textarea {
   border: 1px solid #333;
   color: #000;
}

#content p.buttons input {
   margin: 2em 0 0 0.5em;
}

#content fieldset p.buttons input {
   margin: 0 0.5em;
}

#content fieldset p.radiooptions {
   margin: 0 0.5em 0 0;
}

#content fieldset fieldset.radiooptions p {
   margin: 0;
}

#content fieldset fieldset.radiooptions {
   border: none;
   padding-bottom: 0;
   display: inline;
}
#content fieldset fieldset.radiooptions label {
   display: inline;
   float: none;
   clear: none;
   padding: 0 1em 0 0;
   text-align: left;
}

#content fieldset fieldset.radiooptions input {
   display: inline;
   float: none;
   clear: none;
   padding: 0 1em 0 0;
   border: none;
}


#content fieldset div.radiolabelextra {
   display: inline;
   font-size: 80%;
   padding-left: 1em;
}

#content fieldset input.checkbox, #content fieldset input.check , #content fieldset input.radio {
   clear: none;
   display: inline;
   border: none;
}

#content fieldset label.left {
   text-align: left;
}

/* The following are "size" related */

input.VeryShortInput {
   width: 2em;
}

input.ShortInput {
   width: 7em;
}

input.MediumInput {
   width: 12em;
}

input.LongInput {
   width: 17em;
}

input.VeryLongInput {
   width: 22em;
}

input.full {
   width: 98%;
}

#content fieldset p label.full, #content fieldset p label.mceEditor, #content fieldset p label.fulllow {
   margin: 0.5em 0;
   text-align: left;
   width: 98%;
}

#content textarea.fulllow {
   height: 6em;
}

#content object.full, #wrapper textarea.mceEditor, #wrapper textarea.full, #content textarea.fulllow, #content select.fulllow {
   margin: 0;
   padding: 0;
   clear: left;
   width: 98%;
   height: 250px;
}

#content textarea.fulllow {
   height: 6em;
}

#content textarea.FullWidthBox {
   width: 22em;
   height: 200px;
}
#content textarea.FullWidthHalfHeightBox {
   width: 22em;
   height: 100px;
}

/* Distributed List */

dl{
   margin:10px 0px 0px 0px;
}
dt {
   clear: both;
   float: left;
   display: inline;
   margin: 0;
   width:120px;
}
dd {
   float: right;
   margin: 0 0 0 20px;
   text-align: right;
   color:#333;
}

/* Tables */
table {
        border-collapse: collapse;
        border: 1px solid #000;
        clear: none;
        margin: 0.5em 0;
}

caption {
   text-align: left;
   margin: 0 0 .2em 0;
   font-weight: bold;
   font-size: 120%;
}

thead th {
        background: #333;
        font-weight: bold;
        color: #fff;
        font-size: 105%;
        border-bottom: 1px solid #000;
}

th {
   font-weight: normal;
}

th, td {
   padding: .3em .6em;
   border-right:1px solid #000;
   border-bottom:1px dashed #000;
}

/* This shows error messages - I usualy put in a box with a background graphic of an red exlimation mark / stop sign */
p.error {
   color: red;
   font-weight: bold;
}

/* This shows info messages - I usualy put in a box with a background graphic of an blue exlimation mark */
p.info {
        background: #ceefff url(../images/site/info.gif) no-repeat 0 40%;
        padding: .5em 0.2em .6em 30px;
        border: 1px solid #3D9ADF;
        line-height: 1.2;
        margin: 0.4em 0 0 0;
        font-weight: bold;
}

div.formerror {
      width: 490px;
      border: 2px #E80980 solid;
      padding: 15px;
      padding-left:50px;
      background: #f7f7f7 url(../images/site/exclamation.gif) no-repeat 1.5% 13px;
      color: #000;
      margin: 0 10px 15px 0;
}
div.formerror p {
        margin: 0.2em 0 0.2em 0;
}
div.formerror ul {
        margin: 0 0 0.3em 1em;
        list-style-type: none;
        padding-left: 0px;
}
div.formerror li {
        padding: 0 0 0 20px;
        background: url(../images/site/arr3.gif) no-repeat 0 50%;
}

/* Message box for notices */
#MessageBox {
        width: 80%;
        margin: 30px auto;
        background-color: #eee;
        border: 1px solid #202020;
        text-align: left;
}
#MessageBox h1 {
        margin: 0 0 0.2em 0;
        padding: 0.5em;
        color: #fff;
        font-size: 120%;
        background-color: #333;
        display: block;
        width: 100%;
}
#MessageBox h2 {
        margin: 0 0 0.2em 0;
        padding: 0.5em;
        font-size: 110%;
        background-color: #333;
        color: #fff;
}
#MessageBox p {
        padding: 0 0.5em 0 0.5em;
        margin: 0.5em 0;
}

.clear {
    clear: both;
}