/* The site uses four basic colours:
	background blue-grey:  #2f3a47;
	textbox background dark blue-grey:  #29323f;
	gold border:  #b3c762;
	text:  #e4e4e4;  (for thin fonts #ffffff is used for higher visibility)
Additional colours:
	darker gold for visited links (sometimes):  #86954A;
	bright blue for active links:  #6262C8;

SECTIONS
	Default Values
	Special Classes
	Divs
		topOfPageAnchor
		topnav
		leftcontent - navbox+ special picture divs
		textbox
		addressbox

*/

/* *******************DEFAULT VALUES**********************  */

/* Hack needed for IE 5.x, since it doesn't accept body widths or auto margins for centering.
1. Create a div container for body content & set its width;
2. Use text-align: center in body to center the container div;
3. Set text-align back to left again in container div;  */

body {
  background: #2f3a47;  /* #90EE90*/ /*#4D7797;*/
  color: #e4e4e4;
  text-align: center;
  margin: 0px;
}

#bodycontainer {
  width: 920px; /*100%; /*920px;*/
  text-align: left;
  margin: 0 auto;
}

#mastheadimg {margin: 0 auto;}

p{text-align:justify;}
img {display: block; /* eliminates automatic vertical spacing when stacking inline images */}

/* Links are normally white, turn gold when hovered over, bright blue when clicked, and dark gold when visited */
a:link {color: #e4e4e4;}
a:visited {color: #86954A;}
a:hover {color: #b3c762;}
a:active {color: #6262C8;}

/* *******************SPECIAL CLASSES*********************** */

/* Next two are for the Lord of the Rings quotation */
.quote {
  padding: 0 20px;
  font-style: italic;
  font-family: Arial, sans-serif;
}

.citation {
  text-align: right;
  font-style: normal;
  font-family: Arial, sans-serif;
  padding: 0 20px;
}

/* To highlight the "your form has been submitted" response */
.highlight {color: #b3c762;}

/*Strike-through effect*/
.strikethrough {text-decoration: line-through;}

/* Make the contact form fields match the site layout */
.formfield {
  border: 1px solid #b3c762;
  background-color: #2f3a47;
  color: #ffffff;
  font-family:  Arial, sans-serif;
}

/* Make sure inline links in paragraphs are underlined */
.inlinelink {text-decoration: underline;}

/* Format the button to go to the next page in a section */
.nextbutton {
  text-align: right;
  margin: 0 10px;
  font-size: large;
}

a.nextbutton:link {color: #b3c762;}
a.nextbutton:visited {color: #b3c762;}
a.nextbutton:hover {color: #ffffff;}
a.nextbutton:active {color: #6262C8;}

/* Format  "return to top of page" link */

.topbutton {
  text-align: center;
  font-size: small;
}

a.topbutton link {color:  #e4e4e4;}
a.topbutton:visited {color: #e4e4e4;}
a.topbutton:hover {color: #b3c762;}
a.topbutton:active {color: #6262C8;}

/* ***********************DIVS****************** */

/* An invisible div to give an anchor at the top of each page */
#topOfPageAnchor {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
}

/* The top navigation bar */
#topnav {
  margin: 0;
  padding: 0;
}

#topnav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#topnav li {
  display: inline;
  padding: 0 0 0 6px;
  margin: 0;
}

#topnav img {
  display: inline;
  margin: 0;
  padding: 0;
}

#topnav a {
  text-decoration: none;
  text-transform: uppercase;
  font-family: Arial, sans-serif;
  /* hack to make font bigger in IE 5.x only */
  font-size: 16px;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: 15px;
}

#topnav a:link {color: #ffffff; /* text is thin, so this improves visibility */}
#topnav a:visited {color: #ffffff;}
#topnav a:hover {color: #b3c762;}
#topnav a:active {color: #6262C8;}


/*    Left Content Column  */
#leftcontent {
  float: left;
  margin: 0px 10px 30px 00px;
  line-height: 1.1em;
  width: 200px;
  font:  12px  Arial, sans-serif;
  text-align: center;
  z-index:2
}

#leftcontent img {
  margin: 20px auto 30px auto;
  padding: 20px;
  z-index:3
}

#leftcontenti {
  float: left;
  width: 300px;
  font:  large  Arial, sans-serif;
  text-align: center;
}

#leftcontenti img {
  margin: 20px auto 20px auto;
  padding: 0;
}
#navbox {
  border: 1px solid #b3c762;
  padding-left: 10px;
  margin-top: 19px;margin-right: 10px;  margin-left: 16px;
  border-top-width: 0px; border-left-width: 0px;
  padding-top: 5px;
  background:  #52163F;
  text-align: left;
}

#navbox h3{
  font-family: Arial, sans-serif;
}

#navbox ul {
  list-style-type: square;
  margin: 0 10px 20px 10px;
  padding: 0;
}

#navbox li {
  margin: 0;
  padding: 0px;
}

