/* Let's start with global declarations */
*
{
    background-color: #F0F0F0; /* #efe; */
	font-family: verdana, arial; 
	margin: 0;
}

div.navtop {
	padding: 0px;
	text-align:left;
	position:absolute; left: 254px; top: -50px;
	width:auto;
}

.navtop ul {
	margin: 0;
	padding: 0 0 25px 0;
	list-style-type: none;
	/* this prevents the menu from having random wrapping weirdness seen in Chrome beta and IE 7 */	
	white-space:nowrap;
}

.navtop li  {
	width:130px;
	margin: 0 -1px 0 0;
	padding: 0;
	border:1px solid black;
	color:black;
	text-decoration:none;
	background-color:#88aa88;
	float:left;
}

.navtop a {
	text-decoration: none;
	display: block;
	color: #000000;
	background-color: #inherit;
	padding: 5px;
	background-color:#88aa88; /* IE */
/*	width:100%; /* IE */
}

.navtop a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #003300;
}


.navtop li:hover ul {
	visibility: visible;
	display: block;
	position:absolute;
	z-index:1;
	width:130px;
	padding: 0;
	margin: 0;
	border:1px solid black;
}

.navtop li li {
	border: none;
	
}	

.navtop li ul {
	display: none;
}

.navtop li li a {
	padding: 2px 2px 2px 10px;
}


/* Element hiding and showing via Javascript 
	hideit and showit are triggered via the utils.js togglevis function */
.hideit {display:none}
.showit {display:inline}

/* Conditional font styling */
.error { color: red;font-weight:bold; background-color:inherit}
.important { color:#CC33CC;font-weight:bold; background-color:inherit}
.usererror { color: red;font-weight:bold; background-color:inherit}
.attention {font-weight:bold; background-color:inherit}
.bold { font-weight:bold ; background-color:inherit}
.subdued{ color:#999999; background-color:inherit}

/* Anchor treatment can be summed up as follows:
	Background inherits the parent unless it is rolled over,
	in which case it is darker.
	font style is always bold	
	Images in anchors should also show the dark background on rollover. */
a:hover img {
	background-color: #003300;
}

a { 
color: #000;
background-color:inherit;
text-decoration: none;
font-weight:bold;
}

a:link, a:visited, a:active
{
color: #000;
background-color:inherit;
text-decoration: none;
font-weight:bold;
}

a:hover
{
color: #fff;
background-color: #003300;
text-decoration: none;
font-weight:bold;
}

li>a { width:auto; } /* Not supported in IE */

/*  menu styling */
/* Pulldown menu */
div.pdmenu {
	padding: 0px;
	text-align:left;
	z-index: 300;
}

.pdmenu ul {
	margin: 0;
	padding: 0 0 25px 0;
	list-style-type: none;	
		z-index: 300;
}

.pdmenu li  {
	width:130px;
	margin: 0 -1px 0 0;
	padding: 0;
	border:1px solid black;
	color:black;
	text-decoration:none;
	background-color:#88aa88;
	float:left;
		z-index: 300;
}

.pdmenu a {
	text-decoration: none;
	display: block;
	color: #000000;
	background-color: #inherit;
	padding: 5px;
	width:100%; /* IE */
		z-index: 300;
}

.pdmenu a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #003300;
		z-index: 300;
}


.pdmenu li:hover ul {
	visibility: visible;
	display: block;
	position:absolute;
	z-index:1;
	width:130px;
	padding: 0;
	margin: 0;
	border:1px solid black;
		z-index: 300;
}

.pdmenu li li {
	border: none;
		z-index: 300;
}	

.pdmenu li ul {
	display: none;
		z-index: 300;
}

.pdmenu li li a {
	padding: 2px 2px 2px 10px;
		z-index: 300;
}

/* div indented group - for grouping controls under a header */
div.group{
	width:auto;
	border: solid; 
	border-width: thin; 
}
div.indented-group{
	margin-left:2em;
	width:auto;
	border: solid; 
	border-width: thin; 
	margin: 1em;
}
/* div indented group - for grouping controls under a header */
div.indented-group-noborder{
	margin-left:2em;
	margin: 1em;
}
/* Table styling */
table {
	border-width: 1px 1px 1px 1px;
	border-spacing: 2px;
	border-style: none none none none;
	border-color: black;
	border-collapse: collapse;

}
table th {
	border-width: 1px 1px 1px 1px;
	padding: 1px 1px 1px 1px;
	border-style: solid solid solid solid;
	border-color: black black black black;
	background-color:#88aa88;
	-moz-border-radius: 0px 0px 0px 0px;
	font:bold; 
}
table tr {
/*	border-width: 1px 1px 1px 1px; 
*/
}


table td {
/*	border-width: 1px 1px 1px 1px;
	padding: 1px 1px 1px 1px;
	border-style: solid solid solid solid;
	border-color: black black black black;
*/
	-moz-border-radius: 0px 0px 0px 0px;
}

tr.even td {
	background-color:#aaddaa; 
}
tr.odd td {
	background-color:#ddffdd; 
	
}


/* Anchor opacity changes on rollover: requires javascript: */
a.linkopacity img {
filter:alpha(opacity=50); 
-moz-opacity: 0.5; 
opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);   
-moz-opacity: 1.0;   
opacity: 1.0;
}

