/* start of: colour scheme */
/*
1 color: #888888 (white for "paper")
2 color: #008080
3 color: #058585
4 color: #109090
5 color: #159595
6 color: #20AAAA
7 color: #25AEAE
*/
/* end of: colour scheme */

body {
	font-size: 75%;
	margin: 0;
	padding: 0}

body, form, input, table, textarea, pre {
	font-family: Arial, Helvetica, sans-serif}

/* start of main page structure */
	/* +++++ page layout +++++ */

body#normal {
	 background-image: Url(../images/eyeopen.png);
	 background-repeat: no-repeat;
	 background-position: center 90px;
	 background-attachment: fixed;
}
body#faded {
	 background-image: Url(../images/eyeopenfaded.png);
	 background-repeat: no-repeat;
	 background-position: center 90px;
	 background-attachment: fixed;
 
}


#area_1, #area_2, #area_3 {
	clear: both;
	position: relative;
	width: 100%;
}

	/* +++++ area 1 layout +++++ */

#box_1a {
    clear: both;
	width: 100%;
	top: 0;
	position: fixed;
    background-color: #000000;
    border: none;
    padding: 10px;
    text-align: center;	
	background-image: url(../images/eyeopen.gif);
	background-position: left top;
	background-repeat: no-repeat;
	height: 130px;
	display: block;
	list-style: none;
	margin: 0;
	z-index: 100;

}
#box_2c p {
	padding: 0 0 0 10px;
}

#box_1a li {
	background: black;
	display: inline;
	margin: 0 -2px 0 -2px;
	padding: 0;
	color: #FFFFFF}

#box_1a a:link, #box_1a a:visited, #box_1a a:hover, #box_1a a:active {
	border-left: solid 1px #FFFFFF;
	border-right: solid 1px #FFFFFF;
	font-weight: bold;
	margin: 0;
	padding: 0.5em 1em 0.5em 1em;
	text-decoration: none}

#box_1a a:hover, #box_1a a:active {
	color: #FFFFFF !important;
	text-decoration: underline}

	/* +++++ area 2 layout +++++ */

#box_2a {
	float: left;
	top: 150px;
	position: fixed;
	width: 12%;
	z-index: 100;}

#box_2b {
	float: right;
	top: 150px;
	position: relative;
	padding: 0 0 0 1.5%;
	z-index: 10;
	width: 86.5%}/* important: add these %s (width, left and right only) and that of #box_2a.  must =100% */

#box_2c {
	float: left;
	bottom: 0;
	position: fixed;
	width: 12%;
	z-index: 100;
	font-size: 80%;
}
#box_3b {
	float: right;
	top: 150px;
	position: relative;
	padding: 0 0 0 1.5%;
	right: 5%;
	z-index: 10;
	width: 81.5%}/* important: add these %s (width, left and right only) and that of #box_2a.  must =100% */


#header {
	background-color: #FFFFFF;
	background-image: url(eyeopen.png);
	background-position: right;
	background-repeat: no-repeat;
	height: 90px;
	margin-bottom: 2px}

#header_logo {
	float: left;
	margin: 0;
	padding: 0}

#header_img {
	float: right}

#nav_main {
	background: #000000;
	clear: both;
	display: block;
	list-style: none;
	margin: 0;
	text-align: center}

#nav_main li {
	display: inline;
	margin: 0 -2px 0 -2px;
	padding: 0;
	color: #FFFFFF}

#nav_main a:link, #nav_main a:visited, #nav_main a:hover, #nav_main a:active {
	border-left: solid 1px #FFFFFF;
	border-right: solid 1px #FFFFFF;
	color: #FFFFFF;
	font-weight: bold;
	margin: 0;
	padding: 0.5em 1em 0.5em 1em;
	text-decoration: none}

#nav_main a:hover, #nav_main a:active {
	color: #FFFFFF !important;
	text-decoration: underline}

	/* +++++ area 2 styling +++++ */