#africanpainted {margin-top: 300px;}
#brickmaker {margin-top: 500px;}
#moosejaw {margin: 500px 0 0 30px;}

/* The Main Content Textbox  */


#textbox {
  width: 90%;/*505px;*/
  background:  #29323f;
  font-family:  Verdana, "Trebuchet MS", Arial, sans-serif;
  line-height: 1.5em;
  margin: 18px auto 18px auto; /*20px 0 20px 0;*/
  padding: 15px 30px;
  border: 1px solid #b3c762;
  z-index:1

}
#textboxi {
  text-align:left;
  float: right;
  width: 505px;
  background:  #29323f;
  font-family:  Verdana, "Trebuchet MS", Arial, sans-serif;
  line-height: 1.5em;
  margin: 18px 0 18px 0; /*20px 0 20px 0;*/
  padding: 15px 30px;
  border: 1px solid #b3c762;
  z-index:1
}

#textbox h3{
  margin-top: 0;
  font-family: Arial, sans-serif;
}

#textbox h2{
  margin-top: 0;
  font-family: Arial, sans-serif;
}

#textbox li {
  margin-bottom: 20px;
}

/*  The Address Box at the bottom of the home page  */

#addressbox {
  float: right;
  /*clear: both;*/
  width: 300px;
  text-align: right;
  font-family:  Arial, sans-serif;
}
#addressbox h3 {
  margin-top: 0px;
}

#addressbox ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#addressbox a:link {
 color: #b3c762;
}

#addressbox a:visited {
 color: #b3c762;
}

#addressbox a:hover {
 color: #ffffff;
}

#warningbox {
  clear: left;
  width: 600px;
  background:  #29323f;
  font-family:  Verdana, "Trebuchet MS", Arial, sans-serif;
  line-height: 1em;
  margin: 50px 0 0 0;
  padding: 0;
  border: 1px solid #b3c762;
}

#warningbox p {
  margin: 0;
  padding: 5px;
  font-size: x-small;
}

#renbox {
  float: left;
  width: 900px;
  background:  #29323f;
  font-family:  Verdana, "Trebuchet MS", Arial, sans-serif;
  line-height: 1.6em;
  margin: 20px 0;
  padding: 10px;
  border: 1px solid #b3c762;
}

#renbox p {
margin: 0 0 10px 0;
}

.renphoto {
  float: left;
  width: 340px;
  background:  #29323f;
  font-family:  Verdana, "Trebuchet MS", Arial, sans-serif;
  line-height: 1.6em;
  margin: 20px;
  padding: 10px;
  border: 1px solid #b3c762;
}

.renphoto img {
margin-left: 20px;
}

.renphoto p {
margin: 10px 20px;
}


.renphoto-left {
  float: left;
  clear: left;
  width: 340px;
  background:  #29323f;
  font-family:  Verdana, "Trebuchet MS", Arial, sans-serif;
  line-height: 1.6em;
  margin: 20px;
  padding: 10px;
  border: 1px solid #b3c762;
}

