/* xenoguppy template by Michael J Burton. 										*/
/* copyright and all that. This is a training template; 								*/
/* open it as wide as it will go if you want to see all the documentation 					*/
/* use it all you want, I tried to document as much as I could so you can see how stuff works 		*/
/* feel free to mutilate it, correct any mistakes in the comments, and redistribute freely 		*/
/* I only wish that others don't have to go through as much pain I did in building this 			*/
/* look in the .zip file, there is a joomla and css reference .doc in there. 					*/
/* it has some stuff I yoinked off the joomla boards and a css site 						*/
/* make sure to read the readme in the zip as well, it has hints and stuff.					*/
/* other great resources: http://www.compassdesigns.net/tutorials/ 						*/ 
/* and http://www.m65.net/articles-joomla!-knowledgebase-free-guide-to-joomla-css-51.html#1_1   	*/
/* Also make sure to check out Waseem Sadiq's Skeleton Template, it's also full of good stuff. 		*/
/* GET JOOMLA PC if you are planning on cusomizing or building a template. Saves time and energy!	*/
/* If you want, link back to my site, I'm making this optional since it's a writing magazine 		*/
/* http://turboguppy.com 													*/
/* hope the documentation helps! 												*/



/* ------------------- section styles and positions ---------------------------------------------*/
					/* use lots of space and comment as much as you need to make things easy to find later */
body {
	margin: 0;
	padding: 0;
	text-align: center; 	/* this isn't strictly needed it's just here so that ie6 plays nice and centers our screen */
}

#site{
	background: #000000;
	color: #000000;  		/* This allows the site name to be visible to search engines but not to the veiwer, allowing logo graphics instead, */
	font-size: 5px;			/* since the index.php pulls the site name from joomla and puts it at the top of the page, above everything*/
	text-align: left;	/* since I had to center in the body because of IE6 */
}
#wrap{
	width: 1000px;						/* sets the width of the site */
	font-family: Helvetica,Arial,sans-serif;     	/* Sets the default font and color for the site */
	margin: 0px 0px 0px 0px;				/* you can do this in each div, but if you put */
	font-size: 12px;						/* in in a div that contains all the others, */
	color: #000000;
	margin-right:auto;					/* this sets the site to center, for browsers that understand */
	margin-left:auto;
	background-color: #000000;
}
#header{				/* color is the font color for the style; use #hex (#ffffff), color name (white), rgb(255,255,255 or 100%,100%, 100%)*/
	color: #FFFFFF;		/* you can look up the names of the colors most browsers will accept on the web. */
	height:120px;		/* allows the header pic to fit with room to spare.  you can set height and width for a specific pic */
	background: #000000 url(../images/header.PNG) no-repeat;		/* this is the site logo */
	width:100%;									/* notice the caps in the PNG... screwed up when saving it...yeah */
}
#navbar{					/* this is the space between the header and the main content, holds the search, topmenu and breadcrumb */
	clear: both;
}
#mainbody{					/* the # marks the divs in the index.php.  you could also say div#mainbody{}, but it is not necessary. */
	width:100%;					/* makes the mainbody fill the entire width available */
	clear: both;
	background-color: #000000;
}
#leftmenu, #rightmenu, #footer {		/* you can combine multiple things on one line with a comma.  */
	background-color: #555555;
}
#topmodules{
	margin-bottom:auto;
	width:100%;
	max-width: 600px;		/*force size conformity for the latest and most read modules */
	height: auto;
	border: red;
	margin: 0px 0px 0px 0px;			/* margins and padding can be abbreviated: 1 entry for all sides, */
								/* 2 entries: top/bottom left/right, or 4 entries: top right bottom left */
}
#content60, #content80, #content100 {			/* these are from the conditional in the index.php file, making it possible to collapse the */
	background-color: #FFFFFF;
}
#content60 {
	float:left;
	width:60%;
	overflow:hidden;
}
#content80 {
	float:left;							/* content60, 80, and 100 are the settings for the conditions, namely, the content width*/
	width:80%;							/* depending on the presence of the right and left columns */
	overflow:hidden;						/* the if statements in the index.php file add the number to the div*/
}									/* which we then use for the different settings.  If the div doesn't exist, */
#content100 {							/* it will be ignored. */
	float:left;
	width:100%;
	overflow:hidden;
} 

