/*************************************************************************
	Machine Bidder.com
	HTML/CSS Developed by Matthew Hill (c) 2008 -- http://www.friskdesign.com/
	for Sensible Development -- http://www.sensibledevelopment.com/
	MODULE: 	global.css
	PURPOSE:	all rules for site
*************************************************************************/

/* Auto float clearing for compliant browsers
*************************************************************************/
#skip:after,
#banner:after,
#nav:after,
#nav ul:after,
#wrapper:after,
#finder:after,
.auctionlist li:after,
.auctionlist .itemwrap:after,
#auctionlist-recent:after,
#footer:after {
	content: ".";
	height:0;
	display:block;
	clear:both;
	visibility:hidden;
}

/* General Rules and classes
*************************************************************************/
body {
	color:#666;
	background:#F9F9F9;
	font: normal 0.75em/1.6em Arial,"Helvetica Neue","Helvetica",sans-serif;
	margin:0;
	padding:0;
	min-width:  800px;
}
#skipto {
	position:absolute;
	left:-1000em;
}
.floatright {
	float:right;
	text-align:right;
}
.floatleft {
	float:left;
	text-align:left;
}
.alignright {
	text-align:right;
}
.alignleft {
	text-align:left;
}
img {
	border:none;
}

/* Layout (sizes / floats / positions of main elements)
*************************************************************************/
#wrapper {
	padding:0px;
}
#innerwrap {
	padding:20px 0 0 0;
}
/* Specific layout on homepage */
#home #main {
	float:left;
	width:100%;
}
#home #content {
	margin:0 10px;
	min-height:600px;
}
#home #categories {
	float:left;
	margin-left:-100%;
	width:170px;
	min-height:600px;	
}
#home #adverts {
	float:right;
	margin-left:-100%;
	width:170px;
	min-height:600px;	
}
/* Combined 2/3 column layout for Item page */
#main {
	float:left;
	width:100%;
}
#content {
	margin:0 0 0 7px;
	min-height:600px;
}
#breadcrumbs {
	margin:0 0 0 190px;	
}
#categories {
	float:left;
	margin-left:-100%;
	width:170px;
	min-height:600px;	
}

/* Content formatting
*************************************************************************/
h1,h2,h3,h4,h5,h6,blockquote {
	font: bold 1em/1 Arial,"Helvetica Neue",Helvetica,sans-serif;
	margin:0 0 10px 0;
	color:#5EA0C9;
}
p {
	margin:15px 0;
}
ul,
ol,
dl {
	margin:0 0 20px 30px;
	padding:0;
}
li {
	margin:0 0 0.3em;
}
h1 {
	font-size:2em;
	margin:0;
	padding:10px 0;
	border-bottom:1px solid #CCC;
	color:#003374;
}
h2 {
	font-size:1.2em;
	margin:0;
	padding:10px 0;
	border-bottom:1px solid #CCC;
	color:#333;	
}
h3 {
	font-size:1.5em;
	margin:0;
	padding:10px 0;
	border-bottom:1px solid #CCC;
}
a {
	color:#5EA0C9;
	text-decoration:underline;
}
a:visited {
	color:#5EA0C9;
}
a:hover {
	color:#669933;
}
h2 a,
h2 a:visited {
	text-align:right;
	display:block;
	font-size:0.7em;
	margin-top:-1em;
	color:#333;
}
h2 a:hover {
	color:#669933;
}

/* Centering unknown width
*************************************************************************/

.centerall {
	clear:both;
	display: table;
	margin:0 auto;
}
.shrink {
	display: table;
}

/* Forms (General)
*************************************************************************/
form {
	margin:0;
	padding:0;
}
fieldset {
	margin:0;
	padding:0;
	border:none;
}
legend {
	padding:0;
	margin:0;
	line-height:1;
}
input,
select {
	border-top:1px solid #ABADB3;
	border-bottom:1px solid #E3E9EF;
	border-left:1px solid #DBDFE6;
	border-right:1px solid #DBDFE6;
	color:#333;
	padding:3px 2px;
	font: normal 1em/1 Arial,"Helvetica Neue",Helvetica,sans-serif;	
}
select {
	padding:0;
	height:22px;
}
button {
	height:22px;
	padding:0 8px;
	font: normal 1em/1 Arial,"Helvetica Neue",Helvetica,sans-serif;		
}

