/*
    Sections:
        - Standard Colours Used
        - Media Queries
        - Text & Headings
        - Divs & Controls

*/


/* Colours 
Blue Buttons #5292BE
Grey Icons #9E9E9E
Yellow Ratings #FFDA44
Labels #606060
Default Text #545454 {darkest gray}
Lighter Grey Text darkgray
Borders
Hover/Highlight: #D3D3D3
Borders: #D0D0D0
*/


@import url('https://fonts.googleapis.com/css?family=Open+Sans');


/*** Media Queries ***/
/*  small screen 414px and below (6S Plus and smaller)
*   medium_small screen 414px and below (iPad)
*   medium => 768px (iPad Pro)
*   large => 1024px
*/




/* iPhone 8 Plus and smaller */
@media screen and (max-width: 414px){
    
    html {
        font-size: 16px; /* was 13px */
    }
    
    body {
        font-size: 16px; /* was 13px */
    }
    
    .hide_medium_small_screen {
        display: none;
    }
    
    .hide_small_screen {
        display: none;
    }
    
    
    .small_screen_only {
        display: none;
    }
    
    .left-column {
        /*background-color:greenyellow;*/
        width: 100%;
        box-sizing: border-box; /*prevent padding increasing size beyond 100% */
    }
    
    .rwd-con-half {
        /*background-color:lightgreen;*/
        float:left;
        box-sizing: border-box; /*prevent padding increasing size beyond 100% */
        padding: 0px 0px 0px 0px;
        width: 100%;
    }
    
    .rwd-con-50, .rwd-con-33 { /* two columns of equal size */
        clear:left;
        box-sizing: border-box; /*prevent padding increasing size beyond 100% */
        padding: 0px 0px 0px 0px;
        width: 100%;
    }
    
    .vintage-image{
        box-sizing: border-box; /*prevent padding increasing size beyond 100%*/
        border-bottom: solid 1px lightgray;
        margin-bottom:10px;
        margin-right:10px;
        margin-left:10px;
        padding:5px;
    }
   
 
}


@media screen and (min-width: 415px) and (max-width: 833px)  {
    
    html {
        font-size: 14px;
    }
    
    body {
        font-size: 14px;
    }
    
    .small_screen_only {
        display:none;
    }
    
    .show_medium_screen {
        display:none;
    }
    
    .hide_medium_screen {
        display:none;
    }
    

    .rwd-con-33 { /* one third */
        /*background-color:yellow;*/
        float:left;
        box-sizing: border-box; /*prevent padding increasing size beyond 100% */
        padding: 0px 0px 0px 0px;
        width: 33%;
    }
    
    .rwd-con-66 { /* two thirds */
        /*background-color:yellow;*/
        float:left;
        box-sizing: border-box; /*prevent padding increasing size beyond 100% */
        padding: 0px 0px 0px 0px;
        width: 66%;
    }
    
    .rwd-con-50 { /* two columns of equal size */
        /*background-color:yellow;*/
        float:left;
        box-sizing: border-box; /*prevent padding increasing size beyond 100% */
        padding: 0px 0px 0px 0px;
        width: 50%;
    }
    
    .rwd-con-100 { /* one column */
        /*background-color:lightsalmon;*/
        float:left;
        box-sizing: border-box; /*prevent padding increasing size beyond 100% */
        padding: 0px 0px 0px 0px;
        width: 100%;
    }
    
    .rwd-con-half {
        /*background-color:lightpink;*/
        float:left;
        box-sizing: border-box; /*prevent padding increasing size beyond 100% */
        padding: 0px 0px 0px 0px;
        width: 40%;
    }
    
    .left-column {
        /*background-color:greenyellow;*/
        float:left;
        width: 20%;
        padding: 0px 0px 0px 0px;
        box-sizing: border-box; /*prevent padding increasing size beyond 100% */
    }
    
    .vintage-image{
        box-sizing: border-box; /*prevent padding increasing size beyond 100%*/
        margin-bottom:10px;
        margin-right:10px;
        margin-left:10px;
        padding:5px;
    }
  
}


/* Bigger than iPad */
@media screen and (min-width: 834px) {
    
    html {
        font-size: 16px;
        margin-left: calc(100vw - 100%); /* magic scrollbar hack */
    }
    
    body {
        font-size: 16px;
    }
    
    .small_screen_only {
        display: none;
    }
    
    .show_medium_screen {
        display: none;
    }
    
    .hide_medium_screen {
        display: none;
    }
    
    .rwd-con-33 { /* one third */
        /*background-color:yellow;*/
        float:left;
        box-sizing: border-box; /*prevent padding increasing size beyond 100% */
        padding: 0px 0px 0px 0px;
        width: 33%;
    }
    
    .rwd-con-66 { /* two thirds */
        /*background-color:yellow;*/
        float:left;
        box-sizing: border-box; /*prevent padding increasing size beyond 100% */
        padding: 0px 0px 0px 0px;
        width: 66%;
    }
    
    .rwd-con-50 { /* two columns of equal size */
        /*background-color:yellow;*/
        float:left;
        box-sizing: border-box; /*prevent padding increasing size beyond 100% */
        padding: 0px 0px 0px 0px;
        width: 50%;
    }
    
    .rwd-con-100 { /* one column */
        /*background-color:lightsalmon;*/
        float:left;
        box-sizing: border-box; /*prevent padding increasing size beyond 100% */
        padding: 0px 0px 0px 0px;
        width: 100%;
    }
    
    .rwd-con-half {
        /*background-color:lightpink;*/
        float:left;
        box-sizing: border-box; /*prevent padding increasing size beyond 100% */
        padding: 0px 0px 0px 0px;
        width: 40%;
    }
    
    .left-column {
        /*background-color:greenyellow;*/
        float:left;
        width: 20%;
        padding: 0px 0px 0px 0px;
        box-sizing: border-box; /*prevent padding increasing size beyond 100% */
    }
    
    .vintage-image{
        box-sizing: border-box; /*prevent padding increasing size beyond 100%*/
        margin-bottom:10px;
        margin-right:10px;
        margin-left:10px;
        padding:5px;
    }
    

    
}





