/* @group 01. Info & Details *//*

	Stylesheet for		: Ary Mega (oi, that's me)
	Project				: Personal
	Updated				: August 3, 2010
	
	Table of Contents:
	01. Info & Details	: Metadata of this is stylesheet.
	02. General			: Universal styles.
	03. Header			: The top portion of the page.
	04. Content			: The middle portion of the page.
	05. Footer			: The bottom portion of the page.
	
	Colors:
	#000000				: Black
	#FFFFFF				: White
	#ca4e4e				: Red
	#4d8dc9				: Blue
	#9c4dc9				: Purple
	#92c74c				: Green

*//* @end */



/* @group 02. General */

	* {
		margin: 0;
		padding: 0; }
	
	body {
		background: #ffffff;
		font-family: "Helvetica Neue", Arial, Sans-Serif;
		font-size: 14px;
		margin: 0;
		padding: 0;
		text-align: center; }
	
	hr {
		background: none;
		border: none;
		height: 0;
		margin: 0;
		padding: 10px 0;
		width: 0; }
	
	abbr {
		border-bottom: 1px dotted;
		cursor: help;
		margin: 0;
		padding: 0; }
	
	del { cursor: default; }

	ul li { font-size: 12px; }
	
	img { padding: 40px 0; }
	img.tight { padding: 15px 0; }
	
	h1 { 
		background: url('../_images/logo.png') top left no-repeat;
		height: 200px;
		margin: 0 0 35px;
		padding: 0;
		text-indent: -9999px;
		width: 240px; }
		
		h1:hover {
			background-position: 0 -200px;}
		
	h3 {
		font-size: 14px;
		line-height: 150%; }
	
	h4 {
		font-size: 14px;
		line-height: 150%;
		margin: 0 0 20px;
		padding: 0 0 5px; }

	p {
		font-size: 12px;
		line-height: 150%;
		padding: 12px 0; }

	a { color: #333333; }
	
	#snackwrap {
		background: #f9f9f9;
		border-bottom: 1px solid #f3f3f3;
		margin: 40px auto;
		padding: 40px 60px;
		text-align: left;
		width: 940px; }
	
	.left {
		float: left;
		width: 260px; }
	
	.right {
		float: right;
		width: 640px; }
	
	.lefty {
		float: left;
		width: auto; }
	
	.righty {
		float: right;
		width: auto; }
	
	.clear { 
		clear: both;
		height: 0;
		width: 0; }
	
	.red { color: #ca4e4e; }
	.green { color: #92c74c; }
	.blue { color: #4d8dc9; }
	.yellow { background: #ffee00; }
		a.yellow:hover { border-bottom: 1px dotted #000000; }
	.purple { color: #9c4dc9; }
	.soft-grey { color: #999999; }
	
	.italic {
		font-family: georgia, "times new roman", serif;
		font-style: italic; }

	.title {
		font-size: 14px;
		margin: 0 0 0 20px; }

/* @end */



/* @group 03. Header */

	#sidebar {
		float: left;
		width: 240px; }
	
	#sidebar ul li {
		border-bottom: 1px dotted #cccccc;
		margin: 7px 0 0;
		padding: 0 0 9px; }
	
	#sidebar ul li.icon-email, #contact ul li.icon-email { background: url('../_images/icon-email.png') top left no-repeat; }
	#sidebar ul li.icon-facebook, #contact ul li.icon-facebook { background: url('../_images/icon-facebook.png') top left no-repeat; }
	#sidebar ul li.icon-linkedin, #contact ul li.icon-linkedin { background: url('../_images/icon-linkedin.png') top left no-repeat; }
	#sidebar ul li.icon-flickr, #contact ul li.icon-flickr { background: url('../_images/icon-flickr.png') top left no-repeat; }
	#sidebar ul li.icon-tumblr, #contact ul li.icon-tumblr { background: url('../_images/icon-tumblr.png') top left no-repeat; }
	#sidebar ul li.icon-google, #contact ul li.icon-google { background: url('../_images/icon-google.png') top left no-repeat; }
	#contact ul li.icon-vimeo { background: url('../_images/icon-vimeo.png') top left no-repeat; }
	#contact ul li.icon-friends { background: url('../_images/icon-friends.png') top left no-repeat; }
	#contact ul li.icon-rss { background: url('../_images/icon-rss.png') top left no-repeat; }
	#contact ul li.icon-companies { background: url('../_images/icon-companies.png') top left no-repeat; }
		
	#sidebar ul li a, #contact ul li a {
		color: #999999;
		font-size: 12px;
		padding: 0 0 0 27px }
		
		#sidebar ul li a:hover, #contact ul li a:hover { color: #333333; }
	
	#navigation {
		padding: 30px 0 0; }

	#navigation ul.righty li { margin: 0 0 0 20px; }
	
	#navigation ul li {
		display: inline;
		float: left;
		margin: 0 20px 0 0; }
	
	#navigation ul li a {
		border-top: 1px solid;
		font-size: 12px;
		font-weight: bold;
		padding: 5px 0 0;
		text-transform: uppercase; }
	
	#navigation ul li a.red,
	#navigation ul li a.green,
	#navigation ul li a.blue { 
		color: #333333; }
	
	#navigation ul li a.red:hover { color: #ca4e4e; }
	#navigation ul li a.green:hover { color: #92c74c; }
	#navigation ul li a.blue:hover { color: #4d8dc9; }
		
		#navigation ul li a:hover {
			border-top: 3px solid; }
	
		#navigation .righty a:hover {
			color: #777777; }
	
	#introduction {
		background: url('../_images/intro.png') top left no-repeat;
		height: 250px;
		margin: 105px 0 20px;
		padding: 0 0 20px;
		text-indent: -9999px;
		width: 640px; }

