html{
	margin:0; 
	padding:0;
	height:100%;
	width:100%;}

body {
	background-color:#FFF;
	height:100%;
	width:100%;
	margin:0px; 
	padding:0px; 	
	}
	
/* 	
	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
*/

#wrapper {	
	margin:0;
	padding: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:#990000;
	background-image:url(images/background.jpg); 
	background-position:top; 
	background-repeat:repeat-x;
	}
	
/* DIV LAYOUT =====================================================================================================================================*/

/*page width, either pixles or a percentage*/
.center, .topbar, .navcenter {width:765px;}

.center {background-color:#FFFFFF; margin-left:auto; margin-right:auto; }
.topbar {margin-left: auto; margin-right:auto; overflow:hidden; text-align:right; color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:10px}
.navcenter {margin-left: auto; margin-right:auto; background-image:url(images/navbg.gif); background-repeat:repeat-x; 
						width:764px; border-right:#790505 1px solid; background-position:top; background-color:#DDD; text-align:left;}

/*div wrapers*/
.header, .main, .footer  { float:left; display:block; width:100%; text-align:center;}

.header{}
.header .center {height:66px; background-image:url(images/header.jpg); background-position:top right; background-repeat:no-repeat; color:#345; text-align:left; }

.main { margin-bottom:10px;}
.main .center {border-top:#790505 1px solid; background-color:#FFFFFF;  background-image:url(images/mainbg.jpg); background-repeat:repeat-y; background-position:top left}
.content { width:98%; margin-top:8px; text-align:left; margin-left:auto; margin-right:auto;}

.footer{}
.footer .center{ background-color:#DDDDDD; border-bottom:#b1b1b1 1px solid;}

.copyrightbar {padding: 10px 0;}
/* LAYOUT SPECIFICS =====================================================================================================================================*/
.logospan{float:left; padding:2%; text-align:center;}
.loginbarspan{float:right; text-align:right; padding:2%}
.user, a:link.user, a:active.user, a:visited.user, a:hover.user { color:#FFF; }
.login, a:link.login,  a:active.login, a:visited.login, a:hover.login  { color:#FFF;}

/*Normal Must be Capitalized!*/
.Normal,.NormalDisabled, .NormalBold, .NormalRed, .NormalTextBox {	
	font-family:Arial, Helvetica, sans-serif;
	line-height:140%; 
	font-size:80%;  }
	
.Normal a:link, .Normal a:visited, .Normal a:active, 
a:link.Normal ,  a:visited.Normal,  a:active.Normal{color:#992525; text-decoration:none;}
a:hover.Normal,.Normal a:hover{color:#B94545; text-decoration:underline;}

.displaytable {border:#871F1C solid 1px; width:80%;}
.displaytable th {background-color:#D7D2BE;}
.displaytable tbody {background-color:#F7F2DE;}
.displaytable td {text-align:left;}
	
.wineproduct { list-style-type:none; border:#871F1C solid 1px; width:80%; padding:10px; margin:0; background-color:#F7F2DE; }
.wineleft { float:left; padding:0; margin:0; font-weight:bold; display:block;}
.wineright { float:right; padding:0; margin:0; display:block; font-weight:bold;}
.winedescription { clear:both; border-bottom:#CCCCCC 1px solid; margin-bottom:10px; padding-bottom:10px; list-style-type:none; text-align:left;}

iframe{width:100%; height:450px;}
/* PANES =====================================================================================================================================*/

.dualleftpane{ width:20%;}
.dualcenterpane{ width:80%;}

.leftpane{ width:20%;}
.rightpane{ width:20%;}
.centerpane{width:60%;}
.contentpane {width:100%;}

/* SOLPART MENU CSS =====================================================================================================================================*/ 
/*Based on DEFAULT.CSS these are
designed to overwrite Default's css
===== THIS MENU IS FOR HORIZONTAL WITHOUT AN IMAGE ROLLOVER ON  THE MAIN BAR*/

/*These two define the bar itself. the height, and the background colour. */
.MainMenu_MenuContainer {
	background-color: transparent; 	
}

.MainMenu_MenuBar {
	cursor: pointer; 
	cursor: hand;
	height: 28px;
	background-color: Transparent;
}

/*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 {
	color: #222; 
	border-left: #CBA8A3 0px solid; 
	border-bottom: #CBA8A3 1px solid; 
	border-top: #CBA8A3 1px solid; 
	border-right: #CBA8A3 0px solid; 
	background-color: #transparent;
}

/* 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 {
	background-color: #CBA8A3; 
	border-left: #CBA8A3 1px solid; 
	border-bottom: #CBA8A3 1px solid; 
	border-top: #CBA8A3 1px solid;
	text-align: center; 
	width: 15px; 
	height: 21px;
}


/* 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; 
	background-color: #CBA8A3; 
	border-bottom: #CBA8A3 1px solid; 
	border-left: #CBA8A3 1px solid; 
	border-top: #CBA8A3 1px solid; 
	border-right: #CBA8A3 1px 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: #CBA8A3 0px solid; 
	border-left: #CBA8A3 0px solid; 
	border-top: #CBA8A3 0px solid;  
	border-right: #CBA8A3 0px solid; 
	background-color: transparent; 
	height:28px
}

/* This is the HOVER state for the flyout's text, icon and arrow*/
.MainMenu_MenuItemSel {
	color: #FFF; 
	background-color: #990000; /*flyout background hover colour*/
	border-bottom: #CBA8A3 1px solid; 
	border-left: #CBA8A3 0px solid; 
	border-top: #CBA8A3 1px solid;  
	border-right: #CBA8A3 0px solid; 
}

/* This is styles 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;  
	border-right: #CBA8A3 1px solid; 
	border-bottom: #CBA8A3 1px solid; 
	border-top: #CBA8A3 0px solid;
}

.MainMenu_RootMenuArrow {
	font-family: webdings; 
	font-size: 10pt; 
	cursor: pointer; 
}

/* SAGE FOOTER =====================================================================================================================================*/ 
#sagefooter, #sagefooter a:link, #sagefooter a:active, #sagefooter a:visited, #sagefooter a:hover
 {
	text-decoration:none;
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif; font-size:10px;
	background-color: inherit;
	text-align:center;
	}