/* LAYOUT. this is the solid grey line which appears in
   the top right box on the welcome page content. I am 
   sure it will be used in many places. */
hr.grey {
  width: 100%;
  border: 0;
  height: 1px;
  color: #999999;
  background-color: #999999;
  z-index: 100;
}

hr.search {
  border: 0;
  height: 1px;
  color: #999999;
  z-index: 100;
  background-color: #999999;
}

/* LAYOUT. For image alignment. */
.middle {
  vertical-align: middle;
}
.top {
  vertical-align: top;
}

.center {
  text-align: center;
}

.text-left {
  text-align: left;
}


/* LAYOUT. All of the following align (or disallow)
   floating elements on the page. */
.clear {
	clear: both;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.no-padding {
  padding: 0px;
}

.padding-4 {
  padding: 4px;
}

.side-padding-4 {
  padding-left: 4px;
  padding-right: 4px;
}

.padding-8 {
  padding: 8px;
}

.top-padding-4 {
  padding-top: 4px;
}

.top-padding-8 {
  padding-top: 8px;
}

.top-padding-12 {
  padding-top: 12px;
}

.bottom-padding-8 {
  padding-bottom: 8px;
}

.bottom-padding-12 {
  padding-bottom: 12px;
}

.line-padding-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.line-padding-14 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.line-spacing-5 {
  margin-top: 5px;
  margin-bottom: 5px;
}

.line-padding-4 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.order-radios {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 20px;
  margin-right: 3px;
}

/* LAYOUT (actually, the main menu tabs). */
.mainmenu img {
  border: 0px;
}
.mainmenu a {
  text-decoration: none;
}

td.mainmenu {
	font-size:1px;
	vertical-align:bottom;
	height:34px;
	padding:0px;
	margin:0px;
	line-height:1px;
}

table.mainmenu-table {
	padding:0px;
	margin:0px;
	font-size:1px;
	line-height:1px;
}

/* LAYOUT? Images such as the 'Register Now' button, for
   example, are not actual links, per se, so they have to
   use this class to make the mouse look like it is pointing
   to a link. */
.img-link {
  cursor: pointer;
}

/* LAYOUT. The slogan at the bottom of the page. */
div#slogan {
  float: right;
  padding: 5px 20px 10px 0px;
}

/* TEXT/LAYOUT. The time and 'online' status under the header. */
div#time-online {
    background-color: #d6d6d6;
    font-size: 9px;
    color: #666;
    padding: 5px 50px 20px 50px;
}

/* LAYOUT. These should possibly be scrapped and we assign
   'float-left' and 'float-right' classes instad to the
   elements. */
div#time {
    float: left;
}
div#online {
    float: right;
}

/* LAYOUT. */
div#main-container {
  width: 100%;
  background-color: #d6d6d6;
}

/* LAYOUT. The big container under the header. */
#maincontent {
	width: 808px;		margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	background-color: #d6d6d6;
	text-align: left;
}

#formcontent {
	width: 500px; /* orig 800 */
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	background-color: #d6d6d6;
	text-align: left;
}

/* LAYOUT. The left portion inside the big container
   under the header. */
#leftcontent {
	background-color: #d6d6d6; 
	float: left;
	width: 400px; /* orig 400 */
	padding: 10px 10px 0 10px;
}

/* LAYOUT. The right portion inside the big container
   under the header. */
#rightcontent {
	background-color: #d6d6d6; 
	float: right;
	width: 358px; /* orig 358 */
	padding: 10px 0px 0 10px;
}

/* LAYOUT. 
   These are being contemplated for the join pages */
#auxcontent {
	background-color: #d6d6d6; 
	float: right;
	width: 270px;
/*	padding: 10px 10px 0 10px;*/
	padding: 10px 0px 0px 0px;
}

#primarycontent {
	background-color: #d6d6d6; 
	float: left;
	width: 520px;
/*	padding: 10px 0px 0 10px;*/
	padding: 10px 0px 0 0px;	
}

#primarycontent-right {
	background-color: #d6d6d6; 
	float: left;
	width: 520px;
/*	padding: 10px 0px 0 10px;*/
	padding: 10px 0px 0 0px;
}

#primarycontent-center {
	background-color: #d6d6d6; 
	float: right;
	width: 80%;
	padding: 10px 0px 0 10px;
}


/* position the large rating icons */
img.rating-1 {
    position: relative;
    top: 2px;
}
img.rating-2 {
    position: relative;
    top: -1px;
}
img.rating-3 {
    position: relative;
    top: -4px;
}

/* position the small rating icons */
img.my-rating-1 {
    position: relative;
        left:auto;
    top:auto;
    }
img.my-rating-2 {
    position: relative;
    top:1px;
        left:auto;
    top:-5px;
    }
