/*
There are some parts of this style sheet that may be a little hard to understand 
unless you are well versed in CSS, all the quirks across all the browsers, and know the tricks
required to get them all to behave properly.

Most of the styles here are for layout purposes and should not be modified, unless you are substantially 
changing the layout of the page.

There are some styles that are safe to change and have been marked as such with the words "safe to change".  
If an entire style defintion is marked safe, then all of its attributes can be safely changed without modifying
the layout of the page.  If a single attribute is marked as safe within a definition, then it is only safe to change that
single attribute.

This file is divided into to parts.  
The first part are the layout specific styles, that should not be changed unless you are modifying the layout of the page
The second part are safe for you to modify.

This file was originally based on http://www.strictlycss.com/examples/three-column-layout-6.asp
*/

/* 
LAYOUT STYLES
DO NOT CHANGE UNLESS YOU WANT TO MODIFY LAYOUT OF PAGE.  
ONLY CHANGE IF YOU REALLY KNOW WHAT YOU ARE DOING 
*/

@import url("css/menu.css");

/* BEGIN LAYOUT STYLES */
* /*Set's border, padding and margin to 0 for all values*/
{
	padding: 0;
	margin: 0;
}
body, html
{
	background-color: #ffffff;
	text-align: center; /*** Centers the design in old IE versions ***/
	height: 100%;
}

.clear
{
	clear: both;
}
#background /* this is needed because of the variable size of the DNN control panel */
{
	background-color: #ffffff;
	background-image: url('./images/Background.jpg');
	background-repeat: repeat-x;
}
#mainContainer
{
	width: 951px; /* width of page */
	margin: 0 auto; /*** Centers the design ***/
	min-height: 100%;
	text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
	background-image: url('./images/BodyMiddle.jpg'); /* outer has a non-repeating background set to handle the top part of the body borders.  This background handles everything else below it.  i.e. it shows up through the layers */
	background-repeat: repeat-y;
}
* html #mainContainer
{
	height: 100%; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}
#header
{
	width: 951px; /* width of page, set to same as #mainContainer */
	height: 131px; /* make sure all the header heights are set the same */
}
#headerLeft
{
	float: left;
	background-image: url('./images/HeaderLeft.jpg');
	width: 15px;
	height: 131px; /* make sure all the header heights are set the same */
}
#headerMiddle
{
	float: left;
	background-image: url('./images/HeaderMiddle.jpg');
	background-repeat: repeat-x;
	width: 921px;
	padding: 18px 0px 0px 0px; /*18px;*/ /* height: 131px; /* make sure all the header heights are set the same */
}
#headerRight
{
	float: left;
	background-image: url('./images/HeaderRight.jpg');
	width: 15px;
	height: 131px; /* make sure all the header heights are set the same */
}
#logo
{
	float: left;
	width: 254px;
}
#search
{
	float: right;
	height: 53px;
	background-image: url('images/SearchBackground.jpg');
	background-repeat: no-repeat;
	width: 185px;
}
#dnn_dnnSEARCH_ClassicSearch
{
	display: block;
}
#dnn_dnnSEARCH_txtSearch
{
	display: block;
	float: left;
	/*margin: 4px 0px 0px 10px;*/
	background-color: #BDDFE5;
}
#dnn_dnnSEARCH_cmdSearch
{
}
#headerMiddleTop
{
	height: 80px;
}
#headerMiddleRight
{
	float: right;
	width: 667px;
	height: 80px;
}
#menu
{
	clear: both;
	margin-left: 5px;
}
.main_dnnmenu_rootitem
{
	background-image: url('./images/MenuButtonMiddle.jpg');
	background-repeat: repeat-x;
	height: 25px;
}
.main_dnnmenu_rootitem span
{
	background-image: url('./images/MenuButtonRight.jpg');
	background-repeat: no-repeat;
	background-position: right top;
	height: 25px;
}
.main_dnnmenu_rootitem .icn
{
	background-image: url('./images/MenuButtonLeft.jpg');
	background-repeat: no-repeat;
	background-position: left top;
	height: 25px;
	width: 17px;
}

.main_dnnmenu_rootitem_selected
{
	background-image: url('./images/MenuButtonMiddle.jpg');
	background-repeat: repeat-x;
	height: 25px;
}
.main_dnnmenu_rootitem_selected span
{
	background-image: url('./images/MenuButtonRight.jpg');
	background-repeat: no-repeat;
	background-position: right top;
	height: 25px;
}
.main_dnnmenu_rootitem_selected .icn
{
	background-image: url('./images/MenuButtonLeft.jpg');
	background-repeat: no-repeat;
	background-position: left top;
	height: 25px;
}

