/*********************************************************************************
 *	screen.css
 *
 *	Decription:
 *		This is the main file for all rules of CSS of the whole site.
 *	Author:
 *		Thien Nguyen
 *	Date:
 *		November 23rd, 2007
 *	Modified:
 *		March 9th, 2009
 *********************************************************************************/


/**
 * CSS RULES FOR HTML SELECTORS
 */

body { line-height:2em; font-family:Geneva, Verdana, Tahoma, Monaco, Arial, Helvetica, sans-serif; }

/* headings */
h1, h2, h3, h4, h5 { font-family:Gentilis, 'Palatino Linotype', 'Book Antiqua', Palatino, Garamond, Georgia, "Times New Roman", Times, serif; }
h2.pagetitle, h3#comments, h3#nocomments, h3#respond { margin-left:10px; display:block; }
h2 a, h3 a, h4 a, h5 a { position:relative; text-decoration:none; }
h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover { text-decoration:none; }
h1 { font-size:20px; }
h2 { font-size:27px; line-height:1.1em; padding-top:5px; }
	h2 + p.postmetadata, h2 + p.small { margin-top:-10px; }
h3 { font-size:27px; margin-bottom:10px; }
	#sb h3, #ct .entry h3 { font-size:18px; font-weight:bold; }
h4 { font-size:16px; margin-bottom:10px; }
h5 {}

/* anchors */
a { text-decoration:none; outline:none; }
a:hover { text-decoration:underline; }

/* misc */
ul, ol { list-style-position:inside; }

/**
 * FORM ELEMENTS
 */

label { font-weight:normal; }
#search {  }
	#search p { background:transparent url(../img/bgd_search_01.png) 0 0 no-repeat; width:200px; height:20px; margin:0; padding:0; display:block; position:relative; }
	#search p input { margin:0; padding:0; border:none; outline:none; }
	#search input.text { line-height:11px; background:transparent none; width:165px; height:16px; top:2px; left:10px; position:absolute; display:block; }
	#searchsubmit { background:url(../img/btn_search_01.png) 0 0 no-repeat; width:15px; height:15px; top:2px; right:4px; position:absolute; text-indent:-9999px; cursor:pointer; }
	#searchsubmit:hover, #searchsubmit:active { background:url(../img/btn_search_01_over.png) 0 0 no-repeat; }
	#search label, #search br { display:none; }
#commentform { margin:0 10px 10px 10px; }
	#commentform label { display:block; }
	#commentform input.text { margin:0; }
#comment { height:200px; }


/**
 * COMMON SITEWIDE ELEMENTS
 */

