/*------------------------------------------------------------------ 
[Global Stylesheet] 
 
Project:    Sweet Pixels 
Version:    1.1 
Last change:    15/05/09 [Full CSS styling] (sp) 
Assigned to:    Sahus Pilwal (sp), Shivun Pilwal (ssp) 
Primary use:    Website Styling 
-------------------------------------------------------------------*/  
@import "/css/presets.css";
@import "/css/cmxform.css";
@import "/css/cmxformExtra.css";

/*------------------------------------------------------------------ 
[Table of contents] 
 
1. Body
	1.1. Body / #BodyContainer
	1.2. Global / #GlobalContainer
2. Header / #HeaderContainer 
3. Global Navigation / #GlobalNavigation
4. Logo / #logo
5. Content / #ContentContainer
	5.1. Content Navigation / #ContentNavigation
	5.2. Page Header Title / #PageHeaderTitle
	5.3. Top Page Content Teaser / #TopPageContentTeaser
	5.4. Page Content PlaceHolder / #PageContentPlaceHolder
		5.4.1. Left Page Content / #LeftPageContent
		5.4.2. Right Page Content / #RightPageContent
	5.5. Portfolio Page Three Column Layout
		5.5.1. Left Column / #PortfolioLeftZone
		5.5.2. Centre Column / #PortfolioCentreZone
		5.5.3. Right Column / #PortfolioRightZone
6. Footer / #FooterContainer
	6.1 Top Footer / #TopFooter
7. Global Footer / #GlobalFooter
8. Common List Items (UL) / .CommonLists
	8.1. List Items (LI) / .TickList
9. Global Styles
-------------------------------------------------------------------*/    

/*------------------------------------------------------------------ 
[1.1 Body] 
*/

Body
	{
	
	background: url(../images/layout-images/bg-page.jpg) no-repeat #FFF;
	
	background-position:center 0;

	margin: 0 auto;

	padding: 0;

	text-align: center;
	
	font-size:0.75em;

	font-family:Arial;


	}
	
/*------------------------------------------------------------------ 
[1.2 Global / #GlobalContainer] 
*/

#GlobalContainer
	{
		
		width: 960px;

		margin: 0px auto;

		margin-bottom: 10px;

	}
	
/*------------------------------------------------------------------ 	
[2. Header / #headerContainer]
*/

#HeaderContainer
	{
	
		text-align: left;
	
	}

/*------------------------------------------------------------------ 	
3. Global Navigation / #GlobalNavigation
*/

#GlobalNavigation
	{

		margin: 10px 0 0 0;
	
	}
	#GlobalNavigation ul
		{
					
			list-style-type: none;
			
			text-align: right;
				
		}
	#GlobalNavigation li
		{
		
			display: inline;
		
		}
	#GlobalNavigation a
		{
			
			margin-right: 15px;
			
			color: #222;
			
			font-size: 16px;
		
		}
		
/*------------------------------------------------------------------ 			
[4. Logo / #logo]
*/

#logo
	{
	
		background: url(../images/sweet-pixels-logo.jpg) #FFF;
		
		background-repeat: no-repeat;
		
		margin: 0 0 15px 10px;
		
		width: 249px;
		
		height: 142px;
	
	}
	
/*------------------------------------------------------------------ 	
[5. Content / #ContentContainer]
*/	

#ContentContainer
	{
	
	
	
	}
	
/*------------------------------------------------------------------ 	
[5.1. Content Navigation/ #ContentNavigation]
*/	

#ContentNavigation
	{
	
		background-color: #f3f3f3;
		
		border-bottom: solid 1px #8d8d8d;
		
		padding: 5px 0 0 10px;
		
		height: 25px;
		
		text-align: left;
	
	}

/*------------------------------------------------------------------ 	
[5.2. Page Header Title / #PageHeaderTitle]
*/		

#PageHeaderTitle
	{
	
		margin: 20px 0 0 20px;
		
		text-align: left;
	}

/*------------------------------------------------------------------ 		
[5.3. Top Page Content Teaser / #TopPageContentTeaser]
*/

#TopPageContentTeaser
	{
	
		margin: 10px 0 0 20px;
		
		text-align: left;
	
	}
	#TopPageContentTeaser span
		{
		
		border-bottom: dotted 1px #818181;
		
		color:#555;
		
		font-family:Georgia,Arial,Verdana;
		
		font-style:italic;
		
		font-size:24px;
		
		font-weight:lighter;
		
		}

