/*Styled and commented by Joel Friesen, Jan 03, 2007 SageInternet.com*/
/*additional styles by Andrew Quinton, Jan 09, 2007 SageInternet.com*/

html{
	margin:0; 
	padding:0;
	height:100%;
	width:100%;
	background-color:#000;}

body {
	background-color:#FFF;
	width:100%;
	margin:0px; 
	padding:0px; 	
	height:100%;
	}
/* 	
	DNN 4.3 default messes with the body tag in bad ways, you have to put the 
	background stuff on this element below. Putting anything on the body tag above will be
	reflected in the "Edit Text" box. eg: I put a black background up there, then 
	when you edit the text in DNN, you'll be editing on a black box. So keep it nice
	and light, and edit the one below. - JF
*/

#pagewrapper { 								
	padding:15px 0 0 0; 
	margin:0;
	
	/*This bit here will make the wrapper stretch the legnth of the page 
		and not just to the height content. - JF*/
	min-height:100%;          
	height:auto !important;
	height:100%;
	background-color:#000;
	}
	
/* DIV LAYOUT ================================================================================================================================*/

/*page width, either pixles or a percentage - JF*/
.center {width:700px;}

.center {margin-left:auto; margin-right:auto; display:block; }
.tablecenter {margin-left:auto; margin-right:auto; width:700px;}

