/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 19, 2011 03:31:02 PM America/New_York */

@font-face {
    font-family: 'ChunkFiveRegular';
    src: url('fonts/Chunkfive-webfont.eot');
    src: url('fonts/Chunkfive-webfont.eot?iefix') format('eot'),
         url('fonts/Chunkfive-webfont.woff') format('woff'),
         url('fonts/Chunkfive-webfont.ttf') format('truetype'),
         url('fonts/Chunkfive-webfont.svg#webfont90E2uSjN') format('svg');
    font-weight: normal;
    font-style: normal;

}


body {
	background: #CC6633 url('images/pagemh_bg.png') center top no-repeat; /* background color orange */ 
	font-family: Tahoma, Arial, sans-serif;
	color: #000000; /* black type */
	margin: 0;
	padding: 0;
	text-align: center;

  }

h1, h2, h3, h4, p {
	margin: 0;
	padding: 0;
}

h1 {
	color: #993300; /* very dark orange */
	font: 30px/14px 'ChunkFiveRegular', Arial, sans-serif;
	letter-spacing: 0;
	padding-bottom: 14px;
	padding-top: 10px;
}

h2 {
	color: #FFFFFF; /* white */
	font: 21px/14px 'ChunkFiveRegular', Arial, sans-serif;
	letter-spacing: 0;
	}

h3 {
	color: #993300; /* very dark orange */
	font: 1.0em Tahoma, Arial, Helvetica, sans-serif;
	}	
	
p {
	font: 13px/25px Tahoma, Arial, sans-serif;
/*	font-size: 0.8em;
	line-height: 2.0em; */ 
	text-align: left; }

p.thick {font-weight: bold; }

p.indent {text-indent: 10px;	}	

p.spaceafter  {
  padding-bottom: 16px;
	}

p.footnote  {
  font-size: 0.8em;
	line-height: 1.4em;
	padding-top: 20px;

}
	
.italic  {font-style: italic; }



a {
    text-decoration: none;
		font-weight: normal;
    color: #993300; /* dark orange */
	}
	
a:hover  {
		color: #FBB163; /* light orange */
	}

a img {
  border: none;
	outline: none;
	margin: 0px;	
	}

	
/* layout  for all pages - includes navigation styles for main area and sidebars which are the same on all pages*/


/*container includes all content and allows for center on the page and color of sidebar to extend the full length of the page */

#container {
  width: 1175px;
  margin-right: auto;
  margin-left: auto;
	text-align: left;
	}	



 
/* plate contains all the content that lies ontop of the FC plate - which includes the background for the nav bar and the big bird background */

#masthead {
	margin-right: auto;
  margin-left: auto;
	margin-top: 0;
	background: url('images/masthead_bg.png') center top no-repeat;
	width: 1125px;
	height: 198px;
	}	

/*navigation bar*/

#nav ul  {
	color: #FFFFFF;
	float: left;
	margin: 122px 0 0 275px;
	}

#nav li  {  
	display: inline; /*make horizontal nav bar */
	}
	
#nav a {
	text-decoration: none;
	font-size: 1.14em;
	font-weight: normal;
	padding: 5px 5px 5px 5px;
	outline: none;
  color: #FFFFFF; /*white text */
  }

#nav a:hover {
  color: #FBB163; /*light orange text */
	font-weight: normal;
  }
	

#subcontain {
margin-right: auto;
margin-left: auto;
width:1125px;

}


#shadow {
 float: left;
 background: url('images/shadowslice_bg.png') center top repeat;
 width:1125px;
 
}

#middle {
 float: left;
 width: 1000px;
 background: #FFE9D1;
 position: relative;
 margin: 0 -1px 0 49px;

}

