/** 	Phu Son Nguyen
    *	Blue Theme
    *   Sorry for the mess...it's CSS Reboot time...will clean as time goes by =)
***/

* { padding: 0; margin: 0;} /* reset all browser preset values */
body { color:#c4c4c4; background: url("../img/bg.jpg") repeat-x top #f8f8f8; font: medium Verdana, "Trebuchet MS", Helvetica, sans-serif; }
ul,li {	list-style-type:none; }
select { min-width: 1.5em;}
select > option { padding: 0 2px 0 3px; }
form { margin: 0; padding: 0; }
img { border: 0; }
hr { clear:both; display: none; }
label { display: none; }
fieldset { border: 0; }
.clear { clear:both; }
.clear2 {clear:both; height: .8em; }

a:link, a:visited {	text-decoration: none; color: #cdcdcd;}
a:active, a:hover {	 }

::-moz-selection{ background: #429CF4; color: #fff; }
::selection { background: #429CF4; color: #fff; }

.red { color: red; }

/* Header Top Graphic
--------------------------------------------------------------------------------------------------------------*/
#hdr { background: url("../img/hdr_blue.jpg") no-repeat top transparent; margin: auto; padding: auto; width: 900px; height: 283px; position: relative; }

/* Images Styles
--------------------------------------------------------------------------------------------------------------*/
.right { border: 0px solid #E8D2D2; float: right; margin-left: 15px; margin-bottom: 2px; display: block; position: relative; }
.left { border: 0px solid #E8D2D2; float: left; margin-right: 15px; margin-bottom: 2px; display: block; position: relative; }
.bottom { border: 0px solid #E8D2D2; margin-right: 10px; margin-bottom: 2px; display: block; text-align: center; top: 5px; position: relative; }
	
/* Mid Section
--------------------------------------------------------------------------------------------------------------*/
#mid { background: url("../img/mid_blue.jpg") no-repeat top transparent; margin: auto; padding: auto; width: 900px; height: 137px; position: relative; z-index: 1; }
    * html #mid { z-index: -1; } /* only IE - mid section overlapping live search result */
    
	#mid a { width: 100%; height: 100%; margin: auto; padding: auto; display: block;}	
	#mid span { text-indent: -100em; overflow: hidden; display: none; }

/* Menu
--------------------------------------------------------------------------------------------------------------*/
#menu {	width: 355px; height: 65px; background: url('../img/menu.jpg');	margin: 0; padding: 0; }
	
    #menu li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; }

    #menu li, #menu a { height: 65px; display: block; }
    
    #mjournal 				{ text-indent: -100em; overflow: hidden; left: 0; width: 89px; }
    #mabout 				{ text-indent: -100em; overflow: hidden; left: 89px; width: 74px; }
    #mportfolio 			{ text-indent: -100em; overflow: hidden; left: 163px; width: 96px; }
    #mcontact 				{ text-indent: -100em; overflow: hidden; left: 259px; width: 96px; }
    
    #mjournal a:hover       { background: transparent url('../img/menu.jpg') 0 -130px no-repeat; }
    #mabout a:hover         { background: transparent url('../img/menu.jpg') -89px -130px no-repeat; }
    #mportfolio a:hover     { background: transparent url('../img/menu.jpg') -163px -130px no-repeat; }
    #mcontact a:hover       { background: transparent url('../img/menu.jpg') -259px -130px no-repeat; }
    
    #mjournal a:active		{ background: transparent url('../img/menu.jpg') 0 -65px no-repeat; }
    #mabout a:active		{ background: transparent url('../img/menu.jpg') -89px -65px no-repeat; }
    #mportfolio a:active	{ background: transparent url('../img/menu.jpg') -163px -65px no-repeat; }
    #mcontact a:active		{ background: transparent url('../img/menu.jpg') -259px -65px no-repeat; }
	
    .s1 li#mjournal a		{ background: transparent url('../img/menu.jpg') 0 -65px no-repeat; }
    .s2 li#mabout a			{ background: transparent url('../img/menu.jpg') -89px -65px no-repeat; }
    .s3 li#mportfolio a		{ background: transparent url('../img/menu.jpg') -163px -65px no-repeat; }
    .s4 li#mcontact a		{ background: transparent url('../img/menu.jpg') -259px -65px no-repeat; }
    
/* skip-search links
--------------------------------------------------------------------------------------------------------------*/	
#skip {	right: 244px; top: 30px; position: absolute; text-align:right; background:url(../img/skip.gif) no-repeat 0px 3px; padding:0 5px 0 14px; font-size: .7em; font-weight: bold;	color: #cdcdcd;	letter-spacing: 0px; font-family: "Trebuchet MS", Helvetica, sans-serif; }
	
#search { right: 15px; top: 26px; position: absolute; text-align:right; }

#livesearch { color: #ddd; border: 1px solid #A8A8A8; height: 1.4em; padding: 2px 0px 0px 5px; font-size: 70%;	width: 195px; font-weight: bold; font-family: Verdana, "Trebuchet MS", Helvetica, sans-serif; background: #909090; }
	#livesearch:hover { border: 1px solid #ddd; color: #fff;}

/* LiveSearch
--------------------------------------------------------------------------------------------------------------*/
#LSResult { filter:alpha(opacity=70); opacity: 0.7; -moz-opacity:0.7;
	position: absolute; right:0; top: 20px;	background-color: #fff;	width:275px; overflow: hidden; padding: 2px 5px; z-index: 100; border: 1px solid #ddd; font-size: 70%; }  
    body>div #LSResult { filter:alpha(opacity=100); opacity: 1; -moz-opacity:1; background: url("../img/lsbg.png") transparent; } /* only FF */
    
    * html #LSResult { height: 222px; overflow: hidden; }

#LSResult a { display: block; padding: 2px 5px; margin: 0 -5px;	border-bottom: 0; text-decoration: none; font-weight: bold; color: #606060; }

#LSRes { text-align:left; float:left; width: 100%; }

ins { border-bottom: 0;	text-decoration: none; }

#LSResult a:hover {	background-color: #999; color: #fff; }

#LSHighlight { background-color: #999; color:#fff; width:100%; }
    #LSHighlight a { background-color: #999; color:#fff !important; width:100%; padding: 2px 5px; }
.lsDate { display: block; color: #fff; }


/* Content Section
--------------------------------------------------------------------------------------------------------------*/
#content { margin: auto; padding: auto;	width: 900px; position: relative; color: #555; padding-top: 1em;}

    .mid_blank { background: url("../img/mid_blue_blank.jpg") no-repeat top transparent; padding-top: .5em; }
    
/* content global modifiers for Side Titles  */
.section h2,
.section h3 { text-shadow:#ddd 2px 2px; padding: 5px 8px 3px; font: bold 1.45em "Trebuchet MS", Verdana; color: #429cf4; clear: both; }
    .section a:link, .section a:visited, .section a:active { color: #429cf4 !important; }
    .section a:hover { color: #444 !important; }
	
/* Blog Section
--------------------------------------------------------------------------------------------------------------*/
#blog { width: 442px; float: left; position: relative; }
    
#blog a:link, #blog a:visited {	font: 100%; font-weight: bold; }
#blog a:active, #blog a:hover {	}
		
	ul.blog_links {	font-size: .7em; height: 1.2em;	padding: 0px 9px; }
    ul.blog_links li { display: block; list-style: none; }

    ul.blog_links li, 
    ul.blog_links a {  }
	
		.posted_date {
			left: 9px; width: 440px; position: absolute;
			}
	
		.comments_invite {
			right: 5px; width: 100%; position: relative; text-align: right;
			}
		
	.post,
    .recentbody { padding: 9px; padding-right: 12px; font: .75em Verdana, Helvetica, sans-serif; overflow: hidden;}
        
        .recentbody { padding-top: 0px; }
	
    .post img { border: 4px solid #E2E2E2; }
    .post p { padding: .8em 0; }
	.post p,
    .recentbody { line-height: 1.7em; text-align: justify; color: #444; }
    
dl.aa dt { font: bold 1em Verdana; padding: .7em 0 .15em; border-bottom: 1px solid #eee; background: url("../img/ic_calendar.gif") no-repeat 100% 75% transparent; display: block; width: 100%; } /* dt for archives */

#recentarticles { width: 442px; float: left; position: relative; }
    #recentarticles ul { width: 100%; }
        #recentarticles li { border-bottom: 1px solid #eee; text-overflow:ellipsis; }
        #recentarticles li,
            #recentarticles li a { background: url("../img/ic_post.gif") no-repeat 100% 75% transparent; display: block; height: 1.9em; width: 100%; text-decoration: none; font: 100%; line-height: 1.95em; font-weight: bold;  }
            #recentarticles li a:active, 
            #recentarticles li a:hover { background-color: #f3f3f3 !important; }
            #recentarticles li.odd { background-color: #f5f5f5 !important; }

#recentcomments { width: 428px; float: left; margin-left: 30px; position: relative;	}
    #recentcomments ul { width: 100%; }
        #recentcomments li { border-bottom: 1px solid #eee; background: url("../img/ic_comment.gif") no-repeat 100% 15% transparent; }
        #recentcomments li, #recentcomments li a { display:block; width: 100%; text-decoration: none; font: 100%; }
            #recentcomments li a { font-weight: bold; }
            #recentcomments li a:active, 
            #recentcomments li a:hover { /*background-color: #f3f3f3 !important;*/ }    

    .archives { width: 315px !important; float: left; padding: 0 0 0 15px !important; margin: 0 0 0 15px; }
    
/* Recent Projects Section
--------------------------------------------------------------------------------------------------------------*/
#recentprojects { width: 290px; float: left; padding: 0 15px; margin: 0 15px; }
    
    #projects {	width: 290px; margin: 0; padding: 0; }
	
        #projects li { background: url('../img/projects_bg.gif'); margin: 0; padding: 0 0 5px; list-style: none; height: 86px; width: 290px; display: block; }
    	#projects li:hover { }

        #projects a { padding-left: 9px; opacity: 0.85 }
        #projects a:hover { opacity: 1; }
	
/* Flickr Section
--------------------------------------------------------------------------------------------------------------*/
#flickr { width: 100px; float: right; }
	
    
	#flickr h2 { padding-bottom: 0px !important; border: 0 !important; }
    
	.flickrPics { color: #fff !important; margin-left: 8px; }
    
    #flickr img {float:left; margin:3px 0px 4px; background:#eee; padding:4px; width:75px; height:75px; opacity: .85; }
    #flickr img:hover { opacity: 1;}

/* Contact Form
--------------------------------------------------------------------------------------------------------------*/ 
#zemContactForm fieldset legend { display:none; }
#zemContactForm label {display: inline !important; }
#zemContactForm .zemError { color: red; text-align: center; border: 1px solid #DF7D7D; width: 417px; }

    input#youremail,
    input#subject,
    textarea#body,

    .comment_inputs input#name,
    .comment_inputs input#nhn_name,
    .comment_inputs input#email,
    .comment_inputs textarea#message,
    .comment_inputs textarea#nhn_message,
    .comment_inputs input#web 
        { font: bold 1em Verdana; color: #666; width: 505px; padding: 2px; border: 1px solid #fff; border-top: 1px solid #999; border-left: 1px solid #999; background: #eee; }
    
    .comment_inputs input#nhn_comment_spamsave { margin-right: 5px; }
    
    input#youremail:hover,
    input#subject:hover,
    textarea#body:hover { background: #fff; }
    
/* Comments
--------------------------------------------------------------------------------------------------------------*/ 
#txpCommentInputForm label { display: inline; }
p#txpCommentInputForm { font: bold .8em "Trebuchet MS",Arial,Helvetica,sans-serif; padding: 10px; border-top: 1px solid #eee; }

.comment_inputs { }
.comment_inputs label { display: inline; }

.comment_box { padding: 0; margin: 5px 0 5px; padding-left: 3px; width:535px; }
.comment_box .clear { height: .5em; }
.comment { padding:5px 8px 0 15px; float:left; width:440px;	}

    .alpha .gravatar { background:transparent url(../img/ic_comment_alpha.jpg) no-repeat; }
    .beta .gravatar { background:transparent url(../img/ic_comment_beta.jpg) no-repeat; }
    
.gravatar {	padding: 0; float:left; width:57px; height:108px; }
.gravatar img { float: left; padding: 35px 0 0 9px !important; }
.gravatar p { text-align:center; padding:8px 0 0 0; width:57px; color:#fff;	text-shadow:#283434 2px 2px; font:bold 16px Georgia,Arial,Helvetica,sans-serif;	}
.comment h4 { color:#0084ff; letter-spacing:1.5px; padding:0 0 10px 0; margin:0 0 10px 0; font: bold .8em "Trebuchet MS",Arial,Helvetica,sans-serif;   border-bottom: 1px solid #eee; text-shadow:#eee 2px 2px; }
.comment h4 a, .comment h4 a:link, .comment h4 a:visited { background:none;	color:#0084ff !important; border:0; }
.comment h4 a:hover { color: #444 !important; }
.comment h4 em { padding-right:10px; margin-right:9px; font-style: normal; }
.comment p { margin:0 0 10px 0; font: normal .7em Verdana, san-serif;line-height: 1.4em; text-align: justify; }
.comment p em { color:#acc0a2; }
.comment h4 span { float:right; }
.comment pre,
.comment code {	color:#9cc57f; font-family:Courier,"Courier New",Monaco,Tahoma; font-size:12px;	padding:5px 0 5px 8px; margin:0 0 12px 0; border:1px dashed #576861; background:#293636; width:563px; overflow:auto; display:block;	}
.comment blockquote { background:url(./graphics/quote-comment.gif) no-repeat; padding:5px 0 0 20px; margin: 0 0 20px 20px; color:#acc0a2; font-style:italic; }

/* RoBall Action Picture
--------------------------------------------------------------------------------------------------------------*/ 
#roballaction { float: right; margin-right: 8px; }

/* Footer
--------------------------------------------------------------------------------------------------------------*/ 
#foot { width: 100%; background: #c9c9c9; border-top: .3em solid #eee; margin-top: .8em; }
    #foot ul { text-align: center; width: 900px; color: #fefefe; margin: auto; padding: auto; font: bold .7em Verdana, san-serif; padding: .5em 0 .6em; bottom: 0; }
        #foot ul li { display:inline; padding: 0 15px; }
        #foot ul li a { color: #fefefe; }
        #foot ul li a:hover, 
        #foot ul li a:active { color: #666; }