/* eLearn@Work Base Stylesheet 
  ELAW green: #89c108
  ELAW grey: #626366
  swong 6/12/2008

*/

@import url('reset-fonts-grids.css');             /*YUI reset, fonts, grids*/

body{
	background-color:#fff;
	font-family:verdana;
	color:#626262;
}

/* DEFAULT FONT STYLES */
a:link {
	color: #626262;
}
a:visited{
	color: #919191;
}
#nav a:visited {
	color: #626262;
}
a:hover, a:active{
	color: #89c108;
}
#nav a:hover {
	color: #89c108;
}
strong {font-weight:bold;}
em {font-style:italic;}
.green {color:#89c108;}

/* PARAGRAPH STYLES */
p {
	line-height:17px; 
	font-size:93%;
	margin-bottom:1.5em;
}

p.totop {
	margin-top:-10px;
	text-align:right;}
p.totop a {
	background: url('/images/backtotop.gif') center left no-repeat;
	padding-left:20px;
}

/* LIST STYLES */
#bd ul, #bd ol {
	font-size:93%;
	padding-left:17px;
	padding-bottom:1.5em;
}

#bd ul ul, #bd ol ol {font-size:100%;}
#bd ul ul ul, #bd ol ol ol {font-size:100%;}

#bd ul li {list-style: disc;}
#bd ol li {list-style: decimal;}

#bd ul.greenbullets li {
	list-style: none;
	background: url('/images/bullet.gif') top left no-repeat; 
	padding-bottom:5px;
	padding-left: 17px; 
	margin-left:-17px;
}
#bd ul.greenbullets {
	position:relative; /*IE bug */
} 

#bd ul.morespace li, #bd ol.morespace li {
	margin-bottom:10px;

}

ul.toc {
	margin-top:-10px;
	margin-bottom:10px;
}
ul.toc li {
	margin-bottom:3px;
}

/* HEADER STYLES */
h1 {
	color:#7e7e7e;
	font-size:153.9%; /*20px*/
	font-weight:normal;
	letter-spacing:2px;
	margin-bottom:5px;
}
h1.solutions {text-indent:23px;	background:url('/images/icon_solutions.gif') 1px no-repeat;}	
h1.demos {text-indent:23px;	background:url('/images/icon_demos.gif') 1px no-repeat;}	
h1.gc {text-indent:23px; background:url('/images/icon_gc.gif') 1px no-repeat;}	
h1.about {text-indent:23px;	background:url('/images/icon_about.gif') 1px no-repeat;}
h1.faq {text-indent:23px; background:url('/images/icon_faq.gif') 1px no-repeat;}
h1.contact {text-indent:23px; background:url('/images/icon_contact.gif') 1px no-repeat;}
h1.login {text-indent:23px;	background:url('/images/icon_login.gif') 1px no-repeat;}
h1.register {text-indent:23px; background:url('/images/icon_register.gif') 1px no-repeat;}
h1.video {text-indent:32px; background:url('/images/icon_video.gif') 1px no-repeat;}

h2 {
	color:#89c108;
	font-size:131%; /*17px*/
	font-weight:normal;
	letter-spacing:2px;
	margin-bottom:5px;
	margin-top:25px;
}
form h2 { font-size:140%;}
h2.top {margin-top:0}

h3 {
	font-size:100%;
	text-indent:15px;
	background:url('/images/carrot.gif') 2px no-repeat;
	font-weight:bold;
}
h3.section {
	font-size:146.5%;
	color:#b4b4b4;
}
h3 span {font-weight:normal;}

h4 {font-weight:bold; color:#89c108;}

.corner {
	background:transparent url('/images/corner.jpg') no-repeat;
	padding-left:20px;
	padding-top:17px;
	/* position:relative; IE rendering bug */
}
.nocorner {
	padding-left:20px;
	padding-top:68px;
}

/* POSITIONING ELEMENTS */
.left {padding-right:20px;}
div.floatleft {float:left;}
p.floatright {float:right;}
.demoleft {
  margin-left:113px;
  %height: 1%; /*holly hacked to fix part of a resetting background bug in IE6 - swong*/
  %background-color: #fff; /*setting a background masks the rest of the resetting background bug in IE6 - swong*/
}

img.floatleft {
	float:left;
	margin-right:13px;
	margin-bottom:13px;
}
img.floatright {
	float:right;
	margin-left:13px;
	margin-bottom:13px;
}

/*LAYOUT STYLES */

#elaw-static  {width:100%;} 


#elaw-logo, #login,  #navposition, #bd, #ft, #copy, #billboardPosition, #hd-index{
	width: 750px;
	margin-left:auto;
	margin-right:auto;
	padding-left:50px;
	padding-right:50px;
}

