/* black CSS for pkeffect.com */

body { background-color:#222222; 
color:#ffffff;
margin: 0px; 
padding: 0px;
overflow-x: hidden; 
overflow-y: hidden; 
} /* body background color and body text color */

img { border: none; } /* removes borders around all images */

/* */
a:hover {background:#; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; border:1px solid #ffffff; background:#000000; color:#ffffff;}
/* */ Easy <a href="#" class="tooltip">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>./* */
/* */

p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}

a:link {color:#ffffff; text-decoration: none;}      /* unvisited link */
a:visited {color:#ffffff; text-decoration: none;}  /* visited link */
a:hover {color:#ffffff; text-decoration: none;}  /* mouse over link */
a:active {color:#ffffff; text-decoration: none;}  /* selected link */

div.head {}
div.content {}
div.foot {}
div.c1 {text-align: center}

/*set the div in the top left corner*/
div.topleft{
display:block;
position:absolute;
top:0;
left:0;
}

/*set the div in the top right corner*/
div.topright{
display:block;
position:absolute;
top:0;
right:0;
}

/*set the div in the bottom left corner*/
div.bottomleft{
display:block;
position:absolute;
bottom:0;
left:0;
}

/*set the div in the bottom right corner*/
div.bottomright{
display:block;
position:absolute;
bottom:0;
right:0;
}

/*highlight images transparency start*/
.highlightit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=10);
-moz-opacity: 0.5;
opacity: 0.5;
} 

.highlightit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
/*highlight images transparency start*/

/*pure css button start*/
 .button {
  margin: 0em 0;
  width: 8em;
  font-family: helvetica,arial,sans-serif;
  font-size: 55%;
  font-weight: bold;
  font-color: #FFFFFF;
 }
 
.button a {
  display: block;
  width: 100%;
}

.button a:link,
.button a:visited,
.button a:hover {
  background-color: #000000;
  color: #FFFFFF;
  text-decoration: none;
}

.button a:link,
.button a:visited {
  border-top: 1px solid #cecece;
  border-bottom: 2px solid #4a4a4a;
  border-left: 1px solid #cecece;
  border-right: 2px solid #4a4a4a;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  -moz-opacity: 0.7;
  opacity: 0.7;
}

.button a:hover {
  border-bottom: 1px solid #cecece;
  border-top: 2px solid #4a4a4a;
  border-right: 1px solid #cecece;
  border-left: 2px solid #4a4a4a;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
}

.button span.pk {
  padding: 0 0.2em;
  background-color: #FFFFFF;
  color: #000000;
} 
/*pure css button end*/


        a.info{
        position:relative;           /*this is the key*/
        z-index:24;
        background-color:#222222;    /* background colour of display text */
        color:#ffffff;               /* colour of display text */
        border:0px solid #;    /* border colour */
        text-decoration:none;
        font-style:none;
        }

        a.info:hover {
        z-index:25;
        background-color:#;

        }

        a.info span{
        display: none;  /* hide the span text using this css */
        }

        a.info:hover span{ /*the span will display just on :hover state*/
        display:block;
        position:absolute;
        top: 1.5em;
        left: 3em;
        width:15em;
        border:1px solid #ffffff; /* border colour */
        background-color:#000000; /* background colour here */
        color:#ffffff;         /* text colour */
        text-align: center;
        font-size: .8em;
        font-style:italic;
        z-index:30;
        }

        .images {
        vertical-align:bottom;
        }

/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height ( <div id="page-background"><img src="images/site/bg.png" width="100%" height="100%" alt="Smile"></div> ) */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1;padding:10px;}

<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 -->
<!--[if IE 6]>

html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}