<style>.citynote-ir{
display: inline-block;
text-decoration: none;
outline: none;
cursor: pointer;
font-size:medium;
font:bold 14px 'BMorvarid','BMorvarid',Morvarid,Tahoma;
padding: 2px;
color: #555;
text-shadow: 0 1px 0 #fff;
background: #f5f5f5;
background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f0f0f0));
background: -moz-linear-gradient(top, #f9f9f9, #f0f0f0);
border: 1px solid #dedede;
border-color: #dedede #d8d8d8 #d3d3d3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #fbfbfb;
-moz-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #fbfbfb;
box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #fbfbfb;
}
.citynote-ir:hover, .citynote-ir:focus{
color: #555;
background: #efefef;
background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#e9e9e9));
background: -moz-linear-gradient(top, #f9f9f9, #e9e9e9);
border-color: #ccc;
-webkit-box-shadow: 0 2px 1px #e0e0e0, inset 0 1px 0 #fbfbfb;
-moz-box-shadow: 0 2px 1px #e0e0e0, inset 0 1px 0 #fbfbfb;
box-shadow: 0 1px 2px #e0e0e0, inset 0 1px 0 #fbfbfb;
}
.citynote-ir:active{
position: relative;
top: 1px;
color: #555;
background: #efefef;
background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#f4f4f4));
background: -moz-linear-gradient(top, #eaeaea, #f4f4f4);
border-color: #c6c6c6;
-webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #ddd;
-moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #ddd;
box-shadow: 0 1px 0 #fff, inset 0 0 5px #ddd;
}
.citynote-ir.rounded{
padding: 8px 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
input.citynote-ir, button.citynote-ir{
*width: auto; /* IE7 Fix */
*overflow: visible; /* IE7 Fix */
}
.citynote-ir img{
border: none;
vertical-align: bottom;
}
/* ----- ---- --- -- - Small buttons - -- --- ---- ----- */
.citynote-ir.small{
padding: 5px 11px;
font-size: 11px;
font-weight: normal;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.citynote-ir.small.rounded{
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
}
/* ----- ---- --- -- - Large buttons - -- --- ---- ----- */
.citynote-ir.large{
padding: 12px 15px;
font-size: 20px;
font-weight: normal;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.citynote-ir.large.rounded{
padding: 12px 22px;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
}
/*
------------------------------------------------------------------------
------ ----- ---- --- -- - Color Variations - -- --- ---- ----- ------
------------------------------------------------------------------------
*/
/* ----- ---- --- -- - Light Blue - -- --- ---- ----- */
.citynote-ir.light_blue{
background: #92dbf6;
background: -webkit-gradient(linear, left top, left bottom, from(#abe4f8), to(#6fcef3));
background: -moz-linear-gradient(top, #abe4f8, #6fcef3);
border-color: #7cbdd5;
color: #444;
text-shadow: 0 1px 0 #b6e6f9;
-webkit-box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 0 #c0ebfa;
-moz-box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 0 #c0ebfa;
box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 0 #c0ebfa;
}
.citynote-ir.light_blue:hover, .buttonPro.light_blue:focus{
background: #85d6f5;
background: -webkit-gradient(linear, left top, left bottom, from(#b1e9fd), to(#66c6ea));
background: -moz-linear-gradient(top, #b1e9fd, #66c6ea);
border-color: #66a8bf;
-webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #c0ebfa;
-moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #c0ebfa;
box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #c0ebfa;
}
.citynote-ir.light_blue:active{
background: #92dbf6;
border-color: #66a8bf;
-webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #66a8bf;
-moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #66a8bf;
box-shadow: 0 1px 0 #fff, inset 0 0 5px #66a8bf;
}
/* ----- ---- --- -- - Blue - -- --- ---- ----- */
.citynote-ir.blue{
background: #377ad0;
background: -webkit-gradient(linear, left top, left bottom, from(#52a8e8), to(#377ad0));
background: -moz-linear-gradient(top, #52a8e8, #377ad0);
border-color: #4081af #2e69a3 #20559a;
color: #fff;
text-shadow: 0 1px 1px #4081af;
-webkit-box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 1px #72b9eb;
-moz-box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 1px #72b9eb;
box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 1px #72b9eb;
}
.citynote-ir.blue:hover, .buttonPro.blue:focus{
background: #206bcb;
background: -webkit-gradient(linear, left top, left bottom, from(#3e9ee5), to(#206bcb));
background: -moz-linear-gradient(top, #3e9ee5, #206bcb);
border-color: #2a73a6 #165899 #07428f;
-webkit-box-shadow: 0 1px 0 0 #fff, inset 0 1px 0 0 #62b1e9;
-moz-box-shadow: 0 1px 0 0 #fff, inset 0 1px 0 0 #62b1e9;
box-shadow: 0 1px 0 0 #fff, inset 0 1px 0 0 #62b1e9;
}
.citynote-ir.blue:active{
background: #3282d3;
border-color: #154c8c #154c8c #0e408e;
text-shadow: 0 -1px 1px #1d62ab;
-webkit-box-shadow: 0 1px 0 0 #fff, inset 0 0 6px 3px #1657b5;
-moz-box-shadow: 0 1px 0 0 #fff, inset 0 0 6px 3px #1657b5;
box-shadow: 0 1px 0 0 #fff, inset 0 0 6px 3px #1657b5;
}
/* ----- ---- --- -- - Green - -- --- ---- ----- */
.citynote-ir.green{
background: #7fbf4d;
background: -webkit-gradient(linear, left top, left bottom, from(#7fbf4d), to(#63a62f));
background: -moz-linear-gradient(top, #7fbf4d, #63a62f);
border-color: #63a62f;
color: #fff;
text-shadow: 0 1px 0 #53961e;
-webkit-box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 0 #96d865;
-moz-box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 0 #96d865;
box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 0 #96d865;
}
.citynote-ir.green:hover, .buttonPro.green:focus{
background: #76b347;
background: -webkit-gradient(linear, left top, left bottom, from(#86c755), to(#5ea12a));
background: -moz-linear-gradient(top, #86c755, #5ea12a);
border-color: #53961e;
-webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #96d865;
-moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #96d865;
box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #96d865;
}
.citynote-ir.green:active{
background: #7fbf4d;
border-color: #53961e;
-webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #53961e;
-moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #53961e;
box-shadow: 0 1px 0 #fff, inset 0 0 5px #53961e;
}
/* ----- ---- --- -- - Red - -- --- ---- ----- */
.citynote-ir.red{
background: #e6433d;
background: -webkit-gradient(linear, left top, left bottom, from(#f8674b), to(#d54746));
background: -moz-linear-gradient(top, #f8674b, #d54746);
border-color: #d1371c #d1371c #9f220d;
color: #fff;
text-shadow: 0 1px 1px #961a07;
-webkit-box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 0 #ff9573;
-moz-box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 0 #ff9573;
box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 0 #ff9573;
}
.citynote-ir.red:hover, .buttonPro.red:focus{
background: #dd3a37;
background: -webkit-gradient(linear, left top, left bottom, from(#ff7858), to(#cc3a3b));
background: -moz-linear-gradient(top, #ff7858, #cc3a3b);
border-color: #961a07;
-webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ff9573;
-moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ff9573;
box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ff9573;
}
.citynote-ir.red:active{
background: #e6433d;
border-color: #961a07;
-webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #961a07;
-moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #961a07;
box-shadow: 0 1px 0 #fff, inset 0 0 5px #961a07;
}
/* ----- ---- --- -- - Orange - -- --- ---- ----- */
.citynote-ir.orange{
background: #ee8f1f;
background: -webkit-gradient(linear, left top, left bottom, from(#f5b026), to(#f48423));
background: -moz-linear-gradient(top, #f5b026, #f48423);
border-color: #e6791c #e6791c #d86f15;
color: #fff;
text-shadow: 0 1px 1px #b85300;
-webkit-box-shadow: 0 1px 2px #d7e9a4, inset 0 1px 0 #f8d898;
-moz-box-shadow: 0 1px 2px #d7e9a4, inset 0 1px 0 #f8d898;
box-shadow: 0 1px 2px #d7e9a4, inset 0 1px 0 #f8d898;
}
.citynote-ir.orange:hover, .buttonPro.orange:focus{
background: #e38512;
background: -webkit-gradient(linear, left top, left bottom, from(#ffbb33), to(#eb7b1a));
background: -moz-linear-gradient(top, #ffbb33, #eb7b1a);
border-color: #d0680c;
-webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ffdf9e;
-moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ffdf9e;
box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ffdf9e;
}
.citynote-ir.orange:active{
background: #ee8f1f;
border-color: #d0680c;
-webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #d0680c;
-moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #d0680c;
box-shadow: 0 1px 0 #fff, inset 0 0 5px #d0680c;
}
/* ----- ---- --- -- - Yellow - -- --- ---- ----- */
.citynote-ir.yellow{
background: #f9e327;
background: -webkit-gradient(linear, left top, left bottom, from(#fceb4c), to(#ebd611));
background: -moz-linear-gradient(top, #fceb4c, #ebd611);
border-color: #dcc700 #dcc700 #c2b00b;
color: #444;
text-shadow: 0 1px 1px #ffff98;
-webkit-box-shadow: 0 1px 2px #d7e9a4, inset 0 1px 0 #fee395;
-moz-box-shadow: 0 1px 2px #d7e9a4, inset 0 1px 0 #fee395;
box-shadow: 0 1px 2px #d7e9a4, inset 0 1px 0 #fee395;
}
.citynote-ir.yellow:hover, .buttonPro.yellow:focus{
background: #ebd611;
background: -webkit-gradient(linear, left top, left bottom, from(#fffa58), to(#e1cd00));
background: -moz-linear-gradient(top, #fffa58, #e1cd00);
border-color: #cebb10;
-webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #fee395;
-moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #fee395;
box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #fee395;
}
.citynote-ir.yellow:active{
background: #f9e327;
border-color: #cebb10;
-webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #cebb10;
-moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #cebb10;
box-shadow: 0 1px 0 #fff, inset 0 0 5px #cebb10;
}
/* ----- ---- --- -- - Pink - -- --- ---- ----- */
.citynote-ir.pink{
background: #f87bca;
background: -webkit-gradient(linear, left top, left bottom, from(#f87bca), to(#ec56b5));
background: -moz-linear-gradient(top, #f87bca, #ec56b5);
border-color: #e54aac #e54aac #cc3695;
color: #fff;
text-shadow: 0 1px 1px #c02589;
-webkit-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #f1b9dd;
-moz-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #f1b9dd;
box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #f1b9dd;
}
.citynote-ir.pink:hover, .buttonPro.pink:focus{
background: #f075c3;
background: -webkit-gradient(linear, left top, left bottom, from(#ff85d3), to(#e34dac));
background: -moz-linear-gradient(top, #ff85d3, #e34dac);
border-color: #c02589;
-webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #f1b9dd;
-moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #f1b9dd;
box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #f1b9dd;
}
.citynote-ir.pink:active{
background: #f87bca;
border-color: #c02589;
-webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #c02589;
-moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #c02589;
box-shadow: 0 1px 0 #fff, inset 0 0 5px #c02589;
}
/* ----- ---- --- -- - Purple - -- --- ---- ----- */
.citynote-ir.purple{
background: #995dc8;
background: -webkit-gradient(linear, left top, left bottom, from(#c785e5), to(#995dc8));
background: -moz-linear-gradient(top, #c785e5, #995dc8);
border-color: #7c45aa #7c45aa #5d288a;
color: #fff;
text-shadow: 0 1px 1px #370662;
-webkit-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #ce8ded;
-moz-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #ce8ded;
box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #ce8ded;
}
.citynote-ir.purple:hover, .buttonPro.purple:focus{
background: #8b50ba;
background: -webkit-gradient(linear, left top, left bottom, from(#cc8aea), to(#884eb8));
background: -moz-linear-gradient(top, #cc8aea, #884eb8);
border-color: #5d288a;
-webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ce8ded;
-moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ce8ded;
box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ce8ded;
}
.citynote-ir.purple:active{
background: #995dc8;
border-color: #5d288a;
-webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #5d288a;
-moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #5d288a;
box-shadow: 0 1px 0 #fff, inset 0 0 5px #5d288a;
}
/* ----- ---- --- -- - Grey - -- --- ---- ----- */
.citynote-ir.grey{
background: #969696;
background: -webkit-gradient(linear, left top, left bottom, from(#ababab), to(#818181));
background: -moz-linear-gradient(top, #ababab, #818181);
border-color: #a0a0a0 #7c7c7c #717171;
color: #fff;
text-shadow: 0 1px 1px #444;
-webkit-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #bebebe;
-moz-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #bebebe;
box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #bebebe;
}
.citynote-ir.grey:hover, .buttonPro.grey:focus{
background: #868686;
background: -webkit-gradient(linear, left top, left bottom, from(#b0b0b0), to(#6f6f6f));
background: -moz-linear-gradient(top, #b0b0b0, #6f6f6f);
border-color: #666 #666 #606060;
-webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #bebebe;
-moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #bebebe;
box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #bebebe;
}
.citynote-ir.grey:active{
background: #909090;
border-color: #606060;
-webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #606060;
-moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #606060;
box-shadow: 0 1px 0 #fff, inset 0 0 5px #606060;
}
/* ----- ---- --- -- - Black - -- --- ---- ----- */
.citynote-ir.black{
background: #525252;
background: -webkit-gradient(linear, left top, left bottom, from(#5e5e5e), to(#434343));
background: -moz-linear-gradient(top, #5e5e5e, #434343);
border-color: #4c4c4c #313131 #1f1f1f;
color: #fff;
text-shadow: 0 1px 1px #2e2e2e;
-webkit-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #868686;
-moz-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #868686;
box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #868686;
}
.citynote-ir.black:hover, .buttonPro.black:focus{
background: #4b4b4b;
background: -webkit-gradient(linear, left top, left bottom, from(#686868), to(#363636));
background: -moz-linear-gradient(top, #686868, #363636);
border-color: #313131;
-webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #868686;
-moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #868686;
box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #868686;
}
.citynote-ir.black:active{
background: #525252;
border-color: #313131;
-webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #313131;
-moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #313131;
box-shadow: 0 1px 0 #fff, inset 0 0 5px #313131;
}
</style>
