/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,  sub, sup, tt, var, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	border:0;
	font-size:13px;
	margin:0;
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
	line-height:1.3;
        max-width: 100% !important;
}


article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block
}
body {
	line-height:1;
	padding:0;
}
ol, ul {
	list-style:none
}
blockquote, q {
	quotes:none
}
blockquote:before, blockquote:after, q:before, q:after {
	content:none
}
table {
	border-collapse:collapse;

}

a{
	text-decoration:none;
	-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;}
a:hover{
		
		}

/*************** THEME STYLES START ****************/

h1,
h1 a,
h1 a:visited
{
	background: #ffffff;
	color: #3d505f;
	font: normal 20px lato, arial;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 0px;
	text-decoration: none;
}

h2{
	margin: 0px 0px 10px 0px;	
	padding: 0px;
	
}

h2,
h2 a,
h2 a:visited
{
	color: #666666;
	font: bold 18px lato, arial;

	text-transform:uppercase;

}

h2.section-header
h2.section-header a,
h2.section-header a:visited
{
/*	background: none;
	font: normal 20px lato, arial;
	margin: 0px 0px 0px 0px;
	border-bottom: 0px solid #fff;
	border-left: 0px solid #ccc; */
	text-transform: none;
	background-color:##Box Header Color##;
	text-decoration: none;
}

h3,
h3 a,
h3 a:visited
{
	color: #808080;
	font: bold 16px lato, arial;
	margin: 0px 0px 0px 0px;	
	padding: 0px 0px 0px 0px;
}

h3 a
{
	text-decoration: none;
}


.btn-green-big, .btn-green-big:visited {
	background: #17c42a;
	display: block;
	font-size: 150%;
	line-height: 150%;
	margin: 0 0 5px;
	padding: 5px 40px;
	text-align: center;
	color: #fff;
	font-weight: 900;
	text-transform: uppercase;
	border:0;
  cursor:pointer;
}
.btn-green-big:hover {
	background: #666;
	color: #fff;
	text-decoration:none;
}
.btn-green, .btn-green:visited {
	background: #17c42a;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	padding: 5px 15px;
	display: inline-block;
	border:0;
	box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  height:34px;
  cursor:pointer;
}
.btn-green:hover {
	background: #666;
	color: #fff;
	text-decoration:none;
}
.btn-grey, .btn-grey:visited {
	background: #999;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	padding: 5px 15px;
	display: inline-block;
	border:0;
	box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  height:34px;
  cursor:pointer;
}
.btn-grey:hover {
	background: #666;
	color: #fff;
	text-decoration:none;
}

a.link-button,
a.link-button:active,
a.link-button:visited,
a.link-button-iframe
{	
	background: #f3efe7;
	border: 0px solid #ffffff;
	color: #fff;
	font-size: 9px;
	text-decoration: none;
	padding: 5px 10px 5px 10px;

}

a.link-button:hover,
a.link-button-iframe
{
	text-decoration: none;
	background-color: #666;
}

select, input, textarea {
	border: 1px solid #999;
	padding: 6px 10px;
	margin: 0 10px 0 0;

}
input.btn-green-big{
	-webkit-appearance: none;
	}
.header.main_header {
	height: 80px;
	text-align:center;
}

.header .menu-button button{
	display:block;
	height:40px;
	width:70px;
	background-color: #fff;
	white-space: nowrap;
	border:0;
	border-right:1px solid #ccc;
	}

.search-div {
	clear: both;
	border: 1px solid #ccc;
	margin-top: -5px;

}
.search-container {
	width: 100%;
}
.search-field {
	padding: 8px 20px;
	height: 40px;
	border: 0;
	font-size: 15px;
	background: #f2f2f2;
	color: #666;
	width: 100%;
	box-sizing: border-box;
	margin:0;

}
.search-button {
	color: #fff;
	font-size: 13px;
	text-decoration: none;
	padding: 0 55px;
	height: 40px;
	border: 0;
	background: url(/webfiles/PeggyandFinn2AU/layouts/images/5476/btn-search-white.png) center center no-repeat #666;
	text-indent: -9999px;
	margin:0;
}
.topbutton {
	background: #ededed;
	padding: 10px;
	height: 35px;
	display: block;
	text-align: center;
	width: 35px;
	margin-left: 5px;

	font-size: 11px;
}
.topbutton img {
	max-width: 20px;
	max-height: 20px;
}



