/* General styles that apply globally to all pages */

/* remember to apply this style to the head section of all pages:

[if IE]>
<style type="text/css">
body { zoom: 1; }

</style>
<![endif] 

*/

* { 
	padding: 0; 
}

html {border: 0; margin: 0;}

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small; 					/* Technique I'm going for here is the keywords + percentages combo as described by Dan Cederholm. */
	font-weight: normal;
	color: #6f6f6f;
	background-color: #fff;
}
h1 {
	font-size: 75%;
}
h3 {
	color: #000;
	font-weight: lighter;
	font-size: 120%;
}
p, dt, dd {
	line-height: 150%;
}
a:link {
	color: #ee0777;
}
.emphasis {								/* Use this class to provide uniform emphasis to any body text throughout the site.  Remember to populate values! */ 
	color: #ee0777;
}
.emphasis a:link {
	font-size: 100%;
	font-weight: bold;
	color: #ee0777;
}
.emphasis a:visited {
	font-size: 100%;
	font-weight: bold;
	color: #ee0777;
}
.emphasis a:hover {
	font-size: 100%;
	font-weight: bold;
	color: #ee0777;
}
a:link img{
	border: none;
}
a:visited img {
	border: none;
}
a:hover img {
	border: none;
}
a:active img {
	border: none;
}

/* Navigation */

/* The following styles allow for a horizontal nav menu that uses an unordered list of links as hooks for image replacement.  The beauty is that it is accessible, and degrades well if uses have images turned off. */

#navcontainer {									 /* I think the container is required if the nav menu is to be floated to the right of a div */
	width: 470px;
	padding: 0px;
	height: 20px; 								 /* This value should be the same as the height of the image replacement */
	float: right;  								 /* This is the only face value benefit I can see from storing these items in a container. */
	margin-top: 20px;
}


#nav 											 /* This style is to be applied to the <ul> */{
	padding: 0;
	height: 20px;  								 /* Height should be set to the height of the image replacement */
	list-style: none;
	display: inline;
	overflow: hidden;
	margin: 0;
	float: left;
}

#nav li {
	list-style: none;
	display: inline;
	padding: 0;
}

#nav a {
	float: left;
	padding: 20px 0 0 20px; 						/* Height should be set to the height of the image replacement */
	overflow: hidden;
	height: 0px !important; 
	height /**/:20px; 							/* for IE5/Win only */
}
#nav a:hover    {
	background-position: 0 -20px;
}
#nav a:active, #nav a.selected { 				/* The selected class was included in the HTML for each page and applied as a class to the <li> */
												/* for that page.  It worked on ikandi creations, so it should remain in the template. */
	background-position: 0px -40px; 			/* The second value should be replaced with a value that is 2x the height of one image replacement. */
}


/* For all of the following link styles, change the id name to represent the actual main nav links used on the site.  Change the width to equal the specific width of each replacement image.  Change the background-image url to one that matches the replacement image. */
	
#home a  {
	width: 60px;
	background-image: url(../nav/home.png);
	background-repeat: no-repeat;
	background-position: left top;
}
#portfolio a  {
	width: 81px;
	background-image: url(../nav/portfolio.png);
	background-repeat: no-repeat;
	background-position: left top;
}
#pricing a  {
	width: 79px;
	background-image: url(../nav/pricing.png);
	background-repeat: no-repeat;
	background-position: left top;
}
#about a  {
	width: 62px;
	background-image: url(../nav/about.png);
	background-repeat: no-repeat;
	background-position: left top;
}
#contact a  {
	width: 77px;
	background-image: url(../nav/contact.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.selected { 										/* This class has been added as extra protection for the  :active styling */
	background-position: 0px -40px; 				/* The second value should be replaced with a value that is 2x the height of one image replacement. */
}
#wheretonext {
	margin: 0;
	padding-top: 10px;
	list-style-type: none;
}
#wheretonext li {
	color: #ee0777;
	font-size: 110%;
	padding-bottom: 10px;
}
#wheretoleft {
	float: left;
}
#wheretoright {
	float: right;
}

/* wrappers, containers, self clearing code */

