/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}


/* Override KC stylesheet so header area can fit
==================================================================================================*/
#header {float:right;text-align:left;display:inline;color:#999999;margin:0 0 0 0;padding:0 0 0 0;width:777px;height:59px;
}
#header ul {padding-top:0;display: inline;float:left;}


/* Override LEARNING INSTITUTE stylesheet so header area can fit
==================================================================================================*/
#memberLoginHeader {float:none;width:776px;height:59px;}
#loginarea {float:none;}

/* Override MLCOP stylesheet so header area can fit
==================================================================================================*/
#memberLoginHeaderMLCOP {float:right;width:640px;height:59px;}


/* Panel Tab/button */
.tab {
height: 42px;
position: relative;
top: 0;
z-index: 999;
}

/* Tabs
==================================================================================================*/
.tab ul.login {
display:block;	
position: relative;
float: left;
height: 42px;
width: auto !important;
width: auto; /* Here because IE6 has a problem */
font-weight: bold;
line-height: 26px;
margin: 0;
font-size: 80%;
text-align: center;
padding:0;
overflow:hidden;
}

.tab ul.login li.left { /* ======// Left end cap for orange tabs */
background: url(/includes/login-panel/tab_l-o.png) no-repeat left 0;
height: 42px;
width: 7px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li.leftConnect { /* ======// Middle section between black and blue tabs */
background: url(/includes/login-panel/tab_l-o-connect.png) no-repeat left 0;
height: 42px;
width: 10px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li.leftConnectBlue { /* ======// Middle section between blue and green tabs */
background: url(/includes/login-panel/tab_l-bu-connect.png) no-repeat left 0;
height: 42px;
width: 10px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li.leftDark { /* ======// Left end cap for black tabs */
background: url(/includes/login-panel/tab_l-b.png) no-repeat left 0;
height: 42px;
width: 7px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li.right { /* ======// Right end cap for blue tabs */
background: url(/includes/login-panel/tab_r-o.png) no-repeat left 0;
height: 42px;
width: 7px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li.rightBlue { /* ======// Right end cap for green tab */
background: url(/includes/login-panel/tab_r-bu.png) no-repeat left 0;
height: 42px;
width: 7px;
padding: 0;
margin: 0;
display: block;
float: left;
}


.tab ul.login li.rightDark { /* ======// Right end cap for black tabs */
background: url(/includes/login-panel/tab_r-o.png) no-repeat left 0;
height: 42px;
width: 7px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li { /* ======// Background for blue tabs */
text-align: left;
padding: 0 5px 0 3px;
display: block;
float: left;
height: 42px;
background: url(/includes/login-panel/tab_m-o.png) repeat-x 0 0;
}

.tab ul.login li.middleDark { /* ======// Background for black tabs */
text-align: left;
padding: 0 5px 0 3px;
display: block;
float: left;
height: 42px;
background: url(/includes/login-panel/tab_m-b.png) repeat-x 0 0;
}

.tab ul.login li.middleBlue { /* ======// Background for green tab */
text-align: left;
padding: 0 5px 0 3px;
display: block;
float: left;
height: 42px;
background: url(/includes/login-panel/tab_m-bu.png) repeat-x 0 0;
}

.tab ul.login li a {
color: #ffffff;
text-decoration:none;
}

.tab ul.login li a:hover {
color: #eeeeee;
text-decoration:none;
}

.tab ul.login li.middleBlue a:link, .tab ul.login li.middleBlue a:visited {
color: #3e6905;
text-decoration:none;
}

.tab ul.login li a:hover.middleBlue {
color: #ffffff;
text-decoration:none;
}

#underTab a:link {
color:#ff0000;
}

.tab .sep {color:#999999}

.tab .sepL {color:#ffcaa7}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
/* padding-left: 30px !important; */
cursor: pointer;
display: block;
position: relative;
top: 3px;
}

/* Used if icons are wanted in the open/close tabs
.tab a.open {background: url(login-panel/bt_open.png) no-repeat left -19px;}
.tab a.close {background: url(login-panel/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(login-panel/bt_open.png) no-repeat left 0;}
.tab a:hover.close {background: url(login-panel/bt_close.png) no-repeat left -19px;}
*/


/* sliding panel */
#toppanel {
position: absolute;   /*Panel will overlap  content */
/*position: relative;*/   /*Panel will "push" the content down */
top: 0;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#panel {
height: 280px;
color: #999999;
/*background-color:#194B96; */
background-color:#026cb6;
background-image:url(/includes/login-panel/panel-edge-fade.jpg);
/* background-position:555px 0; */
background-position:right 0;
background-repeat:repeat-y;
overflow:hidden;
position:relative;
z-index:3;
display:none;
}

#panel h1 {
padding:0 5px 0 0;
font-size: 1.2em;
font-weight:normal;
margin: 0;
/*color: white; */
color:#111111;
}

#panel #leftLog h1 {
color:#ffffff;
}

#panel h2{
font-size: 1.2em;
padding:0 5px 0 0;
margin: 0;
color: white;
}

#panel p.regText {
margin:0;
padding: 0;
font-size:80%;
line-height:1.2em;
/*color:#bad0e6; */
color:#111111;
}

#panel a {
text-decoration: underline;
color: #ffffff;
}

