/* processed from C:\localhost\htdocs\clients\example\css\allx.xcss */

/* set colours */

/* need colour for reversed "buttons" */
/* seems to be redundant info in this file */
/* tidy up coulor designs */
/* main fonts and colours */
body {
  font-family:Arial,sans-serif;
  color:#000;
  background:#fff;
  margin:0;
}

h1, h2, h3, th, dt, strong, fieldset legend
{
  color: #060;
}

#headertext
{
  color: #fff;
  font-family: "Comic Sans MS";
  font-size: 200%;
  padding: 0.5em auto 0 auto;
}

/* page components */

#header, #header *
{
  margin:0; padding:0;
}

#header
{
  background: #060;    /* all */
}

#article
{
  clear:both;
  margin:0 0.5em;
}

#nav ul
{
  list-style: none;
}

#nav a[id]
{
  /* style for nav heading when shown - or not etc */
}

/* navigation details */

#footer
{
  clear: both;
  padding:1em 0 0 3em;
  border-top: 1px solid #060;
  font-size:75%;
}

#access a, #webvalid a
{
  color:#7a7;
}

/* user defined classes */

.box
{
  border:2px solid #060;
  padding: 0.5em 1em;
  margin:1em 0;
}

ul.alist    /* a list of <a  > links */
{
  list-style:none;
}

/* tables */

table
{
  border-collapse:collapse;
  font-size:90%;
}

th, td
{
  border:solid 1px #060;
  padding: 0.2em 0.5em;
}

th
{
  text-align:left;
}

table caption
{
  font-weight:bold;
  color:#060;
  font-size:120%;
  text-align:left;
}

/* Form stuff */


fieldset
{
  margin:0 0 0.5em 0;;
  border: 1px solid #060;
  padding:0.5em;
}

fieldset legend
{
  color:#060;
  font-weight:bold;
}
form ul
{
  list-style: none;
  margin: 0;
  padding: 0;
}

form li
{
  margin: 0.5em 0;
}

form li.err
{
  border:1px solid red;
}


label
{
  width: 7em;
  text-align: left;
  margin-right: 0.5em;
  float: left;
  display: block;
}

input, select, textarea
{
  font: 2em verdana,arial,helvetica,sans-serif;
  width:100%;
  border:1px solid #aaa;
  border-radius: 0.2em;
}

input:focus, select:focus, textarea:focus, input[type=checkbox]:focus
{
  /* border:1px solid #0c0; */
}

input[type=text].err, select.err, textarea.err, input[type=checkbox].err
{
  /* border:1px solid #f00; */
  background:#cfc;
}

input[type=text]:focus, select:focus, textarea:focus, input[type=checkbox]:focus
{
  border:1px solid #0c0;
}

textarea
{
  overflow: auto;
}

/* align checkbox with other inputs but with label to right */
input[type=checkbox]
{
  margin: 0 0 0 9em;
}

input[type=checkbox]+label
{
  width: auto;
  text-align: left;
  padding-left:0.5em;
  float: none;
  display: inline;
}

a[href], #submit  /* all links in text, #nav, and submit button */ , #nav li.this a
{
  display: block;
  border:1px solid #060;
  border-radius: 0.5em;
  background: #060;
  margin: 5px;
  padding:0.5em;
  font-size: 100%;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  text-decoration:none;
  max-width: 25em;
}

.error
{
  color:#f00;
  margin: 0;
}

.error ul
{
  list-style-type:disc;
  padding:0 0 0 1em;
}


/* style below for MOBILES */

/* internals of header */


#header
{
  background: #060 url('../img/tanglewoodtop3s.jpg')  no-repeat left top;    /* all */
   min-height:75px;      /* mob */
}

#headertext
{
  margin-left:125px;    /* mob */
  padding-top:12px;
  font-weight:bold;     /* all */
  font-size:200%;       /* all */
}

#skip
{
  float:left;
  margin: 0 0 4px 4px;
  padding:0.5em;
  z-index:2;
}

#menuimg, #skip
{background:transparent; border:0;}

#nav li.this a
{
  /* display:none */background:#aaa;
}

/* styles below for DESK / LARGE SCREEN */

@media screen and (min-width: 600px), print
{ /* start of desk style */

body
{
  font-size:100%;
  max-width:1200px;
  margin:0 auto;
}

#skip
{
  position:absolute;
  left:-9000px;
  top:0;
  z-index:20
}

#header
{
  /* background: url('../img/examplelogo.gif') no-repeat; */
  min-height:150px;
}

#header
{
  background: #060 url('../img/tanglewoodtop3.jpg')  no-repeat left top;    /* all */
}

#headertext
{
  margin-left:250px;
  padding-top:24px;
  font-weight:bold;
  font-size:400%;
}

#article
{
  float: right;
  width: 100%;
  margin-left: -14em;
 /*  background:#fff url("bg.jpg") fixed no-repeat 0 0; */
}

#content
{
  max-width:40em;
}
#content
{
  margin:0 0 0 13em;
  padding:10px 1em 1em 2em;
}

.picture
{
   float:right;
   margin-left:2em;
   margin-top:-1.5em;
}

a[href],
#nav li.this a
{
  display: inline;
  border:0;
  border-radius: 0;
  background: #fff;
  margin: 0;
  padding:0;
  font-size: 100%;
  font-weight: bold;
  text-decoration: none;
  color: #060;
}

a[href]:hover
{
 text-decoration: underline;
}


#nav a[id]
{
  display:none;
}


#nav
{
  float: left;
  padding-left:2em;
  width: 11em;
}

/* internals of nav */
#nav ul
{
  list-style: none;
  padding: 0;
  margin: 1em 1em 2em 0;
  font-weight: bold;
}

#nav ul li a[href],
#nav li.this a
{
  display: block;
  padding: 4px 0;
}

/* from here the colurs and text decoration for menu items */
/* selectable menu item */

#nav ul li.this a[href],
#nav ul li.this a:hover,
#nav li.this a
{
  display:block;
  color:#999;
  text-decoration: none;
}

#nav li.this a
{
  display:block;
  color:#999;
}
/* the currently selected item - not selectable */
#nav ul li a[href]
{
  display:block;
  color:#060;
  text-decoration:none;
}

/* mouse over selectable menu item */
#nav ul li a[href]:hover
{
  color:#060;
  text-decoration:underline;
}

#nav li.this :hover
{
  color:#999;
}
/* form style for desk */

input, select, textarea
{
  font: 1em verdana,arial,helvetica,sans-serif;
  width:25em;
  border:1px solid #aaa;
}

#submit
{
  margin: 0 0 0 11em;
  width:10em;
  padding:0.5em 1em;
}

.error
{
  color:#f00;
  margin: 0;
}

#webvalid
{
  float:right;
  margin-right:4em;
}

#access
{
  float:left;
}

} /* end of desk style */



/* style below for PRINT */
@media print
{ /* start of print style */
#header, #article, #content {margin:0; float:none;}
#nav, #footer, #skip {display:none;}
} /* end of print style */
