/* ############################################################################
   ##
   ##  Global Website Stylesheet
   ##
   ######################################################################### 

@import url('../screen/MenuMain.css');
@import url('../screen/MenuSub.css');
@import url('../screen/DefaultHtmlTags.css');
@import url('../screen/DefaultForms.css');
@import url('../screen/DefaultTables.css');
@import url('../screen/DefaultContentClasses.css');
@import url('../screen/DefaultPageLayout.css');
@import url('../screen/DefaultPageElements.css');

/ Global modules /

@import url('../_modules/calendar.css');*/

/* ############################################################################
   ## 
   ##  HTML TAG STYLES
   ##
   ######################################################################### */

body {
    margin: 0;
    padding: 0;
     
    font-family: Arial, Helvetica, sans-serif;
    font-size: 75%;
    color:#004890;
    background: #064e94 url(/App_Themes/Default/images/gradient-bg.jpg) 0 0 repeat-x;
}

a {
    color:#c8420d;
}

    a:link {
        text-decoration: none;
    }

    a:visited {
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    a:active {
        text-decoration: underline;
    }

p {
    margin: 0 0 1.5em;
}

h1 {
    margin: 0.25em 0 1em 0;
    font-size: 225%;
    font-weight: normal;
}

h2 {
    margin: 0.5em 0 0.5em 0;
    font-size: 150%;
    font-weight: normal;
}

h3 {
    margin: 0.5em 0 0.5em 0;
    font-size: 125%;
}

h4 {
    margin: 0.5em 0 0.5em 0;
    font-size: 100%;
}

h5 {
    margin: 0.5em 0 0.5em 0;
    color: #777777;
    font-size: 100%;
}

h6 {
    margin: 0.5em 0 0.5em 0;
    border-bottom: #e0e0e0 1px solid;
}

ul{
	list-style:none;
	padding:0;
}

ol {
	padding:0;
	margin:0;
	margin-bottom:0.5em;
	margin-left:25px;
}
ul li {
    background:url(/App_Themes/Default/images/bullet.jpg) top left no-repeat;
	padding:0;
	margin:0;
	padding-left:8px;
	margin:2% 0;
}

ol {
}

ol li {
}

big {
    font-size: 115%;
}

small {
    font-size: 83.5%;
}

hr {
    margin: 0 0 1.25em;
}

img {
	outline:none;
	border:none;
}
* html img {
    /* IE6 Only */
    /* FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00,Duration=0.50); */
}

caption {
    margin: 0 0 0.25em 0;
    font-weight: bold;
    text-align: left;
}

address {
    font-style: italic;
}

pre {
}

input[type="submit"]{
	font-size:130%;font-weight:bold;color:#00447e;line-height:200%;border-radius:5px;text-align:center;background:#F15D22;padding:1% 2%;margin:2% 1%;
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
	border:2px solid #fff;
	display:block;
}
input[type="submit"]:hover{text-decoration:none;background:#4d90d7;color:#fff;}
/* ############################################################################
   ## 
   ##  PAGE LAYOUT
   ##
   ######################################################################### */

/* ####################################
   Core Template
   ####################################
   
    <Align>
        <Template>
            <AccessibilityToolbar />
            <Header />
            <Content>
                <Page>
                    <TrailNav />
                    <PageFunctionsTop />
                    <PageContent>
                        <Primary />
                        <Secondary />
                    </PageContent>
                    <PageFunctionsBottom />
                </Page>
                <Tertiary />
            </Content>
            <Footer />
        </Template>
    </Align>
*/

#Align {
    padding:0;
    text-align: center;      /* Coupled with the "margin: 0 auto;" and "text-align: left;" settings in #Template (below) this is a weird but safe way to center a page in all browsers including IE where the standard doesn't work. */
    background: url(/App_Themes/Default/images/left-cube-bg.png) bottom left no-repeat;
}
	#AlignInner {
		background: url(/App_Themes/Default/images/right-cube-bg.png) bottom right no-repeat;
	}

#Template {
    position: relative;
    width: 1020px;            /* Search for "#Template{width}" in CSS files to update values related to this. */
    background:none;
    margin: 0 auto;          /* Coupled with "text-align: left;" to re-align text to left in the page div when a parent div is centred. This allows centering of page div using the IE-safe hack. */
    text-align: left;        /* Coupled with "margin: 0 auto;" o re-align text to left in the page div when a parent div is centred. This allows centering of page div using the IE-safe hack. */
	display:inline-block;
}
#TemplateInner {
	display:inline-block;
	position:relative;
}
	#TemplateInnerLeft{
		width:790px;
		padding-right:230px;
		padding-top:0px;
		display:inline-block;
	}
	#TemplateInnerRight{
		width:291px;
		padding:0;
		position:absolute;
		top:0;
		right:-20px;
		display:inline-block;
	}
		#CanBox{
			width:150px;
			padding:0 70.5px;
		}
		#SideLinkBox {
		}
			#SideLinkBox  ul{
				margin:0;
				padding:0;
				list-style:none;
				background:0;
			}
				#SideLinkBox  ul li{
					box-sizing:border-box;
					width:291px;
					min-height:43px;
					margin:0 0 8px 0;
					padding:10px 15px 0 15px;
					list-style:none;
					background:url(/App_Themes/Default/images/side-bar.png) top left no-repeat;
					display:block;
					color:#fff;
					font-weight:bold;
					font-size:150%;
					text-decoration:none;
					-webkit-box-shadow: 10px 9px 15px 0px rgba(39,105,174,1);
					-moz-box-shadow: 10px 9px 15px 0px rgba(39,105,174,1);
					box-shadow: 10px 9px 15px 0px rgba(39,105,174,1);
				}
					#SideLinkBox  ul li a{
						display:block;
						color:#ffffff;
					}
					#SideLinkBox  ul li a:hover{
						text-decoration:none;
						color:#004890;
					}
					#SideLinkBox  ul li.submenu {
						padding:0;
					}
						#SideLinkBox  ul li.submenu a{
							padding:10px 15px 0 15px;
						}
					#SideLinkBox  ul li ul{
						box-sizing:border-box;
						width:290px;
						padding: 0 0 10px 0;
						margin:9px 0 5px 0;
						border:2px solid #ffffff;
						background:#FAC0AC;
						display:none;
					}
						body.Container_for-professionals #SideLinkBox  ul li ul{
							display:inline-block;
						}
						body#ctl00_Container_for-professionals #SideLinkBox  ul li ul{
							display:none;
						}
						#SideLinkBox  ul li.submenu ul li{
							box-sizing:border-box;
							width:100%;
							min-height:10px;
							margin:0;
							padding:0;
							list-style:none;
							background:#FAC0AC;
							display:block;
							color:#fff;
							text-decoration:none;
							box-shadow:none;
						}
							#SideLinkBox  ul li.submenu ul li a{
								box-sizing:border-box;
								width:100%;
								padding:10px 10px 0 10px;
								display:block;
								color:#004890;
								font-size:62%;
							}
								#SideLinkBox  ul li.submenu ul li a.hover{
									text-decoration:underline;
									color:#004890;
								}
		div.SideBox{
			width:276px;
			height:36px;
			padding:7px 15px 5px 12px;
			background: url(/App_Themes/Default/images/side-bar.png) 0 0 no-repeat;
			display:block;
			color:#fff;
			font-weight:bold;
			font-size:150%;
			text-decoration:none;
		}
			div.SideLinkShare{width:266px;padding-right:25px;}
			div.SideLinkFollow{width:196px;padding-right:95px;}
			.floatRight{float:right;}
			
		#SideLinkBox  a.SideLink:hover{
			color:#00315a;
		}
		#CompanyLogos{display:none;width:303px;}