/*------------------------------------------------------------------ 	
[5.4. Page Content PlaceHolder / #PageContentPlaceHolder]
*/

#PageContentPlaceHolder
	{
	

	
	}
	
	/*------------------------------------------------------------------
	[5.4.1. Left Page Content / #LeftPageContent]
	*/
	
	#LeftPageContent
		{
			
			float: left;
			
			margin: 20px 0 20px 20px;
			
			width: 70%;
			
			text-align: left;
			
			border-bottom: dotted 1px #818181
		
		}
		#PageIntro
			{
			
				margin-bottom: 10px;
			
			}
		.subjectHeader
			{
			
				margin: 0 0 5px 0;
				
				color: #555;
				
				font-size: 16px;
			
			}
		.subjectSummary
			{
			
				margin: 0 0 5px 0;
				
				color: #1c1c1c;
			
			}
		.subjectLink
			{
			
				margin: 0 0 10px 0;
			
				color: #1c1c1c;
			
			}
		#backToTheTop
			{
			
				margin: 10px 0 0 0;
				
				text-align: right;
				
				color: #777;
			
			}
	/*------------------------------------------------------------------
	[5.4.2. Right Page Content / #RightPageContent]
	*/
	
	#RightPageContent
		{
		
			float: right;
			
			width: 25%;
		
		}
		.HomePageRightPanel
			{
			
				margin: 20px 0 0 0;
				
				background-color: #e52e5f;
			
			}
		.HomePageRightImagePanel
			{
			
			
			
			}
		
		.HomeRightPaneHeader
			{
			
				text-align: left;
				
				padding: 10px 0 0 10px;
				
				font-family: georgia, arial, verdana;
				
				font-size: 16px;
				
				font-style: italic;
				
				font-weight: bold;
				
				color: #FFF;
		
			}
		.HomeRightPaneContent
			{
			
				padding: 10px 5px 10px 10px;
			
				text-align: left;
				
				font-family: georgia, arial, verdana;
				
				font-size: 12px;
				
				font-style: italic;
				
				font-weight: bold;
			
				color: #FFF;
							
			}
		.HomeRightPaneContent p
			{
			
				line-height: 20px;
			
			}
			/*------------------------------------------------------------------ 			
			[5.5. Portfolio Page Three Column Layout]
			*/
			
			#PortfolioContentPlaceHolder
				{	
	
					margin: 30px 0 0 0;
	
				}	
			
				/*------------------------------------------------------------------ 			
				[5.5.1. Left Column / #PortfolioLeftZone]
				*/
				
				#PortfolioLeftZone
					{
					
						float: left;
					
						background: url(../images/layout-images/extended-faded-divider.jpg) no-repeat;
						
						background-position: 100% 0%;
					
						width: 33%;
						
						height: 400px;
						
					}
				
				/*------------------------------------------------------------------ 			
				[5.5.2. Centre Column / #PortfolioCentreZone]
				*/

				#PortfolioCentreZone
					{
					
						float: left;
					
						background: url(../images/layout-images/extended-faded-divider.jpg) no-repeat;
						
						background-position: 100% 0%;
					
						width: 33%;
						
						height: 400px;
						
					}

				/*------------------------------------------------------------------ 			
				[5.5.3. Right Column / #PortfolioRightZone]
				*/				
			
				#PortfolioRightZone
					{
					
						float: right;
					
						width: 33%;
						
						height: 400px;
						
					}
					.PortFolioContent
						{
						

						
						}
						.PortFolioContentHeader
							{
							

							
							}
							.PortFolioContentHeader h3
								{
							
									font-family: georgia, arial, verdana;
									
									font-style: italic;
							
								}
						.PortFolioContentImage
							{
							

							
							}
						.PortFolioContentSummary
							{
							
								text-align: left;
								
								padding: 0 0 0 50px;
								
								line-height: 20px;
								
								font-family: georgia, arial, verdana;
									
								font-style: italic;
								
							}
			
/*------------------------------------------------------------------ 			
[6. Footer / #FooterContainer]
*/

