@charset "utf-8";
@import url("reset.css");

/*
Theme Name: Brown Web 2.0
Theme URI: http://www.veronicawong.ca
Description: Personal Portfolio & Weblog
Version: 1.0
Author: Veronica Wong
Author URI: http://www.veronicawong.ca

*/

body { background: #372e28; border-top: 4px solid #372e28;}

/* header */

#header-wrapper {
	background: url("../imgs/bg-body.gif");
	height: 126px;
	}

#header {
	margin: 0 auto;
	width: 860px;
	}
		
	/* navigation */
	
	ul#global-nav {
		float: right;
		position: relative;
		top: 48px;
		width: 354px;
		height: 40px;
		list-style: none;
		}
	
	ul#global-nav li { float: left; }
	ul#global-nav li a { display: block; height: 40px; text-decoration: none; outline: none; }
	ul#global-nav li#global-home a { width: 61px; background: url("../imgs/global-nav.jpg") 0px -40px no-repeat; }
	ul#global-nav li#global-home a:hover { background-position: 0px -80px; }
	ul#global-nav li#global-portfolio a { width: 86px; background: url("../imgs/global-nav.jpg") -61px -40px no-repeat; }
	ul#global-nav li#global-portfolio a:hover { background-position: -61px -80px; }
	ul#global-nav li#global-portfolio-active a { width: 86px; background: url("../imgs/global-nav.jpg") -61px 0px no-repeat; }
	ul#global-nav li#global-blog a { width: 60px; background: url("../imgs/global-nav.jpg") -147px -40px no-repeat; }
	ul#global-nav li#global-blog a:hover { background-position: -147px -80px; }
	ul#global-nav li#global-blog-active a { width: 60px; background: url("../imgs/global-nav.jpg") -147px 0px no-repeat; }
	ul#global-nav li#global-about a { width: 71px; background: url("../imgs/global-nav.jpg") -207px -40px no-repeat; }
	ul#global-nav li#global-about a:hover { background-position: -207px -80px; }
	ul#global-nav li#global-about-active a { width: 71px; background: url("../imgs/global-nav.jpg") -207px 0px no-repeat; }
	ul#global-nav li#global-contact a { width: 76px; background: url("../imgs/global-nav.jpg") -278px -40px no-repeat; }
	ul#global-nav li#global-contact a:hover { background-position: -278px -80px; }
	ul#global-nav li#global-contact-active a { width: 76px; background: url("../imgs/global-nav.jpg") -278px 0px no-repeat; }

/* featured section */

#featured-wrapper {
	background: #645349;
	height: 330px;
	}

#featured {
	margin: 0 auto;
	width: 860px;
	}
	
#featured-tag {
	display: block;
	margin-top: 20px;
	width: 339px;
	height: 99px;
	background: url("../imgs/tag.jpg");
	}

#featured p {
	margin-top: 8px;
	width: 300px;
	font: 13px georgia, garamond, times new roman, serif;
	color: #e69065;
	letter-spacing: 1.25px;
	line-height: 20px;
	}
	
#featured-link a {
	display: block;
	margin-top: 30px;
	width: 162px;
	height: 27px;
	background: url("../imgs/featured-link.jpg");
	text-decoration: none;
	}
	
#featured-link a:hover { background-position: 0 -27px; }

	/* featured blog */
	.featured-entry { float: right; width: 492px; }
	.featured-entry p {
		margin-bottom: 20px;
		font: 11px Georgia, garamond, times new roman, times, serif;
		line-height: 20px;
		letter-spacing: 1px;
		color: #645349;
		}

	.featured-entry a { color: #e69065; text-decoration: none; }
	.featured-entry a:hover { text-decoration: underline; }

	/* featured work */
	#recent-work {
		float: right;
		width: 460px;
		height: 282px;
		background: #372e28;
		}
	
	#recent-work #s1 { margin: 8px 0 0 8px; z-index: 1;}
	#recent-tag { display: block; position: relative; top: -4px; left: 4px; width: 87px; height: 87px; background: url("../imgs/recent-tag.gif") no-repeat; z-index: 2;}
	#recent-work #prev { display: block; position: relative; top: 44px; left: -31px; width: 22px; height: 22px; background: url("../imgs/recent-larrow.jpg") no-repeat; font-size: 1px; text-decoration: none; outline: none; }
	#recent-work #next { display: block; position: relative; top: 21px; left: 469px;  width: 22px; height: 22px; background: url("../imgs/recent-rarrow.jpg") no-repeat; font-size: 1px; text-decoration: none; outline: none; }

