@charset "utf-8";
/* Link2Lessons multiple layouts structure */
/* August 1st, 2007                        */
/* Roberto Riutort                         */
/* LeapFrog Enterprises                    */

* {
	margin: 0;
	padding: 0;
	border: 0;
}

/* hide from IE mac \*/ 
html {
	min-height: 100%;
	margin-bottom: 1px;
}
/* end hiding from IE5 mac */

body {
	background:#FFF/*#EDF5E6*/;
	font: 11px Arial, Helvetica, sans-serif;
	color: #666;
	width: 100%;
	/*scrollbar-3dlight-color:#B8C2D3;
    scrollbar-arrow-color:#FFF;
    scrollbar-base-color:#6D86B4;
    scrollbar-darkshadow-color:#B8C2D3;
    scrollbar-face-color:#6D86B4;
    scrollbar-highlight-color:#B8C2D3  ;
    scrollbar-shadow-color:#CCC;*/
}

#generic-container {
	width: 850px;  /* this will create a container 850px width */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	background: #FFFFFF;
	border: 0px solid #000000;
}

/************** Navigation Elements *******************/
#header {
	padding: 0px;
	margin: 0px;
	background:#FFF;
	border:0px solid red;
	}
	
#header img {
  	float: left;
  	padding: 0px;
  	min-width: 100px;
  	margin-top: -25px;
  	border:0px solid red;
}
/*/////////////Sign Out, Help Menu ////////*/
#header ul {
  	float: right;
  	padding: 8px 0;
  	list-style-type: none;
  	margin-top: -25px;
  	font-size:11px;
  	border:0px solid red;
}
  
#header li {
  	padding: 0 3px 0 0;
  	margin-right: 5px;
  	float: left;
  	border:0px solid blue;
}
  
#header a {
	display: block;
  	padding: 0 4px;
  	text-decoration: none;
  	color: #0066FF;
  	margin-right: 1px;
  	text-align:right; 
}

/* hide from IE mac \*/ 
#header a {
float: none;
}
/* end hiding from IE5 mac */

#header li a:hover, #header li a:focus {
	color: #FF9900;
}

#header #current {
	color:#999999;
}
  
#header #current a {
  text-decoration: none;
  font-weight: bold;
  color: #cacaca;
}



#header #current a:hover {
	color: #FF9900;
}


/* // Main Menu Tabs Navigation Elements // */

#menu {
      float:left;
      width:100%;
      font-size:12px;
      line-height:normal;
	  border-left:1px solid #FFF;
      }
      
#menu .submenu {
      float:none;
      width:200px;
   	  display: none;
	  position:absolute; 
	  top: 64px; 
   	  left: 50%; 
   	  border:1px solid #FFF;
      }
      
#menu ul {
	  margin:0;
	  padding:0;
	  list-style:none;
      }
#menu li {
      display:inline;
      margin:0;
      padding:0;
	  font-weight:bold;
      }
      
#menu .submenu p {
	  margin:0;
	  padding:0;
      display:block;
	  font-weight:bold;
      }
#menu a {
      float:left;
      background:url("../images/menu_bg.gif") no-repeat left top;
      margin:0;
      padding:0;
      text-decoration:none;
	  width:25%;
	  border:0px solid red;
      }

#menu .submenu a {
	  width:100%;
	  display:block;
}
      
#menu a span {
      float:left;
      display:block;
      background:url("../images/menu_bg.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
	  text-align:center;
	  border-right:1px solid #FFF;
      }

#menu .submenu a span {
      float:none;
      border-right:none;
}
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu a span {float:none;}
    /* End IE5-Mac hack */
#menu a:hover span {
      color:#FFF;
      }
      
#menu .submenu a:hover span {
      color:#FFF;
}
      
#menu a:hover {
      background-position:0% -42px;
      }
      
#menu .submenu a:hover {
      background-position:0% -42px;
}
      
#menu a:hover span {
      background-position:100% -42px;
      }
      
#menu .submenu a:hover span {
      background-position:100% -42px;
}

#menu .current { 
	background:url("../images/menu_bg.gif") repeat-x 0% -42px;
	} 

#title-bar {
	height: 40px;
	margin-top:6px;
	background:#4FAD26 /*url(../images/global/t-left.gif) top left no-repeat*/;
	width:100%;
	border:0px solid red;
	
}

#title-bar #page-title {
	font:bold 102% Arial,Geneva,sans-serif; /* this overrides the text-size. */
	margin-left:10px;
	color:white;
	border:0px solid red;
	padding-top: 8px;
}



/* Layout the Sign in pages title and logo*/
#bgTile-container #title-bar {
	height:75px;
	margin-top:0px;
	width:100%;
	background:url(../images/global/t-left.gif) top left no-repeat;/*#4FAD26 */
	border:0px solid red;
}

