@font-face {
font-family: 'Beyond The Mountains';
font-style: normal;
font-weight: normal;
src: local('Beyond The Mountains'), url('beyond_the_mountains.woff') format('woff');
}

@font-face {
font-family: 'Beyond The Mountains';
font-style: normal;
font-weight: normal;
src: local('Beyond The Mountains'), url('beyond_the_mountains.woff') format('woff');
}

body { margin:0px; font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; background: #fff; color:#333; width: 100%; max-width: 1920px; position: relative }
header { padding: 10px 0 0; position: relative; z-index: 1; width: 100%; margin: 0 auto; max-width: 1920px; background-image: url(images/header_background-test.png); background-size: 100%; }
.header { max-width: 1600px; margin: 0 auto; padding: 20px 20px 25px; overflow: auto }
.portal_logo { max-width: 500px; margin: 0 auto }
.portal_logo img { width: 100% }
.nav .icon { display: none }
.nav_container { width: 100%; background: #969696; border-bottom: 2px solid #f8b817; height: 39px }
.nav { width: 100%; text-align: center; margin: 0 auto; padding:0 }
.nav li { position: relative; list-style: none; display: inline-block; text-align: center; font-size: 20px; height: auto }
.nav li:hover {	background:#bbbbbb }
.nav li a { color: #303030; text-decoration: none; display: block; padding: 8px 0 6px 30px; background-image: url(images/image_sprite.png) }
li#supplier { width: 160px }
#supplier a { background-repeat: no-repeat; background-position: 14px 6px }
li#orders { width: 150px }
#orders a { background-repeat: no-repeat; background-position: 12px -64px }
#orders ul.dropdown-menu { width: 220px }
#all_orders a { background-position: 42px -64px }
#live_orders a { background-position: 38px -338px }
#archived_orders a { background-position: 18px -406px }
li#notes { width: 140px }
#notes a { background-repeat: no-repeat; background-position: 10px -132px }
#notes ul.dropdown-menu { width: 220px }
#meeting_notes a { background-position: 22px -131px }
#agreements a { background-position: 30px -472px; }
li#non-con { width: 240px; }
#non-con a { background-repeat: no-repeat; background-position: 6px -201px }
#all-non-con a { background-repeat: no-repeat; background-position: 46px -200px }
#supplier-non-con a { background-repeat: no-repeat; background-position: 21px -200px }
#internal-non-con a { background-repeat: no-repeat; background-position: 21px -200px }
#customer-non-con a { background-repeat: no-repeat; background-position: 15px -200px }
#upload-non-con a { background-repeat: no-repeat; background-position: 21px -200px }
li#help { width: 120px }
#help a { background-repeat: no-repeat; background-position: 8px -540px }
#help ul.dropdown-menu { width: 145px }
#how-to a { background-repeat: no-repeat; background-position: 10px -606px }
#media a { background-repeat: no-repeat; background-position: 20px -738px }
#faq a { background-repeat: no-repeat; background-position: 22px -673px }
li#logout {	width: 140px; }
#logout a { background-repeat: no-repeat; background-position: 16px -269px }
.wrapper { max-width: 1600px; margin: 0 auto }
.wrapper-login { max-width: 1000px; margin: 0 auto }
.content { margin: 0 20px; clear: both; padding-top: 25px }
h1 { font-family: 'Beyond The Mountains'; font-weight: normal; color: #fab806; margin: 20px 10px 40px; font-size: 40px; text-shadow: -1px 1px #3e3e3e }
h1 span { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;	color:#aaa;	text-shadow: 0 0 #000; font-size: 34px }
.login { text-align: center; font-size: 22px; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #717171 }
.login input { margin-left: 12px; width: 275px; height: 30px; font-size: 19px }
form { margin: 0 auto }
input.sign_in { width: 150px; float: right; margin-right: 8px; background: #1166aa; border: none; height: 35px; text-transform: uppercase; color: #fff }
.block_wrapper, .container { max-width: 1500px; margin: 0 auto; overflow: auto;	padding: 0 10px }
.early_container { float: left; width: 32%; margin-right: 2% }
.orders_early { width: 100%; background: #85df71; color: #fff; border-radius: 8px }
.otif_container { float: left; width: 32%; margin-right: 2% }
.orders_otif { width: 100%;	background: #7492c8; color: #fff; border-radius: 8px }
.late_container { float: left; width: 32% }
.orders_late { width: 100%;	background: #f05a58; color: #fff; border-radius: 8px }
.gauge_info { display: inline-block; width: 100%; margin-bottom:5px; position: relative; background-color: rgba(0, 0, 0, 0.3); margin-top: 6px; border-radius: 0 0 8px 8px }
.title_early, .title_late, .title_otif { font-size: 22px; width: 140px;	float: left; margin: 8px 0px 0px 12px; display: inline-block; line-height: 25px }
.total_early, .total_otif, .total_late { font-size: 32px; margin: 0px 0px 0px; position: relative; display: inline-block; line-height: 40px; float: right; text-align: right }
.total_orders { float: right; margin: 11px 14px 0 0; font-size: 22px; display: inline-block; }
.non_con th, .non_con td { font-size: 11px; padding: 12px 5px }
p.no_results { padding: 16px 5px 0px; float: left; margin: 0; line-height: 24px; font-size: 14px }
.info_text { font-size: 13px; float: left }
form.search { float: right; width: 240px; margin-right: 20px }
form.date_filter { float: right; width: 215px; margin-right: 10px; margin-bottom: 10px }
form.date_chart_filter { width: 215px; margin:0 auto 30px }
form.download_csv { float: right; width: 120px; margin-right: 10px; margin-top: 15px; margin-bottom: 10px }
.new_po { float: right; width: 30px; height: 25px; margin-right: 15px }
p.new_po_text { visibility: hidden; position: absolute; background: #333; width: 260px; padding: 6px; color: #fff; right: 8%; margin-top: 2px; font-size: 14px }
.new_po:hover p.new_po_text { visibility: visible }
.acknowledged { float: right; width: 30px; height: 25px; margin-right: 15px }
p.acknowledged_text { visibility: hidden; position: absolute; background: #333; width: 280px; padding: 6px; color: #fff; right: 5%; margin-top: 2px; font-size: 14px }
.acknowledged:hover p.acknowledged_text { visibility: visible }
.despatched { float: right; width: 30px; height: 25px; margin-right: 22px }
p.despatched_text {	visibility: hidden;	position: absolute; background: #333; width: 76px; padding: 6px; color: #fff; right: 2%; margin-top: 2px; font-size: 14px }
.despatched:hover p.despatched_text { visibility: visible }
div#db-table-container { margin: 0 auto; clear: both; padding: 0 10px }
div#db-table-container a { color: #000; display: inline-block; margin-left: 5px; text-decoration: none }
#db-table-container table { border-spacing: 0px; border-width: 1px 1px 0 2px; border-style: solid; border-color: #e3e3e3; width: 100% }
.non_con_key table { border-spacing: 0px; border-width: 1px 1px 0 2px; border-style: solid;	border-color: #e3e3e3 }
th { border: 1px solid #e3e3e3; font-size: 13px }
.po_number { width: 8%;	padding: 8px 0 }
.supplier { width: 8%; padding: 8px 0 }
.qmp_so_num { width: 8%; padding: 8px 0 }
.order_date { width: 8%; padding: 8px 0 }
.status { width: 8%; padding: 8px 0 }
.expected_delivery { width: 12%; padding: 8px 0 }
.lead_time { width: 8%; padding: 8px 0 }
.courier { width: 13%; padding: 8px 0 }
.delivery_serv { width: 8%; padding: 8px 0 }
.actual_despatch { width: 8%; padding: 8px 0 }
.otif {	width: 5%; padding: 8px 0 }
.late_del { width: 6%; padding: 8px 0 }
.cancel_order { width: 6%; padding: 8px 0 }
.action { padding: 4px 10px; float: right }
.action input[type=text] {padding:5px; border:2px solid #ccc; -webkit-border-radius: 5px; border-radius: 5px }
.action input[type=text]:focus { border-color:#333 }
.action input[type=submit] { padding:8px 15px; background:#ccc; border:0 none; cursor:pointer; -webkit-border-radius: 5px; border-radius: 5px; width: 100%; font-size: 11px; max-width: 160px }
.acknowledge {
    display: inline-block;
    width: 160px;
    margin-right: 15px;
}
.despatch {
    display: inline-block;
    width: 160px;
    margin-right: 15px;
}
.tracking {
    display: inline-block;
    width: 160px;
}
#cancelled {
    display: inline-block;
    width: 160px;
    margin-right: 15px;
}
#late_delivery {
    display: inline-block;
    width: 160px;
}

td p {
	margin: 2px
}

td {
	border-bottom: 2px solid #e3e3e3;
	border-right: 1px solid #e3e3e3;
	font-size: 14px;
	text-align: center;
}

input {
    margin: 2px 0;
}

th.i_c_s, td.i_c_s {
	width:30px
}

th.nc_no, td.nc_no {
	width:60px
}

th.date_order, td.date_order {
	width:75px
}

th.supplier_code, td.date_order {
	width:65px
}

th.po_no, td.po_no {
	width:50px
}

th.memo_date, td.memo_date {
	width:75px
}

th.comments, td.comments {
	width:220px
}

th.user_id, td.user_id {
	width:70px
}

th.issue, td.issue {
	width:40px
}

th.so_no, td.so_no {
	width:65px
}

th.depot, td.depot {
	width:40px
}

th.est_cost, td.est_cost {
	width:60px
}

th.admin_cost, td.admin_cost {
	width:60px
}

th.holding_comments, td.holding_comments {
	width:180px
}

th.credit_no, td.credit_no {
	width:50px
}

th.credit_received, td.credit_received {
	width:90px
}

th.action_points, td.action_points {
	width:130px
}

#pagination_controls a {
    padding: 6px 10px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px 2px #ccc;
    margin: 0 5px;
    text-decoration: none;
    font-size: 14px;
    color: #3e3e3e;
    background: #eeeeee;
}
#pagination_controls a:hover {
    box-shadow: none;
}
#pagination_controls p {
	display: inline-block;
    padding: 6px 10px;
    border: 1px solid #ccc;
	box-shadow: 2px 2px 5px 2px #ccc;
    margin: 0 5px;
    text-decoration: none;
    font-size: 14px;
    color: #f8b817;
    background: #eeeeee;
}

.GroupProds {
    position: absolute;
    max-width: 500px;
    width: 100%;
    background: #fff;
    margin-top: -68px;
    margin-left: 6%;
    padding: 20px;
    box-shadow: 2px 2px 5px 2px #3e3e3e;
}
.GroupProds .nav-toggle {
	position: absolute;
	right: 10px;
	top: 10px;
	box-shadow: 2px 2px 2px 0px #ccc;
}
.nav-toggle:hover {
	box-shadow: -1px -1px 2px 0px #ccc;
}
.results {
	margin-top: 15px;
}
.po_details {
    text-align: center;
}
.po_details span {
    text-decoration: underline;
    font-size: 18px;
}
.nav-toggle {

    padding: 2px 6px;
	font-size: 16px;
}

.view_chart {
	text-align: center;
    position: relative;
    margin: 0 auto;
}

.view_chart a {
	background: #f8b817;
    padding: 10px 50px;
    font-size: 18px;
    border: 1px solid #e3e3e3;
    color: #fff;
	display: block;
    width: 100px;
    margin: 0 auto;
}

.non_con_key td {
    line-height: 20px;
    padding: 5px 10px;
    font-size: 14px;
}

.GaugeMeter {
  position: Relative;
  text-align: Center;
  overflow: Hidden;
  cursor: Default;
  margin: 0 auto;
  height: 155px;
}

.GaugeMeter SPAN {
  width: 55%;
  position: Absolute;
  text-align: Center;
  display: Inline-Block;
  color: RGBa(0,0,0,.8);
  margin: 0 23%;
  top: 65px;
  line-height: 50px !important;
  font-size: 38px !important;
}

.GaugeMeter B {
  width: 50%;
  position: Absolute;
  text-align: Center;
  display: Inline-Block;
  color: RGBa(0,0,0,.8);
  margin: 0 23%;
  top: 110px;
  line-height: 18px !important;
}

.GaugeMeter[data-style="Semi"] B {
  width: 80%;
  margin: 0 10%;
}

.GaugeMeter S, .GaugeMeter U {
  text-decoration: None;
  font-size: .60em;
  font-weight: 200;
  opacity: .6;
}

.GaugeMeter B {
  color: #000;
  font-weight: 200;
  opacity: .8;
}

.supplier_refine {
    margin-top: 15px;
	text-align: center;
	display: block
}

.supplier_refine_group {
	display: none
}


a.supplier_refine_link {
    font-size: 30px;
    margin: 1%;
    text-align: center;
    color: #000;
    text-decoration: none;
}

a.supplier_refine_link:hover {
    color: #245ca8;
	text-decoration: underline;
}

.supplier_container_link {
    display: inline-block;
    width: 20%;
    text-align: center;
    margin: 15px;
    vertical-align: middle;
}

.supplier_container_link a {
    color:#5F5F5F;
	text-decoration:none;
}

.supplier_container {
    text-align: center;
    margin-top: 20px;
}

@media only screen and (max-width: 771px) {
	.workplace_logo 
	{
		width: 35%;
	    max-width: 246px	
	}
	
	.workplace_logo img {
		width:100%
	}
	
	.direct2u_logo 
	{
		width: 52%;
		max-width: 434px
	}
	
	.direct2u_logo img 
	{
		width:100%
	}
	
	.supplier_refine {
		display: none
	}

	.supplier_refine_group {
		margin-top: 15px;
		text-align: center;
		display: block
	}
}
.pagination_container {
    max-width: 1340px;
    margin: 0 auto;
    text-align: center;
}


.nav li .dropdown-menu {
    display: inline-block;
    list-style: none;
	width: 100%;
}

.nav li .dropdown-menu li {
	width: 100%;
    background: #fff;
    border-bottom: 1px solid #000;
}

.nav .button-dropdown {
    position: relative;
}

.nav li a span {
    display: inline-block;
    margin-left: 5px;
    font-size: 10px;
	top: -2px;
    position: relative
}

.nav li .dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    padding: 0;
    margin: 0;
    margin-top: 3px;
    text-align: left;
}

.nav li .dropdown-menu.active {
    display: block;
}

.note_info {
    overflow: auto;
    max-width: 1000px;
    margin: 0 auto;
}
p.note_user {
    float: left;
}
p.note_date {
    float: right;
}
.view_meeting {
    max-width: 1000px;
    margin: 0 auto;
}

.meeting_link { display: inline-block; max-width: 250px; margin: 0 30px 20px 0; position: relative }
.meeting_link p { text-align: center; position: absolute; max-width: 200px; width: 100%; right: 8%; top: 40% }
.meeting_link img { width: 100%; position: relative; max-width: 250px; }

.meeting_form 
{
    width: 100% !important;
    margin: 0 auto;
    max-width: 1000px;
}

.meeting_title 
{
    margin-bottom: 15px;
}

.meeting_title p 
{
    float: left;
    margin: 4px 10px 0 0;
    line-height: 20px;
}

.create_notes 
{
    width: 100%;
    text-align: right;
	top: -50px;
    position: relative
}

.create_notes a
{
	background: #f8b817;
	padding: 12px 60px;
	font-size: 18px;
	border: 1px solid #e3e3e3;
	color: #fff
}

.non_con_form
{
    width: 100% !important;
    margin: 0 auto;
}

/*-----------------------------------------------------------------------------------Charts-----------------------------------------------------------------------------*/

.chart {
    max-width: 1180px;
    margin: 0 auto;
}

.chart_internal {
    max-width: 1180px;
    margin: 0 auto;
}

.bar span {
	background: rgba(0, 0, 0, 0);
}
.fig0, .fig4, .fig8, .fig12{
	background: #747474; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #4dff4d , #00b300); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #4dff4d , #00b300); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, #4dff4d , #00b300); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #4dff4d , #00b300); /* Standard syntax */
}
.fig1, .fig5, .fig9, .fig13{
	background: #65c2e8; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #65C2E8 , #2075A8); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #65C2E8 , #2075A8); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, #65C2E8 , #2075A8); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #65C2E8 , #2075A8); /* Standard syntax */
}
.fig2, .fig6, .fig10, .fig14{
	background: #eea151; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #EEA151 , #BF5915); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #EEA151 , #BF5915); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, #EEA151 , #BF5915); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #EEA151 , #BF5915); /* Standard syntax */
}
.fig3, .fig7, .fig11, .fig15{
	background: #D64825; /* Not support gradients */
  background: -webkit-linear-gradient(left, #D64825 , #882F18); /* For Safari */
  background: -o-linear-gradient(right, #D64825 , #882F18); /* For Opera */
  background: -moz-linear-gradient(right, #D64825 , #882F18); /* For Firefox */
  background: linear-gradient(to right, #D64825 , #882F18); /* Standard */
}

#data-table {
	border: none; /* Turn off all borders */
	border-top: 1px solid #ccc;
	width: 540px;
	display: none;
}
#data-table caption {
	color: #545454;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
	margin: 0 0 20px 0;
	padding: 0;
	text-align: center;
}
#data-table thead {
	background: #f0f0f0;
}
#data-table th,
#data-table td {
	border: none; /* Turn off all borders */
	border-bottom: 1px solid #ccc;
	margin: 0;
	padding: 10px;
	text-align: left;
}

/* Toggle */
.toggles {
	background: #ebebeb;
	color: #545454;
	height: 20px;
	padding: 15px;
}
.toggles p {
	margin: 0;
}
.toggles a {
	background: #222;
	border-radius: 3px;
	color: #fff;
	display: block;
	float: left;
	margin: 0 10px 0 0;
	padding: 0 6px;
	text-decoration: none;
}
.toggles a:hover {
	background: #666;
}
#reset-graph-button {
	float:right;
}

/* Graph */
/* Containers */
#wrapper {
	height: 420px;
	left: 40%;
	margin: -210px 0 0 -270px;
	position: absolute;
	top: 50%;
	width: 1040px;
}
#figure {
	height: 330px;
	position: relative;
}
#figure ul {
	list-style: none;
	margin: 0 23px;
	padding: 0;
}
.graph {
	height: 283px;
	position: relative;
}

/* Legend */
.legend {

	background: rgba(255, 255, 255, 0);
	bottom: 0;
	position: absolute;
	text-align: center;
	top: 222px;
	z-index: 200;
	display: none;
}
.legend li {
	display: block;
	float: left;
	height: 10px;
	margin: 0;
	padding: 10px 5px;
	width: 70px;
	color: #555;
	text-shadow: rgba(0, 0, 0, 0.5) 0 1px 0;
	margin-top: 30px;
}

#inter_chart .legend li {
	width: 60px;
}
/* X-Axis */
.x-axis {
	bottom: 0;
	color: #555;
	position: absolute;
	text-align: center;
	width: 740px;
}
.x-axis li {
	float: left;
	margin: 0 15px;
	padding: 5px 0;
	width: 96px;
}

/* Y-Axis */
.y-axis {
	color: #555;
	position: absolute;
	text-align: right;
	width: 100%;
}
#internal_chart .y-axis li {
	border-top: 1px solid #ccc;
	display: block;
	height: 49px;
	width: 100%;
}
#customer_chart .y-axis li {
	border-top: 1px solid #ccc;
	display: block;
	height: 49px;
	width: 100%;
}
.y-axis li {
	border-top: 1px solid #ccc;
	display: block;
	height: 24px;
	width: 100%;
}
.y-axis li span {
	display: block;
	margin: -10px 0 0 -60px;
	padding: 0 10px;
	width: 40px;
}

/* Graph Bars */
.bars {
	height: 253px;
	position: absolute;
	width: 100%;
}
.bar-group {
	float: left;
	height: 100%;
	margin: 0 25px;
	position: relative;
	width: 135px;
}
.bar {
	border-radius: 3px 3px 0 0;
	bottom: 2px;
	height: 0;
	position: absolute;
	text-align: center;
	width: 76px;
  box-shadow: 2px -2px 4px #888888;
}
.bar.fig0 {
	left: 0;
}
.bar.fig1 {
	left: 80px;
}
.bar.fig2 {
	left: 160px;
}
.bar.fig3 {
	left: 240px;
}
.bar.fig4 {
	left: 320px;
}
.bar.fig5 {
	left: 400px;
}
.bar.fig6 {
	left: 480px;
}
.bar.fig7 {
	left: 560px;
}
.bar.fig8 {
	left: 640px;
}
.bar.fig9 {
	left: 720px;
}
.bar.fig10 {
	left: 800px;
}
.bar.fig11 {
	left: 880px;
}
.bar.fig12 {
	left: 960px;
}
.bar.fig13 {
	left: 1040px;
}

#inter_chart .bar {
	width: 66px;
}

#inter_chart .bar.fig0 {
	left: 0;
}
#inter_chart .bar.fig1 {
	left: 70px;
}
#inter_chart .bar.fig2 {
	left: 140px;
}
#inter_chart .bar.fig3 {
	left: 210px;
}
#inter_chart .bar.fig4 {
	left: 280px;
}
#inter_chart .bar.fig5 {
	left: 350px;
}
#inter_chart .bar.fig6 {
	left: 420px;
}
#inter_chart .bar.fig7 {
	left: 490px;
}
#inter_chart .bar.fig8 {
	left: 560px;
}
#inter_chart .bar.fig9 {
	left: 630px;
}
#inter_chart .bar.fig10 {
	left: 700px;
}
#inter_chart .bar.fig11 {
	left: 770px;
}
#inter_chart .bar.fig12 {
	left: 840px;
}
#inter_chart .bar.fig13 {
	left: 910px;
}
#inter_chart .bar.fig14 {
	left: 980px;
}
#inter_chart .bar.fig15 {
	left: 1050px;
}
.bar span {
	font-size: 30px;
	opacity: 60%;
	color: #414141;
	left: 15px;
	bottom: 35px;
	margin: 0;
	position: absolute;
	width: 40px;
	z-index: 20;
}
.percent{
	font-size: 8px;
}
@media only screen and (max-width: 1000px) {
	li#supplier {width: 140px;}
	#supplier a {background-repeat: no-repeat;background-position: 2px 6px;}
	li#orders {width: 130px;}
	#orders a {background-repeat: no-repeat;background-position: 0px -64px;}
	#all_orders a {background-position: 37px -64px;}
	#live_orders a {background-position: 33px -338px;}
	#archived_orders a {background-position: 13px -406px;}
	li#notes {width: 117px;}
	#notes a {background-repeat: no-repeat;background-position: -2px -132px;}
	#meeting_notes a {background-position: 17px -131px;}
	#agreements a {background-position: 25px -472px;}
	li#non-con {width: 230px;}
	#non-con a {background-repeat: no-repeat;background-position: -2px -201px;}
	#all-non-con a {background-repeat: no-repeat;background-position: 41px -200px;}
	#supplier-non-con a {background-repeat: no-repeat;background-position: 16px -200px;}
	#internal-non-con a {background-repeat: no-repeat;background-position: 16px -200px;}
	#customer-non-con a {background-repeat: no-repeat;background-position: 10px -200px;}
	#upload-non-con a {background-repeat: no-repeat;background-position: 16px -200px;}
	li#help {width: 96px;}
	#help a {background-repeat: no-repeat;background-position: -3px -540px;}
	#how-to a {background-repeat: no-repeat;background-position: 12px -606px;}
	#media a {background-repeat: no-repeat;background-position: 18px -738px;}
	#faq a {background-repeat: no-repeat;background-position: 20px -673px;}
	li#logout {width: 113px;}
	#logout a {background-repeat: no-repeat;background-position: 0px -269px;}
}
@media only screen and (max-width: 864px) {
	header { bbackground-image: none }
	.nav { width: 100%; text-align: center; margin: 0 auto; padding:0 }
	.nav li { display: none }
	.nav li:hover {	background:#bbbbbb }
	.nav li a { color: #303030; text-decoration: none; display: block; padding: 9px 0px 5px 56px; background-image: url(images/image_sprite.png); }
	.nav .icon { display: block; }
	.nav.responsive { background: #969696; position: relative }
	.nav.responsive .icon { border-bottom: 1px solid #ccc }
 	.nav.responsive li { float: none; display: block; text-align: left }
	.nav.responsive li .dropdown-menu { position: relative }
	.nav .dropdown-menu li a { padding: 9px 0px 5px 70px }
	li#supplier { width: 100%; border-bottom: 1px solid #ccc }
	#supplier a { background-repeat: no-repeat; background-position: 8px 5px; }
	li#orders { width: 100%; border-bottom: 1px solid #ccc }
	#orders a { background-repeat: no-repeat; background-position: 7px -64px }
	#orders ul.dropdown-menu { width: 100% }
	#all_orders a { background-position: 30px -64px }
	#live_orders a { background-position: 30px -338px }
	#archived_orders a { background-position: 30px -406px }
	li#notes { width: 100%; border-bottom: 1px solid #ccc }
	#notes a { background-repeat: no-repeat; background-position: 7px -132px }
	#notes ul.dropdown-menu { width: 100% }
	#meeting_notes a { background-position: 30px -132px }
	#agreements a { background-position: 30px -472px }
	li#non-con { width: 100%; border-bottom: 1px solid #ccc }
	#non-con a { background-repeat: no-repeat; background-position: 6px -200px }
	#all-non-con a { background-position: 30px -201px }
	#supplier-non-con a { background-repeat: no-repeat; background-position: 30px -201px }
	#internal-non-con a { background-repeat: no-repeat; background-position: 30px -201px }
	#customer-non-con a { background-repeat: no-repeat; background-position: 30px -201px }
	#upload-non-con a { background-repeat: no-repeat; background-position: 30px -201px }
	li#help { width: 100%; border-bottom: 1px solid #ccc }
	#help a { background-repeat: no-repeat; background-position: 8px -540px }
	#help ul.dropdown-menu { width: 100% }
	#how-to a { background-repeat: no-repeat; background-position: 25px -606px }
	#media a { background-repeat: no-repeat; background-position: 26px -738px }
	#faq a { background-repeat: no-repeat; background-position: 26px -673px }
	li#logout {	width: 100%; border-bottom: 2px solid #f8b817 }
	#logout a { background-repeat: no-repeat; background-position: 7px -269px }
	h1 { text-align: center; font-size: 32px; margin: 20px 10px 7px }
	h1 span { font-size: 31px; line-height: 40px }
	.early_container { margin-bottom: 10px; width: 100% }
	.otif_container { margin-bottom: 10px; width: 100% }
	.late_container { width: 100% }
	.info_text { width: 100%; font-size: 13px; float: left; margin-left: 0 }
	.new_po { float: right; width: 30px; height: 25px; margin-right: 15px; margin-top: 0 }
	.acknowledged { float: right; width: 30px; height: 25px; margin-right: 15px; margin-top: 0 }
	.despatched { float: right; width: 30px; height: 25px; margin-right: 22px; margin-top: 0 }
	#cancelled { width: 150px }
	#late_delivery { width: 150px }
	th { font-size: 11px }
	td { font-size: 12px; }
	.GroupProds { width:260px }
	.po_number { width: 8%; padding: 8px 0 }
	.supplier { width: 8%; padding: 8px 0 }
	.qmp_so_num { width: 8%; padding: 8px 0 }
	.order_date { width: 8%; padding: 8px 0 }
	.status { display: none }
	.expected_delivery { width: 12%; padding: 8px 0 }
	.expected_delivery input { width: 95px; }
	.lead_time { width: 8%; padding: 8px 0 }
	.courier { width: 13%; padding: 8px 0 }
	.courier input { width: 95px }
	.delivery_serv { width: 8%; padding: 8px 0 }
	.delivery_serv select { width: 50px }
	.courier input { width: 95px; }
	.actual_despatch { width: 8%; padding: 8px 0 }
	.otif { width: 5%; padding: 8px 0 }
	.late_del {	width: 6%; padding: 8px 0; }
	.cancel_order { width: 6%; padding: 8px 0 }
	.action { padding: 4px 10px; float: right }
}
@media only screen and (max-width: 500px) {
	#db-table-container table {	width: 750px }
}