#AccessibilityToolbar {
    position: absolute;
    margin-top: -2em;
    font-size: 91.7%;
}

    #AccessibilityToolbar ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        #AccessibilityToolbar li {
            display: inline;
            margin-right: 1em;
        }

/* ########################################################
   Header 
   ######################################################## */

    #Header {
        position: relative; /* z-index doesn't work without position. */
        z-index: 2;         /* Important for the main menu dropdown to appear above page content in IE */
    }
    #HeaderInner {
    }
        
        #Header #Logo {
            width: 100%;
            background: #ffffff;
        }

        #Header #LoginStatusShort {
            padding: 4px 10px;
        }
        
        #Header #SearchSite {
            position: relative;
            float: right;
            padding: 4px 0;
			height:30px;
        }

            #Header #SearchSite label {
            }
            
            #Header #SearchSite input {
                padding: 0;
                margin: 0;
            }

            #Header #SearchSite .submit {
				color:#fff;
				text-transform:uppercase;
				background:none;
				border:0;
				outline:0;
				border-collapse:collapse;
				padding:0;
				margin:0;
				font-size:120%;
				display:inline-block;
				box-shadow:none;
            }
				#Header #SearchSite .submit:hover{
				}
				
            #Header #SearchSite .keywords {
				background:url(/App_Themes/Default/images/search-bg.png) 0 0 no-repeat;
				width:209px;
				height:21px;
				border:0;
				outline:0;
				padding:3px 10px 3px 3px;
				color:#fff;
            }
                    
            #Header #SearchSite #AdvancedSearchLink {
                display: none;
            }

        #MainMenu {
            position: relative;
            float: left;
            width: 998px;
			padding-left:20px;
			z-index:5;
        }
        #MainMenuInner {
            padding:0;
			display:inline-block;
			width:100%;
        }
        
        #Header #AnchorMenu {
            padding: 0.5em 0;
            margin: 0 10px;
        }

            #Header #AnchorMenu a {
                padding: 0 8px;
                border-right: #c0c0c0 1px solid;
            }
                        
                #Header #AnchorMenu a:link {
                }
                
                #Header #AnchorMenu a:visited {
                }
                
                #Header #AnchorMenu a:hover {
                }
                
                #Header #AnchorMenu a:active {
                }

                #Header #AnchorMenu a.first {
                    padding-left: 0;
                }

                #Header #AnchorMenu a.last {
                    border: 0;
                }

/* ########################################################
   Content area
   
   DO NOT code CSS rules here if the site uses multiple templates. The usual
   approach is to define the rules separately on each template to avoid
   cascading conflicts. If there is only one template in the site or if there
   is a VERY, VERY clear case for using the same rules on every template, 
   rules can be coded here.
   ######################################################## */

        #Content {
			padding-top:15px;
			display:inline-block;
			margin-bottom:15px;
        }
        #ContentInner {    
			background:url(/App_Themes/Default/images/content-side-border.png) 0 0 repeat-y;
			display:inline-block;
			padding:0 50px 0 60px;
			width:680px;
        }

            #Page {
				width:100%;
				font-size:110%;
            }
            #PageInner {
				width:100%;
                padding:0;       
				display:inline-block;
            }
                
                #Page #PageContent {
                }
                #Page #PageContentInner {
                }
                
                    #Page #PageContent #Primary {
                    }
                    #Page #PageContent #PrimaryInner {
                    }

                    #SecondaryContent {
						clear:both;
						padding:15px 50px 15px 40px;
						width:680px;
						margin:0 0 0 20px;
						position:relative;
						background:#cfe0f3;
                    }
            
            #Tertiary {
            }
            #Tertiary #TertiaryInner {
            }

/* ########################################################
   Footer 
   ######################################################## */

    #Footer {
        position: relative;
        clear: both;
		color:#fff;
		font-size:90%;
		margin-bottom:15px;
    }
    #FooterInner {
        padding:15px 0 0 80px;        
    }
        
        #Footer #FooterMenu { 
			background:url(/App_Themes/Default/images/footer-links-border.png) 0 0 no-repeat; 
			padding:7px;
			text-align:center;
			width:641px;
			height:30px;
        }

            #Footer #FooterMenu ul {
                margin: 0;
                padding: 0;
                list-style: none;
            }

                #Footer #FooterMenu ul li {
                    display: inline;
                    padding-right: 5px;
                    padding-left: 5px;
					border-right:#fff solid 1px;
					background:none;
                }
				#Footer #FooterMenu ul li:first-child{
                    padding-left: 0;
				}
				#Footer #FooterMenu ul li:last-child{
					border:none;
				}

                #Footer #FooterMenu a {
					color:#fff;
                }

                    #Footer #FooterMenu a:link {
                    }

                    #Footer #FooterMenu a:visited {
                    }

                    #Footer #FooterMenu a:hover {
                    }

                    #Footer #FooterMenu a:active {
                    }

/* ############################################################################
   ##
   ##  PAGE ELEMENTS
   ##  Objects/structures that might appear on any page
   ##
   ######################################################################### */

/* ####################################
   Feature Content
   ################################## */

#FeatureContent {
    position: relative;
    float: left;
    width: 100%;
    background: #fcfcfc;
    border-bottom: #cfe0f2 1px solid;
}
#FeatureContentInner {
    padding: 10px;
}

/* ####################################
   Trail Navigation
   ################################## */

#TrailNav {
    position: relative;
    padding: 1em 0;
	width:100%;
	
    font-size: 91.7%;
    
    border-bottom: #cfe0f2 1px solid;
}
* html #TrailNav {
    /* IE6 Only */
    display: inline-block;   /* Fixes invisible attributes, e.g. border. */
}

/* ####################################
   Page Functions
   ################################## */

#PageFunctions, #PageFunctionsTop, #PageFunctionsBottom {
    padding: 0.5em 0;
}

    #PageFunctions ul, #PageFunctionsTop ul, #PageFunctionsBottom ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    #PageFunctions ul li, #PageFunctionsTop ul li, #PageFunctionsBottom ul li {
        display: inline;
        padding: 2px 4px;
        vertical-align: middle;
        border-right: #e1e1e0 1px solid;
    }
    
        #PageFunctions ul li:hover, #PageFunctionsTop ul li:hover, #PageFunctionsBottom ul li:hover {
        }
    
    #PageFunctions ul li.first, #PageFunctionsTop ul li.first, #PageFunctionsBottom ul li.first {
    }

    #PageFunctions ul li.last, #PageFunctionsTop ul li.last, #PageFunctionsBottom ul li.last {
        border-right: 0;
    }

#PageFunctionsTop {
    /* Top and bottom page functions are used separately in some sites. */
    position: relative;
    float: right;
    margin-top: -2.1em;    /* .1 allows for border on trail nav element */
}

#PageFunctionsBottom {
    /* Top and bottom page functions are used separately in some sites. */
    clear: both;
}
    
    #PageFunctionsBottom .linkPageTop {
        font-size: 91.7%;
        color: #c0c0c0;
    }
    
    #PageFunctionsBottom ul li.first {
        background: none;
        padding-left: 0;
    }

    
/* ####################################
   Page Body Content
   ################################## */
   
#PageBody {
}

    #PageBody #PageTitle, #HomePrimary #PageTitle {
		color:#f25d23;
		font-weight:bold;
		margin: 0.5em 0 0.5em 0;
    }

    #PageBody #PublishInfo, .publishInfo {
        margin: 1em 0;
    }

        #PageBody #PublishInfo .date {
            display: inline;
        }

        #PageBody #PublishInfo .author {
            display: inline;
        }

    #PageBody #MainContent {
    }

        #PageBody #MainContent ul {
        }

            #PageBody #MainContent ul li {
            }

        #PageBody #MainContent ol {
        }

            #PageBody #MainContent ol li {
            }

