/* ############################################################################
   ## 
   ##  PAGE LAYOUT
   ##
   ######################################################################### */
.desktop{
}
.mobile{
	display:none !important;
}
/* ####################################
   Core Template
   ####################################
   
    <TemplateWrapper>
        <Template>
            <AccessibilityToolbar />
            <Header />
            <SubHeader />
            <Content>
                <Page>
                    <PageTop>
                        <TrailNav />
                        <PageFunctionsTop />
                    </PageTop>
                    <PageContent>
                        <Primary />
                        <Secondary />
                    </PageContent>
                    <PageBottom>
                        <PageFunctionsBottom />
                    </PageBottom>
                </Page>
                <Tertiary />
            </Content>
            <Footer />
        </Template>
    </TemplateWrapper>
*/

#TemplateWrapper {
    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: #ffffff;
}

    #AccessibilityToolbar {
        margin:10px 0 0 0;
        text-align: center;
		display: inline-block;
    }

        #AccessibilityToolbarInner {
			width:1024px;
            margin: 0 auto;
            text-align: right;
            font-size:85%;
        }

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

                #AccessibilityToolbar li {
                    display: inline-block;
                    margin-right:0px;
                }

                    #AccessibilityToolbar li a {
                        padding:0;
						color:#545454;
                    }
						#AccessibilityToolbar li a:hover{
							text-decoration:none;
							color:#0F1E64;
						}
						
						#AccessibilityToolbar li a img{
							width:20px;
							margin:0 5px 0 0;
							vertical-align:middle;
						}

                #AccessibilityToolbar ul li#JumpToMenu, #AccessibilityToolbar ul li#JumpToSearch {
                    display: none;
                }

#Template {
    position: relative;
    width: 100%;            /* Search for "#Template{width}" in CSS files to update values related to this.
    min-width: 960px; */
    background: #ffffff;
    padding:0;
    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. */
    z-index: 5;         /* Important for the main menu dropdown to appear above page content in IE */
}

    #TemplateInner {
    }

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

    #Header {
        position: relative; /* z-index doesn't work without position. */
        background: #ffffff;
		padding:0 0 40px 0;
    }
    #HeaderInner {
		width:1024px;
		height:74px;
		margin:0 auto;
		padding:0 0 20px 0;
		position:relative;
    }
    
        #Header a {
        }
    
            #Header a:link {
            }
    
            #Header a:visited {
            }
    
            #Header a:hover {
            }
    
            #Header a:active {
            }
			
        #Header #HeaderContent{
			width:155px;
			height:74px;
			float:left;
			display:inline-block;
		}
			#Header #HeaderContent #HeaderContentInner{
				width:100%;
				display:inline-block;
			}
		
        #Header #Logo {
			width:155px;
			height:74px;
			float:left;
			display:inline-block;
        }
			#Header #Logo a{
				display:block;
			}
				#Header #Logo a img{
					width:100%;
					max-width:155px;
				}

        #Header #SearchSite {
			width:360px;
			height:44px;
            margin: 20px 0px 10px;
            position: relative;
            float: right;
			border: #ececec 1px solid;
			border-radius: 20px;
			background: url('/images/templates/icons/loading.gif') 98% center no-repeat;
			background-size: 30px;
        }

			#Header #SearchSite fieldset {
				border: none;
			}

			#Header #SearchSite legend {
				display: none;
			}

            #Header #SearchSite label {
                color: #909090;
				display:none;
            }
            
            #Header #SearchSite input {
				width:85%;
				height: 44px;
                padding: 0 20px;
                margin: 0;
				border-radius: 20px;
				border: none;
				box-sizing: border-box;
			}

            #Header #SearchSite input:focus {
				outline: none;
				/*background-color: #f9f9f9;
				border: 1px solid #009bdc;*/
            }
			/*
            #Header #SearchSite input#Keywords:focus {
				border-right: 2px solid #b3e1f5;
			}
			*/

			#Header #SearchSite .formFields .fieldContent {
				background: none;
				max-width: 88%;
				width: 100%;
			}

            #Header #SearchSite input#SearchButton:focus {
				border: 1px solid #009bdc;
				border-left: 2px solid #b3e1f5;
			}
            #Header #SearchSite .button.button-search {
				position: absolute;
				right: 5px;
				box-sizing:border-box;
				width:10%;
				height:44px;
				float:left;
                border: none;
				border-left:none;
				border-top-right-radius:19px;
				border-bottom-right-radius:19px;
				border-collapse:collapse;
				color:#434A54;
				text-indent:-9999px;
				background: #fff url(/App_Sites/ccv/Templates/Default/images/template/search-icon.png) center center no-repeat;
				background-size: inherit;
				cursor:pointer;
            }
				#Header #SearchSite .button.button-search:hover{
				}

            #Header #SearchSite .keywords {
				box-sizing:border-box;
				width:90%;
				height:44px;
                padding:1% 2%;
				float:left;
                background: #ffffff;
                border: none;
				border-right:none;
				border-top-left-radius:20px;
				border-bottom-left-radius:20px;
            }
                    
            #Header #SearchSite #AdvancedSearchLink {
                display: none;
            }

		#Header #Quicklinks{
			width:350px;
			height:35px;
			padding:0;
			margin: 25px 0px 0 0px;
			float:right;
			text-align: right;
		}
			#Header #Quicklinks p{
				width:100%;
				height:35px;
				margin:0;
				padding:0;
			}
                #Header #Quicklinks p a {
					box-sizing:border-box;
					min-width:95px;
                    height: 35px;
                    padding: 10px;
					margin:0;
                    display: inline-block;
                    color: #0F1E64;
                    text-align: center;
                    font-size: 110%;
                    line-height: 14px;
                    font-family: "FocoCCBold", "FocoBold", Arial, Helvetica, Sans Serif;
					border-radius:5px;
                }
					#Header #Quicklinks p a:hover{
						text-decoration:none;
						color:#003766;
					}
					#Header #Quicklinks p a#header-donate {
						background:#ffd200;
					}
					#Header #Quicklinks p a#header-shop, #Header #Quicklinks p a#header-fundraise{
						margin-right: 5px;
					}
						#Header #Quicklinks p a#header-donate:hover{
							background:#FFF000;
						}
					#Header #Quicklinks p a#header-shop,#Header #Quicklinks p a#header-fundraise,#Header #Quicklinks p a#header-volunteer{
						background:#d3d4df;
					}
						#Header #Quicklinks p a#header-shop:hover,#Header #Quicklinks p a#header-fundraise:hover,#Header #Quicklinks p a#header-volunteer:hover{
							background:#e0e1ea;
						}
        #Header #LoginStatusShort {
            padding: 4px 10px;
        }

        #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;
                }

	#MainMenu {
		position:absolute;
		top: 95px;
		/*left: -7.5px;*/
		float: left;
		clear: both;
		width: 100%;
		margin:0 0 5px 0;
		background: #0f1e64;
		/*
		-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
		box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
		*/
	}
	#MainMenuInner {
		width:1040px;
		margin:0 auto;
	}

	@media screen and (max-width: 1024px) {
		#Header #SearchSite .button.button-search {
			right: 2px;
			width: 33px;
			height: 33px;
		}

		#Header #SearchSite input {
			height: 26px;
		}
	}
        