/* Text & Headings */



body {
    font-family: 'arial', 'helvetica',serif;
    font-weight: 400;
    line-height: 1.45;
    color: #545454;
}

body a{
    text-decoration: none;
    color: inherit;
}

body a:hover{
    text-decoration: underline;
    color: inherit;
}


/*h1 {
    font-size: 16pt;
    margin-top: 0px;
    margin-bottom:5px;
    color: #545454;
}

h2 {
    font-size: 1.5em;
    font-weight: normal;
    margin-top: 5px;
    margin-bottom:5px;
    color: #545454;
}

h3 {
    font-size: 12pt;
    margin-top: 3px;
    margin-bottom:3px;
    color: #545454;
}

h4 {
    font-size:10pt;
    color: #545454;
    font-weight: bold;
    margin-top: 3px;
    margin-bottom:3px;
}

h5 {
    font-size: 10pt;
    font-weight: normal;
    color: #545454;
    padding-bottom:5px;
}*/

h1, h2, h3, h4 {
  margin: 0.1em 0 0.1em;
  font-weight: inherit;
  line-height: 1;
  color: #545454;
}

h1 {
    font-size: 1.4em;
}

h2{
   font-size: 1.25em;
}

h3{
    font-size: 1.15em;
}

h4{
    font-size: 1.1em;
}

input[autocomplete="off"]::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  height: 0;
  width: 0;
  margin: 0;
}

input[type='text'], input[type='number'], input[type='password'],
input[type='email'], input[type='button'], select, textarea {
    /*remove browser styling*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family:inherit;
    font-size: 1em;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
}

input.readonly:disabled {
    /* prevent diabled inputs from being greyed out */
    color: #545454;
    -webkit-text-fill-color:#545454;
    -webkit-opacity:1;
}


.click{
    cursor:pointer;
}

.link{
    cursor: pointer;
}

.link:hover{
    text-decoration: none;
    background-color:#D3D3D3;
}


.highlight{
   background-color:#C9F76F;
}

.showMe{
   background-color:orange;
}

input[step="0"]::-webkit-inner-spin-button { -webkit-appearance: none;}

.error-validation{
    font-size: 1em;
    color:red;
}


/* Divs & Controls */

div.page_container{
    position: relative;
    max-width:850px;
    margin-left:auto;
    margin-right:auto;
}

div.bottom-spacer{
    margin-bottom:1em;
}


#top_nav{
    float:left;
    height:40px; 
    /*width:850px;*/
    width:100%;
    max-width:850px;
    background-color:#3B3839;
    position:fixed;
    top:0;
    z-index:25;
}

#page_main_contents{
    float:left;
    height:40px; 
    width:850px;
    background-color:#3B3839;
    position:fixed;
    top:0;
}

.con_single_form{
    width: auto;
    margin-top:40px;
    padding: 10px;
    /*background-color:#F5F5F5;*/
}

.con_single_form_inner{
    width: auto;
    padding: 10px;
    background-color: lightsteelblue;
}

.con_title_bar{
    float:left;
    /*background-color:pink;*/
    width:100%;
}

.con_title_container{
    width:100%;
    border-bottom: solid 1px darkgray; 
    padding-bottom:5px; 
    margin-top:5px; 
    margin-bottom:5px;
}

.con_title_container 
.title_image{
    float:left; 
    width:48px;
    margin-right:10px;
}

.con_title_container 
.title_image
img{
    width:48px;
    height:48px;
}

.title_heading{
    width:auto;
    float:left;
    padding-top:5px;
}

.con_title_container
.process_indicator{
    float:left;
    margin-top:5px;
    margin-left:15px;
}


.con_column_3_1{
    float:left;
    clear:left;
    width:33%;
    background-color:greenyellow;
}

.con_column_3_2{
    float:left;
    background-color:yellow;
    width:33%;
}

.con_column_3_3{
    float:left;
    background-color:purple;
    width:33%;
}

.con_column_2_1{
    float:left;
    width:50%;
    /*background-color:lightyellow;*/
}

.con_column_2_2{
    float:left;
    width:50%;
    /*background-color:lightgreen;*/
}

.con_top_row{
    width:100%;
    box-sizing: border-box; /*prevent padding increasing size beyond 100%*/
    padding: 5px;
    float:left;
}

.con_button_bar{
    float:left;
    clear:left;
    margin-top:15px;
    padding-top:10px;
    border-top: solid 1px darkgray;
    /*background-color:orange;*/
    width: 100%;
}


#con_right_slide_panel{
    position:absolute;
    top:160px;
    right:0px;
    width:280px;
    height:500px;
    /*background-color:lightskyblue;*/
    z-index:10;
}

#right_slide_panel_tab{
    position: absolute;
    top: 150px;
    right:-20px;
    width:60px;
    height:30px;
    background-color:red;

    border: solid 3px gray;
    border-radius: 6px 0px 0px 6px;
    cursor: pointer;
    z-index: 20;
}


div.search_basic {
    text-align: left;
    border: solid 3px gray;
    /*padding:10px;*/
    margin-top:5px;
    margin-bottom:15px;
    background-color: #B5ADAD;
}

div.search_container{
    width:100%;
    /*background-color: #DB5B29;*/
    /*prevent padding increasing size beyond 100%*/
    padding-top:12px;
    padding-bottom:12px;
    border-bottom: solid 1px gray;
    float:left;
}

div.search_advanced{
    /*width:900px;*/
    display:none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:10px;
}


.search_box { /* main search container on index.php */
    width:75%;
    max-width:500px;
    height:28px;
    float:left;
    border: solid 1px gray;
    background-color: white;
    -webkit-border-radius: 3px;
    border-radius:3px;
    color:inherit;
}