/* Forms elements */
textarea{
	font-size: 1em; 
  border-color:black;
  border-width:thin;
  background:#fefffe;
}

input{
  border-color:black;
  border-width:thin;
  background:#fefffe;
  font-size:9px;
}

input.btn{
   font-weight:bold;
   font-size:9px;
   background-color: inherit;
}


input.btnhover{
  	color: #FFFFFF;
	background-color: #003300; 
}

.headermenuitem {
	font-weight:bold;
	background-color:inherit;
}
.headermenucontainer {
	border: 0px solid #333; 
	padding: 0px; 
	margin: 0px;
	width:100%;
	height:10%;
	background-color: #8888FF;
}
.footermenucontainer {
	border: 0px solid #333; 
	padding: 0px; 
	margin: 0px auto;
	width:100%;
	height:10%;
	background-color: #8888FF;
}
.outercontainer {
	background-color: #EEEEEE;
	border: 0px solid #333; 
	padding: 0px; 
	margin: 0px auto;
	height: 100%;
	width: 100%;
}
.pagetitle {
	font-size: 2em; 
	margin: 1em 10px;
	background-color: #EEEEEE;
	border: 0px solid #333; 
	padding: 0px; 
	height: 10%;
	width: 100%;
}
.maincontent {
	font-size: .75em; 
	margin: 1em ;
	background-color: #EEEEEE;
	border: 0px solid #333; 
	padding: 0px; 
	height: 70%;
	width: 100%;
}
.footer {
	font-size: .65em; 
	filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;
	background-color: inherit;
	width: 40%;
	position: absolute;
	bottom: 0; right: 0;
}

CAPTION         { text-align: center }
BODY            { padding: 8px; line-height: 1.33 ;
		/* This is an IE-only workaround for the fact that IE doesn't support hover behaviors for non "a"-tags */
		behavior:url("csshover.htc");
}

/* The nobreak class is a CSS version of the HTML NOBR tag.
	Evidently, NOBR is a tag non-grata among new age CSS geeks. */
.nobreak {white-space: nowrap}	


/* Div for staging server rendering */
#staging{
	z-index: 100;
	position: absolute;
	bottom: 0; right: 0;
	background-color: #ffdddd;
	text-align: center;
	font-size:12px;
	font-weight:bolder;
	color:#FF3333;
	padding:4px 6px 4px 6px;
}
/* The userbanner is the lucky inhabitant of the top of the screen */
#userbanner {
	font-size: .6em;
	position:absolute;
	top:0; right:0;
}
/* The userbanner is the lucky inhabitant of the top of the screen */
.helpicon {
	position:absolute;
	top:1em; right:0;
}
#search {
	position:absolute; left: 0px; top: 0px;
	margin-top: -13px;
	font-size:.6em;
}

#wrapper {
    position: absolute;
	/* Leave just enough room for the userbanner */
    top: 1.25em;
    left: 5;
	min-height: 95%;
	/* next 2 lines: hack for IE 6 */
	height: auto !important;
	height: 95%;
	width: 95%;
	margin: 0 auto -4em;
}

html, body {
	height: 95%;
    background-color: #efe;
/* This is an IE-only workaround for the fact that IE doesn't support hover behaviors for non "a"-tags */
	behavior:url("csshover.htc");
}
#dynamicimage {
	float: left;
	position:absolute;
	height: 110px;
	width: 110px;
}
#footer {
	font-size: .6em;
	float: left;
	position:absolute;
	bottom: 0; left: 0;
	height: 4em;
}
#logo {
	float: right;
	position:absolute;
	bottom: 0; right: 0;
}
.pushlogo {
	height: 200px;
}
.push {
	height: 1em;
}
div.navtop {
	padding: 0px;
	text-align:left;
	width:auto;
}


