﻿/*
Name: Sliding Login Panel with jQuery 1.3.2
Author: Jeremie Tisseau
Author URI: http://web-kreation.com/
Script URI: http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/
Date: March 26, 2009
Version: 1.0

	The CSS, XHTML and design is released under Creative Common License 3.0:
	http://creativecommons.org/licenses/by-sa/3.0/

*/ 

/***** 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;}

/* Panel Tab/button */
.tab {
  	background:#F37021;
	width:120px;
	height: 15px;
	position:absolute;
	left:45%; 
    z-index: 999;
	-moz-border-radius-bottomright:8px;
	-moz-border-radius-bottomleft:8px;
	-webkit-border-bottom-left-radius:8px;
	-webkit-border-bottom-right-radius:8px;
	font-size:11px;
}

.tab ul.login {
  	height: 15px;
  	font-weight: bold;
	margin: 0;
	padding:0;
  	color: white;
  	font-variant:small-caps;
}

.tab ul.login li {
  	list-style-type:none;
  	padding:0 0 0 0;
	float: left;
	height: 15px;
	margin:-3px 0 0 0;
}

.tab ul.login li a {
	color: #fff; font-family: arial; text-decoration:none;
}

.tab ul.login li a:hover {
	text-decoration:underline;
}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
	height: 20px;
	line-height: 20px !important;
	padding-left: 0px !important;
	cursor: pointer;
	display: block;
	width: 120px;
	position: relative;
	top: 0px; text-align:center
}

#toppanel {
    position: absolute;   /*Panel will overlap  content */
    /*position: relative;*/   /*Panel will "push" the content down */
    top:-20px;
    left:0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin:0 auto 0 auto;
}

#panel {
	width: 916px;
	height: auto;
	margin:0 auto;
	padding:20px;
	color: #999999;
	background:#58595B;
	overflow: hidden;
	position: relative;
	z-index: 3;
	display: none;
	border:solid 2px #F37021;
	border-top:none;
	-moz-border-radius-bottomleft:8px;
	-webkit-border-bottom-left-radius:8px;
	-moz-border-radius-bottomright:8px;
	-webkit-border-bottom-right-radius:8px;
	/*khtml, Old Safari*/ -khtml-opacity:0.95; /*Mozilla, Netscape*/-moz-opacity:0.95; /*FX, Safari, Opera*/opacity:0.95;
}

#panel h1 {
	font-size: 1.8em;
	padding:0 0 15px 0;
	margin: 0;
	color: white;
	font-family:"seagull", georgia, serif;
}

#panel h2{
	font-size: 1.2em;
	margin: 0;
	color: white;
}

#panel p {
	margin: 5px 0;
	padding: 0;
}

#panel a {
	text-decoration: none;
	color: #15ADFF;
}

#panel a:hover {
	color: white;
}

#panel a-lost-pwd {
	display: block;
	float: left;
}

#panel .content {
	width: 920px;
	margin: 0 auto;
	text-align: left;
	font-size:11px;
}

.right {
	width: 400px;
	float: right;
	padding:0 15px 0 15px;
	border-left: 0px solid #333;
}

#panel .content .left {
	width:900px;
	float: left;
	padding: 0;
	margin:0 auto;
}

#panel .content .right {
	border-right: 1px solid #333;
}

#panel .content form {
	margin: 0 0 10px 0;
}

#panel .content label {
	float: left;
	padding-top: 8px;
	clear: both;
	width: 280px;
	display: block;
}

#panel .content input.field {
	border: 1px #1A1A1A solid;
	background: #414141;
	margin-right: 5px;
	margin-top: 4px;
	width: 200px;
	color: white;
	height: 16px;
}

#panel .content input:focus.field {
	background: #545454;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
	display: block;
	float: left;
	clear: left;
	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(../images/bt_login.png) no-repeat 0 0;
}

#panel .content input.bt_register {
	width: 94px;
	color: white;
	background: transparent url(../images/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;
}

.normaltxt{margin:0 0 0 0x; font:normal 12px arial, helvetica, sans-serif; color:#fff;}
.deno{font:bold 12px arial, helvetica, sans-serif; color:#fff;}

.df_fieldset {font:normal 12px myriad, arial, helvetica, sans-serif; color:#fff; border:solid 2px #939598; background-color:#111; margin:20px 0 20px 0; padding:12px 12px 25px 12px;}
.df_row {float:left; clear:both; width:48%; margin:3px 0 12px 0;}
/*.df_fieldlabel {float:left; width:150px; text-align:right; padding:2px 8px 2px 0; font-weight:bold;}
.df_textbox {}
.df_fieldset select {height:22px; padding:3px; width:100px;}*/
/*.df_textbox {height:22px; padding:3px; width:225px;}*/
.df_row + .df_row {float:right; clear:none;}
.df_row + .df_row + .df_row {float:left; clear:left;}
.df_row + .df_row + .df_row + .df_row {clear:both;}
.df_textarea {width:250px; font:normal 11px arial, helvetica, sans-serif; padding:5px; margin-bottom:20px;}
#panel .df_message {color:#fff;}
.df_error {padding:0px 5px 0px 5px; background:#ff0000; color:#fff; -moz-border-radius:5px; -webkit-border-radius:5px; font:normal 12px myraid, arial, helvetica, sans-serif;}