.search_box input{ /* main search input on index.php */
    float:left; 
    margin:0 0 0 5px;
    padding:0px;
    border:none;
    border-radius:0px;
    /*width:450px*/;
    width:85%;
    /*background-color:red;*/
    height:24px;
    font-size: 1em;
    /*font-family:inherit;
    font-size:inherit;*/
}

.con_search_buttons {
    float:left;
    height:30px;
}

.con_search_buttons img {
   margin-left:15px;
}


input.flat_textbox{
    border: solid 1px gray;
}

div.wine_results{
    width:100%;
    float:left;
    /*background-color: #EFEFEF;*/
    /*border: solid 3px gray;
    padding:7px 20px 20px 20px;*/
}

#con_edit{
    display:block;
    float:left;
    /*width:300px;*/
    width:auto;
    /*background-color:lightgreen;*/
}

#con_image_outer_frame{
    display:block;
    float:left;
    padding: 10px 10px 10px 10px;
    margin-top:10px;
    margin-bottom: 15px;
    border: solid 1px #D0D0D0;
    background-color: white;
    border-radius: 6px 6px 6px 6px;
}

#con_image_inner_frame{
    width:180px;
    height:270px;
    display:block;
    float:left;
    margin-left:auto;
    margin-right:auto;
    border: dotted 1px red;
    background-color: white;
}

#con_image_inner_frame img{
    display:block;
    margin-left:auto;
    margin-right:auto;
}

#con_same_wine_images{
    float:left;
    margin-top:10px;
    /*margin-right:20px;*/
    width:100%;
    /*background-color:orange;*/
}

#con_other_vintages_title{
    box-sizing: border-box; /*prevent padding increasing size beyond 100% */
    width:100%;
    text-align:center;
    padding:5px 0px 5px 0px;
    border: solid 1px lightgray;
    border-bottom:none;
    border-radius: 6px 6px 0px 0px;
    background-color:white;
}


#con_other_vintages{
    box-sizing: border-box; /*prevent padding increasing size beyond 100%*/
    display:block;
    width:100%;
    height:248px;
    float:left;
    overflow-y: hidden;
    overflow-x: scroll;
    padding-top:5px;
    border: solid 1px #D0D0D0;
    border-radius: 0px 0px 6px 6px;
    /*background-color:lightcyan;*/
}

#con_other_vintages_scroll{
    width:1000px;
    overflow-y: hidden;
    overflow-x: scroll;
    /*background-color:lightgreen;*/
}


/*wine_add_css*/

#con_wines_from_producer {
    margin-left:20px;
    margin-bottom:10px;

}


.other_vintage_image{
    cursor:pointer;
}



div.float_left{
    float: left;
    padding:3px;
    text-align: left;
    /*background-color: blue;
    border: solid 1px orange;*/
}

div.clear{
    clear:both;
}

div.rounded{
  border-radius:10px;
}

div.rounded_small{
  border-radius: 6px;
}

.rounded_small_top{
    border-radius: 6px 6px 0px 0px;
}

.rounded_small_bottom{
    border-radius: 0px 0px 6px 6px;
}

.wine_accordian {
    width: 100%;
    box-sizing: border-box;
    background-color: white;
    border-bottom: solid 1px gray;
}

.vintage_accordian {
    width:100%;
    clear:both;
    box-sizing: border-box; /*prevent padding increasing size beyond 100%*/
    /*background-color: whitesmoke;*/
    border: solid 1px gray;
    border-width: 0px 0px 1px 0px;
    font-size: 0.875em;
    color: #000000;
}

.vintage_panel_toggle{
    cursor:pointer;
}

.vintage_details {
    width: 100%;
    box-sizing: border-box; /*prevent padding increasing size beyond 100% */
    /*border-top: solid 1px darkgray;*/
    border-bottom: solid 1px gray;
    /*font-size: 1em;*/
   padding-bottom: 10px;
}

/*.vintage_details .text_2 {
    font-size: 1em;
    color: red;
    /*padding-left:3px;
    line-height: 1.25;
}*/

.vintage_details h3{
    color:darkgray;
    font-weight: normal;
    margin-bottom:7px;
    margin-top:0px; /* remove standard 3px H3 margin */
}

.vintage_details h4{
    margin-left:5px;
    margin-bottom:7px;
}

.vintage_details .label{
    color:darkgray;
}




.vintage-section{
    clear:left;
    box-sizing: border-box; /*prevent padding increasing size beyond 100%*/
    /*background-color:lightgreen;*/
    border-bottom: solid 1px #F0F0F0;
    padding-bottom:5px;
    margin-top:0.75em;
    margin-left:10px;
    margin-right:10px;
}

.left_column {
    width:26%;
    box-sizing: border-box; /*prevent padding increasing size beyond 100%*/
    background-color:lightblue;
    padding: 5px;
    float:left;
}

.centre_column {
    width:37%;
    min-width:320px;
    max-width:320px;
    box-sizing: border-box; /*prevent padding increasing size beyond 100%*/
    background-color:lightgreen;
    padding: 5px;
    clear:both;
    float:left;
}

.right_column {
    width:37%;
    box-sizing: border-box; /*prevent padding increasing size beyond 100%*/
    background-color:lightpink;
    padding: 5px;
    float:left;
}


.full_row {
    width: 740px;
    /* background-color: yellow; */
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    float:left;
}

.bottom_row {
    width:100%;
    text-align:left;
    /* background-color: gray; */
    padding: 5px;
}

div.arrow_right{
    height:16px;
    width:16px;
    background: url(/images/arrow_right_grey_flat_16.png);
    background-repeat: no-repeat;
}

div.arrow_down{
    height:16px;
    width:16px;
    display:block;
    background: url(/images/arrow_down_grey_flat_16.png);
    background-repeat: no-repeat;
}

.con_form_fields{
    /*background-color: yellow;*/

}

