/*
 *
 *  Programmer: Paul Staff
 *  Date: 2014.05.15
 *
 *  Copyright (c) 2014, nplexity, LLC.  All Rights Reserved.
 *  www.nplexity.com
 *
 *  dropdown.css
 *
 *
 *  This is the CSS stylesheet for dropdown.js dropdown elements.
 *
 *  To customize the dropdown elements, edit the custom style sections
 *  of the .dropdown input[type='text'], .dropdown ul, .dropdown ul li,
 *  and .dropdown ul li:hover blocks.
 *
 *  DO NOT EDIT the sections titled 'Required Styles', as these are
 *  necessary to properly display the dropdown.
 *
 *
 */

.dropdown {

    /* Required Styles */
    position: relative;
    margin: 0;
    padding: 0;
    display: inline-block;

    /* Add Custom Styles Here */
    cursor: pointer;
    width: 100%;

}

.dropdown input[type='text'] {

    /* Add Custom Styles Here */

}

.dropdown ul {

    /* Required Styles */
    position: absolute;
    display: none;
    list-style-type: none;
    padding: 0;
    z-index: 10;

    /* Add Custom Styles Here */
    border: 1px solid #CCCCCC;
    box-shadow: 2px 2px 5px 0 #CCCCCC, -2px 2px 5px 0 #CCCCCC;
    margin: 0;
    background: #FFFFFF;
    color: #333333;
    text-align: left;
    font-size: 14px;
    font-family: Helvetica, Verdana, Arial, sans-serif;

}

.dropdown ul li {

    /* Required Styles */
    display: block;
    width: 100%;
    box-sizing: border-box;
        -moz-box-sizing: border-box;

    /* Add Custom Styles Here */
    cursor: pointer;
    font-size: 22px;
    line-height: 32px;
    padding: 10px;

}

.dropdown ul li:hover {

    /* Add Custom Styles Here */
    background: #00B5E7;
    color: #FFFFFF;

}

.dropdown ul li .val {

    /* Required Styles */
    display: none;

}

.dropdown .arrow {

    /* Required Styles */
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 0;
    height: 0;

    /* Add Custom Styles Here */
    right: 10px;  /* Controls offset from right side of input */
    border-top: 7px solid #000000;  /* Adjust the border width to control arrow size */
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;

}

.dropdown .chevron {

    /* Required Styles */
    position: absolute;
    top: 55%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);

    /* Add Custom Styles Here */
    right: 0px;  /* Controls offset from right side of input */
    height: 4px;
    width: 30px;

}

.dropdown .chevron:before {

    /* Required Styles */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 51%;

    /* Add Custom Styles Here */
    background: #00B5E7;  /* Color for left side of chevron */
    -webkit-transform: skew(0deg, 20deg);  /* Adjust the left skew to make the angle of inclination steeper or shallower */
    -moz-transform: skew(0deg, 20deg);
    -ms-transform: skew(0deg, 20deg);
    -o-transform: skew(0deg, 20deg);
    transform: skew(0deg, 20deg);

}

.dropdown .chevron:after {

    /* Required Styles */
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;

    /* Add Custom Styles Here */
    background: #00B5E7;  /* Color for left side of chevron */
    -webkit-transform: skew(0deg, -20deg);  /* Adjust the left skew to make the angle of inclination steeper or shallower */
    -moz-transform: skew(0deg, -20deg);
    -ms-transform: skew(0deg, -20deg);
    -o-transform: skew(0deg, -20deg);
    transform: skew(0deg, -20deg);
}​