.renphoto-left img {
margin-left: 20px;
}

.renphoto-left p {
margin: 10px 20px;
}

.renphoto_break {
float: left;
}

.renphoto_break img {
margin: 0;
}

/* *************CSS for Opportunites Database**************
CSS Document
$CVSHeader: opdb/list/list.css,v 1.6 2007/06/04 17:03:19 c2 Exp $
*/

/* from contact form
.formfield {
border: 1px solid #b3c762;
background-color: #2f3a47;
color: #ffffff;
font-family:  Arial, sans-serif;
}
*/

.list-header {
  text-align: left;
  color: #A6AC51;
/*  background-color:#FFFFFF; */
  width:100%;
}
.list-oppid , .list-title , .list-country {
  text-align: left;
  float: left;
  font-weight: bold;
/*  background-color:#CEDAE9; */
  padding-bottom:5px;
}
.list-oppid {
  width: 65px;
}
.list-title {
  clear: left;
  width: 280px; /* 400px; */
}
.list-country {
  float: right;
/*  width: 210px; */ /* 275px; */
}
a {
  color: #B05B53;
}
.list-opp {
}

.list-details {
  padding:10px;
/*  border: #CEDAE9 solid 5px;
  background-color:#99FFFF; */
  border: #b3c762 solid 1px;
  background-color: #2f3a47;
  text-align: left;
  clear: left;
}

.list {
	width: 500px;
	font-family:"Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
	text-align: center;
	display: block;
	float: left;
/*	background-color: #CEDAE9;  */
	clear: left;
}
.search-form {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	width: 500px;
/*	width: 775px; */
}
.char-label {
  font-size: 16px;
  margin-bottom: 3px;
}

.char-select {
  border: 1px solid #b3c762;
  background-color: #2f3a47;
  color: #ffffff;
  font-family:  Arial, sans-serif;
  width: 200px;
}

#search_char {
  font-size: 15px;
}

.country-select {
  border: 1px solid #b3c762;
  background-color: #2f3a47;
  color: #ffffff;
  font-family:  Arial, sans-serif;
  width: 200px;
}

#search_country {
font-size: 15px;
}

.country-label {
  font-size: 16px;
  margin-bottom: 3px;
}
.stringsearch-label {
  margin-bottom: 3px;
  font-size: 16px;
}
.country-label {
}
.stringsearch-label {
}
.stringsearch-label {
  margin-top: 20px;
}
.country-label {
}
.string-field {
  vertical-align: top;
  border: 1px solid #b3c762;
  background-color: #2f3a47;
  color: #ffffff;
  font-family:  Arial, sans-serif;
  font-size: 15px;
}
.search-submit {
}
.search-header {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 16px;
  display: none;
}
.w3 {
  float: right;
}
.w3 a {
  color: #FFF;
}

div[id^="Show-"], form[id^="Show-"] {
  display: none;
}

#Show-search {
display: block;
}

.search-form .characterics {
	width: 220px;
	float: left;
}
.search-form .country {
	width: 220px;
	margin-left: 30px;
	float: left;
}
.search-form .buttons {
	padding: 0;
	float: left;
}
.search-form .string {
	width: 450px;
	margin-left: 0px;
	float: left;
}
.search-form input, .search-form select {
	font-size: 15px;
}
.buttons .search-submit {
border: 1px solid #b3c762;
background-color: #2f3a47;
color: #ffffff;
font-family:  Arial, sans-serif;
margin: 20px 0 20px 50px;
}

/****  new menu ***/

#info p {padding:0 10px;}
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_examples.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
 /* common styling */