img.my-rating-3 {
    position: relative;
    top:-2px;
        left:auto;
    top:-10px;
    }

/* LAYOUT. Inside the right middle small-table on the welcome page. */
.login-table-left {
  width: 25%;
  float: left;
  text-align: right;
  padding-right: 5px;
}
.login-table-center {
  width: 30%;
  float: left;
  text-align: left;
  padding-left: 5px;
  margin-right: 5px;
}
.login-table-right {
  text-align: left;
}

/* LAYOUT. Inside the right bottom small-table on the welcome page. */
.friends-order-left {
  width: 70%;
  float: left;
}
.input-table-left {
  width: 65%;
  float: left;
  text-align: right;
  padding-right: 5px;
}
.input-table-right {
  width: 35%;
  float: left;
  text-align: left;
  padding-left: 5px;
}
.friends-order-right {
  float: right;
  width: 110px;
}


/* LAYOUT. This is superfluous, but keep it for now. */
div.welcomeleft-left {
  float: left;
}
div.welcomeleft-right {
  float: left;
}

/* LAYOUT. For content within small-tables. */
.content-row-top {
  margin: 0;
  padding: 0px 0px 5px 0px;
}
.content-row {
  margin: 0;
  padding: 5px 0px 5px 0px;
}
.content-row-bottom {
  margin: 0;
  padding: 5px 0px 0px 0px;
}

/* TEXT. homepage intro text */
.texttable {
  padding: 10px 10px 10px 10px;
  font-size: 11px;
}

#bottom-bar {
  background: url('../images/misc/bottom_bar.gif') top left repeat-x;
  width: 100%;
}

.table-border {
  border-bottom: 1px solid #999999;
  border-right: 1px solid #999999;
  border-left: 1px solid #999999;
}
.tr-border {
  border-top: 1px solid #999999;
}

.tr-border-bottom {
  border-bottom: 1px solid #999999;
}

.highlight-border {
  border: 1px solid #0066cc;
}

.highlight-box-1st {
	font-size:12px; 
	font-weight:bold; 
	color:#4E4A40;
	margin-bottom:10px;
}

.highlight-box {
	font-size:12px; 
	font-weight:bold; 
	color:#4E4A40;
	margin-bottom:10px;
	margin-top:20px;
}

.find-tr-border-left {
  border-top: 1px solid #999999;
  border-left: 1px solid #999999;
}

.find-tr-border-right {
  border-top: 1px solid #999999;
  border-right: 1px solid #999999;
}

.tr-border-sides {
  border-left: 1px solid #999999;
  border-right: 1px solid #999999;
}

.find-tr-search {
  border-left: 1px solid #999999;
  border-right: 1px solid #999999;
  background-color: #ffffcc;
}

.find-tr-spacer {
  border-top: 1px solid #999999;
}

.tr-border-header {
  border-top: 1px solid #999999;
  border-left: 1px solid #ffffff;
}

.tr-border-header-left {
  border-top: 1px solid #999999;
}

.prod-edit-padding-big {
  padding: 6px 6px 6px 6px;
}  

.prod-edit-padding-small {
  padding: 3px 3px 3px 3px;
}

.region_bg_0 {
	background-color:#F6F4EA;
}

.region_bg_1 {
	background-color:white;
}

.red_bg {
  padding: 5px 5px 5px 5px;
	background-color:#F6F4EA;
	/*background-color:#CC0000;*/
  font-weight: bold;
  color: #000000;
}

.help-para {
  padding: 5px 5px 15px 5px;
}

.list-padding {
  padding: 4px 2px 4px 2px;
}

.warn-gif {
	margin: 0px 5px 15px 0px;
	float: left;
	vertical-align: middle;
}

.bullet-tick-gif {
	margin: 0px 5px 12px 0px;
	float: left;
	vertical-align: middle;
}

		.panel {
		padding:0 21px 0 0;
		background:#fff url('../images/panels/border-r.gif') 100% 0 repeat-y;
		position:relative;
	}
	.paneli {
		padding:0 0 0 12px;
		background:#fff url('../images/panels/border-l.gif') 0 0 repeat-y;
	}
	.panelt {
		height:33px;
		margin:0 -21px 0 -12px;
		background:url('../images/panels/panel1.gif') 100% 0 no-repeat;
	}
	.panelt div {		/* top left corner */
		width:18px;
		height:33px;
		background:url('../images/panels/panel1.gif') 0 0 no-repeat;
	}
	.panelb {
		height:20px;
		margin:0 -21px 0 -12px;
		background:url('../images/panels/panel1.gif') 100% 100% no-repeat;
	}
	.panelb div {
		width:18px;
		height:20px;
		background:url('../images/panels/panel1.gif') 0 100% no-repeat;
	}