@import url("reset.css");

body  {
	font-family:Arial, Helvetica, sans-serif;
	font-size:75%;
	line-height:1.4em;
	background-color: #f4f4f4;
	color:#4b4b4b;	
	margin:0 auto;			
	}
	
h1 {
	font-family: georgia, garamond, san-serif;
	font-size: 1.6em;
	}
	
h2 {
	font-family: georgia, garamond, san-serif;
	font-size: 1.2em;
	font-weight: bold;
	padding-bottom: 5px;
	}	
	
h3 {
	font-family: georgia, garamond, san-serif;
	padding-bottom: 5px;
	}	
	
h4 {
	font-family:Arial, Helvetica, sans-serif;	
	font-weight: bold;
	}
	
a:link, a:active  { 
	color:#4b4b4b;	
	text-decoration:underline;
	}

a:visited {color:#4b4b4b;}

a:hover {color:#999999;}	
	
.clear {clear: both;}
.left {text-align: left;}
a .alt, .alt {display: none; }	
.floatleft {float:left;}

img {display:block}
	
/* Main Divs */
#mainwrapper {
	width: 770px;
	margin:0 auto;
	padding-top: 20px;	
	}

#wrapper {
	width:100%;
	position: relative;
	background-image:url(../images/background.gif);
	background-position: top right;		
	}

#content {
	width:763px;
	padding:15px 7px 20px 0px;		
	}
	
#tshadow {
	position: absolute;
	top: 0px;
	width: 100%;
	background-image:url(../images/topbar.gif);
	background-position: top right;
	}
	
#bshadow {
	clear: both;
	position: absolute;
	bottom: -5px;
	width: 100%;
	background-image:url(../images/bottombar.gif);
	background-position: top right;
	}
	
div.headerArea {float:left; border-bottom:#d6d6d6 solid 1px; width: 763px;}	
div.headerLeft {	
	padding: 10px 0px 10px 10px;
	clear: both;
	float:left;
	width: 533px;
	}
#header {padding: 10px 0}
div.headerArea h2 {width:300px;float:left;clear:left;font-weight:normal}	
	
	
div.spaTrak {float:left; padding:8px 0 5px 0; width: 200px}
div.spaTrak img {float:left;}
div.spaTrak span {float:left; display:block; padding: 5px 0 0 5px;}
	
#logos {
	float:left;
	width:400px;
	padding-left:10px;
	}				
#logos a {float:left;width:auto;display:inline;margin-right:10px;}	

#logos p.user-guide {float:left;width:auto;clear:both;}	
#logos p.user-guide a {background:url(../images/pdf-download.gif) no-repeat left center;padding:10px 0 10px 20px}	

#footer {
	font-size: 0.9em;
	padding: 5px 0px 10px 5px;
	}
	
.footer_divide {border-top:1px solid #D6D6D6;}

ul.results-list {float:left;width:100%;clear:both}
ul.results-list li {display:block}

ul.results-list li.no-results {padding:10px;font-weight:bold}


/* Login area */	
#loginBox {
	float: right;
	width: 180px;
	background:url(../images/login_back.gif) no-repeat;
	padding: 10px 10px 5px 10px;
	margin-right: 25px;
	display: inline;
	}

#loginBox input, #loginBox .textlabel {
	display:block;
	float:left;
	}	

#loginBox input {
	width: 90px;
	margin:2px 1px 2px 1px;
	border: 1px solid #ccc;
	}	
	
#loginBox .textlabel {
	width: 70px;
	height:17px;
	padding: 2px 2px 2px 0px;
	margin: 1px;
	}
	
.login_button {
	margin-left: 2px;
	float:left;
	width:47px;
	height:16px;	
	background:url(../images/login.gif);
	}
.login_button a {
	display:block;
	width:47px;
	height:16px;
	background:url(../images/login.gif) 0% 0% no-repeat;
	}
.login_button a:hover {background-position:0% 100%;}	

.loginError {color:#cc3333; padding-top:10px;clear:both; float:left}		

.logout 
{padding-top:8px;}

/* Colour area */

.searchTitle {font-weight: bold; padding: 10px}

.mainBands {clear:both; padding-top:20px}

#colourBands {float:left; width: 400px; }
	
select {
	font-size: 0.9em;
	margin-left: 5px;
	}
	
#colourBand1, #colourBand2, #colourBand3 {
	height: 20px;
	margin-bottom: 5px;
	padding: 5px 0px 5px 10px;
	}
	