.menu1 {
	text-align:center;
	float:left;
	height:30px;
	width:920px;
	font-family: verdana, arial, sans-serif;
	font-size:15px;
	background:url(images/menu1.gif) repeat-x top left;
	border-top:3px solid #4c597f;
	border-left:1px solid #0c193f;
	border-bottom:3px solid #4c597f;
	margin:0 0 0 0;
}
.menu1 ul {padding:0;margin:0;list-style-type:none;}
.menu1 ul li {float:left; position:relative; background:url(images/divider1.gif) no-repeat top right;}
.menu1 ul li a, .menu1 ul li a:visited {float:left; display:block; text-decoration:none;color:#ddf; padding:0px 16px; line-height:25px; height:30px; border-bottom:3px solid #fff; }

.menu1 ul li:hover {width:auto;}

.menu1 ul li a.menu1one:hover {border-color:#c00; color:#f88;}
.menu1 ul li a.menu1two:hover {border-color:#c60; color:#fc0;}
.menu1 ul li a.menu1three:hover {border-color:#cc0; color:#cc0;}
.menu1 ul li a.menu1four:hover {border-color:#080; color:#0e0;}
.menu1 ul li a.menu1five:hover {border-color:#00c; color:#aaf;}
.menu1 ul li a.menu1six:hover {border-color:#c0c; color:#f8f;}
.menu1 ul li a.menu1seven:hover {border-color:#98f; color:#c8f;}

.menu1 ul li:hover a.menu1one {border-color:#c00; color:#f88;}
.menu1 ul li:hover a.menu1two {border-color:#c60; color:#fc0;}
.menu1 ul li:hover a.menu1three {border-color:#cc0; color:#cc0;}
.menu1 ul li:hover a.menu1four {border-color:#080; color:#0e0;}
.menu1 ul li:hover a.menu1five {border-color:#00c; color:#aaf;}
.menu1 ul li:hover a.menu1six {border-color:#c0c; color:#f8f;}
.menu1 ul li:hover a.menu1seven {border-color:#98f; color:#c8f;}

.menu1 ul li ul {	display: none;}
.menu1 table {		margin:0; border-collapse:collapse; font-size:11px; position:absolute; top:0; left:0;}

/* specific to non IE browsers */
.menu1 ul li:hover ul {display:block;position:absolute;top:32px;margin-top:1px; left:0;width:154px;border-bottom:1px solid #000;}
.menu1 ul li:hover ul.endstop {	left:-92px;}
.menu1 ul li:hover ul li ul {		display: none;}
.menu1 ul li:hover ul li a {		display:block;background:#C8DFCD;color:#000;height:auto;line-height:15px;padding:4px 16px; width:120px; border:1px solid #000; border-bottom:0;}
.menu1 ul li:hover ul li a.drop {	background:#ccd url(images/bullet1.gif) no-repeat 3px 8px;}
.menu1 ul li:hover ul li a:hover {	color:#000; background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;}
.menu1 ul li:hover ul li a:hover.drop {	background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;}
.menu1 ul li:hover ul li:hover ul {	display:block; position:absolute; left:153px; top:-1px;}
.menu1 ul li:hover ul li:hover ul.left {left:-153px;}

/* specific to IE5.5 and IE6 browsers */
.menu1 ul li a:hover ul {	display:block;position:absolute;top:30px; t\op:33px; background:#fff;left:0; border-bottom:1px solid #000;}
.menu1 ul li a:hover ul.endstop {	left: -92px;}
.menu1 ul li a:hover ul li a {display:block;background:#fff;color:#000; height:1px; line-height:15px; padding:4px 16px; width:154px; w\idth:150px; border:1px solid #000; border-bottom:0;}
.menu1 ul li a:hover ul li a.drop {background:#ccd url(images/bullet1.gif) no-repeat 3px 8px; padding-bottom:4px;}
.menu1 ul li a:hover ul li a ul {visibility:hidden; position:absolute; height:0; width:0;}
.menu1 ul li a:hover ul li a:hover {color:#000; background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;}
.menu1 ul li a:hover ul li a:hover.drop { background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;}
.menu1 ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; top:0;color:#000; left:153px;}
.menu1 ul li a:hover ul li a:hover ul.left {left:-153px;}

.colourpicker {
  text-align: left;
  margin: 0;
}