.navtop ul {
	margin: 0;
	padding: 0 0 25px 0;
	list-style-type: none;

}

.navtop li  {
	width:120px;
	margin: 0 -1px 0 0;
	padding: 0;
	border:1px solid black;
	color:black;
	text-decoration:none;
	background-color:#88aa88;
	float:left;
}

.navtop a {
	text-decoration: none;
	display: block;
	color: #000000;
	background-color: #inherit;
	padding: 5px;
	background-color:#88aa88; /* IE */
/*	width:100%; /* IE */
}

.navtop a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #003300;
}


.navtop li:hover ul {
	visibility: visible;
	display: block;
	position:absolute;
	z-index:1;
	width:120px;
	padding: 0;
	margin: 0;
	border:1px solid black;
}

.navtop li li {
	border: none;

}

.navtop li ul {
	display: none;
}

.navtop li li a {
	padding: 2px 2px 2px 10px;
}

/* Element hiding and showing via Javascript
	hideit and showit are triggered via the utils.js togglevis function */
.helpmainhide {display:none}
.helpmainshow {display:inline;
	position:absolute;
	bottom: 10em; left: 200;
}
#helpclose{ margin-top: -10px;font-size: .9em; float:right;}
.hideit {display:none}
.showit {display:inline}

table.noborders {
	border-width: 0px 0px 0px 0px;
	border-spacing: 2px;
	border-style: outset outset outset outset;
	border-collapse: separate;
	padding: 2px 10px 2px 10px;
}
table.noborders td{
	padding: 2px 10px 2px 10px;
}
tr.totalrow {
	 border: 1px solid black;
}
/* Conditional font styling */
.error { color: red;font-weight:bold; background-color:inherit}
.noevents { color: red;font-weight:bold; background-color:inherit}
.money { background-color:inherit}
.debit { color: red;font-style:italic; background-color:inherit}
.moneytotal { border-width: 3px 0 0 0; border-style: solid;  border-color:#000000; font-weight:bold ; font-size: 1.5em; background-color:inherit}
.moneytotaldebit { border-width: 3px 0 0 0; border-style: solid; font-style:italic; border-color:#000000; color: red; font-weight:bold ; font-size: 1.5em; background-color:inherit}
.billingissue { color:#CC6600;font-weight:bold; background-color:inherit}
.important { color:#CC33CC;font-weight:bold; background-color:inherit}
.usererror { color: red;font-weight:bold; background-color:inherit}
.attention {font-weight:bold; background-color:inherit}
.bold { font-weight:bold ; background-color:inherit}
.subdued{ color:#999999; background-color:inherit}
.smaller {	font-size: .6em;background-color:inherit}
.bigstrong {	 font-weight:bold ;font-size: 1.5em;background-color:inherit}
.bigstrongcenter {	 font-weight:bold ;font-size: 1.5em;background-color:inherit;text-align: center}
.strong { font-weight:bold ;}

/* div indented group - for grouping controls under a header */
div.group{
	width:auto;
	border: solid;
	border-width: thin;
}
div.indented-group{
	margin-left:2em;
	width:auto;
	border: solid;
	border-width: thin;
	margin: 1em;
}
/* div indented group - for grouping controls under a header */
div.indented-group-noborder{
	margin-left:2em;
	margin: 1em;
}
/* This is for expandable headers (using togglerender from javascript into an iframe) in order to tighten the space up. */
.expandable{
	margin-bottom: 0em;
	padding: -1em;
}

/* Forms elements */
textarea{
	font-size: 1em;
  border-color:black;
  border-width:thin;
  background:#fefffe;
}

input{
  border-color:black;
  border-width:thin;
  background:#fefffe;
  font-size:9px;
}

input.btn{
   font-weight:bold;
   font-size:9px;
   background-color: inherit;
}


input.btnhover{
  	color: #FFFFFF;
	background-color: #003300;
}

input.btnbig{
   font-weight:bold;
   font-size:14px;
   background-color: inherit;
}

input.btnbighover{
	font-size:14px;
  	color: #FFFFFF;
	background-color: #003300;
}
/* For help text blocks */
div helpbox{
	margin-top:1em;
}
div.helpboxtitle {
	font-size: 2em;
	font-size: .83em;
	font-weight: bolder;
	margin-left:50px;
	margin-right:200px;
}
div.helpboxtext {
	font-size: .75em;
	padding:4px 6px 4px 6px;
	color: #555555;
	background-color: #eeeeee;
	border: #dddddd 2px solid;
	margin-left:50px;
	margin-right:200px;
	width:55%;
}

div.scanbox {
	font-size: .75em;
	padding:4px 6px 4px 6px;
	background-color: #ddeedd;
	border: #dddddd 2px solid;
	margin-left:50px;
	margin-right:100px;
	width:45%;
}
div.errorboxtitle {
	color:#FF0000;
	font-size: 1em;
	font-weight: bolder;
}

div.errorboxclose {
	float: right;
	position:absolute;
	top: 0; right: 0;
}

div.errorboxshow {
	display:inline;
	font-size: .75em;
	color:#FF0000;
	position:absolute;
	top: 100px;
	left: 33%;
	padding:4px 6px 4px 6px;
	background-color: #ddeedd;
	border: #dddddd 2px solid;
	margin-left:50px;
	margin-right:100px;
}

div.msgboxtitle {
	color:#000000;
	font-size: 1em;
	font-weight: bolder;
}

div.msgboxclose {
	float: right;
	position:absolute;
	top: 0; right: 0;
}

div.msgboxshow {
	display:inline;
	font-size: .75em;
	color:#000000;
	position:absolute;
	top: 33%;
	left: 33%;
	padding:4px 6px 4px 6px;
	background-color: #ddeedd;
	border: #dddddd 2px solid;
	margin-left:50px;
	margin-right:100px;
}

div.confirmboxtitle {
	color:#000000;
	font-size: 1em;
	font-weight: bolder;
}

div.confirmboxclose {
	float: right;
	position:absolute;
	top: 0; right: 0;
}

div.confirmboxshow {
	display:inline;
	font-size: .75em;
	color:#000000;
	position:absolute;
	top: 33%;
	left: 33%;
	padding:4px 6px 4px 6px;
	background-color: #ddeedd;
	border: #dddddd 2px solid;
	margin-left:50px;
	margin-right:100px;
}

div.boxbutton{
	position:absolute;
	left: 50%;
	bottom: 0;
}
div.boxbutton1{
	position:absolute;
	left: 30%;
	bottom: 0;
}
div.boxbutton2{
	position:absolute;
	left: 60%;
	bottom: 0;
}
.errorboxhide {display:none}
.msgboxhide {display:none}
.confirmboxhide {display:none}

TH              { font-weight: bolder; text-align: center }
CAPTION         { text-align: center }
BODY            { padding: 8px; line-height: 1.33 }
H1              { font-size: 2em; margin: .67em 0 }
H2              { font-size: 1.5em; margin: .83em 0 }
H3              { font-size: 1.17em; }
H4, P,
BLOCKQUOTE, UL,
FIELDSET, FORM,
OL, DL, DIR,
MENU            { margin: 1.33em 0 }
TABLE,P,UL,OL,select   { font-size: 10px }
H5              { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }
H6              { font-size: .67em; margin: 2.33em 0 }
H1, H2, H3, H4,
H5, H6, B,
STRONG          { font-weight: bolder }

H1              { font-size: 2em; margin: .67em 0 }
H2              { font-size: 1.5em; margin: .83em 0 }
H3              { font-size: 1.17em; }
H4, P,
BLOCKQUOTE, UL,
FIELDSET, FORM,
OL, DL, DIR,
MENU            { margin: 1.33em 0 }
b , strong{
	background-color:inherit;
}


/* Calendar stuff */
/* special tiny text for number of events on a date */
#datedetail {
	font-size: .6em;
	background-color:inherit;
	text-decoration: none;
	text-align:right;
}
table#calendar {
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
table#calendar caption {
	font-weight: bold;
}
table#calendar tr#days th {
	background-color: #aaddaa;
	padding: .3em 1px;
}
table#calendar tr#title th {
	background-color:#88aa88;
}
table#calendar td {
	width: 30px;
	color: #777;
/*	text-align: right; */
	border: 1px solid gray;
	border-color: #BBB #EEE #EEE #BBB;
	vertical-align: top;
}
table#calendar .day7 {
	border-right: 1px solid #BBB;
}
table#calendar .day1, table#calendar .day7 {
	background: #DDD;
}
table#calendar .blank {
	background: #AAA;
	border: 1px solid #AAB;
	border-right: 1px solid #99A;
}
table#calendar .lastweek td {
	border-bottom: 2px solid #AAB;
}
table#calendar .today {
	background: #aaddaa;
