/*
This is the stylesheet for MonsterMazuma.com. Please credit us if you borrow any of it.
It should go in order of the html flow, from the top section to the content, then the sidebar, then the footer.
*/

/* #############################Generic sections #############################*/
.hide {display: none;}
body {background: #dedede; padding: 0px; margin: 0px;}
h1 {
font-size: 1.2em;
position: relative;
left: 0px;
color: #a00;
}
.pointeight {
font-size: 0.8em;
}
/*Custom submit button*/
input.submit {
border: 3px double #f00;
border-top-color: #a00;
border-left-color: #a00;
padding: 0em;
background-color: #d00;
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;
}

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

/* #############################Top Sections #####################################*/
/*The monster logo, absolutely positioned over everythign
#spare1 {
position: absolute;
margin-top: 2px;
margin-left: -20px;
z-index: 1000;
background: url('./lady.png') top left no-repeat;
width: 266px;
height: 146px;
}
*/
/* topblock container div*/
#intro {
background: #f0f0f0;
padding: 0px;
margin: 0px;
}
/* This is the text logo 'mazumasupport', 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 {
z-index: 1;
padding: 0px;
height: 44px;
width: 100%;
background: transparent url('./logrepbg.gif') top left repeat-x;
}
#logo h1 {
z-index: 200;
float: right;
margin: 0px 50px 0px 0px;
padding: 0px;
height: 44px;
width: 330px;
background: url('./mazsuplogo.gif') top left no-repeat;
}
* html #logo h1 {margin-right: 25px;}
#logo h1 span {display: none;}

/* The 'sign up' link gets its own bar */
#signup {
text-align:right;
position: relative;
margin: 0px 0px 0px 0px;
padding: 12px 0px 2px 0px;
width:100%;
background: #1C7B20;
font-size:83%;
line-height:normal;
}

#signup a {
background: #006B04;
margin: 0px 10px 0px 0px;
padding: 1px;
color: #fff;
text-decoration: none;
font-size: 80%;
}

#signup a:hover {
text-decoration: underline;
}
/*#############################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;
position: relative;
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
width:100%;
background: #006B04 url("./bg.gif") repeat-x bottom;
font-size:63%;
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 0;
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;
background:url("./left.gif") no-repeat left top;
margin:0;
padding:0 0 0 12px;
}
#topmenu li#left {
background:url("./fleft.gif") no-repeat left top;
}
#topmenu li#rcurrent {
float:left;
background:url("./rleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 12px;
}
#topmenu #current {
background-image:url("./left_on.gif");
}

/* The link contains the right hand side of the tab, and can expand accordingly. 
Again, different backgrounds for the active and far-right tab*/
#topmenu a {
float:left;
display:block;
background:url("./right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
font-family: verdana, arial, sans-serif;
color:#000;
}
#topmenu a#right {
background:url("./fright.gif") no-repeat right top;
padding:5px 35px 4px 6px;
}
#topmenu #current a {
background-image:url("./right_on.gif");
color:#f00;
padding-bottom:3px;
}
#topmenu #current a#right {
background-image:url("./fright_on.gif");
padding-bottom:4px;
}
/* Placed at the bottom in case of poor inheritance support in some browsers */
#topmenu a:hover {
text-decoration: underline;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#topmenu a {float:none;}
/* End IE5-Mac hack */


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

/*Search Bar*/
#sbar {
height: 60px;
background: #f0f0f0;
}
/* the following is to feed info just to IE to correct its box model */
* html #sbar {
height: 35px;
}
#searchdiv {
width: 200px;
margin: 2px 5px 2px 0px;
padding: 2px 0px 2px 5px;
float: right;
background: #a0a0a0;}

/* Breadcrumb bar*/	
#breadcrumb {
float: left;
position: relative;
background: #ccc; 
width: 100%;
font-size: 0.6em;
font-weight: bold;
}
/*Breadcrumb formatting of right-arrow*/
#breadcrumb .rar {
background: #fff;
color: #f00;
}
#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;
 background: #fff;
 padding: 10px 0px 0px 50px;
 font-size: 12px;
}
* html #mainContent {height: 290px;}

#pagebody {background: #fff; width: 100%;}

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

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

 .sider {
border: 1px solid #D3E4D4;
padding: 0px 0px 10px 0px;
background: #F3F7F3;
}
.sider h4 {
padding: 0px 0px 0px 15px;
margin: 0px 0px 10px 0px;
background: #76AC7A;
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('./fentry.gif') top left no-repeat;
}
 /*#############################Footer#############################*/
 #footerBlock {
font-size: 0.7em;
clear: both; 
background: #E3E2C8; 
padding: 5px 0px 0px 0px;
margin: 0px 0px 0px 0px;
color: #000;
}

#footer {
position: relative;
background: #fff; 
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
color: #000;
width: 100%;
font-size: .6em;
}
#footer ul {background: #006B04;padding: 5px 0px 5px 40px; margin: 0px 0px 0px 0px;}
#footer ul li {display: inline;}
#footer li a {
margin: 0px;
padding: 5px 5px 5px 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: 5px;
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('./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('./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('./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('./faqicon.gif') top left no-repeat;
}
.indexgfx li a.mem {
background: transparent url('./membericon.gif') top left no-repeat;
}
.indexgfx li a.ff {
background: transparent url('./fficon.gif') top left no-repeat;
font-size: .8em;

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

.indexgfx li a.bil {
background: transparent url('./faqicon.gif') top left no-repeat;
}
.indexgfx li a.video {
background: transparent url('./faqicon.gif') top left no-repeat;
}
.indexgfx li a.join {
background: transparent url('./faqicon.gif') top left no-repeat;
}
.indexgfx li a.nav {
background: transparent url('./faqicon.gif') top left no-repeat;
}
.indexgfx li a.monkey {
background: transparent url('./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;
border-bottom: 2px solid #ee0;
background: transparent url('./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('./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('./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('./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('./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('./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('./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('./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('./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('./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('./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('./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('./onestar.gif');}