/**** LEFT NAV STYLES START ****/

table#leftnav
{
	width: 100%;
}	

td#ln-top 
{
}
	
td#ln-middle 
{
}

td#ln-bottom 
{
	padding-top:5px;
}

a.ln-link-std-level1,
a.ln-link-std-level1:hover,
a.ln-link-std-level1-closed,
a.ln-link-std-level1-closed:hover,
a.ln-link-std-level1-open,
a.ln-link-std-level1-open:hover,
a.ln-selected-std-level1,
a.ln-selected-std-level1:hover,
a.ln-selected-std-level1-closed,
a.ln-selected-std-level1-closed:hover,
a.ln-selected-std-level1-open,
a.ln-selected-std-level1-open:hover{
	background:#d3d3d3;
	padding:10px 20px;
	display: block;
	text-align:center;
	font-size: 16px;
	margin:0 0 3px 0;
	
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
a.ln-link-std-level1:hover,
a.ln-link-std-level1-closed:hover,
a.ln-link-std-level1-open:hover,
a.ln-selected-std-level1:hover,
a.ln-selected-std-level1-closed:hover,
a.ln-selected-std-level1-open:hover{
	background:#ccc;
	}

a.ln-link-std-level2,
a.ln-link-std-level2:hover,
a.ln-link-std-level2-closed,
a.ln-link-std-level2-closed:hover,
a.ln-link-std-level2-open,
a.ln-link-std-level2-open:hover,
a.ln-selected-std-level2,
a.ln-selected-std-level2:hover,
a.ln-selected-std-level2-closed,
a.ln-selected-std-level2-closed:hover,
a.ln-selected-std-level2-open,
a.ln-selected-std-level2-open:hover{
	background:#e5e5e5;
	padding:10px 20px;
	display: block;
	text-align:center;
	font-size: 14px;
	margin:0 0 3px 0;
	
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
a.ln-link-std-level2-open,
a.ln-selected-std-level2-open{
	font-weight:bold;
	}




a.ln-link-std-level2:hover,
a.ln-link-std-level2-closed:hover,
a.ln-link-std-level2-open:hover,
a.ln-selected-std-level2:hover,
a.ln-selected-std-level2-closed:hover,
a.ln-selected-std-level2-open:hover{
	background:#ccc;}

a.ln-link-std-level3,
a.ln-link-std-level3-closed,
a.ln-link-std-level3-open,
a.ln-selected-std-level3,
a.ln-selected-std-level3-closed,
a.ln-selected-std-level3-open
{
	background:#f3f3f3;
	padding:10px 20px;
	display: block;
	text-align:center;
	font-size: 14px;
	margin:0 0 3px 0;
	
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
a.ln-link-std-level3:hover,
a.ln-link-std-level3-closed:hover,
a.ln-link-std-level3-open:hover,
a.ln-selected-std-level3:hover,
a.ln-selected-std-level3-closed:hover,
a.ln-selected-std-level3-open:hover{
	background:#ccc;
	}

a.ln-link-std-level4,
a.ln-link-std-level4-closed,
a.ln-link-std-level4-open,
a.ln-selected-std-level4,
a.ln-selected-std-level4-closed,
a.ln-selected-std-level4-open{
	background:#fdfdfd;
	padding:10px 20px;
	display: block;
	text-align:center;
	font-size: 14px;
	margin:0 0 3px 0;
	
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
a.ln-link-std-level4:hover,
a.ln-link-std-level4-closed:hover,
a.ln-link-std-level4-open:hover,
a.ln-selected-std-level4:hover,
a.ln-selected-std-level4-closed:hover,
a.ln-selected-std-level4-open:hover{
	background:#ccc;
	}

a.ln-link-std-level5,
a.ln-link-std-level5:hover,
a.ln-link-std-level5-closed,
a.ln-link-std-level5-closed:hover,
a.ln-link-std-level5-open,
a.ln-link-std-level5-open:hover,
a.ln-selected-std-level5,
a.ln-selected-std-level5:hover,
a.ln-selected-std-level5-closed,
a.ln-selected-std-level5-closed:hover,
a.ln-selected-std-level5-open,
a.ln-selected-std-level5-open:hover{
	background:#e5e5e5;
	padding:10px 20px;
	display: block;
	text-align:center;
	font-size: 14px;
	margin:0 0 3px 0;
	
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	}

/* LEFT NAV SUB LINKS */


a.ln-link-sub,
a.ln-selected-sub,
a.ln-link-sub:active,
a.ln-selected-sub:active,
a.ln-link-sub:visited,
a.ln-selected-sub:visited
{
	background: #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	color: #333333;
	display: block; /* "block" is used to make top and bottom padding work on A tags*/
	font: normal 12px arial;
	padding: 4px 3px 4px 25px;
	text-align:left; /* by default this A tag will center the text */
	text-decoration: none;
}

a.ln-selected-sub,
a.ln-link-sub:hover,
a.ln-selected-sub:hover 
{
	font-weight:bold;
}

.FilterHeaders
{
	padding: 4px 3px 4px 5px !important;
	font: bold 14px Arial !important;
	text-transform:uppercase;	
    margin-top: 5px !important;
    border-bottom: 1px dotted #000000;
	background: #dddddd;
}

.FilterTable
{
	background: #eeeeee;	
}

/**** LEFT NAV STYLES END ****/

/**** FOOTER STYLES START ****/

div#footer-container
{
	margin-top:15px;
}

div#footer-container,
div#footer-container div,
div#footer-container span.spacer,
div#footer-container a,
div#footer-container a:active,
div#footer-container a:visited,
div#footer-container strong
{
	color: #626161;
	font: 12px lato, arial;
	text-decoration:none;
}

div#footer-container a:hover
{
	text-decoration:underline;
}

div#footer-container strong{
	font-weight:bold;
}

div#footer-container #footer-list{
	background: #f3f3f3 url(/webfiles/PeggyandFinn2AU/layouts/images/FooterBackground.jpg);
	padding: 10px 20px;
}

div#footer-container .footer-width{
	overflow:auto;
	padding:10px;
	background:#bbb;
	
}


div#footer-container .footer-left
{
	clear:both;
	color:#fff;
}

div#footer-container .footer-right
{
	color:#fff;
	margin-top: 5px;
}


/**** FOOTER STYLES END ****/

#nav {
	padding: 10px 0 15px 0;
	position: fixed;
	width: 100%;
	bottom: 0;
	background: #515151; /* Old browsers */
	background: -moz-linear-gradient(top, #515151 0%, #353535 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #515151), color-stop(100%, #353535)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #515151 0%, #353535 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #515151 0%, #353535 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #515151 0%, #353535 100%); /* IE10+ */
	background: linear-gradient(to bottom, #515151 0%, #353535 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515151', endColorstr='#353535', GradientType=0 ); /* IE6-9 */
display:none;
}
#nav a {
	display: inline-block;
	padding: 60px 0 0 0;
	min-width:58px;
	white-space:nowrap;
	background-position: top center;
	background-repeat: no-repeat;
	color: #d3d3d3;
	text-shadow: 0 1px 4px #1b1b1b;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}
#nav a.active {
	color: #f78a1e;
}
#nav a.stores {
	background-image: url(/webfiles/PeggyandFinn2AU/layouts/images/icon-stores-inactive.png);
}
#nav a.chat {
	background-image: url(/webfiles/PeggyandFinn2AU/layouts/images/icon-chat-inactive.png);
}
#nav a.timeline {
	background-image: url(/webfiles/PeggyandFinn2AU/layouts/images/icon-timeline-inactive.png);
}
#nav a.pickpack.active {
	background-image: url(/webfiles/PeggyandFinn2AU/layouts/images/icon-pickpack-active.png);
}
#nav a.more {
	background-image: url(/webfiles/PeggyandFinn2AU/layouts/images/icon-more-inactive.png);
}

