/*= Slide Out Login
=======================================================*/
/* The main wrapping div of the slideout tips */
.slideOutTip { float: right; padding: 6px 3px 0px 65px; background: #00aeef url("/images/layout/bg-login-signup.png") left top no-repeat; font-size: .875em; color: #fff; overflow: hidden; height: 30px; z-index: 900 }

/* Applying a CSS3 outer glow on hover */
.slideOutTip:hover {  }

/* The holder for the title and the icon: */
.tipVisible { cursor: pointer; height: 36px; margin: 2px 2px 0 0; }

.tipTitle { width: 85px; font-size: 1em; font-weight: bold; white-space: nowrap; color: #fff; line-height: 1.5em; padding: 2px 5px 0 0; float: right; }

.tipIconDiv { cursor: pointer; height:36px; margin:2px 2px 0 0; float:right; }
.tipIcon {  width: 18px; height: 18px; background-color: #0d56bd; border: 1px solid #0948b5; margin: 2px 8px 0 0; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; float: right; }

/* The plus icon */
.plusIcon { width: 11px; height: 11px; background: url("/images/layout/button-login-plus.gif") no-repeat center center; margin: 4px; -webkit-transition: -webkit-transform 0.2s linear; -moz-transition: -moz-transform 0.2s linear; transition: transform 0.2s linear; }

/* Applying a CSS3 rotation to the opened slideouts*/
.slideOutTip.isOpened { z-index: 900; }
.slideOutTip.isOpened .plusIcon { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }

/* Special rules for the left and top - opening versions */
.openLeft .tipIcon { /* Floating the title and the icon to the right */ margin: 0 0 0 12px; float: right; }
.openLeft .tipTitle{ float: right; padding: 0 0 0 5px; }
.openLeft .slideOutContent { margin: -8px 0 0 73px; height: 0; }
.openLeft.openTop .slideOutContent{	margin: 0 0 0 0; padding: 0; }

.slideOutContent { /* Hiding the div with the slide out content: */ position:relative; display:none; margin:0; padding:0px; z-index:1000;}



/*= Slide Out Content
=======================================================*/
.slide-out-div { width:530px; background: url("/images/layout/bg-login-signup.png") no-repeat; padding-left:25px; }
.slide-out-div.logged-in { width:430px; }

.input-wrap { display: block; float: left; margin: 2px 0 0 5px; }
.login-error { display:inline; float:left; background:none; margin: 8px 0 0 45px; font:normal normal normal 1em arial; line-height:.875em; }

.login-form input[type="text"], .login-form input[type="password"] { height: 18px; padding: 1px; font:normal normal normal 16px arial; letter-spacing: 1.5px; color:#585858; width: 135px;}

.login-form input[type="button"] { background: #0d56bd; border: none; color: #fff; padding: 3px 4px 3px 4px; margin: 0 0 0 10px; cursor: pointer; }

.register { display: block; float: left; margin: 4px 0 0 0; }

.slide-out-div a { font-size: 1em; font-weight:normal; font-family:arial; line-height:.875em; padding:0px; color:#fff; text-decoration:underline; }

.slide-out-div a:hover { text-decoration: underline; color:#D8D8D8; }

.slide-out-div a.forgotcreds { padding:0 5px 0 0; }

.slide-out-div input, .slide-out-div select {
	margin:0px;
}

.mobile-login { display: none; }


/*= Smaller Screens
=======================================================*/
@media only screen and (max-width: 1020px) {

.tipTitle { width: 85px; }
.login-form input[type="text"], .login-form input[type="password"] { height: 18px; padding: 1px; font:normal normal normal 14px arial; letter-spacing: 1.25px; color:#585858; width:125px;}
.login-form input[type="button"] { margin: 0 0 0 7px; }
}

/*= Mobile
=======================================================*/
@media handheld, only screen and (max-width: 767px) {

.mobile-login { min-height: 50px; max-height: 100%; display: block; background: #00aeef; margin: 0 auto 30px auto; padding: 10px 0; }

.input-wrap { display: block; float:none; margin: 8px auto 0 auto; text-align:center; }

.login-form input[type="text"], .login-form input[type="password"] { height: 25px; padding: 0; font-size: 1.25em; }

.login-form input[type="button"] { background: #0d56bd; border: none; font-size: 1em; color: #fff; padding: 3px 5px 4px 4px; margin: 0 5px; cursor: pointer; }

.register { display: block; float: none; margin: 12px 0 0 0; }

.register a { font-size: .875em; line-height: .875em; padding: 0 0 0 15px; color: #fff; text-decoration: none; }

.register a:hover { text-decoration: underline; }

}