le css de demo.php
/*
Name: Sliding Login Panel
*/
/***** clearfix *****/
.clear2 {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: 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, .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: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel hh1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}
#panel hh2{
font-size: 1.2em;
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 .contento {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .contento .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .contento .right {
border-right: 1px solid #333;
}
#panel .contento form {
margin: 0 0 10px 0;
}
#panel .contento label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .contento input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}
#panel .contento input:focus.field {
background: #545454;
}
/* BUTTONS */
/* Login and Register buttons */
#panel .contento input.bt_login,
#panel .contento 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 .contento input.bt_login {
width: 74px;
background: transparent url(../images/bt_login.png) no-repeat 0 0;
}
#panel .contento 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;
}
et le css de index.php :
/* =================== Getting the new tags to behave START ====================== */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video { display: block; }
mark, rp, rt, ruby, summary, time { display: inline }
/* ==================== Getting the new tags to behave END ======================= */
/* ========================= Global properties START ============================= */
body {
background: #000;
min-width: 980px;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
line-height: 1em;
color: #bebebe;
}
html {
background: transparent;
min-width: 980px;
height: 100%;
margin: 0;
padding: 0;
outline: 0;
vertical-align: top;
font-size: 100%;
}
div {
border: 0 none;
font-size: 100%;
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top;
}
a {
outline: none;
color: #11b6fb;
}
a:hover {
text-decoration: none;
}
/* ========================= Global properties END =============================== */
/* ========================= Global Structure START ============================== */
#main-tail {
background: url(../images/main-tail.gif) repeat 50% 204px;
}
#main-tail-top {
background: url(../images/main-tail-top.gif) repeat-x 50% 0%;
}
#main-tail-bot {
background: url(../images/main-tail-bot.gif) repeat-x 50% 100%;
}
#main {
width: 970px;
margin: 0 auto;
font-size: 0.75em;
}
header {
position: relative;
height: 217px;
}
section#content {
width: 100%;
}
footer {
height: 123px;
overflow: hidden;
}
/* ========================= Global Structure END ================================ */
/* ====================== Left & Right alignment START =========================== */
.fleft {
float: left;
}
.fright {
float: right;
}
ul.fright {
padding: 0 13px 0 0;
}
.col-1, .col-2, .col-3, .col-4 {
float: left;
overflow: hidden;
}
.block-1, .block-2, .block-3, .block-4 {
float: left;
overflow: hidden;
}
.aligncenter {
padding: 15px 0 0 0;
text-align: center;
}
.wrapper {
width: 100%;
overflow: hidden;
}
.clear {
clear: both;
font-size: 0%;
line-height: 0%;
height: 0;
}
/* ====================== Left & Right alignment END ============================= */
/* ============================== header START =================================== */
header strong {
display: block;
line-height: 1.333em;
font-size: 1em;
font-weight: normal;
color: #f0f0f0;
position: absolute;
top: 71px;
left: 157px;
}
#navi {
background: #11b6fb;
padding: 0 10px 0 14px;
position: absolute;
top: 0;
right: 1px;
}
#navi li {
float: left;
}
#navi li a {
background: #11b6fb;
float: left;
height: 32px;
padding: 0 10px 0 8px;
line-height: 32px;
text-decoration: none;
color: #fff;
}
#navi li a:hover {
color: #000;
}
#type {
position: absolute;
top: 108px;
left: 0;
}
#type li {
float: left;
padding: 0 0 0 1px;
}
#type li a {
float: left;
height: 47px;
overflow: hidden;
padding: 0 9px 0 9px;
line-height: 48px;
font-size: 1.583em;
text-decoration: none;
color: #6b6b6b;
}
#type li.act a {
background: #000;
color: #fff;
}
#type li a:hover {
background: #000;
color: #fff;
}
nav {
position: absolute;
top: 155px;
left: 10px;
}
nav ul {
overflow: hidden;
}
nav ul li {
float: left;
padding: 0 21px 0 0;
line-height: 50px;
font-size: 1em;
text-transform: uppercase;
color: #fff;
}
nav ul li a {
float: left;
height: 49px;
overflow: hidden;
text-decoration: none;
color: #fff;
}
nav ul li a:hover {
color: #11b6fb;
}
nav ul li.act a {
color: #11b6fb;
}
/* =============================== header END ==================================== */
/* ============================= content START =================================== */
#content {
background: url(../images/content.gif) repeat-y 0% 0%;
}
#content #indent {
padding: 13px 16px 16px 14px;
}
#content p {
padding: 0 0 18px 0;
line-height: 1.5em;
font-size: 1em;
color: #bebebe;
}
/* ============================== content END ==================================== */
/* ============================= JS START ===================================== */
#gallery {
position: relative;
width: 938px;
height: 467px;
overflow: hidden;
margin: 0 0 16px 0;
}
#faded {
width: 938px;
height: 467px;
}
ul.pagination {
position: absolute;
top: 0;
right: 0;
}
ul.pagination li {
padding: 0 0 1px 0;
}
ul.pagination li a {
background: url(../images/pagination.gif) no-repeat 0% 0%;
display: block;
width: 206px;
height: 74px;
padding: 10px 25px 32px 40px;
overflow: hidden;
line-height: 1.5em;
font-size: 1em;
text-decoration: none;
color: #8b8b8b;
}
ul.pagination li a.extra {
background: url(../images/pagination-1.gif) no-repeat 0% 0%;
}
ul.pagination li.current a, ul.pagination li a:hover {
background-position: 0% -116px !important;
color: #1b1b1b;
}
ul.pagination li a strong {
display: block;
padding: 0 0 1px 0;
text-transform: uppercase;
color: #11b6fb;
}
ul.pagination li.current a strong, ul.pagination li a:hover strong {
color: #fff;
}
/* ============================== JS END ====================================== */
/* =================== txt, links, lines, titles START =========================== */
h1 {
position: absolute;
top: 39px;
left: 3px;
}
h1 a {
background: url(../images/logo.gif) no-repeat 0% 0%;
display: block;
width: 151px;
height: 45px;
overflow: hidden;
}
h1 a span {
display: none;
}
h2 {
background: #11b6fb;
height: 45px;
margin: 0 0 1px 0;
padding: 0 0 0 19px;
overflow: hidden;
line-height: 42px;
font-size: 1.5em;
text-transform: uppercase;
color: #fff;
}
h3 {
background: #fff;
height: 45px;
margin: 0 0 1px 0;
padding: 0 0 0 18px;
overflow: hidden;
line-height: 44px;
font-size: 1.5em;
text-transform: uppercase;
color: #2f2f2f;
}
h4 {
background: #262626;
height: 45px;
margin: 0 0 1px 0;
padding: 0 0 0 17px;
overflow: hidden;
line-height: 44px;
font-size: 1.5em;
text-transform: uppercase;
color: #fff;
}
h5 {
padding: 0 0 7px 0;
line-height: 1.5em;
font-size: 1em;
text-transform: uppercase;
color: #fff;
}
h6 {
padding: 0 0 7px 0;
line-height: 1.5em;
font-size: 1em;
text-transform: uppercase;
color: #11b6fb;
}
h6 strong {
display: block;
padding: 0 0 20px 0;
}
.link {
background: #fff url(../images/arrow-2.gif) no-repeat 100% 13px;
float: right;
height: 31px;
padding: 0 18px 0 10px;
line-height: 28px;
font-weight: bold;
text-decoration: none;
color: #262626;
}
.link:hover {
background: #bebebe url(../images/arrow-2.gif) no-repeat 100% 13px;
}
.list {
overflow: hidden;
}
.list li {
background: url(../images/marker.gif) no-repeat 0% 9px;
padding: 0 0 0 12px;
line-height: 1.917em;
font-size: 1em;
color: #000;
}
.list li a {
color: #000;
}
.list-1 {
width: 100%;
padding: 0 0 19px 0;
overflow: hidden;
}
.list-1 li {
float: left;
width: 234px;
padding: 0 1px 0 0;
}
.list-1 li.last {
padding: 0;
}
.list-1 li a {
background: #2f2f2f;
display: block;
padding: 17px 20px 18px 19px;
line-height: 1.5em;
font-size: 1em;
text-decoration: none;
color: #bebebe;
}
.list-1 li a strong {
display: block;
padding: 0 0 10px 1px;
text-transform: uppercase;
color: #11b6fb;
}
.list-1 li a b {
background: url(../images/arrow.gif) no-repeat 100% 6px;
padding: 0 7px 0 7px;
color: #fff;
}
.list-1 li.extra a {
background: #262626;
}
.list-1 li a:hover {
background: #fff;
color: #6d6d6d;
}
.list-1 li a:hover b {
background: url(../images/arrow-1.gif) no-repeat 100% 6px;
color: #161616;
}
.list-2 {
width: 100%;
overflow: hidden;
}
.list-2 li {
width: 100%;
padding: 0 0 1px 0;
overflow: hidden;
vertical-align: top;
}
.list-2 li img {
float: left;
}
.list-2 li a {
background: #2f2f2f;
display: block;
width: 194px;
min-height: 108px;
height: auto !important;
height: 108px;
padding: 16px 20px 10px 21px;
float: left;
line-height: 1.5em;
font-size: 1em;
text-decoration: none;
color: #bebebe;
}
.list-2 li a strong {
display: block;
padding: 0 0 7px 0;
text-transform: uppercase;
color: #11b6fb;
}
.list-2 li a b {
background: url(../images/arrow.gif) no-repeat 100% 6px;
padding: 0 7px 0 7px;
color: #fff;
}
.list-2 li.extra a {
background: #262626;
}
.list-2 li a:hover {
background: #fff;
color: #6d6d6d;
}
.list-2 li a:hover b {
background: url(../images/arrow-1.gif) no-repeat 100% 6px;
color: #161616;
}
.list-3 {
overflow: hidden;
}
.list-3 li {
width: 100%;
padding: 0 0 1px 0;
overflow: hidden;
vertical-align: top;
}
.list-3 li a {
background: #11b6fb;
display: block;
min-height: 119px;
height: auto !important;
height: 119px;
padding: 15px 19px 0 19px;
line-height: 1.5em;
font-size: 1em;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
color: #fff;
}
.list-3 li a:hover {
background: #fff;
color: #11b6fb;
}
.list-4 {
width: 100%;
overflow: hidden;
}
.list-4 li {
width: 100%;
padding: 0 0 1px 0;
overflow: hidden;
vertical-align: top;
}
.list-4 li a {
background: #2f2f2f;
display: block;
min-height: 109px;
height: auto !important;
height: 109px;
padding: 15px 20px 10px 18px;
line-height: 1.5em;
font-size: 1em;
text-decoration: none;
color: #bebebe;
}
.list-4 li a strong {
display: block;
padding: 0 0 8px 0;
text-transform: uppercase;
color: #fff;
}
.list-4 li a b {
background: url(../images/arrow-3.gif) no-repeat 100% 6px;
padding: 0 7px 0 7px;
color: #11b6fb;
}
.list-4 li.extra a {
background: #262626;
}
.list-4 li a:hover strong {
color: #11b6fb;
}
.list-5 {
overflow: hidden;
}
.list-5 li {
background: url(../images/marker-1.gif) no-repeat 0% 9px;
padding: 0 0 0 12px;
line-height: 1.917em;
font-size: 1em;
color: #11b6fb;
}
.list-5 li a {
color: #11b6fb;
}
/* ==================== txt, links, lines, titles END ============================ */
/* ============================= forms START ===================================== */
#contact-form {
width: 100%;
overflow: hidden;
}
#login-form {
width: 342px;
height: 23px;
overflow: hidden;
position: absolute;
top: 44px;
right: 0;
}
#login-form b {
background: url(../images/login-input.gif) no-repeat 0% 0%;
display: block;
width: 83px;
height: 23px;
padding: 0 2px 0 0;
overflow: hidden;
float: left;
font-weight: normal;
}
#login-form b input {
background: none;
width: 69px;
height: 13px;
padding: 5px 7px 5px 7px;
border: none;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.917em;
color: #b8b8b8;
}
#login-form input#login-submit {
background: #f2f2f2;
width: 43px;
height: 23px;
border: none;
float: left;
margin: 0 7px 0 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.917em;
font-weight: bold;
color: #171717;
cursor: pointer;
}
#login-form span {
float: left;
margin: -1px 0 0 0;
line-height: 1.091em;
font-size: 0.917em;
color: #f2f2f2;
}
#login-form span a {
text-decoration: none;
color: #f2f2f2;
}
#login-form span a:hover {
color: #b8b8b8;
}
#login-form em {
display: block;
width: 122px;
float: left;
line-height: 1.091em;
font-size: 0.917em;
font-style: normal;
color: #11b6fb;
}
#login-form em a {
text-decoration: none;
color: #f2f2f2;
}
#login-form em a:hover {
color: #b8b8b8;
}
#search-form {
background: url(../images/search-input.gif) no-repeat 0% 0%;
width: 263px;
height: 23px;
overflow: hidden;
position: absolute;
top: 83px;
right: 1px;
}
#search-form input {
background: none;
width: 198px;
height: 13px;
padding: 5px 7px 5px 7px;
border: none;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.917em;
color: #b8b8b8;
}
#search-form a {
background: #11b6fb;
width: 49px;
height: 23px;
overflow: hidden;
float: left;
margin: 0 0 0 2px;
line-height: 22px;
font-size: 0.917em;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #fff;
}
#search-form a:hover {
color: #000;
}
/* ============================== forms END ====================================== */
/* ============================= other START ===================================== */
.pic-indent {
margin: 0 0 26px 0;
}
.info-box {
background: #262626;
margin: 0 0 1px 0;
}
.info-box .inner {
padding: 28px 20px 12px 20px;
}
.info-box-1 {
background: #11b6fb;
width: 100%;
overflow: hidden;
margin: 0 0 1px 0;
}
.info-box-1 .inner {
padding: 28px 20px 31px 19px;
}
.info-box-1 p {
padding: 0 0 14px 0 !important;
line-height: 1.5em !important;
font-size: 1em !important;
color: #fff !important;
}
.info-box-2 {
background: #fff;
width: 100%;
overflow: hidden;
margin: 0 0 1px 0;
}
.info-box-2 .inner {
padding: 15px 20px 33px 19px;
}
.privacy {
background: #262626;
padding: 28px 30px 21px 20px;
}
.privacy dl {
overflow: hidden;
}
.privacy dl dt {
padding: 0 0 12px 0;
line-height: 1.5em;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
color: #11b6fb;
}
.privacy dl dt a {
text-decoration: none;
color: #11b6fb;
}
.privacy dl dt a:hover {
text-decoration: underline;
}
.privacy dl db {
padding: 0 0 12px 0;
line-height: 1.5em;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
color: #11b6fb;
}
.privacy dl db a {
text-decoration: none;
color: #11b6fb;
}
.privacy dd {
padding: 0 0 22px 0;
line-height: 1.5em;
font-size: 1em;
color: #bebebe;
}
/* ============================== other END ====================================== */
/* ============================ footer START ===================================== */
footer .inner {
padding: 41px 20px 0 13px;
}
footer strong {
float: right;
line-height: 1.5em;
font-size: 1em;
color: #fff;
}
footer strong a {
text-decoration: none;
color: #11b6fb;
}
footer strong a:hover {
text-decoration: underline;
}
footer p {
float: right;
line-height: 1.5em;
font-size: 1em;
font-weight: bold;
color: #fff;
}
footer p a {
margin: 0 0 0 9px;
text-decoration: none;
color: #11b6fb;
}
footer p a:hover {
text-decoration: underline;
}
.type {
float: left;
padding: 0 0 3px 0;
}
.type li {
float: left;
padding: 0 21px 0 0;
line-height: 1.5em;
font-size: 1em;
color: #11b6fb;
}
.type li a {
text-decoration: none;
color: #11b6fb;
}
.type li.act a {
color: #fff;
}
.type li a:hover {
color: #fff;
}
.menu-bot {
float: left;
}
.menu-bot li {
float: left;
padding: 0 22px 0 0;
line-height: 1.5em;
font-size: 1em;
color: #757474;
}
.menu-bot li a {
text-decoration: none;
color: #757474;
}
.menu-bot li a:hover {
text-decoration: underline;
}
/* ============================= footer END ====================================== */