#wrapper {
	background-color: #FFFFFF;
	padding: 10px;
	height: auto;
	width: 980px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	overflow: auto; 					
}
#maincontentleft {
	clear: both;
	float: left;
	padding: 10px;
	width: 480px;
}
#maincontentright {
	float: right;
	padding: 10px;
	width: 460px;
}
#maincontentright p, #maincontentright h3 {
	margin-left: 60px;
}
#articlecontentleft {
	clear: both;
	float: left;
	padding: 10px;
	width: 480px;
	overflow: auto;
}
#articlecontentleft p {
	text-align: justify;
}
#footercontainer {
	clear: both;
	overflow: auto;
	width: 960px;
	background-color: #6f6f6f;
	color: #ffffff;
	margin: 0px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}
#copyright {
	text-align: center;
	font-size: 75%;
	color: #ee0777;
	padding: 0;
	margin-top: 5px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}
#footerlinks {
	padding: 0;
	list-style-type: none;
	text-align: center;
	margin: 5px 0 0 0;
}
#footerlinks li {
	margin: 0;
	padding: 0;
	display: inline;
}
#footerlinks a {					/* remember to add some styling for hover states etc */
	width: 75px;
	color: #ffffff;
	text-decoration: none;
	text-align: center;
	font-size: 75%;
}

/* Banner Styles including all banner heading image replacements*/

#indexbanner {
	background-color: #ee0777;
	height: auto;
	width: 960px;
	clear: both;
	overflow: auto;
	padding: 10px 10px 0 10px;
}
#indexbanner h2, #banner h2 {
	color: #fff;
	line-height: 220%;
	font-size: 300%;
	margin-top: 5px;
	margin-bottom: 0;
}
#indexbanner p, #banner p {
	color: #000;
	font-size: 120%;
}
#indexbanner p, #indexbanner h2, #banner p, #banner h2  {
	width: 480px;
	float: left;
	clear: left;
}
#banner {
	background-color: #ee0777;
	height: auto;
	width: 960px;
	clear: both;
	overflow: auto;
	padding: 10px;
}
#number {
	float: right;
}
.bannertextnumber {
	width: 230px;									/* This width needs to be adjusted to control the width of the faux text 'container'. */
	float: left;									/* Some padding may need to be set as the design develops. */
	clear: left;									/* The clear is set to ensure that the text doesn't try and float up around the heading. */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 150%;
	color: #ffffff;
	margin-bottom: 20px;
	margin-left: 150px;
	font-weight: bold;
}
#bannerimage {										/* This style controls the object on the right hand side of the banner container. */
	float: right;				
}
#contactbannerimage {										/* This style controls the object on the right hand side of the banner container. */
	float: right;	
	padding-right: 86px;			
}

/* h1 image replacements */


.header { 											
	height: 75px;									
	float: left;									
	margin-bottom: 20px; 							
	overflow: hidden;								
}
#logo {												
	background-image: url(../nav/logo_305.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 75px; 								
	overflow: hidden;
	margin: 0px;
}

/* <p> image repalcements */

#callindex { 											
	height: 57px;																
	overflow: hidden;		
	clear: both;									
}
#call {
	height: 57px;
	overflow: hidden;
	clear: both;
	margin-top: 40px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#phonenumber {										/* This style is designed to be used with the maincontent right container. */
	background-image: url(../nav/phonenumber.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding: 57px 0 0 0;
	overflow: hidden;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 60px;
}

/* Calls to Action */