#bgTile-container #title-bar #page-title {
	font:bold 102% Arial,Geneva,sans-serif; /* this overrides the text-size. */
	padding:25px 0 0 10px;
	color:white;
	width:80%;
}

#bgTile-container #title-bar .logo {
	padding-top:15px;
	padding-bottom:3px;
	width:85px;
	float:right;
	background:url(../images/global/t-right.gif) top right no-repeat;
	border:0px solid red;
}

/*Use in the text below headers*/
#title-bar  .introTx {
	font-size:15px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	margin-bottom:15px;
}


/* //Footer// */
#footer {
  	padding:20px 0;/* this padding for top and bottom. If an image is used we may want to remove the padding. */
  	line-height: 10px;
  	text-align:center; /* this overrides the text-align: center on the body element. */
  	border:0px solid red;
}

#footer ul {
  	list-style-type: none;
  	margin:0px 10px;
  	border:0px solid red;
  
}
  
#footer li {
	padding: 0 2px 0 0;
  	margin-right: 2px;
  	display: inline;
  	border:0px solid blue;
  
}
  
#footer a {
	padding: 0;
	text-decoration: none;
	color: #0066FF;
	margin-right: 1px;
}

/* hide from IE mac \*/ 
#footer a {
	float: none;
}
/* end hiding from IE5 mac */

#footer li a:hover, #foot li a:focus {
	color: #FF9900;
}

#footer-note {
	clear:both;
 	color:#666666;/* this overrides the text color on the element. */
}

#footer-note a {
	clear:both;
	color:#666666;
	text-decoration:underline;
}

#footer-note a:hover {
	color: #FF9900;
}

#footer-note ul {
  	margin-top:10px;
}
/*********** Close Main Navigation Elements *************/

.oneColCtr #container {
	width: 800px;  /* this will create a container 800px width */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	background: #FFFFFF;
	border: 0px solid #000000;
}
.oneColCtr #header {
	padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. 
					If an image is used in the #header instead of text, we may want to remove the padding. */
	padding-top:30px;
	padding-bottom:10px;
}

.oneColCtr #mainContent {
	padding: 0; /* padding is the space inside the div box and margin is the space outside the div box */
	background: #FFFFFF;
}

.oneColCtr #centeredContent {
	border: 0px solid red;
	margin: 0px 10px;
	padding: 0px 10px; /* padding is the space inside the div box and margin is the space outside the div box */
}

/*/////////////Right Column Layout ///////////////////// */
/*/////////////////////////////////////////////////////*/
.twoColRgt #container {
	width: 800px;  /* this will create a container 800px width */
	margin: 0 auto; /* the auto margins (in conjunction with a width above) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	background: #FFFFFF;
	border: 0px solid #000000;
}

.twoColRgt #header {
	padding-top:30px;
	padding-bottom:10px;
}

/* Sidebar1:
1. since we are working in percentages, it's best not to use padding on the sidebar. It will be added to the width for standards compliant browsers creating an unknown actual width. 
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColRgt #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If we need more predictable results, we may choose to change to pixel sized columns.
*/
.twoColRgt #sidebar1 {
	float: right; /* since this element is floated, a width must be given */
	width: 24%; 
	/*background: #FFF;  the background color will be displayed for the length of the content in the column, but no further */
	padding-top: 15px 0; /* top and bottom padding create visual space within this div  */
	border:0px dotted red;
}

.twoColRgt #sidebar2 {
	float: right; /* since this element is floated, a width must be given */
	width: 35%; 
	/*background: #FFF;  the background color will be displayed for the length of the content in the column, but no further */
	padding-top: 15px 0; /* top and bottom padding create visual space within this div  */
	margin-right:10px;
	border:0px solid blue;
}

.twoColRgt #sidebar1 h3, .twoColRgt #sidebar1 p ,.twoColRgt #sidebar2 h3, .twoColRgt #sidebar2 p{
	margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
	margin-right: 10px;
}


/* MainContent:
1. the space between the mainContent and sidebar1 is created with the right margin on the mainContent div.  No matter how much content the sidebar1 div contains, the column space will remain. You can remove this right margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 430px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
*/
.twoColRgt #mainContent { 
	margin: 0 26% 0 10px; /* the left margin should mirror the margin on the header and footer for proper alignment. */
	text-align:left;
	border:0px solid red;
} 
/* Layout the Sign in pages*/
.twoColRgt #mainContent2 { 
	margin: 0 40.2% 0 20px;
	text-align:left;
	border:0px dotted green;
}
.twoColRgt #mainContent100 { 
	margin: 0 10px 0 20px; /* the left margin should mirror the margin on the header and footer for proper alignment. */
	text-align:left;
	border:0px dotted green;
}

}
.twoColRgt #mainContentR_ { 
	margin: 0 0px 0 0px; /* the left margin should mirror the margin on the header and footer for proper alignment. */
	text-align:left;
	border:0px dotted red;
}
/* used in enter-account-info.jsp */