.con_form_buttons{
    float:left;
    width:100%;
    padding-top:10px;
    padding-bottom: 10px;
    /*background-color: green;*/
}

/***Wine & Vintage Form Inputs***/

.con_form_input{
    float:left;
    clear:left;
    /*background-color:yellow;*/
}

.form_input_title{
    /*background-color: grey;*/
    padding-bottom: 0px;
    padding:5px;
    font-size: 1em;
    /*color: #545454;*/
}

.form_input_input{
    float:left;
    width:auto;
    white-space: nowrap;
    overflow: hidden;
    padding-bottom: 0px;
    padding-left:5px;
    /*background-color:red;*/
}

.form_input_detail{
     display:none;
     float:left;
     padding-top:5px;
     /*background-color: blue;*/
}

.input_image_frame {
    height: 20px;      /* equals max image height */
    width: 25px;
    float:left;
    /*border: 1px solid red;*/
    white-space: nowrap;
    text-align: center;
    margin: 0 0;
}

.input_image {
    margin-top:1px;
    margin-left:3px;
    /*border: 1px solid red;*/
}



.input_select select{
    width:300px;
    font-size: 1em;
    font-weight: 500;
    padding:3px;
    border: solid 1px gray;
    border-radius: 3px;
}



div.level_1_con {
    width: auto;
    /*background-color: lightcoral;*/
}

div.level_1{
    width:auto;
    /*background-color:lightskyblue;*/
    border: solid 1px gray;
    border-width: 0px 0px 1px 0px;
    padding:2px 2px 2px 10px;
    font-size: 0.625em;
    color: gray;
    cursor: pointer;
}

div.level_1:hover{
    background-color:#C9F76F;
}

div.level_2 {
    width:auto;
    /*background-color: lightgreen;*/
    border: solid 1px gray;
    border-width: 0px 0px 1px 0px;
    padding:2px 2px 2px 10px;
    font-size: 0.625em;
    color: gray;
    cursor: pointer;
}


div.level_3 {
    width:auto;
    /*background-color: lightyellow;*/
    border: solid 1px gray;
    border-width: 0px 0px 1px 0px;
    padding:2px 2px 2px 25px;
    font-size: 0.625em;
    color: gray;
    cursor: pointer;
}

div.selected{
    background-color:yellow;
}



/*** Main Form Inputs ***/


.input-main {
   /*background-color:lightseagreen;*/
   overflow:auto; /* Causes div to wrap around child divs that are floating */
   margin-bottom:1em;
   background-color:white;
   /*font-size:14px;*/
}

.input-main.vertical-centre{
    height:40px; /* Adds height when both classes present to allow vertical-centre to function */
}

.input-main img {
   /*float:left;*/
   height:21px;
   width:21px;
   margin-left:10px;
}


.input-main p{
    float:left;
    line-height:1.2;
}


.input-main input[type=text],
.input-main input[type=number],
.input-main input[type=password],
.input-main input[type=email],
.input-main textarea{
    /*background-color:red;*/
    float:left;
    box-sizing: border-box;
    width:300px;
    padding:4px;
    border: solid 1px #D0D0D0;
    border-radius: 2px;
    font-family:inherit;
    font-size: 1em;
    color:#545454;
    min-height: 29px; /* fix for Chrome rendering Input 1px bigger than Select */
}



.input-main select{
    
    float:left;
    box-sizing: border-box;
    width:300px;
    padding:4px;
    padding-right:40px;
    border: solid 1px #D0D0D0;
    border-radius: 2px;
    font-family:inherit;
    font-size: 1em;
    color:#545454;
    min-height: 29px; /* fix for Chrome rendering Input 1px bigger than Select */
    
    background-image: url('/images/dropdown_arrow.png');
    background-size: 1.25em 1.25em;
    background-repeat:no-repeat;
    background-position:98% 50%;
    background-color:white;
    
}



.input-main select:disabled{
    color:#545454;
}

.input-main.bottom-spacer{
    /* prevent dropdown/select text being greyed out when diabled */
    margin-bottom:1.2em;
}

.input-main-label {
    /*display:inline-block;*/
    /*background-color:lightblue;*/
    height:1.3em;
    margin-bottom:0.25em;
    /*font-size: 16px;*/
    color:#606060;
}

.input-main-label.top-spacer{
    margin-top: 14px;
}

.input-main label{
    display:block;
    /*background-color:lightblue;*/
    height:22px;
    margin-bottom:0.25em;
    font-size: 1em;
    color:#606060;
}


.input-main-label p{
    float:left;
    margin:0px;
}


.input-main-label img {
   float:left;
   margin-left: 10px;
   height:21px;
   width:21px;
}

/** Inline Inputs **/

.input-main-inline{
    /*background-color:pink;*/
    height:30px;
    display:inline-block;
    float:left;
    margin-bottom:5px;
    
    font-size:1em;
    color:gray;
}

.input-main-inline label{
    float:left;
    margin-right:5px;
    font-size: 1em;
    color: #606060;
}

.input-main-inline p{
    float:left;
    margin-right:5px;
}

.input-main-inline input{
    float:left;
    display:inline-block;
    /*height:19px;*/
    margin:0px;
    padding:4px;
    border: solid 1px #D0D0D0;
    border-radius: 2px;
    font-size: 1em;
    color:#545454;
    
}

.input-main-inline select{
    float:left;
    display:inline-block;
    width:310px;
    /* height:30px; /* text input height + padding + margin (10px) */
    margin:0px;
    padding:4px;
    border: solid 1px #D0D0D0;
    border-radius: 2px;
    font-family:inherit;
    font-size: 1em;
    color:#545454;
    background-color: white;
    background-image: url('/images/dropdown_arrow.png');
    background-size: 16px 16px;
    background-repeat:no-repeat;
    background-position:98% 50%;
}