#bird  {
 float: left; 
 position: relative;
 background: url('images/bigbird_bg.png') center top no-repeat;
 width: 1000px;
 height: 814px;
 /* remove height from the style in order to expand main column with text. However, if text is less
 than height of bird, we need to keep this or part of the bird image gets cut off on the bottom. */
 margin: 0 0 0 0;

}

		
#main {
	padding: 0;
	float: left;
	width: 475px;
	margin: 35px 0 0 265px;
	padding: 0 0 10px 5px;
	position: relative;
	
}

#main h2 {
  color: #666633;
	padding: 20px 0 5px 0;
  
}
/* sidebar layout for left sidebar*/

#leftside {
  float: left;
	width: 210px;
	margin: 40px 5px 0 -728px;
	background: url('images/logo_block.png') right top no-repeat;
	height: 113px;
	color: #000000; /*black type*/
	padding: 0 15px 0 5px;
	postion: relative;
	
	}

#topleft  {
  float: left;
	width: 106px;
	margin: 0 0 0 16px;
	position: relative;
	
}
#topleft ul {
 	margin: 0 0 0 0;
	float: left;
	padding: 0;
	position: relative;
	}

#topleft li {
 	margin: 0;
	list-style: none; 	
	float: left;
	margin: 0 4px 9px 4px;
  position: relative;
	}
	
	
#topleft a {
  display: block;
	}	
	
#topleft li h3#sml_btn {
  background: url('images/sml_btn.png') left top no-repeat;
	width: 45px;
	height: 45px;
	}


#topleft li a#tumblr {
  background: url('images/tmb_btn.png') left top no-repeat;
	width: 45px;
	height: 45px;
	}

#topleft li a#tumblr:hover {
  background-position: 0 -60px;
	} 

#topleft li h3#fb {
  background: url('images/fb_btn.png') left top no-repeat;
	width: 45px;
	height: 45px;
	}

#topleft li h3#twit {
  background: url('images/twit_btn.png') left top no-repeat;
	width: 45px;
	height: 45px;
	}

#midleft  {
  float: left;
	width: 210px;
	margin: 0 0 0 16px;
	position: relative;
	
}
#midleft ul {
 	margin: 0 0 0 0;
	float: left;
	padding: 0;
	position: relative;
	}

#midleft li {
 	margin: 0;
	list-style: none; 	
	float: left;
	margin: 0 4px 9px 4px;
  position: relative;
	}
	
	
#midleft a {
  display: block;
	}	
	
#midleft li a#octo {
  background: url('images/octo_btn.png') left top no-repeat;
	width: 136px;
	height: 45px;
	}

#midleft li a#octo:hover {
  background-position: 0 -60px;
  } 


#midleft li a#tsclogos {
  background: url('images/tsc_btn.png') left top no-repeat;
	width: 61px;
	height: 45px;
	}

#midleft li a#tsclogos:hover {
  background-position: 0 -60px;
  } 

#midleft li h3#med_btn {
  background: url('images/med_btn.png') left top no-repeat;
	width: 61px;
	height: 45px;
	}

#midleft li h3#zombake {
  background: url('images/zom_btn.png') left top no-repeat;
	width: 136px;
	height: 45px;
	}


	
#midleft li h3#lrg_btn {
  background: url('images/lrg_btn.png') left top no-repeat;
	width: 205px;
	height: 45px;
	}

#blog  {
  float: left;
	width: 210px;
	background: url('images/corn_sbar.png') left top no-repeat;
	height: 495px;
	margin: 0 0 0 20px;
	position: relative;
	
}	
	
#blog a#cflakes {
  display: block;
	background: url('images/more_btn.png') left top no-repeat;
	width: 72px;
	height: 18px;
	/*margin: 475px 0 0 69px;*/
	position: absolute;
	bottom: 10px;
	left: 69px;
	}	
	
#blog a#cflakes:hover {
  background-position: 0 -30px;
  } 	
	
	
/* sidebar layout for right sidebar. This format allows expanding boxes with text. Mostly not used. */

