/* CSS for oothanks.com */
/* Please keep it commented, David! */

body {
	font-family: tahoma, arial, helvetica, sans-serif;
/*	margin: 20px;*/
	font-size: small;
}
/* ext style sheets wreck the UL styles */
.oot-ul {
	list-style:disc inside;
	margin-left: 10px;
}
/* loading */
.loading-indicator {
    font-size:8pt;
    background-image:url('/lib/resources/images/grid/loading.gif');
    background-repeat: no-repeat;
    background-position:top left;
    padding-left:20px;
	height:18px;
	text-align:left;
}
#loading {
	position: absolute;
	top: 50px;
	left:0;
	width:100%;
	z-index:20001;	
}
#loading-text{
	width:300px;
	margin: 0 auto;
	border:3px solid #b70000;
	padding:10px;
	background:#ad0000;
	font-weight:bold;
	color: #ffcccc;
}
#loading em {
	color: white;
	font-weight: bold;
}
.JSLoader-barholder {
	border: 1px solid blue;
	background: #a50000 url(/images/listitem_red1_center.png) repeat-x;
	height: 20px;
	width: 100%;
}
.JSLoader-bar {
	border: none;
	background: green url(/images/listitem_green1_center.png) repeat-x;
	height: 100%;
	line-height:20px;
}

/* div containing everything */
#main-page {
}
#main-page h1{
	font-size: xx-large;
}

/* holds the main content */
#content-outer {
	border: 2px solid #a50000;
}
#content-inner {
	padding: 10px;
	height: 420px;
}
#card-holder h1, #loading h1, #seelist h1 {
	font-family: arial, helvetica, sans-serif;	/*tahoma looks bad big*/	
	font-size: x-large;
	margin: 0px 0px 5px 0px;
	background: #a50000 url(/images/h1_grad1.png) bottom;
	color: white;
	padding-left:2px;
}
#viewport-centre p {
	font-weight: normal;
	padding: 5px;
}
/* the site title */
.title {
	font-family: arial, helvetica, sans-serif;	/*tahoma looks bad big*/
	font-size: xx-large;
	color: white;
	font-weight: bold;
	width:100%;
	background: #a50000 url('/images/title_grad1.png') bottom;
	
}
/* some bold colours */
.b-blue {
	color: blue;
}
.b-red {
	color: red;
}
.b-green {
	color: green;
}
.b-grey {
	color: #ddd;
}
/* home center panel images */
img.hcpLeftImage {
	float: left;
	margin-right:5px;
}
img.hcpRightImage {
	float: right;
	margin-left:5px;
}
/* class=oot-data is hidden, and contains a JSON string */
.oot-data {
	display:none;
}

/* top-menu is on every page */

