/*===============*/
/*Form styling
/*==============*/

/*=====text=====email====password====*/

input[type='text'], input[type='email'], input[type='password'], textarea, select {
    outline: none;
    display: block;
    padding: .5em;
    margin-bottom: .75em;
    border: 0.25em solid #eeeeee;
    width: 100%;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;

    resize: none;
}

textarea{
    height:150px;
}

input[type='text']:focus, input[type='email']:focus, input[type='password']:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #73c2fb;
}


/*=====button=====submit====reset====*/

input[type='button'], input[type='submit'], input[type='reset'], button, .button {
    outline: none;
    border: none;
    background: #80B2FF;
    border: 0.25em solid #4D94FF;
    cursor: pointer;
    padding: 8px 12px;
    color: whitesmoke;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    display: inline-block;
/*    margin-bottom: .75rem;*/
/*    margin: 1em 0 1em 0;*/

/*    font-weight: bold;*/
}

input[type='button']:hover, input[type='submit']:hover, input[type='reset']:hover, button:hover, .button:hover {
    box-shadow: inset 0 0 10em rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
}

input[type='button']:focus, input[type='submit']:focus, input[type='reset']:focus, button:focus, .button:focus,
input[type='button']:active, input[type='submit']:active,input[type='reset']:active, button:active, .button:active {
    box-shadow: inset 0 0 10em rgba(0, 0, 0, 0.2);
}


/* =====checkbox===== */