#Secondary ul {
    margin: 1em 0 1em 1.5em;
    padding: 0;
}

    #Secondary ul li {
        margin: 0.75em 0;
    }
    
#Secondary ol {
}

    #Secondary ol li {
    }

#Primary #SubContainers {
}

    #Primary .container {
    }

        #Primary .container .thumbnail {
        }

        #Primary .container .title {
        }

        #Primary .container .date {
        }

        #Primary .container .summary {
        }

#Primary #SubArticles {
}

    #Primary .article {
    }

        #Primary .article .thumbnail {
        }

        #Primary .article .title {
        }

        #Primary .article .date {
        }

        #Primary .article .summary {
        }

/* ####################################
   Attachments (Table)
   ################################## */

#Attachments {
    margin: 1em 0;
}

    #Attachments table {
        width: 100%;
        background: #ffffff;
        border: 1px solid #f0f0f0;
        border-bottom: 0;
    }

    #Attachments table tr th {
        padding: 3px;
        font-size: 91.7%;
        background: #f0f0f0;
    }

    #Attachments table tr td {
        padding: 3px;
        border: 1px solid #f0f0f0;
        vertical-align: top;
    }

    #Attachments table tr td.icon {
        width: 20px;
    }

    #Attachments table tr td.overview {
        width: auto;
    }
    *:first-child+html #Attachments table tr td.overview {
        /* IE7 only */
        width: 100%;
    }

    #Attachments table tr td.format {
        white-space: nowrap;
    }

    #Attachments table tr td.filesize {
        white-space: nowrap;
        border-right: 0;
    }
    
    #Attachments .title {
    }
    
    #Attachments .summary {
        font-size: 91.7%;
    }
    
    #Attachments .url {
    }

/* ####################################
   Paging
   ################################## */

#PagingTop, #PagingBottom {
    clear: both;
    margin: 1em 0;
    border: #f0f0f0 1px solid;
    padding: 8px;
}

    #PagingTop .summary, #PagingBottom .summary {
    }

    #PagingTop .totalpages, #PagingBottom .totalpages {
    }

    #PagingTop .pages, #PagingBottom .pages {
    }

    #PagingTop .pageslabel, #PagingBottom .pageslabel {
    }

    #PagingTop .pagelinks, #PagingBottom .pagelinks {
    }

    #PagingTop .previouspage, #PagingBottom .previouspage {
        margin: 0 0.25em;
    }

    #PagingTop .nextpage, #PagingBottom .nextpage {
        margin: 0 0 0 0.25em;
    }

/* ####################################
   User Login Components
   ################################## */

/* LoginStatusShort appears in the header in standard designs. */

#LoginStatusShort {
}

#LoginStatusShort.loggedIn {
}

#LoginStatusShort.loggedOut {
}

    #LoginStatusShort .loginStatusInfo {
        display: inline;
        margin-right: 1em;
    }

        #LoginStatusShort .loginStatusInfo .loginMessage {
        }

        #LoginStatusShort .loginStatusInfo .loginUser {
        }
            
    #LoginStatusShort .loginLinks {
        display: inline;
        margin: 0;
        padding: 0;
        list-style: none;
    }

        #LoginStatusShort .loginLinks li {
            display: inline;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #LoginStatusShort .loginLinks li a {
            padding: 0 1em;
            border-left: #c0c0c0 1px solid;
        }
        
        #LoginStatusShort .loginLinks .loginHomeLink {
        }

        #LoginStatusShort .loginLinks .logoutLink {
        }
        
        #LoginStatusShort .loginLinks .loginLink {
        }
        
        #LoginStatusShort .loginLinks .registerLink {
        }

/* LoginStatusLong appears within the page content area, but only on pages that have their own login form. */

#LoginStatusLong {
}

#LoginStatusLong.loggedIn {
}

#LoginStatusLong.loggedOut {
    /* The long version isn't shown when logged out in the standard white site. */
}

    #LoginStatusLong .legend {
    }
    
    #LoginStatusLong .loginStatusInfo {
        clear: left;
        margin-right: 4px;
        margin-left: 4px;
    }

        #LoginStatusLong .loginStatusInfo .loginMessage {
            display: inline-block;
        }

        #LoginStatusLong .loginStatusInfo .loginUser {
        }

    #LoginStatusLong .loginLinks {
        margin: 1em 0;
        padding: 0;
        list-style: none;
    }
    
        #LoginStatusLong .loginLinks li {
            display: inline;
            margin: 0 0 1em;
            padding: 0;
            list-style: none;
        }

        #LoginStatusLong .loginLinks li a {
            padding: 0 6px 0 14px;
            background: url('../images/arrow_grey_right.gif') 2px 2px no-repeat;
        }
            
        #LoginStatusLong .loginLinks .loginHomeLink {
        }

        #LoginStatusLong .loginLinks .logoutLink {
        }
        
        #LoginStatusLong .loginLinks .loginLink {
        }
        
        #LoginStatusLong .loginLinks .registerLink {
        }
        
        #LoginStatusLong .loginLinks .requestAccessLink {
        }

/* The login form that might be shown inside any page. */

#LoginForm {
}

    #LoginForm label {
    }

    #LoginForm input {
    }

    #LoginForm #LoginHelp {
        clear: left;
        margin: 1em 0 0;
    }
    
    #LoginForm #LoginHelp .loginLinks {
        margin: 0 0 1em;
        padding: 0;
        list-style: none;
    }

        #LoginForm #LoginHelp .loginLinks li {
            display: inline;
            margin: 0;
            padding: 0 6px 0 14px;
            list-style: none;
            background: url('../images/arrow_grey_right.gif') 2px 2px no-repeat;
        }
        
        #LoginForm #LoginButtonContainer {
        }

            #LoginForm #LoginButtonContainer input {
            }
            
    #LoginForm #LoginHelp .forgottenPasswordLink {
    }
        
    #LoginStatusLong .loginLinks .registerLink {
    }

    #LoginForm #LoginHelp .requestAccessLink {
    }

/* LoginMessage is shown on a splash page when a login message such as "expiry pending" or "disabled account" is shown to the user. */

#LoginMessage {
}

    #LoginMessage #ContinueLinks {
    }
    
    #LoginMessage #ContinueLinks ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        #LoginMessage #ContinueLinks ul li {
            margin: 0 0 1em;
            padding: 0;
            list-style: none;
        }

/* ####################################
   CMS Dev Mode
   ################################## */

#cmsDevMode {
    position: absolute; 
    width: 150px; 
    padding: 10px;
    margin: 10px;
    background: #f8f8f8;
    border: 1px #e0e0e0 solid;
    z-index: 1000;
    top: 0; 
    right: 0; 
}

    #cmsDevMode .previewTitle {
        margin: 0;
        font-weight: bold;
    }

    #cmsDevMode .previewLinks {
    }

        #cmsDevMode .previewLinks ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

            #cmsDevMode .previewLinks ul li {
            }
/* ############################################################################
   ## 
   ##  MAIN MENU
   ##
   ######################################################################### */

/* ####################################
   GLOBAL - List Layout
   ################################## */

#MenuUL {
    /* The nav object. (A <ul> in the standard platform.) */
    position: relative; /* DON'T CHANGE - Assures nav container has proper cascading position. */
    float: left; /* DON'T CHANGE - Makes IE and FF behave the same regarding ul dimensions. */
    margin: 0; /* DON'T CHANGE - Removes margin around the ul for neat layout. */
    padding: 0; /* DON'T CHANGE - Removes padding within the ul for neat layout. */
    list-style: none; /* DON'T CHANGE - Removes bullet points from list items. */
    width: 100%;
	font-size:120%;
}

