/* 
Author: Aimee Avant
*/

/* Site Colors
list site colors and indicate if global to enable search and replace to globally change colors
#8CC63F - green
#484943 - dark grey
#fffAC4 - light yellow
#F2E18C - medium yellow
#9FCADF - blue
#357EA2 - dark blue (text)
purple
#FEFBC4?

css format - single line format with tabbing and indentin child elements
*/


/* reset */

*		{ margin: 0; padding: 0; }
ol, ul 	{ list-style: none; }
html 	{ height: 100%; }
a		{ text-decoration: none;}



/* navigation and links
______________________________________________________________________________________ */

/* LINKS 
selector:pseudo-class {property:value} or selector.class:pseudo-class {property:value}
*/

/* current page highlighting: portfolio about services contact home   */

#portfolio .portfolio, #about .about, #services .services, #contact .contact, #home .home	{ color:#D14C0A; background-image: url(../assets/images/highlight-cloud.png); background-repeat: no-repeat; }

#portfolio a.portfolio, #about a.about, #services a.services, #contact a.contact, #home a.home	{ color:#D14C0A; background: none; text-transform: lowercase; position: relative; top: 10px; }

#logos .logos, #design .design, #invitations, .invitations	{ color: #D14C0A; }

#list .list, #branding .branding, #logos .logos, #advertising .advertising, #brochures .brochures, #packaging .packaging, #signage .signage, #websites .websites, #invitations .invitations	{ color: #D14C0A; }

#events .events, #weddings .weddings	{ color: #D14C0A; }