/* 	border: 2px solid #99CC99; */
}





/* Style for star ratings */
#star ul.star {
	LIST-STYLE: none; MARGIN: 0; PADDING: 0; WIDTH: 85px; HEIGHT: 20px; LEFT: 60px; TOP: -5px; POSITION: relative; FLOAT: left;
	BACKGROUND: url(media/stars.gif) repeat-x; CURSOR: pointer;
	background-color:inherit;
}

#star li {
	PADDING: 0; MARGIN: 0; FLOAT: left; DISPLAY: block; WIDTH: 85px; HEIGHT: 20px;
	TEXT-DECORATION: none; text-indent: -9000px; Z-INDEX: 20; POSITION: absolute; PADDING: 0;
	background-color:inherit;
}

#star li.curr {
	BACKGROUND: url(media/stars.gif) left 25px;
	background-color:inherit;
}

#star div.user {
	LEFT: 65px; POSITION: relative; FLOAT: left;
}

/* Social Bookmarking */

ul.SocialBookmarkers{
	height: 27px;
	clear: left;
	margin: 0px auto;
	width:310px;
	padding: 0;
	list-style-type:none;
}

ul.SocialBookmarkers li{
	float: left;
	text-decoration:none;
}

ul.SocialBookmarkers li a{
	width: 20px;
	height: 20px;
	margin: 2px 10px 5px 0;
	float: left;
	border: 1px solid #f8f8f7;
	overflow: hidden;
	text-indent:-1000em;
	direction:ltr;
	text-align:left;

}

