/*<agl.folder "Introduction">*/
	/*Usage
Use Pop Culture for pop-up sites. The stylized treament of the menu goes well with youth-oriented imagery. Pop Culture is suited for both palettes with lots of graytones, and with pastels.

Features
1. A menu that works as a design element.

2. An i-frame that allows high-density information within the compact space.

3. A client logo space that uses color to draw attention.*/

	/*About DIVs
Think of large DIVs as floors in a building. The elements on the DIV are similar to furniture. Each piece has a location and function. Think of smaller DIVs as rooms that have page elements inside them.*/

	/*About Web-Named Palettes
Use the "web-named" palette when you want to approximate client colors. The colors will use the hex value convention of web-safe colors, for example #a0a092, but the range will be far beyond the 216 web-safe palette. Remember 2/3 Rule when you create a web-named palette:

The color will be pastel if the first two values are identical. An example is the custom warm gray that's in the "Industrial Design" palette. The color is #a0a092. It's grayish brown because the first two values are 2/3 of a gray tone. In this example, the tone is #a0a0a0. The third value is what shifts the gray tone toward the brown.*/
/*</agl.folder>*/

body { margin: 0px; padding: 0px; background-color: }

#logo_space /* This DIV creates a quickly identifiable space for the logo. It should be a a brand color, or if possible, a shade of a brand color. Keep the logo space a little darker or lighter than the background color so that the logo draws attention instead of the DIV. */  { background-color: #b8d55c; text-align: left; margin-top: 0; position: absolute; top: 0; left: 0; width: 144px; height: 186px; border-left: 1px solid #fff }

.logotype  /* This example logo shows how you can use the "logo_space." */ { position: absolute; top: 20px; left: 45px }

/*<agl.folder "Menu_elements">*/
	#menu_background /*  This DIV contains the menu elements.  */  { background-color: #55554e; position: absolute; top: 372px; left: 145px; width: 720px; height: 93px }
	
	#menu_bottom /*  This DIV has a top border that creates a sublte shadow under the menu. The darker color of the menu bottom helps make the menu a design element.  */  { background-color: #443837; position: absolute; bottom: 0; left: 0; width: 720px; height: 21px; border-top: 1px solid #000000 }
	
	#menu_items_frame { position: absolute; z-index: 5; top: 416px; left: 156px; width: 708px; height: 48px }
	
	.menu_item /*  The unchosen and non-hilighted menu item sits within the color field of the "menu_background."  */  { color: #fff; font-size: 10px; font-family: arial, sans-serif; font-weight: 500; text-align: center; position: relative; top: 0; width: 80px; height: 26px; float: left }
	.chosen_menu_item /*  This DIV extends into the "menu_bottom" space. The arrow and frame are part of the DIV background image. The DIV itself  has background-color set to "transaprent." The arrow and frame help make the menu a design element.  */  { color: #fff; font-size: 10px; font-family: arial, sans-serif; font-weight: 500; background-color: transparent; background-image: url(../../images/menu-chosen.gif); text-align: center; margin-top: 0; margin-left: 0; position: relative; top: 0; width: 80px; height: 49px; float: left }
	
	a:link {
	color: #652B05;
	font-size: 24px;
	font-family: "Century Gothic";
	font-weight: 400;
	text-decoration: none
}
	
	a:visited { color: #652B05; font-size: 24px; font-family: "Century Gothic"; font-weight: 400; text-decoration: none }
	
	a:hover { color: #FF9D04; font-size: 24px; font-family: "Century Gothic"; font-weight: 400; text-decoration: none; }
	
	a:active { color: #FEA002; font-size: 24px; font-family: "Century Gothic"; font-weight: 400}
/*</agl.folder>*/

#promotional_space   /* This DIV can contain a quote or small graphic. If you put in a quote, it should be slightly larger than the body text. You apply a style to it, for example "italic." You want the quote to draw attention, yet avoid competition with the logo above it. */ { font-size: 14px; font-family: Times, serif; font-style: italic; font-weight: 500; padding-top: 30px; padding-left: 6px; position: absolute; top: 186px; left: 0; width: 130px; height: 186px; border-left: 1px solid #fff }

#image_in_upper_left    /* This image should be related to the body copy. */ { position: absolute; z-index: 3; top: 0; left: 145px; width: 216px; height: 371px; border-bottom: 1px solid #a6a6a6 }

#image_in_upper_right    /* This image helps balance the page, so it should be bold. */ { position: absolute; top: 0; left: 648px; width: 216px; height: 279px; border-bottom: medium solid #a6a6a6 }

#image_in_bottom_left    /* This image can be related to the quote above it, or to the chosen menu item. */ { position: absolute; z-index: 3; top: 372px; left: 0; width: 143px; height: 93px; border-left: 1px solid #fff }

/*<agl.folder "iFrame_elements">*/

	/*The i-frame accesses an external page and puts it in the "iframe_box" DIV for display.*/
	#copy_background /* This DIV contains the i-frame */  {
	background-color: #000099;
	position: absolute;
	z-index: 4;
	top: 205px;
	width: 696px;
	height: 388px;
	border-style: solid;
	border-width: 0px;
	border-color: #fff #000 #000 #fff;
	left: 166px;
}
	
	.iframe_box /*  This DIV contains the i-frame elements.  */  {
	position: absolute;
	top: 19px;
	left: 12px;
	width: 668px;
	height: 356px;
	border: outset 0 #c5c5b4;
	background-color: #000099;
}
	
	.iframe_background /*  This DIV sets the background of the i-frame body text a different color from the page background.  */  { background-color: #c5c5b4; position: absolute; top: 0; left: 0; width: 100%; height: 100% }
	
	.iframe /*  This DIV contains the style for the body text.  */  {
	color: #000;
	font-size: 12px;
	font-family: Times, serif;
	font-weight: 500;
	background-color: #000099;
	position: absolute;
	top: -5px;
	left: -1px;
	width: 705px;
	height: 356px;
}
.style1 {color: #652B05; font-size: 24px;}

/*</agl.folder>*/