#FooterContainer
	{
	
		clear: both;
	
	}
	
	/*------------------------------------------------------------------ 	
	[6.1 Top Footer / #TopFooter]
	*/

	#TopFooter
		{
		
			background: url(../images/layout-images/footer-nav-bottom-grad.jpg);
			
			background-position:0 100%;

			background-repeat:repeat-x;

			margin:0 0 0 0;

			background-color:#fff;
			
			height: 137px;

		
		}
		#TopFooterLeftContent
			{
			
				float: left;
				
				width: 714px;
				
				padding: 0px;
				
				margin: 0px;
			
			}
			#TopFooterTopGradient
				{
				
					background: url(../images/layout-images/footer-nav-top-grad.jpg);
					
					height: 14px;
				
				}
				#SubPageTopFooterTopGradient
					{
					
						background: url(../images/layout-images/footer-nav-top-grad.jpg);
						
						background-repeat:repeat-x;
						
						width: 960px;
						
						height: 15px;
					
					}
			#TopFooterLeftCopy
				{

				
								
				}
				#FooterWhatWeDo
					{
					
						margin: 0 0 0 40px;
						
						text-align: left;
						
						float: left;
					
					}
				#FooterContactUs
					{
					
						margin: 0 0 0 40px;
						
						float: left;
						
						width: 350px;
						
						text-align: left;
					
					}
					#FooterAddressIndent
						{
						
							margin: 10px 0 0 0;
						
						}
					#FooterContactUs p
						{
						
							margin: 0 0 0 0;
							
							text-indent: 40px;
							
							text-align: left;
							
							line-height: 16px;
							

						
						}
					#FooterListIndent
						{
						
							margin: 10px 0 0 0;
							
							text-indent: 40px;
							
							text-align: left;
							
							line-height: 20px;
							
						}
						#FooterListIndent a
							{
							
								color: #555;
							
							}
				#FooterMapLocation
					{
					
						float: right;
						
						margin: 0 40px 0 0;
					
					}
				* html #FooterMapLocation
					{
					
						float: right;
						
						margin: 0 20px 0 0;						
					
					}
			#TopFooterBottomGradient
				{
				
					clear: both;
			
				}
		#TopFooterRightContent
			{
		
				float: right;
				
				background: url(../images/layout-images/footer-contact-blue-grad.jpg) no-repeat;
				
				text-align: left;
				
				width: 246px;
				
				height: 137px;				
			
			}
			#TopFooterContactTeaser
				{
				
					padding: 10px;
					
					color: #FFF;
				
				}
				#TopFooterContactTeaser p
					{
						
						margin: 10px 0 0 0;
						
						line-height: 20px;
					
					}
/*------------------------------------------------------------------ 	
[7. Global Footer / #GlobalFooter]		
*/

#GlobalFooter
	{
	
		clear: both;
		
		margin: 5px 0 0 0;
		
		font-family: Georgia, Arial, Verdana;
		
		font-weight: bold;
		
		font-style: italic;
		
		font-size: 11px;
		
		color: #555;
	
	}
	#FooterCopyright
		{
		
			float: left;
		
		}
	#FooterLinks
		{
		
			float: left;
			
			margin: 0 0 0 50px;
		
		}
		#FooterLinks ul
			{
			
				list-style-type: none;
			
			}
		#FooterLinks li
			{
			
				display: inline;
			
			}
		#FooterLinks a
			{
			
				margin: 0 0 0 10px;
			
			}
		.NavLightPink
			{
			
				color: #eC9cb5;
			
			}
	#FooterXHTMLCSSValidation
		{
		
			float: right;
		
		}
	#FooterClear
		{
		
			clear: both;
		
		}
		
/*------------------------------------------------------------------ 	
[8. Common List Items (UL) / .CommonLists]
*/

.CommonLists
	{
	
	
	
	}
	/*------------------------------------------------------------------
	[8.1. List Items (LI) / .TickList]
	*/
	
	.TickList 
		{
		
			background: url(../images/layout-images/tick.jpg) no-repeat;
			
			background-position: center left;
			
			margin: 0 0 0 20px;
			
			text-indent: 30px;
			
			line-height: 24px;
			
			font-size: 16px;
			
		}
	
	
/*------------------------------------------------------------------ 	
[9. Global Styles]
*/

h1{color:#af255a;font-family:Georgia,Arial,Verdana;font-style:italic;font-size:30px;font-weight:lighter;}

h2{color:#555;font-family:Arial,Verdana,Georgia;font-size:16px;}

h3{color:#af255a;font-family:Arial,Verdana,Georgia;font-size:16px;}

h4{color:#FFF;font-family:Arial,Verdana,Georgia;font-size:16px;}

a{color:#b80762;text-decoration:none;}

a:visited{color:#eC9cb5;}

a:hover{text-decoration:underline;}