/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Generic Styles
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Global Elements
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

html,body {
  margin: 0;
  padding:0
}

body {
	font-family: arial, sans-serif;
	font-size: 76%;
	letter-spacing: 0.15ex;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Text Formatting
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

h1,h2 {
  margin: 0;
  padding:0
}

h1.title {
  font: bold small-caps 160%/1.3 arial,sans-serif;
  color: #5F78A2;
  text-align:center;
}

h2.subtitle {
  font: bold small-caps 120%/1.1 arial,sans-serif;
  color: #5F78A2;
  }

h2.instruction {
  font: bold small-caps 120%/1.1 arial,sans-serif;
  color: #5F78A2;    
}
  
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Table
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

table {
  border-collapse: separate;
  border-spacing: 2px;
  border: 2px;
  border-color: #FFFFFF;
  margin-top:10px;
  margin-bottom:10px;
}

table.fullwidth {
    width:100%;
}

thead tr {
  background-color: #eee;
  color: #5F78A2;
  text-align: center;
  font: bold small-caps 85%/1 arial, sans-serif;
}

tbody tr {
  background-color: #eef;
  color: black;
  font-weight: normal;
  font: 80%/1 arial, sans-serif;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Forms
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

form{
  width: 100%;
  min-width:300px
}

fieldset{
  border:0px solid;
  /*margin:0;*/
  margin-top:10px;
  margin-bottom:10px;
  padding:0;
}

legend{
  font: bold small-caps 120%/1.3 arial, sans-serif;
  color: #5F78A2
}

fieldset div{
  padding: 10px 0;
  background: #eee;
  color: #333;
  border-top: 1px solid #CCC
}

form label{
  float: left;
  width: 30%;
  line-height: 23px;
  padding-right: 2%;
  text-align:right
}

fieldset input,textarea{
  width:50%
}

input:focus { 
  outline: 2px solid #8FBC8F; 
}

fieldset input#opt {
  width:5%;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Header
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

div#header {
    background-image: url(../images/GrassTile.gif);    
    background-repeat: repeat;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Containers
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

div#container{
    background: url(../images/originalroad.jpg) repeat-y top right
}

div#container2{background: url(../images/originalroad.jpg) repeat-y top left;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Navigation
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

div#navigation {
  color:#FFFFFF;
  float: left;
  width: 150px;
  padding: 1em 5px;
  /*padding: 1em 0 0 10px*/
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Menu List
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

ul#accordion, ul#accordion li {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul#accordion {
  width: 150px;
  border: 1px solid #9A9A9A;
  font-size: 12px;
}

ul#accordion a {
  display: block;
  height: 25px;
  overflow: hidden;
  padding-left: 10px;
  text-decoration: none;
  color: #333;
}

ul#accordion strong {
  display: block;
  height: 25px;
  line-height: 25px;
  margin-left: -10px;
  padding-left: 10px;
  color: #FFF;
  background: #7E7E7E url(../images/bk.png) repeat-x top;
}

ul#accordion a:hover {
  height: auto;
  overflow: auto;
  background-image: url(../images/paper008.jpg);
}

ul#accordion a:hover strong{
  background:url(../images/bk.png) repeat-x bottom;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Extra Div
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

div#extra {
  color:#000000;
  float: right;
  width: 150px;
  padding: 1em 5px
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Content
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Generic Elements
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

div#content {
  margin: 0 170px;
  padding: 1em 10px;
  border-width: 0 1px; 
  border-style:solid; 
  border-color: #ccc;
  color: #10457B;
  text-align: left;
  /*background:url(../images/grass.jpg) repeat;*/
}

div#content span.plaintext {
	font-family: arial, sans-serif;
	font-style: normal;
	font-variant: small-caps;
	font-weight: normal;
	font-size: 110%;
	line-height: 100%;
	word-spacing: normal;
	letter-spacing: 0.3ex;
	text-decoration: none;
	text-transform: none;
	text-align: left;
	text-indent: 0ex;   
}

h2.err {
  font: bold small-caps 120%/1.1 "Arial Narrow", arial, sans-serif;
  color: red;
  text-align:center;
}

tbody tr#you { /*Identify in a table the rows referring to the user
  /*background-color: #00FA9A;*/
  color: black;
  background-color: #eea;
  font: 80%/1 arial, sans-serif;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Special Divs
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

div#left {
    float: left;
    width: 50%;
    text-align: left;
}

div#right {
    float: right;
    width: 50%;
    text-align: left;
}

div#mailbox { /*Div used to contain the table containing the messages - mailbox.php*/
    width:100%;
}

div#warning { /*Div used to contain warning messages in post.php*/
    color: red;
}

/*view_message.php sub content structure*/

div#message_received {
    width:100%;
}

div#message_details {
    width:30%;
    float: left;
    background-image: url(../images/grid.png);
    background-repeat: repeat;
    padding: 5px 5px 5px 5px;
    margin-right:0.5em;

    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    border-top-color: #9999ff;
    border-bottom-color: #9999ff;
    border-left-color: #9999ff;
    border-right-color: #9999ff;

    font: bold small-caps 120%/1 "Arial Narrow", arial, sans-serif;
}

div#message_body {
    width:60%;
    float: left;
    background-image: url(../images/grid.png);
    background-repeat: repeat;
    padding: 5px 5px 5px 5px;

    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    border-top-color: #9999ff;
    border-bottom-color: #9999ff;
    border-left-color: #9999ff;
    border-right-color: #9999ff;

    font: bold small-caps 120%/1 "Arial Narrow", arial, sans-serif;
}

div>div#reply_form {
    float:left;
}

div#reply_form {
    margin-top:10px;
    float:none;
    width:80%;
}

div.instruction_container {
    width:100%;
}

div.instruction {
    float:left;
    width:30%;
    

    height:20em;
    padding:5px;
    margin:1em;
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-color: #8FBC8F ;
    border-bottom-color: #8FBC8F ;
    border-left-color: #8FBC8F ;
    border-right-color: #8FBC8F ;
    text-align: justify;
    font: 110%/1.4 "Arial Narrow",arial,sans-serif;
    overflow:auto;    
    word-spacing: 2px;
    letter-spacing: 1px;   
    background-image: url(../images/paper008.jpg);
}

div.instruction h2 {
  text-align: center;
  font: bold small-caps 140%/1.3 "Arial Narrow",arial,sans-serif;
  color: #5F78A2;
  }

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Google Maps
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

#map_canvas {
  width: 500px; 
  height: 480px;
  float:left;
  border: 1px solid black;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Post Table
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

table.post {
  border-collapse: separate;
  border-spacing: 2px;
  border: 2px;
  border-color: #FFFFFF;
}

thead tr.post {
  background-color: #eee;
  color: #5F78A2;
  text-align: center;
  font: italic small-caps 85%/0.8 arial,sans-serif;
}

tbody tr.post {
  background-color: #eee;
  color: black;
  font-weight: normal;
  font: italic 80%/0.8 arial,sans-serif;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Footer
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

div#footer{
    background-image: url(../images/GrassTile.gif);
    background-repeat: repeat;
    clear:both;
    text-align:center;
    padding: 5px 0;
    color: #FFFFFF
}

div#footer ul {

  margin: 0;
  padding: 0; 
  list-style-type: none;
}

div#footer li {
  display: inline; 
  margin: 0 0 0 1em;
  padding: 0;
}

div#footer a {
  color:#ffffff;
  font-weight: bold;
  text-decoration: underline
}