/* 
   Font sizes all relative to the "body" tag below and by using "em" it means if the user increases the font size on the browser (DDA compliance)
   then the sizes increase on the site in proportion too.
*/
body { font-family: Verdana; font-size: .80em; background-color: #052e5a; background-image: url(images/template/pagebackground.gif); background-repeat: repeat-y; background-position:center;}

body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th {
	margin:0;
	padding:0;
}

table {border-collapse: collapse;}

#page {margin: 0 auto; width:940px; } 

/* NOTES:  */
/* - As layout is using DIVs, no need to set WIDTH=100% on any content regions/areas. */

/* Region: TOP MENU  */
#regTopMenuBar { clear: both; background-color:white; color: #cccccc; }
#regTopMenuBar .Logo { float: left; padding: 5px; height: 60px; color: Gray; font-size: 3em; vertical-align:middle;}
#regTopMenuBar .Logo a { text-decoration: none; color: Gray;}
#regTopMenuBar .ZijijiMeaning { float: right; font-family: Arial; font-size: .8em; color: Gray; text-align: right; padding: 15px 5px 0px;}
#regTopMenuBar .MenuLinks { clear: both; background-color:#052e5a; padding: 4px 5px 4px 5px;}
#regTopMenuBar .MenuLinks ul { display: inline; padding: 0px;}
#regTopMenuBar .MenuLinks ul li { display: inline; padding: 0px 5px 0px 5px; font-size: .9em}
#regTopMenuBar .MenuLinks a {color: white; font-weight: bold; text-decoration: none;}
#regTopMenuBar .MenuLinks a:hover {color:#eaeaea; text-decoration: underline;}

/* Region: FOOTER */
#regFooter {clear:both; font-size: .8em; color: gray; border-top: 1px solid #cccccc; padding: 8px 10px 8px 10px; height: 17px; }
#regFooter a {color: gray; font-weight: normal; text-decoration: none;}
#regFooter a:hover {text-decoration: underline;}
#regFooter .Copyright { float: left; }
#regFooter .MenuLinks { float: left; }
#regFooter .MenuLinks ul { display: inline; padding: 0px;}
#regFooter .MenuLinks ul li { display: inline; padding-left: 3px;}
#regFooter .DesignedBy { float: right;  }


/* Region: Middle bit encompassing left menu and body content (and right menu if appropriate) */
#regMainContent {clear: both; }
#regFixHeights { clear: both;} /*If you want a background on regMainContent to span the height of regBodyContent this is necessary. */

/* Region: Left hand menu/column */
#regLeftMenu {float: left; font-size: 1em; color: #44749D; width: 160px; min-height: 400px; padding: 5px 2px 5px 2px; }
#regLeftMenu a {color: black; text-decoration: none;}
#regLeftMenu h2 {font-size: .85em; font-weight: bold; color: white; padding: 2px 5px 2px 2px; background-color:#44749D; margin-top: 3px; }

#regLeftMenu .MenuItem { font-size: .85em; background-color: #dddddd; border: 1px solid gray; margin: 0px 0px 2px 0px; padding: 2px 0px 2px 3px; }
#regLeftMenu .MenuItem A { color:black; font-weight: normal; text-decoration: none;}
#regLeftMenu .MenuItem A:hover {text-decoration: underline;}

#regLeftMenu .subMenuItem { font-size: .8em; margin: 0px 0px 1px 0px; padding: 2px 4px 2px 8px; border-bottom: 1px solid #CBDAE6}
#regLeftMenu .subMenuItem A { color:black; font-weight: normal; text-decoration: none; }
#regLeftMenu .subMenuItem A:hover {text-decoration: underline; }

#regLeftMenu .menuItemsBox { padding: 0px 0px 10px 0px;}

/* Region: Right hand menu/column */
#regRightMenu {float: right; font-size: 1em; color: #44749D; width: 160px; padding: 0px 2px 5px 2px; }
#regRightMenu h2 {font-size: .85em; font-weight: bold; color: black; padding: 2px 5px 2px 4px; background-color:#cccccc; margin-top: 4px; }
#regRightMenu .rssIcons {font-size: .8em; margin: 10px 5px 10px 15px; }
#regRightMenu .rssIcons a {color: Gray; text-decoration: none;}
#regRightMenu .rssIcons a:hover {color: Gray; text-decoration: underline;}

/* Set main content width - if main content width should be 700, but there is 15 left and 15 right padding, then width should be set to 670...  */
#regBodyContent {float: left; width: 563px; font-size: .85em; padding: 10px 15px 20px 20px; }
#regBodyContent h1 {margin-top: 0px; margin-bottom: 5px; font-size: 1.7em; font-weight: bold; color: #333333}
#regBodyContent h2 {margin-top: 8px; margin-bottom: 3px; font-size: 1.5em; font-weight: bold; color: #444444;}
#regBodyContent h3 {margin-top: 8px; margin-bottom: 3px; font-size: 1.4em; font-weight: bold; color: #555555;}
#regBodyContent h4 {margin-top: 8px; margin-bottom: 3px; font-size: 1.3em; font-weight: bold; color: #666666;}

#regBodyContent a {text-decoration: underline; font-weight: bold; color: #F58027; }

#regBodyContent select {font-size: 1.1em; padding-left: 2px;}
#regBodyContent ul li {	 list-style-type: square; }
#regBodyContent input { border: 1px solid #9C9C9C; background-color: #FFFFFF; color: black; font-family: Verdana;}
#regBodyContent textarea { border: 1px solid #9C9C9C; background-color: #FFFFFF; color: black; font-family: Verdana;}

#regBodyContent .MessageToUser {font-weight: bold; color: red; padding-top: 5px; padding-bottom: 10px} 
#regBodyContent .breadcrumbtrail {padding-top:5px; padding-bottom:10px}
#regBodyContent .breadcrumbtrail A {color: #F8A261}
#regBodyContent .txtHighlight { border: 1px solid #CC0033; background-color: #F6FD8C; color: #000000;}
#regBodyContent .highlight {background-color:Yellow}
#regBodyContent .EnterData {margin: 10px 0px 5px 35px;}

/* Button styles */
#regBodyContent .button {font-size: 1em; font-weight: bold; color: #111111; padding: 5px;}
#regBodyContent .CancelButton {font-weight: normal; color: Red;}

/* datagrid styles */
#regBodyContent .datagrid .datagridHeader {background-color: #cccccc;font-weight: bold; margin-bottom: 10px;}
#regBodyContent .datagrid .datagridHeader   td { padding: 2px 4px 2px 4px;}
#regBodyContent .datagrid .datagridItem {background-color: #efefef; border-bottom: 1px solid #666666}
#regBodyContent .datagrid .datagridItem  td { padding: 2px 4px 2px 4px;}
#regBodyContent .datagrid .datagridAlternatingItem {background-color: #ffffff; border-bottom: 1px solid #666666}
#regBodyContent .datagrid .datagridAlternatingItem  td { padding: 2px 4px 2px 4px;}

/* Blog related styles... */  				  
#regBodyContent .BlogEntries p {padding-top: 0px; margin-top: 0px}
#regBodyContent .BlogEntries .blogPostTitle {padding-top: 5px;}
#regBodyContent .BlogEntries .blogPostTitle a {font-size: 1.2em; font-weight: bold;}
#regBodyContent .BlogEntries .blogDateFiled {color: Gray; padding-top: 2px; padding-bottom: 8px;}
#regBodyContent .BlogEntries .blogContent { padding-bottom: 10px;}   
#regBodyContent .BlogEntries .blogFooter {padding-bottom: 25px; border-bottom: 1px solid #cccccc; margin-bottom: 10px; }
#regBodyContent .BlogEntries .blogFooter .CommentSummary {float: left; width: 300px; display: inline; color: gray;  padding-top: 5px; }
#regBodyContent .BlogEntries .blogFooter .CommentSummary a {text-decoration: none; font-weight: normal; color: Gray;}
#regBodyContent .BlogEntries .blogFooter .SocialNetworking {float: right; display: inline; }
#regBodyContent .BlogEntries .blogNoEntries {margin-left: 15px; color: Navy; padding-top: 10px; }

#regBodyContent .BlogDetail .blogPostTitle {font-size: 1.2em; font-weight: bold;}
#regBodyContent .BlogDetail .blogDateFiled {color: Gray; padding-top: 2px; padding-bottom: 8px;}
#regBodyContent .BlogDetail .blogContent { padding-bottom: 5px;}   
#regBodyContent .BlogDetail .blogCategories { padding-top: 7px; color: #444444; margin-left: 20px; padding-bottom: 3px;}   
#regBodyContent .BlogDetail .blogFooter {padding-bottom: 5px; border-bottom: 1px solid #cccccc; }
#regBodyContent .BlogDetail .blogNoEntry {margin-left: 15px; color: Navy; padding-top: 10px; }
#regBodyContent .BlogDetail .SocialNetworking {padding-top: 0px; text-align: right}
#regBodyContent .BlogDetail .OtherRecentPosts {padding-top: 0px; padding-bottom: 5px;}
#regBodyContent .BlogDetail .OtherRecentPosts .ListPosts {margin-left: 20px; padding-bottom: 3px;}

#regMainContent .BlogDetail .Comments {padding-top: 0px;}
#regMainContent .BlogDetail .Comments .NoCommentsYet {color: #444444; padding-bottom: 5px;}
#regMainContent .BlogDetail .Comments .ListComments {margin-left: 0px; padding-bottom: 5px;}
#regMainContent .BlogDetail .Comments .ListComments .SpecificPost {padding: 7px 5px 7px 5px; margin-bottom: 12px; border: 1px solid gray; background-color: #FFFED0;}
#regMainContent .BlogDetail .Comments .ListComments .SpecificPost .CommentBy {font-size: .9em; color: black; padding-bottom: 5px; }
#regMainContent .BlogDetail .Comments .ListComments .SpecificPost .Comment {font-size: .9em; }
#regMainContent .BlogDetail .Comments .ListComments .SpecificPost .ModeratedReply {background-color: #F5FABD; }
#regMainContent .BlogDetail .Comments .ListComments .SpecificPost .ModeratedReply .ReplyComment { }
#regMainContent .BlogDetail .Comments .ListComments .SpecificPost .ModeratedReply .ReplyDatestamp { }

#regBodyContent .BlogDetail .Comments .leaveComment input {margin-left: 0px;}
#regBodyContent .BlogDetail .Comments .leaveComment .heading {color: #333333; font-weight: bold; padding-top: 4px; }


/* not within a region because you may want to put in in various places on the site */
.blogCategoriesBox {padding: 0px 0px 10px 0px;}
.blogCategoriesBox .blogCategoryItem {font-size: .85em; margin: 0px 0px 1px 0px; padding: 4px 0px 4px 3px; border-bottom: 1px solid #8485DF; }
.blogCategoriesBox .blogCategoryItem A { color:#444444; font-weight: normal; text-decoration: none;}
.blogCategoriesBox .blogCategoryItem A:hover {text-decoration: underline;}

.blogArchiveBox {padding: 0px 0px 10px 0px;}
.blogArchiveBox .blogArchiveItem {font-size: .85em; margin: 0px 0px 1px 0px; padding: 4px 0px 4px 3px; border-bottom: 1px solid #8485DF; }
.blogArchiveBox .blogArchiveItem A { color:#444444; font-weight: normal; text-decoration: none;}
.blogArchiveBox .blogArchiveItem A:hover {text-decoration: underline;}


/*Password Tool CSS */
#password_description {font-size: 10px; font-style: italic;  }
#password_strength { height:10px; display:block; }
#password_strength_border { width: 160px; height: 10px; border: 1px solid black; }
.strength0 { width:160px; background:#cccccc; }
.strength1 { width:40px; background:#ff0000; }
.strength2 { width:80px; background:#56e500; }
.strength3 { background:#399800; width:120px; }
.strength4 { background:#4dcd00; width:160px; }



/* Hacks */
/* float clearing for IE6 */
* html #regMainContent {
  height: 1%;
  overflow: visible;
}
/* float clearing for IE7 */
*+html #regMainContent {
  min-height: 1%;
}
/* float clearing for everyone else */
#regMainContent:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}