#top-menu {
	width: 720px;
	background: #a50000;
	color: white;
	padding: 2px;
}
#top-menu a, #top-menu a:hover, #top-menu a:active, #top-menu a:focus, #top-menu a:link  {
	color: white;
	text-decoration: none;
	font-weight: bold;
}
#top-menu a:hover  {
	background: white;
	color: #a50000;
}
/* oot-page is the basic page content div - and its hidden */
.oot-page {
/*	display:none;*/
}
/* home page styles */
#oot-home-panel-e {
	padding: 5px;
}
#oot-home-panel-c {
	padding: 5px;
}
/* menu styles */
#menu {
	float:right;
	border-left: 1px solid red;
	border-bottom: 1px solid red;
	padding: 0px 5px;
	text-align: center;
	font-size: small;
	font-weight: bold;
	background: #ffcccc;
	width: 200px;
}
#menu h1, #menu h2, #menu h3 {
	color: white;
	background: red;
	margin: 1px 0px;
	padding: 0px 5px;
	text-align: center;
}
#menu h1 {
	font-size: x-large;
}
#menu h2 {
	font-size: large;
}
#menu div {
	margin: 3px;
	border: 1px solid red;
	padding: 3px;
	background: white;
}
#menu form {
	margin: 0px;
}
#menu-login {
	/* a div on the home page with the login menu*/
}
#menu-viewlist {
	/* a div on the home page*/
}
#menu-create {
	/* a div on the home page*/
}
/* any text describing an error */
.error-text {
	color: green;
	font-weight: bold;
}
/* any text describing special info*/
.oot-info-text {
	color: #750D0D;
	font-weight: bold;
}
.oot-rowspacer {
	display:block;
	line-height: 4px;
	height: 5px;
}
/* new_account.php */
.create-account-tablebar{
	height: 1px;
	margin: 0px;
	padding: 0px;
	font-size: 1px;
	border-top: 1px solid red;
}
.create-account-field {
	text-align: left;
}
.create-account-field-description {
	text-align: right;
	font-size: smaller;
	font-weight: bold;
}
.create-account-help {
	font-size:smaller;
	font-style: italic;
}
.oot-tip {
	color: blue;
	font-weight:bold;
}
/* tab stuff */
.oot-tabdiv {
	/* the div for tabs! */
	padding: 10px;
}
/*infoblock is for any set of information displayed as title:info */
.oot-infoblock {
	border: 1px solid blue;
	font-size: small;
	padding: 5px;
	overflow:hidden;
}
.oot-infoblock-title {
	display: block;
	float: left;
	text-align: right;
	padding-right: 10px;
	font-weight:bold;
}
/* list summaries have a table class, here it is! */
table.oot-list-summary {
	font-size: small;
	border-collapse:collapse;
	width:100%;
}
.oot-list-summary-head {
	font-size: x-small;
	font-weight: bold;
	font-style: italic;
}
.oot-list-summary-head td{
	padding: 2px;
	border: 1px dotted #a50000;
}
.oot-list-summary-cell {
	border: 1px solid #a50000;
	padding: 2px;
}
/* buttons */
.oot-button-label {
	/* a span that's to the left, holding text describing the button */
	float: left;
	font-weight:normal;
	font-size: small;
	margin-right:10px;
	margin-top:3px;	
}
.oot-button-button {
	/* a span that holds the actual button */
}
/* some standard text styles */
.oot-h-inline {
	/* a class to make a heading inline */ 
	display: inline;
}
.oot-hint {
	/* provides small light text to give a helpful hint	*/
	font-size: x-small;
	font-style: italic;
	font-weight: bold;
	color: gray;
	padding-left: 5px;
}
.oot-help-image {
/*	vertical-align:bottom;*/
	margin-left:3px
}

.oot-tab-inDiv {
	/* a div inside one of the tabs, with a colour border background */
	margin: 10px;
	border: 1px solid red;
	padding:10px;
}
.x-item-disabled {
	/* for any input field that is disabled, we want to be able to read easily */
	color: blue;
	opacity: 1;
}
/* lists and list items */
/* layout title text */
.x-layout-panel-hd-text {
	font-weight:bold;
}
/* oot-listlayout : a div with the layout in it */
#oot-listlayout {
	position:relative;
	width: 100%;
	height: 400px;
}
/* oot-listtab is the class for a tab on a listpage */
.oot-listtab {
/*	padding: 5px;*/
}
#oot-fulllistdata {
	padding: 5px;
}
.oot-listpanel{
	padding: 10px;
}
#oot-itempanel {
	padding: 5px;
}
/* on the item tab, less space in fieldsets means more can be shown */
#oot-itempanel x-fieldset {
	padding:5px;
}
.oot-itempanel-fieldset-holder {
	float:left;
	width:180px;
}
.oot-itempanel-fieldset-holder .x-fieldset {
	padding:5px;
	margin:5px;
}
.oot-item-image {
	/* applies to images shown for each item in the itempanel */
	padding:0;
	border:1px solid blue;
	float:left;
	color: #ccc;
	font-weight:bold;
	height:80px;
	width:80px;
	text-align:center;
	font-size:21px;
	cursor:pointer;
}
.oot-item-comment{
	/* applies to comments shown for each item in the itempanel */
	padding:3px;
	margin:2px;
	border:1px solid blue;
}
.oot-item-weblink {
	/* applies to comments shown for each item in the itempanel */
	display:block;
	padding:3px;
	margin:2px;
	border:1px solid blue;
}
.oot-extra-approvediv-image, .oot-extra-approvediv-comment, .oot-extra-approvediv-weblink {
	border:1px solid blue;
	padding:1px;
	margin: -3px 2px 2px 2px;
	border-top: none;
	background: #99ddff;
}
.oot-extra-approvediv-image{
	margin-top:0px;
}
#oot-listlayout .x-layout-panel-hd-text {
	/* the listpanel toolbar */
	font-weight: bold;
}
#oot-listlayout .x-toolbar{
	padding: 0px 0px 0px 2px;
}
.oot-listitem-div-bought-left{
	background: url(/images/listitem_lr.png) left no-repeat;
	width: 10px;
	float:left;
	height: 30px;	
}
.oot-listitem-div-bought-right{
	background: url(/images/listitem_lr.png) right no-repeat;
	width: 10px;
	height: 30px;
	float:left;		
}
.oot-listitem-div-bought-center{
	background: url(/images/h1_grad1.png);
	height: 30px;
	float:left;	
	line-height: 30px;
}
.oot-listitem-div-all-left{
	background: url(/images/listitem_blue2_lr.png) left no-repeat;
	width: 10px;
	float:left;
	height: 30px;	
}
.oot-listitem-div-all-right{
	background: url(/images/listitem_blue2_lr.png) right no-repeat;
	width: 10px;
	height: 30px;
	float:left;		
}
.oot-listitem-div-all-center{
	background: url(/images/listitem_blue2_center.png);
	height: 30px;
	float:left;	
	line-height: 30px;
}