.image-placeholder{
    /*position:relative;*/
    /*float:left;*/
    display: flex;
    justify-content: center;
    align-items: center;
    width:125px;
    height:188px;
    padding:3px;
    border: solid 1px #D0D0D0;
    /*border-radius: 3px;*/
    background-color: white;
}


/* Main Form Button*/
.con_button_bar input[type="button"]{
    -webkit-appearance: none;
    background-color: #5292BE;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius:3px;
    color: #fff;
    font-size: 1em;
    padding:4px 10px 5px 10px;
    margin-right:10px;
    min-width:100px;
    text-decoration: none;
    box-shadow: 0px;
    cursor: pointer;
    border:none;
}

.con_button_bar input[type="button"]:disabled{
    background-color: grey;
    cursor:not-allowed;
}

/* Sub Form Buttons */
.con_sub_button_bar input[type="button"]{
    -webkit-appearance: none;
    background-color:#00cc00;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius:3px;
    color: #fff;
    font-family:inherit;
    font-size: 0.95em;
    padding:3px 10px 4px 10px;
    margin-top:5px;
    margin-right:10px;
    min-width:30px;
    text-decoration: none;
    box-shadow: 0px;
    cursor: pointer;
    border:none;
}

.con_edit_image_button_bar img{
    -webkit-appearance: none;
    /*background-color:#c3d9e6;*/
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius:3px;
    color: #fff;
    border:grey;
    font-family:inherit;
    font-size: 0.95em;
    /*padding:3px 5px 4px 5px;*/
    margin-top:0px;
    width:30px;
    height:30px;
    text-decoration: none;
    box-shadow: 0px;
    cursor: pointer;
    border:none;
}

.big_button{
    -webkit-appearance: none;
    background-color:#5292BE;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius:3px;
    color: #fff;
    font-family:inherit;
    font-size: 1em;
    padding:3px 10px 4px 10px;
    margin-right:10px;
    min-width:90px;
    text-decoration: none;
    box-shadow: 0px;
    cursor: pointer;
    border:none;
}


/* Sub Form Buttons */
.input-button input[type="button"]{
    -webkit-appearance: none;
    /*background-color:#00cc00;*/
    background-color:#57B447;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius:3px;
    color: #fff;
    font-family:inherit;
    font-size: 0.95em;
    padding:3px 10px 4px 10px;
    margin-top:5px;
    margin-right:10px;
    min-width:90px;
    text-decoration: none;
    box-shadow: 0px;
    cursor: pointer;
    border:none;
}

/*#acquisition_container{
    width:260px;
    padding: 0px 0px 0px 20px;
    float:right;
}

#location_container{
    width:200px;
    padding: 0px 0px 0px 20px;
    float:left;
}

#merchant_container{
    width:200px;
    margin-left:20px;
    float:left;
    padding: 0px 0px 0px 20px;
}

#grape_container{
    width:200px;
    margin-left:20px;
    float:left;
    padding: 0px 0px 0px 20px;
}

#producer_container{
    width:200px;
    margin-left:20px;
    float:left;
    padding: 0px 0px 0px 20px;
}

#grape_select_container{
    width:300px;
    margin-left:20px;
    float:left;
    padding: 0px 0px 0px 20px;
}*\


/* tables */

table.dialog {
    /*font-size: 12px;*/
}


table.wine {
	border: solid 0px;
	border-collapse:collapse;
	/*background-color: #545454;*/
}

table.wine td {
	/*padding: 2px;*/
	border: none 0px;
	border-color: #CCCCCC;
        height:25px;
        vertical-align:middle;
        color:white;
}


table.acquisition {
	/*table-layout:fixed;*/
        width:100%;
        border-width: 0px;
	border-style: solid;
	border-color: #CCCCCC;
	border-collapse:collapse;
	background-color: white;
        font-size: 0.8em;
}

table.acquisition th {
	border-width: 1px;
	padding: 5px;
	border-style: solid;
	border-color: #CCCCCC;
        font-size: 0.9em;
        background-color:#ebebeb;
        text-align: center;
        color:#545454;
}

table.acquisition td {
	border-width: 1px;
	padding: 1px;
        text-align: right;
	border-style: solid;
	border-color:#CCCCCC;
        color:#545454;
}

table.acquisition td input {
        color:#545454;
}

table.acquisition tfoot{
	border-width: 1px;
	padding: 3px;
	border-style: solid;
	border-color: #CCCCCC;
        font-size: 0.9em;
        background-color:#ebebeb;
        text-align: center;
}

.table_input{
    width:100%;
    text-align: right;
    border: none;
    background: transparent;
}


table.vintage td.year {
    width: 50px;
    margin: 0px;
    padding: 0px;
    background-color: red;
    text-align: left;
    font-weight: bold;
}

table.vintage td.rating {
    width: 220px;
    vertical-align: middle;
    background-color: green;
    text-align: left;
}

table.vintage td.spacer {
    width: 600px;
    /* background-color: blue; */
    text-align: left;
}

table.vintage td.actions {
    width:50px;
    /* padding-top: 3px; 
    background-color: yellow;*/
    vertical-align: middle;
    text-align: center;
}

td.actions img{
   margin-right:5px;
   margin-left:5px;
}


table.ref_data{
	border-width: 0px;
	border-style: solid;
	border-color: #CCCCCC;
	border-collapse:collapse;
	background-color: white;
        font-size: 0.75em;
}

table.ref_data th {
	border-width: 1px;
	padding: 2px;
	border-style: solid;
	border-color: #CCCCCC;
        font-size: 0.75em;
        background-color:#ebebeb;
        text-align: center;
}

table.ref_data td {
	border-width: 1px;
	padding: 2px;
	border-style: solid;
	border-color:#CCCCCC;
}


#table_grapes{
    border-collapse: collapse;
    cellspacing: 0px;
}

#table_grapes tr{

}

