• Author - Jyothi Karthik Raja
• License - Creative Commons
• Background image - Yes
• Demo
• Browser specific tricks - Yes
  • Internet Explorer specific filters

• Firefox
  • 1.5 on Windows XP SP2
• Internet Explorer
  • 6.02 on Windows XP SP2

/* 
:::::::::::::::StyleSheet Information :::::::::::::::
:: Stlyesheet name: Karthik1                       ::
:: Modified from Webdev                            ::
:: License Terms : Attribution-ShareAlike 1.0      ::
:: http://creativecommons.org/licenses/by-sa/1.0/  ::
:: contact email: calvin_hopes@yahoo.com           ::      
:::::::::::::::::::::::::::::::::::::::::::::::::::::
 
Variables:
1. You can change the background-image by changing the url in the below body paragraph. 
2. You can delete the background image by deleting the three lines that say background. 
3. You can change the opacity of the thumbnails by changing the percentage in filter: Alpha(Opacity=100) line
   There are two such lines in the code, one is when there is no mouse over the thumbnail and the other is when you 
   hover the mouse over the thumbnail.
*/
 
<;setvar color1 = #C5E4F9>;
<;setvar color2 = #10609B>;
<;setvar color3 = #FFFFFF>;
<;setvar color4 = #FFFFFF>;
<;setvar color5 = #10609B>;
<;setvar color6 = silver>;
 
/* Add this part only if you want to remove the top pbase banner */
body table td a img{
     display:none
}
td.thumbnails table,.thumbnails table img, .display,p.small{
     display:inline
}
/* end of code for removing banner */
 
BODY
{
text-align: left;
background-color:  <;getvar color3>;;
color:  <;getvar color2>;;
font-family: Tahoma;
font-weight:bold;
font-size: 12px;
background-attachment: fixed;
background-image: url(http://www.pbase.com/yardbird/image/41992762/original.jpg);
background-repeat: no-repeat;
background-position: left center;
}
 
td,font {
font-family: Tahoma;
font-size: 12px;
color:  <;getvar color2>;;
}
 
h1 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color:  <;getvar color1>;; text-transform: capitalize}
 
h2 
{
  margin: 5,5,5,5;
  font-size:         14pt; 
  font-weight:      normal; 
  text-align:       right; 
  letter-spacing:     12px; 
  padding-top:       5px; 
  padding-bottom:   5px; 
  background-color:  <;getvar color2>;; 
  color:  <;getvar color1>;;
}
 
h2:first-letter
{
  color:  <;getvar color4>;; 
  font-style: normal; 
  font-size:  16pt; 
}
 
 
h3 {  
background-color: none; 
border: 0px  <;getvar color1>; solid; 
font-size: 11px;  
width: 250px; 
margin-bottom: 0px; 
margin-top: 0px;
font-weight: bold;
}
 
a:link {
     font: bold; 
     color:  <;getvar color5>;}
a:hover	{
     font: bold; 
     color:  <;getvar color5>;; 
     text-decoration: underline
}
 
A:visited { color:  <;getvar color5>;; } 
A:active { color :  <;getvar color2>;; }
 
td.thumbnail a, td.thumbnail a:link, td.thumbnail a:visited, td.thumbnail a:active {
     display: block;
     margin-top: 0px;
     padding: 5px;
     vertical-align: middle;
     horizontal-align: middle;
     width: 170px; 
     border: 1px solid  <;getvar color6>;; 
     filter: Alpha(Opacity=100)}
 
td.thumbnail a:hover {
     display: block;
     margin-top: 0px;
     padding: 5px;
     vertical-align: middle;
     horizontal-align: middle;
     width: 170px; 
     border: 1px solid  <;getvar color2>;; 
     filter: Alpha(Opacity=100)}
 
.display
{
margin: 10px; padding: 10px
background-color:  <;getvar color1>;;
border: 0px solid  <;getvar color2>;;
font-weight: bold;
}
 
.galleryheader{
  margin: 0px auto;
  width:700px; 
  text-align:center;
}
 
#descheader {
  margin:0px auto;
  margin-bottom: 5px;
}
 
#desctoggle {
 text-align:center;
 margin:0px auto;
 font-weight:bold;
}
 
#descinside {
 text-align:justify;
 margin:0px auto;
 font-weight:normal;
}
 
/* IE doesn't understand margin:auto */
body{
 text-align:center;
} 
 
/* negate effect of body center above */
#localmenu {
 text-align:left;
}
 
/* negate effect of body center above */
.gallery_comments {
 clear:both;
 text-align:left;
} 
 
/* negate effect of body center above*/
.comment_section {
 clear:both;
 text-align:left;
}