/* #############################EDITABLE FOR SKIN####################### */
body {
background: #6482AD;
}
a {
color: #87c43d;
}

h5 {
margin: 0;
color: #000;
font-size: 2em;
position: relative;
top: 50px;
left: 10px;
border: solid 0px #000000;
display: none;
}

/*######START OF MAIN CONTENT BACKGROUND COLORS#######*/
#container {
background: #fff;
}
#mainContent {
background: #fff;
}
#sidebar {
background: #fff;
}
#topmenu {
background: #fff;
}
#sbar {
background: #fff;
}
#pagebody {background: #fff;}
* html .minwidth {border-left:705px solid #fff;}
#searchdiv {
background: #fff;
}
/*######END OF MAIN CONTENT BACKGROUND COLORS#######*/

/* Float Logo  -- enable in index.php */
#logo img {
position: relative;
z-index: 200;
margin: 0px 0px -100px 400px;
padding: 0px;
}

/* Main Header */
#logo {
background: #000 url('./common/logrepbg.gif') top left no-repeat;
height: 70px;
}

/* Small bar */
#footer ul {background: #7C95BA}

/* Footer */
#footer {background: #fff; }

#breadcrumb {
background: #7C95BA; 
}
/* breadcrumb arrow */
#breadcrumb .rar {
background: #7C95BA;
color: #fff;
}

#container {
/* for flex width 
width: 80%;
min-width: 705px;
*/
width: 800px;
}


/*Custom submit button*/
input.submit {
border: 3px double #7C95BA;
border-top-color: #7C95BA;
border-left-color: #7C95BA0;
padding: 0em;
background-color: #7C95BA;
color: #fff;
font-size: 75%;
font-weight: bold;
font-family: Verdana, Arial, sans-serif;
}
input.submit:active {
border: 3px double #a00;
border-top-color: #f00;
border-left-color: #f00;
}

/* Sidebar header color */
.sider h4 {
background: #7C95BA;
}

/* Menu Colors */
#topmenu ul li {
/*border: solid 1px #0f0;
background: #ddd;*/
}

#topmenu ul li a {
color: #7C95BA;
font-size: 0.6em;
font-weight: bold;
text-decoration: none;
/*background: #efe;*/
}

#topmenu ul li a:hover {
color: #000;
/*background: #000;*/
}

.sresitem {
border-bottom: 2px solid #7C95BA;
}

/*#################END OF MAIN SKINNING##################*/
/*#################*/
/*#################*/
/*#################*/


/* #############################Generic sections #############################*/
body { padding: 0px; margin: 0px;text-align: center;overflow-y:scroll;}
h1 {
font-size: 1.7em;
left: 0px;
color: #7C95BA;
}
.clear {
clear: both;
}
.pointeight {
font-size: 0.8em;
}


/*The following allows for a fluid layout with a minimum width, functioning in IE as well.*/
#container {
text-align: left;
margin: 0px auto 0px auto;
padding: 0px;
font-family: verdana, arial, sans-serif;
}
* html .minwidth {position:relative; float:left; z-index:1;}
* html .mincont {margin-left:-705px; position:relative; float:left; z-index:2;}

/* #############################Top Sections #####################################*/

/* This is the text logo, as well as the background wavy line thingy.
I have the two as separate so the wavy lines can expand with the fluid layout */
#logo {
padding: 0px;
margin: 0px;
width: 100%;

}



/*#############################TABS#############################*/
/* A lot of the work for the tabs is done by the php. It designates the current tab, the left and right tabs.
We need to know the far left and right as we have overlapping tabs, which throws a bit of a spanner in the standard method.
The css then takes these to apply the relevant tab images */

/* The holding div */
#topmenu {
float:right;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
width:60%;

font-size:123%;
line-height:normal;
}
* html #topmenu {margin: 0px 0px 0px 0px;}

