/* These classes govern the main page layout for table-based pages          */
/* They are also inherited by the objects in the menus and so on            */
/* configuration pages and inherited by contained objects                   */


div.indypage {
	WIDTH: 790px;
	MARGIN: auto;
	PADDING: 0;
}

div.indyheader {
	MARGIN: 0 0 0 0;
	PADDING: 0px;
	clear: both;
	HEIGHT: 100px;
}

table.indyheader {
	WIDTH: 100%;
	PADDING: 0px;
	MARGIN: 0px 0px 0px 0px;
	border-collapse: collapse;
}

tr.indyheader{
	PADDING: 0px;
	MARGIN: 0px;  /*-*/
}

td.indyheader{
	WIDTH: 100%;
	PADDING: 0px;
	MARGIN: 0px;
	vertical-align: bottom;
	height: 100%;
}

table.filterbar{
 width: 100%;
 border-collapse: collapse;
 padding: 0;
 margin: 0;
 BACKGROUND-COLOR: #702B2E;

}

tr.filterbar{
	PADDING: 0px;
	MARGIN: 0px;
}

td.filterbar{
   text-align: right;
   width: 100%;
   border: #702B2E 1px solid;
	PADDING: 2px 6px 2px 6px;
	BACKGROUND-COLOR: #702B2E;
	MARGIN: 0px;
	vertical-align: bottom;
	height: 100%;
}


th.indyheader{
	WIDTH: 100%;
	PADDING: 0px;
	MARGIN: 0px;
	vertical-align: bottom;
	height: 100%;
}

span.filterbar
{
    color: #fff;
	font-weight: bold;
}

select.filterbar
{
	color: #702B2E;
	border: #702B2E 1px solid;
	margin: 0 0 0 4px;
}

input.filterbar
{
	background-color: #fff;
	border: #702B2E 1px solid;

}

p.filterbar
{
  display: inline;
  margin: 0px;
}
/* bar rendered as a list and styled into a navigation bar */

ul.indyheader{
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	background-color: #702B2E;
	color: White;
	float: left;
	width: 100%;
	height: 100%;
	vertical-align: bottom;
	font-family: arial, helvetica, sans-serif;
	display: inline;
}

li.indyheader
{
	display: inline;
	text-decoration: none;
	position: relative;
	float: left;
	padding: 2px 0 2px 0px;
	list-style-type: none;

}

A.indyheader:link
{
	padding-bottom: 3px;
	padding-top: 2px;
	padding-right: 6px;
	padding-left: 6px;
	color: White;
	font-size: 14px;
	text-decoration: none;
}

a.indyheader:visited
{
	padding-bottom: 3px;
	padding-top: 2px;
	padding-right: 6px;
	padding-left: 6px;	
	font-size: 14px;
	color: #fff;
	text-decoration: none;
}
a.indyheader:active
{
	padding-bottom: 3px;
	padding-top: 2px;
	padding-right: 6px;
	padding-left: 6px;	font-size: 14px;
	text-decoration: none;
}

a.indyheader:hover 
{
	padding-bottom: 3px;
	padding-top: 2px;
	padding-right: 6px;
	padding-left: 6px;	font-size: 14px;
	color: #fff;
	text-decoration: none;
}


/* these elements are overridden classes set to a specific class in the page configuration screen */
li.header-icon
{
	display: inline;
	text-decoration: none;
	position: relative;
	float: left;
	padding: 0;
	margin: 0;
	list-style-type: none;
}


INPUT.search-box-button
{
	border: #702B2E 1px solid;
	background-color: #DFDFDF;
	
}

INPUT.search-box
{
	background-color: #fff;
	border: #702B2E 1px solid;
	text-align: left;
	vertical-align: middle;
	width: 160px;
	color: #702B2E;	
	padding: 0.2em 0.4em 0em 0.4em;
	font-size: 11px;
	height: 17px;
	margin-top: 1px;
	margin-bottom: 1px;
}

p.search-box
{
  margin-top: 2px;
  margin-bottom: 2px;
}

input.header-right-image{
	margin: 0px;
	vertical-align: top;
}

li.header-right
{
	display: inline;
	text-decoration: none;
	position: relative;
	float: right;
	list-style-type: none;
	background-color: #69796C;
}