.oot-listitem-descr{
	float:left;
	margin-right: 5px;	
	width: 250px;
}
.oot-listitem-price{
	margin-right: 5px;
	float:left;
	width: 70px;
	text-align:right;
}
/* a small icon, in a buttonbar probably */
.oot-icon {
	float: left;
	vertical-align: middle;
}
/* Buttons */
/* to replace button bars (maybe) we will use Ext buttons... 
 * we need to change the background image...
 * */
/* oot-button sets up the standard default */
table.oot-button {
	float:left;
}
.oot-button .x-btn-text {
	color: white;
	font-weight: bold;
}
.oot-button td{
	background-image: url(../images/red/btn-sprite-red1.gif);
	padding: 0;
}
.oot-button.x-btn-click .x-btn-center{
	background-position:0 -189px !important;
}
.oot-button.x-btn-click .x-btn-left{
	background-position:0 -147px !important;
}
.oot-button.x-btn-click .x-btn-right{
	background-position:0 -168px !important;
}
/* oot-button-???? changes background images */
.oot-button-additem td, .oot-button-EXedit td {
	background-image: url(../images/red/btn-sprite-blue1.gif);
}
.oot-button-pencil td,  
.oot-button-managerinvite td, .oot-button-friendlist-awaiting td{
	background-image: url(../images/red/btn-sprite-orange1.gif);
}	

.oot-button-bought td,	.oot-button-friendlist-rejected td, .oot-button-EXreject td {
	background-image: url(../images/red/btn-sprite-red1.gif);	
}
.oot-button-changeOrder td, .oot-button-unpencil td,
.oot-button-friendlist-accepted td, .oot-button-viewinvite td,
.oot-button-VSapprove td, .oot-button-EXapprove td,
.oot-button-green td, .oot-button-inviteSomeone td{
	background-image: url(../images/red/btn-sprite-green1.gif);	
}
.oot-button-notbought td .oot-button-VSreject td{
	background-image: url(../images/red/btn-sprite-black1.gif);
}
.oot-button-VSremove td, .oot-button-EXunapprove td {
	background-image: url(../images/red/btn-sprite-grey1.gif);	
}
.oot-button-inviteSomeone td{
	float:right;	
}
/* use the next class for createChild text that works inline with buttons */
.oot-button-inlinetext {
	float:left;
	margin: 2px 7px;
}
/*oot-buttonbar*/   /* IS DEPRECATED - DELETE THIS SECTION WHEN YOU ARE SURE ITS SAFE! */
/* These are quite nice - bar buttons! 
	you can add named versions, and each one needs an -over and -click version as well */
