@import url('../../../Default/Css/screen/DefaultScreen.css');

/* ############################################################################
   ## 
   ##  LandingPage2
   ##
   ############################################################################ 

   | Header                               |
   |______________________________________|
   | SubHeader                            |
   |______________________________________|
   | PageTop                              | (TrailNav, PageFunctions)
   |______________________________________|
   |                                      |
   | Primary                              |
   |                                      |
   |______________________________________|
   | Secondary                            |
   |______________________________________|
   | PageBottom                           | (PageFunctions)
   |______________________________________|
   | Footer                               |
   |                                      |
   
    <TemplateWrapper>
        <Template>
            <AccessibilityToolbar />
            <Header />
            <SubHeader />
            <Content>
                <Page>
                    <PageTop>
                        <TrailNav />
                        <PageFunctionsTop />
                    </PageTop>
                    <PageContent>
                        <Primary />
                        <Secondary />
                    </PageContent>
                    <PageBottom>
                        <PageFunctionsBottom />
                    </PageBottom>
                </Page>
                <Tertiary />
            </Content>
            <Footer />
        </Template>
    </TemplateWrapper>
*/

/* ############################################################################
   ## 
   ##  Custom Design Options
   ##  ADD/CHANGE RULES HERE.
   ##
   ######################################################################### */

#Page {
	width:100%;
	margin:0;
	padding:0;
	display:inline-block;
}
#PageInner {
}

    #PageTop {
    }
    #PageTopInner {
    }

    #Page #PageContent {
    }
    #Page #PageContentInner {
    }
    
        #Page #PageContent #Primary {
        }
        #Page #PageContent #PrimaryInner {
            margin:0;
        }

            #Page #PageContent #Primary #PrimaryContent {
            }

        #Page #PageContent #Secondary {
        }
        #Page #PageContent #SecondaryInner {
        }
        
            #Page #PageContent #Secondary #SecondaryContent {
                margin: 1em 10px 0;
                padding: 1em 0 0;
                /*border-top: #e0e0e0 1px solid;*/
            }
			
			.subMenu{
				display:none;
			}

    #PageBottom {
        clear: both;
        padding: 10px;
    }
    #PageBottomInner {
    }

/* ############################################################################
   ## 
   ##  Fixed 1 Column Design Elements
   ##  DON'T CHANGE.
   ##
   ######################################################################### */

#Content {
    position: relative; 
    float: left;                /* A float or a width is required to fix invisibility problems in IE6, but good practise in any case. */
    width: 100%;                /* Ensures consistent page layout in IE7, IE6, FF, otherwise they all treat the page width slightly differently. Note: Could cause problems if margin/padding/border is placed on this element. */
}

    #Page #PageContent {
        position: relative;
        float: left;            /* Makes sure the page content area is positioned the same as other templates. */
        width: 100%;            /* Ensures content fills the page. */
    }

	h1#PageTitle{
		text-align:center;
	}
#Tertiary {
}