/* Skip links
*************************************************************************/
#skip {
	font-size:0.80em;
}
#skip a,#skip a:visited {
	color:#E8E6D4;
	text-decoration:none;
	position:absolute;
	left:-1000em;
	top:0;
}
#skip a:visited:hover,#skip a:hover,#skip a:focus {
	color:#526568;
	text-decoration:underline;
	left:0;
}

/* Banner
*************************************************************************/
#banner {
	min-height:120px;
	position:relative;
	background:#001F46 url(../images/bg-banner-tile.png) left bottom repeat-x;
}
#banner img {
	position:absolute;
	bottom:0;
}

#login {
	padding:5px 0px 0px 10px;
	text-align:right;
}

#loginlink {
	padding:10px 10px 10px 10px;
	text-decoration:none;
}
#loginlink:hover {
	color:#ABC9DC;
}
#loginform {
	min-height:110px;
	position:absolute;
	right:20px;
	top:0;
	padding:10px 0 0 0;
	margin:0;
	color:#FFF;
	background:#001F46 url(../images/bg-banner-tile.png) left bottom repeat-x;	
}
#loginform legend {
	padding:0 0 0 70px;
	margin:0;
}
#loginform input {
	background:#E6EAEE;
	border-top:1px solid #9AA0A9;
	border-bottom:1px solid #CDD6E0;
	border-left:1px solid #CCD0DB;
	border-right:1px solid #CCD0DB;
	width:150px;
	margin:10px 0 0 0;
	display:block;
	float:left;	
}
#loginform button {
	border:1px solid #669933;
	background:#669933 url(../images/bg-login.png) top left repeat-x;
	color:#FFF;
	font: bold 1em/1 Arial,"Helvetica Neue",Helvetica,sans-serif;
	height:22px;
	padding:0 8px;
	margin:10px 0 0 8px;
	float:left;
}
#loginform label {
	width:70px;
	display:block;
	margin:10px 0 0 0;
	float:left;
	clear:left;
}
#loginform a,
#loginform a:visited {
	clear:both;
	font-size:0.90em;
	margin:0 0 0 70px;
	line-height:2em;
	color:#ABC9DC;
}
#loginform a:hover {
	color:#FFF;
}

/* Top Navigation
*************************************************************************/
#nav {
	clear:both;
	background:#66ADD9 url(../images/bg-navigation.png) top left repeat-x;	
}
#nav ul {
	margin:0;
	padding:0;
	border-right:1px solid #8EBBD8;
}
#nav ul li {
	list-style:none;
	margin:0;
	padding:0;
	float:left;
}
#nav ul a,
#nav ul a:visited {
	font-size:1.25em;
	font-weight:bold;
	line-height:34px;
	text-decoration:none;
	padding:0 15px;
	display:block;
	color:#FFF;	
	border-left:1px solid #8EBBD8;	
}
#nav ul a:hover,
#nav ul a:focus {
	background:#66ADD9;
}
#nav ul li.selected a,
#nav ul li.selected a:visited {
	color:#5EA0C9;
	padding:0 14px;
	background:#FFF url(../images/bg-navtab.png) left top repeat-x;
}

/* Finder (Search / Browse)
*************************************************************************/
#finder {
	background:#EFEFEF url(../images/bg-search.png) repeat-x;
	color:#003374;
	padding:15px 0;
	margin:10px 5px 0;
}
#finder form {
	float:left;
}
#finder legend {
	display:none;
}
#finder label {
	font-weight:bold;
	font-size:1.25em;
	float:left;
	width:auto;
}
#finder select,
#finder input {
	width:200px;
	margin:0 10px;
	float:left;
	background:#FFF;
	color:#003374;
}
#finder select {
	height:20px;
}
#finder button {
	float:left;
	line-height:22px;
}
#searchform {
	margin:0 55px 0 0;
}