/* configure the unordered list to float right without bullets */
#topmenu ul {
margin:0px 1px 0px 0px;
padding:0px 0px 0px 0px;
list-style:none;
float:right;
}
* html #topmenu ul {
margin: 0px;
}
/* The left hand side of the tab - note different for the far left as there is no overlap 
and different also for the tab to the right of the active tab, as the overlap is different colour*/
#topmenu li {
float:left;
display: block;
margin:5px;
padding:0 0 0 0;
}

#topmenu ul li {
display: inline-block;
}


/*#############################Rest of header#############################*/

/*Search Bar*/
#sbar {
height: 35px;
margin-top: 5px;
}
/* the following is to feed info just to IE to correct its box model */
* html #sbar {
height: 35px;
}
#searchdiv {
width: 250px;
margin: 2px 5px 2px 0px;
padding: 2px 0px 2px 5px;
float: left;
}

/* Breadcrumb bar*/	
#breadcrumb {
float: left;
position: relative;

width: 100%;
font-size: 0.5em;
font-weight: bold;
}
/*Breadcrumb formatting of right-arrow*/

#breadcrumb a, #breadcrumb a:active, #breadcrumb a:focus {
text-decoration: none;
color: #000;
}

 #breadcrumb a:hover {
 text-decoration: underline;
 }

 #mainContent {
 float: left;
 clear: both;
 position: relative;
 margin: 0;
 width: 60%;
 min-height: 320px;
 padding: 10px 0px 0px 50px;
 font-size: 12px;
}
* html #mainContent {height: 290px;}

#pagebody {width: 100%;}

 /*############################# Sidebar#############################*/

#sidebar {
padding: 20px 5px 20px 5px;
width: 212px;
float: right; 
min-height: 280px; 
 }
* html #sidebar {height: 280px;}
#sidebar a img {border: none;}

 .sider {
border: 1px solid #cccccc;
padding: 0px 0px 10px 0px;
background: #e4e4e4;
}
.sider h4 {
padding: 0px 0px 0px 15px;
margin: 0px 0px 10px 0px;

color: #fff;
font-size: 80%;
}
.sider a {
 font-family: arial, sans-serif;
 font-size: 10px;
 }
#side1 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#side1 a{
padding: 0px 0px 0px 20px;
margin: 0px 5px 0px 5px;
width: 178px;
height: 30px;
display: block;
text-decoration: none;
border-bottom: 1px solid #D3E4D4;
color: #000;
background: transparent url('./common/fentry.gif') top left no-repeat;
}
 /*#############################Footer#############################*/
#footer {
clear: both; 

padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
color: #000;
width: 100%;
font-size: .6em;
}
#footer ul {padding: 5px 0px 5px 40px; margin: 0px 0px -10px 0px;}
#footer ul li {display: inline;}
#footer li a {
margin: 0px;
padding: 5px 5px 0px 5px;
background: #006B04;
font-family: verdana, arial, sans-serif;
font-size: 1.1em;
color: #fff;
border-right: solid 1px #fff;
text-decoration: none;
}

#footer li a:hover {
text-decoration: underline;
}

#rolling {
text-align: center;
background: #fff;
height: 0px;
margin: -15px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-top: solid 1px #fff;
border-bottom: solid 1px #fff;
}
* html #rolling {
margin: 0px 0px 0px 0px;
}
.banner {
float: left;
display: block;
background: none;
width: 210px;
height: 30px;
padding: 5px 3px 3px 5px;
margin: 5px 0px 0px 5px;
}

* html .banner {
padding-right: 0px;
padding-left: 10px;
}

.banner img {
border: solid 4px #a0a0a0;
margin: 0px 10px 0px 0px;
height: 30px;
}

/*#############################Page Specific#############################*/
 
/*Formatting of input forms (used for email form and add form)*/
#inputform {margin: 0px 0px 20px 0px;}
#formhold div.row {  clear: both;
  padding-top: 5px;}
#formhold span.label { float: left;
  width: 25%;
  text-align: right;
  margin-left: -50px;}