.calltoaction {
	height: 72px;
	list-style: none;
	float: left;
	clear: left;
	margin: 0;
}
.calltoaction li {
	list-style: none;
	display: block;
	padding: 0;
	margin: 0;	
}
.calltoaction a {
	overflow: hidden;
	height: 0px !important;
	height /**/:72px;
	display: block;
	padding-top: 72px;
}
.indexc2a a  {
	width: 300px;
	background-image: url(../nav/big_c2a_index.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.indexc2a_bottom a  {
	width: 300px;
	margin: 200px 0 0 30px;
	background-image: url(../nav/big_c2a_index_bottom.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.aboutc2a a  {
	width: 300px;
	margin: 10px 0 0 90px;
	background-image: url(../nav/big_c2a_index_bottom.png);
	background-repeat: no-repeat;
	background-position: left top;
}

/* Index Page */

#mainindexleft {
	clear: both;
	float: left;
	padding: 10px 0 10px 0;
	width: 600px;
}
#mainindexright {
	float: right;
	padding: 10px;
	width: 360px;
}
.indexbenefits {												/* Styles for the free guides within the maincontentright container. */
	float: left;
	width: 300px;
	padding-right: 0;
	padding-bottom: 10px;
	margin-bottom: 30px;
}
.indexbenefits dl {
	float: left;
	width: 290px;
	margin: 0 10px 10px 0;
	padding: 0;
	display: inline;
}
.indexbenefits dt {
	float: right;
	width: 220px;
	margin: 0;
	padding: 0;
	color: #ee0777;
	font-weight: bold;
}
.indexbenefits dt a {
	text-decoration: none;
	color: #ee0077;
}
.indexbenefits dd {
	margin: 0 0 0 70px;
	padding: 0;
	color: #6f6f6f;
}
.indexbenefits dl dd.indexbenefitsimg {
	margin: 0;
}
.indexbenefits dd.indexbenefitsimg img {
	float: left;
	margin: 0 0 0 0;
	padding: 2px;
}
.indexbenefits dd a {
	text-decoration: none;
	color: #6f6f6f;
}
#bio {
	float: left;
	border: 1px solid #e5e5e5;
	padding: 5px;
	margin-right: 10px;
}
.customer_testimonials  {
	font-size: 110%;
	line-height: 140%;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	text-align: justify;
}
.customer_name  {
	font-size: 85%;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #000000;
	text-align: right;
}

/* Portfolio Primary */

.portfolioitem {
	margin-top: 15px;
	margin-bottom: 5px;
	margin-right: 10px;
	margin-left: 0px;
	padding: 0;
	width: 230px;
	float: left;
}
.portfolioitem dl {
	margin: 0;
	padding: 0;
}
.portfolioitem dt {
	margin: 0;
	padding: 0;
	color: #ee0777;
}
.portfolioitem dd {
	margin: 0;
	padding: 0;
	font-size: 75%;
}
.portfolioitem img {
	padding: 0;
	margin-bottom: 5px;
}
.calltoaction_port {
	height: 30px;
	list-style: none;
	float: left;
	clear: left;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.calltoaction_port li {
	list-style: none;
	display: block;
	padding: 0;
	margin: 0;	
}
.calltoaction_port a {
	overflow: hidden;
	height: 0px !important;
	height /**/:20px;
	display: block;
	padding-top: 30px;
}
.pinkgobutton a  {											/* Normally I would include a hover rollover effect, but I don't think this design would benefit from one. */
	width: 155px;
	background-image: url(../nav/project_details.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.portfolio_c2a a  {
	width: 300px;
	margin: 10px 0 0 90px;
	background-image: url(../nav/big_c2a_index_bottom.png);
	background-repeat: no-repeat;
	background-position: left top;
}
#thumbs_container {
	width: 370px;
	margin-left: 50px;
	margin-bottom: 10px;
	float: left;
}
.portfolio_thumbs {
	float: left;
	padding: 10px;
}

/* Portfolio PDF Sign Up Form */

#signup {
	width: 400px;
	float: right;
	padding: 0;
	margin: 0 0 20px 0;
	height:auto;
}
#signupright  {
	float: right;
	padding-right: 30px;
	padding-top: 20px;
}
#signupright label {
	text-align: left;
	color: #ffffff;
	padding-bottom: 10px;
}
fieldset {
	background-color: #ee0077;
	border: 1px solid #fff;
	margin-right: 10px;
	padding-right: 10px;
}
#signupleft {
	width: 180px;
	padding: 10px;
	float: left;
	color: #ffffff;
	margin: 0;
}
#signupleft p {
	margin: 0;
}

/* Fixed Price Packages */