#MenuUL li {
    /* All list items within the nav object */
    float: left; /* DON'T CHANGE - This makes the top level horizontal. */
    padding-right:23px;
	background:url(/App_Themes/Default/images/menu-dividor.png) center right repeat-y;
}
	#MenuUL li:last-child {
		background:none;
	}
* html #MenuUL li {
    /* IE6 Only */
    width: 10px; /* IE6 needs a width the menu layout breaks. The white-space and padding options below simulate the variable width seen in other browsers but only of the text in the menu items is short enough. */
    white-space: nowrap;
}

    #MenuUL li:hover, #MenuUL li.sfhover {
        /* All list items within the nav object - Hover */
    }

/* ####################################
   GLOBAL - Anchors (Links)
   ################################## */

#MenuUL a {
    /* All anchor tags within the nav object */
    display: block; /* DON'T CHANGE - Fills the width of the li with link rollover. */
    padding:3px 3px 3px 2px;
	color:#fff;
	text-decoration:none;
	font-weight:bold;
	text-transform:uppercase;
}
* html #MenuUL a {
    /* IE6 Only */
    /* All anchor tags within the nav object */
    width: 100%; /* DON'T CHANGE - Fills the width of the li with link rollover for IE6 (display:block fix). Be careful if margin/padding/border is added. */
}

    #MenuUL a:hover {
        /* All anchor tags within the nav object - Hover */
		color:#00315a;
    }
	#MenuUL li.currentPage  a {
		color:#00315a;
	}
/* ####################################
   LEVEL 2+ - List Layout
   ################################## */

#MenuUL li ul {
    /* Second level lists (all sub lists within list items) */
    position: absolute; /* DON'T CHANGE - Places second level lists in the right spot. */
    left: -100%; /* DON'T CHANGE - Drop-down hover trick - Hide the menu off the screen. */
    
    margin: 0; /* DON'T CHANGE - Removes margin around the ul for neat layout. */
    padding: 0; /* DON'T CHANGE - Removes padding within the ul for neat layout. */
    
    list-style: none; /* DON'T CHANGE - Removes bullet points from list items. */
}

#MenuUL li:hover ul, #MenuUL li li:hover ul, #MenuUL li.sfhover ul, #MenuUL li li.sfhover ul {
    /* Second level lists (all sub lists within list items) - Hover over the containing li */
    left: auto; /* DON'T CHANGE - Drop-down hover trick - Re-align the menu on the screen on rollover. */
}

#MenuUL li ul li {
    /* Second level list items */
    float: none; /* DON'T CHANGE - Makes second level list items vertical. */
    
    width: auto;
}
* html #MenuUL li ul li {
    width: 140px; /* Otherwise each li is a different width. */
    white-space: normal; /* Allows menu items to span multiple rows, overridden from first level. */
}

    #MenuUL li ul li:hover, #MenuUL li ul li.sfhover {
        /* Second level list items - Hover */
    }

/* ####################################
   LEVEL 2+ - Anchors (Links)
   ################################## */

#MenuUL li ul li a {
    /* Second level list items - Anchor tags */
    padding: 4px;
}

    #MenuUL li ul li a:hover {
        /* Second level list items - Anchor tags - Hover */
        background: #f0f0f0;
    }
/* ############################################################################
   ## 
   ##  SUB MENU
   ##
   ######################################################################### */

#SubMenu {
    width: 100%;
}

/* ####################################
   Anchors (Links) - Standard Styles
   - Can be overridden by manipulating different list levels further down in the CSS
   ################################## */

#SubMenu ul li a {
    /* All anchor tags */
    display: block; /* Note: display:block makes the links larger and easier to access for mobility challenged users. */
    width: 100%; /* Careful with this if padding/margins/borders are added. Otherwise required for IE6 to fill the block with the link. */
}

#SubMenu ul li a:link {
    /* All anchor tags - Link */
    text-decoration: none;
}

#SubMenu ul li a:visited {
    /* All anchor tags - Visited */
    text-decoration: none;
}

#SubMenu ul li a:hover {
    /* All anchor tags - Hover */
    text-decoration: underline;
}

#SubMenu ul li a:active {
    /* All anchor tags - Active */
}

/* ####################################
   Section Label
   ################################## */

#SubMenu #SubMenuSection {
    margin: 0;
    padding: 10px 0 0 10px;

    font-size: 116.7%;
    font-weight: bold;
}

    #SubMenu #SubMenuSection a {
        display: block; /* Note: display:block makes the links larger and easier to access for mobility challenged users. */
        width: 100%; /* Careful with this if padding/margins/borders are added. Otherwise required for IE6 to fill the block with the link. */
        color: #303030;
    }

    #SubMenu #SubMenuSection .section {
        margin: 0;
        padding: 4px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    #SubMenu #SubMenuSection .sectionSelected {
        margin: 0;
        padding: 4px 0;
        background: #f8f8f8;
        border-bottom: 1px solid #f0f0f0;
    }

/* ####################################
   List Layout
   ################################## */

#SubMenu ul {
    /* The sub menu list */
    margin: 0;
    padding: 0 0 0 10px;
    
    list-style: none;
}

    #SubMenu ul li {
        /* All list items */
        margin: 0;
        padding: 4px 0;
        
        border-bottom: 1px solid #f0f0f0;
    }
    
        #SubMenu ul ul li {
            /* Second level list items */
            margin: 0 0 0 12px;
            padding: 5px 0 0 0;
            
            font-size: 91.7%;
            
            border: 0;
        }
        
            #SubMenu ul ul ul li {
                /* Third level list items */
                margin: 0 0 0 12px;
                padding: 5px 0 0 0;
                
                font-size: 100%;
                
                border: 0;
            }
            
                #SubMenu ul ul ul ul li {
                    /* Fourth level list items */
                    margin: 0 0 0 12px;
                    padding: 5px 0 0 0;
                    
                    font-size: 100%;
                    
                    border: 0;
                }

/* ####################################
   Current Branch & Current Pages
   ################################## */

#SubMenu ul li.currentBranch {
    /* Any parent list item on the currently open branch */
    background: #f8f8f8;
}

#SubMenu ul li.currentPage {
    /* The list item containing the current page link */
}

    #SubMenu ul li ul li.currentPage {
        /* The list item containing the current page link at the second level and below */
    }

    #SubMenu ul li.currentPage a {
        /* The current page link */
        font-weight: bold;
        text-decoration: underline;
    }

        #SubMenu ul li.currentPage li {
            /* Children of the current page list item */
        }
        
            #SubMenu ul li.currentPage li a:link {
                font-weight: normal;
                text-decoration: none;
            }
            
            #SubMenu ul li.currentPage li a:visited {
                font-weight: normal;
                text-decoration: none;
            }
            
            #SubMenu ul li.currentPage li a:active {
                text-decoration: underline;
            }
            
            #SubMenu ul li.currentPage li a:hover {
                text-decoration: underline;
            }

/* ####################################
   List Items by Level/Position
   ################################## */

/* Examples... */

#SubMenu .level1 .item1 {
    /* First level, first item */
}

#SubMenu .item1 {
    /* All list items in the first position of any list in the sub menu */ 
}

/* ####################################
   Named Items
   - Individual named menu items can be styled here
   ################################## */

/* Examples... */

#subMenu_exampletextid {
}

    #subMenu_exampletextid a {
        /* Links underneath exampletextid */
    }
