/************************************************

FILE:		  	content.css
DESCRIPTION:  	File Defines Basic Content Styling

1. Global Styles (affects all pages)
2. Reusable Styles (Appears in more than one page type)
3. Specific Styles (Appears in just one page type)

************************************************/

/* @group 1. Global Styles (affects all pages) */

	
	
	/* @group QuickFix Styles */
		.hide		{display: none;}
		.clearB		{clear: both;}
		.clearL		{clear: left;}
		.clearR		{clear: right;}
		.floatL		{float: left;}
		.floatR		{float: right;}
		.alignL		{text-align: left;}	
		.alignC		{text-align: center;}
		.alignR		{text-align: right;}
		
		.clear						{clear:both; font-size:1px; height:1px; line-height:1px; margin:0px; padding:0px; width:100%;}
		.clearfix:after				{content: "."; display: block; height: 0; clear: both; visibility: hidden;}	
	/* @end */

	/* @group Headings */
		h1, h2 , h3, h4, h5, h6		{font-weight:bold; margin:0; padding:0; color:#3d3d3d;}
		h1 							{margin:0 0 20px 0;}
		h2, h3		 				{}
		h4, h5, h6					{}
	/* @end */

	/* @group Typography */	
		p 			{color:#3b3c3b; padding:0 0 16px 0; font-size:98%; line-height:18px;}
		strong 		{font-weight:bold; color: #191919;}
		p strong	{color:#5f5f5f;}
		small		{color:#c0c0c0;}
		em			{color:#5f5f5f;}
	
		/* @group Quotes */
			blockquote.shortquote 	{color: #666; font-style: italic; padding: 5px;}
			blockquote 				{margin: 0 8px 8px 8px;}
			blockquote p 			{font-style: italic; padding: 12px 0;}
			blockquote cite 		{text-align: right; font-weight: bold; display: block; margin:8px 8px 0 8px;}
		/* @end */

	/* @end */

	/* @group Images */
		p img 			{float:left; margin: 8px; }
	/* @end */	

	/* @group Tables */
		table 			{margin: 16px 0 32px 0; clear:both; text-align:left; background:#fdfdfd;}
		tr				{border-bottom:1px solid #fff;}
		th				{font-weight:bold; padding:8px 8px; font-size:100%; border-bottom:2px solid #fff; background:#e4e4e4; }
		td 				{border: none; font-size:85%; line-height:15px; padding:6px 8px; margin:0;}		
		th.clm1			{padding:4px 8px;}
		tr.odd td 		{background:#fff; }
		tr.even td 		{}
		td.clm1, 
		td.clm2, 
		td.clm3  		{}
	/* @end */

	/* @group Lists */
		ul, ol 			{padding: 0 0 16px 16px;  color:#858687;}
		ul ul, ol ol	{padding: 8px 0 8px 16px;}
		ul li			{padding: 0 8px 0 0; margin-bottom: 8px; list-style-type:circle;}
		ul li li		{list-style-type:circle;}
		ol li			{list-style-type: decimal; margin-left:16px;}
		ol li li		{list-style-type: lower-alpha;}
		
		#template #clm-one ul		{margin:0; padding:0 0 20px 0;}
		#template #clm-one ul li	{background-position:0 -1972px; padding: 0 0 0 20px; list-style: none; }
		#template #clm-one ul ul	{padding:14px 0 4px 0;}
		
		dl				{float:left; display:block; margin:8px 0;}
		dt				{width:80px; float:left; clear:left; margin:4px 0; padding-left:16px; color:#000;}
		dd				{width:300px; float:left; clear:right; margin:4px 0;}
	/* @end */

	/* @group Miscelanious */
		hr 		{padding:0; background: none; height:1px; border:none; border-bottom:1px dotted #ccc;}
	/* @end */

/* @end Global Styles */






/* @group 2. Reusable Styles (Appears in more than one page type) */

	
	/* Typography */
		.icon-vj			{padding:0 0 14px 30px; font-size:167%; font-weight:normal; margin:0; background-position:0 -1278px; background-repeat: no-repeat;}
		
		#clm-two h4			{padding: 0 0 14px 0; margin: 0; font-size:138.5%; font-weight:lighter;}
		
	
	
	/* Boxes */
		.box				{padding: 1px; margin-bottom: 30px; background:#fdfdfd; border:1px solid #dedede;}
		.box .title			{height:38px; padding: 0 29px; margin: 0; line-height:38px; position:relative; color: #eee; font-size: 123.1%; font-weight: 100; background-position: 0 -228px; background-repeat:repeat-x; text-shadow: 1px 1px 1px #3a3b3a;}
			.box .title	a 	{position:absolute; right:4px; top:12px;}
		.box .title-blog	{color:rgb(50,50,50); padding:0 29px 0 10px; }
		.box .content		{padding:20px;}	
		body.home .box .content {padding:10px 0 20px;}

		
		/* Boxes with Gradient BG's */
			.box-bl .box,
			.box-ml .box,
			.box-tl .box		{background:none; border:none; padding:0;}
			
			.box-bl				{padding: 42px 0 0 22px; background-position: bottom left;}
			.box-ml				{padding: 20px 0 20px 20px; background-position: -266px -583px}
			.box-tl				{padding: 20px 0 0 20px; background-position: -531px -583px}
				#clm-two .box-tl	h4		{}
				
		/* Twitter Box */
			.twitter-feed 					{padding:20px 0 20px 20px;}
			.twitter-feed .title,
			#clm-two .twitter-feed .title	{margin:0; padding: 0 0 20px 0;}
			.twitter-feed .tweet			{width:225px; color:#3b3c3b; line-height:18px; font-size:100%;}
			.twitter-feed .tweet .top		{height:10px; background-position: 0 -280px;}
			.twitter-feed .tweet .content	{padding: 0 14px 4px 14px; background:#FDFDFD; border-left:1px solid #e0e0e0; border-right:1px solid #e0e0e0;}
			.twitter-feed .tweet .bottom	{height: 24px; background-position:0 -498px}
			
				.tweet a,
				.tweet a:link,
				.tweet a:visited,
				.tweet a:hover,
				.tweet a:active		{color:#53a4cc;}
				
			.twitter-feed a:link.arrow,
			.twitter-feed a:visited.arrow
			.twitter-feed a:hover.arrow
			.twitter-feed a:focus.arrow
			.twitter-feed a:active.arrow	{position:relative; right:-60px; top:-14px;}
			
		/* Titles (Icons in .box .title, e.g: homepage) */
			.box .title-icon			{padding:0; position:relative; font-size:115%; }
			.box .title-icon span		{display: block; height: 50px; margin-left: 10px; padding:8px 0 0 54px; position:absolute; top:-7px; overflow:hidden; z-index:9999;}
		
			.box .title-publish span	{background-position:0 0;}
			.box .title-tag span		{margin-left: 6px; padding-left: 58px; background-position:0 -80px;}
			.box .title-wrap span		{top: -9px; padding-top: 10px; background-position:0 -160px;}
			.box .title-push span		{top: 0; padding-top: 1px; background-position:0 -240px;}
			.box .title-analyse span	{background-position:0 -320px;}
			.box .title-monetise span	{top:0; margin-left: 6px; padding-left: 64px; padding-top: 3px; background-position:0 -400px;}
			.box .title-customise span	{margin-left: 8px; padding-left: 60px; background-position:0 -480px;}
			.box .title-try span		{top: 2px; padding-top: 0; background-position:0 -559px;}
			
			
			.box .title-hosted span		{background-position:0 -640px;}
			.box .title-measure span	{background-position:0 -720px;}
			.box .title-editing span	{background-position:0 -800px;}
			.box .title-asset span		{background-position:0 -880px;}
			.box .title-develop span	{background-position:0 -960px;}
			.box .title-sdk span		{background-position:0 -1040px;}
			.box .title-open span		{background-position:0 -1120px;}
		
	/* LISTS */
	
		/* Ticks */
			.ticks			{margin:0; padding:0; color:#666; font-size:108%; font-weight:lighter;}
			.ticks li		{margin: 0 0 16px 0; padding: 0 0 0 33px;list-style-type: none; background-position:0 -52px;}
			
		/* Blog Posts */
			.blog-list ul	{margin:18px 0 10px 0; padding:0; color:#777;}
			.blog-list li	{margin:0 0 13px 0; padding:0 0 0 34px; list-style-type:none; line-height: 14px; background-position:0 -252px; }
			
			.blog-list-simple ul	{margin:18px 0 56px 0; padding:0; color:#777;}
			.blog-list-simple li	{margin:0 0 13px 0; padding:0; list-style-type:none; line-height: 14px; background-position:26px -252px;}


			
				/* Link at bottom of list */
					.blog-list a 	{display: block; margin-left: 60px; padding-left: 10px; background-position:0 -361px;}
					.blog-list a:hover { text-decoration:underline; }
					
				/* Links inside list */				
					.blog-list li a,
					.blog-list li a:link,
					.blog-list li a:visited {display: block; margin: 0; padding: 0; width: auto; clear: both; font-size:108%; background:none;}
					.blog-list li a:hover,	
					.blog-list li a:active	{color:#ed1c24;}
					
					.blog-list li small		{font-size:93%; color:#777;}
					
		/* Star Lists */
			.stars-sma 			{margin:0; padding:0 0 17px 0; font-size:98%; color:#3b3c3b;}
			.stars-sma li		{padding: 0 0 0 26px; margin-bottom: 8px; list-style-type: none; background-position:0 -440px;}
			
			.stars-lrg 			{margin:0; padding:8px 0 17px 0; font-size:108%; color:#010101;}
			.stars-lrg li		{padding: 0 0 0 46px; margin-bottom: 33px; list-style-type: none; background-position:0 -769px;}
		
					
		/* Clients List */
			.clients-list img	{margin-top:24px; position:relative; right:-13px;}
			
			
		/* Pricing Details */
			.details			{margin:0 0 8px 0; padding:5px 10px; background:#f7f8f4; border:1px solid #f0f0ee;}
			.details li			{float: left; width: 33%; padding: 0; margin: 0; list-style-type:none;}
			.details h3			{color:#ed1c24; font-size:108%; font-weight:lighter; padding-bottom:4px;}
			.details strong		{font-size:98%; color: #3b3c3b; }
			.details small		{font-size:87%; color: #3b3c3b;}
			
		/* Press Materials */
			.materials			{margin:14px 0 0 0; padding:0;}
			.materials li		{margin:0 0 14px 0; padding:0 0 0 63px; list-style-type:none;}
			.materials h2 a,
			.materials h2 a:link,
			.materials h2 a:visited,
			.materials h2 a:hover,
			.materials h2 a:focus	{display: block; font-weight: lighter; color: #202720; margin-bottom: 8px; font-size:138.5%;}
			.materials p 			{font-size:108%;}
			.materials .pdf			{background-position:0 -1090px;}
			.materials .zip			{background-position:0 -624px;}
			
		/* Press Releases */
			.pr .title				{font-size: 123.1%; padding: 0 0 21px 0; margin: 0; }
			.pr ul					{margin:0; padding:0;}
			.pr li					{padding: 0; margin-bottom:12px; list-style-type:none;}
			.pr li a,
			.pr li a:link,
			.pr li a:visited,
			.pr li a:hover,
			.pr li a:active			{min-height: 17px; display: block; padding-left:26px; background-position:0 -1365px;}
			
	/* Tables */
	
		/* Tables within a box for example Support packages box */
			.box table			{margin:0; width:100%;}
			.box th				{height:40px; padding: 0 18px; line-height: 40px; color: #fdfdfd; font-size: 138.5%; font-weight: lighter; text-align: center; background-position:0 -227px;}
			.box td				{padding: 12px 18px; color: #3b3c3b; background:#fdfdfd; border:none; font-size:108%; text-align:center;}	
			.box td.first,
			.box th.first		{text-align:left;}
			.box .odd td		{background:#f2f4ec;}
			.box td .no			{display:none;}
			.box td .tick		{width:18px; height:15px; text-indent: -9999px; overflow: hidden; display:block; margin: 0 auto; background-position:0 -52px;}
				
				
	/* Overlay */
		.overlay					{z-index:800; position:fixed; top: 0; left: 0; width:100%; height:100%;  text-align:center; background-image: url(../img/bg_content/overlay.png);}
		.overlay .container			{z-index:820; padding: 20px; position:relative; max-width:540px; top:100px; text-align:left; background:#fff; border:1px solid #000;}		
		.overlay .box				{background:transparent;}
		.overlay .title				{background:#2D2E2E;}
			
		/* Its shadows */
			.overlay .shadow-top,
			.overlay .shadow-tr,
			.overlay .shadow-content,
			.overlay .shadow-content-r,
			.overlay .shadow-bottom,
			.overlay .shadow-br			{background:url(../img/bg_content/overlay-content.png) 0 0 no-repeat;}
			
			.overlay .shadow-tr			{background-position: top right;}
			.overlay .shadow-content	{background-position: left -10px;}
			.overlay .shadow-content-r	{background-position: right -10px;}
			.overlay .shadow-bottom		{background-position: left bottom;}
			.overlay .shadow-br			{background-position: right bottom;}				
			
			.overlay .shadow-top		{position: relative; left: -8px;  height: 10px; margin-right:10px;}
			.overlay .shadow-tr			{position: absolute; right:-18px; height: 10px; width:20px; top:0;  }
			.overlay .shadow-content	{position: relative; left: -8px;}
			.overlay .shadow-content-r	{position: relative; right: -8px; padding: 0 10px 0 0; }
			.overlay .shadow-bottom		{position: relative; left: -8px;  height:10px; margin-right:10px;}
			.overlay .shadow-br			{position: absolute; right:-18px; height:10px; width:20px;}

		/* Its (dark-box) box Styles */	
			.overlay .outer-top				{background-position: 0 -494px;}
			.overlay .outer-top .right		{background-position: right -494px;}
			
			.overlay .inner-top				{background-position: 0 -499px;}
			.overlay .inner-top .right		{background-position: right -499px;}
			
			.overlay .inner-bottom			{background-position: 0 -505px;}
			.overlay .inner-bottom .right	{background-position: right -505px;}
			
			.overlay .outer-bottom			{background-position: 0 -509px;}
			.overlay .outer-bottom .right	{background-position: right -509px;}
	
	
		/* The Content */
			.overlay .content				{z-index:900;}
		
	

				
					
	
	

			
		
		
		
	



		
		
	/* Thumbnails */
		

	
	
	
	
/* @end */





/* @group 3. Specific Styles (Appears in just one page type) */


	/* Home Page */		
		/* Banner */
			.home #banner			{height:370px; text-align:left; position:relative; border-bottom: 2px solid #fff; }
			#banner .copy			{width:385px; padding:57px 0 20px 0;}
			
			#banner p				{padding-left:10px; line-height:36px; color:#fff; font-weight:100; font-size:197%; text-shadow:rgba(0,0,0,0.33) 0px 2px 1px;; margin:0; padding:0;}
				#banner h1			{display:inline; color:#fff; font-weight:100; margin:0; padding:0;}
				#banner .btn-sign-up-try-out	{margin-top:50px; float:left;}
				
				
			#banner .media 			{position:absolute; width:560px; height:345px; margin:5px; padding:5px;  top:3px; right:0; background-color:white; }
			#banner .media img		{ }
			#banner .media .flashversion {position:absolute; *position:relative; bottom:50px; *margin-bottom:0; color:black; text-align:center; width:100%;}
			#banner .media a.diagnostic {position:absolute; *position:relative; bottom:25px; *margin-bottom:0; text-align:center; width:100%; display:block; }
			#banner .media a.diagnostic:hover { text-decoration:underline; }
			
			.home h2.seven-steps		{color:#010101; font-size:182%; font-weight:normal; padding:12px 0 33px 0;}
			
		/* Columns */
			.home .clm-quater .btn		{float:right;}
			.home .clm-quater			{margin-bottom:8px; border:none; background:none; width:230px;}
			.home .clm-quater .content	{height:60px;}
			.home .clm-half				{width: 465px; margin:8px 0 0 0;}
		
		/* Simplify the boxes on the bottom row */
			.home .blog-list,
			.home .clients-list				{border:none; background:none; padding:2px; }
			.home .blog-list .title,
			.home .clients-list .title		{background-position:0 -190px; text-shadow:none; color:rgb(50,50,50); padding:0 29px 0 10px; }
			.home .blog-list				{float:left;}
			.home .clients-list				{float:right; margin-right:8px;}
			
			.home .blog-list .title a		{background-position:0 -1913px;}
			
		/* Typography */
			.home #template p				{color: #191e19; font-size:110%; line-height:25px; margin-bottom:;}
			.home #template strong			{color: #191e19; font-weight:bold;}
			.home #template .clm-quater p	{font-size:100%; line-height:1.6em;}
			.home #template .clm-quater h3	{font-size:123.1%;}
			
	/* Features Page */
		.features #banner 			{height:290px;}
		.features p					{font-size:93%; color:#3b3c3b; line-height:18px;}
		.features #clm-two			{padding-left:;}
		.features .case-studies		{padding-left:22px;}
		.features .case-studies h2	{font-size:153.9%; font-weight:normal; padding-bottom:20px;}
		
		.case-studies .poker		{left:-21px;}
		.case-studies .plush		{left:-18px;}
		.case-studies .woma 		{left:-16px;}
		
		.case-studies a,
		.case-studies a:link,
		.case-studies a:visited,
		.case-studies a:hover,
		.case-studies a:focus,
		.case-studies a:active		{display: block; position: relative; top: -10px; font-weight:bold;}
		.case-studies .btn			{padding-top:20px;}
			
		.next	{float:right; color:#010101;}	
			
	/* Products Page */
		.product h1				{margin-left: 8px;}
		.product .clearfix 		{}
		.product .clearfix .btn	{float:right; position:relative; left:-12px; margin-left:10px;}
		.case-studies .poker,
		.case-studies .plush,
		.case-studies .woma 	{position:relative;}
		
	/* Pricing Page */
		.pricing #clm-one .btn			{float:right;}
		.pricing .two-clm-L div#clm-two	{border:none;}
		
		
	/* Sign Up */
		.sign-up #template .container	{width:936px;}
		.sign-up .clm-half				{padding:0; margin:0;}
		
	/* Support */
		.support #clm-two 		{height: 670px; padding-left: 20px;}
		
	/* API */
		.developer-api .google-group	{margin:20px 0 20px 20px;}
		.developer-api .download-github,
		.developer-api .irc				{margin:0 0 20px 20px;}
		
	/* Develop Page */	
		.develop .download-zip,
		.develop .download-github		{margin:20px 0 20px 20px; padding-left:80px !important;}
		
		
		
	/* Pricing Options */
		.pricing-options table 				{background:none;}
		.pricing-options tr					{border:none;}
		.pricing-options th					{border: none; background:#4d4f4d; color:#fff;}
		.pricing-options .first th			{padding:14px; background-position:0 -228px; background-color:#5c5e5c;}
		.pricing-options .first th.empty	{background:none;}
		.pricing-options .second th			{background-color:#e5686d; border-right:1px solid #cb5358; border-top: 2px solid #fff; text-align:center; background-position:0 -536px;}
		.pricing-options td	 				{border: none; background:#fdfdfd; color:#3b3c3b; font-weight:bold; font-size:100%; padding:14px; text-align:center; border:1px solid #fff; border-bottom:none;}
		
		.pricing-options .odd th,	
		.pricing-options .odd td			{background:#fff; color:#161a16;}	
		
		.pricing-options .even th,	
		.pricing-options .even td			{background:#f2f4ec; color:#161a16;}
		
		
		.pricing-options tr.border-bottom	{border-bottom:1px solid #dedede;}
		.pricing-options th.border-left		{border-bottom:1px solid #dedede;}
		.pricing-options .border-right		{border-right:1px solid #dedede;}	
		
		
	/* Features Index */
		.features-index .box .title			{font-size:123.1%;}
		.features-index .box .content		{height:135px; overflow:hidden;}		
		
		.plans-pricing			{position:relative; height:218px;}
		.plans-pricing .btn		{position:absolute; bottom:20px; right:0;}
	

			
			

	
		



			

/* @end */