#rightside {
  float: right;
	width: 210px;
  margin: 20px 34px 0 0; 
	color: #FFFFFF; /*white type*/
	position: relative;
  }

#boxgreen {
  float: left;
	width: 204px;
	margin: 28px 10px 0 10px;
	background: url('images/green_btm_bg.png') center bottom no-repeat;
	padding: 0 0 20px 0;
	
	}  

#boxorange {
  float: left;
	width: 204px;
	margin: 22px 10px 0 10px;
	background: url('images/orange_btm_bg.png') center bottom no-repeat;
	padding: 0 0 17px 0;
	
	}  

	
#legal {
  clear: both;
	padding: 5px 0 0 0;
	background: url('images/bottom_bg.png') center top no-repeat;
	width: 1124px;
	height: 133px;
	margin: 0 0 0 0;
	line-height: 1.2em;
	color: #CC6633; /*dark orange*/
}

#legal p  {
  text-align: center;
	}

#legal a {
  font-weight: normal;
	color: #CC6633
	}

#legal a:hover {
  font-weight: normal;
	color: #FBB163
	}	
	
/*additional layout for Homepage content */
#homepage #nav a#home {

  color: #FBB163; /*light orange text. indicates which page viewer is on */
  }

#homepage #quote {
	float: left;
	width: 479px;
	background: url('images/quote.png') center top no-repeat;
	height: 125px;
	margin: 10px 0 10px -2px;
	padding: 0;
}	


#homepage  #feat_left a#feat_image  {
	float: left;
	width: 183px;
	background: url('images/kbhome_btn.png') left top no-repeat;
	height: 249px;
	margin: 5px 0 0 -4px;
	padding: 0;
}	

#homepage #feat_left a#feat_image:hover {
  background-position: 0 -275px;
	} 	


#homepage #feat_text {
  float: right;
	background: url('images/decktext.png') center top no-repeat;
	width: 287px;
	height: 246px;
	margin: 6px 0 0 5px;
	padding: 0;	
}

#homepage #boxgreen {
  float: left;
	width: 205px;
	margin: 20px 10px 6px 10px;
	background: url('images/home_boxgreen.png') center top no-repeat;
	height: 161px;
	padding: 0;
	}  

#homepage a#side_example {
  float: left;
	background: url('images/jbr_sidebar.png') center top no-repeat;
	width: 205px;
	height: 167px;
	margin: 6px 10px 6px 10px;
	padding: 0;
}

#homepage a#side_example:hover {
  background-position: 0 -190px;
	} 	
	
#homepage #boxorange {
  float: left;
	width: 205px;
	margin: 6px 10px 5px 10px;
	background: url('images/home_boxorange.png') center top no-repeat;
	height: 374px;
	padding: 0;
	
	
	}  

	
/*additional layout for What page */
	
#whatpg #main p {
 line-height: 1.8em;
 	
}

#whatpg #nav a#what {
  color: #FBB163; /*light orange text. indicates which page viewer is on */
  }

#whatpg #boxgreen {
  float: left;
	width: 204px;
	margin: 20px 10px 10px 10px;
	background: url('images/what_greenbox.png') center top no-repeat;
	height: 340px;
	padding: 0;
	}  	
	
#whatpg #boxorange {
  float: left;
	width: 204px;
	margin: 10px 10px 0 10px;
	background: url('images/what_orgbox.png') center top no-repeat;
	height: 331px;
	padding: 0;
	}  		
	
	
/*additional layout for Work page */	

#workpg #nav a#work {
  color: #FBB163; /*light orange text. indicates which page viewer is on */
  }	

#workpg #archNav ul {
 	margin: 16px -20px 0 0;
	padding: 0;
  list-style: none; 	
	float: left;
}

#workpg #archNav li  {  
	float: left;   /*make horizontal nav bar */
	width: 120px;	
	margin: 4px 0 4px 0;
		}
	
#workpg #archNav a {
 	padding: 0;
	display: block;
	outline: none;
}


