@charset "utf-8";

/* CSS Document written by Hunter Logan. Contact him at hunter@artlmntl.com. */

body {background: #020315; font-size: 14px; letter-spacing: .07em; font-family: "Geneva", "Helvetica", sans-serif; text-align: left;}
* html body {padding-bottom: 30px;}
* {margin: 0; padding: 0; border: none;}
a {text-decoration: none;} 
ul {list-style: none;}
h1 {font-size: 22px; text-align: center; color: #ece7cf; line-height: 1.6em; letter-spacing: .08em;}
h2 {font-size: 18px; text-align: center; letter-spacing: .07em; line-height: 1.4em;}
strong {font-size: 1.1em; font-weight: bold;}
em {font-style:italic; font-size: 1.1em; font-weight: bold; color: #000;}

div#wholepage {position: relative; width: 980px; margin: auto; padding-bottom: 60px;}
#header {float: left; width: 980px;}
#logo {float: left; width: 140px; height: 140px; padding: 10px 10px; text-align: center; background: url(images/hl_logo_01a.png) 12px 12px  no-repeat; }
#headline {float: left; width: 820px; padding-top: 40px; margin-left: -60px;}
* html #headline {display: inline;}
#headline h1 {float: left; width: 800px; line-height: 30px;  text-align: left; padding-left: 10px;}
#headline h2 {float: left; width: 660px; color: #c1c6c0; text-align: left; line-height: 24px; padding:0 0 14px 160px;}

/* content - wraps page content */
#content {float: left; width: 100%; margin-top: -60px; background: url(images/main01.png) top right no-repeat; padding: 50px 70px 0 0;}
* html #content {display: inline; padding-right: 68px;}
#menu {float: left; width: 580px; height: 24px; margin: -10px 0 0 400px; padding-bottom: 10px;}
* html #menu {display: inline; padding-bottom: 0;}
#menu ul {float: left; /* background: #020315; */ padding: 2px 0 2px 2px;}
* html #menu ul {padding-bottom: 0;}
#menu li {float: left; display: inline; margin-right: 2px;}
#menu li a {float: left; font-size: 16px; font-weight: bold; color: #222639; background: #CCBDA2; padding: 4px 10px 10px 10px;}
#menu li a:hover {background: #8cb; color: #303650;}
li#selected a, li#selected a:hover, li#selected a:active {text-align: center; background: #303650; color: #ece7cf;}

/* main - contains primary page content including features, articles, galleries, etc. */
#main {float: left; width: 738px; margin: 0 0 0 242px; padding-bottom: 50px;}
* html #main {display: inline; width: 736px;}
/* feature rules */
.feature {float: left; width: 720px; background: #ece7cf; padding: 0 10px 6px 10px;}
.feature h1 {float: left; width: 100%; background: #303650 url(images/main_h1.gif) top left no-repeat; color: #ece7cf; padding: 6px 0;}
.feature h2 {float: left; width: 100%; color: #111529; background: #CCBDA2; font-size: 19px; line-height: 1.5em; padding: 6px 0; margin-top: 6px;}
* html .feature h2{display: inline;}
.feature h3 {float: left; width: 100%; color: #222639; font-size: 17px; line-height: 1.5em; margin-top: 6px;}
* html .feature h3 {display: inline;}
.feature h3 span {font-size: 15px; font-weight: normal;}
.image {float: left; width: 100%; text-align: center; background: #46535c url(images/main_img.gif) bottom right no-repeat; padding: 20px 0;}
.text {float: left; width: 610px; /* background: url(images/main_text.gif) top left repeat-y; */padding: 0px 40px 14px 60px; margin-top: 4px; overflow: hidden;}
* html .txt {display: inline;}
.text p {float: left; width: 100%; margin-top: 8px;}
* html .text p {display: inline;}
.text p span {float: left; width: 100%; padding: 12px 0 0 0;}
.text p span a {float: right; font-size: 1.1em; font-weight: bold; color: #222639; padding: 2px 6px 3px 6px; border: 1px solid #222639; text-align: center;}
.text p span a:hover {background: #222639; color: #fce7db;}
.text ol {list-style-type:decimal; padding: 8px 24px 8px 24px;}
.text ol li {color:#000000; padding: 6px 0 6px 6px;}
.text ul {list-style-type: none; padding: 8px 6px 18px 24px;}
.text ul li {color:#000000; text-indent: -1em; padding: 6px;}

/* form */
.feature form {float: left; width: 100%; padding: 20px 0;}
form p {float: left; width: 100%;padding-top: 6px;}
form p label {float: left; width: 120px; text-align: right; line-height: 1.8em; font-size: 1.4em; font-weight: bold; color: #303650;}
form p input {float: left; width: 300px; text-align: left; padding: 5px 0 5px 8px; font-size: 1.4em; border: 2px solid #303650; margin-left: 20px;}
* html #form p input {display: inline;}
form p select {float: left; width: 247px; text-align: center; padding: 3px 0 3px 3px; font-size: 1.4em; margin-left: 20px; border: 2px solid #303650;}
* html form p select {display: inline;}
form p textarea {float: left; width: 380px; height: 200px; font-size: 1.4em; text-align: left; padding: 5px 8px; margin-left: 20px; border: 2px solid #303650; letter-spacing: .07em; font-family: "Geneva", "Helvetica", sans-serif;}
* html form p textarea {display: inline;}
form p span.preview {float: left; width: 360px; background: #DCEDE3; border: 2px solid #41727A;  font-size: 1.4em; font-weight: normal; color: #222639;  padding: 5px 0 5px 8px; margin: 0 0 0 20px;}
* html form p span.preview {display: inline;}
form button {float: left; width: 40%; background: #DCD1BE; color: #020315; font-size: 16px; font-weight: bold; cursor: pointer; border: 2px solid #303650; padding: 6px 0; margin-left: 50%;}
* html form button {display: inline;}
form button:hover {background: #8cb; color: #303650;}
form button:active {position: relative; top: 2px;}
p.warning {float: left; width: 68%; padding: 0 15%; font-size: 1.5em; font-weight: bold; color:#E92525; line-height: 1.9em;}
div#success, div#fail {float: left; width: 720px; background: #ece7cf; padding: 0 10px 6px 10px;}
#success h1, #fail h1 {float: left; width: 100%; background: #303650 url(images/main_h1.gif) top left no-repeat; color: #ece7cf; padding: 6px 0;}
#success div.text p {float: left; width: 90%; padding: 0 10% 0 0; font-size: 1.5em; font-weight: bold; color:#1F7007; line-height: 1.9em; text-align: center;}
#fail div.text p {float: left; width: 68%; padding: 0 15%; font-size: 1.5em; font-weight: bold; color:#E92525; line-height: 1.9em;}
#success div.image, #fail div.image {margin-top: 6px;}
* html #success div.image, * html #fail div.image {display: inline;}
/* addinfo - contains secondary contant and submenus */
#addinfo {float: left; width: 240px; margin: -42px 0 0 -980px; padding-bottom: 110px; background: url(images/addinfo_01.png) bottom right no-repeat;}
* html #addinfo {display: inline; margin-left: -982px;}
#ai_top {float: left; width: 100%; height: 0; background: url(images/addinfo_01.png) 0 -52px no-repeat; padding-top: 58px;}
* html #ai_top {padding-top: 42px;}
.module {float: left; width: 220px; padding: 16px 10px 0 10px; background: #D8DDD7;}
.module h2{float: left; width: 100%; color: #372209; background: #c1c6c0; padding: 10px 0px 6px 0; border-bottom: 1px solid #372209;}
.module p {float: left; width: 200px; padding: 8px 10px 0 10px;}
.module p span {float: left; width: 100%; padding-top: 10px;}
.module p span a {float: right; font-weight: bold; color: #372209; padding: 2px 6px 3px 6px; border: 1px solid #372209; text-align: center;}
.module p span a:hover {background: #372209; color: #ecfded;}

/* submenu */
.submenu {padding: 6px; background: #98aea4;}
* html .submenu {width: 205px;}
.submenu li {width: 100%;}
.submenu li a {width: 100%; display: block; text-align: center; font-size: 13px; font-weight: bold; color: #372209; padding: 2px 0 3px 0; border: 1px solid #372209;}
.submenu li a:hover {background: #372209; color: #ecfded;}
#subsel a, #subsel a:hover  {display: block; background: #bbe1d3; color: #261b06;}

/* notes */
.note {position: relative; float: left; width: 280px; margin-left: -170px; overflow: visible; background: #e5e5e5; padding: 12px; border: 10px solid #efefef;}

/* footer */
#footer {float: left; width: 690px; padding: 60px 0 100px 50px; text-align: center; background: url(images/main01.png) bottom left no-repeat;}
#footer p {float: left; width: 330px; text-align: center; padding: 0 3%; font-size: 14px; line-height: 1.4em;}

/* validation */
.valid {position: relative; float: left; width: 88px; height: 31px; margin-top: 4px; padding: 0 22px;}
* html .valid {display: inline; overflow: hidden;}
.valid a {position: relative; display: block;  float: left; width: 88px; height: 31px; text-align: center;  overflow: hidden;}
* html .valid a {display: inline;}
.valid a img {float: left;}
.valid a:hover img {position: relative; top: -31px; left:0px;}
.valid a:active {position: relative; top: 2px; left: 2px;}


/* font weight demo rules */
h2#w1a {font-size: 24px; font-weight: 100;}
h2#w2a {font-size: 24px; font-weight: 200;}
h2#w3a {font-size: 24px; font-weight: 300;}
h2#w4a {font-size: 24px; font-weight: 400;}
h2#w5a {font-size: 24px; font-weight: 500;}
h2#w6a {font-size: 24px; font-weight: 600;}
h2#w7a {font-size: 24px; font-weight: 700;}
h2#w8a {font-size: 24px; font-weight: 800;}
h2#w9a {font-size: 24px; font-weight: 900;}

h2#w1b {font-size: 24px; font-weight: lighter;}
h2#w2b {font-size: 24px; font-weight: normal;}
h2#w3b {font-size: 24px; font-weight: bold;}
h2#w4b {font-size: 24px; font-weight: bolder;}

h2#s1 {font-size: 12px; font-weight: normal;}
h2#s2 {font-size: 14px; font-weight: normal;}
h2#s3 {font-size: 16px; font-weight: normal;}
h2#s4 {font-size: 18px; font-weight: normal;}
h2#s5 {font-size: 20px; font-weight: normal;}
h2#s6 {font-size: 22px; font-weight: normal;}
h2#s7 {font-size: 24px; font-weight: normal;}
h2#s8 {font-size: 26px; font-weight: normal;}
h2#s9 {font-size: 28px; font-weight: normal;}

h2#w1 {font-size: 12px; font-weight: 100;}
h2#w2 {font-size: 14px; font-weight: 200;}
h2#w3 {font-size: 16px; font-weight: 300;}
h2#w4 {font-size: 18px; font-weight: 400;}
h2#w5 {font-size: 20px; font-weight: 500;}
h2#w6 {font-size: 22px; font-weight: 600;}
h2#w7 {font-size: 24px; font-weight: 700;}
h2#w8 {font-size: 26px; font-weight: 800;}
h2#w9 {font-size: 28px; font-weight: 900;}