#table_grapes td{
    color: gray;
    /*background-color: lightskyblue;*/
    border-style: solid;
    border-color: gray;
    border-bottom-width: 1px;
    padding-bottom: 2px;
    padding-top:2px;
    font-size: 0.68em;

}

#list_box_top_bar{
    font-size: 0.625em;
    color: gray;
    vertical-align:middle;
}




/* Autocomplete Field Styles */
.ac_results {
	padding: 0px;
	border: 1px solid black;
	background-color: white;
	overflow: hidden;
	z-index: 99999;
}

.ac_results ul {
	width: 100%;
	list-style-position: outside;
	list-style: none;
	padding: 0;
	margin: 0;
}

.ac_results li {
	margin: 0px;
	padding: 2px 5px;
	cursor: default;
	display: block;
	/*
	if width will be 100% horizontal scrollbar will apear
	when scroll mode will be used
	*/
	/*width: 100%;*/
	font-size: 0.75em;
	/*
	it is very important, if line-height not setted or setted
	in relative units scroll will be broken in firefox
	*/
	line-height: 17px;
	overflow: hidden;
}

.ac_loading {
	background: white url('/images/ajax_loader.gif') right center no-repeat;
}

.ac_odd {
	background-color: #eee;
}

.ac_over {
	background-color: #C9F76F;
	color: black;
}


/*** jquery ui dialog ***/

.ui-dialog {
    -webkit-box-shadow: 10px 10px 48px -17px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 48px -17px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 48px -17px rgba(0,0,0,0.75);

}


.ui-dialog-buttonset .ui-button-text{ /*v12 onwards of Jquery UI change .ui-button-text to ui-button*/
    
    color:#fff;
    background-color:#5292BE;
    font-size: 0.85em;
    font-family: inherit;
    /*font-weight: bold;*/
    border:0px;
    width:70px;
    min-width:60px;
    /*min-height:27px; post v11.4 */
}

.ui-dialog-buttonset .ui-button:disabled .ui-button-text { 
    color:#fff;
    background-color: grey;
    cursor:not-allowed;
}

.ui-dialog-buttonpane {
    /*background-color: yellowgreen;*/
}


/*** Basket Dialog ***/

.basket-dialog .ui-dialog-titlebar {
    display: none;
}

.basket-dialog .ui-dialog-buttonpane {
    padding-right:15px;
}

.basket-dialog .ui-button-text {
    min-width:50px;
}


.basket_table { 
    width:100%;
}

.basket_table td {
    padding:5px;
    border-bottom: solid 1px lightgray;
}

.basket_table tfoot td {
    padding-top:15px;
    border:none;
}

/*** Basket Notification ***/

#noti_container {
    position:relative;     /* This is crucial for the absolutely positioned element */
    /*border:1px solid blue; /* This is just to show you where the container ends */
    width:24px;
    height:24px;
}

#noti_bubble {
    position:absolute;    /* This breaks the div from the normal HTML document. */
    top: -3px;
    left:-4px;
    padding:3px 4px 2px 3px;
    background-color:red; /* you could use a background image if you'd like as well */
    color:white;
    font-weight:bold;
    font-size:0.875em;
    border-radius: 0px;
}


/*** Login Dialog ***/

.login-dialog .ui-dialog-titlebar {
    display: none;
}

.login-dialog .ui-dialog-buttonpane {
    padding-right:15px;
}

.login-button {
    background-color: #5292BE;
}

.login-dialog .ui-dialog-buttonset .login-button {
    background-color: #5292BE;
}


/*** Basket Dialog ***/

.clean-dialog .ui-dialog-titlebar {
    display: none;
}

.clean-dialog .ui-dialog-buttonpane {
    padding-right:5px;
    padding-left:5px;
}

.clean-dialog .ui-dialog-content {
    overflow-y: hidden;
}


/* Classes */

.clear-left{
    clear:left;
}

.float-left{
    float:left;
}

.vertical-centre > * { /* vertically centre everything but only direct children */
    position: relative;
    top:50%;
   -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.inline {
    display:inline;
}

.hidden {
    display:none;
}

.wordwrap {
   white-space: pre-wrap;      /* CSS3 */
   white-space: -moz-pre-wrap; /* Firefox */
   white-space: -pre-wrap;     /* Opera <7 */
   white-space: -o-pre-wrap;   /* Opera 7 */
   word-wrap: break-word;      /* IE */
}

/* Autocomplete */


/* set autocomplete menu-item hover background color */
.ui-autocomplete .ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    background: none !important;
    border-color: #D3D3D3 !important;
    background-color: #D3D3D3 !important;
}


/* custom format class for main_search autocomplete - add as classes option on widget */
.main_search .ui-menu-item{
    font-size: 1.125em;
}

.main_search .ui-autocomplete-category{
    font-size: 1.20em;
    color:darkgray
}




/* jQuery.Rating Plugin CSS - http://www.fyneworks.com/jquery/star-rating/ */
div.rating-cancel,div.star-rating{float:left;width:32px;height:32px;text-indent:-999em;cursor:pointer;display:block;background:transparent;overflow:hidden}
div.rating-cancel,div.rating-cancel a{background:url("/images/delete_rating_flat_grey_16.png") no-repeat 8px 10px}
div.star-rating,div.star-rating a{background:url("/images/big_star_2.gif") no-repeat 0 0px}
div.star-rating a{display:block;width:32px;height:100%;background-position:0 0px;border:0}
/*div.rating-cancel a {display:block;width:32px;height:100%;background-position: 16px 16px;border:0}*/
div.star-rating-on a{background-position:0 -64px!important}
div.star-rating-hover a{background-position:0 -32px}
/* Read Only CSS */
div.star-rating-readonly a{cursor:default !important}
/* Partial Star CSS */
div.star-rating{background:transparent!important;overflow:hidden!important}



