/* --------------------------------------------------------------

   reset.css
   * Resets default browser CSS.

   Based on work by Eric Meyer:
   * meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

-------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}


body { line-height: 1.5; background: #fff; margin:1.5em 0; }

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight:400; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

a img { border: none; }
a {	outline: none; }


/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clear { display: inline-block; }
.clear:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }
/************* END ADAM'S BASELINE STYLES ***************/


/* --------------------------------------------------------------

   typography.css
   * Sets up some sensible default typography.

   Based on work by:
   * Nathan Borror     [playgroundblues.com]
   * Jeff Croft        [jeffcroft.com]
   * Christian Metts   [mintchaos.com]
   * Wilson Miner      [wilsonminer.com]
   * Richard Rutter    [clagnut.com]

   Read more about using a baseline here:
   * alistapart.com/articles/settingtypeontheweb

-------------------------------------------------------------- */

/* This is where you set your desired font size. The line-heights
   and vertical margins are automatically calculated from this.
   The percentage is of 16px (0.75 * 16px = 12px). */

body { font-size: 75%; }


/* Default fonts and colors.
   If you prefer serif fonts, remove the font-family
   on the headings, and apply this one to the body:
   font: 1em Georgia, "lucida bright", "times new roman", serif; */
/*
body {
  color: #222;
  font-family: sans-serif;
}
h1,h2,h3,h4,h5,h6 {
  color: #111;
  font-family: "century gothic", "avant garde",  sans-serif;
}
*/

/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: normal; }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 2; margin-bottom: 0; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }

/* Text elements
-------------------------------------------------------------- */

p           { margin: 0 0 1.5em; }
p.last      { margin-bottom: 0; }
p img       { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.top   { margin-top: 0; } /* Use this if the image is at the top of the <p>. */
/*img         { margin: 0 0 1.5em; }*/

ul, ol      { margin:0 1.5em 1.5em 1.5em; }
ul          { list-style-type: circle; }
ol          { list-style-type: decimal; }
dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}