#leftmenu{								/* set the left column to 20% of the total available width */
	float:left;
	width:20%;
	overflow:hidden;
	margin: 0px;
	padding: 0px;
	background-color: #666666;
}
#rightmenu{
	float:right;
	width:20%;
	overflow:hidden;
	margin: 0px;
	padding: 0px;
	background-color: #000000;
}
#footer{
	clear:both;							/* the clear command sets the side on which the div can have no companions. */
	text-align: center;					/* using it makes it so the footer doesn't try to squeeze onto the above lines */
	background: #000000;
	color: #333333;
}
.inside{					/* this is the class from the index.php: div<class="inside"> you can use this to apply styles to multiple divs */
	padding: 10px;			/* right in the index.php.  it makes some things easier, like adding padding to all the divs. */
}

/* -------------------------Basic typography ---------------------------------*/

h1{								/* css can define the style for all tags of the same type throughout the page */
	font-size: 1.7em;					/* here we are setting all the heading 1s (h1) to be size 1.7em or 1.7 times the */
}								/* normal size of the font.  You can do this in px (say 30 pixels) percent (170%) or */
h2{								/* pt (20 point). of course, we can change this for each div or item that we can */
	font-size: 1.5em;					/* set styles for; this is just the site default */
}
h3{
	font-size: 1.3em;						/* these styles are applied directly to html tags.  There are lots of good */
}									/* references on the internet if you don't already know basic html */
h4{
	font-size: 1.2em%;
}
h5{
	font-size: 1.1em;
}
h6{	
	font-size: 1em;
	font-weight: bold;				/* the following css font-weight: settings are available: normal, bold, bolder, lighter, 100, 200, */
}																		/* 300, 400, 500, 600, 700, 800, 900. */
p, div, span, table, td, th, ul, ol, li, {		/*allows us to set styles for most of the tags at once */

} 

label{
	color: #000000;
}

a, a:visited{
	color:#FF9900;
	text-decoration: none;			/* text-decoration refers to the underlining and such.  You can get the following: */
}							/* none, underline, overline, line-through, and blink. */
a:hover,a:active, a:focus{
	color:#FFFF00;
	text-decoration: none;
	font-weight: normal;
	background-color: #330100;
}



/* --------------------------- module positions and look -------------------------*/
#search{					/*user1*/
	float: left;
	padding: 2px 10px 4px 10px;
	background: url(../images/leftsearchbg.png) no-repeat top left;  /* adding the curved corner of the menu/search bar... the padding helps position */
	margin: 0px 0px 0px 0px;
	clear: both;
}

						/*user1 customized input box (you can customize any part of any div, i.e. h1, a, th, a:visited */
						/*by putting the div like #search (from the div<id="search" in the index.php) and the element */
#search input {				/*together: #search input {}  in this way you can control the style in each div individually */ 

	background:#997777 url(../images/icon-search.gif) no-repeat center right;
	border: none;
	margin: 2px 0px 2px 2px;	
}						/* in this case I've added a search icon to the field */

#topnav{					/*user2*/
	float:left;
	padding-right: 14px;
	padding-bottom: 4px;
	background: url(../images/rightmenubg.png) no-repeat top right; 	/* more chrome--the other curved end of the bar...*/
	margin: 0px;		
	border-right: #000000 solid 1px;						/* used a border to match with the menu */

}
#breadcrumbs{				/*breadcrumb*/			/*it took me a minute to realize what this was */
	float:left;									/*it's the thingie that shows you where you are */
	margin-top: 5px;								/*on the site, like home:news:current events */
	margin-left: 15px;							/*thought I'd explain if you're as slow as me :) */
	color: #D03333;								/*trail of crumbs, you know, like hansel and gretel...*/
}
#latest {					/*user3*/
	width: 50%;
	float: left;
}
#popular {					/*user4*/
	width: 50%;
	float: right;
}
#newsflash{					/*top*/
	width: 30%;
	color: #cccccc;
	float: right;
	overflow: hide;
	border: #500000 solid 1px;
	background: #000000;
	font-size: 10px;
}