#hd-index{
	overflow: hidden;
	padding-top: 40px;
	margin-bottom: 20px;
}

#elaw-logo{
  margin:40px auto 10px auto;
}

#elaw-logo-index{
	float: left;
}

#login {
	text-align:right;
	margin-bottom:7px;
	font-size: 85%;
}

#login-index {
	float: right;
	text-align:right;
	font-size: 85%;
	margin-top: 35px;
	padding-right:50px;
}

#navposition {position:relative;}
#navposition ul{margin-left: 2px;}

#navbkgd {  
	background: url('../images/nav_grad_bg.png') top left repeat-x;  
	border-top:1px solid #626262;
	border-bottom:1px solid #626262;
	height: 104px;
}

#sectionHead{
	position: absolute;
	width: auto;
	height: auto;
	z-index: 0;
	top: 50px;
	right:50px;
}

#nav{             
  position: relative;
  padding: 10px 0 0 5px;
  overflow: hidden;
  font-size: 85%;
}

#nav ul{
	position: relative;
	z-index: 10;
	left: -24px;
}

#nav li{
  display: inline;
  position: relative;
  width: 90px;
  float: left;
  padding: 0;
  margin: 0;
  text-align: center;
  overflow: hidden;
  padding-bottom: 70px;                         /*push out the bottom of the "hit" area to cover the buttons*/
  letter-spacing: -.05em;
}

#nav li.topnav{		/*topnav is the alternate nav version on the index page*/
	width: 85px;
	padding-bottom: 15px;
	padding-top:40px;
}
 
#nav img, #nav img.reflection{
  position: absolute;
  display: block;
  width: 29px;
  left: 50%;           /* start the icon image at the center of this LI*/
  margin-left: -15px;   /*scoot it left by half its width, effectively centering it*/
}

#nav img{top: 25px;}
#nav img.reflection{top: 53px;}

#nav li.topnav img{
	margin-left: -13px;
	position: absolute;
	display: block;
	top:7px;
}

#bd{                                   /*primary body container*/
	margin-top:40px;
	position: relative;
}                  


/* GLOBAL ELEMENTS */
#bd .breadcrumbs{
	position: absolute;
	top: -35px;
	left: 35px;
	overflow: hidden;
	font-size: 85%;
}

#bd .breadcrumbs li{
	display: inline;
	float: left;
	margin-right: .5em;
}

a#skipnav {
	margin-left:-999px!important;
	text-decoration:none;
	border:none;
	background:transparent;
	position:absolute;
}


/* HOME PAGE STYLES */
#billboard{				/* top featured area on home page */
	position: relative;
	height: 220px;
	_height: 210px;
	background: #ccc url("/images/elaw_index_headerBG.png") top left repeat-x;
	border-top: 1px solid #686868;
	border-bottom: 1px solid #686868;
}

#billboard .yui-u{
	position: relative;
	height: 220px;
}

#billboard .first{overflow: hidden;}

.textlayer {				/*text layer under flash*/
	position:absolute;
	padding-top:85px;
	font-size:150%;
	color:#999999;
	z-index:0;
}

.flashlayer {				/*flash layer over text*/
	z-index:100;
	position:absolute;
}

#billboard .preview{		/* laptop image on home page */
	position: absolute;
	width: 355px;
	height: 300px;
	left: 0;
	top: -100px;
	z-index: 0;
}

#billboard .previewpane{		/* flash content container in laptop image on home page */
	position: absolute;
	width: 264px;
	height: 182px;
	top:11px; left:46px;
	z-index: 40;
}

#billboard .actions{			/* tabs on home page */
	position: absolute;
	z-index: 40;
	top: 174px;
	left: 0;
	overflow: auto;
}

.actions li{
	display: inline;
	width: 117px;
	height: 46px;
	margin-right: 5px;
	float: left;
	overflow: hidden;
}

.actions a{
	display: block;
	width: 117px;
	height: 47px;
	background: #999 url("/images/elaw_actiontab_bg.png") 0 0 no-repeat;
	text-decoration: none;
	font-weight: bold;
	padding: 7px 0;
}
.actions a:hover{background-position: 0 -47px;}
.actions a.actionLink {color: #fff; text-decoration: none;}
.actions li a img{	/*for the little icon in each tab*/
	float: left;
	margin: 7px 5px 10px 10px;
}


/* FOOTER STYLES */
#ft{
  height: 70px;
  %height:69px; /* should probably figure out why this is doing this but for now- here's the hack */
}