p a:link	{ color: #484943; text-decoration: none; }/* unvisited link */
p a:visited { color: #484943; text-decoration: none; } /* visited link */
p a:hover 	{ color: #8CC63F; text-decoration: underline; text-transform: none } /* mouse over link */
p a:active 	{ color: #484943; text-decoration: none; } /* selected link */ 

/* blue pages: events and envelopments */

.blue a:link		{ color: #9FCADF; text-decoration: none; } /* unvisited link */
.blue a:visited 	{ color: #9FCADF; text-decoration: none; } /* visited link */
.blue a:hover 		{ color: #9FCADF; text-transform: uppercase; text-decoration: none; } /* mouse over link */
.blue a:active 		{ color: #9FCADF; text-decoration: none; } /* selected link */

.green p a:link	{ color: #484943; text-decoration: underline; }/* unvisited link */
.green p a:visited { color: #484943; text-decoration: underline; } /* visited link */
.green p a:hover 	{ color: #8CC63F; text-decoration: underline; text-transform: none } /* mouse over link */
.green p a:active 	{ color: #484943; text-decoration: none; } /* selected link */

/* navigation */
	
#nav-main		{ width: 625px; height: 100px; font-size: 1.1em; text-align: center; display: block; color: ; position: absolute; left: 300px; top: 25px; }
	#nav-main ul	{  }
	#nav-main li 	{ display:block; float:right; font-size:1.8em; height:90px; letter-spacing:1px; padding:20px 0 0; width:125px; }
	
a:link		{ color: #86695A; text-decoration: none; } /* unvisited link */
a:visited 	{ color: #86695A; text-decoration: none; } /* visited link */
a:hover 	{ color: #8CC63F; text-decoration: none; text-transform: uppercase } /* mouse over link */
a:active 	{ color: #86695A; text-decoration: none; } /* selected link */

/* portfolio navigations */
.nav-sub	{ font-size: 1.8em; }
	.nav-sub ul						{ margin: 0 0 25px 25px; }
	.nav-sub li						{ display: inline; padding: 10px; }
		.nav-sub a:link				{ color: #8CC63F; text-decoration: none; } /* unvisited link */
		.nav-sub a:visited 			{ color: #8CC63F; text-decoration: none; } /* visited link */
		.nav-sub a:hover 			{ color: #D14C0A; text-transform: uppercase; text-decoration: none; } /* mouse over link */
		.nav-sub a:active 			{ color: #8CC63F; text-decoration: none; } /* selected link */


/* services navigations */
.nav-services						{ font-size: 1.3em; text-align: center;  color: #8CC63F; }
	.nav-services ul				{ margin: 10px 0px; }
	.nav-services li				{ display: inline; padding: 0 5px 0 0; }
		.nav-services a:link		{ color: #8CC63F; text-decoration: none; } /* unvisited link */
		.nav-services a:visited 	{ color: #8CC63F; text-decoration: none; } /* visited link */
		.nav-services a:hover 		{ color: #D14C0A; text-transform: uppercase; text-decoration: none; } /* mouse over link */
		.nav-services a:active 		{ color: #8CC63F; text-decoration: none; } /* selected link */
.bar								{ font-weight: 900; color: #8CC63F;  } /* bar divider */


/* footer navigations */
#nav-footer							{ margin: auto; width: 900px; text-align: center; }
	#nav-footer a					{ color: #484943; }
	#nav-footer a:hover				{ color: #8CC63F; }


/* for vertical lists - display: block changes from the default inline to be clickable the entire 100% width */
/* for bkgd changes use padding to add space between nav items instead of margin which will create deadzones in rollover */	


/* typography
-------------------------------------------------------------------------------------- */
/* The base font size of this site is set in the body tag and is 10px, which means 1em is 10px, 1.2em is 12px and so on - ems are actually multipliers of the site’s base font size.  Most browsers default is 16pt so to keep it resizable by the Internet Explorer users it is set it to 62.5% as 16px × 62.5% = 10px. See http://www.typetester.org/ */

h1 	{ font-size: 1.5em; /* 10px × 1.2em = 12px */ margin-bottom: 15px; line-height: 1.8em; font-style: italic; }/* callouts */
h2	{ font-size: 1.2em; /* 10px × 1.2em = 12px */ margin-bottom: 15px; text-transform: uppercase; }/* main headings */
h3	{ font-size: 1.2em; /* 10px × 1.2em = 12px */ margin-bottom: 5px; line-height: 1.6em; }/* subheadings */
h4	{ }/* not used */
h5	{ }/* not used */

#content-main p 	{ font-size: 1.1em; /* 10px × 1.1em = 11px */ word-spacing: -0.1em; text-align: left; letter-spacing: 0; line-height: 1.5em; margin-bottom: 15px; max-width: 330px }/* default */
.strong { font-weight: bolder; }/* for bolding */

.green h2				{ color:#8CC63F; }
.green h3				{ color:#8CC63F; } 
.blue h2				{ color:#9FCADF; }
.blue h3				{ color:#9FCADF; } 
.lowercase				{text-transform: lowercase; }



/* page structure 
--------------------------------------------------------------------------------------- */
/* floated elements should be given a width */

body	{ font-size: 62.5%; font-family: Verdana, sans-serif; color: #484943; background-color: #484943; margin-top: 15px; height: 100%; text-align: center; }
	/* set default text font and color in body, set background image and color */
	
	#wrapper		{ width: 1000px; margin-top: 10px; margin: 0 auto; text-align: left; background: white; } 
		/* overflow:hidden; keeps the div from collapsing if it contains only floated items */
		/* margin: 0 auto; keeps the wrap centered when the browser window is resized 
		/* text-align overrides the text-align: center on the body element */
		

		
	#header			{ background-color: #484943; height: 150px; border-bottom-width: 10px; border-bottom-style: solid; border-bottom-color: #F2E18C; background-repeat: repeat-x; background-image: url(../assets/images/header-clouds.png); background-position: bottom; position: relative; top: 0; left: 0; } 
		
	#content-main	{ padding:25px 50px; background-color: #FFFAC4; border-bottom:10px solid #FFFFFF; margin: 0; overflow: hidden; height: auto; } 
	
	#footer			{ padding: 15px; background-color: #F2E18C; } 


/* main content 
------------------------------------------------------------------- */

/* three columns pages
---- home about ----------------------- */

#col-small-wrap				{ width:870px; margin: auto; }
	.col-small				{ width:240px; float:left; height:auto; padding:0px 25px 25px 25px; }
	.col-img				{ width:220px; border:10px solid #FFFEEE; }
	.col-small h1			{ font-family: Verdana, sans-serif; font-size: 24px; color:#484943; margin-top: 20px; margin-bottom: 						15px; line-height: 1.2em; text-transform: uppercase; font-style: normal; font-weight: normal; word-						spacing: normal; text-align: center; letter-spacing: 2px; }
	.col-small h2			{ font-family: Verdana, sans-serif; font-size: 13px; color:#8CC63F; margin-top: 15px; margin-bottom: 						15px; line-height: 1.2em; text-transform: capitalize; font-style: normal; font-weight: normal; word-						spacing: normal; text-align: center;  }		
	.col-small h3 			{ color:#8CC63F; font-size:1.3em; font-weight:normal; margin-bottom:15px; margin-											left:20px; max-width:200px; text-align:left; text-transform: lowercase; }
	.col-small h4 			{ color:#8CC63F; font-size:1.3em; font-style:italic; font-weight:normal; margin:10px 10px 0 0; text-						align:right; }
.banner						{ margin: -25px 0 15px -50px; }

/* two columns
---------------sub pages --- */
#col-large-wrap				{ width: 860px; margin: auto; overflow: hidden; }
.col-large					{ width: 330px; float:left; height:auto; padding:0 50px 0; } 


/* Specific Pages 
------------------------------------------------------------------ */

/* Home */	


/* Working with Us */

.col-quotes					{ background-color:#FFFFFF; border:thin solid #8CC63F; float:right; margin-bottom:10px; margin-top:0; 							padding:30px; width:250px; }/* white with green border column */

/* Contact */

.col-contact				{ background-color:#F2E18C; float:left; margin: 0 0 10px 20px; padding:10px; width:500px; }
.label-form					{ font-size: .9em; font-weight: bold; }

/* Services */
.polaroid					{ margin: 0 0 0 75px; }

/* Portfolio */
#flashcontent					{ height: 600px; }
.content-flash					{ height: 650px; }
.nav-portfolio					{ font-size: 1.8em; }
	.nav-portfolio ul			{ margin: 0 0 25px 25px; }
	.nav-portfolio li			{ display: inline; padding: 10px; }
	.nav-portfolio a:link		{ color: #8CC63F; text-decoration: none; } /* unvisited link */
	.nav-portfolio a:visited 	{ color: #8CC63F; text-decoration: none; } /* visited link */
	.nav-portfolio a:hover 		{ color: #D14C0A; text-transform: uppercase; text-decoration: none; } /* mouse over link */
	.nav-portfolio a:active 	{ color: #8CC63F; text-decoration: none; } /* selected link */

/* footer 
------------------------------------------------------------------- */

#footer p 			{ text-align:center; padding-bottom:1em; line-height:1.22em}
#footer .green 		{ color:#8CC63F; font-weight: bold; } 

/* misc. 
------------------------------------------------------------------- */
.clearfloat 	{ clear:both; height:0; font-size: 1px; line-height: 0px; }