div.hot-topics
{
	border: #702B2E 1px solid;
	background-color: #DFDFDF;
	margin: 0px auto 1em auto;
	padding-bottom: 0.3em;
	width: 500px;
}

h4.hot-topics
{
	margin: 2px 0 3px 0;
	text-align: center;
}

ul.hot-topics{
	width: 100%;
	font-family: arial, helvetica, sans-serif;
	padding: 0 0 0 0;
}

li.hot-topics
{
	text-decoration: none;
	list-style-type: none;
	padding: 0 1em 0.5em 1em;
}



A.hot-topics:link {
	COLOR: #702B2E; TEXT-DECORATION: None; 
}

A.hot-topics:visited {
	COLOR: #702B2E; TEXT-DECORATION: None; 
}

A.hot-topics:hover {
	COLOR: #702B2E; TEXT-DECORATION: Underline; 
}

A.hot-topics:active {
	COLOR: #702B2E; TEXT-DECORATION: None; 
}

div.indyright-filter {
	background-color: #859B77;	
	margin-top: 0px;
	padding: 6px 4px 6px 4px;
	border-bottom: #FFFFFF 2px double;
	border-top: #FFFFFF 2px double;
	text-align: center;
}

span.indyright-filter {
	color: #fff;
	font-weight: bold;
	margin-right: 40px;
}

p.indyright-filter {
	margin: 0px;
	padding-left: 10px;
	text-align: left;
}

.indyright-filterbuttonimage {
	vertical-align: bottom;
}

select.indyright-filter {
	background-color: #D8E6E6;
	color: #000;
	width: 150px;
	margin: 2px 0px 2px 0px;
}


/* A second over-ridden element */
.useroptions
{
	COLOR: #5A3B3B; 
}

div.useroptions {
	background-color: #DDD7AC;	
	margin-top: 0px;
	padding: 10px 4px 16px 4px;
	border-bottom: #FFFFFF 2px double;
	border-top: #FFFFFF 2px double;
}

ul.useroptions{
	padding: 4px;
	margin: 0;
	list-style-type: none;

}

li.useroptions{
	border-top: #DFDFDF 1px solid;
	padding: 4px 0 4px 0;
	font-size: 1.1em;
}

select.useroptions {
	background-color: #DFDFDF;
}

input.useroptions
{
   font-size: 0.9em;
   color: #3B5A3B; 
	width: 110px; 
	margin-top: 2px;
}

A.useroptions:link {
	COLOR: #702B2E;
	TEXT-DECORATION: none
}

A.useroptions:visited {
	COLOR: #702B2E;
	TEXT-DECORATION: none
}

A.useroptions:hover {
	COLOR: #702B2E;
	TEXT-DECORATION: underline;
}

A.useroptions:active {
	COLOR: #382B2E;
	TEXT-DECORATION: none
}

H4.useroptions {
	margin: 4px 0 4px 0;
	text-align: center;
}



/* simple classes to hold banners */
table.banner-right
{
	text-align: right;
	clear: all;
	width: 100%;
	border-collapse: collapse;
	margin: 0;
       padding: 0;
}

tr.banner-right{}

td.banner-right{
	text-align: right;
       padding: 0;
}

img.banner-right-thumbnail
{
   border: 0;
   margin: 0;
}

table.navigation
{
	margin: 0;
	border-collapse: collapse;

}

tr.navigation{
	background-color: #702B2E;

}

td.navigation
{
	text-align: center;
	background-color: #DFDFDF	;
	BORDER-right: #702B2E 1px solid;
	BORDER-left: #702B2E 1px solid;
	padding: 0;
}

A.navigation:link {
	COLOR: #702B2E; 
	TEXT-DECORATION: none;
	padding: 2px 4px 2px 4px;
	width: 100%:
}

A.navigation:visited {
	COLOR: #702B2E;
	TEXT-DECORATION: none;
	padding: 2px 4px 2px 4px;
		width: 100%:
}

A.navigation:hover {
	COLOR: #DFDFDF; 
	background-color: #702B2E;
	TEXT-DECORATION: underline;
	padding: 2px 4px 2px 4px;
		width: 100%:
}