/* body */
		
#content-wrapper {
	padding: 37px 0 45px 0;
	height: auto;
	background: #f7f5f0 url("../imgs/body-top.gif") top repeat-x;
	}
		
#content {
	margin: 0 auto;
	width: 860px;
	}

#content p {
	margin-bottom: 20px;
	font: 11px Georgia, garamond, times new roman, times, serif;
	line-height: 20px;
	letter-spacing: 1px;
	color: #645349;
	}

#index-latestblog {
	float: left;
	width: 540px;
	height: auto;
	}
	
#index-about {
	float: right;
	width: 300px;
	height: auto;
	}
	
#index-about p {
	margin-bottom: 20px;
	font: 11px Georgia, garamond, times new roman, times, serif;
	line-height: 20px;
	letter-spacing: 1px;
	color: #645349;
	}

/* portfolio section */
#portfoliolist-wrapper { margin: 0; }
#portfoliolist { margin: 0 auto; padding: 20px 0; width: 860px; }

#portfoliolist ul { list-style: none; }
#portfoliolist ul li { display: block; float: left; width: 215px; }
#portfoliolist ul li a {
	margin: 5px 15px 5px 0;
	font: 10px arial, helvetica, verdana, tahoma, sans serif;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #e69065;
	text-decoration: none;
	}
	
#portfoliolist ul li a:hover { text-decoration: underline; }
#portfoliolist  ul li.current_page_item a { padding-right: 15px; background: url("../imgs/active-bullet.png") center right no-repeat; color: #f7f5f0;}

#portfolio-main { float: left; width: 620px; height: auto; text-align: center; }
#portfolio-sidebar { float: right; width: 220px; height: auto; }

#portfolio-main p , #portfolio-sidebar p {
	margin-bottom: 20px;
	font: 11px Georgia, garamond, times new roman, times, serif;
	line-height: 20px;
	letter-spacing: 1px;
	color: #645349;
	}
	
#portfolio-main img { margin-bottom: 20px; }
	
#portfolio-main a , #portfolio-sidebar a { color: #e69065; text-decoration: none;  }
#portfolio-main a:hover, #portfolio-sidebar a:hover { text-decoration: underline; }

/* blog section */

#blog-main {
	float: left;
	width: 620px;
	height: auto;
	}
	
#blog-sidebar {
	float: right;
	position: relative;
	top: -35px;
	width: 220px;
	height: auto;
	}

#blog-main p , #blog-sidebar p {
	margin-bottom: 20px;
	font: 11px Georgia, garamond, times new roman, times, serif;
	line-height: 20px;
	letter-spacing: 1px;
	color: #645349;
	}

