@import url("articles.css");
/************************** Site-wide Reset Styles ***************************/
/*                     Do not change any of these styles                     */

html,body,p,ul,ol,li,a,h1,h2,h3,h4,h5,h6,table,tbody,tfoot,thead,th,form{margin:0;padding:0;border:0;outline:0;}
.mainMenu tr .icn img{padding:0 0 0 10px;}
/* Overrides some troublesome DNN default styles */
.Normal,.NormalDisabled,.NormalBold,.NormalRed,.NormalTextBox{font-size:inherit;font-family:inherit;}
.Normal,.NormalDisabled,.NormalRed,.NormalTextBox{font-weight:inherit;}
.dnnRibbon .barContent{border:0 !important;border-top:1px solid #DADADA !important;}
.dnnRibbon input{height:auto !important;}
#dnn_ControlPanel .content{height:auto;}
.DNNEmptyPane{font-size:0px;}
#LBD_CaptchaImage img{position:absolute;}

/* The clear class is used to correct the flow of the layout after using a
 * floated element ("float: left" in stylesheets or "align=left" on tables and
 * imgs). Usually, floating an element takes it out of the 'flow' of the
 * document, meaning that any containers or following elements will ignore the
 * size and shape of the floated element, causing ugly overlapping content and
 * missing backgrounds. The clear class forces the containing element to
 * correct its height for its contents even if it's floated. It should be used
 * by specified the clear class on any elements that contain a floated
 * elements that you wish to clear.
 * E.g.,
 * <div class="clear">
 *     <div style="float: left;"> Content </div>
 *     <img src="..." align="right" />
 * </div>
 * This method is preffered over alternate methods (such as
 * <br style="clear:both;" />) as it requires no extra html markup just for
 * styling purposes, and it is also the only known method that works in all
 * cases across all modern browsers. */
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clear{zoom:1;/*triggers hasLayout in IE*/}

/* The following classes cancel out any styles that have been specified on the
 * body for the image and link browsers of the DNN text editor. Usually these
 * dialogs would use the same styles as the rest of the site, sometimes
 * causing issues with readability */
.FCKImageGalleryContainer{background-color:#FFFFFF;background-image:none;}
.FCKLinkGalleryContainer{background-color:#FFFFFF;background-image:none;}

.FormsContent table{width:auto !important;}

.ModuleTitle_SubMenu .txt{white-space:nowrap;}


/****************************** General Styles *******************************/

body, #Body, .Normal, .NormalDisabled, .NormalBold, .NormalRed, .NormalTextBox, table, h1, h2, h3, h4, h5, h6 {
	/* Set this to the desired default website font */
	font-family: Arial, Helvetica, sans-serif;
	/* Set this to the desired default website font size */
	font-size: 12px;
	color: #000000;
}

/* Do not set font-size or font-family on the p tag or  any other general tags
 * other than #Body (see Layout Styles) as this will cause problems when trying
 * to set styles on container elements later on. Site wide font settings should
 * be specified on the body tag, or if you require a different font style
 * somewhere on the site, add the different font styles to a class or id on the
 * containing element. */
p, .Normal p {
	/* !important is required on margin to override a style on the container */
	margin: 10px 0 !important;
	line-height: 120%;
}

ol {
	margin: 10px 0 10px 30px;
	list-style-type: decimal;
}

ul {
	margin: 10px 0 10px 30px;
	list-style-type: disc;
}

a, a:link, a:active, a:visited {
	color: #16498c;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	color: #16498c;
}

h1 {
font-family:Arial, Helvetica, sans-serif;
color:#609344;
text-transform:uppercase;
font-weight:normal;
font-size:24px;
margin-top:20px;
}

h2 {
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
font-size: 26px;
color:#565656;
margin-top:18px;
}


h3 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color:#565656;
margin-top:16px;
}

h4 {
	margin: 14px 0;
	font-size: 21px;
	font-weight: bold;
}

h5 {
	margin: 12px 0;
	font-size: 18px;
	font-weight: bold;
}

h6 {
	margin: 10px 0;
	font-size: 15px;
	font-weight: bold;
}
hr
{
	border: 0;
	border-bottom: 1px solid #a7a7a7;
	margin: 10px 0;
}

/******************************* Layout Styles *******************************/

#Body {
	text-align: center; /* Centers the website in IE */
	/* Causes long words that are too wide for its container to break mid-word
	 * and wrap onto the next line */
	word-wrap: break-word;
	
	background-image:url('images/bg.jpg');
	background-repeat:repeat-x;
	background-position:top;
}

#topBar {
	text-align: center;
	background: SkyBlue;
	margin: 0 0 20px;
	padding: 5px 0;
}