/* ############################################################################
   ## 
   ##  TABLE STYLES
   ##
   ######################################################################### */

table {
    empty-cells: show;
    border-collapse: collapse;
}

tbody {
}

th {
    text-align: left;
    font-weight: bold;
}

tr {
}

td {
}
/* ############################################################################
   ## 
   ##  CONTENT CLASSES
   ##  - All of these are included as style options in the CMS visual editor
   ##
   ######################################################################### */

/* ####################################
   General Classes
   ################################## */

.big {
    font-size: 116.7%;
}

.small {
    font-size: 91.7%;
}

.hidden {
    display: none;
}

.date, .author {
    font-size: 91.7%;
    color: #909090;
}

.cmHighlight, .cmhighlight {
    border-bottom: 3px double;
}

.arrowHighlight {
    padding-left: 14px;
    background: url('../images/arrow_grey_right.gif') 2px 2px no-repeat;
}

.dropQuote1 {
    margin-left: 10%;
    margin-right: 10%;
    padding: 2% 0;
    color: #99cc00;
    text-align: center;
    font-size: 125%;
    font-style: italic;
    border-top: #99cc00 2px solid;
    border-bottom: #99cc00 2px solid;
}

.pdf {
    min-height: 16px;
    padding: 1px 0 0 20px;
    text-decoration: none;
    font-weight: bold;
    background: url('../images/icons/16x16_pdf.gif') top left no-repeat;
}

    .pdf:link {
        text-decoration: none;
    }

    .pdf:visited {
        text-decoration: none;
    }

    .pdf:hover {
        text-decoration: underline;
    }

.helpText {
    position: relative;
    float: left;
    min-height: 20px;
    padding: 4px 0 0 20px;
    margin-left: 10px;
    background: url('../images/icons/16x16_help.gif') 0px 3px no-repeat;
}

    label .helpText, .fieldTitle .helpText {
        margin-left: 0px;
        font-size: 91.7%;
        font-weight: normal;
    }

.required, .requiredField {
    display: inline-block;
    margin: 0 0.25em;
    width: 9px;
    height: 9px;
    font-weight: bold;
    font-size: 125%;
    text-indent: -1000em;
    overflow: hidden;
    background: url('../images/icons/required_marker.gif') no-repeat;
}

.glossaryTerm {
    padding-right: 12px;
    background: url('../images/icons/glossary_link.gif') 2px 0px no-repeat;
    border-bottom: 1px dotted;
}

.paging {
    margin: 1em 0 1em 0;
    padding: 1em 0 1em 0;
    
    border-top: #e0e0e0 1px solid;
    border-bottom: #e0e0e0 1px solid;
}

/* ####################################
   Application / Form Buttons
   - Listed here instead of DefaultForms.css because buttons may appear outside forms
   ################################## */

/* All application buttons should have the "applicationButton" class. */

.applicationButton {
}

/* Individual button types */

.submitButton, .submit { /* .submit is deprecated and will soon be removed but included here for backward compatibility. */
    clear: left;
    margin: 0 0 1em;
}

.resetButton {
}

.cancelButton {
}

.okButton {
}

.yesButton {
}

.noButton {
}

.continueButton {
}

.backButton {
}

.nextButton {
}

.previousButton {
}

.selectButton {
}

/* Some buttons are different sizes. If background images are used, these classes can be useful. */

.shortButton {
}

.longButton {
}

/* ####################################
   Specalised Links
   ################################## */

.linkPrint {
    padding: 0 0 0 20px;
    background: url('../images/icons/16x16_printer.gif') no-repeat;
}

.linkEmail {
    padding: 0 0 0 20px;
    background: url('../images/icons/16x16_email.gif') no-repeat;
}

.linkFeedback, .linkContact {
    padding: 0 0 0 20px;
    background: url('../images/icons/16x16_book.gif') no-repeat;
}

.linkPageTop{
    padding: 0 0 0 12px;
    background: url('../images/arrow_red_up.gif') 0px 2px no-repeat;
}

#PageFunctionsBottom .linkPageTop {
    padding: 0 0 0 12px;
    background: url('../images/arrow_grey_up.gif') 0px 2px no-repeat;
}

/* ####################################
   Special Lists
   ################################## */

ul.arrowPoints, ol.arrowPoints {
    margin: 1em 0;
    padding: 0;
    list-style: none;
}

    ul.arrowPoints li, ol.arrowPoints li {
        padding-left: 14px;
        margin-bottom: 0.5em;
        background: url('../images/arrow_grey_right.gif') 0px 2px no-repeat;
    }

ul.warnings {
    margin: 0.5em 0 1.35em 0;
    padding: 0;
    list-style: none;
}

    ul.warnings li {
        margin: 0 0 0.75em 0;
        padding: 0 0 0 24px;
        background: url('/App_Themes/Default/images/icons/16x16_warning.gif') no-repeat;
        min-height: 16px;
    }
    * html .warnings li {
        /* IE6 Only */
        height: 16px;
    }

/* ####################################
   Message Boxes
   ################################## */

.messageError {
    position: relative;
    clear: left;
    margin: 15px 0; 
    padding: 15px;
    border: 1px solid #EC5F35;
}

    .messageError h1, .messageError h2, .messageError h3, .messageError h4 {
        font-family: arial, helvetica, sans-serif;
        font-size: 125%;
        font-weight: bold;
        margin: 0;
        padding-bottom: 0; 
        color: #EC5F35;
        border: none;
        background: none;
    }

    .messageError p {
        margin: 0 0 0.5em;
    }

    .messageError .code {
        margin-top: 2px; 
        padding-top: 0; 
        font-size: 91.7%; 
        font-weight: bold; 
        color: #EC5F35;
    }
    
    fieldset .messageError {
        margin-left: 4px;
        margin-right: 4px;
        padding: 4px;
    }

.messageConfirm {
    position: relative;
    clear: left;
    margin: 15px 0; 
    padding: 15px;
    border: 1px solid #939f38;
}

    .messageConfirm h1, .messageConfirm h2, .messageConfirm h3, .messageConfirm h4 {
        font-family: arial, helvetica, sans-serif;
        font-size: 125%;
        font-weight: bold;
        margin: 0;
        padding-bottom: 0; 
        color: #939f38;
        border: none;
        background: none;
    }

    .messageConfirm p {
        margin: 0 0 0.5em;
    }

    .messageConfirm .code {
        margin-top: 2px; 
        padding-top: 0; 
        font-size: 91.7%; 
        font-weight: bold; 
        color: #939f38;
    }
    
    fieldset .messageConfirm {
        margin-left: 4px;
        margin-right: 4px;
        padding: 4px;
    }

.messageInformation {
    position: relative;
    clear: left;
    margin: 15px 0; 
    padding: 15px;
    border: 1px solid #aba000;
}

    .messageInformation h1, .messageInformation h2, .messageInformation h3, .messageInformation h4 {
        font-family: arial, helvetica, sans-serif;
        font-size: 125%;
        font-weight: bold;
        margin: 0;
        padding-bottom: 0; 
        color: #aba000;
        border: none;
        background: none;
    }

    .messageInformation p {
        margin: 0 0 0.5em;
    }

    .messageInformation .code {
        margin-top: 2px; 
        padding-top: 0; 
        font-size: 91.7%; 
        font-weight: bold; 
        color: #aba000;
    }
    
    fieldset .messageInformation {
        margin-left: 4px;
        margin-right: 4px;
        padding: 4px;
    }

/* ####################################
   For Developers
   ################################## */