#ftbkgd {
	background: url('../images/foot_grad_bg.png') top left repeat-x; 
	border-top:1px solid #626262;
	border-bottom:1px solid #626262;
	margin-top:50px;
}

.footercontact {

}
.footercontact img.floatleft {
	margin-right:22px;
	margin-top:9px;
	margin-bottom:0;
}
.footercontact div {
	padding-top:11px;
	font-size:77%;
	text-align:left;
	%line-height:115%;
}

.footernav {
	font-size: 85%;
	text-align:right;
	padding-top:27px;
}

.copyright {
	font-size:77%;
	text-align:right;
	margin-bottom:50px;
	padding-top:5px;
}

/* FORM STYLES */
form {
	font-size:93%; 
	margin-top:5px;
}
form .row {
	clear:both;
}
form label.leftcol {
	float:left;
	text-align:right;
	padding-right:10px;
	width:140px;
	margin-bottom:5px;
}
form.login label.leftcol, form.login .leftcol {
	float:left;
	text-align:right;
	padding-right:10px;
	width:85px;
	margin-bottom:5px;
}
form label span{
	color:#89c108;
	font-weight:bold;
}
form .text {
	margin-bottom:5px;
}
form .password {
	margin-bottom:5px;
	_padding:1px 4px;
}
form .select {
	margin-bottom:5px;
}
form .check {
	text-indent:-17px;
	%text-indent:-24px;
	margin-left:12px;
	padding-left:7px;
	display:block;
}
form textarea {
	margin-bottom:5px;
}
form .label {
	float:left;
	text-align:right;
	padding-right:10px;
	width:140px;
	margin-bottom:5px;
}
p.required {
	color:#89c108;
	font-weight:bold;
	margin-bottom:5px;
}
form .checkcontainer {
	width:150px;
	margin-bottom:10px;
	float:left;
}
form .rtcol {
	margin-left:150px;
}
form.login .rtcol {
	margin-left:95px;
}
form .submit {
	border:1px solid #e1e1e1;
	background:url('/images/submit.jpg') left bottom no-repeat;
	padding:0 7px 5px 25px; 
	%padding:0 9px 0 30px;
	text-align: left;
	height:24px;
	margin:10px 8px 0 0;
	_margin-left: 3px;
	_width: 1%;
	%overflow: visible;
	cursor:pointer;
}
form.login .submit {

}
form .reset {
	border:1px solid #e1e1e1;
	background:url('/images/reset.jpg') left bottom no-repeat;
	padding:0 7px 5px 25px;
	%padding:0 0 0 20px;
	height:24px;
	margin:5px 10px 0 0;
	cursor:pointer;
}

/* POPUP STYLES */
#popup {
	width: 550px;
	padding:20px;
	text-align:left;
}

#popup p {
	text-align:justify;
}

#popup h4 {
	font-weight:bold;
}
#popup ul, #popup ol {margin-left:25px;margin-bottom:20px;}
#popup ul li, #popup ol li {list-style-position:inside; list-style:disc;}

/* for centering demos on the popup page */
#demohorizon {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	visibility: visible;
	display: block;
}

#democell {
	margin-left: -320px;
	position: absolute;
	top: -272px;
	left: 50%;
	width: 640px;
	height: 525px;
	visibility: visible;
}
.demolink {
	width:641px;
	text-align:right;
	margin-bottom:5px;
}

/* ALERT AND ERROR MESSAGES */
.messagebox {
	padding: 12px;
	margin:0 0 20px 0;
	border: 2px solid #c18908;
}

.messagebox h3 {
	background:none;
	color:#c18908;
	font-size:131%;
	padding:0;
	margin:0;
	text-indent:0;
}

#bd .messagebox ul{padding-bottom: 0;}

.warning{
  font-weight: bold;
  color: #c18908;
}
ul.spaced-h3 {margin-left:12px;}
ul.spaced-h3 li {padding-top:3px;}
table.elw-video {margin-bottom:15px;}
.elw-video th {background-color:#696969; border:1px solid #696969;color:#c2c2c2;font-weight:bold;padding:10px;}
.elw-video td{border:1px solid #696969;padding:10px;}
#bd .elw-video ul {padding-bottom:0;padding-left:25px;}