.pageCenter {
	/* Centers the website in all browsers except IE and cancels out the
	 * text-align: center specified on #Body */
	margin: 0 auto;
	text-align: left;
	
	/* Total width of the website. This must be specified in order to center
	 * the website. This should NEVER be more than 996px or you will get
	 * scrollbars on 1024x768 resolution screens. If your design measures
	 * wider than this, go and ask your designer about it */
	width: 960px;
}

#header {
	height: 179px;
	background-image:url(images/banner.jpg);
	background-repeat:no-repeat;

}

#profilePhoto {
	/* Absolutely positions the element wherever you like in the header
	 * 'bottom: 0;' locks the element to the bottom of the container
	 * 'top: #px;' puts the top of the element #px down from the top of
	 * the header. This same technique can be used for the site title as well
	 * as bylines or portfolios. If the height of the element + the value for top is
	 * greater than the height of the header, the element will overlap
	 * the content below it. This can sometimes be put to effect
	 * (see http://www.sharmanstone.com.au for example) 
	 * The header MUST have position: relative for this to work
	 * otherwise you will have unexpected results */
	position: absolute;
	bottom: 0;
	left: 10px;
}

#header h1 {
	/* Image replacement technique
	 * Use the following to replace the site title with a premade image
	 * This is useful for non-standard fonts, and is the kindest way to
	 * replace the text with an image for search engines, without using
	 * javascript 
	 * The height and width must match that of the image */
	 text-indent: -9999px;
}

#contentWrapper {
	padding: 0px;
		background-image:url('images/innerbg.gif');
		background-repeat:repeat-y;
}

#contentPaneWrapper {
	/* Don't use margin-left on anything with float:left */
	float: left;
	/* Don't use padding-left, padding-right, border-left or border-right on
	 * anything with width */
	width: 692px;
	margin-right: 0px;
}

.TopPane{

}
.ContentPane {
	padding: 40px;
}

#rightPaneWrapper {
	/* Don't use margin-left on anything with float:left */
	float: left;
	/* Don't use padding-left, padding-right, border-left or border-right on
	 * anything with width */
	width: 267px;

	background-image:url('images/rightbg.jpg');
	background-repeat:repeat-x;
	background-position:top;
}
#rightPaneWrapper h1
{
font-size:18px;
font-family:Georgia, "Times New Roman", Times, serif;
margin:0px;
padding:0px;
color:#2571A2;
font-weight:normal;
margin-bottom:15px;
text-transform:none;
}
#rightPaneWrapper a h1
{margin-bottom:0px;
}
#rightPaneWrapper hr
{
	border: 0;
	border-bottom: 1px solid #AED3EE;
	margin: 3px 0;
}


.RightPane {
	padding: 13px;
	color:#2571A2;
	font-weight:bold;
}
.RightPane td
{
	color:#2571A2;
	font-weight:bold;
}


#footer {
	background-color:#75C6F5;/*image:url('images/basebg.jpg');*/
	padding: 0px;
	text-align: center;
	height:165px;
}
#footerLeft
{
	margin:0px;
	padding: 2px 0 0 0;
}

/* Set the font styles in the footer - also need to override the default a styles */
#footer, #footer a {
	font-size: 12px;
	color: white;
}
#footertop {margin-top:38px;}
#footerbase {margin-top:62px;}
/******************************** Menu Styles ********************************/

#menu {
	/* Do not specify a height here. See line-height in the .root class */
	width:990px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:white;
	text-transform:uppercase;
	background-image:url('images/menubg.jpg');
	background-repeat:repeat-x;
	width:959px;
}

/*  Main Menu Normal  */
.main_dnnmenu_rootitem  
{	
	text-align:right; 
	line-height:38px;
	padding:12px 10px 12px 10px;
	text-transform:uppercase; 
	margin-right:1px;
}

/*  Main menu hover  */
.main_dnnmenu_rootitem_hover
{  
	color:#ffffff;
	font-size: 12px; 
	font-weight:bold;
	text-align:right;
	line-height:38px;
	padding:12px 10px 12px 10px;
	background:url(../images/menu_hover.gif) repeat-x top left;
	text-transform:uppercase; 
	margin-right:1px;
}

/*  Main menu selected  */
.main_dnnmenu_rootitem_selected 
{
	color:#ffffff;
	font-weight:bold;
	text-align:right;
	font-size: 12px;
	line-height:38px;
	padding:12px 10px 12px 10px;
	background-color:#609344;
	text-transform:uppercase;
	margin-right:1px;
}

/*  SUB Menu Normal */
.main_dnnmenu_submenu 
{
	border:1px solid #C0D6E5;
}

