@charset "UTF-8";
/* -------------------------------------------------------
				arif.widianto.com stylesheet document
				Created: Aug 16, 2009 06:58 pm
				
Developed with love and passion, and failed sometime.
-------------------------------------------------------- */

@import url(reset.css);
@import url(grid.css);
@import url(type.css);
@import url(theme.css);

/* -------------------- GENERAL HTML ELEMENTS ------------------- */

/* Using CSS frame like, credit: http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/ */
HTML, BODY {
	text-align: center;
}

/* ------------------------ GENERAL LAYOUT ---------------------- */
#wrapper {
	position: relative;
	margin: 0 auto;
	text-align: left;
}


/* --------------------------- HEADER -------------------------- */

#header {
	text-align: center;
}

#header_wrapper {
	margin: 0 auto;
	text-align: left;
	height: 67px;
}

#masthead {
	float: left;
	width: 300px;
}

#masthead A {
	display: block;
	height: 20px;
	width: 130px;
	padding: 20px 0 20px 60px;
}


/* NAVIGATION  */
#nav {
	float: right;
	margin-top: 18px;
}

#nav UL {
	list-style-type: none;
}

#nav LI {
	float: left;
	margin: 0;
	height: 35px;
}

#nav A {
	display: block;
	height: 28px;
	padding-top: 7px;
	text-align: center;
	background: url(../i/sprites.png) no-repeat;
}

#nav_about A { width: 93px; }
#nav_notes A { width: 87px; }
#nav_goodies A { width: 106px; }
#nav_work A { width: 125px; }
#nav_portfolio A { width: 106px; }
#nav_scrapbook A { width: 106px; }
#nav_articles A { width: 108px; }

#about #nav_about A, #nav_about A:hover { background-position: -419px -505px; }
#notes #nav_notes A, #nav_notes A:hover { background-position: -332px -505px; }
#goodies #nav_goodies A, #nav_goodies A:hover { background-position: -224px -505px; }
#portfolio #nav_portfolio A, #nav_portfolio A:hover { background-position: -224px -505px; }
#scrapbook #nav_scrapbook A, #nav_scrapbook A:hover { background-position: 10px -505px; }
#work #nav_work A, #nav_work A:hover { background-position: -101px -505px; }
#articles #nav_articles A, #nav_articles A:hover { background-position: 10px -505px; }

/* ------------------ TITLE --------------- */
#title {
	padding: 10px 0 10px 0;
	min-height: 40px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 30px;
	margin-top: 5px;
}

#title P {
	color: #666;
}

H1 {
	
}

H2 {
	margin-bottom: 1.5em;
}

/* ------------------ CONTENT --------------- */
#grid_wrapper {
	min-height: 500px;
}

#content HR {
	border: 1px solid #CCC;
}

UL.list {
	list-style-type: none;
	color: #999;
}

UL.list LI {
	padding-left: 1.5em;
	margin-bottom: 0.5em;
	font-size: 90%;
	background: url(../i/square.png) no-repeat 4px 6px;
}

/* ------------------------ FOOTER -------------------- */

#footer {
	clear: both;
	text-align: center;
	background: url(../i/bgfooter.png) repeat-x bottom;
}

#footer_wrapper {
	margin: 0 auto;
	text-align: left;
	height: 32px;
}

#footer HR { 
	display: none;
}

/* NOTICES --------------- */
#notice {
	float: left;
	width: 580px;
	list-style-type: none;
	line-height: 30px;
}

#notice LI {
	display: inline;
	padding-left: 8px;
	padding-right: 3px;
}

#notice LI.first {
	background: none;
}


/* SOCIAL MEDIA LINKS --------------- */
#net {
	float: right;
	width: 260px;
}

#net UL {
	margin: 7px 0 0 0;
	height: 21px;
	list-style-type: none;
}

#net LI {
	float: left;
}

#net A {
	display: block;
	width: 21px;
	height: 21px;
	margin-left: 6px;
	background: url(../i/sprites.png) no-repeat;
}

#net A SPAN {
	display: none;
}

#net LI#net_linkedin A { background-position: 0 -100px; }
#net LI#net_facebook A { background-position: -26px -100px; }
#net LI#net_twitter A { background-position: -52px -100px; }
#net LI#net_delicious A { background-position: -80px -100px; }
#net LI#net_youtube A { background-position: -107px -100px; }
#net LI#net_flickr A { background-position: -134px -100px; }
#net LI#net_about A { background-position: -192px -100px; margin-left: 38px; }
#net LI#net_contact A { background-position: -218px -100px; }








/* ------------------------ SPECIFIC PAGES -------------------- */
#homemaster {
	padding-top: 50px;
	text-align: center;
}

.portfoliogrid LI {
	min-height: 80px;
	margin-bottom: 10px;
	font-size: 90%;
}

.portfoliogrid LI IMG {
	float: left;
	margin-right: 10px;
	border: 4px solid #ddd;
}

.portfoliogrid LI A {
	color: #666;
}

.portfoliogrid LI A STRONG {
	display: block;
	color: #33a3e3;
	font-size: 140%;
	font-family: Georgia, "Times New Roman", Times, serif;
}

.portfoliogrid LI A:hover {
	color: #666;
}

.portfoliogrid LI A:hover STRONG {
	color: #36C;
}

.portfoliogrid LI A:hover IMG {
	border: 4px solid #c7c7c7;
}


/* FEATURED WORK */
.portfolio-featured {
	margin-bottom: 20px;
}

.portfolio-featured H3 {
	font-size: 140%;
	font-family: Georgia, "Times New Roman", Times, serif;
	margin-bottom: 10px;
}

.portfolio-featured IMG {
	float: left;
	margin-right: 10px;
	border: 4px solid #ddd;
}

P.portfolio-label {
	font-size: 110%;
}

P.portfolio-label EM {
	font-style: italic;
}

P.portfolio-desc {
	
} 

.portfolios_small IMG {
	width: 75px;
}

.portfolio_image {
	border: 4px solid #ddd;
}