@charset "utf-8";

* {					margin: 0px; padding: 0px; position: relative; font-family: Verdana, Geneva, sans-serif; }
a {					text-decoration: none; }
p {					font-size: 12px; }
body {				background: url(img/bg.jpg) #9d9d9d repeat; top: 10px; }

h1 {				font-size: 16px; font-weight: normal; display: inline; top: 5px; }
span h1 {			color: #FFF; float: right; right: 10px; top: 12px; font-size: 12px; }
h2 {				font-size: 14px; font-weight: normal; display: inline; top: 5px; }
h3 {				font-size: 12px; font-weight: normal; display: inline; top: 5px; }

/* CONTACT PAGE CSS */
#contact {			left: 10px; }
#contact h1	{		font-size: 18px; }
#contact p {		font-size: 12px; width: 600px; }
#contact li {		font-size: 11px; left: 30px; }
#cFormArea {		background: url(img/sCartBG.jpg) no-repeat; background-color: #a6c876; width: 930px; left: 20px; clear: both; display: block; top: 5px; }
#cFormFooter {		background: url(img/sCartFooter.jpg) no-repeat; height: 6px; width: 930px; display: block; z-index: 1;}
#cFormArea form {	left: 20px; top: 20px; width: 880px; padding-bottom: 120px; }
#cFormArea em input {width: 300px; font-size: 11px; }
#cFormArea p {		display: block; padding-bottom: 15px;  }
#cFormArea p em {	float: right; }
#cFormSubmit {		background: url(img/sendMail.png) 0 0 no-repeat; clear: both; width: 112px; height: 31px; border: none; float: right; right: 10px; z-index: 200; top: 10px; }
#cFormSubmit:hover{ background: url(img/sendMail.png) 0 -33px; cursor: pointer; } 
#emailMessage {		height: 80px; font-size: 11px; }

.form input[type=text], .form input[type=email], .form input[type=number], .form textarea { padding: .3rem .6rem; }

#content {			left: -485px; margin-left: 50%; width: 970px; padding-bottom: 50px; }
#footer {			background: url(img/footer.jpg) repeat-x; width: 100%; margin-left: 0px; height: 38px; bottom: 0px; position: fixed; }
#footer p {			left: 25px; top: 8px; font-size: 12px; color: #040; }
#footer p em {		font-size: 9px; }
#footer a {			color: #040; font-weight: bold; }
#footerLogo {		float: left; top: -4px; left: 10px; border: 0px; z-index: 12000; max-height: 40px; }

.greenLine {		top: 15px; left: 2%; width: 96%; height: 1px; clear: both; border: none; background-color: #0b9444; }
.greenTick {		top: 8px; margin-right: 8px; margin-left: 10px; }

#header {		display: block; background: #f6f6f6; border-top-left-radius: 8px; border-top-right-radius: 8px; padding: 8px; padding-bottom: 0; }
#headerKarl {		float: left; top: 5px; }
#headerLogo {		left: 430px; margin-top: 2px; margin-bottom: 3px; }
#headerTL {			float: left; }
#headerTR {			float: right; }
#headerBL {			float: left; }
#headerBR {			float: right; }

#imgViewerBox {		position: absolute; width: 100%; height: 1080px; top: -18px; left: 0px; z-index: 15000; background-image: url(img/blackTrans.png); }
#imgViewerSub {		background: url(img/completeSubmit.png) 0 0 no-repeat; width: 112px; height: 31px; border: none; top: 24px; z-index: 10001; }
#imgViewerSub:hover{background: url(img/completeSubmit.png) 0 -33px; cursor: pointer; }

#layoutLeft {		float: left; width: 220px; background-color: #fff; height: 400px; }
#layoutRight {		float: left; width: 750px; background-color: #fff; }

#login {			background: url(img/login.png) no-repeat; width: 361px; height: 150px; float: right; right: 20px; font-size: 12px; top: -5px; margin-bottom: 14px; }
#login i {			float: right; font-size: 10px; right: 15px; color: #F00; font-style: normal; top: 8px; }
#loginFooter {		background: url(img/loginFooter.jpg) no-repeat; height: 6px; width: 361px; clear: both; top: 8px; }
#loginSubmit {		background: url(img/loginSubmit.png) 0 0 no-repeat; clear: both; width: 112px; height: 31px; border: none; float: right; right: 10px; z-index: 200; }
#loginSubmit:hover{ background: url(img/loginSubmit.png) 0 -33px; } 
#login input {		float: right; right: 10px; }
.loginWelcome {		left: 30px; top: -15px; }
.loginWelcome em {	left: 20px; font-style: normal; font-size: 10px; }
.loginWelcome a {	color: #0b9444; }
.loginLabel {		float: left; left: 10px; }
.loginInput {		font-size: 11px; margin-bottom: 6px; height: 20px; width: 180px; }

#main {				background: #FFF; }

/* PRODUCT LIST CSS */
.pl {				display: inline-block; margin-bottom: 8px; }
.pl div p {			font-size: 12px; }
.pl div p em {		font-size: 10px; }
.pl div p span {	font-size: 9px; font-weight: bold; display: block; }
.plCode {			float: left; width: 110px; }
.plImage {			float: left; width: 40px; }
.plDesc {			float: left; width: 290px; }
.plDescUR {			float: left; width: 450px; }
.plPPU	{			text-align: right; float: left; right: 20px; width: 140px; }
.plQty {			float: left; width: 80px; }
.plAdd {			margin-left: 10px; float: left; width: 80px; }
.plAddInput {		width: 40px; }
.plAddInputRed {	width: 40px; color: #ff5151; font-weight: bold; }
.plSpecial {		font-size: 9px; float: right; display: inline; }
.plSubmit {			background: url(img/cartAdd.jpg); height: 24px; width: 34px; border: none; top: -4px; }
.plSubmit:hover{ 	cursor: pointer; } 
.plSubmitRed {		color: #ff5151; }


#productList {		clear: both; }
#productList span a {	color: #000; }
#productList span a:hover {	text-decoration: underline; }

/* MENU CSS */
.trigger ul.menu {			display: none; ; }
.trigger:hover ul.menu {	display: block; left: 175px; }
.trigger:hover {			font-weight: bold; }
#menuHead { 				left: 10px; width: 151px; font-size: 12px; }
#menuHead li {				list-style-type: none; }
#menuHead em {				left: 5px; top: 6px; font-style: normal; }
.sub {						color: #000; background: url(img/menuSubButton.jpg); width: 320px; height: 27px; z-index: 100; top: -16px; font-weight: normal; }
.sub2 {						color: #000; background: url(img/menuSubButtonShort.jpg); width: 160px; height: 27px; z-index: 100; top: -16px; font-weight: normal; }
.sub a {					color: #000; }
.sub a:visited { 			color: #000; }
.sub:hover { 				font-weight: bold; }
.sub2 a {		 			color: #000; }
.sub2 a:visited { 			color: #000; }
.sub2:hover { 				font-weight: bold; }
.trigger {					background: url(img/menuButton.jpg) no-repeat; width: 175px; height: 27px; margin-bottom: 10px; color: #fff; }
/* END MENU CSS */

#navBar {			background: url(img/navBar.png) no-repeat; width: 980px; height: 45px; left: -5px; }
#navBar span {		margin-right: 40px; }
#navBar p {			float: right; right: 20px; top: -3px; }
#navBar p a {		color: #fff; top: 7px; }
#navBar p a:hover { text-decoration: underline; }

/* SHOPPING CART CSS */
#sCart {			background: url(img/sCartBG.jpg) no-repeat; background-color: #a6c876; width: 930px; left: 20px; clear: both; display: block; top: 5px; }
#sc {				display: inline-block; margin-bottom: 8px; left: 10px; }
#scFooter {			background: url(img/sCartFooter.jpg) no-repeat; height: 6px; width: 930px; }
#sc div p {			font-size: 12px; }
#sc div p em {		font-size: 10px; }
.scImage {			float: left; width: 40px; }
.scCode {			float: left; width: 120px; }
.scDesc {			float: left; width: 340px; }
.scPPU	{			text-align: right; right: 25px; float: left; width: 100px; }
.scQty {			float: left; width: 80px; }
.scRemove {			float: left; width: 50px; }
.scRemSubmit {		background: url(img/cartRemove.png); height: 24px; width: 34px; border: none; top: -4px; }
.scRemSubmit:hover {cursor: pointer; }
.scUpdate {			margin-left: 10px; float: left; width: 60px; }
.scUpdateInput {	width: 50px; }
.scUpdateInputRed {	width: 50px; color: #ff5151;}
.scTotal {			text-align: right; right: 25px; float: left; width: 100px; }
.scSubmit {			background: url(img/cartUpdate.png); height: 25px; width: 34px; border: none; top: -4px; }
.scSubmit:hover {	cursor: pointer; }

#fCalculation {		height: 110px; }
#fFreight {			font-size: 10px; top: 15px; left: 15px; float: left; }
#fHeadings {		font-size: 10px; left: 70px; float: left; top: 20px; height: 80px; width: 150px; background-color: #EEE; padding: 3px; }
#fSummary {			font-size: 10px; left: 70px; float: left; top: 20px; height: 80px; width: 150px; background-color: #FFF; padding: 3px; }
.fText {			left: 5px; }
.fTextRight {		text-align: right; right: 5px; }
#fPayment {			left: 90px; top: 20px; }
#finalSubmit {		background: url(img/finalSubmit.png) 0 0 no-repeat; width: 112px; height: 31px; border: none; display: inline; top: 0px; }
#finalSubmit:hover{ background: url(img/finalSubmit.png) 0 -33px; cursor: pointer; } 


/* ADMIN CSS */
#aCart {			background: url(img/sCartBG.jpg) no-repeat; background-color: #a6c876; width: 930px; left: 20px; clear: both; display: block; }
#admin {			display: inline-block; margin-bottom: 8px; left: 10px; }
#admin div p {		font-size: 12px; }
#admin div p em {	font-size: 10px; }
.adminProd {		float: left; width: 100px; }
.adminDesc {		margin-left: 10px; float: left; width: 220px; }
.adminMenu	{		margin-left: 10px; float: left; width: 80px; }
.adminSubMenu {		margin-left: 10px; float: left; width: 80px; }
.adminSpecial {		float: left; width: 40px; }
.adminTier0	{		margin-left: 10px; float: left; width: 40px; }
.adminTier1	{		margin-left: 10px; float: left; width: 40px; }
.adminTier2	{		margin-left: 10px; float: left; width: 40px; }
.adminTier3	{		margin-left: 10px; float: left; width: 40px; }
.adminSpec	{		margin-left: 10px; float: left; width: 50px; }
.adminRemove {		float: left; width: 50px; }
.adminRemSub {		background: url(img/cartRemove.png); height: 24px; width: 34px; border: none; top: -4px; }
.adminRemSub:hover {cursor: pointer; }
.adminSpec {		float: left; width: 40px; }
.adminSpecOn {		background: url(img/onSpecial.png); height: 24px; width: 24px; border: none; top: -4px; }
.adminSpecOn:hover {cursor: pointer; }
.adminSpecOff {		background: url(img/offSpecial.png); height: 24px; width: 24px; border: none; top: -4px; }
.adminSpecOff:hover {cursor: pointer; }
.adminUpdate {		margin-left: 15px; float: left; width: 40px; }
.adminUpdSub {		background: url(img/cartUpdate.png); height: 25px; width: 34px; border: none; top: -4px; }
.adminUpdSub:hover {cursor: pointer; }
.adminUpdateInput {	width: 30px; }

/* USER UPDATE CSS */
#userMgmt {			display: inline-block; margin-bottom: 8px; left: 10px; }
#userMgmt div p {	font-size: 12px; }
#userMgmt div p em {font-size: 10px; }
.adminUserCode {	float: left; width: 100px; }
.adminCompany {		margin-left: 10px; float: left; width: 70px; }
.adminEmail {		margin-left: 10px; float: left; width: 70px; }
.adminPassword	{	margin-left: 10px; float: left; width: 60px; }
.adminFirstName {	margin-left: 10px; float: left; width: 60px; }
.adminSurname {		margin-left: 10px; float: left; width: 60px; }
.adminTier	{		margin-left: 10px; float: left; width: 20px; }
.adminTerms	{		margin-left: 10px; float: left; width: 30px; }
.adminWarehouse	{	margin-left: 10px; float: left; width: 60px; }
.adminAddress	{	margin-left: 10px; float: left; width: 80px; }
.adminSuburb	{	margin-left: 10px; float: left; width: 60px; }
.adminState	{		margin-left: 10px; float: left; width: 35px; }
.adminPostCode	{	margin-left: 10px; float: left; width: 50px; }
.userRemove {		float: left; width: 50px; }
.userRemSub {		background: url(img/cartRemove.png); height: 24px; width: 34px; border: none; top: -4px; }
.userRemSub:hover {cursor: pointer; }
.userUpdate {		margin-left: 15px; float: left; width: 40px; }
.userUpdSub {		background: url(img/cartUpdate.png); height: 25px; width: 34px; border: none; top: -4px; }
.userUpdSub:hover {cursor: pointer; }

/* ADD USER CSS */
#addUserCart {		background: url(img/sCartBG.jpg) no-repeat; background-color: #a6c876; width: 930px; left: 20px; clear: both; display: block; }
#addUser {			display: inline-block; margin-bottom: 8px; left: 10px; }
#addUser div p {	font-size: 12px; }
#addUser div p em {	font-size: 10px; left: 10px; }
.addUserCompany {	float: left; width: 100px; }
.addUserEmail {		margin-left: 10px; float: left; width: 100px; }
.addUserPassword {	margin-left: 10px; float: left; width: 55px; }
.addUserFirst {		margin-left: 10px; float: left; width: 70px; }
.addUserSurname {	margin-left: 10px; float: left; width: 70px; } 
.addUserTier {		margin-left: 10px; float: left; width: 40px; }
.addUserDays {		margin-left: 10px; float: left; width: 40px; }
.addUserWarehouse {	margin-left: 10px; float: left; width: 55px; }
.addUserAddress {	margin-left: 10px; float: left; width: 55px; }
.addUserSuburb {	margin-left: 10px; float: left; width: 80px; }
.addUserState {		margin-left: 10px; float: left; width: 30px; }
.addUserPostCode {	margin-left: 10px; float: left; width: 30px; }
.addUser {			margin-left: 10px; float: left; width: 40px; }
.addUserSub {		background: url(img/cartTick.png); height: 25px; width: 34px; border: none; top: -4px; }
.addUserSub:hover{	cursor: pointer; }


/* ADD PRODUCT CSS */
#addProd {			display: inline-block; margin-bottom: 8px; left: 10px; }
#addProd div p {	font-size: 12px; }
#addProd div p em {	margin-left: 5px; font-size: 10px; }
.addProdCode {		margin-left: 10px; float: left; width: 90px; }
.addProdMenu {		margin-left: 10px; float: left; width: 90px; }
.addProdSubMenu {	margin-left: 10px; float: left; width: 90px; }
.addProdDesc {		margin-left: 10px; float: left; width: 160px; }
.addProdTier0 {		margin-left: 10px; float: left; width: 40px; }
.addProdTier1 {		margin-left: 10px; float: left; width: 40px; }
.addProdTier2 {		margin-left: 10px; float: left; width: 40px; }
.addProdTier3 {		margin-left: 10px; float: left; width: 40px; }
.addProdTierSpec {	margin-left: 10px; float: left; width: 40px; }
.addProdSpecFlag {	margin-left: 10px; float: left; width: 100px; }
.addProd {			margin-left: 10px; float: right; width: 60px; }
.addProdSub {		background: url(img/cartTick.png); height: 25px; width: 34px; border: none; top: -4px; }
.addProdSub:hover{	cursor: pointer; }

/* MARKETING CSS */
.emailHeading {		width: 160px; left: 20px; font-size: 11px; }
.emailClients {		width: 800px; left: 20px; }
.emailInstructions {left: 10px; font-size: 11px; width: 920px; }

/* FINALISE ORDER CSS */
#completeBox {		width: 100%; height: 100%; position: absolute; top: -13px; padding-bottom: 25px; left: 0px; z-index: 9000; background-image: url(img/blackTrans.png); }
#completeCart {		background: url(img/completeBG.jpg) no-repeat; background-color: #a6c876; width: 400px; height: 250px; clear: both; top: 220px; left: 50%; margin-left: -200px; position: fixed; }
#completeCart2 {		background: url(img/completeBG.jpg) no-repeat; background-color: #a6c876; width: 400px; height: 360px; clear: both; top: 220px; left: 50%; margin-left: -200px; position: fixed; }

#completeCart p {	margin-left: 15px; top:20px; width: 370px; color: #FFF;  }
#completeCart2 p {	margin-left: 15px; top:20px; width: 370px; color: #FFF;  }
#completeFooter {	background: url(img/completeFooter.jpg) no-repeat; height: 6px; width: 400px; top: 245px; position: absolute; display: block; }
#completeFooter2 {	background: url(img/completeFooter.jpg) no-repeat; height: 6px; width: 400px; top: 360px; position: absolute; display: block; }
#completeSubmit {	background: url(img/completeSubmit.png) 0 0 no-repeat; width: 112px; height: 31px; border: none; top: 24px; z-index: 9001; float: right; right: 15px; }
#completeSubmit:hover{ background: url(img/completeSubmit.png) 0 -33px; cursor: pointer; }