.developer {
    position: relative;
    clear: left;
    margin: 15px; 
    padding: 15px;
    border: 1px solid #939f38;
}

    .developer h1, .developer h2, .developer h3, .developer h4 {
        font-family: arial, helvetica, sans-serif;
        font-size: 125%;
        font-weight: bold;
        margin: 0;
        padding-bottom: 0; 
        color: #939f38;
        border: none;
        background: none;
    }

    .developer .code {
        margin-top: 2px; 
        padding-top: 0; 
        font-size: 91.7%; 
        font-weight: bold; 
        color: #939f38;
    }
/* ############################################################################
   ## 
   ##  FORM STYLES
   ##
   ##  NOTES
   ##  ----------
   ##  * The layout described in this style sheet is a two column form layout,
   ##    with field labels on the left and fields with their other associated
   ##    bits and pieces on the right.
   ##  * Read the document titled "Forms HTML Markup Standards" to understand
   ##    how to use this style sheet.
   ##  * See DefaultPageElements.css for application button styles
   ##  * DO NOT muck around with the structure of this file - you will only
   ##    fall into an abyss of crazy CSS and HTML headaches! If structural 
   ##    customisations are really necessary, put them in the section provided 
   ##    at the end of the file.
   ##  * RW 20090729 - This style sheet has been extended to cover metadata 
   ##    field collections too, which aren't forms, but generally deal with 
   ##    the same kind of data that is managed using forms and is often 
   ##    presented the same way. Look for new classes "dataContainer" and 
   ##    "dataFields".
   ##
   ######################################################################### */

/* ####################################
   General Form HTML Tags
   ################################## */