body {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body .viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

body .viewport .frame {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0; 
}

body .viewport .frame .navbar .navbar-inner {
  border-radius: 0;
  padding-left: 5px; 
}

body .viewport .frame .menu {
  height: 100%;
  /* background-color: #3D6AA2; */ 
}

body .viewport .frame .menu.collapse {
  float: left;
  height: 100% !important;
  width: auto; 
}

body .viewport .frame .menu.collapse.height {
  position: relative;
  height: 0px;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;  
  overflow: auto;
  -webkit-transition: height 0.35s ease;
  -moz-transition: height 0.35s ease;
  -o-transition: height 0.35s ease;
  transition: height 0.35s ease; 
}

body .viewport .frame .menu.collapse.width {
  position: relative;
  width: 0px;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;  
  overflow: auto;
  -webkit-transition: width 0.35s ease;
  -moz-transition: width 0.35s ease;
  -o-transition: width 0.35s ease;
  transition: width 0.35s ease; 
}

body .viewport .frame .menu.collapse.in.width {
  width: auto; 
}

body .viewport .frame .menu.collapse.in.height {
  height: auto; 
}

body .viewport .frame .menu .collapse-inner {
  position: relative;
  width: 250px;
  height: 100%; 
}

body .viewport .frame .menu .navbar .navbar-inner {
  text-align: center;
  color: grey;
  font-size: 1.2em;
  line-height: 38px; 
}

body .viewport .frame .menu .nav-stacked {
  padding: 0px 0px 0px 0px; 
}

body .viewport .frame .view {
  width: 50%;
  height: 100%;
  overflow: auto; 
}

body .viewport .frame .view .navbar .navbar-inner .btn-navbar {
  display: block;
  float: left; 
}

body .viewport .frame .view #content {
	width: 100%;
  margin: auto 0px;
  padding: 0px 0px 0px 0px; 
  text-align: justify; 
}