#box_2a {
	padding-bottom: 3em}

#nav_home, #nav_about, #nav_users, #nav_members, #nav_missing  {
	position: absolute;
 	left: 0px;
 	top: -500px;
 	width: 1px;
 	height: 1px;
 	overflow: hidden}

#xxx #nav_missing {
	position: relative !important;
	left: 0 !important;
	top: 0 !important;
	width: auto !important;
	height: auto !important;
	overflow: auto !important}

#home #nav_home {
	position: relative !important;
	left: 0 !important;
	top: 0 !important;
	width: auto !important;
	height: auto !important;
	overflow: auto !important}

#about #nav_about {
	position: relative !important;
	left: 0 !important;
	top: 0 !important;
	width: auto !important;
	height: auto !important;
	overflow: auto !important}

#users #nav_users {
	position: relative !important;
	left: 0 !important;
	top: 0 !important;
	width: auto !important;
	height: auto !important;
	overflow: auto !important}

#members #nav_members {
	position: relative !important;
	left: 0 !important;
	top: 0 !important;
	width: auto !important;
	height: auto !important;
	overflow: auto !important}

#nav_2 a:link, #nav_2 a:visited, #nav_2 a:hover, #nav_2 a:active {
	border-bottom: solid 1px #000000;
	color: #000000;
	display: block;
	line-height: 2em;
	margin: 0;
	padding: 0;
	text-decoration: none !important;
	width: 95%}

#nav_2 a:hover, #nav_2 a:active {
	background-color: #DFDFDF}

#nav_2 {
	font-weight: bold;
	list-style: none;
	margin: 0;
	padding: 0 0 3em 0}

#nav_2 ul {
	font-weight: normal;
	margin: 0;
	padding-bottom: 1px}

#box_2a p {
	color: #109090;
	font-size: 90%}
#box_2a ul {
	list-style-type: none;
	list-style: none;
}
#box_2b {
	padding-bottom: 3em}

/* start of key structural styling */
/* start of generic mark-up styling */
      /* +++++ simple text elements +++++ */

h1 {border-bottom: solid 1px #008080;
   	color: #008080;
	padding-bottom: 0.5em;
	font-size: 300%}

h2 {color: #058585;
	font-size: 140%}

h3 {color: #888888;
	font-size: 130%}

h4 {color: #159595;
	font-size: 120%}

h5 {color: #20AAAA;
	font-size: 110%}

h6 {color: #25AEAE;
	font-size: 100%}

cite {
	font-style: italic;
	font-weight: bold}

q {	font-style: italic}

blockquote {
	margin-left: 2em}

	/* +++++ list elemnets +++++ */

ul {
	list-style-type: block;
	padding-left: 10px;
}

li {
	padding-bottom: 5px;
}

ol {margin-left: 2.5em;
	padding-left: 0}

dl {margin: 0;
	padding: 0}