.black {color: #fff; background-color: #000000;}
.bluemid {color:#fff; background-color:#4380af;}
.bluelight {color:#fff; background-color:#8eb2ce;}
.brown {color:#fff; background-color:#6b4a3d;}
.yellow {color:#000000; background-color:#f7e129;}
.greenlight {color:#fff; background-color:#91d05e;}
.greenspruce {color:#fff; background-color:#558a2a;}
.orange {color:#fff; background-color:#fa9300;}
.red {color:#fff; background-color:#cd3b0e;}
div.colourExample .white {color:#000000; background-color:#fff; height: 13px; width: 48px; border:solid 1px #dbdbdb;}
li.facingUp .white {color:#000000; background-color:#fff; height:13px; width: 88px; border:solid 1px #dbdbdb;}
.cream {color:#000000; background-color:#feeebf;}
.gold {color:#fff; background-color:#d6a100;}
.grey {color:#fff; background-color:#999999;}
.pink {color:#fff; background-color:#e44173;}
.purple {color:#fff; background-color:#bd43ad;}



.explainText {float:left; clear:both; padding: 10px 0 10px 10px;width:100%}	
	
	
/* Content area */		
.results {
	border-top:#d6d6d6 solid 1px;
	padding: 10px 0px 10px 10px; 
	float:left;
	clear: both;
	width: 753px;
	}
	
.brewerDetails {
	float:left;
	}
	
.details_button {
	margin-top: 5px;
	float:left;
	width:81px;
	height:16px;	
	background:url(../images/details.gif);
	}
.details_button a {
	display:block;
	width:81px;
	height:16px;
	background:url(../images/details.gif) 0% 0% no-repeat;
	}
.details_button a:hover {background-position:0% 100%;}			
	
.brewerKegs, .noBanding {
	float:right;
	padding: 0px 0px 10px 0px;	
	width: 215px;
	}
	
.brewerKegs p {float:left;clear:both;width:90%;padding:5px 0}	
	
.facingUp {
	float:left;
	width: 100px;
	padding-right: 10px;
	}
	
.colourExample {clear: both; float:left; padding-right:5px;}
	
.colourSmall, .colourThumb {margin-bottom: 3px; height: 15px;}	
.colourSmall {width: 90px; padding: 0 5px; }
.colourThumb {width: 50px;}
	

.kegVarieties {
	float: right; 
	width: 350px;
	}
	
.search_button {margin: 0px 0px 10px 5px;float:left;width:56px;height:16px;	background:url(../images/search.gif);}
.search_button a {display:block;width:56px;height:16px;background:url(../images/search.gif) 0% 0% no-repeat;}
.search_button a:hover {background-position:0% 100%;}	

.clear_button, .clear_button2 {display: inline;float:left;width:46px;height:16px;background:url(../images/clear.gif);}
.clear_button {margin-left: 60px;}
.clear_button2 {margin: 10px 0px 0px 103px;}
.clear_button a, .clear_button2 a {display:block;width:46px;height:16px;background:url(../images/clear.gif) 0% 0% no-repeat;}
.clear_button a:hover, .clear_button2 a:hover {background-position:0% 100%;}	

.submit_button {margin: 10px 0px 10px 102px;float:left;width:55px;height:16px;background:url(../images/submit.gif);}
.submit_button a {display:block;width:55px;height:16px;background:url(../images/submit.gif) 0% 0% no-repeat;}
.submit_button a:hover {background-position:0% 100%;}

.close_button {margin: 10px 0px 10px 300px;width:48px;height:16px;background:url(../images/close.gif);}
.close_button a {display:block;width:48px;height:16px;background:url(../images/close.gif) 0% 0% no-repeat;}
.close_button a:hover {background-position:0% 100%;}		
	
.add_button {margin-top: 5px; float:left; width:41px; height:16px;	background:url(../images/add.gif);}
.add_button a {display:block; width:41px; height:16px; background:url(../images/add.gif) 0% 0% no-repeat;}
.add_button a:hover {background-position:0% 100%;}	

.backsearch_button {margin: 5px 0px 5px 10px; float:left; width:94px; height:16px; background:url(../images/backsearch.gif); display:inline}
.backsearch_button a {display:block; width:94px; height:16px; background:url(../images/backsearch.gif) 0% 0% no-repeat;}
.backsearch_button a:hover {background-position:0% 100%;}

.edit_button {margin: 5px 0px 5px 0px; width:72px; height:16px; background:url(../images/edit.gif);}
.edit_button a {display:block; width:72px; height:16px; background:url(../images/edit.gif) 0% 0% no-repeat;}
.edit_button a:hover {background-position:0% 100%;}

.update_button {margin: 5px 0px 5px 85px; width:89px; height:16px; background:url(../images/update_details.gif);}
.update_button a {display:block; width:89px; height:16px; background:url(../images/update_details.gif) 0% 0% no-repeat;}
.update_button a:hover {background-position:0% 100%;}

a.available_bands_button  {margin:20px 0 0 10px;text-indent:-1000em;display:block; width:140px; height:16px; background:url(../images/available_bands.gif) 0% 0% no-repeat;}
a.available_bands_button:hover {background-position:0% 100%;}

.brewerInfo {
	float:left;
	width: 410px;
	}
	
.brewerInfo.editBrewerDetails,
.editBrewerDetails li.editKeg {width:600px}
.editBrewerDetails li.editKeg h2 {margin-bottom:10px}

.addressHead {
	font-weight: bold;
	display: block;
	}

.vcard, .editKeg {
	float:left;
	width: 410px;
	padding: 20px 0 10px 0;
	margin-top: 10px;
	border-top: dotted 1px #ccc;	
	}	

.vcard h2 {margin-bottom:10px; color:#666666}
.vcard h3 {margin-top:10px;clear:both}	
	
li.editKeg ul li {float:left; width: 120px;}
li.editKeg ul li span.add {width: 120px;}
li.editKeg ul li h4 {padding-bottom:5px;}
	
span.adr {float:left; display: block;}
span.contacts {float:left; display: block; padding-left: 30px}

li.error {color:#cc3333; padding: 0 0 10px 10px;}
	
.kegDetails {
	clear: both;
	width: 400px;
	border-top: dotted 1px #ccc;
	padding-top: 20px;
	margin-top: 10px;
	}
.kegDetails div.kegInfo {float:left; display:block; padding: 0 20px 0 10px;}	
ul.kegPanel {float:left; clear:both; width: 400px; padding:10px 0 20px 0;}

ul.kegThumb {float:left; width:200px;}
ul.kegThumb img {padding-bottom: 5px;}	
ul.kegThumb li {
	float:left;
	width: 50px;
	padding: 0 5px 5px 0;
	}
ul.kegThumb li div {padding-bottom:10px;}

.kegTableWrapper ul.kegThumb {padding-left:20px}

.kegTableWrapper h2 {margin-bottom:10px;color:#666666}
	
ul.kegThumbList {float:left; padding: 0 0 10px 0;}	
ul.kegThumbList li img{
	padding: 5px 5px 0 0;
	}
	
h4.edit {padding-bottom:10px; display:inline;}
span.edit {padding-left: 10px;}
p.edit {clear: both;}
span.add {clear: both; display: block; float:left; padding-top: 5px;}
h4.formTitle {padding: 5px 0;}

/* FORM ELEMENTS */
.advanced {float:left; width: 300px;}
.formPanel {float:left; clear:both; padding: 10px;}
.adSearch {font-size: 0.9em; float:left; padding-left: 10px;}

.form1 {padding-top: 5px;}
.form1 .textlabel {width: 120px;display:block;float:left;}	
.form1 input {width: 150px;display:block;float:left;}	
.form1 input {margin:2px 1px 2px 1px;border: 1px solid #ccc;}
.form1 .file {width: 234px;}
.form1 .check {border: 0;}	
.form1 .textlabel {height:17px;padding: 2px 2px 2px 0;}
.form1 input:focus, .form1 textarea:focus {background:#faf8f1;}	
.form1 select {padding:0; margin:0;}

/* TABLE ELEMENTS */
.kegTableWrapper {clear:both; float:left; margin-left: 10px; padding: 20px 0; border-top: dotted 1px #ccc; display:inline}

table.editTable, table.kegTable {clear:both; margin-top: 10px; padding-top: 10px;}
table.editTable {width: 700px;}
table.kegTable {width: 600px;}
table.kegTable td {padding-right: 15px;}
table th {font-weight: bold; vertical-align: top;}
table.editTable th.dottedRow {border-top: dotted 1px #ccc;}
table.editTable input.input {width:80px}

div.tableHr {height:1px; margin: 10px 0; width:700px; background-color: #e5e5e5; overflow:hidden}

table.editTable th.topRow {padding-top: 10px;}
table.editTable th.headings {width:65px;}
table.editTable th.height, table.editTable th.weight {width: 55px;}
table.editTable th.type {width: 50px;}
table.editTable th.size {width: 70px;}
table.editTable th.pallet {width: 90px; padding-right:15px}
table.editTable th.locator {width: 90px;}
table.editTable th.previous {width: 100px;}
table.editTable th.edit {width: 40px;}
table.editTable th.remove {width: 50px; padding-left:10px;}
table.editTable select {margin:0 0 5px 0;}
table.editTable textarea {
	background-color:#ffffff;
	font-family:verdana,arial,helvetica,sans-serif;
	font-size:0.9em; 
	width: 350px;
	height: 100px;
	padding:2px
	}
table.editTable .textarea {border: solid 1px #a5acb2 }

table.editCompanyTable {margin-top: 10px; width: 350px}
table.editCompanyTable th {padding-bottom: 10px}
table.editCompanyTable td {padding: 5px 10px 5px 0; border-bottom: solid 1px #ccc}

span.kegRemove {display:block; text-align:center; width:50px}


/* AVAILABLE COLOURS  */

h2.available_header {clear:both;padding:20px 0 0 10px}
p.available_info {clear:both;padding:10px 0 0 10px}
div.available_banding_block {float:left;padding:20px 0 0 60px;width:100%}
div.available_banding_block .brewerKegs, div.available_banding_block .noBanding {float:left;padding-top:20px}