.oot-buttonbar {
	background: url(/images/listitem_red1_center.png) repeat-x;
	color: white;
	font-weight:bold;
/*	margin:3px 2px 10px 0px;*/
	margin: 3px auto;
	padding:5px;
	text-align:center;	
	cursor:pointer;
	width:100%;
}
.oot-buttonbar-holder {
	float:left;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}
.oot-buttonbar-over {
	color: yellow !important;
}
.oot-buttonbar-click {
	color: blue !important;
}

/* oot-buttonbar-delitem*/
.oot-buttonbar-delitem{
	font-size:xx-small;
	padding:1px;
}
/* oot-buttonbar-additem */
.oot-buttonbar-additem{
	background: url(/images/listitem_blue2_center.png) repeat-x;	
}
.oot-buttonbar-additem-click{
	color: red;
}
/* oot-buttonbar-changeOrder */
.oot-buttonbar-changeOrder{
	background: url(/images/listitem_green2_center.png) repeat-x;	
}
/* oot-buttonbar-pencil */
.oot-buttonbar-pencil, .oot-buttonbar-bought, .oot-buttonbar-unpencil,
.oot-buttonbar-managerinvite, .oot-buttonbar-friendlist-awaiting,
.oot-buttonbar-friendlist-rejected, .oot-buttonbar-friendlist-accepted,
.oot-buttonbar-viewinvite{
	background: url(/images/listitem_orange2_center.png) repeat-x;
	font-size:11px;
	padding:3px;
/*	width:45%;*/
	margin:2px;
	float:left;
	color: black;
}
.oot-buttonbar-managerinvite, .oot-buttonbar-friendlist-awaiting,
.oot-buttonbar-friendlist-rejected, .oot-buttonbar-friendlist-accepted,
.oot-buttonbar-viewinvite{
/*	width: none !important;	*/
}
.oot-buttonbar-pencil-over{
	color:blue;
}
.oot-buttonbar-bought, .oot-buttonbar-friendlist-rejected {
	background: url(/images/listitem_red1_center.png) repeat-x;	
}
.oot-buttonbar-unpencil,  .oot-buttonbar-friendlist-accepted, .oot-buttonbar-viewinvite{
	background: url(/images/listitem_green2_center.png) repeat-x;		
}
.oot-buttonbar-notbought{
	background: url(/images/listitem_black1_center.png) repeat-x;
	font-size:11px;
	padding:3px;
	margin:2px;
}
.oot-buttonbar-VSapprove, .oot-buttonbar-VSreject, .oot-buttonbar-VSremove{
	background: url(/images/listitem_green2_center.png) repeat-x;
	font-size:11px;
	padding:3px;
/*	width:28%;*/
	margin:2px;
	float:left;
}
.oot-buttonbar-VSreject{
	background: url(/images/listitem_black1_center.png) repeat-x;	
}
.oot-buttonbar-VSremove{
	background: url(/images/listitem_grey1_center.png) repeat-x;	
}

.oot-buttonbar-EXapprove, .oot-buttonbar-EXreject, .oot-buttonbar-EXunapprove, .oot-buttonbar-EXedit{
	background: url(/images/listitem_green2_center.png) repeat-x;
	font-size:10px;
	padding:1px;
/*	width:31%;*/
	margin:1px;
	float:left;
}
.oot-buttonbar-EXreject{
	background: url(/images/listitem_red1_center.png) repeat-x;	
}
.oot-buttonbar-EXunapprove{
	background: url(/images/listitem_grey1_center.png) repeat-x;	
}
.oot-buttonbar-EXedit{
	background: url(/images/listitem_blue2_center.png) repeat-x;
}


/* oot-additem-bar is the click-on bar to add an item, in blue*/
.oot-additem-bar, .oot-changeOrder-bar, .oot-delitem-bar{
	background: url(/images/listitem_blue2_center.png) repeat-x;
	color: white;
	font-weight:bold;
	margin:3px 2px 10px 0px;
	padding:5px;
	text-align:center;	
	cursor:pointer;
}
.oot-changeOrder-bar {
	background: url(/images/listitem_green2_center.png) repeat-x;
}
.oot-delitem-bar {
	background: url(/images/listitem_red1_center.png) repeat-x;
	font-size:xx-small;
	padding:1px;
}

