/*---------- left aligned button ----------*/
.background{
background:#AAA;
}
.btn{
display:block;
position:relative;
background:#AAA;
padding:5px;
margin:0px;
float:left;
color:#FFF !important;
text-decoration:none;
cursor:pointer;
}
.btn *{
font-style:normal;
background-image:url('images/btn2.png');
background-repeat:no-repeat;
display:block;
position:relative;
}
.btn i{
background-position:top left;
position:absolute;
margin-bottom:-5px;
top:0;
left:0;
width:5px;
height:5px;
}
.btn span{
background-position:bottom left;
left:-5px;
padding:0 0 5px 10px;
margin-bottom:-5px;
}
.btn span i{
background-position:bottom right;
margin-bottom:0;
position:absolute;
left:100%;
width:10px;
height:100%;
top:0;
}
.btn span span{
background-position:top right;
position:absolute;
right:-10px;
margin-left:10px;
top:-5px;
height:0;
}
* html .btn span,
* html .btn i{
float:left;
width:auto;
background-image:none;
cursor:pointer;
}
.btn.blue{
background:#188194;
}
.btn.green{
background:#9D4;
}
.btn.lime{
background:#BBCE00;
}
.btn.pink{
background:#E1A;
}
.btn:hover{
background-color:#2AE;
color:#FFF;
}
.btn:active{
background-color:#083D47;
color:#FFF;
}
.btn[class]{
background-image:url('images/shade.png');
background-position:bottom;
}
* html .btn{
border:3px double #AAA;
}
* html .btn.blue{
border-color:#2AE;
}
* html .btn.green{
border-color:#9D4;
}
* html .btn.lime{
border-color:#BBCE00;
}
* html .btn.pink{
border-color:#E1A;
}
* html .btn:hover{
border-color:#A00;
}
/*---------- centered button ----------*/
.btnC{
display:block;
position:relative;
background:#AAA;
padding:5px;
width:120px;
margin:0px auto;
color:#FFF;
text-decoration:none;
cursor:pointer;
text-align:center;
font-weight:bold;
}
.btnC *{
font-style:normal;
background-image:url('images/btn2.png');
background-repeat:no-repeat;
display:block;
position:relative;
}
.btnC i{
background-position:top left;
position:absolute;
margin-bottom:-5px;
top:0;
left:0;
width:5px;
height:5px;
}
.btnC span{
background-position:bottom left;
left:-5px;
padding:0 0 5px 10px;
margin-bottom:-5px;
}
.btnC span i{
background-position:bottom right;
margin-bottom:0;
position:absolute;
left:100%;
width:10px;
height:100%;
top:0;
}
.btnC span span{
background-position:top right;
position:absolute;
right:-10px;
margin-left:10px;
top:-5px;
height:0;
}
* html .btnC span,
* html .btnC i{
width:120px;
text-align:center;
padding:0px;
display:block;
margin:0px auto;
background-image:none;
cursor:pointer;
}
.btnC.blue{
background:#188194;
}
.btnC.green{
background:#9D4;
}
.btnC.lime{
background:#BBCE00;
}
.btnC.pink{
background:#E1A;
}
.btnC:hover{
background-color:#2AE;
color:#FFF !important;
}
.btnC:active{
background-color:#083D47;
color:#FFF !important;
}
.btnC[class]{
background-image:url('images/shade.png');
background-position:bottom;
}
* html .btnC{
border:3px double #AAA;
}
* html .btnC.blue{
border-color:#2AE;
}
* html .btnC.green{
border-color:#9D4;
}
* html .btnC.lime{
border-color:#BBCE00;
}
* html .btnC.pink{
border-color:#E1A;
}
* html .btnC:hover{
border-color:#A00;
}
/*---------- centered button ----------*/
.btnC2{
display:block;
position:relative;
background:#AAA;
padding:5px;
margin:0px auto;
min-width:100px;
max-width:490px;
color:#FFF;
text-decoration:none;
cursor:pointer;
text-align:center;
}
.btnC2 *{
font-style:normal;
background-image:url('images/btn2.png');
background-repeat:no-repeat;
display:block;
position:relative;
text-align:center;
}
.btnC2 i{
background-position:top left;
position:absolute;
margin-bottom:-5px;
top:0;
left:0;
width:5px;
height:5px;
}
.btnC2 span{
background-position:bottom left;
left:-5px;
padding:0 0 5px 10px;
margin-bottom:-5px;
}
.btnC2 span i{
background-position:bottom right;
margin-bottom:0;
position:absolute;
left:100%;
width:10px;
height:100%;
top:0;
}
.btnC2 span span{
background-position:top right;
position:absolute;
right:-10px;
margin-left:10px;
top:-5px;
height:0;
}
* html .btnC2 span,
* html .btnC2 i{
width:auto;
text-align:center;
padding:0px;
margin:0px auto;
background-image:none;
cursor:pointer;
}
.btnC2.blue{
background:#2AE;
}
.btnC2.green{
background:#9D4;
}
.btnC2.lime{
background:#BBCE00;
}
.btnC2.pink{
background:#E1A;
}
.btnC2:hover{
background-color:#A00;
color:#FFF;
}
.btnC2:active{
background-color:#444;
color:#FFF;
}
.btnC2[class]{
background-image:url('images/shade.png');
background-position:bottom;
}
* html .btnC2{
border:3px double #AAA;
}
* html .btnC2.blue{
border-color:#2AE;
}
* html .btnC2.green{
border-color:#9D4;
}
* html .btnC2.lime{
border-color:#BBCE00;
}
* html .btnC2.pink{
border-color:#E1A;
}
* html .btnC2:hover{
border-color:#A00;
}
/*---------- right aligned button ----------*/
.btnR{
display:block;
position:relative;
background:#AAA;
padding:5px;
float:right;
color:#FFF;
text-decoration:none;
cursor:pointer;
}
.btnR *{
font-style:normal;
background-image:url('images/btn2.png');
background-repeat:no-repeat;
display:block;
position:relative;
}
.btnR i{
background-position:top left;
position:absolute;
margin-bottom:-5px;
top:0;
left:0;
width:5px;
height:5px;
}
.btnR span{
background-position:bottom left;
left:-5px;
padding:0 0 5px 10px;
margin-bottom:-5px;
}
.btnR span i{
background-position:bottom right;
margin-bottom:0;
position:absolute;
left:100%;
width:10px;
height:100%;
top:0;
}
.btnR span span{
background-position:top right;
position:absolute;
right:-10px;
margin-left:10px;
top:-5px;
height:0;
}
* html .btnR span,
* html .btnR i{
float:right;
width:auto;
background-image:none;
cursor:pointer;
}
.btnR.blue{
background:#2AE;
}
.btnR.green{
background:#9D4;
}
.btnR.lime{
background:#BBCE00;
}
.btnR.pink{
background:#E1A;
}
.btnR:hover{
background-color:#A00;
color:#FFF;
}
.btnR:active{
background-color:#444;
color:#FFF;
}
.btnR[class]{
background-image:url('images/shade.png');
background-position:bottom;
}
* html .btnR{
border:3px double #AAA;
}
* html .btnR.blue{
border-color:#2AE;
}
* html .btnR.green{
border-color:#9D4;
}
* html .btnR.lime{
border-color:#BBCE00;
}
* html .btnR.pink{
border-color:#E1A;
}
* html .btnR:hover{
border-color:#A00;
}
/* MY EXTRAS */
.btn2{
display:block;
position:relative;
background:#AAA;
padding:5px;
margin:0px;
float:left;
color:#2B4E2E;
text-decoration:none;
cursor:pointer;
}
.btn2 *{
font-style:normal;
background-image:url('images/btn22.png');
background-repeat:no-repeat;
display:block;
position:relative;
}
.btn2 i{
background-position:top left;
position:absolute;
margin-bottom:-5px;
top:0;
left:0;
width:5px;
height:5px;
}
.btn2 span{
background-position:bottom left;
left:-5px;
padding:0 0 5px 10px;
margin-bottom:-5px;
}
.btn2 span i{
background-position:bottom right;
margin-bottom:0;
position:absolute;
left:100%;
width:10px;
height:100%;
top:0;
}
.btn2 span span{
background-position:top right;
position:absolute;
right:-10px;
margin-left:10px;
top:-5px;
height:0;
}
* html .btn2 span,
* html .btn2 i{
float:left;
width:auto;
background-image:none;
cursor:pointer;
}
.btn2.blue{
background:#2AE;
}
.btn2.green{
background:#9D4;
}
.btn2.lime{
background:#BBCE00;
}
.btn2.pink{
background:#E1A;
}
.btn2:hover{
background-color:#2B4E2E;
color:#FFF;
}
.btn2:active{
background-color:#2B4E2E;
color:#FFF;
}
.btn2[class]{
background-image:url('images/shade.png');
background-position:bottom;
}
* html .btn2{
border:3px double #AAA;
}
* html .btn2.blue{
border-color:#2AE;
}
* html .btn2.green{
border-color:#9D4;
}
* html .btn2.lime{
border-color:#BBCE00;
}
* html .btn2.pink{
border-color:#E1A;
}
* html .btn2:hover{
border-color:#A00;
}
.big{
font-size:120%;
font-weight:bold;
}