/*div wrappers*/
.header, .footer, .nav { float:left; display:block; width:100%; background-color:#000000; text-align: center;}
.main { float:left; display:block; width:100%; margin-bottom:0; background-color:#000000; text-align: center;}

.footerleft { padding: 0 0 0 20px; text-align:left; background-color: #111;}
.footerright { padding:0 10px; text-align:right; background-color: #111; width:45px; height: 30px;}
td.footerright a:link, td.footerright a:visited, td.footerright a:hover, td.footerright a:active {color: #444; font-weight: normal; font-size: 10px;}

.header{ z-index:99}
.header .center {height:58px; background:url(images/header.jpg) left top no-repeat; color:#EEE;}

.nav .center {background-color:#ddd;}

.main .center {
	padding:0;
	background-image: url(images/subbg_nocolumn.gif);
	background-repeat: repeat-y;
	background-position: center top;
}
.main .center .flashpane { padding:0; margin:0; width:700px; text-align:left; overflow:hidden; padding:0; border-bottom:#444 1px solid;}
.main .center .flashpane table, .main .center .flashpane td, .main .center .flashpane tr, .main .center .flashpane div{ padding:0; margin:0; }
.main .center .contentpane { padding:5px; margin:5px; width:100%; text-align:left;}
.main .center .leftpane{ padding:5px; margin:5px; width:60%; text-align:left;}
.main .center .rightpane{ padding:5px; margin:5px; width:38%; text-align:left;}

.footer .tablecenter{ background-color:#000; padding:0; border-top:#444 1px solid; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;}
.footer .tablecenter, .footer .tablecenter span {color:#AAA;}
.footer .tablecenter a {color:#AAA;}
.footer .tablecenter a:hover {color: #EEE;}

#sagefooter {color:#777; text-align: right; padding: 5px 0;}
#sagefooter a:link, #sagefooter a:active, #sagefooter a:visited, #sagefooter a:hover {
	text-decoration:none;
	color:#777;
	font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;
	background-color: inherit;
	}
/*.staff {float: left; padding: 3px 15px 15px 0;}*/
.formtable {text-align: left;}
.formtable td {padding: 6px; text-align: left;}
	.formtable .normal {display: none;}
.formtable  A.CommandButton:link,
.formtable  A.CommandButton:visited,
.formtable  A.CommandButton:active {color: #111; padding: 7px; text-decoration: none; background-color: #ddd;}
.formtable  A.CommandButton:hover {color: #333; padding: 7px; text-decoration: none; background-color: #fff;}

/* FONTS =====================================================================================================================================*/

/* text style used for most text rendered by modules */
.Normal,.NormalDisabled,.NormalBold,.NormalTextBox,.NormalRed {font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color:#EEE; line-height:140%;} /*All Fonts - JF*/
.Normal,.NormalDisabled {font-weight: normal;}
.NormalDisabled{color: Silver;}
.NormalBold{font-weight: bold}


/* text style used for textboxes in the admin and edit pages, for Nav compatibility */
.NormalTextBox { font-weight:normal; font-size:10px; color: #000}

/* text style used for error messages */
.NormalRed{ font-weight:bold; color: #ff0000 }

/* style for module titles NOTE: This can be overwriten for specific containers in the container css. - JF */
.Settings .Head   {font-weight:bold; font-family:"Times New Roman", Times, serif; color:#ddd; padding:8px; }
/* style of item titles on edit and admin pages */
.SubHead  {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #EEE;}
.SubHead img{ background-color:#DDD;}
/* module title style used instead of Head for compact rendering by QuickLinks and Signin modules */
.SubSubHead {font-family: Tahoma, Arial, Helvetica; font-size:11px; font-weight:bold; color: #FFF;}

th {color: #fff; font-size: 10px; text-align:right; padding-right: 7px;}

/* hyperlink style for buttons and link buttons used in the portal admin pages */
A.CommandButton:link,
A.CommandButton:visited,
A.CommandButton:active,
A.CommandButton:hover {color: #eee;}

/* Everyday Regular Links */
A:link  		{color: #bbbbbe; text-decoration: underline;}
A:visited   {color: #bbbbb9; text-decoration: underline;}
A:active    {color: #bbbbb9; text-decoration: underline;}
A:hover 		{color: #ccccca; text-decoration: none;}

iframe{ width:100%;}

label{ color: #EEE; }

/*The Top bar in administration Mode*/
.ControlPanel{ background-color:#444; border:#000000; padding-bottom:15px;}
.ControlPanel img{ background-color:#FFF; padding:5px;}

.DataGrid_Header { color:#EEE;}
.DataGrid_Item td { background:#999;}

/*MENU=========================================================================================================================================*/

/*These two define the bar itself. the height, and the background colour. */
.MainMenu_MenuContainer {
	background-color: transparent; /*these should be left transparent if you want to colour the submenus a different colour than the main menu*/
	padding-left: 8px;
}

.MainMenu_MenuBar {
	cursor: pointer; 
	cursor: hand;
	height:20px;
	background-color: Transparent; /*these should be left transparent if you want to colour the submenus a different colour than the main menu*/
}

.MainMenu_MenuContainer td {padding-left: 4px; padding-right: 4px;}

/*MainMenu_MenuItem is the container for each text link in the drop down bar 

note that when you hover over this item the TOP and BOTTOM borders dissappear.

A Background colour change here affects all the menus. including the main-root unless you
make changes to the TD as I have done below... This stops the main menu from getting accidentally styled*/

.MainMenu_MenuItem {
	cursor: pointer; 
	cursor: hand; 
	color: #666; 
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 7pt; 
	font-weight: normal; 
	font-style: normal; 
	border-left: white 0px solid; 
	border-bottom: #DDD 1px solid;   	/*These need to be the same colour as the flyout bg colour below or you get that funky border*/
	border-top: #DDD 1px solid; 			/*These control the border in the middle. The border vanishes after you hover over it*/
	border-right: white 0px solid;
	background-color: Transparent;
	height: 20px;
}


/* This is for the Icon. I think that you have to style this like 
the text link above even if the icon is not shown because the table
it sits in is still going to get rendered.*/
.MainMenu_MenuIcon {
	cursor: pointer; 
	cursor: hand; 
	background-color: #DDD; 
	border-left: #DDD 1px solid;      /*These need to be the same colour as the flyout bg colour below or you get that funky border*/
	border-bottom: #DDD 1px solid; 		/*These control the border on the left hand side. The border vanishes after you hover over it*/
	border-top: #DDD 1px solid; 			/*These need to be the same colour as the flyout bg colour below or you get that funky border*/
	text-align: center; 
	width: 15px; 
	}


/* This guy here is for the actual drop down or flyout. 
If you put a border around it, you'll get a 
border around the whole thing The background doesn't seen to matter as long as 
you have styled the texlink and icon above.*/
.MainMenu_SubMenu {
	z-index: 1000; 
	cursor: pointer; 
	cursor: hand; 
	background-color: #DDD;   /* Sub Menu Background Colour */
	filter:progid:DXImageTransform.Microsoft.Shadow(color='DimGray', Direction=135, Strength=3); 
	border-bottom: #FFFFFF 0px solid; 
	border-left: #FFFFFF 0px solid; 
	border-top: #FFFFFF 0px solid; 
	border-right: #FFFFFF 0px solid;
}

/* This styles the menu break. as in a set space between two menu items, not a border. 
But in the main menu there is no break. It's probably ok to leave it like this.*/
.MainMenu_MenuBreak {
	border-bottom: #EEEEEE 1px solid; 
	border-left: #EEEEEE 0px solid; 
	border-top: #EEEEEE 1px solid;  
	border-right: #EEEEEE 0px solid; 
	background-color: #EEEEEE;  
	height: 24px;
}

/* This is the HOVER state for the flyout's text, icon and arrow, it is also the hover for the main menu bar.*/
.MainMenu_MenuItemSel {
	cursor: pointer; 
	cursor: hand; 
	color: #000; 
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	font-size: 7pt; 
	font-weight: normal; 
	font-style: normal;
	background-color: #ddd; /*flyout background hover colour*/
	height: 20px;  /*needs to match the main menu bar height, or you get squishy menus. you don't want that...*/
}

/* These style that pesky little bit of border that dissappears when you hover over it.
Change the border colour to match the background colour and you should be cool
changing the size of the border will make a mess of it.*/
.MainMenu_MenuArrow {
	font-family: webdings; 
	font-size: 10pt; 
	cursor: pointer; 
	cursor: hand; 
	border-right: #DDD 1px solid;     /*These need to be the same colour as the flyout bg colour below or you get that funky border*/
	border-bottom: #DDD 1px solid;    /*These control the border on the right hand side. The border vanishes after you hover over it*/
	border-top: #FFFFFF 0px solid;
}
.MainMenu_RootMenuArrow {
	font-family: webdings; 
	font-size: 10pt; 
	cursor: pointer; 
	cursor: hand;
}