div.rating-cancel,div.pound-rating{float:left;width:32px;height:32px;text-indent:-999em;cursor:pointer;display:block;background:transparent;overflow:hidden}
div.rating-cancel,div.rating-cancel a{background:url("/images/delete_rating_flat_grey_16.png") no-repeat 8px 10px}
div.pound-rating,div.pound-rating a{background:url("/images/big_pound_1.gif") no-repeat 0 0px}
/*div.rating-cancel a,*/
div.pound-rating a{display:block;width:32px;height:100%;background-position:0 0px;border:0}
div.pound-rating-on a{background-position:0 -64px!important}
div.pound-rating-hover a{background-position:0 -32px}
/* Read Only CSS */
div.pound-rating-readonly a{cursor:default !important}
/* Partial Star CSS */
div.pound-rating{background:transparent!important;overflow:hidden!important}




/* END jQuery.Rating Plugin CSS */


/******Notice*****/

.notice-wrap {
	position: fixed;
	bottom: 20px;
	left: 20px;
	width: 250px;
	z-index: 9999;
}

* html .notice-wrap {
	position: absolute;
}

.notice-item {
	background: #333;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	color: #eee;
	padding:12px;
	font-size: 0.875em;
	display: block;
	position: relative;
	margin: 0 0 12px 0;
}

.notice-item-close {
	position: absolute;
	font-size: 0.875em;
	font-weight: bold;
	right: 6px;
	top: 6px;
	cursor: pointer;
}

.notice-error {
    background: darkred;
}

.notice-warning {
    background: darkorange;
}

/* hide close button on ui dialog by adding class dialogClass: 'no-close'*/
.no-close .ui-dialog-titlebar-close {
  display: none;
}

/*******FileUploader********/


.qq-uploader { position:relative; width: 130px;}

.qq-upload-button {
    display:inline-block;
    width: 100px; 
    padding: 7px 0;
    text-align:center;
    background:#880000; 
    border-bottom:1px solid #ddd;
    color:#fff;
    border-radius:3px;
    font-size: 0.875em;
    padding:3px 10px 4px 10px;
    text-decoration: none;
    box-shadow: 0px;
    cursor: pointer;
    border:none;
} 