/*Content Layout*/
.fullWidth {
	padding:2% 0;
	text-align:center;
}
	.fullWidthInner {
	}
	.fullWidth .container{
		text-align:left;
	}
	
	#DynamicFormWrapper{background: #f1f5f8;}
	
	#Primary .fullWidth .latestArticles{
		display:inline-block;
		text-align:left;
	}
	#Primary .fullWidth .latestArticles .article{
		width:31.3%;
		padding:2% 0 0 0;
		margin:2% 1% 0 1%;
		float:left;
		border-top:1px solid #d7dbdd;
	}
	#Primary .fullWidth .latestArticles.LayoutImagery  .article,#FundraiseSearchResults .article{
		width: 27%;
		padding:0;
		margin: 3% 3%;
		float:left;
		border-top:none;
		display:inline-block;
	}
	#Primary .fullWidth .latestArticles .article:nth-child(3n+1),#FundraiseSearchResults .article:nth-child(3n+1){
		clear:both;
	}
	#Primary .fullWidth .latestArticles .article .thumbnail{
		display: block;
		width: 100%;
		padding-bottom: 20px;
	}
		#Primary .fullWidth .latestArticles .article .thumbnail img{
			width: 100%;
		}
	#Primary .fullWidth .latestArticles .article .text{
		display: block;
	}
		
	#Page #Primary .fullWidth .latestArticles h3 a{
		color:#333333;
	}
	#Primary.fullWidth .latestArticles .readMore{
		margin:10px 0 0 0;
		display:block;
	}
		#FundraiseSearchResults #PagingTop,#FundraiseSearchResults #PagingBottom .summary{ display:none; }
		#FundraiseSearchResults .article{
			box-sizing: border-box;
			width: 30%;
			padding:0;
			margin: 0 1% 2% 1%;
			border-bottom: 5px solid #0f1e64;
			border-radius: 5px;
			text-align: left;
			-webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.10);
			-moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.10);
			box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.10);
		}
			#FundraiseSearchResults .article:hover{
				-webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.25);
				-moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.25);
				box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.25);
                cursor:pointer;
			}
			#FundraiseSearchResults .article .thumbnail{
				display: block;
				width: 100%;
				height:170px;
				padding:0;
				text-align:center;
				overflow: hidden;
			}
				#FundraiseSearchResults .article .thumbnail a{
					width:100%;
					display:inline-block;
				}
				#FundraiseSearchResults .article .thumbnail img{ 
					max-width: 100%;
					/*max-height:170px;*/
					border-top-left-radius: 5px;
					border-top-right-radius: 5px;
				}
			#FundraiseSearchResults .article .text{
				box-sizing: border-box;
				width:100%;
				padding:3% 5%;
				display: block;
			}
				#FundraiseSearchResults .article .text h3{
					width: 100%;
					padding:0;
					margin: 0 0 0.75em 0;
					font-size: 130%;
					display: inline-block;
				}
					#FundraiseSearchResults .article .text h3 a{
						width:100%;
						display:inline-block;
					}
				#FundraiseSearchResults .article .text .publishInfo{
					margin:2em 0 0.5em 0;
					display:none;
				}
					#FundraiseSearchResults .article .text .publishInfo .date, #FundraiseSearchResults .article .text .publishInfo .author{
						margin:0;
						padding:0;
						line-height:130%;
					}



/*Fundraising Pages*/
.Section1_ccv_fundraising #SubHeader{
	padding:5% 0;
	background:#0F1E64;
}
	.Section1_ccv_fundraising #SubHeader #SubHeaderInner{
		box-sizing:border-box;
		width:1024px;
		margin:0 auto;
		padding:0 400px 0 0;
		color:#fff;
		font-family: "FocoCCBlack", "FocoBlack", Arial, Helvetica, Sans-Serif;
		line-height: 120%;
		font-size: 300%;
		text-align:left;
	}
	.Section1_ccv_fundraising #SubHeader #SubHeaderInner p { font-size: 120%; line-height:100%; }
.Section1_ccv_fundraising #Page #PageContent{
}
	.Section1_ccv_fundraising #PrimaryContent{
		box-sizing: border-box;
		width:1024px;
		margin:0 auto;
	}
		.Section1_ccv_fundraising #PrimaryContent .column1{
			width:31%;
			margin: -210px 0 0 0;
			float:right;
		}
			.Section1_ccv_fundraising #PrimaryContent .column1 .thumbnail img{
				box-sizing: border-box;
				width:100%;
				border:5px solid #fff;
			}
			.Section1_ccv_fundraising #PrimaryContent .column1 a#fundraise-link{
				    box-sizing: border-box;
					width: 100%;
					margin: 0 auto;
					padding: 0px;
					display: inline-block;
					border-collapse: collapse;
					border: none;
					border-radius: 3px;
					background: #fed200;
					color: #0F1E64;
					font-family: "FocoCCBlack", "FocoBlack", Arial, Helvetica, Sans-Serif;
					font-size:130%;
					text-align: center;
					text-decoration: none;
			}
				.Section1_ccv_fundraising #PrimaryContent .column1 a#fundraise-link:hover{
					-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);
				}
				.Section1_ccv_fundraising #PrimaryContent .column1 a#fundraise-link img{
					margin:0 10px 0 0;
					vertical-align: middle;
				}
				.Section1_ccv_fundraising #PrimaryContent .column1 #fundraise-tally{
					margin:1.5em 0 0 0;
					font-family: "FocoCCBlack", "FocoBlack", Arial, Helvetica, Sans-Serif;
					color: #0F1E64;
					font-size:130%;
				}
				.Section1_ccv_fundraising #PrimaryContent .column1 #share-link .addthis_sharing_toolbox{
					text-align:center;
				}
				.Section1_ccv_fundraising #PrimaryContent .column1 #pagecreator-link{
					font-size:80%;
				}
					.Section1_ccv_fundraising #PrimaryContent .column1 #pagecreator-link a{
						text-decoration:none;
					}
						.Section1_ccv_fundraising #PrimaryContent .column1 #pagecreator-link a:hover{
							text-decoration:underline;
						}
		.Section1_ccv_fundraising #PrimaryContent .column2{
			width:64%;
			margin:0 5% 0 0;
			float:right;
			text-align:left;
		}
			.Section1_ccv_fundraising #PrimaryContent .column2 #PageTitle{
				text-align:left;
				font-size: 180%;
				display:none;
			}