#panel a:hover {
color: #bad0e6;
text-decoration:underline;
}

#panel a-lost-pwd {
display: block;
float: left;
font-size:10px;
}

#panel .content {
width: 640px; 
margin: 0 auto;
padding-top: 15px;
text-align: left;
}

.tab, #toppanel, #panel {
width:640px;
}

#leftReg {
width: 350px;
float: left;
padding: 0 0 0 20px;
}

.formFloat {
float:left;
margin:0 5px 0 0;
padding:0;
width:170px;
}

.formFloat2 {
float:left;
margin:0 5px 0 0;
padding:0;
width:210px;
}

/*#panel .content .leftLog { */
#leftLog {
width: 210px;
float: left;
padding: 0 15px;
}

#panel .content .right {
/*border-left: 1px solid #4c73ad; */
border-left:none;
}

#panel .content form {
margin: 0 0 10px 0;
}

/*
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
color:#D6E6F6;
font-size: 80%;
display: block;
}

#panel .content labelReg {
float: left;
padding-top: 8px;
color:#D6E6F6;
font-size: 80%;
display: block;
} */

#panel .content label.grey {
float: left;
/* padding-top: 8px; */
padding-top: 4px;
margin-top:4px;
color:#D6E6F6;
font-size: 80%;
width:190px;
}

#panel .content label.greyLong {
float: left;
padding-top: 8px;
color:#171717;
font-size: 80%;
width:210px; 
}


#panel .content label.greyReg {
float: left;
/* padding-top: 8px; */
padding-top: 4px;
margin-top:4px;
/* color:#D6E6F6; */
color:#004575;
font-size: 80%;
width:120px;
}

#panel .content input.field, #panel .content input.fieldReg {
border: 1px #91b0d5 solid;
background: #ffffff;
margin-right: 5px;
/*margin-top: 4px; */
margin-top:0;
margin-bottom:4px;
color: #333333;
height: 16px;
}

#panel .content input.field {
width: 200px;
}

#panel .content input.fieldReg {
width: 155px;
}

#panel .content input:focus.field, #panel .content input:focus.fieldReg, #panel .content select:focus.fieldReg {
background: #fdfbbe;
}

#panel .content select.fieldReg {
border: 1px #c5d2e5 solid;
background: #ffffff;
margin-right: 5px;
margin-top: 4px;
color: #333333;
height: 20px;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.logButton {
display: block;
float: left;
clear: left;
cursor: pointer;
border: none;
margin: 10px 0;
}

#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
line-height:24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}

#panel .content input.bt_login {
width: 74px;
background: transparent url(/includes/login-panel/bt_login.png) no-repeat 0 0;
}

#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(/includes/login-panel/bt_register.png) no-repeat 0 0;
}

#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}




