File: WIInc/login_panel/css/slide.css

Recommend this page to a friend!
WIInc/login_panel/css/slide.css
File:	`WIInc/login_panel/css/slide.css`
Role:	Auxiliary data
Content type:	`text/plain`
Description:	Auxiliary data
Class:	WICMS Database driven content management system with PDO
Author:	By Jules Warner
Last change:	WI CMS I am in process of building up my own cms system, its not quiet complete yet. There are multiple PDO classes, database driven, in process of making an installer package for it. The back end is being built UI with drag and drop, for a simple set up
Date:	7 years ago
Size:	`13,670 bytes`
Download
/* Mobile Layout: 480px and below. */

/***** 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: 1px;
    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: 30px;
  	color: white;
  	font-size: 12px;
	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{
	height: 20px;
	line-height: 11px !important;
	padding-left: 30px !important;
	cursor: pointer;
	display: block;
	width: 100px;
	position: relative;
	top: 11px;
	font-size: 10px;

}

.tab a.close {
	height: 20px;
	line-height: 17px !important;
	padding-left: 30px !important;
	cursor: pointer;
	display: block;
	width: 100px;
	position: relative;
	top: 11px;
	font-size: 12px;

}

.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: auto;
	color: #999999;
	background: #272727;
	overflow: hidden;
	position: relative;
	z-index: 3;
	display: none;
}

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

#panel h2{
	font-size: 1.2em;
	padding: 10px 0 5px;
	margin: 0;
	color: white;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
}

#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: 0.85em;
}

#panel .content .left {
	width: 31%;
	float: left;
	padding: 0 15px;
	border-left: 1px solid #333;
		visibility: hidden;
	display: none;
}

.modal-body {
  width: 64%;
}


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

#panel .content .right {
	border-right: 1px solid #333;
	margin-left: 84px;
}

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

#panel .content label {
  float: left;
  padding-top: 4px;
  clear: both;
  width: 26%;
  display: block;
}

#panel .content input.field {
	border: 1px #1A1A1A solid;
	background: #414141;
	margin-right: 5px;
	margin-top: 4px;
	width: 180px;
	color: white;
	height: 25px;
}

#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;
}


/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

/***** 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: 1px;
    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: 12px;
	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{
	height: 20px;
	line-height: 11px !important;
	padding-left: 30px !important;
	cursor: pointer;
	display: block;
	width: 100px;
	position: relative;
	top: 11px;
	font-size: 10px;

}

.tab a.close {
	height: 20px;
	line-height: 17px !important;
	padding-left: 30px !important;
	cursor: pointer;
	display: block;
	width: 100px;
	position: relative;
	top: 11px;
	font-size: 12px;

}

.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: auto;
	color: #999999;
	background: #272727;
	overflow: hidden;
	position: relative;
	z-index: 3;
	display: none;
}

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

#panel h2{
	font-size: 1.2em;
	padding: 10px 0 5px;
	margin: 0;
	color: white;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
}

#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: 0.85em;
}

#panel .content .left {
	width: 31%;
	float: left;
	padding: 0 15px;
	border-left: 1px solid #333;
	visibility: visible;
	display: block;
}

.modal-body {
  width: 100%;
}


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

#panel .content .right {
	border-right: 1px solid #333;
	margin-left: 84px;
}

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

#panel .content label {
  float: left;
  padding-top: 4px;
  clear: both;
  width: 26%;
  display: block;
}

#panel .content input.field {
	border: 1px #1A1A1A solid;
	background: #414141;
	margin-right: 5px;
	margin-top: 4px;
	width: 180px;
	color: white;
	height: 25px;
}

#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;
}

}


/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

/***** 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: 1px;
    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: 12px;
	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{
	height: 20px;
	line-height: 11px !important;
	padding-left: 30px !important;
	cursor: pointer;
	display: block;
	width: 100px;
	position: relative;
	top: 11px;
	font-size: 10px;

}

.tab a.close {
	height: 20px;
	line-height: 17px !important;
	padding-left: 30px !important;
	cursor: pointer;
	display: block;
	width: 100px;
	position: relative;
	top: 11px;
	font-size: 12px;

}

.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: auto;
	color: #999999;
	background: #272727;
	overflow: hidden;
	position: relative;
	z-index: 3;
	display: none;
}

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

#panel h2{
	font-size: 1.2em;
	padding: 10px 0 5px;
	margin: 0;
	color: white;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
}

#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: 0.85em;
}

#panel .content .left {
	width: 31%;
	float: left;
	padding: 0 15px;
	border-left: 1px solid #333;
	visibility: visible;
	display: block;
}

.modal-body {
  width: 100%;
}


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

#panel .content .right {
	border-right: 1px solid #333;
	margin-left: 84px;
}

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

#panel .content label {
  float: left;
  padding-top: 4px;
  clear: both;
  width: 26%;
  display: block;
}

#panel .content input.field {
	border: 1px #1A1A1A solid;
	background: #414141;
	margin-right: 5px;
	margin-top: 4px;
	width: 180px;
	color: white;
	height: 25px;
}

#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;
}

}
About us
Advertise on this site
For more information send a message to info at phpclasses dot org.
File: WIInc/login_panel/css/slide.css

Contents