.button-blue{
	border:1px solid #39464f;
	background:#39454e url("/cloud/pos/client/images/button-bg-blue.jpg") left top repeat-x;
	color:#fff;
	font-size:13px;
	text-decoration:none;
	height:28px;
	padding:3px 7px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin:0 3px 0 0px;
	}
.button-grey{
	background:#666;
	color:#fff;
	font-size:13px;
	text-decoration:none;
	padding:7px 10px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border:0;
	margin:0 0 0 3px;
	}
	.button-grey:hover{
		background:#999;
		cursor:pointer;
		}

.parentcats {
	background:#e5e5e5;
	padding:10px 20px;
	display: block;
	text-align:center;
	font-size: 14px;
	margin:0 0 3px 0;
	
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.parentcats:hover{
	background:#ccc;
	}
	
	
	/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:0em;
 width:100%;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
 margin:0;
 padding: 0;
 border-bottom: 1px solid #aaa;
}

ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernav li a
{
 padding: 10px 20px;
 border: 1px solid #aaa;
 background: #EEEEEE;
 text-decoration: none;
 font-weight:900;
 font-size:16px;
 text-transform:uppercase;
 display:inline-block;
 margin-bottom:-1px;
 margin-right:-1px;
}

ul.tabbernav li a:link { color: #666; }
ul.tabbernav li a:visited { color: #444; }

ul.tabbernav li a:hover
{
 color: #333;
 background: #ddd;
}

ul.tabbernav li.tabberactive a
{
 background-color: #fff;
 border-bottom: 1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover
{
 color: #000;
 background: white;
 border-bottom: 1px solid white;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:10px 20px;
 border:1px solid #aaa;
 border-top:0; 

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
/*
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}
*/

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:400px;
 overflow:auto;
}