.qq-upload-button-hover {background:#cc0000;}
.qq-upload-button-focus {outline:1px dotted black;}

.qq-upload-drop-area {
    position:absolute; top:0; left:0; width:100px; height:100px; min-height: 20px; z-index:2;
    background:#FF9797; text-align:center;
}
.qq-upload-drop-area span {
    display:block; position:absolute; top: 20px; width:100px; margin-top:-8px; font-size: 1em;
}
.qq-upload-drop-area-active {background:#FF7171;}

.qq-upload-list {margin:15px 35px; padding:0; list-style:disc;}
.qq-upload-list li { margin:0; padding:0; line-height:15px; font-size:0.75em;}
.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text {
    margin-right: 7px;
}

.qq-upload-file {
    white-space: nowrap;
}
.qq-upload-spinner {display:inline-block; background: url("/images/loading.gif"); width:15px; height:15px; vertical-align:text-bottom;}
.qq-upload-size,.qq-upload-cancel {font-size:0.75em;}

.qq-upload-failed-text {display:none;}
.qq-upload-fail .qq-upload-failed-text {display:inline;}



/********Listbox*********/
/* border color set on .listBox_element_border and .listBox_row the others inherit
*
*/

.listBox{
    /*color:yellow;*/
    /*font-size:16px;*/
}

div.listBox_body{
    width:100%;
    height:100%;
    position:relative;
    /*display:block;*/
    float:right;
    background-color: white;
    overflow-y: scroll;
    overflow-x: hidden;
    font-size: 1em;

}

  
div.listBox_title{
    width:100%;
    height:35px;
    display:block;
    float:right;
    padding: 0px;
    background-color: #E6E6E6;
    font-size: 1.125em;
    /*color:#545454;*/
    border-bottom: 1px solid;
    border-color:inherit;
}


div.listBox_filter{
    width:100%;
    height:30px;
    box-sizing: border-box;
    float:left;
    padding-left:5px;
    background-color: white;
    border-bottom: 1px solid;
    border-top: 0px solid;
    border-color:inherit;
    color:inherit;
}


input.listBox_filter{
    font-size: 1em;
    font-family: inherit;
    color:inherit;
    border:0px;
    margin:0px;
    padding:0px;
}
            
.listBox_row{
    width:auto;
    clear:left;
    position:relative;
    /*background-color:lightskyblue;*/
    border: 1px solid;
    border-width: 0px 0px 1px 0px;
    /*border-color: #D8D8D8;*/
    padding:5px 3px 5px 10px;
    font-size:1em;
    font-weight: normal;
    
    /*cursor: pointer;*/
}

.listBox_row_text{
    font-size: 1em;
    font-weight: normal;
}


.listBox_row.click:hover{
   background-color:#E8E8E8;
}

.listBox_row.click.row_selected{
    /*background-color:#A8A8A8;
    color:whitesmoke;*/
    background-color:#E8E8E8;
}


div.listBox_footer{
    width:100%;
    /*height:auto!important;*/
    height:40px;
    display: block;
    float: right;
    background-color: white;
    border-top:solid 1px;
    border-color:inherit;
    /*color: #545454;*/
}

.listBox_footer_buttons{
    padding:7px 5px 7px 12px; 
    margin-top:auto; 
    margin-bottom:auto;
}

.listBox_button{
    margin-right:25px;
}

table.listBox_table{
    border-width: 1px;
    border-collapse:collapse;
}

table.listBox_table td {
    vertical-align:bottom;
    padding-right:10px;
}

.listBox_spinner{

    /*display:    none;*/
    /*position:   fixed;*/
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
                url('/images/ajax_loader.gif')
                50% 50%
                no-repeat;

}

.listBox_activity .listBox_spinner {
    display: block;
}

.listBox_expand{
    height:24px;
    width:32px;
    display:block;
    overflow:hidden;
    background: url(/images/plus_circle_grey_flat_32.png) no-repeat left center;
    background-size: 18px 18px;
}

.listBox_collapse{
    height:24px;
    width:32px;
    display:block;
    overflow:hidden;
    background: url(/images/minus_circle_grey_flat_32.png) no-repeat left center;
    background-size: 18px 18px;
}

.listBox_shadow{
   box-shadow: 5px 5px 5px gray;
}

.listBox_element_border{
   border: 1px solid;
   border-color: #D8D8D8;
}

.listBox_top_rounded{
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.listBox_bottom_rounded{
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.listBox_element_rounded {
    border-radius: 6px 6px 6px 6px; //format container element with radius
}


/** Custom listBox Themes **/

.listBox_flat_theme.listBox_title,
.listBox_flat_theme.listBox_body,
.listBox_flat_theme.listBox_row,
.listBox_flat_theme.listBox_footer{
    background-color:white;
}

.listBox_flat_theme.listBox_row {
    border-bottom:solid lightgray 1px;
}

.listBox_acquisition_theme {
    /*color:darkslategray;*/
}

.listBox_acquisition_theme.listBox_body,
.listBox_acquisition_theme.listBox_row{
    background-color:white;
    border-bottom:solid lightgray 1px;
    /*color: #545454;*/
}

.listBox_acquisition_theme.listBox_filter{
    border-bottom:solid darkgray 1px;
    height:35px;
}


.listBox_large_theme.listBox_title,
.listBox_large_theme.listBox_body,
.listBox_large_theme.listBox_row,
.listBox_large_theme.listBox_footer{
    background-color:white;
}

.listBox_large_theme.listBox_row,
.listBox_large_theme.listBox_filter{
    color:#545454;
    font-size:1.1em;
    border-bottom:solid lightgray 1px;
}


.listBox_large_theme.listBox_filter {
    /*force height of filter box*/
    height:40px;
}


.listBox_large_theme.listBox_filter input{
    /*set font style for filter input on large theme*/
    font-size:inherit;
    color:#5292BE;
}

.listBox_large_theme.listBox_footer{
    color:#545454;
    border-top:solid lightgray 1px;
}







div.static-rating-small{
    height: 16px;
    display: block;
    overflow: hidden;
    background: url("/images/star_single_gold_16.png") repeat-x;
    background-position: 0 0px;
}


.quality-static-rating-small{
    height:16px;
    display:inline-block;
    overflow:hidden;
    background: url("/images/star_flat_blue_24.png");
    background-size: 16px 16px;
    background-position:0 0px;
    background-repeat: repeat-x;
}

.value-static-rating-small{
    height:16px;
    display:inline-block;
    overflow:hidden;
    /*background: url("/images/currency_pound_yellow_14.png") repeat-x;*/
    background: url("/images/pound_flat_blue_24.png");
    background-size: 16px 16px;
    background-position:0 0px;
    background-repeat: repeat-x;
}

.quality-static-rating-medium{
    height:20px;
    display:block;
    overflow:hidden;
    background: url("/images/star_flat_yellow_24.png");
    background-size: 20px 20px;
    background-position:0p 0px;
    background-repeat: repeat-x;
}


.value-static-rating-medium{
    height:20px;
    display:block;
    overflow:hidden;
    background: url("/images/currency_25x24.png");
    /*background: url("/images/value_rating_28.png");*/
    background-size: 20px 20px;
    background-position: 0px 0px;
    background-repeat: repeat-x;
}


.hide{
    display: none;
}


/*** Pop-Up Menu ***/

.ui-widget{
    font-family:inherit;
}

.pop_up.ui-menu { 
    font-size: 1em;
    border-radius: 5px; /* 1px larger than item radius so no gaps */
    border:solid 1px black;
    -webkit-box-shadow: 10px 10px 48px -17px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 48px -17px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 48px -17px rgba(0,0,0,0.75);
    z-index:20;
}


.pop_up .ui-menu-item {
    background:#C9C9C9;
    color:#333333;
    border: solid 1px #333333;
    border-width: 0px 0px 1px 0px;
    vertical-align: middle;
    line-height:26px;
    font-family: inherit;
    font-weight: normal;
}

.pop_up.ui-menu .ui-menu-item{
    padding-left:15px;
}


.pop_up.ui-widget-content .ui-state-hover,
.pop_up.ui-widget-content .ui-state-focus {
    background-color:#787778;
    color:#C9C9C9;
    margin:0px;
}

.pop_up .ui-menu-item-first {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.pop_up .ui-menu-item-last {
    border-width: 0px 0px 0px 0px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.pop_up .ui-menu-header {
    background-color:#333333;
    border:solid 1px #333333;
    color:#C9C9C9;
    font-family:inherit;
    font-size: 1em;
    padding-left:15px;
    
    line-height:25px;
    vertical-align: middle;
}



/** Sliding Panels **/

.panel_right{
    display:none;
    /*height:700px;*/
    width:auto;
    background:white;
    position:absolute;
    top:50px;
    right:0px;
    z-index:15;
    
    -webkit-box-shadow: -12px 10px 10px -3px rgba(158,158,158,1);
    -moz-box-shadow: -12px 10px 10px -3px rgba(158,158,158,1);
    box-shadow: -12px 10px 10px -3px rgba(158,158,158,1);

    /*-webkit-box-shadow: 10px 10px 48px -17px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 48px -17px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 48px -17px rgba(0,0,0,0.75);*/
    
}

#panel_right_btn_close{
    position:relative;
    display:inline-block;
    top:-11px;
    left:-39px;
    width:18px;
    height:18px;
    padding:5px;
    background-color:whitesmoke;
    border: solid lightgrey 1px;
    border-width: 1px 0px 1px 1px;
    
    
}


.panel_right_show{
    transform: scaleX(1);
}

/**jquery ui fixes***/

#ui-datepicker-div { display: none; }

#tabs {border: none} /* remove borders from tabs widget */