.main_dnnmenu_submenu td
{
	/*background-color:#E1E8ED;*/
	background-color:#F8FAFF;
	z-index: 1000;
	font-size: 12px; 
	font-weight:bold;
	text-align:left;
	color:#000000;
	line-height:38px;
	padding: 0px 5px;
	margin:0px;
}

/*  SUB Menu hover & selected */
.main_dnnmenu_itemhover td,.main_dnnmenu_itemselected td   
{  
	font-size: 12px;
	background: #3096D0;
	color:#ffffff;
	font-weight:bold;
	text-align:left;
	line-height:38px;
	z-index: 1000; 
	padding: 0px 5px;
	margin:0px;
}

.main_dnnmenu_break
{
	height: 2px;
	background-color: #D5E0FF;
}

/* Module Action Menus */
.ModuleTitle_SubMenu
{
	border:1px solid #C0D6E5;
}

.ModuleTitle_SubMenu td{
	background-color:#F8FAFF;
	white-space: nowrap;
} 

.ModuleTitle_MenuIcon {
	background-color:#F8FAFF; 
	border:none;
	padding: 0px 2px;
}

.ModuleTitle_MenuItemSel td, .ModuleTitle_MenuItemSel .ModuleTitle_MenuIcon{
	background: #CE0D0D url(../images/menu_hover.gif) repeat-x top left;
	color: #fff;
}

.ModuleTitle_MenuBreak td, .ModuleTitle_MenuBreak .ModuleTitle_MenuIcon
{
	height: 2px;
	background-color: #D5E0FF;
}





#search {

}

/* Search text box container */
#search div.SearchBorder {
	border: 0;
	margin: 0;
	height: auto;
	width: auto;
	float: left;
}

/* Search text box */
#search .SearchBorder input {
	outline: 0; /* Removes orange highlight in Google Chrome */
	/* These properties can be set to whatever you like. The !important tag is used to
	 * override some default DNN styles that would otherwise clash */
 	border: 1px solid #d3d4d4;
	font-family: inherit !important;
	font-weight: bold !important;
	width: 160px !important;
	color: Gray !important;
}

/* Search button */
#search a {
	background: url(images/search_button.gif) top left no-repeat;
	width: 19px;
	height: 22px;
	display: block;
	float: left;
	padding: 0;
}

/* Search button hover */
#search  a:hover {
	background: url(images/search_button.gif) bottom left no-repeat;
	text-decoration: none;
}

/* Drop down search options */
#SearchIcon {
	display: none;
}

/***************** Tabbed Panels *********************/

#tabbedPanel {
	margin: 20px 0 0 0;
	zoom: 1; /* Triggers hasLayout for IE */
}

/* Tabs */
#tabbedPanel .tab {
	cursor: pointer;
	float: left;
	position: relative;
	top: 1px;
	border: 1px solid Black;
	background: Gray;
	padding: 4px 40px 4px 20px;
	margin: 0 1px 0 0;
	font-weight: bold;
}

/* Can declare tab-specific styles by putting an id on the tab or content  */
#tabbedPanel #videoTab {
	background: Red;
	color: White;
}

/* Tabs when selected */
#tabbedPanel .selTab {
	background: White;
	/* When using borders as in this example, increase the bottom padding by 1px (as defined above)
	 * and remove the bottom border. This method is preferred over simply making the bottom border
	 * the same as the background colour, because doing so would present a gap in the left-border
	 * in Internet Explorer due to the bottom-border overlapping the left-border */
	border-bottom: 0;
	padding-bottom: 5px;
}

/* Can declare tab-specific styles by putting an id on the tab or content  */
#tabbedPanel #videoTab.selTab {
	background: Orange;
}

/* Tab content */
#tabbedPanel .tabContent {
	display: none;
	clear: both;
	
	background: White;
	border: 1px solid Black;
	padding: 0 20px;
}

/* Tab content when selected */
#tabbedPanel .selContent {
	display: block;
}

/* Can declare tab-specific styles by putting an id on the tab or content  */
#tabbedPanel #videoContent {
	background: Orange;;
}

/************************* BREADCRUMBS *************************/

#breadcrumbs {
	margin: 0 0 20px 0;
}

.Breadcrumb {
	float: left;
	padding: 0 20px 0 10px;
	background: White;
	height: 25px;
	line-height: 25px;
	display: block;
	font-weight: bold;
}

.Breadcrumb:hover {
	color: Red;
	text-decoration: none;
}

#breadcrumbs .seperator {
	float: left;
	background: url(images/breadcrumb.gif) top left no-repeat;
	width: 13px;
	height: 25px;
}

#breadcrumbs #seperatorEnd {
	float: left;
	background: url(images/breadcrumb_end.gif) top left no-repeat;
	width: 13px;
	height: 25px;
}