/* ---------------- menu styles ---------------------------------*/
#topnav ul{
	padding:0px;
	margin:0px;
	list-style:none;
}
#topnav li{
	padding:0px;
	margin:0px;
	list-style:none;
	display:inline;					/* this is what makes this menu a one-liner instead of a list.  */
}
#topnav a:link, #topnav a:visited{
	color:#ffffff;
	display:block;
	float:left;
	padding:7px 10px 6px 10px;
	background:#500000;
	border-left: #000000 solid 1px;
	text-decoration: none;
}
#topnav a:hover, #topnav a:active, #topnav #current a, #topnav a:focus{
	color:#ffffff;
	background:#800000;
	text-decoration:none;
}

/*-------------------main _menu setup -----------  joomla allows you to put a suffix on modules.  go to any module's properties in joomla, */
									/* look under parameters, at the bottom there is a field for module class suffix. */
									/* we're defining it now; if you input: _menu, joomla looks in the template and sees */
									/* the style for this suffix, and applies it to the module.  This is another way */
									/* we can control individual module style. */
#mainlevel{
	padding: 0px;
	margin: 0px;
}						/* the mainlevel stuff here is to make the category and section blog menus behave */
#leftmenu .mainlevel {
	list-style: none;
}
.moduletable_menu h3{		/* h3 is the default heading for the _menu */
	font-weight: bold;
	text-align: center;
	color: #ffffff;
	padding-top: 5px;
	padding-bottom: 5px;
	margin: 1px 0px 0px 0px;
	border-top: #000000 1px solid 70%;
	background-color: #000000;
	background-image: url(../images/menubg.png);
	background-repeat: no-repeat;
	background-position: center;
}
.moduletable_menu{
	text-align: left;
	background: #000000 url(../images/menubottom.png) no-repeat center bottom;
	padding: 0px 0px 17px 0px;  /*adding the curved bottom to the main menu-- don't forget extra padding to make border! */
	margin: 0px;
}

.menu{				/* using .menu gives us a lot better control over the menu style, especially where submenus are concerned */
 	margin: 0px;
	padding: 0px;
	list-style:none;	/* shut off the default list style, the bullets */

}
.menu ul{ 
	margin-left: 10px;		/* the .menu ul and ul ul lets me set the margins and turn off the */
	padding: 0px;			/* padding built in to the menu levels */
}
.menu ul ul { 
	margin-left:10px;
	padding: 0px;

}

ul.menu li {
	padding: 0px; 	/* make sure there is no extra padding or margin hanging out */
	margin: 0px;	/* from some earlier style */
}
ul.menu li a:link, ul.menu li a:visited, #leftmenu a.mainlevel{
	background:#333333;
	color: #ffffff;
	display: block;
	padding: 3px 15px 3px 20px;			
	text-align: left;				
	font-weight: bold; 
	margin-left: 13px;				/* this provides the slimming in the menu items */
	margin-right: 13px;				/* the higher the number, the slimmer the items */
	border-top: #000000 solid 1px;
}
ul.menu li a:hover, ul.menu li a:focus, #leftmenu a.mainlevel:hover, #leftmenu a.mainlevel:focus {
   	background:#500000;
}
ul.menu .parent a {					/* these lines setup how the different levels of the menu behave */
   	color: #ffffff;					/* allowing the current menu to have a background but not forcing */
}								/* the formatting onto the child menu items.  you can also force the */
ul.menu #current a, 
#leftmenu #current #mainlevel a{			/* parent to have a different style from the children when the children */
   	background:#500000;				/* are the current active menu. */
}
ul.menu li.parent ul li a {
   		
}
ul.menu li#current ul li a {				/* even further down the list, how the sub sub menus behave */
   	background: #333333;
   	color: #ffffff;
}
ul.menu li#current ul li a:hover, ul.menu li#current ul li a:focus{
	background: #500000;
}




/* ----------------------right hand Modules Setup ------------------------------------ */