/* Breadcrumbs
*************************************************************************/
#breadcrumbs {
	margin:0 0 20px 190px;
}
#breadcrumbs ul {
	list-style:none;
	padding:0;
	margin:0;
}
#breadcrumbs li {
	display:inline;
	font-weight:bold;
	color:#999;
	margin:0 2px 0 0;
	padding:0;
}
#breadcrumbs li a,
#breadcrumbs li a:visited {
	text-decoration:none;
	color:#5EA0C9;
	padding:0 12px 0 0;
	background:#FFF url(../images/arrow.png) right center no-repeat;	
}
#breadcrumbs li a:hover {
	text-decoration:underline;
}


/* Categories
*************************************************************************/
#categories {
	background:url(../images/bg-categories.png) repeat-x;
}
#categories h3 {
	margin:10px;
	color:#5EA0C9;
	font-size:1.2em;
}
#categories ul {
	list-style:none;
	margin:0;
	padding:0;
}
#categories ul li {
	margin:0;
	vertical-align:top;
}
#categories ul li a,
#categories ul li a:visited {
	color:#333;
	text-decoration:none;
	font-weight:bold;
	line-height:normal;
	padding:5px 10px;
	display:block;
	vertical-align:top;
	height:1%;	
}
#categories ul li a:hover {
	background:#FFF;
	color:#5EA0C9;
	padding:4px 10px;
	border-bottom:1px solid #CCC;
	border-top:1px solid #CCC;	
}
#categories ul li.selected a,
#categories ul li.selected a:visited,
#categories ul li.selected a:hover {
	background:#FFF url(../images/arrow.png) 10px 8px no-repeat;
	padding:4px 10px 4px 20px;
	border-bottom:1px solid #CCC;
	border-top:1px solid #CCC;	
}


/* Adverts
*************************************************************************/
#adverts {

}
#adverts .advert {
	margin:0 0 20px 0;
}
#adverts .advert img {
	display:block;
}

/* Homepage overrides
*************************************************************************/
#home h1 {
	color:#003374;
	margin:0;
	padding:0 0 20px 0;
	border-bottom:1px solid #CCC;
	font-size:2em;
}
#home h2 {
	margin:20px 0 0 0;
	padding:0 0 10px 0;
	font-size:1.5em;
	border:none;
	color:#5EA0C9;
}
#home h3 {
	padding:0;
	border:none;
}


/* Auction listings (homepage)
*************************************************************************/
.auctionlist {
	list-style:none;
	margin:0;
	padding:0;
	border-bottom:1px solid #CCC;		
}
.auctionlist li {
	margin:0;
	padding:0 0 10px 0;
	border-top:1px solid #CCC;	
}
.auctionlist h3 {
	line-height:2.3em;
	margin:0;
	font-size:1.2em;
	color:#333;
}
.auctionlist .itemwrap {
	clear:both;
	position:relative;
	min-height:130px;	
	padding:10px 0 10px 0;
	border-top:1px solid #CCC;	
}
.auctionlist .itemwrap .itemend {
    clear: both;	
}
.auctionlist .description {
	margin:0 180px 0 150px;
	position:relative;
}
.auctionlist .description2 {
	margin:0 0 0 0px;
	position:relative;
}

#auctionInformation #auctionImages img, 
.auctionlist img {
	float: left;
	padding:3px;
	background:#FFF;
	border:1px solid #CCC;
	margin:10px;
}
#auctionInformation #auctionImages img {
    margin-right: 5px;	
}
.auctionlist form .biddingStatus {
	width: 156px;
    height: 27px;
    position: absolute;
    right: 0;
    top: -30px;
}
.auctionlist form .biddingStatus span {
    display: none;
}
.auctionlist form .winning {
    background: url(../images/button-winning.png) top right no-repeat;
}
.auctionlist form .losing {
    background: url(../images/button-losing.png) top right no-repeat;
}
.auctionlist form .belowReserve {
    background: url(../images/button-below-reserve.png) top right no-repeat;
}
.auctionlist form .won {
    background: url(../images/button-won.png) top right no-repeat;
}
.auctionlist form .lost {
    background: url(../images/button-lost.png) top right no-repeat;
}

