100 Awesome CSS3 Pagination Styles To Paste Into Your DesignsPagination is crucial to any website when content is split across multiple pages. These CSS styles help make your pagination stand out.
CSS3 Pagination Styles Usage
The basic usage is to use the code snippet below as a basis for the pagination, but you will have to implement this in whatever language or framework you are using.
Under each style is the CSS code to style the basic pagination, simply select the code that matches the styleA01, or styleB4 accordingly.
xml
<ul class="navigation styleA styleA01">
<li><a href="#" class="first">First</a></li>
<li><a href="#" class="previous">Previous</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#" class="current">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" class="next">Next</a></li>
<li><a href="#" class="last">Last</a></li>
</ul> css
ul.pagination
{
margin:0px;
margin-bottom:6px;
padding:0px;
height:100%;
overflow:hidden;
font:12px 'Tahoma';
list-style-type:none;
}
ul.pagination li
{
float:left;
margin:0px;
padding:0px;
margin-left:5px;
}
ul.pagination li a
{
color:black;
display:block;
text-decoration:none;
padding:7px 10px 7px 10px;
}
ul.pagination li a img
{
} CSS3 Pagination Styles
Pagination Style A
01
02
03
04
05
06
07
08
09
10
11
12
css
/*****************************************************************/
/*A */
/*****************************************************************/
ul.styleA li a
{
color:#FFFFFF;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
/*****************************************************************/
/*01 */
/*****************************************************************/
ul.styleA01 li a
{
color:#474747;
border:solid 1px #B6B6B6;
padding:6px 9px 6px 9px;
background:#E6E6E6;
background:-moz-linear-gradient(top,#FFFFFF 1px,#F3F3F3 1px,#E6E6E6);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F3F3F3),color-stop(1,#E6E6E6));
}
ul.styleA01 li a:hover,
ul.styleA01 li a.current
{
background:#FFFFFF;
}
/*****************************************************************/
/*02 */
/*****************************************************************/
ul.styleA02 li a
{
color:#893A00;
background:#FFCB00;
background:-moz-linear-gradient(top,#FFD500,#FFCB00);
background:-webkit-gradient(linear,0 0,0 100%,from(#FFD500),to(#FFCB00));
}
ul.styleA02 li a:hover,
ul.styleA02 li a.current
{
background:#FFF4BA;
}
/*****************************************************************/
/*03 */
/*****************************************************************/
ul.styleA03 li a
{
background:#FF7217;
background:-moz-linear-gradient(top,#FF8E1F,#FF7217);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF8E1F),to(#FF7217));
}
ul.styleA03 li a:hover,
ul.styleA03 li a.current
{
color:#C34E00;
background:#FFECDE;
}
/*****************************************************************/
/*04 */
/*****************************************************************/
ul.styleA04 li a
{
background:#D22020;
background:-moz-linear-gradient(top,#DB2B2B,#D22020);
background:-webkit-gradient(linear,0 0,0 100%,from(#DB2B2B),to(#D22020));
}
ul.styleA04 li a:hover,
ul.styleA04 li a.current
{
color:#9F0F0F;
background:#FFE0E0;
}
/*****************************************************************/
/*05 */
/*****************************************************************/
ul.styleA05 li a
{
background:#699613;
background:-moz-linear-gradient(top,#87AB19,#699613);
background:-webkit-gradient(linear,0 0,0 100%,from(#87AB19),to(#699613));
}
ul.styleA05 li a:hover,
ul.styleA05 li a.current
{
color:#4F7119;
background:#E7F2C7;
}
/*****************************************************************/
/*06 */
/*****************************************************************/
ul.styleA06 li a
{
background:#1D8A11;
background:-moz-linear-gradient(top,#26A116,#1D8A11);
background:-webkit-gradient(linear,0 0,0 100%,from(#26A116),to(#1D8A11));
}
ul.styleA06 li a:hover,
ul.styleA06 li a.current
{
color:#176D0E;
background:#DCF4C9;
}
/*****************************************************************/
/*07 */
/*****************************************************************/
ul.styleA07 li a
{
background:#45ABEC;
background:-moz-linear-gradient(top,#5CBCF0,#45ABEC);
background:-webkit-gradient(linear,0 0,0 100%,from(#5CBCF0),to(#45ABEC));
}
ul.styleA07 li a:hover,
ul.styleA07 li a.current
{
color:#358FDD;
background:#DFF4FF;
}
/*****************************************************************/
/*08 */
/*****************************************************************/
ul.styleA08 li a
{
background:#3862C8;
background:-moz-linear-gradient(top,#4A81D3,#3862C8);
background:-webkit-gradient(linear,0 0,0 100%,from(#4A81D3),to(#3862C8));
}
ul.styleA08 li a:hover,
ul.styleA08 li a.current
{
color:#355DDD;
background:#DDE8FE;
}
/*****************************************************************/
/*09 */
/*****************************************************************/
ul.styleA09 li a
{
background:#5A7075;
background:-moz-linear-gradient(top,#788C90,#5A7075);
background:-webkit-gradient(linear,0 0,0 100%,from(#788C90),to(#5A7075));
}
ul.styleA09 li a:hover,
ul.styleA09 li a.current
{
color:#355DDD;
background:#DDE8FE;
}
/*****************************************************************/
/*10 */
/*****************************************************************/
ul.styleA10 li a
{
background:#684BA6;
background:-moz-linear-gradient(top,#8663B8,#684BA6);
background:-webkit-gradient(linear,0 0,0 100%,from(#8663B8),to(#684BA6));
}
ul.styleA10 li a:hover,
ul.styleA10 li a.current
{
color:#643EB3;
background:#EAE4F4;
}
/*****************************************************************/
/*11 */
/*****************************************************************/
ul.styleA11 li a
{
background:#9A6654;
background:-moz-linear-gradient(top,#AE846F,#9A6654);
background:-webkit-gradient(linear,0 0,0 100%,from(#AE846F),to(#9A6654));
}
ul.styleA11 li a:hover,
ul.styleA11 li a.current
{
color:#78594A;
background:#F0E7E3;
}
/*****************************************************************/
/*12 */
/*****************************************************************/
ul.styleA12 li a
{
background:#323232;
background:-moz-linear-gradient(top,#434343,#323232);
background:-webkit-gradient(linear,0 0,0 100%,from(#434343),to(#323232));
}
ul.styleA12 li a:hover,
ul.styleA12 li a.current
{
color:#2F2F2F;
background:#EAEAEA;
}
Pagination Style B
01
02
03
04
05
06
07
08
09
10
css
/*****************************************************************/
/* B */
/*****************************************************************/
ul.styleB li a
{
border:solid 1px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
padding:6px 9px 6px 9px;
}
ul.styleB li
{
padding-bottom:1px;
}
ul.styleB li a:hover,
ul.styleB li a.current
{
color:#FFFFFF;
box-shadow:0px 1px #EDEDED;
-moz-box-shadow:0px 1px #EDEDED;
-webkit-box-shadow:0px 1px #EDEDED;
}
/*****************************************************************/
/* 01 */
/*****************************************************************/
ul.styleB01 li a
{
color:#A74E0D;
border-color:#F3D795;
background:#FFFDF2;
}
ul.styleB01 li a:hover,
ul.styleB01 li a.current
{
color:#893A00;
text-shadow:0px 1px #FFEF42;
border-color:#FFA200;
background:#FFC800;
background:-moz-linear-gradient(top,#FFFFFF 1px,#FFEA01 1px,#FFC800);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#FFEA01),color-stop(1,#FFC800));
}
/*****************************************************************/
/* 02 */
/*****************************************************************/
ul.styleB02 li a
{
color:#0A7EC5;
border-color:#8DC5E6;
background:#F8FCFF;
}
ul.styleB02 li a:hover,
ul.styleB02 li a.current
{
text-shadow:0px 1px #388DBE;
border-color:#3390CA;
background:#58B0E7;
background:-moz-linear-gradient(top,#B4F6FF 1px,#63D0FE 1px,#58B0E7);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#B4F6FF),color-stop(0.02,#63D0FE),color-stop(1,#58B0E7));
}
/*****************************************************************/
/* 03 */
/*****************************************************************/
ul.styleB03 li a
{
color:#4A76C6;
border-color:#8AAEEF;
background:#F7F9FE;
}
ul.styleB03 li a:hover,
ul.styleB03 li a.current
{
text-shadow:0px 1px #4876C9;
border-color:#3D6DC3;
background:#5A8CE7;
background:-moz-linear-gradient(top,#C2E0FF 1px,#84AFFE 1px,#5A8CE7);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#C2E0FF),color-stop(0.02,#84AFFE),color-stop(1,#5A8CE7));
}
/*****************************************************************/
/* 04 */
/*****************************************************************/
ul.styleB04 li a
{
color:#8D62C8;
border-color:#BAA2DA;
background:#F9F7FC;
}
ul.styleB04 li a:hover,
ul.styleB04 li a.current
{
text-shadow:0px 1px #7955AB;
border-color:#6F4DA0;
background:#9168C9;
background:-moz-linear-gradient(top,#DFBEFA 1px,#B088E7 1px,#9168C9);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#DFBEFA),color-stop(0.02,#B088E7),color-stop(1,#9168C9));
}
/*****************************************************************/
/* 05 */
/*****************************************************************/
ul.styleB05 li a
{
color:#EF6420;
border-color:#FFBD85;
background:#FFFAF7;
}
ul.styleB05 li a:hover,
ul.styleB05 li a.current
{
text-shadow:0px 1px #CA470E;
border-color:#D13F11;
background:#E95B2B;
background:-moz-linear-gradient(top,#FFBE01 1px,#FE7C02 1px,#E95B2B);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFBE01),color-stop(0.02,#FE7C02),color-stop(1,#E95B2B));
}
/*****************************************************************/
/* 06 */
/*****************************************************************/
ul.styleB06 li a
{
color:#E92F2F;
border-color:#FFA5A5;
background:#FFF8F8;
}
ul.styleB06 li a:hover,
ul.styleB06 li a.current
{
text-shadow:0px 1px #B72E2E;
border-color:#AD2D2D;
background:#E43838;
background:-moz-linear-gradient(top,#FF9B9B 1px,#FE5555 1px,#E43838);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FF9B9B),color-stop(0.02,#FE5555),color-stop(1,#E43838));
}
/*****************************************************************/
/* 07 */
/*****************************************************************/
ul.styleB07 li a
{
color:#916C59;
border-color:#D6BFB4;
background:#FBF9F8;
}
ul.styleB07 li a:hover,
ul.styleB07 li a.current
{
text-shadow:0px 1px #866454;
border-color:#886756;
background:#A37A66;
background:-moz-linear-gradient(top,#E9C4B2 1px,#C59882 1px,#A37A66);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#E9C4B2),color-stop(0.02,#C59882),color-stop(1,#A37A66));
}
/*****************************************************************/
/* 08 */
/*****************************************************************/
ul.styleB08 li a
{
color:#478223;
border-color:#B2D397;
background:#F7FAF4;
}
ul.styleB08 li a:hover,
ul.styleB08 li a.current
{
text-shadow:0px 1px #4E802C;
border-color:#478223;
background:#599F2F;
background:-moz-linear-gradient(top,#9FE355 1px,#79BF4A 1px,#599F2F);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9FE355),color-stop(0.02,#79BF4A),color-stop(1,#599F2F));
}
/*****************************************************************/
/* 09 */
/*****************************************************************/
ul.styleB09 li a
{
color:#707070;
border-color:#CFCFCF;
background:#FAFAFA;
}
ul.styleB09 li a:hover,
ul.styleB09 li a.current
{
text-shadow:0px 1px #636363;
border-color:#5D5D5D;
background:#777777;
background:-moz-linear-gradient(top,#C0C0C0 1px,#929292 1px,#777777);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#C0C0C0),color-stop(0.02,#929292),color-stop(1,#777777));
}
/*****************************************************************/
/* 10 */
/*****************************************************************/
ul.styleB10 li a
{
color:#444444;
border-color:#BEBEBE;
background:#FAFAFA;
}
ul.styleB10 li a:hover,
ul.styleB10 li a.current
{
text-shadow:0px 1px #3C3C3C;
border-color:#202020;
background:#525252;
background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252));
}
Pagination Style C
01
02
03
04
05
06
07
08
09
10
css
/*****************************************************************/
/* C */
/*****************************************************************/
ul.styleC li a
{
color:#707070;
background:#FFFFFF;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:solid 1px #DCDCDC;
padding:6px 9px 6px 9px;
}
ul.styleC li
{
padding-bottom:1px;
}
ul.styleC li a:hover,
ul.styleC li a.current
{
color:#FFFFFF;
box-shadow:0px 1px #EDEDED;
-moz-box-shadow:0px 1px #EDEDED;
-webkit-box-shadow:0px 1px #EDEDED;
}
/*****************************************************************/
/* 01 */
/*****************************************************************/
ul.styleC01 li a:hover,
ul.styleC01 li a.current
{
color:#893A00;
text-shadow:0px 1px #FFEF42;
border-color:#FFA200;
background:#FFC800;
background:-moz-linear-gradient(top,#FFFFFF 1px,#FFEA01 1px,#FFC800);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#FFEA01),color-stop(1,#FFC800));
}
/*****************************************************************/
/* 02 */
/*****************************************************************/
ul.styleC02 li a:hover,
ul.styleC02 li a.current
{
text-shadow:0px 1px #388DBE;
border-color:#3390CA;
background:#58B0E7;
background:-moz-linear-gradient(top,#B4F6FF 1px,#63D0FE 1px,#58B0E7);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#B4F6FF),color-stop(0.02,#63D0FE),color-stop(1,#58B0E7));
}
/*****************************************************************/
/* 03 */
/*****************************************************************/
ul.styleC03 li a:hover,
ul.styleC03 li a.current
{
text-shadow:0px 1px #4876C9;
border-color:#3D6DC3;
background:#5A8CE7;
background:-moz-linear-gradient(top,#C2E0FF 1px,#84AFFE 1px,#5A8CE7);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#C2E0FF),color-stop(0.02,#84AFFE),color-stop(1,#5A8CE7));
}
/*****************************************************************/
/* 04 */
/*****************************************************************/
ul.styleC04 li a:hover,
ul.styleC04 li a.current
{
text-shadow:0px 1px #7955AB;
border-color:#6F4DA0;
background:#9168C9;
background:-moz-linear-gradient(top,#DFBEFA 1px,#B088E7 1px,#9168C9);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#DFBEFA),color-stop(0.02,#B088E7),color-stop(1,#9168C9));
}
/*****************************************************************/
/* 05 */
/*****************************************************************/
ul.styleC05 li a:hover,
ul.styleC05 li a.current
{
text-shadow:0px 1px #CA470E;
border-color:#D13F11;
background:#E95B2B;
background:-moz-linear-gradient(top,#FFBE01 1px,#FE7C02 1px,#E95B2B);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFBE01),color-stop(0.02,#FE7C02),color-stop(1,#E95B2B));
}
/*****************************************************************/
/* 06 */
/*****************************************************************/
ul.styleC06 li a:hover,
ul.styleC06 li a.current
{
text-shadow:0px 1px #B72E2E;
border-color:#AD2D2D;
background:#E43838;
background:-moz-linear-gradient(top,#FF9B9B 1px,#FE5555 1px,#E43838);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FF9B9B),color-stop(0.02,#FE5555),color-stop(1,#E43838));
}
/*****************************************************************/
/* 07 */
/*****************************************************************/
ul.styleC07 li a:hover,
ul.styleC07 li a.current
{
text-shadow:0px 1px #866454;
border-color:#886756;
background:#A37A66;
background:-moz-linear-gradient(top,#E9C4B2 1px,#C59882 1px,#A37A66);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#E9C4B2),color-stop(0.02,#C59882),color-stop(1,#A37A66));
}
/*****************************************************************/
/* 08 */
/*****************************************************************/
ul.styleC08 li a:hover,
ul.styleC08 li a.current
{
text-shadow:0px 1px #4E802C;
border-color:#478223;
background:#599F2F;
background:-moz-linear-gradient(top,#9FE355 1px,#79BF4A 1px,#599F2F);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9FE355),color-stop(0.02,#79BF4A),color-stop(1,#599F2F));
}
/*****************************************************************/
/* 09 */
/*****************************************************************/
ul.styleC09 li a:hover,
ul.styleC09 li a.current
{
text-shadow:0px 1px #636363;
border-color:#5D5D5D;
background:#777777;
background:-moz-linear-gradient(top,#C0C0C0 1px,#929292 1px,#777777);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#C0C0C0),color-stop(0.02,#929292),color-stop(1,#777777));
}
/*****************************************************************/
/* 10 */
/*****************************************************************/
ul.styleC10 li a:hover,
ul.styleC10 li a.current
{
text-shadow:0px 1px #3C3C3C;
border-color:#202020;
background:#525252;
background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252));
}
Pagination Style D
01
02
03
04
05
06
07
08
09
10
css
/*****************************************************************/
/* D */
/*****************************************************************/
ul.styleD
{
padding:8px;
background:#F9F9F9;
border:solid 1px #E2E2E2;
}
ul.styleD li a
{
color:#333333;
text-shadow:0px 1px #F6F6F6;
padding:6px 9px 6px 9px;
border:solid 1px #B6B6B6;
box-shadow:0px 1px #EFEFEF;
-moz-box-shadow:0px 1px #EFEFEF;
-webkit-box-shadow:0px 1px #EFEFEF;
background:#E6E6E6;
background:-moz-linear-gradient(top,#FFFFFF 1px,#F3F3F3 1px,#E6E6E6);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F3F3F3),color-stop(1,#E6E6E6));
}
ul.styleD li
{
padding-bottom:1px;
}
ul.styleD li a:hover,
ul.styleD li a.current
{
color:#FFFFFF;
box-shadow:0px 1px #E7E7E7;
-moz-box-shadow:0px 1px #E7E7E7;
-webkit-box-shadow:0px 1px #E7E7E7;
}
/*****************************************************************/
/* 01 */
/*****************************************************************/
ul.styleD01 li a:hover,
ul.styleD01 li a.current
{
color:#893A00;
text-shadow:0px 1px #FFEF42;
border-color:#FFA200;
background:#FFC800;
background:-moz-linear-gradient(top,#FFFFFF 1px,#FFEA01 1px,#FFC800);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#FFEA01),color-stop(1,#FFC800));
}
/*****************************************************************/
/* 02 */
/*****************************************************************/
ul.styleD02 li a:hover,
ul.styleD02 li a.current
{
text-shadow:0px 1px #388DBE;
border-color:#3390CA;
background:#58B0E7;
background:-moz-linear-gradient(top,#B4F6FF 1px,#63D0FE 1px,#58B0E7);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#B4F6FF),color-stop(0.02,#63D0FE),color-stop(1,#58B0E7));
}
/*****************************************************************/
/* 03 */
/*****************************************************************/
ul.styleD03 li a:hover,
ul.styleD03 li a.current
{
text-shadow:0px 1px #4876C9;
border-color:#3D6DC3;
background:#5A8CE7;
background:-moz-linear-gradient(top,#C2E0FF 1px,#84AFFE 1px,#5A8CE7);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#C2E0FF),color-stop(0.02,#84AFFE),color-stop(1,#5A8CE7));
}
/*****************************************************************/
/* 04 */
/*****************************************************************/
ul.styleD04 li a:hover,
ul.styleD04 li a.current
{
text-shadow:0px 1px #7955AB;
border-color:#6F4DA0;
background:#9168C9;
background:-moz-linear-gradient(top,#DFBEFA 1px,#B088E7 1px,#9168C9);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#DFBEFA),color-stop(0.02,#B088E7),color-stop(1,#9168C9));
}
/*****************************************************************/
/* 05 */
/*****************************************************************/
ul.styleD05 li a:hover,
ul.styleD05 li a.current
{
text-shadow:0px 1px #CA470E;
border-color:#D13F11;
background:#E95B2B;
background:-moz-linear-gradient(top,#FFBE01 1px,#FE7C02 1px,#E95B2B);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFBE01),color-stop(0.02,#FE7C02),color-stop(1,#E95B2B));
}
/*****************************************************************/
/* 06 */
/*****************************************************************/
ul.styleD06 li a:hover,
ul.styleD06 li a.current
{
text-shadow:0px 1px #B72E2E;
border-color:#AD2D2D;
background:#E43838;
background:-moz-linear-gradient(top,#FF9B9B 1px,#FE5555 1px,#E43838);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FF9B9B),color-stop(0.02,#FE5555),color-stop(1,#E43838));
}
/*****************************************************************/
/* 07 */
/*****************************************************************/
ul.styleD07 li a:hover,
ul.styleD07 li a.current
{
text-shadow:0px 1px #866454;
border-color:#886756;
background:#A37A66;
background:-moz-linear-gradient(top,#E9C4B2 1px,#C59882 1px,#A37A66);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#E9C4B2),color-stop(0.02,#C59882),color-stop(1,#A37A66));
}
/*****************************************************************/
/* 08 */
/*****************************************************************/
ul.styleD08 li a:hover,
ul.styleD08 li a.current
{
text-shadow:0px 1px #4E802C;
border-color:#478223;
background:#599F2F;
background:-moz-linear-gradient(top,#9FE355 1px,#79BF4A 1px,#599F2F);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9FE355),color-stop(0.02,#79BF4A),color-stop(1,#599F2F));
}
/*****************************************************************/
/* 09 */
/*****************************************************************/
ul.styleD09 li a:hover,
ul.styleD09 li a.current
{
text-shadow:0px 1px #636363;
border-color:#5D5D5D;
background:#777777;
background:-moz-linear-gradient(top,#C0C0C0 1px,#929292 1px,#777777);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#C0C0C0),color-stop(0.02,#929292),color-stop(1,#777777));
}
/*****************************************************************/
/* 10 */
/*****************************************************************/
ul.styleD10 li a:hover,
ul.styleD10 li a.current
{
text-shadow:0px 1px #3C3C3C;
border-color:#202020;
background:#525252;
background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252));
}
Pagination Style E
01
02
03
04
05
06
07
08
09
10
css
/*****************************************************************/
/* E */
/*****************************************************************/
ul.styleE
{
padding:8px;
background:#FFFFFF;
border:solid 1px #E9E9E9;
}
ul.styleE,
ul.styleE li a
{
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
ul.styleE li a
{
background:#FFFFFF;
}
ul.styleE li
{
padding-bottom:1px;
}
ul.styleE li a:hover,
ul.styleE li a.current,
ul.styleE li a.first,
ul.styleE li a.previous,
ul.styleE li a.next,
ul.styleE li a.last
{
color:#FFFFFF;
border-bottom:solid 1px;
box-shadow:0px 1px #EDEDED;
-moz-box-shadow:0px 1px #EDEDED;
-webkit-box-shadow:0px 1px #EDEDED;
}
/*****************************************************************/
/* 01 */
/*****************************************************************/
ul.styleE01 li a
{
color:#A74E0D;
}
ul.styleE01 li a:hover,
ul.styleE01 li a.current,
ul.styleE01 li a.first,
ul.styleE01 li a.previous,
ul.styleE01 li a.next,
ul.styleE01 li a.last
{
color:#893A00;
text-shadow:0px 1px #FFEF42;
border-bottom-color:#FFAB00;
background:#FFC800;
background:-moz-linear-gradient(top,#FFEC01,#FFC800);
background:-webkit-gradient(linear,0 0,0 100%,from(#FFEC01),to(#FFC800));
}
/*****************************************************************/
/* 02 */
/*****************************************************************/
ul.styleE02 li a
{
color:#0A7EC5;
}
ul.styleE02 li a:hover,
ul.styleE02 li a.current,
ul.styleE02 li a.first,
ul.styleE02 li a.previous,
ul.styleE02 li a.next,
ul.styleE02 li a.last
{
text-shadow:0px 1px #388BBC;
border-bottom-color:#358FDD;
background:#58B0E7;
background:-moz-linear-gradient(top,#64D1FF1,#58B0E7);
background:-webkit-gradient(linear,0 0,0 100%,from(#64D1FF),to(#58B0E7));
}
/*****************************************************************/
/* 03 */
/*****************************************************************/
ul.styleE03 li a
{
color:#4A76C6;
}
ul.styleE03 li a:hover,
ul.styleE03 li a.current,
ul.styleE03 li a.first,
ul.styleE03 li a.previous,
ul.styleE03 li a.next,
ul.styleE03 li a.last
{
text-shadow:0px 1px #4674C8;
border-bottom-color:#355DDD;
background:#5A8CE7;
background:-moz-linear-gradient(top,#86B1FF,#5A8CE7);
background:-webkit-gradient(linear,0 0,0 100%,from(#86B1FF),to(#5A8CE7));
}
/*****************************************************************/
/* 04 */
/*****************************************************************/
ul.styleE04 li a
{
color:#8D62C8;
}
ul.styleE04 li a:hover,
ul.styleE04 li a.current,
ul.styleE04 li a.first,
ul.styleE04 li a.previous,
ul.styleE04 li a.next,
ul.styleE04 li a.last
{
text-shadow:0px 1px #7753A9;
border-bottom-color:#643EB3;
background:#9168C9;
background:-moz-linear-gradient(top,#B189E8,#9168C9);
background:-webkit-gradient(linear,0 0,0 100%,from(#B189E8),to(#9168C9));
}
/*****************************************************************/
/* 05 */
/*****************************************************************/
ul.styleE05 li a
{
color:#EF6420;
}
ul.styleE05 li a:hover,
ul.styleE05 li a.current,
ul.styleE05 li a.first,
ul.styleE05 li a.previous,
ul.styleE05 li a.next,
ul.styleE05 li a.last
{
text-shadow:0px 1px #C94510;
border-bottom-color:#DF361B;
background:#E95B2B;
background:-moz-linear-gradient(top,#FF7E00,#E95B2B);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF7E00),to(#E95B2B));
}
/*****************************************************************/
/* 06 */
/*****************************************************************/
ul.styleE06 li a
{
color:#E92F2F;
}
ul.styleE06 li a:hover,
ul.styleE06 li a.current,
ul.styleE06 li a.first,
ul.styleE06 li a.previous,
ul.styleE06 li a.next,
ul.styleE06 li a.last
{
text-shadow:0px 1px #B52D2D;
border-bottom-color:#C90000;
background:#E43838;
background:-moz-linear-gradient(top,#FF5656,#E43838);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF5656),to(#E43838));
}
/*****************************************************************/
/* 07 */
/*****************************************************************/
ul.styleE07 li a
{
color:#916C59;
}
ul.styleE07 li a:hover,
ul.styleE07 li a.current,
ul.styleE07 li a.first,
ul.styleE07 li a.previous,
ul.styleE07 li a.next,
ul.styleE07 li a.last
{
text-shadow:0px 1px #AC826E;
border-bottom-color:#865447;
background:#A37A66;
background:-moz-linear-gradient(top,#C79A84,#A37A66);
background:-webkit-gradient(linear,0 0,0 100%,from(#C79A84),to(#A37A66));
}
/*****************************************************************/
/* 08 */
/*****************************************************************/
ul.styleE08 li a
{
color:#478223;
}
ul.styleE08 li a:hover,
ul.styleE08 li a.current,
ul.styleE08 li a.first,
ul.styleE08 li a.previous,
ul.styleE08 li a.next,
ul.styleE08 li a.last
{
text-shadow:0px 1px #4D7F2B;
border-bottom-color:#35771C;
background:#599F2F;
background:-moz-linear-gradient(top,#7BC14C,#599F2F);
background:-webkit-gradient(linear,0 0,0 100%,from(#7BC14C),to(#599F2F));
}
/*****************************************************************/
/* 09 */
/*****************************************************************/
ul.styleE09 li a
{
color:#444444;
}
ul.styleE09 li a:hover,
ul.styleE09 li a.current,
ul.styleE09 li a.first,
ul.styleE09 li a.previous,
ul.styleE09 li a.next,
ul.styleE09 li a.last
{
text-shadow:0px 1px #626262;
border-bottom-color:#4D4D4D;
background:#777777;
background:-moz-linear-gradient(top,#939393,#777777);
background:-webkit-gradient(linear,0 0,0 100%,from(#939393),to(#777777));
}
/*****************************************************************/
/* 10 */
/*****************************************************************/
ul.styleE10 li a
{
color:#A74E0D;
}
ul.styleE10 li a:hover,
ul.styleE10 li a.current,
ul.styleE10 li a.first,
ul.styleE10 li a.previous,
ul.styleE10 li a.next,
ul.styleE10 li a.last
{
text-shadow:0px 1px #3C3C3C;
border-bottom-color:#313131;
background:#525252;
background:-moz-linear-gradient(top,#6D6D6D,#525252);
background:-webkit-gradient(linear,0 0,0 100%,from(#6D6D6D),to(#525252));
}
Pagination Style F
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
css
/*****************************************************************/
/* F */
/*****************************************************************/
ul.styleF
{
padding:8px;
margin-bottom:1px;
border-bottom:solid 1px;
box-shadow:0px 1px #EDEDED;
-moz-box-shadow:0px 1px #EDEDED;
-webkit-box-shadow:0px 1px #EDEDED;
}
ul.styleF01,
ul.styleF02,
ul.styleF03,
ul.styleF04,
ul.styleF05
{
border:solid 1px #AEAEAE;
background:#E9E9E9;
background:-moz-linear-gradient(top,#FFFFFF,#E9E9E9 97%,#FFFFFF 98%);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.00,#FFFFFF),color-stop(0.97,#E9E9E9),color-stop(0.98,#FFFFFF));
}
ul.styleF,
ul.styleF li a
{
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
ul.styleF li a,
ul.styleF li a:hover,
ul.styleF li a.current
{
color:#FFFFFF;
text-shadow:none;
}
ul.styleF01 li a,
ul.styleF01 li a:hover,
ul.styleF01 li a.current,
ul.styleF02 li a,
ul.styleF03 li a,
ul.styleF04 li a,
ul.styleF05 li a
{
color:#444444;
text-shadow:0px 1px #FFFFFF;
}
/*****************************************************************/
/* 01 */
/*****************************************************************/
ul.styleF01 li a
{
padding:6px 9px 6px 9px;
border:solid 1px transparent;
}
ul.styleF01 li a:hover,
ul.styleF01 li a.current
{
border-color:#AEAEAE;
background:transparent;
background:-moz-linear-gradient(top,transparent,transparent 95%,#FFFFFF 96%);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.00,transparent),color-stop(0.95,transparent),color-stop(0.96,#FFFFFF));
}
/*****************************************************************/
/* 02 */
/*****************************************************************/
ul.styleF02 li a:hover,
ul.styleF02 li a.current
{
background:#589D1E;
}
/*****************************************************************/
/* 03 */
/*****************************************************************/
ul.styleF03 li a:hover,
ul.styleF03 li a.current
{
background:#2B8AC7;
}
/*****************************************************************/
/* 04 */
/*****************************************************************/
ul.styleF04 li a:hover,
ul.styleF04 li a.current
{
background:#F77110;
}
/*****************************************************************/
/* 05 */
/*****************************************************************/
ul.styleF05 li a:hover,
ul.styleF05 li a.current
{
background:#9A66BC;
}
/*****************************************************************/
/* 06 */
/*****************************************************************/
ul.styleF06
{
border-color:#FFAB00;
background:#FFC700;
background:-moz-linear-gradient(top,#FFEC01,#FFC700);
background:-webkit-gradient(linear,0 0,0 100%,from(#FFEC01),to(#FFC700));
}
ul.styleF06 li a
{
color:#DF361B;
text-shadow:0px 1px #FFFF00;
}
ul.styleF06 li a:hover,
ul.styleF06 li a.current
{
background:#DF361B;
}
/*****************************************************************/
/* 07 */
/*****************************************************************/
ul.styleF07
{
border-color:#DF361B;
background:#E95B2C;
background:-moz-linear-gradient(top,#FF7E00,#E95B2C);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF7E00),to(#E95B2C));
}
ul.styleF07 li a:hover,
ul.styleF07 li a.current
{
color:#DF361B;
background:#FFFFFF;
}
/*****************************************************************/
/* 08 */
/*****************************************************************/
ul.styleF08
{
border-color:#941B1B;
background:#A72323;
background:-moz-linear-gradient(top,#BA3737,#A72323);
background:-webkit-gradient(linear,0 0,0 100%,from(#BA3737),to(#A72323));
}
ul.styleF08 li a:hover,
ul.styleF08 li a.current
{
color:#A72323;
background:#FFFFFF;
}
/*****************************************************************/
/* 09 */
/*****************************************************************/
ul.styleF09
{
border-color:#6B6B6B;
background:#949494;
background:-moz-linear-gradient(top,#B3B3B3,#949494);
background:-webkit-gradient(linear,0 0,0 100%,from(#B3B3B3),to(#949494));
}
ul.styleF09 li a
{
color:#000000;
text-shadow:0px 1px #B6B6B6;
}
ul.styleF09 li a:hover,
ul.styleF09 li a.current
{
background:#565656;
text-shadow:0px 1px #404040;
}
/*****************************************************************/
/* 10 */
/*****************************************************************/
ul.styleF10
{
border-color:#4C1B1B;
background:#7F2D2D;
background:-moz-linear-gradient(top,#AE3A3A,#7F2D2D);
background:-webkit-gradient(linear,0 0,0 100%,from(#AE3A3A),to(#7F2D2D));
}
ul.styleF10 li a:hover,
ul.styleF10 li a.current
{
color:#7F2D2D;
background:#FFBA58;
}
/*****************************************************************/
/* 11 */
/*****************************************************************/
ul.styleF11
{
border-color:#28570F;
background:#438819;
background:-moz-linear-gradient(top,#5BA01E,#438819);
background:-webkit-gradient(linear,0 0,0 100%,from(#5BA01E),to(#438819));
}
ul.styleF11 li a:hover,
ul.styleF11 li a.current
{
box-shadow:0px 1px #519D1D;
-moz-box-shadow:0px 1px #519D1D;
-webkit-box-shadow:0px 1px #519D1D;
background:#519D1D;
background:-moz-linear-gradient(top,#15450A 1px,#1C5C0D 1px,#256D12);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#15450A),color-stop(0.02,#1C5C0D),color-stop(1,#256D12));
}
/*****************************************************************/
/* 12 */
/*****************************************************************/
ul.styleF12
{
border-color:#0E4B36;
background:#187D5B;
background:-moz-linear-gradient(top,#1DA187,#187D5B);
background:-webkit-gradient(linear,0 0,0 100%,from(#1DA187),to(#187D5B));
}
ul.styleF12 li a:hover,
ul.styleF12 li a.current
{
box-shadow:0px 1px #1C946E;
-moz-box-shadow:0px 1px #1C946E;
-webkit-box-shadow:0px 1px #1C946E;
background:#1C946E;
background:-moz-linear-gradient(top,#0A3D2B 1px,#0E523A 1px,#136348);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#0A3D2B),color-stop(0.02,#0E523A),color-stop(1,#136348));
}
/*****************************************************************/
/* 13 */
/*****************************************************************/
ul.styleF13
{
border-color:#173E93;
background:#2669B3;
background:-moz-linear-gradient(top,#2B8BC8,#2669B3);
background:-webkit-gradient(linear,0 0,0 100%,from(#2B8BC8),to(#2669B3));
}
ul.styleF13 li a:hover,
ul.styleF13 li a.current
{
box-shadow:0px 1px #2C7DC1;
-moz-box-shadow:0px 1px #2C7DC1;
-webkit-box-shadow:0px 1px #2C7DC1;
background:#2C7DC1;
background:-moz-linear-gradient(top,#15450A 1px,#174886 1px,#1E5897);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#15450A),color-stop(0.02,#174886),color-stop(1,#1E5897));
}
/*****************************************************************/
/* 14 */
/*****************************************************************/
ul.styleF14
{
border-color:#442E69;
background:#734D95;
background:-moz-linear-gradient(top,#9960AC,#734D95);
background:-webkit-gradient(linear,0 0,0 100%,from(#9960AC),to(#734D95));
}
ul.styleF14 li a:hover,
ul.styleF14 li a.current
{
box-shadow:0px 1px #895BA8;
-moz-box-shadow:0px 1px #895BA8;
-webkit-box-shadow:0px 1px #895BA8;
background:#895BA8;
background:-moz-linear-gradient(top,#38244A 1px,#4B3064 1px,#5B3D75);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#38244A),color-stop(0.02,#4B3064),color-stop(1,#5B3D75));
}
/*****************************************************************/
/* 15 */
/*****************************************************************/
ul.styleF15
{
border-color:#865447;
background:#A27965;
background:-moz-linear-gradient(top,#C79A84,#A27965);
background:-webkit-gradient(linear,0 0,0 100%,from(#C79A84),to(#A27965));
}
ul.styleF15 li a:hover,
ul.styleF15 li a.current
{
box-shadow:0px 1px #B49078;
-moz-box-shadow:0px 1px #B49078;
-webkit-box-shadow:0px 1px #B49078;
background:#B49078;
background:-moz-linear-gradient(top,#593D31 1px,#785241 1px,#896250);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#593D31),color-stop(0.02,#785241),color-stop(1,#896250));
}
/*****************************************************************/
/* 16 */
/*****************************************************************/
ul.styleF16
{
border-color:#313131;
background:#525252;
background:-moz-linear-gradient(top,#6D6D6D,#525252);
background:-webkit-gradient(linear,0 0,0 100%,from(#6D6D6D),to(#525252));
}
ul.styleF16 li a:hover,
ul.styleF16 li a.current
{
box-shadow:0px 1px #626262;
-moz-box-shadow:0px 1px #626262;
-webkit-box-shadow:0px 1px #626262;
background:#626262;
background:-moz-linear-gradient(top,#1A1A1A 1px,#242424 1px,#2E2E2E);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#1A1A1A),color-stop(0.02,#242424),color-stop(1,#2E2E2E));
}
Pagination Style G
01
02
03
04
05
06
07
08
09
10
css
/*****************************************************************/
/* G */
/*****************************************************************/
ul.styleG
{
padding:0px;
margin-bottom:1px;
border-bottom:solid 1px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
box-shadow:0px 1px #EDEDED;
-moz-box-shadow:0px 1px #EDEDED;
-webkit-box-shadow:0px 1px #EDEDED;
}
ul.styleG li:first-child a
{
border-radius:3px 0px 0px 3px;
-moz-border-radius:3px 0px 0px 3px;
-webkit-border-radius:3px 0px 0px 3px;
}
ul.styleG li:last-child a
{
border-radius:0px 3px 3px 0px;
-moz-border-radius:0px 3px 3px 0px;
-webkit-border-radius:0px 3px 3px 0px;
}
ul.styleG li a:hover,
ul.styleG li a.current
{
color:#FFFFFF;
text-shadow:none;
}
ul.styleG li a
{
padding:15px 10px 15px 10px;
}
/*****************************************************************/
/* 01 */
/*****************************************************************/
ul.styleG01
{
border-color:#FFAB00;
background:#FFC700;
background:-moz-linear-gradient(top,#FFEC01,#FFC700);
background:-webkit-gradient(linear,0 0,0 100%,from(#FFEC01),to(#FFC700));
}
ul.styleG01 li a
{
color:#DF361B;
text-shadow:0px 1px #FFFF00;
}
ul.styleG01 li a:hover,
ul.styleG01 li a.current
{
background:#EE7902;
background:-moz-linear-gradient(top,#F6A72D,#EE7902);
background:-webkit-gradient(linear,0 0,0 100%,from(#F6A72D),to(#EE7902));
}
/*****************************************************************/
/* 02 */
/*****************************************************************/
ul.styleG02
{
border-color:#E74701;
background:#EE7701;
background:-moz-linear-gradient(top,#F6A82E,#EE7701);
background:-webkit-gradient(linear,0 0,0 100%,from(#F6A82E),to(#EE7701));
}
ul.styleG02 li a
{
color:#000000;
text-shadow:0px 1px #F6B01D;
}
ul.styleG02 li a:hover,
ul.styleG02 li a.current
{
background:#E74801;
background:-moz-linear-gradient(top,#E77301,#E74801);
background:-webkit-gradient(linear,0 0,0 100%,from(#E77301),to(#E74801));
}
/*****************************************************************/
/* 03 */
/*****************************************************************/
ul.styleG03
{
border-color:#358FDC;
background:#58B0E7;
background:-moz-linear-gradient(top,#64D1FF,#58B0E7);
background:-webkit-gradient(linear,0 0,0 100%,from(#64D1FF),to(#58B0E7));
}
ul.styleG03 li a
{
color:#0C3C77;
text-shadow:0px 1px #80D5F5;
}
ul.styleG03 li a:hover,
ul.styleG03 li a.current
{
background:#3581B1;
background:-moz-linear-gradient(top,#4096CB,#3581B1);
background:-webkit-gradient(linear,0 0,0 100%,from(#4096CB),to(#3581B1));
}
/*****************************************************************/
/* 04 */
/*****************************************************************/
ul.styleG04
{
border-color:#355BDC;
background:#598BE7;
background:-moz-linear-gradient(top,#86B1FF,#598BE7);
background:-webkit-gradient(linear,0 0,0 100%,from(#86B1FF),to(#598BE7));
}
ul.styleG04 li a
{
color:#0C2169;
text-shadow:0px 1px #90BFF5;
}
ul.styleG04 li a:hover,
ul.styleG04 li a.current
{
background:#3D69BA;
background:-moz-linear-gradient(top,#4777D0,#3D69BA);
background:-webkit-gradient(linear,0 0,0 100%,from(#4777D0),to(#3D69BA));
}
/*****************************************************************/
/* 05 */
/*****************************************************************/
ul.styleG05
{
border-color:#6B4BCD;
background:#967DDC;
background:-moz-linear-gradient(top,#B690F0,#967DDC);
background:-webkit-gradient(linear,0 0,0 100%,from(#B690F0),to(#967DDC));
}
ul.styleG05 li a
{
color:#2B2242;
text-shadow:0px 1px #B9A2E9;
}
ul.styleG05 li a:hover,
ul.styleG05 li a.current
{
background:#6C4CCD;
background:-moz-linear-gradient(top,#8A64C6,#6C4CCD);
background:-webkit-gradient(linear,0 0,0 100%,from(#8A64C6),to(#6C4CCD));
}
/*****************************************************************/
/* 06 */
/*****************************************************************/
ul.styleG06
{
border-color:#A37453;
background:#B99578;
background:-moz-linear-gradient(top,#D0AC8F,#B99578);
background:-webkit-gradient(linear,0 0,0 100%,from(#D0AC8F),to(#B99578));
}
ul.styleG06 li a
{
color:#48342B;
text-shadow:0px 1px #D0B59F;
}
ul.styleG06 li a:hover,
ul.styleG06 li a.current
{
background:#8B705A;
background:-moz-linear-gradient(top,#9C816B,#8B705A);
background:-webkit-gradient(linear,0 0,0 100%,from(#9C816B),to(#8B705A));
}
/*****************************************************************/
/* 07 */
/*****************************************************************/
ul.styleG07
{
border-color:#39961D;
background:#5FB531;
background:-moz-linear-gradient(top,#79D447,#5FB531);
background:-webkit-gradient(linear,0 0,0 100%,from(#79D447),to(#5FB531));
}
ul.styleG07 li a
{
color:#0C5400;
text-shadow:0px 1px #90D84E;
}
ul.styleG07 li a:hover,
ul.styleG07 li a.current
{
background:#39971D;
background:-moz-linear-gradient(top,#43AD23,#39971D);
background:-webkit-gradient(linear,0 0,0 100%,from(#43AD23),to(#39971D));
}
/*****************************************************************/
/* 08 */
/*****************************************************************/
ul.styleG08
{
border-color:#6B6B6B;
background:#949494;
background:-moz-linear-gradient(top,#B3B3B3,#949494);
background:-webkit-gradient(linear,0 0,0 100%,from(#B3B3B3),to(#949494));
}
ul.styleG08 li a
{
color:#000000;
text-shadow:0px 1px #B6B6B6;
}
ul.styleG08 li a:hover,
ul.styleG08 li a.current
{
background:#6C6C6C;
background:-moz-linear-gradient(top,#848484,#6C6C6C);
background:-webkit-gradient(linear,0 0,0 100%,from(#848484),to(#6C6C6C));
}
/*****************************************************************/
/* 09 */
/*****************************************************************/
ul.styleG09
{
border-color:#313131;
background:#525252;
background:-moz-linear-gradient(top,#6D6D6D,#525252);
background:-webkit-gradient(linear,0 0,0 100%,from(#6D6D6D),to(#525252));
}
ul.styleG09 li a
{
color:#FFFFFF;
}
ul.styleG09 li a:hover,
ul.styleG09 li a.current
{
background:#313131;
background:-moz-linear-gradient(top,#3F3F3F,#313131);
background:-webkit-gradient(linear,0 0,0 100%,from(#3F3F3F),to(#313131));
}
/*****************************************************************/
/* 10 */
/*****************************************************************/
ul.styleG10
{
border-color:#931616;
background:#AF2626;
background:-moz-linear-gradient(top,#DD423B,#AF2626);
background:-webkit-gradient(linear,0 0,0 100%,from(#DD423B),to(#AF2626));
}
ul.styleG10 li a
{
color:#FFFFFF;
}
ul.styleG10 li a:hover,
ul.styleG10 li a.current
{
background:#E8972E;
background:-moz-linear-gradient(top,#FFC051,#E8972E);
background:-webkit-gradient(linear,0 0,0 100%,from(#FFC051),to(#E8972E));
}
Pagination Style H
01
02
03
04
css
/*****************************************************************/
/* H */
/*****************************************************************/
ul.styleH
{
border:solid 1px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
ul.styleH li a
{
color:#222222;
padding:15px 9px 15px 9px;
text-shadow:0px 1px #FFFFFF;
}
ul.styleH01 li a,
ul.styleH02 li a,
ul.styleH03 li a
{
border:solid 1px transparent;
border-width:0px 1px 0px 1px;
}
ul.styleH03 li a,
ul.styleH04 li a
{
text-shadow:0px 1px #FFFFFF;
}
ul.styleH li:first-child a
{
border-radius:3px 0px 0px 3px;
-moz-border-radius:3px 0px 0px 3px;
-webkit-border-radius:3px 0px 0px 3px;
}
ul.styleH li:last-child a
{
border-radius:0px 3px 3px 0px;
-moz-border-radius:0px 3px 3px 0px;
-webkit-border-radius:0px 3px 3px 0px;
}
ul.styleH01 li a.last:hover,
ul.styleH02 li a.last:hover,
ul.styleH03 li a.last:hover
{
border-right-color:transparent;
}
ul.styleH01 li a.first:hover,
ul.styleH02 li a.first:hover,
ul.styleH03 li a.first:hover
{
border-left-color:transparent;
}
/*****************************************************************/
/* 01 */
/*****************************************************************/
ul.styleH01,
ul.styleH01 li a:hover,
ul.styleH01 li a.current
{
border-color:#A6A6A6;
}
ul.styleH01
{
background:#EDEDED;
background:-moz-linear-gradient(top,#FFFFFF 0px,#EDEDED 97%,#FFFFFF 98%);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.00,#FFFFFF),color-stop(0.97,#EDEDED),color-stop(0.98,#FFFFFF));
}
/*****************************************************************/
/* 02 */
/*****************************************************************/
ul.styleH02,
ul.styleH02 li a:hover,
ul.styleH02 li a.current
{
border-color:#C3C3C3;
}
ul.styleH02
{
background:#EFEFEF;
background:-moz-linear-gradient(top,#FFFFFF,#EFEFEF);
background:-webkit-gradient(linear,0 0,0 100%,from(#FFFFFF),to(#EFEFEF));
}
ul.styleH02 li a
{
color:#2A619F;
}
ul.styleH02 li a:hover,
ul.styleH02 li a.current
{
background:#EEEEEE;
background:-moz-linear-gradient(top,#EEEEEE,#FEFEFE);
background:-webkit-gradient(linear,0 0,0 100%,from(#EEEEEE),to(#FEFEFE));
}
/*****************************************************************/
/* 03 */
/*****************************************************************/
ul.styleH03,
ul.styleH03 li a:hover,
ul.styleH03 li a.current
{
border-color:#B6B6B6;
}
ul.styleH03
{
background:#E5E5E5;
background:-moz-linear-gradient(top,#FFFFFF 0px,#F4F4F4 1px,#E5E5E5);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F4F4F4),color-stop(1,#E5E5E5));
}
ul.styleH03 li a:hover,
ul.styleH03 li a.current
{
background:#EEEEEE;
background:-moz-linear-gradient(top,#EEEEEE 0px,#F4F4F4 97%,#FFFFFF 98%);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.00,#EEEEEE),color-stop(0.97,#F4F4F4),color-stop(0.98,#FFFFFF));
}
/*****************************************************************/
/* 04 */
/*****************************************************************/
ul.styleH04,
ul.styleH04 li a:hover,
ul.styleH04 li a.current
{
border-color:#CFCFCF;
}
ul.styleH04
{
border-width:0px 0px 1px 0px;
background:#EFEFEF;
background:-moz-linear-gradient(top,#FFFFFF,#EFEFEF);
background:-webkit-gradient(linear,0 0,0 100%,from(#FFFFFF),to(#EFEFEF));
}
ul.styleH04 li a
{
border:solid 1px transparent;
border-width:1px 1px 0px 1px;
}
ul.styleH04 li a:hover,
ul.styleH04 li a.current
{
border-width:1px 1px 0px 1px;
background:#F0F0F0;
background:-moz-linear-gradient(top,#F0F0F0,#FFFFFF);
background:-webkit-gradient(linear,0 0,0 100%,from(#F0F0F0),to(#FFFFFF));
}
Pagination Style I
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
css
/*****************************************************************/
/*I */
/*****************************************************************/
ul.styleI li,
ul.styleI li a
{
color:#FFFFFF;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
ul.styleI01 li a,
ul.styleI02 li a,
ul.styleI03 li a,
ul.styleI04 li a,
ul.styleI05 li a
{
color:#444444;
padding:6px 9px 6px 9px;
border:solid 1px #BCBCBC;
background:#F3F3F3;
background:-moz-linear-gradient(top,#FFFFFF 1px,#FEFEFE 1px,#F3F3F3);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#FEFEFE),color-stop(1,#F3F3F3));
}
ul.styleI li a img
{
*margin:2px 0px 2px 0px;
}
/*****************************************************************/
/*01 */
/*****************************************************************/
ul.styleI01 li a.first,
ul.styleI01 li a.previous,
ul.styleI01 li a.next,
ul.styleI01 li a.last,
ul.styleI01 li a.current,
ul.styleI01 li a:hover
{
border-color:#77AADD;
background:#DEEEFF;
background:-moz-linear-gradient(top,#FFFFFF 1px,#EBF5FF 1px,#DEEEFF);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#EBF5FF),color-stop(1,#DEEEFF));
}
/*****************************************************************/
/*02 */
/*****************************************************************/
ul.styleI02 li a.first,
ul.styleI02 li a.previous,
ul.styleI02 li a.next,
ul.styleI02 li a.last,
ul.styleI02 li a.current,
ul.styleI02 li a:hover
{
border-color:#BC8484;
background:#F2DFDF;
background:-moz-linear-gradient(top,#FFFFFF 1px,#F9EFEF 1px,#F2DFDF);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F9EFEF),color-stop(1,#F2DFDF));
}
/*****************************************************************/
/*03 */
/*****************************************************************/
ul.styleI03 li a.first,
ul.styleI03 li a.previous,
ul.styleI03 li a.next,
ul.styleI03 li a.last,
ul.styleI03 li a.current,
ul.styleI03 li a:hover
{
border-color:#74AF45;
background:#E2F4D3;
background:-moz-linear-gradient(top,#FFFFFF 1px,#EFF5E9 1px,#E2F4D3);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#EFF5E9),color-stop(1,#E2F4D3));
}
/*****************************************************************/
/*04 */
/*****************************************************************/
ul.styleI04 li a.first,
ul.styleI04 li a.previous,
ul.styleI04 li a.next,
ul.styleI04 li a.last,
ul.styleI04 li a.current,
ul.styleI04 li a:hover
{
border-color:#CE9900;
background:#FFE592;
background:-moz-linear-gradient(top,#FFFFFF 1px,#FFF0C1 1px,#FFE592);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#FFF0C1),color-stop(1,#FFE592));
}
/*****************************************************************/
/*05 */
/*****************************************************************/
ul.styleI05 li a.first,
ul.styleI05 li a.previous,
ul.styleI05 li a.next,
ul.styleI05 li a.last,
ul.styleI05 li a.current,
ul.styleI05 li a:hover
{
border-color:#9D9D9D;
background:#D9D9D9;
background:-moz-linear-gradient(top,#FFFFFF 1px,#EAEAEA 1px,#D9D9D9);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#EAEAEA),color-stop(1,#D9D9D9));
}
/*****************************************************************/
/*06 */
/*****************************************************************/
ul.styleI06 li a
{
background:#E6650C;
background:-moz-linear-gradient(top,#FF9C00,#E6650C);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF9C00),to(#E6650C));
}
ul.styleI06 li a.current,
ul.styleI06 li a:hover
{
background:#683664;
background:-moz-linear-gradient(top,#83457E,#683664);
background:-webkit-gradient(linear,0 0,0 100%,from(#83457E),to(#683664));
}
/*****************************************************************/
/*07 */
/*****************************************************************/
ul.styleI07 li a
{
background:#683664;
background:-moz-linear-gradient(top,#83457E,#683664);
background:-webkit-gradient(linear,0 0,0 100%,from(#83457E),to(#683664));
}
ul.styleI07 li a.current,
ul.styleI07 li a:hover
{
background:#E6650C;
background:-moz-linear-gradient(top,#FF9C00,#E6650C);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF9C00),to(#E6650C));
}
/*****************************************************************/
/*08 */
/*****************************************************************/
ul.styleI08 li a
{
background:#105C90;
background:-moz-linear-gradient(top,#2775AA,#105C90);
background:-webkit-gradient(linear,0 0,0 100%,from(#2775AA),to(#105C90));
}
ul.styleI08 li a.current,
ul.styleI08 li a:hover
{
background:#348800;
background:-moz-linear-gradient(top,#42AC00,#348800);
background:-webkit-gradient(linear,0 0,0 100%,from(#42AC00),to(#348800));
}
/*****************************************************************/
/*09 */
/*****************************************************************/
ul.styleI09 li a
{
background:#348800;
background:-moz-linear-gradient(top,#42AC00,#348800);
background:-webkit-gradient(linear,0 0,0 100%,from(#42AC00),to(#348800));
}
ul.styleI09 li a.current,
ul.styleI09 li a:hover
{
background:#966B5E;
background:-moz-linear-gradient(top,#B68D81,#966B5E);
background:-webkit-gradient(linear,0 0,0 100%,from(#B68D81),to(#966B5E));
}
/*****************************************************************/
/*10 */
/*****************************************************************/
ul.styleI10 li a
{
background:#A8436E;
background:-moz-linear-gradient(top,#C8618D,#A8436E);
background:-webkit-gradient(linear,0 0,0 100%,from(#C8618D),to(#A8436E));
}
ul.styleI10 li a.current,
ul.styleI10 li a:hover
{
background:#E6650C;
background:-moz-linear-gradient(top,#FF9C00,#E6650C);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF9C00),to(#E6650C));
}
/*****************************************************************/
/*11 */
/*****************************************************************/
ul.styleI11 li a
{
background:#1889B2;
background:-moz-linear-gradient(top,#26BDD5,#1889B2);
background:-webkit-gradient(linear,0 0,0 100%,from(#26BDD5),to(#1889B2));
}
ul.styleI11 li a.current,
ul.styleI11 li a:hover
{
background:#E6650C;
background:-moz-linear-gradient(top,#FF9C00,#E6650C);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF9C00),to(#E6650C));
}
/*****************************************************************/
/*12 */
/*****************************************************************/
ul.styleI12 li a
{
background:#208B32;
background:-moz-linear-gradient(top,#36A949,#208B32);
background:-webkit-gradient(linear,0 0,0 100%,from(#36A949),to(#208B32));
}
ul.styleI12 li a.current,
ul.styleI12 li a:hover
{
background:#E6650C;
background:-moz-linear-gradient(top,#FF9C00,#E6650C);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF9C00),to(#E6650C));
}
/*****************************************************************/
/*13 */
/*****************************************************************/
ul.styleI13 li a
{
background:#B11C34;
background:-moz-linear-gradient(top,#D63048,#B11C34);
background:-webkit-gradient(linear,0 0,0 100%,from(#D63048),to(#B11C34));
}
ul.styleI13 li a.current,
ul.styleI13 li a:hover
{
background:#E6650C;
background:-moz-linear-gradient(top,#FF9C00,#E6650C);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF9C00),to(#E6650C));
}
/*****************************************************************/
/*14 */
/*****************************************************************/
ul.styleI14 li a
{
background:#7D4835;
background:-moz-linear-gradient(top,#A3644F,#7D4835);
background:-webkit-gradient(linear,0 0,0 100%,from(#A3644F),to(#7D4835));
}
ul.styleI14 li a.current,
ul.styleI14 li a:hover
{
background:#E6650C;
background:-moz-linear-gradient(top,#FF9C00,#E6650C);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF9C00),to(#E6650C));
}
/*****************************************************************/
/*15 */
/*****************************************************************/
ul.styleI15 li a
{
background:#966B5E;
background:-moz-linear-gradient(top,#B68D81,#966B5E);
background:-webkit-gradient(linear,0 0,0 100%,from(#B68D81),to(#966B5E));
}
ul.styleI15 li a.current,
ul.styleI15 li a:hover
{
background:#348800;
background:-moz-linear-gradient(top,#41AB00,#348800);
background:-webkit-gradient(linear,0 0,0 100%,from(#41AB00),to(#348800));
}
/*****************************************************************/
/*16 */
/*****************************************************************/
ul.styleI16 li a
{
background:#E6650C;
background:-moz-linear-gradient(top,#FF9C00,#E6650C);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF9C00),to(#E6650C));
}
ul.styleI16 li a.current,
ul.styleI16 li a:hover
{
background:#348800;
background:-moz-linear-gradient(top,#42AC00,#348800);
background:-webkit-gradient(linear,0 0,0 100%,from(#42AC00),to(#348800));
}
/*****************************************************************/
/*17 */
/*****************************************************************/
ul.styleI17 li a
{
background:#105C90;
background:-moz-linear-gradient(top,#2775AA,#105C90);
background:-webkit-gradient(linear,0 0,0 100%,from(#2775AA),to(#105C90));
}
ul.styleI17 li a.current,
ul.styleI17 li a:hover
{
background:#AE2626;
background:-moz-linear-gradient(top,#DE423B,#AE2626);
background:-webkit-gradient(linear,0 0,0 100%,from(#DE423B),to(#AE2626));
}
/*****************************************************************/
/*18 */
/*****************************************************************/
ul.styleI18 li a
{
background:#474747;
background:-moz-linear-gradient(top,#5D5D5D,#474747);
background:-webkit-gradient(linear,0 0,0 100%,from(#5D5D5D),to(#474747));
}
ul.styleI18 li a.current,
ul.styleI18 li a:hover
{
background:#3377B5;
background:-moz-linear-gradient(top,#4798D6,#3377B5);
background:-webkit-gradient(linear,0 0,0 100%,from(#4798D6),to(#3377B5));
} 