#blog-main p a , #blog-sidebar p a { color: #e69065; text-decoration: none;  }
#blog-main p a:hover, #blog-sidebar p a:hover { text-decoration: underline; }

	/* blog sidebar items */
	
	#blog-sidebar ul { list-style: none; }

	.blogsidebar-categories, .blogsidebar-archives, .blogsidebar-popular, .blogsidebar-recent {
		display: block;
		margin-bottom: 30px;
		}

	.blogsidebar-categories ul li a , .blogsidebar-archives ul li a {
		margin: 0px;
		padding: 3px 0;
		font: 10px arial, helvetica, verdana, tahoma, sans serif;
		letter-spacing: 2px;
		line-height: 20px;
		text-transform: uppercase;
		text-decoration: none;
		color: #e69065;
		}
		
	.blogsidebar-archives ul li a em { color: #0cb7a4; font-style: normal; }
	.blogsidebar-archives ul li a:hover em { color: #0cb7a4; text-decoration: underline; }
		
	.blogsidebar-popular a, .blogsidebar-recent ul li a {
		display: block;
		padding: 6px 0;
		font: 10px arial, helvetica, verdana, tahoma, sans serif;
		letter-spacing: 2px;
		line-height: 20px;
		text-transform: uppercase;
		text-decoration: none;
		color: #e69065;
		border-bottom: 1px solid #e1d9c2;
		}
		
	.blogsidebar-categories ul li a:hover , .blogsidebar-archives ul li a:hover, .blogsidebar-popular a:hover, .blogsidebar-recent ul li a:hover { text-decoration: underline; }

		/* search form properties */

		#blogsidebar-search {
			margin: 0 0 20px 0;
			padding: 5px 0 0 5px;
			width: 220px;
			height: 30px;
			background: url("../imgs/search-bg.jpg") no-repeat;
			}

		#blogsidebar-search input#s {
			float: left;
			padding-top: 3px;
			height: 16px;
			width: 155px;
			background: #645349;
			color: #f7f5f0;
			border: 0px;
			font-size: 11px;
			}
	
		#blogsidebar-search input#searchsubmit {
			margin-right: 10px;
			padding-bottom: 2px;
			width: 50px;
			height: 20px;
			background: #645349;
			color: #f7f5f0;
			border: 0px;
			font: 10px arial, helvetica, verdana, tahoma, sans serif;
			text-transform: uppercase;
			} 
			
		#searchform {
			float: right;
			width: 220px;
			text-align: right;
			}

	/* blog entry properties */
	
	.blog-entry { float: right; margin-bottom: 40px; width: 572px; }
	.blog-entry p {
		margin-bottom: 20px;
		font: 11px Georgia, garamond, times new roman, times, serif;
		line-height: 20px;
		letter-spacing: 1px;
		color: #645349;
		}
		
	.blog-entry ol,
	.blog-entry ul {
		margin: 0 0 20px 20px;
		font: 11px Georgia, garamond, times new roman, times, serif;
		line-height: 20px;
		letter-spacing: 1px;
		color: #645349;
		}

	.blog-entry a { color: #e69065; text-decoration: none; }
	.blog-entry a:hover { text-decoration: underline; }
	.blog-entry a img { border: 0px; }
	
	.blog-entrydate { clear: both; float: left; width: 30px; height: 30px; color: #372e28; text-align: center; }
	.blog-entrydateno { font: 21px georgia, garamond, times new roman, serif; }
	.blog-entrydatemo { font: 10px arial, helvetica, verdana, tahoma, sans-serif; text-transform: uppercase; letter-spacing: 2px; }
		
	.blog-entryinfo {
		margin-bottom: 22px; 
		font: 10px arial, helvetica, verdana, tahoma, sans serif;
		letter-spacing: 2px;
		color: #645349;
		text-transform: uppercase;
		}
		
	.blog-entryinfo a { color: #645349; text-decoration: none; }	
	.blog-entryinfo a:hover { text-decoration: underline; }	
	.blog-entryinfo .blog-cmntlink a { color: #e69065; }	

	.blogimgL { float: left; margin-right: 20px; }
	.blogimgR { float: right; margin-left: 20px; }

	.more-link a {
		font: 10px arial, helvetica, verdana, tahoma, sans serif;
		color: #e69065;
		letter-spacing: 2px;
		text-transform: uppercase;
		text-decoration: none;
		}
		
	.more-link a:hover { text-decoration: underline; }

	.sociable_tagline { font: 11px Georgia, garamond, times new roman, times, serif; line-height: 20px; letter-spacing: 1px; color: #645349; }
	
	#blogentry-subscribe {  }
	#blogentry-subscribe img { float: left; margin: 5px 10px 0 0; }
	#blogentry-subscribe a { color: #e69065; text-decoration: none; }
	#blogentry-subscribe a:hover { background: #e69065; text-decoration: underline; }

	/* entry navigation */	
	/* for wp-pagenavi css, see pagenavi-css.css in the plugin folder */
	.wp-navigation {
		margin-bottom: 40px;
		/*text-align: center;*/
		}

	.wp-navigation a {
		color: #666699;
		text-decoration: none;
		}
	
	.wp-navigation a:hover, .wp-navigation a:active {
		color: #990066;
		text-decoration: underline;
		}
	
	/* blog user comments */
	
	#blog-usercomments { margin: 40px 0 0 0; }
	#blog-usercomments p a { color: #e69065; text-decoration: none; }
	#blog-usercomments p a:hover { text-decoration: underline; }
	
	.blog-comment { padding: 40px 10px 0 10px; height: auto; border-bottom: 1px solid #d2ccc6; }	

	.blog-commentuser p a { color: #e69065; }

	cite, cite a {
		font: 20px georgia, garamond, times new roman, times, serif;
		font-style: italic;
		color: #0cb7a4;
		text-decoration: none;
		}
		
	cite a:hover { text-decoration: underline; color: #e69065; }

	.blog-commentsection { width: 600px; height: 100%; }

	.blog-commentavatar { float: left; margin-right: 20px; width: 50px; text-align: center; }

	.commentmetadata a { color: #e79972; text-decoration: none;}
	.commentmetadata a:hover { color: #e79972; text-decoration: underline; }

	.blog-commententry { float: right; width: 530px; }
	.blog-commententry p { margin: 0 0 20px 0; }

		/* changes colour of author's comments */
		.authcomment { background-color: #ece7d9 !important; }

		/* comment form section */
		#blog-commentform {
			clear: both;
			padding: 30px 0 20px 0;
			font: 11px Georgia, garamond, times new roman, times, serif;
			letter-spacing: 1px;
			color: #645349;
			}
			
		#blog-commentform input, #blog-commentform textarea#comment {
			padding: 4px; 
			font: 11px Georgia, garamond, times new roman, times, serif;
			letter-spacing: 1px;
			color: #645349;
			border: 1px solid #645349;
			}
		
		#blog-commentform input { float: left; margin: 0 0px 10px 0; width: 260px; }
		#blog-commentform input#submit { clear: both; margin-left: 100px; width: 150px; background: #ece7d9; }
		#blog-commentform input#submit:hover { background: #e3dcc9; }
		#blog-commentform label { clear: both; float: left; margin: 0 20px 10px 0; width: 80px; }
		#blog-commentform label small { font-size: 7pt; }
		#blog-commentform textarea { float: left; margin: 0 0 10px 0; width: 490px; border: 1px solid #645349; line-height: 15px; }
		.post { margin-bottom: 20px; }
		ul.wp-ulcmnt { list-style: none; }

	/* archives */
	#blogarchives-main {
		float: left;
		width: 620px;
		height: auto;
		}
	
	.blog-archivescol {
		float: left;
		margin-right: 5px;
		width: 300px;
		}
	
	ul.blog-archiveslist { list-style: none; }
	
	ul.blog-archiveslist li {
		margin: 0;
		padding: 4px 0;
		width: 90%;
		font: 11px Georgia, garamond, times new roman, times, serif;
		line-height: 20px;
		letter-spacing: 1px;
		}

	ul.blog-archiveslist li a {	text-decoration: none; color: #e69065; }
	ul.blog-archiveslist li a:hover { text-decoration: underline; }

/* about section */
#about-main {
	float: left;
	width: 540px;
	height: auto;
	}
	
#about-sidebar {
	float: right;
	width: 300px;
	height: auto;
	}
	
#about-main p , #about-sidebar p {
	margin-bottom: 20px;
	font: 11px Georgia, garamond, times new roman, times, serif;
	line-height: 20px;
	letter-spacing: 1px;
	color: #645349;
	}

#about-main a , #about-sidebar a { color: #e69065; text-decoration: none;  }
#about-main a:hover, #about-sidebar a:hover { text-decoration: underline; }
#about-photo { float: left; margin: 5px 20px 20px 0; border: 4px solid #372e28; }

#about-sidebar ul.skills { list-style: none; }
#about-sidebar ul.skills li { 
	display: block;
	width: 125px;
	padding-left: 15px;
	background: url("../imgs/check.gif") left no-repeat;
	font: 10px arial, helvetica, verdana, tahoma, sans serif;
	letter-spacing: 2px;
	line-height: 20px;
	text-transform: uppercase;
	color: #645349;
	}
	
/* contact section */
#contact-main {
	float: left;
	width: 540px;
	height: auto;
	}
	
#contact-sidebar {
	float: right;
	width: 300px;
	height: auto;
	}
	
#contact-main p , #contact-sidebar p {
	margin-bottom: 20px;
	font: 11px Georgia, garamond, times new roman, times, serif;
	line-height: 20px;
	letter-spacing: 1px;
	color: #645349;
	}

#contact-main a , #contact-sidebar a { color: #e69065; text-decoration: none;  }
#contact-main a:hover, #contact-sidebar a:hover { text-decoration: underline; }

#contact-sidebar ul#contact-elsewhere { margin-bottom: 20px; list-style: none; }
#contact-sidebar ul#contact-elsewhere li.contact-social { display: block; float: left; width: 300px; }
#contact-sidebar ul#contact-elsewhere li.contact-social img { position: relative; top: 3px; left: 4px; padding-right: 10px; }
#contact-sidebar ul#contact-elsewhere li.contact-social a { font: 11px georgia, garamond, times new roman, serif; color: #e69065; line-height: 20px; letter-spacing: 1px; text-decoration: none; }
#contact-sidebar ul#contact-elsewhere li.contact-social a:hover { text-decoration: underline; }

a#PDFresume, a#PDFportfolio { display: block; width: 300px; height: 30px;  outline: none; }
a#PDFresume { background: url("../imgs/dlresume.jpg") 0 0 no-repeat; }
a#PDFresume:hover { background-position: 0 -30px; text-decoration: none; }
a#PDFportfolio { background: url("../imgs/dlportfolio.jpg") 0 0 no-repeat; }
a#PDFportfolio:hover { background-position: 0 -30px; text-decoration: none; }

	/* contact form */
	
	.cform {
		font: 11px Georgia, garamond, times new roman, times, serif;
		letter-spacing: 1px;
		color: #645349;
		}
		
	ol.cf-ol { list-style: none; }
	ol.cf-ol li { clear: both; }
	
	.cform input, .cform textarea {
		padding: 4px; 
		font: 11px Georgia, garamond, times new roman, times, serif;
		letter-spacing: 1px;
		color: #645349;
		border: 1px solid #645349;
		}

	.cform label { float: left; margin: 0 20px 10px 0; width: 80px; }
	.cform input { float: left; margin: 0 0px 10px 0; width: 260px; }
	.cform input.sendbutton { clear: both; margin-left: 100px; width: 150px; background: #ece7d9; }
	.cform input.sendbutton:hover { background: #e3dcc9; }
	.cform textarea { float: left; margin: 0 20px 10px 0; width: 400px; border: 1px solid #645349; line-height: 15px; }
	.reqtxt, .emailreqtxt { float: left; margin: 4px 0 18px 5px ; font-size: 10px; letter-spacing: normal; }
	.linklove { display: none; }
	
	.cf_info {
		margin-bottom: 20px;
		font: 11px Georgia, garamond, times new roman, times, serif;
		letter-spacing: 1px;
		line-height: 20px;
		color: #645349;
		}
		
	.failure {
		padding: 10px;
		color: #ff0000;
		font-weight: bold;
		background: #efd6d2;
		border: 1px solid #ff0000;
		border-left: none; 
		border-right: none; 
		}
		
	.success {
		padding: 10px;
		color: #0db9a3;
		font-weight: bold;
		background: #dfefe8;
		border: 1px solid #0db9a3;
		border-left: none; 
		border-right: none; 
		}
		
	.cf_info ol { margin-top: 10px; list-style: inside; font-weight: normal; }

/* footer */

#footer-wrapper {
	clear: both;
	padding-top: 2px;
	height: 260px;
	background: #372e28 url("../imgs/footer-top.gif") top repeat-x;
	overflow: hidden;
	}
		
#footer {
	margin: 0 auto;
	width: 860px;
	height: 260px;
	background: #372e28;
	}
	
#footer p { font: 11px georgia, garamond, times new roman, serif; color: #f7f5f0; line-height: 20px; }
#footer p a { color: #f7f5f0; text-decoration: underline; }
#footer p a:hover { color: #e69065; }
	
#footer-left { float: left; padding-right: 20px; width: 300px; }
#footer-middle { float: left; width: 300px; }
#footer-right { float: right; width: 220px; }

a#toplink:hover { background-position: 0px -30px; }
a#toplink {
	float: right;
	display: block;
	margin-bottom: 20px;
	padding: 8px 0 0 8px;
	width: 142px;
	height: 22px;
	background: url("../imgs/top-bg.jpg") 0px 0px no-repeat;
	font: 11px georgia, garamond, times new roman, serif;
	color: #f7f5f0;
	letter-spacing: 1.25px;
	text-decoration: none;
	}
	
#footer ul#footer-links { list-style: none; margin-top: 10px; height: 15px; font-size: 1px; }
#footer ul#footer-links li { float: left; margin-right: 12px; height: 15px;}
#footer ul#footer-links li a { display: block; height: 15px; outline: none; }
#footer ul#footer-links li#footer-rss a { width: 47px; background: url("../imgs/footer-rss.jpg") 0 0 no-repeat; text-decoration: none; }
#footer ul#footer-links li#footer-rss a:hover { background-position: 0 -15px; }
#footer ul#footer-links li#footer-xhtml a { width: 50px; background: url("../imgs/footer-xhtml.jpg") 0 0 no-repeat; text-decoration: none; }
#footer ul#footer-links li#footer-xhtml a:hover { background-position: 0 -15px; }
#footer ul#footer-links li#footer-css a { width: 31px; background: url("../imgs/footer-css.jpg") 0 0 no-repeat; text-decoration: none; }
#footer ul#footer-links li#footer-css a:hover { background-position: 0 -15px; }
	
/* headers */

h1 {
	float: left;
	position: relative;
	top: 20px;
	width: 160px;
	height: 68px;
	background: url("../imgs/veronicawong.jpg") 0 0 no-repeat;
	}
	
h1 a {
	display: block;
	width: 160px;
	height: 68px;
	text-decoration: none;
	}
	
h1 a:hover { background: url("../imgs/veronicawong.jpg") 0 -68px no-repeat; }
	
h2 {
	margin-bottom: 20px;
	font-family: georgia, serif; 
	font-size: 20px;
	color: #e69065;
	}

h4 {
	margin-bottom: 20px;
	font-family: georgia, serif; 
	font-size: 20px;
	color: #e69065;
	}

#about-sidebar h2, #contact-sidebar h2 { margin-bottom: 10px; }

h3 { 
		font: 20px georgia, garamond, times new roman, times, serif;
		font-style: italic;
		color: #0cb7a4;
		}

#footer h4 { color: #0cb7a4; }

	/* blog headers*/
	h3.blog-entrytitle { 
		font: 20px georgia, garamond, times new roman, times, serif;
		font-style: italic;
		color: #0cb7a4;
		}
		
	h3.blog-entrytitle a { color: #0cb7a4; text-decoration: none; }
	h3.blog-entrytitle a:hover { color: #e69065; }

	.blog-archivescol h3 { 
		font: 20px georgia, garamond, times new roman, times, serif;
		font-style: italic;
		color: #0cb7a4;
		}
	
	h4 { margin: 0px; color: #645349; }

/* miscellanous */

hr {
	margin: 20px 0;
	border: 0;
	color: #645349;
	background-color: #645349;
	height: 1px;
	}
	
#blog-main hr {
	clear: both;
	margin: 40px 0;
	border: 0;
	color: #645349;
	background-color: #645349;
	height: 1px;
	}

var { visibility: hidden; }
em { font-style: italic; }
.right { float: right; }
.left { float: left; }
.clear { clear: both; }

blockquote { margin-left: 20px; padding: 0 10px; border-left: 3px solid #645349; background: #ffffff; }

code { display: block; border: 1px solid #645349; background: #ffffff; padding: 5px; }

#portfolio-sidebar code { border: 0; background: none; padding: 0; }