#breadCrumb
{
	margin-top: 10px;
}
.outer
{
	padding-left: 165px; /* if you change this then also change .float-wrap margin-left */
	background-image: url('./images/BodyTop.jpg'); /* this is the top part of content border.  This is necessary because of the background gradient.  The rest or the border is rendered by the #mainContainer */
	background-repeat: no-repeat;
}
* html .outer
{
	padding-left: 0px;	/*MMP added for IE6 */
	padding-right: 120px; /* Normally this shouldn't be in this hack, it should be in .outer, but because of IE7 I had to */
}
.inner
{
	width: 780px; /* positions right column */ /*** This width is for non-IE browsers. Mozilla makes this necessary. Be sure to check your layout in different browsers if you changes this value. Especially IE7 seems to create a horisontal scroll if this value is set too large ***/
	padding-bottom: 30px;
}
* html .inner
{
	width: 100%;
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
      div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
      blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
      ***/
.float-wrap
{
	float: left; /* width: 725px; */ /* moved to individual templates */
	margin-left: -165px; /*** Same length as .outer padding-left but with negative value ***/
	margin-top: 0px; /* make this the same as marin-top in .right class */
}
* html .float-wrap
{
	margin-left: 0px;	/* MMP - added for IE6 issues */
	/*** No need for hacking IE on this layout ***/
}
#content
{
	float: right; /* width: 485px; */ /* moved to individual templates */
	background: #fff;
	min-height: 300px;
}
* html #content
{
	position: relative; /*** IE needs this  ***/
}
.contentWrap
{
	padding: 5px;
}
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
      div.left is carried over into the proper position. 
      ***/
.left
{
	float: left;
	width: 210px; /* width of left column */
	padding: 5px;
	margin-left: 20px;
}
* html .left
{
	position: relative; /*** IE needs this  ***/
}
.right
{
	float: right;
	width: 210px; /* width of right column */
	padding: 5px;
	margin-top: 0px; /* make this the same as marin-top in .float-wrap class */
}
* html .right
{
	position: relative; /*** IE needs this  ***/
	margin-right: -120px; /*** IE gets this margin. ***/
}
#leftBottom
{
	float: left;
	width: 515px;
	margin-left: 10px;
	margin-top: 10px;
}
#rightBottom
{
	float: right;
	width: 380px;
	margin-top: 10px;
}

#footer
{
	width: 951px; /* width of page, set to same as #mainContainer */
	height: 84px; /* make sure all the footer heights are set the same */
	margin: 0 auto;
	margin-top: -84px; /*** By using a negative margin-top we now moves the footer up the same amount as the footer height to avoid vertical scrolling. Remember, if you use borders and padding on your footer you will have to calculate this in your negative margin-top value also. ***/
	clear: both;
}
#footerLeft
{
	float: left;
	background-image: url('./images/FooterLeft.jpg');
	width: 15px;
	height: 84px; /* make sure all the footer heights are set the same */
}
#footerMiddle
{
	float: left;
	background-image: url('./images/FooterMiddle.jpg');
	background-repeat: repeat-x;
	width: 921px;
	height: 84px; /* make sure all the footer heights are set the same */
}
#footerRight
{
	float: left;
	background-image: url('./images/FooterRight.jpg');
	width: 15px;
	height: 84px; /* make sure all the footer heights are set the same */
}
/* END LAYOUT STYLES */


/* SAFE TO CHANGE STYLES */
/* All styles below here are safe to change.  The existing attributes will not change the layout of the page.  
If you add attributes to a definition, then you're on your own :) */

/* BEGIN SAFE TO CHANGE STYLES */
.right /* safe to change */
{
	color: #878787; /* font color of right column */
}
#footer /* safe to change */
{
	text-align: center;
}
#footerContent /* safe to change */
{
	margin-top: 25px;
	color: #209DB5;
}
#footerContent a /* safe to change */
{
	color: #209DB5;
	text-decoration: none;
}
#footerContent a:hover /* safe to change */
{
	color: #209DB5;
	text-decoration: underline;
}

#footerMenu /* safe to change */
{
	color: #AFAFAF;
}
#footerMenu a /* safe to change */
{
	color: #AFAFAF;
	text-decoration: none;
}
#footerMenu a:hover /* safe to change */
{
	color: #AFAFAF;
	text-decoration: underline;
}
#search input /* safe to change */
{
	border: none 0px; /* remove border on search input field */
}
#copyright /* safe to change */
{
	display: inline;
	margin-right: 30px;
}
#terms /* safe to change */
{
	display: inline;
}
#privacy /* safe to change */
{
	display: inline;
}
#login /* safe to change */
{
}
body /* safe to change */
{
	color: #565656; /* font color for the page */
	font-family: Verdana, Arial, Tahoma, sans-serif; /* fonts for the page */
	font-size: 70%;
	padding-top: 0px; /* controls padding at top of screen */
}
p /* safe to change */
{
	padding: 7px 0 7px 0;
}
ul /* safe to change */
{
	margin-left: 15px;
	margin-bottom: 10px;
}
a /* safe to change */
{
	color: #269EC0;
	text-decoration: underline;
}
a:link /* safe to change */
{
	color: #269EC0;
	text-decoration: underline;
}
a:visited /* safe to change */
{
	color: #269EC0;
	text-decoration: underline;
}
a:hover /* safe to change */
{
	color: #269EC0;
	text-decoration: none;
}

a.SubHead
{
	color: Black;
	text-decoration:none;
	font-family: Tahoma, Arial, Helvetica;
	font-size: 11px;
	font-weight: bold;
}

a.SubHead:hover
{
	color:#269EC0;
	text-decoration:none;
}

a.HeadH2
{
	text-decoration:none;
	font-family: Tahoma, Arial, Helvetica;
	font-weight: bold;
	color: #004C70;
	padding-bottom: 5px;
	font-size: 1.3em;
}

a.HeadH2:hover
{
	color:#269EC0;
	text-decoration:none;
}

h1, h2, h3 /* safe to change */
{
	font-weight: bold;
	color: #004C70;
}
h1 /* safe to change */
{
	font-size: 2.0em;
	padding-bottom: 5px;
}
h2 /* safe to change */
{
	padding-bottom: 5px;
	font-size: 1.3em;
}
h3 /* safe to change */
{
	padding-bottom: 0px;
	font-size: 1.2em;
}
h1 a, #header h2 /* safe to change */
{
	color: #fff;
}
.FormFieldWrapper /* safe to change */
{
	padding-top: 10px;
}
.FormFieldLabel /* safe to change */
{
	display: block;
}
.FormFieldValue /* safe to change */
{
	display: block;
}

.ajax__tab_tab
{
	white-space: normal;
	text-align: left;
}

.AjaxTabs_PLC .ajax__tab_header .ajax__tab_tab
{
	background-color: #abd8fb;
}
.AjaxTabs_PLC .ajax__tab_active .ajax__tab_tab
{
	background-color: #EBF4FB;
}
.AjaxTabs_PLC .ajax__tab_body
{
	background-color: #EBF4FB;
}

/* END SAFE TO CHANGE STYLES */


/**************************************************
 *                                                *
 * IE AJAX Tabs Style                  *
 *                                                *
 **************************************************/
.AjaxTabs_DMC
{
	text-align: left;
}

.AjaxTabs_DMC .previewseparator
{
	border: 2;
	color: #eee;
	background-color: #eee;
	height: 2px;
}

.AjaxTabs_DMC .previewtab
{
}

.AjaxTabs_DMC .previewtabtitle
{
	font-family: verdana;
	font-size: 18pt;
	text-decoration: underline;
}

.AjaxTabs_DMC .previewtabcontent
{
}

.AjaxTabs_DMC .ajax__tab_header
{
	padding-left: 0px;
}
.AjaxTabs_DMC .ajax__tab_header .ajax__tab_tab
{
	margin-right: 2px;
	background: url(./images/tab_unselected.jpg);
	width: 227px;
	padding: 6px 0px 3px 0px;
	text-align: left;
	color: #006699;
	font-family: verdana;
	font-size: 13px;
	display: block;
}
.AjaxTabs_DMC .ajax__tab_active .ajax__tab_tab
{
	padding: 6px 0px 3px 0px;
	background: url(./images/tab_selected.jpg);
}
.AjaxTabs_DMC .ajax__tab_body
{
	background-image: url(./images/tab_body.jpg);
	background-repeat: no-repeat;
	background-color: #EBF4FB;
	background-position: left bottom;
	font-size: 13px;
	font-family: verdana;
	height: 230px;
	width: 915px;
	overflow: hidden;
}
.AjaxTabs_DMC .ajax__tab_body div
{
	padding: 8px;
}


.SearchResultsContent td
{
	padding: 5px;
}


@media print
{
	.CSSTabDiv .tabcontent
	{
		display: block !important;
	}
}