#login h1 a {
	width: 234px;
	background-image:url('logo-winescape-wine-marketers.png');
	background-size: 234px 130px;
	height: 150px
}


/*-------------------------------------------------------------------- */
/*flex wraps*/
.flexrowstart { display: flex; flex-direction: row; align-items: flex-start; }
.flexrowend { display: flex; flex-direction: row; align-items: flex-end; }
.flexcolstart { display: flex; flex-direction: column; align-items: flex-start; }
.wrap { flex-wrap: wrap; }
/*items: flex-grow flex-shrink flex-basis */
.flexitemauto { flex: 1 1 auto; }
.flexitemnone { flex: 0 0 auto; }
.centre-centre { align-items: stretch; align-self: center; text-align: center; }
.top-left { align-items: flex-start; text-align: left; }
.top-centre { align-items: flex-start; text-align: center; }
.centre-left { align-items: stretch; align-self: center; text-align: left; }
.centre-right { align-items: stretch; align-self: center; text-align: right; }
.bottom-left { align-self: flex-start; text-align: left; }
.bottom-right { align-self: flex-end; text-align: right; }
.bottom-centre { align-self: flex-end; text-align: center; }
/*-------------------------------------------------------------------- */

.wine_wrap {background-color: #e0e6d9; padding:5px}
.wine_wrap p {background-color: #e0e6d9}
.wine_wrap a {font-weight: bold}
.wine_wrap .warn {color: red}

.wine_wrap label {
	float: left;
	width: 120px;
}
.wine_wrap.nofloat label {
	float: none;
}

.wine_wrap input[type="text"] {width: 200px}
.wine_wrap input[type="select"] {width: 200px}
.wine_wrap textarea {width: 200px}
.wine_wrap .med {width: 400px}

.wine_wrap .radio {width: 18px}
.wine_wrap .chk {width: 18px}
.wine_wrap .cur {text-align:right}
.wine_wrap .inputshort {width:60px}


.wine_wrap ul {width:340px; margin:0px; padding:0px}
.wine_wrap li {margin:0px; padding:0px; clear:both}

.wine_wrap .gap {border-bottom: solid 1px #fff; height: 5px; margin-bottom:5px}

.wine_wrap .clear {clear: both}

.wine_left{float:left; width:440px}
.wine_leftwide{float:left; width:50%}

.nowrap { white-space:nowrap; }
.centre { text-align: center; }
.right { text-align: right; }

#wine_reg ul {width:800px}
#wine_reg label {width:190px}

.wine_wrap .warn {color:red}
.wine_wrap .invaliddata {color:red}


#f1_upload_process{
   z-index:100;
   visibility:hidden;
   position:absolute;
   text-align:center;
   width:400px;
}
#upload-submit {
	margin:0px 0px 0px 50px;
	width:120px;
}

.widefat td {border-width: 1px 0 0 0; border-style: solid; border-color: #cccccc}
.widefat td.tdBordN {border: none}

.widefat .noborder td {border:none; padding:0.1em; background:#fff}
.company {background:#fff; padding:0}
.compprod {width:7em}
.compcontact {width:30em}


/* Zebra Pagination */
/* common attributes for all the links */
.pagination a {
    padding: 4px;
    border: 1px solid #AAA;
    color: #333;
    text-decoration: none;
    margin-right: 2px;
    display: block;
    float: left;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

/* common attributes for the "next page" and "previous page" links */
.pagination a.navigation {
    width: 16px;
    background-position: center center;
    background-repeat: no-repeat;
    text-indent: -9000px;
    border: 1px solid transparent;
    overflow: hidden
}

/* hack for transparent borders in IE6 */
*html .pagination a.navigation {
    border-color: #000001;
    filter: chroma(color=#000001);
}

/* hovered links */
.pagination a:hover {
    background-color: #DEDEDE;
    color: #222;
}

/* specific attributes for the "next page" and "previous page" links */
.pagination a.left { background-image: url(larrow.gif) }
.pagination a.right { background-image: url(rarrow.gif) }

/*  currently selected page; also, the current page doesn't need a hover effect */
.pagination a.current,
.pagination a.current:hover {
    background: #0094D6;
    border-color: #0094D6;
    color: #FFF;
}

/* the "..." separator */
.pagination span {
    color: #666;
    margin-right: 2px;
    display: block;
    float: left;
    padding: 8px 4px
}

/* disabled links */
a.disabled {
    filter: alpha(opacity=20);
    -khtml-opacity: 0.2;
    -moz-opacity: 0.2;
    opacity: 0.2
}

a.sortbtn {
	color: #404040;
	text-decoration: none;
	padding: 2px;
	margin-right: 5px;
	border-bottom: 2px solid #404040;
	opacity: 0.5;
}

a.sortbtn:hover, a.sortbtn.selected {
	color: #117AA7;
	border-color: #117AA7;
	opacity: 1;
}

#productselectmenu {width:60%; border-width: 0 0 1px 0; border-style:solid; margin:1em 0 1em 0}
#productselectmenu ul {width:100%}
#productselectmenu li {display:inline; background:#e5e5e5; height:2em; margin:1em; padding:0 1em; border-width: 1px 1px 0 1px; border-style:solid; border-color:#ccc}
#productselectmenu li.on {border-color:#000; font-weight:bold}
#productselectmenu li a {text-decoration:none; font-weight:normal}

#statusselectmenu {width:60%; border-width: 1px 0 0 0; border-style:solid; margin:-1em 0 1em 0}
#statusselectmenu ul {width:100%; text-align:right}
#statusselectmenu li {display:inline; background:#e5e5e5; height:2em; margin:1em; padding:0 1em; border-width: 0 1px 1px 1px; border-style:solid; border-color:#ccc}
#statusselectmenu li.on {border-color:#000; font-weight:bold}
#statusselectmenu li a {text-decoration:none; font-weight:normal}

table.turnoverInfo, table.turnoverInfo td {
	border: 1px solid #A3A3A3;
	border-collapse: collapse;
	padding: 8px 25px 8px 25px;
	color: #505050;
}

table.turnoverInfo {
	border-left: 3px solid #A3A3A3;
}

table.turnoverInfo th {
	padding: 5px;
}

table.turnoverInfo td.fruitRow {
	color: #653239;
	background-color: #C2AEB2;
	border-left: 3px solid #631E27;
}

table.turnoverInfo td.bulkRow {
	color: #4C5641;
	background-color: #BACCBE;
	border-left: 3px solid #42542F;
}

table.turnoverInfo td.bottledRow {
	color: #836647;
	background-color: #F1DCC8;
	border-left: 3px solid #82592E;
}

/* CREDITOR WATCH PROGRESS BAR */
progress {
  /* Get rid of the default appearance */
  appearance: none;
  /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
  border: none;
  /* Add dimensions */
  width: 100%;
  height: 12px;
  /* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
  background-color: whiteSmoke;
  border-radius: 8px;
  /*box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;*/
  position: relative;
  margin: 0 0 1.5em;
}

/*
Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/
progress::-webkit-progress-bar {
  background-color: whiteSmoke;
  border-radius: 8px;
  box-shadow: 0 1px 1px rgba(0,0,0,.5) inset;
}
progress::-webkit-progress-value {
  position: relative;
  border-radius:8px;
}

/* Let's spice up things little bit by using pseudo elements. */
progress::-webkit-progress-value:after {
  /* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
  content: '';
  position: absolute;
  width:5px; height:5px;
  top:7px; right:7px;
  background-color: white;
  border-radius: 100%;
}


/* Fallback technique styles */
.progress-bar {
  background-color: whiteSmoke;
  border-radius: 8px;
  box-shadow: 0 1px 1px rgba(0,0,0,.5) inset;
  /* Dimensions should be similar to the parent progress element. */
  width: 100%;
  height:12px;
  margin-bottom:10px;
}

.progress-bar span {
  border-radius: 8px;
  display: block;
  text-indent: -9999px;
  height:12px;
}

p[data-value] {
  position: relative;
}

/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */
progress::-moz-progress-bar {
  background-color:red;
  border-radius:8px;
}

/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */
p[data-value]:after {
  content: attr(data-value) '%';
  position: absolute; right:0;
}
/* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
.pBar0_49 {color: #EA4B41;}
.pBar50_99 {color: #D35400;}
.pBar100_199 {color: #E67D21;}
.pBar200_499 {color: #F1C30F;}
.pBar400_599 {color: #B8E986;}
.pBar600_1000 {color: #2ECC71;}

.pBar0_49 span {background-color: #EA4B41;}
.pBar50_99 span {background-color: #D35400;}
.pBar100_199 span {background-color: #E67D21;}
.pBar200_499 span {background-color: #F1C30F;}
.pBar400_599 span {background-color: #B8E986;}
.pBar600_1000 span {background-color: #2ECC71;}

/* chrome, safari, FF */
.pBar0_49::-webkit-progress-value {background-color: #EA4B41;}
.pBar0_49::-moz-progress-bar {background-color: #EA4B41;}
.pBar50_99::-webkit-progress-value {background-color: #D35400;}
.pBar50_99::-moz-progress-bar {background-color: #D35400;}
.pBar100_199::-webkit-progress-value {background-color: #E67D21;}
.pBar100_199::-moz-progress-bar {background-color: #E67D21;}
.pBar200_499::-webkit-progress-value {background-color: #F1C30F;}
.pBar200_499::-moz-progress-bar {background-color: #F1C30F;}
.pBar400_599::-webkit-progress-value {background-color: #B8E986;}
.pBar400_599::-moz-progress-bar {background-color: #B8E986;}
.pBar600_1000::-webkit-progress-value {background-color: #2ECC71;}
.pBar600_1000::-moz-progress-bar {background-color: #2ECC71;}

.strikethrough {
  text-decoration: line-through;
}