/* http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box */
#searchbox
{
    background: #aaa;
    background-image: -moz-linear-gradient(#fff, #ccc);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #ccc),color-stop(1, #fff));

    -moz-border-radius: 35px;
    border-radius: 35px;

    border-width: 1px;
    border-style: solid;
    border-color: #ccc #aaa #888;
    width: 500px;
    height: 35px;
    padding: 10px;
    margin: 100px auto 50px;
    overflow: hidden;
}

.ui-menu-item {
    text-align: left;
}

#search, #submit
{
    float: left;
}

#search
{
    padding: 5px 9px;
    height: 23px;
    width: 380px;
    border: 1px solid #a4c3ca;
    font: normal 13px 'trebuchet MS', arial, helvetica;
    background: #f1f1f1;

    -moz-border-radius: 50px 3px 3px 50px;
     border-radius: 50px 3px 3px 50px;
     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
     -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}

/* ----------------------- */

#submit
{
    background: #059302;
    background-image: -moz-linear-gradient(#c7dd09, #c7dd09);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #c7dd09),color-stop(1, #c7dd09));

    -moz-border-radius: 3px 50px 50px 3px;
    border-radius: 3px 50px 50px 3px;

    border-width: 1px;
    border-style: solid;
    border-color: #0eede6 #0eede6 #0eede6;

     -moz-box-shadow: 0 0 1px rgba(7, 237, 230), 0 1px 0 rgba(7, 237, 230) inset;
     -webkit-box-shadow: 0 0 1px rgba(7, 237, 230), 0 1px 0 rgba(7, 237, 230) inset;
     box-shadow: 0 0 1px rgba(7, 237, 230), 0 1px 0 rgba(7, 237, 230) inset;

    height: 35px;
    margin: 0 0 0 10px;
    padding: 0;
    width: 90px;
    cursor: pointer;
    font: bold 14px Arial, Helvetica;
    color: #03540d;

    text-shadow: 0 1px 0 rgba(7, 237, 230);
}

#submit:hover
{
    background: #c7dd09;
    background-image: -moz-linear-gradient(#059302, #c7dd09);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #059302),color-stop(1, #c7dd09));
}

#submit:active
{
    background: #059302;
    outline: none;

     -moz-box-shadow: 0 1px 4px rgba(7, 237, 230) inset;
     -webkit-box-shadow: 0 1px 4px rgba(7, 237, 230) inset;
     box-shadow: 0 1px 4px rgba(7, 237, 230) inset;
}

#submit::-moz-focus-inner
{
  border: none;
}

/* ----------------------- */

#search::-webkit-input-placeholder {
   color: #9c9c9c;
   font-style: italic;
}

#search:-moz-placeholder {
   color: #9c9c9c;
   font-style: italic;
}

#search.placeholder {
   color: #9c9c9c !important;
   font-style: italic;
}

#search:focus
{
    border-color: #0ccdf5;
    background: #c7dd09;
    outline: none;
}

#searchExamplebox
{
    background: #aaa;
    background-image: -moz-linear-gradient(#c7dd09, #059302);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #ccc),color-stop(1, #059302));

    -moz-border-radius: 35px;
    border-radius: 35px;

    border-width: 1px;
    border-style: solid;
    border-color: #059302 #c7dd09 #888;
    width: 500px;
    height: 35px;
    padding: 10px;
    margin: 100px auto 50px;
    overflow: hidden;
}

.ui-menu-item {
    text-align: left;
}

#searchExample, #submit
{
    float: left;
}

#searchExample
{
    padding: 5px 9px;
    height: 23px;
    width: 380px;
    border: 1px solid #a4c3ca;
    font: normal 13px 'trebuchet MS', arial, helvetica;
    background: #f1f1f1;

    -moz-border-radius: 50px 3px 3px 50px;
     border-radius: 50px 3px 3px 50px;
     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
     -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}

/* ----------------------- */

#submit
{
    background: #059302;
    background-image: -moz-linear-gradient(#c7dd09, #059302);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #059302),color-stop(1, #c7dd09));

    -moz-border-radius: 3px 50px 50px 3px;
    border-radius: 3px 50px 50px 3px;

    border-width: 1px;
    border-style: solid;
    border-color: #777 #555 #444;

     -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
     -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
     box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;

    height: 35px;
    margin: 0 0 0 10px;
    padding: 0;
    width: 90px;
    cursor: pointer;
    font: bold 14px Arial, Helvetica;
    color: #006187;

    text-shadow: 0 1px 0 rgba(0, 97, 135 );
}

#submit:hover
{
    background: #c7dd09;
    background-image: -moz-linear-gradient(#059302, #c7dd09);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #c7dd09),color-stop(1, #059302));
}

#submit:active
{
    background: #c7dd09;
    outline: none;

     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}

#submit::-moz-focus-inner
{
  border: none;
}

/* ----------------------- */

#searchExample::-webkit-input-placeholder {
   color: #9c9c9c;
   font-style: italic;
}

#searchExample:-moz-placeholder {
   color: #9c9c9c;
   font-style: italic;
}

#searchExample.placeholder {
   color: #c7dd09 !important;
   font-style: italic;
}

#searchExample:focus
{
    border-color: #09c0e6;
    background: #c7dd09;
    outline: none;
}