abbr,
acronym     { border-bottom: 1px dotted #666; }
address     { margin-top: 1.5em; font-style: italic; }
del         { color:#666; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
pre,code    { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'monotype.com', 'lucida console', monospace; line-height: 1.5; }
tt          { display: block; margin: 1.5em 0; line-height: 1.5; }

/* Tables
-------------------------------------------------------------- */

table   { margin-bottom: 1.4em; }
th      { border-bottom: 2px solid #ccc; font-weight: bold; }
td      { border-bottom: 1px solid #ddd; }
th,td   { padding: .25em 0; }
tfoot   { font-style: italic; }
caption { background: #ffc; }

/* Use this if you use span-x classes on th/td. */
table .last { padding-right: 0; }

/* Some default classes
-------------------------------------------------------------- */

.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.quiet      { color: #666; }

.hide       { display: none; }
.highlight  { background:#ff0; }
.added      { color:#060; }
.removed    { color:#900; }

.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }
/************* END TYPOGRAPHY ***************/

/* --------------------------------------------------------------

   forms.css
   * Sets up some default styling for forms
   * Gives you classes to enhance your forms

   Usage:
   * For text fields, use class .title or .text

-------------------------------------------------------------- */

label { font-weight: bold; }


/* Fieldsets */
fieldset    { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend      { font-weight: bold; font-size:1.2em; }

/* Text fields */
input.text, input.title   { width: 300px; margin:0.5em 0.5em 0.5em 0; }
input.text, input.title   { border:1px solid #bbb; background:#f6f6f6; padding:5px; }
input.text:focus,
input.title:focus         { border:1px solid #999; background:#fff; }
input.title               { font-size:1.5em; }

/* Textareas */
textarea            { width: 400px; height: 250px; margin:0.5em 0.5em 0.5em 0; }
textarea            { border:1px solid #bbb; background:#eee; padding:5px; }
textarea:focus      { border:1px solid #999; background:#fff; }

/* Select fields */
/*select              { border:1px solid #ccc; background:#f6f6f6; width:200px; }
select:focus        { border:1px solid #999; background:#fff; }
*/
select { font-size: 1.2em; }

/* Success, error & notice boxes for messages and errors. */
.error,
.notice,
.success    { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }
.error      { background: #FBE3E4; color: #D12F19; border-color: #FBC2C4; }
.notice     { background: #FFF6BF; color: #817134; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #529214; border-color: #C6D880; }
.error a    { color: #D12F19; }
.notice a   { color: #817134; }
.success a  { color: #529214; }
/*********** END FORMS *********/



body {
	background: url(/images/bodybg.gif) #eee top left repeat-x;
	font-family: verdana, sans-serif;
}

div.baseOccArea,
div.newOccArea {
	position: absolute;
	cursor: help;
}

div.baseOccArea.hover {
	display: block;
	background-color: #5a6efb;
	border-top: 2px solid #0014bc;
	border-right: 2px solid #0014bc;
	border-left: 2px solid #0014bc;
}

div.newOccArea.hover {
	display: block;
	background-color: #a2ddf7;
	border-top: 2px solid #00aeff;
	border-right: 2px solid #00aeff;
	border-left: 2px solid #00aeff;
}

div.baseOccArea div,
div.newOccArea div {
	display: none;
	position: relative;
}

div.baseOccArea.hover div,
div.newOccArea.hover div {
	display: block;
	background-color: white;
	line-height: 10px;
	padding: 0 1px;
	font-weight: bold;
	font-size: smaller;
	left: 1px;
	top: -14px;
}

a {
	color: #1d7c1c;
}

a:hover {
	color: #2164F3;
}

.right {
	float: right !important;
}

.positive {
	color: green;
}

.negative {
	color: red;
}

.rightAlign {
	text-align: right;
}

#container {
	margin: auto;
	width: 750px;
}

#header {
	height: 60px;
	background: url(/images/headerbg.gif) repeat-x top left;
	position: relative;
}

#header a {
	background: url(/images/startover.gif) no-repeat top left transparent;
	display: block;
	height: 20px;
	width: 88px;
	position: absolute;
	top: 20px;
	right: 26px;
	font-size: 1em;
	color: #ddd;
	text-align: center;
	text-decoration: none;
	line-height: 20px;
}

#header a:hover {
	color: white;
}

#header h1 {
	/*background: url(/images/logo.gif) no-repeat top left;*/
	/*width: 311px;*/
	height: 42px;
	/*text-indent: -9999em;*/
	position: absolute;
	/*top: 9px;*/
	left: 25px;
	margin: 0;
	width: 400px;
	top: 7px;
	color: white;
	font-size: 48px;
	font-family: impact;
}

h2 {
	color: #2164F3;
}

div.wmd-preview {
	margin-top: 2em;
}
div.wmd-preview h2 {
	color: black;
	font-size: 18px;
}
div.wmd-preview ul {
	list-style: disc;
}
div.wmd-preview p,
div.wmd-preview ul li {
	font-size: 14px;
}

button {
	background: url(/images/button.gif) no-repeat top left white;
	width: 80px;
	height: 30px;
	font-size: 1.5em;
	border-width: 0;
	color: #333;
	cursor: pointer;
}

button::-moz-focus-inner { border: 0; }

button:hover 	{ color: #1d7c1c; }
button:active 	{ color: #2164F3; }

#main {
	background: url(/images/mainbg.gif) repeat-x top left white;
	padding: 1.5em 2em 0;
	border-width: 0 2px 2px;
	border-style: solid;
	border-color: #1d7c1c;
	border-bottom-color: #165915;
}

#loggedin {
	float: right;
	margin: 2.5em;
	color: #eee;
}

#loggedin a {
	color: #eee;
}

#loggedin a:hover {
	color: white;
}

#name div div,
#occupation div div,
#region div div,
#wages div div {
	position: relative;
	float: left;
	width: 100%;
}

#name div div label.over-apply,
#occupation div div label.over-apply {
	color: #ccc;
	position: absolute;
	top: .25em;
	left: .5em;
	font-size: 1.5em;
}

#name input,
#occupation input,
#region input,
#wages input,
#adminLogin input {
	width: 98%;
	font-size: 1.5em;
	padding: .25em;
}

#occupation input {
	/*margin-bottom: .8em;*/
}

#region input,
#wages input {
	text-align: right;
}

#name,
#occupation,
#region,
#wages,
#occupations,
#report {
	padding-bottom: 1em;
}

.newOccupation,
.oldOccupation {
	margin-bottom: 1em;
	border-bottom: 1px dashed #ddd;
}

.newOccupation div {
	float: left;
	margin-bottom: 1em;
}

.newOccupation .occdescription {
	width: 56%;
}

.newOccupation .occinfo {
	width: 44%;
}

.occinfo div label {
	cursor:help;
}

.newOccupation p {
	font-size: .9em;
	padding-right: 3em;
	margin: 0;
}

.newOccupation label {
	float: left;
	width: 12em;
	color: #555;
}

.prevOcc {
	border-bottom: 1px dashed #aaa;
}

.block {
	background: url(/images/block.gif) repeat-x left bottom;
	padding: 0 2em 2em;
	border-bottom: 1px solid #ccc;
	margin-bottom: 1em;
}

#name .block,
#occupation .block,
#wages .block,
#occupations .block {
	padding-bottom: 1em;
}

.progress {
	list-style: none;
	margin: 0 0 1em;
	height: 2em;
}

.progress li {
	float: left;
	width: 132px;
	margin-right: 7px;
	border-bottom: 4px solid #ddd;
	color: #ccc;
}

.progress .current {
	color: #F6AE23;
	border-color: #999;
}

#footer {
	text-align: right;
	color: #666;
	padding: .5em;
}

#footer h6 {
	font-weight: normal;
}

span.tooltiptext {
	cursor: help;
}

.helpToggle {
	margin-top: .5em;
	font-weight:bold;
	color: #999999;
	text-decoration:none;
}

.helpDiv {
	display:none;
	border: 1px solid #AAAAAA;
	padding: 0;
	margin-bottom: 1em;
}

.helpDiv p {
	padding: .5em 1em 0 1em;
}

.helpDiv ul,
.helpDiv ol {
	margin-left: 2.5em;
	padding-left: 1em;
}

#annualizedWage {
	float: right;
	margin-bottom: -1.5em;
	text-align: right;
	font-size: 90%;
	font-style: italic;
	color: #999999;
	cursor: help;
}
/*REPORT STYLES*/

#compatibility h3 {
	margin-bottom: 1em;
}