/* ########################################################
   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.
   ######################################################## */

        #SubHeader {
            clear: both;
			text-align:center;
			line-height: 1.5em;
			font-size: 120%;
        }
			#SubHeader p{
				margin:0;
				padding:0;
			}
			#SubHeaderContent {
				padding: 0 2%;
			}
                #PageBanner {
					background-size: cover;
                    background-position-y: 50%;
                    background-position-x: 50%;
                }
					#PageBannerInner {
						/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.78+10,0.65+23,0+67 */
						/*background: -moz-linear-gradient(45deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.78) 10%, rgba(0,0,0,0.65) 23%, rgba(0,0,0,0) 67%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
						/*background: -webkit-linear-gradient(45deg, rgba(0,0,0,0.78) 0%,rgba(0,0,0,0.78) 10%,rgba(0,0,0,0.65) 23%,rgba(0,0,0,0) 67%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
						/*background: linear-gradient(45deg, rgba(0,0,0,0.78) 0%,rgba(0,0,0,0.78) 10%,rgba(0,0,0,0.65) 23%,rgba(0,0,0,0) 67%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
						/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
					}
						#PageBannerContent {
							color: #fff;
							position: relative;
							width: 1024px;
							height: 450px;
							text-align: left;
							margin: 0 auto;
						}
							#PageBannerContentInner {
								position: absolute;
								bottom: 30px;
								text-shadow: 0px 0px 20px rgb(0,0,0);
								width: 100%;
							}
							@media screen and (max-width: 1060px) {
								#PageBannerContentInner {
									width: 96%;
								}
							}
					#PageBanner h1 {
						color: #fff;
						font-size: 3.5rem;
					}
						@media screen and (max-width: 640px) {
							#PageBanner h1 {font-size: 3rem;}
						}
						@media screen and (max-width: 320px) {
							#PageBanner h1 {font-size: 2.7rem;}
						}
        
        #Content {
            clear: both;
        }
			#ContentInner {
				margin:0 auto;
			}

			#Page {
                line-height: 1.5em;
                font-size: 120%;
            }

				#PageInner {
					width:100%;
					display:inline-block;
				}
            
                #PageTop {
                }
                
                #Page #PageContent {
					box-sizing:border-box;
					width:100%;
					padding:2% 0;
					display:inline-block;
                }
                
                    #Page #PageContent #Primary {
                    }

                    #Page #PageContent #Secondary {
                    }
            
                #PageBottom {
                }
            
            #Tertiary {
				width:100%;
				display:inline-block;
                line-height: 1.5em;
                font-size: 120%;
            }
				#TertiaryInner{
				}
					#TertiaryInner .fullWidth{ 
						padding:2% 0;
						text-align:center;
					}

    /* Themes, spanning all templates */
        
        body.Theme_One {
        }
        
            body.Theme_One #Content {
            }

        body.Theme_Two {
        }
        
            body.Theme_Two  #Content {
            }
        