A.navigation:active {
	COLOR: #702B2E;
	TEXT-DECORATION: none;
	padding: 2px 4px 2px 4px;
		width: 100%:
}


td.navigation-selected{
	text-align: center;
	background-color: #702B2E;
	BORDER-LEFT: #DFDFDF 1px solid;
	BORDER-RIGHT: #DFDFDF 1px solid;
	padding: 0;
}

A.navigation-selected:link {
	COLOR: #DFDFDF; 
	TEXT-DECORATION: none;
	padding: 2px 4px 2px 4px;
}

A.navigation-selected:visited {

	COLOR: #DFDFDF; 
	TEXT-DECORATION: none;
	padding: 2px 4px 2px 4px;
}

A.navigation-selected:hover {
	COLOR: #DFDFDF; 
	TEXT-DECORATION: underline;
	padding: 2px 4px 2px 4px;
}

A.navigation-selected:active {
	COLOR: #DFDFDF; 
	background-color: #702B2E;
	TEXT-DECORATION: none;
	padding: 2px 4px 2px 4px;
}



table.banner-left
{
	text-align: left;
	clear: all;
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

tr.banner-left{}
td.banner-left{
	text-align: left;
}

table.banner-center
{
	text-align: center;
	clear: all;
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

tr.banner-center{}
td.banner-center{
	text-align: center;
}

td.search-box
{
	background-color: #DFDFDF;
	BORDER: #702B2E 1px solid;
	width: 180px;
	text-align: center;
}

/*  The table cell to hold the main page body */

table.indypagebody{
	BACKGROUND-COLOR: #ffffff;
	MARGIN: 30px 0px;  
/*	MARGIN: 50px 0px;  */
	BORDER: 0px;
	border-collapse: collapse;
	width: 100%;
}

tr.indypagebody{}

td.indypagebody{
	MARGIN: 0px 200px 0px 0px;
	PADDING: 0 30px 4% 20px;
	VERTICAL-ALIGN: TOP;
	BACKGROUND-COLOR: #ffffff;
}

/* this is an example of a column. If you want to make your own styled columns */
/* You will probably need to implement most of these html elements             */

td.indyleftcolumn {
	WIDTH: 180px;	
	BACKGROUND-COLOR: #CDC79C;
	BORDER: #702B2E 1px solid;
	VERTICAL-ALIGN: TOP;
	PADDING: 0.5em 0.2em 0.5em 0em;
}

.indyleftcolumn
{
	COLOR: #000; 
}


td.wideleftcolumn {
	WIDTH: 320px;	
	BORDER: #702B2E 1px solid;
	VERTICAL-ALIGN: TOP;
	PADDING: 0.5em 0.2em 0.5em 0em;
}

.indyleftcolumneventdate
{
	font-weight: bold;
}

div.indyleftcolumn
{
	MARGIN: 0;
	padding: 0px 4px 10px 10px;
	border-bottom: #702B2E 1px solid;
}

ul.indyleftcolumn{
	list-style-type: none;
	padding: 0;
	margin: 0;
}

li.indyleftcolumn{

	font-size: 1.2em;
	padding: 2px;

}

H5.indyleftcolumn{
	margin-top: 5px;
	margin-bottom: 0px;
}

H4.indyleftcolumn{
	margin-top: 8px;
	margin-bottom: 0px;
}

H3.indyleftcolumn{
	margin-top: 10px;
	margin-bottom: 4px;
}

H2.indyleftcolumn{
	margin-top: 14px;
	margin-bottom: 10px;
}

H1.indyleftcolumn{
	margin-top: 18px;
	margin-bottom: 10px;
}

select.indyleftcolumn
{
 	background-color: #fff;
	COLOR: #3C5028; 
	width: 140px;
	font-size: 1em;
	margin: 0.1em 0 0.1em 0;
}

input.indyleftcolumn
{
   font-size: 1em;
   color: #3B5A3B; 
	width: 140px; 
   margin: 2px;
}

A.indyleftcolumn:link {
	COLOR: #3C5028; 
	TEXT-DECORATION: none
}

A.indyleftcolumn:visited {
	COLOR: #3C5028; 
	TEXT-DECORATION: none
}

A.indyleftcolumn:hover {
	COLOR: #3C5028; 
	TEXT-DECORATION: underline;
}

A.indyleftcolumn:active {
	COLOR: #3C5028; 
	TEXT-DECORATION: none
}

P.indyleftcolumn {}

/* some special classes that are composed from the column class */
P.indyleftcolumn-date {
	text-align: center;
	margin-top: 2px;
	margin-bottom: 2px;
}

P.indyleftcolumn-context {
	text-align: center;
	margin-top: 2px;
	margin-bottom: 2px;
	font-size: 0.8em;
}

p.indyleftcolumn-icons {
	text-align: center;
	margin-top: 0px;
	margin-bottom: 2px;
}

.indyleftcolumndate{
	font-size: 0.9em;
}

.indyleftcolumncomments{
	font-size: 0.85em;
	font-style: italic;
}

.indyleftcolumnauthor{
	font-size: 0.85em;
	font-style: italic;
}

.indyleftcolumnorganisation{
	font-size: 0.85em;
}

img.indyleftcolumn-thumbnail{
	border: 1px solid #3B5A3B; 
	margin: 4px auto 0px auto;
        text-align: center;
}



/* footer classes */

div.indyfooter {
	WIDTH: 100%;
	MARGIN: 1em 0px 0px 0px;
	PADDING: 0px;
	clear: both;
	/* border: #702B2E 1px solid; */
	background-color: #DFDFDF;
}

table.indyfooter {
	WIDTH: 100%;
	PADDING: 0px;
	MARGIN: 0px;
	BORDER: 0px;
	border-collapse: collapse;
}

tr.indyfooter {
	WIDTH: 100%;
	PADDING: 0px;
	MARGIN: 0px;
}
td.indyfooter {
	PADDING-left: 0.5em;
	PADDING-right: 0.5em;
	FONT-SIZE: 0.9em;
	MARGIN: 0px;
	vertical-align: middle;
}


/* inset box classes */
div.indy-insetbox {
	float: right;
	width: 200px;
	position: relative;
	margin: 24px 0px 8px 4px;
	background-color: #DFDFDF;
	border:#702B2E 2px solid;
	clear: right;
	padding: 4px;
}

P.indy-insetbox{
	font-size: 0.85em;
}

span.indy-insetboxcomments
{
	font-style: italic;
}

A.indy-insetbox:link {
	COLOR: #702B2E;
	TEXT-DECORATION: none
}

A.indy-insetbox:visited {
	COLOR: #702B2E;
	TEXT-DECORATION: none
}

A.indy-insetbox:hover {
	COLOR: #702B2E;
	TEXT-DECORATION: underline;
}

A.indy-insetbox:active {
	COLOR: #702B2E;
	TEXT-DECORATION: none
}


/* some div-based pages here */
/* this should work for an 800px width pure css based page layout - nice */

div.indypagediv {
	WIDTH: 800px;
	PADDING: 0 0 0 0;
	margin-left: auto;
   margin-right: auto;
  	HEIGHT: 100%;
  	border: #B8f8B8 2px solid;
}

div.indypagediv-body {
	PADDING: 0 0 0 0;
 	margin-left: auto;
 	margin-right: auto; 	
 	margin-top: 20px;
	background-color: #fff;
	line-height: 130%;
	height: 100%;
}

div.indymainpanediv { 
	PADDING: 0 20px 0 20px;
 	margin-left: 140px;
 	margin-right: 160px;
 	background-color: #fff;
	line-height: 130%;
	height: 100%;
}


div.indyrightdiv {
	WIDTH: 150px;	
	BACKGROUND-COLOR: #97B697;
 	float: right;
	margin: 0;
	padding: 0.5em;
	height: 100%;
}

div.indypagecontents {
	BACKGROUND-COLOR: #FFF;
	height: 100%;
	margin-left: 120px;
	margin-right: 140px;
	PADDING: 0.5em 5em 0.5em 5em;
}

div.indyleftdiv{
	BACKGROUND-COLOR: #97B697;
	WIDTH: 130px;
   float: left;
   PADDING: 0.5em 0.2em 0.5em 0.4em;
	height: 100%;
}