/*
* jbh 2014
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
body {
	font: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	background: #fff;
	color: #4b5256;
	width: 100%;
	margin: 0 auto;
}

iframe{
	padding: 10px;
}

p {
	margin: 0 0 20px;
	color: #fff;	
	font-size: 1.2em;
}

p2 {
	margin: 0 0 20px;
	color: #fff;	
	font-size: 1.2em;
}	

p3 {
	margin: 20px 0 20px 0;
	color: #f5ba18;	
	font-size: 1.2em;
	font-style:italic;
}

a {
	color: #fff;
	text-decoration: none;
}
a:hover {
	color: #00355a;
}

h1 {
	font-size: 2.8em;
	color: #00355a;
	text-align: center;
	font: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h2 {
	font-size: 4.25em;
	color: #f5ba18;
	text-align: center;
	line-height:normal;
}
h3 {
	font-size: 1.6em;
	color: #f5ba18;
}
h4 {
	font-size: 1.3em;
	color: #4b5256;
	text-align: center;
}
h5 {
	font-size: 2.2em;
	color: #00355a;
	text-align: center;
	font-style:italic;
	text-decoration:none;
	line-height: 1.2em;
}

h6 {
	text-align:center;
	color: #f5ba18;
	margin: 0 auto;
}

h7 {
	font-size: 1.2em;
	color: #fff;
	text-align: center;
}

h8 {
	font-size: 1.3em;
	color: #fff;
	text-align: center;
}


.transparent {
	zoom: 1;
	filter: alpha(opacity=50);
	opacity: 0.5;
}

/* header */
#header-container {
	width: 100%;
	height: 100px;
	background: url('../images/diagonal-noise/diagonal-noise.png') repeat;
	position:fixed;
	left: 0;
	top: 0;
	z-index: 3000;
}

#logo{
	float: left;
	padding-top: 10px;
	padding-left: 20px;
}

.logosprite {
	display: block;
	width: 300px;
	height: 80px;
	background: url('../images/cfkc.logo.horizintal.png') bottom;
	text-indent: -99999px;
}
.logosprite:hover {
	background-position: 0 0;
}
 
 /* header */
#header {
	width: 100%;
	height: 120px;
	background:none;
	position:fixed;
	left: 0;
	top: 0;
}

#header ul {
  	margin-top: 13px;
  	width:100%;
  	padding: 0;
  	list-style: none;
	}
	
#header ul {
  	margin-top: 13px;
  	width:100%;
  	padding: 0;
  	list-style: none;
	}
	
	.floatleft{
	float: left;	
	}
	
	.floatright{
	float: right;
	}

	
	#header ul li {
  	margin: 0 auto;
	text-align:center;
  	width: 120px;
	padding:20px;
	}
	
	#header ul li a {
	color: #4b5256;
  	text-transform: none;
  	text-decoration: none;
	font-size:1.1em;
  	display: block;
  	text-align: center;
  	height:auto;
	padding: 7px;
	}

	#header ul li a:hover {
  	color: #00355a;
	border-bottom: solid #00355a 2pt;
	padding: 7px;
	text-transform: none;
  	text-decoration: none;
	font-size:1.0em;
  	display: block;
  	text-align: center;
  	height:auto;
	}
	
	
	/* toggle */
	#toggle-view {
	display:none;
	
}

	/* ul horizontal */
ul.horizontal,
ul.horizontal li {
    margin: 0;
    padding: 0;
}
ul.horizontal {
    list-style-type: none;
    width: 270px;
    background:none;
    overflow: auto;
    margin: 0 auto;
}
ul.horizontal li {
    float: left;
    width: 50px;
    height: 50px;
    margin:20px;
    text-align: center;
    color: white;
}


/* #Page Styles
================================================== */

#home {
	margin-top: 100px;
	width: 100%;
	height: auto;
	background:none;
}

#home h1{
	color: #fff;
}

#about {
	width: 100%;
	background: #999;
}

#history {
	width: 100%;
	background: #888;
}

.historyimg {
	border: solid 1pt #fff; 
	max-width: 100%;
	margin: 10px auto;
}

#waystogive{
	width: 100%;
	background: #777;
}

#howitworks{
	width: 100%;
	background: #666;
}

#contact{
	width: 100%;
	background: #00355a;
	padding-bottom: 40px;
}
/*--------------------------------------------------------------------------
| UItoTop jQuery Plugin 1.2
| http://www.mattvarone.com/web-design/uitotop-jquery-plugin/
|--------------------------------------------------------------------------
*/

#toTop {
	display:none;
	z-index: 10000;
	text-decoration:none;
	position:fixed;
	text-align:center;
	bottom:20px;
	right: 20px;
	margin: 0 auto;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:100%;
	background:url('../images/ui.totop.png') no-repeat left top;
	
}


#toTopHover {
	background: url('../images/ui.totop.png') no-repeat left -51px;
	width:51px;
	height:51px;
	display:block;
	overflow:hidden;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
	

}

#toTop:active, #toTop:focus {
	outline:none;
}
/* #Media Queries
================================================== */

	@media screen and (max-width: 1400px) {
		
	#header ul{
		display: none;
	}
	
	
	/* toggle */
	#toggle-view {
	display: block;
	position: absolute;
	top: 20px;
	float: right;
	list-style:none;	
	margin:none;
	padding:none;
	width:100%;
	z-index: 9000;
	
}

	#toggle-view li {
		margin:none;
		width: auto;
		border-bottom:none;
		position:relative;
		cursor:pointer;
		text-align:center;
		font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		text-decoration:none;
		z-index: 9000;
		padding: 10px;
	}
	
	#toggle-view li a{
	padding:0px;
	width: auto;
	text-align:center;
	font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#4b5256;
	font-size: 1.4em;
	text-decoration:none;
	line-height: 50px;
	}
	
	#toggle-view li a:hover{
	padding:0px;
	text-align:center;
	font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #00355a;
	font-size: 1.4em;
	text-decoration:none;
	line-height: 50px;
	}
	

	#toggle-view span {
		position:absolute;
		right:20px; top:20px;
		color:#fff;
		font-size:1.1em;
	}
	
	#toggle-view .panel {
		position: absolute;
		top: 80px;
		left: 0;
		background: url('../images/diagonal-noise/diagonal-noise.png') repeat;
		margin:none;
		display:none;
		width:100%;
		padding: 10px;
	}
	
}
	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) { 
	body{
		font-size:80%;
	}
			
	h1 {
	font-size: 1.8em;
	}
	
	h2 {
	font-size: 2.6em;
	}
			}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {

	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		
		#logo{
	float: left;
	padding-top: 10px;
	padding-left: 20px;
}

.logosprite {
	display: block;
	width: 250px;
	height: 80px;
	background: url('../images/cfkc.logo.horizintal2.png') bottom;
	text-indent: -99999px;
}
.logosprite:hover {
	background-position: 0 0;
}
		
		
		}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/