
/* -------------------------------------------------- */
/* Town of Devon - DNN Horizontal Menu Skin           */
/* by Kelly Oltean - http://www.WebmontonMedia.com    */
/* -------------------------------------------------- */

/* ------------------------------- */
/* Global */
/* ------------------------------- */

html {height:100%;}
body {height:100%; margin:0px; background-color:#026F99; color:#444444;}

/* ------------------------------- */
/* Heading elements */
/* ------------------------------- */

P, p, TD, td, LI, li, Normal, normal {font-family:Verdana, Arial, Sans-Serif; font-size:12px;}

.H1, h1 {font-size:18px; font-weight:bold; color:#444444; font-family:Verdana, Arial, Sans-Serif;}
.H2, h2 {font-size:16px; font-weight:bold; color:#444444; font-family:Verdana, Arial, Sans-Serif;}
.H3, h3 {font-size:14px; font-weight:bold; color:#444444; font-family:Verdana, Arial, Sans-Serif;}

.H1Gold {font-size:18px; font-weight:bold; color:#EBAB00; font-family:Verdana, Arial, Sans-Serif;}
.H1DkBlue {font-size:18px; font-weight:bold; color:#0070B2; font-family:Verdana, Arial, Sans-Serif;}
.H1LtBlue {font-size:18px; font-weight:bold; color:#00A7D4; font-family:Verdana, Arial, Sans-Serif;}
.H1Green {font-size:18px; font-weight:bold; color:#51A13E; font-family:Verdana, Arial, Sans-Serif;}
.H1Gray {font-size:18px; font-weight:bold; color:#7F7F7F; font-family:Verdana, Arial, Sans-Serif;}
.H1Red {font-size:18px; font-weight:bold; color:#A13E40; font-family:Verdana, Arial, Sans-Serif;}

.H2Gold {font-size:16px; font-weight:bold; color:#EBAB00; font-family:Verdana, Arial, Sans-Serif;}
.H2DkBlue {font-size:16px; font-weight:bold; color:#0070B2; font-family:Verdana, Arial, Sans-Serif;}
.H2LtBlue {font-size:16px; font-weight:bold; color:#00A7D4; font-family:Verdana, Arial, Sans-Serif;}
.H2Green {font-size:16px; font-weight:bold; color:#51A13E; font-family:Verdana, Arial, Sans-Serif;}
.H2Gray {font-size:16px; font-weight:bold; color:#7F7F7F; font-family:Verdana, Arial, Sans-Serif;}
.H2Red {font-size:16px; font-weight:bold; color:#A13E40; font-family:Verdana, Arial, Sans-Serif;}

.H3Gold {font-size:14px; font-weight:bold; color:#EBAB00; font-family:Verdana, Arial, Sans-Serif;}
.H3DkBlue {font-size:14px; font-weight:bold; color:#0070B2; font-family:Verdana, Arial, Sans-Serif;}
.H3LtBlue {font-size:14px; font-weight:bold; color:#00A7D4; font-family:Verdana, Arial, Sans-Serif;}
.H3Green {font-size:14px; font-weight:bold; color:#51A13E; font-family:Verdana, Arial, Sans-Serif;}
.H3Gray {font-size:14px; font-weight:bold; color:#7F7F7F; font-family:Verdana, Arial, Sans-Serif;}
.H3Red {font-size:14px; font-weight:bold; color:#A13E40; font-family:Verdana, Arial, Sans-Serif;}

/* ------------------------------- */
/* Control panel styles */
/* ------------------------------- */

.ControlPanel, .PagingTable {width:100%; background-color:#EDEDED; border:#5D5D5C 1px solid;}

/* ------------------------------- */
/* Outer Div, contains OuterTable */
/* ------------------------------- */

.OuterDiv
{
    background-image:url(bg01.jpg);  /* background left side graphic */
    background-repeat:no-repeat;
    background-color:Transparent;
    width:100%;
    height:100%;
    padding:20px 0px 0px 0px;
    border:0px solid red;  /* for visibility only .. set to 0px for production */
}

.OuterDiv2
{
    background-image:url(bg01.jpg);  /* background right side graphic */
    background-repeat:no-repeat;
    background-position: right top; 
    background-color:Transparent;    
    width:100%;
    height:auto;
    padding:0px 0px 0px 0px;
    border:0px solid blue;  /* for visibility only .. set to 0px for production */
}

/* ------------------------------- */
/* OuterTable, contains page rows, header, menu, content, footer */
/* ------------------------------- */

.OuterTable
{
    background-color: Transparent;
    width:980px; /* adjust minimum page width, % or px */
    border:#ffffff 0px solid;  /* for visibility only .. set to 0px for production */
}

/* ------------------------------- */
/* Header Row */
/* ------------------------------- */

.HeaderTD
{   
   height:139px; /* adjust height of header, including menu bar */
}

.HeaderDiv1 /* backgrounds */
{ 
   height:100%;   
}

.HeaderDiv2  /* backgrounds */ 
{      
   height:100%;   
}

.HeaderDiv3  /* backgrounds */
{
   height:100%;   
}

.HeaderDiv4  /* backgrounds and positioning */
{
   position:relative;   
   height:100%;   
}

/* ------------------------------- */
/* PNG header graphics */
/* ------------------------------- */

/* header general */                .header_cells_table {position: absolute; top:0px; left:0px; width:100%; height:139px;}  
/* background top left */           .header_cell01 {background-image:url(header_left01.png); background-repeat:no-repeat; width:950px;}
/* background for stretch */        .header_cell02 {background-image:url(header_top.png); background-repeat:repeat-x; width:auto;}
/* background top right */          .header_cell03 {background-image:url(header_right.png); background-repeat:no-repeat; background-position:right top; width:30px;}

/* ------------------------------- */
/* Header contents */
/* ------------------------------- */

.LogoTable
{
    position:absolute;
    width:290px;
    height:100px;
    top:28px;
    left:22px;
    border:0px solid red;  /* for visibility only .. set to 0px for production */   
}

.LogoTD
{

}

/* ------------------------------- */

.HeaderPaneTable
{
    position:absolute;
    width:400px;
    height:30px;
    top:28px;
    right:230px;
    border:0px solid red;  /* for visibility only .. set to 0px for production */
}

.HeaderPane
{
    padding-top:5px;
    color:#FFFFFF;
    font-size:11px;
}

.HeaderPane a:link, .HeaderPane a:visited, .HeaderPane a:active
{
    color:#FFFFFF;
 }
 
.HeaderPane a:hover
{
    color:#FFFFFF;
}
 

/* ------------------------------- */

.Translator_Div /* container for object */
{
    position:absolute;
    top:60px;
    right:40px;
    width:160px;
    font-weight:normal;
    font-size:11px;
    text-align:right;    
}

.DATE_Div /* container for object */
{
    position:absolute;
    top:150px;
    right:40px;
    width:160px;
    font-weight:normal;
    font-size:11px;
    text-align:right;    
}

.DATE_obj /* direct class of object */
{    
    color:#AAA9A7;
}

/* ------------------------------- */ 

.USER_LOGIN_Div /* User and Login Div, container for both objects */
{
    position:absolute;
    top:115px;
    right:24px;
    text-align:right;
    font-weight:normal;
    font-size:11px;
    width:280px;
    border:0px solid red;   /* for visibility only .. set to 0px for production */ 
}

a.USER_obj:link, a.USER_obj:visited, a.USER_obj:active /* direct class of object */
{
  color:#74B9D9; 
}

a.USER_obj:hover
{
  color:#FFFFFF;
}

/* ------------------------------- */

a.LOGIN_obj:link, a.LOGIN_obj:visited, a.LOGIN_obj:active /* direct class of object */
{
  color:#74B9D9;
}

a.LOGIN_obj:hover
{
  color:#FFFFFF;
}

/* ------------------------------- */
    
.BREADCRUMB_Div /* container for object */
{
    position:absolute;
    top:111px;
    left:30px;
    text-align:left;
    font-weight:normal;
    font-size:11px;
    width:100%;
    color:#AAA9A7;    
}

a.BREADCRUMB_obj:link, a.BREADCRUMB_obj:visited, a.BREADCRUMB_obj:active  /* direct class of object */
{
    color:#AAA9A7;
    font-weight:bold;
}

a.BREADCRUMB_obj:hover
{
    color:#0682B4;
    font-weight:bold;
    text-decoration:underline;   
}

/* ------------------------------- */

.SEARCH_Div /* container for object */
{
    position:absolute;
    top:30px;
    right:40px;
    font-weight:normal;
    font-size:12px;
    color:#74B9D9;
    z-index:1000;
}

a.SEARCH_obj:link, a.SEARCH_obj:visited, a.SEARCH_obj:active /* direct class of object */
{
    color:#74B9D9;
    font-weight:bold;
    /* border-top:1px solid #333333;
    border-right:1px solid #666666;
    border-bottom:1px solid #999999;
    border-left:1px solid #333333;
    padding:2px 6px 2px 6px;
    background-image:url(menu_idle.jpg);*/
}

a.SEARCH_obj:hover
{
    color:#FFFFFF;
    text-decoration:underline;
}

/* ------------------------------- */
/* Menu Container and placement */
/* ------------------------------- */

.MenuBannerTD
{
    height:auto;
    width:100%;
}

.MenuDiv1
{
    background-image:url(page_bk_left.png);
    background-repeat:repeat-y;
    background-position:left top;
    height:100%;
    width:100%;    
}

.MenuDiv2
{
    background-image:url(page_bk_right.png);
    background-repeat:repeat-y;
    background-position:right top;
    height:100%;
    width:100%;
}

.MenuDiv3
{
    width:auto;
    height:100%;    
    padding:0px 18px 0px 18px; /* further adjust padding of nav group placement */
   
}
.MenuDiv4
{
   width:100%;
   height:auto; /* must use use "auto" here for firefox */
}

/* ------------------------------- */

.ImagePaneTable
{
   width:100%;   
   border:0px solid red;  /* for visibility only .. set to 0px for production */
   background-color:#FFFFFF;
}

.HeaderPane
{
   width:100%;
   height:auto;
}

/* ------------------------------- */

/* ------------------------------- */
/* Solpartmenu options (colors, hover, etc) appears at end of the css */
/* ------------------------------- */

/* ------------------------------- */
/* Content Left Column */
/* ------------------------------- */

.ContentLeftTD 
{
    background-color:Transparent;
    height:100%;
    width:auto; /* width of left column. Note actual usable size of column is less LR padding value ex.(10L + 10R) of ContentLeftDiv4, so 310 here = 290 usable */
}

.ContentLeftDiv1
{
    background-image:url(page_bk_left.png);
    background-repeat:repeat-y;
    background-position:left top;
    background-color:Transparent;
    height:100%;
    width:100%;
}

.ContentLeftDiv2
{
    background-image:url(page_bk_right.png);
    background-repeat:repeat-y;
    background-position: right top;
    background-color:Transparent;
    height:100%;
    width:100%;
}

.ContentLeftDiv3
{
    height:100%;
    width:auto;
    padding:0px 18px 0px 18px;
}

.ContentLeftDiv4
{
    height:100%;
    width:100%;
    border:0px solid green; /* for visibility only .. set to 0px for production */
    /* padding:50px 10px 10px 24px;  apply padding here to adjust placement of Content Left Table/Pane */
    position:relative;
    background-color:White;
}

/* ------------------------------- */
/* Panes table for Larger Column */
/* ------------------------------- */

.ContentInnerTable 
{
    width:100%;
    height:250px; /* provide minimum height for content area */
    /*background-color:#FFFFFF;*/
}

.ContentInnerTD
{
  padding:10px 20px 20px 20px; /* Adjust content area padding */
  width:100%;
}

/* ------------------------------- */

.ContentPaneTable /* Content Panes, do not specify widths for these panes unless absolutely neccessaary, content should flow naturally */
{
    width:100%; /*Set minimum width of content pane, forces page width */
    text-align:left; 
}

.TopPane
{
    padding:0px 0px 5px 0px;
    background-color:Transparent;
    width:100%;
}

.LeftPane
{
    padding:0px 5px 5px 0px;
    background-color:Transparent;
}

.ContentPane
{
    padding:0px 5px 5px 5px;
    background-color:Transparent;
}

.RightPane
{
    padding:0px 0px 5px 5px;
    background-color:Transparent;
}

.MiddlePane
{
    padding:0px 0px 5px 0px;
    background-color:Transparent;
}

.LeftPane2
{
    padding:0px 0px 5px 0px;
    background-color:Transparent;
}

.ContentPane2
{
    padding:0px 5px 5px 0px;
    background-color:Transparent;
}

.RightPane2
{
    padding:0px 0px 5px 5px;
    background-color:Transparent;
    width:20%;
}

.LeftPane3
{
    padding:10px 5px 5px 0px;
    background-color:Transparent;
    width:20%;
}

.ContentPane3
{
    padding:0px 0px 5px 5px;
    background-color:Transparent;
}

.RightPane3
{
    padding:0px 0px 5px 0px;
    background-color:Transparent;
}

.BottomPane 
{
   padding:0px 0px 5px 0px;
   background-color:Transparent;
}

/* ------------------------------- */
/* Content Right Column - deleted from ascx for admin or wide skin */
/* ------------------------------- */

.ContentRightTD 
{
    background-image:url(page_bk_right.png);
    background-repeat:repeat-y;
    background-position: right top;
    background-color:Transparent;
    height:100%;    
}

.ContentRightDiv1 /* backgrounds */
{
    height:100%;
    width:100%;
}

.ContentRightDiv2 /* backgrounds */
{
    height:100%;
    width:100%;
}

.ContentRightDiv3  /* backgrounds */
{
    height:100%;
    width:auto;
    padding:0px 18px 0px 0px;
}

.ContentRightDiv4  /* backgrounds and positioning */
{
    height:100%;
    width:auto;
    position:relative;
    border:0px solid blue;  /* for visibility only .. set to 0px for production */
    background-color:White;
    padding:10px 20px 20px 10px;
    text-align:right;
}

.ContentRightColumn /* table to hold right column pane */
{
    width:300px;
}

.RightColumnPane /* pane for right column content */
{
}

/* ------------------------------- */
/* Bottom Row */
/* ------------------------------- */ 

.BottomTD
{
    height:auto;  /* must define pixel height for Opera */
    width:100%;
    background-color:Transparent;
}

.BottomDiv1 /* backgrounds */
{ 
   background-image:url(page_bk_left.png);
   background-repeat:repeat-y;
   background-position:left top;   
   height:100%;
   width:100%; 
} 

.BottomDiv2 /* backgrounds */
{
   background-image:url(page_bk_right.png);
   background-repeat:repeat-y;
   background-position:right top;   
   height:100%;
   width:100%;
}

.BottomDiv3  /* backgrounds and positioning */
{ 
   height:100%;
   width:auto;
   padding:0px 18px 0px 18px;
}

.BottomDiv4  /* backgrounds and positioning */
{ 
   background-image:url(footer_banner.png);
   background-position:right top;
   height:180px;
   width:100%;
   position:relative;   
}

/* ------------------------------- */

.BottomPane2Table
{
   position:absolute;
   top:62px;
   left:10px;
   width:800px;
   height:100px;
   border:0px solid red;  /* for visibility only .. set to 0px for production */
}

.BottomPane2
{
   width:100%;
   height:auto;
}

/* ------------------------------- */
/* Footer Row */
/* ------------------------------- */ 

.FooterTD
{
    height:30px;  /* must define pixel height for Opera */
    background-color:Transparent;

}

.FooterDiv1 /* backgrounds */
{ 
   height:100%;
   width:100%; 
} 

.FooterDiv2 /* backgrounds */
{
   height:100%;
   width:100%;
}

.FooterDiv3  /* backgrounds and positioning */
{ 
   height:100%;
   width:100%;
}

.FooterDiv4  /* backgrounds and positioning */
{ 
   height:100%;
   width:100%;
   position:relative;
}

/* ------------------------------- */
/* PNG footer graphics */
/* ------------------------------- */

.footer_cells_table
{
    width:100%;
    height:100%;
}  

.footer_cell01
{
   background-image:url(footer_left.png); /* background top left */ 
   background-repeat:no-repeat;
   background-position:left bottom;
   width:76px;
   }
   

.footer_cell02
{
   background-image:url(footer_mid.png); /* background for stretch */
   background-repeat:repeat-x;
   background-position:left bottom;
   width:auto;
}

.footer_cell03
{
   background-image:url(footer_right.png); /* background top left */ 
   background-repeat:no-repeat;
   background-position:right bottom;
   width:78px;
}

/* ------------------------------- */
/* Footer contents */
/* ------------------------------- */

.COPYRIGHT_Div /* container for object */
{
    font-size:11px;
    font-weight:normal;
    position:absolute;
    text-align:left;
    top:87px;
    left:30px;
    width:300px;
}

.COPYRIGHT_obj /* direct class of object */
{      
    color:#74B9D9;
} 

/* ------------------------------- */ 

.TERMS_PRIVACY_Div /* Terms and Privacy Div, container for both objects */
{
    position:absolute; 
    top:87px;
    right:30px;
    font-size:11px;
    text-align:right;
    font-weight:normal;
}

a.TERMS_obj:link, a.TERMS_obj:visited, a.TERMS_obj:active /* direct class of object */
{
    color:#74B9D9;
}
    
a.TERMS_obj:hover
{
    color:#FFFFFF;
}

/* ------------------------------- */

a.PRIVACY_obj:link, a.PRIVACY_obj:visited, a.PRIVACY_obj:active /* direct class of object */
{
    color:#74B9D9;
}
    
a.PRIVACY_obj:hover
{
    color:#FFFFFF;
}

/* ------------------------------- */
/* Footer Logos */
/* ------------------------------- */

.AlbertaLogo {position:absolute; left:20px; top: 35px;}
.CanadaLogo {position:absolute; right:20px; top:40px;}
.WMLogo {position:absolute; top:87px; left:410px; font-size:11px; padding-bottom:10px;}
.WMLogo a:link, .WMLogo a:visited, .WMLogo a:active {color:#74B9D9;}
.WMLogo a:hover {color:#FFFFFF;}

/* ------------------------------- */
/* Main Menu - default classes */
/* ------------------------------- */

.MainMenu_MenuContainer
{
	background-color: transparent;
	background-image:url(menu_bk.jpg);
	background-position:left top;
	width:auto; /* forces column width */
	height:39px;
}

.MainMenu_MenuItem  /* idle, applys to all menu items, root and sub */
{
	color:#0682B4;
	background-image:url(sub_menu_idle01.jpg);
	font-family:Verdana, Arial, Tahoma; 
	font-size:11px;
	font-weight:normal;
	height:25px; 
	font-style: normal; 
    border-left: #FFFFFF 0px solid;     
	border-bottom: #C2C2C2 1px solid;  
	border-top: #FFFFFF 0px solid;      
	border-right: #C2C2C2 0px solid;    
	background-color: #DDDDDD;
}

.MainMenu_MenuIcon  /* placement in stylesheet matters, bg colors react differently */   
{
	background-color: #0682B4;
	background-image:url(sub_menu_hover01.jpg); 
	border-left: #C2C2C2 0px solid; 
	border-bottom: #C2C2C2 1px solid; 
	border-top: #FFFFFF 0px solid;
	border-right:0px solid #C2C2C2; 
	text-align: center; 
	width: 25px; 
	height: 25px;
	padding:0px;
}

.MainMenu_MenuItemSel  /* hover, applys to all menu items, root and sub */
{
    color:#FFFFFF;
    background-image:url(sub_menu_hover01.jpg);
	font-family:Verdana, Arial, Tahoma;
	font-size:11px;
	font-weight:normal;
	font-style: normal;
	height:25px;
	background-color: #0682B4;
	border-left: #C2C2C2 0px solid; 
	border-bottom: #C2C2C2 1px solid; 
	border-top: #C2C2C2 0px solid; 
	border-right: #FFFFFF 0px solid;
}

/* ------------------------------- */

.MainMenu_SubMenu /* sub menu container */
{ 
    z-index: 1000; 
    filter:progid:DXImageTransform.Microsoft.Shadow(color='DimGray', Direction=135, Strength=3); 
    border-bottom: #C2C2C2 1px solid; 
	border-left: #C2C2C2 0px solid; 
	border-top: #C2C2C2 1px solid; 
	border-right: #C2C2C2 0px solid;
}

/* ------------------------------- */

.MainMenu_RootMenuArrow, .MainMenu_RootMenuArrow td /* arrow to subs */
{
	font-family:Verdana, Arial, Tahoma;
	font-size: 16px; /* no apparent effect */
    background-position:right top;
    padding:0px 10px 0px 0px; 
	height:25px;
	border-right: #C2C2C2 0px solid; 
	border-bottom: #C2C2C2 0px solid; 
	border-top: #FFFFFF 0px solid;
	border-left: #FFFFFF 0px solid;

	
}

.MainMenu_MenuArrow /* arrow to sub subs */
{
	font-family:Verdana, Arial, Tahoma;
	font-size: 16px; /* no apparent effect */
	border-right: #C2C2C2 1px solid; 
	border-bottom: #C2C2C2 1px solid; 
	border-top: #FFFFFF 0px solid;
	border-left: #FFFFFF 0px solid;
	padding:0px 0px 0px 5px;
	
}

/* ------------------------------- */

.MainMenu_MenuBreak  /* container for separator elements, must have width to display contents */
{
	border-bottom: #EEEEEE 0px solid; 
	border-left: #EEEEEE 0px solid; 
	border-top: #EEEEEE 0px solid;  
	border-right: #EEEEEE 0px solid; 
	background-color: #EEEEEE; 
	width: 1px;
}

/* ------------------------------- */
/* Root Menu - additional classes */
/* ------------------------------- */

.MainMenu_RootMenuItem /* idle */
{
   background-image:url(menu_idle01.jpg);
   background-position:left top;
   background-color:Transparent;
   font-weight:normal;
   font-size:12px;
   text-align:left;
   height:39px;
   color:#0682B4;
}

.MainMenu_RootMenuItemActive /* current page */
{    
   background-image:url(menu_hover01.jpg);
   background-color:Transparent;
   font-weight:normal;
   height:39px;
   color:#FFFFFF;
}

.MainMenu_RootMenuItemSelected /* hover */
{
   background-image:url(menu_hover01.jpg);
   background-color:Transparent;
   font-weight:normal;
   height:39px;
   color:#FFFFFF;
}

.MainMenu_RootMenuItemBreadCrumb /* breadcrumb to current page */
{
   background-image:url(menu_hover01.jpg);
   background-color:Transparent;
   font-weight:normal;
   height:39px;
   color:#FFFFFF;
}

/* ------------------------------- */
/* Sub Menu - additional classes */
/* ------------------------------- */

.MainMenu_SubMenuItemActive, .MainMenu_SubMenuItemActive .MainMenu_MenuIcon /* current page */
{
    background-color:#0682B4;
    background-image:url(sub_menu_hover01.jpg); 
    color:#FFFFFF;
}

.MainMenu_SubMenuItemActive .MainMenu_MenuIcon /* for particular behavior */
{
    border-left: #0682B4 1px solid;
    background-image:url(sub_menu_hover01.jpg); 
}

.MainMenu_SubMenuItemBreadCrumb, .MainMenu_SubMenuItemBreadCrumb  .MainMenu_MenuIcon /* breadcrumb */ 
{
    background-color:#0682B4;
    background-image:url(sub_menu_hover01.jpg); 
    color:#FFFFFF;
}

.MainMenu_SubMenuItemBreadCrumb  .MainMenu_MenuIcon /* for particular behavior */
{
    border-left: #0682B4 1px solid;
    background-image:url(sub_menu_hover01.jpg); 
}

/* ------------------------------- */
/* ChildList - additional classes - believed to be unused */
/* ------------------------------- */

.ChildList_Vert {border:0px solid blue; padding:0px;}
.ChildList_DataList {border:0px solid red; width:97%;}
.ChildList_Box {border-top:1px solid #E1E1E1; border-right:1px solid #BEBDBD; border-bottom:1px solid #BEBDBD; border-left:1px solid #E1E1E1; background-image:url(e_btn.jpg); background-repeat:no-repeat; margin:0px; width:180px; padding:5px 4px 5px 35px; background-color:silver;}
.ChildList_Link {}