#rightmenu .moduletable h3{				/*using the #rightmenu before the .moduletable makes it so I can control only */
	font-weight: bold;				/*the styles for the .moduletable in the div id #rightmenu.  This means that */
	font-size: 12px;					/*other .moduletable styles throughout the site will be unaffected. */
	text-align: center;
	display: block;
	background: #500000;
	color: #fff;
	margin: -5px -5px 5px -5px;		/* this section pretty straightforward.  the -5px allows padding without */
	padding: 2px;				/* interupting the header from filling the top of the module */

}
#rightmenu .moduletable{
	text-align: left;
	background: #555555;
	padding: 5px;	
	margin: 0px 0px 5px 0px;
	border:1px solid #500000;
}
#rightmenu .moduletable ul{
	text-align: left;
	list-style: none;
	margin: 0px;
	padding: 0px;

}
#rightmenu .moduletable li{
	text-align: left;	
}
#rightmenu .modultable a{
	text-align: left;
}

/* --------------------------- most read and latest setup -------------------------*/


#topmodules .moduletable h3{			/* you should be starting to get the hang of this by now.  see if you can figure out */
	font-weight: bold;			/* what happens in this section. */
	font-size: 12px;
	text-align: center;
	display: block;
	background: #000000;
	color: #fff;
	margin: -5px -5px 5px -5px;		
	padding: 2px;				

}
#topmodules .moduletable{
	text-align: left;
	background: #330000;
	padding: 5px;	
	margin: 20px 20px 30px 20px;
	border-left: 1px solid #000;			/* the 3d sinking effect.  You can reverse it for the 3d raised effect */
	Border-top: 1px solid #000;		
	border-right: 1px solid #ccc;			/* short hand colors. */
	border-bottom: 1px solid #ccc;
}
#topmodules .moduletable ul{
	text-align: left;
	list-style: none;
}
#topmodules .moduletable li{
	text-align: left;	
}
#topmodules .modultable a{
	text-align: left;
}
.latestnews a, .mostread a {
	color: #cccccc;
}


/* --------------------Content Setup ------------------------------------------------------ */

.buttonheading img{			/* look these up in the reference files.  They are important for the look of your content */
	border:0px;
}
.popups{					/* still not exactly sure what this is */
	border:0px;
	
}
.message{
	background: #ffffff;
	color: #000000;
}
.componentpaneopen img,.hasTip img{		/* gets rid of the borders around the images, specifically I wanted this for the print/email/pdf icons */
	border: 0px;
}
.button, .validate{
	color: white;
	background: #666666;
	border-left: 1px solid #ffffff;
	Border-top: 1px solid #ffffff;		/* the 3d border effect.  You can reverse it for a 3d sink effect */
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
}
.readon{
	padding: 2px;
	margin-top: 10px;
	margin-bottom: 3px;
	background: #555555;
	border-right: 1px solid #000000;		/* this effect didn't render well in ie7 */
	border-bottom: 1px solid #000000;
	
}


.componentheading{			/* this is the heading at the top of the page */
	font-size: 1.7em;
	font-weight:bold;
	border-bottom: 1px solid #000000;
	margin-top: 10px;
}
.contentpagetitle{
	font-size: 1.5em;
	color: #0000ff;
}
.contentheading{
	font-size:1.5em;
	color: #ffffff;
	background: #500000;
	padding-left: 1em;
}
.contentpaneopen{
	padding: 10px 10px;
}
.contentpane{
	background: #777777;
	padding: 10px 10px;
}
.blog_more{
	border: 1px solid #000000;
	background: #500000;
	color: white;
}
.blog_more a{
	color: white;
}
.pagenavbar, .pagenav{
	text-align:center;
}

.small{
	font-size: 1.1em;
	font-weight: bold;
	color: #111111;
}
.createdate {
	font-size: .9em;
	color: #111111;
}
.modifydate {		
	font-size: .9em;
	color: #111111;
	padding-bottom: 10px;
}


#editor-xtd-buttons{
	padding: 5px;
}

.button2-left{						/* I had to do extra digging for this.  These control the buttons beneath the */
	float:left;						/* TinyMCE editor for adding images, a read more tag, and page breaks.  You */
	padding: 5px;					/* may also add url's like any button, and style as you like.  Looked this up in */
	margin: 5px;					/* the admin template.  Who woulda thunk it? */
}

