/*  
Theme Name: Eric Lim - 2009
Theme URI: http://ericlim.com/
Description: The theme for ericlim.com.
Version: 2.0
Author: Eric Lim
Author URI: http://ericlim.com/
*/


/* --- Common Elements
-------------------------------------------------------*/

* { margin: 0; padding: 0; }

body {
	font-family: Arial, Verdana, Sans-Serif;
	font-size: 12px;
	line-height: 18px;
	color: #d9d9d9;
	background: #222222;
}

h2 {
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	margin-bottom: 15px;
}

h3 { }

h4 { }

h5 { }

ul, ol { }

dl {
	margin-bottom: 1em;
}
	
	dl dt {
		margin-bottom: .5em;
	}
	
	dl dd {
		margin: 0 0 .5em 1em;
	}

img {
	vertical-align: bottom;
	border: 0;
}

fieldset { }

hr { }

a { text-decoration: none; color: #ff8e4a; }
a:link { }
a:visited {  }
a:hover { color: #fff; border-bottom: 1px solid #ff8e4a; }
a:active {  }



/* --- Container
-------------------------------------------------------*/

#container {
	width: 940px;
	margin: 0 auto;
}



/* --- Header
-------------------------------------------------------*/

#header {
	position: relative;
	height: 108px;
}
	
	#header h1 {
		text-indent: -9999px;
		position: absolute;
		top: 17px;
		width: 240px;
		height: 50px;
		background: url(_images/eric_lim.gif) no-repeat 0 0;
	}
	
		#header h1 a {
			outline: none;
			display: block;
			height: 50px;
			border-width: 4px;
		}



/* --- Content
-------------------------------------------------------*/

#content { }



	/* --- Structure
	-------------------------------------------------------*/
	
	.section {
		margin-bottom: 2em;
		padding-top: 3px;
		border-top: 2px solid #fff;
	}
	
	.col_2 { width: 100px; }
	.col_3 { width: 160px; }
	.col_4 { width: 220px; }
	.col_6 { width: 340px; }
	.col_10 { width: 580px; }
	.col_12 { width: 700px; }
	
	.left { float: left; margin-right: 20px; }
	
	.last { margin-right: 0; }
	
	/* CLEAR FIX*/
	.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	.clearfix {display: inline-block;}
	/* Hides from IE-mac \*/
	* html .clearfix { height: 1%;}
	.clearfix {display: block;}
	/* End hide from IE-mac */
	
	
	
	/* --- Section
	-------------------------------------------------------*/
	
	.section { }
		
		.section p {
			margin-bottom: 1em;
		}
		
		.section .attention {
			/*font-size: 14px;*/
		}
		
		.section .cta {
			text-align: right;
			padding: 5px 0 4px;
		}
	
	
	
		/* --- Tables
		-------------------------------------------------------*/

		.section table {
			width: 100%;
			border-collapse: collapse;
		}

			.section table tr { }

				.section table tr td {
					vertical-align: top;
					padding: 5px 0 4px;
					border-bottom: 1px solid #707070;
				}

				.section table tr td.date {
					text-align: right;
				}
				
				.twitter table tr td.date { width: 100px; }
				.last_fm table tr td.date { width: 100px; }



		/* --- Lists
		-------------------------------------------------------*/

		.section ul { }

			.section ul li {
				list-style: none;
				padding: 5px 0 4px;
				border-bottom: 1px solid #707070;
			}
		
		.section ol { }
			
			.section ol li {
				margin-left: 1.5em;
				padding: 5px 0 4px;
			}
	
	
	
	/* --- Blog
	-------------------------------------------------------*/
	
	.blog { }
		
		.blog .entry_info { text-align: right; }
			
			.blog .entry_info .date { color: #8c8c8c; }
	
	
	
	/* --- Single
	-------------------------------------------------------*/
	
	.single { }
		
		.single ul { }
			
			.single ul li {
				margin: 1em 0;
				padding: 0 1em;
				background: url(_images/bullet.gif) no-repeat 0 6px;
				border: 0;
			}
		
		.single .post_navigation {
			margin-bottom: 2em;
			padding-top: 5px;
			border-top: 1px solid #fff;
		}
			
			.single .post_navigation .newer {
				float: left;
			}
			
			.single .post_navigation .older {
				float: right;
			}
	
	/* --- Archive
	-------------------------------------------------------*/
	
	.date { color: #8c8c8c; }



/* --- Target Browser < 940
-------------------------------------------------------*/

@media screen and (max-width: 940px) {
	#container {
		width: auto;
		margin: 0 20px;
	}
	
	.col_2, .col_3, .col_4, .col_6, .col_10, .col_12 {
		width: auto;
	}

	.left {
		float: none;
		margin: 0;
	}
	
	.section {
		float: left;
		width: 48%;
		margin: 0 1%;
	}
	
	.twitter, .tumblr, .movies { clear: left; }
}



/* --- Target Mobile Devices
-------------------------------------------------------*/

@media screen and (max-width: 600px),
only screen and (max-device-width: 480px) {
	#container {
		width: auto;
		margin: 0 20px;
	}
	
	.col_2, .col_3, .col_4, .col_6, .col_10, .col_12 {
		width: auto;
	}

	.left {
		float: none;
		margin: 0;
	}
	
	.section {
		float: none;
		width: auto;
		margin: 0 0 2em;
	}

}