@media screen and (max-width: 1200px) {
	.Section1_ccv_fundraising #SubHeader{
	}
		.Section1_ccv_fundraising #SubHeader #SubHeaderInner{
			width:100%;
			padding:0 2%;
		}
	.Section1_ccv_fundraising #Page #PageContent{
	}
		.Section1_ccv_fundraising #PrimaryContent{
			width:100%;
			padding:0 2%;
		}
		.Section1_ccv_fundraising #PrimaryContent .column1{
			margin: -50px 0 0 0;
		}
}			
@media screen and (max-width: 800px) {
	.Section1_ccv_fundraising #SubHeader{
		padding-bottom:60px;
	}
		.Section1_ccv_fundraising #SubHeader #SubHeaderInner{
			text-align:center;
			font-size: 180%;
		}
	.Section1_ccv_fundraising #Page #PageContent{
	}
		.Section1_ccv_fundraising #PrimaryContent{
		}
		.Section1_ccv_fundraising #PrimaryContent .column1{
			width:100%;
			max-width:320px;
			padding:0;
			margin:0 auto;
			margin-top:-50px;
			float:none;
		}
			.Section1_ccv_fundraising #PrimaryContent .column1 .text{
				display:none;
			}
		.Section1_ccv_fundraising #PrimaryContent .column2{
			width:100%;
			padding:0;
			margin:5% 0 0 0;
		}
}	
/* ############################################################################
   ## 
   ##  Layout for Different Screen Sizes
   ##  Note: Extends DefaultScreenSizes.css
   ##
   ##  Be sure to co-ordinate these layouts with the responsive sizes used in 
   ##  DefaultScreenSizes.css or you'll run into trouble.
   ##
   ######################################################################### */

@media screen and (max-width: 1200px) {

}

@media screen and (max-width: 990px) {
    /* Smaller than the fixed width template. Adjust to suit the template. Usually around 970px-980px or depends on your grid/CSS system. */
	#Page {
		width:100%;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	#Primary .fullWidth .latestArticles{
	}
		#Primary .fullWidth .latestArticles .article{
			width:100%;
			padding:4% 0 0 0;
			margin:2% 0 0 0;
			float:left;
			border-top:1px solid #d7dbdd;
		}			
}

@media screen and (max-width: 767px) {
    
    #Page #PageContent {
        float: none;
    }
    #FundraiseSearchResults{}
		#FundraiseSearchResults .article{
			width:44%;
		}
		#FundraiseSearchResults .article:nth-child(3n+1){
			clear:none;
		}
		#FundraiseSearchResults .article:nth-child(2n+1){
			clear:both;
		}
			#FundraiseSearchResults .article .thumbnail{
				height:auto;
			}
}

@media screen and (max-width: 400px) {
    
    #FundraiseSearchResults{}
		#FundraiseSearchResults .article{
			width:100%;
			margin:2.5% 0;
		}

}