/* ========================================================================== 
#headerEmbedLogin {
margin:0 1px 0 0;
padding:0;
width:265px;
height:59px;
background-color:#ffffff;
}

#headerEmbedLogin a:link, #headerEmbedLogin a:visited {
color:#ffffff; 
text-decoration:underline;
font-size:9px;
}

#headerEmbedLogin a:hover, #headerEmbedLogin a:active {
color:#ff0000; 
text-decoration:none;
}

#logInName {
margin:5px 0 0 5px;
display:inline-block;
font-size:14px;
font-weight:bold;
color:#ffffff;
width:200px;
height:30px;
overflow:hidden;
}

#logInName p {
margin:0 0 0 0;
padding:0;
line-height:14px;
}

#logInName a:link, #logInName a:visited {
color:#ffffff; 
text-decoration:underline;
font-size:14px;
}

#logInName a:hover, #logInName a:active {
color:#d2e3f5; 
text-decoration:none;
}

.embedLoginTitle {
margin:0 0 0 0;
padding:0;
display:inline-block;
color:#194B96;
font-weight:bold;
}

.embedHelp {
float:right;
padding:2px 0 0 0;
}

#embedLogout {
float:right;
margin:20px 0 0 0;
padding:0;
}

#embedLogout img {
 border:none;
}

#headerEmbedInput, #headerEmbedInput2, #headerEmbedInput3 {
margin:2px 0 0 7px;
/*[margin:2px 0 0 7px;
margin:2px 0 0 5px;]  Chrome/Safari hack for spacing issues 
padding:0;
float:left;
color:#eeeeee;
font-size:10px;
}

#headerEmbedInput input, #headerEmbedInput2 input, #headerEmbedInput3 input {
font-size:10px;
margin-top:3px;
border:none;
background-color:#E8F0FB;
color:#194a96;
}

*/


#loginarea {
/* font:.8em verdana,arial,sans-serif; */
font-family:Verdana, Arial, sans-serif;
font-size:12px;
padding:0px 2px 0px 0px;
color:#454545;
text-align:left;
vertical-align:middle;
width:480px;
height:33px;
/* background-image:url(login-panel/blude-fade.jpg);
background-position:right;
background-repeat:repeat-y; */
}

#loginarea p {
margin-left:10px;
}

#loginarea img {
border:none;
}


#loginarea a, #loginarea a:link, #loginarea a:visited, #loginarea a:active {
color: #ffffff;
text-decoration:none;
}

#loginarea a:hover {
color: #eeeeee;
text-decoration:none;
}




#headerTabs2 {
margin:0 0 0 0;
padding:0 0 0 0;
font-family:Verdana, Arial, sans-serif;
font-size:11px;
color:#454545;
text-align:left;
vertical-align:top;
width:100%;
height:26px;
/* background-image:url(login-panel/blude-fade.jpg);
background-position:right;
background-repeat:repeat-y; */
}



#loginText {
padding:3px 0 0 10px;
}

#headerTabs2 img, #headerTabsOn2 img {
margin:0 0 0 -2px;
padding:0;
}

#headerTabsOn2 {
margin:0 0 0 0;
padding:0;
}

#headerTabsOn2 img {
margin:0 0 0 2px;
padding:0;
}

.loggedIn2 {
font-size:13px;
color:#d55c1d;
margin-bottom:3px;
}

#welcomeString {
position:absolute;
top:36px;
left:170px;
color:#000;
text-align:left;
font-family:Verdana, Arial, sans-serif;
font-size:10px;
}

#renewString2 {
position:absolute;
top:36px;
left:400px;
color:#cd1c17;
text-align:left;
font-family:Verdana, Arial, sans-serif;
font-size:10px;
width:550px; /*changed from 100% so background on "The Port" appeared correctly - KMO */
}

#renewString2 a:link, #renewString2 a:visited, #renewString2Comm a:link, #renewString2Comm a:visited {
color:#000000;
text-decoration:underline;
font-weight:bold;
}

#renewString2 a:hover, #renewString2 a:active, #renewString2Comm a:hover, #renewString2Comm a:active {
color:#cd1c17;
text-decoration:underline;
}

.heyNow {
color:#dc2501;
}





@media screen and (-webkit-min-device-pixel-ratio:0) {
.formFloat {
margin:0 5px 0 0;
}



.helpPanelFit {
height:150px;
}

/*testing community message offset - 3-2011 - KMO */


/*for community ie8 background shifting problem - 3-24-2011 - KMO 
.sectionbody {
	background: url(http://community.asq.org/custom/americansocietyforquality/images/tp_community_bg.gif) #194b96 repeat-y center top
}
*/