/* .carousel */
.carousel-v, .carousel-v .wrapper { width:450px; position:relative; overflow:hidden; }
.carousel-v { margin-top:5px; margin-bottom:50px; }
.carousel-v .wrapper { height:253px; }
.carousel-v a { cursor:pointer; }
.carousel-v ul, .carousel-v li { margin:0; padding:0; display:block; list-style:none; }
.carousel-v ul { width:99999999px; height:253px; position:relative; }
.carousel-v li { width:450px; height:253px; float:left; text-align:center; }
.carousel-v li a { background:#b8c5a1; padding:6px; display:block; position:relative; }
.carousel-v li a:hover { background:#e8eba5; }
.carousel-v li span { background:url(../img/icon_zoom_01.png) 0 0 no-repeat; width:30px; height:30px; bottom:10px; right:10px; position:absolute; display:block; text-indent:-9999px; }
.carousel-v li img { background:#fff; width:438px; height:241px; display:block; }
.carousel-v .prev, .carousel-v .previous_button-hover, .carousel-v .previous_button-disabled,
	.carousel-v .next, .carousel-v .next_button-hover, .carousel-v .next_button-disabled { width:50px; height:253px; top:0; position:absolute; display:block; text-decoration:none; text-indent:-9999px; }
.carousel-v .prev, .carousel-v .previous_button-hover, .carousel-v .previous_button-disabled { left:0; z-index:100; }
	.carousel-v .prev { background:url(../img/btn_prev_01.png) 0 50% no-repeat; }
	.carousel-v .previous_button-hover { background:url(../img/btn_prev_01_hover.png) 0 50% no-repeat; }
	.carousel-v .previous_button-disabled { background:url(../img/btn_prev_01_disabled.png) 0 50% no-repeat; }
.carousel-v .next, .carousel-v .next_button-hover, .carousel .next_button-disabled { right:0; z-index:101; }
	.carousel-v .next { background:url(../img/btn_next_01.png) 100% 50% no-repeat; }
	.carousel-v .next_button-hover { background:url(../img/btn_next_01_hover.png) 100% 50% no-repeat; }
	.carousel-v .next_button-disabled { background:url(../img/btn_next_01_disabled.png) 100% 50% no-repeat; }

/* .fancyzoom */
.fancyzoom { clear:both; }
.fancyzoom li { display:none; }

div#zoom { z-index:999; }
div#zoom img { display:block; }
/* Fancy border radii */
div#zoom.edgy { background:#fff; width:500px; height:600px; margin:0; padding:0; -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; -khtml-border-radius:5px; -webkit-box-shadow:rgba(20,20,20,0.75) 0 2px 10px; }
/* And now for some IE love, since they don't understand radii */
/*div#zoom.edgy { *border:3px solid rgba(30,30,30,0.75); }*/
/* FireFox 2 */
div#zoom.edgy, x:-moz-any-link { background:#ccc; } 
/* FireFox 3*/
div#zoom.edgy, x:-moz-any-link, x:default { background:#ccc; }

div#zoom.edgy #zoom_close { margin:0; padding:0; top:-13px; left:-13px; position:absolute; }
div#zoom.edgy #zoom_content	{ margin:0; padding:10px; position:relative; }


/**
 * MAIN STRUCTURE
 */

.containerwrapper { width:970px; margin:0 auto; }
.container { padding:0 10px; }

/* #h - header */
#h {  }
	#h a { font-size:12px; line-height:15px; font-family:Geneva, Verdana, Tahoma, Monaco, Arial, Helvetica, sans-serif; height:30px; padding:10px; position:relative; display:block; text-decoration:none; }
	#h strong { display:block; letter-spacing:1px; text-transform:uppercase; }

	#branding { float:left; position:relative; }
	#branding p { display:none; }
	#branding a { width:190px; margin:10px; }

	#lev1 { margin:0; list-style:none; }
	#lev1 li { margin:0; padding:0; display:block; float:left; }
	#lev1 a { width:210px; margin:10px 10px 10px 0; }
		#h a[title="nttgraphics.com"]:after { content:"updates & stuff"; }
		#h a[title="about"]:after, #h a[title="About"]:after { content:"info & resume"; }
		#h a[title="portfolio"]:after, #h a[title="Portfolio"]:after { content:"of selected projects"; }
		#h a[title="contact"]:after, #h a[title="Contact"]:after { content:"for freelancing job";}

/* #m - main */
#m { position:relative; }

	/* #ct - content */
	#ct {  }
		/* .post */
		.post { font-size:13px; padding:0 10px 30px 10px; }
			.date { background:#efefef; width:70px; margin:0 10px 10px 0; padding:10px 5px; float:left; text-align:center; }
			.date span { font-family:Optimer, 'Palatino Linotype', 'Book Antiqua', Palatino, Garamond, Georgia, "Times New Roman", Times, serif; display:block; }
			.date .month { font-size:10px; line-height:10px; margin-bottom:10px; text-transform:uppercase; }
			.date .day { font-size:50px; line-height:45px; }
			.date .year { display:none; }
		/* .nav, .nav2 - paging */
		.nav, .nav2 { width:100%; bottom:10px; left:10px; position:absolute; }
		.nav2 { margin-bottom:30px; }
			.nav span { width:60px; height:20px; display:block; }
			.nav a { display:block; }
			.nav .prev {}
			.nav .prev a { padding-left:15px; }
			.nav .next { margin:-20px 0 0 390px; text-align:right; }
			.nav .next a { padding-right:15px; }
		/* misc */
		.entry { margin-bottom:10px; clear:both; }
			.entry .span-6 { float:right; }
		.edit, .nocomments { margin:10px; }
		.commentlist { padding:0 10px 10px 10px; }
		.comments {}
		/* #il - illustration */
		#il { background-position:0 0; background-repeat:no-repeat; width:230px; height:550px; margin:0 10px 10px -10px; float:left; }
		
	/* #sb - sidebar */
	#sb {  }
		.widget { margin:0 0 10px 0; padding:15px; }
		.widget ul, .widget ol { margin-left:0; margin-right:0; }
		.widget li { margin-left:0; padding-left:17px; list-style:none; }


/* #f - footer */
#f {  }
	#f .clearfix { padding:10px; }
	#f .separator1 { padding:0 5px; }
	#f ul, #f p { font-size:.85em; margin:0; }
	#f ul { float:left; }
	#f li { margin-right:10px; padding-right:15px; display:inline; }
	/*#f li:last-child { margin-right:0; padding-right:0; }*/
	#f li a { text-transform:uppercase; }
	#f p { float:right; }


/**
 * SPECIFICS
 */

h3#respond, h3#comments, h3#nocomments, #commentform, .commentlist { display:none; visibility:hidden; }

.portfolio .post { font-size:12px; }