/* ########################################################
   Footer 
   ######################################################## */

    #Footer {
		width:100%;
		margin:0;
        position: relative;
        clear: both;
        background: #0F1E64;
		display:inline-block;
		color: #ffffff;
    }
    #FooterInner {
		box-sizing: border-box;
		width: 1024px;   
		margin: 0 auto;
		padding: 0;    
    }
        
        #Footer p {
            margin: 0 0 0.5em;
			font-size: 0.9rem;
        }
        #Footer #FooterMenu {
           display: inline-block;
			width: 100%;
        }

			#Footer #FooterMenu .threeCol {
				box-sizing: border-box;
				float: left;
				padding: 4% 0 2% 2%;
				width: 33.3%;
			}
				#Footer #FooterMenu .threeCol:last-child {
					text-align:right;
				}
				#Footer #FooterMenu .threeCol:last-child p{
					margin-bottom:10px;
					padding-bottom:0;
				}
			#Footer #FooterMenu ul {
				margin: 0;
				padding: 0;
				color: #ffffff;
				list-style:none;
			}

            #Footer #FooterMenu li {
                margin: 0 0 5px;
            }

            #Footer #FooterMenu a {
				color: #ffffff;
				text-decoration: none;
            }

                #Footer #FooterMenu a:link {
                }

                #Footer #FooterMenu a:visited {
                }

                #Footer #FooterMenu a:hover {
					text-decoration:underline;
                }

                #Footer #FooterMenu a:active {
                }
		#CharityABN {
			padding: 0;
		}
		#Footer #FooterBottom{
			box-sizing:border-box;
			width:100%;
			padding:2% 0;
			font-size:90%;
			font-style:italic;
			border-top: 1px solid #40509c;
			display:flex;
			align-items: center;
			justify-content: center;
		}
			#Footer #FooterBottom .image{
				padding:0 15px 0 0;
			}
			#Footer #FooterBottom .image img{
				width:50px;
			}
        #Footer #Rights {
        }

        #Footer #CreditsCMS {
            position: absolute;
            top: 10px;
            right: 10px;
        }
        
            #Footer #CreditsCMS a {
                float: left;
                width: 88px;
                height: 31px;
                text-indent: -10000em;
                text-transform: capitalize; /* Make text-indent work in IE7 */
                background: transparent url('../../images/powered_by_cm3_grey.gif') left top no-repeat;
            }

        #Footer #CreditsDesign {
        }

            #Footer #CreditsDesign a {
            }

                #Footer #CreditsDesign a:link {
                }

                #Footer #CreditsDesign a:visited {
                }

                #Footer #CreditsDesign a:hover {
                }

                #Footer #CreditsDesign a:active {
                }

/* Pop Up Window */

#PopupWindow {
    /*width: 700px;*/
    margin: 0 auto;
    text-align: center;
}
	#PopupWindow #Footer{
		width: 100%;
		margin:10px auto;
		padding:0;
		box-sizing: border-box;
		display:inline-block;
	}
	#PopupWindow #FooterInner {
		width: 100%;
		margin: 0 auto;
		padding:10px;
		box-sizing: border-box;
		display:inline-block;
	}
		#PopupWindow  #Footer p {
			width:100%;
			display:inline-block;
		}
		#PopupWindow  #Footer p  a{
			color:#ffffff;
		}
/* ########################################################
   Different Screen Sizes 
   ######################################################## */
   
@media only screen and (max-width: 999px) {
  /* rules that only apply for canvases narrower than 1000px */
}

@media only screen and (device-width: 768px) and (orientation: landscape) {
  /* rules for iPad in landscape orientation */
}

/*  Site Wide Alert */

body#Container_ccv_homepagec_content #SiteWideAlert,body.Container_ccv_donate #SiteWideAlert{display:none;}
#SiteWideAlert {padding:0 10px;background:#ffd200;display:block;}
#SiteWideAlertInner {max-width:1024px;width:100%;padding:0;margin:0 auto;display:flex;justify-content:space-evenly;align-items:center;color:#0F1E64;text-align:center;}
#SiteWideAlert #threeColTable{display:table;width:100%;margin:0;padding:20px 0;}
#SiteWideAlert #threeColTable p{padding:0;margin:0;}
#SiteWideAlert #threeColTable #threeCol1,#SiteWideAlert #threeColTable #threeCol2,#SiteWideAlert #threeColTable #threeCol3{display:table-cell;padding:0;margin:0;vertical-align: middle;}
#SiteWideAlert #threeColTable div#threeCol1{width:330px;text-align:left;}
#SiteWideAlert #threeColTable div#threeCol3{width:140px;text-align:right;}
#Content #SiteWideAlert a{font-size: 1rem; width:100px; min-width:100px;font-weight:bold;}
@media screen and (max-width: 710px) {
	#SiteWideAlert #threeColTable{display:inline-block;background:none;}
	#SiteWideAlert #threeColTable div#threeCol1,#SiteWideAlert #threeColTable div#threeCol2,#SiteWideAlert #threeColTable div#threeCol3{display:inline-block;width:100%;text-align:center;}
        #SiteWideAlert #threeColTable div#threeCol2{margin:20px 0;}
}