/* .oot-fulllistdata contains any lists, so we change the styles for grids within this */
.oot-listitems {

}
.oot-listitems td{
	height: 33px;
	font-size:15px;
	line-height:23px;
	font-weight:bold;
}

.oot-listitems td.x-grid3-hd { /* header row*/
	height: 20px;
	font-size: 12px;
	line-height: 14px;
}
/*
.oot-listitems .x-grid3-hd-over .x-grid3-hd-inner, .oot-listitems .x-grid3-hd .x-grid3-hd-inner{
	background: url(/images/listitem_blue2_center.png) repeat-x;	
	border-bottom: 0px;
}

.oot-listitems .x-grid3-header {
	background: url(/images/listitem_blue2_center.png) repeat-x;	
}
*/
.oot-listitems .x-grid3-split {
	height: 25px;
}
.oot-listitems .x-grid3-col {
	border: 0px none;
	padding-right:1px; /* need this to keep in line with header */
}
.oot-listitems .x-grid3-row-selected td{
	background-color: white !important;
	color: white;
}
/* now add the coloured versions */
.oot-rowcolour-all td.x-grid3-col {
	background: url(/images/listitem_blue2_center.png) repeat-x;	
}
.oot-rowcolour-0 td.x-grid3-col {
	background: url(/images/listitem_green2_center.png) repeat-x;	
}
.oot-rowcolour-1 td.x-grid3-col {
	background: url(/images/listitem_orange2_center.png) repeat-x;	
}
.oot-rowcolour-2 td.x-grid3-col{
	background: url(/images/listitem_red1_center.png) repeat-x;
}
.oot-rowapprove-0 td.x-grid3-col{
	background: url(/images/listitem_yellow1_center.png) repeat-x;
}
.x-grid3-row-selected.oot-rowapprove-0 div {
	color: blue !important;
}
.oot-rowapprove-2 td.x-grid3-col{
	background: url(/images/listitem_black1_center.png) repeat-x;
}
.oot-rowapprove-3 td.x-grid3-col{
	background: url(/images/listitem_grey1_center.png) repeat-x;
} 
.oot-vetCombo {
	border:none;
	font-size: xx-small;
	background: transparent;
	width: 65px;
	cursor:pointer;
}
.oot-vetCombo option {
	color: white;
}
.oot-vetCombo-option-0 {
	background: yellow;
	color: black !important;
}
.oot-vetCombo-option-1 {
	background: green;
}
.oot-vetCombo-option-2 {
	background: black;
}
.oot-vetCombo-option-3 {
	background: gray;
}
/*the listuser classes have to do with showing user status*/
.oot-listuser-unreg{
	color:gray;
	font-size:xx-small;
	font-style:italic;
}
.oot-listuser-vetCombo, .oot-myaccount-dropdown-select{
	/*similar to vetCombo, but just for the listuser grid*/
	border:none;
	font-size: xx-small;
	background: transparent;
	width: 65px;
	cursor:pointer;
}
.oot-listuser-vetCombo option, .oot-myaccount-dropdown-select option{
	background: white;
	color: black;
}
.oot-listuser-vetCombo-option-0, .oot-myaccount-dropdown-option-0 {
	background: red;
	color: white !important;
}
.oot-listuser-vetCombo-option-1 {
}
.oot-listuser-vetCombo-option-2 {
	background: gray;
	color: white !important;	
}
.oot-listuser-vetCombo-option-3 {
	background: gray;
}