#workpg #archNav li a#kewlbites {
  background: url('images/kewlbites_btn.png') left top no-repeat;
	width: 115px;
	height: 115px;
	}

#workpg #archNav a#kewlbites:hover {
  background-position: 0 -134px;
	} 

#workpg #archNav li a#jawbone{
  background: url('images/jawbone_btn.png') left top no-repeat;
	width: 115px;
	height: 115px;
	}

#workpg #archNav a#jawbone:hover {
  background-position: 0 -134px;
	} 


#workpg #archNav li a#cea{
  background: url('images/cea_btn.png') left top no-repeat;
	width: 115px;
	height: 115px;
	}

#workpg #archNav a#cea:hover {
  background-position: 0 -134px;
	} 

#workpg #archNav li a#josgeo{
  background: url('images/josgeo_btn.png') left top no-repeat;
	width: 115px;
	height: 115px;
	}

#workpg #archNav a#josgeo:hover {
  background-position: 0 -134px;
	} 

#workpg #archNav li a#crab{
  background: url('images/crab_btn.png') left top no-repeat;
	width: 115px;
	height: 115px;
	}

#workpg #archNav a#crab:hover {
  background-position: 0 -134px;
	} 

#workpg #archNav li a#fish{
  background: url('images/fish_btn.png') left top no-repeat;
	width: 115px;
	height: 115px;
	}

#workpg #archNav a#fish:hover {
  background-position: 0 -134px;
	} 

#workpg #archNav li a#booda{
  background: url('images/booda_btn.png') left top no-repeat;
	width: 115px;
	height: 115px;
	}

#workpg #archNav a#booda:hover {
  background-position: 0 -134px;
	} 

#workpg #archNav li a#goodeats{
  background: url('images/ge_btn.png') left top no-repeat;
	width: 115px;
	height: 115px;
	}

#workpg #archNav a#goodeats:hover {
  background-position: 0 -134px;
	} 

#workpg #archNav li a#tako{
  background: url('images/tako_btn.png') left top no-repeat;
	width: 115px;
	height: 115px;
	}

#workpg #archNav a#tako:hover {
  background-position: 0 -134px;
	} 

#workpg #archNav li a#pumpkin{
  background: url('images/pmkin_btn.png') left top no-repeat;
	width: 115px;
	height: 115px;
	}

#workpg #archNav a#pumpkin:hover {
  background-position: 0 -134px;
	} 

#workpg #archNav li a#midsnack{
  background: url('images/mdsnk_btn.png') left top no-repeat;
	width: 115px;
	height: 115px;
	}

#workpg #archNav a#midsnack:hover {
  background-position: 0 -134px;
	} 

#workpg #archNav li a#wyldes{
  background: url('images/wyldes_btn.png') left top no-repeat;
	width: 115px;
	height: 115px;
	}

#workpg #archNav a#wyldes:hover {
  background-position: 0 -134px;
	} 

	
/*additional layout for About page */

#aboutpg #nav a#about {
  color: #FBB163; /*light orange text. indicates which page viewer is on */
  }	
	
#aboutpg #boxgreen {
  float: left;
	width: 205px;
	margin: 20px 10px 10px 10px;
	background: url('images/about_greenbox.png') center top no-repeat;
	height: 380px;
	padding: 0;
	}  		
	
	
/*additional layout for Contact page */

/*#contactpg #main p  {
  font-size: 1.3em;
	}*/

#contactpg #nav a#contact {

  color: #FBB163; /*light orange text. indicates which page viewer is on */
  }  


span.hidden  {display: none;} /*to keep text for indexing but use art instead*/



/* next 2 styles correct Main floating up over navigation bar*/

.clear:after {
  content: ".";
	display:block;
	height: 0;
	font-size:0;
	clear:both;
	visibility: hidden;
	}
	
.clear {
  min-height: 1px;
	}

	
/*home page DOM - design of the month - section layout*/