#compatibility ul {
	list-style: none;
	margin-left: 0;
}

#compatibility ul li {
	float: left;
	margin-right: 2em;
}

#compatibility ul li h4 {
	margin-bottom: .5em;
	color: #555;
}

#compatibility ul li ul li {
	float: none;
	text-align: right;
}

#compatibility ul li ul li label {
	text-align: left;
	float: left;
	width: 24em;
	font-size: .9em;
}

.jobListing {
	margin-bottom: 1em;
	border-bottom: 1px dashed #ddd;
}

.jobListing h4 {
	margin-bottom: .5em;
}

.jobListing p {
	margin-bottom: 1em;
}

.jobListing span {
	color: #555;
}

.trainingProgram {
	margin-bottom: 1em;
	border-bottom: 1px dashed #ddd;
}

.trainingProgram h4 {
	margin-bottom: .5em;
}

.trainingProgram p {
	margin-bottom: 1em;
}

.trainingProgram p span {
	color: #555;
	font-size: .9em;
}

/* AUTOCOMPLETE STUFF */
input.ac_input {
	/*padding-left: 2px !important;*/
	/*padding-left: 20px !important;*/
	/*margin-top: 2px;*/
	/*height: 16px;*/
	/*width: 128px;*/
	/*border: 1px solid #777;*/
	/*background: url(/images/search2.gif) white no-repeat center left;*/
}

.ac_results {
	padding: 0px;
	border: 1px solid #bbb;
	background-color: white;
	overflow: hidden;
	z-index: 1000;
}

.ac_results ul {
	width: 100%;
	list-style-position: outside;
	/*border-top: 1px solid WindowFrame;*/
	list-style: none;
	padding: 0;
	margin: 0;
}

.ac_results li {
	margin: 0px;
	padding: .5em 1em 1em;
	cursor: default;
	display: block;
	/*width: 100%;*//*This makes there be an x-overflow when there doesn't need to be*/
	font: menu;
	font-size: 1.25em;
	overflow: hidden;
	border-top: 1px solid #ddd;
}

.ac_list li:first-child {
	border-top: none;
}

.ac_results li div.extra {
	font-size: .8em;
	line-height: 1.4em;
	color: #888;
}

.ac_results li.ac_over div.extra {
	color: #ddd;
}

.ac_loading {
	background: Window url('/images/indicator.gif') right center no-repeat;
}

#indeed_at 			{ float:right; margin-top:.5em; }
#indeed_at a img 	{ vertical-align:middle; }

#adminLogin {
	padding-bottom: 1em;
}

#demoLogin{
	margin-bottom:2em;
}

.oldOccupation p {
	margin-left: 2em;
}

.oldOccupation h3 {
	position: relative;
}

.oldOccupation label {
	line-height: 1.4em;
}

h3 label {
	font-weight: normal;
	color: #333;
	margin-left: 1.35em;
	display: block;
}

#searchResults div.selected.ac_over,
.ac_over,
.ac_over h3 label {
	color: white;
    background-color: #2164F3;
}

#searchResults {
	display: none;
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 500px;
	border: 1px solid #bbb;
	background-color: white;
}

#searchResults .oldOccupation {
	padding: 1em 0 0 .65em !important;
	border-bottom: 1px dashed #bbb;
	margin-bottom: 0;
	cursor: pointer;
}

#searchResults .oldOccupation p {
	margin: 0 2em 1.5em 0 !important;
}

#searchResults .oldOccupation h3 label {
	margin: 0 2em 0 0;
}

#searchResults div.selected {
	color: #333;
	background-color: #b5d5ff;
}

#searchResults div:last-child {
	border-bottom: none;
}

h3 input {
	float: left;
	width: auto !important;
	margin: auto !important;
	position: absolute;
	top: .5em;
	//top: .1em;
	left: 0;
}

p.suggestion {
	padding:.25em .5em;
	border:1px solid #fff05f;
	background-color:#ffffcf;
	color:#817149;
}

#statsFilterForm label {
	width: 90px !important;
	float: left;
}

#statsFilterForm select {
	width: 125px;
}

#statsFilterForm div.options {
	height: 36px;
	padding-bottom: 0;
	margin: 0 0 0 110px;
	position: relative;
}

.header_link{
	float: right;
	color: black;
	margin: 1em 2em 0 0;
}

.wysiwyg_not_saved,
.wysiwyg_saved {
	color: green;
	font-size: 1.5em;
}
.wysiwyg_not_saved {
	color: red;
}
#preview_container {
	border: 0px solid red;
	height: 720px;
}