.auctionlist form {
	position:absolute;
	right:0;
	top:0;
	width:140px;
	padding:10px;
	background:url(../images/bg-bidbox.png) repeat-x;
}
.auctionlist form table {
    width: 100%;	
}
.auctionlist form table th,
.auctionlist form table td {
	margin:0;
	padding:0;
	font-size:0.90em;
	line-height:1.2;
	padding-bottom: 5px;
	width: 50%;
}
.auctionlist form table th {
    font-weight: normal;
    text-align: left;	
}
.auctionlist form table td {
    font-weight: bold;    
}
.auctionlist input {
	width:60px;
}
.auctionlist button {
	border:none;
	color:#FFF;
	padding:0;
	margin-left: 3px;
	width:50px;
	font-weight:bold;	
	line-height:22px;	
	background:#3B581E url(../images/button-green.png) left top repeat-x;
}
.auctionlist .buynow {
	clear:both;
	float:right;
	color:#FFF;
	background:#8EBBD8 url(../images/button-blue-left.png) left top no-repeat;
	line-height:22px;
	margin:10px 0 0 0;
}
.auctionlist .buynow a,
.auctionlist .buynow a:visited {
	color:#FFF;
	display:block;
	line-height:22px;
	text-decoration:none;
	font-weight:bold;
	padding:0 8px;	
	background:url(../images/button-blue-right.png) right top no-repeat;
}

.auctionlist .endDate td * {
   display: none;
}
.auctionlist .endDate td .remaining {
   display: inline;
}
.auctionlist tr.overtime .value {
    font-weight: bold;
    color: #649732;	
}


/* Auction listings (RECENTLY LISTED DIFFERENCES)
*************************************************************************/
#auctionlist-recent {
	border:none;
	padding:0 0 20px 0;
}
#auctionlist-recent li {
	width:48%;
	float:left;
	padding:0;
	margin-top:-1px;
}
#auctionlist-recent li {
	margin-right:2%;
	border-top: none;
}
#auctionlist-recent li form {
	width:auto;
	left:140px;	
}
#auctionlist-recent .itemwrap {
	min-height:140px;
	border-bottom:1px solid #CCC;	
}

#auctionlist-recent .description {
	display:none;
}

/* Item Details & Images
*************************************************************************/
#itemdetails {
	float:left;
	width:100%;
}
#itemdetails .wrap {
	margin:0 334px 0 0;
}
#itemimages {
	float:right;
	margin:3.1em 0 0 10px;
	width:324px;
	margin-left:-100%;
}
#itemimages img {
	margin:10px 0 0 10px;
	max-width:90px;
	border:1px solid #CCC;
	padding:3px;
	background:#FFF;
	float:left
}
#itemimages img#itemenlargement {
	max-width:314px;
	margin-top:0;
}


/* Item Details Bidding form
*************************************************************************/

/* Ordinarily, we'd make both sets of forms (this one and the ones on the home page)
share the same CSS, but to allow for specific future tailoring, I've duplicated the
styles here for the item description page */