/* /////////// Sign In screens /////////////*/
/* Overrides the footer element. */
.twoColRgt #footer-note2 {
	clear:both;
 	color:#666666;/* this overrides the text color on the element. */
	float:right;
	width:50%;
	text-align:right;
	padding-right:10px;
	border:0px solid red;
}

/*/////////////Left Column Layout ///////////////////// */
/*/////////////////////////////////////////////////////*/

.twoColLftLiq #container { 
	width: 800px;  /* this will create a container 800px width */
	margin: 0 auto; /* the auto margins (in conjunction with a width above) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	background: #FFFFFF;
	border: 0px solid #000000;
}

.twoColLftLiq #header { 
	padding-top:30px;
	padding-bottom:10px;
} 

.twoColLftLiq #sidebar1 {
	float: left; /* since this element is floated, a width must be given */
	width: 28%; 
	background: ; /* the background color will be displayed for the length of the content in the column, but no further */
	padding-top: 15px 0; /* top and bottom padding create visual space within this div  */
	border:0px solid #DADADA;
}

.twoColLftLiq #sidebar2 {
	float: left; /* since this element is floated, a width must be given */
	width: 50%; 
	background: #FFF; /* the background color will be displayed for the length of the content in the column, but no further */
	padding-top: 0px 0; /* top and bottom padding create visual space within this div  */
	border:0px solid red;
}

.twoColLftLiq #sidebar3 {
	float: left; /* since this element is floated, a width must be given */
	width: 49%; 
	background: #FFF; /* the background color will be displayed for the length of the content in the column, but no further */
	padding-top: 15px 0; /* top and bottom padding create visual space within this div  */
	border:0px solid red;
}
.twoColLftLiq #sidebar1 h3, .twoColLftLiq #sidebar1 p, .twoColLftLiq #sidebar2 p {
	margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
	margin-right: 10px;
}

/* Tips for mainContent:
1. the space between the mainContent and sidebar1 is created with the right margin on the mainContent div.  No matter how much content the sidebar1 div contains, the column space will remain. Remove this right margin if we want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 430px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
*/
.twoColLftLiq #mainContent { 
	width: 71%;
	text-align:left;
	border:0px dotted green;
	float: right;
} 

.twoColLftLiq #mainContent50 { 
	margin: 0px 0px 0px 50.2%;
	padding:0px; 
	text-align:left;
	border:0px dotted green;
}



/*/////////////end Left Column Layout ///////////////////// */
/*/////////////////////////////////////////////////////*/

/* Miscellaneous classes for reuse */
.alignMiddle {
	vertical-align: middle;	
}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}

.floatright { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
}
.floatleft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 0px;
}

.menuSpacer {
	margin-top: 10px;	
}

/*container for use when floating submit buttons*/  
.buttonContainer {
	height:20px;
	padding:10px;	
}
/*/////////////Three Column Layout ///////////////////// */
/*/////////////////////////////////////////////////////*/
.thrColLiqCon #container { 
	width: 800px;  /* this will create a container of the browser width */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
} 
.thrColLiqCon #header { 
	padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 

/* Sidebars:
1. Since we are working in percentages, it's best not to use side padding on the sidebars. It will be added to the width for standards compliant browsers creating an unknown actual width. 
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".thrColLiqCon #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
*/
.thrColLiqCon #sidebar1 {
	float: left; /* this element must precede in the source order any element you would like it be positioned next to */
	width: 22%; /* since this element is floated, a width must be given */
	background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 15px 0; /* top and bottom padding create visual space within this div  */
}
.thrColLiqCon #sidebar2 {
	float: right; /* this element must precede in the source order any element you would like it be positioned next to */
	width: 23%; /* since this element is floated, a width must be given */
	background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 15px 0; /* top and bottom padding create visual space within this div */
}
.thrColLiqCon #sidebar1 p, .thrColLiqCon #sidebar1 h3, .thrColLiqCon #sidebar2 p, .thrColLiqCon #sidebar2 h3 {
	margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
	margin-right: 10px;
}

/* MainContent:
1. the space between the mainContent and sidebars is created with the left and right margins on the mainContent div.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 300px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
*/
.thrColLiqCon #mainContent { 
	margin: 0 24% 0 23.5%; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
}