/***** 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: url(../images/tab_b.png) repeat-x 0 0;
  height: 42px;
  position: relative;
  top: 0;
  z-index: 999;
}

.tab ul.login {
  display: block;
  position: relative;
  float: right;
  clear: right;
  height: 42px;
  width: auto;
  font-weight: bold;
  line-height: 42px;
  margin: 0;
  right: 150px;
  color: white;
  font-size: 70%;
  text-align: center;
}

.tab ul.login li.left {
  background: url(../images/tab_l.png) no-repeat left 0;
  height: 42px;
  width: 30px;
  padding: 0;
  margin: 0;
  display: block;
  float: left;
}

.tab ul.login li.right {
  background: url(../images/tab_r.png) no-repeat left 0;
  height: 42px;
  width: 30px;
  padding: 0;
  margin: 0;
  display: block;
  float: left;
}

.tab ul.login li {
  text-align: left;
  padding: 0 6px;
  display: block;
  float: left;
  height: 42px;
  background: url(../images/tab_m.png) repeat-x 0 0;
}

.tab ul.login li a {
  color: #15adff;
}

.tab ul.login li a:hover {
  color: white;
}

.tab .sep {
  color: #414141;
}

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

.tab a.open {
  background: url(../images/bt_open.png) no-repeat left 0;
}
.tab a.close {
  background: url(../images/bt_close.png) no-repeat left 0;
}
.tab a:hover.open {
  background: url(../images/bt_open.png) no-repeat left -19px;
}
.tab a:hover.close {
  background: url(../images/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;
  width: 100%;
  z-index: 999;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#panel {
  width: 100%;
  height: 270px;
  color: #fff;
  background: #272727;
  overflow: hidden;
  position: relative;
  z-index: 3;
  display: none;
}

#panel h1 {
  font-size: 1.3em;
  padding: 5px 0 10px;
  margin: 0;
  color: white;
}

#panel h2 {
  font-size: 18px;
  padding: 10px 0 5px;
  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: 960px;
  margin: 0 auto;
  padding-top: 15px;
  text-align: left;
  font-size: 1em;
}

#panel .content .left {
  width: 280px;
  float: left;
  padding: 0 15px;
  border-left: 1px solid #333;
}

#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;
  font-size: 13px;
}

#panel .content input.field {
  margin-right: 5px;
  margin-top: 4px;
  width: 200px;
  height: 16px;
  background: #f0f8ff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1),
    0 2px 2px rgba(0, 0, 0, 0.1) inset;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1),
    0 2px 2px rgba(0, 0, 0, 0.1) inset;
  border: 1px solid #c5c5c5;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

#panel .content input:focus.field {
  border: 1px solid #0066ff;
  box-shadow: 0 0 5px #0066ff, 0 2px 2px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 0 5px #0066ff, 0 2px 2px rgba(0, 0, 0, 0.1) inset;
  -webkitkit-box-shadow: 0 0 5px #0066ff, 0 2px 2px rgba(0, 0, 0, 0.1) inset;
}
#panel .content input:hover.field {
  border: 1px solid #0066ff;
  box-shadow: 0 0 5px #0066ff, 0 2px 2px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 0 5px #0066ff, 0 2px 2px rgba(0, 0, 0, 0.1) inset;
  -webkitkit-box-shadow: 0 0 5px #0066ff, 0 2px 2px rgba(0, 0, 0, 0.1) inset;
}

/* 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;
  font-size: 12px;
}

#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.85em;
  text-decoration: underline;
}