h2#packages_banner {
	width: 952px;
	text-align: center;
	font-size: 250%;
	margin: 0;
	padding-top: 10px;
}
p#packages_subbanner {
	width: 950px;
	text-align: center;
	margin: 0;
	padding-bottom: 10px;
	font-size: 160%;
}
#packages_subsub {
	width: 950px;
	text-align: center;
	margin: 0;
	font-size: 55%;
}
#full_width_upper {
	padding-bottom: 30px;
	padding: 0;
}
#full_width_lower {
	clear: both;
	margin: 0;
	padding: 0 10px;
	padding-top: 10px;
	background-color: #e5e5e5;
}
#end_quote {
	margin-left: 450px;
}
.package {
	width: 172px;
	float: left;
	padding: 10px;
	height: 400px;
	margin-top: 50px;
	border: 1px solid #ee0077;
}
.package_plus {
	width: 174px;
	float: left;
	padding: 10px;
	height: 460px;
	margin-top: 20px;
	border: 3px solid #ee0077;
	background-color: #fcdeee;
}
.package_first {
	width: 172px;
	float: left;
	padding: 10px;
	height: 400px;
	margin-top: 50px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #ee0077;
	border-right-color: #ee0077;
	border-bottom-color: #ee0077;
	border-left-color: #ee0077;
}
.package_last {
	width: 172px;
	float: left;
	padding: 10px;
	height: 400px;
	margin-top: 50px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #ee0077;
	border-right-color: #ee0077;
	border-bottom-color: #ee0077;
	border-left-color: #ee0077;
}
h4 {
	font-size: 200%;
	font-weight: bold;
	text-align: center;
	color: #000;
	padding: 0;
	margin: 0;
}
h4#package_title_small {
	font-size: 170%;
}
.package_last h4#package_title_small {
	font-size: 170%;
	margin-top: 5px;
}
.package_subtitle {
	text-align: center;
	padding: 0;
	margin: 0;
	font-weight: 500;
	color: #ee0077;
}
.package_price {
	margin: 0;
	padding: 0;
	font-size: 140%;
	text-align: center;
}
.package_features {
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #e5e5e5;
	text-align: justify;
	font-size: 85%;
	padding-top: 10px;
}
.package_plus .package_features {
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #959595;
	text-align: justify;
	font-size: 85%;
	color: #333333;
}
.package_bullets {												/* This style has been added to counteract the padding 0 rule applied globally at the top of the style sheet */
	margin-left: 2px;									/* which is making the <ul> in firefox disappear off the left hand side of the page. */
	list-style-type: none;
}
.package_bullets li {
	background-image: url(../icons/bullet_pink.png);
	background-position: left 8px;
	background-repeat: no-repeat;
	padding-left: 10px;
	line-height: 150%;
}
.package_emphasis {
	color: #ee0077;
	font-weight: bold;
}
.package_c2a {
	height: 54px;
	list-style: none;
	float: left;
	clear: left;
	margin: 0;
}
.package_c2a li {
	list-style: none;
	display: block;
	padding: 0;
	margin: 0;	
}
.package_c2a a {
	overflow: hidden;
	height: 0px !important;
	height /**/:54px;
	display: block;
	padding-top: 54px;
	margin-left: 30px;
}
.signup_button a  {
	width: 106px;
	background-image: url(../nav/sign_up_button.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}
.signup_button_plus a  {
	width: 106px;
	background-image: url(../nav/sign_up_button_plus.png);
	background-repeat: no-repeat;
	background-position: left top;
}
#packages_guarantee {
	color: #ee0077;
}

/* About Me */

#serviceslistabout {
	margin-top: 20px;												
	margin-left: 60px;	
	margin-bottom: 20px;								
	list-style-type: none;
}

#serviceslistabout li {
	background-image: url(../icons/bullet_pink.png);
	background-position: left 6px;
	background-repeat: no-repeat;
	padding-left: 10px;
}

/* Contact Page */

label {
	text-align: right;
	clear: left;
	float: left;
	width: 10em;
	margin-right: 5px;
	position: relative;
	color: #ee0777;
}

fieldset ol {
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	list-style-type: none;
}
fieldset li {
	padding-bottom: 1em;
	position: relative;
}

#map {
	float: right;
}

#map_canvas {
	width: 400px;
	height: 300px;
	margin-top: 20px;
	margin-left: 60px;
}

/* The Footer Pages */

#footerleft {
	font-size: 75%;
	float: left;
}

#footerright {
	font-size: 75%;
	text-align: right;
	float: right;
}

#footerlinks a:hover {
	font-weight: bold;
}

#footercontainer a:link {
	color: #fff;
	text-decoration: none;
}
#footerlinks a {
	color: #666;
}
#faq {
	text-decoration: none;
}

/* Sitemap */

#sitemaplist {												/* This style has been added to counteract the padding 0 rule applied globally at the top of the style sheet */
	margin-left: 20px;									/* which is making the <ul> in firefox disappear off the left hand side of the page. */
	list-style-type: none;
}

#sitemaplist li {
	background-image: url(../icons/bullet_pink.png);
	background-position: left 8px;
	background-repeat: no-repeat;
	padding-left: 10px;
}
#divname {
	margin-left: 80px;
}