ul.SocialBookmarkers li a:hover{
	border: 1px solid #838383;
}

ul.SocialBookmarkers a.moreToggler{
	float: left;
}

ul.SocialBookmarkers a.lessToggler{
	float: left;
}

ul.SocialBookmarkers li a.moreToggler{
	width: auto;
	border: none;
	overflow: auto;
	text-indent: 0;
	line-height:20px;
}

ul.SocialBookmarkers li a.Skype{
	background: url("/Media/MatrixBookmarks.gif") no-repeat 0px 0px;
}
ul.SocialBookmarkers li a.Facebook,ul.SocialBookmarkers li a.More{
	background: url("/Media/MatrixBookmarks.gif") no-repeat -20px 0px;
}
ul.SocialBookmarkers li a.Delicious{
	background: url("/Media/MatrixBookmarks.gif") no-repeat -40px 0px;
}
ul.SocialBookmarkers li a.Stumbleupon{
	background: url("/Media/MatrixBookmarks.gif") no-repeat -60px 0px;
}
ul.SocialBookmarkers li a.Netscape{
	background: url("/Media/MatrixBookmarks.gif") no-repeat -80px 0px;
}
ul.SocialBookmarkers li a.Reddit{
	background: url("/Media/MatrixBookmarks.gif") no-repeat -100px 0px;
}
ul.SocialBookmarkers li a.MySpace{
	background: url("/Media/MatrixBookmarks.gif") no-repeat -120px 0px;
}
ul.SocialBookmarkers li a.Hi5{
	background: url("/Media/MatrixBookmarks.gif") no-repeat -140px 0px;
}
ul.SocialBookmarkers li.DiggThis{
	float: right;
	margin: 5px -15px 5px 0;
}

#title
{
	display:block;
	position:absolute; left: 253px; top: 0px;
	text-align:center;
}


#logo
{
	display:block;
	width: 252px;
	height: 218px;
	background: url("./media/ajj-logo-web-matrix.gif") bottom;
	background-repeat:no-repeat;
	position:absolute; left: 0px; top: 0px;
}

#logo:hover
{
	background-position:top;
}

#logo span
{
  display: none;
}

#bodycontent {
	position:absolute; left: 0px; top: 220px;

}

#bodycontent2 {
	position:absolute; left: 0px; top: 220px;

}

#prevtech {
	position:absolute; left: 0px; top: 290px;
	font-size:9px;
	z-index:100;
}

#nexttech {
	position:absolute; right: 0px; top: 290px;
	font-size:9px;
	z-index:110;
}