input[type="checkbox"] {
    -webkit-box-shadow: inset 0 1px 2px white, 0 1px 2px rgba(0, 0, 0, .2);
    -moz-box-shadow: inset 0 1px 2px white, 0 1px 2px rgba(0, 0, 0, .2);
    box-shadow: inset 0 1px 2px white, 0 1px 2px rgba(0, 0, 0, .2);

    -webkit-appearance: none;
    -moz-appearance: normal;

    -webkit-margin-start: 0;
    -webkit-margin-end: 5px;

    background: -webkit-linear-gradient(#fafafa, #dcdcdc);
    background: -moz-linear-gradient(#fafafa, #dcdcdc);
    background: -ms-linear-gradient(#fafafa, #dcdcdc);
    background: -o-linear-gradient(#fafafa, #dcdcdc);
    background: linear-gradient(#fafafa, #dcdcdc);

    /*    -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;*/

    outline:none;
    border: 1px solid #a0a0a0;
    display: inline-block;
    height: 16px;
    margin-bottom: 0;
    margin-top: 0;
    position: relative;
    top: 3px;
    vertical-align: baseline;
    width: 16px;
}

input[type="checkbox"]:disabled { 
    opacity: 0.75; 
}

input[type="checkbox"]:not(:disabled):not(.disabled):hover {
    background: -webkit-linear-gradient(#fff, #e6e6e6);
    background: -moz-linear-gradient(#fff, #e6e6e6);
    background: -ms-linear-gradient(#fff, #e6e6e6);
    background: -o-linear-gradient(#fff, #e6e6e6);
    background: linear-gradient(#fff, #e6e6e6);

    text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
    outline:none;
}

input[type="checkbox"]:active {
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
    background: -webkit-linear-gradient(#f0f0f0, #bebebe);
    background: -moz-linear-gradient(#f0f0f0, #bebebe);
    background: -ms-linear-gradient(#f0f0f0, #bebebe);
    background: -o-linear-gradient(#f0f0f0, #bebebe);
    background: linear-gradient(#f0f0f0, #bebebe);
    border: 1px solid #808080;
    padding-bottom: 4px;
    padding-top: 4px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
    outline:none;
}

input[type="checkbox"]:checked::before {
    content: url("images/tick.png");
    /*    content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAAmElEQVR42nXQMQ6EIBAFUI5OQ6TwHibacAIaIx4AbbiAtQGk429wg8lEKX4xzJswwAA0s64rpmlCrZvQGAPO+Z1xHPFgay1Ks8JlWQp6IqWEcw5s33cIIe7DeZ5LXvA4DqSUwPq+J80veF3Xf41t29B1XRPGGOkDtdafMIRwQ4LLNcMwEOi9J5B8Xc4ZSqkmrJgMnOdZ4Ss/HaFLUf+pI9MAAAAASUVORK5CYII=");*/
    height: 16px;
    left: 2px;
    position: absolute;
    outline:none;
}


/* =====radio===== */

input[type='radio'] {
    -webkit-box-shadow: inset 0 1px 2px white, 0 1px 2px rgba(0, 0, 0, .2);
    -moz-box-shadow: inset 0 1px 2px white, 0 1px 2px rgba(0, 0, 0, .2);
    box-shadow: inset 0 1px 2px white, 0 1px 2px rgba(0, 0, 0, .2);

    -webkit-appearance: none;
    -webkit-margin-start: 0;
    -webkit-margin-end: 5px;

    -webkit-transition: border 500ms;
    -moz-transition: border 500ms;
    -ms-transition: border 500ms;
    -o-transition: border 500ms;
    transition: border 500ms;

    background: -webkit-linear-gradient(#fafafa, #dcdcdc);
    background: -moz-linear-gradient(#fafafa, #dcdcdc);
    background: -ms-linear-gradient(#fafafa, #dcdcdc);
    background: -o-linear-gradient(#fafafa, #dcdcdc);
    background: linear-gradient(#fafafa, #dcdcdc);

    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;

    border: 1px solid #a0a0a0;
    display: inline-block;
    height: 15px;
    margin-top: 0;
    position: relative;
    top: 2px;
    vertical-align: baseline;
    width: 15px;
}

input[type='radio']:disabled { 
    opacity: .75 
}

input[type='radio']:not(:disabled):not(.disabled):hover {
    background: -webkit-linear-gradient(#fff, #e6e6e6);
    background: -moz-linear-gradient(#fff, #e6e6e6);
    background: -ms-linear-gradient(#fff, #e6e6e6);
    background: -o-linear-gradient(#fff, #e6e6e6);
    background: linear-gradient(#fff, #e6e6e6);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}

input[type='radio']:active {
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
    background: -webkit-linear-gradient(#f0f0f0, #bebebe);
    background: -moz-linear-gradient(#f0f0f0, #bebebe);
    background: -ms-linear-gradient(#f0f0f0, #bebebe);
    background: -o-linear-gradient(#f0f0f0, #bebebe);
    background: linear-gradient(#f0f0f0, #bebebe);

    border: 1px solid #808080;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}

input[type='radio']:checked::before {
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5);

    -webkit-margin-start: 4px;
    background: #808080;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    content: '';
    display: inline-block;
    height: 7px;
    left: 0;
    margin-top: 3px;
    margin-left: 3px;
    opacity: 1;
    position: absolute;
    top: 0;
    vertical-align: top;
    width: 7px;
}

/* =====select=====*/

select {
    -webkit-appearance: none;
    -webkit-padding-end: 20px;
    -webkit-padding-start: 5px;
    -webkit-user-select: none;

    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAYAAAARx7TFAAAAL0lEQVQIW4XKuQ0AIAwEsBs9m5sKhHgLd04SX6hXQIV7RCE9bbGHNY04h1PKGpAGy4V0EacAtlEAAAAASUVORK5CYII=");
    background-position: 95% 55%, left top;
    background-repeat: no-repeat, repeat;
}


.logout, input.logout{
    cursor: pointer;
    background: -webkit-linear-gradient(top, #efefef, #ddd);
    background: -moz-linear-gradient(top, #efefef, #ddd);
    background: -ms-linear-gradient(top, #efefef, #ddd);
    background: -o-linear-gradient(top, #efefef, #ddd);
    background: linear-gradient(top, #efefef, #ddd);
    color: #333;
    text-shadow: 0px 1px 1px rgba(255,255,255,1);
    border: 1px solid #ccc;
    font-weight: 100;
}

.logout:hover, input.logout:hover{
    background: -webkit-linear-gradient(top, #eee, #ccc);
    background: -moz-linear-gradient(top, #eee, #ccc);
    background: -ms-linear-gradient(top, #eee, #ccc);
    background: -o-linear-gradient(top, #eee, #ccc);
    background: linear-gradient(top, #eee, #ccc);
    border: 1px solid #bbb;
}

.logout:active, input.logout:active{
    background: -webkit-linear-gradient(top, #ddd, #aaa);
    background: -moz-linear-gradient(top, #ddd, #aaa);
    background: -ms-linear-gradient(top, #ddd, #aaa);
    background: -o-linear-gradient(top, #ddd, #aaa);
    background: linear-gradient(top, #ddd, #aaa);	
    border: 1px solid #999;
}

.logoutHeader {
    background:#DDD;
    border:solid 1px #FFF;
    border-radius:5px;
    box-shadow: 0px 0px 5px #CCC;
    background:-webkit-gradient(linear,left top,left bottom,from(#f4f4f4),to(#e8e8e8));
    background:-moz-linear-gradient(top,#f4f4f4,#e8e8e8);
    background:linear-gradient(top,#f4f4f4,#e8e8e8);
    padding:8px;
}


#motionHandler{
    cursor: pointer;
    background: #ABE3EB;
    color: #333;
    text-shadow: 0px 1px 1px rgba(255,255,255,1);
    border: none;
    width: 30px;
}

#donateForm .donateFormButton{
    outline: none;
    border: none;
    background: #f90;
    border: 0.25em solid yellow;
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    -webkit-font-smoothing: subpixel-antialiased !important;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 11px;
    color: whitesmoke;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    display: inline-block;
}

#donateForm .donateFormButton:hover {
    box-shadow: inset 0 0 10em rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
}





/*==========================*/
/*Place holder styling
/*=========================*/
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{
    font-family:Georgia,serif;
    color:#666;
    font-style:italic;
}

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder{
    color:#bbb;
    -webkit-transition:color .3s;
    -moz-transition:color .3s;
}

input:-moz-placeholder, textarea:-moz-placeholder{
    font-family:Georgia,serif;
    color:#666;
    font-style:italic;
}
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder{
    color:#aaa;
    -moz-transition:color .3s;
    -webkit-transition:color .3s;
}




/*================*/
/*hgroup
/*===============*/
h1{
    color:#fff;
    font-family:"Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    font-size:16px;
    font-weight:bold;
    
/*    background-color:#405a6a;
    background-image:-moz-linear-gradient(#829aa8, #405a6a);
    background-image:-webkit-linear-gradient(#829aa8, #405a6a);
    background-image:linear-gradient(#829aa8, #405a6a);
    background-repeat:repeat-x;
    
    padding:8px 18px;*/
}

h2{
    font-family: Optima, Segoe, Segoe UI, Candara, 'Calibri', Arial, sans-serif; 
    font-size: 18px;
    padding: 7px 0px 7px 10px;
    color: #2888DE;
}

h2 .gun{
    color: rgb(238,238,238) ;
    font-size: 22px;
    text-align: left;
}

h2 .bullet{
    color: #E5F1F9;
    font-size: 17px;
}

h3{   
    line-height: 20px;
    font-weight: bold;
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    -webkit-font-smoothing: subpixel-antialiased !important;
    font-size: 13px;
    color: #fff;
    padding: 3px 10px;
    margin: 10px 0px;
    height: 20px; 
    text-align: left;    
}

h4{
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    -webkit-font-smoothing: subpixel-antialiased !important;
    padding-left: 10px;
    padding-top: 10px;
    font-style: italic;
    font-weight: bold;
    font-size: 20px;
}

h5{
    color: red;
    font-size: 12px;
    padding-left: 5px;
    font-family:Georgia,serif;
}

h6{
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    -webkit-font-smoothing: subpixel-antialiased !important;
    width: 300px;  
    font-size: 130%;  
    font-weight: bold;
    padding: 6px 20px 6px 70px;  
    margin: 10px 0px 5px 0px;
    color: #555;
    background-color:#10A5CA; 
}

h7{
    font-family:"Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    color: #5bc0de;
    font-size: 20px;
}

h8{
    font-family:"Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    color: #c8232c;
    font-size: 20px;
}

h9{
    font-family: monospace;
    color: lime;
    font-size: 18px;
}

h10{
    font-family: monospace;
    color: #5bc0de;
    font-size: 20px;
}

h11{
    font-family: monospace;
    color: rgb(238,238,238);
    font-size: 15px;
}

h12{
    font-weight: bold;
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 13px;
    color: #fff;
}

h12:hover{
    color: lime;    
}

h13, .alert-success{
    font-family:Monaco,Menlo,Consolas,"Courier New",monospace;
    background-color:#dff0d8;
    border-color:#d6e9c6;
    color:#468847;
    padding:0.2em 0.2em;
    font-size: 90%;
    text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);
    background-color:#fcf8e3;
    border:1px solid #fbeed5;
    margin-top: 2em;
    margin-left: 0.3em;
    
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}

h14{
    font-family: Optima, "Segoe", "Segoe UI", Candara, "Calibri", Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: gray;
}

h15{
    font-family: Optima, "Segoe", "Segoe UI", Candara, "Calibri", Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: rgba(0,0,0,0.4);
}

h16{
    font-family:"Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    color: #51A7E8;
    font-size:90%;
}

h17{
    font-family:"Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    color: #D6D9DF;
    font-size:40px;
}

h18{
    font-family:"Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    color: #344654;
    font-size:30px;
    font-weight: bold;
}

/*.article:hover{
    background-image: url(images/kenya_blue.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;

    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}*/