/* @end */



/* @group 04. Content */

	#content {
		float: right;
		padding: 30px 0 0;
		width: 640px; }
		
	#my-life, #my-work, #etc, #faq, #contact { 
		margin: 0 0 60px; }
	
	#my-life .left, #my-life .right {
		border-top: 3px solid #ca4e4e;
		padding: 20px 0 0; }
	
	#my-life h4 { border-bottom: 1px solid #ca4e4e; }
	
	.mylife-red a, .mywork-green a, .etc-blue a { color: #999999; }
		
		.mylife-red a {
			background: #fceaea;
			color: #ab4141; }

	#my-work .left, #my-work .right {
		border-top: 3px solid #92c74c;
		padding: 20px 0 0; }
	
	#my-work h4 { border-bottom: 1px solid #92c74c; }
		
		.mywork-green a {
			background: #edfadd;
			color: #7caa3f; }
		
	#brands li { margin: 0 0 5px; }
		
	#portfolio { padding: 0 0 30px; }
	
	#portfolio .work-border { 
		border: 5px solid #edfadd;
		margin: 20px 0 5px;
		padding: 0; }
	
		#portfolio .work-border:hover { border: 5px solid #92c74c; }
	
	#portfolio li { margin: 4px 0; }

	#etc .left, #etc .right { 
		border-top: 3px solid #4d8dc9;
		padding: 20px 0 0; }
	
	#etc h4 { border-bottom: 1px solid #4d8dc9; }
	
		.etc-blue a {
			background: #e6f0f9;
			color: #4177aa; }
			
	.mylife-red a:hover, .mywork-green a:hover, .etc-blue a:hover { border-bottom: 1px solid; }
	
	#video { padding: 0 0 15px; }

	#faq .left, #faq .right { 
		border-top: 1px solid #9c4dc9;
		padding: 20px 0 0; }

	#contact .left, #contact .right { 
		border-top: 3px solid #333333;
		padding: 20px 0 0; }
	
	#contact h4 { border-bottom: 1px solid #333333; }
	
	#contact-video { padding: 30px 0 20px; }
	
	#contact ul li {
		border: none;
		margin: 7px 0 0;
		padding: 0 0 9px; }
	
	#contact .column-block ul li, #contact .column-bl0ck ul li { border-bottom: 1px dotted #cccccc; }
	
	#contact .right li a { background: none; }
		
		#contact .right li a:hover {
			border: none;
			text-decoration: none; }
		
	.column-block {
		float: left;
		width: 200px; }
	
	.column-bl0ck {
		float: left;
		padding: 0 19px;
		width: 200px; }
	
	.column-b1ock {
		float: left;
		padding: 0 20px 0 0;
		width: 420px; }
		
	.sidelist span {
		display: block;
		font-weight: bold;
		line-height: 100%;
		padding: 0 0 3px; }
	
	.sidelist li {
		line-height: 150%;
		margin: 0 0 20px; }

	a.button {
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		background: #333333;
		color: #e3e3e3;
		font-weight: bold;
		padding: 5px 15px; }
	
		a.button:hover {
			-moz-box-shadow: 0 0 4px #555555;
			-webkit-box-shadow: 0 0 4px #555555;
			box-shadow: 0 0 4px #555555;
			color: #f3f3f3; }

/* @end */



/* @group 05. Footer */

	#footer {
		clear: both;
		padding: 240px 0 0;
		text-transform: uppercase; }
	
	#footer p { 
		font-size: 11px;
		padding: 0; }
	
	#footer a { background: #ffee00; }
		#footer a:hover { border-bottom: 1px dotted; }
		
	#footer ul li {
		display: inline;
		float: left;
		margin: 0 0 0 20px; }
		
	#footer ul li a { 
		background: none;
		color: #999999;
		font-size: 11px; }

		#footer ul li a:hover { color: #333333; }

/* @end */