/* oot-friends */
.oot-friends-editButton {
	font-size:7px;
}
.oot-friends-selectButton {
	font-size:9px;
}
.oot-friends-checkbox {
	
}
.oot-listitems-all td.x-grid3-col, .oot-listitems-all td.x-grid3-hd{
	background: url(/images/listitem_blue2_center.png) repeat-x;
}
/*.oot-listitems-all td.x-grid3-td-0 {
	background: url(/images/listitem_blue2_lr.png) left no-repeat;
}*/
/*.oot-listitems-all td.x-grid3-td-5 {
	background: url(/images/listitem_blue2_lr.png) right no-repeat;
}*/
.oot-listitems-all .x-grid3-hd-over .x-grid3-hd-text{
	background: url(/images/listitem_blue2_center.png) repeat-x;
	}
.oot-listitems-available td{
	background: url(/images/listitem_green2_center.png) repeat-x;
}
/*.oot-listitems-available td.x-grid3-td-0 {
	background: url(/images/listitem_green2_lr.png) left no-repeat;
}*/
/*.oot-listitems-available td.x-grid3-td-5 {
	background: url(/images/listitem_green2_lr.png) right no-repeat;
}*/
.oot-listitems-available .x-grid3-hd-over .x-grid3-hd-text{
	background: url(/images/listitem_green2_center.png) repeat-x;
	}
.oot-listitems-pencilled td{
	background: url(/images/listitem_orange2_center.png) repeat-x;
}
/*.oot-listitems-pencilled td.x-grid3-td-0 {
	background: url(/images/listitem_orange2_lr.png) left no-repeat;
}*/
/*.oot-listitems-pencilled td.x-grid3-td-5 {
	background: url(/images/listitem_orange2_lr.png) right no-repeat;
}*/
.oot-listitems-pencilled .x-grid3-hd-over .x-grid3-hd-text{
	background: url(/images/listitem_orange2_center.png) repeat-x;
	}
.oot-listitems-bought td{
	background: url(/images/listitem_red2_center.png) repeat-x;
}
/*.oot-listitems-bought td.x-grid3-td-0 {
	background: url(/images/listitem_red2_lr.png) left no-repeat;
}*/
/*.oot-listitems-bought td.x-grid3-td-5 {
	background: url(/images/listitem_red2_lr.png) right no-repeat;
}*/
.oot-listitems-bought .x-grid3-hd-over .x-grid3-hd-text{
	background: url(/images/listitem_red2_center.png) repeat-x;
	}
	
.oot-descriptiontext-comment {
	/* a comment next to the description text on an itemslist */
	font-weight:normal;
}

/* a correction to put handles on splitbars */
.x-splitbar-h{background-image:url(../lib/ext2/resources/images/default/sizer/e-handle.gif);background-position:left;}
.x-splitbar-v{background-image:url(../lib/ext2/resources/images/default/sizer/s-handle.gif);background-position:top;}

/* seelists */
#seelist-morelists {
/*	display: none;*/
}

/* some icon classes, alphabetically... */
.oot-icon-addchild {
	background: url('/images/icons/user_add.png') 0 4px no-repeat !important;
}
.oot-icon-buying {
	background: url('/images/icons/basket.png') 0 4px no-repeat !important;
}
.oot-icon-child0 {
	background: url('/images/icons/user_orange.png') 0 4px no-repeat !important;
}
.oot-icon-child1 {
	background: url('/images/icons/user_green.png') 0 4px no-repeat !important;
}
.oot-icon-child2 {
	background: url('/images/icons/user_red.png') 0 4px no-repeat !important;
}
.oot-icon-children {
	background: url('/images/icons/emoticon_happy.png') 0 4px no-repeat !important;
}
.oot-icon-edit {
	background: url('/images/icons/page_white_gear.png') 0 4px no-repeat !important;
}
.oot-icon-find {
	background: url('/images/icons/find.png') 0 4px no-repeat !important;
}
.oot-icon-friends {
	background: url('/images/icons/group.png') 0 4px no-repeat !important;
}
.oot-icon-list {
	background: url('/images/icons/script_edit.png') 0 4px no-repeat !important;
}
.oot-icon-new {
	background: url('/images/icons/script_add.png') 0 4px no-repeat !important;
}
.oot-icon-todo {
	background: url('/images/icons/tick.png') 0 4px no-repeat !important;
}
.oot-icon-view {
	background: url('/images/icons/book_open.png') 0 4px no-repeat !important;
}