form, .form, .dataContainer {
    position: relative;
    float: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

fieldset, .fieldset {
    display: block;
    float: left;
    width: 98.75%;
    min-width: 98.75%; /* IE7 doesn't like the width property but this works and doesn't spoil anything for other browsers. */
    padding: 0 0.62%; /* Width + Horizontal padding + Horizontal margin should equal just under 100% to make room for the border. */
    margin: 0 0 1.5em;
    border: #ebebeb 1px solid; 
}
* html fieldset, * html .fieldset {
    /* IE6 Only */
    float: none; /* The left float can cause all kinds of headaches at the end of a form. */
}
*:first-child+html fieldset, *:first-child+html .fieldset {
    /* IE7 Only */
    float: none; /* The left float can cause all kinds of headaches at the end of a form. */
}

    fieldset legend {
        padding: 4px;
        margin: 0;
        color: #000000;
        font-weight: bold;
    }
    
    .fieldset .legend {
        display: inline-block;
        padding: 4px;
        margin-top: -1em; /* Works okay for font-size 75% + padding 4px + parent padding 0.062%. Adjust for other settings. */
        background: #ffffff;
        color: #000000;
        font-weight: bold;
    }
    * html .fieldset .legend {
        /* IE6 Only */
        margin-top: auto; /* Otherwise IE6 cuts it off as thought the fieldset has overflow:hidden. For improvement... */
    }

    fieldset p, fieldset h1, fieldset h2, fieldset h3, fieldset h4, fieldset h5, fieldset h6,
    .fieldset p, .fieldset h1, .fieldset h2, .fieldset h3, .fieldset h4, .fieldset h5, .fieldset h6 {
        margin-left: 4px;
        margin-right: 4px;
    }
    
/* ####################################
   Form & Data Fields Lists
   ################################## */

.formFields, .dataFields {
    padding: 0;
    margin: 0;
    list-style: none;
}

    .formFields li, .dataFields li {
        list-style: none;
    }

    /* Don't inherit list-style for child lists of .formFields by default, as they're probably regular content. */
    .formFields ol, .dataFields ol {
        list-style: decimal;
    }
    .formFields ul, .dataFields ul {
        list-style: disc;
    }

/* ####################################
   Form & Data Field Wrappers (usually inside lists)
   ################################## */

.fieldContainer, .formFields li, .dataFields li {
    position: relative;
    float: left; /* display:inline-block would be a better way to give the object dimension, but IE8 has problems in that case with our implementation of dynamic classes on "other" options for radio/checkbox fields */
    clear: left;
    width: 100%;
    padding: 0;
    margin: 0.25em 0 0.75em;
}
* html .fieldContainer, * html .formFields li, * html .dataFields li {
    /* IE6 Only */
    /* To make IE6 apply margins, etc. properly at the end of a containing element. */
    float: none;
    display: inline-block;
}
*:first-child+html .fieldContainer, *:first-child+html .formFields li, *:first-child+html .dataFields li {
    /* IE7 Only */
    /* To make IE7 apply margins, etc. properly at the end of a containing element. */
    float: none;
    display: inline-block;
}

    /* The following wrappers should be inside a .fieldContainer wrapper if the .fieldContainer class is used. However the CSS below does not specify .fieldContainer so that the following classes can also be used when .fieldContainer is not used (e.g. in simple forms). */

    .fieldTitle, .formFields label, .dataFields label {
        position: relative;
        float: left;
        width: 150px;
        padding: 4px;
        margin-right: 4px; /* Should match negative margin on .fieldContent - See below. */
        background: #f0f0f0;
    }
    
    .fieldText { /* When it appears outside .fieldContent - e.g. on simple forms. */
        position: relative;
        float: left;
        padding: 4px;
    }

    .fieldContent {
        display: block;
        position: relative;
        float: left;
        max-width: 550px;   /* Affected by #Template{width}. Makes sure that fields on two column forms don't expand too far and hence clear the left floated field title. */
    }
        
            .fieldContent .fieldText { /* When it appears inside .fieldContent. Might need to override values from above. */
                float: none;
                padding: 4px 0;
            }

            .fieldControls {
                /* It's possible that .fieldControls/.fieldData exists without a .fieldContent wrapper. */
                float: left;
            }
            .fieldContent .fieldControls {
                /* When these fields ARE inside the .fieldContent wrapper. Might need to override settings from .fieldControls/.fieldData above. */
            }
                    
/* ####################################
   Form Table
   These table settings must be defined after the core styles. (FF is fussy with the tables.) 
   ################################## */

table.formFields, table.dataFields {
    /* If putting settings here, remember that IE6 doesn't like element.class syntax */
    border-collapse: separate;
    border: 1px;
}
    
    .formFields tr, .dataFields tr {
    }
    
        .formFields tr th, .dataFields tr th {
        }
        
        .formFields tr td, .dataFields tr td {
        }

/* ####################################
   Field Types
   ################################## */

.textField {
}

.textareaField {
}

.numberField {
    /* Note: Number fields are also text fields. */
}

.emailField {
    /* Note: Email fields are also text fields. */
}

.dateField {
    /* Note: Date fields are also text fields. */
}
        
    .dateField .dateSelector {
        display: inline-block;
        height: 16px;
        padding-left: 20px;
        padding-top: 2px;
        margin-top: 2px;
        margin-left: 0.5em;
        background: url('../images/icons/16x16_calendar.gif') no-repeat;
    }

.dateDropdownField {
    /* A date selected by using three dropdowns - Day/Month/Year */
}

    .dateDropdownField fieldset {
        clear: none;
        width: auto;
        min-width: 0px;
        padding: 0;
        margin: 0;
        border: 0;
    }

        .dateDropdownField fieldset legend {
            display: none; /* Current accessible browsers ignore this. */
        }

    .dateDropdownField .fieldControls {
    }

        .dateDropdownField .fieldControls label {
            display: none;
        }

        .dateDropdownField .fieldControls select {
        }

        @media aural {
            .dateDropdownField .fieldControls label {
                float: left;
            }

            .dateDropdownField .fieldControls select {
                float: left;
            }
        }

.radioField, .checkboxField {
}

    .radioField fieldset, .checkboxField fieldset {
        clear: none;
        width: auto;
        min-width: 0px;
        padding: 0;
        margin: 0;
        border: 0;
    }

        .radioField fieldset legend, .checkboxField fieldset legend {
            display: none; /* Current accessible browsers ignore this. */
        }
        
    .radioField label, .checkboxField label {
        /* Assume controls are implicitly associated with labels, i.e. inside the label tag. */
        background: transparent;
        margin-bottom: 0.25em;
        padding-bottom: 1px; /* Make room for the hover border (see below) so that elements don't jump around. */
    }

        .radioField label:hover, .checkboxField label:hover {
            padding-bottom: 0;
            border-bottom: 1px dotted;
        }
        
    .radioField input, .checkboxField input {
    }
    
    .radioField .horizontalOptions, .checkboxField .horizontalOptions {
    }
            
        .radioField .horizontalOptions label, .checkboxField .horizontalOptions label {
            width: auto;
            margin-right: 1em;
        }
    
    .radioField .verticalOptions, .checkboxField .verticalOptions {
    }

        .radioField .verticalOptions label, .checkboxField .verticalOptions label {
            /* Must override settings from higher up. */
            position: relative;
            float: left;
            clear: left;
            width: auto;
        }
        
    /***
     * Radio/Checkbox Fields in tables
     * - ASP.Net uses tables for radio and checkbox lists and explicitly (rather than implicitly) associates inputs/labels - i.e. the input tag is not wrapped by the label tag. 
     */
    
    .radioField table, .checkboxField table {
    }
    
        .radioField tr, .checkboxField tr {
        }
    
            .radioField td, .checkboxField td {
                padding-right: 1em;
            }
    
                .radioField td label, .checkboxField td label {
                    float: none;
                    width: auto !important;
                }
        
    /***
     * "Other" option 
     * - Styles for (implied) horizontalOptions are defined first in case the horizontal/vertical class doesn't exist, as the natural layout is closest to this.
     * - .radioField, .checkboxField selectors not specified as layout is the same and therefore the CSS is simplified.
     */

    /* "Other" field, hidden with select control. */

    .otherOptionSelectTextHidden { 
        display: inline-block; 
    }

        .otherOptionSelectTextHidden .otherOptionEnable { 
            /* This is a <label> tag */
        }
                            
        .otherOptionSelectTextHidden .otherOptionText {
            display: inline;
        }
        
            .otherOptionSelectTextHidden .otherOptionText label {
                display: none; /* Ignored by all current accessible browsers, so this is the easiest way to hide the label. Otherwise we'd have to use the code below. */
                position: absolute; /* Takes up no space in the page. */
                text-indent: -10000em; /* Makes the text invisible without hiding it (so accessible browsers can see it). */
            }
            
            .otherOptionSelectTextHidden .otherOptionText input {
                display: block;
                clear: left;
                margin-left: 1.75em;
            }
            
    .verticalOptions .otherOptionSelectTextHidden {
        display: block;
        clear: left; /* For IE6 & IE7. FF and IE8 do it right with just display: block; */
    }

        .verticalOptions .otherOptionSelectTextHidden .otherOptionEnable {
            /* This is a <label> tag */
        }

        .verticalOptions .otherOptionSelectTextHidden .otherOptionText {
            display: block;
            clear: left;
        }

            .verticalOptions .otherOptionSelectTextHidden .otherOptionText label {
                display: none; /* Ignored by all current accessible browsers, so this is the easiest way to hide the label. Otherwise we'd have to use the code below. */
                position: absolute; /* Takes up no space in the page. */
                text-indent: -10000em; /* Makes the text invisible without hiding it (so accessible browsers can see it). */
            }

            .verticalOptions .otherOptionSelectTextHidden .otherOptionText input {
                display: block;
            }

    /* "Other" field, visible with select control. */
    
    .otherOptionSelectTextVisible {
        display: inline-block;
    }

        .otherOptionSelectTextVisible .otherOptionEnable { 
            /* This is a <label> tag */
        }
                            
        .otherOptionSelectTextVisible .otherOptionText {
            display: inline;
        }
        
            .otherOptionSelectTextVisible .otherOptionText label {
                display: none; /* Ignored by all current accessible browsers, so this is the easiest way to hide the label. Otherwise we'd have to use the code below. */
                position: absolute; /* Takes up no space in the page. */
                text-indent: -10000em; /* Makes the text invisible without hiding it (so accessible browsers can see it). */
            }
            
            .otherOptionSelectTextVisible .otherOptionText input {
                display: block;
                clear: left;
                margin-left: 1.75em;
            }
    
    .verticalOptions .otherOptionSelectTextVisible {
        display: block;
        clear: left; /* For IE6 & IE7. FF and IE8 do it right with just display: block; */
    }

        .verticalOptions .otherOptionSelectTextVisible .otherOptionEnable { 
            /* This is a <label> tag */
        }
                            
        .verticalOptions .otherOptionSelectTextVisible .otherOptionText {
        }
        
            .verticalOptions .otherOptionSelectTextVisible .otherOptionText label {
            }
            
            .verticalOptions .otherOptionSelectTextVisible .otherOptionText input {
            }

    /* "Other" field, text only (always visible). */
    
    .otherOptionTextOnly {
        /* Always on a new line, even for horizontal options. */
        display: block;
        clear: left;
        padding: 0.35em;
    }

        .otherOptionTextOnly .otherOptionText {
        }
        
            .otherOptionTextOnly .otherOptionText label {
            }
            
            .otherOptionTextOnly .otherOptionText input {
                display: block;
                clear: left;
            }
    
    .verticalOptions .otherOptionTextOnly {
    }

        .verticalOptions .otherOptionTextOnly .otherOptionText {
        }
        
            .verticalOptions .otherOptionTextOnly .otherOptionText label {
            }
            
            .verticalOptions .otherOptionTextOnly .otherOptionText input {
            }

    /* Other option - Class used to dynamically hide the option */

    .otherOptionSelectTextHidden .otherOptionHideText {
        display: none !important;
    }

/* The hacks for singleCheckboxField below aren't pretty... Fix later! */

.singleCheckboxField {
    position: relative;
}

    .singleCheckboxField .required {
        vertical-align: middle; /* Affects IE6 & IE7 and it doesn't hurt to explicitly state it for the other browsers. */
    }

    .singleCheckboxField label {
        position: relative;
        width: auto;
        padding-left: 24px;
        background: transparent;
    }

    .singleCheckboxField label input {
        position: absolute;
        width: auto;
        margin-top: -2px;
        margin-left: -22px;
    }
    
       /*.singleCheckboxField label input, x:-moz-any-link { BP Commented as CSS Validation Fail*/
	   .singleCheckboxField label input{
            /* Firefox Only */
            margin-top: 1px;
            margin-left: -18px;
        }
        *:first-child+html .singleCheckboxField label input {
            /* IE7 Only */
            margin-top: -3px;
            margin-left: -22px;
        }

.dropdownField { 
}
    
    /* "Other" fields. Note that certain styles are already set from the radio/checkbox field above. */

    .dropdownField .otherOptionSelectTextHidden {
        display: inline;
    }

        .dropdownField .otherOptionSelectTextHidden .otherOptionText {
            display: inline;
        }

            .dropdownField .otherOptionSelectTextHidden .otherOptionText label {
                width: auto;
                background: transparent;
            }

            .dropdownField .otherOptionSelectTextHidden .otherOptionText input {
                display: inline;
                margin-left: auto;
            }

    .dropdownField .otherOptionSelectTextVisible {
        display: block;
        padding: 0.35em 0.35em 0.35em 0;
    }

        .dropdownField .otherOptionSelectTextVisible .otherOptionText {
        }

            .dropdownField .otherOptionSelectTextVisible .otherOptionText label {
                width: auto;
                background: transparent;
            }

            .dropdownField .otherOptionSelectTextVisible .otherOptionText input {
                display: inline-block;
                margin-left: auto;
            }

    
    .dropdownField .otherOptionTextOnly {
        display: block;
        padding: 0.35em 0.35em 0.35em 0;
    }

        .dropdownField .otherOptionTextOnly .otherOptionText {
        }

            .dropdownField .otherOptionTextOnly .otherOptionText label {
                width: auto;
                background: transparent;
            }

            .dropdownField .otherOptionTextOnly .otherOptionText input {
            }

.multiselectField {
}

.matrixField {
}

    .matrixField .fieldContent table.subFields {
        width: 100%;
        margin-top: 0.5em;
        border: 1px #e0e0e0 solid;
        border-top: 0;
    }
    
        .matrixField table.subFields caption {
            display: none;
        }
    
        .matrixField table.subFields tr.subFieldsTableHeader {
        }

            .matrixField table.subFields tr.subFieldsTableHeader th {
                font-weight: normal;
                background: #f0f0f0;
            }
        
        .matrixField table.subFields tr.subFieldContainer {
        }

            .matrixField table.subFields tr.subFieldContainer th {
                font-weight: normal;
                background: #f8f8f8;
                border: 1px #e0e0e0 solid;
            }

            .matrixField table.subFields tr.subFieldContainer td {
                display: table-cell; /* This might have been set to something else due to class names for "other" options. */
                /*padding: auto; BP : Commentted as it fails CSS Validation*/
                background: #ffffff;
                border: 1px #e0e0e0 solid;
            }

    .matrixField .fieldContent table.horizontalOptions {
    }
    * html .matrixField .fieldContent table.horizontalOptions {
        /* IE6 Only */
        margin-top: -2.5em; /* Why is IE bumping the table down? Fix this nasty hack later. */
    }
    *:first-child+html .matrixField .fieldContent table.horizontalOptions {
        /* IE7 Only */
        margin-top: -2.5em; /* Why is IE bumping the table down? Fix this nasty hack later. */
    }

            .matrixField .fieldContent table.horizontalOptions tr {
            }
            
                .matrixField .fieldContent table.horizontalOptions tr.checkboxField td ,
                .matrixField .fieldContent table.horizontalOptions tr.radioField td {
                }
                                
                    .matrixField .fieldContent table.horizontalOptions tr.checkboxField td input,
                    .matrixField .fieldContent table.horizontalOptions tr.radioField td input {
                        float: left;
                    }
                    
                    .matrixField .fieldContent table.horizontalOptions tr.checkboxField td label,
                    .matrixField .fieldContent table.horizontalOptions tr.radioField td label {
                        float: left;
                    }
                
    .matrixField table.matrixLabelsInHeader {
    }
    
        .matrixField table.matrixLabelsInHeader tr.subFieldsTableHeader {
        }
    
            .matrixField table.matrixLabelsInHeader tr.subFieldsTableHeader th {
                border: #e0e0e0 1px solid;
            }
        
        .matrixField table.matrixLabelsInHeader tr.subFieldContainer {
        }
        
                .matrixField table.matrixLabelsInHeader tr.subFieldContainer td {
                }

                    .matrixField table.matrixLabelsInHeader tr.subFieldContainer td label {
                        display: none;
                    }
                        
                        .matrixField table.matrixLabelsInHeader tr.subFieldContainer td.otherOptionSelectTextVisible input {
                            display: inline-block;
                            float: none;
                            clear: none;
                            margin-left: 5px;
                        }

    .matrixField table.matrixLabelsInCells {
    }

        .matrixField table.matrixLabelsInCells tr.subFieldsTableHeader {
            display: none;
        }

/* ####################################
   Special elements on a form
   ################################## */

.readOnly {
    color: #909090;
    background-color: #f0f0f0;
}

.address2 {
}

    .address2 label {
        background: transparent;
    }

/* ####################################
   Structural Customisations
   ################################## */

/* Put your own structural customisations here (if necessary) rather than changing the design of this file. */

.noField {
    display: none;
}

/* ####################################
   The global ASP.Net form
   - DON'T CHANGE
   - Override some values to stop the form styles breaking other parts of the site design.
   ################################## */

#aspnetForm {
    position: relative;
    float: none;
    margin: auto;
    padding: 0;
}
   