#formhold span.field {float: right;
  width: 80%;
  text-align: left;
  } 
 #formhold span#alert {
  text-align: center;
  font-size: 0.8em;
  color: #f00;
  } 
.radedit {
margin: 0px 15px 0px 15px;
}

.error {
color: #f00; font-size: 0.8em; font-weight: bold;
}

#fresults {
font-size: 0.8em;
}

#fresults small {
color: #c00;
}

#fresults a, #fresults a:hover, #fresults a:link, #fresults a:active, #fresults a:visited {
color: #000;
text-decoration: none;
display: block;
float: right;
width: 90%;
}

#fresults a:hover {
background: url('./common/fentry.gif') top left no-repeat #e7f7e7;
}

#fresults small {
font-weight: bold;
}

#fresults div {
}

div#abocont {padding: 10px;}
div.aboentry {
float: left;
margin: 20px 0px 0px 0px;
width: 215px;
height: 80px;
font-size: 1em;
font-weight: bold;

}

* html div.aboentry {margin-left: -10px;}

.aboentry a {
color: #000;
}

.aboentry img {
border: none;
margin-bottom: -40px;
}

/* the different coloured rows in the FAQ topic display page*/
.ra {
background: #f7f7f7 url('./common/fentry.gif') top left no-repeat;
padding: 3px 0px 5px 25px;
border: solid 1px #a7a7a7;
margin: -1px 0px 0px 0px;
}
* html .ra {height: 13px;}

.rb {
background: #e7e7e7 url('./common/fentry.gif') top left no-repeat;
padding: 3px 0px 5px 25px;
border: solid 1px #a7a7a7;
margin: -1px 0px 0px 0px;
}
* html .rb {height: 13px;}

/* The icons for the main page and the FAQ page*/


.indexgfx li {
list-style: none;
float: left;
}

.indexgfx li a {
padding: 40px 0px 0px 0px;
margin: 20px 20px 5px 0px;
height: 50px;
width: 80px;
display: block;
text-decoration: none;
color: #000;
}
.indexgfx li a:hover {
text-decoration: underline;
}
.clear {clear: left;}

.indexgfx li a.faq {
background: transparent url('./common/faqicon.gif') top left no-repeat;
}
.indexgfx li a.mem {
background: transparent url('./common/membericon.gif') top left no-repeat;
}
.indexgfx li a.ff {
background: transparent url('./common/fficon.gif') top left no-repeat;
font-size: .8em;

}
.indexgfx li a.ie {
background: transparent url('./common/ieicon.gif') top left no-repeat;
font-size: .8em;
}

.indexgfx li a.bil {
background: transparent url('./common/faqicon.gif') top left no-repeat;
}
.indexgfx li a.video {
background: transparent url('./common/faqicon.gif') top left no-repeat;
}
.indexgfx li a.join {
background: transparent url('./common/faqicon.gif') top left no-repeat;
}
.indexgfx li a.nav {
background: transparent url('./common/faqicon.gif') top left no-repeat;
}
.indexgfx li a.monkey {
background: transparent url('./common/faqicon.gif') top left no-repeat;
}



#sresults {
padding: 0px 10px 20px 10px;
font-size: 0.9em;
}
#sresults .srestit {
font-size: 1em;
color: #c00;
}

#sresults a.srestit, #sresults a.srestit:hover, #sresults a.srestit:link, #sresults a.srestit:active {
color: #c00;
text-decoration: none;
}

#sresults a.srestit:hover {text-decoration: underline;}

#sresults .srestop {
float: right;
font-size: 1em;
color: #0c0;
}

#sresults a.srestop, #sresults a.srestop:hover, #sresults a.srestop:link, #sresults a.srestop:active {
color: #080;
text-decoration: none;
}

#sresults a.srestop:hover {text-decoration: underline;}