#itemdetails form {
	padding:20px;
	color:#333;
	background:url(../images/bg-bidbox.png) repeat-x;
	background-color:#FFFFFF;
}
#itemdetails form big {
	font-size:1.5em;
}
#itemdetails form input {
	width:145px;
}
#itemdetails form button {
	border:none;
	color:#FFF;
	padding:0;
	margin:0 0 0 10px;
	width:50px;
	font-weight:bold;
	line-height:22px;	
	background:#3B581E url(../images/button-green.png) left top repeat-x;
}
#itemdetails form label.buynow {
	margin:10px 0 0 0;
	width:100px;
}
#itemdetails form p.buynow {
	float:left;
	color:#FFF;
	background:#8EBBD8 url(../images/button-blue-left.png) left top no-repeat;
	line-height:22px;
	margin:10px 0 0 0;
}
#itemdetails form p.buynow a,
#itemdetails form p.buynow a:visited {
	color:#FFF;
	display:block;
	line-height:22px;
	text-decoration:none;
	font-weight:bold;
	padding:0 8px;	
	background:url(../images/button-blue-right.png) right top no-repeat;
}
#itemdetails form table th {
	text-align: left;
	font-weight: normal;
	padding-right: 10px;
}
#itemdetails form table td {
	font-weight: bold;
}
#itemdetails form table tr.endDate td {
    font-weight: normal;
}
#itemdetails form table tr.endDate td .value {
	font-weight: bold;
}
#itemdetails form table th,
#itemdetails form table td {
    vertical-align: bottom;
    padding-bottom: 5px;
}
#itemdetails form {
    position: relative;	
}
#itemdetails form .biddingStatus {
    width: 156px;
    height: 27px;
    position: absolute;
    right: 0;
    top: -30px;
}
#itemdetails form .biddingStatus span {
    display: none;  
}
#itemdetails form .winning {
    background: url(../images/button-winning.png) top right no-repeat;
}
#itemdetails form .losing {
    background: url(../images/button-losing.png) top right no-repeat;
}
#itemdetails form .belowReserve {
    background: url(../images/button-below-reserve.png) top right no-repeat;
}
#itemdetails form .won {
    background: url(../images/button-won.png) top right no-repeat;
}
#itemdetails form .lost {
    background: url(../images/button-lost.png) top right no-repeat;
}
#itemdetails form tr.overtime .value {
    font-weight: bold;
    color: #649732;
    font-size: 1.25em;
} 
#itemdetails h3 {
    padding-right: 156px;	
}
#itemdetails form .errors {
	color: red;
	font-weight: bold;
}



/* Footer
*************************************************************************/
#footer {
	clear:both;
	height:40px;
	border-top:1px solid #CCC;
	margin-left:20px;
	margin-right:20px;
}




/* EXTRA (GK)
*************************************************************************/

#footer-right {
	float:right;
	text-align:right;
}

#footer-left {
	float:left;
	text-align:left;
}

#itemdetails form input[type="hidden"] {
	display:none;
}

#banner form input[type="hidden"] {
	display:none;
}

input.error {
    color: red;
    background: yellow;
}
#error-messages,
.error {
    color: red;
    font-weight: bold;	
} 

/*
 * Generic form is used for registration, 
 */

#generic-form {
	padding:10px;
}

#generic-form tr {
	padding:5px;
}

#generic-form th {
	padding:5px;
	text-align: left;
	font-weight:normal;
}

#generic-form td {
	padding:5px;
}

.pagination {
    text-align: right;	
    clear: both;
}
.pagination ul,
.pagination ul li {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline;
}

.pagination ul li {
	padding-left: 5px;
}
.pagination ul li a.current {
    font-weight: bold;
    color: black;
    text-decoration: none;	
}

#message {
    font-weight: bold;
    background:#FFFF99;
    padding: 10px;
    margin: 10px;
    text-align: center;
}


a:link.G1 { color: white; }
a:visited.G1 { color: white; }
a:active.G1 { color: white; }
a:hover.G1 { color: white; }

a:link.G1_h { color: white; }
a:visited.G1_h { color: white; }
a:active.G1_h { color: white; }
a:hover.G1_h { color: white; }

a:link.G2 { color: white; }
a:visited.G2 { color: white; }
a:active.G2 { color: white; }
a:hover.G2 { color: white; }

a:link.G2_h { color: white; }
a:visited.G2_h { color: white; }
a:active.G2_h { color: white; }
a:hover.G2_h { color: white; }

a:link.G3 { color: white; }
a:visited.G3 { color: white; }
a:active.G3 { color: white; }
a:hover.G3 { color: white; }

a:link.G3_h { color: white; }
a:visited.G3_h { color: white; }
a:active.G3_h { color: white; }
a:hover.G3_h { color: white; }

a:link.G4 { color: white; }
a:visited.G4 { color: white; }
a:active.G4 { color: white; }
a:hover.G4 { color: white; }

a:link.G4_h { color: white; }
a:visited.G4_h { color: white; }
a:active.G4_h { color: white; }
a:hover.G4_h { color: white; }

#ajax-loader{
    margin: 50px;
}

#itemdetails .paypalform {
	background:#F9F9F9;
}
/*
I cannot make this work so i've applied the changes to (#itemdetails form input) itself
#itemdetails form input.paypalform {
	width: 145px;
}
*/