/*Form System*/

.fieldRow, .sectionInfo{width:100%;margin-bottom:5px;display:inline-block;clear:both;}
    .fieldLabel{width:45%;margin-right:5%;float:left;background:#F0F0F0;padding:4px;}
    .fieldInput{width:48%;float:left;}
    .fieldInputRow{width:100%;}
    
    .inputRadio table,.inputCheckbox table{width:100%;padding:0;margin:0;}
    .inputRadio table tr,.inputCheckbox table tr{float:left;margin-left:1%;text-align:left;}
    .fieldInput input[type="text"], .fieldInput textarea, .fieldInput select{width:200px;}
	.fieldInput td { border-top:none;padding:0;text-align: left;vertical-align: top;}
	.txtReadOnly{background:#f0f0f0;color:#999;}
	
.sectionInfo p{ margin:0 0 0.5em; }
.errorInput {color:Red;font-size:80%;padding:0 0 0 10px;}
.errorInputNewLine{display:block;color:Red;font-size:80%;padding:0;}

.formErrors {    
	border: 1px solid red;
    clear: left;
    margin: 15px 0;
    padding: 15px;
    position: relative;
	background:#F8F8F8;
}
.errorMsg {border: 1px solid red;background:#F8F8F8;padding: 15px;}


/* The comments form. */
.FormMessage {
    border: 1px solid #3aaaaf;
    padding: 10px 20px;
    margin-bottom: 20px;
    }
#Comments {
    border-bottom: 1px solid #777777;
    margin-bottom: 20px;
}
#CommentsHeader {
    border-bottom: 1px solid #777777;
    margin-bottom: 2px;
    padding: 8px 10px 0px;
    }
    #CommentsHeader h2 {
        margin-bottom: 4px;
    }
#Comment {
    padding: 8px 10px 2px;
    }
    .Comment1 {
        background-color: rgb(240, 240, 240);
        }
    .Comment2 {
        background-color: rgb(255, 255, 255);
        }
#Comments #Comment li input {
    border: 1px solid red;
}

/*PopupForm*/
#popupForm{display:none;}

/*Youtube Video Responsive*/
.video-container{
	width:100%;
	padding:0% 0% 2% 0;
	display:inline-block;
	z-index:-1;
}
.video-container-inner {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.video-container-inner iframe,  
.video-container-inner object,  
.video-container-inner embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*Share Css*/
#PostTwitter{float:left;height:25px;padding-top:55px;width:50px;margin-right:10px;background:url(/App_Themes/Default/images/icons/social-media-post.png) -100px 0 no-repeat;display:block;text-align:center;font-size:8px;font-weight:bold;}
#PostTwitter:hover{background:url(/App_Themes/Default/images/icons/social-media-post.png) -150px 0 no-repeat;text-decoration:none;}
#PostFacebook{float:left;height:25px;width:50px;padding-top:55px;margin-left:10px;background:url(/App_Themes/Default/images/icons/social-media-post.png) 0 0 no-repeat;display:block;text-align:center;font-size:8px;font-weight:bold;}
#PostFacebook:hover{background:url(/App_Themes/Default/images/icons/social-media-post.png) -50px 0 no-repeat;text-decoration:none;}