.sresitem {
height: 25px;

background: transparent url('./common/fentry.gif') top left no-repeat;
padding: 5px 0px 5px 25px;
}
/* The FAQ box formatting*/
#ftitle {
margin: 0px auto 0px auto;
color: #030;
font-size: 1.1em;
background: #e7e7e7 url('./common/i.png') 10px 3px no-repeat;
font-weight: bold;
border: solid 1px #a7a7a7;
text-align: center;
padding: 2px 0px 2px 0px;
}

#fcont {
border: solid 1px #a7a7a7;
border-top: none;
padding: 15px 10px 5px 10px;
margin: 0px 0px 0px 0px;
background: #ffffff;
min-height: 150px;
}

* html #fcont {
height: 150px;
}

#fcont ul {
list-style-image: url('./common/fentry_2.gif');
}

#ratbox {
text-align: center;
background: #fafffa;
border: solid 1px #a7a7a7;
border-top: none;
padding: 5px;
margin: 0px 0px 10px 0px;
font-weight: bold;

}
/* End of FAQ box formatting*/

#search, #searchbox {

padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
float: left;
}

/* Below is the rating device - the 9 sliding gold stars.*/

ul#rating{
	margin: 0px auto 0px auto;
	padding: 0;
	background: transparent url('./common/nostar.gif') top left no-repeat;
	height: 12px;
	width: 90px;
	position: relative;
	list-style: none;
}

ul#rating li{ margin: 0; padding: 0; position: absolute;  font-size: 85%; }

li#ninstarDef{ top: 0px; left: 0px; }
li#ninstarDef a{ position: absolute; width: 90px; height: 12px; text-decoration: none; }
li#ninstarDef a span{ display: none; }
li#ninstarDef a:hover{ position: absolute; background: transparent url('./common/ninstar.gif'); }


li#eigstarDef{ top: 0px; left: 0px; }
li#eigstarDef a{ position: absolute; width: 80px; height: 12px; text-decoration: none; }
li#eigstarDef a span{ display: none; }
li#eigstarDef a:hover{ background: transparent url('./common/eigstar.gif');}


li#sevstarDef{ top: 0px; left: 0px; }
li#sevstarDef a{ position: absolute; width: 70px; height: 12px; text-decoration: none;	}
li#sevstarDef a span{ display: none; }
li#sevstarDef a:hover{ background: transparent url('./common/sevstar.gif');}


li#sixstarDef{ top: 0px; left: 0px; }
li#sixstarDef a{ position: absolute; width: 60px; height: 12px; text-decoration: none; }
li#sixstarDef a span{ display: none; }
li#sixstarDef a:hover{ background: transparent url('./common/sixstar.gif');}


li#fivstarDef{ top: 0px; left: 0px; }
li#fivstarDef a{ position: absolute; width: 50px; height: 12px; text-decoration: none; }
li#fivstarDef a span{ display: none; }
li#fivstarDef a:hover{ position: absolute; background: transparent url('./common/fivstar.gif'); }


li#foustarDef{ top: 0px; left: 0px; }
li#foustarDef a{ position: absolute; width: 40px; height: 12px; text-decoration: none; }
li#foustarDef a span{ display: none; }
li#foustarDef a:hover{ background: transparent url('./common/foustar.gif');}


li#thrstarDef{ top: 0px; left: 0px; }
li#thrstarDef a{ position: absolute; width: 30px; height: 12px; text-decoration: none;	}
li#thrstarDef a span{ display: none; }
li#thrstarDef a:hover{ background: transparent url('./common/thrstar.gif');}


li#twostarDef{ top: 0px; left: 0px; }
li#twostarDef a{ position: absolute; width: 20px; height: 12px; text-decoration: none; }
li#twostarDef a span{ display: none; }
li#twostarDef a:hover{ background: transparent url('./common/twostar.gif');}


li#onestarDef{ top: 0px; left: 0px; }
li#onestarDef a{ position: absolute; width: 10px; height: 12px; text-decoration: none; }
li#onestarDef a span{ display: none; }
li#onestarDef a:hover{ background: transparent  url('./common/onestar.gif');}