.button2-left .image 		{ 
	background: #500000;
	border-left: 1px solid #ffffff;
	Border-top: 1px solid #ffffff;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	padding: 5px;
}
.button2-left .readmore 	{ 
	background: #500000;
	border-left: 1px solid #ffffff;
	Border-top: 1px solid #ffffff;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;	
	padding: 5px;
}
.button2-left .pagebreak 	{ 
	background: #500000;
	border-left: 1px solid #ffffff;
	Border-top: 1px solid #ffffff;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;	
	padding: 5px;
}

/* -------------------------table of contents stuff and other tables ---------------------------*/

.sectiontableheader{						/* all tables, such as the section table and the polls are affected by this */
	background:#500000;					/* though you could remove the formatting for the polls by using .polls .sectiontableentry1{} */
	height:30px;						/* quick note: only the rows of the polls are affected, not the .sectiontableheader */
	padding:0px 0px 0px 10px;				/* I'm not sure polls use the .sectiontable header. */
}

.sectiontableentry1, .sectiontableentry2{
	height:20px;
	padding:0px 0px 0px 10px;
	margin-left: 0px;
}
.sectiontableentry1{
	background: #333333;
	text-align:left;					/* this didn't appear to have any affect on the table data, see below */
}
.sectiontableentry2{
	background: #555555;
	text-align:left;
}

.sectiontableentry1 a, .sectiontableentry2 a{		/* adding spacing */
	padding: 0px 10px;
}

.sectiontableentry1 td,.sectiontableentry2 td{			/* force the table data to left in the section table entries */
	text-align: left;
}


.contenttoc th{					/* you can add a cool style to the Table of contents sections on your site */
	background: #500000;
	font-weight: bold;
	font-size: 1.2em;
	color: white;
	padding: 5px 40px;			/* heavily padded to allow it to be a wide format rather than too tight */
}
.contenttoc a{
	color: white;
	line-height: 1.7em;
	font-weight: bold;
	display: block;
	background: #555555;
	padding-left: 1em;
}
.contenttoc a:hover{				/* custom link colors... */
	color: white;
	background: #000000;
}
.contenttoc{					/* and of course default stuff ... */
	padding: 0px 5px;
	margin-bottom: 1px;
	border: 1px solid #000000;
	background: #500000;
}

/* -----------------------other assorted stuff -----------------------------------*/

#form-login fieldset{		/* this is the login form, we're shutting off the border that goes around it */
	border: none;
	padding: 5px;
}

.inputbox{				/* general color for the input boxes so they aren't glaring against the dark template */
	background: #cccccc;
	border: 1px #000000 solid;
}
.text_area{				/* color fix for text areas too... */
	background: #cccccc;
}

.poll {				/* for screwing around with the polls */
	color: white;
}
.pollstableborder{		*/ give a little breathing room */
	margin: 3px;
}

.adminform{}		/* for the fields of adminforms */

.mceToolbarContainer{			/* allows control of the toolbar for TinyMCE */
	background: #aaaaaa;
}
legend {					/* this is the text in the border;  ---- Editor -----  */
	border: #500000;
	color: #cccccc;
}
fieldset {					/* now we control the bordor holding the text */
	border:solid 2px #500000;
	padding:20px;
	margin:10px 0;
}
.content_rating{				/* breathing room */
	padding-bottom: 10px;
}

.bannerheader{				
	color: white;
}

/* -------------- Tooltips  ------------------- */

.tool-tip {					/* these are for the tooltip that pops up when you hover over the 'edit' icon */
	float: left;			/* when veiwing the site with editorial privelidges <sp?> */
	background: #500000;
	border: 1px solid #900000;
	padding: 5px;
	max-width: 200px;
	font-size: 1em;
}

.tool-title {
	padding: 0;
	margin: 0;
	font-size: 12pt;
	font-weight: bold;
	padding: 2px;
	padding-bottom: 5px;
	background: #900000;
	color: #fcfcfc;
}

.tool-text {
	font-size: 10pt;
	margin: 0;
	color: #fcfcfc;
}
.tooltip img{
	background: #000000;
}