dt {font-weight: bold;
	color: #058585}

dd {margin-left: 25px}

	/* +++++ link elements +++++ */

a:link, a:visited, a:hover, a:active {
	color: #008080;
	text-decoration: none}

a:hover, a:active {
	text-decoration: underline}

sup a {
	background-color: #008080;
	color: #FFFFFF !important;
	margin-left: 0.5em;
	padding: 0 2px 0 2px}

	/* +++++ table elements +++++ */

table {
	background: #20AAAA;
	font-size: 100%;
	/* width: 100% */
	}

caption {
	font-weight: bold;
	padding: 1em}

th {background: #008080;
	color: #FFFFFF;
	padding: 0.5em;
	vertical-align: top}

td {background: #FFFFFF;
	padding: 0.5em;
	vertical-align: top}

table ol, table ul {
	font-size: 100%;
	margin: 0.5em 0 0.5em 1.5em;
	padding: 0}

	/* +++++ form elements +++++ */

form {
/* 	border: solid 2px #008080;
	margin: 1em 0 1em 0;
	padding: 0 1em 1em 1em
*/}

form dd {
	margin-top: 0.25em;
	margin-bottom: 0.75em}

input, textarea {
	background-color: #FFFFBB !important;
	border: solid 1px #008080;
	font-size: 100%;
	padding: 0 0.25em 0 0.25em;
	/* width: 50% */}

.submit {
	color: #FFFFFF}

.submit h3 {
	display: inline}

.submit input {
	background-color: #008080 !important;
	border: outset 2px !important;
	color: #FFFFFF !important;
	margin-left: 0.5em;
	width: auto !important}

	/* +++++ other elements +++++ */

hr {color: #25AEAE;
	height: 1px}

img {
	border: 0}

img.right {
	padding: 0 5px 10px 10px;
	float: right}

img.left {
	padding: 0 10px 10px 0;
	float: left}

/* end of generic mark-up styling */
/* start of specific mark-up styling */

.\2_cols {
	background-color: green;
	height: 1px	}

.col_1 {
	float: left;
	margin-right: 1%;
	width: 49%}

.col_2 {
	float: left;
	margin-left: 1%;
	width: 49%}

.back_to_top {
	border-top: dashed 1px #25AEAE;
	margin-top: 1em;
	text-align: right}

.back_to_top a {
	background: #25AEAE;
	color: #FFFFFF !important;
	font-weight: bold;
	padding: 2px;
	position: relative;
	top: 5px}

.boxfull {
	border: solid 5px #008080;
	margin: 1em 0 1em 0;
	width: 100%;
	padding: 0 1em 0 1em}

.boxsmallleft {
	border: solid 5px #008080;
	margin: 1em 4em 1em 0;
	width: 30%;
	float: left;
	padding: 0 1em 0 1em}

.boxsmallright {
	border: solid 5px #008080;
	margin: 1em 0 1em 4em;
	width: 30%;
	float: right;
	padding: 0 1em 0 1em}
.boxsideleft {
	border: none;
	margin: 1em 4em 1em 0;
	width: 20%;
	float: left;
	padding: 0 1em 0 1em}

.boxsideright {
	border: none;
	margin: 1em 0 1em 4em;
	width: 20%;
	float: right;
	padding: 0 1em 0 1em}

.boxwideleft {
	border: solid 5px #008080;
	margin: 1em 4em 1em 0;
	width: 60%;
	float: left;
	padding: 0 1em 0 1em}

.boxwideright {
	border: solid 5px #008080;
	margin: 1em 0 1em 4em;
	width: 60%;
	float: right;
	padding: 0 1em 0 1em}

.clear {
	clear: both}

#contents {
	border: solid 2px #008080;
	margin: 1em 0 1em 0;
	padding: 1em 1em 1em 2em}

.footnotes  {
	border-top: 2px solid #058585;
	font-size: 90%;
	margin: 2em 0 0 0;
	padding: 1em 0 0 2.5em}

.hidden {
	position: absolute;
 	left: 0px;
 	top: -500px;
 	width: 1px;
 	height: 1px;
 	overflow: hidden}

.img_links {
	color: #FFFFFF;
	margin: 1em 0 1em 0}

.img_links img, .img_links input {
	margin: 0 1.5em 0 0}

.photo {
	border: solid 2px #008080;
	display: block;
	float: left;
	font-weight: bold;
	margin: 1em;
	padding: 1em}

.photo img {
	display: block}

/* end of specific mark-up styling */
/* start of section-specific mark-up styling */
	/* user/reviews/reviews_users.htm */

dl.product {
	border-bottom: dashed 1px #25AEAE;
	margin-bottom: 1em;
	padding-bottom: 1em}

dd.product {
	font-weight: bold}

/* end of section-specific mark-up styling */
/* start of temporary classes for development only */

.alert {
	background: yellow;
	font-weight: bold;
	padding: 1em;
	text-align: center}