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

	CSS on Sails
	Title: Dual Edge Ripper
	Author: XHTMLized
	Date: Januari 2009 

***********************************************************************************************

		
	1. BASE
			1.1 Reset
			1.2 Default styles
			1.3 Basic styles
	
	2. LAYOUT
			2.1 Header
			2.2 Content
			2.3 Sidebar
			2.4 Middle
			2.5 Footer
		

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


/* 1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/	



/* 1.1	Reset
-----------------------------------------------------------------------------------------------*/	


	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	
	body {
		line-height: 1;
	}
	
	ol, ul {
		list-style: none;
	}
	
	blockquote, q {
		quotes: none;
	}
	
	blockquote:before, 
	blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	
	:focus {
		outline: 0;
	}
	
	ins {
		text-decoration: none;
	}
	
	del {
		text-decoration: line-through;
	}
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	

/* 1.2	Default styles
-----------------------------------------------------------------------------------------------*/	

	html{
		background: #000  url(../images/bg-html.gif) bottom repeat-x;
	}
	
	body {
		background: #fff url(../images/bg-body.gif) repeat-x;
		font: 62.5% Arial, Helvetica, sans-serif;
		text-align: center;
		padding: 24px 0 0 0;
		}

	hr { 
		display: none;
	}
			
	strong {
		font-weight: bold;
	}
			
	em {
		font-style: italic;
	}
		
	abbr, acronym {
		border-bottom: 1px dotted #999; 
		cursor: help;
	}
	
	input, textarea, select {
		font: 1.2em Arial, Helvetica, sans-serif;
	}

	a {
		color: #0000ff;
		text-decoration: underline;
	}
	
	a:hover, 
	a:active {
		color: #ff0000;
		text-decoration: none
	}
	

/* 1.4	Basic styles
-----------------------------------------------------------------------------------------------*/	

	.hide {
		display: none;
	}
	
	

/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

	.container {
		width: 950px;
		position: relative;
		margin: 0 auto;
		text-align: left;
		font-size: 1.2em;
	}
		
	/* Default layout (two columns) */
	
	.header{
		width: 950px;
		height: 105px;
		position: relative;
		overflow: hidden;
		background: #000 url(../images/bg-header.gif) no-repeat }
	
	.content {
		width: 592px;
		padding: 40px 0 40px 27px; 
		float: left;
		overflow: hidden
	}

	.middle {
		clear: both;
		background: #ebf3f9;
		text-align: center;
		border-top: 1px solid #e4eef7
	}
	
		.middle .midcontainer{
			width: 950px;
			margin: 0 auto;
		}
		
		.middle .midcontainer .midcontent{
			width: 874px;
			padding: 20px 0 40px 27px; 
			overflow: hidden								
		}
		
	.sidebar {
		width: 229px;
		padding: 56px 50px 40px 0;
		float: right; 
	}
	
	.footer {
		padding: 30px  0;
		text-align: center;
		color: #666;
		font-size: 11px;
		line-height: 16px;
		clear: both;
		background: #000 url(../images/bg-footer.gif) top repeat-x;
	}
	
	.homepage .footer{
		background: #000 url(../images/bg-footer_home.gif) top repeat-x }
	
/* 2.1	Header
-----------------------------------------------------------------------------------------------*/	

	.header h1, 
	.header h1 span,
	.header a.logo,
	.header a.logo span {
		display: block;
		width: 221px;
		height: 91px;
		overflow: hidden;
	}
	
	.header h1,
	.header a.logo {
		position: relative;
		top: 9px;
		left: 54px;
	}
		
	.header h1 span,
	.header a.logo span {	
		position: absolute; 
		top: 0px;
		left: 0;
		z-index: 10;
		background: url(../images/logo.gif) no-repeat;
	}

	.header a.logo span {	
		cursor: pointer;
	}
	
	.header a{
		color: #fff}
	
	.header #nav{
		position: absolute;
		width: 540px;
		height: 35px;
		display: block;
		z-index: 11;
		right: 86px;
		bottom: -5px }

		
		.header #nav li.last{
			padding-right: 0;
			border: 0;
			width: 80px }

		.header #nav li{
			float: left;
			display: block;
			padding: 0 20px 0 10px;
			text-decoration: none;
			font-size: 15px }
			
		.header #nav li.menu-samples{
			width: 100px;
			padding-right: 25px}

		.header #nav li.menu-about{
			width: 195px;
			padding-right: 0}

		.header #nav li.menu-contact{
			width: 80px;
			padding-right: 0 }

			.header #nav a:hover{
				text-decoration: underline }
	
	.header .buynow-big,
	.header .buynow-big span{
		position: absolute;
		display: block;
		overflow: hidden;
		width: 108px;
		height: 41px;
		z-index: 12;
		top:26px;
		right: 140px;
		cursor: pointer }	

		.header .buynow-big span{
			position: absolute;
			left: 0;
			top: 0;
			background: url(../images/btn-buynow_blue.gif) no-repeat }
		
/* 2.2	Content
-----------------------------------------------------------------------------------------------*/	
	.content .post h1,
	.content .post h2{
		font-size: 35px;
		padding: 10px 0 20px 70px;
		background: url(../images/bg-magnify.gif) left 10px no-repeat;
		color: #0061b5 }
		
		.content p,
		.middle p{
			font-size: 22px;
			line-height: 30px;
			padding-bottom: 20px;
			color: #4d6071;
			text-align: justify }
			
			.content .post p img{
				float: left;
				margin: 7px 30px 5px 0 }
				
			.content .post p a.learn-more,
			.content .post p a.learn-more span{
				width: 98px;
				height: 26px;
				overflow: hidden;
				position: relative;
				cursor: pointer;
				bottom: 5px;
				left: 10px;
				font-size: 15px;
				text-align: right }	

				.content .post p a.learn-more span{
					position: absolute;
					top: 0;
					left: 0;
					background: url(../images/btn-learnmore.gif) no-repeat }

/* 2.3	Sidebar
-----------------------------------------------------------------------------------------------*/	
	.sidebar .sidebox{
		width: 229px;
		margin: 0 0 60px 0 }

		.sidebar .sidebox h3{
			font-size: 19px;
			color:#0061b5  }
			
		.sidebar .sidebox img{
			margin-bottom: 15px }
			
		.sidebar .sidebox a.buynow-small,
		.sidebar .sidebox a.buynow-small span{
			display: block;
			width: 164px;
			height: 43px;
			position: relative;
			overflow: hidden;
			cursor: pointer }
			
			.sidebar .sidebox a.buynow-small span{
				position: absolute;
				left: 0;
				top: 0;
				background: url(../images/btn-buynow.gif) no-repeat }		

/* 2.4	Middle
-----------------------------------------------------------------------------------------------*/	
	.middle .midbox{
		width: 417px;
		float: left;
		text-align: left }
		
	.middle .right{
		float: right;
		text-align: left }	
		
		.middle .midbox h3{
			font-size: 17px;
			color: #0061b5;
			padding: 10px 0 10px 44px }
			
		.middle .right h3{
			margin-bottom: 9px }

			.middle .midbox h3.app{
				background: url(../images/bg-app.gif) left 7px no-repeat }	

			.middle .midbox h3.youtube{
				background: url(../images/bg-youtube.gif) left 7px no-repeat }	

/* 2.5	Footer
-----------------------------------------------------------------------------------------------*/	
	.footer a{
		color: #666;
		text-decoration: none }
		
	.footer p{
		margin-top: 10px;
		margin-bottom: -10px }